:root {
    --gs-surface-1: #0f0f1a;
    --gs-surface-2: rgba(30, 30, 50, 0.95);
    --gs-surface-3: rgba(45, 45, 70, 0.95);

    --gs-card-border: rgba(255, 255, 255, 0.08);
    --gs-card-border-hover: rgba(167, 139, 250, 0.3);

    --gs-text-primary: #ffffff;
    --gs-text-secondary: rgba(255, 255, 255, 0.7);
    --gs-text-muted: rgba(255, 255, 255, 0.5);

    --surface-bg: #0f172a;
    --surface-frosted: rgba(30, 41, 59, 0.7);
    --surface-card: rgba(30, 41, 59, 0.85);
    --surface-overlay: rgba(0, 0, 0, 0.6);
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(30, 41, 59, 0.5);
    --card-bg: #1e293b;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.glass-panel {
    background: rgba(30, 41, 59, 0.85) !important;
}

.gs-card {
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-card-border);
    border-radius: 12px;
    padding: 24px;
    color: var(--gs-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gs-card:hover {
    border-color: var(--gs-card-border-hover);
}

.gs-card h1,
.gs-card h2,
.gs-card h3,
.gs-card h4,
.gs-card h5,
.gs-card h6 {
    color: var(--gs-text-primary);
}

.gs-card p,
.gs-card span {
    color: var(--gs-text-secondary);
}

.gs-card small,
.gs-card .text-muted {
    color: var(--gs-text-muted) !important;
}

.gs-card label {
    color: var(--gs-text-secondary);
}

.gs-card input,
.gs-card textarea,
.gs-card select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--gs-text-primary);
    padding: 8px 12px;
    transition: border-color 0.2s ease;
}

.gs-card input:focus,
.gs-card textarea:focus,
.gs-card select:focus {
    border-color: rgba(124, 58, 237, 0.5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.gs-card input::placeholder,
.gs-card textarea::placeholder {
    color: var(--gs-text-muted);
}

.gs-card-elevated {
    background: var(--gs-surface-3);
    border: 1px solid var(--gs-card-border);
    border-radius: 12px;
    padding: 24px;
    color: var(--gs-text-primary);
}