/* Kryptid — matches seecolors.de's "Classic" theme: primary #3B82F6, secondary #06B6D4, accent #10B981 (constant across both themes — only neutrals/surfaces invert, see variable blocks below). */ /* Reset und Basis-Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Theme variables ─────────────────────────────────────────────────── Dark is the default (:root, no attribute needed). An explicit [data-theme="light"|"dark"] on — set by app.js after a user picks a theme and persisted to localStorage — always wins. Absent that choice, prefers-color-scheme decides. Brand/accent/semantic colors (blue/cyan/green gradient, error red, warning amber) are NOT themed here — they're already legible on both light and dark surfaces and stay as literal values throughout the rest of this file. */ :root { --bg-body: #020617; --bg-surface: #0F172A; --bg-surface-alpha: rgba(15, 23, 42, 0.95); --bg-input: #1E293B; --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-faint: #64748B; --overlay-02: rgba(255, 255, 255, 0.02); --overlay-03: rgba(255, 255, 255, 0.03); --overlay-04: rgba(255, 255, 255, 0.04); --overlay-06: rgba(255, 255, 255, 0.06); --overlay-08: rgba(255, 255, 255, 0.08); --overlay-10: rgba(255, 255, 255, 0.1); --overlay-15: rgba(255, 255, 255, 0.15); --shadow-color: rgba(0, 0, 0, 0.35); --backdrop-color: rgba(0, 0, 0, 0.85); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } :root[data-theme="light"] { --bg-body: #F1F5F9; --bg-surface: #FFFFFF; --bg-surface-alpha: rgba(255, 255, 255, 0.97); --bg-input: #F1F5F9; --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #5B6B80; --text-faint: #5F7086; --overlay-02: rgba(15, 23, 42, 0.02); --overlay-03: rgba(15, 23, 42, 0.035); --overlay-04: rgba(15, 23, 42, 0.045); --overlay-06: rgba(15, 23, 42, 0.06); --overlay-08: rgba(15, 23, 42, 0.08); --overlay-10: rgba(15, 23, 42, 0.1); --overlay-15: rgba(15, 23, 42, 0.15); --shadow-color: rgba(15, 23, 42, 0.12); --backdrop-color: rgba(15, 23, 42, 0.6); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-body: #F1F5F9; --bg-surface: #FFFFFF; --bg-surface-alpha: rgba(255, 255, 255, 0.97); --bg-input: #F1F5F9; --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #5B6B80; --text-faint: #5F7086; --overlay-02: rgba(15, 23, 42, 0.02); --overlay-03: rgba(15, 23, 42, 0.035); --overlay-04: rgba(15, 23, 42, 0.045); --overlay-06: rgba(15, 23, 42, 0.06); --overlay-08: rgba(15, 23, 42, 0.08); --overlay-10: rgba(15, 23, 42, 0.1); --overlay-15: rgba(15, 23, 42, 0.15); --shadow-color: rgba(15, 23, 42, 0.12); --backdrop-color: rgba(15, 23, 42, 0.6); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-body); min-height: 100vh; color: var(--text-primary); line-height: 1.6; position: relative; } /* Google Material Symbols — ligature font: the icon name as literal text renders as the glyph. Variable font axes tuned for a crisp small-UI look (rounded style matches the rest of this app's soft, rounded aesthetic). */ .icon-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; color: currentColor; } /* Theme toggle — normal in-flow button everywhere (create/dashboard/ retrieve), inside each page's own .header-top-row. Shows the icon for the mode a click switches TO (sun while dark, moon while light), matching the convention used by GitHub etc. A previous fixed-position version caused two distinct classes of overlap bug: crowding against the language switcher/login button in the header on the create page, and — worse — permanently covering whatever content scrolled underneath it on dashboard/retrieve, since position:fixed doesn't move with the page. Normal flow removes both bug classes everywhere at once. */ .theme-toggle { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--overlay-08); border: 1px solid var(--overlay-10); border-radius: 50%; color: var(--text-primary); cursor: pointer; backdrop-filter: blur(10px); transition: all 0.2s ease; } .theme-toggle:hover { background: var(--overlay-15); transform: translateY(-1px); } .theme-toggle .icon-dark { display: none; } :root[data-theme="light"] .theme-toggle .icon-light { display: none; } :root[data-theme="light"] .theme-toggle .icon-dark { display: block; } /* Subtle animated background — slow-drifting blurred gradient blobs, well below the content in z-index. Purely decorative, never intercepts clicks. */ .bg-animation { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-animation span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.22; will-change: transform; } .bg-animation span:nth-child(1) { width: 42vw; height: 42vw; top: -10%; left: -8%; background: #3B82F6; animation: drift1 26s ease-in-out infinite; } .bg-animation span:nth-child(2) { width: 38vw; height: 38vw; bottom: -12%; right: -6%; background: #06B6D4; animation: drift2 32s ease-in-out infinite; } .bg-animation span:nth-child(3) { width: 30vw; height: 30vw; top: 35%; left: 55%; background: #10B981; animation: drift3 22s ease-in-out infinite; } @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 8vh) scale(1.12); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7vw, -6vh) scale(1.08); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4vw, 5vh) scale(0.94); } } .container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* Header */ .header { background: var(--bg-surface); color: var(--text-primary); padding: 2rem 2rem; text-align: center; box-shadow: 0 8px 32px var(--shadow-color); margin-bottom: 3rem; border-radius: 16px; position: relative; /* backdrop-filter alone creates a new stacking context (independent of z-index/overflow) — .card further down also has backdrop-filter and comes later in the DOM, so without an explicit z-index here .header's entire subtree (including the z-index:950 language dropdown menu) would paint UNDER .card by default same-level DOM-order tie-breaking. This explicit z-index elevates .header's own stacking context above it, letting the dropdown correctly overlay the page content below. */ z-index: 5; backdrop-filter: blur(10px); border: 1px solid var(--overlay-10); } /* No overflow:hidden on .header — the language dropdown menu is an absolutely-positioned descendant that needs to render past the header's own box; its own border-radius (matching the header's top corners) keeps this gradient bar looking clipped without needing the parent to actually clip anything. */ .header::before { border-radius: 16px 16px 0 0; content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3B82F6, #06B6D4, #10B981); pointer-events: none; } .logo { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; position: relative; z-index: 1; } .logo img { height: 150px; width: auto; transition: all 0.3s ease; object-fit: contain; filter: drop-shadow(0 4px 8px var(--shadow-color)); } .logo-link { text-decoration: none; transition: all 0.3s ease; display: inline-block; } .logo-link:hover { transform: translateY(-2px); filter: brightness(1.1); } .logo-link:hover img { filter: drop-shadow(0 6px 12px var(--shadow-color)); } .logo h1 { font-size: 2rem; font-weight: 700; margin: 0; background: linear-gradient(90deg, #3B82F6, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; } .subtitle { font-size: 1.2rem; opacity: 0.85; font-weight: 400; position: relative; z-index: 1; color: var(--text-secondary); letter-spacing: 0.5px; } /* Main Content */ .main { flex: 1; display: flex; flex-direction: column; gap: 2rem; } /* Cards */ .card, .result-card { background: var(--bg-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 20px 40px var(--shadow-color); backdrop-filter: blur(10px); border: 1px solid var(--overlay-10); } .result-card { border: 2px solid rgba(16, 185, 129, 0.4); background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(16, 185, 129, 0.06) 100%); } /* Tabs */ .tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; background: var(--overlay-04); padding: 0.25rem; border-radius: 12px; border: 1px solid var(--overlay-08); } .tab-button { flex: 1; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--text-muted); } .tab-button.active { background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); } .tab-button:hover:not(.active) { background: var(--overlay-06); color: var(--text-primary); } /* Tab Content */ .tab-content { display: none; } .tab-content.active { display: block; } /* Input Groups */ .input-group { margin-bottom: 1.5rem; } .input-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-secondary); } /* Google-style floating-label fields — used only in the login/register forms. Pure CSS (no JS): input comes before label in markup so the :not(:placeholder-shown) sibling selector can detect content, and each input needs placeholder=" " (a literal space) since the trick requires a non-empty placeholder attribute to exist at all. */ .floating-input-group { position: relative; margin-bottom: 1.5rem; } .floating-input-group input { width: 100%; padding: 1.35rem 1rem 0.55rem; border: 1.5px solid var(--overlay-15); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .floating-input-group label { position: absolute; top: 1rem; inset-inline-start: 1rem; /* mirrors to the right in dir="rtl" (Arabic) */ color: var(--text-muted); font-size: 1rem; line-height: 1; pointer-events: none; transition: all 0.15s ease; } .floating-input-group input:focus { outline: none; border-color: rgba(59, 130, 246, 0.45); box-shadow: inset 0 0 0 100px rgba(59, 130, 246, 0.035), 0 0 12px rgba(59, 130, 246, 0.18); } .floating-input-group input:focus ~ label, .floating-input-group input:not(:placeholder-shown) ~ label { top: 0.4rem; font-size: 0.7rem; color: #3B82F6; } .input-group textarea { width: 100%; padding: 1rem; border: 2px solid var(--overlay-10); border-radius: 8px; font-family: inherit; font-size: 1rem; resize: vertical; transition: border-color 0.2s ease; background: var(--bg-input); color: var(--text-primary); } .input-group textarea:focus { outline: none; border-color: rgba(59, 130, 246, 0.45); box-shadow: inset 0 0 0 100px rgba(59, 130, 246, 0.035), 0 0 12px rgba(59, 130, 246, 0.18); } /* File Upload */ .file-upload-area { border: 2px dashed var(--overlay-15); border-radius: 12px; padding: 3rem 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease; background: var(--overlay-02); } .file-upload-area:hover { border-color: #3B82F6; background: rgba(59, 130, 246, 0.06); } .file-upload-area.dragover { border-color: #06B6D4; background: rgba(6, 182, 212, 0.1); transform: scale(1.02); } .file-upload-icon { color: var(--text-faint); margin-bottom: 1rem; width: 48px; height: 48px; } .file-upload-area p { margin-bottom: 0.5rem; color: var(--text-muted); } .upload-link { color: #3B82F6; font-weight: 500; text-decoration: underline; } .file-info { font-size: 0.875rem; color: var(--text-faint); } /* File Preview */ .file-preview { background: var(--overlay-03); border-radius: 8px; padding: 1rem; margin-top: 1rem; border: 1px solid var(--overlay-08); } .file-info-display { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .file-name { font-weight: 500; color: var(--text-primary); } .file-size { color: var(--text-muted); font-size: 0.875rem; } .remove-file { background: #ef4444; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } /* Settings — each field stacks label → input → hint, at every screen size, so nothing needs a separate mobile override or a fixed-pixel alignment hack for the hint text. */ .settings { margin: 1.5rem 0; padding: 1.5rem; background: var(--overlay-02); border-radius: 12px; border: 1px solid var(--overlay-08); } .setting-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; } .setting-group:last-child { margin-bottom: 0; } .setting-group label { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; font-weight: 500; color: var(--text-secondary); font-size: 0.95rem; } /* display:inline-flex (not the span default of inline) so width/height actually apply — a plain inline element ignores explicit sizing, which let the child SVG's own width/height HTML attributes (20px) render at their intrinsic size instead of the intended 16px, uneven enough next to Arabic text metrics to read as a misaligned icon+label pairing. */ .setting-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .setting-icon .icon-svg { width: 100%; height: 100%; } .setting-group input[type="text"], .setting-group input[type="email"], .setting-group input[type="password"] { width: 100%; padding: 0.75rem; border: 2px solid var(--overlay-10); border-radius: 8px; font-family: inherit; font-size: 1rem; background: var(--bg-input); color: var(--text-primary); transition: border-color 0.2s ease; } /* Custom chevron (native