:root{
  --bg:#f7f3ef;
  --surface:#ffffff;
  --surface-2:#fbf8f5;
  --surface-3:#f2ece7;
  --line:#e7ddd3;
  --line-2:#ddd1c5;
  --text:#1d1d1f;
  --muted:#6d645b;
  --soft:#8e857c;
  --brand:#111111;
  --accent:#b9875c;
  --accent-2:#e9d7c8;
  --accent-3:#f4ebe3;
  --success:#1f8f63;
  --danger:#c2415d;
  --shadow:0 20px 60px rgba(22,19,16,.07);
  --shadow-soft:0 10px 30px rgba(22,19,16,.05);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#faf8f5 0%,#f5efea 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.page{min-height:100vh;padding:22px}
.shell{max-width:1400px;margin:0 auto}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:18px;padding:16px 22px;border-radius:20px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border:1px solid rgba(231,221,211,.95);
  box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-badge{
  width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#121212,#343434);
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;letter-spacing:.4px;
}
.brand-copy h1{margin:0;font-size:20px;line-height:1.1;letter-spacing:-.3px}
.brand-copy p{margin:3px 0 0;color:var(--muted);font-size:13px}
.top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mini-pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--muted)
}
.btn{
  appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:14px;font-weight:800;font-size:14px;transition:all .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#111;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.14)}
.btn-soft{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.layout{display:grid;grid-template-columns:1.1fr .95fr;gap:22px;align-items:start}
.hero-card,.form-card,.panel,.login .panel,.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);
}
.hero-card{padding:34px;overflow:hidden;position:relative;background:linear-gradient(180deg,#fff,#fbf8f5)}
.hero-card::after{
  content:"";position:absolute;right:-50px;top:-40px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(233,215,200,.9), rgba(233,215,200,0) 70%);
}
.label{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--accent-3);
  color:#6f4f35;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase
}
.label::before{content:"★"}
.hero-title{font-size:58px;line-height:.98;letter-spacing:-1.8px;margin:18px 0 14px;max-width:640px}
.hero-title span{display:block;color:#7b6655;font-size:52px}
.hero-text{font-size:18px;line-height:1.7;color:var(--muted);max-width:690px;margin:0 0 20px}
.rating-band{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;
  background:var(--surface-2);border:1px solid var(--line)
}
.stars{font-size:20px;letter-spacing:1px;color:#111}
.rating-copy strong{display:block;font-size:17px}
.rating-copy span{font-size:14px;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.feature{
  background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:18px;
}
.feature h3{margin:0 0 8px;font-size:15px;letter-spacing:-.2px}
.feature p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.service-chip{
  padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,#fff,#f9f5f1);border:1px solid var(--line);
  font-weight:700;color:#473c33;font-size:14px
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.form-card{padding:0;overflow:hidden}
.form-header{padding:26px 28px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fcfaf8)}
.form-header .eyebrow{font-size:12px;font-weight:800;letter-spacing:.45px;color:#8a6e54;text-transform:uppercase;margin-bottom:6px}
.form-header h2{margin:0;font-size:36px;letter-spacing:-1px;line-height:1.04}
.form-header p{margin:8px 0 0;color:var(--muted);line-height:1.6;font-size:15px}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.progress .step{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.progress .step strong{display:block;font-size:13px;margin-bottom:4px}
.progress .step span{font-size:12px;color:var(--muted)}
.form-body{padding:26px 28px 30px}
.section-hint{font-size:13px;text-transform:uppercase;letter-spacing:.35px;color:#8b8176;font-weight:800;margin:4px 0 16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
label{font-weight:800;font-size:14px;color:#40362d}
input,select,textarea{
  width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line-2);background:#fff;
  color:var(--text);font-size:15px;outline:none;transition:all .18s ease;box-shadow:inset 0 1px 2px rgba(0,0,0,.02)
}
input:focus,select:focus,textarea:focus{border-color:#b9875c;box-shadow:0 0 0 4px rgba(185,135,92,.12)}
textarea{resize:vertical;min-height:110px}
.helper{font-size:12px;color:var(--soft);margin-top:-2px}
.summary-box{margin-top:6px;padding:16px 18px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.summary-box strong{display:block;margin-bottom:6px}
.summary-box p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}
.submit-row .small-note{color:var(--muted);font-size:13px;line-height:1.5;max-width:300px}
.full{width:100%}
.success,.error{padding:14px 16px;border-radius:16px;font-weight:700;margin:0 0 18px;border:1px solid transparent}
.success{background:#edf9f2;border-color:#c9ead8;color:#216847}
.error{background:#fff0f4;border-color:#f0cad5;color:#9e3351}
.panel{padding:26px;margin-top:20px}
.section-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.section-title h1{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.8px}
.section-title p{margin:8px 0 0;color:var(--muted)}
.help-note{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--muted);font-size:14px;line-height:1.6}
.admin-wrap{min-height:100vh;display:grid;grid-template-columns:280px 1fr;background:var(--bg)}
.side{background:#171412;color:#f7f3ef;padding:24px 18px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand-mark{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);margin-bottom:22px}
.brand-copy h2{margin:0;font-size:20px}
.brand-copy p{color:#cbbfb3;font-size:12px}
.side a{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:14px;color:#f5eee8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);margin-bottom:10px;font-weight:700}
.side a.active,.side a:hover{background:#fff;color:#151313}
.main{padding:24px}
.top-admin{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi{padding:20px;border-radius:20px}
.kpi .label{background:none;padding:0;color:var(--soft);font-size:12px}
.kpi .label::before{display:none}
.kpi .value{font-size:34px;font-weight:900;letter-spacing:-.8px;margin-top:10px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;border-bottom:1px solid #eee8e2;text-align:left;font-size:14px}th{background:#faf7f3;color:#6d645b;font-size:12px;text-transform:uppercase;letter-spacing:.35px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#faf8f5,#f1ebe6)}
.login .panel{width:min(480px,100%)}
.login h1{margin:0 0 8px;font-size:34px;letter-spacing:-1px}
.login p{margin:0 0 16px;color:var(--muted)}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .hero-title{font-size:48px}.hero-title span{font-size:42px}
  .feature-grid,.service-list{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .page{padding:12px}.topbar{padding:14px 16px}.top-actions{width:100%;justify-content:flex-start}
  .hero-card,.form-card,.panel{border-radius:22px}
  .hero-card,.form-body,.form-header{padding-left:18px;padding-right:18px}
  .feature-grid,.service-list,.grid,.progress,.kpi-grid{grid-template-columns:1fr}
  .hero-title{font-size:38px}.hero-title span{font-size:32px}
  .admin-wrap{grid-template-columns:1fr}.side{position:relative;height:auto}
}

.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--accent-3);color:#6f4f35;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.btn-secondary{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn-dark{background:#2a2420;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.14)}
.page-hero{margin-bottom:18px}
.page-hero h1{margin:0;font-size:36px;letter-spacing:-1px;line-height:1.06}
.page-hero p{margin:8px 0 0;color:var(--muted);line-height:1.6;max-width:760px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi b{display:block;font-size:34px;line-height:1.06;margin-top:12px;letter-spacing:-1px}
.kpi small{display:block;margin-top:8px;color:var(--muted);line-height:1.5;font-size:13px}
.badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;text-transform:capitalize;border:1px solid var(--line);background:#f4efe9;color:#5b5047}
.badge.pending{background:#f8f0df;color:#8b5e15;border-color:#edd7ad}
.badge.confirmed{background:#e8f6ef;color:#256845;border-color:#bee2cd}
.badge.completed{background:#eef3fb;color:#365d97;border-color:#cfdbef}
.badge.cancelled,.badge.no-show{background:#fff0f4;color:#9e3351;border-color:#f0cad5}
.table-actions{display:flex;gap:10px;align-items:center}
.app-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.footer-note{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.6}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cards{grid-template-columns:1fr}.table-actions{flex-direction:column;align-items:stretch}}


/* Full calendar + analog clock module */
.date-time-picker{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;margin-top:8px}
.year-card,.clock-card{background:var(--surface-2);border:1px solid var(--line);border-radius:22px;padding:18px}
.year-toolbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.year-toolbar strong,.clock-header strong{font-size:18px;color:#2f261f}
.year-calendar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-height:620px;overflow:auto;padding-right:4px}
.month-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.month-box h4{margin:0 0 10px;font-size:14px;color:#2f261f}
.mini-week,.mini-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini-week span{text-align:center;font-size:10px;color:var(--soft);font-weight:900}
.mini-day{border:0;border-radius:8px;background:#f8f3ee;min-height:26px;font-size:11px;font-weight:800;cursor:pointer;color:#332922}
.mini-day:hover{background:#ead8c8}
.mini-day.active{background:#111;color:#fff}
.mini-day.unavailable{opacity:.35;cursor:not-allowed}
.clock-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.clock-badge{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:800;color:#7b6655}
.analog-clock{width:230px;height:230px;border-radius:50%;margin:0 auto 18px;position:relative;background:radial-gradient(circle at center,#fff 0%,#faf5f0 68%,#f1e8df 100%);border:8px solid #efe3d7;box-shadow:inset 0 0 0 2px #fff, 0 16px 34px rgba(29,24,21,.08)}
.clock-num{position:absolute;font-size:20px;font-weight:900;color:#3d3026}
.clock-num.n12{top:14px;left:50%;transform:translateX(-50%)}
.clock-num.n3{right:16px;top:50%;transform:translateY(-50%)}
.clock-num.n6{bottom:12px;left:50%;transform:translateX(-50%)}
.clock-num.n9{left:16px;top:50%;transform:translateY(-50%)}
.clock-center{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:#111;transform:translate(-50%,-50%);z-index:6}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:999px;transform:translateX(-50%) rotate(0deg);z-index:4}
.hand-hour{width:8px;height:58px;background:#111}
.hand-minute{width:4px;height:82px;background:#8a6e54}
.hand-second{width:2px;height:92px;background:#c2415d;z-index:5}
.clock-readout{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);margin-bottom:14px}
.selected-label{font-size:12px;text-transform:uppercase;letter-spacing:.35px;color:var(--soft);font-weight:800;margin-bottom:8px}
.selected-date{font-size:19px;font-weight:900;line-height:1.2;color:#2f261f}
.selected-time{font-size:30px;font-weight:900;line-height:1.1;margin-top:8px;color:#111}
.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time-slot{padding:10px 8px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:800;color:#3c3128;font-size:13px}
.time-slot.active{background:#111;color:#fff;border-color:#111;box-shadow:0 12px 24px rgba(0,0,0,.14)}
@media(max-width:1100px){.date-time-picker{grid-template-columns:1fr}.year-calendar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.year-calendar{grid-template-columns:1fr}.time-slot-grid{grid-template-columns:repeat(2,1fr)}.analog-clock{width:210px;height:210px}}