/* Neutral glass, shared by the private workspace and authentication views. */
:root {
  --canvas:#f5f5f7; --surface:#f5f5f7; --surface-strong:#fff;
  --ink:#1d1d1f; --sub:#515154; --soft:#646468;
  --line:rgba(29,29,31,.12); --line-strong:rgba(29,29,31,.28);
  --accent:#1d1d1f; --accent-hover:#38383b; --on-accent:#fff;
  /* Neutral aliases keep the base component API compatible. */
  --purple:var(--accent); --purple-deep:var(--ink); --purple-tint:rgba(29,29,31,.06);
  --focus:rgba(29,29,31,.5);
  --glass-solid:#fafafa; --glass-clear:rgba(255,255,255,.74); --glass:var(--glass-solid);
  --glass-edge:rgba(255,255,255,.9); --glass-filter:none;
  --glass-shadow:0 8px 32px rgba(0,0,0,.045),0 1px 3px rgba(0,0,0,.025);
  --field:rgba(255,255,255,.65); --group:rgba(118,118,128,.07); --selected:#fff;
}
body {
  background-color:var(--canvas);
  background-image:radial-gradient(ellipse at 15% 0,rgba(255,255,255,.95),transparent 65%),linear-gradient(150deg,#f5f5f7,#ededf0);
  background-attachment:fixed;
}
button,input,textarea,select,summary { -webkit-tap-highlight-color:rgba(128,128,128,.12); }
button,a,summary { touch-action:manipulation; }
button,a,input,textarea,select,summary { transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease; }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.skip-link { z-index:30; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glass:var(--glass-clear); --glass-filter:blur(20px); }
}
.topbar,.auth-panel,.composer,.note-list {
  background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
}
.topbar.shell {
  position:sticky; z-index:10; top:max(12px,env(safe-area-inset-top));
  width:min(920px,calc(100% - 48px)); height:auto; min-height:64px;
  margin-top:max(20px,env(safe-area-inset-top)); padding-block:8px; border-radius:20px; gap:12px;
}
body[data-page="login"],body[data-page="totp-setup"] { padding-top:0; }
body[data-page="login"] .topbar,body[data-page="totp-setup"] .topbar { position:relative; top:auto; }
.topbar .quiet-action { border-radius:10px; }
.topbar .quiet-action:hover { background:var(--group); }
.topbar .brand-lockup { filter:grayscale(1); }
.private-label,.eyebrow { color:var(--soft); letter-spacing:.12em; font-weight:600; }
.auth-main { padding-block:48px; }
.auth-panel { padding:36px; border-radius:28px; }
.auth-panel h1 { font-size:clamp(28px,3.3vw,34px); font-weight:650; line-height:1.25; letter-spacing:-.025em; }
.auth-panel .lede { margin:12px 0 28px; font-size:14px; line-height:1.75; }
.auth-panel input,.auth-panel button,.composer textarea { scroll-margin-block:120px 24px; }
.auth-panel .secondary-action,.inline-field input,.composer textarea,.page-size select { background:var(--field); border-color:var(--line); border-radius:12px; }
.auth-panel .secondary-action { min-height:48px; color:var(--ink); margin-top:12px; }
.auth-panel .secondary-action:hover { background:var(--surface-strong); border-color:var(--line-strong); }
.auth-panel .phone-login,.auth-panel .phone-start { margin-top:0; }
.auth-panel .phone-start,.primary-action,.save-action {
  background:var(--accent); border:1px solid transparent; color:var(--on-accent);
  font-weight:600; border-radius:12px; text-decoration:none;
}
.auth-panel .phone-start:hover,.primary-action:hover,.save-action:hover { background:var(--accent-hover); color:var(--on-accent); border-color:transparent; }
.action-icon { width:18px; height:18px; flex:none; margin-right:10px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:24px 0 20px; color:var(--soft); font-size:12px; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-panel form>label { font-size:12px; font-weight:600; }
.inline-field { gap:12px; align-items:stretch; }
.inline-field input { min-height:50px; padding:10px 14px; }
#totp-code,#totp-confirm-code { font-size:20px; letter-spacing:.25em; font-variant-numeric:tabular-nums; }
#totp-code::placeholder,#totp-confirm-code::placeholder { color:var(--soft); opacity:1; }
.inline-field button { min-height:50px; min-width:64px; padding-inline:16px; background:var(--group); color:var(--ink); border:1px solid var(--line); border-radius:12px; font-weight:600; }
.inline-field button:hover { background:var(--surface-strong); border-color:var(--line-strong); color:var(--ink); }
.auth-panel .status-line { line-height:1.65; }
.auth-panel .phone-pending { background:var(--group); border:0; border-radius:16px; padding:16px; }
.phone-pending .phone-code { font-size:36px; }
.auth-panel .recovery { margin-top:24px; padding-top:12px; }
.recovery summary { justify-content:space-between; font-size:12px; }
.recovery summary::after { content:"+"; font-size:18px; font-weight:400; }
.recovery[open] summary::after { content:"−"; }
.recovery summary::-webkit-details-marker { display:none; }
.phone-details dl { align-items:center; }
.phone-approval-help { line-height:1.75; }
.setup-key code { overflow-wrap:anywhere; border-radius:12px; }
.workspace { padding-top:40px; }
.workspace-head { margin-bottom:28px; align-items:center; }
.workspace h1 { font-size:clamp(28px,3.4vw,34px); line-height:1.25; }
.workspace-copy { font-size:13px; line-height:1.7; }
.composer { padding:24px; border-radius:24px; }
.section-heading { margin-bottom:16px; }
.section-heading h2 { font-size:16px; font-weight:650; }
.section-heading p { font-size:12px; }
.composer textarea { min-height:160px; font-size:16px; }
.composer-toolbar { margin-top:16px; }
.segmented { background:var(--group); border:1px solid transparent; border-radius:12px; padding:3px; }
.segmented button { border-radius:9px; min-width:104px; }
.segmented button[aria-pressed="true"] { background:var(--selected); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.segmented button[aria-pressed="true"] small { color:var(--sub); }
.save-action { min-width:88px; min-height:48px; }
.notes-section { margin-top:36px; padding-top:0; border-top:0; }
.filter-row { width:fit-content; max-width:100%; gap:4px; padding:4px; border:0; border-radius:13px; background:var(--group); }
.filter-row button { border:0; border-radius:9px; }
.filter-row button[aria-pressed="true"] { background:var(--selected); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.07); }
.list-status { margin:12px 0; }
.note-list { padding:0 24px; border-radius:24px; }
.note-list:empty { display:none; }
.note-row:last-child { border-bottom:0; }
.note-row pre { font-size:14px; line-height:1.75; }
.note-times,.lifecycle,.row-status { font-size:11px; }
.note-actions button { border-radius:10px; font-size:12px; }
.note-actions button:hover { background:var(--group); }
.load-more { background:var(--field); border-color:var(--line); }
.quiet-footer { border-color:var(--line); font-size:11px; }
@media(max-width:600px) {
  .topbar.shell { width:calc(100% - 32px); min-height:60px; border-radius:18px; margin-top:max(16px,env(safe-area-inset-top)); padding-block:7px; }
  .topbar .brand-lockup { width:112px; }
  .header-tools { gap:8px; }
  .topbar nav .quiet-action { padding-inline:10px; font-size:12px; }
  body[data-page="workspace"] .topbar { gap:0 8px; padding-block:6px; }
  body[data-page="workspace"] .topbar nav { width:100%; justify-content:space-between; border-top:1px solid var(--line); }
  .auth-main { padding-block:28px 36px; }
  .auth-panel { padding:28px 24px 20px; border-radius:24px; }
  .auth-panel .lede { margin-bottom:24px; }
  .auth-divider { margin:20px 0; }
  .workspace { padding-top:28px; }
  .workspace-head { margin-bottom:24px; }
  .workspace-copy { margin-top:8px; }
  .composer { padding:20px; border-radius:22px; }
  .composer textarea { min-height:140px; }
  .composer-toolbar { gap:12px; }
  .save-action { min-width:112px; }
  .note-list { padding-inline:20px; border-radius:22px; }
  .filter-row { width:100%; }
  .filter-row button { padding-inline:8px; }
  .notes-section { margin-top:28px; }
  .note-footer { gap:4px; }
  .note-actions { justify-content:space-between; }
  .note-actions button { flex:none; }
}
@media(max-width:360px) {
  .auth-panel { padding-inline:20px; }
  .inline-field { gap:8px; }
  .inline-field button { padding-inline:12px; }
  .header-tools { gap:4px; }
}
@media(max-height:600px) { .auth-main { padding-block:20px; } }
@media(prefers-color-scheme:dark) {
  :root {
    --canvas:#101012; --surface:#242426; --surface-strong:#303033;
    --ink:#f5f5f7; --sub:#c5c5c9; --soft:#a5a5ab;
    --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.32);
    --accent:#f5f5f7; --accent-hover:#dedee2; --on-accent:#1d1d1f;
    --purple-tint:rgba(255,255,255,.09); --focus:rgba(245,245,247,.7);
    --glass-solid:#202022; --glass-clear:rgba(32,32,34,.78); --glass-edge:rgba(255,255,255,.1);
    --glass-shadow:0 8px 32px rgba(0,0,0,.12); --field:rgba(16,16,18,.32);
    --group:rgba(255,255,255,.065); --selected:#3b3b3e;
  }
  body { background-image:radial-gradient(ellipse at 15% 0,#252527,transparent 65%),linear-gradient(150deg,#161618,#101012); }
  .topbar .brand-lockup { filter:grayscale(1) invert(1); }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root { --glass:var(--glass-solid); --glass-filter:none; --glass-edge:var(--line-strong); --field:var(--surface-strong); }
  body { background-image:none; }
}
@media(prefers-contrast:more) {
  :root { --sub:#363638; --soft:#454548; --line:#8b8b90; --focus:#1d1d1f; }
  @media(prefers-color-scheme:dark) { :root { --sub:#eeeef0; --soft:#dedee2; --line:#8b8b90; --focus:#fff; } }
}
@media(prefers-reduced-motion:reduce) { button,a,input,textarea,select,summary { transition:none; } }