:root{
      --bg:#8fb1c4;
      --bg2:#a8c5d5;
      --panel:#d5ecf6;
      --panel-strong:#f8fdff;
      --text:#17213e;
      --muted:#52647a;
      --accent:#1864f2;
      --accent-2:#6a3df0;
      --ok:#119d66;
      --warn:#d68a08;
      --danger:#db4f59;
      --shadow:0 8px 22px rgba(34, 55, 76, .18);
      --ring:0 0 0 1px rgba(16, 24, 40, .06) inset;
      --radius:8px;
      --cat-alkali:#a43b36;
      --cat-alkaline:#c8952b;
      --cat-transition:#45449a;
      --cat-post-transition:#81798f;
      --cat-metalloid:#3e854c;
      --cat-poly-nonmetal:#5e3b91;
      --cat-diatomic:#97641f;
      --cat-noble:#1f5726;
      --cat-lanthanide:#a64278;
      --cat-actinide:#6e3a86;
      --cat-unknown:#0b0b33;
      --tile-size-sp:84px;
      --tile-size-full:74px;
      --tile-size-quiz:78px;
      --family-g1:#2f80ed;
      --family-g2:#00a6b4;
      --family-g13:#22a06b;
      --family-g14:#c88800;
      --family-g15:#ff8b3d;
      --family-g16:#ff5c7c;
      --family-g17:#e5484d;
      --family-g18:#7b5cff;
      --family-d:#64748b;
      --family-f:#8b5cf6;
      --type-metal:#2f80ed;
      --type-ametal:#17a772;
      --type-semimetal:#c88800;
      --type-noble:#7b5cff;
      --type-synthetic:#8f6b4f;
      --electron-s:#2563eb;
      --electron-p:#16a34a;
      --electron-d:#f59e0b;
      --electron-f:#8b5cf6;
      --hi:#10b981;
      --med:#f59e0b;
      --low:#94a3b8;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 260px),
        var(--bg);
      min-height:100%;
    }
    a{color:inherit}
    .app{
      width:min(1540px, calc(100vw - 24px));
      margin:12px auto 18px;
      display:grid;
      gap:12px;
    }
    .hero{
      position:relative;
      overflow:hidden;
      background:rgba(248,253,255,.72);
      border:1px solid rgba(255,255,255,.48);
      border-radius:8px;
      padding:12px 14px;
      box-shadow:var(--shadow);
    }
    .hero-top{
      display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
    }
    .hero h1{
      margin:0 0 8px;
      font-size:clamp(1.6rem, 2vw + 1rem, 2.6rem);
      line-height:1.05;
      letter-spacing:0;
    }
    .hero p{
      margin:0;
      color:#38495f;
      max-width:880px;
      font-size:.96rem;
      line-height:1.56;
    }
    .badge-row,.chip-row{display:flex; gap:8px; flex-wrap:wrap}
    .hero-badges{margin-bottom:10px}
    .badge,.chip,.mini-badge{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid rgba(16,24,40,.08);
      background:#ffffff;
      color:#2a3a52;
      border-radius:999px;
      padding:7px 10px;
      font-size:.84rem;
      line-height:1;
      backdrop-filter: blur(8px);
    }
    .mini-badge{padding:6px 10px;font-size:.78rem}
    .hero-actions{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top:14px;
    }
    button, .link-btn{
      appearance:none; border:none; cursor:pointer;
      border-radius:8px; padding:10px 12px;
      background:#ffffff;
      color:var(--text); font-weight:700;
      transition:transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease, box-shadow .16s ease;
      border:1px solid rgba(16,24,40,.08);
      box-shadow:var(--ring);
      text-decoration:none;
      display:inline-flex; align-items:center; gap:10px;
    }
    button:hover,.link-btn:hover{transform:translateY(-1px); background:#f9fbff; box-shadow:0 6px 14px rgba(17,24,39,.07)}
    button.primary, .link-btn.primary{background:#1d4ed8; color:#fff; border-color:#1d4ed8}
    button.ghost{background:#ffffff}
    button.small{padding:8px 10px;border-radius:8px;font-size:.86rem}
    input, select{
      width:100%;
      border-radius:8px;
      border:1px solid rgba(16,24,40,.10);
      background:#ffffff;
      color:var(--text);
      padding:10px 12px;
      outline:none;
      box-shadow:var(--ring);
    }
    input::placeholder{color:#8b99b0}
    .tabs{
      display:flex; gap:8px; flex-wrap:wrap;
      background:rgba(248,253,255,.76);
      border:1px solid rgba(255,255,255,.48);
      padding:6px;
      border-radius:8px;
      box-shadow:var(--shadow);
    }
    .tab-btn{
      background:transparent;
      border:1px solid transparent;
      color:#5c6c84;
      padding:10px 12px;
      border-radius:8px;
      font-weight:700;
    }
    .tab-btn.active{
      background:#eff5ff;
      border-color:rgba(29,78,216,.12);
      color:#123169;
    }
    .tab-panel{
      display:none;
      animation:fade .2s ease;
    }
    .tab-panel.active{display:block}
    @keyframes fade{from{opacity:.6; transform:translateY(6px)} to{opacity:1; transform:none}}
    .panel{
      background:rgba(213,236,246,.88);
      border:1px solid rgba(255,255,255,.42);
      border-radius:8px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    
    .panel-pad{padding:18px}
    .soft-divider{height:1px;background:rgba(16,24,40,.07);margin:0 18px}

    .explorer-layout{display:block}
    .left-col{
      display:grid;
      grid-template-rows:auto auto auto;
    }
    .controls{
      padding:14px;
      display:grid; gap:10px;
      border-top:1px solid rgba(255,255,255,.46);
      background:rgba(235,248,253,.72);
    }
    .toolbar{
      display:grid;
      grid-template-columns:minmax(220px, 1fr) repeat(4, minmax(138px, 180px));
      gap:10px;
      align-items:center;
    }
    .toggle-row{
      display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    }
    .segmented{
      display:flex; gap:6px; flex-wrap:wrap;
    }
    .segmented button{
      padding:8px 10px;
      border-radius:8px;
      background:#ffffff;
      color:#50627e;
      font-weight:700;
      border:1px solid rgba(16,24,40,.08);
    }
    .segmented button.active{background:#eaf2ff;color:#153977;border-color:rgba(29,78,216,.16)}
    .stats{
      display:grid;
      grid-template-columns:repeat(4, minmax(120px, 1fr));
      gap:8px;
    }
    .stat{
      padding:10px 12px;
      border-radius:8px;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(255,255,255,.54);
    }
    .stat .v{font-size:1.25rem;font-weight:800;margin-top:4px;color:#15325b}
    .drawer-kicker{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
    .drawer-heading{font-weight:900;font-size:1.15rem;margin-top:6px}
    .drawer-title{margin:10px 0 4px;font-size:2rem;line-height:1.05}
    .compare-title{margin:0}
    .section-span-full{grid-column:1/-1}
    .quiz-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}
    .stats-compact{grid-template-columns:1fr 1fr}
    .table-wrap{
      position:relative;
      padding:10px 12px 14px;
      overflow:auto;
      scrollbar-gutter:stable;
      background:transparent;
    }
    .table-preview-mobile{
      display:none;
      margin:12px 12px 0;
    }
    .periodic{
      display:grid;
      gap:6px;
      align-items:stretch;
    }
    .periodic.scope-sp{
      grid-template-columns:46px repeat(8, var(--tile-size-sp));
      grid-template-rows:36px repeat(7, var(--tile-size-sp));
      grid-auto-rows:var(--tile-size-sp);
      min-width:0;
    }
    .periodic.scope-full{
      grid-template-columns:46px repeat(18, var(--tile-size-full));
      grid-template-rows:36px repeat(9, var(--tile-size-full));
      grid-auto-rows:var(--tile-size-full);
      min-width:0;
    }
    .axis, .axis-period{
      display:flex; align-items:center; justify-content:center;
      border-radius:8px;
      border:1px solid transparent;
      color:#1c2344;
      background:transparent;
      font-weight:900;
      text-align:center;
      min-height:34px;
      padding:6px;
      font-size:1.05rem;
      line-height:1.2;
      overflow:hidden;
      overflow-wrap:anywhere;
    }
    .axis small,.axis-period small{display:block;color:#2f3a58;font-size:.58rem;font-weight:800}
    .axis-period{font-size:.72rem;color:rgba(28,35,68,.72)}
    .empty{
      min-height:72px;
      border:0;
      background:transparent;
    }
    .el{
      position:relative;
      aspect-ratio:1;
      min-height:0;
      border-radius:4px;
      padding:5px 6px 6px;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 44%),
        var(--tile-bg, var(--tile-accent, #45449a));
      color:#fff;
      box-shadow:
        4px 4px 0 rgba(43,76,91,.36),
        0 1px 0 rgba(255,255,255,.24) inset;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      transition:transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
      isolation:isolate;
    }
    .el::before{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:3px;
      background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%, rgba(0,0,0,.12));
      z-index:0;
      opacity:.86;
      pointer-events:none;
    }
    .el:hover{
      transform:translate(-1px, -2px);
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 44%),
        var(--tile-bg, var(--tile-accent, #45449a));
      border-color:rgba(255,255,255,.48);
      filter:saturate(1.08) brightness(1.05);
      box-shadow:
        6px 6px 0 rgba(43,76,91,.36),
        0 1px 0 rgba(255,255,255,.28) inset;
    }
    .el.hidden-match{display:none}
    .el.selected{outline:3px solid rgba(255,255,255,.95); outline-offset:2px}
    .el.compare{box-shadow:0 0 0 3px rgba(255,224,89,.9), 5px 5px 0 rgba(43,76,91,.36)}
    .el.favorite::after{
      content:"★";
      position:absolute; top:10px; right:10px;
      font-size:.8rem;
      color:#fff2a8;
      text-shadow:0 0 18px rgba(255,216,106,.6);
    }
    .el > *{position:relative;z-index:1}
    .el .topline{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:4px;
      min-width:0;
    }
    .el .flags{
      display:flex;
      align-items:center;
      gap:4px;
      flex:0 0 auto;
      margin-top:1px;
    }
    .el .flag{
      display:inline-flex;
      width:var(--tile-icon-size, 10px);
      height:var(--tile-icon-size, 10px);
      flex:0 0 auto;
      opacity:.94;
      color:#fff;
      align-items:center;
      justify-content:center;
    }
    .el .flag svg{width:100%;height:100%;display:block}
    .el .num{font-size:var(--tile-num-font-size, .74rem);color:rgba(255,255,255,.88);font-weight:900;line-height:1}
    .el .main{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:5px;
      align-items:center;
      min-height:0;
      flex:1 1 auto;
    }
    .el .text{
      min-width:0;
      display:grid;
      align-content:center;
      justify-items:stretch;
      gap:2px;
    }
    .el .symbol{
      font-size:var(--tile-symbol-font-size, 1.5rem);
      font-weight:900;
      line-height:.9;
      letter-spacing:0;
      text-shadow:0 1px 2px rgba(0,0,0,.22);
      justify-self:start;
      width:100%;
      text-align:left;
    }
    .el .name{
      font-size:var(--tile-name-font-size, .59rem);
      color:rgba(255,255,255,.93);
      line-height:1.02;
      max-width:100%;
      font-weight:800;
      text-shadow:0 1px 1px rgba(0,0,0,.18);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      width:100%;
      text-align:left;
    }
    .el .shells{
      min-width:12px;
      display:grid;
      justify-items:end;
      align-content:center;
      gap:1px;
      font-size:var(--shell-font-size, 6px);
      line-height:1;
      font-weight:900;
      color:rgba(255,255,255,.9);
      text-shadow:0 1px 1px rgba(0,0,0,.2);
    }
    .el .shells span{
      display:block;
      min-width:1.4em;
      text-align:right;
    }
    .el .meta{
      display:flex; justify-content:space-between; gap:6px; align-items:flex-end;
      color:rgba(255,255,255,.78); font-size:.62rem; font-weight:900;
    }
    .el .meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .el.range-tile .main{grid-template-columns:1fr}
    .el.range-tile .text{justify-items:stretch}
    .el.range-tile .symbol{font-size:1.42rem;text-align:left}
    .el.range-tile .name{font-size:.56rem;white-space:normal;text-align:left}
    .el.range-tile .shells{display:none}
    .legend{
      margin:0 12px 14px;
      padding:14px;
      border:1px solid rgba(99,134,154,.32);
      border-bottom-color:rgba(42,71,94,.34);
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
      gap:10px 14px;
      color:#273353;
      background:rgba(221,244,252,.86);
      border-radius:8px;
      box-shadow:5px 5px 0 rgba(43,76,91,.26);
    }
    .legend-item{
      display:flex; align-items:center; gap:8px;
      min-height:34px;
      padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.56); font-size:.9rem;
      font-weight:700;
    }
    .legend-item input{
      width:14px;
      height:14px;
      margin:0;
      accent-color:#1d4ed8;
      box-shadow:none;
    }
    .legend-item a{color:inherit;text-decoration:none}
    .legend-item a:hover{text-decoration:underline}
    .grid-dock{
      position:relative;
      z-index:2;
      min-width:0;
      min-height:0;
      align-self:stretch;
    }
    .legend-dock,
    .hover-dock{
      height:100%;
      min-height:0;
      border-radius:12px;
      overflow:hidden;
    }
    .legend-dock{
      box-shadow:none;
    }
    .legend-dock-panel{
      height:100%;
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      grid-auto-rows:minmax(0, 1fr);
      gap:6px;
      align-content:stretch;
      padding:4px 4px 4px 0;
      border-radius:10px;
      background:transparent;
      border:0;
    }
    .legend-dock-item{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:5px;
      align-items:center;
      min-width:0;
      min-height:0;
      padding:3px 6px;
      border-radius:8px;
      background:var(--legend-dock-color, transparent);
      border:1px solid rgba(255,255,255,.18);
      color:#fff;
      font-size:.58rem;
      line-height:1.05;
      font-weight:800;
      box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
    }
    .legend-dock-item input{
      width:12px;
      height:12px;
      margin:0;
      accent-color:#ffffff;
      box-shadow:none;
      filter:saturate(.85);
    }
    .legend-dock-item a{
      min-width:0;
      color:inherit;
      text-decoration:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .legend-dock-item a:hover{text-decoration:underline;color:#ffffff}
    .legend-dock .swatch{display:none}
    .hover-dock{
      background:linear-gradient(180deg, rgba(240,247,252,.98), rgba(226,238,247,.96));
      border:1px solid rgba(73,93,118,.18);
      box-shadow:4px 6px 0 rgba(43,76,91,.14);
    }
    .hover-dock .tooltip-preview{
      height:100%;
      min-height:0;
      grid-template-columns:minmax(108px, .82fr) minmax(0, 1.14fr);
      align-items:stretch;
      gap:12px;
      padding:10px 12px;
    }
    .hover-dock .tooltip-element{
      min-height:0;
    }
    .state-dock{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      grid-template-rows:repeat(2, minmax(0, 1fr));
      gap:2px 12px;
      align-content:center;
      justify-items:start;
      padding:2px 2px 0 8px;
      color:#20314a;
      font-size:.62rem;
      font-weight:800;
      line-height:1.05;
      background:transparent;
      border:0;
      box-shadow:none;
    }
    .state-dock-item{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-width:0;
      white-space:nowrap;
    }
    .state-dock-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:12px;
      height:12px;
      color:#20314a;
      flex:0 0 auto;
    }
    .state-dock-icon svg{
      width:100%;
      height:100%;
      display:block;
    }
    .series-guide{
      position:relative;
      border-radius:6px;
      min-height:0;
    }
    .series-guide-art{
      position:absolute;
      inset:10px 8px 10px 8px;
      width:calc(100% - 16px);
      height:calc(100% - 20px);
      overflow:visible;
    }
    .series-guide-line{
      fill:none;
      stroke:rgba(90,110,132,.82);
      stroke-width:3;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:5 5;
    }
    .series-guide-arrow{
      fill:none;
      stroke:rgba(90,110,132,.82);
      stroke-width:3;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .series-guide-start{fill:rgba(90,110,132,.42)}
    .series-guide-label{
      position:absolute;
      right:6px;
      top:8px;
      padding:2px 5px;
      border-radius:999px;
      color:rgba(32,49,74,.72);
      background:rgba(255,255,255,.38);
      font-size:.62rem;
      font-weight:900;
      letter-spacing:.04em;
    }
    .swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(16,24,40,.14);box-shadow:2px 2px 0 rgba(43,76,91,.18)}
    .drawer{
      position:fixed;
      inset:0;
      z-index:900;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:rgba(15,23,42,.38);
    }
    .drawer.open{display:flex}
    .drawer-card{
      width:min(940px, 96vw);
      max-height:min(880px, 92vh);
      overflow:auto;
      background:#ffffff;
      border:1px solid rgba(16,24,40,.10);
      border-radius:12px;
      box-shadow:0 26px 70px rgba(15,23,42,.24);
    }
    .drawer-header{
      padding:14px;
      border-bottom:1px solid rgba(16,24,40,.07);
      display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
      background:#ffffff;
      position:sticky;
      top:0;
      z-index:2;
    }
    .drawer-empty{
      margin:auto;
      text-align:center;
      padding:26px;
      color:#6b7b93;
      max-width:320px;
    }
    .drawer-content{display:none; padding:14px; gap:12px; flex-direction:column; overflow:auto}
    .drawer-content.active{display:flex}
    .symbol-card{
      --tile-accent:#1d4ed8;
      display:grid;
      grid-template-columns:minmax(128px, 170px) minmax(0,1fr);
      gap:16px;
      align-items:stretch;
      border-radius:8px;
      background:linear-gradient(135deg, color-mix(in srgb, var(--tile-accent) 13%, #ffffff), #f8fafc 62%);
      border:1px solid rgba(16,24,40,.08);
      border-left:6px solid var(--tile-accent);
      padding:14px;
    }
    .symbol-mark{
      aspect-ratio:1;
      border-radius:8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 44%),
        var(--tile-accent);
      border:1px solid rgba(255,255,255,.22);
      box-shadow:6px 6px 0 rgba(43,76,91,.22), 0 1px 0 rgba(255,255,255,.2) inset;
      padding:12px;
      display:grid;
      align-content:space-between;
      min-width:0;
      color:#fff;
    }
    .symbol-mark .atomic-number{font-size:.86rem;font-weight:900;color:rgba(255,255,255,.88)}
    .symbol-mark .symbol-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:8px;
    }
    .symbol-mark .symbol-icons{
      display:flex;
      gap:6px;
    }
    .symbol-mark .symbol-icons .flag{
      width:16px;
      height:16px;
    }
    .symbol-mark .symbol-main{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
    }
    .symbol-mark .symbol{
      font-size:clamp(3rem, 8vw, 5.8rem);
      line-height:.9;
      font-weight:900;
      letter-spacing:0;
      color:#fff;
      text-align:right;
    }
    .symbol-mark .element-name{font-size:.92rem;font-weight:800;color:#fff;overflow-wrap:anywhere;text-align:left}
    .symbol-mark .symbol-shells{
      display:grid;
      gap:3px;
      justify-items:end;
      font-size:.84rem;
      line-height:1;
      font-weight:900;
      color:rgba(255,255,255,.92);
    }
    .symbol-card-details{
      display:grid;
      gap:8px;
      align-content:center;
      min-width:0;
    }
    .symbol-card-details .headline{font-size:1.08rem;font-weight:900;color:#142033}
    .symbol-card-details .line{color:#52637b;line-height:1.45;font-weight:700;overflow-wrap:anywhere}
    .info-grid{
      display:grid; gap:8px;
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .info-card{
      padding:12px;
      border-radius:8px;
      background:#f9fbff;
      border:1px solid rgba(16,24,40,.07);
    }
    .info-card .k{font-size:.76rem;color:#6c7d97;text-transform:uppercase;letter-spacing:.08em}
    .info-card .v{margin-top:6px;font-weight:800}
    .story{
      padding:12px;
      border-radius:8px;
      background:#f9fbff;
      border:1px solid rgba(16,24,40,.07);
      line-height:1.65;
      color:#20314a;
    }
    .story h3{margin:0 0 10px;font-size:1rem}
    .quick-links{display:flex; flex-wrap:wrap; gap:10px}
    .compare-box{
      display:none;
      margin-top:8px;
      padding:12px;
      border-radius:8px;
      background:#f9fbff;
      border:1px solid rgba(16,24,40,.08);
    }
    .compare-box.active{display:block}
    .compare-grid{
      display:grid;
      grid-template-columns:180px repeat(2, minmax(0,1fr));
      gap:8px;
      margin-top:12px;
      font-size:.95rem;
    }
    .compare-grid > div{
      background:#ffffff;
      padding:9px 10px;
      border-radius:8px;
      border:1px solid rgba(16,24,40,.06);
    }
    .section-grid{
      display:grid; gap:12px;
      grid-template-columns:repeat(2, minmax(0,1fr));
      padding:14px;
    }
    .card{
      background:#ffffff;
      border:1px solid rgba(16,24,40,.07);
      border-radius:8px;
      padding:14px;
      box-shadow:var(--shadow);
    }
    .card h2,.card h3{margin:0 0 10px}
    .family-list, .period-list{
      display:grid; gap:10px;
    }
    .family{
      padding:12px;
      border-radius:8px;
      border:1px solid rgba(16,24,40,.07);
      background:#f9fbff;
    }
    .family h3{margin:0 0 8px; display:flex; justify-content:space-between; gap:12px; align-items:center}
    .elements-inline{
      display:flex; flex-wrap:wrap; gap:8px;
      margin-top:10px;
    }
    .pill{
      padding:7px 9px; border-radius:999px;
      background:#ffffff;
      border:1px solid rgba(16,24,40,.07);
      font-size:.86rem;
    }
    .trend-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      padding:14px;
    }
    .trend{
      padding:14px;
      border-radius:8px;
      border:1px solid rgba(16,24,40,.08);
      background:#ffffff;
      min-width:0;
    }
    .trend-map-wrap{
      overflow:auto;
      scrollbar-gutter:stable;
      max-width:100%;
      border-radius:8px;
      background:#f8fafc;
      margin-top:12px;
      border:1px solid rgba(16,24,40,.06);
    }
    .trend-map{
      position:relative;
      display:grid;
      grid-template-columns:repeat(18, minmax(22px, 1fr));
      grid-auto-rows:26px;
      gap:3px;
      min-width:560px;
      padding:10px;
      isolation:isolate;
    }
    .trend-cell{
      border-radius:4px;
      border:1px solid rgba(15,23,42,.12);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.62rem;
      font-weight:900;
      color:#102033;
      box-shadow:0 1px 4px rgba(15,23,42,.05);
      z-index:1;
    }
    .trend-cell.no-value{opacity:.42;background:#eef2f7!important}
    .trend-arrows{
      position:absolute;
      inset:10px;
      width:calc(100% - 20px);
      height:calc(100% - 20px);
      z-index:2;
      pointer-events:none;
      overflow:visible;
    }
    .trend-key{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:10px;
      color:#52637b;
      font-size:.82rem;
      font-weight:800;
    }
    .trend-ramp{
      flex:1;
      height:9px;
      border-radius:999px;
      border:1px solid rgba(16,24,40,.10);
      background:linear-gradient(90deg, #edf2f7, #8bd3dd, #f97316);
    }
    .trend-ramp.electro{background:linear-gradient(90deg, #f8fafc, #a7f3d0, #2563eb)}
    .trend-ramp.energy{background:linear-gradient(90deg, #f8fafc, #fde68a, #7c3aed)}
    .trend small{display:block;color:var(--muted);line-height:1.6}
    .quiz-layout{
      display:grid;
      grid-template-columns:320px minmax(0,1fr);
      gap:12px;
      padding:14px;
    }
    .quiz-card{
      background:#ffffff;
      border:1px solid rgba(16,24,40,.08);
      border-radius:8px;
      padding:14px;
      display:grid;
      gap:16px;
      align-self:start;
      position:sticky;
      top:12px;
    }
    .quiz-status{
      font-size:2rem;
      font-weight:900;
      letter-spacing:0;
    }
    .quiz-grid{
      display:grid;
      grid-template-columns:44px repeat(8, var(--tile-size-quiz));
      grid-auto-rows:var(--tile-size-quiz);
      gap:6px;
      min-width:0;
    }
    .quiz-wrap{overflow:auto}
    .hint{
      color:var(--muted);
      line-height:1.65;
      font-size:.95rem;
    }
    .toast{
      position:fixed;
      right:18px; bottom:18px;
      background:rgba(17,24,39,.96);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:var(--shadow);
      border-radius:8px;
      padding:14px 16px;
      min-width:260px;
      max-width:min(92vw, 420px);
      transform:translateY(20px);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      z-index:999;
    }
    .toast.show{opacity:1; transform:none}
    .toast strong{display:block;margin-bottom:4px}
    .footer-note{
      color:#617089;
      line-height:1.7;
      font-size:.92rem;
    }
    [data-color-swatch]{border-left:4px solid transparent}
    .tooltip-preview{
      --preview-color:#45449a;
      display:grid;
      gap:10px;
      padding:10px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--preview-color) 16%, #ffffff 84%), transparent 62%),
        linear-gradient(180deg, rgba(244,249,253,.92), rgba(232,240,248,.88));
      min-width:0;
    }
    .tooltip-element{
      min-height:102px;
      border-radius:8px;
      padding:9px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 44%),
        var(--preview-color);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:4px 4px 0 rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.22) inset;
      display:grid;
      gap:10px;
      align-content:space-between;
      color:#fff;
      overflow:hidden;
    }
    .tooltip-element .preview-topline{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:8px;
    }
    .tooltip-element .preview-icons{
      display:flex;
      gap:6px;
    }
    .tooltip-element .preview-icons .flag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:14px;
      height:14px;
    }
    .tooltip-element .preview-icons .flag svg,
    .symbol-mark .symbol-icons .flag svg{
      width:100%;
      height:100%;
      display:block;
    }
    .tooltip-element .preview-main{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
      align-items:center;
      min-height:0;
    }
    .tooltip-element .preview-text{
      min-width:0;
      display:grid;
      gap:4px;
      justify-items:stretch;
    }
    .tooltip-element .preview-symbol{
      font-size:clamp(1.8rem, 3.1vw, 2.55rem);
      line-height:.9;
      font-weight:900;
      letter-spacing:0;
      text-shadow:0 1px 2px rgba(0,0,0,.22);
      justify-self:end;
      text-align:right;
    }
    .tooltip-element .preview-name{
      font-size:.78rem;
      line-height:1.05;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      width:100%;
      text-align:left;
    }
    .tooltip-element .preview-number{font-size:.88rem;font-weight:900;color:rgba(255,255,255,.88)}
    .tooltip-element .preview-shells{
      display:grid;
      gap:2px;
      justify-items:end;
      font-size:.78rem;
      line-height:1;
      font-weight:900;
      color:rgba(255,255,255,.92);
    }
    .tooltip-element .preview-shells span{
      min-width:1.4em;
      text-align:right;
    }
    .tooltip-element .preview-footer{
      font-size:.72rem;
      font-weight:800;
      line-height:1.2;
      color:rgba(255,255,255,.92);
    }
    .tooltip-body{
      min-width:0;
      display:grid;
      gap:8px;
      align-content:start;
    }
    .tooltip-title{font-size:1rem;font-weight:900;line-height:1.15;color:#20314a}
    .tooltip-subtitle{color:#556680;font-weight:800}
    .tooltip-facts{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:7px;
    }
    .tooltip-fact{
      min-width:0;
      border-radius:6px;
      padding:6px 7px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(92,111,136,.14);
    }
    .tooltip-fact span{
      display:block;
      color:#6c7b90;
      font-size:.6rem;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .tooltip-fact strong{
      display:-webkit-box;
      margin-top:2px;
      color:#20314a;
      font-size:.75rem;
      line-height:1.15;
      overflow:hidden;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .tooltip-note{
      grid-column:1/-1;
      color:#516276;
      font-size:.73rem;
      line-height:1.4;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .muted{color:var(--muted)}
    .tight{margin:0}
    .split{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
    @media (max-width:1180px){
      .toolbar{grid-template-columns:1fr 1fr}
      .stats{grid-template-columns:repeat(2, minmax(120px,1fr))}
      .quiz-layout,.section-grid,.trend-grid{grid-template-columns:1fr}
      .quiz-card{position:static}
    }
    @media (max-width:760px){
      .app{width:min(100vw - 14px, 1440px); margin:8px auto 16px}
      .hero{padding:14px}
      .toolbar{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr 1fr}
      .hover-dock-mobile .tooltip-preview{grid-template-columns:1fr !important;padding:10px}
      .hover-dock-mobile .tooltip-element{min-height:138px}
      .hover-dock-mobile .tooltip-body{gap:8px}
      .hover-dock-mobile .tooltip-facts{grid-template-columns:repeat(2, minmax(0,1fr))}
      .symbol-card{grid-template-columns:1fr}
      .symbol-mark{width:min(170px, 100%); justify-self:center}
      .info-grid,.compare-grid{grid-template-columns:1fr}
      .compare-grid>div:first-child{font-weight:800}
      .compare-grid>div{min-height:unset}
      .state-dock{display:none}
    }