/* Graphite design: design/saas-panel/src/supabase-demo, adapted from Duply (CC BY 4.0).
   Real local/cloud pages only. Native agent and tray styling is intentionally unchanged. */
:root,.cloud-shell{--bg:#121212;--sidebar:#171717;--surface:#191919;--raised:#222;--line:#303030;--text:#ededed;--muted:#a3a3a3;--quiet:#929292;--accent:#45d6e7;--accent-dark:#092326;--selected:#1b2d30;--good:#3ecf8e;--warning:#e7be70;--danger:#ff959c;--chart-secondary:#aab5ba;font-size:13px;font-weight:450}
body{background:var(--bg)}h1,.cloud-page-heading h1{font-size:26px;font-weight:650;letter-spacing:-.7px;line-height:1.3}h2{font-size:17px;font-weight:600}h3{font-size:14px}
.panel-topbar{position:fixed;inset:0 0 auto 224px;height:52px;z-index:21;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.panel-breadcrumb{display:flex;align-items:center;gap:14px;min-width:0;font-size:12px}.panel-breadcrumb a,.panel-breadcrumb>span:first-of-type{color:var(--muted)}.panel-breadcrumb>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-breadcrumb a:hover{color:var(--accent)}.panel-menu{display:none!important}
.cloud-shell .sidebar{inset:0 auto 0 0;width:224px;padding:0 10px 16px;background:var(--sidebar);border-right:1px solid var(--line);box-shadow:none;z-index:22}
.cloud-shell .brand{height:76px;padding:0 12px;gap:12px;margin:0;flex:none}.cloud-shell .brand img{width:36px;height:29px;mix-blend-mode:lighten}.cloud-shell .brand span{font-size:21px;letter-spacing:-.6px;font-weight:650}
.sidebar-club{margin:2px 8px 24px;font-size:12px}.sidebar-club>span{display:block;color:var(--muted);margin-bottom:8px}.sidebar-club>a{display:block;padding:11px 12px;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-club>a:hover{border-color:#4b4b4b}
.cloud-shell .nav-link{min-height:43px;padding:10px 14px;margin:4px 0;gap:13px;font-size:13px;border-radius:6px;color:#bababa}.cloud-shell .nav-link .icon{width:19px;height:19px}.cloud-shell .nav-link:hover{background:#222;color:var(--text)}.cloud-shell .nav-link.active{background:var(--selected);color:var(--accent);box-shadow:inset 2px 0 var(--accent)}
.sidebar-bottom{padding:20px 6px 0}.sidebar-account{padding:18px 7px 9px;margin-top:0;font-size:12px}.site-link{padding:5px 7px;font-size:11px}
.cloud-shell .workspace{margin-left:224px;padding:80px 28px 44px;max-width:none;min-width:0}.cloud-shell .page-heading{min-height:36px;margin-bottom:22px;align-items:center;gap:16px}.heading-title{min-width:0}.cloud-page-heading .heading-title>.icon{display:none}.page-heading p{font-size:12px}.cloud-club{margin-bottom:24px}
.button,.cloud-shell .button{border-radius:6px;min-height:36px;padding:8px 13px;font-size:12px;font-weight:550;box-shadow:none;background:#222;border-color:var(--line)}.button:hover{background:#2b2b2b;border-color:#4a4a4a}.button.secondary{background:#1c1c1c}.button.primary,.cloud-shell .button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-dark);font-size:12px;padding-inline:16px}.button.primary:hover{background:#77e3ef;border-color:#77e3ef}.button.compact,.cloud-shell .button.compact{min-height:30px;padding:5px 10px;font-size:11px}.button.danger{background:transparent;color:var(--danger)}.text-link{font-size:12px}.actions{gap:8px}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--line);border-radius:6px;background:var(--sidebar);min-height:38px;font-size:13px;padding:9px 12px}input:hover,select:hover,textarea:hover{border-color:#464646}input:focus,select:focus,textarea:focus{border-color:var(--accent)}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}.field{font-size:12px;gap:8px}.form-stack{gap:20px}.form-grid{gap:20px}.helper{font-size:12px;line-height:1.65}
.status-tabs{display:flex;align-items:center;gap:8px;padding-bottom:15px;border-bottom:1px solid var(--line);overflow:auto}.status-tabs button{display:flex;align-items:center;gap:9px;white-space:nowrap;min-height:35px;padding:7px 12px;font-size:12px;border:1px solid transparent;background:#1b1b1b;color:#bdbdbd;border-radius:6px}.status-tabs button:hover{background:#242424}.status-tabs button[aria-pressed=true]{background:var(--selected);border-color:#386b71;color:var(--text)}.status-tabs button>span{min-width:19px;padding:0 5px;font-size:11px;font-variant-numeric:tabular-nums;background:#2c2c2c;border-radius:4px}.status-tabs button[aria-pressed=true]>span{background:#345155}
.cloud-shell .cloud-server-bar{position:static;display:flex;align-items:center;min-height:62px;height:auto;border:0;background:transparent;margin:0 0 6px;gap:0}.cloud-shell .cloud-server-identity{padding:10px 18px 10px 0;border-right:1px solid var(--line);min-width:145px;max-width:200px;font-size:11px;gap:4px}.cloud-shell .cloud-metrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:0}.cloud-shell .cloud-metric{padding:6px 14px;gap:3px;border:0}.cloud-shell .cloud-metric>span{font-size:10px;color:var(--muted)}.cloud-shell .cloud-metric>strong{font-size:12px;font-weight:500;letter-spacing:0;color:var(--text)}
.cloud-shell .cloud-computers{margin:6px 0 0}.cloud-shell .cloud-computers-heading{grid-template-columns:minmax(180px,1fr) 170px 200px;gap:10px;margin-bottom:14px}.cloud-shell .cloud-computers-heading input,.cloud-shell .cloud-computers-heading select{height:38px;font-size:12px;background:var(--sidebar);border-color:var(--line)}
.table-wrap,.cloud-shell .table-wrap{border:1px solid var(--line);border-radius:7px;background:#151515}th,.cloud-shell .cloud-pc-table th{background:#1c1c1c;color:#aaa;font-size:11px;font-weight:550;letter-spacing:0;padding:12px 16px;height:42px}td,.cloud-shell .cloud-pc-table td{padding:13px 16px;height:56px;font-size:12px;border-color:var(--line)}tbody tr:hover,.cloud-shell .cloud-pc-row:hover{background:#1d1d1d}.cloud-shell .cloud-pc-table{min-width:1020px;font-size:12px}.cloud-shell .cloud-row-toggle{font-size:13px;font-weight:650;color:var(--text)}.cloud-row-toggle:hover{color:var(--accent)}.cloud-shell .cloud-pc-row.is-saving{background:#211e17}.cloud-shell .cloud-pc-row.is-saving:hover{background:#29241a}.cloud-shell .state{font-size:12px;gap:8px}.state:before{width:8px;height:8px}.cloud-shell .cloud-row-actions{background:transparent;border-color:transparent;padding:4px;min-width:30px}.cloud-row-actions svg{width:20px;height:20px}.cloud-row-actions:hover{background:#2b2b2b;border-color:var(--line)}
.cloud-detail-row td{background:#1b1b1b!important}.cloud-shell .cloud-pc-details{padding:20px;gap:17px 24px}.cloud-shell .cloud-pc-controls{gap:8px}.cloud-pc-controls .button{font-size:12px}.cloud-operation-receipt{max-width:240px;white-space:normal;line-height:1.5;margin-top:5px}.cloud-shell .cloud-table-footer{font-size:11px;padding-top:16px;gap:12px}.cloud-table-footer>[data-cloud-pc-count]{margin-left:auto}
.cloud-context-menu{border:1px solid #424242!important;border-radius:8px!important;background:#212121!important;padding:6px!important;box-shadow:0 12px 40px #0008!important}.cloud-context-menu .button{background:none;min-height:36px;font-size:12px;border:0!important;border-radius:4px!important}.cloud-context-menu .button:hover{background:#303030}
.cloud-action-dialog{color:var(--text,#ededed);background:var(--surface,#1b1b1b);border:1px solid var(--line,#393939);border-radius:14px;padding:24px;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 24px 80px #0009}
.cloud-action-dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
.cloud-action-dialog h2{font-size:21px;margin:0}.cloud-action-dialog h3{font-size:16px;margin-top:0}
.cloud-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 10px}
.cloud-action-grid .button{min-height:43px;justify-content:center;white-space:normal;text-align:center}
.cloud-action-dialog .danger{color:#ffaaaa;border-color:#693a3a;background:#311f1f}
.cloud-action-confirm{border-top:1px solid var(--line,#393939);padding-top:20px;margin-top:16px}
.cloud-action-confirm .field{margin:16px 0}.cloud-action-dialog .cloud-command-notice{min-height:1.5em;font-size:13px;line-height:1.6}
.cloud-action-dialog [hidden]{display:none!important}
[data-cloud-writebacks] small{display:block;margin-top:4px}.cloud-wb-path{font-family:ui-monospace,monospace;font-size:11px;overflow-wrap:anywhere;white-space:normal;display:block;max-width:240px}
.cloud-shell .cloud-pc-table{min-width:870px;width:100%}.cloud-shell .cloud-pc-table td:nth-child(5){max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cloud-shell .cloud-pc-table td:last-child,.cloud-shell .cloud-pc-table th:last-child{position:sticky;right:0;background:#1b1b1b;min-width:48px;width:48px;padding:8px;box-shadow:-4px 0 8px #0002}
.cloud-shell .cloud-pc-table td:nth-child(3){max-width:245px}.cloud-shell .cloud-pc-table .state{white-space:normal}
.cloud-setup-steps{display:grid;gap:12px;margin:16px 0;padding-left:24px}.cloud-token-line{display:flex;gap:10px;align-items:center}.cloud-token-line input{min-width:0;flex:1}
@media(max-width:540px){.cloud-action-dialog{padding:18px}.cloud-action-grid{grid-template-columns:1fr}.cloud-token-line{align-items:stretch;flex-direction:column}.settings-tabs{flex-wrap:wrap;max-width:100%;row-gap:10px}}
.cloud-boot-row td{height:auto!important;padding:0 12px 12px!important;border:0!important}.cloud-boot-progress{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:6px;background:#1c1c1c;padding:12px 14px;font-size:12px;white-space:normal}.cloud-boot-progress progress{flex:1;min-width:80px;height:6px;accent-color:var(--accent);border:0;border-radius:4px;overflow:hidden}.cloud-boot-progress small{margin:0;color:var(--muted);font-size:11px}.cloud-boot-progress progress::-webkit-progress-bar{background:#333}.cloud-boot-progress progress::-webkit-progress-value{background:var(--accent)}
.cloud-save-banner{padding:12px 16px;min-height:0;background:#282318;border-color:#594827;border-radius:6px;gap:16px;justify-content:space-between}.cloud-save-banner>div{display:grid;gap:4px}.cloud-save-banner strong{font-size:13px!important;font-weight:550!important}.cloud-save-banner span{font-size:12px}.cloud-discovery{background:var(--selected);border-color:#36595d}.notice{border-radius:6px;background:var(--selected);margin-bottom:20px}.validation{border-radius:6px}.notice.warning{background:#282318}
.overview-summary{display:flex;align-items:center;gap:30px;margin:0 0 20px;padding:10px 0 24px;border-bottom:1px solid var(--line)}.overview-summary>span{display:flex;align-items:baseline;gap:10px;background:none;border:0;padding:0}.overview-summary strong{font-size:28px!important;color:var(--text)!important;font-weight:550}.overview-summary small{font-size:12px;color:var(--muted)}
.cloud-panel{padding:20px 0;margin:0 0 12px;border:0;border-top:1px solid var(--line);background:none;border-radius:0}.cloud-panel .section-title{margin-bottom:16px}.cloud-panel .section-title h2{font-size:16px}.cloud-panel .table-wrap{border:1px solid var(--line);border-radius:6px}.cloud-panel table td{font-size:12px}.cloud-network-panel{padding-top:0;border-top:0}.cloud-network-panel .helper{margin-top:4px}.chart-legend{display:flex;gap:18px;font-size:11px;white-space:nowrap;color:var(--accent)}.chart-legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px}.chart-legend span:last-child{color:var(--chart-secondary)}[data-cloud-network] canvas{display:block;width:100%;height:210px}.cloud-chart-empty{height:210px;display:grid;place-items:center;color:var(--muted);font-size:12px}
.form-section{padding:22px 0}.form-section h2{font-size:16px;margin-bottom:18px}.detail-grid{gap:36px}.context-panel{padding-left:24px}.settings-tabs{gap:20px}.settings-tabs a{font-size:12px;border-radius:0}.settings-tabs a.active{background:none;color:var(--accent);border-color:var(--accent)}details.advanced{font-size:12px}.form-section>p{margin-bottom:16px}.back-link{margin-bottom:18px;font-size:12px}.section{margin-top:22px}
.auth-shell{background:#121212}.auth-content{padding:32px 24px}.auth-panel{width:380px}.auth-brand{justify-content:flex-start;gap:12px;margin-bottom:38px}.auth-brand img{width:40px;height:32px;mix-blend-mode:normal}.auth-brand>span{font-size:23px;letter-spacing:-.6px}.auth-panel h1{font-size:24px;letter-spacing:-.6px;margin-bottom:28px}.auth-panel input{background:#191919;border-color:var(--line);min-height:44px!important;font-size:14px!important;border-radius:6px}.auth-panel .button{min-height:43px;border-radius:6px;margin-top:4px}.auth-panel .button.primary:hover{background:#77e3ef}.auth-footer{text-align:left;border-top:1px solid var(--line);padding-top:20px;margin-top:32px;font-size:11px}
.auth-brand img{mix-blend-mode:lighten}.state.preparing{color:var(--accent)}.state.preparing:before{background:var(--accent)}
.toast{background:#242424;border-color:#454545;border-radius:8px;box-shadow:0 12px 36px #0006;font-size:12px}.progress-track,.progress-mini{background:#333}.progress-track,.progress-fill{border-radius:4px}
.preservation-live>progress{display:block;width:min(640px,100%);height:6px;accent-color:var(--accent);border:0;border-radius:4px;overflow:hidden}.preservation-live>progress[hidden]{display:none}.preservation-live>progress::-webkit-progress-bar{background:#333}.preservation-live>progress::-webkit-progress-value{background:var(--accent)}
@media(min-width:1600px){.cloud-shell .workspace{padding-inline:36px}.panel-topbar{padding-inline:36px}}
@media(max-width:1200px){.cloud-shell .cloud-metric{padding-inline:8px}.cloud-shell .cloud-metric>strong{font-size:11px}.cloud-shell .cloud-server-identity{min-width:125px}.cloud-shell .cloud-computers-heading{grid-template-columns:minmax(150px,1fr) 140px 160px}}
@media(max-width:1000px){.cloud-shell .sidebar{width:208px}.cloud-shell .workspace{margin-left:208px;padding-inline:22px}.panel-topbar{left:208px;padding-inline:22px}.cloud-shell .cloud-server-bar{align-items:stretch}.cloud-shell .cloud-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.cloud-shell .cloud-metric:nth-child(-n+3){border-bottom:0}.cloud-shell .cloud-computers-heading{grid-template-columns:1fr 1fr}.cloud-shell .cloud-computers-heading input{grid-column:1/-1}.cloud-shell .cloud-pc-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.panel-topbar{left:0;height:54px;padding:0 16px;gap:10px}.panel-menu{display:inline-flex!important;min-height:32px!important;font-size:12px}.panel-breadcrumb{gap:10px;font-size:11px}.cloud-shell .sidebar{top:54px;width:224px;box-shadow:12px 0 40px #0008}.cloud-shell .sidebar .brand{height:68px}.cloud-shell .workspace{margin-left:0;padding:76px 16px 32px}.cloud-shell .page-heading{gap:12px;align-items:flex-start;margin-bottom:22px}.cloud-page-heading h1,h1{font-size:23px}.cloud-page-heading .button.primary{font-size:11px;padding-inline:10px;min-height:34px}.cloud-shell .cloud-server-bar{flex-direction:row;gap:0;margin-bottom:14px}.cloud-shell .cloud-server-identity{flex-direction:column;justify-content:center;min-width:100px;max-width:115px;border-bottom:0;border-right:1px solid var(--line);padding:10px 10px 10px 0;font-size:10px}.cloud-shell .cloud-server-identity .state{font-size:10px;gap:5px}.cloud-shell .cloud-metric{padding:6px}.cloud-shell .cloud-metric>span{font-size:9px}.cloud-shell .cloud-metric>strong{font-size:10px}.cloud-shell .cloud-metric:nth-child(3){border:0}.cloud-shell .cloud-computers-heading{grid-template-columns:1fr 1fr;gap:8px}.cloud-shell .cloud-computers-heading input{grid-column:1/-1}.cloud-shell .cloud-computers-heading select{grid-column:auto;min-width:0}.status-tabs{gap:5px}.status-tabs button{font-size:11px;padding:7px 8px;gap:6px}.cloud-table-footer>span:first-child{width:100%;font-size:10px}.cloud-table-footer>[data-cloud-pc-count]{margin-left:0}.cloud-save-banner{align-items:flex-start;gap:10px;flex-direction:column}.overview-summary{gap:20px;justify-content:space-between}.overview-summary>span{flex-direction:column;gap:3px}.overview-summary strong{font-size:23px!important}.overview-summary small{font-size:10px}.cloud-panel .section-title{gap:12px;align-items:flex-start}.cloud-panel .section-title h2{font-size:14px}.chart-legend{font-size:10px;gap:10px}.cloud-panel .section-title .actions{justify-content:flex-end}.context-panel{padding-left:0}.cloud-shell .form-grid{grid-template-columns:1fr}.cloud-shell .club-picker{max-width:170px;flex-wrap:wrap}.auth-panel h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Focused preservation exit: no network or image settings in a destructive decision. */
.preservation-flow { max-width: 740px; }
.preservation-live { padding: 0 0 20px; border-bottom: 1px solid #2c2c2c; margin-bottom: 24px; }
.preservation-live p:empty { display: none; }
.preservation-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.preservation-choices legend { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.preservation-choice { display: flex; align-items: flex-start; gap: 14px; padding: 20px; margin-bottom: 12px; border: 1px solid #343434; border-radius: 10px; background: #1a1a1a; cursor: pointer; }
.preservation-choice:has(input:checked) { border-color: #45d6e7; background: #192326; }
.preservation-choice:focus-within { outline: 2px solid #45d6e7; outline-offset: 3px; }
.preservation-choice input[type=radio] { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #45d6e7; }
.preservation-choice strong { display: block; font-size: 15px; color: #f4f4f4; margin-bottom: 7px; }
.preservation-choice small { display: block; color: #ababab; font-size: 13px; line-height: 1.6; }
.preservation-flow .form-footer { flex-wrap: wrap; }
.cloud-pxe-history { list-style: none; padding: 0; margin: 12px 0; font-size: 12px; }
.cloud-pxe-history li { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid #303030; }
.cloud-pxe-history time { color: #aaa; font-variant-numeric: tabular-nums; }
.cloud-last-observed { display: block; font-size: 11px; font-variant-numeric: tabular-nums; }
.cloud-remote-desktop { height: calc(100dvh - 210px); min-height: 420px; overflow: hidden; border: 1px solid #343434; border-radius: 12px; background: #171717; }
.cloud-remote-desktop iframe { width: 100%; height: 100%; border: 0; }
