@import url("/assets/fonts.css");

:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #111827;
  color: #f6f8fb;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  --surface: #192437;
  --line: #34445d;
  --muted: #b9c6d9;
  --accent: #99ddff;
  --ink: #122537;
  --page: #101f36;
  margin: 0;
  background: radial-gradient(ellipse at 0 0,#224f7080,transparent 65%),var(--page);
}
body.product-cry {
  --surface: #292123;
  --line: #574147;
  --muted: #e0c7c4;
  --accent: #ffbd8f;
  --ink: #321a18;
  --page: #251a22;
  background: radial-gradient(ellipse at 0 0,#8b4b334d,transparent 65%),var(--page);
}
main { width: min(100% - 36px, 1000px); margin-inline: auto; }
header, .option, .total { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
header { min-height: 80px; }
header nav { display:flex;gap:20px;font-size:14px; }
.brand-home { font-size:24px;letter-spacing:-.05em; }
.brand-home span { display:block;font-size:12px;letter-spacing:0;color:var(--muted); }
header a { color: inherit; text-decoration: none; font-weight: 750; }
header a:last-child { color: var(--accent); }
a { color: var(--accent); text-underline-offset: .2em; }
.layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.cover, .purchase, .keys, .steps { border: 1px solid var(--line); background: var(--surface); border-radius: 24px; }
.cover { overflow: hidden; min-height: 470px; display: grid; position: relative; isolation: isolate; align-items: end; border-radius:32px 80px 32px 32px; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; z-index: -2; }
.cover::after { content: ""; position: absolute; inset: 35% 0 0; z-index: -1; background: linear-gradient(transparent, #0a101df2); }
.cover .cover-copy { padding: 27px; }
.cover-ticket { display:inline-block;margin-bottom:18px;background:#f4f5f2;color:#17364c;padding:9px 13px;border-radius:7px;transform:rotate(-3deg);font-size:12px;font-weight:750; }
.cover .cover-tags { display:flex;gap:8px;margin-top:17px; }
.cover-tags span { border:1px solid #ffffff80;border-radius:30px;padding:7px 10px;font-size:12px;backdrop-filter:blur(8px); }
.cover p { color: #e3eaf5; margin: 6px 0 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: clamp(34px, 6vw, 64px); letter-spacing: -.065em; line-height: 1; margin: 0; }
h2 { font-size: clamp(20px, 4vw, 26px); letter-spacing: -.035em; margin: 0 0 17px; }
h3 { margin: 0 0 5px; }
.purchase, .keys, .steps { padding: clamp(16px, 4vw, 28px); min-width: 0; }
.purchase { background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));border-radius:32px;box-shadow:0 9px 0 #050e1929; }
fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
legend { color: var(--muted); margin-bottom: 8px; }
#terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
#terms label { position: relative; }
#terms input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
#terms label span {
  display: grid; place-content: center; text-align: center; min-height: 72px;
  border: 1px solid var(--line); border-radius: 18px; padding: 10px 4px;min-height:90px;
}
#terms strong { font-size: 25px; font-variant-numeric: tabular-nums; }
#terms input:checked + span { border-color: var(--accent); background:var(--accent);color:var(--ink);box-shadow:0 5px 0 #08122145;transform:translateY(-2px); }
#terms input:checked + span small {color:var(--ink)}
#terms input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
small { display: block; color: var(--muted); font-size: .8rem; }
.option { margin-top: 13px; min-height: 44px; }
.whitelist-option {padding:14px;border:1px solid var(--line);border-radius:18px;transition:background .2s,border-color .2s}
.whitelist-option:has(:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.whitelist-option input[role=switch]{appearance:none;width:48px;height:28px;border-radius:40px;background:#607085;position:relative;border:0;cursor:pointer;transition:background .2s}
input[role=switch]::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:white;transition:transform .2s}
input[role=switch]:checked{background:var(--accent)}
input[role=switch]:checked::after{transform:translateX(20px);background:var(--ink)}
input, select, button, summary { font: inherit; }
input:not([type=checkbox], [type=radio]), select {
  max-width: 100%; min-height: 44px; background: #0c131f9c; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
input[type=checkbox] { width: 21px; height: 21px; accent-color: var(--accent); flex-shrink: 0; }
.total { margin-top: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
output { font-size: 29px; font-weight: 800; font-variant-numeric: tabular-nums; }
button {
  border: 1px solid transparent; border-radius: 12px; background: var(--accent); color: var(--ink);
  min-height: 44px; padding: 8px 13px; cursor: pointer; font-weight: 800;
}
button:disabled { opacity: .55; cursor: not-allowed; }
#buy { width: 100%; }
.existing-key {grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;background:var(--accent);color:var(--ink);padding:25px;border-radius:28px;position:relative}
.existing-key h2 {margin:0 0 8px}
.existing-key p {margin:0;font-size:14px;line-height:1.5}
.connect-symbol {display:block;font-size:36px;line-height:1;margin-bottom:10px}
.connect-line {display:flex;gap:8px;margin-top:10px}
.connect-line input {width:100%;min-width:0;background:#ffffffb3!important;color:var(--ink)!important;border-color:transparent!important}
.connect-line button{background:var(--ink);color:var(--accent);flex-shrink:0}
.existing-key input:focus-visible,.existing-key button:focus-visible{outline-color:var(--ink)}
#existing-result:empty{display:none}
#existing-result{grid-column:1/-1;border-top:1px solid #17253930;padding-top:16px}
#existing-result small,#existing-result .key p{color:var(--ink)}
#existing-result .key-actions button{background:var(--ink);color:var(--accent)}
#connect-message:not(:empty){margin-top:10px}
.key-actions details{max-width:100%}
.secondary, summary { background: transparent; border-color: var(--line); color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
#message:empty { display: none; }
#message { color: var(--accent); margin: 12px 0 0; }
#auth { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
#auth form { display: grid; gap: 10px; }
#auth input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; }
.key + .key { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.keys p, .steps li, footer { color: var(--muted); }
.key input { width: 100%; }
.key-actions, #orders:not(:empty) { margin-top: 10px; }
.key-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
summary { border: 1px solid var(--line); padding: 10px; border-radius: 12px; cursor: pointer; }
.key-actions img { display: block; width: min(160px, 100%); margin-top: 8px; border: 6px solid white; border-radius: 10px; }
.steps ol { padding-left: 20px; margin-bottom: 0; }
.steps li + li { margin-top: 7px; }
footer { padding: 22px 0 32px; font-size: .88rem; }
@media (max-width: 670px) {
  main { width: min(100% - 24px, 460px); }
  header { min-height: 66px; }
  header nav {gap:12px;font-size:12px}
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cover { min-height: 280px;border-radius:24px 60px 24px 24px; }
  .cover .cover-copy { padding: 20px; }
  .cover img { object-position: center 43%; }
  .cover, .purchase, .keys, .steps { border-radius: 18px; }
  .existing-key{grid-template-columns:minmax(0,1fr);padding:20px;border-radius:22px;gap:14px}
  .connect-line{flex-direction:column}
  .connect-line button{width:100%}
}
@media(prefers-reduced-motion:reduce){input[role=switch],input[role=switch]::after,.whitelist-option{transition:none}}

.account-bar {grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);padding:18px 22px;border-radius:22px;background:var(--surface)}
.account-bar strong{display:block;font-size:18px}
.account-bar small{margin-top:6px}
.account-tabs{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.account-tabs a{padding:9px 14px;border-radius:30px;text-decoration:none;background:#09142870;color:var(--accent);font-size:14px}
.key-target{display:grid;gap:6px;margin-bottom:18px;font-size:14px;color:var(--muted)}
.key-target select{width:100%}
#devices[type=range]{appearance:none;width:100%;height:28px;padding:0;border:0;background:transparent;accent-color:var(--accent)}
#devices::-webkit-slider-runnable-track{height:7px;background:var(--line);border-radius:8px}
#devices::-webkit-slider-thumb{appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid var(--ink);box-shadow:0 0 0 2px var(--accent);border-radius:50%;background:var(--accent);cursor:grab}
.range-legend{display:flex;justify-content:space-between;margin-top:2px}
.promo-window{margin-top:15px}
.promo-window summary{font-size:14px;color:var(--accent)}
.promo-window label{display:block;margin-top:12px;font-size:13px}
.promo-window p:empty{display:none}
.price-breakdown{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:16px;color:var(--accent);font-size:13px}
.price-breakdown s{color:var(--muted)}
.price-breakdown #balance-applied{width:100%;color:var(--muted)}
#terms em{display:block;font-size:11px;font-style:normal;margin-top:4px;font-weight:750}
.wallet-panel,.friends-panel{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:26px;min-width:0}
.wallet-panel{grid-column:1/-1}
.friends-panel{grid-column:1/-1;background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.wallet-panel form{display:grid;gap:12px}
.wallet-panel h3{margin-top:25px}
#wallet-balance{font-size:30px;color:var(--accent);display:inline-block;margin-left:10px}
.amount-field{display:flex;align-items:center;background:#0b142170;border:1px solid var(--line);border-radius:18px;padding:8px 14px;gap:10px}
.amount-field input{font-size:30px;width:100%;font-weight:750;background:transparent!important;border:0!important}
.amount-field span{font-size:30px}
.topup-presets{display:flex;flex-wrap:wrap;gap:8px}
.topup-presets button{background:transparent;border:1px solid var(--line);color:var(--accent);border-radius:30px;flex:1}
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.history-row small{grid-column:1;grid-row:2}
.history-row>span{grid-column:2;grid-row:1/3;align-self:center}
.device-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.key>button{margin:8px 0 12px}
#referral-panel input{width:100%;margin-bottom:10px}
.friends-panel p{color:var(--muted)}
.cover{align-self:start}
.key>details{margin:8px 0}
#key-list>small{margin-top:10px}
@media(max-width:670px){.account-bar{padding:16px}.account-tabs{gap:5px}.account-tabs a{font-size:12px;padding:9px 11px}.wallet-panel,.friends-panel{padding:20px}.promo-window .connect-line{flex-direction:row}.promo-window .connect-line button{width:auto;font-size:12px}}