:root {
  --ink: #15382a;
  --pine: #123d2c;
  --pine-2: #1f5940;
  --gold: #b89550;
  --cream: #f4f0e7;
  --paper: #fffdf9;
  --line: #ded9ce;
  --danger: #a33535;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--cream); color: var(--ink); }
button, input, select { font: inherit; }
button, .button { border: 0; border-radius: 9px; background: var(--pine); color: #fff; font-weight: 750; padding: .75rem 1rem; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: var(--pine-2); }
.button.secondary, button.secondary { background: #ebe3d2; color: var(--ink); }
.link { background: transparent; color: inherit; padding: .3rem; }
.danger-text { color: var(--danger); }
.eyebrow { color: #8b6b32; font-size: .72rem; font-weight: 850; letter-spacing: .16em; margin: 0 0 .35rem; text-transform: uppercase; }
h1, h2 { letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.muted, small { color: #6b7972; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.topbar { align-items: center; background: var(--pine); color: white; display: flex; gap: 1.25rem; min-height: 68px; padding: .85rem clamp(1rem, 4vw, 3.5rem); position: sticky; top: 0; z-index: 10; box-shadow: 0 7px 25px #0c271c26; }
.topbrand { color: white; font-weight: 900; letter-spacing: .09em; text-decoration: none; }
.topbrand span { color: #d5b977; }
.topbar nav { display: flex; gap: .25rem; margin-left: auto; }
.topbar nav a { border-radius: 8px; color: #dce9e2; font-size: .86rem; padding: .55rem .65rem; text-decoration: none; white-space: nowrap; }
.topbar nav a:hover, .topbar nav a.active { background: #ffffff18; color: white; }
.topbar form { margin: 0; }
.container { margin: 0 auto; max-width: 1280px; padding: clamp(1.2rem, 4vw, 3.5rem); }
section { margin-bottom: 2rem; }
.page-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.page-heading h1 { max-width: 780px; }
.page-heading p:not(.eyebrow) { color: #617069; margin: .65rem 0 0; max-width: 720px; }
.panel { background: var(--paper); border: 1px solid #e3ded4; border-radius: 18px; box-shadow: 0 12px 35px #2645350b; padding: clamp(1.1rem, 3vw, 2rem); }
.section-head { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.25rem; }
.stat-grid { display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 1.5rem; }
.stat-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; min-height: 106px; padding: 1rem; }
.stat span { color: #65736c; font-size: .82rem; }
.stat strong { font-size: 2.3rem; margin-top: auto; }
.stat.danger { border-color: #e2b9b9; color: var(--danger); }

.alert { border-radius: 12px; margin: 0 0 1rem; padding: 1rem 1.15rem; }
.alert.success { background: #dff2e6; color: #175a34; }
.alert.error { background: #f8dfdf; color: #852929; }
.alert.warning { background: #fbefcf; color: #674c12; display: grid; gap: .45rem; }
.secret { background: #fff8e5; border: 1px solid #e8d49e; border-radius: 8px; display: block; overflow-wrap: anywhere; padding: .75rem; user-select: all; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 760px; width: 100%; }
th, td { border-bottom: 1px solid #e8e4da; padding: .8rem .65rem; text-align: left; vertical-align: middle; }
th { color: #718078; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.badge { background: #ebe8e0; border-radius: 999px; display: inline-block; font-size: .73rem; font-weight: 800; padding: .28rem .55rem; }
.badge.status-active { background: #d8efe1; color: #145b33; }
.badge.status-pending { background: #f7e6ba; color: #765516; }
.badge.status-unsubscribed, .badge.danger { background: #f3dcdc; color: #8d2d2d; }
.empty { color: #75827c; padding: 2rem; text-align: center; }
.inline-form { display: inline; margin: 0; }
.inline-actions { display: flex; gap: .7rem; margin-top: .65rem; }

.search { display: flex; gap: .45rem; }
.search input { min-width: 240px; }
.form-grid { align-items: end; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.25rem 0 1.5rem; }
label { color: #52645b; display: grid; font-size: .82rem; font-weight: 700; gap: .35rem; }
input, select { background: #fff; border: 1px solid #cfc9bd; border-radius: 9px; color: var(--ink); min-height: 44px; padding: .65rem .75rem; width: 100%; }
input:focus, select:focus { border-color: var(--gold); outline: 3px solid #b8955030; }
.form-submit { align-items: end; display: flex; height: 100%; }
.form-submit button { width: 100%; }

.media-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-card { background: #f6f3ec; border: 1px solid #e2ddd1; border-radius: 13px; overflow: hidden; }
.media-card img, .media-card video { aspect-ratio: 16 / 9; background: #17362a; display: block; object-fit: cover; width: 100%; }
.media-card > div { padding: .9rem; }
.media-card small { display: block; margin-top: .25rem; }

.quick-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-card { background: var(--paper); border: 1px solid #e3ded4; border-radius: 16px; display: flex; flex-direction: column; min-height: 190px; padding: 1.35rem; }
.quick-card h2 { font-size: 1.35rem; }
.quick-card p { color: #65736c; line-height: 1.5; }
.quick-card a { color: var(--pine-2); font-weight: 800; margin-top: auto; text-decoration: none; }
.quick-card a:hover { color: #8b6b32; }

.apk-install { align-items: center; display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(280px, 440px) minmax(280px, 1fr); }
.apk-qr { align-items: center; display: flex; flex-direction: column; gap: .65rem; text-align: center; }
.apk-qr span { color: #65736c; font-size: .86rem; }
.qr-frame { background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 45px #17362a14; line-height: 0; padding: 1rem; width: 100%; }
.qr-frame svg { height: auto; max-width: 100%; width: 100%; }
.apk-details { align-items: start; display: flex; flex-direction: column; }
.apk-details ol { color: #465950; line-height: 1.65; margin: 1.25rem 0; padding-left: 1.35rem; }
.apk-details .button { margin-top: 1.25rem; }
.apk-meta { background: #f3efe6; border-radius: 11px; display: flex; gap: 1.5rem; justify-content: space-between; margin-top: .5rem; padding: .8rem 1rem; width: 100%; }
.apk-meta span { color: #65736c; }
.apk-url { background: #f3efe6; border-radius: 9px; display: block; margin-top: .8rem; overflow-wrap: anywhere; padding: .75rem; width: 100%; }

.prize-admin-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.25rem; }
.prize-admin-card { background: #f6f3ec; border: 1px solid #e2ddd1; border-radius: 14px; display: grid; grid-template-columns: 145px 1fr; min-width: 0; overflow: hidden; }
.prize-admin-card > img, .prize-placeholder { align-items: center; aspect-ratio: 1; background: #fff; display: flex; font-size: 44px; height: 100%; justify-content: center; object-fit: contain; width: 145px; }
.prize-admin-body { min-width: 0; padding: 1rem; }
.prize-title-row { align-items: start; display: flex; gap: .75rem; justify-content: space-between; }
.prize-title-row strong, .prize-title-row small { display: block; }
.prize-title-row small { line-height: 1.35; margin-top: .3rem; }
.chance { background: #dfeee5; border-radius: 999px; color: #17603a; flex: 0 0 auto; font-size: .78rem; font-weight: 850; padding: .35rem .55rem; }
.prize-fields { align-items: end; display: grid; gap: .65rem; grid-template-columns: 1fr 1fr auto; margin-top: .85rem; }
.toggle-label { align-items: center; display: flex; flex-direction: row; min-height: 44px; }
.toggle-label input { min-height: 20px; width: 20px; }
.prize-save { display: flex; justify-content: flex-end; margin-top: 1.25rem; }

.login-card { background: var(--paper); border-radius: 22px; box-shadow: 0 30px 90px #17362a26; margin: 8vh auto; max-width: 450px; padding: clamp(1.5rem, 6vw, 3rem); }
.brand-mark { color: var(--pine); font-size: 1.25rem; font-weight: 900; letter-spacing: .1em; margin-bottom: 2rem; }
.login-card h1 { margin-bottom: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.stack button { margin-top: .5rem; }

@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav { margin-left: 0; order: 3; overflow-x: auto; padding-bottom: .1rem; width: 100%; }
}

@media (max-width: 950px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid, .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .prize-admin-grid { grid-template-columns: 1fr; }
  .apk-install { grid-template-columns: 1fr; }
  .apk-qr { margin: 0 auto; max-width: 440px; width: 100%; }
}

@media (max-width: 600px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid.compact { grid-template-columns: 1fr; }
  .form-grid, .media-grid, .quick-grid { grid-template-columns: 1fr; }
  .prize-admin-card { grid-template-columns: 100px 1fr; }
  .prize-admin-card > img, .prize-placeholder { width: 100px; }
  .prize-fields { grid-template-columns: 1fr 1fr; }
  .toggle-label { grid-column: 1 / -1; }
  .page-heading, .section-head { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .search input { min-width: 0; }
}