/* ============================================
AtlasHub — Generic Theme
7-Color Neumorphic Design System
============================================
Usage:
(in , before CSS)
(before )
JS sets only 7 core palette colors as CSS
custom properties. All semantic variables
(text, surface, shadows, alpha variants) are
derived here in CSS via color-mix().
Dark/light mode handled entirely in CSS.
All app-specific styles go in separate files.
This file contains ONLY design tokens, reset,
base typography, and reusable primitives.
============================================ */
/* ===========================================
1. DESIGN TOKENS (CSS Custom Properties)
=========================================== */
:root {
/* --- 7-Color Palette (set by theme-engine.js) --- */
--color-primary: #15608B;
--color-secondary: #05355D;
--color-tertiary: #549ABE;
--color-surface-tint: #8A5438;
--color-highlight: #FEBA53;
--color-bg: #E8EDF2;
--color-dark: #081A2D;
/* --- Surfaces (derived from palette via CSS) --- */
--bg: var(--color-bg);
--bg-elevated: var(--color-bg);
--surface: color-mix(in srgb, var(--color-bg) 92%, var(--color-dark));
/* --- Text (derived from palette via CSS) --- */
--text-primary: var(--color-dark);
--text-secondary: color-mix(in srgb, var(--color-dark) 55%, var(--color-bg));
--text-muted: color-mix(in srgb, var(--color-dark) 35%, var(--color-bg));
/* --- Alpha variants (derived from palette via CSS) --- */
--primary-light: color-mix(in srgb, var(--color-primary) 10%, transparent);
--primary-glow: color-mix(in srgb, var(--color-primary) 25%, transparent);
--secondary-light: color-mix(in srgb, var(--color-secondary) 10%, transparent);
--tertiary-light: color-mix(in srgb, var(--color-tertiary) 10%, transparent);
--tint-light: color-mix(in srgb, var(--color-surface-tint) 10%, transparent);
--highlight-light: color-mix(in srgb, var(--color-highlight) 12%, transparent);
/* --- Semantic --- */
--danger: hsl(0, 72%, 50%);
--success: #2EA043;
--warning: #D29922;
--info: var(--color-primary);
--info-alt: #6366f1;
/* --- Semantic Light Variants --- */
--success-light: color-mix(in srgb, var(--success) 10%, transparent);
--danger-light: color-mix(in srgb, var(--danger) 10%, transparent);
--warning-light: color-mix(in srgb, var(--warning) 10%, transparent);
--info-alt-light: color-mix(in srgb, var(--info-alt) 10%, transparent);
/* --- Borders --- */
--border: color-mix(in srgb, var(--color-dark) 6%, transparent);
--border-accent: color-mix(in srgb, var(--color-primary) 12%, transparent);
/* --- Neumorphic Shadows --- */
--shadow-dark: color-mix(in srgb, var(--color-bg) 80%, black);
--shadow-light: #FFFFFF;
--shadow-outset: 4px 4px 10px var(--shadow-dark),
-4px -4px 10px var(--shadow-light);
--shadow-inset: inset 2px 2px 5px var(--shadow-dark),
inset -2px -2px 5px var(--shadow-light);
--shadow-sm: 2px 2px 5px var(--shadow-dark),
-2px -2px 5px var(--shadow-light);
--shadow-hover: 6px 6px 14px var(--shadow-dark),
-6px -6px 14px var(--shadow-light);
--shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
/* --- Radii --- */
--radius: 14px;
--radius-md: 12px;
--radius-sm: 9px;
--radius-xs: 5px;
--radius-full: 9999px;
/* --- Spacing Scale (4px base) --- */
--sp-2xs: 2px;
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 16px;
--sp-lg: 24px;
--sp-xl: 32px;
--sp-2xl: 48px;
--sp-3xl: 64px;
/* --- Typography --- */
--font: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
'Consolas', monospace;
/* --- Motion --- */
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--dur-micro: 80ms;
--dur-short: 150ms;
--dur-medium: 250ms;
--dur-long: 400ms;
/* --- Layout --- */
--nav-height: 52px;
--content-max: 1100px;
--sidebar-width: 280px;
}
/* --- Dark Theme Overrides --- */
[data-theme="dark"] {
--bg: var(--color-dark);
--bg-elevated: color-mix(in srgb, var(--color-dark) 90%, var(--color-bg));
--surface: color-mix(in srgb, var(--color-dark) 82%, var(--color-bg));
--text-primary: color-mix(in srgb, var(--color-bg) 90%, white);
--text-secondary: color-mix(in srgb, var(--color-bg) 65%, var(--color-dark));
--text-muted: color-mix(in srgb, var(--color-bg) 40%, var(--color-dark));
--border: color-mix(in srgb, white 6%, transparent);
--danger: hsl(0, 65%, 55%);
--shadow-dark: color-mix(in srgb, var(--color-dark) 60%, black);
--shadow-light: color-mix(in srgb, var(--color-dark) 70%, white);
--shadow-outset: 0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
--shadow-inset: inset 0 1px 3px rgba(0,0,0,0.4);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--shadow-hover: 0 2px 8px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
}
/* ===========================================
2. RESET & BASE
=========================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
background: none;
font-family: inherit;
cursor: pointer;
color: inherit;
}
img, svg {
display: block;
max-width: 100%;
}
input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* Focus visible for keyboard accessibility */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ===========================================
3. TYPOGRAPHY
=========================================== */
.text-caption {
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
}
/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
/* ===========================================
4. NEUMORPHIC SURFACES
=========================================== */
.neu {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-outset);
}
.neu-sm {
background: var(--surface);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
.neu-inset {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-inset);
}
.neu-flat {
background: var(--surface);
border-radius: var(--radius);
}
/* ===========================================
5. BUTTONS
=========================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 18px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
border: none;
cursor: pointer;
font-family: inherit;
transition: var(--transition);
white-space: nowrap;
}
.btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* Neumorphic button (default) */
.btn-neu {
background: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-sm);
}
.btn-neu:hover {
box-shadow: var(--shadow-inset);
color: var(--color-primary);
}
/* Filled buttons (5 palette colors) */
.btn-primary {
background: var(--color-primary);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover { opacity: 0.9; box-shadow: var(--shadow-outset); color: #fff; }
.btn-secondary {
background: var(--color-secondary);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { opacity: 0.9; color: #fff; }
.btn-tertiary {
background: var(--surface);
color: var(--color-tertiary);
box-shadow: var(--shadow-sm);
}
.btn-tertiary:hover { box-shadow: var(--shadow-inset); }
.btn-highlight {
background: var(--color-highlight);
color: var(--color-secondary);
box-shadow: var(--shadow-sm);
}
.btn-highlight:hover { opacity: 0.9; color: var(--color-secondary); }
.btn-danger {
background: var(--danger);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-danger:hover { opacity: 0.9; color: #fff; }
/* Ghost */
.btn-ghost {
background: transparent;
color: var(--text-secondary);
box-shadow: none;
}
.btn-ghost:hover { color: var(--color-primary); background: var(--primary-light); }
/* Sizes */
.btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-xs { padding: 4px 10px; font-size: 0.72rem; }
.btn-xs svg { width: 11px; height: 11px; }
.btn-lg { padding: 10px 24px; font-size: 0.88rem; }
/* Icon-only button (self-contained — works without .btn) */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: var(--surface);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
border: none;
cursor: pointer;
transition: var(--transition);
}
.btn-icon svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-icon:hover { box-shadow: var(--shadow-inset); color: var(--color-primary); }
.btn-icon-sm { width: 30px; height: 30px; }
.btn-icon-sm svg { width: 15px; height: 15px; }
.btn:disabled, .btn[disabled] {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
/* ===========================================
6. BADGES & CHIPS
=========================================== */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
}
/* 5-color badge variants */
.badge-primary { background: var(--primary-light); color: var(--color-primary); }
.badge-secondary { background: var(--secondary-light); color: var(--color-secondary); }
.badge-tertiary { background: var(--tertiary-light); color: var(--color-tertiary); }
.badge-tint { background: var(--tint-light); color: var(--color-surface-tint); }
.badge-highlight { background: var(--highlight-light); color: var(--color-highlight); }
.badge-danger { background: rgba(217, 48, 37, 0.10); color: var(--danger); }
.badge-success { background: rgba(46, 160, 67, 0.10); color: var(--success); }
/* Chip (removable tag) */
.chip {
display: inline-flex;
align-items: center;
gap: 0;
background: var(--surface);
border-radius: var(--radius-full);
font-size: 0.78rem;
font-weight: 500;
white-space: nowrap;
box-shadow: var(--shadow-sm);
overflow: hidden;
animation: chip-in 0.25s var(--ease-out);
}
.chip.removing {
animation: chip-out 0.2s var(--ease-in) forwards;
}
.chip-meta {
padding: 5px 8px 5px 12px;
color: #fff;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.02em;
}
/* Chip meta colors mapped to 5-color system */
.chip-meta-primary { background: var(--color-primary); }
.chip-meta-secondary { background: var(--color-secondary); }
.chip-meta-tertiary { background: var(--color-tertiary); }
.chip-meta-tint { background: var(--color-surface-tint); }
.chip-meta-highlight { background: var(--color-highlight); color: var(--color-secondary); }
.chip-value {
padding: 5px 6px 5px 8px;
color: var(--text-primary);
}
.chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-inline-end: 4px;
border-radius: 50%;
font-size: 0.75rem;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.chip-remove:hover {
background: var(--danger);
color: #fff;
}
@keyframes chip-in {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes chip-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.7); }
}
/* ===========================================
7. FORM ELEMENTS
=========================================== */
.input {
width: 100%;
padding: 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font-size: 0.85rem;
color: var(--text-primary);
outline: none;
transition: var(--transition);
box-shadow: var(--shadow-inset);
}
.input:focus { border-color: var(--color-primary); }
.input::placeholder { color: var(--text-muted); }
.input-sm { padding: 5px 8px; font-size: 0.78rem; }
/* Select */
.select {
appearance: none;
width: 100%;
padding: 8px 28px 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font-size: 0.82rem;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-inset);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
[dir="rtl"] .select {
padding: 8px 12px 8px 28px;
background-position: left 8px center;
}
.select:focus { outline: none; border-color: var(--color-primary); }
/* Textarea */
.textarea {
width: 100%;
padding: 12px 16px;
background: transparent;
border: none;
font-size: 0.88rem;
line-height: 1.7;
color: var(--text-primary);
outline: none;
resize: none;
overflow: hidden;
tab-size: 2;
}
.textarea::placeholder { color: var(--text-muted); }
/* Toggle Switch */
.toggle {
position: relative;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--surface);
border-radius: var(--radius-full);
box-shadow: var(--shadow-inset);
transition: var(--transition);
cursor: pointer;
}
.toggle-slider::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--text-muted);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
transition: var(--transition);
}
.toggle input:checked + .toggle-slider::before {
transform: translateX(18px);
background: var(--color-primary);
}
/* Field label */
.field-label {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
/* ===========================================
8. CARDS & PANELS
=========================================== */
.card {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-outset);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.card-header svg {
width: 16px;
height: 16px;
color: var(--color-primary);
flex-shrink: 0;
}
.card-header h2,
.card-header h3 {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
}
.card-body {
padding: 12px 16px;
}
/* Collapsible panel */
.panel {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-outset);
overflow: hidden;
border-left: 3px solid transparent;
transition: border-color 0.3s ease;
}
[dir="rtl"] .panel { border-left: none; border-right: 3px solid transparent; }
.panel.expanded { border-left-color: var(--color-primary); }
[dir="rtl"] .panel.expanded { border-left-color: transparent; border-right-color: var(--color-primary); }
.panel-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 18px;
background: none;
border: none;
cursor: pointer;
transition: var(--transition);
}
.panel-toggle:hover { background: var(--primary-light); }
.panel-chevron {
width: 16px;
height: 16px;
color: var(--text-muted);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.panel.expanded .panel-chevron { transform: rotate(180deg); }
/* Panel body (collapsible via grid rows) */
.panel-body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
opacity: 1;
}
.panel.collapsed .panel-body {
grid-template-rows: 0fr;
opacity: 0;
}
.panel-body > * {
overflow: hidden;
}
/* ===========================================
9. ALERTS & TOASTS
=========================================== */
.alert {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 500;
border-left: 3px solid;
}
[dir="rtl"] .alert { border-left: none; border-right: 3px solid; }
.alert-success { background: rgba(46, 160, 67, 0.08); color: var(--success); border-color: var(--success); }
.alert-warning { background: rgba(210, 153, 34, 0.08); color: var(--warning); border-color: var(--warning); }
.alert-error { background: rgba(217, 48, 37, 0.08); color: var(--danger); border-color: var(--danger); }
.alert-info { background: var(--primary-light); color: var(--color-primary); border-color: var(--color-primary); }
/* Toast */
.toast-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 24px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-popup);
font-size: 0.82rem;
font-weight: 500;
color: #fff;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: auto;
}
.toast-message { flex: 1; }
.toast-close {
background: none;
border: none;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius-xs);
opacity: 0.7;
flex-shrink: 0;
}
.toast-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.toast.visible {
opacity: 1;
transform: translateY(0);
}
.toast-success { background: var(--color-primary); }
.toast-info { background: var(--color-secondary); }
.toast-warning { background: var(--color-highlight); }
.toast-error { background: var(--danger); }
/* ===========================================
10. TABLES
=========================================== */
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
}
.table thead th {
padding: 10px 14px;
text-align: left;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
[dir="rtl"] .table thead th { text-align: right; }
.table tbody tr {
transition: var(--transition);
}
.table tbody tr:hover {
background: var(--primary-light);
}
.table tbody td {
padding: 10px 14px;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* ===========================================
11. DROPDOWN MENUS
=========================================== */
.dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: var(--bg-elevated);
border-radius: var(--radius);
box-shadow: var(--shadow-outset);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: var(--transition);
z-index: 200;
}
[dir="rtl"] .dropdown { right: auto; left: 0; }
.dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-header {
padding: 14px 18px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.dropdown-divider {
height: 1px;
background: var(--border);
margin: 4px 14px;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-size: 0.88rem;
color: var(--text-secondary);
transition: var(--transition);
cursor: pointer;
}
.dropdown-item:hover {
color: var(--color-primary);
background: var(--primary-light);
}
.dropdown-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ===========================================
12. AVATAR
=========================================== */
.avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-primary);
box-shadow: var(--shadow-sm);
font-weight: 600;
color: var(--bg);
letter-spacing: 0.03em;
flex-shrink: 0;
}
.avatar-sm { width: 30px; height: 30px; font-size: 0.65rem; }
.avatar-md { width: 36px; height: 36px; font-size: 0.72rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.avatar-xl { width: 68px; height: 68px; font-size: 1.4rem; }
/* ===========================================
13. THEME PICKER SWATCH
=========================================== */
.palette-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition);
position: relative;
}
.palette-swatch:hover { transform: scale(1.15); }
.palette-swatch.active { border-color: var(--text-primary); }
.palette-swatch.active::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
border: 2px solid #fff;
}
.palette-swatches {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ===========================================
14. BREADCRUMB
=========================================== */
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--text-muted);
}
.breadcrumb-sep {
color: var(--text-muted);
margin: 0 4px;
}
.breadcrumb-link {
font-weight: 500;
color: var(--color-primary);
transition: var(--transition);
}
.breadcrumb-link:hover { opacity: 0.7; }
.breadcrumb-current {
font-weight: 500;
color: var(--text-secondary);
}
/* ===========================================
16. SHARED COMPONENTS
=========================================== */
/* Language toggle button (auth & setup pages) */
.lang-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-secondary, transparent);
color: var(--text-secondary);
font-size: 0.78rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.lang-toggle-btn:hover {
border-color: var(--color-primary);
color: var(--text-primary);
}
/* Workflow labels (document edit & page views) */
.workflow-waiting-label {
font-size: 0.82rem;
color: var(--text-secondary);
font-style: italic;
}
.workflow-progress-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-inline-end: 4px;
}
/* Option row (admin & setup option editors) */
.option-row {
display: flex;
align-items: center;
gap: 6px;
}
.option-row .input {
flex: 1;
}
/* ===========================================
17. UTILITIES
=========================================== */
.hidden { display: none !important; }
.no-transition { transition: none !important; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--shadow-dark); border-radius: 3px; }
/* Selection */
::selection {
background: var(--primary-light);
color: var(--color-primary);
}
/* --- Translate icon & popup (shared across all pages) --- */
.translate-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
opacity: 0.5;
transition: opacity 0.2s;
color: var(--text-secondary);
}
.translate-btn:hover { opacity: 1; }
.translate-btn svg { width: 14px; height: 14px; }
.translate-btn.translate-complete { color: var(--text-primary); opacity: 0.7; }
.translate-btn.translate-incomplete { color: var(--danger); opacity: 0.7; }
.translate-popup {
position: absolute;
z-index: 1000;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-hover);
padding: 8px;
min-width: 240px;
max-width: 360px;
}
.translate-popup-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.translate-popup-row:last-child { margin-bottom: 0; }
.translate-popup-lang {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
min-width: 24px;
text-transform: uppercase;
}
.translate-popup-row .input {
flex: 1;
}
/* ===========================================
17. RESPONSIVE BREAKPOINTS (reference)
=========================================== */
/*
Mobile: max-width: 480px
Tablet: max-width: 768px
Desktop-sm: max-width: 900px
Desktop: max-width: 1200px
*/