:root{
  --bg:#f7f7fb;
  --panel:#ffffff;
  --panel-2:#faf9ff;
  --ink:#201a2e;
  --ink-2:#332a46;
  --muted:#746d80;
  --line:#e9e5ef;
  --line-strong:#ddd6e8;
  --brand:#6d28d9;
  --brand-2:#5521ad;
  --brand-3:#7c3aed;
  --brand-soft:#f1eafe;
  --brand-soft-2:#f8f5ff;
  --dark:#211438;
  --danger:#b42318;
  --danger-soft:#fff1f0;
  --warn:#8a5a00;
  --warn-soft:#fff8e8;
  --ok:#286846;
  --ok-soft:#edf8f1;
  --shadow-sm:0 1px 2px rgba(32,26,46,.03),0 8px 24px rgba(65,43,92,.05);
  --shadow:0 18px 50px rgba(67,44,98,.10);
  --radius:18px;
  --radius-sm:12px;
  --sidebar:268px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body{font-size:14px;letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}
::selection{background:#e8ddfb;color:#3c1677}

/* brand */
.brandmark{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--brand-3),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:850;font-size:13px;letter-spacing:.02em;box-shadow:0 8px 22px rgba(109,40,217,.22);flex:0 0 auto}
.brand-title{font-weight:850;font-size:20px;letter-spacing:-.035em;white-space:nowrap}.brand-sub{color:var(--muted);font-size:11px;margin-top:2px;letter-spacing:.02em}

/* login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(340px,1.05fr) minmax(430px,.95fr);background:#fff}
.login-showcase{position:relative;overflow:hidden;background:linear-gradient(145deg,#24123c 0%,#3d1768 56%,#5b21b6 100%);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}
.login-showcase:before,.login-showcase:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%}.login-showcase:before{width:540px;height:540px;right:-260px;top:-160px}.login-showcase:after{width:360px;height:360px;left:-190px;bottom:-150px}
.showcase-brand{position:relative;z-index:1}.showcase-brand .brand-logo{background:#fff;color:var(--brand);box-shadow:none}.showcase-brand .brand-sub{color:#d9c9f6}
.showcase-copy{position:relative;z-index:1;max-width:620px}.showcase-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#d8c6f7;font-weight:800}.showcase-copy h1{font-size:48px;line-height:1.04;letter-spacing:-.05em;margin:14px 0 16px;max-width:580px}.showcase-copy p{font-size:16px;line-height:1.7;color:#e5daf6;max-width:560px;margin:0}
.showcase-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px}.showcase-item{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.065);backdrop-filter:blur(8px);border-radius:14px;padding:14px 16px}.showcase-item b{display:block;font-size:13px}.showcase-item span{display:block;margin-top:4px;color:#d8caee;font-size:11px;line-height:1.45}
.login-panel{display:grid;place-items:center;padding:40px;background:linear-gradient(180deg,#fff,#fbf9ff)}
.login-card{width:min(450px,100%);background:transparent;padding:14px}.login-card>.brandmark{display:none}.login-card h1{font-size:30px;letter-spacing:-.04em;margin:0 0 8px}.login-card .login-eyebrow{font-weight:800;color:var(--brand);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}.login-card .login-intro{margin:0 0 28px;line-height:1.65}
.login-help{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}

/* form */
.muted{color:var(--muted)}.tiny{font-size:12px}.stack{display:grid;gap:12px}.field{display:grid;gap:7px}.field label,.label{font-weight:700;font-size:12px;color:#4d4559}
.input,.select,.textarea{width:100%;border:1px solid var(--line-strong);background:#fff;border-radius:12px;padding:11px 13px;outline:none;min-height:43px;transition:border-color .16s,box-shadow .16s,background .16s}.textarea{min-height:96px;resize:vertical;line-height:1.55}.input:hover,.select:hover,.textarea:hover{border-color:#cfc6dc}.input:focus,.select:focus,.textarea:focus{border-color:#9f74df;box-shadow:0 0 0 4px rgba(109,40,217,.09);background:#fff}.input::placeholder,.textarea::placeholder{color:#aaa3b4}
.btn{border:1px solid transparent;border-radius:11px;padding:10px 14px;font-weight:740;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;background:#f0edf4;color:#352b43;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s}.btn:hover{background:#eae5ef}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,#7a35df,#6525c6);color:#fff;box-shadow:0 8px 18px rgba(109,40,217,.17)}.btn-primary:hover{background:linear-gradient(180deg,#7130d3,#5c21b8)}.btn-dark{background:var(--dark);color:#fff}.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:#f4d2cf}.btn-warn{background:var(--warn-soft);color:var(--warn);border-color:#f1dfad}.btn-ghost{background:#fff;border-color:var(--line)}.btn-ghost:hover{border-color:#d6cce2;background:#faf8fd}.btn-sm{padding:7px 10px;min-height:34px;font-size:12px}.btn-block{width:100%}.btn-link{padding:0;background:transparent;color:var(--brand);min-height:auto}.btn-link:hover{background:transparent;color:var(--brand-2)}

/* application shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,#221638 0%,#1c122e 100%);color:#f7f2ff;padding:20px 14px;overflow:auto;z-index:30;border-right:1px solid rgba(255,255,255,.05)}
.sidebar .brandmark{padding:4px 8px 19px}.sidebar .brand-logo{background:#fff;color:#5e22b8;box-shadow:none}.sidebar .brand-sub{color:#a99abf}.sidebar .brand-title{font-size:18px}
.nav-section{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#86779a;padding:17px 11px 7px;font-weight:850}.nav-btn{width:100%;border:0;background:transparent;color:#cfc5dc;padding:10px 11px;border-radius:10px;text-align:left;display:flex;align-items:center;gap:11px;margin:2px 0;font-weight:630;transition:background .15s,color .15s}.nav-btn:hover{background:rgba(255,255,255,.055);color:#fff}.nav-btn.active{background:rgba(159,104,235,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(198,166,244,.10)}.nav-ico{width:27px;height:23px;border-radius:7px;display:grid;place-items:center;font-size:8px;letter-spacing:.05em;font-weight:850;color:#a997c0;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);flex:0 0 auto}.nav-btn.active .nav-ico{color:#f2eaff;border-color:rgba(214,191,246,.22);background:rgba(255,255,255,.07)}
.sidebar-bottom{margin-top:22px;border-top:1px solid rgba(255,255,255,.08);padding:15px 10px;color:#a99abf}.sidebar-bottom b{color:#fff;font-size:12px}
.main{grid-column:2;min-width:0}.topbar{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20}.page-title{font-weight:820;font-size:18px;letter-spacing:-.025em}.page-subtitle{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:8px}.user-chip{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:12px;background:#fff}.avatar{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:850}.bell{position:relative}.badge{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--brand);color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid #fff}.content{padding:25px;max-width:1660px;margin:auto}.mobile-menu{display:none}

/* layout */
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:17px}.card-flat{box-shadow:none}.metric{padding:18px 19px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:66px;height:66px;border-radius:50%;background:var(--brand-soft-2);right:-25px;top:-25px}.metric-label{color:var(--muted);font-size:11px;font-weight:720;text-transform:uppercase;letter-spacing:.06em}.metric-value{font-size:27px;font-weight:870;margin-top:8px;letter-spacing:-.045em;color:var(--ink)}.metric-note{font-size:11px;color:var(--muted);margin-top:5px}.metric-premium{border-top:2px solid #8f57df}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 14px}.section-head h2{font-size:18px;margin:2px 0 0;letter-spacing:-.025em}.section-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.toolbar .field{min-width:130px}.grow{flex:1}.search{min-width:260px}.split{display:flex;align-items:center;justify-content:space-between;gap:12px}.gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.kicker{font-size:10px;font-weight:850;color:var(--brand);text-transform:uppercase;letter-spacing:.12em}.strong{font-weight:820}.right{text-align:right}.nowrap{white-space:nowrap}.num{text-align:right}.two-line{display:grid;gap:3px}.hr{height:1px;background:var(--line);margin:17px 0}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f3eff7;color:#4d3c63;padding:2px 6px;border-radius:6px}.list{display:grid;gap:8px}.list-item{padding:11px 0;border-bottom:1px solid var(--line)}.list-item:last-child{border-bottom:0}

/* executive dashboard */
.dashboard-hero{background:linear-gradient(135deg,#2a1743 0%,#4a1b7f 56%,#6f2bd1 100%);color:#fff;border:none;border-radius:22px;padding:24px 25px;box-shadow:0 20px 46px rgba(70,34,112,.18);position:relative;overflow:hidden}.dashboard-hero:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-105px;top:-135px}.dashboard-hero .kicker{color:#d9c8f5}.dashboard-hero h1{font-size:29px;letter-spacing:-.04em;margin:7px 0 7px}.dashboard-hero p{margin:0;color:#ddd0ed;max-width:700px;line-height:1.6}.dashboard-hero .btn{position:relative;z-index:1}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.hero-actions .btn{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.14)}.hero-actions .btn:hover{background:rgba(255,255,255,.16)}.hero-actions .btn-primary{background:#fff;color:#4d1b86;border-color:#fff;box-shadow:none}
.quick-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.quick-action{border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;display:flex;justify-content:space-between;align-items:center;text-align:left}.quick-action:hover{border-color:#cfc2df;background:#fbf9ff}.quick-action b{font-size:12px}.quick-action span{font-size:10px;color:var(--muted);display:block;margin-top:3px}.quick-action-mark{font-size:12px;color:var(--brand);font-weight:900}

/* tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:11px 13px;border-bottom:1px solid #efecf3;vertical-align:top}th{font-size:10px;text-transform:uppercase;letter-spacing:.065em;color:#7b7285;background:#faf9fc;position:sticky;top:0;font-weight:820}tbody tr:hover{background:#fcfbfe}tr:last-child td{border-bottom:0}
.status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:790;background:#f1eef4;color:#5f566a;white-space:nowrap;border:1px solid #e7e1ec}.status.ok,.status.Selesai,.status.Lunas,.status.Diserahkan{background:var(--ok-soft);color:var(--ok);border-color:#d8eedf}.status.warn,.status.Menunggu,.status.Terjadwal,.status.Belum-Lunas,.status.Diminta{background:#f7f3fb;color:#6f3ba8;border-color:#e5d8f1}.status.info,.status.Dipanggil,.status.Dilayani,.status.Check-in,.status.Diproses,.status.Terkirim{background:var(--brand-soft);color:#6330a6;border-color:#e0d0f7}.status.danger,.status.Batal,.status.Tidak-Hadir{background:var(--danger-soft);color:var(--danger);border-color:#f2d3d0}
.empty{padding:34px;text-align:center;color:var(--muted)}.queue-card{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.queue-card:last-child{border-bottom:0}.queue-no{width:48px;height:48px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:18px;border:1px solid #e3d6f6}.queue-main{flex:1;min-width:0}.queue-name{font-weight:820}.queue-meta{font-size:11px;color:var(--muted);margin-top:3px}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(24,15,36,.48);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 34px 90px rgba(24,14,39,.28);border:1px solid rgba(255,255,255,.8)}.modal-lg{width:min(1080px,100%)}.modal-head{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);z-index:2}.modal-head h3{margin:0;font-size:17px;letter-spacing:-.02em}.modal-body{padding:19px}.modal-foot{padding:14px 19px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}.close{border:1px solid var(--line);background:#faf9fc;width:34px;height:34px;border-radius:10px;font-size:19px;color:#6a6076}
.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:7px}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;white-space:nowrap;font-size:12px}.tab.active{background:var(--dark);border-color:var(--dark);color:#fff}.alert{border-radius:13px;padding:11px 12px;background:var(--brand-soft-2);border:1px solid #e6dcf3}.alert.warn{background:var(--warn-soft);border-color:#f0dfb1}.alert.danger{background:var(--danger-soft);border-color:#f2cecb}
.toast{position:fixed;right:18px;bottom:18px;z-index:300;background:#2d1b43;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 36px));animation:in .18s ease}.toast.error{background:#8f201b}.toast.ok{background:#392252}@keyframes in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* CRM */
.crm-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.crm-summary .card{box-shadow:none}.due-today{border-left:3px solid var(--brand)}.crm-note{font-size:11px;color:var(--muted);line-height:1.55}.timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block;margin-right:8px}

/* public booking */
.public-page{background:linear-gradient(180deg,#f8f5fd 0,#fff 34%,#faf9fc 100%)}.public-shell{max-width:920px;margin:0 auto;padding:28px 22px 42px}.public-hero{background:linear-gradient(135deg,#24143a 0%,#4c1c80 65%,#6d28d9 100%);color:#fff;border-radius:26px;padding:28px 30px;margin-bottom:18px;box-shadow:0 20px 48px rgba(68,34,107,.18);position:relative;overflow:hidden}.public-hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-120px;top:-140px}.public-hero .brand-logo{background:#fff;color:var(--brand);box-shadow:none}.public-hero .brand-title{color:#fff}.public-hero .brand-sub{color:#d8c7f1!important}.public-hero h1{margin:22px 0 8px;font-size:36px;line-height:1.08;letter-spacing:-.045em}.public-hero p{margin:0;color:#dfd2ef;line-height:1.65;max-width:690px}.steps{display:flex;gap:6px;margin:13px 0 18px}.step-dot{height:5px;flex:1;border-radius:99px;background:#e6e0eb}.step-dot.active{background:var(--brand)}.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;text-align:center;font-weight:750}.slot:hover{border-color:#b99cdb;background:#fbf8ff}.slot.active{background:var(--dark);border-color:var(--dark);color:#fff}.success-box{text-align:center;padding:30px}.success-mark{width:58px;height:58px;border-radius:18px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 14px;font-weight:900;font-size:25px}.success-code{font-family:ui-monospace,monospace;background:#f3eff8;border:1px dashed #cbb9df;padding:14px;border-radius:12px;font-size:20px;font-weight:850;margin:15px 0 18px;color:#4d1d83;letter-spacing:.04em}
.public-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.trust-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px}.trust-item b{display:block;font-size:12px}.trust-item span{display:block;font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45}

/* responsiveness */
@media(max-width:1100px){.grid-4,.crm-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.login-showcase{padding:42px}.showcase-copy h1{font-size:40px}}
@media(max-width:860px){:root{--sidebar:272px}.app-shell{display:block}.main{grid-column:auto}.sidebar{transform:translateX(-102%);transition:transform .2s ease;box-shadow:18px 0 45px rgba(18,11,28,.20)}.sidebar.open{transform:none}.mobile-menu{display:inline-flex}.topbar{padding:0 14px}.content{padding:16px}.user-text{display:none}.login-wrap{display:block;background:#fbf9ff}.login-showcase{display:none}.login-panel{min-height:100vh;padding:24px}.login-card>.brandmark{display:flex;margin-bottom:28px}.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.public-shell{padding:16px}.public-hero{padding:23px}.public-hero h1{font-size:31px}}
@media(max-width:620px){body{font-size:13px}.topbar{height:64px}.page-title{font-size:16px}.top-actions{gap:5px}.top-actions .btn{padding:7px 9px}.content{padding:12px}.grid-2,.grid-3,.grid-4,.crm-summary,.quick-strip{grid-template-columns:1fr}.card{padding:14px;border-radius:15px}.metric{padding:15px}.metric-value{font-size:24px}.section-head{align-items:flex-start}.section-head>.gap{width:100%;justify-content:flex-start}.toolbar{align-items:stretch}.toolbar .field,.search{min-width:100%;width:100%}.slot-grid{grid-template-columns:repeat(3,1fr)}.public-trust{grid-template-columns:1fr}.public-hero{border-radius:20px}.public-hero h1{font-size:28px}.dashboard-hero{padding:20px;border-radius:18px}.dashboard-hero h1{font-size:25px}.modal-backdrop{padding:8px;align-items:end}.modal{max-height:94vh;border-radius:18px 18px 10px 10px}.modal-body{padding:15px}.login-panel{padding:18px}.login-card{padding:6px}.login-card h1{font-size:27px}}