:root {
    --fm-ink: #24342d;
    --fm-muted: #68766e;
    --fm-green: #315e4a;
    --fm-green-dark: #234936;
    --fm-canvas: #f4f6f3;
    --fm-line: #e2e8e2;
    --fm-soft: #edf3ee;
    --bs-body-color: var(--fm-ink);
    --bs-body-bg: var(--fm-canvas);
    --bs-link-color: var(--fm-green);
    --bs-link-hover-color: var(--fm-green-dark);
    --bs-primary: var(--fm-green);
    --bs-success: var(--fm-green);
    --bs-border-color: var(--fm-line);
}

body { color: var(--fm-ink); background: var(--fm-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { max-width: 1440px; padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }
.app-header { background: #fff; border-bottom: 1px solid var(--fm-line); }
.brand { color: var(--fm-ink); }
.brand-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; color: #fff; background: var(--fm-green); border-radius: .85rem; font-size: .82rem; font-weight: 800; letter-spacing: .03em; }
.brand-name { font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.brand-subtitle { margin-top: .25rem; color: var(--fm-muted); font-size: .75rem; }
.environment-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid var(--fm-line); border-radius: 999px; color: var(--fm-muted); background: #fff; font-size: .78rem; white-space: nowrap; }
.environment-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #d29c46; }
.app-frame { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.25rem); min-height: calc(100vh - 145px); }
.sidebar { padding-top: .4rem; }
.nav-heading { margin: 0 0 .65rem .75rem; color: #87928b; font-size: .68rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.app-nav { gap: .25rem; }
.app-nav-link { min-height: 2.8rem; display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; color: #55645b; border-radius: .7rem; font-size: .91rem; font-weight: 550; text-decoration: none; }
a.app-nav-link:hover { color: var(--fm-green-dark); background: #e8efe9; }
.app-nav-link.active { color: var(--fm-green-dark); background: #e2ede4; font-weight: 700; }
.app-nav-link.disabled { color: #8a948d; cursor: default; }
.nav-icon { width: 1.2rem; color: var(--fm-green); font-size: 1.05rem; line-height: 1; text-align: center; }
.disabled .nav-icon { color: #9eaaa1; }
.nav-soon { margin-left: auto; color: #919b94; font-size: .65rem; }
.sidebar-note { display: flex; gap: .65rem; padding: .9rem; border: 1px solid var(--fm-line); border-radius: .8rem; background: rgba(255,255,255,.55); }
.sidebar-note-icon { flex: 0 0 1.15rem; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 1px solid #91a99a; border-radius: 50%; color: var(--fm-green); font-size: .7rem; font-weight: 750; }
.sidebar-note p { margin: 0; color: var(--fm-muted); font-size: .75rem; line-height: 1.5; }
.main-content { min-width: 0; }
.app-footer { color: #87928b; border-top: 1px solid var(--fm-line); background: #fff; font-size: .75rem; }
.skip-link { position: fixed; z-index: 1100; top: .5rem; left: .5rem; transform: translateY(-160%); padding: .65rem 1rem; color: #fff; background: var(--fm-green-dark); border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); color: #fff; }
.page-eyebrow { color: var(--fm-green); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.page-title { margin: .35rem 0 .55rem; font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 750; letter-spacing: -.04em; }
.page-intro { max-width: 48rem; color: var(--fm-muted); line-height: 1.65; }
.surface-card { border: 1px solid var(--fm-line); border-radius: 1rem; background: #fff; box-shadow: 0 8px 24px rgba(39, 60, 45, .035); }
.status-badge { display: inline-flex; align-items: center; padding: .32rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.status-badge-neutral { color: #536158; background: #eef1ee; }
.status-badge-info { color: #2d5f68; background: #e6f2f3; }
.status-badge-warning { color: #795b23; background: #f8f0dd; }
.empty-state { padding: clamp(2rem, 6vw, 4.5rem) 1.5rem; border: 1px dashed #cbd6cc; border-radius: 1rem; background: rgba(255,255,255,.55); }
.empty-state-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--fm-green); background: var(--fm-soft); font-size: 1.4rem; }
.empty-state-icon-sm { width: 2.25rem; height: 2.25rem; border-radius: .7rem; font-size: 1rem; }
.empty-state-icon-md { width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.1rem; }
.form-label { color: #39483f; font-weight: 650; font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: #83a990; box-shadow: 0 0 0 .2rem rgba(49,94,74,.14); }
.btn-success { --bs-btn-bg: var(--fm-green); --bs-btn-border-color: var(--fm-green); --bs-btn-hover-bg: var(--fm-green-dark); --bs-btn-hover-border-color: var(--fm-green-dark); }

@media (max-width: 767.98px) {
    .app-frame { display: block; min-height: calc(100vh - 145px); }
    .sidebar { padding: 0 0 1.4rem; overflow-x: auto; }
    .nav-heading, .sidebar-note { display: none; }
    .app-nav { flex-direction: row !important; gap: .4rem; width: max-content; min-width: 100%; padding-bottom: .35rem; }
    .app-nav-link { min-height: 2.45rem; padding: .5rem .65rem; border: 1px solid var(--fm-line); background: #fff; white-space: nowrap; font-size: .79rem; }
    .app-nav-link.active { border-color: #bdd0c0; }
    .nav-icon { width: auto; }
    .nav-soon { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }