:root{ --bg:#0f1220; --card:#171a2b; --muted:#9aa3b2; --text:#eef2ff; --accent:#7c5cff; --chip:#232743; --chip-border:#2f355a; --btn-bg:#1f2a55; --btn-text:#eaf0ff; --danger:#d9534f; }
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui, -apple-system, 'Segoe UI', Roboto, Arial;color:var(--text);background:linear-gradient(180deg,#0b1020,#08101a)}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.top{position:sticky;top:0;z-index:5;padding:12px 0}
.layout{display:grid;grid-template-columns:360px 1fr;gap:16px}
.card{background:var(--card);border:1px solid #20264a;border-radius:12px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toolbar{display:flex;gap:8px;align-items:center}
.mode-toggle button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:6px 10px;border-radius:8px;cursor:pointer}
.mode-toggle button.active{background:var(--accent);color:white;border-color:transparent}
.btn{background:var(--btn-bg);color:var(--btn-text);border:none;padding:8px 10px;border-radius:8px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn:hover{transform:translateY(-1px)}
.btn.danger{background:var(--danger);color:white}
.section{margin-bottom:12px}
.section-title{font-weight:600;margin-bottom:8px}
.option-row{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px}
.option-row input{transform:scale(1.05)}
.note{color:#c5cbea;font-size:.86rem;margin-top:6px}
.note-small{font-size:0.78rem;color:#9fb0e6;margin-left:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border:1px solid var(--chip-border);padding:4px 10px;border-radius:999px;font-size:.82rem;color:#cfd6ff}
.results-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.country-card{background:#141836;border:1px solid #222856;border-radius:10px;padding:10px;min-height:56px;display:flex;flex-direction:column;justify-content:center}
.country-name{font-weight:700}
.country-sub{color:var(--muted);font-size:.85rem;margin-top:6px}
.score{font-weight:700;color:#24d0a8}
@media(max-width:980px){.layout{grid-template-columns:1fr}}