@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Source+Serif+4:ital,wght@1,400;1,500&display=swap');

:root {
  --bg: #0d141d;
  --panel: rgba(39, 52, 66, .72);
  --panel-strong: rgba(29, 41, 54, .88);
  --line: rgba(255,255,255,.15);
  --line-strong: rgba(255,255,255,.25);
  --text: #f6f1e9;
  --muted: #aeb9c5;
  --blue: #5b9cff;
  --green: #72d579;
  --amber: #f3bd62;
  --coral: #ef7c69;
  --violet: #a991ff;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --radius: 32px;
  --sidebar: 104px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 560px at 52% 5%, rgba(70,145,220,.38), transparent 65%),
    radial-gradient(640px 500px at 2% 32%, rgba(190,205,217,.18), transparent 70%),
    radial-gradient(480px 400px at 100% 12%, rgba(245,196,121,.13), transparent 72%),
    linear-gradient(135deg, #111923 0%, #182636 48%, #0a1119 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
body::after {
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(34% 30% at 28% 34%,rgba(96,166,255,.16),transparent 72%),radial-gradient(30% 34% at 76% 62%,rgba(211,224,236,.11),transparent 74%);
  filter:blur(60px); animation:ambient-flow 18s ease-in-out infinite alternate;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.glass {
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.075));
  border:1px solid rgba(255,255,255,.19);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(38px) saturate(108%) brightness(.96);
  -webkit-backdrop-filter:blur(38px) saturate(108%) brightness(.96);
  transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.18,.72,.2,1),border-color .42s ease,box-shadow .24s ease;
  animation:glass-arrive .55s cubic-bezier(.2,.8,.2,1);
}
.glass::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:150px; height:118px; left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%) scale(.72) rotate(-5deg); opacity:0;
  border:1px solid rgba(255,255,255,.085);
  border-radius:46% 54% 58% 42% / 55% 43% 57% 45%;
  background:rgba(255,255,255,.002);
  box-shadow:inset 12px 10px 26px rgba(255,255,255,.014),inset -13px -10px 30px rgba(0,0,0,.075);
  backdrop-filter:blur(2px) saturate(138%) contrast(1.025);
  -webkit-backdrop-filter:blur(2px) saturate(138%) contrast(1.025);
  transition:left .16s cubic-bezier(.18,.72,.2,1),top .16s cubic-bezier(.18,.72,.2,1),opacity .32s ease,transform .42s cubic-bezier(.2,.9,.2,1);
  animation:liquid-morph 3.2s ease-in-out infinite alternate paused;
  display:none;
}
.glass > * { position:relative; z-index:1; }
.glass:hover::before { opacity:0; }
.glass:hover { transform:perspective(1100px) translateY(-2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.003); border-color:rgba(255,255,255,.29); box-shadow:var(--lx,0) var(--ly,20px) 72px rgba(17,42,68,.28),inset var(--ix,1px) var(--iy,1px) 0 rgba(255,255,255,.2),inset calc(var(--ix,1px) * -1) calc(var(--iy,1px) * -1) 18px rgba(99,153,215,.045); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:24px 14px;
  background:rgba(13,20,29,.76); border-right:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(38px) saturate(105%); -webkit-backdrop-filter:blur(38px) saturate(105%); z-index:20; display:flex; flex-direction:column; align-items:center; overflow:visible;
}
.brand { display:flex; align-items:center; gap:12px; padding:0 10px 26px; font-size:20px; font-weight:750; letter-spacing:.08em; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; color:#ffe4a6; font-size:26px; }
.rail-brand { position:relative; width:58px; height:58px; padding:0; justify-content:center; margin-bottom:16px; border-radius:21px; background:rgba(255,255,255,.065); border:1px solid var(--line); }
.company-chip { margin:0 4px 22px; padding:12px; border-radius:21px; background:rgba(255,255,255,.075); border:1px solid var(--line); }
.company-chip strong { display:block; font-size:13px; }
.company-chip span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.rail-company { position:relative; width:58px; height:58px; margin:0 0 22px; display:grid; place-items:center; padding:0; color:var(--text); }
.rail-company strong { font-size:14px; letter-spacing:.04em; }
.nav { display:grid; gap:9px; width:100%; justify-items:center; }
.nav button, .mobile-nav button {
  color:var(--muted); background:transparent; border:0; border-radius:21px; display:flex; align-items:center; gap:12px;
}
.nav button { position:relative; width:58px; height:58px; padding:0; justify-content:center; text-align:left; font-weight:650; transition:transform .42s cubic-bezier(.2,.9,.2,1),background .35s ease,color .35s ease,box-shadow .35s ease; }
.nav button:hover,.nav button:focus-visible { background:rgba(255,255,255,.1); color:var(--text); transform:scale(1.1); outline:none; }
.nav button.active { color:var(--text); background:linear-gradient(120deg, rgba(91,156,255,.25), rgba(255,255,255,.09)); border:1px solid rgba(145,190,255,.22); }
.nav .nav-icon { width:25px; height:25px; display:grid; place-items:center; transition:transform .42s cubic-bezier(.2,.9,.2,1); }
.nav button:hover .nav-icon { transform:scale(1.12); }
.nav-label,.rail-tooltip { position:absolute; left:72px; top:50%; transform:translate(8px,-50%) scale(.96); opacity:0; pointer-events:none; white-space:nowrap; padding:9px 12px; border-radius:13px; color:var(--text)!important; background:rgba(24,34,46,.93); border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 40px rgba(0,0,0,.3); backdrop-filter:blur(22px); font-size:12px!important; font-weight:700; letter-spacing:0; transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1); z-index:50; margin:0!important; }
.nav button:hover .nav-label,.nav button:focus-visible .nav-label,.rail-company:hover .rail-tooltip,.rail-company:focus-visible .rail-tooltip,.rail-brand:hover .rail-tooltip,.role-switch button:hover .rail-tooltip,.role-switch button:focus-visible .rail-tooltip { opacity:1; transform:translate(0,-50%) scale(1); }
.sidebar-footer { margin-top:auto; display:grid; gap:9px; justify-items:center; }
.role-switch { display:grid; gap:8px; background:rgba(255,255,255,.065); border:1px solid var(--line); border-radius:24px; padding:5px; }
.role-switch button { position:relative; width:46px; height:46px; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); border-radius:18px; padding:0; transition:.35s cubic-bezier(.2,.8,.2,1); }
.role-switch button:hover { transform:scale(1.08); color:var(--text); }
.role-switch button.active { background:rgba(255,255,255,.13); color:var(--text); }
.demo-label { color:var(--muted); font-size:10px; text-align:center; letter-spacing:.1em; text-transform:uppercase; }
.main { grid-column:2; padding:22px 28px 110px; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.page-title h1 { margin:0; font-size:clamp(26px,2.35vw,36px); letter-spacing:-.04em; }
.page-title p { margin:7px 0 0; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn, .avatar { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--text); display:grid; place-items:center; }
.avatar { background:linear-gradient(145deg,#efbb79,#6f9ce7); font-weight:800; }
.btn { border:0; border-radius:19px; padding:12px 18px; font-weight:750; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease,box-shadow .34s ease; }
.btn:hover { transform:translateY(-1px) scale(1.02); filter:brightness(1.08); }
.btn-primary { background:linear-gradient(135deg,#6ba7ff,#317cf4); box-shadow:0 12px 30px rgba(46,121,239,.28); }
.btn-secondary { background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--text); }
.btn-danger { background:rgba(239,124,105,.14); border:1px solid rgba(239,124,105,.3); color:#ffb4a8; }
.btn-sm { padding:9px 12px; border-radius:11px; font-size:13px; }
.grid { display:grid; gap:16px; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.metric { border-radius:29px; padding:20px; min-height:130px; position:relative; overflow:hidden; }
.metric::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-30px; top:-35px; background:var(--glow,rgba(91,156,255,.22)); filter:blur(8px); }
.metric-label { color:var(--muted); font-size:13px; font-weight:650; }
.metric-value { font-size:34px; font-weight:760; margin:10px 0 3px; letter-spacing:-.04em; }
.metric-foot { font-size:12px; color:var(--muted); }
.dashboard-grid { grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); align-items:start; }
.panel { border-radius:var(--radius); padding:20px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.panel-head h2, .panel-head h3 { margin:0; letter-spacing:-.025em; }
.panel-head h2 { font-size:23px; }
.panel-head h3 { font-size:18px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.job-list { display:grid; gap:9px; }
.job-row { display:grid; grid-template-columns:86px minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:13px 14px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.055); border-radius:22px; transition:.35s cubic-bezier(.2,.8,.2,1); }
.job-row:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.075); }
.job-time { font-weight:720; }
.job-main strong { display:block; }
.job-main span { color:var(--muted); font-size:12px; display:block; margin-top:3px; }
.pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:7px 11px; font-size:11px; font-weight:760; white-space:nowrap; }
.pill.blue { background:rgba(91,156,255,.18); color:#a9ceff; }
.pill.green { background:rgba(114,213,121,.17); color:#a8efa8; }
.pill.amber { background:rgba(243,189,98,.17); color:#ffd58c; }
.pill.coral { background:rgba(239,124,105,.16); color:#ffb1a4; }
.pill.violet { background:rgba(169,145,255,.17); color:#cec1ff; }
.stack { display:grid; gap:16px; }
.attention { display:grid; gap:10px; }
.attention-item { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:21px; background:rgba(255,255,255,.055); }
.attention-dot { width:9px; height:9px; border-radius:50%; background:var(--coral); margin-top:6px; box-shadow:0 0 16px var(--coral); }
.attention-item strong { font-size:13px; display:block; }
.attention-item span { color:var(--muted); font-size:11px; }
.tabs { display:flex; gap:6px; padding:5px; border-radius:21px; border:1px solid var(--line); background:rgba(255,255,255,.06); width:max-content; max-width:100%; overflow:auto; }
.tabs button { border:0; background:transparent; color:var(--muted); padding:8px 13px; border-radius:16px; white-space:nowrap; }
.tabs button.active { background:rgba(255,255,255,.14); color:var(--text); }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin:15px 0; }
.field, select, textarea { width:100%; border:1px solid var(--line); background:rgba(8,14,21,.42); color:var(--text); border-radius:18px; padding:12px 13px; outline:none; }
.field:focus, select:focus, textarea:focus { border-color:rgba(91,156,255,.65); box-shadow:0 0 0 3px rgba(91,156,255,.1); }
.filters select, .filters .field { width:auto; min-width:150px; }
.table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.table th { color:var(--muted); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:0 12px 5px; }
.table td { padding:13px 12px; background:rgba(255,255,255,.045); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; }
.table td:first-child { border-left:1px solid rgba(255,255,255,.08); border-radius:20px 0 0 20px; }
.table td:last-child { border-right:1px solid rgba(255,255,255,.08); border-radius:0 20px 20px 0; }
.link-btn { border:0; background:transparent; color:#9fc7ff; padding:0; font-weight:700; }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(130px,1fr)); gap:10px; overflow:auto; padding-bottom:7px; }
.day { border:1px solid var(--line); background:rgba(255,255,255,.055); border-radius:26px; padding:12px; min-height:430px; }
.day.today { border-color:rgba(91,156,255,.55); background:rgba(91,156,255,.08); }
.day-head { margin-bottom:14px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.day-head strong { color:var(--text); font-size:20px; }
.calendar-job { border-left:3px solid var(--blue); border-radius:17px; padding:10px; margin-bottom:9px; background:rgba(255,255,255,.08); font-size:11px; }
.calendar-job strong { display:block; font-size:12px; margin:4px 0; }
.cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.entity-card { border-radius:29px; padding:18px; }
.entity-card h3 { margin:0 0 5px; }
.entity-card p { margin:4px 0; color:var(--muted); font-size:13px; }
.entity-card .actions { margin-top:16px; display:flex; gap:8px; }
.person { display:flex; gap:12px; align-items:center; }
.person-avatar { width:45px; height:45px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,rgba(91,156,255,.8),rgba(169,145,255,.65)); font-weight:800; flex:0 0 auto; }
.service-price { font-size:28px; font-weight:800; margin:12px 0; }
.service-price small { font-size:12px; color:var(--muted); font-weight:500; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-group { display:grid; gap:7px; }
.form-group.full { grid-column:1/-1; }
.form-group label { color:var(--muted); font-size:12px; font-weight:700; }
.custom-select { position:relative; min-width:0; }
.select-trigger { width:100%; min-height:50px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:19px; background:rgba(8,14,21,.44); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); transition:border-color .28s ease,box-shadow .28s ease,background .28s ease; }
.select-trigger:hover,.custom-select.open .select-trigger { border-color:rgba(112,169,255,.62); background:rgba(17,29,41,.7); box-shadow:0 0 0 3px rgba(91,156,255,.09),inset 0 1px 0 rgba(255,255,255,.06); }
.select-trigger svg { flex:0 0 auto; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.custom-select.open .select-trigger svg { transform:rotate(90deg); }
.select-menu { position:absolute; z-index:120; top:calc(100% + 9px); left:0; right:0; display:grid; gap:4px; max-height:260px; overflow:auto; padding:8px; border:1px solid rgba(255,255,255,.19); border-radius:23px; background:rgba(27,39,52,.92); box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.11); backdrop-filter:blur(34px) saturate(112%); -webkit-backdrop-filter:blur(34px) saturate(112%); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-7px) scale(.975); transform-origin:top center; transition:opacity .24s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility .24s; }
.custom-select.open .select-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.select-option { width:100%; min-height:43px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-radius:16px; background:transparent; color:var(--muted); text-align:left; transition:background .22s ease,color .22s ease,transform .22s ease; }
.select-option:hover,.select-option:focus-visible { outline:none; color:var(--text); background:rgba(255,255,255,.085); transform:translateX(2px); }
.select-option.selected { color:#c7deff; background:rgba(91,156,255,.15); }
.select-option i { display:grid; place-items:center; opacity:0; color:#9dc5ff; }
.select-option.selected i { opacity:1; }
.checkbox-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.check { display:flex; align-items:center; gap:10px; padding:12px; border-radius:19px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.check input { width:18px; height:18px; accent-color:var(--blue); }
.modal-backdrop { position:fixed; inset:0; z-index:60; background:rgba(2,6,10,.64); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal { width:min(720px,100%); max-height:92vh; overflow:auto; border-radius:38px; padding:24px; background:linear-gradient(145deg,rgba(49,65,81,.93),rgba(20,30,41,.96)); border:1px solid var(--line-strong); box-shadow:0 35px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter:blur(42px); animation:modal-rise .46s cubic-bezier(.2,.8,.2,1) both; }
.modal.wide { width:min(920px,100%); }
.modal-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:20px; }
.modal-head h2 { margin:0; }
.close { border:0; background:rgba(255,255,255,.08); color:var(--text); width:38px; height:38px; border-radius:50%; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.drawer-backdrop { position:fixed; inset:0; z-index:50; background:rgba(1,5,9,.5); }
.drawer { position:absolute; right:0; top:12px; bottom:12px; width:min(620px,100%); overflow:auto; padding:25px; border-radius:34px 0 0 34px; background:linear-gradient(145deg,rgba(48,65,83,.96),rgba(16,25,34,.97)); border:1px solid var(--line-strong); border-right:0; box-shadow:-24px 0 80px rgba(0,0,0,.35); backdrop-filter:blur(40px); animation:drawer-in .48s cubic-bezier(.2,.8,.2,1) both; }
.detail-section { border-top:1px solid var(--line); padding:18px 0; }
.detail-section h3 { margin:0 0 12px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-item { background:rgba(255,255,255,.06); border-radius:19px; padding:12px; }
.detail-item span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.activity { display:grid; gap:11px; }
.activity-row { display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:start; font-size:12px; }
.activity-row i { width:8px; height:8px; border-radius:50%; background:var(--blue); margin-top:4px; }
.activity-row time { color:var(--muted); }
#toast-root { position:fixed; right:20px; bottom:20px; z-index:100; display:grid; gap:10px; }
.toast { background:#f3f6fb; color:#152131; padding:13px 17px; border-radius:13px; box-shadow:0 18px 55px rgba(0,0,0,.35); font-weight:700; animation:toast-in .25s ease; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } }
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(520px,100%); border-radius:40px; padding:36px; text-align:center; }
.login-fields{display:grid;gap:14px;margin-top:22px}.login-fields label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:700;text-align:left}.login-submit{width:100%;justify-content:center;margin-top:8px}.login-error{min-height:20px;color:var(--coral)!important;font-size:13px;margin:8px 0}.login-card>p{max-width:560px;margin-left:auto;margin-right:auto}
.login-card .brand { justify-content:center; padding-bottom:30px; }
.login-card h1 { font-size:42px; letter-spacing:-.05em; margin:0; }
.login-card p { color:var(--muted); line-height:1.6; }
.login-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.login-option { padding:18px; border-radius:26px; background:rgba(255,255,255,.075); border:1px solid var(--line); color:var(--text); text-align:left; transition:.4s cubic-bezier(.2,.8,.2,1); }
.login-option:hover { border-color:rgba(91,156,255,.55); transform:translateY(-2px); }
.login-option strong { display:block; margin-bottom:5px; }
.login-option span { color:var(--muted); font-size:12px; }
.cleaner-shell { width:min(520px,100%); margin:0 auto; min-height:100vh; padding:18px 16px 110px; }
.cleaner-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.cleaner-header .brand { padding:0; font-size:17px; }
.cleaner-card { border-radius:33px; padding:18px; margin-bottom:14px; }
.cleaner-job { border-radius:30px; padding:18px; margin-bottom:13px; }
.cleaner-job .route { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.cleaner-job h3 { margin:8px 0 4px; font-size:22px; }
.cleaner-job p { color:var(--muted); margin:5px 0; }
.cleaner-job .btn { width:100%; margin-top:16px; }
.progress { height:7px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.08); margin:15px 0; }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--blue),#8bbaff); }
.mobile-nav { display:none; position:fixed; z-index:40; left:10px; right:10px; bottom:10px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(30,42,55,.76); border:1px solid var(--line); border-radius:27px; backdrop-filter:blur(34px); grid-template-columns:repeat(5,1fr); box-shadow:0 18px 50px rgba(0,0,0,.3); }
.mobile-nav button { padding:8px 4px; flex-direction:column; gap:4px; font-size:10px; }
.mobile-nav button.active { color:#ffe0a0; }
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.website-preview { background:#f6f2eb; color:#1a2024; border-radius:32px; overflow:hidden; }
.website-hero { padding:48px 34px; background:linear-gradient(135deg,#f7f1e7,#d8e2da); }
.website-hero h2 { font-size:42px; max-width:580px; margin:0 0 12px; letter-spacing:-.05em; }
.website-hero p { color:#59615f; max-width:560px; line-height:1.6; }
.website-form { padding:25px 34px 34px; }
.website-preview .field, .website-preview select { color:#1a2024; background:#fff; border-color:#d8d5ce; }
.website-preview label { color:#616966; }
.website-preview .select-trigger { color:#1a2024; background:#fff; border-color:#d8d5ce; }
.website-preview .select-menu { background:rgba(250,248,243,.96); border-color:#ddd8cf; box-shadow:0 25px 60px rgba(40,45,44,.18); }
.website-preview .select-option { color:#606765; }
.website-preview .select-option:hover,.website-preview .select-option:focus-visible { color:#1a2024; background:rgba(61,93,84,.08); }
.website-preview .select-option.selected { color:#1a2024; background:rgba(61,93,84,.12); }
.website-preview .select-option i { color:#476d63; }

@media (max-width: 1100px) {
  :root { --sidebar: 96px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { display:none; }
  .main { padding:18px 14px 100px; }
  .topbar { align-items:flex-start; }
  .page-title h1 { font-size:27px; }
  .page-title p { font-size:13px; }
  .top-actions .icon-btn { display:none; }
  .top-actions .btn span { display:none; }
  .top-actions .btn { width:44px; height:44px; padding:0; border-radius:50%; }
  .metrics { grid-template-columns:1fr 1fr; gap:10px; }
  .metric { padding:14px; min-height:112px; }
  .metric-value { font-size:28px; }
  .panel { padding:15px; border-radius:27px; }
  .job-row { grid-template-columns:68px minmax(0,1fr) auto; gap:8px; padding:12px 9px; }
  .job-row .person-avatar { display:none; }
  .pill { padding:6px 8px; }
  .cards { grid-template-columns:1fr; }
  .table-wrap { overflow:auto; }
  .table { min-width:700px; }
  .form-grid, .detail-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:auto; }
  .mobile-nav { display:grid; }
  .login-options { grid-template-columns:1fr; }
  .login-card { padding:25px; }
  .login-card h1 { font-size:34px; }
  .modal { padding:18px; }
  .website-hero { padding:30px 22px; }
  .website-hero h2 { font-size:32px; }
  .website-form { padding:20px 22px 28px; }
}
@keyframes ambient-flow { 0%{transform:translate3d(-2%,-1%,0) scale(1)} 55%{transform:translate3d(3%,2%,0) scale(1.06)} 100%{transform:translate3d(-1%,4%,0) scale(1.02)} }
@keyframes glass-arrive { from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes liquid-morph { 0%{border-radius:46% 54% 58% 42% / 55% 43% 57% 45%} 45%{border-radius:58% 42% 45% 55% / 43% 57% 44% 56%} 100%{border-radius:43% 57% 52% 48% / 60% 42% 58% 40%} }
@keyframes modal-rise { from{opacity:0;transform:translateY(18px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes drawer-in { from{opacity:0;transform:translateX(45px) scale(.985)} to{opacity:1;transform:translateX(0) scale(1)} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* Bloom-inspired monochrome liquid-glass direction */
:root {
  --bg: #050505;
  --panel: rgba(255,255,255,.012);
  --panel-strong: rgba(12,12,12,.42);
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.24);
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.58);
  --blue: #8fc5ff;
  --green: #8de0c2;
  --amber: #f4c77d;
  --coral: #ef9b86;
  --violet: #c4b2ff;
  --shadow: 0 28px 80px rgba(0,0,0,.22);
  --radius: 32px;
  --sidebar: 104px;
}

html { color-scheme: dark; background:#050505; }
body {
  position:relative;
  isolation:isolate;
  min-width:0;
  overflow-x:hidden;
  font-family:Poppins,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#050505;
  color:var(--text);
}
body::before,body::after { display:none; }
#app { position:relative; z-index:10; min-height:100vh; }
#overlay-root,#toast-root { position:relative; z-index:80; }

.ambient-video {
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% center;
  background:#010407;
  transform:scale(.84);
  filter:hue-rotate(72deg) saturate(.9) contrast(1.07) brightness(.74);
  -webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000 44%,rgba(0,0,0,.78) 57%,transparent 84%);
  mask-image:radial-gradient(ellipse at 60% 50%,#000 44%,rgba(0,0,0,.78) 57%,transparent 84%);
}
.ambient-veil {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(60% 70% at 15% 50%,rgba(7,20,28,.03),rgba(2,8,12,.4) 75%),
    linear-gradient(110deg,rgba(2,10,16,.35),rgba(0,8,12,.04) 56%,rgba(4,10,18,.28));
}

.glass {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:rgba(255,255,255,.012);
  background-blend-mode:luminosity;
  border:0;
  box-shadow:4px 4px 4px rgba(0,0,0,.05),inset 0 1px 1px rgba(255,255,255,.13),var(--shadow);
  backdrop-filter:blur(42px) saturate(104%);
  -webkit-backdrop-filter:blur(42px) saturate(104%);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background .35s ease;
  animation:glass-arrive .62s cubic-bezier(.2,.8,.2,1) both;
}
.glass::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:auto;
  height:auto;
  padding:1.4px;
  border:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:1;
  transform:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 20%,transparent 40%,transparent 60%,rgba(255,255,255,.2) 80%,rgba(255,255,255,.5) 100%);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:none;
}
.glass::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:220px;
  height:170px;
  left:var(--mx,50%);
  top:var(--my,50%);
  transform:translate(-50%,-50%) scale(.75);
  border-radius:48% 52% 58% 42% / 55% 43% 57% 45%;
  opacity:0;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(255,255,255,.035) 42%,transparent 72%);
  filter:blur(8px);
  transition:left .18s cubic-bezier(.2,.8,.2,1),top .18s cubic-bezier(.2,.8,.2,1),opacity .3s ease,transform .42s cubic-bezier(.2,.9,.2,1);
  animation:liquid-morph 3.8s ease-in-out infinite alternate;
}
.glass:hover::after { opacity:.65; transform:translate(-50%,-50%) scale(1); }
.glass:hover {
  transform:perspective(1200px) translateY(-2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.004);
  border-color:transparent;
  background:rgba(255,255,255,.025);
  box-shadow:var(--lx,0) var(--ly,22px) 74px rgba(0,0,0,.28),inset var(--ix,1px) var(--iy,1px) 1px rgba(255,255,255,.19);
}
.glass>* { position:relative; z-index:1; }

.app-shell { grid-template-columns:var(--sidebar) 1fr; padding:16px; gap:16px; }
.sidebar {
  position:fixed;
  inset:16px auto 16px 16px;
  width:var(--sidebar);
  height:auto;
  padding:18px 14px;
  border:0;
  border-radius:34px;
  background:rgba(4,4,4,.25);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 24px 70px rgba(0,0,0,.18);
  backdrop-filter:blur(50px);
  -webkit-backdrop-filter:blur(50px);
}
.sidebar::before,.topbar::before,.mobile-nav::before,.modal::before,.drawer::before {
  content:"";
  position:absolute;
  inset:0;
  padding:1.4px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.18) 22%,transparent 45%,transparent 65%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.brand { font-weight:600; letter-spacing:.035em; }
.brand-mark { color:#fff; filter:drop-shadow(0 0 16px rgba(255,255,255,.38)); }
.rail-brand,.rail-company,.role-switch {
  border:0;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.11);
}
.nav button { border:0; }
.nav button:hover,.nav button:focus-visible { background:rgba(255,255,255,.09); }
.nav button.active {
  border:0;
  color:#fff;
  background:linear-gradient(145deg,rgba(104,174,238,.25),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 1px rgba(210,238,255,.22),0 12px 34px rgba(24,90,140,.2);
}
.nav-label,.rail-tooltip {
  border:0;
  background:rgba(8,8,8,.72);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 18px 50px rgba(0,0,0,.3);
  backdrop-filter:blur(36px);
}

.main { grid-column:2; padding:0 12px 110px; }
.topbar {
  position:sticky;
  top:16px;
  z-index:30;
  min-height:84px;
  padding:16px 18px;
  margin-bottom:18px;
  border-radius:30px;
  background:rgba(8,8,8,.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 20px 55px rgba(0,0,0,.14);
  backdrop-filter:blur(42px);
  -webkit-backdrop-filter:blur(42px);
}
.page-title h1 { font-weight:500; letter-spacing:-.05em; }
.page-title p { color:rgba(255,255,255,.56); }
.icon-btn,.avatar,.close {
  border:0;
  color:#fff;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s ease;
}
.icon-btn:hover,.avatar:hover,.close:hover { transform:scale(1.06); background:rgba(255,255,255,.14); }
.avatar { background:rgba(255,255,255,.13); }

.btn {
  border:0;
  border-radius:999px;
  font-weight:500;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 14px 38px rgba(0,0,0,.16);
}
.btn-primary { color:#07111a; background:linear-gradient(135deg,rgba(219,241,255,.98),rgba(142,198,241,.96)); }
.btn-secondary { color:#fff; background:rgba(255,255,255,.075); border:0; }
.btn-danger { color:#fff; background:rgba(255,255,255,.07); border:0; }
.btn:hover { filter:none; transform:translateY(-1px) scale(1.035); }

.metric,.panel,.entity-card,.cleaner-card,.cleaner-job { border-radius:32px; }
.metric::after { background:rgba(255,255,255,.085)!important; filter:blur(14px); }
.metric-value { font-weight:500; }
.job-row,.attention-item,.detail-item,.check,.day,.calendar-job,.tabs,.field,select,textarea,.select-trigger {
  border:0;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}
.job-row:hover { border-color:transparent; background:rgba(255,255,255,.085); }
.pill { font-weight:500; }
.pill.blue { color:#cbe6ff!important; background:rgba(92,166,231,.18)!important; }
.pill.green { color:#bdf2de!important; background:rgba(77,191,151,.17)!important; }
.pill.amber { color:#ffe1ad!important; background:rgba(224,164,70,.18)!important; }
.pill.coral { color:#ffc7b9!important; background:rgba(218,112,87,.17)!important; }
.pill.violet { color:#dfd5ff!important; background:rgba(143,116,221,.18)!important; }
.attention-dot,.activity-row i { box-shadow:0 0 16px currentColor; }
.link-btn { color:rgba(255,255,255,.72); }
.tabs { border:0; }
.tabs button.active { background:rgba(255,255,255,.14); }
.field:focus,select:focus,textarea:focus {
  border-color:transparent;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 0 0 3px rgba(255,255,255,.08);
}
.person-avatar { background:rgba(255,255,255,.13); }
.progress span { background:rgba(255,255,255,.86); }

.select-menu {
  border:0;
  background:rgba(10,10,10,.8);
  box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.14);
  backdrop-filter:blur(48px);
  -webkit-backdrop-filter:blur(48px);
}
.select-option.selected { color:#fff; background:rgba(255,255,255,.13); }
.select-option.selected i { color:#fff; }

.modal-backdrop,.drawer-backdrop { background:rgba(0,0,0,.5); backdrop-filter:blur(12px); }
.modal,.drawer {
  position:relative;
  border:0;
  background:rgba(10,10,10,.42);
  box-shadow:0 40px 110px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.16);
  backdrop-filter:blur(50px);
  -webkit-backdrop-filter:blur(50px);
}
.detail-section { border-color:rgba(255,255,255,.1); }
.toast { color:#111; background:rgba(255,255,255,.93); border-radius:999px; }

.login { position:relative; z-index:10; }
.login-card { width:min(620px,100%); padding:42px; border-radius:42px; }
.login-card h1 { font-size:clamp(38px,5.8vw,66px); line-height:1; font-weight:500; }
.login-card h1::first-line { font-family:Poppins,sans-serif; }
.login-option {
  border:0;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
}
.login-option:hover { border-color:transparent; background:rgba(255,255,255,.09); transform:translateY(-3px) scale(1.015); }

.cleaner-shell { position:relative; z-index:10; }
.cleaner-header {
  position:sticky;
  top:12px;
  z-index:30;
  padding:12px 14px;
  border-radius:26px;
  background:rgba(8,8,8,.22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
  backdrop-filter:blur(42px);
}
.mobile-nav {
  border:0;
  background:rgba(8,8,8,.4);
  box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.13);
  backdrop-filter:blur(46px);
  -webkit-backdrop-filter:blur(46px);
}
.mobile-nav button.active { color:#d5efff; background:rgba(112,184,238,.14); }

@media (max-width:760px) {
  .app-shell { padding:10px; }
  .main { padding:0 4px 104px; }
  .topbar { top:10px; padding:13px 14px; border-radius:26px; }
  .page-title h1 { font-size:25px; max-width:230px; }
  .top-actions { gap:7px; }
  .top-actions .avatar { display:none; }
  .metric,.panel,.entity-card { border-radius:26px; }
  .mobile-nav { left:10px; right:10px; bottom:10px; border-radius:28px; }
  .login-card { padding:27px 22px; border-radius:34px; }
  .login-card h1 { font-size:40px; }
}