/* Workspaces inherit the portal's blue palette and typography. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ops-cloud-entry { position:relative; display:inline-flex; align-items:stretch!important; gap:0!important; width:auto!important; border:1px solid #c9dcee; border-radius:11px; background:#f6faff; align-self:flex-start; z-index:5; }
.ops-cloud-default,.ops-cloud-unknown { padding:10px 14px; font:13px var(--font-sans); color:#315f88; white-space:nowrap; }
.ops-cloud-default:hover { background:#e8f2fc; border-radius:11px 0 0 11px; }
.ops-cloud-menu summary { display:flex; padding:10px; border-left:1px solid #d7e4f0; cursor:pointer; list-style:none; }
.ops-cloud-menu summary::-webkit-details-marker { display:none; }
.ops-cloud-menu summary svg { width:16px; height:16px; fill:none; stroke:#6284a3; stroke-width:1.5; }
.ops-cloud-options { position:absolute; right:0; top:calc(100% + 7px); min-width:180px; display:grid; padding:6px; background:#fff; border:1px solid #dbe7f1; border-radius:12px; box-shadow:0 12px 35px #29445c24; }
.ops-cloud-options a { padding:10px 12px; border-radius:7px; color:#3f6588; font-size:13px; }
.ops-cloud-options a:hover,.ops-cloud-options a:focus-visible { background:#eaf3fd; }
.ops-metric .ops-metric-detail { display:block; color:#7e93a7; font-size:11px; line-height:1.6; margin-top:10px; }
.ops-metric strong { font-size:clamp(17px,1.8vw,27px); overflow-wrap:anywhere; }
.ops-file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:10px; padding:18px 10px; border:1px solid #e0e9f2; border-radius:13px; background:#fbfdff; align-items:start; }
.ops-file-card { min-width:0; position:relative; border:1px solid transparent; border-radius:9px; text-align:center; transition:background .15s,border-color .15s; }
.ops-file-card:hover,.ops-file-card:focus-within { background:#eaf3fd; border-color:#b6d3ef; }
.ops-file-card.is-selected { background:#e5f1ff; border-color:#72a7dc; box-shadow:0 0 0 2px #a9cff055; }
.ops-file-card .ops-file-name { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; min-height:154px; padding:14px 6px 12px; text-align:center; }
.ops-file-card.is-file .ops-file-name { padding-bottom:30px; }
.ops-file-card .ops-file-icon { width:70px; height:64px; display:block; }
.ops-file-card .ops-file-icon svg { width:100%; height:100%; display:block; }
.ops-file-card .ops-file-name strong { font-size:12px; line-height:1.5; font-weight:500; width:100%; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.ops-file-card .ops-file-name small { font-size:10px; color:#8aa0b3; }
.ops-file-card-actions { position:absolute; bottom:5px; left:0; width:100%; }
.ops-file-card-actions .portal-action { padding:1px 10px; font-size:10px; min-height:20px; background:#fff8; border:1px solid #d5e3f1; border-radius:5px; }
.ops-file-grid .ops-empty-directory { padding:32px; grid-column:1/-1; color:#869db1; text-align:center; }
.server-editor-modal select { width:100%; border:1px solid #c7d8e8; border-radius:9px; background:#fff; padding:10px 12px; color:#315778; font:13px var(--font-sans); margin-top:7px; }
.ops-workspace-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 0; border-bottom:1px solid #e1eaf3; margin-bottom:18px; }
.ops-view-tabs { display:flex; gap:5px; padding:4px; border-radius:12px; background:#edf3fa; }
.ops-view-tab { padding:10px 16px; border:1px solid transparent; border-radius:9px; color:#627e98; font-size:13px; white-space:nowrap; }
.ops-view-tab.is-active { background:#fff; color:#234f77; border-color:#cfdeed; box-shadow:0 2px 7px #1c477412; }
.ops-view-tab:hover { color:#255d93; }
.terminal-live-dot { display:inline-block; margin-left:7px; width:6px; height:6px; border-radius:50%; background:#39a482; }
.ops-cloud-entry { display:flex; gap:8px; align-items:center; }
.ops-cloud-entry select { min-width:130px; max-width:180px; border:1px solid #c7d8e9; border-radius:9px; background:#fff; padding:8px; color:#3c6285; font:12px var(--font-sans); }
.ops-pane-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 15px; }
.ops-pane-heading h5,.ops-chart-toolbar h5 { margin:0; font-size:16px; color:#244661; }
.ops-pane-heading p,.ops-chart-toolbar p { margin:5px 0 0; font-size:12px; line-height:1.65; color:#7b8fa3; }
.ops-chart-toolbar { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; margin:25px 0 14px; }
.ops-time-ranges { display:flex; flex-wrap:wrap; gap:5px; }
.ops-time-ranges button { padding:7px 10px; font-size:11px; border:1px solid #d5e2ee; border-radius:7px; background:#fff; color:#63809b; }
.ops-time-ranges button.is-active { background:#e4effd; color:#255f9d; border-color:#8bb2df; }
.ops-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ops-chart-card { min-width:0; border:1px solid #dce7f1; background:#fff; padding:16px 12px 8px; border-radius:14px; }
.ops-chart-card header { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:0 4px; flex-wrap:wrap; }
.ops-chart-card h5 { margin:0; font-size:13px; color:#2b4d6c; }
.ops-chart-card p { margin:8px 4px 4px; min-height:17px; font-size:10px; color:#8295a8; line-height:1.5; }
.ops-chart-card svg { display:block; width:100%; height:auto; }
.ops-chart-card svg text { fill:#8498ad; font:10px var(--font-sans); }
.ops-grid-line { stroke:#edf2f7; stroke-width:1; }
.ops-chart-card svg .ops-chart-empty { font-size:12px; fill:#9bafc2; }
.ops-chart-legend { display:flex; gap:12px; font-size:10px; color:#6e849a; }
.ops-chart-legend i { display:inline-block; width:12px; height:2px; margin-right:5px; vertical-align:middle; }
.ops-chart-point { opacity:0; cursor:crosshair; }
.ops-chart-point:hover,.ops-chart-point.is-single { opacity:1; }
.ops-history-note { font-size:11px; color:#7891aa; line-height:1.65; margin:12px 0 22px; }
.ops-service-scroll { max-height:240px; overflow:auto; }
.ops-service-scroll.is-expanded { max-height:480px; }
.ops-list-row small { max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops-terminal-host { width:100%; }
.terminal-idle { min-height:280px; display:flex; justify-content:center; flex-direction:column; align-items:center; background:#f1f6fb; border:1px dashed #bed2e5; border-radius:14px; color:#718ca5; text-align:center; padding:30px; }
.terminal-idle > span { font:28px var(--font-mono); color:#37698f; margin-bottom:12px; }
.terminal-idle strong { font-size:14px; }
.terminal-idle p { font-size:12px; max-width:400px; line-height:1.8; }
.terminal-modal.terminal-embedded { width:100%; box-shadow:none; border:1px solid #193854; border-radius:14px; }
.terminal-embedded .terminal-output { height:clamp(290px,45vh,520px); }
.terminal-toolbar { display:flex; gap:7px; flex-wrap:wrap; }
.terminal-connection-state { font-size:11px; color:#8fbbd6; margin:0 10px; white-space:nowrap; }
.terminal-toolbar button { font-size:11px; color:#b9cfdf; border:1px solid #34526b; background:#1a3044; border-radius:6px; padding:5px 8px; }
.terminal-embedded .terminal-form input { min-width:0; }
.ops-file-buttons { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ops-file-selection-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 10px; padding:8px 10px; border:1px solid #d6e4f0; border-radius:10px; background:#f4f9fe; }
.ops-selection-count { margin-right:auto; color:#55748f; font-size:11px; font-weight:600; }
.ops-file-selection-toolbar .portal-action { min-height:28px; padding:5px 9px; font-size:11px; }
.ops-file-selection-toolbar .portal-action[data-file-download-selected] { background:#3f7db8; border-color:#3f7db8; color:#fff; }
.ops-file-selection-toolbar .portal-action[data-file-download-selected]:hover:not(:disabled) { background:#2f689f; border-color:#2f689f; }
.ops-upload-button { cursor:pointer; }
.ops-upload-button input { display:none; }
.ops-upload-button.is-disabled { opacity:.5; cursor:default; }
.ops-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:#8ca2b7; margin-bottom:12px; }
.ops-breadcrumbs button { color:#3c709c; padding:4px 6px; border-radius:5px; overflow-wrap:anywhere; }
.ops-breadcrumbs button:hover { background:#e8f1fb; }
.ops-path-form { display:flex; gap:8px; margin:8px 0 15px; }
.ops-path-form input { flex:1; min-width:0; border:1px solid #c7d8e8; border-radius:9px; background:#fff; padding:10px 12px; color:#315778; font:12px var(--font-mono); }
.ops-file-table-wrap { width:100%; overflow:auto; border:1px solid #dbe7f1; border-radius:12px; }
.ops-file-table { width:100%; border-collapse:collapse; font-size:12px; }
.ops-file-table th { text-align:left; background:#f0f5fb; color:#71899f; padding:11px 12px; font-weight:500; white-space:nowrap; }
.ops-file-table td { border-top:1px solid #ebf1f6; padding:9px 12px; color:#5e7a94; white-space:nowrap; }
.ops-file-table tbody tr:hover { background:#f5f9fe; }
.ops-file-name { display:flex; gap:10px; align-items:center; text-align:left; color:#315875; font-size:12px; padding:3px 0; }
.ops-file-name > span:last-child { white-space:normal; min-width:120px; overflow-wrap:anywhere; }
.ops-file-icon { flex-shrink:0; font-size:19px; color:#83a6c5; }
.ops-file-icon.is-folder { color:#4f8fc8; }
.ops-file-table .portal-action { min-height:27px; padding:4px 8px; font-size:11px; }
.ops-file-table code { font:11px var(--font-mono); color:#7d91a3; }
.ops-file-table .ops-empty-directory { text-align:center; padding:32px; color:#91a6b8; }
.ops-file-message { border:1px dashed #cbddec; padding:30px 18px; border-radius:12px; text-align:center; color:#7894ac; background:#f6f9fd; font-size:12px; }
.ops-file-message.is-error { color:#a45f69; border-color:#e7c9cf; background:#fff8f9; }
.ops-file-footnote { font-size:11px; color:#8298aa; line-height:1.6; }
.ops-file-preview { margin-top:16px; border:1px solid #d6e2ee; border-radius:12px; overflow:hidden; background:#f7faff; }
.ops-file-preview header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #dce7f1; font-size:12px; }
.ops-file-preview pre { margin:0; padding:16px; font:12px/1.7 var(--font-mono); max-height:360px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#37516a; user-select:text; }
.ops-file-preview p { padding:12px; font-size:12px; color:#8496a6; }
.ops-transfer { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px; margin-bottom:12px; font-size:12px; color:#466e91; background:#edf5fd; border:1px solid #ccdfef; border-radius:10px; }
.ops-transfer span { min-width:0; overflow-wrap:anywhere; }
.ops-transfer progress { flex:1; min-width:100px; height:8px; accent-color:#4c86d8; }
.ops-file-dropzone { position:relative; border-radius:14px; transition:background .18s, box-shadow .18s, outline-color .18s; }
.ops-file-dropzone.is-dragover { background:transparent; outline:none; box-shadow:none; }
.ops-file-grid { position:relative; user-select:none; }
.ops-file-grid.is-dragover { outline:2px dashed #6ea5dc; outline-offset:6px; background:#f0f8ff; }
.ops-file-marquee { position:absolute; z-index:4; pointer-events:none; border:1px solid #4b91cf; background:#6aa8e833; border-radius:3px; box-shadow:0 0 0 1px #ffffff88 inset; }
.ops-file-card.is-drop-target { background:#dceeff; border-color:#6ea5dc; box-shadow:0 0 0 3px #b9dcfa88; }
.ops-path-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; margin:8px 0 15px; padding:8px 10px; border:1px solid #c7d8e8; border-radius:9px; background:#fff; }
.ops-path-segments { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:3px; color:#7e96ab; font-size:12px; }
.ops-path-segments button { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#35688f; padding:4px 6px; border-radius:5px; }
.ops-path-segments button:hover,.ops-path-segments button:focus-visible { background:#e9f3fd; outline:none; }
.ops-copy-path { flex:0 0 auto; min-width:30px; height:28px; border:1px solid #d2e1ee; border-radius:6px; color:#507a9d; background:#f8fbfe; font-size:16px; }
.ops-copy-path:hover { background:#e8f3fc; }
.ops-upload-target { display:block; padding:9px 11px; margin:8px 0; background:#edf4fb; border-radius:7px; font:12px var(--font-mono); overflow-wrap:anywhere; user-select:text; }
.ops-upload-name-list { max-height:220px; overflow:auto; margin:10px 0; padding:9px 10px 9px 28px; border:1px solid #dbe7f1; border-radius:8px; background:#fff; font-size:12px; line-height:1.8; }
.ops-upload-name-list li { overflow-wrap:anywhere; }
.ops-file-dialog select[data-upload-conflict] { display:block; width:100%; margin-top:8px; padding:10px 11px; border:1px solid #c2d7e8; border-radius:8px; background:#fff; color:#325576; font:13px var(--font-sans); }
@media(max-width:1000px) { .ops-chart-grid { grid-template-columns:1fr; } }
@media(max-width:620px) { .ops-view-tabs { width:100%; } .ops-view-tab { flex:1; padding:9px 8px; } .ops-cloud-entry { width:100%; } .ops-chart-card { padding:12px 8px 4px; } .terminal-head { flex-wrap:wrap; gap:10px; } .ops-file-table { min-width:600px; } }