:root{--primary: #0a0a0a;--primary-soft: #1f1f1f;--accent: #c9a961;--accent-soft: #b08f4a;--accent-tint: #f7f1e2;--bg: #fafaf8;--card: #ffffff;--text: #0f0f0f;--muted: #6b6b6b;--border: #ece6d5;--danger: #b8392b;--warn: #b07a1a;--ok: #1e6f5c}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--accent)}a:hover{color:var(--accent-soft);border-bottom-color:var(--accent-soft)}button{background:var(--accent);color:var(--primary);border:1px solid var(--accent);padding:8px 14px;border-radius:4px;font-weight:600;cursor:pointer;font-size:13px;letter-spacing:.2px;transition:background .12s,color .12s,border-color .12s}button:hover{background:var(--accent-soft);border-color:var(--accent-soft)}button.secondary{background:var(--card);color:var(--primary);border:1px solid var(--primary)}button.secondary:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--primary)}button.ok{background:var(--ok);color:var(--card);border-color:var(--ok)}button.ok:hover{background:#185a4b;border-color:#185a4b}button.danger{background:var(--danger);color:var(--card);border-color:var(--danger)}button.danger:hover{background:#93291f;border-color:#93291f}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;background:var(--card);font-family:inherit;color:var(--text);transition:border-color .12s,box-shadow .12s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.field{margin-bottom:12px}.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:var(--primary);color:#ffffffc7;padding:24px 0;position:relative;border-right:1px solid var(--primary)}.sidebar h2{padding:0 22px;margin:0 0 28px;font-size:17px;letter-spacing:1px;color:var(--accent);font-weight:700;text-transform:uppercase}.sidebar nav a{display:block;padding:10px 22px;color:#ffffffbd;font-size:13px;border-bottom:none;border-left:2px solid transparent;transition:background .12s,color .12s,border-color .12s}.sidebar nav a:hover{background:#c9a96114;color:#fff;text-decoration:none}.sidebar nav a.active{background:#c9a9611f;color:var(--accent);border-left-color:var(--accent)}.sidebar .user{position:absolute;bottom:18px;padding:0 22px;font-size:12px;color:#ffffff8c}.sidebar .user>div:first-child{color:#ffffffd9;font-weight:600}.sidebar .user a{color:var(--accent)!important;border-bottom-color:transparent}.main{padding:28px 36px}.main h1{font-size:22px;margin:0 0 4px;color:var(--primary);font-weight:700;letter-spacing:.2px}.main h1+.sub{color:var(--muted);margin-bottom:22px;font-size:13px;max-width:60ch}.card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 3px #0a0a0a08}.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}.kpi{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px 18px;position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}.kpi .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}.kpi .value{font-size:26px;font-weight:700;color:var(--primary);margin-top:6px;letter-spacing:-.3px}.kpi .meta{font-size:11px;color:var(--muted);margin-top:4px}table{width:100%;border-collapse:collapse}th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}th{background:var(--accent-tint);color:var(--primary);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.6px}tbody tr:hover{background:#c9a9610a}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.pill{display:inline-block;padding:2px 9px;border-radius:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent}.pill.draft{background:#f3f3f0;color:#4a4a4a;border-color:#e3e3e0}.pill.calculated{background:var(--accent-tint);color:var(--accent-soft);border-color:var(--accent)}.pill.submitted{background:#fbf1d6;color:#7a5d12;border-color:#ead8a0}.pill.approved{background:#e2efe7;color:var(--ok);border-color:#c4dccd}.pill.paid{background:var(--accent-tint);color:var(--accent-soft);border-color:var(--accent)}.pill.cancelled{background:#f8e2dd;color:var(--danger);border-color:#ecbfb6}.pill.pending{background:#fbf1d6;color:#7a5d12;border-color:#ead8a0}.pill.rejected{background:#f8e2dd;color:var(--danger);border-color:#ecbfb6}.pill.escalated{background:#ede7f3;color:#5b3e7a;border-color:#d3c5e2}.pill.skipped{background:#f3f3f0;color:#4a4a4a;border-color:#e3e3e0}.pill.high,.pill.critical{background:#f8e2dd;color:var(--danger);border-color:#ecbfb6}.pill.medium{background:#fbf1d6;color:#7a5d12;border-color:#ead8a0}.pill.low{background:#e2efe7;color:var(--ok);border-color:#c4dccd}.login-shell{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(circle at 10% 20%,rgba(201,169,97,.08) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(10,10,10,.04) 0%,transparent 40%)}.login-card{background:var(--card);padding:36px 40px;border-radius:6px;border:1px solid var(--border);box-shadow:0 6px 32px #0a0a0a0f;width:380px;position:relative}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);border-radius:6px 6px 0 0}.login-card h1{margin:4px 0 6px;color:var(--primary);font-size:24px;letter-spacing:.4px}.login-card .sub{color:var(--muted);font-size:12.5px;margin-bottom:22px}.error{background:#f8e2dd;color:var(--danger);padding:8px 12px;border-radius:4px;font-size:13px;margin-bottom:12px;border-left:3px solid var(--danger)}.success{background:#e2efe7;color:var(--ok);padding:8px 12px;border-radius:4px;font-size:13px;margin-bottom:12px;border-left:3px solid var(--ok)}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.row.start{align-items:flex-start}.spaced{display:flex;justify-content:space-between;align-items:center}.muted{color:var(--muted)}.code,code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;background:var(--accent-tint);color:var(--primary);padding:1px 6px;border-radius:3px;border:1px solid var(--border)}.workflow-steps{list-style:none;padding:0;margin:0}.workflow-steps li{padding:12px 0;border-bottom:1px dashed var(--border)}.workflow-steps li:last-child{border-bottom:none}.workflow-steps .step-no{display:inline-block;width:28px;height:28px;line-height:26px;text-align:center;background:var(--primary);color:var(--accent);border:1px solid var(--accent);border-radius:50%;font-weight:700;font-size:12px;margin-right:12px}iframe.payslip{width:100%;height:1200px;border:1px solid var(--border);border-radius:6px}