:root {
      --bg:#0b0f14;
      --panel:#141922;
      --line:#3a2a1d;
      --line-strong:#6b3f1d;
      --text:#f8fafc;
      --muted:#cbd5e1;
      --primary:#f59e0b;
      --primary-hover:#d97706;
      --ok:#22c55e;
      --bad:#ef4444;
    }
    * { box-sizing:border-box; }
    html, body { width:100%; overflow-x:hidden; }
    body {
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--text);
      background:
        radial-gradient(980px 480px at 14% -12%, rgba(245,158,11,.17), transparent 58%),
        linear-gradient(180deg, rgba(11,15,20,.88), rgba(17,23,35,.86)),
        url('/assets/bg-awp-dragon-lore.jpg') center/cover fixed no-repeat;
    }
    .wrap { max-width:1120px; margin:0 auto; padding:16px; width:100%; min-width:0; }
    .toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .toolbar.topbar {
      border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, rgba(42,27,15,.42), rgba(20,25,34,.92));
      border-radius: 14px;
      padding: 10px;
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }
    button, select {
      border:1px solid var(--line);
      background:#141922;
      color:var(--text);
      border-radius:10px;
      padding:8px 12px;
      transition: transform .12s ease, filter .15s ease, border-color .15s ease;
    }
    button:hover { filter: brightness(1.03); }
    button:active { transform: translateY(1px); }
    button:focus-visible, select:focus-visible { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(245,158,11,.2); }
    .nav-btn { background:#141922; border:1px solid var(--line); color:var(--text); font-weight:600; }
    .nav-btn.active { background: linear-gradient(180deg,var(--primary),var(--primary-hover)); color:#2d1b08; border-color: transparent; }
    .card {
      border:1px solid var(--line);
      background:linear-gradient(180deg, #141922, #101620);
      border-radius:14px;
      padding:14px;
    }
    .etf-hero {
      border:1px solid rgba(255,255,255,.1);
      background: linear-gradient(180deg, rgba(13,17,23,.96), rgba(18,24,34,.94));
      border-radius:16px;
      padding:16px;
      box-shadow: 0 20px 40px rgba(0,0,0,.35);
      position: relative;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .etf-hero::after {
      content:"";
      position:absolute;
      inset:auto -20% -55% -20%;
      height:60%;
      background: radial-gradient(circle at center, rgba(0,229,255,.18), transparent 62%);
      pointer-events:none;
    }
    .etf-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; position: relative; z-index: 1; }
    .etf-title { color:#9fb4cc; font-size:11px; letter-spacing:.22em; font-weight:700; text-transform:uppercase; margin:0; }
    .etf-price { font-size: clamp(38px, 7vw, 66px); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin-top:6px; color:#f8fafc; }
    .etf-badges { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
    .etf-pill { font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px solid transparent; backdrop-filter: blur(4px); }
    .etf-pill.up { color:#4dffbe; background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); }
    .etf-pill.down { color:#ff7f9f; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); }
    .etf-pill.neutral { color:#cbd5e1; background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.35); }
    .etf-live { display:flex; align-items:center; gap:7px; color:#86efac; font-size:12px; font-weight:600; }
    .live-dot { width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.8); animation:pulse-live 1.8s infinite; }
    @keyframes pulse-live { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.65);} 75%{ box-shadow:0 0 0 11px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
    .etf-chart-wrap { position:relative; border:1px solid rgba(255,255,255,.08); background: rgba(6,14,24,.7); border-radius:14px; padding:8px 10px 12px; z-index: 1; }
    #chart { width:100%; height:360px; border-radius:10px; background: transparent; }
    .etf-foot { margin-top:8px; color:#93a6bf; font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; position: relative; z-index: 1; }
    .etf-components { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; margin-top:10px; position: relative; z-index: 1; }
    .etf-chip { border:1px solid rgba(255,255,255,.09); background: rgba(18,28,41,.72); border-radius:10px; padding:8px; min-width:0; }
    .etf-chip-top { display:flex; align-items:center; gap:8px; }
    .etf-chip img { width:24px; height:24px; border-radius:6px; object-fit:cover; border:1px solid rgba(255,255,255,.14); }
    .etf-chip-name { font-size:11px; color:#dbe7f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .etf-chip-change { margin-top:5px; font-size:12px; font-weight:700; }
    .etf-chip-change.up { color:#4dffbe; }
    .etf-chip-change.down { color:#ff7f9f; }
    .etf-chip-change.neutral { color:#cbd5e1; }
    #status { color:#93a6bf; margin-top:8px; }
    .case-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:12px; margin-top:12px; }
    .case-box { border:1px solid var(--line); border-radius:10px; padding:10px; background:#0f141d; }
    .case-items { max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; background:#0f141d; }
    .r-title { margin:8px 0 4px; color:var(--muted); font-size:12px; text-transform:uppercase; }
    .skin-row { display:flex; justify-content:space-between; gap:8px; padding:6px; border-bottom:1px dashed rgba(203,213,225,.2); cursor:pointer; }
    .skin-row:hover { background:#1a2230; }
    #rankingTable { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
    #rankingTable td, #rankingTable th { border-bottom:1px solid rgba(203,213,225,.16); padding:6px; text-align:left; }
    .ma-wrap { margin-top:14px; border:1px solid var(--line); border-radius:10px; padding:10px; background:#0f141d; }
    .ma-controls { display:grid; grid-template-columns: 1.1fr auto auto auto; gap:8px; align-items:end; }
    .ma-controls label { display:grid; gap:4px; font-size:12px; color:var(--muted); }
    #maSuggestions { font-size:12px; color:var(--muted); margin-top:4px; }
    .ma-kpis { display:grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap:8px; margin-top:10px; }
    .ma-kpi { border:1px solid var(--line); border-radius:8px; padding:8px; background:#141c29; }
    .ma-kpi .label { color:var(--muted); font-size:11px; }
    .ma-kpi .v { font-weight:700; margin-top:4px; }
    .ma-spark-wrap { margin-top:10px; border:1px solid var(--line); border-radius:8px; background:#141c29; padding:8px; }
    #maSparkline { width:100%; height:70px; }
    .spark-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
    .rsi-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid transparent; }
    .rsi-badge.overbought { background: rgba(239,68,68,.18); color:#fca5a5; border-color: rgba(239,68,68,.45); }
    .rsi-badge.neutral { background: rgba(251,191,36,.15); color:#fde68a; border-color: rgba(251,191,36,.45); }
    .rsi-badge.oversold { background: rgba(34,197,94,.18); color:#86efac; border-color: rgba(34,197,94,.45); }
    .rsi-badge.insufficient_data { background: rgba(148,163,184,.18); color:#cbd5e1; border-color: rgba(148,163,184,.4); }
    #maWearTable { width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; }
    #maWearTable th, #maWearTable td { border-bottom:1px solid rgba(203,213,225,.16); padding:6px; text-align:left; }

    @media (max-width: 900px) {
      .ma-controls { grid-template-columns: 1fr; }
      .ma-kpis { grid-template-columns: 1fr 1fr; }
      .case-grid { grid-template-columns: 1fr; }
      .etf-components { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 760px) {
      .wrap { padding:10px; }
      .toolbar { gap:8px; }
      .toolbar .nav-btn { flex: 1 1 calc(50% - 6px); min-height:40px; }
      button, select, input { font-size:16px; min-height:40px; }
      #chart { height:280px; }
      .etf-components { grid-template-columns: 1fr 1fr; }
      #rankingTable { display:block; overflow-x:auto; white-space:nowrap; }
      .ma-table-scroll { overflow-x:auto; width:100%; }
      #maWearTable { min-width: 820px; white-space:nowrap; }
    }
    @media (max-width: 520px) {
      .etf-components, .ma-kpis { grid-template-columns: 1fr; }
      #chart { height:220px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }