:root{--breakpoint-mobile: 768px;--breakpoint-tablet: 1024px;--breakpoint-desktop: 1024px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--container-max-width: 100%;--container-padding: 16px;--container-padding-mobile: 12px;--header-height: 64px;--header-height-mobile: 96px;--color-border: #e5e5e5;--color-border-light: #eee;--color-border-medium: #ddd;--color-background-light: #f5f5f5;--color-background-lighter: #fafafa;--color-text-secondary: #666;--color-text-muted: #9ca3af;--color-important: #b45309;--color-shadow: rgba(0, 0, 0, .04);--font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;--font-size-sm: 11px;--font-size-base: 14px;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--shadow-sm: 0 2px 8px var(--color-shadow)}html,body{width:100%;overflow-x:hidden;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:var(--font-family)}main{width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 var(--container-padding);box-sizing:border-box}.view-container{padding:var(--spacing-lg);max-width:var(--container-max-width);margin:0 auto;box-sizing:border-box;width:100%}.pinned-container{position:fixed;left:0;right:0;z-index:100;width:100%}.pinned-container-top{top:0}.pinned-container-bottom{bottom:0}.app-header{background-color:#fff;border-bottom:1px solid var(--color-border);overflow-x:hidden}.app-header .container{display:flex;align-items:center;gap:var(--spacing-md);max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);position:relative}.app-header .brand{font-weight:var(--font-weight-semibold);cursor:pointer;flex-shrink:0}.spacer{flex:1 1 auto;min-width:0}.header-actions{display:flex!important;align-items:center;justify-content:center;gap:var(--spacing-xs);flex-shrink:0;position:absolute!important;left:50%!important;transform:translate(-50%)!important;z-index:1;pointer-events:none;max-width:100%;box-sizing:border-box}.header-actions>*{pointer-events:auto}.header-actions .fui-Toolbar{gap:var(--spacing-sm)!important;overflow:visible!important}.header-actions .fui-Toolbar .fui-Button{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;min-width:auto;flex-shrink:0}.header-actions .fui-Toolbar .fui-ToolbarButton:last-child:after{display:none!important}.header-actions .fui-Toolbar .fui-Button[aria-label]{padding:var(--spacing-xs)}.toolbar-separator{display:inline-block;width:1px;height:20px;background:var(--color-border);margin:0 var(--spacing-sm);flex-shrink:0}.save-status-indicator{flex-shrink:0;margin-left:var(--spacing-md)}.save-status-icon{pointer-events:none;min-width:auto;padding:var(--spacing-xs)}.fui-MenuPopover{z-index:1000}.login-container{display:flex;flex-direction:column;gap:var(--spacing-md);max-width:420px;margin:10vh auto;padding:var(--spacing-xl);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.form-link-container{margin-top:var(--spacing-sm)}.list-root{margin:var(--spacing-sm) 0;width:100%;max-width:100%;box-sizing:border-box}.list-item{position:relative;margin:var(--spacing-xs) 0;padding-left:20px}.list-item:before{content:"•";position:absolute;left:0;top:2px;color:var(--color-text-secondary)}.list-item.important:before{color:var(--color-important)}.list-item.level-0>[role=textbox]{text-decoration:underline}.list-item.level-1>[role=textbox]{font-weight:400}.list-item.level-2>[role=textbox]{font-style:italic}.list-item.level-3>[role=textbox]{font-weight:700}.list-item.level-4>[role=textbox]{font-style:italic;text-decoration:underline}.list-item.level-5>[role=textbox]{font-weight:700;font-style:italic}.list-item.level-6>[role=textbox],.list-item.level-7>[role=textbox],.list-item.level-8>[role=textbox],.list-item.level-9>[role=textbox]{font-weight:400}.list-item.completed [role=textbox]{color:var(--color-text-muted);text-decoration:line-through}.list-item>[role=textbox]{outline:none;min-height:20px;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;box-sizing:border-box}.list-item .children{margin-left:20px}.data-table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:var(--font-size-base)}.data-table thead th{text-align:left;border-bottom:2px solid var(--color-border-medium);padding:var(--spacing-md) var(--spacing-sm);background-color:var(--color-background-light);font-weight:var(--font-weight-semibold)}.data-table tbody tr{border-bottom:1px solid #f0f0f0}.data-table tbody tr:nth-child(2n){background-color:var(--color-background-lighter)}.data-table tbody td{padding:10px var(--spacing-sm);vertical-align:top}.data-table-cell-json{word-break:break-word;white-space:pre-wrap;font-family:monospace;font-size:var(--font-size-sm)}.data-table tbody td.empty{text-align:center;padding:40px;color:var(--color-text-secondary);background-color:transparent!important}.data-table tbody tr:last-child td.empty{border-bottom:none}.data-table-actions{display:flex;gap:var(--spacing-sm)}.data-table-actions-column{width:120px}.db-browser-container{display:flex;height:calc(100vh - 120px);gap:var(--spacing-lg)}.db-sidebar{width:250px;border-right:1px solid var(--color-border-medium);padding:var(--spacing-lg);overflow-y:auto}.db-sidebar h3{margin-top:0;margin-bottom:var(--spacing-lg)}.db-sidebar-list button{justify-content:flex-start;text-align:left;width:100%}.db-sidebar-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.db-main-content{flex:1;padding:var(--spacing-lg);overflow-y:auto}.db-main-content h2{margin-top:0}.db-main-content>div:first-of-type{margin-bottom:var(--spacing-lg)}.db-pagination{margin-top:var(--spacing-lg);display:flex;gap:var(--spacing-sm);align-items:center}.db-dialog-surface{min-width:500px;max-width:800px}.db-dialog-form{display:flex;flex-direction:column;gap:var(--spacing-lg);max-height:60vh;overflow-y:auto}.db-form-field{display:flex;flex-direction:column}.db-textarea{width:100%;min-height:100px;font-family:monospace;font-size:var(--font-size-sm);padding:var(--spacing-sm);border:1px solid #ccc;border-radius:var(--border-radius-sm)}.db-input-full{width:100%}.error-details{margin-bottom:var(--spacing-lg)}.error-message{margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-bold)}.error-details-section{margin-top:var(--spacing-lg);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.error-details-summary{cursor:pointer;margin-bottom:var(--spacing-sm)}.error-pre{background:var(--color-background-light);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);overflow:auto;max-height:200px;font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.dropzone{padding:var(--spacing-md);border:1px dashed #ccc;border-radius:var(--border-radius-md)}.backyard-container{display:flex;flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-xl);max-width:1200px;margin:0 auto}.backyard-header{text-align:center;margin-bottom:var(--spacing-xl)}.backyard-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.backyard-metric-card{align-items:center;text-align:center}.backyard-relays-container{display:flex;flex-direction:column;gap:var(--spacing-md);border:1px solid var(--color-border);padding:var(--spacing-lg);border-radius:var(--border-radius-md)}.backyard-relay-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border)}.backyard-chart-container{height:400px;width:100%;margin-top:var(--spacing-xl)}.backyard-chart-controls{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);align-items:end}.backyard-chart-control-group{display:flex;flex-direction:column}.server-status-container{display:flex;flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-xl);max-width:1400px;margin:0 auto}.server-status-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.server-status-metric-card{align-items:center;text-align:center}.server-status-hdd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg)}.server-status-hdd-card{display:flex;flex-direction:column;gap:var(--spacing-sm)}.server-status-chart-container{height:400px;width:100%;margin-top:var(--spacing-lg)}.server-status-chart-controls{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);align-items:end}.server-status-chart-control-group{display:flex;flex-direction:column}.server-status-chart-control-group label{margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-semibold)}.server-status-process-controls{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);align-items:end}.server-status-process-control-group{display:flex;flex-direction:column}.server-status-process-control-group label{margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-semibold)}.server-status-process-table{margin-top:var(--spacing-md)}.vnc-container{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:800px;margin:0 auto}.vnc-host-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-lg)}.vnc-host-card{padding:var(--spacing-lg)}.vnc-host-card-body{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-md)}.vnc-host-actions{display:flex;gap:var(--spacing-sm)}.vnc-progress{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-background-light);border-radius:var(--border-radius-sm)}.vnc-progress-text{color:var(--color-text-secondary);font-family:monospace}.job-expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;color:var(--color-text-secondary);border-radius:var(--border-radius-sm)}.job-expand-btn:hover{background-color:var(--color-background-light)}.job-expanded-row>td{padding:0 var(--spacing-sm) var(--spacing-md)!important;background-color:var(--color-background-light)}.job-params{padding:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.job-params-pre{background:#1e1e1e;color:#d4d4d4;padding:var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);margin:var(--spacing-xs) 0 0 0;white-space:pre-wrap;word-break:break-word}.job-stream-output{padding:var(--spacing-sm)}.job-stream-pre{background:#1e1e1e;color:#d4d4d4;padding:var(--spacing-md);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-family:monospace;max-height:300px;overflow-y:auto;margin:0;white-space:pre-wrap;word-break:break-word}.job-stream-empty{color:#888;font-style:italic}.job-stream-done{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--spacing-xs);text-align:right}.db-expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;color:var(--color-text-secondary);border-radius:var(--border-radius-sm)}.db-expand-btn:hover{background-color:var(--color-background-light)}.db-expanded-row>td{padding:0 var(--spacing-sm) var(--spacing-md)!important;background-color:var(--color-background-light)}.db-item-json{font-family:monospace;font-size:var(--font-size-sm);background:#1e1e1e;color:#d4d4d4;padding:var(--spacing-sm);border-radius:var(--border-radius-sm);max-height:400px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;margin:var(--spacing-xs) 0 0 0}.db-detail-section{margin:var(--spacing-sm) 0;padding:var(--spacing-xs) var(--spacing-sm)}.list-context-menu{position:fixed;z-index:1001;background:var(--colorNeutralBackground1, #fff);border:1px solid var(--color-border-medium, #e0e0e0);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);min-width:180px}@media(max-width:767px){main{margin:0 auto;padding:0 var(--container-padding-mobile)}.view-container{padding:var(--spacing-md)}.app-header .container{padding:var(--spacing-sm) var(--container-padding-mobile);gap:var(--spacing-sm);flex-wrap:wrap;justify-content:space-between;align-items:center}.app-header .spacer{order:2}.header-actions{gap:var(--spacing-xs);position:static!important;left:auto!important;transform:none!important;width:100%;order:10;justify-content:center;margin-top:var(--spacing-xs);flex-basis:100%}.header-actions .fui-Toolbar{width:100%!important;justify-content:space-evenly!important;gap:0!important}.header-actions .toolbar-separator{margin:0;flex:0 0 1px}.header-actions .fui-Toolbar .fui-Button[aria-label]{padding:6px;flex:0 0 auto}.save-status-indicator{order:3;margin-left:0}.save-status-icon{font-size:var(--font-size-sm)}.login-container{max-width:100%;margin:var(--spacing-xl) auto;padding:var(--spacing-lg)}.db-browser-container{flex-direction:column;height:auto;gap:var(--spacing-md)}.db-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border-medium);padding:var(--spacing-md);max-height:200px;overflow-y:auto}.db-main-content{padding:var(--spacing-md)}.db-dialog-surface{min-width:90vw;max-width:90vw}.backyard-container{padding:var(--spacing-md)}.backyard-metrics-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.backyard-chart-container{height:300px}.backyard-chart-controls{flex-direction:column;gap:var(--spacing-md)}.data-table-wrapper{overflow-x:scroll;-webkit-overflow-scrolling:touch}.data-table{font-size:var(--font-size-sm)}.data-table thead th,.data-table tbody td{padding:var(--spacing-sm) var(--spacing-xs)}}@media(min-width:768px)and (max-width:1023px){.backyard-metrics-grid{grid-template-columns:repeat(2,1fr)}.db-sidebar{width:200px}.header-actions{width:75%!important;max-width:550px!important}.header-actions .fui-Toolbar{gap:var(--spacing-sm)!important;width:100%!important;justify-content:space-evenly!important}.header-actions .toolbar-separator{margin:0 var(--spacing-sm)}}@media(min-width:1024px){.view-container{padding:var(--spacing-lg)}.app-header .container{padding:var(--spacing-md) var(--container-padding)}.header-actions{width:75%!important;max-width:550px!important}.header-actions .fui-Toolbar{gap:var(--spacing-md)!important;width:100%!important;justify-content:space-evenly!important}.header-actions .toolbar-separator{margin:0 var(--spacing-md)}}
