:root { --ink:#142922; --muted:#62736d; --line:#dce8e2; --paper:#f4f8f6; --surface:#fff; --forest:#124b3c; --forest-deep:#0c3429; --mint:#dff6e9; --lime:#c7ec5c; --gold:#ffca52; --danger:#b52d42; --danger-bg:#fff0f2; --shadow:0 18px 45px rgba(16,56,43,.09); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--paper); } button,input,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #226cde; outline-offset:3px; } [hidden] { display:none !important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(420px,.9fr); background:#eaf4ef; }
.login-intro { min-height:100vh; background:linear-gradient(145deg,rgba(8,47,37,.96),rgba(17,87,67,.96)),radial-gradient(circle at 28% 20%,#4fae83 0 1px,transparent 1.5px); background-size:auto,30px 30px; color:#fff; padding:clamp(40px,8vw,112px); display:flex; flex-direction:column; justify-content:center; }
.brand { color:var(--ink); display:inline-flex; gap:10px; align-items:center; font-weight:800; font-size:16px; letter-spacing:-.02em; text-decoration:none; width:max-content; }.brand small { display:block; font-size:8px; letter-spacing:1.7px; font-weight:800; margin-top:-2px; }.brand-mark { width:38px; height:38px; border-radius:12px 12px 12px 3px; background:var(--forest); color:#fff; display:grid; place-items:center; font-size:12px; letter-spacing:-.6px; }.brand-light { color:#fff; }.brand-light .brand-mark { background:var(--lime); color:var(--forest-deep); }
.login-intro .brand { position:absolute; top:30px; }.eyebrow { color:#578374; font-size:10px; font-weight:800; letter-spacing:1.4px; margin:0 0 8px; }.login-intro .eyebrow { color:#b9e9d4; margin-top:40px; }.login-intro h1 { font-size:clamp(38px,4.7vw,66px); line-height:1.03; letter-spacing:-.055em; max-width:660px; margin:0; }.intro-copy { color:#d1ebe0; font-size:17px; line-height:1.65; max-width:560px; margin:25px 0 30px; }.feature-list { border-top:1px solid rgba(255,255,255,.2); display:grid; gap:14px; list-style:none; margin:0; max-width:540px; padding:26px 0 0; }.feature-list li { color:#e7f8ef; display:flex; gap:12px; font-size:14px; }.feature-list span { color:var(--lime); font-weight:900; }
.login-panel { align-items:center; display:flex; justify-content:center; padding:32px; }.login-card { background:var(--surface); border:1px solid #dce8e2; border-radius:26px; box-shadow:var(--shadow); max-width:460px; padding:42px; width:100%; }.login-card h2 { font-size:29px; letter-spacing:-.035em; margin:0; }.login-card>p:not(.eyebrow):not(.security-caption) { color:var(--muted); font-size:14px; line-height:1.55; margin:12px 0 28px; }.login-card label { display:block; font-size:13px; font-weight:750; margin:18px 0 7px; }.login-card input,.review-note,.amount-input { border:1px solid #adbfB7; border-radius:10px; color:var(--ink); min-height:47px; padding:10px 12px; width:100%; }.login-card input:focus,.review-note:focus,.amount-input:focus { border-color:var(--forest); }.form-message,.portal-error { background:var(--danger-bg); border:1px solid #f2b8c3; border-radius:10px; color:var(--danger); font-size:13px; line-height:1.4; margin:18px 0 0; padding:11px 12px; }.primary-button { align-items:center; border:0; background:var(--forest); border-radius:11px; color:#fff; display:flex; font-weight:800; justify-content:center; min-height:50px; padding:11px 16px; transition:background .15s,transform .15s; }.primary-button:hover { background:var(--forest-deep); }.primary-button:active { transform:translateY(1px); }.full-width { margin-top:22px; width:100%; }.primary-button span { font-size:20px; margin-left:10px; }.security-caption { color:var(--muted); font-size:11px; line-height:1.5; margin:19px 4px 0; text-align:center; }
.portal { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }.sidebar { background:var(--forest-deep); color:#fff; display:flex; flex-direction:column; min-height:100vh; padding:26px 16px 18px; position:sticky; top:0; height:100vh; }.workspace-label { color:#99c7b2; font-size:9px; font-weight:800; letter-spacing:1.35px; margin:43px 12px 13px; }.side-nav { display:grid; gap:5px; }.nav-item { align-items:center; background:transparent; border:0; border-radius:9px; color:#d4e9df; display:flex; font-size:13px; font-weight:650; gap:12px; min-height:43px; padding:0 12px; text-align:left; width:100%; }.nav-item span { color:#a8d7c1; font-size:17px; width:18px; }.nav-item:hover { background:rgba(255,255,255,.07); }.nav-item.is-active { background:#1d5b49; color:#fff; }.nav-item.is-active span { color:var(--lime); }.nav-item b { background:var(--lime); border-radius:99px; color:var(--forest-deep); font-size:10px; margin-left:auto; min-width:21px; padding:3px 6px; text-align:center; }.sidebar-footer { border-top:1px solid rgba(255,255,255,.15); margin-top:auto; padding:18px 5px 0; }.operator-chip { align-items:center; display:flex; gap:9px; }.operator-chip>span { background:#286854; border-radius:50%; display:grid; font-size:11px; font-weight:800; height:31px; place-items:center; width:31px; }.operator-chip strong,.operator-chip small { display:block; }.operator-chip strong { font-size:12px; max-width:158px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.operator-chip small { color:#a7cdbb; font-size:10px; margin-top:2px; }.logout-button { background:none; border:0; color:#c4ded2; font-size:12px; font-weight:700; margin:15px 0 0 40px; padding:4px; }.logout-button:hover { color:#fff; text-decoration:underline; }
.workspace { max-width:1500px; width:100%; margin:0 auto; padding:0 38px 50px; }.topbar { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; min-height:112px; }.topbar .eyebrow { margin-bottom:5px; }.topbar h1 { font-size:25px; letter-spacing:-.04em; margin:0; }.topbar-actions { align-items:center; display:flex; gap:14px; }.secure-status { align-items:center; color:var(--muted); display:flex; font-size:11px; font-weight:700; gap:7px; }.secure-status i { background:#43ab72; border-radius:50%; height:7px; width:7px; }.icon-button { background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--forest); font-size:22px; height:40px; line-height:1; width:40px; }.icon-button:hover { background:#eaf4ef; }.content-section { padding-top:32px; }.section-intro { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:22px; }.section-intro h2 { font-size:25px; letter-spacing:-.04em; margin:0; }.section-intro p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.5; margin:7px 0 0; max-width:720px; }.section-intro time { color:var(--muted); font-size:12px; font-weight:650; padding-top:9px; }.stats-grid { display:grid; gap:15px; grid-template-columns:repeat(5,1fr); margin-bottom:22px; }.stat-card { background:#fff; border:1px solid var(--line); border-radius:15px; min-height:132px; padding:18px; }.stat-card.priority { background:linear-gradient(135deg,#fff 0%,#effbf3 100%); border-color:#bce2ca; }.stat-label { color:var(--muted); font-size:11px; font-weight:750; line-height:1.35; }.stat-value { color:var(--ink); font-size:28px; font-weight:800; letter-spacing:-.04em; margin:16px 0 3px; }.stat-value.currency { font-size:22px; }.stat-hint { color:#4d7767; font-size:10px; font-weight:700; }.overview-grid { display:grid; gap:22px; grid-template-columns:1.1fr .9fr; }.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }.panel-heading { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:13px; }.panel-heading h2 { font-size:17px; letter-spacing:-.025em; margin:0; }.text-button { background:none; border:0; color:var(--forest); font-size:11px; font-weight:800; padding:4px; }.text-button:hover { text-decoration:underline; }.priority-item { align-items:center; border-top:1px solid #e7efeb; display:flex; gap:12px; padding:14px 0; }.priority-icon { background:#eff8f3; border-radius:9px; color:var(--forest); display:grid; font-size:16px; font-weight:800; height:34px; place-items:center; width:34px; }.priority-copy { flex:1; min-width:0; }.priority-copy strong,.priority-copy span { display:block; }.priority-copy strong { font-size:12px; }.priority-copy span { color:var(--muted); font-size:11px; margin-top:3px; }.small-action { background:#e5f4eb; border:0; border-radius:8px; color:var(--forest); font-size:11px; font-weight:800; min-height:32px; padding:5px 9px; }.small-action:hover { background:#cdebd9; }.activity-row { align-items:flex-start; border-top:1px solid #e7efeb; display:flex; gap:10px; padding:13px 0; }.activity-marker { background:#e5f4eb; border-radius:50%; height:8px; margin-top:5px; width:8px; }.activity-copy { flex:1; }.activity-copy strong { display:block; font-size:12px; text-transform:capitalize; }.activity-copy span { color:var(--muted); display:block; font-size:11px; line-height:1.45; margin-top:3px; }.activity-time { color:var(--muted); font-size:10px; white-space:nowrap; }.notice { background:#e9f7ef; border:1px solid #bde2ca; border-radius:12px; color:#285848; font-size:12px; line-height:1.55; margin-bottom:18px; padding:12px 14px; }.notice.warning { background:#fff8e5; border-color:#efd38e; color:#684c08; }.request-list { display:grid; gap:14px; }.request-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }.request-top { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; }.request-title { font-size:17px; letter-spacing:-.02em; margin:0; }.request-meta { color:var(--muted); font-size:12px; line-height:1.5; margin:5px 0 0; }.status { background:#eef5f1; border-radius:99px; color:#356653; display:inline-block; font-size:10px; font-weight:800; letter-spacing:.35px; padding:5px 8px; }.status.pending { background:#fff3d3; color:#775611; }.status.settled,.status.active,.status.approved { background:#e2f5e9; color:#1e7148; }.status.failed,.status.rejected { background:#feecee; color:#a3293d; }.request-grid { display:grid; gap:12px 20px; grid-template-columns:repeat(4,minmax(0,1fr)); margin:18px 0; }.request-field span,.request-field strong { display:block; }.request-field span { color:var(--muted); font-size:10px; font-weight:700; }.request-field strong { font-size:12px; margin-top:4px; overflow-wrap:anywhere; }.decision-area { border-top:1px solid #e6efea; display:grid; gap:10px; grid-template-columns:minmax(180px,1fr) minmax(160px,.6fr) auto auto; padding-top:15px; }.decision-area .review-note { min-height:43px; resize:vertical; }.amount-input { min-height:43px; }.danger-button { background:#fff; border:1px solid #dba5ae; border-radius:9px; color:var(--danger); font-size:12px; font-weight:800; min-height:43px; padding:8px 12px; }.danger-button:hover { background:var(--danger-bg); }.data-table-wrap { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:auto; }.data-table { border-collapse:collapse; min-width:760px; width:100%; }.data-table th { background:#f6faf8; color:#647871; font-size:10px; letter-spacing:.45px; padding:13px 16px; text-align:left; }.data-table td { border-top:1px solid #e6efea; font-size:12px; padding:14px 16px; }.member-cell strong,.member-cell small { display:block; }.member-cell strong { font-size:12px; }.member-cell small { color:var(--muted); font-size:10px; margin-top:3px; }.amount { font-weight:800; white-space:nowrap; }.empty-state { color:var(--muted); font-size:13px; line-height:1.55; padding:32px 6px; text-align:center; }.large-activity { padding:8px 20px; }.portal-error { margin-top:20px; }.loading-indicator { color:var(--muted); font-size:12px; font-weight:700; margin-top:16px; }
@media (max-width:1100px) { .stats-grid { grid-template-columns:repeat(3,1fr); }.request-grid { grid-template-columns:repeat(2,1fr); }.decision-area { grid-template-columns:1fr 1fr; }.decision-area textarea { grid-column:1/-1; }.overview-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .login-shell { grid-template-columns:1fr; }.login-intro { min-height:auto; padding:115px 28px 46px; }.login-intro .brand { left:28px; top:25px; }.login-intro h1 { font-size:39px; }.login-panel { padding:24px 16px; }.login-card { border-radius:20px; padding:28px 22px; }.portal { display:block; }.sidebar { height:auto; min-height:0; padding:17px 16px; position:static; }.workspace-label,.sidebar-footer { display:none; }.side-nav { display:flex; gap:5px; margin:19px -4px -4px; overflow-x:auto; }.nav-item { flex:0 0 auto; min-height:35px; padding:0 9px; }.nav-item span { font-size:14px; width:auto; }.workspace { padding:0 17px 35px; }.topbar { min-height:89px; }.topbar h1 { font-size:21px; }.secure-status { display:none; }.content-section { padding-top:25px; }.section-intro h2 { font-size:22px; }.section-intro time { display:none; }.stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.stat-card { min-height:112px; padding:14px; }.stat-card:last-child { grid-column:1/-1; }.stat-value { font-size:24px; margin-top:11px; }.request-card { padding:16px; }.request-top { display:block; }.request-top .status { margin-top:10px; }.request-grid { grid-template-columns:1fr 1fr; margin:15px 0; }.decision-area { grid-template-columns:1fr; }.decision-area textarea { grid-column:auto; }.primary-button,.danger-button { width:100%; }.overview-grid { gap:14px; }.panel { padding:16px; } }