/* ============================================================
   InkCore Design Language (IDL) — Dark
   Shared design system: tokens, shell, sidebar, topbar,
   KPI cards, panels, tables, auth screens, map, AI components
   ============================================================ */


  :root{
    --bg:#121212;
    --sidebar:#181818;
    --panel:#181818;
    --card:#202020;
    --hover:#262626;
    --border:#2B2B2B;
    --divider:rgba(255,255,255,.06);
    --text:#F7F5F0;
    --text-2:#B9B2A8;
    --muted:#8D877E;
    --gold:#D4AF37;
    --gold-soft:rgba(212,175,55,.14);

    --crm:#5B8DEF;
    --sales:#E8A43A;
    --marketing:#D97AA6;
    --production:#B87333;
    --warehouse:#4FA89B;
    --hr:#9B7FC7;
    --ai:#39C6E6;
    --procurement:#9C7A54;

    --success:#7FBF8F; --success-bg:rgba(127,191,143,.14);
    --danger:#D97A6B; --danger-bg:rgba(217,122,107,.14);
    --warning:#E0B04C; --warning-bg:rgba(224,176,76,.14);

    --cut:16px; --cut-sm:9px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px; -webkit-font-smoothing:antialiased; }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; font-size:inherit; border:none; background:none; color:inherit; cursor:pointer;}
  .display{ font-family:'Cormorant Garamond',serif; }
  .kicker{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--muted); font-size:13px; letter-spacing:.2px; }
  .num{ font-variant-numeric:tabular-nums; font-weight:600; }

  .cut{ position:relative; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
  .cut::before{
    content:""; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 var(--cut) var(--cut) 0;
    border-color:transparent var(--gold) transparent transparent; opacity:.5;
  }
  .cut-sm{ --cut:var(--cut-sm); }

  /* Theme: rounded corner style (alternative to the default cut-corner
     language) — applied via a body class set from company settings,
     never a hardcoded default. See inkcoreInitTheme in app.js. */
  body.theme-rounded .cut{ clip-path:none; border-radius:10px; }
  body.theme-rounded .cut::before{ display:none; }
  body.theme-rounded .cut-sm{ border-radius:6px; }

  /* ===== Shell ===== */
  .shell{ display:grid; grid-template-columns:232px 1fr 300px; min-height:100vh; }

  /* ===== Left sidebar ===== */
  .sidebar{ background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
  .brand{ display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid var(--divider); }
  .brand-mark{ width:26px; height:26px; color:var(--gold); }
  .brand-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; letter-spacing:.3px; }
  .brand-name span{ color:var(--gold); }

  .sb-search{
    margin:14px 16px; padding:8px 10px;
    background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; cursor:pointer;
  }
  .sb-search .kbd{ margin-right:auto; margin-left:auto; }
  .kbd b{ background:var(--hover); border:1px solid var(--border); color:var(--muted); font-size:9.5px; font-weight:600; padding:1px 5px; }

  .nav{ flex:1; overflow-y:auto; padding:4px 0 16px; }
  .nav-group{ margin-top:16px; }
  .nav-label{ padding:0 18px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:7px 18px;
    color:var(--text-2); font-size:12.5px; font-weight:500;
    border-left:2px solid transparent; cursor:pointer;
  }
  .nav-item svg{ width:15px; height:15px; stroke-width:1.6; flex:none; color:var(--n-acc, var(--muted)); }
  .nav-item:hover{ color:var(--text); background:rgba(255,255,255,.02); }
  .nav-item.active{ color:var(--gold); background:var(--gold-soft); border-left-color:var(--gold); font-weight:600; }
  .nav-item.active svg{ color:var(--gold); }

  .sidebar-foot{ border-top:1px solid var(--divider); padding:14px 16px; display:flex; align-items:center; gap:9px; }
  .user-avatar{ width:28px; height:28px; border-radius:50%; background:var(--hover); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex:none; }
  .user-meta .name{ font-size:12px; font-weight:600; }
  .user-meta .role{ font-size:10px; color:var(--muted); }

  /* ===== Main ===== */
  .main{ display:flex; flex-direction:column; min-width:0; }

  .topbar{
    display:flex; align-items:center; gap:14px; padding:14px 28px;
    border-bottom:1px solid var(--border); position:sticky; top:0;
    background:rgba(18,18,18,.92); backdrop-filter:blur(6px); z-index:5;
  }
  .gsearch{
    flex:1; max-width:380px; display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--border); padding:8px 12px; color:var(--muted); font-size:12px; cursor:pointer;
  }
  .gsearch span{ flex:1; }
  .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .icon-btn{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:var(--card); border:1px solid var(--border); color:var(--muted); cursor:pointer; position:relative;
  }
  .icon-btn:hover{ color:var(--text); background:var(--hover); }
  .icon-btn.on{ color:var(--ai); border-color:rgba(57,198,230,.4); background:rgba(57,198,230,.1); }
  .icon-btn svg{ width:15px; height:15px; stroke-width:1.6; }
  .icon-btn .dot{ position:absolute; top:5px; right:6px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
  .btn-primary{
    display:flex; align-items:center; gap:7px; background:var(--gold); color:#161616; font-weight:600;
    font-size:12px; padding:8px 14px; cursor:pointer; --cut:var(--cut-sm);
  }
  .btn-primary svg{ width:13px; height:13px; stroke-width:1.8; }
  .avatar-btn{ width:32px; height:32px; border-radius:50%; background:var(--hover); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer; }

  .content{ max-width:1180px; width:100%; margin:0 auto; padding:26px 28px 80px; }

  /* Greeting */
  .greeting{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
  .greeting .kicker{ font-size:14px; }
  .greeting h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; margin-top:2px; }
  .greeting .date{ color:var(--muted); font-size:12px; }

  /* Announcement */
  .announcement{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--border); border-right:2px solid var(--gold);
    padding:12px 16px; margin-bottom:16px; font-size:12.5px;
  }
  .announcement svg{ width:16px; height:16px; color:var(--gold); flex:none; }
  .announcement b{ font-weight:600; }
  .announcement .close{ margin-left:auto; color:var(--muted); cursor:pointer; }

  /* AI Daily Brief */
  .ai-brief{
    background:linear-gradient(160deg, rgba(57,198,230,.06), rgba(57,198,230,0) 55%), var(--card);
    border:1px solid var(--border); padding:18px 20px; margin-bottom:20px; position:relative;
  }
  .ai-brief::before{ border-width:0 var(--cut-sm) var(--cut-sm) 0; border-color:transparent rgba(57,198,230,.55) transparent transparent; }
  .ai-brief-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  .ai-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(57,198,230,.14); color:var(--ai); font-size:10px; font-weight:700; padding:3px 9px; border:1px solid rgba(57,198,230,.3); }
  .ai-chip svg{ width:11px; height:11px; }
  .ai-brief-title{ font-weight:600; font-size:13.5px; }
  .ai-brief-text{ font-size:12.5px; color:var(--text-2); line-height:1.7; max-width:820px; }
  .ai-brief-text b{ color:var(--text); font-weight:600; }

  /* KPI grid */
  .section-title{ display:flex; align-items:center; gap:8px; margin:26px 0 14px; }
  .section-title .kicker{ font-size:13px; }
  .section-title::after{ content:""; flex:1; height:1px; background:var(--divider); }

  .kpi-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
  .kpi-card{ background:var(--card); border:1px solid var(--border); padding:16px; position:relative; }
  .kpi-card::before{ border-width:0 12px 12px 0; }
  .kpi-icon{ width:26px; height:26px; background:var(--k-bg, var(--gold-soft)); color:var(--k-fg, var(--gold)); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
  .kpi-icon svg{ width:14px; height:14px; stroke-width:1.6; }
  .kpi-label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:600; }
  .kpi-value{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:24px; margin-top:6px; }
  .kpi-delta{ font-size:10.5px; color:var(--gold); margin-top:6px; }
  .kpi-delta.down{ color:var(--danger); }

  /* two/three col grids */
  .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
  .grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
  .panel{ background:var(--card); border:1px solid var(--border); padding:18px; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; }
  .panel-title{ font-weight:600; font-size:13px; }
  .panel-link{ font-size:11px; color:var(--gold); font-weight:600; cursor:pointer; }

  /* Today's work */
  .task-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--divider); }
  .task-row:last-child{ border-bottom:none; }
  .task-check{ width:14px; height:14px; border:1.4px solid var(--border); flex:none; }
  .task-check.done{ background:var(--gold); border-color:var(--gold); }
  .task-text{ font-size:12px; flex:1; }
  .task-text.done{ color:var(--muted); text-decoration:line-through; }
  .task-tag{ font-size:9.5px; font-weight:700; padding:2px 7px; }
  .task-tag.high{ background:var(--danger-bg); color:var(--danger); }
  .task-tag.med{ background:var(--warning-bg); color:var(--warning); }
  .task-tag.low{ background:rgba(255,255,255,.06); color:var(--muted); }

  /* BI widgets */
  .bi-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--divider); font-size:12px; }
  .bi-row:last-child{ border-bottom:none; }
  .bi-row .lbl{ color:var(--text-2); }
  .bi-row .v{ font-weight:600; }
  .health-ring{ width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--gold) 0% 82%, var(--border) 82% 100%); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
  .health-ring span{ width:48px; height:48px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:15px; }
  .funnel{ display:flex; flex-direction:column; gap:6px; }
  .funnel-row{ display:flex; align-items:center; gap:8px; }
  .funnel-bar{ height:16px; background:var(--gold); opacity:.85; }
  .funnel-row span{ font-size:10.5px; color:var(--muted); width:70px; flex:none; }
  .funnel-row .v{ font-size:10.5px; color:var(--text); font-weight:600; width:32px; text-align:right; }

  .chart-wrap{ height:150px; }
  .bars{ display:flex; align-items:flex-end; gap:10px; height:100%; padding-top:8px; }
  .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
  .bar{ width:100%; background:linear-gradient(180deg, var(--gold), #A6862C); opacity:.85; }
  .bar-col span{ font-size:9.5px; color:var(--muted); }

  /* Operations tiles */
  .op-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  .op-tile{ background:var(--card); border:1px solid var(--border); padding:14px; --cut:var(--cut-sm); cursor:pointer; }
  .op-icon{ width:26px; height:26px; background:var(--o-bg); color:var(--o-fg); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
  .op-icon svg{ width:14px; height:14px; stroke-width:1.6; }
  .op-name{ font-size:12px; font-weight:600; }
  .op-meta{ font-size:10.5px; color:var(--muted); margin-top:3px; }

  /* Global view */
  .branch-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--divider); font-size:12px; }
  .branch-row:last-child{ border-bottom:none; }
  .branch-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
  .branch-name{ font-weight:600; flex:1; }
  .branch-stat{ color:var(--muted); font-size:11px; width:110px; }
  .branch-bar{ width:90px; height:5px; background:var(--border); position:relative; overflow:hidden; }
  .branch-bar span{ position:absolute; inset:0; background:var(--gold); }

  /* Footer widgets */
  .foot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px; }
  .foot-panel{ background:var(--card); border:1px solid var(--border); padding:15px; }
  .foot-title{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:10px; }
  .foot-item{ display:flex; align-items:center; gap:8px; font-size:11.5px; padding:6px 0; border-bottom:1px solid var(--divider); }
  .foot-item:last-child{ border-bottom:none; }
  .foot-item svg{ width:13px; height:13px; color:var(--muted); flex:none; }

  /* ===== Right Utility Panel ===== */
  .utility{ background:var(--sidebar); border-left:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
  .u-tabs{ display:flex; border-bottom:1px solid var(--divider); }
  .u-tab{ flex:1; text-align:center; padding:14px 0; font-size:11px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; }
  .u-tab.active{ color:var(--ai); border-bottom-color:var(--ai); }
  .u-body{ flex:1; overflow-y:auto; padding:16px; }
  .u-msg{ background:var(--card); border:1px solid var(--border); padding:12px; font-size:11.5px; line-height:1.6; color:var(--text-2); margin-bottom:10px; }
  .u-msg.me{ background:rgba(57,198,230,.08); border-color:rgba(57,198,230,.25); color:var(--text); }
  .u-input{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); padding:9px 12px; margin:14px 0 4px; }
  .u-input input{ background:none; border:none; color:var(--text); font-size:11.5px; flex:1; outline:none; font-family:inherit; }
  .u-section{ margin-top:22px; }
  .u-section-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:10px; }
  .u-mini-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; padding:6px 0; border-bottom:1px solid var(--divider); }
  .u-mini-row:last-child{ border-bottom:none; }
  .u-mini-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }

  /* Global View — dot-matrix map */
  .map-wrap{
    position:relative; height:260px; overflow:hidden;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:14px 14px;
    -webkit-mask-image: radial-gradient(ellipse 78% 85% at 50% 48%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 78% 85% at 50% 48%, #000 62%, transparent 100%);
  }
  .map-pin{ position:absolute; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-100%); cursor:pointer; }
  .map-pin .ring{
    width:var(--ring,16px); height:var(--ring,16px); border-radius:50%;
    background:rgba(212,175,55,.16); border:1px solid rgba(212,175,55,.4);
    display:flex; align-items:center; justify-content:center;
  }
  .map-pin .core{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.18); }
  .map-pin.hq .core{ background:var(--gold); box-shadow:0 0 0 5px rgba(212,175,55,.28); }
  .map-pin .pulse{
    position:absolute; inset:0; border-radius:50%; border:1px solid rgba(212,175,55,.5);
    animation:pulse 2.6s ease-out infinite;
  }
  @keyframes pulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(2.4); opacity:0; } }
  .map-pin .label{ margin-top:6px; font-size:10px; white-space:nowrap; color:var(--text-2); }
  .map-pin .label b{ color:var(--text); font-weight:600; }
  .map-pin:hover .label{ color:var(--gold); }
  .map-legend{ position:absolute; bottom:10px; left:10px; display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--muted); }
  .map-legend .core{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

  @media (max-width:1400px){ .shell{ grid-template-columns:232px 1fr; } .utility{ display:none; } }
  @media (max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } .grid-3{ grid-template-columns:1fr; } .op-grid{ grid-template-columns:repeat(3,1fr);} .foot-grid{ grid-template-columns:repeat(2,1fr);} }

  /* ===== Mobile (≤860px): real drawer nav + bottom-sheet utility panel ===== */
  .hamburger-btn{ display:none; }
  .sidebar-overlay{ display:none; }
  .utility-mobile-toggle{ display:none; }
  .utility-close-btn{ display:none; }

  @media (max-width:860px){
    .shell{ grid-template-columns:1fr; }

    /* Sidebar becomes a slide-in drawer instead of vanishing —
       navigation must always be reachable, never just disappear. */
    .sidebar{
      position:fixed; top:0; left:0; height:100vh; width:250px; z-index:60;
      transform:translateX(-100%); transition:transform .22s ease;
    }
    .sidebar.mobile-open{ transform:translateX(0); }

    .sidebar-overlay{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55;
    }
    .sidebar-overlay.visible{ display:block; }

    .hamburger-btn{
      display:flex; align-items:center; justify-content:center;
      width:32px; height:32px; background:var(--card); border:1px solid var(--border);
      color:var(--text-2); cursor:pointer; flex:none;
    }
    .hamburger-btn svg{ width:16px; height:16px; stroke-width:1.8; }

    .topbar{ padding:12px 14px; gap:10px; }
    .gsearch{ max-width:none; }
    .gsearch .kbd{ display:none; }
    .content{ padding:18px 14px 70px; }

    .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; }
    .grid-2, .grid-3{ grid-template-columns:1fr !important; }
    .op-grid, .foot-grid{ grid-template-columns:repeat(2,1fr) !important; }

    /* Tables: scroll horizontally inside their panel rather than
       squeezing columns unreadably or breaking the page layout. */
    .panel{ overflow-x:auto; }

    /* Utility panel (AI/Tasks/Calendar/Notes): reachable via a
       floating button instead of just being hidden with no way back. */
    .utility-mobile-toggle{
      display:flex; align-items:center; justify-content:center;
      position:fixed; bottom:20px; right:16px; z-index:56;
      width:48px; height:48px; border-radius:50%;
      background:var(--gold); color:#161616; border:none; cursor:pointer;
      box-shadow:0 4px 14px rgba(0,0,0,.4);
    }
    .utility-mobile-toggle svg{ width:20px; height:20px; stroke-width:1.8; }

    .utility{
      display:none; position:fixed; left:0; right:0; bottom:0; z-index:57;
      height:80vh; border-top:1px solid var(--border);
      border-radius:14px 14px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.5);
    }
    .utility.mobile-open{ display:flex; flex-direction:column; }
    .utility-close-btn{
      display:flex; align-items:center; justify-content:center;
      width:32px; height:32px; margin-left:auto; background:none; border:none;
      color:var(--muted); font-size:16px; cursor:pointer;
    }
    .u-tab{ min-height:44px; display:flex; align-items:center; }
    .icon-btn, .hamburger-btn, .avatar-btn{ min-width:40px; min-height:40px; }
  }

  @media (max-width:520px){
    .kpi-grid{ grid-template-columns:1fr !important; }
    .op-grid, .foot-grid{ grid-template-columns:1fr !important; }
  }


/* ============================================================
   Auth screens (Login / Signup) — brand split panel
   Everything here is genuinely new for this screen only. It
   deliberately does NOT redeclare :root, *, body, .cut, .kicker,
   etc. — those already exist globally from the top of this file,
   and an earlier version of this block redefined them with a bare
   (unscoped) selector, silently overriding the real values on
   EVERY page in the app (e.g. .kicker's font-size, --cut's size).
   ============================================================ */

  .auth-shell{ display:grid; grid-template-columns:1fr 480px; min-height:100vh; }

  /* ===== Left — brand / story panel ===== */
  .brand-panel{
    background:var(--panel);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; justify-content:space-between;
    padding:48px 56px;
    position:relative; overflow:hidden;
  }
  .brand-panel::after{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 40%, transparent 100%);
    pointer-events:none;
  }
  .bp-top{ position:relative; z-index:1; }
  .bp-top .brand{ display:flex; align-items:center; gap:10px; margin-bottom:64px; }
  .bp-top .brand-mark{ width:28px; height:28px; color:var(--gold); }
  .bp-top .brand-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:20px; }
  .bp-top .brand-name span{ color:var(--gold); }

  .bp-headline{ max-width:480px; }
  .bp-headline .kicker{ font-size:15px; margin-bottom:10px; display:block; }
  .bp-headline h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:38px; line-height:1.25; }
  .bp-headline p{ color:var(--text-2); font-size:13.5px; line-height:1.7; margin-top:16px; max-width:420px; }

  .bp-features{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; margin-top:40px; }
  .bp-feature{ display:flex; align-items:flex-start; gap:12px; }
  .bp-feature .ic{ width:30px; height:30px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
  .bp-feature .ic svg{ width:15px; height:15px; stroke-width:1.6; }
  .bp-feature .t{ font-size:13px; font-weight:600; }
  .bp-feature .d{ font-size:11.5px; color:var(--muted); margin-top:2px; }

  .bp-bottom{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11.5px; }
  .bp-bottom .dot{ width:5px; height:5px; border-radius:50%; background:var(--muted); }

  /* ===== Right — form panel ===== */
  .form-panel{ display:flex; align-items:center; justify-content:center; padding:40px; }
  .form-wrap{ width:100%; max-width:360px; }

  .trial-chip{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--gold-soft); color:var(--gold);
    font-size:10.5px; font-weight:700; padding:4px 10px; border:1px solid rgba(212,175,55,.3);
    margin-bottom:18px;
  }
  .trial-chip svg{ width:12px; height:12px; }

  .form-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; }
  .form-sub{ color:var(--muted); font-size:12px; margin-top:6px; margin-bottom:26px; }
  .form-sub a{ color:var(--gold); font-weight:600; }

  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
  .field input, .field select{
    width:100%; background:var(--card); border:1px solid var(--border); color:var(--text);
    padding:11px 13px; font-size:12.5px; font-family:inherit; outline:none;
  }
  .field input:focus, .field select:focus{ border-color:rgba(212,175,55,.5); }
  .field input::placeholder{ color:var(--muted); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  .pw-hint{ font-size:10.5px; color:var(--muted); margin-top:6px; }

  .terms{ display:flex; align-items:flex-start; gap:9px; margin:18px 0 20px; }
  .terms input{ margin-top:2px; accent-color:var(--gold); }
  .terms label{ font-size:11.5px; color:var(--text-2); line-height:1.6; }
  .terms a{ color:var(--gold); font-weight:600; }

  .btn-submit{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--gold); color:#161616; font-weight:700; font-size:13px;
    padding:13px; cursor:pointer; --cut:var(--cut-sm); border:none; font-family:inherit;
  }
  .btn-submit svg{ width:14px; height:14px; stroke-width:2; }

  .trust-row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
  .trust-item{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); }
  .trust-item svg{ width:13px; height:13px; color:var(--muted); }

  .divider-line{ display:flex; align-items:center; gap:10px; margin:24px 0; color:var(--muted); font-size:11px; }
  .divider-line::before, .divider-line::after{ content:""; flex:1; height:1px; background:var(--divider); }

  /* Login — subtle gold radial glow (instead of dot-grid) */
  .brand-panel.glow::after{
    background-image:none;
    background:radial-gradient(circle at 78% 18%, rgba(212,175,55,.16), transparent 55%);
    -webkit-mask-image:none; mask-image:none;
  }
  .login-logo{ height:28px; width:auto; display:block; }
  .login-logo-wrap{
    display:inline-flex; align-items:center;
  }
  /* brand-mark is now the real Inkdijital symbol (img), not an invented SVG shape */
  .brand-mark{ width:26px; height:26px; display:block; object-fit:contain; }

  /* Small outlined action button — matches the app's cut-corner, minimal
     language without introducing a new visual motif. Used for secondary
     actions like Reset/Clear Demo Data that shouldn't compete with the
     primary gold button. */
  .chip-btn{
    display:inline-flex; align-items:center; gap:6px;
    background:transparent; border:1px solid var(--border); color:var(--text-2);
    font-size:11.5px; font-weight:600; padding:9px 14px; cursor:pointer;
    transition:border-color .15s, color .15s;
  }
  .chip-btn:hover{ border-color:var(--gold); color:var(--gold); }

  /* Outlined gold button — fills gold on hover */
  .btn-outline-gold{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    background:transparent; color:var(--gold); border:1.5px solid var(--gold);
    font-weight:700; font-size:13px; padding:12px; cursor:pointer; --cut:var(--cut-sm);
    font-family:inherit; transition:background 150ms ease, color 150ms ease;
  }
  .btn-outline-gold:hover{ background:var(--gold); color:#161616; }
  .btn-outline-gold svg{ width:14px; height:14px; stroke-width:2; }

  /* Google secondary button */
  .btn-google{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--card); border:1px solid var(--border); color:var(--text);
    font-weight:600; font-size:12.5px; padding:11px; cursor:pointer; font-family:inherit;
    transition:background 150ms ease;
  }
  .btn-google:hover{ background:var(--hover); }
  .btn-google svg{ width:16px; height:16px; }

  .request-access{ text-align:center; font-size:12px; color:var(--muted); margin-top:22px; }
  .request-access a{ color:var(--gold); font-weight:600; }

  .login-link{ text-align:center; font-size:12px; color:var(--muted); }
  .login-link a{ color:var(--gold); font-weight:600; }

  @media (max-width:900px){
    .auth-shell{ grid-template-columns:1fr; }
    .brand-panel{ display:none; }
  }