/* ONE JLL Year-End Party 2026: pastel holiday look from the client's poster.
   Shared by index.html (RSVP) and admin.html (committee dashboard). */
html{color-scheme:light only}
:root{
  --lilac:#cdb8f3; --lilac-2:#e4d6fb;
  --pink:#f7b9d9;  --pink-2:#fde0ee;
  --mint:#bfe9e2;  --peach:#fbd3c4; --sky:#c8e3fb;
  --purple:#7b3fb5; --purple-dk:#562a8c; --purple-txt:#4a2a6b;
  --ink:#3b2a4f; --muted:#7d6a94;
  --paper:#fff8fc; --card:#ffffff;
  --ok:#2f9e6a; --warn:#d98c1f; --bad:#d64a5f;
  --radius:22px;
  --shadow:0 18px 48px rgba(91,42,142,.16);
  --font-display:'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-script:'Pacifico', cursive;
  --font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); line-height:1.5;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.75) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.6) 0 70px, transparent 71px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.55) 0 110px, transparent 111px),
    radial-gradient(circle at 8% 85%, rgba(255,255,255,.5) 0 80px, transparent 81px),
    linear-gradient(160deg, #ead9fb 0%, #fbdcef 38%, #fde8e0 62%, #d9f1ec 100%);
  background-attachment:fixed; min-height:100vh;
}
a{color:var(--purple)}
img{max-width:100%; height:auto; display:block}
.wrap{width:min(1120px, 100% - 32px); margin:0 auto}

/* ---------- decorations ---------- */
.deco{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.deco svg{position:absolute; opacity:.9; animation:float 9s ease-in-out infinite}
.deco .s1{left:4%; top:12%; width:34px; animation-delay:-1s}
.deco .s2{right:6%; top:8%; width:26px; animation-delay:-3s}
.deco .s3{left:10%; bottom:18%; width:22px; animation-delay:-5s}
.deco .s4{right:12%; bottom:26%; width:40px; animation-delay:-2s}
.deco .b1{left:-30px; top:40%; width:120px; opacity:.55; animation-duration:14s}
.deco .b2{right:-40px; top:55%; width:150px; opacity:.5; animation-duration:16s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(6deg)}}
@media (prefers-reduced-motion: reduce){.deco svg{animation:none}}
main, header, footer{position:relative; z-index:1}

/* ---------- hero ---------- */
.hero{padding:40px 0 18px; text-align:center}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700;
  letter-spacing:.14em; font-size:14px; color:var(--purple-dk); background:rgba(255,255,255,.7);
  border:1px solid rgba(123,63,181,.18); padding:6px 14px; border-radius:999px}
.brand i{display:inline-block; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple))}
.title{margin:18px 0 6px; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  line-height:.98; letter-spacing:.01em}
.title .l{position:relative; display:block}
.title .l::before{content:attr(data-text); position:absolute; left:0; right:0; top:0; color:var(--purple);
  -webkit-text-stroke:.18em var(--purple); transform:translateY(.07em); z-index:0;
  text-shadow:0 .12em .3em rgba(86,42,140,.35)}
.title .l span{position:relative; z-index:1; color:#fff;
  background:linear-gradient(180deg,#ffffff 0%,#fbe7f3 50%,#dccbf8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.title .l.alt span{background-image:linear-gradient(180deg,#fff3e4 0%,#f9c6dd 55%,#c9b6f2 100%)}
.title .l1{font-size:clamp(44px, 10vw, 96px)}
.title .l2{font-size:clamp(34px, 8vw, 76px)}
.year{display:inline-flex; align-items:center; gap:12px; margin-top:10px; padding:6px 22px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3vw,28px); letter-spacing:.2em; color:#fff;
  background:linear-gradient(90deg,#9a63d6,#7b3fb5); box-shadow:0 10px 24px rgba(91,42,142,.3)}
.year b{color:#ffe08a; font-size:.8em}
.ribbon{margin:22px auto 0; max-width:760px; padding:14px 26px; border-radius:18px;
  background:linear-gradient(90deg,#fbd3e4,#fde4d2); color:var(--purple-txt); font-family:var(--font-script);
  font-size:clamp(18px,3.2vw,26px); box-shadow:0 10px 26px rgba(123,63,181,.14); position:relative}
.ribbon::before,.ribbon::after{content:'\2605'; color:#f1b94a; position:absolute; top:50%; transform:translateY(-50%); font-size:20px}
.ribbon::before{left:12px}.ribbon::after{right:12px}
.facts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0}
.fact{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.82); border:1px solid rgba(123,63,181,.14);
  padding:10px 16px; border-radius:999px; color:var(--purple-txt); font-weight:700; font-size:15px; text-decoration:none}
.fact svg{width:18px; height:18px; flex:none; color:var(--purple)}
.fact small{font-weight:600; color:var(--muted)}

/* ---------- two columns ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:28px; padding:28px 0 60px; align-items:start}
@media (min-width: 900px){.grid{grid-template-columns:minmax(300px,440px) 1fr; gap:40px}}
.poster{position:relative; max-width:440px; margin:0 auto}
.poster img{border-radius:var(--radius); box-shadow:var(--shadow); transform:rotate(-1.5deg); border:6px solid #fff}
.poster .tag{position:absolute; right:-6px; top:-14px; background:#fff; color:var(--purple-dk); font-family:var(--font-display);
  font-weight:700; padding:8px 14px; border-radius:999px; box-shadow:0 8px 20px rgba(91,42,142,.2); transform:rotate(4deg); font-size:14px; z-index:2}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; position:relative; overflow:hidden}
.card::before{content:''; position:absolute; left:0; right:0; top:0; height:8px;
  background:linear-gradient(90deg,var(--lilac),var(--pink),var(--peach),var(--mint))}
.card h2{margin:4px 0 4px; font-family:var(--font-display); font-weight:700; color:var(--purple-dk); font-size:28px}
.card .lead{margin:0 0 20px; color:var(--muted); font-size:15px}
.row{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:560px){.row.two{grid-template-columns:1fr 1fr}}
label{display:block; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--purple-txt); margin-bottom:6px}
label .req{color:var(--bad)}
input, select{width:100%; font:inherit; font-size:16px; padding:13px 14px; border-radius:14px; border:2px solid #ead9fb;
  background:#fffafd; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s}
input:focus, select:focus{border-color:var(--purple); box-shadow:0 0 0 4px rgba(123,63,181,.14)}
input[aria-invalid="true"], select[aria-invalid="true"]{border-color:var(--bad)}
.hint{font-size:13px; color:var(--muted); margin-top:6px}
.err{display:none; color:var(--bad); font-size:13px; margin-top:6px; font-weight:700}
.field{margin-bottom:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:800; font-size:17px;
  padding:15px 26px; border-radius:999px; border:0; cursor:pointer; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,#9a63d6,#7b3fb5 60%,#e377b4); box-shadow:0 12px 28px rgba(123,63,181,.3); transition:transform .12s, filter .12s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}
.btn.ghost{background:#fff; color:var(--purple-dk); border:2px solid #e4d6fb; box-shadow:none}
.btn.sm{font-size:14px; padding:10px 16px}
.btn.wide{width:100%}
.note{margin-top:14px; font-size:13px; color:var(--muted)}
.banner{display:none; margin:0 0 18px; padding:12px 16px; border-radius:14px; font-weight:700; font-size:14px}
.banner.show{display:block}
.banner.warn{background:#fff3df; color:#8a5a08; border:1px solid #f6d49a}
.banner.bad{background:#ffe6ea; color:#8d1f33; border:1px solid #f4b8c3}
.banner.ok{background:#e3f7ec; color:#17603f; border:1px solid #b2e3c8}
.spinner{width:18px; height:18px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ticket ---------- */
.ticket{border:2px dashed #dccbf8; border-radius:20px; padding:22px; background:linear-gradient(180deg,#fff,#fdf4fa); text-align:center}
.ticket .eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:800}
.ticket h3{margin:6px 0 2px; font-family:var(--font-display); font-size:30px; color:var(--purple-dk)}
.ticket .line{color:var(--purple); font-weight:800}
.ticket .qr{margin:18px auto 8px; width:200px; height:200px; background:#fff; padding:10px; border-radius:16px; box-shadow:0 10px 26px rgba(91,42,142,.14)}
.ticket .code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:22px; letter-spacing:.14em; color:var(--ink); font-weight:800}
.ticket .meta{margin-top:12px; font-size:14px; color:var(--muted)}
.ticket .meta b{color:var(--ink)}
.actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px}
.emailstate{margin-top:14px; font-size:14px; font-weight:700; padding:10px 14px; border-radius:12px}
.emailstate.ok{background:#e3f7ec; color:#17603f}
.emailstate.warn{background:#fff3df; color:#8a5a08}
.linkbtn{background:none; border:0; color:var(--purple); font:inherit; font-weight:800; cursor:pointer; text-decoration:underline; padding:0}

footer{padding:18px 0 40px; text-align:center; color:var(--muted); font-size:13px}
footer a{color:var(--muted)}

/* ---------- admin ---------- */
.admin .top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:22px 0 8px}
.admin .top h1{margin:0; font-family:var(--font-display); color:var(--purple-dk); font-size:26px}
.admin .top .who{font-size:13px; color:var(--muted)}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 18px}
.tab{font:inherit; font-weight:800; padding:10px 16px; border-radius:999px; border:2px solid #e4d6fb; background:#fff; color:var(--purple-dk); cursor:pointer}
.tab.active{background:var(--purple); border-color:var(--purple); color:#fff}
.panel{display:none}.panel.active{display:block}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff; border-radius:18px; padding:16px 18px; box-shadow:0 10px 26px rgba(91,42,142,.1)}
.kpi .k{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:800}
.kpi .v{font-family:var(--font-display); font-size:34px; color:var(--purple-dk); line-height:1.1}
.kpi .s{font-size:13px; color:var(--muted)}
.tablewrap{overflow:auto; background:#fff; border-radius:18px; box-shadow:0 10px 26px rgba(91,42,142,.1)}
table{width:100%; border-collapse:collapse; font-size:14px}
th, td{padding:11px 12px; text-align:left; border-bottom:1px solid #f1e8fb; vertical-align:middle}
th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:#fbf7fe; position:sticky; top:0}
tr.total td{font-weight:800; background:#fbf7fe}
.bar{height:8px; background:#efe6fb; border-radius:999px; overflow:hidden; min-width:90px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#9a63d6,#e377b4)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800}
.pill.in{background:#e3f7ec; color:#17603f}.pill.out{background:#f3eefb; color:var(--purple-txt)}.pill.walk{background:#fff3df; color:#8a5a08}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px}
.toolbar input, .toolbar select{width:auto; min-width:180px; padding:10px 12px; font-size:14px}
.toolbar .grow{flex:1}
td .btn.sm{padding:7px 12px; font-size:13px}
.login{max-width:420px; margin:60px auto}
.scan{display:grid; gap:16px}
@media (min-width:900px){.scan{grid-template-columns:1fr 1fr}}
.cam{position:relative; background:#1d1530; border-radius:20px; overflow:hidden; aspect-ratio:3/4; max-height:70vh}
.cam video{width:100%; height:100%; object-fit:cover}
.cam .frame{position:absolute; inset:14% 12%; border:3px solid rgba(255,255,255,.8); border-radius:18px; pointer-events:none}
.result{border-radius:20px; padding:22px; text-align:center; background:#fff; box-shadow:0 10px 26px rgba(91,42,142,.1); min-height:200px}
.result.ok{background:#e3f7ec}.result.again{background:#fff3df}.result.bad{background:#ffe6ea}
.result .big{font-family:var(--font-display); font-size:28px; color:var(--ink); margin:4px 0}
.result .sub{color:var(--muted); font-weight:700}
.small{font-size:13px; color:var(--muted)}
@media print{body{background:#fff} .deco, .hero, .poster, footer, .actions, .emailstate, .banner{display:none !important} .card{box-shadow:none}}