@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

:root{
  --bg: #0b1020;
  --panel: #121933;
  --muted: #9fb0ff;
  --text: #e8ecff;
  --accent: #6c8cff;
  --accent-2: #ff6aa2;
}

/* Admin theme (Meiro) */
.admin-theme{
  --bg: #C6CEE0;
  --panel: #C5CDE0;
  --muted: #3f4a6b;
  --text: #1a213a;
  --accent: #574375;
  --accent-2: #574375;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Alice", serif;
  color:var(--text); background:var(--bg);
}
.container{width:min(1100px, 92%); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(6px); background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.6) 60%, transparent)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .logo{font-size:22px}
.brand .brand-text{letter-spacing:.2px}
.brand-logo{height:32px; width:auto; display:block; border-radius:8px}
@media (max-width:600px){.brand-logo{height:28px}}
.nav{display:flex; align-items:center; gap:10px}
.nav-link{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.06)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; font-weight:600; border:none; cursor:pointer; text-decoration:none}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:0 10px 30px rgba(108,140,255,.35)}
.admin-theme .btn-primary{background: var(--accent); box-shadow:0 8px 20px rgba(87,67,117,.25)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text)}
.admin-theme .btn-ghost{background:rgba(0,0,0,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

.hero{position:relative; overflow:hidden; padding:80px 0 60px}
.hero-inner{position:relative; z-index:2; text-align:center}
.hero h1{font-size:clamp(28px, 4vw, 46px); line-height:1.1; margin:0 0 14px}
.subtitle{color:var(--muted); font-size:18px; max-width:850px; margin:0 auto 22px}
.cta-row{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.hero-bg{position:absolute; inset:-25% -10% auto -10%; height:460px; background:radial-gradient(800px 400px at 50% 10%, rgba(108,140,255,.26), transparent 60%), radial-gradient(600px 300px at 75% 30%, rgba(255,106,162,.24), transparent 70%); filter:blur(30px)}

.how{padding:40px 0}
.how h2{text-align:center; margin:0 0 24px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px}
.step-number{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-weight:700; margin-bottom:8px}
.step h3{margin:6px 0}
.step p{margin:0; color:var(--muted)}

.wheel-section{padding:40px 0 70px}
.wheel-inner{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center}
@media (max-width:900px){.wheel-inner{grid-template-columns:1fr}}
.wheel-wrap{position:relative; width:min(420px, 92vw); height:min(420px, 92vw); margin-inline:auto}
.wheel{width:100%; height:100%; border-radius:50%; display:block; background:radial-gradient(circle at 50% 55%, #1a2352, #111939)}
.pointer{position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:26px solid #ffd657; filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.controls{text-align:center}
.result{min-height:26px; margin-top:10px; color:#ffd657; font-weight:700}

.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:18px 0; color:var(--muted)}
.footer-inner{display:flex; align-items:center; justify-content:center}

/* Mobile-first enhancements */
.section{padding:24px 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.admin-theme .card{background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01)); border:1px solid rgba(0,0,0,.10); box-shadow:0 10px 24px rgba(0,0,0,.10)}
.stack{display:grid; gap:12px}
.muted{color:var(--muted)}
.input{height:48px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; padding:0 14px; width:100%}
.input::placeholder{color:rgba(232,236,255,.65)}
.input:focus{outline:none; border-color:rgba(108,140,255,.65); box-shadow:0 0 0 3px rgba(108,140,255,.22)}
.admin-theme .input{border:1px solid rgba(0,0,0,.20); background:#fff; color:#1a213a}
.admin-theme .input::placeholder{color:rgba(26,33,58,.55)}
.admin-theme .input:focus{border-color:rgba(87,67,117,.7); box-shadow:0 0 0 3px rgba(87,67,117,.18)}

.admin-theme .site-header{backdrop-filter:none; background:var(--bg)}
.admin-theme .nav-link:hover{background:rgba(0,0,0,.06)}
.admin-theme .site-footer{border-top:1px solid rgba(0,0,0,.12); color:var(--muted)}
.input[type="date"]{padding:0 12px}
.field{display:grid; gap:8px}
.field label{font-weight:600}
.form-grid{display:grid; gap:16px}
.inline-2{display:grid; gap:14px}
@media (min-width:520px){.inline-2{grid-template-columns:1fr 1fr}}

/* Required label indicator */
.field label.required::after{content:" *"; color:var(--accent-2); font-weight:700}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px}
.badge-ok{background:#1e8e3e; color:#fff}
.badge-pending{background:#9b870c; color:#fff}
.table{width:min(1100px, 96%); margin:20px auto; border-collapse:collapse}
.table th, .table td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}
.table-wrap{overflow-x:auto}
.admin-theme .table th, .admin-theme .table td{border-bottom:1px solid rgba(0,0,0,.12)}
.show-mobile{display:none !important}
.hide-mobile{display:block !important}
@media (max-width:600px){
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .hero{padding:56px 0 40px}
  .hero h1{font-size:26px}
  .subtitle{font-size:16px}
}
@media (max-width:768px){
  .show-mobile{display:block !important}
  .hide-mobile{display:none !important}
}

/* Admin cards list */
.admin-cards{width:min(1100px,96%); margin:16px auto; display:grid; gap:16px}
.admin-card-header{display:flex; justify-content:space-between; align-items:center; gap:8px}
.admin-card-meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px}
/* Public custom theme using company colors */
.custom-theme{
  /* Expect overrides from inline style on body */
}
.custom-theme .site-header{backdrop-filter:none; background:var(--bg)}
.custom-theme .card{background: var(--panel); border:1px solid rgba(0,0,0,.12); box-shadow:none}
.custom-theme .btn-primary{background: var(--accent); box-shadow:none}
.custom-theme .btn-ghost{background:rgba(0,0,0,.06); color:var(--text)}
.custom-theme .subtitle{color:var(--muted)}