:root{color-scheme:dark;
  --r-lg:22px;--r:16px;--r-sm:10px;
  --edge:inset 0 1px 0 rgba(255,255,255,.06);
  --lift:0 30px 60px -20px rgba(0,0,0,.65);
  --sans:'IBM Plex Sans Thai Looped','IBM Plex Sans Thai',system-ui,sans-serif;
  --serif:'Taviraj','Noto Serif Thai',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-xs:12.8px;--t-s:14px;--t-b:16px;--t-m:20px;--t-l:25px;--t-xl:31px;--t-2xl:39px;--t-3xl:49px;--t-4xl:61px;
}
/* ===== Theme: Aurora (default) — midnight indigo, violet → cyan, with pink & amber accents ===== */
:root,[data-theme="aurora"]{
  --bg:#0A0D1A;--bg-rgb:10,13,26;--bg2:#0D1121;--s1:#121729;--s1-rgb:18,23,41;--s1b:#171D33;--s2:#1B2240;--s2-rgb:27,34,64;--s3:#252D52;
  --inset:#0B0F1F;--side:#0C1020;--line:#252C4A;--line-soft:#1C2340;--line2:#2F3860;--line3:#414B7A;
  --tx:#EEF1FF;--tx2:#CDD3F2;--mu:#A3AACC;--mu2:#8189AF;--mu3:#646B90;
  --a1:#8B5CF6;--a1-rgb:139,92,246;--a1d:#6D28D9;--a1l:#C4B5FD;
  --a2:#22D3EE;--a2-rgb:34,211,238;--a3:#F472B6;--a3-rgb:244,114,182;--a4:#FBBF24;--a4-rgb:251,191,36;
  --brand:linear-gradient(120deg,#7C3AED 0%,#8B5CF6 30%,#6366F1 55%,#22D3EE 100%);--on-brand:#FFFFFF;
  --glow1:rgba(139,92,246,.35);--glow2:rgba(34,211,238,.22);--glow3:rgba(244,114,182,.18);
  --pos:#34D399;--pos-rgb:52,211,153;--neg:#FB7185;--neg-rgb:251,113,133;--warn:#FBBF24;--warn-rgb:251,191,36;--info:#60A5FA;--info-rgb:96,165,250;
}
/* ===== Theme: Emerald Royal — deep emerald with gold, sky & rose accents ===== */
[data-theme="emerald"]{
  --bg:#06110E;--bg-rgb:6,17,14;--bg2:#081612;--s1:#0D1C17;--s1-rgb:13,28,23;--s1b:#11241D;--s2:#152C24;--s2-rgb:21,44,36;--s3:#1D3A2F;
  --inset:#07130F;--side:#081511;--line:#1F3A30;--line-soft:#183026;--line2:#28493C;--line3:#3A6252;
  --tx:#ECFDF5;--tx2:#C9E9DC;--mu:#9CC2B2;--mu2:#77A08F;--mu3:#5B8273;
  --a1:#10B981;--a1-rgb:16,185,129;--a1d:#047857;--a1l:#6EE7B7;
  --a2:#F5C451;--a2-rgb:245,196,81;--a3:#38BDF8;--a3-rgb:56,189,248;--a4:#FB7185;--a4-rgb:251,113,133;
  --brand:linear-gradient(120deg,#047857 0%,#10B981 45%,#F5C451 100%);--on-brand:#03140D;
  --glow1:rgba(16,185,129,.32);--glow2:rgba(245,196,81,.2);--glow3:rgba(56,189,248,.16);
  --pos:#4ADE80;--pos-rgb:74,222,128;--neg:#F87171;--neg-rgb:248,113,113;--warn:#F5C451;--warn-rgb:245,196,81;--info:#38BDF8;--info-rgb:56,189,248;
}
/* ===== Theme: Sapphire — royal blue with gold, violet & teal accents ===== */
[data-theme="sapphire"]{
  --bg:#060B1C;--bg-rgb:6,11,28;--bg2:#081025;--s1:#0E1730;--s1-rgb:14,23,48;--s1b:#121D3B;--s2:#162344;--s2-rgb:22,35,68;--s3:#1E2E58;
  --inset:#070D21;--side:#081024;--line:#21305A;--line-soft:#1A2749;--line2:#2B3D70;--line3:#3D5290;
  --tx:#EEF3FF;--tx2:#CCD8F5;--mu:#9EB0D6;--mu2:#7A8CB4;--mu3:#5D6E96;
  --a1:#3B82F6;--a1-rgb:59,130,246;--a1d:#1D4ED8;--a1l:#93C5FD;
  --a2:#FBBF24;--a2-rgb:251,191,36;--a3:#A78BFA;--a3-rgb:167,139,250;--a4:#2DD4BF;--a4-rgb:45,212,191;
  --brand:linear-gradient(120deg,#1D4ED8 0%,#3B82F6 45%,#38BDF8 100%);--on-brand:#FFFFFF;
  --glow1:rgba(59,130,246,.34);--glow2:rgba(251,191,36,.16);--glow3:rgba(167,139,250,.2);
  --pos:#34D399;--pos-rgb:52,211,153;--neg:#F87171;--neg-rgb:248,113,113;--warn:#FBBF24;--warn-rgb:251,191,36;--info:#60A5FA;--info-rgb:96,165,250;
}
/* ===== Theme: Classic Gold — the previous look, kept as an option ===== */
[data-theme="gold"]{
  --bg:#121110;--bg-rgb:18,17,16;--bg2:#161412;--s1:#1A1816;--s1-rgb:26,24,22;--s1b:#1D1A17;--s2:#221F1C;--s2-rgb:34,31,28;--s3:#2A2622;
  --inset:#100F0D;--side:#141210;--line:#2E2A25;--line-soft:#24211D;--line2:#3A352F;--line3:#4A443C;
  --tx:#F0E9DC;--tx2:#D9D0C1;--mu:#B3AA9B;--mu2:#968D7F;--mu3:#7A7266;
  --a1:#C8A15A;--a1-rgb:200,161,90;--a1d:#8A6A33;--a1l:#EBD3A0;
  --a2:#4CC59A;--a2-rgb:76,197,154;--a3:#E2735F;--a3-rgb:226,115,95;--a4:#86A8E0;--a4-rgb:134,168,224;
  --brand:linear-gradient(135deg,#8A6A33 0%,#C8A15A 28%,#EBD3A0 50%,#C8A15A 72%,#8A6A33 100%);--on-brand:#1A1408;
  --glow1:rgba(200,161,90,.22);--glow2:rgba(200,161,90,.08);--glow3:rgba(76,197,154,.06);
  --pos:#4CC59A;--pos-rgb:76,197,154;--neg:#E2735F;--neg-rgb:226,115,95;--warn:#E3B95F;--warn-rgb:227,185,95;--info:#86A8E0;--info-rgb:134,168,224;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:var(--t-b);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"kern"}
a{color:inherit;text-decoration:none}
a:hover{color:var(--a1l)}
:focus-visible{outline:2px solid var(--a1l);outline-offset:2px;border-radius:6px}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-weight:500;font-family:var(--serif);letter-spacing:-.005em}
p{margin:0}
::selection{background:rgba(var(--a1-rgb),.35)}
.serif{font-family:var(--serif);font-weight:400}
/* numbers: aligned figures in the reading face; .fig = engraved serif figures for headline numbers */
.mono{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}
.fig{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.mu{color:var(--mu)}.mu2{color:var(--mu2)}.pos{color:var(--pos)}.neg{color:var(--neg)}.warn{color:var(--warn)}.acc{color:var(--a1)}
.k{font-size:var(--t-xs);color:var(--mu2);line-height:1.55}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:var(--t-m);color:var(--a1);letter-spacing:0}
.gold-text{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}
.grow{flex:1 1 auto;min-width:0}
.hide{display:none!important}

/* ---------- buttons: brushed gold with a sheen that answers hover ---------- */
.btn,.btn-o,.btn-s{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,box-shadow .2s,transform .2s}
.btn{background:var(--brand);background-size:200% 100%;background-position:0 0;color:var(--on-brand);border:0;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -10px rgba(var(--a1-rgb),.55);transition:background-position .6s ease,box-shadow .2s,transform .2s}
.btn:hover{color:var(--on-brand);background-position:100% 0;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 30px -10px rgba(var(--a1-rgb),.7)}
.btn:active{transform:translateY(1px)}
.btn-o{background:transparent;color:var(--tx);border:1px solid var(--line3)}
.btn-o:hover{border-color:var(--a1);color:var(--a1l)}
.btn-s{min-height:38px;padding:0 15px;font-size:13.5px;font-weight:400;border-radius:var(--r-sm);background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn-s:hover{border-color:var(--a1);color:var(--a1l)}
.btn-s.danger{color:var(--neg);border-color:rgba(var(--neg-rgb),.4)}
.btn-s.solid{background:var(--brand);background-size:200% 100%;border-color:transparent;color:var(--on-brand);font-weight:500;transition:background-position .6s ease}
.btn-s.solid:hover{background-position:100% 0;color:var(--on-brand)}
.btn.block,.btn-o.block{width:100%}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- surfaces: lacquer panels with a faint gilt top edge ---------- */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--edge)}
.pad{padding:24px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.5;padding:3px 11px;border-radius:999px;border:1px solid var(--line2);color:var(--mu)}
.pill.ok{background:rgba(var(--pos-rgb),.12);color:var(--pos);border-color:transparent}
.pill.warn{background:rgba(var(--warn-rgb),.12);color:var(--warn);border-color:transparent}
.pill.bad{background:rgba(var(--neg-rgb),.13);color:var(--neg);border-color:transparent}
.pill.info{background:rgba(var(--info-rgb),.12);color:var(--info);border-color:transparent}
.pill.gold{background:var(--brand);color:var(--on-brand);border-color:transparent;font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--mu3)}
.dot.ok{background:var(--pos);box-shadow:0 0 0 3px rgba(var(--pos-rgb),.15)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--neg)}

/* ---------- forms ---------- */
label.f{display:flex;flex-direction:column;gap:7px;font-size:var(--t-s);color:var(--tx2)}
.in{height:50px;border-radius:12px;border:1px solid var(--line2);background:var(--inset);color:var(--tx);padding:0 16px;font:inherit;font-size:var(--t-b);width:100%;transition:border-color .2s,box-shadow .2s}
textarea.in{height:auto;min-height:90px;padding:12px 16px;resize:vertical}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu2) 50%),linear-gradient(135deg,var(--mu2) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.in::placeholder{color:var(--mu3)}
.in:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 4px rgba(var(--a1-rgb),.12)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-s);color:var(--tx2)}
.check input{width:19px;height:19px;accent-color:var(--a1);margin-top:3px;flex-shrink:0}
.alert{padding:13px 16px;border-radius:12px;font-size:var(--t-s);border:1px solid}
.alert.err{background:rgba(var(--neg-rgb),.08);border-color:rgba(var(--neg-rgb),.35);color:var(--neg)}
.alert.ok{background:rgba(var(--pos-rgb),.08);border-color:rgba(var(--pos-rgb),.35);color:var(--pos)}
.alert.info{background:rgba(var(--a1-rgb),.07);border-color:rgba(var(--a1-rgb),.35);color:var(--tx2)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-size:var(--t-xs);color:var(--mu2);font-weight:400;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line-soft);font-size:var(--t-s);white-space:nowrap;vertical-align:middle}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(var(--a1-rgb),.025)}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.empty{padding:28px;text-align:center;color:var(--mu2);font-size:var(--t-s)}

/* ---------- logo ---------- */
.logo{font-size:24px;display:inline-flex;align-items:baseline;gap:1px;color:var(--tx);line-height:1}
.logo span{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
.logo b{font-family:var(--sans);font-weight:600;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:1px}

/* ---------- the guilloché ornament (one orchestrated moment: draws itself once) ---------- */
.guilloche{display:block;width:100%;height:auto;pointer-events:none}
.guilloche.draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:engrave 2.6s cubic-bezier(.6,.05,.25,1) forwards;animation-delay:calc(var(--i) * 18ms)}
@keyframes engrave{to{stroke-dashoffset:0}}
.ornament-bg{background:var(--brand);-webkit-mask:url(/static/img/guilloche.svg) no-repeat center/contain;mask:url(/static/img/guilloche.svg) no-repeat center/contain}

/* ---------- public site ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
.topbar nav{display:flex;align-items:center;gap:30px;padding:14px 24px;max-width:1240px;margin:0 auto}
.navlinks{display:flex;gap:28px;font-size:15px;color:var(--tx2);flex:1}
.navlinks a{position:relative;padding:4px 0}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navlinks a:hover::after{transform:scaleX(1)}
.menu-btn{display:none}
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:96px 24px 88px;max-width:1240px;margin:0 auto}
.hero h1{font-weight:500;font-size:clamp(42px,5.6vw,var(--t-4xl));line-height:1.18;letter-spacing:-.015em}
.hero h1 .line2{display:block;font-weight:400;font-style:italic;color:var(--a1l)}
.lead{font-size:18.5px;line-height:1.75;color:var(--mu);max-width:34em}
.hero-figure{position:relative;isolation:isolate}
.hero-figure .guilloche{max-width:none;position:absolute;inset:50% auto auto 50%;width:min(840px,128%);transform:translate(-50%,-50%);z-index:-1;opacity:.42;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.cert{position:relative;background:linear-gradient(180deg,rgba(var(--s2-rgb),.92),rgba(var(--s1-rgb),.95));border-radius:var(--r-lg);padding:28px;border:1px solid rgba(var(--a1-rgb),.35);box-shadow:var(--lift),var(--edge)}
.cert::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--a1-rgb),.16);border-radius:16px;pointer-events:none}
.cert .big{font-family:var(--serif);font-weight:500;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.stat-row>div{background:var(--s1b);padding:12px 14px}
.stat-row b{display:block;font-weight:500;font-size:17px;font-variant-numeric:tabular-nums}
.sec{padding:112px 0}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h2{font-weight:500;font-size:clamp(32px,4vw,var(--t-2xl));line-height:1.25;letter-spacing:-.01em}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26em);gap:32px;align-items:end}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.product{background:var(--s1);padding:30px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:background .3s}
.product:hover{background:var(--s1b)}
.product h3{font-size:var(--t-l);font-weight:500}
.product .tag{font-size:var(--t-xs);color:var(--a1)}
.trust{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:0;padding-bottom:0}
.trust .wrap>div{padding:22px 20px;border-left:1px solid var(--line);font-size:var(--t-s);color:var(--tx2)}
.trust .wrap>div:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;color:var(--tx)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--line)}
.steps>div{padding:28px 28px 0 0;position:relative}
.steps .num{font-family:var(--serif);font-style:italic;font-size:var(--t-xl);line-height:1;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.months>div{border-radius:var(--r-sm);padding:10px 6px;text-align:center;background:var(--s1b)}
.plan{position:relative;border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:18px;background:var(--s1);border:1px solid var(--line);box-shadow:var(--edge);overflow:hidden}
.plan.hot{border-color:rgba(var(--a1-rgb),.6);background:linear-gradient(180deg,var(--s2),var(--s1) 60%);box-shadow:var(--lift),var(--edge)}
.plan.hot::after{content:'';position:absolute;right:-110px;top:-110px;width:280px;height:280px;background:var(--brand);-webkit-mask:url(/static/img/guilloche.svg) no-repeat center/contain;mask:url(/static/img/guilloche.svg) no-repeat center/contain;opacity:.35;pointer-events:none}
.plan .price{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1;font-variant-numeric:lining-nums}
.feat{display:flex;gap:10px;color:var(--tx2)}.feat::before{content:'';flex-shrink:0;width:14px;height:14px;margin-top:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--a1l),var(--a1d) 70%)}
details.faq{border-bottom:1px solid var(--line);padding:22px 0}
details.faq summary{cursor:pointer;font-family:var(--serif);font-size:var(--t-m);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--a1);font-size:24px;line-height:1;transition:transform .25s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin-top:12px;color:var(--mu);max-width:44em}
footer.site{border-top:1px solid var(--line)}
.tv-box{height:440px;max-height:75vh;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:flex;flex-wrap:wrap}
.auth aside{position:relative;overflow:hidden;flex:1 1 420px;padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:radial-gradient(120% 80% at 0% 100%,var(--s2),var(--bg2) 60%);border-right:1px solid var(--line)}
.auth aside::after{content:'';position:absolute;width:640px;height:640px;right:-260px;bottom:-240px;background:var(--brand);-webkit-mask:url(/static/img/guilloche.svg) no-repeat center/contain;mask:url(/static/img/guilloche.svg) no-repeat center/contain;opacity:.4;pointer-events:none}
.auth aside>*{position:relative;z-index:1}
.auth aside h1{font-size:var(--t-3xl);line-height:1.2;font-weight:500}
.auth aside h1 em{display:block;font-weight:400;color:var(--a1l)}
.auth main{flex:999 1 560px;min-width:0;padding:56px 24px;display:flex;justify-content:center;align-items:center}
.auth form{width:100%;max-width:560px;display:flex;flex-direction:column;gap:20px}
.auth form h2{font-size:var(--t-xl);font-weight:500}

/* ---------- app shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:252px;flex-shrink:0;padding:28px 16px;border-right:1px solid var(--line);background:var(--side);display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side nav{display:flex;flex-direction:column;gap:2px}
.side .grp{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mu3);padding:18px 12px 6px}
.side nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:var(--r-sm);font-size:14.5px;color:var(--mu)}
.side nav a svg{width:18px;height:18px;flex-shrink:0;opacity:.8}
.side nav a:hover{color:var(--tx);background:rgba(var(--a1-rgb),.03)}
.side nav a.on{background:var(--s2);color:var(--tx)}
.side nav a.on::before{content:'';position:absolute;left:-16px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--brand)}
.side nav a.on svg{color:var(--a1l);opacity:1}
.side nav a .badge{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--on-brand);background:var(--brand);border-radius:999px;padding:0 7px;line-height:18px}
.main{flex:1;min-width:0;padding:30px 36px 64px;display:flex;flex-direction:column;gap:22px}
.pagehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pagehead h1{font-weight:500;font-size:var(--t-xl);line-height:1.3}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{padding:18px 20px;display:flex;flex-direction:column;gap:4px;border-radius:var(--r)}
.kpi .v{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.25;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.kpi.hero-kpi{background:linear-gradient(160deg,var(--s2),var(--s1) 70%);border-color:rgba(var(--a1-rgb),.35)}
.cols{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.cols>.c2{flex:2 1 520px;min-width:0}.cols>.c1{flex:1 1 300px;min-width:0}.cols>.c3{flex:3 1 520px;min-width:0}
.card h2{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:0}
.seg{display:inline-flex;gap:3px;font-size:12.5px;background:var(--s2);border-radius:999px;padding:3px}
.seg a,.seg button{padding:5px 13px;border-radius:999px;color:var(--mu);background:none;border:0;font:inherit;cursor:pointer}
.seg .on{background:var(--brand);color:var(--on-brand);font-weight:500}
.bar{height:6px;border-radius:6px;background:var(--s3)}.bar>i{display:block;height:6px;border-radius:6px;background:var(--brand)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .h{font-size:var(--t-xs);color:var(--mu2);text-align:center}
.cal .d{min-height:62px;border-radius:var(--r-sm);padding:7px 9px;display:flex;flex-direction:column;justify-content:space-between;background:var(--s1b);border:1px solid var(--line-soft)}
.cal .d.x{background:transparent;border-color:transparent}
.cal .d.today{border-color:var(--a1);box-shadow:0 0 0 3px rgba(var(--a1-rgb),.12)}
.cal .d span:first-child{font-size:11.5px;color:var(--mu2)}
.cal .d span:last-child{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.chart{width:100%;height:240px;display:block}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.statgrid .mono[style*="font-size"]{font-weight:500}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.list-row:last-child{border-bottom:0}
.code{font-family:var(--mono);font-size:13px;background:var(--inset);border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 14px;word-break:break-all;color:var(--tx2)}
.copy{cursor:pointer}
.copy:hover{border-color:var(--a1)}
.bottomnav{display:none}
.flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;background:var(--s2);border:1px solid rgba(var(--a1-rgb),.4);padding:12px 20px;border-radius:12px;font-size:var(--t-s);box-shadow:var(--lift);animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}
.qrbox{background:#fff;border-radius:18px;padding:16px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:#333;box-shadow:0 0 0 1px rgba(var(--a1-rgb),.5),0 0 0 8px rgba(var(--a1-rgb),.08),var(--lift)}
.qrbox svg,.qrbox img{width:240px;height:240px;display:block}
.qrhead{font-size:11px;font-weight:600;letter-spacing:.1em;color:#0B3B6A}
.choice{text-align:left;color:var(--tx);border-radius:var(--r);padding:18px 20px;display:flex;gap:16px;align-items:center;background:var(--s1);border:1px solid var(--line2);cursor:pointer;width:100%;font:inherit;transition:border-color .2s,background .2s}
.choice:hover{border-color:var(--line3)}
.choice.on{border-color:var(--a1);background:linear-gradient(160deg,rgba(var(--a1-rgb),.09),rgba(var(--a1-rgb),.02))}
.choice .rd{width:20px;height:20px;border-radius:50%;border:1px solid var(--line3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.choice.on .rd{border-color:var(--a1)}.choice.on .rd::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--brand)}
.live{font-size:11.5px;padding:2px 10px;border-radius:999px;background:rgba(var(--neg-rgb),.14);color:var(--neg)}
.live.on{background:rgba(var(--pos-rgb),.13);color:var(--pos)}
.live.on::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.blink{animation:pulse 1.4s infinite}
.tick-up{animation:tickup .9s ease}.tick-down{animation:tickdown .9s ease}
@keyframes tickup{0%{color:var(--pos);text-shadow:0 0 12px rgba(var(--pos-rgb),.5)}}
@keyframes tickdown{0%{color:var(--neg);text-shadow:0 0 12px rgba(var(--neg-rgb),.5)}}

@media (max-width:900px){
  .navlinks{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--side);border-bottom:1px solid var(--line);padding:8px 24px}
  .navlinks.open{display:flex}.navlinks a{padding:12px 0}
  .menu-btn{display:inline-flex}
  .topbar .btn-o{display:none}
  .hero{grid-template-columns:1fr;padding-top:56px;gap:40px}
  .sec-head{grid-template-columns:1fr}
  .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-figure .guilloche{width:112%;opacity:.22}
  .hero>.stack{position:relative;z-index:1}
  .cert{background:var(--s1)}
  .trust .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust .wrap>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .trust .wrap>div:nth-child(-n+2){border-top:0}
  .shell{display:block}
  .side{display:none}
  .main{padding:20px 16px 110px}
  .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(var(--bg-rgb),.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 4px calc(10px + env(safe-area-inset-bottom))}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--mu2);min-height:48px;justify-content:center}
  .bottomnav a svg{width:22px;height:22px}
  .bottomnav a.on{color:var(--a1l)}
  .mobilehead{display:flex!important}
  .auth aside{display:none}
  .sec{padding:76px 0}
  .cert .big{font-size:var(--t-2xl)}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl.cardify thead{display:none}
  .tbl.cardify tbody{display:block}.tbl.cardify tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;border:1px solid var(--line);border-radius:14px;padding:6px 4px;margin-bottom:10px}
  .tbl.cardify td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 12px;white-space:normal}
  .tbl.cardify td::before{content:attr(data-l);color:var(--mu2);font-size:12px}
}
@media (max-width:600px){.cards3{grid-template-columns:1fr}}
.mobilehead{display:none;align-items:center;justify-content:space-between}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.guilloche.draw path{stroke-dashoffset:0}}

/* ===================== Multi-accent layer ===================== */
.acc{color:var(--a1l)}
a:hover{color:var(--a1l)}
/* living colour field behind the hero and auth panels */
.hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(36% 50% at 76% 45%,var(--glow1),transparent 70%),radial-gradient(24% 34% at 86% 76%,var(--glow2),transparent 70%),radial-gradient(24% 34% at 22% 28%,var(--glow3),transparent 70%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.hero{isolation:isolate}
.hero h1 .line2{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero-figure .guilloche path{stroke:var(--a1l)}
.cert{border-color:rgba(var(--a1-rgb),.55);box-shadow:var(--lift),0 0 0 1px rgba(var(--a2-rgb),.08),0 0 80px -20px var(--glow1)}
.auth aside{background:radial-gradient(90% 70% at 0% 100%,var(--glow1),transparent 60%),radial-gradient(70% 60% at 100% 0%,var(--glow2),transparent 60%),var(--bg2)}
.auth aside h1 em{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* per-item accent colours: --c cycles through the palette */
.cards3>.product:nth-child(4n+1),.kpis>.kpi:nth-child(6n+1),.steps>div:nth-child(4n+1),.trust .wrap>div:nth-child(4n+1){--c:var(--a1);--c-rgb:var(--a1-rgb)}
.cards3>.product:nth-child(4n+2),.kpis>.kpi:nth-child(6n+2),.steps>div:nth-child(4n+2),.trust .wrap>div:nth-child(4n+2){--c:var(--a2);--c-rgb:var(--a2-rgb)}
.cards3>.product:nth-child(4n+3),.kpis>.kpi:nth-child(6n+3),.steps>div:nth-child(4n+3),.trust .wrap>div:nth-child(4n+3){--c:var(--a3);--c-rgb:var(--a3-rgb)}
.cards3>.product:nth-child(4n+4),.kpis>.kpi:nth-child(6n+4),.steps>div:nth-child(4n+4),.trust .wrap>div:nth-child(4n+4){--c:var(--a4);--c-rgb:var(--a4-rgb)}
.kpis>.kpi:nth-child(6n+5){--c:var(--pos);--c-rgb:var(--pos-rgb)}
.kpis>.kpi:nth-child(6n+6){--c:var(--a3);--c-rgb:var(--a3-rgb)}
.product{position:relative;background:linear-gradient(180deg,rgba(var(--c-rgb),.07),transparent 55%),var(--s1)}
.product::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--c),transparent)}
.product .tag{color:var(--c);font-weight:500}
.product:hover{background:linear-gradient(180deg,rgba(var(--c-rgb),.14),transparent 70%),var(--s1b)}
.trust .wrap>div b{color:var(--c)}
.steps>div{border-top:2px solid var(--c);margin-top:-1px}
.steps .num{background:none;color:var(--c);-webkit-text-fill-color:currentColor}
.kpi{position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.kpi::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(var(--c-rgb),.22),transparent 70%);pointer-events:none}
.kpi.hero-kpi{background:linear-gradient(150deg,rgba(var(--a1-rgb),.28),rgba(var(--a2-rgb),.10) 70%),var(--s1);border-color:rgba(var(--a1-rgb),.5)}
.kpi.hero-kpi::before{background:var(--brand)}
/* plans: each tier its own colour */
.plan{--c:var(--a2);--c-rgb:var(--a2-rgb)}
.plan:nth-child(3){--c:var(--a3);--c-rgb:var(--a3-rgb)}
.plan::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.plan h3{color:var(--c)}
.plan.hot{--c:var(--a1);--c-rgb:var(--a1-rgb);background:linear-gradient(170deg,rgba(var(--a1-rgb),.22),rgba(var(--a2-rgb),.06) 60%),var(--s1);border-color:rgba(var(--a1-rgb),.6);box-shadow:var(--lift),0 0 70px -25px var(--glow1)}
.plan.hot::before{background:var(--brand)}
.plan.hot h3{color:var(--tx)}
.feat::before{background:var(--c);box-shadow:0 0 0 3px rgba(var(--c-rgb),.18)}
.plan .price.gold-text{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* sections get a faint colour wash so the page doesn't read as one flat black */
#results{background:radial-gradient(60% 80% at 100% 0%,rgba(var(--a2-rgb),.07),transparent 60%),var(--bg2)}
#pricing{background:radial-gradient(60% 80% at 0% 100%,rgba(var(--a1-rgb),.10),transparent 60%),radial-gradient(40% 60% at 100% 0%,rgba(var(--a3-rgb),.06),transparent 60%),var(--bg2)}
/* app shell */
.side{background:linear-gradient(180deg,rgba(var(--a1-rgb),.08),transparent 40%),var(--side)}
.side nav a.on{background:linear-gradient(90deg,rgba(var(--a1-rgb),.20),rgba(var(--a1-rgb),.04))}
.side nav a.on svg{color:var(--a1l)}
.main{background:radial-gradient(50% 40% at 100% 0%,rgba(var(--a1-rgb),.07),transparent 70%)}
.pill.gold{background:var(--brand);color:var(--on-brand)}
.logo b{background:var(--brand);-webkit-background-clip:text;background-clip:text}
/* theme picker (admin settings) */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r);border:1px solid var(--line2);cursor:pointer;background:var(--s1)}
.swatch:has(input:checked){border-color:var(--a1);box-shadow:0 0 0 3px rgba(var(--a1-rgb),.2)}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch .bars{display:flex;height:26px;border-radius:8px;overflow:hidden}
.swatch .bars i{flex:1}

/* ===================== v7: review-board changes ===================== */
:root{--pc0:var(--a2);--pc0-rgb:var(--a2-rgb);--pc1:var(--a4);--pc1-rgb:var(--a4-rgb);--pc2:var(--a1);--pc2-rgb:var(--a1-rgb);--pc3:var(--a3);--pc3-rgb:var(--a3-rgb);--pc4:var(--pos);--pc4-rgb:var(--pos-rgb)}
.wrap.wide{max-width:1340px}
/* header buttons */
.topbar .login-btn,.topbar .signup-btn{min-height:40px;padding:0 18px;font-size:14.5px}
.topbar .login-btn{color:var(--a2);border-color:rgba(var(--a2-rgb),.55);background:rgba(var(--a2-rgb),.10)}
.topbar .login-btn:hover{color:var(--tx);border-color:var(--a2);background:rgba(var(--a2-rgb),.2)}
/* carousel */
.carousel{position:relative;min-width:0}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 2px 6px}
.car-track::-webkit-scrollbar{display:none}
.car-slide{scroll-snap-align:center;min-width:0}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.car-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:rgba(var(--s1-rgb),.8);color:var(--tx);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.car-btn:hover{border-color:var(--a1);color:var(--a1l)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-dots{display:flex;gap:8px}
.car-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--line3);cursor:pointer;transition:width .25s,background .25s}
.car-dots button[aria-current="true"]{width:26px;background:var(--brand)}
.hero-car .car-track{padding:10px 4px 14px}
/* results */
.res-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:-16px}
.res-tabs::-webkit-scrollbar{display:none}
.res-tabs button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid var(--line2);background:var(--s1);color:var(--mu);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer}
.res-tabs button b{font-weight:500;font-variant-numeric:tabular-nums}
.res-tabs button[aria-selected="true"]{color:var(--tx);border-color:rgba(var(--a1-rgb),.7);background:linear-gradient(90deg,rgba(var(--a1-rgb),.22),rgba(var(--a2-rgb),.08))}
.res-cols{align-items:stretch}
.cal-card .cal .d{min-height:46px;padding:5px 6px}
.cal-card .cal .d span:last-child{font-size:11px;letter-spacing:-.02em}
.months-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-top:6px;border-top:1px solid var(--line-soft)}
.months-strip>div{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:10px;padding:6px 10px;background:var(--s1b);font-size:12px;color:var(--mu2)}
.months-strip>div.up{background:rgba(var(--pos-rgb),.10)}.months-strip>div.dn{background:rgba(var(--neg-rgb),.10)}
.months-strip b{font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}
/* market */
.market-card .tv-box{max-height:none}
/* products with images */
a.product{color:inherit}
.product.has-img{padding:0;gap:0}
.product .pimg{aspect-ratio:16/10;overflow:hidden;background:var(--inset);border-bottom:1px solid var(--line-soft)}
.product .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product:hover .pimg img{transform:scale(1.04)}
.product .pbody{display:flex;flex-direction:column;gap:12px}
.product.has-img .pbody{padding:24px 30px 30px}
/* plans: 5 columns on wide screens, swipe row below */
.plans{display:grid;gap:18px;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.plans.n5,.plans.n4{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.plans.n5{--n:5}.plans.n4{--n:4}
.plans .plan{padding:28px 24px}
.plans.n5 .plan .price{font-size:34px}
@media (max-width:1279px){
  .plans.n5,.plans.n4{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(270px,31%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px}
  .plans.n5::-webkit-scrollbar,.plans.n4::-webkit-scrollbar{display:none}
  .plans .plan{scroll-snap-align:start}
}
@media (max-width:700px){.plans.n5,.plans.n4{grid-auto-columns:84%}}
/* admin image picker */
.img-drop{position:relative;aspect-ratio:16/10;border-radius:var(--r-sm);border:1px dashed var(--line3);background:var(--inset);display:grid;place-items:center;overflow:hidden}
.img-drop img{width:100%;height:100%;object-fit:cover}
/* app menu sheet */
.sheet{display:none}
/* ---------- floating app-style tab bar: phones and iPads ---------- */
@media (max-width:1024px){
  .navlinks,.menu-btn{display:none!important}
  .topbar nav{gap:12px;padding:12px 16px}
  .topbar .login-btn,.topbar .signup-btn{display:inline-flex;min-height:36px;padding:0 14px;font-size:13.5px}
  .shell{display:block}
  .side{display:none}
  .main{padding:20px 16px 120px}
  .mobilehead{display:flex!important}
  .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:40;left:50%;transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
    padding:6px;border-radius:24px;border:1px solid rgba(var(--a1-rgb),.28);
    background:rgba(var(--s1-rgb),.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset}
  .bottomnav a,.bottomnav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:18px;font:inherit;font-size:11.5px;color:var(--mu);background:none;border:0;cursor:pointer;transition:color .2s,background .2s}
  .bottomnav a svg,.bottomnav button svg{width:22px;height:22px}
  .bottomnav a.on,.bottomnav button.on{color:var(--tx);background:linear-gradient(160deg,rgba(var(--a1-rgb),.35),rgba(var(--a2-rgb),.14))}
  .bottomnav a.on svg{color:var(--a1l)}
  body:has(.bottomnav.pub){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .sheet.open{display:flex;flex-direction:column;gap:2px;position:fixed;z-index:39;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 24px));max-height:70vh;overflow:auto;padding:10px;border-radius:22px;border:1px solid var(--line2);background:rgba(var(--s1-rgb),.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 50px -10px rgba(0,0,0,.75)}
  .sheet a,.sheet button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:12px;color:var(--tx2);font:inherit;font-size:15px;background:none;border:0;width:100%;text-align:left;cursor:pointer}
  .sheet a.on{background:rgba(var(--a1-rgb),.16);color:var(--tx)}
  .sheet .grp{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--mu3);padding:10px 14px 2px}
}
@media (min-width:901px) and (max-width:1024px){.hero{padding-top:64px}}
.product .pimg.ph{position:relative;background:radial-gradient(80% 90% at 85% 15%,rgba(var(--c-rgb),.45),transparent 65%),linear-gradient(160deg,rgba(var(--c-rgb),.18),var(--inset))}
.product .pimg.ph::after{content:'';position:absolute;right:-20%;top:-35%;width:80%;aspect-ratio:1;background:var(--c);opacity:.35;-webkit-mask:url(/static/img/guilloche.svg) no-repeat center/contain;mask:url(/static/img/guilloche.svg) no-repeat center/contain}
/* auth: login actions, help line, risk note */
.auth-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.auth-actions .btn-o{color:var(--a2);border-color:rgba(var(--a2-rgb),.5);background:rgba(var(--a2-rgb),.08)}
.auth-actions .btn-o:hover{color:var(--tx);border-color:var(--a2);background:rgba(var(--a2-rgb),.16)}
.auth-help{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--mu)}
.auth-help b{color:var(--a2);font-weight:500}
.risk-note{display:flex;gap:14px;align-items:flex-start;max-width:440px;padding:16px 18px;border-radius:var(--r);border:1px solid rgba(var(--warn-rgb),.55);background:linear-gradient(135deg,rgba(var(--warn-rgb),.16),rgba(var(--warn-rgb),.04));box-shadow:0 0 0 4px rgba(var(--warn-rgb),.06),0 14px 30px -18px rgba(var(--warn-rgb),.5)}
.risk-note .risk-ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--warn);color:#1a1200;font-weight:700;font-family:var(--serif);font-size:17px}
.risk-note b{display:block;font-family:var(--serif);font-weight:600;font-size:var(--t-m);color:var(--warn);line-height:1.3}
.risk-note span{display:block;font-size:14px;color:var(--tx2);margin-top:2px}
@media (max-width:420px){.auth-actions{grid-template-columns:1fr}}
/* chart watchlist */
.wlist{display:flex;flex-wrap:wrap;gap:8px}
.wchip{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;background:var(--s1b);overflow:hidden}
.wchip>a{padding:7px 4px 7px 14px;font-size:14px;font-family:var(--mono);letter-spacing:.02em;color:var(--tx2)}
.wchip.on{border-color:rgba(var(--a1-rgb),.7);background:linear-gradient(90deg,rgba(var(--a1-rgb),.25),rgba(var(--a2-rgb),.10))}
.wchip.on>a{color:var(--tx)}
.wchip-ctl{display:flex;padding-right:4px}
.wchip-ctl button{border:0;background:none;color:var(--mu2);width:24px;height:28px;border-radius:8px;cursor:pointer;font-size:15px}
.wchip-ctl button:hover{color:var(--tx);background:rgba(var(--a1-rgb),.15)}
.wchip-ctl button[value=remove]:hover{color:var(--neg);background:rgba(var(--neg-rgb),.12)}
@media (max-width:600px){.watch-add{width:100%}.watch-add .in{flex:1;width:auto!important}}
/* accounts: portfolio cards */
.acc-total{margin-bottom:4px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:18px;align-items:start}
.acc-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--a1-rgb),.08),transparent 45%),var(--s1);box-shadow:var(--edge);overflow:hidden}
.acc-card.is-on{border-color:rgba(var(--pos-rgb),.35)}
.acc-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand)}
.acc-card h3{font-family:var(--serif);font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--inset);border:1px solid var(--line-soft)}
.sys-row>.k:first-child{margin-right:4px}
.sys-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:13px;background:rgba(var(--a2-rgb),.12);color:var(--a2);border:1px solid rgba(var(--a2-rgb),.3)}
.sys-chip em{font-style:normal;color:var(--mu);font-size:12px}
.sys-chip.main{background:rgba(var(--a1-rgb),.18);color:var(--a1l);border-color:rgba(var(--a1-rgb),.45);font-weight:500}
.acc-spark{margin:-4px -4px 0}
.acc-spark .chart{height:70px!important}
.acc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);border-radius:12px;overflow:hidden}
.acc-kpis>div{background:var(--s1b);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-kpis b{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-card footer{flex-wrap:wrap}
.add-card{border-style:dashed}
@media (max-width:600px){.acc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* orders: portfolio tabs + all-portfolio summary */
.port-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-bottom:-4px}
.port-tabs::-webkit-scrollbar{display:none}
.port-tabs a{--c:var(--a1);flex:0 0 auto;display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);min-width:170px;position:relative;overflow:hidden}
.port-tabs a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);opacity:.7}
.port-tabs a:first-child::before{background:var(--brand)}
.port-tabs a.on{border-color:rgba(var(--a1-rgb),.7);background:linear-gradient(135deg,rgba(var(--a1-rgb),.22),rgba(var(--a2-rgb),.07)),var(--s1)}
.port-tabs .pt-name{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--tx);white-space:nowrap}
.port-tabs .pt-sub{font-size:12.5px;color:var(--mu2);white-space:nowrap}
.port-tabs .pt-sub b{font-weight:500;font-variant-numeric:tabular-nums}
.port-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.port-mini{--c:var(--a1);display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-top:3px solid var(--c);color:inherit}
.port-mini:hover{border-color:rgba(var(--a1-rgb),.5)}
.port-mini b{font-weight:500}
.acc-tag{--c:var(--a1);display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.acc-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c)}
#orders-all{display:flex;flex-direction:column;gap:18px}
@media (max-width:900px){.tbl.cardify td[data-l="พอร์ต"]{grid-column:1/-1;border-bottom:1px solid var(--line-soft)!important;padding-bottom:8px}.port-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.port-mini .fig{font-size:var(--t-m)!important}}

/* ===================== v9 ===================== */
/* login: equal buttons, red outline for "forgot password" */
.auth-actions{grid-template-columns:1fr 1fr}
.auth-actions .btn,.auth-actions .btn-o{width:100%;padding:0 12px}
.auth-actions .forgot-btn{color:var(--neg);border-color:rgba(var(--neg-rgb),.6);background:rgba(var(--neg-rgb),.07)}
.auth-actions .forgot-btn:hover{color:#fff;border-color:var(--neg);background:rgba(var(--neg-rgb),.2)}
/* per-portfolio sections (dashboard "all" + orders "all") */
.port-stack{display:flex;flex-direction:column;gap:16px}
.port-sec{--c:var(--a1);position:relative;overflow:hidden;border-left:3px solid var(--c)}
.port-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);border-bottom:1px solid var(--line-soft)}
.port-head h2{font-family:var(--serif);font-size:var(--t-m);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port-figs{display:flex;gap:22px}
.port-figs>div{display:flex;flex-direction:column;align-items:flex-end}
.port-figs b{font-weight:500;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.port-body{padding:6px 20px 16px}
.port-sub{display:flex;justify-content:space-between;align-items:center;padding:10px 0 4px;font-size:13px;color:var(--mu)}
.port-sub b{color:var(--tx);font-weight:500}
.pend-list,.closed-list{display:flex;flex-direction:column}
.pend-list>div,.closed-list>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.closed-list>div{justify-content:space-between;flex-wrap:nowrap}
.pend-list>div:last-child,.closed-list>div:last-child{border-bottom:0}
.port-closed{margin-top:8px;border-top:1px solid var(--line-soft);padding-top:6px}
.port-closed summary{cursor:pointer;font-size:13px;color:var(--mu);padding:6px 0;list-style:none}
.port-closed summary::before{content:'▸ ';color:var(--c)}
.port-closed[open] summary::before{content:'▾ '}
.sec-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:-8px}
.sec-label h2{font-family:var(--sans);font-size:17px;font-weight:500}

/* ---------- phones & iPads: calmer type, consistent spacing, lighter frames ---------- */
@media (max-width:1024px){
  :root{--t-xs:12.5px;--t-s:14px;--t-b:15.5px;--t-m:18px;--t-l:22px;--t-xl:26px;--t-2xl:32px;--t-3xl:40px;--t-4xl:48px;--r-lg:18px;--r:14px}
  body{line-height:1.65;letter-spacing:.005em}
  .main{gap:16px}
  .pagehead{gap:10px}
  .pagehead h1{font-size:var(--t-xl);line-height:1.25}
  .card{box-shadow:none}
  .pad{padding:18px}
  .card h2{font-size:15.5px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px 16px;gap:2px}
  .kpi .v{font-size:22px;line-height:1.3}
  .kpi::after{width:80px;height:80px;right:-24px;top:-24px}
  .stat-row b{font-size:15.5px}
  .btn,.btn-o{min-height:46px;padding:0 22px;font-size:15px}
  .btn-s{min-height:38px}
  .in{height:48px;font-size:16px}
  .list-row{padding:11px 0}
  .port-tabs a{min-width:150px;padding:9px 14px}
  .port-head{padding:14px 16px}
  .port-body{padding:4px 16px 14px}
  .port-figs{gap:16px}
  .cal{gap:4px}.cal .d{min-height:50px;padding:5px 6px;border-radius:8px}
  .cal .d span:last-child{font-size:11px}
  .acc-card{padding:18px;gap:14px}
  .sec{padding:64px 0}
  .h2{font-size:clamp(26px,6vw,var(--t-2xl))}
}
@media (max-width:600px){
  :root{--t-b:15px;--t-xl:24px}
  .main{padding:14px 14px 112px;gap:14px}
  .wrap{padding:0 16px}
  .pad{padding:16px}
  .card{border-radius:16px}
  .kpi .v{font-size:20px}
  .kpi .k{font-size:12px}
  /* table rows become tidy cards: label above value, two columns */
  .tbl.cardify tr{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:2px;padding:10px 12px;border-radius:12px;background:var(--s1b);border-color:var(--line-soft)}
  .tbl.cardify td{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:6px 0;font-size:14px;min-width:0}
  .tbl.cardify td::before{font-size:11.5px;letter-spacing:.02em;margin-bottom:1px}
  .tbl.cardify td.r{align-items:flex-start;text-align:left}
  .tbl.cardify td[data-l="พอร์ต"]{grid-column:1/-1}
  /* plan choices: price under the name */
  .choice{padding:14px 16px;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .choice .rd{margin-top:3px}
  .port-head{flex-direction:column;align-items:stretch;gap:10px}
  .port-figs{justify-content:space-between}
  .port-figs>div{align-items:flex-start}
  .acc-card header{flex-direction:column;align-items:stretch!important}
  .acc-card header>.stack:last-child{align-items:flex-start!important;flex-direction:row;gap:8px;align-items:baseline!important}
  .acc-card footer .btn-s{flex:1 1 auto}
  .sys-row{padding:8px 10px}
  .hero{padding:44px 16px 56px;gap:32px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .lead{font-size:16px}
  .cert{padding:20px}
  .cert .big{font-size:34px}
  .product{padding:22px;min-height:0}
  .product.has-img .pbody{padding:18px 22px 22px}
  .steps{gap:24px}
  .faq summary{font-size:17px}
  .auth main{padding:28px 18px 40px}
}
/* compact open-position list for phones */
.pos-list{display:none}
.pos-item{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.pos-item:last-child{border-bottom:0}
.pi-top{display:flex;align-items:center;gap:10px}
.pi-top b{font-weight:500}
.pi-top .pi-pl{margin-left:auto;font-size:15.5px}
.pi-sub{margin-top:4px;font-size:12.5px;color:var(--mu2);line-height:1.5}
.pi-sub .mono{color:var(--tx2)}
@media (max-width:600px){
  .tbl-wrap.has-list{display:none}
  .pos-list{display:block}
  .kpis>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  .choice .grow{flex:1 1 0;min-width:0}
  .choice>.mono:last-child{flex-basis:100%;padding-left:32px;font-size:17px!important}
}
/* brand logo artwork */
.logo-img{display:block;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.logo-sm{height:46px}.logo-md{height:58px}.logo-lg{height:72px}
.topbar nav>a:first-child{flex-shrink:0;display:block;margin:-8px 0 -8px -6px}
.side-logo{display:block;padding:0 2px;margin:-10px 0 0 -6px}
.mobilehead .logo-img{height:40px;margin:-6px 0 -6px -4px}
.auth aside .logo-img{height:72px;margin-left:-8px}
@media (max-width:1024px){.topbar .logo-sm{height:40px}}
@media (max-width:380px){.topbar .logo-sm{height:34px}.topbar .login-btn,.topbar .signup-btn{padding:0 11px;font-size:13px}}

.live{white-space:nowrap}
.qr-white svg{display:block;width:100%;height:auto}