/* Window Styles */
:root {
    --bg-0: #070b11;
    --bg-1: #0e131b;
    --bg-2: #121a25;
    --text-0: #e7ecf5;
    --text-1: #a6b3c6;
    --brand: #6da8ff;
    --ok: #5bd49b;
    --ring: #7aa2ff20;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

* {
    box-sizing: border-box;
}

*::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    color: var(--text-0);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

section {
    width: min(1100px, 100%);
    background: linear-gradient(180deg, rgba(20, 26, 36, 0.75), rgba(13, 19, 29, 0.75));
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    border-radius: 16px;
    box-shadow: var(--shadow);
    outline: 1px solid #ffffff14;
    overflow: clip;
    position: relative;
}

.window__titlebar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(18, 24, 34, 0.9), rgba(14, 20, 30, 0.9)), 
                radial-gradient(600px 200px at 0% -50%, #38558f33, transparent);
    border-bottom: 1px solid #ffffff12;
    position: relative;
}

.window__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.title__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 6px var(--ring);
}

.title__text {
    color: #fff;
}

.window__body {
    padding: 16px;
    background: linear-gradient(180deg, rgba(12, 18, 26, 0.55), rgba(10, 16, 24, 0.6));
}

.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brand);
    color: #0a0f18;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 18px #6da8ff33, inset 0 0 0 1px #00000040;
    transition: transform 0.06s ease, filter 0.15s ease;
    font-family: inherit;
}

.btn:hover {
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(1px);
}