:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #101828; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { width: min(1180px, calc(100% - 28px)); margin: 20px auto 56px; }
.hero { position: relative; min-height: 410px; border-radius: 30px; overflow: hidden; background: linear-gradient(135deg,#111827,#4c1d95); background-size: cover; background-position: center; box-shadow: 0 24px 70px rgba(17,24,39,.2); }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg,rgba(6,10,24,.92) 0%,rgba(6,10,24,.62) 45%,rgba(6,10,24,.18) 100%); }
.hero-content { position:relative; z-index:1; color:white; padding:72px; max-width:650px; }
.eyebrow { letter-spacing:.16em; font-size:.76rem; font-weight:800; color:#d8b4fe; }
.eyebrow.dark { color:#7c3aed; }
h1 { font-size:clamp(2.4rem,6vw,5rem); line-height:.98; margin:14px 0 18px; }
h2 { font-size:clamp(1.65rem,3vw,2.4rem); margin:4px 0; }
.hero p { font-size:1.12rem; color:#e5e7eb; line-height:1.6; }
.stipend { display:inline-block; margin-top:18px; padding:11px 15px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter: blur(10px); font-weight:800; }
.content { padding:42px 8px 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.status { color:#667085; font-weight:700; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:22px; }
.game-card { position:relative; min-height:310px; border-radius:24px; overflow:hidden; cursor:pointer; background:#111827; border:3px solid transparent; box-shadow:0 16px 35px rgba(16,24,40,.1); transition:.2s ease; }
.game-card:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(16,24,40,.17); }
.game-card.selected { border-color:white; outline:4px solid var(--accent); }
.game-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.card-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(6,10,24,.94) 100%); }
.card-info { position:absolute; z-index:2; left:20px; right:20px; bottom:18px; color:white; }
.card-info h3 { font-size:1.35rem; margin:0 0 8px; }
.pick-label { display:inline-flex; align-items:center; gap:8px; font-size:.83rem; font-weight:800; color:#e5e7eb; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 15px var(--accent); }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; color:white; background:#101828; padding:13px 18px; border-radius:999px; font-weight:800; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.admin-body { background:#eef2f7; }
.admin-shell { width:min(1000px,calc(100% - 28px)); margin:36px auto; }
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.admin-header h1 { font-size:2.4rem; margin-top:8px; }
.panel { background:white; border-radius:22px; padding:24px; margin:20px 0; box-shadow:0 12px 30px rgba(16,24,40,.07); }
input { width:100%; border:1px solid #d0d5dd; border-radius:12px; padding:13px 14px; font-size:1rem; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:12px; padding:12px 17px; background:#7c3aed; color:white; font-weight:800; text-decoration:none; cursor:pointer; }
.button.secondary { background:white; color:#344054; border:1px solid #d0d5dd; }
.form-grid { display:grid; grid-template-columns:1fr 2fr 80px auto; gap:12px; }
.admin-list,.history-list { display:grid; gap:10px; }
.admin-row,.history-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid #eaecf0; border-radius:14px; }
.admin-row img { width:64px; height:44px; object-fit:cover; border-radius:9px; }
.row-main { display:flex; align-items:center; gap:13px; }
.danger { background:#fee4e2; color:#b42318; }
.muted { color:#667085; }
@media (max-width:720px) { .hero-content{padding:40px 26px}.hero{min-height:370px}.section-heading{align-items:start;flex-direction:column}.form-grid{grid-template-columns:1fr}.admin-header{align-items:start;flex-direction:column}.game-grid{grid-template-columns:1fr 1fr}.game-card{min-height:245px} }
@media (max-width:480px){.game-grid{grid-template-columns:1fr}.game-card{min-height:300px}}
.inline-form { display:flex; gap:12px; max-width:440px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.status-badge { display:inline-flex; align-items:center; border-radius:999px; padding:7px 11px; font-size:.78rem; font-weight:800; text-transform:capitalize; }
.status-badge.pending { background:#fff4e5; color:#b54708; }
.status-badge.purchased { background:#dcfae6; color:#067647; }
.stipend-card { display:flex; align-items:center; gap:18px; margin:20px 0; padding:16px; border:1px solid #eaecf0; border-radius:18px; }
.stipend-card img { width:145px; height:90px; object-fit:cover; border-radius:13px; background:#111827; }
.stipend-card h3 { margin:0 0 7px; font-size:1.45rem; }
.stipend-card p { margin:5px 0; }
.stipend-actions,.purchase-complete,.row-actions { display:flex; gap:12px; align-items:center; margin-top:14px; }
.purchase-complete input { flex:1; }
.success { background:#079455; }
.button.disabled,.button:disabled { opacity:.45; pointer-events:none; }
.form-grid.expanded { grid-template-columns:1fr 2fr 2fr 1.3fr; }
.form-grid.expanded #deliveryMethod { grid-column:span 2; }
.game-editor { border:1px solid #eaecf0; border-radius:16px; padding:16px; }
.game-editor-title { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.game-editor-title img { width:80px; height:48px; object-fit:cover; border-radius:10px; }
.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor-grid label { color:#475467; font-size:.8rem; font-weight:700; }
.editor-grid input { margin-top:6px; }
.note { padding:8px 10px; background:#f2f4f7; border-radius:9px; }
@media (max-width:720px) {
  .inline-form,.stipend-actions,.purchase-complete,.row-actions,.stipend-card { align-items:stretch; flex-direction:column; }
  .stipend-card img { width:100%; height:160px; }
  .form-grid.expanded,.editor-grid { grid-template-columns:1fr; }
  .form-grid.expanded #deliveryMethod { grid-column:auto; }
}