:root { --espresso:#31170d; --coffee:#55301f; --gold:#d9ad70; --cream:#f5eee6; --ivory:#fcfaf6; --ink:#281913; --muted:#786861; --line:#e5d9ce; --danger:#a63f39; --serif:"29LT Zeyn","Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:radial-gradient(circle at 90% 8%,rgba(217,173,112,.12),transparent 24%),#f4f0eb; font-size:16px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.auth-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#8a5b3a 0,transparent 34%),linear-gradient(145deg,#241108,#4d2818); }
.login-card { width:min(460px,100%); padding:42px; border-radius:28px; background:rgba(255,252,247,.97); box-shadow:0 28px 100px rgba(0,0,0,.28); }
.monogram { width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--espresso); color:var(--gold); font:italic 1.5rem var(--serif); margin-bottom:26px; }
.eyebrow { margin:0 0 8px; color:#956746; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.25em; }
h1 { margin:0; font:400 clamp(2rem,4vw,3rem)/1 var(--serif); }
.intro { color:var(--muted); margin:16px 0 28px; }
label { display:grid; gap:8px; color:#58483f; font-size:.84rem; font-weight:700; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:#fffefa; color:var(--ink); padding:12px 13px; outline:none; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
input:focus,textarea:focus { border-color:#a56e44; box-shadow:0 0 0 3px rgba(165,110,68,.14); }
textarea { resize:vertical; }
.primary,.secondary,.ghost,.upload-button,.delete { border-radius:999px; padding:11px 18px; border:1px solid transparent; font-weight:750; text-decoration:none; text-align:center; }
.primary { background:var(--espresso); color:white; }
.primary:hover { background:#4a2617; }
.secondary { color:var(--coffee); border-color:var(--line); background:white; }
.ghost { background:transparent; color:var(--muted); border-color:transparent; }
#login-form { display:grid; gap:17px; }
.form-message { min-height:22px; margin:0; color:var(--danger); font-size:.85rem; }
.back-link { display:block; margin-top:18px; color:var(--muted); text-align:center; font-size:.85rem; }
.admin-shell { min-height:100vh; padding-bottom:100px; }
.admin-header { height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(18px,4vw,55px); color:white; background:linear-gradient(110deg,#2b130a,#482517); position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(217,173,112,.25); box-shadow:0 10px 30px rgba(49,23,13,.13); }
.admin-brand { color:white; text-decoration:none; font:1.6rem var(--serif); }
.admin-brand span { display:block; color:var(--gold); font:600 .55rem var(--sans); letter-spacing:.28em; text-transform:uppercase; }
.header-actions { display:flex; align-items:center; gap:10px; }
.save-status { color:#f0cfa2; font-size:.82rem; }
.admin-header .secondary { color:white; border-color:rgba(255,255,255,.25); background:transparent; }
.admin-header .ghost { color:rgba(255,255,255,.75); }
.admin-main { display:grid; grid-template-columns:220px minmax(0,1fr); max-width:1500px; margin:auto; }
.side-nav { padding:38px 22px; display:flex; flex-direction:column; gap:7px; position:sticky; top:74px; height:calc(100vh - 74px); border-right:1px solid var(--line); background:rgba(255,255,255,.28); }
.side-nav button { text-align:left; border:0; border-radius:11px; padding:12px 14px; background:transparent; color:var(--muted); }
.side-nav button { position:relative; transition:background .2s ease,color .2s ease,transform .2s ease; }
.side-nav button:hover { transform:translateX(3px); color:var(--espresso); }
.side-nav button.active { background:white; color:var(--espresso); font-weight:750; box-shadow:0 8px 24px rgba(49,23,13,.08); }
.side-nav button.active::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--gold); }
.workspace { padding:clamp(28px,5vw,70px); min-width:0; }
.panel { display:none; max-width:1050px; }
.panel.active { display:block; animation:panel-enter .28s ease both; }
.panel-heading { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:34px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.panel-heading > p { max-width:400px; margin:0; color:var(--muted); }
.form-grid { display:grid; gap:20px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid .wide { grid-column:1/-1; }
.floating-setting { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 8px 24px rgba(49,23,13,.045); }
.floating-setting strong { display:block; color:var(--ink); font-size:.9rem; }
.floating-setting small { display:block; margin-top:4px; color:var(--muted); font-weight:400; }
.floating-setting .switch { flex:0 0 auto; }
.image-editors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:26px 0; }
.image-editors.single-editor { grid-template-columns:minmax(0,620px); }
.image-editor { min-width:0; display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; padding:14px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 12px 34px rgba(49,23,13,.055); transition:transform .2s ease,box-shadow .2s ease; }
.image-editor:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(49,23,13,.085); }
.image-editor img { width:150px; height:120px; object-fit:cover; border-radius:12px; background:var(--cream); }
.image-editor p { margin:6px 0 14px; color:var(--muted); font-size:.8rem; }
.upload-button { display:inline-block; width:max-content; background:var(--cream); color:var(--coffee); cursor:pointer; font-size:.78rem; }
.upload-button input { display:none; }
.helper { margin:-18px 0 25px; color:var(--muted); }
.section-helper { margin:30px 0 16px; }
.service-list { display:grid; gap:16px; }
.service-editor { background:white; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 12px 34px rgba(49,23,13,.05); transition:border-color .2s ease,box-shadow .2s ease; }
.service-editor:focus-within { border-color:rgba(165,110,68,.55); box-shadow:0 18px 46px rgba(49,23,13,.09); }
.service-editor-top { display:grid; grid-template-columns:76px minmax(0,1fr) auto auto; align-items:center; gap:15px; padding:13px 16px; background:linear-gradient(90deg,#fffaf5,#fff); border-bottom:1px solid var(--line); }
.service-thumb { width:76px; height:64px; border-radius:10px; object-fit:cover; background:var(--cream); }
.service-title-block { min-width:0; }
.service-number { display:block; color:var(--muted); font-size:.7rem; }
.service-editor-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.switch { display:flex; align-items:center; gap:8px; cursor:pointer; }
.switch input { position:absolute; opacity:0; width:1px; }
.switch span { width:42px; height:24px; padding:3px; border-radius:99px; background:#cbbdb2; transition:.2s; }
.switch span::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:white; transition:.2s; box-shadow:0 1px 5px rgba(0,0,0,.22); }
.switch input:checked + span { background:var(--coffee); }
.switch input:checked + span::after { transform:translateX(18px); }
.switch em { font-style:normal; font-size:.76rem; color:var(--muted); }
.delete { background:transparent; color:var(--danger); border-color:#ebc9c6; padding:8px 12px; font-size:.76rem; }
.service-fields { display:grid; grid-template-columns:2fr 1.1fr .8fr .8fr .5fr; gap:16px; padding:20px; }
.service-fields .wide { grid-column:1/-1; }
.image-row { display:flex; align-items:center; gap:15px; }
.image-row small { color:var(--muted); }
.waxing-editor-list { display:grid; gap:10px; }
.waxing-editor { display:grid; grid-template-columns:minmax(180px,2fr) minmax(120px,.8fr) 90px auto auto; align-items:end; gap:14px; padding:14px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 8px 24px rgba(49,23,13,.045); }
.waxing-editor .switch { align-self:center; margin-top:20px; }
.save-bar { position:fixed; z-index:30; inset:auto 0 0; min-height:76px; display:flex; align-items:center; justify-content:flex-end; gap:30px; padding:12px clamp(18px,5vw,72px); background:rgba(255,255,255,.9); border-top:1px solid var(--line); box-shadow:0 -12px 34px rgba(49,23,13,.065); backdrop-filter:blur(18px); }
.save-bar p { margin:0; color:var(--muted); font-size:.84rem; }
.save-bar .primary { min-width:180px; }

@media (max-width:950px) {
  .admin-main { grid-template-columns:1fr; }
  .side-nav { height:auto; position:sticky; top:74px; z-index:10; flex-direction:row; overflow:auto; padding:10px 15px; background:#f4f0eb; border-right:0; border-bottom:1px solid var(--line); }
  .side-nav button { white-space:nowrap; }
  .service-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .waxing-editor { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@keyframes panel-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@media (max-width:700px) {
  .admin-header { height:auto; min-height:68px; padding:10px 14px; }
  .header-actions .save-status,.admin-header .secondary { display:none; }
  .side-nav { top:68px; }
  .workspace { padding:30px 14px; }
  .panel-heading { display:block; }
  .panel-heading > p,.service-heading .primary { margin-top:16px; }
  .form-grid.two,.image-editors { grid-template-columns:1fr; }
  .image-editor { grid-template-columns:100px minmax(0,1fr); }
  .image-editor img { width:100px; height:100px; }
  .service-editor-top { grid-template-columns:62px minmax(0,1fr) auto; }
  .service-thumb { width:62px; height:58px; }
  .switch em { display:none; }
  .delete { grid-column:2/-1; justify-self:end; margin-top:-4px; }
  .service-fields { grid-template-columns:1fr; }
  .service-fields .wide { grid-column:auto; }
  .waxing-editor { grid-template-columns:1fr; }
  .waxing-editor .switch { margin-top:0; }
  .save-bar { justify-content:space-between; }
  .save-bar p { display:none; }
  .save-bar .primary { width:100%; }
}