/* ============================================================================ VMAS XML Compare — Web Studio Multi-theme design system. Themes are switched via and persisted in localStorage ('vmas-web-theme'). ========================================================================== */ /* ----------------------------- THEME TOKENS ----------------------------- */ :root, :root[data-theme="aurora"] { color-scheme: dark; --bg: #070b18; --bg-2: #0b1226; --surface: rgba(17, 25, 48, 0.66); --surface-solid: #111930; --surface-2: rgba(255, 255, 255, 0.04); --border: rgba(148, 163, 200, 0.18); --border-strong: rgba(148, 163, 200, 0.35); --text: #eef2ff; --muted: #93a0bd; --accent-a: #38bdf8; --accent-b: #8b5cf6; --accent-text: #7dd3fc; --ok: #34d399; --err: #fb7185; --warn: #fbbf24; --console-bg: rgba(2, 6, 18, 0.72); --console-fg: #cbd5e1; --shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.65); --shadow-glow: 0 0 42px -12px rgba(56, 189, 248, 0.45); --blob-1: #1d4ed8; --blob-2: #7c3aed; --blob-3: #0891b2; --blob-opacity: 0.42; --grid-line: rgba(148, 163, 200, 0.05); --sb-track: rgba(255, 255, 255, 0.05); --sb-thumb: #3d4c72; --swatch: linear-gradient(135deg, #38bdf8, #8b5cf6); } :root[data-theme="daylight"] { color-scheme: light; --bg: #eef2f9; --bg-2: #e4eaf5; --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff; --surface-2: rgba(28, 42, 58, 0.04); --border: rgba(28, 42, 58, 0.12); --border-strong: rgba(28, 42, 58, 0.24); --text: #17253a; --muted: #5b6b83; --accent-a: #0284c7; --accent-b: #7c3aed; --accent-text: #0369a1; --ok: #059669; --err: #e11d48; --warn: #d97706; --console-bg: #101a2e; --console-fg: #dbe4f5; --shadow: 0 24px 50px -20px rgba(23, 37, 58, 0.35); --shadow-glow: 0 0 36px -14px rgba(2, 132, 199, 0.5); --blob-1: #93c5fd; --blob-2: #c4b5fd; --blob-3: #99f6e4; --blob-opacity: 0.55; --grid-line: rgba(23, 37, 58, 0.045); --sb-track: rgba(23, 37, 58, 0.08); --sb-thumb: #a9b8d0; --swatch: linear-gradient(135deg, #7dd3fc, #ffffff 55%, #c4b5fd); } :root[data-theme="neon"] { color-scheme: dark; --bg: #05020d; --bg-2: #0b0518; --surface: rgba(20, 8, 38, 0.66); --surface-solid: #150a2b; --surface-2: rgba(255, 255, 255, 0.045); --border: rgba(236, 72, 153, 0.28); --border-strong: rgba(236, 72, 153, 0.5); --text: #f5f1ff; --muted: #a894c9; --accent-a: #f0abfc; --accent-b: #22d3ee; --accent-text: #f0abfc; --ok: #4ade80; --err: #fb7185; --warn: #facc15; --console-bg: rgba(6, 2, 16, 0.82); --console-fg: #d8ccf0; --shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.8); --shadow-glow: 0 0 46px -10px rgba(236, 72, 153, 0.55); --blob-1: #db2777; --blob-2: #06b6d4; --blob-3: #7c3aed; --blob-opacity: 0.38; --grid-line: rgba(236, 72, 153, 0.07); --sb-track: rgba(255, 255, 255, 0.05); --sb-thumb: #5b3f86; --swatch: linear-gradient(135deg, #f0abfc, #22d3ee); } :root[data-theme="solar"] { color-scheme: light; --bg: #faf4ea; --bg-2: #f3e9d9; --surface: rgba(255, 252, 246, 0.82); --surface-solid: #fffcf6; --surface-2: rgba(120, 72, 20, 0.05); --border: rgba(120, 72, 20, 0.16); --border-strong: rgba(120, 72, 20, 0.3); --text: #3b2a17; --muted: #8a6f52; --accent-a: #ea580c; --accent-b: #e11d48; --accent-text: #c2410c; --ok: #15803d; --err: #dc2626; --warn: #b45309; --console-bg: #2b1c0e; --console-fg: #f3e6d4; --shadow: 0 24px 48px -20px rgba(120, 72, 20, 0.35); --shadow-glow: 0 0 36px -14px rgba(234, 88, 12, 0.45); --blob-1: #fdba74; --blob-2: #fda4af; --blob-3: #fde68a; --blob-opacity: 0.55; --grid-line: rgba(120, 72, 20, 0.05); --sb-track: rgba(120, 72, 20, 0.08); --sb-thumb: #cdaa80; --swatch: linear-gradient(135deg, #fb923c, #fffcf6 55%, #fda4af); } /* ------------------------------- BASE ---------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; transition: background-color 0.45s ease, color 0.45s ease; } ::selection { background: var(--accent-a); color: #fff; } /* Always-visible, themed scrollbars */ * { scrollbar-width: auto; scrollbar-color: var(--sb-thumb) var(--sb-track); } ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 8px; } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; min-height: 36px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent-a); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --------------------------- BACKGROUND FX ----------------------------- */ .background { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 800px at 75% -10%, var(--bg-2), var(--bg) 60%); transition: background 0.45s ease; } .blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--blob-opacity); animation: float 22s infinite ease-in-out alternate; will-change: transform; transition: background-color 0.6s ease; } .blob-1 { top: -12%; left: -8%; width: 520px; height: 520px; background-color: var(--blob-1); } .blob-2 { bottom: -22%; right: -10%; width: 640px; height: 640px; background-color: var(--blob-2); animation-delay: -8s; } .blob-3 { top: 35%; left: 55%; width: 380px; height: 380px; background-color: var(--blob-3); animation-delay: -15s; } @keyframes float { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40px, 60px, 0) scale(1.14); } 100% { transform: translate3d(-30px, 90px, 0) scale(1.05); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%); } /* ----------------------------- ACCESS GATE ------------------------------ */ #auth-overlay { position: fixed; inset: 0; z-index: 1200; /* above the boot overlay */ display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity 0.4s ease, visibility 0.4s; } #auth-overlay.gone { opacity: 0; visibility: hidden; pointer-events: none; } #auth-overlay[hidden] { display: none; } /* the flex display above would otherwise defeat [hidden] */ #auth-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(400px, 92vw); padding: 34px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); text-align: center; } #auth-card.shake { animation: auth-shake 0.4s ease; } @keyframes auth-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } } .auth-logo { width: 46px; height: 46px; color: var(--accent-text); } .auth-logo svg { width: 100%; height: 100%; } .auth-title { font-size: 1.25rem; font-weight: 800; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 6px; } .auth-input { width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; } .auth-input:focus { outline: none; border-color: var(--accent-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 25%, transparent); } .auth-btn { width: 100%; margin-top: 2px; } .auth-message { min-height: 1.2em; font-size: 0.88rem; font-weight: 700; color: var(--err); opacity: 0; transition: opacity 0.25s ease; } .auth-message.show { opacity: 1; } /* -------------------------- INACTIVITY WARNING -------------------------- */ #idle-overlay { position: fixed; inset: 0; z-index: 1300; /* above the access gate and boot overlay */ display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } #idle-overlay[hidden] { display: none; } /* the flex display above would otherwise defeat [hidden] */ #idle-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(400px, 92vw); padding: 34px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); text-align: center; } #idle-countdown { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; } /* ----------------------------- BOOT SPLASH ------------------------------ */ #boot-overlay { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity 0.5s ease, visibility 0.5s; } #boot-overlay.gone { opacity: 0; visibility: hidden; pointer-events: none; } .boot-rings { position: relative; width: 84px; height: 84px; } .boot-rings span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent-a); animation: spin 1.15s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite; } .boot-rings span:nth-child(2) { inset: 12px; border-top-color: var(--accent-b); animation-duration: 1.6s; animation-direction: reverse; } .boot-rings span:nth-child(3) { inset: 24px; border-top-color: var(--ok); animation-duration: 2.1s; } @keyframes spin { to { transform: rotate(360deg); } } .boot-title { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .boot-status { color: var(--muted); font-size: 0.9rem; } .boot-hint { color: var(--muted); font-size: 0.75rem; opacity: 0.75; } /* ------------------------------- TOP BAR -------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 65%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: #fff; box-shadow: var(--shadow-glow); animation: logoBob 5s ease-in-out infinite; } .brand-logo svg { width: 22px; height: 22px; } @keyframes logoBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(3deg); } } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.01em; } .brand-tag { font-size: 0.68rem; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; } .topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .engine-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: pulse 1.4s ease-in-out infinite; } .engine-pill.ready { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .engine-pill.ready .pill-dot { background: var(--ok); animation: none; } .engine-pill.error { color: var(--err); } .engine-pill.error .pill-dot { background: var(--err); animation: none; } @keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } } .theme-switcher { display: flex; gap: 8px; padding: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .theme-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; display: grid; place-items: center; transition: transform 0.2s ease, border-color 0.2s ease; } .theme-dot span { width: 18px; height: 18px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,0.2); } .theme-dot[data-theme-pick="aurora"] span { background: linear-gradient(135deg, #38bdf8, #8b5cf6); } .theme-dot[data-theme-pick="daylight"] span { background: linear-gradient(135deg, #7dd3fc, #ffffff 55%, #c4b5fd); } .theme-dot[data-theme-pick="neon"] span { background: linear-gradient(135deg, #f0abfc, #22d3ee); } .theme-dot[data-theme-pick="solar"] span { background: linear-gradient(135deg, #fb923c, #fffcf6 55%, #fda4af); } .theme-dot:hover { transform: translateY(-2px) scale(1.12); } .theme-dot.active { border-color: var(--accent-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 30%, transparent); } /* -------------------------------- VIEWS --------------------------------- Only one view exists on screen at a time (display:none), so the setup page and the report can never overlap — not even during transitions. */ .view { display: none; } .view.active { display: flex; flex-direction: column; animation: viewIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } } #view-setup { align-items: center; padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 40px) 32px; gap: 26px; } /* -------------------------------- HERO ---------------------------------- */ .hero { text-align: center; max-width: 760px; } .hero-title { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; } .hero-gradient { background: linear-gradient(92deg, var(--accent-a), var(--accent-b), var(--accent-a)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientSlide 7s linear infinite; } @keyframes gradientSlide { to { background-position: 220% 0; } } .hero-sub { color: var(--muted); font-size: clamp(0.9rem, 1.6vw, 1.02rem); line-height: 1.65; margin: 14px auto 0; max-width: 640px; } .hero-sub strong { color: var(--accent-text); } /* ------------------------------ SETUP CARD ------------------------------ */ .setup-card { width: min(880px, 100%); background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: clamp(20px, 3.4vw, 34px); display: flex; flex-direction: column; gap: 22px; transform-style: preserve-3d; transition: transform 0.2s ease-out, box-shadow 0.4s ease, background 0.45s ease, border-color 0.45s ease; } .dropzones { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; } .dz-versus { align-self: center; font-weight: 800; font-size: 0.8rem; color: var(--muted); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); } .dropzone { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 16px; padding: 26px 18px 22px; text-align: center; cursor: pointer; background: var(--surface-2); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, background 0.25s, box-shadow 0.3s; transform-style: preserve-3d; outline: none; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent-a); transform: perspective(800px) rotateX(3deg) translateY(-4px); box-shadow: var(--shadow-glow); } .dropzone.drag-over { border-color: var(--accent-b); border-style: solid; background: color-mix(in srgb, var(--accent-b) 12%, transparent); transform: perspective(800px) rotateX(4deg) scale(1.02); } .dropzone.has-file { border-style: solid; border-color: color-mix(in srgb, var(--ok) 55%, transparent); } .dz-badge { position: absolute; top: 10px; left: 12px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; padding: 3px 8px; border-radius: 999px; color: #fff; } .dz-badge-src { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); } .dz-badge-tgt { background: linear-gradient(135deg, var(--ok), var(--accent-a)); } .dz-icon { color: var(--accent-text); margin-bottom: 6px; } .dz-icon svg { width: 34px; height: 34px; } .dropzone:hover .dz-icon svg { animation: iconNudge 0.7s ease infinite alternate; } @keyframes iconNudge { to { transform: translateY(-4px); } } .dz-title { font-weight: 700; font-size: 0.92rem; } .dz-hint { color: var(--muted); font-size: 0.78rem; margin-top: 4px; } .dz-browse { color: var(--accent-text); font-weight: 600; text-decoration: underline; } .dz-file { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-solid); border: 1px solid var(--border); padding: 8px 12px; border-radius: 10px; font-size: 0.8rem; animation: chipIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(0.92); } } .dz-file-name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-file-size { color: var(--muted); font-size: 0.72rem; } .dz-clear { border: none; background: none; color: var(--err); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; border-radius: 6px; } .dz-clear:hover { background: color-mix(in srgb, var(--err) 15%, transparent); } /* ------------------------------- OPTIONS -------------------------------- */ .options-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .switch-label { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); cursor: pointer; user-select: none; } .switch { position: relative; width: 42px; height: 24px; display: inline-block; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; border-radius: 999px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong); transition: background 0.25s, border-color 0.25s; } .slider::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 3px; top: 50%; transform: translateY(-50%); background: var(--muted); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s; } .switch input:checked + .slider { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); border-color: transparent; } .switch input:checked + .slider::before { transform: translate(18px, -50%); background: #fff; } .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 35%, transparent); } /* ------------------------------- BUTTONS -------------------------------- */ .primary-btn { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 15px 24px; border: none; border-radius: 12px; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-a) 70%, transparent); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.2s; } .primary-btn:hover:not(:disabled) { transform: translateY(-3px) perspective(600px) rotateX(5deg); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--accent-b) 75%, transparent); } .primary-btn:active:not(:disabled) { transform: translateY(-1px) scale(0.985); } .primary-btn:disabled { filter: grayscale(0.5) brightness(0.75); cursor: not-allowed; } .btn-shine { position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%); transform: skewX(-20deg); } .primary-btn:hover:not(:disabled) .btn-shine { animation: shine 0.9s ease; } @keyframes shine { to { left: 130%; } } .loader { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.9s linear infinite; } .primary-btn:not(:disabled) .loader { display: none; } .ghost-btn, .accent-btn, .chip-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s, border-color 0.2s; } .ghost-btn { padding: 9px 16px; font-size: 0.85rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); } .ghost-btn:hover { border-color: var(--accent-a); transform: translateY(-2px); } .accent-btn { padding: 9px 18px; font-size: 0.85rem; color: #fff; border: none; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-a) 80%, transparent); } .accent-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .chip-btn { padding: 5px 12px; font-size: 0.72rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .chip-btn:hover { color: var(--text); border-color: var(--accent-a); transform: translateY(-1px); } /* ------------------------------- PROGRESS ------------------------------- */ #progress-wrap { display: flex; flex-direction: column; gap: 8px; } .progress-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); font-weight: 600; } #progress-pct { color: var(--accent-text); font-variant-numeric: tabular-nums; } .progress-track { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-a)); background-size: 200% 100%; animation: gradientSlide 2.2s linear infinite; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------ LOG CONSOLE ----------------------------- */ .log-card { width: min(880px, 100%); background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: background 0.45s ease, border-color 0.45s ease; } .log-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .log-header h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 0.84rem; font-weight: 700; } .log-led { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); transition: background 0.3s, box-shadow 0.3s; } .log-led.ready { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .log-led.busy { background: var(--accent-a); box-shadow: 0 0 8px var(--accent-a); animation: pulse 0.9s ease-in-out infinite; } .log-led.error { background: var(--err); box-shadow: 0 0 8px var(--err); } .log-actions { display: flex; gap: 7px; } .log-console { padding: 16px 18px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.8rem; line-height: 1.55; color: var(--console-fg); background: var(--console-bg); height: 210px; overflow: scroll; /* both scrollbars always available */ white-space: pre-wrap; /* wrap ON */ overflow-wrap: anywhere; transition: background 0.45s ease; } .log-console.wrap-off { white-space: pre; overflow-wrap: normal; } /* Notepad++ style wrap OFF */ .log-line { animation: logLineIn 0.3s ease both; } .log-line.err { color: var(--err); } .log-line.warn { color: var(--warn); } @keyframes logLineIn { from { opacity: 0; transform: translateX(-8px); } } /* -------------------------------- FOOTER -------------------------------- */ .page-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: 0.74rem; margin-top: 4px; } .footer-dot { opacity: 0.5; } /* ------------------------------ REPORT VIEW ----------------------------- */ #view-report.active { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 14px; gap: 12px; } .report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .report-files { flex: 1; min-width: 0; text-align: center; font-size: 0.8rem; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .report-files b { color: var(--accent-text); } .report-actions { display: flex; gap: 9px; align-items: center; } #report-frame { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: 14px; background: #ffffff; box-shadow: var(--shadow); } /* ------------------------------ RESPONSIVE ------------------------------ */ @media (max-width: 760px) { .dropzones { grid-template-columns: 1fr; } .dz-versus { justify-self: center; } .topbar { flex-direction: column; align-items: stretch; } .topbar-right { justify-content: space-between; } .report-toolbar { justify-content: center; } .report-files { width: 100%; order: -1; } } /* Hide PyScript chrome */ script[type="py"], py-terminal, .py-terminal, .py-error { display: none !important; } /* ============================================================================ ADMIN LOGS MODAL & BUTTON ========================================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2, 6, 18, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; padding: 20px; } .admin-modal-card { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 650px; max-height: 80vh; display: flex; flex-direction: column; padding: 24px; animation: authFadeIn 0.3s ease-out; } .admin-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .admin-modal-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); } .admin-modal-header .close-btn { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 4px; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .admin-modal-header .close-btn:hover { background: var(--surface-2); color: var(--text); } .admin-modal-card .hint { font-size: 0.82rem; color: var(--muted); margin-bottom: 18px; } .admin-modal-body { flex: 1; overflow-y: auto; margin-top: 6px; } .admin-modal-body .table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--console-bg); } .admin-modal-body table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: left; } .admin-modal-body th { background: var(--surface-2); padding: 10px 14px; font-weight: 600; color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } .admin-modal-body td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--console-fg); word-break: break-all; } .admin-modal-body tr:last-child td { border-bottom: none; } .admin-modal-body tr:hover td { background: var(--surface-2); } #admin-logs-btn { border: 1px dashed var(--accent-a); border-radius: 20px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; color: var(--accent-text); background: rgba(56, 189, 248, 0.05); cursor: pointer; transition: all 0.25s; } #admin-logs-btn:hover { border-style: solid; background: rgba(56, 189, 248, 0.12); transform: translateY(-1px); }