/* ═══════════════════════════════════════════════════════════
   SalesRun Design System 1.1 — professional, responsive UI
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#eef2f7;--surface:#fff;--surface-2:#f6f8fb;--surface-3:#e7ecf3;
  --line:#e2e8f0;--line-strong:#cbd5e1;--text:#172033;--text-soft:#344054;--muted:#667085;
  --brand:#1d4e9e;--brand-dark:#143b7b;--brand-deep:#0b2348;--brand-soft:#e7eef9;
  --ok:#079455;--ok-soft:#e8f7ef;--warn:#dc6803;--warn-soft:#fff3e6;
  --bad:#d92d20;--bad-soft:#fef0ee;--info:#1570ef;--info-soft:#eff8ff;
  --radius-sm:8px;--radius:12px;--radius-lg:18px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.05);
  --shadow-lg:0 20px 50px rgba(16,24,40,.16);
  --topbar-h:68px;--sidebar-w:248px;--nav-h:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;
  -webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none;transition:color .15s,background .15s,border-color .15s}
a:hover{color:var(--brand-dark)}
h1,h2,h3{margin:0 0 .65rem;line-height:1.28;color:var(--text);letter-spacing:-.015em}
h1{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:800}
h2{font-size:1.08rem;font-weight:750}
h3{font-size:.96rem;font-weight:750}
p{margin:.3rem 0 1rem}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.22);outline-offset:2px
}
.skip-link{position:fixed;top:-60px;left:1rem;z-index:999;background:var(--text);color:#fff;
  padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip-link:focus{top:1rem;color:#fff}

/* ── Application header ─────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:70;height:var(--topbar-h);background:rgba(10,31,63,.98);
  border-bottom:1px solid #193b68;box-shadow:0 4px 16px rgba(9,30,61,.16);backdrop-filter:blur(12px)}
.topbar-inner{height:100%;max-width:1600px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;gap:1.2rem}
.topbar .brand{display:flex;align-items:center;gap:.7rem;color:#fff;min-width:220px}
.topbar .brand:hover{color:#fff}
.brand-mark{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:38px;flex:0 0 46px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,#102f66 0%,#1f5cab 58%,#3687dc 100%);color:#fff;
  font-size:.66rem;font-weight:900;letter-spacing:.09em;text-indent:.09em;
  box-shadow:0 6px 15px rgba(4,20,47,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.brand-mark:before{content:"";position:absolute;z-index:-1;left:7px;right:7px;bottom:4px;height:2px;border-radius:2px;background:#65dcf2;box-shadow:0 0 7px rgba(101,220,242,.65)}
.brand-mark:after{content:"";position:absolute;z-index:-1;width:24px;height:70px;right:-8px;top:-15px;transform:rotate(24deg);background:rgba(255,255,255,.1)}
.brand-copy{display:flex;flex-direction:column;line-height:1.2}
.brand-copy strong{font-size:1.05rem;font-weight:850;letter-spacing:-.02em}
.brand-copy small{font-size:.66rem;color:#b9c9df;font-weight:500;margin-top:2px}
.page-context{display:none;border-left:1px solid #355276;padding-left:1.2rem;line-height:1.2}
.page-context .context-label{display:block;color:#9fb3ce;font-size:.65rem;margin-bottom:3px}
.page-context strong{font-size:.86rem;color:#f3f7fc}
.topbar .spacer{flex:1}
.who{display:flex;align-items:center;gap:.65rem}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:#244c7f;color:#fff;font-weight:800;border:1px solid #496b96}
.who-copy{display:none;flex-direction:column;line-height:1.2;text-align:left}
.who-copy b{font-size:.82rem;white-space:nowrap;color:#fff}.who-copy small{font-size:.68rem;color:#aebfd5;margin-top:3px}
.logout-link{color:#c5d2e3;font-size:.75rem;font-weight:700;padding:.45rem .65rem;border-radius:8px}
.logout-link:hover{background:#7f1d2d;color:#fff}
.context-help{display:inline-flex;align-items:center;gap:.38rem;min-height:34px;padding:.38rem .58rem;border:1px solid #41628c;
  border-radius:8px;color:#e7eef8;font-size:.72rem;font-weight:750;background:#17395f;white-space:nowrap}
.context-help:hover{background:#244c7f;border-color:#6686ad;color:#fff}
.context-help span{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#fff;color:#173b73;font-weight:850}

/* ── App shell and navigation ───────────────────────────── */
.shell{min-height:calc(100vh - var(--topbar-h))}
.wrap{width:100%;padding:1rem 1rem calc(var(--nav-h) + 1.5rem)}
.content-frame{width:100%;max-width:1240px;margin:0 auto}
.sidenav{display:none}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:80;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:rgba(10,31,63,.98);border-top:1px solid #25466e;display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px rgba(16,24,40,.06);backdrop-filter:blur(12px)}
.bottomnav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#aebfd5;font-size:.66rem;font-weight:700;padding-top:4px}
.bottomnav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8}
.bottomnav a.on{color:#fff;background:rgba(255,255,255,.07)}
.bottomnav a.on:before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:#78a7ff}
.app-footer{max-width:1240px;margin:1rem auto 0;padding:1rem 0;color:#98a2b3;font-size:.7rem;
  display:flex;justify-content:space-between;border-top:1px solid var(--line)}

@media(min-width:700px){
  .who-copy{display:flex}.page-context{display:block}.wrap{padding:1.4rem 1.5rem calc(var(--nav-h) + 1.5rem)}
}
@media(min-width:960px){
  .shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);max-width:1600px;margin:0 auto}
  .sidenav{display:flex;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;
    flex-direction:column;padding:1.25rem 1rem;background:#102a4d;border-right:1px solid #1e4068}
  .nav-caption{font-size:.72rem;font-weight:800;color:#dce7f5;padding:.1rem .65rem .5rem}
  .nav-group{font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:#7f9abb;
    padding:1rem .65rem .4rem;font-weight:800}
  .sidenav a{display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.58rem .7rem;border-radius:9px;
    color:#c8d6e7;font-weight:650;font-size:.86rem;margin:1px 0}
  .sidenav a:hover{background:#1b416e;color:#fff}
  .sidenav a.on{background:#285b99;color:#fff;font-weight:800;box-shadow:inset 3px 0 #8eb4ff}
  .nav-icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center}
  .sidenav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
  .nav-help{margin-top:auto!important;display:flex!important;gap:.6rem!important;align-items:center!important;padding:.75rem!important;border-radius:10px!important;background:#193b63!important;color:#fff!important;border:1px solid #2d527e}
  .nav-help-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#fff;
    border:1px solid #6f8cae;color:#173b73;font-weight:800}
  .nav-help div{line-height:1.25}.nav-help strong{display:block;font-size:.7rem}.nav-help small{font-size:.62rem;color:#aebfd5}
  .main{min-width:0}.wrap{padding:1.75rem 2rem 2rem}.bottomnav{display:none}
  .app-footer{padding-bottom:0}.topbar-inner{padding:0 1.5rem}
}

/* ── Cards, sections, KPIs ──────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);padding:1rem;margin-bottom:1rem}
.card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;padding-bottom:.75rem;border-bottom:1px solid #edf1f5}
.card-head h2,.card-head h3{margin:0;flex:1}.card-head>.small{white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}
.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem;box-shadow:var(--shadow-xs);min-height:104px}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.kpi.brand:before{background:var(--brand)}.kpi.ok:before{background:var(--ok)}
.kpi.warn:before{background:var(--warn)}.kpi.bad:before{background:var(--bad)}
.kpi .lbl{font-size:.72rem;color:var(--muted);font-weight:700;margin-bottom:.3rem}
.kpi .val{font-size:1.45rem;font-weight:850;letter-spacing:-.04em;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.7rem;color:var(--muted);margin-top:.3rem}
.kpi.brand .val{color:var(--brand)}.kpi.ok .val{color:var(--ok)}
.kpi.warn .val{color:var(--warn)}.kpi.bad .val{color:var(--bad)}
@media(min-width:700px){.card{padding:1.2rem}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.kpi{padding:1rem 1.1rem}}

/* ── Progress ────────────────────────────────────────────── */
.bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:.5rem}
.bar>span{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .35s}
.bar.ok>span{background:var(--ok)}.bar.warn>span{background:var(--warn)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.52rem .9rem;
  border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text-soft);
  font-weight:750;font-size:.84rem;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs);
  transition:transform .1s,box-shadow .15s,background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--surface-2);border-color:#b9c3d0;color:var(--text);box-shadow:0 2px 5px rgba(16,24,40,.08)}
.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(37,99,235,.18)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn-ok:hover{background:#067647;color:#fff}
.btn-bad{background:var(--bad);border-color:var(--bad);color:#fff}.btn-bad:hover{background:#b42318;color:#fff}
.btn-sm{min-height:33px;padding:.35rem .65rem;font-size:.75rem;border-radius:7px}
.btn-block{display:flex;width:100%}.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ── Forms ───────────────────────────────────────────────── */
label{display:block;font-size:.77rem;font-weight:750;color:var(--text-soft);margin-bottom:.3rem}
input,select,textarea{width:100%;min-height:42px;padding:.58rem .72rem;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-size:.9rem;background:var(--surface);color:var(--text);box-shadow:inset 0 1px 1px rgba(16,24,40,.02);
  transition:border-color .15s,box-shadow .15s,background .15s}
textarea{min-height:90px;resize:vertical}select{cursor:pointer}
input::placeholder,textarea::placeholder{color:#98a2b3}
input:hover,select:hover,textarea:hover{border-color:#aeb9c7}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.field{margin-bottom:.85rem}.row{display:grid;gap:.85rem}
@media(min-width:640px){.row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.filters{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1rem;align-items:flex-end;padding:.8rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.filters .field{margin:0;min-width:150px;flex:1}.filters .btn{min-height:42px}

/* ── Tables ──────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1rem;padding:0 1rem}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;min-width:560px}
th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:.65rem .7rem;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{border-left:1px solid var(--line);border-radius:8px 0 0 8px}
th:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0}
td{padding:.7rem;border-bottom:1px solid #edf1f5;vertical-align:middle;background:#fff}
tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:#fbfcfe}
.num{text-align:right;font-variant-numeric:tabular-nums}.right{text-align:right}.center{text-align:center}

/* ── Badges and status ───────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:.16rem .5rem;border-radius:99px;font-size:.68rem;font-weight:800;white-space:nowrap}
.badge-ok{background:var(--ok-soft);color:var(--ok)}.badge-bad{background:var(--bad-soft);color:var(--bad)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}.badge-info{background:var(--info-soft);color:var(--info)}
.badge-muted{background:var(--surface-3);color:var(--muted)}
.grade{display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;border-radius:7px;font-weight:850;font-size:.7rem}
.grade-A{background:var(--ok-soft);color:var(--ok)}.grade-B{background:var(--info-soft);color:var(--info)}
.grade-C{background:var(--surface-3);color:var(--muted)}

/* ── Alerts and empty states ─────────────────────────────── */
.alert{position:relative;padding:.75rem .9rem .75rem 1rem;border-radius:9px;font-size:.82rem;font-weight:650;
  margin-bottom:1rem;border:1px solid transparent}
.alert-ok{background:var(--ok-soft);color:#067647;border-color:#abefc6}
.alert-bad{background:var(--bad-soft);color:#b42318;border-color:#fecdca}
.alert-warn{background:var(--warn-soft);color:#b54708;border-color:#fedf89}
.btn-danger{background:#b42318;color:#fff;border-color:#b42318}.btn-danger:hover{background:#912018;border-color:#912018}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.danger-zone{border-color:#f1c0bc}.demo-action-box{padding:1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}
.demo-action-box h3{margin-top:0}.demo-action-danger{border-color:#f1c0bc;background:#fff8f7}
.integration-fields{margin:.8rem 0;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}
.integration-fields summary{cursor:pointer;font-weight:750}.message-body{margin:.35rem 0;white-space:normal;line-height:1.55}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--muted);border-radius:10px;background:linear-gradient(#fff,#fbfcfe)}
.empty svg{display:block;width:40px;height:40px;margin:0 auto .65rem;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.45}

/* ── Lists ───────────────────────────────────────────────── */
.list{list-style:none;margin:0;padding:0}.list li{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #edf1f5}
.list li:last-child{border-bottom:0}.list .ico{width:38px;height:38px;border-radius:9px;flex:0 0 38px;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.74rem;background:var(--brand-soft);color:var(--brand-dark)}
.list .body{flex:1;min-width:0}.list .t{font-weight:750;font-size:.88rem;overflow-wrap:anywhere;color:var(--text)}
.list .s{font-size:.72rem;color:var(--muted);margin-top:2px}.list .end{text-align:right;font-size:.76rem;white-space:nowrap}

/* ── Tabs and Kanban ─────────────────────────────────────── */
.tabs{display:flex;gap:.35rem;overflow-x:auto;margin-bottom:1rem;padding:3px}
.tabs a{padding:.42rem .75rem;border-radius:8px;font-size:.76rem;font-weight:750;background:var(--surface);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tabs a:hover{border-color:#b9c3d0;color:var(--text)}.tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.board{display:flex;gap:.8rem;overflow-x:auto;padding:.15rem .1rem .75rem;-webkit-overflow-scrolling:touch}
.col{flex:0 0 275px;background:#f7f9fc;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem}
.col h3{font-size:.8rem;display:flex;align-items:center;gap:.4rem}.col h3 .n{background:var(--surface-3);border-radius:99px;padding:.05rem .42rem;font-size:.65rem}
.col .sum{font-size:.68rem;color:var(--muted);margin-bottom:.6rem}.dealcard{background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:.7rem;margin-bottom:.55rem;box-shadow:var(--shadow-xs);cursor:grab;transition:box-shadow .15s,transform .15s}
.dealcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.dealcard.drag{opacity:.4}.dealcard .t{font-weight:750;font-size:.82rem}
.dealcard .m{font-size:.7rem;color:var(--muted)}.dealcard .amt{font-weight:850;font-size:.84rem;color:var(--brand)}
.col.over{outline:2px dashed var(--brand);outline-offset:-3px;background:var(--brand-soft)}

/* ── Maps ────────────────────────────────────────────────── */
.map{height:320px;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
@media(min-width:900px){.map{height:440px}}
.leaflet-container{z-index:0;font:inherit;background:var(--surface-2)}.leaflet-container a{color:var(--brand)}
.pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50% 50% 50% 6px;
  transform:rotate(-45deg);background:var(--brand);color:#fff;font-weight:850;font-size:.76rem;border:2px solid #fff;
  box-shadow:0 3px 8px rgba(16,24,40,.3)}
.pin span{transform:rotate(45deg)}.pin.visited{background:var(--ok)}.pin.skipped{background:var(--muted)}
.pin.me{width:16px;height:16px;border-radius:50%;transform:none;background:#175cd3;box-shadow:0 0 0 4px rgba(23,92,211,.23),0 1px 4px rgba(0,0,0,.25)}
.mappop{min-width:180px;font-size:.8rem}.mappop b{display:block;font-size:.88rem;margin-bottom:.15rem}
.mappop .r{display:flex;gap:.35rem;margin-top:.55rem}.mappop .r a{flex:1;text-align:center;padding:.32rem .45rem;border-radius:7px;
  font-weight:750;font-size:.72rem;border:1px solid var(--line);color:var(--text)}.mappop .r a.go{background:var(--brand);border-color:var(--brand);color:#fff}
.picker{margin-bottom:1rem;padding:.85rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.picker-search{display:flex;gap:.4rem;margin-bottom:.35rem}.picker-search input{flex:1}.picker-hint{margin-bottom:.5rem}
.picker-map{height:280px}.picker-foot{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.ps-coord{font-variant-numeric:tabular-nums}.ps-coord:not(.muted){font-weight:750;color:var(--brand-dark)}
.ps-results{list-style:none;margin:.4rem 0 0;padding:0;max-height:180px;overflow-y:auto}.ps-results:empty{display:none}
.ps-results li{padding:.48rem .6rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.3rem;font-size:.78rem;cursor:pointer;background:var(--surface)}
.ps-results li:hover{background:var(--brand-soft);border-color:var(--brand)}.ps-results li.err,.ps-results li.wait{cursor:default;color:var(--muted);background:var(--surface-2)}
.pin.drop{background:var(--bad);font-size:.86rem}

/* ── Utilities ───────────────────────────────────────────── */
.muted{color:var(--muted)}.small{font-size:.76rem}.mb0{margin-bottom:0}.mt1{margin-top:1rem}
.flex{display:flex;align-items:center;gap:.6rem}.flexwrap{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.app-body .main>h1,.content-frame>h1{margin-bottom:1rem}

/* ── Standard business documents ─────────────────────────── */
.document-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.document-sheet{max-width:210mm;min-height:275mm;margin:0 auto;padding:14mm;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);color:#172033;font-size:.8rem}
.doc-header{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:1.5rem;padding-bottom:1rem;border-bottom:2px solid #172033}
.doc-company{display:flex;gap:.8rem;line-height:1.55;color:#475467}.doc-logo{width:54px;height:48px;flex:0 0 54px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#102f66,#1f5cab 60%,#3687dc);color:#fff;
  border-bottom:3px solid #65dcf2;font-weight:900;font-size:.72rem;letter-spacing:.09em;text-indent:.09em}
.doc-company-name{font-size:1.08rem;font-weight:850;color:#172033;margin-bottom:.15rem}.doc-title{text-align:right}
.doc-title h1{font-size:1.4rem;margin:0;color:#172033}.doc-title>div{font-weight:750;color:#667085;letter-spacing:.08em;margin-bottom:.55rem}
.doc-title dl,.doc-parties dl,.doc-totals dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem;margin:.12rem 0}
.doc-title dt,.doc-parties dt,.doc-totals dt{color:#667085}.doc-title dd,.doc-parties dd,.doc-totals dd{margin:0;font-weight:750}
.doc-parties{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;margin:1rem 0}.doc-parties section{padding:.8rem;border:1px solid #dfe4eb;border-radius:7px;line-height:1.55}
.doc-parties h2{font-size:.68rem;letter-spacing:.05em;color:#667085;margin:0 0 .45rem}.doc-table-wrap{overflow:visible}
.doc-table{min-width:0;border-collapse:collapse}.doc-table th{border-radius:0!important;border:1px solid #cfd6df!important;background:#eef2f6;color:#344054;padding:.48rem}
.doc-table td{border:1px solid #dfe4eb;padding:.5rem}.doc-summary-row{display:grid;grid-template-columns:1fr 250px;gap:1rem;margin-top:1rem}
.doc-amount-text,.doc-note{padding:.7rem;border:1px solid #dfe4eb;border-radius:7px;background:#f8fafc}.doc-amount-text strong{display:block;margin-top:.2rem}
.doc-totals{padding:.55rem 0}.doc-totals dl{grid-template-columns:1fr auto}.doc-totals .grand{font-size:1rem;padding-top:.45rem;border-top:2px solid #172033}
.doc-signatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.25rem;margin-top:2.2rem}.doc-sign{text-align:center;color:#667085;font-size:.7rem}
.doc-sign strong{display:block;color:#344054;margin:.35rem 0}.sign-line{height:30px;border-bottom:1px solid #98a2b3}.doc-footer-note{text-align:center;color:#667085;font-size:.68rem;margin-top:1.5rem;padding-top:.6rem;border-top:1px solid #dfe4eb}
.document-actions{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}.receipt-table{margin-top:1.2rem}.receipt-amount{display:grid;grid-template-columns:1fr 230px;border:1px solid #cfd6df;border-top:0}
.receipt-amount>div{padding:.75rem}.receipt-amount span{display:block;color:#667085;font-size:.68rem}.receipt-amount strong{display:block;margin-top:.2rem}
.receipt-total{text-align:right;background:#f8fafc;border-left:1px solid #cfd6df}.receipt-total strong{font-size:1.05rem}.print-only{display:none}

/* ── Online signatures ───────────────────────────────────── */
.consent-preview{padding:.85rem;border:1px solid #cfd6df;border-radius:9px;background:#f8fafc;margin-bottom:1rem}.consent-preview p{font-size:.76rem;color:#475467;margin:.35rem 0 0;line-height:1.6}
.evidence-list{margin:.25rem 0 1rem;padding-left:1.2rem;color:#475467;font-size:.8rem}.evidence-list li{margin:.45rem 0}
.sign-public-page{min-height:100vh;background:#f3f6fb}.sign-public-head{height:72px;display:flex;align-items:center;gap:.7rem;padding:0 max(1rem,calc((100vw - 820px)/2));background:#fff;border-bottom:1px solid var(--line)}
.sign-public-head>div:last-child{display:flex;flex-direction:column}.sign-public-head span{font-size:.68rem;color:var(--muted)}.sign-public-main{width:min(820px,calc(100% - 2rem));margin:1.4rem auto 3rem}
.sign-doc-card,.sign-state-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:clamp(1rem,4vw,2rem)}
.sign-doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1rem}.sign-doc-head .eyebrow{font-size:.65rem;color:var(--brand);font-weight:850;letter-spacing:.1em}.sign-doc-head h1{font-size:1.65rem;margin:.2rem 0}.sign-doc-head p{color:var(--muted);margin:0}.secure-pill{font-size:.68rem;font-weight:750;color:#067647;background:var(--ok-soft);padding:.35rem .55rem;border-radius:99px;white-space:nowrap}
.sign-customer{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1rem}.sign-customer>div{padding:.7rem;border-radius:8px;background:#f8fafc}.sign-customer span{display:block;font-size:.65rem;color:var(--muted);margin-bottom:.15rem}.sign-customer b{font-size:.8rem}
.sign-form{margin-top:1.2rem}.consent-check{display:flex;align-items:flex-start;gap:.55rem;padding-top:.75rem;margin-top:.65rem;border-top:1px solid var(--line);cursor:pointer;font-size:.78rem;font-weight:700;color:#344054}.consent-check input{width:auto;margin-top:.15rem;flex:0 0 auto}
.signature-field{margin:1rem 0}.signature-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}.signature-label button{border:0;background:none;color:var(--bad);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}.signature-field canvas{display:block;width:100%;height:210px;border:2px dashed #aab4c3;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}.sign-submit{height:48px;font-size:.9rem}.sign-legal{text-align:center;color:var(--muted);font-size:.66rem;margin:.7rem auto 0;max-width:600px}
.sign-state-card{text-align:center;max-width:620px;margin:5vh auto}.sign-state-icon{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.7rem;font-weight:850}.sign-state-icon.ok{background:var(--ok-soft);color:var(--ok)}.sign-state-icon.warn{background:var(--warn-soft);color:var(--warn)}.sign-state-icon.bad{background:var(--bad-soft);color:var(--bad)}
.sign-state-card h1{margin-bottom:.4rem}.sign-state-card>p{color:var(--muted)}.signed-summary{display:flex;flex-direction:column;gap:.15rem;padding:.8rem;background:#f8fafc;border-radius:9px;margin:1rem 0;text-align:left}.signed-summary span{font-size:.7rem;color:var(--muted)}.signed-signature{display:block;width:min(280px,80%);height:100px;object-fit:contain;margin:1rem auto;border-bottom:1px solid #98a2b3}.sign-complete-actions{display:grid;gap:.55rem;max-width:420px;margin:1rem auto}

/* ── Login ───────────────────────────────────────────────── */
.login-page{background:#fff}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)}
.login-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;padding:2.2rem clamp(2rem,5vw,5rem);
  color:#fff;background:#091f42}
.login-visual:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-220px;bottom:-230px;
  background:radial-gradient(circle,rgba(82,130,255,.72),rgba(37,99,235,0) 68%)}
.login-visual:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:48px 48px}
.login-brand,.login-message,.login-visual-foot{position:relative;z-index:1}.login-brand{display:flex;align-items:center;gap:.75rem;font-size:1.1rem}
.login-brand .brand-mark{border-color:rgba(255,255,255,.38);box-shadow:0 7px 18px rgba(0,0,0,.24)}.login-brand strong{font-weight:850}
.login-message{margin:auto 0;max-width:620px}.login-kicker{font-size:.7rem;letter-spacing:.16em;font-weight:800;color:#a9c4ff}
.login-message h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.16;color:#fff;margin:.9rem 0 1rem;letter-spacing:-.035em}
.login-message p{font-size:1rem;color:#d6e3ff;max-width:520px}.login-features{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.login-features span{padding:.45rem .7rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.08);font-size:.75rem}
.login-visual-foot{font-size:.68rem;color:#a9c4ff}.login-panel{display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}
.loginbox{width:100%;max-width:410px}.login-mobile-brand{display:none;align-items:center;gap:.7rem;margin-bottom:2rem}
.login-heading{margin-bottom:1.6rem}.login-heading .eyebrow{font-size:.7rem;color:var(--brand);font-weight:800;letter-spacing:.06em}
.login-heading h1{font-size:1.85rem;margin:.35rem 0}.login-heading p{font-size:.82rem;color:var(--muted);margin:0}
.label-row{display:flex;justify-content:space-between}.password-wrap{position:relative}.password-wrap input{padding-right:4.2rem}
.password-toggle{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--brand);
  font-size:.72rem;font-weight:800;cursor:pointer;padding:.4rem .5rem}.login-submit{height:46px;margin-top:.4rem;font-size:.88rem}
.login-submit span{font-size:1rem}.login-support{text-align:center;color:var(--muted);font-size:.69rem;margin-top:1.2rem}
.login-guide{margin-top:1rem;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:.65rem .75rem;color:var(--text-soft)}
.login-guide summary{cursor:pointer;font-size:.74rem;font-weight:750;color:var(--brand-dark)}
.login-guide ol{margin:.65rem 0 .1rem;padding-left:1.2rem;font-size:.7rem;color:var(--muted)}.login-guide li{margin:.35rem 0}

/* ── In-app knowledge base ──────────────────────────────── */
.help-hero{display:grid;gap:1rem;align-items:end;padding:1.25rem;margin-bottom:1rem;border-radius:var(--radius-lg);
  color:#fff;background:linear-gradient(125deg,#163fa6,#2563eb 58%,#4f7df0);box-shadow:0 10px 28px rgba(37,99,235,.18)}
.help-hero h1{color:#fff;margin:.25rem 0}.help-hero p{margin:0;color:#dbe7ff;max-width:680px;font-size:.84rem}
.help-kicker{font-size:.65rem;font-weight:850;letter-spacing:.13em;color:#bcd0ff}.help-search-wrap label{color:#fff;font-size:.72rem}
.help-search-wrap input{background:rgba(255,255,255,.98);border-color:transparent;box-shadow:0 4px 14px rgba(15,47,117,.18)}
.help-flow .card-head{margin-bottom:.75rem}.flow-track{display:flex;align-items:center;gap:.45rem;overflow-x:auto;padding:.2rem 0 .35rem}
.flow-track a{display:flex;align-items:center;gap:.45rem;min-width:max-content;padding:.55rem .65rem;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text-soft);font-size:.75rem;font-weight:750}
.flow-track a:hover{border-color:#bfd0ff;background:var(--brand-soft);color:var(--brand-dark)}.flow-track a b{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#fff;color:var(--brand);border:1px solid #dbe5ff;font-size:.68rem}
.flow-track i{font-style:normal;color:#98a2b3}.help-layout{display:grid;gap:1rem;align-items:start}.help-index{display:none}
.help-index h2{font-size:.88rem}.help-index nav{display:flex;flex-direction:column;gap:2px}.help-index a{padding:.47rem .55rem;border-radius:7px;color:var(--text-soft);font-size:.74rem;font-weight:650}
.help-index a:hover{background:var(--surface-2);color:var(--text)}.help-index a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:800}
.guide-card{scroll-margin-top:calc(var(--topbar-h) + 1rem)}.guide-card[hidden]{display:none}.guide-featured{border-color:#a9c4ff;box-shadow:0 0 0 3px rgba(37,99,235,.08),var(--shadow)}
.guide-head{display:flex;gap:.8rem;align-items:flex-start;padding-bottom:.8rem;border-bottom:1px solid var(--line);margin-bottom:.8rem}.guide-number{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:.7rem;font-weight:850}
.guide-head h2{margin:0}.guide-head p{margin:.2rem 0 0;color:var(--muted);font-size:.78rem}.guide-access{display:grid;gap:.15rem;padding:.65rem .75rem;margin-bottom:.9rem;border-radius:8px;background:var(--info-soft);font-size:.72rem;color:#175cd3}.guide-access strong{font-size:.67rem}
.guide-card h3{font-size:.8rem;margin-bottom:.55rem}.guide-steps{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.5rem}.guide-steps li{display:grid;grid-template-columns:27px 1fr;gap:.55rem;align-items:start;color:var(--text-soft);font-size:.76rem}.guide-steps li b{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--surface-3);color:var(--brand-dark);font-size:.66rem}.guide-steps li span{padding-top:.13rem}
.guide-tips{padding:.75rem;border-left:3px solid var(--warn);border-radius:0 8px 8px 0;background:var(--warn-soft);font-size:.73rem;color:#854a0e}.guide-tips strong{display:block;margin-bottom:.25rem}.guide-tips ul{margin:.15rem 0 0;padding-left:1rem}.guide-tips li{margin:.2rem 0}.guide-open-page{margin-top:.8rem}
.help-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.help-quick-grid a{display:flex;flex-direction:column;padding:.7rem;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text)}.help-quick-grid a:hover{border-color:#bfd0ff;background:var(--brand-soft)}.help-quick-grid span{font-size:.63rem;color:var(--muted)}.help-quick-grid b{font-size:.75rem;margin-top:.15rem}
@media(min-width:700px){.help-hero{grid-template-columns:minmax(0,1fr) minmax(280px,390px);padding:1.5rem}.help-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1050px){.help-layout{grid-template-columns:235px minmax(0,1fr)}.help-index{display:block;position:sticky;top:calc(var(--topbar-h) + 1rem);max-height:calc(100vh - var(--topbar-h) - 2rem);overflow:auto}}
@media(max-width:820px){
  .login-shell{display:block}.login-visual{display:none}.login-panel{min-height:100vh;padding:1.5rem;background:linear-gradient(180deg,#f5f8ff,#fff 38%)}
  .login-mobile-brand{display:flex}.loginbox{max-width:440px;background:#fff;padding:1.3rem;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
}

/* ── Responsive refinements ──────────────────────────────── */
@media(max-width:639px){
  h1{font-size:1.25rem}.brand-copy small{display:none}.topbar .brand{min-width:0}.topbar-inner{padding:0 .85rem;gap:.6rem}
  .brand-mark{width:42px;height:34px;flex-basis:42px;font-size:.6rem}.brand-copy strong{font-size:.95rem}.avatar{display:none}.logout-link{padding:.4rem;font-size:.7rem}
  .card{border-radius:10px;padding:.9rem}.kpi{min-height:94px}.kpi .val{font-size:1.25rem}
  .list li{align-items:flex-start}.list .end{white-space:normal}.filters{padding:.7rem}.filters .field{min-width:calc(50% - .35rem)}
  .filters .field:first-child{min-width:100%}.picker-search{align-items:stretch}.picker-search .btn{padding-left:.65rem;padding-right:.65rem}
  .app-footer{display:none}
  .document-toolbar{align-items:flex-start}.document-sheet{padding:1rem;min-height:0}.doc-header,.doc-parties,.doc-summary-row,.receipt-amount{grid-template-columns:1fr}
  .doc-title{text-align:left}.receipt-total{border-left:0;border-top:1px solid #cfd6df;text-align:left}.doc-signatures{grid-template-columns:1fr 1fr}
  .sign-public-main{width:calc(100% - 1rem);margin:.6rem auto 2rem}.sign-public-head{height:62px;padding:0 .85rem}.sign-doc-card,.sign-state-card{padding:1rem;border-radius:11px}.sign-doc-head{display:block}.secure-pill{display:inline-flex;margin-top:.6rem}.sign-customer{grid-template-columns:1fr}.signature-field canvas{height:190px}
  .context-help b{display:none}.context-help{padding:.35rem}.context-help span{width:22px;height:22px}.help-flow .card-head{align-items:flex-start}.help-flow .badge{display:none}
}

@media print{
  @page{size:A4;margin:9mm}
  .topbar,.bottomnav,.sidenav,.noprint,.app-footer{display:none!important}html,body{background:#fff!important}.shell{display:block}.wrap,.main{padding:0!important;margin:0!important}
  .card{box-shadow:none;border:0;padding:0}.content-frame{max-width:none}.document-sheet{max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
  .print-only{display:block!important}.doc-table tr,.doc-parties,.doc-signatures{break-inside:avoid}.doc-header{break-after:avoid}
  a{color:inherit!important;text-decoration:none!important}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ── กระดิ่งแจ้งเตือนบน topbar (เฟส 1) ─────────────────────── */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;border:1px solid #41628c;background:#17395f;color:#e7eef8}
.bell:hover{background:#244c7f;border-color:#6686ad;color:#fff}
.bell svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.bell.has-unread{border-color:#d92d20}
.bell-count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:99px;
  background:#d92d20;color:#fff;font-size:.62rem;font-weight:850;border:2px solid #0a1f3f}

/* ── แถบคะแนนผู้สนใจ (Lead Scoring) ────────────────────────── */
.score-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-3);margin-top:.35rem}
.score-bar span{display:block;height:100%}
.s-status{background:#1570ef}.s-source{background:#7a5af8}
.s-recency{background:#079455}.s-activity{background:#dc6803}.s-deal{background:#0ba5ec}
.score-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.45rem;font-size:.72rem;color:var(--muted)}
.score-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:middle}
.score-big{font-size:2rem;font-weight:850;line-height:1;letter-spacing:-.03em}
/* ไอคอน SVG ในรายการ (หน้างานติดตาม/แจ้งเตือน) — ไม่มีกฎนี้จะกลายเป็นก้อนทึบสีดำ */
.list .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
/* หัวข้อย่อยในเอกสาร (ใบแจ้งหนี้/สัญญา) */
.doc-subhead{font-size:.86rem;font-weight:800;margin:1rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid #dfe4eb}