:root {
/* Flat Design System - Primary Colors */
--color-primary: #0E76FD;
--color-primary-dark: #0C5FC4;
--color-primary-light: #E8F3FF;
/* Neutral Colors */
--color-ink: #1A1F36;
--color-slate: #4A5568;
--color-silver: #718096;
--color-smoke: #EDF2F7;
--color-snow: #F7FAFC;
--color-white: #FFFFFF;
/* Semantic Colors */
--color-success: #10B981;
--color-success-light: rgba(16, 185, 129, 0.1);
--color-success-border: rgba(16, 185, 129, 0.3);
--color-warning: #F59E0B;
--color-warning-light: rgba(245, 158, 11, 0.1);
--color-warning-border: rgba(245, 158, 11, 0.3);
--color-error: #EF4444;
--color-error-light: rgba(239, 68, 68, 0.1);
--color-error-border: rgba(239, 68, 68, 0.3);
--color-info: #06B6D4;
--color-info-light: rgba(6, 182, 212, 0.1);
--color-info-border: rgba(6, 182, 212, 0.3);
/* Legacy compatibility mappings */
--color-background: #F7FAFC;
--color-surface: #FFFFFF;
--color-surface-alt: #EDF2F7;
--color-text: #1A1F36;
--color-text-primary: #1A1F36;
--color-text-secondary: #4A5568;
--color-muted: #4A5568;
--color-border: #EDF2F7;
--color-border-strong: #A0AEC0;
--color-focus: rgba(14, 118, 253, 0.5);
--color-elevated-border: rgba(160, 174, 192, 0.6);
--color-placeholder: rgba(74, 85, 104, 0.8);
/* Background hierarchy (Apple-inspired) */
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F5F5F7;
--color-bg-tertiary: #E8E8ED;
/* Sidebar Theme - Light Mode (Apple-inspired minimal) */
--sidebar-bg: rgba(255, 255, 255, 0.92);
--sidebar-bg-solid: #FFFFFF;
--sidebar-text: #1D1D1F;
--sidebar-text-muted: #86868B;
--sidebar-border: rgba(0, 0, 0, 0.06);
--sidebar-hover: rgba(0, 0, 0, 0.04);
--sidebar-active: rgba(0, 122, 255, 0.08);
--sidebar-active-text: #007AFF;
--sidebar-icon: #007AFF;
--sidebar-badge-bg: transparent;
--sidebar-badge-text: #86868B;
--sidebar-search-bg: rgba(0, 0, 0, 0.03);
--sidebar-search-border: rgba(0, 0, 0, 0.06);
--sidebar-search-icon: #86868B;
/* Apple transition curve */
--apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Step Accent Colors (for progress indicators) */
--step-1-color: #6366F1; /* Indigo - Naming */
--step-2-color: #8B5CF6; /* Purple - Permissions */
--step-3-color: #EC4899; /* Pink - Distribution */
--step-4-color: #F59E0B; /* Amber - Advanced */
--step-5-color: #10B981; /* Green - Registration */
/* Legacy tint support */
--tint-1: #6366F1;
--tint-2: #8B5CF6;
--tint-3: #EC4899;
--tint-4: #F59E0B;
--tint-5: #10B981;
--tint-1-dim: rgba(99, 102, 241, 0.7);
--tint-2-dim: rgba(139, 92, 246, 0.7);
--tint-3-dim: rgba(236, 72, 153, 0.7);
--tint-4-dim: rgba(245, 158, 11, 0.7);
--tint-5-dim: rgba(16, 185, 129, 0.7);
--tint-1-wash: rgba(99, 102, 241, 0.1);
--tint-2-wash: rgba(139, 92, 246, 0.1);
--tint-3-wash: rgba(236, 72, 153, 0.1);
--tint-4-wash: rgba(245, 158, 11, 0.1);
--tint-5-wash: rgba(16, 185, 129, 0.1);
/* Spacing Scale */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Legacy spacing compatibility */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Typography Scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Legacy font sizes */
--font-size-xs: 0.875rem;
--font-size-sm: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.5rem;
--font-size-xl: 1.75rem;
--font-size-2xl: 2.25rem;
/* Layout */
--header-height: 60px;
--page-gutter: 48px;
--content-max-width: 680px;
--actions-max-width: 680px;
--sidebar-width: 280px;
--guide-width: 380px;
--guide-collapsed-width: 60px;
--bp-xs: 480px;
--bp-sm: 600px;
--bp-md: 900px;
--bp-lg: 1200px;
/* ═══════════════════════════════════════════════════════
* Animation & Transition System
* ═══════════════════════════════════════════════════════ */
/* Duration scale */
--duration-instant: 50ms;
--duration-fast: 100ms;
--duration-base: 150ms;
--duration-slow: 200ms;
--duration-slower: 300ms;
/* Easing functions */
--ease-default: ease;
--ease-smooth: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Composed transitions (use these in components) */
--transition-fast: var(--duration-fast) var(--ease-default);
--transition-base: var(--duration-base) var(--ease-default);
--transition-slow: var(--duration-slow) var(--ease-smooth);
--transition-colors: color var(--duration-base) var(--ease-default),
background-color var(--duration-base) var(--ease-default),
border-color var(--duration-base) var(--ease-default);
--transition-transform: transform var(--duration-base) var(--ease-smooth);
--transition-opacity: opacity var(--duration-base) var(--ease-default);
/* Legacy compatibility */
--transition-duration: 150ms;
--transition-easing: cubic-bezier(0.2, 0.6, 0.2, 1);
/* Focus Indicators */
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--color-primary);
/* Shadows (Flatter, more subtle) */
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.10);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
}
html[data-theme='dark'] {
/* Dark Mode - Primary Colors (Apple) */
--color-primary: #0A84FF;
--color-primary-dark: #0071E3;
--color-primary-light: rgba(10, 132, 255, 0.15);
/* Dark Mode - Neutral Colors (Apple) */
--color-ink: #F5F5F7;
--color-slate: #98989D;
--color-silver: #86868B;
--color-smoke: #2C2C2E;
--color-snow: #1C1C1E;
--color-white: #000000;
/* Dark Mode - Semantic Colors (Apple) */
--color-success: #30D158;
--color-success-light: rgba(48, 209, 88, 0.15);
--color-success-border: rgba(48, 209, 88, 0.4);
--color-warning: #FFD60A;
--color-warning-light: rgba(255, 214, 10, 0.15);
--color-warning-border: rgba(255, 214, 10, 0.4);
--color-error: #FF453A;
--color-error-light: rgba(255, 69, 58, 0.15);
--color-error-border: rgba(255, 69, 58, 0.4);
--color-info: #64D2FF;
--color-info-light: rgba(100, 210, 255, 0.15);
--color-info-border: rgba(100, 210, 255, 0.4);
/* Dark Mode - Core backgrounds (Apple) */
--color-background: #000000;
--color-surface: #1C1C1E;
--color-surface-alt: #2C2C2E;
--color-bg-primary: #000000;
--color-bg-secondary: #1C1C1E;
--color-bg-tertiary: #2C2C2E;
/* Sidebar Theme - Dark Mode (Apple-inspired minimal) */
--sidebar-bg: rgba(28, 28, 30, 0.92);
--sidebar-bg-solid: #1C1C1E;
--sidebar-text: #F5F5F7;
--sidebar-text-muted: #98989F; /* WCAG AA: improved contrast from #86868B */
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-hover: rgba(255, 255, 255, 0.05);
--sidebar-active: rgba(10, 132, 255, 0.15);
--sidebar-active-text: #0A84FF;
--sidebar-icon: #0A84FF;
--sidebar-badge-bg: transparent;
--sidebar-badge-text: #98989F; /* WCAG AA: improved contrast */
--sidebar-search-bg: rgba(255, 255, 255, 0.05);
--sidebar-search-border: rgba(255, 255, 255, 0.08);
--sidebar-search-icon: #98989F; /* WCAG AA: improved contrast */
/* Dark Mode - Text & Borders (Apple) */
--color-text: #F5F5F7;
--color-text-primary: #F5F5F7;
--color-text-secondary: #A1A1A6; /* WCAG AA: improved contrast from #86868B */
--color-muted: #A1A1A6; /* WCAG AA: improved contrast from #86868B */
--color-border: rgba(255, 255, 255, 0.08);
--color-border-strong: rgba(255, 255, 255, 0.15);
--color-focus: rgba(10, 132, 255, 0.5);
--color-elevated-border: rgba(255, 255, 255, 0.1);
--color-placeholder: rgba(160, 160, 165, 0.7); /* WCAG AA: improved from rgba(134, 134, 139, 0.6) */
/* Dark Mode - Step Colors (brighter for visibility) */
--step-1-color: #818CF8;
--step-2-color: #A78BFA;
--step-3-color: #F472B6;
--step-4-color: #FFD60A;
--step-5-color: #30D158;
/* Dark Mode - Legacy tints */
--tint-1: #818CF8;
--tint-2: #A78BFA;
--tint-3: #F472B6;
--tint-4: #FFD60A;
--tint-5: #30D158;
--tint-1-dim: rgba(129, 140, 248, 0.7);
--tint-2-dim: rgba(167, 139, 250, 0.7);
--tint-3-dim: rgba(244, 114, 182, 0.7);
--tint-4-dim: rgba(255, 214, 10, 0.7);
--tint-5-dim: rgba(48, 209, 88, 0.7);
--tint-1-wash: rgba(129, 140, 248, 0.15);
--tint-2-wash: rgba(167, 139, 250, 0.15);
--tint-3-wash: rgba(244, 114, 182, 0.15);
--tint-4-wash: rgba(255, 214, 10, 0.15);
--tint-5-wash: rgba(48, 209, 88, 0.15);
/* Dark Mode - Shadows (subtle) */
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
color-scheme: dark;
}
/* ============================================
LIGHT MODE - Soft & Warm Theme
============================================ */
html[data-theme='light'] {
/* Light Mode - Warm Backgrounds */
--color-bg: #FFFBF7;
--color-bg-secondary: #FEF7F0;
--color-surface: #FFFFFF;
--color-surface-alt: #FEF7F0;
--color-background: #FFFBF7;
--color-bg-primary: #FFFBF7;
--color-bg-tertiary: #F5F0EB;
/* Light Mode - Neutral Colors (warm tones) */
--color-ink: #1A1F36;
--color-slate: #4A5568;
--color-silver: #64748B;
--color-smoke: #F5F0EB;
--color-snow: #FFFCF9;
--color-white: #FFFFFF;
/* Light Mode - Primary Colors */
--color-primary: #5B4FCF;
--color-primary-dark: #4338CA;
--color-primary-light: rgba(91, 79, 207, 0.12);
/* Light Mode - Semantic Colors */
--color-success: #059669;
--color-success-light: rgba(5, 150, 105, 0.1);
--color-success-border: rgba(5, 150, 105, 0.3);
--color-warning: #D97706;
--color-warning-light: rgba(217, 119, 6, 0.1);
--color-warning-border: rgba(217, 119, 6, 0.3);
--color-error: #DC2626;
--color-error-light: rgba(220, 38, 38, 0.1);
--color-error-border: rgba(220, 38, 38, 0.3);
--color-info: #0284C7;
--color-info-light: rgba(2, 132, 199, 0.1);
--color-info-border: rgba(2, 132, 199, 0.3);
/* Sidebar Theme - Light Mode (warm glass) */
--sidebar-bg: rgba(255, 252, 249, 0.95);
--sidebar-bg-solid: #FFFCF9;
--sidebar-text: #1A1F36;
--sidebar-text-muted: #6B5C52;
--sidebar-border: rgba(120, 100, 80, 0.1);
--sidebar-hover: rgba(91, 79, 207, 0.06);
--sidebar-active: rgba(91, 79, 207, 0.1);
--sidebar-active-text: #5B4FCF;
--sidebar-icon: #5B4FCF;
--sidebar-badge-bg: rgba(91, 79, 207, 0.1);
--sidebar-badge-text: #5B4FCF;
--sidebar-search-bg: rgba(120, 100, 80, 0.05);
--sidebar-search-border: rgba(120, 100, 80, 0.12);
--sidebar-search-icon: #6B5C52;
/* Light Mode - Text & Borders (warm) */
--color-text: #1A1F36;
--color-text-primary: #1A1F36;
--color-text-secondary: #64748B;
--color-muted: #64748B;
--color-border: rgba(120, 100, 80, 0.12);
--color-border-strong: rgba(120, 100, 80, 0.2);
--color-focus: rgba(91, 79, 207, 0.4);
--color-elevated-border: rgba(120, 100, 80, 0.1);
--color-placeholder: rgba(100, 90, 80, 0.5);
/* Light Mode - Step Colors (rich & warm) */
--step-1-color: #5B4FCF;
--step-2-color: #8B5CF6;
--step-3-color: #E11D48;
--step-4-color: #EA580C;
--step-5-color: #059669;
/* Light Mode - Legacy tints */
--tint-1: #5B4FCF;
--tint-2: #8B5CF6;
--tint-3: #E11D48;
--tint-4: #EA580C;
--tint-5: #059669;
--tint-1-dim: rgba(91, 79, 207, 0.7);
--tint-2-dim: rgba(139, 92, 246, 0.7);
--tint-3-dim: rgba(225, 29, 72, 0.7);
--tint-4-dim: rgba(234, 88, 12, 0.7);
--tint-5-dim: rgba(5, 150, 105, 0.7);
--tint-1-wash: rgba(91, 79, 207, 0.1);
--tint-2-wash: rgba(139, 92, 246, 0.1);
--tint-3-wash: rgba(225, 29, 72, 0.1);
--tint-4-wash: rgba(234, 88, 12, 0.1);
--tint-5-wash: rgba(5, 150, 105, 0.1);
/* Light Mode - Shadows (warm undertones) */
--shadow-xs: 0 1px 3px rgba(120, 100, 80, 0.08);
--shadow-sm: 0 4px 12px rgba(120, 100, 80, 0.1);
--shadow-md: 0 8px 24px rgba(120, 100, 80, 0.12);
--shadow-lg: 0 12px 32px rgba(120, 100, 80, 0.15);
color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.wizard-screen {
transition: none;
transform: none;
}
.wizard-option,
.wizard-button {
transition: none;
}
}
html,
body {
/* Removed height: 100% to allow content to expand beyond viewport */
min-height: 100%;
/* MOBILE FIX: Prevent horizontal overflow */
overflow-x: hidden;
width: 100%;
max-width: 100vw;
/* iOS momentum scrolling for main page */
-webkit-overflow-scrolling: touch;
/* Scroll anchoring to prevent content jumps */
overflow-anchor: auto;
}
* {
box-sizing: border-box;
}
/* Safety rule: ensure [hidden] attribute always hides elements */
[hidden] {
display: none !important;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--color-text);
font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
/* Light Mode - Warm gradient background */
html[data-theme='light'] body {
background: linear-gradient(135deg,
#FFFBF7 0%,
#FEF3E8 25%,
#FCF0F4 50%,
#F5F0FF 75%,
#FFFBF7 100%
);
background-attachment: fixed;
}
img {
max-width: 100%;
display: block;
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.theme-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-left: 0;
flex-wrap: wrap;
}
.theme-toggle__label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.theme-toggle__options {
display: flex;
gap: var(--space-xs);
}
.theme-toggle__option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 var(--space-sm);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-duration) var(--transition-easing),
background-color var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing);
}
.theme-toggle__option input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.theme-toggle__option span {
pointer-events: none;
}
.theme-toggle__option:hover,
.theme-toggle__option:focus-visible {
border-color: var(--color-primary);
color: var(--color-text);
box-shadow: 0 8px 20px hsla(210, 94%, 26%, 0.12);
}
.theme-toggle__option input:focus-visible + span {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.theme-toggle__option--active {
border-color: transparent;
background: var(--color-primary);
color: #fff;
box-shadow: 0 12px 28px hsla(210, 94%, 32%, 0.25);
}
@media (max-width: 720px) {
.theme-toggle {
order: 3;
width: 100%;
justify-content: flex-start;
}
.theme-toggle__options {
width: 100%;
justify-content: flex-start;
}
}
.brand {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: default;
user-select: none;
width: 100%;
}
.brand__logo {
width: 32px;
height: 32px;
border-radius: 0.6rem;
box-shadow: 0 4px 12px hsla(215, 62%, 32%, 0.2);
}
.brand__title {
font-weight: 600;
font-size: 15px;
color: color-mix(in srgb, var(--color-text) 95%, #0f1d3d 5%);
letter-spacing: 0.01em;
}
.wizard-path-nav {
flex: 1 1 auto;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: calc(var(--space-sm) + 4px);
margin-right: calc(-1 * (var(--space-sm) + 4px));
padding-bottom: clamp(var(--space-lg), 8vh, var(--space-xl));
scroll-padding-top: var(--space-lg);
scrollbar-width: thin;
}
.wizard-path-nav::-webkit-scrollbar {
width: 4px;
}
.wizard-path-nav::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-border) 60%, rgba(74, 110, 255, 0.35) 40%);
border-radius: 999px;
}
.wizard-path {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
font-size: var(--font-size-xs);
padding: 0;
margin: 0;
list-style: none;
color: var(--color-muted);
cursor: default;
position: relative;
}
.wizard-path::before {
content: '';
position: absolute;
inset: clamp(var(--space-xs), 1.2vw, var(--space-sm)) 0 clamp(var(--space-sm), 2vw, var(--space-lg)) auto;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--color-border) 45%, rgba(90, 128, 255, 0.35) 55%) 0%, color-mix(in srgb, var(--color-border) 65%, rgba(17, 24, 39, 0.15) 35%) 100%);
opacity: 0.7;
pointer-events: none;
}
.wizard-path__item {
position: relative;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: clamp(var(--space-sm), 1.4vw, var(--space-md)) clamp(var(--space-md), 2vw, var(--space-lg));
padding-left: clamp(calc(var(--space-lg) * 1.1), 3.4vw, calc(var(--space-xl) * 0.95));
color: color-mix(in srgb, var(--color-text) 85%, #d7e3ff 15%);
font-weight: 600;
font-size: var(--font-size-sm);
pointer-events: auto;
cursor: pointer;
width: 100%;
z-index: 1;
border-radius: clamp(var(--radius-md), 0.75rem, var(--radius-lg));
border: 1px solid color-mix(in srgb, var(--color-border) 45%, rgba(78, 134, 255, 0.5) 55%);
background: color-mix(in srgb, var(--color-surface) 88%, rgba(255, 255, 255, 0.18) 12%);
box-shadow: 0 10px 28px hsla(215, 58%, 20%, 0.18);
backdrop-filter: blur(8px);
transition: background-color var(--transition-duration) var(--transition-easing),
border-color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing);
}
.wizard-path__item::before {
content: '';
position: absolute;
left: clamp(calc(var(--space-lg) * 0.25), 0.9vw, calc(var(--space-md) * 1.1));
top: 50%;
width: 12px;
height: 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border) 35%, rgba(74, 110, 255, 0.6) 65%);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-border) 20%, rgba(74, 110, 255, 0.15) 80%);
transform: translateY(-50%);
transition: background-color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing);
}
.wizard-path__primary {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
}
.wizard-path__item[data-has-children="true"] {
align-items: stretch;
flex-direction: column;
gap: var(--space-sm);
padding-bottom: var(--space-sm);
}
.wizard-path__item[data-has-children="true"] .wizard-path__pill {
margin-left: auto;
}
.wizard-path__caret {
width: 12px;
height: 12px;
border-right: 2px solid color-mix(in srgb, var(--color-muted) 45%, #5671a8 55%);
border-bottom: 2px solid color-mix(in srgb, var(--color-muted) 45%, #5671a8 55%);
transform: rotate(45deg);
transition: border-color var(--transition-duration) var(--transition-easing),
transform var(--transition-duration) var(--transition-easing);
margin-left: var(--space-xs);
flex-shrink: 0;
}
.wizard-path__item.is-open .wizard-path__caret,
.wizard-path__item.is-active .wizard-path__caret {
border-color: var(--color-primary);
transform: rotate(135deg);
}
.wizard-subpath {
list-style: none;
margin: 0;
padding: var(--space-xs) 0 0 clamp(calc(var(--space-lg) * 0.9), 3vw, calc(var(--space-xl) * 0.8));
display: none;
flex-direction: column;
gap: var(--space-xs);
}
.wizard-subpath[hidden] {
display: none;
}
.wizard-path__item.is-open .wizard-subpath {
display: flex;
}
.wizard-subpath__item {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-sm);
color: color-mix(in srgb, var(--color-muted) 70%, #c0c8ff 30%);
font-size: var(--font-size-xs);
font-weight: 600;
cursor: pointer;
transition: background-color var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing);
margin-left: clamp(var(--space-md), 2.2vw, calc(var(--space-lg) * 0.8));
}
.wizard-subpath__item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border) 40%, #7aa7ff 60%);
flex-shrink: 0;
}
.wizard-subpath__item:hover,
.wizard-subpath__item:focus-visible {
color: color-mix(in srgb, var(--color-primary) 75%, #f7fbff 25%);
background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 76%, rgba(30, 58, 138, 0.7) 24%), color-mix(in srgb, var(--color-surface-alt) 55%, rgba(24, 40, 82, 0.8) 45%));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, #8fb4ff 45%);
}
.wizard-subpath__item.is-active {
color: color-mix(in srgb, var(--color-primary) 78%, #eef4ff 22%);
background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 68%, rgba(45, 86, 176, 0.85) 32%), color-mix(in srgb, var(--color-surface-alt) 50%, rgba(20, 34, 70, 0.85) 50%));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, #a8c6ff 30%);
}
.wizard-subpath__item:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.wizard-subpath__label {
pointer-events: none;
}
.wizard-subpath__context {
display: block;
font-size: var(--font-size-xs);
color: var(--color-muted);
margin-top: 2px;
}
.wizard-subpath__item.is-active .wizard-subpath__context {
color: color-mix(in srgb, var(--color-primary) 80%, #f1f5ff 20%);
}
.wizard-subsection {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.wizard-subsection:first-of-type {
margin-top: 0;
}
.wizard-subsection__title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-muted);
}
.wizard-subsection__body {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.wizard-subsection__list {
margin: 0;
/* ============================================
CATEGORIZED NAVIGATION
============================================ */
.wizard-category {
margin-bottom: var(--space-6);
}
.wizard-category:last-child {
margin-bottom: 0;
}
.wizard-category__title {
margin: 0 0 var(--space-3) 0;
padding: 0 var(--space-4);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
}
.wizard-step-number {
font-weight: 700;
color: var(--color-primary);
font-size: var(--font-size-sm);
min-width: 24px;
}
.wizard-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-left: var(--space-2);
vertical-align: middle;
line-height: 1;
}
.wizard-badge--optional {
background: var(--color-info-light);
color: var(--color-info);
border: 1px solid var(--color-info-border);
}
.wizard-badge--advanced {
background: var(--color-warning-light);
color: var(--color-warning);
border: 1px solid var(--color-warning-border);
}
.wizard-badge--recommended {
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid var(--color-success-border);
}
/* ============================================
DISTRIBUTION PROGRESSIVE DISCLOSURE (INLINE)
============================================ */
.distribution-inline-panel {
margin-top: var(--space-3);
margin-left: var(--space-8);
margin-bottom: var(--space-4);
padding: var(--space-4);
background: var(--color-surface-alt);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
animation: slideDown 0.25s ease-out;
overflow: hidden;
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
/* PERFORMANCE: Removed will-change - only needed for continuous animations */
}
.distribution-inline-panel.collapsing {
opacity: 0;
transform: scaleY(0);
transform-origin: top;
pointer-events: none;
}
@media (max-width: 600px) {
.distribution-inline-panel {
margin-left: var(--space-4);
}
}
/* GPU-accelerated slide animation using transform instead of max-height */
@keyframes slideDown {
from {
opacity: 0;
transform: scaleY(0.8) translateY(-10px);
transform-origin: top;
}
to {
opacity: 1;
transform: scaleY(1) translateY(0);
transform-origin: top;
}
}
/* Field Messages */
.field-message {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
line-height: 1.5;
display: flex;
align-items: center;
gap: var(--space-3);
justify-content: space-between;
}
.field-message--info {
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
color: var(--color-muted);
}
.field-message p {
margin: 0;
flex: 1;
}
.field-message button {
flex-shrink: 0;
}
padding-left: 1.25rem;
display: grid;
gap: var(--space-2xs);
list-style: disc;
color: var(--color-muted);
font-size: var(--font-size-sm);
}
.wizard-subsection__hint {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-muted);
}
.wizard-subsection--panel {
border-radius: var(--radius-lg);
border: 1px solid color-mix(in srgb, var(--color-border) 70%, rgba(74, 110, 255, 0.18) 30%);
padding: clamp(var(--space-md), 3vw, var(--space-lg));
background: color-mix(in srgb, var(--color-surface) 92%, rgba(255, 255, 255, 0.18) 8%);
box-shadow: 0 14px 32px hsla(215, 52%, 12%, 0.18);
display: grid;
gap: clamp(var(--space-md), 2vw, var(--space-lg));
}
.wizard-subsection--panel.is-disabled {
opacity: 0.55;
}
.wizard-anchor-highlight {
outline: 2px solid var(--color-focus);
outline-offset: 6px;
border-radius: var(--radius-md);
}
.wizard-path__item:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.wizard-path__item:hover,
.wizard-path__item:focus-visible {
border-color: color-mix(in srgb, var(--color-primary) 65%, #7aa7ff 35%);
background: linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 88%, rgba(70, 102, 196, 0.18) 12%), color-mix(in srgb, var(--color-surface-alt) 60%, rgba(40, 82, 178, 0.4) 40%));
color: color-mix(in srgb, var(--color-primary) 75%, #f7fbff 25%);
box-shadow: 0 18px 42px hsla(215, 78%, 26%, 0.38);
}
.wizard-step {
font-weight: 600;
font-size: var(--font-size-sm);
color: color-mix(in srgb, var(--color-text) 90%, #15213d 10%);
transition: color var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) var(--transition-easing);
}
.wizard-path__item.is-active,
.wizard-path__item[aria-current="step"] {
background: linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 86%, rgba(74, 110, 255, 0.22) 14%), color-mix(in srgb, var(--color-surface-alt) 56%, rgba(40, 82, 178, 0.48) 44%));
border-color: color-mix(in srgb, var(--color-primary) 80%, #9dc1ff 20%);
color: color-mix(in srgb, var(--color-primary) 75%, #f4f8ff 25%);
box-shadow: 0 20px 48px hsla(215, 80%, 32%, 0.45);
}
.wizard-path__item.is-active::before,
.wizard-path__item[aria-current="step"]::before {
background: color-mix(in srgb, var(--color-primary) 85%, #ffffff 15%);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 25%, rgba(74, 110, 255, 0.2) 75%), 0 0 18px rgba(74, 110, 255, 0.35);
}
.wizard-path__item.is-complete {
border-color: color-mix(in srgb, var(--color-primary) 65%, #7aa7ff 35%);
background: linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 88%, rgba(64, 110, 220, 0.16) 12%), color-mix(in srgb, var(--color-surface-alt) 62%, rgba(28, 56, 126, 0.38) 38%));
box-shadow: 0 16px 40px hsla(215, 74%, 26%, 0.34);
}
.wizard-path__item.is-complete::before {
background: color-mix(in srgb, var(--color-primary) 45%, rgba(255, 255, 255, 0.35) 55%);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-border) 28%, rgba(74, 110, 255, 0.18) 72%);
}
.wizard-path__item.is-future .wizard-step {
opacity: 0.55;
color: color-mix(in srgb, var(--color-muted) 78%, #8090c2 22%);
}
.wizard-path__item.is-complete .wizard-step,
.wizard-path__item.is-active .wizard-step,
.wizard-path__item[aria-current="step"] .wizard-step {
color: var(--color-text);
opacity: 1;
}
.wizard-path__pill {
margin-left: auto;
}
/* Apple Minimal Pill Badges */
.wizard-sidebar .pill {
min-width: auto;
padding: 3px 8px;
border-radius: 4px;
background: transparent;
border: none;
color: var(--sidebar-text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: none;
}
.wizard-sidebar .pill.valid {
background: transparent;
border: none;
color: #34C759;
}
.wizard-sidebar .pill.invalid {
background: transparent;
border: none;
color: #FF3B30;
}
.wizard-sidebar .pill.pending {
background: transparent;
border: none;
color: #8E8E93;
}
/* Explicit dark mode overrides for Apple colors */
html[data-theme='dark'] .wizard-sidebar .pill {
color: #86868B;
}
html[data-theme='dark'] .wizard-sidebar .pill.valid {
color: #30D158;
}
html[data-theme='dark'] .wizard-sidebar .pill.invalid {
color: #FF453A;
}
html[data-theme='dark'] .wizard-sidebar .pill.pending {
color: #98989D;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 3.5rem;
height: auto;
padding: 4px 12px;
border-radius: var(--radius-xl);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.01em;
background: var(--color-silver);
background: rgba(160, 174, 192, 0.1);
color: var(--color-silver);
border: 1px solid rgba(160, 174, 192, 0.3);
line-height: 1.4;
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.pill::before {
content: "·";
font-size: 1.2em;
line-height: 1;
}
.pill.valid {
background: #D1FAE5;
border-color: #10B981;
color: #047857;
font-weight: 600;
}
.pill.valid::before {
content: "✓";
font-weight: 700;
}
.pill.invalid {
background: #FEE2E2;
border-color: #EF4444;
color: #DC2626;
font-weight: 600;
}
.pill.invalid::before {
content: "✕";
font-weight: 700;
}
.pill.pending {
background: rgba(142, 142, 147, 0.1);
border-color: rgba(142, 142, 147, 0.3);
color: #8E8E93;
font-weight: 500;
}
.pill.pending::before {
content: "–";
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .pill {
background: rgba(100, 116, 139, 0.15);
border-color: rgba(100, 116, 139, 0.3);
color: var(--color-silver);
}
html:not([data-theme='light']) .pill.valid {
background: var(--color-success-light);
border-color: var(--color-success-border);
color: var(--color-success);
}
html:not([data-theme='light']) .pill.invalid {
background: var(--color-error-light);
border-color: var(--color-error-border);
color: var(--color-error);
}
html:not([data-theme='light']) .pill.pending {
background: rgba(152, 152, 157, 0.15);
border-color: rgba(152, 152, 157, 0.3);
color: #98989D;
}
/* Dark mode Apple minimal pills */
html:not([data-theme='light']) .wizard-sidebar .pill {
background: transparent;
border: none;
color: #86868B;
}
html:not([data-theme='light']) .wizard-sidebar .pill.valid {
background: transparent;
color: #30D158;
}
html:not([data-theme='light']) .wizard-sidebar .pill.invalid {
background: transparent;
color: #FF453A;
}
html:not([data-theme='light']) .wizard-sidebar .pill.pending {
background: transparent;
color: #98989D;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.wizard-screen {
transition: none;
transform: none;
}
.wizard-option,
.wizard-button {
transition: none;
}
}
html,
body {
/* Removed height: 100% to allow content to expand beyond viewport */
min-height: 100%;
/* MOBILE FIX: Prevent horizontal overflow */
overflow-x: hidden;
width: 100%;
max-width: 100vw;
/* iOS momentum scrolling for main page */
-webkit-overflow-scrolling: touch;
/* Scroll anchoring to prevent content jumps */
overflow-anchor: auto;
}
* {
box-sizing: border-box;
}
/* Safety rule: ensure [hidden] attribute always hides elements */
[hidden] {
display: none !important;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--color-text);
background-color: var(--color-background);
font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
display: block;
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL HEADER - Fixed navigation bar (Dash docs style)
═══════════════════════════════════════════════════════════════════ */
:root {
--header-bg: rgba(10, 10, 14, 0.65);
--header-bg-gradient: linear-gradient(135deg, rgba(20, 20, 30, 0.7) 0%, rgba(10, 10, 14, 0.6) 100%);
--header-border: rgba(255, 255, 255, 0.12);
--header-glow: rgba(0, 141, 228, 0.08);
}
html[data-theme='light'] {
--header-bg: rgba(255, 255, 255, 0.65);
--header-bg-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.65) 100%);
--header-border: rgba(0, 0, 0, 0.08);
--header-glow: rgba(0, 141, 228, 0.05);
}
.global-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
background: var(--header-bg-gradient);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--header-border);
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.1),
0 1px 0 var(--header-glow) inset;
z-index: 1000;
transition: all 0.3s ease;
}
/* Left Section: Brand */
.global-header__left {
display: flex;
align-items: center;
flex-shrink: 0;
}
.global-header__brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--color-text);
transition: opacity 0.2s ease;
}
.global-header__brand:hover {
opacity: 0.8;
}
.global-header__logo {
width: 36px;
height: 36px;
border-radius: 8px;
}
.global-header__title {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Center Section: Navigation */
.global-header__nav {
display: flex;
align-items: center;
gap: 4px;
}
.global-header__link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
transition: all 0.2s ease;
}
.global-header__link:hover {
background: var(--color-bg-tertiary);
color: var(--color-text);
}
.global-header__link--active {
background: rgba(0, 141, 228, 0.12);
color: var(--color-primary);
}
.global-header__link--active:hover {
background: rgba(0, 141, 228, 0.18);
}
.global-header__link-icon {
flex-shrink: 0;
opacity: 0.9;
}
/* Right Section: Actions */
.global-header__right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Theme Toggle */
.global-header__theme-toggle {
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
background: var(--color-bg-tertiary);
border-radius: 8px;
}
.global-header__theme-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.global-header__theme-btn:hover {
background: var(--color-bg-secondary);
color: var(--color-text);
}
.global-header__theme-btn--active {
background: var(--color-surface);
color: var(--color-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Reset Button */
.global-header__reset {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.global-header__reset:hover {
background: var(--color-bg-tertiary);
color: var(--color-text);
border-color: var(--color-text-secondary);
}
/* Register Button (CTA) */
.global-header__register-wrapper {
position: relative;
}
.global-header__register {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, var(--color-primary), #0066cc);
color: white;
border: none;
border-radius: 8px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 141, 228, 0.3);
}
.global-header__register:hover {
background: linear-gradient(135deg, #009aff, #0077dd);
box-shadow: 0 4px 12px rgba(0, 141, 228, 0.4);
transform: translateY(-1px);
}
.global-header__register:active {
transform: translateY(0);
}
/* Register Dropdown */
.register-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 320px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
z-index: 1001;
overflow: hidden;
animation: dropdown-enter 0.2s ease;
}
@keyframes dropdown-enter {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.register-dropdown__header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
}
.register-dropdown__icon {
color: var(--color-warning);
flex-shrink: 0;
}
.register-dropdown__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.register-dropdown__list {
list-style: none;
margin: 0;
padding: 8px;
}
.register-dropdown__link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s ease;
}
.register-dropdown__link:hover {
background: var(--color-bg-tertiary);
}
.register-dropdown__step-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
}
.register-dropdown__step-issue {
font-size: 0.8125rem;
color: var(--color-warning);
}
/* Hide header when body has landing-visible or hub-visible class */
body.landing-visible .global-header,
body.hub-visible .global-header {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Hide wizard shell when landing page or hub page is shown */
body.landing-visible .wizard-shell,
body.hub-visible .wizard-shell {
display: none !important;
opacity: 0;
pointer-events: none !important;
visibility: hidden !important;
}
/* Hide mobile nav drawer when on landing/hub pages */
body.landing-visible .mobile-nav-drawer,
body.hub-visible .mobile-nav-drawer {
display: none !important;
pointer-events: none !important;
}
.wizard-shell {
display: flex;
align-items: flex-start; /* Changed from stretch to flex-start for natural content flow */
min-height: calc(100vh - var(--header-height));
margin-top: var(--header-height);
/* Removed max-height: 100vh to allow content to expand beyond viewport */
width: 100%;
flex: 1 1 auto;
padding-left: var(--sidebar-width);
/* Changed overflow: hidden to visible to allow natural scrolling */
overflow: visible;
position: relative;
z-index: 1;
}
.wizard-sidebar {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--header-height));
padding: 0;
background: var(--sidebar-bg);
/* PERFORMANCE: Removed backdrop-filter blur - causes repaint on every scroll frame */
border-right: 1px solid var(--sidebar-border);
box-shadow: none;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin !important; /* Firefox: thin scrollbar */
scrollbar-color: #0A84FF transparent !important; /* Firefox: thumb track (Apple blue) */
scrollbar-gutter: stable;
z-index: 10;
overscroll-behavior: contain;
/* GPU acceleration for smooth 60fps scrolling */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: scroll-position;
contain: layout style;
/* iOS momentum scrolling */
-webkit-overflow-scrolling: touch;
/* Scroll anchoring to prevent content jumps */
overflow-anchor: auto;
}
/* Enhanced fade gradient on right edge */
.wizard-sidebar::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--guide-collapsed-width);
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.05) 30%,
rgba(255, 255, 255, 0.15) 70%,
rgba(255, 255, 255, 0.25) 100%
);
pointer-events: none;
z-index: 1;
}
/* Dark mode fade gradient (unified) */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-sidebar::after {
background: linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.1) 30%,
rgba(0, 0, 0, 0.25) 70%,
rgba(0, 0, 0, 0.4) 100%
);
}
}
/* Sidebar Sections */
.sidebar-section {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
height: 100%;
direction: ltr; /* Restore normal text flow */
}
.sidebar-section[hidden] {
display: none;
}
.wizard-sidebar::-webkit-scrollbar {
width: 6px !important;
}
.wizard-sidebar::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
margin: 4px 0;
}
.wizard-sidebar::-webkit-scrollbar-thumb {
background: #3B9EFF !important;
border-radius: 3px;
transition: all 0.2s ease;
}
.wizard-sidebar::-webkit-scrollbar-thumb:hover {
background: #60AFFF !important;
}
.wizard-sidebar::-webkit-scrollbar-thumb:active {
background: #0E76FD !important;
}
/* Dark mode scrollbar (Apple blue) */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-sidebar {
scrollbar-color: #0A84FF transparent; /* Firefox dark mode (Apple blue) */
}
html:not([data-theme='light']) .wizard-sidebar::-webkit-scrollbar-track {
background: transparent;
}
html:not([data-theme='light']) .wizard-sidebar::-webkit-scrollbar-thumb {
background: #0A84FF !important;
}
html:not([data-theme='light']) .wizard-sidebar::-webkit-scrollbar-thumb:hover {
background: #2997FF !important;
}
html:not([data-theme='light']) .wizard-sidebar::-webkit-scrollbar-thumb:active {
background: #0071E3 !important;
}
}
/* Hide sidebar header, search, progress, and footer - moved to global header */
.wizard-sidebar__header,
.wizard-sidebar__search,
.wizard-progress,
.wizard-sidebar__footer {
display: none !important;
}
/* Hide Publish section with registration - moved to header CTA */
.wizard-nav-section:has([data-step="registration"]) {
display: none !important;
}
/* Add sidebar navigation header label */
.wizard-nav::before {
content: 'Navigation';
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sidebar-text-muted);
opacity: 0.8;
padding: 0 12px 12px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 12px;
}
.wizard-sidebar__header {
position: relative; /* For auto-save indicator positioning */
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px 10px;
background: transparent;
border-bottom: none;
direction: ltr; /* Restore normal text flow */
}
/* Brand Styling */
.brand {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
padding: 0;
border: none;
background: transparent;
text-align: left;
cursor: default;
user-select: none;
pointer-events: none;
}
/* Reset button in header */
.header-reset-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--sidebar-text-muted);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
flex-shrink: 0;
margin-left: auto;
}
.header-reset-btn:hover {
color: #dc2626;
background: rgba(220, 38, 38, 0.08);
}
.header-reset-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.header-reset-btn svg {
flex-shrink: 0;
}
.brand__icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sidebar-icon);
border-radius: 8px;
padding: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .brand__icon {
background: var(--color-primary);
}
}
.brand__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.brand__title {
font-size: 18px;
font-weight: 700;
color: var(--sidebar-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Search Bar */
.wizard-sidebar__search {
position: relative;
padding: 0 16px;
margin-bottom: 20px;
display: none; /* Hidden to save space */
}
.wizard-sidebar__search .search-icon {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
color: var(--sidebar-search-icon);
pointer-events: none;
width: 18px;
height: 18px;
}
.wizard-sidebar__search-input {
width: 100%;
padding: 10px 12px 10px 40px;
background: var(--sidebar-search-bg);
border: 1px solid var(--sidebar-search-border);
border-radius: 10px;
color: var(--sidebar-text);
font-size: 14px;
outline: none;
transition: all 0.2s ease;
}
.wizard-sidebar__search-input::placeholder {
color: var(--sidebar-text-muted);
}
.wizard-sidebar__search-input:focus {
background: var(--sidebar-hover);
border-color: var(--sidebar-border);
}
/* P2: Progress Indicator */
.wizard-progress {
position: relative;
padding: 12px;
margin: 0 12px 8px;
background: var(--sidebar-hover);
border-radius: 8px;
overflow: hidden;
}
.wizard-progress__content {
transition: opacity 0.25s ease;
}
.wizard-progress__saved {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #34C759;
font-size: 13px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.wizard-progress--saving .wizard-progress__content {
opacity: 0;
}
.wizard-progress--saving .wizard-progress__saved {
opacity: 1;
}
.wizard-progress__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.wizard-progress__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sidebar-text-muted);
}
.wizard-progress__text {
font-size: 12px;
font-weight: 600;
color: var(--sidebar-text);
transition: color 0.3s ease;
}
.wizard-progress__bar {
height: 4px;
background: var(--sidebar-border);
border-radius: 2px;
overflow: hidden;
}
.wizard-progress__fill {
height: 100%;
background: linear-gradient(90deg, #34C759, #30D158);
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Progress complete state */
.wizard-progress--complete .wizard-progress__text {
color: #34C759;
}
.wizard-progress--complete .wizard-progress__fill {
background: linear-gradient(90deg, #34C759, #30D158);
box-shadow: 0 0 8px rgba(52, 199, 89, 0.4);
}
/* Dark mode adjustments */
html[data-theme='dark'] .wizard-progress__fill {
background: linear-gradient(90deg, #30D158, #32DE84);
}
html[data-theme='dark'] .wizard-progress--complete .wizard-progress__text {
color: #30D158;
}
/* Navigation */
.wizard-nav {
flex: 1;
padding: 16px 12px 12px;
overflow-y: auto;
}
.wizard-nav__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sidebar-text-muted);
opacity: 0.8;
padding: 12px 12px 8px;
margin-top: 8px;
}
.wizard-nav__label:first-child {
margin-top: 0;
}
/* Navigation Sections */
.wizard-nav-section {
margin-bottom: 12px;
}
/* Navigation Items - Apple Minimal Style */
.wizard-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
margin-bottom: 2px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--sidebar-text);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
text-align: left;
cursor: pointer;
transition: all 200ms var(--apple-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.wizard-nav-item:hover {
background: var(--sidebar-hover);
}
.wizard-nav-item[aria-current="step"],
.wizard-nav-item.wizard-nav-item--active {
background: var(--sidebar-active);
color: var(--sidebar-active-text, var(--sidebar-text));
}
.wizard-nav-item__icon {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--sidebar-icon);
transition: all 200ms var(--apple-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.wizard-nav-item[aria-current="step"] .wizard-nav-item__icon,
.wizard-nav-item.wizard-nav-item--active .wizard-nav-item__icon {
color: var(--sidebar-active-text, var(--sidebar-icon));
}
.wizard-nav-item__text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wizard-nav-item__chevron {
flex-shrink: 0;
width: 10px;
height: 10px;
color: var(--sidebar-text-muted);
opacity: 0.6;
transition: all 200ms var(--apple-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.wizard-nav-item:hover .wizard-nav-item__chevron {
opacity: 0.8;
}
.wizard-nav-item--expandable[aria-expanded="true"] .wizard-nav-item__chevron {
transform: rotate(90deg);
color: var(--sidebar-active-text, var(--sidebar-text-muted));
opacity: 1;
}
/* Sub-navigation - Apple Minimal Style */
.wizard-nav-submenu {
margin-left: 32px;
margin-bottom: 4px;
padding-left: 12px;
border-left: 1px solid var(--sidebar-border);
}
.wizard-nav-submenu[hidden] {
display: none;
}
.wizard-nav-subitem {
position: relative;
display: flex;
align-items: center;
padding: 8px 12px;
margin-bottom: 2px;
border-radius: 6px;
color: var(--sidebar-text-muted);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.01em;
text-decoration: none;
transition: all 200ms var(--apple-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.wizard-nav-subitem:hover {
background: var(--sidebar-hover);
color: var(--sidebar-text);
}
.wizard-nav-subitem--active,
.wizard-nav-subitem.is-active,
.wizard-nav-subitem[aria-current="page"] {
background: var(--sidebar-active);
color: var(--sidebar-active-text, var(--sidebar-text));
font-weight: 500;
}
/* Subtle left accent for active substep */
.wizard-nav-subitem.is-active::before,
.wizard-nav-subitem[aria-current="page"]::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 50%;
background: var(--sidebar-active-text, #007AFF);
border-radius: 0 1px 1px 0;
}
.wizard-nav-subitem__text {
flex: 1;
}
/* Update badges for sidebar */
.wizard-nav-item .wizard-badge {
font-size: 9px;
padding: 3px 7px;
background: var(--sidebar-badge-bg);
color: var(--sidebar-badge-text);
border: 1px solid var(--sidebar-badge-bg);
margin-left: 0;
border-radius: 6px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Apple minimal path pills */
.wizard-nav-item .wizard-path__pill {
margin-left: auto;
font-size: 11px;
font-weight: 500;
min-width: auto;
height: auto;
padding: 3px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--sidebar-text-muted);
border-radius: 4px;
border: none;
}
/* Template-recommended substep highlighting */
.wizard-nav-subitem--template-recommended {
position: relative;
background: color-mix(in srgb, var(--color-success, #34c759) 10%, transparent);
border-left: 3px solid var(--color-success, #34c759);
}
.wizard-nav-subitem--template-recommended:hover {
background: color-mix(in srgb, var(--color-success, #34c759) 16%, transparent);
}
/* Template badge for recommended substeps */
.template-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
margin-left: auto;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
background: color-mix(in srgb, var(--color-success, #34c759) 20%, transparent);
color: var(--color-success, #34c759);
border-radius: var(--radius-sm, 4px);
flex-shrink: 0;
}
/* Ensure subitem layout accommodates badge */
.wizard-nav-subitem {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Dark mode adjustments for template highlighting */
html[data-theme='dark'] .wizard-nav-subitem--template-recommended {
background: color-mix(in srgb, var(--color-success, #34c759) 12%, transparent);
}
html[data-theme='dark'] .template-badge {
background: color-mix(in srgb, var(--color-success, #34c759) 25%, transparent);
}
/* Modified indicator for template pill */
.pill--modified {
position: relative;
}
.pill--modified::after {
content: '*';
position: absolute;
top: -2px;
right: -4px;
font-size: 0.75rem;
color: var(--color-warning, #ff9500);
font-weight: bold;
}
/* ===========================================
FEATURE ENABLED BADGE (Inline on substeps)
=========================================== */
.feature-enabled-badge {
font-size: 0.5625rem;
padding: 2px 5px;
margin-left: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
background: color-mix(in srgb, var(--color-success, #34c759) 20%, transparent);
color: var(--color-success, #34c759);
border-radius: var(--radius-sm, 4px);
flex-shrink: 0;
animation: badgeFadeIn 0.3s ease;
}
@keyframes badgeFadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Light mode */
html[data-theme='light'] .feature-enabled-badge {
background: color-mix(in srgb, var(--color-success, #34c759) 15%, transparent);
}
.wizard-sidebar__footer {
padding: 16px 12px 20px;
border-top: 1px solid var(--sidebar-border);
background: transparent;
position: relative;
z-index: 5;
}
.wizard-sidebar__footer .wizard-nav-item {
padding: 10px 12px;
margin-bottom: 8px;
position: relative;
z-index: 5;
pointer-events: auto;
}
.wizard-sidebar .wizard-path {
padding-left: clamp(calc(var(--space-lg) * 0.9), 2.6vw, calc(var(--space-xl) * 0.9));
position: relative;
z-index: 1;
padding-bottom: clamp(160px, 18vh, 220px);
overflow: visible;
}
.theme-toggle-box {
width: 100%;
padding: 0;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
pointer-events: auto;
}
.wizard-sidebar .theme-toggle {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.wizard-sidebar .theme-toggle__options {
width: 100%;
justify-content: space-between;
gap: 6px;
flex-wrap: wrap;
}
.wizard-sidebar .theme-toggle__label {
color: var(--sidebar-text-muted);
font-weight: 500;
font-size: 11px;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.8;
}
.wizard-sidebar .theme-toggle__option {
flex: 1 1 calc(33.33% - 6px);
min-width: var(--guide-collapsed-width);
min-height: 36px;
padding: 0 8px;
border-radius: 8px;
border: 1px solid var(--sidebar-border);
background: var(--sidebar-search-bg);
color: var(--sidebar-text-muted);
font-size: 13px;
box-shadow: none;
transition: all 0.15s ease;
}
.wizard-sidebar .theme-toggle__option:hover,
.wizard-sidebar .theme-toggle__option:focus-visible {
border-color: var(--sidebar-border);
background: var(--sidebar-hover);
color: var(--sidebar-text);
}
.wizard-sidebar .theme-toggle__option.theme-toggle__option--active {
background: var(--sidebar-active);
border-color: var(--sidebar-border);
color: var(--sidebar-text);
font-weight: 600;
}
.wizard-content {
min-width: 0;
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
width: 100%;
/* Reserve space on the right for info/guide panel (380px + 30px margin + 30px spacing) */
max-width: calc(100% - 440px);
margin-right: 440px;
transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Removed min-height: 0 to allow natural content expansion */
}
/* When panel is collapsed, recenter content */
body.guide-panel-collapsed .wizard-content {
max-width: calc(100% - 90px); /* Just space for collapsed button (60px + margins) */
margin-right: 90px;
}
/* On smaller screens, use full width */
@media (max-width: 1400px) {
.wizard-content {
max-width: 100%;
margin-right: 0;
}
body.guide-panel-collapsed .wizard-content {
max-width: 100%;
margin-right: 0;
}
}
/* Wizard Tabs - Hidden, functionality moved to global header */
.wizard-tabs {
display: none !important;
gap: 8px;
margin-bottom: 16px;
margin-left: 200px;
margin-right: auto;
padding: 6px;
background: var(--color-smoke);
border-radius: 12px;
width: fit-content;
max-width: 100%;
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dynamic recentering for tabs when guide panel collapses */
body.guide-panel-collapsed .wizard-tabs {
margin-left: auto;
margin-right: auto;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-tabs {
background: var(--color-surface-alt);
}
}
.wizard-tab {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--color-slate);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.wizard-tab:hover {
background: rgba(14, 118, 253, 0.08);
color: var(--color-primary);
}
.wizard-tab--active {
background: var(--color-surface);
color: var(--color-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-tab--active {
background: var(--color-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2);
}
}
.wizard-tab__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.wizard-tab:hover .wizard-tab__icon,
.wizard-tab--active .wizard-tab__icon {
opacity: 1;
}
.wizard-tab__text {
font-weight: 500;
}
.wizard-tab--active .wizard-tab__text {
font-weight: 600;
}
/* Responsive tabs */
@media (max-width: 600px) {
.wizard-tabs {
width: 100%;
justify-content: space-between;
gap: 4px;
padding: 4px;
}
.wizard-tab {
flex: 1;
padding: 10px 12px;
gap: 8px;
font-size: 14px;
}
.wizard-tab__icon {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.wizard-tab__text {
display: none;
}
.wizard-tab {
justify-content: center;
padding: 12px;
}
}
/* ========================================
Wizard Progress Indicator - Compact Vertical Steps
======================================== */
.wizard-progress-compact {
padding: var(--space-4) var(--space-3);
margin: 0 var(--space-4) var(--space-4);
position: relative;
}
/* Steps Container with Connecting Line */
.wizard-progress-compact__steps {
display: flex;
flex-direction: column;
gap: var(--space-4);
position: relative;
padding-left: var(--space-2);
}
/* Vertical connecting line between dots */
.wizard-progress-compact__steps::before {
content: '';
position: absolute;
left: 15px;
top: 12px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg,
var(--color-border) 0%,
var(--color-border) 100%
);
z-index: 0;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-progress-compact__steps::before {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.1) 100%
);
}
}
/* Individual Step Button */
.wizard-progress-compact__step {
display: flex;
align-items: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
position: relative;
z-index: 1;
transition: all 0.2s ease;
}
.wizard-progress-compact__step:disabled {
cursor: not-allowed;
}
.wizard-progress-compact__step:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-full);
}
/* Step Dot/Circle */
.wizard-progress-compact__dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--sidebar-bg-solid);
border: 2px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--color-silver);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
/* PERFORMANCE: Removed will-change - hover only, not continuous */
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-progress-compact__dot {
background: var(--color-surface);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
/* Disabled/Future Step */
.wizard-progress-compact__step:disabled .wizard-progress-compact__dot {
opacity: 0.4;
border-color: var(--color-border);
}
/* Step-specific accent colors */
.wizard-progress-compact__step[data-step="naming"] {
--step-accent: var(--step-1-color);
--step-accent-rgb: 99, 102, 241;
}
.wizard-progress-compact__step[data-step="permissions"] {
--step-accent: var(--step-2-color);
--step-accent-rgb: 139, 92, 246;
}
.wizard-progress-compact__step[data-step="distribution"] {
--step-accent: var(--step-3-color);
--step-accent-rgb: 236, 72, 153;
}
.wizard-progress-compact__step[data-step="advanced"] {
--step-accent: var(--step-4-color);
--step-accent-rgb: 245, 158, 11;
}
.wizard-progress-compact__step[data-step="registration"] {
--step-accent: var(--step-5-color);
--step-accent-rgb: 16, 185, 129;
}
/* Current Step - Glowing effect with accent color */
.wizard-progress-compact__step[data-current="true"] .wizard-progress-compact__dot {
background: var(--step-accent);
border-color: var(--step-accent);
color: white;
transform: scale(1.15);
box-shadow:
0 0 0 4px rgba(var(--step-accent-rgb), 0.15),
0 0 12px rgba(var(--step-accent-rgb), 0.4),
0 4px 12px rgba(0, 0, 0, 0.15);
position: relative;
}
/* GPU-accelerated pulse glow using pseudo-element with opacity animation */
.wizard-progress-compact__step[data-current="true"] .wizard-progress-compact__dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
box-shadow:
0 0 0 4px rgba(var(--step-accent-rgb), 0.25),
0 0 20px rgba(var(--step-accent-rgb), 0.6);
opacity: 0;
animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
pointer-events: none;
will-change: opacity;
}
/* Pulsing glow animation - GPU-accelerated opacity instead of box-shadow */
@keyframes pulseGlow {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
/* Completed Step - Success green with checkmark */
.wizard-progress-compact__step[data-completed="true"] .wizard-progress-compact__dot {
background: var(--color-success);
border-color: var(--color-success);
color: white;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
/* Checkmark for completed steps */
.wizard-progress-compact__step[data-completed="true"] .wizard-progress-compact__dot::before {
content: '✓';
font-size: 13px;
font-weight: 700;
}
/* Hide number when completed */
.wizard-progress-compact__step[data-completed="true"] .wizard-progress-compact__dot {
font-size: 0;
}
.wizard-progress-compact__step[data-completed="true"] .wizard-progress-compact__dot::before {
font-size: 13px;
}
/* Hover effect for enabled steps */
.wizard-progress-compact__step:not(:disabled):hover .wizard-progress-compact__dot {
transform: scale(1.1);
border-color: var(--step-accent);
box-shadow: 0 0 0 3px rgba(var(--step-accent-rgb), 0.1);
}
/* Don't apply hover to current step (already scaled) */
.wizard-progress-compact__step[data-current="true"]:hover .wizard-progress-compact__dot {
transform: scale(1.15);
}
/* Responsive: Hide on mobile */
@media (max-width: 900px) {
.wizard-progress-compact {
display: none;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.wizard-progress-compact__dot {
transition: none;
animation: none;
transform: none !important;
}
.wizard-progress-compact__step[data-current="true"] .wizard-progress-compact__dot {
animation: none;
}
}
.theme-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-left: 0;
flex-wrap: wrap;
}
.theme-toggle__label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.theme-toggle__options {
display: flex;
gap: var(--space-xs);
}
.theme-toggle__option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 var(--space-sm);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-duration) var(--transition-easing),
background-color var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing);
}
.theme-toggle__option input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.theme-toggle__option span {
pointer-events: none;
}
.theme-toggle__option input:focus-visible + span {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.theme-toggle__option:hover,
.theme-toggle__option:focus-visible {
border-color: var(--color-primary);
color: var(--color-text);
box-shadow: 0 8px 20px hsla(210, 94%, 26%, 0.12);
}
.theme-toggle__option--active {
border-color: transparent;
background: var(--color-primary);
color: #fff;
box-shadow: 0 12px 28px hsla(210, 94%, 32%, 0.25);
}
@media (max-width: 720px) {
.theme-toggle {
order: 3;
width: 100%;
justify-content: flex-start;
}
.theme-toggle__options {
width: 100%;
justify-content: flex-start;
}
}
.brand {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: default;
user-select: none;
}
.brand__logo {
width: 40px;
height: 40px;
border-radius: 0.75rem;
}
.brand__title {
font-weight: 600;
font-size: var(--font-size-md);
}
.wizard-main {
flex: 1 1 auto;
min-width: 0;
width: 100%;
/* Removed min-height: 0 to allow content to expand naturally */
max-width: 1200px;
margin: 0 auto;
padding: clamp(var(--space-lg), 4vw, var(--space-xl)) var(--page-gutter);
padding-bottom: calc(clamp(var(--space-lg), 4vw, var(--space-xl)) + env(safe-area-inset-bottom, 0px));
padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(var(--space-lg), 3vw, var(--space-xl));
background: var(--color-background);
/* Removed overflow-y: auto to fix excessive scrolling - let body handle scroll naturally */
}
.wizard-screen {
/* Always use flex display - never change to 'none' */
display: none !important;
flex-direction: column;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
border-radius: var(--radius-lg);
border: none;
padding: 0;
}
.wizard-screen--active {
/* Active screen is visible and controls container height */
display: flex !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
/* T1 animation removed - caused guide panel positioning issues */
}
/* Remove conflicting rules - no longer needed */
/* .wizard-screen[hidden] and forced display:none rules removed */
.wizard-screen__inner {
flex: 1;
width: 100%;
max-width: var(--content-max-width);
min-width: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-6);
padding: var(--space-6);
padding-bottom: calc(80px + var(--space-6));
background: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
box-shadow:
0 0 60px rgba(0, 212, 255, 0.15),
0 0 120px rgba(139, 92, 246, 0.1),
0 0 180px rgba(236, 72, 153, 0.05);
transition: box-shadow 0.3s ease;
box-sizing: border-box;
}
/* Light mode content area */
html[data-theme='light'] .wizard-screen__inner {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 0 60px rgba(0, 212, 255, 0.1),
0 0 120px rgba(139, 92, 246, 0.08),
0 0 180px rgba(236, 72, 153, 0.03);
}
/* Force consistent width for all screens */
.wizard-screen__inner * {
box-sizing: border-box;
}
/* Welcome Screen */
.wizard-shell[data-active-step="welcome"] .wizard-sidebar {
display: none;
}
.wizard-shell[data-active-step="welcome"] {
padding-left: 0;
}
.wizard-screen__inner--centered {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.welcome-container {
width: 100%;
max-width: 1200px;
text-align: center;
padding: var(--space-8) 0;
}
.welcome-title {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
line-height: 1.1;
background: linear-gradient(135deg, #0E76FD 0%, #6366F1 50%, #10B981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
html[data-theme='light'] .welcome-title {
background: linear-gradient(135deg, #5B4FCF 0%, #0E76FD 50%, #059669 100%);
-webkit-background-clip: text;
background-clip: text;
}
.welcome-subtitle {
font-size: clamp(1.125rem, 2vw, 1.375rem);
color: var(--color-text-secondary);
margin: 0 0 var(--space-8);
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.template-selection {
margin-top: var(--space-6);
}
.template-selection__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
margin: 0 0 var(--space-2);
color: var(--color-text-primary);
}
.template-selection__description {
font-size: 1rem;
color: var(--color-text-secondary);
margin: 0 0 var(--space-6);
}
.template-grid {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-6);
}
.template-grid__featured {
width: 100%;
}
.template-grid__compact {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) {
.template-grid__compact {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.template-grid__compact {
grid-template-columns: 1fr;
}
}
/* ===========================================
PREMIUM DARK TEMPLATE CARDS
=========================================== */
.template-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-6);
background: linear-gradient(145deg, #1A1D23 0%, #13151A 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
text-align: left;
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
contain: layout paint;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
/* Ambient glow layer */
.template-card::before {
content: '';
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
background: radial-gradient(
circle at 30% 30%,
var(--card-glow, rgba(99, 102, 241, 0.15)) 0%,
transparent 50%
);
opacity: 0;
transition: opacity 0.3s ease-out;
pointer-events: none;
}
/* Pattern overlay */
.template-card::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--card-pattern);
background-size: var(--pattern-size, 30px 30px);
opacity: 0.03;
transition: opacity 0.25s ease-out;
pointer-events: none;
}
.template-card:hover {
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
/* PERFORMANCE: Removed will-change - applied by browser during hover */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
0 0 40px var(--card-glow, rgba(99, 102, 241, 0.15));
}
.template-card:hover::before {
opacity: 1;
}
.template-card:hover::after {
opacity: 0.06;
}
.template-card:active {
transform: translateY(-2px);
}
.template-card:focus-visible {
outline: 2px solid var(--accent-color, #6366F1);
outline-offset: 2px;
}
/* Selected template card */
.template-card--selected {
border-color: var(--accent-color, #6366F1);
border-width: 2px;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent-color, #6366F1) 20%, transparent),
0 12px 40px rgba(0, 0, 0, 0.5);
}
.template-card--selected::before {
opacity: 1;
}
/* ===========================================
TEMPLATE-SPECIFIC PATTERNS & COLORS
=========================================== */
/* Scratch - Dots Grid (Indigo) */
.template-card[data-template="scratch"] {
--card-glow: rgba(99, 102, 241, 0.25);
--card-pattern: radial-gradient(circle, rgba(99, 102, 241, 0.8) 1px, transparent 1px);
--pattern-size: 20px 20px;
--accent-color: #6366F1;
}
/* Simple Fixed - Diagonal Lines (Emerald) */
.template-card[data-template="simple-fixed"] {
--card-glow: rgba(16, 185, 129, 0.25);
--card-pattern: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(16, 185, 129, 0.5) 10px,
rgba(16, 185, 129, 0.5) 11px
);
--pattern-size: 100% 100%;
--accent-color: #10B981;
}
/* Utility - Hexagon Mesh (Amber) */
.template-card[data-template="utility"] {
--card-glow: rgba(245, 158, 11, 0.25);
--card-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23F59E0B' fill-opacity='0.6' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E");
--pattern-size: 28px 49px;
--accent-color: #F59E0B;
}
/* Reward - Concentric Circles (Pink) */
.template-card[data-template="reward"] {
--card-glow: rgba(236, 72, 153, 0.25);
--card-pattern: radial-gradient(
circle at center,
transparent 0%,
transparent 30%,
rgba(236, 72, 153, 0.4) 30%,
rgba(236, 72, 153, 0.4) 32%,
transparent 32%,
transparent 60%,
rgba(236, 72, 153, 0.3) 60%,
rgba(236, 72, 153, 0.3) 62%,
transparent 62%
);
--pattern-size: 60px 60px;
--accent-color: #EC4899;
}
/* ===========================================
TEMPLATE-SPECIFIC ACCENT COLORS
=========================================== */
[data-template="scratch"] { --accent-color: #6366F1; }
[data-template="simple-fixed"] { --accent-color: #10B981; }
[data-template="utility"] { --accent-color: #F59E0B; }
[data-template="reward"] { --accent-color: #F43F5E; }
/* ===========================================
ICON CONTAINER WITH GLOW
=========================================== */
.template-card__icon {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
transition: transform 0.25s ease-out, border-color 0.25s ease-out;
z-index: 1;
}
.template-card__icon::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, var(--accent-color, #6366F1), transparent);
opacity: 0;
z-index: -1;
transition: opacity 0.25s ease-out;
}
.template-card:hover .template-card__icon {
transform: scale(1.05);
border-color: var(--accent-color, #6366F1);
}
.template-card:hover .template-card__icon::after {
opacity: 0.5;
}
.template-card__icon svg {
width: 28px;
height: 28px;
fill: var(--accent-color, #6366F1);
transition: fill 0.25s ease-out;
}
/* ===========================================
FEATURED CARD MODIFIER
=========================================== */
.template-card--featured {
flex-direction: row;
align-items: center;
padding: var(--space-8);
border: 1px solid rgba(99, 102, 241, 0.3);
background: linear-gradient(145deg, #1E2128 0%, #15171C 100%);
}
.template-card--featured .template-card__icon {
width: 72px;
height: 72px;
flex-shrink: 0;
}
.template-card--featured .template-card__icon svg {
width: 36px;
height: 36px;
}
.template-card--featured .template-card__content {
flex: 1;
padding: 0 var(--space-6);
}
.template-card--featured .template-card__title {
font-size: 1.5rem;
}
.template-card--featured .template-card__preview {
flex-shrink: 0;
width: 220px;
margin-left: auto;
padding-left: var(--space-6);
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
.template-card--featured {
flex-direction: column;
align-items: flex-start;
}
.template-card--featured .template-card__content {
padding: var(--space-4) 0;
}
.template-card--featured .template-card__preview {
width: 100%;
margin-left: 0;
padding-left: 0;
padding-top: var(--space-4);
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* ===========================================
COMPACT CARD MODIFIER
=========================================== */
.template-card--compact {
padding: var(--space-5);
gap: var(--space-3);
content-visibility: auto;
contain-intrinsic-size: auto 140px;
}
.template-card--compact .template-card__icon {
width: 48px;
height: 48px;
}
.template-card--compact .template-card__icon svg {
width: 24px;
height: 24px;
}
.template-card--compact .template-card__title {
font-size: 1.1rem;
}
.template-card--compact .template-card__description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.875rem;
}
.template-card--compact .template-card__preview {
display: none;
}
.template-card--compact .time-estimate {
display: none;
}
/* Simplified effects for compact cards - better performance */
.template-card--compact::before {
display: none;
}
.template-card--compact::after {
opacity: 0.02;
}
.template-card--compact:hover::after {
opacity: 0.04;
}
/* ===========================================
TYPOGRAPHY - PREMIUM DARK
=========================================== */
.template-card__content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
z-index: 1;
}
.template-card__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
color: #FFFFFF;
letter-spacing: -0.02em;
}
.template-card__description {
font-size: 0.9375rem;
margin: 0;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
.template-card__specs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
/* ===========================================
SPEC BADGES WITH GLOW
=========================================== */
.spec-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
transition: all 0.2s ease;
}
.spec-badge:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-color, #6366F1);
color: var(--accent-color, #6366F1);
box-shadow: 0 0 12px var(--accent-color, rgba(99, 102, 241, 0.3));
}
/* ===========================================
DIFFICULTY BADGES WITH ACCENT GLOW
=========================================== */
.difficulty-badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;
backdrop-filter: blur(8px);
transition: all 0.2s ease;
z-index: 2;
}
.difficulty-badge--beginner {
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.4);
color: #22C55E;
box-shadow: 0 0 16px rgba(34, 197, 94, 0.2);
}
.difficulty-badge--intermediate {
background: rgba(234, 179, 8, 0.15);
border: 1px solid rgba(234, 179, 8, 0.4);
color: #EAB308;
box-shadow: 0 0 16px rgba(234, 179, 8, 0.2);
}
.difficulty-badge--advanced {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #EF4444;
box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}
/* ===========================================
TIME ESTIMATE - PREMIUM DARK
=========================================== */
.time-estimate {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.time-estimate::before {
content: "⏱";
font-size: 1rem;
}
/* ===========================================
PREVIEW REVEAL ANIMATION
=========================================== */
.template-card__preview {
margin-top: var(--space-3);
padding: var(--space-4);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
max-height: 0;
opacity: 0;
overflow: hidden;
position: relative;
z-index: 1;
transition:
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease 0.1s,
margin-top 0.3s ease;
}
.template-card:hover .template-card__preview {
max-height: 180px;
opacity: 1;
margin-top: var(--space-4);
}
.template-card__preview-title {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 var(--space-2) 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.template-card__preview-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.template-card__preview-item {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
line-height: 1.4;
}
.template-card__preview-label {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.template-card__preview-value {
color: var(--accent-color, #6366F1);
font-weight: 600;
text-align: right;
}
/* ===========================================
CARD ENTRANCE ANIMATION
=========================================== */
@keyframes cardReveal {
from {
opacity: 0;
transform: translateY(24px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.template-card {
animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.template-card:nth-child(1) {
animation-delay: 0.05s;
}
.template-card:nth-child(2) {
animation-delay: 0.1s;
}
.template-card:nth-child(3) {
animation-delay: 0.15s;
}
.template-card:nth-child(4) {
animation-delay: 0.2s;
}
/* Enhanced Selection State - Premium Dark */
.template-card[aria-pressed="true"],
.template-card.selected {
border-color: var(--accent-color, #6366F1);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent-color, #6366F1) 20%, transparent),
0 12px 40px rgba(0, 0, 0, 0.5),
0 0 60px var(--card-glow, rgba(99, 102, 241, 0.15));
transform: translateY(-4px);
}
.template-card[aria-pressed="true"]::before,
.template-card.selected::before {
opacity: 1;
}
.template-card[aria-pressed="true"] .template-card__icon,
.template-card.selected .template-card__icon {
border-color: var(--accent-color, #6366F1);
transform: scale(1.05);
}
.template-card[aria-pressed="true"] .template-card__icon::after,
.template-card.selected .template-card__icon::after {
opacity: 0.5;
}
/* Difficulty Badge Pulse on Hover */
.template-card:hover .difficulty-badge {
transform: scale(1.05);
}
/* Time Estimate Icon Animation */
@keyframes tickTock {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
.template-card:hover .time-estimate::before {
display: inline-block;
animation: tickTock 1s ease-in-out infinite;
}
/* ===========================================
REDUCED MOTION SUPPORT
=========================================== */
@media (prefers-reduced-motion: reduce) {
.template-card {
animation: none;
}
.template-card,
.template-card__icon,
.template-card__preview,
.template-card::before,
.template-card::after {
transition: none;
}
.template-card:hover .time-estimate::before {
animation: none;
}
}
@media (max-width: 768px) {
.template-grid {
grid-template-columns: 1fr;
}
.welcome-title {
font-size: 2rem;
}
.template-selection__title {
font-size: 1.5rem;
}
}
/* ===========================================
TEMPLATE SUPPLY QUICK CONFIG - PREMIUM DARK
=========================================== */
.template-supply-config {
margin-top: var(--space-5);
padding: var(--space-5);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
}
.template-supply-config__title {
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 var(--space-2) 0;
color: #FFFFFF;
}
.template-supply-config__hint {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 var(--space-4) 0;
}
.template-supply-config__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
}
/* Dark inputs for supply config */
.template-supply-config .wizard-field__input {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #FFFFFF;
}
.template-supply-config .wizard-field__input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.template-supply-config .wizard-field__input:focus {
border-color: var(--modal-accent, #0E76FD);
box-shadow: 0 0 0 3px rgba(14, 118, 253, 0.2);
}
.template-supply-config .wizard-field__label {
color: rgba(255, 255, 255, 0.8);
}
.template-supply-config .wizard-field__hint {
color: rgba(255, 255, 255, 0.4);
}
/* Live preview with animation */
.template-supply-config__preview {
margin-top: var(--space-4);
padding: var(--space-4);
background: linear-gradient(135deg,
rgba(14, 118, 253, 0.1) 0%,
rgba(14, 118, 253, 0.05) 100%
);
border: 1px solid rgba(14, 118, 253, 0.2);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.template-supply-config .preview-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
.template-supply-config .preview-value {
font-size: 1.125rem;
font-weight: 700;
color: #0E76FD;
font-variant-numeric: tabular-nums;
transition: all 0.3s ease;
}
/* Animate on value change */
.template-supply-config .preview-value.updating {
transform: scale(1.05);
color: #00D4FF;
}
/* Card-based layout system */
.form-card {
background: rgba(28, 28, 30, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
box-shadow: var(--shadow-xs);
/* Changed from 'transition: all' to specific properties to prevent layout glitches with position:fixed buttons */
transition: box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
box-sizing: border-box;
}
/* Light mode form cards - warm style */
html[data-theme='light'] .form-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(120, 100, 80, 0.1);
box-shadow: 0 2px 8px rgba(120, 100, 80, 0.06);
}
html[data-theme='light'] .form-card:hover {
box-shadow: 0 4px 16px rgba(120, 100, 80, 0.1);
border-color: rgba(120, 100, 80, 0.15);
}
html[data-theme='light'] .form-card__title {
color: #1A1F36;
}
html[data-theme='light'] .form-card__description {
color: #64748B;
}
.form-card:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-border-strong);
}
/* Focus-within state for keyboard navigation accessibility */
.form-card:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}
.form-card__header {
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-2);
}
.form-card__title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-ink);
margin: 0;
}
.form-card__description {
font-size: var(--text-sm);
color: var(--color-muted);
margin: var(--space-2) 0 0 0;
line-height: 1.5;
}
.form-card__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.form-card__footer {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
margin-top: var(--space-2);
display: flex;
gap: var(--space-3);
justify-content: flex-end;
}
/* Compact card variant */
.form-card--compact {
padding: var(--space-4);
gap: var(--space-3);
}
/* Highlighted card variant */
.form-card--highlight {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
/* Error card variant */
.form-card--error {
border-color: var(--color-error);
background: var(--color-error-light);
}
/* Optional card variant - visual distinction for non-required fields */
.form-card--optional {
border-left: 3px solid var(--color-info);
background: color-mix(in srgb, rgba(28, 28, 30, 0.85) 97%, var(--color-info) 3%);
}
html[data-theme='light'] .form-card--optional {
background: color-mix(in srgb, rgba(255, 255, 255, 0.85) 97%, var(--color-info) 3%);
}
/* Optional field label styling */
.field-group--optional .wizard-field__label {
color: var(--color-slate);
}
.field-group--optional .wizard-field__label::after {
content: ' (optional)';
font-weight: 400;
font-size: var(--text-xs);
color: var(--color-silver);
}
/* Export Options */
.export-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-background);
transition: all 0.2s ease;
}
.export-option:hover {
border-color: var(--color-primary);
background: var(--color-surface);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.export-option + .export-option {
margin-top: var(--space-4);
}
.export-option__header {
display: flex;
align-items: flex-start;
gap: var(--space-3);
flex: 1;
}
.export-option__icon {
flex-shrink: 0;
color: var(--color-primary);
}
.export-option__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-1) 0;
}
.export-option__description {
font-size: 0.875rem;
color: var(--color-text-muted);
margin: 0;
line-height: 1.5;
}
/* Grid layout for cards */
.form-card-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.form-card-grid--2col {
grid-template-columns: repeat(2, 1fr);
}
}
/* Field group within cards */
.field-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Label color change on focus-within for better UX */
.field-group:focus-within .wizard-field__label {
color: var(--color-primary);
transition: color 150ms ease;
}
/* Fade placeholder on focus */
.wizard-field__input:focus::placeholder {
opacity: 0.5;
transition: opacity 150ms ease;
}
/* Configuration Overview */
.config-overview {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.config-overview__item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-3);
background: var(--color-bg-secondary);
border-radius: var(--radius-sm);
gap: var(--space-4);
}
.config-overview__label {
font-weight: 500;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.config-overview__value {
font-weight: 600;
color: var(--color-text-primary);
text-align: right;
word-break: break-word;
}
.field-group--row {
flex-direction: row;
align-items: center;
gap: var(--space-3);
}
.field-hint {
font-size: var(--font-size-sm);
color: var(--color-muted);
line-height: 1.5;
margin: 0;
}
.field-hint code {
background: var(--color-bg-tertiary);
padding: 2px 6px;
border-radius: var(--radius-xs);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
font-size: 0.9em;
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}
.field-hint ul {
list-style-type: disc;
}
.field-hint li {
margin-bottom: var(--space-1);
}
/* Supply Mode Selector */
.supply-mode-selector {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-3);
padding: var(--space-3);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.supply-mode-selector[hidden] {
display: none;
}
/* Supply Conversion Display */
.supply-conversion {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-top: var(--space-2);
padding: var(--space-3);
background: var(--color-info-light);
border-left: 3px solid var(--color-info);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
}
.supply-conversion[hidden] {
display: none;
}
.supply-conversion__label {
color: var(--color-muted);
font-weight: 500;
}
.supply-conversion__value {
color: var(--color-text);
font-weight: 600;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}
.supply-conversion__unit {
color: var(--color-muted);
font-size: 0.9em;
}
@media (max-width: 767px) {
.field-group--row {
flex-direction: column;
align-items: stretch;
}
.supply-mode-selector {
flex-direction: column;
gap: var(--space-2);
}
}
.wizard-form {
display: flex;
flex-direction: column;
gap: clamp(var(--space-lg), 2vw, var(--space-xl));
flex: 1;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
position: static;
}
.wizard-form--narrow {
max-width: var(--content-max-width);
align-self: center;
}
.wizard-screen__title {
font-size: clamp(1.75rem, 1.5vw + 1.4rem, 2.25rem);
margin: 0;
text-align: left;
line-height: 1.15;
align-self: stretch;
max-width: 100%;
}
.wizard-screen__subtitle {
margin: 0 0 var(--space-lg);
color: var(--color-muted);
max-width: 100%;
text-align: left;
}
.wizard-screen__body {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text);
line-height: 1.6;
}
.wizard-screen__body--muted {
color: var(--color-muted);
}
.wizard-field__label-row {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-2xs);
}
.wizard-info-trigger {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-alt);
color: var(--color-muted);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: border-color var(--transition-duration) var(--transition-easing),
background-color var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing);
}
.wizard-info-trigger:focus-visible,
.wizard-info-trigger:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-surface);
outline: none;
}
.wizard-info-trigger[aria-expanded="true"] {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-surface);
}
.wizard-info-trigger__icon {
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
}
.wizard-info-panel {
margin: 0 0 var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-left: 3px solid var(--color-border);
background: var(--color-surface-alt);
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.wizard-info-panel[hidden] {
display: none;
}
.wizard-info-panel__body {
margin: 0;
}
.wizard-group-sheet {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-xl));
}
.wizard-group-sheet__summary,
.wizard-group-card__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
cursor: pointer;
list-style: none;
font-weight: 600;
}
.wizard-group-sheet__summary {
padding: 0;
}
.wizard-group-sheet__summary::-webkit-details-marker,
.wizard-group-card__summary::-webkit-details-marker {
display: none;
}
.wizard-group-sheet__indicator,
.wizard-group-card__summary-indicator {
width: 12px;
height: 12px;
border-right: 2px solid var(--color-muted);
border-bottom: 2px solid var(--color-muted);
transform: rotate(45deg);
transition: transform var(--transition-duration) var(--transition-easing),
border-color var(--transition-duration) var(--transition-easing);
}
.wizard-group-sheet[open] .wizard-group-sheet__indicator,
.wizard-group-card[open] .wizard-group-card__summary-indicator {
transform: rotate(225deg);
border-color: var(--color-primary);
}
.wizard-group-sheet__body {
display: grid;
gap: var(--space-lg);
margin-top: var(--space-md);
}
.wizard-group-list {
display: grid;
gap: var(--space-md);
}
.wizard-group-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.wizard-group-card + .wizard-group-card {
margin-top: var(--space-md);
}
.wizard-group-card__summary {
padding: var(--space-md);
}
.wizard-group-card__title {
font-weight: 600;
margin: 0;
}
.wizard-group-card__badge {
display: inline-flex;
align-items: center;
padding: 0 var(--space-2xs);
border-radius: var(--radius-sm);
background: var(--color-primary);
color: #fff;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wizard-group-card__body {
display: grid;
gap: var(--space-lg);
padding: 0 var(--space-md) var(--space-lg);
border-top: 1px solid var(--color-border);
}
.wizard-group-card__required-power {
max-width: 180px;
}
.wizard-group-card__members {
display: grid;
gap: var(--space-sm);
}
.wizard-group-card__members .wizard-button {
justify-self: flex-start;
margin-top: var(--space-xs);
}
.wizard-group-card__members-title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
}
.wizard-group-card__members-list {
display: grid;
gap: var(--space-sm);
}
.wizard-group-card__members-list > .wizard-subsection__hint {
margin: 0;
}
.wizard-group-card__member-row {
display: grid;
grid-template-columns: auto minmax(0, 2fr) minmax(160px, 1fr) max-content;
gap: var(--space-sm);
align-items: center;
}
.wizard-group-card__member-label {
font-weight: 600;
}
.wizard-group-card__member-select {
width: 100%;
}
.wizard-group-card__member-power-field {
display: grid;
gap: var(--space-2xs);
}
.wizard-group-card__member-power-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-muted);
}
.wizard-group-card__member-power {
width: 100%;
max-width: 140px;
}
.wizard-group-card__member-actions,
.wizard-group-card__actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
flex-wrap: wrap;
}
.wizard-group-card--primary {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.wizard-group-controls {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.wizard-field__inline {
display: grid;
gap: var(--space-xs);
align-items: flex-start;
}
.wizard-field__input--condensed {
max-width: 140px;
}
.wizard-field__label--secondary {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-muted);
}
.wizard-field--stacked {
display: grid;
gap: var(--space-2xs);
margin-top: var(--space-sm);
}
.wizard-group-list {
display: grid;
gap: var(--space-md);
margin-top: var(--space-lg);
}
#wizard-permissions-group .wizard-actions {
margin-top: var(--space-lg);
}
.wizard-screen__help {
margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
color: var(--color-muted);
font-size: var(--font-size-sm);
}
.wizard-link {
color: var(--color-primary);
text-decoration: underline;
}
.wizard-link:focus,
.wizard-link:hover {
color: var(--color-primary-dark);
}
.wizard-hint {
margin: var(--space-sm) 0;
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.registration-methods {
display: grid;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.registration-methods__title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-muted);
}
.registration-methods__options {
gap: var(--space-md);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.registration-panel {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: clamp(var(--space-md), 2vw, var(--space-lg));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: none;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
.registration-panel pre {
max-width: 100%;
overflow-x: auto;
word-wrap: break-word;
white-space: pre-wrap;
box-sizing: border-box;
margin: 0;
}
.registration-panel .form-card {
box-sizing: border-box;
max-width: 100%;
margin: 0;
width: 100%;
}
.registration-panel .form-card__body {
box-sizing: border-box;
max-width: 100%;
}
.registration-panel .wizard-json {
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
.registration-panel .wizard-json__code {
box-sizing: border-box;
max-width: 100%;
overflow-x: auto;
word-wrap: break-word;
}
.registration-panel button {
box-sizing: border-box;
}
.registration-panel .wizard-inline {
box-sizing: border-box;
max-width: 100%;
}
.registration-panel + .registration-panel {
margin-top: var(--space-lg);
}
.registration-panel__title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-muted);
}
.registration-panel[hidden] {
display: none;
}
.wallet-insights {
display: grid;
gap: var(--space-xs);
margin: var(--space-md) 0 var(--space-sm);
padding: 0;
}
.wallet-insights__item {
display: grid;
gap: var(--space-2xs);
}
.wallet-insights__label {
margin: 0;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-muted);
}
.wallet-insights__value {
margin: 0;
font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
word-break: break-all;
}
.registration-self-warning {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-lg);
align-items: flex-start;
}
.registration-self-warning .wizard-button {
justify-self: start;
}
.wizard-inline {
display: flex;
gap: var(--space-sm);
align-items: center;
margin: var(--space-sm) 0;
}
.wizard-field {
display: grid;
gap: var(--space-xs);
margin: 0;
}
.localization-section {
margin-top: var(--space-xl);
padding: clamp(var(--space-md), 3vw, var(--space-lg));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
display: flex;
flex-direction: column;
gap: clamp(var(--space-md), 2vw, var(--space-lg));
box-shadow: none;
}
.localization-section__header {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.localization-section__lead {
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.localization-empty {
display: flex;
justify-content: flex-end;
margin-left: auto;
}
.localization-empty:empty {
display: none;
}
.localization-empty[hidden] {
display: none;
}
.localization-empty .wizard-button {
padding-inline: clamp(var(--space-sm), 2vw, var(--space-lg));
}
.localization-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.localization-wrapper[hidden] {
display: none;
}
.localization-section__list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.localization-section__message {
min-height: 1.25rem;
color: var(--color-muted);
font-size: var(--font-size-xs);
}
@media (min-width: 480px) {
.localization-section__header {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.localization-empty {
justify-content: flex-end;
align-self: flex-end;
margin-top: calc(-1 * var(--space-sm));
}
}
.localization-row {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
padding: clamp(var(--space-md), 2vw, var(--space-lg));
display: flex;
flex-direction: column;
gap: var(--space-md);
box-shadow: none;
/* I7: Localization row add/remove animation */
animation: locRowEnter 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
/* PERFORMANCE: Removed will-change - one-time animation */
}
/* I7: Localization row entrance animation */
/* GPU-accelerated localization row animation */
@keyframes locRowEnter {
from {
opacity: 0;
transform: translateY(-10px) scaleY(0.95);
}
to {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
/* I7: Localization row exit animation */
.localization-row--removing {
animation: locRowExit 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes locRowExit {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
}
.localization-row__header {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-sm);
align-items: start;
}
.localization-row__field--code {
flex: 1;
}
.localization-row__fields {
display: grid;
gap: var(--space-md);
padding: var(--space-4);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
margin-top: var(--space-2);
}
.localization-row__fields[hidden] {
display: none;
}
.localization-row__grid {
display: grid;
gap: var(--space-md);
}
.localization-row__checkbox .wizard-checkbox__label {
white-space: normal;
}
@media (min-width: 600px) {
.localization-section {
gap: var(--space-lg);
}
.localization-row__header {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--space-md);
}
.localization-row__checkbox .wizard-checkbox__label {
white-space: nowrap;
}
.localization-row__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Keywords & Description */
.keywords-preview {
padding: var(--space-4);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.keywords-tag-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.keyword-tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px 12px;
background: var(--color-primary);
color: var(--color-primary-contrast);
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
}
.keyword-tag--empty {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
font-style: italic;
}
@media (max-width: 480px) {
.keyword-tag {
font-size: 0.8125rem;
padding: 3px 10px;
}
}
.wizard-fieldset {
border: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wizard-fieldset > legend {
margin-bottom: var(--space-xs);
font-weight: 600;
}
.wizard-choice {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
min-height: 48px;
background: var(--color-surface-alt);
box-shadow: none;
cursor: pointer;
transition: border-color 150ms ease,
background-color 150ms ease,
box-shadow 150ms ease,
transform 100ms ease;
}
.wizard-choice__input {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.wizard-choice__content {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.wizard-choice__title {
font-weight: 600;
}
.wizard-choice__hint {
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.wizard-choice-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wizard-choice:hover,
.wizard-choice:focus-within {
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
transform: translateY(-1px);
}
.wizard-choice--selected,
.wizard-choice:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-primary-light);
box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xs);
}
.wizard-field--checkbox {
margin-bottom: 0;
}
.wizard-checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface-alt);
box-shadow: none;
cursor: pointer;
transition: border-color var(--transition-duration) var(--transition-easing),
background-color var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing);
}
.wizard-checkbox__input {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.wizard-checkbox__label {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
flex: 1;
}
.wizard-checkbox__title {
font-weight: 600;
}
.wizard-checkbox__hint {
color: var(--color-muted);
font-size: var(--font-size-xs);
font-weight: 400;
}
.wizard-checkbox:hover,
.wizard-checkbox:focus-within {
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.wizard-checkbox--checked {
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
/* I1: Animated checkbox checkmark */
.wizard-checkbox__input:checked + .wizard-checkbox__checkmark {
animation: checkboxBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wizard-checkbox__checkmark svg {
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset 0.25s ease-out;
}
.wizard-checkbox__input:checked + .wizard-checkbox__checkmark svg {
stroke-dashoffset: 0;
}
@keyframes checkboxBounce {
0% { transform: scale(0.8); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* I2: Radio button selection ring animation */
.wizard-radio__input:checked + .wizard-radio__dot::before {
animation: radioSelect 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes radioSelect {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.wizard-field__label {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
margin-bottom: var(--space-2);
display: block;
}
.wizard-field__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
padding: 12px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--color-smoke);
background: var(--color-surface);
color: var(--color-ink);
width: 100%;
min-height: 48px;
transition: all var(--transition-base);
box-shadow: none;
}
textarea.wizard-field__input {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
.wizard-field__input:focus-visible {
border: 2px solid var(--color-primary);
outline: none;
padding: 11px 15px;
box-shadow: 0 0 0 3px rgba(14, 118, 253, 0.15);
transition: border-color var(--duration-base) var(--ease-default),
box-shadow var(--duration-base) var(--ease-default),
background-color var(--duration-base) var(--ease-default);
}
/* Dark mode: Add subtle background highlight on focus for better visibility */
html[data-theme='dark'] .wizard-field__input:focus-visible {
background-color: rgba(14, 118, 253, 0.05);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-field__input:focus-visible {
background-color: rgba(14, 118, 253, 0.05);
}
}
.wizard-field__input:hover:not(:disabled):not(:focus-visible) {
border-color: var(--color-border-strong);
}
.wizard-field__input::placeholder {
color: var(--color-placeholder);
}
.wizard-field__input:disabled {
background: var(--color-smoke);
color: var(--color-muted);
cursor: not-allowed;
opacity: 0.6;
}
/* Apple-style Select Dropdowns */
select.wizard-field__input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--color-surface-alt);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868B' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px;
padding-right: 40px;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
font-weight: 400;
letter-spacing: 0.01em;
transition: all 200ms var(--apple-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
select.wizard-field__input:hover:not(:disabled):not(:focus) {
border-color: rgba(255, 255, 255, 0.25);
background-color: var(--color-surface);
}
select.wizard-field__input:focus,
select.wizard-field__input:focus-visible {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
background-color: var(--color-surface);
}
/* Light mode select adjustments */
html[data-theme='light'] select.wizard-field__input {
background-color: var(--color-surface);
border-color: rgba(0, 0, 0, 0.12);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868B' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
}
html[data-theme='light'] select.wizard-field__input:hover:not(:disabled):not(:focus) {
border-color: rgba(0, 0, 0, 0.2);
}
html[data-theme='light'] select.wizard-field__input:focus {
border-color: #007AFF;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
/* Dark mode select adjustments */
html[data-theme='dark'] select.wizard-field__input {
background-color: #2C2C2E;
border-color: rgba(255, 255, 255, 0.12);
color: #F5F5F7;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989D' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
}
html[data-theme='dark'] select.wizard-field__input:hover:not(:disabled):not(:focus) {
border-color: rgba(255, 255, 255, 0.25);
background-color: #3A3A3C;
}
html[data-theme='dark'] select.wizard-field__input:focus {
border-color: #0A84FF;
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
background-color: #2C2C2E;
}
/* Select option styling (limited browser support) */
select.wizard-field__input option {
background-color: var(--color-surface);
color: var(--color-text);
padding: 10px 12px;
}
html[data-theme='dark'] select.wizard-field__input option {
background-color: #2C2C2E;
color: #F5F5F7;
}
/* Input validation states */
.wizard-field__input.is-valid {
border-color: var(--color-success);
}
.wizard-field__input.is-invalid {
border-color: var(--color-error);
}
/* Enhanced styling for perpetual distribution rule dropdowns */
#perpetual-perform-action,
#perpetual-change-rules {
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
padding: 14px 16px;
font-weight: 500;
cursor: pointer;
}
#perpetual-perform-action:hover:not(:disabled):not(:focus-visible),
#perpetual-change-rules:hover:not(:disabled):not(:focus-visible) {
border-color: var(--color-primary);
background: var(--color-surface);
}
#perpetual-perform-action:focus-visible,
#perpetual-change-rules:focus-visible {
border: 2px solid var(--color-primary);
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
padding: 13px 15px;
}
.wizard-field__message {
font-size: var(--font-size-xs);
min-height: 1.25em;
color: var(--color-primary-dark);
}
.wizard-status-banner {
margin: var(--space-sm) 0 0;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
background: transparent;
transition: background-color var(--transition-duration) var(--transition-easing),
color var(--transition-duration) var(--transition-easing);
}
.wizard-status-banner:empty {
display: none;
padding: 0;
}
.wizard-status-banner[data-status='loading'] {
color: var(--color-primary);
background-color: hsla(210, 94%, 92%, 0.6);
}
.wizard-status-banner[data-status='error'] {
color: #b00020;
background-color: rgba(176, 0, 32, 0.08);
}
.wizard-status-banner[data-status='success'] {
color: #1b5e20;
background-color: rgba(27, 94, 32, 0.08);
}
.wizard-status-banner[data-status='info'] {
color: var(--color-primary);
background-color: hsla(210, 94%, 92%, 0.4);
}
.wizard-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
align-items: center;
/* Removed flex-wrap to prevent button layout glitches */
margin-top: auto;
}
.wizard-actions--between {
justify-content: space-between;
}
.wizard-actions--end {
justify-content: flex-end;
}
.wizard-actions--sticky {
margin-top: 0 !important;
position: fixed !important;
bottom: 0 !important;
left: var(--sidebar-width) !important;
right: 440px !important; /* Space for expanded panel (380px + 60px margin) */
width: auto !important;
max-width: calc(1200px - var(--sidebar-width)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: var(--space-md) !important;
padding-left: calc(var(--space-md) + env(safe-area-inset-left, 0px)) !important;
padding-right: calc(var(--space-md) + env(safe-area-inset-right, 0px)) !important;
padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)) !important;
background: var(--color-background) !important;
border-top: 1px solid var(--color-border) !important;
box-shadow: var(--shadow-md) !important;
z-index: 1000 !important;
transform: none !important;
isolation: isolate !important; /* Create isolated stacking context for WebKit */
-webkit-font-smoothing: antialiased !important; /* WebKit rendering hint */
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* When panel is collapsed, expand action bar */
body.guide-panel-collapsed .wizard-actions--sticky {
right: 90px !important; /* Just space for collapsed button (60px + 30px margin) */
}
.wizard-button {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-weight: 600;
padding: 12px 24px;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
min-height: 44px;
min-width: 120px;
transition: all var(--transition-base);
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.wizard-button:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
animation: button-focus-pulse 0.3s ease-out;
}
@keyframes button-focus-pulse {
0% { box-shadow: 0 0 0 0 rgba(14, 118, 253, 0.4); }
100% { box-shadow: 0 0 0 4px rgba(14, 118, 253, 0); }
}
.wizard-button--primary {
background: var(--color-primary);
color: #ffffff;
border: none;
}
.wizard-button--primary:hover:not(:disabled) {
background: var(--color-primary-dark);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.wizard-button--primary:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform 50ms ease-out, box-shadow 50ms ease-out;
}
.wizard-button--secondary {
background: var(--color-surface);
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.wizard-button--secondary:hover:not(:disabled) {
background: var(--color-primary-light);
border-color: var(--color-primary-dark);
box-shadow: var(--shadow-xs);
}
.wizard-button--secondary:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
background: var(--color-primary-light);
transition: transform 50ms ease-out;
}
.wizard-button--danger {
background: #dc2626;
color: #ffffff;
border: none;
}
.wizard-button--danger:hover:not(:disabled) {
background: #b91c1c;
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.wizard-button--danger:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform 50ms ease-out, box-shadow 50ms ease-out;
}
.wizard-button--small {
padding: 8px 16px;
min-height: 36px;
min-width: 80px;
font-size: 0.875rem;
}
.wizard-button--text {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-primary);
padding: 6px 12px;
min-height: 32px;
min-width: auto;
font-size: 0.875rem;
}
.wizard-button--text:hover:not(:disabled) {
background: var(--color-bg-secondary);
border-color: var(--color-primary);
color: var(--color-primary);
}
.wizard-button:disabled,
.wizard-button[disabled] {
cursor: not-allowed;
opacity: 1 !important;
background: #E5E7EB !important;
color: #6B7280 !important;
border: 2px solid #D1D5DB !important;
box-shadow: none !important;
transform: none !important;
pointer-events: none;
}
/* Dark mode disabled button states - enhanced visibility */
html[data-theme='dark'] .wizard-button:disabled,
html[data-theme='dark'] .wizard-button[disabled] {
background: #2C2C2E !important;
color: #636366 !important;
border: 2px solid #3A3A3C !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .wizard-button:disabled,
html:not([data-theme='light']) .wizard-button[disabled] {
background: #2C2C2E !important;
color: #636366 !important;
border: 2px solid #3A3A3C !important;
}
}
.wizard-button--ghost {
background: transparent;
border: none;
color: var(--color-slate);
min-width: auto;
}
.wizard-button--ghost:hover:not(:disabled) {
background: var(--color-smoke);
color: var(--color-ink);
}
.wizard-options {
display: grid;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.wizard-option {
display: block;
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: clamp(var(--space-md), 2vw, var(--space-lg));
border: 1px solid var(--color-border);
cursor: pointer;
box-shadow: none;
transition: border-color var(--transition-duration) var(--transition-easing),
transform var(--transition-duration) var(--transition-easing),
box-shadow var(--transition-duration) var(--transition-easing),
background-color var(--transition-duration) var(--transition-easing);
}
.wizard-option__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.wizard-option__body {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wizard-option__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-sm);
}
.wizard-option__title {
font-size: var(--font-size-md);
font-weight: 600;
}
.wizard-option__description {
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.wizard-option__check {
width: 1.5rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: 2px solid var(--color-primary);
display: grid;
place-items: center;
flex: 0 0 auto;
font-size: 0.9rem;
font-weight: 700;
color: var(--color-primary);
background: hsla(210, 94%, 54%, 0.15);
opacity: 0;
transition: opacity var(--transition-duration) ease;
}
.wizard-option__check::before {
content: '✓';
}
.wizard-option:focus-within,
.wizard-option:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.wizard-option--selected {
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.wizard-option--selected .wizard-option__check {
opacity: 1;
}
.wizard-json {
border-top: 1px solid var(--color-border);
padding-top: var(--space-lg);
margin-top: var(--space-lg);
display: grid;
gap: var(--space-md);
}
.wizard-json__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.wizard-json__code {
margin: 0;
padding: var(--space-md);
background: var(--color-surface-alt);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
overflow-x: auto;
overflow-y: auto;
max-height: 400px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.wizard-warning {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background: rgba(255, 169, 77, 0.15);
border: 1px solid rgba(255, 169, 77, 0.3);
color: #aa5a12;
font-weight: 600;
margin-top: var(--space-md);
}
.wizard-warning__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
background: rgba(255, 169, 77, 0.4);
color: #aa5a12;
font-weight: 700;
}
@media (max-width: var(--bp-md)) {
.wizard-shell {
flex-direction: column;
padding-left: 0;
}
.wizard-sidebar {
position: static;
width: 100%;
min-height: auto;
border-right: none;
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-xs);
padding: clamp(var(--space-lg), 6vw, var(--space-xl)) clamp(var(--space-lg), 6vw, var(--space-xl)) var(--space-lg);
background: var(--color-surface);
overscroll-behavior: auto;
}
.wizard-sidebar__footer {
position: static;
bottom: auto;
margin-top: var(--space-md);
padding-top: var(--space-sm);
border-top: none;
background: transparent;
box-shadow: none;
pointer-events: auto;
}
.wizard-sidebar__header {
position: static;
padding: 0;
margin-bottom: var(--space-md);
background: transparent;
border-bottom: none;
box-shadow: none;
}
.wizard-sidebar::before {
display: none;
}
.wizard-path::before {
display: none;
}
.wizard-path__item {
padding-left: clamp(var(--space-md), 4vw, var(--space-lg));
}
.wizard-path__item::before {
left: var(--space-sm);
}
.theme-toggle-box {
position: static;
width: 100%;
backdrop-filter: none;
box-shadow: var(--shadow-xs);
}
.wizard-sidebar .wizard-path {
padding-left: 0;
}
.wizard-sidebar .wizard-subpath {
padding-left: var(--space-md);
}
.wizard-path {
gap: var(--space-sm);
}
.wizard-main {
min-height: auto;
align-items: stretch;
padding-top: clamp(var(--space-lg), 8vw, var(--space-xl));
}
}
@media (max-width: 900px) {
.wizard-header__inner {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
'brand theme'
'nav nav';
row-gap: var(--space-sm);
}
.header-left {
justify-self: start;
}
.header-center {
justify-self: stretch;
}
.header-right {
justify-self: end;
}
.wizard-group-card__member-row {
grid-template-columns: auto minmax(0, 1fr) minmax(160px, auto);
}
.wizard-group-card__member-actions {
grid-column: 2 / -1;
justify-content: flex-start;
}
}
/* Tablet optimization (600px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
.wizard-screen__inner {
padding: var(--space-6);
}
.form-card {
padding: var(--space-5);
}
.wizard-button {
min-height: 48px;
padding: 14px 28px;
}
}
/* Mobile optimization (max-width: 600px) */
@media (max-width: 600px) {
.wizard-path {
gap: var(--space-xs);
}
.wizard-main {
align-items: stretch;
padding: var(--space-4);
padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.wizard-screen {
width: 100%;
border-radius: var(--radius-md);
}
.wizard-screen__inner {
max-width: none;
padding: var(--space-4);
gap: var(--space-4);
}
.wizard-screen__title {
font-size: clamp(1.5rem, 5vw, 1.75rem);
}
/* Better mobile spacing for cards */
.form-card {
padding: var(--space-4);
gap: var(--space-3);
}
.form-card__title {
font-size: var(--text-base);
}
.form-card__body {
gap: var(--space-3);
}
/* Improved touch targets for mobile */
.wizard-button {
min-height: 48px;
padding: 14px 20px;
font-size: 1rem;
}
.wizard-field__input {
min-height: 52px;
padding: 14px 16px;
font-size: 16px; /* Prevents zoom on iOS */
}
.wizard-checkbox__input {
min-width: 24px;
min-height: 24px;
}
/* Stack button groups on mobile */
.wizard-actions {
flex-direction: column-reverse;
gap: var(--space-3);
}
.wizard-actions .wizard-button {
width: 100%;
}
.wizard-group-card__member-row {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-xs);
}
.wizard-group-card__member-power {
max-width: 100%;
}
.wizard-group-card__member-power-field,
.wizard-group-card__member-actions {
width: 100%;
}
/* Mobile-friendly form layouts */
.field-group--row {
flex-direction: column;
}
}
/* Extra small mobile (max-width: 375px) - iPhone SE and similar */
@media (max-width: 375px) {
/* === PHASE 1: Global Overflow Prevention === */
.wizard-screen,
.wizard-screen__inner,
.form-card,
.form-card__body,
.registration-panel,
.template-grid,
.localization-row,
.authorization-group {
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.wizard-screen__title,
.form-card__title,
.wizard-field__label,
.template-card__title {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.wizard-screen__inner {
padding: var(--space-3);
}
.wizard-main {
padding: var(--space-3);
}
/* === PHASE 2: Template Card Fixes === */
.template-card {
padding: var(--space-4);
gap: var(--space-3);
}
.template-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.template-card__icon {
font-size: 2rem;
}
.template-card__title {
font-size: 1.125rem;
}
.template-card__description {
font-size: 0.875rem;
}
.template-card__specs {
gap: var(--space-1);
flex-wrap: wrap;
}
.template-card__spec {
font-size: 0.75rem;
padding: 2px 8px;
}
/* === PHASE 3: Localization Row Improvements === */
.localization-row {
padding: var(--space-3);
gap: var(--space-3);
}
.localization-row__header {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.localization-row__field--code {
width: 100%;
}
.localization-row__fields {
padding: var(--space-3);
gap: var(--space-3);
}
.localization-row__grid {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.localization-row .wizard-button--danger {
min-width: 44px;
min-height: 44px;
padding: var(--space-2);
}
.localization-empty .wizard-button {
width: 100%;
justify-content: center;
}
/* === PHASE 4: Form Field & Input Improvements === */
.form-card {
padding: var(--space-3);
border-radius: var(--radius-md);
}
.wizard-field__input,
input[type="text"],
input[type="number"],
select,
textarea {
min-height: 52px;
padding: 14px 12px;
font-size: 16px; /* Prevents iOS zoom */
}
.field-group {
margin-bottom: var(--space-4);
}
.wizard-field__label {
flex-wrap: wrap;
gap: var(--space-1);
}
.wizard-checkbox {
min-height: 44px;
padding: var(--space-2) 0;
}
.wizard-checkbox__input {
min-width: 24px;
min-height: 24px;
}
.wizard-checkbox__label {
font-size: 0.9375rem;
line-height: 1.4;
}
select.wizard-field__input {
padding-right: 36px;
background-position: right 12px center;
}
/* === PHASE 5: Authorization & Permission Groups === */
.authorization-group {
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.authorization-inline-panel,
.distribution-inline-panel {
margin-left: var(--space-3);
padding: var(--space-3);
}
.authorization-safeguards {
margin-top: var(--space-3);
padding-top: var(--space-3);
}
/* === PHASE 6: Button & Action Improvements === */
.wizard-button {
min-height: 48px;
padding: 12px 16px;
font-size: 0.9375rem;
}
.wizard-button--small {
min-height: 44px;
padding: 10px 14px;
}
.wizard-button--text {
min-height: 44px;
padding: 10px 12px;
}
.wizard-actions {
gap: var(--space-3);
}
.wizard-actions .wizard-button {
width: 100%;
text-align: center;
justify-content: center;
}
.wizard-actions--sticky {
padding: var(--space-3) var(--space-4);
left: 0 !important;
right: 0 !important;
}
/* === PHASE 7: Registration Panel === */
.registration-panel {
padding: var(--space-3);
gap: var(--space-3);
}
.registration-methods__options {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.registration-panel pre,
.wizard-json__code {
font-size: 0.75rem;
padding: var(--space-3);
}
/* === PHASE 8: Typography & Spacing === */
.wizard-screen__title {
font-size: 1.375rem;
line-height: 1.3;
margin-bottom: var(--space-3);
}
.wizard-screen__subtitle {
font-size: 0.9375rem;
line-height: 1.5;
}
.form-card__header {
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
}
.form-card__title {
font-size: 1rem;
}
.form-card__description {
font-size: 0.8125rem;
}
.wizard-field__hint,
.field-group__hint {
font-size: 0.75rem;
margin-top: var(--space-1);
}
.wizard-form {
gap: var(--space-4);
}
.form-card + .form-card {
margin-top: var(--space-3);
}
}
@media (max-width: 600px) {
.wizard-group-card__member-actions {
justify-content: flex-start;
}
.wizard-header__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
'brand'
'nav'
'theme';
row-gap: var(--space-sm);
justify-items: stretch;
}
.header-left,
.header-center,
.header-right {
width: 100%;
justify-self: stretch;
}
.header-left {
justify-content: flex-start;
}
.header-center,
.header-right {
justify-content: center;
}
.wizard-actions {
gap: var(--space-sm);
}
.wizard-actions--sticky {
padding: var(--space-sm) var(--space-md);
}
.theme-toggle {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.wizard-header__inner {
padding: var(--space-sm) clamp(16px, 6vw, 20px);
}
.brand {
gap: var(--space-xs);
}
.brand__logo {
width: 32px;
height: 32px;
}
.wizard-screen {
padding: var(--space-md);
}
.wizard-screen__title {
font-size: clamp(1.5rem, 4vw + 1.05rem, 2rem);
max-width: none;
}
.wizard-actions {
flex-direction: column;
align-items: stretch;
}
.wizard-button {
width: 100%;
}
.theme-toggle__options {
width: 100%;
justify-content: space-between;
}
.theme-toggle__option {
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
}
@media (max-width: 350px) {
.pill {
min-width: 2.5rem;
padding: 0 var(--space-2xs);
font-size: 0.7rem;
}
.brand__title {
font-size: clamp(0.95rem, 4vw, 1.05rem);
}
}
/* ==== BG-SMOOTH v4 (append-only, safe) ==== */
:root {
/* Light defaults */
--page-bg-start: hsl(220 20% 98%);
--page-bg-mid: hsl(220 16% 95%);
--page-bg-end: hsl(220 14% 92%);
/* Very subtle grain to prevent banding */
--page-bg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.006 0'/%3E%3C/filter%3E%3Crect width='24' height='24' filter='url(%23n)'/%3E%3C/svg%3E");
color-scheme: light dark; /* allow UA to adjust native widgets */
}
/* If user explicitly chose dark (Apple neutral black) */
html[data-theme="dark"] {
--page-bg-start: hsl(0 0% 11%); /* #1C1C1E */
--page-bg-mid: hsl(0 0% 7%); /* darker */
--page-bg-end: hsl(0 0% 0%); /* pure black */
}
/* Honor OS preference when not forced to light */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--page-bg-start: hsl(0 0% 11%);
--page-bg-mid: hsl(0 0% 7%);
--page-bg-end: hsl(0 0% 0%);
}
}
/* Page background spans the full scrollable document */
html,
body {
min-height: 100%;
/* Do NOT use background shorthand to avoid clobbering other props */
background-image:
var(--page-bg-noise),
linear-gradient(180deg,
var(--page-bg-start) 0%,
var(--page-bg-mid) 55%,
var(--page-bg-end) 100%);
background-repeat: repeat, no-repeat;
background-attachment: scroll, scroll; /* avoid fixed seams */
background-color: var(--page-bg-end); /* safe fallback */
}
/* Shell containers must be transparent so the page gradient shows through */
#wizard,
#wizard::before,
#wizard::after {
background: transparent;
background-image: none;
}
/* Note: .wizard-main, .wizard-container, and .wizard-screen removed from transparency rule
to prevent content bleed-through. Only the #wizard wrapper remains transparent. */
/* ==== BG-SMOOTH v4 END ==== */
/* ========================================
VALIDATION FEEDBACK STYLES
======================================== */
/* Valid input state - green border and checkmark */
.wizard-field__input--valid {
border-color: var(--color-success, #10b981) !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem 1.25rem;
padding-right: 2.75rem;
}
/* Error input state - red border and X mark */
.wizard-field__input--error {
border-color: var(--color-danger, #ef4444) !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem 1.25rem;
padding-right: 2.75rem;
}
/* T2: Error pulse animation for scroll-to-error */
.wizard-field__input--error-pulse {
animation: errorPulse 1.5s ease-out;
}
@keyframes errorPulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
25% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.3); }
50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
75% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
/* Success and danger colors for theme */
:root {
--color-success: #10b981;
--color-danger: #ef4444;
}
/* Dark theme adjustments */
html[data-theme="dark"] {
--color-success: #34d399;
--color-danger: #f87171;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--color-success: #34d399;
--color-danger: #f87171;
}
}
/* ========================================
DOCUMENT TYPES STYLES
======================================== */
/* Document Types List */
.document-types-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.document-type-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
background: var(--color-surface);
transition: border-color 0.2s ease;
}
.document-type-item:hover {
border-color: var(--color-border-strong);
}
.document-type-item__info {
flex: 1;
min-width: 0;
}
.document-type-item__name {
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-1);
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}
.document-type-item__schema {
font-size: 0.875rem;
color: var(--color-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}
.document-type-item__actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
margin-left: var(--space-4);
}
.document-type-item__btn {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
background: var(--color-white);
color: var(--color-muted);
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
}
.document-type-item__btn:hover {
border-color: var(--color-border-strong);
color: var(--color-text);
background: var(--color-smoke);
}
.document-type-item__btn--delete {
color: var(--color-error);
}
.document-type-item__btn--delete:hover {
background: var(--color-error-light);
border-color: var(--color-error-border);
}
/* Document Modal */
.document-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.document-modal[hidden] {
display: none;
}
.document-modal__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.document-modal__content {
position: relative;
z-index: 1;
background: var(--color-white);
border-radius: var(--border-radius-lg);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
width: 100%;
max-width: 700px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.document-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
}
.document-modal__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.document-modal__close {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--color-muted);
font-size: 1.5rem;
cursor: pointer;
border-radius: var(--border-radius-sm);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.document-modal__close:hover {
background: var(--color-smoke);
color: var(--color-text);
}
.document-modal__body {
padding: var(--space-6);
overflow-y: auto;
flex: 1;
}
.document-modal__footer {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
padding: var(--space-5) var(--space-6);
border-top: 1px solid var(--color-border);
}
/* Code input styling */
.wizard-field__input--code {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 0.875rem;
line-height: 1.5;
resize: vertical;
min-height: 300px;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
}
/* Dark theme adjustments */
html[data-theme="dark"] .document-type-item {
background: var(--color-surface);
border-color: var(--color-border);
}
html[data-theme="dark"] .document-modal__content {
background: var(--color-surface);
}
html[data-theme="dark"] .document-type-item__btn {
background: var(--color-surface-alt);
border-color: var(--color-border);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .document-type-item {
background: var(--color-surface);
border-color: var(--color-border);
}
html:not([data-theme="light"]) .document-modal__content {
background: var(--color-surface);
}
html:not([data-theme="light"]) .document-type-item__btn {
background: var(--color-surface-alt);
border-color: var(--color-border);
}
}
/* Mobile responsiveness */
@media (max-width: 600px) {
.document-modal__content {
max-width: 100%;
max-height: 100vh;
border-radius: 0;
}
.document-type-item {
flex-direction: column;
gap: var(--space-3);
}
.document-type-item__actions {
margin-left: 0;
width: 100%;
}
.document-type-item__btn {
flex: 1;
}
}
/* ========================================
TEMPLATE CONFIRMATION MODAL
======================================== */
/* Body scroll lock when modal is open */
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
/* top is set dynamically via JS to preserve scroll position */
}
/* Prevent touch scrolling on body when modal is open (iOS) */
body.modal-open,
body.modal-open .wizard-main,
body.modal-open .wizard-outline {
touch-action: none;
-webkit-overflow-scrolling: auto;
}
/* Allow scrolling inside the modal content */
body.modal-open .modal__content {
touch-action: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* ===========================================
TEMPLATE CONFIRMATION MODAL - PREMIUM DARK
=========================================== */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
/* Force new stacking context for WebKit */
isolation: isolate;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
.modal[hidden] {
display: none;
}
/* Modal overlay - no animation for WebKit browser compatibility */
.modal__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 1;
z-index: 1;
}
/* Only apply backdrop-filter in browsers that properly support it */
@supports (backdrop-filter: blur(12px)) {
.modal__overlay {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}
/* Premium dark modal content - no animation for WebKit browser compatibility */
.modal__content {
position: relative;
z-index: 2;
opacity: 1;
transform: translateY(0) scale(1) translateZ(0);
-webkit-transform: translateY(0) scale(1) translateZ(0);
background: linear-gradient(165deg, #1E2128 0%, #14161A 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-2xl);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.6),
0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
/* GPU acceleration for smooth 60fps scrolling */
will-change: scroll-position, transform;
contain: layout style;
/* iOS momentum scrolling */
-webkit-overflow-scrolling: touch;
/* Scroll anchoring to prevent content jumps */
overflow-anchor: auto;
overscroll-behavior: contain;
}
/* Accent glow at top */
.modal__content::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--modal-accent, #0E76FD) 50%,
transparent
);
box-shadow: 0 0 20px var(--modal-accent, rgba(14, 118, 253, 0.5));
z-index: 1;
}
.modal__header {
padding: var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
gap: var(--space-4);
}
.modal__title {
margin: 0;
font-size: 1.375rem;
font-weight: 700;
color: #FFFFFF;
}
.modal__body {
padding: var(--space-5);
}
.modal__body p {
margin: 0 0 var(--space-4);
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
/* Redesigned warning box */
.modal__warning {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: var(--radius-md);
margin-top: var(--space-5);
font-size: 0.875rem;
color: #FCD34D;
line-height: 1.5;
}
.modal__list {
margin: var(--space-3) 0;
padding-left: var(--space-5);
color: rgba(255, 255, 255, 0.7);
}
.modal__list li {
margin-bottom: var(--space-2);
line-height: 1.5;
}
html[data-theme='light'] .modal__list {
color: rgba(0, 0, 0, 0.7);
}
/* Template preview in modal - Redesigned */
.template-preview {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin: var(--space-5) 0;
}
.template-preview__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.template-preview__icon {
position: relative;
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.template-preview__icon::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, var(--modal-accent, #0E76FD), transparent);
opacity: 0.4;
z-index: -1;
}
.template-preview__icon svg {
width: 24px;
height: 24px;
fill: var(--modal-accent, #0E76FD);
}
.template-preview__info {
flex: 1;
min-width: 0;
}
.template-preview h3,
.template-preview__title {
margin: 0 0 var(--space-1);
font-size: 1.125rem;
font-weight: 600;
color: #FFFFFF;
}
.template-preview p,
.template-preview__description {
margin: 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
.template-preview__features {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.template-preview__feature {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-full);
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
/* ===========================================
FEATURE SHOWCASE GRID - Circular Icons
=========================================== */
.template-features {
margin: var(--space-5) 0;
}
.template-features__title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 var(--space-4) 0;
text-align: center;
}
.template-features__group {
margin-bottom: var(--space-5);
}
.template-features__group:last-child {
margin-bottom: 0;
}
.template-features__group-label {
display: block;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.4);
margin-bottom: var(--space-3);
text-align: center;
}
.template-features__grid--5col {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.template-features__grid--3col {
display: flex;
justify-content: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.template-features__grid {
display: flex;
justify-content: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.template-feature {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
width: 100px;
min-width: 80px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
transition: transform 0.2s ease;
}
.template-feature:hover {
transform: translateY(-2px);
}
.template-feature[data-active="true"] .template-feature__icon {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.5);
box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}
.template-feature[data-active="true"] .template-feature__icon svg {
fill: #22C55E;
}
.template-feature[data-active="true"] .template-feature__status {
color: #22C55E;
}
.template-feature[data-active="false"] .template-feature__icon {
opacity: 0.4;
}
.template-feature[data-active="false"] .template-feature__label,
.template-feature[data-active="false"] .template-feature__status {
opacity: 0.5;
}
.template-feature__icon {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 2px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
transition: all 0.2s ease;
}
.template-feature__icon svg {
width: 24px !important;
height: 24px !important;
min-width: 24px;
min-height: 24px;
max-width: 24px;
max-height: 24px;
fill: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.template-feature__label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-align: center;
white-space: normal;
word-wrap: break-word;
line-height: 1.3;
max-width: 100%;
}
.template-feature__status {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.5px;
}
/* 4-column and 2-column grids for Trading & History section */
.template-features__grid--4col {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.template-features__grid--2col {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* Select dropdown inside feature card */
.template-feature--select {
cursor: default;
}
.template-feature__select {
width: 100%;
padding: var(--space-1) var(--space-2);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
color: var(--color-text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
cursor: pointer;
text-align: center;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-1) center;
padding-right: var(--space-4);
}
.template-feature__select:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.template-feature__select:focus {
outline: none;
border-color: var(--modal-accent, #0E76FD);
box-shadow: 0 0 0 2px rgba(14, 118, 253, 0.2);
}
.template-feature__select option {
background: #1A1F36;
color: #F5F5F7;
padding: var(--space-2);
}
html[data-theme='light'] .template-feature__select {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.15);
color: var(--color-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[data-theme='light'] .template-feature__select:hover {
background-color: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.2);
}
html[data-theme='light'] .template-feature__select option {
background: #fff;
color: #1A1F36;
}
@media (max-width: 600px) {
.template-features__grid--5col,
.template-features__grid--3col,
.template-features__grid--4col,
.template-features__grid--2col {
gap: var(--space-3);
}
.template-features__group {
margin-bottom: var(--space-4);
}
}
@media (max-width: 480px) {
.template-features__grid {
gap: var(--space-4);
}
.template-features__grid--5col,
.template-features__grid--3col,
.template-features__grid--4col,
.template-features__grid--2col {
gap: var(--space-2);
}
.template-feature {
width: 80px;
min-width: 70px;
}
.template-feature__icon {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.template-feature__icon svg {
width: 20px !important;
height: 20px !important;
}
.template-feature__label {
font-size: 0.625rem;
line-height: 1.2;
}
}
/* Feature toggle interactivity - Circular Icon variant */
.template-feature--interactive {
cursor: pointer;
user-select: none;
position: relative;
}
.template-feature--interactive:hover .template-feature__icon {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.1);
}
.template-feature--interactive:active {
transform: translateY(0);
}
.template-feature--interactive[data-active="true"]:hover .template-feature__icon {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.6);
box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}
.template-feature--interactive[data-active="false"]:hover .template-feature__icon {
opacity: 0.6;
}
.template-feature--interactive[data-active="false"]:hover .template-feature__label,
.template-feature--interactive[data-active="false"]:hover .template-feature__status {
opacity: 0.7;
}
/* ===========================================
TEMPLATE NAMING CONFIGURATION
=========================================== */
.template-naming-config {
margin: var(--space-5) 0;
padding: var(--space-5);
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.template-naming-config__subtitle {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
margin: -0.5rem 0 var(--space-4) 0;
}
.template-naming-config .supply-config__cards {
grid-template-columns: repeat(2, 1fr);
}
/* ===========================================
ENHANCED SUPPLY CONFIGURATION
=========================================== */
.supply-config-enhanced {
margin: var(--space-5) 0;
padding: var(--space-5);
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.supply-config__title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 var(--space-4) 0;
}
.supply-config__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.supply-card {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
transition: border-color 0.2s ease;
}
.supply-card:focus-within {
border-color: var(--modal-accent, rgba(14, 118, 253, 0.5));
}
.supply-card__label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: var(--space-2);
}
.supply-card__input {
font-size: 1.25rem;
font-weight: 700;
text-align: center;
background: transparent;
border: none;
color: #FFFFFF;
width: 100%;
padding: var(--space-2) 0;
outline: none;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}
.supply-card__input::placeholder {
color: rgba(255, 255, 255, 0.3);
font-weight: 400;
}
.supply-card__select {
font-size: 1.25rem;
font-weight: 700;
text-align: center;
background: transparent;
border: none;
color: #FFFFFF;
width: 100%;
padding: var(--space-2) 0;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.supply-card__select option {
background: #1a1a2e;
color: #FFFFFF;
}
.supply-card__hint {
display: block;
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.4);
margin-top: var(--space-2);
}
/* Supply ratio bar */
.supply-ratio {
margin-top: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.supply-ratio__bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.supply-ratio__fill {
height: 100%;
background: linear-gradient(90deg, var(--modal-accent, #0E76FD), var(--modal-accent-light, #3D93FD));
border-radius: 4px;
transition: width 0.3s ease;
width: 0%;
}
.supply-ratio__label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
min-width: 100px;
text-align: right;
}
/* Supply preview */
.supply-preview {
margin-top: var(--space-4);
text-align: center;
padding: var(--space-4);
background: linear-gradient(135deg, rgba(var(--modal-accent-rgb, 14, 118, 253), 0.1), transparent);
border-radius: var(--radius-md);
border: 1px solid rgba(var(--modal-accent-rgb, 14, 118, 253), 0.2);
}
.supply-preview__value {
font-size: 1.75rem;
font-weight: 700;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
color: #FFFFFF;
letter-spacing: -0.5px;
}
.supply-preview__symbol {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-left: var(--space-2);
text-transform: uppercase;
letter-spacing: 1px;
}
.supply-preview__details {
display: block;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
margin-top: var(--space-2);
}
@media (max-width: 600px) {
.supply-config__cards {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.supply-card {
padding: var(--space-3);
}
.supply-card__input,
.supply-card__select {
font-size: 1rem;
}
.supply-preview__value {
font-size: 1.25rem;
}
.supply-ratio {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
}
.supply-ratio__label {
text-align: center;
min-width: auto;
}
}
/* ===========================================
EMISSION TIMELINE VISUALIZATION
=========================================== */
.emission-timeline {
margin: var(--space-5) 0;
padding: var(--space-4);
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.emission-timeline__title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 var(--space-4) 0;
}
.emission-timeline__chart {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.emission-timeline__row {
display: grid;
grid-template-columns: 70px 1fr 80px;
align-items: center;
gap: var(--space-3);
}
.emission-timeline__label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
.emission-timeline__bar-container {
height: 12px;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
overflow: hidden;
}
.emission-timeline__fill {
height: 100%;
background: linear-gradient(90deg, var(--modal-accent, #0E76FD), transparent 150%);
border-radius: 6px;
transition: width 0.6s ease-out;
width: 0%;
}
.emission-timeline__value {
font-size: 0.8125rem;
font-weight: 600;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
color: rgba(255, 255, 255, 0.8);
text-align: right;
}
.emission-timeline__note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
margin: var(--space-3) 0 0 0;
text-align: center;
font-style: italic;
}
@media (max-width: 480px) {
.emission-timeline__row {
grid-template-columns: 60px 1fr 60px;
gap: var(--space-2);
}
.emission-timeline__label,
.emission-timeline__value {
font-size: 0.75rem;
}
}
/* ===========================================
MODAL FOOTER BUTTONS
=========================================== */
.modal__footer {
padding: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
gap: var(--space-3);
justify-content: flex-end;
}
/* Cancel button */
.modal__footer .wizard-button--secondary {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
}
.modal__footer .wizard-button--secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.3);
color: #FFFFFF;
}
/* Apply button with glow */
.modal__footer .wizard-button--primary {
background: linear-gradient(135deg, #0E76FD 0%, #0C5FC4 100%);
border: none;
color: #FFFFFF;
font-weight: 600;
box-shadow: 0 4px 16px rgba(14, 118, 253, 0.4);
}
.modal__footer .wizard-button--primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(14, 118, 253, 0.5);
}
.modal__footer .wizard-button--primary:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
/* ===========================================
MODAL ANIMATIONS
=========================================== */
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(32px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Legacy animation names for compatibility */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Reduced motion for modal */
@media (prefers-reduced-motion: reduce) {
.modal__overlay,
.modal__content {
animation: none;
}
}
@media (max-width: 600px) {
.modal__footer {
flex-direction: column;
}
.modal__footer .wizard-button {
width: 100%;
}
}
/* ===========================================
SETTINGS CONFIRMATION MODAL
=========================================== */
.modal--large .modal__content {
max-width: 640px;
max-height: 85vh;
}
.modal--large .modal__body {
max-height: calc(85vh - 160px);
overflow-y: auto;
}
.modal__intro {
color: var(--color-text-secondary);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0 0 var(--space-5);
}
/* Settings Summary Grid */
.settings-summary {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.settings-summary__category {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.settings-summary__category-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-light);
}
.settings-summary__category-icon {
font-size: 1.25rem;
}
.settings-summary__category-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.settings-summary__items {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.settings-summary__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-summary__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.settings-summary__label {
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.settings-summary__value {
color: var(--color-text);
font-weight: 500;
font-size: 0.875rem;
text-align: right;
max-width: 60%;
word-break: break-word;
}
.settings-summary__value--enabled {
color: #10b981;
}
.settings-summary__value--disabled {
color: var(--color-text-muted);
}
.settings-summary__badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--radius-sm);
color: #10b981;
font-size: 0.8125rem;
font-weight: 500;
}
.settings-summary__badge--off {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: var(--color-text-muted);
}
/* Light theme adjustments */
html[data-theme='light'] .settings-summary__category {
background: var(--color-surface);
border-color: var(--color-border);
}
html[data-theme='light'] .settings-summary__item {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .settings-summary__badge {
background: rgba(16, 185, 129, 0.08);
}
html[data-theme='light'] .settings-summary__badge--off {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 600px) {
.modal--large .modal__content {
max-width: 100%;
margin: var(--space-3);
max-height: calc(100vh - var(--space-6));
}
.settings-summary__item {
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
}
.settings-summary__value {
text-align: left;
max-width: 100%;
}
}
/* ═══════════════════════════════════════════════════════
VALIDATION STATUS (Settings Confirmation Modal)
═══════════════════════════════════════════════════════ */
.validation-status {
padding: var(--space-4);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
.validation-status--ready {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.validation-status--blocked {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.validation-status__header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.validation-status__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 1rem;
font-weight: bold;
}
.validation-status--ready .validation-status__icon {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.validation-status--blocked .validation-status__icon {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.validation-status__title {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.validation-status--ready .validation-status__title {
color: #10b981;
}
.validation-status--blocked .validation-status__title {
color: #ef4444;
}
.validation-status__message {
color: var(--color-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin: 0 0 var(--space-4);
}
.validation-status__steps {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.validation-step {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
}
.validation-step--valid {
background: rgba(16, 185, 129, 0.08);
}
.validation-step--invalid {
background: rgba(239, 68, 68, 0.08);
}
.validation-step--optional {
background: rgba(255, 255, 255, 0.03);
}
.validation-step__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 0.75rem;
font-weight: bold;
}
.validation-step--valid .validation-step__icon {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.validation-step--invalid .validation-step__icon {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.validation-step--optional .validation-step__icon {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-muted);
}
.validation-step__name {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
}
.validation-step__status {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-xs);
}
.validation-step--valid .validation-step__status {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.validation-step--invalid .validation-step__status {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.validation-step--optional .validation-step__status {
background: rgba(255, 255, 255, 0.08);
color: var(--color-text-muted);
}
.validation-step__message {
grid-column: 2 / -1;
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: var(--space-1);
}
/* Disabled continue button */
.wizard-button--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Light theme adjustments for validation status */
html[data-theme='light'] .validation-status--ready {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
}
html[data-theme='light'] .validation-status--blocked {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
}
html[data-theme='light'] .validation-step {
background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .validation-step--valid {
background: rgba(16, 185, 129, 0.06);
}
html[data-theme='light'] .validation-step--invalid {
background: rgba(239, 68, 68, 0.06);
}
@media (max-width: 480px) {
.validation-step {
grid-template-columns: 20px 1fr;
gap: var(--space-1);
}
.validation-step__status {
grid-column: 2;
justify-self: start;
margin-top: var(--space-1);
}
.validation-step__message {
grid-column: 1 / -1;
}
}
/* ═══════════════════════════════════════════════════════
INLINE HELP SYSTEM
═══════════════════════════════════════════════════════ */
/* Page Guide Panel - Right Side */
.page-guide {
position: fixed;
right: 30px;
top: calc(var(--header-height) + 20px);
width: var(--guide-width);
max-height: calc(100vh - var(--header-height) - 40px);
overflow-y: auto;
overflow-x: hidden;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 0;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
scroll-behavior: smooth;
/* GPU acceleration for smooth 60fps scrolling */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: scroll-position;
contain: layout style;
/* iOS momentum scrolling */
-webkit-overflow-scrolling: touch;
/* Scroll anchoring to prevent content jumps */
overflow-anchor: auto;
overscroll-behavior: contain;
}
/* Collapsed state */
.page-guide[data-collapsed="true"] {
width: var(--guide-collapsed-width);
overflow: hidden;
}
/* Header container with horizontal tabs and collapse button */
.page-guide__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 10;
/* PERFORMANCE: Using solid color instead of backdrop-filter for smooth scrolling */
background: var(--color-bg-secondary);
/* GPU layer for sticky element */
transform: translateZ(0);
}
/* Dark mode support for header */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .page-guide__header {
background: var(--color-bg-secondary);
}
}
html[data-theme='dark'] .page-guide__header {
background: var(--color-bg-secondary);
}
/* Horizontal tabs container */
.page-guide__tabs-horizontal {
display: flex;
gap: var(--space-2);
flex: 1;
}
/* Individual horizontal tab */
.page-guide__tab {
padding: var(--space-2) var(--space-3);
background: transparent;
color: var(--color-text-secondary);
border: none;
border-bottom: 2px solid transparent;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
}
.page-guide__tab:hover {
color: var(--color-text);
border-bottom-color: var(--color-border);
}
.page-guide__tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.page-guide__tab:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Collapse button (arrow) */
.page-guide__collapse {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
color: var(--color-text-secondary);
border: none;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
border-radius: var(--radius-sm);
}
.page-guide__collapse:hover {
background: var(--color-bg-tertiary);
color: var(--color-text);
}
.page-guide__collapse:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.page-guide__collapse-icon {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
width: 16px;
height: 16px;
}
/* Collapsed state */
.page-guide[data-collapsed="true"] .page-guide__header {
padding: var(--space-3);
}
.page-guide[data-collapsed="true"] .page-guide__tabs-horizontal {
display: none;
}
.page-guide[data-collapsed="true"] .page-guide__collapse-icon {
transform: rotate(180deg);
}
.page-guide[data-collapsed="true"] .page-guide__panel {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
}
/* Panel containers */
.page-guide__panel {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
padding: var(--space-4) var(--space-5);
}
.page-guide__panel.active {
display: block;
opacity: 1;
}
.page-guide__content {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 340px;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page-guide__title {
font-size: 1.375rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
line-height: 1.3;
}
.page-guide__intro {
margin: 0;
font-size: 1rem;
line-height: 1.7;
color: var(--color-muted);
}
.page-guide__section {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.page-guide__section-title {
font-size: 1.0625rem;
font-weight: 600;
margin: 0;
color: var(--color-text);
}
.page-guide__step-heading {
font-size: 1rem;
font-weight: 600;
margin: var(--space-5) 0 var(--space-3) 0;
color: var(--color-primary);
line-height: 1.4;
transition: background-color 0.3s ease, padding 0.3s ease;
border-radius: var(--radius-sm);
}
/* Highlighted state for guide sections */
.page-guide__step-heading--highlighted {
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
padding: var(--space-2) var(--space-3);
margin-left: calc(var(--space-3) * -1);
margin-right: calc(var(--space-3) * -1);
animation: pulse-highlight 0.6s ease-in-out;
}
@keyframes pulse-highlight {
0%, 100% {
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}
50% {
background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
}
.page-guide__section p {
margin: var(--space-2) 0 var(--space-4) 0;
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
}
.page-guide__section p strong {
font-weight: 600;
color: var(--color-text);
}
.page-guide__list {
margin: var(--space-4) 0;
padding-left: var(--space-6);
font-size: 1rem;
line-height: 1.8;
color: var(--color-text);
}
.page-guide__list li {
margin-bottom: var(--space-4);
}
.page-guide__list strong {
color: var(--color-primary);
font-weight: 600;
}
.page-guide__list--no-bullets {
list-style: none;
}
.page-guide__list--nested {
margin: var(--space-2) 0;
padding-left: var(--space-5);
list-style: circle;
font-size: inherit;
}
.page-guide__section code {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.9em;
padding: 2px 6px;
background: var(--color-surface-alt);
border-radius: var(--radius-sm);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.page-guide__steps {
margin: 0;
padding-left: var(--space-5);
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-text);
counter-reset: step-counter;
}
.page-guide__steps li {
margin-bottom: var(--space-5);
position: relative;
}
.page-guide__steps li strong {
display: block;
color: var(--color-primary);
font-weight: 600;
margin-bottom: var(--space-2);
font-size: 1rem;
}
.page-guide__steps li p {
margin: 0;
color: var(--color-muted);
line-height: 1.7;
}
.page-guide__tip {
padding: var(--space-4);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: var(--radius-md);
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-text);
}
.page-guide__tip strong {
color: var(--color-primary);
display: block;
margin-bottom: var(--space-2);
font-size: 1rem;
}
/* Fix WebKit glitch on freezing page - use sticky instead of fixed */
#screen-permissions-manual-freeze {
min-height: 100vh !important;
}
#screen-permissions-manual-freeze .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-manual-freeze .wizard-form {
flex: 1 !important;
}
/* Option 2: Compact Pill-Style Design (Minimalist Modern) */
#screen-permissions-manual-freeze .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
/* Pill-style buttons */
#screen-permissions-manual-freeze .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-freeze .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-manual-freeze .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-manual-freeze .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-manual-freeze .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-manual-freeze .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
/* Enhanced form cards */
#screen-permissions-manual-freeze .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-freeze .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-distribution-perpetual - use sticky instead of fixed */
#screen-distribution-perpetual {
min-height: 100vh !important;
}
#screen-distribution-perpetual .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-distribution-perpetual .wizard-form {
flex: 1 !important;
}
/* Option 2: Compact Pill-Style Design (Minimalist Modern) */
#screen-distribution-perpetual .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
/* Pill-style buttons */
#screen-distribution-perpetual .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-perpetual .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-distribution-perpetual .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-distribution-perpetual .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-distribution-perpetual .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-distribution-perpetual .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
/* Enhanced form cards */
#screen-distribution-perpetual .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-perpetual .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-distribution-emission - use sticky instead of fixed */
#screen-distribution-emission {
min-height: 100vh !important;
}
#screen-distribution-emission .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-distribution-emission .wizard-form {
flex: 1 !important;
}
/* Option 2: Compact Pill-Style Design (Minimalist Modern) */
#screen-distribution-emission .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
/* Pill-style buttons */
#screen-distribution-emission .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-emission .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-distribution-emission .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-distribution-emission .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-distribution-emission .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-distribution-emission .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
/* Enhanced form cards */
#screen-distribution-emission .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-emission .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions - use sticky instead of fixed */
#screen-permissions {
min-height: 100vh !important;
}
#screen-permissions .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions .wizard-form {
flex: 1 !important;
}
#screen-permissions .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-registration - use sticky instead of fixed */
#screen-registration {
min-height: 100vh !important;
}
#screen-registration .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-registration .wizard-form {
flex: 1 !important;
}
#screen-registration .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-registration .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-registration .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-registration .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-registration .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-registration .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-registration .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-registration .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-registration .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-manual-mint - use sticky instead of fixed */
#screen-permissions-manual-mint {
min-height: 100vh !important;
}
#screen-permissions-manual-mint .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-manual-mint .wizard-form {
flex: 1 !important;
}
#screen-permissions-manual-mint .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-manual-mint .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-mint .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-manual-mint .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-manual-mint .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-manual-mint .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-manual-mint .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-manual-mint .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-mint .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-direct-pricing-change - use sticky instead of fixed */
#screen-permissions-direct-pricing-change {
min-height: 100vh !important;
}
#screen-permissions-direct-pricing-change .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-direct-pricing-change .wizard-form {
flex: 1 !important;
}
#screen-permissions-direct-pricing-change .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-direct-pricing-change .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-direct-pricing-change .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-direct-pricing-change .wizard-button--primary:hover:not(:disabled) {
box-shadow:
0 4px 12px rgba(14, 118, 253, 0.25),
0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-direct-pricing-change .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 1px 3px rgba(14, 118, 253, 0.3),
0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-direct-pricing-change .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-direct-pricing-change .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-direct-pricing-change .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-direct-pricing-change .form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-manual-burn */
#screen-permissions-manual-burn {
min-height: 100vh !important;
}
#screen-permissions-manual-burn .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-manual-burn .wizard-form {
flex: 1 !important;
}
#screen-permissions-manual-burn .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-manual-burn .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-burn .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-manual-burn .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-manual-burn .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-manual-burn .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-manual-burn .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-manual-burn .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-manual-burn .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-emergency */
#screen-permissions-emergency {
min-height: 100vh !important;
}
#screen-permissions-emergency .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-emergency .wizard-form {
flex: 1 !important;
}
#screen-permissions-emergency .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-emergency .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-emergency .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-emergency .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-emergency .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-emergency .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-emergency .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-emergency .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-emergency .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-conventions-change */
#screen-permissions-conventions-change {
min-height: 100vh !important;
}
#screen-permissions-conventions-change .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-conventions-change .wizard-form {
flex: 1 !important;
}
#screen-permissions-conventions-change .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-conventions-change .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-conventions-change .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-conventions-change .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-conventions-change .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-conventions-change .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-conventions-change .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-conventions-change .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-conventions-change .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-marketplace-trade-mode-change */
#screen-permissions-marketplace-trade-mode-change {
min-height: 100vh !important;
}
#screen-permissions-marketplace-trade-mode-change .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-marketplace-trade-mode-change .wizard-form {
flex: 1 !important;
}
#screen-permissions-marketplace-trade-mode-change .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-marketplace-trade-mode-change .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-marketplace-trade-mode-change .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-marketplace-trade-mode-change .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-marketplace-trade-mode-change .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-marketplace-trade-mode-change .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-marketplace-trade-mode-change .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-marketplace-trade-mode-change .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-marketplace-trade-mode-change .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-main-control-change */
#screen-permissions-main-control-change {
min-height: 100vh !important;
}
#screen-permissions-main-control-change .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-main-control-change .wizard-form {
flex: 1 !important;
}
#screen-permissions-main-control-change .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-main-control-change .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-main-control-change .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-main-control-change .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-main-control-change .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-main-control-change .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-main-control-change .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-main-control-change .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-main-control-change .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-advanced-launch */
#screen-advanced-launch {
min-height: 100vh !important;
}
#screen-advanced-launch .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-advanced-launch .wizard-form {
flex: 1 !important;
}
#screen-advanced-launch .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-advanced-launch .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced-launch .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-advanced-launch .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-advanced-launch .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-advanced-launch .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-advanced-launch .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-advanced-launch .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced-launch .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-distribution-preprogrammed */
#screen-distribution-preprogrammed {
min-height: 100vh !important;
}
#screen-distribution-preprogrammed .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-distribution-preprogrammed .wizard-form {
flex: 1 !important;
}
#screen-distribution-preprogrammed .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-distribution-preprogrammed .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-preprogrammed .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-distribution-preprogrammed .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-distribution-preprogrammed .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-distribution-preprogrammed .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-distribution-preprogrammed .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-distribution-preprogrammed .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution-preprogrammed .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-advanced-history */
#screen-advanced-history {
min-height: 100vh !important;
}
#screen-advanced-history .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-advanced-history .wizard-form {
flex: 1 !important;
}
#screen-advanced-history .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-advanced-history .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced-history .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-advanced-history .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-advanced-history .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-advanced-history .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-advanced-history .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-advanced-history .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced-history .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-advanced */
#screen-advanced {
min-height: 100vh !important;
}
#screen-advanced .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-advanced .wizard-form {
flex: 1 !important;
}
#screen-advanced .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-advanced .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-advanced .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-advanced .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-advanced .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-advanced .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-advanced .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-advanced .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-distribution */
#screen-distribution {
min-height: 100vh !important;
}
#screen-distribution .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-distribution .wizard-form {
flex: 1 !important;
}
#screen-distribution .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-distribution .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-distribution .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-distribution .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-distribution .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-distribution .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-distribution .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-distribution .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-review */
#screen-review {
min-height: 100vh !important;
}
#screen-review .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-review .wizard-form {
flex: 1 !important;
}
#screen-review .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-review .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-review .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-review .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-review .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-review .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-review .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-review .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-review .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-naming-update */
#screen-naming-update {
min-height: 100vh !important;
}
#screen-naming-update .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-naming-update .wizard-form {
flex: 1 !important;
}
#screen-naming-update .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-naming-update .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming-update .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-naming-update .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-naming-update .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-naming-update .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-naming-update .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-naming-update .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming-update .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-naming */
#screen-naming {
min-height: 100vh !important;
}
#screen-naming .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-naming .wizard-form {
flex: 1 !important;
}
#screen-naming .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-naming .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-naming .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-naming .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-naming .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-naming .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-naming .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-naming-localization */
#screen-naming-localization {
min-height: 100vh !important;
}
#screen-naming-localization .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-naming-localization .wizard-form {
flex: 1 !important;
}
#screen-naming-localization .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-naming-localization .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming-localization .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-naming-localization .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-naming-localization .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-naming-localization .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-naming-localization .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-naming-localization .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-naming-localization .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-permissions-transfer */
#screen-permissions-transfer {
min-height: 100vh !important;
}
#screen-permissions-transfer .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-permissions-transfer .wizard-form {
flex: 1 !important;
}
#screen-permissions-transfer .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-permissions-transfer .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-transfer .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-permissions-transfer .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-permissions-transfer .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-permissions-transfer .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-permissions-transfer .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-permissions-transfer .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-permissions-transfer .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Fix WebKit glitch on screen-search */
#screen-search {
min-height: 100vh !important;
}
#screen-search .wizard-screen__inner {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#screen-search .wizard-form {
flex: 1 !important;
}
#screen-search .wizard-actions--sticky {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding: var(--space-3) var(--space-md) !important;
background: var(--color-surface) !important;
border-top: 2px solid var(--color-border) !important;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important;
}
#screen-search .wizard-button {
border-radius: var(--radius-full);
padding: 10px 28px;
min-height: 42px;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-search .wizard-button--primary {
background: var(--color-primary);
border: none;
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 0 rgba(14, 118, 253, 0.4);
}
#screen-search .wizard-button--primary:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.25), 0 0 0 4px rgba(14, 118, 253, 0.1);
transform: scale(1.02);
}
#screen-search .wizard-button--primary:active:not(:disabled) {
transform: scale(0.98);
box-shadow: 0 1px 3px rgba(14, 118, 253, 0.3), 0 0 0 3px rgba(14, 118, 253, 0.15);
}
#screen-search .wizard-button--secondary {
background: transparent;
border: 2px solid var(--color-border-strong);
color: var(--color-text);
}
#screen-search .wizard-button--secondary:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
transform: scale(1.02);
}
#screen-search .form-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-search .form-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 118, 253, 0.08);
border-color: rgba(14, 118, 253, 0.2);
}
/* Hide guide on smaller screens */
@media (max-width: 1200px) {
.page-guide {
display: none;
}
.wizard-actions--sticky {
right: 0 !important;
}
}
/* Help Icon Button */
.help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 6px;
padding: 0;
border: none;
background: transparent;
color: var(--color-primary);
cursor: help;
transition: color 150ms ease, background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
vertical-align: middle;
position: relative;
opacity: 0.7;
border-radius: var(--radius-full);
}
.help-icon:hover {
opacity: 1;
transform: scale(1.1);
color: var(--color-primary);
background: var(--color-primary-light);
}
.help-icon:focus {
outline: none;
}
.help-icon:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 50%;
opacity: 1;
background: var(--color-primary-light);
}
.help-icon:focus:not(:focus-visible) {
outline: none;
}
.help-icon svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* Accessibility: Hide decorative SVG from screen readers */
.help-icon svg[aria-hidden="true"] {
pointer-events: none;
}
/* Help Tooltip - Appears on RIGHT side */
.help-tooltip {
position: fixed;
z-index: 10000;
right: 30px;
width: 360px;
max-width: 360px;
padding: var(--space-5);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--color-text);
animation: slideInRight 0.2s ease-out;
}
/* On smaller screens, adjust tooltip */
@media (max-width: 1400px) {
.help-tooltip {
width: var(--guide-width);
max-width: calc(100vw - 40px);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px) scale(0.96);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.help-tooltip[hidden] {
display: none;
}
/* Arrow pointing LEFT (from tooltip to icon) */
.help-tooltip::before {
content: '';
position: absolute;
left: -6px;
top: 20px;
width: 12px;
height: 12px;
background: var(--color-bg-primary);
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
transform: rotate(45deg);
}
.help-tooltip p {
margin: 0 0 var(--space-2) 0;
}
.help-tooltip p:last-child {
margin-bottom: 0;
}
.help-tooltip strong {
color: var(--color-text);
font-weight: 600;
}
.help-tooltip code {
padding: 2px 6px;
background: var(--color-bg-secondary);
border-radius: var(--radius-sm);
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
font-size: 0.9em;
}
.help-tooltip-permanent {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
padding: var(--space-2);
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-sm);
font-size: 0.9em;
}
.help-tooltip-permanent::before {
content: '🔒';
font-size: 1.2em;
}
.help-tooltip-example {
margin-top: var(--space-2);
padding: var(--space-2);
background: var(--color-bg-secondary);
border-radius: var(--radius-sm);
border-left: 3px solid var(--color-primary);
}
.help-tooltip-example strong {
display: block;
margin-bottom: var(--space-1);
color: var(--color-primary);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Label with help icon */
label.with-help {
display: flex;
align-items: center;
gap: var(--space-1);
}
/* Responsive adjustments */
@media (max-width: 900px) {
.help-tooltip {
width: 340px;
}
}
@media (max-width: 600px) {
.help-tooltip {
position: fixed;
left: 10px;
right: 10px;
width: auto;
max-width: none;
}
.help-tooltip::before {
display: none; /* Hide arrow on mobile */
}
}
/* ═══════════════════════════════════════════════════════
REVIEW SCREEN COMPONENTS
═══════════════════════════════════════════════════════ */
/* Review Grid Layout */
.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: var(--space-5);
margin-bottom: var(--space-8);
}
/* Review Card */
.review-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: box-shadow 0.2s ease;
}
.review-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.review-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-border);
}
.review-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.review-card__badge {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
letter-spacing: 0.5px;
}
.review-card__badge--permanent {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.review-card__list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.review-card__item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
}
.review-card__item dt {
font-size: 0.9375rem;
color: var(--color-muted);
font-weight: 500;
}
.review-card__item dd {
font-size: 1rem;
color: var(--color-text);
font-weight: 600;
margin: 0;
text-align: right;
}
/* Review Annotations */
.review-annotation {
margin-top: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-md);
font-size: 0.875rem;
line-height: 1.6;
}
.review-annotation--warning {
background: rgba(245, 158, 11, 0.1);
border-left: 3px solid #f59e0b;
color: #92400e;
}
.review-annotation strong {
font-weight: 600;
}
/* Distribution Preview */
.distribution-preview {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.distribution-preview__item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
}
.distribution-preview__item:last-child {
border-bottom: none;
}
.distribution-preview__label {
font-size: 0.9375rem;
color: var(--color-muted);
font-weight: 500;
}
.distribution-preview__value {
font-size: 1rem;
color: var(--color-text);
font-weight: 600;
text-align: right;
}
/* Simulation Box */
.simulation-box {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-8);
}
.simulation-box__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-4) 0;
}
.simulation-box__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.simulation-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.simulation-item__icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.simulation-item__text {
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
padding-top: 0.25rem;
}
/* JSON Preview */
.json-preview {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-8);
overflow: hidden;
}
.json-preview__summary {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
cursor: pointer;
user-select: none;
font-weight: 600;
color: var(--color-text);
transition: background 0.2s ease;
}
.json-preview__summary:hover {
background: var(--color-surface-alt);
}
.json-preview__icon {
font-family: 'Courier New', monospace;
font-size: 1.25rem;
color: var(--color-primary);
}
.json-preview__chevron {
margin-left: auto;
transition: transform 0.3s ease;
}
.json-preview[open] .json-preview__chevron {
transform: rotate(180deg);
}
.json-preview__content {
padding: 0 var(--space-4) var(--space-4);
}
.json-preview__toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-3);
}
.json-preview__copy {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.json-preview__copy:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.json-preview__copy svg {
width: 16px;
height: 16px;
}
.json-preview__code {
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
font-family: 'Courier New', Monaco, monospace;
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-text);
overflow-x: auto;
margin: 0 0 var(--space-4) 0;
white-space: pre;
}
.json-annotations {
background: var(--color-surface-alt);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.json-annotations__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-3) 0;
}
.json-annotations__list {
margin: 0;
padding-left: var(--space-5);
list-style: disc;
}
.json-annotations__list li {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.json-annotations__list code {
font-family: 'Courier New', Monaco, monospace;
background: rgba(59, 130, 246, 0.1);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--color-primary);
}
/* Responsive Design for Review Components */
@media (max-width: 768px) {
.review-grid {
grid-template-columns: 1fr;
}
.simulation-box {
padding: var(--space-4);
}
.json-preview__summary {
padding: var(--space-3);
}
.json-preview__content {
padding: 0 var(--space-3) var(--space-3);
}
}
/* ===================================================================
Contract Preview Modal
=================================================================== */
.contract-preview-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.contract-preview-modal[hidden] {
display: none;
}
.contract-preview-modal__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
animation: fadeIn 0.2s ease-out;
}
.contract-preview-modal__content {
position: relative;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-width: 900px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: slideUp 0.3s ease-out;
}
.contract-preview-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.contract-preview-modal__title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.contract-preview-modal__close {
background: none;
border: none;
font-size: 2rem;
line-height: 1;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.contract-preview-modal__close:hover {
background: var(--color-surface-alt);
color: var(--color-text);
}
.contract-preview-modal__body {
padding: var(--space-5);
overflow-y: auto;
flex: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .contract-preview-modal__overlay {
background: rgba(0, 0, 0, 0.85);
}
}
/* Validation Icons */
.wizard-field__input.is-valid {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px 20px;
padding-right: 40px;
}
.wizard-field__input.is-invalid {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px 20px;
padding-right: 40px;
}
/* Loading Spinner */
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner--small {
width: 16px;
height: 16px;
border-width: 2px;
}
.spinner--medium {
width: 24px;
height: 24px;
border-width: 3px;
}
.spinner--large {
width: 40px;
height: 40px;
border-width: 4px;
}
.spinner--white {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: white;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
.spinner::after {
content: '⏳';
display: block;
font-size: inherit;
}
}
/* Loading Button States */
.wizard-button--loading,
.wizard-button[aria-busy="true"] {
position: relative;
color: transparent !important;
pointer-events: none;
cursor: wait;
}
.wizard-button--loading::after,
.wizard-button[aria-busy="true"]::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.wizard-button--loading.wizard-button--primary::after,
.wizard-button[aria-busy="true"].wizard-button--primary::after {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: white;
}
.wizard-button--loading.wizard-button--small::after,
.wizard-button[aria-busy="true"].wizard-button--small::after {
width: 16px;
height: 16px;
border-width: 2px;
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease;
}
.loading-overlay[aria-hidden="false"] {
display: flex;
}
.loading-overlay__content {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-lg);
text-align: center;
min-width: 200px;
animation: scaleIn 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.loading-overlay__spinner {
margin: 0 auto var(--space-4);
}
.loading-overlay__message {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text);
margin: 0;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ========================================
Toast Notification System
======================================== */
/* Toast Container - Fixed position at top-right */
.toast-container {
position: fixed;
top: var(--space-6);
right: var(--space-6);
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 420px;
pointer-events: none;
}
@media (max-width: 600px) {
.toast-container {
top: var(--space-4);
right: var(--space-4);
left: var(--space-4);
max-width: none;
}
}
/* Individual Toast */
.toast {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.04);
padding: var(--space-4);
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-width: 320px;
max-width: 420px;
pointer-events: all;
transform: translateX(calc(100% + var(--space-6)));
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .toast {
background: var(--color-surface);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.2);
}
}
/* Toast slide-in animation */
.toast.toast--show {
transform: translateX(0);
opacity: 1;
}
/* Toast slide-out animation */
.toast.toast--hide {
transform: translateX(calc(100% + var(--space-6)));
opacity: 0;
}
@media (max-width: 600px) {
.toast {
min-width: auto;
max-width: none;
}
}
/* Toast Icon */
.toast__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toast__icon svg {
width: 100%;
height: 100%;
}
/* Toast Content */
.toast__content {
flex: 1;
min-width: 0;
}
.toast__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-1) 0;
line-height: 1.4;
}
.toast__message {
font-size: var(--text-sm);
color: var(--color-muted);
margin: 0;
line-height: 1.5;
}
/* Toast Close Button */
.toast__close {
width: 20px;
height: 20px;
flex-shrink: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-silver);
transition: color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.toast__close:hover {
color: var(--color-text);
}
.toast__close svg {
width: 16px;
height: 16px;
}
/* Toast Variants */
/* Success Toast */
.toast--success {
border-left: 4px solid var(--color-success);
}
.toast--success .toast__icon {
color: var(--color-success);
}
.toast--success .toast__title {
color: var(--color-success);
}
/* Error Toast */
.toast--error {
border-left: 4px solid var(--color-error);
animation: toastEnter 0.3s ease-out, toastShake 0.5s ease-out 0.3s;
}
.toast--error .toast__icon {
color: var(--color-error);
}
.toast--error .toast__title {
color: var(--color-error);
}
/* P4: Toast shake animation for errors */
@keyframes toastShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-6px); }
80% { transform: translateX(6px); }
}
/* P4: Toast progress bar */
.toast__progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: currentColor;
opacity: 0.3;
animation: toastProgress var(--toast-duration, 5s) linear forwards;
}
@keyframes toastProgress {
from { width: 100%; }
to { width: 0%; }
}
/* Warning Toast */
.toast--warning {
border-left: 4px solid var(--color-warning);
}
.toast--warning .toast__icon {
color: var(--color-warning);
}
.toast--warning .toast__title {
color: var(--color-warning);
}
/* Info Toast */
.toast--info {
border-left: 4px solid var(--color-info);
}
.toast--info .toast__icon {
color: var(--color-info);
}
.toast--info .toast__title {
color: var(--color-info);
}
/* Toast Progress Bar (optional auto-dismiss indicator) */
.toast__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
.toast__progress-bar {
height: 100%;
background: currentColor;
transform-origin: left;
animation: toast-progress linear forwards;
}
@keyframes toast-progress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* ========================================
Enhanced Accessibility (WCAG 2.1 AA)
======================================== */
/* Screen Reader Only Text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Enhanced Focus States for All Interactive Elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-sm);
}
/* Remove default focus outline (we're using :focus-visible) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
outline: none;
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
:root {
--focus-ring-width: 4px;
--color-border: #000000;
}
html[data-theme='dark'] {
--color-border: #ffffff;
}
button,
input,
select,
textarea {
border-width: 2px;
}
}
/* Enhanced Focus for Buttons */
.btn:focus-visible,
.wizard-nav-item:focus-visible,
.wizard-tab:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
box-shadow: 0 0 0 4px rgba(14, 118, 253, 0.1);
}
/* Keyboard Navigation Indicators */
body.using-keyboard *:focus {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Ensure sufficient color contrast for text */
.text-muted,
.wizard-nav-item__text,
.page-guide__intro {
color: var(--color-muted);
/* Ensures 4.5:1 contrast ratio */
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .text-muted,
html:not([data-theme='light']) .wizard-nav-item__text {
color: #CBD5E1; /* Lighter for better contrast in dark mode */
}
}
/* Touch Target Size - Minimum 44x44px */
.btn,
.wizard-nav-item,
.wizard-tab,
.toast__close {
min-height: 44px;
min-width: 44px;
}
/* Checkbox and Radio Button Sizing - Smaller for better UI proportions */
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
cursor: pointer;
flex-shrink: 0;
margin: 0;
}
/* Exception for compact elements that need smaller touch targets */
.wizard-progress-compact__dot,
.page-guide__collapse {
min-height: 28px;
min-width: 28px;
}
/* Ensure links are distinguishable */
a:not(.btn):not(.wizard-nav-item) {
text-decoration: underline;
text-underline-offset: 2px;
}
a:not(.btn):not(.wizard-nav-item):hover {
text-decoration-thickness: 2px;
}
/* Form Input Accessibility */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
border-color: var(--color-error);
background-color: var(--color-error-light);
}
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown),
select:valid {
border-color: var(--color-success);
}
/* Error Messages */
.error-message,
[role="alert"].error {
color: var(--color-error);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-2);
}
.error-message::before {
content: '⚠';
font-size: 1.2em;
}
/* Skip to Main Content Link Enhancement */
.skip-link:focus {
top: var(--space-4);
z-index: 10000;
}
/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Keyboard-only Focus Indicators (No mouse focus rings) */
:focus:not(:focus-visible) {
outline: none;
}
/* Ensure disabled elements are clearly indicated */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: var(--color-smoke);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) button:disabled,
html:not([data-theme='light']) input:disabled,
html:not([data-theme='light']) select:disabled,
html:not([data-theme='light']) textarea:disabled {
background-color: rgba(255, 255, 255, 0.05);
}
}
/* ARIA Live Region Styling */
[aria-live="polite"],
[aria-live="assertive"] {
position: relative;
}
/* ========================================
Mobile Hamburger Menu
======================================== */
/* Hamburger Button - Hidden on desktop */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
padding: var(--space-2);
cursor: pointer;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
border-radius: var(--radius-sm);
transition: background-color 0.2s ease;
}
.mobile-menu-toggle:hover {
background-color: var(--sidebar-hover);
}
.mobile-menu-toggle:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Hamburger Bars */
.mobile-menu-toggle__bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--sidebar-text);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Animate to X when menu is open */
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile Responsive Behavior */
@media (max-width: 900px) {
/* CRITICAL: Force mobile header to show */
.mobile-header {
display: flex !important;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
height: calc(60px + env(safe-area-inset-top, 0px)); /* Account for notched devices */
padding-top: env(safe-area-inset-top, 0px);
background: var(--sidebar-bg-solid) !important; /* Solid background, no blur */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 100000; /* Very high - above sidebar */
align-items: center;
gap: 12px;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
pointer-events: auto !important;
touch-action: manipulation !important;
}
/* Ensure hamburger button is visible and touchable */
.mobile-header .mobile-menu-toggle {
display: flex !important;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
justify-content: center;
align-items: center;
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
.mobile-menu-toggle__bar {
display: block;
width: 22px;
height: 2px;
background: var(--text-primary, #1A1F36);
border-radius: 2px;
}
/* Remove sidebar spacing from shell - CRITICAL FIX */
.wizard-shell {
padding-left: 0 !important;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
/* Hide sidebar by default on mobile */
.wizard-sidebar {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
width: 85%;
max-width: 320px;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile browsers */
z-index: 99999 !important; /* VERY high - above everything including overlay */
isolation: isolate; /* Create stacking context */
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
/* SCROLL CONFIGURATION */
display: block !important;
overflow-y: scroll !important; /* Force scrollbar */
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important; /* Momentum scroll */
overscroll-behavior-y: contain; /* Prevent body scroll-through */
direction: ltr !important; /* Reset RTL from desktop */
/* Remove blur and use solid background */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--sidebar-bg-solid) !important;
pointer-events: auto !important;
}
/* Hide the gradient fade overlay on mobile - prevents it from covering menu content */
.wizard-sidebar::after {
display: none !important;
}
/* Ensure all sidebar content is clickable and touchable */
.wizard-sidebar * {
pointer-events: auto;
touch-action: auto;
}
/* Make nav items explicitly clickable */
.wizard-sidebar .wizard-nav-item,
.wizard-sidebar .wizard-nav-subitem,
.wizard-sidebar .wizard-path__item,
.wizard-sidebar .wizard-subpath__item,
.wizard-sidebar button {
pointer-events: auto !important;
touch-action: manipulation !important;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
/* Show sidebar when menu is open */
.wizard-sidebar.mobile-menu-open {
left: 0;
}
/* Header flows with content on mobile */
.wizard-sidebar__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--sidebar-bg-solid);
}
/* All elements flow naturally - sidebar is the scroll container */
.wizard-sidebar__search,
.wizard-progress {
/* No fixed positioning - content flows */
}
/* Navigation flows naturally - sidebar scrolls */
.sidebar-nav,
.wizard-nav {
display: block !important;
padding-bottom: 100px; /* Extra space at bottom for scroll */
}
/* Show mobile close button in sidebar on mobile - converts to X */
.wizard-sidebar .mobile-menu-toggle {
display: flex !important;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
justify-content: center;
align-items: center;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.wizard-sidebar .mobile-menu-toggle:hover {
background-color: var(--sidebar-hover);
}
/* When sidebar is open, animate hamburger to X */
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wizard-sidebar.mobile-menu-open .mobile-menu-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile overlay - COMPLETELY DISABLED to fix touch issues */
.mobile-menu-overlay {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
.mobile-menu-overlay.active {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Adjust main content on mobile */
.wizard-main {
margin-left: 0;
margin-top: 60px;
margin-top: calc(60px + env(safe-area-inset-top, 0px)); /* Account for notched devices */
width: 100%;
max-width: 100vw;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* Account for home indicator */
min-height: calc(100vh - 60px);
min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)); /* Dynamic viewport height */
overflow-x: hidden;
}
/* Hide guide panel on mobile */
.wizard-guide,
.guide-toggle-container {
display: none !important;
}
/* Welcome screen full width */
.wizard-screen--welcome,
.wizard-screen {
width: 100%;
max-width: 100%;
}
.wizard-screen__inner {
width: 100%;
max-width: 100%;
padding: 16px;
}
/* Template grid single column */
.template-grid {
grid-template-columns: 1fr !important;
gap: 16px;
width: 100%;
}
.template-card {
width: 100%;
max-width: 100%;
padding: 20px;
}
/* Form cards full width */
.form-card {
width: 100%;
max-width: 100%;
}
/* Stack buttons */
.wizard-actions {
flex-direction: column;
gap: 12px;
}
.wizard-actions .wizard-button {
width: 100%;
}
/* Ensure all inputs fit */
.wizard-field__input,
input, select, textarea {
width: 100%;
max-width: 100%;
font-size: 16px;
}
/* Fix wizard tabs - remove left margin on mobile */
.wizard-tabs {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%;
justify-content: center;
position: relative;
z-index: 10;
pointer-events: auto;
}
/* Ensure tab buttons are fully clickable on mobile */
.wizard-tab {
pointer-events: auto !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* sidebar-section flows naturally on mobile - sidebar scrolls */
.sidebar-section {
display: block !important;
min-height: 100%; /* Ensure content can exceed viewport */
}
/* Touch responsiveness for non-scrollable interactive elements */
/* IMPORTANT: Exclude nav items - they need to allow scroll */
.wizard-tab,
.theme-toggle__option,
.mobile-menu-toggle,
button:not(.wizard-nav-item) {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
touch-action: manipulation;
user-select: none;
}
/* Nav items must allow vertical scroll pass-through */
.wizard-nav-item,
.wizard-nav-subitem {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
touch-action: pan-y !important; /* Allow vertical scroll */
user-select: none;
}
/* Ensure sidebar itself can scroll */
.wizard-sidebar {
touch-action: pan-y !important;
}
/* Footer flows with content - user can scroll to it */
.wizard-sidebar__footer {
background: var(--sidebar-bg-solid);
padding: var(--space-4);
border-top: 1px solid var(--sidebar-border);
}
.theme-toggle-box {
margin-top: var(--space-2);
}
/* Ensure theme toggle options are clickable */
.theme-toggle__option {
min-width: 60px;
min-height: 44px;
}
.theme-toggle__option input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
}
/* Mobile Header - Hidden by default, shown on mobile */
.mobile-header {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--sidebar-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sidebar-border);
z-index: 100;
align-items: center;
gap: 12px;
padding: 0 16px;
}
.mobile-header .mobile-menu-toggle {
display: flex;
background: none;
border: none;
padding: 8px;
cursor: pointer;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.mobile-header .mobile-menu-toggle:hover {
background-color: var(--sidebar-hover);
}
.mobile-header .mobile-menu-toggle__bar {
display: block;
width: 22px;
height: 2px;
background-color: var(--sidebar-text);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-header .brand__icon {
width: 32px;
height: 32px;
border-radius: 8px;
overflow: hidden;
}
.mobile-header .brand__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-header .brand__title {
font-size: 16px;
font-weight: 600;
color: var(--sidebar-text);
}
/* Animate hamburger to X when menu is open */
.mobile-header.menu-open .mobile-menu-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-header.menu-open .mobile-menu-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-header.menu-open .mobile-menu-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Skeleton Loading Screens */
.skeleton {
background: linear-gradient(
90deg,
var(--color-smoke) 25%,
var(--color-snow) 50%,
var(--color-smoke) 75%
);
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .skeleton {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 25%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 75%
);
background-size: 200% 100%;
}
}
.skeleton--text {
height: 1em;
margin-bottom: var(--space-2);
}
.skeleton--heading {
height: 1.5em;
width: 60%;
margin-bottom: var(--space-4);
}
.skeleton--button {
height: 44px;
width: 120px;
border-radius: var(--radius-md);
}
.skeleton--card {
height: 200px;
border-radius: var(--radius-lg);
}
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background: var(--color-smoke);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .skeleton {
background: rgba(255, 255, 255, 0.05);
}
}
}
/* Dark mode loading overlay */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .loading-overlay {
background: rgba(0, 0, 0, 0.7);
}
}
/* Touch Target Improvements for Mobile */
@media (max-width: 600px) {
.wizard-checkbox__input,
.wizard-choice__input {
min-width: 44px;
min-height: 44px;
}
.wizard-button--small,
.theme-toggle-option {
min-height: 44px;
padding: var(--space-3) var(--space-4);
}
/* Standardize Input Heights on Mobile */
.wizard-field__input {
min-height: 52px;
}
/* Fix Horizontal Scrolling for Tabs */
.wizard-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.wizard-tabs::-webkit-scrollbar {
display: none;
}
}
/* ========================================
ENHANCED VISUAL HIERARCHY & SPACING
======================================== */
/* Typography Hierarchy Improvements */
.wizard-screen__title {
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-ink);
margin-bottom: var(--space-4);
}
.wizard-screen__subtitle {
font-size: var(--text-lg);
line-height: 1.6;
font-weight: 400;
letter-spacing: -0.01em;
}
.form-card__title {
letter-spacing: -0.01em;
line-height: 1.3;
}
.form-card__description {
line-height: 1.6;
}
/* Section Spacing - Clear Visual Separation */
.wizard-screen {
padding: clamp(var(--space-6), 3vw, var(--space-12));
}
.wizard-form {
gap: clamp(var(--space-6), 3vw, var(--space-12));
}
.form-card + .form-card {
margin-top: var(--space-6);
}
/* Improved Card Hierarchy */
.form-card {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 1px 2px rgba(0, 0, 0, 0.02);
transition:
box-shadow var(--transition-base),
border-color var(--transition-base);
/* Removed transform transition to prevent position:fixed button glitches */
}
.form-card:hover {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 2px 4px rgba(0, 0, 0, 0.03);
/* Removed transform: translateY(-1px) - it breaks position:fixed buttons */
}
.form-card:focus-within {
border-color: var(--color-primary);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 2px 4px rgba(0, 0, 0, 0.03),
0 0 0 3px rgba(14, 118, 253, 0.1);
}
/* Enhanced Header Spacing */
.form-card__header {
padding-bottom: var(--space-4);
margin-bottom: var(--space-4);
}
.form-card__header + .form-card__body {
padding-top: 0;
}
/* Field Group Spacing */
.field-group {
margin-bottom: var(--space-5);
}
.field-group:last-child {
margin-bottom: 0;
}
.wizard-field + .wizard-field {
margin-top: var(--space-4);
}
/* Label Hierarchy */
.wizard-field__label,
.field-group__label {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
margin-bottom: var(--space-2);
display: block;
letter-spacing: -0.01em;
}
.wizard-field__hint,
.field-group__hint {
font-size: var(--text-xs);
color: var(--color-silver);
margin-top: var(--space-2);
line-height: 1.5;
}
/* Input Spacing and Hierarchy */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
margin-top: var(--space-1);
}
/* Section Dividers */
.wizard-divider {
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--color-border) 20%,
var(--color-border) 80%,
transparent
);
border: none;
margin: var(--space-8) 0;
}
/* Content Width and Breathing Room */
.wizard-screen__content {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-4);
}
/* Action Button Spacing */
.wizard-actions {
margin-top: clamp(var(--space-8), 4vw, var(--space-12));
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
gap: var(--space-3);
}
/* Consistent Vertical Rhythm */
p + p {
margin-top: var(--space-4);
}
h1 + p,
h2 + p,
h3 + p {
margin-top: var(--space-3);
}
/* Info Panel Spacing */
.wizard-info-panel {
margin-top: var(--space-3);
margin-bottom: var(--space-4);
padding: var(--space-4);
line-height: 1.6;
}
/* List Spacing */
ul,
ol {
padding-left: var(--space-5);
margin: var(--space-3) 0;
}
li + li {
margin-top: var(--space-2);
}
/* Checkbox and Radio Spacing */
.checkbox-group,
.radio-group {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Enhanced Grid Spacing */
.form-card-grid {
gap: var(--space-5);
}
/* Tab Panel Spacing */
.wizard-tab-panel {
padding: var(--space-5);
}
/* Localization Row Spacing */
.localization-row + .localization-row {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
/* Template Card Spacing */
.template-card {
padding: var(--space-5);
margin-bottom: var(--space-4);
}
/* Improved Button Group Spacing */
.button-group {
display: flex;
gap: var(--space-3);
align-items: center;
}
.button-group--vertical {
flex-direction: column;
align-items: stretch;
}
/* Badge and Chip Spacing */
.wizard-badge,
.wizard-chip {
margin: 0 var(--space-1);
}
/* Code Block Spacing */
pre,
.wizard-json__code {
margin: var(--space-4) 0;
padding: var(--space-4);
}
/* Table Spacing (if used) */
table {
border-spacing: 0;
margin: var(--space-4) 0;
}
th,
td {
padding: var(--space-3) var(--space-4);
}
/* Empty State Spacing */
.empty-state {
padding: var(--space-12) var(--space-6);
text-align: center;
}
/* Alert and Notice Spacing */
.alert,
.notice {
margin: var(--space-4) 0;
padding: var(--space-4);
border-radius: var(--radius-md);
}
/* Responsive Spacing Adjustments */
@media (max-width: 900px) {
.wizard-screen {
padding: var(--space-4);
}
.wizard-form {
gap: var(--space-5);
}
.wizard-actions {
margin-top: var(--space-6);
padding-top: var(--space-4);
}
.form-card {
padding: var(--space-4);
}
.form-card__header {
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
}
}
@media (max-width: 600px) {
.wizard-screen {
padding: var(--space-3);
}
.wizard-form {
gap: var(--space-4);
}
.form-card + .form-card {
margin-top: var(--space-4);
}
.wizard-actions {
margin-top: var(--space-5);
flex-direction: column;
}
.wizard-actions .btn {
width: 100%;
}
}
/* High Contrast Spacing Enhancement */
@media (prefers-contrast: high) {
.form-card {
border-width: 2px;
}
.form-card__header {
border-bottom-width: 2px;
}
.wizard-divider {
background: var(--color-border-strong);
height: 2px;
}
}
/* ========================================
CONSOLIDATED BUTTON SYSTEM
======================================== */
/* Base Button Styles - Applied to all buttons */
.btn,
.wizard-button {
/* Reset */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--text-base);
font-weight: 600;
line-height: 1.5;
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 10px 20px;
min-height: 44px;
min-width: 100px;
/* Visual */
border-radius: var(--radius-md);
border: 2px solid transparent;
background: var(--color-surface);
color: var(--color-ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Interaction */
cursor: pointer;
text-decoration: none;
user-select: none;
white-space: nowrap;
/* Transitions */
transition:
background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base),
box-shadow var(--transition-base),
transform var(--transition-fast);
}
/* Primary Button - Main actions */
.btn--primary,
.wizard-button--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #FFFFFF;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(14, 118, 253, 0.2);
}
.btn--primary:hover:not(:disabled),
.wizard-button--primary:hover:not(:disabled) {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(14, 118, 253, 0.3);
transform: translateY(-1px);
}
.btn--primary:active:not(:disabled),
.wizard-button--primary:active:not(:disabled) {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 1px 1px rgba(14, 118, 253, 0.2);
}
/* Secondary Button - Alternative actions */
.btn--secondary,
.wizard-button--secondary {
background: var(--color-surface);
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--secondary:hover:not(:disabled),
.wizard-button--secondary:hover:not(:disabled) {
background: var(--color-primary-light);
border-color: var(--color-primary-dark);
color: var(--color-primary-dark);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(14, 118, 253, 0.15);
}
.btn--secondary:active:not(:disabled),
.wizard-button--secondary:active:not(:disabled) {
transform: translateY(0);
background: var(--color-primary-light);
}
/* Success Button - Positive actions */
.btn--success,
.wizard-button--success {
background: var(--color-success);
border-color: var(--color-success);
color: #FFFFFF;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(16, 185, 129, 0.2);
}
.btn--success:hover:not(:disabled),
.wizard-button--success:hover:not(:disabled) {
background: #059669;
border-color: #059669;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(16, 185, 129, 0.3);
transform: translateY(-1px);
}
/* Danger Button - Destructive actions */
.btn--danger,
.wizard-button--danger {
background: var(--color-error);
border-color: var(--color-error);
color: #FFFFFF;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(239, 68, 68, 0.2);
}
.btn--danger:hover:not(:disabled),
.wizard-button--danger:hover:not(:disabled) {
background: #DC2626;
border-color: #DC2626;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(239, 68, 68, 0.3);
transform: translateY(-1px);
}
/* Warning Button - Caution actions */
.btn--warning,
.wizard-button--warning {
background: var(--color-warning);
border-color: var(--color-warning);
color: #FFFFFF;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(245, 158, 11, 0.2);
}
.btn--warning:hover:not(:disabled),
.wizard-button--warning:hover:not(:disabled) {
background: #D97706;
border-color: #D97706;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(245, 158, 11, 0.3);
transform: translateY(-1px);
}
/* Ghost Button - Minimal styling */
.btn--ghost,
.wizard-button--ghost {
background: transparent;
border-color: transparent;
color: var(--color-slate);
box-shadow: none;
min-width: auto;
}
.btn--ghost:hover:not(:disabled),
.wizard-button--ghost:hover:not(:disabled) {
background: var(--color-smoke);
color: var(--color-ink);
box-shadow: none;
}
/* Text Button - Link-like appearance */
.btn--text,
.wizard-button--text {
background: transparent;
border-color: var(--color-border);
color: var(--color-ink);
box-shadow: none;
min-width: auto;
padding: 6px 12px;
min-height: 36px;
}
.btn--text:hover:not(:disabled),
.wizard-button--text:hover:not(:disabled) {
background: var(--color-smoke);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Outline Button - Border emphasis */
.btn--outline,
.wizard-button--outline {
background: transparent;
border-color: var(--color-border-strong);
color: var(--color-ink);
}
.btn--outline:hover:not(:disabled),
.wizard-button--outline:hover:not(:disabled) {
background: var(--color-surface);
border-color: var(--color-ink);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Button Sizes */
.btn--small,
.wizard-button--small {
padding: 6px 14px;
min-height: 36px;
min-width: 80px;
font-size: var(--text-sm);
}
.btn--large,
.wizard-button--large {
padding: 14px 28px;
min-height: 52px;
min-width: 140px;
font-size: var(--text-lg);
}
.btn--icon,
.wizard-button--icon {
padding: 10px;
min-width: 44px;
aspect-ratio: 1;
}
/* Button States */
.btn:disabled,
.btn[disabled],
.wizard-button:disabled,
.wizard-button[disabled] {
cursor: not-allowed;
opacity: 0.5;
background: var(--color-smoke) !important;
border-color: var(--color-border) !important;
color: var(--color-silver) !important;
box-shadow: none !important;
transform: none !important;
pointer-events: none;
}
.btn:focus-visible,
.wizard-button:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
box-shadow: 0 0 0 4px rgba(14, 118, 253, 0.15);
}
.btn--loading,
.wizard-button--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn--loading::after,
.wizard-button--loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #FFFFFF;
animation: button-spin 0.6s linear infinite;
}
@keyframes button-spin {
to { transform: rotate(360deg); }
}
/* Button Groups */
.button-group {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
}
.button-group--attached {
gap: 0;
}
.button-group--attached .btn,
.button-group--attached .wizard-button {
border-radius: 0;
margin-left: -2px;
}
.button-group--attached .btn:first-child,
.button-group--attached .wizard-button:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
margin-left: 0;
}
.button-group--attached .btn:last-child,
.button-group--attached .wizard-button:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.button-group--vertical {
flex-direction: column;
align-items: stretch;
}
.button-group--full-width {
width: 100%;
}
.button-group--full-width .btn,
.button-group--full-width .wizard-button {
flex: 1;
}
/* Responsive Button Behavior */
@media (max-width: 600px) {
.btn,
.wizard-button {
min-width: auto;
width: 100%;
}
.button-group {
flex-direction: column;
width: 100%;
}
.button-group .btn,
.button-group .wizard-button {
width: 100%;
}
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .btn,
html:not([data-theme='light']) .wizard-button {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html:not([data-theme='light']) .btn--ghost,
html:not([data-theme='light']) .wizard-button--ghost {
color: var(--color-slate);
}
html:not([data-theme='light']) .btn--ghost:hover:not(:disabled),
html:not([data-theme='light']) .wizard-button--ghost:hover:not(:disabled) {
background: var(--color-smoke);
color: var(--color-ink);
}
}
/* ========================================
ENHANCED FORM INPUT TOUCH TARGETS
======================================== */
/* Base Input Enhancements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
/* Enhanced Touch Targets */
min-height: 48px;
padding: 12px 16px;
font-size: var(--text-base);
line-height: 1.5;
/* Visual Styling */
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-ink);
width: 100%;
/* Smooth Interactions */
transition:
border-color var(--transition-base),
background-color var(--transition-base),
box-shadow var(--transition-base);
/* Typography */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
/* Remove default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Textarea Specific */
textarea {
min-height: 120px;
resize: vertical;
padding: 14px 16px;
}
/* Select Specific - Apple Style */
select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868B' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 12px !important;
padding-right: 40px;
}
/* Input States - Hover */
input[type="text"]:hover:not(:disabled):not(:focus),
input[type="email"]:hover:not(:disabled):not(:focus),
input[type="password"]:hover:not(:disabled):not(:focus),
input[type="number"]:hover:not(:disabled):not(:focus),
input[type="tel"]:hover:not(:disabled):not(:focus),
input[type="url"]:hover:not(:disabled):not(:focus),
input[type="search"]:hover:not(:disabled):not(:focus),
input[type="date"]:hover:not(:disabled):not(:focus),
input[type="time"]:hover:not(:disabled):not(:focus),
input[type="datetime-local"]:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-strong);
background: var(--color-snow);
}
/* Input States - Focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
border-color: var(--color-primary);
background: var(--color-surface);
outline: none;
box-shadow:
0 0 0 3px rgba(14, 118, 253, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Input States - Disabled */
input:disabled,
textarea:disabled,
select:disabled {
background: var(--color-smoke);
border-color: var(--color-border);
color: var(--color-silver);
cursor: not-allowed;
opacity: 0.6;
}
/* Input States - Read-only */
input:read-only,
textarea:read-only {
background: var(--color-snow);
border-color: var(--color-border);
cursor: default;
}
/* Validation States - Valid */
input.is-valid,
textarea.is-valid,
select.is-valid,
input:valid:not(:placeholder-shown):not(:focus),
textarea:valid:not(:placeholder-shown):not(:focus) {
border-color: var(--color-success);
background-color: rgba(16, 185, 129, 0.02);
}
/* Validation States - Invalid */
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
input:invalid:not(:placeholder-shown):not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--color-error);
background-color: rgba(239, 68, 68, 0.02);
}
/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
color: var(--color-silver);
opacity: 0.7;
}
input:focus::placeholder,
textarea:focus::placeholder {
opacity: 0.5;
}
/* Label Enhancements for Touch Targets */
label {
display: block;
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
margin-bottom: var(--space-2);
cursor: pointer;
user-select: none;
}
/* Checkbox and Radio Enhanced Touch Areas */
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
cursor: pointer;
min-height: 44px;
}
/* Custom Checkbox Wrapper */
.checkbox-wrapper,
.radio-wrapper {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 44px;
padding: var(--space-2);
cursor: pointer;
user-select: none;
border-radius: var(--radius-sm);
transition: background-color var(--transition-base);
}
.checkbox-wrapper:hover,
.radio-wrapper:hover {
background-color: var(--color-snow);
}
/* Input Group Enhancements */
.input-group {
display: flex;
gap: 0;
width: 100%;
}
.input-group input {
flex: 1;
}
.input-group-prepend,
.input-group-append {
display: flex;
align-items: center;
padding: 0 var(--space-4);
background: var(--color-smoke);
border: 2px solid var(--color-border);
color: var(--color-slate);
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
}
.input-group-prepend {
border-right: none;
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.input-group-append {
border-left: none;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.input-group input {
border-radius: 0;
}
.input-group-prepend + input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group input + .input-group-append {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
/* Number Input Enhancements */
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Search Input Enhancements */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/* File Input Enhancements */
input[type="file"] {
padding: 10px;
cursor: pointer;
}
input[type="file"]::file-selector-button {
padding: 8px 16px;
margin-right: var(--space-3);
border: none;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: #FFFFFF;
font-weight: 600;
cursor: pointer;
transition: background-color var(--transition-base);
}
input[type="file"]::file-selector-button:hover {
background: var(--color-primary-dark);
}
/* Responsive Adjustments */
@media (max-width: 600px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
font-size: 16px; /* Prevents zoom on iOS */
min-height: 52px; /* Larger touch targets on mobile */
}
textarea {
min-height: 140px;
}
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) input,
html:not([data-theme='light']) textarea,
html:not([data-theme='light']) select {
background: var(--color-snow);
border-color: var(--color-smoke);
color: var(--color-ink);
}
html:not([data-theme='light']) input:hover:not(:disabled):not(:focus),
html:not([data-theme='light']) textarea:hover:not(:disabled):not(:focus),
html:not([data-theme='light']) select:hover:not(:disabled):not(:focus) {
background: var(--color-smoke);
border-color: var(--color-silver);
}
html:not([data-theme='light']) input:focus,
html:not([data-theme='light']) textarea:focus,
html:not([data-theme='light']) select:focus {
background: var(--color-snow);
border-color: var(--color-primary);
}
html:not([data-theme='light']) select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989D' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
}
}
/* ========================================
ENHANCED HOVER STATES & SUCCESS ANIMATIONS
======================================== */
/* Enhanced Card Hover Effects */
.form-card,
.wizard-option,
.export-option,
.template-card {
transition:
transform var(--transition-base),
box-shadow var(--transition-base),
border-color var(--transition-base);
}
.form-card:hover,
.wizard-option:hover,
.export-option:hover,
.template-card:hover {
transform: translateY(-2px);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.08),
0 3px 6px rgba(0, 0, 0, 0.04);
}
/* Navigation Item Hover Effects */
.wizard-nav-item {
position: relative;
transition:
background-color var(--transition-base),
color var(--transition-base),
transform var(--transition-fast);
}
.wizard-nav-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
width: 3px;
height: 70%;
background: var(--color-primary);
border-radius: 0 2px 2px 0;
transition: transform var(--transition-base);
}
.wizard-nav-item:hover::before,
.wizard-nav-item[data-active="true"]::before {
transform: translateY(-50%) scaleY(1);
}
.wizard-nav-item:hover:not([data-active="true"]) {
background: var(--sidebar-hover);
transform: translateX(2px);
}
/* Tab Hover Effects */
.wizard-tab,
.page-guide__tab {
position: relative;
transition:
background-color var(--transition-base),
color var(--transition-base);
}
.wizard-tab::after,
.page-guide__tab::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 2px;
background: var(--color-primary);
transition: transform var(--transition-base);
}
.wizard-tab:hover::after,
.page-guide__tab:hover::after {
transform: translateX(-50%) scaleX(0.5);
}
.wizard-tab.active::after,
.page-guide__tab.active::after {
transform: translateX(-50%) scaleX(1);
}
/* Link Hover Effects */
a:not(.btn):not(.wizard-button):not(.wizard-nav-item) {
position: relative;
transition: color var(--transition-base);
}
a:not(.btn):not(.wizard-button):not(.wizard-nav-item):hover {
color: var(--color-primary-dark);
}
/* Icon Hover Effects */
.wizard-info-trigger,
.page-guide__collapse,
.toast__close {
transition:
transform var(--transition-fast),
background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base);
}
.wizard-info-trigger:hover,
.page-guide__collapse:hover,
.toast__close:hover {
transform: scale(1.1);
}
/* ========================================
SUCCESS ANIMATIONS
======================================== */
/* Success Checkmark Animation */
@keyframes successCheckmark {
0% {
transform: scale(0) rotate(-45deg);
opacity: 0;
}
50% {
transform: scale(1.2) rotate(-45deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(-45deg);
opacity: 1;
}
}
@keyframes successPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
@keyframes successFadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Success State Class */
.success-state {
animation: successFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.success-checkmark {
animation: successCheckmark 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Success Banner */
.success-banner {
background: linear-gradient(
135deg,
var(--color-success-light) 0%,
rgba(16, 185, 129, 0.05) 100%
);
border: 2px solid var(--color-success);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
animation: successFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.success-banner__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-success);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
animation: successPulse 1s ease-in-out 3;
}
/* Progress Completion Animation */
@keyframes progressComplete {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.progress-complete {
animation: progressComplete 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Step Complete Animation */
@keyframes stepComplete {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.step-complete {
animation: stepComplete 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ripple Effect */
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(4);
opacity: 0;
}
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: scale(0);
pointer-events: none;
}
.ripple-effect:active::after {
animation: ripple 0.6s ease-out;
}
/* Shimmer Loading Effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer {
background: linear-gradient(
90deg,
var(--color-smoke) 25%,
var(--color-snow) 50%,
var(--color-smoke) 75%
);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* Smooth Slide In Animations */
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInFromBottom {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-in-left {
animation: slideInFromLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-right {
animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-top {
animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-bottom {
animation: slideInFromBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fade Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-in {
animation: fadeIn 0.3s ease-in;
}
.fade-out {
animation: fadeOut 0.3s ease-out;
}
/* Scale Animations */
@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes scaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.9);
opacity: 0;
}
}
.scale-in {
animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-out {
animation: scaleOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Bounce Animation */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.bounce {
animation: bounce 0.6s ease-in-out 3;
}
/* Shake Animation (for errors) */
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.shake {
animation: shake 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark Mode - Template Card Overrides */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .difficulty-badge--beginner {
background: rgba(52, 211, 153, 0.15);
border: 1px solid rgba(52, 211, 153, 0.3);
color: #34D399;
}
html:not([data-theme='light']) .difficulty-badge--intermediate {
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.3);
color: #FBBF24;
}
html:not([data-theme='light']) .difficulty-badge--advanced {
background: rgba(248, 113, 113, 0.15);
border: 1px solid rgba(248, 113, 113, 0.3);
color: #F87171;
}
html:not([data-theme='light']) .template-card__icon {
background: rgba(59, 158, 255, 0.15);
}
html:not([data-theme='light']) .template-card__preview {
background: rgba(59, 158, 255, 0.08);
border-color: rgba(59, 158, 255, 0.2);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.success-state,
.success-checkmark,
.success-banner,
.success-banner__icon,
.progress-complete,
.step-complete,
.ripple-effect::after,
.shimmer,
.slide-in-left,
.slide-in-right,
.slide-in-top,
.slide-in-bottom,
.fade-in,
.fade-out,
.scale-in,
.scale-out,
.bounce,
.shake {
animation: none !important;
transition: none !important;
}
}
/* ============================================================================
UTILITY CLASSES
Modern utility-first approach for common patterns
============================================================================ */
/* Spacing Utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
/* Flexbox Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
/* Text Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-silver); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }
/* Visibility Utilities */
.invisible { visibility: hidden; }
.visible { visibility: visible; }
/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Accessibility Utilities */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
.disabled {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
/* ============================================================================
ENHANCED MICRO-INTERACTIONS
Smooth animations and transitions for better UX
============================================================================ */
/* Enhanced Button Interactions */
.wizard-button,
.wizard-button--primary,
.wizard-button--secondary,
.wizard-button--tertiary {
transition: all var(--transition-base);
/* PERFORMANCE: Removed will-change - hover only, many elements */
}
.wizard-button:hover:not(:disabled),
.wizard-button--primary:hover:not(:disabled),
.wizard-button--secondary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
html[data-theme='dark'] .wizard-button:hover:not(:disabled),
html[data-theme='dark'] .wizard-button--primary:hover:not(:disabled),
html[data-theme='dark'] .wizard-button--secondary:hover:not(:disabled) {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.wizard-button:active:not(:disabled),
.wizard-button--primary:active:not(:disabled),
.wizard-button--secondary:active:not(:disabled) {
transform: translateY(0);
transition-duration: 50ms;
}
/* Enhanced Input Focus Glow */
.wizard-field__input:focus,
.form-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
outline: none;
box-shadow:
0 0 0 3px var(--color-primary-light),
0 0 0 4px var(--color-primary),
0 2px 8px rgba(14, 118, 253, 0.15);
transition: box-shadow 150ms ease;
}
html[data-theme='dark'] .wizard-field__input:focus,
html[data-theme='dark'] .form-input:focus,
html[data-theme='dark'] input[type="text"]:focus,
html[data-theme='dark'] input[type="number"]:focus,
html[data-theme='dark'] input[type="email"]:focus,
html[data-theme='dark'] textarea:focus,
html[data-theme='dark'] select:focus {
box-shadow:
0 0 0 3px rgba(59, 158, 255, 0.2),
0 0 0 4px rgba(59, 158, 255, 0.5),
0 2px 8px rgba(59, 158, 255, 0.2);
}
/* Success Checkmark Pop Animation */
@keyframes checkmark-pop {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.wizard-path__pill--complete::after,
.wizard-nav-item--complete .wizard-path__pill::after {
animation: checkmark-pop 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Loading Pulse Animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.loading,
.is-loading {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Smooth Slide Animation */
@keyframes slide-in-up {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-in-up {
animation: slide-in-up 200ms ease-out;
}
/* Card Hover Lift */
.form-card,
.wizard-card,
.template-card {
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.template-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
html[data-theme='dark'] .template-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
/* Focus Visible Outline (Modern Browsers) */
*:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
button:focus-visible,
.wizard-button:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* Spinner Animation */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 1s linear infinite;
}
/* Fade In Animation */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-slow {
animation: fade-in 400ms ease-in;
}
/* Shimmer Loading Effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer-loading {
background: linear-gradient(
90deg,
var(--color-surface) 0%,
var(--color-background) 50%,
var(--color-surface) 100%
);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* Toast/Notification Slide In */
@keyframes toast-slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-enter {
animation: toast-slide-in 200ms ease-out;
}
/* Ripple Effect on Click */
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.5;
}
100% {
transform: scale(4);
opacity: 0;
}
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
width: 100px;
height: 100px;
animation: ripple 600ms ease-out;
pointer-events: none;
}
/* ============================================================================
AUTHORIZATION DROPDOWN SECTIONS
Uniform styling for all "Authorized to perform action / change rules" sections
============================================================================ */
.authorization-group {
display: grid;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.authorization-group .field-group {
margin-bottom: 0;
}
/* Authorization dropdown with help icon in label */
.authorization-group .wizard-field__label {
display: flex;
align-items: center;
gap: var(--space-2);
}
.authorization-group .wizard-field__label .help-icon {
flex-shrink: 0;
}
/* Inline panels for Identity/Group inputs */
.authorization-inline-panel {
margin-top: var(--space-3);
margin-left: var(--space-6);
padding: var(--space-4);
background: var(--color-surface-alt);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
animation: slideDown 0.25s ease-out;
overflow: hidden;
transition: opacity 0.25s ease-out, max-height 0.25s ease-out, margin 0.25s ease-out, padding 0.25s ease-out;
}
.authorization-inline-panel[hidden] {
display: none;
}
.authorization-inline-panel.collapsing {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}
.authorization-inline-panel .field-group {
margin-bottom: 0;
}
/* No groups warning message */
.authorization-inline-panel .field-message {
margin-top: var(--space-3);
}
/* Visual indicator when non-default value selected */
.authorization-group select.wizard-field__input:not([data-default]) {
border-color: var(--color-primary);
}
/* Responsive adjustments */
@media (max-width: 600px) {
.authorization-inline-panel {
margin-left: var(--space-4);
padding: var(--space-3);
}
}
/* Governance safeguards checkbox section within authorization groups */
.authorization-safeguards {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.authorization-safeguards .wizard-field__label {
font-size: var(--font-size-sm);
color: var(--color-muted);
margin-bottom: var(--space-3);
}
/* ============================================================================
RESPONSIVE UTILITY OVERRIDES
Apply utilities at specific breakpoints
============================================================================ */
@media (max-width: 600px) {
.sm\:hidden { display: none; }
.sm\:block { display: block; }
.sm\:flex-col { flex-direction: column; }
.sm\:text-sm { font-size: var(--text-sm); }
.sm\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.sm\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}
@media (min-width: 900px) {
.md\:flex { display: flex; }
.md\:hidden { display: none; }
.md\:block { display: block; }
.md\:flex-row { flex-direction: row; }
}
/* ============================================================================
ACCESSIBILITY ENHANCEMENTS
Improve keyboard navigation and screen reader experience
============================================================================ */
/* Focus Trap Helper */
.focus-trap {
position: relative;
}
.focus-trap:focus {
outline: none;
}
/* Skip Link for Keyboard Navigation */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: white;
padding: var(--space-2) var(--space-4);
text-decoration: none;
border-radius: var(--radius-md);
z-index: 100;
}
.skip-link:focus {
top: var(--space-2);
outline: 3px solid var(--color-primary-dark);
outline-offset: 2px;
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.wizard-button--primary {
border: 2px solid currentColor;
}
.form-input,
.wizard-field__input {
border-width: 2px;
}
*:focus-visible {
outline-width: 4px;
}
}
/* Print Styles */
@media print {
.wizard-sidebar,
.wizard-header,
.wizard-tabs,
.wizard-actions,
.page-guide {
display: none !important;
}
.wizard-screen {
page-break-after: always;
}
.form-card {
box-shadow: none;
border: 1px solid #ccc;
}
}
/* ============================================
Interactive Background Glow
Optimized CSS-only gradients with subtle parallax
============================================ */
.background-orbs {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
--mouse-x: 50;
--mouse-y: 50;
}
/* Primary glow layer - Cyan & Purple */
.background-orbs::before {
content: '';
position: absolute;
inset: -25%;
background:
/* Cyan glow - top left */
radial-gradient(
ellipse 50% 50% at calc(15% + var(--mouse-x) * 0.15%) calc(20% + var(--mouse-y) * 0.1%),
rgba(0, 212, 255, 0.35) 0%,
rgba(8, 145, 178, 0.15) 30%,
transparent 55%
),
/* Purple glow - bottom right */
radial-gradient(
ellipse 45% 45% at calc(85% - var(--mouse-x) * 0.1%) calc(70% - var(--mouse-y) * 0.08%),
rgba(139, 92, 246, 0.3) 0%,
rgba(124, 58, 237, 0.12) 35%,
transparent 55%
);
transform: translateZ(0);
}
/* Secondary glow layer - Blue & Green */
.background-orbs::after {
content: '';
position: absolute;
inset: -20%;
background:
/* Blue glow - bottom left */
radial-gradient(
ellipse 40% 40% at calc(20% + var(--mouse-x) * 0.08%) calc(80% + var(--mouse-y) * 0.06%),
rgba(59, 130, 246, 0.25) 0%,
rgba(37, 99, 235, 0.1) 30%,
transparent 50%
),
/* Green glow - center right */
radial-gradient(
ellipse 35% 35% at calc(75% - var(--mouse-x) * 0.05%) calc(50% - var(--mouse-y) * 0.05%),
rgba(16, 185, 129, 0.2) 0%,
rgba(5, 150, 105, 0.08) 30%,
transparent 45%
);
transform: translateZ(0);
}
/* Light Mode - Warm, soft pastel glows */
html[data-theme='light'] .background-orbs::before {
background:
/* Peach/coral glow - top left */
radial-gradient(
ellipse 50% 50% at calc(15% + var(--mouse-x) * 0.15%) calc(20% + var(--mouse-y) * 0.1%),
rgba(251, 207, 178, 0.4) 0%,
rgba(251, 191, 148, 0.15) 35%,
transparent 55%
),
/* Lavender glow - bottom right */
radial-gradient(
ellipse 45% 45% at calc(85% - var(--mouse-x) * 0.1%) calc(70% - var(--mouse-y) * 0.08%),
rgba(199, 186, 243, 0.35) 0%,
rgba(167, 139, 250, 0.12) 35%,
transparent 55%
);
}
html[data-theme='light'] .background-orbs::after {
background:
/* Pink glow - bottom left */
radial-gradient(
ellipse 40% 40% at calc(20% + var(--mouse-x) * 0.08%) calc(80% + var(--mouse-y) * 0.06%),
rgba(252, 182, 199, 0.3) 0%,
rgba(251, 146, 172, 0.1) 30%,
transparent 50%
),
/* Mint glow - center right */
radial-gradient(
ellipse 35% 35% at calc(75% - var(--mouse-x) * 0.05%) calc(50% - var(--mouse-y) * 0.05%),
rgba(167, 243, 208, 0.25) 0%,
rgba(110, 231, 183, 0.08) 30%,
transparent 45%
);
}
/* ============================================
LIGHT MODE - Component Overrides (Soft & Warm)
============================================ */
/* Input Fields - Light Mode */
html[data-theme='light'] .wizard-field__input {
background: #FFFFFF;
border: 1px solid rgba(120, 100, 80, 0.2);
color: #1A1F36;
}
html[data-theme='light'] .wizard-field__input::placeholder {
color: rgba(100, 90, 80, 0.5);
}
html[data-theme='light'] .wizard-field__input:hover:not(:disabled):not(:focus) {
border-color: rgba(120, 100, 80, 0.3);
}
html[data-theme='light'] .wizard-field__input:focus {
border-color: #5B4FCF;
box-shadow: 0 0 0 3px rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .wizard-field__label {
color: #374151;
}
html[data-theme='light'] .wizard-field__hint,
html[data-theme='light'] .field-hint {
color: #64748B;
}
/* Sidebar - Light Mode */
html[data-theme='light'] .wizard-outline,
html[data-theme='light'] .wizard-sidebar {
background: rgba(255, 252, 249, 0.95);
border-right: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .wizard-outline__item,
html[data-theme='light'] .sidebar-nav__item {
color: #4A4540;
}
html[data-theme='light'] .wizard-outline__item:hover,
html[data-theme='light'] .sidebar-nav__item:hover {
background: rgba(91, 79, 207, 0.06);
}
html[data-theme='light'] .wizard-outline__item--active,
html[data-theme='light'] .sidebar-nav__item--active {
background: rgba(91, 79, 207, 0.1);
color: #5B4FCF;
}
html[data-theme='light'] .wizard-outline__step-number,
html[data-theme='light'] .step-indicator__number {
background: rgba(91, 79, 207, 0.1);
color: #5B4FCF;
}
html[data-theme='light'] .wizard-sidebar__header {
border-bottom: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .wizard-sidebar__title {
color: #1A1F36;
}
/* Guide Panel - Light Mode */
html[data-theme='light'] .page-guide {
background: rgba(254, 251, 247, 0.95);
border-left: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .page-guide__header {
background: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(120, 100, 80, 0.06);
}
html[data-theme='light'] .page-guide__title {
color: #1A1F36;
}
html[data-theme='light'] .page-guide__intro {
color: #4A5568;
}
html[data-theme='light'] .page-guide__content {
color: #4A5568;
}
html[data-theme='light'] .page-guide__section-title {
color: #1A1F36;
}
html[data-theme='light'] .page-guide__tab {
color: #64748B;
}
html[data-theme='light'] .page-guide__tab.active,
html[data-theme='light'] .page-guide__tab--active {
color: #5B4FCF;
background: rgba(91, 79, 207, 0.1);
}
/* ═══════════════════════════════════════════════════════
TEMPLATE CARDS - LIGHT MODE ENHANCED
Each template shows its unique color theme without hover
═══════════════════════════════════════════════════════ */
/* Template Cards - Light Mode Base */
html[data-theme='light'] .template-card {
background: linear-gradient(145deg, #FFFFFF 0%, #FDFBF9 100%);
border: 1px solid rgba(120, 100, 80, 0.1);
border-left: 4px solid var(--accent-color, #6366F1);
box-shadow:
0 2px 8px rgba(120, 100, 80, 0.06),
inset 0 0 60px var(--card-tint, rgba(99, 102, 241, 0.03));
}
html[data-theme='light'] .template-card:hover {
box-shadow:
0 8px 24px rgba(120, 100, 80, 0.1),
0 0 40px var(--card-glow-light, rgba(99, 102, 241, 0.08)),
inset 0 0 80px var(--card-tint, rgba(99, 102, 241, 0.05));
border-color: rgba(120, 100, 80, 0.15);
border-left-color: var(--accent-color, #6366F1);
border-left-width: 4px;
}
/* Template-Specific Light Mode Colors */
html[data-theme='light'] .template-card[data-template="scratch"] {
--card-tint: rgba(99, 102, 241, 0.04);
--card-glow-light: rgba(99, 102, 241, 0.1);
}
html[data-theme='light'] .template-card[data-template="simple-fixed"] {
--card-tint: rgba(16, 185, 129, 0.04);
--card-glow-light: rgba(16, 185, 129, 0.1);
}
html[data-theme='light'] .template-card[data-template="utility"] {
--card-tint: rgba(245, 158, 11, 0.04);
--card-glow-light: rgba(245, 158, 11, 0.1);
}
html[data-theme='light'] .template-card[data-template="reward"] {
--card-tint: rgba(236, 72, 153, 0.04);
--card-glow-light: rgba(236, 72, 153, 0.1);
}
/* Pattern Overlay - Always visible in light mode */
html[data-theme='light'] .template-card::after {
opacity: 0.06;
}
html[data-theme='light'] .template-card:hover::after {
opacity: 0.1;
}
/* Glow Effect - Subtle ambient tint always visible */
html[data-theme='light'] .template-card::before {
background: radial-gradient(
circle at 30% 30%,
var(--card-tint, rgba(99, 102, 241, 0.06)) 0%,
transparent 60%
);
opacity: 1;
}
html[data-theme='light'] .template-card:hover::before {
background: radial-gradient(
circle at 30% 30%,
var(--card-glow-light, rgba(99, 102, 241, 0.12)) 0%,
transparent 50%
);
}
/* Icon Container - Light Mode */
html[data-theme='light'] .template-card__icon {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.7) 100%
);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 0 20px var(--card-tint, rgba(99, 102, 241, 0.1));
}
html[data-theme='light'] .template-card__icon svg {
fill: var(--accent-color, #6366F1);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
html[data-theme='light'] .template-card:hover .template-card__icon {
border-color: var(--accent-color, #6366F1);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 0 30px var(--card-tint, rgba(99, 102, 241, 0.15));
}
html[data-theme='light'] .template-card__title {
color: #1A1F36;
}
html[data-theme='light'] .template-card__description {
color: #64748B;
}
/* Time Estimate - Light Mode */
html[data-theme='light'] .time-estimate {
color: #64748B;
}
/* Spec Badges - Light Mode */
html[data-theme='light'] .spec-badge {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
color: var(--accent-color, #6366F1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
html[data-theme='light'] .spec-badge:hover {
background: rgba(255, 255, 255, 0.95);
border-color: var(--accent-color, #6366F1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Difficulty Badges - Light Mode */
html[data-theme='light'] .difficulty-badge--beginner {
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #15803D;
box-shadow: none;
}
html[data-theme='light'] .difficulty-badge--intermediate {
background: rgba(234, 179, 8, 0.12);
border: 1px solid rgba(234, 179, 8, 0.3);
color: #A16207;
box-shadow: none;
}
html[data-theme='light'] .difficulty-badge--advanced {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #DC2626;
box-shadow: none;
}
/* Selected State - Light Mode */
html[data-theme='light'] .template-card[aria-pressed="true"],
html[data-theme='light'] .template-card.selected {
border-color: var(--accent-color, #6366F1);
border-left-width: 4px;
box-shadow:
0 0 0 3px rgba(99, 102, 241, 0.15),
0 8px 24px rgba(120, 100, 80, 0.12),
inset 0 0 80px var(--card-tint, rgba(99, 102, 241, 0.06));
}
/* Template Selection Section - Light Mode */
html[data-theme='light'] .template-selection__title {
color: #1A1F36;
}
html[data-theme='light'] .template-selection__description {
color: #64748B;
}
/* ═══════════════════════════════════════════════════════
CONFIGURATION Preview Panel - Light Mode Enhanced
Always visible with template-themed accents
═══════════════════════════════════════════════════════ */
/* Preview Panel Container */
html[data-theme='light'] .template-card__preview {
max-height: 140px;
opacity: 1;
margin-top: var(--space-3);
padding: var(--space-4);
background: linear-gradient(135deg,
rgba(250, 248, 245, 0.95) 0%,
rgba(255, 255, 255, 0.9) 100%
);
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid var(--accent-color, #6366F1);
border-radius: var(--radius-md);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Hover state - enhanced visibility */
html[data-theme='light'] .template-card:hover .template-card__preview {
max-height: 180px;
opacity: 1;
margin-top: var(--space-4);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(250, 248, 245, 0.95) 100%
);
border-color: rgba(0, 0, 0, 0.12);
border-left-color: var(--accent-color, #6366F1);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Preview Title - "CONFIGURATION" Header */
html[data-theme='light'] .template-card__preview-title {
color: #1A1F36;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Preview Labels - High Contrast */
html[data-theme='light'] .template-card__preview-label {
color: #4A5568;
font-weight: 600;
font-size: 0.8125rem;
}
/* Preview Values - Template Accent */
html[data-theme='light'] .template-card__preview-value {
color: var(--accent-color, #6366F1);
font-weight: 700;
font-size: 0.8125rem;
}
/* Template-specific darker accent colors for better contrast */
html[data-theme='light'] .template-card[data-template="scratch"] .template-card__preview-value {
color: #4F46E5;
}
html[data-theme='light'] .template-card[data-template="simple-fixed"] .template-card__preview-value {
color: #059669;
}
html[data-theme='light'] .template-card[data-template="utility"] .template-card__preview-value {
color: #D97706;
}
html[data-theme='light'] .template-card[data-template="reward"] .template-card__preview-value {
color: #DB2777;
}
/* Preview List - Row Spacing */
html[data-theme='light'] .template-card__preview-list {
gap: var(--space-2);
}
/* Preview Items - Row Separators */
html[data-theme='light'] .template-card__preview-item {
padding: var(--space-1) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
html[data-theme='light'] .template-card__preview-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
html[data-theme='light'] .template-card__preview-row {
border-bottom-color: rgba(120, 100, 80, 0.08);
}
/* Template Supply Config Panel - Light Mode */
html[data-theme='light'] .template-supply-config {
background: rgba(254, 251, 247, 0.9);
border: 1px solid rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .template-supply-config__title {
color: #1A1F36;
}
html[data-theme='light'] .template-supply-config__hint {
color: #64748B;
}
html[data-theme='light'] .template-supply-config .wizard-field__input {
background: #FFFFFF;
border: 1px solid rgba(120, 100, 80, 0.2);
color: #1A1F36;
}
html[data-theme='light'] .template-supply-config .wizard-field__input::placeholder {
color: rgba(100, 90, 80, 0.5);
}
html[data-theme='light'] .template-supply-config .wizard-field__label {
color: #374151;
}
html[data-theme='light'] .template-supply-config .wizard-field__hint {
color: #64748B;
}
html[data-theme='light'] .template-supply-config__preview {
background: linear-gradient(135deg, rgba(91, 79, 207, 0.08) 0%, rgba(91, 79, 207, 0.04) 100%);
border: 1px solid rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .template-supply-config .preview-label {
color: #64748B;
}
html[data-theme='light'] .template-supply-config .preview-value {
color: #5B4FCF;
}
/* Template Naming - Light Mode */
html[data-theme='light'] .template-naming-config {
background: rgba(254, 251, 247, 0.9);
border: 1px solid rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .template-naming-config__subtitle {
color: #64748B;
}
/* Supply Cards - Light Mode */
html[data-theme='light'] .supply-config-enhanced {
background: rgba(254, 251, 247, 0.9);
border: 1px solid rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .supply-config__title {
color: #64748B;
}
html[data-theme='light'] .supply-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .supply-card__label {
color: #64748B;
}
html[data-theme='light'] .supply-card__input {
color: #1A1F36;
}
/* Buttons - Light Mode */
html[data-theme='light'] .wizard-button--primary {
background: linear-gradient(135deg, #5B4FCF 0%, #7C3AED 100%);
box-shadow: 0 2px 8px rgba(91, 79, 207, 0.3);
color: #FFFFFF;
}
html[data-theme='light'] .wizard-button--primary:hover:not(:disabled) {
background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
box-shadow: 0 4px 12px rgba(91, 79, 207, 0.4);
}
html[data-theme='light'] .wizard-button--secondary {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(120, 100, 80, 0.2);
color: #4A4540;
}
html[data-theme='light'] .wizard-button--secondary:hover:not(:disabled) {
background: rgba(91, 79, 207, 0.08);
border-color: rgba(91, 79, 207, 0.3);
color: #5B4FCF;
}
html[data-theme='light'] .wizard-button--text {
color: #5B4FCF;
}
html[data-theme='light'] .wizard-button--text:hover:not(:disabled) {
background: rgba(91, 79, 207, 0.08);
}
/* Text & Typography - Light Mode */
html[data-theme='light'] .wizard-screen__title {
color: #1A1F36;
}
html[data-theme='light'] .wizard-screen__subtitle {
color: #64748B;
}
html[data-theme='light'] .wizard-screen__inner {
color: #1A1F36;
}
/* Wizard Choice (Radio/Checkbox options) - Light Mode */
html[data-theme='light'] .wizard-choice {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .wizard-choice:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(120, 100, 80, 0.2);
}
html[data-theme='light'] .wizard-choice:has(.wizard-choice__input:checked) {
background: rgba(91, 79, 207, 0.08);
border-color: #5B4FCF;
}
html[data-theme='light'] .wizard-choice__title {
color: #1A1F36;
}
html[data-theme='light'] .wizard-choice__hint {
color: #64748B;
}
/* Inline Panels - Light Mode */
html[data-theme='light'] .distribution-inline-panel {
background: rgba(254, 251, 247, 0.8);
border: 1px solid rgba(120, 100, 80, 0.1);
}
/* Badges - Light Mode */
html[data-theme='light'] .wizard-badge {
background: rgba(91, 79, 207, 0.1);
color: #5B4FCF;
}
html[data-theme='light'] .wizard-badge--optional {
background: rgba(2, 132, 199, 0.1);
color: #0284C7;
}
/* Contract Preview Modal - Light Mode */
html[data-theme='light'] .contract-modal__content {
background: rgba(255, 252, 249, 0.98);
border: 1px solid rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .contract-modal__header {
background: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .contract-modal__title {
color: #1A1F36;
}
/* Header - Light Mode */
html[data-theme='light'] .wizard-header {
background: rgba(255, 252, 249, 0.95);
border-bottom: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .wizard-header__title {
color: #1A1F36;
}
/* ═══════════════════════════════════════════════════════
Modal System - Light Mode
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .modal__overlay {
background: rgba(120, 100, 80, 0.4);
}
@supports (backdrop-filter: blur(12px)) {
html[data-theme='light'] .modal__overlay {
background: rgba(120, 100, 80, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}
html[data-theme='light'] .modal__content {
background: linear-gradient(165deg, #FFFFFF 0%, #FFFBF7 100%);
border: 1px solid rgba(120, 100, 80, 0.15);
box-shadow:
0 24px 80px rgba(120, 100, 80, 0.2),
0 0 1px rgba(120, 100, 80, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme='light'] .modal__content::before {
background: linear-gradient(90deg,
transparent,
#5B4FCF 50%,
transparent
);
box-shadow: 0 0 20px rgba(91, 79, 207, 0.4);
}
html[data-theme='light'] .modal__header {
border-bottom-color: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .modal__title {
color: #1A1F36;
}
html[data-theme='light'] .modal__body p {
color: #64748B;
}
html[data-theme='light'] .modal__warning {
background: rgba(217, 119, 6, 0.1);
border-color: rgba(217, 119, 6, 0.3);
color: #92400E;
}
html[data-theme='light'] .modal__footer {
border-top-color: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .modal__footer .wizard-button--secondary {
background: transparent;
border: 1px solid rgba(120, 100, 80, 0.2);
color: #4A5568;
}
html[data-theme='light'] .modal__footer .wizard-button--secondary:hover {
background: rgba(120, 100, 80, 0.05);
border-color: rgba(120, 100, 80, 0.3);
color: #1A1F36;
}
html[data-theme='light'] .modal__footer .wizard-button--primary {
background: linear-gradient(135deg, #5B4FCF 0%, #4338CA 100%);
box-shadow: 0 4px 16px rgba(91, 79, 207, 0.3);
}
html[data-theme='light'] .modal__footer .wizard-button--primary:hover {
box-shadow: 0 6px 24px rgba(91, 79, 207, 0.4);
}
html[data-theme='light'] .modal__footer .wizard-button--danger {
background: #DC2626;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}
html[data-theme='light'] .modal__footer .wizard-button--danger:hover:not(:disabled) {
background: #B91C1C;
box-shadow: 0 6px 24px rgba(220, 38, 38, 0.4);
}
/* ═══════════════════════════════════════════════════════
Template Preview in Modal - Light Mode (Redesigned)
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .template-preview {
background: linear-gradient(135deg, rgba(120, 100, 80, 0.06) 0%, rgba(120, 100, 80, 0.02) 100%);
border: 1px solid rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .template-preview__icon {
background: rgba(120, 100, 80, 0.03);
border-color: rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .template-preview__icon::after {
background: linear-gradient(135deg, #5B4FCF, transparent);
}
html[data-theme='light'] .template-preview__icon svg {
fill: #5B4FCF;
}
html[data-theme='light'] .template-preview h3,
html[data-theme='light'] .template-preview__title {
color: #1A1F36;
}
html[data-theme='light'] .template-preview p,
html[data-theme='light'] .template-preview__description {
color: #64748B;
}
html[data-theme='light'] .template-preview__features {
border-top-color: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .template-preview__feature {
background: rgba(91, 79, 207, 0.06);
color: #4A5568;
}
/* ═══════════════════════════════════════════════════════
Feature Showcase Grid - Light Mode (Circular Icons)
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .template-features__title {
color: #64748B;
}
html[data-theme='light'] .template-feature__icon {
background: rgba(120, 100, 80, 0.06);
border-color: rgba(120, 100, 80, 0.15);
}
html[data-theme='light'] .template-feature:hover .template-feature__icon {
background: rgba(120, 100, 80, 0.1);
border-color: rgba(120, 100, 80, 0.2);
}
html[data-theme='light'] .template-feature[data-active="true"] .template-feature__icon {
background: rgba(5, 150, 105, 0.1);
border-color: rgba(5, 150, 105, 0.35);
box-shadow: 0 0 12px rgba(5, 150, 105, 0.2);
}
html[data-theme='light'] .template-feature[data-active="true"] .template-feature__icon svg {
fill: #059669;
}
html[data-theme='light'] .template-feature[data-active="true"] .template-feature__status {
color: #059669;
}
html[data-theme='light'] .template-feature__icon svg {
fill: #64748B;
}
html[data-theme='light'] .template-feature__label {
color: #1A1F36;
}
html[data-theme='light'] .template-feature__status {
color: #64748B;
}
html[data-theme='light'] .template-feature--interactive:hover .template-feature__icon {
border-color: rgba(120, 100, 80, 0.25);
background: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .template-feature--interactive[data-active="true"]:hover .template-feature__icon {
background: rgba(5, 150, 105, 0.15);
border-color: rgba(5, 150, 105, 0.45);
box-shadow: 0 0 16px rgba(5, 150, 105, 0.3);
}
/* ═══════════════════════════════════════════════════════
Supply Configuration - Light Mode
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .supply-config-enhanced {
background: rgba(120, 100, 80, 0.03);
border: 1px solid rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .supply-config__title {
color: #64748B;
}
html[data-theme='light'] .supply-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .supply-card:focus-within {
border-color: #5B4FCF;
box-shadow: 0 0 0 3px rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .supply-card__label {
color: #64748B;
}
html[data-theme='light'] .supply-card__input {
color: #1A1F36;
}
html[data-theme='light'] .supply-card__input::placeholder {
color: rgba(100, 90, 80, 0.5);
}
html[data-theme='light'] .supply-card__select {
color: #1A1F36;
}
html[data-theme='light'] .supply-card__select option {
background: #FFFFFF;
color: #1A1F36;
}
html[data-theme='light'] .supply-card__hint {
color: #64748B;
}
html[data-theme='light'] .supply-ratio__bar {
background: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .supply-ratio__label {
color: #64748B;
}
html[data-theme='light'] .supply-preview {
background: linear-gradient(135deg, rgba(91, 79, 207, 0.08), transparent);
border: 1px solid rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .supply-preview__value {
color: #1A1F36;
}
html[data-theme='light'] .supply-preview__symbol {
color: #64748B;
}
html[data-theme='light'] .supply-preview__details {
color: #64748B;
}
/* ═══════════════════════════════════════════════════════
Contract Preview Modal Overlay - Light Mode
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .contract-preview-modal__overlay {
background: rgba(120, 100, 80, 0.4);
backdrop-filter: blur(4px);
}
/* ═══════════════════════════════════════════════════════
Distribution Cadence & Utility Cards - Light Mode
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .cadence-card,
html[data-theme='light'] .utility-card {
background: rgba(120, 100, 80, 0.03);
border: 1px solid rgba(120, 100, 80, 0.08);
}
html[data-theme='light'] .cadence-card:hover,
html[data-theme='light'] .utility-card:hover {
background: rgba(120, 100, 80, 0.06);
border-color: rgba(120, 100, 80, 0.12);
}
html[data-theme='light'] .cadence-card__title,
html[data-theme='light'] .utility-card__title {
color: #64748B;
}
html[data-theme='light'] .cadence-card__label,
html[data-theme='light'] .utility-card__label {
color: #64748B;
}
html[data-theme='light'] .cadence-card__value,
html[data-theme='light'] .utility-card__value {
color: #1A1F36;
}
html[data-theme='light'] .cadence-card__hint,
html[data-theme='light'] .utility-card__hint {
color: #64748B;
}
/* ═══════════════════════════════════════════════════════
Emission Timeline - Light Mode
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .emission-timeline {
background: rgba(120, 100, 80, 0.03);
border: 1px solid rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .emission-timeline__title {
color: #64748B;
}
html[data-theme='light'] .emission-timeline__label {
color: #4A5568;
}
html[data-theme='light'] .emission-timeline__bar-container {
background: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .emission-timeline__fill {
background: linear-gradient(90deg, #5B4FCF, transparent 150%);
}
html[data-theme='light'] .emission-timeline__value {
color: #1A1F36;
}
html[data-theme='light'] .emission-timeline__note {
color: #64748B;
}
/* Reduced Motion - Disable animations for accessibility */
@media (prefers-reduced-motion: reduce) {
.orb {
animation: none;
transform: none !important;
}
.background-orbs {
opacity: 0.3;
}
}
/* ═══════════════════════════════════════════════════════
iPhone SE and Very Small Devices (375px and below)
═══════════════════════════════════════════════════════ */
@media (max-width: 375px) {
/* Make sidebar full width on very small screens */
.wizard-sidebar {
width: 100% !important;
max-width: none !important;
}
/* Reduce sidebar header padding */
.wizard-sidebar__header {
padding: var(--space-3) !important;
gap: var(--space-2) !important;
}
/* Compact sidebar navigation items */
.sidebar-nav__item,
.wizard-nav-item {
padding: 12px 14px !important;
font-size: 14px !important;
}
.sidebar-nav__subitem,
.wizard-nav-subitem {
padding: 10px 14px 10px 32px !important;
font-size: 13px !important;
}
/* Ensure touch targets remain at least 44px (accessibility) */
.mobile-menu-toggle {
min-width: 44px !important;
min-height: 44px !important;
}
/* Compact mobile header */
.mobile-header {
gap: 8px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Reduce main content padding */
.wizard-main {
padding: 12px !important;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Smaller screen inner padding */
.wizard-screen__inner {
padding: 12px !important;
}
/* Compact form cards */
.form-card {
padding: 16px !important;
}
/* Smaller form card titles */
.form-card__title {
font-size: 16px !important;
}
/* Stack wizard actions */
.wizard-actions {
gap: 10px !important;
}
.wizard-actions .wizard-button {
padding: 12px 16px !important;
font-size: 14px !important;
}
/* Smaller template cards */
.template-card {
padding: 16px !important;
}
.template-card__title {
font-size: 16px !important;
}
.template-card__description {
font-size: 13px !important;
}
/* Compact input fields */
.wizard-field__input,
.wizard-field__select,
.wizard-field__textarea {
padding: 10px 12px !important;
font-size: 14px !important;
}
/* Smaller wizard screen titles */
.wizard-screen__title {
font-size: 22px !important;
}
.wizard-screen__subtitle {
font-size: 14px !important;
}
}
/* ===========================================
GLOBAL: Kill mobile-menu-overlay completely
This overrides ALL other styles
=========================================== */
.mobile-menu-overlay,
.mobile-menu-overlay.active,
div.mobile-menu-overlay {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
position: absolute !important;
left: -9999px !important;
}
/* ===========================================
MOBILE RESPONSIVE STYLES
Full mobile support for all screens
=========================================== */
/* Hide the old placeholder - no longer needed */
.mobile-placeholder {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
MOBILE GLOBAL HEADER (max-width: 768px)
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.global-header {
padding: 0 12px;
height: 56px;
}
.global-header__logo {
width: 32px;
height: 32px;
}
.global-header__title {
font-size: 1rem;
}
/* Hide center nav on mobile - use hamburger menu */
.global-header__nav {
display: none;
}
/* Compact right section */
.global-header__right {
gap: 4px;
}
.global-header__theme-toggle {
padding: 2px;
}
.global-header__theme-btn {
width: 28px;
height: 28px;
}
.global-header__reset {
width: 36px;
height: 36px;
}
/* Hide "Register Token" text on mobile, show only icon */
.global-header__register {
padding: 8px 12px;
gap: 0;
}
.global-header__register span {
display: none;
}
.global-header__register svg {
margin: 0;
}
/* Register dropdown adjustments */
.register-dropdown {
width: calc(100vw - 24px);
max-width: 320px;
right: 0;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE HAMBURGER MENU
═══════════════════════════════════════════════════════ */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: var(--color-text);
transition: background 0.2s ease;
}
.mobile-menu-btn:hover {
background: var(--color-bg-tertiary);
}
.mobile-menu-btn__icon {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex;
}
}
/* Mobile Navigation Drawer */
.mobile-nav-drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
pointer-events: none;
visibility: hidden;
display: none; /* Completely hidden when not open */
}
.mobile-nav-drawer.is-open {
display: block;
pointer-events: auto;
visibility: visible;
}
.mobile-nav-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-nav-drawer.is-open .mobile-nav-drawer__backdrop {
opacity: 1;
}
.mobile-nav-drawer__panel {
position: absolute;
top: 0;
left: 0;
width: 280px;
max-width: 85vw;
height: 100%;
background: var(--color-surface);
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}
.mobile-nav-drawer.is-open .mobile-nav-drawer__panel {
transform: translateX(0);
}
.mobile-nav-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--color-border);
}
.mobile-nav-drawer__brand {
display: flex;
align-items: center;
gap: 12px;
}
.mobile-nav-drawer__logo {
width: 36px;
height: 36px;
border-radius: 8px;
}
.mobile-nav-drawer__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
}
.mobile-nav-drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: var(--color-text-secondary);
transition: all 0.2s ease;
}
.mobile-nav-drawer__close:hover {
background: var(--color-bg-tertiary);
color: var(--color-text);
}
.mobile-nav-drawer__nav {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.mobile-nav-drawer__link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
margin-bottom: 4px;
}
.mobile-nav-drawer__link:hover {
background: var(--color-bg-tertiary);
color: var(--color-text);
}
.mobile-nav-drawer__link--active {
background: rgba(0, 141, 228, 0.12);
color: var(--color-primary);
}
.mobile-nav-drawer__link-icon {
flex-shrink: 0;
opacity: 0.9;
}
.mobile-nav-drawer__footer {
padding: 16px;
border-top: 1px solid var(--color-border);
}
/* ═══════════════════════════════════════════════════════
MOBILE WIZARD SHELL (max-width: 900px)
Sidebar becomes a slide-out drawer
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Remove sidebar padding from shell */
.wizard-shell {
padding-left: 0;
flex-direction: column;
min-height: calc(100vh - 56px);
min-height: calc(100dvh - 56px);
margin-top: 56px;
}
/* Sidebar becomes a mobile drawer */
.wizard-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 85vw;
height: 100%;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1500;
border-right: none;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}
.wizard-sidebar.is-open {
transform: translateX(0);
}
/* Sidebar backdrop */
.sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1499;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.sidebar-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* Main content takes full width */
.wizard-main {
width: 100%;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
min-height: auto;
}
/* Hide guide panel on mobile by default */
.guide-panel,
.wizard-guide {
display: none;
}
/* Wizard content full width */
.wizard-content {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Screen adjustments */
.wizard-screen {
width: 100%;
max-width: 100%;
border-radius: var(--radius-lg);
}
.wizard-screen__inner {
padding: 20px;
gap: 20px;
}
/* Floating button to open sidebar */
.mobile-sidebar-toggle {
display: flex;
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
left: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary);
color: white;
border: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
cursor: pointer;
z-index: 1000;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mobile-sidebar-toggle:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.mobile-sidebar-toggle:active {
transform: scale(0.95);
}
.mobile-sidebar-toggle svg {
width: 24px;
height: 24px;
}
/* Hide toggle when sidebar is open */
.wizard-sidebar.is-open ~ .mobile-sidebar-toggle {
display: none;
}
}
/* Hide mobile sidebar toggle on desktop */
@media (min-width: 901px) {
.mobile-sidebar-toggle,
.sidebar-backdrop {
display: none;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE FORM CARDS & INPUTS (max-width: 600px)
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
.wizard-screen__title {
font-size: 1.5rem;
}
.wizard-screen__subtitle {
font-size: 0.9375rem;
}
.form-card {
padding: 16px;
gap: 12px;
}
.form-card__title {
font-size: 1rem;
}
.form-card__body {
gap: 12px;
}
/* Ensure inputs are large enough for touch */
.wizard-field__input,
.wizard-field__select,
.wizard-field__textarea {
min-height: 48px;
padding: 12px 14px;
font-size: 16px; /* Prevents iOS zoom */
}
/* Buttons stack vertically */
.wizard-actions {
flex-direction: column-reverse;
gap: 12px;
}
.wizard-actions .wizard-button {
width: 100%;
min-height: 48px;
justify-content: center;
}
/* Checkboxes and radios with larger touch targets */
.wizard-checkbox,
.wizard-radio {
min-height: 44px;
padding: 10px 0;
}
.wizard-checkbox__input,
.wizard-radio__input {
width: 22px;
height: 22px;
}
/* Field groups stack on mobile */
.field-group--row {
flex-direction: column;
gap: 16px;
}
/* Localization rows */
.localization-row {
flex-direction: column;
gap: 12px;
}
.localization-row__inputs {
flex-direction: column;
gap: 12px;
}
.localization-row__actions {
align-self: flex-end;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE LANDING PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.landing-page {
padding: 0 16px;
}
.landing-hero {
min-height: auto;
padding: 60px 0 40px;
}
.landing-hero__title {
font-size: 2rem;
}
.landing-hero__subtitle {
font-size: 1rem;
}
.landing-hero__actions {
flex-direction: column;
gap: 12px;
}
.landing-hero__actions .btn {
width: 100%;
}
.landing-preview {
margin-top: 24px;
}
.landing-footer {
flex-direction: column;
gap: 12px;
text-align: center;
padding: 16px;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE HUB PAGE - Already has some styles, enhance them
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
.hub-content {
padding: 16px;
}
.hub-welcome__title {
font-size: 1.5rem;
}
.hub-welcome__subtitle {
font-size: 0.9375rem;
}
.hub-actions__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.hub-action-card {
padding: 16px;
}
.hub-action-card__icon {
width: 40px;
height: 40px;
}
.hub-action-card__title {
font-size: 1rem;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE GROUPS PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.groups-page {
padding: 16px;
}
.groups-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.groups-header__title {
font-size: 1.5rem;
}
.groups-list {
gap: 12px;
}
.groups-card {
padding: 16px;
}
.groups-card__header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.groups-card__actions {
width: 100%;
justify-content: flex-end;
}
.groups-members__item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.groups-members__actions {
width: 100%;
justify-content: flex-end;
}
/* Groups form fields */
.groups-field {
margin-bottom: 16px;
}
.groups-field__input {
min-height: 48px;
font-size: 16px;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE MODALS
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
.modal__content {
width: calc(100% - 32px);
max-width: 100%;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
margin: 16px;
border-radius: var(--radius-lg);
}
.modal__header {
padding: 16px;
}
.modal__body {
padding: 16px;
}
.modal__footer {
padding: 16px;
flex-direction: column-reverse;
gap: 12px;
}
.modal__footer .wizard-button {
width: 100%;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE TEMPLATES PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.templates-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.template-card {
padding: 16px;
}
.template-card__title {
font-size: 1rem;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE DOCUMENTS PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.documents-page {
padding: 16px;
}
.documents-grid {
grid-template-columns: 1fr;
}
.document-card {
padding: 16px;
}
/* JSON editor on mobile */
.document-editor {
font-size: 13px;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE LIGHT MODE SUPPORT
═══════════════════════════════════════════════════════ */
html[data-theme='light'] .mobile-nav-drawer__panel {
background: #FFFFFF;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .mobile-nav-drawer__header {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .mobile-nav-drawer__title {
color: #1A1F36;
}
html[data-theme='light'] .mobile-nav-drawer__close {
color: #4A5568;
}
html[data-theme='light'] .mobile-nav-drawer__close:hover {
background: rgba(0, 0, 0, 0.05);
color: #1A1F36;
}
html[data-theme='light'] .mobile-nav-drawer__link {
color: #4A5568;
}
html[data-theme='light'] .mobile-nav-drawer__link:hover {
background: rgba(0, 0, 0, 0.05);
color: #1A1F36;
}
html[data-theme='light'] .mobile-nav-drawer__link--active {
background: rgba(14, 118, 253, 0.1);
color: #0E76FD;
}
html[data-theme='light'] .mobile-nav-drawer__footer {
border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .mobile-nav-drawer__backdrop {
background: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .sidebar-backdrop {
background: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .mobile-sidebar-toggle {
background: #0E76FD;
box-shadow: 0 4px 16px rgba(14, 118, 253, 0.3);
}
html[data-theme='light'] .mobile-sidebar-toggle:hover {
box-shadow: 0 6px 20px rgba(14, 118, 253, 0.4);
}
/* ═══════════════════════════════════════════════════════
ACCESSIBILITY - REDUCED MOTION
Respects user's OS preference for reduced motion
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
/* Disable smooth scrolling for users who prefer reduced motion */
*,
*::before,
*::after {
scroll-behavior: auto !important;
}
/* Keep essential transitions but make them instant */
.page-guide,
.wizard-screen,
.modal {
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════
SCROLL PERFORMANCE - Disable transitions during scroll
Applied via JS when scrolling to prevent jank
═══════════════════════════════════════════════════════ */
html.is-scrolling * {
transition: none !important;
}
/* GPU-accelerate all sticky elements to prevent repaint during scroll */
[style*="position: sticky"],
.page-guide__step-heading {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════════════════
LANDING PAGE - Modern Dash Network Inspired Design
Full-screen introduction page before wizard entry
═══════════════════════════════════════════════════════════════════════════ */
.landing-page {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
background: #000000;
overflow-x: hidden;
overflow-y: auto; /* Allow vertical scroll on mobile */
-webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-page.landing-page--hidden {
opacity: 0;
transform: scale(1.02);
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────
Landing Background - Animated gradients and grid
───────────────────────────────────────────────────────── */
.landing-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none; /* Ensure background doesn't block clicks */
}
.landing-bg__gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 118, 253, 0.15) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
linear-gradient(180deg, #000000 0%, #0a0a0f 50%, #000000 100%);
}
.landing-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
}
.landing-bg__glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
animation: glow-pulse 8s ease-in-out infinite;
}
.landing-bg__glow--1 {
width: 600px;
height: 600px;
top: -200px;
left: 10%;
background: rgba(14, 118, 253, 0.15);
animation-delay: 0s;
}
.landing-bg__glow--2 {
width: 500px;
height: 500px;
bottom: -100px;
right: 5%;
background: rgba(99, 102, 241, 0.12);
animation-delay: -3s;
}
.landing-bg__glow--3 {
width: 400px;
height: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(16, 185, 129, 0.08);
animation-delay: -5s;
}
@keyframes glow-pulse {
0%, 100% {
opacity: 0.5;
transform: scale(1) translate(0, 0);
}
50% {
opacity: 0.8;
transform: scale(1.1) translate(10px, -10px);
}
}
/* ─────────────────────────────────────────────────────────
Landing Navigation
───────────────────────────────────────────────────────── */
.landing-nav {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
}
.landing-nav__brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.landing-nav__logo {
width: 36px;
height: 36px;
border-radius: 8px;
}
.landing-nav__title {
font-size: 1.125rem;
font-weight: 600;
color: #F5F5F7;
letter-spacing: -0.01em;
}
.landing-nav__links {
display: flex;
align-items: center;
gap: 2rem;
}
.landing-nav__link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
transition: color 0.2s ease;
}
.landing-nav__link:hover {
color: #F5F5F7;
}
/* ─────────────────────────────────────────────────────────
Landing Hero Section
───────────────────────────────────────────────────────── */
.landing-hero {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4rem;
padding: 0 6rem;
position: relative;
z-index: 10;
}
.landing-hero__content {
max-width: 600px;
pointer-events: auto; /* Ensure content is clickable */
position: relative;
z-index: 20;
}
/* Badge */
.landing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(14, 118, 253, 0.1);
border: 1px solid rgba(14, 118, 253, 0.2);
border-radius: 100px;
margin-bottom: 1.5rem;
}
.landing-badge__icon {
display: flex;
color: #0E76FD;
}
.landing-badge__text {
font-size: 0.875rem;
font-weight: 500;
color: #0E76FD;
}
/* Headline */
.landing-headline {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.landing-headline__line {
display: block;
color: #F5F5F7;
}
.landing-headline__line--gradient {
background: linear-gradient(135deg, #0E76FD 0%, #6366F1 50%, #10B981 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Subtitle */
.landing-subtitle {
font-size: 1.25rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 2.5rem 0;
max-width: 520px;
}
/* Features */
.landing-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2.5rem;
}
.landing-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.landing-feature__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: #0E76FD;
}
.landing-feature__text {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 0.25rem;
}
.landing-feature__text strong {
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
}
.landing-feature__text span {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.6);
}
/* CTA Button */
.landing-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 50; /* Ensure CTA is above decorative elements */
}
.landing-cta__button {
position: relative;
z-index: 100;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #0E76FD 0%, #0A5FCC 100%);
border: none;
border-radius: 14px;
color: #FFFFFF;
cursor: pointer;
touch-action: manipulation; /* Ensure touch works properly */
-webkit-tap-highlight-color: rgba(14, 118, 253, 0.3); /* Visual feedback on tap */
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
0 4px 20px rgba(14, 118, 253, 0.35),
0 0 0 0 rgba(14, 118, 253, 0);
}
.landing-cta__button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 30px rgba(14, 118, 253, 0.45),
0 0 0 4px rgba(14, 118, 253, 0.15);
}
.landing-cta__button:active {
transform: translateY(0);
}
.landing-cta__arrow {
transition: transform 0.2s ease;
}
.landing-cta__button:hover .landing-cta__arrow {
transform: translateX(4px);
}
.landing-cta__hint {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
/* ─────────────────────────────────────────────────────────
Landing Preview Card (Right side decoration)
───────────────────────────────────────────────────────── */
.landing-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
pointer-events: none; /* Decorative only - don't block touches */
}
.landing-preview__card {
position: relative;
width: 340px;
padding: 1.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
animation: card-float 6s ease-in-out infinite;
}
@keyframes card-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
.landing-preview__header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.landing-preview__token-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
border: 1px solid rgba(14, 118, 253, 0.3);
border-radius: 16px;
color: #0E76FD;
}
.landing-preview__token-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.landing-preview__token-name {
font-size: 1.25rem;
font-weight: 600;
color: #F5F5F7;
}
.landing-preview__token-symbol {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
.landing-preview__stats {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.landing-preview__stat {
display: flex;
justify-content: space-between;
align-items: center;
}
.landing-preview__stat-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
.landing-preview__stat-value {
font-size: 0.9375rem;
font-weight: 600;
color: #F5F5F7;
}
.landing-preview__features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.landing-preview__feature-tag {
padding: 0.375rem 0.75rem;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 500;
color: #10B981;
}
/* Floating decorations */
.landing-preview__float {
position: absolute;
border-radius: 50%;
animation: float-element 4s ease-in-out infinite;
pointer-events: none;
}
.landing-preview__float--1 {
width: 80px;
height: 80px;
top: -20px;
right: -30px;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.2) 0%, rgba(14, 118, 253, 0.05) 100%);
border: 1px solid rgba(14, 118, 253, 0.2);
animation-delay: 0s;
}
.landing-preview__float--2 {
width: 60px;
height: 60px;
bottom: 40px;
left: -40px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.05) 100%);
border: 1px solid rgba(99, 102, 241, 0.2);
animation-delay: -1.5s;
}
.landing-preview__float--3 {
width: 40px;
height: 40px;
top: 50%;
right: -50px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
animation-delay: -3s;
}
@keyframes float-element {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
/* ─────────────────────────────────────────────────────────
Landing Footer
───────────────────────────────────────────────────────── */
.landing-footer {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.landing-footer__text {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.4);
margin: 0;
}
.landing-footer__links {
display: flex;
align-items: center;
gap: 1rem;
}
.landing-footer__link {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.landing-footer__link:hover {
color: #F5F5F7;
}
.landing-footer__divider {
color: rgba(255, 255, 255, 0.2);
}
/* ─────────────────────────────────────────────────────────
Landing Page Light Mode
───────────────────────────────────────────────────────── */
html[data-theme='light'] .landing-page {
background: #FFFBF7;
}
html[data-theme='light'] .landing-bg__gradient {
background:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(91, 79, 207, 0.1) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 100% 50%, rgba(14, 118, 253, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
linear-gradient(180deg, #FFFBF7 0%, #FEF7F0 50%, #FFFBF7 100%);
}
html[data-theme='light'] .landing-bg__grid {
background-image:
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}
html[data-theme='light'] .landing-bg__glow--1 {
background: rgba(91, 79, 207, 0.12);
}
html[data-theme='light'] .landing-bg__glow--2 {
background: rgba(14, 118, 253, 0.1);
}
html[data-theme='light'] .landing-bg__glow--3 {
background: rgba(16, 185, 129, 0.08);
}
html[data-theme='light'] .landing-nav__title {
color: #1A1F36;
}
html[data-theme='light'] .landing-nav__link {
color: rgba(26, 31, 54, 0.7);
}
html[data-theme='light'] .landing-nav__link:hover {
color: #1A1F36;
}
html[data-theme='light'] .landing-badge {
background: rgba(91, 79, 207, 0.08);
border-color: rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .landing-badge__icon,
html[data-theme='light'] .landing-badge__text {
color: #5B4FCF;
}
html[data-theme='light'] .landing-headline__line {
color: #1A1F36;
}
html[data-theme='light'] .landing-headline__line--gradient {
background: linear-gradient(135deg, #5B4FCF 0%, #0E76FD 50%, #059669 100%);
-webkit-background-clip: text;
background-clip: text;
}
html[data-theme='light'] .landing-subtitle {
color: rgba(26, 31, 54, 0.7);
}
html[data-theme='light'] .landing-feature__icon {
background: rgba(91, 79, 207, 0.06);
border-color: rgba(91, 79, 207, 0.1);
color: #5B4FCF;
}
html[data-theme='light'] .landing-feature__text strong {
color: #1A1F36;
}
html[data-theme='light'] .landing-feature__text span {
color: rgba(26, 31, 54, 0.6);
}
html[data-theme='light'] .landing-cta__button {
background: linear-gradient(135deg, #5B4FCF 0%, #4338CA 100%);
box-shadow:
0 4px 20px rgba(91, 79, 207, 0.3),
0 0 0 0 rgba(91, 79, 207, 0);
}
html[data-theme='light'] .landing-cta__button:hover {
box-shadow:
0 8px 30px rgba(91, 79, 207, 0.4),
0 0 0 4px rgba(91, 79, 207, 0.12);
}
html[data-theme='light'] .landing-cta__hint {
color: rgba(26, 31, 54, 0.5);
}
html[data-theme='light'] .landing-preview__card {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .landing-preview__header {
border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .landing-preview__token-icon {
background: linear-gradient(135deg, rgba(91, 79, 207, 0.12) 0%, rgba(14, 118, 253, 0.12) 100%);
border-color: rgba(91, 79, 207, 0.2);
color: #5B4FCF;
}
html[data-theme='light'] .landing-preview__token-name {
color: #1A1F36;
}
html[data-theme='light'] .landing-preview__token-symbol {
color: rgba(26, 31, 54, 0.5);
}
html[data-theme='light'] .landing-preview__stat-label {
color: rgba(26, 31, 54, 0.5);
}
html[data-theme='light'] .landing-preview__stat-value {
color: #1A1F36;
}
html[data-theme='light'] .landing-preview__feature-tag {
background: rgba(5, 150, 105, 0.08);
border-color: rgba(5, 150, 105, 0.15);
color: #059669;
}
html[data-theme='light'] .landing-preview__float--1 {
background: linear-gradient(135deg, rgba(91, 79, 207, 0.15) 0%, rgba(91, 79, 207, 0.05) 100%);
border-color: rgba(91, 79, 207, 0.15);
}
html[data-theme='light'] .landing-preview__float--2 {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.15) 0%, rgba(14, 118, 253, 0.05) 100%);
border-color: rgba(14, 118, 253, 0.15);
}
html[data-theme='light'] .landing-preview__float--3 {
background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.05) 100%);
border-color: rgba(5, 150, 105, 0.15);
}
html[data-theme='light'] .landing-footer {
border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .landing-footer__text {
color: rgba(26, 31, 54, 0.4);
}
html[data-theme='light'] .landing-footer__link {
color: rgba(26, 31, 54, 0.5);
}
html[data-theme='light'] .landing-footer__link:hover {
color: #1A1F36;
}
html[data-theme='light'] .landing-footer__divider {
color: rgba(26, 31, 54, 0.2);
}
/* ─────────────────────────────────────────────────────────
Landing Page Responsive
───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.landing-hero {
padding: 0 4rem;
gap: 3rem;
}
.landing-preview__card {
width: 300px;
}
}
@media (max-width: 900px) {
.landing-hero {
display: flex !important;
flex-direction: column !important;
grid-template-columns: unset !important;
text-align: center;
padding: 2rem;
}
.landing-hero__content {
max-width: 600px;
margin: 0 auto;
pointer-events: auto !important;
position: relative;
z-index: 100;
}
.landing-features {
align-items: center;
}
.landing-feature {
text-align: left;
}
.landing-cta {
align-items: center;
pointer-events: auto !important;
position: relative;
z-index: 200;
}
.landing-cta__button {
pointer-events: auto !important;
position: relative;
z-index: 300;
}
.landing-preview {
display: none !important;
}
}
@media (max-width: 600px) {
.landing-nav {
padding: 1rem 1.5rem;
}
.landing-nav__links {
display: none;
}
.landing-hero {
padding: 1.5rem;
}
.landing-headline {
font-size: 2rem;
}
.landing-subtitle {
font-size: 1rem;
}
.landing-footer {
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
}
}
/* ─────────────────────────────────────────────────────────
Wizard Shell Visibility (hidden when landing is shown)
───────────────────────────────────────────────────────── */
.wizard-shell--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────
Reduced Motion Support for Landing Page
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.landing-bg__glow {
animation: none;
}
.landing-preview__card {
animation: none;
}
.landing-preview__float {
animation: none;
}
.landing-page {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
HUB PAGE STYLES - Dashboard/Navigation Hub after Landing
═══════════════════════════════════════════════════════════════════════════ */
.hub-page {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #0D1117 100%);
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
overscroll-behavior-y: contain; /* Prevent scroll chaining */
}
.hub-page[hidden] {
display: none !important;
}
/* Hub Background */
.hub-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hub-bg__gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 30% 20%, rgba(14, 118, 253, 0.12) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 70% 80%, rgba(91, 79, 207, 0.1) 0%, transparent 50%),
radial-gradient(ellipse 40% 30% at 90% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
}
.hub-bg__pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
background-size: 40px 40px;
}
/* Hub Navigation */
.hub-nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 2rem;
z-index: 10;
}
.hub-nav__brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.hub-nav__logo {
width: 36px;
height: 36px;
border-radius: 8px;
}
.hub-nav__title {
font-size: 1.125rem;
font-weight: 600;
color: #F5F5F7;
letter-spacing: -0.01em;
}
.hub-nav__links {
display: flex;
gap: 1.5rem;
}
.hub-nav__link {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.hub-nav__link:hover {
color: #F5F5F7;
}
/* Hub Content */
.hub-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 2rem 4rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 10;
}
/* Welcome Section */
.hub-welcome {
text-align: center;
margin-bottom: 3rem;
}
.hub-welcome__title {
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 700;
color: #F5F5F7;
margin-bottom: 1rem;
letter-spacing: -0.02em;
line-height: 1.2;
}
.hub-welcome__subtitle {
font-size: 1.125rem;
color: rgba(245, 245, 247, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* About Dash Section */
.hub-about {
width: 100%;
margin-bottom: 3rem;
}
.hub-about__card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 2rem;
text-align: center;
}
.hub-about__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.2) 0%, rgba(91, 79, 207, 0.2) 100%);
border-radius: 16px;
margin-bottom: 1.5rem;
color: #0E76FD;
}
.hub-about__title {
font-size: 1.5rem;
font-weight: 600;
color: #F5F5F7;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.hub-about__text {
font-size: 1rem;
color: rgba(245, 245, 247, 0.7);
line-height: 1.7;
max-width: 700px;
margin: 0 auto 1.5rem;
}
.hub-about__features {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.hub-about__feature {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(245, 245, 247, 0.8);
font-size: 0.9rem;
font-weight: 500;
}
.hub-about__feature svg {
color: #0E76FD;
}
/* Action Cards Section */
.hub-actions {
width: 100%;
margin-bottom: 3rem;
}
.hub-actions__title {
font-size: 1.25rem;
font-weight: 600;
color: #F5F5F7;
margin-bottom: 1.5rem;
text-align: center;
}
.hub-actions__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
}
.hub-action-card {
display: flex;
align-items: center;
gap: 1.25rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
text-align: left;
width: 100%;
}
.hub-action-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.hub-action-card--primary {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.15) 0%, rgba(91, 79, 207, 0.1) 100%);
border-color: rgba(14, 118, 253, 0.3);
}
.hub-action-card--primary:hover {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.2) 0%, rgba(91, 79, 207, 0.15) 100%);
border-color: rgba(14, 118, 253, 0.4);
}
.hub-action-card--secondary {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(14, 118, 253, 0.08) 100%);
border-color: rgba(16, 185, 129, 0.25);
}
.hub-action-card--secondary:hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(14, 118, 253, 0.12) 100%);
border-color: rgba(16, 185, 129, 0.35);
}
.hub-action-card--secondary .hub-action-card__icon {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
}
.hub-action-card__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
color: #0E76FD;
}
.hub-action-card--primary .hub-action-card__icon {
background: rgba(14, 118, 253, 0.2);
}
.hub-action-card__content {
flex: 1;
min-width: 0;
}
.hub-action-card__title {
font-size: 1.125rem;
font-weight: 600;
color: #F5F5F7;
margin-bottom: 0.375rem;
}
.hub-action-card__desc {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.6);
line-height: 1.5;
}
.hub-action-card__arrow {
flex-shrink: 0;
color: rgba(245, 245, 247, 0.4);
transition: all 0.2s;
}
.hub-action-card:hover .hub-action-card__arrow {
color: #0E76FD;
transform: translateX(4px);
}
/* Info Cards Section */
.hub-info {
width: 100%;
}
.hub-info__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.hub-info__card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
}
.hub-info__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(14, 118, 253, 0.1);
border-radius: 10px;
margin-bottom: 1rem;
color: #0E76FD;
}
.hub-info__title {
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
margin-bottom: 0.5rem;
}
.hub-info__text {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.6);
line-height: 1.5;
}
/* Hub Footer */
.hub-footer {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
z-index: 10;
}
.hub-footer__text {
font-size: 0.8rem;
color: rgba(245, 245, 247, 0.4);
}
.hub-footer__links {
display: flex;
align-items: center;
gap: 0.75rem;
}
.hub-footer__link {
font-size: 0.8rem;
color: rgba(245, 245, 247, 0.5);
text-decoration: none;
transition: color 0.2s;
}
.hub-footer__link:hover {
color: #F5F5F7;
}
.hub-footer__divider {
color: rgba(255, 255, 255, 0.2);
}
/* Hub Page Light Mode */
html[data-theme='light'] .hub-page {
background: linear-gradient(135deg, #FFFBF7 0%, #FEF7F0 50%, #FFFBF7 100%);
}
html[data-theme='light'] .hub-bg__gradient {
background:
radial-gradient(ellipse 60% 40% at 30% 20%, rgba(14, 118, 253, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 70% 80%, rgba(91, 79, 207, 0.06) 0%, transparent 50%),
radial-gradient(ellipse 40% 30% at 90% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
}
html[data-theme='light'] .hub-bg__pattern {
background-image:
radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
}
html[data-theme='light'] .hub-nav__title,
html[data-theme='light'] .hub-welcome__title,
html[data-theme='light'] .hub-about__title,
html[data-theme='light'] .hub-actions__title,
html[data-theme='light'] .hub-action-card__title,
html[data-theme='light'] .hub-info__title {
color: #1D1D1F;
}
html[data-theme='light'] .hub-nav__link,
html[data-theme='light'] .hub-welcome__subtitle,
html[data-theme='light'] .hub-about__text,
html[data-theme='light'] .hub-about__feature,
html[data-theme='light'] .hub-action-card__desc,
html[data-theme='light'] .hub-info__text {
color: rgba(29, 29, 31, 0.7);
}
html[data-theme='light'] .hub-about__card,
html[data-theme='light'] .hub-action-card,
html[data-theme='light'] .hub-info__card {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .hub-action-card:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .hub-action-card--primary {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.08) 0%, rgba(91, 79, 207, 0.05) 100%);
border-color: rgba(14, 118, 253, 0.2);
}
html[data-theme='light'] .hub-action-card--primary:hover {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.12) 0%, rgba(91, 79, 207, 0.08) 100%);
}
html[data-theme='light'] .hub-action-card--secondary {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(14, 118, 253, 0.05) 100%);
border-color: rgba(16, 185, 129, 0.2);
}
html[data-theme='light'] .hub-action-card--secondary:hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(14, 118, 253, 0.08) 100%);
}
html[data-theme='light'] .hub-action-card--secondary .hub-action-card__icon {
background: rgba(16, 185, 129, 0.1);
}
html[data-theme='light'] .hub-action-card__icon {
background: rgba(0, 0, 0, 0.04);
}
html[data-theme='light'] .hub-action-card__arrow {
color: rgba(29, 29, 31, 0.3);
}
html[data-theme='light'] .hub-footer {
border-top-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .hub-footer__text,
html[data-theme='light'] .hub-footer__link {
color: rgba(29, 29, 31, 0.5);
}
html[data-theme='light'] .hub-footer__link:hover {
color: #1D1D1F;
}
html[data-theme='light'] .hub-footer__divider {
color: rgba(0, 0, 0, 0.2);
}
html[data-theme='light'] .hub-nav__link:hover {
color: #1D1D1F;
}
html[data-theme='light'] .hub-action-card:hover .hub-action-card__arrow {
color: #0E76FD;
}
html[data-theme='light'] .hub-about__icon {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.12) 0%, rgba(91, 79, 207, 0.12) 100%);
}
html[data-theme='light'] .hub-info__icon {
background: rgba(14, 118, 253, 0.08);
}
/* Hub Page Responsive */
@media (max-width: 768px) {
.hub-page {
/* Fix iOS Safari scrolling issues */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
height: 100dvh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
touch-action: pan-y;
}
.hub-nav {
padding: 1rem 1.25rem;
/* Make hub nav sticky on mobile for better UX */
position: sticky;
top: 0;
z-index: 100;
background: rgba(13, 17, 23, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hub-nav__links {
display: none;
}
.hub-content {
padding: 1.5rem 1.25rem 3rem;
/* Ensure content is scrollable */
min-height: min-content;
}
.hub-footer {
/* Ensure footer is reachable at bottom */
flex-shrink: 0;
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.hub-welcome__title {
font-size: 1.75rem;
}
.hub-welcome__subtitle {
font-size: 1rem;
}
.hub-about__card {
padding: 1.5rem;
}
.hub-about__features {
gap: 1rem;
}
.hub-about__feature {
font-size: 0.8rem;
}
.hub-actions__grid {
grid-template-columns: 1fr;
}
.hub-action-card {
padding: 1.25rem;
}
.hub-action-card__icon {
width: 48px;
height: 48px;
}
.hub-info__grid {
grid-template-columns: 1fr;
}
.hub-footer {
flex-direction: column;
gap: 0.75rem;
text-align: center;
padding: 1.25rem;
}
}
/* Hub Page Hidden Transition */
.hub-page--hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* ═══════════════════════════════════════════════════════════════════════════
DOCUMENTS PAGE STYLES - Landing Page Style Design
Contract storage with visible editor and save/load/edit/delete functionality
═══════════════════════════════════════════════════════════════════════════ */
/* Full page screen - Override all wizard-screen constraints */
.wizard-screen--fullpage {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: calc(100vh - var(--header-height)) !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
overflow-y: auto;
overflow-x: hidden;
z-index: 10;
background: var(--color-bg);
}
/* When fullpage screen is active */
.wizard-screen--fullpage.wizard-screen--active {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fullpage mode - hide sidebar and expand content area */
body.fullpage-mode .wizard-content {
max-width: 100% !important;
margin-right: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body.fullpage-mode .guide-panel {
display: none !important;
}
body.fullpage-mode .wizard-main {
padding: 0 !important;
}
body.fullpage-mode .wizard-body {
padding: 0 !important;
}
/* Hide sidebar in fullpage mode */
body.fullpage-mode .wizard-sidebar,
body.fullpage-mode .wizard-outline {
display: none !important;
}
/* Ensure fullpage screens are truly fullpage when active */
#screen-groups-page.wizard-screen--active,
#screen-templates-page.wizard-screen--active,
#screen-documents.wizard-screen--active {
position: fixed !important;
top: var(--header-height) !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
z-index: 100;
overflow-y: auto;
}
/* When groups page is active, hide the sidebar via has() selector */
.wizard-shell:has(#screen-groups-page.wizard-screen--active) .wizard-sidebar {
display: none !important;
}
/* Fallback: Also use specific body class for groups page */
body.groups-page-active .wizard-sidebar {
display: none !important;
}
body.fullpage-mode .wizard-shell {
padding-left: 0 !important;
}
body.fullpage-mode .wizard-tabs {
display: none !important;
}
/* Background Effects (similar to landing page) */
.docs-page-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.docs-page-bg__gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(14, 118, 253, 0.03) 0%,
transparent 50%,
rgba(139, 92, 246, 0.03) 100%
);
}
.docs-page-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(14, 118, 253, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(14, 118, 253, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.docs-page-bg__glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.4;
animation: docsGlow 8s ease-in-out infinite alternate;
}
.docs-page-bg__glow--1 {
top: -20%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(14, 118, 253, 0.3), transparent 70%);
}
.docs-page-bg__glow--2 {
bottom: -20%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
animation-delay: -4s;
}
@keyframes docsGlow {
0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
100% { transform: translate(30px, -20px) scale(1.1); opacity: 0.5; }
}
/* Main Page Container */
.docs-page {
position: relative;
z-index: 1;
width: 100%;
max-width: 1600px;
min-height: 100%;
margin: 0 auto;
padding: var(--space-5) var(--space-6) var(--space-8);
box-sizing: border-box;
}
/* Hero Section */
.docs-hero {
text-align: center;
margin-bottom: var(--space-5);
}
.docs-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: linear-gradient(135deg, rgba(14, 118, 253, 0.1), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(14, 118, 253, 0.2);
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.docs-hero__badge svg {
opacity: 0.8;
}
.docs-hero__title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-3);
line-height: 1.2;
background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.docs-hero__subtitle {
font-size: 1.125rem;
color: var(--color-muted);
margin: 0;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Three Column Content Layout */
.docs-content {
display: grid;
grid-template-columns: 320px 1fr 360px;
gap: var(--space-5);
margin-bottom: var(--space-6);
min-height: 500px;
align-items: stretch;
}
/* Responsive: Hide guide panel on smaller screens */
@media (max-width: 1600px) {
.docs-content {
grid-template-columns: 300px 1fr 320px;
}
}
@media (max-width: 1300px) {
.docs-content {
grid-template-columns: 280px 1fr;
}
.docs-guide {
display: none;
}
}
@media (max-width: 900px) {
.docs-content {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.docs-sidebar {
max-height: 350px;
}
}
/* Left Sidebar - Document List */
.docs-sidebar {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-4);
max-height: 600px;
}
.docs-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.docs-sidebar__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.docs-sidebar__title svg {
color: var(--color-primary);
}
.docs-sidebar__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 var(--space-2);
background: var(--color-primary);
color: white;
font-size: 0.75rem;
font-weight: 600;
border-radius: 100px;
}
/* Search */
.docs-search {
position: relative;
margin-bottom: var(--space-4);
}
.docs-search__icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-muted);
pointer-events: none;
}
.docs-search__input {
width: 100%;
padding: var(--space-2) var(--space-3) var(--space-2) 40px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
color: var(--color-text);
font-size: 0.875rem;
transition: all 0.2s ease;
}
.docs-search__input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus);
background: var(--color-surface);
}
.docs-search__input::placeholder {
color: var(--color-placeholder);
}
/* Document List */
.docs-list {
flex: 1;
overflow-y: auto;
margin-bottom: var(--space-4);
min-height: 200px;
}
.docs-list__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
text-align: center;
color: var(--color-muted);
}
.docs-list__empty svg {
margin-bottom: var(--space-3);
opacity: 0.5;
}
.docs-list__empty p {
font-weight: 500;
margin: 0 0 var(--space-1);
color: var(--color-text-secondary);
}
.docs-list__empty span {
font-size: 0.813rem;
}
/* Document Item (in list) */
.docs-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
margin-bottom: var(--space-2);
}
.docs-item:hover {
background: var(--color-surface-alt);
border-color: var(--color-border);
}
.docs-item--active {
background: var(--color-primary-light);
border-color: var(--color-primary);
}
.docs-item__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-alt);
border-radius: var(--radius-md);
color: var(--color-primary);
}
.docs-item--active .docs-item__icon {
background: var(--color-primary);
color: white;
}
.docs-item__info {
flex: 1;
min-width: 0;
}
.docs-item__name {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.docs-item__date {
font-size: 0.75rem;
color: var(--color-muted);
}
.docs-item__actions {
display: flex;
gap: var(--space-1);
opacity: 0;
transition: opacity 0.2s ease;
}
.docs-item:hover .docs-item__actions {
opacity: 1;
}
.docs-item__action {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-muted);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
}
.docs-item__action:hover {
background: var(--color-surface);
color: var(--color-text);
}
.docs-item__action--danger:hover {
background: var(--color-error-light);
color: var(--color-error);
}
/* Sidebar Actions */
.docs-sidebar__actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
/* Action Buttons */
.docs-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.docs-action-btn:hover {
background: var(--color-surface-alt);
border-color: var(--color-border-strong);
}
.docs-action-btn--primary {
background: linear-gradient(135deg, var(--color-primary) 0%, #0958d9 100%);
border: none;
color: white;
}
.docs-action-btn--primary:hover {
background: linear-gradient(135deg, #0958d9 0%, var(--color-primary-dark) 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 118, 253, 0.3);
}
/* Right Column - Contract Editor */
.docs-editor {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.docs-editor__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-alt);
}
.docs-editor__title-section {
display: flex;
align-items: center;
gap: var(--space-4);
}
.docs-editor__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.docs-editor__title svg {
color: var(--color-primary);
}
.docs-editor__status {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.813rem;
color: var(--color-muted);
}
.docs-editor__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-muted);
}
.docs-editor__status--loaded .docs-editor__status-dot {
background: var(--color-success);
}
.docs-editor__status--modified .docs-editor__status-dot {
background: var(--color-warning);
}
.docs-editor__status--error .docs-editor__status-dot {
background: var(--color-error);
}
.docs-editor__actions {
display: flex;
gap: var(--space-2);
}
.docs-editor__action {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.docs-editor__action:hover {
background: var(--color-surface-alt);
color: var(--color-text);
border-color: var(--color-border-strong);
}
/* Tooltip for editor actions */
.docs-editor__action.has-tooltip {
position: relative;
}
.docs-editor__action .tooltip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: #1a1a1a;
color: #ffffff;
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.docs-editor__action .tooltip::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: #1a1a1a;
}
/* Dark mode tooltip - light background for contrast */
html[data-theme='dark'] .docs-editor__action .tooltip {
background: #f5f5f5;
color: #1a1a1a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-theme='dark'] .docs-editor__action .tooltip::after {
border-bottom-color: #f5f5f5;
}
.docs-editor__action:hover .tooltip {
opacity: 1;
visibility: visible;
}
.docs-editor__action:active {
transform: scale(0.95);
}
/* Editor Container */
.docs-editor__container {
display: flex;
flex: 1;
min-height: 400px;
max-height: 500px;
overflow: hidden;
}
.docs-editor__line-numbers {
width: 48px;
padding: var(--space-4) var(--space-2);
background: var(--color-surface-alt);
border-right: 1px solid var(--color-border);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--color-muted);
text-align: right;
user-select: none;
overflow: hidden;
white-space: pre-line;
}
.docs-editor__textarea {
flex: 1;
padding: var(--space-4);
border: none;
background: var(--color-surface);
color: var(--color-text);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
line-height: 1.6;
resize: none;
overflow-y: auto;
}
.docs-editor__textarea:focus {
outline: none;
}
.docs-editor__textarea::placeholder {
color: var(--color-placeholder);
opacity: 0.7;
}
/* Editor Footer */
.docs-editor__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border);
background: var(--color-surface-alt);
}
.docs-editor__info {
display: flex;
gap: var(--space-4);
}
.docs-editor__info-item {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: 0.75rem;
color: var(--color-muted);
}
.docs-editor__info-item--validation {
padding: var(--space-1) var(--space-2);
background: var(--color-surface);
border-radius: var(--radius-sm);
}
.docs-editor__info-item--valid {
color: var(--color-success);
background: var(--color-success-light);
}
.docs-editor__info-item--invalid {
color: var(--color-error);
background: var(--color-error-light);
}
.docs-editor__submit {
display: flex;
gap: var(--space-2);
}
/* Right Guide Panel */
.docs-guide {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5);
height: fit-content;
max-height: 600px;
overflow-y: auto;
}
.docs-guide__header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.docs-guide__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.1), rgba(139, 92, 246, 0.1));
border-radius: var(--radius-md);
color: var(--color-primary);
}
.docs-guide__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.docs-guide__section {
margin-bottom: var(--space-5);
}
.docs-guide__section:last-child {
margin-bottom: 0;
}
.docs-guide__section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--space-3);
}
.docs-guide__text {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 var(--space-3);
}
.docs-guide__list {
list-style: none;
padding: 0;
margin: 0;
}
.docs-guide__list-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2) 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
.docs-guide__list-item svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--color-primary);
}
.docs-guide__tip {
display: flex;
gap: var(--space-3);
padding: var(--space-3);
background: linear-gradient(135deg, rgba(14, 118, 253, 0.05), rgba(139, 92, 246, 0.05));
border: 1px solid rgba(14, 118, 253, 0.15);
border-radius: var(--radius-md);
margin-top: var(--space-3);
}
.docs-guide__tip-icon {
flex-shrink: 0;
color: var(--color-primary);
}
.docs-guide__tip-text {
font-size: 0.813rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.docs-guide__tip-text strong {
color: var(--color-text);
}
/* Feature Cards */
.docs-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.docs-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
}
.docs-feature:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(14, 118, 253, 0.1);
}
.docs-feature__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.1), rgba(139, 92, 246, 0.1));
border-radius: var(--radius-lg);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.docs-feature__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.docs-feature__text {
font-size: 0.875rem;
color: var(--color-muted);
margin: 0;
line-height: 1.5;
}
/* Form field styling for modal */
.form-field {
margin-bottom: var(--space-4);
}
.form-field__label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.form-field__input,
.form-field__textarea {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field__input:focus,
.form-field__textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus);
}
.form-field__input::placeholder,
.form-field__textarea::placeholder {
color: var(--color-placeholder);
}
.form-field__hint {
display: block;
margin-top: var(--space-1);
font-size: 0.75rem;
color: var(--color-muted);
}
.form-field__textarea {
resize: vertical;
min-height: 80px;
}
/* Danger button for delete confirmation */
.wizard-button--danger {
background: var(--color-error);
color: white;
border: none;
}
.wizard-button--danger:hover {
background: #dc2626;
}
.wizard-button--danger:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}
/* Modal close button */
.modal__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-muted);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.modal__close:hover {
background: var(--color-surface-alt);
color: var(--color-text);
}
/* Modal text styling */
.modal__text {
color: var(--color-text);
margin: 0 0 var(--space-3);
line-height: 1.6;
}
/* Responsive adjustments for documents page */
@media (max-width: 1100px) {
.docs-content {
grid-template-columns: 1fr;
}
.docs-sidebar {
max-height: none;
}
.docs-list {
max-height: 250px;
}
}
@media (max-width: 768px) {
.docs-page {
padding: var(--space-4);
}
.docs-hero__title {
font-size: 1.75rem;
}
.docs-hero__subtitle {
font-size: 1rem;
}
.docs-features {
grid-template-columns: 1fr;
}
.docs-editor__header {
flex-direction: column;
gap: var(--space-3);
align-items: flex-start;
}
.docs-editor__footer {
flex-direction: column;
gap: var(--space-3);
align-items: stretch;
}
.docs-editor__submit {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.docs-page-bg__glow {
animation: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GROUPS PAGE - Permission Groups Management
Standalone page accessible from hub for creating and managing groups
═══════════════════════════════════════════════════════════════════════════ */
/* Background Effects */
.groups-page-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.groups-page-bg__gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(147, 51, 234, 0.03) 0%,
transparent 50%,
rgba(14, 118, 253, 0.03) 100%
);
}
.groups-page-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(147, 51, 234, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(147, 51, 234, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
}
.groups-page-bg__glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
animation: groupsGlow 8s ease-in-out infinite alternate;
}
.groups-page-bg__glow--1 {
top: -20%;
right: -10%;
width: 50%;
height: 50%;
background: rgba(147, 51, 234, 0.15);
}
.groups-page-bg__glow--2 {
bottom: -20%;
left: -10%;
width: 40%;
height: 40%;
background: rgba(14, 118, 253, 0.1);
animation-delay: -4s;
}
@keyframes groupsGlow {
from { opacity: 0.3; transform: scale(1); }
to { opacity: 0.5; transform: scale(1.1); }
}
/* Main Page Container */
.groups-page {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: var(--space-6) var(--space-8);
max-width: 1600px;
margin: 0 auto;
box-sizing: border-box;
}
/* Hero Section */
.groups-hero {
text-align: center;
margin-bottom: var(--space-8);
padding-top: var(--space-6);
}
.groups-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(147, 51, 234, 0.1);
border: 1px solid rgba(147, 51, 234, 0.2);
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
color: #A78BFA;
margin-bottom: var(--space-5);
}
.groups-hero__badge svg {
opacity: 0.9;
}
.groups-hero__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: #F5F5F7;
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
}
.groups-hero__subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.6);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Main Content - Three Column Layout */
.groups-content {
display: grid;
grid-template-columns: 320px 1fr 300px;
gap: var(--space-6);
flex: 1;
width: 100%;
min-width: 0;
margin-bottom: var(--space-8);
}
/* Groups Sidebar (Left Column) */
.groups-sidebar {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
padding: var(--space-5);
backdrop-filter: blur(10px);
}
.groups-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.groups-sidebar__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
margin: 0;
}
.groups-sidebar__title svg {
color: #A78BFA;
}
.groups-sidebar__count {
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 var(--space-2);
background: rgba(147, 51, 234, 0.15);
color: #A78BFA;
border-radius: 100px;
font-size: 0.875rem;
font-weight: 600;
}
/* Groups List */
.groups-list {
flex: 1;
overflow-y: auto;
margin-bottom: var(--space-4);
min-height: 200px;
max-height: 400px;
}
.groups-list__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-8) var(--space-4);
color: rgba(255, 255, 255, 0.4);
}
.groups-list__empty svg {
margin-bottom: var(--space-4);
}
.groups-list__empty p {
font-weight: 500;
margin: 0 0 var(--space-2);
color: rgba(255, 255, 255, 0.5);
}
.groups-list__empty span {
font-size: 0.875rem;
}
/* Group List Item */
.groups-list__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: rgba(255, 255, 255, 0.02);
border: 1px solid transparent;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: var(--space-2);
}
.groups-list__item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.groups-list__item--active {
background: rgba(147, 51, 234, 0.1);
border-color: rgba(147, 51, 234, 0.3);
}
.groups-list__item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(147, 51, 234, 0.15);
border-radius: var(--radius-md);
color: #A78BFA;
flex-shrink: 0;
}
.groups-list__item-content {
flex: 1;
min-width: 0;
}
.groups-list__item-name {
font-weight: 500;
color: #F5F5F7;
margin: 0 0 var(--space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.groups-list__item-meta {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
}
/* Validation warning indicator */
.groups-list__item-warning {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: #F59E0B;
flex-shrink: 0;
margin-left: auto;
}
.groups-list__item-icon--valid {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
}
/* Sidebar Actions */
.groups-sidebar__actions {
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.groups-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
color: rgba(255, 255, 255, 0.8);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.groups-action-btn:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
.groups-action-btn--primary {
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
border-color: rgba(147, 51, 234, 0.5);
color: white;
}
.groups-action-btn--primary:hover {
background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
border-color: rgba(147, 51, 234, 0.7);
}
/* Groups Editor (Center Column) */
.groups-editor {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
overflow: hidden;
}
.groups-editor__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.groups-editor__title-row {
display: flex;
align-items: center;
gap: var(--space-4);
}
.groups-editor__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
margin: 0;
}
.groups-editor__title svg {
color: #A78BFA;
}
.groups-editor__status {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
}
.groups-editor__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.groups-editor__status--editing .groups-editor__status-dot {
background: #10B981;
}
.groups-editor__status--invalid .groups-editor__status-dot {
background: #F59E0B;
}
.groups-editor__status--valid .groups-editor__status-dot {
background: #10B981;
}
.groups-editor__actions {
display: flex;
gap: var(--space-2);
}
.groups-editor__action {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.2s ease;
}
.groups-editor__action:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #EF4444;
}
.groups-editor__action--delete {
width: auto;
padding: 0 var(--space-3);
gap: var(--space-2);
font-size: 0.8125rem;
font-weight: 500;
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
color: #EF4444;
}
.groups-editor__action--delete:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
}
/* Editor Form */
.groups-editor__form {
flex: 1;
padding: var(--space-5);
overflow-y: auto;
}
.groups-editor__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-10);
color: rgba(255, 255, 255, 0.4);
height: 100%;
}
.groups-editor__empty svg {
margin-bottom: var(--space-5);
}
.groups-editor__empty h3 {
font-size: 1.25rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 var(--space-2);
}
.groups-editor__empty p {
margin: 0;
max-width: 300px;
}
.groups-editor__content {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* Form Fields */
.groups-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.groups-field__label {
font-size: 0.9375rem;
font-weight: 500;
color: #F5F5F7;
}
.groups-field__required {
color: #EF4444;
margin-left: var(--space-1);
}
.groups-field__input {
padding: var(--space-3) var(--space-4);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
color: #F5F5F7;
font-size: 0.9375rem;
transition: all 0.2s ease;
}
.groups-field__input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.groups-field__input:focus {
outline: none;
border-color: rgba(147, 51, 234, 0.5);
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
.groups-field__hint {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.4);
}
/* Members Section */
.groups-members {
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.groups-members__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.groups-members__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.9375rem;
font-weight: 600;
color: #F5F5F7;
margin: 0;
}
.groups-members__title svg {
color: #A78BFA;
}
.groups-members__add-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
background: rgba(147, 51, 234, 0.15);
border: 1px solid rgba(147, 51, 234, 0.3);
border-radius: var(--radius-md);
color: #A78BFA;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.groups-members__add-btn:hover {
background: rgba(147, 51, 234, 0.25);
}
.groups-members__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.groups-members__empty {
text-align: center;
padding: var(--space-6);
color: rgba(255, 255, 255, 0.4);
font-size: 0.875rem;
}
/* Member Row */
.groups-member {
display: grid;
grid-template-columns: 28px 1fr 80px auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-md);
}
.groups-member__number {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(147, 51, 234, 0.15);
border-radius: 50%;
font-size: 0.75rem;
font-weight: 600;
color: #A78BFA;
}
.groups-member__identity {
position: relative;
display: flex;
align-items: center;
}
.groups-member__identity-input {
flex: 1;
padding: var(--space-2) var(--space-3);
padding-right: var(--space-8);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: #F5F5F7;
font-size: 0.8125rem;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
letter-spacing: -0.02em;
}
.groups-member__identity-input::placeholder {
font-family: inherit;
letter-spacing: normal;
color: rgba(255, 255, 255, 0.3);
}
.groups-member__identity--valid .groups-member__identity-input {
border-color: rgba(16, 185, 129, 0.4);
}
.groups-member__identity--invalid .groups-member__identity-input {
border-color: rgba(239, 68, 68, 0.4);
}
.groups-member__identity-status {
position: absolute;
right: var(--space-2);
display: flex;
align-items: center;
justify-content: center;
}
.groups-member__identity--valid .groups-member__identity-status {
color: #10B981;
}
.groups-member__identity--invalid .groups-member__identity-status {
color: #EF4444;
}
.groups-member__power {
display: flex;
}
.groups-member__power-input {
width: 100%;
padding: var(--space-2) var(--space-3);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: #F5F5F7;
font-size: 0.875rem;
text-align: center;
}
.groups-member__remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.2s ease;
}
.groups-member__remove-btn:hover {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
}
/* Power Summary */
.groups-summary {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
background: rgba(147, 51, 234, 0.05);
border: 1px solid rgba(147, 51, 234, 0.15);
border-radius: var(--radius-lg);
}
.groups-summary__item {
flex: 1;
text-align: center;
}
.groups-summary__label {
display: block;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-1);
}
.groups-summary__value {
font-size: 1.5rem;
font-weight: 700;
color: #F5F5F7;
}
.groups-summary__item--highlight .groups-summary__value {
color: #A78BFA;
}
/* Editor Footer */
.groups-editor__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Groups Guide (Right Column) */
.groups-guide {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
padding: var(--space-5);
backdrop-filter: blur(10px);
height: fit-content;
}
.groups-guide__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.groups-guide__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(147, 51, 234, 0.15);
border-radius: var(--radius-md);
color: #A78BFA;
}
.groups-guide__title {
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
margin: 0;
}
.groups-guide__section {
margin-bottom: var(--space-5);
}
.groups-guide__section-title {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 var(--space-2);
}
.groups-guide__text {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.6;
margin: 0;
}
.groups-guide__list {
list-style: none;
padding: 0;
margin: 0;
}
.groups-guide__list-item {
display: flex;
gap: var(--space-2);
padding: var(--space-2) 0;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
.groups-guide__list-item svg {
flex-shrink: 0;
color: #10B981;
margin-top: 2px;
}
.groups-guide__example {
padding: var(--space-3);
background: rgba(147, 51, 234, 0.08);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
.groups-guide__example p {
margin: 0;
}
.groups-guide__tip {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
background: rgba(14, 118, 253, 0.08);
border: 1px solid rgba(14, 118, 253, 0.15);
border-radius: var(--radius-lg);
margin-top: var(--space-5);
}
.groups-guide__tip-icon {
flex-shrink: 0;
color: #0E76FD;
}
.groups-guide__tip-text {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
margin: 0;
}
/* Feature Cards */
.groups-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.groups-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
transition: all 0.3s ease;
}
.groups-feature:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(147, 51, 234, 0.2);
transform: translateY(-2px);
}
.groups-feature__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(147, 51, 234, 0.15);
border-radius: var(--radius-lg);
color: #A78BFA;
margin-bottom: var(--space-4);
}
.groups-feature__title {
font-size: 1rem;
font-weight: 600;
color: #F5F5F7;
margin: 0 0 var(--space-2);
}
.groups-feature__text {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
/* Footer */
.groups-footer {
text-align: center;
padding-top: var(--space-6);
}
.groups-back-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.groups-back-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
color: #F5F5F7;
}
/* Light Theme */
html[data-theme='light'] .groups-page-bg__gradient {
background: linear-gradient(135deg,
rgba(147, 51, 234, 0.05) 0%,
transparent 50%,
rgba(14, 118, 253, 0.05) 100%
);
}
html[data-theme='light'] .groups-page-bg__grid {
background-image:
linear-gradient(rgba(147, 51, 234, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(147, 51, 234, 0.05) 1px, transparent 1px);
}
html[data-theme='light'] .groups-hero__badge {
background: rgba(147, 51, 234, 0.1);
border-color: rgba(147, 51, 234, 0.2);
color: #7C3AED;
}
html[data-theme='light'] .groups-hero__title {
color: #1D1D1F;
}
html[data-theme='light'] .groups-hero__subtitle {
color: #64748B;
}
html[data-theme='light'] .groups-sidebar,
html[data-theme='light'] .groups-editor,
html[data-theme='light'] .groups-guide {
background: rgba(254, 251, 247, 0.9);
border-color: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .groups-sidebar__title,
html[data-theme='light'] .groups-editor__title,
html[data-theme='light'] .groups-guide__title {
color: #1D1D1F;
}
html[data-theme='light'] .groups-list__item {
background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .groups-list__item:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .groups-list__item--active {
background: rgba(147, 51, 234, 0.08);
border-color: rgba(147, 51, 234, 0.25);
}
html[data-theme='light'] .groups-list__item-name,
html[data-theme='light'] .groups-field__label {
color: #1D1D1F;
}
html[data-theme='light'] .groups-field__input {
background: white;
border-color: rgba(0, 0, 0, 0.1);
color: #1D1D1F;
}
html[data-theme='light'] .groups-field__input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
html[data-theme='light'] .groups-members {
background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .groups-member {
background: white;
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .groups-member__number {
background: rgba(147, 51, 234, 0.1);
}
html[data-theme='light'] .groups-member__identity-input,
html[data-theme='light'] .groups-member__power-input {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
color: #1D1D1F;
}
html[data-theme='light'] .groups-member__identity-input::placeholder {
color: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .groups-summary {
background: rgba(147, 51, 234, 0.05);
border-color: rgba(147, 51, 234, 0.15);
}
html[data-theme='light'] .groups-summary__value {
color: #1D1D1F;
}
html[data-theme='light'] .groups-feature {
background: rgba(254, 251, 247, 0.9);
border-color: rgba(120, 100, 80, 0.1);
}
html[data-theme='light'] .groups-feature:hover {
border-color: rgba(147, 51, 234, 0.25);
}
html[data-theme='light'] .groups-feature__title {
color: #1D1D1F;
}
html[data-theme='light'] .groups-back-btn {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
color: #64748B;
}
html[data-theme='light'] .groups-back-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: #1D1D1F;
}
/* Additional Light Theme Styles for Groups Page */
html[data-theme='light'] .groups-page {
background: #FEFBF7;
}
html[data-theme='light'] .groups-sidebar__count {
background: rgba(147, 51, 234, 0.1);
color: #7C3AED;
}
html[data-theme='light'] .groups-list__empty {
color: #64748B;
}
html[data-theme='light'] .groups-list__empty svg {
opacity: 0.4;
}
html[data-theme='light'] .groups-list__item-meta {
color: #64748B;
}
html[data-theme='light'] .groups-list__item-warning {
color: #D97706;
}
html[data-theme='light'] .groups-list__item-icon--valid {
color: #10B981;
}
html[data-theme='light'] .groups-action-btn {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
color: #64748B;
}
html[data-theme='light'] .groups-action-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: #1D1D1F;
}
html[data-theme='light'] .groups-action-btn--primary {
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
border-color: transparent;
color: white;
}
html[data-theme='light'] .groups-action-btn--primary:hover {
background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}
html[data-theme='light'] .groups-editor__status {
color: #64748B;
}
html[data-theme='light'] .groups-editor__status-dot {
background: #94A3B8;
}
html[data-theme='light'] .groups-editor__status--editing .groups-editor__status-dot {
background: #F59E0B;
}
html[data-theme='light'] .groups-editor__status--invalid .groups-editor__status-dot {
background: #EF4444;
}
html[data-theme='light'] .groups-editor__status--valid .groups-editor__status-dot {
background: #10B981;
}
html[data-theme='light'] .groups-editor__action {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
color: #64748B;
}
html[data-theme='light'] .groups-editor__action:hover {
background: rgba(0, 0, 0, 0.04);
color: #1D1D1F;
}
html[data-theme='light'] .groups-editor__action--delete {
color: #DC2626;
}
html[data-theme='light'] .groups-editor__action--delete:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.2);
color: #DC2626;
}
html[data-theme='light'] .groups-editor__empty {
color: #64748B;
}
html[data-theme='light'] .groups-editor__empty svg {
opacity: 0.3;
}
html[data-theme='light'] .groups-editor__empty h3 {
color: #1D1D1F;
}
html[data-theme='light'] .groups-field__required {
color: #DC2626;
}
html[data-theme='light'] .groups-field__input:focus {
border-color: #9333EA;
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
html[data-theme='light'] .groups-field__hint {
color: #64748B;
}
html[data-theme='light'] .groups-members__title {
color: #1D1D1F;
}
html[data-theme='light'] .groups-members__add-btn {
background: rgba(147, 51, 234, 0.08);
color: #7C3AED;
}
html[data-theme='light'] .groups-members__add-btn:hover {
background: rgba(147, 51, 234, 0.15);
}
html[data-theme='light'] .groups-members__empty {
color: #64748B;
}
html[data-theme='light'] .groups-member__identity--valid .groups-member__identity-input {
border-color: rgba(16, 185, 129, 0.4);
}
html[data-theme='light'] .groups-member__identity--invalid .groups-member__identity-input {
border-color: rgba(239, 68, 68, 0.4);
}
html[data-theme='light'] .groups-member__identity-status {
color: #94A3B8;
}
html[data-theme='light'] .groups-member__identity--valid .groups-member__identity-status {
color: #10B981;
}
html[data-theme='light'] .groups-member__identity--invalid .groups-member__identity-status {
color: #EF4444;
}
html[data-theme='light'] .groups-member__power-input::placeholder {
color: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .groups-member__remove-btn {
background: transparent;
color: #94A3B8;
}
html[data-theme='light'] .groups-member__remove-btn:hover {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
}
html[data-theme='light'] .groups-summary__label {
color: #64748B;
}
html[data-theme='light'] .groups-summary__item--highlight .groups-summary__value {
color: #7C3AED;
}
html[data-theme='light'] .groups-guide__section-title {
color: #1D1D1F;
}
html[data-theme='light'] .groups-guide__text {
color: #64748B;
}
html[data-theme='light'] .groups-guide__list-item {
color: #64748B;
}
html[data-theme='light'] .groups-guide__list-item svg {
color: #10B981;
}
html[data-theme='light'] .groups-guide__example {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .groups-guide__example p {
color: #64748B;
}
html[data-theme='light'] .groups-guide__tip {
background: rgba(147, 51, 234, 0.05);
border-color: rgba(147, 51, 234, 0.15);
}
html[data-theme='light'] .groups-guide__tip-icon {
color: #7C3AED;
}
html[data-theme='light'] .groups-guide__tip-text {
color: #64748B;
}
html[data-theme='light'] .groups-feature__icon {
background: rgba(147, 51, 234, 0.1);
color: #7C3AED;
}
html[data-theme='light'] .groups-feature__text {
color: #64748B;
}
html[data-theme='light'] .groups-footer {
border-color: rgba(0, 0, 0, 0.06);
}
/* Responsive */
@media (max-width: 1200px) {
.groups-content {
grid-template-columns: 280px 1fr;
}
.groups-guide {
display: none;
}
}
@media (max-width: 900px) {
.groups-page {
padding: var(--space-4);
}
.groups-content {
grid-template-columns: 1fr;
}
.groups-sidebar {
max-height: none;
}
.groups-features {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.groups-page-bg__glow {
animation: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
TEMPLATES PAGE - Fullpage Templates Selection
Standalone page accessible from hub for quick-start templates
═══════════════════════════════════════════════════════════════════════════ */
/* Background Effects */
.templates-page-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.templates-page-bg__gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.03) 0%,
transparent 50%,
rgba(14, 118, 253, 0.03) 100%
);
}
.templates-page-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.templates-page-bg__glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.4;
animation: templatesGlow 8s ease-in-out infinite alternate;
}
.templates-page-bg__glow--1 {
top: -20%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
}
.templates-page-bg__glow--2 {
bottom: -20%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(14, 118, 253, 0.25), transparent 70%);
animation-delay: -4s;
}
@keyframes templatesGlow {
0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
100% { transform: translate(30px, -20px) scale(1.1); opacity: 0.5; }
}
/* Main Page Container */
.templates-page {
position: relative;
z-index: 1;
width: 100%;
max-width: 1600px;
min-height: 100%;
margin: 0 auto;
padding: var(--space-5) var(--space-6) var(--space-8);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Hero Section */
.templates-hero {
text-align: center;
margin-bottom: var(--space-6);
}
.templates-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(14, 118, 253, 0.1));
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
color: #10B981;
margin-bottom: var(--space-4);
}
.templates-hero__badge svg {
opacity: 0.8;
}
.templates-hero__title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-3);
line-height: 1.2;
background: linear-gradient(135deg, var(--color-text) 0%, #10B981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.templates-hero__subtitle {
font-size: 1.125rem;
color: var(--color-muted);
margin: 0;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Templates Content Area */
.templates-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.templates-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
background: rgba(255, 255, 255, 0.02);
border: 2px dashed rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
color: var(--color-muted);
font-size: 1rem;
}
/* Footer with Back Button */
.templates-footer {
margin-top: auto;
padding-top: var(--space-6);
display: flex;
justify-content: center;
}
.templates-back-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
color: var(--color-text);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.templates-back-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
transform: translateX(-2px);
}
.templates-back-btn svg {
transition: transform 0.2s ease;
}
.templates-back-btn:hover svg {
transform: translateX(-3px);
}
/* Light Theme */
html[data-theme='light'] .templates-page-bg__gradient {
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.05) 0%,
transparent 50%,
rgba(14, 118, 253, 0.05) 100%
);
}
html[data-theme='light'] .templates-page-bg__grid {
background-image:
linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
}
html[data-theme='light'] .templates-hero__badge {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(14, 118, 253, 0.08));
border-color: rgba(16, 185, 129, 0.15);
}
html[data-theme='light'] .templates-placeholder {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .templates-back-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
}
/* =============================================================================
TEMPLATES PAGE - Template Cards (tpl-*)
============================================================================= */
/* Section Layout */
.tpl-section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.tpl-section--featured {
margin-bottom: var(--space-2);
}
.tpl-section__header {
text-align: center;
margin-bottom: var(--space-2);
}
.tpl-section__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.tpl-section__subtitle {
font-size: 0.9375rem;
color: var(--color-muted);
margin: 0;
}
/* Template Grid */
.tpl-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-4);
}
/* Template Card Base */
.tpl-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.25s ease;
text-align: left;
}
.tpl-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.tpl-card:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(14, 118, 253, 0.2);
}
/* Scratch Card - Featured Horizontal Layout */
.tpl-card--scratch {
flex-direction: row;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: linear-gradient(135deg, rgba(14, 118, 253, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
border-color: rgba(14, 118, 253, 0.2);
}
.tpl-card--scratch:hover {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
border-color: rgba(14, 118, 253, 0.3);
}
.tpl-card--scratch .tpl-card__icon {
flex-shrink: 0;
width: 56px;
height: 56px;
background: rgba(14, 118, 253, 0.15);
color: #0E76FD;
}
.tpl-card--scratch .tpl-card__content {
flex: 1;
}
.tpl-card--scratch .tpl-card__arrow {
flex-shrink: 0;
color: var(--color-muted);
opacity: 0.5;
transition: all 0.2s ease;
}
.tpl-card--scratch:hover .tpl-card__arrow {
opacity: 1;
transform: translateX(4px);
color: #0E76FD;
}
/* Card Icon */
.tpl-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
color: var(--color-muted);
}
.tpl-card__icon--blue {
background: rgba(14, 118, 253, 0.12);
color: #0E76FD;
}
.tpl-card__icon--green {
background: rgba(16, 185, 129, 0.12);
color: #10B981;
}
.tpl-card__icon--purple {
background: rgba(139, 92, 246, 0.12);
color: #8B5CF6;
}
.tpl-card__icon--orange {
background: rgba(249, 115, 22, 0.12);
color: #F97316;
}
.tpl-card__icon--cyan {
background: rgba(6, 182, 212, 0.12);
color: #06B6D4;
}
.tpl-card__icon--teal {
background: rgba(20, 184, 166, 0.12);
color: #14B8A6;
}
/* Card Badge */
.tpl-card__badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: var(--space-1) var(--space-3);
background: rgba(14, 118, 253, 0.15);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
color: #0E76FD;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tpl-card__badge--green {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
}
.tpl-card__badge--purple {
background: rgba(139, 92, 246, 0.15);
color: #8B5CF6;
}
.tpl-card__badge--orange {
background: rgba(249, 115, 22, 0.15);
color: #F97316;
}
.tpl-card__badge--cyan {
background: rgba(6, 182, 212, 0.15);
color: #06B6D4;
}
.tpl-card__badge--teal {
background: rgba(20, 184, 166, 0.15);
color: #14B8A6;
}
/* Card Content */
.tpl-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.tpl-card__desc {
font-size: 0.875rem;
color: var(--color-muted);
margin: 0 0 var(--space-4);
line-height: 1.5;
}
/* Feature Tags */
.tpl-card__features {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: auto;
}
.tpl-feature {
padding: var(--space-1) var(--space-3);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-muted);
}
/* ─────────────────────────────────────────────────────────────────────
Template Card Settings Panels
Detailed configuration preview within template cards
───────────────────────────────────────────────────────────────────── */
.tpl-card-wrapper {
display: contents;
}
.tpl-card__settings {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tpl-settings-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.tpl-settings-group--highlight {
background: rgba(14, 118, 253, 0.05);
border-radius: 8px;
padding: var(--space-3);
margin: 0 calc(-1 * var(--space-3));
}
.tpl-settings-group__label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(245, 245, 247, 0.4);
}
.tpl-settings-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.tpl-setting {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.7);
}
.tpl-setting strong {
color: rgba(245, 245, 247, 0.5);
font-weight: 500;
}
/* Feature toggles grid */
.tpl-features-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.tpl-feat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
transition: all 0.15s ease;
}
.tpl-feat svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.tpl-feat--on {
background: rgba(16, 185, 129, 0.12);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.tpl-feat--on svg {
color: #10B981;
}
.tpl-feat--off {
background: rgba(255, 255, 255, 0.02);
color: rgba(245, 245, 247, 0.35);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.tpl-feat--off svg {
color: rgba(245, 245, 247, 0.25);
}
/* ─────────────────────────────────────────────────────────────────────
Interactive Template Cards
Editable settings within template cards
───────────────────────────────────────────────────────────────────── */
.tpl-card--interactive {
cursor: default;
}
.tpl-card--interactive:hover {
transform: none;
}
.tpl-card__header {
display: flex;
gap: var(--space-3);
align-items: flex-start;
margin-bottom: var(--space-2);
}
.tpl-card__header-text {
flex: 1;
min-width: 0;
}
.tpl-card--interactive .tpl-card__title {
margin-bottom: var(--space-1);
}
.tpl-card--interactive .tpl-card__desc {
margin-bottom: 0;
}
/* Primary settings group (naming) */
.tpl-settings-group--primary {
background: rgba(14, 118, 253, 0.05);
border: 1px solid rgba(14, 118, 253, 0.15);
border-radius: 10px;
padding: var(--space-3);
margin: 0 calc(-1 * var(--space-1));
}
/* Input rows */
.tpl-input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.tpl-input-row--triple {
grid-template-columns: 1fr 1fr auto;
}
/* Input fields */
.tpl-input-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.tpl-input-field--small {
max-width: 90px;
}
.tpl-input-field__label {
font-size: 0.6875rem;
font-weight: 500;
color: rgba(245, 245, 247, 0.5);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.tpl-input {
width: 100%;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-size: 0.875rem;
font-family: inherit;
color: var(--color-text);
transition: all 0.15s ease;
}
.tpl-input::placeholder {
color: rgba(245, 245, 247, 0.3);
}
.tpl-input:hover {
border-color: rgba(255, 255, 255, 0.15);
}
.tpl-input:focus {
outline: none;
border-color: #0E76FD;
background: rgba(14, 118, 253, 0.05);
box-shadow: 0 0 0 3px rgba(14, 118, 253, 0.1);
}
/* Feature toggles (interactive) */
.tpl-features-grid--toggleable {
gap: 8px;
}
.tpl-feat-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.tpl-feat-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tpl-feat-toggle svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.tpl-feat-toggle--on {
background: rgba(16, 185, 129, 0.12);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.25);
}
.tpl-feat-toggle--on svg {
color: #10B981;
}
.tpl-feat-toggle--off {
background: rgba(255, 255, 255, 0.02);
color: rgba(245, 245, 247, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.tpl-feat-toggle--off svg {
color: rgba(245, 245, 247, 0.3);
}
.tpl-feat-toggle:hover {
transform: translateY(-1px);
}
.tpl-feat-toggle--on:hover {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.35);
}
.tpl-feat-toggle--off:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
/* History toggles (interactive) */
.tpl-history-tags--toggleable {
gap: 8px;
}
.tpl-history-toggle {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.tpl-history-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tpl-history-toggle--on {
background: rgba(14, 118, 253, 0.12);
color: #0E76FD;
border: 1px solid rgba(14, 118, 253, 0.25);
}
.tpl-history-toggle--off {
background: rgba(255, 255, 255, 0.02);
color: rgba(245, 245, 247, 0.35);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tpl-history-toggle:hover {
transform: translateY(-1px);
}
.tpl-history-toggle--on:hover {
background: rgba(14, 118, 253, 0.18);
border-color: rgba(14, 118, 253, 0.35);
}
.tpl-history-toggle--off:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
/* Option toggles (single checkbox options) */
.tpl-option-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.tpl-option-toggle input {
width: 18px;
height: 18px;
accent-color: #10B981;
cursor: pointer;
}
.tpl-option-toggle__label {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.8);
}
/* Action button (instead of passive text) */
.tpl-card__action--btn {
width: 100%;
padding: var(--space-3) var(--space-4);
background: linear-gradient(135deg, #0E76FD 0%, #0A5FCC 100%);
border: none;
border-radius: 10px;
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
}
.tpl-card__action--btn:hover {
background: linear-gradient(135deg, #3D9AFF 0%, #0E76FD 100%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(14, 118, 253, 0.3);
}
.tpl-card__action--btn:active {
transform: translateY(0);
}
.tpl-card__action--btn svg {
transition: transform 0.2s ease;
}
.tpl-card__action--btn:hover svg {
transform: translateX(4px);
}
/* Light theme for interactive cards */
html[data-theme='light'] .tpl-settings-group--primary {
background: rgba(14, 118, 253, 0.06);
border-color: rgba(14, 118, 253, 0.2);
}
html[data-theme='light'] .tpl-input {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
color: var(--color-text);
}
html[data-theme='light'] .tpl-input::placeholder {
color: rgba(0, 0, 0, 0.35);
}
html[data-theme='light'] .tpl-input:hover {
border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme='light'] .tpl-input:focus {
background: rgba(14, 118, 253, 0.04);
}
html[data-theme='light'] .tpl-input-field__label {
color: rgba(0, 0, 0, 0.5);
}
html[data-theme='light'] .tpl-feat-toggle--off {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.4);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-feat-toggle--off svg {
color: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .tpl-feat-toggle--off:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .tpl-history-toggle--off {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.4);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-history-toggle--off:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .tpl-option-toggle__label {
color: rgba(0, 0, 0, 0.8);
}
/* History tracking tags */
.tpl-history-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tpl-history-tag {
padding: 3px 8px;
border-radius: 4px;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.tpl-history-tag--on {
background: rgba(14, 118, 253, 0.1);
color: #0E76FD;
border: 1px solid rgba(14, 118, 253, 0.2);
}
.tpl-history-tag--off {
background: rgba(255, 255, 255, 0.02);
color: rgba(245, 245, 247, 0.3);
border: 1px solid rgba(255, 255, 255, 0.04);
}
/* Distribution info section */
.tpl-distribution-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.tpl-dist-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.tpl-dist-label {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.5);
}
.tpl-dist-value {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(245, 245, 247, 0.8);
}
/* Setting value badges */
.tpl-setting-value {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
background: rgba(255, 255, 255, 0.04);
color: rgba(245, 245, 247, 0.6);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.tpl-setting-value--on {
background: rgba(16, 185, 129, 0.1);
color: #10B981;
border-color: rgba(16, 185, 129, 0.2);
}
/* Card action footer */
.tpl-card__action {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.875rem;
font-weight: 600;
color: #0E76FD;
transition: all 0.2s ease;
}
.tpl-card__action svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.tpl-card:hover .tpl-card__action {
color: #3D9AFF;
}
.tpl-card:hover .tpl-card__action svg {
transform: translateX(4px);
}
/* Light Theme Overrides */
html[data-theme='light'] .tpl-card {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-card:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-card--scratch {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
border-color: rgba(14, 118, 253, 0.15);
}
html[data-theme='light'] .tpl-card--scratch:hover {
background: linear-gradient(135deg, rgba(14, 118, 253, 0.1) 0%, rgba(139, 92, 246, 0.06) 100%);
border-color: rgba(14, 118, 253, 0.25);
}
html[data-theme='light'] .tpl-card__icon {
background: rgba(0, 0, 0, 0.04);
}
html[data-theme='light'] .tpl-card__icon--blue {
background: rgba(14, 118, 253, 0.1);
}
html[data-theme='light'] .tpl-card__icon--green {
background: rgba(16, 185, 129, 0.1);
}
html[data-theme='light'] .tpl-card__icon--purple {
background: rgba(139, 92, 246, 0.1);
}
html[data-theme='light'] .tpl-card__icon--orange {
background: rgba(249, 115, 22, 0.1);
}
html[data-theme='light'] .tpl-card__icon--cyan {
background: rgba(6, 182, 212, 0.1);
}
html[data-theme='light'] .tpl-card__icon--teal {
background: rgba(20, 184, 166, 0.1);
}
html[data-theme='light'] .tpl-feature {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
/* Light theme for settings panels */
html[data-theme='light'] .tpl-card__settings {
border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-settings-group__label {
color: rgba(0, 0, 0, 0.45);
}
html[data-theme='light'] .tpl-setting {
color: rgba(0, 0, 0, 0.7);
}
html[data-theme='light'] .tpl-setting strong {
color: rgba(0, 0, 0, 0.5);
}
html[data-theme='light'] .tpl-feat--off {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .tpl-feat--off svg {
color: rgba(0, 0, 0, 0.25);
}
html[data-theme='light'] .tpl-history-tag--off {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .tpl-dist-label {
color: rgba(0, 0, 0, 0.5);
}
html[data-theme='light'] .tpl-dist-value {
color: rgba(0, 0, 0, 0.8);
}
html[data-theme='light'] .tpl-setting-value {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-card__action {
border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .tpl-settings-group--highlight {
background: rgba(14, 118, 253, 0.06);
}
/* Responsive */
@media (max-width: 600px) {
.tpl-card--scratch {
flex-direction: column;
text-align: center;
}
.tpl-card--scratch .tpl-card__arrow {
display: none;
}
.tpl-grid {
grid-template-columns: 1fr;
}
/* Settings panels responsive */
.tpl-settings-row {
flex-direction: column;
gap: var(--space-1);
}
.tpl-features-grid {
gap: 6px;
}
.tpl-feat {
font-size: 0.6875rem;
padding: 3px 8px;
}
.tpl-history-tags {
gap: 4px;
}
.tpl-history-tag {
font-size: 0.625rem;
padding: 2px 6px;
}
.tpl-card__settings {
gap: var(--space-2);
}
}
html[data-theme='light'] .templates-back-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
@media (prefers-reduced-motion: reduce) {
.templates-page-bg__glow {
animation: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
WIZARD REDESIGN - Glass Morphism Design System
Matches landing page and hub page aesthetic
═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
Redesigned Sidebar - Glass Navigation
───────────────────────────────────────────────────────────────────── */
.wizard-sidebar--redesigned {
position: fixed;
left: 0;
top: var(--header-height);
bottom: 0;
width: 280px;
background: linear-gradient(180deg, #0D1117 0%, #161B22 100%);
border-right: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
z-index: 100;
overflow: hidden;
}
.sidebar-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.sidebar-bg__gradient {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(14, 118, 253, 0.1) 0%, transparent 60%);
}
/* Progress Section */
.sidebar-progress {
position: relative;
padding: 1.25rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.01);
}
.sidebar-progress__ring {
width: 48px;
height: 48px;
position: relative;
flex-shrink: 0;
}
.sidebar-progress__ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.sidebar-progress__ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 4;
}
.sidebar-progress__ring-fill {
fill: none;
stroke: #0E76FD;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 126;
stroke-dashoffset: 126;
transition: stroke-dashoffset 0.5s ease;
}
.sidebar-progress__percent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: #F5F5F7;
}
.sidebar-progress__info {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.sidebar-progress__label {
font-size: 0.9375rem;
font-weight: 600;
color: #F5F5F7;
}
.sidebar-progress__text {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.5);
}
/* Navigation Section */
.sidebar-nav--redesigned {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar-nav--redesigned::-webkit-scrollbar {
width: 6px;
}
.sidebar-nav--redesigned::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav--redesigned::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
/* Step Items */
.sidebar-step {
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.sidebar-step:last-child {
border-bottom: none;
}
.sidebar-step__header {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: transparent;
border: none;
color: #F5F5F7;
cursor: pointer;
transition: background 0.2s;
text-align: left;
font-family: inherit;
}
.sidebar-step__header:hover {
background: rgba(255, 255, 255, 0.03);
}
.sidebar-step__indicator {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: rgba(245, 245, 247, 0.6);
flex-shrink: 0;
transition: all 0.2s;
}
.sidebar-step--active .sidebar-step__indicator {
background: rgba(14, 118, 253, 0.15);
border-color: rgba(14, 118, 253, 0.3);
color: #0E76FD;
}
.sidebar-step--valid .sidebar-step__indicator {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
color: #10B981;
}
.sidebar-step--invalid .sidebar-step__indicator {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: #EF4444;
}
.sidebar-step__title {
flex: 1;
font-size: 0.9375rem;
font-weight: 500;
color: rgba(245, 245, 247, 0.9);
transition: color 0.2s;
}
.sidebar-step--active .sidebar-step__title {
color: #F5F5F7;
font-weight: 600;
}
.sidebar-step__status {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.sidebar-step__status svg {
width: 14px;
height: 14px;
}
.sidebar-step__status--valid {
color: #10B981;
}
.sidebar-step__status--invalid {
color: #EF4444;
}
.sidebar-step__status--pending {
color: rgba(245, 245, 247, 0.3);
}
.sidebar-step__chevron {
width: 16px;
height: 16px;
color: rgba(245, 245, 247, 0.4);
transition: transform 0.2s;
flex-shrink: 0;
}
.sidebar-step[aria-expanded="true"] .sidebar-step__chevron {
transform: rotate(90deg);
}
/* Submenu Items */
.sidebar-step__submenu {
display: none;
padding-bottom: 0.5rem;
}
.sidebar-step[aria-expanded="true"] .sidebar-step__submenu {
display: block;
}
.sidebar-substep {
display: flex;
align-items: center;
padding: 0.5rem 1rem 0.5rem 3.25rem;
color: rgba(245, 245, 247, 0.55);
text-decoration: none;
font-size: 0.8125rem;
transition: all 0.15s;
position: relative;
cursor: pointer;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.sidebar-substep::before {
content: '';
position: absolute;
left: 1.75rem;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(245, 245, 247, 0.2);
transition: all 0.15s;
}
.sidebar-substep:hover {
color: rgba(245, 245, 247, 0.85);
background: rgba(255, 255, 255, 0.02);
}
.sidebar-substep:hover::before {
background: rgba(245, 245, 247, 0.4);
}
.sidebar-substep--active {
color: #0E76FD;
background: rgba(14, 118, 253, 0.08);
}
.sidebar-substep--active::before {
background: #0E76FD;
width: 6px;
height: 6px;
}
/* Section Labels */
.sidebar-section-label {
padding: 0.75rem 1rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(245, 245, 247, 0.35);
margin-top: 0.5rem;
}
/* Sidebar Footer */
.sidebar-footer {
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sidebar-footer__theme {
display: flex;
justify-content: center;
}
.sidebar-footer__theme .theme-toggle {
width: 100%;
}
.sidebar-footer__theme .theme-toggle__options {
display: flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 3px;
gap: 3px;
}
.sidebar-footer__theme .theme-toggle__option {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(245, 245, 247, 0.6);
cursor: pointer;
transition: all 0.2s;
}
.sidebar-footer__theme .theme-toggle__option:hover {
color: rgba(245, 245, 247, 0.9);
}
.sidebar-footer__theme .theme-toggle__option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.sidebar-footer__theme .theme-toggle__option:has(input:checked) {
background: rgba(255, 255, 255, 0.1);
color: #F5F5F7;
}
.sidebar-reset {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: rgba(245, 245, 247, 0.6);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.sidebar-reset:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: #F5F5F7;
}
.sidebar-reset svg {
width: 14px;
height: 14px;
}
/* ─────────────────────────────────────────────────────────────────────
Glass Form Cards
───────────────────────────────────────────────────────────────────── */
.form-card--glass {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 0;
overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s;
}
.form-card--glass:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.form-card--glass:focus-within {
border-color: rgba(14, 118, 253, 0.3);
box-shadow: 0 0 0 4px rgba(14, 118, 253, 0.08);
}
.form-card--glass .form-card__header {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.form-card--glass .form-card__icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(14, 118, 253, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #0E76FD;
flex-shrink: 0;
}
.form-card--glass .form-card__icon svg {
width: 20px;
height: 20px;
}
.form-card--glass .form-card__titles {
flex: 1;
min-width: 0;
}
.form-card--glass .form-card__title {
font-size: 1.0625rem;
font-weight: 600;
color: #F5F5F7;
margin: 0 0 0.25rem;
letter-spacing: -0.01em;
}
.form-card--glass .form-card__subtitle {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.55);
margin: 0;
line-height: 1.4;
}
.form-card--glass .form-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ─────────────────────────────────────────────────────────────────────
Glass Input Fields
───────────────────────────────────────────────────────────────────── */
.field-group--glass {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.field-label--glass {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: rgba(245, 245, 247, 0.85);
}
.field-required {
color: #0E76FD;
font-weight: 600;
}
.field-input--glass {
width: 100%;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #F5F5F7;
font-size: 0.9375rem;
font-family: inherit;
transition: all 0.2s;
}
.field-input--glass::placeholder {
color: rgba(245, 245, 247, 0.3);
}
.field-input--glass:hover {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.04);
}
.field-input--glass:focus {
outline: none;
border-color: rgba(14, 118, 253, 0.5);
background: rgba(14, 118, 253, 0.05);
box-shadow: 0 0 0 3px rgba(14, 118, 253, 0.12);
}
.field-input--glass:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.field-hint--glass {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.45);
line-height: 1.4;
}
.field-error--glass {
font-size: 0.8125rem;
color: #EF4444;
}
/* Textarea variant */
textarea.field-input--glass {
min-height: 100px;
resize: vertical;
}
/* Select variant */
select.field-input--glass {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
/* ─────────────────────────────────────────────────────────────────────
Glass Toggle Switch
───────────────────────────────────────────────────────────────────── */
.toggle-switch--glass {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.toggle-switch--glass:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.toggle-switch__track {
width: 44px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.toggle-switch__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #F5F5F7;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-switch--active .toggle-switch__track {
background: #0E76FD;
}
.toggle-switch--active .toggle-switch__track::after {
transform: translateX(20px);
}
.toggle-switch__content {
flex: 1;
min-width: 0;
}
.toggle-switch__label {
display: block;
font-size: 0.9375rem;
font-weight: 500;
color: #F5F5F7;
margin-bottom: 0.125rem;
}
.toggle-switch__hint {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.5);
}
/* ─────────────────────────────────────────────────────────────────────
Glass Checkbox
───────────────────────────────────────────────────────────────────── */
.checkbox--glass {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.checkbox--glass:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.checkbox--glass__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox--glass__box {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.checkbox--glass:hover .checkbox--glass__box {
border-color: rgba(255, 255, 255, 0.35);
}
.checkbox--glass:has(.checkbox--glass__input:checked) .checkbox--glass__box {
background: #0E76FD;
border-color: #0E76FD;
}
.checkbox--glass__check {
color: white;
opacity: 0;
transform: scale(0.5);
transition: all 0.15s;
}
.checkbox--glass:has(.checkbox--glass__input:checked) .checkbox--glass__check {
opacity: 1;
transform: scale(1);
}
.checkbox--glass__label {
font-size: 0.9375rem;
font-weight: 500;
color: #F5F5F7;
}
/* Legacy checkbox support */
.checkbox__box {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
margin-top: 1px;
}
.checkbox--glass:hover .checkbox__box {
border-color: rgba(255, 255, 255, 0.3);
}
.checkbox--checked .checkbox__box {
background: #0E76FD;
border-color: #0E76FD;
}
.checkbox__box svg {
width: 12px;
height: 12px;
color: white;
opacity: 0;
transform: scale(0.5);
transition: all 0.15s;
}
.checkbox--checked .checkbox__box svg {
opacity: 1;
transform: scale(1);
}
.checkbox__content {
flex: 1;
}
.checkbox__label {
font-size: 0.9375rem;
font-weight: 500;
color: #F5F5F7;
}
.checkbox__hint {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.5);
margin-top: 0.125rem;
}
/* ─────────────────────────────────────────────────────────────────────
Glass Guide Panel
───────────────────────────────────────────────────────────────────── */
.page-guide--glass {
background: rgba(13, 17, 23, 0.95);
border-left: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
}
.page-guide--glass .page-guide__header {
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.page-guide--glass .page-guide__tabs-horizontal {
display: flex;
gap: 0.5rem;
}
.page-guide--glass .page-guide__tab {
padding: 0.5rem 0.875rem;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: rgba(245, 245, 247, 0.55);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.page-guide--glass .page-guide__tab:hover {
color: #F5F5F7;
background: rgba(255, 255, 255, 0.04);
}
.page-guide--glass .page-guide__tab.active {
color: #0E76FD;
background: rgba(14, 118, 253, 0.1);
border-color: rgba(14, 118, 253, 0.2);
}
.page-guide--glass .page-guide__content {
padding: 1.25rem;
}
.page-guide--glass .page-guide__title {
font-size: 1.0625rem;
font-weight: 600;
color: #F5F5F7;
margin-bottom: 0.625rem;
letter-spacing: -0.01em;
}
.page-guide--glass .page-guide__intro {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.6);
line-height: 1.6;
margin-bottom: 1.25rem;
}
.page-guide--glass .page-guide__section {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.page-guide--glass .page-guide__section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.page-guide--glass .page-guide__section-title {
font-size: 0.8125rem;
font-weight: 600;
color: rgba(245, 245, 247, 0.8);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.page-guide--glass .page-guide__step-heading {
font-size: 0.9375rem;
font-weight: 500;
color: #F5F5F7;
margin-bottom: 0.375rem;
}
.page-guide--glass .page-guide__list {
list-style: none;
padding: 0;
margin: 0;
}
.page-guide--glass .page-guide__list li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.5rem;
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.6);
line-height: 1.5;
}
.page-guide--glass .page-guide__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(14, 118, 253, 0.6);
}
.page-guide--glass .page-guide__tip {
padding: 0.875rem 1rem;
background: rgba(14, 118, 253, 0.08);
border: 1px solid rgba(14, 118, 253, 0.15);
border-radius: 10px;
margin-top: 1rem;
}
.page-guide--glass .page-guide__tip-title {
font-size: 0.8125rem;
font-weight: 600;
color: #0E76FD;
margin-bottom: 0.375rem;
}
.page-guide--glass .page-guide__tip-text {
font-size: 0.8125rem;
color: rgba(245, 245, 247, 0.7);
line-height: 1.5;
}
/* ─────────────────────────────────────────────────────────────────────
Redesigned Wizard Screen Container
───────────────────────────────────────────────────────────────────── */
.wizard-screen--redesigned {
position: relative;
}
.wizard-screen--redesigned::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 70% 10%, rgba(14, 118, 253, 0.05) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 20% 90%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.wizard-screen--redesigned .wizard-screen__inner {
background: transparent;
border: none;
box-shadow: none;
max-width: 800px;
position: relative;
z-index: 1;
}
.wizard-screen--redesigned .wizard-screen__inner--compact {
padding: 1.5rem;
padding-bottom: 1.5rem;
gap: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: auto;
}
.wizard-screen--redesigned .wizard-screen__inner--compact .wizard-form {
margin-top: 0;
}
.wizard-screen--redesigned .wizard-screen__inner--compact .form-card--glass {
margin-top: 0;
}
.wizard-screen--redesigned .wizard-screen__title {
font-size: 1.5rem;
font-weight: 700;
color: #F5F5F7;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.wizard-screen--redesigned .wizard-screen__subtitle {
font-size: 1rem;
color: rgba(245, 245, 247, 0.6);
margin-bottom: 2rem;
}
/* ─────────────────────────────────────────────────────────────────────
Glass Action Buttons
───────────────────────────────────────────────────────────────────── */
.btn--glass {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #F5F5F7;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn--glass:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.btn--glass-primary {
background: linear-gradient(135deg, #0E76FD 0%, #0A5FCC 100%);
border-color: transparent;
box-shadow: 0 2px 12px rgba(14, 118, 253, 0.25);
}
.btn--glass-primary:hover {
background: linear-gradient(135deg, #1A82FF 0%, #0E76FD 100%);
box-shadow: 0 4px 16px rgba(14, 118, 253, 0.35);
}
.btn--glass svg {
width: 18px;
height: 18px;
}
/* ─────────────────────────────────────────────────────────────────────
Light Mode Overrides for Redesigned Components
───────────────────────────────────────────────────────────────────── */
html[data-theme='light'] .wizard-sidebar--redesigned {
background: linear-gradient(180deg, #FFFBF7 0%, #FEF7F0 100%);
border-right-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .sidebar-bg__gradient {
background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(14, 118, 253, 0.06) 0%, transparent 60%);
}
html[data-theme='light'] .sidebar-progress {
background: rgba(0, 0, 0, 0.02);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .sidebar-progress__ring-bg {
stroke: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .sidebar-progress__percent,
html[data-theme='light'] .sidebar-progress__label {
color: #1D1D1F;
}
html[data-theme='light'] .sidebar-progress__text {
color: rgba(29, 29, 31, 0.5);
}
html[data-theme='light'] .sidebar-step {
border-bottom-color: rgba(0, 0, 0, 0.04);
}
html[data-theme='light'] .sidebar-step__header {
color: #1D1D1F;
}
html[data-theme='light'] .sidebar-step__header:hover {
background: rgba(0, 0, 0, 0.03);
}
html[data-theme='light'] .sidebar-step__indicator {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(29, 29, 31, 0.6);
}
html[data-theme='light'] .sidebar-step__title {
color: rgba(29, 29, 31, 0.85);
}
html[data-theme='light'] .sidebar-step--active .sidebar-step__title {
color: #1D1D1F;
}
html[data-theme='light'] .sidebar-step__chevron {
color: rgba(29, 29, 31, 0.4);
}
html[data-theme='light'] .sidebar-substep {
color: rgba(29, 29, 31, 0.55);
}
html[data-theme='light'] .sidebar-substep::before {
background: rgba(29, 29, 31, 0.2);
}
html[data-theme='light'] .sidebar-substep:hover {
color: rgba(29, 29, 31, 0.85);
background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .sidebar-substep--active {
color: #0E76FD;
background: rgba(14, 118, 253, 0.06);
}
html[data-theme='light'] .sidebar-footer {
background: rgba(0, 0, 0, 0.02);
border-top-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .sidebar-reset {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
color: rgba(29, 29, 31, 0.6);
}
html[data-theme='light'] .sidebar-reset:hover {
background: rgba(0, 0, 0, 0.05);
color: #1D1D1F;
}
html[data-theme='light'] .sidebar-section-label {
color: rgba(29, 29, 31, 0.4);
}
html[data-theme='light'] .sidebar-footer__theme .theme-toggle__options {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .sidebar-footer__theme .theme-toggle__option {
color: rgba(29, 29, 31, 0.6);
}
html[data-theme='light'] .sidebar-footer__theme .theme-toggle__option:hover {
color: rgba(29, 29, 31, 0.85);
}
html[data-theme='light'] .sidebar-footer__theme .theme-toggle__option:has(input:checked) {
background: rgba(0, 0, 0, 0.08);
color: #1D1D1F;
}
/* Form Cards Light Mode */
html[data-theme='light'] .form-card--glass {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .form-card--glass:hover {
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .form-card--glass:focus-within {
border-color: rgba(14, 118, 253, 0.4);
box-shadow: 0 0 0 4px rgba(14, 118, 253, 0.1);
}
html[data-theme='light'] .form-card--glass .form-card__header {
background: rgba(0, 0, 0, 0.02);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .form-card--glass .form-card__title {
color: #1D1D1F;
}
html[data-theme='light'] .form-card--glass .form-card__subtitle {
color: rgba(29, 29, 31, 0.6);
}
/* Input Fields Light Mode */
html[data-theme='light'] .field-label--glass {
color: rgba(29, 29, 31, 0.85);
}
html[data-theme='light'] .field-input--glass {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.1);
color: #1D1D1F;
}
html[data-theme='light'] .field-input--glass::placeholder {
color: rgba(29, 29, 31, 0.35);
}
html[data-theme='light'] .field-input--glass:hover {
border-color: rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.9);
}
html[data-theme='light'] .field-input--glass:focus {
border-color: rgba(14, 118, 253, 0.5);
background: rgba(14, 118, 253, 0.03);
}
html[data-theme='light'] .field-hint--glass {
color: rgba(29, 29, 31, 0.5);
}
/* Toggle Switch Light Mode */
html[data-theme='light'] .toggle-switch--glass {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .toggle-switch--glass:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .toggle-switch__track {
background: rgba(0, 0, 0, 0.15);
}
html[data-theme='light'] .toggle-switch__label {
color: #1D1D1F;
}
html[data-theme='light'] .toggle-switch__hint {
color: rgba(29, 29, 31, 0.5);
}
/* Checkbox Light Mode */
html[data-theme='light'] .checkbox--glass {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .checkbox--glass:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .checkbox--glass__box {
border-color: rgba(0, 0, 0, 0.2);
}
html[data-theme='light'] .checkbox--glass:hover .checkbox--glass__box {
border-color: rgba(0, 0, 0, 0.35);
}
html[data-theme='light'] .checkbox--glass__label {
color: #1D1D1F;
}
html[data-theme='light'] .checkbox__box {
border-color: rgba(0, 0, 0, 0.2);
}
html[data-theme='light'] .checkbox__label {
color: #1D1D1F;
}
html[data-theme='light'] .checkbox__hint {
color: rgba(29, 29, 31, 0.5);
}
/* Guide Panel Light Mode */
html[data-theme='light'] .page-guide--glass {
background: rgba(255, 251, 247, 0.95);
border-left-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .page-guide--glass .page-guide__header {
background: rgba(0, 0, 0, 0.02);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .page-guide--glass .page-guide__tab {
color: rgba(29, 29, 31, 0.55);
}
html[data-theme='light'] .page-guide--glass .page-guide__tab:hover {
color: #1D1D1F;
background: rgba(0, 0, 0, 0.04);
}
html[data-theme='light'] .page-guide--glass .page-guide__tab.active {
color: #0E76FD;
background: rgba(14, 118, 253, 0.08);
}
html[data-theme='light'] .page-guide--glass .page-guide__title {
color: #1D1D1F;
}
html[data-theme='light'] .page-guide--glass .page-guide__intro {
color: rgba(29, 29, 31, 0.65);
}
html[data-theme='light'] .page-guide--glass .page-guide__section {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .page-guide--glass .page-guide__section-title {
color: rgba(29, 29, 31, 0.7);
}
html[data-theme='light'] .page-guide--glass .page-guide__step-heading {
color: #1D1D1F;
}
html[data-theme='light'] .page-guide--glass .page-guide__list li {
color: rgba(29, 29, 31, 0.65);
}
html[data-theme='light'] .page-guide--glass .page-guide__tip {
background: rgba(14, 118, 253, 0.06);
border-color: rgba(14, 118, 253, 0.12);
}
html[data-theme='light'] .page-guide--glass .page-guide__tip-text {
color: rgba(29, 29, 31, 0.7);
}
/* Wizard Screen Light Mode */
html[data-theme='light'] .wizard-screen--redesigned::before {
background:
radial-gradient(ellipse 60% 40% at 70% 10%, rgba(14, 118, 253, 0.04) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 20% 90%, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
}
html[data-theme='light'] .wizard-screen--redesigned .wizard-screen__title {
color: #1D1D1F;
}
html[data-theme='light'] .wizard-screen--redesigned .wizard-screen__subtitle {
color: rgba(29, 29, 31, 0.6);
}
/* Button Light Mode */
html[data-theme='light'] .btn--glass {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
color: #1D1D1F;
}
html[data-theme='light'] .btn--glass:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.15);
}
/* ─────────────────────────────────────────────────────────────────────
Templates Page - Expanded Layout
───────────────────────────────────────────────────────────────────── */
/* Expand templates screen to use full available width */
section.wizard-screen#screen-welcome,
section#screen-welcome.wizard-screen--redesigned,
#screen-welcome.wizard-screen--redesigned,
#screen-welcome {
--content-max-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
section.wizard-screen#screen-welcome .wizard-screen__inner,
#screen-welcome.wizard-screen--redesigned .wizard-screen__inner,
#screen-welcome .wizard-screen__inner {
max-width: 100% !important;
width: 100% !important;
min-width: 0;
margin: 0;
padding: 2rem;
background: transparent;
border: none;
box-shadow: none;
}
#screen-welcome .welcome-container {
max-width: 100%;
width: 100%;
text-align: left;
padding: 0;
min-width: 0;
}
#screen-welcome .welcome-title {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 0.5rem;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
#screen-welcome .welcome-subtitle {
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.5rem;
white-space: normal;
}
#screen-welcome .template-selection {
margin-top: 0;
width: 100%;
}
#screen-welcome .template-selection__title,
#screen-welcome .template-selection__description {
display: none; /* Hidden - info now in tip and section headers */
}
/* First-time user guidance tip */
.template-tip {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: rgba(14, 118, 253, 0.08);
border: 1px solid rgba(14, 118, 253, 0.2);
border-radius: 12px;
color: rgba(245, 245, 247, 0.9);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.template-tip svg {
color: #0E76FD;
flex-shrink: 0;
margin-top: 2px;
width: 20px;
height: 20px;
}
.template-tip strong {
color: #F5F5F7;
}
html[data-theme='light'] .template-tip {
background: rgba(14, 118, 253, 0.06);
border-color: rgba(14, 118, 253, 0.15);
color: rgba(29, 29, 31, 0.8);
}
html[data-theme='light'] .template-tip strong {
color: #1D1D1F;
}
/* Template grid sections */
.template-grid__primary {
margin-bottom: 2rem;
}
.template-grid__section {
margin-top: 0;
}
.template-grid__section-title {
font-size: 1rem;
font-weight: 600;
color: rgba(245, 245, 247, 0.7);
margin-bottom: 0.375rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.template-grid__section-subtitle {
font-size: 0.9375rem;
color: rgba(245, 245, 247, 0.5);
margin-bottom: 1rem;
}
html[data-theme='light'] .template-grid__section-title {
color: rgba(29, 29, 31, 0.6);
}
html[data-theme='light'] .template-grid__section-subtitle {
color: rgba(29, 29, 31, 0.5);
}
.template-grid__templates {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 1200px) {
.template-grid__templates {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 800px) {
.template-grid__templates {
grid-template-columns: 1fr;
}
#screen-welcome.wizard-screen--redesigned .wizard-screen__inner {
max-width: 100%;
margin-left: 1rem;
margin-right: 1rem;
}
}
/* Glass styling for template cards */
.template-card--glass {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
}
.template-card--glass:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme='light'] .template-card--glass {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .template-card--glass:hover {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.12);
}
/* ─────────────────────────────────────────────────────────────────────
Responsive Adjustments for Redesigned Components
───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.wizard-sidebar--redesigned {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.wizard-sidebar--redesigned.sidebar-open {
transform: translateX(0);
}
}
@media (max-width: 768px) {
.form-card--glass .form-card__header {
padding: 1rem 1.25rem;
}
.form-card--glass .form-card__body {
padding: 1.25rem;
}
.sidebar-progress {
padding: 1rem;
}
.sidebar-progress__ring {
width: 40px;
height: 40px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPREHENSIVE MOBILE LAYOUT FIX
Unified mobile experience for all pages (Templates, Groups, Documents, Wizard)
═══════════════════════════════════════════════════════════════════════════ */
/* Mobile bottom nav - hidden by default, only visible on mobile in wizard shell */
.mobile-bottom-nav {
display: none;
}
@media (max-width: 900px) {
/* ─────────────────────────────────────────────────────────────────────
MOBILE LAYOUT: Hide sidebar completely, use bottom tab bar
───────────────────────────────────────────────────────────────────── */
/* Hide the wizard sidebar completely on mobile when viewing pages */
.wizard-sidebar {
display: none !important;
}
/* Reset wizard-shell to be a simple single-column container */
.wizard-shell {
display: flex !important;
flex-direction: column !important;
padding-left: 0 !important;
min-height: 100vh;
min-height: 100dvh;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Global header becomes the mobile header - glassmorphism */
.global-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 56px !important;
z-index: 1000 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
gap: 8px !important;
background: var(--header-bg-gradient) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid var(--header-border) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 1px 0 var(--header-glow) inset !important;
}
/* Header left section - brand */
.global-header__left {
flex-shrink: 0 !important;
min-width: 0 !important;
}
/* Header right section - compact buttons */
.global-header__right {
flex-shrink: 0 !important;
gap: 4px !important;
}
/* Theme toggle - smaller on mobile */
.global-header__theme-toggle {
padding: 2px !important;
gap: 0 !important;
}
.global-header__theme-btn {
width: 32px !important;
height: 32px !important;
padding: 6px !important;
}
/* Hide the old mobile header - we use global header */
.mobile-header {
display: none !important;
}
/* Main content area - fills space between header and bottom nav */
.wizard-main {
flex: 1 !important;
margin-top: 56px !important;
margin-bottom: 0 !important; /* Remove margin, use padding instead */
padding: 16px !important;
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; /* 72px nav + 16px space */
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
min-height: calc(100vh - 56px) !important;
min-height: calc(100dvh - 56px) !important;
}
/* Wizard form needs bottom padding for Continue button visibility */
.wizard-form {
padding-bottom: 24px !important;
}
/* Wizard screen inner content */
.wizard-screen__inner {
padding-bottom: 24px !important;
}
/* Distribution page mobile - fix button alignment */
#screen-distribution .wizard-actions--sticky,
#screen-distribution-perpetual .wizard-actions--sticky,
#screen-distribution-emission .wizard-actions--sticky,
#screen-distribution-preprogrammed .wizard-actions--sticky {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
flex-direction: column-reverse !important;
gap: var(--space-3) !important;
padding: var(--space-4) 0 !important;
background: transparent !important;
border-top: none !important;
box-shadow: none !important;
}
#screen-distribution .wizard-actions--sticky .wizard-button,
#screen-distribution-perpetual .wizard-actions--sticky .wizard-button,
#screen-distribution-emission .wizard-actions--sticky .wizard-button,
#screen-distribution-preprogrammed .wizard-actions--sticky .wizard-button {
width: 100% !important;
}
/* All wizard-actions on mobile should be stacked and full-width */
.wizard-actions--sticky {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
flex-direction: column-reverse !important;
gap: var(--space-3) !important;
padding: var(--space-4) 0 !important;
margin-top: var(--space-4) !important;
background: transparent !important;
border-top: 1px solid var(--color-border) !important;
box-shadow: none !important;
}
.wizard-actions--sticky .wizard-button {
width: 100% !important;
}
/* Export page - Contract Preview buttons should wrap on mobile */
#screen-export .wizard-inline,
#screen-registration .wizard-inline {
flex-wrap: wrap !important;
gap: var(--space-2) !important;
}
#screen-export .wizard-inline .wizard-button,
#screen-registration .wizard-inline .wizard-button {
flex: 1 1 auto !important;
min-width: 120px !important;
}
/* ─────────────────────────────────────────────────────────────────────
MOBILE BOTTOM TAB BAR
Fixed navigation at bottom of screen
───────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 72px !important;
height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
/* Glassmorphism effect */
background: rgba(26, 26, 46, 0.75) !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
display: flex !important;
align-items: center !important;
justify-content: space-around !important;
z-index: 1000 !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25) !important;
}
.mobile-bottom-nav__item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 8px 12px !important;
min-width: 64px !important;
min-height: 48px !important;
background: transparent !important;
border: none !important;
border-radius: 12px !important;
color: var(--color-text-secondary, rgba(255, 255, 255, 0.6)) !important;
font-size: 11px !important;
font-weight: 500 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus {
background: rgba(255, 255, 255, 0.05) !important;
}
.mobile-bottom-nav__item--active {
color: var(--color-primary, #0E76FD) !important;
background: rgba(14, 118, 253, 0.1) !important;
}
.mobile-bottom-nav__item svg {
width: 24px !important;
height: 24px !important;
}
/* Hub button - special styling as center home button */
.mobile-bottom-nav__item--hub {
background: rgba(14, 118, 253, 0.15) !important;
border-radius: 16px !important;
color: var(--color-primary, #0E76FD) !important;
}
.mobile-bottom-nav__item--hub:hover,
.mobile-bottom-nav__item--hub:focus {
background: rgba(14, 118, 253, 0.25) !important;
}
/* Light mode bottom nav - glassmorphism */
html[data-theme='light'] .mobile-bottom-nav {
background: rgba(255, 255, 255, 0.72) !important;
border-top-color: rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme='light'] .mobile-bottom-nav__item {
color: rgba(29, 29, 31, 0.6) !important;
}
html[data-theme='light'] .mobile-bottom-nav__item:hover,
html[data-theme='light'] .mobile-bottom-nav__item:focus {
background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme='light'] .mobile-bottom-nav__item--active {
color: var(--color-primary, #0E76FD) !important;
background: rgba(14, 118, 253, 0.1) !important;
}
/* ─────────────────────────────────────────────────────────────────────
PAGE VIEWS - Full width mobile layout
───────────────────────────────────────────────────────────────────── */
.page-view {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Templates page mobile - ensure content doesn't get hidden behind bottom nav */
.templates-page {
padding: 16px !important;
padding-top: 0 !important;
padding-bottom: 24px !important; /* Just regular bottom padding since container handles nav space */
min-height: auto !important; /* Allow natural height */
}
/* Fix fullpage screens on mobile - they use position: absolute which cuts off bottom nav */
#screen-templates-page.wizard-screen--active,
#screen-groups-page.wizard-screen--active,
#screen-documents-page.wizard-screen--active {
position: fixed !important;
top: var(--header-height) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
min-height: unset !important; /* Remove min-height to let bottom work */
height: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-y: contain !important;
}
.templates-hero {
padding: 16px 0 !important;
margin-bottom: 16px !important;
}
.templates-hero__badge {
font-size: 12px !important;
padding: 6px 12px !important;
margin-bottom: 12px !important;
}
.templates-hero__title {
font-size: 1.5rem !important;
margin-bottom: 8px !important;
}
.templates-hero__subtitle {
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
.templates-content {
gap: 16px !important;
}
.tpl-section {
margin-bottom: 24px !important;
}
.tpl-section__header {
margin-bottom: 12px !important;
}
.tpl-section__title {
font-size: 1rem !important;
}
.tpl-section__subtitle {
font-size: 0.8125rem !important;
}
.tpl-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.tpl-card {
padding: 16px !important;
min-height: auto !important;
}
.tpl-card--scratch {
padding: 20px !important;
}
.tpl-card__icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 12px !important;
}
.tpl-card__title {
font-size: 1rem !important;
margin-bottom: 6px !important;
}
.tpl-card__desc {
font-size: 0.8125rem !important;
line-height: 1.4 !important;
}
.tpl-card__features {
margin-top: 12px !important;
gap: 6px !important;
}
.tpl-card__feature {
font-size: 0.75rem !important;
padding: 4px 8px !important;
}
/* Groups page mobile - ensure content doesn't get hidden behind bottom nav */
.groups-page {
padding: 16px !important;
padding-top: 0 !important;
padding-bottom: 24px !important; /* Just regular bottom padding since container handles nav space */
min-height: auto !important; /* Allow natural height */
}
.groups-hero {
padding: 16px 0 !important;
margin-bottom: 16px !important;
}
.groups-hero__badge {
font-size: 12px !important;
padding: 6px 12px !important;
margin-bottom: 12px !important;
}
.groups-hero__title {
font-size: 1.5rem !important;
margin-bottom: 8px !important;
}
.groups-hero__subtitle {
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
.groups-content {
gap: 16px !important;
}
.groups-list {
gap: 12px !important;
}
.group-card {
padding: 16px !important;
}
.group-card__header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.group-card__name {
font-size: 1rem !important;
}
.group-card__members {
font-size: 0.8125rem !important;
}
.group-card__actions {
width: 100% !important;
justify-content: flex-end !important;
}
/* Documents page mobile - ensure content doesn't get hidden behind bottom nav */
.documents-page {
padding: 16px !important;
padding-top: 0 !important;
padding-bottom: 24px !important; /* Just regular bottom padding since container handles nav space */
min-height: auto !important; /* Allow natural height */
}
.documents-hero {
padding: 16px 0 !important;
margin-bottom: 16px !important;
}
.documents-hero__badge {
font-size: 12px !important;
padding: 6px 12px !important;
margin-bottom: 12px !important;
}
.documents-hero__title {
font-size: 1.5rem !important;
margin-bottom: 8px !important;
}
.documents-hero__subtitle {
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
.documents-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.document-card {
padding: 16px !important;
}
.document-card__name {
font-size: 1rem !important;
}
.document-card__date {
font-size: 0.75rem !important;
}
/* Tokens/Wizard page mobile */
.wizard-screen {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.wizard-screen__inner {
padding: 16px !important;
padding-bottom: 24px !important;
border-radius: 12px !important;
margin: 0 !important;
}
/* Form cards */
.form-card {
padding: 16px !important;
border-radius: 12px !important;
}
.form-card__header {
padding: 12px 16px !important;
}
.form-card__title {
font-size: 1rem !important;
}
.form-card__body {
padding: 16px !important;
}
/* Buttons */
.wizard-button {
min-height: 48px !important;
font-size: 1rem !important;
padding: 12px 20px !important;
}
.wizard-actions {
flex-direction: column !important;
gap: 12px !important;
}
.wizard-actions .wizard-button {
width: 100% !important;
}
/* ─────────────────────────────────────────────────────────────────────
Hide elements not needed on mobile
───────────────────────────────────────────────────────────────────── */
/* Hide guide panel on mobile */
.wizard-guide,
.guide-toggle-container,
.guide-panel {
display: none !important;
}
/* Hide wizard progress on mobile - use bottom nav instead */
.wizard-progress,
.wizard-progress-compact {
display: none !important;
}
/* Hide desktop nav in header - keep only essentials */
.global-header__nav {
display: none !important;
}
/* Hide hamburger menu button on mobile - we use bottom nav instead */
.mobile-menu-btn {
display: none !important;
}
/* Light mode header styles - glassmorphism */
html[data-theme='light'] .global-header {
background: var(--header-bg-gradient) !important;
border-bottom-color: var(--header-border) !important;
}
html[data-theme='light'] .mobile-menu-btn {
color: var(--color-text, #1d1d1f) !important;
}
/* Hide bottom nav on landing and hub pages */
body.landing-visible .mobile-bottom-nav,
body.hub-visible .mobile-bottom-nav {
display: none !important;
}
/* Hide global header on landing and hub pages - they have their own headers */
body.landing-visible .global-header,
body.hub-visible .global-header {
display: none !important;
}
/* Hide the mobile-nav-drawer on mobile - use bottom tab bar instead */
.mobile-nav-drawer,
.mobile-nav-drawer.is-open,
.mobile-nav-drawer__panel,
.mobile-nav-drawer__backdrop {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Hide the old navigation links that show in wizard shell footer */
.wizard-sidebar__footer,
.mobile-menu-overlay {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
EXTRA SMALL MOBILE (max-width: 480px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.global-header {
padding: 0 8px !important;
gap: 4px !important;
}
.global-header__title {
font-size: 0.8125rem !important;
}
.global-header__logo {
width: 28px !important;
height: 28px !important;
}
/* Steps button - more compact */
.global-header__steps-btn {
padding: 6px 10px !important;
font-size: 12px !important;
gap: 4px !important;
}
.global-header__steps-btn svg {
width: 16px !important;
height: 16px !important;
}
/* Theme toggle - smaller */
.global-header__theme-toggle {
padding: 1px !important;
}
.global-header__theme-btn {
width: 28px !important;
height: 28px !important;
padding: 4px !important;
}
.global-header__theme-btn svg {
width: 14px !important;
height: 14px !important;
}
/* Reset button - smaller */
.global-header__reset {
width: 28px !important;
height: 28px !important;
padding: 4px !important;
}
.global-header__reset svg {
width: 14px !important;
height: 14px !important;
}
/* Register button - smaller */
.global-header__register {
width: 32px !important;
height: 32px !important;
padding: 6px !important;
}
.global-header__register svg {
width: 16px !important;
height: 16px !important;
}
.mobile-bottom-nav__item {
min-width: 56px !important;
padding: 8px 8px !important;
font-size: 10px !important;
}
.mobile-bottom-nav__item svg {
width: 22px !important;
height: 22px !important;
}
.templates-hero__title,
.groups-hero__title,
.documents-hero__title {
font-size: 1.25rem !important;
}
.tpl-card,
.group-card,
.document-card {
padding: 14px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
VERY SMALL MOBILE (max-width: 375px) - iPhone SE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
.global-header {
padding: 0 6px !important;
gap: 2px !important;
}
.global-header__title {
font-size: 0.75rem !important;
}
.global-header__logo {
width: 24px !important;
height: 24px !important;
}
/* Steps button - hide text, icon only */
.global-header__steps-btn {
padding: 6px 8px !important;
}
.global-header__steps-label {
display: none !important;
}
/* Theme toggle - even smaller */
.global-header__theme-btn {
width: 26px !important;
height: 26px !important;
}
/* Reset button - hide on very small screens */
.global-header__reset {
display: none !important;
}
/* Register button */
.global-header__register {
width: 30px !important;
height: 30px !important;
}
}