:root{
    --gold:#c08f2e; --gold-light:#a87a1f; --gold-dim:rgba(192,143,46,0.10);
    /* Light theme: "black-*" tokens are now light surfaces, "white" is dark text.
       This keeps all existing rules working while flipping the look. */
    --black:#F4F5F7;    /* page background */
    --black-2:#FFFFFF;  /* cards / panels */
    --black-3:#F0F1F3;  /* inputs / subtle fills */
    --black-4:#DFE1E5;  /* borders */
    --white:#1F2328;    /* primary text */
    --white-dim:rgba(31,35,40,0.58);  /* secondary text */
    --radius:8px;
    --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{font-family:var(--font);background:#000;color:var(--white);min-height:100%;font-size:15px;line-height:1.5;overflow-x:hidden;}
  /* Room/results page uses the light background; the chooser page stays black */
  body.results-mode{background:var(--black);}
  .results-greeting{max-width:1180px;margin:0 auto 1rem;color:var(--gold);font-size:1.05rem;font-weight:600;padding:0 0.2rem;}
  a{color:var(--gold);}
  .wrap{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 4rem;}

  header.top{display:flex;align-items:center;gap:0.9rem;padding:0.4rem 0 1.6rem;border-bottom:1px solid var(--black-4);margin-bottom:1.8rem;}
  .top-logo{height:52px;width:auto;object-fit:contain;flex:0 0 auto;}
  .brand{font-size:1.5rem;font-weight:700;color:var(--gold);letter-spacing:0.12em;}
  .subtitle{color:var(--white-dim);font-size:0.85rem;margin-top:0.15rem;}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem;align-items:start;}
  .bld-group{animation:fadeUp 0.4s ease both;margin-bottom:2rem;}
  .bld-group:last-child{margin-bottom:0;}
  .bld-title{font-size:1.05rem;font-weight:700;color:var(--white);margin:0 0 0.9rem;
    padding-bottom:0.5rem;border-bottom:2px solid var(--gold-dim);display:flex;align-items:baseline;gap:0.6rem;}
  .bld-count{font-size:0.75rem;font-weight:500;color:var(--white-dim);}
  .card{background:var(--black-2);border:1px solid var(--black-4);border-radius:var(--radius);overflow:hidden;
    cursor:pointer;transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s;box-shadow:0 1px 3px rgba(31,35,40,0.06);}
  .card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,35,40,0.12);}
  .card-photo{width:100%;height:auto;display:block;background:var(--black-3);}
  .card-photo.placeholder{height:170px;display:flex;align-items:center;justify-content:center;color:var(--white-dim);font-size:0.85rem;background:var(--black-3);}
  .card-body{padding:0.85rem 1rem 1rem;}
  .card-name{font-size:1.05rem;font-weight:700;color:var(--white);}
  .card-meta{color:var(--white-dim);font-size:0.82rem;margin-top:0.2rem;}
  .chip{display:inline-block;font-size:0.68rem;padding:0.15rem 0.5rem;border-radius:20px;margin-top:0.55rem;
    background:var(--gold-dim);color:var(--gold-light);border:1px solid rgba(192,143,46,0.30);}
  .chip.gender-m{background:rgba(82,153,192,0.15);color:#5299c0;border-color:rgba(82,153,192,0.4);}
  .chip.gender-f{background:rgba(200,100,140,0.15);color:#c8648c;border-color:rgba(200,100,140,0.4);}

  .loading,.empty{color:var(--white-dim);text-align:center;padding:3rem 1rem;}

  /* Chooser screen */
  .chooser{max-width:640px;margin:2.5rem auto;background:var(--black-2);border:1px solid var(--black-4);
    border-radius:12px;padding:2.2rem 2rem;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
  .chooser-head{text-align:center;margin-bottom:1.2rem;}
  .chooser-logo{height:64px;width:auto;object-fit:contain;margin-bottom:0.7rem;}
  .chooser-head .brand{color:var(--gold);font-size:1.15rem;font-weight:700;letter-spacing:0.02em;}
  .chooser-head .subtitle{color:var(--white-dim);font-size:0.85rem;margin-top:0.2rem;}
  .chooser-divider{border:none;border-top:1px solid var(--black-4);margin:1.2rem 0 1.4rem;}
  .chooser-title{color:var(--gold);font-size:1.4rem;font-weight:700;}
  .chooser-sub{color:var(--white-dim);font-size:0.9rem;margin:0.4rem 0 1.6rem;}
  .chooser-field{margin-bottom:1.4rem;}
  .chooser-field > label{display:block;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.07em;
    color:var(--white-dim);margin-bottom:0.6rem;}
  .reg-row{display:flex;gap:1.5rem;}
  .reg-opt{display:flex;align-items:center;gap:0.4rem;font-size:0.92rem;color:var(--white);cursor:pointer;text-transform:none;letter-spacing:0;}
  .reg-opt input{cursor:pointer;}
  .opt-row{display:flex;flex-wrap:wrap;gap:0.5rem;}
  .opt{padding:0.5rem 1rem;border-radius:20px;border:1px solid var(--black-4);background:var(--black-3);
    color:var(--white);cursor:pointer;font-size:0.85rem;transition:0.15s;}
  .opt:hover{border-color:var(--gold);}
  .opt.sel{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600;}
  .opt-select{width:100%;padding:0.65rem 0.8rem;border-radius:8px;border:1px solid var(--black-4);
    background:var(--black-2);color:var(--white);font-size:0.92rem;font-family:inherit;cursor:pointer;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c08f2e' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 0.85rem center;padding-right:2rem;}
  .opt-select:focus{outline:none;border-color:var(--gold);}
  .text-input{width:100%;padding:0.65rem 0.8rem;border-radius:8px;border:1px solid var(--black-4);
    background:var(--black-2);color:var(--white);font-size:0.92rem;font-family:inherit;}
  .text-input:focus{outline:none;border-color:var(--gold);}
  .link-btn{display:block;text-align:center;width:100%;padding:0.7rem;border:1px solid var(--gold);border-radius:var(--radius);
    background:transparent;color:var(--gold);font-weight:600;font-size:0.9rem;text-decoration:none;margin-bottom:0.6rem;transition:0.15s;}
  .link-btn:hover{background:var(--gold-dim);}
  .as-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;padding:1.5rem;opacity:0;transition:opacity 0.2s;}
  .as-overlay.open{opacity:1;}
  .as-box{background:var(--black-2);border:1px solid var(--black-4);border-radius:14px;max-width:420px;width:100%;padding:2rem 1.6rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
  .as-icon{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
  .as-title{font-size:1.4rem;font-weight:700;color:var(--gold);}
  .as-sub{color:var(--white-dim);font-size:0.9rem;margin:0.5rem 0 1.5rem;line-height:1.5;}
  .as-actions{display:flex;flex-direction:column;gap:0.5rem;}
  .as-actions .link-btn{margin-bottom:0;}
  .bf-notice{background:rgba(224,82,82,0.10);border:1px solid rgba(224,82,82,0.4);color:var(--white);
    border-radius:8px;padding:0.6rem 0.8rem;font-size:0.8rem;margin-bottom:0.9rem;}
  .bf-check{display:flex;align-items:center;gap:0.5rem;font-size:0.86rem;color:var(--white);cursor:pointer;margin-bottom:0.8rem;}
  .bf-check input{width:auto;cursor:pointer;}
  .see-btn{width:100%;padding:0.8rem;border:none;border-radius:var(--radius);background:var(--gold);
    color:#fff;font-weight:700;font-size:0.95rem;cursor:pointer;margin-top:0.4rem;}
  .see-btn:hover{background:var(--gold-light);}
  .results-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;gap:1rem;flex-wrap:wrap;}
  .results-summary{color:var(--white-dim);font-size:0.9rem;}
  .results-summary b{color:var(--white);}
  .change-btn{background:var(--black-3);border:1px solid var(--black-4);color:var(--white);border-radius:6px;
    padding:0.45rem 0.9rem;cursor:pointer;font-size:0.83rem;}
  .change-btn:hover{border-color:var(--gold);}

  /* Modal */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:none;align-items:flex-start;justify-content:center;
    padding:2rem 1rem;overflow-y:auto;z-index:100;}
  .overlay.open{display:flex;}
  .modal{background:var(--black-2);border:1px solid var(--black-4);border-radius:var(--radius);max-width:760px;width:100%;
    box-shadow:0 12px 40px rgba(31,35,40,0.18);}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--black-4);}
  .modal-head h3{color:var(--gold);font-size:1.15rem;font-weight:600;}
  .close-btn{background:none;border:none;color:var(--white-dim);font-size:1.5rem;cursor:pointer;line-height:1;}
  .modal-body{padding:1.2rem;}

  /* Carousel */
  .carousel{position:relative;background:var(--black-3);border-radius:var(--radius);overflow:hidden;border:1px solid var(--black-4);}
  .carousel img{width:100%;max-height:60vh;object-fit:contain;background:#000;display:block;}
  .carousel .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.55);color:#fff;border:none;
    border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1.2rem;}
  .carousel .nav.prev{left:8px;} .carousel .nav.next{right:8px;}
  .carousel .count{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);
    color:#fff;border-radius:12px;padding:0.15rem 0.6rem;font-size:0.72rem;}
  .no-photo{height:220px;display:flex;align-items:center;justify-content:center;color:var(--white-dim);
    background:var(--black-3);border:1px dashed var(--black-4);border-radius:var(--radius);font-size:0.9rem;}
  .thumbs{display:flex;gap:0.4rem;margin-top:0.5rem;overflow-x:auto;}
  .thumbs img{width:56px;height:44px;object-fit:cover;border-radius:4px;cursor:pointer;flex:0 0 auto;border:2px solid transparent;}
  .thumbs img.active{border-color:var(--gold);}

  /* Calendar */
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin:1.3rem 0 0.6rem;}
  .cal-head .month{font-weight:600;color:var(--white);font-size:0.98rem;}
  .cal-nav{background:var(--black-3);border:1px solid var(--black-4);color:var(--white);border-radius:6px;
    width:32px;height:32px;cursor:pointer;font-size:1rem;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal-dow{text-align:center;color:var(--white-dim);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;padding:0.3rem 0;}
  .cal-cell{aspect-ratio:1/1;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:0.8rem;border:1px solid var(--black-4);background:var(--black-3);}
  .cal-cell.empty{background:transparent;border:none;}
  .cal-cell .dnum{font-weight:600;}
  .cal-cell .free{font-size:0.6rem;margin-top:2px;}
  .cal-cell .compact-label{display:none;}
  .cal-cell.free-full{background:var(--gold-dim);border-color:var(--gold);color:var(--gold-light);}
  .cal-cell.free-some{background:rgba(212,166,78,0.07);border-color:rgba(212,166,78,0.45);}
  .cal-cell.free-none{background:var(--black-3);border-color:var(--black-4);color:var(--white-dim);opacity:0.55;}
  .cal-cell.family{background:transparent;border-color:var(--gold);border-style:dashed;color:var(--gold-light);}
  /* Gender lock overlay — colors the day by who can book it (overrides availability color) */
  .cal-cell.gender-m{background:rgba(82,153,192,0.16);border-color:rgba(82,153,192,0.55);color:#5299c0;}
  .cal-cell.gender-f{background:rgba(200,100,140,0.16);border-color:rgba(200,100,140,0.55);color:#c8648c;}
  .cal-cell.past{opacity:0.35;}
  .legend{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:0.9rem;font-size:0.72rem;color:var(--white-dim);}
  .legend .dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:0.35rem;vertical-align:-1px;}
  .cap-note{color:var(--white-dim);font-size:0.8rem;margin-top:0.3rem;}
  .bf-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:0.8rem;}
  .bf-row-3{grid-template-columns:1fr 1fr 1fr;}
  .bf-field{display:flex;flex-direction:column;gap:0.3rem;}
  .bf-field.full{margin-bottom:0.8rem;}
  .bf-field > label{font-size:0.75rem;color:var(--white-dim);font-weight:600;}
  .course-pills{display:flex;flex-wrap:wrap;gap:0.5rem;}
  .course-pill{padding:0.5rem 0.95rem;border-radius:22px;border:1.5px solid var(--black-4);background:var(--black-2);
    color:var(--white);font-size:0.85rem;font-family:inherit;cursor:pointer;transition:all 0.15s;}
  .course-pill:hover{border-color:var(--gold);color:var(--gold);}
  .course-pill.active{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600;
    box-shadow:0 2px 8px rgba(192,143,46,0.35);}
  .course-pill.active::before{content:"✓ ";}
  .bf-field input, .bf-field select, .bf-field textarea{
    background:var(--black-3);border:1px solid var(--black-4);color:var(--white);border-radius:6px;
    padding:0.55rem 0.65rem;font-size:0.88rem;font-family:inherit;width:100%;}
  .bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus{outline:none;border-color:var(--gold);}
  .bf-field textarea{resize:vertical;}
  @media (max-width:520px){ .bf-row{grid-template-columns:1fr;} }

  /* ─── Animations ─────────────────────────────────────────── */
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes popIn{from{opacity:0;transform:scale(0.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
  @keyframes spin{to{transform:rotate(360deg);}}
  .top{animation:fadeIn 0.5s ease both;}
  .chooser{animation:fadeUp 0.45s ease both;}
  .card{animation:fadeUp 0.4s ease both;}
  .see-btn{transition:background 0.15s, transform 0.1s;}
  .see-btn:hover{transform:translateY(-1px);}
  .see-btn:active{transform:translateY(0) scale(0.99);}
  .change-btn{transition:border-color 0.15s, transform 0.1s;}
  .change-btn:active{transform:scale(0.97);}
  .opt-select{transition:border-color 0.15s;}
  .overlay{transition:opacity 0.2s ease;}
  .modal{animation:popIn 0.28s cubic-bezier(0.2,0.7,0.3,1) both;}
  .carousel img{animation:fadeIn 0.3s ease;}
  .carousel .nav{transition:background 0.15s, transform 0.1s;}
  .carousel .nav:hover{background:rgba(0,0,0,0.75);}
  .carousel .nav:active{transform:translateY(-50%) scale(0.9);}
  .thumbs img{transition:border-color 0.15s, opacity 0.15s, transform 0.1s;}
  .thumbs img:hover{opacity:1;transform:translateY(-1px);}
  .cal-cell{animation:fadeIn 0.3s ease both;}
  .spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--black-4);
    border-top-color:var(--gold);border-radius:50%;animation:spin 0.7s linear infinite;}

  /* Lightbox (enlarged photo, in-page) */
  .lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;
    align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity 0.2s;padding:2rem;}
  .lightbox.open{opacity:1;}
  .lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,0.5);}

  /* Skeleton loading cards */
  @keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
  .skeleton-card{background:var(--black-2);border:1px solid var(--black-4);border-radius:var(--radius);overflow:hidden;}
  .skel{background:linear-gradient(90deg, var(--black-3) 25%, var(--black-4) 37%, var(--black-3) 63%);
    background-size:800px 100%;animation:shimmer 1.3s infinite linear;}
  .skel-photo{width:100%;height:170px;}
  .skel-line{height:12px;border-radius:4px;margin:0.7rem 1rem;}
  .skel-line.short{width:55%;}
  .skel-line.tiny{width:35%;height:9px;}
  @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} }
  @media (max-width:768px){
    .wrap{padding:1.1rem 0.9rem 3rem;}
    .brand{font-size:1.3rem;}
    .top-logo{height:42px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.9rem;}
    .chooser{padding:1.5rem 1.1rem;}
    .overlay{padding:1rem 0.6rem;}
    .modal-head{padding:0.85rem 1rem;}
    .modal-head h3{font-size:1.05rem;}
    .modal-body{padding:1rem;}
  }

  @media (max-width:520px){
    .grid{grid-template-columns:1fr;}
    /* Calendar: shorter cells so the day number + "free" label both fit */
    .cal-grid{gap:3px;}
    .cal-cell{aspect-ratio:auto;min-height:46px;padding:2px;border-radius:4px;}
    .cal-cell .dnum{font-size:0.78rem;}
    .cal-cell .free{font-size:0.52rem;line-height:1.1;margin-top:1px;}
    .cal-dow{font-size:0.58rem;letter-spacing:0.02em;padding:0.2rem 0;}
    .cal-head .month{font-size:0.9rem;}
    .legend{gap:0.5rem 0.8rem;font-size:0.68rem;}
    .results-bar{gap:0.6rem;}
  }

  @media (max-width:400px){
    .cal-cell .full-label{display:none;}
    .cal-cell .compact-label{display:inline;font-size:0.66rem;font-weight:600;}
  }

  @media (max-width:360px){
    .cal-cell{min-height:40px;}
    .cal-cell .dnum{font-size:0.7rem;}
    .cal-cell .free{font-size:0.46rem;}
    .cal-cell .compact-label{font-size:0.62rem;}
    .cal-dow{font-size:0.5rem;}
    .opt{padding:0.45rem 0.75rem;font-size:0.8rem;}
  }