/* ============================================================
   COPHET HR — base theme (น้ำเงิน-ขาว ตาม Analytics Dashboard Layout)
   โครงคลาสเดียวกับ COPHET CRM เพื่อให้ component ใช้ร่วมกันได้
   ============================================================ */
:root{
    --navy:#0E1D40; --navy-2:#16294F; --blue:#2356E0; --blue-2:#1D46B8; --sky:#5B8DEF; --sky-2:#8FB3F5;
    --sky-soft:#EAF0FC; --blue-soft:#E8EEFB; --slate:#4C5F82; --line:rgba(100,130,180,.24);
    --bg:#EDF2F9; --card:rgba(255,255,255,.86); --ink:#101D3D; --green:#0E9F6E; --amber:#EF8B0C; --rose:#E02D2D;
    --purple:#7C3AED; --purple-soft:#F0E9FD;
    --glass:rgba(255,255,255,.78); --glass-2:rgba(255,255,255,.92); --glass-bd:rgba(190,205,235,.6);
    --blur:blur(14px) saturate(140%);
    --shadow:0 2px 8px rgba(20,50,120,.05),0 12px 32px rgba(20,50,120,.08);
    --shadow-lux:0 1px 0 rgba(255,255,255,.8) inset,0 2px 10px rgba(20,50,120,.06),0 18px 42px rgba(20,50,120,.10);
    --sidebar-w:272px;
    --heading:#101D3D;
    /* พื้นหลังเว็บ — ขาวสะอาด ไม่มีเฉดสี */
    --app-bg:#FFFFFF;
    --glow-1:rgba(0,0,0,0); --glow-2:rgba(0,0,0,0); --glow-3:rgba(0,0,0,0); --glow-4:rgba(0,0,0,0);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
    --card-top:rgba(255,255,255,.98); --card-sheen:rgba(255,255,255,.4);
    /* Sidebar — น้ำเงินอ่อนไล่ระดับ สีเดียวกับปุ่มหลัก (--blue → --blue-2) เข้มขึ้นอีกเล็กน้อยจากรอบก่อน */
    --sidebar-bg:linear-gradient(186deg,#3D6BE0 0%,#1B45C0 52%,#143273 100%);
    --sidebar-text:#EAF1FF; --sidebar-strong:#FFFFFF; --sidebar-group:#D3E2FE; --sidebar-hover:rgba(255,255,255,.14); --sidebar-bd:rgba(255,255,255,.20);
  }

  /* ===== DARK MODE — flips surfaces/text, keeps brand accents ===== */
  [data-theme="dark"]{
    color-scheme:dark;
    --bg:#0D1830; --ink:#E4ECF7; --heading:#DCE7F6; --slate:#9FB2CD;
    --line:rgba(130,160,200,.20); --sky-soft:rgba(35,86,224,.20); --blue-soft:rgba(35,86,224,.16);
    --card:rgba(24,38,64,.6);
    --glass:rgba(24,38,64,.55); --glass-2:rgba(28,44,72,.75); --glass-bd:rgba(130,160,200,.18);
    --app-bg:linear-gradient(135deg,#0D1830 0%,#0A1426 46%,#0F1E38 100%);
    --glow-1:rgba(35,86,224,.18); --glow-2:rgba(29,70,184,.20); --glow-3:rgba(35,86,224,.12); --glow-4:rgba(22,41,79,.28);
    --card-grad:linear-gradient(160deg,rgba(40,56,88,.62),rgba(24,38,64,.44));
    --card-top:rgba(150,180,220,.22); --card-sheen:rgba(180,205,240,.10);
    --shadow:0 2px 8px rgba(0,0,0,.30),0 14px 38px rgba(0,0,0,.42);
    --shadow-lux:0 1px 0 rgba(255,255,255,.06) inset,0 2px 10px rgba(0,0,0,.32),0 20px 48px rgba(0,0,0,.48);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Anuphan',sans-serif;font-size:15px;font-weight:480;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;
    background:var(--app-bg);background-attachment:fixed;position:relative;min-height:100vh}
  body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(620px 520px at 12% 6%, var(--glow-1), transparent 60%),
      radial-gradient(680px 560px at 90% 0%, var(--glow-2), transparent 58%),
      radial-gradient(720px 640px at 80% 98%, var(--glow-3), transparent 62%),
      radial-gradient(560px 520px at 2% 94%, var(--glow-4), transparent 60%);}
  h1,h2,h3,h4,.kanit{font-family:'Kanit',sans-serif}
  button{font-family:inherit;cursor:pointer}
  input,select,textarea{font-family:inherit;font-size:13.5px}

  /* ---- TOP BAR ---- */
  .topbar{position:sticky;top:0;z-index:50;height:66px;display:flex;align-items:center;gap:14px;padding:0 18px;color:#fff;
    background:linear-gradient(120deg,#3D6BE0,#1B45C0 55%,#143273);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border-bottom:1px solid rgba(255,255,255,.20);box-shadow:0 6px 26px rgba(20,50,120,.26)}
  .burger{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;width:40px;height:40px;border-radius:11px;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .burger:hover{background:rgba(255,255,255,.26)}
  .brand{display:flex;flex-direction:column;line-height:1.12}
  .brand .b1{font-family:'Kanit';font-weight:700;font-size:18px;letter-spacing:.4px}
  .brand .b2{font-size:10.5px;color:#AFC5EC;letter-spacing:2.5px;font-weight:500;margin-top:1px}
  .tb-spacer{flex:1}
  .clock{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:6px 13px;border-radius:11px;font-size:12.5px;text-align:right;line-height:1.3}
  .clock b{font-family:'Kanit';font-weight:600;font-size:13px}
  .user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:5px 6px 5px 10px;border-radius:11px;font-size:12.5px}
  .user-chip .ua{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;font-family:'Kanit';font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}
  .user-chip .uname{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media(max-width:820px){.user-chip .uname{display:none}.brand .b2{display:none}}

  /* ---- LAYOUT ---- */
  .shell{display:flex;min-height:calc(100vh - 66px)}
  .sidebar{width:var(--sidebar-w);flex-shrink:0;padding:0 12px 18px;overflow-y:auto;position:sticky;top:66px;height:calc(100vh - 66px);transition:margin-left .24s ease,opacity .2s;
    background:var(--sidebar-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-right:1px solid var(--sidebar-bd)}
  .sidebar.hidden{margin-left:calc(-1 * var(--sidebar-w));opacity:0}
  .sb-logo-wrap{padding:22px 6px 12px;display:flex;justify-content:center}
  .sb-logo-block{text-align:center;width:100%}
  /* โลโก้ตัดพื้นหลังขาวออกแล้ว (PNG โปร่งใส) — ไม่มีกล่อง/ขอบขาว ใช้ drop-shadow แทนเพื่อความสมดุลกับพื้นน้ำเงิน */
  .sb-logo-img-wrap{display:inline-flex;justify-content:center}
  .sb-logo{width:100%;max-width:232px;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(6,18,50,.28))}
  .sb-brand-text{font-family:'Kanit',sans-serif;font-weight:900;font-size:28px;
    letter-spacing:2px;text-transform:uppercase;margin-top:14px;padding:0;line-height:1.22;
    color:#FFFFFF;
    text-shadow:0 1px 0 rgba(143,179,245,.5),0 2px 8px rgba(0,0,0,.35),0 4px 18px rgba(91,141,239,.45)}
  .sb-brand-rule{width:64%;height:2px;margin:9px auto 2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.7}
  .nav-group{font-size:10px;font-weight:600;color:var(--sidebar-group);text-transform:uppercase;letter-spacing:1.2px;margin:16px 12px 7px;opacity:.9}
  .nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;padding:9px 12px;border-radius:12px;font-size:14px;color:var(--sidebar-text);font-weight:550;margin-bottom:2px;transition:background .16s,box-shadow .16s,color .16s;text-decoration:none}
  .nav-item .ni-ico{width:26px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--sidebar-text);opacity:.9;transition:.16s}
  .nav-item .ni-ico svg{width:18px;height:18px;display:block;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .nav-item .ni-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--sidebar-text);background:rgba(255,255,255,.12);padding:1px 8px;border-radius:99px;font-family:'Kanit'}
  .nav-item .ni-count.alert{background:rgba(224,45,45,.28);color:#FFC9C2;box-shadow:0 0 0 1px rgba(224,45,45,.34) inset}
  .nav-item.active .ni-count.alert{background:rgba(255,255,255,.26);color:#fff;box-shadow:none}
  .nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-strong)}
  .nav-item:hover .ni-ico{color:var(--sidebar-strong);opacity:1;background:rgba(255,255,255,.10)}
  .nav-item.active{background:rgba(255,255,255,.24);color:#fff;box-shadow:0 6px 18px rgba(10,30,80,.22),0 1px 0 rgba(255,255,255,.35) inset;font-weight:700}
  .nav-item.active .ni-ico{color:#fff;background:rgba(255,255,255,.18)}
  .nav-item.active .ni-count{background:rgba(255,255,255,.28);color:#fff}
  .main{flex:1;min-width:0;padding:22px 24px 60px}
  @media(max-width:820px){
    .sidebar{position:fixed;z-index:45;box-shadow:0 10px 44px rgba(10,25,70,.30)}
    .main{padding:16px 14px 50px}
    .clock{display:none}
  }

  /* ---- HEADINGS / CARDS ---- */
  .page-head{display:flex;align-items:baseline;gap:11px;margin-bottom:16px;flex-wrap:wrap}
  .page-head h2{font-size:23px;font-weight:700;color:var(--heading);letter-spacing:-.3px;
    text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(16,29,61,.10)}
  .page-head .ph-sub{font-size:12.5px;color:var(--slate)}
  .card{position:relative;background:var(--card-grad);border:1px solid var(--glass-bd);border-top-color:var(--card-top);border-radius:18px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    box-shadow:var(--shadow-lux)}
  .card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(150deg,var(--card-sheen) 0%,rgba(255,255,255,.05) 26%,transparent 50%);mix-blend-mode:screen;opacity:.7}
  .card>*{position:relative;z-index:1}
  .card-pad{padding:16px 18px}
  .card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
  .card-head h3{font-size:16px;font-weight:700;color:var(--heading)}
  .card-head .tag{font-size:11px;color:var(--slate);font-weight:500}
  .grid{display:grid;gap:16px;align-items:stretch}
  .grid>.card{height:100%;display:flex;flex-direction:column}
  .grid>.card>.card-pad{flex:1}
  .chart-box{position:relative;height:230px;width:100%}
  .chart-box canvas{position:absolute;inset:0}
  .two-col{grid-template-columns:1fr 1fr}
  .three-col{grid-template-columns:1.4fr 1fr 1fr}
  .section-label{display:flex;align-items:baseline;gap:11px;margin:28px 2px 14px}
  .section-label .num{font-family:'Kanit';font-weight:700;color:#fff;font-size:12.5px;background:linear-gradient(120deg,var(--blue),var(--sky));padding:3px 11px;border-radius:8px;box-shadow:0 3px 8px rgba(35,86,224,.3)}
  .section-label h2{font-size:25px;font-weight:600;color:var(--heading);letter-spacing:.1px;line-height:1.12;
    text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 5px rgba(16,29,61,.13),0 3px 12px rgba(16,29,61,.08)}
  .section-label .hint{font-size:12px;color:var(--slate);margin-left:auto;font-weight:400}
  @media(max-width:680px){.section-label h2{font-size:21px}}
  @media(max-width:820px){.two-col,.three-col{grid-template-columns:1fr}}

  /* ---- BUTTONS ---- */
  .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-bd);background:rgba(255,255,255,.75);color:var(--ink);padding:8px 14px;border-radius:11px;font-size:13px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.15s;text-decoration:none}
  .btn:hover{background:rgba(255,255,255,.95)}
  .btn-primary{background:linear-gradient(120deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(35,86,224,.3)}
  .btn-primary:hover{filter:brightness(1.1)}
  .btn-blue{background:linear-gradient(120deg,var(--blue),var(--sky));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(35,86,224,.3)}
  .btn-blue:hover{filter:brightness(1.08)}
  .btn-ghost{background:rgba(91,141,239,.14);border-color:transparent;color:var(--blue)}
  .btn-danger{background:rgba(224,45,45,.10);border-color:transparent;color:var(--rose)}
  .btn-danger:hover{background:rgba(224,45,45,.18)}
  .btn-sm{padding:5px 10px;font-size:12px}
  .btn-row{display:flex;gap:9px;flex-wrap:wrap}

  /* ---- FORMS ---- */
  .form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
  .field label{display:block;font-size:12px;font-weight:500;color:var(--slate);margin-bottom:5px}
  .field label .req{color:var(--rose)}
  .field input,.field select,.field textarea{width:100%;border:1px solid var(--glass-bd);border-radius:11px;padding:9px 11px;background:rgba(255,255,255,.85);color:var(--ink);transition:.15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--sky-soft)}
  .field textarea{resize:vertical;min-height:38px}
  .field.full{grid-column:1/-1}

  /* ---- TABLE ---- */
  .table-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th{text-align:left;font-weight:700;color:var(--slate);font-size:12.5px;padding:10px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;background:rgba(240,246,253,.9);position:sticky;top:0}
  td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
  tbody tr:hover{background:rgba(234,240,252,.55)}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  .row-act{display:flex;gap:5px}
  .icon-btn{border:none;background:none;padding:4px 6px;border-radius:6px;font-size:13px;color:var(--slate)}
  .icon-btn:hover{background:rgba(224,45,45,.10);color:var(--rose)}
  .empty{text-align:center;color:var(--slate);padding:34px 16px;font-size:13px}
  .empty .ee{font-size:30px;display:block;margin-bottom:8px;opacity:.6}
  tfoot td{font-weight:700;background:rgba(245,249,253,.8);border-top:1.5px solid var(--line)}

  /* ---- BADGES / PILLS ---- */
  .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;font-family:'Kanit'}
  .pill-ok{background:#E2F5EC;color:var(--green)} .pill-open{background:#FDEAEA;color:var(--rose)}
  .pill-new{background:var(--blue-soft);color:var(--blue)}
  .badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;font-family:'Kanit';white-space:nowrap;display:inline-block}
  .b-new{background:var(--blue-soft);color:var(--blue)} .b-risk{background:rgba(224,45,45,.10);color:var(--rose)}
  .b-warn{background:rgba(239,139,12,.13);color:#B26400} .b-ok{background:rgba(14,159,110,.12);color:var(--green)}

  /* เกรดประเมิน S/A/B/C/D */
  .grade-badge{font-family:'Kanit';font-weight:700;font-size:12px;padding:2px 11px;border-radius:99px;color:#fff;display:inline-block}
  .gr-S{background:var(--green)} .gr-A{background:var(--blue)} .gr-B{background:#64748B}
  .gr-C{background:var(--amber)} .gr-D{background:var(--rose)}

  /* ---- KPI cards (dashboard) ---- */
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .kpi{padding:18px 20px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column}
  .kpi::before{content:'';position:absolute;left:0;top:0;height:100%;width:5px}
  .kpi:nth-child(1)::before{background:linear-gradient(var(--blue),var(--sky))}
  .kpi:nth-child(2)::before{background:linear-gradient(var(--green),#5FC98A)}
  .kpi:nth-child(3)::before{background:linear-gradient(var(--amber),#F6B65C)}
  .kpi:nth-child(4)::before{background:linear-gradient(var(--purple),#A78BFA)}
  .kpi .klabel{font-size:13.5px;color:var(--slate);font-weight:650;display:flex;align-items:center;gap:6px}
  .kpi .kval{font-family:'Kanit';font-weight:700;font-size:34px;color:var(--heading);margin-top:8px;line-height:1;letter-spacing:-.5px}
  .kpi .kval small{font-size:15px;color:var(--slate);font-weight:500;letter-spacing:0}
  .kpi .ksub{font-size:12.5px;margin-top:9px;color:var(--slate)}
  .delta{font-weight:700;font-family:'Kanit'} .up{color:var(--green)} .down{color:var(--rose)}
  .mini-wrap{height:60px;margin-top:auto;padding-top:11px}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  @media(max-width:980px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.kpi-grid{grid-template-columns:1fr}}

  /* ---- horizontal bar rows (ใช้กราฟแผนก/สถิติ) ---- */
  .cut-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
  .cut-row:last-child{border-bottom:none}
  .cut-name{width:130px;flex-shrink:0;font-weight:600;font-size:13px}
  .cut-name small{display:block;font-weight:400;color:var(--slate);font-size:11px}
  .cut-track{flex:1;height:24px;background:var(--bg);border-radius:7px;position:relative;overflow:hidden;border:1px solid var(--line)}
  .cut-track .sold{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--sky),var(--blue));display:flex;align-items:center;padding-left:9px;color:#fff;font-size:11px;font-weight:600;font-family:'Kanit';white-space:nowrap}
  .cut-surplus{width:120px;flex-shrink:0;text-align:right;font-size:12.5px}
  .cut-surplus b{font-family:'Kanit';font-weight:700;font-size:15px}
  .surplus-hi b{color:var(--rose)} .surplus-ok b{color:var(--green)} .surplus-mid b{color:var(--amber)}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(120deg,rgba(14,29,64,.94),rgba(29,70,184,.9));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#fff;padding:12px 20px;border-radius:13px;font-size:13.5px;box-shadow:0 10px 34px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:all .25s;z-index:100;display:flex;align-items:center;gap:9px}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .hide{display:none!important}
  .helpbox{background:var(--sky-soft);border:1px solid #CBDCF6;border-radius:11px;padding:12px 15px;font-size:12.5px;color:#27447A;line-height:1.55;display:flex;gap:10px}
  .helpbox .hi{font-size:16px;flex-shrink:0}
  .legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--slate);padding:10px 4px 0}
  .legend span{display:flex;align-items:center;gap:6px}

  /* ---- range bar (ตัวกรองช่วงเวลา) ---- */
  .range-bar{background:var(--card);border:1px solid var(--glass-bd);border-radius:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:11px 14px;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .rg-presets{display:flex;gap:7px;flex-wrap:wrap}
  .rg-pill{border:1px solid var(--glass-bd);background:rgba(255,255,255,.7);color:var(--slate);padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:500;text-decoration:none}
  .rg-pill:hover{background:var(--sky-soft);color:var(--blue)}
  .rg-pill.on{background:var(--navy);color:#fff;border-color:var(--heading)}
  .rg-custom{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
  .rg-cal{font-size:16px}
  .rg-custom input[type=date],.rg-custom input[type=month]{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;color:var(--ink)}
  .rg-custom input[type=date]:focus,.rg-custom input[type=month]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sky-soft)}
  .rg-dash{font-size:12.5px;color:var(--slate)}
  @media(max-width:820px){.rg-custom{margin-left:0;width:100%}.rg-custom input[type=date]{flex:1;min-width:0}}

  /* ---- insight callout ---- */
  .insight{background:linear-gradient(135deg,rgba(255,248,236,.9),rgba(255,243,220,.9));border:1px solid #F2D9A8;border-radius:13px;padding:13px 16px;display:flex;gap:11px;align-items:flex-start}
  .insight .ic{font-size:17px;flex-shrink:0}
  .insight .it{font-size:12.5px;color:#7A5510;line-height:1.55} .insight .it b{color:#9A6A12}

  /* ---- movement list (แถวสรุปซ้าย-ขวา) ---- */
  .move-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:500}
  .move-row:last-child{border-bottom:none}
  .move-row b{font-family:'Kanit'}

  /* ---- avatar in tables ---- */
  .rep-ava{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-family:'Kanit';font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;vertical-align:middle}
  .pct-good{color:var(--green);font-weight:600} .pct-mid{color:var(--amber);font-weight:600} .pct-low{color:var(--rose);font-weight:600}

  /* ---- section header dark (การ์ดหัวเข้ม) ---- */
  .carcass-wrap{overflow:hidden;padding:0}
  .carcass-head{background:linear-gradient(135deg,var(--navy),var(--blue-2));color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .carcass-head h3{color:#fff;font-size:15px;font-weight:600}
  .carcass-head .ch-sub{font-size:12px;color:#B4C6EC;margin-top:2px}
  .carcass-head .produce{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:11px;text-align:center}
  .carcass-head .produce b{font-family:'Kanit';font-size:22px;font-weight:700;display:block;line-height:1}
  .carcass-head .produce span{font-size:11px;color:#C7D4EC}

  /* ============================================================
     LOGIN — split brand / form (น้ำเงิน-ขาว)
     ============================================================ */
  .lg-split{position:fixed;inset:0;z-index:200;display:flex;background:#0A1430;font-family:'Anuphan',sans-serif}

  .lg-brand{flex:1.06;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    padding:46px 52px;color:#fff;overflow:hidden;
    background:
      radial-gradient(680px 520px at 18% 12%, rgba(35,86,224,.45), transparent 62%),
      radial-gradient(820px 720px at 92% 98%, rgba(6,14,34,.9), transparent 60%),
      radial-gradient(1300px 1000px at 46% 46%, #16336E 0%, #0E2350 42%, #081434 78%, #050B1C 100%)}
  .lg-brand::before{content:'';position:absolute;z-index:2;width:480px;height:480px;border-radius:50%;border:1px solid rgba(255,255,255,.07);top:-150px;right:-150px;pointer-events:none}
  .lg-brand::after{content:'';position:absolute;z-index:2;width:340px;height:340px;border-radius:50%;border:1px solid rgba(143,179,245,.18);bottom:-110px;left:-90px;pointer-events:none}

  /* แสงฟ้าเรืองด้านล่าง (บรรยากาศนุ่ม ๆ) */
  .lg-blue-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(720px 520px at 26% 100%, rgba(53,113,255,.4), transparent 62%),
      radial-gradient(460px 360px at 66% 86%, rgba(94,150,255,.24), transparent 58%),
      radial-gradient(300px 240px at 12% 78%, rgba(53,113,255,.16), transparent 60%);
    animation:lgGlow 8s ease-in-out infinite}
  @keyframes lgGlow{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.95;transform:translateY(-2%)}}
  .lg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg, rgba(4,10,26,.6) 0%, rgba(4,10,26,.28) 52%, transparent 100%)}
  @media (prefers-reduced-motion: reduce){ .lg-blue-glow{animation:none;opacity:.6} }

  .lg-top{position:relative;z-index:3;display:flex;align-items:center;gap:13px;margin-bottom:auto}
  .lg-wordmark{display:flex;flex-direction:column;line-height:1.05}
  .lg-wordmark b{font-family:'Kanit',sans-serif;font-weight:900;font-size:30px;letter-spacing:1.5px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
  .lg-wordmark span{font-size:12.5px;letter-spacing:1px;color:#8FB3F5;font-weight:700;margin-top:4px}

  .lg-hero{position:relative;z-index:3;max-width:560px}
  .lg-headline{font-family:'Kanit',sans-serif;font-weight:800;font-size:40px;line-height:1.2;letter-spacing:-.3px;
    text-shadow:0 2px 10px rgba(0,0,0,.28)}
  .lg-lead{font-size:15.5px;line-height:1.7;color:#C6D6F2;margin-top:16px;max-width:480px}
  .lg-feats{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
  .lg-feat .fv{font-family:'Kanit',sans-serif;font-weight:800;font-size:24px;color:#fff;line-height:1}
  .lg-feat .fl{font-size:11px;letter-spacing:1px;color:#93B4E8;margin-top:6px}

  .lg-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 34px;
    background:radial-gradient(700px 560px at 70% 18%, #F0F5FC, transparent 60%),linear-gradient(135deg,#E7EEF9,#D7E3F4)}
  .lg-card{width:100%;max-width:392px}

  .lg-brandhead{margin-bottom:20px;text-align:left}
  .lg-brandhead-name{font-family:'Kanit',sans-serif;font-weight:900;font-size:34px;letter-spacing:.5px;color:#0A0F1C;line-height:1.05}
  .lg-brandhead-sub{font-family:'Kanit',sans-serif;font-weight:700;font-size:13px;letter-spacing:2.5px;color:#1A2540;margin-top:4px}
  .lg-head{margin-bottom:22px}
  .lg-head h2{font-family:'Kanit',sans-serif;font-weight:700;font-size:28px;color:var(--heading);line-height:1.1}
  .lg-head p{font-size:14px;color:var(--slate);margin-top:5px}
  .lg-head p b{color:var(--heading);font-weight:600}
  .lg-field{margin-bottom:15px}
  .lg-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--slate);margin-bottom:7px}
  .lg-field input{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;font-size:14.5px;background:#fff;color:var(--ink);transition:.15s}
  .lg-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--sky-soft)}
  .lg-err{background:#FDEAEA;border:1px solid #F3C0BC;color:#B0291B;font-size:13px;font-weight:500;padding:10px 13px;border-radius:11px;margin-bottom:14px}
  .lg-btn{width:100%;margin-top:16px;background:linear-gradient(120deg,#2356E0,#5B8DEF);color:#fff;border:none;border-radius:14px;padding:14px;font-family:'Kanit',sans-serif;font-weight:600;font-size:15.5px;box-shadow:0 12px 28px rgba(35,86,224,.34);cursor:pointer;transition:.15s}
  .lg-btn:hover{filter:brightness(1.08)}
  .lg-foot{text-align:center;font-size:11.5px;color:var(--slate);margin-top:16px;opacity:.8}

  /* ปุ่มสลับไประบบ CRM (ลิงก์ไขว้) */
  .lg-crosslink{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:13px;
    background:rgba(255,255,255,.75);border:1.5px dashed rgba(35,86,224,.4);color:var(--ink);text-decoration:none;
    font-size:13px;line-height:1.35;transition:.15s}
  .lg-crosslink:hover{background:#fff;border-style:solid;box-shadow:0 8px 22px rgba(35,86,224,.16)}
  .lg-crosslink b{color:var(--blue-2);font-family:'Kanit'}
  .lg-crosslink small{color:var(--slate)}
  .lg-crosslink-ico{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#7C3AED,#5B21B6);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}

  @media(max-width:880px){
    .lg-split{flex-direction:column;position:absolute;min-height:100vh;height:auto}
    .lg-brand{flex:none;padding:30px 26px 30px;justify-content:flex-start}
    .lg-top{margin-bottom:24px}
    .lg-headline{font-size:28px}
    .lg-lead{font-size:14px;margin-top:12px}
    .lg-feats{gap:20px;margin-top:20px;padding-top:18px}
    .lg-feat .fv{font-size:19px}
    .lg-brand::before,.lg-brand::after{display:none}
    .lg-form-side{flex:none;padding:30px 22px 46px}
  }

  /* ---- เอกสาร A4 สำหรับพิมพ์ (สลิป/หนังสือรับรอง/รายงาน) ---- */
  .a4-doc{background:#fff;max-width:820px;margin:0 auto;padding:48px 56px;border:1px solid var(--line);border-radius:12px;color:#111;box-shadow:var(--shadow)}
  .a4-doc h1,.a4-doc h2,.a4-doc h3{color:#111}
  @media print{
    .topbar,.sidebar,.toast,.no-print,.flash-wrap,.bottomnav{display:none!important}
    .shell{display:block}
    .main{padding:0}
    body{background:#fff}
    body::before{display:none}
    .a4-doc{border:none;border-radius:0;box-shadow:none;max-width:none;padding:0}
    .card{box-shadow:none;border:1px solid #ddd;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  }

  /* ---- แถบเมนูล่าง (Bottom Navigation) — เฉพาะมือถือ ---- */
  .bottomnav{display:none}
  @media(max-width:820px){
    .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:44;
      background:var(--glass-2);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
      border-top:1px solid var(--glass-bd);box-shadow:0 -6px 22px rgba(20,50,120,.12);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px))}
    .bottomnav .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
      background:none;border:none;text-decoration:none;color:var(--slate);font-size:10.5px;font-weight:600;
      padding:5px 2px;border-radius:10px;cursor:pointer;font-family:inherit;min-width:0}
    .bottomnav .bn-item .bn-ic{font-size:20px;line-height:1;transition:transform .15s}
    .bottomnav .bn-item .bn-lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .bottomnav .bn-item:active{background:var(--sky-soft)}
    .bottomnav .bn-item.on{color:var(--blue)}
    .bottomnav .bn-item.on .bn-ic{transform:translateY(-2px) scale(1.06)}
    /* เผื่อพื้นที่ท้ายหน้าไม่ให้เนื้อหาถูกแถบล่างบัง (ทับ .main มือถือด้านบนด้วยลำดับหลัง) */
    .main{padding-bottom:80px}
  }