/* NebrixGrow — app.css · Design System v0.3 (docs/mockups/NebrixGrow_Mockup_v0.3.html is the source of truth)
   Light is the default; dark via <html data-theme="dark">. Sarabun loaded in _Host.cshtml. */

  /* ───────────────────────── Design tokens ───────────────────────── */
  :root{
    color-scheme:light;
    /* canvas & surfaces */
    --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f3f4f6; --surface-3:#e9ebef;
    --ink:#0f172a; --ink-2:#334155; --ink-3:#566173; --muted:#647082;   /* 3c-c (A53): text tokens ≥ 4.5:1 on bg/surface/surface-2 */
    --line:#e5e7eb; --line-2:#d1d5db; --ring:rgba(15,23,42,.08);
    /* brand */
    --brand:#2563eb; --brand-600:#1d4ed8; --brand-soft:#eff4ff; --brand-ring:rgba(37,99,235,.25);
    --brand-btn:#2563eb; --brand-btn-h:#1d4ed8; --deco:#94a3b8;   /* 3c-c: solid button fill (white text ≥ 4.5:1) · decorative strokes */
    /* semantic status */
    --good:#16a34a; --good-soft:#ecfdf3; --good-ink:#15803d;
    --warn:#d97706; --warn-soft:#fffbeb; --warn-ink:#b45309;
    --serious:#ea580c; --serious-soft:#fff7ed; --serious-ink:#c2410c;
    --critical:#dc2626; --critical-soft:#fef2f2; --critical-ink:#b91c1c;
    --info:#0891b2; --info-soft:#ecfeff; --info-ink:#0e7490;
    /* series (charts, avatars) */
    --s1:#2563eb; --s2:#f97316; --s3:#14b8a6; --s4:#eab308; --s5:#ec4899; --s6:#22c55e; --s7:#8b5cf6; --s8:#ef4444;
    /* geometry */
    --r-sm:6px; --r:10px; --r-lg:14px;
    --sh-1:0 1px 2px rgba(15,23,42,.05);
    --sh-2:0 1px 3px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.12);
    --sh-pop:0 12px 40px -8px rgba(15,23,42,.25),0 0 0 1px rgba(15,23,42,.06);
    /* type */
    --fs-xs:11.5px; --fs-sm:12.5px; --fs:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px;
    --side-w:244px;
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0b0f17; --surface:#111827; --surface-2:#161e2e; --surface-3:#1f2937;
    --ink:#f1f5f9; --ink-2:#cbd5e1; --ink-3:#94a3b8; --muted:#8391a6;
    --line:#1f2937; --line-2:#334155; --ring:rgba(255,255,255,.08);
    --brand:#60a5fa; --brand-600:#3b82f6; --brand-soft:#172554; --brand-ring:rgba(96,165,250,.4);
    --brand-btn:#2563eb; --brand-btn-h:#1d4ed8; --deco:#64748b;
    --good-soft:#052e16; --good-ink:#4ade80; --warn-soft:#2a1d05; --warn-ink:#fbbf24;
    --serious-soft:#2b1507; --serious-ink:#fb923c; --critical-soft:#2d0a0a; --critical-ink:#f87171;
    --info-soft:#042f3a; --info-ink:#22d3ee;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.5); --sh-pop:0 12px 40px -8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  }

  /* ───────────────────────── Base ───────────────────────── */
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
  h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
  b,strong{font-weight:600}
  .num,.tnum{font-variant-numeric:tabular-nums}
  .num{text-align:right}
  .muted{color:var(--ink-3)}.faint{color:var(--muted)}.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}
  .ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .ico.sm{width:14px;height:14px}

  /* ───────────────────────── Shell ───────────────────────── */
  .app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
  .side{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px}
  .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
  .logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#14b8a6);display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;box-shadow:0 4px 12px -4px rgba(37,99,235,.6)}
  .logo b{font-size:15.5px;display:block;line-height:1.1}.logo small{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px}
  .nav-group{font-size:var(--fs-xs);font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:14px 10px 6px}
  .nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);cursor:pointer;font-size:var(--fs);position:relative;transition:background .12s}
  .nav:hover{background:var(--surface-2);color:var(--ink)}
  .nav.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
  .nav.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
  .nav.soon{opacity:.45;cursor:default}
  .nav .badge{margin-left:auto;background:var(--critical);color:#fff;font-size:11px;padding:0 7px;border-radius:99px;font-weight:600;line-height:18px}
  .nav .tag{margin-left:auto;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 6px;line-height:16px}
  .side .foot{margin-top:auto;padding:12px 8px 2px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .side .foot .who{flex:1;min-width:0}.side .foot .who b{display:block;font-size:13px}.side .foot .who span{font-size:var(--fs-xs);color:var(--ink-3)}
  .main{padding:22px 32px 80px;min-width:0;max-width:1480px}
  .crumbs{font-size:var(--fs-sm);color:var(--ink-3);display:flex;gap:6px;align-items:center;margin-bottom:4px}
  .crumbs svg{width:12px;height:12px;stroke:var(--muted)}
  .topbar{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
  .topbar h1{font-size:var(--fs-xl)}
  .topbar .sub{color:var(--ink-3);font-size:var(--fs-sm);margin-top:2px}
  .sp{flex:1}
  .toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}

  /* ───────────────────────── Controls ───────────────────────── */
  .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:0 12px;height:34px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--sh-1);transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap}
  .btn:hover{background:var(--surface-2)}
  .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring)}
  .btn.primary{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;font-weight:600}
  .btn.primary:hover{background:var(--brand-btn-h)}
  .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}.btn.ghost:hover{background:var(--surface-2)}
  .btn.danger{color:var(--critical-ink)}.btn.danger:hover{background:var(--critical-soft);border-color:var(--critical)}
  .btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}
  .btn.icon{width:34px;padding:0;justify-content:center}.btn.icon.sm{width:28px}
  .btn[disabled]{opacity:.5;cursor:not-allowed}
  .input,.select{height:34px;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:0 11px;font:inherit;font-size:13.5px;color:var(--ink);width:100%;transition:border-color .12s,box-shadow .12s}
  .input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .input::placeholder{color:var(--muted)}
  textarea.input{height:auto;padding:8px 11px;resize:vertical;min-height:88px}
  .select{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;cursor:pointer}
  .search{position:relative;width:300px}
  .search .input{padding-left:34px}
  .search svg{position:absolute;left:11px;top:9px;width:16px;height:16px;stroke:var(--muted)}
  .search kbd{position:absolute;right:9px;top:8px;font:inherit;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 5px;line-height:16px;background:var(--surface-2)}
  .field{display:flex;flex-direction:column;gap:5px}
  .field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
  .field .hint{font-size:var(--fs-xs);color:var(--ink-3)}
  .field.err .input{border-color:var(--critical);box-shadow:0 0 0 3px rgba(220,38,38,.15)}.field.err .hint{color:var(--critical-ink)}
  .date{position:relative}.date .input{padding-right:34px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);font-size:12.5px;cursor:pointer;color:var(--ink-2)}
  .chip.on{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:600}
  .chip .x{opacity:.6}
  .toggle{width:36px;height:20px;border-radius:99px;background:var(--line-2);position:relative;display:inline-block;cursor:pointer;flex:none}
  .toggle.on{background:var(--brand)}
  .toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .toggle.on::after{left:18px}
  .chk{display:inline-grid;place-items:center;width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;vertical-align:-3px;margin-right:8px;background:var(--surface);flex:none}
  .chk.on{background:var(--brand-btn);border-color:var(--brand-btn)}
  .chk.on::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

  /* ───────────────────────── Surfaces ───────────────────────── */
  .grid{display:grid;gap:16px}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);min-width:0}
  .card .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
  .card .hd h3{font-size:var(--fs-md);font-weight:600;white-space:nowrap}
  .card .hd small{color:var(--ink-3);font-weight:400;font-size:var(--fs-sm);margin-left:6px}
  .card .bd{padding:16px 18px}
  .card .bd.flush{padding:0}
  .card .ft{padding:10px 18px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-3);display:flex;align-items:center;gap:10px}
  .kpi{padding:14px 18px}
  .kpi .lbl{font-size:var(--fs-sm);color:var(--ink-3);display:flex;align-items:center;gap:6px}
  .kpi .val{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:4px;font-variant-numeric:tabular-nums}
  .kpi .val small{font-size:var(--fs-sm);color:var(--ink-3);font-weight:400;margin-left:4px}
  .kpi .delta{font-size:var(--fs-xs);margin-top:4px;color:var(--ink-3)}
  .kpi .delta.up{color:var(--good-ink)}.kpi .delta.down{color:var(--critical-ink)}
  /* layout utility — never on <table>: table.stack = "cards on phones" (3c-c); sharing the rule broke every table on wide screens (3f, A59) */
  .stack:not(table){display:flex;flex-direction:column;gap:10px}
  .row{display:flex;align-items:center;gap:10px}
  .divider{height:1px;background:var(--line);margin:4px 0}

  /* ───────────────────────── Table ───────────────────────── */
  .table-wrap{overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
  table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
  thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;color:var(--ink-3);font-weight:600;font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;padding:0 16px;height:40px;border-bottom:1px solid var(--line);white-space:nowrap}
  thead th.num{text-align:right}
  thead th .sort{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
  thead th .sort svg{width:12px;height:12px;stroke:var(--muted)}
  thead th.sorted{color:var(--ink)}thead th.sorted .sort svg{stroke:var(--brand)}
  tbody td{padding:10px 16px;height:56px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}   /* 0.30.1: room above/below two-line Thai cells */
  tbody td.wrap{white-space:normal;min-width:160px}
  tbody td.wrap:first-child{min-width:260px}
  tbody tr:last-child td{border-bottom:0}
  tbody tr.clickable{cursor:pointer}
.card .bd.empty{padding:40px 20px}
  tbody tr.clickable:hover td{background:color-mix(in srgb,var(--brand-soft) 55%,var(--surface))}
  tbody tr.selected td{background:var(--brand-soft)}
  td .primary{font-weight:600;color:var(--ink);line-height:1.5}
  td .secondary{font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}
  table.dense tbody td{height:50px;padding-top:9px;padding-bottom:9px}
  .tfoot{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-3)}
  .pager{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
  .pager .btn{height:28px;min-width:28px;padding:0 8px;box-shadow:none}
  .pager .cur{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:600}

  /* ───────────────────────── Status ───────────────────────── */
  .pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
  .pill.plain::before{display:none}
  .pill.good{background:var(--good-soft);color:var(--good-ink)}
  .pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
  .pill.serious{background:var(--serious-soft);color:var(--serious-ink)}
  .pill.critical{background:var(--critical-soft);color:var(--critical-ink)}
  .pill.info{background:var(--info-soft);color:var(--info-ink)}
  .pill.brand{background:var(--brand-soft);color:var(--brand)}
  .pill.outline{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
  .score{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-weight:600}
  .score .bar{height:6px;width:64px;background:var(--surface-3);border-radius:4px;overflow:hidden}
  .score .bar i{display:block;height:100%;border-radius:4px}
  .score .v{min-width:22px;text-align:right}
  .score.none{color:var(--muted);font-weight:400}
  .avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600;color:#fff;background:var(--s1);flex:none}
  .avatar.lg{width:40px;height:40px;font-size:14px}
  .avatar.xl{width:56px;height:56px;font-size:18px;border-radius:14px}
  .avatar.a2{background:#0f766e}.avatar.a3{background:#7c3aed}.avatar.a4{background:#c2410c}.avatar.a5{background:#be185d}   /* 3c-c: white initials ≥ 4.5:1 */
  .avatar.soft{background:var(--surface-3);color:var(--ink-2)}
  .ring{position:relative;width:84px;height:84px;flex:none}
  .ring svg{width:84px;height:84px;transform:rotate(-90deg)}
  .ring .v{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .ring .v small{font-size:10.5px;color:var(--ink-3);font-weight:500;letter-spacing:0}
  .factor{display:grid;grid-template-columns:128px minmax(40px,1fr) 36px;gap:10px;align-items:center;font-size:13px;padding:4px 0}
  .factor .fb{height:6px;background:var(--surface-3);border-radius:4px;position:relative}
  .factor .fb i{position:absolute;top:0;bottom:0;border-radius:4px}
  .factor .num{font-weight:600}

  /* ───────────────────────── Tabs / timeline / misc ───────────────────────── */
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 18px}
  .tab{padding:12px 12px 10px;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px}
  .tab:hover{color:var(--ink)}
  .tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
  .tab .n{font-size:11px;background:var(--surface-3);color:var(--ink-3);border-radius:99px;padding:0 6px;line-height:16px}
  .tab.active .n{background:var(--brand-soft);color:var(--brand)}
  .vtabs{display:flex;flex-direction:column;gap:2px}
  .vtabs .tab{border-bottom:0;border-radius:8px;padding:8px 10px;margin:0}
  .vtabs .tab.active{background:var(--brand-soft)}
  .tl{position:relative;padding-left:26px}
  .tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line)}
  .tl .ev{position:relative;padding:4px 0 14px}
  .tl .ev::before{content:"";position:absolute;left:-23px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brand);box-shadow:0 0 0 3px var(--surface)}
  .tl .ev.neg::before{border-color:var(--critical)}.tl .ev.pos::before{border-color:var(--good)}.tl .ev.sys::before{border-color:var(--muted)}
  .tl .t{font-size:var(--fs-xs);color:var(--ink-3);display:flex;gap:8px;align-items:center;margin-bottom:2px}
  .tl .t .src{border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:15px;background:var(--surface-2)}
  .code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;background:var(--surface-2);padding:1px 6px;border-radius:5px;border:1px solid var(--line);color:var(--ink-2)}
  .banner{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);border-radius:var(--r);padding:10px 14px;font-size:13.5px}
  .banner.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
  .banner.critical{background:var(--critical-soft);border-color:color-mix(in srgb,var(--critical) 30%,transparent)}
  .banner.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
  .banner svg{margin-top:2px}
  .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 20px;color:var(--ink-3);text-align:center}
  .empty .ic{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}
  .empty b{color:var(--ink)}
  .skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:6px;height:12px}
  @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
  .toast{position:fixed;right:24px;bottom:64px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:13.5px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh-pop)}
  .toast .ok{width:18px;height:18px;border-radius:50%;background:var(--good);display:grid;place-items:center}
  .modal-back{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:50;padding:16px}
  .modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:580px;box-shadow:var(--sh-pop);max-height:92vh;overflow:auto}
  .modal .hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
  .modal .hd h3{font-size:var(--fs-md)}
  .modal .bd{padding:18px 20px}
  .modal .ft{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
  .drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:30px 20px;text-align:center;color:var(--ink-3);background:var(--surface-2);transition:.12s}
  .drop:hover{border-color:var(--brand);background:var(--brand-soft)}
  .drop .ic{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 10px;color:var(--brand)}
  .stepper{display:flex;align-items:center;gap:0;margin-bottom:16px}
  .stepper .s{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
  .stepper .s .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:600}
  .stepper .s.done .n{background:var(--good);border-color:var(--good);color:#fff}
  .stepper .s.cur{color:var(--ink);font-weight:600}.stepper .s.cur .n{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}
  .stepper .ln{flex:1;height:1px;background:var(--line-2);margin:0 12px;max-width:80px}
  .hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
  .hero .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .task{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
  .task .n{width:22px;height:22px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
  .task.hot .n{background:var(--critical-soft);color:var(--critical-ink)}
  .swatch{height:44px;border-radius:8px;border:1px solid var(--ring)}

  @media (max-width:1100px){.g4,.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g2,.g21,.g12{grid-template-columns:minmax(0,1fr)}}

/* ───────────────────────── App-only (not in mockup) ───────────────────────── */
.ng-boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg)}
.ng-boot-card{text-align:center}
.ng-boot-mark{width:56px;height:56px;border-radius:14px;margin:0 auto 12px;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-weight:700;font-size:26px;display:grid;place-items:center}
.ng-boot-brand{font-weight:600;font-size:20px}
.ng-boot-msg{color:var(--ink-3);font-size:13px;margin-top:6px}
.login-split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--bg)}
.login-brand{background:linear-gradient(160deg,#0f172a 0%,#1e3a8a 55%,#14b8a6 140%);color:#fff;padding:48px 56px;display:flex;flex-direction:column}
.login-brand .logo b{color:#fff}.login-brand .logo small{color:rgba(255,255,255,.7)}
.login-brand h2{font-size:34px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
.login-brand p{color:rgba(255,255,255,.75);font-size:15px;margin:14px 0 0;line-height:1.7}
.login-brand .stats{display:flex;gap:28px;margin-top:28px}
.login-brand .stats b{font-size:26px;font-weight:600;display:block}
.login-brand .stats span{font-size:12.5px;color:rgba(255,255,255,.65)}
.login-form{display:grid;place-items:center;padding:40px}
.login-form>div{width:100%;max-width:380px}
.login-form h2{font-size:22px}
@media (max-width:900px){.login-split{grid-template-columns:1fr}.login-brand{display:none}}
.alert{border-radius:var(--r);padding:10px 12px;font-size:13.5px;border:1px solid transparent}
.alert.error{background:var(--critical-soft);color:var(--critical-ink);border-color:color-mix(in srgb,var(--critical) 25%,transparent)}
.alert.ok{background:var(--good-soft);color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.form-row label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.form-row.inline{flex-direction:row;align-items:center;gap:16px}
.form-row.inline label{font-weight:400;color:var(--ink);display:flex;align-items:center;gap:6px}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
.spinner.lg{width:22px;height:22px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.clickable{cursor:pointer}
.card .bd.empty{padding:40px 20px}
.flash{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:13.5px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh-pop);animation:flash-in .18s ease}
.flash .ok{width:18px;height:18px;border-radius:50%;background:var(--good);display:grid;place-items:center;flex:none}
@keyframes flash-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ring.sm{width:56px;height:56px}.ring.sm svg{width:56px;height:56px}.ring.sm .v{font-size:16px}
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;width:100%;background:var(--warn-soft);color:var(--warn-ink);padding:10px 48px 10px 20px;z-index:1000;font-size:14px;border-top:1px solid var(--warn);gap:12px;align-items:center}
#blazor-error-ui .reload{font-weight:600}
#blazor-error-ui .dismiss{position:absolute;right:16px;top:8px;cursor:pointer;color:inherit;text-decoration:none}

/* ───────────────────────── v0.3.1 — dashboard & scoring ───────────────────────── */
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .ax{font-size:11px;fill:var(--ink-3)}
.chart .grid line{stroke:var(--line);stroke-dasharray:2 3}
.chart .hit{fill:transparent;cursor:crosshair}
.dist{display:grid;grid-template-columns:110px minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:13px;padding:5px 0}
.dist .bar{height:14px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.dist .bar i{display:block;height:100%;border-radius:4px}
.dist .num{font-weight:600}
.rule{display:grid;grid-template-columns:28px minmax(0,1.4fr) minmax(0,1.8fr) 120px 150px 48px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.rule.head{padding:6px 18px}
.rule.head span{font-size:var(--fs-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.rule:last-child{border-bottom:0}
.rule .order{color:var(--muted);display:flex;flex-direction:column;gap:2px}
.rule .order button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0;line-height:1;font-size:12px}
.rule .order button:hover{color:var(--ink)}
.rule .w{display:flex;align-items:center;gap:10px}
.rule input[type=range]{width:100%;accent-color:var(--brand)}
.rule .num.input{width:64px;text-align:right;height:30px}
.rule.off{opacity:.5}
.comp{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;background:var(--surface-3)}
.comp i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.spark{width:100%;height:36px;display:block}
@media (max-width:1100px){.rule{grid-template-columns:28px 1fr 1fr;row-gap:8px}}

/* ───────────────────────── v0.3.2 — pipeline ───────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;align-items:start;overflow-x:auto;padding-bottom:6px}
.col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;min-height:200px}
.col.over{outline:2px dashed var(--brand);outline-offset:-2px;background:var(--brand-soft)}
.col h4{margin:0 0 10px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;color:var(--ink-2);padding:2px 4px}
.col h4 b{color:var(--ink);font-size:13px}
.col h4 .n{font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 7px;line-height:17px;color:var(--ink-3);margin-left:6px}
.col .sum{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.col .empty-col{font-size:12px;color:var(--muted);text-align:center;padding:24px 8px;border:1px dashed var(--line-2);border-radius:var(--r)}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;box-shadow:var(--sh-1);cursor:grab;position:relative;transition:box-shadow .12s,transform .12s}
.dcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.dcard.dragging{opacity:.5}
.dcard .ttl{font-size:13.5px;font-weight:600;line-height:1.35;display:block;padding-right:22px}
.dcard .cust{font-size:12px;color:var(--ink-3);margin-top:1px}
.dcard .amt{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;margin-top:6px}
.dcard .meta{font-size:11.5px;color:var(--ink-3);margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.dcard .meta .avatar{width:22px;height:22px;font-size:10px}
.dcard.stale{border-left:3px solid var(--serious)}
.dcard.hot{border-left:3px solid var(--critical)}
.dcard .more{position:absolute;right:6px;top:6px}
.dcard .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.dcard .tags .pill{height:18px;font-size:10.5px;padding:0 7px}
.col.closed{background:transparent;border-style:dashed}
.col.closed .dcard{cursor:default}
.menu{position:absolute;right:6px;top:30px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-pop);min-width:170px;padding:4px}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--critical-ink)}
.menu .sep{height:1px;background:var(--line);margin:4px 0}
.drawer-back{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:50}
.drawer{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100%;background:var(--surface);box-shadow:var(--sh-pop);z-index:51;display:flex;flex-direction:column}
.drawer .hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px}
.drawer .bd{padding:18px 20px;overflow:auto;flex:1}
.drawer .ft{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--surface-2)}
.stage-steps{display:flex;gap:4px;margin:6px 0 14px}
.stage-steps span{flex:1;height:6px;border-radius:3px;background:var(--surface-3)}
.stage-steps span.on{background:var(--brand)}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;font-size:13.5px;margin:0}
.kv dt{color:var(--ink-3);margin:0}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:0 12px;height:32px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}

/* ───────── Signals & Connectors (1j) ───────── */
.spk{display:inline-flex;align-items:flex-end;gap:2px;height:22px}
.spk i{display:block;width:4px;border-radius:1px;background:var(--brand);opacity:.75}
.spk i.z{background:var(--line-2);height:2px}
.hbar{display:grid;grid-template-columns:170px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:13px}
.hbar .t{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.hbar .t i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.flow{display:flex;align-items:stretch}
.flow .st{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);min-width:0}
.flow .st b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.flow .ar{align-self:center;color:var(--ink-3);padding:0 6px}
.json{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;line-height:1.55;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;white-space:pre;overflow:auto;color:var(--ink-2);max-height:360px;margin:0}
tr.soon td{background:var(--surface-2)}tr.soon td,tr.soon td .primary{color:var(--ink-3)}   /* 3c-c: not opacity — faded text failed contrast */
@media (max-width:900px){.flow{flex-direction:column}.flow .ar{transform:rotate(90deg);align-self:center}}

/* ───────── Playbooks (2a) ───────── */
.pb-trig{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.param-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.param-row .input{width:80px;text-align:right;height:30px}
.opt{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:99px;font-size:13px;cursor:pointer;background:var(--surface);color:var(--ink-2);user-select:none}
.opt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
.opt.disabled{cursor:default;opacity:.7}
.toggle.disabled{cursor:default;opacity:.6}
.drawer.wide{width:580px}
.sec-title{font-size:13px;font-weight:600;margin-bottom:10px}

/* ───────── งานที่ควรทำ (2a-b) ───────── */
.agrp{padding:10px 18px 6px;font-size:12px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agrp.over{color:var(--critical-ink)}
.act{display:grid;grid-template-columns:4px 28px minmax(0,1fr) 140px 36px auto;gap:12px;align-items:center;padding:12px 18px 12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.act:last-child{border-bottom:0}
.act:hover,.act.selected{background:var(--surface-2)}
.act .pr{align-self:stretch;border-radius:0 3px 3px 0;background:var(--line-2)}
.act .pr.High{background:var(--critical)} .act .pr.Medium{background:var(--warn)} .act .pr.Low{background:var(--s3)}
.act .done-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:transparent;font-size:12px;padding:0}
.act .done-btn:hover{border-color:var(--good);color:var(--good)}
.act .t{font-weight:600}
.act .why{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.act .due{font-size:13px}
.act .due.over{color:var(--critical-ink);font-weight:600}
.act .btns{display:flex;gap:4px;justify-content:flex-end}
.act.closed{cursor:pointer;opacity:.8}
.ev-list{display:flex;flex-direction:column;gap:6px}
.ev-list .e{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.task .btn{flex:none}
@media (max-width:900px){.act{grid-template-columns:4px 28px minmax(0,1fr);}.act .due,.act .avatar,.act .btns{grid-column:3}}

/* ── ใบเสนอราคา (Batch 2b-a) ───────────────────────────────────────────── */
.rev{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11px;font-weight:600;background:var(--info-soft);color:var(--info-ink);vertical-align:middle}
.qline td{vertical-align:middle}
.qline .input,.qline .select{height:32px}
.qline .num .input{text-align:right}
.sumtbl{width:100%;font-size:13.5px;border-collapse:collapse}
.sumtbl td{padding:5px 0;border:0}
.sumtbl td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.sumtbl tr.tot td{font-weight:700;font-size:15px;border-top:1px solid var(--line);padding-top:9px}
.paper{background:#fff;color:#111;border:1px solid var(--line);border-radius:10px;padding:28px 32px;font-size:13px}
.paper h2{font-size:20px;margin:0;color:#111}
.paper table{width:100%;border-collapse:collapse;margin-top:12px}
.paper th{background:#f1f5f9;color:#334155;font-weight:600;font-size:12px;text-align:left;padding:7px 8px}
.paper td{padding:7px 8px;border-bottom:1px solid #e2e8f0;color:#111}
.paper .r{text-align:right;font-variant-numeric:tabular-nums}
.paper .mut{color:#64748b;font-size:12px}

/* ── หัวกระดาษ / SMTP / ส่งอีเมล (Batch 2b-b) ─────────────────────────── */
.upl{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface)}
.upl .img{width:96px;height:56px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;color:var(--muted);font-size:12px}
.upl .img img{max-width:92px;max-height:52px;object-fit:contain}
.upl .sp{flex:1}
.upl input[type=file]{display:none}
.mail-meta{display:grid;grid-template-columns:88px minmax(0,1fr);gap:6px 10px;font-size:13px;color:var(--ink-2)}
.mail-meta .k{color:var(--ink-3)}
.attach{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);font-size:13px}

/* ── Batch 2b-d — UX/UI polish (modal/confirm/alert ตามแบบ FlowIQ, mobile shell) ─────────────────── */
h1:focus,h1:focus-visible,[tabindex="-1"]:focus{outline:none}

/* modal: FlowIQ chrome — blur backdrop, 16px card, title + subtitle, light footer, soft-grey cancel */
.modal-back{background:rgba(15,30,50,.45);backdrop-filter:blur(2px);z-index:80}
.modal{border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2),0 0 0 1px rgba(15,23,42,.04)}
.modal .hd{padding:18px 22px 14px;align-items:flex-start;gap:10px}
.modal .hd h3{font-size:var(--fs-lg);line-height:1.35}
.modal .hd .sub{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:400}
.modal .bd{padding:20px 22px}
.modal .ft,.modal .actions{background:transparent;padding:14px 22px 18px;border-top:1px solid var(--line);border-radius:0 0 16px 16px}
.modal .ft .btn:not(.primary):not(.danger-solid),.modal .actions .btn:not(.primary):not(.danger-solid){background:var(--surface-2);border-color:transparent;box-shadow:none}
.modal .ft .btn:not(.primary):not(.danger-solid):hover,.modal .actions .btn:not(.primary):not(.danger-solid):hover{background:var(--surface-3)}
.btn.danger-solid{background:var(--critical);border-color:var(--critical);color:#fff;font-weight:600}
.btn.danger-solid:hover{background:#b91c1c;border-color:#b91c1c}
.alert.error::before{content:"⚠";margin-right:6px}

/* confirm dialog (FlowIQ): round severity icon, bold title, entity card, advice box */
.cfm{text-align:left}
.cfm .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;background:var(--brand-soft);color:var(--brand)}
.cfm .ic.danger{background:var(--critical-soft);color:var(--critical)}
.cfm .ic.warn{background:var(--warn-soft);color:var(--warn-ink)}
.cfm .ic .ico{width:22px;height:22px}
.cfm h4,.cfm h2{font-size:var(--fs-lg);margin-bottom:6px}
.cfm .desc{color:var(--ink-2);font-size:13.5px;line-height:1.6}
.cfm-item{display:flex;gap:12px;align-items:center;background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-top:14px}
.cfm-item .t{font-weight:600}.cfm-item .m{font-size:var(--fs-sm);color:var(--ink-3)}
.cfm-item .amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.advice{background:var(--warn-soft);color:var(--warn-ink);border-radius:10px;padding:10px 12px;font-size:13px;margin-top:12px;line-height:1.55}
.cfm-list{max-height:150px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:12px}
.cfm-list table{width:100%;border-collapse:collapse;font-size:13px}
.cfm-list td{padding:7px 10px;border-bottom:1px solid var(--line)}.cfm-list tr:last-child td{border-bottom:0}

/* radio option cards (FlowIQ) */
.opt-cards{display:flex;flex-direction:column;gap:8px}
.opt-card{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-2);border-radius:12px;padding:11px 14px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s;margin:0;font-weight:400}
.opt-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.opt-card.on{border-color:var(--brand);background:var(--brand-soft)}
.opt-card input{position:absolute;opacity:0;pointer-events:none}
.opt-card .oi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-3)}
.opt-card.on .oi{background:var(--brand-btn);color:#fff}
.opt-card .ol{flex:1;min-width:0}.opt-card .ol b{display:block}.opt-card .ol .d{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;line-height:1.5}
.opt-card .ok{color:var(--brand);font-weight:700;visibility:hidden}.opt-card.on .ok{visibility:visible}
.opt-sec{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:8px}

/* dismissible alert banner at the top of a page (FlowIQ success alert) */
.alertbar{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 12px 10px 14px;margin-bottom:14px;font-size:13.5px;border:1px solid transparent;animation:flash-in .18s ease}
.alertbar.good{background:var(--good-soft);color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.alertbar.error{background:var(--critical-soft);color:var(--critical-ink);border-color:color-mix(in srgb,var(--critical) 25%,transparent)}
.alertbar.warn{background:var(--warn-soft);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.alertbar.info{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 25%,transparent)}
.alertbar .msg{flex:1;min-width:0}
.alertbar .btn.icon{color:inherit}

/* page header actions with a "เพิ่มเติม" menu (quote view) */
.qv-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
/* 3g: quote preview — payment terms / remarks full width under the totals, line breaks as typed (same as the PDF) */
/* (the paper stays white in dark mode — fixed colours like .paper td) */
.qv-words{font-weight:600;color:#334155}
.qv-terms{margin-top:14px;padding-top:10px;border-top:1px solid #e2e8f0;display:grid;gap:10px;font-size:12.5px}
.qv-terms .cap{font-size:11.5px;font-weight:700;color:#64748b;margin-bottom:2px}
.qv-terms .txt{white-space:pre-line;overflow-wrap:anywhere;color:#1e293b;line-height:1.6}
.qv-more{position:relative}
.menu-scrim{position:fixed;inset:0;z-index:5}
.menu button[disabled]{opacity:.5;cursor:not-allowed}

/* overflow fixes found in the 2b-d audit */
.paper{overflow-x:auto}
.paper tbody td:nth-child(2){white-space:normal}
.card .bd.flush{overflow-x:auto}
.g3 tbody td.wrap:first-child,.g21>div:last-child tbody td.wrap:first-child{min-width:0}
.tl .ev .code,.tl .ev code{margin-right:6px}
.tl .ev a{margin-right:5px}
.attn .attn-state{max-width:130px}
.attn .attn-state .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.pills-clip{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.pills-clip .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.qlist tbody td{height:62px}
/* C360 rings: number with its unit underneath (the "/100" no longer runs into the stroke); empty = "—" only */
.ring .v{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.ring .v small{margin-top:2px}
.c360-quotes td:first-child{padding-left:18px}.c360-quotes td:last-child{padding-right:18px}
.hero{flex-wrap:wrap}
.dot-fail{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--critical);margin-left:6px;vertical-align:middle}

/* dark mode contrast */
:root[data-theme="dark"] .btn.danger{border-color:color-mix(in srgb,var(--critical) 45%,var(--line-2));color:#fca5a5}
:root[data-theme="dark"] .btn.danger:hover{background:color-mix(in srgb,var(--critical) 22%,transparent);color:#fff}
:root[data-theme="dark"] .paper{border-color:#334155}
:root[data-theme="dark"] .paper td{border-bottom-color:#e2e8f0}

/* mobile shell: top bar + drawer navigation ≤ 900px */
.mtop,.nav-scrim{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;bottom:0;left:0;width:min(84vw,300px);height:100vh;z-index:70;transform:translateX(-105%);transition:transform .18s ease;box-shadow:var(--sh-pop);overflow-y:auto}
  .app.nav-open .side{transform:none}
  .app.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:60}
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 14px}
  .mtop .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#14b8a6);display:grid;place-items:center;color:#fff;font-weight:700}
  .mtop b{font-size:15px}
  .main{padding:14px 16px 64px}
  .topbar{flex-wrap:wrap;row-gap:10px}
  .topbar>div:first-child{flex:1 1 100%;min-width:0}
  .topbar>.sp{display:none}
  .topbar .btn{flex:none}
  .grid.g4,.grid.g5{grid-template-columns:1fr 1fr}
  .grid.g3,.grid.g2,.grid.g21,.grid.g12{grid-template-columns:minmax(0,1fr)}
  .paper{padding:18px 16px}
  .kv{grid-template-columns:96px minmax(0,1fr)}
  .search{width:100%}
  .kanban{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,82vw);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .kanban>*{scroll-snap-align:start}
  .hero{align-items:flex-start;gap:12px}
  .hero>div:nth-child(2){flex:1 1 calc(100% - 76px)!important}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs>*{flex:none;white-space:nowrap}
  .hero .avatar.xl{width:56px;height:56px;font-size:18px}
  .qv-actions{justify-content:flex-start;width:100%}
  .qv-actions>.btn.primary{flex:1 1 100%;justify-content:center;order:-1}
}
/* modals become full screen on phones with the confirm button always visible */
@media (max-width:640px){
  .modal-back{padding:0;place-items:stretch}
  .modal{max-width:none!important;max-height:none;height:100%;border-radius:0;display:flex;flex-direction:column}
  .modal .bd{flex:1;overflow:auto}
  .modal .ft,.modal .actions{position:sticky;bottom:0;background:var(--surface);border-radius:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .modal .ft .btn,.modal .actions .btn{flex:1;justify-content:center}
  .modal .ft .sp{display:none}
}

/* ── Batch 2b-e — form modals (ชนะ/แพ้ดีล, ตอบรับใบ), mockup NebrixGrow_DealClose_2be_v0.1 ── */
.msec+.msec{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.msec-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);margin-bottom:10px;letter-spacing:.01em}
.msec-h .n{width:20px;height:20px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-size:11px;font-weight:700}
.money{position:relative}
.money .cur{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:600;pointer-events:none}
.money .input{padding-left:28px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.switch-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none}
.switch-row .toggle{margin-top:2px}
.switch-row .t{font-weight:600}.switch-row .d{font-size:var(--fs-sm);color:var(--ink-3);margin-top:1px}
.subpanel{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.subpanel .full{grid-column:1/-1}
.subpanel .input,.subpanel .select{background:var(--surface)}
.cdraft{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cdraft .row2{grid-column:2/-1;display:grid;grid-template-columns:1fr 1fr 120px;gap:8px}
.cdraft+.cdraft{margin-top:8px}
.cdraft.off{opacity:.55}
.cdraft .p b{display:block;font-size:13px}.cdraft .p span{font-size:var(--fs-xs);color:var(--ink-3)}
.cdraft .amt{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.cdraft .input,.cdraft .select{height:32px}
.outcome{list-style:none;margin:0;padding:12px 14px;border-radius:12px;background:var(--good-soft);color:var(--good-ink);font-size:13px;display:flex;flex-direction:column;gap:6px}
.outcome.loss{background:var(--critical-soft);color:var(--critical-ink)}
.outcome li{display:flex;gap:8px;align-items:flex-start}.outcome li::before{content:"✓";font-weight:700}
.outcome.loss li::before{content:"•"}
.reason-chips{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:640px){.subpanel{grid-template-columns:1fr}.cdraft .row2{grid-template-columns:1fr 1fr}}

/* ── Batch 3a: signed-out pages (login · signup · verify · reset · invite · legal) ── */
.auth-card{width:100%;max-width:400px}
.auth-card.wide{max-width:440px}
.auth-card h2{font-size:22px}
.auth-card.center{text-align:center}
.auth-mlogo{display:none;align-items:center;gap:8px;margin-bottom:22px}
.auth-foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.auth-foot a{color:inherit}
.auth-links{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:-4px 0 16px}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:40px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.sso-btn[disabled]{opacity:.55;cursor:not-allowed}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.pw-meter i{height:4px;border-radius:99px;background:var(--line)}
.pw-meter i.on1{background:var(--critical)}.pw-meter i.on2{background:var(--warn)}.pw-meter i.on3{background:var(--good)}
.pw-rules{list-style:none;padding:0;margin:6px 0 0;font-size:12px;color:var(--ink-3);display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;text-align:left}
.pw-rules li.ok{color:var(--good-ink)}.pw-rules li.ok::before{content:"✓ "}.pw-rules li:not(.ok)::before{content:"○ "}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55;text-align:left;cursor:pointer}
.consent input{margin-top:3px;flex:none}
.state-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:28px;margin:0 auto 16px}
.state-ic.mail{background:var(--brand-soft);color:var(--brand)}.state-ic.ok{background:var(--good-soft);color:var(--good)}.state-ic.bad{background:var(--critical-soft);color:var(--critical)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.legal-page{min-height:100vh;background:var(--bg);padding:0 16px 48px}
.legal-top{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:18px 0}
.legal-top .mark,.auth-mlogo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#14b8a6);display:grid;place-items:center;color:#fff;font-weight:700}
.legal{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px 38px;line-height:1.75;font-size:14px;color:var(--ink-2)}
.legal h1{font-size:24px;margin:4px 0 6px;color:var(--ink)}.legal h2{font-size:16px;margin:22px 0 6px;color:var(--ink)}.legal h3{font-size:14.5px;margin:16px 0 4px}
.legal ul{padding-left:20px;margin:6px 0}.legal p{margin:6px 0}
@media (max-width:900px){.auth-mlogo{display:flex}.login-form{padding:28px 16px}}
@media (max-width:600px){.legal{padding:22px 18px}.pw-rules{grid-template-columns:1fr}}
.team-acts .btn.sm:not(.icon){padding:0 8px}

/* ── Batch 3b: Google sign-in + my account ── */
.sso-who{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:16px;text-align:left}
.sso-btn:not([disabled]):hover{background:var(--surface-2)}
/* F-1 (A72): Nebrix Hub — login button, /hub-signin, billing card */
.sso-btn.hub{text-decoration:none;margin-bottom:8px}
.hub-logo{width:18px;height:18px;border-radius:5px;background:#7c3aed;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.state-ic.hub{background:#f5f3ff;color:#7c3aed}
:root[data-theme="dark"] .state-ic.hub{background:#1e1536;color:#a78bfa}
.hub-plan{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.hub-mark{width:44px;height:44px;border-radius:12px;background:#f5f3ff;color:#7c3aed;display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
:root[data-theme="dark"] .hub-mark{background:#1e1536;color:#a78bfa}
.hub-facts{display:flex;gap:28px;margin-top:12px;flex-wrap:wrap}
.hub-facts span{display:block}
.hub-facts b{font-size:15px}
.side .foot .me{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none;border-radius:8px}
.side .foot .me:hover .who b{text-decoration:underline}
.account-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.account-grid{grid-template-columns:1fr}}
.lm-list .lm-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.lm-list .lm-row:first-child{border-top:0}
/* 3h-1 (A62): device / sign-in badges */
.here{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--good-ink);background:var(--good-soft);border-radius:99px;padding:0 7px;line-height:18px;vertical-align:1px}
.newdev{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--warn-ink);background:var(--warn-soft);border-radius:99px;padding:0 7px;line-height:18px;vertical-align:1px}
.sec-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sec-kpis .v{font-size:22px;font-weight:700;line-height:1.2}
.sec-kpis .v.bad{color:var(--critical-ink)}.sec-kpis .v.warn{color:var(--warn-ink)}
@media (max-width:640px){.sec-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-flt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.sec-flt select.input{width:auto;min-width:140px}
.lm-list .lm-ic{width:28px;display:grid;place-items:center;flex:none;color:var(--ink-2)}
.lm-list .lm-main{flex:1;min-width:0}.lm-list .lm-main b{font-size:13.5px}
.lm-list .btn{flex:none;white-space:nowrap}
.lm-list .secondary{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ── 3c-a (A51): menu search · sections · icon rail ─────────────────────────────────────────────── */
.nav-search{position:relative;margin:0 2px 4px}
.nav-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.nav-search .input{height:34px;width:100%;padding-left:32px;padding-right:54px;font-size:13.5px}
.nav-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:500 10.5px/16px inherit;color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--surface-2);pointer-events:none}
.nav .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav mark{background:var(--warn-soft);color:inherit;border-radius:3px;padding:0 1px}
.nav-empty{padding:8px 10px;color:var(--muted);font-size:13px}
.nav-ico,.nav-sep,.nav-rail-btn{display:none}
button.nav{border:0;background:none;font:inherit;width:100%;text-align:left}
.side .nav-rail-btn svg{transform:rotate(180deg)}
@media (min-width:901px){
  .nav-rail-btn{display:inline-flex}
  html[data-nav="rail"] .app{grid-template-columns:64px minmax(0,1fr)}
  html[data-nav="rail"] .side{position:sticky;top:0;height:100vh;padding:14px 8px;overflow-y:auto;overflow-x:hidden}
  html[data-nav="rail"] .logo{padding:2px 7px 12px}
  html[data-nav="rail"] .logo>div:last-child,html[data-nav="rail"] .nav-group,html[data-nav="rail"] .nav-search,
  html[data-nav="rail"] .nav .lbl,html[data-nav="rail"] .nav .tag,html[data-nav="rail"] .side .foot .who{display:none}
  html[data-nav="rail"] .nav-ico{display:flex}
  html[data-nav="rail"] .nav-sep{display:block;height:1px;background:var(--line);margin:6px 8px}
  html[data-nav="rail"] .nav{justify-content:center;padding:9px 0}
  html[data-nav="rail"] .nav.active::before{left:-8px}
  html[data-nav="rail"] .nav .badge{position:absolute;top:6px;right:10px;width:8px;height:8px;min-width:0;padding:0;font-size:0;line-height:0;border-radius:50%}
  html[data-nav="rail"] .side .foot{flex-direction:column;padding:10px 0 2px;gap:4px}
  html[data-nav="rail"] .side .foot .me{flex:none}
  html[data-nav="rail"] .side .nav-rail-btn svg{transform:none}
}

/* ── 3c-a: error / 404 card · connection bar ────────────────────────────────────────────────────── */
.err-card{max-width:520px;margin:48px auto;text-align:center}
.err-card .bd{padding:32px 28px}
.err-card h2{font-size:20px;margin:0}
.err-card p{margin:8px 0 16px}
.err-id{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.err-id .code{font-size:13px;letter-spacing:.02em}
.err-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.reconnect-bar{display:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1100;width:min(560px,calc(100vw - 24px))}
.reconnect-bar.components-reconnect-show,.reconnect-bar.components-reconnect-failed,.reconnect-bar.components-reconnect-rejected{display:block}
.reconnect-bar .reconnect{display:none}
.reconnect-bar.components-reconnect-show .rc-show,.reconnect-bar.components-reconnect-failed .rc-failed,.reconnect-bar.components-reconnect-rejected .rc-rejected{display:flex}
.reconnect{align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop)}
.reconnect>div{flex:1;min-width:0}
.reconnect.bad{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.reconnect .rc-ic{font-size:18px;color:var(--warn-ink)}
.nav .tag,.nav .badge{flex:none;white-space:nowrap}
.side .foot .who b,.side .foot .who span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.nav-search kbd{display:none}.nav-search .input{padding-right:10px}}

/* ── 3c-b (A52): onboarding checklist · sample data · welcome wizard · domains · join requests ────────── */
.sample-banner{margin-bottom:12px;align-items:center}
.sample-tag{margin-left:6px;font-size:10.5px;padding:0 6px;line-height:16px;vertical-align:1px;font-weight:500}
.card.ob{margin-bottom:16px}
.ob .ob-bar{height:6px;background:var(--surface-2);margin:0 16px 4px;border-radius:3px;overflow:hidden}
.ob .ob-bar i{display:block;height:100%;background:var(--brand);transition:width .3s}
.ob-list{padding:4px 10px}
.ob-it{display:flex;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line)}
.ob-it:last-child{border-bottom:0}
.ob-main{flex:1;min-width:0}
.ob-it .ck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:12px;flex:none;color:#fff}
.ob-it.done .ck{background:var(--good);border-color:var(--good)}
.ob-it.done b{color:var(--ink-3);text-decoration:line-through}
.ob .ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.wz-dots{display:flex;gap:6px}
.wz-dots i{width:28px;height:5px;border-radius:3px;background:var(--line)}
.wz-dots i.on{background:var(--brand)}
.wz-dots i.done{background:color-mix(in srgb,var(--brand) 45%,var(--line))}
.wz-h{font-size:20px;margin:10px 0 2px}
.wz-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.auth-card .opt-card{position:relative;margin-top:8px}
.logo-drop{position:relative;width:88px;height:88px;flex:none;border:1.5px dashed var(--line-2);border-radius:12px;display:grid;place-items:center;align-content:center;gap:2px;color:var(--muted);cursor:pointer;overflow:hidden;background:var(--surface)}
.logo-drop:hover{border-color:var(--brand);color:var(--brand)}
.logo-drop span[aria-hidden]{font-size:22px;line-height:1}
.logo-drop img{max-width:100%;max-height:100%;object-fit:contain}
.logo-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.start{border:1.5px solid var(--line-2);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;cursor:pointer;background:var(--surface);font:inherit;text-align:left;color:inherit}
.start:hover:not(:disabled){border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.start.on{border-color:var(--brand);background:var(--brand-soft)}
.start:disabled{opacity:.5;cursor:not-allowed}
.start .ico{color:var(--brand)}
.steps{padding-left:18px;line-height:1.8;margin:0 0 12px}
.steps li{margin-bottom:6px}
.kv{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.kv span{width:96px;color:var(--ink-3)}
.kv code{background:var(--surface-2);border:1px solid var(--line);padding:3px 8px;border-radius:6px;font-size:12.5px;word-break:break-all}
.jr-card{margin-bottom:14px}
.jr{display:flex;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.jr-main{flex:1;min-width:180px}
@media (max-width:600px){.start-grid{grid-template-columns:1fr}}
.wz-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.auth-card.wizard{max-width:580px}

/* ── 3c-c (A53): UX polish — focus · skip link · empty state · skeleton · save bar · stacked tables · tablet rail · phone layouts ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--brand-btn);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600;transition:top .12s}
.skip-link:focus{top:12px;text-decoration:none}
main:focus{outline:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,[role="tab"]:focus-visible,[role="switch"]:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:none}
.input:focus-visible,.select:focus-visible{outline:none}
/* links inside running text are underlined — colour alone is not enough (WCAG 1.4.1) */
.sub a,.hint a,.why a,.tl .ev a,p a,.banner a,.alert a,.desc a,.small a:not(.btn),.xs a:not(.btn),.empty a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.card .hd h2{font-size:var(--fs-md);font-weight:600;white-space:nowrap;margin:0}
.modal .hd h2{font-size:var(--fs-lg);line-height:1.35;font-weight:600;margin:0}
.col h2{margin:0 0 10px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;color:var(--ink-2);padding:2px 4px;font-weight:600}
.col h2 b{color:var(--ink);font-size:13px}
.col h2 .n{font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 7px;line-height:17px;color:var(--ink-3);margin-left:6px}
[role="switch"].toggle,[role="button"].chip,[role="tab"]{cursor:pointer}
button.tab{background:none;border-top:0;border-left:0;border-right:0;font-family:inherit}
.vtabs .tab{text-align:left}

/* empty state (EmptyState.razor) — same look for every list */
.empty .ic{background:var(--brand-soft);color:var(--brand);font-size:20px}
.empty .es-title{color:var(--ink);font-weight:600;font-size:var(--fs-md)}
.empty .es-text{max-width:460px;font-size:var(--fs-sm);color:var(--ink-3)}
.empty .es-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.empty.page{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface);padding:48px 20px}
.empty.compact{padding:22px 14px;gap:6px}
.empty.compact .ic{width:36px;height:36px;font-size:16px}

/* skeleton (Skeleton.razor) — invisible for the first 300 ms so fast loads never flash */
.skw{opacity:0;animation:skw-in .01s linear .3s forwards}
@keyframes skw-in{to{opacity:1}}
.skw .skel{border-radius:6px}
.sk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.sk-kpis .skel{height:86px;border-radius:var(--r-lg)}
.sk-tr{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
.sk-tr:last-child{border-bottom:0}
.sk-tr .av{width:28px;height:28px;border-radius:50%;flex:none}
.sk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:14px}
.sk-cards .skel{height:96px;border-radius:var(--r)}
.sk-detail{padding:18px;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.sk-kpis{grid-template-columns:1fr 1fr}}

/* save bar (SaveBar.razor) — sticks to the bottom of the screen while the form has unsaved changes */
.savebar{position:sticky;bottom:14px;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);box-shadow:var(--sh-pop)}
.savebar .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.savebar kbd{font:500 10.5px/15px ui-monospace,Consolas,monospace;border:1px solid rgba(255,255,255,.45);border-radius:4px;padding:0 4px;margin-left:2px}
.field.err .input,.field.err .select{border-color:var(--critical)}
.field .err-msg{font-size:var(--fs-xs);color:var(--critical-ink)}

/* nav footer "⋯" menu (icon rail) */
.foot-more{display:none}
.foot-menu{position:fixed;left:70px;bottom:14px;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-pop);min-width:190px;padding:4px}
.foot-menu button,.foot-menu a{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.foot-menu button:hover,.foot-menu a:hover{background:var(--surface-2);text-decoration:none}
@media (min-width:901px){
  html[data-nav="rail"] .side .foot>.btn{display:none}
  html[data-nav="rail"] .side .foot .foot-more{display:inline-flex}
}

/* stage chips (Pipeline on phones) · settings tabs as chips */
.stage-chips{display:none}
.stage-chips button{flex:none;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:99px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.stage-chips button[aria-selected="true"]{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;font-weight:600}
.settings-grid{grid-template-columns:200px minmax(0,1fr)}
@media (max-width:900px){
  .settings-grid{grid-template-columns:minmax(0,1fr)}
  .settings-grid>.vtabs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none;position:sticky;top:57px;z-index:5;background:var(--bg);padding-top:4px}
  .settings-grid>.vtabs .tab{flex:none;white-space:nowrap;border:1px solid var(--line-2);border-radius:99px;padding:5px 12px;background:var(--surface)}
  .settings-grid>.vtabs .tab.active{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}
  .settings-grid>.vtabs .tab .ico{display:none}
}

/* tables → cards on phones: <table class="stack"> + data-label on each cell */
@media (max-width:640px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack tbody td{height:auto;padding:2px 0;border:0;white-space:normal;text-align:left;min-width:0!important}
  table.stack tbody td.num{text-align:left}
  table.stack td[data-label]::before{content:attr(data-label) " · ";color:var(--ink-3);font-size:var(--fs-xs)}
  table.stack td.st-hide{display:none}
  table.stack td.st-main{font-size:14px}
  .table-wrap:has(table.stack){overflow:visible}

  /* Pipeline: one stage at a time */
  .stage-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
  .kanban.one{display:block}
  .kanban.one>.col:not(.cur){display:none}
  .kanban.one>.col{min-height:0}

  /* the page's main "+ new" button floats at the bottom right on list pages */
  .topbar .btn.fab-m{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:45;height:44px;padding:0 18px;border-radius:99px;box-shadow:var(--sh-pop)}
  .btn,.input,.select{min-height:36px}
  .btn.sm{min-height:32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .skel{animation:none!important}
  .skw{animation:skw-in .01s linear .3s forwards!important}
}
.modal-ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 20px;background:var(--warn-soft);border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,transparent);font-size:13px;color:var(--ink)}
.side-nav{display:block}
h2.h3{font-size:1.17em}
@media (max-width:640px){.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.seg button{flex:none;white-space:nowrap}}

.skip-nav{position:static}
.upl .img>span{color:#566173}   /* 3c-c: the image well stays white in dark mode */
[tabindex="-1"]:focus{outline:none}   /* FocusOnNavigate moves focus to the page's h1 — no ring for that */
@media (max-width:640px){
  .card .hd{flex-wrap:wrap;row-gap:6px}
  .card .hd small{flex-basis:100%;order:3;margin-left:0}
  table.stack td.num.nowrap{white-space:normal}
}

/* ---- Batch 3d (A54): plans & billing ------------------------------------------------------------ */
.use{display:grid;grid-template-columns:140px 1fr auto auto;gap:8px;align-items:center;font-size:13px;padding:5px 0}
.use .muted{white-space:nowrap}
.meter{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand-btn)}
.meter.over i{background:var(--critical)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.plan.hot{border:2px solid var(--brand-btn)}
.plan.current{box-shadow:0 0 0 3px var(--brand-ring)}
.plan .price{font-size:26px;font-weight:600;line-height:1.2}
.plan .price small{font-size:13px;color:var(--ink-3);font-weight:400}
.plan ul{padding-left:16px;margin:6px 0 10px;font-size:12.5px;line-height:1.7;flex:1}
.plan .tagp{position:absolute;top:-10px;right:12px;background:var(--brand-btn);color:#fff;font-size:11px;border-radius:99px;padding:1px 8px}
.pay{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pay .qr{width:168px;height:168px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;flex:none}
.pay .qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.pay .amount{font-size:26px;font-weight:600}
.order-steps{list-style:none;margin:0;padding:0}
.order-steps li{display:flex;gap:10px;padding:7px 0}
.order-steps li > i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:12px;flex:none}
.order-steps li.done > i{background:var(--good);border-color:var(--good);color:#fff}
.order-steps li.cur > i{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}
.plan-tag{height:18px;font-size:10.5px;padding:0 6px;margin-left:6px;vertical-align:middle}
.upgrade-ic{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 6px}
.plan-banner{margin:0 0 12px}
.drop-slip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1.5px dashed var(--line-2);border-radius:10px;padding:12px}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans{grid-template-columns:1fr}.use{grid-template-columns:100px 1fr auto auto}.pay .qr{width:150px;height:150px}}
.drop-slip label.btn{position:relative;overflow:hidden}
.drop-slip label.btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.drop-slip label.btn:focus-within{box-shadow:0 0 0 3px var(--brand-ring)}

/* 3f (A60): คู่ค้า tag · "ผ่าน <partner>" pill · partner checkbox row */
.ptag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.5;border-radius:99px;padding:0 8px;background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;font-weight:600;white-space:nowrap;vertical-align:middle}
.via{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.5;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 8px;white-space:nowrap;vertical-align:middle}
.chk-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);cursor:pointer}
.chk-row input{margin-top:3px;flex:none}
.chk-row b{font-size:13.5px;font-weight:600}
.chk-row .hint{display:block}
.muted-seg{color:var(--ink-3);font-style:italic}
:root[data-theme="dark"] .ptag{background:#2e1065;color:#ddd6fe;border-color:#4c1d95}
/* 3f: secondary columns that only show on wide screens (customers › Value) — keeps 1366px laptops free of sideways scroll */
@media (max-width:1500px){th.col-xl,td.col-xl{display:none}}

/* Batch 3h-2 (A63): บันทึกการใช้งาน + ประวัติการแก้ไข */
.audit-table tbody tr.audit-row{cursor:pointer}
.audit-table tbody tr.audit-row:hover{background:var(--surface-2)}
.audit-table tbody tr.audit-row.on{background:var(--brand-soft)}
.audit-table tbody td.chg,.audit-table tbody td:nth-child(4){white-space:normal;padding-top:8px;padding-bottom:8px;line-height:1.45}
.audit-table tbody td:nth-child(4){min-width:200px}
.audit-table tbody td.chg{min-width:240px;max-width:420px}
.audit-act{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.dot.add{background:var(--good)}.dot.mod{background:var(--brand)}.dot.del{background:var(--critical)}.dot.sys{background:#a855f7}
.chg{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.audit-diff{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:12px}
.audit-diff th{text-align:left;font-weight:600;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.audit-diff td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.audit-diff td:first-child{width:28%;color:var(--ink-2);font-weight:500}
.audit-diff td.old{color:var(--critical-ink);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--critical) 45%,transparent)}
.audit-diff td.new{color:var(--good-ink)}
.audit-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;font-size:var(--fs-sm)}
.audit-kv>span:nth-child(odd){color:var(--muted)}
.audit-kv>span:nth-child(even){overflow-wrap:anywhere}
.audit-hist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.audit-hist-row+.audit-hist-row{border-top:1px solid var(--line)}
.audit-hist-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.audit-hist-head:hover{background:var(--surface-2)}
.audit-hist-head[aria-expanded="true"]{background:var(--brand-soft)}
.audit-hist-head:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.audit-what{min-width:0;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-hist-body{padding:12px 14px 14px;background:var(--surface);border-top:1px dashed var(--line)}
.sec-group{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--brand-soft);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.sec-ret{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-sm);color:var(--ink-2)}
@media (max-width:640px){
  .audit-hist-head{grid-template-columns:auto minmax(0,1fr);gap:4px 10px}
  .audit-hist-head .audit-what{grid-column:1/-1;white-space:normal}
}

/* Batch 3h-3 (A64): Pipeline v2 — mockup NebrixGrow_Pipeline_3h3_v0.1 */
.pl-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px;position:relative}
.pl-top h1{margin:0;font-size:var(--fs-2xl);line-height:1.2;display:flex;align-items:center;gap:8px}
.pl-top .sub{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px}
.pl-help{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:700;display:inline-grid;place-items:center;cursor:pointer}
.pl-help:hover{color:var(--brand);border-color:var(--brand)}
.pl-dens{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.pl-dens button{border:0;background:none;width:34px;height:34px;display:grid;place-items:center;color:var(--ink-3);cursor:pointer}
.pl-dens button.on{background:var(--brand-soft);color:var(--brand)}
.pl-dens .ico{width:16px;height:16px}

/* KPI strip */
.pl-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.pl-kpi{display:block;width:100%;padding:12px 16px;border-right:1px solid var(--line);min-width:0;text-align:left;background:none;border-top:0;border-bottom:0;border-left:0;font:inherit;color:inherit}
.pl-kpi:last-child{border-right:0}
.pl-kpi .l{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.pl-kpi .v{font-size:22px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
.pl-kpi .v small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:3px}
.pl-kpi .d{font-size:var(--fs-xs);color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-kpi .d b{color:var(--ink-2);font-weight:600}
.pl-kpi.act{cursor:pointer}
.pl-kpi.act:hover{background:var(--surface-2)}
.pl-kpi.warn .v{color:var(--warn-ink)}
.pl-kpi.on{background:var(--warn-soft);box-shadow:inset 0 -2px 0 var(--warn)}
.pl-meter{height:6px;border-radius:99px;background:var(--surface-3);margin-top:8px;overflow:hidden;display:flex}
.pl-meter i{display:block;height:100%}
.pl-funnel{grid-column:1/-1;border-top:1px solid var(--line);padding:10px 16px 12px;display:flex;align-items:center;gap:14px}
.pl-funnel .lbl{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;white-space:nowrap}
.pl-fbar{flex:1;display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface-3);min-width:0}
.pl-fbar i{display:block;height:100%;min-width:3px}
.pl-flegend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-3)}
.pl-flegend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pl-flegend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.pl-flegend b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}

/* filters */
.pl-flt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 12px}
.pl-flt .search{width:270px}
.pl-flt .select{height:34px;width:auto;min-width:130px;max-width:210px}
.pl-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.pl-chip .n{font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2);border-radius:99px;padding:0 6px;line-height:17px}
.pl-chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pl-chip.on .n{background:rgba(255,255,255,.2);color:#fff}
.pl-chip.bad .n{background:var(--critical-soft);color:var(--critical-ink)}
.pl-chip.wrn .n{background:var(--warn-soft);color:var(--warn-ink)}
.pl-legend{font-size:var(--fs-xs);color:var(--ink-3);display:flex;gap:12px;align-items:center;margin-left:auto}
.pl-legend span{display:inline-flex;align-items:center;gap:5px}
.pl-legend i{width:3px;height:12px;border-radius:2px;display:inline-block}
.pl-legend i.risk{background:var(--critical)}.pl-legend i.stale{background:var(--serious)}

/* board */
.pl-board{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding-bottom:8px;min-height:420px}
.pl-col{flex:1 1 300px;min-width:260px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column}
.pl-col.closed{flex:0 0 300px;min-width:300px;background:transparent;border-style:dashed}
.pl-ch{padding:10px 12px 8px;border-bottom:1px solid var(--line);background:inherit;border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:1}
.pl-ch .r1{display:flex;align-items:center;gap:6px}
.pl-ch h2{font-size:13.5px;font-weight:700;margin:0;color:var(--ink)}
.pl-ch .r1 .btn{margin-left:2px}
.pl-ch .p{font-size:11px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 6px;line-height:17px}
.pl-ch .c{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pl-ch .r2{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.pl-ch .r2 b{font-size:13px;color:var(--ink)}
.pl-ch .bar{height:3px;border-radius:99px;background:var(--surface-3);margin-top:7px;overflow:hidden}
.pl-ch .bar i{display:block;height:100%;border-radius:99px}
.pl-cards{padding:8px;display:flex;flex-direction:column;gap:8px}
/* 0.30.1: a wide stage column lays its cards out in a grid (each card ≥ 300px) instead of leaving the board half empty */
.pl-col:not(.closed) .pl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));align-items:start}
.pl-col:not(.closed) .pl-cards>.empty-col{grid-column:1 / -1}
.pl-add{margin:0 8px 8px;border:1px dashed var(--line-2);border-radius:var(--r);background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-sm);height:32px;cursor:pointer}
.pl-add:hover{color:var(--brand);border-color:var(--brand);background:var(--surface)}

/* collapsed empty stage */
.pl-rail{flex:0 0 52px;min-height:260px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px;cursor:pointer;transition:flex-basis .15s,background .15s}
.pl-rail:hover{background:var(--surface-3)}
.pl-rail .vt{writing-mode:vertical-rl;font-size:13px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.pl-rail .vt span{font-weight:400;color:var(--ink-3);font-size:11.5px}
.pl-rail .z{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:99px;width:22px;height:22px;display:grid;place-items:center}
.pl-board.dragging .pl-rail{flex-basis:180px;border-color:var(--brand);background:var(--brand-soft)}
.pl-rail .pl-drop{display:none}
.pl-board.dragging .pl-rail .vt{writing-mode:horizontal-tb;font-size:13px}
.pl-board.dragging .pl-rail .pl-drop{display:block;margin:auto 10px;text-align:center;font-size:12px;color:var(--brand);line-height:1.5}
.pl-rail.over,.pl-col.over{outline:2px solid var(--brand);outline-offset:-2px;background:var(--brand-soft)}

/* closed drop zones while dragging */
.pl-wl{display:none;padding:8px;gap:8px;flex-direction:column}
.pl-board.dragging .pl-wl{display:flex}
.pl-board.dragging .pl-col.closed .pl-cards{opacity:.35}
.pl-wl div{border:2px dashed;border-radius:var(--r);padding:16px 10px;text-align:center;font-weight:600;font-size:13px}
.pl-wl .w{border-color:var(--good);color:var(--good-ink);background:var(--good-soft)}
.pl-wl .l{border-color:var(--critical);color:var(--critical-ink);background:var(--critical-soft)}
.pl-wl small{display:block;font-weight:400;font-size:11.5px;opacity:.85;margin-top:2px}

/* card */
.pl-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 9px;box-shadow:var(--sh-1);cursor:grab;transition:box-shadow .12s,transform .12s,border-color .12s}
.pl-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.pl-card:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pl-card.risk{box-shadow:inset 3px 0 0 var(--critical),var(--sh-1)}
.pl-card.stale{box-shadow:inset 3px 0 0 var(--serious),var(--sh-1)}
.pl-card.ghost{opacity:.4;border-style:dashed}
.pl-card.lift{transform:rotate(2deg);box-shadow:var(--sh-pop);cursor:grabbing}
.pl-card .t{font-size:13.5px;font-weight:600;line-height:1.4;padding-right:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-card .cu{font-size:12px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;align-items:center;min-width:0}
.pl-card .cu span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pl-card .cu .via{font-size:11px;padding:0 6px;flex:none}
.pl-card .mid{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;margin-top:8px}
.pl-card .a{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pl-card .wt{font-size:11.5px;color:var(--ink-3);font-weight:400;margin-left:4px}
.pl-due{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pl-due .ico{width:12px;height:12px}
.pl-due.soon{color:var(--warn-ink);font-weight:600}
.pl-due.late{color:var(--critical-ink);font-weight:600}
.pl-next{display:flex;align-items:center;gap:7px;margin-top:8px;padding:6px 8px;border-radius:var(--r-sm);background:var(--surface-2);font-size:12px;color:var(--ink-2);min-width:0}
.pl-next .ico{width:13px;height:13px;flex:none;color:var(--ink-3)}
.pl-next .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.pl-next .when{flex:none;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pl-next.late{background:var(--critical-soft);color:var(--critical-ink)}.pl-next.late .ico,.pl-next.late .when{color:var(--critical-ink)}
.pl-next.none{background:var(--warn-soft);color:var(--warn-ink)}.pl-next.none .ico{color:var(--warn-ink)}
.pl-next.none .when{color:var(--warn-ink);font-weight:600;text-decoration:underline;cursor:pointer;border:0;background:none;font:inherit;font-size:11.5px;padding:0}
.pl-ft{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--ink-3);min-width:0}
.pl-q{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:99px;padding:0 7px;line-height:18px;white-space:nowrap;color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
.pl-q:hover{border-color:var(--brand);color:var(--brand)}
.pl-q .ico{width:11px;height:11px}
.pl-q i{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--muted)}
.pl-q i.sent{background:var(--brand)}.pl-q i.ok{background:var(--good)}.pl-q i.wrn{background:var(--warn)}.pl-q i.bad{background:var(--critical)}
.pl-q.none{border-style:dashed;color:var(--ink-3)}
.pl-age{white-space:nowrap}
.pl-ft .avatar{width:22px;height:22px;font-size:10px;margin-left:auto;flex:none}
.pl-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.pl-tags .pill{height:18px;font-size:10.5px;padding:0 7px}
.pl-card .more{position:absolute;right:6px;top:6px;opacity:.55}
.pl-card:hover .more,.pl-card:focus-within .more{opacity:1}
.pl-qa{position:absolute;right:8px;bottom:8px;display:none;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:2px}
.pl-card:hover .pl-qa,.pl-card:focus-within .pl-qa{display:flex}
.pl-card.open .pl-qa,.pl-board.dragging .pl-qa{display:none}
.pl-qa button,.pl-qa a{width:28px;height:26px;border:0;background:none;border-radius:5px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.pl-qa button:hover,.pl-qa a:hover{background:var(--surface-2);color:var(--brand)}
.pl-qa .good{color:var(--good-ink)}
.pl-qa .ico{width:14px;height:14px}
@media (hover:none){.pl-qa{display:none!important}}
.pl-closed .pl-card{cursor:pointer}
.pl-closed .res{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11.5px}
.pl-sum{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);padding:0 2px 2px}
.pl-sum b{color:var(--good-ink)}

/* compact density hides tags; detailed shows them */
.pl-board:not(.compact) .pl-card .t{-webkit-line-clamp:4}
.pl-board.compact .pl-tags,.pl-board.compact .wt{display:none}

/* additions for the Razor page */
.pl-helpbox{position:absolute;left:0;top:44px;width:min(440px,calc(100vw - 32px));z-index:30;box-shadow:var(--sh-pop);padding:14px 18px;font-size:13px;line-height:1.7;margin:0}
.pl-helpbox ul{margin:6px 0 0;padding-left:18px}
.good-ink{color:var(--good-ink)}.bad-ink{color:var(--critical-ink)}.warn-ink{color:var(--serious-ink)}
.pl-kpi .l .ico{width:13px;height:13px;color:var(--warn)}
.pl-fnote{font-size:var(--fs-xs);color:var(--ink-3);margin:-4px 0 10px}
.pl-insight{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--ink-3);margin-top:12px;padding:8px 12px;border:1px dashed var(--line-2);border-radius:var(--r)}
.pl-insight .ico{width:14px;height:14px;color:var(--brand);flex:none}
.pl-railempty{display:none}
.pl-wl .over{outline:2px solid currentColor;outline-offset:2px}
.pl-card.won{box-shadow:inset 3px 0 0 var(--good),var(--sh-1)}
.pl-card.lost{box-shadow:inset 3px 0 0 var(--critical),var(--sh-1)}
.pl-all{text-align:center;padding:4px;display:block}
.pl-cards .empty-col{font-size:12px;color:var(--muted);text-align:center;padding:24px 8px;border:1px dashed var(--line-2);border-radius:var(--r)}
.pl-menu{top:34px;right:6px;min-width:220px;z-index:8}
.pl-menu.up{top:auto;bottom:34px}
.pl-menu a{display:flex;align-items:center;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink);text-decoration:none}
.pl-menu a:hover{background:var(--surface-2)}
.pl-menu .ico{width:14px;height:14px;margin-right:8px;color:var(--ink-3);vertical-align:-2px}
.pl-menu button.good{color:var(--good-ink)}
.pl-menu .mh{font-size:11.5px;color:var(--ink-3);padding:4px 10px 2px}
.pl-card.open{z-index:7}
.pl-help[aria-expanded="true"]{color:var(--brand);border-color:var(--brand)}
.pl-ch .r2 span{white-space:nowrap}
@media (max-width:640px){
  .pl-kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pl-kpi{flex:0 0 46%;scroll-snap-align:start}
  .pl-funnel{display:none}
  .pl-search{width:100%}
  .pl-legend{display:none}
  .pl-flt .select{flex:1 1 calc(50% - 4px);max-width:none;min-width:0}
  .pl-flt .select:nth-of-type(n+3){display:none}
  .pl-flt .search{width:100%;flex:0 0 100%}
  .pl-chip{flex:none}
  .pl-board{display:block;overflow:visible}
  .pl-board>.pl-col,.pl-board>.pl-rail{display:none}
  .pl-board>.cur{display:flex}
  .pl-col{max-width:none;max-height:none}
  .pl-col.closed{flex:none}
  .pl-rail.cur{min-height:0;padding:24px;border-style:dashed}
  .pl-rail.cur .z,.pl-rail.cur .vt,.pl-rail.cur .pl-drop{display:none}
  .pl-rail.cur .pl-railempty{display:block;font-size:13px;color:var(--muted)}
  .pl-helpbox{position:fixed;left:16px;right:16px;top:70px;width:auto}
}

/* ===== B-1 (A66): partner program — tiers, types, commission status, partner pages, quote banners ===== */
.pl-kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pl-kpi .v.warn{color:var(--warn-ink)}
.tier{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 9px;line-height:19px;white-space:nowrap;vertical-align:middle}
.tier i{width:7px;height:7px;border-radius:50%;flex:none}
.tier.plat{background:#eef2ff;color:#4338ca}.tier.plat i{background:#6366f1}
.tier.gold{background:#fef9c3;color:#a16207}.tier.gold i{background:#eab308}
.tier.silver{background:#f1f5f9;color:#475569}.tier.silver i{background:#94a3b8}
.tier.bronze{background:#fff1e6;color:#9a3412}.tier.bronze i{background:#c2410c}
.tier.blue{background:#eff6ff;color:#1d4ed8}.tier.blue i{background:#3b82f6}
.tier.none{background:transparent;border:1px dashed var(--line-2);color:var(--ink-3);font-weight:600;line-height:17px}
.ptype{display:inline-block;font-size:11.5px;font-weight:600;border:1px solid var(--line-2);border-radius:99px;padding:0 8px;line-height:18px;white-space:nowrap;color:var(--ink-2);vertical-align:middle}
.ptype.ref{border-color:#a7f3d0;color:#047857;background:#ecfdf5}
.ptype.res{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}
.st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}.st i{width:7px;height:7px;border-radius:50%;flex:none}
.st.wait{color:var(--ink-3)}.st.wait i{background:var(--muted)}
.st.due{color:var(--warn-ink)}.st.due i{background:var(--warn)}
.st.late{color:var(--critical-ink)}.st.late i{background:var(--critical)}
.st.paid{color:var(--good-ink)}.st.paid i{background:var(--good)}
.st.void{color:var(--ink-3);text-decoration:line-through}.st.void i{background:var(--line-2)}
.wr{display:flex;align-items:center;gap:8px}
.wr .bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;width:80px;flex:none}
.wr .bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.partners-table td{vertical-align:middle}
.pd-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pct{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pct .input{width:84px;text-align:right}
.pp-tiers .input,.pp-tiers .select{min-width:0}
.pp-tiers td:first-child .input{min-width:140px}
.pbanner{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--ink)}
.pbanner.ref{background:#ecfdf5;border-color:#a7f3d0}
.pbanner .grow{flex:1;min-width:220px}
.comm-box{border:1px solid #a7f3d0;background:#ecfdf5;border-radius:var(--r);padding:10px 12px;margin-top:4px}
.comm-box .pct .input{width:80px}
:root[data-theme="dark"] .tier.plat{background:#1e1b4b;color:#c7d2fe}
:root[data-theme="dark"] .tier.gold{background:#2a2105;color:#fde68a}
:root[data-theme="dark"] .tier.silver{background:#1e293b;color:#cbd5e1}
:root[data-theme="dark"] .tier.bronze{background:#2b1507;color:#fdba74}
:root[data-theme="dark"] .tier.blue{background:#0b1e3f;color:#93c5fd}
:root[data-theme="dark"] .ptype.ref,:root[data-theme="dark"] .pbanner.ref,:root[data-theme="dark"] .comm-box{background:#052e1f;border-color:#065f46;color:#6ee7b7}
:root[data-theme="dark"] .ptype.res,:root[data-theme="dark"] .pbanner{background:#0b1e3f;border-color:#1e3a8a;color:#93c5fd}
:root[data-theme="dark"] .pbanner,:root[data-theme="dark"] .pbanner.ref,:root[data-theme="dark"] .comm-box{color:var(--ink)}
@media (max-width:640px){
  .pl-kpis.k4 .pl-kpi{flex:0 0 46%}
  .wr .bar{width:56px}
}
a.ptag{text-decoration:none}a.ptag:hover{border-color:#a78bfa}

/* ===== B-2 (A67): หน้าตั้งค่า v2 — grouped nav + search, page header, sortable lists, sales targets ===== */
.st-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start}
.st-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-mobile{display:none}
.st-search{position:relative;margin-bottom:8px}
.st-search>.ico,.st-search>svg{position:absolute;left:10px;top:10px;color:var(--muted);width:14px;height:14px;pointer-events:none}
.st-search>.input{padding-left:31px;padding-right:30px;height:34px;font-size:13px}
.st-search>kbd{position:absolute;right:8px;top:8px;font:500 10.5px/16px ui-monospace,Consolas,monospace;border:1px solid var(--line-2);border-radius:4px;padding:0 5px;color:var(--ink-3);background:var(--surface)}
.srch-pop{position:absolute;left:0;top:40px;width:400px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-pop);z-index:30;padding:6px;font-size:13px}
.srch-pop .it{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer}
.srch-pop .it:hover{background:var(--surface-2)}
.srch-pop .it.on{background:var(--brand-soft)}
.srch-pop .it svg{margin-top:2px;color:var(--ink-3);flex:none}
.srch-pop .it b{display:block;font-weight:600;color:var(--ink)}.srch-pop .it span{font-size:12px;color:var(--ink-3)}
.srch-pop .ft{display:flex;gap:12px;border-top:1px solid var(--line);margin-top:6px;padding:8px 10px 4px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.srch-pop kbd{font:500 10.5px/15px ui-monospace,Consolas,monospace;border:1px solid var(--line-2);border-radius:4px;padding:0 4px;color:var(--ink-3)}
.srch-empty{padding:12px 10px;color:var(--ink-3)}
.st-gh{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;padding:12px 10px 4px}
.st-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer;line-height:1.35;user-select:none}
.st-i:hover{background:var(--surface-2)}
.st-i:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.st-i svg{color:var(--ink-3);flex:none}
.st-i.on{background:var(--brand-soft);color:var(--brand);font-weight:600}.st-i.on svg{color:var(--brand)}
.st-i .r{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.st-i .r.soon{border:1px solid var(--line);border-radius:99px;padding:0 6px}
.st-i .warn{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.st-i .new{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:0 6px;line-height:16px}
.st-i.on .new{background:var(--surface)}
.st-i.off{opacity:.55;cursor:default}.st-i.off:hover{background:transparent}
.st-body{min-width:0}
.sp-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sp-h-t{flex:1;min-width:240px}
.sp-h h2{margin:0;font-size:20px;line-height:1.3}
.sp-h p{margin:2px 0 0;font-size:13px;color:var(--ink-3);max-width:760px}
.sp-h .act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.subtabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;margin-bottom:14px;max-width:100%;overflow-x:auto}
.subtabs>span{padding:6px 14px;border-radius:7px;font-size:13px;color:var(--ink-2);cursor:pointer;display:flex;gap:6px;align-items:center;white-space:nowrap;user-select:none}
.subtabs>span:focus-visible{outline:2px solid var(--brand)}
.subtabs>span.on{background:var(--surface);box-shadow:var(--sh-1);color:var(--ink);font-weight:600}
.subtabs .n{font-size:11px;color:var(--ink-3);font-weight:600}
.dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);display:inline-block}
.flowstrip{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;margin-bottom:12px;overflow-x:auto;scrollbar-width:thin}
.fs{display:flex;flex-direction:column;gap:1px;min-width:92px;padding:6px 12px;border-radius:8px}
.fs b{font-size:13px;white-space:nowrap}.fs span{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.fs .c{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.25}
.fs.def{background:var(--brand-soft)}.fs.def b{color:var(--brand)}
.fs.risk{background:var(--warn-soft)}.fs.risk b{color:var(--warn-ink)}
.fs.end{background:var(--surface-2)}.fs.end b{color:var(--ink-3)}
.fs.won{background:var(--good-soft)}.fs.won b{color:var(--good-ink)}
.fs.lost{background:var(--critical-soft)}.fs.lost b{color:var(--critical-ink)}
.fsar{align-self:center;color:var(--muted);padding:0 2px;font-size:15px}
.fsdiv{width:1px;background:var(--line);margin:0 10px;align-self:stretch;flex:none}
.elist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.elist .el-h,.elist .el-r{display:grid;align-items:center;gap:12px;padding:0 12px}
.elist.states .el-h,.elist.states .el-r{grid-template-columns:30px minmax(200px,1fr) 150px 80px 36px}
.elist.stages .el-h,.elist.stages .el-r{grid-template-columns:30px minmax(170px,1fr) 170px 110px 190px 70px 36px}
.elist .el-h{height:36px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-3);border-radius:var(--r-lg) var(--r-lg) 0 0}
.elist .el-h .num,.elist .cnt{text-align:right}
.elist .el-r{min-height:58px;border-bottom:1px solid var(--line);position:relative;transition:background .12s}
.elist .el-r:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.elist .el-r.dragging{opacity:.45;background:var(--surface-2)}
.elist .el-r.over{box-shadow:inset 0 2px 0 var(--brand)}
.elist .el-r.locked{background:var(--surface-2)}
.grip{width:26px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;border-radius:6px;border:0;background:transparent;padding:0}
.grip:hover:not(:disabled){background:var(--surface-3);color:var(--ink-2)}
.grip:focus-visible{outline:2px solid var(--brand)}
.grip:disabled{cursor:default;opacity:.5}
.el-r.locked .grip{cursor:default}
.nmcell{padding:7px 0;min-width:0}
.nmcell .input{height:34px;font-weight:600}
.nmcell .cd{font:500 11px/14px ui-monospace,Consolas,monospace;color:var(--ink-3);margin-top:3px;padding-left:2px}
.nmcell .cd-in{height:28px;margin-top:4px;font:500 12px ui-monospace,Consolas,monospace;font-weight:500}
.kind{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:99px;padding:3px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.kind i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.kind.def{background:var(--brand-soft);border-color:var(--brand-ring);color:var(--brand)}.kind.def i{background:var(--brand)}
.kind.won{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent);color:var(--good-ink)}.kind.won i{background:var(--good)}
.kind.lost{background:var(--critical-soft);border-color:color-mix(in srgb,var(--critical) 35%,transparent);color:var(--critical-ink)}.kind.lost i{background:var(--critical)}
.kind-select{appearance:none;height:30px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;padding:0 28px 0 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;max-width:140px}
.kind-select.default{background-color:var(--brand-soft);border-color:var(--brand-ring);color:var(--brand)}
.kind-select.risk{background-color:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn-ink)}
.kind-select.terminal{background-color:var(--surface-2);color:var(--ink-3)}
.kind-select:disabled{cursor:default;opacity:.8}
.menu-host{position:relative;display:flex;justify-content:flex-end}
.elist .more{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;border:1px solid transparent;background:transparent}
.elist .more:hover,.elist .more.on{background:var(--surface-3);color:var(--ink)}
.rowmenu{position:absolute;right:0;top:34px;z-index:10;width:260px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-pop);padding:5px;font-size:13px}
.rowmenu button,.rowmenu .dis{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;padding:7px 10px;border-radius:6px;border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer}
.rowmenu button:hover:not(:disabled){background:var(--surface-2)}
.rowmenu button:disabled{color:var(--muted);cursor:default}
.rowmenu svg{color:var(--ink-3);margin-top:2px;flex:none}
.rowmenu .dis{color:var(--muted);cursor:default}
.rowmenu .dis small{display:block;font-size:11.5px;color:var(--ink-3)}
.rowmenu .sep{height:1px;background:var(--line);margin:4px 2px}
.rowmenu .danger,.rowmenu .danger svg{color:var(--critical-ink)}
.addrow{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;color:var(--brand);font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:0;border-top:1px dashed var(--line);background:transparent;text-align:left}
.addrow:hover{background:var(--brand-soft)}
.elist .addrow:first-child{border-top:0}
.pct2{display:flex;align-items:center;gap:7px}
.pct2 .input{width:64px;height:32px;text-align:right}
.pct2 .mini{flex:1;height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden;min-width:40px}.pct2 .mini i{display:block;height:100%;background:var(--brand);border-radius:99px}
.sig{font:500 11.5px/18px ui-monospace,Consolas,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink-2);white-space:nowrap}
.sig-select{height:32px;font-size:12.5px}
.sec-h{font-size:11.5px;font-weight:700;color:var(--ink-3);padding:14px 14px 6px;text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--line)}
.help{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:12.5px;color:var(--ink-2);margin-top:12px;line-height:1.65}
.help>svg{color:var(--brand);margin-top:3px;flex:none}
.flash-field{animation:ngflash 2s ease-out}
@keyframes ngflash{0%,40%{box-shadow:0 0 0 3px #fde68a;background-color:#fffbeb}100%{box-shadow:0 0 0 3px transparent}}
/* sales targets */
.tg-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tg-bar .subtabs{margin:0}
.tg-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.qgrid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.qgrid th{background:var(--surface-2);color:var(--ink-3);font-weight:600;font-size:12px;padding:9px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.qgrid th.cur{color:var(--brand)}
.qgrid td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;vertical-align:top;white-space:nowrap}
.qgrid .who-h,.qgrid .who-c{text-align:left;position:sticky;left:0;background:var(--surface);z-index:2;min-width:140px}
.qgrid .who-h{background:var(--surface-2);padding-left:12px}
.qgrid .who-c{padding:8px 6px 8px 12px}
.qgrid .who{display:flex;align-items:center;gap:8px}
.qgrid .who .fillr{margin-left:auto;width:26px;height:26px}
.qgrid td input{width:100%;min-width:76px;height:32px;text-align:right;border:1px solid transparent;background:transparent;border-radius:6px;font:inherit;font-variant-numeric:tabular-nums;padding:0 8px;color:var(--ink)}
.qgrid td input:hover:not(:disabled){border-color:var(--line-2)}
.qgrid td input:focus{border-color:var(--brand);background:var(--surface);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.qgrid td input:disabled{color:var(--ink-3);cursor:default}
.qgrid td input::placeholder{color:var(--muted)}
.qgrid td.past{background:var(--surface-2)}
.qgrid td.cur,.qgrid td.tot-c{background:color-mix(in srgb,var(--brand-soft) 55%,transparent)}
.qgrid td.tot-c{padding-top:12px}
.qgrid .won{font-size:11px;color:var(--ink-3);padding:0 8px 3px}
.qgrid .won.good{color:var(--good-ink)}.qgrid .won.warn{color:var(--warn-ink)}.qgrid .won.bad{color:var(--critical-ink)}
.qgrid tr.tot td{background:var(--surface-2);font-weight:700;padding:10px 8px;border-bottom:0}
.qgrid tr.tot td:first-child{text-align:left;padding-left:12px;position:sticky;left:0}
.qgrid tr.tot .won{font-weight:500;padding:0}
.qgrid.quarters td{padding:10px 12px}
.qcell{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.qcell .bar{display:block;width:120px;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.qcell .bar i{display:block;height:100%;border-radius:99px}
@media (max-width:900px){
  .st-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .st-nav{position:relative;top:0;z-index:20}
  .st-mobile{display:flex;align-items:center;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
  .st-mobile svg:first-child{color:var(--brand)}
  .st-mobile svg:last-child{margin-left:auto;transform:rotate(90deg);color:var(--ink-3)}
  .st-list{display:none}
  .st-nav.open .st-list{display:block;position:absolute;left:0;right:0;top:48px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-pop);padding:10px;max-height:70vh;overflow-y:auto}
  .elist.states .el-h,.elist.stages .el-h{display:none}
  .elist.states .el-r,.elist.stages .el-r{grid-template-columns:28px minmax(0,1fr) auto;row-gap:4px;padding:8px 10px}
  .elist.states .el-r>:nth-child(3),.elist.stages .el-r>:nth-child(3),.elist.stages .el-r>:nth-child(4),.elist.stages .el-r>:nth-child(5){grid-column:2 / 3}
  .elist .cnt{display:none}
  .elist .menu-host{grid-column:3;grid-row:1}
  .sp-h .act{width:100%}
  .srch-pop{width:100%}
}
:root[data-theme="dark"] .flash-field{animation:none;box-shadow:0 0 0 3px #a16207}
/* B-2 (A67): Pipeline quota tile */
.pl-kpi.quota .v small{white-space:nowrap}
.pl-qbar{position:relative;display:block;height:7px;border-radius:99px;background:var(--surface-3);margin-top:7px;overflow:visible}
.pl-qbar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.pl-qbar i.fc{background:color-mix(in srgb,var(--good) 30%,transparent)}
.pl-qbar .pace{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-3);border-radius:1px;opacity:.55}
.pl-kpi.quota.on{background:var(--brand-soft);box-shadow:inset 0 -2px 0 var(--brand)}
.pl-quota{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:12px 16px;margin-top:10px}
.pl-quota-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pl-quota-r{display:grid;grid-template-columns:minmax(120px,200px) 150px minmax(120px,1fr) 52px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.pl-quota-r .pl-qbar{margin:0}
.pl-quota-r .pct{text-align:right;font-weight:600}
@media (max-width:640px){.pl-quota-r{grid-template-columns:1fr auto;}.pl-quota-r .pl-qbar{grid-column:1 / -1}}
/* B-2 (A67): partner — commission statements */
.pd-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pd-stmts{border-top:1px solid var(--line);padding:10px 16px}
.pd-stmts-h{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.pd-stmt{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.pd-stmt:first-of-type{border-top:0}
.pd-stmt>svg{color:var(--brand);flex:none}
.pd-stmt .grow{flex:1;min-width:220px}
.stmt-pick{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r)}
.stmt-sum{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:12px}
.stmt-sum .nums{min-width:260px;font-size:13px}
.stmt-sum .nums div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.stmt-sum .nums .g{border-top:2px solid var(--ink);margin-top:3px;padding-top:6px;font-size:15px}
/* B-2 fix: one vertical rhythm between panels on every settings tab (tabs no longer sit inside a .stack) — margins collapse with
   the header / sub-tab margins, so the gap is always 16px */
.st-body > * + :is(.card,.grid,.stack,.banner,.alert,.tg-wrap,.elist,.table-wrap,.flowstrip,.pl-quota){margin-top:16px}
.st-body > .grid > .card{align-self:start}
/* ---- P3-1 (A68): ผู้ช่วย AI — ตั้งค่า › Agent, Customer 360 › สรุปโดย AI (mockup NebrixGrow_Agent_P3_v0.1) ---- */
:root{--ai:#7c3aed;--ai-soft:#f5f3ff;--ai-line:#ddd6fe}
:root[data-theme="dark"]{--ai:#c4b5fd;--ai-soft:#1c1530;--ai-line:#3b2a63}
.st-body > * + :is(.statgrid,.agent-top){margin-top:16px}
.ai-mark{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ai);background:var(--ai-soft);border:1px solid var(--ai-line);border-radius:99px;padding:0 8px;line-height:18px;white-space:nowrap}
.card.ai-card{border-color:var(--ai-line);background:linear-gradient(180deg,var(--ai-soft),var(--surface) 90px)}
.card.ai-card .hd{gap:8px}.card.ai-card .hd > .ico{color:var(--ai)}
.c360-ai > .card{margin-bottom:16px}
.ai-sum{font-size:14px;line-height:1.75}
.ai-pts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ai-pts li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:13.5px;line-height:1.6}
.ai-pts .k{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.ai-pts .k.r{background:var(--critical-soft);color:var(--critical-ink)}
.ai-pts .k.o{background:var(--good-soft);color:var(--good-ink)}
.ai-pts .k.n{background:var(--brand-soft);color:var(--brand)}
.src{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 4px;border-radius:4px;background:var(--surface-3);color:var(--ink-2);font-size:10.5px;font-weight:700;vertical-align:1px;margin-left:2px;text-decoration:none!important}
a.src:hover{background:var(--brand-soft);color:var(--brand)}
.srclist{display:grid;gap:4px;font-size:12px;color:var(--ink-3);margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.srclist > div{display:flex;gap:6px;align-items:flex-start;border-radius:6px;padding:1px 4px;margin:0 -4px}
.srclist > div:target{background:var(--warn-soft)}
.ai-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted);width:100%}
.ai-meta .dotsep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.ai-meta .sp{flex:1}
.ai-meta .btn.on{background:var(--brand-soft);color:var(--brand)}
.spinner.ai{border-color:var(--ai-line);border-top-color:var(--ai);vertical-align:-2px}
.agent-optin{max-width:720px}
.cap-ic{width:34px;height:34px;border-radius:9px;background:var(--ai-soft);color:var(--ai);display:grid;place-items:center;flex:none}
.cap-ic.lg{width:44px;height:44px}
.agent-top{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
.agent-prov{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.agent-prov > div{flex:1 1 220px}
.agent-prov .logo2{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.agent-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 12px;align-items:center}
.cap-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.cap-row:first-child{border-top:0}
.cap-row b{font-size:13.5px}.cap-row .d{font-size:12.5px;color:var(--ink-3)}
.lvl{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;font-size:12.5px;flex:none}
.lvl button{border:0;background:var(--surface);padding:5px 10px;cursor:pointer;color:var(--ink-2);white-space:nowrap;font:inherit;font-size:12.5px}
.lvl button + button{border-left:1px solid var(--line-2)}
.lvl button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.lvl button:disabled{cursor:default}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.stat small{display:block;font-size:12px;color:var(--ink-3)}.stat b{font-size:20px}.stat .t{font-size:11.5px;color:var(--muted)}
.disc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.disc .dcol{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.disc .dcol h4{font-size:13px;margin:0 0 8px;display:flex;gap:6px;align-items:center}
.disc ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:var(--ink-2)}
.disc .yes h4{color:var(--good-ink)}.disc .no h4{color:var(--critical-ink)}
.state-ok{color:var(--good-ink);font-weight:600}.state-err{color:var(--critical-ink);font-weight:600}
.agent-runs td{font-size:12.5px}
@media (max-width:1100px){.agent-top{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.statgrid,.disc{grid-template-columns:1fr}.agent-kv{grid-template-columns:1fr}.cap-row{grid-template-columns:34px minmax(0,1fr)}.cap-row > :last-child{grid-column:1 / -1}}
/* ---- P3-2 (A69): งาน › ข้อความถึงลูกค้า ---- */
.drawer.wide{width:600px}
.adraft{border:1px solid var(--ai-line);border-radius:var(--r-lg);padding:12px 14px;display:grid;gap:10px;background:linear-gradient(180deg,var(--ai-soft),var(--surface) 70px)}
.adraft-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.adraft-h .sp,.adraft-tools .sp,.adraft-ft .sp{flex:1}
.seg.sm button{height:26px;padding:0 10px;font-size:12px}
.adraft-why{font-size:12.5px}
.adraft-empty{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0}
.adraft .mail{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.adraft .mail .mh{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:4px 12px;border-bottom:1px solid var(--line);align-items:center;margin:0;font-weight:400}
.adraft .mail .mh .l{color:var(--ink-3);font-size:12px}
.input.bare{border:0;box-shadow:none;background:transparent;height:30px;padding:0}
.input.bare:focus{box-shadow:none;outline:none}
.adraft textarea.input.bare{width:100%;height:auto;min-height:120px;padding:10px 12px;resize:vertical;line-height:1.7;font-size:13.5px;display:block}
.select.sm{height:28px;font-size:12.5px;width:auto;padding-right:28px}
.ai-warn{font-size:12px;color:var(--warn-ink);display:flex;gap:6px;align-items:flex-start}
.adraft-tools,.adraft-ft{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adraft-sent{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:13px;white-space:pre-wrap;background:var(--surface);max-height:260px;overflow:auto}
.adraft-sent b{display:block;margin-bottom:6px}
.steps3{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3)}
.steps3 span{display:flex;align-items:center;gap:6px}
.steps3 i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.steps3 .on i{background:var(--brand-btn);color:#fff}.steps3 .on{color:var(--ink);font-weight:600}
.steps3 .done i{background:var(--good);color:#fff}
.steps3 .ln{width:22px;height:1px;background:var(--line-2)}
@media (max-width:640px){.drawer.wide{width:100%}}
/* ---- P3-3 (A70): เตรียมประชุม · อธิบายดีล ---- */
.btn.ai-btn{border-color:var(--ai-line);color:var(--ai);background:var(--ai-soft)}
.btn.ai-btn:hover{border-color:var(--ai)}
.brief-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card.brief .bd h4{font-size:13.5px;margin:16px 0 6px;display:flex;gap:6px;align-items:center}
.card.brief .bd h4:first-child,.card.brief .bd > div:first-child + h4{margin-top:0}
.card.brief .bd h4 .ico{color:var(--ai)}
.card.brief .bd ul,.dexp ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.75}
.qa{display:grid;gap:6px}
.qa > div{border-left:3px solid var(--brand);background:var(--brand-soft);padding:6px 10px;border-radius:0 8px 8px 0;font-size:13px}
.dexp{display:grid;gap:10px}
.dexp .why{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:13px;align-items:start}
.dexp .why .l{color:var(--ink-3);font-size:12px;padding-top:2px}
.prob{display:flex;align-items:center;gap:8px}
.prob .bar{flex:1;height:8px;border-radius:99px;background:var(--surface-3);position:relative;min-width:60px}
.prob .bar i{display:block;height:100%;border-radius:99px;background:var(--ai)}
.prob .bar b{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink-2);border-radius:1px;transform:translateX(-1px)}
@media (max-width:640px){.brief-types{grid-template-columns:1fr}.dexp .why{grid-template-columns:1fr;gap:2px}}

/* ── E-1 (A71): Settings › อีเมลขาออก — Microsoft 365 / SMTP ───────────────────────────────────────────────── */
.mail-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mail-method .opt-card{position:relative}
.ms-logo{width:30px;height:30px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);flex:none}
.ms-logo i{display:block;border-radius:1px}
.ms-logo i:nth-child(1){background:#f25022}.ms-logo i:nth-child(2){background:#7fba00}.ms-logo i:nth-child(3){background:#00a4ef}.ms-logo i:nth-child(4){background:#ffb900}
.mm-rec{height:18px;font-size:10.5px;margin-left:4px;vertical-align:1px}
.opt-card .ol b .mm-rec{display:inline-flex}
.mail-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;align-items:center}
.mail-kv .k{color:var(--ink-3)}
.mail-kv .mono,.st-body .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px}
.mail-meter{display:block;max-width:260px;margin-top:6px;height:6px}
.mail-meter i{background:var(--good)}
.meter.warn i{background:var(--warn)}
.mail-guide{counter-reset:g;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.mail-guide>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.mail-guide>li::before{counter-increment:g;content:counter(g);width:24px;height:24px;border-radius:50%;background:var(--brand-btn);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.mail-guide b.t{display:block;margin-bottom:2px}
.mail-ps{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre;margin:6px 0}
@media (max-width:640px){.mail-method,.mail-kv{grid-template-columns:minmax(0,1fr)}.mail-kv .k{margin-top:4px}}

/* ── 0.30.1: table density — small purpose-built tables keep their own compact rows ── */
.sumtbl tbody td,.qgrid tbody td,.audit-diff tbody td,.cfm-list tbody td,.paper tbody td{height:48px}   /* = the old default — their own padding stays */
.qline tbody td{padding-top:6px;padding-bottom:6px}
td .primary .via{margin-left:4px}

/* ── 0.31.0: ใบเสนอราคา — ยอดที่ตอบรับ / แถบรวมยอด / ช่วงเวลา ── */
.kpi.link{cursor:pointer;border-color:color-mix(in srgb,var(--good) 35%,var(--line));transition:box-shadow .12s}
.kpi.link:hover{box-shadow:var(--sh-2)}
.kpi.link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi .val.kpi-money{font-size:22px}
.qsum{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px}
.qsum b{font-size:15px;font-variant-numeric:tabular-nums}
.qsum .muted{color:var(--ink-3)}
.field .hint.ok-msg{color:var(--good-ink)}
@media (max-width:640px){.qsum{padding:12px 14px}.qsum .sp{display:none}}