/* ดีไซน์ตาม Verdana Health Design System: navy + sage, มุมโค้ง 8px, เงานุ่ม, ช่องไฟกว้าง */
:root{
  --navy:#0F172A; --navy-deep:#020617; --slate:#64748B; --slate-dark:#475569;
  --sage:#059669; --bg:#F8FAFC; --surface:#FFFFFF; --line:#E2E8F0; --line-soft:#F1F5F9;
  --success:#22C55E; --success-text:#16A34A; --warning:#EAB308; --warning-text:#CA8A04;
  --error:#EF4444; --error-text:#DC2626; --info:#0EA5E9;
  --r-sm:4px; --r:8px; --r-md:12px; --r-lg:16px;
  --sh-sm:0 1px 3px #0F172A08; --sh:0 2px 6px #0F172A0D; --sh-md:0 4px 16px #0F172A12; --sh-lg:0 8px 32px #0F172A1A;
  --head:"Plus Jakarta Sans","Noto Sans Thai",system-ui,sans-serif;
  --body:"DM Sans","Noto Sans Thai",system-ui,sans-serif;
  --mono:"Fira Code","Noto Sans Thai",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--head);margin:0;color:var(--navy)}
h1{font-size:32px;line-height:1.2;font-weight:700}
h2{font-size:20px;line-height:1.3;font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--slate-dark)} .sm-text{font-size:14px}
.num,.stat .v,.row .n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.gain{color:var(--success-text)} .loss{color:var(--error-text)}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r-sm)}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r);font-weight:500;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s}
.btn.md{height:42px;padding:0 22px} .btn.sm{height:32px;padding:0 14px} .btn.lg{height:48px;padding:0 28px;font-size:16px}
.btn.icon{padding:0;width:32px}
.btn.block{width:100%}
.btn.primary{background:var(--navy);color:#fff} .btn.primary:hover{background:var(--navy-deep)}
.btn.secondary{background:transparent;color:var(--navy);border:1px solid var(--navy)} .btn.secondary:hover{background:#0F172A0A}
.btn.ghost{background:transparent;color:var(--slate-dark)} .btn.ghost:hover{background:var(--line-soft)}
.btn.danger{background:var(--error);color:#fff} .btn.danger:hover{background:var(--error-text)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ชิป */
.chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.chip.success{background:#22C55E15;color:var(--success-text)} .chip.error{background:#EF444415;color:var(--error-text)}
.chip.warning{background:#EAB30815;color:var(--warning-text)} .chip.info{background:#0EA5E915;color:#0369A1}
.chip.neutral{background:var(--line-soft);color:var(--slate-dark)}
.chip.filter{background:var(--bg);color:var(--navy);border:1px solid var(--line);text-transform:none;letter-spacing:0;cursor:pointer;font-size:13px}
.chip.filter.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.quota{text-transform:none;letter-spacing:0;background:var(--line-soft);color:var(--slate-dark)}

/* โครงหน้า */
.shell{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:248px;background:var(--navy);color:#fff;padding:24px 16px;display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;font-size:18px}
.brand.light{color:#fff;padding:0 8px 32px}
.mark{width:36px;height:36px;border-radius:var(--r);background:var(--sage);color:#fff;display:grid;place-items:center;font-weight:700}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border:0;border-radius:var(--r);background:transparent;color:#CBD5E1;font-weight:500;text-align:left}
.nav button:hover{background:#FFFFFF12;color:#fff}
.nav button.active{background:#FFFFFF1F;color:#fff;box-shadow:inset 3px 0 var(--sage)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;border-top:1px solid #FFFFFF1F;padding-top:16px}
.ghost-light{background:transparent;border:0;color:#CBD5E1;text-align:left;height:40px;padding:0 12px;border-radius:var(--r);font-size:14px}
.ghost-light:hover{background:#FFFFFF12;color:#fff}
.main{margin-left:248px;min-height:100vh}
.top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:16px;height:68px;padding:0 32px;background:#F8FAFCF2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.sync{font-size:13px;color:var(--slate)}
.content{max-width:1180px;margin:0 auto;padding:32px 32px 64px}
.page{display:none} .page.active{display:block}
.page-head{margin-bottom:32px;display:flex;flex-direction:column;gap:4px}
.page>.card,.page>.stats{margin-bottom:24px}

/* การ์ด */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stats.five{grid-template-columns:repeat(5,1fr)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat .k{font-size:14px;color:var(--slate-dark)}
.stat .v{font-size:26px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.stat .s{font-size:13px;color:var(--slate)}
.stats.five .v{font-size:20px}

/* ช่องค้นหา */
.gsearch{position:relative;flex:1;max-width:520px}
.gsearch input{width:100%;height:42px;padding:0 14px 0 42px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;font-weight:500}
.gsearch input:hover{border-color:var(--navy)}
.gsearch input:focus{outline:0;border:2px solid var(--navy);padding-left:41px;box-shadow:0 0 0 3px #0F172A18}
.gsearch .gicon{position:absolute;left:13px;top:11px;color:var(--slate);pointer-events:none}
.gsearch.in-form input{padding-left:14px}
.gsearch.in-form input:focus{padding-left:13px}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);max-height:min(420px,60vh);overflow:auto;z-index:20;padding:6px}
.opt{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:var(--r);min-height:48px}
.opt:hover,.opt.sel{background:var(--line-soft)}
.opt .sym{font-family:var(--mono);font-weight:500;min-width:64px;font-size:14px}
.opt .nm{flex:1;min-width:0;font-size:14px;color:var(--slate-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .px{font-family:var(--mono);font-size:13px}
.opt.online{color:var(--sage);font-weight:500;font-size:14px;border-top:1px solid var(--line-soft);border-radius:0 0 var(--r) var(--r);margin-top:4px}
.res-empty{padding:14px 12px;font-size:14px;color:var(--slate-dark)}

/* รายการ */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(150px,1.6fr) 1fr 1fr 1fr 1.1fr;align-items:center;gap:16px;padding:14px 8px;border-top:1px solid var(--line-soft);min-height:56px;border-radius:var(--r)}
.row:first-child{border-top:0}
.row.link{cursor:pointer} .row.link:hover{background:var(--bg)}
.row .who{display:flex;flex-direction:column;min-width:0}
.row .who b{font-family:var(--mono);font-weight:500;font-size:15px}
.row .who span{font-size:13px;color:var(--slate-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .n{font-size:14px;text-align:right}
.row .n small{display:block;font-family:var(--body);font-size:12px;color:var(--slate)}
.rows-head{display:grid;grid-template-columns:minmax(150px,1.6fr) 1fr 1fr 1fr 1.1fr;gap:16px;padding:0 8px 8px;font-size:13px;color:var(--slate)}
.rows-head span:not(:first-child){text-align:right}
.empty{padding:40px 24px;text-align:center;color:var(--slate-dark)}
.empty b{display:block;font-family:var(--head);font-size:18px;color:var(--navy);margin-bottom:4px}
.empty .btn{margin-top:16px}

/* สัดส่วน */
.ribbon{display:flex;height:16px;border-radius:var(--r);overflow:hidden;background:var(--line-soft);gap:2px}
.ribbon i{display:block;min-width:4px;transition:opacity .15s}
.ribbon:hover i{opacity:.55} .ribbon i:hover{opacity:1}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 24px;margin-top:16px}
.legend div{display:flex;align-items:center;gap:8px;font-size:14px}
.legend em{width:10px;height:10px;border-radius:50%;flex:none}
.legend b{font-family:var(--mono);font-weight:500} .legend span{margin-left:auto;font-family:var(--mono);color:var(--slate-dark)}

/* กราฟ */
.chart{width:100%;height:220px;display:block;stroke:none}
.chart text{stroke:none}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .ln{fill:none;stroke:var(--sage);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .ar{fill:#05966914}
.chart text{font:11px var(--mono);fill:var(--slate)}

/* รายการซื้อขาย */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px}
.inline-input{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;min-width:200px}
.inline-input:focus{outline:0;border:2px solid var(--navy);padding:0 11px;box-shadow:0 0 0 3px #0F172A18}
.trade{display:grid;grid-template-columns:110px 1fr 1fr 1.3fr 1.5fr 64px;gap:16px;align-items:center;padding:14px 24px;border-top:1px solid var(--line-soft);min-height:64px}
.trade:first-child{border-top:0}
.trade:hover{background:var(--bg)}
.trade .d{font-size:14px;color:var(--slate-dark)}
.trade .st{display:flex;align-items:center;gap:12px;min-width:0}
.trade .st b{font-family:var(--mono);font-weight:500}
.trade .st small{display:none;font-size:12px;color:var(--slate)}
.trade .n{font-family:var(--mono);font-size:14px;text-align:right}
.trade .n small{display:block;font-family:var(--body);font-size:12px;color:var(--slate)}
.trade .pl{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.trade .pl .n{font-weight:500}
.trade .pl small{font-size:12px;color:var(--slate)}
.trade .acts{display:flex;gap:4px;justify-content:flex-end}
.trade .acts button{border:0;background:transparent;color:var(--slate);width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center}
.trade .acts button:hover{background:var(--line-soft);color:var(--navy)}
.trade .acts svg{width:16px;height:16px}

/* ปฏิทิน */
.cal-card{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cal-nav{display:flex;gap:8px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-dow span{text-align:center;font-size:13px;color:var(--slate);padding-bottom:8px}
.day{aspect-ratio:1/0.9;min-height:64px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;font-weight:500;font-size:14px;position:relative;transition:border-color .15s}
.day:hover{border-color:var(--navy)}
.day.out{color:#CBD5E1;background:var(--bg)}
.day.buy{background:#22C55E1A;border-color:#22C55E66}
.day.sell{background:#EF44441A;border-color:#EF444466}
.day.both{background:linear-gradient(135deg,#22C55E26 50%,#EF444426 50%);border-color:#CBD5E1}
.day.today .dn{background:var(--navy);color:#fff;border-radius:99px;min-width:24px;padding:0 6px}
.day.selected{border:2px solid var(--navy);box-shadow:0 0 0 3px #0F172A18}
.day .tk{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--slate-dark);line-height:1.2;text-align:center;overflow:hidden;max-height:2.4em;word-break:break-all}
.day .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--info)}
.cal-side h3{font-size:20px;margin-bottom:16px}
.cal-side .li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.cal-side .li b{font-family:var(--mono);font-weight:500}
.cal-side .li .n{margin-left:auto;font-family:var(--mono);text-align:right}
.cal-side .li .n small{display:block;font-family:var(--body);font-size:12px}
.cal-side textarea{width:100%;min-height:108px;margin:8px 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);resize:vertical;font-size:14px}
.cal-side textarea:focus{outline:0;border:2px solid var(--navy);padding:9px 13px;box-shadow:0 0 0 3px #0F172A18}
.cal-side label{font-size:14px;font-weight:500}
.cal-side .btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* รายปี */
.annual{width:100%;border-collapse:collapse}
.annual th,.annual td{padding:14px 24px;text-align:right;border-top:1px solid var(--line-soft);font-size:14px}
.annual th{font-weight:500;color:var(--slate);background:var(--bg);border-top:0;font-size:13px}
.annual th:first-child,.annual td:first-child{text-align:left}
.annual td{font-family:var(--mono)} .annual td:first-child{font-family:var(--head);font-weight:600}

/* modal */
.backdrop{position:fixed;inset:0;background:#0F172A66;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg);width:min(100%,560px);max-height:94vh;display:flex;flex-direction:column}
.modal.narrow{width:min(100%,440px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-body{padding:24px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;min-width:0} .field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:500;margin-bottom:6px}
.field input,.field select{height:42px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;font-weight:500;width:100%}
.field input:hover{border-color:var(--navy)}
.field input:focus{outline:0;border:2px solid var(--navy);padding:9px 13px;box-shadow:0 0 0 3px #0F172A18}
.field input.bad{border:2px solid var(--error);padding:9px 13px;box-shadow:0 0 0 3px #EF444418}
.help{font-size:12px;color:var(--slate-dark);margin-top:4px}
.err{font-size:12px;color:var(--error);margin-top:4px;min-height:0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);padding:4px;gap:4px;background:var(--bg)}
.seg button{height:38px;border:0;border-radius:6px;background:transparent;font-weight:600;color:var(--slate-dark)}
.seg button.on.buy{background:var(--sage);color:#fff} .seg button.on.sell{background:var(--error);color:#fff}
.preview{border-radius:var(--r);background:var(--bg);padding:12px 16px;font-size:14px;min-height:20px;display:none}
.preview.show{display:block}
.preview b{font-family:var(--mono);font-weight:500}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--navy)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.stock-price{font-family:var(--mono);font-size:32px;font-weight:500;line-height:1.2}
.kv{display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:14px;margin:0}
.kv dt{color:var(--slate-dark)} .kv dd{margin:0;font-family:var(--mono);text-align:right}

/* ล็อกอิน */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.login-card{width:min(100%,400px);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:32px;display:flex;flex-direction:column;gap:16px}
.login-card .brand{color:var(--navy);margin-bottom:8px}
.login-card .mark{background:var(--navy)}

.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,16px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:14px;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;max-width:min(92vw,480px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

.tabbar{display:none}
.fab{display:none}

@media (max-width:1000px){
  .stats.five{grid-template-columns:repeat(2,1fr)}
  .cal-card{grid-template-columns:1fr}
  .trade{grid-template-columns:96px 1fr 1fr 1.3fr 64px}
  .trade .qty{display:none}
  .trade .st small{display:block}
}
@media (max-width:760px){
  h1{font-size:26px}
  .side{display:none}
  .main{margin:0;padding-bottom:72px}
  .top{padding:0 16px;gap:8px;height:60px}
  .top-actions .sync,.top-actions .quota,#addTradeTop{display:none}
  .content{padding:24px 16px 48px}
  .stats,.stats.five{grid-template-columns:1fr 1fr;gap:12px}
  .stats .stat:first-child,.stats.five .stat:last-child{grid-column:1/-1}
  .stat{padding:16px}
  .stat .v,.stats.five .v{font-size:20px}
  .stats .stat:first-child .v{font-size:26px}
  .card{padding:16px}
  .row,.rows-head{grid-template-columns:1.4fr 1fr 1fr;gap:8px}
  .row .hide-m,.rows-head .hide-m{display:none}
  .trade{grid-template-columns:1fr auto;grid-template-areas:"st pl" "d acts";gap:6px 12px;padding:14px 16px}
  .trade .d{grid-area:d;font-size:13px} .trade .st{grid-area:st} .trade .pl{grid-area:pl} .trade .acts{grid-area:acts}
  .trade .qty,.trade .px,.trade .amt{display:none}
  .toolbar{padding:12px 16px} .inline-input{min-width:0;flex:1}
  .grid2{grid-template-columns:1fr}
  .day{min-height:52px;aspect-ratio:auto;padding:4px;font-size:13px} .day .tk{display:none}
  .cal-dow,.cal-grid{gap:4px}
  .modal-body{padding:16px} .modal-head,.modal-foot{padding:14px 16px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:6;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar button{border:0;background:transparent;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--slate)}
  .tabbar button.active{color:var(--navy);font-weight:600}
  .annual th,.annual td{padding:12px 10px;font-size:12px}
  .toast{bottom:76px}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:76px;width:52px;height:52px;border-radius:50%;border:0;background:var(--navy);color:#fff;box-shadow:var(--sh-lg);z-index:7}
  .fab svg{width:24px;height:24px;stroke-width:2.2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}