@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
:root{font-family:Cairo,system-ui,sans-serif;color:#281d31;background:#faf7fb;--accent:#633572;--line:#e5dce9}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}header,footer{padding:1rem max(5vw,1rem);background:#26182f;color:#fff}header{display:flex;align-items:center;justify-content:space-between;gap:1rem}header a{color:inherit}.brand{font-weight:800;text-decoration:none}main{width:min(90%,70rem);margin:3rem auto;flex:1}footer{font-size:.8rem;letter-spacing:.2em;text-align:center}
h1,h2,p{margin-block:0 .75em}h1{font-size:clamp(1.8rem,4vw,3.5rem);line-height:1.25}.hero{padding:clamp(2rem,7vw,6rem);border-radius:2rem;background:radial-gradient(ellipse at 10% 15%,#82457b,transparent 65%),#321f41;color:#fff}.hero a{color:#fff}.hero p{max-width:38ch;color:#f4e7f3}.tag{display:inline-block;border:1px solid currentColor;border-radius:4rem;padding:.25rem .9rem;margin-bottom:1rem;font-size:.9rem}.card{background:white;border:1px solid var(--line);border-radius:1.15rem;padding:clamp(1rem,4vw,2rem);margin:0 0 1rem;box-shadow:0 12px 30px #42264e0b}.card:has(input[type=password]){max-width:34rem;margin-inline:auto}form{display:grid;gap:.8rem;margin:.75rem 0}label{display:grid;gap:.3rem;font-weight:700}small{font-weight:400}input,button{font:inherit;border-radius:.6rem;padding:.55rem .85rem}input{border:1px solid #ae9bb8;width:100%;min-width:0}button,.button{background:var(--accent);color:#fff;border:0;font-weight:700;cursor:pointer}button{justify-self:start}a{color:var(--accent);text-underline-offset:.2em}.button{display:inline-block;padding:.55rem 1rem;border-radius:.6rem;text-decoration:none}:focus-visible{outline:3px solid #bd6a99;outline-offset:3px}code{overflow-wrap:anywhere;display:inline-block;background:#f4ecf5;padding:.5rem}table{width:100%;border-collapse:collapse}td,th{padding:.6rem;border-bottom:1px solid var(--line);text-align:start}.card:has(table){overflow-x:auto}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin-block:1.25rem}.features article{background:#fff;border:1px solid var(--line);padding:1.25rem;border-radius:1rem;overflow-wrap:anywhere}.features h2{font-size:1.15rem;margin-top:.5rem}.hero .cta{display:inline-block;background:#fff;color:#321f41;padding:.55rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:800}

.admin-dashboard{--panel-accent:#593265}.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}.admin-heading span{color:var(--panel-accent);font-weight:700}.admin-heading h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:.2rem 0}.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.admin-stats div{background:#321f41;color:white;border-radius:.9rem;padding:1rem}.admin-stats strong{display:block;font-size:1.65rem}.admin-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;align-items:start}.admin-dashboard h2{font-size:1.25rem}.salon-table{overflow:auto}.actions{display:flex;flex-wrap:wrap;gap:.35rem}.actions form{margin:0}.actions button{background:#f1e7f4;color:#46234f;font-size:.85rem}.badge{display:inline-block;border-radius:1rem;padding:.15rem .6rem;background:#f1e7f4;color:#46234f;white-space:nowrap}.invitation{border-inline-start:5px solid var(--panel-accent)}.invitation input{font-family:monospace;max-width:34rem}.invitation p:last-child{margin:.6rem 0 0}.admin-error{color:#96283e}.admin-dashboard input::placeholder{color:#75677a}@media(max-width:800px){.admin-grid{grid-template-columns:1fr}.admin-dashboard td,.admin-dashboard th{padding:.4rem}}

/* Touch-friendly controls and salon cards */
main{width:min(calc(100% - 2rem),72rem);margin-block:clamp(1.25rem,4vw,3rem)}
header{flex-wrap:wrap}
input,button,.hero .cta{min-height:44px;font-size:max(16px,1rem)}
label{min-width:0}
.admin-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.admin-dashboard .card{padding:clamp(1rem,3vw,1.75rem)}
.admin-heading{flex-wrap:wrap}
.admin-heading form{margin:0}
.admin-stats div{font-size:clamp(.78rem,2vw,1rem);padding:clamp(.55rem,2vw,1rem)}
.salon-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.salon-card{border:1px solid var(--line);background:#faf7fb;border-radius:.85rem;padding:1rem;min-width:0}
.salon-card-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.4rem}
.salon-card h3{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.salon-card dl{margin:.75rem 0;display:grid;gap:.15rem}
.salon-card dt{font-size:.8rem;color:#615268}
.salon-card dd{margin:0 0 .3rem;overflow-wrap:anywhere}
.actions button{padding-inline:.85rem}
.invitation input{font-size:16px}
@media(max-width:850px){
  .admin-grid{grid-template-columns:1fr}
  .salon-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
}
@media(max-width:480px){
  main{width:calc(100% - 1.5rem)}
  .hero{padding:1.4rem;border-radius:1rem}
  .admin-stats{gap:.4rem}
  .admin-stats strong{font-size:1.35rem}
  .actions form{flex:1 1 8rem}
  .actions button,.admin-grid form[action="/admin/create"] button,.card:has(input[type=password]) button{width:100%}
}

#password-feedback[data-valid="false"]{color:#96283e}
#password-feedback[data-valid="true"]{color:#246345}
#password-feedback:empty{display:none}

.brand{display:inline-flex;align-items:center;gap:.6rem}.brand-logo{width:2.5rem;height:2.5rem;object-fit:contain}.brand-mark{font-size:1.35rem}
.admin-shell{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.25rem;align-items:start}.admin-sidebar{background:#26182f;color:#fff;padding:1rem;border-radius:1rem}.admin-sidebar nav{display:grid;gap:.3rem}.admin-sidebar nav a{display:flex;align-items:center;min-height:44px;padding:.45rem .65rem;color:#fff;text-decoration:none;border-radius:.5rem;background:#ffffff13}.admin-sidebar form{margin:1rem 0 0}
.logo-preview .brand-logo{width:6rem;height:6rem}.public-hero{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,1.6fr);align-items:center;gap:2rem}.hero-art{display:grid;place-items:center;min-height:12rem;border:1px solid #ffffff55;border-radius:5rem 5rem 1.5rem 1.5rem;background:#ffffff13}.hero-art .brand-logo{width:min(80%,13rem);height:10rem}.hero-art .brand-mark{font-size:4rem;color:#f6d7e9}.admin-entry{display:inline-flex;align-items:center;min-height:44px;margin-inline:.5rem}.admin-login h1{font-size:clamp(1.75rem,4vw,2.5rem)}
@media(max-width:950px){.admin-shell{grid-template-columns:1fr}.admin-sidebar nav{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));align-items:center}.admin-grid{grid-template-columns:1fr}}
@media(max-width:600px){.public-hero{grid-template-columns:1fr;gap:1rem}.hero-art{min-height:6rem}.hero-art .brand-logo{height:6rem}.admin-sidebar{padding:.75rem}}
.admin-sidebar nav a[aria-current="page"]{background:#f1e7f4;color:#321f41;font-weight:800}
.salon-detail{overflow-wrap:anywhere}.salon-detail dd{margin-inline-start:0}.salon-detail article{margin-block:.5rem}
.client-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.client-sections>.card{width:100%;max-width:none;margin:0;scroll-margin-top:1rem}
@media(max-width:850px){.client-sections{grid-template-columns:1fr}}

.owner-shell .admin-sidebar{position:sticky;top:1rem}.owner-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;overflow-wrap:anywhere}.owner-brand .brand-logo{background:white;border-radius:.5rem;flex-shrink:0}.owner-heading{margin-bottom:1rem}.owner-heading span{color:#693477;font-weight:700}.owner-heading h1{margin:.15rem 0;font-size:clamp(1.75rem,4vw,2.6rem)}.owner-main .card{overflow-wrap:anywhere}.owner-hero{background:linear-gradient(120deg,#683a70,#2c1c3b);color:#fff;padding:clamp(1.25rem,5vw,3rem);border-radius:1.15rem}.owner-hero h2{font-size:clamp(1.35rem,4vw,2rem)}.owner-hero .button{background:#fff;color:#3b234a}.owner-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.8rem;margin-top:1rem}.owner-shortcuts a{display:block;text-decoration:none;margin:0}.owner-shortcuts strong{display:block;font-size:1.3rem}.owner-shortcuts a:hover{border-color:#693477}.owner-notice{background:#edf7ee;color:#245b35;padding:.8rem 1rem;border-radius:.6rem}
@media(max-width:950px){.owner-shell .admin-sidebar{position:static}}

.module-toggle { display:flex; align-items:center; gap:.65rem; min-height:44px; }
.module-toggle input { width:1.25rem; height:1.25rem; margin:0; accent-color:#59336c; }
.owner-main > .card + .card { margin-block-start:1rem; }

.salon-site { --ink:#221a17; --gold:#f2d098; color:var(--ink); }
.salon-site > section { margin-block-end:clamp(2rem,5vw,4rem); }
.salon-site h2 { font-size:clamp(1.5rem,3vw,2.25rem); }
.salon-site-hero { position:relative; isolation:isolate; overflow:hidden; display:grid; align-items:end; min-height:clamp(24rem,52vw,38rem); border-radius:1.6rem; background:linear-gradient(135deg,#342820,#171312); color:#fff; }
.salon-site-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.salon-site-hero.has-cover::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#170e0ceb,#170e0c25); z-index:-1; }
.salon-site-intro { padding:clamp(1.25rem,5vw,4rem); }
.salon-site-intro h1 { font-size:clamp(2rem,6vw,4.5rem); margin:.15em 0; color:inherit; overflow-wrap:anywhere; }
.salon-site-intro > span,.salon-site-grid strong { color:#8b592c; font-weight:700; }
.salon-site-intro > span { color:var(--gold); }
.salon-site-intro .brand-logo { display:block; max-width:7rem; width:auto; height:5rem; object-fit:contain; margin-block-end:1rem; }
.salon-site-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.salon-site-button { display:inline-flex; align-items:center; min-height:44px; padding:.45rem 1rem; border-radius:.65rem; background:var(--gold); color:#241910; text-decoration:none; font-weight:700; }
.salon-site-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:1rem; }
.salon-site-grid article,.salon-site-contact,.salon-site-draft { border-radius:1rem; border:1px solid #e5d8c7; background:#fffaf3; overflow:hidden; }
.salon-site-grid article > div,.salon-site-contact,.salon-site-draft { padding:1.25rem; }
.salon-site-grid img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.salon-site-gallery img { border-radius:1rem; }
.salon-site-copy { white-space:pre-line; overflow-wrap:anywhere; }
.site-editor .card { margin-block:1rem; }
.site-editor details { padding:.7rem; border-bottom:1px solid #e5d8c7; }
.site-editor summary { cursor:pointer; }
.site-upload { margin-block:.8rem; }
.site-upload img { display:block; width:min(100%,12rem); border-radius:.5rem; }
.site-upload input[type=checkbox] { width:auto; }

.salon-admin-detail { min-width:0; }
.salon-admin-detail .admin-heading { flex-wrap:wrap; }
.salon-admin-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; color:#62536c; }
.salon-admin-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin-block-end:.8rem; padding:.45rem; border:1px solid var(--line); border-radius:1rem; background:#fff; }
.salon-admin-tabs a { display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:44px; padding:.35rem .7rem; border-radius:.65rem; text-decoration:none; font-weight:700; }
.salon-admin-tabs a:hover { background:#f4edf6; }
.salon-admin-tabs a[aria-current=page] { background:var(--panel-accent); color:#fff; }
.salon-admin-detail .salon-detail { max-width:none; margin-inline:0; }
.salon-admin-detail #profile form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.salon-admin-detail #modules form { grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.salon-admin-detail #modules form > :is(p,button) { grid-column:1/-1; }
.salon-admin-detail #modules .module-toggle { background:#f7f2f8; border-radius:.65rem; padding:.4rem .75rem; }
@media(max-width:520px){.salon-admin-detail #profile form{grid-template-columns:1fr}}