/* OrNsoft UI kit — plain CSS components. Requires tokens/ornsoft-tokens.css. Prefix: .ons- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--ons-font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg);background:var(--bg-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::selection{background:color-mix(in oklab,var(--p-signature) 30%,transparent)}
[data-lucide],.ons-ico{width:18px;height:18px;stroke-width:1.75;flex:none}

/* Typography */
.ons-h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:var(--ls-h1);line-height:var(--lh-tight);margin:0}
.ons-h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:var(--ls-h2);line-height:var(--lh-tight);margin:0}
.ons-h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--ls-h3);line-height:var(--lh-snug);margin:0}
.ons-h4{font-size:var(--fs-md);font-weight:600;margin:0}
.ons-label{font-family:var(--ons-font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-muted)}
.ons-mono{font-family:var(--ons-font-mono);font-feature-settings:"zero" 0}
.ons-num{font-variant-numeric:tabular-nums}
.ons-muted{color:var(--fg-muted)}.ons-secondary{color:var(--fg-secondary)}
.ons-text-sm{font-size:var(--fs-sm)}.ons-text-xs{font-size:var(--fs-xs)}
p{margin:0;text-wrap:pretty}

/* Layout helpers */
.ons-row{display:flex;align-items:center;gap:var(--sp-2)}
.ons-stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.ons-spacer{flex:1}
.ons-grid{display:grid;gap:var(--gap)}
.ons-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ons-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ons-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ons-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.ons-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.ons-grid-2,.ons-grid-3,.ons-grid-4{grid-template-columns:minmax(0,1fr)}}
.ons-divider{height:1px;background:var(--border);border:0;margin:var(--sp-4) 0}

/* Buttons */
.ons-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-h);padding:0 14px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--fg);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);text-decoration:none!important}
.ons-btn:hover{background:var(--bg-hover);border-color:var(--fg-faint)}
.ons-btn:disabled,.ons-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ons-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.ons-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ons-btn--dark{background:var(--bg-inverse);border-color:var(--bg-inverse);color:var(--fg-inverse)}
.ons-btn--dark:hover{background:color-mix(in oklab,var(--bg-inverse) 86%,var(--bg-page));border-color:transparent}
.ons-btn--ghost{background:transparent;border-color:transparent;color:var(--fg-secondary)}
.ons-btn--ghost:hover{background:var(--bg-hover);border-color:transparent;color:var(--fg)}
.ons-btn--danger{background:var(--bg-surface);border-color:color-mix(in oklab,var(--danger) 40%,var(--border));color:var(--danger)}
.ons-btn--danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.ons-btn--sm{height:var(--ctl-h-sm);padding:0 10px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.ons-btn--sm [data-lucide]{width:15px;height:15px}
.ons-btn--lg{height:46px;padding:0 20px;font-size:var(--fs-md)}
.ons-btn--icon{width:var(--ctl-h);padding:0}
.ons-btn--icon.ons-btn--sm{width:var(--ctl-h-sm)}
.ons-btn--round{border-radius:var(--r-pill)}
.ons-btn--block{width:100%}
.ons-btn-group{display:inline-flex}
.ons-btn-group .ons-btn{border-radius:0;margin-left:-1px}
.ons-btn-group .ons-btn:first-child{border-radius:var(--r-md) 0 0 var(--r-md);margin-left:0}
.ons-btn-group .ons-btn:last-child{border-radius:0 var(--r-md) var(--r-md) 0}

/* Forms */
.ons-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ons-field__label{font-size:var(--fs-sm);font-weight:600;color:var(--fg)}
.ons-field__label .req{color:var(--danger);margin-left:2px}
.ons-field__hint{font-size:var(--fs-xs);color:var(--fg-muted)}
.ons-field__error{font-size:var(--fs-xs);color:var(--danger);display:flex;gap:4px;align-items:center}
.ons-input,.ons-select,.ons-textarea{width:100%;height:var(--ctl-h);padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg);font-size:var(--fs-sm);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ons-textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:var(--lh-body)}
.ons-input::placeholder,.ons-textarea::placeholder{color:var(--fg-faint)}
.ons-input:hover,.ons-select:hover,.ons-textarea:hover{border-color:var(--fg-faint)}
.ons-input:focus,.ons-select:focus,.ons-textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ons-input[aria-invalid="true"]{border-color:var(--danger)}
.ons-input:disabled,.ons-input[readonly]{background:var(--bg-sunken);color:var(--fg-secondary)}
.ons-select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.ons-input-wrap{position:relative;display:flex;align-items:center}
.ons-input-wrap>[data-lucide]{position:absolute;left:11px;color:var(--fg-faint);width:16px;height:16px;pointer-events:none}
.ons-input-wrap>.ons-input{padding-left:34px}
.ons-input-wrap>.ons-kbd{position:absolute;right:8px}
.ons-check{display:inline-flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);cursor:pointer;line-height:1.35}
.ons-check input{appearance:none;width:18px;height:18px;margin:0;flex:none;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--bg-surface);display:grid;place-content:center;cursor:pointer;transition:all var(--dur-fast)}
.ons-check input[type="radio"]{border-radius:50%}
.ons-check input:checked{background:var(--accent);border-color:var(--accent)}
.ons-check input[type="checkbox"]:checked::after{content:"";width:9px;height:5px;border:2px solid var(--accent-fg);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.ons-check input[type="radio"]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-fg)}
.ons-switch{appearance:none;width:36px;height:20px;border-radius:var(--r-pill);background:var(--border-strong);position:relative;cursor:pointer;transition:background var(--dur);margin:0;flex:none}
.ons-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease)}
.ons-switch:checked{background:var(--accent)}
.ons-switch:checked::after{transform:translateX(16px)}
.ons-seg{display:inline-flex;padding:3px;gap:2px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md)}
.ons-seg button{height:calc(var(--ctl-h) - 8px);padding:0 12px;border:0;background:transparent;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:500;color:var(--fg-muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ons-seg button:hover{color:var(--fg)}
.ons-seg button[aria-pressed="true"],.ons-seg button.is-active{background:var(--bg-surface);color:var(--fg);font-weight:600;box-shadow:var(--shadow-sm)}
.ons-range{width:100%;accent-color:var(--accent)}
.ons-dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--fg-muted);background:var(--bg-subtle)}
.ons-dropzone strong{color:var(--fg)}

/* Badges & tags */
.ons-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:var(--neutral-soft);color:var(--neutral);line-height:1}
.ons-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ons-badge--success{background:var(--success-soft);color:var(--success)}
.ons-badge--warning{background:var(--warning-soft);color:var(--warning)}
.ons-badge--danger{background:var(--danger-soft);color:var(--danger)}
.ons-badge--info{background:var(--info-soft);color:var(--info)}
.ons-badge--accent{background:var(--accent-soft);color:var(--accent-soft-fg)}
.ons-badge--outline{background:transparent;border:1px solid var(--border-strong);color:var(--fg-secondary)}
.ons-badge--mono{font-family:var(--ons-font-mono);font-weight:500;letter-spacing:.02em}
.ons-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:1}
.ons-kbd{font-family:var(--ons-font-mono);font-size:10.5px;padding:2px 6px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;color:var(--fg-muted);background:var(--bg-subtle)}

/* Cards */
.ons-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);min-width:0}
.ons-card__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--card-pad) var(--card-pad) 0}
.ons-card__head--bar{padding-bottom:calc(var(--card-pad) * .66);border-bottom:1px solid var(--border)}
.ons-card__title{font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--ls-h3);margin:0}
.ons-card__sub{font-size:var(--fs-xs);color:var(--fg-muted)}
.ons-card__actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.ons-card__body{padding:var(--card-pad)}
.ons-card__foot{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--card-pad);border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg);font-size:var(--fs-sm);color:var(--fg-secondary)}
.ons-card--flush .ons-card__body{padding:0}
.ons-card--inset{background:var(--bg-subtle);box-shadow:none}

/* KPI */
.ons-kpi{display:flex;flex-direction:column;gap:4px;padding:var(--card-pad);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);min-width:0}
.ons-kpi__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--fg-secondary);font-weight:500}
.ons-kpi__label [data-lucide]{width:16px;height:16px;color:var(--fg-muted)}
.ons-kpi__value{font-size:var(--fs-3xl);font-weight:800;letter-spacing:var(--ls-h1);line-height:1.1;font-variant-numeric:tabular-nums}
.ons-kpi__meta{font-size:var(--fs-xs);color:var(--fg-muted);display:flex;gap:6px;align-items:center}
.ons-kpi__delta--up{color:var(--success);font-weight:600}.ons-kpi__delta--down{color:var(--danger);font-weight:600}

/* Status filter chips (list header) */
.ons-filters{display:flex;flex-wrap:wrap;gap:6px}
.ons-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-surface);font-size:var(--fs-sm);color:var(--fg-secondary);cursor:pointer;white-space:nowrap}
.ons-chip b{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.ons-chip:hover{border-color:var(--border-strong)}
.ons-chip.is-active{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 45%,transparent);color:var(--accent-soft-fg)}
.ons-chip.is-active b{color:var(--accent-soft-fg)}
.ons-chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--fg-faint))}

/* Table */
.ons-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px var(--card-pad)}
.ons-table-wrap{overflow:auto;min-width:0}
.ons-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-table)}
.ons-table th{position:sticky;top:0;z-index:1;text-align:left;font-family:var(--ons-font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-muted);background:var(--bg-subtle);padding:0 12px;height:38px;border-bottom:1px solid var(--border);white-space:nowrap}
.ons-table th.is-sorted{color:var(--fg)}
.ons-table td{padding:8px 12px;height:var(--row-h);border-bottom:1px solid var(--border);vertical-align:middle;color:var(--fg)}
.ons-table tbody tr{transition:background var(--dur-fast)}
.ons-table tbody tr:hover{background:var(--bg-hover)}
.ons-table tbody tr.is-selected{background:var(--accent-soft)}
.ons-table tbody tr:last-child td{border-bottom:0}
.ons-table th:first-child,.ons-table td:first-child{padding-left:var(--card-pad)}
.ons-table th:last-child,.ons-table td:last-child{padding-right:var(--card-pad)}
.ons-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ons-table .id{font-family:var(--ons-font-mono);font-size:var(--fs-xs);color:var(--fg-secondary)}
.ons-table .sub{display:block;font-size:var(--fs-xs);color:var(--fg-muted);margin-top:2px}
.ons-table .strong{font-weight:600}
.ons-table .actions{display:flex;gap:2px;justify-content:flex-end;opacity:.55;transition:opacity var(--dur-fast)}
.ons-table tr:hover .actions{opacity:1}
.ons-pagination{display:flex;align-items:center;gap:4px;padding:12px var(--card-pad);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--fg-muted)}
.ons-pagination .ons-spacer+*{margin-left:0}
.ons-page{min-width:32px;height:32px;display:inline-grid;place-items:center;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--fg-secondary);font-size:var(--fs-sm);cursor:pointer;font-variant-numeric:tabular-nums}
.ons-page:hover{background:var(--bg-hover)}
.ons-page.is-active{background:var(--accent);color:var(--accent-fg);font-weight:700}

/* Tabs */
.ons-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.ons-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:0;background:transparent;font-size:var(--fs-sm);font-weight:500;color:var(--fg-muted);cursor:pointer;white-space:nowrap;text-decoration:none!important}
.ons-tab:hover{color:var(--fg)}
.ons-tab [data-lucide]{width:16px;height:16px}
.ons-tab.is-active{color:var(--fg);font-weight:600}
.ons-tab.is-active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.ons-tab .ons-badge{height:18px;padding:0 6px;font-size:10.5px}

/* Stepper (multi-step process) */
.ons-stepper{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.ons-step{display:flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 14px 0 8px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-surface);font-size:var(--fs-sm);font-weight:600;color:var(--fg-muted);cursor:pointer;white-space:nowrap}
.ons-step__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--ons-font-mono);font-size:11px;background:var(--bg-sunken);color:var(--fg-muted);border:1px solid var(--border)}
.ons-step__n [data-lucide]{width:14px;height:14px}
.ons-step.is-done{color:var(--fg);}
.ons-step.is-done .ons-step__n{background:var(--success);border-color:var(--success);color:#fff}
.ons-step.is-current{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 55%,transparent);color:var(--accent-soft-fg)}
.ons-step.is-current .ons-step__n{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.ons-step.is-locked{opacity:.6;cursor:default}
.ons-progress{height:6px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden;border:1px solid var(--border)}
.ons-progress>span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.ons-progress--success>span{background:var(--success)}

/* Alerts / banners */
.ons-alert{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);border:1px solid;font-size:var(--fs-sm)}
.ons-alert [data-lucide]{margin-top:1px;width:18px;height:18px}
.ons-alert__title{font-weight:700;display:block}
.ons-alert--info{background:var(--info-soft);border-color:color-mix(in oklab,var(--info) 30%,transparent);color:var(--fg)}.ons-alert--info>[data-lucide]{color:var(--info)}
.ons-alert--warning{background:var(--warning-soft);border-color:color-mix(in oklab,var(--warning) 35%,transparent);color:var(--fg)}.ons-alert--warning>[data-lucide]{color:var(--warning)}
.ons-alert--danger{background:var(--danger-soft);border-color:color-mix(in oklab,var(--danger) 30%,transparent);color:var(--fg)}.ons-alert--danger>[data-lucide]{color:var(--danger)}
.ons-alert--success{background:var(--success-soft);border-color:color-mix(in oklab,var(--success) 30%,transparent);color:var(--fg)}.ons-alert--success>[data-lucide]{color:var(--success)}
.ons-alert--ai{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 35%,transparent);color:var(--fg)}.ons-alert--ai>[data-lucide]{color:var(--accent-text)}

/* Avatars */
.ons-avatar{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--p-shade),var(--p-signature));overflow:hidden}
.ons-avatar img{width:100%;height:100%;object-fit:cover}
.ons-avatar--sm{width:24px;height:24px;font-size:10px}.ons-avatar--lg{width:48px;height:48px;font-size:16px}
.ons-avatar--neutral{background:var(--neutral-soft);color:var(--fg-secondary)}
.ons-avatars{display:flex}.ons-avatars .ons-avatar{border:2px solid var(--bg-surface);margin-left:-8px}.ons-avatars .ons-avatar:first-child{margin-left:0}

/* Definition list */
.ons-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}
.ons-dl--1{grid-template-columns:minmax(0,1fr)}
.ons-dl dt{font-size:var(--fs-xs);color:var(--fg-muted);margin-bottom:2px}
.ons-dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ons-dl--inline{grid-template-columns:auto minmax(0,1fr);gap:10px 16px;align-items:center}
.ons-dl--inline dt{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.ons-dl--inline dt [data-lucide]{width:15px;height:15px}

/* Timeline / activity */
.ons-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ons-tl{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.ons-tl::before{content:"";position:absolute;left:15.5px;top:32px;bottom:0;width:1px;background:var(--border)}
.ons-tl:last-child::before{display:none}
.ons-tl__icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg-sunken);border:1px solid var(--border);color:var(--fg-muted)}
.ons-tl__icon [data-lucide]{width:15px;height:15px}
.ons-tl__icon--success{background:var(--success-soft);border-color:transparent;color:var(--success)}
.ons-tl__icon--warning{background:var(--warning-soft);border-color:transparent;color:var(--warning)}
.ons-tl__icon--accent{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.ons-tl__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:5px}
.ons-tl__title{font-weight:600}
.ons-tl__time{font-family:var(--ons-font-mono);font-size:var(--fs-2xs);color:var(--fg-muted)}
.ons-tl__body{font-size:var(--fs-sm);color:var(--fg-secondary);margin-top:2px}

/* Empty state */
.ons-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;color:var(--fg-muted)}
.ons-empty__icon{width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--bg-sunken);border:1px solid var(--border);color:var(--fg-muted)}
.ons-empty__icon [data-lucide]{width:22px;height:22px}
.ons-empty__title{font-size:var(--fs-lg);font-weight:700;color:var(--fg)}
.ons-empty p{max-width:420px;font-size:var(--fs-sm)}

/* Modal / drawer */
.ons-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:flex-start;justify-content:center;padding:6vh 24px;z-index:100;overflow:auto;backdrop-filter:blur(2px)}
.ons-overlay[hidden]{display:none}
.ons-modal{width:100%;max-width:560px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:88vh}
.ons-modal--lg{max-width:880px}.ons-modal--sm{max-width:420px}
.ons-modal__head{display:flex;gap:12px;align-items:flex-start;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.ons-modal__title{font-size:var(--fs-xl);font-weight:800;letter-spacing:var(--ls-h2);margin:0}
.ons-modal__sub{font-size:var(--fs-sm);color:var(--fg-muted);margin-top:2px}
.ons-modal__body{padding:24px;overflow:auto;display:flex;flex-direction:column;gap:20px}
.ons-modal__foot{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:14px 24px;border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-xl) var(--r-xl)}
.ons-section-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:700}
.ons-section-title [data-lucide]{width:16px;height:16px;color:var(--accent-text)}
.ons-choice{display:flex;gap:12px;padding:14px;border:1px solid var(--border-strong);border-radius:var(--r-lg);cursor:pointer;background:var(--bg-surface);text-align:left}
.ons-choice:hover{border-color:var(--fg-faint)}
.ons-choice.is-selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--ring)}
.ons-choice__icon{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--bg-sunken);color:var(--fg-secondary);flex:none}
.ons-choice.is-selected .ons-choice__icon{background:var(--accent);color:var(--accent-fg)}
.ons-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--bg-surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:101;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease)}
.ons-drawer.is-open{transform:none}

/* Menu / dropdown / toast / tooltip */
.ons-menu{min-width:200px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:4px}
.ons-menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--fg);cursor:pointer;text-align:left}
.ons-menu__item:hover{background:var(--bg-hover)}
.ons-menu__item [data-lucide]{width:16px;height:16px;color:var(--fg-muted)}
.ons-menu__item--danger{color:var(--danger)}.ons-menu__item--danger [data-lucide]{color:var(--danger)}
.ons-menu__sep{height:1px;background:var(--border);margin:4px}
.ons-toast{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:var(--bg-inverse);color:var(--fg-inverse);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:500;min-width:280px}
.ons-toast [data-lucide]{color:var(--success)}
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--bg-inverse);color:var(--fg-inverse);font-size:12px;font-weight:500;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:50;pointer-events:none}

/* Charts (CSS only) */
.ons-bars{display:flex;flex-direction:column;gap:10px}
.ons-bar{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) 40px;gap:12px;align-items:center;font-size:var(--fs-sm)}
.ons-bar__track{height:8px;border-radius:var(--r-pill);background:var(--bg-sunken)}
.ons-bar__track>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.ons-donut{--v:40;--c:var(--accent);width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--v)*1%),var(--bg-sunken) 0);display:grid;place-items:center;flex:none}
.ons-donut>div{width:104px;height:104px;border-radius:50%;background:var(--bg-surface);display:grid;place-items:center;text-align:center;line-height:1.1}
.ons-donut strong{font-size:var(--fs-2xl);font-weight:800;letter-spacing:var(--ls-h2)}
.ons-cols{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:8px;border-bottom:1px solid var(--border)}
.ons-cols>div{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.ons-cols span{width:14px;border-radius:4px 4px 0 0;background:var(--chart-1)}
.ons-cols span.b{background:var(--chart-2)}
.ons-cols-x{display:flex;gap:10px}.ons-cols-x>span{flex:1;text-align:center;font-family:var(--ons-font-mono);font-size:var(--fs-2xs);color:var(--fg-muted);padding-top:6px}
.ons-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--fg-secondary)}
.ons-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}

/* ───────── App shell (Ceertia pattern) ───────── */
.ons-app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--dur-slow) var(--ease)}
.ons-app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr)}
.ons-brand{grid-row:1;grid-column:1;display:flex;align-items:center;justify-content:center;padding:0 12px;background:var(--bg-sidebar);border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.ons-brand img{height:40px;max-width:100%;object-fit:contain}
.ons-brand__full{display:flex;align-items:center;height:100%}
.ons-brand .ons-brand__sym{display:none;height:32px}
.is-collapsed .ons-brand .ons-brand__full{display:none}
.is-collapsed .ons-brand .ons-brand__sym{display:block}
/* Nav — matches Ceertia production: solid grey glyphs, label below, hairline rows, no group labels */
.ons-sidebar__toggle{padding:0 0 0 16px!important;font-size:14px}
.ons-sidebar__toggle span{font-weight:400!important;color:var(--fg-muted)}
.ons-sidebar__burger{align-self:stretch;width:52px;display:grid;place-items:center;background:var(--bg-sunken);color:var(--fg);font-size:16px}
.is-collapsed .ons-sidebar__burger{width:100%}
.ons-nav__group{display:none!important}
.ons-nav__item{min-height:76px!important;gap:6px!important;padding:12px 8px!important;font-size:13px;font-weight:400;color:var(--fg-muted)!important;text-align:center}
.ons-nav__ico{font-size:26px;line-height:1;color:var(--fg-muted);transition:color var(--dur-fast)}
.ons-nav__item:hover .ons-nav__ico{color:var(--fg)}
.ons-nav__item:hover{color:var(--fg)!important}
.ons-nav__item.is-active{background:var(--accent-soft);color:var(--fg)!important;font-weight:500}
.ons-nav__item.is-active .ons-nav__ico{color:var(--accent-text)}
.ons-nav__item.is-active::before{display:none}
.ons-nav__add{top:8px;right:10px;color:var(--fg-muted);font-size:16px}
.is-collapsed .ons-nav__item{min-height:60px!important}
.ons-sidebar{grid-row:2;grid-column:1;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;scrollbar-width:none}
.ons-sidebar__toggle{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 8px 0 16px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--fg-secondary);font-size:var(--fs-sm);cursor:pointer;width:100%}
.ons-sidebar__toggle span{font-weight:500}
.ons-sidebar__toggle i,.ons-sidebar__toggle svg{padding:6px;width:32px;height:32px;border-radius:var(--r-sm);background:var(--bg-sunken)}
.is-collapsed .ons-sidebar__toggle{justify-content:center;padding:0}.is-collapsed .ons-sidebar__toggle span{display:none}
.ons-nav{display:flex;flex-direction:column}
.ons-nav__group{font-family:var(--ons-font-mono);font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-faint);padding:14px 0 6px;text-align:center}
.is-collapsed .ons-nav__group{font-size:0;padding:8px 0 0;border-top:1px solid var(--border);margin:6px 16px 0}
.ons-nav__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 8px;border-bottom:1px solid var(--border);color:var(--fg-secondary);font-size:var(--fs-xs);font-weight:500;text-align:center;line-height:1.2;text-decoration:none!important;transition:background var(--dur-fast),color var(--dur-fast)}
.ons-nav__item [data-lucide],.ons-nav__item svg{width:24px;height:24px;stroke-width:1.6;color:var(--fg-muted);transition:color var(--dur-fast)}
.ons-nav__item:hover{background:var(--bg-hover);color:var(--fg)}
.ons-nav__item:hover svg{color:var(--fg)}
.ons-nav__item.is-active{background:var(--accent-soft);color:var(--accent-soft-fg);font-weight:600}
.ons-nav__item.is-active svg{color:var(--accent-text)}
.ons-nav__item.is-active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.ons-nav__item .ons-count{position:absolute;top:10px;right:calc(50% - 26px)}
.ons-nav__add{position:absolute;top:6px;right:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--fg-muted)}
.ons-nav__add:hover{background:var(--bg-sunken);color:var(--fg)}
.ons-nav__add svg{width:15px!important;height:15px!important}
.is-collapsed .ons-nav__item{min-height:56px}
.is-collapsed .ons-nav__item .ons-nav__text,.is-collapsed .ons-nav__add{display:none}
.ons-sidebar__foot{margin-top:auto;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;border-top:1px solid var(--border)}
.ons-sidebar__tenant{max-width:120px;max-height:28px;object-fit:contain}
.ons-sidebar__endorse{font-family:var(--ons-font-mono);font-size:10px;color:var(--fg-faint);letter-spacing:.02em}
.is-collapsed .ons-sidebar__endorse{display:none}

.ons-topbar{grid-row:1;grid-column:2;display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--bg-topbar);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;min-width:0}
.ons-topbar__title{position:relative;font-size:var(--fs-xl);font-weight:800;letter-spacing:var(--ls-h2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:stretch;display:flex;align-items:center}
.ons-topbar__title::after{content:"";position:absolute;left:0;width:36px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.ons-topbar__crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--fg-muted);white-space:nowrap}
.ons-topbar__crumbs a{color:var(--fg-muted)}
.ons-topbar__search{flex:1;max-width:440px;margin-left:16px}
.ons-topbar__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ons-status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--success-soft);color:var(--success);font-size:var(--fs-xs);font-weight:600;border:1px solid color-mix(in oklab,var(--success) 25%,transparent);white-space:nowrap}
.ons-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in oklab,currentColor 22%,transparent)}
.ons-iconbtn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:var(--bg-surface);color:var(--fg-secondary);cursor:pointer;flex:none}
.ons-iconbtn:hover{background:var(--bg-hover);color:var(--fg);border-color:var(--border-strong)}
.ons-iconbtn .ons-count{position:absolute;top:-3px;right:-3px}
.ons-user{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:var(--r-pill);border:0;background:transparent;cursor:pointer;text-align:left}
.ons-user:hover{background:var(--bg-hover)}
.ons-user__name{font-size:var(--fs-sm);font-weight:700;line-height:1.2;display:block}
.ons-user__role{font-size:var(--fs-xs);color:var(--fg-muted);line-height:1.2;display:block}
.ons-main{grid-column:2;grid-row:2;min-width:0;padding:28px 32px 48px;display:flex;flex-direction:column;gap:var(--gap)}
.ons-main--full{padding:0}
.ons-page-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px}
.ons-page-head__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ons-page-head__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ons-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--fg-muted);font-weight:500}
.ons-back svg{width:16px;height:16px}
.ons-footer{text-align:center;font-size:var(--fs-xs);color:var(--fg-faint);padding-top:16px}

/* Record header */
.ons-record{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ons-record__icon{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);flex:none}
.ons-record__icon svg{width:24px;height:24px}
.ons-record__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ons-record__meta{font-family:var(--ons-font-mono);font-size:var(--fs-xs);color:var(--fg-muted);letter-spacing:.02em;margin-top:4px}

/* Side panel (detail + info) */
.ons-split{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);gap:var(--gap);align-items:start}
.ons-split--3{grid-template-columns:300px minmax(0,1fr) 320px}
@media (max-width:1280px){.ons-split--3{grid-template-columns:minmax(0,1fr) 320px}.ons-split--3>:first-child{grid-column:1/-1}}
@media (max-width:980px){.ons-split,.ons-split--3{grid-template-columns:minmax(0,1fr)}}
.ons-sticky{position:sticky;top:calc(var(--topbar-h) + 20px)}
.ons-actionbar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:16px;padding:14px 32px;background:var(--bg-surface);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(11,15,26,.05);margin:0 -32px -48px}

/* Kanban & calendar */
.ons-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px}
.ons-kcol{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:320px}
.ons-kcol__head{display:flex;align-items:center;gap:8px;padding:4px 6px 6px;font-size:var(--fs-sm);font-weight:700}
.ons-kcard{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);cursor:grab}
.ons-kcard:hover{border-color:var(--border-strong)}
.ons-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.ons-cal>div{border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ons-cal .dow{min-height:0;padding:8px;font-family:var(--ons-font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-muted);background:var(--bg-subtle)}
.ons-cal .d{font-family:var(--ons-font-mono);font-size:var(--fs-xs);color:var(--fg-muted)}
.ons-cal .out{background:var(--bg-subtle)}.ons-cal .out .d{color:var(--fg-faint)}
.ons-cal .today .d{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-weight:700}
.ons-ev{font-size:11px;font-weight:600;padding:3px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent-soft-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ons-ev--warn{background:var(--warning-soft);color:var(--warning)}.ons-ev--ok{background:var(--success-soft);color:var(--success)}.ons-ev--neutral{background:var(--neutral-soft);color:var(--neutral)}

/* Notifications panel */
.ons-notif{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);position:relative}
.ons-notif.is-unread{background:var(--bg-subtle)}
.ons-notif.is-unread::after{content:"";position:absolute;right:18px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ons-notif__icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg-sunken);color:var(--fg-muted)}
.ons-notif__icon svg{width:16px;height:16px}

/* Settings nav */
.ons-subnav{display:flex;flex-direction:column;gap:2px}
.ons-subnav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-md);color:var(--fg-secondary);font-size:var(--fs-sm);font-weight:500;text-decoration:none}
.ons-subnav a:hover{background:var(--bg-hover);color:var(--fg)}
.ons-subnav a.is-active{background:var(--accent-soft);color:var(--accent-soft-fg);font-weight:600}
.ons-subnav svg{width:16px;height:16px}
.ons-setting{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--border)}
.ons-setting:first-child{border-top:0;padding-top:0}
@media (max-width:820px){.ons-setting{grid-template-columns:minmax(0,1fr);gap:10px}}

.lucide{width:18px;height:18px;flex:none}
@media (max-width:1180px){.ons-topbar__search{display:none}}
/* Responsive shell */
@media (max-width:860px){.ons-app,.ons-app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr)}.ons-app .ons-nav__text,.ons-app .ons-sidebar__toggle span,.ons-app .ons-brand__full{display:none}.ons-app .ons-brand__sym{display:block!important}.ons-main{padding:20px 16px 40px}.ons-topbar{padding:0 14px}.ons-user__txt,.ons-topbar__search,.ons-status{display:none}}