:root {
  --obsidian:#090d12; --graphite:#17212c; --graphite-2:#202d3a; --cyan:#16b9f3;
  --cyan-soft:#12384a; --white:#e9f0f4; --panel:#17212c; --copper:#d58a52; --copper-soft:#40291d;
  --ink:#e9f0f4; --muted:#98a9b7; --line:#30404e; --danger:#f08066; --ok:#49c49e;
  --shadow:0 12px 30px rgba(0,0,0,.24); --radius:14px;
}
* { box-sizing:border-box; }
html { background:var(--obsidian); }
body { margin:0; color:var(--ink); background:#0f161e; font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; color-scheme:dark; }
a { color:#087fae; text-decoration:none; transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease; }
a:hover { color:#05698f; }
.topbar { min-height:72px; display:flex; align-items:center; gap:22px; padding:10px max(24px,3vw); background:var(--obsidian); color:var(--white); position:sticky; top:0; z-index:5; border-bottom:1px solid #293847; box-shadow:0 8px 25px rgba(9,13,18,.18); }
.brand { display:flex; align-items:center; gap:11px; color:var(--white); min-width:220px; }
.brand:hover { color:var(--white); transform:translateY(-1px); }
.brand img { width:62px; height:34px; object-fit:contain; filter:brightness(0) invert(1); }
.brand span { display:flex; flex-direction:column; line-height:1.1; }
.brand strong { font-size:17px; letter-spacing:.02em; }
.brand small { margin-top:4px; color:#8fa2b4; font-size:9px; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
nav { display:flex; align-items:center; gap:4px; flex:1; flex-wrap:wrap; }
nav a { color:#b9c6d1; padding:8px 10px; border-radius:8px; font-size:14px; font-weight:560; }
nav a:hover { color:var(--white); background:var(--graphite); }
.global-search { display:flex; align-items:center; position:relative; gap:7px; }
.global-search input { min-width:210px; height:38px; padding-right:32px; background:var(--graphite); border-color:#314150; color:var(--white); }
.global-search input::placeholder { color:#8294a5; }
.global-search input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(22,185,243,.16); }
.global-search kbd { position:absolute; right:66px; color:#8495a4; background:#253342; border:1px solid #3a4a59; border-radius:4px; padding:0 5px; font:11px/19px inherit; }
.global-search button { padding:8px 11px; font-size:13px; }
.container { width:min(1240px,94vw); margin:30px auto 64px; }
.button,button { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid #079fd8; border-radius:8px; background:var(--cyan); color:#06121a; padding:9px 14px; cursor:pointer; font:650 14px/1.2 inherit; box-shadow:0 2px 8px rgba(22,185,243,.16); }
.button:hover,button:hover { color:#06121a; background:#42c7f6; border-color:#42c7f6; text-decoration:none; transform:translateY(-1px); }
.button.secondary,button.secondary { background:var(--graphite); color:var(--ink); border-color:var(--line); box-shadow:none; }
.button.secondary:hover,button.secondary:hover { background:var(--graphite-2); border-color:#526777; }
.button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.new-button { white-space:nowrap; background:var(--cyan); }
.new-button span { font-size:18px; line-height:0; }
input,select,textarea { width:100%; border:1px solid #3a4c5b; border-radius:8px; padding:9px 11px; background:#101820; color:var(--ink); font:inherit; outline:none; transition:border-color .16s,box-shadow .16s; }
input::placeholder,textarea::placeholder { color:#718392; }
input:focus,select:focus,textarea:focus { border-color:#079fd8; box-shadow:0 0 0 3px rgba(22,185,243,.15); }
textarea { min-height:110px; resize:vertical; }
label { font-weight:650; display:block; margin-bottom:5px; font-size:13px; color:#bdc9d2; }
.field { margin-bottom:16px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.span-2 { grid-column:1/-1; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.page-heading h1 { margin:2px 0 2px; }
.page-heading p { margin:0; color:var(--muted); }
.eyebrow { color:#0886b5; text-transform:uppercase; font-size:11px; letter-spacing:.16em; font-weight:800; }
.today-label { color:var(--muted); font-weight:620; padding-bottom:5px; white-space:nowrap; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow); }
.panel h2 { margin-top:0; }
.section-icon { display:inline-grid; place-items:center; width:27px; height:27px; margin-right:5px; background:var(--cyan-soft); color:#087fae; border-radius:7px; }
.quick { display:grid; grid-template-columns:minmax(250px,2fr) minmax(155px,1fr) minmax(185px,1fr) auto; gap:12px; align-items:end; }
.metrics { display:grid; grid-template-columns:repeat(6,minmax(110px,1fr)); gap:12px; margin-bottom:22px; }
.metric { position:relative; display:block; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 15px; color:var(--muted); box-shadow:0 5px 18px rgba(0,0,0,.18); font-size:13px; font-weight:650; }
.metric::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--cyan); opacity:.65; }
.metric:hover { color:var(--ink); border-color:#a9c4d3; transform:translateY(-2px); box-shadow:var(--shadow); }
.metric strong { display:block; color:var(--ink); font-size:28px; line-height:1.05; margin-bottom:7px; letter-spacing:-.03em; }
.metric.danger { background:#211913; border-color:#68432d; }
.metric.danger::before { background:var(--copper); opacity:1; }
.metric.danger strong { color:var(--danger); }
.filters { display:grid; grid-template-columns:2fr repeat(4,1fr) auto; gap:10px; align-items:end; }
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 5px 18px rgba(0,0,0,.18); }
th,td { padding:12px 11px; border-bottom:1px solid #293946; text-align:left; vertical-align:middle; }
th { color:#8fa2b1; background:#111a23; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:760; }
tbody tr { transition:background .14s; }
tbody tr:hover { background:#1c2a36; }
tbody tr:last-child td { border-bottom:0; }
.item-title { color:#edf4f7; font-weight:700; }
.item-title:hover { color:#0785b5; }
.muted { color:var(--muted); }
.overdue { color:var(--danger); font-weight:750; }
.waiting { color:#a55a26; font-weight:750; }
.badge { display:inline-block; border-radius:999px; padding:3px 9px; background:#253441; color:#bdc9d2; border:1px solid #3a4c5b; font-size:11px; font-weight:720; white-space:nowrap; }
.context-Scigrow { box-shadow:inset 4px 0 var(--cyan); }
.context-Nashua { box-shadow:inset 4px 0 var(--copper); }
.context-CyborgAnt { box-shadow:inset 4px 0 #697b89; }
.context-Personal { box-shadow:inset 4px 0 #aebbc4; }
.context-Scigrow .badge { color:#6fd8ff; background:#12384a; border-color:#1e6079; }
.context-Nashua .badge { color:#efb083; background:var(--copper-soft); border-color:#68432d; }
.actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.actions form { display:inline; }
.validation-summary-errors,.field-validation-error { color:var(--danger); }
h1 { margin:0 0 18px; font-size:29px; letter-spacing:-.025em; line-height:1.2; }
h2 { font-size:18px; letter-spacing:-.01em; }
.audit { list-style:none; padding:0; }
.audit li { padding:12px 0; border-bottom:1px solid var(--line); }
.auth-panel { width:min(460px,94vw); margin:8vh auto; }
.check-field { display:flex; align-items:center; gap:9px; }
.check-field input { width:auto; }
.check-field label { margin:0; }
.module-tabs { display:flex; gap:5px; margin-bottom:24px; overflow-x:auto; scrollbar-width:none; }
.module-tabs::-webkit-scrollbar { display:none; }
.module-tabs a { padding:8px 12px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:8px; white-space:nowrap; }
.module-tabs a:hover { color:var(--ink); border-color:#526777; }
.invoice-totals { width:min(360px,100%); margin:24px 0 20px auto; }
.invoice-totals p { display:flex; justify-content:space-between; gap:30px; margin:8px 0; }
.invoice-totals .grand-total { font-size:18px; padding-top:10px; border-top:1px solid var(--line); }
code { color:#6fd8ff; background:#101820; padding:2px 5px; border-radius:4px; }
@media (max-width:1000px) { .topbar { flex-wrap:wrap; } nav { order:3; width:100%; } .global-search { margin-left:auto; } .metrics { grid-template-columns:repeat(3,1fr); } .filters { grid-template-columns:repeat(2,1fr); } .quick { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .topbar { position:static; padding:12px 14px; gap:12px; } .brand { min-width:0; flex:1; } .brand small { display:none; } .brand img { width:50px; } nav { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; } nav::-webkit-scrollbar { display:none; } nav a { white-space:nowrap; } .global-search { order:2; width:100%; } .global-search input { min-width:0; } .container { width:94vw; margin-top:20px; } .page-heading { align-items:flex-start; } .today-label { display:none; } .metrics { grid-template-columns:repeat(2,1fr); } .form-grid,.filters,.quick { grid-template-columns:1fr; } .span-2 { grid-column:auto; } table,thead,tbody,tr,td { display:block; } table { border:0; background:transparent; box-shadow:none; } thead { display:none; } tr { border:1px solid var(--line); border-radius:10px; margin-bottom:10px; padding:9px 9px 9px 13px; background:var(--panel); } td { border:0; padding:4px 8px; } }
