/* =========================================================
     PRIMES DIGITAL STUDIO: CLIENT WORKSPACE
     Design tokens — Notion-inspired system
  ========================================================= */
  :root{
    /* Core Notion-inspired tokens */
    --bg-canvas: #FEFEFE;
    --bg-sidebar: #F1F1EF;
    --border-subtle: #E3E3E0;
    --text-secondary: #787774;
    --text-primary: #37352F;
    --btn-gradient-black: linear-gradient(135deg, #2F2F2D 0%, #191918 100%);

    /* Supporting tones derived for hierarchy the six core tokens don't cover */
    --text-tertiary: #9B9A97;
    --bg-panel: #FFFFFF;

    /* Semantic status colors, unrelated to the neutral base system */
    --success: #3f6b4f;
    --success-wash: #e6ede7;
    --danger: #a1402f;
    --danger-wash: #f6e7e3;

    /* App background behind the particle field. Deliberately separate
       from --bg-canvas so this can be tuned independently without
       touching cards, borders, or any other component that reuses
       --bg-canvas elsewhere. */
    --bg-page-grid: #595959;

    --radius-s: 3px;
    --radius-m: 6px;
    --shadow-panel: 0 1px 0 rgba(55,53,47,.06), 0 12px 32px -18px rgba(55,53,47,.18);
    --ease: cubic-bezier(.22,.68,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg-canvas);
    color:var(--text-primary);
    font-family:'Inter',-apple-system,sans-serif;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--text-primary);
  }
  a{ color:inherit; }
  button{ font-family:inherit; }
  ::selection{ background:var(--bg-sidebar); color:var(--text-primary); }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* Focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--text-primary);
    outline-offset:2px;
  }

  /* ---------------------------------------------------------
     Shell / blueprint grid backdrop
  --------------------------------------------------------- */
  .primes-app{
    position:relative;
    z-index:0; /* gives this wrapper its own stacking context so the
                  background layer below (negative z-index) stays
                  correctly scoped behind this app's own content only,
                  and never interferes with a host page if this markup
                  is ever embedded elsewhere. */
    min-height:100vh;
    background-color: var(--bg-page-grid);
  }

  /* Live particle field on the app background. Purely decorative
     (pointer-events:none), sits at z-index:-1, strictly behind every
     real UI element. A dense field of small drifting points that
     gently part around a cursor or finger for a premium interactive
     touch. Rendered and animated entirely in JS (see initParticleField
     near the bottom of the script), which also handles device pixel
     ratio, resize, tab-visibility pausing, particle count scaled to
     screen size, and a full stop for anyone with reduced motion
     requested at the OS level. */
  .bg-particles{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    display:block; width:100%; height:100%;
  }

  .topbar{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    background:rgba(254,254,254,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-subtle);
  }
  .topbar .brand{ display:flex; align-items:center; gap:14px; }
  .topbar .brand img{ height:26px; width:auto; display:block; }
  .topbar .brand .tag{ display:none; } /* superseded by the .workspace-badge trapezoid below */
  .topbar-actions{ display:flex; align-items:center; gap:10px; }

  .workspace-badge{
    position:absolute; left:50%; top:0; margin:0; padding:0 46px 0;
    transform:translateX(-50%);
    height:42px; display:flex; align-items:center; justify-content:center;
    background:var(--text-primary); color:#fff;
    clip-path: polygon(6% 0%, 94% 0%, 84% 100%, 16% 100%);
    white-space:nowrap;
  }
  .workspace-badge span{
    font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  }
  @media (max-width:640px){
    .topbar{ padding-top:54px; } /* clears a dedicated band above the logo row for the top-pinned badge, so it never collides with the logo or the action button regardless of its own width */
    .workspace-badge{ height:36px; padding:0 30px; top:0; }
    .workspace-badge span{ font-size:10px; letter-spacing:.13em; }
  }

  .btn{
    appearance:none; border:1px solid var(--text-primary); background:var(--text-primary); color:var(--bg-canvas);
    padding:11px 20px; font-size:13.5px; font-weight:600; border-radius:var(--radius-s);
    cursor:pointer; transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
    letter-spacing:.01em;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .btn-ghost{ background:transparent; color:var(--text-primary); border-color:var(--border-subtle); }
  .btn-ghost:hover{ border-color:var(--text-primary); }
  .btn-primary{ background:var(--btn-gradient-black); border-color:transparent; color:#fff; }
  .btn-primary:hover{ filter:brightness(1.12); }
  .btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
  .btn-danger:hover{ background:var(--danger-wash); }
  .btn-small{ padding:7px 13px; font-size:12.5px; }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
  .btn-block{ width:100%; }

  .link-btn{
    background:none; border:none; color:var(--text-secondary); text-decoration:underline;
    text-underline-offset:3px; cursor:pointer; font-size:13px; padding:0;
  }
  .link-btn:hover{ color:var(--text-primary); }

  /* ---------------------------------------------------------
     Generic layout helpers
  --------------------------------------------------------- */
  .container{ max-width:1180px; margin:0 auto; padding:0 32px; }
  .view{ display:none; }
  .view.active{ display:block; }
  .panel{
    background:var(--bg-panel); border:1px solid var(--border-subtle);
    border-radius:var(--radius-m); box-shadow:var(--shadow-panel);
  }
  .muted{ color:var(--text-secondary); }
  .eyebrow-field{ font-size:11.5px; color:var(--text-secondary); margin-bottom:6px; display:block; font-weight:600; }
  .field{ margin-bottom:20px; }
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field select, .field textarea{
    width:100%; padding:12px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-s);
    background:var(--bg-sidebar); font-size:14.5px; color:var(--text-primary); font-family:inherit;
    transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    background:#fff; border-color:var(--text-primary); outline:none;
  }
  .field textarea{ resize:vertical; min-height:96px; }
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } .container{ padding:0 18px; } }

  .segmented{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .segmented .seg-card.seg-wide{ grid-column:1 / -1; }
  @media (max-width:720px){ .segmented{ grid-template-columns:1fr; } .segmented .seg-card.seg-wide{ grid-column:auto; } }
  .seg-card{
    border:1px solid var(--border-subtle); border-radius:var(--radius-m); padding:20px;
    cursor:pointer; background:var(--bg-sidebar); transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .seg-card h4{ font-size:15px; margin-bottom:6px; }
  .seg-card p{ font-size:12.8px; color:var(--text-secondary); margin:0; }
  .seg-card.selected{ border-color:var(--text-primary); background:var(--bg-sidebar); }

  .check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:720px){ .check-grid{ grid-template-columns:1fr; } }
  .check-item{
    display:flex; align-items:center; gap:10px; border:1px solid var(--border-subtle); border-radius:var(--radius-s);
    padding:11px 13px; font-size:13.5px; cursor:pointer; background:var(--bg-sidebar);
  }
  .check-item input{ accent-color:var(--text-primary); width:16px; height:16px; }
  .check-item.on{ border-color:var(--text-primary); background:var(--bg-sidebar); }

  /* ---------------------------------------------------------
     Auth
  --------------------------------------------------------- */
  #view-auth.active{ min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:60px 24px; }
  .auth-wrap{ width:100%; max-width:960px; display:grid; grid-template-columns:1.1fr 1fr; gap:0; }
  @media (max-width:860px){ .auth-wrap{ grid-template-columns:1fr; } }
  .auth-intro{ padding:52px 44px; }
  .auth-intro .kicker{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-primary); font-weight:700; margin-bottom:18px; }
  .auth-intro h1{ font-size:34px; line-height:1.14; margin-bottom:18px; }
  .auth-intro p{ color:var(--text-secondary); font-size:14.5px; max-width:38ch; }
  .auth-intro .stat-row{ display:flex; gap:28px; margin-top:34px; }
  .auth-intro .stat b{ display:block; font-size:22px; font-family:'Plus Jakarta Sans',sans-serif; }
  .auth-intro .stat span{ font-size:11.5px; color:var(--text-secondary); }
  .auth-card{ padding:44px 40px; border-left:1px solid var(--border-subtle); }
  @media (max-width:860px){ .auth-card{ border-left:none; border-top:1px solid var(--border-subtle); } }
  .auth-card h3{ font-size:19px; margin-bottom:4px; }
  .auth-card .sub{ font-size:13px; color:var(--text-secondary); margin-bottom:24px; }
  .auth-tabs{ display:flex; gap:4px; margin-bottom:26px; background:var(--bg-sidebar); border-radius:var(--radius-s); padding:4px; }
  .auth-tab{ flex:1; text-align:center; padding:9px; font-size:12.8px; font-weight:600; border-radius:2px; cursor:pointer; color:var(--text-secondary); }
  .auth-tab.active{ background:#fff; color:var(--text-primary); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .form-note{ font-size:12px; color:var(--text-tertiary); margin-top:14px; }
  .error-note{ font-size:12.5px; color:var(--danger); margin-top:10px; min-height:16px; }

  /* ---------------------------------------------------------
     Onboarding shell
  --------------------------------------------------------- */
  #view-onboarding .onb-shell{ display:grid; grid-template-columns:260px 1fr; gap:0; margin:40px auto; max-width:1180px; }
  @media (max-width:900px){ #view-onboarding .onb-shell{ grid-template-columns:1fr; } }
  .stepper{ padding:36px 28px; border-right:1px solid var(--border-subtle); }
  @media (max-width:900px){
    .stepper{
      border-right:none; border-bottom:1px solid var(--border-subtle);
      display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
      padding:20px 16px; overflow-x:visible;
    }
  }
  .step-item{ display:flex; align-items:center; justify-content:flex-start; gap:16px; padding:16px 0; position:relative; }
  @media (max-width:900px){
    .step-item{ flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:0; min-width:0; }
    .step-item .txt{ text-align:center; }
  }
  @media (max-width:520px){
    .stepper{ gap:4px; padding:16px 10px; }
    .step-item{ gap:6px; }
    .step-item .num{ width:26px; height:26px; }
    .step-item .num svg{ width:13px; height:13px; }
    .step-item .txt b{ font-size:11px; }
    .step-item .txt span{ font-size:9px; }
  }
  .step-item .num{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border-subtle); flex:none;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-secondary);
    background:var(--bg-canvas);
  }
  .step-item .num svg{ width:16px; height:16px; display:block; }
  .step-item.done .num{ background:var(--text-primary); border-color:var(--text-primary); color:#fff; }
  .step-item.current .num{ background:var(--bg-canvas); border-color:var(--text-primary); border-width:2px; color:var(--text-primary); }
  .step-item .txt{ min-width:0; }
  .step-item .txt b{ display:block; font-size:13.5px; line-height:1.3; }
  .step-item .txt span{ display:block; font-size:11.5px; line-height:1.4; color:var(--text-tertiary); }
  /* The <br class="mobile-break"> inside each step's subtitle only forces a line
     break on narrow/tablet widths, at the exact word specified in the markup.
     On the wide desktop sidebar there is room for the subtitle on one line, so
     the break is suppressed there and the text just wraps naturally if needed. */
  @media (min-width:901px){ .mobile-break{ display:none; } }
  .step-item.current .txt b{ color:var(--text-primary); }
  .step-item:not(.current):not(.done) .txt b{ color:var(--text-secondary); }

  .onb-body{ padding:40px 48px; }
  @media (max-width:720px){ .onb-body{ padding:28px 20px; } }
  .onb-step{ display:none; }
  .onb-step.active{ display:block; animation:riseIn .38s var(--ease); }
  @keyframes riseIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
  .onb-step .step-head{ margin-bottom:30px; }
  .stage-indicator{
    display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
    padding:4px 16px 4px 4px; border-radius:20px;
    background:var(--bg-sidebar); border:1px solid var(--border-subtle);
  }
  .stage-indicator-icon{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:24px; height:24px; border-radius:50%;
    background:var(--text-primary); color:#fff;
  }
  .stage-indicator-icon svg{ width:12px; height:12px; display:block; }
  .stage-indicator-label{ line-height:1.3; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-primary); }
  .onb-step .step-head h2{ font-size:25px; margin-top:6px; }
  .onb-step .step-head p{ color:var(--text-secondary); font-size:13.8px; margin-top:8px; max-width:60ch; }
  .onb-footer{ display:flex; justify-content:space-between; margin-top:36px; padding-top:24px; border-top:1px solid var(--border-subtle); }

  /* Drop zone */
  .dropzone{
    border:2px dashed var(--border-subtle); border-radius:var(--radius-m); padding:40px 24px; text-align:center;
    background:var(--bg-sidebar); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .dropzone:hover{ border-color:var(--text-secondary); }
  .dropzone.drag{ border-color:var(--text-primary); background:var(--bg-canvas); }
  .dropzone-icon{
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px; width:28px; height:28px; color:var(--text-secondary);
  }
  .dropzone-icon svg{ width:28px; height:28px; display:block; }
  .dropzone p{ margin:0; font-size:13.5px; color:var(--text-secondary); }
  .dropzone .accent{ color:var(--text-primary); font-weight:600; }
  .dropzone-hint{ margin-top:6px; font-size:11.5px; color:var(--text-tertiary); }
  .asset-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; margin-top:16px; }
  .asset-thumb{ position:relative; border:1px solid var(--border-subtle); border-radius:var(--radius-s); overflow:hidden; background:#fff; }
  .asset-thumb img{ width:100%; height:80px; object-fit:cover; display:block; }
  .asset-thumb .name{ font-size:10px; padding:4px 6px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .asset-thumb .rm{ position:absolute; top:3px; right:3px; background:rgba(55,53,47,.75); color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:11px; cursor:pointer; line-height:1; }

  .swatch-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
  .swatch{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-subtle); position:relative; }
  .swatch .rm{ position:absolute; top:-6px; right:-6px; background:var(--text-primary); color:#fff; border:none; border-radius:50%; width:16px; height:16px; font-size:9px; cursor:pointer; }

  /* Contract */
  .contract-box{
    border:1px solid var(--border-subtle); border-radius:var(--radius-m); background:var(--bg-sidebar);
    padding:26px 28px; max-height:340px; overflow-y:auto; font-size:13px; line-height:1.75; color:var(--text-primary);
  }
  .contract-box h4{ font-size:13.5px; margin:18px 0 6px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-primary); }
  .contract-box h4:first-child{ margin-top:0; }
  .sig-wrap{ margin-top:24px; }
  .sig-pad-frame{ border:1px solid var(--border-subtle); border-radius:var(--radius-m); background:#fff; position:relative; }
  #sigCanvas{ display:block; width:100%; height:180px; cursor:crosshair; touch-action:none; border-radius:var(--radius-m); }
  .sig-baseline{ position:absolute; left:24px; right:24px; bottom:34px; border-bottom:1px dashed var(--border-subtle); pointer-events:none; }
  .sig-controls{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
  .agree-row{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; font-size:13px; }
  .agree-row input{ margin-top:3px; accent-color:var(--text-primary); }
  .sig-download-banner{ display:none; margin-top:16px; padding:16px 18px; background:var(--success-wash); border:1px solid var(--success); border-radius:var(--radius-m); align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .sig-download-banner.show{ display:flex; }

  /* Pricing / Paywall */
  .price-panel{ padding:0; overflow:hidden; }
  .price-head{ background:var(--text-primary); color:var(--bg-canvas); padding:30px 32px; }
  .price-head .kicker{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(254,254,254,.6); font-weight:700; }
  .price-head h2{ color:#fff; font-size:24px; margin-top:8px; }
  .price-body{ padding:28px 32px; }
  .price-line{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border-subtle); font-size:13.8px; }
  .price-line b{ font-family:'Plus Jakarta Sans',sans-serif; }
  .price-line.total{ border-bottom:none; padding-top:18px; font-size:16px; }
  .price-line.total b{ font-size:20px; }
  .price-line .label small{ display:block; color:var(--text-secondary); font-size:11.5px; font-weight:400; }
  .paywall-note{ font-size:12px; color:var(--text-secondary); margin-top:16px; }
  .lock-icon{ font-size:12px; }
  .pay-methods{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
  @media (max-width:720px){ .pay-methods{ grid-template-columns:1fr; } }
  .pay-method-card{ border:1px solid var(--border-subtle); border-radius:var(--radius-m); padding:18px 20px; background:var(--bg-sidebar); }
  .pay-method-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .pay-method-head .pay-icon{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:24px; height:24px; border-radius:50%;
    background:var(--text-primary); color:#fff;
  }
  .pay-method-head .pay-icon svg{ width:12px; height:12px; display:block; }
  .pay-method-head h4{ font-size:14px; }
  .pay-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border-subtle); font-size:12.8px; gap:10px; }
  .pay-row-value{ display:flex; align-items:center; gap:8px; flex:none; }
  .pay-row:last-of-type{ border-bottom:none; }
  .pay-row span{ color:var(--text-secondary); }
  .pay-row b{ font-family:'Plus Jakarta Sans',sans-serif; text-align:right; }
  .pay-note{ font-size:11.5px; color:var(--text-tertiary); margin:10px 0 0; }
  .copy-btn{ appearance:none; border:1px solid var(--border-subtle); background:#fff; color:var(--text-secondary); font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:12px; cursor:pointer; }
  .copy-btn:hover{ border-color:var(--text-primary); color:var(--text-primary); }

  /* ---------------------------------------------------------
     Dashboard
  --------------------------------------------------------- */
  #view-dashboard .dash-head{ display:flex; justify-content:space-between; align-items:flex-end; margin:44px 0 30px; flex-wrap:wrap; gap:16px; }
  #view-dashboard .dash-head h1{ font-size:27px; }
  #view-dashboard .dash-head .sub{ color:var(--text-secondary); font-size:13.5px; margin-top:4px; }
  .metric-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
  @media (max-width:900px){ .metric-row{ grid-template-columns:repeat(2,1fr); } }
  .metric-card{ padding:20px 22px; }
  .metric-card .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); }
  .metric-card .val{ font-size:26px; font-family:'Plus Jakarta Sans',sans-serif; margin-top:8px; }
  .metric-card .sub{ font-size:11.5px; color:var(--text-tertiary); margin-top:4px; }

  .dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:24px; }
  .dash-grid > .panel{ min-width:0; } /* let grid items shrink below the Gantt's intrinsic min-width instead of forcing the whole page wider on narrow screens */
  @media (max-width:960px){ .dash-grid{ grid-template-columns:1fr; } }
  .panel-pad{ padding:26px 28px; }
  .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .panel-head h3{ font-size:16px; }
  .panel-head .tag{ font-size:11px; color:var(--text-secondary); }

  /* Gantt */
  .gantt-scroll{ overflow-x:auto; }
  .gantt{ min-width:640px; }
  .gantt-row{ display:grid; grid-template-columns:160px 1fr; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-subtle); }
  .gantt-row:last-child{ border-bottom:none; }
  .gantt-row .phase-name{ font-size:12.8px; font-weight:600; padding-right:12px; }
  .gantt-row .phase-name small{ display:block; font-weight:400; color:var(--text-tertiary); font-size:10.5px; }
  .gantt-track{ position:relative; height:22px; background:var(--bg-sidebar); border-radius:11px; overflow:visible; }
  .gantt-bar{ position:absolute; top:0; height:100%; border-radius:11px; background:var(--text-tertiary); }
  .gantt-bar.status-done{ background:var(--success); }
  .gantt-bar.status-active{ background:var(--text-primary); }
  .gantt-bar.status-upcoming{ background:var(--border-subtle); }
  .gantt-inner{ position:relative; }
  .gantt-today{ position:absolute; top:0; bottom:0; width:2px; background:var(--danger); z-index:5; }
  .gantt-legend{ display:flex; gap:18px; margin-top:16px; font-size:11.5px; color:var(--text-secondary); flex-wrap:wrap; }
  .gantt-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .gantt-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

  .vault-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle); font-size:13px; }
  .vault-row:last-child{ border-bottom:none; }
  .note-item{ padding:13px 0; border-bottom:1px solid var(--border-subtle); font-size:13px; }
  .note-item:last-child{ border-bottom:none; }
  .note-item .meta{ font-size:10.8px; color:var(--text-tertiary); margin-top:3px; }
  .status-pill{ font-size:10.5px; padding:3px 9px; border-radius:20px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .status-pill.paid{ background:var(--success-wash); color:var(--success); }
  .status-pill.pending{ background:var(--bg-sidebar); color:var(--text-primary); }
  .status-pill.draft{ background:var(--bg-sidebar); color:var(--text-secondary); }

  /* ---------------------------------------------------------
     Admin
  --------------------------------------------------------- */
  #view-admin .adm-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:40px 0 24px; }
  @media (max-width:600px){
    #view-admin .adm-head{ flex-direction:column; align-items:flex-start; margin:28px 0 20px; }
    #view-admin .adm-head > div:last-child{ width:100%; }
    #view-admin .adm-head > div:last-child .btn{ flex:1; }
  }
  .adm-grid{ display:grid; grid-template-columns:340px 1fr; gap:20px; }
  @media (max-width:960px){ .adm-grid{ grid-template-columns:1fr; } }
  .roster-item{ padding:14px 18px 14px 15px; border-bottom:1px solid var(--border-subtle); border-left:3px solid transparent; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .roster-item:hover{ background:var(--bg-sidebar); }
  .roster-item.selected{ background:var(--bg-sidebar); border-left-color:var(--text-primary); }
  .roster-item b{ font-size:13.3px; display:block; }
  .roster-item span{ font-size:11px; color:var(--text-tertiary); }
  .empty-note{ padding:40px 20px; text-align:center; color:var(--text-tertiary); font-size:13px; }
  .kv-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-subtle); font-size:12.8px; }
  .kv-row b{ font-weight:600; }
  .admin-tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--border-subtle); }
  .admin-tab{ padding:10px 4px; margin-right:20px; font-size:13px; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; }
  .admin-tab.active{ color:var(--text-primary); border-color:var(--text-primary); font-weight:600; }
  .admin-pane{ display:none; }
  .admin-pane.active{ display:block; }

  .footer-strip{ text-align:center; padding:40px 24px 60px; color:rgba(255,255,255,.62); font-size:11.5px; }
  .footer-strip a{ color:rgba(255,255,255,.85); }
  .footer-strip .link-btn{ color:rgba(255,255,255,.85); }
  .footer-strip .link-btn:hover{ color:#fff; }

  .proto-toolbar{ position:fixed; right:18px; bottom:18px; z-index:140; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .proto-toggle{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--text-primary); background:#fff; color:var(--text-primary);
    font-size:19px; cursor:pointer; box-shadow:0 8px 22px rgba(55,53,47,.2); line-height:1;
  }
  .proto-toggle:hover{ background:var(--bg-sidebar); }
  .proto-menu{
    display:none; flex-direction:column; gap:6px; background:#fff; border:1px dashed var(--text-primary);
    border-radius:12px; padding:10px; box-shadow:0 12px 28px rgba(55,53,47,.2); min-width:190px;
  }
  .proto-menu.open{ display:flex; }
  .proto-menu .proto-label{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-secondary); padding:2px 4px 4px; }
  .proto-btn{ appearance:none; border:1px solid var(--border-subtle); background:var(--bg-sidebar); color:var(--text-primary); font-size:12.5px; font-weight:600; padding:9px 13px; border-radius:8px; cursor:pointer; text-align:left; }
  .proto-btn:hover{ border-color:var(--text-primary); color:var(--text-primary); background:var(--bg-sidebar); }
  .proto-focus{ outline:2px solid var(--text-primary); outline-offset:4px; transition:outline-color .3s var(--ease); }

  .toast{
    position:fixed; bottom:26px; right:26px; background:var(--text-primary); color:#fff; padding:14px 20px;
    border-radius:var(--radius-s); font-size:13px; box-shadow:0 12px 28px rgba(0,0,0,.25);
    transform:translateY(20px); opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:200; max-width:320px;
  }
  .toast.show{ transform:translateY(0); opacity:1; }

  .modal-back{ position:fixed; inset:0; background:rgba(55,53,47,.5); display:none; align-items:center; justify-content:center; z-index:150; padding:20px; }
  .modal-back.show{ display:flex; }
  .modal-box{ background:#fff; border-radius:var(--radius-m); max-width:420px; width:100%; padding:28px; }
  .modal-box h3{ font-size:17px; margin-bottom:10px; }
  .modal-box p{ font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
  .modal-actions{ display:flex; gap:10px; justify-content:flex-end; }