/* Lock UI font to Roboto - only CV preview should use custom fonts */
        #toolbar,
        #left-pane,
        #version-controls,
        .drawer,
        .modal,
        #settings-drawer,
        #job-drawer,
        #interview-drawer {
            font-family: 'Roboto', sans-serif !important;
        }

        /* Layout for panels */
        #app-root {
            display: flex;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            padding-top: 48px; /* toolbar height */
        }

        #left-pane {
            flex: 0 0 25%;
            max-width: 25%;
            min-width: 200px;
            overflow-y: auto;
            background: var(--bg-pane-light);
            box-shadow: var(--shadow-pane);
            border-right: 1px solid var(--border-light);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #left-pane.hidden {
            flex: 0 0 0;
            max-width: 0;
            min-width: 0;
            overflow: hidden;
            opacity: 0;
        }

        #center-area {
            flex: 1;
            display: flex;
            overflow: hidden;
            background: var(--bg-center-area);
            transition: background 0.3s ease;
        }

        #center-pane {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
            background: var(--bg-center);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease;
        }

        #toolbar {
            backdrop-filter: blur(20px) saturate(1.8);
            background: var(--bg-toolbar);
            border-bottom: 1px solid var(--border-light);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        #right-pane {
            flex: 0 0 33%;
            max-width: 33%;
            min-width: 250px;
            overflow-y: auto;
            background: var(--bg-pane-light);
            border-left: 1px solid var(--border-light);
            box-shadow: var(--shadow-pane);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #right-pane.hidden {
            flex: 0 0 0;
            max-width: 0;
            min-width: 0;
            overflow: hidden;
            opacity: 0;
        }

        /* Splitters */
        #splitter-left, #splitter-right {
            width: 6px;
            cursor: col-resize;
            background: var(--bg-splitter);
            flex-shrink: 0;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
        }

        #splitter-left:hover, #splitter-right:hover {
            background: var(--bg-splitter-hover);
        }

        #splitter-left:active, #splitter-right:active {
            background: var(--bg-splitter-active);
            box-shadow: 0 0 25px rgba(37, 99, 235, 0.4);
        }

        #splitter-left.hidden, #splitter-right.hidden {
            width: 0;
            opacity: 0;
        }