:root {
      --bg:        #060d12;
      --bg2:       #0a131e;
      --bg3:       #0d1823;
      --bg4:       #111e2b;
      --border:    rgba(99,115,129,0.2);
      --border2:   rgba(99,115,129,0.35);
      --text:      #e8edf2;
      --text-bold: #ffffff;
      --muted:     #8896a6;
      --muted2:    #5a6a7a;
      --green:     #22c55e;
      --green-dim: #0a2518;
      --red:       #ff5630;
      --red-dim:   #2a0f0a;
      --yellow:    #ffab00;
      --accent:    #7c3aed;
      --accent2:   #8b5cf6;
      --accent-dim:rgba(124,58,237,0.12);
      --radius:    9px;
      --radius-lg: 18px;
    }

    [data-theme="light"] {
      --bg:        #f5f6f8;
      --bg2:       #ffffff;
      --bg3:       #f8f9fa;
      --bg4:       #f0f2f5;
      --border:    rgba(100,116,139,0.15);
      --border2:   rgba(100,116,139,0.3);
      --text:      #050810;
      --text-bold: #374151;
      --muted:     #374151;
      --muted2:    #4b5563;
      --green:     #16a34a;
      --green-dim: #dcfce7;
      --red:       #dc2626;
      --red-dim:   #fee2e2;
      --yellow:    #d97706;
      --accent:    #7c3aed;
      --accent2:   #6d28d9;
      --accent-dim:rgba(124,58,237,0.1);
    }

    #theme-btn { line-height: 1; }
    [data-theme="light"] .coin-item { border-bottom-color: var(--border); }
    @keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    #refresh-icon.spinning { animation: spin360 0.5s ease; }
    [data-theme="light"] thead th { color: #374151 !important; }
    [data-theme="light"] .tc-muted { color: #0d1117; }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    /* Left sidebar */
    .left-sidebar {
      width: 315px;
      min-width: 315px;
      background: var(--bg2);
      border-right: 1px dashed var(--border);
      display: flex;
      flex-direction: column;
      height: 100%;
      z-index: 1;
      position: relative;
      flex-shrink: 0;
      transition: width 0.2s, min-width 0.2s;
    }
    .left-sidebar.collapsed {
      width: 74px;
      min-width: 74px;
    }
    .left-sidebar.collapsed .sidebar-hide { display: none; }
    .left-sidebar.collapsed .sidebar-logo { justify-content: center; gap: 0; padding: 18px 0 15px; }
    .left-sidebar > .sidebar-hide { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; }
    .sidebar-toggle {
      background: var(--bg3); border: 1px dashed var(--border);
      border-radius: 7px; cursor: pointer;
      color: var(--muted); padding: 4px;
      display: flex; align-items: center;
      transition: all 0.15s; flex-shrink: 0;
    }
    .sidebar-toggle:hover { color: var(--text); border-color: var(--border2); background: var(--bg4); }
    .sidebar-toggle-icon { font-size: 20px; }

    .left-sidebar-header {
      padding: 0 18px;height: 55px;
      border-bottom: 1px dashed var(--border);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      min-height: 0;
    }

    body::before { display: none; }

    .container {
      position: relative;
      z-index: 1;
      flex: 1;
      min-width: 0;
      padding: 22px 26px;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }

    /* Header */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      flex-shrink: 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .logo-text {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0px;
      color: var(--text);
    }

    .logo-sub { color: var(--muted); font-size: 12px; margin-top: 1px; }

    .header-right { display: flex; align-items: center; gap: 18px; }

    .status-dot {
      width: 8px; height: 8px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 7px var(--green);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .status-text { color: var(--muted); font-size: 12px; }

    .refresh-btn {
      background: var(--bg3);
      border: 1px dashed var(--border);
      color: var(--muted);
      padding: 7px 15px;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s;
    }
    .refresh-btn:hover { border-color: var(--border2); color: var(--text); background: var(--bg4); }

    /* Stats row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 9px;
      margin-bottom: 13px;
      flex-shrink: 0;
    }

    .stat-card {
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 0;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .stat-card:hover { border-color: var(--border2); }

    .stat-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
    .sa-accent  { background: var(--accent2); }
    .sa-green   { background: var(--green); }
    .sa-red     { background: var(--red); }
    .sa-yellow  { background: var(--yellow); }

    .stat-sparkline {
      position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
      opacity: 0.2; pointer-events: none;
    }
    .stat-sparkline svg { width: 100%; height: 100%; }

    .stat-inner { padding: 14px 16px 14px 26px; }

    .stat-label  { color: var(--muted); font-size: 10px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 5px; }
    .stat-value  { font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--text-bold); margin-bottom: 8px; }
    .sv-accent   { color: var(--accent2); }
    .sv-green    { color: var(--green); }
    .sv-red      { color: var(--red); }
    .sv-yellow   { color: var(--yellow); }

    .stat-footer { display: flex; align-items: center; justify-content: space-between; }
    .stat-sub    { color: var(--muted); font-size: 11px; }
    .stat-badge  { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
    .sb-green    { background: rgba(34,197,94,.12); color: var(--green); }
    .sb-red      { background: rgba(255,86,48,.12); color: var(--red); }

    /* Controls */
    .coin-rating-block {
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 15px 18px;
      margin-bottom: 13px;
      flex-shrink: 0;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .coin-rating-block:hover { border-color: var(--border2); }
    .coin-rating-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 11px;
    }
    .coin-rating-list {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .coin-rating-list::-webkit-scrollbar { height: 3px; }
    .coin-rating-list::-webkit-scrollbar-track { background: transparent; }
    .coin-rating-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .coin-rating-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 11px 15px;
      min-width: 99px;
      cursor: pointer;
      transition: border-color 0.2s, transform 0.15s;
      flex-shrink: 0;
      position: relative;
    }
    .coin-rating-item:hover { border-color: var(--accent); transform: translateY(-2px); }
    .coin-rating-item.positive { border-color: rgba(63,185,80,0.3); }
    .coin-rating-item.negative { border-color: rgba(248,81,73,0.3); }
    .coin-rating-rank { position: absolute; top: 6px; left: 8px; font-size: 10px; color: var(--muted); font-weight: 700; }
    .coin-rating-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .coin-rating-pnl { font-size: 14px; font-weight: 700; }
    .coin-rating-trades { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .coin-rating-bar { width: 100%; height: 3px; border-radius: 2px; margin-top: 7px; }

    .controls {
      display: flex;
      align-items: flex-end;
      gap: 13px;
      margin-bottom: 11px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .filter-block { display: flex; flex-direction: column; gap: 6px; }
    .filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); font-weight: 500; }

    .view-toggle {
      display: flex;
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .view-btn {
      padding: 7px 15px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all 0.15s;
    }

    .view-btn.active { background: var(--accent); color: white; }

    .filter-group { display: flex; gap: 7px; flex-wrap: wrap; }

    .filter-chip {
      padding: 8px 14px;
      border-radius: var(--radius);
      border: 1px dashed var(--border);
      background: var(--bg3);
      color: var(--muted);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.15s;
    }

    .filter-chip:hover { border-color: var(--border2); color: var(--text); }
    .filter-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent2); }

    .search-box {
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 5px 13px;
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      width: 220px;
      outline: none;
      transition: border-color 0.2s;
    }

    .filter-panel .search-box {
      padding: 8px 13px 8px 33px;
    }

    .range-input {
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 5px 11px;
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      width: 88px;
      outline: none;
      transition: border-color 0.2s;
    }
    .range-input:focus { border-color: var(--accent); }
    .range-input::placeholder { color: var(--muted); }

    .dist-row .range-input {
      padding: 8px 11px;

    }

    .date-input {
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 8px 11px;
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
      color-scheme: dark;
    }
    .date-input:focus { border-color: var(--accent); }

    .date-range-btn {
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 8px 13px;
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.2s;
      text-align: left;
    }
    .date-range-btn:hover { border-color: var(--accent); }
    .date-range-btn.active { border-color: var(--accent); color: var(--accent); }

    .date-picker-popup {
      display: none;
      position: absolute;
      top: calc(100% + 7px);
      left: 0;
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
      z-index: 200;
      box-shadow: 0 9px 35px rgba(0,0,0,0.5);
    }
    .date-picker-popup.open { display: block; }

    .cal-months { display: flex; gap: 26px; }

    .cal-month { width: 242px; }

    .cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 11px;
    }
    .cal-nav-btn {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 18px;
      padding: 2px 7px;
      border-radius: 4px;
      transition: color 0.15s;
    }
    .cal-nav-btn:hover { color: var(--text); }
    .cal-nav-btn:disabled { opacity: 0.2; cursor: default; }
    .cal-month-title { font-size: 14px; font-weight: 600; }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .cal-dow {
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      padding: 4px 0;
      text-transform: uppercase;
    }
    .cal-day {
      text-align: center;
      font-size: 13px;
      padding: 6px 0;
      border-radius: var(--radius);
      cursor: pointer;
      position: relative;
      transition: background 0.1s;
      user-select: none;
    }
    .cal-day:hover:not(.empty):not(.disabled) { background: var(--bg3); }
    .cal-day.empty { cursor: default; }
    .cal-day.disabled { color: var(--border); cursor: default; }
    .cal-day.in-range { background: var(--accent-dim); border-radius: 0; }
    .cal-day.range-start, .cal-day.range-end {
      background: var(--accent) !important;
      color: white;
      border-radius: var(--radius);
    }
    .cal-day.range-start.in-range { border-radius: var(--radius) 0 0 7px; }
    .cal-day.range-end.in-range { border-radius: 0 7px 7px 0; }
    .cal-day.today::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--accent);
    }
    .cal-day.range-start.today::after, .cal-day.range-end.today::after { background: white; }

    .cal-time-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      padding-top: 13px;
      border-top: 1px dashed var(--border);
    }
    .cal-time-label {
      font-size: 11px;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-right: 4px;
    }
    .cal-time-sep { color: var(--muted2); font-size: 13px; }
    input[type="time"].cal-time-input,
    #sf-time-from, #sf-time-to {
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
      padding: 5px 8px;
      cursor: pointer;
      width: 90px;
    }
    #sf-time-from:focus, #sf-time-to:focus { outline: none; border-color: var(--accent); }

    .cal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 9px;
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px dashed var(--border);
    }

    .dir-btn {
      padding: 8px 15px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all 0.2s;
    }
    .dir-btn.active { background: var(--accent); color: white; }
    .exch-btn {
      padding: 8px 15px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all 0.2s;
    }
    .exch-btn.active { background: var(--accent); color: white !important; }

    .search-box:focus { border-color: var(--accent); }
    .search-box::placeholder { color: var(--muted2); }

    /* Main content */
    .main-grid {
      display: flex;
      flex: 1;
      min-height: 0;
    }

    /* Coin sidebar (legacy - hidden) */
    .coin-sidebar { display: none; }

    .coin-list { overflow-y: auto; flex: 1; min-height: 0; }

    .coin-item {
      transition: background 0.15s ease, border-color 0.15s ease;
      padding: 0 18px;height: 55px;
      border-bottom: 1px solid rgba(37,42,64,0.5);
      cursor: pointer;
      transition: background 0.12s;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .coin-item:hover { background: var(--bg3); }
    .coin-item.active { background: rgba(124,58,237,0.12); border-left: 2px solid var(--accent); }

    .coin-name  { font-weight: 600; font-size: 13px; color: var(--text-bold); }
    .coin-stats { text-align: right; }
    .coin-pnl   { font-size: 13px; font-weight: 600; }
    .coin-count { color: var(--muted2); font-size: 11px; margin-top: 2px; }

    /* Table panel */
    .table-panel {
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      flex: 1;
      min-width: 0;
    }

    .table-scroll { flex: 1; overflow: auto; }

    .table-header {
      padding: 14px 20px;
      border-bottom: 1px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .table-title    { font-weight: 600; font-size: 14px; letter-spacing: -0px; color: var(--text-bold); }
    [data-theme="light"] .table-title { color: #374151; }
    .table-subtitle { color: var(--muted); font-size: 12px; margin-top: 5px; }

    .sort-select {
      background: var(--bg3);
      border: 1px dashed var(--border);
      color: var(--text);
      padding: 7px 11px;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 13px;
      outline: none;
      cursor: pointer;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead th {
      position: sticky; top: 0; z-index: 2;
      padding: 13px 20px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted);
      border-bottom: 1px dashed var(--border);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      background: var(--bg3);
    }

    thead th:hover { color: var(--muted); }
    thead th .sort-arrow { margin-left: 4px; opacity: 0.5; }
    thead th.sorted .sort-arrow { opacity: 1; color: var(--accent2); }
    thead th.sorted { color: var(--accent2); }

    tbody tr {
      border-bottom: 1px dashed var(--border);
      transition: background 0.1s;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--bg3); }
    tbody tr.row-selected { background: var(--accent-dim); }
    @keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    tbody tr.row-new { animation: rowIn 0.25s ease; }
    #table-body { will-change: contents; }

    td {
      padding: 14px 20px;
      font-size: 13px;
      font-weight: 400;
      white-space: nowrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 9px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0px;
    }

    .badge.buy  { background: rgba(34,197,94,0.12);  color: var(--green); }
    .badge.sell { background: rgba(239,68,68,0.12);  color: var(--red); }

    .pnl-positive { color: var(--green); font-weight: 600; }
    .pnl-negative { color: var(--red); font-weight: 600; }

    .coin-tag { color: var(--text-bold); font-weight: 600; }

    .bot-name { color: var(--muted); font-size: 12px; }

    .arrow-up   { color: var(--green); }
    .arrow-down { color: var(--red); }

    /* Empty state */
    .empty-state {
      padding: 66px 22px;
      text-align: center;
      color: var(--muted2);
    }

    .empty-state .icon { font-size: 44px; margin-bottom: 13px; }
    .empty-state p { font-size: 14px; }

    /* Pagination */
    .table-footer {
      padding: 13px 22px;
      border-top: 1px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .page-btn {
      background: var(--bg3);
      border: 1px dashed var(--border);
      color: var(--muted);
      width: 31px; height: 31px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
    }
    .page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent2); background: var(--accent-dim); }
    .page-btn:disabled { opacity: 0.25; cursor: default; }

    .loading { text-align: center; padding: 44px; color: var(--muted); }
    .loading::after { content: '...'; animation: dots 1.5s infinite; }
    @keyframes dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }

    .add-btn {
      background: var(--accent);
      border: none;
      color: white;
      padding: 8px 18px;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      transition: background 0.2s;
    }
    .add-btn:hover { background: var(--accent2); }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 100;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(7px);
    }
    .modal-overlay.open { display: flex; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stat-card { animation: fadeIn 0.3s ease both; }
    .coin-rating-block { animation: fadeIn 0.3s ease both; }
    .top10-panel { animation: fadeIn 0.3s ease both; }

    /* Smooth DSS expand */
    #top-tab-analysis .coin-rating-block { transition: border-color 0.25s ease, opacity 0.25s ease, max-height 0.35s ease; overflow: hidden; }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(-12px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    #coin-trades-modal .modal {
      max-width: 800px; width: 95%; max-height: 80vh;
      display: flex; flex-direction: column;
    }
    #coin-trades-modal .modal-title-row {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
    }
    .ctm-title-left { display: flex; align-items: center; gap: 8px; }
    .ctm-title-text { font-size: 16px; font-weight: 700; }
    .ctm-close-btn { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; }
    .ctm-body { overflow-y: auto; flex: 1; min-height: 0; }
    .ctm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .ctm-table thead tr { border-bottom: 1px dashed var(--border); }
    .ctm-table th { padding: 8px; text-align: left; color: var(--muted); font-weight: 500; }
    .ctm-table td { padding: 8px; }

    .modal {
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: 15px;
      padding: 26px;
      width: 550px;
      max-width: 90vw;
      animation: modalIn 0.2s ease;
    }

    .modal h3 { font-weight: 700; margin-bottom: 18px; font-size: 16px; letter-spacing: -0px; }

    .modal textarea {
      width: 100%;
      background: var(--bg3);
      border: 1px dashed var(--border);
      color: var(--text);
      border-radius: var(--radius);
      padding: 13px;
      font-family: inherit;
      font-size: 13px;
      resize: vertical;
      min-height: 110px;
      outline: none;
      line-height: 1.6;
    }

    .modal textarea:focus { border-color: var(--accent); }

    .modal-footer { display: flex; gap: 9px; justify-content: flex-end; margin-top: 15px; }

    .btn-cancel {
      background: var(--bg3);
      border: 1px dashed var(--border);
      color: var(--muted);
      padding: 9px 18px;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
    }

    .btn-save {
      background: var(--accent);
      border: none;
      color: white;
      padding: 9px 18px;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      transition: background 0.2s;
    }
    .btn-save:hover { background: var(--accent2); }

    .parse-preview {
      margin-top: 11px;
      padding: 11px;
      background: var(--bg3);
      border-radius: var(--radius);
      font-size: 12px;
      color: var(--muted);
      min-height: 40px;
    }

    /* Left sidebar nav */
    .nav-btn-active   { background: var(--accent-dim) !important; color: var(--accent2) !important; }
    .nav-btn-inactive { background: transparent !important; color: var(--muted) !important; }
    .nav-btn-inactive:hover { background: var(--bg3) !important; color: var(--text) !important; }

    .page-trades { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

    /* Sidebar logo */
    .sidebar-close-btn {
      display: none;
      position: absolute;
      top: 14px; right: 14px;
      background: var(--bg3);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      color: var(--muted);
      cursor: pointer;
      padding: 4px;
      z-index: 101;
      line-height: 1;
    }
    .sidebar-close-btn:hover { color: var(--text); border-color: var(--border2); }


    .sidebar-logo {
      display: flex; align-items: center; gap: 11px;
      padding: 18px 18px 15px;
      border-bottom: 1px dashed var(--border);
      flex-shrink: 0;
    }
    .sidebar-logo-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; opacity: 1; max-width: 40px; overflow: hidden; transition: opacity 0.25s, max-width 0.25s, margin 0.25s; }
    .left-sidebar.collapsed .sidebar-logo-img { opacity: 0; max-width: 0; margin: 0; transition: opacity 0.1s, max-width 0.1s, margin 0.1s; }
    .sidebar-logo-title { font-size: 16px; font-weight: 700; letter-spacing: -0px; color: var(--text); }
    .sidebar-logo-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
    .sidebar-logo-text { flex: 1; min-width: 0; max-width: 200px; max-height: 50px; overflow: hidden; opacity: 1; transition: opacity 0.25s, max-width 0.25s, max-height 0.25s; }
    .sidebar-logo-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; max-width: 80px; max-height: 40px; overflow: hidden; opacity: 1; transition: opacity 0.25s, max-width 0.25s, max-height 0.25s; }
    .left-sidebar.collapsed .sidebar-logo-text,
    .left-sidebar.collapsed .sidebar-logo-actions { opacity: 0; max-width: 0; max-height: 0; pointer-events: none; transition: opacity 0.1s, max-width 0.1s, max-height 0.1s; }

    /* Nav menu */
    .sidebar-nav { padding: 11px 11px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
    .nav-btn {
      transition: background 0.2s ease, color 0.2s ease;
      display: flex; align-items: center; gap: 11px;
      padding: 10px 13px; border-radius: 9px; border: none;
      cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
      width: 100%; text-align: left; transition: all 0.15s;
      background: transparent; color: var(--muted);
    }
    .nav-btn:hover { background: var(--bg3); color: var(--text); }
    .nav-btn.active { background: var(--accent-dim); color: var(--accent2); font-weight: 600; }
    .nav-btn .material-icons-round { font-size: 20px; }
    .sidebar-divider { height: 1px; background: var(--border); margin-top: 11px; flex-shrink: 0; }

    /* Sidebar exchange buttons */
    .sb-left { display: flex; align-items: center; gap: 9px; }
    .sb-right { display: flex; align-items: center; gap: 7px; }
    .sb-vdivider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
    .ex-btn {
      background: transparent; border: 1px solid var(--border); border-radius: 7px;
      padding: 3px 7px; cursor: pointer; display: flex; align-items: center;
      justify-content: center; transition: all 0.15s;
    }
    .ex-btn.active { background: var(--accent-dim); border-color: var(--accent); }
    .ex-btn img { width: 16px; height: 16px; border-radius: 50%; }
    .sort-btn {
      background: var(--bg3); border: 1px solid var(--border); border-radius: 5px;
      padding: 3px 7px; cursor: pointer; font-size: 11px; color: var(--muted);
      transition: all 0.15s; font-family: inherit;
    }
    .sort-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
    .coin-count-badge { background: var(--bg3); padding: 2px 8px; border-radius: 11px; font-size: 11px; }

    /* Sidebar search */
    .sidebar-search-row {
      padding: 0 13px 0 18px; height: 55px;
      border-bottom: 1px dashed var(--border);
      flex-shrink: 0; display: flex; align-items: center; gap: 9px;
    }
    .sidebar-search-icon { font-size: 18px; color: var(--muted); flex-shrink: 0; }
    .sidebar-search-input {
      flex: 1; background: transparent; border: none; padding: 0;
      color: var(--text); font-family: inherit; font-size: 14px; outline: none;
    }

    /* Header status */
    .status-row { display: flex; align-items: center; gap: 9px; }
    .refresh-btn-icon { display: flex; align-items: center; gap: 7px; }
    .refresh-btn-yellow { border-color: var(--yellow) !important; color: var(--yellow) !important; }
    .mi-sm { font-size: 16px; }

    /* Stat card yellow value */
    .stat-value-yellow { color: var(--yellow); }

    /* Hidden data containers */
    .hidden { display: none; }

    /* Filter panel */
    .filter-panel {
      background: var(--bg2); border: 1px dashed var(--border);
      border-radius: var(--radius-lg); padding: 15px 20px;
      margin-bottom: 13px; flex-shrink: 0;
    }
    .filter-row {
      display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
    }
    .filter-row-2 {
      display: flex; align-items: center; gap: 30px;
      margin-top: 13px; padding-top: 13px;
    }
    .filter-vdivider { width: 1px; height: 35px; background: var(--border); flex-shrink: 0; }
    .filter-user-group { flex: 1; min-width: 0; }
    .filter-group-nowrap { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }

    /* Search wrapper */
    .search-wrap { position: relative; display: flex; align-items: center; }
    .search-icon {
      position: absolute; left: 9px; font-size: 18px;
      color: var(--muted); pointer-events: none;
    }
    .search-box-wide { width: 242px; padding-left: 33px; }

    /* Distance row */
    .dist-row { display: flex; align-items: center; gap: 7px; }
    .dist-sep { color: var(--muted); font-size: 13px; }
    .filter-chip-icon { padding: 6px 10px; font-size: 12px; }
    .mi-xs { font-size: 15px; }

    /* Delete bar */
    .delete-bar { display: none; align-items: center; gap: 9px; }
    .table-header-right { display: flex; align-items: center; gap: 9px; }
    .selected-count { font-size: 13px; color: var(--muted); }
    .delete-btn {
      background: var(--red-dim); border: 1px solid var(--red); color: var(--red);
      padding: 7px 13px; border-radius: 7px; cursor: pointer;
      font-family: inherit; font-size: 13px; transition: opacity 0.2s;
      display: flex; align-items: center; gap: 6px;
    }
    .delete-btn:hover { opacity: 0.8; }

    /* Table footer rows/page */
    .footer-left { display: flex; align-items: center; gap: 9px; }
    .footer-center { display: flex; align-items: center; gap: 7px; }
    .page-info { font-size: 13px; color: var(--muted); padding: 0 9px; }
    .footer-rows-label { color: var(--muted); }
    .footer-count { color: var(--muted); }

    /* Top page tabs */
    .top-tabs {
      display: flex; gap: 9px; padding: 0 0 18px 0; flex-shrink: 0;
    }
    .top-tab {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 18px; border-radius: var(--radius);
      border: 1px dashed var(--border); background: var(--bg3);
      color: var(--muted); cursor: pointer; font-family: inherit;
      font-size: 13px; font-weight: 500; transition: all 0.15s;
    }
    .top-tab:hover { color: var(--text); border-color: var(--border2); }
    .top-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent2); font-weight: 600; }
    .top-tab-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }

    /* Page: Top Coins */
    .page-top-content {
      flex-direction: column; flex: 1; min-height: 0;
      overflow-y: auto; padding: 0;
    }
    .dist-select {
      background: var(--bg3); border: 1px dashed var(--border);
      border-radius: 7px; padding: 4px 9px; color: var(--text);
      font-family: inherit; font-size: 12px; outline: none;
    }
    .block-header-row {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 11px;
    }

    /* Coin page */
    .coin-page-wrap {
      position: fixed; inset: 0; z-index: 100;
      display: none;
      flex-direction: row; background: var(--bg);
    }
    .coin-page-content {
      flex: 1; min-width: 0; display: flex; flex-direction: column;
      overflow: hidden; background: var(--bg); position: relative; z-index: 1;
    }
    .coin-page-header {
      display: flex; align-items: center; gap: 18px;
      padding: 18px 26px;
      flex-shrink: 0; background: var(--bg);
    }
    .coin-page-header-divider {
      border-bottom: 1px dashed var(--border);
      margin: 0 26px; flex-shrink: 0;
    }
    .coin-page-back {
      background: var(--bg3); border: 1px dashed var(--border); color: var(--text);
      padding: 7px 15px; border-radius: 7px; cursor: pointer;
      font-family: inherit; font-size: 13px; display: flex; align-items: center; gap: 6px;
    }
    .coin-page-back .material-icons-round { font-size: 18px; }
    .coin-page-title { font-size: 22px; font-weight: 800; }
    .coin-page-subtitle { color: var(--muted); font-size: 13px; }
    .coin-page-body {
      flex: 1; min-height: 0; overflow-y: auto;
      padding: 18px 26px; display: flex; flex-direction: column; gap: 18px;
    }
    .coin-page-stats {
      display: grid; grid-template-columns: repeat(5,1fr);
      gap: 11px; flex-shrink: 0;
    }
    .coin-chart-wrap {
      background: var(--bg2); border: 1px dashed var(--border);
      border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; height: 462px;
    }
    .coin-chart-inner { height: 100%; }
    .coin-trades-wrap { display: flex; flex-direction: column; flex-shrink: 0; }
    .coin-trades-label {
      font-size: 12px; font-weight: 600; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 11px;
    }
    .coin-trades-table {
      background: var(--bg2); border: 1px dashed var(--border);
      border-radius: var(--radius-lg); overflow: auto;
    }
    .coin-trades-table table { width: 100%; border-collapse: collapse; }
    .coin-trades-table th {
      padding: 11px 15px; text-align: left; font-size: 11px;
      text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
      border-bottom: 1px dashed var(--border); white-space: nowrap;
      background: var(--bg3);
    }

    /* Delete modal */
    .delete-modal { max-width: 418px; text-align: center; padding: 35px 31px; }
    .delete-modal-icon { margin-bottom: 13px; }
    .delete-modal-icon .material-icons-round { font-size: 53px; color: var(--red); }
    .modal-btn-row { display: flex; gap: 11px; justify-content: center; }
    .btn-cancel-full { flex: 1; padding: 11px; }
    .btn-delete { flex: 1; padding: 11px; background: var(--red); border-color: var(--red); }

    /* Import modal */
    .import-drop-area {
      border: 2px dashed var(--border); border-radius: var(--radius-lg);
      padding: 35px; text-align: center; cursor: pointer;
      transition: border-color 0.2s;
    }
    .import-drop-area:hover { border-color: var(--accent); }
    .import-drop-icon .material-icons-round { font-size: 40px; color: var(--muted); }
    .import-drop-text { color: var(--muted); font-size: 13px; }
    .import-status { margin-top: 13px; font-size: 13px; color: var(--muted); min-height: 22px; }

    /* Import modal */
    .import-drop-area {
      border: 2px dashed var(--border); border-radius: var(--radius-lg);
      padding: 35px; text-align: center; cursor: pointer;
      transition: border-color 0.2s;
    }
    .import-drop-area:hover { border-color: var(--accent); }
    .import-drop-icon .material-icons-round { font-size: 40px; color: var(--muted); }
    .import-drop-text { color: var(--muted); font-size: 13px; }
    .import-status { margin-top: 13px; font-size: 13px; color: var(--muted); min-height: 22px; }

    /* Top-10 real-time panels */
    .top10-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px; }
    .top10-panel {
      background: var(--bg2); border: 1px dashed var(--border);
      border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden;
    }
    .top10-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 18px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; gap: 9px;
    }
    .top10-header-left { display: flex; align-items: center; gap: 9px; }
    .top10-header-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .top10-title { font-size: 14px; font-weight: 700; color: var(--text-bold); }
    .top10-live {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      padding: 2px 9px; border-radius: 22px;
    }
    .top10-live.green { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
    .top10-live.red   { background: rgba(239,68,68,0.1);  color: var(--red);   border: 1px solid rgba(239,68,68,0.3); }
    .top10-dot {
      width: 7px; height: 7px; border-radius: 50%;
      animation: pulse 1.5s infinite;
    }
    .top10-dot.green { background: var(--green); box-shadow: 0 0 4px var(--green); }
    .top10-dot.red   { background: var(--red);   box-shadow: 0 0 4px var(--red); }
    .top10-live.purple { background: rgba(139,92,246,0.1); color: var(--accent2); border: 1px solid rgba(139,92,246,0.3); }
    .top10-dot.purple { background: var(--accent2); box-shadow: 0 0 4px var(--accent2); }

    .top10-list { flex: 1; }
    .top10-row {
      display: grid; grid-template-columns: 26px 1fr auto auto;
      align-items: center; gap: 11px;
      padding: 10px 18px; border-bottom: 1px dashed var(--border);
      transition: background 0.1s;
    }
    .top10-row:last-child { border-bottom: none; }
    .top10-row:hover { background: var(--bg3); }
    .top10-rank { font-size: 12px; font-weight: 700; color: var(--muted); }
    .top10-rank.gold   { color: #fbbf24; }
    .top10-rank.silver { color: #94a3b8; }
    .top10-rank.bronze { color: #cd7f32; }
    .top10-info { min-width: 0; }
    .top10-coin { font-size: 14px; font-weight: 700; color: var(--text-bold); }
    .top10-trades { font-size: 11px; color: var(--muted); margin-top: 1px; }
    .top10-bar-wrap { width: 88px; }
    .top10-bar-bg { height: 3px; background: var(--bg4); border-radius: 2px; margin-bottom: 3px; }
    .top10-bar-fill { height: 100%; border-radius: 2px; }
    .top10-bar-pct { font-size: 10px; color: var(--muted); }
    .top10-pnl { text-align: right; }
    .top10-pnl-val { font-size: 15px; font-weight: 700; }
    .top10-pnl-pct { font-size: 11px; font-weight: 600; margin-top: 1px; }

    .top10-footer {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 18px; border-top: 1px dashed var(--border);
      font-size: 11px; color: var(--muted);
    }
    .top10-progress-wrap { flex: 1; height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
    .top10-progress { height: 100%; border-radius: 2px; background: var(--accent); width: 100%; transition: width 1s linear; }

    /* Whitelist / Blacklist */
    .wl-row { display: flex; align-items: flex-start; gap: 13px; }
    .wl-dist-label {
      width: 57px; flex-shrink: 0; font-size: 14px; font-weight: 700;
      color: var(--text-bold); padding-top: 2px;
    }
    .wl-col { flex: 1; min-width: 0; }
    .wl-col-title {
      font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
      font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
    }
    .wl-col-title.green { color: var(--green); }
    .wl-col-title.red   { color: var(--red); }
    .wl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .wl-chip {
      display: inline-flex; flex-direction: column; align-items: flex-start;
      padding: 7px 11px; border-radius: var(--radius); gap: 2px; cursor: default; min-width: 110px;
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .wl-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
    .wl-chip.white {
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--green);
    }
    .wl-chip.black {
      background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red);
    }
    .wl-chip-name { font-weight: 700; font-size: 13px; }
    .wl-chip-pnl  { font-size: 12px; color: var(--text); opacity: 0.9; }
    .wl-divider { width: 1px; background: var(--border); align-self: stretch; flex-shrink: 0; margin: 0 4px; }

    /* Dist Stats Table */
    #dss-table th, #dss-table td {
      padding: 10px; white-space: nowrap; border-bottom: 1px dashed var(--border);
    }
    #dss-table thead th {
      background: var(--bg3); color: var(--muted); font-size: 11px;
      text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
      text-align: center; border-bottom: 1px dashed var(--border); cursor: default;
      position: sticky; top: 0; z-index: 2;
    }
    #dss-table thead th.group-buy  { background: #22c55e1a; color: var(--green); }
    #dss-table thead th.group-sell { background: #ef44441a; color: var(--red); }
    #dss-table td { text-align: center; }
    #dss-table td.col-left { text-align: left; }
    #dss-table tr.coin-row td { background: var(--bg3); font-weight: 700; }
    #dss-table tr.coin-row td.col-coin { font-size: 13px; color: var(--text-bold); }
    #dss-table tr:hover td { background: var(--bg4); }
    #dss-table tr.coin-row:hover td { background: var(--bg3); }
    #dss-table td.dash { color: var(--muted2); }
    #dss-table td.pnl-pos { color: var(--green); font-weight: 600; }
    #dss-table td.pnl-neg { color: var(--red); font-weight: 600; }
    #dss-table td.wr-high { color: var(--green); }
    #dss-table td.wr-low  { color: var(--red); }
    #dss-table tr:last-child td { border-bottom: none; }

    /* Recommended dist cards */
    .rec-card {
      background: var(--bg3); border: 1px dashed var(--border);
      border-radius: var(--radius-lg); padding: 13px 15px; transition: border-color 0.2s;
    }
    .rec-card:hover { border-color: var(--border2); }
    .rec-card-coin { font-size: 14px; font-weight: 700; color: var(--text-bold); margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
    .rec-card-total { font-size: 12px; font-weight: 600; }
    .rec-card-dists { display: flex; flex-wrap: wrap; gap: 6px; }
    .rec-dist-badge {
      display: inline-flex; flex-direction: column; align-items: center;
      padding: 4px 10px; border-radius: var(--radius);
      border: 1px dashed var(--border); background: var(--bg2); gap: 1px; cursor: default;
    }
    .rec-dist-badge.top1 { border-color: var(--accent); background: var(--accent-dim); }
    .rec-dist-badge.top2 { border-color: rgba(139,92,246,0.4); }
    .rec-dist-badge.top3 { border-color: rgba(139,92,246,0.2); }
    .rec-dist-val { font-weight: 700; color: var(--text); font-size: 13px; }
    .rec-dist-pnl { font-size: 11px; font-weight: 600; }
    .rec-dist-wr  { font-size: 10px; color: var(--muted); }

    /* Coin-Distance Matrix table */
    #cdm-table th, #cdm-table td {
      padding: 8px 13px; white-space: nowrap; text-align: center;
      border-bottom: 1px dashed var(--border); border-right: 1px dashed var(--border);
    }
    #cdm-table th { background: var(--bg3); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
    #cdm-table td:first-child { text-align: left; font-weight: 600; color: var(--text); background: var(--bg3); position: sticky; left: 0; }
    #cdm-table th:first-child { position: sticky; left: 0; }
    #cdm-table tr:last-child td { border-bottom: none; }
    #cdm-table td:last-child, #cdm-table th:last-child { border-right: none; }
    .cdm-pos { color: var(--green); font-weight: 600; }
    .cdm-neg { color: var(--red); font-weight: 600; }
    .cdm-empty { color: var(--muted2); }
    .top-period-btns { display: flex; gap: 4px; flex-wrap: wrap; }
    .period-btn {
      padding: 4px 11px; border-radius: var(--radius); border: 1px dashed var(--border);
      background: var(--bg3); color: var(--muted); cursor: pointer;
      font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.15s;
    }
    .period-btn:hover { border-color: var(--border2); color: var(--text); }
    .period-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent2); font-weight: 600; }

    .top-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
    .top-stat-card {
      background: var(--bg3); border: 1px dashed var(--border); border-radius: var(--radius-lg);
      padding: 18px 20px; display: flex; flex-direction: column; gap: 7px;
      transition: border-color 0.2s;
    }
    .top-stat-card:hover { border-color: var(--border2); }
    .top-stat-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 7px; }
    .top-stat-card-label .material-icons-round { font-size: 15px; }
    .top-stat-card-value { font-size: 22px; font-weight: 700; color: var(--text-bold); letter-spacing: -0px; }
    .top-stat-card-sub { font-size: 12px; color: var(--muted); }
    .top-stat-card-extra { font-size: 13px; font-weight: 600; }
    .cr-dist-name { font-size: 15px; color: var(--yellow); }
    .cr-avg { color: var(--muted); }
    .exchange-icon { width: 15px; height: 15px; border-radius: 50%; }
    .badge-unknown { background: rgba(139,148,158,0.15); color: var(--muted); }
    .arrow-icon { font-size: 15px; vertical-align: middle; }
    .status-ok { color: var(--green); }
    .status-err { color: var(--red); }

    .date-picker-wrap { position: relative; }
    .date-arrow { margin-left: 9px; opacity: 0.5; }

    /* Material icon helpers */
    .mi-va { vertical-align: middle; }
    .mi-lg { font-size: 22px; }
    .mi-md { font-size: 20px; }
    .mi-sm { font-size: 16px; }
    .mi-xs { font-size: 15px; }

    /* Checkbox */
    .cb { cursor: pointer; accent-color: var(--accent); }

    /* Coin rating icon */
    .cr-icon { font-size: 15px; vertical-align: middle; margin-right: 4px; }

    /* Dist block margin */
    .mt-12 { margin-top: 13px; }

    /* Modal text */
    .modal-desc { color: var(--muted); font-size: 12px; margin-bottom: 11px; }
    .modal-import-desc { color: var(--muted); font-size: 12px; margin-bottom: 15px; line-height: 1.7; }
    .modal-bold { color: var(--text); }
    .modal-title-row { display: flex; align-items: center; gap: 9px; }

    /* Modal delete */
    .modal-delete-text { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
    .modal-delete-title { margin: 0 0 9px; font-size: 20px; }

    /* Table cells color helpers */
    .tc-yellow { color: var(--yellow); }
    .tc-muted  { color: var(--muted); }
    .tc-accent { color: var(--accent); }

    /* Coin cell inner */
    .coin-cell { display: flex; align-items: center; gap: 7px; }

    /* Coin page table cells */
    .cp-td { padding: 11px 15px; }
    .cp-td-yellow { padding: 11px 15px; color: var(--yellow); }
    .cp-td-muted  { padding: 11px 15px; color: var(--muted); }
    .cp-td-accent { padding: 11px 15px; color: var(--accent); }

    /* Dist title no margin-bottom */
    .coin-rating-title-inline { margin-bottom: 0; }

    @media (max-width: 990px) {
      .main-grid { flex-direction: column; }
      .stats-row { grid-template-columns: repeat(2, 1fr); }

      /* На планшете — сайдбар overlay с обычной шириной */
      .left-sidebar {
        display: flex !important;
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
      }
      .left-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
      }
      .sidebar-close-btn { display: flex; }
    }

    @media (max-width: 600px) {
      /* На телефоне — сайдбар на весь экран */
      .left-sidebar {
        width: 100% !important;
        min-width: 100% !important;
      }
    }
    @media (max-width: 600px) {
      .stats-row { grid-template-columns: 1fr 1fr; }

      /* Карточки */
      .stat-inner { padding: 11px 12px 11px 20px; }
      .stat-label { font-size: 9px; margin-bottom: 4px; gap: 3px; }
      .stat-label .material-icons-round { font-size: 11px !important; }
      .stat-value { font-size: 18px; letter-spacing: -0.5px; margin-bottom: 5px; }
      .stat-sub   { font-size: 10px; }
      .stat-badge { font-size: 9px; padding: 1px 5px; }
      .stat-sparkline { width: 38%; opacity: 0.15; }
      .stat-accent { width: 2px; }

      /* Фильтры */
      .filter-panel { padding: 10px 12px; }
      .filter-row  { gap: 10px; }
      .filter-row-2 { gap: 10px; margin-top: 10px; padding-top: 10px; }
      .filter-label { font-size: 9px; letter-spacing: 0.5px; }
      .filter-block { gap: 4px; }
      .view-btn, .dir-btn, .exch-btn { padding: 5px 9px; font-size: 11px; }
      .filter-chip { padding: 5px 9px; font-size: 11px; }
      .range-input { width: 52px !important; font-size: 11px; padding: 5px 6px !important; }
      .search-box-wide { width: 100% !important; font-size: 11px; }
      .filter-user-group { width: 100%; }
      .date-range-btn { font-size: 11px; padding: 5px 9px; }

      /* Датапикер — на всю ширину экрана */
      .date-picker-popup {
        position: fixed;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 14px 12px;
        z-index: 500;
      }
      .cal-months { flex-direction: column; gap: 14px; }
      .cal-month  { width: 100%; }

      /* Шапка */
      header { padding-bottom: 12px; flex-wrap: wrap; gap: 8px; }
      .header-right { gap: 6px; flex: 1; justify-content: flex-end; }
      .btn-label { display: none; }
      header .refresh-btn, header .add-btn { padding: 7px 10px; }
      .status-text { display: none; }
    }


/* ─── Market Page ─────────────────────────────────────────────────────────── */

    .page-market-content {
      display: flex;
      flex-direction: column;
      flex: 1; min-height: 0;
      overflow: hidden;
      padding: 0;
    }

    .mkt-inner {
      display: flex;
      flex-direction: column;
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 0;
    }

    /* BTC Card — same pattern as .stat-card */
    .mkt-btc-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      margin-bottom: 13px;
      transition: border-color 0.25s;
      flex-shrink: 0;
    }
    .mkt-btc-card:hover { border-color: var(--border2); }

    .mkt-btc-top {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .mkt-btc-icon-wrap {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(247,147,26,0.1);
      border: 1px dashed rgba(247,147,26,0.3);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mkt-btc-icon { color: #f7931a; font-size: 24px !important; }

    .mkt-btc-main { flex-shrink: 0; }

    /* Stats grid — one horizontal row of items */
    .mkt-btc-stats {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      min-width: 0;
      overflow-x: auto;
    }
    .mkt-stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 14px;
      border-left: 1px dashed var(--border);
      flex-shrink: 0;
    }
    .mkt-stat-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted2);
      margin-bottom: 3px;
      white-space: nowrap;
    }
    .mkt-stat-val {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .mkt-btc-chart-tabs { display: flex; gap: 4px; flex-shrink: 0; align-self: center; margin-left: 8px; }

    .mkt-btc-chart-wrap {
      width: 100%;
      height: 130px;
      border-top: 1px dashed var(--border);
      padding-top: 14px;
    }
    .mkt-btc-chart-wrap canvas { width: 100% !important; height: 100% !important; }
    .mkt-btc-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: var(--muted); margin-bottom: 5px;
    }
    .mkt-btc-pair {
      background: var(--bg3); border: 1px dashed var(--border);
      border-radius: 4px; padding: 1px 5px; font-size: 10px;
      margin-left: 5px; color: var(--muted2); vertical-align: middle;
    }
    .mkt-btc-price {
      font-size: 26px; font-weight: 700;
      color: var(--text-bold); letter-spacing: -0.5px;
    }

    /* Volatility block — same pattern as .coin-rating-block */
    .mkt-vol-section {
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
    }

    .mkt-vol-header {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 13px 18px;
      border-bottom: 1px dashed var(--border);
      flex-shrink: 0;
    }
    .mkt-vol-title {
      font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
    }

    /* Period buttons — match .top-tab style */
    .mkt-period-tabs { display: flex; gap: 4px; }
    .mkt-period-btn {
      display: flex; align-items: center;
      padding: 6px 14px; border-radius: var(--radius);
      border: 1px dashed var(--border); background: var(--bg3);
      color: var(--muted); cursor: pointer; font-family: inherit;
      font-size: 12px; font-weight: 500; transition: all 0.15s;
    }
    .mkt-period-btn:hover { color: var(--text); border-color: var(--border2); }
    .mkt-period-btn.active {
      background: var(--accent-dim); border-color: var(--accent);
      color: var(--accent2); font-weight: 600;
    }

    /* Table — inherits global thead/tbody styles, just needs the wrapper */
    .mkt-vol-table-wrap { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .mkt-vol-table {
      width: 100%; border-collapse: collapse; font-size: 13px; flex: 1;
    }
    .mkt-vol-table thead th {
      position: sticky; top: 0; z-index: 2;
      padding: 11px 15px; text-align: left;
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--muted); border-bottom: 1px dashed var(--border);
      background: var(--bg3); white-space: nowrap; user-select: none;
    }
    .mkt-vol-table thead th.vol-th-sort { cursor: pointer; }
    .mkt-vol-table thead th.vol-th-sort:hover { color: var(--text); }
    .mkt-vol-table thead th.sorted { color: var(--accent2); }
    .mkt-vol-table thead th .vol-sort-arrow { margin-left: 3px; opacity: 0.5; }
    .mkt-vol-table thead th.sorted .vol-sort-arrow { opacity: 1; color: var(--accent2); }
    /* Right-align all columns except # (1) and Монета (2) */
    .mkt-vol-table thead th:not(:nth-child(1)):not(:nth-child(2)) { text-align: right; }
    .mkt-vol-table tbody td:not(:nth-child(1)):not(:nth-child(2)) { text-align: right; }
    .mkt-vol-table tbody tr {
      border-bottom: 1px dashed var(--border); transition: background 0.1s;
    }
    .mkt-vol-table tbody tr:last-child { border-bottom: none; }
    .mkt-vol-table tbody tr:hover { background: var(--bg3); }
    .mkt-vol-table tbody td {
      padding: 11px 15px; color: var(--text); white-space: nowrap;
    }
    .mkt-vol-table tbody td.mkt-green { color: var(--green); }
    .mkt-vol-table tbody td.mkt-red   { color: var(--red); }

    .mkt-rank        { color: var(--muted2); font-size: 12px; }
    .mkt-rank-gold   { color: var(--yellow); font-weight: 700; }
    .mkt-rank-silver { color: var(--muted);  font-weight: 700; }
    .mkt-rank-bronze { color: #cd7f32;       font-weight: 700; }

    .mkt-coin-sym   { font-weight: 600; }
    .mkt-coin-quote { color: var(--muted2); font-size: 11px; margin-left: 2px; }

    .mkt-price    { font-variant-numeric: tabular-nums; }
    .mkt-chg      { font-weight: 600; font-variant-numeric: tabular-nums; }
    .mkt-vol-cell { color: var(--muted); font-variant-numeric: tabular-nums; }

    .mkt-green { color: var(--green); }
    .mkt-red   { color: var(--red); }

    .mkt-empty {
      text-align: center; padding: 40px;
      color: var(--muted); font-size: 13px;
    }

    @media (max-width: 700px) {
      .mkt-btc-top        { flex-wrap: wrap; }
      .mkt-btc-stats      { max-width: 100%; width: 100%; border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 4px; }
      .mkt-stat-item      { border-left: none; border-right: 1px dashed var(--border); align-items: flex-start; }
      .mkt-btc-chart-tabs { width: 100%; flex-wrap: wrap; }
      .page-market-content { padding: 14px; }
    }

    /* Multi-timeframe volatility table */
    .mkt-vol-table thead th { white-space: nowrap; font-size: 10px; padding: 9px 12px; }
    .mkt-vol-table tbody td { padding: 8px 12px; }
    .mkt-delta { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
    .th-sep { border-left: 1px dashed var(--border2) !important; }
    .mkt-vol-table thead th.th-sep { border-left: 1px dashed var(--border2); }

    /* ─── Mobile Filter Sheet ───────────────────────────────── */
    .mobile-filter-btn {
      display: none;
      background: none; border: none;
      cursor: pointer; color: var(--muted);
      padding: 0; align-items: center; line-height: 1;
    }
    .mobile-filter-btn:hover { color: var(--text); }

    .mobile-filter-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 299;
    }
    .mobile-filter-sheet {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: var(--bg2);
      border-top: 1px dashed var(--border);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      z-index: 300;
      padding: 0 16px 32px;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      max-height: 85vh;
      overflow-y: auto;
    }
    .mobile-filter-handle {
      width: 36px; height: 4px;
      background: var(--border2);
      border-radius: 2px;
      margin: 12px auto 16px;
    }
    .mobile-filter-title {
      display: flex; align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      font-size: 15px; font-weight: 600; color: var(--text);
    }
    .mobile-filter-reset {
      background: none; border: 1px dashed var(--border);
      border-radius: var(--radius); color: var(--muted);
      font-size: 12px; padding: 4px 10px;
      cursor: pointer; font-family: inherit;
    }
    .mobile-filter-reset:hover { color: var(--text); border-color: var(--border2); }
    .mobile-filter-body { display: flex; flex-direction: column; gap: 16px; }

    /* Mobile filter — скрыт на десктопе (управление через JS) */
    .mobile-filter-btn     { display: none !important; }
    .mobile-filter-overlay { display: none; }
    .mobile-filter-sheet   { display: none; }

    @media (max-width: 600px) {
      /* Показываем кнопку фильтра */
      .mobile-filter-btn { display: flex !important; }
      /* Скрываем обычный фильтр */
      .filter-panel { display: none !important; }
      /* Sheet управляется через JS */
      .mobile-filter-sheet   { display: none; }
      .mobile-filter-overlay { display: none; }
      .mobile-filter-sheet.open   { display: block !important; }
      .mobile-filter-overlay.open { display: block !important; }
    }

    .mf-row { display: flex; gap: 12px; align-items: flex-start; }
    .mf-row .filter-block { flex: 1; min-width: 0; }
    .mf-row .view-toggle { width: 100%; }
    .mf-row .view-toggle .view-btn,
    .mf-row .view-toggle .dir-btn,
    .mf-row .view-toggle .exch-btn { flex: 1; text-align: center; }
    .mf-row .date-range-btn { width: 100%; justify-content: space-between; box-sizing: border-box; }

    #mobile-date-collapse {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.3s ease, opacity 0.25s ease;
    }



    /* Два месяца рядом, каждый 50% */
    #mobile-date-collapse .cal-months {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 8px;
    }
    #mobile-date-collapse #mobile-cal-right {
      display: block !important;
    }
    #mobile-date-collapse .cal-month {
      width: calc(50% - 4px) !important;
      min-width: 0;
      flex-shrink: 0;
    }



    /* Таблица сделок на мобилке */
    @media (max-width: 600px) {
      .coin-rating-title {font-size: 11px;}
      .table-subtitle {font-size: 11px;}
      /* Скрываем только Объём (col 10) и Цена (col 11) */
      #table-body tr td:nth-child(10),
      #table-body tr td:nth-child(11),
      .table-scroll thead tr th:nth-child(10),
      .table-scroll thead tr th:nth-child(11) {
        display: none;
      }

      /* Направление — центрировать только ячейки, не заголовок */
      #table-body tr td:nth-child(3) { text-align: center; }

      /* Компактнее ячейки */
      .table-scroll td, .table-scroll th { padding: 6px 8px; font-size: 11px; white-space: nowrap; }
      .table-scroll td.badge {
        text-align: center;
      }
      .coin-name { font-size: 11px; }
      .cb { width: 14px; height: 14px; }

      /* Пагинация — компактная */
      .table-footer { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
      .table-footer .sort-select {
        font-size: 11px;
        padding: 7px 8px;
      }
      .footer-left { gap: 6px; }
      .footer-rows-label { display: none; }
      .footer-center { gap: 4px; }
      .page-btn { width: 26px; height: 26px; font-size: 13px; }
      .page-info { font-size: 11px; }
      #footer-pnl { font-size: 11px; }
      #footer-count { display: none;}
    }

/* ─── Shots Page ─────────────────────────────────────────────────────────── */

.page-shots-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: 14px;
}
.page-shots-content > .filter-panel {
  margin-bottom: 0;
}
.shots-tabs { padding-bottom: 4px; }
#shots-tab-table { flex-direction: column; }
#shots-tab-stats { flex-direction: column; }
.shots-stat-block { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 18px 18px 0; }
.shots-stat-header { margin-bottom: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.csv-export-btn { display: flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.csv-export-btn:hover { background: var(--bg3); }
.csv-export-btn-icon { font-size: 14px; color: var(--accent); }
.shots-stat-table-wrap { overflow: auto; flex: 1; min-height: 0; border-radius: var(--radius); }
.shots-stat-table { border-collapse: collapse; min-width: 100%; font-size: 11px; }
.shots-stat-table thead th { position: sticky; background: var(--bg3); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 8px 12px; white-space: nowrap; text-align: center; border-bottom: 1px solid var(--border); }
.shots-stat-table thead th.col-left { text-align: left; }
.shots-stat-table thead th.group-buy  { background: #22c55e1a; color: var(--green); }
.shots-stat-table thead th.group-sell { background: #ef44441a; color: var(--red); }
.shots-stat-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--border); font-size: 12px; }
.shots-stat-table td.col-left { text-align: left; }
.shots-stat-table tr.coin-row td { background: var(--bg3); font-weight: 700; }
.shots-stat-table tr.coin-row td.col-coin { font-size: 13px; color: var(--text-bold); }
.shots-stat-table tr:hover td { background: var(--bg4); }
.shots-stat-table tr.coin-row:hover td { background: var(--bg3); }
.shots-stat-table td.dash { color: var(--muted2); }
.shots-stat-table td.pnl-pos { color: var(--green); font-weight: 600; }
.shots-stat-table td.pnl-neg { color: var(--red); font-weight: 600; }
.shots-stat-table td.tc-yellow { color: var(--yellow); }
@keyframes shotTabFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.shots-tab-fadein { animation: shotTabFadeIn 0.2s ease both; }

.shots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.shots-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shots-layout {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

/* Left coin panel */
.shots-coins-panel {
  width: 240px;
  min-width: 220px;
  background: var(--bg2);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.shots-coins-panel .table-header {
  height: 47px;
  padding: 0 20px;
  align-items: center;
}
.shots-coins-panel #shots-coins-list {
  overflow-y: auto;
  flex: 1;
}

.shots-feed-table {
  table-layout: fixed;
  width: 100%;
}
.shots-feed-table th:nth-child(1) { width: 250px; }
.shots-feed-table th:nth-child(2) { width: 250px; }
.shots-feed-table td:nth-child(1),
.shots-feed-table td:nth-child(2) { overflow: hidden; white-space: nowrap; }

.shots-coin-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 20px;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  transition: background 0.2s;
}
.shots-coin-item:last-child { border-bottom: none; }

.shots-coin-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shots-coin-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.scs-buy  { color: var(--green); }
.scs-sell { color: var(--red); }


.shots-coin-badge {
  background: var(--bg4);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  border-radius: 20px;
  padding: 1px 6px;
  min-width: 22px;
  text-align: center;
}

/* Feed panel */
.shots-feed-panel {
  flex: 1;
  min-width: 0;
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shots-feed-header {
  display: grid;
  grid-template-columns: 62px 76px 20px 84px 72px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
  flex-shrink: 0;
}

.shots-feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
}

.shots-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 60px 20px;
}

/* Shot item */
.shot-item {
  display: grid;
  grid-template-columns: 62px 76px 20px 84px 72px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.shot-item.shot-new { opacity: 0; }

.shot-item.shot-up {
  background: rgba(34, 197, 94, 0.07);
  border-color: rgba(34, 197, 94, 0.18);
}
.shot-item.shot-down {
  background: rgba(255, 86, 48, 0.07);
  border-color: rgba(255, 86, 48, 0.18);
}

.shot-time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.shot-coin {
  font-weight: 700;
  color: var(--text-bold);
}
.shot-arrow {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.shot-pct {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.shot-vol {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.shot-buy-ratio {
  color: var(--muted2);
  font-size: 11px;
  text-align: right;
}

.shot-up { color: var(--green); }
.shot-down { color: var(--red); }

/* ── Shot delta modal ────────────────────────────────────────────────────── */
.shot-row-clickable { cursor: pointer; }
.shot-delta-modal-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 380px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.sdm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sdm-coin { font-size: 17px; font-weight: 700; color: var(--text-bold); display: flex; align-items: center; gap: 8px; }
.sdm-usdt { color: var(--muted); font-size: 12px; font-weight: 400; margin-right: 2px; }
.sdm-close { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; padding: 2px; }
.sdm-close:hover { color: var(--text); }
.sdm-meta { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.sdm-section-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sdm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sdm-table thead th { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; padding: 5px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.sdm-table thead th.sdm-period { text-align: left; }
.sdm-table td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.sdm-table tr:last-child td { border-bottom: none; }
.sdm-period { text-align: left !important; color: var(--muted); font-weight: 600; }
.sdm-rel { font-weight: 600; }
.sdm-abs { color: var(--muted); }
.sdm-no-data { color: var(--muted); font-size: 12px; padding: 12px 0; }

/* Delta tab */
.delta-summary-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.delta-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 180px; flex: 1; }
.delta-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.delta-card-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.delta-card-period { color: var(--muted); font-size: 11px; width: 28px; flex-shrink: 0; }
.delta-card-pct { font-size: 11px; margin-left: auto; }
.delta-table thead th { background: var(--bg3); color: var(--muted); font-size: 11px; font-weight: 600; padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); user-select: none; }
.delta-table thead th:hover { color: var(--text); }
.delta-table td { padding: 6px 10px; text-align: center; font-size: 12px; border-bottom: 1px solid var(--border); }
.delta-table .col-coin { text-align: left; }