/* STL CARGO Design Spec 1.4 — application frame. Layout only; no business rules. */
.design-reference{min-height:100vh;background:var(--canvas);color:var(--text);font-family:var(--font-ui);font-synthesis:none;font-size:14px;line-height:24px}
.design-reference .sidebar{--logo-ink:#FFFFFF;width:248px;inset-inline-start:0;inset-inline-end:auto;background:var(--sidebar);border-inline-start:1px solid var(--border);color:var(--sidebar-text);z-index:30;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.design-reference .sidebar::-webkit-scrollbar,.design-reference .sidebar nav::-webkit-scrollbar{display:none;width:0;height:0}
.design-reference .sidebar nav{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.design-reference .main-shell{margin-inline-start:248px;margin-inline-end:0;min-width:0;width:calc(100% - 248px)}
.design-reference .brand{display:flex;flex-direction:column;gap:8px;padding:20px 12px 16px;flex-shrink:0}
.design-reference .brand-mark{height:auto;width:184px;padding:12px;background:transparent;border-radius:8px;overflow:visible;box-shadow:none}
.design-reference .brand-mark img{display:block;width:160px;height:auto;max-width:100%;mix-blend-mode:normal;filter:none;object-fit:contain}
.brand-logo{display:block;color:var(--logo-ink);width:160px;height:auto;max-width:100%;flex-shrink:0}
.boot .brand-logo{width:180px;border-radius:20px}
.design-reference .brand-caption b{display:none}.design-reference .brand-caption small{font-family:var(--font-ui);font-size:12px;line-height:20px;color:var(--sidebar-muted);margin:0;text-align:center}
.collapsed-brand{display:none}.design-reference .nav-label{font-size:12px;line-height:20px;padding:0 24px 12px;color:var(--sidebar-muted)}
.design-reference .sidebar nav{padding:0 12px;display:grid;gap:4px}
.design-reference .sidebar nav a{min-height:44px;height:44px;padding:0 12px;gap:8px;border:0;border-radius:8px;color:var(--sidebar-text);background:none;box-shadow:none;position:relative}
.design-reference .sidebar nav a span{font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:24px}
.design-reference .sidebar nav a small{display:none!important}.design-reference .sidebar nav a svg{width:20px;height:20px;color:inherit;flex-shrink:0}
.design-reference .sidebar nav a:hover{background:var(--sidebar-hover)}.design-reference .sidebar nav a.active{background:var(--brand);color:var(--on-brand);font-weight:700;box-shadow:none}
.design-reference .sidebar nav a.active:before{content:"";position:absolute;inset-inline-start:4px;width:3px;height:20px;background:var(--on-brand);border-radius:2px}
.design-reference .sidebar-bottom{margin:24px 20px 16px;padding:16px 0 0;border-color:var(--border);gap:8px;font-size:12px;color:var(--sidebar-muted)}
.design-reference .sidebar-bottom strong,.design-reference .sidebar-bottom small{font-size:12px;line-height:20px;color:inherit;font-family:var(--font-ui)}
.design-reference .topbar{height:64px;min-height:64px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;gap:16px;box-shadow:none}
.design-reference .crumb{color:var(--text-muted);font-size:12px;line-height:20px;gap:8px}.design-reference .crumb b{color:var(--text);font-size:14px;font-weight:600}
.design-reference .topbar-actions{gap:12px;min-width:0}.design-reference .center-picker{padding:0 12px;height:44px;border:1px solid var(--control-border);border-radius:8px;background:var(--surface);color:var(--text);gap:8px}
.design-reference .center-picker select,.design-reference .account select{color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:24px;font-weight:400;max-width:180px;min-width:0}
.design-reference .account{gap:8px;min-width:0}.design-reference .account select{max-width:150px}.design-reference .avatar{width:40px;height:40px;background:var(--surface-subtle);color:var(--text);font-size:14px;font-weight:600;border:1px solid var(--border)}
.design-reference .test-pill{font-family:var(--font-ui);font-size:12px;line-height:20px;letter-spacing:0;padding:2px 8px;color:var(--link);background:var(--selected);border:1px solid var(--border);border-radius:6px}
.design-reference main{padding:24px;max-width:none;margin:0;min-width:0}.design-reference footer{padding:16px 24px;color:var(--text-muted);font:400 12px/20px var(--font-ui);border-color:var(--border);flex-wrap:wrap}
.design-reference .toast{font:400 14px/24px var(--font-ui);z-index:60}.sidebar-close,.sidebar-scrim{display:none}
@media(max-width:1023px){.design-reference .sidebar{width:248px;transform:translateX(100%);transition:transform 200ms;box-shadow:none;z-index:50}.design-reference .sidebar.open{transform:translateX(0)}.design-reference .main-shell{margin-inline-start:0;margin-inline-end:0;width:100%}.design-reference .menu-toggle{display:inline-flex!important;width:44px;height:44px}.design-reference .sidebar-close{display:inline-flex;position:absolute;inset-inline-start:8px;top:8px;background:var(--sidebar);color:var(--sidebar-text);z-index:1}.sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);border:0;padding:0;z-index:40}.design-reference main{padding:20px}.design-reference .topbar{padding-inline:20px}.design-reference .crumb>span,.design-reference .crumb>svg{display:none}}
@media(max-width:767px){.design-reference main{padding:16px}.design-reference .topbar{padding:0 16px;gap:8px}.design-reference .topbar-actions{gap:8px}.design-reference .test-pill,.design-reference .account .avatar{display:none}.design-reference .account select{max-width:86px;font-size:12px}.design-reference .center-picker{padding-inline:8px;max-width:150px}.design-reference .center-picker svg{display:none}.design-reference .center-picker select{max-width:125px;font-size:12px}.design-reference .crumb b{display:none}.design-reference footer{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.design-reference .sidebar{transition:none}}