@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Link Locker — white / electric blue design system. */
:root{
  color-scheme:light;
  --accent:#2457f5;--accent-hover:#1746dc;--accent-soft:#edf2ff;--accent-contrast:#fff;
  --locker-action:#2c5ee8;--locker-action-hover:#234dc1;
  --accent-hover:color-mix(in srgb,var(--accent) 82%,#0b2054);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,#fff);
  --ink:#18243d;--navy:#172744;--navy-soft:#314362;--paper:#f5f7fb;
  --surface:#fff;--surface-muted:#f8faff;--surface-raised:#fff;
  --muted:#59677e;--subtle:#64728b;--border:#e2e8f2;--border-strong:#cbd5e5;
  --danger:#b52b48;--danger-bg:#fff1f4;--success:#147b66;--success-bg:#eaf8f3;
  --warning:#955c1b;--warning-bg:#fff5e7;
  --shadow:0 10px 36px rgba(27,48,99,.045);--shadow-raised:0 24px 70px rgba(27,48,99,.12);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --radius-sm:10px;--radius:14px;--radius-lg:20px;--radius-xl:26px;
  --font-body:'Manrope',Arial,sans-serif;--font-display:'Bricolage Grotesque','Manrope',sans-serif;
  --lime:var(--accent);--lime-deep:var(--accent-hover);--accent-text:#fff;
  --focus-ring:0 0 0 4px rgba(36,87,245,.18);
  --motion-feedback:140ms;--motion-state:240ms;--motion-layer:300ms;
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease-in-out:cubic-bezier(.4,0,.2,1);
  --duration-progress:420ms;
  --chart-mark:var(--accent);--chart-mark-hover:var(--accent-hover);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Shared hit areas and native controls, verified in the responsive review. */
.brand,.text-link,.back-link,.row-actions a,.row-actions button,.filter-tab{min-height:44px}
.text-link,.row-actions a,.row-actions button,.table-sort-button{min-width:44px}
.table-title{display:inline-flex;align-items:center;min-height:44px}
.filter-tab{display:flex;align-items:center;justify-content:center}
.field,.form-stack label{min-width:0}
input[type=file],[data-theme=dark] input[type=file]{min-width:0;max-width:100%;min-height:60px;padding:7px;background:var(--surface-muted);color:var(--muted);border:1px solid var(--border)}
input::file-selector-button{min-height:44px;margin-right:10px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface-raised);color:var(--ink);font:600 12px var(--font-body);cursor:pointer}
input[type=color],[data-theme=dark] input[type=color]{min-height:48px;background:var(--surface-muted);border-color:var(--border)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--surface-raised) inset!important;caret-color:var(--ink)}
.input-password input{min-height:52px!important}
.input-password button{min-width:64px;min-height:44px}
@media(max-width:680px){input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea,.table-sort-control select{font-size:16px!important}}
@media(max-width:850px){.sidebar{visibility:hidden}.sidebar.open{visibility:visible}}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6}
::selection{background:#c9d8ff;color:#122246}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);letter-spacing:-.045em}
h1{font-size:clamp(34px,3.5vw,48px);line-height:1.08;font-weight:700}
h2{font-size:22px;line-height:1.2;font-weight:700}
h3{font-size:17px}
p{line-height:1.65}
.eyebrow{color:var(--accent);font-size:10px;letter-spacing:.13em;font-weight:800}
.eyebrow.light{color:#c4d5ff}
.muted,.hint{color:var(--muted)}
.skip-link{background:var(--accent);color:#fff}
.btn{min-height:46px;border-radius:var(--radius-sm);font-size:13px;box-shadow:none;transition:background-color var(--motion-feedback) ease,border-color var(--motion-feedback) ease,color var(--motion-feedback) ease,transform var(--motion-feedback) var(--motion-ease-out)}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:scale(.985);transition-duration:0ms}
.btn-primary,.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover,.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-secondary,.btn-light{background:#fff;border-color:var(--border-strong);color:var(--ink)}
.btn-secondary:hover,.btn-light:hover{background:var(--accent-soft);border-color:#a9bbfb;color:var(--accent-hover)}
.btn-quiet:hover{color:var(--accent);background:var(--accent-soft)}
.btn-danger{background:var(--danger-bg);border-color:#f0c6d0;color:var(--danger)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{box-shadow:var(--focus-ring)}
.text-link,.back-link,.row-actions a,.row-actions button,.input-password button{color:var(--accent-hover)}
.text-link:hover,.back-link:hover,.row-actions a:hover,.row-actions button:hover{color:var(--accent)}
.icon-button{color:var(--muted)}.icon-button:hover{background:var(--accent-soft);color:var(--accent)}

/* Admin shell */
.sidebar{width:254px;background:#fff;border-right:1px solid var(--border);color:var(--ink);padding:27px 14px 18px;box-shadow:none}
.brand{color:var(--ink);font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.055em;padding:0 13px;line-height:1.05}
.brand small{font-family:var(--font-body);font-size:9px;letter-spacing:.14em;color:var(--subtle);margin-top:7px}
.brand-mark{width:39px;height:39px;border:0;border-radius:12px;background:var(--accent);color:#fff;box-shadow:0 7px 17px rgba(36,87,245,.18)}
.sidebar-caption{color:var(--subtle);margin:52px 14px 11px;font-size:10px}
.nav-link{color:var(--muted);font-size:13px;font-weight:700;min-height:44px;border-radius:10px;gap:12px;padding:10px 13px;transition:background-color var(--motion-feedback) ease,color var(--motion-feedback) ease}
.nav-link:hover{background:var(--surface-muted);color:var(--accent-hover)}
.nav-link.is-active{background:var(--accent-soft);color:var(--accent-hover);font-weight:800;box-shadow:inset 3px 0 var(--accent)}
.nav-link.is-active svg{color:var(--accent)}
.sidebar-bottom{border-color:var(--border);padding:15px 4px 0}
.account-avatar{background:var(--accent-soft);color:var(--accent);border-radius:11px}
.account-name small{color:var(--subtle)}
.sidebar-bottom .icon-button{color:var(--muted)}
.topbar{height:68px;background:#fff;border-color:var(--border)}
.topbar-right{color:var(--subtle)}.topbar-right svg{color:var(--accent)}
.page-wrap{max-width:1280px;padding-top:42px}
.page-heading{margin-bottom:30px}
.page-heading h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.055em}
.page-heading p{font-size:14px}
.panel,.metric,.overview{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow)}
.panel{border-radius:var(--radius-lg)}
.panel-heading h2,.section-heading h2,.form-side .panel h2{font-family:var(--font-display);font-weight:700}
.section-number{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent);font-weight:800}
.overview{border-radius:var(--radius-lg)}
.overview-lead{background:var(--accent);color:#fff}
.overview-lead:after{border-color:rgba(255,255,255,.2)}
.overview-lead h2,.overview-lead strong,.overview-lead .overview-value{color:#fff}
.overview-kicker,.overview-lead p{color:#dce6ff}
.overview-value span{color:#b6cbff}
.overview-meter{background:rgba(255,255,255,.24)}.overview-meter span{background:#fff}
.overview-fact strong,.metric strong{font-family:var(--font-display);letter-spacing:-.065em}
.bar-item>span,.key-dot{background:var(--accent)}.bar-item:hover>span{background:#79a1ff}
.bar-item>span{transform-origin:center bottom}.overview-meter span{transform-origin:left center}
.rank-row:hover,.task-summary:hover{background:var(--surface-muted)}
.rank-index{color:var(--accent);font-weight:700}
.rank-row:hover .rank-name strong{color:var(--accent)}
.chart-key{color:var(--muted)}
.empty-state{background:var(--surface-muted);border-color:var(--border-strong)}
.empty-state:before{background:var(--accent)}
.status-active{background:var(--success-bg);color:var(--success)}
.status-paused{background:var(--warning-bg);color:var(--warning)}
.status-expired{background:var(--danger-bg);color:var(--danger)}
.filter-tabs{background:var(--surface-muted);border-color:var(--border)}
.filter-tab.selected{color:var(--accent);background:#fff}
th{color:var(--subtle);border-color:var(--border)}td{color:var(--ink);border-color:var(--border)}
.link-thumb,.link-cell img{background:var(--accent-soft);color:var(--accent)}
.public-url-panel{background:var(--accent);box-shadow:0 16px 30px rgba(36,87,245,.12)}
.public-url-panel .btn-light{border-color:transparent}
.task-step{color:var(--accent)}
.summary-platform-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent)}
.activity-dot.accent{background:var(--accent)}

/* Data views: shared scales, legible marks and record controls. */
.data-chart{margin:0;--chart-height:200px}
.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-4)}
.chart-heading h2{margin:0 0 var(--space-2)}
.chart-heading p,.chart-total span,.chart-note{font-size:12px;color:var(--muted);margin:0}
.chart-total{flex:none;text-align:right}.chart-total strong{display:block;font:700 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}.chart-total span{display:block;margin-top:var(--space-2)}
.chart-summary{font-size:13px;color:var(--muted);margin:0 0 var(--space-5);max-width:65ch}.chart-summary strong{color:var(--ink);font-weight:700}
.chart-unit{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:var(--space-2)}
.chart-canvas{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-2)}
.chart-axis{height:var(--chart-height);margin-top:var(--space-5);position:relative;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chart-axis span{position:absolute;right:0;transform:translateY(-50%)}.chart-axis span:first-child{top:0}.chart-axis span:nth-child(2){top:50%}.chart-axis span:last-child{top:100%}
.chart-scroll{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;padding:var(--space-5) 0 38px}
.chart-scroll:focus-visible{outline-offset:4px}
.chart-plot{position:relative;min-width:var(--chart-min-width);height:var(--chart-height)}
.chart-grid{position:absolute;inset:0;pointer-events:none}.chart-grid i{position:absolute;left:0;right:0;border-top:1px solid var(--border)}.chart-grid i:first-child{top:0}.chart-grid i:nth-child(2){top:50%}.chart-grid i:last-child{top:100%;border-color:var(--border-strong)}
.data-chart .bar-chart{position:relative;gap:var(--space-2);height:100%;padding:0;border:0;margin:0}
.data-chart .bar-item{position:relative;display:block;height:100%;min-width:0}
.data-chart .bar-item>span{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:min(60%,24px);min-height:0;border-radius:4px 4px 0 0;background:var(--chart-mark);transform-origin:center bottom;transition:background-color var(--motion-feedback) ease}
.data-chart .bar-item:hover>span{background:var(--chart-mark-hover)}
.bar-value{position:absolute;bottom:calc(var(--bar-height) + 6px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.data-chart .bar-item small{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font:500 11px/1.3 var(--font-body);color:var(--muted);white-space:nowrap}
.chart-note{margin-top:var(--space-2);line-height:1.6}.chart-link{margin-top:var(--space-4)}
.data-details summary{color:var(--accent-hover);font-size:12px;min-height:44px;line-height:1.5;padding-block:12px;list-style-position:inside}
.chart-data{margin-top:var(--space-2);border-top:1px solid var(--border)}
.chart-values th[scope=row],.chart-values tfoot th{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink)}
.chart-values tfoot th,.chart-values tfoot td{border-top:1px solid var(--border-strong);font-weight:700}
.chart-values td,.chart-values th{padding:12px}.chart-values thead th{background:var(--surface-muted)}
.chart-empty>svg{color:var(--accent);margin-bottom:var(--space-3)}.chart-empty h3{margin-bottom:var(--space-2)}
.metrics-context{font-size:12px;color:var(--muted);margin-bottom:var(--space-4)}
.analytics-trend{margin-bottom:var(--space-5)}.analytics-trend .data-chart{--chart-height:240px}
.page-heading form:has(#period){display:flex;align-items:center;gap:var(--space-2)}
.numeric{text-align:right;font-variant-numeric:tabular-nums}
.data-table-shell{min-width:0}.table-tools{display:flex;align-items:end;gap:var(--space-3);flex-wrap:wrap;padding-bottom:var(--space-4)}
.table-search{display:grid;gap:var(--space-2);flex:1;min-width:200px}.table-tools label>span,.table-page-size>span{font-size:11px;font-weight:700;color:var(--muted)}
.table-search input{min-height:44px!important}.table-sort-group{display:flex;align-items:end;gap:var(--space-2);flex:1;min-width:260px}
.table-sort-control{display:grid;gap:var(--space-2);flex:1;min-width:130px}.table-sort-control select{font-size:12px;min-height:44px!important}
.table-order{font-size:12px;font-weight:600;min-height:44px;padding:10px 12px;color:var(--accent-hover);background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius-sm)}
.table-order:disabled{color:var(--subtle);background:var(--surface-muted);cursor:not-allowed}.table-export{margin-left:auto;min-height:44px;font-size:12px}
.data-table thead th{background:var(--surface-muted);text-transform:none;letter-spacing:0;font-size:12px;white-space:normal;padding:0 12px}
.table-sort-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;width:100%;padding:8px 0;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;text-align:left}
.numeric .table-sort-button{justify-content:flex-end;text-align:right}.table-sort-button .icon-mask{width:14px;height:14px;opacity:.45}.data-table th[aria-sort=ascending] .icon-mask{transform:rotate(180deg)}.data-table th[aria-sort=ascending] button,.data-table th[aria-sort=descending] button{color:var(--accent-hover)}.data-table th[aria-sort=ascending] .icon-mask,.data-table th[aria-sort=descending] .icon-mask{opacity:1}
.data-table thead th[data-sort=none]{padding:12px}.data-table tbody td{padding:16px 12px;line-height:1.6}.data-table tbody tr:focus-within,.data-table tbody tr:hover{background:var(--surface-muted)}
.data-table .table-sub{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.data-table .table-title{overflow-wrap:anywhere}
.data-table .row-actions{gap:var(--space-2)}.data-table .row-actions a,.data-table .row-actions button{min-height:44px;display:inline-flex;align-items:center;padding:8px;font-size:12px;border-radius:var(--radius-sm)}.data-table .row-actions a:hover,.data-table .row-actions button:hover{background:var(--accent-soft);text-decoration:none}
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;border-top:1px solid var(--border);padding-top:var(--space-4);margin-top:var(--space-2)}
.table-status{margin:0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.table-page-size{display:flex;align-items:center;gap:var(--space-2)}.table-page-size select{width:72px;min-height:44px;font-size:12px}
.table-pagination{display:flex;align-items:center;gap:var(--space-2)}.table-pagination .btn{min-height:44px;padding:10px 12px;font-size:12px}.table-page-label{min-width:42px;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.table-limit-note{font-size:12px;color:var(--muted);margin:var(--space-3) 0 0;max-width:70ch}.table-empty{margin:var(--space-2) 0}.table-empty h3{margin-bottom:var(--space-2)}.empty-reset{display:block;width:max-content;margin:0 auto var(--space-4)}
.data-table-shell[aria-busy=true] .table-wrap{opacity:.6;pointer-events:none}
@media(max-width:680px){
  .chart-heading{gap:var(--space-3)}.chart-heading h2{font-size:20px}.chart-total strong{font-size:24px}.chart-total span{max-width:110px;font-size:11px}.chart-summary{font-size:12px}.chart-canvas{grid-template-columns:42px minmax(0,1fr);gap:var(--space-2)}
  .data-chart{--chart-height:180px}.analytics-trend .data-chart{--chart-height:200px}.chart-values{display:table}.chart-values thead{display:table-header-group}.chart-values tbody{display:table-row-group}.chart-values tfoot{display:table-footer-group}.chart-values tr{display:table-row}.chart-values td,.chart-values th{display:table-cell;width:auto;text-align:left}.chart-values .numeric,.chart-values td:first-child{display:table-cell;text-align:right}.chart-values td:before{display:none}
  .table-tools{gap:var(--space-3)}.table-search{flex-basis:100%;min-width:0}.table-sort-group{min-width:0;flex-basis:100%}.table-export{margin-left:0;width:100%}
  .data-table thead{display:table-header-group;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.data-table tbody tr{padding:var(--space-4) 0;margin-bottom:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.data-table tbody tr:last-child{border-bottom:1px solid var(--border)}
  .data-table tbody td{padding:8px 14px;font-size:13px;gap:var(--space-4)}.data-table td:first-child{padding-bottom:var(--space-3)}.data-table td:before{font-size:12px;color:var(--muted)}.data-table td.numeric{justify-content:space-between}.data-table .link-cell{min-width:0}.data-table .link-cell>span:last-child{min-width:0}.data-table .platform-cell{white-space:normal}.data-table .row-actions{flex-wrap:wrap;justify-content:flex-end}
  .table-footer{gap:var(--space-3);margin-top:0}.table-status{flex-basis:100%}.table-pagination{justify-content:space-between;width:100%}.table-pagination .btn{flex:1}.page-heading form:has(#period){align-items:stretch}
}

/* Forms, editor and catalog */
input:not([type=checkbox]):not([type=color]):not([type=file]),select,textarea{background:#fff;color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);min-height:47px}
input::placeholder,textarea::placeholder{color:#64728b}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:var(--focus-ring)}
input[type=checkbox]{accent-color:var(--accent)}
input[type=color]{border-color:var(--border-strong)}
.task-editor{background:var(--surface-muted);border-color:var(--border);border-radius:var(--radius)}
.task-editor:focus-within{border-color:#aebffb;box-shadow:0 0 0 3px rgba(36,87,245,.08)}
.reorder-actions button{min-width:38px;min-height:38px;border-color:var(--border-strong);color:var(--muted)}
.reorder-actions button:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
.task-editor.platform-open{position:relative;z-index:70}
.platform-picker{position:relative}
.platform-caption{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.platform-trigger{display:flex;align-items:center;gap:11px;width:100%;min-height:47px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-align:left;font-size:13px;font-weight:700;transition:border-color .18s ease,box-shadow .18s ease}
.platform-trigger:hover{border-color:var(--accent)}
.platform-trigger[aria-expanded=true],.platform-trigger:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring);outline:0}
.platform-trigger-icon,.platform-option-icon{display:block;flex:none;width:22px;height:22px;background:currentColor;color:var(--accent);mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.platform-trigger-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platform-trigger .icon-mask{color:var(--muted);width:16px;height:16px;transition:transform .18s ease}
.platform-trigger[aria-expanded=true] .icon-mask{transform:rotate(180deg)}
.platform-popover{position:fixed;inset:auto;left:var(--picker-left);top:var(--picker-top);bottom:var(--picker-bottom);width:var(--picker-width);max-height:var(--picker-height);margin:0;padding:8px;z-index:80;display:flex;flex-direction:column;background:var(--surface-raised);color:var(--ink);border:0;border-radius:14px;box-shadow:var(--shadow-raised);animation:platform-reveal 160ms var(--ease-out)}
.platform-popover::backdrop{background:transparent;pointer-events:none}
.platform-search{position:relative;display:block;flex:none;margin-bottom:8px}
.platform-search>.icon-mask{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none;mask-image:url('/assets/icons/search.svg');-webkit-mask-image:url('/assets/icons/search.svg')}
.platform-popover .platform-search input[type=search]{min-height:48px;width:100%;margin:0;padding:12px 12px 12px 44px;font:400 16px var(--font-body);background:var(--surface);border-color:var(--border);border-radius:8px}
.platform-options{position:static;width:100%;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:12px;padding:4px;background:transparent;border:0;border-radius:0;box-shadow:none;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.platform-group-title{display:block;padding:8px 10px;color:var(--muted);font-size:12px;font-weight:500}
.platform-group-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.platform-no-results{font-size:13px;line-height:1.6;margin:8px;padding:12px;color:var(--muted)}
.platform-option{display:flex;align-items:center;gap:11px;width:100%;min-height:43px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-align:left;cursor:pointer}
.platform-option>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.platform-option:hover,.platform-option:focus-visible{background:var(--surface-muted);color:var(--accent-hover);outline:none}
.platform-option:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.platform-option.is-selected{background:var(--accent-soft);color:var(--accent-hover);font-weight:800}
.platform-option-check{visibility:hidden;color:var(--accent);width:17px;height:17px}
.platform-option.is-selected .platform-option-check{visibility:visible}
@keyframes platform-reveal{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.platform-group-items{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.platform-popover{animation:none}}
.platform-hint{color:var(--muted)}
.platform-cell{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.platform-cell .platform-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.platform-cell strong{font-size:13px}
.integration-note{background:var(--accent-soft)}

/* Public journey, designed for a narrow viewport first. */
.public-body{background:#f6f8fd}
.public-header{background:#fff;border-color:var(--border)}
.public-brand{color:var(--ink)}
.public-brand .brand-mark{border:0;color:#fff;background:var(--accent)}
.public-secure{color:var(--muted)}.public-secure svg{color:var(--accent)}
.public-footer{border-color:var(--border)}
.public-main{max-width:790px}
.locker-card{border-color:var(--border);box-shadow:0 20px 60px rgba(27,48,99,.09)}
.locker-cover{background:#1746dc}
.cover-art{background:var(--accent);gap:9px}
.cover-art>span{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.cover-art>span:nth-child(2),.cover-art>span:nth-child(3){background:rgba(255,255,255,.1)}
.cover-art i{background:#fff;color:var(--accent);box-shadow:0 12px 32px rgba(16,39,114,.23)}
.locker-content>.eyebrow{color:var(--accent)}
.locker-content h1{font-family:var(--font-display);font-weight:700}
.progress-heading span{color:var(--accent)}
.progress-track,.progress-segments>span{background:#e5ebf6}
.progress-track>span,.progress-segments>span.filled{background:var(--accent)}
.locker-task{border-color:var(--border);background:#fff;transition:border-color var(--motion-state) ease,background-color var(--motion-state) ease}
.locker-task:hover{border-color:#adc0fb}
.locker-task.is-complete{background:#f1faf7;border-color:#bfe8db}
.locker-task.just-completed{animation:none}
.locker-task.just-completed .task-icon{animation:task-icon-confirm var(--motion-layer) var(--motion-ease-out) both}
.task-icon{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
.is-complete .task-icon{color:var(--success);background:#fff;border-color:#bfe8db}
.task-meta{color:var(--subtle)}
.task-action .btn-primary{background:var(--accent);color:#fff}
.unlock-panel{background:#ecf1ff;color:var(--ink);border:1px solid #d5e0ff;box-shadow:none;transition:background-color var(--motion-state) var(--motion-ease-in-out),border-color var(--motion-state) var(--motion-ease-in-out)}
.unlock-panel .eyebrow.light{color:var(--accent)}
.unlock-panel strong,.unlock-panel p{color:var(--ink)}
.unlock-panel p{color:var(--muted)}
.unlock-panel strong,.unlock-panel p,.unlock-panel .eyebrow.light{transition:color var(--motion-state) ease}
.unlock-panel.ready{background:var(--accent);border-color:var(--accent);box-shadow:none}
.unlock-panel.ready strong,.unlock-panel.ready p,.unlock-panel.ready .eyebrow.light{color:#fff}
.unlock-panel .btn-accent{background:var(--accent);color:#fff}
.unlock-panel .btn-accent:hover{background:var(--accent-hover)}
.unlock-panel.ready .btn-accent{background:#fff;border-color:#fff;color:var(--accent)}
.unlock-panel.ready .btn-accent:hover{background:#e9efff;border-color:#e9efff;color:var(--accent-hover)}
.btn-accent:disabled{background:#dae1ef;border-color:#dae1ef;color:#59677e;opacity:1}
.state-card{background:#fff;border-color:var(--border);box-shadow:var(--shadow-raised)}
.state-symbol{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}
.success-symbol{background:var(--success-bg);color:var(--success);border-color:var(--success-bg)}
.state-card h1{font-family:var(--font-display)}
.public-body .success-card{animation:access-arrival 280ms var(--motion-ease-out)}
.public-body .success-card .btn-primary{background:var(--locker-action);color:#fff;min-height:56px;border:0;font-size:15px;transition:background-color 160ms,transform 120ms}
.public-body .success-card .btn-primary:hover{background:var(--locker-action-hover)}
.public-body .success-card .btn-primary:active{transform:scale(.98)}
@keyframes access-arrival{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.public-body .success-card{animation:none}.public-body .success-card .btn-primary{transform:none!important;transition:background-color 120ms}}

/* Login */
.login-body{background:#f5f7fb}
.login-body .public-main{max-width:1160px;width:100%;padding:clamp(22px,5vw,68px) 22px 76px}
.login-layout{min-height:620px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(380px,.97fr);overflow:hidden;border:1px solid var(--border);border-radius:26px;background:#fff;box-shadow:0 24px 80px rgba(31,52,105,.11)}
.login-aside{background:var(--accent);color:#fff;padding:0;position:relative;isolation:isolate;overflow:hidden}
.login-aside:before,.login-aside:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;pointer-events:none}
.login-aside:before{width:520px;height:520px;right:-250px;top:-270px}
.login-aside:after{width:390px;height:390px;left:-240px;bottom:-250px}
.login-aside-inner{position:relative;z-index:1;min-height:620px;padding:43px 48px 45px;display:flex;flex-direction:column}
.login-aside-top{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.1;letter-spacing:-.035em}
.login-aside-top small{display:block;font-family:var(--font-body);font-size:9px;letter-spacing:.16em;font-weight:700;margin-top:5px;color:#d2dfff}
.login-aside-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--accent)}
.login-aside-copy{margin:auto 0 65px;max-width:450px}
.login-kicker{font-size:10px;letter-spacing:.14em;font-weight:800;color:#d2dfff}
.login-aside h1{font-family:var(--font-display);font-size:clamp(48px,5vw,70px);line-height:1.02;letter-spacing:-.075em;color:#fff;margin:17px 0 22px}
.login-aside h1 em{font-family:var(--font-display);font-style:normal;color:#b8ccff}
.login-aside p{font-size:14px;line-height:1.7;color:#e0e9ff;max-width:390px;margin:0}
.login-flow{display:flex;align-items:center;gap:9px;max-width:430px}
.login-flow>div{min-width:0;display:grid;grid-template-columns:28px auto;align-items:center;gap:0 6px;color:#fff}
.login-flow-icon{display:grid;place-items:center;grid-row:span 2;width:28px;height:28px;border:1px solid rgba(255,255,255,.36);border-radius:8px}
.login-flow strong{font-size:11px;white-space:nowrap}.login-flow small{font-size:9px;color:#c5d5ff}
.login-flow-line{flex:1;min-width:10px;height:1px;background:rgba(255,255,255,.42)}
.login-panel{max-width:none;padding:50px;display:flex;align-items:center;justify-content:center;background:#fff}
.login-form-wrap{width:100%;max-width:370px}
.login-welcome-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);margin-bottom:25px}
.login-panel .eyebrow{margin-bottom:9px}
.login-panel h2{font-family:var(--font-display);font-size:clamp(31px,3vw,38px);margin:0 0 8px;letter-spacing:-.05em}
.login-panel>.muted,.login-form-wrap>.muted{font-size:13px;line-height:1.55;margin-bottom:31px}
.login-panel .form-stack{gap:21px}
.login-panel .form-stack label{font-size:12px;font-weight:800}
.login-panel .form-stack input{margin-top:8px;min-height:49px}
.login-panel .form-stack .btn{margin-top:7px;min-height:51px;font-size:13px;justify-content:space-between;padding-inline:18px}
.login-help{margin:24px 0 0;color:var(--subtle);font-size:11px;text-align:left}
.form-error{border-color:#f0bdca}

/* Feedback surfaces */
.toast{background:var(--ink);border-color:var(--ink);color:#fff}
.toast{animation:toast-in var(--motion-state) var(--motion-ease-out) both}
.toast-error{background:var(--danger);border-color:var(--danger)}
.confirm-dialog{border-color:var(--border);box-shadow:var(--shadow-raised);opacity:0;transform:translateY(8px) scale(.985);transition:opacity var(--motion-state) var(--motion-ease-out),transform var(--motion-state) var(--motion-ease-out),display var(--motion-state) allow-discrete,overlay var(--motion-state) allow-discrete}
.confirm-dialog[open]{opacity:1;transform:none;animation:none}
.confirm-dialog::backdrop{background:rgba(7,21,30,0);transition:background-color var(--motion-state) ease,display var(--motion-state) allow-discrete,overlay var(--motion-state) allow-discrete}
.confirm-dialog[open]::backdrop{background:rgba(7,21,30,.56)}
@starting-style{.confirm-dialog[open]{opacity:0;transform:translateY(8px) scale(.985)}.confirm-dialog[open]::backdrop{background:rgba(7,21,30,0)}}
.confirm-icon{background:var(--danger-bg)}
.skeleton{background-image:linear-gradient(90deg,#f1f4fa 20%,#e2e9f6 48%,#f1f4fa 78%)}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes task-icon-confirm{from{opacity:.55;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes flow-connect{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){.login-flow-line{transform-origin:left center;animation:flow-connect 440ms var(--motion-ease-out) both}.login-flow-line:nth-of-type(2){animation-delay:180ms}}

@media(max-width:1100px){.login-layout{grid-template-columns:minmax(0,1fr) minmax(350px,1fr)}.login-aside-inner{padding:38px}}
@media(max-width:850px){.sidebar{box-shadow:0 24px 60px rgba(19,35,69,.16)}.login-layout{grid-template-columns:1fr;min-height:0}.login-aside-inner{min-height:0;padding:30px 34px}.login-aside-copy{margin:32px 0 0}.login-aside h1{font-size:42px;margin:11px 0}.login-aside p{max-width:560px}.login-flow{display:none}.login-panel{max-width:none;padding:44px 34px}}
@media(max-width:680px){.page-wrap{padding-top:29px}.page-heading h1{font-size:34px}.panel{box-shadow:none}.overview-lead{padding:26px}.public-main{padding-top:16px}.locker-cover{height:140px}.locker-content{padding:23px 19px 26px}.locker-task{grid-template-columns:40px minmax(0,1fr)}.task-action{grid-column:1/-1}.platform-option{min-height:46px}.login-body .public-main{padding:16px 12px 54px}.login-layout{border-radius:18px}.login-aside-inner{padding:25px 24px}.login-aside h1{font-size:36px}.login-aside p{font-size:12px}.login-panel{padding:34px 24px}.login-welcome-icon{margin-bottom:19px}.login-panel h2{font-size:31px}.public-brand .brand-mark{width:34px;height:34px}}
@media(max-width:390px){.login-aside h1{font-size:33px}.login-aside p{display:none}.login-aside-copy{margin-top:24px}.login-panel{padding:30px 20px}.login-panel h2{font-size:29px}.platform-cell{white-space:normal}}
@media(prefers-reduced-motion:reduce){
  .btn,.nav-link,.locker-task,.unlock-panel,.unlock-panel strong,.unlock-panel p,.unlock-panel .eyebrow.light{transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease!important}
  .btn:active{transform:none}
  .login-flow-line,.locker-task.just-completed .task-icon,.toast{animation:none!important}
  .confirm-dialog,.confirm-dialog::backdrop{transform:none;transition:opacity 120ms ease,background-color 120ms ease,display 120ms allow-discrete,overlay 120ms allow-discrete!important}
  .confirm-dialog[open]{transform:none}
  .progress-track>span,.progress-segments>span{transition:none!important}
}

/* Optional dark mode retains the same blue identity. */
[data-theme=dark]{--chart-mark:#91b0ff;--chart-mark-hover:#b9cdff}
[data-theme=dark] .data-details summary,[data-theme=dark] .chart-link,[data-theme=dark] .table-order:not(:disabled),[data-theme=dark] .data-table th[aria-sort=ascending] button,[data-theme=dark] .data-table th[aria-sort=descending] button,[data-theme=dark] .data-table .row-actions a,[data-theme=dark] .data-table .row-actions button{color:var(--chart-mark)}
[data-theme=dark]{color-scheme:dark;--ink:#e8efff;--navy:#131e31;--navy-soft:#334868;--paper:#0e1626;--surface:#172338;--surface-muted:#1c2b44;--surface-raised:#20314d;--muted:#b7c4d9;--subtle:#9aacc6;--border:#30415e;--border-strong:#49607f;--accent-soft:#223c78;--accent-soft:color-mix(in srgb,var(--accent) 26%,#172338);--danger:#ff9daf;--danger-bg:#4b263a;--success:#83dfbb;--success-bg:#1b403a;--warning:#f4c47d;--warning-bg:#493a2a;--shadow:0 10px 36px rgba(0,0,0,.12);--shadow-raised:0 24px 70px rgba(0,0,0,.26);color:var(--ink);background:var(--paper)}
[data-theme=dark] .sidebar,[data-theme=dark] .topbar,[data-theme=dark] .public-header,[data-theme=dark] .login-panel,[data-theme=dark] .login-layout,[data-theme=dark] .panel,[data-theme=dark] .metric,[data-theme=dark] .locker-card,[data-theme=dark] .locker-task,[data-theme=dark] .state-card,[data-theme=dark] .confirm-dialog{background:var(--surface);color:var(--ink)}
[data-theme=dark] .brand,[data-theme=dark] .public-brand,[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:var(--ink)}
[data-theme=dark] .nav-link{color:var(--muted)}[data-theme=dark] .nav-link.is-active{background:var(--accent-soft);color:#c9d9ff}
[data-theme=dark] .brand-mark,[data-theme=dark] .public-brand .brand-mark{background:var(--accent);color:#fff;border:0}
[data-theme=dark] .login-aside{background:var(--accent);color:#fff}[data-theme=dark] .login-aside h1{color:#fff}
[data-theme=dark] .btn-primary,[data-theme=dark] .btn-accent,[data-theme=dark] .unlock-panel .btn-accent{background:var(--accent);color:#fff}
[data-theme=dark] .btn-primary:hover,[data-theme=dark] .btn-accent:hover{background:var(--accent-hover)}
[data-theme=dark] .btn-secondary,[data-theme=dark] .btn-light,[data-theme=dark] .filter-tab.selected{background:var(--surface-raised);color:var(--ink);border-color:var(--border-strong)}
[data-theme=dark] .overview-lead,[data-theme=dark] .public-url-panel{background:var(--accent);color:#fff}
[data-theme=dark] .overview-lead h2,[data-theme=dark] .overview-lead strong{color:#fff}
[data-theme=dark] .public-body{background:var(--paper)}
[data-theme=dark] .cover-art,[data-theme=dark] .locker-cover{background:var(--accent)}
[data-theme=dark] .cover-art i{background:#fff;color:var(--accent)}
[data-theme=dark] .unlock-panel{background:#1d3265;color:var(--ink);border-color:#3a60b8}
[data-theme=dark] .unlock-panel strong{color:#fff}[data-theme=dark] .unlock-panel p{color:#ccdaf9}
[data-theme=dark] .unlock-panel.ready{background:var(--accent);border-color:var(--accent)}
[data-theme=dark] .unlock-panel.ready .btn-accent{background:#fff;border-color:#fff;color:var(--accent)}
[data-theme=dark] .locker-task.is-complete{background:var(--success-bg);border-color:#3b7566}
[data-theme=dark] .platform-cell .platform-icon,[data-theme=dark] .task-icon,[data-theme=dark] .state-symbol{background:var(--accent-soft);color:#aecaFF}
[data-theme=dark] input:not([type=checkbox]):not([type=color]):not([type=file]),[data-theme=dark] textarea,[data-theme=dark] select{background:var(--surface-raised);color:var(--ink);border-color:var(--border-strong)}
[data-theme=dark] .task-editor,[data-theme=dark] .filter-tabs,[data-theme=dark] .integration-note,[data-theme=dark] .empty-state{background:var(--surface-muted)}
[data-theme=dark] .platform-trigger,[data-theme=dark] .platform-options{background:var(--surface-raised);color:var(--ink);border-color:var(--border-strong)}
[data-theme=dark] .platform-option{color:var(--ink)}[data-theme=dark] .platform-option:hover,[data-theme=dark] .platform-option:focus-visible,[data-theme=dark] .platform-option.is-selected{background:var(--accent-soft);color:#dce7ff}
[data-theme=dark] .status-active{background:var(--success-bg);color:var(--success)}[data-theme=dark] .status-paused{background:var(--warning-bg);color:var(--warning)}[data-theme=dark] .status-expired{background:var(--danger-bg);color:var(--danger)}