:root { color-scheme: light; --green:#176b46; --green-dark:#0f5135; --ink:#15232c; --muted:#687983; --line:#dce4e8; --surface:#fff; --bg:#f2f5f4; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Segoe UI",Tahoma,sans-serif; }
button,input { font:inherit; }
.overline { margin:0 0 7px; color:#2d805d; font-size:11px; font-weight:800; letter-spacing:.16em; }
.brand-mark { width:64px; height:64px; display:inline-grid; place-items:center; border-radius:18px; background:var(--green); color:white; font-size:24px; font-weight:850; box-shadow:0 12px 34px rgb(23 107 70 / 22%); }
.brand-mark.small { width:42px; height:42px; border-radius:12px; font-size:16px; }
.auth-page { min-height:100vh; background:radial-gradient(circle at 10% 10%,#dceee5,transparent 32%),#f4f7f5; }
.auth-layout { min-height:100vh; max-width:1100px; margin:auto; padding:48px 28px; display:grid; grid-template-columns:1.1fr .8fr; align-items:center; gap:80px; }
.auth-brand h1 { max-width:560px; margin:18px 0 12px; font-size:42px; line-height:1.12; letter-spacing:-.03em; }
.auth-brand>p:not(.overline) { max-width:560px; color:var(--muted); font-size:18px; line-height:1.65; }
.auth-brand ul { margin:28px 0 0; padding:0; display:grid; gap:12px; list-style:none; color:#3e5248; }
.auth-brand li::before { content:"✓"; margin-right:10px; color:var(--green); font-weight:900; }
.auth-card { padding:36px; border:1px solid #e1e8e4; border-radius:20px; background:rgb(255 255 255 / 92%); box-shadow:0 24px 80px rgb(26 52 40 / 12%); }
.auth-heading h2,.modal h2 { margin:0; font-size:28px; }
.auth-heading>p:last-child { margin:8px 0 25px; color:var(--muted); }
label { display:block; margin:15px 0 7px; font-size:13px; font-weight:700; }
input { width:100%; border:1px solid #cbd7d1; border-radius:9px; padding:12px 13px; background:#fff; color:var(--ink); outline:none; }
input:focus { border-color:#3b8d68; box-shadow:0 0 0 3px rgb(59 141 104 / 14%); }
.primary-action,.ghost-action,.excel-action { border:0; border-radius:9px; padding:11px 16px; cursor:pointer; font-weight:750; text-decoration:none; }
.primary-action { display:inline-flex; justify-content:center; background:var(--green); color:#fff; }
.primary-action:hover { background:var(--green-dark); }
.primary-action:disabled { opacity:.6; cursor:wait; }
.primary-action.compact { padding:9px 13px; font-size:13px; }
.excel-action { display:inline-flex; justify-content:center; background:#e7f4ec; color:#16633f; border:1px solid #bcdcca; }
.excel-action:hover { background:#d9ecdf; }
.excel-action.compact { padding:8px 13px; font-size:13px; }
.ghost-action { background:#eef3f0; color:#34473e; }
.auth-card .primary-action { width:100%; margin-top:8px; }
.form-error { min-height:20px; margin:10px 0 0; color:#a32e2e; font-size:13px; }
.auth-note { margin:20px 0 0; color:#86938d; text-align:center; font-size:11px; }
.dashboard-header { height:72px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
.header-brand { display:flex; align-items:center; gap:12px; }
.header-brand div { display:grid; gap:2px; }
.header-brand small { color:var(--muted); }
.dashboard-header nav { display:flex; align-items:center; gap:8px; }
.dashboard-main { max-width:1280px; margin:auto; padding:35px 28px 60px; }
.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.welcome-row h1 { margin:0; font-size:34px; }
.welcome-row>div>p:last-child { margin:7px 0 0; color:var(--muted); }
.user-chip { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:13px; }
.user-chip strong { color:var(--ink); }
.stats-grid { margin:25px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.stat-card { min-height:135px; padding:21px; display:grid; align-content:space-between; border:1px solid var(--line); border-radius:15px; background:#fff; }
.stat-card span { color:var(--muted); font-size:13px; }
.stat-card strong { color:var(--green); font-size:38px; line-height:1; }
.stat-card small { color:#89958f; }
.table-card { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 8px 25px rgb(26 52 40 / 5%); }
.table-toolbar { padding:20px 22px; display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.table-toolbar h2 { margin:0; font-size:20px; }
.table-toolbar p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.search-box { width:min(350px,40vw); margin:0; }
.search-box span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; }
.search-box input { padding:9px 11px; }
.table-scroll { overflow:auto; }
.records-table { width:100%; min-width:1000px; border-collapse:collapse; font-size:13px; }
.records-table th { padding:12px 14px; background:#f7f9f8; color:#607168; text-align:left; font-size:11px; letter-spacing:.03em; }
.records-table td { padding:14px; border-top:1px solid #edf1ef; vertical-align:middle; }
.records-table tr:hover td { background:#fbfdfc; }
.action-column { text-align:right!important; }
.code-tag { padding:4px 7px; border-radius:5px; background:#edf4f0; color:#285e45; font:11px ui-monospace,Consolas,monospace; }
.row-actions { display:flex; justify-content:flex-end; gap:7px; }
.row-actions a,.row-actions button { border:0; border-radius:6px; padding:5px 8px; background:#edf3f0; color:#275c43; cursor:pointer; font-size:11px; text-decoration:none; white-space:nowrap; }
.row-actions button { background:#faecec; color:#9a3333; }
.empty-state { height:180px; color:var(--muted); text-align:center; }
.empty-state.error { color:#a32e2e; }
.modal { width:min(460px,calc(100vw - 30px)); padding:0; border:0; border-radius:16px; box-shadow:0 30px 100px rgb(0 0 0 / 28%); }
.modal::backdrop { background:rgb(13 29 21 / 48%); backdrop-filter:blur(3px); }
.modal form { padding:25px; }
.modal-heading { display:flex; justify-content:space-between; gap:20px; }
.icon-button { width:32px; height:32px; border:0; border-radius:50%; background:#eef2f0; cursor:pointer; font-size:20px; }
.modal small { display:block; margin-top:5px; color:var(--muted); }
.modal-actions { margin-top:15px; display:flex; justify-content:flex-end; gap:8px; }
@media(max-width:800px){.auth-layout{grid-template-columns:1fr;gap:35px;padding:28px 18px}.auth-brand h1{font-size:32px}.auth-brand ul{display:none}.dashboard-header{height:auto;padding:14px;align-items:flex-start}.dashboard-header nav{flex-wrap:wrap;justify-content:flex-end}.header-brand div{display:none}.dashboard-main{padding:25px 14px}.welcome-row{align-items:flex-start}.stats-grid{grid-template-columns:1fr}.table-toolbar{align-items:stretch;flex-direction:column}.search-box{width:100%}}