:root {
  color-scheme: light dark;
  --bg: #f3f5f3;
  --card: #ffffff;
  --text: #121713;
  --muted: #737b76;
  --line: #e5e9e6;
  --green: #138c55;
  --green-2: #24a86a;
  --green-soft: #e9f7ef;
  --red: #d74036;
  --red-soft: #fff0ef;
  --black: #101511;
  --quote-text: #f8fffa;
  --shadow: 0 7px 24px rgba(14, 30, 19, 0.07);
  --radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1210;
    --card: #171b18;
    --text: #f2f5f3;
    --muted: #a7b0aa;
    --line: #2b312d;
    --green-soft: #13291e;
    --red-soft: #2e1817;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
input, textarea { color: var(--text); }
.app-shell { width: 100%; max-width: 640px; margin: 0 auto; min-height: 100vh; padding: env(safe-area-inset-top) 14px calc(92px + env(safe-area-inset-bottom)); }
.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 8px; }
.brand-row { display: flex; gap: 11px; align-items: center; }
.brand-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg,#ffc400,#e49a00); color:#593a00; font-size: 23px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.brand-name { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.3px; }
.brand-subtitle { margin-top: 4px; color: var(--muted); font-size: 13px; }
.icon-button { min-width: 62px; min-height: 44px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 13px; font-weight: 650; }
.view { display: none; animation: fade .18s ease-out; }
.view.active { display: block; }
@keyframes fade { from { opacity:.6; transform:translateY(2px);} to {opacity:1; transform:none;} }

.quote-card { background: radial-gradient(circle at 82% 8%, #1e3027, var(--black) 48%); color: var(--quote-text); border-radius: 24px; padding: 20px 18px 14px; box-shadow: 0 15px 34px rgba(0,0,0,.18); overflow: hidden; }
.quote-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.quote-symbol-line { display: flex; align-items: center; gap: 9px; }
.quote-symbol-line h1 { margin: 0; font-size: 25px; letter-spacing: .6px; }
.live-badge { padding: 5px 9px; border-radius: 9px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.12); color:#d5ded8; }
.live-badge.live { background: rgba(30, 180, 103, .22); color: #80e8b4; }
.live-badge.stale { background: rgba(255, 189, 46, .18); color:#ffd070; }
.live-badge.offline { background: rgba(222, 71, 59, .18); color:#ff8c83; }
.quote-name { margin-top: 7px; color: #d1d7d3; font-size: 14px; }
.quote-time-wrap { text-align: right; color:#b6c1ba; font-size: 11px; display: grid; grid-template-columns: auto auto; gap: 2px 6px; align-items:center; justify-content:end; }
.quote-time-wrap strong { color: #eef4f0; font-size: 12px; font-variant-numeric: tabular-nums; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background:#8d9791; grid-row:1/3; grid-column:3; box-shadow:0 0 0 5px rgba(255,255,255,.04); }
.status-dot.live { background:#2fd27e; box-shadow:0 0 0 5px rgba(47,210,126,.10),0 0 14px rgba(47,210,126,.5); }
.status-dot.offline { background:#e35348; }
.quote-body { display: grid; grid-template-columns: 1fr auto; align-items:end; gap:16px; margin-top: 15px; }
.mid-price { font-size: clamp(42px, 13vw, 62px); line-height: .95; font-weight: 830; letter-spacing:-2.2px; font-variant-numeric: tabular-nums; color:#67df9e; min-width:0; }
.spread-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; text-align:right; font-size:13px; min-width:130px; }
.spread-grid div { display:flex; flex-direction:column; gap:2px; }
.spread-grid .label { font-size:11px; font-weight:700; }
.bid-label { color:#62dda0; }.ask-label{ color:#ff7a70; }
.spread-grid strong { font-size:14px; font-variant-numeric:tabular-nums; }
.spread-row { grid-column:1/3; padding-top:5px; border-top:1px solid rgba(255,255,255,.08); color:#c4ccc7; flex-direction:row !important; justify-content:flex-end; gap:8px !important; }
.chart-wrap { position:relative; height:150px; margin-top:18px; border-top:1px solid rgba(255,255,255,.05); }
#priceChart { width:100%; height:100%; display:block; }
.chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:#8d9991; font-size:13px; pointer-events:none; }
.chart-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:7px; }
.chart-chip { min-height:38px; border:0; border-radius:10px; color:#c7d0ca; background:rgba(255,255,255,.06); font-size:12px; }
.chart-chip.selected { background:rgba(35,178,101,.25); color:#9aefbf; font-weight:750; }

.connection-card { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:17px; margin:13px 0; padding:13px 14px; }
.connection-card.warning { border-color:#e6c06f; }
.connection-card.error { border-color:#e69b96; }
.connection-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--green-soft); font-weight:900; }
.connection-card.warning .connection-icon { color:#9b6900; background:#fff6d9; }
.connection-card.error .connection-icon { color:var(--red); background:var(--red-soft); }
.connection-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.connection-text strong { font-size:14px; }
.connection-text span { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }

.form-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 15px; margin:13px 0; }
.form-card h2 { margin:0 0 17px; font-size:18px; letter-spacing:-.2px; }
.field-row,.field-block { display:block; margin:0 0 18px; }
.field-row:last-child,.field-block:last-child { margin-bottom:0; }
.field-label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.input-wrap { height:49px; display:flex; align-items:center; border:1px solid var(--line); border-radius:13px; background:var(--bg); overflow:hidden; }
.input-wrap input { width:100%; min-width:0; height:100%; border:0; outline:0; padding:0 13px; background:transparent; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.input-wrap span { padding-right:12px; color:var(--muted); font-size:11px; }
.field-control-with-button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.secondary-action { min-height:49px; border:1px solid rgba(19,140,85,.45); color:var(--green); background:var(--green-soft); border-radius:13px; padding:0 13px; font-weight:750; }
.secondary-action.full { width:100%; }
.segmented { display:grid; gap:8px; }
.segmented.two{grid-template-columns:repeat(2,1fr)}.segmented.three{grid-template-columns:repeat(3,1fr)}
.select-btn { min-height:49px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:var(--card); font-weight:700; }
.select-btn.selected { border-color:var(--green); background:var(--green-soft); color:var(--green); box-shadow: inset 0 0 0 1px rgba(19,140,85,.08); }
.select-btn.buy.selected { color:white; background:var(--green); border-color:var(--green); }
.select-btn.sell.selected { color:white; background:var(--red); border-color:var(--red); }
.lot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.custom-lot { width:100%; height:48px; margin-top:8px; border-radius:12px; border:1px solid var(--line); background:var(--bg); padding:0 12px; }
.hidden { display:none !important; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips button { min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--text); font-size:13px; }
.chips button.selected { color:var(--green); border-color:var(--green); background:var(--green-soft); font-weight:700; }
textarea { width:100%; resize:vertical; min-height:82px; border:1px solid var(--line); border-radius:13px; background:var(--bg); padding:11px 12px; outline:0; }
.field-error { display:block; color:var(--red); min-height:0; margin-top:6px; font-size:11px; }
.field-error:not(:empty) { min-height:15px; }
.sticky-actions { position:sticky; bottom:calc(73px + env(safe-area-inset-bottom)); z-index:10; padding:8px 0 5px; background:linear-gradient(to bottom,transparent,var(--bg) 28%); }
.primary-action { width:100%; min-height:56px; border:0; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--green),#0f7f4c); font-size:17px; font-weight:800; box-shadow:0 9px 24px rgba(19,140,85,.24); }
.primary-action:disabled { opacity:.55; }

.bottom-nav { position:fixed; z-index:30; left:50%; transform:translateX(-50%); bottom:0; width:min(640px,100%); height:calc(70px + env(safe-area-inset-bottom)); padding:7px 8px env(safe-area-inset-bottom); background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(18px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }
.nav-btn { border:0; background:transparent; color:var(--muted); min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.nav-btn span { font-size:22px; line-height:1; }.nav-btn b{font-size:10px; font-weight:650}.nav-btn.selected{color:var(--green)}

.page-heading { display:flex; align-items:end; justify-content:space-between; margin:8px 2px 14px; }
.page-heading h1{margin:0;font-size:27px;}.page-heading span{color:var(--muted);font-size:13px;}
.search-wrap input { width:100%; height:48px; border:1px solid var(--line); border-radius:14px; padding:0 14px; background:var(--card); }
.filter-row { display:flex; gap:7px; overflow:auto; padding:10px 1px 4px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar{display:none}.filter-chip{flex:0 0 auto; min-height:37px; padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted)}.filter-chip.selected{background:var(--green);border-color:var(--green);color:white}
.history-list { display:grid; gap:10px; margin-top:9px; }
.trade-card { background:var(--card); border:1px solid var(--line); border-radius:17px; padding:14px; box-shadow:var(--shadow); }
.trade-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.trade-card-left{display:flex;align-items:center;gap:8px}.side-pill,.status-pill,.align-pill{display:inline-flex;align-items:center;min-height:27px;padding:0 8px;border-radius:8px;font-size:11px;font-weight:800}.side-pill.buy{background:var(--green-soft);color:var(--green)}.side-pill.sell{background:var(--red-soft);color:var(--red)}.status-pill{background:var(--bg);color:var(--muted)}.align-pill.counter{background:#fff2d9;color:#926000}.align-pill.trend{background:var(--green-soft);color:var(--green)}
.trade-pnl{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums}.trade-pnl.pos{color:var(--green)}.trade-pnl.neg{color:var(--red)}
.trade-main{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.trade-main span{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:10px}.trade-main strong{color:var(--text);font-size:13px;font-variant-numeric:tabular-nums}.trade-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:11px}.detail-btn{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)}
.empty-state{padding:52px 20px;text-align:center;color:var(--muted);}.empty-state strong{display:block;color:var(--text);margin-bottom:6px;}

.stats-hero { padding:20px; background:linear-gradient(135deg,#0c2519,#102e20); color:white; border-radius:20px; margin-bottom:12px; }
.stats-hero span{font-size:12px;color:#b9c8bf}.stats-hero strong{display:block;font-size:38px;margin:5px 0 2px;font-variant-numeric:tabular-nums}.stats-hero small{color:#99ab9f;font-size:10px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stat-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}.stat-card span{display:block;color:var(--muted);font-size:11px}.stat-card strong{display:block;margin-top:5px;font-size:22px;font-variant-numeric:tabular-nums}.stats-section{margin-top:12px}.compare-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}.compare-row:last-child{border-bottom:0}.compare-row span{font-size:13px}.compare-row strong{font-size:13px}.compare-row small{color:var(--muted)}

.settings-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}.settings-line:last-of-type{border-bottom:0}.helper{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.settings-field{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:13px}.settings-field input{width:100px;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 9px;background:var(--bg);text-align:right}.date-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}.date-range label{font-size:11px;color:var(--muted)}.date-range input{width:100%;height:43px;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:0 8px;color:var(--text)}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.danger-card{border-color:color-mix(in srgb,var(--red) 30%,var(--line))}.danger-action{width:100%;min-height:49px;border:1px solid var(--red);border-radius:13px;background:var(--red-soft);color:var(--red);font-weight:750}.install-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.modal-backdrop{position:fixed;z-index:70;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.modal-sheet{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:0;width:min(640px,100%);max-height:88vh;overflow:auto;background:var(--card);border-radius:25px 25px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 50px rgba(0,0,0,.24)}
.modal-handle{width:42px;height:5px;border-radius:999px;background:var(--line);margin:3px auto 15px}.modal-title{margin:0 0 8px;font-size:21px}.modal-text{color:var(--muted);font-size:13px;line-height:1.55}.warning-box{background:#fff5db;color:#7a5100;border:1px solid #eac466;border-radius:14px;padding:12px;margin:13px 0;font-size:13px;line-height:1.5}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.modal-actions button{min-height:50px;border-radius:13px;font-weight:800}.modal-cancel{border:1px solid var(--line);background:var(--card);color:var(--text)}.modal-confirm{border:0;background:var(--green);color:white}.modal-confirm.danger{background:var(--red)}
.detail-list{display:grid;gap:0;margin-top:10px;border-top:1px solid var(--line)}.detail-row{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.detail-row span{color:var(--muted)}.detail-row strong{font-weight:650;overflow-wrap:anywhere}.review-box{background:var(--bg);border-radius:14px;padding:13px;margin-top:14px}.review-box h3{margin:0 0 7px;font-size:15px}.review-box p{margin:5px 0;font-size:12px;line-height:1.5}.score{font-size:29px!important;font-weight:850;color:var(--green)}
.close-form{display:grid;gap:12px}.close-form label{font-size:12px;font-weight:650}.close-form input,.close-form select,.close-form textarea{width:100%;min-height:45px;margin-top:6px;border:1px solid var(--line);border-radius:11px;background:var(--bg);padding:0 10px;color:var(--text)}.close-form textarea{padding:10px;min-height:72px}.calc-box{background:var(--bg);padding:11px;border-radius:12px;display:flex;justify-content:space-between;font-size:12px}.calc-box strong{font-variant-numeric:tabular-nums}

.toast{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));max-width:calc(100% - 30px);padding:11px 15px;border-radius:12px;background:#111b15;color:white;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

@media (max-width:390px){
  .quote-card{padding-left:15px;padding-right:15px}.quote-body{grid-template-columns:1fr}.spread-grid{grid-template-columns:repeat(3,1fr);text-align:left}.spread-row{grid-column:auto;border-top:0;padding-top:0;flex-direction:column!important;justify-content:initial;gap:2px!important}.mid-price{font-size:50px}.lot-grid{grid-template-columns:repeat(2,1fr)}.segmented.three{grid-template-columns:1fr}.field-control-with-button{grid-template-columns:1fr}.secondary-action{min-height:44px}.sticky-actions{bottom:calc(70px + env(safe-area-inset-bottom))}
}