/* Client portal - Liquid Glass look of eventplannerncr.com.
   Tokens, the .lg glass material, the specular rim, .gbtn and the reduced-transparency / contrast fallbacks are copied
   from Documents\event_site_designs\option_D\assets\style.css. Figtree: SIL OFL 1.1 (fonts/LICENSE_figtree.txt).
   No external requests. Mobile-first at 390 px; every control is at least 44 px. */
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format('woff2')}

:root{
  --night:#16110d; --text:#ffffff; --text-2:rgba(255,255,255,.88); --ink:#1b1410;
  --sans:"Figtree","Mukta",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --spec:135deg; --g:16px; --r-card:30px; --r-panel:28px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  /* portal additions */
  --gold:#e9c27a; --ok:#9be3b0; --warn:#ffcf8a; --bad:#ff9d9d; --line:rgba(255,255,255,.22);
  --touch:44px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--night);color:var(--text);font:400 16.5px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* warm ambient backdrop so the glass has something to refract (no photos needed) */
.ambient{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 35% at 20% 15%,rgba(233,194,122,.55),transparent 70%),
             radial-gradient(35% 30% at 85% 30%,rgba(214,120,140,.45),transparent 70%),
             radial-gradient(45% 40% at 50% 95%,rgba(150,96,60,.55),transparent 70%),var(--night);
  filter:saturate(1.1)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.1}
p{margin:0}
a{color:inherit}
[hidden]{display:none !important}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:#fff;color:var(--ink);padding:10px 14px;border-radius:12px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the glass material (from option_D) ---------- */
.lg{
  --tint:44,34,28; --a:.24; --blur:7px; --bright:.92;
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(var(--tint),calc(var(--a) - .10)) 0%,rgba(var(--tint),calc(var(--a) + .06)) 100%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(190%) brightness(var(--bright));
  backdrop-filter:blur(var(--blur)) saturate(190%) brightness(var(--bright));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.07),0 14px 36px rgba(0,0,0,.26);
}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--spec),rgba(255,255,255,.95) 0deg,rgba(255,255,255,.18) 50deg,rgba(255,255,255,.05) 120deg,rgba(255,255,255,.55) 180deg,rgba(255,255,255,.10) 235deg,rgba(255,255,255,.05) 300deg,rgba(255,255,255,.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lg>*{position:relative;z-index:2}
.panel{--a:.44;--blur:12px;--bright:.78;border-radius:var(--r-panel);padding:20px 18px}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .lg{background:rgb(var(--tint))} }
@media (prefers-reduced-transparency:reduce){
  .lg{background:rgb(var(--tint));-webkit-backdrop-filter:none;backdrop-filter:none}
  .gbtn{background:#2c231d;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ambient{display:none}
}
@media (prefers-contrast:more){.lg{background:rgba(12,9,7,.92)}.lg::before{background:#fff}}

/* glass buttons (from option_D) */
.gbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 22px;border:0;border-radius:999px;cursor:pointer;
  font:600 1rem/1.1 var(--sans);text-decoration:none;color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.22);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background-color .2s ease}
.gbtn:hover{background:rgba(255,255,255,.22)}
.gbtn:active{transform:scale(.96)}
.gbtn.light{background:rgba(255,255,255,.92);color:var(--ink);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 8px 22px rgba(0,0,0,.22)}
.gbtn.light:hover{background:#fff}
.gbtn.small{min-height:var(--touch);padding:8px 18px;font-size:.95rem}
.gbtn.danger{color:#ffd6d6}
.gbtn[disabled]{opacity:.5;cursor:not-allowed}
.gbtn.block{width:100%}
@media (prefers-reduced-motion:reduce){.gbtn{transition:none}.gbtn:active{transform:none}}

/* ---------- layout ---------- */
.app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:calc(84px + var(--sat)) var(--g) calc(110px + var(--sab))}
.top{position:fixed;z-index:80;left:0;right:0;top:calc(10px + var(--sat));padding:0 10px;pointer-events:none}
.top .bar{pointer-events:auto;margin:0 auto;max-width:760px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 7px 0 20px;border-radius:999px}
.brand{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock{position:fixed;z-index:80;left:10px;right:10px;bottom:calc(10px + var(--sab));max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:5px;border-radius:999px}
.dock button{position:relative;min-height:50px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 .8rem/1.1 var(--sans);cursor:pointer;padding:0 4px}
.dock button[aria-current="page"]{background:rgba(255,255,255,.94);color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:#ff5d5d;color:#fff;font:700 .72rem/1 var(--sans);vertical-align:middle}
.dock .badge{position:absolute;top:3px;right:8px;margin:0}
.stack>*+*{margin-top:14px}
.h1{font-size:1.9rem;text-wrap:balance}
.h2{font-size:1.35rem}
.muted{color:var(--text-2)}
.small{font-size:.9rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.grow{flex:1 1 auto}

/* forms */
label.field{display:block}
label.field>span{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=number],input[type=month],input[type=password],input[type=tel],select,textarea{width:100%;min-height:var(--touch);padding:11px 14px;border-radius:16px;border:1px solid var(--line);
  background:rgba(0,0,0,.28);color:#fff;font:400 1rem/1.4 var(--sans)}
textarea{min-height:96px;resize:vertical}
select option{color:#000}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.55)}
.check{display:flex;gap:12px;align-items:flex-start;min-height:var(--touch);padding:8px 0;cursor:pointer}
.check input{width:26px;height:26px;flex:none;margin:2px 0 0;accent-color:var(--gold)}
.passcode{font-size:1.6rem !important;letter-spacing:.35em;text-align:center}
.note{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.10);font-size:.95rem}
.note.warn{background:rgba(255,190,90,.18)}
.note.bad{background:rgba(255,90,90,.20)}
.err{color:var(--bad);font-weight:600;min-height:1.4em}

/* progress */
.meter{height:12px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#fff3d6);transform-origin:0 50%;transform:scaleX(0)}
.meter.thin{height:6px}

/* checklist */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.tick{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.5);font-weight:700}
.tick.on{background:var(--ok);border-color:var(--ok);color:var(--ink)}
.tick.na{border-style:dashed;opacity:.6}
.checklist .sub{display:block;font-size:.88rem;color:var(--text-2)}

/* sections grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{border-radius:22px;padding:14px;min-height:96px;text-align:left;border:0;color:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.card strong{font-size:1rem;line-height:1.25}
.card .count{font-size:.85rem;color:var(--text-2)}
.card .ok{color:var(--ok);font-weight:700}

/* drop zone + queue */
.drop{border:2px dashed rgba(255,255,255,.4);border-radius:22px;padding:18px;text-align:center}
.drop.over{border-color:var(--gold);background:rgba(233,194,122,.12)}
.queue{list-style:none;margin:0;padding:0}
.queue li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem}
.queue .meter{grid-column:1/-1}
.queue .state{font-weight:600;color:var(--text-2)}
.queue .state.bad{color:var(--bad)}
.queue .state.ok{color:var(--ok)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1;background:rgba(255,255,255,.08)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .vid{position:absolute;left:6px;bottom:6px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.6);font-size:.75rem;font-weight:700}
.thumb button{position:absolute;right:4px;top:4px;width:var(--touch);height:var(--touch);border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font:700 1.1rem/1 var(--sans);cursor:pointer}

/* segmented switch */
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1 0 auto;min-height:var(--touch);padding:0 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 .92rem/1 var(--sans);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.94);color:var(--ink)}

/* chat + messages */
.chat{display:flex;flex-direction:column;gap:10px;max-height:58svh;overflow-y:auto;padding:4px 2px;overscroll-behavior:contain}
.bubble{max-width:86%;padding:11px 14px;border-radius:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.them{align-self:flex-start;background:rgba(255,255,255,.14);border-bottom-left-radius:6px}
.bubble.me{align-self:flex-end;background:rgba(255,255,255,.92);color:var(--ink);border-bottom-right-radius:6px}
.bubble .meta{display:block;margin-top:4px;font-size:.74rem;opacity:.7}
.bubble img{margin-top:8px;border-radius:12px;max-height:240px}
.compose{display:flex;gap:8px;align-items:flex-end}
.compose textarea{min-height:var(--touch);height:52px}

.jobs{list-style:none;margin:0;padding:0}
.jobs li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.qlist .saved{color:var(--ok);font-size:.85rem;font-weight:600}
.privacy h3{font-size:1.05rem;margin-top:14px}
.privacy ul{padding-left:20px;margin:6px 0}

/* admin */
.admin .app{max-width:1200px}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th,table.t td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;vertical-align:top}
.scroll-x{overflow-x:auto}
.admin .dock{grid-template-columns:repeat(5,1fr)}
pre.json{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem;background:rgba(0,0,0,.3);padding:12px;border-radius:14px;max-height:420px;overflow:auto}
textarea.code{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;min-height:360px}

@media (min-width:700px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .thumbs{grid-template-columns:repeat(5,1fr)}
  .h1{font-size:2.4rem}
  .dock{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100% - 20px))}
}
@media (min-width:1000px){
  .admin .grid{grid-template-columns:repeat(4,1fr)}
}