/* Zizi Noël 2026 — coordonnées reprises de la maquette Figma (artboard 402px, mis à l'échelle par zoom.js). */
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(../fonts/instrument-serif-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Fustat"; src: url(../fonts/fustat.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root { --green: #b2ff82; --dark: #081910; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--dark); color: var(--green); font-family: "Instrument Serif", serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
p, h1, h2, ol, ul { margin: 0; font-weight: 400; }
img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.art { position: relative; width: 402px; margin: 0 auto; zoom: var(--z, 1); }
.art > *, .art section > *, .art header > * { position: absolute; }

/* Logo, étoile, bouton menu */
.logo { position: absolute; width: 77.073px; height: 103.781px; line-height: 1; color: var(--green); }
.logo > * { position: absolute; white-space: nowrap; translate: -50% 0; }
.logo-ellipse { inset: 0; display: flex; align-items: center; justify-content: center; translate: none; }
.logo-ellipse img { width: 39.319px; height: 96.243px; rotate: -25.62deg; }
.logo-zizi { left: 30.05px; top: 25.96px; font-size: 18.268px; }
.logo-noel { left: 39.32px; top: 44.21px; font-size: 30.447px; }
.logo-year { left: 53.63px; top: 74.4px; font-size: 12.179px; }
.logo-main { left: 162px; top: 84px; }
.star { width: 30px; height: 25px; }
.star-main { left: 21px; top: 132px; }
.menu-btn, .nav-close { padding: 12px; border: 0; background: none; }
.menu-btn img, .nav-close img { width: 18px; height: 15px; margin: 1.5px -1.5px; }
.menu-btn { left: 353px; top: 124px; }
.logo-link { left: 0; top: 0; }
.menu-btn img { rotate: -90deg; }

/* Page principale */
.art-main { height: 3853px; overflow-x: clip; }
.art-main [id] { scroll-margin-top: 70px; }

/* Barre du haut fixe : se compacte au défilement */
.topbar { position: fixed; inset: 0 0 auto; z-index: 40; pointer-events: none; }
.topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(64px * var(--z, 1)); background: rgba(8,25,16,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.art-top { height: 200px; }
.art-top > * { pointer-events: auto; transition: translate .5s cubic-bezier(.2,.8,.2,1); }
.logo { transition: scale .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1); }
.topbar.is-scrolled::before { opacity: 1; }
.topbar.is-scrolled .star-main, .topbar.is-scrolled .menu-btn { translate: 0 -112px; }
.topbar.is-scrolled .logo { translate: 0 -104px; scale: .6; }

.hero { left: 1px; top: 15px; width: 402px; height: 614px; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 0; background: url(../img/grid.png) 0 0 / 125.1px 125.1px; opacity: .1; pointer-events: none; }
.hero-hello { left: 201.5px; top: 240px; width: 247px; --tx: -50%; translate: -50% 0; font-size: 44px; font-style: italic; line-height: 1; text-align: center; }
.hero-name { left: 201px; top: 277px; --tx: -50%; translate: -50% 0; font-size: 96px; line-height: 1; white-space: nowrap; }
.hero-sub { left: 115px; top: 383px; font: 400 12px Fustat, sans-serif; color: #f5f5f5; text-transform: uppercase; white-space: nowrap; }

.rdv { left: -18px; top: 533px; width: 438.139px; height: 438.139px; }
.rdv-red { inset: 0; display: flex; align-items: center; justify-content: center; }
.rdv-red img { width: 372px; height: 372px; rotate: -11.39deg; }
.rdv-card { left: 19.95px; top: 23.95px; width: 401.897px; height: 401.897px; display: flex; align-items: center; justify-content: center; }
.rdv-card-inner { position: relative; width: 371.789px; height: 371.789px; rotate: 4.85deg; filter: drop-shadow(0 4px 5.95px rgba(0,0,0,.25)); }
.rdv-postcard { position: absolute; left: 0; top: 0; width: 371.789px; height: 371.509px; }
.rdv-paper { position: absolute; left: 26.44px; top: 26.44px; width: 318.087px; height: 318.087px; background: url(../img/rdv-paper.webp) center / cover; color: var(--dark); }
.rdv-paper > * { position: absolute; white-space: nowrap; }
.rdv-t { translate: -50% 0; line-height: normal; }
.rdv-day { left: 151.58px; top: 34.74px; font-size: 24px; font-style: italic; }
.rdv-date { left: 158.92px; top: 50.44px; font-size: 60px; }
.rdv-a { left: 152.24px; top: 122.97px; font-size: 24px; font-style: italic; }
.rdv-hour { left: 151.32px; top: 147.37px; font-size: 60px; }
.rdv-count { left: 50%; translate: -50% 0; top: 239.56px; padding: 10px 15px; background: var(--dark); border: 5px solid #fff; border-radius: 8px; filter: drop-shadow(0 1px 1.35px rgba(0,0,0,.1)); font: 400 12.393px Fustat, sans-serif; color: var(--green); font-variant-numeric: tabular-nums; }
.rdv-count .m { font-weight: 500; }

/* Secret Santa */
.santa { left: -69px; top: 859px; width: 542px; height: 923.547px; }
.santa-glow { left: -97.31px; top: 218.69px; }
.santa-tree { left: 0; top: 0; width: 542px; height: 860px; filter: drop-shadow(0 4px 7.4px rgba(0,0,0,.4)); }
.santa-face { left: 177px; top: 608px; width: 195px; height: 204px; object-fit: contain; }
.santa-gift { left: 86px; top: 730px; width: 367.962px; height: 182.547px; padding: 0; border: 0; background: none; }
.santa-gift img { position: absolute; left: 0; top: 25px; width: 367.962px; height: 157.547px; }
.santa-gift:disabled { cursor: default; }
.ribbon { position: relative; width: 364px; height: 50px; background: #f6e085; box-shadow: 0 4px 13.5px rgba(0,0,0,.25); }
.ribbon::after { content: ""; position: absolute; inset: 0; background: url(../img/ribbon.webp) center / cover; mix-blend-mode: darken; opacity: .3; }
.santa-ribbon { left: 88px; top: 730px; pointer-events: none; }
.santa-ribbon span { position: absolute; z-index: 1; left: 93px; top: 19px; font: 400 12px Fustat, sans-serif; color: var(--dark); text-transform: uppercase; white-space: nowrap; }
.santa-title { left: 132px; top: 367px; width: 285px; height: 278.5px; }
.santa-title p { position: absolute; color: var(--green); text-shadow: 0 4px 5.1px rgba(0,0,0,.4); line-height: normal; text-align: center; translate: -50% 0; }
.santa-closed-title, .santa-open-name { left: 142.5px; top: 0; font-size: 64px; white-space: nowrap; }
.santa-open-intro { left: 139px; top: -43px; width: 328px; font-size: 43px; }
.santa-hide, .santa-reset { top: 935px; translate: -50% 0; padding: 8px; border: 0; background: none; font: 500 12.393px Fustat, sans-serif; color: var(--green); text-decoration: underline; }
.santa-hide { left: 190px; } .santa-reset { left: 350px; }
.santa:not(.is-open) .santa-hide, .santa:not(.is-open) .santa-reset { display: none; }
.santa-arrow { position: absolute; left: 120.29px; top: 181px; }
.santa.is-open .santa-arrow { left: 125.29px; top: 97px; }
.santa.is-open .santa-ribbon { translate: 192.68px -.12px; rotate: 72.12deg; }
.santa.is-open .santa-ribbon span, .santa.is-open .santa-closed-title,
.santa:not(.is-open) .santa-open-intro, .santa:not(.is-open) .santa-open-name, .santa:not(.is-open) .santa-face { opacity: 0; visibility: hidden; }
/* Paquet refermé à la demande (anti-curieux) : le ruban revient, le visage rentre, le nom est flouté. */
.santa-hidden .santa.is-open .santa-ribbon { translate: none; rotate: none; }
.santa-hidden .santa.is-open .santa-ribbon span { opacity: 1; visibility: visible; }
.santa-hidden .santa.is-open .santa-face { translate: 0 110px; opacity: 0; visibility: hidden; }
.santa-hidden .santa.is-open .santa-open-name { filter: blur(16px); }

/* Happenings */
.happ { left: -1px; top: 1850px; width: 402px; height: 741px; overflow: clip; }
.happ-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.happ-glow { left: 109.1px; top: 243.08px; }
.happ-title { left: -8px; top: -17px; font-size: 102.301px; line-height: normal; color: var(--dark); white-space: nowrap; }
.happ-nums { inset: 0; font-size: 70.667px; line-height: normal; }
.happ-nums span { position: absolute; }
.happ-nums span:nth-child(1) { left: 45px; top: 128px; }
.happ-nums span:nth-child(2) { left: 43px; top: 228px; }
.happ-nums span:nth-child(3) { left: 40px; top: 369px; }
.happ-nums span:nth-child(4) { left: 43px; top: 491px; }
.happ-nums span:nth-child(5) { left: 43px; top: 608px; }
.happ-list { left: 97px; top: 177px; width: 207.909px; display: flex; flex-direction: column; align-items: center; gap: 54px; padding: 0; list-style: none; font: 600 21.054px/normal Fustat, sans-serif; color: #2f2f2f; text-align: center; text-transform: uppercase; }
.happ-list li { width: 100%; }
.happ-list small { display: block; font-size: 10.527px; }
.happ-scribbles { inset: 0; pointer-events: none; }
.sc { position: absolute; mix-blend-mode: hard-light; }
.sc1 { left: 245.84px; top: 167.43px; } .sc2 { left: 164.26px; top: 316.47px; } .sc3 { left: 253.98px; top: 290.39px; }
.sc4 { left: 256.15px; top: 302.72px; } .sc5 { left: 90px; top: 397.32px; } .sc6 { left: 146px; top: 463.71px; }
.sc7 { left: 256.83px; top: 499.63px; } .sc8 { left: 161px; top: 576.98px; } .sc9 { left: 223.21px; top: 628.33px; }

/* Menu */
.menu { left: 1px; top: 2669px; width: 401px; height: 652px; overflow: clip; background: #3f3f3f; color: #000; }
.menu-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.rot { display: flex; align-items: center; justify-content: center; }
.rot > div { position: relative; flex: none; }
.rot > div > img { position: absolute; }
.m-label { font: 800 12px/normal Fustat, sans-serif; text-transform: uppercase; white-space: nowrap; }
.m-label-entrees { left: 10px; top: 114px; width: 130px; height: 44.5px; }
.m-entrees-t { left: 21px; top: 123px; width: 108.987px; height: 25.245px; } .m-entrees-t p { rotate: 4.41deg; }
.m-p-entrees { left: 116.23px; top: 153.74px; width: 158.568px; height: 190.503px; }
.m-p-entrees > div { width: 146px; height: 180.497px; rotate: -4.11deg; } .m-p-entrees img { left: -5.9px; top: -2.906px; width: 157.8px; height: 192.297px; }
.m-p-title { left: 57.18px; top: -13.05px; width: 453.824px; height: 161.508px; }
.m-p-title > div { width: 445.657px; height: 129.884px; rotate: -4.11deg; } .m-p-title img { left: -5.88px; top: -2.896px; width: 457.457px; height: 141.684px; }
.m-p-dessert { left: 121.65px; top: 503.96px; width: 156.547px; height: 115.766px; }
.m-p-dessert > div { width: 150.554px; height: 107.168px; rotate: 3.34deg; } .m-p-dessert img { left: -5.9px; top: -2.904px; width: 162.354px; height: 118.968px; }
.m-p-plat { left: 63px; top: 382px; width: 259.287px; height: 91.742px; }
.m-p-plat > div { width: 254.66px; height: 73.67px; rotate: -4.11deg; } .m-p-plat img { left: -5.908px; top: -2.903px; width: 266.46px; height: 85.47px; }
.m-croque { left: 200px; top: 403px; --tx: -50%; translate: -50% 0; font-size: 32px; line-height: normal; white-space: nowrap; }
.m-txt-entrees, .m-txt-dessert { font-size: 24px; line-height: normal; text-align: center; white-space: nowrap; }
.m-txt-entrees { left: 155.45px; top: 186.28px; width: 82.058px; height: 126.511px; } .m-txt-entrees p { rotate: -1.89deg; }
.m-txt-dessert { left: 151.16px; top: 520.13px; width: 89.958px; height: 77.972px; } .m-txt-dessert p { rotate: 13.01deg; }
.m-label-plat { left: 18px; top: 352px; width: 44.5px; height: 22px; }
.m-label-dessert { left: 5px; top: 499px; width: 66.5px; height: 19.5px; }
.m-plat-t { left: 26px; top: 354px; width: 31.428px; height: 21.596px; } .m-plat-t p { rotate: -9.59deg; }
.m-dessert-t { left: 13.5px; top: 499.5px; width: 52.586px; height: 18.886px; } .m-dessert-t p { rotate: 2.09deg; }
.m-title { left: 73px; top: 15px; font-size: 56px; line-height: normal; white-space: nowrap; }
.m-i2 > img, .m-i3 > img, .m-i4 > img, .m-i5 > img, .m-i6 > img { flex: none; object-fit: cover; }
.m-i2 { left: 232px; top: 293px; width: 233.324px; height: 182.548px; } .m-i2 img { width: 206.529px; height: 110.57px; rotate: 23.03deg; filter: drop-shadow(0 9px 11.3px rgba(0,0,0,.5)); }
.m-i3 { left: -286px; top: -4px; width: 580.183px; height: 594.299px; } .m-i3 img { width: 394px; height: 450px; rotate: 34.73deg; filter: drop-shadow(0 9px 11.3px rgba(0,0,0,.5)); }
.m-pf2, .m-pf5 { overflow: hidden; filter: drop-shadow(0 9px 11.3px rgba(0,0,0,.5)); }
.m-pf2 img, .m-pf5 img { position: absolute; max-width: none; }
.m-pf2 { left: 263px; top: 105px; width: 135px; height: 131px; } .m-pf2 img { left: 0; top: -124.78%; width: 224.68%; height: 224.81%; }
.m-pf5 { left: 5px; top: 559px; width: 129px; height: 125px; } .m-pf5 img { left: -135.23%; top: -.03%; width: 235.23%; height: 235.7%; }
.m-i4 { left: 155px; top: 399px; width: 506.683px; height: 506.683px; } .m-i4 img { width: 360px; height: 360px; rotate: 39.4deg; filter: drop-shadow(0 4px 5.1px rgba(0,0,0,.5)); }
.m-i5 { left: 95px; top: 435px; width: 507.471px; height: 507.471px; } .m-i5 img { width: 360px; height: 360px; rotate: 49.61deg; filter: drop-shadow(0 4px 7.8px rgba(0,0,0,.5)); }
.m-i6 { left: -79px; top: -97px; width: 193.694px; height: 223.889px; } .m-i6 img { width: 187.705px; height: 132.86px; rotate: -112.09deg; filter: drop-shadow(0 4px 5.7px rgba(0,0,0,.5)); }

/* Croque-zezette + retour en haut */
.croque { display: contents; }
.anchor-croque { left: 0; top: 3221px; }
.croque-glow { left: -19.9px; top: 3221.08px; }
.croque-bread { left: 65px; top: 3433px; width: 273px; height: 126px; overflow: hidden; }
.croque-bread img { position: absolute; left: 0; top: -59.04%; width: 100%; height: 216.87%; }
.croque-pre { left: 164px; top: 3426px; font: 400 16px/normal Fustat, sans-serif; color: #fff; text-transform: uppercase; white-space: nowrap; }
.croque-title { left: 34px; top: 3428px; font-size: 64px; line-height: normal; color: #fff; text-shadow: 0 0 18.8px #fff; white-space: nowrap; }
.btn { display: flex; align-items: center; justify-content: center; padding: 10px 15px; border: 0; border-radius: 8px; background: var(--green); filter: drop-shadow(0 1px 1.35px rgba(0,0,0,.1)); font: 500 12.393px/normal Fustat, sans-serif; color: var(--dark); text-decoration: none; white-space: nowrap; transition: scale .2s; }
.btn:hover { scale: 1.04; }
.croque-btn { position: absolute; left: 124px; top: 3582px; }
.to-top { display: contents; text-decoration: none; }
.to-top > * { position: absolute; }
.to-top-arrow { left: 184px; top: 3724px; width: 35px; height: 43.5px; rotate: 180deg; }
.to-top-arrow img { position: absolute; left: -.707px; top: 0; }
.to-top-t { left: 115px; top: 3775px; font-size: 32px; line-height: normal; white-space: nowrap; }

/* Menu de navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(215,255,190,.8); backdrop-filter: blur(3.4px); -webkit-backdrop-filter: blur(3.4px); }
.nav[hidden] { display: none; }
.art-nav { height: 679px; }
.nav-list { left: 69px; top: 132px; width: 264px; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0; list-style: none; }
.nav-list a { display: block; font-size: 32px; font-style: italic; line-height: 1; color: var(--dark); text-decoration: none; text-align: center; }
.nav-sep { height: 0; }
.nav-sep img { position: relative; top: -1px; width: 155px; }
.nav-logout { left: 0; top: 600px; width: 402px; text-align: center; }
.nav-logout button { border: 0; background: none; font: 500 12.393px Fustat, sans-serif; color: var(--dark); text-decoration: underline; }
.nav-close { left: 353px; top: 20px; }
.nav-close img { rotate: 90deg; }

/* Révélation */
.reveal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(255,255,255,.4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); overflow: hidden; }
.reveal[open] { display: grid; place-items: center; }
.reveal::backdrop { background: transparent; }
.art-reveal { height: 670px; color: var(--dark); outline: none; }
.rv-gift { left: 17px; top: 423px; width: 367.962px; height: 157.547px; }
/* Le conteneur tourne (3D), l'image porte le filtre : jamais les deux sur le même élément (bug d'affichage, surtout Safari iOS). */
.rv-face { left: 93px; top: 108px; width: 195px; height: 204px; transform-origin: 50% 85%; will-change: transform; }
.rv-face img { width: 100%; height: 100%; object-fit: contain; }
.rv-face img.is-white { filter: brightness(0) invert(1) drop-shadow(0 0 10px #fff); } /* fixe, jamais animé */
.reveal-open .art-main *, .reveal-open .topbar * { animation-play-state: paused !important; } /* page figée sous l'overlay */
.rv-face.sway { animation: sway 2.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.rv-name span { display: inline-block; white-space: pre; }
.rv-flash { left: 40px; top: 60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.8) 30%, rgba(178,255,130,0) 70%); opacity: 0; pointer-events: none; }
.rv-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-ribbon { left: 18px; top: 18px; width: 367.418px; height: 99.442px; display: flex; align-items: center; justify-content: center; }
.rv-ribbon .ribbon { flex: none; rotate: 7.88deg; }
.rv-name { left: 191px; top: 325px; width: 264px; translate: -50% 0; font-size: 44px; line-height: 1; text-align: center; }
.rv-note { left: 189.5px; top: 377px; width: 191px; translate: -50% 0; font: 400 12px/normal Fustat, sans-serif; text-transform: uppercase; text-align: center; }
.rv-close { left: 83px; top: 605px; width: 240px; padding: 10px 15px; border: 0; border-radius: 8px; background: rgba(255,255,255,.41); box-shadow: 0 1px 2.7px rgba(0,0,0,.1); font: 500 12.393px/normal Fustat, sans-serif; color: var(--dark); }

/* Connexion / invitation */
.page-login::before { content: ""; position: fixed; inset: 0; background: url(../img/grid.png) 0 0 / 125.1px 125.1px; opacity: .05; pointer-events: none; }
.art-login { height: 874px; }
.art-login form { position: static; }
.lbl, .inp, .login-btn { position: absolute; }
.logo-login { left: 162px; top: 93px; }
.login-title { left: 200.5px; top: 264px; width: 247px; translate: -50% 0; font-size: 44px; font-style: italic; line-height: 1; text-align: center; }
.lbl { left: 84px; width: 247px; font-size: 20px; line-height: 1; }
.inp { left: 84px; width: 242px; height: 45px; padding: 0 13px; border: 0; border-radius: 8px; background: #efffe5; box-shadow: 0 0 7.9px rgba(255,255,255,.2); font: 500 12.393px Fustat, sans-serif; color: var(--dark); }
.inp::placeholder { color: rgba(8,25,16,.4); }
.lbl-1 { top: 349px; } .inp-1 { top: 376px; }
.lbl-2 { top: 442px; } .inp-2 { top: 469px; }
.login-btn { left: 85px; top: 551px; width: 240px; }
.login-msg { left: 85px; top: 604px; width: 240px; font: 400 12px/1.3 Fustat, sans-serif; text-align: center; }
.star-login { left: 189px; top: 666px; }

/* Animations */
[data-speed] { translate: var(--tx, 0) var(--py, 0px); will-change: translate; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.happ-list li:nth-child(2) { transition-delay: .08s; } .happ-list li:nth-child(3) { transition-delay: .16s; }
.happ-list li:nth-child(4) { transition-delay: .24s; } .happ-list li:nth-child(5) { transition-delay: .32s; }
.santa-ribbon, .santa-ribbon span, .santa-title p, .santa-face, .santa-arrow { transition: translate .9s cubic-bezier(.3,1.4,.5,1), rotate .9s cubic-bezier(.3,1.4,.5,1), opacity .5s, visibility .5s, filter .6s; }
.santa:not(.is-open) .santa-gift:not(:disabled), .santa-hidden .santa.is-open .santa-gift { animation: wiggle 3.5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wiggle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-2deg); } 90% { transform: rotate(2deg); } 94% { transform: rotate(-1deg); } }
.logo-ellipse img { animation: float 6s ease-in-out infinite; }
.star-main, .star-login { animation: spin 10s linear infinite; }
@keyframes float { 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Admin (page utilitaire, mise en page simple) */
.admin { max-width: 560px; margin: 0 auto; padding: 32px 16px 64px; font: 400 15px/1.45 Fustat, sans-serif; }
.admin h1 { font: 400 40px/1 "Instrument Serif", serif; margin-bottom: 24px; }
.admin h2 { font: 400 26px/1.1 "Instrument Serif", serif; margin-bottom: 12px; }
.admin-box { margin: 0 0 20px; padding: 18px; border: 1px solid rgba(178,255,130,.25); border-radius: 12px; display: grid; gap: 8px; }
.admin input:not([type=checkbox]), .admin select { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: #efffe5; font: 500 14px Fustat, sans-serif; color: var(--dark); }
.admin .btn { justify-self: start; font-size: 14px; margin-top: 6px; }
.admin-msg { margin-bottom: 10px; }
.admin-link { margin-bottom: 20px; }
.admin-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.admin-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(178,255,130,.12); }
.admin-list small { opacity: .6; }
.admin-state { margin-left: auto; font-size: 13px; opacity: .8; }
.admin-step { opacity: .8; font-size: 14px; }
.admin-chips { margin-left: auto; display: flex; gap: 6px; }
.chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(178,255,130,.4); white-space: nowrap; }
.chip-0 { opacity: .55; }
.chip-1 { background: rgba(246,224,133,.15); border-color: #f6e085; color: #f6e085; }
.chip-2 { background: rgba(130,190,255,.15); border-color: #82beff; color: #82beff; }
.chip-3, .chip-4 { background: var(--green); border-color: var(--green); color: var(--dark); }
.chip-4 { font-weight: 600; }
.admin-list .admin-link { height: 34px; font-size: 12px; }
.admin-pw { font-size: 13px; opacity: .85; }
.admin-pw code { padding: 1px 6px; border-radius: 4px; background: rgba(178,255,130,.15); user-select: all; }
.admin-open { justify-self: start; font-size: 14px; }
.admin-list form { display: flex; gap: 8px; width: 100%; }
.admin-list button, .admin-logout { padding: 4px 10px; border: 1px solid rgba(178,255,130,.4); border-radius: 6px; background: none; font: 13px Fustat, sans-serif; }
.admin-check { display: flex; gap: 8px; align-items: center; }