/* === RESET & BASE === */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Default Theme (Dark Violet) — wird von themes.css ueberschrieben */ :root { --color-primary: #8b5cf6; --color-primary-dark: #7c3aed; --color-primary-light: rgba(139, 92, 246, 0.1); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --color-favorite: #fbbf24; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-primary); } h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 600; } /* === THEME DEFINITIONEN === */ /* 5 Themes: Dark Violet (Default), Dark Blue, Linear, Light Violet, Light Blue */ /* Aktives Theme: data-theme Attribut auf */ /* --- DARK VIOLET (Default) --- */ [data-theme="dark-violet"], :root { --color-primary: #8b5cf6; --color-primary-dark: #7c3aed; --color-primary-light: rgba(139, 92, 246, 0.1); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); --login-gradient: linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%); } /* --- DARK BLUE --- */ [data-theme="dark-blue"] { --color-primary: #3b82f6; --color-primary-dark: #2563eb; --color-primary-light: rgba(59, 130, 246, 0.1); --color-bg: #0a0a12; --color-surface: #131320; --color-surface-hover: #1e1e30; --color-text: #f0f0ff; --color-text-muted: #9898b0; --color-text-light: #686880; --color-border: #1e1e30; --color-border-light: #16162a; --login-gradient: linear-gradient(135deg, #0a0a12 0%, #0a1020 50%, #0a0a12 100%); } /* --- LINEAR (wie Linear.app) --- */ [data-theme="linear"] { --color-primary: #5e6ad2; --color-primary-dark: #4e5bc2; --color-primary-light: rgba(94, 106, 210, 0.1); --color-bg: #1a1a1e; --color-surface: #1f1f23; --color-surface-hover: #2c2c32; --color-text: #eeeeef; --color-text-muted: #8a8a93; --color-text-light: #5c5c66; --color-border: #2e2e33; --color-border-light: #26262b; --color-success: #4dba87; --color-success-light: rgba(77, 186, 135, 0.12); --color-error: #e5484d; --color-error-light: rgba(229, 72, 77, 0.12); --color-warning: #f5a623; --color-warning-light: rgba(245, 166, 35, 0.12); --shadow: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 2px 8px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --login-gradient: linear-gradient(135deg, #1a1a1e 0%, #1e1e25 50%, #1a1a1e 100%); } /* --- DARK SILVER (Ultra-Dark, farbloser Silber-Akzent) --- */ [data-theme="dark-silver"] { --color-primary: #a0a0ab; --color-primary-dark: #8a8a95; --color-primary-light: rgba(160, 160, 171, 0.08); --color-bg: #050506; --color-surface: #0e0e10; --color-surface-hover: #18181b; --color-text: #e4e4e7; --color-text-muted: #7a7a85; --color-text-light: #4e4e58; --color-border: #1c1c20; --color-border-light: #131316; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.10); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.10); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.10); --shadow: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 3px 8px rgba(0,0,0,0.6); --shadow-lg: 0 10px 30px rgba(0,0,0,0.7); --login-gradient: linear-gradient(135deg, #050506 0%, #0a0a0d 50%, #050506 100%); } /* --- LIGHT VIOLET --- */ [data-theme="light-violet"] { --color-primary: #7c3aed; --color-primary-dark: #6d28d9; --color-primary-light: #ede9fe; --color-bg: #fafaf9; --color-surface: #ffffff; --color-surface-hover: #f5f3ff; --color-text: #1c1917; --color-text-muted: #78716c; --color-text-light: #a8a29e; --color-border: #e7e5e4; --color-border-light: #f5f5f4; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); --login-gradient: linear-gradient(135deg, #faf5ff 0%, #fafaf9 50%, #f5f3ff 100%); } /* --- LIGHT BLUE --- */ [data-theme="light-blue"] { --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light: #eff6ff; --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-hover: #f0f7ff; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-light: #94a3b8; --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); --login-gradient: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #e0f2fe 100%); } /* Light-Theme Alert-Borders */ [data-theme="light-violet"] .alert--success, [data-theme="light-blue"] .alert--success { border-color: #a7f3d0; } [data-theme="light-violet"] .alert--error, [data-theme="light-blue"] .alert--error { border-color: #fecaca; } [data-theme="light-violet"] .alert--warning, [data-theme="light-blue"] .alert--warning { border-color: #fde68a; } /* Theme-Switcher Vorschau-Dots */ .theme-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; display: inline-block; } .theme-dot:hover { transform: scale(1.2); } .theme-dot--active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); } .theme-dot--dark-violet { background: #8b5cf6; } .theme-dot--dark-blue { background: #3b82f6; } .theme-dot--linear { background: linear-gradient(135deg, #5e6ad2, #8a8a93); } .theme-dot--dark-silver { background: linear-gradient(135deg, #333, #999); } .theme-dot--light-violet { background: linear-gradient(135deg, #fafaf9 50%, #7c3aed 50%); } .theme-dot--light-blue { background: linear-gradient(135deg, #f8fafc 50%, #2563eb 50%); } /* === Icon System (SVG inline, Linear-Style) === */ /* Monochrome, 1px stroke, currentColor */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 20px; height: 20px; } /* Icons als background-image SVG (currentColor via filter) */ .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* === Navigation === */ .nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 2rem; display: flex; align-items: center; height: 60px; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .nav-brand a { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); text-decoration: none; margin-right: 2.5rem; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 0.25rem; align-items: center; flex: 1; } .nav-link { color: var(--color-text-muted); text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; transition: all 0.15s; } .nav-link:hover { background: var(--color-bg); color: var(--color-text); } .nav-link--active { background: var(--color-primary-light); color: var(--color-primary); } .nav-link--right { margin-left: auto; } .nav-profile { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.25rem 0.75rem; border-radius: var(--radius); transition: background 0.15s; } .nav-profile:hover { background: var(--color-surface-hover); } .nav-profile--active { background: var(--color-surface-hover); } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .nav-profile-info { display: flex; flex-direction: column; line-height: 1.2; } .nav-profile-name { color: var(--color-text); font-size: 0.8rem; font-weight: 600; } .nav-profile-role { color: var(--color-text-muted); font-size: 0.65rem; } .nav-link--logout { margin-left: auto; color: var(--color-text-muted); } .nav-link--logout:hover { color: var(--color-error); background: var(--color-error-light); } /* === Main Content === */ .main { padding: 2rem; width: 100%; } .container { max-width: 1400px; } .container--narrow { max-width: 640px; } .container--wide { max-width: 1400px; } /* === Page Header === */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .page-header h1 { margin-bottom: 0; } .page-actions { display: flex; gap: 0.5rem; align-items: center; } /* === Breadcrumb === */ .breadcrumb { font-size: 0.8rem; color: var(--color-text-muted); } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--color-primary); } /* === Alerts === */ .alert { padding: 0.875rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .alert--success { background: var(--color-success-light); color: var(--color-success); border: 1px solid rgba(52, 211, 153, 0.2); } .alert--error { background: var(--color-error-light); color: var(--color-error); border: 1px solid rgba(248, 113, 113, 0.2); } .alert--warning { background: var(--color-warning-light); color: var(--color-warning); border: 1px solid rgba(251, 191, 36, 0.2); } /* Flash Toast (fixed bottom center) */ .flash-toast-container { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; } .flash-toast { padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg); pointer-events: auto; animation: flash-in 0.3s ease, flash-out 0.3s ease 3.5s forwards; max-width: 500px; } .flash-toast--success { background: var(--color-success); color: #fff; } .flash-toast--error { background: var(--color-error); color: #fff; } .flash-toast--warning { background: var(--color-warning); color: #000; } @keyframes flash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes flash-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } } /* === Cards === */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); transition: box-shadow 0.2s; } .card:hover { box-shadow: var(--shadow-md); } .card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text); } .card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; } /* === Section Cards (Bildgenerator-Style) === */ .section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; box-shadow: var(--shadow); } .section-card-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .section-card-header h2 { font-size: 0.95rem; font-weight: 700; margin: 0; } .section-card-body { padding: 1rem; } /* === Module Grid === */ .module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .module-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; text-decoration: none; color: var(--color-text); transition: all 0.2s; box-shadow: var(--shadow); } .module-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .module-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; } .module-card p { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; } /* === Product Cards with Previews === */ .product-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: all 0.2s; box-shadow: var(--shadow); overflow: hidden; } .product-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .product-previews { padding: 0.5rem; height: 220px; } .product-preview-grid { display: flex; flex-wrap: wrap; gap: 4px; border-radius: var(--radius); overflow: hidden; height: 100%; align-content: stretch; } .product-preview-grid img { object-fit: cover; display: block; border-radius: 4px; } /* 1 Bild: volle Breite */ .pc-1 img { width: 100%; height: 100%; } /* 2 Bilder nebeneinander */ .pc-2 img { width: calc(50% - 2px); height: 100%; } /* 3 Bilder nebeneinander */ .pc-3 img { width: calc(33.33% - 3px); height: 100%; } /* 4 Bilder: 2x2 */ .pc-4 img { width: calc(50% - 2px); height: calc(50% - 2px); } /* Kein Bild: Platzhalter */ .product-previews-empty { height: 220px; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.8rem; margin: 0.5rem; border-radius: var(--radius); } .product-card-info { padding: 1rem; padding-top: 0; margin-top: auto; } .product-card-info h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.375rem; } /* === Image Grid === */ .image-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; } .image-thumb { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: all 0.15s; } .image-thumb:hover { border-color: var(--color-primary); transform: scale(1.02); } .image-thumb--favorite { border-color: var(--color-favorite); } .image-thumb-wrap { position: relative; display: inline-block; } .image-thumb-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; padding: 3px 8px; border-radius: 0 0 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .favorite-star { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; background: var(--color-favorite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* === Favorites Section === */ .favorites-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); } .favorites-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .favorites-header h2 { font-size: 0.95rem; font-weight: 700; margin: 0; } /* === Module Card (Bildgenerator) === */ .gen-module { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 1rem 1rem 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; } .gen-module .gen-form { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); } .gen-module-generations { flex: 1; } /* Generierte Bilder: 3 nebeneinander */ .gen-module-generations .image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .gen-module-generations .image-grid .gen-thumb-wrap, .gen-module-generations .image-grid .gen-loading { width: 100%; height: auto; aspect-ratio: 1; } .gen-module-generations .image-grid .gen-thumb-wrap .image-thumb { width: 100% !important; height: 100% !important; aspect-ratio: 1; } .gen-module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .gen-module-header h3 { font-size: 0.95rem; font-weight: 700; margin: 0; } .gen-module-actions { display: flex; gap: 0.375rem; } .gen-module-images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; border-top: 1px solid var(--color-border-light); padding-top: 0.5rem; } .gen-module-img-section label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); display: block; margin-bottom: 0.375rem; } .gen-module-img-section img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); } .gen-module-generations { margin-top: 0rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border-light); } .gen-module-gen-header { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .gen-module-gen-header span { color: var(--color-primary); font-weight: 500; } /* === Generate Form === */ .gen-form { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--color-border-light); } .gen-form textarea.auto-grow { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); resize: none; overflow: hidden; min-height: 44px; } .gen-form textarea.auto-grow:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } /* === Forms === */ .form-group { margin-bottom: 1.125rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--color-text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; background: var(--color-surface); color: var(--color-text); transition: border-color 0.15s, box-shadow 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .form-group textarea { min-height: 44px; resize: none; overflow: hidden; } /* === Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); } .btn--outline { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); } .btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn--danger { background: var(--color-error); color: #fff; } .btn--danger:hover { background: #dc2626; } .btn--success { background: var(--color-success); color: #fff; } .btn--success:hover { background: #059669; } .btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; } .btn--full { width: 100%; } .btn--icon { padding: 0.5rem; width: 36px; height: 36px; border-radius: var(--radius); background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); } .btn--icon:hover { background: var(--color-border-light); color: var(--color-text); } /* === Login === */ .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: var(--login-gradient, linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%)); } .login-box { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-lg); } .login-title { text-align: center; margin-bottom: 2rem; color: var(--color-primary); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } /* === Tags/Badges === */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.625rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; } .badge--success { background: var(--color-success-light); color: var(--color-success); } .badge--warning { background: var(--color-warning-light); color: var(--color-warning); } .badge--error { background: var(--color-error-light); color: var(--color-error); } .badge--muted { background: #f3f4f6; color: var(--color-text-muted); } /* === Tables === */ table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 0.75rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } td { padding: 0.75rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--color-border-light); } tr:hover td { background: var(--color-surface-hover); } /* === Utilities === */ .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 0.8rem; } .text-xs { font-size: 0.7rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } h1 { font-size: 1.375rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dark); } /* === File Input === */ .file-input-wrap { position: relative; display: inline-flex; align-items: center; } .file-input-wrap input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-input-label { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s; } .file-input-label:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* === Upload Area === */ .upload-area { border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--color-text-muted); transition: all 0.15s; cursor: pointer; position: relative; } .upload-area:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .upload-area input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* === Image Hover Upload === */ .img-hover-upload, .img-ref-select { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; } .img-hover-upload img, .img-ref-select img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); display: block; } .img-placeholder { width: 100%; aspect-ratio: 1; background: var(--color-bg); border-radius: var(--radius); border: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.75rem; } .img-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; opacity: 0; transition: opacity 0.2s; border-radius: var(--radius); cursor: pointer; z-index: 1; } .img-hover-upload:hover .img-hover-overlay, .img-ref-select:hover .img-hover-overlay { opacity: 1; } /* Vorlage: File-Input ueber dem Overlay */ .img-hover-file { z-index: 3; } /* Referenz: Overlay ist klickbar, oeffnet Popup */ .img-hover-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } /* Image Reference Popup */ .img-ref-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 1000; min-width: 320px; max-width: 500px; } .img-ref-popup-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; } .img-ref-popup-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; } .img-ref-popup button[type="submit"] { transition: all 0.15s; border-radius: var(--radius) !important; overflow: hidden; border-width: 2px !important; } .img-ref-popup button[type="submit"]:hover { border-color: var(--color-primary) !important; } /* Image Download Button */ .image-download-btn { position: absolute; bottom: 24px; right: 4px; width: 26px; height: 26px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; opacity: 0; transition: opacity 0.2s; } .image-thumb-wrap:hover .image-download-btn { opacity: 1; } /* === Generation Loading Spinner === */ .gen-loading { width: 80px; height: 80px; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .gen-spinner { width: 24px; height: 24px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: gen-spin 0.8s linear infinite; } @keyframes gen-spin { to { transform: rotate(360deg); } } /* === Generation Thumbnails === */ .gen-thumb-wrap { position: relative; display: inline-block; cursor: pointer; } .gen-thumb-wrap .gen-fav-btn, .gen-thumb-wrap .gen-del-btn { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: opacity 0.15s; z-index: 5; } .gen-thumb-wrap:hover .gen-fav-btn, .gen-thumb-wrap:hover .gen-del-btn { opacity: 1; } .gen-fav-btn { top: 4px; left: 4px; background: rgba(0,0,0,0.5); color: #9ca3af; } .gen-fav-btn:hover, .gen-fav-btn.active { background: var(--color-favorite); color: #fff; } .gen-del-btn { top: 4px; right: 4px; background: rgba(220,38,38,0.8); color: #fff; font-size: 14px; } .gen-del-btn:hover { background: var(--color-error); } /* === Lightbox === */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 2001; } .lightbox-img { max-width: 90vw; max-height: 75vh; object-fit: contain; border-radius: var(--radius); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-nav:hover { background: rgba(255,255,255,0.3); } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-thumbs { display: flex; gap: 8px; margin-top: 16px; } .lightbox-thumbs img { width: 200px; height: 200px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; opacity: 0.6; transition: all 0.15s; } .lightbox-thumbs img:hover { opacity: 1; } .lightbox-thumbs img.active { border-color: #fff; opacity: 1; } .lightbox-actions { display: flex; gap: 8px; margin-top: 12px; } .lightbox-actions button { padding: 6px 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; } .lightbox-actions button:hover { background: rgba(255,255,255,0.25); } /* === Custom Confirm Dialog === */ .confirm-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 3000; display: flex; align-items: center; justify-content: center; } .confirm-dialog-box { background: var(--color-surface); border-radius: var(--radius); padding: 1.5rem; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; } .confirm-dialog-box p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1.25rem; } .confirm-dialog-box .confirm-btns { display: flex; gap: 0.5rem; justify-content: center; } /* Lightbox Favorite indicator */ .lightbox-thumbs img.is-fav { border-color: var(--color-favorite); box-shadow: 0 0 0 2px var(--color-favorite); } /* === SetCard Module Items === */ .setcard-mod-item { position: relative; } .setcard-mod-remove { position: absolute; top: 6px; right: 6px; background: rgba(220,38,38,0.85); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; padding: 0; z-index: 5; } .setcard-mod-item:hover .setcard-mod-remove { opacity: 1; } .setcard-mod-remove:hover { background: rgba(220,38,38,1); } /* === Editable Module Header === */ .mod-name-display { cursor: default; } .mod-name-input { font-size: 0.95rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.25rem 0.5rem; background: var(--color-bg); color: var(--color-text); width: 100%; margin: 0; text-align: left; -webkit-user-select: text; user-select: text; } .mod-name-input:focus { outline: none; border-color: var(--color-primary); } /* === Module Drag Handle === */ .mod-drag-handle { color: var(--color-text-light); cursor: grab; font-size: 0.9rem; padding: 0 0.25rem; user-select: none; transition: color 0.15s; } .mod-drag-handle:hover { color: var(--color-text-muted); } .gen-module.dragging { opacity: 0.4; } .gen-module.drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); } /* === Module Icons === */ .mod-icon { color: #9ca3af; cursor: pointer; transition: color 0.15s; display: flex; align-items: center; background: none; border: none; padding: 2px; } .mod-icon--settings:hover { color: var(--color-primary); } .mod-icon--delete:hover { color: var(--color-error); } /* === Module Inline Settings === */ .mod-settings { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; max-height: 0; opacity: 0; padding: 0 0; border-top: 1px solid var(--color-border-light); margin-top: 0; } .mod-settings.open { max-height: 2000px; opacity: 1; padding: 1rem 0; margin-top: 0.75rem; display: block; } /* === Referenz-Bild Lösch-Button === */ .ref-delete-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(220,38,38,0.85); color: #fff; border: none; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; z-index: 5; } .ref-img-wrap:hover .ref-delete-btn { opacity: 1; } .ref-delete-btn:hover { background: rgba(220,38,38,1); } /* === Referenz Upload Box === */ .ref-upload-box { width: 160px; height: 160px; position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; } .ref-upload-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .ref-upload-placeholder { width: 100%; height: 100%; border: 2px dashed var(--color-border); background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-light); transition: all 0.15s; } .ref-upload-box:hover .ref-upload-placeholder, .ref-upload-box.drag-over .ref-upload-placeholder { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* === CRM Layout with Sidebar === */ .crm-layout { display: flex; min-height: calc(100vh - 60px); margin: -2rem; } .crm-sidebar { width: 200px; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s; } .crm-sidebar.collapsed { width: 52px; } .crm-sidebar.collapsed .crm-nav-label { display: none; } .crm-sidebar.collapsed .crm-sidebar-toggle { transform: rotate(180deg); } .crm-sidebar-inner { flex: 1; padding: 0.75rem 0.5rem; } .crm-nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; margin-bottom: 0.25rem; } .crm-nav-item:hover { background: var(--color-bg); color: var(--color-text); } .crm-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); } .crm-nav-icon { font-size: 1rem; flex-shrink: 0; } .crm-sidebar-toggle { background: none; border: none; border-top: 1px solid var(--color-border); padding: 0.5rem; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; transition: transform 0.2s; } .crm-sidebar-toggle:hover { color: var(--color-text); } .crm-content { flex: 1; padding: 2rem; min-width: 0; } .crm-sub-nav { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; } .crm-sub-link { padding: 0.4rem 1rem; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: all 0.15s; } .crm-sub-link:hover { background: var(--color-bg); color: var(--color-text); } .crm-sub-link.active { background: var(--color-primary); color: #fff; } /* === CRM Price List Table === */ .pl-table { width: 100%; border-collapse: collapse; } .pl-table th { text-align: left; padding: 0.5rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); white-space: nowrap; } .pl-table td { padding: 0.125rem 0.25rem; border-bottom: 1px solid var(--color-border-light); } .pl-cell { width: 100%; border: none; background: transparent; padding: 0.375rem 0.4rem; font-size: 0.85rem; color: var(--color-text); } .pl-cell:focus { outline: none; background: var(--color-primary-light); border-radius: 4px; } .pl-cell--name { font-weight: 500; } .pl-cell--price { text-align: right; font-variant-numeric: tabular-nums; } .pl-table tr:hover { background: var(--color-bg); } .pl-desc-row td { border-bottom: 1px solid var(--color-border-light) !important; } .pl-cell--desc { font-size: 0.75rem; color: var(--color-text-muted); border: none; background: transparent; width: 100%; padding: 0.125rem 0.4rem; } .pl-cell--desc:focus { outline: none; background: var(--color-primary-light); border-radius: 4px; } /* === CRM Activity === */ .crm-activity { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); } .crm-activity:hover .act-delete { opacity: 1 !important; } .crm-activity-icon { font-size: 1rem; } /* === CRM Compact Detail === */ .crm-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; } .crm-field label { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 0.125rem; } .crm-field input, .crm-field select { width: 100%; padding: 0.4rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); } .crm-field input:focus, .crm-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .crm-field-group-line { margin-top: 0.625rem; margin-bottom: 0.375rem; border-top: 1px solid var(--color-border-light); padding-top: 0.5rem; } .crm-field-group-line span { font-size: 0.65rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* === CRM Column Toggle === */ .col-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; user-select: none; } .col-toggle:hover { border-color: var(--color-primary); } .col-toggle.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .col-toggle input { display: none; } /* === Modal Overlay === */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; color: var(--color-text); } /* === Quote Builder === */ .crm-content--fullwidth { padding: 0 !important; } .quote-builder .page-header { padding: 1rem 2rem; margin: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .quote-builder-grid { display: grid; grid-template-columns: 1fr 320px; min-height: calc(100vh - 130px); } .quote-document { padding: 2rem; background: var(--color-bg); overflow-y: auto; } .quote-document-inner { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.5rem 2.5rem 1.5rem; max-width: 820px; min-height: 1122px; margin: 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: relative; display: flex; flex-direction: column; } .quote-document-inner .qd-footer { margin-top: auto; } .qd-company-header { font-size: 0.65rem; color: var(--color-text); padding-top: 2rem; padding-bottom: 0.25rem; margin-bottom: 0.25rem; } .qd-top-row { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; } .qd-customer-block { flex: 1; min-width: 0; } .qd-customer-empty { } .qb-search-wrap { display: flex; gap: 0.5rem; align-items: center; } .qb-search-wrap input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; } .qb-search-wrap input:focus { outline: none; border-color: var(--color-primary); } .qb-search-results { position: absolute; z-index: 10; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); max-height: 250px; overflow-y: auto; width: 350px; margin-top: 0.25rem; } .qb-search-result { padding: 0.625rem 0.75rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--color-border-light); } .qb-search-result:hover { background: var(--color-bg); } .qb-search-result:last-child { border-bottom: none; } .qb-search-result-name { font-weight: 500; } .qb-search-result-sub { font-size: 0.75rem; color: var(--color-text-muted); } .qd-meta { flex-shrink: 0; } .qd-meta table { font-size: 0.8rem; } .qd-meta td { padding: 0.15rem 0; border-bottom: none; } .qd-meta td:first-child { color: var(--color-text); padding-right: 1rem; white-space: nowrap; } .qd-meta td:last-child { font-weight: 400; } .qd-meta-input { border: none; background: transparent; font-size: 0.8rem; font-weight: 500; color: var(--color-text); padding: 0.15rem 0.25rem; width: 110px; border-radius: 4px; } .qd-meta-input:focus { outline: none; background: var(--color-primary-light); } .qd-title { font-size: 1.3rem; margin: 0 0 0.5rem; font-weight: 700; } .qd-billing { font-size: 0.8rem; font-weight: 400; margin-bottom: 0.75rem; } .qd-billing strong { font-weight: 700; } .qd-notice { font-size: 0.8rem; color: var(--color-text); margin-bottom: 1.25rem; line-height: 1.5; } .text-right, .qd-table th.text-right { text-align: right; } .qd-status-select { padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; appearance: auto; } .qd-status-select--draft { background: var(--color-bg); color: var(--color-text-muted); } .qd-status-select--sent { background: #fff3cd; color: #856404; } .qd-status-select--accepted { background: #d4edda; color: #155724; } .qd-status-select--rejected { background: #f8d7da; color: #721c24; } .qd-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 1.5rem; } .qd-table th { text-align: left; padding: 0.5rem 0.4rem; font-size: 0.7rem; font-weight: 700; border-bottom: 2px solid var(--color-text); white-space: nowrap; } .qd-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-border-light); vertical-align: top; } .qd-table .qd-item-name { font-weight: 500; } .qd-table .qd-item-desc { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.15rem; } .qd-table input[type="number"], .qd-table input.qb-edit { width: 60px; border: 1px solid var(--color-border-light); border-radius: 4px; padding: 0.3rem 0.4rem; font-size: 0.8rem; text-align: center; background: var(--color-bg); font-variant-numeric: tabular-nums; } .qd-table input.qb-edit { width: 100%; text-align: left; } .qd-table input[type="number"]:focus, .qd-table input.qb-edit:focus { outline: none; border-color: var(--color-primary); background: #fff; } .qd-table .qd-remove { background: none; border: none; color: var(--color-error); cursor: pointer; font-size: 1rem; padding: 0; opacity: 0.5; } .qd-table .qd-remove:hover { opacity: 1; } .qd-totals { width: 60%; margin-left: 40%; margin-bottom: 1.5rem; } .qd-totals-row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.85rem; } .qd-totals-row--bold { font-weight: 700; font-size: 0.85rem; border-top: 2px solid var(--color-text); padding-top: 0.5rem; } .qd-terms { font-size: 0.75rem; line-height: 1.7; margin-bottom: 1rem; } .qd-terms strong { font-weight: 700; } .qd-notes-section { margin-bottom: 1rem; } .qd-notes-input { width: 100%; border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; font-size: 0.8rem; resize: none; background: transparent; color: var(--color-text); } .qd-notes-input:focus { outline: none; border-color: var(--color-primary); border-style: solid; } .qd-footer { display: grid; grid-template-columns: 1fr 1.4fr 1fr 0.7fr; gap: 0.75rem; font-size: 9px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 1rem; line-height: 1.5; } .qd-footer > div:last-child { text-align: right; } /* Quote Sidebar */ .quote-sidebar { background: var(--color-surface); border-left: 1px solid var(--color-border); padding: 1.25rem; overflow-y: auto; max-height: calc(100vh - 130px); position: sticky; top: 0; } .qs-header { margin-bottom: 0.5rem; } .qs-header h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; } .qs-header select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; background: #fff; } .qs-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 1rem; } .qs-category { margin-bottom: 1rem; } .qs-category-name { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; padding: 0.4rem 0.5rem; background: var(--color-bg); border-radius: var(--radius); margin-bottom: 0.25rem; } .qs-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.5rem; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .qs-item:hover { background: var(--color-primary-light); } .qs-item-name { font-size: 0.85rem; font-weight: 500; } .qs-item-nr { font-size: 0.7rem; color: var(--color-text-muted); } .qs-item-price { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Quantity Modal Tier List */ .qb-tier-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.375rem; } .qb-tier-item { padding: 0.375rem 0.5rem; border: 1px solid var(--color-border-light); border-radius: var(--radius); font-size: 0.75rem; text-align: center; } .qb-tier-item strong { display: block; font-size: 0.85rem; } /* === AI Chat Widget === */ .ai-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .ai-widget-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: transform 0.2s; display: flex; align-items: center; justify-content: center; } .ai-widget-btn:hover { transform: scale(1.1); } .ai-widget-panel { display: none; position: absolute; bottom: 70px; right: 0; width: 380px; height: 520px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 1px solid var(--color-border); flex-direction: column; overflow: hidden; } .ai-widget--open .ai-widget-panel { display: flex; } .ai-widget--open .ai-widget-btn { display: none; } .ai-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--color-primary); color: #fff; font-weight: 600; font-size: 0.9rem; } .ai-widget-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: 0.8; } .ai-widget-close:hover { opacity: 1; } .ai-widget-messages { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .ai-widget-welcome { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted); font-size: 0.85rem; } .ai-widget-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; } .ai-widget-msg--user { background: var(--color-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .ai-widget-msg--ai { background: var(--color-bg); color: var(--color-text); align-self: flex-start; border-bottom-left-radius: 4px; } .ai-widget-msg--typing { background: var(--color-bg); color: var(--color-text-muted); align-self: flex-start; font-style: italic; } .ai-widget-input { display: flex; gap: 0.375rem; padding: 0.625rem; border-top: 1px solid var(--color-border); } .ai-widget-input input { flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 0.875rem; font-size: 0.85rem; outline: none; } .ai-widget-input input:focus { border-color: var(--color-primary); } .ai-widget-input button { background: var(--color-primary); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } /* === Messenger === */ .msg-layout { display: flex; height: calc(100vh - 60px); margin: -2rem; } .msg-sidebar { width: 240px; background: #1a1d21; color: #d1d2d3; display: flex; flex-direction: column; flex-shrink: 0; } .msg-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #2e3338; } .msg-sidebar-header h2 { margin: 0; font-size: 1rem; color: #fff; } .msg-new-channel-btn { background: none; border: 1px solid #555; color: #d1d2d3; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; } .msg-new-channel-btn:hover { background: #2e3338; } .msg-channel-list { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .msg-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 1rem; color: #8b8d91; font-weight: 600; } .msg-channel-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; color: #8b8d91; text-decoration: none; font-size: 0.85rem; cursor: pointer; } .msg-channel-item:hover { background: #2e3338; color: #d1d2d3; } .msg-channel-item.active { background: #1264a3; color: #fff; border-radius: 0; } .msg-channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-unread { background: #e01e5a; color: #fff; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; font-weight: 700; } .msg-chat { flex: 1; display: flex; flex-direction: column; background: #fff; } .msg-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); } .msg-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .msg-message { display: flex; gap: 0.625rem; padding: 0.375rem 0; } .msg-message:hover { background: var(--color-bg); border-radius: var(--radius); } .msg-avatar { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .msg-body { flex: 1; min-width: 0; } .msg-meta { display: flex; gap: 0.5rem; align-items: baseline; } .msg-meta strong { font-size: 0.85rem; } .msg-time { font-size: 0.7rem; color: var(--color-text-muted); } .msg-content { font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; } .msg-system { justify-content: center; } .msg-system-text { font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; } .msg-input-area { padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); } /* === Kanban Board === */ .kanban-board { display: flex; gap: 0.75rem; overflow-x: auto; min-height: 500px; padding-bottom: 1rem; } .kanban-column { flex: 1; min-width: 220px; background: var(--color-bg); border-radius: var(--radius); display: flex; flex-direction: column; } .kanban-column-header { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.75rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .kanban-count { background: var(--color-border); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.7rem; } .kanban-cards { flex: 1; padding: 0 0.5rem 0.5rem; min-height: 100px; } .kanban-cards.drag-over { background: var(--color-primary-light); border-radius: var(--radius); } .kanban-card { background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius); padding: 0.625rem; margin-bottom: 0.5rem; cursor: grab; transition: box-shadow 0.15s, opacity 0.15s; } .kanban-card:hover { box-shadow: var(--shadow-md); } .kanban-card.dragging { opacity: 0.4; } .kanban-card-link { text-decoration: none; color: inherit; display: block; } .kanban-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .kanban-card-nr { font-size: 0.7rem; color: var(--color-text-muted); } .kanban-card-title { font-size: 0.85rem; font-weight: 500; line-height: 1.3; } .kanban-card-meta { display: flex; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.7rem; color: var(--color-text-muted); } /* === Landing Page === */ .lp { --lp-max: 1200px; color: var(--color-text); } .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; background: rgba(9,9,11,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); } .lp-logo { font-weight: 700; font-size: 1.15rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.03em; } .lp-logo span { color: var(--color-primary); } .lp-nav-links { display: flex; gap: 0.5rem; align-items: center; } .lp-nav-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); transition: color 0.15s; } .lp-nav-link:hover { color: var(--color-text); } .lp-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding: 6rem 2rem 4rem; } .lp-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(139,92,246,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(124,58,237,0.05) 0%, transparent 50%); animation: lp-glow 15s ease-in-out infinite alternate; } @keyframes lp-glow { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(-5%,3%) rotate(3deg); } } .lp-hero-content { position: relative; max-width: 720px; } .lp-hero h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 1.25rem; } .lp-hero h1 em { font-style: normal; background: linear-gradient(135deg, var(--color-primary), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-hero p { font-size: 1.15rem; color: var(--color-text-muted); line-height: 1.7; max-width: 540px; margin: 0 auto 2rem; } .lp-hero-cta { display: flex; gap: 0.75rem; justify-content: center; } .lp-btn { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; } .lp-btn--primary { background: var(--color-primary); color: #fff; } .lp-btn--primary:hover { background: var(--color-primary-dark); box-shadow: 0 0 30px rgba(139,92,246,0.3); } .lp-btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .lp-btn--outline:hover { border-color: var(--color-text-muted); background: rgba(255,255,255,0.03); } .lp-section { padding: 5rem 2rem; max-width: var(--lp-max); margin: 0 auto; } .lp-section-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem; text-align: center; } .lp-section-sub { font-size: 1rem; color: var(--color-text-muted); text-align: center; max-width: 600px; margin: 0 auto 3rem; line-height: 1.7; } .lp-grid { display: grid; gap: 1.25rem; } .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } .lp-grid--4 { grid-template-columns: repeat(4, 1fr); } .lp-grid--5 { grid-template-columns: repeat(5, 1fr); } .lp-card { background: rgba(24,24,27,0.6); backdrop-filter: blur(10px); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; transition: all 0.25s; } .lp-card:hover { border-color: rgba(139,92,246,0.2); background: rgba(30,30,34,0.8); transform: translateY(-2px); } .lp-card-icon { font-size: 1.75rem; margin-bottom: 0.75rem; } .lp-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .lp-card p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; } .lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; } .lp-step { position: relative; padding-top: 2.5rem; } .lp-step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .lp-step h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.375rem; } .lp-step p { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.6; } .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 3rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .lp-stat { text-align: center; } .lp-stat-value { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--color-primary), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-stat-label { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; } .lp-cta-banner { text-align: center; padding: 5rem 2rem; position: relative; } .lp-cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(139,92,246,0.06) 0%, transparent 70%); } .lp-cta-banner h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem; position: relative; } .lp-cta-banner p { color: var(--color-text-muted); margin-bottom: 2rem; position: relative; } .lp-footer { border-top: 1px solid var(--color-border); padding: 2rem; text-align: center; font-size: 0.8rem; color: var(--color-text-light); } .lp-footer a { color: var(--color-text-muted); text-decoration: none; margin: 0 0.75rem; } .lp-footer a:hover { color: var(--color-primary); } .lp-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border), transparent); margin: 0; } /* === Responsive === */ @media (max-width: 768px) { .nav { flex-wrap: wrap; height: auto; padding: 0.75rem 1rem; } .nav-links { flex-wrap: wrap; width: 100%; } .nav-link--logout { margin-left: 0; } .main { padding: 1rem; } .module-grid { grid-template-columns: 1fr 1fr; } .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .lp-hero h1 { font-size: 2.25rem; } .lp-grid--3, .lp-grid--4, .lp-grid--5 { grid-template-columns: 1fr; } .lp-steps { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .lp-stats { grid-template-columns: repeat(2, 1fr); } }