:root{--bg:#0E1116;--sf:#171B22;--sf2:#12161C;--ln:#262C36;--ln2:#343B47;--tx:#E8EAED;--mu:#9AA3AE;--mu2:#C3C9D1;--win:#4FD1A5;--loss:#FF8A5C;--long:#8EC3FF;--longbg:#15283F;--short:#FFB38F;--shortbg:#3A2418;--warnbg:#2A1C14;--warnln:#5C3A24;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#F3F5F8;--sf:#FFFFFF;--sf2:#FFFFFF;--ln:#DDE2E8;--ln2:#C9D0D8;--tx:#151A21;--mu:#5B6573;--mu2:#3E4754;--win:#0B8A63;--loss:#C2491D;--long:#1F5FA8;--longbg:#E3EEFB;--short:#A8461B;--shortbg:#FBE9DF;--warnbg:#FFF3EC;--warnln:#F2C6AE}}
:root[data-theme="light"]{--bg:#F3F5F8;--sf:#FFFFFF;--sf2:#FFFFFF;--ln:#DDE2E8;--ln2:#C9D0D8;--tx:#151A21;--mu:#5B6573;--mu2:#3E4754;--win:#0B8A63;--loss:#C2491D;--long:#1F5FA8;--longbg:#E3EEFB;--short:#A8461B;--shortbg:#FBE9DF;--warnbg:#FFF3EC;--warnln:#F2C6AE}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.5}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 110px}
h1{font-size:22px;margin:0;font-weight:700}
h2{font-size:15px;margin:0;font-weight:600}
.sub{font-size:13px;color:var(--mu)}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:18px;padding:18px;margin-top:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.k{font-size:12px;color:var(--mu)}
.v{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:500}
.big{font-family:'IBM Plex Mono',monospace;font-size:38px;font-weight:600;letter-spacing:-1px}
.win{color:var(--win)}.loss{color:var(--loss)}
.pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;white-space:nowrap}
.pL{background:var(--longbg);color:var(--long)}.pS{background:var(--shortbg);color:var(--short)}
.tag{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--ln);color:var(--mu2)}
.tagw{background:var(--shortbg);color:var(--short)}
button,.btn{font-family:inherit;font-size:14px;min-height:44px;border-radius:12px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);padding:0 14px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.primary{background:var(--win);color:#0E1116;border:none;font-weight:700;width:100%;min-height:50px;font-size:16px;border-radius:14px}
.chip.on{background:var(--tx);color:var(--bg);border-color:var(--tx);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
select,input,textarea{font-family:inherit;font-size:15px;background:var(--sf2);color:var(--tx);border:1px solid var(--ln2);border-radius:10px;padding:10px 12px;width:100%}
label{font-size:13px;color:var(--mu2);display:block;margin-bottom:4px}
.trade{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:16px;background:var(--sf);border:1px solid var(--ln);margin-top:10px;min-height:auto}
.trade:hover{border-color:var(--ln2)}
.warn{background:var(--warnbg);border:1px solid var(--warnln);border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13px}
.warn b{color:var(--short)}
.bar{height:10px;border-radius:5px;overflow:hidden;background:var(--ln);display:flex}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:10px}
.legend span i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
nav{position:fixed;left:0;right:0;bottom:0;background:var(--sf2);border-top:1px solid var(--ln);padding:6px 8px calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));z-index:5}
nav button{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mu);min-height:54px}
nav button.on{color:var(--win)}
nav svg{width:22px;height:22px}
.tbl{overflow-x:auto;margin-top:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
td,th{padding:6px 4px;border-top:1px solid var(--ln);text-align:left}
th{color:var(--mu);font-weight:500;font-size:12px}
td input,td select{padding:6px;font-size:13px;min-width:0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.msg{font-size:13px;color:var(--mu2);margin-top:10px}
.hidden{display:none!important}
.planbar{position:relative;height:54px;margin-top:6px}
.empty{text-align:center;color:var(--mu);padding:40px 10px}
.pro{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--win);color:#0E1116}
.link{border:none;background:none;color:var(--long);padding:0;min-height:44px}
.foot{font-size:12px;color:var(--mu);text-align:center;margin-top:24px;line-height:1.7}
.foot a{color:var(--mu2)}