:root{
  --ink:#0D0D0F; --ink-2:#141417; --panel:#1A1A1E; --panel-2:#212127;
  --line:rgba(236,230,218,.14); --line-2:rgba(236,230,218,.24);
  --bone:#ECE6DA; --bone-2:#CFC8BA; --mut:#8B857A; --dim:#615C53;
  --pink:#F4A7C9; --pink-soft:rgba(244,167,201,.14); --rust:#CF6A43; --good:#B9C9A6;
  --f-disp:"Anton","Arial Narrow",system-ui,sans-serif;
  --f-head:"Oswald","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:16px;line-height:1.55;
  background-image:radial-gradient(900px 500px at 15% -10%, rgba(244,167,201,.08), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(157,78,221,.06), transparent 60%);
  background-attachment:fixed;}
a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.4px;line-height:1.1;margin:0 0 .4em}
h1{font-size:1.8rem} h2{font-size:1.3rem} h3{font-size:1.05rem}
.display{font-family:var(--f-disp);letter-spacing:.5px}
p{margin:0 0 1em}
small,.small{font-size:.82rem;color:var(--mut)}
.muted{color:var(--mut)} .pink{color:var(--pink)} .rust{color:var(--rust)}
.container{max-width:1060px;margin:0 auto;padding:0 18px}
.section{padding:28px 0}
hr{border:none;border-top:1px solid var(--line);margin:22px 0}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(13,13,15,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 18px;max-width:1060px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:48px;width:auto;display:block;filter:brightness(1.3) contrast(1.05)}
.brand-word{font-family:var(--f-disp);font-size:1.5rem;letter-spacing:2px;color:var(--bone);line-height:1;white-space:nowrap}
@media(max-width:560px){.brand-word{display:none}}
.navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navlinks a{color:var(--bone-2);font-family:var(--f-head);text-transform:uppercase;font-size:.8rem;letter-spacing:.6px;padding:7px 10px;border-radius:9px}
.navlinks a:hover{color:var(--bone);background:var(--panel);text-decoration:none}
.navlinks a.active{color:var(--pink)}
.nav-auth{display:flex;align-items:center;gap:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:11px;
  padding:10px 16px;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.82rem;
  cursor:pointer;transition:transform .05s ease, filter .15s ease;background:var(--panel);color:var(--bone);text-decoration:none}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--bone);color:var(--ink)}
.btn-pink{background:var(--pink);color:#2a0d1b}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--bone)}
.btn-danger{background:transparent;border-color:rgba(207,106,67,.6);color:var(--rust)}
.btn-sm{padding:7px 11px;font-size:.74rem;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}
form.inline{display:inline}

/* cards & grid */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card.tight{padding:14px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* hero */
.hero{display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding:34px 0 10px}
.hero .logo{height:180px;width:auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)) brightness(1.22) contrast(1.05)}
.hero h1{font-family:var(--f-disp);font-size:clamp(2rem,6vw,3.2rem);margin-bottom:.2em}
.hero .tag{color:var(--pink);font-family:var(--f-head);letter-spacing:2px;text-transform:uppercase;font-size:.9rem}
.hero p{max-width:52ch;color:var(--bone-2)}

/* pills, meters */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-head);font-weight:600;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;border-radius:7px;border:1px solid var(--line-2);color:var(--bone-2)}
.pill.ok{color:var(--good);border-color:rgba(185,201,166,.5)}
.pill.pink{color:var(--pink);border-color:rgba(244,167,201,.5)}
.pill.full{color:var(--rust);border-color:rgba(207,106,67,.55)}
.pill.solid{background:var(--pink);color:#2a0d1b;border-color:transparent}
.meter{height:7px;border-radius:99px;background:#26261f;overflow:hidden;border:1px solid rgba(0,0,0,.4);margin-top:6px}
.meter i{display:block;height:100%;background:var(--bone)}
.meter i.mid{background:var(--pink)} .meter i.full{background:var(--rust)}

/* timetable */
.day{margin-bottom:22px}
.day h3{color:var(--bone);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:12px}
.slot{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.slot .time{font-family:var(--f-head);font-weight:600;color:var(--pink);min-width:58px}
.slot .time b{display:block;color:var(--bone);font-size:1.15rem;font-family:var(--f-disp)}
.slot .body{flex:1;min-width:0}
.slot .nm{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.slot .right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.slot.full{opacity:.72}
@media(max-width:560px){.slot{flex-wrap:wrap}.slot .right{width:100%;align-items:stretch;text-align:left}}

/* price cards */
.price{font-family:var(--f-disp);font-size:2rem;color:var(--pink)}
.price small{font-family:var(--f-body);color:var(--mut);font-size:.8rem}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem}
.table th{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.4px;font-size:.74rem;text-align:left;
  padding:11px 14px;background:var(--panel-2);color:var(--bone)}
.table td{padding:10px 14px;border-top:1px solid var(--line);color:var(--bone-2);vertical-align:top}
.table tr:nth-child(even) td{background:rgba(236,230,218,.02)}
.table a{color:var(--pink)}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.4px;font-size:.74rem;color:var(--bone-2);margin-bottom:5px}
input,select,textarea{width:100%;background:var(--ink-2);border:1px solid var(--line-2);color:var(--bone);border-radius:10px;padding:11px 12px;font-family:var(--f-body);font-size:1rem}
input:focus,select,textarea:focus{outline:2px solid var(--pink);outline-offset:0}
textarea{min-height:90px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.form-narrow{max-width:460px}

/* stat tiles */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .n{font-family:var(--f-disp);font-size:2rem;color:var(--bone)}
.stat .n.pink{color:var(--pink)}
.stat .l{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.5px;font-size:.72rem;color:var(--mut)}

/* flash */
.flash{border-radius:11px;padding:12px 15px;margin:16px 0;border:1px solid var(--line-2);font-size:.95rem}
.flash.success{border-color:rgba(185,201,166,.5);background:rgba(185,201,166,.08);color:var(--good)}
.flash.error{border-color:rgba(207,106,67,.55);background:rgba(207,106,67,.1);color:#f0b39c}
.flash.info{border-color:rgba(244,167,201,.5);background:var(--pink-soft);color:var(--pink)}

/* admin subnav */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 18px}
.subnav a{font-family:var(--f-head);text-transform:uppercase;font-size:.76rem;letter-spacing:.5px;color:var(--bone-2);
  padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.subnav a.active{background:var(--bone);color:var(--ink);border-color:transparent}

/* banners */
.banner{background:var(--pink-soft);border:1px solid rgba(244,167,201,.3);border-radius:12px;padding:12px 15px;font-size:.9rem;margin:0 0 16px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

footer.site{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;color:var(--mut);font-size:.85rem}
footer .nav{padding:0 18px}
.stack>*+*{margin-top:10px}
.flexrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;gap:10px;align-items:center}

/* ---- buttons never wrap ---- */
.btn{white-space:nowrap}

/* ---- mobile bottom tab bar (app feel, matches the demo) ---- */
.tabbar{display:none}
@media(max-width:720px){
  header.site .navlinks{display:none}
  .nav{padding:9px 14px}
  .brand img{height:42px}
  .brand-word{display:inline;font-size:1.25rem}
  main.container{padding-bottom:88px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    justify-content:space-around;align-items:center;gap:4px;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(13,13,15,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-family:var(--f-head);text-transform:uppercase;font-size:.62rem;letter-spacing:.5px;
    color:var(--mut);text-decoration:none;padding:4px 0}
  .tabbar a .ic{font-size:1.25rem;line-height:1;filter:grayscale(1) brightness(1.3)}
  .tabbar a.active{color:var(--pink)}
  .tabbar a.active .ic{filter:none}
}

/* ---- welcome / disco splash (home hero, screen 01) ---- */
.welcome{max-width:480px;margin:0 auto;text-align:center;padding:6px 0 24px}
.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.welcome-logo{width:66%;max-width:290px;height:auto;position:relative;z-index:3;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(244,167,201,.28)) brightness(1.15)}
.beams{position:absolute;top:50%;left:50%;width:116%;max-width:460px;aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(244,167,201,.22) 0 5deg, transparent 5deg 20deg, rgba(236,230,218,.12) 20deg 25deg, transparent 25deg 40deg);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 78%);
  mask:radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 78%)}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--pink);color:var(--pink);
  box-shadow:0 0 9px currentColor;opacity:.2;z-index:2}
.spark.b{background:var(--bone);color:var(--bone)}
.eyebrow-c{font-family:var(--f-head);text-transform:uppercase;letter-spacing:2px;font-size:.8rem;color:var(--pink);margin-top:4px}
.welcome-tag{color:var(--bone-2);max-width:42ch;margin:12px auto 0}
.welcome-cta{display:flex;flex-direction:column;gap:11px;max-width:360px;margin:20px auto 0}
.welcome-cta .btn{width:100%;padding:14px}
.tiny-c{font-size:.9rem;color:var(--mut);margin-top:2px}
@media(prefers-reduced-motion:no-preference){
  .beams{animation:discospin 18s linear infinite}
  .spark{animation:twinkle 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes discospin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes twinkle{0%,100%{opacity:.16;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
}