Spaces:
Running on Zero
Running on Zero
| /* ========================================================================== | |
| Design System: Neubrutalism (DESIGN.md) | |
| Style: Bold, Colorful, Raw, Playful, High-Contrast | |
| Rules: Hard borders (2-3px), Hard offset drop shadows (45°), No gradients, | |
| No glassmorphism, No blurs, Anti-Slop craftsmanship | |
| Mobile: Continuous fluid reflow, 44px+ tap targets, no horizontal overflow | |
| ========================================================================== */ | |
| /* Light Theme (Default Neubrutalism) */ | |
| :root, | |
| [data-theme="light"] { | |
| /* Surfaces & Canvas */ | |
| --bg-app: #FFFDF0; /* Warm paper canvas */ | |
| --bg-card: #FFFFFF; /* Solid crisp card */ | |
| --bg-surface: #F4F4F5; /* Inset surface */ | |
| --bg-surface-hover: #E4E4E7; | |
| --bg-input: #FFFFFF; | |
| /* Neubrutalist Core Colors (DESIGN.md) */ | |
| --color-primary: #FFEB3B; /* Bold vibrant yellow */ | |
| --color-primary-hover: #FDD835; | |
| --color-secondary: #FF5252; /* Punchy red/coral */ | |
| --color-secondary-hover: #EF4444; | |
| --color-tertiary: #2196F3; /* Electric blue */ | |
| --color-tertiary-hover: #1976D2; | |
| --color-success: #00E676; /* Neubrutalist green */ | |
| --color-warning: #FFB300; /* Neubrutalist amber */ | |
| --color-neutral: #121212; /* Off-black / charcoal */ | |
| /* Borders & Shadows */ | |
| --border-color: #121212; | |
| --border-subtle: #121212; | |
| --border-active: #121212; | |
| --border-focus: #121212; | |
| --shadow-color: #121212; | |
| --shadow-sm: 2px 2px 0 var(--shadow-color); | |
| --shadow-base: 4px 4px 0 var(--shadow-color); | |
| --shadow-card: 6px 6px 0 var(--shadow-color); | |
| --shadow-hover: 6px 6px 0 var(--shadow-color); | |
| --shadow-active: 1px 1px 0 var(--shadow-color); | |
| /* Typography */ | |
| --text-main: #121212; | |
| --text-sub: #27272A; | |
| --text-muted: #52525B; | |
| --text-inverse: #FFFFFF; | |
| /* Badges & Callouts */ | |
| --callout-bg: #FEF08A; | |
| --callout-border: #121212; | |
| --callout-text: #121212; | |
| /* Status Colors */ | |
| --status-online: #00E676; | |
| --status-checking: #FFEB3B; | |
| --status-waking: #2196F3; | |
| --status-offline: #FF5252; | |
| } | |
| /* Dark Theme (Electric Neubrutalism) */ | |
| [data-theme="dark"] { | |
| /* Surfaces & Canvas */ | |
| --bg-app: #18181B; /* Deep off-black / zinc-900 */ | |
| --bg-card: #27272A; /* Charcoal card / zinc-800 */ | |
| --bg-surface: #1E1E24; /* Inset surface */ | |
| --bg-surface-hover: #3F3F46; | |
| --bg-input: #18181B; | |
| /* Neubrutalist Core Colors */ | |
| --color-primary: #FFEB3B; /* High-contrast yellow punch */ | |
| --color-primary-hover: #FFF176; | |
| --color-secondary: #FF5252; /* Coral red */ | |
| --color-secondary-hover: #F87171; | |
| --color-tertiary: #60A5FA; /* Electric sky blue */ | |
| --color-tertiary-hover: #93C5FD; | |
| --color-success: #4ADE80; | |
| --color-warning: #FBBF24; | |
| --color-neutral: #FFFFFF; | |
| /* Borders & Shadows */ | |
| --border-color: #FAFAFA; | |
| --border-subtle: #FAFAFA; | |
| --border-active: #FAFAFA; | |
| --border-focus: #FFEB3B; | |
| --shadow-color: #000000; | |
| --shadow-sm: 2px 2px 0 var(--shadow-color); | |
| --shadow-base: 4px 4px 0 var(--shadow-color); | |
| --shadow-card: 6px 6px 0 var(--shadow-color); | |
| --shadow-hover: 6px 6px 0 var(--color-primary); | |
| --shadow-active: 1px 1px 0 var(--shadow-color); | |
| /* Typography */ | |
| --text-main: #FAFAFA; | |
| --text-sub: #E4E4E7; | |
| --text-muted: #A1A1AA; | |
| --text-inverse: #18181B; | |
| /* Badges & Callouts */ | |
| --callout-bg: #27272A; | |
| --callout-border: #FFEB3B; | |
| --callout-text: #FAFAFA; | |
| /* Status Colors */ | |
| --status-online: #4ADE80; | |
| --status-checking: #FFEB3B; | |
| --status-waking: #60A5FA; | |
| --status-offline: #FF5252; | |
| } | |
| /* Shared Design Tokens */ | |
| :root { | |
| --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, Monaco, monospace; | |
| --radius-xs: 4px; | |
| --radius-sm: 6px; | |
| --radius-md: 8px; | |
| --radius-lg: 8px; | |
| --radius-circle: 50%; | |
| --transition-fast: 0.15s ease-out; | |
| } | |
| /* ========================================================================== | |
| Base & Reset | |
| ========================================================================== */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| min-height: 100dvh; | |
| overflow-x: hidden; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| min-height: 100dvh; | |
| overflow-x: hidden; | |
| font-family: var(--font-family); | |
| background-color: var(--bg-app); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| button, input, select, textarea { | |
| font-family: inherit; | |
| touch-action: manipulation; | |
| } | |
| :focus-visible { | |
| outline: 3px solid var(--border-color); | |
| outline-offset: 2px; | |
| } | |
| /* ========================================================================== | |
| Layout Structure | |
| ========================================================================== */ | |
| .app-layout { | |
| min-height: 100dvh; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| width: 100%; | |
| overflow-x: hidden; | |
| } | |
| /* Top Sticky Navigation */ | |
| .top-nav { | |
| min-height: 60px; | |
| border-bottom: 3px solid var(--border-color); | |
| background-color: var(--bg-card); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| padding-top: env(safe-area-inset-top, 0); | |
| } | |
| .nav-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| min-height: 60px; | |
| padding: 8px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .brand-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--text-main); | |
| padding: 4px 6px; | |
| border-radius: var(--radius-sm); | |
| transition: transform var(--transition-fast); | |
| min-height: 44px; | |
| } | |
| .brand-badge:hover { | |
| transform: translate(-1px, -1px); | |
| } | |
| .brand-avatar { | |
| border-radius: var(--radius-xs); | |
| display: block; | |
| border: 2px solid var(--border-color); | |
| box-shadow: 2px 2px 0 var(--shadow-color); | |
| flex-shrink: 0; | |
| } | |
| .brand-name { | |
| font-weight: 800; | |
| font-size: 0.98rem; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| /* Status Indicator Pill */ | |
| .status-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-main); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| min-height: 44px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| .status-indicator:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: var(--shadow-base); | |
| background-color: var(--bg-surface-hover); | |
| } | |
| .status-indicator:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| .status-indicator-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: var(--text-muted); | |
| border: 1.5px solid var(--border-color); | |
| flex-shrink: 0; | |
| } | |
| .status-online .status-indicator-dot { | |
| background-color: var(--status-online); | |
| } | |
| .status-checking .status-indicator-dot { | |
| background-color: var(--status-checking); | |
| } | |
| .status-waking .status-indicator-dot { | |
| background-color: var(--status-waking); | |
| } | |
| .status-offline .status-indicator-dot { | |
| background-color: var(--status-offline); | |
| } | |
| /* Icon Buttons */ | |
| .btn-icon { | |
| background: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-main); | |
| width: 44px; | |
| height: 44px; | |
| min-width: 44px; | |
| min-height: 44px; | |
| border-radius: var(--radius-sm); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); | |
| flex-shrink: 0; | |
| } | |
| .btn-icon:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: var(--shadow-base); | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| } | |
| .btn-icon:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| /* ========================================================================== | |
| Main Content Container & Desktop Workspace Grid | |
| ========================================================================== */ | |
| .main-content { | |
| flex: 1; | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 36px auto 56px; | |
| padding: 0 24px; | |
| } | |
| /* 2-Column Desktop Grid */ | |
| .desktop-workspace-grid { | |
| display: grid; | |
| grid-template-columns: 440px 1fr; | |
| gap: 36px; | |
| align-items: start; | |
| margin-bottom: 40px; | |
| } | |
| /* Sidebar Column */ | |
| .workspace-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| position: sticky; | |
| top: 84px; | |
| } | |
| /* Sidebar Cards (Neubrutalist Block) */ | |
| .sidebar-card { | |
| background-color: var(--bg-card); | |
| border: 3px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 24px 22px; | |
| box-shadow: var(--shadow-card); | |
| position: relative; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .sidebar-card:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 8px 8px 0 var(--shadow-color); | |
| } | |
| /* Tag Pill */ | |
| .tag-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| border: 2px solid var(--border-color); | |
| padding: 4px 10px; | |
| border-radius: var(--radius-xs); | |
| font-size: 0.74rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| margin-bottom: 14px; | |
| box-shadow: 2px 2px 0 var(--shadow-color); | |
| } | |
| .tag-dot { | |
| width: 7px; | |
| height: 7px; | |
| background-color: #121212; | |
| border-radius: var(--radius-circle); | |
| } | |
| .hero-card .page-title { | |
| text-align: left; | |
| font-size: 1.85rem; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| line-height: 1.25; | |
| margin-bottom: 12px; | |
| color: var(--text-main); | |
| } | |
| .hero-card .page-desc { | |
| text-align: left; | |
| font-size: 0.92rem; | |
| color: var(--text-sub); | |
| line-height: 1.6; | |
| } | |
| /* Aspect Ratio Guide Card */ | |
| .sidebar-card-title { | |
| font-size: 1.05rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| letter-spacing: -0.02em; | |
| } | |
| .ratio-comparison-grid { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-around; | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 18px 14px; | |
| margin-bottom: 14px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .ratio-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ratio-badge { | |
| font-size: 0.68rem; | |
| font-weight: 800; | |
| padding: 3px 8px; | |
| border-radius: var(--radius-xs); | |
| border: 1.5px solid var(--border-color); | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .danger-badge { | |
| background-color: #FEE2E2; | |
| color: #991B1B; | |
| } | |
| [data-theme="dark"] .danger-badge { | |
| background-color: #7F1D1D; | |
| color: #FEE2E2; | |
| } | |
| .success-badge { | |
| background-color: #DCFCE7; | |
| color: #166534; | |
| } | |
| [data-theme="dark"] .success-badge { | |
| background-color: #14532D; | |
| color: #DCFCE7; | |
| } | |
| .ratio-box { | |
| border: 2.5px solid var(--border-color); | |
| background-color: var(--bg-card); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| box-shadow: 2px 2px 0 var(--shadow-color); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .square-box { | |
| width: 96px; | |
| height: 96px; | |
| border-radius: var(--radius-xs); | |
| } | |
| .vertical-box { | |
| width: 82px; | |
| height: 140px; | |
| border-radius: var(--radius-xs); | |
| } | |
| .ratio-demo-img { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } | |
| .cropped-img { | |
| object-fit: cover; | |
| object-position: center 60%; | |
| } | |
| .full-img { | |
| object-fit: cover; | |
| object-position: center center; | |
| } | |
| .ratio-tag-overlay { | |
| position: absolute; | |
| bottom: 4px; | |
| right: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 800; | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| border: 1px solid var(--border-color); | |
| letter-spacing: 0.02em; | |
| box-shadow: 1px 1px 0 var(--shadow-color); | |
| z-index: 2; | |
| } | |
| .tag-cropped { | |
| background-color: #FEE2E2; | |
| color: #991B1B; | |
| } | |
| [data-theme="dark"] .tag-cropped { | |
| background-color: #7F1D1D; | |
| color: #FEE2E2; | |
| } | |
| .tag-full { | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| } | |
| .ratio-divider { | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .ratio-caption { | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| color: var(--text-sub); | |
| } | |
| .ratio-guide-note { | |
| font-size: 0.82rem; | |
| color: var(--text-sub); | |
| line-height: 1.5; | |
| } | |
| /* Security Checklist */ | |
| .security-checklist { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .security-check-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| font-size: 0.84rem; | |
| line-height: 1.45; | |
| color: var(--text-sub); | |
| } | |
| .security-check-item .check-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--status-online); | |
| color: #121212; | |
| border: 1.5px solid var(--border-color); | |
| border-radius: var(--radius-xs); | |
| font-size: 0.72rem; | |
| font-weight: 900; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| box-shadow: 1px 1px 0 var(--shadow-color); | |
| } | |
| .security-check-item strong { | |
| color: var(--text-main); | |
| font-weight: 700; | |
| } | |
| /* Secondary Feature Cards */ | |
| .desktop-feature-cards { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 28px; | |
| margin-top: 10px; | |
| } | |
| .feature-card { | |
| background-color: var(--bg-card); | |
| border: 3px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 26px 24px; | |
| box-shadow: var(--shadow-card); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .feature-card:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 8px 8px 0 var(--shadow-color); | |
| } | |
| .feature-card-header { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 12px; | |
| } | |
| .feature-step-tag { | |
| align-self: flex-start; | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| background-color: var(--color-primary); | |
| border: 1.5px solid var(--border-color); | |
| color: #121212; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-xs); | |
| box-shadow: 1px 1px 0 var(--shadow-color); | |
| } | |
| .feature-title { | |
| font-size: 1.25rem; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| } | |
| .feature-desc { | |
| font-size: 0.88rem; | |
| color: var(--text-sub); | |
| line-height: 1.6; | |
| } | |
| /* Neubrutalist Card Panel */ | |
| .card-panel { | |
| background-color: var(--bg-card); | |
| border: 3px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 32px 28px; | |
| box-shadow: var(--shadow-card); | |
| position: relative; | |
| width: 100%; | |
| } | |
| /* Desktop vs Mobile Toggle */ | |
| .mobile-only-intro { | |
| display: none ; | |
| } | |
| .mobile-only-note { | |
| display: none ; | |
| } | |
| .header-intro { | |
| text-align: center; | |
| margin-bottom: 24px; | |
| } | |
| .page-title { | |
| font-size: clamp(1.45rem, 4.5vw, 2.1rem); | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| color: var(--text-main); | |
| margin-bottom: 10px; | |
| line-height: 1.25; | |
| } | |
| .page-desc { | |
| font-size: clamp(0.88rem, 2.5vw, 0.95rem); | |
| color: var(--text-sub); | |
| max-width: 580px; | |
| margin: 0 auto; | |
| line-height: 1.55; | |
| font-weight: 400; | |
| } | |
| /* Informative Callout (Neubrutalist Sticker Note) */ | |
| .info-note { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 14px; | |
| background-color: var(--callout-bg); | |
| border: 2px solid var(--callout-border); | |
| border-radius: var(--radius-md); | |
| padding: 14px 18px; | |
| margin-bottom: 28px; | |
| color: var(--callout-text); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .info-note-icon { | |
| color: var(--callout-text); | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .info-note-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .info-note-text { | |
| font-size: 0.85rem; | |
| line-height: 1.5; | |
| color: var(--callout-text); | |
| } | |
| .info-note-text strong { | |
| color: var(--callout-text); | |
| font-weight: 700; | |
| } | |
| /* ========================================================================== | |
| Progress Flow Indicator | |
| ========================================================================== */ | |
| .flow-steps { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 30px; | |
| gap: 8px; | |
| width: 100%; | |
| } | |
| .flow-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| flex-shrink: 0; | |
| } | |
| .flow-step.active { | |
| color: var(--text-main); | |
| } | |
| .step-num { | |
| width: 28px; | |
| height: 28px; | |
| min-width: 28px; | |
| border-radius: var(--radius-xs); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-main); | |
| box-shadow: 1px 1px 0 var(--shadow-color); | |
| transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); | |
| flex-shrink: 0; | |
| } | |
| .flow-step.active .step-num { | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| border-color: var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| transform: translate(-1px, -1px); | |
| } | |
| .flow-divider { | |
| flex: 1; | |
| max-width: 36px; | |
| min-width: 10px; | |
| height: 3px; | |
| background-color: var(--border-color); | |
| opacity: 0.3; | |
| } | |
| .flow-divider.active { | |
| opacity: 1; | |
| background-color: var(--border-color); | |
| } | |
| /* ========================================================================== | |
| File Uploader & Dropzone | |
| ========================================================================== */ | |
| .file-uploader { | |
| border: 3px dashed var(--border-color); | |
| background-color: var(--bg-surface); | |
| border-radius: var(--radius-md); | |
| padding: clamp(24px, 5vw, 36px) clamp(16px, 4vw, 24px); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-style var(--transition-fast); | |
| margin-bottom: 28px; | |
| outline: none; | |
| width: 100%; | |
| } | |
| .file-uploader:hover, | |
| .file-uploader:focus-visible, | |
| .file-uploader.drag-over { | |
| border-style: solid; | |
| background-color: #FEF9C3; | |
| transform: translate(-2px, -2px); | |
| box-shadow: var(--shadow-base); | |
| } | |
| [data-theme="dark"] .file-uploader:hover, | |
| [data-theme="dark"] .file-uploader:focus-visible, | |
| [data-theme="dark"] .file-uploader.drag-over { | |
| background-color: #3F3F46; | |
| } | |
| .upload-icon-container { | |
| width: 52px; | |
| height: 52px; | |
| margin: 0 auto 14px; | |
| background-color: var(--color-primary); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #121212; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .upload-lead { | |
| font-size: 1.08rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| margin-bottom: 8px; | |
| letter-spacing: -0.01em; | |
| } | |
| .upload-sub { | |
| font-size: 0.85rem; | |
| color: var(--text-sub); | |
| max-width: 480px; | |
| margin: 0 auto; | |
| line-height: 1.5; | |
| } | |
| /* ========================================================================== | |
| Dual Preview Component | |
| ========================================================================== */ | |
| .upload-preview { | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .dual-preview-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| width: 100%; | |
| } | |
| .preview-box { | |
| background-color: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .preview-label { | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .preview-frame-rect { | |
| width: 140px; | |
| height: 186px; | |
| border-radius: var(--radius-xs); | |
| overflow: hidden; | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .preview-frame-rect img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .preview-avatar-wrap { | |
| margin: 14px 0 10px; | |
| } | |
| .preview-avatar-circle { | |
| width: 130px; | |
| height: 130px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| border: 3px solid var(--border-color); | |
| background-color: var(--bg-surface); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .preview-avatar-circle img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .preview-hint { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| font-weight: 500; | |
| } | |
| .preview-actions-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| background-color: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| box-shadow: var(--shadow-sm); | |
| gap: 12px; | |
| } | |
| .file-summary { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .file-title { | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .file-res { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .btn-subtle { | |
| background: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-main); | |
| padding: 8px 16px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| min-height: 44px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .btn-subtle:hover { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| } | |
| .btn-subtle:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| /* ========================================================================== | |
| Method Switcher & Form Inputs | |
| ========================================================================== */ | |
| .method-box { | |
| margin-bottom: 28px; | |
| width: 100%; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.86rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .segmented-control { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| background-color: var(--bg-surface); | |
| padding: 6px; | |
| border-radius: var(--radius-md); | |
| border: 2px solid var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| gap: 6px; | |
| width: 100%; | |
| } | |
| .segment-btn { | |
| background: transparent; | |
| border: 2px solid transparent; | |
| color: var(--text-sub); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.84rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| min-height: 44px; | |
| transition: all var(--transition-fast); | |
| text-align: center; | |
| } | |
| .segment-btn:hover { | |
| color: var(--text-main); | |
| } | |
| .segment-btn.active { | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| border-color: var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| transform: translate(-1px, -1px); | |
| } | |
| .phone-box { | |
| margin-top: 16px; | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 18px; | |
| box-shadow: var(--shadow-sm); | |
| width: 100%; | |
| } | |
| .sub-label { | |
| display: block; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 8px; | |
| } | |
| .input-phone-wrapper { | |
| display: flex; | |
| align-items: center; | |
| background-color: var(--bg-input); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 0 14px; | |
| min-height: 48px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| width: 100%; | |
| } | |
| .input-phone-wrapper:focus-within { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| } | |
| .phone-sign { | |
| color: var(--text-main); | |
| font-weight: 800; | |
| font-size: 1.15rem; | |
| margin-right: 8px; | |
| flex-shrink: 0; | |
| } | |
| .input-phone-wrapper input { | |
| flex: 1; | |
| min-width: 0; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: var(--text-main); | |
| padding: 12px 0; | |
| font-size: 1rem; /* 16px prevents iOS Safari auto-zoom */ | |
| font-family: var(--font-mono); | |
| font-weight: 600; | |
| } | |
| .field-guide { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| margin-top: 8px; | |
| line-height: 1.4; | |
| } | |
| .field-guide strong { | |
| color: var(--text-main); | |
| } | |
| /* ========================================================================== | |
| Cloudflare Turnstile Anti-Bot Verification | |
| ========================================================================== */ | |
| .turnstile-container, | |
| .turnstile-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 18px 0 14px; | |
| padding: 14px 16px; | |
| background-color: var(--bg-canvas); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| box-shadow: 2px 2px 0 var(--shadow-color); | |
| width: 100%; | |
| transition: border-color var(--speed-normal), box-shadow var(--speed-normal); | |
| } | |
| .turnstile-container:hover, | |
| .turnstile-wrapper:hover { | |
| border-color: var(--color-primary); | |
| } | |
| .turnstile-slot, | |
| .turnstile-widget { | |
| min-height: 65px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| } | |
| .turnstile-note, | |
| .turnstile-feedback { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| margin-top: 8px; | |
| text-align: center; | |
| color: var(--text-sub); | |
| line-height: 1.4; | |
| } | |
| .turnstile-note.success, | |
| .turnstile-feedback.success { | |
| color: var(--color-success); | |
| } | |
| .turnstile-note.error, | |
| .turnstile-feedback.error { | |
| color: var(--color-secondary); | |
| } | |
| /* ========================================================================== | |
| Action Buttons (Neubrutalism Primary CTA) | |
| ========================================================================== */ | |
| .submit-container { | |
| margin-top: 28px; | |
| width: 100%; | |
| } | |
| .btn-action { | |
| width: 100%; | |
| background-color: var(--color-primary); | |
| color: #121212; | |
| border: 3px solid var(--border-color); | |
| padding: 14px 20px; | |
| border-radius: var(--radius-md); | |
| font-size: 1rem; | |
| font-weight: 800; | |
| letter-spacing: 0.01em; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| min-height: 52px; | |
| box-shadow: var(--shadow-base); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| .btn-action:hover:not(:disabled) { | |
| background-color: var(--color-primary-hover); | |
| transform: translate(-2px, -2px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .btn-action:active:not(:disabled) { | |
| transform: translate(2px, 2px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| .btn-action:disabled { | |
| background-color: var(--bg-surface); | |
| color: var(--text-muted); | |
| border-color: var(--text-muted); | |
| box-shadow: none; | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| } | |
| .btn-compact { | |
| width: auto; | |
| padding: 10px 20px; | |
| font-size: 0.88rem; | |
| min-height: 44px; | |
| } | |
| /* ========================================================================== | |
| Verification & QR View | |
| ========================================================================== */ | |
| .verify-layout { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .qr-panel, .pairing-panel { | |
| margin-bottom: 24px; | |
| width: 100%; | |
| } | |
| .qr-canvas-holder { | |
| width: min(260px, 75vw); | |
| height: min(260px, 75vw); | |
| margin: 0 auto 24px; | |
| background-color: #FFFFFF; | |
| border-radius: var(--radius-md); | |
| border: 3px solid var(--border-color); | |
| box-shadow: var(--shadow-card); | |
| padding: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| max-width: 100%; | |
| } | |
| .qr-visual { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| image-rendering: pixelated; | |
| } | |
| .loader-box { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .circular-spin { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid var(--bg-surface); | |
| border-top-color: var(--color-primary); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .loader-text { | |
| font-size: 0.85rem; | |
| color: #121212; | |
| font-weight: 700; | |
| } | |
| .pairing-header { | |
| font-size: 0.95rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| margin-bottom: 14px; | |
| text-transform: uppercase; | |
| } | |
| .pairing-code-card { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 16px; | |
| background-color: var(--color-primary); | |
| border: 3px solid var(--border-color); | |
| box-shadow: var(--shadow-card); | |
| padding: 14px 22px; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 24px; | |
| max-width: 100%; | |
| } | |
| .pairing-code-val { | |
| font-family: var(--font-mono); | |
| font-size: clamp(1.4rem, 6vw, 2rem); | |
| font-weight: 800; | |
| letter-spacing: 0.15em; | |
| color: #121212; | |
| white-space: nowrap; | |
| } | |
| .btn-copy { | |
| background: #FFFFFF; | |
| border: 2px solid var(--border-color); | |
| color: #121212; | |
| padding: 8px 14px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| cursor: pointer; | |
| min-height: 44px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| white-space: nowrap; | |
| } | |
| .btn-copy:hover { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| } | |
| .btn-copy:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| .instruction-box { | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 18px 22px; | |
| text-align: left; | |
| max-width: 520px; | |
| margin: 0 auto 24px; | |
| box-shadow: var(--shadow-sm); | |
| width: 100%; | |
| } | |
| .guide-lead { | |
| font-size: 0.88rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .guide-steps { | |
| font-size: 0.85rem; | |
| color: var(--text-sub); | |
| padding-left: 20px; | |
| line-height: 1.65; | |
| } | |
| .guide-steps strong { | |
| color: var(--text-main); | |
| font-weight: 700; | |
| } | |
| .live-status-block { | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 12px 18px; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| box-shadow: var(--shadow-sm); | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .pulse-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| } | |
| .live-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: var(--color-tertiary); | |
| border: 1.5px solid var(--border-color); | |
| flex-shrink: 0; | |
| } | |
| .live-heading { | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .live-info { | |
| font-size: 0.86rem; | |
| color: var(--text-main); | |
| font-weight: 600; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .cancel-wrap { | |
| margin-top: 12px; | |
| width: 100%; | |
| } | |
| .btn-cancel { | |
| background: var(--color-secondary); | |
| border: 2px solid var(--border-color); | |
| color: #FFFFFF; | |
| padding: 10px 20px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.85rem; | |
| font-weight: 800; | |
| cursor: pointer; | |
| min-height: 44px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| .btn-cancel:hover { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| background-color: var(--color-secondary-hover); | |
| } | |
| .btn-cancel:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| /* ========================================================================== | |
| Success View | |
| ========================================================================== */ | |
| .done-panel { | |
| text-align: center; | |
| padding: 12px 0; | |
| width: 100%; | |
| } | |
| .done-icon-circle { | |
| width: 72px; | |
| height: 72px; | |
| border-radius: 50%; | |
| background-color: var(--color-success); | |
| border: 3px solid var(--border-color); | |
| box-shadow: var(--shadow-base); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 20px; | |
| color: #121212; | |
| } | |
| .done-title { | |
| font-size: clamp(1.25rem, 4vw, 1.5rem); | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| margin-bottom: 8px; | |
| } | |
| .done-subtitle { | |
| font-size: 0.95rem; | |
| color: var(--text-sub); | |
| max-width: 520px; | |
| margin: 0 auto 24px; | |
| line-height: 1.55; | |
| } | |
| .security-card { | |
| background-color: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 18px 20px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 14px; | |
| text-align: left; | |
| max-width: 540px; | |
| margin: 0 auto 28px; | |
| box-shadow: var(--shadow-sm); | |
| width: 100%; | |
| } | |
| .shield-badge { | |
| padding-top: 2px; | |
| color: var(--color-tertiary); | |
| flex-shrink: 0; | |
| } | |
| .shield-heading { | |
| font-size: 0.92rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| margin-bottom: 4px; | |
| text-transform: uppercase; | |
| } | |
| .shield-desc { | |
| font-size: 0.84rem; | |
| color: var(--text-sub); | |
| line-height: 1.5; | |
| } | |
| .shield-desc strong { | |
| color: var(--text-main); | |
| font-weight: 700; | |
| } | |
| .done-actions { | |
| max-width: 280px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* ========================================================================== | |
| Modal Dialog | |
| ========================================================================== */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.75); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px; | |
| z-index: 300; | |
| overflow-y: auto; | |
| } | |
| .modal-window { | |
| background-color: var(--bg-card); | |
| border: 3px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| width: 100%; | |
| max-width: 500px; | |
| box-shadow: var(--shadow-card); | |
| max-height: calc(100dvh - 32px); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 20px; | |
| border-bottom: 2px solid var(--border-color); | |
| gap: 10px; | |
| } | |
| .modal-header-title { | |
| font-size: 1rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| text-transform: uppercase; | |
| letter-spacing: 0.01em; | |
| } | |
| .btn-modal-close { | |
| background: var(--bg-surface); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-main); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| line-height: 1; | |
| width: 44px; | |
| height: 44px; | |
| min-width: 44px; | |
| min-height: 44px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-xs); | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| flex-shrink: 0; | |
| } | |
| .btn-modal-close:hover { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| background-color: var(--color-secondary); | |
| color: #FFFFFF; | |
| } | |
| .btn-modal-close:active { | |
| transform: translate(1px, 1px); | |
| box-shadow: var(--shadow-active); | |
| } | |
| .modal-content { | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .modal-explanation { | |
| font-size: 0.85rem; | |
| color: var(--text-sub); | |
| margin-bottom: 18px; | |
| line-height: 1.5; | |
| } | |
| .form-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .field-label { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| text-transform: uppercase; | |
| } | |
| .field-input { | |
| background-color: var(--bg-input); | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-main); | |
| padding: 12px 14px; | |
| font-size: 1rem; /* 16px prevents iOS zoom */ | |
| font-family: var(--font-mono); | |
| outline: none; | |
| min-height: 48px; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| width: 100%; | |
| } | |
| .field-input:focus { | |
| transform: translate(-1px, -1px); | |
| box-shadow: var(--shadow-base); | |
| } | |
| .field-note { | |
| font-size: 0.76rem; | |
| color: var(--text-muted); | |
| } | |
| .modal-bottom { | |
| padding: 14px 20px; | |
| border-top: 2px solid var(--border-color); | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| /* ========================================================================== | |
| Footer | |
| ========================================================================== */ | |
| .app-footer { | |
| border-top: 3px solid var(--border-color); | |
| background-color: var(--bg-card); | |
| padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0)); | |
| margin-top: auto; | |
| width: 100%; | |
| } | |
| .footer-inner { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .footer-tech { | |
| font-size: 0.85rem; | |
| color: var(--text-main); | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .footer-tech a { | |
| color: var(--text-main); | |
| text-decoration: underline; | |
| text-decoration-thickness: 2px; | |
| text-underline-offset: 3px; | |
| font-weight: 800; | |
| } | |
| .footer-tech a:hover { | |
| background-color: var(--color-primary); | |
| } | |
| .footer-legal { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| } | |
| /* ========================================================================== | |
| Utility Classes & Animations | |
| ========================================================================== */ | |
| .hidden { | |
| display: none ; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ========================================================================== | |
| Responsive Reflow System (DESIGN.md & antislop-layoutmobile) | |
| Breakpoints: 991px (Tablet) -> 768px (Phablet) -> 600px (Mobile) -> 420px (Small Mobile) | |
| ========================================================================== */ | |
| /* 1. Tablet & Medium Screen Breakpoint (<= 991px) */ | |
| @media (max-width: 991px) { | |
| .desktop-workspace-grid { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| max-width: 720px; | |
| margin: 0 auto 30px; | |
| } | |
| .workspace-sidebar { | |
| display: none; | |
| } | |
| .mobile-only-intro { | |
| display: block ; | |
| } | |
| .mobile-only-note { | |
| display: flex ; | |
| } | |
| .card-panel { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| } | |
| .desktop-feature-cards { | |
| grid-template-columns: 1fr; | |
| max-width: 720px; | |
| margin: 20px auto 0; | |
| } | |
| } | |
| /* 2. Phablet Breakpoint (<= 768px) */ | |
| @media (max-width: 768px) { | |
| .main-content { | |
| margin: 24px auto 36px; | |
| padding: 0 16px; | |
| } | |
| .card-panel { | |
| padding: 26px 20px; | |
| box-shadow: 5px 5px 0 var(--shadow-color); | |
| } | |
| /* Multi-column collapses below 768px (DESIGN.md rule) */ | |
| .dual-preview-grid { | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .preview-frame-rect { | |
| width: 140px; | |
| height: 186px; | |
| margin: 0 auto; | |
| } | |
| .preview-avatar-circle { | |
| width: 124px; | |
| height: 124px; | |
| margin: 0 auto 10px; | |
| } | |
| .qr-canvas-holder { | |
| width: min(250px, 75vw); | |
| height: min(250px, 75vw); | |
| } | |
| } | |
| /* 2. Standard Mobile Breakpoint (<= 600px) */ | |
| @media (max-width: 600px) { | |
| .top-nav { | |
| min-height: 56px; | |
| } | |
| .nav-content { | |
| min-height: 56px; | |
| padding: 6px 12px; | |
| } | |
| .brand-badge { | |
| gap: 8px; | |
| padding: 2px 4px; | |
| } | |
| .brand-name { | |
| font-size: 0.9rem; | |
| } | |
| .main-content { | |
| margin: 16px auto 32px; | |
| padding: 0 12px; | |
| } | |
| .card-panel { | |
| padding: 20px 16px; | |
| box-shadow: 4px 4px 0 var(--shadow-color); | |
| border-width: 2.5px; | |
| } | |
| /* Navbar Status Button: hide long text, show compact dot pill on narrow screens */ | |
| #server-status-text { | |
| display: none; | |
| } | |
| .status-indicator { | |
| padding: 6px 12px; | |
| min-width: 44px; | |
| justify-content: center; | |
| } | |
| .btn-icon { | |
| width: 44px; | |
| height: 44px; | |
| } | |
| /* Steps styling */ | |
| .flow-steps { | |
| margin-bottom: 24px; | |
| gap: 6px; | |
| } | |
| .flow-step .step-text { | |
| font-size: 0.76rem; | |
| } | |
| .flow-divider { | |
| max-width: 24px; | |
| min-width: 8px; | |
| height: 2.5px; | |
| } | |
| /* Preview action bar reflow */ | |
| .preview-actions-bar { | |
| flex-direction: column; | |
| align-items: stretch; | |
| text-align: center; | |
| gap: 12px; | |
| padding: 12px; | |
| } | |
| .file-summary { | |
| align-items: center; | |
| } | |
| .file-title { | |
| max-width: 100%; | |
| font-size: 0.85rem; | |
| } | |
| .btn-subtle { | |
| width: 100%; | |
| min-height: 44px; | |
| } | |
| /* Phone input guide */ | |
| .phone-box { | |
| padding: 14px; | |
| } | |
| /* Buttons */ | |
| .btn-action { | |
| min-height: 50px; | |
| font-size: 0.96rem; | |
| padding: 12px 18px; | |
| box-shadow: 3px 3px 0 var(--shadow-color); | |
| } | |
| .btn-action:hover:not(:disabled) { | |
| box-shadow: 4px 4px 0 var(--shadow-color); | |
| transform: translate(-1px, -1px); | |
| } | |
| /* Instruction & Live status */ | |
| .instruction-box { | |
| padding: 14px 16px; | |
| } | |
| .guide-steps { | |
| padding-left: 18px; | |
| font-size: 0.82rem; | |
| } | |
| .live-status-block { | |
| padding: 10px 14px; | |
| } | |
| .live-info { | |
| font-size: 0.82rem; | |
| } | |
| .btn-cancel { | |
| width: 100%; | |
| min-height: 44px; | |
| } | |
| /* Security card in success view */ | |
| .security-card { | |
| padding: 14px 16px; | |
| } | |
| /* Modal */ | |
| .modal-backdrop { | |
| padding: 12px; | |
| } | |
| .modal-window { | |
| box-shadow: 5px 5px 0 var(--shadow-color); | |
| } | |
| .modal-top { | |
| padding: 14px 16px; | |
| } | |
| .modal-content { | |
| padding: 16px; | |
| } | |
| .modal-bottom { | |
| padding: 12px 16px; | |
| } | |
| .modal-bottom .btn-action { | |
| width: 100%; | |
| min-height: 44px; | |
| } | |
| } | |
| /* 3. Small Mobile / Narrow Viewport Breakpoint (<= 420px) */ | |
| @media (max-width: 420px) { | |
| .main-content { | |
| margin: 12px auto 24px; | |
| padding: 0 8px; | |
| } | |
| .card-panel { | |
| padding: 18px 12px; | |
| box-shadow: 3px 3px 0 var(--shadow-color); | |
| border-width: 2px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .brand-badge { | |
| padding: 0; | |
| } | |
| .brand-name { | |
| font-size: 0.84rem; | |
| } | |
| .brand-avatar { | |
| width: 26px; | |
| height: 26px; | |
| } | |
| .page-title { | |
| font-size: 1.35rem; | |
| } | |
| .page-desc { | |
| font-size: 0.82rem; | |
| } | |
| .info-note { | |
| padding: 10px 12px; | |
| gap: 8px; | |
| } | |
| .info-note-text { | |
| font-size: 0.78rem; | |
| } | |
| /* Steps: On very small phones, collapse inactive text to prevent awkward wrapping */ | |
| .flow-steps { | |
| gap: 4px; | |
| } | |
| .flow-step:not(.active) .step-text { | |
| display: none; | |
| } | |
| .flow-step.active .step-text { | |
| font-size: 0.72rem; | |
| } | |
| .flow-divider { | |
| max-width: 16px; | |
| min-width: 6px; | |
| } | |
| .step-num { | |
| width: 26px; | |
| height: 26px; | |
| min-width: 26px; | |
| font-size: 0.75rem; | |
| } | |
| /* Method Switcher: stack vertically so both options have full tap targets */ | |
| .segmented-control { | |
| grid-template-columns: 1fr; | |
| gap: 6px; | |
| padding: 4px; | |
| } | |
| .segment-btn { | |
| min-height: 44px; | |
| font-size: 0.8rem; | |
| padding: 8px 10px; | |
| } | |
| /* Pairing Code Display: stack code and copy button cleanly */ | |
| .pairing-code-card { | |
| flex-direction: column; | |
| gap: 12px; | |
| width: 100%; | |
| padding: 14px 12px; | |
| box-shadow: 3px 3px 0 var(--shadow-color); | |
| } | |
| .pairing-code-val { | |
| font-size: 1.5rem; | |
| letter-spacing: 0.08em; | |
| } | |
| .btn-copy { | |
| width: 100%; | |
| justify-content: center; | |
| min-height: 44px; | |
| } | |
| /* Live status */ | |
| .live-status-block { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 6px; | |
| } | |
| /* Success View */ | |
| .done-icon-circle { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .done-title { | |
| font-size: 1.2rem; | |
| } | |
| .done-subtitle { | |
| font-size: 0.84rem; | |
| } | |
| .security-card { | |
| padding: 12px 14px; | |
| gap: 10px; | |
| } | |
| .shield-heading { | |
| font-size: 0.84rem; | |
| } | |
| .shield-desc { | |
| font-size: 0.78rem; | |
| } | |
| .done-actions { | |
| max-width: 100%; | |
| } | |
| .modal-backdrop { | |
| padding: 8px; | |
| } | |
| .modal-window { | |
| box-shadow: 3px 3px 0 var(--shadow-color); | |
| } | |
| } | |