:root{
    --bg:#0b0d12;
    --panel:#12151c;
    --border:#262a33;
    --text:#d1d4dc;
    --text-dim:#7c8291;
    --accent:#3d7bf5;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;
    background:var(--bg);
    font-family: Arial, "Segoe UI", Helvetica, sans-serif;
    color:var(--text);
  }
  body{
    display:flex;
    flex-direction:column;
  }

  .topbar{
    background:var(--panel);
    border-bottom:1px solid var(--border);
    padding:14px 22px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    flex-shrink:0;
  }
  .topbar-left{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-logo{
    width:38px;
    height:38px;
    border-radius:6px;
    flex-shrink:0;
    display:block;
  }
  .topbar h1{
    margin:0;
    font-size:22px;
    font-weight:800;
    color:#fff;
  }
  .topbar .sub{
    margin-top:4px;
    font-size:13px;
    color:var(--text-dim);
  }
  .topbar-right{
    text-align:right;
    font-size:12px;
    color:var(--text-dim);
  }
  .status-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    font-size:13px;
    color:var(--text-dim);
  }
  .status-row #clock{
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .live-dot{
    width:8px;height:8px;border-radius:50%;background:#2ecc71;
    box-shadow:0 0 6px #2ecc71;
    display:inline-block;margin-right:6px;
    animation:pulse 1.6s infinite;
  }
  @keyframes pulse{0%{opacity:1;}50%{opacity:.35;}100%{opacity:1;}}

  .status-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:20px;
    letter-spacing:0.3px;
    margin-right:8px;
  }
  .status-badge.static{ background:rgba(124,130,145,0.18); color:var(--text-dim); }
  .status-badge.live{ background:rgba(46,204,113,0.16); color:#3ecf71; }
  .status-badge.error{ background:rgba(255,92,92,0.16); color:#ff5c5c; }
  .status-dot{ width:6px;height:6px;border-radius:50%;background:currentColor; }
  .status-badge.live .status-dot{ animation:pulse 1.6s infinite; }

  .refresh-btn{
    background:var(--panel);
    border:1px solid var(--border);
    color:var(--text-dim);
    border-radius:5px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    margin-left:8px;
  }
  .refresh-btn:hover{ color:#fff; border-color:var(--accent); }
  .refresh-btn:disabled{ opacity:.5; cursor:default; }

  .list-view-btn{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#fff;
    border-radius:5px;
    padding:4px 12px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    margin-left:8px;
    white-space:nowrap;
  }
  .list-view-btn:hover{ background:#2f66d6; }

  /* ===== Жагсаалтаар харах — modal ===== */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    width:100%;
    max-width:900px;
    max-height:88vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  .modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    gap:12px;
    flex-wrap:wrap;
  }
  .modal-header h2{
    margin:0;
    font-size:16px;
    color:#fff;
    white-space:nowrap;
  }
  .modal-search{
    flex:1;
    min-width:140px;
    padding:6px 10px;
    background:#000;
    border:1px solid var(--border);
    border-radius:5px;
    color:#fff;
    font-size:12.5px;
  }
  .modal-search::placeholder{ color:#565b66; }
  .modal-close{
    background:none;
    border:none;
    color:var(--text-dim);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:2px 6px;
  }
  .modal-close:hover{ color:#fff; }
  .modal-body{
    overflow-y:auto;
    flex:1;
  }
  .modal-table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
  }
  .modal-table thead th{
    position:sticky;
    top:0;
    background:#181c24;
    color:var(--text-dim);
    text-align:right;
    font-weight:700;
    padding:9px 12px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
    z-index:1;
  }
  .modal-table thead th:first-child,
  .modal-table thead th:nth-child(2){ text-align:left; }
  .modal-table tbody td{
    padding:7px 12px;
    text-align:right;
    border-bottom:1px solid #1b1e26;
    white-space:nowrap;
    color:var(--text);
  }
  .modal-table tbody td:first-child,
  .modal-table tbody td:nth-child(2){ text-align:left; }
  .modal-table tbody tr:hover{ background:#181c24; }
  .modal-table .m-sym{ font-weight:800; color:#fff; }
  .modal-table .m-name{ color:var(--text-dim); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
  .modal-table .m-name-pos{ color:#3ecf71; }
  .modal-table .m-name-neg{ color:#ff5c5c; }
  .modal-table .m-name-flat{ color:#5b8def; }
  .modal-table .m-chg-pos{ color:#3ecf71; font-weight:700; }
  .modal-table .m-chg-neg{ color:#ff5c5c; font-weight:700; }
  .modal-table .m-chg-flat{ color:#767c88; }
  .modal-table .traded-tag{
    display:inline-block;
    font-size:9.5px;
    font-weight:700;
    color:#3ecf71;
    background:rgba(46,204,113,0.14);
    border-radius:3px;
    padding:1px 5px;
    margin-left:6px;
    vertical-align:middle;
  }
  .modal-footer{
    padding:8px 18px;
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--text-dim);
    flex-shrink:0;
  }

  .legend-bar{
    background:var(--panel);
    border-bottom:1px solid var(--border);
    padding:10px 22px;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--text-dim);
    flex-shrink:0;
  }
  .legend-title{color:var(--text-dim);font-weight:600;white-space:nowrap;margin-right:4px;}
  .legend-item{display:flex;align-items:center;gap:5px;white-space:nowrap;}
  .legend-swatch{width:14px;height:14px;border-radius:2px;border:1px solid rgba(255,255,255,0.15);}

  .error-banner{
    display:none;
    background:rgba(255,92,92,0.13);
    border-bottom:1px solid rgba(255,92,92,0.35);
    color:#ff8a8a;
    padding:8px 22px;
    font-size:12.5px;
    font-weight:600;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .error-banner.show{ display:flex; }

  .missing-banner{
    display:none;
    background:rgba(61,123,245,0.12);
    border-bottom:1px solid rgba(61,123,245,0.35);
    color:#8fb4f7;
    padding:8px 22px;
    font-size:12px;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .missing-banner.show{ display:flex; }

  .map-wrap{
    position:relative;
    flex:1 1 auto;
    min-height:320px;
    background:#000;
    overflow:hidden;
  }
  #treemap{
    position:relative;
    width:100%;
    height:100%;
  }

  .leaf{
    position:absolute;
    box-sizing:border-box;
    border:1px solid rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:filter .08s;
    overflow:hidden;
  }
  .leaf:hover{
    filter:brightness(1.28);
    z-index:20;
  }
  .leaf .sym{
    font-weight:800;
    color:#fff;
    line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
  }
  .leaf .chg{
    color:#fff;
    font-weight:600;
    line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
  }
  .leaf .price{
    color:rgba(255,255,255,0.88);
    line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
  }

  .tooltip{
    position:fixed;
    z-index:1000;
    background:#1b1f27;
    border:1px solid #000;
    border-radius:6px;
    padding:10px 12px;
    font-size:12px;
    color:#d1d4dc;
    pointer-events:none;
    box-shadow:0 8px 22px rgba(0,0,0,.55);
    display:none;
    min-width:210px;
  }
  .tooltip .t-sym{font-size:16px;font-weight:800;color:#fff;}
  .tooltip .t-name{color:var(--text-dim);font-size:11px;margin:2px 0 6px 0;}
  .tooltip .t-row{display:flex;justify-content:space-between;margin-top:3px;gap:16px;}
  .tooltip .t-row span:first-child{color:var(--text-dim);}
  .tooltip .t-chg-pos{color:#3ecf71;font-weight:700;}
  .tooltip .t-chg-neg{color:#ff5c5c;font-weight:700;}
  .tooltip .t-chg-flat{color:#9aa0ab;font-weight:700;}

  footer{
    background:var(--panel);
    border-top:1px solid var(--border);
    padding:8px 22px;
    font-size:11px;
    color:var(--text-dim);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
    flex-shrink:0;
  }

  /* ===== Жижиг дэлгэц (утас, нарийн tablet) ===== */
  @media (max-width:640px){
    .topbar{ padding:12px 14px; }
    .topbar h1{ font-size:18px; }
    .topbar .sub{ font-size:11.5px; }
    .brand-logo{ width:32px; height:32px; }
    .status-row{ justify-content:flex-start; font-size:12px; }
    .legend-bar{ padding:8px 14px; gap:10px; font-size:10px; }
    .legend-swatch{ width:12px; height:12px; }
    footer{ padding:6px 14px; font-size:10px; }
    footer span{ width:100%; }
  }