.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar); padding: 24px 16px 18px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 8px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--purple); font-weight: 800; }
.brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.03em; color: var(--deep); }
.brand-name em { color: var(--orange); font-style: normal; }
.brand-product { display: block; color: var(--muted); font: 13px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.nav-group { margin-top: 30px; }
.nav-label { padding: 0 12px 8px; color: var(--subtle); font: 13px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.nav-list { display: grid; gap: 3px; }
.nav-item { min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border-radius: 9px; color: var(--muted); font-size: 16px; font-weight: 600; transition: .18s var(--ease); }
.nav-item:hover { color: var(--deep); background: var(--purple-faint); transform: translateX(2px); }
.nav-item.active { position: relative; color: var(--purple); background: var(--purple-soft); }
.nav-item.active::before { content: ''; position: absolute; left: -16px; width: 2.5px; height: 22px; background: var(--orange); }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--border); }
.user-card { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--purple-soft); color: var(--purple); font-size: 15px; font-weight: 800; }
.user-meta b { display: block; font-size: 15px; }
.user-meta span { color: var(--muted); font-size: 13px; }
.topbar { position: fixed; inset: 0 0 auto var(--sidebar); z-index: 40; height: var(--topbar); padding: 0 30px; display: flex; align-items: center; gap: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.mobile-menu { display: none; }
.top-context { min-width: 0; }
.top-context strong { display: block; color: var(--deep); font-size: 15px; }
.top-context span { display: block; color: var(--muted); font-size: 14px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.main { min-height: 100vh; margin-left: var(--sidebar); padding: calc(var(--topbar) + 30px) 32px 64px; }
.page { width: min(100%, 1500px); margin: 0 auto; }
.page-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; padding-bottom: 19px; border-bottom: 1px solid var(--border); }
.page-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 72px; border-bottom: 2.5px solid var(--orange); }
.eyebrow { margin-bottom: 7px; color: var(--purple); font: 600 13px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 7px; color: var(--deep); font-size: clamp(23px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.045em; }
.page-head p { max-width: 690px; margin-bottom: 0; color: var(--muted); font-size: 14px; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); }
.span-2 { grid-column: span 2; }
.section { margin-top: 26px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.section-title h2 { margin: 0; color: var(--deep); font-size: 15px; letter-spacing: -.025em; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 15px; }
.sc-rule { width: 100%; margin: 25px 0 0; border: 0; border-top: 2.5px solid var(--orange); opacity: .9; }

@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { :root { --sidebar: 0px; } .sidebar { width: 278px; transform: translateX(-102%); box-shadow: var(--shadow-md); transition: transform .25s var(--ease); } body.nav-open .sidebar { transform: translateX(0); } .topbar { left: 0; padding: 0 18px; } .mobile-menu { display: inline-grid; } .main { margin-left: 0; padding-inline: 20px; } .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 660px) { .main { padding: calc(var(--topbar) + 22px) 14px 44px; } .page-head { align-items: flex-start; flex-direction: column; gap: 14px; } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } .top-context span { display: none; } }

@media print { .sidebar, .topbar, .no-print { display: none !important; } .main { margin: 0; padding: 0; } body { background: #fff; color: #1a0e50; } .page { max-width: none; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } @page { size: A4 landscape; margin: 12mm; } }