@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #0b0f0e;
  --bg-soft: #0f1513;
  --panel: #141b19;
  --panel-2: #18211e;
  --panel-3: #1d2824;
  --line: #29352f;
  --line-soft: rgba(113, 137, 124, .18);
  --text: #edf4ef;
  --muted: #91a198;
  --muted-2: #6e7e75;
  --lime: #c7f36a;
  --lime-soft: rgba(199, 243, 106, .1);
  --teal: #71d6b0;
  --rose: #f28c92;
  --gold: #e7bd72;
  --blue: #79bde8;
  --mono: 'DM Mono', Consolas, monospace;
  --sans: 'Manrope', 'Segoe UI', sans-serif;
  --shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 82% -10%, rgba(128, 192, 112, .07), transparent 28rem), var(--bg); color: var(--text); font: 15px var(--sans); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 65%); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { width: min(1480px, calc(100% - 56px)); margin: 0 auto; transform-origin: top center; }

@media (min-width: 761px) {
  html[data-text-size="compact"] .app-shell { zoom: .96; }
  html[data-text-size="comfortable"] .app-shell { zoom: 1.07; }
  html[data-text-size="large"] .app-shell { zoom: 1.22; }
}

.topbar { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(128, 151, 139, .14); }
.brand { display: flex; align-items: center; gap: 9px; width: max-content; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.brand:hover { text-decoration: none; }
.brand-name b { color: var(--lime); }
.brand-mark { height: 21px; display: inline-flex; align-items: end; gap: 3px; }
.brand-mark i { width: 4px; display: block; border-radius: 4px; background: var(--lime); transform: skew(-17deg); }
.brand-mark i:nth-child(1) { height: 9px; opacity: .55; }
.brand-mark i:nth-child(2) { height: 15px; opacity: .75; }
.brand-mark i:nth-child(3) { height: 21px; }
.pro-tag, .game-tag { padding: 4px 6px; border-radius: 5px; font: 8px var(--mono); letter-spacing: .08em; }
.pro-tag { border: 1px solid rgba(199, 243, 106, .32); background: var(--lime-soft); color: var(--lime); }
.game-tag { border: 1px solid #3c4942; color: #9cadA3; }
.main-nav { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid #26312c; border-radius: 9px; background: rgba(13, 18, 16, .65); }
.main-nav a { padding: 8px 11px; border-radius: 6px; color: #a6b4ac; font-size: 11px; font-weight: 600; }
.main-nav a:hover { background: #1d2823; color: var(--text); text-decoration: none; }
.topbar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.text-size-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #2d3933; border-radius: 7px; background: #0e1412; }
.text-size-switch button { min-width: 27px; height: 24px; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: #829188; cursor: pointer; font: 9px var(--sans); font-weight: 700; }
.text-size-switch button:hover { color: var(--text); }
.text-size-switch button.active { background: #293526; color: var(--lime); }
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #2d3933; border-radius: 7px; background: #0e1412; }
.language-switch button { min-width: 29px; height: 24px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: #75857c; cursor: pointer; font: 8px var(--mono); transition: background .15s, color .15s; }
.language-switch button:hover { color: var(--text); }
.language-switch button.active { background: #293526; color: var(--lime); }
.feed-status { display: inline-flex; align-items: center; gap: 8px; color: #a5b2ab; font-size: 11px; }
.feed-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(199,243,106,.6); }
.feed-status.loading i { background: var(--gold); box-shadow: 0 0 12px rgba(231,189,114,.5); }
.feed-status.offline i { background: var(--rose); box-shadow: 0 0 12px rgba(242,140,146,.45); }
.icon-button { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #151d1a; cursor: pointer; transition: .18s ease; }
.icon-button:hover { border-color: #69834c; transform: translateY(-1px); }
.icon-button svg, .search-box svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.icon-button svg { width: 17px; height: 17px; color: #c1cec6; }
.icon-button.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr); align-items: end; gap: 60px; padding: 54px 0 35px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--lime); font: 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow > span { width: 23px; height: 1px; background: var(--lime); }
h1 { margin: 0; font-size: clamp(37px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -.06em; }
h1 em { color: var(--lime); font-style: normal; font-weight: 600; }
.hero-copy > p:last-child { max-width: 720px; margin: 16px 0 0; color: #a5b3ab; font-size: 15px; line-height: 1.75; }
.search-box { position: relative; display: flex; align-items: center; gap: 11px; border: 1px solid #34423b; border-radius: 10px; background: #101714; color: #899990; transition: border-color .18s, box-shadow .18s; }
.search-box:focus-within { border-color: #6b874c; box-shadow: 0 0 0 4px rgba(199,243,106,.055); }
.hero-search { height: 50px; padding: 0 14px; box-shadow: var(--shadow); }
.search-box svg { width: 17px; height: 17px; flex: 0 0 auto; }
.search-box input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.search-box input::placeholder { color: #718078; }
.search-box kbd { padding: 2px 6px; border: 1px solid #3a473f; border-radius: 4px; color: #7d8d84; background: #151d1a; font: 9px var(--mono); }
.search-results { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; right: 0; overflow: hidden; max-height: 360px; overflow-y: auto; border: 1px solid #3a4a41; border-radius: 10px; background: #19221e; box-shadow: 0 22px 45px rgba(0,0,0,.46); }
.search-results[hidden] { display: none; }
.search-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid #27332d; background: transparent; text-align: left; cursor: pointer; }
.search-option:last-child { border-bottom: 0; }
.search-option:hover, .search-option:focus { background: #26332c; outline: 0; }
.search-option .search-name { display: flex; align-items: center; min-width: 0; gap: 9px; }
.search-option img { width: 25px; height: 25px; object-fit: contain; image-rendering: auto; }
.search-option strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-option small { flex: 0 0 auto; color: #819088; font: 8px var(--mono); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.kpi-card { min-width: 0; min-height: 132px; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; padding: 17px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, #17201d, #121816); text-align: left; }
button.kpi-card { cursor: pointer; transition: border-color .18s, transform .18s; }
button.kpi-card:hover { border-color: #51653f; transform: translateY(-2px); }
.kpi-card::after { content: ''; position: absolute; right: -24px; bottom: -55px; width: 115px; height: 115px; border: 1px solid rgba(199,243,106,.08); border-radius: 50%; }
.accent-card { background: linear-gradient(135deg, rgba(199,243,106,.08), #141c19 65%); }
.kpi-label { color: #a4b1aa; font-size: 11px; }
.kpi-label i { margin-right: 5px; font: normal 13px var(--mono); }
.up-arrow { color: var(--teal); }.down-arrow { color: var(--rose); }.coin-icon { color: var(--gold); }.pulse-icon { color: var(--lime); }
.kpi-card > strong { display: block; max-width: 100%; overflow: hidden; margin-top: 13px; color: #e4ede6; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-value { margin-top: 3px; color: var(--lime); font: 19px var(--mono); }
.kpi-card small { margin-top: auto; color: #829188; font-size: 10px; }
.positive { color: var(--teal) !important; }.negative { color: var(--rose) !important; }.gold { color: var(--gold) !important; }.neutral { color: #9aa8a0 !important; }

.best-deals-panel { margin-bottom: 18px; padding: 24px; border-color: rgba(199,243,106,.28); background: linear-gradient(135deg, rgba(199,243,106,.065), rgba(19,27,24,.98) 38%); }
.best-deals-head { align-items: center; margin-bottom: 14px; }
.deal-alert-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(199,243,106,.34); border-radius: 8px; background: rgba(199,243,106,.08); color: var(--lime); cursor: pointer; font-size: 11px; }
.deal-alert-button:hover { border-color: var(--lime); }
.deal-alert-button.active { border-color: rgba(113,214,176,.48); background: rgba(113,214,176,.09); color: var(--teal); }
.deal-alert-button span { font: 15px var(--mono); }
.deal-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.deal-guide > span { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #2d3a33; border-radius: 8px; background: rgba(10,15,13,.38); color: #94a39b; font-size: 11px; line-height: 1.45; }
.deal-guide i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(199,243,106,.3); border-radius: 50%; color: var(--lime); font: normal 9px var(--mono); }
.deal-guide b { color: #dce6df; font-weight: 700; }
.top-deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.top-deals-loading, .top-deals-empty { min-height: 170px; grid-column: 1 / -1; display: grid; place-content: center; color: #89988f; font-size: 12px; text-align: center; }
.top-deal-card { min-width: 0; min-height: 238px; position: relative; display: flex; flex-direction: column; padding: 16px; border: 1px solid #34443b; border-radius: 11px; background: linear-gradient(145deg, #18221e, #111815); cursor: pointer; text-align: left; transition: transform .18s, border-color .18s; }
.top-deal-card:hover { transform: translateY(-3px); border-color: #78994d; }
.top-deal-card.very-strong { border-color: rgba(199,243,106,.5); box-shadow: inset 0 0 0 1px rgba(199,243,106,.05); }
.deal-rank { position: absolute; top: 14px; right: 14px; color: #6f8077; font: 10px var(--mono); }
.deal-signal { width: max-content; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 8px; border: 1px solid rgba(199,243,106,.32); border-radius: 999px; background: rgba(199,243,106,.08); color: var(--lime); font-size: 10px; font-weight: 800; }
.deal-item { display: flex; align-items: center; gap: 10px; padding-right: 34px; }
.deal-item .item-icon { width: 38px; height: 38px; }
.deal-item .item-icon img { max-width: 31px; max-height: 31px; }
.deal-item strong { display: block; overflow: hidden; color: #edf4ef; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.deal-item small { display: block; margin-top: 3px; color: #829188; font: 9px var(--mono); }
.deal-price-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 15px 0 11px; padding-bottom: 11px; border-bottom: 1px solid #2a3730; }
.deal-price-line span { display: block; color: #74847b; font-size: 9px; }
.deal-price-line strong { display: block; margin-top: 3px; color: #dce6df; font: 14px var(--mono); }
.deal-discount { color: var(--teal) !important; text-align: right; }
.deal-reason { margin: 0; color: #a8b5ad; font-size: 11px; line-height: 1.55; }
.deal-purpose { margin-top: auto; padding-top: 12px; color: #899990; font-size: 10px; line-height: 1.5; }
.deal-purpose b { color: var(--gold); }
.best-deals-note { margin: 11px 0 0; color: #75857c; font-size: 10px; }

.panel { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(19, 27, 24, .94); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.scanner-panel { padding: 22px 22px 14px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 19px; }
.section-kicker { margin-bottom: 6px; color: #8fa097; }
h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.section-copy { margin: 6px 0 0; color: #8d9c94; font-size: 12px; line-height: 1.55; }
.view-tabs, .tool-tabs, .range-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #2d3933; border-radius: 8px; background: #0e1412; }
.view-tab, .tool-tab, .range-tabs button { border: 0; border-radius: 6px; background: transparent; color: #829188; cursor: pointer; transition: background .15s, color .15s; }
.view-tab { padding: 8px 11px; font-size: 11px; }
.view-tab.active, .tool-tab.active, .range-tabs button.active { background: #293526; color: var(--lime); }

.filter-bar { display: grid; grid-template-columns: 1.2fr .9fr .7fr .7fr .78fr .72fr .78fr 1.05fr auto; align-items: end; gap: 9px; padding: 14px; border: 1px solid #26322c; border-radius: 10px; background: #101614; }
.filter-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.filter-field > span, .input-grid label > span, .alert-builder label > span { color: #88988f; font: 9px var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.filter-field input, .filter-field select, .input-grid input, .alert-builder input, .alert-builder select { width: 100%; height: 38px; min-width: 0; padding: 0 9px; border: 1px solid #303d36; border-radius: 7px; outline: 0; background: #161f1b; color: #cbd6cf; font-size: 11px; }
select { color-scheme: dark; }
.filter-field input:focus, .filter-field select:focus, .input-grid input:focus, .alert-builder input:focus, .alert-builder select:focus { border-color: #677e4d; }
.secondary-button, .primary-button { min-height: 38px; padding: 0 12px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 600; transition: .15s; }
.secondary-button { border: 1px solid #35433b; background: #1a2420; color: #aebbb3; }
.secondary-button:hover { border-color: #62764e; color: var(--text); }
.primary-button { border: 1px solid #7a984c; background: var(--lime); color: #10150f; }
.primary-button:hover { filter: brightness(1.06); }
.filter-reset { white-space: nowrap; }
.metric-note { display: flex; align-items: center; gap: 9px; margin: 11px 0 4px; padding: 8px 10px; border-radius: 7px; background: rgba(121, 189, 232, .04); color: #778980; }
.metric-note p { margin: 0; font-size: 10px; line-height: 1.6; }
.metric-note strong { color: #a6b8ad; }
.info-dot { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(121,189,232,.35); border-radius: 50%; color: var(--blue); font: 9px var(--mono); }

.table-wrap { overflow-x: auto; scrollbar-color: #34443b transparent; }
.market-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.market-table th { padding: 12px 9px 10px; border-bottom: 1px solid #2a3630; color: #829188; font: 9px var(--mono); letter-spacing: .035em; text-align: right; text-transform: uppercase; }
.market-table th:first-child { text-align: left; }
.market-table td { padding: 11px 9px; border-bottom: 1px solid rgba(58, 72, 64, .45); color: #c4d0c8; font: 10px var(--mono); text-align: right; }
.market-table tr:last-child td { border-bottom: 0; }
.market-row { cursor: pointer; transition: background .12s; }
.market-row:hover, .market-row.selected { background: rgba(199,243,106,.045); }
.market-row.selected td:first-child { box-shadow: inset 2px 0 var(--lime); }
.item-cell { display: flex; align-items: center; gap: 9px; text-align: left; }
.item-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid #36453d; border-radius: 7px; background: radial-gradient(circle, #26332c, #19211e); }
.item-icon img { max-width: 28px; max-height: 28px; object-fit: contain; }
.item-icon span { color: #aab9b0; font: 8px var(--mono); }
.item-text { min-width: 0; max-width: 190px; }
.item-text strong { display: block; overflow: hidden; color: #dce6df; font: 12px var(--sans); text-overflow: ellipsis; }
.item-text small { display: block; margin-top: 2px; color: #819188; font: 8px var(--mono); }
.member-dot { color: var(--gold); }
.margin-cell small { display: block; margin-top: 2px; color: #6e7c74; font-size: 7px; }
.signal-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid #354239; border-radius: 999px; background: #1b2420; color: #91a198; font: 9px var(--sans); }
.signal-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7d8d84; }
.signal-badge.signal-up { border-color: rgba(113,214,176,.26); color: var(--teal); }.signal-badge.signal-up::before { background: var(--teal); }
.signal-badge.signal-down { border-color: rgba(242,140,146,.24); color: var(--rose); }.signal-badge.signal-down::before { background: var(--rose); }
.signal-badge.signal-margin { border-color: rgba(231,189,114,.26); color: var(--gold); }.signal-badge.signal-margin::before { background: var(--gold); }
.table-message { height: 145px; color: #87958d !important; text-align: center !important; font: 10px var(--sans) !important; }
.spinner { width: 14px; height: 14px; display: inline-block; margin-right: 7px; vertical-align: -3px; border: 2px solid rgba(199,243,106,.18); border-top-color: var(--lime); border-radius: 50%; animation: spin .8s linear infinite; }
.table-footer { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid rgba(57,71,63,.28); color: #87968e; font-size: 10px; }

.recommendations-panel { margin-top: 16px; padding: 22px; }
.recommendations-head { align-items: flex-end; }
.recommendation-filters { min-width: 220px; }
.recommendation-filters select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #35423b; border-radius: 7px; outline: 0; background: #151e1a; color: #cbd6cf; font-size: 11px; }
.recommendation-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.recommendation-tab { min-height: 46px; padding: 0 10px; border: 1px solid #2e3b34; border-radius: 8px; background: #111815; color: #95a39b; cursor: pointer; font-size: 11px; font-weight: 700; transition: border-color .15s, background .15s, color .15s; }
.recommendation-tab span { margin-right: 5px; color: #93aa80; font: 13px var(--mono); }
.recommendation-tab:hover { border-color: #526640; color: #cbd7cf; }
.recommendation-tab.active { border-color: #607a43; background: #273522; color: var(--lime); }
.recommendation-tab.active span { color: var(--lime); }
.recommendation-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .72fr); gap: 13px; }
.recommendation-market, .selected-evaluation { min-width: 0; border: 1px solid #2b3831; border-radius: 10px; background: #101714; }
.recommendation-market { padding: 13px; }
.recommendation-subhead { min-height: 36px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; color: #a1afa7; font-size: 11px; line-height: 1.45; }
.recommendation-subhead small { flex: 0 0 auto; color: #75857c; font: 9px var(--mono); }
.recommendation-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recommendation-loading, .recommendation-empty { min-height: 220px; grid-column: 1 / -1; display: grid; place-content: center; color: #78877f; font-size: 9px; text-align: center; }
.recommendation-card { min-width: 0; min-height: 174px; position: relative; display: flex; flex-direction: column; padding: 14px; border: 1px solid #2d3a33; border-radius: 9px; background: linear-gradient(135deg, #16201c, #121916); cursor: pointer; text-align: left; transition: transform .16s, border-color .16s; }
.recommendation-card:hover { transform: translateY(-2px); border-color: #597044; }
.recommendation-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 48px; }
.recommendation-card-top .item-icon { width: 31px; height: 31px; }
.recommendation-card-name { min-width: 0; }
.recommendation-card-name strong { display: block; overflow: hidden; color: #e2ebe5; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-card-name small { display: block; margin-top: 3px; color: #829188; font: 9px var(--mono); }
.recommendation-score { position: absolute; top: 11px; right: 11px; padding: 5px 7px; border: 1px solid rgba(199,243,106,.26); border-radius: 999px; background: rgba(199,243,106,.07); color: var(--lime); font: 9px var(--mono); }
.recommendation-reason { margin: 12px 0; color: #aab7af; font-size: 11px; line-height: 1.55; }
.recommendation-metrics { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.recommendation-metrics div { min-width: 0; }
.recommendation-metrics span { display: block; color: #77877e; font-size: 9px; }
.recommendation-metrics strong { display: block; overflow: hidden; margin-top: 3px; color: #c8d4cc; font: 11px var(--mono); text-overflow: ellipsis; }
.selected-evaluation { padding: 15px; }
.evaluation-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evaluation-head h3, .planner-head h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.score-ring { --score: 0; width: 58px; height: 58px; display: grid; place-content: center; flex: 0 0 auto; position: relative; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--score) * 1%), #28352e 0); text-align: center; }
.score-ring::after { content: ''; position: absolute; inset: 5px; border-radius: inherit; background: #141c19; }
.score-ring strong, .score-ring small { position: relative; z-index: 1; }
.score-ring strong { color: var(--lime); font: 13px var(--mono); }
.score-ring small { color: #6f7e76; font: 6px var(--mono); }
.evaluation-action { display: flex; align-items: center; gap: 7px; margin: 13px 0 10px; padding: 11px 12px; border: 1px solid #35423b; border-radius: 7px; background: #17201c; color: #aab7af; font-size: 12px; font-weight: 800; line-height: 1.4; }
.evaluation-action span { font-size: 7px; }
.buy-action { border-color: rgba(113,214,176,.32); background: rgba(113,214,176,.07); color: var(--teal); }
.sell-action { border-color: rgba(231,189,114,.32); background: rgba(231,189,114,.07); color: var(--gold); }
.risk-action { border-color: rgba(242,140,146,.3); background: rgba(242,140,146,.06); color: var(--rose); }
.evaluation-reasons { margin: 12px 0 0; padding: 0 0 0 19px; color: #94a39b; font-size: 11px; line-height: 1.65; }
.evaluation-reasons li + li { margin-top: 4px; }
.item-use-box { margin-top: 13px; padding: 11px; border: 1px solid #2b3831; border-radius: 8px; background: #121a17; }
.item-use-box > span, .evaluation-meaning > span, .evaluation-plan > span { color: #7f8f86; font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.item-use-box p { margin: 8px 0 10px; color: #b8c4bc; font-size: 11px; line-height: 1.65; }
.item-use-box a { font-size: 10px; font-weight: 700; }
.evaluation-meaning { margin: 0 0 10px; padding: 11px 12px; border-left: 3px solid var(--lime); border-radius: 0 7px 7px 0; background: rgba(199,243,106,.045); }
.evaluation-meaning p, .evaluation-plan p { margin: 7px 0 0; color: #b8c4bc; font-size: 11px; line-height: 1.6; }
.evaluation-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin: 10px 0; border: 1px solid #2b3831; border-radius: 7px; }
.evaluation-price-grid > div { min-width: 0; padding: 9px; border-right: 1px solid #2b3831; }
.evaluation-price-grid > div:last-child { border-right: 0; }
.evaluation-price-grid span { display: block; color: #73837a; font-size: 8px; }
.evaluation-price-grid strong { display: block; overflow: hidden; margin-top: 4px; color: #dbe5df; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.evaluation-plan { margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(113,214,176,.22); border-radius: 8px; background: rgba(113,214,176,.04); }
.planner-shortcut { width: 100%; min-height: 38px; margin-top: 10px; border: 1px solid rgba(231,189,114,.28); border-radius: 6px; background: rgba(231,189,114,.055); color: var(--gold); cursor: pointer; font-size: 10px; }
.planner-shortcut[hidden] { display: none; }
.planner-shortcut:hover { border-color: rgba(231,189,114,.55); }
.production-planner { margin-top: 13px; padding: 15px; border: 1px solid #334139; border-radius: 10px; background: linear-gradient(120deg, rgba(231,189,114,.045), transparent 45%), #101714; }
.production-planner[hidden] { display: none; }
.planner-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.recipe-badge { padding: 6px 8px; border: 1px solid rgba(231,189,114,.28); border-radius: 6px; background: rgba(231,189,114,.06); color: var(--gold); font: 7px var(--mono); }
.planner-copy { max-width: 970px; margin: 9px 0 10px; color: #9cabA3; font-size: 11px; line-height: 1.65; }
.planner-advice { margin: 0 0 13px; padding: 10px 11px; border: 1px solid rgba(113,214,176,.22); border-radius: 7px; background: rgba(113,214,176,.045); color: #aebbb3; font-size: 11px; line-height: 1.55; }
.planner-advice strong { color: var(--teal); }
.recipe-table-wrap { overflow-x: auto; }
.recipe-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.recipe-table th { padding: 8px; border-bottom: 1px solid #2e3b34; color: #6d7c74; font: 7px var(--mono); text-align: right; text-transform: uppercase; }
.recipe-table th:first-child { text-align: left; }
.recipe-table td { padding: 8px; border-bottom: 1px solid rgba(59,74,65,.36); color: #b5c1b9; font: 8px var(--mono); text-align: right; }
.recipe-table td:first-child { color: #d2ddd5; font-family: var(--sans); text-align: left; }
.recipe-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.recipe-summary div { padding: 10px; border: 1px solid #2c3932; border-radius: 7px; background: #141c19; }
.recipe-summary span { display: block; color: #6d7c74; font-size: 7px; }
.recipe-summary strong { display: block; margin-top: 5px; color: #d7e1da; font: 11px var(--mono); }
.planner-note { margin: 10px 0 0; color: #78877f; font-size: 9px; }
.recommendation-disclaimer { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 9px 10px; border: 1px solid rgba(231,189,114,.18); border-radius: 7px; background: rgba(231,189,114,.035); color: #78877f; }
.recommendation-disclaimer > span { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(231,189,114,.35); border-radius: 50%; color: var(--gold); font: 9px var(--mono); }
.recommendation-disclaimer p { margin: 1px 0 0; font-size: 8px; line-height: 1.55; }

.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(365px, .72fr); gap: 16px; align-items: start; margin-top: 16px; }
.chart-panel, .tools-panel { padding: 22px; }
.item-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.selected-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.large-icon { width: 48px; height: 48px; border-radius: 10px; }
.large-icon img { max-width: 38px; max-height: 38px; }
.large-icon span { font-size: 11px; }
.selected-item .section-kicker { margin-bottom: 4px; }
.selected-item h2 { font-size: 20px; }
.item-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; color: #718078; font: 8px var(--mono); }
.item-meta span:first-child { color: #9babA2; }
.watch-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #435146; border-radius: 8px; background: #1b251f; color: #c5d0c8; cursor: pointer; font-size: 9px; }
.watch-button > span { color: var(--gold); font-size: 15px; line-height: 1; }
.watch-button[aria-pressed="true"] { border-color: #67804b; background: #273621; color: var(--lime); }
.detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 19px; }
.detail-stat { min-width: 0; padding: 11px 12px; border: 1px solid #2c3932; border-radius: 9px; background: #101714; }
.detail-stat > span { display: block; color: #84938a; font-size: 8px; }
.detail-stat strong { display: block; overflow: hidden; margin: 5px 0 3px; color: #dce6df; font: 14px var(--mono); text-overflow: ellipsis; }
.detail-stat small { display: block; overflow: hidden; color: #64746b; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.chart-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 24px 0 10px; }
.period-change { color: #b4c1ba; font: 12px var(--mono); }
.range-tabs button { padding: 7px 8px; font: 8px var(--mono); }
.compare-row { display: flex; align-items: center; gap: 9px; min-height: 39px; margin-bottom: 8px; }
.compact-search { width: min(270px, 100%); height: 34px; padding: 0 9px; }
.compact-search svg { width: 14px; height: 14px; }
.compact-search input { font-size: 9px; }
.compare-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(121,189,232,.32); border-radius: 7px; background: rgba(121,189,232,.07); color: var(--blue); font-size: 8px; }
.compare-chip[hidden] { display: none; }
.compare-chip button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; line-height: 1; }
.chart-mode-hint { margin-left: auto; color: #66766d; font-size: 8px; }
.chart-shell { height: 335px; position: relative; overflow: hidden; border: 1px solid #29362f; border-radius: 10px; background: linear-gradient(180deg, rgba(199,243,106,.025), transparent 45%), #0f1513; }
#priceChart { width: 100%; height: 100%; display: block; }
.chart-message { position: absolute; inset: 0; display: grid; place-content: center; color: #89978f; font-size: 9px; background: rgba(15,21,19,.84); }
.chart-message[hidden] { display: none; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 145px; padding: 8px 9px; border: 1px solid #45564c; border-radius: 7px; background: rgba(23,31,28,.96); color: #aebbb3; box-shadow: 0 12px 25px rgba(0,0,0,.35); pointer-events: none; font: 8px/1.7 var(--mono); }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { color: var(--text); }
.chart-legend { display: flex; align-items: center; gap: 15px; min-height: 31px; color: #728078; font-size: 8px; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 12px; height: 2px; display: inline-block; border-radius: 2px; }
.legend-buy { background: var(--teal); }.legend-sell { background: var(--gold); }.legend-main { background: var(--lime); }.legend-compare { background: var(--blue); }
.chart-updated { margin-left: auto; }
.history-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 2px; }
.history-insights div { padding: 9px 10px; border: 1px solid #29352f; border-radius: 7px; background: #121917; }
.history-insights span { display: block; color: #6d7c74; font-size: 7px; }
.history-insights strong { display: block; margin-top: 4px; color: #c8d4cc; font: 10px var(--mono); }

.tools-panel { min-height: 675px; }
.tools-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.saved-locally { padding: 4px 6px; border: 1px solid #334039; border-radius: 5px; color: #718078; font-size: 7px; }
.tool-tabs { width: 100%; margin: 18px 0 14px; }
.tool-tab { flex: 1; padding: 8px; font-size: 8px; }
.tool-content { display: none; }
.tool-content.active { display: block; }
.tool-intro { min-height: 37px; margin: 0 0 14px; color: #7e8d85; font-size: 9px; line-height: 1.65; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input-grid label, .alert-builder label { display: flex; flex-direction: column; gap: 6px; }
.suffix-input { position: relative; }
.suffix-input input { padding-right: 28px; }
.suffix-input i { position: absolute; top: 10px; right: 10px; color: #76857d; font: normal 9px var(--mono); }
.quick-actions { display: flex; gap: 7px; margin: 10px 0 13px; }
.quick-actions button { flex: 1; min-height: 31px; padding: 0 7px; border: 1px solid #334139; border-radius: 7px; background: #1a2420; color: #9caaa2; cursor: pointer; font-size: 8px; }
.quick-actions button:hover { border-color: #657c4a; color: var(--lime); }
.calc-result { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #2d3a33; border-radius: 9px; background: #101714; }
.calc-result div { padding: 11px 12px; border-bottom: 1px solid #29352f; }
.calc-result div:nth-child(odd) { border-right: 1px solid #29352f; }
.calc-result div:nth-last-child(-n+2) { border-bottom: 0; }
.calc-result span { display: block; color: #74837b; font-size: 7px; }
.calc-result strong { display: block; margin-top: 5px; color: #dce5df; font: 11px var(--mono); }
.tool-note { margin: 12px 0 0; color: #66766d; font-size: 7px; line-height: 1.65; }
.alert-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.alert-builder .primary-button { grid-column: 1 / -1; }
.saved-list { margin-top: 14px; overflow: hidden; border: 1px solid #2a3730; border-radius: 8px; }
.empty-state { margin: 0; padding: 28px 12px; color: #6f7e76; text-align: center; font-size: 8px; }
.saved-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #29352f; background: #111815; }
.saved-row:last-child { border-bottom: 0; }
.saved-row-main { min-width: 0; }
.saved-row strong { display: block; overflow: hidden; color: #c9d4cd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.saved-row small { display: block; margin-top: 3px; color: #6e7d75; font: 7px var(--mono); }
.saved-row button { flex: 0 0 auto; border: 0; background: transparent; color: #839189; cursor: pointer; font-size: 14px; }
.full-button { width: 100%; margin-top: 11px; }
.position-result { margin-top: 13px; padding: 13px; border: 1px solid #2c3932; border-radius: 8px; background: #101714; }
.position-result > span { color: #75847c; font-size: 8px; }
.position-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.position-result-grid span { display: block; color: #6f7e76; font-size: 7px; }
.position-result-grid strong { display: block; margin-top: 4px; font: 11px var(--mono); }
.compact-list { max-height: 155px; overflow-y: auto; }

.radar-panel { margin-top: 16px; padding: 21px 22px; }
.compact-head { align-items: center; margin-bottom: 15px; }
.compact-head > p { margin: 0; color: #718078; font-size: 8px; }
.radar-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.radar-summary { min-height: 94px; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 13px; border: 1px solid #2c3932; border-radius: 8px; background: #111815; text-align: left; }
button.radar-summary { cursor: pointer; }
button.radar-summary:hover { border-color: #536642; }
.radar-summary span { color: #819088; font-size: 8px; }
.radar-summary strong { margin-top: 5px; color: var(--lime); font: 18px var(--mono); }
.radar-summary small { margin-top: auto; color: #65746c; font-size: 7px; }
.total-pnl strong { color: var(--teal); }

.page-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding: 28px 0 36px; color: #69786f; font-size: 8px; }
.page-footer > div { display: flex; flex-direction: column; gap: 5px; }
.page-footer strong { color: #a9b6ae; }
.footer-right { text-align: right; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 11px 14px; border: 1px solid #4c603e; border-radius: 9px; background: #1b261f; color: #d8e4da; box-shadow: 0 20px 45px rgba(0,0,0,.4); font-size: 9px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1260px) {
  .filter-bar { grid-template-columns: repeat(4, 1fr); }
  .filter-reset { height: 34px; }
  .top-deals-grid { grid-template-columns: repeat(2, 1fr); }
  .top-deal-card:last-child { grid-column: 1 / -1; }
  .analysis-grid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .7fr); }
  .market-table th:nth-child(10), .market-table td:nth-child(10) { display: none; }
}
@media (max-width: 1040px) {
  .app-shell { width: min(100% - 34px, 960px); }
  .topbar { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 25px; padding-top: 38px; }
  .hero-search { max-width: 680px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .deal-guide { grid-template-columns: 1fr; }
  .top-deals-grid { grid-template-columns: 1fr; }
  .top-deal-card:last-child { grid-column: auto; }
  .recommendation-layout { grid-template-columns: 1fr; }
  .analysis-grid { grid-template-columns: 1fr; }
  .tools-panel { min-height: auto; }
  .radar-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .app-shell { width: min(100% - 22px, 720px); }
  .topbar { height: 63px; }
  .game-tag, .feed-status > span { display: none; }
  .topbar-actions { gap: 8px; }
  .hero { padding: 33px 0 25px; }
  h1 { font-size: 40px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { min-height: 122px; padding: 14px; }
  .scanner-panel, .recommendations-panel, .best-deals-panel, .chart-panel, .tools-panel, .radar-panel { padding: 16px 13px; }
  .section-head { flex-direction: column; gap: 14px; }
  .view-tabs { width: 100%; overflow-x: auto; }
  .view-tab { flex: 1; white-space: nowrap; padding-inline: 8px; }
  .filter-bar { grid-template-columns: 1fr 1fr; padding: 11px; }
  .recommendations-head { align-items: stretch; }
  .recommendation-filters { width: 100%; min-width: 0; }
  .recommendation-tabs { grid-template-columns: 1fr 1fr; }
  .recommendation-cards { grid-template-columns: 1fr; }
  .deal-alert-button { width: 100%; justify-content: center; }
  .recipe-summary { grid-template-columns: 1fr 1fr; }
  .wide-field { grid-column: auto; }
  .metric-note { align-items: flex-start; }
  .market-table th:nth-child(6), .market-table td:nth-child(6), .market-table th:nth-child(8), .market-table td:nth-child(8), .market-table th:nth-child(9), .market-table td:nth-child(9), .market-table th:nth-child(10), .market-table td:nth-child(10), .market-table th:nth-child(11), .market-table td:nth-child(11) { display: none; }
  .item-text { max-width: 130px; }
  .detail-stats { grid-template-columns: 1fr 1fr; }
  .chart-toolbar { align-items: flex-start; flex-direction: column; }
  .range-tabs { width: 100%; }
  .range-tabs button { flex: 1; }
  .compare-row { align-items: stretch; flex-wrap: wrap; }
  .compact-search { width: 100%; }
  .chart-mode-hint { width: 100%; margin: 0; }
  .chart-shell { height: 285px; }
  .history-insights { grid-template-columns: 1fr 1fr; }
  .compact-head { align-items: flex-start; }
  .compact-head > p { text-align: left; }
}
@media (max-width: 500px) {
  .brand-name { font-size: 11px; }
  .pro-tag { display: none; }
  .text-size-switch { display: none; }
  .feed-status { display: none; }
  h1 { font-size: 34px; }
  .hero-copy > p:last-child { font-size: 11px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { min-height: 112px; }
  .filter-bar { grid-template-columns: 1fr; }
  .recommendation-tabs { grid-template-columns: 1fr; }
  .recipe-summary { grid-template-columns: 1fr; }
  .market-table th:nth-child(2), .market-table td:nth-child(2), .market-table th:nth-child(7), .market-table td:nth-child(7) { display: none; }
  .item-head { align-items: flex-start; }
  .large-icon { display: none; }
  .detail-stats { grid-template-columns: 1fr; }
  .detail-stat small { white-space: normal; }
  .chart-shell { height: 255px; }
  .chart-updated { display: none !important; }
  .input-grid, .alert-builder, .calc-result { grid-template-columns: 1fr; }
  .calc-result div, .calc-result div:nth-child(odd), .calc-result div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid #29352f; }
  .calc-result div:last-child { border-bottom: 0; }
  .radar-summary-grid { grid-template-columns: 1fr 1fr; }
  .page-footer { flex-direction: column; }
  .footer-right { text-align: left; }
}