


:root {
  --void-3:    #121A2A;
  --gold-dim:  rgba(254,204,0,0.55);
  --blue-soft: rgba(88,176,227,0.10);
}



  
  @keyframes pulse { 50% { opacity: .3; } }
  .chg.up { color: var(--up); }
  .chg.down { color: var(--down); }

  @keyframes lift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }


  
  
  .symrubb {
    font-size: 13px; letter-spacing: .16em; color: var(--gold);
    margin: 0 0 11px;
  }
  .symrad {
    display: flex; flex-wrap: wrap; gap: 7px 9px;
    margin: 0 0 clamp(22px, 4vw, 34px); padding: 0;
  }
  .symcell {
    display: inline-flex; align-items: baseline; gap: 7px;
    border: 1px solid var(--line-soft); border-radius: 8px;
    background: rgba(255,255,255,0.02); padding: 7px 12px;
  }
  .symcell b { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
  .symcell .chg {
    font-size: 11.5px; letter-spacing: .04em; color: var(--dim);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  
  .symcell .chg.up { color: var(--up); }
  .symcell .chg.down { color: var(--down); }
  .symcell .chg.flat { color: var(--dim); }
  
  .symcell .chg:empty { display: none; }
  @media (max-width: 420px) {
    .symrad { gap: 6px; }
    .symcell { padding: 6px 10px; }
    .symcell b { font-size: 11.5px; }
    .symcell .chg { font-size: 11px; }
  }


  
  
  .ana-grid { display: grid; grid-template-columns: minmax(0, 460px); gap: 16px; }
  .ana-card {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px;
    overflow: hidden;
    transition: transform .25s, border-color .25s, box-shadow .25s;
  }
  .ana-card:hover { transform: translateY(-8px); border-color: var(--line); box-shadow: var(--shadow); }
  .ana-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 0; }
  .ana-head .sym { font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--gold); }
  .ana-head .bias { font-size: 9.5px; letter-spacing: .14em; font-weight: 700; padding: 3px 9px; border-radius: 3px; }
  .ana-head .pub { margin-left: auto; font-size: 10px; color: var(--dim); }
  .ana-spark { width: 100%; height: 120px; display: block; margin-top: 12px; }
  .ana-wait { padding: 46px 18px; color: var(--dim); font-size: 10.5px; letter-spacing: .16em; text-align: center; }
  .bias-live { color: var(--up); background: rgba(59,221,139,.1); }
  .ana-head { min-height: 24px; }
  .ana-status {
    padding: 6px 18px 0; min-height: 42px;
    font-size: 9.5px; letter-spacing: .09em; line-height: 1.9;
    color: var(--down);
  }
  .ana-status.open { color: var(--up); }
  .ana-status .ac2 { color: var(--dim); }
  .ana-status b { color: var(--gold); font-variant-numeric: tabular-nums; }
  .ana-px { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .ana-px b { font-size: 20px; color: var(--text); }
  .ana-body { padding: 14px 18px 18px; border-top: 1px solid var(--line-soft); }
  .ana-body p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
  .ana-body .lvl-up { color: var(--up); font-weight: 600; }
  .ana-body .lvl-dn { color: var(--down); font-weight: 600; }
  
  .ana-meter { position: relative; height: 5px; border-radius: 3px; margin: 12px 0 5px;
    background: linear-gradient(90deg, rgba(255,90,90,.38), rgba(59,221,139,.38)); }
  .ana-meter .prick { position: absolute; top: -3.5px; left: 50%; width: 12px; height: 12px; border-radius: 50%;
    background: var(--gold); transform: translateX(-50%); box-shadow: 0 0 8px rgba(254,204,0,.55); transition: left .4s; }
  .ana-rl { margin-top: 14px; font-size: 9.5px; letter-spacing: .12em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ana-meter { margin-top: 6px; }
  .ana-mlbl { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .06em; color: var(--dim); }
  .ana-mlbl span { white-space: nowrap; }
  .ana-adr { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-2); }
  .ana-adr span, .ana-adr b { white-space: nowrap; }
  .ana-adr b { font-variant-numeric: tabular-nums; }
  .ana-adrbar { height: 3px; border-radius: 2px; background: var(--line-soft); margin-top: 5px; overflow: hidden; }
  .ana-adrbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s, background .4s; }
  .ana-adrn { margin-top: 5px; font-size: 10.5px; color: var(--dim); }
  .ana-body p.ana-plan { margin-top: 10px; font-size: 11.5px; color: var(--dim); }
  .ana-foot { margin-top: 44px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .ana-foot .hint { font-size: 12px; color: var(--dim); }


  
  
  .radar-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  @media (max-width: 900px) { .radar-grid { grid-template-columns: 1fr; } }
  
  .scope-wrap { display: flex; justify-content: center; }
  
  .radar-hud { width: min(360px, 80vw); animation: lift 9s ease-in-out 2; }
  @media (prefers-reduced-motion: reduce) { .radar-hud { animation: none; } }
  .radar-stage {
    position: relative; width: 100%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(53,240,154,.06), transparent 55%), rgba(4,7,6,.55);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.4), inset 0 0 40px rgba(0,0,0,.35);
  }
  .radar-stage canvas { width: 100%; height: 100%; display: block; }
  .center-read {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    pointer-events: none; text-align: center;
  }
  .center-read span {
    font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-stretch: condensed;
    font-size: 22px; font-weight: 800; letter-spacing: .06em;
    color: #35F09A; text-shadow: 0 0 18px rgba(53,240,154,.5);
  }
  .center-read span.down { color: #FF5A75; text-shadow: 0 0 18px rgba(255,90,117,.5); }
  .center-read span.flat { color: #FFD166; text-shadow: 0 0 18px rgba(255,209,102,.45); }
  .radar-info {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px;
  }
  .ri-top { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
  .ri-top b { font-size: 16px; letter-spacing: .1em; color: #fff; }
  .ri-top span { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
  
  .ri-tfs { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
  .ri-tf {
    flex: 1 1 0; min-width: 0; text-align: center;
    border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 2px;
    display: flex; flex-direction: column; gap: 2px;
    background: none; cursor: pointer; font-family: inherit; color: inherit;
    transition: border-color .15s, background .15s;
  }
  .ri-tf:hover { border-color: rgba(53,240,154,.35); }
  .ri-tf.on { border-color: rgba(53,240,154,.45); background: rgba(53,240,154,.07); }
  .ri-tf i { font-style: normal; font-size: 8.5px; letter-spacing: .18em; color: var(--dim); }
  .ri-tf b { font-size: 12px; white-space: nowrap; }
  .ri-vol { display: flex; align-items: center; justify-content: center; gap: 9px; }
  .ri-vol i { font-style: normal; font-size: 8.5px; letter-spacing: .18em; color: var(--dim); }
  .ri-vol b { font-size: 10px; letter-spacing: .08em; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .ri-vol-bar { display: flex; gap: 3px; }
  .ri-vol-bar u { width: 26px; height: 6px; border-radius: 3px; background: var(--line-soft); text-decoration: none; transition: background .3s; }
  .ri-vol-bar u.lit-lo { background: #35F09A; box-shadow: 0 0 8px rgba(53,240,154,.4); }
  .ri-vol-bar u.lit-md { background: #FFD166; box-shadow: 0 0 8px rgba(255,209,102,.4); }
  .ri-vol-bar u.lit-hi { background: #FF5A75; box-shadow: 0 0 8px rgba(255,90,117,.4); }
  .ri-next { text-align: center; font-size: 8.5px; letter-spacing: .16em; color: var(--dim); line-height: 1.6; }
  .ri-next.ok { color: rgba(53,240,154,.75); }
  .ri-next.warm { color: #FFD166; }
  .ri-next.hot { color: #FF5A75; }
  
  #riNext { font-size: 10px; letter-spacing: .14em; }
  .ri-next b { font-weight: 700; color: var(--text); }
  .ri-next.warm b, .ri-next.hot b { color: inherit; }
  .ri-up { color: #35F09A; }
 .ri-dn { color: #FF5A75; }
 .ri-fl { color: #FFD166; }
 .ri-na { color: var(--dim); }
  .ri-status { text-align: center; font-size: 9px; letter-spacing: .16em; line-height: 1.6; }
  .ri-status.open { color: #35F09A; }
  .ri-status.closed { color: #FFD166; }
  
  
  .radar-risk {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 10px; padding: 12px 14px; margin-top: 14px;
  }
  .mk-label { margin-top: 2px; text-align: center; font-size: 8.5px; letter-spacing: .2em; color: var(--dim); }
  .mk-label b { color: #35F09A; font-weight: 700; }
  
  .mk-chips {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
    margin-top: 8px; margin-bottom: 14px;
  }
  
  .mk-chip { justify-content: center; gap: 5px; }
  
  .mk-chip {
    display: inline-flex; gap: 7px; align-items: baseline;
    border: 1px solid var(--line); background: var(--card); border-radius: 6px;
    padding: 7px 4px; font-size: 11px; letter-spacing: .06em; color: var(--text-2);
    font-family: inherit; cursor: pointer;
    transition: opacity .2s, border-color .15s;
  }
  .mk-chip { opacity: .82; }
  .mk-chip:hover { border-color: rgba(53,240,154,.45); opacity: 1; }
  .mk-chip.on {
    opacity: 1; color: var(--text);
    border-color: #35F09A; background: rgba(53,240,154,.08);
    box-shadow: 0 0 14px rgba(53,240,154,.15);
  }
  .mk-chip b { font-size: 13px; }
  .mk-chip .up2 { color: #35F09A; }
  .mk-chip .dn2 { color: #FF5A75; }
  .mk-chip .fl2 { color: #FFD166; }
  .scope-readout {
    margin-top: 12px; text-align: center;
    font-size: 10px; letter-spacing: .18em; color: var(--up);
    min-height: 15px; transition: opacity .3s;
  }
  .scope-readout::before { content: '● '; animation: pulse 2s infinite; }
  .scope-legend { margin-top: 8px; text-align: center; font-size: 8px; letter-spacing: .12em; color: var(--dim); line-height: 1.7; }


  .feed { display: flex; flex-direction: column; gap: 10px; }
  .feed-item {
    display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line-soft); border-radius: 8px;
    padding: 14px 18px;
    transition: border-color .2s, transform .2s;
  }
  .feed-item:hover { border-color: var(--line); transform: translateX(6px); }
  .feed-item .t { font-size: 11px; color: var(--dim); flex-shrink: 0; white-space: nowrap; }
  .feed-item .k {
    font-size: 9.5px; letter-spacing: .14em; font-weight: 700; flex-shrink: 0;
    padding: 3px 9px; border-radius: 3px;
  }
  .k-makro { color: var(--down); background: rgba(255,90,90,.1); }
  .k-guld  { color: var(--gold); background: var(--gold-soft); }
  .k-tech  { color: var(--blue); background: var(--blue-soft); }
  .k-energi{ color: var(--up); background: rgba(59,221,139,.1); }
  .feed-item .txt { font-size: 13.5px; color: var(--text-2); flex: 1 1 100%; order: 3; }
  .feed-item .txt b { color: var(--text); font-weight: 600; }
  a.feed-item { text-decoration: none; color: inherit; }
  .feed-item .src { margin-left: auto; flex-shrink: 0; font-size: 8.5px; letter-spacing: .12em; color: var(--dim); align-self: baseline; }
  .k-mkt { color: var(--gold); background: var(--gold-soft); }
  .feed-wait { color: var(--dim); font-size: 11px; letter-spacing: .14em; justify-content: center; }
  .feed-head { font-size: 11.5px; letter-spacing: .18em; color: var(--gold); margin: 0; }
  .feed-sub { font-size: 9.5px; letter-spacing: .12em; color: var(--dim); line-height: 1.7; margin: -4px 0 4px; }
  .feed-col { display: flex; flex-direction: column; min-width: 0; }

.feed-col > .ingar { grid-template-columns: repeat(2, 1fr); margin: 14px 0 0; }
.feed-col > .ingar li:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  
  .feed-col > .ingar { grid-template-columns: 1fr; }
}



  
  
  @media (max-width: 640px) {
    .scope-legend { font-size: 9px; }
    .feed-item { padding: 12px 14px; }
  }
