:root { --ink:#18231d; --paper:#f5f4ee; --lime:#c8ff67; --violet:#7c64e8; --line:#d7d8cf; --muted:#687168; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,sans-serif; }
main { width:min(1160px, calc(100% - 40px)); margin:auto; padding:54px 0 80px; }
header { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:42px; border-bottom:1px solid var(--ink); }
.eyebrow { margin:0 0 12px; font:500 11px/1 DM Mono,monospace; text-transform:uppercase; letter-spacing:.14em; }
h1 { font-size:clamp(58px,10vw,132px); line-height:.75; letter-spacing:-.08em; margin:0; }
h1 em { color:var(--violet); font-style:normal; }
.header-meta { font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.live-dot { display:inline-block; width:8px; height:8px; background:#64c82f; border-radius:50%; margin-right:7px; box-shadow:0 0 0 4px #64c82f22; }
.toolbar { display:flex; justify-content:space-between; padding:22px 0; }
.toolbar span { display:block; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; margin-bottom:5px; }
.toolbar strong, select { font-size:14px; }
select { background:transparent; border:0; color:var(--ink); font-weight:700; cursor:pointer; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card { min-height:330px; padding:28px; border-radius:5px; display:flex; flex-direction:column; }
.card.ios { background:var(--lime); }
.card.android { background:var(--violet); color:white; }
.platform { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.platform span { font-weight:800; }
code { font-family:DM Mono,monospace; font-size:11px; opacity:.75; overflow:hidden; text-overflow:ellipsis; }
.rank { font-size:136px; letter-spacing:-.09em; font-weight:800; line-height:.9; margin-top:auto; }
.rank::before { content:'#'; font-size:30px; vertical-align:top; margin-right:7px; }
.card p { margin:4px 0 18px; font-size:12px; }
.movement { padding-top:14px; border-top:1px solid currentColor; font:500 11px DM Mono,monospace; text-transform:uppercase; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card { min-height:168px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#ffffff66; box-shadow:0 8px 28px #18231d08; display:flex; flex-direction:column; }
.metric-title { display:flex; gap:9px; align-items:center; color:#535d70; font-size:13px; font-weight:700; }
.metric-title span { font-size:18px; color:var(--violet); }
.metric-main { margin-top:18px; font-size:38px; line-height:1; font-weight:800; letter-spacing:-.05em; color:var(--violet); }
.metric-detail { margin-top:auto; color:var(--muted); font-size:12px; }
.metric-country { display:flex; align-items:center; gap:9px; margin-top:23px; }
.metric-country img { width:26px; height:18px; object-fit:cover; border-radius:3px; }
.metric-country strong { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-country span { margin-left:auto; font-size:31px; line-height:1; font-weight:800; }
.metric-up .metric-title span,.metric-up .metric-country span { color:#28a867; }
.metric-down .metric-title span,.metric-down .metric-country span { color:#f04b57; }
.metric-countries .metric-main { color:#3785ef; }
.metric-split { display:flex; justify-content:space-between; gap:8px; }
.chart-panel,.table-panel { margin-top:72px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
h2 { font-size:32px; letter-spacing:-.04em; margin:0; }
.legend { display:flex; gap:22px; font:11px DM Mono,monospace; }
.legend span::before { content:''; display:inline-block; width:18px; height:3px; margin-right:8px; vertical-align:middle; }
.ios-key::before { background:#72a71f; }.ios-grossing-key::before { background:#175f3a; }.android-key::before { background:var(--violet); }.android-grossing-key::before { background:#e94f9b; }
.ios-grossing-key::before,.android-grossing-key::before { background-size:6px 3px; }
.chart { min-height:340px; border:1px solid var(--line); background:#ffffff55; padding:18px; }
.chart svg { display:block; width:100%; height:320px; overflow:visible; }
.empty { height:300px; display:grid; place-items:center; color:var(--muted); font:12px DM Mono,monospace; }
.table-wrap { overflow:auto; border-top:1px solid var(--ink); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:17px 10px; border-bottom:1px solid var(--line); }
th { font:500 10px DM Mono,monospace; text-transform:uppercase; color:var(--muted); }
td code { color:var(--muted); }
.pill { display:inline-block; padding:5px 9px; border-radius:30px; background:#e5e5de; font:10px DM Mono,monospace; text-transform:uppercase; }
.overview-panel tbody tr { cursor:pointer; transition:background .15s ease; }
.overview-panel tbody tr:hover { background:#ffffff99; }
.overview-controls { display:flex; align-items:flex-end; gap:28px; }
.overview-controls label span { display:block; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; margin-bottom:5px; }
.rank-cell { font-size:18px; font-weight:800; }
.rank-muted { color:var(--muted); font-size:12px; }
.sort-header { display:flex; align-items:center; gap:7px; padding:0; background:transparent; color:var(--muted); font:500 10px DM Mono,monospace; text-transform:uppercase; white-space:nowrap; }
.sort-header span { opacity:.45; }
.sort-header.active { color:var(--ink); }
.sort-header.active span { opacity:1; }
.country-name { display:flex; align-items:center; gap:9px; min-width:180px; }
.country-name code { margin-left:1px; }
.country-flag { width:22px; height:15px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px #18231d18; }
.error { color:#a62a23; }
.header-meta a,.back-link { color:inherit; margin-left:18px; text-underline-offset:4px; }
.admin-shell { max-width:1000px; }
.admin-panel { margin-top:64px; padding:30px; border:1px solid var(--line); background:#ffffff55; }
.hidden { display:none; }
.admin-row { display:flex; align-items:end; gap:16px; margin-top:28px; }
.admin-row label { flex:1; }
.admin-row label>span,.admin-panel label>span:first-child { display:block; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; margin-bottom:8px; }
input { width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:600 14px Manrope,sans-serif; }
button { border:0; background:var(--ink); color:white; padding:14px 20px; font:700 12px Manrope,sans-serif; cursor:pointer; }
button.secondary { background:transparent; color:var(--ink); border:1px solid var(--line); padding:9px 13px; }
.schedule-row { max-width:650px; }
.time-note { color:var(--muted); font-size:12px; line-height:1.5; }
.country-actions { display:flex; gap:8px; margin:32px 0 14px; }
.country-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.country-option { display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:12px; cursor:pointer; }
.country-option:has(input:checked) { background:var(--lime); border-color:var(--ink); }
.country-option input { width:16px; height:16px; accent-color:var(--ink); }
.country-option span { display:flex!important; justify-content:space-between; align-items:center; gap:8px; width:100%; margin:0!important; color:var(--ink)!important; text-transform:none!important; font:inherit!important; }
.admin-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.form-status { margin:0; color:var(--muted); font-size:12px; }
@media (max-width:700px) { main{width:min(100% - 24px,1160px);padding-top:30px} header{align-items:flex-start}.header-meta{display:none}.cards{grid-template-columns:1fr}.card{min-height:270px}.rank{font-size:112px}.section-heading{align-items:flex-start;gap:18px;flex-direction:column}.chart-panel,.table-panel{margin-top:50px} }
@media (max-width:700px) { .country-grid{grid-template-columns:1fr}.admin-row,.admin-footer{align-items:stretch;flex-direction:column}.admin-footer button{width:100%} }
@media (max-width:950px) { .metric-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .metric-grid{grid-template-columns:1fr} }