:root { --font-ui:"Segoe UI",system-ui,-apple-system,sans-serif; --font-mono:"Cascadia Code","SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; }
html { min-width:17.5rem; background:var(--canvas,#070a08); }
body { min-height:100svh; margin:0; background:radial-gradient(circle at 18% -10%,color-mix(in srgb,var(--info) 8%,transparent),transparent 26rem),linear-gradient(color-mix(in srgb,var(--ink) 2.4%,transparent) .0625rem,transparent .0625rem),linear-gradient(90deg,color-mix(in srgb,var(--ink) 2.4%,transparent) .0625rem,transparent .0625rem),var(--canvas,#070a08); background-size:auto,2.5rem 2.5rem,2.5rem 2.5rem,auto; color:var(--ink,#f2f6f3); font-family:var(--font-ui); }
a { color:inherit; } button,input,select { font:inherit; }
.sr-only { position:absolute; width:.0625rem; height:.0625rem; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hub-shell { width:min(100%,86rem); margin:0 auto; padding:0 1rem 1.5rem; }

.hub-toolbar { position:sticky; z-index:80; inset-block-start:0; min-height:2.75rem; display:grid; grid-template-columns:auto minmax(20rem,42rem) auto; align-items:center; gap:.75rem; margin-inline:-1rem; padding:.375rem 1rem; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--shell) 92%,transparent); backdrop-filter:blur(.75rem); }
.hub-toolbar-title { display:flex; min-width:0; align-items:center; gap:.5rem; color:var(--ink-muted); }
.hub-toolbar-title>.workspace-icon { color:var(--primary); }
.hub-toolbar-title>span { display:grid; gap:.05rem; }
.hub-toolbar-title strong { color:var(--ink); font-size:.75rem; }
.hub-toolbar-title small { color:var(--ink-faint); font-size:.575rem; }
.smart-capture { position:relative; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; border:1px solid var(--line); border-radius:var(--radius-2); background:var(--surface); }
.smart-capture:focus-within { border-color:color-mix(in srgb,var(--focus) 72%,var(--line)); box-shadow:0 0 0 .125rem color-mix(in srgb,var(--focus) 15%,transparent); }
.smart-capture select,.smart-capture input,.capture-submit { min-height:2rem; border:0; outline:0; }
.smart-capture select { padding:0 1.7rem 0 .625rem; border-inline-end:1px solid var(--line-soft); background:var(--surface-2); color:var(--ink-muted); font-size:.6875rem; }
.smart-capture input { min-width:0; padding:0 .75rem; background:transparent; color:var(--ink); font-size:.75rem; }
.smart-capture input::placeholder { color:var(--ink-faint); }
.capture-submit { display:inline-flex; align-items:center; gap:.35rem; padding:0 .75rem; border-inline-start:1px solid color-mix(in srgb,var(--primary) 30%,var(--line)); background:var(--primary-soft); color:var(--primary); cursor:pointer; }
.capture-submit .workspace-icon { width:.9rem; height:.9rem; }
#capture-status { position:absolute; inset-block-start:calc(100% + .375rem); inset-inline:0; min-height:0; padding:.35rem .5rem; border:1px solid var(--line); border-radius:var(--radius-2); background:var(--raised); color:var(--success); box-shadow:var(--shadow-raised); font-size:.6875rem; opacity:0; pointer-events:none; transform:translateY(-.25rem); transition:opacity .12s ease,transform .12s ease; }
#capture-status:not(:empty) { opacity:1; transform:translateY(0); }
.hub-toolbar-actions { display:flex; align-items:center; gap:.25rem; }
.hub-icon-button,.hub-storage { width:2rem; height:2rem; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:var(--radius-2); background:transparent; color:var(--ink-faint); text-decoration:none; cursor:pointer; }
.hub-icon-button:hover,.hub-storage:hover { border-color:var(--line); background:var(--surface-2); color:var(--ink); }
.hub-storage.is-checking,.hub-storage.is-local { color:var(--warning); }.hub-storage.is-persistent { color:var(--success); }.hub-storage.is-error { color:var(--danger); }

.hub-hero { position:relative; min-height:15rem; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(24rem,.95fr); align-items:center; gap:3rem; overflow:hidden; padding:2.75rem 1.25rem 2rem; border-bottom:1px solid var(--line-soft); }
.hub-hero::after { position:absolute; inset:12% 35% auto auto; width:20rem; height:20rem; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--primary) 7%,transparent),transparent 66%); content:""; pointer-events:none; }
.eyebrow { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; color:var(--ink-muted); font:700 .625rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.status-dot { width:.375rem; height:.375rem; border-radius:50%; background:var(--success); box-shadow:0 0 0 .25rem color-mix(in srgb,var(--success) 9%,transparent); }
.hub-hero h1 { margin:0; font-size:clamp(2.5rem,5vw,4.6rem); font-weight:620; line-height:.94; letter-spacing:-.062em; }
.hub-hero h1 em { color:var(--ink-muted); font-style:normal; }
.hub-hero p { max-width:38rem; margin:1rem 0 0; color:var(--ink-muted); font-size:.9375rem; line-height:1.6; }
.signal-stream { position:relative; min-height:10.5rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; isolation:isolate; }
.signal-stream article { position:relative; z-index:2; min-width:0; display:grid; justify-items:center; gap:.35rem; padding:1.25rem .5rem; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(.5rem); }
.signal-stream article:first-of-type { border-radius:var(--radius-3) 0 0 var(--radius-3); }.signal-stream article:last-of-type { border-radius:0 var(--radius-3) var(--radius-3) 0; }.signal-stream article+article { border-inline-start:0; }
.signal-stream span,.signal-stream small { overflow:hidden; color:var(--ink-faint); font-size:.625rem; text-overflow:ellipsis; white-space:nowrap; }
.signal-stream strong { color:var(--ink); font:650 1.55rem/1 var(--font-mono); }.signal-stream small { color:var(--primary); text-transform:uppercase; letter-spacing:.09em; }
.signal-track { position:absolute; z-index:1; inset:0; overflow:hidden; }
.signal-track::before,.signal-track::after { position:absolute; inset-inline:4%; height:.0625rem; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--info) 55%,transparent),transparent); content:""; }
.signal-track::before { inset-block-start:20%; animation:signalSweep 5.5s linear infinite; }.signal-track::after { inset-block-end:18%; animation:signalSweep 7s 1.5s linear infinite reverse; }
.signal-track i { position:absolute; width:.25rem; height:.25rem; border-radius:50%; background:var(--primary); box-shadow:0 0 .75rem color-mix(in srgb,var(--primary) 72%,transparent); animation:signalNode 4s ease-in-out infinite; }
.signal-track i:nth-child(1){inset:16% auto auto 10%}.signal-track i:nth-child(2){inset:31% 18% auto auto;animation-delay:-1s;background:var(--info)}.signal-track i:nth-child(3){inset:auto auto 17% 37%;animation-delay:-2s}.signal-track i:nth-child(4){inset:auto 4% 36% auto;animation-delay:-3s;background:var(--warning)}
@keyframes signalSweep{0%{transform:translateX(-14%);opacity:.25}50%{opacity:1}100%{transform:translateX(14%);opacity:.25}}@keyframes signalNode{0%,100%{transform:scale(.75);opacity:.35}50%{transform:scale(1.35);opacity:1}}

.hub-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:.75rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface); }
.hub-metrics article { position:relative; min-width:0; padding:.875rem 1rem; border-inline-end:1px solid var(--line-soft); }.hub-metrics article:last-child { border-inline-end:0; }
.hub-metrics span,.hub-metrics small { display:block; overflow:hidden; color:var(--ink-faint); font-size:.625rem; text-overflow:ellipsis; white-space:nowrap; }
.hub-metrics strong { display:block; margin:.45rem 0 .3rem; color:var(--ink); font:650 1.45rem/1 var(--font-mono); letter-spacing:-.045em; }
.metric-signal { display:none; }
.workspace-spotlight { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:.75rem; margin-top:.75rem; padding:.625rem .75rem; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); border-radius:var(--radius-3); background:linear-gradient(90deg,var(--primary-soft),transparent 55%); text-decoration:none; }
.spotlight-icon { width:2rem; height:2rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--radius-2); background:var(--surface-2); color:var(--primary); }
.workspace-spotlight>span:nth-child(2){min-width:0;display:grid;gap:.2rem}.workspace-spotlight small{color:var(--primary);font:700 .5625rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.workspace-spotlight strong{font-size:.8125rem}.workspace-spotlight em{overflow:hidden;color:var(--ink-faint);font-size:.6875rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.workspace-spotlight>b{display:flex;align-items:center;gap:.25rem;color:var(--ink-muted);font-size:.6875rem}.workspace-spotlight>b .workspace-icon{width:.8rem;height:.8rem}

.hub-work-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(19rem,.55fr); gap:.75rem; margin-top:.75rem; }
.hub-panel { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface); }
.hub-panel-header,.launcher-header { min-height:2.75rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .75rem; border-bottom:1px solid var(--line-soft); }
.hub-panel-header>div,.launcher-header>div:first-child{display:grid;gap:.15rem}.panel-kicker{color:var(--ink-faint);font:700 .525rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.hub-panel h2,.launcher-header h2{margin:0;font-size:.8125rem}.hub-panel-header a{display:inline-flex;align-items:center;gap:.25rem;color:var(--ink-muted);font-size:.625rem;text-decoration:none}.hub-panel-header a:hover{color:var(--ink)}.hub-panel-header a .workspace-icon{width:.75rem;height:.75rem}
.today-list,.recent-list { padding:.25rem; }
.dashboard-row { min-height:2.625rem; display:grid; grid-template-columns:1.625rem minmax(0,1fr) auto; align-items:center; gap:.5rem; padding:.375rem .5rem; border-radius:var(--radius-2); color:var(--ink-muted); text-decoration:none; }
.dashboard-row:hover{background:var(--surface-2);color:var(--ink)}.dashboard-row-icon{width:1.625rem;height:1.625rem;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:var(--radius-2);color:var(--ink-faint)}.dashboard-row-icon.is-overdue{color:var(--danger)}.dashboard-row-icon .workspace-icon{width:.875rem;height:.875rem}.dashboard-row span{min-width:0;overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.dashboard-row small{color:var(--ink-faint);font-size:.625rem}.dashboard-empty{min-height:10rem;display:grid;place-items:center;padding:1.5rem;color:var(--ink-faint);font-size:.75rem;text-align:center}.recent-panel{height:100%}
.tool-launcher { margin-top:.75rem; }.launcher-header{align-items:center}.tool-filterbar{min-width:0;display:flex;justify-content:flex-end;gap:.25rem;padding:.15rem}.tool-filterbar button{min-height:1.75rem;padding:0 .55rem;border:1px solid transparent;border-radius:var(--radius-2);background:transparent;color:var(--ink-faint);font-size:.625rem;cursor:pointer;white-space:nowrap}.tool-filterbar button:hover{background:var(--surface-2);color:var(--ink)}.tool-filterbar button.active{border-color:color-mix(in srgb,var(--primary) 30%,var(--line));background:var(--primary-soft);color:var(--primary)}
.tool-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.0625rem; background:var(--line-soft); }
.tool-card { min-width:0; min-height:5.25rem; display:grid; grid-template-columns:1.75rem minmax(0,1fr); grid-template-rows:auto auto; align-content:center; gap:.2rem .5rem; padding:.625rem; background:var(--surface); color:var(--ink-muted); text-decoration:none; }
.tool-card:hover{background:var(--surface-2);color:var(--ink)}.tool-mark{grid-row:1/3;width:1.75rem;height:1.75rem;display:grid;place-items:center;align-self:center;border:1px solid var(--line);border-radius:var(--radius-2);color:var(--ink-faint)}.tool-card:hover .tool-mark{color:var(--primary)}.tool-mark .workspace-icon{width:.95rem;height:.95rem}.tool-card strong,.tool-card small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool-card strong{align-self:end;font-size:.6875rem}.tool-card small{align-self:start;color:var(--ink-faint);font-size:.5625rem}.tool-card em{display:none}.tool-card[hidden]{display:none}
.hub-footer{min-height:3rem;display:flex;align-items:center;gap:.75rem;padding:.75rem .25rem 0;color:var(--ink-faint);font:.625rem/1.4 var(--font-mono)}.footer-local{display:inline-flex;align-items:center;gap:.4rem}.storage-dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--success)}.footer-rule{width:2rem;height:.0625rem;background:var(--line)}.hub-footer a{color:var(--ink-muted);text-decoration:none}

@media(max-width:68rem){.hub-toolbar{grid-template-columns:auto minmax(14rem,1fr) auto}.hub-hero{grid-template-columns:1fr minmax(20rem,.8fr);gap:1.5rem}.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:52rem){.hub-toolbar-title>span{display:none}.hub-hero{grid-template-columns:1fr;gap:1.25rem;padding-block:2rem}.signal-stream{min-height:6rem}.hub-work-grid{grid-template-columns:1fr}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:42rem){
  .hub-shell{padding-inline:.5rem}.hub-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:.375rem;margin-inline:-.5rem;padding:.375rem .5rem .375rem 3.5rem}.hub-toolbar-title{display:none}.smart-capture{grid-column:1}.hub-toolbar-actions{grid-column:2}.smart-capture select,.smart-capture input,.capture-submit{min-height:var(--touch-h)}.smart-capture select{width:4.75rem}.capture-submit{width:var(--touch-h);padding:0;justify-content:center}.capture-submit span{display:none}.hub-icon-button,.hub-storage{width:var(--touch-h);height:var(--touch-h)}.hub-toolbar-actions #command-btn{display:none}
  .hub-hero{min-height:0;padding:1.5rem .5rem 1.25rem}.hub-hero h1{font-size:clamp(2.25rem,12vw,3.4rem)}.hub-hero p{font-size:.8125rem}.signal-stream{min-height:5.5rem}.signal-stream article{min-height:5.5rem;padding:.75rem .25rem}.signal-stream strong{font-size:1.25rem}
  .hub-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-metrics article{border-bottom:1px solid var(--line-soft)}.hub-metrics article:nth-child(2){border-inline-end:0}.hub-metrics article:nth-last-child(-n+2){border-bottom:0}
  .workspace-spotlight{grid-template-columns:2rem minmax(0,1fr)}.workspace-spotlight>b{display:none}.workspace-spotlight em{white-space:normal;line-height:1.4}.launcher-header{align-items:start;flex-direction:column}.tool-filterbar{width:100%;justify-content:flex-start}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{min-height:4.75rem}.hub-footer{flex-wrap:wrap}
}
@media(max-width:25rem){.hub-toolbar-actions #global-search-btn{display:none}.hub-hero h1{font-size:2.15rem}.signal-stream span{font-size:.55rem}.tool-card{grid-template-columns:1.5rem minmax(0,1fr);gap-inline:.375rem;padding:.5rem}.tool-mark{width:1.5rem;height:1.5rem}}
@media(prefers-reduced-motion:reduce){.signal-track::before,.signal-track::after,.signal-track i{animation:none}}
