/* ========== Variables ========== */
:root {
  --bg0: #0a0f14;
  --bg1: #0f1720;
  --bg2: #162231;
  --bg3: #1c2d40;
  --bdr: #1e3247;
  --bdr2: #2a4060;
  --t1: #e8edf2;
  --t2: #8899aa;
  --t3: #5a6f82;
  --accent: #00b4d8;
  --accent-d: rgba(0,180,216,.12);
  --green: #00c853;
  --green-d: rgba(0,200,83,.10);
  --red: #ff1744;
  --red-d: rgba(255,23,68,.10);
  --yellow: #ffd600;
  --yellow-d: rgba(255,214,0,.10);
  --orange: #ff9100;
  --orange-d: rgba(255,145,0,.10);
  --sans: 'Inter','Noto Sans TC',-apple-system,sans-serif;
  --mono: 'JetBrains Mono','Cascadia Code',monospace;
  --r: 8px;
}

/* ========== Font Scale (controlled by JS via data-font-scale) ========== */
html[data-font-scale="xs"]{font-size:12px}
html[data-font-scale="s"]{font-size:13px}
html[data-font-scale="m"]{font-size:14px}
html[data-font-scale="l"]{font-size:15.5px}
html[data-font-scale="xl"]{font-size:17px}

/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);background:var(--bg0);color:var(--t1);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;max-width:100vw}
#app{max-width:1400px;margin:0 auto;padding:0 16px;overflow-x:hidden}

/* ========== Header ========== */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:10px 0 8px;border-bottom:1px solid var(--bdr)}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:28px;height:28px;flex-shrink:0}
.logo h1{font-size:1.25rem;font-weight:800;letter-spacing:-.3px;background:linear-gradient(135deg,var(--accent),#7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.settings-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--bdr);border-radius:6px;color:var(--t2);cursor:pointer;transition:all .15s}
.settings-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-d)}

/* ========== Settings Panel ========== */
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.settings-overlay.open{opacity:1;pointer-events:auto}
.settings-panel{position:fixed;top:0;right:-360px;width:340px;max-width:90vw;height:100vh;background:var(--bg1);border-left:1px solid var(--bdr);z-index:100;display:flex;flex-direction:column;transition:right .25s ease}
.settings-panel.open{right:0}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bdr)}
.settings-header h3{font-size:.95rem;font-weight:700;color:var(--t1)}
.settings-close{background:none;border:none;color:var(--t2);font-size:1.6rem;cursor:pointer;padding:4px 8px;line-height:1;transition:color .15s}
.settings-close:hover{color:var(--t1)}
.settings-body{flex:1;overflow-y:auto;padding:14px 16px}
.stg-section{margin-bottom:18px}
.stg-section h4{font-size:.78rem;color:var(--accent);font-weight:600;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--bdr)}
.stg-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;gap:12px}
.stg-row label{font-size:.8rem;color:var(--t1);font-weight:500;flex:1}
.stg-row .stg-hint{display:block;font-size:.68rem;color:var(--t3);font-weight:400;margin-top:2px}
.stg-toggle{position:relative;width:40px;height:22px;flex:0 0 40px}
.stg-toggle input{opacity:0;width:0;height:0}
.stg-toggle .slider{position:absolute;inset:0;background:var(--bg3);border-radius:11px;cursor:pointer;transition:background .2s}
.stg-toggle .slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;bottom:2px;background:var(--t2);border-radius:50%;transition:all .2s}
.stg-toggle input:checked+.slider{background:var(--accent)}
.stg-toggle input:checked+.slider::before{transform:translateX(18px);background:#fff}
.stg-select{padding:6px 10px;background:var(--bg0);border:1px solid var(--bdr);border-radius:5px;color:var(--t1);font-family:var(--sans);font-size:.8rem;outline:none;cursor:pointer;appearance:none;padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a6f82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.stg-select:focus{border-color:var(--accent)}
.stg-cb-group{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.stg-cb-region{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.stg-cb-region-label{font-size:.7rem;font-weight:600;color:var(--accent);min-width:36px;flex-shrink:0}
.stg-cb{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--t1);cursor:pointer;white-space:nowrap}
.stg-cb input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.stg-input{width:100%;padding:7px 10px;background:var(--bg0);border:1px solid var(--bdr);border-radius:5px;color:var(--t1);font-family:var(--mono);font-size:.8rem;outline:none;transition:border-color .15s;margin-top:4px}
.stg-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-d)}
.stg-input::placeholder{color:var(--t3);font-family:var(--sans)}

/* ========== Ticker Strip ========== */
.ticker-bar{display:flex;align-items:flex-start;gap:0;padding:4px 0;border-bottom:1px solid var(--bdr);min-height:28px}
.ticker-strip{display:flex;align-items:baseline;gap:0;flex:1;min-width:0;flex-wrap:wrap;row-gap:2px}
.ticker-chip{display:flex;align-items:baseline;gap:4px;white-space:nowrap;padding:2px 0;text-decoration:none;color:inherit;border-radius:4px;transition:background .15s}
.ticker-chip:hover{background:var(--bg2)}
.ticker-chip+.ticker-chip::before{content:'';display:inline-block;width:1px;height:12px;background:var(--bdr2);margin:0 8px;vertical-align:middle;flex-shrink:0}
.tc-name{font-size:.7rem;color:var(--t3);font-weight:600}
.tc-price{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--t1);transition:color .3s}
.tc-price.stale{color:var(--t3)}
.tc-price.flash-up{animation:flash-up .6s ease-out}
.tc-price.flash-down{animation:flash-down .6s ease-out}
@keyframes flash-up{0%{color:var(--green);text-shadow:0 0 6px rgba(0,200,83,.4)}100%{color:var(--t1);text-shadow:none}}
@keyframes flash-down{0%{color:var(--red);text-shadow:0 0 6px rgba(255,23,68,.4)}100%{color:var(--t1);text-shadow:none}}
.tc-chg{font-family:var(--mono);font-size:.65rem;white-space:nowrap}
.tc-chg:empty{display:none}
.tc-chg.up{color:var(--green)}.tc-chg.down{color:var(--red)}
.ticker-basis{font-size:.6rem;font-weight:600;white-space:nowrap;padding:1px 4px;border-radius:3px}
.ticker-basis:empty{display:none}
.ticker-basis.up{color:var(--green);background:var(--green-d)}.ticker-basis.down{color:var(--red);background:var(--red-d)}
.ticker-refresh{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--t3);cursor:pointer;padding:3px 4px 3px 8px;flex-shrink:0;border-left:1px solid var(--bdr);margin-left:4px;transition:color .15s;white-space:nowrap}
.ticker-refresh:hover{color:var(--accent)}
.ticker-refresh.loading{pointer-events:none;opacity:.6}
.ticker-refresh.loading svg{animation:spin .8s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ticker-time{font-size:.58rem;font-family:var(--mono);display:flex;flex-direction:column;align-items:flex-start;line-height:1.4}

/* ========== Stock Search ========== */
.stock-search-row{display:flex;gap:6px;align-items:stretch}
.stock-search-row input[type="text"]{flex:1;padding:7px 10px;background:var(--bg0);border:1px solid var(--bdr);border-radius:5px;color:var(--t1);font-family:var(--mono);font-size:.88rem;outline:none;transition:border-color .15s;min-width:0}
.stock-search-row input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-d)}
.stock-search-row input[type="text"]::placeholder{color:var(--t3);font-family:var(--sans);font-size:.78rem}
.mini-fetch-btn{padding:7px 16px;background:var(--accent);border:none;border-radius:5px;color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;min-height:36px}
.mini-fetch-btn:hover{box-shadow:0 2px 8px rgba(0,180,216,.3)}
.mini-fetch-btn:disabled{opacity:.5;cursor:not-allowed}
.stock-info{font-size:.72rem;color:var(--t2);margin-top:3px;min-height:1.2em;line-height:1.6}
.stock-info .price-up{color:var(--green)}.stock-info .price-down{color:var(--red)}
.stock-info .si-row{display:block}

/* ========== Symbol Autocomplete ========== */
.sym-ac-wrap{position:relative}
.sym-ac-list{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--bg1);border:1px solid var(--bdr2);border-radius:0 0 6px 6px;max-height:200px;overflow-y:auto;display:none}
.sym-ac-list.open{display:block}
.sym-ac-item{display:flex;align-items:baseline;gap:6px;padding:7px 10px;cursor:pointer;transition:background .1s;font-size:.8rem}
.sym-ac-item:hover,.sym-ac-item.focused{background:var(--bg3)}
.sym-ac-item .sym-code{color:var(--accent);font-family:var(--mono);font-weight:600;min-width:70px}
.sym-ac-item .sym-name{color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sym-ac-item .sym-exch{color:var(--t3);font-size:.68rem;flex-shrink:0}

/* ========== Ticker Fill Button ========== */
.ticker-fill-btn{display:inline-block;padding:3px 8px;background:var(--bg1);border:1px solid var(--bdr);border-radius:5px;color:var(--t2);font-family:var(--sans);font-size:.72rem;font-weight:500;cursor:pointer;transition:all .15s;margin-top:2px;min-height:22px}
.ticker-fill-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-d)}

/* ========== Main Tabs ========== */
.main-tabs{display:flex;gap:2px;border-bottom:1px solid var(--bdr);padding-top:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.main-tabs::-webkit-scrollbar{display:none}
.main-tab{padding:8px 20px;background:none;border:none;color:var(--t2);font-family:var(--sans);font-size:.95rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;position:relative;bottom:-1px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.main-tab:hover{color:var(--t1)}
.main-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ========== Controls Bar ========== */
.controls-bar{display:flex;gap:6px;padding:8px 0;flex-wrap:wrap}
.toggle-group{display:flex;background:var(--bg1);border-radius:6px;padding:2px;border:1px solid var(--bdr)}
.toggle-btn{padding:6px 14px;background:none;border:none;color:var(--t2);font-family:var(--sans);font-size:.88rem;font-weight:500;cursor:pointer;border-radius:5px;transition:all .15s;min-height:34px;text-align:center}
.toggle-btn:hover{color:var(--t1)}
.toggle-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 6px rgba(0,180,216,.3)}
.direction-toggle .toggle-btn.active[data-value="long"]{background:var(--green);box-shadow:0 1px 6px rgba(0,200,83,.3)}
.direction-toggle .toggle-btn.active[data-value="short"]{background:var(--red);box-shadow:0 1px 6px rgba(255,23,68,.3)}

/* ========== Layout ========== */
.tab-content{display:none}.tab-content.active{display:block}
.calc-layout{display:grid;grid-template-columns:auto 1fr;gap:10px;padding-bottom:10px}
.input-panel{position:sticky;top:8px;align-self:start;max-width:400px}
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:10px}

/* ========== Form ========== */
.fg{margin-bottom:5px}
.fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:.78rem;font-weight:500;color:var(--t2);margin-bottom:2px}
.fg .hint{font-weight:400;color:var(--t3);font-size:.68rem}

.fr{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.fg input,.fg select{width:100%;padding:6px 9px;background:var(--bg0);border:1px solid var(--bdr);border-radius:5px;color:var(--t1);font-family:var(--mono);font-size:.88rem;outline:none;transition:border-color .15s}
.fg input:focus,.fg select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-d)}
.fg input::placeholder{color:var(--t3);font-family:var(--sans);font-size:.75rem}
.fg select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a6f82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.fg select option{background:var(--bg2);color:var(--t1)}
.isuf{position:relative}
.isuf input{padding-right:30px}
.isuf .suf{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.72rem;pointer-events:none}
.calc-btn{display:block;width:100%;padding:10px;background:linear-gradient(135deg,var(--accent),#0090b0);border:none;border-radius:6px;color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:600;cursor:pointer;transition:all .15s;margin-top:6px;min-height:40px}
.calc-btn:hover{box-shadow:0 3px 12px rgba(0,180,216,.3);transform:translateY(-1px)}

/* ========== Result Placeholder ========== */
.results-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;color:var(--t3);text-align:center;font-size:.85rem}

/* ========== Risk Bar ========== */
.risk-bar-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:8px 12px;margin-bottom:6px;display:flex;align-items:center;gap:12px}
.risk-bar-info{flex-shrink:0;text-align:center;min-width:80px}
.risk-bar-label{font-size:.72rem;color:var(--t2);font-weight:500}
.risk-bar-value{font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1.2}
.risk-bar-status{font-size:.72rem;font-weight:600;margin-top:1px}
.risk-bar-track{flex:1;height:8px;background:var(--bg0);border-radius:4px;position:relative;overflow:hidden}
.risk-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.risk-bar-markers{flex:1;display:flex;justify-content:space-between;font-size:.62rem;color:var(--t3);margin-top:2px;padding:0 2px}
.risk-bar-col{flex:1;display:flex;flex-direction:column;gap:2px}
.risk-safe .risk-bar-value{color:var(--green)}
.risk-safe .risk-bar-status{color:var(--green)}
.risk-caution .risk-bar-value{color:var(--yellow)}
.risk-caution .risk-bar-status{color:var(--yellow)}
.risk-danger .risk-bar-value{color:var(--orange)}
.risk-danger .risk-bar-status{color:var(--orange)}
.risk-critical .risk-bar-value{color:var(--red)}
.risk-critical .risk-bar-status{color:var(--red)}

/* ========== Alert ========== */
.alert{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;margin-bottom:6px;font-size:.82rem;line-height:1.4}
.alert svg{width:16px;height:16px;flex-shrink:0}
.alert-safe{background:var(--green-d);border:1px solid rgba(0,200,83,.25);color:var(--green)}
.alert-warn{background:var(--yellow-d);border:1px solid rgba(255,214,0,.25);color:var(--yellow)}
.alert-danger{background:var(--red-d);border:1px solid rgba(255,23,68,.25);color:var(--red)}

/* ========== Metric Grid (card layout) ========== */
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-bottom:6px}
.mg-label{grid-column:1/-1;font-size:.72rem;font-weight:600;color:var(--accent);padding:4px 0 2px;border-bottom:1px solid var(--bdr);margin-top:2px;letter-spacing:.3px}
.mg-label:first-child{margin-top:0}
.mc{background:var(--bg2);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px}
.mc .ml{font-size:.72rem;color:var(--t2);font-weight:500;margin-bottom:2px}
.mc .mv{font-family:var(--mono);font-size:1.08rem;font-weight:600;word-break:break-all}
.mc .ms{font-size:.7rem;color:var(--t3);margin-top:2px}
.mc.h-green{border-color:var(--green);background:var(--green-d)}.mc.h-green .mv{color:var(--green)}
.mc.h-red{border-color:var(--red);background:var(--red-d)}.mc.h-red .mv{color:var(--red)}
.mc.h-yellow{border-color:var(--yellow);background:var(--yellow-d)}.mc.h-yellow .mv{color:var(--yellow)}
.mc.h-orange{border-color:var(--orange);background:var(--orange-d)}.mc.h-orange .mv{color:var(--orange)}
.mc.h-accent{border-color:var(--accent);background:var(--accent-d)}.mc.h-accent .mv{color:var(--accent)}

/* ========== Sub Tabs (inside results) ========== */
.sub-tabs{display:flex;gap:2px;margin-bottom:6px;border-bottom:1px solid var(--bdr);overflow-x:auto;scrollbar-width:none}
.sub-tabs::-webkit-scrollbar{display:none}
.sub-tab{padding:7px 14px;background:none;border:none;color:var(--t3);font-family:var(--sans);font-size:.84rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;position:relative;bottom:-1px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.sub-tab:hover{color:var(--t2)}
.sub-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.sub-pane{display:none}.sub-pane.active{display:block}

/* ========== Stress Table ========== */
.st-wrap{overflow-x:auto;border-radius:6px;border:1px solid var(--bdr);max-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.st{width:100%;border-collapse:collapse;font-size:.78rem}
.st th{padding:6px 8px;background:var(--bg1);color:var(--t2);font-weight:600;text-align:right;white-space:nowrap;border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:1}
.st th:first-child{text-align:left}
.st td{padding:5px 8px;text-align:right;font-family:var(--mono);font-size:.76rem;border-bottom:1px solid var(--bdr);white-space:nowrap}
.st td:first-child{text-align:left;font-family:var(--sans)}
.st tr:last-child td{border-bottom:none}
.st tr:hover td{background:var(--bg3)}
.st tr.rc td{background:var(--accent-d);font-weight:600}
.st tr.rmc td{background:var(--yellow-d)}
.st tr.rf td{background:var(--red-d)}
.sb{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.7rem;font-weight:600;font-family:var(--sans)}
.sb-s{background:var(--green-d);color:var(--green)}
.sb-c{background:var(--yellow-d);color:var(--yellow)}
.sb-d{background:var(--orange-d);color:var(--orange)}
.sb-x{background:var(--red-d);color:var(--red)}

/* ========== Formula ========== */
.fc{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:12px;overflow:hidden}
.fb{margin-bottom:12px}.fb:last-child{margin-bottom:0}
.fb h4{font-size:.82rem;color:var(--accent);margin-bottom:4px;font-weight:600}
.fl{display:block;font-family:var(--mono);font-size:.78rem;color:var(--t1);padding:1px 0;line-height:1.7;overflow-wrap:break-word;word-break:break-word}
.fl .v{color:var(--accent)}.fl .n{color:var(--yellow)}.fl .o{color:var(--t3)}.fl .r{color:var(--green);font-weight:600}
.fn{font-size:.72rem;color:var(--t3);margin-top:4px;padding-left:10px;border-left:2px solid var(--bdr);font-family:var(--sans);line-height:1.5}

/* ========== Utility ========== */
.tg{color:var(--green)!important}.tr{color:var(--red)!important}.ty{color:var(--yellow)!important}.ta{color:var(--accent)!important}.tm{color:var(--t3)!important}


/* ========== Guide Tab ========== */
.guide-wrap{max-width:860px}
.guide-section{margin-bottom:16px}
.guide-section h3{font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--bdr)}
.guide-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 14px;margin-bottom:8px}
.guide-card h4{font-size:.88rem;font-weight:700;color:var(--t1);margin-bottom:6px}
.guide-card p,.guide-card li{font-size:.8rem;color:var(--t2);line-height:1.7}
.guide-card ul{padding-left:18px;margin:4px 0}
.guide-card li{margin-bottom:2px}
.guide-card strong{color:var(--t1);font-weight:600}
.guide-card em{color:var(--yellow);font-style:normal;font-weight:600}
.guide-card .warn{color:var(--red);font-weight:600}
.guide-table{width:100%;border-collapse:collapse;margin:6px 0;font-size:.78rem}
.guide-table th{text-align:left;padding:5px 8px;background:var(--bg3);color:var(--t2);font-weight:600;border:1px solid var(--bdr);white-space:nowrap}
.guide-table td{padding:5px 8px;border:1px solid var(--bdr);color:var(--t1)}
.guide-table td:first-child{color:var(--t2);white-space:nowrap}
.guide-tip{display:flex;gap:8px;padding:8px 10px;background:var(--accent-d);border:1px solid rgba(0,180,216,.25);border-radius:6px;margin:8px 0;font-size:.78rem;color:var(--t2);line-height:1.6}
.guide-tip::before{content:'💡';flex-shrink:0}
.guide-warn{display:flex;gap:8px;padding:8px 10px;background:var(--red-d);border:1px solid rgba(255,23,68,.25);border-radius:6px;margin:8px 0;font-size:.78rem;color:var(--t2);line-height:1.6}
.guide-warn::before{content:'⚠️';flex-shrink:0}

/* ========== Footer ========== */
.site-footer{text-align:center;padding:10px 0;border-top:1px solid var(--bdr);margin-top:6px}
.site-footer p{font-size:.72rem;color:var(--t3)}

/* ========== Number Input: hide native spinner ========== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* ========== Custom +/- Buttons ========== */
.num-wrap{display:flex;align-items:stretch;gap:3px;width:fit-content}
.num-wrap>input[type="number"]{flex:1;min-width:0;max-width:14ch}
.num-wrap>.isuf{flex:1;min-width:0;max-width:16ch}
.num-btn{width:32px;flex-shrink:0;background:var(--bg1);border:1px solid var(--bdr);border-radius:5px;color:var(--t1);font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;user-select:none;line-height:1;padding:0}
.num-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-d)}
.num-btn:active{transform:scale(.93);background:var(--accent);color:#fff}

/* ========== Equity Multiplier Buttons ========== */
.eq-multi-row{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap}
.eq-multi-btn{padding:4px 0;flex:1;min-width:34px;background:var(--bg1);border:1px solid var(--bdr);border-radius:5px;color:var(--t2);font-family:var(--sans);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;min-height:26px}
.eq-multi-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-d)}
.eq-multi-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 1px 6px rgba(0,180,216,.25)}

/* ========== Margin Info (read-only display) ========== */
.margin-info{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg0);border:1px solid var(--bdr);border-radius:5px;margin-bottom:5px;flex-wrap:wrap}
.mi-item{display:flex;align-items:center;gap:4px}
.mi-label{font-size:.7rem;color:var(--t2);font-weight:500;white-space:nowrap}
.mi-val{font-family:var(--mono);font-size:.88rem;font-weight:600;color:var(--accent);white-space:nowrap}
.mi-sep{color:var(--t3);font-size:.7rem}

/* ========== Quote Time Stamp ========== */
.quote-time{font-size:.6rem;color:var(--t3);font-family:var(--mono);margin-top:1px;display:block;line-height:1}

/* ========== Cost Breakdown Table ========== */
.cost-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:8px 10px;margin-bottom:6px}
.cost-title{font-size:.78rem;font-weight:600;color:var(--yellow);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.cost-title svg{width:14px;height:14px;flex-shrink:0}
.cost-row{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:.78rem;border-bottom:1px dashed var(--bdr)}
.cost-row:last-of-type{border-bottom:none}
.cost-left{display:flex;flex-direction:column;gap:0;min-width:0}
.cost-name{color:var(--t2);font-weight:500}
.cost-detail{color:var(--t3);font-size:.65rem;font-family:var(--mono);word-break:break-all}
.cost-amt{font-family:var(--mono);font-weight:600;color:var(--t1);white-space:nowrap;margin-left:10px;flex-shrink:0}
.cost-total{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0 0;margin-top:4px;border-top:2px solid var(--bdr2);font-size:.85rem;font-weight:700}
.cost-total .cost-name{color:var(--yellow)}
.cost-total .cost-amt{color:var(--yellow);font-size:.9rem}
.cost-net{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0 0;font-size:.82rem;font-weight:700}
.cost-net.profit .cost-amt{color:var(--green)}
.cost-net.loss .cost-amt{color:var(--red)}

/* ========== Animations ========== */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.mg,.risk-bar-wrap,.alert,.st-wrap,.fc{animation:fadeIn .2s ease-out}

/* ========== Scrollbar ========== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--bdr2)}

/* ================================================================
   RESPONSIVE — Tablet (< 1024px)
   ================================================================ */
@media(max-width:1024px){
  .calc-layout{grid-template-columns:1fr}
  .input-panel{position:static;max-width:none}
}

/* ================================================================
   RESPONSIVE — Mobile (< 768px)
   ================================================================ */
@media(max-width:768px){
  html{font-size:15px}
  #app{padding:0 10px}

  /* Header */
  .logo h1{font-size:1.1rem}

  /* Ticker bar */
  .ticker-bar{padding:6px 0}
  .ticker-strip{row-gap:1px}
  .tc-name{font-size:.62rem}
  .tc-price{font-size:.72rem}
  .tc-chg{font-size:.58rem}
  .ticker-chip+.ticker-chip::before{margin:0 5px}

  /* Main tabs: horizontal scroll, never wrap */
  .main-tabs{gap:0;padding-top:4px;flex-wrap:nowrap}
  .main-tab{padding:10px 14px;font-size:.84rem;min-height:44px}

  /* Controls: stack vertically, allow button text wrap */
  .controls-bar{flex-direction:column;gap:6px;padding:6px 0}
  .toggle-group{width:100%;flex-wrap:wrap}
  .toggle-btn{flex:1;text-align:center;padding:10px 6px;font-size:.82rem;min-height:44px;word-break:keep-all}

  /* Layout: single column */
  .calc-layout{grid-template-columns:1fr;gap:10px}
  .input-panel{position:static;max-width:none}

  /* Form */
  .fg{margin-bottom:6px}
  .fg label{margin-bottom:3px}
  .fg input,.fg select{padding:8px 10px;min-height:44px}
  .fg select{padding-right:32px}

  /* +/- buttons: touch targets */
  .num-btn{width:40px;font-size:1.15rem;border-radius:8px;min-height:44px}

  /* Stock search */
  .stock-search-row{gap:5px;flex-wrap:wrap}
  .stock-search-row input[type="text"]{flex:1 1 60%;min-width:0;padding:11px 12px;font-size:.9rem;min-height:44px}
  .mini-fetch-btn{padding:10px 14px;font-size:.85rem;min-height:44px;flex-shrink:0}

  /* Equity multiplier */
  .eq-multi-btn{padding:6px 0;font-size:.8rem;min-height:34px}

  /* Margin info */
  .margin-info{padding:5px 8px;gap:4px 8px}
  .mi-label{font-size:.65rem}
  .mi-val{font-size:.8rem}

  /* Cost breakdown */
  .cost-box{padding:8px}
  .cost-title{font-size:.72rem;margin-bottom:4px}
  .cost-row{font-size:.72rem;padding:2px 0}
  .cost-detail{font-size:.6rem}
  .cost-amt{font-size:.72rem}
  .cost-name{word-break:break-word}

  /* Metric cards */
  .mg{grid-template-columns:1fr 1fr;gap:5px}
  .mc{padding:7px 8px;overflow:hidden}
  .mc .mv{font-size:1rem;overflow-wrap:break-word;word-break:break-word}
  .mc .ms{font-size:.68rem;overflow-wrap:break-word}

  /* Risk bar: stack */
  .risk-bar-wrap{flex-direction:column;gap:6px;text-align:center;padding:10px}
  .risk-bar-info{min-width:auto}
  .risk-bar-value{font-size:1.3rem}

  /* Alert */
  .alert{font-size:.78rem;padding:6px 10px}

  /* Sub tabs: scrollable */
  .sub-tabs{flex-wrap:nowrap}
  .sub-tab{padding:10px 12px;font-size:.8rem;min-height:42px}

  /* Stress table */
  .st{font-size:.68rem}
  .st th{padding:5px 6px;font-size:.66rem}
  .st td{padding:4px 6px;font-size:.66rem}

  /* Formula */
  .fc{padding:10px;overflow-x:auto}
  .fl{font-size:.7rem;line-height:1.6}
  .fn{font-size:.68rem}

  /* Footer */
  .site-footer p{font-size:.65rem}
}

/* ================================================================
   RESPONSIVE — Small phone (< 420px)
   ================================================================ */
@media(max-width:420px){
  #app{padding:0 6px}
  .card{padding:8px}

  /* Ticker: tighter spacing */
  .ticker-chip+.ticker-chip::before{margin:0 4px}

  /* Tabs: even smaller */
  .main-tab{padding:11px 10px;font-size:.8rem}

  /* Toggle: smaller padding */
  .toggle-btn{padding:9px 4px;font-size:.78rem}

  /* Small phone: 1-column form */
  .fr{grid-template-columns:1fr}
  .num-btn{width:40px;font-size:1.15rem}

  /* Metrics: single column */
  .mg{grid-template-columns:1fr}

  /* Stress table: minimal padding */
  .st th{padding:5px 4px;font-size:.62rem}
  .st td{padding:4px 4px;font-size:.62rem}
}