/* ==================== CSS-ЗМІННІ (кольорова палітра) ==================== */
  :root{
    --bg: #07090e;
    --card: #0c0f19;
    --card-soft: #11162a;
    --line: rgba(255,255,255,0.06);
    --line-strong: rgba(255,255,255,0.1);
    --text: #e7eaf3;
    --text-dim: #8b91a6;
    --text-dimmer: #5b6175;
    --green: #00e5a0;
    --green-soft: rgba(0,229,160,0.12);
    --green-line: rgba(0,229,160,0.25);
    --red: #ff4d6a;
    --red-soft: rgba(255,77,106,0.12);
    --red-line: rgba(255,77,106,0.25);
    --amber: #f5a623;
    --amber-soft: rgba(245,166,35,0.12);
    --amber-line: rgba(245,166,35,0.25);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{background:var(--bg);color:var(--text);font-family:'Space Mono',monospace;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  body{
    background:
      radial-gradient(1100px 600px at 80% -10%, rgba(0,229,160,0.08), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(245,166,35,0.06), transparent 60%),
      var(--bg);
    min-height:100vh;
    padding: 28px 24px 60px;
  }
  .container{max-width:1320px;margin:0 auto;}
  a{color:#00e5a0;}

  /* ==================== УТИЛІТИ ==================== */
  /* Small utility classes replacing repeated inline styles. */
  .ml-auto{margin-left:auto;}
  .mt-14{margin-top:14px;}
  h1,h2,h3,h4{font-family:'Syne',sans-serif;font-weight:700;letter-spacing:-0.01em;}

  /* ============== HEADER ============== */
  .header{
    display:flex;align-items:center;gap:18px;
    padding-bottom:22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
    flex-wrap:wrap;
  }
  .logo{
    width:136px;                /* 120px картинка + 8px padding з боків */
    box-sizing:border-box;
    flex-shrink:0;
    border-radius:14px; padding: 8px;
    border:1.5px solid var(--green);
    display:flex;align-items:center;justify-content:center;
    font-family:'Syne',sans-serif;font-size:32px;font-weight:800;color:var(--green);
    background: linear-gradient(135deg, rgba(0,229,160,0.08), rgba(0,229,160,0.02));
    box-shadow: 0 0 28px rgba(0,229,160,0.15);
  }
  /* Картинка масштабується під контейнер — інакше hardcoded width="120"
     розпирає .logo на вузьких екранах і накриває заголовок. */
  .logo img{display:block;width:100%;height:auto;}

  .header-info{flex:1;min-width:280px;}
  .header h1{
    font-family:'Syne',sans-serif;font-size:30px;font-weight:800;letter-spacing:0.01em;
    color:#fff; line-height:1.1;
  }
  .header h1 .accent{color:var(--green);}
  .header-meta{
    font-size:13px;color:var(--text-dim);margin-top:6px;
    display:flex;gap:14px;flex-wrap:wrap;
  }
  .header-meta b{color:var(--text);font-weight:700;}
  .header-tags{display:flex;gap:10px;flex-wrap:wrap;}
  .tag{
    font-family:'Space Mono',monospace;font-size:11px;
    padding:6px 11px;border-radius:6px;
    border:1px solid var(--line-strong);
    background:var(--card);
    color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase;
  }
  .tag.green{color:var(--green);border-color:var(--green-line);background:var(--green-soft);}
  .tag.amber{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft);}
  .tag.red{color:var(--red);border-color:var(--red-line);background:var(--red-soft);}
  .tag{display:inline-flex;align-items:center;gap:7px;justify-content:center;}

  /* Спільні псевдоелементи ::before для іконок (Font Awesome) */
  .tag::before,
  .formula-bar .lab:first-child::before,
  .hero-label::before,
  .hero-card .lab::before,
  .ring-info .lab::before,
  .avg-block .lab::before,
  .metric .lab::before,
  .roi-card .lab::before,
  .section-head::before,
  .chips-block .head::before,
  .footer .formula::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    line-height:1;
    letter-spacing:0;
  }
  /* Icon mapping depends on fixed tag order in header. */
  .tag:nth-child(1)::before{content:"\f0cb";}
  .tag:nth-child(2)::before{content:"\f058";}
  .tag:nth-child(3)::before{content:"\f017";}
  .tag:nth-child(4)::before{content:"\f05e";}


  /* ============== FORMULA BAR ============== */
  .formula-bar{
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:11px 16px;font-size:12px;color:var(--text-dim);
    margin-bottom:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .formula-bar code{
    background:rgba(255,255,255,0.04);padding:2px 8px;border-radius:5px;
    color:var(--green);font-size:12px;
  }
  .formula-bar .lab{color:var(--text-dimmer);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;}
  .formula-bar .lab:first-child{display:inline-flex;align-items:center;gap:7px;}
  .formula-bar .lab:first-child::before{content:"\f1ec";color:var(--green);font-size:11px;}


  /* ============== HERO ============== */
  .hero{
    background:linear-gradient(180deg, rgba(0,229,160,0.06), transparent 70%), var(--card);
    border:1px solid var(--green-line);
    border-radius:18px;
    padding:32px 32px 28px;
    margin-bottom: 22px;
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:32px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;top:0;right:0;width:280px;height:280px;
    background:radial-gradient(circle, rgba(0,229,160,0.18), transparent 70%);
    pointer-events:none;
  }
  .hero-left{position:relative;z-index:1;}
  .hero-label{
    color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.12em;
    margin-bottom:4px;
  }
  .hero-label{display:inline-flex;align-items:center;gap:8px;}
  .hero-label::before{content:"\f201";color:var(--green);font-size:12px;text-shadow:none;}
  .hero-pnl{
    font-family:'Syne',sans-serif;font-weight:800;font-size:78px;line-height:1;
    color:var(--green); letter-spacing:-0.03em;
    white-space:nowrap;         /* «+1799.47 $» не має ламатись на два рядки */
    margin:6px 0 14px;
    text-shadow: 0 0 40px rgba(0,229,160,0.3);
  }
  /* Відсоток від симульованого депозиту — під головною цифрою P&L */
  .hero-depo{
    font-family:'Syne',sans-serif;font-weight:700;font-size:20px;
    color:var(--green);letter-spacing:-0.01em;
    margin:-6px 0 14px;
  }
  .hero-depo.neg{color:var(--red);}
  .hero-depo small{
    font-family:'Space Mono',monospace;font-weight:400;font-size:11.5px;
    color:var(--text-dim);letter-spacing:0;margin-left:7px;
  }
  .hero-sub{font-size:13px;color:var(--text-dim);}
  .hero-sub b{color:var(--text);}
  .hero-right{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1;
  }
  .hero-card{
    background:rgba(255,255,255,0.02);border:1px solid var(--line);
    border-radius:12px;padding:14px 16px;
  }
  .hero-card .lab{font-size:10.5px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
  .hero-card .lab{display:inline-flex;align-items:center;gap:7px;}
  /* Each card icon is assigned by visual position (1..4). */
  .hero-card:nth-child(1) .lab::before{content:"\f058";color:var(--green);}
  .hero-card:nth-child(2) .lab::before{content:"\f017";color:var(--amber);}
  .hero-card:nth-child(3) .lab::before{content:"\f521";color:var(--green);}
  .hero-card:nth-child(4) .lab::before{content:"\f071";color:var(--red);}

  .hero-card .val{font-family:'Syne',sans-serif;font-weight:700;font-size:22px;}
  .hero-card .small{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
  .pos{color:var(--green);}
  .neg{color:var(--red);}
  .neutral{color:var(--amber);}

  /* ============== WIN RATE PANEL ============== */
  .winrate-panel{
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:24px;margin-bottom:22px;
    display:grid;grid-template-columns: 1fr 1fr 1fr;gap:24px;align-items:center;
  }
  .ring-item{display:flex;align-items:center;gap:18px;}
  .ring{
    width:108px;height:108px;position:relative;flex-shrink:0;
  }
  .ring svg{transform:rotate(-90deg);}
  .ring-bg{stroke:rgba(255,255,255,0.05);}
  .ring-fg{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset 0.6s;}
  .ring-fg.amber{stroke:var(--amber);}
  .ring-center{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .ring-pct{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:#fff;}
  .ring-tag{font-size:10px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:1px;}
  .ring-info .lab{font-size:11px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;}
  .ring-info .ttl{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:#fff;margin:3px 0 4px;}
  .ring-info .desc{font-size:12px;color:var(--text-dim);}

  .avg-block{text-align:center;border-left:1px solid var(--line);padding-left:24px;}
  .avg-block .lab{font-size:11px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;}
  .ring-info .lab,.avg-block .lab{display:inline-flex;align-items:center;gap:7px;}
  .ring-item:nth-child(1) .ring-info .lab::before{content:"\f140";color:var(--green);}
  .ring-item:nth-child(2) .ring-info .lab::before{content:"\f080";color:var(--amber);}
  .avg-block .lab::before{content:"\f155";color:var(--green);}

  .avg-block .val{font-family:'Syne',sans-serif;font-weight:800;font-size:34px;color:var(--green);margin:6px 0 4px;}
  .avg-block .desc{font-size:12px;color:var(--text-dim);}

  /* ============== METRIC GRID ============== */
  .metric-grid{
    display:grid;
    /* auto-fit прибирає порожні треки, тож картки ділять ширину порівну
       незалежно від кількості: 5 у місячному звіті, 4 у зведеному. */
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:14px;margin-bottom:22px;
  }
  .metric{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:16px 18px; position:relative; overflow:hidden;
  }
  .metric .lab{font-size:10.5px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
  .metric .lab{display:inline-flex;align-items:center;gap:7px;}
  /* Metric icons are position-based to avoid extra markup classes. */
  .metric:nth-child(1) .lab::before{content:"\f058";color:var(--green);}
  .metric:nth-child(2) .lab::before{content:"\f017";color:var(--amber);}
  .metric:nth-child(3) .lab::before{content:"\f201";color:var(--green);}
  .metric:nth-child(4) .lab::before{content:"\f521";color:var(--green);}
  .metric:nth-child(5) .lab::before{content:"\f071";color:var(--red);}

  .metric .val{font-family:'Syne',sans-serif;font-weight:700;font-size:22px;}
  .metric .small{font-size:11px;color:var(--text-dim);margin-top:2px;}
  .metric.green-accent{border-color:var(--green-line);}
  .metric.green-accent .val{color:var(--green);}
  .metric.amber-accent{border-color:var(--amber-line);}
  .metric.amber-accent .val{color:var(--amber);}
  .metric.red-accent{border-color:var(--red-line);}
  .metric.red-accent .val{color:var(--red);}
  .metric.amber-border{border-color:var(--amber-line);}
  .metric .val.amber{color:var(--amber);}

  /* ============== ROI ============== */
  .roi-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px;
  }
  .roi-card{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:18px 20px; display:flex;align-items:center;justify-content:space-between;gap:14px;
  }
  .roi-card .left{flex:1;}
  .roi-card .lab{font-size:11px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;}
  .roi-card .lab{display:inline-flex;align-items:center;gap:7px;}
  .roi-card:nth-child(1) .lab::before{content:"\f4c0";color:var(--green);}
  .roi-card:nth-child(2) .lab::before{content:"\f201";color:var(--green);}
  .roi-card:nth-child(3) .lab::before{content:"\f521";color:var(--green);}

  .roi-card .desc{font-size:11px;color:var(--text-dimmer);margin-top:4px;}
  .roi-card .val{
    font-family:'Syne',sans-serif;font-weight:800;font-size:30px;color:var(--green);
    line-height:1;
  }

  /* ============== SECTIONS / TABLES ============== */
  .section{margin-bottom:28px;}
  .section-head{
    display:flex;align-items:center;gap:14px;margin-bottom:12px;
  }
  .section-head::before{
    width:28px;height:28px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;
    background:var(--card);border:1px solid var(--line);
    color:var(--text-dim);font-size:12px;
  }
  .section-head.green::before{content:"\f058";color:var(--green);border-color:var(--green-line);background:var(--green-soft);}
  .section-head.red::before{content:"\f071";color:var(--red);border-color:var(--red-line);background:var(--red-soft);}
  .section-head.amber::before{content:"\f017";color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft);}
  .section-head:not(.green):not(.red):not(.amber)::before{content:"\f05e";}

  .section-head h2{
    font-family:'Syne',sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase; color:var(--text);
  }
  .section-head .count{
    font-size:11px;color:var(--text-dim);
    background:var(--card);border:1px solid var(--line);
    padding:3px 9px;border-radius:5px;
  }
  .section-head .accent-line{
    flex:1;height:1px;background:var(--line);
  }
  .section-head.green h2{color:var(--green);}
  .section-head.red h2{color:var(--red);}
  .section-head.amber h2{color:var(--amber);}

  table.tbl{
    width:100%;border-collapse:separate;border-spacing:0;
    background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  }
  .tbl th{
    background:rgba(255,255,255,0.02);
    text-align:left;padding:11px 14px;
    font-family:'Space Mono',monospace;font-weight:700;
    font-size:10.5px;color:var(--text-dim);
    letter-spacing:.12em;text-transform:uppercase;
    border-bottom:1px solid var(--line);
  }
  .tbl td{
    padding:13px 14px;border-bottom:1px solid var(--line);
    font-size:13px;
  }
  .tbl tr:last-child td{border-bottom:none;}
  .tbl tr:hover td{background:rgba(255,255,255,0.015);}
  .asset{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.02em;}
  .type-badge{
    display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
    padding:2px 7px;border-radius:4px;letter-spacing:.08em;
  }
  /* Бейдж LONG — зелений, зі стрілкою вгору */
  .type-badge.LONG{color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);}
  .type-badge.LONG::before{
    content:"\f201";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:9px;
    line-height:1;
  }
  /* Бейдж SHORT — червоний, зі стрілкою вниз */
  .type-badge.SHORT{color:var(--red);background:var(--red-soft);border:1px solid var(--red-line);}
  .type-badge.SHORT::before{
    content:"\e097";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:9px;
    line-height:1;
  }
  /* Бейдж SPOT — жовтий (спотова угода без плеча) */
  .type-badge.SPOT{color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-line);}
  .type-badge.SPOT::before{
    content:"\f0f2";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:9px;
    line-height:1;
  }

  /* ==================== ТЕЙКИ (dots) ==================== */
  /* Кольорові крапки прогресу тейків у таблицях */
  .takes-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
  .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
  .dot-hit{background:var(--green);box-shadow:0 0 8px rgba(0,229,160,0.5);}
  .dot-next{background:var(--amber);box-shadow:0 0 8px rgba(245,166,35,0.5);}
  .dot-future{background:rgba(255,255,255,0.12);}
  .dot-stop{background:var(--red);box-shadow:0 0 8px rgba(255,77,106,0.5);margin-left:6px;}
  .takes-count{font-size:11px;color:var(--text-dim);margin-left:5px;}

  /* ==================== P&L ПРОГРЕС-БАР ==================== */
  .pnl-bar-cell{position:relative;min-width:140px;}
  .pnl-bar{position:relative;height:7px;background:rgba(255,255,255,0.04);border-radius:4px;overflow:hidden;}
  .pnl-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;}
  .pnl-bar-fill.green{background:linear-gradient(90deg, var(--green-soft), var(--green));}
  .pnl-bar-fill.red{background:linear-gradient(90deg, var(--red-soft), var(--red));}
  .pnl-bar-fill.amber{background:linear-gradient(90deg, var(--amber-soft), var(--amber));}

  .pnl-val{font-family:'Space Mono',monospace;font-weight:700;font-size:13.5px;}
  .pnl-pct{font-size:11px;color:var(--text-dim);margin-top:2px;}

  /* ============== CHIPS (скасовані/очікуючі угоди) ============== */
  .chips-block{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:18px 20px;
  }
  .chips-block .head{
    font-size:10.5px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;
    margin-bottom:10px;
  }
  .chips-block .head{display:flex;align-items:center;gap:7px;}
  .chips-block .head::before{content:"\f05e";color:var(--red);}
  .chips-block .chips + .head::before{content:"\f017";color:var(--amber);}

  .chips{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    padding:6px 11px;border-radius:6px;
    background:var(--card-soft);border:1px solid var(--line-strong);
    font-size:11.5px;color:var(--text-dim);
    display:inline-flex;align-items:center;gap:7px;
  }
  .chip .name{font-family:'Space Mono',monospace;font-weight:700;color:var(--text);font-size:12px;}
  .chip.cancelled{border-color:var(--red-line);background:var(--red-soft);}
  .chip.cancelled .name{color:var(--red);}
  .chip.waiting{border-color:var(--amber-line);background:var(--amber-soft);}
  .chip.waiting .name{color:var(--amber);}

  /* ============== VIP CTA ============== */
  .vip-card{
    background:
      radial-gradient(500px 240px at 50% 0%, rgba(0,229,160,0.12), transparent 70%),
      linear-gradient(135deg, rgba(17,22,42,0.96), rgba(7,9,14,0.98));
    border:1px solid var(--green-line);
    border-radius:16px;
    padding:42px 38px;
    margin:32px 0 28px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .vip-card::before{
    content:"\f3ed";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    right:28px;
    top:22px;
    color:rgba(0,229,160,0.08);
    font-size:92px;
    line-height:1;
    pointer-events:none;
  }
  .vip-card h2{
    font-size:34px;
    font-weight:800;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:26px;
    position:relative;
    z-index:1;
  }
  .vip-card h2::before{
    content:"\f521";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--green);
    font-size:24px;
    margin-right:12px;
  }
  .vip-features{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    max-width:860px;
    margin:0 auto 30px;
    text-align:left;
    position:relative;
    z-index:1;
  }
  .vip-feature{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(255,255,255,0.025);
    color:var(--text-dim);
    font-size:12px;
  }
  .vip-feature i{
    color:var(--green);
    width:18px;
    text-align:center;
    font-size:15px;
    flex:0 0 auto;
  }
  .vip-actions{
    display:flex;
    flex-direction:column;      /* кнопка зверху, ціна під нею — як на головній */
    justify-content:center;
    align-items:center;
    gap:18px;
    position:relative;
    z-index:1;
  }
  .vip-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:14px 26px;
    border-radius:8px;
    background:var(--green);
    color:var(--bg);
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    box-shadow:0 0 28px rgba(0,229,160,0.2);
  }
  .vip-btn:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(0,229,160,0.32);}
  .vip-price{
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:26px;
    color:var(--green);
  }
  .vip-price small{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-dim);font-weight:400;}
  .vip-question{
    margin-top:20px;
    font-size:12px;
    color:var(--text-dim);
    position:relative;
    z-index:1;
  }
  .vip-question a{color:var(--amber);text-decoration:none;}
  .vip-question a:hover{text-decoration:underline;}

  /* ============== FOOTER ============== */
  .footer{
    margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    font-size:11.5px;color:var(--text-dimmer);
  }
  .footer .formula code{background:rgba(255,255,255,0.04);padding:2px 7px;border-radius:4px;color:var(--green);}
  .footer .formula{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .footer .formula::before{content:"\f1ec";color:var(--green);font-size:11px;}


  /* ==================== RESPONSIVE ==================== */
  @media (max-width:1100px){
    body{padding:24px 18px 48px;}
    .hero{grid-template-columns:1fr;}
    .metric-grid{grid-template-columns:repeat(3,1fr);}
    .roi-grid{grid-template-columns:1fr;}
    .winrate-panel{grid-template-columns:1fr;}
    .avg-block{border-left:none;border-top:1px solid var(--line);padding:18px 0 0;}
    .hero-pnl{font-size:60px;}
  }

  @media (max-width:820px){
    body{padding:20px 14px 42px;}
    .container{max-width:100%;}
    .header{align-items:flex-start;gap:14px;margin-bottom:20px;padding-bottom:18px;}
    .logo{width:52px;height:52px;border-radius:12px;font-size:27px;}
    .header-info{min-width:0;flex:1 1 calc(100% - 66px);}
    .header h1{font-size:24px;}
    .header-meta{gap:8px 10px;font-size:12px;}
    .header-meta span:nth-child(even){display:none;}
    .header-tags{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
    .tag{text-align:center;padding:7px 8px;font-size:10px;}

    .formula-bar{align-items:flex-start;padding:12px;gap:8px;font-size:11.5px;}
    .formula-bar code{max-width:100%;overflow-wrap:anywhere;font-size:11px;}
    .formula-bar .lab{width:100%;}
    .formula-bar .lab[style]{margin-left:0!important;}

    .hero{padding:24px 18px 20px;border-radius:16px;gap:22px;}
    .hero::before{width:220px;height:220px;}
    .hero-pnl{font-size:clamp(38px, 10vw, 54px);letter-spacing:-0.02em;}
    .hero-sub{font-size:12px;}
    .hero-right{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .hero-card{padding:12px;}
    .hero-card .val{font-size:18px;overflow-wrap:anywhere;}

    .winrate-panel{padding:18px;gap:18px;border-radius:14px;}
    .ring-item{align-items:flex-start;gap:14px;}
    .ring{width:92px;height:92px;}
    .ring svg{width:92px;height:92px;}
    .ring-pct{font-size:21px;}

    .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .metric{padding:14px;}
    .metric .val{font-size:19px;overflow-wrap:anywhere;}
    .roi-card{padding:16px;align-items:flex-start;}
    .roi-card .val{font-size:25px;white-space:nowrap;}

    .section{margin-bottom:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .section-head{min-width:max-content;padding-right:12px;}
    table.tbl{min-width:760px;}
    /* Keeps horizontal scroll width stable for wide tables on mobile. */
    .section:has(table.tbl)::after{
      content:"";
      display:block;
      height:1px;
      min-width:760px;
    }
    .tbl th,.tbl td{padding:11px 12px;font-size:12px;}
    .asset{font-size:13px;}
    .pnl-bar-cell{min-width:120px;}

    .chips-block{padding:16px;}
    .chip{font-size:11px;}
    .vip-card{padding:34px 22px;}
    .vip-card h2{font-size:26px;}
    .vip-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .footer{align-items:flex-start;flex-direction:column;}
  }

  @media (max-width:520px){
    body{padding:16px 10px 36px;}
    .header{display:grid;grid-template-columns:46px 1fr;}
    .logo{width:46px;height:46px;font-size:24px;}
    .header-info{grid-column:2;min-width:0;}
    .header h1{font-size:21px;}
    .header-meta{font-size:11.5px;line-height:1.45;}
    .header-tags{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));}

    .formula-bar{border-radius:8px;}
    .hero{padding:20px 14px 16px;margin-bottom:16px;}
    .hero-label{font-size:10.5px;}
    .hero-pnl{font-size:clamp(28px, 10.5vw, 44px);margin:6px 0 10px;}
    /* Підпис з окремого рядка — інакше «тепер $2,799» відривається. */
    .hero-depo{font-size:18px;margin:-2px 0 12px;}
    .hero-depo small{display:block;margin:3px 0 0;}
    /* display:grid перетворював кожен текстовий вузол (і роздільники «·»)
       на окремий рядок. Звичайний потік переносить рядок природно. */
    .hero-sub{line-height:1.7;}
    .hero-right{grid-template-columns:1fr;}

    .winrate-panel{padding:14px;margin-bottom:16px;}
    .ring-item{display:grid;grid-template-columns:80px 1fr;gap:12px;}
    .ring{width:80px;height:80px;}
    .ring svg{width:80px;height:80px;}
    .ring-pct{font-size:18px;}
    .ring-tag{font-size:9px;}
    .ring-info .ttl{font-size:15px;}
    .avg-block .val{font-size:28px;}

    .metric-grid{grid-template-columns:1fr;margin-bottom:16px;}
    .roi-grid{gap:10px;margin-bottom:24px;}
    .roi-card{display:grid;grid-template-columns:1fr auto;gap:10px;}
    .roi-card .desc{font-size:10.5px;}

    .section-head{gap:10px;}
    .section-head h2{font-size:12px;letter-spacing:.12em;}
    table.tbl{min-width:700px;}
    .section:has(table.tbl)::after{min-width:700px;}
    .tbl th,.tbl td{padding:10px;font-size:11.5px;}
    .takes-row{gap:4px;}
    .dot{width:8px;height:8px;}
    .pnl-val{font-size:12.5px;}

    .chips{display:grid;grid-template-columns:1fr;gap:7px;}
    .chip{justify-content:space-between;width:100%;}
    .vip-card{padding:28px 14px;margin:24px 0 22px;}
    .vip-card::before{right:8px;top:10px;font-size:72px;}
    .vip-card h2{font-size:21px;line-height:1.18;}
    .vip-card h2::before{display:block;margin:0 0 10px;font-size:22px;}
    .vip-features{grid-template-columns:1fr;}
    .vip-feature{min-height:44px;font-size:11.5px;}
    .vip-actions{display:grid;grid-template-columns:1fr;gap:12px;}
    .vip-btn{width:100%;padding:13px 16px;}
    .vip-price{font-size:24px;}
    .footer{font-size:11px;}
    .footer .formula{overflow-wrap:anywhere;}
  }

/* ==================================================================== */
/* SUMMARY-ONLY — правила, що використовує лише зведений дашборд:        */
/* SVG-графіки, панель LONG/SHORT, теги місяців                          */
/* ==================================================================== */

.chart-block {
    background:#0c0f19;
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    padding:22px 24px;
    margin-bottom:22px
}

.chart-block .head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:10px
}

.chart-block .head h3 {
    font-size:18px;
    color:#fff
}

.chart-block .head .desc {
    font-size:11.5px;
    color:#8b91a6;
    text-align:right
}

.chart-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:22px
}

.month-tag {
    display:inline-block;
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:4px;
    background:#11162a;
    border:1px solid rgba(255,255,255,.1);
    color:#8b91a6
}

.ls-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:22px
}

.ls-card {
    background:#0c0f19;
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:22px 24px
}

.ls-card.long-card {
    border-color:rgba(0,229,160,.25);
    background:linear-gradient(135deg,rgba(0,229,160,.05),transparent 60%),#0c0f19
}

.ls-card.short-card {
    border-color:rgba(255,77,106,.25);
    background:linear-gradient(135deg,rgba(255,77,106,.05),transparent 60%),#0c0f19
}

.ls-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px
}

.ls-head .ttl {
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:22px
}

.ls-head .ttl.long {
    color:#00e5a0
}

.ls-head .ttl.short {
    color:#ff4d6a
}

.ls-head .pnl {
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:30px
}

.ls-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}

.ls-grid .item .lab {
    font-size:10px;
    color:#8b91a6;
    letter-spacing:.1em;
    text-transform:uppercase
}

.ls-grid .item .val {
    font-weight:700;
    font-size:16px;
    color:#e7eaf3;
    margin-top:4px
}

.footer code {
    background:rgba(255,255,255,.04);
    padding:2px 7px;
    border-radius:4px;
    color:#00e5a0
}

@media(max-width:1100px) {
    /* Тільки те, чого немає в основних брейкпоінтах вище:
       двоколонкові блоки, що існують лише у зведеному звіті. */
    .chart-grid {
        grid-template-columns:1fr
    }

    .ls-panel {
        grid-template-columns:1fr
    }
}