:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#0d100f; color:#f4f5f2; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top,#263026 0,#111511 40%,#0a0c0b 100%); min-height:100vh; }
a { color:#cfe89a; }
.wrap { width:min(1100px,calc(100% - 32px)); margin:auto; }
.narrow { width:min(600px,calc(100% - 32px)); padding:60px 0; }
.hero { padding:80px 0 55px; border-bottom:1px solid #354037; background:linear-gradient(120deg,rgba(45,65,45,.75),rgba(15,18,16,.25)); }
h1 { font-size:clamp(2.2rem,6vw,4.8rem); line-height:1; max-width:850px; margin:.25em 0; }
.hero p { max-width:650px; color:#c8cec7; font-size:1.1rem; }
.badge { display:inline-block; border:1px solid #738b55; padding:7px 10px; border-radius:999px; color:#d9efa8; font-size:.75rem; letter-spacing:.12em; }
.notice,.panel,.card,.status { border:1px solid #354037; background:rgba(19,24,20,.92); border-radius:18px; }
.notice { padding:18px; margin:30px 0; color:#d4dacd; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; padding-bottom:60px; }
.card { padding:22px; display:flex; flex-direction:column; min-height:390px; }
.card img { width:100%; height:170px; object-fit:contain; background:#171c18; border-radius:14px; }
.card p { color:#aeb7ae; flex:1; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
button,.primary,.secondary { border:0; border-radius:10px; padding:12px 17px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.primary { color:#11150f; background:#c9e787; }
.secondary { color:#edf3e5; background:#293329; border:1px solid #536451; }
button:disabled { opacity:.5; cursor:wait; }
dialog { width:min(500px,calc(100% - 30px)); border:1px solid #536451; border-radius:18px; padding:0; color:inherit; background:#151a16; }
dialog::backdrop { background:rgba(0,0,0,.75); }
dialog form,.panel { padding:28px; }
.close { float:right; font-size:1.5rem; background:transparent; color:white; }
label { display:grid; gap:8px; margin:18px 0; font-weight:700; }
input { width:100%; border:1px solid #4d594e; background:#0d100e; color:white; padding:14px; border-radius:10px; font:inherit; }
.hint { color:#9da79f; font-size:.9rem; }
.status { padding:16px; margin:18px 0; }
.error { border-color:#a54d4d; color:#ffb9b9; }
.promo { margin-top:20px; padding:18px; border:1px dashed #c9e787; border-radius:14px; }
.big-code { display:block; padding:16px; background:#090b09; font-size:clamp(1.1rem,5vw,1.8rem); text-align:center; border-radius:10px; letter-spacing:.08em; }
.inline { margin-top:12px; }
code { overflow-wrap:anywhere; }