:root {
  --site-primary: #142D4B;
  --site-on-primary: #FFFFFF;
  --site-secondary: #D99A35;
  --site-on-secondary: #172033;
  --site-background: #F2F5F8;
  --site-on-background: #172033;
  --site-font-body: Tahoma, Arial, sans-serif;
  --site-font-heading: Tahoma, Arial, sans-serif;
  --site-heading-scale: 1;
  --site-spacing-scale: 1;
  --site-radius-scale: 1;
  --site-decoration-opacity: 1;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--site-font-body); background:light-dark(#F2F5F8,#101923); color:light-dark(#172033,#EDF2F7); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
#app { min-height:100vh; width:100%; border-radius:0; background-color:light-dark(var(--site-background),#101923); color:light-dark(var(--site-on-background),#EDF2F7); }
.topbar { background:var(--site-primary); color:var(--site-on-primary); padding:calc(18px * var(--site-spacing-scale)) clamp(16px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:44px;height:44px;border-radius:12px;background:#fff;color:var(--site-primary);display:grid;place-items:center;font-weight:900;font-size:24px; }
.brand h1 { font-family:var(--site-font-heading);font-size:calc(18px * var(--site-heading-scale));margin:0;letter-spacing:1px; }
.brand small { display:block;color:#D7E0EA;font-size:10px;margin-top:4px;letter-spacing:1.2px; }
.top-actions { display:flex;align-items:center;gap:10px; }
.pill { border:1px solid #ffffff44;padding:8px 12px;border-radius:30px;font-size:12px;color:white;background:#ffffff12; }
.shell { max-width:1240px;margin:auto;padding:24px clamp(14px,3vw,30px) 50px; }
.hero { display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px; }
.eyebrow { color:var(--site-secondary);font-weight:bold;font-size:12px;letter-spacing:.7px; }
h2 { font-family:var(--site-font-heading);font-size:calc(25px * var(--site-heading-scale));margin:6px 0 4px; }
.sub { color:light-dark(#68778A,#AAB7C6);font-size:13px;line-height:1.7; }
.grid { display:grid;gap:14px; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 22px; }
.card { background:light-dark(#FFFFFF,#192533);border:1px solid light-dark(#E1E7EE,#2A3A4A);border-radius:calc(16px * var(--site-radius-scale));padding:18px;box-shadow:0 4px 18px #132b4510; }
.stat-label { color:light-dark(#6B7889,#AAB7C6);font-size:12px; }
.stat-value { font-size:26px;font-weight:800;margin-top:8px;direction:ltr;text-align:right; }
.stat-note { color:light-dark(#7A8796,#91A0B0);font-size:11px;margin-top:5px; }
.layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.9fr);gap:16px;align-items:start; }
.section-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px; }
.section-head h3 { margin:0;font-size:16px; }
.btn { border:0;border-radius:10px;padding:10px 14px;font-weight:700;font-size:12px;transition:.15s; }
.btn.primary { background:var(--site-primary);color:white; }
.btn.secondary { background:var(--site-secondary);color:#172033; }
.btn.ghost { background:light-dark(#EDF2F6,#263646);color:light-dark(#26384B,#E8EEF4); }
.btn.danger { background:#FCE8E7;color:#A52A24; }
.btn.success { background:#E3F5EB;color:#176B3C; }
.btn:disabled { opacity:.5;cursor:not-allowed; }
.btn.small { padding:7px 10px;font-size:11px; }
.tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px; }
.tab { background:transparent;border:1px solid light-dark(#DCE3EB,#334557);color:inherit;border-radius:30px;padding:8px 13px;font-size:12px; }
.tab.active { background:var(--site-primary);color:white;border-color:var(--site-primary); }
.table-wrap { overflow:auto; }
table { width:100%;border-collapse:collapse;min-width:520px;font-size:12px; }
th { text-align:right;color:light-dark(#718094,#AAB7C6);font-weight:600;padding:11px 9px;border-bottom:1px solid light-dark(#E8EDF2,#304153); }
td { padding:13px 9px;border-bottom:1px solid light-dark(#EEF1F5,#283949);vertical-align:middle; }
tr:last-child td { border-bottom:0; }
.person { display:flex;align-items:center;gap:9px;white-space:nowrap; }
.avatar { width:34px;height:34px;border-radius:50%;background:#E5ECF3;color:#28435E;display:grid;place-items:center;font-weight:bold; }
.status { display:inline-block;border-radius:30px;padding:5px 8px;font-size:10px;font-weight:bold;white-space:nowrap; }
.pending { background:#FFF2D8;color:#98600C; }
.approved { background:#E3F5EB;color:#176B3C; }
.rejected { background:#FCE8E7;color:#A52A24; }
.muted { color:light-dark(#788698,#9EACBA); }
.amount { direction:ltr;text-align:right;font-weight:700;white-space:nowrap; }
.activity { display:flex;gap:10px;padding:11px 0;border-bottom:1px solid light-dark(#EDF1F5,#2B3A49);font-size:12px;line-height:1.6; }
.activity:last-child { border:0; }
.dot { width:9px;height:9px;border-radius:50%;background:var(--site-secondary);margin-top:5px;flex:none; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.field { display:flex;flex-direction:column;gap:6px;margin-bottom:12px; }
.field label { font-size:12px;font-weight:700;color:light-dark(#536276,#C0CBD6); }
.field input,.field select,.field textarea { width:100%;border:1px solid light-dark(#D8E0E8,#3A4B5C);background:light-dark(#FBFCFD,#111D29);color:inherit;border-radius:10px;padding:11px 12px;outline:none; }
.field textarea { min-height:82px;resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--site-secondary); }
.actions { display:flex;gap:7px;flex-wrap:wrap; }
.login { max-width:440px;margin:42px auto;padding:0 16px; }
.login .card { padding:26px; }
.login-mark { width:58px;height:58px;border-radius:16px;background:var(--site-primary);color:white;display:grid;place-items:center;font-weight:900;font-size:30px;margin-bottom:18px; }
.demo-hint { background:light-dark(#FFF7E8,#332918);border:1px solid #E7C88F;color:light-dark(#76501A,#F0D6A4);border-radius:12px;padding:12px;font-size:11px;line-height:1.7;margin-top:14px; }
.profile { display:flex;align-items:center;gap:14px;margin-bottom:18px; }
.profile .avatar { width:60px;height:60px;font-size:20px;border-radius:16px; }
.balance { background:var(--site-primary);color:white;border-radius:16px;padding:20px;margin-bottom:14px; }
.balance .big { font-size:32px;font-weight:800;direction:ltr;text-align:right;margin:8px 0; }
.balance small { color:#D6E0EA; }
.worker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.empty { text-align:center;color:light-dark(#778698,#9AA8B6);padding:25px;font-size:12px; }
.notice { border-radius:12px;padding:12px;background:light-dark(#EEF4F9,#213243);font-size:12px;line-height:1.7;margin-bottom:14px; }
.modal-backdrop { position:fixed;inset:0;background:#08152299;display:none;align-items:center;justify-content:center;padding:16px;z-index:20; }
.modal-backdrop.show { display:flex; }
.modal { width:min(520px,100%);max-height:90vh;overflow:auto;background:light-dark(#fff,#192533);color:inherit;border-radius:18px;padding:22px;box-shadow:0 20px 70px #0005; }
.modal-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.close { border:0;background:transparent;color:inherit;font-size:24px; }
.toast { position:fixed;bottom:20px;left:20px;background:#142D4B;color:white;padding:12px 16px;border-radius:12px;box-shadow:0 8px 30px #0003;z-index:40;font-size:12px;display:none; }
footer { text-align:center;color:light-dark(#8B98A7,#7E8D9C);font-size:10px;margin-top:28px;line-height:1.8; }
@media(max-width:850px) { .stats{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:1fr}.worker-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px) { .topbar{padding:14px}.brand h1{font-size:15px}.pill{font-size:10px;padding:7px 9px}.hero{align-items:flex-start;flex-direction:column}.stats{gap:9px}.card{padding:14px}.stat-value{font-size:22px}.form-grid{grid-template-columns:1fr}.worker-grid{grid-template-columns:1fr 1fr}.shell{padding-top:18px} }