@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#2c2936;background:#f7f7fb;--ink:#282238;--purple:#7251ba;--mauve:#927ad8;--gold:#e9c997;--border:#eeebf4;--muted:#938c9e}
*{box-sizing:border-box}
body{background:#f7f7fb;color:#302a3a;min-height:100vh;font-family:'DM Sans',system-ui,sans-serif}
header{height:84px;padding:13px 3%;background:#fff;box-shadow:0 4px 22px #261e4008;border-bottom:1px solid #f0eef4;display:flex;gap:20px;align-items:center;justify-content:space-between;position:relative;z-index:4}
header .toplogo{display:flex;align-items:center;gap:12px;white-space:nowrap}
header .toplogo .logo-mark{width:45px;height:45px;display:grid;place-items:center;background:linear-gradient(145deg,#7654be,#bd8be6);box-shadow:0 8px 18px #7654be30;color:#fff;border-radius:15px;font-size:23px}
header .toplogo strong{font-family:'Manrope',sans-serif;font-size:20px;letter-spacing:-.9px;font-weight:800;color:#251a3b}
header .toplogo small{font-size:10px;color:#8d8798;display:block;letter-spacing:.5px;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:12px}
.head-search{min-width:260px;background:#f5f3f9;border:1px solid #eeebf4;border-radius:12px;color:#9990a8;padding:12px 15px;font-size:13px;cursor:pointer}
.head-search kbd{font-size:10px;background:#fff;border:1px solid #e4dfea;padding:2px 6px;margin-left:24px;border-radius:5px}
.top-icon{background:#f7f5fb;color:#5c5570;border-radius:12px;border:1px solid #ece9f3;width:42px;height:42px;font-size:17px;cursor:pointer}
.top-avatar{display:flex;align-items:center;gap:10px;border-left:1px solid #eeebf4;padding-left:13px}
.top-avatar .face{height:43px;width:43px;background:linear-gradient(140deg,#f2d9c1,#b18cd5);color:#4e2d53;display:grid;place-items:center;border-radius:13px;font-weight:800}
.top-avatar b{font-size:12px}.top-avatar small{font-size:10px;color:#928b9e}
.shell{display:grid;grid-template-columns:258px minmax(0,1fr);min-height:calc(100vh - 128px);align-items:stretch}
aside#nav{background:linear-gradient(185deg,#272038,#1f1931 68%,#291f39);color:#f2edff;padding:26px 15px;position:relative;border-right:0;min-height:100%;box-shadow:6px 0 30px #271a3e0d}
.nav-caption{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#978daf;font-weight:800;margin:20px 13px 9px}
.nav-caption:first-child{margin-top:1px}
aside#nav button{border:0;background:transparent;color:#b6aecb;width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;margin:3px 0;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;text-align:left;border-radius:11px;cursor:pointer;transition:.18s ease}
aside#nav button:hover{background:#ffffff0e;color:white;transform:translateX(2px)}
aside#nav button.active{background:linear-gradient(110deg,#9b78d6,#7c57b4);color:#fff;box-shadow:0 9px 19px #190f2880}
aside#nav .nav-icon{width:20px;height:20px;display:grid;place-items:center;font-size:16px;color:inherit}
aside#nav .nav-count{margin-left:auto;border-radius:20px;background:#f5aeef24;padding:3px 8px;color:#e1c9ff;font-size:10px}
.nav-footer{margin:28px 4px 3px;border-radius:14px;border:1px solid #ffffff19;background:linear-gradient(125deg,#3c3057,#594076);padding:16px}
.nav-footer strong{color:white;font-size:13px;display:block;margin-bottom:5px}.nav-footer small{display:block;font-size:11px;line-height:1.65;color:#cbc2db}
main#view{max-width:none;padding:30px 35px 50px;min-width:0}
h1{font-family:'Manrope',sans-serif;font-size:26px;letter-spacing:-1px;font-weight:800;color:#2b253a}
h2{font-family:'Manrope',sans-serif;font-size:17px;letter-spacing:-.4px}
main>div.row:first-child{margin-bottom:22px}
main>div.row:first-child .muted{margin:7px 0 0}
.muted,small.muted{color:#958c9f}
.card{background:#fff;border-radius:18px;box-shadow:0 7px 28px #45326708;border:1px solid #efecf4;padding:22px;margin-bottom:17px}
.grid{gap:17px}
.metric{font-family:'Manrope',sans-serif;font-size:28px;letter-spacing:-1.2px;color:#2d273a}
.row{gap:12px}
button.primary{border-radius:11px;font-weight:700;background:linear-gradient(110deg,#815ec6,#a780df);box-shadow:0 7px 14px #7251ba28;padding:12px 18px;color:white;transition:transform .18s,box-shadow .18s}
button.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px #7251ba40}
button.secondary{border:1px solid #e8e3ed;background:white;color:#534463;border-radius:10px;padding:10px 13px;font-weight:700}
button.secondary:hover{border-color:#aa93cd;background:#f9f6fc}
.pill{background:#f2ebfc;color:#815db8;border-radius:50px;font-weight:800;font-size:11px}
.notice{background:#fff7e6;color:#a77b34;padding:9px 35px;font-size:11px;border-bottom:1px solid #f3e7d2}
footer{background:#f7f7fb;font-size:11px;padding:15px}
table{border-collapse:collapse}thead{background:#fbfafd}td,th{border-bottom:1px solid #f0edf5;padding:13px 16px;font-size:12px}
th{font-weight:800;letter-spacing:.3px;font-size:10px;color:#9790a2;text-transform:uppercase}
tbody tr:hover{background:#fcfaff}
.filters{align-items:center}.filters input,.filters select{background:#fff}
input,select,textarea{border:1px solid #e6e1ec;border-radius:11px;color:#463e52;font-family:inherit;font-size:13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#a78ad9;box-shadow:0 0 0 3px #a78ad922}
#modal{background:#1811239c;backdrop-filter:blur(4px);z-index:30}#modal>div{border-radius:23px;box-shadow:0 34px 90px #12051e52;padding:28px;max-width:590px}
#modal h2{font-size:20px}
#modal input,#modal select{margin-bottom:7px}
#modal label{font-size:12px;color:#51475e}
#modal button.primary{width:100%}
.hero{border-radius:21px}
.introbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.crumb{font-size:11px;font-weight:700;color:#a19bac;text-transform:uppercase;letter-spacing:1.1px}
.crumb span{color:#6f50ad}
.intro-actions{display:flex;align-items:center;gap:8px}.mini-chip{background:#fff;border:1px solid #eeebf4;border-radius:10px;padding:9px 12px;color:#857793;font-size:11px;font-weight:700}
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#292139,#553b76 65%,#8b5eb3);color:#fff;border-radius:23px;padding:30px 34px;min-height:218px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 34px #55407820;margin-bottom:20px}
.page-hero:after{content:"";position:absolute;right:-120px;top:-140px;width:470px;height:470px;background:radial-gradient(circle,#ffffff28 0 20%,#ffffff10 21% 40%,#ffffff0b 41% 57%,transparent 58%);z-index:-1}
.page-hero .small-eyebrow{color:#dec7f1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2px}
.page-hero h1{color:#fff;font-size:30px;line-height:1.3;max-width:520px;margin:10px 0}
.page-hero p{color:#e1d7e9;font-size:12px;line-height:1.8;max-width:420px}
.hero-art{background:#fff1;border:1px solid #ffffff28;backdrop-filter:blur(7px);border-radius:20px;width:238px;padding:19px;box-shadow:0 13px 30px #20133244;transform:rotate(3deg)}
.hero-art .tiny-label{font-size:10px;color:#e3ccea}.hero-art strong{font-size:23px;color:white;display:block;margin:8px 0}
.hero-art .art-line{height:7px;margin:13px 0;border-radius:8px;background:linear-gradient(90deg,#ffdfae 75%,#ffffff33 75%)}
.hero-art .art-bubbles{display:flex;gap:5px;margin-top:14px}.hero-art .art-bubbles i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#ffefcc;color:#69447f;font-style:normal;font-size:10px;border:2px solid #70518a;margin-right:-9px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:19px}
.kpi{position:relative;overflow:hidden;background:#fff;border:1px solid #eeebf4;border-radius:18px;padding:19px 20px;min-height:146px;box-shadow:0 5px 19px #2f204405}
.kpi .kpi-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;font-size:20px;margin-bottom:14px}
.kpi small{display:block;color:#958d9e;font-weight:600;font-size:11px}.kpi .big{font-family:Manrope,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1px;color:#2a2338}
.kpi .kpi-note{font-size:10px;color:#a9a1af;margin-top:7px}.kpi .kpi-badge{float:right;font-size:10px;background:#e7f9ed;color:#228051;padding:5px 7px;border-radius:9px;font-weight:800}
.kpi:nth-child(1) .kpi-icon{background:#f5eafa;color:#8e5fc3}.kpi:nth-child(2) .kpi-icon{background:#eaf7f4;color:#28a892}.kpi:nth-child(3) .kpi-icon{background:#fff2e4;color:#d99449}.kpi:nth-child(4) .kpi-icon{background:#edf0ff;color:#7381cd}
.panel-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr);gap:17px;margin-bottom:18px}
.panel{background:#fff;border:1px solid #efecf4;box-shadow:0 7px 24px #29134209;border-radius:19px;padding:22px;margin-bottom:0;min-width:0}
.panel h2{margin:0 0 4px;font-size:16px}.panel .sub{font-size:11px;color:#9b93a4}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px}.panel-head button{font-size:11px}
.chart-bars{height:185px;display:flex;gap:14px;align-items:end;justify-content:space-around;border-bottom:1px solid #ebe7f0;padding-top:25px;margin:8px 0 15px}
.chart-item{display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:end;height:100%;flex:1;color:#9e93a6;font-size:11px}
.chart-item .chart-stick{width:100%;max-width:40px;border-radius:10px 10px 2px 2px;background:linear-gradient(180deg,#b99ced,#7552bd);min-height:10px;position:relative;transition:height .25s}
.chart-item .chart-stick:after{content:attr(data-value);position:absolute;top:-23px;left:50%;transform:translateX(-50%);font-size:10px;color:#8a729e;font-weight:700}
.list-appointment{display:flex;align-items:center;gap:11px;border-bottom:1px solid #f0edf4;padding:12px 0}
.list-appointment:last-child{border-bottom:0}
.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#e4d5f8,#f6e4e9);color:#774d9f;font-weight:800;font-size:12px;flex-shrink:0}
.avatar.green{background:linear-gradient(135deg,#d2eee7,#f0f7e8);color:#2b8e70}.avatar.orange{background:linear-gradient(135deg,#ffe6cf,#f9ebef);color:#b47739}
.list-appointment .appt-name{font-size:12px;font-weight:800}.list-appointment .appt-details{font-size:10px;color:#a19aab;margin-top:4px}.list-appointment .appt-right{margin-left:auto;text-align:right}.appt-time{color:#534063;font-weight:800;font-size:11px}
.status{border-radius:25px;padding:5px 9px;font-size:10px;font-weight:800;display:inline-block;background:#f4eef9;color:#8f6bac}
.status.Completed,.status.Checked-in{background:#e3f9ef;color:#24805b}.status.Confirmed{background:#eaf0ff;color:#5371bf}.status.Pending{background:#fff3de;color:#b17a37}.status.Cancelled{background:#ffeaed;color:#b84c61}
.inline-actions{display:flex;flex-wrap:wrap;gap:9px}
.action-tile{display:flex;align-items:center;gap:10px;border:1px solid #ece7f2;background:#fff;border-radius:13px;padding:13px;font-weight:700;font-size:12px;cursor:pointer;transition:.18s;color:#4c405d}
.action-tile:hover{border-color:#a28bd2;background:#f8f5fd;transform:translateY(-1px)}
.action-tile .glyph{width:37px;height:37px;display:grid;place-items:center;background:#f4effa;color:#8669c4;border-radius:11px;font-size:18px}
.alert-list{display:grid;gap:9px}.alert-card{background:#faf8fd;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px;font-size:11px;color:#5d506b}.alert-card strong{display:block;color:#40344d;font-size:12px}
.progress-track{height:8px;border-radius:9px;background:#eeebf5;overflow:hidden}.progress-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,#8d64cb,#d4b7f4)}
.work-cols{display:grid;grid-template-columns:1fr 1fr;gap:17px}.work-cols>*{min-width:0}
.overline{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#9b8eab;font-weight:800}
.subtle-button{border:0;background:#f3eefb;color:#7552b8;font-size:11px;font-weight:800;border-radius:9px;padding:9px 12px;cursor:pointer}
.stat-ribbon{display:flex;flex-wrap:wrap;gap:13px;margin:14px 0 18px}
.stat-ribbon .ribbon-item{background:#fff;border:1px solid #eeebf4;box-shadow:0 5px 16px #25163606;border-radius:13px;padding:14px 18px;min-width:160px;flex:1}
.ribbon-item b{font-size:23px;display:block;margin:5px 0}.ribbon-item small{color:#9d94a6}
.mini-table-wrap{overflow:auto;border-radius:15px;border:1px solid #eeeaf4;background:white;margin:14px 0 22px}
.mini-table{min-width:680px;width:100%;border-collapse:collapse}
.mini-table th,.mini-table td{padding:12px 13px}
.mini-table td .line-sub{color:#9990a5;font-size:10px;margin-top:4px}
.queue-filters{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}
.queue-filters button{border:1px solid #ece8f2;border-radius:8px;color:#73677e;background:#fff;padding:9px 11px;cursor:pointer;font-size:11px;font-weight:800}
.queue-filters button.active{background:#7957b6;color:white;border-color:#7957b6}
.empty-state{text-align:center;color:#9c92aa;padding:38px 14px;font-size:12px}
.calendar-day{min-width:140px;border:1px solid #efedf2;border-radius:12px;padding:12px;background:#fff}.calendar-day b{display:block;font-size:12px;color:#443750}.calendar-day small{font-size:10px;color:#a499ac}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(115px,1fr));gap:9px;overflow:auto;padding-bottom:3px}
.day-booking{border-left:3px solid #a684d3;border-radius:6px;padding:7px;margin-top:8px;background:#f8f4fc;font-size:10px;line-height:1.55;cursor:pointer}.day-booking strong{font-size:10px;display:block;color:#4e3972}
.membership-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.membership-card{background:#fff;border:1px solid #ece7f2;border-radius:18px;padding:21px;box-shadow:0 8px 20px #1f163806;position:relative;overflow:hidden}
.membership-card.premium{background:linear-gradient(135deg,#49315d,#2e213f);color:white}.membership-card.premium .muted{color:#e7d8f4}
.membership-card .level{font-size:11px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase}.membership-card strong{display:block;font-size:29px;margin:13px 0}.membership-card .benefit{font-size:12px;color:#a59cac;line-height:1.8}.membership-card.premium .benefit{color:#ded1e9}
.lead-column{background:#f2eef7;border:1px solid #e7e1ee;border-radius:15px;padding:12px;min-height:280px}
.lead-column .head{font-size:12px;font-weight:800;margin-bottom:13px;color:#534565}
.lead-card{background:white;border:1px solid #e9e3f1;border-radius:12px;padding:14px;margin-bottom:9px;font-size:12px;box-shadow:0 5px 13px #2d234008}.lead-card strong{display:block;margin-bottom:5px}.lead-card small{color:#958aa2}.lead-card button{margin-top:11px}
.lead-board{display:grid;grid-template-columns:repeat(4,minmax(185px,1fr));gap:13px;overflow:auto;margin:17px 0}
.toast{position:fixed;bottom:30px;right:30px;background:#2f2442;color:white;border-radius:13px;padding:15px 20px;box-shadow:0 10px 35px #22152d40;z-index:100;font-size:12px}
.search-shade{position:fixed;inset:0;background:#17112099;backdrop-filter:blur(4px);display:grid;align-items:start;justify-items:center;padding:13vh 18px;z-index:100}
.search-dialog{max-width:620px;width:100%;padding:20px;background:white;border-radius:17px;box-shadow:0 30px 80px #170a2666}
.search-result{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;background:white;border:0;border-bottom:1px solid #f0edf4;padding:13px 10px;text-align:left;cursor:pointer;font-size:12px;color:#574b63}
.search-result:hover{background:#faf7fd}.search-result small{color:#948ba0}
.demo-note{font-size:11px;color:#9b8fa7;margin:10px 0 17px}
@media(max-width:1190px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.panel-grid{grid-template-columns:1fr}.membership-grid{grid-template-columns:1fr 1fr}.head-search{display:none}}
@media(max-width:860px){.shell{display:block}aside#nav{position:relative;display:flex;gap:4px;min-height:0;overflow:auto;white-space:nowrap;padding:10px 12px}aside#nav button{flex-shrink:0;width:auto;display:inline-flex;margin:0;padding:11px}aside#nav .nav-caption,aside#nav .nav-footer{display:none}main#view{padding:19px 14px 35px}header{padding:13px 15px}.top-avatar span{display:none}.notice{padding:9px 15px}.work-cols{grid-template-columns:1fr}.hero-art{display:none}.page-hero{min-height:195px;padding:25px}.membership-grid{grid-template-columns:1fr 1fr}}
@media(max-width:570px){header .toplogo small{display:none}header .toplogo strong{font-size:17px}.top-actions{gap:5px}.top-icon{width:35px;height:35px}.top-avatar .face{height:35px;width:35px}.kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.kpi{padding:15px;min-height:118px}.kpi .kpi-icon{width:33px;height:33px;font-size:16px;margin-bottom:8px}.kpi .big{font-size:22px}.page-hero h1{font-size:23px}.page-hero{padding:23px}.membership-grid{grid-template-columns:1fr}.chart-bars{gap:5px}.chart-item .chart-stick{max-width:28px}.introbar{flex-wrap:wrap}.intro-actions .mini-chip{display:none}main#view>div.row:first-child{margin-bottom:20px}.panel{padding:17px}.row>button.primary{width:100%}header .toplogo .logo-mark{width:37px;height:37px}}