/* --- static/css/base/colors.css --- */ :root { --header-height: 80px; --footer-height: 60px; --sidebar-width: 250px; /* Responsive layout tokens */ --content-max-width: 1400px; --content-max-width-lg: 1600px; --content-max-width-xl: 1800px; --content-max-width-xxl: 2000px; /* Prioritized Color Palette */ --primary-color: #76b900; /* Dark green */ --primary-hover: #99CC33; /* Light green */ --secondary-color: #99CC33; /* Light green */ --success-color: #22c55e; /* Green — distinct from primary */ --success-text: #166534; /* Dark green for text on light bg — WCAG AA */ --warning-color: #f59e0b; /* Amber — actual warning tone */ --danger-color: #ef4444; /* Light red for errors */ --bg-color: #fafafa; /* Light gray background */ --surface-color: #ffffff; /* White */ --text-primary: #1a1a1a; /* Near black */ --text-secondary: #666666; /* Gray */ --text-muted: #999999; /* Light gray */ --sidebar-bg: #1a1a1a; /* Dark */ --sidebar-text: #ffffff; /* White */ --border-color: #f0f0f0; /* Very light gray */ --border-strong: #e5e5e5; /* Slightly more visible border */ --bg-subtle: #f5f5f5; /* Subtle background tint */ --progress-color: #1E57FE; /* Blue for processing */ /* color helpers */ --primary-text-on: #ffffff; /* text color on primary backgrounds */ --primary-rgba: 118, 185, 0; /* for rgba() uses */ --primary-focus: rgba(118, 185, 0, 0.15); /* light variants for subtle backgrounds */ --primary-light: rgba(118, 185, 0, 0.08); --success-light: rgba(34, 197, 94, 0.08); --warning-light: rgba(245, 158, 11, 0.08); --danger-light: rgba(239, 68, 68, 0.08); --info-color: #1E57FE; --info-light: rgba(30, 87, 254, 0.08); /* UI helper */ --bg-hover: rgba(118, 185, 0, 0.05); /* credits component specific variables */ --credits-bg: #f8fffe; --credits-border: rgba(118, 185, 0, 0.12); --credits-gradient-start: #f8fffe; --credits-gradient-end: #f0fdf4; --credits-icon-size: 44px; --credits-font-size: 2rem; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.16); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; } /* ─── Dark Mode Foundation ────────────────────────────── Activate with or JS toggle. Every component already uses --var tokens from :root, so flipping these values switches the entire UI. ────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-color: #121212; --surface-color: #1e1e1e; --text-primary: #e5e5e5; --text-secondary: #a3a3a3; --text-muted: #737373; --sidebar-bg: #0f0f0f; --sidebar-text: #e5e5e5; --border-color: #2a2a2a; --border-strong: #333333; --bg-subtle: #252525; --success-text: #4ade80; /* Lighter green for dark backgrounds */ /* Shadows softer in dark mode */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.5); /* Primary palette stays unchanged for brand identity */ /* light variants for dark surfaces */ --primary-light: rgba(118, 185, 0, 0.12); --success-light: rgba(34, 197, 94, 0.12); --warning-light: rgba(245, 158, 11, 0.12); --danger-light: rgba(239, 68, 68, 0.12); --info-light: rgba(30, 87, 254, 0.12); --bg-hover: rgba(118, 185, 0, 0.08); --primary-focus: rgba(118, 185, 0, 0.2); /* Credits component */ --credits-bg: #1a2e1a; --credits-border: rgba(118, 185, 0, 0.2); --credits-gradient-start: #1a2e1a; --credits-gradient-end: #1a3a1a; } /* --- static/css/base/reset.css --- */ /* CSS Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.02em; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } p { margin-bottom: 1rem; color: var(--text-secondary); line-height: 1.7; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; font-weight: 500; } a:hover { color: var(--primary-hover); } /* SVG sprite icon base */ .icon { display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; } /* --- static/css/base/layout.css --- */ /* Layout Base — Header & Button styles */ .header-left { display: flex; align-items: center; gap: 1.5rem; } .toggle-sidebar-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .toggle-sidebar-btn:hover { background-color: rgba(118, 185, 0, 0.1); color: var(--primary-color); } .toggle-sidebar-btn:active { transform: scale(0.95); } .toggle-sidebar-btn svg { transition: transform 0.3s ease; } .toggle-sidebar-btn:hover svg { transform: translateX(2px); } .header-brand { display: flex; align-items: center; gap: 0.75rem; } .header-brand .brand-icon { font-size: 1.75rem; line-height: 1; } .header-brand h3 { margin: 0; font-size: 1.35rem; font-weight: 800; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .header-theme-toggle { align-items: center; background: var(--surface-color); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.875rem; font-weight: 600; gap: 0.45rem; min-height: 2.5rem; padding: 0.45rem 0.7rem; } .header-theme-toggle:hover { background: var(--primary-light); border-color: var(--primary-color); } .header-theme-toggle:focus-visible { outline: 3px solid var(--primary-focus); outline-offset: 2px; } .header-theme-toggle__icon { font-size: 1.1rem; line-height: 1; } .user-info-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: var(--bg-color); border-radius: 10px; border: 1px solid var(--border-color); } .user-avatar-mini { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.875rem; box-shadow: 0 2px 8px rgba(118, 185, 0, 0.2); } .user-email { color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; } .btn-header-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(118, 185, 0, 0.2); } .btn-header-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3); } .btn-logout, .btn-login, .btn-register { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-logout { color: var(--text-secondary); border: 1px solid var(--border-strong); background: transparent; } .btn-logout:hover { background-color: var(--danger-light); border-color: var(--danger-color); color: var(--danger-color); } .btn-login { color: var(--text-secondary); border: 1px solid var(--border-strong); background: transparent; } .btn-login:hover { background-color: rgba(118, 185, 0, 0.05); border-color: var(--primary-color); color: var(--primary-color); } .btn-register { background: var(--primary-color); color: white; border: none; box-shadow: 0 2px 8px rgba(118, 185, 0, 0.2); } .btn-register:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3); } /* Layout Base — Fixed header + drawer sidebar */ .app-container { display: flex; flex-direction: column; min-height: 100vh; } .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--surface-color); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; z-index: 1000; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); } .app-sidebar { position: fixed; top: var(--header-height); left: 0; width: var(--sidebar-width); height: calc(100vh - var(--header-height)); background: var(--sidebar-bg); color: var(--sidebar-text); overflow-y: auto; overflow-x: hidden; z-index: 999; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .app-sidebar.sidebar--open { transform: translateX(0); } .app-content { margin-top: var(--header-height); padding: 2rem; background: var(--bg-color); min-height: calc(100vh - var(--header-height)); display: block; min-width: 0; overflow-x: hidden; flex: 1; } .app-footer { grid-area: footer; background: #000000; border-top: 1px solid #333; padding: 1.5rem 2rem; color: #ccc; font-size: 0.875rem; position: relative; z-index: 100; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; } .footer-left { display: flex; flex-direction: column; gap: 0.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.5rem; } .footer-icon { font-size: 1.25rem; line-height: 1; } .footer-name { font-weight: 700; font-size: 1rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.01em; } .footer-copyright { margin: 0; color: var(--text-muted); font-size: 0.8rem; } .footer-right { display: flex; align-items: center; } .footer-links { display: flex; gap: 1.5rem; align-items: center; } .footer-link { color: #ccc; text-decoration: none; font-weight: 500; font-size: 0.875rem; transition: all 0.2s ease; padding: 0.25rem 0; border-bottom: 2px solid transparent; } .footer-link:hover { color: #fff; border-bottom-color: var(--primary-color); } .footer-policy-link { color: #ccc; text-decoration: none; font-weight: 500; font-size: 0.875rem; transition: all 0.2s ease; cursor: pointer; border: 1px solid #555; padding: 0.5rem 1rem; border-radius: 4px; background: transparent; } .footer-policy-link:hover { color: #fff; border-color: var(--primary-color); background: rgba(255, 255, 255, 0.05); } @media (max-width: 768px) { .app-footer { padding: 1.25rem 1rem; } .footer-content { flex-direction: column; text-align: center; gap: 1rem; } .footer-left { align-items: center; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; } } /* Container utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .container-sm { max-width: 800px; margin: 0 auto; padding: 0 1rem; } .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } /* Responsive adjustments */ @media (max-width: 768px) { :root { --header-height: 60px; } .app-content { padding: 1rem 0.75rem; position: relative; } .container { padding: 0 0.75rem; } .app-sidebar { width: 85vw; max-width: 300px; } } @media (max-width: 480px) { .app-content { padding: 0.75rem 0.5rem; } .container { padding: 0 0.5rem; } } /* ── Large screens: collapsible sidebar ── */ @media (min-width: 1280px) { /* Sidebar visible when aria-hidden is false (default on wide screens) */ .app-sidebar { transform: translateX(0); } /* Sidebar hidden when user explicitly collapses it */ .app-sidebar[aria-hidden="true"] { transform: translateX(-100%); } /* Only content shifts — header always spans full width */ .app-content { margin-left: var(--sidebar-width); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* When sidebar is collapsed, remove content offset */ .app-container:has(.app-sidebar[aria-hidden="true"]) .app-content { margin-left: 0; } /* Toggle always visible — user can collapse/expand */ .toggle-sidebar-btn { display: flex; } /* No backdrop on wide screens */ .sidebar-backdrop { display: none !important; } } /* ── Progressive container scaling ── */ @media (min-width: 1280px) { .container { max-width: var(--content-max-width); } .container-lg { max-width: var(--content-max-width-lg); } } @media (min-width: 1920px) { .container { max-width: var(--content-max-width-lg); } .container-lg { max-width: var(--content-max-width-xl); } .app-content { padding: 2.5rem 3rem; } } @media (min-width: 2560px) { .container { max-width: var(--content-max-width-xl); } .container-lg { max-width: var(--content-max-width-xxl); } .app-content { padding: 3rem 4rem; } } /* Sidebar backdrop overlay */ .sidebar-backdrop { display: none; position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); background: rgba(0, 0, 0, 0.5); z-index: 998; backdrop-filter: blur(2px); } .sidebar-backdrop.show { display: block; } /* --- static/css/components/buttons.css --- */ /* Button Components */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem; border-radius: 8px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; font-size: 0.95rem; gap: 0.5rem; white-space: nowrap; position: relative; overflow: hidden; letter-spacing: 0.01em; } .btn-block { width: 100%; display: flex; } .btn:focus { outline: none; box-shadow: 0 0 0 4px var(--primary-focus); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary, .btn.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; background-color: var(--primary-color); color: var(--primary-text-on); border: none; box-shadow: 0 4px 12px rgba(var(--primary-rgba), 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary:hover:not(:disabled), .btn.btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgba), 0.3); } .btn-primary:focus:not(:disabled), .btn.btn-primary:focus:not(:disabled) { outline: none; box-shadow: 0 0 0 4px var(--primary-focus); } .btn-primary:active:not(:disabled), .btn.btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled, .btn.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { background-color: transparent; color: var(--text-primary); border: 2px solid var(--border-strong); } .btn-secondary:hover:not(:disabled) { background-color: var(--bg-subtle); border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); } .btn-success { background-color: var(--success-color); color: white; border: none; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2); } .btn-success:hover:not(:disabled) { background-color: #16a34a; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-danger { background-color: var(--danger-color); color: white; border-color: var(--danger-color); } .btn-danger:hover:not(:disabled) { background-color: #dc2626; border-color: #dc2626; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-outline { background-color: transparent; border-color: var(--border-color); color: var(--text-secondary); } .btn-outline:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); background-color: rgba(var(--primary-rgba), 0.05); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: var(--radius-sm); } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: var(--radius-lg); } .btn-icon { padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; border-radius: var(--radius-sm); color: var(--text-secondary); transition: all 0.2s; font-size: 1rem; } .btn-icon:hover { background: rgba(var(--primary-rgba), 0.05); color: var(--primary-color); transform: scale(1.05); } .btn-icon:focus { box-shadow: 0 0 0 4px var(--primary-focus); } /* --- static/css/components/forms.css --- */ /* Form Components */ .form-group { margin-bottom: 1.5rem; } .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"] { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); outline: none; font-size: 0.95rem; color: var(--text-primary); transition: all 0.2s ease; } .form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group input[type="email"]:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-focus); } .form-group input[type="text"]::placeholder, .form-group input[type="password"]::placeholder, .form-group input[type="email"]::placeholder { color: var(--text-muted); } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary); font-size: 0.9rem; letter-spacing: 0.01em; } .form-control { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--surface-color); color: var(--text-primary); font-size: 0.95rem; transition: all 0.2s ease; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-focus); background-color: var(--surface-color); } .form-control:disabled { background-color: var(--bg-color); color: var(--text-muted); cursor: not-allowed; border-color: var(--border-color); } .form-control.error { border-color: var(--danger-color); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); } .form-control.success { border-color: var(--success-color); box-shadow: 0 0 0 3px var(--success-light); } .form-text { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); } .form-text.error { color: var(--danger-color); font-weight: 500; } .form-text.success { color: var(--success-color); font-weight: 500; } /* Shared choice and upload primitives */ .processing-mode-box { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; } .section-label { display: block; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } .radio-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .radio-label, .checkbox-label { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.875rem 1rem; border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-color); color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; flex: 1 1 220px; min-width: 0; } .radio-label:hover, .checkbox-label:hover { border-color: var(--primary-color); background: rgba(var(--primary-rgba), 0.04); color: var(--primary-color); } .radio-label:has(input:checked), .checkbox-label:has(input:checked) { background: rgba(var(--primary-rgba), 0.08); border-color: var(--primary-color); color: var(--primary-color); } .radio-label:focus-within, .checkbox-label:focus-within { box-shadow: 0 0 0 3px var(--primary-focus); } .radio-label input[type="radio"], .checkbox-label input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--primary-color); cursor: pointer; } .radio-label h6, .radio-label .radio-description { margin: 0; } .radio-label h6 { font-size: 0.95rem; font-weight: 700; color: inherit; } .radio-label .radio-description { display: block; margin-top: 0.3rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); } .checkbox-label { align-items: center; padding: 0.75rem 0.875rem; flex: 1 1 auto; } .audio-option-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .drop-zone-modern { border: 2px dashed var(--border-color); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--bg-color); position: relative; min-height: 160px; display: flex; align-items: center; justify-content: center; } .drop-zone-modern:hover, .drop-zone-modern.drag-over { border-color: var(--primary-color); background: rgba(var(--primary-rgba), 0.05); } .drop-zone-modern.drag-over { transform: translateY(-2px) scale(1.01); } .drop-zone-modern.has-file { padding: 0; border-color: var(--primary-color); background: var(--surface-color); min-height: 280px; } .drop-zone-modern.has-file .drop-zone-content { display: none; } .drop-zone-modern:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-focus); } .upload-icon-modern { width: 80px; height: 80px; margin: 0 auto 1.25rem auto; color: var(--primary-color); opacity: 0.7; transition: all 0.3s ease; } .drop-zone-modern:hover .upload-icon-modern { opacity: 1; transform: translateY(-4px); } .drop-zone-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .drop-zone-text h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem 0; } .drop-zone-text p { font-size: 0.9375rem; color: var(--text-secondary); margin: 0 0 1rem 0; line-height: 1.5; } .file-types { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .file-type-badge { padding: 0.375rem 0.875rem; background: rgba(var(--primary-rgba), 0.1); color: var(--primary-color); border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Form layouts */ .form-row { display: flex; gap: 1rem; align-items: end; } .form-row .form-group { flex: 1; } .form-inline { display: flex; gap: 0.5rem; align-items: center; } .form-inline .form-group { margin-bottom: 0; } /* Alert helpers */ .alert { padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1rem; line-height: 1.5; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); border: 1px solid var(--border-color); background: var(--surface-color); } .alert-error, .alert-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); border-color: rgba(239, 68, 68, 0.3); } .alert-success { background: var(--success-light); color: var(--success-text); border-color: rgba(34, 197, 94, 0.2); } .alert-info { background: rgba(37, 99, 235, 0.1); color: var(--primary-color); border-color: rgba(37, 99, 235, 0.25); } .alert-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.25); } /* Checkboxes and radios */ .form-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .form-check-input { width: 1rem; height: 1rem; margin: 0; } .form-check-label { margin: 0; font-weight: normal; cursor: pointer; } /* Select */ .form-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } /* File input */ .form-file { position: relative; } .form-file-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .form-file-label { display: inline-block; padding: 0.75rem 1rem; border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: var(--bg-color); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; text-align: center; } .form-file-label:hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--primary-light); } .form-group.form-group-terms { display: flex; gap: 0.75rem; justify-content: flex-start; align-items: flex-start; align-content: center; padding: 1rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-top: 1rem; } .form-group.form-group-terms input[type="checkbox"] { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; cursor: pointer; accent-color: var(--primary-color); border: 2px solid var(--border-color); border-radius: 4px; transition: all 0.2s ease; } .form-group.form-group-terms input[type="checkbox"]:hover { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-focus); } .form-group.form-group-terms input[type="checkbox"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-group.form-group-terms label { margin: 0; font-weight: 500; font-size: 0.95rem; color: var(--text-primary); line-height: 1.5; cursor: pointer; user-select: none; } .form-group.form-group-terms label a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: all 0.2s ease; border-bottom: 1px solid transparent; } .form-group.form-group-terms label a:hover { color: var(--primary-hover); border-bottom-color: var(--primary-hover); } .form-group.form-group-terms label a:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Responsive forms */ @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .form-inline { flex-direction: column; align-items: stretch; } } /* --- static/css/components/cards.css --- */ /* Card Components */ .card { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Modern card and tabs used across watermark/pipeline-style flows */ .card-modern { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease; } .card-modern:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card-header-modern { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .card-number { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-color) 0%, #99CC33 100%); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3); } .card-title-modern { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0; } .card-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0; } .sticky-card { position: sticky; top: 2rem; } .tabs-modern { display: flex; gap: 0.5rem; padding: 0.5rem; background: var(--bg-color); border-radius: 12px; margin-bottom: 1.5rem; } .tab-btn-modern { flex: 1; padding: 0.875rem 1.25rem; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .tab-btn-modern svg { width: 18px; height: 18px; opacity: 0.7; transition: opacity 0.2s; } .tab-btn-modern:hover { color: var(--primary-color); background: var(--surface-color); } .tab-btn-modern:hover svg { opacity: 1; } .tab-btn-modern.active { color: var(--primary-color); background: var(--surface-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tab-btn-modern.active svg { opacity: 1; } .tab-content { display: none; } .tab-content.active { display: block; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(var(--primary-rgba), 0.2); } .card-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-color); } .card-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .card-subtitle { margin: 0.5rem 0 0 0; font-size: 0.875rem; color: var(--text-secondary); font-weight: 400; } .card-body { padding: 1.5rem; } .card-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); background-color: var(--bg-color); display: flex; justify-content: space-between; align-items: center; } /* Card variants */ .card-primary { border-color: var(--primary-color); } .card-primary .card-header { background-color: var(--primary-light); border-bottom-color: var(--primary-color); } .card-success { border-color: var(--success-color); } .card-success .card-header { background-color: var(--success-light); border-bottom-color: var(--success-color); } .card-warning { border-color: var(--warning-color); } .card-warning .card-header { background-color: var(--warning-light); border-bottom-color: var(--warning-color); } .card-danger { border-color: var(--danger-color); } .card-danger .card-header { background-color: var(--danger-light); border-bottom-color: var(--danger-color); } /* Card layouts */ .card-group { display: grid; gap: 1.5rem; } .card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* Card content helpers */ .card-content { display: flex; flex-direction: column; gap: 1rem; } .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); } .card-actions { display: flex; gap: 0.5rem; margin-top: auto; } /* Compact cards */ .card-compact .card-header, .card-compact .card-body, .card-compact .card-footer { padding: 1rem; } .card-compact .card-title { font-size: 1rem; } /* Full height cards */ .card-full-height { height: 100%; display: flex; flex-direction: column; } .card-full-height .card-body { flex: 1; } /* Card with image */ .card-with-image { display: flex; flex-direction: column; } .card-image { width: 100%; height: 200px; object-fit: cover; } .card-image-container { position: relative; overflow: hidden; } /* Responsive cards */ @media (max-width: 768px) { .card-group { grid-template-columns: 1fr; } .card-footer { flex-direction: column; gap: 1rem; align-items: stretch; } .card-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .card-modern { padding: 1.5rem; } } @media (max-width: 640px) { .card-modern { padding: 1.25rem; border-radius: 12px; } .card-header-modern { margin-bottom: 1rem; padding-bottom: 1rem; } .tabs-modern { overflow-x: auto; gap: 0.25rem; padding: 0.35rem; -webkit-overflow-scrolling: touch; } .tab-btn-modern { padding: 0.625rem 0.875rem; font-size: 0.85rem; white-space: nowrap; flex: 0 0 auto; } } /* Multi-select counter badge (used across video grids) */ .multi-select-counter { display: none; background: var(--primary-gradient, linear-gradient(135deg, #22c55e, #16a34a)); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 8px; margin-bottom: 0.75rem; text-align: center; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); } /* --- static/css/components/empty-state.css --- */ /* ─── Empty State Component ───────────────────────────── Unified empty-state for all pages. Base: .empty-state Children: direct svg/p/span/h3 OR .empty-state-icon / .empty-state-title / .empty-state-text Mods: -bordered (dashed border card), -compact (sidebar panels) ──────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 2rem; color: var(--text-secondary); } /* Icon — direct svg or wrapper */ .empty-state > svg, .empty-state-icon { opacity: 0.3; margin-bottom: 1rem; color: var(--text-secondary); } .empty-state-icon > svg { opacity: 1; /* already on wrapper */ } /* Title — direct p/h3 or class */ .empty-state > p, .empty-state > h3, .empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem 0; } /* Description — direct span or class */ .empty-state > span, .empty-state-text { font-size: 0.9375rem; color: var(--text-secondary); max-width: 400px; line-height: 1.6; } /* Action slot (buttons/links after text) */ .empty-state > .btn-primary-large, .empty-state > [class*="btn"] { margin-top: 1.5rem; } /* ── Modifier: bordered (full-page empty, e.g. video list) ── */ .empty-state-bordered { padding: 6rem 2rem; background: var(--surface-color); border-radius: 16px; border: 2px dashed var(--border-color); } .empty-state-bordered .empty-state-icon { margin-bottom: 1.5rem; color: var(--text-muted); opacity: 1; } .empty-state-bordered .empty-state-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.75rem 0; } .empty-state-bordered .empty-state-text { font-size: 1rem; margin: 0 0 2rem 0; } /* ── Modifier: compact (sidebar widgets) ── */ .empty-state-compact { padding: 24px 16px; gap: 12px; color: var(--text-muted); } .empty-state-compact > svg { opacity: 0.4; margin-bottom: 0; } .empty-state-compact > p { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); line-height: 1.5; margin: 0; } /* --- static/css/components/skeleton.css --- */ /* ─── Skeleton Loading Component ───────────────────────── Placeholder shimmer while content loads. Base: .skeleton Variants: .skeleton-text, .skeleton-title, .skeleton-avatar, .skeleton-card ──────────────────────────────────────────────────────── */ @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--skeleton-base, #f0f0f0) 25%, var(--skeleton-highlight, #e0e0e0) 50%, var(--skeleton-base, #f0f0f0) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); color: transparent !important; pointer-events: none; user-select: none; } /* Text line placeholder */ .skeleton-text { height: 1em; width: 100%; margin-bottom: 0.5rem; } .skeleton-text:last-child { width: 65%; } /* Title placeholder */ .skeleton-title { height: 1.5em; width: 50%; margin-bottom: 0.75rem; } /* Avatar / icon placeholder */ .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } /* Card placeholder (video card size) */ .skeleton-card { border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .skeleton-card-thumbnail { aspect-ratio: 16 / 9; width: 100%; } .skeleton-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } /* Inline row (icon + text) */ .skeleton-row { display: flex; align-items: center; gap: 0.75rem; } /* ── Skeleton layout wrappers (used by loading-skeleton.html) ── */ .skeleton-wrapper { width: 100%; } .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .skeleton-table { display: flex; flex-direction: column; gap: 1rem; } .skeleton-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .skeleton-metric { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem; border-radius: var(--radius-lg); } /* Dark mode overrides */ [data-theme="dark"] .skeleton { --skeleton-base: #2a2a2a; --skeleton-highlight: #3a3a3a; } /* --- static/css/components/breadcrumbs.css --- */ /* ─── Breadcrumbs Component ────────────────────────────── Navigation breadcrumbs for tool pages. Base: .breadcrumbs Children: .breadcrumbs-item, .breadcrumbs-separator, .breadcrumbs-current ──────────────────────────────────────────────────────── */ .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; padding: 0; margin: 0 0 1.25rem 0; font-size: 0.875rem; line-height: 1.5; list-style: none; } .breadcrumbs-item a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; border-radius: var(--radius-sm, 4px); padding: 0.125rem 0.25rem; margin: -0.125rem -0.25rem; } .breadcrumbs-item a:hover { color: var(--primary-color); text-decoration: underline; } .breadcrumbs-item a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .breadcrumbs-separator { color: var(--text-muted, #999); font-size: 0.75rem; user-select: none; } .breadcrumbs-current { color: var(--text-primary); font-weight: 600; } /* On very small screens, hide intermediate crumbs */ @media (max-width: 480px) { .breadcrumbs-item:not(:first-child):not(:last-child) { display: none; } .breadcrumbs-separator:not(:first-of-type):not(:last-of-type) { display: none; } } /* --- static/css/components/tables.css --- */ /* Table Components */ .table { width: 100%; border-collapse: collapse; background-color: var(--surface-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .table th, .table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .table th { background-color: var(--bg-color); font-weight: 600; color: var(--text-primary); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; } .table tbody tr:hover { background-color: var(--bg-hover); } .table tbody tr:last-child td { border-bottom: none; } /* Table variants */ .table-striped tbody tr:nth-child(even) { background-color: var(--bg-color); } .table-bordered { border: 1px solid var(--border-color); } .table-bordered th, .table-bordered td { border-right: 1px solid var(--border-color); } .table-bordered th:last-child, .table-bordered td:last-child { border-right: none; } /* Table sizes */ .table-sm th, .table-sm td { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .table-lg th, .table-lg td { padding: 1rem 1.5rem; font-size: 1rem; } /* Table responsive */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive .table { min-width: 600px; } /* Table actions */ .table-actions { display: flex; gap: 0.25rem; justify-content: flex-end; } .table-actions .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Status indicators in tables */ .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; } .status-badge.success { background-color: var(--success-light); color: var(--success-color); } .status-badge.warning { background-color: var(--warning-light); color: var(--warning-color); } .status-badge.danger { background-color: var(--danger-light); color: var(--danger-color); } .status-badge.info { /* Higher contrast variant for processing/info states */ background-color: var(--info-color); color: var(--primary-text-on); border: 1px solid rgba(30,87,254,0.12); } /* Expired state: light red background with clear red text and border */ .status-badge.expired { background-color: rgba(239,68,68,0.12); color: var(--danger-color); border: 1px solid rgba(239,68,68,0.22); font-weight: 700; } .status-badge.pending { background-color: var(--warning-light); color: var(--warning-color); } /* Progress bars in tables */ .progress-bar { width: 100%; height: 0.5rem; background-color: var(--bg-color); border-radius: var(--radius-sm); overflow: hidden; } .progress-bar-fill { height: 100%; background-color: var(--primary-color); transition: width 0.3s ease; } .progress-bar-fill.success { background-color: var(--success-color); } .progress-bar-fill.info { background-color: var(--info-color); } .progress-bar-fill.warning { background-color: var(--warning-color); } .progress-bar-fill.danger { background-color: var(--danger-color); } /* Sortable table headers */ .table th.sortable { cursor: pointer; user-select: none; position: relative; } .table th.sortable:hover { background-color: var(--bg-hover); } .table th.sortable::after { content: ''; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent; border-bottom: 0.25rem solid var(--text-muted); opacity: 0.5; } .table th.sortable.sort-asc::after { border-bottom: 0.25rem solid var(--primary-color); border-top: none; opacity: 1; } .table th.sortable.sort-desc::after { border-top: 0.25rem solid var(--primary-color); border-bottom: none; opacity: 1; } /* Empty state */ .table-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .table-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } .table-empty-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-secondary); } .table-empty-text { font-size: 0.875rem; } /* Table pagination */ .table-pagination { display: flex; justify-content: between; align-items: center; padding: 1rem; background-color: var(--bg-color); border-top: 1px solid var(--border-color); } .table-pagination-info { font-size: 0.875rem; color: var(--text-muted); } .table-pagination-controls { display: flex; gap: 0.25rem; } /* Responsive table adjustments */ @media (max-width: 768px) { .table th, .table td { padding: 0.5rem; font-size: 0.75rem; } .table-actions { flex-direction: column; gap: 0.125rem; } .table-actions .btn { width: 100%; } .status-badge { font-size: 0.625rem; padding: 0.125rem 0.25rem; } } /* --- static/css/components/modals.css --- */ /* Modal Components */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; } .modal[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; } .modal[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; } .modal-hidden { opacity: 0 !important; visibility: hidden !important; } .modal-content { background-color: var(--surface-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); max-width: 500px; width: 100%; max-height: 90vh; overflow: hidden; } .modal-dialog { max-width: 500px; width: 100%; transform: scale(0.9); transition: transform 0.3s; } .modal[aria-hidden="false"] .modal-dialog, .modal.show .modal-dialog { transform: scale(1); } .modal.show { opacity: 1; visibility: visible; } .modal-dialog { background-color: var(--surface-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; transform: scale(0.9); transition: transform 0.3s; } .modal.show .modal-dialog { transform: scale(1); } .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); } .modal-close { background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); transition: color 0.2s, background-color 0.2s; } .modal-close:hover { color: var(--text-primary); background-color: var(--primary-light); } .modal-body { padding: 1.5rem; max-height: 60vh; overflow-y: auto; } /* Improve readability for long legal texts (terms / privacy) */ .modal-body p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; } .modal-body a { color: var(--primary-color); text-decoration: underline; } .modal-body h3, .modal-body h4, .modal-body h2 { color: var(--text-primary); margin-top: 0; } /* Make modal content area slightly more readable */ .modal-content { background-color: var(--surface-color); color: var(--text-primary); border-radius: 12px; box-shadow: var(--shadow-xl); } .modal-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 0.75rem; background-color: var(--bg-color); } /* Modal sizes */ .modal-sm .modal-dialog { max-width: 400px; } .modal-lg .modal-dialog { max-width: 800px; } .modal-xl .modal-dialog { max-width: 1200px; } .modal-full .modal-dialog { max-width: 95vw; max-height: 95vh; } /* Modal animations */ .modal.fade-in { animation: modalFadeIn 0.3s ease-out; } @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Modal content variants */ .modal-confirm .modal-header { background-color: var(--warning-light); border-bottom-color: var(--warning-color); } .modal-confirm .modal-title { color: var(--warning-color); } .modal-success .modal-header { background-color: var(--success-light); border-bottom-color: var(--success-color); } .modal-success .modal-title { color: var(--success-color); } .modal-danger .modal-header { background-color: var(--danger-light); border-bottom-color: var(--danger-color); } .modal-danger .modal-title { color: var(--danger-color); } /* Large modal size for legal texts */ .modal.modal-lg .modal-content { max-width: 900px; width: 90%; } /* Legal modal specific styles (Terms / Privacy) */ .modal-legal .modal-header { padding: 1rem 1.5rem; background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-legal .modal-title { color: #ffffff; font-weight: 700; font-size: 1.2rem; margin: 0; } .modal-legal .modal-close { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 1.75rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s ease; } .modal-legal .modal-close:hover { background-color: rgba(255, 255, 255, 0.3); color: #ffffff; } .modal-legal .modal-close:active { background-color: rgba(255, 255, 255, 0.4); } .modal-legal-body { padding: 2rem 1.75rem; background-color: var(--bg-color); } .modal-legal-body p { color: var(--text-primary); font-size: 0.95rem; line-height: 1.8; margin-bottom: 1rem; } .modal-legal-body h3 { color: var(--text-primary); font-size: 1.3rem; font-weight: 700; margin-top: 0; margin-bottom: 0.5rem; } .modal-legal-body h4 { color: var(--text-secondary); font-size: 1.05rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; } .modal-legal-body h5 { color: var(--text-secondary); font-size: 0.95rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; } .modal-legal-body ul { color: var(--text-primary); padding-left: 1.5rem; margin: 0.5rem 0 1rem 0; } .modal-legal-body ul li { line-height: 1.6; margin-bottom: 0.5rem; } .modal-legal-body blockquote { background-color: var(--warning-light); border-left: 4px solid #84cc16; padding: 1rem; margin: 1rem 0; border-radius: 4px; color: var(--text-primary); font-size: 0.95rem; } .modal-legal-body hr { border: none; border-top: 1px solid var(--border-strong); margin: 1.5rem 0; } .modal-legal-columns { column-count: 1; column-gap: 2rem; /* Prevent breaking lists inside columns */ break-inside: avoid-column; } @media (max-width: 1024px) { .modal-legal-columns { column-count: 1; } } @media (max-width: 640px) { .modal-legal-columns { column-count: 1; } .modal-legal .modal-header { padding: 0.75rem 1rem; } .modal-legal .modal-title { font-size: 1rem; } .modal-legal-body { padding: 1.5rem 1rem; } } /* Modal form */ .modal-form .modal-body { padding: 0; } .modal-form form { padding: 1.5rem; } /* Modal with tabs */ .modal-tabs .modal-body { padding: 0; } .modal-tabs .tab-content { padding: 1.5rem; } /* Modal loading state */ .modal-loading { position: relative; } .modal-loading::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; } .modal-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 2px solid var(--border-color); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; z-index: 11; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Modal responsive */ @media (max-width: 768px) { .modal-dialog { margin: 1rem; max-width: none; max-height: none; } .modal-header, .modal-body, .modal-footer { padding: 1rem; } .modal-footer { flex-direction: column; gap: 0.5rem; } .modal-footer .btn { width: 100%; } } /* Toast notifications (alternative to modals for small messages) */ .toast { position: fixed; top: 1rem; right: 1rem; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 1rem; max-width: 400px; z-index: 1100; transform: translateX(100%); opacity: 0; transition: transform 0.3s, opacity 0.3s; } .toast.show { transform: translateX(0); opacity: 1; } .toast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .toast-title { font-weight: 600; color: var(--text-primary); } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); } .toast-body { color: var(--text-secondary); } .toast.success { border-color: var(--success-color); background-color: var(--success-light); } .toast.warning { border-color: var(--warning-color); background-color: var(--warning-light); } .toast.danger { border-color: var(--danger-color); background-color: var(--danger-light); } /* --- static/css/components/tool-page.css --- */ /* Shared layout for video processing tool pages. */ .tool-page { max-width: var(--content-max-width); margin: 0 auto; padding: 2rem; } .page-header-stats { align-items: center; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-sm); display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; margin-bottom: 2.5rem; padding: 2rem; } .page-header-stats .header-content { align-items: center; display: flex; flex: 1 1 18rem; gap: 1rem; min-width: 0; } .page-header-stats .header-icon { align-items: center; background: var(--primary-light); border-radius: 12px; color: var(--primary-color); display: flex; flex: 0 0 auto; height: 48px; justify-content: center; width: 48px; } .page-header-stats .header-icon svg { height: 28px; width: 28px; } .page-header-stats .header-text { min-width: 0; } .page-header-stats .page-title-modern { color: var(--text-primary); font-size: 2rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0 0 0.35rem; } .page-header-stats .page-subtitle-modern { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; margin: 0; } .page-header-stats .header-stats { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 0.75rem; } .page-header-stats .stat-item { align-items: center; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; display: flex; gap: 0.65rem; min-width: 0; padding: 0.7rem 0.85rem; } .page-header-stats .stat-icon { align-items: center; color: var(--primary-color); display: flex; flex: 0 0 auto; justify-content: center; } .page-header-stats .stat-content { display: flex; flex-direction: column; min-width: 0; } .page-header-stats .stat-value { color: var(--text-primary); font-size: 0.95rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .page-header-stats .stat-label { color: var(--text-secondary); font-size: 0.7rem; font-weight: 600; letter-spacing: 0; margin-top: 0.1rem; text-transform: none; } .layout-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .layout-grid { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); } } @media (max-width: 768px) { .tool-page { padding: 1rem; } .page-header-stats { align-items: flex-start; margin-bottom: 1.5rem; padding: 1.25rem; } .page-header-stats .header-stats { flex: 1 1 100%; } .page-header-stats .stat-item { flex: 1 1 9rem; } .page-header-stats .page-title-modern { font-size: 1.5rem; } } @media (max-width: 480px) { .page-header-stats .header-content { align-items: flex-start; } .page-header-stats .header-stats { flex-direction: column; } } /* --- static/css/utilities/utilities.css --- */ /* Utility Classes */ /* Spacing */ .m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-5 { margin: 1.25rem; } .m-6 { margin: 1.5rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } /* Flexbox utilities */ .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-baseline { align-items: baseline; } .align-stretch { align-items: stretch; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-baseline { align-self: baseline; } .align-self-stretch { align-self: stretch; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-fill { flex: 1 1 auto; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } /* Display utilities */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } /* Position utilities */ .position-static { position: static; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } /* Text utilities */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .font-weight-light { font-weight: 300; } .font-weight-normal { font-weight: 400; } .font-weight-medium { font-weight: 500; } .font-weight-semibold { font-weight: 600; } .font-weight-bold { font-weight: 700; } .text-primary { color: var(--primary-color); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success-color); } .text-warning { color: var(--warning-color); } .text-danger { color: var(--danger-color); } .text-muted { color: var(--text-muted); } .text-white { color: var(--text-white); } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } /* Width and height utilities */ .w-25 { width: 25%; } .w-50 { width: 50%; } .w-75 { width: 75%; } .w-100 { width: 100%; } .w-auto { width: auto; } .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .h-auto { height: auto; } .mw-100 { max-width: 100%; } .mh-100 { max-height: 100%; } /* Border utilities */ .border { border: 1px solid var(--border-color); } .border-0 { border: 0; } .border-top { border-top: 1px solid var(--border-color); } .border-bottom { border-bottom: 1px solid var(--border-color); } .border-left { border-left: 1px solid var(--border-color); } .border-right { border-right: 1px solid var(--border-color); } .border-primary { border-color: var(--primary-color); } .border-secondary { border-color: var(--secondary-color); } .border-success { border-color: var(--success-color); } .border-warning { border-color: var(--warning-color); } .border-danger { border-color: var(--danger-color); } .rounded { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-circle { border-radius: 50%; } .rounded-0 { border-radius: 0; } /* Shadow utilities */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-none { box-shadow: none; } /* Background utilities */ .bg-primary { background-color: var(--primary-color); color: var(--text-white); } .bg-secondary { background-color: var(--secondary-color); color: var(--text-white); } .bg-success { background-color: var(--success-color); color: var(--text-white); } .bg-warning { background-color: var(--warning-color); color: var(--text-primary); } .bg-danger { background-color: var(--danger-color); color: var(--text-white); } .bg-light { background-color: var(--bg-color); } .bg-dark { background-color: var(--text-primary); color: var(--text-white); } .bg-white { background-color: var(--surface-color); } .bg-transparent { background-color: transparent; } /* Responsive utilities */ @media (max-width: 576px) { .d-sm-none { display: none; } .d-sm-block { display: block; } .d-sm-inline { display: inline; } .d-sm-inline-block { display: inline-block; } .d-sm-flex { display: flex; } .text-sm-left { text-align: left; } .text-sm-center { text-align: center; } .text-sm-right { text-align: right; } } @media (min-width: 576px) { .d-sm-none { display: none; } .d-sm-block { display: block; } .d-sm-inline { display: inline; } .d-sm-inline-block { display: inline-block; } .d-sm-flex { display: flex; } } @media (min-width: 768px) { .d-md-none { display: none; } .d-md-block { display: block; } .d-md-inline { display: inline; } .d-md-inline-block { display: inline-block; } .d-md-flex { display: flex; } } @media (min-width: 992px) { } /* Simple helpers */ .is-hidden { display: none !important; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .d-lg-none { display: none; } .d-lg-block { display: block; } .d-lg-inline { display: inline; } .d-lg-inline-block { display: inline-block; } .d-lg-flex { display: flex; } } @media (min-width: 1200px) { .d-xl-none { display: none; } .d-xl-block { display: block; } .d-xl-inline { display: inline; } .d-xl-inline-block { display: inline-block; } .d-xl-flex { display: flex; } } /* Print utilities */ @media print { .d-print-none { display: none; } .d-print-block { display: block; } .d-print-inline { display: inline; } .d-print-inline-block { display: inline-block; } } /* --- static/css/utilities/animations.css --- */ /* Animation Utilities */ /* Fade animations */ .fade-in { animation: fadeIn 0.3s ease-in-out; } .fade-out { animation: fadeOut 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Slide animations */ .slide-in-left { animation: slideInLeft 0.3s ease-out; } .slide-in-right { animation: slideInRight 0.3s ease-out; } .slide-in-up { animation: slideInUp 0.3s ease-out; } .slide-in-down { animation: slideInDown 0.3s ease-out; } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInUp { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInDown { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Scale animations */ .scale-in { animation: scaleIn 0.2s ease-out; } .scale-out { animation: scaleOut 0.2s ease-in; } @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; } } /* Bounce animation */ .bounce { animation: bounce 0.6s ease-in-out; } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translateY(0); } 40%, 43% { transform: translateY(-30px); } 70% { transform: translateY(-15px); } 90% { transform: translateY(-4px); } } /* Pulse animation */ .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Shake animation */ .shake { animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Spin animation */ .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Loading animations */ .loading-dots::after { content: ''; animation: loadingDots 1.5s infinite; } @keyframes loadingDots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } } /* Progress bar animation */ .progress-animated .progress-bar-fill { animation: progressFill 1s ease-out; } @keyframes progressFill { from { width: 0%; } to { width: var(--progress-width, 100%); } } /* Hover animations */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .hover-scale { transition: transform 0.2s ease; } .hover-scale:hover { transform: scale(1.02); } .hover-glow { transition: box-shadow 0.2s ease; } .hover-glow:hover { box-shadow: 0 0 20px rgba(var(--primary-rgba), 0.3); } /* Transition utilities */ .transition-all { transition: all 0.2s ease; } .transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .transition-transform { transition: transform 0.2s ease; } .transition-shadow { transition: box-shadow 0.2s ease; } /* Animation delays */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-500 { animation-delay: 0.5s; } .delay-1000 { animation-delay: 1s; } /* Animation durations */ .duration-100 { animation-duration: 0.1s; } .duration-200 { animation-duration: 0.2s; } .duration-300 { animation-duration: 0.3s; } .duration-500 { animation-duration: 0.5s; } .duration-1000 { animation-duration: 1s; } /* Animation timing functions */ .ease-linear { animation-timing-function: linear; } .ease-in { animation-timing-function: ease-in; } .ease-out { animation-timing-function: ease-out; } .ease-in-out { animation-timing-function: ease-in-out; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── View Transitions API ─────────────────────────────────── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fade-out 150ms ease-out; } ::view-transition-new(root) { animation: fade-in 150ms ease-in; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Disable view transitions when user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* --- static/css/utilities/responsive.css --- */ /* Responsive Design Utilities */ /* Container */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .container-sm { max-width: 576px; } .container-md { max-width: 768px; } .container-lg { max-width: 992px; } .container-xl { max-width: 1200px; } .container-fluid { width: 100%; max-width: none; } /* Grid system */ .row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; } .col { flex: 1; padding: 0 0.5rem; } .col-auto { flex: 0 0 auto; width: auto; padding: 0 0.5rem; } .col-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-3 { flex: 0 0 25%; width: 25%; } .col-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-6 { flex: 0 0 50%; width: 50%; } .col-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-9 { flex: 0 0 75%; width: 75%; } .col-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-12 { flex: 0 0 100%; width: 100%; } /* Responsive breakpoints */ @media (min-width: 576px) { .container { padding: 0 1.5rem; } .col-sm-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-sm-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-sm-3 { flex: 0 0 25%; width: 25%; } .col-sm-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-sm-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-sm-6 { flex: 0 0 50%; width: 50%; } .col-sm-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-sm-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-sm-9 { flex: 0 0 75%; width: 75%; } .col-sm-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-sm-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-sm-12 { flex: 0 0 100%; width: 100%; } .col-sm-auto { flex: 0 0 auto; width: auto; } } @media (min-width: 768px) { .container { padding: 0 2rem; } .col-md-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-md-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-md-3 { flex: 0 0 25%; width: 25%; } .col-md-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-md-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-md-6 { flex: 0 0 50%; width: 50%; } .col-md-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-md-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-md-9 { flex: 0 0 75%; width: 75%; } .col-md-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-md-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-md-12 { flex: 0 0 100%; width: 100%; } .col-md-auto { flex: 0 0 auto; width: auto; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-lg-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-lg-3 { flex: 0 0 25%; width: 25%; } .col-lg-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-lg-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-lg-6 { flex: 0 0 50%; width: 50%; } .col-lg-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-lg-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-lg-9 { flex: 0 0 75%; width: 75%; } .col-lg-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-lg-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-lg-12 { flex: 0 0 100%; width: 100%; } .col-lg-auto { flex: 0 0 auto; width: auto; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-xl-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-xl-3 { flex: 0 0 25%; width: 25%; } .col-xl-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-xl-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-xl-6 { flex: 0 0 50%; width: 50%; } .col-xl-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-xl-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-xl-9 { flex: 0 0 75%; width: 75%; } .col-xl-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-xl-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-xl-12 { flex: 0 0 100%; width: 100%; } .col-xl-auto { flex: 0 0 auto; width: auto; } } /* ── XXL breakpoint (≥1400px) ── */ @media (min-width: 1400px) { .col-xxl-1 { flex: 0 0 8.333333%; width: 8.333333%; } .col-xxl-2 { flex: 0 0 16.666667%; width: 16.666667%; } .col-xxl-3 { flex: 0 0 25%; width: 25%; } .col-xxl-4 { flex: 0 0 33.333333%; width: 33.333333%; } .col-xxl-5 { flex: 0 0 41.666667%; width: 41.666667%; } .col-xxl-6 { flex: 0 0 50%; width: 50%; } .col-xxl-7 { flex: 0 0 58.333333%; width: 58.333333%; } .col-xxl-8 { flex: 0 0 66.666667%; width: 66.666667%; } .col-xxl-9 { flex: 0 0 75%; width: 75%; } .col-xxl-10 { flex: 0 0 83.333333%; width: 83.333333%; } .col-xxl-11 { flex: 0 0 91.666667%; width: 91.666667%; } .col-xxl-12 { flex: 0 0 100%; width: 100%; } .col-xxl-auto { flex: 0 0 auto; width: auto; } } /* Responsive text */ @media (max-width: 576px) { .text-responsive-sm { font-size: 0.875rem; } .text-responsive-base { font-size: 0.875rem; } .text-responsive-lg { font-size: 1rem; } .text-responsive-xl { font-size: 1.125rem; } } @media (min-width: 576px) and (max-width: 768px) { .text-responsive-sm { font-size: 0.875rem; } .text-responsive-base { font-size: 1rem; } .text-responsive-lg { font-size: 1.125rem; } .text-responsive-xl { font-size: 1.25rem; } } @media (min-width: 768px) { .text-responsive-sm { font-size: 0.875rem; } .text-responsive-base { font-size: 1rem; } .text-responsive-lg { font-size: 1.125rem; } .text-responsive-xl { font-size: 1.25rem; } } /* Responsive spacing */ @media (max-width: 576px) { .p-responsive { padding: 0.75rem; } .m-responsive { margin: 0.75rem; } .mt-responsive { margin-top: 0.75rem; } .mb-responsive { margin-bottom: 0.75rem; } } @media (min-width: 576px) { .p-responsive { padding: 1rem; } .m-responsive { margin: 1rem; } .mt-responsive { margin-top: 1rem; } .mb-responsive { margin-bottom: 1rem; } } /* Responsive flexbox */ @media (max-width: 576px) { .flex-responsive-column { flex-direction: column; } .flex-responsive-row { flex-direction: row; } } @media (min-width: 576px) { .flex-responsive-column { flex-direction: row; } .flex-responsive-row { flex-direction: row; } } /* Hide/show utilities */ @media (max-width: 576px) { .hidden-xs { display: none; } .visible-xs { display: block; } } @media (min-width: 576px) and (max-width: 768px) { .hidden-sm { display: none; } .visible-sm { display: block; } } @media (min-width: 768px) and (max-width: 992px) { .hidden-md { display: none; } .visible-md { display: block; } } @media (min-width: 992px) and (max-width: 1200px) { .hidden-lg { display: none; } .visible-lg { display: block; } } @media (min-width: 1200px) { .hidden-xl { display: none; } .visible-xl { display: block; } } /* Responsive images */ .img-fluid { max-width: 100%; height: auto; } @media (max-width: 576px) { .img-responsive-xs { max-width: 100%; height: auto; } } /* Responsive tables */ @media (max-width: 768px) { .table-responsive-xs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-xs .table { min-width: 600px; } } /* Responsive cards */ @media (max-width: 576px) { .card-group-responsive { display: block; } .card-group-responsive .card { margin-bottom: 1rem; } } @media (min-width: 576px) { .card-group-responsive { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } /* ── Container XXL ── */ .container-xxl { max-width: 1600px; margin: 0 auto; padding: 0 1rem; } /* ── XXL visibility ── */ @media (min-width: 1400px) { .hidden-xxl { display: none; } .visible-xxl { display: block; } } /* --- static/css/utilities/mobile.css --- */ /* ============================================== Mobile Responsiveness — Liro Cortes Breakpoints: 1024px (tablet), 768px (mobile), 480px (small) ============================================== */ /* ---- HEADER MOBILE ---- */ /* Tablet: compact header actions */ @media (max-width: 1024px) { .app-header { padding: 0 1rem; } .header-actions { gap: 0.5rem; } /* Hide text labels on header buttons, show only icons */ .header-actions .btn span, .btn-header-secondary span, .btn-header-primary span, .btn-logout span { display: none; } /* Keep text visible on login/register — they have no icon */ .header-actions .btn-login span, .header-actions .btn-register span { display: inline; } /* Compact icon-only buttons */ .header-actions .btn, .btn-header-secondary, .btn-header-primary, .btn-logout { padding: 0.5rem; min-width: 36px; min-height: 36px; justify-content: center; } /* Login/register keep text padding */ .btn-login, .btn-register { padding: 0.5rem 1rem; min-width: auto; } /* Hide user email, show only avatar */ .user-email { display: none; } .user-info-badge { padding: 0.4rem; gap: 0; } /* Smaller brand text */ .header-brand h3 { font-size: 1.1rem; } /* Hide sidebar toggle on landing page — no sidebar there */ .landing-page .toggle-sidebar-btn { display: none; } } /* Phone: even more compact */ @media (max-width: 768px) { .app-header { padding: 0 0.75rem; height: var(--header-height); } .header-left { gap: 0.75rem; } .header-brand .brand-icon { font-size: 1.35rem; } .header-brand h3 { font-size: 1rem; } .toggle-sidebar-btn { width: 36px; height: 36px; padding: 0.4rem; } .header-actions { gap: 0.35rem; } .header-theme-toggle { min-width: 36px; min-height: 36px; justify-content: center; padding: 0.4rem; } .header-theme-toggle__label { display: none; } /* Hide non-essential header buttons on phone — keep Créditos + Sair */ .header-actions .btn-header-secondary { display: none; } .user-avatar-mini { width: 28px; height: 28px; font-size: 0.75rem; border-radius: 6px; } } /* Small phone: minimal header */ @media (max-width: 480px) { .header-brand h3 { display: none; } .header-brand .brand-icon { font-size: 1.5rem; } .header-actions .btn-header-primary span, .btn-logout span { display: none; } /* Always keep login/register text visible */ .header-actions .btn-login span, .header-actions .btn-register span { display: inline; } .btn-login, .btn-register { padding: 0.45rem 0.85rem; font-size: 0.8rem; } } /* ---- MOBILE BOTTOM NAVIGATION ---- */ /* Replaces the hidden header buttons on phone (<=768px) */ .mobile-bottom-nav { display: none; } @media (max-width: 768px) { .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-color); border-top: 1px solid var(--border-color); z-index: 200; padding: 0.35rem 0; padding-bottom: max(0.35rem, env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); justify-content: space-around; align-items: center; } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--text-secondary); font-size: 0.65rem; font-weight: 600; padding: 0.35rem 0.5rem; border-radius: 8px; transition: color 0.2s ease; flex: 1; max-width: 80px; /* Reset for