/* App custom styles (mobile-first). Keep tiny, layer utilities for safe area. */
:root{color-scheme:light dark;--primary:#8b5cf6;--primary-hover:#7c3aed;--accent:#a78bfa;--text:#0f172a;--muted:#64748b;--surface:#ffffff;--border:#e9d5ff;--chip-odd:#f5f3ff;--ring:rgba(139,92,246,.28);--secondary-bg:#ede9fe;--secondary-hover:#ddd6fe}
body{background:linear-gradient(135deg,#f5f3ff 0%,#ffffff 60%);color:var(--text)}
html,body{height:100%}
/* iPhone safe areas */
.safe-area{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));}

/* Utility fallback if Tailwind CDN fails */
.hidden{display:none!important}

/***** UI atoms *****/
.label{display:block;font-size:.8rem;color:#4c1d95;margin-bottom:.4rem}
.field{width:100%;appearance:none;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:.7rem .9rem;box-shadow:0 1px 0 rgba(2,8,23,.03);outline:none}
.field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.65rem .9rem;white-space:nowrap;transition:background-color .2s ease,box-shadow .2s ease,transform .15s ease}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;box-shadow:0 6px 18px rgba(139,92,246,.28)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary),var(--primary-hover));box-shadow:0 10px 24px rgba(139,92,246,.36);transform:translateY(-1px)}
.btn-secondary{background:var(--secondary-bg);color:#4c1d95;border:1px solid var(--border)}
.btn-secondary:hover{background:var(--secondary-hover)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--chip-odd)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:0 6px 20px rgba(44,22,78,.08)}
.card-header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.card-title{font-weight:600}
.card-sub{font-size:.8rem;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:999px;padding:.35rem .65rem;font-size:.9rem}
.chip input{accent-color:var(--primary)}
.tick{display:flex;align-items:center;gap:.5rem;margin:.25rem 0}
.tick input{accent-color:var(--primary)}

/* Team grid responsive */
.teams{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.teams{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.teams{grid-template-columns:repeat(3,minmax(0,1fr))}}
.team{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:.8rem}
.team h3{font-weight:600;margin-bottom:.4rem}
.team ul{list-style:none;margin:0;padding:0}
.team li{padding:.35rem .55rem;border-radius:.5rem}
.team li:nth-child(odd){background:var(--chip-odd)}

/* Dark mode tweaks (prefers-color-scheme) */
@media(prefers-color-scheme:dark){
  body{background:linear-gradient(135deg,#140b2e 0%,#0e0a1f 70%);color:#e9e7ff}
  .field{background:#16112e;border-color:#2a1f55;color:#e9e7ff}
  .btn-ghost{color:#e9e7ff;border-color:#2a1f55}
  .btn-secondary{background:#1a1440;color:#e9e7ff;border:1px solid #2a1f55}
  .card{background:#16112e;border-color:#2a1f55;box-shadow:0 6px 20px rgba(167,139,250,.18)}
  .chip{border-color:#2a1f55}
  .team{background:#120c2a;border-color:#2a1f55}
  .team li:nth-child(odd){background:#16112e}
}