:root {
  --brand-dark:#184f39; --brand-deeper:#103925; --brand-green:#52b95e;
  --brand-neon:#d8f35f; --brand-white:#fff; --brand-red:#a83d32;
  --card:rgba(255,255,255,.08); --border:rgba(255,255,255,.24);
}
*{box-sizing:border-box}
body{margin:0;color:#fff;background:linear-gradient(145deg,#103925,#184f39);min-height:100vh;font-family:Arial,Helvetica,sans-serif}
.container{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:22px 0 42px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.logo-pill{display:inline-flex;align-items:center;gap:14px;background:#52b95e;border-radius:13px;padding:18px 34px;box-shadow:0 20px 60px rgba(0,0,0,.24);font-weight:950;letter-spacing:2px;font-size:clamp(26px,4vw,44px)}
.logo-icon{width:46px;height:46px;border:5px solid #fff;border-radius:50%;display:grid;place-items:center}
.tagline-box{border:3px dashed #fff;border-radius:12px;padding:17px 24px;font-weight:800;text-align:center;max-width:720px;line-height:1.35}
.section-title{color:var(--brand-neon);letter-spacing:1px;font-size:clamp(31px,5vw,52px);margin:0 0 12px;text-transform:uppercase}
.lead{font-size:clamp(18px,2vw,24px);line-height:1.45;margin:0 0 24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 70px rgba(0,0,0,.28);padding:24px;backdrop-filter:blur(10px)}
.grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:start}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 24px}
.step{padding:12px;border-radius:8px;background:rgba(255,255,255,.11);text-align:center;font-weight:900;opacity:.65}
.step.active{background:var(--brand-neon);color:#153c2a;opacity:1}
.btn,button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;color:#153c2a;background:#fff;font-weight:950;cursor:pointer;text-decoration:none;box-shadow:0 12px 24px rgba(0,0,0,.2);font-size:16px}
.btn.primary,button.primary{background:var(--brand-neon);color:#153c2a}
.btn.green,button.green{background:#52b95e;color:#fff}
.btn.red,button.red{background:#a83d32;color:#fff}
.btn.ghost,button.ghost{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.24)}
.btn.small,button.small{padding:9px 13px;font-size:13px}
.form-row{display:grid;gap:8px;margin-bottom:14px}
label{font-weight:900}
input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.26);border-radius:8px;background:rgba(255,255,255,.92);color:#153c2a;padding:14px 15px;font-size:16px;outline:none}
textarea{min-height:96px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.phone-frame{width:min(380px,100%);margin:0 auto;background:#06190f;border:10px solid #eef6e7;border-radius:13px;padding:0;box-shadow:0 22px 70px rgba(0,0,0,.28);overflow:hidden}
.canvas-shell{display:grid;place-items:center}
#collageCanvas{width:100%;max-height:78vh;object-fit:contain;background:#111;display:block}
.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.upload-tile{background:rgba(255,255,255,.11);border:1px dashed rgba(255,255,255,.38);border-radius:9px;padding:12px}
.quiz-box{min-height:410px;display:grid;align-content:center}
.question-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:22px}
.answer-list{display:grid;gap:12px;margin-top:18px}
.answer-btn{justify-content:flex-start;width:100%;border-radius:10px;background:#fff;color:#153c2a;text-align:left}
.answer-letter{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#a83d32;color:#fff;margin-right:8px}
.result-panel{text-align:center}
.result-panel h2{font-size:clamp(28px,4vw,48px);margin:8px 0;color:var(--brand-neon)}
.leaderboard,.admin-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.08);border-radius:9px;overflow:hidden}
.leaderboard th,.leaderboard td,.admin-table th,.admin-table td{padding:13px;border-bottom:1px solid rgba(255,255,255,.15);text-align:left;vertical-align:top}
.leaderboard th,.admin-table th{background:rgba(255,255,255,.15)}
.final-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px}
.final-preview img{width:min(360px,100%);aspect-ratio:9/16;object-fit:cover;display:block;margin:0 auto;border-radius:0;border:0;background:#000}
.notice{background:rgba(216,243,95,.16);border:1px solid rgba(216,243,95,.35);padding:14px;border-radius:9px;margin:14px 0}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 22px}
.answer-admin-grid{display:grid;grid-template-columns:1.8fr .45fr .8fr .42fr;gap:8px;align-items:center;margin-bottom:8px}
.muted{opacity:.75}
@media(max-width:860px){.brand-row,.grid,.final-grid{grid-template-columns:1fr;display:grid}.tagline-box{max-width:100%}.logo-pill{width:100%;justify-content:center}.stepper{grid-template-columns:repeat(2,1fr)}.upload-grid{grid-template-columns:1fr}.answer-admin-grid{grid-template-columns:1fr}}


/* Less rounded cards patch */
.card { border-radius: 14px !important; }
.upload-tile { border-radius: 9px !important; }
.question-card { border-radius: 12px !important; }
.phone-frame { border-radius: 13px !important; }
.notice { border-radius: 9px !important; }
.leaderboard, .admin-table { border-radius: 9px !important; }