:root{
    --void:#05060a;
    --panel:#0c0f1a;
    --panel-2:#11152400;
    --amber:#ffb545;
    --amber-dim:#8a611f;
    --teal:#2dd9c4;
    --text:#edeae3;
    --text-dim:#8890a6;
    --line: rgba(255,181,69,0.18);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    width:100%; height:100%; overflow:hidden;
    background: var(--void);
    color: var(--text);
    font-family:'Inter', sans-serif;
  }
  #app{position:relative; width:100vw; height:100vh;}
  canvas#globe{display:block; width:100%; height:100%; cursor:grab; touch-action:none;}
  canvas#globe.dragging{cursor:grabbing;}
  #toolbar{
    position:fixed; top:0; left:0; right:0; z-index:8;
    display:flex; flex-direction:row; align-items:center; gap:8px;
    padding:12px 20px;
    background: linear-gradient(to bottom, rgba(5,6,10,0.55), transparent);
  }
  .tbtn{
    position:relative;
    width:38px; height:38px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background: rgba(12,15,26,0.75);
    border:1px solid var(--line);
    border-radius:2px;
    color: var(--text-dim);
    cursor:pointer;
    backdrop-filter: blur(6px);
    transition: all .2s;
  }
  .tbtn:hover{ color:var(--amber); border-color:var(--amber); background:rgba(255,181,69,0.08); }
  .tbtn.active{ color:var(--amber); border-color:var(--amber); background:rgba(255,181,69,0.14); }
  .tbtn .icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .tbtn.spinning .icon{ animation: spin 0.9s linear infinite; }
  #toolbar{ --toolbar-h: 62px; }
  #searchPop{
    position:absolute; top:calc(100% + 8px); left:20px;
    opacity:0; pointer-events:none; transform:translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    z-index:9;
  }
  #searchPop.active{ opacity:1; pointer-events:auto; transform:translateY(0); }
  #search{
    background: rgba(12,15,26,0.9);
    border:1px solid var(--line);
    color:var(--text);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    padding:10px 14px;
    border-radius:2px;
    width:220px;
    outline:none;
    backdrop-filter: blur(6px);
    transition: border-color .2s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  #search::placeholder{color:var(--text-dim);}
  #search:focus{border-color: var(--amber);}
  #topbar{
    position:absolute; top:var(--toolbar-h, 62px); left:0; right:0; z-index:5;
    display:flex; align-items:flex-start; justify-content:space-between;
    padding: 10px 28px;
    pointer-events:none;
  }
  #brand{
    font-family:'VT323', monospace;
    font-size:30px;
    letter-spacing:1px;
    color: var(--amber);
    text-shadow: 0 0 12px rgba(255,181,69,0.5);
    display:flex; align-items:baseline; gap:10px;
    pointer-events:auto;
  }
  #brand small{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color: var(--text-dim);
    letter-spacing:2px;
    text-transform:uppercase;
  }
  #statusRight{
    pointer-events:auto;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  #count{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--text-dim);
    letter-spacing:1px;
    white-space:nowrap;
  }
  #filterChips{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:280px; }
  .chip{
    display:flex; align-items:center; gap:6px;
    background: rgba(255,181,69,0.1); border:1px solid var(--amber-dim);
    color:var(--amber);
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.5px;
    padding:5px 8px; border-radius:2px; text-transform:capitalize;
  }
  .chip button{ background:none; border:none; color:var(--amber); cursor:pointer; font-size:11px; line-height:1; padding:0; }
  #loading{
    position:absolute; inset:0; z-index:20;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: var(--void);
    gap:14px;
  }
  #loading .dial{
    width:64px; height:64px; border-radius:50%;
    border:2px solid var(--line);
    border-top-color: var(--amber);
    animation: spin 1s linear infinite;
  }
  #loading p{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:2px; color:var(--text-dim);
    text-transform:uppercase;
  }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  #loading.hidden, #errbox.hidden{ display:none; }
  #errbox{
    position:absolute; inset:0; z-index:21; display:flex; align-items:center; justify-content:center;
    background: var(--void); text-align:center; padding:40px;
  }
  #errbox .box{ max-width:420px; }
  #errbox h2{ font-family:'VT323', monospace; font-size:28px; color:var(--amber); margin-bottom:10px;}
  #errbox p{ color:var(--text-dim); font-size:13px; line-height:1.6; margin-bottom:16px;}
  #errbox button{
    background: rgba(255,181,69,0.1); border:1px solid var(--amber); color:var(--amber);
    padding:10px 18px; border-radius:2px; font-family:'JetBrains Mono',monospace; font-size:12px;
    cursor:pointer; letter-spacing:1px; text-transform:uppercase;
  }
  #tuner{
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
    z-index:6;
    width:min(560px, 92vw);
    background: rgba(12,15,26,0.82);
    border:1px solid var(--line);
    border-radius:4px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(255,181,69,0.03);
    padding:16px 18px;
    opacity:0; pointer-events:none;
    transition: opacity .35s ease, transform .35s ease;
  }
  #tuner.active{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  #tuner-top{ display:flex; align-items:center; gap:14px; }
  #playbtn{
    flex:none; width:46px; height:46px; border-radius:50%;
    border:1px solid var(--amber); background: rgba(255,181,69,0.08);
    color:var(--amber); cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:16px; transition: background .2s;
  }
  #playbtn:hover{ background: rgba(255,181,69,0.18); }
  #meta{ flex:1; min-width:0; }
  #stationName{
    font-family:'VT323', monospace; font-size:26px; line-height:1.1;
    color: var(--amber); text-shadow:0 0 10px rgba(255,181,69,0.35);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #stationSub{
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dim);
    letter-spacing:1px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-transform:uppercase;
  }
  #bars{ display:flex; align-items:flex-end; gap:3px; height:22px; flex:none; }
  #bars span{
    width:3px; background: var(--teal); opacity:0.85; border-radius:1px;
    animation: bar 900ms ease-in-out infinite;
  }
  #bars span:nth-child(1){height:40%; animation-delay:0ms;}
  #bars span:nth-child(2){height:80%; animation-delay:120ms;}
  #bars span:nth-child(3){height:55%; animation-delay:240ms;}
  #bars span:nth-child(4){height:95%; animation-delay:360ms;}
  #bars span:nth-child(5){height:30%; animation-delay:480ms;}
  #bars.paused span{ animation-play-state: paused; opacity:0.25; }
  @keyframes bar{ 0%,100%{ transform: scaleY(0.4);} 50%{ transform: scaleY(1);} }
  #tuner-bottom{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  #vol{ flex:1; accent-color: var(--amber); }
  #closeTuner{
    background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:16px;
    padding:2px 6px;
  }
  #closeTuner:hover{ color: var(--amber); }
  #statusline{
    font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-dim);
    letter-spacing:1px; margin-top:8px; min-height:14px;
  }
  #statusline[data-state="error"]{
    color:var(--amber); cursor:pointer;
    text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
  }
  #hint{
    position:absolute; z-index:5; left:28px; bottom:64px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dim);
    letter-spacing:1px; max-width:220px; line-height:1.6;
    pointer-events:none;
  }
  #starTimer{
    position:absolute; z-index:5; left:28px; bottom:26px;
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--amber);
    letter-spacing:1px; pointer-events:none;
    display:flex; align-items:center; gap:8px;
    transition: color .3s;
  }
  #starTimerValue{ color:var(--amber); font-weight:600; transition: color .3s; }
  #starTimer.flash{ color:var(--amber); }
  #starTimer.flash #starTimerValue{
    color:var(--amber); text-shadow:0 0 10px rgba(255,181,69,0.6);
    animation: starFlashPulse 1.3s ease-in-out infinite;
  }
  @keyframes starFlashPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
  .shooting-star{
    position:fixed; top:0; left:0; z-index:4;
    width:240px; height:2px; border-radius:2px;
    background: linear-gradient(to right, transparent 0%, rgba(190,215,255,0.25) 35%, rgba(255,255,255,0.75) 75%, #ffffff 100%);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.85)) drop-shadow(0 0 10px rgba(170,200,255,0.55));
    pointer-events:none;
  }
  .shooting-star::after{
    content:'';
    position:absolute; top:50%; right:-2px;
    width:5px; height:5px; border-radius:50%;
    background:#ffffff;
    transform:translateY(-50%);
    box-shadow: 0 0 8px 3px rgba(255,255,255,0.95), 0 0 18px 7px rgba(170,200,255,0.55);
  }
  #copyright{
    position:absolute; z-index:5; right:20px; bottom:14px;
    font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-dim);
    letter-spacing:0.5px; opacity:0.6; pointer-events:none;
  }
  #modalOverlay{
    position:fixed; inset:0; z-index:30;
    background: rgba(3,4,8,0.72);
    backdrop-filter: blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition: opacity .2s ease;
  }
  #modalOverlay.active{ opacity:1; pointer-events:auto; }
  #modalBox{
    width:min(480px, 100%); max-height:74vh;
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display:flex; flex-direction:column;
    transform: translateY(8px) scale(0.98);
    transition: transform .2s ease;
  }
  #modalOverlay.active #modalBox{ transform: translateY(0) scale(1); }
  #modalHeader{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line); flex:none;
  }
  #modalTitle{ font-family:'VT323', monospace; font-size:24px; color:var(--amber); letter-spacing:0.5px; }
  #modalClose{ background:none; border:none; color:var(--text-dim); font-size:16px; cursor:pointer; padding:4px 6px; }
  #modalClose:hover{ color:var(--amber); }
  #modalContent{ padding:18px; overflow-y:auto; }
  #modalContent::-webkit-scrollbar{ width:8px; }
  #modalContent::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  .choice-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .choice-btn{
    background: rgba(255,255,255,0.03);
    border:1px solid var(--line);
    color:var(--text);
    font-family:'JetBrains Mono', monospace; font-size:12px;
    padding:8px 12px; border-radius:2px; cursor:pointer;
    text-transform:capitalize; transition: all .15s;
  }
  .choice-btn:hover{ border-color:var(--amber); color:var(--amber); }
  .choice-btn.active{ background:rgba(255,181,69,0.14); border-color:var(--amber); color:var(--amber); }
  .legal-link{ text-decoration:none; display:inline-block; text-transform:none; }
  .pay-detail{ margin-bottom:14px; }
  .pay-label{
    display:block; font-family:'JetBrains Mono', monospace; font-size:10px;
    color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:5px;
  }
  .pay-value-row{ display:flex; align-items:center; gap:8px; }
  .pay-value{
    flex:1; min-width:0; word-break:break-all;
    font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--amber);
    background:rgba(255,181,69,0.08); border:1px solid var(--line);
    padding:8px 10px; border-radius:2px;
  }
  .copy-btn{
    flex:none; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.5px;
    padding:8px 10px; border-radius:2px; cursor:pointer; transition: all .15s;
  }
  .copy-btn:hover{ border-color:var(--amber); color:var(--amber); }
  .back-link{
    display:inline-block; margin-top:6px; background:none; border:none; cursor:pointer;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px;
    color:var(--text-dim); padding:6px 0;
  }
  .back-link:hover{ color:var(--amber); }
  .about-p{ color:var(--text); font-size:14px; line-height:1.7; margin-bottom:14px; }
  .about-note{ color:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace; line-height:1.6; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
  .about-photo {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px auto;
  border: 2px solid rgba(255,255,255,0.15);
}
  @media (max-width: 640px){
    #hint{ display:none; }
    #toolbar{
      flex-direction:column;
      top:14px; left:14px; right:auto;
      padding:0; gap:10px;
      background:none;
    }
    .tbtn{ width:46px; height:46px; }
    .tbtn .icon{ width:21px; height:21px; }
    #closeTuner, #modalClose{ padding:10px 12px; font-size:18px; }
    #searchPop{ top:0; left:calc(100% + 8px); }
    #search{ width:170px; }
    #topbar{
      top:14px; left:72px; right:14px;
      flex-direction:column; align-items:flex-start; gap:8px;
      padding:0;
    }
    #brand{ font-size:24px; }
    #statusRight{ align-items:flex-start; }
    #filterChips{ justify-content:flex-start; max-width:100%; }
    #tuner{ width:min(520px, calc(94vw - 56px)); left:calc(50% + 28px); }
  }