:root {
  color-scheme: light;
  --ink: #172b43; --muted: #718196; --line: #e5ebf1; --canvas: #f4f7fa; --paper: #fff;
  --green: #17836c; --green-dark: #106b57; --green-soft: #eaf5f1; --blue-soft: #edf3fa;
  --shadow: 0 5px 18px rgba(24,45,68,.055);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--canvas); color:var(--ink); padding-bottom:calc(84px + env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.topbar { position:sticky; top:0; z-index:10; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 max(18px,calc((100vw - 680px)/2)); border-bottom:1px solid rgba(229,235,241,.9); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--green); color:#fff; font-size:11px; font-weight:800; letter-spacing:-.4px; box-shadow:0 4px 9px rgba(23,131,108,.2); }
.brand-copy b { display:block; font-size:14px; letter-spacing:-.2px; } .brand-copy small { display:block; margin-top:2px; color:var(--muted); font-size:8px; font-weight:700; letter-spacing:1.15px; }
.online { display:flex; align-items:center; gap:7px; color:#52677d; font-size:10px; font-weight:650; } .online i { width:7px; height:7px; border-radius:50%; background:#28a879; box-shadow:0 0 0 3px #e5f4ed; }
.online.offline { color:#a74438; } .online.offline i { background:#ce655b; box-shadow:0 0 0 3px #f9e8e6; }
main { width:min(100% - 32px,620px); margin:0 auto; padding:23px 0 36px; }
.view { display:none; animation:appear .18s ease-out; } .view.active { display:block; }
@keyframes appear { from { opacity:.5; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.eyebrow { margin:0 0 7px; color:var(--green-dark); font-size:9px; font-weight:800; letter-spacing:1.25px; }
.intro { padding:9px 2px 17px; } .intro h1 { margin:0; font-size:clamp(27px,7vw,34px); line-height:1.08; letter-spacing:-1px; }
.intro > p:last-child,.muted { color:var(--muted); font-size:13px; line-height:1.5; } .intro > p:last-child { margin:8px 0 0; }
.searchbar { display:flex; gap:9px; margin:5px 0 16px; }
.search-field { min-width:0; flex:1; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #dfe7ed; border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.search-field:focus-within { border-color:#8ac5b3; box-shadow:0 0 0 3px rgba(23,131,108,.09); }
.search-field svg { width:18px; height:18px; flex:none; fill:none; stroke:#7f90a2; stroke-width:1.8; stroke-linecap:round; }
.search-field input { min-width:0; height:47px; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }
input::placeholder,textarea::placeholder { color:#9aa8b7; }
.primary,.secondary,.danger { min-height:43px; border:0; border-radius:12px; padding:11px 15px; font-size:12px; font-weight:750; }
.primary { background:var(--green); color:#fff; box-shadow:0 4px 10px rgba(23,131,108,.16); } .primary:active { background:var(--green-dark); transform:translateY(1px); }
.secondary { background:var(--blue-soft); color:var(--ink); } .danger { background:#fff0ee; color:#a63e34; }
.search-submit { width:48px; display:grid; place-items:center; padding:0; } .search-submit svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.info-strip { display:flex; align-items:center; gap:10px; margin:13px 0 26px; padding:11px 13px; border:1px solid #dfede7; border-radius:13px; background:#f0f8f4; }
.info-icon { width:30px; height:30px; display:grid; flex:none; place-items:center; border-radius:10px; background:#dcefe6; color:var(--green-dark); font-weight:800; }
.info-strip b,.info-strip small { display:block; } .info-strip b { font-size:11px; } .info-strip small { margin-top:2px; color:#71877d; font-size:10px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:0 1px 11px; } .section-head h2 { margin:0; font-size:19px; letter-spacing:-.4px; }
.text-button { padding:7px 2px; border:0; background:transparent; color:var(--green-dark); font-size:12px; font-weight:750; }
.watchlist { display:grid; gap:9px; }
.watch-row { width:100%; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); color:var(--ink); text-align:left; transition:transform .14s ease,border-color .14s ease; }
.watch-row:active { transform:scale(.99); border-color:#a7cfc2; } .watch-main { min-width:0; display:flex; align-items:center; gap:11px; }
.ticker-avatar { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; background:#edf3fa; color:#3f5872; font-size:10px; font-weight:800; }
.watch-main b,.watch-main small { display:block; } .watch-main b { font-size:13px; }
.watch-main small { overflow:hidden; max-width:240px; margin-top:3px; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.watch-open { width:28px; height:28px; display:grid; flex:none; place-items:center; border-radius:9px; background:#f3f6f8; color:#789; font-size:18px; }
.fineprint,.saved-hint { color:var(--muted); font-size:10px; line-height:1.45; } .fineprint { margin:13px 2px; }
.back-link { display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; padding:3px 0; border:0; background:transparent; color:var(--green-dark); font-size:12px; font-weight:750; }
.back-link span { font-size:23px; line-height:12px; } .stock-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stock-head h1 { margin:0; font-size:25px; letter-spacing:-.7px; } .ticker { margin:5px 0 0; color:var(--muted); font-size:11px; font-weight:650; }
.watch-button { min-height:36px; padding:8px 11px; border:1px solid #dce8e2; border-radius:11px; background:#f4faf7; color:var(--green-dark); font-size:11px; font-weight:750; white-space:nowrap; }
.price-card { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0; padding:15px; border:1px solid #e4ebe8; border-radius:15px; background:linear-gradient(110deg,#fff 55%,#f3faf6); }
.price-card span { display:block; color:var(--muted); font-size:10px; } .price-card strong { display:block; margin-top:4px; font-size:16px; letter-spacing:-.2px; }
.small-link { flex:none; color:var(--green-dark); font-size:10px; font-weight:750; text-decoration:none; }
.stock-tabs { position:sticky; top:62px; z-index:4; display:flex; gap:3px; overflow:auto; margin:0 -16px 14px; padding:0 16px; border-bottom:1px solid var(--line); background:rgba(244,247,250,.96); scrollbar-width:none; }
.stock-tabs::-webkit-scrollbar { display:none; } .stock-tabs button { min-height:43px; flex:none; padding:10px 12px 9px; border:0; border-bottom:2px solid transparent; background:transparent; color:#78889a; font-size:10px; font-weight:750; }
.stock-tabs button.active { border-color:var(--green); color:var(--green-dark); }
.stock-panel { display:none; padding:17px 15px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow); } .stock-panel.active { display:block; }
.stock-panel h2 { margin:0; font-size:18px; letter-spacing:-.35px; } .stock-panel > .muted { margin:7px 0 13px; font-size:12px; }
.link-list { display:grid; gap:8px; margin:14px 0; }
.source-link { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid #e8edf1; border-radius:12px; background:#fff; color:var(--ink); text-decoration:none; transition:background .15s ease,border-color .15s ease; }
.source-link:active { border-color:#acd0c3; background:#f8fcfa; } .source-link strong,.source-link small { display:block; }
.source-link strong { font-size:11px; } .source-link small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.4; }
.source-link > span:last-child { width:25px; height:25px; display:grid; flex:none; place-items:center; border-radius:8px; background:#f1f7f4; color:var(--green); font-size:13px; }
.link-list.compact { gap:7px; } .link-list.compact .source-link { min-height:51px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:14px 0; }
.form-grid label,.field-label { display:block; color:#52667b; font-size:10px; font-weight:700; line-height:1.35; }
.form-grid input,.stock-panel textarea,#closePrices { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid #dfe6ec; border-radius:10px; outline:0; background:#fbfcfd; color:var(--ink); font-size:12px; }
.form-grid input:focus,.stock-panel textarea:focus,#closePrices:focus,#webQuery:focus { border-color:#87c0ae; box-shadow:0 0 0 3px rgba(23,131,108,.08); }
.field-label { margin:12px 0 5px; } .stock-panel textarea { margin:0 0 10px; resize:vertical; line-height:1.5; }
.saved-hint { min-height:14px; margin:8px 0 0; }
.result-card { margin:12px 0; padding:13px; border:1px solid #e7edf1; border-radius:12px; background:#f7f9fb; color:#40566d; font-size:11px; line-height:1.65; }
.result-card b { color:var(--ink); } .result-card small { display:inline-block; margin-top:5px; color:var(--muted); font-size:9px; }
.positive { color:#14805f !important; } .negative { color:#b24b43 !important; }
.source-note { display:flex; flex-direction:column; gap:4px; margin:14px 0 2px; padding:11px 12px; border-radius:11px; background:#f3f6f8; font-size:10px; line-height:1.45; }
.source-note b { color:#455d73; font-size:10px; } .source-note span { color:#78889a; }
#internet h1,#settings h1 { margin:0; font-size:27px; letter-spacing:-.7px; } #internet > p.muted { margin:7px 0 16px; }
#webQuery { min-width:0; flex:1; height:47px; padding:0 13px; border:1px solid #dfe7ed; border-radius:12px; outline:0; background:#fff; box-shadow:var(--shadow); font-size:12px; }
.notice { display:flex; flex-direction:column; gap:4px; margin:13px 0; padding:12px; border:1px solid #dfeee7; border-radius:12px; background:#f0f8f4; color:#315b50; font-size:11px; line-height:1.45; }
.notice b { font-size:11px; } .notice span { color:#637f73; }
.bottom-nav { position:fixed; z-index:12; right:0; bottom:0; left:0; display:flex; justify-content:space-around; padding:7px 14px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid rgba(225,232,238,.95); background:rgba(255,255,255,.97); box-shadow:0 -5px 18px rgba(26,48,72,.045); backdrop-filter:blur(14px); }
.bottom-nav button { min-width:74px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 8px; border:0; border-radius:11px; background:transparent; color:#8492a1; font-size:9px; font-weight:650; }
.bottom-nav button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav button.active { background:#eff7f3; color:var(--green-dark); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:360px) { main { width:min(100% - 24px,620px); } .stock-tabs { margin-right:-12px; margin-left:-12px; padding-right:12px; padding-left:12px; } .form-grid { grid-template-columns:1fr; gap:9px; } .form-grid input { margin-top:4px; } .watch-main small { max-width:190px; } }
@media (min-width:600px) { main { padding-top:31px; } .intro { padding-top:17px; } .intro h1 { font-size:37px; } .stock-panel { padding:21px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }