/* ========================================================================== SYNAPSENEWS - CSS DESIGN SYSTEM & TOKENS (Midnight Glassmorphism) ========================================================================== */ :root { /* Native controls (dropdown lists, date pickers, scrollbars) render dark */ color-scheme: dark; /* Colors */ --bg-dark: #0a0b10; --bg-popup: #12141e; --bg-card: rgba(18, 20, 32, 0.6); --bg-card-hover: rgba(26, 29, 46, 0.75); --border-color: rgba(255, 255, 255, 0.08); --border-focus: rgba(0, 242, 254, 0.5); --text-primary: #f1f3f9; --text-secondary: #9aa0b9; --text-muted: #626880; --primary-gradient: linear-gradient(135deg, #7f5af0 0%, #2cb67d 100%); --accent-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); --color-primary: #7f5af0; --color-accent: #2cb67d; --color-success: #2cb67d; --color-warning: #ffb830; --color-danger: #ff5470; --color-info: #00f2fe; /* Font weights & families */ --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Layout constraints */ --sidebar-width: 320px; --drawer-width: 440px; /* ── DESIGN-TOKENS (Baukasten) ───────────────────────────────────────────── Diese vier Werte steuern das gesamte Erscheinungsbild. Sie werden von der gewählten Vorlage gesetzt und im Customizer stufenlos überschrieben. */ --radius-base: 16px; /* Grundform aller Ecken */ --border-width: 1px; /* Stärke aller Rahmen */ --shadow-strength: 1; /* 0 = flach, 2 = schwebend */ --glow-strength: 0.35; /* Akzent-Leuchten */ --space-scale: 1; /* Dichte (von data-density) */ --motion-scale: 1; /* Bewegungstempo (von data-motion) */ /* Abgeleitete Radien — alles skaliert mit --radius-base */ --border-radius-lg: var(--radius-base); --border-radius-md: calc(var(--radius-base) * 0.625); --border-radius-sm: calc(var(--radius-base) * 0.375); --btn-radius: var(--border-radius-md); /* Abgestufte Tiefe */ --elev-1: 0 1px 2px rgba(0, 0, 0, calc(0.12 * var(--shadow-strength))); --elev-2: 0 6px 18px rgba(0, 0, 0, calc(0.22 * var(--shadow-strength))); --elev-3: 0 18px 44px rgba(0, 0, 0, calc(0.34 * var(--shadow-strength))); /* Bewegung */ --dur-fast: calc(140ms * var(--motion-scale)); --dur-base: calc(240ms * var(--motion-scale)); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* Shadows & Glassmorphic filters */ --blur-value: 20px; --box-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --box-shadow-hover: 0 12px 40px 0 rgba(0, 242, 254, 0.15); /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-fast: all 0.15s ease-out; } /* ========================================================================== DESIGN-SYSTEM — Form, Dichte, Tiefe, Bewegung Gesteuert über data-Attribute auf . Diese Schicht liegt ÜBER den Komponenten-Styles und überschreibt sie per höherer Spezifität (kein !important), sodass jede Komponente dem Baukasten folgt. ========================================================================== */ /* ── Button-Form ────────────────────────────────────────────────────────── */ html[data-btn-shape="sharp"] { --btn-radius: 3px; } html[data-btn-shape="soft"] { --btn-radius: calc(var(--radius-base) * 0.55); } html[data-btn-shape="round"] { --btn-radius: calc(var(--radius-base) * 0.95); } html[data-btn-shape="pill"] { --btn-radius: 999px; } html[data-btn-shape] .btn, html[data-btn-shape] .filter-btn, html[data-btn-shape] .preset-chip, html[data-btn-shape] .btn-close, html[data-btn-shape] .cockpit-chip { border-radius: var(--btn-radius); } /* ── Button-Stil ────────────────────────────────────────────────────────── */ html[data-btn-style="solid"] .btn.btn-primary { background: var(--color-primary); border: var(--border-width) solid var(--color-primary); } html[data-btn-style="gradient"] .btn.btn-primary { background: var(--primary-gradient); border: var(--border-width) solid transparent; } html[data-btn-style="outline"] .btn.btn-primary { background: transparent; border: var(--border-width) solid var(--color-primary); color: var(--color-primary); } html[data-btn-style="soft"] .btn.btn-primary { background: color-mix(in srgb, var(--color-primary) 16%, transparent); border: var(--border-width) solid color-mix(in srgb, var(--color-primary) 32%, transparent); color: var(--color-primary); } /* Akzent-Leuchten beim Hover — Stärke aus dem Token */ html[data-btn-style] .btn.btn-primary:hover { box-shadow: 0 0 calc(26px * var(--glow-strength)) color-mix(in srgb, var(--color-primary) 48%, transparent); } /* ── Dichte ─────────────────────────────────────────────────────────────── */ html[data-density="compact"] { --space-scale: 0.8; } html[data-density="normal"] { --space-scale: 1; } html[data-density="relaxed"] { --space-scale: 1.22; } html[data-density] .news-card { padding: calc(16px * var(--space-scale)); } html[data-density] .sp-card { padding: calc(16px * var(--space-scale)); } html[data-density] .filter-bar { padding: calc(12px * var(--space-scale)) calc(20px * var(--space-scale)); } html[data-density] .sb-widget-body.has-padding { padding: calc(12px * var(--space-scale)) calc(14px * var(--space-scale)); } html[data-density] .feed-grid { gap: calc(14px * var(--space-scale)); } /* ── Tiefe / Elevation ──────────────────────────────────────────────────── */ html[data-elevation="flat"] { --shadow-strength: 0; } html[data-elevation="subtle"] { --shadow-strength: 0.55; } html[data-elevation="raised"] { --shadow-strength: 1; } html[data-elevation="floating"] { --shadow-strength: 1.7; } html[data-elevation] .news-card, html[data-elevation] .sb-widget, html[data-elevation] .sp-card { box-shadow: var(--elev-2); } html[data-elevation] .modal, html[data-elevation] .detail-drawer { box-shadow: var(--elev-3); } html[data-elevation="flat"] .news-card, html[data-elevation="flat"] .sb-widget, html[data-elevation="flat"] .sp-card { box-shadow: none; } /* ── Oberfläche ─────────────────────────────────────────────────────────── */ html[data-surface="glass"] .glass-panel, html[data-surface="glass"] .news-card, html[data-surface="glass"] .sb-widget { background: var(--bg-card); backdrop-filter: blur(var(--blur-value)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-value)) saturate(140%); } html[data-surface="solid"] .glass-panel, html[data-surface="solid"] .news-card, html[data-surface="solid"] .sb-widget { background: var(--bg-popup); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-surface="outlined"] .glass-panel, html[data-surface="outlined"] .news-card, html[data-surface="outlined"] .sb-widget { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Rahmenstärke global aus dem Token */ html[data-surface] .news-card, html[data-surface] .sb-widget, html[data-surface] .sp-card, html[data-surface] .glass-panel { border-width: var(--border-width); border-style: solid; border-color: var(--border-color); } /* ── Bewegung ───────────────────────────────────────────────────────────── */ html[data-motion="none"] { --motion-scale: 0.001; } html[data-motion="subtle"] { --motion-scale: 1; } html[data-motion="lively"] { --motion-scale: 1.5; } html[data-motion="none"] *, html[data-motion="none"] *::before, html[data-motion="none"] *::after { transition: none !important; animation: none !important; } html[data-motion="lively"] .news-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } html[data-motion="lively"] .news-card:hover { transform: translateY(-3px); } html[data-motion="lively"] .btn:hover { transform: translateY(-1px); } /* Nutzer-Systemeinstellung respektieren */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ========================================================================== VORLAGE: AURORA PRO Redaktionelles Profi-Design. Kein Glas-Effekt, sondern geschichtete Flächen mit haarfeinen Kanten, einem inneren Lichtkantenverlauf und ruhiger Tiefe. Akzent (Indigo → Teal) wird sparsam und gezielt eingesetzt. ========================================================================== */ html.theme-aurora { --bg-dark: #0b0d13; --bg-popup: #12151d; --bg-card: #12151d; --bg-card-hover: #171b25; --border-color: rgba(148, 163, 184, 0.14); --border-focus: rgba(99, 102, 241, 0.65); --text-primary: #e9edf5; --text-secondary: #97a1b5; --text-muted: #5d6779; --color-primary: #6366f1; --color-accent: #14b8a6; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #f43f5e; --color-info: #38bdf8; --primary-gradient: linear-gradient(135deg, #6366f1 0%, #14b8a6 100%); --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%); --blur-value: 0px; --box-shadow-glass: var(--elev-2); --box-shadow-hover: var(--elev-3); } /* Ruhiger Aurora-Schimmer im Hintergrund — fixiert, sehr zurückhaltend */ html.theme-aurora body { background-color: #0b0d13; background-image: radial-gradient(1100px 520px at 18% -8%, rgba(99, 102, 241, 0.10), transparent 62%), radial-gradient(900px 460px at 88% 6%, rgba(20, 184, 166, 0.07), transparent 60%); background-attachment: fixed; } /* Flächen: obere Lichtkante + haarfeine Trennlinie statt Schlagschatten */ html.theme-aurora .news-card, html.theme-aurora .sb-widget, html.theme-aurora .sp-card, html.theme-aurora .glass-panel { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%); border-color: var(--border-color); } /* Karten reagieren mit Akzentkante statt Vergrößerung */ html.theme-aurora .news-card { transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } html.theme-aurora .news-card:hover { border-color: rgba(99, 102, 241, 0.38); background-color: var(--bg-card-hover); } /* Typografie: strengere Hierarchie, engere Laufweite bei Überschriften */ html.theme-aurora h1, html.theme-aurora h2, html.theme-aurora .section-title, html.theme-aurora .hero-title { letter-spacing: -0.022em; } html.theme-aurora .card-title { letter-spacing: -0.01em; font-weight: 650; } /* Präzise Eingabefelder mit klarem Fokus-Ring */ html.theme-aurora input, html.theme-aurora textarea, html.theme-aurora select { background: #0e1118; border: 1px solid var(--border-color); } html.theme-aurora input:focus, html.theme-aurora textarea:focus, html.theme-aurora select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16); outline: none; } /* Sidebar & Kopfzeile klar abgesetzt */ html.theme-aurora .app-sidebar, html.theme-aurora .header-bar { background: #0d1017; } /* Scrollbars dezent */ html.theme-aurora ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.18); } html.theme-aurora ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.30); } /* ========================================================================== LIGHT-THEME SHARED BASE Applied as second class (html[data-scheme="light"]) alongside light presets — generic component fixes so each light theme only defines its palette. ========================================================================== */ /* Native controls (dropdown option lists, date pickers) follow the theme. The base rule works for EVERY theme because it uses variables. */ select option { background: var(--bg-popup); color: var(--text-primary); } html[data-scheme="light"] { color-scheme: light; } html[data-scheme="light"] body { color: var(--text-primary); } html[data-scheme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); } html[data-scheme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); } html[data-scheme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); } /* Overlays & feedback surfaces */ html[data-scheme="light"] .modal-overlay { background: rgba(30, 34, 44, 0.35); } html[data-scheme="light"] .toast-notification { background: var(--bg-popup); border: 1px solid var(--border-color); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); } /* Subtle "lighter-than-bg" pills/hovers use white alpha in dark themes — flip to black alpha so they stay visible on light backgrounds. */ html[data-scheme="light"] .filter-btn:hover, html[data-scheme="light"] .ws-size-btn:hover, html[data-scheme="light"] .fctl-pgbtn:hover:not(:disabled), html[data-scheme="light"] .stab-btn:hover, html[data-scheme="light"] .auth-tab:hover, html[data-scheme="light"] .sidebar-tab:hover, html[data-scheme="light"] .back-btn:hover, html[data-scheme="light"] .user-action-btn:hover, html[data-scheme="light"] .health-action-btn:hover { background: rgba(0, 0, 0, 0.06); } html[data-scheme="light"] .glass-panel { background: var(--bg-card); border: 1px solid var(--border-color); backdrop-filter: blur(var(--blur-value)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur-value)) saturate(150%); } html[data-scheme="light"] input, html[data-scheme="light"] textarea, html[data-scheme="light"] select { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.14); color: var(--text-primary); } html[data-scheme="light"] input::placeholder, html[data-scheme="light"] textarea::placeholder { color: var(--text-muted); } html[data-scheme="light"] input:focus, html[data-scheme="light"] textarea:focus, html[data-scheme="light"] select:focus { background: rgba(0, 0, 0, 0.03); border-color: var(--border-focus); } html[data-scheme="light"] .app-sidebar, html[data-scheme="light"] .header-bar, html[data-scheme="light"] .sb-widget, html[data-scheme="light"] .sp-card, html[data-scheme="light"] .article-card, html[data-scheme="light"] .news-card, html[data-scheme="light"] .login-card, html[data-scheme="light"] .detail-drawer, html[data-scheme="light"] .sp-sidebar { background: var(--bg-card); border-color: var(--border-color); } html[data-scheme="light"] .main-content { background: transparent; } html[data-scheme="light"] .btn.btn-secondary { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: var(--text-primary); } html[data-scheme="light"] .btn.btn-secondary:hover { background: rgba(0, 0, 0, 0.09); } html[data-scheme="light"] .related-popup { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } html[data-scheme="light"] .sp-nav-item:hover, html[data-scheme="light"] .sp-nav-item.active { background: rgba(0, 0, 0, 0.06); } /* ========================================================================== BACKGROUND TYPES (controlled via html[data-bg] attribute) ========================================================================== */ #bg-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: none; } html[data-bg="gradient"] body { background-color: transparent; background-image: linear-gradient( var(--bg-gradient-angle, 135deg), var(--bg-gradient-from, #0a0b10) 0%, var(--bg-gradient-to, #1a1028) 100% ) !important; background-attachment: fixed; } html[data-bg="mesh"] body { background-color: var(--bg-dark, #0a0b10); background-image: radial-gradient(ellipse at 15% 30%, rgba(127,90,240,0.18) 0%, transparent 50%), radial-gradient(ellipse at 85% 70%, rgba(0,242,254,0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(44,182,125,0.08) 0%, transparent 50%) !important; background-attachment: fixed; } /* Pattern overlays on #bg-overlay */ html[data-pattern="dots"] #bg-overlay { background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 24px 24px; } html[data-pattern="grid"] #bg-overlay { background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 40px 40px; } html[data-pattern="diamonds"] #bg-overlay { background-image: linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%); background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0; } html[data-pattern="lines"] #bg-overlay { background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0.025), rgba(255,255,255,0.025) 1px, transparent 1px, transparent 8px ); } /* ========================================================================== RESET & FOUNDATIONS ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-dark); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.6; overflow-x: hidden; height: 100vh; background-image: radial-gradient(circle at 10% 20%, rgba(127, 90, 240, 0.08) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(0, 242, 254, 0.06) 0%, transparent 50%); background-attachment: fixed; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ========================================================================== LAYOUT MODULES ========================================================================== */ /* Prevent horizontal page scroll on all screens */ body { overflow-x: hidden; } .app-container { display: flex; flex-direction: column; height: 100vh; max-width: 1600px; margin: 0 auto; padding: 16px; gap: 16px; overflow-x: hidden; } .app-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-radius: var(--border-radius-lg); background: var(--bg-card); backdrop-filter: blur(var(--blur-value)); border: 1px solid var(--border-color); box-shadow: var(--box-shadow-glass); gap: 12px; position: relative; z-index: 600; } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ── Gruppen-Vorschau (Admin) ──────────────────────────────────────────────── */ .preview-switcher { display: flex; align-items: center; gap: 5px; } .preview-group-select { font-size: 11px; font-family: var(--font-body); padding: 5px 8px; background: rgba(127, 90, 240, 0.1); border: 1px solid rgba(127, 90, 240, 0.25); border-radius: 6px; color: var(--text-secondary); cursor: pointer; outline: none; transition: border-color 0.15s; } .preview-group-select:focus, .preview-group-select:hover { border-color: rgba(127, 90, 240, 0.5); color: var(--text-primary); } .preview-group-select option { background: var(--bg-popup); color: var(--text-primary); } .preview-banner { display: flex; align-items: center; gap: 10px; padding: 7px 20px; background: rgba(255, 198, 0, 0.07); border-bottom: 1px solid rgba(255, 198, 0, 0.18); font-size: 12px; color: var(--text-secondary); flex-shrink: 0; } .preview-banner strong { color: #ffc600; font-weight: 700; } .preview-banner-note { opacity: 0.55; font-size: 11px; } .preview-exit-btn { margin-left: auto; display: flex; align-items: center; gap: 5px; background: rgba(255, 198, 0, 0.1); border: 1px solid rgba(255, 198, 0, 0.3); border-radius: 6px; color: #ffc600; font-size: 11px; font-family: var(--font-body); padding: 4px 10px; cursor: pointer; transition: background 0.15s; } .preview-exit-btn:hover { background: rgba(255, 198, 0, 0.2); } .app-main { display: flex; flex: 1; gap: 16px; overflow: hidden; position: relative; } .app-sidebar { width: var(--sidebar-width); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex-shrink: 0; } .app-content { flex: 1; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } /* ========================================================================== DASHBOARD PAGE (modularer Workspace als eigene App-Ebene) ========================================================================== */ .dashboard-page { flex-direction: column; gap: 0; padding: 16px; } .dashboard-body { flex: 1; overflow: hidden; position: relative; display: flex; } /* ========================================================================== MODULARER WORKSPACE ========================================================================== */ .workspace { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; gap: 14px; overflow-y: auto; align-content: start; padding-right: 2px; /* Scrollbar-Abstand */ } /* Spalten-Breiten */ .ws-col-1 { grid-column: span 1; } .ws-col-2 { grid-column: span 2; } .ws-col-3 { grid-column: span 3; } .ws-col-4 { grid-column: span 4; } /* ── Widget-Karte ────────────────────────────────────────────────────────── */ .ws-widget { background: var(--bg-card); backdrop-filter: blur(var(--blur-value)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-glass); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.2s; min-width: 0; } .ws-widget-locked { border-left: 2px solid rgba(255, 84, 112, 0.4); } /* ── Widget-Header ───────────────────────────────────────────────────────── */ .ws-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-color); gap: 8px; flex-shrink: 0; } .ws-widget-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; } .ws-widget-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-drag-handle { width: 14px; height: 14px; cursor: grab; color: var(--text-muted); opacity: 0; flex-shrink: 0; transition: opacity 0.15s; } .ws-drag-handle:active { cursor: grabbing; } .ws-widget-badge { font-size: 10px; font-weight: 600; color: var(--color-info); background: rgba(0, 242, 254, 0.1); border: 1px solid rgba(0, 242, 254, 0.2); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; } /* ── Widget-Body ─────────────────────────────────────────────────────────── */ .ws-widget-body { flex: 1; overflow: hidden; position: relative; } .ws-widget-body.has-padding { padding: 12px 14px; } /* Feed-Grid innerhalb des News-Feed-Widgets */ .ws-feed-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ── Widget-Aktionen (rechts im Header) ──────────────────────────────────── */ .ws-widget-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ws-edit-controls { display: none; align-items: center; gap: 6px; } .ws-size-btns { display: flex; gap: 2px; } .ws-size-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 4px; width: 20px; height: 20px; font-size: 10px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-family: var(--font-body); } .ws-size-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); } .ws-size-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .ws-remove-btn { background: transparent; border: 1px solid rgba(255,84,112,0.25); color: var(--color-danger); border-radius: 4px; width: 22px; height: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); padding: 0; } .ws-remove-btn:hover { background: rgba(255,84,112,0.15); } /* ── Edit-Mode ───────────────────────────────────────────────────────────── */ .workspace.ws-editing .ws-widget { box-shadow: 0 0 0 1px var(--color-primary), var(--box-shadow-glass); cursor: default; } .workspace.ws-editing .ws-drag-handle { opacity: 0.6; } .workspace.ws-editing .ws-drag-handle:hover { opacity: 1; } .workspace.ws-editing .ws-edit-controls { display: flex; } .ws-widget.ws-dragging { opacity: 0.35; } .ws-widget.ws-drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); } /* ── Katalog-Overlay ─────────────────────────────────────────────────────── */ .ws-catalog-overlay { position: absolute; top: 0; right: 0; z-index: 200; width: 420px; max-height: 100%; overflow-y: auto; } .ws-catalog-panel { border-radius: var(--border-radius-lg); overflow: hidden; } .ws-catalog-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; } .ws-catalog-grid { display: flex; flex-direction: column; gap: 0; } .ws-catalog-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-color); transition: background 0.15s; } .ws-catalog-item:last-child { border-bottom: none; } .ws-catalog-item:hover { background: rgba(255,255,255,0.03); } .ws-catalog-item-active { background: rgba(127,90,240,0.06); } .ws-catalog-item-icon { width: 36px; height: 36px; background: rgba(127,90,240,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); } .ws-catalog-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ws-catalog-item-info strong { font-size: 12px; color: var(--text-primary); } .ws-catalog-item-info span { font-size: 11px; color: var(--text-secondary); line-height: 1.4; } /* ── Statistiken-Widget ──────────────────────────────────────────────────── */ .ws-stats-row { display: flex; gap: 10px; margin-bottom: 4px; } .ws-stat-card { flex: 1; background: rgba(127,90,240,0.08); border: 1px solid rgba(127,90,240,0.2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .ws-stat-value { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1; } .ws-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ── Responsive: 2 Spalten unter 1100px ─────────────────────────────────── */ @media (max-width: 1100px) { .workspace { grid-template-columns: repeat(2, 1fr); } .ws-col-3, .ws-col-4 { grid-column: span 2; } } @media (max-width: 680px) { .workspace { grid-template-columns: 1fr; } .ws-col-1, .ws-col-2, .ws-col-3, .ws-col-4 { grid-column: span 1; } .ws-catalog-overlay { width: 100%; } } /* ========================================================================== UI UTILITIES & COMPONENTS ========================================================================== */ .glass-panel { background: var(--bg-card); backdrop-filter: blur(var(--blur-value)); -webkit-backdrop-filter: blur(var(--blur-value)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-glass); transition: var(--transition-smooth); } .glass-panel:hover { border-color: rgba(255, 255, 255, 0.12); } /* Logo Area */ .logo-area { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 44px; height: 44px; border-radius: var(--border-radius-md); background: var(--primary-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 15px rgba(127, 90, 240, 0.4); } .logo-area h1 { font-size: 22px; font-weight: 800; } .subtitle { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-top: -2px; } .gradient-text { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: var(--border-radius-md); border: 1px solid transparent; cursor: pointer; transition: var(--transition-fast); } .btn-primary { background: var(--accent-gradient); color: #000; font-weight: 700; box-shadow: 0 0 15px rgba(0, 242, 254, 0.2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 242, 254, 0.4); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--border-radius-sm); } .btn-full { width: 100%; } .btn-icon { padding: 10px; aspect-ratio: 1; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .badge-warning { background: rgba(255, 184, 48, 0.1); color: var(--color-warning); border-color: rgba(255, 184, 48, 0.2); } .badge-success { background: rgba(44, 182, 125, 0.1); color: var(--color-success); border-color: rgba(44, 182, 125, 0.2); } .badge-danger { background: rgba(255, 84, 112, 0.1); color: var(--color-danger); border-color: rgba(255, 84, 112, 0.2); } /* Pulse Dot */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; animation: pulse-animation 2s infinite; } @keyframes pulse-animation { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 184, 48, 0.4); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 184, 48, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 184, 48, 0); } } /* Spinner Icon */ .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================================== SIDEBAR & DATA VIZ ========================================================================== */ .sidebar-card { padding: 18px; } .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .card-header h3 { font-size: 15px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .card-header h3 i { color: var(--color-info); width: 16px; height: 16px; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .stat-box { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px; text-align: center; } .stat-val { display: block; font-family: var(--font-title); font-size: 20px; font-weight: 700; color: var(--text-primary); } .stat-lbl { font-size: 11px; color: var(--text-secondary); } /* Mini custom horizontal chart */ .chart-container { margin-top: 14px; } .chart-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; } .category-chart { display: flex; flex-direction: column; gap: 8px; } .chart-row { display: flex; align-items: center; gap: 8px; font-size: 11px; } .chart-row--clickable { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: 0 -4px; transition: background 0.15s; } .chart-row--clickable:hover { background: rgba(255,255,255,0.05); } .chart-row--clickable:hover .chart-lbl { color: var(--text-primary); } .chart-empty { font-size: 11px; color: var(--text-tertiary, rgba(255,255,255,0.3)); text-align: center; padding: 8px 0; } .chart-lbl { width: 75px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-bar-bg { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; } .chart-bar-fill { height: 100%; background: var(--accent-gradient); border-radius: 3px; transition: width 0.5s ease-out; } .chart-val { width: 20px; text-align: right; font-weight: 600; color: var(--text-primary); } /* ========================================================================== SOURCES PANEL – Quellenkatalog (Admin) & Abonnement-Auswahl (User) ========================================================================== */ /* Gesperrte Ansicht für Neuling */ .source-locked-msg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; text-align: center; color: var(--text-muted); font-size: 12px; } /* Admin-Header mit "Quelle hinzufügen"-Button */ .source-admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } /* User-Header mit Beschreibungstext */ .source-user-header { margin-bottom: 10px; } .source-section-label { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* Persönliche Quellen — Eingabeformular */ .psrc-add-form { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; } .psrc-add-form input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--text-primary); font-size: 12px; padding: 6px 10px; outline: none; box-sizing: border-box; transition: var(--transition-fast); } .psrc-add-form input::placeholder { color: var(--text-muted); } .psrc-add-form input:focus { border-color: var(--border-focus); box-shadow: 0 0 8px rgba(0, 242, 254, 0.15); } /* Inline-Formular zum Hinzufügen (Admin) */ .source-add-form { padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; } .source-add-form .input-group input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 7px 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 12px; outline: none; transition: var(--transition-fast); } .source-add-form .input-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 8px rgba(0, 242, 254, 0.15); } /* Katalog-Liste */ .source-list { display: flex; flex-direction: column; gap: 5px; padding-right: 2px; } /* Einzelne Quelle */ .source-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); transition: var(--transition-fast); gap: 8px; } .source-item:hover { background: rgba(255, 255, 255, 0.04); } .source-item.source-item-subbed { border-color: rgba(0, 242, 254, 0.25); background: rgba(0, 242, 254, 0.03); } .source-item-left { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; overflow: hidden; } .source-sub-toggle { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-fast); color: var(--text-muted); } .source-sub-toggle.subbed { border-color: var(--color-success); background: rgba(44, 182, 125, 0.15); color: var(--color-success); } .source-item-info { overflow: hidden; flex: 1; } .source-item-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .source-item-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .source-item-url { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .source-ai-badge { font-size: 9px; font-weight: 700; color: var(--color-info); background: rgba(0, 242, 254, 0.08); border: 1px solid rgba(0, 242, 254, 0.15); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; } .source-admin-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── Nutzer: Eigene Quellen ──────────────────────────────────────────────────── */ .user-sources-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .user-sources-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .user-source-limit-badge { font-size: 10px; color: var(--text-secondary); background: rgba(127, 90, 240, 0.1); border: 1px solid rgba(127, 90, 240, 0.2); border-radius: 4px; padding: 1px 6px; } .user-source-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .user-source-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); gap: 6px; } .user-source-item-name { font-size: 11px; color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-link-tiny { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--color-primary); font-size: 11px; cursor: pointer; padding: 3px 0; opacity: 0.7; transition: opacity 0.15s; } .btn-link-tiny:hover { opacity: 1; } .user-source-form { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .source-input-sm { font-size: 11px; padding: 5px 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); width: 100%; box-sizing: border-box; outline: none; font-family: var(--font-body); } .source-input-sm:focus { border-color: var(--color-primary); } /* ── Stock Intelligence (Portfolio Widget) ───────────────────────────────── */ .stock-intel-container { margin-top: 10px; padding-top: 10px; } .stock-intel-container:empty { display: none; } .stock-intel-header { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; padding-top: 10px; border-top: 1px solid var(--border-color); } .stock-intel-card { background: rgba(255,255,255,.03); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); margin-bottom: 6px; overflow: hidden; } .stock-intel-card-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; user-select: none; } .stock-intel-card-head:hover { background: rgba(255,255,255,.04); } .stock-intel-ticker { font-size: 11px; font-weight: 700; font-family: monospace; color: var(--color-primary); letter-spacing: .03em; } .si-sentiment { font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600; flex-shrink: 0; } .si-pos { background: rgba(44,182,125,.15); color: #2cb67d; border: 1px solid rgba(44,182,125,.3); } .si-neg { background: rgba(229,62,62,.13); color: #fc8181; border: 1px solid rgba(229,62,62,.25); } .si-neu { background: rgba(255,255,255,.07); color: var(--text-muted); border: 1px solid var(--border-color); } .stock-intel-preview { font-size: 10px; color: var(--text-secondary); padding: 0 10px 7px; margin: 0; line-height: 1.5; } .stock-intel-detail { border-top: 1px solid var(--border-color); background: rgba(0,0,0,.15); padding: 10px; } .stock-intel-full { font-size: 11px; color: var(--text-primary); line-height: 1.6; margin: 0 0 8px; } .si-articles-label { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 5px; } .si-article-list { display: flex; flex-direction: column; gap: 3px; } .si-article-item { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: var(--border-radius-sm); background: rgba(255,255,255,.03); cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; } .si-article-item:hover { background: rgba(255,255,255,.07); border-color: var(--border-color); } .si-article-title { font-size: 11px; color: var(--text-primary); line-height: 1.4; } .si-article-source { font-size: 10px; color: var(--text-muted); } /* Legacy input-group (noch in Portfolio/Tags-Tab) */ .input-group input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 12px; color: #fff; font-family: var(--font-body); font-size: 12px; outline: none; transition: var(--transition-fast); } .input-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 10px rgba(0, 242, 254, 0.15); } /* Alter btn-delete-source wird noch von anderen Stellen genutzt */ .btn-delete-source { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .btn-delete-source:hover { color: var(--color-danger); background: rgba(255, 84, 112, 0.1); } /* ========================================================================== FILTERS ========================================================================== */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 12px 20px; } .filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filter-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .filter-buttons { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; /* Verhindert, dass die Filterleiste kollabiert, solange noch nichts geladen ist */ min-height: 26px; } /* Kategorie ohne Artikel: bleibt sichtbar (Layout stabil), nur gedimmt. */ .filter-btn--empty:not(.active) { opacity: 0.38; } .filter-btn--empty:not(.active):hover { opacity: 0.75; } /* Zähler bei 0: reserviert den Platz, bleibt aber unsichtbar → keine Breitenänderung und damit kein Umbruch-Sprung der Filterleiste. */ .filter-count--ghost { visibility: hidden; } .filter-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 12px; font-size: 12px; border-radius: 20px; cursor: pointer; font-family: var(--font-body); transition: var(--transition-fast); } .filter-btn-icon { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.7; } .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 10px; font-weight: 700; line-height: 1; margin-left: 1px; } .filter-btn.active .filter-count { background: rgba(255, 255, 255, 0.22); color: #fff; } .filter-btn-mr.active { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.5); color: #10b981; font-weight: 600; box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } .filter-btn-mr.active .filter-count { background: rgba(16, 185, 129, 0.25); color: #10b981; } .filter-btn-heatmap.active { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.45); color: #818cf8; font-weight: 600; box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); } .filter-btn:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); } .filter-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; box-shadow: 0 0 10px rgba(127, 90, 240, 0.3); } /* ── Quellen-Filter-Button (mit Favicon) ──────────────────────────────────── */ .filter-btn-src { display: flex; align-items: center; gap: 5px; padding: 4px 10px; } /* Nur im Auswahl-Modus die nicht gewählten Quellen dimmen; sonst neutral. */ .src-select-mode .filter-btn-src:not(.active) { opacity: 0.5; } .filter-btn-src:not(.active):hover { opacity: 1; } /* Speichern-Button (eigene Kategorie) — kompakt, nur Icon */ .filter-btn-save { padding: 4px 8px; color: var(--color-accent); } .filter-btn-save .filter-btn-icon { margin: 0; } .filter-src-icon { width: 13px; height: 13px; border-radius: 2px; object-fit: contain; flex-shrink: 0; } .src-unread-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 9px; font-weight: 700; text-align: center; margin-left: 3px; vertical-align: middle; } .filter-select { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 20px; padding: 6px 12px; font-size: 12px; font-family: var(--font-body); outline: none; cursor: pointer; } /* ========================================================================== FEED CONTROLS BAR ========================================================================== */ .feed-controls-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 8px 16px; min-height: 44px; } .fctl-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fctl-right { display: flex; align-items: center; gap: 8px; } .fctl-today-badge { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: rgba(127, 90, 240, 0.12); border: 1px solid rgba(127, 90, 240, 0.25); border-radius: 20px; padding: 4px 10px; white-space: nowrap; } .fctl-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; padding: 0 6px; border-left: 1px solid var(--border-color); } .fctl-pagination { display: flex; align-items: center; gap: 4px; } .fctl-pgbtn { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); padding: 0; flex-shrink: 0; } .fctl-pgbtn:hover:not(:disabled) { background: var(--accent-blue, #3b82f6); color: var(--text-primary); border-color: transparent; } .fctl-pgbtn:disabled { opacity: 0.3; cursor: not-allowed; } .fctl-pgnum { font-size: 12px; color: var(--text-secondary); min-width: 44px; text-align: center; display: inline-flex; align-items: center; gap: 4px; } .fctl-pg-input { width: 42px; padding: 2px 4px; text-align: center; font-size: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); -moz-appearance: textfield; } .fctl-pg-input::-webkit-outer-spin-button, .fctl-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fctl-pg-input:focus { outline: 2px solid var(--accent-blue); border-color: var(--accent-blue); } .fctl-pg-sep { color: var(--text-muted); font-size: 11px; } .feed-bottom-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; } .feed-bottom-pagination .fctl-pgbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 6px 14px; width: auto; } .feed-bottom-pagination .fctl-pgnum { font-size: 13px; } /* ========================================================================== FEED GRID & CARDS ========================================================================== */ .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-content: start; /* verhindert, dass Cards in der Höhe gestreckt werden */ } .news-card { display: flex; flex-direction: column; padding: 16px; background: var(--bg-card); backdrop-filter: blur(var(--blur-value)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-glass); cursor: pointer; transition: var(--transition-smooth); position: relative; overflow: hidden; } .news-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: var(--transition-fast); } .news-card:hover { transform: translateY(-4px); border-color: rgba(0, 242, 254, 0.25); box-shadow: var(--box-shadow-hover); background: var(--bg-card-hover); } .news-card.sentiment-positive::before { background: var(--color-success); } .news-card.sentiment-negative::before { background: var(--color-danger); } .news-card.sentiment-neutral::before { background: var(--text-muted); } .news-card.sentiment-bahnbrechend::before { background: linear-gradient(90deg, #f97316, #eab308); } .news-card.sentiment-bahnbrechend { border-color: rgba(249, 115, 22, 0.3); } /* Sentiment badge in card header */ .card-sentiment-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .card-sentiment-badge.badge-positiv { background: rgba(46, 213, 115, 0.12); color: var(--color-success); border: 1px solid rgba(46, 213, 115, 0.25); } .card-sentiment-badge.badge-negativ { background: rgba(255, 71, 87, 0.12); color: var(--color-danger); border: 1px solid rgba(255, 71, 87, 0.25); } .card-sentiment-badge.badge-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.1); } .card-sentiment-badge.badge-bahnbrechend { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.35); animation: pulse-badge 2s ease-in-out infinite; } @keyframes pulse-badge { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0); } } .card-sentiment-badge.badge-pending { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); padding: 4px 7px; } .card-badge-spinner { display: inline-block; width: 8px; height: 8px; border: 1.5px solid rgba(155, 170, 210, 0.2); border-top-color: rgba(155, 170, 210, 0.7); border-radius: 50%; animation: card-spin 1s linear infinite; } @keyframes card-spin { to { transform: rotate(360deg); } } .card-portfolio-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; font-family: var(--font-mono, monospace); padding: 2px 5px; border-radius: 3px; background: rgba(127, 90, 240, 0.15); color: #c4b5fd; border: 1px solid rgba(127, 90, 240, 0.3); letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .card-portfolio-badge:hover { background: rgba(127,90,240,0.28); border-color: rgba(127,90,240,0.6); } .card-portfolio-score { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(99,102,241,0.18); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); } .card-portfolio-person { background:rgba(167,139,250,0.15);border-color:rgba(167,139,250,0.3);color:#c4b5fd; } .ptm-reason-popup { position: absolute; z-index: 9999; background: var(--card-bg, #1a1a2e); border: 1px solid rgba(127,90,240,0.4); border-radius: 8px; padding: 8px 12px; max-width: 220px; box-shadow: 0 6px 24px rgba(0,0,0,0.55); pointer-events: none; } .ptm-reason-popup strong { display: block; font-size: 11px; font-family: var(--font-mono, monospace); color: #c4b5fd; margin-bottom: 3px; } .ptm-reason-popup span { font-size: 11px; color: var(--text-secondary); line-height: 1.4; } .portfolio-cockpit { padding: 8px 16px 6px; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .cockpit-inner { display:flex;align-items:center;gap:6px;flex-wrap:wrap; } .cockpit-label { color:var(--text-muted);font-size:11px;margin-right:4px; } .cockpit-chip { display:inline-flex;align-items:center;gap:5px; padding:3px 8px;border-radius:6px; background:rgba(255,255,255,0.05);border:1px solid var(--border-color); cursor:pointer;font-size:11px;transition:background 0.15s; } .cockpit-chip:hover { background:rgba(255,255,255,0.1); } .cockpit-ticker { font-weight:700;color:var(--text-primary); } .cockpit-count { font-size:10px;color:var(--text-muted); } .cockpit-sent { font-weight:600;font-size:10px; } .psent-chart-wrap { display:flex;flex-direction:column;gap:12px;padding:4px 0; } .psent-stock { display:flex;align-items:center;gap:10px; } .psent-ticker { font-weight:700;font-size:12px;color:var(--text-primary);min-width:52px; } .psent-bars { display:flex;align-items:flex-end;gap:2px;height:40px;flex:1; } .psent-bar-wrap { flex:1;height:100%;display:flex;align-items:flex-end;cursor:default; } .psent-bar { width:100%;border-radius:2px 2px 0 0;min-height:3px;transition:opacity 0.15s; } .psent-bar--none { height:3px;background:rgba(255,255,255,0.08); } .psent-bar-wrap:hover .psent-bar { opacity:0.8; } .person-tag { display:inline-flex;align-items:center;padding:3px 8px;border-radius:12px; background:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.25); font-size:11px;color:#c4b5fd; } /* AI claims preview in article card */ .card-claims-preview { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .card-claims-preview li { font-size: 12px; color: var(--text-secondary); padding-left: 14px; position: relative; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-claims-preview li::before { content: '•'; position: absolute; left: 0; color: var(--color-accent); font-size: 10px; line-height: 1.6; } .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; } .card-category-tag { background: rgba(127, 90, 240, 0.15); color: #a78bfa; padding: 2px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; } .card-date { color: var(--text-muted); } .card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-desc { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-desc--rss { color: var(--text-muted); font-style: italic; font-size: 11px; } /* card-footer bleibt für Rückwärtskompatibilität, aber wird nicht mehr in neuen Cards verwendet */ .card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 10px; margin-top: auto; } /* Quellen-Icon in der Card-Meta-Zeile */ .card-src-icon { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; opacity: 0.85; flex-shrink: 0; vertical-align: middle; } /* Rechts im card-meta: Icon + Datum */ .card-meta-right { display: flex; align-items: center; gap: 5px; } .card-source-name { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; } .sentiment-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .sentiment-badge.pos { background: rgba(44, 182, 125, 0.1); color: var(--color-success); } .sentiment-badge.neg { background: rgba(255, 84, 112, 0.1); color: var(--color-danger); } .sentiment-badge.neu { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); } .card-ai-status { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .card-ai-status i { width: 12px; height: 12px; } .empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; color: var(--text-secondary); text-align: center; } .empty-icon { width: 60px; height: 60px; color: var(--text-muted); margin-bottom: 16px; stroke-width: 1; } .empty-state h3 { font-size: 18px; color: var(--text-primary); margin-bottom: 8px; } .empty-state p { font-size: 13px; max-width: 340px; } /* ========================================================================== DETAIL DRAWER ========================================================================== */ .detail-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: var(--drawer-width); z-index: 100; transform: translateX(105%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overflow-y: auto; border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg); border-right: none; background: rgba(14, 16, 27, 0.95); box-shadow: -10px 0 30px rgba(0,0,0,0.5); padding: 24px; } .detail-drawer.open { transform: translateX(0); } .close-drawer-btn { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); } .close-drawer-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .drawer-header { margin-top: 16px; margin-bottom: 20px; } .drawer-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .drawer-title { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 12px; } .drawer-author-date { font-size: 11px; color: var(--text-muted); } .drawer-ai-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border-radius: 6px; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.25); font-size: 11px; color: #a5b4fc; font-weight: 500; } .drawer-ai-model { opacity: 0.7; font-size: 10px; font-family: monospace; } html[data-scheme="light"] .drawer-ai-badge { background: rgba(99, 102, 241, 0.08); color: #4f46e5; } .btn-open-source { margin-top: 12px; display: inline-flex; } .drawer-fulltext { margin-top:12px; border-top:1px solid var(--border-color); padding-top:12px; } .drawer-fulltext-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; list-style: none; padding: 4px 0; } .drawer-fulltext-toggle::-webkit-details-marker { display: none; } .drawer-fulltext-toggle:hover { color: var(--text-primary); } .drawer-fulltext-body { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--text-secondary); max-height: 400px; overflow-y: auto; padding-right: 4px; } .drawer-fulltext-body p { margin: 0 0 8px; } /* AI Analysis Cards inside Drawer */ .analysis-panel { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .analysis-section { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--border-radius-md); padding: 16px; } .analysis-title { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .analysis-title i { width: 14px; height: 14px; color: var(--color-info); } .ai-summary-text { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; } /* Sentiment Bar */ .sentiment-meter-container { display: flex; flex-direction: column; gap: 8px; } .sentiment-meter-lbls { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-weight: 600; } .sentiment-meter-bar-bg { height: 10px; background: linear-gradient(to right, var(--color-danger) 0%, #e2e8f0 50%, var(--color-success) 100%); border-radius: 5px; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); } .sentiment-meter-needle { width: 4px; height: 16px; background: #fff; border: 1px solid #000; border-radius: 2px; position: absolute; top: -3px; left: 50%; /* Position calculated dynamically in JS (0 to 100%) */ transform: translateX(-200%); box-shadow: 0 0 5px rgba(0,0,0,0.8); transition: left 0.5s ease-out; } .sentiment-meter-value { font-size: 12px; font-weight: 700; text-align: center; color: var(--text-primary); margin-top: 4px; } /* Key Claims */ .claims-list { display: flex; flex-direction: column; gap: 8px; } .claim-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text-secondary); } .claim-item i { color: var(--color-success); width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; } /* Scraped Source Text Toggle */ .raw-content-toggle { background: none; border: none; color: var(--color-primary); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; margin-top: 10px; } .raw-content-area { display: none; font-size: 11.5px; color: var(--text-muted); background: rgba(0,0,0,0.2); border-radius: var(--border-radius-sm); padding: 10px; max-height: 180px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--border-color); white-space: pre-wrap; } .raw-content-area.open { display: block; } /* Drawer Pipeline Action */ .drawer-actions { margin-top: 20px; } /* ========================================================================== SETTINGS MODAL ========================================================================== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-card { width: 90%; max-width: 480px; padding: 24px; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background: rgba(14, 16, 27, 0.95); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); } .modal-overlay.open .modal-card { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 20px; } .modal-header h2 { font-size: 18px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); } .modal-header h2 i { color: var(--color-primary); } .btn-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; line-height: 1; } .btn-close:hover { color: var(--text-primary); } .settings-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .settings-group label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .settings-group input { width: 100%; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: 13px; outline: none; } .settings-group input:focus { border-color: var(--border-focus); } .help-text { font-size: 11px; color: var(--text-muted); } .link { color: var(--color-info); text-decoration: none; } .link:hover { text-decoration: underline; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 20px; } /* ========================================================================== RESPONSIVENESS ========================================================================== */ @media (max-width: 900px) { .app-main { flex-direction: column; overflow-y: auto; } .app-sidebar { width: 100%; overflow-y: visible; } .detail-drawer { position: fixed; top: 50px; right: 0; bottom: 0; width: 100%; max-width: 500px; } } /* ========================================================================== PUBLIC LANDING & LOGIN PAGE STYLES ========================================================================== */ .landing-container, .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background-image: radial-gradient(circle at 10% 20%, rgba(127, 90, 240, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(0, 242, 254, 0.08) 0%, transparent 50%); background-attachment: fixed; } .landing-card, .login-card { width: 100%; max-width: 520px; padding: 40px; text-align: center; animation: slideUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; } .login-card { max-width: 420px; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .large-logo { width: 72px !important; height: 72px !important; font-size: 32px; margin: 0 auto 20px auto; box-shadow: 0 0 25px rgba(127, 90, 240, 0.5) !important; } .large-logo i { width: 32px !important; height: 32px !important; } .landing-title { font-size: 32px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.03em; } .landing-subtitle { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; } .landing-divider { height: 1px; background: var(--border-color); margin: 20px 0; } .landing-desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 30px; } .landing-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; text-align: left; max-width: 320px; margin-left: auto; margin-right: auto; } .feature-item { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-primary); } .feature-item i { color: var(--color-info); width: 18px; height: 18px; } .btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--border-radius-lg); } /* Login Card Meta & Forms */ .login-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; margin-bottom: 24px; } .back-btn { position: absolute; top: 24px; left: 24px; background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .back-btn:hover { color: var(--text-primary); } .login-error { background: rgba(255, 84, 112, 0.1); border: 1px solid rgba(255, 84, 112, 0.2); color: var(--color-danger); border-radius: var(--border-radius-md); padding: 10px; font-size: 12px; font-weight: 600; margin-bottom: 16px; text-align: center; } .login-hint { margin-top: 20px; font-size: 11px; color: var(--text-muted); } /* ========================================================================== API STATUS PANEL STYLES ========================================================================== */ .api-status-panel { width: 100%; } .api-panel-inner { display: flex; gap: 12px; padding: 16px; border-radius: var(--border-radius-lg); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--box-shadow-glass); margin-bottom: 16px; text-align: left; } .api-panel-warning { border-color: rgba(255, 184, 48, 0.2); background: rgba(255, 184, 48, 0.03); } .api-panel-error { border-color: rgba(255, 84, 112, 0.2); background: rgba(255, 84, 112, 0.03); } .api-panel-ok { border-color: rgba(44, 182, 125, 0.2); background: rgba(44, 182, 125, 0.03); } .api-panel-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .api-panel-warning .api-panel-icon i { color: var(--color-warning); } .api-panel-error .api-panel-icon i { color: var(--color-danger); } .api-panel-ok .api-panel-icon i { color: var(--color-success); } .api-panel-body { flex: 1; } .api-panel-body h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .api-panel-body p { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; } .api-panel-impact { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.06); } .api-panel-impact strong { font-size: 11px; color: var(--text-primary); display: block; margin-bottom: 4px; } .api-panel-impact ul { list-style: none; padding: 0; margin: 0; } .api-panel-impact li { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .api-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .api-panel-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; display: block; } /* Auth Tabs Navigation */ .auth-tabs { display: flex; margin-bottom: 24px; background: rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-md); padding: 4px; border: 1px solid var(--border-color); } .auth-tab { flex: 1; background: none; border: none; color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition-fast); } .auth-tab:hover { color: var(--text-primary); } .auth-tab.active { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } /* Captcha Layout */ .captcha-wrapper { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 8px 12px; } .captcha-question { flex: 1; font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--color-info); text-align: left; } .register-success { background: rgba(44, 182, 125, 0.1); border: 1px solid rgba(44, 182, 125, 0.2); color: var(--color-success); border-radius: var(--border-radius-md); padding: 10px; font-size: 12px; font-weight: 600; margin-bottom: 16px; text-align: center; } /* ========================================================================== SIDEBAR TABS SYSTEM ========================================================================== */ .sidebar-tabs-container { padding: 12px !important; display: flex; flex-direction: column; gap: 12px; } .sidebar-tabs { display: flex; background: rgba(0, 0, 0, 0.25); border-radius: var(--border-radius-md); padding: 4px; border: 1px solid var(--border-color); gap: 2px; } .sidebar-tab { flex: 1; background: none; border: none; color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 11px; padding: 8px 4px; border-radius: var(--border-radius-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: var(--transition-fast); } .sidebar-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); } .sidebar-tab.active { background: rgba(255, 255, 255, 0.08); color: var(--color-info); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.02); } .sidebar-tab-panel { display: none; animation: fadeInTab 0.3s ease-out; } .sidebar-tab-panel.active { display: block; } @keyframes fadeInTab { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .panel-intro { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-color); } /* ========================================================================== STOCK PORTFOLIO – SEARCH PICKER ========================================================================== */ .stock-picker { margin-bottom: 10px; } .stock-search-wrap { display: flex; gap: 6px; align-items: center; } .stock-search-input { flex: 1; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 12px; outline: none; transition: var(--transition-fast); } .stock-search-input:focus { border-color: var(--border-focus); box-shadow: 0 0 8px rgba(0, 242, 254, 0.15); } .stock-search-results { display: none; background: rgba(14, 16, 27, 0.98); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .stock-result-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: var(--transition-fast); } .stock-result-item:last-child { border-bottom: none; } .stock-result-item:hover:not(.stock-result-disabled) { background: rgba(127, 90, 240, 0.12); } .stock-result-item.stock-result-disabled { opacity: 0.4; cursor: default; } .stock-result-item.stock-result-custom { color: var(--color-info); background: rgba(0, 242, 254, 0.04); border-top: 1px solid var(--border-color); margin-top: 2px; cursor: pointer; } .stock-result-item.stock-result-custom:hover { background: rgba(0, 242, 254, 0.1); } .stock-result-name { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; } .stock-result-market { font-size: 9px; font-weight: 700; color: var(--text-muted); background: rgba(255, 255, 255, 0.06); padding: 2px 5px; border-radius: 4px; flex-shrink: 0; } /* Stock badge – improved with name sub-label */ .stock-badge { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0, 242, 254, 0.08); border: 1px solid rgba(0, 242, 254, 0.25); padding: 5px 10px; border-radius: var(--border-radius-md); font-size: 11.5px; font-weight: 600; color: #38bdf8; transition: var(--transition-fast); width: 100%; margin-bottom: 4px; } .stock-badge-info { display: flex; flex-direction: column; gap: 1px; } .stock-badge-info strong { font-size: 12px; } .stock-badge-info span { font-size: 10px; color: var(--text-muted); font-weight: 400; } .stock-badge button { background: none; border: none; color: currentColor; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; opacity: 0.5; flex-shrink: 0; transition: var(--transition-fast); } .stock-badge button:hover { opacity: 1; } .portfolio-limit-info { font-size: 10.5px; color: var(--text-muted); text-align: right; margin-bottom: 8px; } .portfolio-limit-info span { color: var(--text-primary); font-weight: 600; } /* ========================================================================== STOCK PORTFOLIO & TAGS DESIGN ========================================================================== */ .portfolio-list, .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 4px 0; } .stock-badge, .tag-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(127, 90, 240, 0.12); border: 1px solid rgba(127, 90, 240, 0.25); color: #c084fc; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; transition: var(--transition-fast); } .stock-badge { background: rgba(0, 242, 254, 0.08); border-color: rgba(0, 242, 254, 0.25); color: #38bdf8; } .stock-badge:hover, .tag-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .stock-badge button, .tag-badge button { background: none; border: none; color: currentColor; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; padding: 0 2px; opacity: 0.7; transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; } .stock-badge button:hover, .tag-badge button:hover { opacity: 1; transform: scale(1.1); } .portfolio-limit-info, .tag-limit-info { font-size: 10.5px; color: var(--text-muted); text-align: right; margin-top: 4px; } /* ========================================================================== PORTFOLIO: RICH STOCK SYSTEM ========================================================================== */ /* View toggle */ .pt-view-toggle { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; } .pt-vbtn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 11px; cursor: pointer; transition: var(--transition-fast); } .pt-vbtn:hover { background: rgba(127,90,240,0.1); color: var(--text-primary); } .pt-vbtn--active { background: rgba(127,90,240,0.18); border-color: rgba(127,90,240,0.4); color: var(--color-accent); } /* Stock cards */ .pt-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: var(--transition-fast); } .pt-card:hover { border-color: rgba(127,90,240,0.35); background: rgba(127,90,240,0.06); } .pt-card-header { display: flex; justify-content: space-between; align-items: flex-start; } .pt-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); } .pt-card-exch { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .pt-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .pt-card-edit, .pt-card-del { background: none; border: none; cursor: pointer; padding: 3px; border-radius: 4px; color: var(--text-muted); transition: var(--transition-fast); display: flex; align-items: center; } .pt-card-edit:hover { color: var(--color-accent); background: rgba(127,90,240,0.12); } .pt-card-del:hover { color: #ef4444; background: rgba(239,68,68,0.1); } .pt-link-count { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; } /* Ticker badge */ .pt-ticker-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; border: 1px solid; flex-shrink: 0; font-family: var(--font-mono, monospace); } /* Tag / group chips */ .pt-tag { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.25); } .pt-tag--shared { background: rgba(167,139,250,0.16); color: #c4b5fd; border-color: rgba(167,139,250,0.35); position: relative; } .pt-group { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(52,168,83,0.12); color: #86efac; border: 1px solid rgba(52,168,83,0.25); } .pt-section-hint { font-weight: 400; font-size: 9px; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; text-transform: none; } .pt-sync-badge { font-size: 10px; color: #a78bfa; display: flex; align-items: center; gap: 3px; } .pt-sync-toggle { cursor: pointer; display: flex; align-items: center; } .pt-sync-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text-muted); transition: var(--transition-fast); cursor: pointer; } .pt-sync-icon:hover { border-color: rgba(167,139,250,0.4); color: #c4b5fd; background: rgba(167,139,250,0.1); } .pt-sync-icon--on { background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.45); color: #c4b5fd; } .pt-link-row--synced { border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.05); } /* Detail panel (slide-in) */ .pt-panel { position: fixed; top: 0; right: -440px; width: 420px; max-width: 98vw; height: 100vh; background: var(--bg-dark, #0a0b10); border-left: 1px solid var(--border-color); z-index: 1100; transition: right 0.28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; } .pt-panel.open { right: 0; } .pt-panel-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1099; backdrop-filter: blur(2px); } .pt-panel-backdrop.open { display: block; } .pt-panel-inner { display: flex; flex-direction: column; height: 100%; } .pt-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.04); flex-shrink: 0; } .pt-panel-title { font-size: 13px; font-weight: 700; color: var(--text-primary); } .pt-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--bg-dark, #0a0b10); } /* Detail form helpers */ .pt-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .pt-field-label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 3px; } .pt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Chip editors */ .pt-chip-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 28px; padding: 3px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: rgba(0,0,0,0.2); } .pt-chip { display: flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(127,90,240,0.2); color: #c4b5fd; border: 1px solid rgba(127,90,240,0.3); } .pt-chip-x { cursor: pointer; opacity: 0.6; font-size: 11px; line-height: 1; } .pt-chip-x:hover { opacity: 1; color: #ef4444; } .pt-chip-input { border: none; background: none; outline: none; color: var(--text-primary); font-size: 11px; min-width: 80px; flex: 1; } .pt-chip-suggestions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } .pt-chip-sug { font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); transition: var(--transition-fast); } .pt-chip-sug:hover { background: rgba(127,90,240,0.15); color: #c4b5fd; border-color: rgba(127,90,240,0.3); } /* Link list */ .pt-links-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .pt-link-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 5px; } .pt-link-type-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .pt-strength-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .pt-strength-fill { height: 100%; border-radius: 2px; transition: width 0.2s; } .pt-add-link-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px; background: rgba(0,0,0,0.15); border-radius: 6px; margin-bottom: 4px; } /* Mind map */ .pt-mindmap-wrap { width: 100%; } .pt-mindmap-svg { width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(0,0,0,0.2); } .pt-mm-node circle { transition: r 0.15s, stroke-width 0.15s; } .pt-mm-node:hover circle { stroke-width: 3; } /* ========================================================================== ADMIN: INTERAKTIVE PORTFOLIO MINDMAP ========================================================================== */ .amm-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg-dark, #0a0b10); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); } .amm-overlay.open { transform: translateY(0); } /* Toolbar */ .amm-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .amm-bar-l { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .amm-bar-c { flex: 1; display: flex; justify-content: center; } .amm-bar-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .amm-title { font-size: 13px; font-weight: 700; color: var(--text-primary); } .amm-count { font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 10px; } .amm-search { width: 240px; padding: 6px 12px; border-radius: var(--border-radius-sm); background: rgba(0,0,0,0.35); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 12px; outline: none; } .amm-search:focus { border-color: var(--border-focus); } .amm-close-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-color); background: rgba(255,255,255,0.04); color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); } .amm-close-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); } /* Main canvas area */ .amm-main { flex: 1; position: relative; overflow: hidden; } .amm-svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; } .amm-svg:active { cursor: grabbing; } .amm-node .amm-nc { transition: r 0.12s, stroke-width 0.12s; } .amm-node:hover .amm-nc { stroke-width: 3 !important; } /* Hint bar */ .amm-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-muted); background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap; } /* Side panel */ .amm-side { position: absolute; top: 0; right: 0; bottom: 0; width: 280px; background: var(--bg-dark, #0a0b10); border-left: 1px solid var(--border-color); overflow-y: auto; padding: 14px; z-index: 10; } .amm-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .amm-side-ticker { font-size: 18px; font-weight: 800; font-family: var(--font-mono, monospace); } .amm-side-name { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; } .amm-owners { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .amm-owner-chip { font-size: 9px; padding: 1px 6px; border-radius: 3px; background: rgba(127,90,240,0.12); color: #c4b5fd; border: 1px solid rgba(127,90,240,0.25); } .amm-conn-list { display: flex; flex-direction: column; gap: 4px; } .amm-conn-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); cursor: pointer; transition: var(--transition-fast); } .amm-conn-row:hover { background: rgba(127,90,240,0.08); border-color: rgba(127,90,240,0.25); } /* Legend */ .amm-leg { position: absolute; left: 12px; bottom: 36px; background: rgba(10,11,16,0.92); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; min-width: 140px; font-size: 10px; color: var(--text-muted); backdrop-filter: blur(6px); z-index: 5; } .amm-leg-head { font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--text-secondary); } .amm-leg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .amm-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .amm-leg-dash { width: 14px; height: 0; border-top: 2px dashed; flex-shrink: 0; } .amm-leg-sep { border-top: 1px solid rgba(255,255,255,0.07); margin: 6px 0; } /* ========================================================================== ALERTS / NOTIFICATION SWITCHES ========================================================================== */ .notification-channels { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .channel-card { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 12px; transition: var(--transition-smooth); } .channel-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); } .channel-card.active { border-color: rgba(0, 242, 254, 0.2); background: rgba(0, 242, 254, 0.02); } .channel-info { display: flex; gap: 12px; align-items: flex-start; flex: 1; padding-right: 8px; } .channel-info i { color: var(--color-info); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; } .channel-title { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); } .channel-desc { display: block; font-size: 10px; color: var(--text-secondary); line-height: 1.3; margin-top: 2px; } .badge-beta { background: var(--color-warning); color: #000; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; } /* Confirm Dialog */ .confirm-modal-card { max-width: 380px; text-align: center; padding: 28px 24px 24px; } .confirm-modal-icon-wrap { margin-bottom: 12px; } .confirm-modal-icon-wrap i { width: 36px; height: 36px; color: var(--color-accent); } .confirm-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; } .confirm-modal-message { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 20px; } .confirm-modal-actions { display: flex; gap: 10px; justify-content: center; } .confirm-modal-actions .btn { min-width: 110px; } /* Alert Settings Panel */ .alert-settings-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--text-secondary); font-size: 11px; padding: 7px 10px; cursor: pointer; margin-top: 10px; transition: var(--transition-fast); text-align: left; } .alert-settings-toggle:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); } .alert-settings-toggle.open { border-color: rgba(0, 242, 254, 0.35); color: var(--text-primary); } .alert-settings-toggle i { width: 13px; height: 13px; flex-shrink: 0; } .alert-settings-toggle span { flex: 1; } .alert-chevron { transition: transform 0.2s ease; } .alert-settings-panel { margin-top: 6px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px; background: rgba(0, 0, 0, 0.2); } .alert-settings-section { margin-bottom: 12px; } .alert-settings-section:last-of-type { margin-bottom: 0; } .alert-settings-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px; } .alert-level-group { display: flex; gap: 4px; } .alert-level-option { flex: 1; display: flex; align-items: center; justify-content: center; padding: 5px 4px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 10px; color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); text-align: center; } .alert-level-option input[type="radio"] { display: none; } .alert-level-option:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .alert-level-option.active { border-color: var(--color-accent); background: rgba(0, 242, 254, 0.08); color: var(--color-accent); font-weight: 600; } .alert-stocks-list { display: flex; flex-direction: column; gap: 3px; max-height: 130px; overflow-y: auto; } .alert-stock-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: background 0.15s; } .alert-stock-row:hover { background: rgba(255, 255, 255, 0.04); } .alert-stock-row input[type="checkbox"] { accent-color: var(--color-accent); width: 13px; height: 13px; cursor: pointer; flex-shrink: 0; } .alert-stock-ticker { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; } .alert-no-stocks { font-size: 11px; color: var(--text-muted); font-style: italic; } /* Alert Settings Modal Content */ .asm-section { margin-bottom: 20px; } .asm-section:last-of-type { margin-bottom: 0; } .asm-section-title { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; } .asm-channel-row { display: flex; gap: 16px; } .asm-channel-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); cursor: pointer; } .asm-channel-item input[type="checkbox"] { accent-color: var(--color-accent); width: 15px; height: 15px; cursor: pointer; } .asm-stocks-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .asm-stock-row { padding: 8px; border-radius: 6px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .asm-stock-row + .asm-stock-row { margin-top: 4px; } .asm-stock-row:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); } .asm-stock-label { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px; } .asm-stock-label input[type="checkbox"] { accent-color: var(--color-accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; } .asm-stock-ticker { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.05em; min-width: 52px; } .asm-stock-name { font-size: 12px; color: var(--text-secondary); flex: 1; } .asm-stock-levels { display: flex; gap: 4px; padding-left: 24px; transition: opacity 0.15s; } .asm-stock-levels.asm-levels-disabled { opacity: 0.25; pointer-events: none; } .asm-stock-level { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 10px; color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); text-align: center; white-space: nowrap; } .asm-stock-level input[type="radio"] { display: none; } .asm-stock-level:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .asm-stock-level.active { border-color: var(--color-accent); background: rgba(0, 242, 254, 0.08); color: var(--color-accent); font-weight: 600; } .asm-empty { font-size: 12px; color: var(--text-muted); font-style: italic; margin: 0; } /* Compact Alerts widget status view */ .alerts-status-wrap { display: flex; flex-direction: column; gap: 8px; } .alerts-ch-row { display: flex; gap: 6px; flex-wrap: wrap; } .alerts-ch-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 20px; border: 1px solid var(--border-color); font-size: 11px; color: var(--text-muted); opacity: 0.45; transition: opacity 0.15s, border-color 0.15s, color 0.15s; } .alerts-ch-badge svg { width: 11px; height: 11px; } .alerts-ch-badge.active { opacity: 1; color: var(--color-accent); border-color: rgba(0, 242, 254, 0.3); background: rgba(0, 242, 254, 0.05); } .alerts-threshold-line { font-size: 10px; color: var(--text-muted); padding-top: 2px; } .alerts-threshold-none { font-style: italic; } /* Alert modal threshold section */ .asm-threshold-list { display: flex; flex-direction: column; gap: 10px; } .asm-threshold-item { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; } .asm-threshold-range { flex-direction: column; align-items: flex-start; gap: 4px; } /* Custom Toggle Switch */ .switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-color); transition: .3s; border-radius: 20px; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: var(--text-secondary); transition: .3s; border-radius: 50%; } input:checked + .slider { background-color: var(--color-info); border-color: var(--color-info); box-shadow: 0 0 10px rgba(0, 242, 254, 0.3); } input:checked + .slider:before { transform: translateX(18px); background-color: #000; } /* ========================================================================== FEED – BAHNBRECHEND PIN ========================================================================== */ .card-pinned { border-color: rgba(255, 184, 30, 0.45) !important; box-shadow: 0 0 0 1px rgba(255, 184, 30, 0.25), 0 4px 20px rgba(255, 184, 30, 0.08); } .feed-pinned-separator { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 4px; margin: 4px 0 2px; } .feed-pinned-separator::before, .feed-pinned-separator::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* ========================================================================== TUTORIAL OVERLAY ========================================================================== */ #tutorial-overlay { position: fixed; inset: 0; z-index: 9990; pointer-events: all; } #tutorial-spotlight { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65); pointer-events: none; transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease; z-index: 9991; } .tutorial-card { position: fixed; z-index: 9999; background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 16px; padding: 24px; width: 320px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: tutorial-card-in 0.3s ease; pointer-events: all; transition: top 0.3s ease, left 0.3s ease; } @keyframes tutorial-card-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .tutorial-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; } .tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color, rgba(255,255,255,0.15)); transition: background 0.2s, width 0.2s; } .tutorial-dot.active { background: var(--color-info, #00f2fe); width: 20px; border-radius: 4px; } .tutorial-dot.done { background: rgba(0, 242, 254, 0.35); } .tutorial-icon-wrap { font-size: 32px; text-align: center; margin-bottom: 10px; line-height: 1; } .tutorial-title { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 8px; color: var(--text-primary, #fff); } .tutorial-text { font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.7)); text-align: center; line-height: 1.6; margin-bottom: 20px; } .tutorial-actions { display: flex; gap: 8px; } .tutorial-actions .btn { flex: 1; } .tutorial-conclusion { display: flex; flex-direction: column; gap: 8px; } .tutorial-conclude-btn { width: 100% !important; white-space: normal !important; height: auto !important; padding: 10px 14px !important; line-height: 1.45 !important; text-align: left !important; font-size: 12px !important; } .tutorial-skip-now { display: block; width: 100%; margin-top: 16px; background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 0; text-align: center; font-family: var(--font-body); transition: color 0.15s; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,0.15); } .tutorial-skip-now:hover { color: var(--text-secondary); text-decoration-color: var(--text-secondary); } /* ========================================================================== PUBLIC LANDING HOME PAGE STYLING ========================================================================== */ /* Overwriting standard landing container to be scrollable and full-width */ .landing-container { display: block; overflow-y: auto; min-height: 100vh; padding: 0; background-color: var(--bg-dark); } .homepage-wrapper { max-width: 1200px; margin: 0 auto; padding: 24px 20px 80px 20px; display: flex; flex-direction: column; gap: 80px; } /* Navigation Leiste */ .landing-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; margin-bottom: 20px; border-radius: var(--border-radius-lg); position: sticky; top: 16px; z-index: 1000; background: rgba(14, 16, 27, 0.8) !important; } .nav-logo { display: flex; align-items: center; gap: 10px; } .small-logo { width: 32px !important; height: 32px !important; box-shadow: 0 0 10px rgba(127, 90, 240, 0.4) !important; } .small-logo i { width: 16px !important; height: 16px !important; } .logo-text { font-family: var(--font-title); font-size: 18px; font-weight: 800; color: var(--text-primary); } .nav-links { display: flex; gap: 24px; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 500; transition: var(--transition-fast); } .nav-links a:hover { color: var(--color-info); } .nav-actions { display: flex; gap: 10px; } /* Hero Section */ .hero-section { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px; min-height: 60vh; margin-top: 20px; animation: slideUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); } .hero-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 242, 254, 0.08); border: 1px solid rgba(0, 242, 254, 0.2); color: var(--color-info); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px; margin-bottom: 20px; letter-spacing: 0.02em; text-transform: uppercase; } .hero-badge i { width: 12px; height: 12px; } .hero-title { font-size: 44px; font-weight: 800; line-height: 1.2; color: var(--text-primary); margin-bottom: 18px; letter-spacing: -0.03em; } .hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 30px; max-width: 520px; } .hero-actions { display: flex; gap: 14px; } .hero-visual { display: flex; justify-content: center; align-items: center; position: relative; } /* Interaktives CSS Mockup */ .product-mockup { width: 100%; max-width: 400px; border-radius: var(--border-radius-lg); overflow: hidden; background: rgba(18, 20, 32, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 20px 50px rgba(0, 242, 254, 0.15) !important; transform: perspective(1000px) rotateY(-10deg) rotateX(5deg); transition: var(--transition-smooth); } .product-mockup:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02); box-shadow: 0 25px 60px rgba(0, 242, 254, 0.25) !important; } .mockup-header { background: rgba(0, 0, 0, 0.3); padding: 10px 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-color); } .mockup-indicator { width: 8px; height: 8px; border-radius: 50%; } .mockup-indicator:nth-child(1) { background-color: var(--color-danger); } .mockup-indicator:nth-child(2) { background-color: var(--color-warning); } .mockup-indicator:nth-child(3) { background-color: var(--color-success); } .mockup-title { margin-left: auto; font-size: 8px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); } .mockup-content { padding: 18px; text-align: left; } .mockup-analysis-section { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--border-radius-md); padding: 12px; margin-bottom: 12px; } .mockup-bullets { list-style: none; padding: 0; margin: 0; } .mockup-bullets li { font-size: 11px; color: var(--text-secondary); position: relative; padding-left: 14px; margin-bottom: 6px; line-height: 1.4; } .mockup-bullets li::before { content: "•"; position: absolute; left: 2px; color: var(--color-primary); } .mockup-bullets li:last-child { margin-bottom: 0; } .mockup-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.04); padding-top: 10px; margin-top: 14px; } /* Homepage Sections */ .homepage-section { text-align: center; padding: 20px 0; } .section-title { font-size: 32px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.02em; } .section-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 44px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Features Grid */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .feature-card { padding: 28px 24px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; transition: var(--transition-smooth); } .feature-card:hover { transform: translateY(-5px); border-color: rgba(127, 90, 240, 0.25); box-shadow: 0 15px 35px rgba(127, 90, 240, 0.15); } .feature-icon { width: 44px; height: 44px; border-radius: var(--border-radius-md); background: rgba(127, 90, 240, 0.1); border: 1px solid rgba(127, 90, 240, 0.2); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .feature-icon i { width: 20px; height: 20px; } .feature-card h3 { font-size: 16px; color: var(--text-primary); margin-bottom: 10px; } .feature-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } /* Pricing Grid */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; } .pricing-card { padding: 36px 28px; text-align: left; display: flex; flex-direction: column; position: relative; transition: var(--transition-smooth); } .pricing-card.popular { border: 1.5px solid var(--color-info) !important; box-shadow: 0 15px 35px rgba(0, 242, 254, 0.12) !important; background: rgba(18, 20, 32, 0.75) !important; } .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-gradient); color: #000; font-size: 9px; font-weight: 800; padding: 4px 12px; border-radius: 12px; letter-spacing: 0.05em; } .pricing-header { margin-bottom: 24px; } .pricing-header h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .pricing-header p { font-size: 11.5px; color: var(--text-secondary); } .price { font-family: var(--font-title); font-size: 32px; font-weight: 800; color: var(--text-primary); margin: 12px 0; } .price .period { font-size: 12px; color: var(--text-muted); font-weight: 500; } .pricing-features-list { list-style: none; padding: 0; margin: 0 0 32px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .pricing-features-list li { font-size: 12.5px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; } .pricing-features-list li i { width: 14px; height: 14px; flex-shrink: 0; } .pricing-features-list li.disabled { color: var(--text-muted); } /* Footer */ /* ========================================================================== HAUPTSEITE — PRO Ruhige Tiefe, klare Rhythmik, sparsamer Akzent. Alle Werte leiten sich aus den Design-Tokens ab, damit der Baukasten auch hier greift. ========================================================================== */ /* Aurora-Schimmer + feines Raster hinter dem Hero */ .lp-aurora { position: absolute; inset: -30% -10% auto -10%; height: 130%; pointer-events: none; z-index: 0; background: radial-gradient(46% 40% at 22% 12%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(40% 38% at 80% 4%, color-mix(in srgb, var(--color-info) 16%, transparent), transparent 70%); filter: blur(28px); opacity: 0.75; } .lp-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--border-color) 1px, transparent 1px), linear-gradient(90deg, var(--border-color) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.35; mask-image: radial-gradient(70% 55% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000 20%, transparent 75%); } /* Vertrauens-Zeile unter den CTAs */ .lp-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .lp-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); } .lp-trust svg { width: 14px; height: 14px; color: var(--color-accent); } /* Kleines Label über jeder Sektionsüberschrift */ .lp-eyebrow { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; } /* ── Ablauf-Schritte ─────────────────────────────────────────────────────── */ .lp-steps { list-style: none; margin: 42px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: calc(20px * var(--space-scale)); max-width: 1080px; } .lp-step { position: relative; padding: calc(26px * var(--space-scale)) calc(22px * var(--space-scale)); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); background: var(--bg-card); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .lp-step:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); } .lp-step-num { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); } .lp-step-icon { display: block; width: 22px; height: 22px; margin: 14px 0 12px; color: var(--color-primary); } .lp-step h3 { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 7px; letter-spacing: -0.01em; } .lp-step p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); } /* ── Feature-Bento ───────────────────────────────────────────────────────── */ .lp-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(18px * var(--space-scale)); } .lp-bento .feature-card { position: relative; overflow: hidden; border-radius: var(--border-radius-lg); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* Akzentlinie oben, erscheint beim Hover */ .lp-bento .feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--primary-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .lp-bento .feature-card:hover::before { transform: scaleX(1); } .lp-bento .feature-card:hover { border-color: color-mix(in srgb, var(--color-primary) 38%, transparent); } /* ── Abschluss-Band ──────────────────────────────────────────────────────── */ .lp-cta-band { position: relative; margin: 90px auto 0; max-width: 1080px; padding: calc(58px * var(--space-scale)) 24px; text-align: center; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; background: radial-gradient(70% 130% at 50% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%), var(--bg-card); } .lp-cta-inner h2 { font-family: var(--font-title); font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 10px; } .lp-cta-inner p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 26px; } .lp-cta-inner .btn { display: inline-flex; align-items: center; gap: 8px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .lp-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); } .lp-footer-brand { display: flex; align-items: center; gap: 10px; } .lp-footer-nav { display: flex; gap: 20px; flex-wrap: wrap; } .lp-footer-nav a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .lp-footer-nav a:hover { color: var(--color-primary); } .lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } @media (max-width: 720px) { .lp-grid-overlay { display: none; } .lp-cta-band { margin-top: 60px; } .lp-footer-top, .lp-footer-bottom { flex-direction: column; text-align: center; } } .landing-footer { text-align: center; padding-top: 40px; border-top: 1px solid var(--border-color); margin-top: 20px; } .landing-footer-links { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; } .footer-sep { color: var(--text-muted); font-size: 11px; } /* Unsichtbarer Link-Button (für Impressum, AGB etc.) */ .link-btn { background: none; border: none; color: var(--color-info); font-size: 11px; cursor: pointer; padding: 0; font-family: var(--font-body); text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--text-primary); } .landing-footer p { font-size: 11px; color: var(--text-muted); } /* ========================================================================== DEVELOPER OPTIONS & RESET MODAL ========================================================================== */ /* ========================================================================== CALENDAR – Markt-Kalender Feature ========================================================================== */ #panel-calendar { padding: 4px; } /* Navigation Header */ .calendar-nav-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cal-month-label { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; text-align: center; } .cal-nav-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; padding: 5px; border-radius: var(--border-radius-sm); display: flex; align-items: center; transition: var(--transition-fast); } .cal-nav-btn:hover { background: rgba(255,255,255,0.12); } .cal-limit-badge { font-size: 9px; font-weight: 700; color: var(--color-info); background: rgba(0, 242, 254, 0.08); border: 1px solid rgba(0, 242, 254, 0.2); padding: 2px 7px; border-radius: 10px; white-space: nowrap; } /* Grid */ .calendar-grid-wrap { width: 100%; } .calendar-header-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; } .cal-header-cell { text-align: center; font-size: 9px; font-weight: 700; color: var(--text-muted); padding: 4px 2px; text-transform: uppercase; letter-spacing: 0.04em; } .calendar-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-cell { aspect-ratio: 1; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 4px; padding: 3px; position: relative; cursor: default; transition: var(--transition-fast); display: flex; flex-direction: column; align-items: center; } .cal-cell:hover:not(.cal-cell-empty):not(.cal-cell-blurred) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .cal-cell-empty { background: transparent; border-color: transparent; } .cal-cell-today { border-color: var(--color-primary) !important; background: rgba(127, 90, 240, 0.1) !important; } .cal-cell-past { opacity: 0.5; } .cal-cell-blurred { filter: blur(4px); pointer-events: none; background: rgba(127, 90, 240, 0.05); } .cal-day-num { font-size: 9px; font-weight: 600; color: var(--text-secondary); line-height: 1; } .cal-cell-today .cal-day-num { color: var(--color-primary); } .cal-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 2px; } .cal-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } /* Blurred Calendar for non-subscribers */ .calendar-blur-wrap { position: relative; border-radius: var(--border-radius-md); overflow: hidden; cursor: pointer; } .calendar-blur-inner { position: relative; } .blurred-calendar { filter: blur(6px); pointer-events: none; user-select: none; } .blur-cell { background: rgba(127, 90, 240, 0.05) !important; } .calendar-blur-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(10, 11, 16, 0.6); backdrop-filter: blur(2px); border-radius: var(--border-radius-md); } .calendar-blur-cta { text-align: center; padding: 16px 12px; } .calendar-blur-cta h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 8px 0 6px; } .calendar-blur-cta p { font-size: 10px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; } .calendar-plan-chips { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .cal-plan-chip { font-size: 9px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); border-radius: 6px; padding: 3px 8px; color: var(--text-muted); } .cal-plan-chip.active { background: rgba(0, 242, 254, 0.08); border-color: rgba(0, 242, 254, 0.2); color: var(--color-info); } /* Event Detail Panel */ .cal-event-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-color); min-height: 20px; } .cal-detail-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .cal-event-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .cal-event-row:last-child { border-bottom: none; } .cal-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .cal-event-info { flex: 1; } .cal-event-info strong { font-size: 12px; color: var(--text-primary); display: block; } .cal-event-ticker { font-size: 9px; font-weight: 700; color: var(--color-info); background: rgba(0, 242, 254, 0.08); border-radius: 4px; padding: 1px 5px; margin-left: 4px; } .cal-event-info p { font-size: 10px; color: var(--text-muted); margin-top: 2px; } /* Admin Controls */ .cal-admin-bar { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-color); } /* ── Kalender-Erweiterungen ──────────────────────────────────────────────── */ /* Suchleiste */ .cal-search-bar { padding: 6px 4px 8px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } /* Suchergebnis-Liste */ .cal-search-results { margin-top: 6px; } .cal-search-results-title { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; } .cal-search-item { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .cal-search-item-body { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; } .cal-search-date { font-size: 10px; color: var(--text-muted); } .cal-ticker-badge { background: rgba(127,90,240,0.12); color: var(--color-primary); font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 5px; } .cal-user-badge { background: rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 9px; border-radius: 4px; padding: 1px 5px; } /* User-Event-Punkt: gestrichelt */ .cal-dot-user { border: 1px dashed rgba(255,255,255,0.4); opacity: 0.7; } /* Termin einreichen */ .cal-add-event-bar { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-color); } .cal-user-form { background: rgba(255,255,255,0.025); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px; } /* ── Kalender Sichtbarkeits-Chips ───────────────────────────────────────── */ .cal-vis-chip { display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: rgba(127, 90, 240, 0.12); color: var(--color-primary); border: 1px solid rgba(127, 90, 240, 0.2); margin: 1px; } .cal-vis-chip.all { background: rgba(44, 182, 125, 0.1); color: var(--color-success); border-color: rgba(44, 182, 125, 0.2); } .caldb-groups-cell { cursor: pointer; } .caldb-groups-display { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .caldb-groups-display:hover { opacity: 0.75; } .caldb-groups-editor { background: rgba(10, 11, 18, 0.98); border: 1px solid var(--color-primary); border-radius: var(--border-radius-sm); padding: 10px; position: absolute; z-index: 50; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } /* Versteckte Events in der Tabelle */ .caldb-hidden-row td { opacity: 0.5; } .caldb-hidden-row:hover td { opacity: 0.8; } /* ── Kalender-Datenbank Form-Grid ───────────────────────────────────────── */ .caldb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 600px) { .caldb-form-grid { grid-template-columns: 1fr; } } /* Admin-Review-Bereich */ .cal-admin-review { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,242,254,0.15); } .cal-review-header { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--color-info); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .cal-review-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .cal-review-item-info { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; min-width: 0; flex: 1; } .cal-add-form { margin-top: 10px; padding: 14px; } /* AI suggestion type badges in calendar */ .cal-sug-type-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; } .cal-type-earnings { background: rgba(127, 90, 240, 0.15); color: #7f5af0; } .cal-type-dividend { background: rgba( 44,182, 125, 0.15); color: #2cb67d; } .cal-type-economic { background: rgba(255,184, 48, 0.15); color: #ffb830; } .cal-type-ipo { background: rgba( 0,242, 254, 0.15); color: #00f2fe; } .cal-type-other { background: rgba(154,160, 185, 0.15); color: #9aa0b9; } /* Source article reference line below suggestion title */ .cal-sug-source { display: block; width: 100%; font-size: 10px; color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } /* ========================================================================== TOAST NOTIFICATION – immer über allen Modals sichtbar ========================================================================== */ .toast-notification { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 9999; /* über allen Modal-Overlays (z-index 1000) */ padding: 12px 22px; border-radius: var(--border-radius-md); font-size: 13px; font-weight: 600; color: var(--text-primary); opacity: 0; transition: transform 0.25s ease-out, opacity 0.25s ease-out; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } /* ========================================================================== MODAL INLINE MESSAGE (Fehler / Erfolg direkt im Modal) ========================================================================== */ .modal-inline-msg { display: none; border-radius: var(--border-radius-md); padding: 10px 14px; font-size: 12px; font-weight: 600; margin-bottom: 14px; } .modal-inline-msg.error { background: rgba(255, 84, 112, 0.12); border: 1px solid rgba(255, 84, 112, 0.3); color: var(--color-danger); } .modal-inline-msg.success { background: rgba(44, 182, 125, 0.12); border: 1px solid rgba(44, 182, 125, 0.3); color: var(--color-success); } /* ========================================================================== DEVELOPER OPTIONS ========================================================================== */ .dev-panel { animation: fadeInTab 0.3s ease-out; } .dev-panel p { font-size: 10px; color: var(--text-secondary); } .dev-panel-hint { display: block; font-size: 9px; color: var(--text-muted); margin-top: 4px; text-align: center; } .btn-dev-toggle:hover { color: #fff !important; } /* Responsive Homepage Styling */ @media (max-width: 900px) { .hero-section { grid-template-columns: 1fr; text-align: center; gap: 30px; } .hero-content { align-items: center; text-align: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .product-mockup { transform: none; } .product-mockup:hover { transform: scale(1.02); } .landing-nav { flex-direction: column; gap: 14px; padding: 14px; position: static; } .nav-links { gap: 16px; } } /* ========================================================================== SETTINGS MODAL – UNIFIED TAB NAVIGATION ========================================================================== */ .stab-nav { display: flex; gap: 3px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 4px; margin-bottom: 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 10; } .stab-btn { flex: 1; min-width: 72px; background: none; border: none; color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 11px; padding: 8px 8px; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition-fast); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; } .stab-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .stab-btn.active { background: rgba(127, 90, 240, 0.18); color: var(--color-primary); border: 1px solid rgba(127, 90, 240, 0.3); } .stab-panel { animation: fadeInTab 0.2s ease-out; } /* ========================================================================== ADMIN PANEL – WIDE MODAL & TABS ========================================================================== */ .modal-card-wide { max-width: 900px !important; width: 95% !important; } .admin-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .admin-modal-tabs { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 4px; margin-bottom: 18px; flex-wrap: wrap; } .admin-modal-tab { flex: 1; min-width: 80px; background: none; border: none; color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 11px; padding: 8px 10px; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition-fast); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; } .admin-modal-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); } .admin-modal-tab.active { background: rgba(127, 90, 240, 0.15); color: var(--color-primary); border: 1px solid rgba(127, 90, 240, 0.3); } .admin-tab-panel { animation: fadeInTab 0.25s ease-out; } /* ========================================================================== USER ADMIN TABLE ========================================================================== */ .user-admin-table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .user-admin-table th { text-align: left; padding: 8px 10px; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-color); font-weight: 700; } .user-admin-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.025); color: var(--text-primary); vertical-align: middle; } .user-admin-table tr:hover td { background: rgba(255, 255, 255, 0.015); } .td-email { color: var(--text-secondary) !important; font-size: 11px !important; } .td-muted { color: var(--text-muted) !important; font-size: 11px !important; } .self-badge { background: rgba(0, 242, 254, 0.1); color: var(--color-info); font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 8px; margin-left: 4px; vertical-align: middle; } .admin-group-select, .admin-plan-select { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-color); color: #fff; border-radius: var(--border-radius-sm); padding: 4px 8px; font-size: 11px; font-family: var(--font-body); outline: none; cursor: pointer; } .verified-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; } .verified-badge.yes { background: rgba(44, 182, 125, 0.1); color: var(--color-success); } .verified-badge.no { background: rgba(255, 84, 112, 0.1); color: var(--color-danger); } /* ========================================================================== RECHERCHE-DATENBANK ========================================================================== */ /* ── Access Gate ─────────────────────────────────────────────────────────── */ .adb-locked-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 10px; } .adb-locked-state h3 { font-size: 16px; color: #fff; margin: 0; } .adb-locked-state p { font-size: 13px; color: var(--text-secondary); margin: 0; max-width: 480px; } .adb-lock-icon { margin-bottom: 8px; } /* ── Access Badge ────────────────────────────────────────────────────────── */ .adb-access-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; } .adb-access-badge.unlimited { background: rgba(0, 242, 254, 0.08); color: var(--color-info); border: 1px solid rgba(0, 242, 254, 0.2); } .adb-access-badge.limited { background: rgba(255, 184, 48, 0.08); color: var(--color-warning); border: 1px solid rgba(255, 184, 48, 0.2); } /* ── Stats Row ───────────────────────────────────────────────────────────── */ .adb-stats { display: flex; gap: 10px; flex-wrap: wrap; } .adb-stat-box { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 14px; display: flex; flex-direction: column; align-items: center; min-width: 80px; } .adb-stat-box .stat-val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; } .adb-stat-box .stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .adb-stat-pill { background: rgba(127, 90, 240, 0.12); color: var(--color-primary); border-radius: 10px; font-size: 10px; padding: 2px 8px; font-weight: 600; } /* ── Filter Bar ──────────────────────────────────────────────────────────── */ .adb-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Table ───────────────────────────────────────────────────────────────── */ .adb-table { width: 100%; border-collapse: collapse; } .adb-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .adb-row { border-bottom: 1px solid var(--border-color); transition: background .1s; } .adb-row:hover { background: rgba(255,255,255,0.03); } .adb-row.adb-row-expanded { background: rgba(127,90,240,0.06); } .adb-row td { padding: 8px 10px; font-size: 12px; vertical-align: middle; } .adb-expand-icon { width: 18px; text-align: center; } .adb-title { color: var(--text-primary); } .adb-source { color: var(--text-secondary); font-size: 11px; white-space: nowrap; } .adb-date { color: var(--text-muted); font-size: 11px; white-space: nowrap; } /* ── Sentiment Mini-Bar ──────────────────────────────────────────────────── */ .adb-sent-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; max-width: 60px; } .adb-sent-bar { height: 100%; border-radius: 2px; transition: width .3s; opacity: .85; } /* ── Expand Detail Row ───────────────────────────────────────────────────── */ .adb-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--border-color); } .adb-detail-cell { background: rgba(127, 90, 240, 0.04); } .adb-detail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 24px; max-width: 900px; } @media (max-width: 700px) { .adb-detail-inner { grid-template-columns: 1fr; } } .adb-detail-summary, .adb-detail-claims, .adb-detail-desc { font-size: 12px; } .adb-detail-section-title { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .adb-detail-actions { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); margin-top: 4px; } /* ── Pager ───────────────────────────────────────────────────────────────── */ .adb-pager { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; } .adb-page-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* ========================================================================== GRUPPEN-EDITOR (Admin Einstellungen) ========================================================================== */ .group-editor-card { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px; } .group-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .group-editor-grid { grid-template-columns: 1fr; } } .group-perm-section { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px; } .group-perm-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary); margin-bottom: 10px; } .group-perm-row { margin-bottom: 10px; } .group-limits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .group-limit-box { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 4px; text-align: center; } .group-limit-box span { display: block; font-size: 14px; font-weight: 700; color: #fff; } .group-limit-box small { font-size: 9px; color: var(--text-muted); display: block; margin-top: 2px; } /* ========================================================================== SETTINGS PAGE – Vollbild-Ebene (App-Layer) ========================================================================== */ /* ── Basis: Vollbild-Overlay-Ebene ───────────────────────────────────────── */ .app-layer { position: fixed; inset: 0; z-index: 200; background: var(--bg-dark); display: flex; flex-direction: column; overflow: hidden; } /* ── Header ──────────────────────────────────────────────────────────────── */ .sp-header { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 58px; flex-shrink: 0; background: rgba(12, 13, 22, 0.98); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(var(--blur-value)); -webkit-backdrop-filter: blur(var(--blur-value)); } .sp-header-left { display: flex; align-items: center; gap: 16px; } .sp-title { font-family: var(--font-title); font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 7px; letter-spacing: -0.01em; } .sp-user-badge { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 20px; padding: 5px 14px; line-height: 1.4; } /* ── Zweispaltiges Layout ────────────────────────────────────────────────── */ .sp-layout { display: flex; flex: 1; overflow: hidden; } /* ── Sidebar-Navigation ──────────────────────────────────────────────────── */ .sp-nav { width: 210px; flex-shrink: 0; border-right: 1px solid var(--border-color); background: rgba(8, 9, 18, 0.7); overflow-y: auto; padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; } .sp-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--border-radius-sm); cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: background 0.12s ease, color 0.12s ease; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } .sp-nav-item.active { background: rgba(127, 90, 240, 0.14); color: #fff; font-weight: 600; } .sp-nav-item.active i, .sp-nav-item.active svg { color: var(--color-primary); } /* Trennlinie zwischen User- und Admin-Bereichen */ .sp-nav-separator { height: 1px; background: var(--border-color); margin: 8px 4px; } /* ── Content-Bereich ─────────────────────────────────────────────────────── */ .sp-content { flex: 1; overflow-y: auto; padding: 28px 32px; min-width: 0; } /* ── Abschnitts-Header ───────────────────────────────────────────────────── */ .sp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 10px; } .sp-section-header h2 { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 9px; line-height: 1.2; } .sp-section-header h2 i, .sp-section-header h2 svg { color: var(--color-primary); flex-shrink: 0; } /* ── Karten ──────────────────────────────────────────────────────────────── */ .sp-card { background: rgba(255, 255, 255, 0.028); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 20px 22px; margin-bottom: 16px; } .sp-card:last-child { margin-bottom: 0; } /* ── Lade-Indikator ──────────────────────────────────────────────────────── */ .sp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 20px; color: var(--text-muted); font-size: 13px; } /* ── Responsive: Sidebar klappt bei kleinem Viewport nach oben ───────────── */ @media (max-width: 680px) { .sp-layout { flex-direction: column; } .sp-nav { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--border-color); padding: 8px 10px; gap: 4px; flex-shrink: 0; max-height: 56px; } .sp-nav-item { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 7px 10px; } .sp-nav-separator { display: none; } .sp-content { padding: 16px; } } .btn-delete-user { background: none; border: none; color: var(--color-danger); cursor: pointer; opacity: 0.45; transition: var(--transition-fast); padding: 4px; border-radius: 4px; display: flex; align-items: center; } .btn-delete-user:hover { opacity: 1; background: rgba(255, 84, 112, 0.1); } /* ========================================================================== PLAN EDITOR ========================================================================== */ .plan-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; } .plan-editor-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px; } .plan-editor-card.popular-plan { border-color: rgba(0, 242, 254, 0.3); } .plan-editor-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; display: block; } .plan-editor-input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 6px 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 12px; outline: none; margin-bottom: 8px; transition: var(--transition-fast); } .plan-editor-input:focus { border-color: var(--border-focus); } .plan-editor-textarea { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 6px 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 11px; outline: none; resize: vertical; min-height: 55px; margin-bottom: 8px; transition: var(--transition-fast); } .plan-editor-textarea:focus { border-color: var(--border-focus); } /* ========================================================================== SOURCE ADMIN EDITOR ========================================================================== */ .source-admin-item { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 14px; margin-bottom: 12px; } .source-admin-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .source-admin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; } /* ========================================================================== SECURITY SETTINGS ========================================================================== */ .security-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); gap: 20px; } .security-toggle-info { flex: 1; } .security-toggle-info h5 { font-size: 13px; color: var(--text-primary); margin-bottom: 3px; font-weight: 600; } .security-toggle-info p { font-size: 11px; color: var(--text-secondary); line-height: 1.4; } /* ========================================================================== CUSTOMIZER FORM (Admin Design Tab) ========================================================================== */ .customizer-form { display: flex; flex-direction: column; gap: 10px; } .customizer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .customizer-field-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; display: block; } .customizer-textarea { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 12px; outline: none; resize: vertical; min-height: 70px; } .customizer-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; } .customizer-color-picker { display: flex; flex-direction: column; align-items: center; gap: 4px; } .customizer-color-label { font-size: 10px; color: var(--text-muted); } .customizer-color-picker input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: none; cursor: pointer; padding: 2px; } .customizer-footer { align-items: end; } .customizer-save-btn { height: 100%; min-height: 36px; } /* ========================================================================== PAYMENT MODAL ========================================================================== */ .payment-modal-card { max-width: 500px; } .payment-plan-summary { background: rgba(0, 242, 254, 0.04); border: 1px solid rgba(0, 242, 254, 0.2); border-radius: var(--border-radius-md); padding: 18px; margin: 8px 0 16px 0; text-align: center; } .payment-plan-name { font-size: 18px; font-weight: 700; color: var(--color-info); margin-bottom: 6px; } .payment-plan-price { font-family: var(--font-title); font-size: 36px; font-weight: 800; color: var(--text-primary); } .payment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-top: 8px; } .stripe-placeholder { background: rgba(127, 90, 240, 0.06); border: 1px solid rgba(127, 90, 240, 0.2); border-radius: var(--border-radius-md); padding: 12px; margin-bottom: 8px; font-size: 11px; color: var(--text-secondary); text-align: center; line-height: 1.5; } .stripe-placeholder strong { color: var(--color-info); display: block; margin-bottom: 4px; } /* Admin list box shared */ .admin-list-box { background: rgba(0, 0, 0, 0.15); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 12px; max-height: 340px; overflow-y: auto; font-size: 11.5px; } .admin-backup-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-backup-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 11.5px; } .admin-backup-row:last-child { border-bottom: none; } .admin-backup-row-actions { display: flex; gap: 6px; } .btn-backup-restore { background: rgba(44, 182, 125, 0.1); border: 1px solid rgba(44, 182, 125, 0.2); color: var(--color-success); font-size: 10px; padding: 3px 8px; border-radius: var(--border-radius-sm); cursor: pointer; font-family: var(--font-body); transition: var(--transition-fast); } .btn-backup-restore:hover { background: rgba(44, 182, 125, 0.2); } .btn-backup-delete { background: rgba(255, 84, 112, 0.1); border: 1px solid rgba(255, 84, 112, 0.2); color: var(--color-danger); font-size: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); cursor: pointer; font-family: var(--font-body); transition: var(--transition-fast); } .btn-backup-delete:hover { background: rgba(255, 84, 112, 0.2); } /* ========================================================================== ADMIN CONTROLS SECTION (wrapper) ========================================================================== */ .admin-controls-section { border-top: 2px solid rgba(127, 90, 240, 0.3); padding-top: 20px; margin-top: 4px; } /* ========================================================================== USER TABLE – EXTENDED ========================================================================== */ .user-tab-toolbar { display: flex; justify-content: space-between; align-items: center; } .user-row-banned td { opacity: 0.5; } .td-expiring { color: var(--color-warning) !important; font-size: 11px; font-weight: 600; } .user-note { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 400; } .user-action-btns { display: flex; gap: 4px; align-items: center; } .user-action-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 5px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; transition: var(--transition-fast); } .user-action-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .user-action-btn.btn-warn-active { color: var(--color-warning); border-color: rgba(255, 184, 48, 0.3); background: rgba(255, 184, 48, 0.08); } .user-action-btn.btn-danger:hover { color: var(--color-danger); background: rgba(255, 84, 112, 0.1); border-color: rgba(255, 84, 112, 0.3); } /* ========================================================================== OFFENE ABO-ANFRAGEN (Benutzerverwaltung) ========================================================================== */ .sub-pending-banner { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.5; color: var(--text-primary); background: rgba(255, 184, 48, 0.08); border: var(--border-width, 1px) solid rgba(255, 184, 48, 0.32); border-radius: calc(var(--radius-base, 8px) * 0.7); padding: 10px 12px; margin-bottom: 12px; } .sub-pending-banner i { flex-shrink: 0; color: var(--color-warning); margin-top: 1px; } .sub-pending-banner em { color: var(--color-warning); font-style: normal; font-weight: 600; } .sub-pending { margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--color-warning); white-space: nowrap; } /* ========================================================================== LOGIN-VERLAUF (Benutzerverwaltung) Nutzt Design-Tokens, damit Light-Theme und Aurora Pro mitziehen. ========================================================================== */ .activity-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .activity-summary > div { background: var(--bg-card); border: var(--border-width, 1px) solid var(--border-color); border-radius: calc(var(--radius-base, 8px) * 0.75); padding: 10px 12px; min-width: 0; } .activity-summary strong { display: block; color: var(--text-primary); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; } .activity-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .activity-notice { display: flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); background: var(--bg-card); border: var(--border-width, 1px) solid var(--border-color); border-radius: calc(var(--radius-base, 8px) * 0.6); padding: 8px 10px; margin-bottom: 12px; } .activity-notice i { flex-shrink: 0; color: var(--text-muted); } .activity-day + .activity-day { margin-top: 12px; } .activity-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); padding-bottom: 5px; border-bottom: var(--border-width, 1px) solid var(--border-color); } .activity-day-count { flex-shrink: 0; font-weight: 500; color: var(--text-muted); } .activity-times { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .activity-times li { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-primary); background: var(--bg-card-hover); border: var(--border-width, 1px) solid var(--border-color); border-radius: 999px; padding: 3px 9px 3px 7px; } .activity-times i { color: var(--color-accent); } .activity-empty { text-align: center; padding: 26px 12px; color: var(--text-muted); } .activity-empty i { color: var(--text-muted); } .activity-empty p { margin: 8px 0 0; font-size: 12.5px; } @media (max-width: 480px) { .activity-summary { grid-template-columns: 1fr; } } /* ========================================================================== ADMIN USER MODAL ========================================================================== */ .aum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .aum-grid { grid-template-columns: 1fr; } } .aum-section { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 4px; } .aum-section-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } /* ========================================================================== SIDEBAR WIDGET SYSTEM ========================================================================== */ /* ── Widget-Karte ─────────────────────────────────────────────────────────── */ .sb-widget { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; flex-shrink: 0; /* verhindert Schrumpfen im Flex-Sidebar → Inhalt bleibt vollständig */ } .sb-widget + .sb-widget { margin-top: 8px; } /* ── Gesperrte Karte: roter linker Rand ─────────────────────────────────── */ .sb-widget-locked { border-left: 2px solid rgba(255, 84, 112, 0.5); } /* ── Drag-Zustände ───────────────────────────────────────────────────────── */ .sb-widget.sb-dragging { opacity: 0.4; } .sb-widget.sb-drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } /* ── Header ──────────────────────────────────────────────────────────────── */ .sb-widget-header { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border-color); } .sb-widget-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; min-width: 0; } .sb-widget-locked .sb-widget-title { color: var(--text-secondary); } /* ── Theme Preset Picker ──────────────────────────────────────────────────── */ .theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .theme-preset-card { position: relative; border: 2px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; background: rgba(255,255,255,0.03); } .theme-preset-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.2); } .theme-preset-card.active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 4px 20px rgba(127,90,240,0.2); } .theme-preview-strip { height: 90px; overflow: hidden; } .theme-preview-bg { width: 100%; height: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; } .theme-preview-card { width: 80%; padding: 8px 10px; } .theme-preview-bar { height: 6px; border-radius: 3px; } .theme-card-info { padding: 10px 12px 12px; } .theme-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; } .theme-card-desc { font-size: 10px; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; } .theme-swatches { display: flex; gap: 5px; } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; } .theme-active-badge { position: absolute; top: 8px; right: 8px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 20px; display: flex; align-items: center; gap: 4px; } /* Design-Templates list (settings → Design) */ .dt-list { display: flex; flex-direction: column; gap: 6px; } .dt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); transition: border-color 0.15s, background 0.15s; } .dt-row:hover { background: rgba(127, 127, 127, 0.06); border-color: var(--border-focus); } .dt-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dt-name { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-meta { font-size: 10px; color: var(--text-muted); } .dt-actions { display: flex; gap: 4px; flex-shrink: 0; } .dt-btn { padding: 4px 7px; font-size: 11px; } .dt-btn-load { color: var(--color-accent); font-weight: 600; } .dt-btn-danger:hover { color: var(--color-danger); border-color: var(--color-danger); } /* ── Profile Card ─────────────────────────────────────────────────────────── */ .profile-card { display: flex; align-items: center; gap: 18px; padding: 20px !important; } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: -0.03em; } .profile-meta { min-width: 0; flex: 1; } .profile-username { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .profile-email { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; word-break: break-all; } .profile-badges { display: flex; flex-wrap: wrap; gap: 5px; } /* Settings card sub-heading */ .sp-card-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } /* ── Password Input with toggle ────────────────────────────────────────────── */ .pw-input-wrap { position: relative; display: flex; align-items: center; } .pw-input-wrap input { flex: 1; padding-right: 38px !important; } .pw-toggle-btn { position: absolute; right: 8px; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; display: flex; align-items: center; transition: color 0.15s ease; } .pw-toggle-btn:hover { color: var(--text-primary); } /* ── Password Strength Meter ───────────────────────────────────────────────── */ .pw-strength-bar { margin-top: 6px; } .pw-strength-track { display: flex; gap: 3px; margin-bottom: 4px; } .pw-strength-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: background 0.3s ease; } .pw-strength-seg.active { background: #ccc; } .pw-strength-label { font-size: 11px; font-weight: 600; } /* ── Admin: Feature Flags ─────────────────────────────────────────────────── */ .feature-flags-list { display: flex; flex-direction: column; } .feature-flag-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); transition: background 0.15s ease; } .feature-flag-row:last-child { border-bottom: none; } .feature-flag-row:hover { background: rgba(255,255,255,0.02); } .feature-flag-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .feature-flag-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .feature-flag-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; } /* Reuse of .switch/.slider pattern but namespaced to avoid conflicts */ .ff-toggle { position: relative; display: inline-block; width: 42px; height: 22px; flex-shrink: 0; cursor: pointer; } .ff-toggle input { opacity: 0; width: 0; height: 0; } .ff-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .ff-slider::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: var(--text-secondary); border-radius: 50%; transition: transform 0.2s ease, background 0.2s ease; } .ff-toggle input:checked + .ff-slider { background: rgba(44, 182, 125, 0.25); border-color: var(--color-accent); box-shadow: 0 0 8px rgba(44, 182, 125, 0.3); } .ff-toggle input:checked + .ff-slider::before { transform: translateX(20px) translateY(-50%); background: var(--color-accent); } /* ── Category Filter "+" button ──────────────────────────────────────────── */ .category-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; } .category-add-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(44, 182, 125, 0.08); } /* ── Admin: Tags-Datenbank & Kategorie-Verwaltung ────────────────────────── */ .cat-edit-row { border: 1px solid var(--border-color); } .cat-edit-row:hover { border-color: var(--color-accent-muted, var(--border-color)); } .cat-req-row:last-child { border-bottom: none; } .sb-widget-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .sb-widget-action-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 3px; border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .sb-widget-action-btn:hover { color: var(--color-accent); background: rgba(0, 242, 254, 0.08); } /* ── Drag-Handle ─────────────────────────────────────────────────────────── */ .sb-drag-handle { cursor: grab; color: var(--text-muted); opacity: 0.35; flex-shrink: 0; transition: opacity 0.15s; } .sb-drag-handle:hover { opacity: 0.85; } .sb-drag-handle:active { cursor: grabbing; } /* ── Count-Badge ─────────────────────────────────────────────────────────── */ .sb-widget-badge { font-size: 10px; font-weight: 600; color: var(--color-info); background: rgba(0, 242, 254, 0.08); border: 1px solid rgba(0, 242, 254, 0.15); padding: 1px 7px; border-radius: 10px; white-space: nowrap; } /* ── Schloss-Icon im Header ──────────────────────────────────────────────── */ .sb-lock-badge-icon { opacity: 0.8; } /* ── Body – immer sichtbar ───────────────────────────────────────────────── */ .sb-widget-body.has-padding { padding: 12px 14px; } /* ── Lock-Overlay für gesperrte Widgets (immer sichtbar, klare Stufe) ──────── */ .sb-lock-overlay { position: relative; /* im Fluss → Widget wächst mit dem Inhalt */ display: flex; align-items: center; justify-content: center; padding: 16px 12px; background: linear-gradient(rgba(127, 90, 240, 0.06), rgba(127, 90, 240, 0.06)); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); cursor: default; } .sb-lock-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; max-width: 100%; } .sb-lock-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .sb-lock-tag-ico { width: 10px; height: 10px; } .sb-lock-tier { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 7px; font-size: 15px; font-weight: 800; line-height: 1.15; color: var(--text-primary); } .sb-lock-price { font-size: 11px; font-weight: 600; color: var(--color-primary); white-space: nowrap; } .sb-lock-detail { font-size: 10.5px; line-height: 1.4; color: var(--text-secondary); max-width: 24ch; overflow-wrap: anywhere; hyphens: auto; } .sb-lock-btn { margin-top: 3px; max-width: 100%; white-space: normal; /* Button-Text darf umbrechen statt zu überlaufen */ line-height: 1.25; height: auto; padding: 6px 12px; } /* ── Hilfsklassen für Widget-Inhalt ──────────────────────────────────────── */ .sb-input-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .sb-input-row input { flex: 1; min-width: 0; } .sb-limit-bar { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; } .sb-badge-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; } /* ── Portfolio-Matches ───────────────────────────────────────────────────── */ #portfolio-matches-container { margin-top: 10px; } .matches-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; } .matches-header--active { color: var(--color-primary); } .portfolio-match-list { display: flex; flex-direction: column; gap: 4px; } .portfolio-match-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 7px 9px; cursor: pointer; transition: background 0.1s, border-color 0.1s; } .portfolio-match-item:hover { background: rgba(127, 90, 240, 0.08); border-color: rgba(127, 90, 240, 0.25); } .portfolio-match-title { font-size: 11px; color: var(--text-primary); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .portfolio-match-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; } .portfolio-match-badge { font-size: 9px; font-weight: 700; background: rgba(127, 90, 240, 0.15); color: var(--color-primary); border-radius: 4px; padding: 1px 5px; } .portfolio-match-source { font-size: 9px; color: var(--text-muted); flex-shrink: 0; } /* ── Portfolio News View (minimalist sidebar) ─────────────────────────────── */ .ptw-news-view { display: flex; flex-direction: column; gap: 8px; } .ptw-settings-panel { padding-top: 4px; } .ptw-group { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .ptw-group-header { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(0,0,0,0.12); border-bottom: 1px solid var(--border-color); } .ptw-group-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--color-accent); text-transform: uppercase; } .ptw-group-sublabel { font-size: 10px; color: var(--text-muted); margin-left: 2px; } .ptw-news-item { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; } .ptw-news-item:last-child { border-bottom: none; } .ptw-news-item.ptw-news-read { opacity: 0.45; } .ptw-news-title { font-size: 11px; line-height: 1.4; color: var(--text-primary); cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .ptw-news-title:hover { color: var(--color-accent); } .ptw-news-meta { display: flex; align-items: center; gap: 5px; } .ptw-news-source { font-size: 9px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ptw-news-age { font-size: 9px; color: var(--text-muted); flex-shrink: 0; } .ptw-done-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border-color); border-radius: 4px; width: 18px; height: 18px; cursor: pointer; color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; } .ptw-done-btn:hover { background: rgba(0,242,254,0.08); border-color: var(--color-accent); color: var(--color-accent); } .ptw-done-btn.ptw-done-active { background: rgba(0,200,100,0.15); border-color: var(--color-success); color: var(--color-success); } .ptw-empty { padding: 16px 10px; } .ptw-no-news { font-size: 11px; color: var(--text-muted); text-align: center; padding: 12px 0; margin: 0; } .ptw-persons-section { margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 10px; } .ptw-persons-label { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); margin-bottom: 8px; } .ptw-persons-add { display: flex; gap: 8px; margin-top: 8px; } .sb-widget-action-btn.active { color: var(--color-accent); background: rgba(0,242,254,0.1); } /* ========================================================================== RECHTLICHES — Legal Modal & Settings ========================================================================== */ /* Großes Legal-Modal */ .legal-modal-card { width: 95%; max-width: 700px; max-height: 88vh; display: flex; flex-direction: column; } .legal-modal-body { overflow-y: auto; padding: 20px 24px; flex: 1; font-size: 13px; line-height: 1.7; color: var(--text-secondary); } .legal-modal-body h2 { font-size: 18px; color: var(--text-primary); margin-bottom: 16px; } .legal-modal-body h3 { font-size: 14px; color: var(--text-primary); margin: 14px 0 6px; } .legal-modal-body p { margin-bottom: 10px; } .legal-modal-body ul { padding-left: 20px; margin-bottom: 10px; } .legal-modal-body li { margin-bottom: 4px; } .legal-modal-body strong { color: var(--text-primary); } /* Textarea in den Legal-Settings */ .legal-textarea { width: 100%; resize: vertical; font-size: 11.5px; font-family: 'Consolas', 'Courier New', monospace; line-height: 1.5; min-height: 180px; background: rgba(0,0,0,0.3); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px 12px; } .legal-textarea:focus { border-color: var(--border-focus); outline: none; } /* Consent-Checkboxen im Registrierungsformular */ .legal-consent-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; background: rgba(0, 242, 254, 0.04); border: 1px solid rgba(0, 242, 254, 0.12); border-radius: var(--border-radius-sm); } .legal-consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; color: var(--text-secondary); cursor: pointer; line-height: 1.5; } .legal-consent-label input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer; } /* ========================================================================== ERWEITERTES TAG-SYSTEM ========================================================================== */ /* ── Tag-Item in der Sidebar ─────────────────────────────────────────────── */ .tag-item { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--border-color); } .tag-item:last-child { border-bottom: none; } .tag-item.tag-inactive { opacity: 0.45; } .tag-item.tag-inactive:hover { opacity: 0.85; } /* Farb-Swatch: nativer Color-Picker ohne Browser-Rahmen */ .tag-color-input { width: 20px; height: 20px; border: none; border-radius: 4px; padding: 0; cursor: pointer; flex-shrink: 0; background: none; } .tag-color-input::-webkit-color-swatch-wrapper { padding: 0; } .tag-color-input::-webkit-color-swatch { border: none; border-radius: 4px; } .tag-color-input::-moz-color-swatch { border: none; border-radius: 4px; } .tag-item-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-item-actions { display: flex; gap: 3px; flex-shrink: 0; } .tag-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: 3px; display: flex; align-items: center; transition: color 0.1s, background 0.1s; } .tag-action-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); } .tag-action-btn.tag-remove:hover { color: var(--color-danger); background: rgba(255,84,112,0.1); } /* ── Stern-Button ────────────────────────────────────────────────────────── */ .tag-action-btn.tag-star-active { color: #ffd93d; } .tag-action-btn.tag-star-active:hover { background: rgba(255, 217, 61, 0.12); color: #ffd93d; } .tag-action-btn.tag-star-locked { opacity: 0.3; cursor: not-allowed; } /* Stern-Badge inline neben Tag-Name */ .tag-starred-badge { font-size: 11px; flex-shrink: 0; line-height: 1; } /* ── Tag-Button in der Filter-Leiste ─────────────────────────────────────── */ .filter-btn-tag { display: flex; align-items: center; gap: 5px; } .filter-tag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; opacity: 0.85; } /* ========================================================================== LANDING PAGE EDITOR ========================================================================== */ /* ── Edit-Mode: Elemente hervorheben ─────────────────────────────────────── */ .lp-edit-mode [data-lp-field] { outline: 1px dashed rgba(127, 90, 240, 0.35); outline-offset: 2px; cursor: pointer; transition: outline-color 0.15s; } .lp-edit-mode [data-lp-field]:hover { outline-color: var(--color-primary); outline-width: 2px; background: rgba(127, 90, 240, 0.06); } .lp-edit-mode [data-lp-field].lp-selected { outline: 2px solid var(--color-primary); background: rgba(127, 90, 240, 0.1); } /* Padding für Landing-Page wegen Editor-Panel */ .lp-edit-mode .homepage-wrapper { padding-right: 390px; } /* ── Editor-Panel ─────────────────────────────────────────────────────────── */ #lp-editor-panel { position: fixed; top: 0; right: 0; width: 380px; height: 100vh; z-index: 500; background: rgba(10, 11, 18, 0.98); border-left: 1px solid var(--border-color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; overflow: hidden; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5); } /* Header */ .lp-ep-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background: rgba(18, 20, 32, 0.9); } .lp-ep-header h2 { font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; } /* Scrollbarer Body */ .lp-ep-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } /* Sektions-Container */ .lp-ep-section { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 12px 14px; } .lp-ep-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } /* Feld (Label + Input) */ .lp-ep-field { margin-bottom: 10px; } .lp-ep-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .lp-ep-field label .lp-icon-hint { font-weight: 400; color: var(--text-muted); font-size: 10px; } .lp-ep-input { width: 100%; font-size: 12px; padding: 6px 9px; } .lp-ep-textarea { width: 100%; font-size: 12px; padding: 6px 9px; resize: vertical; min-height: 60px; } /* Farb-Grid */ .lp-ep-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .lp-color-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); } .lp-color-row input[type="color"] { width: 32px; height: 28px; border: 1px solid var(--border-color); border-radius: 5px; padding: 2px; cursor: pointer; background: none; flex-shrink: 0; } /* Range-Slider */ .lp-ep-range { width: 100%; margin-top: 4px; accent-color: var(--color-primary); } /* Toggle-Reihe */ .lp-ep-toggle { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; margin-bottom: 8px; user-select: none; } /* Feature-Card-Editor */ .lp-fc-editor { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--border-radius-sm); padding: 10px; margin-top: 8px; } .lp-fc-num { font-size: 10px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .lp-icon-preview { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(127, 90, 240, 0.12); border-radius: 6px; flex-shrink: 0; color: var(--color-primary); } /* Footer mit Speichern-Buttons */ .lp-ep-footer { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border-color); flex-shrink: 0; background: rgba(10, 11, 18, 0.9); } .lp-ep-footer .btn { flex: 1; } /* ── Editor tab bar ──────────────────────────────────────────────────────── */ .lp-ep-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); padding: 0 12px; background: rgba(0,0,0,0.15); flex-shrink: 0; } .lp-tab { padding: 9px 16px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.02em; } .lp-tab:hover { color: var(--text-primary); } .lp-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ── Design tabs in Settings page ───────────────────────────────────────── */ .design-tab-bar { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color); padding-bottom: 0; } .design-tab { display: flex; align-items: center; gap: 5px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.02em; flex-shrink: 0; } .design-tab:hover { color: var(--text-primary); } .design-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ── Design controls in Settings ────────────────────────────────────────── */ .design-section { border: 1px solid var(--border-color); border-radius: var(--border-radius-md, 10px); overflow: hidden; margin-bottom: 12px; } .design-section-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border-color); } .design-section-body { padding: 14px; } /* bg-type radio toggle */ .bg-type-group { display: flex; gap: 6px; margin-bottom: 12px; } .bg-type-btn { flex: 1; padding: 7px 10px; font-size: 11px; font-weight: 600; text-align: center; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm, 6px); background: rgba(255,255,255,0.04); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; } .bg-type-btn:hover { border-color: var(--color-primary); color: var(--text-primary); } .bg-type-btn.active { background: rgba(127,90,240,0.12); border-color: var(--color-primary); color: var(--color-primary); } /* pattern selector */ .pattern-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .pattern-tile { aspect-ratio: 1; border-radius: 6px; border: 2px solid var(--border-color); cursor: pointer; overflow: hidden; transition: border-color 0.15s; position: relative; background: var(--bg-card, rgba(18,20,32,0.6)); } .pattern-tile.active { border-color: var(--color-primary); } .pattern-tile:hover { border-color: rgba(127,90,240,0.5); } .pattern-tile-label { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; font-weight: 600; text-align: center; padding: 3px 2px; background: rgba(0,0,0,0.5); color: var(--text-secondary); } /* gradient pickers inline */ .gradient-row { display: none; gap: 8px; align-items: center; margin-bottom: 10px; } .gradient-row.visible { display: flex; } .gradient-angle-wrap { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); flex: 1; } /* color grid */ .design-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .design-color-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm, 6px); } .design-color-row input[type="color"] { width: 28px; height: 28px; border: none; border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0; background: none; } .design-color-row span { font-size: 11px; color: var(--text-secondary); } /* range sliders */ /* ── Design-Baukasten (Formen & Effekte) ─────────────────────────────────── */ .dt-grid { display: flex; flex-direction: column; gap: 10px; } .dt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dt-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .dt-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; background: rgba(127, 127, 127, 0.06); } .dt-seg-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 6px 11px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; } .dt-seg-btn + .dt-seg-btn { border-left: 1px solid var(--border-color); } .dt-seg-btn:hover { background: rgba(127, 127, 127, 0.12); color: var(--text-primary); } .dt-seg-btn.active { background: var(--color-primary); color: #fff; } .dt-sliders { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; } .dt-slider-row { display: flex; flex-direction: column; gap: 4px; } .dt-slider-row label { font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between; } .dt-slider-row strong { color: var(--color-primary); font-variant-numeric: tabular-nums; } .dt-slider-row input[type="range"] { accent-color: var(--color-primary); width: 100%; } /* Live-Vorschau der Bausteine */ .dt-preview { margin-top: 14px; padding: 12px; border: 1px dashed var(--border-color); border-radius: var(--border-radius-md); } .dt-preview-label { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .dt-preview-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dt-preview-card { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 11px; color: var(--text-secondary); background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--elev-2); } .design-range-row { margin-bottom: 10px; } .design-range-row label { font-size: 11px; color: var(--text-secondary); display: flex; justify-content: space-between; margin-bottom: 5px; } .design-range-row label strong { color: var(--text-primary); } .design-range-row input[type="range"] { width: 100%; } @media (max-width: 900px) { #lp-editor-panel { width: 100%; height: 50vh; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--border-color); } .lp-edit-mode .homepage-wrapper { padding-right: 0; padding-bottom: 52vh; } } /* ========================================================================== QUELLEN-ZEITPLAN-EDITOR ========================================================================== */ /* Grid-Layout für KI-Modus + Zeitplan-Typ in einer Zeile */ .src-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px 0; } /* Crawler settings sub-section inside a source card */ .src-crawler-section { margin: 10px 14px 0; padding: 10px 12px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); } .src-crawler-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; } .src-settings-hint { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); opacity: 0.7; margin-left: 4px; } html[data-scheme="light"] .src-crawler-section { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); } /* Container für dynamische Felder je nach Zeitplan-Typ */ .src-sched-fields { padding: 8px 14px 0; } /* Einfache Zeile mit Label + Input + Label (Intervall, Zeitfenster) */ .src-sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Multi-Window Zeitplan-Editor ───────────────────────────────────────── */ .sched-mw-help { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; padding: 6px 8px; background: rgba(0,242,254,0.04); border: 1px solid rgba(0,242,254,0.1); border-radius: var(--border-radius-sm); } .sched-mw-container { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } /* Einzelne Fenster-Zeile */ .sched-mw-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 6px 10px; } /* Trennzeile mit Add-Button + Default-Interval */ .sched-mw-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; } .sched-mw-default { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ── Gruppenquellen-Feed-Editor ──────────────────────────────────────────── */ .group-feeds-editor { background: rgba(0, 242, 254, 0.03); border: 1px solid rgba(0, 242, 254, 0.12); border-radius: var(--border-radius-sm); padding: 10px 12px; margin: 10px 14px 0; } .group-feeds-header { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-info); margin-bottom: 8px; } .group-feeds-list { display: flex; flex-direction: column; gap: 5px; } .group-feeds-empty { font-size: 11px; color: var(--text-muted); margin: 0; padding: 4px 0; } .group-feed-row { display: flex; align-items: center; gap: 6px; } /* Source-Admin-Karte */ .source-admin-item { background: rgba(255,255,255,0.025); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 14px; margin-bottom: 12px; } .source-admin-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; } /* Icon-Upload-Element in der Quellen-Verwaltung */ .src-icon-wrap { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; } .src-icon-wrap:hover { border-color: var(--color-primary); } .src-icon-preview { width: 28px; height: 28px; object-fit: contain; display: block; } /* ========================================================================== STATS SECTION ========================================================================== */ .stats-section { padding: 48px 0; } .stats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 60px; max-width: 900px; margin: 0 auto; } .stat-item { text-align: center; min-width: 120px; } .stat-number { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; font-family: var(--font-title); line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================================== TESTIMONIALS SECTION ========================================================================== */ .testimonials-section { padding: 60px 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 32px auto 0; } .testimonial-card { padding: 24px; border-radius: var(--border-radius-lg); display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--border-color); transition: transform 0.2s ease, box-shadow 0.2s ease; } .testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-hover); } .testimonial-quote { font-size: 14px; line-height: 1.6; color: var(--text-primary); font-style: italic; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; } .testimonial-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .testimonial-role { font-size: 11px; color: var(--text-secondary); margin-top: 2px; } /* Feature card with optional image */ .feature-card .feature-card-img { width: 100%; height: 120px; object-fit: cover; border-radius: calc(var(--border-radius-md) - 2px); margin-bottom: 10px; } /* ========================================================================== MEDIA PICKER MODAL ========================================================================== */ .media-picker-card { width: min(90vw, 820px); max-height: 85vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; } .media-picker-card .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .media-picker-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.1); flex-shrink: 0; flex-wrap: wrap; } .media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 200px; } .media-item { position: relative; border-radius: var(--border-radius-md); border: 2px solid var(--border-color); overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.2); transition: border-color 0.15s, transform 0.15s; } .media-item:hover { border-color: var(--color-primary); transform: scale(1.02); } .media-item-img { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.15); } .media-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-item-meta { padding: 6px 8px; } .media-item-name { font-size: 10px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-item-size { font-size: 9px; color: var(--text-muted); margin-top: 1px; } .media-item-delete { position: absolute; top: 4px; right: 4px; background: rgba(255, 84, 112, 0.85); color: #fff; border: none; border-radius: 4px; padding: 3px 5px; cursor: pointer; opacity: 0; transition: opacity 0.15s; line-height: 1; display: flex; align-items: center; justify-content: center; } .media-item:hover .media-item-delete { opacity: 1; } .media-item-delete:hover { background: var(--color-danger); } /* ── Announcements Banner ──────────────────────────────────────────────────── */ .announcements-banner-area { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 0; } .ann-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-left: 3px solid var(--color-info); border-radius: 8px; background: rgba(255,255,255,0.03); backdrop-filter: blur(8px); border: 1px solid var(--border-color); border-left-width: 3px; animation: annSlideIn 0.25s ease; } @keyframes annSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .ann-banner.ann-pinned { background: rgba(255,255,255,0.05); } .ann-icon { margin-top: 1px; flex-shrink: 0; } .ann-body { flex: 1; min-width: 0; } .ann-title { font-weight: 600; font-size: 12px; color: var(--text-primary); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; } .ann-content { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .ann-cal-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,0.06); border-radius: 4px; padding: 2px 6px; } .ann-stock-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; } .ann-dismiss-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; border-radius: 4px; opacity: 0.6; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; } .ann-dismiss-btn:hover { opacity: 1; color: var(--text-primary); } /* Cal dot for announcements */ .cal-dot-ann { width: 6px !important; height: 6px !important; animation: annPulse 2s infinite; } @keyframes annPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Admin list card */ .ann-admin-item { padding: 10px 14px; } /* Announcement time badge */ .ann-time-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; margin-right: 6px; font-size: 10px; font-weight: 600; color: var(--text-primary); background: rgba(255,255,255,0.07); border-radius: 4px; padding: 2px 7px; border: 1px solid var(--border-color); } /* Calendar event time chip */ .cal-event-time { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--color-primary); background: rgba(127,90,240,0.12); border-radius: 4px; padding: 1px 6px; } /* Group visibility checkboxes */ .ann-group-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .ann-group-check-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); cursor: pointer; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: rgba(255,255,255,0.03); transition: background 0.15s, border-color 0.15s; } .ann-group-check-label:hover { background: rgba(127,90,240,0.08); border-color: var(--color-primary); color: var(--text-primary); } .ann-group-check-label input[type="checkbox"] { accent-color: var(--color-primary); } /* ========================================================================== SIDEBAR FEEDBACK FORM ========================================================================== */ /* ========================================================================== GROUP EDITOR DRAG & DROP ========================================================================== */ .group-editor-card { transition: opacity .15s, box-shadow .15s; } .group-editor-card.grp-dragging { opacity: .4; box-shadow: none; } .group-editor-card.grp-drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(99,102,241,.25); } .grp-drag-handle { opacity: .45; transition: opacity .15s; touch-action: none; } .group-editor-card:hover .grp-drag-handle { opacity: .85; } /* ========================================================================== SIDEBAR FEEDBACK FORM ========================================================================== */ .sb-feedback-form { border-top: 1px solid var(--border-color); margin-top: 8px; padding-top: 8px; } .sb-feedback-toggle { display: flex; align-items: center; gap: 7px; width: 100%; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 12px; padding: 8px 10px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .sb-feedback-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--color-primary); } .sb-feedback-body { padding: 10px 2px 4px; display: flex; flex-direction: column; gap: 8px; } .sb-feedback-select, .sb-feedback-textarea { width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; padding: 7px 10px; resize: vertical; font-family: inherit; } .sb-feedback-select:focus, .sb-feedback-textarea:focus { outline: none; border-color: var(--color-primary); } .sb-feedback-select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; } .sb-feedback-select option { background: var(--bg-popup); color: var(--text-primary); } /* ========================================================================== ADMIN MESSAGES VIEW ========================================================================== */ .admin-msg-item { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; transition: border-color .15s; } .admin-msg-item:not(.admin-msg-read) { border-left: 3px solid var(--color-primary); } .admin-msg-item.admin-msg-read { opacity: .75; } .admin-msg-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .admin-msg-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 2px 7px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; } .msg-badge-feedback { background: rgba(99,102,241,.18); color: #818cf8; } .msg-badge-contact { background: rgba(16,185,129,.18); color: #34d399; } .admin-msg-sender { font-size: 12px; color: var(--text-primary); } .admin-msg-email { color: var(--text-secondary); font-size: 11px; } .admin-msg-date { margin-left: auto; font-size: 11px; color: var(--text-secondary); white-space: nowrap; } .admin-msg-text { font-size: 13px; color: var(--text-primary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--bg-tertiary, var(--bg-hover)); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; } .admin-msg-actions { display: flex; align-items: center; gap: 8px; } .admin-msg-read-label { font-size: 11px; color: var(--text-secondary); } .admin-msg-del-btn { margin-left: auto; } /* ========================================================================== CONTACT FORM (Impressum Modal) ========================================================================== */ .contact-form-wrap { display: flex; flex-direction: column; gap: 10px; } .contact-form-input { width: 100%; background: var(--bg-input, var(--bg-secondary)); border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-primary); font-size: 13px; padding: 9px 12px; font-family: inherit; box-sizing: border-box; resize: vertical; } .contact-form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(99,102,241,.15); } .contact-form-captcha-row { display: flex; align-items: center; gap: 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 7px; padding: 8px 12px; } .contact-form-captcha-q { font-size: 13px; color: var(--text-primary); font-weight: 500; flex: 1; } .contact-form-captcha-input { width: 70px; background: var(--bg-input, var(--bg-tertiary, var(--bg-hover))); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-primary); font-size: 13px; padding: 5px 8px; text-align: center; font-family: inherit; } .contact-form-captcha-input:focus { outline: none; border-color: var(--color-primary); } .contact-form-refresh-btn { flex-shrink: 0; } /* ── System-Status / Health Checks ────────────────────────────────────────── */ .health-loading { display: flex; align-items: center; gap: 10px; padding: 20px 0; color: var(--color-text-muted); font-size: 0.9rem; } .health-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-color); border-top-color: var(--color-primary); border-radius: 50%; animation: health-rotate 0.8s linear infinite; flex-shrink: 0; } @keyframes health-rotate { to { transform: rotate(360deg); } } .health-check-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border-color); background: var(--bg-card); } .health-check-item.health-error { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); } .health-check-item.health-warn { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.05); } .health-check-item.health-ok { border-color: rgba(34,197,94,0.30); background: rgba(34,197,94,0.05); } .health-check-item.health-info { border-color: rgba(99,179,237,0.30); background: rgba(99,179,237,0.05); } .health-status-pill { flex-shrink: 0; margin-top: 2px; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .health-pill-error { background: rgba(239,68,68,0.18); color: #f87171; } .health-pill-warn { background: rgba(245,158,11,0.18); color: #fbbf24; } .health-pill-ok { background: rgba(34,197,94,0.18); color: #4ade80; } .health-pill-info { background: rgba(99,179,237,0.18); color: #93c5fd; } .health-check-body { flex: 1; min-width: 0; } .health-check-body strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--color-text); margin-bottom: 3px; } .health-check-body p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.45; } .health-action-btn { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; margin-right: 6px; margin-bottom: 4px; } .health-action-btn:hover { background: var(--color-primary); color: var(--text-primary); } .health-action-btn.health-action-cancel { border-color: var(--border-color); color: var(--color-text-muted); } .health-action-btn.health-action-cancel:hover { background: var(--border-color); color: var(--color-text); } .health-inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; } .health-inline-input { flex: 1; min-width: 200px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-popup); color: var(--text-primary); font-size: 0.83rem; font-family: inherit; } .health-inline-input:focus { outline: none; border-color: var(--color-primary); } select.health-inline-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; } select.health-inline-input option, select.aikeys-input option { background: var(--bg-popup); color: var(--text-primary); } html[data-scheme="light"] .health-inline-input { background: #f8fafc; color: #1e293b; border-color: #cbd5e1; } html[data-scheme="light"] select.health-inline-input option { background: #f8fafc; color: #1e293b; } .health-smtp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } /* ── Session Alert Bell & Dropdown ────────────────────────────────────────── */ .alert-bell-wrap { position: relative; display: inline-flex; } /* Red unread-count badge on the bell */ .alert-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px; background: var(--color-danger, #ef4444); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; z-index: 10; justify-content: center; align-items: center; } /* Dropdown panel */ .alert-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; border-radius: 12px; border: 1px solid var(--border-color); background: #13151f; box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index: 2000; flex-direction: column; overflow: hidden; } html[data-scheme="light"] .alert-dropdown { background: #ffffff; box-shadow: 0 12px 40px rgba(0,0,0,0.18); } .alert-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .alert-dropdown-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text); letter-spacing: 0.03em; text-transform: uppercase; } .alert-clear-btn { background: none; border: none; color: var(--color-text-muted); font-size: 0.75rem; cursor: pointer; padding: 3px 6px; border-radius: 5px; transition: color 0.15s, background 0.15s; } .alert-clear-btn:hover { color: var(--color-danger); background: rgba(239,68,68,0.08); } .alert-dropdown-list { overflow-y: auto; flex: 1; padding: 6px 0; } .alert-empty-msg { padding: 24px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.82rem; margin: 0; } /* Individual alert row */ .alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; transition: background 0.12s; border-left: 3px solid transparent; } .alert-item:hover { background: rgba(255,255,255,0.06); } html[data-scheme="light"] .alert-item:hover { background: rgba(0,0,0,0.04); } .alert-item-info { border-left-color: var(--color-primary, #6366f1); } .alert-item-success { border-left-color: #22c55e; } .alert-item-error { border-left-color: #ef4444; } .alert-item-warning { border-left-color: #f59e0b; } /* Colored dot */ .alert-item-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; } .alert-item-info .alert-item-dot { background: var(--color-primary, #6366f1); } .alert-item-success .alert-item-dot { background: #22c55e; } .alert-item-error .alert-item-dot { background: #ef4444; } .alert-item-warning .alert-item-dot { background: #f59e0b; } .alert-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .alert-item-msg { font-size: 0.81rem; color: var(--color-text); line-height: 1.4; word-break: break-word; } .alert-item-time { font-size: 0.7rem; color: var(--color-text-muted); } /* Check (✓) and delete (×) buttons */ .alert-item-check, .alert-item-del { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; } .alert-item:hover .alert-item-check, .alert-item:hover .alert-item-del { opacity: 1; } .alert-item-check { color: #22c55e; } .alert-item-check:hover { background: rgba(34,197,94,0.12); } .alert-item-del { color: var(--color-text-muted); } .alert-item-del:hover { color: #ef4444; background: rgba(239,68,68,0.1); } /* Toast color variants */ .toast-error { border-color: rgba(239,68,68,0.4) !important; } .toast-success { border-color: rgba(34,197,94,0.4) !important; } /* ── Health panel: AI config form ─────────────────────────────────────────── */ .health-ai-form { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } .health-ai-row { display: flex; gap: 8px; flex-wrap: wrap; } .health-ai-row .health-inline-input { flex: 1; min-width: 140px; } .health-ai-key-input { width: 100%; } .health-inline-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ── KI-Prozesse Zuweisung ─────────────────────────────────────────────────── */ .aip-list { display: flex; flex-direction: column; } .aip-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); } .aip-row:last-child { border-bottom: none; } .aip-info { flex: 1; min-width: 0; } .aip-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .aip-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } .aip-select-wrap { flex-shrink: 0; width: 240px; } .aip-select { width: 100%; padding: 5px 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; cursor: pointer; } .aip-select:focus { outline: 2px solid var(--accent-blue); border-color: var(--accent-blue); } @media (max-width: 600px) { .aip-row { flex-direction: column; align-items: flex-start; } .aip-select-wrap { width: 100%; } } /* ── KI-Schlüssel Verwaltung ───────────────────────────────────────────────── */ .aikeys-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .aikeys-empty { color: var(--color-text-muted); font-size: 0.85rem; padding: 12px 0; text-align: center; } /* Key row */ .aikeys-item { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: rgba(255,255,255,0.03); margin-bottom: 6px; transition: background 0.12s; } .aikeys-item:hover { background: rgba(255,255,255,0.06); } .aikeys-item-off { opacity: 0.45; } .aikeys-item-row { display: flex; align-items: flex-start; gap: 12px; } .aikeys-rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .aikeys-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 12px; border: 1px solid; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; } .aikeys-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .aikeys-name { font-size: 0.85rem; font-weight: 600; color: var(--color-text); } .aikeys-detail { font-size: 0.72rem; color: var(--color-text-muted); font-family: monospace; margin-bottom: 0; } /* Control buttons */ .aikeys-btns { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .aikeys-btn { background: none; border: 1px solid var(--border-color); border-radius: 5px; color: var(--color-text-muted); font-size: 0.82rem; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s, border-color 0.12s; } .aikeys-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--color-text); } .aikeys-btn:disabled { opacity: 0.25; cursor: default; } .aikeys-btn-del:hover:not(:disabled) { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); color: #ef4444; } .aikeys-btn-edit:hover:not(:disabled) { background: rgba(99,179,237,0.12); border-color: rgba(99,179,237,0.4); color: #63b3ed; } .aikeys-btn-test { width: auto; padding: 0 8px; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--color-primary); border-color: rgba(127,90,240,0.35); } .aikeys-btn-test:hover:not(:disabled) { background: rgba(127,90,240,0.12); border-color: rgba(127,90,240,0.5); color: var(--color-primary); } .aikeys-btn-suggest { width: auto; height: 22px; padding: 0 8px; font-size: 0.70rem; gap: 4px; display: flex; align-items: center; color: var(--color-primary); border-color: rgba(127,90,240,0.35); border-radius: 4px; } .aikeys-btn-suggest:hover:not(:disabled) { background: rgba(127,90,240,0.12); border-color: rgba(127,90,240,0.5); } /* ── Analyse-Prompt Editor ────────────────────────────────────────────────── */ .prompt-tab { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 6px 16px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s; } .prompt-tab:hover { background: rgba(255,255,255,0.05); color: var(--color-text); } .prompt-tab-active { background: var(--card-bg, rgba(255,255,255,0.04)); border-color: var(--border-color); border-bottom-color: var(--card-bg, rgba(255,255,255,0.04)); color: var(--color-text); position: relative; z-index: 1; margin-bottom: -1px; } .prompt-editor-textarea { width: 100%; min-height: 280px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 6px; color: var(--color-text); font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.6; padding: 12px 14px; resize: vertical; box-sizing: border-box; transition: border-color 0.15s; } .prompt-editor-textarea:focus { outline: none; border-color: rgba(127,90,240,0.5); background: rgba(0,0,0,0.25); } .prompt-code-hint { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-family: monospace; } .prompt-history-toggle { gap: 5px; display: inline-flex; align-items: center; } .prompt-history-toggle-active { background: rgba(127,90,240,0.12); border-color: rgba(127,90,240,0.4); color: var(--color-primary); } .prompt-history-panel { margin-top: 14px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .prompt-history-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border-color); } .prompt-history-entry { padding: 10px 12px; border-bottom: 1px solid var(--border-color); transition: background 0.1s; } .prompt-history-entry:last-child { border-bottom: none; } .prompt-history-entry:hover { background: rgba(255,255,255,0.025); } .prompt-history-entry-latest { background: rgba(127,90,240,0.04); } .prompt-history-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .prompt-history-date { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .prompt-history-chars { font-size: 10px; color: var(--text-muted); margin-left: auto; } .prompt-history-badge { font-size: 10px; background: rgba(127,90,240,0.15); color: var(--color-primary); border: 1px solid rgba(127,90,240,0.3); border-radius: 4px; padding: 0 5px; line-height: 16px; } .prompt-history-preview { font-size: 11px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; padding: 4px 6px; background: rgba(0,0,0,0.15); border-radius: 4px; } .prompt-history-actions { display: flex; gap: 6px; align-items: center; } /* Inline edit form */ .aikeys-edit-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); } .aikeys-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .aikeys-edit-field-key { grid-column: 1 / -1; } .aikeys-edit-field > .plan-editor-label { display: block; margin-bottom: 4px; } .aikeys-edit-actions { display: flex; gap: 8px; } html[data-scheme="light"] .aikeys-edit-form { border-top-color: #e2e8f0; } /* ── Per-key Advanced Settings ───────────────────────────────────────────── */ .aikeys-advanced-wrap { margin: 8px 0; } .aikeys-advanced-toggle { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: 11px; padding: 3px 0; font-family: inherit; transition: color 0.12s; } .aikeys-advanced-toggle:hover { color: var(--color-text); } .aikeys-advanced-panel { margin-top: 10px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 8px; } .aikeys-adv-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; } .aikeys-adv-preset-group { font-size: 10px; color: var(--text-tertiary, rgba(255,255,255,0.3)); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 2px; } .aikeys-adv-preset-btn { background: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--color-text-muted); font-size: 11px; padding: 2px 8px; cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; } .aikeys-adv-preset-btn:hover { background: rgba(127,90,240,0.1); border-color: rgba(127,90,240,0.4); color: var(--color-primary); } .aikeys-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; } .aikeys-adv-full { grid-column: 1 / -1; } .aikeys-adv-hint { font-weight: 400; opacity: 0.6; font-size: 10px; margin-left: 3px; } .aikeys-adv-info { display: flex; align-items: flex-start; gap: 5px; margin-top: 10px; font-size: 10px; color: var(--color-text-muted); line-height: 1.5; } html[data-scheme="light"] .aikeys-advanced-panel { background: rgba(0,0,0,0.025); } /* Toggle switch */ .aikeys-switch { position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer; } .aikeys-switch input { opacity: 0; width: 0; height: 0; } .aikeys-switch-track { position: absolute; inset: 0; background: rgba(255,255,255,0.15); border-radius: 9px; transition: background 0.2s; } .aikeys-switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .aikeys-switch input:checked + .aikeys-switch-track { background: var(--color-primary, #6366f1); } .aikeys-switch input:checked + .aikeys-switch-track::after { transform: translateX(16px); } /* ── Read article state ────────────────────────────────────────────────────── */ .news-card.is-read { opacity: 0.48; filter: saturate(0.5); border-color: rgba(255, 255, 255, 0.04); } .news-card.is-read:hover { opacity: 0.8; filter: saturate(0.8); border-color: rgba(255, 255, 255, 0.12); } .news-card.is-read .card-title { color: var(--text-secondary); } /* "Gelesen" label inside the card header */ .card-read-label { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--color-success); text-transform: uppercase; letter-spacing: .05em; opacity: 0.8; } /* Read checkmark button */ .read-check-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s; flex-shrink: 0; padding: 0; line-height: 1; } .read-check-btn:hover { color: var(--color-success); border-color: var(--color-success); background: rgba(44, 182, 125, 0.12); transform: scale(1.12); } .read-check-btn.read-active { color: var(--color-success); border-color: var(--color-success); background: rgba(44, 182, 125, 0.15); } /* Feature #2 – Related Badge */ .card-related-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); margin-top: 4px; cursor: pointer; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); transition: color 0.15s; } .card-related-badge:hover { color: var(--text-secondary); } /* ── News-Clustering ────────────────────────────────────────────────────────── */ .card-cluster-wrap { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; } .card-cluster-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 2px 0; transition: color 0.15s; } .card-cluster-btn:hover { color: var(--text-secondary); } .card-keypoints-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 3px 0; margin-top: 2px; transition: opacity 0.15s; } .card-keypoints-btn:hover { opacity: 0.75; } .card-claims-preview .ckp-extra { animation: ckpFade 0.2s ease-out; } @keyframes ckpFade { from { opacity: 0; } to { opacity: 1; } } /* Aufgeklappte Punkte dürfen mehrzeilig sein — sonst schneidet das line-clamp der Karte gerade die Zusatzinfos ab, die man sehen wollte. */ .card-claims-preview .ckp-extra { -webkit-line-clamp: 4; } /* Herkunft eines Punktes, den nur eine andere Quelle liefert. */ .ckp-src { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: 9px; font-weight: 600; line-height: 1.5; color: var(--text-muted); background: var(--bg-card-hover); border: var(--border-width, 1px) solid var(--border-color); vertical-align: 1px; white-space: nowrap; } .card-cluster-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .cluster-member-row { display: flex; gap: 6px; align-items: baseline; font-size: 11px; cursor: pointer; padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,0.03); transition: background 0.15s; } .cluster-member-row:hover { background: rgba(255,255,255,0.07); } .cluster-member-src { font-size: 10px; color: var(--text-muted); white-space: nowrap; min-width: 60px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .cluster-member-ttl { color: var(--text-secondary); line-height: 1.4; } /* Cluster sources panel in drawer */ .cluster-sources-panel { } .cluster-src-item { padding: 10px 12px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); margin-bottom: 8px; } .cluster-src-hdr { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .cluster-src-name { font-size: 11px; font-weight: 600; color: var(--text-muted); } .cluster-src-sent { font-size: 10px; padding: 1px 5px; border-radius: 4px; } .csi-pos { background: rgba(var(--success-rgb,34,197,94),0.15); color: var(--color-success); } .csi-neg { background: rgba(var(--danger-rgb,239,68,68),0.15); color: var(--color-danger); } .csi-neu { background: rgba(255,255,255,0.06); color: var(--text-muted); } .cluster-src-link { margin-left: auto; color: var(--text-muted); opacity: 0.6; } .cluster-src-link:hover { opacity: 1; } .cluster-src-title { font-size: 12px; color: var(--text-primary); margin: 0 0 4px; line-height: 1.4; } .cluster-src-bullets { margin: 0; padding-left: 14px; list-style: disc; } .cluster-src-bullets li { font-size: 11px; color: var(--text-secondary); line-height: 1.5; } .cluster-src-nodesc { font-size: 11px; color: var(--text-muted); margin: 0; } /* Feature help button ("?") */ .feature-help-btn { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-light, #ccc); background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; padding: 0; opacity: 0.6; transition: opacity 0.15s, background 0.15s; } .feature-help-btn:hover { opacity: 1; background: var(--accent-blue, #3b82f6); color: #fff; border-color: transparent; } /* Feature help popup */ .feature-help-popup { position: fixed; z-index: 10010; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); width: 280px; padding: 0; overflow: hidden; } .fhp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--border-light); } .fhp-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin: 0; } .fhp-close { background: none; border: none; cursor: pointer; padding: 0; color: var(--text-muted); font-size: 16px; line-height: 1; } .fhp-close:hover { color: var(--text-primary); } .fhp-body { padding: 10px 12px 12px; } .fhp-desc { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.55; } .fhp-edit-btn { font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; } .fhp-edit-btn:hover { background: var(--accent-blue, #3b82f6); color: #fff; border-color: transparent; } .fhp-textarea { width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-input, var(--bg-secondary)); color: var(--text-primary); resize: vertical; min-height: 72px; margin-bottom: 6px; } .fhp-save-btn { font-size: 11px; padding: 3px 10px; border-radius: 5px; border: none; background: var(--accent-blue, #3b82f6); color: #fff; cursor: pointer; margin-right: 6px; } .fhp-save-btn:hover { opacity: 0.85; } .fhp-cancel-btn { font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; } /* ── News-Clustering Admin UI ─────────────────────────────────────────────── */ .cl-status-bar { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 6px; } .cl-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); } .cl-stat strong { color: var(--text-primary); } .cl-running { color: var(--accent-blue, #3b82f6); font-weight: 600; } .cl-last-result { font-size: 12px; padding: 6px 4px; margin-bottom: 10px; } .cl-result-ok { display: flex; align-items: center; gap: 5px; color: var(--color-success, #22c55e); } .cl-result-err { display: flex; align-items: center; gap: 5px; color: var(--color-danger, #ef4444); } .cl-result-skip { color: var(--text-muted); } .cl-result-none { color: var(--text-muted); } .cl-card { padding: 16px 20px; margin-bottom: 10px; } .cl-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .cl-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); } .cl-toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); } .cl-toggle-row input[type="checkbox"] { cursor: pointer; } .cl-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; } .cl-field { display: flex; flex-direction: column; gap: 4px; } .cl-hint { font-size: 10px; color: var(--text-muted); line-height: 1.3; } .cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; margin-bottom: 8px; } /* Feature info tooltip button (sidebar widgets) */ .ftt-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-light, rgba(255,255,255,0.12)); background: none; color: var(--text-muted); font-size: 9px; font-weight: 700; font-family: inherit; cursor: default; line-height: 1; padding: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .ftt-btn:hover { background: var(--accent-blue, #3b82f6); color: #fff; border-color: transparent; } /* Floating tooltip for feature descriptions */ .ftt-tooltip { display: none; position: fixed; z-index: 9999; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.22); padding: 8px 12px; font-size: 12px; line-height: 1.55; pointer-events: none; max-width: 240px; width: 220px; white-space: normal; word-break: break-word; } /* Article Q&A panel */ .drawer-qa-panel { margin: 16px 0 0; border-top: 1px solid var(--border-color); padding-top: 14px; } .drawer-qa-hdr { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .qa-beta-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--color-info, #3b82f6); color: #fff; padding: 1px 5px; border-radius: 4px; } .drawer-qa-body { display: flex; flex-direction: column; gap: 8px; } .qa-input-row { display: flex; gap: 8px; align-items: flex-end; } .qa-input { flex: 1; font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input, var(--bg-secondary)); color: var(--text-primary); resize: none; font-family: inherit; } .qa-input:focus { outline: none; border-color: var(--accent-blue, #3b82f6); } .qa-send-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; border: none; background: var(--accent-blue, #3b82f6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.15s; } .qa-send-btn:hover { opacity: 0.85; } .qa-send-btn:disabled { opacity: 0.4; cursor: default; } .qa-answer-area { font-size: 12.5px; line-height: 1.6; color: var(--text-primary); min-height: 0; } .qa-answer-text { margin: 0; } .qa-answer-text p.qa-p { margin: 6px 0 0; } .qa-loading { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; animation: qa-spin 1s linear infinite; } @keyframes qa-spin { to { transform: rotate(360deg); } } .qa-loading i { animation: qa-spin 1s linear infinite; } .qa-error { display: inline-flex; align-items: center; gap: 5px; color: var(--color-danger, #ef4444); font-size: 12px; } .qa-web-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-blue, #3b82f6); margin-bottom: 6px; } .qa-sources { margin-top: 8px; font-size: 11px; color: var(--text-secondary); } .qa-sources-list { margin: 4px 0 0; padding-left: 16px; } .qa-sources-list li { margin-bottom: 2px; } .qa-source-link { color: var(--accent-blue, #3b82f6); text-decoration: none; word-break: break-all; } .qa-source-link:hover { text-decoration: underline; } .qa-web-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .qa-web-btn:hover { color: var(--accent-blue, #3b82f6); border-color: var(--accent-blue, #3b82f6); } .qa-web-btn:disabled { opacity: 0.4; cursor: default; } /* Admin features tab inline description edit */ .ff-desc-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; } .ff-desc-text { flex: 1; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .ff-desc-edit-btn { flex-shrink: 0; font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; white-space: nowrap; } .ff-desc-edit-btn:hover { color: var(--accent-blue, #3b82f6); border-color: var(--accent-blue, #3b82f6); } .ff-desc-edit { display: none; margin-top: 4px; } .ff-desc-textarea { width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.5; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-input, var(--bg-secondary)); color: var(--text-primary); resize: vertical; min-height: 56px; display: block; margin-bottom: 5px; } .ff-desc-actions { display: flex; gap: 6px; } .ff-desc-save-btn { font-size: 11px; padding: 3px 10px; border-radius: 5px; border: none; background: var(--accent-blue, #3b82f6); color: #fff; cursor: pointer; } .ff-desc-save-btn:hover { opacity: 0.85; } .ff-desc-cancel-btn { font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; } /* Related Articles Popup */ .related-popup { position: fixed; z-index: 9999; width: 320px; max-height: 380px; overflow-y: auto; background: var(--bg-popup, #12141e); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.4); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); } .related-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; background: var(--bg-popup, #12141e); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .related-popup-list { padding: 4px 0; } .related-popup-item { padding: 8px 12px; cursor: pointer; transition: background 0.12s; } .related-popup-item:hover { background: rgba(255,255,255,0.05); } .related-popup-title { display: block; font-size: 12px; color: var(--text-primary); line-height: 1.4; margin-bottom: 2px; } .related-popup-meta { font-size: 10px; color: var(--text-muted); } .trend-count-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; border-radius: 4px; transition: background 0.12s; } .trend-count-btn:hover { background: rgba(255,255,255,0.06); } .drawer-trend-list { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 4px; } /* Feature #3 – Breaking News Banner */ .breaking-news-banner { border-radius: 10px; border: 1px solid rgba(255, 220, 0, 0.25); background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,107,0,0.06)); overflow: hidden; } .breaking-banner-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 6px; border-bottom: 1px solid rgba(255,220,0,0.12); } .breaking-banner-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: .05em; } .breaking-banner-item { padding: 8px 14px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; } .breaking-banner-item:last-child { border-bottom: none; } .breaking-banner-item:hover { background: rgba(255,255,255,0.04); } .breaking-banner-src { font-size: 10px; font-weight: 600; color: #fbbf24; white-space: nowrap; } .breaking-banner-title { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; } .breaking-banner-hl { font-size: 11px; color: var(--text-secondary); width: 100%; padding-left: 2px; } /* Feature #10 – Trend-Kontext im Drawer */ .drawer-trend-ctx { margin-top:12px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid var(--border-color); } .drawer-trend-hdr { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:7px;display:flex;align-items:center;gap:5px; } .drawer-trend-body { display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary); } /* Feature #11 – Widersprüchliche Signale */ .contradictory-warning { display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px; border-radius:8px;background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25); font-size:11px;color:#fbbf24;line-height:1.5; } .beta-badge { display:inline-block;padding:1px 5px;border-radius:4px; background:rgba(139,92,246,0.2);border:1px solid rgba(139,92,246,0.3); color:#a78bfa;font-size:9px;font-weight:700;flex-shrink:0;margin-top:1px; } /* Feature #14 – Trend-Chart Recherche-DB */ .adb-trend-chart { margin:10px 0;padding:10px 14px;background:var(--bg-card);border-radius:8px;border:1px solid var(--border-color); } .adb-trend-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:5px; } .adb-trend-bars { display:flex;align-items:flex-end;gap:3px;height:60px; } .adb-trend-col { flex:1;display:flex;flex-direction:column;align-items:center;height:100%;gap:2px; } .adb-trend-bar { width:100%;border-radius:2px 2px 0 0;min-height:3px;transition:opacity 0.15s; } .adb-trend-col:hover .adb-trend-bar { opacity:0.8; } .adb-trend-lbl { font-size:8px;color:var(--text-muted);white-space:nowrap; } /* Feature #22 – Live-Update-Banner */ .live-update-banner { display: none; align-items: center; gap: 10px; justify-content: center; padding: 8px 16px; margin-bottom: 8px; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3); border-radius: 8px; font-size: 12px; color: var(--text-secondary); } .read-check-btn.read-active:hover { color: var(--color-danger); border-color: var(--color-danger); background: rgba(255, 84, 112, 0.1); } /* "Gelesene ausblenden" toggle in controls bar */ .fctl-read-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 20px; padding: 3px 10px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; font-family: var(--font-body); } .fctl-read-toggle:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); } .fctl-read-toggle.active { color: var(--color-success); border-color: rgba(44, 182, 125, 0.4); background: rgba(44, 182, 125, 0.1); } /* ── Original article link button ─────────────────────────────────────────── */ .card-source-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.1s; flex-shrink: 0; padding: 0; line-height: 1; text-decoration: none; } .card-source-btn:hover { color: var(--color-primary); background: rgba(127, 90, 240, 0.12); transform: scale(1.15); } /* ── Favorites star button ─────────────────────────────────────────────────── */ .fav-star-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.1s; flex-shrink: 0; padding: 0; line-height: 1; } .fav-star-btn:hover { color: #ffb830; background: rgba(255, 184, 48, 0.12); transform: scale(1.15); } .fav-star-btn.fav-active { color: #ffb830; fill: #ffb830; } .fav-star-btn.fav-active i, .fav-star-btn.fav-active svg { fill: #ffb830; stroke: #ffb830; } /* Favorites count badge inside filter button */ .fav-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ffb830; color: #000; font-size: 10px; font-weight: 700; line-height: 1; margin-left: 2px; } /* Favorites filter button active state */ .filter-btn-fav.active { background: rgba(255, 184, 48, 0.18); border-color: rgba(255, 184, 48, 0.5); color: #ffb830; font-weight: 600; box-shadow: 0 0 10px rgba(255, 184, 48, 0.2); } .filter-btn-portfolio.active { background: rgba(127, 90, 240, 0.16); border-color: rgba(127, 90, 240, 0.5); color: var(--color-primary); font-weight: 600; box-shadow: 0 0 10px rgba(127, 90, 240, 0.2); } /* Rate-limit reset row */ .aikeys-rate-reset-row { padding: 8px 0 4px; border-top: 1px solid var(--border-color); margin-top: 4px; } /* Add form */ .aikeys-add-wrap { display: flex; flex-direction: column; gap: 10px; } .aikeys-add-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; border: 1px dashed var(--border-color); background: rgba(255,255,255,0.02); } .aikeys-form-row { display: flex; gap: 8px; flex-wrap: wrap; } .aikeys-input { flex: 1; min-width: 140px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-popup); color: var(--text-primary); font-size: 0.83rem; font-family: inherit; } .aikeys-input:focus { outline: none; border-color: var(--color-primary); } select.aikeys-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; } select.aikeys-input option { background: var(--bg-popup); color: var(--text-primary); } html[data-scheme="light"] .aikeys-input { background: #f8fafc; color: #1e293b; border-color: #cbd5e1; } html[data-scheme="light"] select.aikeys-input option { background: #f8fafc; color: #1e293b; } .aikeys-key-wide { flex: 2; min-width: 220px; } .aikeys-form-actions { display: flex; gap: 8px; } /* ─── CRAWLER-LOG ─────────────────────────────────────────────────────────── */ .clog-debug-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); margin-bottom: 14px; transition: border-color 0.2s, background 0.2s; } .clog-debug-banner.clog-debug-active { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.07); } .clog-debug-left { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-muted); } .clog-debug-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 2px; } .clog-debug-desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; } .clog-debug-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; user-select: none; } .clog-debug-toggle input { display: none; } .clog-debug-track { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.12); border: 1px solid var(--border-color); position: relative; transition: background 0.2s; display: inline-block; } .clog-debug-toggle input:checked ~ .clog-debug-track { background: #f59e0b; border-color: #f59e0b; } .clog-debug-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .clog-debug-toggle input:checked ~ .clog-debug-track .clog-debug-thumb { transform: translateX(18px); } .clog-debug-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); min-width: 28px; } .clog-debug-toggle input:checked ~ .clog-debug-label { color: #f59e0b; } html[data-scheme="light"] .clog-debug-track { background: #e2e8f0; } html[data-scheme="light"] .clog-debug-banner.clog-debug-active { background: rgba(245,158,11,0.08); } .clog-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .clog-toolbar-row1, .clog-toolbar-row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .clog-filters { display: flex; gap: 6px; flex-wrap: wrap; } .clog-filter-btn { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--color-text-muted); font-size: 12px; cursor: pointer; transition: all 0.15s; } .clog-filter-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text); } .clog-filter-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .clog-run-wrap { display: flex; align-items: center; gap: 6px; } .clog-run-label { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; } .clog-run-select { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--color-text); appearance: none; -webkit-appearance: none; max-width: 180px; } .clog-run-select option { background: var(--bg-popup); color: var(--text-primary); } html[data-scheme="light"] .clog-run-select { background: #f8fafc; color: #1e293b; } html[data-scheme="light"] .clog-run-select option { background: #f8fafc; color: #1e293b; } .clog-actions { display: flex; gap: 8px; margin-left: auto; } .clog-container { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-card); } .clog-loading, .clog-empty { padding: 24px 18px; color: var(--color-text-muted); font-size: 13px; text-align: center; } .clog-stats { padding: 6px 14px; font-size: 11px; color: var(--color-text-muted); border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.15); } .clog-table { font-family: 'Courier New', monospace; font-size: 12px; } .clog-row { display: grid; grid-template-columns: 80px 55px 120px 1fr auto; gap: 0 10px; align-items: baseline; padding: 5px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); line-height: 1.5; } .clog-row:last-child { border-bottom: none; } .clog-row-error { background: rgba(239,68,68,0.06); } .clog-row-warn { background: rgba(245,158,11,0.05); } .clog-row-success { background: rgba(34,197,94,0.04); } .clog-time { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; } .clog-source { color: #93c5fd; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clog-msg { color: var(--color-text); word-break: break-word; } .clog-level { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; justify-self: start; align-self: start; margin-top: 2px; } .clog-level-error { background: rgba(239,68,68,0.2); color: #f87171; } .clog-level-warn { background: rgba(245,158,11,0.2); color: #fbbf24; } .clog-level-success { background: rgba(34,197,94,0.2); color: #4ade80; } .clog-level-info { background: rgba(148,163,184,0.15); color: #94a3b8; } .clog-meta-url { margin-left: 6px; font-size: 10px; color: var(--color-text-muted); background: rgba(255,255,255,0.06); padding: 0 5px; border-radius: 4px; vertical-align: middle; } .clog-stack { margin-top: 2px; font-size: 10px; color: #f87171; opacity: 0.7; } html[data-scheme="light"] .clog-filter-btn { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; } html[data-scheme="light"] .clog-filter-btn.active { background: var(--color-primary); color: #fff; } html[data-scheme="light"] .clog-stats { background: rgba(0,0,0,0.04); } html[data-scheme="light"] .clog-row-error { background: rgba(239,68,68,0.06); } html[data-scheme="light"] .clog-row-warn { background: rgba(245,158,11,0.05); } html[data-scheme="light"] .clog-row-success { background: rgba(34,197,94,0.04); } html[data-scheme="light"] .clog-source { color: #3b82f6; } html[data-scheme="light"] .clog-meta-url { background: rgba(0,0,0,0.06); } /* Download split button */ .clog-dl-wrap { position: relative; display: flex; } .clog-dl-main { border-radius: 6px 0 0 6px; border-right: none; } .clog-dl-arrow { border-radius: 0 6px 6px 0; padding: 0 7px; font-size: 10px; } .clog-dl-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 160px; background: #1e2030; border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; z-index: 800; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .clog-dl-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: none; border: none; border-radius: 5px; color: var(--color-text); font-size: 13px; cursor: pointer; text-align: left; } .clog-dl-menu button:hover { background: rgba(255,255,255,0.08); } html[data-scheme="light"] .clog-dl-menu { background: #ffffff; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } html[data-scheme="light"] .clog-dl-menu button:hover { background: rgba(0,0,0,0.06); } /* Count badges on level filter buttons */ .clog-filter-btn { display: inline-flex; align-items: center; gap: 4px; } .clog-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.12); color: inherit; line-height: 1; } .clog-filter-btn.active .clog-badge { background: rgba(255,255,255,0.3); } .clog-badge-error { background: rgba(239,68,68,0.25); color: #f87171; } .clog-badge-warn { background: rgba(245,158,11,0.25); color: #fbbf24; } .clog-badge-success { background: rgba(34,197,94,0.25); color: #4ade80; } .clog-filter-btn.active .clog-badge-error, .clog-filter-btn.active .clog-badge-warn, .clog-filter-btn.active .clog-badge-success { background: rgba(255,255,255,0.3); color: #fff; } /* Search box */ .clog-search-wrap { display: flex; align-items: center; gap: 5px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 3px 10px; margin-left: auto; color: var(--color-text-muted); } .clog-search-input { background: none; border: none; outline: none; color: var(--color-text); font-size: 12px; width: 150px; } .clog-search-input::placeholder { color: var(--color-text-muted); } /* Live auto-refresh button */ #clog-live-btn.active { background: #10b981; border-color: #10b981; color: #fff; } .clog-live-dot { display: inline-block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin-left: 2px; vertical-align: middle; animation: clog-blink 1.2s ease-in-out infinite; } @keyframes clog-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Per-row action buttons (copy / expand) */ .clog-row-actions { display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity 0.12s; align-self: center; } .clog-row:hover .clog-row-actions { opacity: 1; } .clog-row-btn { background: none; border: none; padding: 2px 3px; cursor: pointer; color: var(--color-text-muted); border-radius: 3px; display: flex; align-items: center; transition: background 0.1s; } .clog-row-btn:hover { background: rgba(255,255,255,0.1); color: var(--color-text); } .clog-expand-btn { transition: transform 0.15s; } .clog-expand-btn.rotated { transform: rotate(180deg); } /* Expandable meta details row */ .clog-meta-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 14px 7px calc(14px + 80px + 8px + 55px + 8px + 120px + 8px); border-bottom: 1px solid rgba(255,255,255,0.04); background: rgba(0,0,0,0.12); font-family: 'Courier New', monospace; } .clog-meta-badge { font-size: 10px; padding: 1px 7px; border-radius: 4px; background: rgba(255,255,255,0.07); color: var(--color-text-muted); } .clog-meta-badge b { color: var(--color-text); font-weight: 600; } .clog-meta-badge-error { background: rgba(239,68,68,0.15); } .clog-meta-badge-ok { background: rgba(34,197,94,0.12); } .clog-meta-badge-ai { background: rgba(139,92,246,0.15); } .clog-meta-badge-cat { background: rgba(59,130,246,0.12); } .clog-meta-badge a { color: #93c5fd; text-decoration: none; word-break: break-all; } .clog-meta-badge a:hover { text-decoration: underline; } /* Run group separator header */ .clog-run-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 14px; background: rgba(255,255,255,0.025); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 11px; font-family: inherit; } .clog-run-header-label { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.02em; } .clog-run-header-stats { display: flex; gap: 5px; flex-wrap: wrap; } .clog-run-stat { padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.07); color: var(--color-text-muted); } .clog-run-stat-error { background: rgba(239,68,68,0.2); color: #f87171; } .clog-run-stat-warn { background: rgba(245,158,11,0.2); color: #fbbf24; } .clog-run-stat-ok { background: rgba(34,197,94,0.2); color: #4ade80; } .clog-run-stat-time { background: rgba(148,163,184,0.1); color: #94a3b8; } /* Light theme additions */ html[data-scheme="light"] .clog-badge { background: rgba(0,0,0,0.1); } html[data-scheme="light"] .clog-search-wrap { background: #f1f5f9; border-color: #cbd5e1; } html[data-scheme="light"] .clog-search-input { color: #1e293b; } html[data-scheme="light"] .clog-row-btn:hover { background: rgba(0,0,0,0.08); color: #1e293b; } html[data-scheme="light"] .clog-meta-row { background: rgba(0,0,0,0.03); } html[data-scheme="light"] .clog-meta-badge { background: rgba(0,0,0,0.06); color: #64748b; } html[data-scheme="light"] .clog-meta-badge b { color: #1e293b; } html[data-scheme="light"] .clog-run-header { background: rgba(0,0,0,0.02); } html[data-scheme="light"] .clog-run-header-label { color: #64748b; } /* ── Market Intelligence Panel ─────────────────────────────────────────────── */ .mi-panel { background: rgba(255, 255, 255, 0.015); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 12px 14px; } .mi-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .mi-row { display: flex; align-items: flex-start; gap: 10px; } .mi-label { display: inline-flex; align-items: center; gap: 4px; min-width: 100px; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 3px; } .mi-chips { display: flex; flex-wrap: wrap; gap: 5px; } .mi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; } /* Directional chips */ .mi-chip--up { background: rgba(44, 182, 125, 0.12); border-color: rgba(44, 182, 125, 0.3); color: var(--color-success); } .mi-chip--down { background: rgba(255, 84, 112, 0.1); border-color: rgba(255, 84, 112, 0.3); color: var(--color-danger); } .mi-chip--neutral { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } /* Ticker code inside company chip */ .mi-ticker { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: rgba(0, 0, 0, 0.25); padding: 1px 4px; border-radius: 3px; opacity: 0.85; } /* Person chips */ .mi-chip--person { background: rgba(99, 155, 255, 0.1); border-color: rgba(99, 155, 255, 0.25); color: #8ab4ff; } /* Institution chips */ .mi-chip--inst { background: rgba(168, 99, 255, 0.1); border-color: rgba(168, 99, 255, 0.25); color: #c4a0ff; } /* Macro data chips */ .mi-chip--macro { background: rgba(250, 200, 80, 0.1); border-color: rgba(250, 200, 80, 0.3); color: #f5c842; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 10px; } /* Region chips */ .mi-chip--region { background: rgba(96, 200, 200, 0.1); border-color: rgba(96, 200, 200, 0.25); color: #60c8c8; } /* Time horizon chip */ .mi-chip--horizon { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--text-secondary); font-style: italic; } /* Light theme overrides */ html[data-scheme="light"] .mi-panel { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); } html[data-scheme="light"] .mi-chip--up { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.3); color: #15803d; } html[data-scheme="light"] .mi-chip--down { background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.3); color: #b91c1c; } html[data-scheme="light"] .mi-chip--neutral { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #64748b; } html[data-scheme="light"] .mi-chip--person { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #1d4ed8; } html[data-scheme="light"] .mi-chip--inst { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.3); color: #6d28d9; } html[data-scheme="light"] .mi-chip--macro { background: rgba(180,130,0,0.08); border-color: rgba(180,130,0,0.3); color: #92400e; } html[data-scheme="light"] .mi-chip--region { background: rgba(6,148,162,0.08); border-color: rgba(6,148,162,0.3); color: #0e7490; } html[data-scheme="light"] .mi-ticker { background: rgba(0,0,0,0.1); } /* ── Neue Chip-Typen ────────────────────────────────────────────────────────── */ .mi-chip--driver { background: rgba(99,202,183,0.1); border-color: rgba(99,202,183,0.28); color: #63cab7; } .mi-chip--risk { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.3); color: #fb923c; } .mi-chip--figure { background: rgba(0,242,254,0.09); border-color: rgba(0,242,254,0.28); color: var(--color-info); font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-weight: 600; } .mi-chip--expectation { background: rgba(127,90,240,0.1); border-color: rgba(127,90,240,0.3); color: var(--color-primary); } .mi-chip--novelty { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.3); color: var(--text-secondary); } html[data-scheme="light"] .mi-chip--figure { background: rgba(6,120,140,0.08); border-color: rgba(6,120,140,0.3); color: #0e7490; } .mi-role { font-size: 9px; opacity: 0.65; margin-left: 3px; text-transform: lowercase; } /* ── card-headline ──────────────────────────────────────────────────────────── */ .card-headline { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.4; margin: 0 0 8px; padding: 5px 8px; background: rgba(255,255,255,0.03); border-left: 2px solid rgba(139,92,246,0.45); border-radius: 0 4px 4px 0; } /* ── Card magnitude & factStatus badges ─────────────────────────────────────── */ .card-mag-badge, .card-fs-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 600; padding: 2px 5px; border-radius: 4px; border: 1px solid; margin-right: 3px; white-space: nowrap; } .card-mag--high { background: rgba(251,146,60,0.15); border-color: rgba(251,146,60,0.4); color: #fb923c; } .card-mag--veryhigh { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #f87171; } .card-fs--spec { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.35); color: #fb923c; } .card-fs--rumor { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; } .card-fs--deny { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); color: #818cf8; } .card-fs--mixed { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.35); color: #eab308; } /* ── Signal-Analyse Panel (Drawer) ─────────────────────────────────────────── */ .sig-panel { background: rgba(139,92,246,0.04) !important; border-color: rgba(139,92,246,0.14) !important; } .sig-headline { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.5; margin-bottom: 10px; } .sig-no-market { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 4px 8px; margin-bottom: 10px; } .sig-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .sig-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 5px; border: 1px solid; } .fs-fact { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #4ade80; } .fs-spec { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.35); color: #fb923c; } .fs-rumor { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; } .fs-deny { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); color: #818cf8; } .fs-mixed { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.35); color: #fbbf24; } .mag-low { background: rgba(100,116,139,0.1); border-color: rgba(100,116,139,0.3); color: #94a3b8; } .mag-mid { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #60a5fa; } .mag-high { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.35); color: #fb923c; } .mag-vhigh { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; } .sig-conf { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } .sig-surprise { background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.3); color: #fbbf24; } .aq-badge { display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600; } .aq-badge--full { background:rgba(34,197,94,0.12);color:#22c55e;border:1px solid rgba(34,197,94,0.25); } .aq-badge--partial { background:rgba(245,158,11,0.12);color:#f59e0b;border:1px solid rgba(245,158,11,0.25); } .aq-badge--none { background:rgba(239,68,68,0.12);color:#ef4444;border:1px solid rgba(239,68,68,0.25); } /* Impact bars */ .sig-impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 480px) { .sig-impact-grid { grid-template-columns: 1fr; } } .sig-impact-item { display: flex; flex-direction: column; gap: 4px; } .sig-impact-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .sig-impact-days { font-size: 9px; opacity: 0.7; } .sig-bar-wrap { display: flex; align-items: center; gap: 6px; } .sig-bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; position: relative; overflow: hidden; } .sig-bar-bg::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.2); } .sig-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; } .sig-bar-val { font-size: 11px; font-weight: 700; min-width: 28px; text-align: right; } /* ── Auto-Analyse Settings Panel ───────────────────────────────────────────── */ .aa-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .aa-toggle input { display: none; } .aa-track { width: 44px; height: 24px; background: rgba(255,255,255,0.1); border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); transition: background 0.2s, border-color 0.2s; position: relative; } .aa-toggle input:checked ~ .aa-track { background: var(--color-success); border-color: var(--color-success); } .aa-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.2s; } .aa-toggle input:checked ~ .aa-track .aa-thumb { transform: translateX(20px); } .aa-status-row { display: flex; gap: 24px; flex-wrap: wrap; } .aa-stat { display: flex; flex-direction: column; gap: 2px; } .aa-stat-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .aa-stat-val { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .aa-current { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--color-info); background: rgba(99,155,255,0.08); border: 1px solid rgba(99,155,255,0.2); border-radius: 6px; padding: 6px 10px; } .aa-info { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 6px 10px; } .aa-info--warn { color: var(--color-warning); background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); } html[data-scheme="light"] .aa-track { background: #e2e8f0; border-color: #cbd5e1; } html[data-scheme="light"] .aa-toggle input:checked ~ .aa-track { background: #16a34a; border-color: #16a34a; } html[data-scheme="light"] .aa-thumb { box-shadow: 0 1px 4px rgba(0,0,0,0.15); } html[data-scheme="light"] .aa-current { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.2); color: #1d4ed8; } /* ── Auto-Analyze Worker Panel ───────────────────────────────────────── */ .aa-workers-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); } .aa-workers-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; } .aa-workers-list { display: flex; flex-direction: column; gap: 5px; } .aa-worker { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .aa-worker-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .aa-wdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .aa-wdot--active { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); animation: aikeys-pulse 1.6s ease-in-out infinite; } .aa-wdot--paused { background: #f59e0b; } .aa-wdot--idle { background: rgba(255,255,255,0.18); } .aa-worker-name { font-size: 12px; font-weight: 600; color: var(--text-primary); } .aa-worker-model { font-size: 10px; font-family: monospace; color: var(--text-muted); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; padding: 1px 5px; } .aa-worker-state { font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-left: auto; } .aa-worker-count { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; } .aa-worker-count--ok { color: #22c55e; background: rgba(34,197,94,0.1); } .aa-worker-count--err { color: #ef4444; background: rgba(239,68,68,0.1); } .aa-worker-detail { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); padding-left: 15px; } .aa-worker-detail--warn { color: #f59e0b; } html[data-scheme="light"] .aa-worker { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); } html[data-scheme="light"] .aa-worker-model { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } html[data-scheme="light"] .aa-wdot--idle { background: rgba(0,0,0,0.15); } /* ── AI Key Usage Gauges ─────────────────────────────────────────────── */ /* ── AI Key Status Pill ─────────────────────────────────────────── */ .aikeys-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; width: 54px; padding: 8px 6px; border-radius: 8px; border: 1px solid transparent; } .aikeys-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .aikeys-pill-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .aikeys-pill--active { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.22); color: #22c55e; } .aikeys-pill--active .aikeys-pill-dot { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); animation: aikeys-pulse 1.6s ease-in-out infinite; } .aikeys-pill--paused { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.22); color: #f59e0b; } .aikeys-pill--paused .aikeys-pill-dot { background: #f59e0b; } .aikeys-pill--ready { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--text-tertiary, rgba(255,255,255,0.3)); } .aikeys-pill--ready .aikeys-pill-dot { background: rgba(255,255,255,0.2); } .aikeys-pill--off { background: transparent; border-color: rgba(255,255,255,0.05); color: rgba(255,255,255,0.2); } .aikeys-pill--off .aikeys-pill-dot { background: rgba(255,255,255,0.12); } @keyframes aikeys-pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.25); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.07); } } html[data-scheme="light"] .aikeys-pill--ready { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.35); } html[data-scheme="light"] .aikeys-pill--ready .aikeys-pill-dot { background: rgba(0,0,0,0.18); } html[data-scheme="light"] .aikeys-pill--off { border-color: rgba(0,0,0,0.06); color: rgba(0,0,0,0.2); } /* ── Info head: rank + name + provider badge + model chip ─────── */ .aikeys-info-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; } .aikeys-model-chip { display: inline-flex; align-items: center; font-size: 10px; font-family: monospace; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 1px 6px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-scheme="light"] .aikeys-model-chip { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); } .aikeys-detail-pause { color: #f59e0b; font-family: inherit; font-size: inherit; } /* ── Usage Gauges ────────────────────────────────────────────────── */ .aikeys-gauges { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; } .aikeys-gauge { display: grid; grid-template-columns: 30px 1fr 72px 56px; align-items: center; gap: 7px; font-size: 10px; } .aikeys-gauge-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary, rgba(255,255,255,0.3)); } .aikeys-gauge-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; } .aikeys-gauge-fill { height: 100%; border-radius: 3px; background: var(--color-primary, #7f5af0); transition: width 0.4s ease; } .aikeys-gauge--warn .aikeys-gauge-fill { background: #f59e0b; } .aikeys-gauge--full .aikeys-gauge-fill { background: #ef4444; } .aikeys-gauge-val { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 10px; white-space: nowrap; text-align: right; } .aikeys-gauge-inf { color: var(--text-tertiary, rgba(255,255,255,0.28)); } .aikeys-gauge-extra { color: var(--text-tertiary, rgba(255,255,255,0.3)); font-size: 9px; white-space: nowrap; text-align: right; } .aikeys-gauge-limit { font-size: 9px; font-weight: 700; color: #ef4444; letter-spacing: 0.04em; } html[data-scheme="light"] .aikeys-gauge-track { background: rgba(0,0,0,0.07); } html[data-scheme="light"] .aikeys-gauge-lbl { color: rgba(0,0,0,0.3); } html[data-scheme="light"] .aikeys-gauge-val { color: rgba(0,0,0,0.6); } html[data-scheme="light"] .aikeys-gauge-extra { color: rgba(0,0,0,0.3); } /* ── Quality dot on article card (V6) ───────────────────────────────────────── */ .cq-dot { font-size: 8px; vertical-align: middle; margin-left: 3px; line-height: 1; } .cq-dot--full { color: var(--color-success); } .cq-dot--partial { color: var(--color-warning); } .cq-dot--none { color: var(--text-muted); opacity: 0.5; } /* ── Analysis metadata footer in Drawer (V3) ────────────────────────────────── */ .drawer-analysis-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); padding: 8px 0 0; border-top: 1px solid var(--border-color); margin-top: 8px; } /* ── F2: Feed-Suche ────────────────────────────────────────────────────────── */ .feed-search-wrap { margin-bottom: 10px; } .feed-search-inner { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 12px; transition: border-color 0.15s; } .feed-search-inner:focus-within { border-color: var(--color-primary); } .feed-search-input { flex: 1; background: none; border: none; outline: none; font-size: 13px; color: var(--text-primary); } .feed-search-input::placeholder { color: var(--text-muted); } .feed-search-clear { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; border-radius: 3px; display: flex; align-items: center; } .feed-search-clear:hover { color: var(--text-secondary); } .feed-search-active { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; padding-left: 2px; } /* ── F7: Filter-Presets ─────────────────────────────────────────────────────── */ .filter-presets-bar { margin: 4px 0 8px; } .filter-presets-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .preset-save-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 8px; background: none; border: 1px dashed var(--border-color); border-radius: 5px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; } .preset-save-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .preset-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 8px; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3); border-radius: 5px; cursor: pointer; color: var(--text-secondary); transition: background 0.15s; } .preset-chip:hover { background: rgba(99,102,241,0.22); } .preset-chip-del { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 0; line-height: 1; } .preset-chip-del:hover { color: var(--color-danger); } /* ── F9: Artikel-Notizen ────────────────────────────────────────────────────── */ .drawer-notes-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); } .drawer-notes-hdr { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; } .drawer-notes-input { width: 100%; min-height: 80px; max-height: 200px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--text-primary); font-family: inherit; resize: vertical; transition: border-color 0.15s; box-sizing: border-box; } .drawer-notes-input:focus { outline: none; border-color: var(--color-primary); } .card-note-dot { font-size: 10px; color: var(--color-primary); margin-left: 5px; opacity: 0.8; cursor: default; } /* ── F6: KI-Key-Auswertung ──────────────────────────────────────────────────── */ .ai-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .ai-stat-row:last-child { border-bottom: none; } .ai-stat-label { font-size: 12px; font-weight: 600; color: var(--text-primary); } .ai-stat-vals { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-muted); } .ai-stat-vals span { display: flex; align-items: center; gap: 3px; } /* Sektor-Heatmap */ .sector-heatmap-section { margin-bottom: 10px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; padding: 8px; } .heatmap-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border-radius: 6px; cursor: pointer; transition: transform 0.12s, opacity 0.12s; min-height: 64px; text-align: center; } .heatmap-tile:hover { transform: scale(1.04); opacity: 0.92; } .heatmap-name { font-size: 10px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; } .heatmap-val { font-size: 15px; font-weight: 700; line-height: 1; } .heatmap-cnt { font-size: 9px; opacity: 0.75; margin-top: 2px; } /* V5: Quellen ausblenden */ .filter-btn-src.src-hidden { opacity: 0.4; text-decoration: line-through; } .src-reset-hidden { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px 2px; margin-top: 4px; transition: color 0.12s; } .src-reset-hidden:hover { color: var(--color-primary); } /* ═══════════════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVENESS (≤ 768px) ═══════════════════════════════════════════════════════════════════════════════ */ /* Hamburger button: hidden on desktop */ #mobile-menu-btn { display: none; } @media (max-width: 768px) { /* ── Container & spacing ─────────────────────────────────────────────────── */ .app-container { padding: 8px !important; gap: 8px !important; height: 100dvh !important; } /* ── Header ──────────────────────────────────────────────────────────────── */ .app-header { padding: 8px 12px !important; border-radius: 10px !important; gap: 8px !important; } /* Compact logo */ .logo-area h1 { font-size: 17px !important; } .logo-area .subtitle { display: none !important; } .logo-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; } .logo-icon i, .logo-icon svg { width: 16px !important; height: 16px !important; } /* Hide all header actions except hamburger and alert bell */ .header-actions > *:not(#mobile-menu-btn):not(.alert-bell-wrap) { display: none !important; } .header-actions .alert-bell-wrap { display: flex !important; } /* Show hamburger */ #mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; color: var(--text-primary); flex-shrink: 0; transition: background 0.12s; } #mobile-menu-btn:hover { background: var(--bg-secondary); } /* ── Main layout ─────────────────────────────────────────────────────────── */ .app-main { flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; gap: 8px !important; } .app-content { gap: 8px !important; overflow-x: hidden !important; min-width: 0 !important; } /* Sidebar: hidden by default on mobile */ .app-sidebar { display: none !important; } .app-sidebar.mobile-sidebar-open { display: flex !important; width: 100% !important; overflow-y: visible !important; } /* ── Filter bar ──────────────────────────────────────────────────────────── */ /* Die Leiste war zwar scrollbar, aber die Knöpfe waren nur ~25px hoch (viel zu klein für einen Daumen) und nichts deutete an, dass rechts noch mehr kommt. Jetzt: volle Tippgröße, Einrasten beim Wischen und ein Verlauf am Rand. */ .filter-bar { flex-direction: column !important; gap: 8px !important; padding: 10px 0 10px 12px !important; /* rechts offen: der Verlauf zeigt "es geht weiter" */ } /* Label ÜBER die Knopfreihe (nicht daneben — daneben nimmt es Breite weg und wurde beim Wischen angeschnitten). Die Gruppe stapelt Label und Knopfreihe; nur die Knopfreihe wischt waagerecht. */ /* Aufbau je Filterzeile: [Label — volle Breite, oben] [Knopfreihe (wischt) ......] [ + ] Label per Padding-Top Platz schaffen, es liegt absolut oben links. */ .filter-group { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; /* Reihe + Plus bleiben in EINER Zeile */ width: 100% !important; min-width: 0; overflow: visible !important; position: relative; padding-top: 22px; /* Raum für das Label darüber */ } .filter-group > .filter-label { position: absolute; top: 0; left: 0; margin: 0 !important; font-size: 10px !important; opacity: .75; } .filter-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 7px !important; padding: 2px 4px 4px 0; min-height: 0; flex: 1 1 auto; min-width: 0; } .filter-buttons > * { flex: 0 0 auto; scroll-snap-align: start; } .filter-buttons::-webkit-scrollbar { display: none; } /* Der "+"-Knopf bleibt rechts neben der wischbaren Reihe stehen. */ .filter-group > .category-add-btn { flex: 0 0 auto; align-self: center; margin-left: 8px; } /* Leere Knopfreihe (z.B. Tags, solange keine angelegt sind) soll keine riesige Leerfläche mit einem einsam rechts stehenden Knopf erzeugen. */ .filter-buttons:empty { display: none !important; } /* Tippziel: mindestens 40px hoch — Apple und Google empfehlen 44. */ .filter-btn { font-size: 13px !important; padding: 9px 14px !important; min-height: 40px !important; white-space: nowrap; scroll-snap-align: start; border-radius: 999px !important; } .filter-btn-icon { width: 14px !important; height: 14px !important; } .filter-group > .filter-label { font-size: 10px !important; opacity: .75; } /* Verlauf am rechten Rand jeder Knopfreihe: zeigt, dass es weitergeht. */ .filter-group { position: relative; } .filter-group::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg-secondary, #12141f) 80%); } /* ── Feed controls bar ───────────────────────────────────────────────────── */ /* Sortierung, "Pro Seite" und die Seitenzahlen standen in EINER Zeile und liefen rechts aus dem Bild. Jetzt untereinander, jede Zeile voll nutzbar. */ .feed-controls-bar { flex-direction: column !important; align-items: stretch !important; padding: 10px 12px !important; gap: 10px !important; } .fctl-left, .fctl-right { width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; gap: 8px 10px !important; } .fctl-right { justify-content: flex-start !important; align-items: center !important; } /* Jedes Sortier-/Seiten-Auswahlfeld nimmt den Rest seiner Zeile ein, statt "Relevanz (meiste Quellen)" auf "Re" zu quetschen. Label + Feld bilden ein Paar, das zusammen umbricht. */ .fctl-right > .filter-label { flex: 0 0 auto !important; font-size: 11px !important; } .fctl-right .filter-select { flex: 1 1 60% !important; min-width: 140px !important; max-width: 100% !important; min-height: 40px !important; white-space: normal !important; } /* Die Seiten-Navigation kommt in eine eigene, volle Zeile. */ .fctl-pagination { flex: 1 0 100% !important; justify-content: flex-start !important; margin-top: 2px !important; } /* ── Feed grid ───────────────────────────────────────────────────────────── */ .feed-grid, #feed-grid-container { grid-template-columns: 1fr !important; gap: 8px !important; } .article-card { padding: 12px !important; } /* ── Article drawer: full screen on mobile ───────────────────────────────── */ .detail-drawer { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; border-radius: 0 !important; z-index: 900 !important; } /* ── Settings page ───────────────────────────────────────────────────────── */ .sp-card { padding: 12px !important; } .sp-layout { flex-direction: column !important; overflow: hidden; } /* Nav becomes a horizontal scrollable tab strip */ .sp-nav { width: 100% !important; flex-shrink: 0 !important; border-right: none !important; border-bottom: 1px solid var(--border-color) !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 6px 8px !important; gap: 4px !important; -webkit-overflow-scrolling: touch; } .sp-nav::-webkit-scrollbar { display: none; } .sp-nav-item { flex-direction: column !important; min-width: max-content !important; font-size: 10px !important; padding: 6px 10px !important; text-align: center; gap: 4px !important; border-radius: 8px !important; } .sp-nav-separator { width: 1px !important; height: auto !important; margin: 4px 2px !important; align-self: stretch; } .sp-content { min-height: 0 !important; overflow-y: auto !important; } /* ── Modals ──────────────────────────────────────────────────────────────── */ .modal-card { width: calc(100vw - 16px) !important; max-width: none !important; margin: 8px auto !important; max-height: calc(100dvh - 32px) !important; } /* ── Misc ────────────────────────────────────────────────────────────────── */ .breaking-news-banner { padding: 8px !important; } .breaking-banner-items { flex-direction: column !important; } .related-popup { width: calc(100vw - 16px) !important; left: 8px !important; right: 8px !important; } .live-update-banner { flex-wrap: wrap !important; } .psent-wrap { overflow-x: auto !important; } .portfolio-cockpit, #portfolio-cockpit { overflow-x: auto !important; } .heatmap-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; } .heatmap-tile { min-height: 52px !important; } /* Landing page */ .landing-nav { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 14px !important; } .nav-links { display: none !important; } .landing-container, .login-container { padding: 12px !important; } /* ── Tippziele ───────────────────────────────────────────────────────────── */ /* Gemessen waren 35 Bedienelemente kleiner als 36px — mit dem Daumen kaum zu treffen. Apple und Google empfehlen mindestens 44px; 40 ist der Kompromiss, der die Oberfläche nicht auseinanderzieht. */ button, .btn, select, input[type="checkbox"], input[type="radio"], .icon-btn, .card-action-btn, .drawer-action-btn { min-height: 40px; min-width: 40px; /* auch Icon-Knöpfe waren oft nur 15–30px breit */ } /* Ausnahmen: Dinge, die zwar