/* Charcoal workspace theme inspired by the supplied editorial UI reference. */
:root { --bg:#0c0e10; --panel:#101214; --text:#edeef0; --muted:#a2a6ab; --accent:#c6c9ce; --radius:12px; --shadow:0 4px 18px #00000015; color-scheme:dark; }
html, body { background:#0c0e10; }
body { padding-bottom:32px; }
.wrap { max-width:1600px; margin:0 auto; padding:36px 32px; }
header.hero { gap:10px; margin-bottom:28px; }
header.hero h1 { font-size:clamp(23px,2.4vw,28px); background:none; -webkit-text-fill-color:var(--text); letter-spacing:-.035em; }
header.hero .badge { align-self:flex-start; padding:0; border:0; background:none; color:#c6c9ce; font-size:10px; letter-spacing:.12em; }
header.hero p { max-width:760px; font-size:14px; }
.panel { background:var(--panel); border:1px solid #2b2e32; border-radius:8px; box-shadow:none; }
.panel::before,.panel::after,.summary-card::before,.action-card::after { display:none; }
.summary-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; padding:20px; }
.summary-card { padding:20px; gap:10px; border-radius:7px; background:#141719; border:1px solid #303337; box-shadow:none; min-width:0; }
.summary-card:hover { transform:none; box-shadow:none; }
.summary-card h3 { color:#b9bdc2; font-size:11px; letter-spacing:.055em; }
.summary-card .value { font-size:26px; font-variant-numeric:tabular-nums; }
.summary-card .sub { color:#a2a6ab; font-size:12px; }
.form-section { padding:24px; gap:20px; }
.form-section h2 { font-size:18px; letter-spacing:-.025em; }
.action-card { padding:24px; gap:12px; background:#101214; border:1px solid #2b2e32; border-radius:8px; box-shadow:none; }
.action-card:hover { border-color:#c6c9ce; transform:translateY(-2px); box-shadow:none; }
.dashboard-actions,.dashboard-grid,.grid-layout { gap:20px; margin-top:24px; }
.dashboard-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); }
input,select,textarea { background:#15181b; border:1px solid #363a3f; border-radius:8px; min-height:44px; }
input::placeholder,textarea::placeholder { color:#8b9097; }
label { font-size:13px; color:#c8cbd0; }
button,.nav-button { min-height:44px; border-radius:8px; white-space:normal; }
button.primary { background:#e3e5e8; color:#151719; box-shadow:none; }
button.primary:hover { background:#ffffff; box-shadow:none; }
.button-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 20px; border-radius:8px; font-size:14px; font-weight:650; text-decoration:none; text-align:center; }
.button-link.primary { background:#e3e5e8; color:#151719; }
.button-link.primary:hover { background:#ffffff; }
button.secondary { background:#202327; border-color:#3d4147; box-shadow:none; }
button:disabled { opacity:.55; cursor:not-allowed; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid #d0d4db; outline-offset:3px; }
.auth-card { background:#121517; border:1px solid #303439; border-radius:7px; }
.table-wrap { padding:24px; }
.table-wrap.compact,.table-container { overflow-x:auto; }
th { color:#b8bdc4; letter-spacing:.06em; }
td { font-variant-numeric:tabular-nums; }
tbody tr:hover { background:#ffffff04; }
.main-nav { background:#1a1d20; border:1px solid #2b2e32; box-shadow:none; }
.nav-link { min-height:44px; color:#aeb3b9; font-size:13px; padding:10px 14px; border-radius:8px; }
.nav-link.active { background:#303438; color:#f4f4f5; box-shadow:none; }
.nav-link.active::before { display:none; }
.nav-link:hover { transform:none; background:#292d31; }
.workspace-brand { display:none; }
.menu-toggle { display:none; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-150%); z-index:9999; padding:12px 18px; background:#e3e5e8; color:#141618; border-radius:8px; }
.skip-link:focus { transform:none; }
:root { --accent-2:#c6c9ce; --accent-3:#d0c8b7; --ring:0 0 0 3px #ffffff16; }
html,body { font-family:Arial,Helvetica,ui-sans-serif,sans-serif; font-size:14px; }
h1,h2,h3,h4,.form-section h2,.action-title { font-weight:550; }
header.hero { border-bottom:1px solid #2a2d31; padding-bottom:24px; gap:8px; }
header.hero h1 { font-weight:550; }
header.hero .badge { font-weight:500; letter-spacing:.03em; text-transform:none; color:#9a9fa6; font-size:12px; }
header.hero p { color:#9da2a9; font-size:13px; }
.panel { background:#0f1113; }
.panel + .panel { margin-top:20px; }
.badge,.pill { background:#22262a; border:1px solid #34383d; color:#c2c6cc; border-radius:5px; font-size:10px; letter-spacing:.025em; font-weight:500; }
.form-section > .badge { align-self:flex-start; }
.summary-card { background:#131619; gap:8px; padding:18px; }
.summary-card h3 { text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; }
.summary-card .value { font-weight:550; line-height:1.3; }
.action-icon { font-size:25px; filter:grayscale(1); }
.action-title { font-size:18px; }
.action-description { color:#a2a6ad; font-size:13px; }
.action-card:hover { border-color:#62686f; transform:none; }
button,.button-link,.nav-button { font-weight:500; font-size:12px; min-height:36px; padding:8px 14px; border-radius:6px; line-height:1.35; word-break:normal; overflow-wrap:normal; }
button.ghost,.nav-button { background:#171a1d; border:1px solid #3a3f45; color:#c6cbd1; }
button.ghost:hover,.nav-button:hover { background:#292d32; border-color:#5b626b; color:#f1f2f3; }
input,select,textarea { min-height:36px; padding:9px 12px; font-size:13px; border-radius:6px; }
input:focus,select:focus,textarea:focus { transform:none; }
label { font-size:12px; font-weight:500; }
.auth-card { padding:24px; gap:18px; }
.auth-card h2 { font-size:18px; }
.loan-card { padding:14px 0; background:none; border:0; border-bottom:1px dotted #373b40; border-radius:0; gap:6px; }
.loan-card label { font-size:12px; font-weight:500; color:#e3e5e8; }
.loan-card .field-hint,.loan-meta { color:#9fa5ad; font-size:11px; letter-spacing:0; text-transform:none; }
.loan-card .control span { background:#25292d; color:#b9bfc7; border-radius:4px; padding:4px 7px; }
.loan-card input { background:#15181b; border-color:#363a3f; padding-left:52px; }
.loan-sidebar { background:#15181b; border:1px solid #30353a; border-radius:7px; padding:18px; }
.loan-sidebar h3 { font-size:14px; }
.loan-item button { background:#1b1f23; border-color:#343a40; border-radius:6px; }
.loan-item.active button,.loan-item button:hover { background:#2b3035; border-color:#656c75; transform:none; }
.loan-name { font-weight:500; }
.loan-table .table-wrap { background:#121518; }
.loan-table table tr.active { background:#282d32; }
.loan-detail { min-width:0; }
.table-wrap.compact { border-color:#30353a; border-radius:6px; }
thead { background:#1b1f23; }
th { text-transform:none; letter-spacing:0; font-weight:500; font-size:12px; }
td { font-size:13px; }
.toast { background:#25292e; border-color:#454b53; color:#eef0f2; box-shadow:0 6px 24px #0005; }
.nav-icon { width:15px; height:15px; flex:0 0 15px; color:#90979f; }
.nav-link { gap:10px; font-weight:400; }
.nav-link.active .nav-icon { color:#e3e6e9; }
.nav-section-label { display:none; }
@media(min-width:760px) {
 body:has(.main-nav) .wrap { margin-left:208px; padding:36px 36px 48px; }
 .main-nav { position:fixed; top:0; bottom:0; left:0; width:208px; margin:0; padding:28px 16px 20px; border-width:0 1px 0 0; border-radius:0; flex-direction:column; align-items:stretch; gap:5px; overflow-y:auto; z-index:50; flex-wrap:nowrap; }
 .workspace-brand { display:flex; flex-direction:column; gap:6px; padding:0 12px 24px; color:#eceef0; font-size:21px; font-weight:600; letter-spacing:-.04em; }
 .workspace-brand small { font-size:10px; font-weight:600; letter-spacing:.12em; color:#92979e; text-transform:uppercase; }
 .nav-button-logout { margin:24px 0 0; flex-shrink:0; }
 .main-nav .nav-link { min-height:40px; padding:9px 14px; flex-shrink:0; }
 .main-nav { background:linear-gradient(160deg,#232628,#181b1e 65%); gap:3px; padding:24px 12px; }
 .main-nav .nav-link { min-height:35px; padding:8px 10px; font-size:12px; border-radius:5px; }
 .workspace-brand { padding:4px 10px 22px; font-size:18px; letter-spacing:-.02em; }
 .workspace-brand small { font-size:10px; text-transform:none; letter-spacing:0; }
 .nav-section-label { display:block; padding:15px 10px 7px; margin-top:10px; border-top:1px solid #34383b; font-size:10px; color:#969da5; letter-spacing:.04em; }
 .nav-button-logout { margin-top:auto; border-radius:6px; }
 .main-nav { padding-bottom:18px; }
 .loan-sidebar { flex-basis:210px; }
}
@media(max-width:759px) {
 .wrap { padding:24px; }
 .menu-toggle { display:inline-flex; margin-bottom:16px; background:#23272b; color:#eceef0; border:1px solid #3b4046; }
 .main-nav { gap:6px; padding:10px; margin-bottom:24px; }
 .main-nav[data-collapsed="true"] { display:none; }
 .main-nav .nav-link { flex:1 1 140px; }
 .nav-button-logout { margin-left:0; }
}
@media(max-width:600px) {
 button,.button-link,.nav-button,input,select { min-height:44px; }
 .wrap { padding:22px 14px; }
 .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:10px; }
 .summary-card { padding:14px; }
 .summary-card .value { font-size:23px; }
 .form-section,.table-wrap { padding:18px; }
 .dashboard-actions { grid-template-columns:minmax(0,1fr); }
 .auth-grid { grid-template-columns:minmax(0,1fr); }
 .main-nav .nav-link { flex-basis:120px; }
 .modal-content { max-width:calc(100vw - 24px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }


@media(min-width:760px) and (max-width:1099px) { .main-nav { width:180px; } body:has(.main-nav) .wrap { margin-left:180px; padding:24px 22px; } }