/* ANGAD v5.6.6 — Gen Z visual system; staged, CSS-only UX refresh.
 * No modification of checkout, booking, staff, payment or Supabase logic.
 * Two entrance choices are unchanged. Provides accessible focus and reduced motion.
 */
:root {
  --genz-ink: #101b25;
  --genz-lime: #d4ff43;
  --genz-mint: #7cf0c9;
  --genz-lilac: #bcb6ff;
  --genz-cyan: #9befff;
  --genz-coral: #ff9676;
  --genz-dark: #0b2025;
}
html, body { background:#eaf0ee; }
body { font-feature-settings:"ss01" on; }
.app-shell {
  background:linear-gradient(180deg,#f8faf9 0,#eaf1ef 58%,#edf2f5 100%);
  padding-bottom:105px;
}
.topbar {
  padding:16px 19px;
  background:rgba(8,27,33,.97);
  box-shadow:0 10px 30px rgba(6,22,25,.12);
  border-bottom:1px solid rgba(217,255,239,.09);
}
.topbar .angad-brand-home { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.topbar .angad-name { font-family:'Sora',system-ui,sans-serif; font-size:24px; font-weight:800; letter-spacing:-.07em; color:white; }
.topbar .angad-name::after { content:'';display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;background:var(--genz-lime);box-shadow:0 0 0 3px rgba(212,255,67,.10) }
.topbar .angad-brand-home .play-name {color:var(--genz-lime)!important; opacity:1!important; font-weight:900!important; font-size:9px!important; letter-spacing:.035em!important; margin:0!important; }
.topbar .account-pill { border:1px solid rgba(220,248,241,.20); border-radius:16px; background:rgba(255,255,255,.065); box-shadow:none; min-width:74px; }
.topbar .account-pill:hover {border-color:var(--genz-lime)}
.angad-stage-note {
  background:#fff7e6;color:#815200;border-bottom:1px solid #eddfc2;
  font-size:10px;letter-spacing:.035em;font-weight:850;line-height:1.4;
}
/* The entrance is intentionally only two large choices; decorative art is CSS only. */
.app-shell:has(.angad-entry) {
  background:radial-gradient(ellipse at 90% 65%,#d9eff3 0%,transparent 55%),linear-gradient(165deg,#f5faf8,#e8f0f0);
}
.app-shell:has(.angad-entry) main {padding:0 16px 23px}
.angad-entry {gap:14px; padding:18px 1px 20px; min-height:calc(100svh - 158px)}
.angad-entry-intro {
  border-radius:31px;
  padding:29px 25px 30px;
  min-height:273px;
  background:radial-gradient(ellipse at 97% 97%,rgba(47,215,199,.43),transparent 46%),linear-gradient(123deg,#081f28 8%,#12283c 53%,#303268 100%);
  box-shadow:0 18px 39px rgba(10,39,55,.19);
  overflow:hidden;
}
.angad-entry-intro::before {
  content:"";position:absolute;width:212px;height:212px;right:-104px;top:65px;
  border:31px solid rgba(180,188,255,.12);border-radius:50%;transform:rotate(-24deg);
  box-shadow:0 0 0 34px rgba(255,255,255,.035);pointer-events:none;
}
.angad-entry-intro::after {
  content:"";width:168px;height:168px;right:-47px;bottom:-98px;border-radius:28px;
  border:1px solid rgba(172,250,234,.22);transform:rotate(-22deg);
  box-shadow:0 0 0 25px rgba(172,250,234,.06);pointer-events:none;
}
.angad-entry-kicker {
  position:relative;z-index:1;
  width:max-content;max-width:100%;
  color:var(--genz-lime);font-size:10px;letter-spacing:.16em;line-height:1.3;
  padding:7px 10px 7px 0;
}
.angad-entry-dash {width:17px;height:4px;background:var(--genz-lime);margin-right:3px}
.angad-entry-kicker i {color:#c4cce1;opacity:.8}
.angad-entry-intro h1 {
  font-family:'Sora',system-ui,sans-serif;
  font-size:clamp(31px,7.9vw,44px);line-height:1.11;letter-spacing:-.07em;
  margin:15px 0 15px;max-width:450px; font-weight:800;
}
.angad-entry-intro h1 em {color:var(--genz-lime)}
.angad-entry-intro p {font-size:13px;line-height:1.65;color:#e2eaf1;max-width:288px;font-weight:500}
.angad-entry-activities {gap:12px}
.angad-entry-choice {
  border:1px solid transparent;border-radius:27px;
  min-height:237px;padding:17px 15px 14px;
  box-shadow:0 12px 27px rgba(20,47,58,.105);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease;
  isolation:isolate; overflow:hidden;
}
.angad-entry-choice::before {
  content:""; position:absolute; right:-37px;top:-34px; width:122px;height:122px;
  border-radius:50%; opacity:.85; z-index:-1;
}
.angad-entry-choice-play {background:linear-gradient(151deg,#e2ffc9 0%,#c9f8c9 64%,#a9edbb 100%);border-color:#b0e6b2;color:#103d2e;}
.angad-entry-choice-play::before {background:radial-gradient(circle,#b8ff5d,transparent 69%)}
.angad-entry-choice-work {background:linear-gradient(147deg,#e8e5ff 0%,#d8e4ff 60%,#b7def9 100%);border-color:#c1ccf2;color:#213856}
.angad-entry-choice-work::before {background:radial-gradient(circle,#c7b9ff,transparent 70%)}
.angad-choice-icon {
  width:54px;height:54px;min-height:54px;border-radius:18px;
  display:grid;place-items:center;font-size:27px;
  box-shadow:0 6px 15px rgba(13,30,39,.08);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.68);
  margin-bottom:18px;
}
.angad-choice-content {gap:5px}
.angad-choice-content small {color:inherit;font-size:9px;letter-spacing:.12em;font-weight:950;opacity:.73}
.angad-choice-content b {font-family:'Sora',system-ui,sans-serif;font-size:clamp(26px,7.4vw,37px);font-weight:800;letter-spacing:-.06em;line-height:1.12}
.angad-choice-content>span {font-size:11px;line-height:1.48;opacity:.9;font-weight:600}
.angad-choice-arrow {
  width:29px;height:29px;display:grid;place-items:center;
  border-radius:100px;background:rgba(255,255,255,.45);opacity:1;
  font-weight:900;font-size:19px;
}
@media(hover:hover) and (pointer:fine) {
  .angad-entry-choice:hover {transform:translateY(-5px);box-shadow:0 20px 35px rgba(20,45,60,.15)}
  .angad-work-tile:hover {transform:translateY(-3px);box-shadow:0 15px 24px rgba(19,51,63,.12)}
}
.angad-entry-choice:focus-visible,.angad-work-tile:focus-visible,.nav-btn:focus-visible,
.angad-work-slot-btn:focus-visible,.btn:focus-visible,.work-manage-summary565:focus-visible {
  outline:3px solid #397bc9!important;outline-offset:3px!important;
}
/* Shared module header grammar; keep the same hierarchy, distinct identities. */
.angad-inside-toolbar {margin:2px 1px 12px}
.angad-inside-toolbar button {border:1px solid #d5e3df;border-radius:999px;background:#fff;color:#194f4b;font-size:11px;font-weight:850;box-shadow:0 3px 9px rgba(16,45,46,.05);padding:11px 14px;min-height:40px}
.angad-inside-toolbar span {font-size:10px;letter-spacing:.17em;color:#58716b}
.play-home-hero,.angad-work-hero {
  position:relative; isolation:isolate;overflow:hidden;
  border-radius:30px;min-height:247px;padding:27px 22px 23px;
  box-shadow:0 18px 35px rgba(8,34,40,.19);margin-bottom:21px;
}
.play-home-hero {
  background:radial-gradient(circle at 98% 6%,rgba(199,255,88,.28) 0%,transparent 39%),linear-gradient(134deg,#072d2b 6%,#0c5041 52%,#079075 100%);
}
.angad-work-hero {
  background:radial-gradient(circle at 95% 8%,rgba(162,194,255,.32),transparent 38%),linear-gradient(137deg,#10283a 4%,#21416f 56%,#4160ab 100%);
}
.play-home-hero::after,.angad-work-hero::after {
  content:"";position:absolute;right:-18px;bottom:-64px;width:190px;height:190px;
  border-radius:50%;border:20px solid rgba(255,255,255,.09);
  box-shadow:0 0 0 28px rgba(255,255,255,.045);transform:none;left:auto;top:auto;z-index:-1;pointer-events:none;
}
.play-home-hero::before,.angad-work-hero::before {
  content:"";position:absolute;right:10px;top:13px;width:74px;height:74px;
  border-radius:20px;border:1px solid rgba(255,255,255,.15);
  transform:rotate(-16deg);background:rgba(255,255,255,.045);z-index:-1;
}
.play-home-hero h1,.angad-work-hero h1 {
  position:relative;font-family:'Sora',system-ui,sans-serif;
  font-size:clamp(33px,8.2vw,42px);line-height:1.05;letter-spacing:-.065em;
  font-weight:800;margin:10px 0 11px;max-width:425px;
}
.play-home-hero h1 em {color:var(--genz-lime)}
.angad-work-hero h1 em {color:#a8f5ff}
.play-home-hero p,.angad-work-hero p {color:rgba(255,255,255,.88);font-size:13px;line-height:1.55;max-width:315px;font-weight:500}
.play-home-kicker,.angad-work-hero .hero-kicker {letter-spacing:.16em;font-size:10px;font-weight:900}
.angad-work-hero .hero-kicker {color:#b6eaff}
.hero-quick-actions {position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}
.play-home-hero .btn,.angad-work-hero .btn {min-height:43px;border-radius:14px;font-weight:900;font-size:12px;padding:11px 13px;box-shadow:none}
.play-home-hero .btn:first-child {background:var(--genz-lime);border-color:var(--genz-lime);color:#133527}
.angad-work-hero .btn:first-child {background:#baf1ff;border-color:#baf1ff;color:#14384c}
.play-home-hero .btn.secondary,.angad-work-hero .btn.secondary {background:rgba(255,255,255,.115);border:1px solid rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(9px)}
.angad-work-heading h2,.home-label-row h2,.section-title h2 {font-family:'Sora',system-ui,sans-serif;letter-spacing:-.04em}
.angad-work-heading h2 {font-size:20px}
.home-label-row h2 {font-size:20px}
/* Workspace cards use the same touch-forward language as PLAY. */
.angad-work-tiles {gap:11px}
.angad-work-tile {
  min-height:150px;padding:17px;border-radius:23px;background:#fff;
  border-color:#d7e5e8;transition:transform .19s ease,box-shadow .19s ease;
  box-shadow:0 7px 18px rgba(9,43,56,.065);
}
.angad-work-tile span {width:45px;height:45px;display:grid;place-items:center;margin:0 0 15px;background:#edf3fa;color:#184363;border-radius:14px;font-size:25px}
.angad-work-tile b {font-family:'Sora',system-ui,sans-serif;font-size:14px;letter-spacing:-.035em}
.angad-work-tile small {font-size:11px;line-height:1.4;color:#536e78}
.angad-work-tile:nth-child(1){background:linear-gradient(148deg,#e0f7f5,#f6fffb)}
.angad-work-tile:nth-child(2){background:linear-gradient(148deg,#f0eaff,#fafdff);border-color:#dad0f2}
.angad-work-tile:nth-child(3){background:linear-gradient(148deg,#e4efff,#fff)}
.angad-work-tile:nth-child(4){background:linear-gradient(148deg,#e5f5fc,#fff)}
.angad-work-tile:last-child{background:linear-gradient(114deg,#fff0df,#fffaf1);border-color:#f1dbbd;min-height:109px}
.angad-work-tile[aria-pressed="true"] {background:#d9f9ff;border-color:#158395;box-shadow:inset 0 0 0 2px #158395,0 9px 17px rgba(20,105,125,.15)}
.angad-work-tile[aria-pressed="true"]::after{content:"✓";position:absolute;top:11px;right:11px;background:#125668;color:white;border-radius:50%;height:23px;width:23px;display:grid;place-items:center;font-weight:900;font-size:12px}
.angad-work-tile {position:relative}
.angad-work-form {border-top:4px solid #3b77ca;box-shadow:0 13px 25px rgba(8,41,54,.055);border-radius:27px}
.angad-work-form .section-title h2{font-size:21px}
.angad-work-price{background:#eaf8fe;border-color:#c7eaf0;border-radius:18px}
.angad-work-slot-btn {min-height:36px}
.angad-work-slot-btn[aria-pressed="true"]{background:#1b6f87;color:#fff}
.field,.work-planner-section565 input:not([type="checkbox"]),.work-planner-section565 select {min-height:45px;border-radius:14px}
/* Consistent cards and section spacing */
.card {border-radius:23px;box-shadow:0 8px 20px rgba(12,38,43,.06)}
.btn {border-radius:14px;min-height:41px}
.btn:focus-visible,.field:focus-visible {outline:3px solid rgba(42,123,173,.58);outline-offset:2px}
.work-staff-launch565 {border-top:4px solid #566bd9!important;border-radius:23px}
.work-manage-summary565 {background:linear-gradient(125deg,#e2f5fe,#e9edff);color:#1b527c;border:1px solid #c9e4f4;border-radius:15px;min-height:46px}
.work-planner-section565 {border-radius:19px;background:#fcfefe}
/* Floating navigation dock, still six original controls; no navigation rewrites. */
.bottom-nav.modern-nav {
  left:50%;bottom:calc(9px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);width:min(542px,calc(100% - 16px));
  border:1px solid rgba(199,229,225,.19);border-radius:23px;
  height:72px;padding:5px 4px;grid-template-columns:repeat(6,minmax(0,1fr))!important;
  background:rgba(7,30,36,.96);color:#fff;
  box-shadow:0 14px 33px rgba(5,22,32,.29);overflow:visible;
}
.bottom-nav.modern-nav .nav-btn {border-radius:18px;min-height:59px;padding:7px 1px;font-size:9.5px;color:#b3c8cb;gap:4px;font-weight:750}
.bottom-nav.modern-nav .nav-btn > span {font-size:19px;line-height:22px}
.bottom-nav.modern-nav .nav-btn.active {background:var(--genz-lime);color:#173025;font-weight:900;box-shadow:0 5px 13px rgba(212,255,67,.15)}
.bottom-nav.modern-nav .nav-btn.active::before {display:none}
/* Hover is additive; never impede touch or accessibility. */
@media(max-width:390px){
 .angad-entry-intro {min-height:272px;padding:27px 20px 25px}
 .angad-entry-intro h1{font-size:clamp(29px,8vw,34px)}
 .angad-entry-choice{min-height:223px;padding:15px 12px}
 .angad-choice-icon{width:50px;height:50px;min-height:50px;margin-bottom:14px}
 .angad-choice-content b{font-size:27px}
 .angad-choice-content>span{font-size:10px}
 .topbar .angad-name{font-size:21px}
 .topbar .angad-brand-home .play-name{font-size:8px!important;letter-spacing:0!important}
 .bottom-nav.modern-nav .nav-btn{font-size:9px}
}
@media(max-width:330px){
 .topbar {padding-left:12px;padding-right:12px}
 .topbar .angad-brand-home{gap:4px}
 .angad-entry-choice {min-height:219px}
 .bottom-nav.modern-nav .nav-btn{font-size:8px}
 .bottom-nav.modern-nav .nav-btn >span{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .angad-entry-choice,.angad-work-tile,.btn {transition:none!important}
  .angad-entry-choice:hover,.angad-work-tile:hover,.btn:hover{transform:none!important}
}