:root{
  --bg:#141413;
  --bg-alt:#1a1a18;
  --panel:#201f1d;
  --panel-2:#262523;
  --beige:#cdbfa4;
  --beige-soft:#8f8272;
  --slate:#57534b;
  --slate-dark:#3c3a35;
  --text:#f2efe9;
  --text-muted:#a19c92;
  --line: rgba(205,191,164,.18);
  --whatsapp:#3fae5c;
  --ok:#7f9c7a;
  --warn:#b4776b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); font-family:'Work Sans', sans-serif;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:.2px; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.eyebrow{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--beige); font-weight:500; }
::selection{background:var(--beige); color:#1a1a18;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--beige); outline-offset:3px;
}

/* ---------- HEADER ---------- */
header{ position:sticky; top:0; z-index:60; background:rgba(20,20,19,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 32px; max-width:1180px; margin:0 auto; }
.logo{ font-family:'Fraunces', serif; font-size:1.3rem; letter-spacing:.06em; flex-shrink:0; display:flex; align-items:center; }
.logo span{color:var(--beige);}
.logo-img{ height:48px; width:auto; display:block; }
.logo-img.logo-img-footer{ height:38px; }
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a, .nav-links button.link{
  font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);
  transition:color .25s ease; padding:4px 0; border-bottom:1px solid transparent; background:none; border:none;
  font-family:inherit; cursor:pointer;
}
.nav-links a.current{color:var(--beige); border-color:var(--beige);}
.nav-links a:hover, .nav-links button.link:hover{color:var(--text); border-color:var(--beige);}
.nav-right{display:flex; align-items:center; gap:16px;}
.lang-toggle{ display:flex; border:1px solid var(--beige-soft); overflow:hidden; flex-shrink:0; }
.lang-toggle button{
  background:transparent; border:none; color:var(--text-muted); font-size:.72rem; letter-spacing:.08em;
  padding:8px 12px; cursor:pointer; font-family:inherit; transition:.2s ease;
}
.lang-toggle button.active{background:var(--beige); color:#1a1a18; font-weight:600;}
.nav-cta{
  border:1px solid var(--beige-soft); padding:10px 20px; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--beige); transition:.25s ease; white-space:nowrap;
}
.nav-cta:hover{background:var(--beige); color:#1a1a18;}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.4rem; cursor:pointer;}

@media (max-width:940px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg-alt); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links a, .nav-links button.link{padding:16px 32px; width:100%; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* ---------- FLOATING QUICK ACTIONS (phone only; tablet/desktop uses .footer-social instead) ---------- */
.quick-actions{ position:fixed; right:22px; bottom:22px; z-index:70; display:none; flex-direction:column; gap:12px; }
@media (max-width:640px){
  .quick-actions{display:flex;}
}
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5); cursor:pointer; border:1px solid transparent; transition:.2s ease;
}
.fab:hover{transform:translateY(-2px);}
.fab-call{background:var(--beige); color:#1a1a18;}
.fab-whatsapp{background:var(--whatsapp); color:#fff;}
.fab-instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff;}
.fab-tiktok{background:#000; color:#fff;}
.fab-facebook{background:#1877F2; color:#fff;}
.fab svg{width:22px; height:22px;}

/* icons stay collapsed behind the toggle button until tapped */
.quick-actions .fab:not(.fab-toggle){ display:none; }
.quick-actions.open .fab:not(.fab-toggle){ display:flex; }
.fab-toggle{ background:var(--beige); color:#1a1a18; transition:.2s ease, transform .25s ease; }
.fab-toggle.active{ background:var(--slate-dark); color:var(--beige); transform:rotate(180deg); }

/* ---------- FOOTER SOCIAL (tablet/desktop; hidden on phone, .quick-actions is used there instead) ---------- */
.footer-brand{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-social{display:flex; gap:10px; align-items:center;}
@media (max-width:640px){
  .footer-social{display:none;}
}
.social-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:.2s ease; flex-shrink:0;
}
.social-icon:hover{transform:translateY(-2px);}
.social-icon svg{width:17px; height:17px;}
.social-icon.social-call{background:var(--beige); color:#1a1a18;}
.social-icon.social-whatsapp{background:var(--whatsapp); color:#fff;}
.social-icon.social-instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff;}
.social-icon.social-tiktok{background:#000; color:#fff;}
.social-icon.social-facebook{background:#1877F2; color:#fff;}

/* ---------- HERO ---------- */
.hero{ position:relative; padding:120px 32px 100px; overflow:hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(205,191,164,.08), transparent 55%), var(--bg); }
.hero-strands{ position:absolute; inset:0; z-index:0; opacity:.4; pointer-events:none; }
.hero-inner{position:relative; z-index:1; max-width:1180px; margin:0 auto; text-align:center;}
.hero h1{ font-size:clamp(2.6rem, 6vw, 5rem); font-weight:400; line-height:1.05; max-width:840px; margin:22px auto 18px; }
.hero h1 em{ font-style:italic; color:var(--beige); font-weight:300; }
.hero-welcome{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2.6vw, 1.7rem); color:var(--beige); letter-spacing:.01em;
  margin:0 auto 22px; display:flex; align-items:center; justify-content:center; gap:.35em; flex-wrap:wrap;
}
.hero-dm-mark{ height:1.5em; width:auto; display:inline-block; vertical-align:middle; }
.hero p.lede{ max-width:540px; margin:0 auto 40px; color:var(--text-muted); font-size:1.02rem; }
.hero-ctas{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--beige); color:#1a1a18; padding:16px 34px; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; border:1px solid var(--beige); transition:.25s ease; cursor:pointer;
}
.btn-primary:hover{background:transparent; color:var(--beige);}
.btn-ghost{
  padding:16px 34px; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line);
  color:var(--text-muted); transition:.25s ease; cursor:pointer; background:transparent;
}
.btn-ghost:hover{border-color:var(--beige); color:var(--text);}

section{padding:100px 0;}
.page-header{padding:70px 32px 20px; text-align:center;}
.page-header .eyebrow{margin-bottom:14px;}
.page-header h1{font-size:clamp(2.2rem,4.4vw,3.2rem); font-weight:400;}
.page-header p{color:var(--text-muted); margin-top:16px; max-width:560px; margin-left:auto; margin-right:auto;}

.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:400; margin-top:14px;}
.section-head p{color:var(--text-muted); margin-top:16px; font-size:.98rem;}

.about{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; max-width:960px; margin:0 auto; }
.pillar{text-align:center; padding:0 12px;}
.pillar h3{font-size:1.15rem; font-weight:500; margin-bottom:10px;}
.pillar p{color:var(--text-muted); font-size:.92rem;}
.pillar .mark{
  width:38px; height:38px; margin:0 auto 18px; border:1px solid var(--beige-soft); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--beige); font-family:'Fraunces',serif; font-style:italic;
}
@media (max-width:720px){ .pillars{grid-template-columns:1fr; gap:36px;} }

/* ---------- HOME TEASER (services/contact link cards) ---------- */
.teaser-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:960px; margin:0 auto; }
.teaser-card{
  background:var(--panel); border:1px solid var(--line); padding:36px 32px; transition:.2s ease;
}
.teaser-card:hover{border-color:var(--beige-soft);}
.teaser-card h3{font-size:1.3rem; font-weight:500; margin-bottom:10px;}
.teaser-card p{color:var(--text-muted); font-size:.92rem; margin-bottom:20px;}
.teaser-card .go{color:var(--beige); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
@media (max-width:720px){ .teaser-grid{grid-template-columns:1fr;} }

/* ---------- BOOKING LAYOUT ---------- */
/* the appointment summary is a slide-over drawer (opened via the header cart button),
   not an inline column, so the service list gets the full width on every screen size */
.booking-layout{ display:block; }

.cat-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.cat-tab{
  padding:9px 18px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line);
  color:var(--text-muted); cursor:pointer; transition:.2s ease; background:transparent;
}
.cat-tab.active, .cat-tab:hover{border-color:var(--beige); color:var(--beige);}

.service-group{margin-bottom:48px;}
.service-group h3{font-size:1.3rem; font-weight:400; margin-bottom:4px; color:var(--beige);}
.service-group .group-sub{color:var(--text-muted); font-size:.85rem; margin-bottom:20px;}
.service-card{ padding:24px 0; border-bottom:1px solid var(--line); }
.service-info h4{font-size:1.05rem; font-weight:500; margin-bottom:6px;}
.service-info p.desc{color:var(--text-muted); font-size:.86rem; max-width:460px;}
.service-notes{list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:4px;}
.service-notes li{ color:var(--text-muted); font-size:.76rem; padding-left:14px; position:relative; max-width:460px; }
.service-notes li::before{ content:"—"; position:absolute; left:0; color:var(--beige-soft); }

.service-row-single{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; }
.service-meta{ display:flex; gap:14px; align-items:center; font-size:.78rem; color:var(--text-muted); letter-spacing:.03em; }
.service-meta .price{color:var(--beige); font-weight:600; font-size:.92rem;}
.add-btn{
  border:1px solid var(--beige-soft); background:transparent; color:var(--beige); width:42px; height:42px; border-radius:50%;
  font-size:1.3rem; cursor:pointer; transition:.2s ease; display:flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0;
}
.add-btn:hover{background:var(--beige); color:#1a1a18;}
.add-btn.added{background:var(--slate); border-color:var(--slate); color:var(--text); font-size:1rem;}

.service-options{margin-top:16px; display:flex; flex-direction:column; gap:10px;}
.option-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border:1px solid var(--line); background:var(--panel);
}
.option-row .opt-label{font-size:.9rem; font-weight:500;}
.option-row .opt-meta{display:flex; gap:12px; align-items:center; font-size:.78rem; color:var(--text-muted);}
.option-row .opt-meta .price{color:var(--beige); font-weight:600; font-size:.9rem;}

/* ---------- CART BUTTON (header) ---------- */
.cart-btn{
  position:relative; background:transparent; border:1px solid var(--beige-soft); color:var(--beige);
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:.2s ease;
}
.cart-btn:hover{ background:var(--beige); color:#1a1a18; }
.cart-btn svg{ width:19px; height:19px; }
.cart-badge{
  position:absolute; top:-6px; right:-6px; background:var(--warn); color:#fff; font-size:.68rem; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- TICKET / SUMMARY DRAWER ---------- */
/* opened via the header cart button; stays fixed to the viewport so it's always fully
   visible once open, regardless of how the page underneath is scrolled */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(10,10,9,.65); z-index:90; display:none; }
.drawer-backdrop.open{ display:block; }
.ticket{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 100%); z-index:95;
  background:var(--panel); border-left:1px solid var(--beige-soft); padding:34px 28px 28px;
  overflow-y:auto; transform:translateX(100%); transition:transform .3s ease;
}
.ticket.open{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-muted);
  font-size:1.4rem; cursor:pointer; line-height:1; padding:4px;
}
.drawer-close:hover{ color:var(--beige); }
.ticket-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed var(--beige-soft); padding-bottom:16px; margin-bottom:18px; margin-top:20px; }
.ticket-head h3{font-size:1.15rem; font-weight:500;}
.ticket-head span{font-size:.7rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase;}
.ticket-empty{color:var(--text-muted); font-size:.88rem; padding:14px 0 22px;}
.ticket-item{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.ticket-item .ti-name{font-weight:500;}
.ticket-item .ti-meta{color:var(--text-muted); font-size:.76rem; margin-top:3px;}
.ticket-item .ti-remove{background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; padding:2px 4px; flex-shrink:0;}
.ticket-item .ti-remove:hover{color:var(--warn);}
.ticket-totals{margin-top:18px; padding-top:16px; border-top:1px dashed var(--beige-soft);}
.ticket-totals .row{display:flex; justify-content:space-between; font-size:.86rem; color:var(--text-muted); margin-bottom:8px;}
.ticket-totals .row.total{color:var(--text); font-size:1.05rem; font-weight:600; margin-top:6px;}
.ticket-totals .row.total span:last-child{color:var(--beige);}

.schedule{margin-top:26px; padding-top:22px; border-top:1px dashed var(--beige-soft);}
.schedule label{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; margin-top:16px; }
.schedule label:first-child{margin-top:0;}
input[type=date], input[type=text], input[type=email], input[type=tel], input[type=password], textarea, select{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:12px 14px;
  font-family:'Work Sans',sans-serif; font-size:.92rem;
}
input:focus, textarea:focus, select:focus{border-color:var(--beige);}
.time-slots{display:flex; flex-wrap:wrap; gap:8px;}
.slot{ padding:8px 10px; font-size:.76rem; border:1px solid var(--line); color:var(--text-muted); cursor:pointer; transition:.2s ease; background:transparent; }
.slot.selected{border-color:var(--beige); color:var(--beige); background:rgba(205,191,164,.08);}
.slot:hover:not(.taken){border-color:var(--beige); color:var(--beige);}
.slot.taken{ color:#6b6862; border-color:var(--line); text-decoration:line-through; cursor:not-allowed; opacity:.55; }
.slot-legend{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap;}
.slot-legend span{font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:6px;}
.slot-legend .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.dot-open{background:var(--ok);}
.dot-taken{background:var(--warn);}

.ticket-submit{
  width:100%; margin-top:24px; background:var(--beige); color:#1a1a18; border:none; padding:15px; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; cursor:pointer; transition:.2s ease;
}
.ticket-submit:hover{background:#ddd0b6;}
.ticket-submit:disabled{background:var(--panel-2); color:var(--text-muted); cursor:not-allowed;}
.ticket-note{font-size:.72rem; color:var(--text-muted); margin-top:12px; text-align:center;}
.confirm-box{text-align:center; padding:20px 4px;}
.confirm-box .mark{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--beige); display:flex; align-items:center;
  justify-content:center; margin:0 auto 16px; color:var(--beige); font-size:1.3rem;
}
.confirm-box h4{font-size:1.15rem; margin-bottom:8px;}
.confirm-box p{color:var(--text-muted); font-size:.86rem; margin-bottom:18px;}

/* ---------- CONTACT ---------- */
.contact-layout{ max-width:640px; margin:0 auto; }
.contact-info h2{font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:400; margin:14px 0 20px;}
.contact-info p.lede{color:var(--text-muted); margin-bottom:32px; max-width:440px;}
.info-row{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.info-row:last-of-type{border-bottom:1px solid var(--line);}
.info-row .label{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--beige); width:110px; flex-shrink:0;}
.info-row .value{color:var(--text); font-size:.95rem;}
.info-row .value .muted{color:var(--text-muted); display:block; font-size:.85rem; margin-top:2px;}

.contact-quick{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
@media (max-width:640px){
  .contact-info{ text-align:center; }
  .contact-info p.lede{ margin-left:auto; margin-right:auto; }
  .info-row{ flex-direction:column; align-items:center; gap:4px; text-align:center; }
  .info-row .label{ width:auto; }
  .info-row .value{ word-break:break-word; }
  .contact-quick{ justify-content:center; }
}
.quick-btn{
  display:flex; align-items:center; gap:9px; padding:13px 20px; font-size:.8rem; letter-spacing:.05em;
  border:1px solid var(--beige-soft); cursor:pointer; transition:.2s ease; text-transform:uppercase; background:transparent; color:var(--text);
}
.quick-btn svg{width:16px; height:16px;}
.quick-btn.call{color:var(--beige);}
.quick-btn.call:hover{background:var(--beige); color:#1a1a18;}
.quick-btn.whatsapp{color:var(--whatsapp); border-color:var(--whatsapp);}
.quick-btn.whatsapp:hover{background:var(--whatsapp); color:#fff;}
.quick-btn.check{color:var(--text-muted);}
.quick-btn.check:hover{border-color:var(--beige); color:var(--beige);}

.field{margin-bottom:18px;}
.field label{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;}

footer{padding:48px 0; border-top:1px solid var(--line);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-inner .logo{font-size:1.1rem;}
footer .fine{color:var(--text-muted); font-size:.78rem;}
.footer-links{display:flex; gap:24px; align-items:center;}
.footer-links a{color:var(--text-muted); font-size:.82rem; transition:.2s ease;}
.footer-links a:hover{color:var(--beige);}
.footer-links .staff-link{font-size:.72rem; opacity:.6;}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,10,9,.75); z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open{display:flex;}
.modal{ background:var(--panel); border:1px solid var(--beige-soft); max-width:420px; width:100%; padding:34px 30px; position:relative; max-height:88vh; overflow-y:auto; }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; line-height:1; }
.modal-close:hover{color:var(--beige);}
.modal h3{font-size:1.2rem; font-weight:500; margin-bottom:10px;}
.modal p.sub{color:var(--text-muted); font-size:.86rem; margin-bottom:22px;}
.modal .field{margin-bottom:16px;}
.modal-result{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--beige-soft); }
.booking{ padding:14px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.booking .bk-date{color:var(--beige); font-weight:600;}
.booking .bk-services{color:var(--text-muted); font-size:.82rem; margin-top:4px;}
.booking .bk-accept{margin-top:8px;}
.accept-btn{
  background:transparent; border:1px solid var(--beige-soft); color:var(--beige); padding:6px 14px; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:.2s ease;
}
.accept-btn:hover{background:var(--beige); color:#1a1a18;}
.accepted-tag{color:var(--ok); font-size:.78rem; font-weight:600;}
.cancel-btn{
  background:transparent; border:1px solid var(--warn); color:var(--warn); padding:6px 14px; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:.2s ease;
}
.cancel-btn:hover{background:var(--warn); color:#fff;}
.cancelled-tag{color:var(--warn); font-size:.78rem; font-weight:600;}
.modal-fallback{margin-top:18px; font-size:.84rem; color:var(--text-muted);}
.modal-fallback .contact-quick{margin-top:12px;}

/* ---------- STAFF PIN GATE ---------- */
.pin-gate{ min-height:44vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.pin-box{ background:var(--panel); border:1px solid var(--beige-soft); padding:40px 34px; max-width:380px; width:100%; text-align:center; }
.pin-box h3{font-size:1.2rem; margin-bottom:10px;}
.pin-box p{color:var(--text-muted); font-size:.88rem; margin-bottom:22px;}
.pin-box input{text-align:center; letter-spacing:.3em; font-size:1.1rem; margin-bottom:16px;}
.pin-error{color:var(--warn); font-size:.82rem; margin-top:14px;}

/* ---------- MANAGE PAGE ---------- */
.manage-panel{ background:var(--panel); border:1px solid var(--line); padding:32px; margin-bottom:32px; }
.manage-panel h3{font-size:1.1rem; margin-bottom:6px;}
.manage-panel .sub{color:var(--text-muted); font-size:.85rem; margin-bottom:22px;}
.day-slot-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:flex-start;}
.day-slot{
  border:1px solid var(--line); font-size:.8rem; min-width:168px; overflow:hidden;
}
.day-slot-time{ padding:8px 12px; font-weight:600; background:var(--panel-2); border-bottom:1px solid var(--line); }
.worker-row{
  padding:7px 12px; cursor:pointer; transition:.2s ease; display:flex; flex-direction:column; gap:1px;
}
.worker-row + .worker-row{ border-top:1px dashed var(--line); }
.worker-row .w-label{ font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.worker-row .w-status{ font-size:.78rem; }
.worker-row.open .w-status{ color:var(--ok); }
.worker-row.open:hover{ background:rgba(127,156,122,.1); }
.worker-row.booked{ background:rgba(180,119,107,.08); }
.worker-row.booked .w-status{ color:var(--warn); font-weight:600; }
.worker-row.blocked{ background:rgba(87,83,75,.18); }
.worker-row.blocked .w-status{ color:var(--text-muted); }
.notice-banner{
  background:var(--panel-2); border:1px solid var(--beige-soft); padding:16px 20px; font-size:.82rem;
  color:var(--text-muted); margin-bottom:40px;
}
.notice-banner strong{color:var(--beige);}
.manual-form{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
.manual-form .field{margin-bottom:0;}
.manual-form .full{grid-column:1 / -1;}
@media (max-width:640px){ .manual-form{grid-template-columns:1fr;} }