/* smargasy-ui.css — Smargasy design system (package) */
/* ─── OKLCH Tokens ─── */
:root {
  --brand-50:  oklch(97% 0.02 250); --brand-100: oklch(93% 0.05 250);
  --brand-200: oklch(86% 0.09 250); --brand-300: oklch(76% 0.13 250);
  --brand-400: oklch(65% 0.17 250); --brand-500: oklch(55% 0.20 250);
  --brand-600: oklch(47% 0.20 250); --brand-700: oklch(39% 0.18 250);
  --accent-400: oklch(82% 0.18 75); --accent-500: oklch(72% 0.22 75); --accent-600: oklch(62% 0.20 75);
  --success-50: oklch(96% 0.03 145); --success-200: oklch(85% 0.09 145);
  --success-500: oklch(62% 0.18 145); --success-700: oklch(42% 0.16 145);
  --warning-50: oklch(97% 0.03 65); --warning-200: oklch(88% 0.09 65);
  --warning-500: oklch(72% 0.18 65); --warning-700: oklch(52% 0.16 65);
  --danger-50: oklch(97% 0.03 25); --danger-200: oklch(88% 0.10 25);
  --danger-500: oklch(58% 0.22 25); --danger-700: oklch(40% 0.20 25);
  --info-50: oklch(96% 0.03 230); --info-500: oklch(58% 0.14 230);
}
html.light {
  --bg-base: oklch(98% 0.005 250); --bg-elevated: oklch(100% 0 0);
  --bg-overlay: oklch(100% 0 0); --bg-subtle: oklch(96% 0.005 250);
  --text-primary: oklch(15% 0.02 250); --text-secondary: oklch(42% 0.03 250);
  --text-tertiary: oklch(60% 0.02 250); --text-inverse: oklch(98% 0.005 250);
  --text-brand: oklch(50% 0.20 250); --text-danger: oklch(52% 0.22 25);
  --border-default: oklch(88% 0.01 250); --border-strong: oklch(75% 0.02 250);
  --border-brand: oklch(55% 0.20 250); --sidebar-bg: oklch(98% 0.008 250);
  --shadow-sm: 0 1px 3px oklch(0% 0 0/0.08),0 1px 2px oklch(0% 0 0/0.06);
  --shadow-md: 0 4px 6px oklch(0% 0 0/0.07),0 2px 4px oklch(0% 0 0/0.06);
  --shadow-lg: 0 10px 15px oklch(0% 0 0/0.08),0 4px 6px oklch(0% 0 0/0.05);
  --shadow-xl: 0 20px 25px oklch(0% 0 0/0.10),0 8px 10px oklch(0% 0 0/0.06);
}
html.dark {
  --bg-base: oklch(11% 0.01 250); --bg-elevated: oklch(15% 0.01 250);
  --bg-overlay: oklch(18% 0.01 250); --bg-subtle: oklch(13% 0.01 250);
  --text-primary: oklch(94% 0.01 250); --text-secondary: oklch(65% 0.02 250);
  --text-tertiary: oklch(48% 0.02 250); --text-inverse: oklch(12% 0.02 250);
  --text-brand: oklch(65% 0.20 250); --text-danger: oklch(65% 0.22 25);
  --border-default: oklch(24% 0.02 250); --border-strong: oklch(35% 0.02 250);
  --border-brand: oklch(60% 0.20 250); --sidebar-bg: oklch(13% 0.01 250);
  --brand-500: oklch(60% 0.20 250); --brand-600: oklch(68% 0.18 250);
  --brand-50: oklch(15% 0.03 250); --brand-100: oklch(20% 0.05 250);
  --brand-200: oklch(28% 0.08 250); --brand-700: oklch(76% 0.14 250);
  --success-50: oklch(16% 0.04 145); --success-700: oklch(68% 0.18 145);
  --warning-50: oklch(16% 0.04 65); --warning-700: oklch(76% 0.18 65);
  --danger-50: oklch(16% 0.04 25); --danger-700: oklch(65% 0.22 25);
  --info-50: oklch(16% 0.03 230);
  --shadow-sm: 0 1px 3px oklch(0% 0 0/0.30),0 1px 2px oklch(0% 0 0/0.20);
  --shadow-md: 0 4px 6px oklch(0% 0 0/0.25),0 2px 4px oklch(0% 0 0/0.20);
  --shadow-lg: 0 10px 15px oklch(0% 0 0/0.30),0 4px 6px oklch(0% 0 0/0.20);
  --shadow-xl: 0 20px 25px oklch(0% 0 0/0.40),0 8px 10px oklch(0% 0 0/0.25);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-base);color:var(--text-primary);line-height:1.5;min-height:100vh;transition:background .2s,color .2s}
a{color:var(--text-brand);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit;border:none}
svg{display:block;flex-shrink:0}
img{max-width:100%;display:block}

/* ─── Cards ─── */
.card{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:12px;box-shadow:var(--shadow-sm);transition:background .2s,border-color .2s}
.card-body{padding:20px;min-width:0}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.card-subtitle{font-size:12px;color:var(--text-secondary);margin-top:2px;line-height:1.45}
.card-footer{padding:14px 20px;border-top:1px solid var(--border-default);display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* ─── Buttons ─── */
/*
 * Official chrome (do not duplicate with a second kit):
 * .btn (+ btn-xs|sm|md|lg|xl), .card, .input, .textarea, .select,
 * .form-*, .toggle, .badge, .alert, .tabs, .modal-*, .drawer-*,
 * .dropdown-*, .table-wrap (+ --striped|--celled|--compact|…), .progress-*, .stepper, .avatar, .empty-state,
 * .row-action, .table-actions-cell, .td-center|.td-right|.td-numeric
 * .stat-card, .toast-*, .theme-toggle
 * Interactive widgets: <x-ui.datepicker>, <x-ui.timepicker>, <x-ui.checkbox>, …
 */
/* Base .btn includes md sizing so omitting btn-xs|sm|md|lg|xl never collapses into a cramped pill. Always still add an explicit size class in markup. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;font-size:14px;font-family:inherit;font-weight:500;border-radius:8px;transition:background .15s,color .15s,border-color .15s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-xs{height:28px;padding:0 10px;font-size:12px}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-md{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:48px;padding:0 24px;font-size:15px}
.btn-xl{height:56px;padding:0 32px;font-size:16px;font-weight:600}
.btn-full{width:100%}
.btn-primary{background:var(--brand-500);color:white}
.btn-primary:hover{background:var(--brand-600)}
.btn-secondary{background:var(--bg-elevated);border-color:var(--border-default);color:var(--text-primary)}
.btn-secondary:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.btn-danger{background:var(--danger-50);border-color:var(--danger-200);color:var(--danger-500)}
.btn-danger:hover{background:var(--danger-200)}
.btn-ghost{background:transparent;color:var(--text-brand)}
.btn-ghost:hover{background:var(--brand-50)}
.btn-success{background:var(--success-500);color:white}
.btn-success:hover{background:var(--success-700)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none}
.btn-primary:disabled,.btn-primary[disabled]{background:var(--bg-subtle);color:var(--text-tertiary);border-color:var(--border-default)}
.btn-primary:disabled:hover,.btn-primary[disabled]:hover{background:var(--bg-subtle)}

/* ─── Form Fields ─── */
.form-group{margin-bottom:16px}
.posting-schedule{display:grid;grid-template-columns:88px 44px minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:center}
.posting-schedule__spacer{height:0}
.posting-schedule__head{font-size:11px;font-weight:500;color:var(--text-tertiary);line-height:1;padding-bottom:2px;align-self:end}
.posting-schedule__day{font-size:13px;font-weight:500;color:var(--text-primary);text-transform:capitalize;line-height:1.2}
.posting-schedule__toggle{width:44px;height:24px;margin:0;justify-self:start}
.posting-schedule__field{min-width:0;display:flex;flex-direction:column;gap:4px}
.posting-schedule__time{width:100%;min-width:0}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:6px}
.form-hint{font-size:12px;color:var(--text-tertiary);margin-top:4px}
.form-error{font-size:12px;color:var(--text-danger);margin-top:4px}
.input{width:100%;height:40px;padding:0 12px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:8px;font-family:inherit;font-size:14px;color:var(--text-primary);transition:border-color .15s,box-shadow .15s;outline:none}
.input::placeholder{color:var(--text-tertiary)}
.input:focus{border-color:var(--border-brand);box-shadow:0 0 0 3px oklch(55% 0.20 250/0.15)}
.input.error{border-color:var(--danger-500);box-shadow:0 0 0 3px oklch(58% 0.22 25/0.15)}
.textarea{width:100%;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:8px;font-family:inherit;font-size:14px;color:var(--text-primary);transition:border-color .15s;outline:none;resize:vertical;min-height:100px;line-height:1.5}
.textarea::placeholder{color:var(--text-tertiary)}
.textarea:focus{border-color:var(--border-brand);box-shadow:0 0 0 3px oklch(55% 0.20 250/0.15)}
.select{width:100%;height:40px;padding:0 36px 0 12px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:8px;font-family:inherit;font-size:14px;color:var(--text-primary);outline:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.select:focus{border-color:var(--border-brand)}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1}
.char-counter{font-size:11px;color:var(--text-tertiary);text-align:right;margin-top:3px}
.char-counter.warn{color:var(--warning-500)}
.char-counter.over{color:var(--danger-500)}

/* ─── Toggle ─── */
.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0;cursor:pointer}
.toggle input{opacity:0;width:100%;height:100%;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1}
.toggle.is-locked{cursor:default;pointer-events:none;opacity:1}
.toggle-track{position:absolute;inset:0;background:var(--border-default);border-radius:99px;transition:background .2s}
.toggle input:checked+.toggle-track{background:var(--brand-500)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:white;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s}
.toggle input:checked~.toggle-thumb{transform:translateX(20px)}
.theme-card.card-body{padding:12px 14px}
.theme-card__header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;margin-bottom:6px}
.theme-card__header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.theme-card__name{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.theme-card__name--static{display:block}
.theme-card__desc-view{margin-bottom:8px}
.theme-card__desc-text{margin:0;font-size:12px;line-height:1.45;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.theme-card__desc-text--empty{color:var(--text-tertiary);font-style:italic;-webkit-line-clamp:1}
.theme-card__footer{display:flex;align-items:center;gap:10px;margin-top:2px}
.theme-card__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.theme-card__icon-btn{width:28px;height:28px;border-radius:6px;background:none;border:none;color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;padding:0}
.theme-card__icon-btn:hover{background:var(--bg-subtle);color:var(--text-primary)}
.theme-card__icon-btn--danger{color:var(--danger-600)}
.theme-card__icon-btn--danger:hover{background:var(--danger-50);color:var(--danger-700)}
.theme-card__weight{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.theme-card__weight-label{flex-shrink:0;font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.theme-card__weight-slider{flex:1;min-width:0;accent-color:var(--brand-500)}
.theme-card__toggle{width:44px;height:24px;position:relative;flex-shrink:0}
.toggle-label{font-size:14px;color:var(--text-primary)}
.toggle-label-sm{font-size:13px;color:var(--text-secondary)}

/* ─── Badges ─── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.badge-scheduled{background:var(--brand-50);color:var(--brand-700)}
.badge-published{background:var(--success-50);color:var(--success-700)}
.badge-failed{background:var(--danger-50);color:var(--danger-700)}
.badge-draft{background:var(--bg-subtle);color:var(--text-secondary);border:1px solid var(--border-default)}
.badge-approved{background:var(--success-50);color:var(--success-700)}
.badge-pending{background:var(--warning-50);color:var(--warning-700)}
.badge-icp{background:oklch(97% 0.03 75);color:oklch(42% 0.20 75)}
html.dark .badge-icp{background:oklch(16% 0.04 75);color:oklch(78% 0.20 75)}
.badge-focus{background:var(--brand-50);color:var(--brand-700)}
.badge-high{background:var(--brand-50);color:var(--brand-600)}
.badge-medium{background:var(--bg-subtle);color:var(--text-secondary)}
.badge-lg{padding:4px 12px;font-size:12px;border-radius:8px}

/* ─── Tables ─── */
.table-wrap{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.table-header{display:grid;padding:0 16px;min-height:44px;align-items:center;background:var(--bg-subtle);border-bottom:1px solid var(--border-default)}
.table-header > *,.table-row > *{min-width:0}
.th{font-size:12px;font-weight:500;color:var(--text-tertiary)}
.table-row{display:grid;padding:10px 16px;align-items:center;border-bottom:1px solid var(--border-default);transition:background .15s;cursor:pointer;min-height:56px}
.table-row:last-child{border-bottom:none}
.table-row:hover{background:var(--bg-subtle)}
.td{font-size:13px;color:var(--text-primary)}
.td-secondary{font-size:12px;color:var(--text-secondary)}
.td-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-center{justify-self:center;text-align:center}
.td-right{justify-self:end;text-align:right}
.td-numeric{font-variant-numeric:tabular-nums}
.td-double-underline{border-bottom:3px double var(--border-strong,var(--border-default))}

/* Table presentation modifiers (Phase 4) */
.table-wrap--striped > .table-row:nth-child(even):not(.admin-table-empty){background:var(--bg-subtle)}
.table-wrap--striped > .table-row.admin-row-failed,
.table-wrap--striped > .table-row.admin-row-warning,
.table-wrap--striped > .table-row.is-failed{background:var(--danger-50)}
.table-wrap--striped > .table-row.admin-row-warning{background:var(--warning-50)}
.table-wrap--striped > .table-row.admin-table-empty{background:transparent}
.table-wrap--compact .table-header{min-height:40px;padding:0 12px}
.table-wrap--compact .table-row{min-height:48px;padding:8px 12px}
.table-wrap--no-hover > .table-row:hover{background:transparent}
.table-wrap--flat > .table-row{border-bottom:none}
.table-wrap--divider-thin > .table-row{border-bottom-color:color-mix(in oklch,var(--border-default) 55%,transparent)}
.table-wrap--divider-thin .table-row{min-height:52px;padding-top:8px;padding-bottom:8px}
.table-wrap--borderless{border:none;box-shadow:none;background:transparent}
.table-wrap--shadowless{box-shadow:none}
.table-wrap--celled .table-header,
.table-wrap--celled .table-row{border-bottom:none;gap:0}
.table-wrap--celled .table-header > *,
.table-wrap--celled .table-row > *{
  border:1px solid var(--border-default);
  padding:10px 12px;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
}
.table-wrap--celled .table-header > *{background:var(--bg-subtle)}
.table-wrap--celled.table-wrap--flat .table-row > *{border-top:none}
.table-wrap--celled.table-wrap--flat .table-header > * + *{border-left:none}
.table-wrap--celled .table-row > * + *{border-left:none}
.table-wrap--celled .table-row + .table-row > *{border-top:none}

/* Row action toolbar (Phase 4; .admin-* aliases kept for legacy admin blades) */
.row-action,
.admin-row-action{width:30px;height:30px;border-radius:6px;border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;flex-shrink:0;text-decoration:none;padding:0;font:inherit;box-shadow:var(--shadow-xs,0 1px 2px rgb(0 0 0 / 4%))}
.row-action:hover,
.admin-row-action:hover{background:var(--bg-subtle);color:var(--text-primary);border-color:var(--border-strong,var(--border-default))}
.row-action--danger,
.admin-row-action--danger{color:var(--danger-500)}
.row-action--danger:hover,
.admin-row-action--danger:hover{color:var(--danger-600);background:var(--danger-50);border-color:var(--danger-200)}
.row-action--primary,
.admin-row-action--primary{color:var(--brand-600)}
.row-action--primary:hover,
.admin-row-action--primary:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-700)}
.row-action:disabled,
.admin-row-action:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.table-actions-cell,
.admin-actions-cell{display:flex;gap:4px;justify-content:flex-end;align-items:center;width:100%;justify-self:end}
.table-actions-cell--start{justify-content:flex-start;justify-self:start}
.table-actions-cell--center{justify-content:center;justify-self:center}
.table-actions-cell--end{justify-content:flex-end;justify-self:end}

/* ─── Alerts ─── */
.alert{border-radius:10px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px;border:1px solid;margin-bottom:16px}
.alert-warning{background:var(--warning-50);border-color:var(--warning-200)}
.alert-danger{background:var(--danger-50);border-color:var(--danger-200)}
.alert-info{background:var(--brand-50);border-color:var(--brand-200)}
.alert-success{background:var(--success-50);border-color:var(--success-200)}
.alert-icon{flex-shrink:0;margin-top:1px}
.alert-content{flex:1}
.alert-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.alert-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.alert-dismiss{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px;border-radius:4px;margin-left:auto}
.alert-dismiss:hover{color:var(--text-secondary);background:var(--bg-subtle)}

/* ─── Progress ─── */
.progress-track{height:6px;background:var(--bg-subtle);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--brand-500);border-radius:99px;transition:width .3s}
.progress-fill-success{background:var(--success-500)}
.progress-fill-muted{background:var(--text-tertiary)}
.progress-fill-danger{background:var(--danger-500)}

/* ─── Stepper ─── */
.stepper{display:flex;align-items:center;padding:16px 32px;background:var(--bg-elevated);border-bottom:1px solid var(--border-default)}
.step-item{display:flex;flex-direction:column;align-items:center;flex:1}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;transition:background .2s}
.step-circle.done{background:var(--success-500);color:white}
.step-circle.active{background:var(--brand-500);color:white}
.step-circle.pending{background:var(--bg-subtle);color:var(--text-tertiary);border:1.5px solid var(--border-default)}
.step-label{font-size:11px;color:var(--text-tertiary);margin-top:5px;text-align:center}
.step-label.active{color:var(--brand-600);font-weight:600}
.step-label.done{color:var(--success-700)}
.step-connector{flex:1;height:2px;background:var(--border-default);margin:0 4px;margin-bottom:16px}
.step-connector.done{background:var(--success-500)}
.step-connector.active{background:var(--brand-300)}
.upload-dropzone{transition:border-color .15s}
.upload-dropzone:hover{border-color:var(--border-brand)!important}
.theme-add-card{transition:border-color .15s,background .15s}
.theme-add-card:hover{border-color:var(--border-brand)!important;background:var(--bg-subtle)!important}

/* ─── Avatar ─── */
.avatar{border-radius:50%;background:var(--brand-500);display:flex;align-items:center;justify-content:center;font-weight:600;color:white;flex-shrink:0}
.avatar-sm{width:28px;height:28px;font-size:11px}
.avatar-md{width:36px;height:36px;font-size:13px}
.avatar-lg{width:40px;height:40px;font-size:15px}
.avatar-xl{width:56px;height:56px;font-size:20px}

/* ─── Divider ─── */
.divider{height:1px;background:var(--border-default);margin:20px 0}
.divider-label{display:flex;align-items:center;gap:12px;margin:20px 0}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--border-default)}
.divider-text{font-size:12px;color:var(--text-tertiary);white-space:nowrap}

/* ─── Tabs ─── */
.tabs{display:flex;border-bottom:1px solid var(--border-default);margin-bottom:20px}
.tab{padding:10px 16px;font-size:14px;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;background:none;border-top:none;border-left:none;border-right:none;margin-bottom:-1px;text-decoration:none;display:inline-block}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--brand-600);border-bottom-color:var(--brand-500)}

.brand-logo-row{display:flex;gap:20px;align-items:center}
.brand-logo-preview{width:112px;height:112px;flex-shrink:0;border:1px dashed var(--border-default);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-subtle)}
.brand-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;padding:10px}
.brand-logo-placeholder{font-size:12px;color:var(--text-tertiary);text-align:center;padding:10px;line-height:1.35}
.brand-logo-actions{display:flex;flex-direction:column;gap:8px;min-width:0}
.brand-logo-actions .ui-dropzone{padding:12px 16px;text-align:left;border-width:1px;border-radius:10px}
.brand-logo-actions .ui-dropzone__title{font-size:13px;font-weight:500;margin-bottom:0}
.brand-logo-actions .ui-dropzone__hint{margin-top:4px}
.brand-color-list{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.brand-color-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-color-swatch{position:relative;width:48px;height:48px;border-radius:12px;border:1px solid var(--border-default);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.brand-color-remove{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:none;background:var(--danger-500);color:#fff;font-size:12px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.brand-color-hex{font-size:11px;color:var(--text-secondary)}
.brand-color-add{display:flex;align-items:center;gap:10px;padding-bottom:2px}
.brand-color-picker{width:48px;height:48px;padding:0;border:1px solid var(--border-default);border-radius:12px;background:transparent;cursor:pointer}
.brand-style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.visual-style-preview,.layout-archetype-preview{height:72px;overflow:hidden;border-radius:8px 8px 0 0;background:var(--bg-subtle)}
.visual-style-preview__img,.layout-archetype-preview__img{width:100%;height:72px;object-fit:cover;display:block}
.brand-style-grid .visual-style-preview,.brand-style-grid .layout-archetype-preview,.post-visual-picker__card .visual-style-preview,.post-visual-picker__card .layout-archetype-preview{height:auto;aspect-ratio:4/5}
.brand-style-grid .visual-style-preview__img,.brand-style-grid .layout-archetype-preview__img,.post-visual-picker__card .visual-style-preview__img,.post-visual-picker__card .layout-archetype-preview__img{height:100%;width:100%;aspect-ratio:4/5;object-fit:cover}
.layout-archetype-preview__fallback{height:72px;background:linear-gradient(135deg,var(--bg-subtle),var(--border-default))}
.brand-style-grid .layout-archetype-preview__fallback,.post-visual-picker__card .layout-archetype-preview__fallback{height:auto;aspect-ratio:4/5;min-height:100px}
.selectable-preview-card{display:block;min-width:0}
.selectable-preview-card__hit{cursor:pointer;text-align:left;width:100%;display:block;border:none;background:none;padding:0;font:inherit;color:inherit}
.selectable-preview-card__media{position:relative;display:block}
.preview-zoom-btn{position:absolute;bottom:8px;right:8px;min-width:28px;min-height:28px;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:oklch(100% 0 0/.92);box-shadow:var(--shadow-sm);border:1px solid var(--border-default);opacity:0;transition:opacity .15s ease;z-index:2;cursor:zoom-in;color:var(--text-primary)}
.selectable-preview-card:hover .preview-zoom-btn,.selectable-preview-card:focus-within .preview-zoom-btn,.preview-zoom-btn:focus-visible{opacity:1}
@media (hover:none){.preview-zoom-btn{opacity:1}}
.post-visual-picker{margin:0 0 12px}
.post-visual-picker__section{margin-bottom:12px}
.post-visual-picker__label{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.post-visual-picker__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.post-visual-picker__grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.post-visual-picker__card{border:1px solid var(--border-default);border-radius:10px;padding:0;background:var(--bg-elevated);cursor:pointer;text-align:left;overflow:hidden}
.post-visual-picker__card.is-selected{border:2px solid var(--brand-500)}
.post-visual-picker__card-label{display:block;padding:6px 8px;font-size:11px;color:var(--text-secondary)}
.post-visual-picker__card.is-selected .post-visual-picker__card-label{color:var(--brand-600)}
.post-visual-picker__style-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-visual-picker__style-chip{display:flex;align-items:center;gap:6px;border:1px solid var(--border-default);border-radius:999px;padding:4px 10px 4px 4px;background:var(--bg-elevated);cursor:pointer;font-size:11px;color:var(--text-secondary)}
.post-visual-picker__style-chip .visual-style-preview,.post-visual-picker__style-chip .layout-archetype-preview{width:28px;height:28px;border-radius:6px;flex-shrink:0}
.post-visual-picker__style-chip .visual-style-preview__img,.post-visual-picker__style-chip .layout-archetype-preview__img{height:28px}
.post-visual-picker__style-chip.is-selected{border-color:var(--brand-500);color:var(--brand-600)}
.post-visual-picker__templates{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-visual-picker__template{width:48px;height:60px;border:1px solid var(--border-default);border-radius:8px;overflow:hidden;padding:0;background:var(--bg-elevated);cursor:pointer}
.post-visual-picker__template.is-selected{border:2px solid var(--brand-500)}
.post-visual-picker__template img{width:100%;height:100%;object-fit:cover;display:block}
.post-visual-picker__hint{font-size:11px;color:var(--text-tertiary);margin-top:4px}
.post-visual-picker--compact .post-visual-picker__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.saved-templates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.saved-template-card{border:1px solid var(--border-default);border-radius:10px;overflow:hidden;background:var(--bg-elevated)}
.saved-template-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.saved-template-card__body{padding:10px}
@media (max-width:768px){
  .post-visual-picker__grid,.post-visual-picker__grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.brand-style-card{border:1px solid var(--border-default);border-radius:10px;padding:0;background:var(--bg-elevated);cursor:pointer;text-align:left;overflow:hidden}
.brand-style-card.is-selected{border:2px solid var(--brand-500)}
.brand-style-label{padding:8px;font-size:11px;font-weight:500;color:var(--text-primary)}
.brand-style-card.is-selected .brand-style-label{color:var(--brand-600)}
.brand-reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.brand-reference-card{border:1px dashed var(--border-default);border-radius:10px;padding:14px;text-align:center}
.brand-reference-card.is-disabled{opacity:.6}
@media (max-width:640px){
  .brand-logo-row{flex-direction:column;align-items:flex-start}
  .brand-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-reference-grid{grid-template-columns:1fr}
}

/* ─── Section Header ─── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.section-link{font-size:13px;color:var(--text-brand)}
.section-link:hover{text-decoration:underline}

/* ─── Grid Utilities ─── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-5{gap:20px}
.opacity-60{opacity:.6}
.min-w-0{min-width:0}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.p-4{padding:16px}
.p-5{padding:20px}
.p-6{padding:24px}
.text-xs{font-size:12px}
.text-sm{font-size:13px}
.text-base{font-size:14px}
.text-lg{font-size:16px}
.text-xl{font-size:18px}
.text-2xl{font-size:22px}
.font-500{font-weight:500}
.font-600{font-weight:600}
.font-700{font-weight:700}
.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.text-tertiary{color:var(--text-tertiary)}
.text-brand{color:var(--text-brand)}
.text-success{color:var(--success-500)}
.text-warning{color:var(--warning-500)}
.text-danger{color:var(--danger-500)}
.text-accent{color:var(--accent-500)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rounded{border-radius:8px}
.rounded-lg{border-radius:12px}
.rounded-full{border-radius:99px}
.w-full{width:100%}
.w-auto{width:auto}
.stack{display:flex;flex-direction:column;gap:12px}
.border{border:1px solid var(--border-default)}
.bg-subtle{background:var(--bg-subtle)}
.bg-elevated{background:var(--bg-elevated)}

/* ─── Toast ─── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{width:340px;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg);padding:14px 16px;display:flex;align-items:flex-start;gap:10px;animation:slideIn .25s ease;border-left:4px solid}
.toast.success{border-left-color:var(--success-500)}
.toast.warning{border-left-color:var(--warning-500)}
.toast.info{border-left-color:var(--brand-500)}
.toast-content{flex:1}
.toast-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.toast-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.toast-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px;border-radius:4px}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ─── Backdrop ─── */
.backdrop{position:fixed;inset:0;z-index:50;display:none}
.backdrop.open{display:block}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}

/* ─── Empty State ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}
.empty-icon{width:48px;height:48px;color:var(--text-tertiary);margin-bottom:16px}
.empty-title{font-size:16px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.empty-desc{font-size:13px;color:var(--text-tertiary);max-width:320px}
.empty-state__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}

/* ─── Stat Card ─── */
.stat-card{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:10px;padding:16px;box-shadow:var(--shadow-sm)}
.quick-stats .stat-card{padding:14px}
.quick-stats .stat-icon{width:28px;height:28px;border-radius:7px;margin-bottom:8px}
.quick-stats .stat-value{font-size:22px}
.quick-stats .stat-label{font-size:11px;margin-top:3px}
.quick-stats .stat-change{margin-top:4px}
.stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat-icon-blue{background:var(--brand-50);color:var(--brand-500)}
.stat-icon-green{background:var(--success-50);color:var(--success-500)}
.stat-icon-amber{background:var(--warning-50);color:var(--warning-500)}
.stat-icon-purple{background:var(--info-50);color:var(--info-500)}
.stat-value{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-label{font-size:12px;color:var(--text-tertiary);margin-top:4px}
.stat-change{font-size:11px;margin-top:5px;display:flex;align-items:center;gap:3px}
.stat-up{color:var(--success-500)}
.stat-down{color:var(--danger-500)}

/* ─── Inline Alert ─── */
.inline-alert{border-radius:8px;padding:10px 12px;border:1px solid;display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.inline-alert-warning{background:var(--warning-50);border-color:var(--warning-200)}
.inline-alert-danger{background:var(--danger-50);border-color:var(--danger-200)}
.inline-alert-info{background:var(--brand-50);border-color:var(--brand-200)}
.inline-alert-success{background:var(--success-50);border-color:var(--success-200)}

/* ─── Modal ─── */
.modal-backdrop{position:fixed;inset:0;background:oklch(12% 0.02 250/0.4);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center}
.modal{background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:16px;box-shadow:var(--shadow-xl);width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-sm{max-width:480px}
.modal-md{max-width:640px}
.modal-lg{max-width:800px}
.modal-carousel{max-width:900px}
.carousel-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.carousel-editor-main{min-width:0}
.carousel-editor-preview-panel{position:sticky;top:0;align-self:start}
.carousel-editor-slides{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;max-height:52vh;overflow-y:auto;padding-right:4px}
.carousel-editor-slide{padding:12px}
.carousel-editor-slide__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.carousel-editor-slide__label{font-size:12px;font-weight:600;color:var(--text-secondary)}
.carousel-editor-slide__tools{display:flex;gap:6px}
.carousel-editor-bullet{display:flex;gap:6px;margin-bottom:6px}
.carousel-editor-preview{background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:12px;padding:20px;min-height:220px}
.carousel-editor-preview__label{font-size:11px;color:var(--text-tertiary);margin-bottom:8px}
.carousel-editor-preview__headline{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.carousel-editor-preview__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.carousel-editor-preview__list li{font-size:13px;color:var(--text-secondary)}
.carousel-editor-preview__image{width:100%;border-radius:8px;object-fit:cover}
.carousel-editor-deck-total{display:block;margin-top:6px;font-weight:600;color:var(--text-secondary)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header--stacked{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:16px}
.modal-header__row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.modal-header__subrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.modal-header__hint{font-size:12px;color:var(--text-tertiary);line-height:1.45;margin:0;flex:1;min-width:0}
.modal-header__action{flex-shrink:0;white-space:nowrap}
.modal-title{font-size:17px;font-weight:700;color:var(--text-primary)}
.modal-close{flex-shrink:0;color:var(--text-primary);background:var(--bg-subtle);border-color:var(--border-default)}
.modal-close:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-strong)}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border-default);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
.modal-footer--split{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.modal-footer__note{font-size:12px;color:var(--text-tertiary);margin:0;line-height:1.45;flex:1;min-width:min(100%,220px)}
.modal-footer__note.is-warn{color:var(--warning-700)}
.modal-footer__actions{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}

/* ─── Drawer ─── */
.drawer-backdrop{position:fixed;inset:0;background:oklch(12% 0.02 250/0.4);backdrop-filter:blur(2px);z-index:100;display:flex;justify-content:flex-end}
.drawer{width:100%;max-width:420px;height:100%;background:var(--bg-overlay);border-left:1px solid var(--border-default);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;animation:drawer-slide-in .2s ease}
.drawer-header{padding:20px 24px;border-bottom:1px solid var(--border-default);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0}
.drawer-header__copy{min-width:0}
.drawer-eyebrow{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.drawer-title{font-size:17px;font-weight:700;color:var(--text-primary);line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.drawer-body{padding:24px;overflow-y:auto;flex:1}
.drawer-footer{padding:16px 24px;border-top:1px solid var(--border-default);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
@keyframes drawer-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (max-width:640px){.drawer{max-width:100%}}

/* ─── Dropdown ─── */
.dropdown{position:absolute;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg);z-index:60;min-width:180px;overflow:hidden}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background .15s;background:none;border:none;width:100%;text-align:left}
.dropdown-item:hover{background:var(--bg-subtle);color:var(--text-primary)}
.dropdown-item.danger:hover{background:var(--danger-50);color:var(--danger-500)}
.dropdown-divider{height:1px;background:var(--border-default)}
.dropdown-header{padding:10px 14px;border-bottom:1px solid var(--border-default)}

/* ─── UI widgets (datepicker, timepicker, checkbox, …) ─── */
.ui-pop{position:absolute;z-index:120;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg);padding:10px}
.ui-datepicker,.ui-timepicker{position:relative;width:100%}
.ui-datepicker__control,.ui-timepicker__control{position:relative;width:100%}
.ui-datepicker__trigger,.ui-timepicker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer}
.ui-datepicker__trigger:disabled,.ui-timepicker__trigger:disabled{opacity:.45;cursor:not-allowed}
.ui-datepicker__placeholder,.ui-timepicker__placeholder{color:var(--text-tertiary)}
.ui-datepicker__icon,.ui-timepicker__icon{color:var(--text-tertiary);flex-shrink:0}
.ui-datepicker__panel,.ui-timepicker__panel{top:calc(100% + 6px);left:0;min-width:280px;padding:12px}
.ui-datepicker__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ui-datepicker__month-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center;flex:1}
.ui-datepicker__nav{padding:0 6px!important;min-width:28px}
.ui-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.ui-datepicker__weekday{font-size:11px;font-weight:500;color:var(--text-tertiary);text-align:center;padding:4px 0}
.ui-datepicker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ui-datepicker__day{height:32px;border:none;border-radius:8px;background:transparent;font-size:13px;color:var(--text-primary);cursor:pointer;transition:background .15s,color .15s}
.ui-datepicker__day:hover:not(:disabled){background:var(--bg-subtle)}
.ui-datepicker__day.is-outside{color:var(--text-tertiary)}
.ui-datepicker__day.is-today{font-weight:600;color:var(--brand-600)}
.ui-datepicker__day.is-selected{background:var(--brand-500);color:#fff;font-weight:600}
.ui-datepicker__day.is-selected:hover{background:var(--brand-600)}
.ui-datepicker__day.is-disabled{opacity:.35;cursor:not-allowed}
.ui-datepicker__day.is-empty{visibility:hidden;pointer-events:none}
.ui-timepicker__panel{min-width:220px;padding:8px}
.ui-timepicker__columns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ui-timepicker__column-label{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;padding:0 4px 6px}
.ui-timepicker__list{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ui-timepicker__option{height:32px;border:none;border-radius:8px;background:transparent;font-size:13px;color:var(--text-primary);cursor:pointer;text-align:center;transition:background .15s}
.ui-timepicker__option:hover{background:var(--bg-subtle)}
.ui-timepicker__option.is-selected{background:var(--brand-500);color:#fff;font-weight:600}
.ui-checkbox,.ui-radio{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none}
.ui-checkbox.is-disabled,.ui-radio.is-disabled{opacity:.55;cursor:not-allowed}
.ui-checkbox__input,.ui-radio__input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.ui-checkbox__box{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--bg-elevated);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.ui-checkbox__input:checked+.ui-checkbox__box{background:var(--brand-500);border-color:var(--brand-500)}
.ui-checkbox__input:checked+.ui-checkbox__box::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.ui-checkbox__input:focus-visible+.ui-checkbox__box{box-shadow:0 0 0 3px oklch(55% 0.20 250/0.15)}
.ui-checkbox__content{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-checkbox__label,.ui-radio__label{font-size:14px;color:var(--text-primary);line-height:1.4}
.ui-checkbox__hint{font-size:12px;color:var(--text-secondary);line-height:1.4}
.ui-radio__dot{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:50%;background:var(--bg-elevated);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.ui-radio__input:checked+.ui-radio__dot{border-color:var(--brand-500)}
.ui-radio__input:checked+.ui-radio__dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand-500)}
.ui-radio__input:focus-visible+.ui-radio__dot{box-shadow:0 0 0 3px oklch(55% 0.20 250/0.15)}
.ui-radio__content{min-width:0;flex:1}
.ui-spinner{display:inline-block;border:2px solid var(--border-default);border-top-color:var(--brand-500);border-radius:50%;animation:ui-spinner-spin .7s linear infinite;flex-shrink:0}
.ui-spinner--xs{width:14px;height:14px}
.ui-spinner--sm{width:18px;height:18px}
.ui-spinner--md{width:22px;height:22px}
@keyframes ui-spinner-spin{to{transform:rotate(360deg)}}
.ui-tooltip{position:relative;display:inline-flex;max-width:100%}
.ui-tooltip__panel{padding:6px 10px;font-size:12px;line-height:1.4;color:var(--text-primary);white-space:normal;max-width:240px;pointer-events:none}
.ui-tooltip--top .ui-tooltip__panel{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.ui-datepicker.w-auto,.ui-timepicker.w-auto{width:auto;min-width:11rem;max-width:100%}
.ui-radio.flex-1{flex:1;min-width:0}
.ui-radio.flex-1 .ui-radio__content{width:100%}
.ui-checkbox.text-xs .ui-checkbox__label{font-size:11px}

/* Phase 2 widgets */
.ui-search-select{position:relative;width:100%}
.ui-search-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer}
.ui-search-select__placeholder{color:var(--text-tertiary)}
.ui-search-select__icon{color:var(--text-tertiary);flex-shrink:0}
.ui-search-select__panel{top:calc(100% + 6px);left:0;right:0;padding:8px;min-width:240px}
.ui-search-select__filter{margin-bottom:8px}
.ui-search-select__list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ui-search-select__option{height:36px;border:none;border-radius:8px;background:transparent;font-size:13px;color:var(--text-primary);cursor:pointer;text-align:left;padding:0 10px}
.ui-search-select__option:hover{background:var(--bg-subtle)}
.ui-search-select__option.is-selected{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.ui-search-select__empty{padding:10px;font-size:12px;color:var(--text-tertiary);text-align:center}
.ui-dropzone{border:2px dashed var(--border-default);border-radius:12px;padding:32px;text-align:center;background:var(--bg-subtle);transition:border-color .15s,background .15s}
.ui-dropzone.is-dragging{border-color:var(--border-brand);background:var(--brand-50)}
.ui-dropzone__label{display:block;cursor:pointer}
.ui-dropzone__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ui-dropzone__title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px}
.ui-dropzone__hint{font-size:12px;color:var(--text-tertiary)}
.ui-dropzone__preview{margin-bottom:12px}
.ui-dropzone__preview img{max-height:80px;margin:0 auto;object-fit:contain}
.ui-slider{display:flex;align-items:center;gap:10px;width:100%}
.ui-slider__input{flex:1;accent-color:var(--brand-500);min-width:0}
.ui-slider__value{font-size:12px;font-weight:600;color:var(--text-secondary);min-width:1.5rem;text-align:right}
.ui-shimmer{background:linear-gradient(90deg,var(--bg-subtle),var(--bg-elevated),var(--bg-subtle));background-size:200% 100%;animation:ui-shimmer 1.4s ease-in-out infinite;border-radius:8px}
.ui-shimmer--line{height:10px;width:var(--ui-shimmer-w,100%)}
.ui-shimmer--card{height:var(--ui-shimmer-h,72px);width:var(--ui-shimmer-w,100%);border-radius:10px}
.ui-shimmer--circle{width:var(--ui-shimmer-w,40px);height:var(--ui-shimmer-h,40px);border-radius:50%}
@keyframes ui-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ui-popover{position:relative;display:inline-block}
.ui-popover__panel{top:calc(100% + 6px);left:0;min-width:200px;padding:12px}

/* Phase 3 widgets */
.ui-accordion{display:flex;flex-direction:column;gap:8px}
.ui-accordion-item{border:1px solid var(--border-default);border-radius:10px;background:var(--bg-elevated);overflow:hidden}
.ui-accordion-item__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:transparent;border:none;cursor:pointer;text-align:left}
.ui-accordion-item__title{font-size:14px;font-weight:600;color:var(--text-primary)}
.ui-accordion-item__chevron{color:var(--text-tertiary);transition:transform .15s}
.ui-accordion-item__chevron.is-open{transform:rotate(180deg)}
.ui-accordion-item__body{padding:0 14px 14px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.ui-number{display:inline-flex;align-items:center;gap:6px}
.ui-number__input{width:4rem;text-align:center;padding:0 8px;height:36px}
.ui-number__btn{min-width:32px;padding:0 8px!important}
.ui-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:99px;background:var(--bg-subtle);border:1px solid var(--border-default);font-size:12px;color:var(--text-primary)}
.ui-tag__dismiss{width:18px;height:18px;border:none;border-radius:50%;background:transparent;color:var(--text-tertiary);cursor:pointer;line-height:1;padding:0}
.ui-tag__dismiss:hover{color:var(--text-primary);background:var(--bg-elevated)}
.ui-progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ui-progress-circle__svg{width:100%;height:100%;transform:rotate(-90deg)}
.ui-progress-circle__track{fill:none;stroke:var(--bg-subtle);stroke-width:4}
.ui-progress-circle__fill{fill:none;stroke:var(--brand-500);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .3s}
.ui-progress-circle--sm{width:32px;height:32px}
.ui-progress-circle--md{width:48px;height:48px}
.ui-progress-circle__label{position:absolute;font-size:11px;font-weight:600;color:var(--text-primary)}