/** Workspace shell, sidebar navigation, headers, panels, and overview cards. */
.workspace { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.sidebar { border-right: 1px solid var(--line); background: #091421; padding: 23px 16px; display: flex; flex-direction: column; position: sticky; top: 76px; height: calc(100vh - 76px); }
.device-summary { display: flex; gap: 11px; align-items: center; padding: 9px 8px 22px; border-bottom: 1px solid var(--line); }
.device-summary strong, .device-summary span { display: block; }
.device-summary strong { font-size: 15px; }
.device-summary span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.device-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--mint-dark); color: var(--mint); }
.sidebar nav { padding: 18px 0; display: grid; gap: 4px; }
.sidebar nav button, .sidebar nav a { width: 100%; border: 0; border-radius: 9px; padding: 11px 12px; display: flex; align-items: center; gap: 11px; color: #92a7ba; background: transparent; font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.sidebar nav button span, .sidebar nav a span { width: 20px; color: #678099; text-align: center; font-size: 17px; }
.sidebar nav button:hover, .sidebar nav a:hover { background: #102035; color: var(--text); }
.sidebar nav button.active { color: var(--mint); background: rgb(102 247 194 / 9%); }
.sidebar nav button.active span { color: var(--mint); }
.sidebar-safety { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; border: 1px solid rgb(102 247 194 / 15%); background: rgb(102 247 194 / 5%); border-radius: 12px; padding: 12px; }
.sidebar-safety i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-top: 3px; }
.sidebar-safety strong, .sidebar-safety span { display: block; }
.sidebar-safety strong { font-size: 12px; }
.sidebar-safety span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.work-area { min-width: 0; padding: 32px clamp(20px, 4vw, 54px) 60px; background: linear-gradient(125deg, rgb(18 40 57 / 16%), transparent 36%); }
.work-header { position: sticky; z-index: 16; top: 88px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; padding: 13px 15px; border: 1px solid rgb(49 80 109 / 72%); border-radius: 14px; background: rgb(8 19 31 / 88%); box-shadow: 0 14px 34px rgb(0 0 0 / 24%); backdrop-filter: blur(16px); }
.work-header h1 { margin: 0; font-size: 29px; letter-spacing: -.025em; }
.work-header p:last-child { color: var(--muted); margin: 7px 0 0; font-size: 14px; }
.work-actions { display: flex; gap: 9px; }
.dirty-banner { display: flex; justify-content: space-between; gap: 15px; align-items: center; border: 1px solid rgb(255 198 109 / 30%); background: rgb(255 198 109 / 7%); color: var(--amber); padding: 10px 14px; border-radius: 10px; margin-bottom: 18px; font-size: 13px; }
.dirty-banner small { color: #c0a980; }
.page-content { max-width: 1380px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 25px 0 14px; }
.section-heading:first-child { margin-top: 0; }
.section-heading h2 { font-size: 18px; margin: 0; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: rgb(12 24 38 / 86%); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.panel-pad { padding: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat-card { padding: 18px; }
.stat-card .stat-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.stat-card .stat-icon { color: var(--mint); }
.stat-card strong { display: block; margin-top: 13px; font-size: 26px; }
.stat-card small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.overview-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 14px; }
.quick-list { display: grid; }
.quick-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.quick-row:last-child { border-bottom: 0; }
.quick-row > span:first-child { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--mint); background: var(--mint-dark); }
.quick-row strong, .quick-row small { display: block; }
.quick-row strong { font-size: 14px; }
.quick-row small { color: var(--muted); margin-top: 4px; font-size: 12px; }
.chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 99px; color: var(--muted); padding: 6px 9px; font-size: 11px; font-weight: 800; }
.safety-card { padding: 20px; background: linear-gradient(145deg, rgb(102 247 194 / 8%), rgb(12 24 38 / 80%)); }
.safety-card h2 { margin: 13px 0 8px; font-size: 19px; }
.safety-card p { color: var(--muted); line-height: 1.6; font-size: 13px; }
.safety-card ul { padding: 0; list-style: none; display: grid; gap: 10px; margin: 18px 0 0; }
.safety-card li { display: flex; gap: 8px; color: #bed0df; font-size: 12px; }
.safety-card li::before { content: "✓"; color: var(--mint); font-weight: 900; }