:root{--primary:#2647d6;--primary-2:#1b36ad;--success:#16b67b;--success-2:#0e8f5c;--warn:#c8862a;--warn-bg:#fdf1de;--bg:#f7f8fa;--surface:#fff;--surface-2:#eef1f6;--text:#12151c;--muted:#5b6474;--border:#e2e5ec;--danger:#d64545;--shadow:0 20px 45px -30px rgba(18,25,45,.22);--shadow-sm:0 10px 30px -26px rgba(18,25,45,.35);--radius:18px;--nav-h:calc(64px + env(safe-area-inset-bottom))}
*{box-sizing:border-box}
html,body,#app{min-height:100%;margin:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.splash{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg)}
.splash p{font:800 24px 'Manrope',sans-serif;margin:0;color:var(--text)}
.logo-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--primary);color:#fff;font:800 27px 'Manrope',sans-serif;box-shadow:0 16px 32px -16px rgba(38,71,214,.55)}

/* Setup / login */
.setup{min-height:100dvh;display:grid;grid-template-columns:minmax(320px,510px) 1fr;padding:22px;background:var(--bg)}
.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:clamp(30px,6vw,70px);display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow);z-index:2}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--primary);border-radius:12px;color:#fff;font:800 21px 'Manrope',sans-serif}
.brand-copy strong{font:800 17px 'Manrope',sans-serif;display:block}
.brand-copy small{color:var(--muted)}
.setup-card h1{font:800 clamp(31px,4vw,48px)/1.08 'Manrope',sans-serif;margin:64px 0 14px;letter-spacing:-1.4px;color:var(--text)}
.setup-card>p{color:var(--muted);line-height:1.65;margin:0 0 30px}
.setup-visual{position:relative;overflow:hidden;border-radius:24px;margin-left:-18px;background:linear-gradient(150deg,#141c52,#2647d6 65%,#3a5df0);color:#fff;padding:70px;display:flex;align-items:flex-end}
.setup-visual:before,.setup-visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.setup-visual:before{width:480px;height:480px;right:-100px;top:-140px}
.setup-visual:after{width:620px;height:620px;right:-160px;top:-210px}
.visual-copy{max-width:540px;z-index:1}
.visual-copy h2{font:700 clamp(32px,4vw,58px)/1.08 'Manrope',sans-serif;margin:0 0 18px;letter-spacing:-1.4px}
.visual-copy p{color:#c9d3fb;font-size:18px;line-height:1.6}
.visual-stat{display:inline-flex;gap:14px;align-items:center;margin-bottom:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);padding:12px 16px;border-radius:14px;backdrop-filter:blur(10px)}
.visual-stat i{width:10px;height:10px;border-radius:50%;background:#63e6b3;box-shadow:0 0 0 5px rgba(99,230,179,.18)}

/* Fields / buttons */
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-weight:600;font-size:14px}
.input-wrap{display:flex;align-items:center;border:1px solid var(--border);border-radius:13px;background:var(--bg);transition:.2s}
.input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(38,71,214,.12)}
.input-wrap .ic{margin-left:15px;color:var(--muted)}
.input-wrap input,.input-wrap select,.field textarea{width:100%;border:0;outline:0;background:transparent;padding:14px;color:var(--text)}
.field textarea{border:1px solid var(--border);border-radius:13px;background:var(--bg);min-height:105px;resize:vertical}
.btn{border:0;border-radius:13px;padding:14px 20px;font-weight:700;display:inline-flex;justify-content:center;align-items:center;gap:9px;transition:.15s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 24px -14px rgba(38,71,214,.6)}
.btn-primary:hover{background:var(--primary-2)}
.btn-secondary{background:var(--surface-2);color:var(--primary-2)}
.btn-secondary:hover{background:#e2e7fb}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-block{width:100%}
.demo-tip{margin-top:24px!important;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:13px!important;font-size:13px!important;color:var(--muted)!important}
.link-btn{border:0;background:none;color:var(--primary);font-weight:700;padding:0}
.error{color:var(--danger);font-size:13px;min-height:18px}

/* Shell */
.shell{display:flex;min-height:100dvh}
.sidebar{position:fixed;inset:0 auto 0 0;width:256px;padding:24px 16px;background:var(--surface);border-right:1px solid var(--border);color:var(--muted);display:flex;flex-direction:column;z-index:30}
.sidebar .brand{padding:0 10px;color:var(--text)}
.side-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#9aa2b1;margin:42px 13px 12px}
.nav-list{display:grid;gap:4px}
.nav-item{border:0;text-decoration:none;color:var(--muted);background:transparent;display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px;font-weight:600;text-align:left}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.on{background:#eaeffd;color:var(--primary-2);box-shadow:inset 3px 0 0 var(--primary)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:16px}
.sidebar-foot .nav-item{color:var(--muted)}
.tenant-pill{display:flex;align-items:center;gap:11px;padding:10px}
.tenant-logo{width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--primary);display:grid;place-items:center;font-weight:800}
.tenant-pill small,.tenant-pill strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-pill small{color:#8b93a3;font-size:11px}
.main-col{margin-left:256px;width:calc(100% - 256px);min-width:0}
.topbar{height:76px;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 clamp(20px,3vw,44px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.mobile-brand{display:none}
.topbar-title h1{font:800 20px 'Manrope',sans-serif;margin:0;color:var(--text)}
.topbar-title p{margin:3px 0 0;color:var(--muted);font-size:12px}
.top-actions{display:flex;align-items:center;gap:10px;position:relative}
.icon-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--muted);position:relative}
.icon-btn:hover{color:var(--primary);border-color:#c7d0f7}
.sync-dot{position:absolute;width:8px;height:8px;background:var(--success);border-radius:50%;right:7px;top:7px;border:2px solid var(--surface)}
.sync-dot.live{background:var(--primary)}
.avatar{width:42px;height:42px;border-radius:12px;background:#dde4fb;color:var(--primary-2);display:grid;place-items:center;font-weight:800;border:0}
.content{max-width:1500px;padding:18px clamp(20px,3vw,44px) 50px}
.bottom-nav{display:none}

/* Notifications dropdown */
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);z-index:60;overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.15s}
.notif-panel.show{opacity:1;transform:none;pointer-events:auto}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font:800 14px 'Manrope',sans-serif}
.notif-list{max-height:340px;overflow:auto}
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid #eef0f4}
.notif-item:last-child{border:0}
.notif-item .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:6px;flex:none}
.notif-item.read .dot{background:var(--border)}
.notif-item strong{display:block;font-size:13px}
.notif-item small{color:var(--muted);display:block;margin-top:2px}
.notif-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}

/* Dashboard */
.welcome{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:8px 0 27px}
.welcome h2{font:800 clamp(25px,3vw,35px) 'Manrope',sans-serif;letter-spacing:-.7px;margin:0;color:var(--text)}
.welcome p{color:var(--muted);margin:7px 0 0}
.status-chip{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #bfeed9;background:#e9faf2;color:var(--success-2);border-radius:999px;font-size:12px;font-weight:700}
.status-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.grid{display:grid;gap:18px}
.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat-card,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat-card{padding:20px}
.stat-head{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.stat-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#eaeffd;color:var(--primary)}
.stat-card strong{display:block;font:800 30px 'Manrope',sans-serif;margin:15px 0 3px;color:var(--text)}
.stat-card small{color:var(--muted)}
.main-grid{grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);margin-top:18px}
.card-head{padding:20px 22px 13px;display:flex;align-items:center;justify-content:space-between}
.card-head h3{font:800 16px 'Manrope',sans-serif;margin:0;color:var(--text)}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:10px 22px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border)}
.table td{padding:16px 22px;border-bottom:1px solid #eef0f4;font-size:13px}
.table tr:last-child td{border:0}
.table tr.flash{animation:flash 1.4s ease}
@keyframes flash{0%{background:#eaeffd}100%{background:transparent}}
.order-title{font-weight:700;color:var(--text)}
.order-title small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.badge{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.badge.progress{background:var(--warn-bg);color:var(--warn)}
.badge.done,.badge.approved{background:#e3f9ef;color:var(--success-2)}
.badge.pending{background:#eaeffd;color:var(--primary-2)}
.list{padding:0 22px 16px}
.list-item{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid #eef0f4}
.list-item:last-child{border:0}
.list-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eaeffd;color:var(--primary)}
.list-copy{min-width:0;flex:1}
.list-copy strong{font-size:13px;display:block;color:var(--text)}
.list-copy small{color:var(--muted)}
.quick-grid{grid-template-columns:repeat(2,1fr);padding:4px 22px 22px}
.quick-action{border:1px solid var(--border);background:var(--bg);border-radius:14px;padding:17px 12px;text-align:left;color:var(--text)}
.quick-action:hover{border-color:#c7d0f7}
.quick-action span{display:block;color:var(--primary);margin-bottom:11px}
.quick-action strong{font-size:12px}
.page-card{padding:22px}
.empty{text-align:center;padding:50px;color:var(--muted)}

/* Clock / forms / modal / toast */
.clock-hero{background:linear-gradient(145deg,#141c52,#2647d6 70%,#3a5df0);color:#fff;border-radius:24px;padding:clamp(25px,5vw,48px);position:relative;overflow:hidden}
.clock-hero:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;border:1px solid rgba(255,255,255,.14);right:-80px;top:-110px}
.clock-time{font:800 clamp(48px,8vw,78px)/1 'Manrope',sans-serif;letter-spacing:-3px}
.clock-date{color:#c9d3fb;margin:9px 0 32px}
.clock-btn{width:145px;height:145px;border-radius:50%;border:7px solid rgba(255,255,255,.18);background:#fff;color:var(--primary);font-weight:800;display:grid;place-content:center;gap:7px;text-align:center;box-shadow:0 20px 40px -20px #060b2c}
.clock-btn .ic{font-size:24px}
.clock-note{margin:25px 0 0;color:#c9d3fb;font-size:12px}
.form-grid{grid-template-columns:repeat(2,1fr)}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,13,28,.5);z-index:100;display:grid;place-items:center;padding:18px;opacity:0;transition:.2s}
.modal-backdrop.show{opacity:1}
.modal{width:min(480px,100%);max-height:88dvh;overflow:auto;background:var(--surface);border-radius:20px;padding:24px;transform:translateY(15px);transition:.2s}
.show .modal{transform:none}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.modal-head h3{margin:0;font:800 19px 'Manrope',sans-serif}
.toast{position:fixed;z-index:150;right:18px;bottom:18px;max-width:370px;background:#12151c;color:#fff;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:none}
.offline-bar{background:var(--warn-bg);color:var(--warn);text-align:center;padding:8px;font-size:12px;font-weight:700}
.list-item.task-row,tr.clickable{cursor:pointer}
.task-detail{border-bottom:1px solid #eef0f4;padding:0 22px 18px}
.task-detail .field{margin-bottom:12px}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:10px 0}
.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.field-check{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-weight:600;font-size:14px}
.field-check input{width:18px;height:18px}
.list-item input[type=checkbox]{margin-right:12px;width:18px;height:18px;flex:none}
.form-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:22px 0 10px}

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}.setup-visual{padding:45px}}
@media(max-width:900px){:root{--nav-h:calc(64px + env(safe-area-inset-bottom))}.sidebar{display:none}.main-col{margin:0;width:100%}.topbar{height:68px;padding:0 16px}.mobile-brand{display:grid}.topbar-title{padding-left:10px}.content{padding:9px 16px calc(var(--nav-h) + 28px)}.bottom-nav{display:block;position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);z-index:40;background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--border);backdrop-filter:blur(16px);padding-bottom:env(safe-area-inset-bottom)}.bottom-items{height:64px;display:grid;grid-template-columns:repeat(var(--nav-count),1fr);align-items:center}.bottom-nav .nav-item{display:grid;place-items:center;gap:3px;padding:7px 2px;color:var(--muted);font-size:10px;border-radius:0}.bottom-nav .nav-item.on{color:var(--primary);background:transparent;box-shadow:none}.bottom-nav .nav-item .ic{font-size:19px;transition:.3s}.bottom-nav .nav-item.on .ic{transform:translateY(-4px);background:var(--primary);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px -9px var(--primary)}.bottom-nav .nav-item.on small{display:none}.setup{grid-template-columns:1fr;padding:0}.setup-card{border-radius:0;min-height:100dvh;padding:30px clamp(24px,8vw,60px);border:0}.setup-visual{display:none}.setup-card h1{margin-top:60px}.welcome{align-items:start}.table-wrap{overflow-x:auto}.table{min-width:620px}.notif-panel{position:fixed;top:64px;right:8px;left:8px;width:auto}}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr 1fr;gap:11px}.stat-card{padding:15px}.stat-card strong{font-size:25px}.stat-head>span:first-child{font-size:11px}.main-grid{gap:12px}.welcome{display:block}.status-chip{display:none}.topbar-title p{display:none}.top-actions .icon-btn:first-child{display:none}.card-head{padding:17px}.form-grid{grid-template-columns:1fr}.modal-backdrop{place-items:end center;padding:0}.modal{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.clock-btn{width:128px;height:128px}.clock-time{letter-spacing:-2px}.toast{bottom:calc(var(--nav-h) + 12px);left:12px;right:12px}.hide-mobile{display:none}}
@media(min-width:901px){:root{--nav-h:0px}}