@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+Thai:wght@500;600&display=swap');
/* ── tokens: light (bare :root defines the complete palette) ─────────── */
:root{
  --ground:#F3F5F2;      /* paper with a faint celadon bias */
  --surface:#FBFCFA;
  --surface-2:#EDF0EC;
  --line:#DDE2DC;
  --line-soft:#E7EBE5;
  --ink:#1A211E;
  --ink-2:#4A554F;
  --ink-3:#78837C;
  --accent:#356F60;      /* Sawankhalok celadon, deepened */
  --accent-soft:#DCE9E4;
  --ochre:#9A6F24;       /* "worth attention" */
  --ochre-soft:#F0E5CE;
  --madder:#9C3F2B;      /* escalation. used on <5% of results */
  --madder-soft:#F2DED8;
  --band:#E2E9E3;        /* reference band fill on the position line */
  --ghost:#B6BFB8;
  --shadow:0 1px 2px rgba(26,33,30,.05), 0 8px 24px -14px rgba(26,33,30,.22);
  --r:14px;
  --maxw:600px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#121615;
    --surface:#191F1D;
    --surface-2:#212826;
    --line:#2C3532;
    --line-soft:#242B29;
    --ink:#E6EAE7;
    --ink-2:#A3AEA8;
    --ink-3:#7A857F;
    --accent:#6FB19D;
    --accent-soft:#1E2C29;
    --ochre:#CFA254;
    --ochre-soft:#2E2818;
    --madder:#D9765F;
    --madder-soft:#33201B;
    --band:#232C2A;
    --ghost:#4A544F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#121615; --surface:#191F1D; --surface-2:#212826;
  --line:#2C3532; --line-soft:#242B29;
  --ink:#E6EAE7; --ink-2:#A3AEA8; --ink-3:#7A857F;
  --accent:#6FB19D; --accent-soft:#1E2C29;
  --ochre:#CFA254; --ochre-soft:#2E2818;
  --madder:#D9765F; --madder-soft:#33201B;
  --band:#232C2A; --ghost:#4A544F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans Thai","Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; line-height:1.3}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.serif{font-family:"Noto Serif Thai",Georgia,serif}
.lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em;
     text-transform:uppercase; color:var(--ink-3); font-weight:500}

/* ── shell ───────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px 96px}

.topbar{display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 14px; gap:12px}
.brand{display:flex; align-items:baseline; gap:9px; min-width:0}
.brand .mark{font-size:17px; line-height:1}
.brand h1{font-family:"Noto Serif Thai",Georgia,serif; font-size:19px; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap}
.brand .by{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap}

/* provenance strip — the Thai-market trust lever */
.prov{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:11px 14px; border:1px solid var(--line-soft); border-radius:10px;
  background:var(--surface); margin-bottom:14px}
.prov .k{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.prov .v{font-size:13px; color:var(--ink-2)}
.demo-chip{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ochre);
  background:var(--ochre-soft); padding:3px 8px; border-radius:20px; white-space:nowrap}

/* the honest opener — panel-level base-rate statement */
.opener{border-left:2px solid var(--accent); padding:2px 0 2px 16px; margin:22px 0 26px}
.opener .big{font-family:"Noto Serif Thai",Georgia,serif; font-size:20px; font-weight:500;
  line-height:1.5; letter-spacing:-.005em}
.opener .sub{font-size:13.5px; color:var(--ink-2); margin-top:7px; max-width:46ch}

/* ── escalation card: calm, specific, singular ───────────────────────── */
.esc{border:1px solid var(--madder); border-radius:var(--r); background:var(--surface);
  padding:16px 18px; margin-bottom:20px; display:flex; gap:14px; align-items:flex-start}
.esc .glyph{flex:none; width:22px; height:22px; margin-top:2px; color:var(--madder)}
.esc h3{font-size:14.5px; color:var(--madder); margin-bottom:4px}
.esc p{font-size:13.5px; color:var(--ink-2)}
.esc ul{margin:8px 0 0; padding-left:17px; font-size:13.5px; color:var(--ink-2)}
.esc li{margin-bottom:3px}
.esc.prompt{border-color:var(--ochre)}
.esc.prompt h3, .esc.prompt .glyph{color:var(--ochre)}

/* ── upload ──────────────────────────────────────────────────────────── */
.drop{border:1.5px dashed var(--line); border-radius:var(--r); background:var(--surface);
  padding:26px 20px; text-align:center; transition:border-color .18s, background .18s;
  margin-bottom:26px}
.drop.hot{border-color:var(--accent); background:var(--accent-soft)}
.drop .ico{color:var(--accent); margin-bottom:8px}
.drop h3{font-size:15px; margin-bottom:4px}
.drop p{font-size:13px; color:var(--ink-3); max-width:38ch; margin:0 auto}
.drop .acts{display:flex; gap:9px; justify-content:center; margin-top:15px; flex-wrap:wrap}

.btn{border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  padding:8px 15px; border-radius:9px; font-size:13.5px; font-weight:500;
  transition:border-color .15s, background .15s}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--surface)}
:root[data-theme="dark"] .btn.primary,
:root:not([data-theme="light"]) .btn.primary{color:#121615}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn.primary{color:#FBFCFA}}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:none}
.btn:disabled{opacity:.45; cursor:default}
.btn.sm{padding:5px 11px; font-size:12.5px}

.status{display:none; align-items:center; gap:10px; padding:13px 15px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13.5px}
.status.on{display:flex}
.status.err{border-color:var(--madder); color:var(--madder)}
.spin{width:15px; height:15px; flex:none; border:2px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── marker groups & rows ────────────────────────────────────────────── */
.group{margin-bottom:30px}
.group-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:2px}
.group-head .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}

.row{display:grid; grid-template-columns:1fr 118px; gap:4px 14px; align-items:center;
  width:100%; text-align:left; padding:13px 2px; border-bottom:1px solid var(--line-soft);
  transition:background .14s}
.row:hover{background:var(--surface)}
.row:last-child{border-bottom:none}
.row .nm{font-size:14.5px; font-weight:500; line-height:1.35}
.row .sub{grid-column:1; font-size:12px; color:var(--ink-3); line-height:1.4}
.row .val{grid-column:2; grid-row:1; text-align:right; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:16px; font-weight:500; letter-spacing:-.02em}
.row .val .u{font-size:10px; color:var(--ink-3); margin-left:3px; letter-spacing:0}
.row .line{grid-column:2; grid-row:2; padding-top:3px}
.row .flag{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; margin-left:7px; vertical-align:1px}
.flag.att{color:var(--ochre)} .flag.esc{color:var(--madder)} .flag.ok{color:var(--ink-3)}

/* ── the position line (signature element) ───────────────────────────── */
.pline{display:block; width:100%; overflow:visible}

/* ── detail sheet ────────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(10,14,13,.5); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .22s; z-index:40}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{position:fixed; z-index:50; left:50%; transform:translate(-50%,102%);
  bottom:0; width:min(600px,100%); max-height:92dvh; overflow-y:auto;
  background:var(--ground); border-radius:20px 20px 0 0; border:1px solid var(--line);
  border-bottom:none; box-shadow:var(--shadow); transition:transform .28s cubic-bezier(.22,.9,.3,1)}
.sheet.on{transform:translate(-50%,0)}
.sheet-in{padding:10px 22px 40px}
.grab{width:34px; height:4px; border-radius:4px; background:var(--line);
  margin:0 auto 14px; display:block}
.sheet-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  margin-bottom:20px}
.sheet h2{font-family:"Noto Serif Thai",Georgia,serif; font-size:21px; letter-spacing:-.01em}
.sheet .en{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  letter-spacing:.06em; margin-top:2px}
.x{width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2)}
.x:hover{background:var(--surface-2)}

.hero-n{display:flex; align-items:baseline; gap:9px; margin-bottom:2px}
.hero-n .n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:56px; font-weight:400; line-height:1; letter-spacing:-.035em}
.hero-n .u{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-3)}
.verdict{font-size:15px; line-height:1.6; color:var(--ink); margin-top:12px; max-width:48ch}
.verdict b{font-weight:600}

.card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:17px 18px; margin-top:16px}
.card h3{font-size:13px; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.card h3 .dot{width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}
.card p{font-size:13.8px; color:var(--ink-2); line-height:1.68}
.card p + p{margin-top:9px}
.card .q{font-family:"Noto Serif Thai",Georgia,serif; font-size:15px; color:var(--ink);
  line-height:1.6; font-weight:500}

.plainline{margin:22px 0 6px}
.anchors{display:flex; justify-content:space-between; gap:10px; margin-top:5px}
.anchors span{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3)}

.trend-wrap{margin-top:6px}
.note{font-size:12.5px; color:var(--ink-3); line-height:1.6; margin-top:9px}

/* confirm table */
.conf-row{display:grid; grid-template-columns:1fr 96px 74px; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line-soft)}
.conf-row .nm{font-size:13.5px}
.conf-row input{width:100%; font-family:"IBM Plex Mono",monospace; font-size:14px;
  text-align:right; padding:6px 9px; border-radius:7px; border:1px solid var(--line);
  background:var(--ground); color:var(--ink); font-variant-numeric:tabular-nums}
.conf-row input:focus{outline:2px solid var(--accent); outline-offset:1px}
.conf-row.low input{border-color:var(--ochre); background:var(--ochre-soft)}
.conf-row .st{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); text-align:right}
.conf-row.low .st{color:var(--ochre)}

.foot{margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.7}
.foot a{color:var(--ink-2)}
.foot .row2{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}

.empty{text-align:center; padding:40px 20px; color:var(--ink-3); font-size:14px}

/* ── ปรึกษาโค้ช ──────────────────────────────────────────────────────── */
.consult{display:flex; gap:15px; align-items:flex-start; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:17px 18px; margin:30px 0 6px; transition:border-color .15s}
.consult:hover{border-color:var(--accent)}
.consult .cmark{flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; font-size:16px}
.consult h3{font-family:"Noto Serif Thai",Georgia,serif; font-size:16px; margin-bottom:3px}
.consult p{font-size:13px; color:var(--ink-2); line-height:1.6}
.consult .go{margin-left:auto; align-self:center; color:var(--ink-3); font-size:18px}

.seg{display:grid; gap:8px; margin-bottom:14px}
.seg button{display:block; width:100%; text-align:left; border:1px solid var(--line);
  border-radius:10px; padding:11px 14px; background:var(--ground); transition:.15s}
.seg button:hover{border-color:var(--ink-3)}
.seg button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.seg .t{display:block; font-size:14px; font-weight:500}
.seg .d{display:block; font-size:12px; color:var(--ink-3); line-height:1.5; margin-top:2px}

.field{display:block; margin-bottom:12px}
.field > span{display:block; margin-bottom:4px}
.field input, .field textarea, .field select{width:100%; padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:var(--ground); color:var(--ink); font:inherit;
  font-size:14px}
.field textarea{min-height:92px; resize:vertical; line-height:1.6}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px}

.attach{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; background:var(--ground); margin-bottom:6px;
  cursor:pointer}
.attach input{margin-top:3px; accent-color:var(--accent); flex:none; width:16px; height:16px}
.attach > span{min-width:0}
.attach .t{display:block; font-size:13.5px; font-weight:500}
.attach .d{display:block; font-size:12px; color:var(--ink-3); line-height:1.55; margin-top:3px}
.ring{flex:none; width:96px; height:96px; display:block}

.reqrow{width:100%; text-align:left; display:grid; grid-template-columns:1fr auto; gap:3px 12px;
  padding:13px 2px; border-bottom:1px solid var(--line-soft)}
.reqrow:hover{background:var(--surface-2)}
.reqrow .who{font-size:14px; font-weight:500}
.reqrow .meta{grid-column:1; font-size:12px; color:var(--ink-3)}
.reqrow .badge{grid-row:1; grid-column:2; font-family:"IBM Plex Mono",monospace; font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; padding:3px 8px; border-radius:20px;
  background:var(--surface-2); color:var(--ink-3); height:fit-content; white-space:nowrap}
.reqrow .badge.new{background:var(--accent-soft); color:var(--accent)}
.warnbox{border:1px solid var(--ochre); background:var(--ochre-soft); border-radius:10px;
  padding:12px 14px; font-size:12.5px; line-height:1.65; color:var(--ink-2); margin-bottom:16px}
.warnbox b{color:var(--ochre)}

/* ── สรุปสิ่งที่ควรโฟกัส — หัวใจของหน้าแรก ──────────────────────────── */
.focus{margin:24px 0 6px}
.focus-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:11px}
.focus-head h2{font-family:"Noto Serif Thai",Georgia,serif; font-size:22px; letter-spacing:-.01em}
.focus-head .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  white-space:nowrap}
.thesis{border-left:2px solid var(--accent); padding:1px 0 1px 15px; margin:24px 0 18px}
.thesis p{font-family:"Noto Serif Thai",Georgia,serif; font-size:16.5px; line-height:1.62;
  font-weight:500}
.thesis .sub{font-family:"IBM Plex Sans Thai",sans-serif; font-size:13.5px; font-weight:400;
  color:var(--ink-2); margin-top:8px; line-height:1.65}

.fcard{display:grid; grid-template-columns:22px 1fr auto; gap:4px 13px; width:100%;
  text-align:left; align-items:baseline; border:1px solid var(--line-soft); border-radius:12px;
  background:var(--surface); padding:15px 16px; margin-bottom:9px; transition:border-color .15s}
.fcard:hover{border-color:var(--ink-3)}
.fcard .rank{grid-row:1; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.fcard .nm{font-size:15px; font-weight:600}
.fcard .val{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:20px; font-weight:500; letter-spacing:-.025em; text-align:right}
.fcard .val .u{font-size:10px; color:var(--ink-3); margin-left:3px; letter-spacing:0}
.fcard .rz{grid-column:2/4; font-size:13px; color:var(--ink-2); line-height:1.6; margin-top:2px}
.fcard .ln{grid-column:2/4; margin-top:8px; max-width:280px}
.fcard.esc{border-color:var(--madder)}
.fcard.esc .rank{color:var(--madder)}

.allbtn{width:100%; border:1px dashed var(--line); border-radius:11px; padding:12px;
  font-size:13.5px; color:var(--ink-2); margin-top:6px; transition:.15s}
.allbtn:hover{border-color:var(--ink-3); color:var(--ink)}
.hidden{display:none}
.calm{border:1px solid var(--line-soft); border-radius:12px; background:var(--surface);
  padding:16px 18px; font-size:14px; color:var(--ink-2); line-height:1.65}

/* ── ให้คะแนนตัวเอง ──────────────────────────────────────────────────── */
.selfnum{display:flex; align-items:baseline; justify-content:center; gap:7px; margin:4px 0 10px}
.selfnum .mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:48px; font-weight:500; letter-spacing:-.035em; color:var(--accent)}
.selfnum .of{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-3)}
.slider{width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--line),var(--accent-soft)); outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--accent); border:3px solid var(--surface);
  box-shadow:var(--shadow); cursor:pointer}
.slider::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--accent);
  border:3px solid var(--surface); cursor:pointer}
.slider-ends{display:flex; justify-content:space-between; margin-top:8px}
.slider-ends span{font-size:11.5px; color:var(--ink-3)}

.gapline{display:block; width:100%; margin:2px 0 12px}
.guessbox{border-left:2px solid var(--line); padding-left:13px; margin-top:13px}
.guessbox .r{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.guessbox.hit{border-color:var(--accent)}
.guessbox.hit .r{color:var(--accent)}
.rerate{font-size:12.5px; color:var(--ink-3); text-decoration:underline; margin-top:13px;
  padding:0; display:inline-block}
.rerate:hover{color:var(--ink)}
html{color-scheme:light dark}
img{max-width:100%}
[hidden]{display:none!important}