/* Sidebar UI Canvas */
.content-section {
    display: none; position: relative; flex: 1;
    background: var(--bg-sidebar); border-right: 1px solid var(--border-color); overflow: hidden;
}
@media (min-width: 1024px) { .content-section { display: block; } }

.content-section-text {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 100%; padding: 3rem; position: relative; z-index: 10;
}

.ambient-glow-1 {
    position: absolute; top: -10rem; left: -10rem; width: 24rem; height: 24rem;
    border-radius: 50%; background-color: rgba(99, 102, 241, 0.1); filter: blur(120px);
}
.ambient-glow-2 {
    position: absolute; bottom: 2.5rem; right: 2.5rem; width: 28rem; height: 28rem;
    border-radius: 50%; background-color: rgba(6, 182, 212, 0.1); filter: blur(150px);
}

.brand-header { display: flex; align-items: center; gap: 0.75rem; }
.brand-icon-box {
    display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center;
    border-radius: 0.75rem; background: linear-gradient(135deg, #6366f1, #06b6d4);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.2);
}
.brand-icon-box svg { width: 1.5rem; height: 1.5rem; color: #ffffff; }
.brand-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
.brand-text span { color: #6366f1; font-weight: 800; }
.marketing-group { max-width: 28rem; }
.badge-opt {
    display: inline-flex; align-items: center; border-radius: 9999px;
    background-color: rgba(99, 102, 241, 0.1); padding: 0.25rem 0.75rem;
    font-size: 0.85rem; font-weight: 600; color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2); margin-bottom: 1rem;
}
.dark-theme .badge-opt { color: #818cf8; }
.marketing-title { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 1rem; }
.marketing-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

.sidebar-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 1.5rem;
}
.sidebar-footer a { color: var(--text-muted); text-decoration: none; }

/* Right Panel Core Form Layout */
.auth-panel {
    display: flex; flex: 1; flex-direction: column; justify-content: center;
    padding: 3rem 1.5rem; background-color: var(--bg-card); position: relative;
    transition: background-color 0.25s ease;
}
@media (min-width: 640px) { .auth-panel { padding-left: 3rem; padding-right: 3rem; } }
@media (min-width: 1024px) { .auth-panel { flex: none; width: 32rem; padding-left: 5rem; padding-right: 5rem; } }

.auth-center-shell { margin-left: auto; margin-right: auto; width: 100%; max-width: 24rem; position: relative; z-index: 10; }
.title-block h2 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
.title-block p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); }

/* Switcher Control Elements */
.toggle-container { margin-top: 2rem; }
.toggle-track {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
    border-radius: 0.75rem; background-color: var(--bg-toggle-track); padding: 0.25rem;
    border: 1px solid var(--border-color);
}
.toggle-button {
    border: none; border-radius: 0.5rem; padding: 0.5rem 0;
    font-size: 0.85rem; font-weight: 600; background: transparent;
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-button:hover { color: var(--text-primary); }

.toggle-button.active-tab {
    background: var(--toggle-btn-active);
    color: var(--toggle-btn-text-active) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Forms Content Panels */
.form-container { margin-top: 1.5rem; min-height: 15.5rem; }
.form-frame { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.form-link { font-size: 0.85rem; font-weight: 600; color: #6366f1; text-decoration: none; }

.input-relative { position: relative; width: 100%; }
.custom-input {
    display: block; width: 100%; border-radius: 0.75rem; border: 1px solid var(--border-color);
    background-color: var(--bg-input); padding: 0.75rem 1rem; color: var(--input-text);
    font-size: 0.875rem; outline: none; transition: all 0.2s ease;
}
.custom-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-glow);
}

.prefix-addon {
    position: absolute; inset-y: 0; left: 0; display: flex; align-items: center;
    padding-left: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); pointer-events: none;
}
.custom-input-with-prefix { padding-left: 4rem; }

.checkbox-container { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.custom-checkbox { height: 1rem; width: 1rem; border-radius: 0.25rem; border: 1px solid var(--border-color); accent-color: #6366f1; cursor: pointer; }
.checkbox-label { font-size: 0.875rem; color: var(--text-secondary); user-select: none; cursor: pointer; }

/* Dynamic CTA Buttons */
.submit-btn {
    display: flex; width: 100%; justify-content: center; border: none; border-radius: 0.75rem;
    background: linear-gradient(90deg, var(--btn-gradient-start) 0%, var(--btn-gradient-end) 100%);
    padding: 0.875rem; font-size: 0.875rem; font-weight: 600; color: #ffffff; cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.25); transition: all 0.15s ease;
}
.submit-btn:hover { filter: brightness(1.05); box-shadow: 0 10px 20px -3px rgba(99, 102, 241, 0.35); }
.submit-btn:active { transform: scale(0.99); }

.secondary-btn {
    display: flex; width: 100%; justify-content: center; border: 1px solid var(--border-color);
    border-radius: 0.75rem; background-color: var(--bg-input); padding: 0.875rem;
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.15s ease;
}
.secondary-btn:hover { background-color: var(--bg-toggle-track); }

.footnote-help { margin-top: 2rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.footnote-help a { font-weight: 600; color: #6366f1; text-decoration: none; }

/* Main Floating Toggler UI */
.theme-switcher-wrapper { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 50; }
.theme-toggle-trigger {
    padding: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-color);
    background-color: var(--bg-card); color: var(--text-secondary); cursor: pointer;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;
}
.theme-toggle-trigger:hover { transform: scale(1.05); color: var(--text-primary); }
.theme-toggle-trigger svg { width: 1.25rem; height: 1.25rem; }
.dark-theme .theme-toggle-trigger { color: #fbbf24; }