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

/* ============================================
    COLOR VARIABLES — edit colors here only.
    Dark mode overrides are in html.dark below.
    All components use these via var(--color-*).
    ============================================ */
:root {
    /* Backgrounds */
    --bg-gradient-start: #667eea;
    --bg-gradient-end:   #764ba2;
    --color-card:        #ffffff;
    --color-info-bg:     #ecf5ff;

    /* Text */
    --color-heading:     #333333;
    --color-text:        #303133;
    --color-text-soft:   #666666;
    --color-text-muted:  #909399;
    --color-text-hint:   #606266;
    --color-text-faint:  #999999;

    /* Borders */
    --color-border:      #eeeeee;

    /* Shadows */
    --color-shadow:      rgba(0, 0, 0, 0.2);

    /* Accents — same in light and dark mode */
    --color-primary:     #409eff;
    --color-success:     #67c23a;
    --color-danger:      #f56c6c;
    --color-purple:      #667eea;
}

html.dark {
    /* Backgrounds */
    --bg-gradient-start: #1a1a2e;
    --bg-gradient-end:   #16213e;
    --color-card:        #1d1e2c;
    --color-info-bg:     #1a2744;

    /* Text */
    --color-heading:     #e5eaf3;
    --color-text:        #e5eaf3;
    --color-text-soft:   #a3a6ad;
    --color-text-muted:  #a3a6ad;
    --color-text-hint:   #a3a6ad;
    --color-text-faint:  #6b6e7a;

    /* Borders */
    --color-border:      #363849;

    /* Shadows */
    --color-shadow:      rgba(0, 0, 0, 0.5);
}

/* ============================================
    GLOBAL STYLES
    ============================================ */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(
        135deg,
        var(--bg-gradient-start) 0%,
        var(--bg-gradient-end) 100%
    );
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: background 0.3s;
}

#app {
    width: 100%;
    max-width: 1200px;
}

/* Loading spinner — centered during boot and lazy-load navigation */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    color: white;
    font-size: 24px;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid white;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-right: 15px;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Top progress bar — fixed stripe shown during any loading state */
.page-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% 100%;
    animation: loading-slide 1.2s ease infinite;
    z-index: 9999;
}

@keyframes loading-slide {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}