:root {
    color-scheme: light;
    --page-bg: #edf3f1;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #ffffff;
    --surface-soft: #fbfcfc;
    --input-bg: #fbfcfd;
    --text: #18212b;
    --text-strong: #34424e;
    --text-body: #46535e;
    --text-muted: #64717d;
    --text-faint: #87939b;
    --border: #dce3e8;
    --border-strong: #cbd5dc;
    --divider: #e8edef;
    --divider-soft: #eef1f2;
    --accent: #26715f;
    --accent-soft: #e7f2ee;
    --accent-hover: #f1f7f5;
    --shadow: rgba(24, 33, 43, 0.09);
    --error-bg: #fff8f7;
    --error-text: #b34747;
    --error-border: #efd0d0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--page-bg);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #111918;
    --surface: rgba(26, 37, 35, 0.92);
    --surface-strong: #1a2523;
    --surface-soft: #202e2b;
    --input-bg: #16211f;
    --text: #e7efec;
    --text-strong: #d2dfda;
    --text-body: #bacac4;
    --text-muted: #9aada6;
    --text-faint: #82958e;
    --border: #344541;
    --border-strong: #465b55;
    --divider: #30413d;
    --divider-soft: #293a36;
    --accent: #6bc1a7;
    --accent-soft: #1d3d35;
    --accent-hover: #234b40;
    --shadow: rgba(0, 0, 0, 0.28);
    --error-bg: #3a2424;
    --error-text: #f09a96;
    --error-border: #704340;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--page-bg); }
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--page-bg); }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(54px); opacity: 0.58; will-change: transform; }
.ambient-orb-1 { top: -18%; left: -8%; width: min(46vw, 660px); aspect-ratio: 1; background: linear-gradient(135deg, rgba(244, 108, 99, 0.44), rgba(255, 196, 116, 0.18)); animation: ambient-float-1 17s ease-in-out infinite alternate; }
.ambient-orb-2 { right: -12%; bottom: -22%; width: min(54vw, 760px); aspect-ratio: 1; background: linear-gradient(225deg, rgba(42, 167, 147, 0.48), rgba(76, 151, 220, 0.18)); animation: ambient-float-2 21s ease-in-out infinite alternate; }
.ambient-orb-3 { top: 48%; left: 33%; width: min(32vw, 450px); aspect-ratio: 1; background: linear-gradient(120deg, rgba(111, 186, 177, 0.26), rgba(244, 180, 85, 0.19)); animation: ambient-float-3 19s ease-in-out infinite alternate; }
.ambient-glow { position: absolute; top: 50%; left: 50%; width: min(56vw, 800px); height: min(56vh, 520px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 70%); filter: blur(30px); opacity: 0.7; transform: translate(-50%, -50%); transition: transform 1.2s ease-out; }
.ambient-grid { position: absolute; inset: 0; opacity: 0.28; background-image: linear-gradient(to right, rgba(36, 80, 72, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(36, 80, 72, 0.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.ambient-noise { position: absolute; inset: 0; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.ambient-cursor-particles { position: absolute; inset: 0; overflow: hidden; }
.ambient-cursor-particle { position: absolute; width: var(--cursor-size); height: var(--cursor-size); border-radius: 1px; background: var(--cursor-color); box-shadow: 0 0 8px var(--cursor-color); opacity: 0; transform: translate(-50%, -50%) scale(0.2); animation: ambient-cursor-burst 680ms cubic-bezier(0.18, 0.74, 0.36, 1) forwards; }
.ambient-cursor-particle-star { clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
.ambient-cursor-particle-pixel { border-radius: 0; box-shadow: 0 0 5px var(--cursor-color); }
.layout { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex: 0 0 250px; flex-direction: column; height: 100vh; padding: 28px 18px; border-right: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(18px); }
.brand { display: inline-block; margin: 0 8px 40px; color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 14px; }
.sidebar-nav-group { display: grid; gap: 4px; }
.sidebar-nav-links { display: grid; gap: 4px; }
.sidebar-nav-label { margin: 0; color: var(--text-muted); cursor: default; }
.sidebar-nav-group-tools > .sidebar-nav-label:hover { color: var(--text-muted); background: transparent; }
.sidebar-nav-group-tools .sidebar-nav-links { margin-left: 0; padding-left: 0; }
.sidebar-nav-group-tools .sidebar-nav-links .nav-link { position: relative; justify-content: center; width: 100%; padding: 5px 11px; border: 1px solid var(--border); }
.sidebar-nav-group-tools .sidebar-nav-links .nav-link:hover { border-color: var(--accent); }
.sidebar-nav-group-tools .sidebar-nav-links .nav-mark { position: absolute; left: 11px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 5px; color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-link:hover { color: var(--accent); background: var(--accent-hover); }
.nav-link-active { color: var(--accent); background: var(--accent-soft); }
.nav-mark { width: 12px; color: var(--accent); font-size: 10px; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 18px 8px 0; }
.content-shell { min-width: 0; flex: 1; padding: 42px min(5vw, 64px); }
button { font: inherit; cursor: pointer; }
.logout, .refresh, .theme-toggle { padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-strong); background: var(--surface-strong); }
.logout:hover, .refresh:hover, .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 9px; text-align: left; }
.login-theme-toggle { width: auto; margin: 0; }
.theme-switch-track { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; width: 34px; height: 20px; padding: 2px; border-radius: 10px; background: var(--border-strong); transition: background 160ms ease; }
.theme-switch-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-strong); box-shadow: 0 1px 3px var(--shadow); transform: translateX(0); transition: transform 160ms ease; }
.theme-toggle-dark .theme-switch-track { background: var(--accent); }
.theme-toggle-dark .theme-switch-thumb { transform: translateX(14px); }
.intro, .page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
h1 { margin: 0 0 12px; color: var(--text); font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.eyebrow { margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.checked-at { margin-top: 5px; font-size: 13px; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.status-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 18px 45px var(--shadow); backdrop-filter: blur(12px); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 22px 22px 18px; border-bottom: 1px solid var(--divider); }
h2 { margin: 0; color: var(--text); font-size: 18px; line-height: 1.3; }
.panel-subtitle { margin-top: 4px; font-size: 13px; }
.state { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.state::before { width: 8px; height: 8px; border-radius: 50%; background: #87939b; content: ""; }
.state-ok { color: var(--accent); }
.state-ok::before { background: #2d9a75; }
.state-updates { color: #a36319; }
.state-updates::before { background: #d89436; }
.state-error { color: #b34747; }
.state-error::before { background: #c95b5b; }
.action-result-success { color: var(--accent); }
.action-result-error { color: var(--error-text); }
.package-list { margin: 0; padding: 0; list-style: none; }
.package-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px; border-bottom: 1px solid var(--divider-soft); }
.package-item:last-child { border-bottom: 0; }
.package-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); font-size: 14px; font-weight: 600; }
.versions { flex: 0 0 auto; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-align: right; }
.empty, .error { padding: 20px 22px; font-size: 14px; }
.empty { color: var(--text-muted); }
.error { color: var(--error-text); background: var(--error-bg); }
.current-toggle { display: block; width: 100%; padding: 13px 22px; border: 0; border-top: 1px solid var(--divider); color: var(--accent); background: var(--surface-soft); font-size: 13px; font-weight: 600; text-align: left; }
.current-toggle:hover { background: var(--accent-hover); }
.current-toggle:disabled { color: #87939b; cursor: wait; }
.current-packages { max-height: 430px; overflow: auto; border-top: 1px solid var(--divider); }
.current-package-list .package-item { padding-top: 11px; padding-bottom: 11px; }
.page-description { display: inline; }
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.info-card { min-width: 0; padding: 14px; border: 1px solid rgba(220, 227, 232, 0.9); border-radius: 6px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); }
.info-label { color: #64717d; font-size: 12px; }
.info-value { margin-top: 5px; overflow-wrap: anywhere; color: #18212b; font-size: 18px; font-weight: 700; line-height: 1.2; }
.content-section { margin-bottom: 30px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 4px; }
.range-toggle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 30px var(--shadow); backdrop-filter: blur(12px); }
.range-toggle-option { padding: 7px 14px; border-radius: 6px; color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 140ms ease, color 140ms ease; }
.range-toggle-option:hover { color: var(--accent); background: var(--accent-hover); }
.range-toggle-option-active, .range-toggle-option-active:hover { color: var(--surface-strong); background: var(--accent); }
.mount-table-wrap { overflow-x: auto; border: 1px solid rgba(220, 227, 232, 0.9); border-radius: 6px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
.mount-table { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; }
.mount-table th { padding: 10px 14px; border-bottom: 1px solid #dce3e8; color: #64717d; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mount-table td { padding: 11px 14px; border-bottom: 1px solid #eef1f2; color: #46535e; font-size: 13px; white-space: nowrap; }
.mount-table tr:last-child td { border-bottom: 0; }
.mountpoint { overflow-wrap: anywhere; color: #18212b; font-weight: 700; }
.filesystem { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.usage-cell { display: grid; grid-template-columns: minmax(90px, 1fr) 36px; align-items: center; gap: 8px; min-width: 145px; }
.usage { flex: 0 0 auto; font-size: 13px; text-align: right; }
.usage-normal { color: #26715f; }
.usage-medium { color: #a36319; }
.usage-high { color: #b34747; }
.usage-bar { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 0; background: #e7eceb; color: #2d9a75; appearance: none; }
.usage-bar::-webkit-progress-bar { background: #e7eceb; }
.usage-bar::-webkit-progress-value { background: #2d9a75; }
.usage-bar::-moz-progress-bar { background: #2d9a75; }
.usage-bar-medium { color: #d89436; }
.usage-bar-medium::-webkit-progress-value { background: #d89436; }
.usage-bar-medium::-moz-progress-bar { background: #d89436; }
.usage-bar-high { color: #c95b5b; }
.usage-bar-high::-webkit-progress-value { background: #c95b5b; }
.usage-bar-high::-moz-progress-bar { background: #c95b5b; }
.device-tree-list { overflow: hidden; border: 1px solid rgba(220, 227, 232, 0.9); border-radius: 6px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
.device-node { border-bottom: 1px solid #e8edef; }
.device-node:last-child { border-bottom: 0; }
.device-node-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; cursor: pointer; list-style: none; }
.device-node-summary::-webkit-details-marker { display: none; }
.device-node-summary::before { flex: 0 0 auto; width: 12px; color: #64717d; content: "+"; font-weight: 700; text-align: center; }
.device-node[open] > .device-node-summary::before { content: "-"; }
.device-node-main { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.device-name { overflow-wrap: anywhere; color: #18212b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; }
.device-type { color: #64717d; font-size: 12px; overflow-wrap: anywhere; }
.device-node-meta { display: flex; align-items: center; justify-content: end; gap: 7px; flex: 0 0 auto; color: #34424e; font-size: 13px; }
.device-badge { padding: 2px 5px; border: 1px solid #dce3e8; border-radius: 3px; color: #64717d; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.device-node-details { padding: 0 14px 12px 40px; }
.device-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px 16px; margin: 0; padding: 9px 0 0; border-top: 1px solid #eef1f2; }
.device-facts div { min-width: 0; }
.device-facts dt { color: #87939b; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.device-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; color: #46535e; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.device-children { margin-top: 10px; border: 1px solid #e2e8eb; border-radius: 4px; }
.device-children .device-node-summary { padding-top: 9px; padding-bottom: 9px; background: #fbfcfc; }
.device-children .device-node-details { padding-left: 40px; }
.ssh-summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ssh-attribution { margin-top: 7px; color: #87939b; font-size: 11px; }
.ssh-attribution a { color: inherit; text-decoration: underline; }
.info-value-alert { color: #b34747; }
.info-value-good { color: #26715f; }
.ssh-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr); gap: 18px; align-items: start; }
.ssh-content-grid .content-section { min-width: 0; }
.ssh-empty { border: 1px solid rgba(220, 227, 232, 0.9); border-radius: 6px; background: rgba(255, 255, 255, 0.9); }
.ssh-table { min-width: 700px; }
.ssh-location { display: block; margin-top: 3px; color: #87939b; font-size: 11px; }
.ssh-user { color: #34424e; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }
.ssh-user-invalid { color: #a36319; }
.ssh-result { display: inline-block; padding: 2px 5px; border: 1px solid #dce3e8; border-radius: 3px; color: #64717d; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ssh-result-failed, .ssh-result-invalid_user { border-color: #efd0d0; color: #b34747; background: #fff8f7; }
.ssh-result-accepted { border-color: #c8e6da; color: #26715f; background: #f1f8f5; }
.ssh-result-closed { border-color: #eadbbf; color: #a36319; background: #fffaf1; }
.ssh-breakdown { display: grid; gap: 18px; }
.ssh-ranking { overflow: hidden; }
.ssh-rank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #eef1f2; color: #46535e; font-size: 13px; }
.ssh-rank-row:last-child { border-bottom: 0; }
.ssh-rank-row span { min-width: 0; overflow-wrap: anywhere; }
.ssh-rank-row strong { flex: 0 0 auto; color: #18212b; font-size: 13px; }
.docker-summary-grid { grid-template-columns: repeat(2, minmax(0, 180px)); }
.docker-list { display: grid; gap: 18px; }
.docker-card { overflow: hidden; }
.docker-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 20px; margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--divider); }
.docker-facts div { min-width: 0; }
.docker-facts dt { color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.docker-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text-body); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.docker-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px; }
.docker-action { padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-strong); background: var(--surface-strong); font-size: 12px; font-weight: 600; }
.docker-action:hover { border-color: var(--accent); color: var(--accent); }
.docker-action:disabled { cursor: wait; opacity: .55; }
.docker-action-danger { color: #b34747; }
.docker-action-result { min-height: 0; padding: 0 22px 16px; font-size: 13px; }
.docker-action-result:empty { display: none; }
.docker-action-result-update { color: #a36319; }
.docker-last-action { margin: 0; padding: 0 22px 16px; font-size: 13px; }
.docker-last-action-success { color: var(--accent); }
.docker-last-action-error { color: var(--error-text); }
.docker-last-action-pending, .docker-last-action-running { color: #a36319; }
.docker-empty { border: 1px solid rgba(220, 227, 232, .9); border-radius: 6px; background: rgba(255, 255, 255, .9); }
.creoline-summary-grid { grid-template-columns: repeat(3, minmax(0, 220px)); }
.creoline-update { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-strong); background: var(--surface-strong); font-size: 13px; font-weight: 600; }
.creoline-update:hover { border-color: var(--accent); color: var(--accent); }
.creoline-update:disabled { cursor: not-allowed; opacity: .55; }
.creoline-action-result { min-height: 20px; margin-top: 10px; font-size: 13px; }
.creoline-empty { border: 1px solid rgba(220, 227, 232, .9); border-radius: 6px; background: rgba(255, 255, 255, .9); }
.project-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.project-lead { max-width: 720px; color: var(--text-body); font-size: 17px; }
.project-repository { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.project-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2d9a75; box-shadow: 0 0 0 4px rgba(45, 154, 117, .12); }
.project-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; flex: 0 0 auto; }
.project-action { padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-strong); background: var(--surface-strong); font-size: 13px; font-weight: 600; text-decoration: none; }
.project-action:hover { border-color: var(--accent); color: var(--accent); }
.project-action-primary { border-color: var(--accent); color: var(--surface-strong); background: var(--accent); }
.project-action-primary:hover { color: var(--surface-strong); background: var(--text-strong); }
.project-metrics { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; margin-bottom: 34px; }
.project-metric { min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); backdrop-filter: blur(12px); }
.project-metric-value { display: flex; align-items: center; gap: 9px; margin-top: 8px; color: var(--text); font-size: 21px; font-weight: 700; }
.project-metric-status { color: var(--accent); font-size: 16px; }
.project-metric-note { margin-top: 5px; font-size: 12px; }
.project-content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 28px; align-items: start; }
.project-side-column { display: grid; gap: 28px; }
.project-library-list { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 14px 32px var(--shadow); }
.project-library { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.project-library:last-child { border-bottom: 0; }
.project-library-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; }
.project-library h3, .project-workflow h3 { margin: 0; color: var(--text); font-size: 14px; }
.project-library p { margin-top: 3px; font-size: 12px; }
.project-library .state { font-size: 11px; }
.project-callout { padding: 20px; border-left: 3px solid var(--accent); background: var(--surface); }
.project-callout h2 { max-width: 270px; margin-bottom: 10px; font-size: 20px; }
.project-callout > p:not(.eyebrow) { font-size: 13px; }
.project-runner-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); color: var(--text-muted); font-size: 12px; }
.project-runner-line strong { color: var(--text-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.project-code-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--input-bg); }
.project-code-block code, .project-workflow code { overflow-wrap: anywhere; color: var(--text-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.project-copy { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-muted); background: var(--surface-strong); font-size: 11px; }
.project-copy:hover { color: var(--accent); border-color: var(--accent); }
.project-warning { margin-top: 12px; padding-left: 12px; border-left: 2px solid #d89436; color: var(--text-muted); font-size: 12px; }
.project-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.project-workflow { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.project-step { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; }
.project-workflow code { display: block; margin: 15px 0 11px; padding: 8px; border: 1px solid var(--divider); color: var(--accent); background: var(--input-bg); }
.project-workflow > p:last-child { font-size: 12px; }
.review-flash { margin: -12px 0 24px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
.review-flash-ok { color: var(--accent); background: var(--accent-soft); }
.review-flash-error { color: var(--error-text); border-color: var(--error-border); background: var(--error-bg); }
.review-section { min-width: 0; }
.review-actions { display: flex; align-items: center; justify-content: end; gap: 12px; flex: 0 0 auto; }
.review-actions form { margin: 0; }
.review-checked { color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.review-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.review-summary div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.review-summary strong { color: var(--text); font-size: 19px; }
.review-summary span { color: var(--text-muted); font-size: 11px; text-align: right; }
.review-summary-warning strong { color: #a36319; }
.review-summary-good strong { color: var(--accent); }
.review-summary-problem strong { color: var(--error-text); }
.review-item { margin-bottom: 10px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 5px; background: var(--surface); }
.review-item-review_required { border-left-color: #d89436; }
.review-item-ambiguous, .review-item-missing, .review-item-parse_error, .review-item-error { border-left-color: #c95b5b; }
.review-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.review-item-heading h3 { margin: 8px 0 0; overflow-wrap: anywhere; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; }
.review-item-heading > code { max-width: 40%; overflow-wrap: anywhere; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.review-facts { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(220px, 1.4fr); gap: 12px 18px; margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--divider); }
.review-facts div { min-width: 0; }
.review-facts dt { color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.review-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text-body); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; }
.review-commits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.review-commit { min-width: 0; padding: 11px 12px; border: 1px solid var(--divider); background: var(--input-bg); }
.review-commit > span { display: block; margin-bottom: 7px; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.review-commit code { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.review-commit strong { display: block; overflow: hidden; margin-top: 4px; color: var(--text-strong); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.review-commit small { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--text-muted); font-size: 11px; }
.review-message { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); background: var(--surface); font-size: 13px; }
.review-message strong { color: var(--text-strong); }
.review-message-error { border-color: var(--error-border); color: var(--error-text); background: var(--error-bg); }
.review-message-error strong { color: var(--error-text); }
.implementation-summary { margin-bottom: 16px; }
.implementation-list { display: grid; gap: 10px; }
.implementation-item { overflow: hidden; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 5px; background: var(--surface); }
.implementation-item:has(.state-updates) { border-left-color: #d89436; }
.implementation-item:has(.state-error) { border-left-color: #c95b5b; }
.implementation-item:has(.state-error) .state { color: #b34747; }
.implementation-heading { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.implementation-heading::-webkit-details-marker { display: none; }
.implementation-chevron { width: 12px; color: var(--text-muted); font-weight: 700; }
.implementation-item[open] .implementation-chevron { color: var(--accent); }
.implementation-item[open] .implementation-chevron { font-size: 0; }
.implementation-item[open] .implementation-chevron::after { content: "-"; font-size: 14px; }
.implementation-title { display: grid; gap: 4px; min-width: 0; }
.implementation-title strong { overflow-wrap: anywhere; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.implementation-title code { overflow-wrap: anywhere; color: var(--text-muted); font-size: 11px; }
.implementation-details { padding: 0 16px 16px 43px; }
.implementation-facts-table { display: grid; gap: 8px; margin-bottom: 14px; }
.implementation-facts-row { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 1fr); gap: 4px 16px; padding: 8px 12px; border: 1px solid var(--divider); border-radius: 5px; overflow-wrap: anywhere; color: var(--text-body); font-size: 12px; line-height: 1.5; background: var(--input-bg); }
.implementation-facts-row-solo { grid-template-columns: 1fr; }
.implementation-fact-group { display: grid; gap: 8px; min-width: 0; }
.implementation-fact { display: grid; gap: 2px; min-width: 0; }
.implementation-fact-label { color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.commit-link { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: none; }
.commit-link:hover { text-decoration: underline; }
.implementation-files { border: 1px solid var(--divider); background: var(--input-bg); }
.implementation-files + .implementation-files { margin-top: 10px; }
.implementation-files-heading, .implementation-file { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr); gap: 18px; }
.implementation-files-heading { padding: 9px 12px; border-bottom: 1px solid var(--divider); color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.implementation-file { align-items: start; padding: 4px 12px; border-bottom: 1px solid var(--divider); }
.implementation-file:last-child { border-bottom: 0; }
.implementation-file code { overflow-wrap: anywhere; color: var(--accent); font-size: 12px; }
.implementation-file small { display: block; margin-top: 3px; overflow-wrap: anywhere; color: var(--text-muted); font-size: 11px; }
.implementation-file-commit strong { display: block; overflow-wrap: anywhere; color: var(--text-strong); font-size: 12px; font-weight: 600; }
.implementation-empty { padding: 12px; color: var(--text-muted); font-size: 12px; }
@media (max-width: 1120px) { .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .project-content-grid { grid-template-columns: 1fr; } .project-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-facts div:last-child { grid-column: span 2; } }
@media (max-width: 1120px) { .ssh-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ssh-content-grid { grid-template-columns: 1fr; } .ssh-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ambient-orb, .ambient-glow, .ambient-grid, .ambient-noise, .ambient-cursor-particles { display: none; } }
@media (max-width: 720px) { .sidebar, .status-panel, .info-card, .mount-table-wrap, .device-tree-list, .range-toggle, .project-metric { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 720px) { .layout { display: block; } .sidebar { position: static; flex-direction: row; align-items: center; height: auto; min-height: 0; padding: 16px 18px; border-right: 0; border-bottom: 1px solid #dce3e8; } .brand { margin: 0 24px 0 0; } .sidebar-nav { display: flex; gap: 12px; } .sidebar-nav-group { display: flex; gap: 4px; } .sidebar-nav-label { display: flex; } .sidebar-footer { margin: 0 0 0 auto; padding: 0; } .content-shell { padding: 32px 24px; } .status-grid { grid-template-columns: 1fr; } .project-hero { display: block; } .project-actions { justify-content: start; margin-top: 20px; } .project-metrics { grid-template-columns: 1fr 1fr; } .project-metric-wide { grid-column: span 2; } .project-workflow-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sidebar { flex-wrap: wrap; } .sidebar-nav { order: 3; width: 100%; margin-top: 12px; } .sidebar-footer { margin-left: auto; } .nav-link { padding: 8px 10px; } .content-shell { padding: 28px 18px; } .intro, .page-header { display: block; } .refresh { margin-top: 18px; } .panel-heading { display: block; } .state { margin-top: 12px; } .package-item { align-items: start; display: block; } .versions { display: block; margin-top: 5px; text-align: left; } .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssh-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssh-breakdown { grid-template-columns: 1fr; } .device-node-summary { align-items: start; } .device-node-main { display: block; } .device-type { display: block; margin-top: 2px; } .device-node-meta { display: block; text-align: right; } .device-badge { display: inline-block; margin-top: 4px; } .device-node-details { padding-left: 26px; } .device-children .device-node-details { padding-left: 26px; } .project-side-column { grid-template-columns: 1fr; } .project-metrics { grid-template-columns: 1fr; } .project-metric-wide { grid-column: auto; } .project-library { grid-template-columns: 34px minmax(0, 1fr); } .project-library .state { grid-column: 2; margin-top: -5px; } .project-code-block { align-items: start; flex-direction: column; } }
@media (max-width: 560px) { .review-actions { align-items: start; justify-content: start; flex-direction: column; margin-top: 12px; } .review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-item-heading { display: block; } .review-item-heading > code { display: block; max-width: none; margin-top: 12px; } .review-facts { display: block; } .review-facts div { margin-top: 10px; } .review-facts div:last-child { grid-column: auto; } .review-commits { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .implementation-heading { align-items: start; flex-wrap: wrap; } .implementation-heading .state { margin-top: 0; } .implementation-title { flex: 1 1 calc(100% - 30px); } .implementation-details { padding-left: 16px; } .implementation-facts-row { grid-template-columns: 1fr; } .implementation-files-heading, .implementation-file { display: block; } .implementation-file-commit { display: block; margin-top: 10px; } .implementation-files-heading span:last-child { display: none; } }

body.ambient-lite .ambient-orb { animation: none; opacity: 0.32; }
body.ambient-lite .ambient-glow { transition: none; }
.content-shell-public { max-width: 1180px; margin: 0 auto; }
.lang-switch { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 18px; }
.lang-switch a { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lang-switch a:hover { color: var(--text); border-color: var(--accent); }
.lang-switch a.lang-switch-active { color: var(--accent); border-color: var(--accent); }

@keyframes ambient-float-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(10%, 8%, 0) scale(1.1); }
}

@keyframes ambient-float-2 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-9%, -7%, 0) scale(1.13); }
}

@keyframes ambient-float-3 {
    from { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.45; }
    to { transform: translate3d(-7%, 10%, 0) scale(1.08); opacity: 0.8; }
}

@keyframes ambient-cursor-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    15% { opacity: 0.92; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--cursor-x)), calc(-50% + var(--cursor-y))) scale(1) rotate(var(--cursor-turn)); }
}

:root[data-theme="dark"] .ambient-glow { background: radial-gradient(circle, rgba(107, 193, 167, 0.12), rgba(107, 193, 167, 0) 70%); }
:root[data-theme="dark"] .ambient-noise { mix-blend-mode: screen; opacity: 0.04; }
:root[data-theme="dark"] .state::before { background: var(--text-faint); }
:root[data-theme="dark"] .state-ok::before { background: #55b994; }
:root[data-theme="dark"] .state-updates { color: #e5ad67; }
:root[data-theme="dark"] .state-updates::before { background: #d89436; }
:root[data-theme="dark"] .state-error { color: #f09a96; }
:root[data-theme="dark"] .state-error::before { background: #d86e68; }
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .mount-table-wrap,
:root[data-theme="dark"] .device-tree-list,
:root[data-theme="dark"] .ssh-empty { border-color: var(--border); background: var(--surface); }
:root[data-theme="dark"] .info-label,
:root[data-theme="dark"] .mount-table th,
:root[data-theme="dark"] .device-type,
:root[data-theme="dark"] .device-node-summary::before,
:root[data-theme="dark"] .device-badge,
:root[data-theme="dark"] .ssh-attribution,
:root[data-theme="dark"] .ssh-location { color: var(--text-muted); }
:root[data-theme="dark"] .info-value,
:root[data-theme="dark"] .mountpoint,
:root[data-theme="dark"] .docker-facts dd,
:root[data-theme="dark"] .device-name,
:root[data-theme="dark"] .ssh-rank-row strong { color: var(--text); }
:root[data-theme="dark"] .mount-table th { border-color: var(--border); }
:root[data-theme="dark"] .mount-table td,
:root[data-theme="dark"] .docker-facts { border-color: var(--divider-soft); color: var(--text-body); }
:root[data-theme="dark"] .device-node,
:root[data-theme="dark"] .device-facts,
:root[data-theme="dark"] .ssh-rank-row { border-color: var(--divider-soft); color: var(--text-body); }
:root[data-theme="dark"] .device-node-meta,
:root[data-theme="dark"] .ssh-user { color: var(--text-strong); }
:root[data-theme="dark"] .device-badge,
:root[data-theme="dark"] .ssh-result { border-color: var(--border); }
:root[data-theme="dark"] .device-children { border-color: var(--border); }
:root[data-theme="dark"] .device-children .device-node-summary { background: var(--surface-soft); }
:root[data-theme="dark"] .usage-bar,
:root[data-theme="dark"] .usage-bar::-webkit-progress-bar { background: #30423d; }
:root[data-theme="dark"] .usage-normal,
:root[data-theme="dark"] .info-value-good { color: var(--accent); }
:root[data-theme="dark"] .usage-medium,
:root[data-theme="dark"] .ssh-user-invalid,
:root[data-theme="dark"] .info-value-alert { color: #e5ad67; }
:root[data-theme="dark"] .usage-high { color: #f09a96; }
:root[data-theme="dark"] .usage-bar-high::-webkit-progress-value,
:root[data-theme="dark"] .usage-bar-high::-moz-progress-bar { background: #d86e68; }
:root[data-theme="dark"] .ssh-result-failed,
:root[data-theme="dark"] .ssh-result-invalid_user { border-color: var(--error-border); color: var(--error-text); background: var(--error-bg); }
:root[data-theme="dark"] .ssh-result-accepted { border-color: #39725f; color: var(--accent); background: var(--accent-soft); }
:root[data-theme="dark"] .ssh-result-closed { border-color: #725a36; color: #e5ad67; background: #382d1e; }