:root {
    --omr-bg: #09090b;
    --omr-bg-alt: #121212;
    --omr-panel: #161618cc;
    --omr-panel-solid: #141416;
    --omr-border: #1f1f23;
    --omr-border-strong: #2f2f35;
    --omr-border-accent: #8a8a8d;
    --omr-text: #e0e0e2;
    --omr-muted: #8a8a8d;
    --omr-accent: #b91c1c;
    --omr-accent-warm: #f59e0b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}

body {
    font-family: "Inter", "JetBrains Mono", "IBM Plex Sans", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 20% 30%, rgba(185, 28, 28, 0.12), transparent 45%),
                radial-gradient(circle at 80% 10%, rgba(245, 158, 11, 0.08), transparent 40%),
                linear-gradient(135deg, #050506, var(--omr-bg));
    color: var(--omr-text);
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vw, 48px);
    position: relative;
    isolation: isolate;
}

#wallpaper-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: saturate(1.15) brightness(0.55);
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

body.workspace-active #wallpaper-video {
    opacity: 1;
    filter: saturate(1.25) brightness(0.7);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background: linear-gradient(120deg, rgba(5, 5, 7, 0.8), rgba(9, 9, 11, 0.3));
    backdrop-filter: blur(12px);
    z-index: 1;
}

body.workspace-active::before {
    background: linear-gradient(120deg, rgba(5, 5, 7, 0.55), rgba(9, 9, 11, 0.12));
    backdrop-filter: blur(6px);
}

body::after {
    background: repeating-linear-gradient(
        120deg,
        transparent 0,
        transparent 180px,
        rgba(255, 255, 255, 0.01) 180px,
        rgba(255, 255, 255, 0.01) 360px
    );
    opacity: 0.4;
    z-index: 2;
}

body.workspace-active::after {
    opacity: 0.2;
}

#terminal {
    width: min(960px, 95vw);
    height: min(600px, 85vh);
    background: linear-gradient(145deg, rgba(17, 17, 18, 0.92), rgba(10, 10, 12, 0.94));
    border: 1px solid var(--omr-border);
    border-radius: 28px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px);
    overflow: hidden;
    position: relative;
    z-index: 3;
    padding: clamp(12px, 1.2vw, 20px);
}

.xterm {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.xterm-viewport,
.xterm-screen {
    background-color: transparent !important;
}

.xterm-cursor-layer .xterm-cursor {
    background-color: var(--omr-accent-warm) !important;
}

#windows-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    padding: clamp(24px, 3vw, 64px);
    z-index: 4;
}

#windows-container .terminal-window {
    pointer-events: all;
}

.terminal-window {
    position: absolute;
    min-width: 420px;
    min-height: 320px;
    background: rgba(9, 9, 11, 0.55);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(18px);
}

body.workspace-active .terminal-window {
    background: rgba(9, 9, 11, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    #wallpaper-video {
        display: none;
    }
}

.terminal-window::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(185, 28, 28, 0.18), rgba(245, 158, 11, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.terminal-window.focused {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.9);
}

.terminal-window.focused::before {
    opacity: 0.35;
}

.terminal-window-handle {
    height: 32px;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.terminal-window-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.terminal-window-content {
    flex: 1;
    background: rgba(5, 5, 7, 0.48);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin: 8px;
    overflow: hidden;
    position: relative;
}

body.workspace-active .terminal-window-content {
    background: rgba(5, 5, 7, 0.32);
}

.terminal-window-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.12), transparent 55%);
    opacity: 0.3;
    pointer-events: none;
}

.resize-handle {
    position: absolute;
    z-index: 10;
    background: transparent;
}

.resize-handle.n,
.resize-handle.s {
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: ns-resize;
}

.resize-handle.n {
    top: 2px;
}

.resize-handle.s {
    bottom: 2px;
}

.resize-handle.e,
.resize-handle.w {
    top: 12px;
    bottom: 12px;
    width: 6px;
    cursor: ew-resize;
}

.resize-handle.e {
    right: 2px;
}

.resize-handle.w {
    left: 2px;
}

.resize-handle.ne,
.resize-handle.nw,
.resize-handle.se,
.resize-handle.sw {
    width: 12px;
    height: 12px;
}

.resize-handle.ne {
    top: 4px;
    right: 4px;
    cursor: nesw-resize;
}

.resize-handle.nw {
    top: 4px;
    left: 4px;
    cursor: nwse-resize;
}

.resize-handle.se {
    bottom: 4px;
    right: 4px;
    cursor: nwse-resize;
}

.resize-handle.sw {
    bottom: 4px;
    left: 4px;
    cursor: nesw-resize;
}

@media (max-width: 900px) {
    #windows-container {
        padding: 16px;
    }

    .terminal-window {
        min-width: 320px;
        border-radius: 10px;
    }

    .terminal-window-handle {
        height: 10px;
    }
}

@media (max-width: 640px) {
    body {
        padding: 12px;
    }

    #terminal {
        width: 100%;
        height: 75vh;
        border-radius: 20px;
    }
}