/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — UI Components  (โหลดต่อจาก app.css)
   pricing · security · onboarding wizard · org chart · forms
   Blueprint ref: เล่ม 21 Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. TOPBAR STEPPER  (หน้า onboarding)
   ───────────────────────────────────────────────────────────── */
.steps{display:flex;align-items:center;gap:0;margin-inline:auto;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:9px;padding:0 6px;flex-shrink:0}
.step__n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-size:12px;font-weight:800;color:var(--tx-3);
  border:1.5px solid var(--line);background:var(--bg-tile);transition:all .25s var(--ease)}
.step__t{font-size:13px;font-weight:500;color:var(--tx-3);white-space:nowrap}
.step__bar{width:34px;height:1.5px;background:var(--line);flex-shrink:0;margin:0 2px}

.step.done .step__n{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}
.step.done .step__t{color:var(--tx-2)}
.step.done + .step__bar{background:var(--blue)}
.step.now .step__n{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent;
  box-shadow:0 0 0 4px rgba(46,139,255,.18)}
.step.now .step__t{color:var(--blue-hi);font-weight:700}
.step.now{position:relative}
.step.now::after{content:"";position:absolute;left:6px;right:6px;bottom:-13px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* ─────────────────────────────────────────────────────────────
   B. TOGGLE SWITCH
   ───────────────────────────────────────────────────────────── */
.swap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.swap__l{line-height:1.35}
.swap__t{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.swap__s{font-size:12px;color:var(--tx-3);margin-top:4px}
.tagsave{padding:2.5px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.3px;
  color:#0A2E1B;background:linear-gradient(135deg,#4CE39A,#22B573)}

.sw{position:relative;width:56px;height:30px;border-radius:999px;flex-shrink:0;
  border:1px solid var(--line);background:var(--bg-input);cursor:pointer;transition:background .25s,border-color .25s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#E8F1FF;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .28s var(--ease),background .28s}
.sw[aria-checked="true"]{background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}
.sw[aria-checked="true"]::after{transform:translateX(26px)}
.sw--sm{width:40px;height:22px}
.sw--sm::after{width:16px;height:16px;top:2px;left:2px}
.sw--sm[aria-checked="true"]::after{transform:translateX(18px)}

/* ─────────────────────────────────────────────────────────────
   C. TRUST STRIP  (แถบการันตี)
   ───────────────────────────────────────────────────────────── */
.assure{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:22px}
.assure__i{display:flex;align-items:center;gap:12px;padding:16px 18px;border-right:1px solid var(--line-soft)}
.assure__i:last-child{border-right:0}
.assure__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 26%,transparent)}
.assure__t{font-size:13.2px;font-weight:700}
.assure__s{font-size:11.5px;color:var(--tx-3);margin-top:2px}

/* ─────────────────────────────────────────────────────────────
   D. PRICING PLAN CARD
   ───────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;
  border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.plan:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tone,#3B8CFF) 55%,transparent);
  box-shadow:0 22px 50px rgba(8,40,110,.34)}
.plan--hero{border-color:color-mix(in srgb,var(--tone,#3B8CFF) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tone,#3B8CFF) 24%,transparent),0 20px 46px rgba(8,40,110,.3)}
.plan__flag{position:absolute;top:-11px;right:16px;padding:4px 12px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,#8B7CFF,#5B4BD6);box-shadow:0 6px 16px rgba(90,70,220,.42)}
.plan__hd{display:flex;align-items:center;gap:11px}
.plan__n{font-size:19px;font-weight:800;letter-spacing:-.4px}
.plan__d{margin-top:12px;font-size:12.8px;line-height:1.5;color:var(--tx-3);min-height:38px}
.plan__price{margin-top:16px;display:flex;align-items:baseline;gap:7px}
.plan__amt{font-size:38px;font-weight:800;letter-spacing:-1.6px;line-height:1}
.plan__amt--gr{background:linear-gradient(100deg,#8B7CFF,#5AAEFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.plan__per{font-size:12.5px;color:var(--tx-3)}
.plan__bill{margin-top:7px;font-size:11.5px;color:var(--tx-4)}
.plan__cta{margin:17px 0 18px;display:flex;align-items:center;justify-content:center;padding:12px;
  border-radius:11px;font-size:14px;font-weight:700;transition:all .22s var(--ease)}
.plan__cta--ghost{border:1.5px solid color-mix(in srgb,var(--tone,#3B8CFF) 46%,transparent);
  color:var(--tone,var(--blue-hi));background:transparent}
.plan__cta--ghost:hover{background:color-mix(in srgb,var(--tone,#3B8CFF) 14%,transparent)}
.plan__cta--solid{color:#fff;border:1.5px solid transparent;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tone,#3B8CFF) 82%,#fff),var(--tone,#3B8CFF));
  box-shadow:0 6px 18px color-mix(in srgb,var(--tone,#3B8CFF) 34%,transparent)}
.plan__cta--solid:hover{filter:brightness(1.1)}
.plan__inc{font-size:12px;color:var(--tx-3);margin-bottom:11px}
.plan__ul{display:grid;gap:9px;flex:1;align-content:start}
.plan__ul li{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;color:var(--tx-2);line-height:1.4}
.plan__ul svg{flex-shrink:0;margin-top:1px;color:var(--tone,var(--blue-hi))}
.plan__more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:13px;font-weight:600;color:var(--tx-2);transition:color .2s}
.plan__more:hover{color:var(--tone,var(--blue-hi))}
.plan__more svg{transition:transform .22s var(--ease)}
.plan__more:hover svg{transform:translateX(4px)}

/* ─────────────────────────────────────────────────────────────
   E. COMPARISON TABLE
   ───────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13.2px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
.tbl thead th{font-size:12.5px;font-weight:700;color:var(--tx-2);background:var(--bg-tile)}
.tbl thead th:first-child{border-top-left-radius:var(--r-lg)}
.tbl thead th:last-child{border-top-right-radius:var(--r-lg)}
.tbl tbody th{font-weight:600;color:var(--tx-2)}
.tbl tbody td{color:var(--tx);font-variant-numeric:tabular-nums}
.tbl tbody tr:hover{background:var(--bg-hover)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card)}
.grid--compare{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
@media (max-width:1180px){.grid--compare{grid-template-columns:minmax(0,1fr)}}

/* ─────────────────────────────────────────────────────────────
   F. EXPERT / HELP CARD
   ───────────────────────────────────────────────────────────── */
.expert{position:relative;overflow:hidden;padding:22px}
.expert__glow{position:absolute;right:-40px;top:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,139,255,.28),transparent 68%);pointer-events:none}
.faces{display:flex;margin:16px 0 18px}
.faces i{width:42px;height:42px;border-radius:50%;margin-left:-10px;display:grid;place-items:center;
  font-style:normal;font-size:13px;font-weight:800;color:#fff;border:2.5px solid var(--bg-card);
  background:linear-gradient(135deg,var(--av-a,#3B8CFF),var(--av-b,#1C63D6))}
.faces i:first-child{margin-left:0}
.faces i:nth-child(2){--av-a:#F472B6;--av-b:#BE2C74}
.faces i:nth-child(3){--av-a:#2DD4BF;--av-b:#12907F}
.faces i:nth-child(4){--av-a:#FB923C;--av-b:#D2691B}
.expert__tel{margin-top:12px;font-size:12.5px;color:var(--tx-3)}
.expert__tel b{color:var(--tx-2);font-weight:600}

/* ─────────────────────────────────────────────────────────────
   G. SECURITY PAGE
   ───────────────────────────────────────────────────────────── */
.sechero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,.85fr);
  gap:26px;align-items:center;margin-bottom:24px}
.sechero__t{display:flex;align-items:center;gap:16px}
.sechero__p{margin-top:16px;font-size:13.8px;line-height:1.68;color:var(--tx-2);max-width:460px}
.secpts{display:grid;gap:18px}
.secpt{display:flex;gap:13px}
.secpt__t{font-size:14.2px;font-weight:700}
.secpt__s{font-size:12.5px;line-height:1.55;color:var(--tx-3);margin-top:4px}

.shield{position:relative;display:grid;place-items:center;min-height:230px}
.shield svg{width:100%;max-width:330px;height:auto}

.secgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1.05fr);gap:18px;margin-bottom:18px}
.frame{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.frame__i{display:flex;gap:11px;padding:13px;border-radius:12px;border:1px solid var(--line-soft);
  background:var(--bg-tile);transition:border-color .22s,background .22s,transform .22s var(--ease)}
.frame__i:hover{border-color:var(--line-hot);background:var(--bg-hover);transform:translateY(-2px)}
.frame__t{font-size:12.8px;font-weight:700;line-height:1.3}
.frame__s{font-size:11px;line-height:1.45;color:var(--tx-3);margin-top:4px}
.frame__i--wide{grid-column:1/-1}

.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.cert{padding:15px 9px;border-radius:13px;text-align:center;border:1px solid var(--line-soft);
  background:var(--bg-tile);transition:border-color .22s,transform .22s var(--ease)}
.cert:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.cert__seal{width:56px;height:56px;margin:0 auto 10px}
.cert__t{font-size:12.5px;font-weight:800}
.cert__s{font-size:9.8px;line-height:1.35;color:var(--tx-3);margin-top:4px}

.resid{display:grid;gap:9px;margin-bottom:14px}
.resid__i{display:flex;align-items:flex-start;gap:9px}
.resid__i svg{flex-shrink:0;margin-top:2px;color:var(--up)}
.resid__t{font-size:13px;font-weight:600}
.resid__s{font-size:11.5px;color:var(--tx-3)}
.wmap{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
  background:rgba(9,20,42,.5);margin-bottom:14px}
.wmap svg{width:100%;height:auto;display:block}

.secfeat{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}

/* ─────────────────────────────────────────────────────────────
   H. FORMS
   ───────────────────────────────────────────────────────────── */
.fsec{margin-bottom:26px}
.fsec:last-child{margin-bottom:0}
.fsec__t{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px}
.fgrid--2{grid-template-columns:repeat(2,1fr)}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f__l{font-size:12.5px;font-weight:600;color:var(--tx-2)}
.f__l i{color:var(--red);font-style:normal;margin-left:2px}
.f__l small{color:var(--tx-4);font-weight:400;margin-left:4px}
.f__wrap{position:relative;display:flex;align-items:center}
.f__ic{position:absolute;left:12px;color:var(--tx-4);pointer-events:none;z-index:1}
.f__in{width:100%;height:44px;padding:0 13px 0 38px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg-input);color:var(--tx);font-size:13.8px;
  transition:border-color .2s,box-shadow .2s}
.f__in::placeholder{color:var(--tx-4)}
.f__in:focus{outline:none;border-color:var(--line-hot);box-shadow:0 0 0 3px rgba(46,139,255,.14)}
select.f__in{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E84A6' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.f__flag{position:absolute;left:12px;font-size:15px;line-height:1;z-index:1}
.f--inline{flex-direction:row;align-items:center;gap:9px}
.f--inline .f__l{white-space:nowrap;color:var(--tx-3)}

.fbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding:16px 20px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-card-2)}
.fbar__note{display:flex;align-items:center;gap:11px}
.fbar__t{font-size:13px;font-weight:600}
.fbar__s{font-size:11.5px;color:var(--tx-3);margin-top:2px}
.fbar__act{display:flex;gap:11px;flex-wrap:wrap}

/* ─────────────────────────────────────────────────────────────
   I. COPILOT SIDE PANEL
   ───────────────────────────────────────────────────────────── */
.cpanel__hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cpanel__bot{width:44px;height:44px;flex-shrink:0}
.cpanel__n{font-size:15.5px;font-weight:800;color:var(--blue-hi)}
.cpanel__st{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--up);margin-top:2px}
.bubble{padding:13px 15px;border-radius:14px 14px 14px 4px;font-size:13.2px;line-height:1.6;color:var(--tx-2);
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.bubble + .bubble{margin-top:9px}
.bubble__time{display:block;font-size:10.5px;color:var(--tx-4);margin-top:8px}
.qlist{display:grid;gap:9px;margin-top:13px}
.q{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:11px 13px;border-radius:11px;
  text-align:left;font-size:12.8px;color:var(--tx-2);
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.q:hover{border-color:var(--line-hot);color:var(--tx);background:var(--bg-hover);transform:translateX(3px)}
.q svg{flex-shrink:0;color:var(--tx-4)}
.q:hover svg{color:var(--blue-hi)}

.wlist{display:grid;gap:10px}
.wlist li{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;color:var(--tx-2);line-height:1.45}
.wlist svg{flex-shrink:0;margin-top:1px;color:var(--up)}
.nlist{display:grid;gap:11px;counter-reset:n}
.nlist li{display:flex;align-items:flex-start;gap:11px;font-size:12.8px;color:var(--tx-2)}
.nlist li::before{counter-increment:n;content:counter(n);width:21px;height:21px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--blue-hi);
  background:rgba(46,139,255,.14);border:1px solid rgba(77,163,255,.26)}
.nlist li.on{color:var(--blue-hi);font-weight:600}

/* onboarding-specific bits */
.split--wizard{grid-template-columns:minmax(0,1fr) 340px}
.newcard{display:flex;align-items:flex-start;gap:14px;max-width:420px;
  border-color:rgba(77,163,255,.26);background:linear-gradient(120deg,rgba(46,139,255,.14),rgba(56,189,248,.06))}
.newcard__a{display:inline-flex;align-items:center;gap:6px;margin-top:9px}
.rcop--block{display:block;padding:15px}
.rcop__s--wrap{white-space:normal;margin:5px 0 12px;line-height:1.5}
.rail__foot--col{flex-direction:column;align-items:flex-start;gap:2px;font-size:11.5px}
.seccard{display:flex;align-items:center;gap:13px}
.seccard__tx{flex:1;min-width:0}
.seccard__tx .frame__s{display:block}
@media (max-width:1400px){.split--wizard{grid-template-columns:minmax(0,1fr)}}

/* ─────────────────────────────────────────────────────────────
   J. ORG CHART
   ───────────────────────────────────────────────────────────── */
.canvas{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-card-2);padding:26px 20px;overflow:auto;min-height:520px;
  background-image:radial-gradient(circle,rgba(90,150,235,.10) 1px,transparent 1px);background-size:22px 22px}
.chart{display:flex;flex-direction:column;align-items:center;min-width:1020px}
.node{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-card);box-shadow:var(--shadow-card);
  transition:border-color .22s,transform .22s var(--ease),box-shadow .22s;cursor:pointer}
.node:hover{border-color:var(--line-hot);transform:translateY(-2px)}
.node.sel{border-color:var(--tone,#2ED47A);box-shadow:0 0 0 2px color-mix(in srgb,var(--tone,#2ED47A) 26%,transparent)}
.node__t{font-size:13.2px;font-weight:700;white-space:nowrap}
.node__s{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tx-3);margin-top:2px}
.node--root{padding:13px 19px}

.trunk{width:1.5px;height:22px;background:var(--line);flex-shrink:0}
.deps{display:flex;align-items:flex-start;justify-content:center;gap:14px;position:relative;padding-top:22px}
.deps::before{content:"";position:absolute;top:0;left:6%;right:6%;height:1.5px;background:var(--line)}
.dep{display:flex;flex-direction:column;align-items:center;position:relative}
.dep::before{content:"";position:absolute;top:-22px;width:1.5px;height:22px;background:var(--line)}
.teams{margin-top:16px;display:grid;gap:8px;position:relative;padding-left:16px;width:100%}
.teams::before{content:"";position:absolute;left:0;top:-16px;bottom:14px;width:1.5px;background:var(--line-soft)}
.team{display:flex;align-items:center;justify-content:space-between;gap:11px;position:relative;
  padding:8px 11px;border-radius:9px;font-size:12px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .2s}
.team::before{content:"";position:absolute;left:-16px;top:50%;width:16px;height:1.5px;background:var(--line-soft)}
.team:hover{border-color:var(--line-hot);background:var(--bg-hover)}
.team b{font-weight:600;color:var(--tx-2);white-space:nowrap}
.team span{font-size:11px;font-weight:700;color:var(--tx-4);font-variant-numeric:tabular-nums}

.dropzone{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;padding:22px;
  border-radius:14px;border:1.5px dashed var(--line);color:var(--tx-3);font-size:13.5px;
  transition:border-color .22s,color .22s,background .22s}
.dropzone:hover{border-color:var(--line-hot);color:var(--tx-2);background:var(--bg-hover)}

.cbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.cbar__r{margin-left:auto;display:flex;gap:10px}
.zoom{display:flex;align-items:center;gap:2px;height:38px;padding:0 6px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-tile)}
.zoom button{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--tx-3)}
.zoom button:hover{color:var(--tx);background:var(--bg-hover)}
.zoom span{font-size:12px;font-weight:600;color:var(--tx-2);min-width:42px;text-align:center}

/* detail panel */
.dpanel__hd{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line-soft);margin-bottom:15px;overflow-x:auto}
.dtab{padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--tx-3);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.dtab:hover{color:var(--tx-2)}
.dtab.on{color:var(--blue-hi);border-bottom-color:var(--blue-hi)}
.drow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);font-size:12.8px}
.drow:last-of-type{border-bottom:0}
.drow dt{color:var(--tx-3)}
.drow dd{margin:0;font-weight:700;text-align:right}
.person{display:flex;align-items:center;gap:11px;padding:11px 0}
.person i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-style:normal;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6)}
.person b{display:block;font-size:13.2px;font-weight:700}
.person span{font-size:11.5px;color:var(--tx-3)}

.sugg{padding:14px;border-radius:12px;border:1px solid rgba(46,212,122,.24);background:rgba(46,212,122,.07)}
.sugg__tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--up);margin-bottom:8px}
.sugg__p{font-size:12.5px;line-height:1.55;color:var(--tx-2)}
.sugg__btn{margin-top:11px}
.split--builder{grid-template-columns:minmax(0,1fr) 330px}
@media (max-width:1400px){.split--builder{grid-template-columns:minmax(0,1fr)}}

.donut{display:flex;align-items:center;gap:16px}
.donut--gap{margin:18px 0}
.unit{font-size:14px;color:var(--tx-3);font-weight:600}
.wg__s--mb{margin-bottom:14px}
.loadmore--mt{margin-top:14px}
.trusted{text-align:center;margin-top:34px}
.donut svg{width:74px;height:74px;flex-shrink:0}
.donut__v{font-size:15px;font-weight:800;fill:var(--tx)}
.donut__k{font-size:7.5px;fill:var(--tx-3)}

.legend{display:grid;gap:9px;font-size:12px;color:var(--tx-3)}
.legend li{display:flex;align-items:center;gap:11px}
.legend b{display:inline-block;width:30px;height:0;border-top:1.5px solid var(--tx-3);flex-shrink:0}
.legend b.dash{border-top-style:dashed}

/* ─────────────────────────────────────────────────────────────
   K. WIZARD  (AI Setup)
   ───────────────────────────────────────────────────────────── */
.wsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:22px}
.wstep{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:13px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.wstep:hover{border-color:var(--line-hot)}
.wstep.on{border-color:var(--line-hot);background:rgba(46,139,255,.11)}
.wstep__n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  font-size:13px;font-weight:800;color:var(--tx-3);border:1px solid var(--line);background:var(--bg-card)}
.wstep.on .wstep__n{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}
.wstep__t{font-size:13.2px;font-weight:700;white-space:nowrap}
.wstep__s{font-size:11px;color:var(--tx-3);margin-top:2px;white-space:nowrap}

.mods3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.msel{position:relative;display:flex;flex-direction:column;padding:16px;border-radius:14px;
  border:1.5px solid var(--line-soft);background:var(--bg-tile);text-align:left;
  transition:border-color .22s,background .22s,transform .22s var(--ease)}
.msel:hover{border-color:var(--line-hot);transform:translateY(-2px)}
.msel[aria-checked="true"]{border-color:color-mix(in srgb,var(--tone,#3B8CFF) 52%,transparent);
  background:color-mix(in srgb,var(--tone,#3B8CFF) 8%,transparent)}
.msel__hd{display:flex;align-items:flex-start;gap:12px}
.msel__n{font-size:14.2px;font-weight:800;letter-spacing:-.2px}
.msel__p{font-size:12px;line-height:1.5;color:var(--tx-3);margin-top:6px}
.msel__box{margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--bg-card);color:transparent;transition:all .2s}
.msel[aria-checked="true"] .msel__box{color:#04101F;border-color:transparent;
  background:linear-gradient(135deg,#4DA3FF,#2470E6)}
.msel__tag{align-self:flex-start;margin-top:13px;padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.4px;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 28%,transparent)}

.msel__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.msel__tags .msel__tag{margin-top:0}
.selall{width:auto;gap:9px;padding:8px 12px}
.selall .msel__box{margin-left:0;width:20px;height:20px;color:transparent}
.selall[aria-checked="true"] .msel__box{color:#04101F;border-color:transparent;
  background:linear-gradient(135deg,#4DA3FF,#2470E6)}
.band__brain{top:-190px;right:16%;width:440px;height:340px;opacity:.8}

/* autonomy level badge — เล่ม 08 §Level A–E (ใช้ร่วมทุกหน้า) */
.lvl{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.5px;white-space:nowrap;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 30%,transparent)}
.lvl--a{--tone:#6E84A6} .lvl--b{--tone:#38BDF8} .lvl--c{--tone:#2ED47A}
.lvl--d{--tone:#FB923C} .lvl--e{--tone:#FB7185}
.ag__hd .lvl{margin-top:6px}
.netmap{width:100%;height:auto}

.hintbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:16px;padding:15px 18px;border-radius:14px;
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.hintbar__t{display:flex;align-items:center;gap:12px}
.hintbar b{display:block;font-size:13.2px}
.hintbar span{display:block;font-size:11.8px;color:var(--tx-3);margin-top:2px}

.chklist{display:grid;gap:11px}
.chk2{display:flex;align-items:center;gap:11px;font-size:12.8px;color:var(--tx-3)}
.chk2 i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-style:normal;font-size:10px;font-weight:800;
  border:1px solid var(--line);background:var(--bg-tile);color:var(--tx-4)}
.chk2.done{color:var(--tx-2)}
.chk2.done i{color:#04101F;border-color:transparent;background:var(--up)}
.chk2.now{color:var(--blue-hi);font-weight:700}
.chk2.now i{color:#fff;border-color:transparent;background:linear-gradient(135deg,#3B92FF,#1C63D6)}

.meter{margin-bottom:14px}
.meter:last-child{margin-bottom:0}
.meter__r{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.meter__k{font-size:12.5px;color:var(--tx-2)}
.meter__v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.meter__b{height:6px;border-radius:99px;background:var(--bg-tile);overflow:hidden}
.meter__f{height:100%;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--tone,#3B8CFF),color-mix(in srgb,var(--tone,#3B8CFF) 50%,#5AAEFF))}
.meter__p{font-size:10.5px;color:var(--tx-4);margin-top:5px;text-align:right}

/* ─────────────────────────────────────────────────────────────
   L. LOGO PLACEHOLDER STRIP
   ───────────────────────────────────────────────────────────── */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px;margin-top:26px}
.logos i{display:grid;place-items:center;height:46px;border-radius:10px;font-style:normal;
  border:1px dashed rgba(111,132,166,.26);background:rgba(255,255,255,.012);
  font-size:9.5px;letter-spacing:1.2px;color:rgba(111,132,166,.7);transition:all .22s}
.logos i:hover{border-color:rgba(77,163,255,.32);color:var(--tx-2)}

/* ─────────────────────────────────────────────────────────────
   M. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width:1560px){
  .plans{grid-template-columns:repeat(3,1fr)}
  .secgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .secfeat{grid-template-columns:repeat(3,1fr)}
  .sechero{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .sechero .shield{grid-row:2;grid-column:1/-1}
}
@media (max-width:1400px){
  .assure{grid-template-columns:repeat(3,1fr)}
  .assure__i:nth-child(3){border-right:0}
  .wsteps{grid-template-columns:repeat(3,1fr)}
  .mods3{grid-template-columns:repeat(2,1fr)}
  .steps .step__t{display:none}
}
@media (max-width:1180px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .secgrid{grid-template-columns:minmax(0,1fr)}
  .secfeat{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .sechero{grid-template-columns:minmax(0,1fr)}
  .sechero .shield{grid-row:auto;grid-column:auto}
  .steps{display:none}
}
@media (max-width:680px){
  .plans,.assure,.fgrid,.fgrid--2,.frame,.secfeat,.wsteps,.mods3{grid-template-columns:minmax(0,1fr)}
  .assure__i{border-right:0;border-bottom:1px solid var(--line-soft)}
  .assure__i:last-child{border-bottom:0}
  .certs{grid-template-columns:repeat(2,1fr)}
  .fbar{flex-direction:column;align-items:stretch}
  .fbar__act .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .sw::after,.meter__f{transition:none!important}
}