:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0d1117; color: #dce4ee; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.icons { display: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, .splitter:focus-visible { outline: 2px solid #8ab4f8; outline-offset: -2px; }
.workspace { --terminal-width: calc((100% - 8px) * .5); flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, var(--terminal-width)) 8px minmax(0, 1fr); padding: 0; }
.panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 0; border-radius: 0; overflow: hidden; background: #10151c; }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; flex-shrink: 0; padding: 0 6px; border-bottom: 1px solid #28313d; background: #181f29; }
.panel-name { display: flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
.panel-name svg { color: #9cabbe; width: 15px; height: 15px; }
.panel-actions { display: flex; gap: 3px; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 26px; height: 24px; border-radius: 4px; border: 0; background: transparent; color: #a5b1c0; }
.icon-button:hover { background: #2b3747; color: #eff4fa; }
.icon-button svg { width: 15px; height: 15px; }
iframe { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: #10151c; }
.splitter { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; cursor: col-resize; touch-action: none; }
.splitter span { pointer-events: none; width: 1px; height: 40px; background: #344153; border-radius: 2px; transition: background .15s ease, height .15s ease; }
.splitter:hover span, .splitter:focus-visible span, .workspace.dragging .splitter span { background: #8ab4f8; height: 64px; }
.workspace.dragging { cursor: col-resize; user-select: none; }
.workspace.dragging iframe { pointer-events: none; }
.workspace[data-mode="terminal"], .workspace[data-mode="desktop"] { grid-template-columns: minmax(0, 1fr); }
.workspace[data-mode="terminal"] .desktop-panel, .workspace[data-mode="desktop"] .terminal-panel, .workspace:not([data-mode="split"]) .splitter { position: relative; z-index: 1; display: none; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .workspace[data-mode="split"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
  .splitter { position: relative; z-index: 1; display: none; }
  .panel-bar { padding: 0 8px; }
}
@media (pointer: coarse) { .icon-button { width: 44px; height: 44px; } .panel-bar { height: 44px; } }

.panel { position: relative; }
.connection-status { position: absolute; z-index: 2; top: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid #364357; border-radius: 6px; background: #18212ef2; color: #dce4ee; box-shadow: 0 4px 16px #0004; font-size: 12px; }
.connection-spinner { width: 12px; height: 12px; flex-shrink: 0; border: 2px solid #40516a; border-top-color: #8ab4f8; border-radius: 50%; animation: connection-spin .8s linear infinite; }
.connection-status[data-state="error"] .connection-spinner { animation: none; border: 0; width: 6px; height: 6px; background: #e9ad67; }
.connection-retry { flex-shrink: 0; padding: 3px 6px; border: 0; border-radius: 3px; background: #30435d; color: #dce4ee; font-size: 12px; }
.connection-retry:hover { background: #405b80; }
.connection-retry:focus-visible { outline: 2px solid #8ab4f8; }
@keyframes connection-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .connection-spinner { animation: none; } }
@media (pointer: coarse) { .connection-status { top: 56px; } .connection-retry { min-height: 36px; } }