/* ══════════════════════════════════════════════════════════════════ Photo Disruption Editor — Premium Dark UI ══════════════════════════════════════════════════════════════════ */ /* Inter is linked from each page's , not @imported here: an @import only starts after this file has downloaded and parsed, and it blocks rendering until it finishes — a chained request in front of first paint. */ /* ── Tokens ─────────────────────────────────────────────────────── */ :root { --bg-primary: #0b0d11; --bg-secondary: #12151c; --bg-card: #181c26; --bg-glass: rgba(24, 28, 38, 0.75); --border: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.12); --text-primary: #e8ecf4; --text-secondary: #8891a4; --text-muted: #555d6e; --accent: #6c5ce7; --accent-light: #a29bfe; --accent-glow: rgba(108, 92, 231, 0.25); --success: #00cec9; --success-glow: rgba(0, 206, 201, 0.2); --warning: #fdcb6e; --danger: #ff6b6b; --gradient-1: linear-gradient(135deg, #6c5ce7, #a29bfe); --gradient-2: linear-gradient(135deg, #0b0d11 0%, #1a1f2e 100%); --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5); --shadow-glow: 0 0 30px var(--accent-glow); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Reset ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* ── Background Ambience ────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 600px 400px at 20% 10%, rgba(108,92,231,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 80%, rgba(0,206,201,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ── Layout ─────────────────────────────────────────────────────── */ .app-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; } header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; border-bottom: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--gradient-1); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--shadow-glow); } .logo h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.3px; } .logo h1 span { color: var(--accent-light); } .header-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; background: rgba(0, 206, 201, 0.1); border: 1px solid rgba(0, 206, 201, 0.2); font-size: 0.75rem; font-weight: 500; color: var(--success); } .header-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); } main { flex: 1; display: grid; grid-template-columns: 320px 1fr; /* One row, no taller than main. Left to size itself, the row grew to fit the whole settings panel — over 4,000 px in the editor — so the panel never scrolled on its own, the page did, and a loaded photo was centred about 1,900 px below the fold. */ grid-template-rows: minmax(0, 1fr); gap: 0; max-height: calc(100vh - 65px); } /* ── Side Panel (Controls) ──────────────────────────────────────── */ .side-panel { border-right: 1px solid var(--border); background: var(--bg-secondary); overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .panel-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; transition: border-color var(--transition); } .panel-section:hover { border-color: var(--border-hover); } .panel-section h3 { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .panel-section h3 .icon { font-size: 0.85rem; } /* ── Slider Controls ────────────────────────────────────────────── */ .control-group { margin-bottom: 16px; } .control-group:last-child { margin-bottom: 0; } .control-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .control-label span { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); } .control-value { font-size: 0.75rem; font-weight: 600; color: var(--accent-light); font-variant-numeric: tabular-nums; background: rgba(108, 92, 231, 0.1); padding: 2px 8px; border-radius: 4px; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); outline: none; cursor: pointer; transition: background var(--transition); } input[type="range"]:hover { background: rgba(255, 255, 255, 0.12); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gradient-1); box-shadow: 0 0 10px var(--accent-glow), 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 18px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.4); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--gradient-1); box-shadow: 0 0 10px var(--accent-glow); cursor: pointer; } /* ── Toggle Switch ──────────────────────────────────────────────── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; } .toggle-row span { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); } .toggle { position: relative; width: 44px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: background var(--transition); } .toggle-slider::before { content: ''; position: absolute; bottom: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--transition), background var(--transition); } .toggle input:checked + .toggle-slider { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--gradient-1); color: #fff; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 40px var(--accent-glow), var(--shadow-md); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(40%); } .btn-success { background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; box-shadow: 0 0 20px var(--success-glow); } .btn-success:hover { transform: translateY(-1px); box-shadow: 0 0 30px var(--success-glow), var(--shadow-md); } .btn-success:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(40%); } .btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255,255,255,0.03); } .btn-block { width: 100%; } .action-buttons { display: flex; flex-direction: column; gap: 10px; } /* ── Main Content Area ──────────────────────────────────────────── */ .content-area { display: flex; flex-direction: column; overflow: hidden; } /* ── Upload Zone ────────────────────────────────────────────────── */ .upload-zone { position: relative; border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--gradient-shine), var(--bg-card); margin: 24px; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: rgba(108, 92, 231, 0.05); box-shadow: inset 0 0 40px rgba(108, 92, 231, 0.05); } .upload-zone.drag-over { transform: scale(1.01); } .upload-icon { font-size: 3rem; margin-bottom: 16px; display: block; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .upload-zone h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } .upload-zone p { font-size: 0.85rem; color: var(--text-secondary); } .upload-zone p strong { color: var(--accent-light); cursor: pointer; } .upload-zone input[type="file"] { display: none; } /* ── Preview Area ───────────────────────────────────────────────── */ .preview-area { flex: 1; display: none; flex-direction: column; overflow: hidden; } .preview-area.active { display: flex; } .preview-tabs { display: flex; gap: 2px; padding: 12px 24px 0; border-bottom: 1px solid var(--border); } .preview-tab { padding: 10px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all var(--transition); } .preview-tab:hover { color: var(--text-primary); } .preview-tab.active { color: var(--accent-light); border-bottom-color: var(--accent); } .preview-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; gap: 24px; overflow: auto; } .preview-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; max-width: 48%; flex: 1; box-shadow: var(--shadow-sm); } .preview-card-header { padding: 10px 16px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .preview-card-header .dot { width: 8px; height: 8px; border-radius: 50%; } .dot-original { background: var(--warning); } .dot-processed { background: var(--success); } .preview-card img, .preview-card canvas { width: 100%; display: block; object-fit: contain; max-height: calc(100vh - 250px); background: repeating-conic-gradient(rgba(255,255,255,0.03) 0% 25%, transparent 0% 50%) 50% / 20px 20px; } /* ── Batch Queue ────────────────────────────────────────────────── */ .batch-panel { display: none; } .batch-panel.active { display: block; } .queue-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px 0; } .queue-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8rem; transition: all var(--transition); } .queue-item.processing { border-color: var(--accent); background: rgba(108, 92, 231, 0.05); } .queue-item.done { border-color: rgba(0, 206, 201, 0.3); background: rgba(0, 206, 201, 0.03); } .queue-item .q-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); } .queue-item .q-status { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .q-status.pending { color: var(--text-muted); } .q-status.working { color: var(--accent-light); } .q-status.complete { color: var(--success); } .queue-item .q-icon { font-size: 1rem; } /* ── Progress Bar ───────────────────────────────────────────────── */ .progress-bar-wrap { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; margin-top: 12px; display: none; } .progress-bar-wrap.active { display: block; } .progress-bar-fill { height: 100%; width: 0%; background: var(--gradient-1); border-radius: 2px; transition: width 0.3s ease; box-shadow: 0 0 10px var(--accent-glow); } /* ── Stats ──────────────────────────────────────────────────────── */ .stats-row { display: flex; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(10px); } .stat-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 100px; font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .stat-chip .stat-val { color: var(--text-primary); font-weight: 600; } /* ── Spinner ────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--accent-light); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Scrollbar ──────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 900px) { main { grid-template-columns: 1fr; grid-template-rows: none; max-height: none; } .side-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 400px; } .preview-container { flex-direction: column; } .preview-card { max-width: 100%; } } /* ── Preset Buttons ─────────────────────────────────────────────── */ .presets-section { background: var(--gradient-shine), var(--bg-card); } .preset-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .btn-preset { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-family: inherit; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all var(--transition); } .btn-preset:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .btn-preset.active { border-color: var(--accent); color: var(--accent-light); background: rgba(108, 92, 231, 0.1); box-shadow: 0 0 12px rgba(108, 92, 231, 0.1); } .btn-randomize { flex: 1; padding: 8px 12px; border: 1px solid rgba(255, 179, 71, 0.3); border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(255, 179, 71, 0.1), rgba(255, 107, 107, 0.1)); color: #ffb347; font-family: inherit; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all var(--transition); } .btn-randomize:hover { border-color: rgba(255, 179, 71, 0.6); background: linear-gradient(135deg, rgba(255, 179, 71, 0.2), rgba(255, 107, 107, 0.2)); color: #ffc971; box-shadow: 0 0 15px rgba(255, 179, 71, 0.15); } /* ── Panel Hints ────────────────────────────────────────────────── */ .panel-hint { font-size: 0.72rem; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; opacity: 0.7; } .btn-clear-saved { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-size: 0.65rem; padding: 2px 6px; cursor: pointer; transition: all var(--transition); flex-shrink: 0; line-height: 1; } .btn-clear-saved:hover { border-color: var(--danger); color: var(--danger); background: rgba(255, 107, 107, 0.08); } /* ── Filename Preview ──────────────────────────────────────────── */ .filename-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 10px; background: rgba(108, 92, 231, 0.06); border: 1px solid rgba(108, 92, 231, 0.15); border-radius: 6px; font-size: 0.72rem; } .filename-preview .preview-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; } .filename-preview code { color: var(--accent-light); font-family: 'Courier New', monospace; font-size: 0.75rem; font-weight: 600; word-break: break-all; } /* ── Metadata Mode Toggle ───────────────────────────────────────── */ .meta-mode-toggle { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 14px; } .meta-mode-btn { flex: 1; padding: 8px 12px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .meta-mode-btn:hover { color: var(--text-primary); } .meta-mode-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-glow); } /* ── Metadata Input Fields ──────────────────────────────────────── */ .meta-field { margin-bottom: 12px; } .meta-field:last-of-type { margin-bottom: 0; } .meta-field label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; } .meta-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--text-primary); font-family: inherit; font-size: 0.8rem; outline: none; transition: border-color var(--transition), background var(--transition); } .meta-input::placeholder { color: var(--text-muted); } .meta-input:focus { border-color: var(--accent); background: rgba(108, 92, 231, 0.05); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1); } .meta-input:hover { border-color: var(--border-hover); } /* datetime-local specific */ .meta-input[type="datetime-local"] { color-scheme: dark; } .meta-input[type="number"] { font-variant-numeric: tabular-nums; } /* ── Header Navigation ──────────────────────────────────────────── */ .header-nav { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm); padding: 3px; } .nav-link { padding: 7px 16px; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: 0.8rem; font-weight: 600; transition: all var(--transition); } .nav-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .nav-link.nav-active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-glow); } /* ── Select Inputs ──────────────────────────────────────────────── */ select.meta-input { cursor: pointer; color-scheme: dark; background-color: #1a1f2e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238891a4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; -webkit-appearance: none; appearance: none; padding-right: 32px; } select.meta-input option { background-color: #1a1f2e; color: #e8ecf4; padding: 6px 10px; } select.meta-input optgroup { background-color: #12151c; color: #8891a4; font-weight: 600; font-size: 0.78rem; } /* ── Batch Content Layout ───────────────────────────────────────── */ .batch-content { overflow-y: auto; } .batch-drop { margin: 24px; flex-shrink: 0; } .batch-empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } /* ── Batch Table ────────────────────────────────────────────────── */ .batch-table-wrap { flex: 1; overflow: auto; padding: 0 24px 24px; } .batch-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.78rem; } .batch-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); padding: 10px 14px; text-align: left; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .batch-table tbody tr { transition: all var(--transition); } .batch-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .batch-table tbody td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.03); color: var(--text-secondary); white-space: nowrap; } .batch-table .col-num { color: var(--text-muted); font-weight: 600; width: 40px; } .batch-table .col-output { color: var(--accent-light); font-family: 'Courier New', monospace; font-size: 0.74rem; } .batch-table .col-time { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 500; } .batch-table .col-gps { font-variant-numeric: tabular-nums; font-size: 0.72rem; } .batch-table .col-original { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } /* Row states */ .row-processing { background: rgba(108, 92, 231, 0.06) !important; } .row-processing td { color: var(--text-primary) !important; } .row-done { background: rgba(0, 206, 201, 0.03) !important; } /* ── Badges ─────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .badge-pending { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .badge-working { background: rgba(108, 92, 231, 0.15); color: var(--accent-light); } .badge-done { background: rgba(0, 206, 201, 0.12); color: var(--success); } .badge-error { background: rgba(255, 107, 107, 0.12); color: var(--danger); } /* ── Small Spinner ──────────────────────────────────────────────── */ .spinner-sm { display: inline-block; width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.15); border-top-color: var(--accent-light); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ── Progress Text ──────────────────────────────────────────────── */ .progress-text { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin-top: 6px; font-variant-numeric: tabular-nums; } /* ── 2-Column Control Layout ────────────────────────────────────── */ .control-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── Thumbnail Column ───────────────────────────────────────────── */ .th-thumb { width: 52px; } .col-thumb { width: 52px; padding: 6px 8px !important; } .thumb-img { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; } /* ── Add More Bar ───────────────────────────────────────────────── */ .add-more-bar { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: rgba(108, 92, 231, 0.04); border-bottom: 1px solid var(--border); transition: background var(--transition); } .add-more-bar.drag-over { background: rgba(108, 92, 231, 0.1); } .btn-add-more { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: transparent; color: var(--accent-light); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-add-more:hover { background: rgba(108, 92, 231, 0.1); border-style: solid; } .add-icon { font-size: 1.1rem; font-weight: 700; } .add-more-info { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* ── Row Action Buttons ─────────────────────────────────────────── */ .th-actions { width: 70px; } .col-actions { width: 70px; padding: 6px 8px !important; display: flex; gap: 4px; } .btn-row-action { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .btn-row-action:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .btn-row-delete:hover { border-color: var(--danger) !important; color: var(--danger) !important; background: rgba(255, 107, 107, 0.08) !important; } .btn-row-download:disabled { opacity: 0.3; cursor: not-allowed; } .btn-row-download:hover:not(:disabled) { border-color: var(--success) !important; color: var(--success) !important; background: rgba(0, 206, 201, 0.08) !important; } /* ── Row Entrance Animation ─────────────────────────────────────── */ .row-enter { animation: rowSlideIn 0.3s ease forwards; opacity: 0; } @keyframes rowSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Progress Details ───────────────────────────────────────────── */ .batch-progress-section { margin-top: 8px; } .progress-details { display: flex; justify-content: space-between; margin-top: 6px; } .progress-current { font-size: 0.68rem; color: var(--accent-light); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── File Size Column ───────────────────────────────────────────── */ .col-size { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-muted); } /* ── Checkbox Row ───────────────────────────────────────────────── */ .checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); padding: 6px 0; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .checkbox-row:hover span { color: var(--text-primary); } /* ── Select Column ──────────────────────────────────────────────── */ .th-select { width: 36px; } .col-select { width: 36px; padding: 6px 8px !important; text-align: center; } .col-select input[type="checkbox"], .th-select input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* ══════════════════════════════════════════════════════════════════ FAQ Page ══════════════════════════════════════════════════════════════════ */ .faq-main { display: block; max-height: calc(100vh - 65px); overflow-y: auto; scroll-behavior: smooth; } .faq-content { max-width: 820px; margin: 0 auto; padding: 40px 32px 80px; } /* ── FAQ Hero ───────────────────────────────────────────────────── */ .faq-hero { text-align: center; padding: 48px 32px; background: var(--gradient-shine), var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: 32px; position: relative; overflow: hidden; } .faq-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 300px 200px at 30% 20%, rgba(108,92,231,0.1) 0%, transparent 70%), radial-gradient(ellipse 200px 200px at 70% 80%, rgba(0,206,201,0.06) 0%, transparent 70%); pointer-events: none; } .faq-hero-icon { font-size: 3rem; margin-bottom: 16px; display: block; animation: float 3s ease-in-out infinite; position: relative; } .faq-hero h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .faq-hero p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; max-width: 560px; margin: 0 auto; position: relative; } /* ── Pill Navigation ────────────────────────────────────────────── */ .faq-nav-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; position: sticky; top: 0; z-index: 10; padding: 14px 0; background: rgba(11, 13, 17, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .faq-pill { padding: 8px 18px; border-radius: 100px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); text-decoration: none; font-size: 0.78rem; font-weight: 600; transition: all var(--transition); white-space: nowrap; } .faq-pill:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .faq-pill-active { border-color: var(--accent) !important; color: var(--accent-light) !important; background: rgba(108, 92, 231, 0.12) !important; box-shadow: 0 0 12px rgba(108, 92, 231, 0.1); } /* ── Section Headers ────────────────────────────────────────────── */ .faq-section { margin-bottom: 36px; scroll-margin-top: 70px; } .faq-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .faq-section-icon { font-size: 1.1rem; } .faq-section-header h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.2px; color: var(--text-primary); } /* ── FAQ Item (Accordion) ───────────────────────────────────────── */ .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .faq-item:hover { border-color: var(--border-hover); } .faq-item.open { border-color: rgba(108, 92, 231, 0.3); box-shadow: 0 0 20px rgba(108, 92, 231, 0.06); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: transparent; border: none; color: var(--text-primary); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: left; transition: color var(--transition); } .faq-question:hover { color: var(--accent-light); } .faq-chevron { font-size: 1.3rem; color: var(--text-muted); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color var(--transition); flex-shrink: 0; margin-left: 12px; } .faq-item.open .faq-chevron { transform: rotate(90deg); color: var(--accent-light); } /* ── FAQ Answer ─────────────────────────────────────────────────── */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease; padding: 0 20px; } .faq-item.open .faq-answer { max-height: 600px; padding: 0 20px 20px; } .faq-answer p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer strong { color: var(--text-primary); font-weight: 600; } .faq-answer ul { list-style: none; padding: 0; margin: 8px 0; } .faq-answer ul li { position: relative; padding: 6px 0 6px 20px; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.6; } .faq-answer ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .faq-answer a { color: var(--accent-light); text-decoration: none; border-bottom: 1px solid rgba(162, 155, 254, 0.3); transition: border-color var(--transition); } .faq-answer a:hover { border-color: var(--accent-light); } /* ── Callout Boxes ──────────────────────────────────────────────── */ .faq-callout { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--radius-sm); background: rgba(0, 206, 201, 0.06); border: 1px solid rgba(0, 206, 201, 0.15); } .faq-callout-success { background: rgba(0, 206, 201, 0.06); border-color: rgba(0, 206, 201, 0.15); } .faq-callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; } .faq-callout p { margin-bottom: 0 !important; } /* ── FAQ Footer ─────────────────────────────────────────────────── */ .faq-footer { text-align: center; padding: 48px 24px; margin-top: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); position: relative; overflow: hidden; } .faq-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 300px 150px at 50% 100%, rgba(108,92,231,0.08) 0%, transparent 70%); pointer-events: none; } .faq-footer p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 24px; position: relative; } .faq-footer-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; } .faq-footer-links .btn { text-decoration: none; } /* ── FAQ Responsive ─────────────────────────────────────────────── */ @media (max-width: 600px) { .faq-content { padding: 24px 16px 60px; } .faq-hero { padding: 32px 20px; } .faq-hero h2 { font-size: 1.3rem; } .faq-nav-pills { gap: 6px; padding: 10px 8px; } .faq-pill { padding: 6px 14px; font-size: 0.72rem; } .faq-question { padding: 14px 16px; font-size: 0.82rem; } .faq-item.open .faq-answer { padding: 0 16px 16px; } } .col-select input[type="checkbox"]:focus-visible, .th-select input[type="checkbox"]:focus-visible, .checkbox-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } .batch-table tbody tr:hover { background: rgba(108, 92, 231, 0.06); } /* ══════════════════════════════════════════════════════════════════ Toast Notification System ══════════════════════════════════════════════════════════════════ */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 0.82rem; font-weight: 500; color: var(--text-primary); pointer-events: all; transform: translateX(120%); opacity: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; max-width: 380px; backdrop-filter: blur(12px); } .toast-visible { transform: translateX(0); opacity: 1; } .toast-exit { animation: toastSlideOut 0.3s ease forwards; } @keyframes toastSlideOut { to { transform: translateX(120%); opacity: 0; } } .toast-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; } .toast-success .toast-icon { background: rgba(0,206,201,0.15); color: var(--success); } .toast-error .toast-icon { background: rgba(255,107,107,0.15); color: var(--danger); } .toast-info .toast-icon { background: rgba(108,92,231,0.15); color: var(--accent-light); } .toast-warning .toast-icon { background: rgba(253,203,110,0.15); color: var(--warning); } .toast-success { border-color: rgba(0,206,201,0.2); } .toast-error { border-color: rgba(255,107,107,0.2); } .toast-info { border-color: rgba(108,92,231,0.2); } .toast-warning { border-color: rgba(253,203,110,0.2); } .toast-msg { flex: 1; line-height: 1.4; } .toast-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 2px; line-height: 1; transition: color var(--transition); } .toast-close:hover { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════════════ Light Theme ══════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-primary: #f0f2f5; --bg-secondary: #e8eaef; --bg-card: #ffffff; --bg-glass: rgba(255, 255, 255, 0.85); --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.15); --text-primary: #1a1d26; --text-secondary: #5a6175; --text-muted: #919aad; --accent: #6c5ce7; --accent-light: #5b4cdb; --accent-glow: rgba(108, 92, 231, 0.2); --success: #00a89d; --success-glow: rgba(0, 168, 157, 0.15); --warning: #e0a800; --danger: #e74c3c; --gradient-2: linear-gradient(135deg, #f0f2f5 0%, #e0e3ea 100%); --gradient-shine: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, transparent 50%); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.1); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); } [data-theme="light"] body::before { background: radial-gradient(ellipse 600px 400px at 20% 10%, rgba(108,92,231,0.06) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 80%, rgba(0,206,201,0.04) 0%, transparent 70%); } [data-theme="light"] input[type="range"] { background: rgba(0, 0, 0, 0.08); } [data-theme="light"] input[type="range"]:hover { background: rgba(0, 0, 0, 0.12); } [data-theme="light"] .toggle-slider { background: rgba(0, 0, 0, 0.12); } [data-theme="light"] select.meta-input { /* The .meta-input rule below uses the background shorthand, which resets repeat and position; without restating them the chevron tiled across the whole control and the text was unreadable. color-scheme was also left on dark, so the native control drew itself dark on a light page. */ color-scheme: light; background-repeat: no-repeat; background-position: right 12px center; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%235a6175' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } [data-theme="light"] select.meta-input option { background-color: #fff; color: #1a1d26; } [data-theme="light"] select.meta-input optgroup { background-color: #f0f2f5; color: #5a6175; } [data-theme="light"] .meta-input { background: rgba(0,0,0,0.03); } [data-theme="light"] .meta-input[type="datetime-local"] { color-scheme: light; } [data-theme="light"] .preview-card img, [data-theme="light"] .preview-card canvas { background: repeating-conic-gradient(rgba(0,0,0,0.04) 0% 25%, transparent 0% 50%) 50% / 20px 20px; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); } [data-theme="light"] .toast { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); } [data-theme="light"] .faq-nav-pills { background: rgba(240, 242, 245, 0.9); } /* ── Theme Toggle ───────────────────────────────────────────────── */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); flex-shrink: 0; } .theme-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255,255,255,0.08); } [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.04); } [data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.08); } /* ══════════════════════════════════════════════════════════════════ Before / After Slider ══════════════════════════════════════════════════════════════════ */ .ba-slider-container { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); cursor: col-resize; user-select: none; flex: 1; max-height: calc(100vh - 250px); } .ba-slider-container img, .ba-slider-container canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 250px); object-fit: contain; } .ba-after-wrap { position: absolute; inset: 0; overflow: hidden; } .ba-after-wrap img, .ba-after-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .ba-divider { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); z-index: 3; pointer-events: none; } .ba-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent-glow), var(--shadow-md); z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; } .ba-label { position: absolute; top: 12px; padding: 4px 12px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; z-index: 2; pointer-events: none; } .ba-label-before { left: 12px; background: rgba(253,203,110,0.15); color: var(--warning); border: 1px solid rgba(253,203,110,0.25); } .ba-label-after { right: 12px; background: rgba(0,206,201,0.15); color: var(--success); border: 1px solid rgba(0,206,201,0.25); } /* ══════════════════════════════════════════════════════════════════ Hash Verification Panel ══════════════════════════════════════════════════════════════════ */ .hash-panel { display: none; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(10px); } .hash-panel.active { display: flex; flex-direction: column; gap: 12px; } .hash-verdict { font-size: 0.85rem; font-weight: 600; line-height: 1.5; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); } .hash-verdict-evades { color: var(--success); background: rgba(0,206,201,0.08); border-color: rgba(0,206,201,0.25); } .hash-verdict-borderline { color: var(--warning); background: rgba(253,203,110,0.08); border-color: rgba(253,203,110,0.3); } .hash-verdict-match { color: var(--danger); background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.3); } .hash-verdict-unknown { color: var(--text-muted); } .hash-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; } .hash-table th { text-align: left; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 0 10px 6px 0; } .hash-table td { padding: 4px 10px 4px 0; color: var(--text-secondary); vertical-align: middle; } .hash-table td:nth-child(2), .hash-table td:nth-child(3) { font-family: 'Courier New', monospace; letter-spacing: 0.5px; } .hash-note { font-size: 0.68rem; line-height: 1.5; color: var(--text-muted); margin: 0; } .hash-block { display: flex; align-items: center; gap: 10px; } .hash-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); white-space: nowrap; } .hash-value { font-family: 'Courier New', monospace; font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-secondary); letter-spacing: 0.5px; } .hash-diff { padding: 4px 12px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; } .hash-diff-evades { background: rgba(0,206,201,0.12); color: var(--success); } .hash-diff-borderline { background: rgba(253,203,110,0.14); color: var(--warning); } .hash-diff-match { background: rgba(255,107,107,0.12); color: var(--danger); } /* ══════════════════════════════════════════════════════════════════ Processing Animation ══════════════════════════════════════════════════════════════════ */ .processing-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: var(--radius-md); } .processing-overlay::after { content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 100%; background: linear-gradient( to bottom, transparent 0%, rgba(108, 92, 231, 0.08) 40%, rgba(108, 92, 231, 0.15) 50%, rgba(108, 92, 231, 0.08) 60%, transparent 100% ); animation: scanDown 1.8s ease-in-out infinite; } @keyframes scanDown { 0% { top: -100%; } 100% { top: 200%; } } .processing-shimmer { position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(108, 92, 231, 0.05) 25%, rgba(108, 92, 231, 0.1) 50%, rgba(108, 92, 231, 0.05) 75%, transparent 100% ); animation: shimmerSlide 2s ease-in-out infinite; pointer-events: none; border-radius: var(--radius-md); } @keyframes shimmerSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ══════════════════════════════════════════════════════════════════ Custom Presets ══════════════════════════════════════════════════════════════════ */ .custom-presets-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .btn-save-preset { padding: 6px 12px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: transparent; color: var(--accent-light); font-family: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-save-preset:hover { background: rgba(108, 92, 231, 0.1); border-style: solid; } .btn-custom-preset { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); color: var(--text-secondary); font-family: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 4px; } .btn-custom-preset:hover { border-color: var(--border-hover); color: var(--text-primary); } .btn-custom-preset .delete-preset { font-size: 0.6rem; color: var(--text-muted); cursor: pointer; margin-left: 2px; } .btn-custom-preset .delete-preset:hover { color: var(--danger); } /* ══════════════════════════════════════════════════════════════════ Keyboard Shortcuts Tooltip ══════════════════════════════════════════════════════════════════ */ .shortcuts-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); flex-shrink: 0; font-family: inherit; } .shortcuts-btn:hover { border-color: var(--border-hover); color: var(--text-primary); } .shortcuts-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; } .shortcuts-modal.active { display: flex; } .shortcuts-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); } .shortcuts-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .shortcut-row:last-child { border-bottom: none; } .shortcut-action { font-size: 0.82rem; color: var(--text-secondary); } .shortcut-keys { display: flex; gap: 4px; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 8px; border-radius: 5px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); font-size: 0.68rem; font-weight: 600; font-family: inherit; color: var(--text-muted); } [data-theme="light"] .shortcut-row { border-color: rgba(0,0,0,0.06); } [data-theme="light"] .kbd { background: rgba(0,0,0,0.05); } /* ══════════════════════════════════════════════════════════════════ Comparison Grid ══════════════════════════════════════════════════════════════════ */ .comparison-grid { display: none; padding: 24px; gap: 16px; } .comparison-grid.active { display: grid; grid-template-columns: 1fr 1fr; } .comparison-cell { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition); position: relative; } .comparison-cell:hover { border-color: var(--border-hover); transform: scale(1.01); } .comparison-cell.selected { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } .comparison-cell-header { padding: 8px 14px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .comparison-cell img { width: 100%; display: block; object-fit: contain; max-height: 300px; } .comparison-selected-badge { background: rgba(108,92,231,0.15); color: var(--accent-light); padding: 2px 8px; border-radius: 100px; font-size: 0.6rem; display: none; } .comparison-cell.selected .comparison-selected-badge { display: inline; } .btn-compare { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); color: var(--text-secondary); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-compare:hover { border-color: var(--accent); color: var(--accent-light); } .btn-compare:disabled { opacity: 0.4; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════════════ Drag & Reorder (Batch) ══════════════════════════════════════════════════════════════════ */ .batch-table tbody tr { cursor: grab; } .batch-table tbody tr:active { cursor: grabbing; } .batch-table tbody tr.dragging { opacity: 0.4; background: rgba(108, 92, 231, 0.08) !important; } .batch-table tbody tr.drag-over-row { border-top: 2px solid var(--accent) !important; } .drag-handle { color: var(--text-muted); font-size: 0.8rem; cursor: grab; padding: 0 4px; user-select: none; } .drag-handle:active { cursor: grabbing; } /* ══════════════════════════════════════════════════════════════════ EXIF Inspector Page ══════════════════════════════════════════════════════════════════ */ .exif-main { display: block; max-height: calc(100vh - 65px); overflow-y: auto; } .exif-content { max-width: 900px; margin: 0 auto; padding: 40px 32px 80px; } .exif-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 48px 40px; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--gradient-shine), var(--bg-card); margin-bottom: 32px; } .exif-drop-zone:hover, .exif-drop-zone.drag-over { border-color: var(--accent); background: rgba(108, 92, 231, 0.05); } .exif-results { display: none; } .exif-results.active { display: block; } .exif-image-info { display: flex; gap: 24px; margin-bottom: 24px; align-items: flex-start; } .exif-thumb { width: 200px; height: 150px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); flex-shrink: 0; } .exif-file-details { flex: 1; } .exif-file-details h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; word-break: break-all; } .exif-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .exif-detail-item { font-size: 0.78rem; color: var(--text-secondary); } .exif-detail-item strong { color: var(--text-primary); } .exif-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; margin-bottom: 24px; } .exif-table-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .exif-table-section h4 { padding: 12px 18px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .exif-table th { text-align: left; padding: 8px 18px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .exif-table td { padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-secondary); } .exif-table td:first-child { color: var(--text-primary); font-weight: 500; width: 35%; } .exif-no-data { text-align: center; padding: 32px; color: var(--text-muted); font-size: 0.85rem; } /* ══════════════════════════════════════════════════════════════════ Changelog Page ══════════════════════════════════════════════════════════════════ */ .changelog-main { display: block; max-height: calc(100vh - 65px); overflow-y: auto; } .changelog-content { max-width: 720px; margin: 0 auto; padding: 40px 32px 80px; } .changelog-hero { text-align: center; padding: 40px 32px; background: var(--gradient-shine), var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: 40px; position: relative; overflow: hidden; } .changelog-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 300px 200px at 50% 30%, rgba(108,92,231,0.1) 0%, transparent 70%); pointer-events: none; } .changelog-hero h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; position: relative; } .changelog-hero p { font-size: 0.85rem; color: var(--text-secondary); position: relative; } /* Timeline */ .changelog-timeline { position: relative; padding-left: 32px; } .changelog-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); } .changelog-entry { position: relative; margin-bottom: 32px; } .changelog-entry::before { content: ''; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); border: 2px solid var(--bg-primary); } .changelog-entry:first-child::before { width: 14px; height: 14px; left: -29px; top: 5px; } .changelog-version { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .changelog-version h3 { font-size: 1.1rem; font-weight: 700; } .changelog-version .version-tag { padding: 3px 10px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .version-tag-latest { background: rgba(0,206,201,0.12); color: var(--success); } .version-tag-old { background: rgba(255,255,255,0.05); color: var(--text-muted); } .changelog-date { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 12px; } .changelog-items { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; } .changelog-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; } .changelog-item-type { padding: 2px 8px; border-radius: 4px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; margin-top: 2px; } .type-new { background: rgba(0,206,201,0.12); color: var(--success); } .type-improved { background: rgba(108,92,231,0.12); color: var(--accent-light); } .type-fixed { background: rgba(253,203,110,0.12); color: var(--warning); } /* ── Preview mode switcher ──────────────────────────────────────── */ .preview-mode-btns { display: flex; gap: 6px; padding: 12px 24px 0; } .btn-preview-mode { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-preview-mode:hover { border-color: var(--border-hover); color: var(--text-primary); } .btn-preview-mode.active { border-color: var(--accent); color: var(--accent-light); background: rgba(108,92,231,0.08); } /* ── Header actions group ───────────────────────────────────────── */ .header-actions { display: flex; align-items: center; gap: 8px; } /* ── Watermark Tool: Color Picker ──────────────────────────────── */ .color-picker-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .wt-color-input { -webkit-appearance: none; appearance: none; width: 40px; height: 36px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; padding: 2px; transition: border-color var(--transition); } .wt-color-input:hover { border-color: var(--border-hover); } .wt-color-input::-webkit-color-swatch-wrapper { padding: 0; } .wt-color-input::-webkit-color-swatch { border: none; border-radius: 4px; } .color-presets { display: flex; gap: 6px; } .color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all var(--transition); padding: 0; } .color-swatch:hover { transform: scale(1.15); border-color: var(--border-hover); } .color-swatch.active { border-color: var(--accent-light); box-shadow: 0 0 8px var(--accent-glow); transform: scale(1.1); } /* Light theme adaptations for color swatches */ [data-theme="light"] .color-swatch[data-color="#ffffff"] { border-color: rgba(0,0,0,0.15); } [data-theme="light"] .color-swatch[data-color="#ffffff"].active { border-color: var(--accent); } /* ── Watermark Tool: Font Preview ──────────────────────────────── */ .wt-font-preview { margin-top: 8px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all var(--transition); letter-spacing: 0.3px; } [data-theme="light"] .wt-font-preview { background: rgba(0, 0, 0, 0.02); } /* ── Watermark Tool: Textarea ──────────────────────────────────── */ .wt-textarea { resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.5; } /* ── Watermark Tool: Logo Upload Zone ──────────────────────────── */ .wt-logo-upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px; border: 2px dashed var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); text-align: center; background: rgba(255, 255, 255, 0.02); } .wt-logo-upload-zone:hover { border-color: var(--accent); background: rgba(108, 92, 231, 0.05); } .wt-logo-upload-zone p { font-size: 0.75rem; color: var(--text-muted); margin: 0; } .wt-logo-upload-zone strong { color: var(--accent-light); } .wt-logo-preview-img { width: 100%; max-height: 100px; object-fit: contain; border-radius: var(--radius-sm); background: repeating-conic-gradient(rgba(255,255,255,0.05) 0% 25%, transparent 0% 50%) 50% / 12px 12px; border: 1px solid var(--border); } /* ── Watermark Tool: Live Canvas ───────────────────────────────── */ .wt-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: auto; background: repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%) 50% / 20px 20px; } .wt-canvas-wrap canvas { max-width: 100%; max-height: calc(100vh - 180px); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); object-fit: contain; } /* ── Watermark Tool: Preview Hint ──────────────────────────────── */ .wt-preview-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--bg-glass); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 100px; padding: 8px 20px; font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; pointer-events: none; animation: fadeInUp 0.5s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── Watermark Tool: Anti-Detection Section ────────────────────── */ .wt-antidetect-section { background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(0,206,201,0.05)), var(--bg-card) !important; } /* ── Watermark Tool: Font select styling ───────────────────────── */ .wt-font-select optgroup { font-weight: 700; font-size: 0.75rem; color: var(--text-muted); } /* ── Watermark Tool: Mode Toggle ───────────────────────────────── */ .meta-mode-toggle { display: flex; gap: 6px; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); padding: 4px; } .meta-mode-btn { flex: 1; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-align: center; } .meta-mode-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .meta-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 12px rgba(108, 92, 231, 0.3); } [data-theme="light"] .meta-mode-toggle { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .meta-mode-btn:hover { background: rgba(0, 0, 0, 0.04); } /* ══════════════════════════════════════════════════════════════════ Object Remover — Page Styles ══════════════════════════════════════════════════════════════════ */ /* ── Remover Main Layout ───────────────────────────────────────── */ .remover-main { flex: 1; display: grid; grid-template-columns: 320px 1fr; gap: 0; max-height: calc(100vh - 65px); } /* ── Canvas Workspace ──────────────────────────────────────────── */ .canvas-workspace { display: flex; flex-direction: column; overflow: hidden; } .canvas-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(10px); } .toolbar-left { display: flex; align-items: center; gap: 16px; } .toolbar-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); } .toolbar-dims { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .toolbar-right { display: flex; gap: 6px; } .toolbar-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .toolbar-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .toolbar-btn.active { border-color: var(--accent); color: var(--accent-light); background: rgba(108, 92, 231, 0.1); } /* ── Canvas Container ──────────────────────────────────────────── */ .canvas-container { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; background: repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%) 50% / 20px 20px; cursor: none; border: 1px solid transparent; transition: border-color 0.3s ease; } .canvas-container:hover { border-color: rgba(108, 92, 231, 0.15); } .remover-canvas { max-width: 100%; max-height: calc(100vh - 180px); border-radius: var(--radius-md); box-shadow: var(--shadow-md); object-fit: contain; } /* Canvas stack — both canvases on top of each other */ .canvas-stack { position: relative; display: inline-block; line-height: 0; } .canvas-stack .remover-canvas { max-width: 100%; max-height: calc(100vh - 180px); display: block; } .mask-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.45; mix-blend-mode: screen; } /* ── Brush Cursor ──────────────────────────────────────────────── */ .brush-cursor { position: absolute; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); display: none; z-index: 10; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15); transition: width 0.1s ease, height 0.1s ease; } /* ── Brush Tools ───────────────────────────────────────────────── */ .brush-tools { display: flex; gap: 6px; margin-top: 14px; } .btn-brush-tool { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-brush-tool:hover { border-color: var(--border-hover); color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .btn-brush-tool.active { border-color: var(--accent); color: var(--accent-light); background: rgba(108, 92, 231, 0.12); box-shadow: 0 0 12px rgba(108, 92, 231, 0.1); } /* ── API Key Row ───────────────────────────────────────────────── */ .api-key-row { display: flex; gap: 6px; } .api-key-row .meta-input { flex: 1; } .btn-toggle-vis { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; transition: all var(--transition); } .btn-toggle-vis:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.06); } /* ── Processing Overlay ─────────────────────────────────────────── */ .canvas-container .processing-overlay { position: absolute; inset: 0; background: rgba(11, 13, 17, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 20; border-radius: var(--radius-md); } .processing-spinner { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; } .processing-spinner .spinner { width: 36px; height: 36px; border-width: 3px; } /* ── Cost Info ─────────────────────────────────────────────────── */ .remover-cost-info { background: var(--gradient-shine), var(--bg-card); } .usage-stats { margin-top: 8px; font-size: 0.75rem; color: var(--text-secondary); } .usage-stats strong { color: var(--accent-light); } /* ── Remover B/A Slider ────────────────────────────────────────── */ .remover-ba-slider { flex: 1; margin: 24px; } /* ── Responsive (Remover) ──────────────────────────────────────── */ @media (max-width: 900px) { .remover-main { grid-template-columns: 1fr; max-height: none; } .canvas-container { min-height: 400px; } .remover-canvas { max-height: 60vh; } } /* ── Light Theme overrides for Remover ─────────────────────────── */ [data-theme="light"] .canvas-container { background: repeating-conic-gradient(rgba(0,0,0,0.04) 0% 25%, transparent 0% 50%) 50% / 20px 20px; } [data-theme="light"] .brush-cursor { border-color: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3); } [data-theme="light"] .canvas-container .processing-overlay { background: rgba(255, 255, 255, 0.85); } [data-theme="light"] .toolbar-btn { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .toolbar-btn:hover { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .btn-brush-tool { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .btn-brush-tool:hover { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .btn-toggle-vis { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .btn-toggle-vis:hover { background: rgba(0, 0, 0, 0.06); } /* ── Two-Column Control Layout ──────────────────────────────────── */ .control-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } /* ═══════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ /* ── Stacked (≤900px) ─────────────────────────────────────────── */ /* Two columns still fit up to 900px wide, where the settings panel keeps its own scrollbar; these rules are for the single stacked column below that. */ @media (max-width: 900px) { .side-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; max-height: none !important; overflow-y: visible !important; position: static !important; border-right: none !important; border-bottom: 1px solid var(--border); } .content-area { width: 100% !important; min-height: 400px; } } /* ── Tablet (≤1024px) ─────────────────────────────────────────── */ @media (max-width: 1024px) { /* Make batch table horizontally scrollable */ .batch-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .batch-table { min-width: 800px; } /* Side-by-side view stacks on tablet */ #sidebyside-view > div { flex-direction: column !important; } #sidebyside-view .preview-card { max-width: 100% !important; } } /* ── Mobile (≤768px) ──────────────────────────────────────────── */ @media (max-width: 768px) { /* Header: logo + nav scrollable */ header { flex-wrap: wrap; gap: 8px; padding: 10px 12px !important; } .header-nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; padding-bottom: 4px; scrollbar-width: none; } .header-nav::-webkit-scrollbar { display: none; } .nav-link { white-space: nowrap; font-size: 0.7rem; padding: 6px 10px; flex-shrink: 0; } .header-actions { gap: 6px; } .header-badge { font-size: 0.6rem; padding: 4px 8px; } /* Side panel: collapse into scrollable horizontal strip */ .side-panel { padding: 10px !important; } .panel-section { padding: 12px !important; margin-bottom: 8px !important; } .panel-section h3 { font-size: 0.7rem; } /* Upload zone compact */ .upload-zone { padding: 30px 16px !important; } .upload-zone h2 { font-size: 1.1rem; } /* Stats row: wrap */ .stats-row { flex-wrap: wrap; gap: 6px; } .stat-chip { font-size: 0.65rem; padding: 4px 8px; } /* Preview modes compact */ .preview-mode-btns { gap: 4px; } .btn-preview-mode { font-size: 0.65rem; padding: 5px 10px; } /* Batch table: tighter columning */ .batch-table th, .batch-table td { padding: 6px 8px; font-size: 0.68rem; } /* Batch drop zone compact */ .batch-drop-zone { padding: 30px 16px !important; } /* Action buttons stacked */ .action-buttons { gap: 6px; } .btn-block { padding: 10px !important; font-size: 0.75rem !important; } /* Hash panel: stack */ .hash-panel { overflow-x: auto; } .hash-table td:nth-child(2), .hash-table td:nth-child(3) { font-size: 0.66rem; } /* 2-col controls stack on small screens */ .control-row-2col { grid-template-columns: 1fr; } /* Comparison grid: 1 column */ .comparison-grid { grid-template-columns: 1fr !important; } /* Preset buttons: wrap */ .preset-buttons { flex-wrap: wrap; gap: 4px; } .btn-preset { font-size: 0.65rem; padding: 5px 10px; } /* Quick Load section */ .quick-load-section { padding: 10px !important; } } /* ── Small phone (≤480px) ─────────────────────────────────────── */ @media (max-width: 480px) { .logo h1 { font-size: 1rem; } .logo-icon { font-size: 1.2rem; } header { padding: 8px 10px !important; } .side-panel { padding: 8px !important; } .panel-section { padding: 10px !important; } .upload-zone h2 { font-size: 0.95rem; } .ba-slider-container { border-radius: 8px !important; } /* Touch-friendly toggle rows */ .toggle-row { padding: 6px 0; } .toggle { min-width: 38px; min-height: 20px; } /* Meta fields: less padding */ .meta-field { margin-bottom: 8px; } .meta-input { padding: 7px 10px; font-size: 0.72rem; } } /* ══════════════════════════════════════════════════════════════════ Design Refresh v2 — Premium Polish Layer Applied on top of the base system; affects every page. ══════════════════════════════════════════════════════════════════ */ /* ── v2 Tokens ──────────────────────────────────────────────────── */ :root { --bg-primary: #07090d; --bg-secondary: #0e1118; --bg-card: #141824; --bg-glass: rgba(14, 17, 24, 0.72); --border: rgba(148, 163, 216, 0.09); --border-hover: rgba(148, 163, 216, 0.2); --accent-2: #00cec9; --gradient-1: linear-gradient(135deg, #7c6cf0 0%, #a29bfe 55%, #8ec5ff 100%); --ring: 0 0 0 3px rgba(124, 108, 240, 0.28); } [data-theme="light"] { --bg-primary: #f0f2f5; --bg-secondary: #e8eaef; --bg-card: #ffffff; --bg-glass: rgba(255, 255, 255, 0.85); --border: rgba(20, 24, 46, 0.1); --border-hover: rgba(20, 24, 46, 0.22); --ring: 0 0 0 3px rgba(108, 92, 231, 0.18); } /* ── Global refinements ─────────────────────────────────────────── */ ::selection { background: rgba(124, 108, 240, 0.35); color: #fff; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } /* Richer ambient background */ body::before { background: radial-gradient(ellipse 800px 500px at 15% -5%, rgba(108, 92, 231, 0.13) 0%, transparent 65%), radial-gradient(ellipse 700px 600px at 90% 100%, rgba(0, 206, 201, 0.07) 0%, transparent 65%), radial-gradient(ellipse 500px 400px at 60% 40%, rgba(142, 197, 255, 0.04) 0%, transparent 70%); } [data-theme="light"] body::before { background: radial-gradient(ellipse 800px 500px at 15% -5%, rgba(108, 92, 231, 0.09) 0%, transparent 65%), radial-gradient(ellipse 700px 600px at 90% 100%, rgba(0, 206, 201, 0.06) 0%, transparent 65%); } /* ── Header ─────────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 50; border-bottom: none; } header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(124, 108, 240, 0.35) 20%, rgba(148, 163, 216, 0.15) 50%, rgba(0, 206, 201, 0.25) 80%, transparent 100%); pointer-events: none; } .logo-icon { transition: transform var(--transition), box-shadow var(--transition); } .logo:hover .logo-icon { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 24px var(--accent-glow), 0 0 48px rgba(124, 108, 240, 0.15); } /* Nav pills: soft hover, gradient active */ .nav-link { position: relative; } .nav-link.nav-active { background: var(--gradient-1); box-shadow: 0 2px 12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ── Side panel & sections ──────────────────────────────────────── */ .panel-section { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 45%), var(--bg-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.2); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .panel-section:hover { border-color: rgba(124, 108, 240, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.25); } [data-theme="light"] .panel-section { background: var(--bg-card); box-shadow: 0 1px 3px rgba(20, 24, 46, 0.06); } [data-theme="light"] .panel-section:hover { box-shadow: 0 4px 14px rgba(20, 24, 46, 0.1); } /* Section titles: accent tick */ .panel-section h3::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--gradient-1); box-shadow: 0 0 8px var(--accent-glow); flex-shrink: 0; } /* ── Sliders ────────────────────────────────────────────────────── */ input[type="range"] { height: 5px; background: linear-gradient(90deg, rgba(124, 108, 240, 0.35), rgba(255, 255, 255, 0.08)); } input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; background: #fff; border: 4px solid #7c6cf0; box-shadow: 0 0 0 3px rgba(124, 108, 240, 0.18), 0 2px 8px rgba(0, 0, 0, 0.45); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(124, 108, 240, 0.22), 0 2px 10px rgba(0, 0, 0, 0.5); } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #fff; border: 4px solid #7c6cf0; box-shadow: 0 0 0 3px rgba(124, 108, 240, 0.18), 0 2px 8px rgba(0, 0, 0, 0.45); } input[type="range"]:focus-visible { box-shadow: none; } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring), 0 2px 8px rgba(0, 0, 0, 0.45); } .control-value { border: 1px solid rgba(124, 108, 240, 0.22); background: rgba(124, 108, 240, 0.12); padding: 2px 9px; border-radius: 100px; min-width: 42px; text-align: center; } /* ── Buttons: shine sweep ───────────────────────────────────────── */ .btn { position: relative; overflow: hidden; letter-spacing: 0.2px; } .btn-primary::before, .btn-success::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } .btn-primary:hover:not(:disabled)::before, .btn-success:hover:not(:disabled)::before { left: 130%; } .btn-primary { background: var(--gradient-1); box-shadow: 0 2px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-success { box-shadow: 0 2px 16px var(--success-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-outline:hover { border-color: rgba(124, 108, 240, 0.4); box-shadow: 0 0 14px rgba(124, 108, 240, 0.1); } /* ── Upload zone ────────────────────────────────────────────────── */ .upload-zone { border: 1.5px dashed rgba(148, 163, 216, 0.22); background: radial-gradient(ellipse 400px 200px at 50% 0%, rgba(124, 108, 240, 0.06) 0%, transparent 70%), var(--bg-card); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition); } .upload-zone:hover, .upload-zone.drag-over { border-color: rgba(124, 108, 240, 0.6); box-shadow: 0 0 0 1px rgba(124, 108, 240, 0.2), 0 8px 48px rgba(124, 108, 240, 0.12), inset 0 0 60px rgba(124, 108, 240, 0.04); } .upload-zone.drag-over { transform: scale(1.012); border-style: solid; } .upload-icon { width: 76px; height: 76px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; border-radius: 22px; background: linear-gradient(160deg, rgba(124, 108, 240, 0.16), rgba(0, 206, 201, 0.08)); border: 1px solid rgba(124, 108, 240, 0.25); box-shadow: 0 8px 32px rgba(124, 108, 240, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .upload-zone h2 { font-size: 1.3rem; letter-spacing: -0.4px; } /* ── Inputs ─────────────────────────────────────────────────────── */ .meta-input { border-radius: 8px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } .meta-input:focus { box-shadow: var(--ring), inset 0 1px 2px rgba(0, 0, 0, 0.1); } [data-theme="light"] .meta-input { box-shadow: inset 0 1px 2px rgba(20, 24, 46, 0.05); } /* ── Toggles ────────────────────────────────────────────────────── */ .toggle-slider { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .toggle input:checked + .toggle-slider { background: linear-gradient(135deg, #7c6cf0, #a29bfe); } .toggle input:focus-visible + .toggle-slider { box-shadow: var(--ring); } .toggle-slider::before { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } /* ── Preset buttons ─────────────────────────────────────────────── */ .btn-preset { border-radius: 100px; } .btn-preset:hover { transform: translateY(-1px); border-color: rgba(124, 108, 240, 0.35); } .btn-preset.active { background: linear-gradient(135deg, rgba(124, 108, 240, 0.22), rgba(124, 108, 240, 0.1)); box-shadow: 0 0 14px rgba(124, 108, 240, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .meta-mode-btn.active { background: var(--gradient-1); box-shadow: 0 2px 10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ── Stats chips ────────────────────────────────────────────────── */ .stat-chip { transition: border-color var(--transition), background var(--transition); } .stat-chip:hover { border-color: rgba(124, 108, 240, 0.3); background: rgba(124, 108, 240, 0.06); } .stat-chip .stat-val { color: var(--accent-light); } /* ── Header badge: soft pulse ───────────────────────────────────── */ .header-badge::before { animation: badgePulse 2.4s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 4px var(--success); opacity: 1; } 50% { box-shadow: 0 0 10px var(--success); opacity: 0.65; } } /* ── Toasts ─────────────────────────────────────────────────────── */ .toast { border-left-width: 3px; border-radius: 10px; } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-info { border-left-color: var(--accent); } .toast-warning { border-left-color: var(--warning); } /* ── Scrollbar ──────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 216, 0.16); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(124, 108, 240, 0.4); background-clip: content-box; } /* ── Entrance animation ─────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .side-panel .panel-section { animation: sectionIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .side-panel .panel-section:nth-child(1) { animation-delay: 0.03s; } .side-panel .panel-section:nth-child(2) { animation-delay: 0.07s; } .side-panel .panel-section:nth-child(3) { animation-delay: 0.11s; } .side-panel .panel-section:nth-child(4) { animation-delay: 0.15s; } .side-panel .panel-section:nth-child(5) { animation-delay: 0.19s; } @keyframes sectionIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .upload-zone { animation: zoneIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.1s; } @keyframes zoneIn { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } } /* The one tool that sends a photo off the device says so where the photo goes in. */ .remover-upload-notice { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 0.72rem; line-height: 1.5; color: var(--warning); background: rgba(253, 203, 110, 0.08); border: 1px solid rgba(253, 203, 110, 0.25); } /* ══════════════════════════════════════════════════════════════════ Single-column layout: photo first, actions always in reach ══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Stacked, the settings panel sat above the upload zone, which then began about 3,800px down a phone screen — five screens of sliders before you could add a photo. The photo comes first. */ .content-area { order: -1; } /* Process and Download sit at the end of the settings; keep them on screen while scrolling through those settings instead of at the bottom of them. */ .side-panel .action-buttons { position: sticky; bottom: 0; z-index: 5; padding: 12px 0; background: var(--bg-secondary); border-top: 1px solid var(--border); box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.45); /* Four full-width buttons stacked took a fifth of a phone screen, all the time. Two by two, and slimmer. */ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .side-panel .action-buttons .btn { padding: 10px 8px; font-size: 0.78rem; } } /* ══════════════════════════════════════════════════════════════════ Two columns: the photo fits the room beside the settings ══════════════════════════════════════════════════════════════════ */ @media (min-width: 901px) { /* Exactly the height left under the header, measured by flexbox — the 65px in main's max-height is a few pixels short of the real header, which made the whole page scroll by that much. */ main, .remover-main { flex-basis: 0; min-height: 0; } /* The right-hand column is exactly as tall as the window (see main), and scrolls rather than cutting off whatever does not fit. */ .content-area { overflow-y: auto; } .preview-area { min-height: 240px; } /* Sized from the window (100vh − 250px), the slider came out taller than the room left above the fingerprint panel and stats, and lost its top and bottom. It now takes exactly that room, with the photo fitted in. */ #preview-container > .ba-slider-container { align-self: stretch; max-height: none; } #preview-container > .ba-slider-container > img { height: 100%; max-height: none; } /* Anything taller than the room scrolls from its top, instead of spilling over both edges where the top half could not be scrolled back to. */ .preview-container { align-items: safe center; } /* The four variants scroll inside the column instead of being clipped (max-content rows: otherwise the rows shrink to fit and crop the photos). */ .comparison-grid.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; grid-auto-rows: max-content; } } /* Reframe is the one visible technique; the tag says so before it is switched on. */ .visible-tag { margin-left: 6px; padding: 1px 7px; border-radius: 100px; font-size: 0.6rem; letter-spacing: 0.6px; color: var(--warning); background: rgba(253, 203, 110, 0.1); border: 1px solid rgba(253, 203, 110, 0.3); } /* Light theme: the warning amber (#e0a800) is about 2:1 against white — too faint for text. Darker amber for the text of warning-toned elements. */ [data-theme="light"] .hash-verdict-borderline, [data-theme="light"] .hash-diff-borderline, [data-theme="light"] .visible-tag, [data-theme="light"] .remover-upload-notice { color: #8a6100; }