:root {
  --ink: #172321;
  --muted: #60706c;
  --paper: #f6f5ef;
  --panel: #fffefa;
  --line: #d8ded9;
  --brand: #126957;
  --brand-dark: #0c4b3f;
  --danger: #a13939;
  --success: #216c46;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.5; }
.site-header { min-height: 64px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: #123d35; color: white; }
.brand { color: white; text-decoration: none; font-weight: 750; letter-spacing: .03em; }
.account { display: flex; align-items: center; gap: 1rem; }
.account form, .actions form { margin: 0; }
.container { width: min(1180px, 92vw); margin: 0 auto; padding: 3rem 0 5rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.04em; line-height: 1.05; margin-bottom: .7rem; }
h2 { font-size: 1.12rem; }
.eyebrow { color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem; }
.muted, small { color: var(--muted); }
small { display: block; font-size: .76rem; margin-top: .18rem; }
.auth-card { width: min(460px, 100%); margin: 7vh auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 50px rgba(23, 35, 33, .08); }
.stack { display: grid; gap: 1rem; margin-top: 1.7rem; }
label { display: grid; gap: .38rem; color: #344743; font-size: .88rem; font-weight: 700; }
input, select { width: 100%; min-height: 44px; border: 1px solid #bdc9c4; border-radius: 8px; padding: .65rem .75rem; background: white; color: var(--ink); font: inherit; }
/* Layui normally replaces select controls with JavaScript; this app keeps native forms. */
.layui-form select.layui-select { display: block; }
input:focus, select:focus { outline: 3px solid rgba(18, 105, 87, .18); border-color: var(--brand); }
button, .button-link, .layui-btn { display: inline-flex; min-height: 42px; height: auto; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: 8px; padding: .72rem 1rem; background: var(--brand); color: white; line-height: 1.2; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; text-align: center; }
button:hover, .button-link:hover { background: var(--brand-dark); }
.text-button { padding: .2rem; background: transparent; text-decoration: underline; }
.secondary { padding: .45rem .65rem; color: var(--brand); background: #e7f0ed; font-size: .8rem; }
.secondary.layui-btn-sm { min-height: 32px; padding: .4rem .65rem; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.page-heading > .muted { max-width: 530px; }
.panel, .layui-panel { padding: 1.35rem; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px rgba(23, 35, 33, .035); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.inline-form { display: flex; align-items: end; gap: .75rem; }
.grow { flex: 1; }
.alert { margin: 0 0 1.25rem; padding: .9rem 1rem; border-radius: 9px; }
.error { color: #742a2a; background: #f9e5e3; border: 1px solid #ecc5c1; }
.success { color: #18583a; background: #e2f1e8; border: 1px solid #badbc7; }
.secret-alert { background: #fff6ce; border: 1px solid #e5cd6f; }
.secret-alert code { display: block; overflow-wrap: anywhere; margin: .8rem 0; padding: .8rem; border-radius: 6px; background: #2b302e; color: #fff; user-select: all; }
.secret-alert p { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
table, .layui-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9rem; background: transparent; }
th { color: var(--muted); text-align: left; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
th, td { padding: .8rem .65rem; border-bottom: 1px solid #e4e8e4; vertical-align: middle; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.status { display: inline-block; padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 750; }
.status.active { color: var(--success); background: #e1f0e7; }
.status.inactive { color: var(--danger); background: #f6e4e2; }
.empty { padding: 1.5rem; text-align: center; color: var(--muted); }
.grant-form label { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.grant-chip { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #f2f5f2; font-size: .8rem; }
.grant-chip button { padding: .25rem .5rem; color: #7f3030; background: #f3dedd; font-size: .72rem; }
.document-grid { display: grid; gap: 1rem; }
.document-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.document-card h2, .document-card p { margin-bottom: .2rem; }
.document-card p { color: var(--muted); font-size: .85rem; }
.pdf-mark { display: grid; width: 52px; height: 62px; place-items: center; border-radius: 5px; background: #a6413e; color: white; font-size: .72rem; font-weight: 850; }
.empty-state { text-align: center; padding: 3rem; }
.ui-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; }
h1 .ui-icon { color: var(--brand); width: .78em; height: .78em; }
.preview-shell { width: min(1100px, 96vw); }
.preview-notice { margin-bottom: 1rem; color: var(--muted); }
.preview-pages { display: grid; gap: 1.5rem; }
.preview-page { display: block; width: 100%; height: auto; background: white; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(23, 35, 33, .12); user-select: none; -webkit-user-drag: none; pointer-events: none; }
@media (max-width: 760px) {
  .two-column { grid-template-columns: 1fr; }
  .page-heading, .inline-form { align-items: stretch; flex-direction: column; }
  .document-card { grid-template-columns: auto 1fr; }
  .document-card .button-link { grid-column: 1 / -1; }
  .container { padding-top: 2rem; }
}