:root { --nav-w: 250px; --nav-bg: #1f2937; --nav-fg: #e5e7eb; }

body { background: #f5f6f8; }

.app-shell { display: flex; min-height: 100vh; }

.app-nav {
    width: var(--nav-w); min-width: var(--nav-w);
    background: var(--nav-bg); color: var(--nav-fg);
    display: flex; flex-direction: column; padding: 0 0 1rem;
}
.app-brand { font-size: 1.1rem; font-weight: 700; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; color: #9ca3af; padding: 1rem 1.25rem .25rem; }
.app-nav .nav-item { display: block; color: var(--nav-fg); text-decoration: none; padding: .5rem 1.25rem; font-size: .95rem; }
.app-nav .nav-item:hover { background: rgba(255,255,255,.06); }
.app-nav .nav-item.active { background: #2563eb; color: #fff; font-weight: 600; }
.app-nav .disabled-soft { opacity: .65; }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid #e5e7eb; }
.app-content { padding: 1.5rem; max-width: 1200px; }

.card { border: 1px solid #e5e7eb; border-radius: .6rem; background: #fff; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #111827; }
.login-card { width: 340px; background: #fff; border-radius: .75rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.login-card h1 { font-size: 1.4rem; margin-bottom: .25rem; }