/* สบายใจ (Sabuyjai) — ดีไซน์สมัยใหม่: สะอาด สบายตา อ่านทีเดียวรู้เรื่อง
   สีหลัก --pri / --pri-tint / --pri-dark มาจากธีมของแต่ละบริษัท (brand.theme_css) */
:root{--pri:#514fd6;--pri-fg:#fff;--pri-text:#514fd6;--pri-dark:#3f3db0;--pri-tint:#e6e8ff;
  --bg:#f6f7fb;--card:#fff;--fg:#1b1f2a;--muted:#6b7280;--line:#e8eaf0;--field:#dfe3ea;
  --in:#0f9d58;--in-tint:#e6f6ee;--out:#e5484d;--out-tint:#fdecec;--warn:#b45309;--warn-tint:#fff4de;
  --radius:16px;--r-sm:12px;--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 18px rgba(16,24,40,.06)}
body[data-style=sharp]{--radius:6px;--r-sm:4px;--shadow:0 0 0 1px var(--line)}
body[data-style=soft]{--radius:20px;--r-sm:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 "IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--pri-text)}
h1{font-size:28px;line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:20px;line-height:1.3;margin:0 0 4px;font-weight:700}
h3{font-size:17px;margin:0 0 4px}
p{margin:0 0 10px}
.i{flex:none;vertical-align:middle}
.muted{color:var(--muted)}.pos{color:var(--in)}.neg{color:var(--out)}.right{text-align:right}

/* ---------- โครงแอป: ไซด์บาร์ + เนื้อหา ---------- */
.app{display:flex;min-height:100vh}
.side{width:264px;flex:none;position:sticky;top:0;height:100vh;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 14px}
.side-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;text-decoration:none;color:var(--fg)}
.mark{width:42px;height:42px;border-radius:12px;background:var(--pri);color:var(--pri-fg);display:grid;place-items:center;font-weight:700;font-size:19px;flex:none}
.side-brand img.logo{max-height:42px;max-width:150px;object-fit:contain}
.side-brand b{display:block;font-size:16px;line-height:1.25}
.side-brand small{display:block;color:var(--muted);font-size:12.5px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-title{font-size:12px;font-weight:600;color:#9aa1ae;letter-spacing:.06em;padding:16px 12px 6px}
.nav a,.nav .off{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);color:#3a4150;text-decoration:none;font-size:16px;font-weight:500}
.nav a:hover{background:#f3f4f8}
.nav a.on{background:var(--pri-tint);color:var(--pri-text);font-weight:600}
.nav .off{color:#a3a9b5;cursor:default}
.nav .soon{margin-left:auto;font-size:11.5px;background:#f0f1f5;color:#8a91a0;border-radius:99px;padding:1px 9px}
.side-user{display:flex;align-items:center;gap:10px;padding:14px 8px 0;border-top:1px solid var(--line);margin-top:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--pri-tint);color:var(--pri-text);display:grid;place-items:center;font-weight:700;flex:none}
.side-user .who{min-width:0;flex:1;line-height:1.3}
.side-user .who b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .who span{font-size:12.5px;color:var(--muted)}
.icon-btn{border:0;background:#f3f4f8;color:#555;width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{background:var(--out-tint);color:var(--out)}
form.inline{display:inline;margin:0}
.main-wrap{flex:1;min-width:0}
.main{max-width:1200px;margin:0 auto;padding:34px 40px 60px}
.mobilebar{display:none}
.banner{padding:10px 20px;text-align:center;font-size:15px;font-weight:500}
.banner.warn{background:var(--warn-tint);color:var(--warn)}.banner.bad{background:var(--out-tint);color:#b42318}

/* หัวหน้า */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:16px}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;background:var(--pri);color:var(--pri-fg);
  border:0;border-radius:var(--r-sm);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,transform .05s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(16,24,40,.12)}
.btn:hover{background:var(--pri-dark);color:var(--pri-fg)}.btn:active{transform:translateY(1px)}
.btn.lg{min-height:58px;padding:0 30px;font-size:18px}
.btn.soft{background:var(--pri-tint);color:var(--pri-text);box-shadow:none}.btn.soft:hover{background:var(--pri-tint);filter:brightness(.96);color:var(--pri-text)}
.btn.ghost{background:#fff;color:#333;box-shadow:inset 0 0 0 1.5px var(--field)}.btn.ghost:hover{background:#f8f9fb;color:#111}
.btn.in{background:var(--in);color:#fff}.btn.in:hover{background:#0b7f47;color:#fff}
.btn.out{background:var(--out);color:#fff}.btn.out:hover{background:#c93a3f;color:#fff}
.btn.block{display:flex;width:100%}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pri-tint);outline-offset:2px}
button.link{background:none;border:0;color:var(--pri-text);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
button.link.neg{color:var(--out)}

/* ---------- การ์ด ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none;border:1px solid var(--line)}
.card.pad0{padding:0;overflow:hidden}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:20px}
.cols .card{margin:0}
.stat{display:flex;gap:14px;align-items:center}
.stat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--pri-tint);color:var(--pri-text)}
.stat.in .ic{background:var(--in-tint);color:var(--in)}.stat.out .ic{background:var(--out-tint);color:var(--out)}
.stat .lb{font-size:14.5px;color:var(--muted);line-height:1.3}
.stat .v{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.stat .v small{font-size:14px;font-weight:500;color:var(--muted)}

/* ปุ่มลัดใหญ่ (หน้าหลัก) */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:22px}
.quick a{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  text-decoration:none;color:var(--fg);font-weight:600;font-size:17px;transition:transform .12s,box-shadow .12s}
.quick a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.10)}
.quick .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--pri-tint);color:var(--pri-text);flex:none}
.quick .in .ic{background:var(--in-tint);color:var(--in)}.quick .out .ic{background:var(--out-tint);color:var(--out)}
.quick small{display:block;font-weight:400;color:var(--muted);font-size:14px;line-height:1.3}

/* โมดูล */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.mod{display:block;background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);text-decoration:none;color:var(--fg);position:relative;transition:transform .12s,box-shadow .12s}
a.mod:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.10)}
.mod .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--pri-tint);color:var(--pri-text);margin-bottom:14px}
.mod h3{font-size:19px}.mod p{color:var(--muted);font-size:15px;margin:0}
.mod .num{margin-top:14px;font-size:15px;color:var(--fg)}.mod .num b{font-size:22px}
.mod.off{background:transparent;box-shadow:none;border:1.5px dashed var(--field)}
.mod.off .ic{background:#eceef3;color:#9aa1ae}.mod.off h3{color:#8a91a0}
.pilltag{position:absolute;top:18px;right:18px;font-size:12.5px;background:#eceef3;color:#7b8392;border-radius:99px;padding:2px 12px}

/* ขั้นตอนเริ่มต้นใช้งาน */
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-sm);background:#f8f9fc}
.steps .n{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--field);display:grid;place-items:center;font-weight:700;color:var(--muted);flex:none}
.steps li.done{opacity:.6}.steps li.done .n{background:var(--in);color:#fff;box-shadow:none}
.steps li.done span.t{text-decoration:line-through}
.steps span.t{flex:1;font-weight:500}

/* ---------- ฟอร์ม ---------- */
.field{margin:0 0 18px}
.field>label,.lbl{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px;color:#2d3340}
.hint{display:block;font-size:14px;color:var(--muted);margin-top:5px;font-weight:400}
input,select,textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--field);border-radius:var(--r-sm);background:#fff;color:var(--fg);font:inherit;font-size:17px}
textarea{min-height:90px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-tint)}
input[type=radio],input[type=checkbox]{display:inline-block;width:20px;min-height:0;height:20px;margin:0 8px 0 0;accent-color:var(--pri);vertical-align:-4px}
input[type=color]{width:80px;padding:4px;cursor:pointer}
input[type=file]{padding:10px}
.amount{position:relative}.amount span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--muted);font-weight:600}
.amount input{padding-left:44px;font-size:30px;font-weight:700;min-height:66px;letter-spacing:-.01em}
.form-narrow{max-width:640px}
.auth-wrap{max-width:440px;margin:0 auto;padding:36px 20px 20px}
.auth-wrap .card{padding:32px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand .mark{margin:0 auto 12px;width:56px;height:56px;font-size:26px;border-radius:16px}
.auth-brand h1{font-size:26px}
.auth-brand p{color:var(--muted);margin:6px 0 0}

/* เลือกประเภท รายรับ/รายจ่าย เป็นการ์ดใหญ่ */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.seg label{margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg .opt{display:flex;align-items:center;gap:12px;padding:16px 18px;border:2px solid var(--field);border-radius:var(--radius);background:#fff;font-weight:600;font-size:18px;transition:.12s}
.seg .opt .t{line-height:1.3}.seg .opt .t small{display:block;font-size:13.5px;font-weight:400;color:var(--muted)}
.seg .opt .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.seg .opt.in .ic{background:var(--in-tint);color:var(--in)}.seg .opt.out .ic{background:var(--out-tint);color:var(--out)}
.seg input:checked+.opt.in{border-color:var(--in);background:var(--in-tint)}
.seg input:checked+.opt.out{border-color:var(--out);background:var(--out-tint)}
.seg input:focus-visible+.opt{outline:3px solid var(--pri-tint);outline-offset:2px}

/* ปุ่มเลือกหมวด */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1.5px solid var(--field);background:#fff;border-radius:99px;padding:6px 15px;font:inherit;font-size:15px;cursor:pointer;color:#3a4150}
.chip:hover{border-color:var(--pri);color:var(--pri-text)}.chip.on{background:var(--pri);border-color:var(--pri);color:var(--pri-fg)}

/* ลากไฟล์มาวาง */
.drop{display:block;border:2px dashed var(--field);border-radius:var(--radius);background:#fafbfd;padding:26px 18px;text-align:center;cursor:pointer;transition:.15s;margin:0}
.drop:hover,.drop.over{border-color:var(--pri);background:var(--pri-tint)}
.drop .ic{width:52px;height:52px;border-radius:50%;background:var(--pri-tint);color:var(--pri-text);display:grid;place-items:center;margin:0 auto 10px}
.drop b{display:block;font-size:17px}.drop span.sub{color:var(--muted);font-size:14px;font-weight:400}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop.has{border-style:solid;border-color:var(--in);background:var(--in-tint)}
.drop .fname{font-weight:600;color:#0b6b3a;word-break:break-all}
details.more{margin:6px 0 20px}details.more summary{cursor:pointer;font-weight:600;color:var(--pri-text);padding:8px 0;list-style:none}
details.more summary::-webkit-details-marker{display:none}

/* ---------- รายการ ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.monthnav{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:99px;box-shadow:var(--shadow);padding:5px}
.monthnav a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#444;text-decoration:none}
.monthnav a:hover{background:var(--pri-tint);color:var(--pri-text)}
.monthnav b{min-width:150px;text-align:center;font-size:17px}
.seglink{display:flex;gap:6px;background:#eceef3;border-radius:99px;padding:4px}
.seglink a{padding:7px 18px;border-radius:99px;text-decoration:none;color:#555;font-weight:600;font-size:15px}
.seglink a.on{background:#fff;color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9aa1ae}
.search input{padding-left:42px;min-height:46px}
.rows{display:block}
.txn{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.txn:last-child{border-bottom:0}.txn:hover{background:#fafbfd}
.txn .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.txn.in .ic{background:var(--in-tint);color:var(--in)}.txn.out .ic{background:var(--out-tint);color:var(--out)}
.txn .mid{flex:1;min-width:0;line-height:1.35}
.txn .mid b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txn .mid small{color:var(--muted);font-size:14px}
.txn .amt{font-size:18px;font-weight:700;white-space:nowrap;text-align:right}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;border-radius:99px;padding:2px 11px}
.badge.ok{background:var(--in-tint);color:#0b6b3a}.badge.warn{background:var(--warn-tint);color:var(--warn)}.badge.gray{background:#eceef3;color:#697080}
.person{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.person:last-child{border-bottom:0}.person:hover{background:#fafbfd}
.person .mid{flex:1;min-width:0;line-height:1.35}.person .mid b{display:block;font-weight:600}.person .mid small{color:var(--muted);font-size:14px}
.person .sal{font-weight:600;white-space:nowrap}
.empty{text-align:center;padding:52px 20px}
.empty .ic{width:76px;height:76px;border-radius:50%;background:var(--pri-tint);color:var(--pri-text);display:grid;place-items:center;margin:0 auto 16px}
.empty h2{margin-bottom:6px}.empty p{color:var(--muted);max-width:420px;margin:0 auto 20px}

/* แจ้งเตือน */
.flash{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:var(--r-sm);padding:14px 18px;margin:0 0 18px;box-shadow:var(--shadow);border-left:5px solid var(--pri);font-weight:500}
.flash .i{color:var(--pri-text);margin-top:2px}
.note{display:flex;gap:12px;align-items:center;background:var(--warn-tint);color:var(--warn);padding:14px 18px;border-radius:var(--r-sm);margin-bottom:18px;font-weight:500}
.foot{text-align:center;font-size:14px;color:#a0a6b2;margin-top:40px}

/* ---------- ไฟล์แนบทั่วไป ---------- */
.filelist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:2px}
.filelist li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.filelist li:last-child{border-bottom:0}
.filelist a{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--fg);font-weight:500;text-decoration:none}
.filelist a:hover{color:var(--pri-text)}
.filelist a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .muted{font-size:13px;white-space:nowrap}

/* ---------- ตั้งค่าธีม ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 14px}
.sw{margin:0;cursor:pointer}.sw input{position:absolute;opacity:0}
.sw span{display:block;width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--field);transition:.12s}
.sw input:checked+span{box-shadow:0 0 0 3px var(--fg)}
.styleopt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--field);border-radius:var(--r-sm);margin-bottom:10px;cursor:pointer;background:#fff;font-weight:400;font-size:17px}
.styleopt:has(input:checked){border-color:var(--pri);background:var(--pri-tint)}
.styleopt input{margin-top:5px}
.preview{padding:18px;border:2px dashed var(--field);border-radius:var(--radius);display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff}
.big-logo{max-height:80px;max-width:240px;border:1px solid var(--line);padding:8px;border-radius:12px;background:#fff}
.tag{font-size:13px;color:var(--pri-text);background:var(--pri-tint);border-radius:99px;padding:3px 12px;font-weight:600}

/* ---------- หน้าแรก (ก่อนล็อกอิน) ---------- */
.site{background:#fff}
.site-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .brandname{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:700;font-size:21px}
.site-head .brandname small{font-weight:400;font-size:13px;color:var(--muted)}
.site-head .mark{width:36px;height:36px;font-size:17px;border-radius:10px}
.site-nav{display:flex;gap:28px;margin:0 24px}
.site-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.site-nav a:hover{color:var(--fg)}
.site-actions{display:flex;gap:10px;align-items:center;flex:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.hero{padding:72px 0 56px;background:radial-gradient(900px 380px at 75% 0%,var(--pri-tint),transparent 70%)}
.hero .grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:var(--pri-tint);color:var(--pri-text);border-radius:99px;padding:5px 14px;font-weight:600;font-size:14.5px;margin-bottom:18px}
.hero h1{font-size:52px;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--pri-text)}
.hero p.lead{font-size:20px;color:#4b5261;max-width:520px;margin-bottom:26px}
.hero .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero .cta small{color:var(--muted)}
.mock{background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(30,30,80,.16),0 0 0 1px var(--line);padding:18px;transform:rotate(1.2deg)}
.mock .bar{display:flex;gap:6px;margin-bottom:14px}.mock .bar i{width:10px;height:10px;border-radius:50%;background:#e3e6ec}
.mock .k{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mock .k div{border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted)}
.mock .k b{display:block;font-size:21px;color:var(--fg)}
.mock .k .a{background:var(--in-tint)}.mock .k .b{background:var(--out-tint)}
.mock .r{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--line);font-size:14px}
.mock .r .d{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.mock .r .d.in{background:var(--in-tint);color:var(--in)}.mock .r .d.out{background:var(--out-tint);color:var(--out)}
.mock .r span{flex:1}.mock .r b{font-weight:700}
.section{padding:64px 0}.section.alt{background:#f6f7fb}
.section h2.title{font-size:34px;text-align:center;letter-spacing:-.01em;margin-bottom:8px}
.section p.sub{text-align:center;color:var(--muted);font-size:18px;margin-bottom:38px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.feat .card{margin:0;box-shadow:none;border:1px solid var(--line)}
.feat .ic{width:48px;height:48px;border-radius:14px;background:var(--pri-tint);color:var(--pri-text);display:grid;place-items:center;margin-bottom:14px}
.feat p{color:var(--muted);font-size:15.5px;margin:0}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.how div{text-align:center;padding:10px}
.how .n{width:54px;height:54px;border-radius:50%;background:var(--pri);color:var(--pri-fg);display:grid;place-items:center;font-size:23px;font-weight:700;margin:0 auto 14px}
.how p{color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch}
.plan{background:#fff;border-radius:22px;padding:30px 28px;border:1.5px solid var(--line);position:relative;display:flex;flex-direction:column}
.plan.pop{border-color:var(--pri);box-shadow:0 18px 44px rgba(50,50,120,.16)}
.plan .flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--pri);color:var(--pri-fg);font-size:13px;font-weight:700;padding:4px 16px;border-radius:99px}
.plan h3{font-size:20px}
.plan .price{font-size:44px;font-weight:700;letter-spacing:-.02em;margin:8px 0 4px}.plan .price small{font-size:16px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:11px;flex:1}
.plan li{display:flex;gap:10px;align-items:center;font-size:16.5px}.plan li .i{color:var(--in)}
.cta-band{background:linear-gradient(135deg,var(--pri),#2f3bb8);color:var(--pri-fg);border-radius:28px;text-align:center;padding:52px 24px;margin:0 0 30px}
.cta-band h2{font-size:32px;color:inherit;margin-bottom:8px}.cta-band p{opacity:.9;margin-bottom:22px;font-size:18px}
.cta-band .btn{background:#fff;color:var(--pri-text)}.cta-band .btn:hover{background:#f3f3f8;color:var(--pri-text)}
.site-foot{text-align:center;color:var(--muted);font-size:14.5px;padding:10px 0 40px}

.pricehook{margin-top:14px;display:inline-block;background:var(--pri-tint);color:var(--pri-text);border-radius:12px;padding:8px 14px;font-size:16px}
.plan .fit{color:var(--muted);font-size:15px;min-height:44px}.plan .perday{color:var(--pri-text);font-weight:600;font-size:15px;margin-bottom:2px}
.promobar{display:block;text-align:center;background:linear-gradient(90deg,var(--pri),#2f3bb8);color:#fff;padding:10px 16px;font-size:15.5px;text-decoration:none}.promobar:hover{color:#fff}.promobar u{margin-left:6px}
.promobox{background:var(--pri-tint);border:1.5px dashed var(--pri);border-radius:20px;padding:22px 26px;margin:0 auto 34px;max-width:760px}
.promobox h3{font-size:21px;margin:0 0 10px;color:var(--pri-text)}.promobox ul{margin:0 0 10px;padding-left:22px;display:grid;gap:6px;font-size:17px}.promobox p{margin:0;color:var(--muted);font-size:15px}
.plan .promoprice{color:#0a7d3c;font-weight:700;font-size:15.5px}.plan .promoprice s{color:var(--muted);font-weight:400;margin-left:6px}
.stickybuy{display:none}
@media(max-width:720px){.stickybuy{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);border-top:1px solid var(--line);backdrop-filter:blur(8px)}.stickybuy .btn{width:100%}.chatfab{bottom:84px!important}.site-foot{padding-bottom:90px}}
.trustbar{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbfd}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center}
.trustbar .ti{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--fg)}
.trustbar .ti svg{color:var(--pri-text);flex:none}

.bizchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bizchips span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:15px;font-weight:600;color:var(--fg)}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}
.compare .col{border-radius:20px;padding:30px 28px}
.compare .old{background:#f6f7fb;border:1px solid var(--line)}
.compare .new{background:var(--pri-tint);border:1.5px solid var(--pri)}
.compare h3{margin-bottom:18px;font-size:19px}
.compare ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.compare li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--fg);line-height:1.45}
.compare .old li{color:var(--muted)}
.compare li .i{flex:none;margin-top:1px}
.compare .old li .i{color:var(--muted)}
.compare .new li .i{color:var(--in)}
@media(max-width:720px){.compare{grid-template-columns:1fr}}

.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2px 22px}
.faq details[open]{border-color:var(--pri)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--muted);flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 0 18px;color:var(--muted);font-size:15.5px;line-height:1.65}

/* รูปแบบ "เด่นชัด": ไซด์บาร์เป็นสีบริษัท */
body[data-style=bold] .side{background:var(--pri);border-right:0}
body[data-style=bold] .side-brand,body[data-style=bold] .side-brand small{color:var(--pri-fg)}
body[data-style=bold] .side-brand small{opacity:.75}
body[data-style=bold] .side-brand .mark{background:#fff;color:var(--pri-text)}
body[data-style=bold] .side-brand img.logo{background:#fff;border-radius:10px;padding:4px 8px}
body[data-style=bold] .nav a,body[data-style=bold] .nav-title{color:var(--pri-fg)}
body[data-style=bold] .nav-title{opacity:.65}
body[data-style=bold] .nav a:hover{background:rgba(255,255,255,.14)}
body[data-style=bold] .nav a.on{background:#fff;color:var(--pri-text)}
body[data-style=bold] .nav .off{color:var(--pri-fg);opacity:.5}
body[data-style=bold] .nav .soon{background:rgba(255,255,255,.2);color:var(--pri-fg)}
body[data-style=bold] .side-user{border-top-color:rgba(255,255,255,.25)}
body[data-style=bold] .side-user .who b,body[data-style=bold] .side-user .who span{color:var(--pri-fg)}
body[data-style=bold] .avatar{background:#fff}

/* ---------- มือถือ: เมนูอยู่ล่างจอ ---------- */
@media(max-width:860px){
  .app{display:block}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;flex-direction:row;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20;border-right:0;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(16,24,40,.08)}
  .side-brand,.side-user,.nav-title{display:none}
  .nav{flex-direction:row;justify-content:space-around;overflow:visible;gap:0}
  .nav a,.nav .off{flex-direction:column;gap:2px;padding:6px 6px;font-size:11.5px;min-width:0;flex:1;text-align:center;border-radius:10px}
  .nav .soon{display:none}
  .mobilebar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
  .mobilebar .side-brand{display:flex;padding:0}
  .main{padding:20px 16px 110px}
  h1{font-size:24px}
  .txn{padding:13px 14px}.person{padding:13px 14px}
  .hero{padding:40px 0 30px}.hero .grid2{grid-template-columns:1fr}.hero h1{font-size:38px}.mock{transform:none}
  .site-head{padding:12px 16px}.site-head small{display:none}.site-nav{display:none}
  .compare .col{padding:24px 20px}.faq details{padding:2px 16px}
  .amount input{font-size:26px}
  body[data-style=bold] .side{background:var(--pri)}
}
@media(max-width:480px){.seg .opt{font-size:16px;padding:12px 10px;gap:8px}.seg .opt .ic{width:34px;height:34px}.btn.lg{width:100%}.monthnav b{min-width:120px;font-size:16px}}

/* ---------- สต็อก / การตลาด ---------- */
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg .opt.cnt .ic{background:var(--pri-tint);color:var(--pri-text)}
.seg input:checked+.opt.cnt{border-color:var(--pri);background:var(--pri-tint)}
.seg.three .opt{padding:14px 12px;font-size:17px}
@media(max-width:640px){.seg.three{grid-template-columns:1fr}}
.qtybox{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.qtybox b{font-size:22px}.qtybox.low b{color:var(--warn)}
.rowbtns{display:flex;gap:8px;flex:none}
.rowbtns .btn{min-height:42px;padding:8px 14px;font-size:15px}
.person .neg{color:var(--out)}
@media(max-width:640px){.person{flex-wrap:wrap}.rowbtns{width:100%}.rowbtns .btn{flex:1}}

/* ---------- เอกสารขาย: ฟอร์ม + กระดาษ A4 ---------- */
.doc-form{max-width:900px}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid2f{grid-template-columns:1fr}}
.li{display:grid;grid-template-columns:minmax(0,1fr) 88px 92px 140px 120px 44px;gap:10px;align-items:center;margin-bottom:10px}
.li.head{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px}
.li .lab{display:none;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:3px}
.li .c-tot{text-align:right;font-size:17px;white-space:nowrap}
.li.head .c-qty,.li.head .c-unit,.li.head .c-price{padding-left:2px}
.li.head .c-tot{text-align:right}
.li input{min-height:46px;padding:9px 12px;font-size:16px}
.icon-btn.rm svg{transform:rotate(45deg)}
.icon-btn.rm{width:42px;height:42px}
@media(max-width:760px){
  .li.head{display:none}
  .li{grid-template-columns:1fr 1fr 1fr;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fafbfd;gap:10px}
  .li .lab{display:block}
  .li .c-desc{grid-column:1/-1}
  .li .c-price{grid-column:span 1}
  .li .c-tot{grid-column:span 2;text-align:left}
  .li .c-x{justify-self:end}
}
.sumbox{margin-top:14px;margin-left:auto;max-width:380px;background:#f8f9fc;border-radius:var(--r-sm);padding:14px 18px}
.sumbox div{display:flex;justify-content:space-between;gap:14px;padding:4px 0;color:#3a4150}
.sumbox .grand{border-top:2px solid var(--field);margin-top:6px;padding-top:10px;font-size:20px;font-weight:700;color:var(--fg)}
.sumbox .grand b{color:var(--pri-text);font-size:24px}
label.check{display:flex;align-items:center;font-weight:600}

.paper{position:relative;background:#fff;color:#111;max-width:860px;margin:0 auto;padding:44px 48px;border-radius:var(--radius);box-shadow:var(--shadow);font-size:15px;line-height:1.5}
.paper .muted{color:#6b7280}
.p-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:3px solid var(--pri);padding-bottom:18px;margin-bottom:18px}
.p-co{display:flex;gap:14px;align-items:flex-start;min-width:0;flex:1 1 300px}
.p-logo{max-height:70px;max-width:120px;object-fit:contain}
.p-name{font-size:19px}
.p-title{text-align:right;flex:0 0 auto}
.p-title h2{font-size:26px;color:var(--pri-text);margin:0 0 4px}
.p-cust{padding:12px 16px;background:#f8f9fc;border-radius:10px;margin-bottom:18px}
.p-cust>b{display:block;font-size:17px}
.p-items{width:100%;border-collapse:collapse;margin-bottom:8px}
.p-items th{background:var(--pri);color:var(--pri-fg);font-weight:600;text-align:left;padding:8px 10px;font-size:14px}
.p-items td{padding:9px 10px;border-bottom:1px solid #e8eaf0;vertical-align:top}
.p-items .num{text-align:right;white-space:nowrap}.p-items .c1{width:34px;color:#6b7280}
.p-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:10px}
.p-left{flex:1 1 300px;min-width:0}
.p-words{padding:10px 0}.p-words span{display:block;font-size:13px}
.p-note{padding:6px 0;font-size:14px}
.p-pay{display:flex;gap:16px;align-items:center;margin-top:10px;padding:12px;border:1.5px dashed #c8cdd8;border-radius:12px}
.p-pay .qr{width:132px;flex:none}.p-pay .qr svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}
.p-sum{flex:0 0 300px;border-collapse:collapse;align-self:flex-start}
.p-sum td{padding:6px 4px}.p-sum .num{text-align:right;white-space:nowrap}
.p-sum .grand td{border-top:2px solid var(--pri);font-size:19px;font-weight:700;color:var(--pri-text);padding-top:10px}
.p-foot{margin-top:22px;padding-top:12px;border-top:1px solid #e8eaf0;font-size:14px;color:#4b5261;white-space:pre-line}
.p-sign{display:flex;gap:40px;justify-content:space-around;margin-top:56px;text-align:center;font-size:14px}
.p-sign>div{flex:1;max-width:240px}.p-sign .line{border-top:1px solid #333;margin-bottom:6px}.p-sign small{display:block;color:#6b7280;margin-top:2px}
.stamp{position:absolute;top:120px;right:60px;transform:rotate(-12deg);font-size:34px;font-weight:700;letter-spacing:.04em;border:4px solid;padding:2px 18px;border-radius:10px;opacity:.55;pointer-events:none}
.stamp.ok{color:#0f9d58;border-color:#0f9d58}.stamp.bad{color:#e5484d;border-color:#e5484d;font-size:52px;top:200px;right:auto;left:50%;margin-left:-90px}
.paper.is-cancelled .p-items,.paper.is-cancelled .p-sum{opacity:.45}
@media(max-width:860px){.paper{padding:22px 18px}.p-title{text-align:left}.p-sum{flex:1 1 100%}.p-items{font-size:14px}.p-items th,.p-items td{padding:7px 6px}}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important}
  .side,.mobilebar,.banner,.foot,.no-print,.flash{display:none!important}
  .app,.main-wrap{display:block}
  .main{padding:0!important;max-width:none!important}
  .paper{box-shadow:none;border-radius:0;padding:0;max-width:none;margin:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- กราฟสรุปกำไร-ขาดทุน / ค้างรับ-ค้างจ่าย ---------- */
.bars{display:flex;gap:10px;align-items:flex-end;height:230px;margin:18px 0 6px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;min-width:0;font-size:13.5px}
.bcol .pair{flex:1;width:100%;display:flex;gap:4px;align-items:flex-end;justify-content:center;min-height:0}
.bcol .bar{display:block;width:38%;max-width:34px;min-height:3px;border-radius:6px 6px 0 0}
.bar.in,.legend i.in,.track i.in{background:var(--in)}.bar.out,.legend i.out,.track i.out{background:var(--out)}
.bcol.now .pair{background:var(--pri-tint);border-radius:10px 10px 0 0}
.bcol b{font-size:13.5px;white-space:nowrap}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:6px;align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.cbar{margin:14px 0}.cbar .row{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.track{height:10px;background:#eceef3;border-radius:99px;overflow:hidden}.track i{display:block;height:100%;border-radius:99px}
@media(max-width:860px){
  .nav{justify-content:flex-start;overflow-x:auto}
  .nav a,.nav .off{flex:0 0 auto;min-width:64px}
  .nav-sub{display:none!important}
}

/* ---------- แพลตฟอร์ม: บัญชี / ข้อกำหนด / จ่ายเงิน ---------- */
.side-user .acct{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:inherit;border-radius:12px;padding:2px}
.side-user .acct:hover{background:#f3f4f8}
body[data-style=bold] .side-user .acct:hover{background:rgba(255,255,255,.14)}
.banner a{color:inherit}
.legal h1{margin-bottom:6px}.legal h2{margin:26px 0 8px;font-size:20px}.legal ul{padding-left:22px;margin:0 0 10px}.legal li{margin-bottom:6px}
.qrbox svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}
@media(max-width:860px){.mobilebar .icon-btn{margin-left:auto;margin-right:8px}}

/* ---------- แดชบอร์ดกราฟ (หน้าหลัก) ---------- */
.dx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.dx-kpi{position:relative;overflow:hidden;background:var(--card);border-radius:var(--radius);padding:20px 22px 16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:block;transition:transform .15s}
a.dx-kpi:hover{transform:translateY(-2px)}
.dx-kpi .top{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}
.dx-kpi .top .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--pri-tint);color:var(--pri-text)}
.dx-kpi.in .ic{background:var(--in-tint);color:var(--in)}.dx-kpi.out .ic{background:var(--out-tint);color:var(--out)}.dx-kpi.warn .ic{background:var(--warn-tint);color:var(--warn)}
.dx-kpi .val{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:10px 0 2px}
.dx-kpi .val small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px}
.dx-kpi .sub{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:24px}
.dx-kpi .spark{display:block;width:100%;height:34px;margin-top:8px}
.dx-d{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;border-radius:99px;padding:1px 9px}
.dx-d.good{background:var(--in-tint);color:#0b6b3a}.dx-d.bad{background:var(--out-tint);color:#b42327}.dx-d.flat{background:#eceef3;color:#697080}

.dx-row{display:grid;gap:16px;margin-bottom:20px;grid-template-columns:repeat(12,1fr)}
.dx-row>.card{margin:0;min-width:0}
.dx-7{grid-column:span 7}.dx-5{grid-column:span 5}.dx-4{grid-column:span 4}.dx-6{grid-column:span 6}
.dx-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.dx-card-h h2{font-size:18px;margin:0}.dx-card-h p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.dx-legend{display:flex;gap:14px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.dx-legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:-1px}

/* กราฟแท่ง 6 เดือน (HTML/CSS ล้วน ตัวอักษรอ่านง่ายทุกขนาดจอ) */
.dx-bars{display:grid;grid-template-columns:44px 1fr;gap:0 8px}
.dx-y{position:relative;height:210px}
.dx-y span{position:absolute;right:0;transform:translateY(50%);font-size:12px;color:var(--muted);white-space:nowrap}
.dx-plot{position:relative;height:210px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;border-bottom:1.5px solid var(--line)}
.dx-plot .g{position:absolute;left:0;right:0;border-top:1px dashed var(--line);pointer-events:none}
.dx-plot .col{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:0 4px;border-radius:12px}
.dx-plot .col:hover{background:var(--pri-tint)}
.dx-plot .col.now{background:linear-gradient(var(--pri-tint),transparent)}
.dx-bar{width:38%;max-width:30px;border-radius:8px 8px 3px 3px;transform-origin:bottom;animation:dxgrow .7s cubic-bezier(.2,.8,.2,1) both}
.dx-bar.in{background:var(--in)}.dx-bar.out{background:var(--out)}
.dx-x{grid-column:2;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px;text-align:center}
.dx-x .m{font-size:14px;font-weight:600;color:var(--muted)}.dx-x .now .m{color:var(--pri-text)}
.dx-x .n{font-size:12.5px;font-weight:700}
@keyframes dxgrow{from{transform:scaleY(0)}}

/* โดนัท */
.dx-donutwrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.dx-donut{position:relative;width:170px;height:170px;flex:none}
.dx-donut svg{width:100%;height:100%;transform:rotate(0deg)}
.dx-donut circle{transition:stroke-width .2s}
.dx-donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.25}
.dx-donut .mid small{font-size:13px;color:var(--muted)}.dx-donut .mid b{font-size:22px;letter-spacing:-.01em}
.dx-list{flex:1;min-width:190px;display:flex;flex-direction:column;gap:9px}
.dx-list .it{display:flex;align-items:center;gap:9px;font-size:15px}
.dx-list .it i{width:12px;height:12px;border-radius:4px;flex:none}
.dx-list .it span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-list .it b{font-weight:700}.dx-list .it em{font-style:normal;color:var(--muted);font-size:13px;min-width:38px;text-align:right}

/* แถบแนวนอน (ค้างรับ-ค้างจ่าย / ลูกค้า / คนจ่ายเงิน) */
.dx-hb{margin-bottom:14px}.dx-hb:last-child{margin-bottom:0}
.dx-hb .lab{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin-bottom:6px}
.dx-hb .lab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dx-hb .lab b{white-space:nowrap}
.dx-track{height:14px;border-radius:99px;background:#eef0f5;overflow:hidden}
.dx-fill{height:100%;border-radius:99px;display:flex;transform-origin:left;animation:dxgrowx .8s cubic-bezier(.2,.8,.2,1) both;min-width:0}
.dx-fill>i{display:block;height:100%}
@keyframes dxgrowx{from{transform:scaleX(0)}}
.dx-late{background:repeating-linear-gradient(135deg,#f59e0b 0 6px,#fbbf24 6px 12px)}
.dx-stack{display:flex;height:22px;border-radius:99px;overflow:hidden;background:#eef0f5;gap:2px}
.dx-stack i{display:block;height:100%;animation:dxgrowx .8s both;transform-origin:left}
.dx-big{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}.dx-big b{font-size:34px;letter-spacing:-.02em;line-height:1}.dx-big span{color:var(--muted);font-size:15px}
.dx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--muted);padding:26px 10px;min-height:150px;font-size:15px}
.dx-empty .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--pri-tint);color:var(--pri-text)}
.dx-watch{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.dx-watch .w{display:flex;align-items:center;gap:10px;font-size:15px}
.dx-watch .w span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;border-radius:99px;padding:3px 12px;background:var(--in-tint);color:#0b6b3a}
.dx-chip.warn{background:var(--warn-tint);color:var(--warn)}
.dx-alerts{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 20px}
.dx-alerts a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--warn-tint);color:var(--warn);font-weight:600;font-size:15px;border-radius:99px;padding:8px 16px}
.dx-alerts a:hover{filter:brightness(.96)}
@media(max-width:1100px){.dx-7,.dx-5,.dx-4,.dx-6{grid-column:span 12}}
@media(min-width:700px) and (max-width:1100px){.dx-4{grid-column:span 6}.dx-4:last-child:nth-child(odd){grid-column:span 12}}
@media(max-width:560px){.dx-kpi .val{font-size:28px}.dx-bars{grid-template-columns:36px 1fr}.dx-bar{width:40%}.dx-donutwrap{gap:14px}}
@media(prefers-reduced-motion:reduce){.dx-bar,.dx-fill,.dx-stack i{animation:none}}
.dx-3{grid-column:span 3}.dx-12{grid-column:span 12}
@media(max-width:1300px){.dx-3{grid-column:span 6}}
@media(max-width:700px){.dx-3,.dx-4{grid-column:span 12!important}}

/* landing: why-we-win */
.hero .ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:520px}
.hero .ticks li{display:flex;gap:8px;align-items:center;font-weight:600;font-size:15.5px}
.hero .ticks svg{color:#16a34a;flex:none}
.why{background:linear-gradient(180deg,var(--pri-tint),#fff 70%)}
.kicker{display:block;text-align:center;color:var(--pri-text);font-weight:700;letter-spacing:.04em;margin-bottom:6px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:8px}
.wcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:0 6px 22px rgba(20,30,60,.06);position:relative;overflow:hidden}
.wcard .wn{font-size:44px;font-weight:800;line-height:1;color:var(--pri-tint);-webkit-text-stroke:1.5px var(--pri-text);margin-bottom:10px}
.wcard h3{font-size:19px;margin:0 0 8px}
.wcard p{color:var(--muted);font-size:15.5px;margin:0}
.cmp{margin-top:34px;overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.cmp table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{background:#f6f7fa;font-size:14.5px}
.cmp td:first-child{font-weight:600}
.cmp .us{background:var(--pri-tint);color:var(--pri-text);font-weight:700}
.cmp thead th.us{background:var(--pri-text);color:#fff}
.cmp tr:last-child td{border-bottom:0}
@media(max-width:720px){.hero .ticks{grid-template-columns:1fr}.wcard .wn{font-size:36px}}

.kicker.left,.title.left,.sub.left{text-align:left}
.kicker.left{display:inline-flex;gap:6px;align-items:center;background:var(--pri-tint);border-radius:99px;padding:5px 14px}
.sub.left{margin-left:0}
.aisec{background:linear-gradient(135deg,#0f172a,#1e1b4b);color:#fff}
.aisec .grid2,.acctsec .grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.aisec .title,.aisec .sub{color:#fff}.aisec .sub{opacity:.85}
.aisec .kicker.left{background:rgba(255,255,255,.14);color:#fff}
.aipts{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:12px}
.aipts li{padding:13px 16px 13px 18px;border-radius:12px;background:rgba(255,255,255,.1);font-size:16px;border-left:4px solid #34d399}
.acctsec .aipts li{background:var(--pri-tint);color:var(--fg);border-left-color:var(--pri-text)}
.chatmock{background:#fff;border-radius:20px;padding:20px;display:grid;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.35);color:#1f2937}
.cm{padding:10px 14px;border-radius:14px;max-width:88%;font-size:15px}
.cm.in{background:#eef0f4;justify-self:start}
.cm.out{background:#dcfce7;justify-self:end}
.cm .bot{display:block;font-size:12px;font-weight:700;color:#15803d;margin-bottom:2px}
.cmfoot{text-align:center;font-size:13px;color:#6b7280;border-top:1px dashed #d1d5db;padding-top:10px;margin-top:4px}
.acctsec .grid2.rev{grid-template-columns:.95fr 1.05fr}
.acctmock{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 14px 40px rgba(20,30,60,.12);display:grid;gap:10px}
.am-h{display:flex;gap:8px;align-items:center;font-weight:700;margin-bottom:4px}
.am-r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.am-r .ok{color:#15803d}.am-r .warn{color:#b45309}
.am-c{background:#f3f4f6;border-radius:12px;padding:9px 13px;font-size:14.5px}
.am-c.me{background:var(--pri-tint);justify-self:end}
.am-c i{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
@media(max-width:820px){.aisec .grid2,.acctsec .grid2,.acctsec .grid2.rev{grid-template-columns:1fr}.acctsec .grid2.rev .acctmock{order:2}}

.aicalc{background:rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;margin:0 0 22px}
.aicalc label{display:block;font-weight:600;margin-bottom:8px}
.aicalc input[type=range]{width:100%;accent-color:#34d399;height:28px}
.aic_out{font-size:16px;margin-top:4px}.aic_big{font-size:26px;color:#34d399}
.aic_hint{display:block;opacity:.7;margin-top:6px;font-size:13px}
.aisec .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn.ghost-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.shots .shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(20,30,60,.14)}
.shots .shot img{display:block;width:100%;height:auto}
.shots .shot figcaption{padding:12px 16px;font-size:15px;font-weight:600;color:var(--fg);border-top:1px solid var(--line)}
.shots .bf{display:flex;gap:6px;padding:10px 14px;background:#f1f3f7}
.shots .bf i{width:10px;height:10px;border-radius:50%;background:#cfd4dd}
.shots .big{max-width:980px;margin:26px auto 24px}
.shotrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1040px;margin:0 auto}
@media(max-width:720px){.shotrow{grid-template-columns:1fr}.aic_big{font-size:22px}}
@media(max-width:560px){.site-head{padding:10px 14px;gap:8px}.site-head .brandname img{height:34px!important}.site-actions{gap:6px}.site-actions .btn{padding:8px 12px;font-size:14px;min-height:0}.site-actions .btn.ghost{display:none}}