﻿            /* === LAYOUT === */
            @font-face {
                font-family: "Pacifico";
                src: url("../pacifico/Pacifico.ttf") format("truetype");
                font-weight: 400;
                font-style: normal;
                font-display: swap;
            }

            .site-frame {
                width: 100%;
                height: 100vh;
                display: grid;
                grid-template-rows: 44px minmax(0, 1fr);
                overflow: hidden;
            }

            .site-topbar {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 16px;
                padding: 0 16px;
                border-bottom: 1px solid var(--border);
                background: var(--bg-panel);
                z-index: 5;
            }

            .site-brand-home {
                display: flex;
                align-items: center;
                height: 44px;
                text-decoration: none;
                color: var(--text);
            }

            .site-brand-text {
                font-family: "Pacifico", cursive;
                font-size: 22px;
                font-weight: 400;
                letter-spacing: 0;
                color: var(--accent);
                text-shadow: 0 0 12px var(--accent-glow);
            }

            .site-page-title {
                margin: 0;
                font-size: 15px;
                font-weight: 400;
                color: var(--text-2);
                font-family: "Cascadia Code", "Consolas", monospace;
            }

            .site-top-actions {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .site-status-pill {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                height: 24px;
                padding: 0 8px;
                border: 1px solid var(--border);
                border-radius: 4px;
                background: var(--bg-elevated);
                color: var(--text-2);
                font-size: 14px;
            }

            .site-status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--ok);
                box-shadow: 0 0 0 2px rgba(76, 175, 106, 0.2);
            }

            .shell {
                display: grid;
                grid-template-columns: 300px minmax(0, 1fr) 300px;
                height: 100%;
                overflow: hidden;
                background: var(--border);
                gap: 1px;
            }

            .panel-left, .panel-right {
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 12px;
                background: var(--bg-panel);
            }

            .panel-left { border-right: 1px solid var(--border); }
            .panel-right { border-left: 1px solid var(--border); }

            /* === BRAND HEADER === */
            .brand {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                margin-bottom: 12px;
                padding-bottom: 10px;
                border-bottom: 1px solid var(--border);
            }

            .eyebrow {
                margin: 0;
                color: var(--accent);
                font-family: "Cascadia Code", "Consolas", monospace;
                font-size: 12px;
                letter-spacing: 0.1em;
                text-transform: uppercase;
            }

            .brand-title {
                margin: 2px 0 0;
                color: var(--text);
                font-family: "Segoe UI", system-ui, sans-serif;
                font-size: 18px;
                font-weight: 600;
            }

            .subtitle { display: none; }

            .seal {
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--warn);
                border-radius: 4px;
                color: var(--warn);
                font-family: "STKaiti", "KaiTi", serif;
                font-size: 16px;
                font-weight: 700;
            }
