:root {
  color-scheme: light;
  --bg: #f2f2f7;
  --card: rgba(255,255,255,.88);
  --text: #111114;
  --muted: #73737b;
  --line: rgba(60,60,67,.12);
  --blue: #0a84ff;
  --purple: #7857e8;
  --green: #30b675;
  --orange: #ff9f0a;
  --shadow: 0 12px 35px rgba(38,38,46,.07);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; }
button { color: inherit; font: inherit; }
.hidden { display: none !important; }
.ambient { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .17; pointer-events: none; }
.ambient-one { width: 280px; height: 280px; background: #67b7ff; top: -130px; right: -100px; }
.ambient-two { width: 260px; height: 260px; background: #a586f3; bottom: 15%; left: -180px; }
.state-screen { min-height: 100vh; padding: 36px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 14px; }
.state-screen h1 { margin: 8px 0 0; font-size: 26px; letter-spacing: -.7px; }
.state-screen p { color: var(--muted); max-width: 330px; margin: 0; line-height: 1.5; }
.app-mark, .brand-mark { display: grid; place-items: center; color: white; font-weight: 750; background: linear-gradient(145deg,#168aff,#6858e9); box-shadow: 0 10px 25px rgba(10,132,255,.25); }
.app-mark { width: 66px; height: 66px; border-radius: 19px; font-size: 30px; }
.spinner { width: 22px; height: 22px; border: 2px solid #d6d6db; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #ff3b30; background: #ffe8e6; font-weight: 800; font-size: 28px; }
.primary-button { border: 0; border-radius: 14px; padding: 13px 24px; color: #fff; background: var(--blue); font-weight: 650; margin-top: 8px; }
.sidebar { display: none; }
.main-content { position: relative; padding: max(18px, env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom)); max-width: 820px; margin: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 20px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 3px; }
.topbar h1 { font-size: 27px; letter-spacing: -.9px; margin: 0; line-height: 1.15; }
.profile-button { position: relative; border: 0; background: transparent; padding: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,#dbeeff,#c9c5ff); color: #315bb5; font-weight: 700; flex: 0 0 auto; }
.online-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #32d74b; border: 2px solid var(--bg); right: 0; bottom: 1px; }
.period-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 3px; border-radius: 11px; background: rgba(118,118,128,.12); margin-bottom: 16px; }
.period-control button { border: 0; border-radius: 8px; padding: 8px 5px; background: transparent; font-size: 13px; font-weight: 600; color: #65656b; transition: .2s; }
.period-control button.active { background: #fff; color: #111; box-shadow: 0 2px 7px rgba(0,0,0,.09); }
.hero-card { overflow: hidden; min-height: 164px; border-radius: 26px; padding: 23px; color: white; background: linear-gradient(135deg,#087ef1 0%,#4966ed 58%,#7657df 100%); box-shadow: 0 15px 35px rgba(35,101,224,.25); display: flex; justify-content: space-between; align-items: center; position: relative; }
.hero-card::before { content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(255,255,255,.13); border-radius:50%; right:-65px; top:-90px; }
.hero-label { font-size: 14px; opacity: .82; font-weight: 550; }
.hero-card strong { display: block; font-size: clamp(29px,8vw,42px); letter-spacing: -1.5px; margin: 8px 0 12px; line-height: 1; }
.hero-card strong small { font-size: 12px; letter-spacing: .2px; opacity: .72; }
.hero-note { font-size: 12px; padding: 6px 9px; background: rgba(255,255,255,.14); border-radius: 20px; }
.hero-orb { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; backdrop-filter: blur(12px); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.metric-card { min-height: 130px; border-radius: 21px; background: var(--card); padding: 15px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.75); display: flex; flex-direction: column; }
.metric-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; }
.metric-icon svg { width: 19px; height: 19px; }
.blue .metric-icon { color: var(--blue); background: #e5f2ff; }.violet .metric-icon { color: var(--purple); background:#eee9ff; }.orange .metric-icon { color:#e48600; background:#fff1d9; }.green .metric-icon { color:var(--green); background:#e1f6eb; }
.metric-label { font-size: 12px; color: var(--muted); font-weight: 550; }
.metric-card strong { font-size: 22px; letter-spacing: -.6px; margin-top: 3px; overflow-wrap: anywhere; }
.panel { background: var(--card); border-radius: 23px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.8); padding: 18px; margin-top: 14px; }
.panel-head, .section-heading { display: flex; justify-content: space-between; align-items: center; }
.panel h2, .section-heading h2 { font-size: 17px; letter-spacing: -.35px; margin: 0; }
.panel p, .section-heading p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.live-badge, .count-badge { border-radius: 20px; padding: 5px 9px; font-size: 11px; color: var(--green); background: #e3f7ec; font-weight: 650; }
.text-button { border: 0; background: transparent; color: var(--blue); font-size: 13px; padding: 8px 0 8px 8px; }
.chart { height: 174px; display: flex; gap: 9px; align-items: end; padding-top: 18px; }
.chart-column { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 7px; min-width: 0; }
.bar-wrap { width: 100%; flex: 1; display: flex; align-items: end; justify-content: center; position: relative; }
.bar { width: min(25px,72%); min-height: 5px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg,#168aff,#7b61e8); transition: height .45s cubic-bezier(.2,.8,.2,1); }
.bar-value { position: absolute; top: -3px; font-size: 8px; color: var(--muted); white-space: nowrap; transform: translateY(-100%); }
.chart-day { color: #8e8e93; font-size: 10px; }
.employee-list { margin-top: 8px; }
.employee-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.employee-row:last-child { border-bottom: 0; }
.employee-row .avatar { width: 40px; height: 40px; font-size: 13px; }
.employee-info { min-width: 0; }.employee-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.employee-info small { color: var(--muted); font-size: 11px; }
.employee-value { text-align: right; }.employee-value b { display:block; font-size: 13px; }.employee-value small { color: var(--green); font-size: 10px; font-weight: 650; }
.page { display: none; animation: pageIn .25s ease; }.page.active { display: block; }
@keyframes pageIn { from { opacity:0; transform:translateY(5px); } }
.summary-banner { padding: 24px; border-radius: 25px; color:#fff; background: linear-gradient(140deg,#7367e8,#9c62d8); margin-bottom: 22px; box-shadow:0 14px 30px rgba(115,83,211,.2); }
.summary-banner span,.summary-banner small { display:block; opacity:.78; font-size:12px; }.summary-banner strong { display:block; font-size:29px; margin:8px 0; letter-spacing:-1px; }
.payout-banner { background:linear-gradient(140deg,#25a968,#51c78c); box-shadow:0 14px 30px rgba(35,160,99,.2); }
.section-heading { margin: 18px 3px 8px; }.section-heading h2 { font-size:22px; }.count-badge { color:var(--blue); background:#e5f2ff; min-width:28px; text-align:center; }
.standalone, .activity-list { background:var(--card); border-radius:22px; padding:0 16px; box-shadow:var(--shadow); }
.payout-heading { margin-top:28px; }
.info-note { margin:13px 3px 3px; padding:13px 15px; border-radius:14px; color:var(--muted); background:rgba(120,120,128,.1); font-size:11px; line-height:1.45; }
.export-button { width:100%; border:0; border-radius:17px; padding:14px 17px; margin:14px 0; display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; background:linear-gradient(135deg,#20a562,#32c47a); font-weight:650; box-shadow:0 10px 24px rgba(35,174,104,.2); }.export-button:disabled{opacity:.6}.export-button svg{width:19px;height:19px}
.activity-item { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:15px 0; border-bottom:1px solid var(--line); }.activity-item:last-child{border:0}
.activity-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#e7f3ff; color:var(--blue); font-weight:700; font-size:13px; }.activity-icon.paid{background:#e4f7ec;color:var(--green)}
.activity-body { min-width:0; }.activity-top { display:flex; justify-content:space-between; gap:8px; }.activity-top b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.activity-top time { color:var(--muted); font-size:10px; white-space:nowrap; }
.activity-body p { margin:4px 0; color:#54545b; font-size:12px; line-height:1.35; }.activity-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.activity-meta span,.activity-meta a { font-size:10px; padding:4px 7px; border-radius:8px; color:#696970; background:#f0f0f5; text-decoration:none; }
.empty { color:var(--muted); text-align:center; font-size:13px; padding:30px 10px; }
.bottom-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; padding:7px 10px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid rgba(0,0,0,.08); background:rgba(249,249,251,.88); backdrop-filter:blur(24px) saturate(180%); display:grid; grid-template-columns:repeat(4,1fr); }
.nav-button { border:0; background:transparent; color:#8e8e93; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:550; padding:4px; }.nav-button svg { width:22px;height:22px;stroke-width:1.9}.nav-button.active{color:var(--blue)}
@media (min-width: 760px) {
  .app-shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
  .sidebar { display:flex; position:sticky; top:0; height:100vh; flex-direction:column; padding:28px 18px; border-right:1px solid var(--line); background:rgba(255,255,255,.62); backdrop-filter:blur(25px); }
  .brand { display:flex; align-items:center; gap:10px; font-weight:720; font-size:17px; padding:0 8px 28px; }.brand-mark{width:34px;height:34px;border-radius:10px}
  .desktop-nav { display:flex; flex-direction:column; gap:5px; }.desktop-nav .nav-button{flex-direction:row;justify-content:flex-start;border-radius:12px;padding:11px 12px;font-size:13px;gap:12px}.desktop-nav .nav-button.active{background:#e5f2ff}
  .sidebar-profile { margin-top:auto; display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding:18px 6px 0; }.sidebar-profile b,.sidebar-profile small{display:block;font-size:12px}.sidebar-profile small{color:var(--muted);margin-top:3px}
  .bottom-nav { display:none; }.main-content { width:100%; padding:34px 32px 60px; max-width:950px; }.metric-grid{grid-template-columns:repeat(4,1fr)}.metric-card{min-height:145px}.hero-card{min-height:190px}.topbar h1{font-size:32px}
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme:dark; --bg:#0b0b0d; --card:rgba(28,28,31,.9); --text:#f5f5f7; --muted:#98989f; --line:rgba(255,255,255,.09); --shadow:0 14px 35px rgba(0,0,0,.22); }
  .period-control button.active{background:#3a3a3d;color:#fff}.metric-card,.panel{border-color:rgba(255,255,255,.04)}.bottom-nav{background:rgba(20,20,22,.9);border-color:rgba(255,255,255,.08)}.sidebar{background:rgba(20,20,22,.72)}.employee-info small,.activity-body p{color:#aaaab1}.activity-meta span,.activity-meta a{background:#303034;color:#c4c4c8}.standalone,.activity-list{background:var(--card)}
}