/* ============================================================
   ระบบพิชัยยุทธ — Design System  (Navy + Orange · ธุรกิจ มั่นคง)
   ตามสกิล UI มาตรฐานเจ้านาย
   ============================================================ */
:root{
  --navy:#0E1626; --navy2:#1B2540; --navy3:#243252;
  --orange:#E8741C; --orange-d:#cf6412; --orange-soft:#fdf0e5;
  --work:#F2F3F5; --surface:#ffffff; --line:#e6e9ef; --line2:#d6dbe6;
  --ink:#1F2937; --ink2:#5b6879; --ink3:#93A1B5;
  /* KPI — 4 สีมาตรฐานเท่านั้น */
  --kpi-1:#4F7CF5; --kpi-2:#38BDF8; --kpi-3:#22C55E; --kpi-4:#F5A524;
  --sidebar:linear-gradient(180deg,#1B2540 0%,#141d33 100%);
  --radius:8px; --radius-sm:6px;
  --shadow:0 1px 3px rgba(14,22,38,.08),0 1px 2px rgba(14,22,38,.04);
  --shadow-lg:0 6px 20px rgba(14,22,38,.12);
  --font:'LINE Seed Sans TH', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--font);background:var(--navy);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:14.5px}
a{color:inherit;text-decoration:none}
input,button,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(93,104,121,.1);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(93,104,121,.32)}
/* Firefox — โปร่งใส 90% เช่นกัน */
*{scrollbar-color:rgba(93,104,121,.1) transparent}

/* ============ โครงสร้างตามสกิล UI ============ */
/* ตรึงหัวทั้งชุด (top bar + เมนู + breadcrumb) ไว้ด้านบน ไม่ไหลตามเวลาเลื่อน */
.apphead{position:sticky;top:0;z-index:50;background:var(--navy)}
/* 1) Top bar (navy surface, 3 zones) */
.topbar{background:var(--navy2);display:flex;align-items:center;gap:20px;
  padding:12px 22px}
.tb-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.tb-logo{width:44px;height:44px;border-radius:8px;background:var(--orange);
  display:grid;place-items:center;font-size:23px;box-shadow:0 4px 12px rgba(232,116,28,.4)}
.tb-brand b{font-size:18px;font-weight:800;color:#fff;display:block;line-height:1.15}
.tb-brand span{font-size:9px;color:#7d8aa1;letter-spacing:1px;text-transform:uppercase}
.tb-search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;
  background:#0E1626;border:1px solid #2a3654;border-radius:22px;padding:9px 16px}
.tb-search input{flex:1;background:transparent;border:none;outline:none;color:#E6EAF2;font-size:13.5px}
.tb-search input::placeholder{color:#5e6c85}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:40px;height:40px;border-radius:8px;border:1px solid #2a3654;
  background:#0E1626;display:grid;place-items:center;font-size:18px;cursor:pointer;
  position:relative;transition:.15s;color:#cdd5e3}
.icon-btn:hover{border-color:var(--orange);background:#151f36}
.icon-btn .dot{position:absolute;top:7px;right:8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:10px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--navy2)}
.tb-user{display:flex;align-items:center;gap:10px}
.tb-user .info{text-align:right}
.tb-user b{color:#fff;font-size:13px;display:block;line-height:1.2}
.tb-user span{color:#7d8aa1;font-size:11px}
.tb-avatar{width:40px;height:40px;border-radius:50%;background:var(--kpi-1);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:800}

/* 2) thin gap = navy shows through (margin on menubar) */
/* 3) Menu bar (orange base + navy strip on items) */
.navbar{background:var(--orange);margin-top:6px}
.navstrip{background:var(--navy2);display:flex;align-items:stretch;gap:2px;
  padding:0 10px;overflow-x:auto;scrollbar-width:none}
.navstrip::-webkit-scrollbar{display:none}
.menu-item{display:flex;align-items:center;gap:8px;padding:13px 16px;white-space:nowrap;
  color:#c2cbdb;font-size:13.5px;font-weight:400;cursor:pointer;transition:.15s;border-radius:0}
.menu-item .ic{font-size:16px}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu-item.active{background:var(--orange);color:#fff;font-weight:700}
.menu-item.right{margin-left:auto}
.menu-item .badge{background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px}
/* 4) Breadcrumb (orange bar) */
.crumb{background:var(--orange);color:#fff;padding:9px 24px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:8px}
.crumb .sep{opacity:.6;font-weight:400}
.crumb .sub{margin-left:auto;font-weight:400;opacity:.9;font-size:12px}
/* 5) Working area (light gray card, big radius, navy around) */
.page{padding:16px}
.workarea{background:var(--work);border-radius:var(--radius-work,18px);padding:24px;min-height:70vh}
:root{--radius-work:18px}
.hamburger{display:none}
.content{padding:0}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.card-h .t{font-size:15.5px;font-weight:700}
.card-h .ic{font-size:20px}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- KPI stat cards (4 สีมาตรฐาน) ---------- */
.kpi{border-radius:var(--radius);padding:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg)}
.kpi::after{content:'';position:absolute;right:-24px;top:-24px;width:110px;height:110px;
  background:rgba(255,255,255,.13);border-radius:50%}
.kpi .emoji{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.kpi .label{font-size:12.5px;opacity:.95;margin-top:8px;font-weight:400}
.kpi .value{font-size:30px;font-weight:800;line-height:1.1;margin-top:2px}
.kpi .delta{font-size:11.5px;opacity:.9;margin-top:6px}
.kpi.k1{background:var(--kpi-1)} .kpi.k2{background:var(--kpi-2)}
.kpi.k3{background:var(--kpi-3)} .kpi.k4{background:var(--kpi-4)}

/* ---------- Buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--radius-sm);
  border:none;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 3px 10px rgba(232,116,28,.3)}
.btn-primary:hover{background:var(--orange-d)}
.btn-ghost{background:#fff;border:1px solid var(--line2);color:var(--ink);font-weight:400}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:6px;
  font-size:12px;font-weight:700}
.chip-soft{background:var(--orange-soft);color:var(--orange-d)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;
  font-size:11.5px;font-weight:700;color:#fff}

/* ---------- Score bars ---------- */
.score{display:flex;align-items:center;gap:8px}
.score .bar{flex:1;height:8px;background:#eceff3;border-radius:20px;overflow:hidden}
.score .fill{height:100%;border-radius:20px}
.score .fill.demand{background:var(--kpi-4)} .score .fill.fit{background:var(--kpi-1)}
.score .num{font-size:12px;font-weight:700;min-width:34px;text-align:right}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;font-weight:700;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.5px;padding:0 12px 11px}
.tbl td{padding:13px 12px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tr:hover td{background:#f8fafc}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:7px}
.input,.select,.textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);
  border-radius:var(--radius-sm);font-size:14px;background:#fff;transition:.15s;color:var(--ink)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,116,28,.12)}
.textarea{resize:vertical;min-height:90px}

/* ---------- Toggle ---------- */
.toggle{width:46px;height:26px;border-radius:20px;background:#cbd2de;position:relative;
  cursor:pointer;transition:.2s;flex:0 0 auto}
.toggle.on{background:var(--orange)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle.on::after{transform:translateX(20px)}

/* ---------- Progress / budget ---------- */
.pbar{height:12px;border-radius:20px;background:#eceff3;overflow:hidden;position:relative}
.pbar .pf{height:100%;border-radius:20px;background:var(--kpi-4);transition:width .5s}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 16px;
  display:flex;gap:11px;border-left:4px solid var(--orange);animation:slideIn .3s}
.toast .ti{font-size:20px}
.toast b{font-size:13px;display:block}.toast p{font-size:12px;color:var(--ink2)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}

/* ---------- Notif dropdown ---------- */
.noti-panel{position:absolute;top:54px;right:0;width:340px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;display:none}
.noti-panel.open{display:block}
.noti-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.noti-item:hover{background:#f8fafc}
.noti-item .ni{font-size:20px}
.noti-item b{font-size:13px}.noti-item p{font-size:12px;color:var(--ink2)}
.noti-item small{font-size:10.5px;color:var(--ink3)}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--ink3)}
.empty .em{font-size:46px}
.empty p{margin-top:10px;font-size:14px}

.sec-title{display:flex;align-items:center;gap:9px;margin:4px 0 16px;font-size:16px;font-weight:700}

/* ---------- Modal (popup กลางจอ · ทุกอย่างเป็น popup) ---------- */
.modal-back{position:fixed;inset:0;background:rgba(14,22,38,.58);backdrop-filter:blur(3px);z-index:200;
  display:none;align-items:center;justify-content:center;padding:26px 14px}
.modal-back.open{display:flex}
.modal{background:var(--work);border-radius:16px;width:100%;max-width:1040px;max-height:calc(100vh - 52px);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:popIn .22s ease-out}
.modal-h{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  background:var(--navy2);color:#fff;padding:16px 20px}
.modal-h .mi{width:42px;height:42px;border-radius:11px;background:var(--orange);display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.modal-h b{font-size:16px;display:block;line-height:1.2}
.modal-h small{font-size:11.5px;color:#93a1b5}
.modal-x{margin-left:auto;width:38px;height:38px;border-radius:9px;border:1px solid #2a3654;background:#0E1626;
  color:#cdd5e3;font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.modal-x:hover{border-color:var(--orange);color:#fff}
.modal-body{padding:22px;overflow-y:auto;flex:1 1 auto}
@keyframes popIn{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:none;opacity:1}}

/* ---------- Spinner ---------- */
.spinner{width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--orange);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Competitor analysis dashboard ---------- */
.verdict-banner{background:linear-gradient(135deg,#E8741C,#cf6412);color:#fff;border-radius:14px;
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 6px 18px rgba(232,116,28,.28)}
.verdict-banner .vb-ic{font-size:30px;line-height:1}
.verdict-banner b{font-size:12px;letter-spacing:.5px;opacity:.9;text-transform:uppercase}
.verdict-banner p{font-size:15.5px;font-weight:700;margin-top:3px;line-height:1.5}
.mini-kpi{border-radius:12px;padding:16px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.mini-kpi .emoji{font-size:22px}
.mini-kpi .label{font-size:12px;opacity:.95;margin-top:6px;font-weight:400}
.mini-kpi .value{font-size:27px;font-weight:800;line-height:1.1;margin-top:2px}
.mini-kpi .sub{font-size:11px;opacity:.9;margin-top:3px}
.analysis-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.analysis-list li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;align-items:flex-start}
.analysis-list li .dot{flex:0 0 auto;margin-top:2px}
.move-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:10px;padding:13px 15px;font-size:13.5px;line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.move-card .mv-n{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--orange-soft);
  color:var(--orange-d);font-weight:800;font-size:13px;display:grid;place-items:center}
@media(max-width:760px){.modal-body .g-2,.modal-body .g-3{grid-template-columns:1fr}}

/* ============================================================
   MOBILE APP MODE — bottom tab bar + more sheet (แบบแอพเนทีฟ)
   ============================================================ */
/* base: ซ่อนไว้ก่อน โชว์เฉพาะจอมือถือ */
.tabbar{display:none}
.sheet-back{display:none}

/* ---------- Tablet (761–960) — คงเมนูแถบบน แค่ยุบคอลัมน์ ---------- */
@media(max-width:960px){
  .tb-search{display:none}
  .tb-user .info{display:none}
  .g-4{grid-template-columns:repeat(2,1fr)} .g-3,.g-2{grid-template-columns:1fr}
  .workarea{padding:18px;border-radius:14px}
  .page{padding:10px}
  .topbar{padding:10px 16px;gap:12px}
}

/* ---------- Phone (≤760) — โหมดแอพเต็มตัว ---------- */
@media(max-width:760px){
  /* Top bar กระชับ */
  .topbar{padding:9px 14px;gap:10px}
  .tb-logo{width:36px;height:36px;font-size:19px;border-radius:9px}
  .tb-brand b{font-size:15px}
  .tb-brand span{display:none}
  .tb-user{display:none}
  .tb-right>a[title="ออกจากระบบ"]{display:none} /* logout อยู่ใน More sheet แล้ว */
  .icon-btn{width:38px;height:38px;font-size:17px}
  .noti-panel{width:min(340px,calc(100vw - 20px));right:-4px;top:50px}

  /* ซ่อนแถบเมนูแนวนอน → ใช้ bottom tab แทน */
  .navbar{display:none}

  /* Breadcrumb → แถบชื่อหน้าเพรียว */
  .crumb{padding:9px 16px;font-size:12.5px;flex-wrap:wrap;gap:5px}
  .crumb .sub{margin-left:0;flex-basis:100%;font-size:11px;opacity:.85}

  /* พื้นที่ทำงานเต็มจอ เว้นล่างให้ tab bar */
  .apphead{border-radius:0}
  body{background:var(--work);overflow-x:hidden}
  .page{padding:0 0 calc(66px + env(safe-area-inset-bottom))}
  .workarea{border-radius:0;padding:12px;min-height:calc(100vh - 116px);overflow-x:hidden}
  /* ทุก grid ยุบ 1 คอลัมน์ — minmax(0,1fr) ให้ track หดได้ กันอินพุต/ข้อความล้นจอ */
  .grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin-bottom:12px!important}
  /* ยกเว้น KPI stat cards → 2×2 กระชับ ให้สมดุลกับจอ */
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* card เลื่อนแนวนอนได้ กันตารางกว้างโดน overflow-x:hidden ตัดข้อมูลหาย */
  .card{padding:15px;border-radius:12px;overflow-x:auto}
  .tbl th,.tbl td{padding:10px 8px;font-size:12.5px}
  .kpi{padding:14px;border-radius:14px}
  .kpi::after{width:72px;height:72px;right:-18px;top:-18px}
  .kpi .emoji{font-size:21px}
  .kpi .label{font-size:11px;margin-top:5px}
  .kpi .value{font-size:23px}
  .kpi .delta{font-size:10px;margin-top:4px}

  /* ---- Bottom tab bar ---- */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--navy2);border-top:1px solid #2a3654;
    box-shadow:0 -3px 16px rgba(14,22,38,.34);
    padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:3px;padding:8px 2px 7px;color:#8b98af;font-size:10px;font-weight:400;
    background:none;border:none;cursor:pointer;position:relative;transition:.15s;
    -webkit-tap-highlight-color:transparent}
  .tab .tb-ic{font-size:21px;line-height:1;position:relative;transition:transform .15s}
  .tab .tab-t{transition:.15s}
  .tab.active{color:var(--orange)}
  .tab.active .tab-t{font-weight:700}
  .tab.active .tb-ic{transform:translateY(-1px)}
  .tab.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:32px;height:3px;border-radius:0 0 4px 4px;background:var(--orange)}
  .tab:active{background:rgba(255,255,255,.05)}
  .tab-badge{position:absolute;top:-4px;left:12px;min-width:15px;height:15px;padding:0 3px;
    background:#ef4444;color:#fff;font-size:9px;font-weight:700;border-radius:9px;
    display:grid;place-items:center;border:1.5px solid var(--navy2)}

  /* ---- More bottom sheet ---- */
  .sheet-back{position:fixed;inset:0;z-index:180;background:rgba(14,22,38,.52);
    backdrop-filter:blur(2px);display:none;align-items:flex-end}
  .sheet-back.open{display:flex}
  .sheet{width:100%;background:var(--surface);border-radius:22px 22px 0 0;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,.28);animation:sheetUp .28s cubic-bezier(.2,.9,.3,1)}
  .sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line2);margin:8px auto 4px}
  .sheet-h{font-size:15px;font-weight:800;color:var(--ink);padding:6px 4px 14px;text-align:center}
  .sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .sheet-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 6px;
    border-radius:14px;background:var(--work);color:var(--ink);font-size:11.5px;font-weight:700;
    text-align:center;line-height:1.3;transition:.12s;-webkit-tap-highlight-color:transparent}
  .sheet-item .si-ic{font-size:26px}
  .sheet-item.active{background:var(--orange-soft);color:var(--orange-d);
    box-shadow:inset 0 0 0 1.5px var(--orange)}
  .sheet-item.danger{color:#dc2626}
  .sheet-item:active{transform:scale(.95)}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}