:root{
    --bg:#02030a; --accent:#5ad1ff; --accent2:#ff7a59;
    --panel:rgba(10,16,32,0.82); --panel2:rgba(14,22,42,0.96);
    --panel-border:rgba(120,180,255,0.22);
    --text:#e8f0ff; --muted:#8ea3c8;
    --gov:#5ad1ff; --priv:#ffb15a; --ok:#5affa6; --fail:#ff6b6b;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;}
  #scene{position:fixed;inset:0;}
  canvas{display:block;}
  button{font-family:inherit;}
  a{color:var(--accent);}

  /* ---- top bar ---- */
  #topbar{position:fixed;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;
    justify-content:space-between;gap:12px;padding:12px 18px;pointer-events:none;}
  #brand{pointer-events:auto;}
  #brand h1{margin:0;font-size:clamp(15px,2.4vw,21px);font-weight:800;letter-spacing:.4px;
    background:linear-gradient(90deg,#9fe8ff,#5ad1ff,#ffb15a);-webkit-background-clip:text;
    background-clip:text;color:transparent;}
  #brand small{color:var(--muted);font-size:11.5px;}
  #nav{pointer-events:auto;display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);
    border:1px solid var(--panel-border);backdrop-filter:blur(10px);padding:5px;border-radius:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.45);}
  .navbtn{background:transparent;border:none;color:var(--muted);padding:7px 13px;border-radius:22px;
    cursor:pointer;font-size:13px;font-weight:600;transition:.15s;display:flex;align-items:center;gap:6px;}
  .navbtn:hover{color:var(--text);}
  .navbtn.active{background:linear-gradient(90deg,rgba(90,209,255,.22),rgba(255,122,89,.18));
    color:#fff;box-shadow:inset 0 0 0 1px rgba(120,180,255,.35);}
  @media(max-width:760px){.navbtn span{display:none}.navbtn{padding:8px 11px;font-size:15px}}

  /* ---- hint / prompts ---- */
  #hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;
    background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(8px);
    padding:10px 18px;border-radius:40px;font-size:13.5px;box-shadow:0 8px 30px rgba(0,0,0,.5);
    transition:opacity .5s;display:flex;align-items:center;gap:10px;}
  #hint .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);
    animation:pulse 1.8s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(90,209,255,.6)}70%{box-shadow:0 0 0 12px rgba(90,209,255,0)}100%{box-shadow:0 0 0 0 rgba(90,209,255,0)}}

  #backBtn{position:fixed;top:64px;left:18px;z-index:6;display:none;align-items:center;gap:8px;
    background:var(--panel);border:1px solid var(--panel-border);color:var(--text);
    padding:8px 15px;border-radius:30px;cursor:pointer;font-size:13px;backdrop-filter:blur(8px);}
  #backBtn:hover{border-color:var(--accent);}

  /* ---- globe country markers ---- */
  .marker{position:fixed;z-index:4;transform:translate(-50%,-50%);cursor:pointer;
    pointer-events:auto;display:none;will-change:left,top;}
  .marker .dot{width:13px;height:13px;border-radius:50%;background:var(--accent2);margin:0 auto;
    box-shadow:0 0 0 4px rgba(255,122,89,.22),0 0 16px rgba(255,122,89,.85);
    border:2px solid #fff;transition:transform .15s;}
  .marker .lbl{margin-top:5px;font-size:12px;font-weight:600;white-space:nowrap;
    background:rgba(6,10,22,.85);padding:3px 9px;border-radius:20px;border:1px solid var(--panel-border);
    transform:translateX(-50%);position:relative;left:50%;}
  .marker .cnt{font-size:10px;color:var(--accent2);font-weight:700;}
  .marker:hover .dot{transform:scale(1.4);}
  .marker:hover .lbl{border-color:var(--accent2);}

  /* ---- right country panel ---- */
  #panel{position:fixed;top:0;right:0;height:100%;width:min(440px,93vw);z-index:9;
    background:var(--panel2);border-left:1px solid var(--panel-border);backdrop-filter:blur(14px);
    transform:translateX(105%);transition:transform .45s cubic-bezier(.5,0,.2,1);
    display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.55);}
  #panel.open{transform:translateX(0);}
  #panelHead{padding:22px 22px 16px;border-bottom:1px solid var(--panel-border);position:relative;}
  #panelHead .flag{font-size:34px;}
  #panelHead h2{margin:6px 0 2px;font-size:23px;}
  #panelHead .sub{color:var(--muted);font-size:13px;}
  .xbtn{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;
    border:1px solid var(--panel-border);background:rgba(255,255,255,.05);color:var(--text);
    cursor:pointer;font-size:16px;line-height:1;transition:.15s;}
  .xbtn:hover{background:var(--accent2);border-color:var(--accent2);color:#111;}
  #launches{overflow-y:auto;padding:16px 18px 30px;flex:1;}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:rgba(120,180,255,.25);border-radius:8px}

  /* ---- launch card ---- */
  .launch{border:1px solid var(--panel-border);border-radius:14px;padding:14px 15px;margin-bottom:13px;
    background:rgba(255,255,255,.025);transition:.18s;scroll-margin-top:90px;}
  .launch:hover{border-color:var(--accent);background:rgba(90,209,255,.06);}
  .launch.flash{animation:flash 1.6s ease;}
  @keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--accent2),0 0 26px rgba(255,122,89,.5)}}
  .launch .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  .launch .veh{font-weight:700;font-size:15.5px;}
  .launch .date{font-size:11.5px;color:var(--muted);white-space:nowrap;}
  .launch .ctry{font-size:11.5px;color:var(--muted);}
  .launch .org{font-size:12.5px;margin:3px 0 8px;color:var(--accent);}
  .launch .pay{font-size:13px;margin-bottom:7px;}
  .launch .note{font-size:12.5px;color:var(--muted);line-height:1.5;}
  .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center;}
  .tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
  .tag.gov{background:rgba(90,209,255,.14);color:var(--gov);border:1px solid rgba(90,209,255,.4);}
  .tag.priv{background:rgba(255,177,90,.14);color:var(--priv);border:1px solid rgba(255,177,90,.4);}
  .tag.ok{background:rgba(90,255,166,.13);color:var(--ok);border:1px solid rgba(90,255,166,.4);}
  .tag.fail{background:rgba(255,107,107,.13);color:var(--fail);border:1px solid rgba(255,107,107,.4);}
  .sharebtn{margin-left:auto;background:transparent;border:1px solid var(--panel-border);color:var(--muted);
    border-radius:20px;padding:3px 10px;font-size:11px;cursor:pointer;transition:.15s;}
  .sharebtn:hover{border-color:var(--accent);color:var(--accent);}

  /* ---- overlay modes ---- */
  #overlay{position:fixed;inset:0;z-index:7;display:none;overflow-y:auto;
    background:linear-gradient(180deg,rgba(2,3,10,.72),rgba(2,3,10,.92));backdrop-filter:blur(6px);}
  #overlay.show{display:block;}
  .wrap{max-width:1080px;margin:0 auto;padding:84px 22px 60px;}
  .modehead{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
  .modehead h2{margin:0;font-size:25px;}
  .modesub{color:var(--muted);font-size:14px;margin:0 0 22px;line-height:1.55;}

  /* filters */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center;}
  .filters input,.filters select{background:var(--panel);border:1px solid var(--panel-border);
    color:var(--text);border-radius:24px;padding:9px 15px;font-size:13.5px;outline:none;}
  .filters input{min-width:220px;flex:1;}
  .filters input:focus,.filters select:focus{border-color:var(--accent);}
  #countN{color:var(--muted);font-size:12.5px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}

  /* compare */
  .cmpPick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
  .chip{background:var(--panel);border:1px solid var(--panel-border);color:var(--muted);
    border-radius:24px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;}
  .chip.on{background:linear-gradient(90deg,rgba(90,209,255,.25),rgba(255,122,89,.2));color:#fff;
    border-color:var(--accent);}
  .cmpGrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
  .cmpCard{border:1px solid var(--panel-border);border-radius:16px;padding:20px;background:var(--panel);}
  .cmpCard h3{margin:0 0 2px;font-size:20px;}
  .cmpCard .role{color:var(--muted);font-size:12px;margin-bottom:14px;}
  .stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(120,180,255,.1);
    font-size:13.5px;}
  .stat .v{font-weight:800;}
  .bar{height:7px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px;}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--accent));}

  /* quiz */
  .quizbox{max-width:680px;margin:0 auto;border:1px solid var(--panel-border);border-radius:18px;
    background:var(--panel);padding:26px;}
  .qprog{color:var(--muted);font-size:12.5px;margin-bottom:6px;display:flex;justify-content:space-between;}
  .qtext{font-size:18px;font-weight:600;line-height:1.5;margin:8px 0 18px;}
  .opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.03);
    border:1px solid var(--panel-border);color:var(--text);border-radius:12px;padding:13px 16px;
    margin-bottom:10px;cursor:pointer;font-size:14.5px;transition:.15s;}
  .opt:hover{border-color:var(--accent);}
  .opt.correct{border-color:var(--ok);background:rgba(90,255,166,.12);}
  .opt.wrong{border-color:var(--fail);background:rgba(255,107,107,.12);}
  .opt:disabled{cursor:default;}
  .qexpl{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55;min-height:20px;}
  .qbtn{margin-top:16px;background:linear-gradient(90deg,var(--accent),#3a8fd0);border:none;color:#04121f;
    font-weight:800;padding:11px 22px;border-radius:26px;cursor:pointer;font-size:14px;}
  .qbtn:disabled{opacity:.4;cursor:default;}
  .scorebig{font-size:46px;font-weight:800;text-align:center;
    background:linear-gradient(90deg,#9fe8ff,#ffb15a);-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* assistant */
  .chatbox{max-width:760px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 200px);
    min-height:380px;border:1px solid var(--panel-border);border-radius:18px;background:var(--panel);overflow:hidden;}
  #chatlog{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
  .msg{max-width:88%;padding:11px 15px;border-radius:14px;font-size:13.8px;line-height:1.55;}
  .msg.user{align-self:flex-end;background:linear-gradient(90deg,rgba(90,209,255,.22),rgba(90,209,255,.12));
    border:1px solid rgba(90,209,255,.35);}
  .msg.bot{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--panel-border);}
  .msg.bot b{color:var(--accent);}
  .msg .mini{font-size:12px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid rgba(120,180,255,.12);}
  .suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px;}
  .suggest button{background:rgba(255,255,255,.04);border:1px solid var(--panel-border);color:var(--muted);
    border-radius:18px;padding:6px 12px;font-size:12px;cursor:pointer;}
  .suggest button:hover{border-color:var(--accent);color:var(--text);}
  .chatin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--panel-border);}
  .chatin input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--panel-border);color:var(--text);
    border-radius:24px;padding:11px 16px;font-size:14px;outline:none;}
  .chatin input:focus{border-color:var(--accent);}
  .chatin button{background:var(--accent);border:none;color:#04121f;font-weight:800;border-radius:24px;
    padding:0 20px;cursor:pointer;}

  /* about */
  .about p{color:var(--muted);line-height:1.7;font-size:14.5px;max-width:760px;}
  .about h3{margin:22px 0 6px;font-size:16px;color:var(--text);}
  .legendrow{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted);}
  .legendrow span{display:flex;align-items:center;gap:7px;}
  .legendrow i{width:12px;height:12px;border-radius:3px;display:inline-block;}

  /* toast */
  #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:30;
    background:var(--accent);color:#04121f;font-weight:700;padding:10px 18px;border-radius:24px;
    font-size:13px;opacity:0;transition:.3s;pointer-events:none;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* loader */
  #loader{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:18px;transition:opacity .8s;}
  #loader .ring{width:54px;height:54px;border:3px solid rgba(120,180,255,.2);border-top-color:var(--accent);
    border-radius:50%;animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  #loader p{color:var(--muted);font-size:14px;}