:root{
  --navy:#102441;--blue:#2868d8;--cyan:#2db7c4;--bg:#f4f7fb;--line:#e1e7f0;
  --muted:#6d7b91;--green:#18865a;--orange:#d9890c;--red:#cf4545;--purple:#6b4ac9;
}
*{box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:#17233a}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}
#sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:var(--navy);color:#fff;padding:18px 14px;display:flex;flex-direction:column;z-index:20;transition:.25s}
.brand{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:10px;padding:4px 7px 19px;font-size:18px}.mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-size:25px}.section-label{color:#91a3bd;letter-spacing:1.3px;font-size:10px;margin:11px}.side-bottom{margin-top:auto;display:grid;gap:15px}.side-link,.nav-link{border:0;background:transparent;color:#bdc9d9;text-align:left;border-radius:12px;padding:11px 12px;font-weight:750;width:100%}.nav-link{display:flex;gap:11px;align-items:center}.nav-link:hover,.nav-link.active,.side-link:hover{background:rgba(255,255,255,.1);color:#fff}.user{display:flex;gap:10px;align-items:center;padding:8px}.user>span,.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dce8ff;color:var(--blue);font-weight:900}.user div{display:grid}.user small{color:#9fb0c8}
main{margin-left:245px;min-height:100vh}header{height:70px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 23px;position:sticky;top:0;z-index:15}.header-title{display:grid}.header-title small{color:var(--muted);font-size:12px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.icon-btn{width:39px;height:39px;border:1px solid var(--line);background:#fff;border-radius:11px;font-weight:900;color:var(--navy);position:relative}.bell i{position:absolute;right:-4px;top:-6px;background:var(--red);color:#fff;font-size:10px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-style:normal}.demo{font-size:10px;font-weight:900;color:var(--green);background:#e7f8f1;border-radius:99px;padding:7px 9px}.header-title b{color:var(--navy)}#menu{display:none;margin-right:8px}
#app{padding:27px;max-width:1420px;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:22px}.page-head h1{font-size:29px;color:var(--navy);letter-spacing:-.8px;margin:0}.page-head p{color:var(--muted);margin:6px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{min-height:43px;padding:10px 15px;border-radius:12px;border:0;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.primary{background:var(--blue);color:#fff}.btn.outline{background:#fff;border:1px solid var(--line);color:var(--navy)}.btn.soft{background:#e9f1ff;color:var(--blue)}.btn.danger{background:#ffebeb;color:var(--red)}.btn.small{min-height:33px;padding:6px 10px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed}
.card,.metric{background:#fff;border:1px solid var(--line);border-radius:19px}.card{padding:19px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.metric{padding:17px}.metric .symbol{width:42px;height:42px;border-radius:12px;background:#e8f0ff;color:var(--blue);display:grid;place-items:center;font-size:20px;margin-bottom:16px}.metric b{display:block;font-size:23px;color:var(--navy)}.metric span:last-child{color:var(--muted);font-size:13px}.title{margin:25px 0 11px}.title h2{font-size:19px;color:var(--navy);margin:0}.title p{color:var(--muted);font-size:13px;margin:4px 0}.grid{display:grid;gap:14px}.two{grid-template-columns:2fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}
.list-row{display:grid;grid-template-columns:auto minmax(170px,1.2fr) minmax(150px,1.25fr) auto auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border:0}.meta{display:grid;gap:3px}.meta small,.muted{color:var(--muted);font-size:12px}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:99px;font-size:11px;font-weight:900;white-space:nowrap}.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.confirmed,.active{color:var(--green);background:#e8f8f1}.pending,.pastdue{color:#a96800;background:#fff3df}.proof{color:#2364c1;background:#e7f0ff}.deposit{color:var(--purple);background:#eee9ff}.trial{color:#2364c1;background:#e7f0ff}.suspended{color:var(--red);background:#ffeded}.search{display:flex;gap:9px;margin-bottom:13px}input,select,textarea{width:100%;border:1px solid #d7dfeb;background:#fff;border-radius:12px;padding:11px 12px;outline:none;color:#17233a}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,104,216,.1)}textarea{min-height:88px;resize:vertical}
.hero{text-align:center;max-width:850px;margin:36px auto 0}.hero .mark{margin:0 auto 16px;color:#fff}.hero h1{font-size:42px;color:var(--navy);letter-spacing:-1.4px;margin:0}.hero p{color:var(--muted);font-size:17px}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:1100px;margin:32px auto}.role-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:24px;display:flex;flex-direction:column;min-height:255px;transition:.2s}.role-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(16,36,65,.1)}.role-card .symbol{font-size:34px}.role-card h2{color:var(--navy);margin:17px 0 5px}.role-card p{color:var(--muted);font-size:13px;line-height:1.5}.role-card .btn{margin-top:auto}
.alerts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.alert{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px}.alert .symbol{font-size:22px}.alert b{display:block;margin:9px 0 4px}.alert p{color:var(--muted);font-size:13px}.settings{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.setting{border:1px solid var(--line);background:#fff;border-radius:17px;padding:18px;text-align:left}.setting .symbol{font-size:23px;color:var(--blue)}.setting b{display:block;margin:12px 0 4px}.setting small{color:var(--muted)}.chart{height:225px;display:flex;align-items:end;gap:6px;padding-top:15px}.bar{flex:1;min-width:14px;background:linear-gradient(to top,var(--blue),var(--cyan));border-radius:8px 8px 2px 2px}.health,.line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.health:last-child,.line:last-child{border:0}.health b.ok{color:var(--green)}.health b.warn{color:var(--orange)}.calendar .hour-row{display:grid;grid-template-columns:66px 1fr;min-height:66px}.calendar .hour{font-size:12px;color:var(--muted);padding-top:6px}.calendar .track{border-top:1px solid var(--line);padding:4px}.event{background:#e8f8f1;border-left:4px solid var(--green);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:800}.event.pending{background:#fff3df;border-color:var(--orange)}.event.proof{background:#e7f0ff;border-color:var(--blue)}
.booking-layout{display:grid;grid-template-columns:minmax(0,1.7fr) 310px;gap:14px}.steps{display:flex;gap:7px;overflow:auto;margin-bottom:14px}.step{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}.step i{font-style:normal;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e3e9f1}.step.active{color:var(--blue)}.step.active i,.step.done i{background:var(--blue);color:#fff}.service-grid,.staff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.choice{border:1.5px solid var(--line);border-radius:15px;padding:15px;position:relative;background:#fff}.choice.selected{border-color:var(--blue);background:#f3f7ff}.choice input{position:absolute;right:13px;top:13px;width:auto}.choice b{display:block;padding-right:25px}.choice p{color:var(--muted);font-size:12px;margin:6px 0}.choice strong{color:var(--blue)}.days{display:flex;gap:7px;overflow:auto;margin-bottom:13px}.day,.slot{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 11px;font-weight:800}.day.active{background:var(--navy);color:#fff}.slots{display:flex;flex-wrap:wrap;gap:7px}.slot.selected{border-color:var(--blue);background:#e8f0ff;color:var(--blue)}.summary{position:sticky;top:90px;height:max-content}.summary ul{padding-left:18px;color:var(--muted);font-size:13px}.summary .total{font-size:17px;color:var(--navy);font-weight:900}.wizard-actions{display:flex;justify-content:space-between;gap:8px;margin-top:19px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:grid;gap:6px}.field label{font-size:12px;color:var(--muted);font-weight:800}.success{text-align:center;padding:27px}.success .symbol{width:75px;height:75px;border-radius:50%;background:#e7f8f1;color:var(--green);font-size:37px;display:grid;place-items:center;margin:0 auto 14px}
#toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:11px;font-size:13px;font-weight:750;transform:translateY(90px);opacity:0;transition:.25s;z-index:120}#toast.show{transform:none;opacity:1}#modal{position:fixed;inset:0;background:rgba(9,24,45,.55);display:grid;place-items:center;padding:20px;z-index:100}#modal[hidden]{display:none}.modal-card{background:#fff;border-radius:21px;padding:24px;max-width:620px;width:100%;max-height:90vh;overflow:auto;position:relative}.modal-card>button{position:absolute;right:13px;top:9px;border:0;background:transparent;font-size:28px;color:var(--muted)}
.rtl #sidebar{left:auto;right:0}.rtl main{margin-left:0;margin-right:245px}.rtl .header-actions{margin-left:0;margin-right:auto}.rtl .choice input{right:auto;left:13px}.rtl .choice b{padding-right:0;padding-left:25px}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.role-grid{grid-template-columns:repeat(2,1fr)}.settings{grid-template-columns:repeat(2,1fr)}.alerts{grid-template-columns:1fr}.two{grid-template-columns:1fr}.list-row{grid-template-columns:auto 1fr auto}.list-row>*:nth-child(3){display:none}}
@media(max-width:780px){#sidebar{transform:translateX(-105%);box-shadow:20px 0 45px rgba(0,0,0,.25)}#sidebar.open{transform:none}.rtl #sidebar{transform:translateX(105%)}.rtl #sidebar.open{transform:none}main,.rtl main{margin:0}#menu{display:block}#app{padding:17px}header{padding:0 14px}.page-head{display:grid}.page-head h1{font-size:25px}.booking-layout{grid-template-columns:1fr}.summary{position:static}.service-grid,.staff-grid{grid-template-columns:1fr}.role-grid{grid-template-columns:1fr}.hero h1{font-size:34px}.form-grid{grid-template-columns:1fr}.demo{display:none}}
@media(max-width:480px){.metrics{grid-template-columns:1fr}.settings{grid-template-columns:1fr}.header-title small{display:none}#app{padding:13px}.wizard-actions{position:sticky;bottom:0;background:var(--bg);padding:10px 0}.role-card{min-height:220px}}