/* Global Reset — box model, fonts, body, typography, scrollbar */

        /* ================================================
           GLOBAL RESET & BASE
           ================================================ */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-base);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            padding: 0;
            position: relative;
            overflow-x: hidden;
        }

        /* Ambient background effect */
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(108, 122, 224, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(212, 168, 83, 0.04) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        [v-cloak] { display: none; }

        #app {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 32px 80px;
            position: relative;
            z-index: 1;
        }

        /* ================================================
           CLICK-TO-EDIT TABLE CELLS
           ================================================ */
        .cell-text {
            cursor: text;
            padding: 4px 8px;
            min-height: 24px;
            font-size: 13px;
            color: var(--text-primary);
            border-radius: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background 0.15s;
        }
        .cell-text:hover {
            background: var(--bg-hover);
        }
        .cell-editing .el-input__wrapper,
        .cell-editing .el-textarea__inner {
            box-shadow: 0 0 0 1px var(--accent) !important;
        }

        /* Browser-level optimization: skip rendering off-screen rows */
        .el-table__row {
            content-visibility: auto;
            contain-intrinsic-height: 44px;
        }

        /* ================================================
           TYPOGRAPHY
           ================================================ */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-sans);
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.3;
        }

        /* ================================================
           SCROLLBAR — Linear dark style
           ================================================ */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-default);
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }