@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#0b0b10; --panel:#13131a; --panel2:#191922; --line:rgba(255,255,255,.1); --text:#f5f4ef; --muted:#96959f; --lime:#d7fa65; --orange:#ff835e; --purple:#c4b6ff; --sans:'Manrope',ui-sans-serif,system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.admin-shell { min-height:100vh; } .admin-header { width:min(1180px,calc(100% - 48px)); min-height:78px; margin:0 auto; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.05em; } .brand-name { font-size:18px; } .brand-name span { color:var(--lime); } .brand-mark { width:27px; height:27px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; align-items:end; padding:3px; background:var(--lime); border-radius:8px 8px 8px 2px; transform:rotate(-8deg); } .brand-mark span { display:block; background:var(--bg); border-radius:2px; } .brand-mark span:nth-child(1){height:40%;}.brand-mark span:nth-child(2){height:70%;}.brand-mark span:nth-child(3){height:100%;}
.admin-label { padding:7px 10px; color:var(--lime); border:1px solid rgba(215,250,101,.22); border-radius:50px; font:9px var(--mono); letter-spacing:.08em; text-transform:uppercase; } .back-link { margin-left:auto; color:var(--muted); font:10px var(--mono); text-transform:uppercase; } .back-link:hover { color:var(--lime); }
.admin-main { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:68px 0 90px; } .admin-loading { min-height:300px; display:grid; place-content:center; justify-items:center; gap:13px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; } .loader { width:24px; height:24px; border:2px solid rgba(215,250,101,.2); border-top-color:var(--lime); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}}
.login-card,.claim-card { max-width:520px; margin:55px auto; padding:38px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at 80% 0,rgba(196,182,255,.12),transparent 35%),var(--panel); text-align:center; } .kicker { color:var(--lime); font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { margin:0; } .login-card h1,.claim-card h1 { margin-top:16px; font-size:38px; line-height:1; letter-spacing:-.08em; } .login-card h1 span,.claim-card h1 span { color:var(--lime); } .login-card p,.claim-card p { margin:17px auto 0; max-width:390px; color:var(--muted); font-size:13px; line-height:1.8; }
.primary-button,.secondary-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 15px; border-radius:7px; font-size:10px; font-weight:800; text-transform:uppercase; transition:.2s ease; } .primary-button { color:var(--bg); background:var(--lime); border:1px solid var(--lime); } .primary-button:hover { background:#e8ff9b; transform:translateY(-1px); } .secondary-button { color:var(--soft,var(--text)); background:transparent; border:1px solid var(--line); } .secondary-button:hover { color:var(--lime); border-color:var(--lime); } .danger-button { color:var(--orange); background:transparent; border:1px solid rgba(255,131,94,.25); } .danger-button:hover { border-color:var(--orange); background:rgba(255,131,94,.08); } .login-card .primary-button,.claim-card .primary-button { margin-top:26px; }
.login-form { margin-top: 25px; display: grid; gap: 15px; text-align: left; }
.login-form .field label { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; margin-bottom: 5px; display: block; }
.login-form .field input { width: 100%; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 14px; }
.login-form .field input:focus { border-color: var(--lime); outline: none; }
.login-form .primary-button { width: 100%; min-height: 48px; margin-top: 10px; font-size: 12px; }
.helper { margin-top:18px!important; font:9px var(--mono)!important; color:#696872!important; }
.dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:20px; } .dashboard-head h1 { margin-top:13px; font-size:44px; line-height:.96; letter-spacing:-.08em; } .dashboard-head h1 span { color:var(--lime); } .dashboard-actions { display:flex; gap:9px; align-items:center; } .user-chip { display:flex; flex-direction:column; align-items:flex-end; margin-right:7px; } .user-chip strong { font-size:11px; } .user-chip span { margin-top:4px; color:var(--muted); font:9px var(--mono); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:36px 0 30px; } .stat-card { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .stat-card b { display:block; color:var(--lime); font-size:25px; letter-spacing:-.06em; } .stat-card span { display:block; margin-top:7px; color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
.list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; } .list-head h2 { font-size:17px; letter-spacing:-.05em; } .list-head span { color:var(--muted); font:9px var(--mono); } .game-list { display:grid; gap:9px; } .game-row { display:grid; grid-template-columns:44px minmax(180px,1fr) 150px 140px 155px auto; gap:15px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:rgba(19,19,26,.72); } .game-row:hover { border-color:rgba(215,250,101,.28); } .game-mini-cover { width:44px; height:44px; display:grid; place-items:center; border-radius:9px; color:var(--cover-accent); background:var(--cover-bg); border:1px solid rgba(255,255,255,.1); font-size:18px; } .game-row-title { min-width:0; } .game-row-title strong { display:block; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .game-row-title span,.row-meta { display:block; margin-top:5px; color:var(--muted); font:9px var(--mono); text-transform:uppercase; } .provider-tag,.status-tag { display:inline-flex; width:max-content; padding:6px 8px; border-radius:5px; font:8px var(--mono); text-transform:uppercase; } .provider-tag { color:var(--purple); background:rgba(196,182,255,.1); } .status-tag { color:var(--lime); background:rgba(215,250,101,.1); } .status-tag.draft { color:#ffcb71; background:rgba(255,203,113,.1); } .status-tag.unavailable { color:var(--orange); background:rgba(255,131,94,.1); } .row-actions { display:flex; justify-content:flex-end; gap:7px; } .small-button { padding:7px 9px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:5px; font:8px var(--mono); text-transform:uppercase; } .small-button:hover { color:var(--lime); border-color:var(--lime); } .small-button.delete:hover { color:var(--orange); border-color:var(--orange); }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(4,4,7,.75); } .modal[hidden] { display:none; } .modal-card { width:min(700px,100%); max-height:min(90vh,800px); overflow:auto; padding:28px; border:1px solid var(--line); border-radius:15px; background:#111117; box-shadow:0 22px 80px rgba(0,0,0,.5); } .modal-head { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:23px; } .modal-head h2 { font-size:25px; letter-spacing:-.07em; } .close-button { width:32px; height:32px; color:var(--muted); border:1px solid var(--line); border-radius:50%; background:transparent; } .close-button:hover { color:var(--text); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .field { display:grid; gap:7px; } .field.full { grid-column:1 / -1; } .field label { color:var(--muted); font:9px var(--mono); letter-spacing:.04em; text-transform:uppercase; } .field input,.field select,.field textarea { width:100%; color:var(--text); outline:0; border:1px solid var(--line); border-radius:7px; padding:10px 11px; background:var(--panel); font-size:12px; } .field textarea { min-height:82px; resize:vertical; line-height:1.55; } .field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(215,250,101,.65); box-shadow:0 0 0 3px rgba(215,250,101,.06); } .field select option { background:var(--panel); } .field-help { color:#696872; font:8px var(--mono); line-height:1.5; } .form-foot { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.admin-toast { position:fixed; left:50%; bottom:22px; z-index:20; padding:11px 15px; color:var(--bg); background:var(--lime); border-radius:7px; font:10px var(--mono); opacity:0; transform:translate(-50%,15px); pointer-events:none; transition:.25s ease; } .admin-toast.show { opacity:1; transform:translate(-50%,0); }
.game-mini-cover img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
.field input[type=file] { padding:8px; color:var(--muted); font-size:11px; }
.field input[type=file]::file-selector-button { margin-right:10px; padding:7px 10px; color:var(--lime); background:transparent; border:1px solid var(--line); border-radius:5px; font:9px var(--mono); text-transform:uppercase; cursor:pointer; }
.image-preview { max-width:230px; margin-top:2px; border:1px solid var(--line); border-radius:9px; }
@media(max-width:800px){ .game-row { grid-template-columns:44px 1fr auto; } .game-row > .provider-tag,.game-row > .row-meta,.game-row > .status-tag { display:none; } .dashboard-head { align-items:flex-start; flex-direction:column; } .dashboard-actions { width:100%; justify-content:space-between; } }
@media(max-width:560px){ .admin-header,.admin-main { width:calc(100% - 32px); } .admin-header { min-height:65px; } .admin-label { display:none; } .back-link { font-size:8px; } .admin-main { padding-top:42px; } .login-card,.claim-card { margin:30px auto; padding:28px 20px; } .login-card h1,.claim-card h1 { font-size:32px; } .stats-grid { gap:8px; } .stat-card { padding:12px; } .stat-card b { font-size:20px; } .stat-card span { font-size:7px; } .dashboard-head h1 { font-size:37px; } .user-chip { align-items:flex-start; width:100%; margin-right:0; } .dashboard-actions { flex-wrap:wrap; } .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .modal-card { padding:21px; } }