:root{
    --navy:#16294B; --navy-2:#1E3A66; --blue:#2F6BC4; --sky:#5B9BD5; --sky-2:#86BBE6;
    --sky-soft:#EAF3FC; --blue-soft:#E8F0FB; --slate:#3D5270; --line:rgba(100,130,175,.25);
    --bg:#E8F1FB; --card:rgba(255,255,255,.52); --ink:#16294B; --green:#1E9E5A; --amber:#E08A1E; --rose:#D9483B;
    --gold:#C9A227; --gold-2:#E7C65A; --gold-deep:#8B6914;
    --glass:rgba(255,255,255,.50); --glass-2:rgba(255,255,255,.72); --glass-bd:rgba(255,255,255,.66);
    --blur:blur(22px) saturate(165%);
    --shadow:0 2px 8px rgba(30,70,130,.06),0 14px 38px rgba(30,70,130,.10);
    --shadow-lux:0 1px 0 rgba(255,255,255,.65) inset,0 2px 10px rgba(30,70,130,.07),0 20px 48px rgba(30,70,130,.14);
    --sidebar-w:272px;
    /* themeable surfaces — #1 lighter app bg, #3 dark gradient sidebar, headings split from brand navy */
    --heading:var(--navy);
    --app-bg:linear-gradient(135deg,#F3F8FD 0%,#E9F2FB 44%,#EFF6FD 72%,#FAFCFE 100%);
    --glow-1:rgba(91,155,213,.20); --glow-2:rgba(47,107,196,.15); --glow-3:rgba(134,187,230,.18); --glow-4:rgba(176,202,234,.18);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.34));
    --card-top:rgba(255,255,255,.92); --card-sheen:rgba(255,255,255,.45);
    --sidebar-bg:linear-gradient(172deg,#0c2c5c 0%,#154a95 38%,#1f5fb2 82%);
    --sidebar-text:#CFE0FB; --sidebar-strong:#FFFFFF; --sidebar-group:#9BB7E6; --sidebar-hover:rgba(255,255,255,.12); --sidebar-bd:rgba(255,255,255,.10);
  }

  /* ===== #2 DARK MODE — flips surfaces/text, keeps brand accents (navy bg stays) ===== */
  [data-theme="dark"]{
    color-scheme:dark;
    --bg:#0E1A2E; --ink:#E4ECF7; --heading:#DCE7F6; --slate:#9FB2CD;
    --line:rgba(130,160,200,.20); --sky-soft:rgba(47,107,196,.20); --blue-soft:rgba(47,107,196,.15);
    --card:rgba(26,40,64,.55);
    --glass:rgba(26,40,64,.52); --glass-2:rgba(30,46,72,.70); --glass-bd:rgba(130,160,200,.18);
    --app-bg:linear-gradient(135deg,#0E1A2E 0%,#0B1729 46%,#101F38 100%);
    --glow-1:rgba(47,107,196,.20); --glow-2:rgba(36,72,128,.22); --glow-3:rgba(47,107,196,.14); --glow-4:rgba(22,41,75,.30);
    --card-grad:linear-gradient(160deg,rgba(42,58,86,.60),rgba(26,40,64,.42));
    --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);
  }
  /* Cool mode — โทนฟ้า-ลาเวนเดอร์พาสเทล (ธีมสว่าง) + sidebar ดำชาร์โคล */
  [data-theme="cool"]{
    color-scheme:light;
    --heading:#12192B; --ink:#182140; --slate:#47536C;
    --bg:#FFFFFF; --line:rgba(120,140,180,.26); --sky-soft:#EEF1FB; --blue-soft:#EDEFFB;
    --app-bg:#FFFFFF;
    --glow-1:rgba(150,170,240,.14); --glow-2:rgba(120,150,235,.10); --glow-3:rgba(180,170,235,.12); --glow-4:rgba(170,210,200,.10);
    --card:rgba(248,250,255,.92);
    --glass:rgba(250,251,255,.88); --glass-2:rgba(255,255,255,.94); --glass-bd:rgba(200,212,240,.55);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.96),rgba(242,246,253,.85));
    --card-top:rgba(255,255,255,.98); --card-sheen:rgba(238,242,252,.55);
    --shadow:0 2px 10px rgba(70,90,150,.08),0 16px 40px rgba(70,90,150,.13);
    --shadow-lux:0 1px 0 rgba(255,255,255,.9) inset,0 2px 12px rgba(70,90,150,.09),0 22px 50px rgba(70,90,150,.15);
    --sidebar-bg:linear-gradient(190deg,#24262E 0%,#1B1D23 58%,#141519 100%);
    --sidebar-text:#AEB6C6; --sidebar-strong:#F4F6FA; --sidebar-group:#7C8696; --sidebar-hover:rgba(255,255,255,.07); --sidebar-bd:rgba(255,255,255,.06);
  }
  [data-theme="pink"]{
    color-scheme:light;
    --heading:#2E1220; --ink:#33162A; --slate:#6B4058;
    --bg:#FFFFFF; --line:rgba(205,150,180,.26); --sky-soft:#FDEEF5; --blue-soft:#FCEAF2;
    --app-bg:#FFFFFF;
    --glow-1:rgba(246,172,206,.16); --glow-2:rgba(240,158,196,.11); --glow-3:rgba(226,176,216,.13); --glow-4:rgba(250,204,218,.11);
    --card:rgba(255,248,251,.92);
    --glass:rgba(255,250,252,.88); --glass-2:rgba(255,255,255,.94); --glass-bd:rgba(240,190,215,.55);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.96),rgba(253,240,247,.85));
    --card-top:rgba(255,255,255,.98); --card-sheen:rgba(253,235,244,.55);
    --shadow:0 2px 10px rgba(180,90,140,.08),0 16px 40px rgba(180,90,140,.13);
    --shadow-lux:0 1px 0 rgba(255,255,255,.9) inset,0 2px 12px rgba(180,90,140,.09),0 22px 50px rgba(180,90,140,.15);
    --sidebar-bg:linear-gradient(190deg,#FCE0EC 0%,#F8CBE0 55%,#F4B9D3 100%);
    --sidebar-text:#5C2A46; --sidebar-strong:#2E0F22; --sidebar-group:#8A4A68; --sidebar-hover:rgba(120,30,80,.10); --sidebar-bd:rgba(120,40,90,.18);
  }
  /* PURPLE mode — ม่วงพาสเทลลาเวนเดอร์ พื้นหลังขาวบริสุทธิ์ (ธีมสว่าง) + sidebar ลาเวนเดอร์อ่อน */
  [data-theme="purple"]{
    color-scheme:light;
    --heading:#3A2170; --ink:#3C2472; --slate:#6B5A9E;
    --bg:#FFFFFF; --line:rgba(170,150,220,.30); --sky-soft:#F3EFFC; --blue-soft:#EFEAFB;
    --app-bg:#FFFFFF;
    --glow-1:rgba(190,170,240,.20); --glow-2:rgba(168,145,235,.14); --glow-3:rgba(205,188,244,.15); --glow-4:rgba(214,200,246,.13);
    --card:rgba(250,248,255,.92);
    --glass:rgba(251,249,255,.88); --glass-2:rgba(255,255,255,.94); --glass-bd:rgba(206,190,240,.55);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.96),rgba(245,241,252,.85));
    --card-top:rgba(255,255,255,.98); --card-sheen:rgba(242,236,251,.55);
    --shadow:0 2px 10px rgba(120,90,200,.10),0 16px 40px rgba(120,90,200,.14);
    --shadow-lux:0 1px 0 rgba(255,255,255,.9) inset,0 2px 12px rgba(120,90,200,.10),0 22px 50px rgba(120,90,200,.15);
    --sidebar-bg:linear-gradient(190deg,#ECE6FB 0%,#D6CAF5 55%,#C3B2F0 100%);
    --sidebar-text:#4A3A82; --sidebar-strong:#2A1B5A; --sidebar-group:#8677B5; --sidebar-hover:rgba(90,60,180,.10); --sidebar-bd:rgba(90,60,170,.16);
  }
  /* GREEN mode — เขียวพาสเทลสดใส (สปริงกรีน) พื้นหลังขาวบริสุทธิ์ + sidebar เขียวสว่าง */
  [data-theme="green"]{
    color-scheme:light;
    --heading:#124A2C; --ink:#154E30; --slate:#3E8260;
    --bg:#FFFFFF; --line:rgba(120,215,165,.32); --sky-soft:#E8FCF0; --blue-soft:#E4FAEC;
    --app-bg:#FFFFFF;
    --glow-1:rgba(120,230,170,.22); --glow-2:rgba(90,220,150,.15); --glow-3:rgba(150,236,190,.16); --glow-4:rgba(180,242,205,.14);
    --card:rgba(247,255,250,.92);
    --glass:rgba(248,255,251,.88); --glass-2:rgba(255,255,255,.94); --glass-bd:rgba(160,228,190,.55);
    --card-grad:linear-gradient(160deg,rgba(255,255,255,.96),rgba(238,252,244,.85));
    --card-top:rgba(255,255,255,.98); --card-sheen:rgba(232,250,240,.55);
    --shadow:0 2px 10px rgba(40,175,105,.11),0 16px 40px rgba(40,175,105,.15);
    --shadow-lux:0 1px 0 rgba(255,255,255,.9) inset,0 2px 12px rgba(40,175,105,.11),0 22px 50px rgba(40,175,105,.16);
    --sidebar-bg:linear-gradient(190deg,#DCFBE7 0%,#B2F3CB 52%,#8FEDB4 100%);
    --sidebar-text:#1B6A42; --sidebar-strong:#0E3A22; --sidebar-group:#4FA278; --sidebar-hover:rgba(20,150,85,.12); --sidebar-bd:rgba(20,140,80,.18);
  }
  *{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,rgba(22,41,75,.80),rgba(36,72,128,.72));
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 6px 26px rgba(20,40,80,.20)}
  .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:#B4C7E4;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}
  .save-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:7px 12px;border-radius:11px;font-size:12px}
  .save-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(30,158,90,.75)}
  .save-chip.warn .dot{background:var(--amber)}
  .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}
  .logout-btn{background:rgba(255,255,255,.14);border:none;color:#fff;width:28px;height:28px;border-radius:8px;font-size:15px}
  .logout-btn:hover{background:var(--rose)}
  @media(max-width:820px){.user-chip .uname{display:none}.brand .b2{display:none}}

  /* LOGIN SCREEN */
  .login-screen{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(800px 620px at 18% 8%, #27548F, transparent 60%),radial-gradient(720px 620px at 86% 92%, #2F6BC4, transparent 56%),linear-gradient(160deg,#16294B,#0C1830)}
  .login-screen.hide{display:none!important}
  .login-card{background:rgba(255,255,255,.13);border-radius:24px;box-shadow:0 26px 74px rgba(0,0,0,.46);padding:34px 28px;width:100%;max-width:372px;text-align:center;border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);color:#fff}
  .login-logo{height:76px;width:auto;margin-bottom:14px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
  .login-title{font-family:'Kanit';font-weight:700;font-size:21px;color:#fff}
  .login-sub{font-size:13px;color:#C7D8EE;margin-bottom:20px}
  .login-field{text-align:left;margin-bottom:13px}
  .login-field label{display:block;font-size:12px;font-weight:500;color:#C7D8EE;margin-bottom:5px}
  .login-field input{width:100%;border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:11px 13px;font-size:14px;background:rgba(255,255,255,.16);color:#fff}
  .login-field input::placeholder{color:rgba(255,255,255,.6)}
  .login-field input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.24)}
  .login-remember{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#C7D8EE;text-align:left;margin-bottom:6px;cursor:pointer}
  .login-remember input{width:15px;height:15px}
  .login-err{color:#FFB4AC;font-size:12.5px;min-height:18px;margin:4px 0;font-weight:500}
  .login-btn{width:100%;background:linear-gradient(120deg,#2F6BC4,#5B9BD5);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:13px;padding:12px;font-family:'Kanit';font-weight:600;font-size:15px;margin-top:4px;box-shadow:0 10px 24px rgba(47,107,196,.5)}
  .login-btn:hover{filter:brightness(1.08)}
  .login-hint{font-size:11.5px;color:#AFC4E2;margin-top:14px;line-height:1.5}
  .login-foot{color:#9DB4D6;font-size:12px;margin-top:20px}

  /* ---- 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:20px 2px 10px;display:flex;justify-content:center}
  .sb-logo-block{text-align:center;width:100%}
  /* transparent PNG logo — no white frame, sits directly on the sidebar */
  .sb-logo-img-wrap{display:inline-flex;justify-content:center;width:100%;background:transparent;border:0;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
  .sb-logo{width:100%;max-width:258px;height:auto;display:block}
  /* #14 — COWPHET CRM 2026: larger, luxurious gold lettering */
  /* wordmark: ขาวมีมิติ (embossed) — อ่านได้ทั้งสไลด์บาร์ขาว(ผลิต) และน้ำเงิน(หน้าหลัก) */
  .sb-brand-text{font-family:'Kanit',sans-serif;font-weight:900;font-size:22px;
    letter-spacing:2px;text-transform:uppercase;margin-top:14px;padding:0;line-height:1.22;
    color:#FFFFFF;
    text-shadow:
      0 -1px 0 rgba(255,255,255,.6),
      0 1px 1px rgba(26,42,72,.55),
      1px 1px 2px rgba(26,42,72,.42),
      0 3px 10px rgba(16,36,66,.38),
      0 0 2px rgba(26,42,72,.48)}
  .sb-brand-text .yr{display:block;font-size:14px;letter-spacing:5px;font-weight:600;margin-top:3px;color:#EEF3FA;
    text-shadow:0 1px 1px rgba(26,42,72,.5),0 -1px 0 rgba(255,255,255,.55),0 2px 7px rgba(16,36,66,.32)}
  .sb-brand-rule{width:64%;height:2px;margin:9px auto 2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(150,168,196,.55),rgba(200,212,232,.9),rgba(150,168,196,.55),transparent);opacity:.85}
  .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:10px 12px;border-radius:12px;font-size:14.5px;color:var(--sidebar-text);font-weight:550;margin-bottom:2px;transition:background .16s,box-shadow .16s,color .16s;text-decoration:none}
  /* #15 — refined line icons */
  .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(217,72,59,.26);color:#FFC9C2;box-shadow:0 0 0 1px rgba(217,72,59,.34) inset}
  .nav-item.active .ni-count.alert{background:rgba(255,255,255,.26);color:#fff;box-shadow:none}
  .nav-item.is-soon{opacity:.66}
  .nav-item.is-soon:hover{opacity:.9}
  .nav-item.is-soon .ni-ico{opacity:.6}
  .nav-item .ni-soon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.3px;color:var(--sidebar-text);background:rgba(255,255,255,.12);padding:2px 7px;border-radius:99px;font-family:'Kanit';white-space:nowrap}
  .nav-item.active .ni-soon{background:rgba(255,255,255,.24);color:#fff}
  .pm-exit{display:flex;align-items:center;gap:8px;margin:0 10px 10px;padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--sidebar-text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;transition:background .15s,color .15s}
  .pm-exit:hover{background:rgba(255,255,255,.12);color:var(--sidebar-strong)}
  .pm-exit span{font-size:15px;line-height:1}
  .pm-modhead{margin:0 12px 12px;padding:10px 13px;border-radius:12px;font-family:'Kanit';font-weight:700;font-size:13px;letter-spacing:.3px;color:#fff;background:linear-gradient(120deg,#1EA362,#137A44);display:flex;align-items:center;gap:8px;box-shadow:0 6px 16px rgba(30,163,98,.32)}
  .pm-modbadge{font-size:16px}
  .nav-item .ni-ico.ni-emoji{font-size:17px;background:rgba(255,255,255,.08)}
  .nav-item.active .ni-ico.ni-emoji{background:rgba(255,255,255,.20)}
  .sidebar-pm .nav-item.active{background:linear-gradient(120deg,rgba(30,163,98,.96),rgba(39,184,114,.92));box-shadow:0 10px 22px rgba(30,163,98,.34),0 1px 0 rgba(255,255,255,.3) inset}
  .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:linear-gradient(120deg,rgba(47,107,196,.96),rgba(91,155,213,.92));color:#fff;box-shadow:0 10px 22px rgba(47,107,196,.34),0 1px 0 rgba(255,255,255,.3) inset;font-weight:600}
  .nav-item.active .ni-ico{color:#fff;background:rgba(255,255,255,.18)}
  .nav-item.active .ni-count{background:rgba(255,255,255,.24);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(20,40,80,.28)}
    .main{padding:16px 14px 50px}
    .clock{display:none}
  }
  /* ---- มือถือ: เว้นที่ให้ bottom tab bar + ซ่อนปุ่มธีมบน topbar (ย้ายไป drawer) + กระชับ ---- */
  @media(max-width:640px){
    .main{padding:14px 12px calc(86px + env(safe-area-inset-bottom))}
    .tb-themes{display:none}
    body.drawer-open{overflow:hidden}
    .card-pad{padding:13px 14px}
    .chart-box{height:200px}
    .section-label{margin:20px 2px 12px}
    .section-label h2{font-size:19px}
    .page-head{margin-bottom:12px}
  }

  /* ---- 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}
  .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:20px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    box-shadow:var(--shadow-lux)}
  /* liquid-glass sheen — a soft diagonal light streak across every frame */
  .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,.06) 26%,transparent 50%);mix-blend-mode:screen;opacity:.8}
  .card>*{position:relative;z-index:1}
  .card.carcass-wrap::after{display:none}
  .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:minmax(0,1fr) minmax(0,1fr)}
  .three-col{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,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(47,107,196,.3)}
  /* #13 — large, slim, dimensional section titles */
  .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(22,41,75,.13),0 3px 12px rgba(22,41,75,.08)}
  .section-label .hint{font-size:12px;color:var(--slate);margin-left:auto;font-weight:400}
  /* #13 — page titles: slimmer + dimensional too */
  .page-head h2{text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(22,41,75,.10)}
  @media(max-width:680px){.section-label h2{font-size:21px}}
  @media(max-width:820px){.two-col,.three-col{grid-template-columns:minmax(0,1fr)}}

  /* ---- BUTTONS ---- */
  .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-bd);background:rgba(255,255,255,.6);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}
  .btn:hover{background:rgba(255,255,255,.85)}
  .btn-primary{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(22,41,75,.28)}
  .btn-primary:hover{filter:brightness(1.12)}
  .btn-blue{background:linear-gradient(120deg,var(--blue),var(--sky));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(47,107,196,.3)}
  .btn-blue:hover{filter:brightness(1.08)}
  .btn-ghost{background:rgba(91,155,213,.16);border-color:transparent;color:var(--blue)}
  .btn-danger{background:rgba(217,72,59,.12);border-color:transparent;color:var(--rose)}
  .btn-danger:hover{background:rgba(217,72,59,.2)}
  .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,.66);color:var(--ink);transition:.15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.92);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,.85);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(255,255,255,.5)}
  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(217,72,59,.12);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}

  /* ---- BADGES ---- */
  .seg-badge{font-family:'Kanit';font-weight:700;font-size:11px;padding:2px 9px;border-radius:99px;color:#fff;display:inline-block}
  .sg-A{background:var(--green)} .sg-B{background:#7FAE3E} .sg-C{background:var(--amber)}
  .sg-D{background:var(--rose)} .sg-E{background:#8A95A4} .sg-N{background:var(--blue)}
  .sg-T{background:#5B8FD6} .sg-DL{background:var(--navy)}
  /* seg-lg — เกรดเด่นชัดในหน้ารายชื่อลูกค้า (ชิปใหญ่ สี่เหลี่ยมมน) */
  .seg-badge.seg-lg{font-size:14px;font-weight:800;min-width:36px;padding:5px 8px;border-radius:9px;text-align:center;letter-spacing:.3px;box-shadow:0 2px 6px rgba(20,41,75,.2)}
  .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;font-family:'Kanit'}
  .pill-ok{background:#E4F4EA;color:var(--green)} .pill-open{background:#FCE9E7;color:var(--rose)}
  .pill-new{background:var(--blue-soft);color:var(--blue)}

  /* ---- KPI ---- */
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .kpi{padding:24px 26px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:196px}
  .kpi::before{content:'';position:absolute;left:0;top:0;height:100%;width:6px}
  .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(--navy),var(--blue))}
  .kpi:nth-child(4)::before{background:linear-gradient(var(--amber),#F2B24C)}
  .kpi .klabel{font-size:14.5px;color:var(--slate);font-weight:650;display:flex;align-items:center;gap:6px}
  .kpi .kval{font-family:'Kanit';font-weight:700;font-size:46px;color:var(--heading);margin-top:12px;line-height:1;letter-spacing:-.5px}
  .kpi .kval small{font-size:18px;color:var(--slate);font-weight:500;letter-spacing:0}
  .kpi .ksub{font-size:13px;margin-top:11px;color:var(--slate)}
  .delta{font-weight:700;font-family:'Kanit'} .up{color:var(--green)} .down{color:var(--rose)}
  .mini-wrap{height:64px;margin-top:auto;padding-top:12px}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  @media(max-width:980px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi{min-height:180px;padding:20px 22px 18px}.kpi .kval{font-size:40px}}
  /* มือถือ: คง KPI เป็น 2×2 (แบบตัวอย่างแอป) + ย่อให้กระชับ */
  @media(max-width:640px){
    .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .kpi{min-height:auto;padding:13px 14px 12px}
    .kpi::before{width:4px}
    .kpi .klabel{font-size:11.5px;gap:5px}
    .kpi .kval{font-size:27px;margin-top:7px}
    .kpi .kval small{font-size:13px}
    .kpi .ksub{font-size:11px;margin-top:6px}
    .mini-wrap{height:40px;padding-top:8px}
  }
  @media(max-width:360px){.kpi-grid{grid-template-columns:1fr}}

  .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'}
  .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(22,41,75,.92),rgba(36,72,128,.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 #CFE2F6;border-radius:11px;padding:12px 15px;font-size:12.5px;color:#2A4E78;line-height:1.55;display:flex;gap:10px}
  .helpbox .hi{font-size:16px;flex-shrink:0}
  .line-items{margin-top:6px}
  .li-row{display:grid;grid-template-columns:1.6fr .8fr .9fr auto;gap:8px;margin-bottom:7px;align-items:center}
  .li-row .icon-btn{justify-self:center}
  .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,.5);color:var(--slate);padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:500}
  .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]{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;color:var(--ink)}
  .rg-custom input[type=date]: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}}

  /* report */
  .report-actions{display:flex;gap:9px;flex-wrap:wrap}
  .report-pre{font-family:'Anuphan','Courier New',monospace;font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-wrap:break-word;padding:18px 20px;margin:0;max-height:none}

  /* production cut entry */
  .prod-head{display:grid;grid-template-columns:1.5fr 1fr .8fr .9fr 32px;gap:8px;font-size:11px;font-weight:600;color:var(--slate);padding:0 2px 4px}
  .prod-row{display:grid;grid-template-columns:1.5fr 1fr .8fr .9fr 32px;gap:8px;margin-bottom:7px;align-items:center}
  .prod-row input,.prod-row select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
  .prod-row input:focus,.prod-row select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sky-soft)}
  @media(max-width:680px){.prod-head{display:none}.prod-row{grid-template-columns:1fr 1fr;gap:6px}.prod-row .icon-btn{grid-column:2;justify-self:end}}
  /* order bill lines: extra per-item discount column (scoped — production form keeps its 5-col grid) */
  .prod-head.with-disc,.prod-row.with-disc{grid-template-columns:1.4fr .82fr .78fr .78fr .8fr .85fr 32px}
  @media(max-width:680px){.prod-row.with-disc{grid-template-columns:1fr 1fr}}

  /* forecast allocation */
  .fc-search{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:0 11px;margin-left:auto}
  .fc-search input{border:none;background:none;padding:8px 0;outline:none;font-size:13px;width:200px}
  .fc-cut{border:1px solid var(--line);border-radius:12px;margin:0 18px 14px;overflow:hidden}
  .fc-cut:first-child{margin-top:16px}
  .fc-cut-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 14px;background:var(--sky-soft);border-bottom:1px solid var(--line)}
  .fc-cut-head b{font-family:'Kanit';color:var(--heading);font-size:14px}
  .fc-sumbox{font-size:12.5px;color:var(--slate)}
  .fc-sumbox b{font-family:'Kanit'}
  .fc-sumbox b.surplus-hi{color:var(--rose)} .fc-sumbox b.surplus-mid{color:var(--amber)} .fc-sumbox b.surplus-ok{color:var(--green)}
  .fc-rows{padding:6px 14px}
  .fc-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
  .fc-row:last-child{border-bottom:none}
  .fc-name{flex:1;font-size:13px;font-weight:500}
  .fc-name small{display:block;color:var(--slate);font-weight:400;font-size:11px}
  .fc-row input{width:96px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;text-align:right}
  .fc-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sky-soft)}
  .fc-empty{font-size:12.5px;color:var(--slate);padding:8px 0}
  .fc-add{padding:8px 14px 12px}
  .fc-add select{border:1px dashed var(--line);border-radius:8px;padding:7px 11px;color:var(--blue);background:#fff;font-size:12.5px}

  /* badges (shared) */
  .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(217,72,59,.12);color:var(--rose)}
  .b-warn{background:rgba(224,138,30,.14);color:#B9740F} .b-ok{background:rgba(30,158,90,.13);color:var(--green)}

  /* gap calculator */
  .lever{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .lev-box{background:rgba(255,255,255,.45);border:1px solid var(--glass-bd);border-radius:13px;padding:15px 16px}
  .lev-box .lt{font-size:12.5px;color:var(--slate);font-weight:500}
  .lev-box .lnow{font-family:'Kanit';font-weight:700;font-size:30px;color:var(--heading);margin-top:6px;line-height:1;letter-spacing:-.5px}
  .lev-box .lnow .to{color:var(--rose)}
  .lev-box .lneed{font-size:12.5px;margin-top:8px;color:var(--slate)} .lev-box .lneed b{color:var(--rose);font-family:'Kanit'}
  .formula{background:linear-gradient(120deg,rgba(22,41,75,.95),rgba(36,72,128,.92));color:#fff;border-radius:13px;padding:15px 18px;margin-top:14px;font-family:'Kanit';font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
  .formula b{color:#FFC861;font-size:17px} .formula .eq{color:#9DB6DA}
  @media(max-width:680px){.lever{grid-template-columns:1fr}}

  /* insight callout */
  .insight{background:linear-gradient(135deg,rgba(255,248,236,.85),rgba(255,243,220,.85));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}

  /* segment board */
  .seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .segc{padding:13px 14px;border-radius:14px;border:1px solid var(--glass-bd);background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow)}
  .segc .seg-top{display:flex;align-items:center;gap:9px}
  .segc .code{font-family:'Kanit';font-weight:700;font-size:13px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
  .segc .seg-name{font-size:12px;font-weight:500;color:var(--ink);line-height:1.25}
  .segc .seg-num{font-family:'Kanit';font-weight:700;font-size:28px;margin-top:9px;color:var(--heading);letter-spacing:-.5px}
  .segc .seg-mv{font-size:11.5px;margin-top:2px;font-weight:600}
  @media(max-width:900px){.seg-grid{grid-template-columns:repeat(2,1fr)}}

  /* movement list */
  .move-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
  .move-row:last-child{border-bottom:none}
  .move-row b{font-family:'Kanit'}

  /* rep table extras */
  .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}
  .closebar{height:6px;background:rgba(120,150,190,.2);border-radius:99px;width:62px;display:inline-block;overflow:hidden;vertical-align:middle;margin-left:7px}
  .closebar i{display:block;height:100%;border-radius:99px}
  .pct-good{color:var(--green);font-weight:600} .pct-mid{color:var(--amber);font-weight:600} .pct-low{color:var(--rose);font-weight:600}
  tfoot td{font-weight:700;background:rgba(245,249,253,.7);border-top:1.5px solid var(--line)}

  /* eye link */
  .eye{border:none;background:rgba(91,155,213,.14);color:var(--blue);width:28px;height:26px;border-radius:7px;font-size:13px;cursor:pointer}
  .eye:hover{background:var(--blue);color:#fff}
  .row-flash{animation:flashrow 1.8s ease}
  @keyframes flashrow{0%{background:rgba(91,155,213,.45)}100%{background:transparent}}

  /* carcass header */
  .carcass-wrap{overflow:hidden;padding:0}
  .carcass-head{background:linear-gradient(135deg,var(--navy),var(--navy-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:#A9BBD6;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:#C7D4E8}

  /* prioritized plan */
  .plan-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .plan-item:last-child{border-bottom:none}
  .pri{font-family:'Kanit';font-weight:700;font-size:12px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
  .pri-1{background:var(--rose)} .pri-2{background:var(--amber)} .pri-3{background:var(--blue)} .pri-4{background:var(--green)} .pri-n{background:var(--navy)}
  .plan-body{flex:1} .plan-body .pt{font-weight:600;font-size:13.5px} .plan-body .pd{font-size:12px;color:var(--slate);margin-top:1px}
  .plan-count{font-family:'Kanit';font-weight:700;color:var(--heading);font-size:16px}

  /* agenda */
  .agenda-head{padding:13px 16px;font-family:'Kanit';font-weight:600;font-size:14px;color:var(--heading);border-bottom:1px solid var(--line)}
  .agenda-head.am{background:rgba(232,240,251,.7)} .agenda-head.pm{background:rgba(255,243,220,.7)}

  /* ============================================================
     LOGIN v3 — split brand / form (reference-style)
     ============================================================ */
  .lg-split{position:fixed;inset:0;z-index:200;display:flex;background:#0B1A30;font-family:'Anuphan',sans-serif}

  /* ---- left brand panel · darker radial gradient (same tone, deeper) ---- */
  .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(16,118,132,.42), transparent 62%),
      radial-gradient(820px 720px at 92% 98%, rgba(6,16,34,.9), transparent 60%),
      radial-gradient(1300px 1000px at 46% 46%, #11455C 0%, #0C2B47 42%, #07142A 78%, #050C18 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(231,198,90,.14);bottom:-110px;left:-90px;pointer-events:none}

  /* ---- background video (volcano/lava) + graceful fallbacks ---- */
  .lg-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
  .lg-bgvideo.is-missing{display:none}                 /* ไฟล์วิดีโอไม่มี → ซ่อน เผยเกรเดียนต์+แสงลาวา */
  /* แสงลาวาเรืองแสงด้านล่าง (fallback ที่ดูมีชีวิตแม้ยังไม่ใส่วิดีโอ) */
  .lg-lava-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(720px 520px at 26% 100%, rgba(230,74,20,.48), transparent 62%),
      radial-gradient(460px 360px at 66% 86%, rgba(255,138,40,.30), transparent 58%),
      radial-gradient(300px 240px at 12% 78%, rgba(255,96,24,.20), transparent 60%);
    animation:lgLava 7s ease-in-out infinite}
  @keyframes lgLava{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.92;transform:translateY(-2%)}}
  /* ฉากมืดทับวิดีโอเพื่อให้ตัวหนังสือขาวอ่านง่าย (เข้มฝั่งซ้าย-ล่างที่มีข้อความ) */
  .lg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(5,12,24,.86) 0%, rgba(5,12,24,.58) 46%, rgba(5,12,24,.32) 100%),
      linear-gradient(0deg, rgba(5,12,24,.78) 0%, rgba(5,12,24,.12) 52%, transparent 78%)}
  /* ไม่มีวิดีโอ → scrim จางลง (โชว์แสงลาวา) เหลือแค่ไล่เข้มฝั่งซ้ายให้ตัวหนังสืออ่านง่าย */
  .lg-brand.no-video .lg-scrim{
    background:linear-gradient(90deg, rgba(5,12,24,.72) 0%, rgba(5,12,24,.34) 52%, transparent 100%)}

  /* brand wordmark top-left (logo removed) */
  .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:12px;letter-spacing:3px;color:#E7C65A;font-weight:700;margin-top:4px}

  /* hero copy bottom-left */
  .lg-hero{position:relative;z-index:3;max-width:560px}
  .lg-headline{font-family:'Kanit',sans-serif;font-weight:800;font-size:46px;line-height:1.2;letter-spacing:-.3px;
    text-shadow:0 2px 10px rgba(0,0,0,.28)}
  .lg-brand-accent{display:inline-block;margin-top:10px;font-family:'Kanit',sans-serif;font-weight:900;font-size:34px;
    letter-spacing:2px;color:#E7C65A;text-shadow:0 2px 16px rgba(231,198,90,.4)}
  .lg-lead{font-size:15.5px;line-height:1.7;color:#CBDBEC;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:1.5px;text-transform:uppercase;color:#9FC2D8;margin-top:6px}

  /* เคารพผู้ที่ตั้งค่าลดการเคลื่อนไหว — หยุดวิดีโอ/แอนิเมชัน เหลือพื้นหลังนิ่ง */
  @media (prefers-reduced-motion: reduce){
    .lg-bgvideo{display:none}
    .lg-lava-glow{animation:none;opacity:.6}
  }

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

  /* black wordmark on the light form side — big & clear */
  .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:#0A0E14;line-height:1.05}
  .lg-brandhead-sub{font-family:'Kanit',sans-serif;font-weight:700;font-size:14px;letter-spacing:2.5px;color:#1A2233;margin-top:4px}
  .lg-alt{text-align:center;font-size:13.5px;color:var(--slate);margin-top:18px}
  .lg-alt a{color:var(--blue);font-weight:700;text-decoration:none}
  .lg-alt a:hover{text-decoration:underline}
  .lg-lock{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
    background:linear-gradient(135deg,#16294B,#2F6BC4);box-shadow:0 12px 28px rgba(47,107,196,.34)}
  .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-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);cursor:pointer;margin:4px 0 2px}
  .lg-remember input{width:16px;height:16px}
  .lg-err{background:#FCE9E7;border:1px solid #F3C5BF;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,#0F7E8C,#2F6BC4);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(15,126,140,.32);cursor:pointer;transition:.15s}
  .lg-btn:hover{filter:brightness(1.08)}
  .lg-demo{margin-top:20px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:13px;padding:12px 14px;font-size:11.5px;color:var(--slate);line-height:1.7}
  .lg-demo-h{font-family:'Kanit',sans-serif;font-weight:700;font-size:12px;color:var(--heading);margin-bottom:4px}
  .lg-demo b{color:var(--heading)}
  .lg-foot{text-align:center;font-size:11.5px;color:var(--slate);margin-top:16px;opacity:.8}

  /* กรอบลิงก์ไป HR — โทนกรมท่า/ทอง หรูหราสมกับเป็นระบบพี่น้อง */
  .lg-hr-card{display:flex;align-items:center;gap:13px;margin-top:16px;padding:14px 16px;border-radius:15px;
    background:linear-gradient(135deg,#0F1D38,#1B2E52 55%,#132447);border:1px solid rgba(231,198,90,.35);
    box-shadow:0 10px 26px rgba(10,20,40,.28),inset 0 1px 0 rgba(255,255,255,.06);
    text-decoration:none;position:relative;overflow:hidden;transition:.2s}
  .lg-hr-card::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(220px 120px at 90% -10%,rgba(231,198,90,.18),transparent 70%)}
  .lg-hr-card:hover{transform:translateY(-2px);border-color:rgba(231,198,90,.55);
    box-shadow:0 14px 34px rgba(10,20,40,.36),inset 0 1px 0 rgba(255,255,255,.08)}
  .lg-hr-badge{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    font-family:'Kanit',sans-serif;font-weight:800;font-size:15px;letter-spacing:.5px;color:#16294B;
    background:linear-gradient(135deg,#F2D98A,#E7C65A);box-shadow:0 4px 12px rgba(231,198,90,.35)}
  .lg-hr-text{display:flex;flex-direction:column;gap:3px;min-width:0}
  .lg-hr-title{font-family:'Kanit',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.6px;color:#F5E7C4}
  .lg-hr-sub{font-size:11.5px;color:#9FB2D6;line-height:1.3}
  .lg-hr-arrow{margin-left:auto;color:#E7C65A;font-size:16px;font-weight:700;flex-shrink:0;transition:transform .2s}
  .lg-hr-card:hover .lg-hr-arrow{transform:translateX(3px)}

  @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:26px}
    .lg-brand-accent{font-size:22px;margin-top:6px}
    .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}
  }

/* ===== สกินโมดูล PRODUCE MANAGEMENT: สไลด์บาร์ขาว + topbar ส้ม (เฉพาะในโมดูล) ===== */
.sidebar-pm{
  --sidebar-bg:#FFFFFF;
  --sidebar-text:#41514A;
  --sidebar-strong:#11201A;
  --sidebar-group:#8A9A90;
  --sidebar-hover:rgba(30,163,98,.10);
  --sidebar-bd:rgba(20,60,40,.12);
}
.sidebar-pm .pm-exit{color:#41514A;background:rgba(30,163,98,.08);border-color:rgba(30,163,98,.22)}
.sidebar-pm .pm-exit:hover{background:rgba(30,163,98,.15);color:#11201A}
.sidebar-pm .nav-item .ni-ico.ni-emoji{background:rgba(30,163,98,.10)}
.sidebar-pm .nav-item.active .ni-ico.ni-emoji{background:rgba(255,255,255,.24)}
.sidebar-pm .nav-item:hover .ni-ico{background:rgba(30,163,98,.10)}
[data-theme="dark"] .sidebar-pm{
  --sidebar-bg:linear-gradient(190deg,#141d18,#0f1712);
  --sidebar-text:#AEC6BA; --sidebar-strong:#F4FAF6; --sidebar-group:#6E8579;
  --sidebar-hover:rgba(30,140,85,.14); --sidebar-bd:rgba(70,180,120,.14);
}
body.pm-page-body .topbar{
  background:linear-gradient(120deg,#E67E17,#F0982B 58%,#F5A63E);
  border-bottom-color:rgba(255,255,255,.30);
  box-shadow:0 6px 24px rgba(200,110,20,.30);
}
body.pm-page-body .topbar .brand .b2{color:rgba(255,255,255,.85)}