/* ══════════════════════════════════════════════════════════════
Piranha Base CSS — single source of truth
Font, colors, themes. Nothing else.
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Roboto:wght@300;400;500;600;700&display=swap');
/* ── Dark Theme (default) ─────────────────────────────────── */
:root {
/* Text */
--text: #5a5a7a;
--heading: #e8e8e8;
/* Core palette */
--abyss: #151521;
--deep: #0a0a16;
--trench: #0f0f1e;
--filter-bar-bg: #0f0f1e;
--cavern: #161628;
--shadow: #1e1e38;
--slate: #1e1e36;
--steel: #3a3a5c;
--muted: #5a5a7a;
--bright: #ededf4;
--white: #f8fafc;
/* Accent */
--ember: #f59e0b;
--flame: #f97316;
--blaze: #fb923c;
--glow: rgba(249, 115, 22, 0.15);
--glow-strong: rgba(249, 115, 22, 0.35);
/* Bug Tracker */
--bt-accent: #6e0000;
--bt-accent-hover: #8a1a1a;
/* Semantic colors */
--success: #22c55e;
--danger: #ef4444;
--error: #ef4444;
--info: #3b82f6;
/* Borders */
--border: rgba(90, 90, 122, 0.14);
--border-light: rgba(90, 90, 122, 0.09);
--border-mid: rgba(90, 90, 122, 0.16);
--border-strong: rgba(90, 90, 122, 0.22);
--border-heavy: rgba(90, 90, 122, 0.28);
--border-max: rgba(90, 90, 122, 0.36);
--border-hover: rgba(90, 90, 122, 0.3);
/* Surfaces */
--surface-card: linear-gradient(165deg, rgba(22, 22, 40, 0.6) 0%, rgba(15, 15, 30, 0.4) 100%);
--surface-raised: rgba(10, 10, 22, 0.4);
--surface-header: rgba(10, 10, 22, 0.6);
--surface-thead: rgba(15, 15, 30, 0.5);
--surface-overlay: rgba(6, 6, 14, 0.7);
--modal-bg: #10102a;
--bento-bg: #22190c3b;
/* Interactive */
--hover-subtle: rgba(90, 90, 122, 0.06);
--hover-muted: rgba(90, 90, 122, 0.08);
--hover-ember: rgba(249, 115, 22, 0.06);
--active-ember: rgba(249, 115, 22, 0.08);
--badge-muted: rgba(90, 90, 122, 0.12);
--badge-ember: rgba(249, 115, 22, 0.12);
--scroll-thumb: rgba(90, 90, 122, 0.2);
--scroll-hover: rgba(90, 90, 122, 0.35);
--toggle-track: rgba(90, 90, 122, 0.2);
--input-placeholder: rgba(90, 90, 122, 0.5);
--shadow-card: rgba(0, 0, 0, 0.2);
--spinner-track: rgba(90, 90, 122, 0.15);
/* Accent backgrounds */
--bg-ember-subtle: rgba(249, 115, 22, 0.1);
--bg-ember-mid: rgba(249, 115, 22, 0.15);
--bg-ember-glow: rgba(249, 115, 22, 0.25);
--bg-green-subtle: rgba(52, 211, 153, 0.1);
--bg-green-mid: rgba(52, 211, 153, 0.12);
--bg-green-glow: rgba(52, 211, 153, 0.08);
--bg-indigo-subtle: rgba(129, 140, 248, 0.1);
--bg-sky-subtle: rgba(56, 189, 248, 0.1);
--bg-purple-subtle: rgba(124, 77, 255, 0.1);
--bg-red-subtle: rgba(239, 68, 68, 0.06);
--bg-red-border: rgba(239, 68, 68, 0.3);
--bg-pink-subtle: rgba(236, 72, 153, 0.12);
--bg-teal-subtle: rgba(45, 212, 191, 0.12);
--bg-yellow-subtle: rgba(234, 179, 8, 0.12);
/* Toast */
--toast-success-bg: rgba(34, 197, 94, 0.18);
--toast-success-border: rgba(34, 197, 94, 0.35);
--toast-success-text: #4ade80;
--toast-error-bg: rgba(239, 68, 68, 0.18);
--toast-error-border: rgba(239, 68, 68, 0.35);
--toast-error-text: #f87171;
--toast-info-bg: rgba(59, 130, 246, 0.18);
--toast-info-border: rgba(59, 130, 246, 0.35);
--toast-info-text: #60a5fa;
--toast-shadow: rgba(0, 0, 0, 0.4);
/* Karma Toasts */
--kt-badge-bg: rgba(245, 158, 11, 0.12);
--kt-badge-border: rgba(245, 158, 11, 0.4);
--kt-badge-glow: rgba(245, 158, 11, 0.2);
--kt-badge-title: #fbbf24;
--kt-badge-text: #fcd34d;
--kt-gifted-bg: rgba(236, 72, 153, 0.12);
--kt-gifted-border: rgba(236, 72, 153, 0.4);
--kt-gifted-title: #f472b6;
--kt-tier-bg: rgba(249, 115, 22, 0.1);
--kt-tier-border: rgba(249, 115, 22, 0.45);
--kt-tier-glow: rgba(249, 115, 22, 0.25);
--kt-tier-title: #fb923c;
--kt-tier-text: #fdba74;
--kt-social-bg: rgba(148, 163, 184, 0.1);
--kt-social-border: rgba(148, 163, 184, 0.2);
--kt-social-text: #94a3b8;
--kt-social-name: #cbd5e1;
--kt-milestone-bg: rgba(245, 158, 11, 0.08);
--kt-milestone-border: rgba(245, 158, 11, 0.25);
--kt-milestone-text: #f59e0b;
--kt-close-color: rgba(148, 163, 184, 0.5);
--kt-close-hover: rgba(148, 163, 184, 0.9);
--kt-confetti-a: #f59e0b;
--kt-confetti-b: #f97316;
--kt-confetti-c: #fbbf24;
--kt-era-scribbles: linear-gradient(135deg, #6b7280, #9ca3af);
--kt-era-watercolor: linear-gradient(135deg, #3b82f6, #60a5fa);
--kt-era-comic: linear-gradient(135deg, #ef4444, #f87171);
--kt-era-oil_painting: linear-gradient(135deg, #d97706, #f59e0b);
--kt-era-hyper_3d: linear-gradient(135deg, #06b6d4, #22d3ee);
--kt-era-epic_fantasy: linear-gradient(135deg, #7c3aed, #a78bfa);
/* Sidebar */
--sidebar-glow: rgba(249, 115, 22, 0.1);
/* Typography — Font Families (ONLY these two, no others) */
--font-sans: 'Roboto', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Typography — Type Scale (canonical sizes, use ONLY these) */
--fs-xs: 0.75rem; /* 12px — captions, labels, meta info, timestamps (only small text token) */
--fs-base: 1rem; /* 16px — body text, tab labels, card titles */
--fs-lg: 1.125rem; /* 18px — section headings, widget titles */
--fs-xl: 1.5rem; /* 24px — hero numbers (BTC, credits) */
--fs-2xl: 2rem; /* 32px — display numbers (KP total) */
--fs-3xl: 2.25rem; /* 36px — clock time display */
/* Layout */
--sidebar-w: 240px;
--sidebar-collapsed: 72px;
--header-h: 64px;
/* Dealer Status Colors */
--status-new: #4ade80;
--status-new-bg: rgba(34, 197, 94, 0.15);
--status-initial: #9ca3af;
--status-initial-bg: rgba(107, 114, 128, 0.12);
--status-in_hubspot: #f59e0b;
--status-in_hubspot-bg: rgba(245, 158, 11, 0.15);
--status-outdated: #f87171;
--status-outdated-bg: rgba(239, 68, 68, 0.15);
--status-deleted: #6b7280;
--status-deleted-bg: rgba(0, 0, 0, 0.25);
--status-disqualified: #9ca3af;
--status-disqualified-bg: rgba(107, 114, 128, 0.15);
--status-reviewed: #60a5fa;
--status-reviewed-bg: rgba(96, 165, 250, 0.15);
--status-needs_research: #fbbf24;
--status-needs_research-bg: rgba(250, 204, 21, 0.15);
/* Aliases (used in various files) */
--bg: var(--abyss);
--text-secondary: var(--muted);
--radius: 8px;
--radius-lg: 12px;
--accent: var(--ember);
--bg-primary: var(--bg-ember-subtle);
--bg-secondary: var(--badge-muted);
/* Avatar — unified border color for all profile pictures (RND-230) */
--avatar-border-color: #262633;
}
/* ── Light Theme ──────────────────────────────────────────── */
html[data-theme="light"] {
--text: #828282;
--heading: #1a1a1a;
--abyss: #f5f5f7;
--deep: #efefef;
--trench: #e8e8ec;
--filter-bar-bg: #e8e8ec;
--cavern: #dddde4;
--shadow: #d0d0d8;
--slate: #d0d0dc;
--steel: #9898a8;
--muted: #8888a0;
--bright: #1a1a2e;
--white: #06060e;
--ember: #e8870a;
--flame: #e06b10;
--blaze: #d35d15;
--glow: rgba(232, 135, 10, 0.2);
--glow-strong: rgba(232, 135, 10, 0.4);
--bt-accent: #6e0000;
--bt-accent-hover: #8a1a1a;
--success: #16a34a;
--danger: #dc2626;
--error: #dc2626;
--info: #2563eb;
--border: rgba(0, 0, 0, 0.1);
--border-light: rgba(0, 0, 0, 0.06);
--border-mid: rgba(0, 0, 0, 0.13);
--border-strong: rgba(0, 0, 0, 0.16);
--border-heavy: rgba(0, 0, 0, 0.2);
--border-max: rgba(0, 0, 0, 0.26);
--border-hover: rgba(0, 0, 0, 0.22);
--surface-card: linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 248, 252, 0.7) 100%);
--surface-raised: rgba(255, 255, 255, 0.6);
--surface-header: rgba(245, 245, 247, 0.85);
--surface-thead: rgba(240, 240, 245, 0.8);
--surface-overlay: rgba(0, 0, 0, 0.3);
--modal-bg: #ffffff;
--bento-bg: #ffffff;
--hover-subtle: rgba(0, 0, 0, 0.03);
--hover-muted: rgba(0, 0, 0, 0.05);
--hover-ember: rgba(232, 135, 10, 0.06);
--active-ember: rgba(232, 135, 10, 0.1);
--badge-muted: rgba(0, 0, 0, 0.06);
--badge-ember: rgba(232, 135, 10, 0.12);
--scroll-thumb: rgba(0, 0, 0, 0.15);
--scroll-hover: rgba(0, 0, 0, 0.25);
--toggle-track: rgba(0, 0, 0, 0.12);
--input-placeholder: rgba(0, 0, 0, 0.3);
--shadow-card: rgba(0, 0, 0, 0.06);
--spinner-track: rgba(0, 0, 0, 0.1);
--bg-ember-subtle: rgba(232, 135, 10, 0.1);
--bg-ember-mid: rgba(232, 135, 10, 0.15);
--bg-ember-glow: rgba(232, 135, 10, 0.2);
--bg-green-subtle: rgba(16, 185, 129, 0.1);
--bg-green-mid: rgba(16, 185, 129, 0.12);
--bg-green-glow: rgba(16, 185, 129, 0.08);
--bg-indigo-subtle: rgba(99, 102, 241, 0.1);
--bg-sky-subtle: rgba(14, 165, 233, 0.1);
--bg-purple-subtle: rgba(109, 40, 217, 0.1);
--bg-red-subtle: rgba(220, 38, 38, 0.06);
--bg-red-border: rgba(220, 38, 38, 0.25);
--bg-pink-subtle: rgba(236, 72, 153, 0.1);
--bg-teal-subtle: rgba(45, 212, 191, 0.1);
--bg-yellow-subtle: rgba(234, 179, 8, 0.1);
--toast-success-bg: rgba(22, 163, 74, 0.12);
--toast-success-border: rgba(22, 163, 74, 0.3);
--toast-success-text: #15803d;
--toast-error-bg: rgba(220, 38, 38, 0.1);
--toast-error-border: rgba(220, 38, 38, 0.25);
--toast-error-text: #dc2626;
--toast-info-bg: rgba(37, 99, 235, 0.1);
--toast-info-border: rgba(37, 99, 235, 0.25);
--toast-info-text: #2563eb;
--toast-shadow: rgba(0, 0, 0, 0.1);
/* Karma Toasts — Light */
--kt-badge-bg: rgba(217, 119, 6, 0.1);
--kt-badge-border: rgba(217, 119, 6, 0.35);
--kt-badge-glow: rgba(217, 119, 6, 0.12);
--kt-badge-title: #b45309;
--kt-badge-text: #92400e;
--kt-gifted-bg: rgba(219, 39, 119, 0.08);
--kt-gifted-border: rgba(219, 39, 119, 0.3);
--kt-gifted-title: #be185d;
--kt-tier-bg: rgba(234, 88, 12, 0.08);
--kt-tier-border: rgba(234, 88, 12, 0.35);
--kt-tier-glow: rgba(234, 88, 12, 0.15);
--kt-tier-title: #c2410c;
--kt-tier-text: #9a3412;
--kt-social-bg: rgba(100, 116, 139, 0.08);
--kt-social-border: rgba(100, 116, 139, 0.2);
--kt-social-text: #64748b;
--kt-social-name: #334155;
--kt-milestone-bg: rgba(217, 119, 6, 0.08);
--kt-milestone-border: rgba(217, 119, 6, 0.25);
--kt-milestone-text: #b45309;
--kt-close-color: rgba(100, 116, 139, 0.4);
--kt-close-hover: rgba(100, 116, 139, 0.8);
--kt-confetti-a: #d97706;
--kt-confetti-b: #ea580c;
--kt-confetti-c: #f59e0b;
--kt-era-scribbles: linear-gradient(135deg, #9ca3af, #6b7280);
--kt-era-watercolor: linear-gradient(135deg, #2563eb, #3b82f6);
--kt-era-comic: linear-gradient(135deg, #dc2626, #ef4444);
--kt-era-oil_painting: linear-gradient(135deg, #b45309, #d97706);
--kt-era-hyper_3d: linear-gradient(135deg, #0891b2, #06b6d4);
--kt-era-epic_fantasy: linear-gradient(135deg, #6d28d9, #7c3aed);
--sidebar-glow: rgba(232, 135, 10, 0.08);
/* Dealer Status Colors */
--status-new: #16a34a;
--status-new-bg: rgba(34, 197, 94, 0.12);
--status-initial: #6b7280;
--status-initial-bg: rgba(107, 114, 128, 0.1);
--status-in_hubspot: #d97706;
--status-in_hubspot-bg: rgba(245, 158, 11, 0.12);
--status-outdated: #dc2626;
--status-outdated-bg: rgba(239, 68, 68, 0.1);
--status-deleted: #9ca3af;
--status-deleted-bg: rgba(0, 0, 0, 0.08);
--status-disqualified: #6b7280;
--status-disqualified-bg: rgba(107, 114, 128, 0.1);
--status-reviewed: #2563eb;
--status-reviewed-bg: rgba(96, 165, 250, 0.1);
--status-needs_research: #a16207;
--status-needs_research-bg: rgba(234, 179, 8, 0.12);
/* Avatar — unified border color for all profile pictures (RND-230) */
--avatar-border-color: #c8c8d6;
}
/* ── Base Elements ────────────────────────────────────────── */
html {
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
color: var(--text);
line-height: 1.45;
background: var(--abyss);
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
h1, h2, h3, h4 { color: var(--heading); }
h1 { margin-bottom: 30px; }
h2 { font-size: 30px; margin-bottom: 30px; }
h3 { margin-bottom: 20px; }
h4 { font-size: 18px; margin-bottom: 16px; color: #e8e8e8; }
.logo-font-l {
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.15em;
background: linear-gradient(135deg, var(--bright) 0%, var(--muted) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.logo-font-s {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted);
}
.micro-font {
font-size: 11px;
color: var(--steel);
letter-spacing: 0.05em;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
color: inherit;
}
/* ── Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid var(--border);
background: none;
color: var(--text);
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
text-decoration: none;
}
.btn:hover:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.03);
}
.btn:active:not(:disabled) {
transform: scale(0.95);
transition: transform 0.08s ease;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(0.6);
}
.btn svg {
width: 16px;
height: 16px;
}
/* Primary — orange gradient, white text */
.btn-primary {
background: linear-gradient(135deg, var(--ember), var(--flame));
border-color: transparent;
color: #fff;
font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
filter: brightness(1.15);
transform: scale(1.04);
}
.btn-primary:active:not(:disabled) {
filter: brightness(0.9);
transform: scale(0.95);
transition: all 0.08s ease;
}
/* Secondary — subtle orange bg, ember text */
.btn-secondary {
background: rgba(245, 158, 11, 0.1);
color: var(--ember);
border-color: rgba(245, 158, 11, 0.2);
}
.btn-secondary:hover:not(:disabled) {
background: rgba(245, 158, 11, 0.22);
border-color: rgba(245, 158, 11, 0.45);
color: var(--blaze);
transform: scale(1.04);
}
.btn-secondary:active:not(:disabled) {
background: rgba(245, 158, 11, 0.3);
transform: scale(0.95);
transition: all 0.08s ease;
}
/* Ghost — transparent, visible text (clearly distinct from disabled) */
.btn-ghost {
background: none;
color: #8888a4;
border-color: var(--border-mid);
}
.btn-ghost:hover:not(:disabled) {
color: var(--heading);
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.05);
}
/* Danger — red bg, red text */
.btn-danger {
background: rgba(239, 68, 68, 0.12);
color: var(--danger);
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
transform: scale(1.04);
}
.btn-danger:active:not(:disabled) {
background: rgba(239, 68, 68, 0.35);
transform: scale(0.95);
transition: all 0.08s ease;
}
/* Small modifier */
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: var(--fs-xs);
border-radius: 6px;
}
/* Very small modifier */
.btn-xs {
padding: 0.15rem 0.35rem;
font-size: 10px;
gap: 0.25rem;
border-radius: 5px;
}
.btn-xs svg {
width: 11px;
height: 11px;
}
/* Super small modifier — compact inline use (drawers, pills, tight spaces) */
.btn-xxs {
padding: 2px 6px;
font-size: 9px;
gap: 3px;
border-radius: 4px;
}
.btn-xxs svg {
width: 9px;
height: 9px;
}
/* Icon-only button */
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border-hover);
background: none;
color: var(--heading);
cursor: pointer;
transition: all 0.2s;
}
.btn-icon:hover {
border-color: rgba(249, 115, 22, 0.4);
background: rgba(249, 115, 22, 0.08);
color: var(--ember);
}
.btn-icon:active {
transform: scale(0.88);
transition: transform 0.08s ease;
}
.btn-icon:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.btn-icon svg {
width: 16px;
height: 16px;
}
.btn-icon.spinning svg {
animation: spin 1s linear infinite;
}
/* Small icon button modifier */
.btn-icon-sm {
width: 24px;
height: 24px;
border-radius: 5px;
}
.btn-icon-sm svg { width: 13px; height: 13px; }
/* Danger variant — red hover for delete actions */
.btn-icon-danger:hover {
background: var(--bg-red-subtle);
color: var(--danger);
border-color: var(--danger);
}
/* ── Button Light Theme Overrides ────────────────────────── */
html[data-theme="light"] .btn-ghost {
color: #555570;
}
html[data-theme="light"] .btn-ghost:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .btn:hover:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
background: rgba(0, 0, 0, 0.03);
}
/* ── Utilities ───────────────────────────────────────────── */
.hidden { display: none; }
.text-bright { color: var(--bright); }
/* Bright bold — bold variant of .text-bright (RND-285) */
.text-bright-bold { color: var(--bright); font-weight: 700; }
/* Bright caps label — uppercase + bold version of .text-bright (RND-246) */
.text-bright-caps { color: var(--bright); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
/* ── Header ──────────────────────────────────────────────── */
.header {
background: var(--deep);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 0 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
flex-shrink: 0;
z-index: 100;
margin-bottom: 0;
}
.header-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.header h1,
.header h2 {
font-weight: 700;
letter-spacing: 0;
margin: 0;
}
.app-title {
font-size: 25px;
font-weight: 700;
letter-spacing: 0;
margin: 0;
color: var(--heading);
}
.header-logo {
height: 32px;
width: auto;
filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.15));
}
.back-link {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid var(--muted);
color: var(--heading);
text-decoration: none;
transition: all 0.2s ease;
}
.back-link:hover {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.06);
}
.back-link svg { width: 18px; height: 18px; }
/* ── Main Layout ─────────────────────────────────────────── */
.main-container {
display: flex;
flex: 1;
min-height: 0;
}
.content-wrapper {
flex: 1;
min-width: 0;
overflow-y: auto;
min-height: 0;
padding: 1.5rem;
}
.content-area {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 1.5rem;
}
/* When content-area is inside content-wrapper, don't double-pad */
.content-wrapper .content-area {
padding: 0;
}
.view { display: none; }
.view.active { display: block; }
/* ── Utility classes ─────────────────────────────────────── */
.text-right { text-align: right; }
.text-center { text-align: center; }
/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: #000000b3;
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.active,
.modal-overlay.open { display: flex; }
.modal {
background: var(--modal-bg);
border: 1px solid var(--border);
border-radius: 14px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.modal-sm { max-width: 480px; }
.modal-md { max-width: 550px; }
.modal-lg { max-width: 700px; }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.modal-header h2,
.modal-header h3 {
font-weight: 600;
}
/* Modal close inherits .btn-icon base (30x30, border, heading color).
Override: red hover instead of ember, muted default color. */
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border-hover);
background: none;
color: var(--heading);
cursor: pointer;
transition: all 0.2s;
}
.modal-close:hover {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
}
.modal-close svg { width: 16px; height: 16px; }
.modal-body { padding: 1.5rem; }
.modal-body p {
line-height: 1.5;
}
.modal-body input:not(.form-input) {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-hover);
border-radius: 10px;
outline: none;
background: var(--deep);
}
.modal-body input:not(.form-input)::placeholder { opacity: 0.6; }
.modal-body input:not(.form-input):focus {
border-color: rgba(249, 115, 22, 0.4);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
/* Ensure .form-input inside modals gets full width */
.modal-body .form-input {
width: 100%;
}
.modal-body .form-group:last-child { margin-bottom: 0; }
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
}
#permissionsModal .modal-footer {
position: sticky;
bottom: 0;
background: var(--modal-bg);
z-index: 1;
}
/* Modal detail rows */
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.detail-value {
text-align: right;
}
/* ── Toast ────────────────────────────────────────────────── */
.toast-container {
position: fixed;
top: 1.25rem;
right: 1.25rem;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.toast {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 8px 32px var(--toast-shadow);
animation: toastIn 0.3s ease;
min-width: 250px;
max-width: 420px;
backdrop-filter: blur(12px);
}
.toast.success { background: var(--toast-success-bg); border: 1px solid var(--toast-success-border); color: var(--toast-success-text); }
.toast.error { background: var(--toast-error-bg); border: 1px solid var(--toast-error-border); color: var(--toast-error-text); }
.toast.info { background: var(--toast-info-bg); border: 1px solid var(--toast-info-border); color: var(--toast-info-text); }
/* Theme switch toasts — fully opaque, no transparency */
.toast.theme-dark { background: #ffffff; border: none; color: #000000; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
.toast.theme-light { background: #1a1a1a; border: none; color: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }
.toast.theme-dark svg,
.toast.theme-light svg { width: 20px; height: 20px; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
/* Close button for standard + theme toasts */
.toast-close {
flex-shrink: 0;
margin-left: auto;
width: 20px;
height: 20px;
border: none;
background: none;
color: currentColor;
opacity: 0.4;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0;
transition: opacity 0.2s, background 0.2s;
}
.toast-close:hover {
opacity: 1;
background: rgba(148, 163, 184, 0.15);
}
.toast .toast-close svg {
width: 12px;
height: 12px;
}
/* ── Karma Toasts — Achievement Notifications ────────────── */
/* Base karma toast — wider, richer than standard toasts */
.karma-toast {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem 1.125rem;
border-radius: 12px;
min-width: 320px;
max-width: 500px;
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
animation: karmaToastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
/* Subtle noise texture overlay for depth */
.karma-toast::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 128px 128px;
pointer-events: none;
z-index: 0;
}
.karma-toast > * { position: relative; z-index: 1; }
/* Image containers */
.karma-toast-image {
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.karma-toast-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Text content block */
.karma-toast-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
padding-top: 0.1rem;
}
.karma-toast-title {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
text-transform: uppercase;
}
.karma-toast-subtitle {
font-size: 0.78rem;
font-weight: 400;
line-height: 1.35;
opacity: 0.85;
}
.karma-toast-meta {
font-size: 0.7rem;
font-weight: 500;
opacity: 0.6;
margin-top: 0.15rem;
}
/* Close button for persistent toasts */
.karma-toast-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 22px;
height: 22px;
border: none;
background: none;
color: var(--kt-close-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0;
transition: color 0.2s, background 0.2s;
z-index: 2;
}
.karma-toast-close:hover {
color: var(--kt-close-hover);
background: rgba(148, 163, 184, 0.1);
}
.karma-toast-close svg {
width: 14px;
height: 14px;
}
/* Persistent modifier — pulse glow */
.karma-toast-persistent {
animation: karmaToastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1),
karmaGlowPulse 3s ease-in-out 0.5s infinite;
cursor: pointer;
}
/* ── Type: Badge Earned (own) ──────────────────────────── */
.karma-toast-badge {
background: var(--kt-badge-bg);
border: 1px solid var(--kt-badge-border);
box-shadow:
0 0 20px var(--kt-badge-glow),
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(251, 191, 36, 0.1);
}
.karma-toast-badge .karma-toast-title { color: var(--kt-badge-title); }
.karma-toast-badge .karma-toast-subtitle { color: var(--kt-badge-text); }
.karma-toast-badge .karma-toast-image {
width: 64px;
height: 64px;
border: 2px solid rgba(245, 158, 11, 0.35);
box-shadow: 0 0 16px rgba(245, 158, 11, 0.15), 0 2px 12px rgba(0, 0, 0, 0.3);
}
/* ── Type: Badge Gifted (own, stub) ────────────────────── */
.karma-toast-gifted {
background: var(--kt-gifted-bg);
border: 1px solid var(--kt-gifted-border);
box-shadow:
0 0 18px rgba(236, 72, 153, 0.15),
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(244, 114, 182, 0.08);
}
.karma-toast-gifted .karma-toast-title { color: var(--kt-gifted-title); }
.karma-toast-gifted .karma-toast-subtitle { color: #f9a8d4; }
.karma-toast-gifted .karma-toast-image {
width: 64px;
height: 64px;
border: 2px solid rgba(236, 72, 153, 0.35);
}
/* Gift ribbon accent — diagonal stripe on image */
.karma-toast-gifted .karma-toast-image::after {
content: '🎁';
position: absolute;
bottom: -2px;
right: -2px;
font-size: 16px;
line-height: 1;
z-index: 3;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* ── Type: Level Up (own) — EPIC ────────────────────────── */
.karma-toast-tier {
background: var(--kt-tier-bg);
border: 2px solid var(--kt-tier-border);
padding: 1.125rem 1.25rem;
box-shadow:
0 0 30px var(--kt-tier-glow),
0 12px 40px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(251, 146, 60, 0.1);
}
.karma-toast-tier .karma-toast-title {
color: var(--kt-tier-title);
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.karma-toast-tier .karma-toast-subtitle {
color: var(--kt-tier-text);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
}
.karma-toast-tier .karma-toast-meta {
color: var(--kt-tier-text);
opacity: 0.7;
}
.karma-toast-tier .karma-toast-image {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid rgba(249, 115, 22, 0.4);
box-shadow: 0 0 20px var(--kt-tier-glow), 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* Level number fallback when image is NULL */
.karma-toast-tier-fallback {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
flex-shrink: 0;
box-shadow: 0 0 20px var(--kt-tier-glow), 0 4px 16px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
}
/* Era gradients for fallback circles */
.karma-toast-era-scribbles { background: var(--kt-era-scribbles); }
.karma-toast-era-watercolor { background: var(--kt-era-watercolor); }
.karma-toast-era-comic { background: var(--kt-era-comic); }
.karma-toast-era-oil_painting { background: var(--kt-era-oil_painting); }
.karma-toast-era-hyper_3d { background: var(--kt-era-hyper_3d); }
.karma-toast-era-epic_fantasy { background: var(--kt-era-epic_fantasy); }
/* ── Type: Social Badge (other user) — compact ─────────── */
.karma-toast-social {
background: var(--kt-social-bg);
border: 1px solid var(--kt-social-border);
padding: 0.75rem 1rem;
min-width: 280px;
max-width: 420px;
gap: 0.65rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.karma-toast-social .karma-toast-title {
color: var(--kt-social-name);
font-size: 0.75rem;
text-transform: none;
letter-spacing: 0;
}
.karma-toast-social .karma-toast-subtitle {
color: var(--kt-social-text);
font-size: 0.72rem;
}
.karma-toast-social .karma-toast-image {
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid var(--kt-social-border);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
/* Social avatar — circle, same height as badge/level images */
.karma-toast-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
border: 1.5px solid var(--kt-social-border);
}
.karma-toast-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Social level variant — round image + fallback orb */
.karma-toast-social-tier .karma-toast-image {
border-radius: 50%;
}
.karma-toast-social-tier .karma-toast-tier-fallback {
width: 40px;
height: 40px;
font-size: 1.1rem;
font-weight: 800;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-width: 1.5px;
}
/* ── Type: KP Milestone — minimal ──────────────────────── */
.karma-toast-milestone {
background: var(--kt-milestone-bg);
border: 1px solid var(--kt-milestone-border);
padding: 0.65rem 1rem;
min-width: 200px;
max-width: 340px;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.karma-toast-milestone .karma-toast-title {
color: var(--kt-milestone-text);
font-size: 0.78rem;
text-transform: none;
letter-spacing: 0;
}
.karma-toast-milestone .karma-toast-subtitle {
color: var(--kt-milestone-text);
font-size: 0.72rem;
opacity: 0.7;
}
.karma-toast-milestone .karma-symbol {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ── Type: KP Earned — auto-dismiss, compact ─────────── */
.karma-toast-kp {
background: var(--kt-milestone-bg);
border: 1px solid var(--kt-milestone-border);
padding: 0.5rem 0.85rem;
min-width: 120px;
max-width: 260px;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.karma-toast-kp .karma-toast-kp-display {
display: flex;
align-items: center;
gap: 0.25rem;
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.1rem;
color: var(--ember);
white-space: nowrap;
}
.karma-toast-kp .karma-toast-kp-display .karma-symbol {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.karma-toast-kp .karma-toast-avatar {
width: 24px;
height: 24px;
border-width: 1px;
}
/* ── Confetti — CSS-only ember sparks ──────────────────── */
.karma-toast-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
z-index: 0;
}
.karma-toast-confetti span {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
opacity: 0;
animation: emberSpark 1s ease-out forwards;
}
.karma-toast-confetti span:nth-child(1) { left: 10%; top: 50%; background: var(--kt-confetti-a); animation-delay: 0.05s; }
.karma-toast-confetti span:nth-child(2) { left: 25%; top: 30%; background: var(--kt-confetti-b); animation-delay: 0.1s; width: 4px; height: 4px; }
.karma-toast-confetti span:nth-child(3) { left: 40%; top: 60%; background: var(--kt-confetti-c); animation-delay: 0.15s; }
.karma-toast-confetti span:nth-child(4) { left: 55%; top: 20%; background: var(--kt-confetti-a); animation-delay: 0.08s; width: 3px; height: 3px; }
.karma-toast-confetti span:nth-child(5) { left: 70%; top: 45%; background: var(--kt-confetti-b); animation-delay: 0.2s; }
.karma-toast-confetti span:nth-child(6) { left: 85%; top: 35%; background: var(--kt-confetti-c); animation-delay: 0.12s; width: 4px; height: 4px; }
.karma-toast-confetti span:nth-child(7) { left: 15%; top: 70%; background: var(--kt-confetti-b); animation-delay: 0.18s; width: 3px; height: 3px; }
.karma-toast-confetti span:nth-child(8) { left: 60%; top: 75%; background: var(--kt-confetti-a); animation-delay: 0.22s; }
.karma-toast-confetti span:nth-child(9) { left: 35%; top: 15%; background: var(--kt-confetti-c); animation-delay: 0.07s; width: 4px; height: 4px; }
.karma-toast-confetti span:nth-child(10) { left: 80%; top: 65%; background: var(--kt-confetti-b); animation-delay: 0.16s; width: 3px; height: 3px; }
.karma-toast-confetti span:nth-child(11) { left: 48%; top: 40%; background: var(--kt-confetti-a); animation-delay: 0.25s; }
.karma-toast-confetti span:nth-child(12) { left: 92%; top: 50%; background: var(--kt-confetti-c); animation-delay: 0.13s; width: 4px; height: 4px; }
/* Removing state */
.karma-toast.removing {
animation: karmaToastOut 0.35s ease forwards;
}
/* ── Karma Toast Keyframes ─────────────────────────────── */
@keyframes karmaToastIn {
0% { opacity: 0; transform: translateX(60px) scale(0.92); }
60% { opacity: 1; transform: translateX(-4px) scale(1.01); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes karmaToastOut {
0% { opacity: 1; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(50px) scale(0.95); }
}
@keyframes karmaGlowPulse {
0%, 100% { box-shadow: 0 0 20px var(--kt-badge-glow), 0 8px 32px rgba(0, 0, 0, 0.3); }
50% { box-shadow: 0 0 30px var(--kt-badge-glow), 0 0 50px rgba(245, 158, 11, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3); }
}
@keyframes emberSpark {
0% { opacity: 0; transform: scale(0) translateY(0); }
20% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
}
/* ── Karma Toast Responsive ────────────────────────────── */
@media (max-width: 480px) {
.karma-toast {
min-width: 0;
max-width: 100%;
margin: 0 0.5rem;
}
.karma-toast-badge .karma-toast-image,
.karma-toast-gifted .karma-toast-image {
width: 48px;
height: 48px;
}
.karma-toast-tier .karma-toast-image,
.karma-toast-tier-fallback {
width: 48px;
height: 48px;
font-size: 1.1rem;
}
.karma-toast-social {
min-width: 0;
max-width: 100%;
}
.karma-toast-milestone {
min-width: 0;
max-width: 100%;
}
}
/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-top-color: var(--ember);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--ember);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(6, 6, 14, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
}
.loading-overlay.active { display: flex; }
.loading-overlay .spinner {
width: 32px;
height: 32px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Forms ────────────────────────────────────────────────── */
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
background-color: var(--trench);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.75rem;
outline: none;
transition: border-color 0.2s;
color: inherit;
font: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: rgba(245, 158, 11, 0.4);
}
.form-input {
padding: 10px 12px;
background-color: var(--trench);
border: 1px solid var(--border);
border-radius: 8px;
transition: border-color 0.2s;
color: inherit;
font: inherit;
}
.form-input:focus {
outline: none;
border-color: var(--ember);
}
textarea.form-input {
min-height: 200px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-row .form-group { flex: 1; }
.form-hint { }
/* ── Checkboxes (table) ──────────────────────────────────── */
table input[type="checkbox"],
.data-table input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--slate);
border-radius: 4px;
background: var(--trench);
cursor: pointer;
position: relative;
transition: all 0.15s;
}
table input[type="checkbox"]:checked,
.data-table input[type="checkbox"]:checked {
background: var(--ember);
border-color: var(--ember);
}
table input[type="checkbox"]:checked::after,
.data-table input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ── Toggle Switch ───────────────────────────────────────── */
.toggle-check {
display: inline-flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
}
/* Override .form-group label defaults when used as toggle */
.form-group label.toggle-check {
display: inline-flex;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
margin-bottom: 0;
}
.toggle-check span {
display: inline-block;
line-height: 1;
padding-top: 2px;
}
.toggle-check input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 52px;
height: 28px;
min-height: 28px;
background: #dc3545;
border: none;
border-radius: 14px;
position: relative;
cursor: pointer;
transition: background 0.25s;
flex-shrink: 0;
margin: 0;
padding: 0;
vertical-align: middle;
}
.toggle-check input[type="checkbox"]::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.25s;
}
.toggle-check input[type="checkbox"]:checked { background: #28a745; }
.toggle-check input[type="checkbox"]:checked::after { transform: translateX(24px); }
/* Dashboard toggle switch */
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--toggle-track);
border-radius: 12px;
transition: background 0.3s ease;
}
.toggle-track::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: var(--muted);
border-radius: 50%;
transition: all 0.3s ease;
}
.toggle-switch input:checked + .toggle-track { background: var(--bg-ember-glow); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(20px); background: var(--ember); }
/* ── Tabs ────────────────────────────────────────────────── */
.k-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.25s, border-color 0.25s, text-shadow 0.25s;
font-family: inherit;
white-space: nowrap;
flex-shrink: 0;
}
/* Optional icon inside .k-tab */
.k-tab svg {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.25s;
}
.k-tab:hover { color: var(--text); }
.k-tab:hover svg { opacity: 0.7; }
.k-tab.active {
color: var(--ember);
border-bottom-color: var(--ember);
text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
.k-tab.active svg {
opacity: 1;
color: var(--ember);
}
html[data-theme="light"] .k-tabs { border-bottom-color: var(--border); }
html[data-theme="light"] .k-tab.active { text-shadow: none; }
.k-tab.disabled-tab {
opacity: 0.35;
pointer-events: none;
}
.info-box__card--clickable {
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.info-box__card-value--sm { font-size: var(--fs-base); }
.info-box__card--clickable:hover {
background: var(--surface-hover);
transform: translateY(-1px);
}
/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-state svg { width: 40px; height: 40px; margin-bottom: 0.75rem; opacity: 0.4; flex-shrink: 0; }
/* ── Filter Bar ──────────────────────────────────────────── */
/* ── Global Select (custom chevron for consistent cross-browser look) ── */
select {
-webkit-appearance: none !important;
appearance: none !important;
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='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 0.625rem center !important;
background-size: 12px !important;
padding-right: 2rem !important;
cursor: pointer;
}
html[data-theme="light"] select {
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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Date inputs: calendar icon visibility in dark/light mode */
input[type="date"],
input[type="datetime-local"] {
color-scheme: dark;
}
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"] {
color-scheme: light;
}
/* Controls bar (database-pro variant) */
.controls {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--trench);
border-bottom: 1px solid var(--border);
align-items: center;
flex-shrink: 0;
}
.controls input,
.controls select {
padding: 0.5rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--border);
background-color: var(--deep);
outline: none;
transition: border-color 0.2s;
color: inherit;
font: inherit;
}
.controls input:focus,
.controls select:focus { border-color: rgba(245, 158, 11, 0.4); }
.controls select option { background: var(--cavern); }
.search-wrap {
position: relative;
flex: 1;
min-width: 200px;
}
.search-wrap input { width: 100%; padding-right: 32px; box-sizing: border-box; }
.search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
line-height: 1;
padding: 4px;
display: none;
color: var(--muted);
opacity: 0.7;
transition: opacity 0.15s;
}
.search-clear:hover { opacity: 1; color: var(--text); }
.result-count {
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: auto;
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
width: 14ch;
text-align: right;
flex-shrink: 0;
}
/* ── Data Table ──────────────────────────────────────────── */
.table-wrapper {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--deep);
}
.table-scroll-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Global table header baseline — all tables inherit this */
th {
font-size: 14px;
color: var(--text);
text-align: left;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
white-space: nowrap;
user-select: none;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--deep);
z-index: 2;
}
.data-table th.sortable { cursor: pointer; }
.data-table th .sort-arrow {
display: inline-block;
margin-left: 0.25rem;
opacity: 0.4;
}
.data-table th.sorted .sort-arrow { opacity: 1; }
.data-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.data-table a { text-decoration: none; }
.cell-stack { line-height: 1.2; }
.ks-col-shrink { width: 1px; white-space: nowrap; }
/* Allow wrapping in free-text columns (Detail, Description, Reason, etc.) */
.data-table .col-wrap { white-space: normal; word-break: break-word; }
.data-table th:last-child,
.data-table td:last-child { padding-right: calc(1rem + 1px); }
/* ── Table Block — filter bar + table in one card ────────── */
.table-block {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--deep);
margin-bottom: 1.5rem;
}
.table-block > .table-wrapper {
border: none;
border-radius: 0;
}
/* Header inside table-block: flush padding, border divider */
.table-block > .dashboard-card-header {
margin-bottom: 0;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
}
.info-card-01 > .table-wrapper {
border: none;
border-radius: 0;
background: transparent;
}
.filter-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--filter-bar-bg);
border: 1px solid var(--border);
border-radius: 8px;
flex-wrap: wrap;
}
/* Inside table-block: no radius, only bottom border */
.table-block > .filter-bar {
border-radius: 0;
border: none;
border-bottom: 1px solid var(--border);
}
.table-block > .filter-bar:last-child { border-bottom: none; }
.filter-bar input,
.filter-bar select {
background: var(--deep);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.45rem 0.75rem;
outline: none;
transition: border-color 0.2s;
color: inherit;
font: inherit;
font-size: var(--fs-base);
}
.filter-bar input:focus,
.filter-bar select:focus { border-color: rgba(245, 158, 11, 0.4); }
.filter-bar input::placeholder { color: var(--muted); }
.filter-bar select { min-width: 130px; flex-shrink: 0; width: 200px; }
.filter-bar select option { background: var(--cavern); }
.filter-bar .search-wrap { flex: 1; min-width: 180px; position: relative; }
.filter-bar .search-wrap input { width: 100%; padding-left: 2.1rem; }
.filter-bar > .btn { margin-left: 0; }
.filter-bar > .btn:only-child { margin-left: auto; }
.table-search-icon {
position: absolute;
left: 0.625rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--muted);
pointer-events: none;
flex-shrink: 0;
}
/* ── Filter Toggle — segmented multi-button for filter bars ─ */
.filter-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.filter-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: none;
border: none;
border-right: 1px solid var(--border);
padding: 0.5rem 1rem;
cursor: pointer;
color: var(--muted);
font-size: inherit;
font-weight: 500;
font-family: inherit;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
line-height: 1.4;
}
.filter-toggle-btn:last-child { border-right: none; }
.filter-toggle-btn:hover { background: var(--border); color: var(--text); }
.filter-toggle-btn.active { background: var(--ember); color: #fff; }
.filter-toggle-btn.active:hover { background: var(--ember); }
/* Small variant for inline/table use */
.filter-toggle--sm .filter-toggle-btn {
padding: 0.25rem 0.6rem;
font-size: var(--fs-xs);
}
.feed-load-more-wrap { padding: 0.75rem; text-align: center; }
/* Database-pro table (direct th/td) */
.table-wrap { overflow: auto; flex: 1; min-height: 0; padding: 0 0.5rem; }
.table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.table-wrap th {
position: sticky;
top: 0;
z-index: 10;
background: var(--trench);
padding: 6px 8px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.table-wrap td {
padding: 4px 8px;
border-bottom: 1px solid var(--border);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.table-wrap tr:hover td { background: rgba(255, 255, 255, 0.02); }
.table-wrap td a { text-decoration: none; }
.table-wrap td.empty { opacity: 0.4; }
.dealer-name { font-weight: 600; }
.dealer-city { white-space: nowrap; }
.first-seen { white-space: nowrap; }
.row-actions { display: flex; gap: 0.25rem; }
/* ── Pagination ──────────────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 1rem 0;
}
.page-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: none;
cursor: pointer;
transition: all 0.15s;
padding: 0 0.5rem;
color: inherit;
}
.page-btn:hover { border-color: var(--border-hover); }
.page-btn.active { background: var(--ember); border-color: var(--ember); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Database-pro pagination variant */
.pagination button {
padding: 4px 10px;
border-radius: 4px;
border: 1px solid var(--border);
background: none;
cursor: pointer;
color: inherit;
}
.pagination button:hover { border-color: var(--ember); }
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
/* ── Table Pager (global component for .table-block) ─────── */
.table-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.625rem 1rem;
background: var(--filter-bar-bg);
border: 1px solid var(--border);
border-radius: 8px;
}
/* Inside table-block: no radius, only top border */
.table-block > .table-footer {
border-radius: 0;
border: none;
border-top: 1px solid var(--border);
}
.pager-info {
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
min-width: 120px;
}
.pager-controls {
display: flex;
align-items: center;
gap: 0.25rem;
}
.pager-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: none;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
padding: 0 0.5rem;
color: var(--text);
font-size: var(--fs-xs);
font-family: inherit;
line-height: 1;
}
.pager-btn:hover:not(:disabled):not(.pager-ellipsis) {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.04);
}
.pager-btn.active {
background: var(--ember);
border-color: var(--ember);
color: #fff;
font-weight: 600;
}
.pager-btn.active:hover { background: var(--flame); border-color: var(--flame); }
.pager-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pager-btn.pager-ellipsis {
border-color: transparent;
cursor: default;
min-width: 24px;
color: var(--muted);
}
.pager-btn.pager-ellipsis:hover { border-color: transparent; background: none; }
.pager-per-page {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
}
.pager-per-page select {
height: 28px;
padding: 0 0.5rem;
font-size: var(--fs-xs);
border-radius: 4px;
border: 1px solid var(--border);
background: var(--cavern);
color: var(--text);
cursor: pointer;
}
html[data-theme="light"] .pager-per-page select {
background: #fff;
border-color: #d1d5db;
}
@media (max-width: 640px) {
.table-footer { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.pager-info { order: 3; width: 100%; text-align: center; }
.pager-per-page { order: 2; }
}
/* ── Bulk Action Bar ─────────────────────────────────────── */
.bulk-bar {
display: none;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 8px;
margin-bottom: 1rem;
}
.bulk-bar.active { display: flex; }
.bulk-bar .bulk-count { font-weight: 600; }
.bulk-bar .bulk-actions { display: flex; gap: 0.5rem; margin-left: auto; }
/* ── Settings Cards Row (side-by-side layout) ──────────── */
.krs-cards-row {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.krs-cards-row > .info-card-01 {
flex: 1;
min-width: 0;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.krs-cards-row { flex-direction: column; }
}
/* ── Info Card 01 ────────────────────────────────────────── */
.info-card-01 {
background: var(--deep);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.info-card-01 h3 {
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-card-01 h3 svg { width: 18px; height: 18px; }
.settings-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 1rem;
}
/* Time input clock icon */
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* Date input calendar icon — tone down in dark, slightly less in light */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.4;
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.7;
}
/* ══════════════════════════════════════════════════════════════
CRAWLER — Page-specific styles
══════════════════════════════════════════════════════════════ */
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card {
background: var(--deep);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.25rem;
transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--border-hover); }
.stat-number {
font-weight: 700;
line-height: 1;
margin-bottom: 0.25rem;
}
/* ── Info Box System ──────────────────────────────────────── */
.info-box {
position: relative;
background: var(--deep);
border: 1px solid var(--border-mid);
border-left: 3px solid var(--ember);
border-radius: 10px;
padding: 1.25rem 1.25rem 1.25rem 1.5rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.info-box__btn-action {
position: absolute;
top: 1rem;
right: 1rem;
}
.info-box__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: var(--heading);
margin-bottom: 0.5rem;
}
.info-box__title svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.info-box__text {
color: var(--muted);
line-height: 1.6;
}
.info-box__text strong { color: var(--heading); }
.info-box code {
background: rgba(245, 158, 11, 0.08);
color: var(--ember);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}
/* Info Box Grid (stat cards inside) */
.info-box__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
.info-box__grid--5 { grid-template-columns: repeat(5, 1fr); }
.info-box__card {
border-radius: 8px;
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.info-box__card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.info-box__card-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
}
.info-box__card-value {
font-size: 1.1rem;
font-weight: 700;
font-family: var(--font-mono);
}
.info-box__card-note {
font-size: 0.72rem;
opacity: 0.6;
line-height: 1.4;
}
.info-box__card-note code {
font-size: 0.9em;
padding: 1px 4px;
}
/* ── Color Variants ──────────────────────────────────────── */
/* Sky (blue) — for schedule/config */
.info-box--sky { border-left-color: #3b82f6; }
.info-box--sky .info-box__title svg { color: #3b82f6; }
.info-box--sky code { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
.info-box--sky .info-box__card {
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.12);
}
.info-box--sky .info-box__card-value { color: #60a5fa; }
/* Teal — for inventory */
.info-box--teal { border-left-color: #2dd4bf; }
.info-box--teal .info-box__title svg { color: #2dd4bf; }
.info-box--teal code { background: rgba(45, 212, 191, 0.1); color: #2dd4bf; }
.info-box--teal .info-box__card {
background: rgba(45, 212, 191, 0.06);
border: 1px solid rgba(45, 212, 191, 0.12);
}
.info-box--teal .info-box__card-value { color: #2dd4bf; }
/* Ember (orange) — default / general */
.info-box--ember { border-left-color: var(--ember); }
.info-box--ember .info-box__title svg { color: var(--ember); }
.info-box--ember .info-box__card {
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.12);
}
.info-box--ember .info-box__card-value { color: var(--ember); }
/* HubSpot (brand orange #ff7a59) */
.info-box--hubspot { border-left-color: #ff7a59; }
.info-box--hubspot .info-box__title svg { color: #ff7a59; }
.info-box--hubspot code { background: rgba(255, 122, 89, 0.1); color: #ff7a59; }
.info-box--hubspot .info-box__card {
background: rgba(255, 122, 89, 0.06);
border: 1px solid rgba(255, 122, 89, 0.12);
}
.info-box--hubspot .info-box__card-value { color: #ff7a59; }
/* Green — for success/active states */
.info-box--green { border-left-color: #34d399; }
.info-box--green .info-box__title svg { color: #34d399; }
.info-box--green code { background: rgba(52, 211, 153, 0.1); color: #34d399; }
.info-box--green .info-box__card {
background: rgba(52, 211, 153, 0.06);
border: 1px solid rgba(52, 211, 153, 0.12);
}
.info-box--green .info-box__card-value { color: #34d399; }
/* Danger (red) — for warnings/outdated */
.info-box--danger { border-left-color: var(--danger); }
.info-box--danger .info-box__title svg { color: var(--danger); }
.info-box--danger code { background: rgba(239, 68, 68, 0.1); color: #f87171; }
.info-box--danger .info-box__card {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.12);
}
.info-box--danger .info-box__card-value { color: #f87171; }
/* Purple — for data/analytics */
.info-box--purple { border-left-color: #a78bfa; }
.info-box--purple .info-box__title svg { color: #a78bfa; }
.info-box--purple code { background: rgba(167, 139, 250, 0.1); color: #a78bfa; }
.info-box--purple .info-box__card {
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.12);
}
.info-box--purple .info-box__card-value { color: #a78bfa; }
/* ClickUp — brand purple */
.info-box--clickup { border-left-color: #7B68EE; }
.info-box--clickup .info-box__title svg { color: #7B68EE; }
.info-box--clickup .info-box__title img { height: 18px; width: auto; vertical-align: middle; margin-right: 6px; }
.info-box--clickup code { background: rgba(123, 104, 238, 0.1); color: #7B68EE; }
.info-box--clickup .info-box__card {
background: rgba(123, 104, 238, 0.06);
border: 1px solid rgba(123, 104, 238, 0.12);
}
.info-box--clickup .info-box__card-value { color: #7B68EE; }
/* Info — standard blue for informational page headers (new standard via RND-280) */
.info-box--info { border-left-color: #3b82f6; }
.info-box--info .info-box__title svg { color: #3b82f6; }
.info-box--info code { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
.info-box--info .info-box__card {
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.12);
}
.info-box--info .info-box__card-value { color: #60a5fa; }
/* ClickUp logo in section header */
.clickup-logo-header {
height: 28px;
width: auto;
vertical-align: middle;
margin-right: 4px;
}
/* ClickUp message textarea */
#clickup-message {
padding: 0.75rem;
resize: vertical;
}
/* ClickUp formatting hint chips below textarea */
.clickup-format-hints {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
align-items: center;
}
.format-hint {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
font-size: 0.7rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
user-select: none;
line-height: 1;
}
.format-hint:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--text);
}
.format-hint code {
font-size: 0.65rem;
background: none;
padding: 0;
color: inherit;
}
.format-hint svg {
opacity: 0.7;
}
.format-hint:hover svg {
opacity: 1;
}
.format-hint--mention {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ember);
background: rgba(245, 158, 11, 0.08);
}
.format-hint--mention:hover {
background: rgba(245, 158, 11, 0.18);
color: var(--flame);
}
.format-hint-sep {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.08);
margin: 0 2px;
}
html[data-theme="light"] .format-hint {
background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .format-hint:hover {
background: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .format-hint--mention {
background: rgba(245, 158, 11, 0.06);
}
html[data-theme="light"] .format-hint--mention:hover {
background: rgba(245, 158, 11, 0.14);
}
html[data-theme="light"] .format-hint-sep {
background: rgba(0, 0, 0, 0.08);
}
/* Light theme adjustments */
html[data-theme="light"] .info-box {
background: #fff;
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .info-box code { font-weight: 500; }
html[data-theme="light"] .info-box__card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .info-box--sky code { color: #2563eb; }
html[data-theme="light"] .info-box--sky .info-box__card-value { color: #2563eb; }
html[data-theme="light"] .info-box--teal code { color: #0d9488; }
html[data-theme="light"] .info-box--teal .info-box__card-value { color: #0d9488; }
html[data-theme="light"] .info-box--green code { color: #059669; }
html[data-theme="light"] .info-box--green .info-box__card-value { color: #059669; }
html[data-theme="light"] .info-box--danger code { color: #dc2626; }
html[data-theme="light"] .info-box--danger .info-box__card-value { color: #dc2626; }
html[data-theme="light"] .info-box--purple code { color: #7c3aed; }
html[data-theme="light"] .info-box--purple .info-box__card-value { color: #7c3aed; }
html[data-theme="light"] .info-box--clickup code { color: #6254d3; }
html[data-theme="light"] .info-box--clickup .info-box__card-value { color: #6254d3; }
/* clickup-logo-header light mode: inherits from base (no special styling) */
html[data-theme="light"] .info-box--info code { color: #2563eb; }
html[data-theme="light"] .info-box--info .info-box__card-value { color: #2563eb; }
/* Responsive */
@media (max-width: 768px) {
.info-box__grid { grid-template-columns: 1fr; }
}
/* Legacy .report-explainer removed — use .info-box .info-box--danger */
/* Test Log */
.test-log {
line-height: 1.6;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem;
max-height: 400px;
overflow-y: auto;
}
.test-log-entry { padding: 2px 0; }
/* Schedule Panel */
.dashboard-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.dashboard-card-header h3 { margin-bottom: 0; }
.active-crawl-header-left {
display: flex;
align-items: center;
gap: 25px;
}
/* Crawl Throbber */
.crawl-throbber {
margin-left: 8px;
width: 20px;
height: 40px;
display: grid;
background:
linear-gradient(currentColor 0 0) top/100% 2px,
radial-gradient(farthest-side at top, #0000 calc(100% - 2px), currentColor calc(100% - 1px), #0000) top,
linear-gradient(currentColor 0 0) bottom/100% 2px,
radial-gradient(farthest-side at bottom, #0000 calc(100% - 2px), currentColor calc(100% - 1px), #0000) bottom;
background-size: 100% 1px, 100% 50%;
background-repeat: no-repeat;
animation: throbber-spin 20s infinite linear;
flex-shrink: 0;
opacity: 0.3;
transition: opacity 0.4s ease;
}
.crawl-throbber::before,
.crawl-throbber::after {
content: "";
grid-area: 1/1;
background: inherit;
animation: inherit;
}
.crawl-throbber::after { animation-duration: 10s; }
/* Active: fast spin + orange */
.crawl-throbber.active { color: var(--ember); opacity: 1; animation-duration: 2s; }
.crawl-throbber.active::before { animation-duration: 2s; }
.crawl-throbber.active::after { animation-duration: 1s; }
@keyframes throbber-spin { 100% { transform: rotate(1turn); } }
/* Debug Panel */
.debug-panel { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.debug-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; user-select: none; }
.debug-chevron { transition: transform 0.2s; }
.label-caps { font-size: 0.75rem; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.debug-log { font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; background: var(--abyss); border-radius: 8px; padding: 12px 14px; max-height: 280px; overflow-y: auto; color: var(--text-secondary); white-space: pre-wrap; word-break: break-all; }
/* Source logo in header (right side) */
.header-source-logo {
height: 22px;
width: auto;
object-fit: contain;
margin-right: 15px;
}
/* Row Progress Bar */
.row-progress { position: relative; }
.row-progress td:first-child::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: var(--progress, 0%);
background: var(--ember);
border-radius: 0 1px 1px 0;
transition: width 0.6s ease;
}
/* Crawl Log Row (live output under active runs) */
.crawl-log-row td {
padding: 0 !important;
border-top: none !important;
background: transparent !important;
}
.crawl-log {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
color: var(--muted);
padding: 4px 12px 8px;
max-height: 100px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
opacity: 0.7;
}
/* Schedule Badge → moved to pills.css */
/* BL Table */
.bl-table {
width: 100%;
border-collapse: collapse;
}
.bl-table th {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid var(--border);
}
.bl-table td {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.bl-table tr:last-child td { border-bottom: none; }
@keyframes crawl-scan {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.bl-table tr.bl-running {
background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.06) 25%, rgba(245, 158, 11, 0.12) 50%, rgba(245, 158, 11, 0.06) 75%, transparent 100%);
background-size: 200% 100%;
animation: crawl-scan 3s ease-in-out infinite;
}
/* Status Dot → moved to pills.css */
/* Schedule Panel Footer */
.schedule-panel-footer {
padding: 0.75rem 0 0 0;
margin-top: 0.75rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.schedule-panel-footer:empty { display: none; }
.schedule-panel-footer .footer-stats span { margin-right: 1rem; }
.schedule-panel-footer .footer-stats .stat-highlight { font-weight: 500; }
/* History Table */
.history-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
}
.history-table th {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid var(--border);
}
.history-table td {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
white-space: nowrap;
}
.history-table tr:last-child td { border-bottom: none; }
.history-table tr.history-row:hover td { background: var(--trench); }
.history-table .text-right { text-align: right; }
.history-detail-row { display: none; }
.history-table tr.history-detail-row td { background: var(--abyss); }
.history-table tr.history-detail-row:hover td { background: var(--abyss); }
/* Harvest sub-row in active table */
.bl-table tr.harvest-sub-row td { background: transparent; border-bottom: 1px solid var(--border); }
.bl-table tr.harvest-sub-row:hover td { background: transparent; }
/* Column spacing */
.bl-table .col-start, .history-table .col-start { padding-right: 0; width: 1%; }
.bl-table .col-bl, .history-table .col-bl { padding-left: 12px; padding-right: 0; width: 1%; }
.bl-table .col-trigger, .history-table .col-trigger { padding-left: 12px; padding-right: 0; width: 1%; }
.bl-table .col-indb, .history-table .col-indb { padding-left: 12px; padding-right: 0; width: 1%; }
.bl-table .col-pages, .history-table .col-pages { padding-left: 12px; padding-right: 0; width: 1%; }
.bl-table .col-est, .history-table .col-est { padding-left: 12px; padding-right: 0; width: 1%; }
.bl-table .col-new, .history-table .col-new { padding-left: 12px; width: 1%; }
.bl-table .col-issues, .history-table .col-issues { padding-left: 8px; width: 1%; white-space: nowrap; }
.bl-table .col-status, .history-table .col-status { padding-left: 12px; width: 1%; text-align: center; }
.bl-table .col-credits, .history-table .col-credits { text-align: right; }
.bl-table .col-dot, .history-table .col-dot { text-align: center; width: 1%; }
/* Diagnostics columns — compact for space */
.bl-table .col-diag, .history-table .col-diag { padding: 0.25rem 2px; width: 22px; min-width: 22px; max-width: 26px; font-size: 0.7rem; text-align: center; cursor: help; }
.diag-zero { color: var(--muted); }
.diag-error { color: var(--danger); font-weight: 600; }
.bl-table .col-stale, .history-table .col-stale { padding-left: 4px; padding-right: 4px; width: 1%; text-align: center; }
.col-id { width: 50px; }
.col-type { width: 70px; }
.history-trigger-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--cavern);
padding: 2px 8px;
border-radius: 3px;
white-space: nowrap;
}
.retry-btn {
background: none;
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
color: inherit;
}
.retry-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.5); }
.delete-bl-btn { border-color: rgba(107, 114, 128, 0.3); }
.delete-bl-btn:hover { background: rgba(107, 114, 128, 0.1); border-color: rgba(107, 114, 128, 0.5); }
/* Weekday Grid */
.weekday-grid { display: flex; gap: 0.5rem; }
.weekday-btn {
width: 40px;
height: 36px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--trench);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
}
.weekday-btn:hover { border-color: var(--border-hover); }
.weekday-btn.active { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
/* BL Order List */
.bl-order-list { display: flex; flex-direction: column; gap: 2px; }
.bl-order-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 6px;
background: var(--trench);
border: 1px solid transparent;
cursor: grab;
transition: all 0.15s;
}
.bl-order-item:hover { border-color: var(--border-hover); }
.bl-order-item.dragging { opacity: 0.5; border-color: var(--ember); }
.bl-order-item.drag-over { border-color: var(--ember); background: rgba(245, 158, 11, 0.06); }
.bl-order-handle { cursor: grab; user-select: none; }
.bl-order-name { flex: 1; }
/* Schedule Info */
.schedule-info {
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.15);
border-radius: 6px;
}
/* Notification Grid (side-by-side cards) */
.notif-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
align-items: start;
}
@media (max-width: 860px) {
.notif-grid { grid-template-columns: 1fr; }
}
/* Notification Message List */
.notif-msg-list {
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--trench);
}
.notif-msg-item {
display: flex;
gap: 0.5rem;
padding: 0.45rem 0.65rem;
border-bottom: 1px solid var(--border);
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--text);
}
.notif-msg-item:last-child { border-bottom: none; }
.notif-msg-num {
flex-shrink: 0;
width: 1.4rem;
text-align: right;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.label-hint {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* ══════════════════════════════════════════════════════════════
Backups View Styles
══════════════════════════════════════════════════════════════ */
.backup-header-actions {
display: flex;
gap: 0.5rem;
}
.backup-row-actions {
display: flex;
gap: 0.375rem;
}
.backup-settings-form {
padding: 1.25rem 1.5rem;
}
.backup-settings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 1.25rem;
}
.backup-setting-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.backup-setting-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.backup-retention-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.backup-retention-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 3px;
background: var(--border);
outline: none;
}
.backup-retention-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ember);
cursor: pointer;
border: 2px solid var(--deep, #0a0a16);
}
html[data-theme="light"] .backup-retention-slider::-webkit-slider-thumb {
border-color: #fff;
}
.backup-retention-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ember);
cursor: pointer;
border: 2px solid var(--deep, #0a0a16);
}
.backup-retention-val {
font-weight: 700;
font-size: 1rem;
color: var(--heading);
min-width: 2ch;
text-align: right;
font-variant-numeric: tabular-nums;
}
.backup-settings-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.backup-settings-note {
font-size: 0.8125rem;
color: var(--muted);
font-style: italic;
}
@media (max-width: 768px) {
.backup-header-actions {
flex-direction: column;
gap: 0.375rem;
}
.backup-settings-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* ── Backup tab content spacing ──────────────────────────── */
/* Acronis protection detail rows */
.acronis-details {
padding: 1rem 1.25rem;
}
.acronis-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
.acronis-detail-row:last-child {
border-bottom: none;
}
.acronis-detail-label {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.acronis-detail-value {
font-size: var(--fs-base);
font-weight: 600;
color: var(--heading);
font-family: var(--font-mono);
}
/* Status colors for Acronis */
.acronis-ok { color: #22c55e; }
.acronis-warn { color: #f59e0b; }
.acronis-err { color: #ef4444; }
/* (backup-columns grid removed — now using k-tabs) */
/* Legacy .inventory-info — replaced by .info-box system */
/* Dealer Detail Modal */
#dealer-modal .modal { max-width: 700px; }
.dealer-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
margin-bottom: 1.5rem;
}
.info-item label {
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.15rem;
}
.info-item span { word-break: break-word; }
.info-item a { text-decoration: none; }
.info-item a:hover { text-decoration: underline; }
/* Duplicate Check */
.dup-check-section { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.dup-check-section h3 { font-weight: 600; margin-bottom: 0.75rem; }
.dup-result { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.75rem; }
.dup-result.clear {
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.2);
display: flex;
align-items: center;
gap: 0.5rem;
}
.dup-result.clear svg { width: 18px; height: 18px; }
.dup-match {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.15);
border-radius: 8px;
margin-bottom: 0.5rem;
}
.dup-match-info { display: flex; align-items: center; gap: 0.75rem; }
.dup-match-name { font-weight: 600; }
/* Confidence pill → moved to pills.css */
.dup-match-link {
text-decoration: none;
display: flex;
align-items: center;
gap: 0.25rem;
}
.dup-match-link:hover { text-decoration: underline; }
.dup-match-link svg { width: 14px; height: 14px; }
/* HubSpot / Bulk Modal */
#hubspot-modal .modal { max-width: 550px; }
#bulk-modal .modal { max-width: 450px; }
.bulk-modal-body {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bulk-modal-body select {
background-color: var(--trench);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.75rem;
outline: none;
color: inherit;
font: inherit;
}
/* ══════════════════════════════════════════════════════════════
SHRIMP EDITOR — Page-specific styles
══════════════════════════════════════════════════════════════ */
#editor-screen {
display: flex;
height: 100vh;
flex-direction: column;
}
.editor-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.editor-header {
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border);
background: var(--trench);
}
.editor-header-content {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.editor-header h2 {
font-weight: 500;
letter-spacing: 0.03em;
margin: 0;
}
.url-display {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 250px;
}
.url-input {
flex: 1;
padding: 0.35rem 0.6rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--abyss);
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
font: inherit;
}
.url-input:focus { outline: none; border-color: rgba(249, 115, 22, 0.3); }
.editor-textarea {
flex: 1;
padding: 1rem;
border: none;
outline: none;
resize: none;
line-height: 1.65;
background: var(--deep);
tab-size: 2;
color: inherit;
font: inherit;
}
.editor-textarea::placeholder { opacity: 0.5; }
.editor-textarea:focus { box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.12); }
.editor-footer {
padding: 0.7rem 1rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--trench);
}
.editor-footer-right {
justify-content: flex-end;
}
.shrimp-nav-footer {
padding: 0.75rem 1rem;
flex-shrink: 0;
border-top: 1px solid var(--border);
}
.shrimp-nav-footer:first-child {
border-top: none;
border-bottom: 1px solid var(--border);
}
/* ══════════════════════════════════════════════════════════════
INSIDER — Page-specific styles
══════════════════════════════════════════════════════════════ */
/* Fullscreen overlay (deprecated — hidden) */
.fullscreen-overlay { display: none; }
.fullscreen-overlay.active { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 9999; background: var(--abyss); }
.fullscreen-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; background: var(--deep); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px; }
.fullscreen-header h3 { font-size: var(--fs-base); font-weight: 600; line-height: 1; margin: 0 0 2px 0; }
.fullscreen-header .content-meta { margin: 0; line-height: 1; }
.fullscreen-header .content-meta span { font-size: var(--fs-xs); color: var(--muted); line-height: 1; }
.fullscreen-frame { flex: 1; border: none; width: 100%; }
/* Public viewer (shared template page — uses fullscreen-header + fullscreen-frame) */
.public-viewer-body { display: flex; flex-direction: column; min-height: 100dvh; background: var(--abyss); margin: 0; }
/* Content Header */
.content-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
border-bottom: 1px solid var(--border);
background: var(--deep);
flex-shrink: 0;
gap: 12px;
}
.content-header-left { flex: 1; min-width: 0; }
.content-header h2 {
font-size: var(--fs-base);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
margin: 0 0 2px 0;
padding: 0;
}
.content-header .content-meta {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 12px;
line-height: 1;
}
.content-header .content-meta span {
font-size: var(--fs-xs);
line-height: 1;
}
.content-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Preview Theme Toggle */
.preview-theme-toggle {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.preview-theme-btn {
padding: 6px 10px;
background: none;
border: none;
cursor: pointer;
transition: all 0.2s;
color: inherit;
}
.preview-theme-btn.active { background: var(--glow); }
/* Preview */
.preview-container { flex: 1; position: relative; background: var(--trench); }
.preview-frame { width: 100%; height: 100%; border: none; }
/* Drop Zone */
.drop-zone {
border: 2px dashed var(--border);
border-radius: 10px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.drop-zone:hover,
.drop-zone.dragover {
border-color: var(--ember);
background: rgba(249, 115, 22, 0.04);
}
.drop-zone input { display: none; }
/* Insider k-tabs — suppress global 2rem margin-bottom in content context */
.content-area > .k-tabs { margin-bottom: 0; flex-shrink: 0; }
/* Insider dashboard — spacing after tabs */
.insider-dashboard-view { padding-top: 1.5rem; }
/* Insider contacts — table block fills available space */
.insider-contacts-view { padding-top: 0.75rem; }
.insider-contacts-block { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.insider-contacts-block .search-wrap { flex: 1; }
.insider-contacts-block .table-wrapper { flex: 1; overflow-y: auto; min-height: 0; }
.insider-contacts-view .form-control-static { padding: 0.25rem 0; color: var(--text); }
.insider-empty-cell { padding: 3rem; }
/* insider-pagination-bar removed — using .table-footer component */
.insider-blacklist-warning { margin-top: 1rem; }
.col-actions-right { width: 1px; white-space: nowrap; text-align: right; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: rgba(255, 255, 255, 0.02); }
html[data-theme="light"] .clickable-row:hover { background: rgba(0, 0, 0, 0.02); }
.btn-group { display: flex; gap: 0.5rem; }
/* Contact detail modal */
.contact-detail-row { display: flex; gap: 1rem; }
.contact-detail-col { flex: 1; }
.contact-status-box { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 8px; }
.contact-status-active { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); }
.contact-status-blocked { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.contact-status-inner { display: flex; align-items: center; justify-content: space-between; }
.contact-status-sub { font-size: var(--fs-xs); }
.contact-list-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.contact-history-header { margin-top: 1rem; }
.contact-history-scroll { max-height: 200px; overflow-y: auto; }
.contact-history-item { padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
.pill-disabled { opacity: 0.5; }
.insider-settings-actions { margin-top: 1rem; }
.insider-settings-lists { margin-top: 0.5rem; }
/* Insider nav: allow multi-line items for long newsletter/template names */
#newsletterList .nav-item,
#templateList .nav-item {
white-space: normal;
}
/* Sync status text (above sync button in sidebar) */
.insider-sync-meta {
display: block;
font-size: var(--fs-xs);
color: var(--muted);
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Spin the SVG inside sync button when syncing */
#syncBtn.spinning svg { animation: spin 1s linear infinite; }
/* Empty sidebar list placeholder */
.sidebar-list-empty {
padding: 20px;
text-align: center;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.5;
}
/* HTML textarea in edit newsletter modal */
.insider-html-textarea {
min-height: 200px;
margin-top: 0.5rem;
font-family: monospace;
font-size: var(--fs-xs);
}
/* ══════════════════════════════════════════════════════════════
DASHBOARD — Page-specific styles
══════════════════════════════════════════════════════════════ */
/* App Shell (grid layout) */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--header-h) 1fr;
grid-template-areas: "sidebar header" "sidebar main";
height: 100vh;
height: 100dvh;
transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app.collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }
/* Pills, badges, status-dot → moved to pills.css */
/* Dashboard Header */
.app .header {
grid-area: header;
background: var(--surface-header);
height: auto;
padding: 0 1.5rem;
z-index: 5;
margin-bottom: 0;
}
.header-breadcrumb { letter-spacing: 0.06em; }
.header-user {
display: flex;
align-items: center;
gap: 0.75rem;
}
.user-avatar {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--cavern), var(--slate));
border: 1px solid var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { display: flex; flex-direction: column; align-items: flex-start; }
.user-name { font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.user-role { letter-spacing: 0.1em; text-transform: uppercase; }
/* Zoom Controls */
.zoom-group {
display: flex;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: 8px;
overflow: hidden;
}
.zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.2s ease;
color: var(--heading);
}
.zoom-btn:hover { background: var(--hover-ember); }
.zoom-btn svg { width: 14px; height: 14px; }
.zoom-level {
min-width: 32px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
letter-spacing: 0.02em;
user-select: none;
cursor: default;
border-left: 1px solid var(--border-mid);
border-right: 1px solid var(--border-mid);
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
/* Theme Toggle — same as .btn-icon but 34px */
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: none;
border: 1px solid var(--border-hover);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
color: var(--heading);
}
.theme-toggle-btn svg { width: 16px; height: 16px; }
.theme-toggle-btn:hover {
border-color: rgba(249, 115, 22, 0.4);
background: rgba(249, 115, 22, 0.08);
color: var(--ember);
}
/* Avatar Dropdown */
.avatar-dropdown-wrap { position: relative; }
.avatar-trigger {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
color: inherit;
}
.avatar-trigger:hover { background: var(--hover-subtle); border-color: var(--border); }
.avatar-trigger.open { background: var(--hover-muted); border-color: var(--border-mid); }
.avatar-chevron { width: 14px; height: 14px; transition: transform 0.2s ease; flex-shrink: 0; }
.avatar-trigger.open .avatar-chevron { transform: rotate(180deg); }
.avatar-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
background: var(--cavern);
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 0.5rem;
z-index: 300;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(20px);
display: none;
animation: fadeUp 0.15s ease;
}
.avatar-dropdown.open { display: block; }
.avatar-dropdown-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.5rem 0.75rem;
}
.avatar-dropdown-header .user-avatar { width: 36px; height: 36px; }
.avatar-dropdown-name { font-weight: 600; line-height: 1.3; }
.avatar-dropdown-divider { height: 1px; background: var(--border-mid); margin: 0.25rem 0; }
.avatar-dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
border: none;
background: none;
width: 100%;
color: inherit;
}
.avatar-dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }
.avatar-dropdown-item:hover { background: var(--hover-muted); }
.avatar-dropdown-item:hover svg { opacity: 1; }
.avatar-dropdown-item.danger:hover { background: var(--bg-red-subtle); }
/* Main Content */
.main {
grid-area: main;
overflow-y: auto;
overflow-x: hidden;
padding: 1.5rem;
position: relative;
}
.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: var(--toggle-track); border-radius: 3px; }
.main::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
/* Welcome */
.welcome-section { margin-bottom: 2rem; animation: fadeUp 0.5s ease both; }
.welcome-title { font-weight: 700; margin-bottom: 0.5rem; }
.welcome-title span {
background: linear-gradient(135deg, var(--ember), var(--blaze));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.welcome-sub {
font-size: 0.8125rem;
color: var(--muted);
font-style: italic;
letter-spacing: 0.01em;
}
/* Dashboard Stats (override for auto-fit) */
.app .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.app .stat-card {
background: var(--surface-card);
border: 1px solid var(--border-mid);
border-radius: 16px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
animation: fadeUp 0.5s ease both;
}
.app .stat-card:nth-child(1) { animation-delay: 0.05s; }
.app .stat-card:nth-child(2) { animation-delay: 0.1s; }
.app .stat-card:nth-child(3) { animation-delay: 0.15s; }
.app .stat-card:nth-child(4) { animation-delay: 0.2s; }
.app .stat-card:hover {
border-color: var(--border-heavy);
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--shadow-card);
}
.app .stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 16px 16px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.app .stat-card:hover::before { opacity: 1; }
.app .stat-card:nth-child(1)::before { background: linear-gradient(90deg, var(--ember), var(--flame)); }
.app .stat-card:nth-child(2)::before { background: linear-gradient(90deg, #34d399, #6ee7b7); }
.app .stat-card:nth-child(3)::before { background: linear-gradient(90deg, #818cf8, #a78bfa); }
.app .stat-card:nth-child(4)::before { background: linear-gradient(90deg, #38bdf8, #67e8f9); }
.stat-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.stat-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-card:nth-child(1) .stat-icon { background: var(--bg-ember-subtle); }
.stat-card:nth-child(2) .stat-icon { background: var(--bg-green-subtle); }
.stat-card:nth-child(3) .stat-icon { background: var(--bg-indigo-subtle); }
.stat-card:nth-child(4) .stat-icon { background: var(--bg-sky-subtle); }
.stat-trend.up { background: var(--bg-green-subtle); }
.stat-value { font-size: var(--fs-xl); font-weight: 800; color: var(--heading); line-height: 1; margin-bottom: 0.25rem; }
.stat-label { font-size: var(--fs-xs); color: var(--muted); }
/* Content Grid */
.content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.panel {
background: var(--surface-card);
border: 1px solid var(--border-mid);
border-radius: 16px;
overflow: hidden;
animation: fadeUp 0.5s ease both;
animation-delay: 0.25s;
}
.panel:nth-child(2) { animation-delay: 0.3s; }
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.panel-title {
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.panel-title svg { width: 16px; height: 16px; }
.panel-action {
text-decoration: none;
letter-spacing: 0.06em;
cursor: pointer;
}
.panel-body { padding: 1rem 1.25rem; }
/* Activity List */
.activity-list { list-style: none; }
.activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 0.5rem;
flex-shrink: 0;
}
.activity-dot.ember { background: var(--ember); }
.activity-dot.green { background: #34d399; }
.activity-dot.purple { background: #818cf8; }
.activity-content { flex: 1; }
.activity-text { line-height: 1.4; }
.activity-text strong { font-weight: 600; }
.activity-time { margin-top: 0.15rem; }
/* Quick Apps Grid */
.apps-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.app-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-radius: 12px;
background: var(--surface-raised);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: inherit;
}
.app-card:hover {
background: var(--hover-muted);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.app-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-card-info { overflow: hidden; }
.app-card-name { font-weight: 600; line-height: 1.2; }
.app-card-desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Loading State */
.loading-state {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: var(--abyss);
}
.loading-state .loading-spinner {
width: 32px;
height: 32px;
border-width: 3px;
}
/* Dashboard Bento Grid */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.bento-full { grid-column: 1 / -1; }
.bento-half { grid-column: span 2; }
.bento-wide { grid-column: span 2; }
/* Section Labels */
.section-label {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 1rem;
animation: fadeUp 0.4s ease both;
}
.section-label svg { width: 14px; height: 14px; opacity: 0.6; }
.section-count { background: #191e2b; margin-left: 0.15rem; }
/* (Project Cards — removed in Dashboard Redesign v2) */
/* Team Grid */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1rem;
}
.team-loading {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2.5rem;
}
/* Usercard */
.usercard {
background: var(--surface-card);
border: 1px solid var(--border-mid);
border-radius: 14px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 320px;
transition: all 0.3s ease;
animation: fadeUp 0.5s ease both;
}
.usercard:hover {
border-color: var(--border-heavy);
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--shadow-card);
}
.usercard-top { display: flex; align-items: center; gap: 1rem; }
.usercard-avatar {
width: 46px;
height: 46px;
border-radius: 12px;
background: linear-gradient(135deg, var(--cavern), var(--slate));
border: 2px solid var(--border-mid);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
overflow: hidden;
flex-shrink: 0;
}
.usercard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.usercard-info { flex: 1; min-width: 0; }
.usercard-name {
font-weight: 700;
font-size: 1rem;
color: #e8e8e8;
line-height: 1.2;
margin: 0 0 0.25rem 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.usercard-badges { display: flex; gap: 0.5rem; }
.usercard-stats {
display: flex;
gap: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-light);
}
.usercard-stat { display: flex; flex-direction: column; }
.usercard-stat:last-child:not(:first-child) { margin-left: auto; text-align: right; }
.usercard-stat-value { line-height: 1.5; }
.card-label { letter-spacing: 0.1em; text-transform: uppercase; color: #3c3c5c; font-size: 14px; }
.usercard-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.usercard-dot.active { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.usercard-dot.inactive { background: var(--muted); opacity: 0.4; }
/* ── Scoreboard Row (Wispr Promo + Scoreboard side by side) ── */
.bento-scoreboard-row {
display: flex;
gap: 1rem;
align-items: stretch;
}
.bento-scoreboard-row .bento-scoreboard {
flex: 1;
min-width: 0;
}
/* ── Wispr Flow Promo ── */
.bento-wispr {
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border: 1px solid rgba(141, 124, 228, 0.25);
text-decoration: none;
color: inherit;
transition: border-color 0.3s ease, transform 0.2s ease;
cursor: pointer;
}
.bento-wispr::after {
content: '';
position: absolute;
inset: 0;
background: url('images/wispr-alx.jpeg') center bottom / cover no-repeat;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.bento-wispr > * { position: relative; z-index: 1; }
.bento-wispr:hover {
border-color: rgba(141, 124, 228, 0.5);
transform: translateY(-2px);
}
.wispr-glow {
position: absolute;
top: -60px;
right: -60px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(141, 124, 228, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.wispr-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.wispr-wordmark {
height: 18px;
width: auto;
object-fit: contain;
}
.wispr-logo-light { display: none; }
html[data-theme="light"] .wispr-logo-dark { display: none; }
html[data-theme="light"] .wispr-logo-light { display: block; }
.wispr-hero {
display: flex;
flex-direction: column;
line-height: 1;
gap: 4px;
margin-bottom: 0.75rem;
}
.wispr-speed {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, #8D7CE4 0%, #B8ACF6 50%, #8D7CE4 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: wispr-shimmer 3s ease infinite;
}
@keyframes wispr-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.wispr-speed-sub {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--text);
margin-top: -0.15rem;
}
.wispr-speed-than {
font-size: var(--fs-base);
color: var(--muted);
margin-top: 0.15rem;
}
.wispr-desc {
font-size: var(--fs-base);
color: var(--muted);
line-height: 1.6;
margin: 0 0 auto 0;
padding-bottom: 1rem;
}
.wispr-cta-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.6rem 1rem;
font-size: var(--fs-base);
font-weight: 600;
color: #fff;
background: #8D7CE4;
border-radius: 8px;
margin-top: auto;
transition: background 0.2s ease, transform 0.15s ease;
}
.bento-wispr:hover .wispr-cta-btn {
background: #7B68D4;
transform: translateY(-1px);
}
/* ── Competitive Scoreboard (Presence + Leaderboard merged) ── */
.bento-card.bento-scoreboard { border-top: 2px solid var(--ember); }
.sb-layout {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
/* Zone A: My Status (left sidebar) */
.sb-my-rank {
width: 440px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-right: 1.5rem;
border-right: 1px solid var(--border-mid);
justify-content: center;
gap: 0.5rem;
}
.sb-my-avatar {
width: 96px;
height: 96px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
}
.sb-my-avatar-img {
width: 100%;
height: 100%;
border-radius: 10px;
border: 2px solid var(--avatar-border-color);
object-fit: cover;
}
.sb-my-avatar-ph {
width: 100%;
height: 100%;
border-radius: 10px;
border: 2px solid var(--avatar-border-color);
background: linear-gradient(135deg, var(--cavern), var(--slate));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xl);
font-weight: 700;
color: var(--muted);
}
html[data-theme="light"] .sb-my-avatar-ph {
background: #f3f4f6;
}
.sb-my-name {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--heading);
line-height: 1.2;
}
/* Level card override — compact version for scoreboard sidebar */
.sb-level-card {
width: 100%;
padding: 0.625rem;
gap: 0.625rem;
text-align: left;
}
.sb-level-card .level-card-img img {
width: 48px;
height: 48px;
}
.sb-level-card .level-card-name {
font-size: var(--fs-base);
}
.sb-level-card .level-card-desc {
font-size: var(--fs-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Progress bar override — compact for sidebar */
.sb-my-rank .sb-progress {
width: 100%;
max-width: 340px;
flex: none;
}
.sb-hub-btn { margin-top: 1.25rem; }
/* Zone B: Scoreboard table */
.sb-board {
flex: 1;
min-width: 0;
}
.sb-board-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.875rem;
}
.sb-board-head > svg {
width: 16px;
height: 16px;
color: var(--ember);
flex-shrink: 0;
}
.sb-board-head > span:first-of-type {
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
/* Scoreboard data-table overrides */
.sb-table-wrap {
overflow-x: auto;
}
.sb-data-table {
margin: 0;
}
.sb-col-rank { width: 1px; }
.sb-col-user { width: 1px; }
.sb-col-trend { width: 32px; }
.sb-data-table th {
font-size: var(--fs-xs);
padding: 0.5rem 0.75rem;
}
.sb-data-table td {
padding: 0.625rem 0.75rem;
vertical-align: middle;
}
/* Top 3 row highlights */
.sb-data-table .sb-rank-1 { background: rgba(245, 158, 11, 0.05); }
.sb-data-table .sb-rank-2 { background: rgba(148, 163, 184, 0.04); }
.sb-data-table .sb-rank-3 { background: rgba(205, 127, 50, 0.04); }
.sb-data-table .sb-rank-1:hover { background: rgba(245, 158, 11, 0.08); }
.sb-data-table .sb-rank-2:hover { background: rgba(148, 163, 184, 0.07); }
.sb-data-table .sb-rank-3:hover { background: rgba(205, 127, 50, 0.07); }
html[data-theme="light"] .sb-data-table .sb-rank-1 { background: rgba(245, 158, 11, 0.06); }
html[data-theme="light"] .sb-data-table .sb-rank-2 { background: rgba(148, 163, 184, 0.06); }
html[data-theme="light"] .sb-data-table .sb-rank-3 { background: rgba(205, 127, 50, 0.06); }
/* Highlight own row */
.sb-data-table .sb-is-me .sb-name {
color: var(--ember);
}
/* Rank cell */
.sb-rank-cell {
font-weight: 700;
font-size: var(--fs-xs);
font-family: var(--font-mono);
color: var(--muted);
line-height: 1;
}
.sb-rank-1 .sb-rank-cell { color: #f59e0b; font-size: var(--fs-base); }
.sb-rank-2 .sb-rank-cell { color: #94a3b8; font-size: var(--fs-base); }
.sb-rank-3 .sb-rank-cell { color: #cd7f32; font-size: var(--fs-base); }
/* Status cell — right-aligned text column */
.sb-status-cell {
font-size: var(--fs-xs);
white-space: nowrap;
text-align: right;
}
.sb-status-on { color: #22c55e; font-weight: 600; }
.sb-status-away { color: var(--muted); }
.sb-status-off { color: var(--muted); opacity: 0.5; }
/* Level cell */
.sb-level-cell {
white-space: nowrap;
}
/* KP cell */
.sb-kp-cell .karma-lb-kp {
justify-content: flex-end;
}
/* Trend cell */
.sb-trend-cell {
line-height: 1;
}
/* ════════════════════════════════════════════════════════════════
GLOBAL AVATAR SYSTEM — One place for ALL profile picture rules.
Border color + hover effect defined here, applies to every avatar
class in the entire app. To change the hover, touch only this block.
Border color: var(--avatar-border-color) defined in :root. (RND-230)
════════════════════════════════════════════════════════════════ */
/* Transition for avatar classes that don't define their own */
.sb-my-avatar,
.sb-also-avatar,
.users-table-avatar,
.profile-avatar,
.kus-trigger-avatar,
.kus-user-avatar,
.karma-stats-profile-avatar,
.karma-feed-avatar,
.gift-user-avatar {
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 1;
}
/* Unified hover — consistent scale + shadow for ALL avatar types.
scale(1.2) = 20% bigger on hover (RND-230). */
.sb-my-avatar:hover,
.wotd-avatar:hover,
.sb-also-avatar:hover,
.users-table-avatar:hover,
.profile-avatar:hover,
.karma-lb-podium-avatar:hover,
.karma-lb-avatar:hover,
.kus-trigger-avatar:hover,
.kus-user-avatar:hover,
.karma-stats-profile-avatar:hover,
.karma-feed-avatar:hover,
.gift-user-avatar:hover,
.profile-pic-10:hover,
.profile-pic-20:hover,
.profile-pic-30:hover,
.profile-pic-40:hover,
.profile-pic-50:hover,
.profile-pic-60:hover,
.profile-pic-70:hover {
transform: scale(1.2);
z-index: 10;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .sb-my-avatar:hover,
html[data-theme="light"] .wotd-avatar:hover,
html[data-theme="light"] .sb-also-avatar:hover,
html[data-theme="light"] .users-table-avatar:hover,
html[data-theme="light"] .profile-avatar:hover,
html[data-theme="light"] .karma-lb-podium-avatar:hover,
html[data-theme="light"] .karma-lb-avatar:hover,
html[data-theme="light"] .kus-trigger-avatar:hover,
html[data-theme="light"] .kus-user-avatar:hover,
html[data-theme="light"] .karma-stats-profile-avatar:hover,
html[data-theme="light"] .karma-feed-avatar:hover,
html[data-theme="light"] .gift-user-avatar:hover,
html[data-theme="light"] .profile-pic-10:hover,
html[data-theme="light"] .profile-pic-20:hover,
html[data-theme="light"] .profile-pic-30:hover,
html[data-theme="light"] .profile-pic-40:hover,
html[data-theme="light"] .profile-pic-50:hover,
html[data-theme="light"] .profile-pic-60:hover,
html[data-theme="light"] .profile-pic-70:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────
CANONICAL PROFILE PIC SIZE SYSTEM (RND-230)
Use .profile-pic-{N} for standalone avatars. Existing component
classes (users-table-avatar, karma-lb-podium-avatar, etc.) coexist
and can be combined: class="users-table-avatar profile-pic-30"
Size scale:
10 → 18px r4 Tiny chips (e.g. Scoreboard "Also Online")
20 → 28px r4 Small detail rows (e.g. badge gallery earners)
30 → 36px r8 Standard table rows, feed items
40 → 48px r8 Profile headers, karma stats
50 → 64px r10 Cards, medium popover contexts
60 → 96px r12 Large preview avatars
70 → 140px r16 Hero podium (top 3 leaderboard)
──────────────────────────────────────────────────────────────── */
.profile-pic-10,
.profile-pic-20,
.profile-pic-30,
.profile-pic-40,
.profile-pic-50,
.profile-pic-60,
.profile-pic-70 {
flex-shrink: 0;
border: 1.5px solid var(--avatar-border-color);
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--muted);
background: var(--cavern);
}
.profile-pic-10 { width: 18px; height: 18px; border-radius: 4px; font-size: 0.5rem; }
.profile-pic-20 { width: 28px; height: 28px; border-radius: 4px; font-size: var(--fs-xs); }
.profile-pic-30 { width: 36px; height: 36px; border-radius: 8px; font-size: var(--fs-xs); }
.profile-pic-40 { width: 48px; height: 48px; border-radius: 8px; font-size: var(--fs-base); }
.profile-pic-50 { width: 64px; height: 64px; border-radius: 10px; font-size: var(--fs-lg); }
.profile-pic-60 { width: 96px; height: 96px; border-radius: 12px; font-size: var(--fs-xl); }
.profile-pic-70 { width: 140px; height: 140px; border-radius: 16px; font-size: var(--fs-2xl); }
.profile-pic-10 img,
.profile-pic-20 img,
.profile-pic-30 img,
.profile-pic-40 img,
.profile-pic-50 img,
.profile-pic-60 img,
.profile-pic-70 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
html[data-theme="light"] .profile-pic-10,
html[data-theme="light"] .profile-pic-20,
html[data-theme="light"] .profile-pic-30,
html[data-theme="light"] .profile-pic-40,
html[data-theme="light"] .profile-pic-50,
html[data-theme="light"] .profile-pic-60,
html[data-theme="light"] .profile-pic-70 {
background: #f3f4f6;
}
/* Inline avatar row — compact horizontal list of profile-pic-* thumbnails */
.inline-avatars {
display: inline-flex;
align-items: center;
gap: 0.15rem;
flex-wrap: nowrap;
}
/* ────────────────────────────────────────────────────────────────
CANONICAL LEVEL PIC SIZE SYSTEM (RND-243)
Circular tier/level images. Use .level-pic-{N} for all tier image
displays. border-radius: 50% always (NEVER square for level pics).
Hover pops out to 1.5× (more dramatic than profile-pic's 1.2×).
Size scale:
10 → 16px Tiny inline / chip contexts
20 → 24px Widget headers (e.g. karma-widget)
30 → 36px Table row cells
40 → 48px Standard cards, leaderboard table
50 → 72px Feature cards, modals
60 → 96px Hero / large display contexts
──────────────────────────────────────────────────────────────── */
.level-pic-10,
.level-pic-20,
.level-pic-30,
.level-pic-40,
.level-pic-50,
.level-pic-60 {
border-radius: 50%;
border: 1.5px solid var(--avatar-border-color);
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
transition: transform 0.2s ease, box-shadow 0.2s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--muted);
background: var(--cavern);
}
.level-pic-10 { width: 16px; height: 16px; font-size: 0.4rem; }
.level-pic-20 { width: 24px; height: 24px; font-size: 0.5rem; }
.level-pic-30 { width: 36px; height: 36px; font-size: var(--fs-xs); }
.level-pic-40 { width: 48px; height: 48px; font-size: var(--fs-base); }
.level-pic-50 { width: 72px; height: 72px; font-size: var(--fs-lg); }
.level-pic-60 { width: 96px; height: 96px; font-size: var(--fs-xl); }
.level-pic-10 img,
.level-pic-20 img,
.level-pic-30 img,
.level-pic-40 img,
.level-pic-50 img,
.level-pic-60 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hover: 1.5× popout (more dramatic than profile-pic's 1.2×) */
.level-pic-10:hover,
.level-pic-20:hover,
.level-pic-30:hover,
.level-pic-40:hover,
.level-pic-50:hover,
.level-pic-60:hover {
transform: scale(1.5);
z-index: 10;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .level-pic-10:hover,
html[data-theme="light"] .level-pic-20:hover,
html[data-theme="light"] .level-pic-30:hover,
html[data-theme="light"] .level-pic-40:hover,
html[data-theme="light"] .level-pic-50:hover,
html[data-theme="light"] .level-pic-60:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .level-pic-10,
html[data-theme="light"] .level-pic-20,
html[data-theme="light"] .level-pic-30,
html[data-theme="light"] .level-pic-40,
html[data-theme="light"] .level-pic-50,
html[data-theme="light"] .level-pic-60 {
background: #f3f4f6;
}
/* ────────────────────────────────────────────────────────────────── */
/* User cell in table: avatar + name inline */
.sb-user-cell {
display: flex;
align-items: center;
gap: 0.625rem;
min-width: 0;
}
.sb-name {
font-size: var(--fs-base);
font-weight: 600;
color: var(--heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
/* Level badge in table (tier image + name) */
.sb-tier-wrap {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
.sb-tier-badge {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
z-index: 1;
position: relative;
}
.sb-tier-badge:hover {
transform: scale(2.2);
z-index: 10;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .sb-tier-badge:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.sb-tier-name {
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
line-height: 1;
font-weight: 600;
}
/* Trend arrow */
.sb-trend {
text-align: center;
font-size: var(--fs-xs);
line-height: 1;
}
.sb-trend.up { color: #22c55e; }
.sb-trend.down { color: #ef4444; }
.sb-trend.neutral { color: var(--muted); }
/* Your Rank bar (if not in top 10) */
.sb-your-rank {
margin-top: 0.5rem;
padding: 0.5rem 0.625rem;
border: 1px dashed var(--border-mid);
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
color: var(--muted);
}
.sb-your-rank-pos {
font-family: var(--font-mono);
font-weight: 700;
color: var(--ember);
}
/* Also Online section */
.sb-also-online {
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
.sb-also-label {
font-size: var(--fs-xs);
color: var(--muted);
flex-shrink: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sb-also-users {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
.sb-also-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: var(--fs-xs);
}
.sb-also-avatar {
width: 18px;
height: 18px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--cavern), var(--slate));
border: 1px solid var(--avatar-border-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.5rem;
font-weight: 700;
color: var(--muted);
}
.sb-also-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-also-name {
color: var(--heading);
font-weight: 500;
white-space: nowrap;
}
/* Scoreboard row responsive */
@media (max-width: 1100px) {
.bento-scoreboard-row { flex-direction: column; }
.bento-scoreboard-row .bento-wispr { width: 100%; }
}
/* Scoreboard responsive */
@media (max-width: 1100px) {
.sb-layout { flex-direction: column; }
.sb-my-rank {
width: 100%;
flex-direction: row;
align-items: center;
gap: 1rem;
padding-right: 0;
padding-bottom: 1rem;
border-right: none;
border-bottom: 1px solid var(--border-mid);
text-align: left;
justify-content: flex-start;
}
.sb-my-avatar { width: 64px; height: 64px; }
.sb-level-card { width: auto; }
.sb-progress { max-width: 200px; }
}
@media (max-width: 768px) {
.sb-my-rank { flex-wrap: wrap; }
.sb-level-card { display: none; }
.sb-data-table .sb-level-cell { display: none; }
.sb-data-table th:nth-child(4) { display: none; }
}
/* ── Worker of the Day Card ── */
.bento-wotd { border-top: 2px solid var(--ember); position: relative; overflow: hidden; }
.bento-wotd .bento-card-head svg { color: var(--ember); }
.wotd-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0 0;
}
/* Avatar — unified ring via --avatar-border-color (RND-230) */
.wotd-avatar {
width: 88px;
height: 88px;
flex-shrink: 0;
padding: 3px;
border-radius: 12px;
background: var(--avatar-border-color);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 1;
}
.wotd-avatar img {
width: 100%;
height: 100%;
border-radius: 9px;
object-fit: cover;
display: block;
}
.wotd-avatar-ph {
width: 100%;
height: 100%;
border-radius: 9px;
background: linear-gradient(135deg, var(--cavern), var(--slate));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 700;
color: var(--muted);
}
/* Level card in WOTD — centered, text left-aligned */
.bento-wotd .level-card {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
/* Name + KP row (inline) */
.wotd-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.wotd-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--heading);
line-height: 1.2;
}
.wotd-quote {
font-size: var(--fs-xs);
color: var(--muted);
font-style: italic;
line-height: 1.4;
max-width: 280px;
margin: 0.125rem auto 0;
}
/* Gift area — button centered, count floats right without shifting button */
.wotd-gift-area {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 0.5rem;
width: 100%;
}
.wotd-gift-count {
position: absolute;
right: 0;
font-size: var(--fs-xs);
color: var(--muted);
font-family: var(--font-mono);
}
/* Self tooltip — shown when hovering locked button */
.wotd-gift-area .btn[disabled] {
cursor: not-allowed;
}
.wotd-self-hint {
font-size: var(--fs-xs);
color: var(--muted);
font-style: italic;
display: none;
}
.wotd-gift-area:hover .wotd-self-hint {
display: block;
}
/* Coin animation */
.wotd-coin {
position: absolute;
width: 24px;
height: 24px;
pointer-events: none;
z-index: 100;
animation: wotdCoinFall 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@keyframes wotdCoinFall {
0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
20% { transform: translateY(-30px) scale(1.2) rotate(45deg); }
100% { opacity: 0; transform: translateY(120px) scale(0.6) rotate(360deg); }
}
.wotd-loading {
color: var(--muted);
font-size: var(--fs-xs);
padding: 2rem 0;
}
/* ── Choom's Take ─────────────────────────────────────────────── */
.bento-choom {
border-top: 2px solid var(--ember);
display: flex;
flex-direction: column;
}
.bento-choom .bento-card-head svg { color: var(--ember); }
.choom-text {
flex: 1;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
}
.choom-footer {
margin-top: 0.75rem;
}
/* ── Meet the Bots ─────────────────────────────────────────── */
.bento-team {
border-top: 2px solid var(--ember);
position: relative;
}
.bento-team .bento-card-head svg { color: var(--ember); }
.team-roster {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.team-member {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-avatar-wrap {
position: relative;
width: 128px;
height: 128px;
border-radius: 16px;
overflow: hidden;
border: 2px solid var(--border-mid);
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.team-member:hover .team-avatar-wrap {
border-color: var(--ember);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(245, 158, 11, 0.1);
}
.team-avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* CRT scanline sweep on hover */
.team-scanline {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(245, 158, 11, 0.08) 45%,
rgba(245, 158, 11, 0.15) 50%,
rgba(245, 158, 11, 0.08) 55%,
transparent 100%
);
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.team-member:hover .team-scanline {
opacity: 1;
animation: teamScanline 1.5s ease-in-out infinite;
}
@keyframes teamScanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
.team-name {
margin-top: 0.75rem;
font-size: var(--fs-lg);
font-weight: 700;
color: var(--clr-text);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.team-role {
margin-top: 0.2rem;
font-size: var(--fs-xs);
color: var(--clr-text-sub);
letter-spacing: 1px;
text-transform: uppercase;
}
/* ── Global Timestamp Component ───────────────────────────────────────────── */
/* Use class="timestamp" for all date/time meta displays across the platform. */
/* Global rule (RND-248): any | or | */
/* in a "Time" column must use this class — center-aligned in tables. */
.timestamp {
font-size: var(--fs-xs); /* 12px — small, unobtrusive */
color: var(--muted);
font-family: var(--font-mono); /* JetBrains Mono */
white-space: nowrap;
}
/* Table cells + headers: timestamp values are center-aligned */
td.timestamp, th.timestamp { text-align: center; }
/* Activity Feed: right-align Karma column (last column, width:1px) */
#karmaFeedList td:last-child { text-align: right; }
/* ── Global User Stamp — compact user + timestamp badge (RND-650) ────────── */
/* Combines a profile-pic, user name, and optional .timestamp into one inline */
/* badge. Use .user-stamp on the container, .user-stamp-name on the name. */
.user-stamp {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.125rem 0.5rem 0.125rem 0.125rem;
border: 1px solid var(--border-light);
border-radius: 4px 100px 100px 4px;
font-size: var(--fs-xs);
white-space: nowrap;
line-height: 1;
width: fit-content;
transition: border-color 0.15s;
}
.user-stamp:hover {
border-color: var(--border);
}
.user-stamp-name {
font-weight: 600;
text-transform: uppercase;
}
/* Users Page */
.users-page { display: none; }
.users-page.visible { display: block; }
.users-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.users-table thead th {
letter-spacing: 0.15em;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
background: var(--surface-thead);
}
.users-table tbody tr { transition: background 0.15s ease; }
.users-table tbody tr:hover { background: var(--hover-subtle); }
.users-table tbody td {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table-user { display: flex; align-items: center; gap: 1rem; }
.users-table-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 600;
background: var(--cavern);
border: 1.5px solid var(--avatar-border-color);
overflow: hidden;
}
.users-table-avatar img { width: 100%; height: 100%; object-fit: cover; }
.users-table-name { line-height: 1.3; white-space: nowrap; }
.users-table-name .you-label { font-weight: 400; }
.users-table-email { white-space: nowrap; }
.users-table-perms { display: flex; flex-wrap: wrap; gap: 4px; }
/* User table badges → moved to pills.css */
.users-table-status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}
.users-table-status .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.users-table-status.active .dot { background: #10b981; }
.users-table-status.inactive .dot { background: var(--muted); }
.users-online-now { color: #10b981; font-weight: 600; }
.users-loading { text-align: center; padding: 3rem; }
/* Actions Button — same as .btn-icon but 32px + margin-left:auto for row alignment */
/* Permission Toggles */
.perm-list { display: flex; flex-direction: column; gap: 0.75rem; }
.perm-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
border-radius: 10px;
background: var(--hover-subtle);
border: 1px solid var(--border-light);
transition: background 0.2s, border-color 0.2s;
cursor: pointer;
}
.perm-item:has(input:checked) { border-color: var(--border-strong); background: var(--hover-muted); }
.perm-item--admin { border-color: var(--ember); border-width: 1.5px; }
.perm-item--admin .perm-name { color: var(--ember); }
.perm-item--admin:has(input:checked) { border-color: var(--ember); background: rgba(var(--ember-rgb, 255, 107, 0), 0.08); }
html[data-theme="light"] .perm-item--admin:has(input:checked) { background: rgba(var(--ember-rgb, 255, 107, 0), 0.06); }
.perm-search { margin-bottom: 0.75rem; }
.perm-search input {
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--border-light);
background: var(--hover-subtle);
color: var(--text);
font-size: var(--fs-base);
outline: none;
transition: border-color 0.15s;
}
.perm-search input:focus { border-color: var(--ember); }
.perm-search input::placeholder { color: var(--muted); }
.perm-info { flex: 1; min-width: 0; }
.perm-name { font-weight: 600; margin-bottom: 0.15rem; }
.perm-desc { line-height: 1.4; }
.perm-item-disabled { opacity: 0.4; cursor: not-allowed; }
.perm-item-disabled .toggle-track { cursor: not-allowed; pointer-events: none; }
/* Permissions Overview Tab */
.perms-overview { display: flex; flex-direction: column; gap: 1rem; animation: fadeUp 0.5s ease both; }
.perms-overview .info-card-01 { margin-bottom: 0; }
.perms-overview .info-card-01 .perm-key { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 0.5rem; opacity: 0.7; }
.perm-overview-icon { display: inline-flex; align-items: center; }
.perm-overview-icon img { width: 22px; height: 22px; border-radius: 4px; }
/* Admin Apps */
.admin-apps-page { display: none; }
.admin-apps-page.visible { display: block; }
.admin-apps-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.admin-apps-table thead th {
letter-spacing: 0.15em;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
background: var(--surface-thead);
}
.admin-apps-table tbody tr { transition: background 0.15s ease; }
.admin-apps-table tbody tr:hover { background: var(--hover-subtle); }
.admin-apps-table tbody td {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.admin-apps-table tbody tr:last-child td { border-bottom: none; }
.admin-apps-icon-cell {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.admin-apps-icon-cell img { width: 100%; height: 100%; object-fit: cover; }
.admin-apps-icon-cell svg { width: 22px; height: 22px; }
.admin-apps-name { font-weight: 600; }
.admin-apps-loading { text-align: center; padding: 2rem !important; }
.admin-apps-drag-handle { cursor: grab; padding: 0 0.25rem; user-select: none; }
.admin-apps-drag-handle:active { cursor: grabbing; }
.admin-apps-drag-handle svg { width: 16px; height: 16px; opacity: 0.4; transition: opacity 0.15s ease; }
.admin-apps-table tbody tr:hover .admin-apps-drag-handle svg { opacity: 0.8; }
.admin-apps-table tbody tr.dragging { opacity: 0.4; }
.admin-apps-table tbody tr.drag-over { border-top: 2px solid var(--ember); }
/* App Edit Modal */
.app-edit-icon-section { display: flex; align-items: flex-start; gap: 1.25rem; }
.app-edit-icon-preview {
width: 96px;
height: 96px;
border-radius: 14px;
background: var(--bg-ember-subtle);
border: 2px dashed var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.app-edit-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.app-edit-icon-preview svg { width: 32px; height: 32px; }
.app-edit-icon-controls { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; }
.app-edit-upload-status { font-weight: 500; min-height: 1em; }
/* ── Activity Logs Page ─────────────────────────── */
.logs-page { display: none; }
.logs-page.visible { display: block; }
.logs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.logs-table thead th {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--border);
background: var(--surface-thead);
color: var(--muted);
text-align: left;
}
.logs-table tbody tr { transition: background 0.15s ease; }
.logs-table tbody tr:hover { background: var(--hover-subtle); }
.logs-table tbody td {
padding: 0.7rem 1.25rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.logs-table tbody tr:last-child td { border-bottom: none; }
.logs-loading { text-align: center; padding: 2rem !important; color: var(--muted); }
/* Log cell classes — replaces inline styles (RND-301) */
.log-ts-col { width: 160px; }
.log-ts { white-space: nowrap; font-size: var(--fs-xs); color: var(--muted); }
.log-app { display: inline-flex; align-items: center; gap: 6px; }
.log-detail { font-size: var(--fs-xs); color: var(--muted); }
.log-ip { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--muted); }
/* ── Karma Settings Page ─────────────────────────── */
.karma-settings-page { display: none; }
.karma-settings-page.visible { display: block; }
/* ── KP Admin tab — inline adjustment inputs ──────── */
.kp-admin-delta { text-align: right; -moz-appearance: textfield; }
.kp-admin-delta::-webkit-inner-spin-button,
.kp-admin-delta::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* ── Karma Settings — table column widths ─────────── */
.ks-col-w36 { width: 36px; }
.ks-col-w44 { width: 44px; }
.ks-col-w52 { width: 52px; }
.ks-col-w70 { width: 70px; }
.ks-col-w80 { width: 80px; }
.ks-col-w90 { width: 90px; }
.ks-col-w100 { width: 100px; }
.ks-col-w115 { width: 115px; }
.ks-col-w120 { width: 120px; }
.ks-col-w130 { width: 130px; }
.ks-col-w160 { width: 160px; }
.ks-col-w200 { width: 200px; }
/* ── Karma Settings — cell & row utilities ────────── */
.ks-slug { font-size: var(--fs-xs); color: var(--muted); font-family: monospace; }
.ks-mono-xs { font-family: monospace; font-size: var(--fs-xs); }
.ks-mono-bold { font-weight: 700; font-family: monospace; font-size: var(--fs-xs); }
.ks-acts-wrap { display: flex; gap: 0.25rem; justify-content: flex-end; }
.ks-cell-apply { text-align: right; padding: 0.4rem 0.5rem; }
.ks-desc-cell { max-width: 200px; white-space: normal; line-height: 1.3; }
.ks-filter-era { width: auto; min-width: 120px; font-size: var(--fs-xs); padding: 0.35rem 0.5rem; }
/* ── Image Editor Component ──────────────────────── */
/* Unified component: preview + upload + AI prompt + generate btn */
/* Variants: --round (levels) and --square (badges) */
.img-editor {
display: flex; flex-direction: column;
align-items: center; gap: 0.75rem;
}
.img-editor-preview {
width: 160px; height: 160px;
border: 2px dashed var(--border-mid);
display: flex; align-items: center; justify-content: center;
overflow: hidden; background: var(--surface-raised);
cursor: pointer; transition: border-color 0.2s;
}
.img-editor-preview:hover { border-color: var(--ember); }
.img-editor-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-editor-preview svg { width: 36px; height: 36px; color: var(--muted); }
.img-editor-preview--round { border-radius: 50%; }
.img-editor-preview--round img { border-radius: 50%; }
.img-editor-preview--square { border-radius: var(--radius-lg); }
.img-editor-hint { font-size: 0.65rem; color: var(--muted); text-align: center; }
.img-editor-upload {
display: flex; align-items: center; gap: 0.35rem;
font-size: 0.7rem; color: var(--muted); cursor: pointer;
transition: color 0.2s;
}
.img-editor-upload:hover { color: var(--ember); }
.img-editor-upload svg { width: 14px; height: 14px; }
.img-editor-ai {
width: 100%; padding-top: 0.75rem;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 0.5rem;
}
.img-editor-ai label {
font-size: 0.7rem; font-weight: 600;
color: var(--muted); text-transform: uppercase;
letter-spacing: 0.04em;
display: flex; align-items: center; gap: 0.35rem;
}
.img-editor-ai label svg { width: 13px; height: 13px; color: var(--ember); }
.img-editor-prompt {
width: 100%; min-height: 60px; max-height: 120px;
resize: vertical;
}
.img-editor-generate { align-self: stretch; }
.img-editor-generate .spinner {
display: inline-block; width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff; border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
html[data-theme="light"] .img-editor-preview { border-color: #d1d5db; background: #f9fafb; }
@media (max-width: 600px) {
.img-editor-preview { width: 120px; height: 120px; }
}
/* ── Badge Edit Modal Layout (2-column) ──────────── */
.badge-edit-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.25rem;
}
.badge-edit-right {
display: flex; flex-direction: column;
gap: 0.75rem;
}
#badgeEditModal .form-group { margin-bottom: 0; }
.badge-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.badge-edit-toggles {
display: flex; flex-direction: column; gap: 0.75rem;
margin-top: 0.75rem; padding-top: 0.75rem;
border-top: 1px solid var(--border);
}
.badge-edit-toggles .s-toggle-row { padding: 0.35rem 0; }
.badge-edit-toggles .s-toggle-row:first-child { padding-top: 0; }
.badge-edit-toggles .s-toggle-label { font-weight: 600; font-size: 0.8rem; }
.badge-edit-toggles .s-toggle-desc { font-size: 0.65rem; }
/* Responsive: stack on narrow viewports */
@media (max-width: 600px) {
.badge-edit-layout { grid-template-columns: 1fr; }
}
/* ── Badge Management Table ───────────────────────── */
.badge-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.badge-thumb-placeholder {
width: 44px; height: 44px; border-radius: 8px;
background: var(--surface-raised); display: flex;
align-items: center; justify-content: center;
border: 1px solid var(--border);
}
.badge-thumb-placeholder svg { width: 20px; height: 20px; color: var(--muted); opacity: 0.4; }
html[data-theme="light"] .badge-thumb-placeholder { background: #f3f4f6; border-color: #e5e7eb; }
/* ── Level Management Table ─────────────────────────── */
.tier-thumb {
width: 36px; height: 36px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--border);
}
.tier-thumb-placeholder {
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--fs-sm); color: #fff;
border: 2px solid var(--border);
}
.tier-mgmt-toolbar-inline {
display: flex; align-items: center; gap: 0.5rem;
}
/* Era pill colors — used in level table + level edit modal */
.tier-era-pill {
font-size: 0.65rem; font-weight: 600;
padding: 0.15rem 0.45rem; border-radius: 6px;
white-space: nowrap;
}
.tier-era-scribbles { background: rgba(156,163,175,0.2); color: #9ca3af; }
.tier-era-watercolor { background: rgba(96,165,250,0.15); color: #60a5fa; }
.tier-era-comic { background: rgba(248,113,113,0.15); color: #f87171; }
.tier-era-oil_painting { background: rgba(251,191,36,0.15); color: #fbbf24; }
.tier-era-hyper_3d { background: rgba(34,211,238,0.12); color: #22d3ee; }
.tier-era-epic_fantasy { background: rgba(168,85,247,0.15); color: #a855f7; }
/* Level thumb placeholder gradient per era */
.tier-thumb-placeholder.tier-era-scribbles { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.tier-thumb-placeholder.tier-era-watercolor { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.tier-thumb-placeholder.tier-era-comic { background: linear-gradient(135deg, #ef4444, #f87171); }
.tier-thumb-placeholder.tier-era-oil_painting { background: linear-gradient(135deg, #d97706, #fbbf24); }
.tier-thumb-placeholder.tier-era-hyper_3d { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.tier-thumb-placeholder.tier-era-epic_fantasy { background: linear-gradient(135deg, #7c3aed, #a855f7); }
/* ── Level Edit Modal Layout ────────────────────────── */
.tier-edit-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.25rem;
}
.tier-edit-right {
display: flex; flex-direction: column;
gap: 0.75rem;
}
.tier-edit-info {
display: flex; align-items: center; gap: 0.5rem;
flex-wrap: wrap; margin-bottom: 0.25rem;
}
.tier-edit-badge {
font-size: 0.65rem; font-weight: 600;
padding: 0.15rem 0.45rem; border-radius: 6px;
}
.tier-edit-level {
font-weight: 700; font-size: 0.85rem;
color: var(--heading);
}
.tier-edit-kp {
font-family: var(--font-mono);
font-size: 0.75rem; color: var(--ember);
}
/* Responsive: stack on narrow viewports */
@media (max-width: 540px) {
.tier-edit-layout { grid-template-columns: 1fr; }
}
html[data-theme="light"] .tier-thumb { border-color: #e5e7eb; }
html[data-theme="light"] .tier-thumb-placeholder { border-color: #e5e7eb; }
html[data-theme="light"] .tier-era-scribbles { background: rgba(107,114,128,0.12); color: #6b7280; }
html[data-theme="light"] .tier-era-watercolor { background: rgba(59,130,246,0.1); color: #2563eb; }
html[data-theme="light"] .tier-era-comic { background: rgba(239,68,68,0.1); color: #dc2626; }
html[data-theme="light"] .tier-era-oil_painting { background: rgba(217,119,6,0.1); color: #b45309; }
html[data-theme="light"] .tier-era-hyper_3d { background: rgba(8,145,178,0.1); color: #0e7490; }
html[data-theme="light"] .tier-era-epic_fantasy { background: rgba(124,58,237,0.1); color: #6d28d9; }
/* ══════════════════════════════════════════════════════════════
KARMA WIDGET — Sticky floating widget (bottom-right, global)
══════════════════════════════════════════════════════════════ */
/* Karma Widget — flush bottom-right, edge-aligned */
.karma-widget {
position: fixed;
bottom: 0;
right: 0;
z-index: 1500;
background: var(--deep);
border: 1px solid var(--border);
border-bottom: none;
border-right: none;
border-radius: 10px 0 0 0;
box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.3);
min-width: 140px;
max-width: 260px;
overflow: hidden;
transition: all 0.25s ease;
font-size: 0.875rem;
}
.kw-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.kw-header:hover { background: var(--trench); }
/* Avatar — only visible when expanded, uses canonical .profile-pic-20 */
.kw-avatar {
display: none;
}
.kw-expanded .kw-avatar { display: flex; }
.kw-total {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
color: var(--ember);
}
/* Karma symbol inline image */
.karma-symbol {
vertical-align: middle;
flex-shrink: 0;
}
.kw-toggle {
margin-left: auto;
color: var(--muted);
font-size: var(--fs-2xl);
line-height: 1;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.kw-expanded .kw-toggle { transform: rotate(180deg); }
.kw-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.kw-expanded .kw-body {
max-height: 400px;
border-top: 1px solid var(--border);
}
.kw-section { padding: 0.5rem 0.875rem; }
.kw-section + .kw-section { border-top: 1px solid var(--border); }
.kw-section-title {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 0.375rem;
}
.kw-tx {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.1875rem 0;
font-size: 0.8125rem;
}
.kw-tx-name {
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.kw-tx-pts {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.75rem;
flex-shrink: 0;
margin-left: 0.5rem;
}
.kw-positive .kw-tx-pts { color: #22c55e; }
.kw-negative .kw-tx-pts { color: #ef4444; }
/* Light theme overrides */
html[data-theme="light"] .karma-widget {
background: #fff;
border-color: #e5e7eb;
box-shadow: -4px -4px 16px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .kw-header:hover { background: #f9fafb; }
/* --- Level image (global .level-pic-20 used directly) --- */
/* Expanded state: grow to 32px — keep default grey border */
.kw-expanded .level-pic-20 {
width: 32px;
height: 32px;
}
/* --- Level info row (name + progress) — visible when expanded --- */
.kw-tier-info {
display: none;
padding: 0 0.875rem 0.375rem;
gap: 0.375rem;
flex-direction: column;
}
.kw-expanded .kw-tier-info { display: flex; }
.kw-tier-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.6875rem;
color: var(--muted);
line-height: 1;
}
.kw-tier-name {
font-weight: 600;
color: var(--text);
}
.kw-tier-kp {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--steel);
}
/* Mini progress bar */
.kw-progress {
width: 100%;
height: 3px;
background: var(--cavern);
border-radius: 2px;
overflow: hidden;
}
.kw-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ember), var(--flame));
border-radius: 2px;
transition: width 0.6s ease;
}
/* Max level — full gold */
.kw-progress.kw-maxed .kw-progress-fill {
background: linear-gradient(90deg, var(--ember), #fbbf24);
}
/* --- Badge slideout bar --- */
.kw-badges {
display: none;
padding: 0.375rem 0.875rem 0.5rem;
border-top: 1px solid var(--border);
}
.kw-expanded .kw-badges { display: block; }
.kw-badges-title {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 0.25rem;
}
.kw-badge-row {
display: flex;
align-items: center;
gap: 0.375rem;
overflow: hidden;
transition: max-height 0.3s ease;
max-height: 36px;
}
.kw-badge-row.kw-badges-expanded {
flex-wrap: wrap;
max-height: 200px;
overflow-y: auto;
}
.kw-badge-item {
width: 28px;
height: 28px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
cursor: pointer;
border: 1px solid var(--border);
transition: all 0.15s ease;
position: relative;
}
.kw-badge-item:hover {
border-color: var(--ember);
transform: scale(1.15);
z-index: 2;
}
.kw-badge-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Badge placeholder when no image */
.kw-badge-item.kw-badge-noimg {
background: var(--cavern);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
color: var(--muted);
}
/* Expand/collapse toggle */
.kw-badge-more {
width: 28px;
height: 28px;
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
background: var(--cavern);
border: 1px solid var(--border);
font-size: 0.75rem;
font-weight: 700;
transition: all 0.15s ease;
}
.kw-badge-more:hover {
color: var(--ember);
border-color: var(--ember);
}
/* No badges state */
.kw-no-badges {
font-size: 0.6875rem;
color: var(--steel);
font-style: italic;
}
/* Tooltip for level hover — uses global .level-pic-20:hover (scale 1.5×, no custom border) */
.kw-tier-tooltip {
cursor: pointer;
}
/* Light theme overrides for new elements */
html[data-theme="light"] .kw-progress { background: #e5e7eb; }
html[data-theme="light"] .kw-badge-item { border-color: #e5e7eb; }
html[data-theme="light"] .kw-badge-more { background: #f3f4f6; border-color: #e5e7eb; }
html[data-theme="light"] .kw-badge-item.kw-badge-noimg { background: #f3f4f6; }
/* Mobile: slightly smaller */
@media (max-width: 768px) {
.karma-widget { min-width: 120px; }
.kw-total { font-size: 1rem; }
.kw-header { padding: 0.4rem 0.75rem; }
/* .kw-avatar sizing handled by .profile-pic-20 */
.kw-tier-tooltip .level-pic-20 { width: 20px; height: 20px; }
.kw-expanded .kw-tier-tooltip .level-pic-20 { width: 28px; height: 28px; }
.kw-badge-item { width: 24px; height: 24px; }
.kw-badge-more { width: 24px; height: 24px; }
}
/* Bug Tracker styles → see bug-tracker.css */
/* Profile Page */
.profile-page { display: none; }
.profile-page.visible { display: block; }
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 1rem;
max-width: 960px;
}
.profile-col { display: flex; flex-direction: column; gap: 1rem; }
.profile-section { animation: fadeUp 0.5s ease both; }
.profile-col:first-child .profile-section:nth-child(1) { animation-delay: 0.05s; }
.profile-col:first-child .profile-section:nth-child(2) { animation-delay: 0.15s; }
.profile-col:last-child .profile-section:nth-child(1) { animation-delay: 0.1s; }
.profile-col:last-child .profile-section:nth-child(2) { animation-delay: 0.15s; }
.profile-section.full-width { grid-column: 1 / -1; }
.s-panel {
background: var(--surface-card);
border: 1px solid var(--border-mid);
border-radius: 16px;
overflow: hidden;
}
.s-panel-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.s-panel-header svg { width: 16px; height: 16px; flex-shrink: 0; }
.s-panel-header span { font-weight: 600; }
.s-panel-body { padding: 1.25rem; }
/* Profile Hero */
.profile-hero {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.profile-avatar {
width: 72px;
height: 72px;
border-radius: 16px;
background: linear-gradient(135deg, var(--cavern), var(--slate));
border: 2px solid var(--avatar-border-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-meta { flex: 1; min-width: 0; }
.profile-meta h3 { font-weight: 700; margin-bottom: 0.5rem; }
.profile-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Profile badges → moved to pills.css */
/* Profile Form */
.s-field { margin-bottom: 1.25rem; }
.s-field:last-child { margin-bottom: 0; }
.s-label {
display: block;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.s-input {
width: 100%;
padding: 0.75rem 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-heavy);
outline: none;
transition: border-color 0.3s ease;
color: inherit;
font: inherit;
}
.s-input:focus { border-bottom-color: var(--ember); }
.s-input:read-only { cursor: default; }
.s-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.s-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
/* Connections */
.connection-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid var(--border-light);
}
.connection-row:last-child { border-bottom: none; }
.connection-info { display: flex; align-items: center; gap: 1rem; }
.connection-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.connection-icon svg { width: 20px; height: 20px; }
.connection-name { font-weight: 600; line-height: 1.2; }
.connection-status.connected { background: var(--bg-green-mid); }
.connection-status.disconnected { background: var(--badge-muted); }
/* Toggle Row */
.s-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
}
.s-toggle-row > div:first-child { flex: 1; min-width: 0; }
.s-toggle-desc { margin-top: 0.15rem; }
.pref-select {
padding: 0.25rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--border);
background-color: var(--bg-secondary);
outline: none;
cursor: pointer;
min-width: 80px;
flex-shrink: 0;
transition: border-color 0.2s;
color: inherit;
font: inherit;
}
.pref-select:focus { border-color: var(--accent); }
.pref-select option { background: var(--bg-primary); }
/* Colorbox */
.colorbox {
position: relative;
background: var(--bg-sky-subtle);
border-left: 3px solid var(--info);
border-radius: 0 12px 12px 0;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
animation: fadeUp 0.5s ease 0.2s both;
line-height: 1.55;
font-size: 16px;
color: var(--muted);
}
.colorbox kbd {
display: inline-block;
font-weight: 500;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.18);
border-radius: 4px;
padding: 1px 6px;
vertical-align: 1px;
color: var(--bright);
font-size: 11px;
}
/* (Old .changelog-card/list/item CSS removed — replaced by .bento-changelog-* in Dashboard v2) */
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — Mobile breakpoints
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.dealer-info-grid { grid-template-columns: 1fr; }
/* Shrimp editor responsive */
.main-container { flex-direction: column; height: calc(100vh - var(--header-h)); }
.editor-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-textarea { flex: 1; min-height: 200px; overflow-y: auto; }
.editor-footer { flex-shrink: 0; flex-wrap: wrap; gap: 0.5rem; }
.editor-footer .btn { flex: 1; min-width: 120px; }
.editor-footer-right { justify-content: center; }
.url-display { flex-basis: 100%; order: -1; }
}
@media (max-width: 768px) {
.content-wrapper { padding: 1rem; }
.content-area { padding: 1rem; }
.content-wrapper .content-area { padding: 0; }
.filter-bar { flex-direction: column; align-items: stretch; }
.filter-bar input { min-width: 0; }
.result-count { margin-left: 0; }
.data-table th, .data-table td { padding: 0.5rem 0.75rem; }
.controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.controls input { min-width: 0; }
/* Dashboard content */
.content-grid { grid-template-columns: 1fr; }
.user-info { display: none; }
.main { padding: 1.25rem; }
.zoom-group { display: none; }
.team-grid { grid-template-columns: 1fr; }
.profile-grid { grid-template-columns: 1fr; }
.profile-col { gap: 0.75rem; }
.s-row { grid-template-columns: 1fr; }
.profile-hero { flex-direction: column; text-align: center; }
/* App header: less padding on mobile */
.header { padding: 0 1rem; margin-bottom: 15px; }
.header h2 { font-size: 1rem; }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; }
.apps-grid { grid-template-columns: 1fr; }
.avatar-chevron { display: none; }
/* Scoreboard: compact for small screens */
.sb-my-rank { display: none; }
.sb-board-head span:first-of-type { font-size: 0.875rem; }
.karma-lb-kp.kp-sm { font-size: 0.75rem; min-width: 56px; }
}
/* ══════════════════════════════════════════════════════════════
Desktop Blocker — temporary mobile/tablet block
Shows a "Desktop Only" overlay on viewports ≤ 1024px
══════════════════════════════════════════════════════════════ */
.desktop-blocker {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--abyss, #151521);
font-family: 'Roboto', -apple-system, sans-serif;
overflow: hidden;
}
@media (max-width: 1024px) {
.desktop-blocker { display: flex; }
}
/* Ambient gradient overlay */
.desktop-blocker::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(245, 158, 11, 0.04) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 20% 80%, rgba(15, 15, 30, 0.6) 0%, transparent 50%),
radial-gradient(ellipse 60% 60% at 80% 80%, rgba(15, 15, 30, 0.6) 0%, transparent 50%);
pointer-events: none;
}
/* Sonar rings via animated box-shadow */
.db-pulse {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(245, 158, 11, 0.3);
animation: db-sonar 5s ease-out infinite;
pointer-events: none;
}
@keyframes db-sonar {
0% {
box-shadow:
0 0 0 0 rgba(245, 158, 11, 0.12),
0 0 0 0 rgba(245, 158, 11, 0.08),
0 0 0 0 rgba(245, 158, 11, 0.04);
}
100% {
box-shadow:
0 0 0 100px rgba(245, 158, 11, 0),
0 0 0 200px rgba(245, 158, 11, 0),
0 0 0 300px rgba(245, 158, 11, 0);
}
}
/* Content card */
.db-body {
position: relative;
z-index: 1;
text-align: center;
padding: 2rem;
max-width: 340px;
}
.db-icon {
width: 56px;
height: 56px;
stroke: var(--ember, #f59e0b);
margin-bottom: 1.25rem;
filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.25));
animation: db-float 3s ease-in-out infinite;
}
@keyframes db-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.db-body h1 {
font-size: 1.75rem;
font-weight: 700;
color: var(--heading, #e8e8e8);
margin-bottom: 0.625rem;
letter-spacing: -0.02em;
}
.db-body p {
font-size: 1rem;
color: var(--muted, #5a5a7a);
line-height: 1.65;
}
/* Depth indicator at bottom */
.db-depth {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted, #5a5a7a);
opacity: 0.5;
z-index: 1;
white-space: nowrap;
}
.db-depth-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember, #f59e0b);
animation: db-blink 2s ease-in-out infinite;
}
@keyframes db-blink {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Light theme overrides */
html[data-theme="light"] .desktop-blocker {
background: var(--abyss, #f8fafc);
}
html[data-theme="light"] .desktop-blocker::before {
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 20% 80%, rgba(219, 234, 254, 0.3) 0%, transparent 50%),
radial-gradient(ellipse 60% 60% at 80% 80%, rgba(219, 234, 254, 0.3) 0%, transparent 50%);
}
html[data-theme="light"] .db-pulse {
background: rgba(245, 158, 11, 0.4);
}
/* ══════════════════════════════════════════════════════════════
UTILITY CLASSES
══════════════════════════════════════════════════════════════ */
/* Text */
.text-muted { color: var(--muted); }
.text-heading { color: var(--heading); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: var(--danger); }
/* Overline label — uppercase micro-label (e.g. "How to earn", section labels) */
.text-overline {
display: block;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--heading);
margin-bottom: 0.3rem;
}
.text-success { color: var(--success); }
.text-warning { color: var(--warning, #eab308); }
.text-ember { color: var(--ember); }
.text-xs { font-size: 0.72rem; }
.text-sm { font-size: 0.8125rem; }
.text-mono { font-family: var(--font-mono); }
/* Display & Sizing */
.d-none { display: none; }
.w-full { width: 100%; }
.w-short { width: 120px; }
/* Spacing */
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: 1rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
/* Layout */
.btn-group { display: flex; gap: 0.5rem; align-items: center; }
/* Typography */
.heading-sub { font-weight: 400; font-size: 0.75em; }
.stat-number { font-size: 1.5rem; font-weight: 700; color: var(--ember); }
/* Layout */
.flex-row-wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
.card-half { flex: 1; min-width: 320px; }
/* Card descriptions */
.card-desc { margin-bottom: 1rem; }
.card-desc-sm { margin-bottom: 0.75rem; }
/* Form utilities */
.form-row { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.form-field { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; color: var(--muted); }
.form-group-inline { flex: 1; margin-bottom: 0; }
/* Links */
.link-row { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.ext-link { color: var(--ember); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.ext-link:hover { text-decoration: underline; }
/* Icons */
.icon-md { width: 20px; height: 20px; }
/* Table column widths */
.col-order { width: 60px; }
.col-actions { width: 120px; }
.col-checkbox { width: 36px; }
.col-retries { width: 60px; }
.col-min { width: 1%; }
/* Text modifiers */
.text-dimmed { opacity: 0.5; }
.text-bold { font-weight: 600; }
/* Clickable row */
.clickable { cursor: pointer; }
/* Inactive row (settings tables etc.) */
.row-inactive { opacity: 0.5; }
/* ── Batch Table Components ────────────────────────────────── */
/* ScrapingBee credits pill (yellow) */
.credits-pill {
display: inline-block; padding: 2px 8px; border-radius: 10px;
background: #fdc203; color: #1a1a1a;
font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em;
}
/* Harvest data bar */
.harvest-bar {
display: flex; gap: 12px; font-size: 0.8rem;
flex-wrap: wrap; align-items: center;
}
.harvest-item {
color: var(--muted); cursor: help; white-space: nowrap;
display: inline-flex; align-items: center; gap: 3px;
}
.harvest-active { color: var(--ember); }
/* Harvest sub-row cell */
.harvest-sub-cell { padding: 4px 12px 8px; border-top: none; }
/* Changes highlight (new/updated counts) */
.changes-highlight { color: var(--ember); font-weight: 600; }
/* Detail expansion cell */
.detail-cell {
padding: 8px 14px 12px; border-top: none;
background: var(--abyss);
}
/* Empty table cell */
.empty-cell { color: var(--muted); padding: 1rem; }
/* Retry badge (small) */
.retry-badge-sm { color: var(--muted); font-size: 11px; }
/* Error preview box */
.error-preview {
margin-top: 6px; padding: 6px 10px;
background: rgba(239,68,68,0.08);
border-left: 3px solid var(--danger);
border-radius: 4px; font-size: 0.72rem;
color: var(--danger); font-family: var(--font-mono);
}
/* Alert boxes (failed/unreadable dealers) */
.alert-box {
padding: 6px 10px; border-radius: 4px;
font-size: 0.72rem; line-height: 1.8;
}
.alert-danger {
background: rgba(239,68,68,0.06);
border-left: 3px solid var(--danger);
}
.alert-warning {
background: rgba(234,179,8,0.06);
border-left: 3px solid var(--warning, #eab308);
}
.alert-label { font-weight: 600; }
.mt-xs { margin-top: 6px; }
/* Dot separator */
.dot-sep { color: var(--muted); font-size: 0.72rem; }
/* Failed/warning dealer links */
.failed-link { color: var(--danger); text-decoration: none; font-size: 0.72rem; }
.warning-link { color: var(--warning, #eab308); text-decoration: none; font-size: 0.72rem; }
/* Log viewer */
.log-viewer {
font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.6;
background: var(--trench); border-radius: 6px;
padding: 10px 12px; max-height: 320px; overflow-y: auto;
color: var(--text-secondary); white-space: pre-wrap;
word-break: break-all; margin: 0;
}
.log-error { color: var(--danger); }
.log-warn { color: var(--warning, #eab308); }
.log-success { color: var(--success, #22c55e); }
/* Pagination ellipsis */
.page-ellipsis { color: var(--muted); padding: 0 0.25rem; }
/* Icons */
.icon-sm { width: 14px; height: 14px; }
.icon-inline { vertical-align: -2px; }
/* Customer ID cell */
.custid-cell { white-space: nowrap; opacity: 0.6; }
/* Button group (small) */
.btn-group-sm { display: flex; gap: 0.375rem; }
/* Spinner inline variant */
.spinner-inline {
width: 14px; height: 14px; border-width: 2px;
display: inline-block; vertical-align: middle; margin-right: 6px;
}
/* (Karma Dashboard Card — removed, replaced by bento-karma in v2) */
/* ══════════════════════════════════════════════════════════════
BENTO DASHBOARD — Command Center Grid
All widgets on one flat 3-column bento grid.
Prefix: .bento-
══════════════════════════════════════════════════════════════ */
/* ── Shared Card Base ─────────────────────────────────────────── */
.bento-card {
background: var(--bento-bg);
border: 1px solid var(--border-mid);
border-radius: 14px;
padding: 1.25rem;
min-width: 0;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bento-card:hover {
border-color: var(--border-heavy);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .bento-card {
border-color: #e5e7eb;
}
html[data-theme="light"] .bento-card:hover {
border-color: #d1d5db;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
/* ── Card Header Pattern (shared) ─────────────────────────────── */
.bento-card-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.bento-card-head svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.bento-card-head span:not(.pill) {
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
/* ── Refresh Button (shared) ──────────────────────────────────── */
.bento-refresh {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-left: auto;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--muted);
opacity: 0.45;
transition: all 0.2s ease;
border-radius: 6px;
}
.bento-refresh:hover { opacity: 1; background: var(--hover-subtle); }
.bento-refresh svg { width: 14px; height: 14px; }
.bento-refresh.syncing svg { animation: beeSpin 0.8s linear infinite; }
@keyframes beeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ── Global Text Links ────────────────────────────────────────── */
/* Two variants: .link-same (same tab, →) and .link-ext (new tab, ↗) */
.text-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem; /* 14px — between --fs-xs and --fs-base */
font-weight: 600;
color: var(--ember);
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
}
.text-link:hover { color: var(--flame); }
.text-link svg { flex-shrink: 0; }
/* Bento header link sits on the right */
.bento-card-head .text-link { margin-left: auto; }
/* .link-same — same-tab navigation, paired with a right-arrow (→) SVG icon */
/* .link-ext — new-tab navigation (target="_blank"), paired with external-link (↗) SVG icon */
/* Both variants inherit .text-link base styles; icon in HTML differentiates them visually */
/* News widget: source link sits below the article list */
.nw-col > .text-link { margin-top: 0.75rem; }
/* ── Accent Top-Borders ───────────────────────────────────────── */
.bento-card.bento-karma { border-top: 2px solid var(--ember); }
.bento-clock { border-top: 2px solid #60a5fa; }
.bento-btc { border-top: 2px solid #f7931a; }
.bento-crawler { border-top: 2px solid #22c55e; }
.bento-watchdog { border-top: 2px solid #a78bfa; }
.bento-news { border-top: 2px solid #c2410c; }
.bento-changelog { border-top: 2px solid var(--border-heavy); }
/* ── Staggered Reveal ─────────────────────────────────────────── */
.bento-grid > :nth-child(1) { animation: fadeUp 0.5s ease 0.00s both; }
.bento-grid > :nth-child(2) { animation: fadeUp 0.5s ease 0.05s both; }
.bento-grid > :nth-child(3) { animation: fadeUp 0.5s ease 0.10s both; }
.bento-grid > :nth-child(4) { animation: fadeUp 0.5s ease 0.15s both; }
.bento-grid > :nth-child(5) { animation: fadeUp 0.5s ease 0.20s both; }
.bento-grid > :nth-child(6) { animation: fadeUp 0.5s ease 0.25s both; }
.bento-grid > :nth-child(7) { animation: fadeUp 0.5s ease 0.30s both; }
.bento-grid > :nth-child(8) { animation: fadeUp 0.5s ease 0.35s both; }
.bento-grid > :nth-child(9) { animation: fadeUp 0.5s ease 0.40s both; }
.bento-grid > :nth-child(10) { animation: fadeUp 0.5s ease 0.45s both; }
/* (Karma Hero Widget removed — replaced by Competitive Scoreboard above) */
/* ── Clock Widget ─────────────────────────────────────────────── */
.bento-clock .bento-card-head svg { color: #60a5fa; }
.bento-clock-time {
font-family: var(--font-mono);
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--heading);
line-height: 1;
margin-bottom: 0.375rem;
}
.bento-clock-date {
font-size: var(--fs-base);
color: var(--text);
margin-bottom: 0.125rem;
}
.bento-clock-tz {
font-size: var(--fs-xs);
color: var(--muted);
}
/* ── Bitcoin Widget ───────────────────────────────────────────── */
.bento-btc .bento-card-head svg { color: #f7931a; }
.bento-btc-price {
font-family: var(--font-mono);
font-size: var(--fs-3xl);
font-weight: 800;
color: var(--heading);
line-height: 1;
margin-bottom: 0.375rem;
}
.bento-btc-change {
display: flex;
align-items: baseline;
gap: 0.375rem;
margin-bottom: 0.25rem;
}
.bento-btc-pct {
font-family: var(--font-mono);
font-size: var(--fs-base);
font-weight: 700;
}
.bento-btc-pct.up { color: #22c55e; }
.bento-btc-pct.down { color: #ef4444; }
.bento-btc-period {
font-size: var(--fs-xs);
color: var(--muted);
}
.bento-btc-updated {
font-size: var(--fs-xs);
color: var(--muted);
opacity: 0.5;
}
/* ── ScrapingBee Widget (Yellow Identity) ─────────────────────── */
.bento-sbee {
background: #fdc203 !important;
border-color: #d4a300 !important;
border-top: 2px solid #d4a300;
color: #1a1400;
}
.bento-sbee:hover {
border-color: #b88e00 !important;
box-shadow: 0 4px 24px rgba(253, 194, 3, 0.15);
}
html[data-theme="light"] .bento-sbee {
background: #fdc203 !important;
border-color: #d4a300 !important;
}
.bento-sbee-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.bento-sbee .bento-card-head span { color: #1a1400; }
.bento-sbee-sync {
color: #1a1400;
opacity: 0.45;
}
.bento-sbee-sync:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.bento-sbee-credits {
display: flex;
align-items: baseline;
gap: 3px;
font-family: var(--font-mono);
line-height: 1;
margin-bottom: 0.5rem;
}
.bento-sbee-used {
font-size: var(--fs-xl);
font-weight: 800;
color: #1a1400;
}
.bento-sbee-sep {
font-size: var(--fs-base);
color: #1a1400;
opacity: 0.3;
}
.bento-sbee-total {
font-size: var(--fs-base);
font-weight: 600;
color: #1a1400;
opacity: 0.5;
}
.bento-sbee-bar {
height: 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.12);
overflow: hidden;
margin-bottom: 0.5rem;
}
.bento-sbee-bar-fill {
height: 100%;
border-radius: 3px;
background: #1a1400;
transition: width 0.6s ease;
min-width: 2px;
}
.bento-sbee-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.bento-sbee-remaining {
font-size: var(--fs-xs);
font-weight: 600;
color: #1a1400;
opacity: 0.6;
}
.bento-sbee-updated {
font-size: var(--fs-xs);
font-weight: 500;
color: #1a1400;
opacity: 0.35;
}
/* ── Brevo Email Widget ──────────────────────────────────────── */
.bento-card.bento-brevo { border-top: 2px solid #0B996E; }
.bento-brevo {
background: #0B996E !important;
border-color: #098558 !important;
border-top: 2px solid #098558;
color: #fff;
}
.bento-brevo:hover {
border-color: #077a4e !important;
box-shadow: 0 4px 24px rgba(11, 153, 110, 0.2);
}
html[data-theme="light"] .bento-brevo {
background: #0B996E !important;
border-color: #098558 !important;
}
.bento-brevo .bento-card-head span { color: #fff; }
.bento-brevo .bento-card-head svg { color: #fff; }
.bento-brevo-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.bento-brevo-sync {
color: #fff;
opacity: 0.5;
}
.bento-brevo-sync:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.bento-brevo-credits {
display: flex;
align-items: baseline;
gap: 3px;
font-family: var(--font-mono);
line-height: 1;
margin-bottom: 0.5rem;
}
.bento-brevo-used {
font-size: var(--fs-xl);
font-weight: 800;
color: #fff;
}
.bento-brevo-sep {
font-size: var(--fs-base);
color: #fff;
opacity: 0.35;
}
.bento-brevo-total {
font-size: var(--fs-base);
font-weight: 600;
color: #fff;
opacity: 0.55;
}
.bento-brevo-bar {
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
margin-bottom: 0.5rem;
}
.bento-brevo-bar-fill {
height: 100%;
border-radius: 3px;
background: #fff;
transition: width 0.6s ease;
min-width: 2px;
}
.bento-brevo-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.bento-brevo-info {
font-size: var(--fs-xs);
font-weight: 600;
color: #fff;
opacity: 0.7;
}
.bento-brevo-updated {
font-size: var(--fs-xs);
font-weight: 500;
color: #fff;
opacity: 0.4;
}
/* ── Claude API Cost Widget ───────────────────────────────────── */
.bento-claude {
background: #da7352 !important;
border-color: #c0604a !important;
border-top: 2px solid #c0604a;
color: #fff;
}
.bento-claude:hover {
border-color: #a8503c !important;
box-shadow: 0 4px 24px rgba(218, 115, 82, 0.2);
}
html[data-theme="light"] .bento-claude {
background: #da7352 !important;
border-color: #c0604a !important;
}
.bento-claude .bento-card-head span { color: #fff; }
.bento-claude-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
object-fit: contain;
border-radius: 4px;
}
.bento-claude-sync {
color: #fff;
opacity: 0.5;
}
.bento-claude-sync:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.bento-claude-cost {
display: flex;
align-items: baseline;
gap: 0.4rem;
font-family: var(--font-mono);
line-height: 1;
margin-bottom: 0.5rem;
}
.bento-claude-amount {
font-size: var(--fs-xl);
font-weight: 800;
color: #fff;
}
.bento-claude-label {
font-size: var(--fs-xs);
font-weight: 600;
color: #fff;
opacity: 0.65;
align-self: flex-end;
padding-bottom: 2px;
}
.bento-claude-bar {
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
margin-bottom: 0.5rem;
}
.bento-claude-bar-fill {
height: 100%;
border-radius: 3px;
background: #fff;
transition: width 0.6s ease;
min-width: 2px;
}
.bento-claude-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.bento-claude-month {
font-size: var(--fs-xs);
font-weight: 600;
color: #fff;
opacity: 0.7;
}
.bento-claude-updated {
font-size: var(--fs-xs);
font-weight: 500;
color: #fff;
opacity: 0.4;
}
/* ── Acronis Backup Status Widget ─────────────────────────── */
.bento-card.bento-acronis { border-top: 2px solid #14316e; }
.bento-acronis {
background: #14316e !important;
border-color: #0f2756 !important;
color: #fff;
}
.bento-acronis:hover {
border-color: #1a3f8a !important;
box-shadow: 0 4px 24px rgba(20, 49, 110, 0.3);
}
html[data-theme="light"] .bento-acronis {
background: #14316e !important;
border-color: #0f2756 !important;
}
.bento-acronis-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.bento-acronis .bento-card-head span { color: #fff; }
.bento-acronis .bento-refresh {
color: #fff;
opacity: 0.5;
}
.bento-acronis .bento-refresh:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.bento-acronis-main {
margin-bottom: 0.25rem;
}
.bento-acronis-status {
font-size: var(--fs-xl);
font-weight: 800;
font-family: var(--font-mono);
color: #fff;
text-transform: uppercase;
}
.bento-acronis-status.acronis-ok { color: #86efac; }
.bento-acronis-status.acronis-warn { color: #fcd34d; }
.bento-acronis-status.acronis-err { color: #fca5a5; }
.bento-acronis-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.bento-acronis-label {
font-size: var(--fs-xs);
color: #fff;
opacity: 0.7;
}
.bento-acronis-label strong {
font-weight: 700;
opacity: 1;
color: #fff;
}
.bento-acronis-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25rem;
}
.bento-acronis-updated {
font-size: var(--fs-xs);
font-weight: 500;
color: #fff;
opacity: 0.4;
}
/* ── API Status Row (SBee + Brevo + Claude + Acronis) ─────────── */
.bento-api-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
padding-top: 0.25rem;
}
.bento-api-row .bento-card {
padding: 1rem;
display: flex;
flex-direction: column;
}
.bento-api-row .bento-card-head {
margin-bottom: 0.5rem;
}
/* Vertically center main content in API widgets */
.bento-sbee-credits,
.bento-brevo-credits,
.bento-claude-cost,
.bento-acronis-main {
margin-top: auto;
}
/* Push all widget footers to card bottom edge */
.bento-sbee-footer,
.bento-brevo-footer,
.bento-claude-footer {
margin-top: auto;
}
/* Acronis: push details+footer to bottom (mirrors other widgets' footer margin-top:auto) */
.bento-acronis .bento-acronis-details {
margin-top: auto;
}
/* Bottom row: Clock + Bitcoin (2 cards) */
.bento-bottom-row {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1100px) {
.bento-api-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.bento-api-row { grid-template-columns: 1fr; }
}
/* ── FreePik API Credits Widget ───────────────────────────────── */
.bento-freepik {
background: #1273EB !important;
border-color: #0d5cbf !important;
border-top: 2px solid #0d5cbf;
color: #fff;
}
.bento-freepik:hover {
border-color: #0a4d9e !important;
box-shadow: 0 4px 24px rgba(18, 115, 235, 0.2);
}
html[data-theme="light"] .bento-freepik {
background: #1273EB !important;
border-color: #0d5cbf !important;
}
.bento-freepik-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
object-fit: contain;
}
.bento-freepik .bento-card-head span { color: #fff; }
.bento-freepik-sync {
color: #fff;
opacity: 0.5;
}
.bento-freepik-sync:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.bento-freepik-credits {
display: flex;
align-items: baseline;
gap: 3px;
font-family: var(--font-mono);
line-height: 1;
margin-bottom: 0.5rem;
}
.bento-freepik-spent {
font-size: var(--fs-xl);
font-weight: 800;
color: #fff;
}
.bento-freepik-sep {
font-size: var(--fs-base);
color: #fff;
opacity: 0.35;
}
.bento-freepik-total {
font-size: var(--fs-base);
font-weight: 600;
color: #fff;
opacity: 0.55;
}
.bento-freepik-currency {
font-size: var(--fs-xs);
font-weight: 600;
color: #fff;
opacity: 0.4;
margin-left: 2px;
margin-right: 2px;
}
.bento-freepik-bar {
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
margin-bottom: 0.5rem;
}
.bento-freepik-bar-fill {
height: 100%;
border-radius: 3px;
background: #fff;
transition: width 0.6s ease;
min-width: 2px;
}
.bento-freepik-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.bento-freepik-info {
font-size: var(--fs-xs);
font-weight: 600;
color: #fff;
opacity: 0.7;
}
.bento-freepik-updated {
font-size: var(--fs-xs);
font-weight: 500;
color: #fff;
opacity: 0.4;
}
/* ── API Card Error State ──────────────────────────────────────── */
.bento-api-error {
opacity: 0.5;
}
/* ── App Icon in Bento Card Heads ────────────────────────────── */
.bento-app-icon {
width: 20px;
height: 20px;
border-radius: 4px;
object-fit: contain;
}
/* ── Crawler Overview Widget ──────────────────────────────────── */
.bento-crawler .bento-card-head .text-link,
.bento-crawler .bento-card-head .text-link svg { color: var(--ember); }
/* ── Watchdog Overview Widget ────────────────────────────────── */
.bento-watchdog .bento-card-head .text-link,
.bento-watchdog .bento-card-head .text-link svg { color: var(--ember); }
.bento-crawler-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.bento-stat {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.625rem 0.75rem;
background: var(--trench);
border-radius: 10px;
border: 1px solid var(--border);
}
.bento-stat-num {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 800;
color: var(--heading);
line-height: 1;
}
/* .bento-stat-label — font-size + color inherited from parent, no override needed */
html[data-theme="light"] .bento-stat {
background: #f9fafb;
border-color: #e5e7eb;
}
/* ── Tip Card (Teal Identity) ─────────────────────────────────── */
.bento-tip {
background: #2dd4bf !important;
border-color: #14b8a6 !important;
border-top: 2px solid #14b8a6;
color: #042f2e;
}
.bento-tip:hover {
border-color: #0d9488 !important;
box-shadow: 0 4px 24px rgba(45, 212, 191, 0.15);
}
.bento-tip .bento-card-head svg { color: #042f2e; }
.bento-tip .bento-card-head span { color: #042f2e; }
.bento-tip-body {
font-size: var(--fs-xs);
line-height: 1.55;
color: #042f2e;
}
.bento-tip-body kbd {
display: inline-block;
font-weight: 600;
background: rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 3px;
padding: 0 4px;
font-size: var(--fs-xs);
color: #042f2e;
font-family: var(--font-mono);
}
html[data-theme="light"] .bento-tip {
background: #14b8a6 !important;
border-color: #0d9488 !important;
color: #f0fdfa;
}
html[data-theme="light"] .bento-tip .bento-card-head svg { color: #f0fdfa; }
html[data-theme="light"] .bento-tip .bento-card-head span { color: #f0fdfa; }
html[data-theme="light"] .bento-tip-body { color: #f0fdfa; }
html[data-theme="light"] .bento-tip-body kbd {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.25);
color: #f0fdfa;
}
/* ── Industry News Widget ────────────────────────────────────── */
/* Header logos — pushed to right, refresh button follows */
.nw-header-logos {
display: flex;
align-items: center;
gap: 0.625rem;
margin-left: auto;
}
.bento-news .bento-refresh { margin-left: 0; }
.nw-columns {
display: block;
}
.nw-loading {
text-align: center;
color: var(--muted);
font-size: var(--fs-xs);
padding: 2rem 0;
}
.nw-col {
min-width: 0;
}
.nw-col-header {
margin-bottom: 0.75rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--border);
}
.nw-source-link {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: opacity 0.2s;
}
.nw-source-link:hover { opacity: 0.8; }
.nw-source-logo {
height: 20px;
width: auto;
object-fit: contain;
}
/* kfz-betrieb logo is white on transparent — fine for dark theme */
.nw-logo-kfzbetrieb {
height: 18px;
}
/* autohaus logo is red — needs subtle treatment on dark bg */
.nw-logo-autohaus {
height: 18px;
}
html[data-theme="light"] .nw-logo-kfzbetrieb {
filter: invert(1);
}
/* Sources bar — both logos side by side */
.nw-sources-bar {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--border);
}
.nw-sources-sep {
width: 1px;
height: 18px;
background: var(--border);
flex-shrink: 0;
}
/* Article thumbnail — large enough to recognise */
.nw-article-img {
width: 130px;
height: 80px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: var(--trench);
align-self: center;
}
.nw-article-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Tiny source logo in the article meta row */
.nw-article-source-logo {
height: 14px;
width: auto;
object-fit: contain;
flex-shrink: 0;
opacity: 0.7;
}
html[data-theme="light"] .nw-article-source-logo.nw-logo-kfzbetrieb {
filter: invert(1);
}
/* Zip-merge footer — links to both source sites */
/* .nw-zip-footer removed — footer links no longer rendered */
.nw-article-list {
display: flex;
flex-direction: column;
gap: 0;
}
.nw-empty {
color: var(--muted);
font-size: var(--fs-xs);
text-align: center;
padding: 1.5rem 0;
}
.nw-article {
display: flex;
gap: 0.75rem;
padding: 1.25rem 0.5rem;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
border-bottom: 1px solid var(--border);
}
.nw-article:last-child { border-bottom: none; }
.nw-article:hover {
background: var(--hover-subtle);
}
.nw-article-body {
flex: 1;
min-width: 0;
}
.nw-title {
font-size: var(--fs-lg); /* 18px — h4 standard */
font-weight: 600;
color: var(--heading);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.25rem;
}
/* no hover color change on title — too much, nowhere else in the app */
.nw-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.nw-date {
/* typography via .timestamp class */
}
/* .nw-category uses global .pill .pill-ember from pills.css */
.nw-teaser {
font-size: var(--fs-base); /* 16px — standard body text */
color: var(--muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* .nw-visit → replaced by .text-link.link-ext (see global .text-link above) */
.nw-footer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border);
}
/* light theme for nw-category handled by global .pill system */
/* Responsive: shrink article thumbnails on small screens */
@media (max-width: 768px) {
.nw-article-img {
width: 90px;
height: 60px;
}
}
/* ── What's New / Changelog ───────────────────────────────────── */
.bento-changelog .bento-card-head svg { color: var(--muted); }
.bento-changelog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.bento-changelog-item {
background: var(--trench);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.875rem;
min-width: 0;
}
.bento-changelog-date {
margin-bottom: 0.375rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bento-changelog-title {
font-size: var(--fs-lg); /* 18px — matches global h4 */
font-weight: 700;
color: var(--heading);
margin-bottom: 0.25rem;
line-height: 1.3;
}
html[data-theme="light"] .bento-changelog-item {
background: #f9fafb;
border-color: #e5e7eb;
}
/* ── News Row (Industry News 60% + What's New 40%) ──────────── */
.bento-news-row {
display: flex;
gap: 1rem;
align-items: stretch;
}
.bento-news-row .bento-news {
flex: 0 0 60%;
min-width: 0;
}
.bento-news-right {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
min-width: 0;
}
.bento-news-right .bento-changelog {
flex: 1;
min-width: 0;
}
/* ── Bento Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.bento-wide { grid-column: 1 / -1; }
.bento-news-row { flex-direction: column; }
}
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-wide { grid-column: auto; }
.bento-changelog-grid { grid-template-columns: 1fr; }
.bento-crawler-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ══════════════════════════════════════════════════════════════
BADGE GALLERY — Velvet Museum Cabinet
Collectible card gallery with earned/unearned states
Prefix: .karma-gallery-
══════════════════════════════════════════════════════════════ */
@keyframes karmaGalleryCardReveal {
from { opacity: 0; transform: translateY(14px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes karmaGallerySpotlight {
0%, 100% { box-shadow: 0 0 12px rgba(245,158,11,0.06), inset 0 1px 0 rgba(245,158,11,0.08); }
50% { box-shadow: 0 0 18px rgba(245,158,11,0.12), inset 0 1px 0 rgba(245,158,11,0.14); }
}
@keyframes karmaGallerySecretPulse {
0%, 100% { border-color: var(--steel); }
50% { border-color: var(--muted); }
}
/* ── 1. Stats Bar ──────────────────────────────────────────── */
.karma-gallery-stats {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--trench);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 1.25rem;
}
.karma-gallery-stats-label {
font-size: var(--fs-base);
font-weight: 600;
color: var(--heading);
white-space: nowrap;
}
.karma-gallery-stats-label span {
color: var(--ember);
font-weight: 700;
}
.karma-gallery-progress {
flex: 1;
height: 6px;
background: var(--cavern);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.karma-gallery-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ember), var(--flame));
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
min-width: 2px;
}
.karma-gallery-stats-pct {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--ember);
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ── 2. Filter Bar — uses global .filter-bar component ── */
/* Gallery filter block uses global .table-block margin */
.karma-gallery-no-results {
text-align: center;
padding: 3rem 1rem;
color: var(--muted);
font-size: var(--fs-base);
}
.karma-gallery-no-results svg {
width: 48px;
height: 48px;
margin-bottom: 1rem;
opacity: 0.3;
}
/* ── 3. Badge Grid ─────────────────────────────────────────── */
.karma-gallery-section {
margin-bottom: 2rem;
}
.karma-gallery-section-title {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.75rem;
padding-bottom: 0.625rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.karma-gallery-section-title::before {
content: '';
width: 3px;
height: 14px;
background: var(--ember);
border-radius: 2px;
flex-shrink: 0;
}
.karma-gallery-section-count {
font-size: var(--fs-xs);
color: var(--steel);
font-weight: 500;
margin-left: auto;
letter-spacing: 0;
text-transform: none;
}
.karma-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 0.875rem;
}
/* ── Badge Card ─── */
.karma-gallery-card {
display: flex;
flex-direction: column;
text-align: center;
border-radius: 14px;
background: var(--trench);
border: 1px solid var(--cavern);
cursor: pointer;
overflow: hidden;
position: relative;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
border-color 0.3s ease;
animation: karmaGalleryCardReveal 0.4s ease both;
}
/* Hover glow overlay */
.karma-gallery-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, transparent 50%, rgba(249,115,22,0.04) 100%);
}
.karma-gallery-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,158,11,0.1);
border-color: var(--steel);
}
.karma-gallery-card:hover::after { opacity: 1; }
/* Earned — alive, warm spotlight */
.karma-gallery-card.earned {
border-color: rgba(245,158,11,0.35);
animation: karmaGalleryCardReveal 0.4s ease both, karmaGallerySpotlight 4s ease-in-out infinite 1s;
}
.karma-gallery-card.earned:hover {
border-color: var(--ember);
box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 24px rgba(245,158,11,0.18);
}
.karma-gallery-card.earned .karma-gallery-card-name {
color: var(--ember);
font-weight: 600;
}
/* Locked — grayscale display case */
.karma-gallery-card.locked {
opacity: 0.5;
}
.karma-gallery-card.locked .karma-gallery-card-img img {
filter: grayscale(0.7) brightness(0.65);
transition: filter 0.3s ease;
}
.karma-gallery-card.locked:hover {
opacity: 0.75;
transform: translateY(-3px);
}
.karma-gallery-card.locked:hover .karma-gallery-card-img img {
filter: grayscale(0.35) brightness(0.8);
}
/* Secret — mysterious dashed border */
.karma-gallery-card.secret {
border-style: dashed;
border-color: var(--steel);
animation: karmaGalleryCardReveal 0.4s ease both, karmaGallerySecretPulse 3s ease-in-out infinite;
}
.karma-gallery-card.secret .karma-gallery-card-name {
font-style: italic;
color: var(--steel);
}
/* Card image area */
.karma-gallery-card-img {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--cavern);
overflow: hidden;
position: relative;
}
.karma-gallery-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.karma-gallery-card:hover .karma-gallery-card-img img {
transform: scale(1.08);
}
.karma-gallery-card-img svg {
width: 48px;
height: 48px;
color: var(--steel);
opacity: 0.4;
}
/* Earned checkmark overlay */
.karma-gallery-card-check {
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ember);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(245,158,11,0.3);
z-index: 2;
}
.karma-gallery-card-check svg {
width: 12px;
height: 12px;
color: #fff;
}
/* Lock overlay */
.karma-gallery-card-lock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(6,6,14,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.karma-gallery-card-lock svg {
width: 16px;
height: 16px;
color: var(--muted);
}
/* Card info */
.karma-gallery-card-info {
padding: 0.75rem 0.625rem 0.625rem;
}
.karma-gallery-card-name {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--bright);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.2s ease;
}
.karma-gallery-card:hover .karma-gallery-card-name {
color: var(--ember);
}
.karma-gallery-card-cat {
margin-top: 0.5rem;
}
.karma-gallery-card-meta {
font-size: var(--fs-xs);
color: var(--muted);
margin-top: 0.625rem;
}
.karma-gallery-card-info > .pill.timestamp {
display: block;
margin-top: 0.625rem;
}
.karma-gallery-card-meta .karma-lb-kp {
justify-content: center;
}
/* ── 4. Badge Detail Modal ─────────────────────────────────── */
.karma-gallery-detail-modal {
max-width: 520px;
background: var(--abyss);
border: 1px solid var(--cavern);
box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 40px rgba(245,158,11,0.05);
border-radius: 16px;
}
.karma-gallery-detail-modal .modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: 1px solid var(--border);
padding: 1rem 1.25rem;
}
.karma-gallery-detail-modal .modal-header h3 {
font-weight: 600;
font-size: var(--fs-base);
margin: 0;
}
/* Header info wrapper: badge name + category pill in one row */
.bd-header-info {
display: flex;
align-items: center;
gap: 0.625rem;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.karma-gallery-detail-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem 1.5rem;
text-align: center;
}
.karma-gallery-detail-image {
width: 200px;
height: 200px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
background: var(--cavern);
/* Popout hover: scale the whole container (like .level-pic-*), not zoom inside */
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.karma-gallery-detail-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.karma-gallery-detail-image:hover {
transform: scale(1.5);
z-index: 10;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.karma-gallery-detail-image svg {
width: 64px;
height: 64px;
color: var(--steel);
opacity: 0.4;
margin: auto;
display: block;
padding-top: 56px;
}
.karma-gallery-detail-desc {
font-size: var(--fs-base);
color: var(--text);
line-height: 1.5;
max-width: 400px;
}
.karma-gallery-detail-trigger {
font-size: var(--fs-base);
color: var(--muted);
background: var(--trench);
padding: 0.625rem 1rem;
border-radius: 10px;
border: 1px solid var(--border);
width: 100%;
text-align: center;
}
/* .karma-gallery-detail-trigger strong uses global .text-overline */
.karma-gallery-detail-hint {
font-size: var(--fs-xs);
font-style: italic;
color: var(--steel);
background: var(--cavern);
padding: 0.625rem 1rem;
border-radius: 10px;
border: 1px dashed var(--steel);
width: 100%;
text-align: center;
}
.karma-gallery-detail-earned {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
font-weight: 600;
color: #22c55e;
}
.karma-gallery-detail-earned svg {
width: 18px;
height: 18px;
}
/* Earners row — "By X users" label + profile-pic-20 thumbs in ONE line */
.karma-gallery-detail-users {
font-size: var(--fs-xs);
color: var(--muted);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.625rem;
flex-wrap: wrap;
}
.karma-gallery-detail-avatars {
display: flex;
gap: 0.25rem;
align-items: center;
flex-wrap: wrap;
}
/* "+N more" chip — rides on top of global profile-pic-20 sizing */
.bd-more {
background: var(--trench);
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 600;
cursor: default;
}
.karma-gallery-detail-modal .modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border);
padding: 0.75rem 1.25rem;
}
.karma-gallery-detail-modal .modal-footer .btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
/* Backdrop blur for detail modal */
#badgeDetailModal.open {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(6, 6, 14, 0.75);
}
/* ═══════════════════════════════════════════════════════════════
KARMA LEADERBOARD — eSports-style ranking with podium
Prefix: .karma-lb-
═══════════════════════════════════════════════════════════════ */
/* ── Animations ── */
@keyframes karmaLbSlideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes karmaLbPodiumRise {
from { opacity: 0; transform: translateY(40px) scale(0.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes karmaLbRingPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--ring-color); }
50% { box-shadow: 0 0 12px 3px var(--ring-color); }
}
@keyframes karmaLbTrendPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ── Container ── */
.karma-lb-wrap {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* ══════════════════════════════════════
PODIUM — Top 3 victory ceremony
══════════════════════════════════════ */
.karma-lb-podium {
display: grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: 0.5rem;
align-items: end;
padding: 2.5rem 0.5rem 0;
position: relative;
}
/* Subtle stage glow behind podium */
.karma-lb-podium::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(ellipse at center bottom, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Individual podium position */
.karma-lb-podium-pos {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 1;
animation: karmaLbPodiumRise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.karma-lb-podium-pos:nth-child(1) { animation-delay: 0.15s; } /* 2nd place */
.karma-lb-podium-pos:nth-child(2) { animation-delay: 0s; } /* 1st place */
.karma-lb-podium-pos:nth-child(3) { animation-delay: 0.25s; } /* 3rd place */
/* Avatar area above the block */
.karma-lb-podium-profile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding-bottom: 0.75rem;
}
/* Podium avatar ring — SQUARE user images, all positions same size */
.karma-lb-podium-avatar {
width: 140px;
height: 140px;
border-radius: 16px;
object-fit: cover;
padding: 5px;
background: var(--avatar-border-color);
animation: karmaLbRingPulse 3s ease-in-out infinite;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
z-index: 1;
margin-bottom: 10px;
}
.karma-lb-podium-pos.gold .karma-lb-podium-avatar {
--ring-color: rgba(245, 158, 11, 0.4);
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}
.karma-lb-podium-pos.silver .karma-lb-podium-avatar {
--ring-color: rgba(148, 163, 184, 0.35);
background: linear-gradient(135deg, #94a3b8, #64748b);
}
.karma-lb-podium-pos.bronze .karma-lb-podium-avatar {
--ring-color: rgba(180, 83, 9, 0.35);
background: linear-gradient(135deg, #b45309, #92400e);
}
.karma-lb-podium-avatar img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
display: block;
}
/* Placeholder avatar */
.karma-lb-podium-avatar span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--deep);
color: var(--muted);
font-weight: 700;
font-size: var(--fs-2xl);
}
/* Name — all positions same size */
.karma-lb-podium-name {
font-weight: 700;
font-size: 1.6rem;
color: var(--heading);
text-align: center;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Level Card — reusable component ──
Horizontal card with tier image + tier name + description.
Used in podium, can be reused on other pages. */
.level-card {
display: flex;
align-items: center;
gap: 0.925rem;
padding: 0.75rem 1rem;
background: var(--deep);
border: 1px solid var(--border);
border-radius: 10px;
max-width: 340px;
margin-top: 0.25rem;
margin-bottom: 0.55rem;
position: relative;
}
.level-card-img {
flex-shrink: 0;
}
.level-card-img img {
width: 60px;
height: 60px;
border-radius: 50%;
display: block;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
cursor: pointer;
position: relative;
z-index: 1;
}
.level-card-img img:hover {
transform: scale(2.2);
z-index: 10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.level-card-info {
min-width: 0;
}
.level-card-name {
font-weight: 700;
font-size: var(--fs-lg);
color: var(--heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.level-card-desc {
font-size: var(--fs-base);
color: var(--muted);
line-height: 1.4;
margin-top: 2px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Level badge — top-right corner, styled like .karma-hub-tier-number */
.level-card-level {
position: absolute;
top: 0.375rem;
right: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 0.375rem;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1; /* Prevent JetBrains Mono ascender/descender from off-centering the text (RND-235) */
border-radius: 6px;
background: var(--era-bg, var(--era-scribbles-bg));
color: var(--era-color, var(--era-scribbles));
border: 1px solid currentColor;
opacity: 0.8;
}
/* Silver/Bronze level-card — same size as gold */
/* Podium block / pedestal */
.karma-lb-podium-block {
width: 100%;
border-radius: 8px 8px 0 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: var(--fs-xl);
color: rgba(255, 255, 255, 0.15);
}
/* Height differentiation */
.karma-lb-podium-pos.gold .karma-lb-podium-block {
height: 120px;
background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.08) 100%);
border: 1px solid rgba(245, 158, 11, 0.25);
border-bottom: none;
font-size: var(--fs-2xl);
}
.karma-lb-podium-pos.silver .karma-lb-podium-block {
height: 84px;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.14) 0%, rgba(100, 116, 139, 0.06) 100%);
border: 1px solid rgba(148, 163, 184, 0.2);
border-bottom: none;
}
.karma-lb-podium-pos.bronze .karma-lb-podium-block {
height: 60px;
background: linear-gradient(180deg, rgba(180, 83, 9, 0.14) 0%, rgba(146, 64, 14, 0.06) 100%);
border: 1px solid rgba(180, 83, 9, 0.2);
border-bottom: none;
}
/* Diagonal speed-stripe accent */
.karma-lb-podium-block::after {
content: '';
position: absolute;
top: 0;
right: 15%;
width: 1px;
height: 100%;
opacity: 0.15;
}
.karma-lb-podium-pos.gold .karma-lb-podium-block::after { background: #f59e0b; }
.karma-lb-podium-pos.silver .karma-lb-podium-block::after { background: #94a3b8; }
.karma-lb-podium-pos.bronze .karma-lb-podium-block::after { background: #b45309; }
/* ══════════════════════════════════════
RANKING TABLE — Rows for rank 4+
══════════════════════════════════════ */
/* Horizontal scroll wrapper — leaderboard scrolls on tight viewports instead of overflowing */
.karma-lb-table-scroll {
overflow-x: auto;
width: 100%;
min-width: 0; /* Critical: flex items default to min-width:auto which prevents overflow-x from working.
With min-width:0 the scroll container can shrink below its content size (RND-236) */
}
.karma-lb-table {
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 620px; /* Ensure table keeps its 10-column layout and scrolls if needed */
}
/* Table header row — 10 columns: rank | avatar | level-img | name | level-badge | kp | badges | streak | trend | week */
.karma-lb-header {
display: grid;
grid-template-columns: 42px 42px 56px 1fr 44px 110px 54px 54px 54px 68px;
gap: 0.5rem;
align-items: center;
padding: 0 1rem 0.5rem;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
}
/* Single row — 10 columns: rank | avatar | level-img | name | level-badge | kp | badges | streak | trend | week */
.karma-lb-row {
display: grid;
grid-template-columns: 42px 42px 56px 1fr 44px 110px 54px 54px 54px 68px;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 8px;
background: var(--trench);
border: 1px solid transparent;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, border-color 0.15s, box-shadow 0.2s;
animation: karmaLbSlideUp 0.4s ease both;
}
/* Stagger delays set via inline style: animation-delay */
.karma-lb-row:hover {
transform: translateX(6px);
background: var(--cavern);
border-color: var(--border);
/* Inset shadow avoids corner fragments — outset (-4px) caused rounded orange artifacts
at top-left/bottom-left due to border-radius: 8px on the row. (RND-284) */
box-shadow: inset 4px 0 0 0 var(--ember);
position: relative;
z-index: 2; /* Hovered row stacks above siblings so tier-img scale(2.2) isn't clipped (RND-237) */
}
/* Current user highlight */
.karma-lb-row.is-me {
border-color: var(--era-color, var(--ember));
background: linear-gradient(135deg, var(--trench), rgba(245, 158, 11, 0.05));
box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.03);
}
/* Preserve glow on is-me hover (inset left-bar + inset glow combined) */
.karma-lb-row.is-me:hover {
box-shadow: inset 4px 0 0 0 var(--ember), inset 0 0 20px rgba(245, 158, 11, 0.03);
}
.karma-lb-row.is-me::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: 8px 0 0 8px;
background: var(--era-color, var(--ember));
}
.karma-lb-row.is-me { position: relative; }
/* ── Row cells ── */
.karma-lb-rank {
font-family: var(--font-mono);
font-weight: 700;
font-size: var(--fs-xs);
color: var(--muted);
text-align: center;
}
.karma-lb-user {
display: flex;
align-items: center;
gap: 0.625rem;
min-width: 0;
}
/* Standalone avatar column (RND-235) — holds .karma-stats-profile-avatar */
.karma-lb-avatar-col {
display: flex;
align-items: center;
justify-content: center;
}
/* SQUARE user images in table rows */
.karma-lb-avatar {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
border: 1.5px solid var(--avatar-border-color);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
z-index: 1;
}
.karma-lb-avatar-ph {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cavern);
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
flex-shrink: 0;
}
.karma-lb-name-wrap {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.karma-lb-name {
font-weight: 600;
font-size: var(--fs-base);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.375rem;
}
/* ROUND level images — 3x bigger with hover pop-out */
.karma-lb-level {
display: flex;
align-items: center;
justify-content: center;
}
.karma-lb-tier-img {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
cursor: pointer;
position: relative;
z-index: 1;
}
.karma-lb-tier-img:hover {
transform: scale(2.2);
z-index: 10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.karma-lb-tier-name {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.karma-lb-tier-desc {
font-size: var(--fs-xs);
color: var(--muted);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
/* Level number badge — L07 style, standalone grid column (RND-235) */
.karma-lb-level-badge {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1; /* Prevent JetBrains Mono ascender/descender from off-centering the text (RND-235) */
color: var(--muted);
background: rgba(156, 163, 175, 0.1);
border: 1px solid rgba(156, 163, 175, 0.2);
border-radius: 4px;
padding: 2px 6px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.karma-lb-kp {
font-family: var(--font-mono);
font-weight: 700;
font-size: var(--fs-xl);
color: var(--ember);
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.375rem;
}
.karma-lb-kp .karma-symbol { width: 26px; height: 26px; opacity: 0.9; }
/* KP display — size modifiers (kp-xs=12px, kp-sm=20px, default=26px, kp-lg=32px) */
.karma-lb-kp.kp-xs { font-size: var(--fs-xs); justify-content: flex-end; }
.karma-lb-kp.kp-xs .karma-symbol { width: 12px; height: 12px; }
.karma-lb-kp.kp-sm { font-size: var(--fs-base); }
.karma-lb-kp.kp-sm .karma-symbol { width: 20px; height: 20px; }
.karma-lb-kp.kp-lg { font-size: var(--fs-2xl); }
.karma-lb-kp.kp-lg .karma-symbol { width: 32px; height: 32px; }
.karma-lb-kp.kp-negative { color: var(--danger); }
.karma-lb-badges {
font-size: var(--fs-base);
color: var(--muted);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
}
.karma-lb-badges svg {
width: 16px;
height: 16px;
opacity: 0.6;
}
.karma-lb-streak {
font-size: var(--fs-base);
color: var(--muted);
text-align: center;
}
.karma-lb-streak.active {
color: var(--flame);
}
.karma-lb-trend {
font-size: var(--fs-base);
text-align: center;
font-weight: 600;
}
.karma-lb-trend.up {
color: #22c55e;
animation: karmaLbTrendPulse 2s ease-in-out infinite;
}
.karma-lb-trend.down { color: #ef4444; }
.karma-lb-trend.neutral { color: var(--muted); opacity: 0.5; }
.karma-lb-weekly {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--muted);
text-align: right;
}
.karma-lb-weekly.has-kp { color: var(--ember); }
/* ══════════════════════════════════════
YOUR RANK BAR — bottom sticky
══════════════════════════════════════ */
.karma-lb-your-rank {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 1.25rem;
border-radius: 10px;
background: linear-gradient(135deg, var(--trench), var(--cavern));
border: 1px dashed var(--ember);
animation: karmaLbSlideUp 0.5s ease both;
animation-delay: 0.5s;
}
.karma-lb-your-rank-label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
white-space: nowrap;
}
.karma-lb-your-rank-pos {
font-family: var(--font-mono);
font-weight: 800;
font-size: var(--fs-lg);
color: var(--ember);
white-space: nowrap;
}
.karma-lb-your-rank-user {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.karma-lb-your-rank-user img {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: cover;
}
.karma-lb-your-rank-user span {
font-weight: 600;
font-size: var(--fs-xs);
color: var(--text);
}
/* Empty state */
.karma-lb-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--muted);
font-size: var(--fs-base);
}
/* ══════════════════════════════════════
LIGHT THEME — Leaderboard
══════════════════════════════════════ */
html[data-theme="light"] .karma-lb-podium::before {
background: radial-gradient(ellipse at center bottom, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
}
html[data-theme="light"] .karma-lb-podium-pos.gold .karma-lb-podium-block {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.04) 100%);
border-color: rgba(245, 158, 11, 0.2);
}
html[data-theme="light"] .karma-lb-podium-pos.silver .karma-lb-podium-block {
background: linear-gradient(180deg, rgba(100, 116, 139, 0.08) 0%, rgba(100, 116, 139, 0.02) 100%);
border-color: rgba(100, 116, 139, 0.2);
}
html[data-theme="light"] .karma-lb-podium-pos.bronze .karma-lb-podium-block {
background: linear-gradient(180deg, rgba(180, 83, 9, 0.08) 0%, rgba(146, 64, 14, 0.02) 100%);
border-color: rgba(180, 83, 9, 0.15);
}
html[data-theme="light"] .karma-lb-row {
background: var(--surface);
border-color: transparent;
}
html[data-theme="light"] .karma-lb-row:hover {
background: var(--surface-hover, #f0f0f0);
border-color: var(--border);
}
html[data-theme="light"] .karma-lb-row.is-me {
background: linear-gradient(135deg, var(--surface), rgba(245, 158, 11, 0.04));
}
html[data-theme="light"] .karma-lb-your-rank {
background: linear-gradient(135deg, var(--surface), rgba(245, 158, 11, 0.04));
border-color: var(--ember);
}
html[data-theme="light"] .karma-lb-podium-avatar span {
background: var(--surface);
}
html[data-theme="light"] .karma-lb-tier-img:hover,
html[data-theme="light"] .level-card-img img:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .level-card {
background: var(--surface);
border-color: var(--border);
}
/* ══════════════════════════════════════
RESPONSIVE — Leaderboard
══════════════════════════════════════ */
/* Responsive Leaderboard hero section — hide elements as viewport shrinks (RND-236):
≤1300px: progress bar hidden (not enough horizontal space)
≤1100px: KP number zone hidden (overlaps with table at narrow widths) */
@media (max-width: 1300px) {
.karma-hub-progress { display: none; }
}
/* 1100px and below: hide low-priority columns (streak, week, kp) so table never needs horizontal
scroll on typical desktop/laptop. 7-col layout: rank|avatar|level|name|lv|badges|trend.
Available content width ≈ 792px@1100px — 7-col fits in ≈420px. (RND-236) */
@media (max-width: 1100px) {
.karma-lb-row,
.karma-lb-header {
grid-template-columns: 42px 42px 56px 1fr 44px 54px 54px; /* 7 cols: drop kp + streak + week */
}
.karma-lb-streak,
.karma-lb-weekly { display: none; }
/* Hide KP column in table rows (but not in podium or Scoreboard Zone A) */
.karma-lb-row .karma-lb-kp { display: none; }
/* Hide matching header cells: KP = 6th child, Streak = 8th child, Week = 10th child */
.karma-lb-header > div:nth-child(6),
.karma-lb-header > div:nth-child(8),
.karma-lb-header > div:nth-child(10) { display: none; }
.karma-lb-table { min-width: 420px; }
}
@media (max-width: 900px) {
.karma-lb-header { display: none; }
.karma-lb-row {
/* 3 visible cols: rank | avatar | name (kp hidden via <1100px rule) */
grid-template-columns: 36px 36px 1fr;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
}
.karma-lb-level,
.karma-lb-level-badge,
.karma-lb-badges,
.karma-lb-streak,
.karma-lb-trend,
.karma-lb-weekly { display: none; }
.karma-lb-tier-desc { display: none; }
}
@media (max-width: 640px) {
.karma-lb-podium {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 1rem 0 0;
}
/* Reorder: 1st, 2nd, 3rd on mobile */
.karma-lb-podium-pos:nth-child(1) { order: 2; } /* 2nd */
.karma-lb-podium-pos:nth-child(2) { order: 1; } /* 1st */
.karma-lb-podium-pos:nth-child(3) { order: 3; } /* 3rd */
.karma-lb-podium-pos {
flex-direction: row;
gap: 0.75rem;
}
.karma-lb-podium-profile {
flex-direction: row;
gap: 0.75rem;
padding-bottom: 0;
flex: 1;
}
.karma-lb-podium-block {
display: none; /* hide pedestals on mobile */
}
.karma-lb-podium-avatar {
width: 44px;
height: 44px;
}
.karma-lb-podium-pos.gold .karma-lb-podium-avatar {
width: 56px;
height: 56px;
}
.karma-lb-podium-pos.gold .karma-lb-podium-name {
font-size: 1.1rem;
}
.level-card { display: none; }
.karma-lb-row {
grid-template-columns: 32px 1fr;
padding: 0.5rem 0.625rem;
}
.karma-lb-level { display: none; }
.karma-lb-avatar, .karma-lb-avatar-ph { width: 26px; height: 26px; }
.karma-lb-name { font-size: 0.75rem; }
.karma-lb-tier-name { display: none; }
.karma-lb-tier-desc { display: none; }
.karma-lb-your-rank {
flex-wrap: wrap;
gap: 0.5rem;
}
}
/* Users overview in badges page */
.badges-page .user-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
.user-avatar-sm {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.user-avatar-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cavern);
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 600;
}
/* ── Badge Gallery — Light Theme ───────────────────────────── */
html[data-theme="light"] .karma-gallery-stats {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="light"] .karma-gallery-progress {
background: #e5e7eb;
}
html[data-theme="light"] .karma-gallery-filters {
background: var(--surface);
}
html[data-theme="light"] .karma-gallery-cat-select {
background-color: var(--surface);
border-color: var(--border);
color: var(--text);
}
html[data-theme="light"] .karma-gallery-status-btn {
background: var(--surface);
}
html[data-theme="light"] .karma-gallery-search {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="light"] .karma-gallery-card {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="light"] .karma-gallery-card:hover {
box-shadow: 0 10px 28px rgba(0,0,0,0.08), 0 0 0 1px rgba(245,158,11,0.12);
}
html[data-theme="light"] .karma-gallery-card-img {
background: #f0f0f5;
}
html[data-theme="light"] .karma-gallery-card.earned {
border-color: rgba(245,158,11,0.5);
box-shadow: 0 0 12px rgba(245,158,11,0.08);
}
html[data-theme="light"] .karma-gallery-card.earned:hover {
box-shadow: 0 10px 28px rgba(0,0,0,0.08), 0 0 18px rgba(245,158,11,0.14);
}
html[data-theme="light"] .karma-gallery-card-lock {
background: rgba(255,255,255,0.6);
}
html[data-theme="light"] .karma-gallery-detail-modal {
background: #fff;
border-color: var(--border);
box-shadow: 0 24px 80px rgba(0,0,0,0.15);
}
html[data-theme="light"] .karma-gallery-detail-image {
background: #f0f0f5;
}
html[data-theme="light"] .karma-gallery-detail-trigger {
background: #f9fafb;
border-color: var(--border);
}
html[data-theme="light"] .karma-gallery-detail-hint {
background: #f9fafb;
border-color: var(--border);
}
html[data-theme="light"] #badgeDetailModal.open {
background: rgba(0,0,0,0.4);
}
/* ── Badge Gallery — Responsive ───────────────────────────── */
@media (max-width: 900px) {
.karma-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.karma-gallery-filters {
flex-direction: column;
align-items: stretch;
}
.karma-gallery-search input { width: 100%; }
}
@media (max-width: 640px) {
.karma-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.5rem;
}
.karma-gallery-detail-image { width: 140px; height: 140px; } /* still generous on mobile */
.karma-gallery-detail-modal { max-width: 95vw; }
}
/* ── Badges Page Container — show/hide + header (used by showPage) */
.badges-page { display: none; }
.badges-page.visible { display: block; }
.badges-page-header {
margin-bottom: 2rem;
animation: fadeUp 0.5s ease both;
}
.badges-page-header h2 {
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--heading) 30%, var(--ember));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.badges-page-header p { margin-top: 0.5rem; color: var(--muted); }
html[data-theme="light"] .badges-page-header h2 {
background: linear-gradient(135deg, #1a1a2e 30%, var(--flame));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ══════════════════════════════════════════════════════════════
Karma Hub — Hero Section + 5-Tab Navigation Shell
Era-aware theming, compact status bar, responsive
══════════════════════════════════════════════════════════════ */
/* ── Era Color Tokens ──────────────────────────────────────── */
:root {
--era-scribbles: #9ca3af;
--era-scribbles-glow: rgba(156, 163, 175, 0.25);
--era-scribbles-bg: rgba(156, 163, 175, 0.08);
--era-watercolor: #60a5fa;
--era-watercolor-glow: rgba(96, 165, 250, 0.3);
--era-watercolor-bg: rgba(96, 165, 250, 0.08);
--era-comic: #f87171;
--era-comic-glow: rgba(248, 113, 113, 0.3);
--era-comic-bg: rgba(248, 113, 113, 0.08);
--era-oil_painting: #fbbf24;
--era-oil_painting-glow: rgba(251, 191, 36, 0.3);
--era-oil_painting-bg: rgba(251, 191, 36, 0.08);
--era-hyper_3d: #22d3ee;
--era-hyper_3d-glow: rgba(34, 211, 238, 0.3);
--era-hyper_3d-bg: rgba(34, 211, 238, 0.08);
--era-epic_fantasy: #a78bfa;
--era-epic_fantasy-glow: rgba(167, 139, 250, 0.35);
--era-epic_fantasy-bg: rgba(167, 139, 250, 0.08);
}
html[data-theme="light"] {
--era-scribbles: #6b7280;
--era-scribbles-glow: rgba(107, 114, 128, 0.2);
--era-scribbles-bg: rgba(107, 114, 128, 0.06);
--era-watercolor: #3b82f6;
--era-watercolor-glow: rgba(59, 130, 246, 0.2);
--era-watercolor-bg: rgba(59, 130, 246, 0.06);
--era-comic: #ef4444;
--era-comic-glow: rgba(239, 68, 68, 0.2);
--era-comic-bg: rgba(239, 68, 68, 0.06);
--era-oil_painting: #d97706;
--era-oil_painting-glow: rgba(217, 119, 6, 0.2);
--era-oil_painting-bg: rgba(217, 119, 6, 0.06);
--era-hyper_3d: #0891b2;
--era-hyper_3d-glow: rgba(8, 145, 178, 0.2);
--era-hyper_3d-bg: rgba(8, 145, 178, 0.06);
--era-epic_fantasy: #7c3aed;
--era-epic_fantasy-glow: rgba(124, 58, 237, 0.2);
--era-epic_fantasy-bg: rgba(124, 58, 237, 0.06);
}
/* ── Hero Section ──────────────────────────────────────────── */
.karma-hub-hero {
display: flex;
align-items: center;
gap: 1.75rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 14px;
background: var(--trench);
border: 1px solid var(--cavern);
position: relative;
overflow: visible;
animation: fadeUp 0.5s ease both;
}
/* Glow removed per RND-234 — no ambient era glow behind hero */
/* Profile block: avatar + level card seamlessly joined */
.karma-hub-profile-block {
display: flex;
align-items: stretch;
flex-shrink: 0;
gap: 0;
z-index: 1;
}
/* Avatar — reuses .karma-lb-podium-avatar, era-colored ring */
.karma-hub-avatar {
margin-bottom: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: default;
--ring-color: var(--era-glow, rgba(245, 158, 11, 0.35));
background: linear-gradient(135deg, var(--era-color, var(--ember)), var(--abyss));
box-shadow: 0 4px 20px var(--era-glow, rgba(245, 158, 11, 0.2));
}
/* Level card — extends flush against avatar, no left radius */
.karma-hub-lc {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
max-width: none;
margin: 0;
min-width: 220px;
align-self: stretch;
justify-content: flex-start;
}
/* Large level badge variant — used in the hero */
.level-card-level--lg {
font-size: var(--fs-lg);
line-height: 1; /* Prevent JetBrains Mono ascender/descender from off-centering the text (RND-235) */
height: auto;
min-width: 48px;
padding: 0.2rem 0.625rem;
border-radius: 8px;
opacity: 1;
top: 0.625rem;
right: 0.75rem;
}
/* ── Level Badge — standardized standalone sizes (RND-235) ─────────────────
Base class: .level-badge
Size modifiers: .level-badge-size10 … .level-badge-size50
Usage: 7
─────────────────────────────────────────────────────────────────────────── */
.level-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 700;
line-height: 1;
color: var(--muted);
background: rgba(156, 163, 175, 0.1);
border: 1px solid rgba(156, 163, 175, 0.2);
white-space: nowrap;
letter-spacing: 0.04em;
flex-shrink: 0;
}
/* size10 — smallest, captions & table cells */
.level-badge-size10 { font-size: var(--fs-xs); padding: 2px 5px; border-radius: 4px; }
/* size20 — default, most common use */
.level-badge-size20 { font-size: var(--fs-xs); padding: 4px 8px; border-radius: 5px; }
/* size30 — medium, cards & lists */
.level-badge-size30 { font-size: var(--fs-base); padding: 5px 10px; border-radius: 6px; }
/* size40 — large, hero sections */
.level-badge-size40 { font-size: var(--fs-lg); padding: 6px 12px; border-radius: 7px; }
/* size50 — display, stats / big callouts */
.level-badge-size50 { font-size: var(--fs-xl); padding: 8px 16px; border-radius: 8px; }
/* Placeholder when tier image is missing */
.karma-hub-tier-image-placeholder {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--cavern);
border: 2px solid var(--era-color, var(--era-scribbles));
color: var(--muted);
font-size: var(--fs-lg);
font-weight: 700;
}
/* KP zone (center) */
.karma-hub-kp-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 1;
}
/* Hide KP zone at ≤1100px (must be AFTER the display:flex base rule above) */
@media (max-width: 1100px) {
.karma-hub-kp-zone { display: none; }
}
/* KP total — override justify-content for centered display */
.karma-hub-kp {
justify-content: center;
}
/* Progress section (right) — fills remaining space */
.karma-hub-progress {
flex: 1;
min-width: 160px;
z-index: 1;
text-align: right;
}
.karma-hub-progress-label {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 0.375rem;
}
.karma-hub-progress-bar {
width: 100%;
height: 8px;
border-radius: 4px;
background: var(--cavern);
overflow: hidden;
position: relative;
border: 1px solid var(--border);
}
.karma-hub-progress-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--era-color, var(--ember)), var(--ember));
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
}
.karma-hub-progress-fill::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 16px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25));
border-radius: 0 3px 3px 0;
}
.karma-hub-progress-text {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.375rem;
font-size: var(--fs-xs);
color: var(--muted);
}
.karma-hub-progress-pct {
font-weight: 700;
color: var(--era-color, var(--ember));
font-size: var(--fs-xs);
}
.karma-hub-next-tier {
font-weight: 500;
opacity: 0.8;
}
.karma-hub-next-name {
color: var(--ember);
font-weight: 700;
}
/* Profile avatar: no animation, glow, shadow or hover effects (RND-234) */
.karma-hub-avatar {
animation: none;
box-shadow: none;
transition: none;
}
.karma-hub-avatar:hover {
transform: none;
box-shadow: none;
}
html[data-theme="light"] .karma-hub-avatar:hover {
box-shadow: none;
}
/* Level pic keeps the global hover pop-out (RND-234 update) */
/* ── Karma Hub uses global .k-tabs / .k-tab (see Tabs section above) ── */
.karma-hub-tab-content {
animation: fadeUp 0.4s ease both;
}
/* Placeholder state for coming-soon tabs */
.karma-hub-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
animation: fadeUp 0.5s ease 0.15s both;
}
.karma-hub-placeholder-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--cavern);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: var(--muted);
}
.karma-hub-placeholder-icon svg {
width: 28px;
height: 28px;
opacity: 0.5;
}
.karma-hub-placeholder-title {
font-size: var(--fs-base);
font-weight: 600;
color: var(--heading);
margin-bottom: 0.375rem;
}
.karma-hub-placeholder-text {
font-size: var(--fs-xs);
color: var(--muted);
max-width: 320px;
line-height: 1.5;
}
/* Activity feed placeholder pulse */
.karma-hub-placeholder-pulse {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 500px;
margin-top: 1.5rem;
}
.karma-hub-pulse-line {
height: 12px;
border-radius: 6px;
background: var(--cavern);
animation: karmaHubPulse 1.8s ease-in-out infinite;
}
.karma-hub-pulse-line:nth-child(1) { width: 85%; animation-delay: 0s; }
.karma-hub-pulse-line:nth-child(2) { width: 65%; animation-delay: 0.15s; }
.karma-hub-pulse-line:nth-child(3) { width: 75%; animation-delay: 0.3s; }
@keyframes karmaHubPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* ── Light Theme ───────────────────────────────────────────── */
html[data-theme="light"] .karma-hub-hero {
background: #fff;
border-color: var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .karma-hub-tier-image-placeholder {
background: #f3f4f6;
}
html[data-theme="light"] .karma-hub-progress-bar {
background: #e5e7eb;
}
html[data-theme="light"] .karma-hub-placeholder-icon {
background: #f3f4f6;
}
html[data-theme="light"] .karma-hub-pulse-line {
background: #e5e7eb;
}
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
.karma-hub-hero {
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.karma-hub-profile-block { flex-shrink: 0; }
.karma-hub-kp-zone { flex-shrink: 0; }
.karma-hub-progress {
width: 100%;
min-width: 0;
text-align: left;
}
}
/* ══════════════════════════════════════════════════════════════
Karma Stats — My Stats Tab (personal achievement dashboard)
Gaming-profile feel: stat cards, badge showcase, profile preview
══════════════════════════════════════════════════════════════ */
/* ── Stats Grid (4 compact cards) ────────────────────────────── */
/* ── Karma User Switcher (kus-*) ── */
.kus-wrap {
position: relative;
margin-bottom: 1.25rem;
max-width: 340px;
}
.kus-trigger {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.875rem;
background: var(--trench);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
width: 100%;
color: var(--text);
font: inherit;
font-size: var(--fs-xs);
}
.kus-trigger:hover {
border-color: var(--ember);
background: var(--cavern);
}
.kus-trigger-avatar {
width: 28px;
height: 28px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: var(--cavern);
border: 1.5px solid var(--avatar-border-color);
}
.kus-trigger-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kus-trigger-avatar .kus-avatar-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--muted);
background: var(--deep);
}
.kus-trigger-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kus-trigger-chevron {
flex-shrink: 0;
color: var(--muted);
transition: transform 0.2s;
}
.kus-wrap.open .kus-trigger-chevron {
transform: rotate(180deg);
}
.kus-wrap.open .kus-trigger {
border-color: var(--ember);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Dropdown */
.kus-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 380px;
background: var(--trench);
border: 1px solid var(--ember);
border-top: none;
border-radius: 0 0 10px 10px;
z-index: 200;
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
overflow: hidden;
display: flex;
flex-direction: column;
}
.kus-wrap.open .kus-dropdown {
display: flex;
}
.kus-dropdown {
display: none;
}
/* Search */
.kus-search-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.kus-search-wrap svg {
color: var(--muted);
flex-shrink: 0;
}
.kus-search {
flex: 1;
background: none;
border: none;
color: var(--text);
font: inherit;
font-size: var(--fs-xs);
outline: none;
padding: 0.25rem 0;
}
.kus-search::placeholder {
color: var(--dimmed);
}
/* User list */
.kus-list {
overflow-y: auto;
flex: 1;
padding: 0.375rem 0;
}
.kus-user {
display: grid;
grid-template-columns: auto 32px 1fr auto;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background 0.15s;
border-left: 3px solid transparent;
}
.kus-user:hover {
background: var(--cavern);
}
.kus-user.active {
background: rgba(245, 158, 11, 0.08);
border-left-color: var(--ember);
}
.kus-user-avatar {
width: 32px;
height: 32px;
border-radius: 6px;
overflow: hidden;
background: var(--deep);
border: 1.5px solid var(--avatar-border-color);
}
.kus-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kus-user-avatar .kus-avatar-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--muted);
}
.kus-user-info {
min-width: 0;
}
.kus-user-name {
font-size: var(--fs-xs);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kus-user-meta {
font-size: var(--fs-xs);
color: var(--muted);
}
.kus-user-level {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 20px;
padding: 0 0.25rem;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 700;
border-radius: 4px;
background: rgba(245,158,11,0.12);
color: var(--ember);
border: 1px solid currentColor;
opacity: 0.85;
white-space: nowrap;
}
.kus-no-results {
text-align: center;
padding: 1.5rem;
color: var(--dimmed);
font-size: var(--fs-xs);
}
/* Viewing banner */
.kus-viewing-banner {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 8px;
margin-bottom: 1rem;
font-size: var(--fs-xs);
color: var(--muted);
}
.kus-viewing-banner.active {
display: flex;
}
.kus-viewing-banner svg {
flex-shrink: 0;
color: var(--ember);
}
.kus-viewing-banner strong {
color: var(--text);
}
.kus-back-btn {
margin-left: auto;
background: none;
border: none;
color: var(--ember);
cursor: pointer;
font: inherit;
font-size: var(--fs-xs);
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 6px;
transition: background 0.15s;
}
.kus-back-btn:hover {
background: rgba(245, 158, 11, 0.1);
}
/* Light theme */
html[data-theme="light"] .kus-trigger {
background: var(--surface-raised);
border-color: var(--border);
}
html[data-theme="light"] .kus-trigger:hover {
border-color: var(--ember);
background: var(--surface-raised);
}
html[data-theme="light"] .kus-dropdown {
background: var(--surface-raised);
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
html[data-theme="light"] .kus-user:hover {
background: rgba(0,0,0,0.04);
}
html[data-theme="light"] .kus-user.active {
background: rgba(245, 158, 11, 0.06);
}
html[data-theme="light"] .kus-viewing-banner {
background: rgba(245, 158, 11, 0.04);
}
/* Responsive */
@media (max-width: 768px) {
.kus-wrap { max-width: 100%; }
}
.karma-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.875rem;
margin-bottom: 2rem;
}
.karma-stats-card {
background: var(--trench);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1.125rem;
position: relative;
overflow: hidden;
opacity: 0;
animation: karmaStatsFadeUp 0.5s ease forwards;
}
.karma-stats-card:nth-child(1) { animation-delay: 0.05s; }
.karma-stats-card:nth-child(2) { animation-delay: 0.1s; }
.karma-stats-card:nth-child(3) { animation-delay: 0.15s; }
.karma-stats-card:nth-child(4) { animation-delay: 0.2s; }
/* Era-colored accent line on top */
.karma-stats-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--era-color, var(--era-scribbles));
opacity: 0.7;
transition: background 0.4s;
}
/* Subtle radial glow in card corner */
.karma-stats-card::after {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--era-glow, var(--era-scribbles-glow));
filter: blur(30px);
opacity: 0.3;
pointer-events: none;
transition: background 0.4s;
}
.karma-stats-card:hover {
border-color: var(--border-hover);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.karma-stats-card-label {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.karma-stats-card-value {
font-size: 1.625rem;
font-weight: 700;
color: var(--heading);
line-height: 1.2;
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
gap: 0.375rem;
}
/* Ratio display (e.g. "3/139") */
.karma-stats-card-value .karma-stats-total {
font-size: var(--fs-base);
font-weight: 500;
color: var(--muted);
}
/* Sub-line (e.g. date below "Best Day") */
.karma-stats-card-sub {
font-size: var(--fs-xs);
color: var(--muted);
margin-top: 0.25rem;
position: relative;
z-index: 1;
opacity: 0.8;
}
/* Streak fire emoji */
.karma-stats-streak-fire {
font-size: var(--fs-lg);
margin-right: 0.125rem;
}
.karma-stats-days-label {
font-size: var(--fs-xs);
font-weight: 400;
color: var(--muted);
margin-left: 0.125rem;
}
@keyframes karmaStatsFadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Badge Showcase ──────────────────────────────────────────── */
.karma-stats-badges {
margin-bottom: 2rem;
opacity: 0;
animation: karmaStatsFadeUp 0.5s ease 0.25s forwards;
}
.karma-stats-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.karma-stats-section-title {
font-size: var(--fs-base);
font-weight: 700;
color: var(--heading);
display: flex;
align-items: center;
gap: 0.5rem;
}
.karma-stats-section-title svg {
width: 18px;
height: 18px;
color: var(--era-color, var(--ember));
opacity: 0.7;
}
.karma-stats-section-count {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--muted);
background: var(--badge-muted);
padding: 0.1875rem 0.5rem;
border-radius: 10px;
}
/* Category group */
.karma-stats-badge-group {
margin-bottom: 1.25rem;
}
.karma-stats-badge-group:last-child {
margin-bottom: 0;
}
.karma-stats-badge-category {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 0.625rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--border-light);
}
/* Badge grid */
.karma-stats-badge-grid {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
/* Individual badge thumbnail */
.karma-stats-badge {
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
position: relative;
cursor: default;
transition: transform 0.25s ease, box-shadow 0.25s ease;
flex-shrink: 0;
}
.karma-stats-badge img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px;
}
/* Earned badge — full color */
.karma-stats-badge.earned {
border: 2px solid var(--era-color, var(--ember));
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.karma-stats-badge.earned:hover {
transform: scale(1.1);
box-shadow: 0 0 16px var(--era-glow, var(--era-scribbles-glow)),
0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* Unearned badge — silhouette effect */
.karma-stats-badge.unearned {
border: 2px solid var(--border);
opacity: 0.35;
}
.karma-stats-badge.unearned img {
filter: grayscale(1) brightness(0.6);
}
.karma-stats-badge.unearned:hover {
opacity: 0.5;
}
/* Badge tooltip (CSS-only) */
.karma-stats-badge-tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--deep);
border: 1px solid var(--border-mid);
border-radius: 8px;
padding: 0.375rem 0.625rem;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--heading);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
z-index: 10;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.karma-stats-badge-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--border-mid);
}
.karma-stats-badge:hover .karma-stats-badge-tip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Show all badges button */
.karma-stats-show-all {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.875rem;
padding: 0.375rem 0.875rem;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--era-color, var(--ember));
background: var(--era-bg, var(--era-scribbles-bg));
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
font-family: inherit;
}
.karma-stats-show-all:hover {
background: var(--era-glow, var(--era-scribbles-glow));
border-color: var(--era-color, var(--ember));
}
.karma-stats-show-all svg {
width: 14px;
height: 14px;
transition: transform 0.25s;
}
.karma-stats-show-all.expanded svg {
transform: rotate(180deg);
}
/* ── Public Profile Preview ──────────────────────────────────── */
.karma-stats-profile {
opacity: 0;
animation: karmaStatsFadeUp 0.5s ease 0.35s forwards;
}
.karma-stats-profile-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border: 1px dashed var(--border-mid);
border-radius: 12px;
background: var(--trench);
position: relative;
}
.karma-stats-profile-card:hover {
border-color: var(--border-hover);
}
/* Preview label */
.karma-stats-profile-label {
position: absolute;
top: -9px;
left: 16px;
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
background: var(--trench);
padding: 0 0.5rem;
}
/* Avatar */
.karma-stats-profile-avatar {
width: 48px;
height: 48px;
border-radius: 8px;
flex-shrink: 0;
overflow: hidden;
border: 2px solid var(--avatar-border-color);
}
.karma-stats-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.karma-stats-profile-avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--cavern);
color: var(--muted);
font-weight: 700;
font-size: var(--fs-base);
}
/* Center info */
.karma-stats-profile-info {
flex: 1;
min-width: 0;
}
.karma-stats-profile-name {
font-size: var(--fs-base);
font-weight: 700;
color: var(--heading);
margin-bottom: 0.125rem;
}
.karma-stats-profile-tier {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--era-color, var(--ember));
margin-bottom: 0.25rem;
}
.karma-stats-profile-tier-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 0.25rem;
font-size: var(--fs-xs);
font-weight: 700;
border-radius: 4px;
background: var(--era-bg, var(--era-scribbles-bg));
color: var(--era-color, var(--era-scribbles));
border: 1px solid currentColor;
}
.karma-stats-profile-meta {
font-size: var(--fs-xs);
color: var(--muted);
}
/* Top 3 badges on the right */
.karma-stats-profile-badges {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
.karma-stats-profile-badge {
width: 32px;
height: 32px;
border-radius: 6px;
overflow: hidden;
border: 1.5px solid var(--era-color, var(--ember));
box-shadow: 0 0 8px var(--era-glow, var(--era-scribbles-glow));
transition: border-color 0.4s, box-shadow 0.4s;
}
.karma-stats-profile-badge img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Empty badges placeholder */
.karma-stats-profile-badges-empty {
font-size: var(--fs-xs);
color: var(--muted);
opacity: 0.6;
font-style: italic;
}
/* ── Light Theme ─────────────────────────────────────────────── */
html[data-theme="light"] .karma-stats-card {
background: #fff;
border-color: var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .karma-stats-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .karma-stats-card::after {
opacity: 0.15;
}
html[data-theme="light"] .karma-stats-profile-card {
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .karma-stats-profile-label {
background: #fff;
}
html[data-theme="light"] .karma-stats-profile-avatar-placeholder {
background: #f3f4f6;
}
html[data-theme="light"] .karma-stats-badge-tip {
background: #fff;
border-color: var(--border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
.karma-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.karma-stats-grid {
grid-template-columns: 1fr;
}
.karma-stats-badge { width: 56px; height: 56px; }
.karma-stats-profile-card {
flex-wrap: wrap;
}
.karma-stats-profile-badges {
width: 100%;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-light);
}
}
@media (max-width: 480px) {
.karma-hub-hero {
flex-direction: column;
gap: 0.75rem;
}
.karma-hub-profile-block {
flex-wrap: wrap;
}
.karma-hub-avatar {
border-top-right-radius: 11px;
border-bottom-right-radius: 11px;
}
.karma-hub-lc {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-left: 1px solid var(--border);
}
.karma-hub-progress { text-align: left; }
.k-tab { padding: 0.625rem 0.875rem; font-size: 0.8125rem; }
.k-tab svg { width: 14px; height: 14px; }
}
/* ══════════════════════════════════════════════════════════════
Karma Activity Feed — Live Team Activity Stream
Social gaming timeline with avatars, events, date separators
══════════════════════════════════════════════════════════════ */
/* Feed container */
.karma-feed-hub {
position: relative;
}
/* Live indicator bar */
.karma-feed-live {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
margin-bottom: 1rem;
border-radius: 10px;
background: var(--trench);
border: 1px solid var(--border);
font-size: var(--fs-xs);
color: var(--muted);
}
.karma-feed-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
animation: karmaFeedPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.karma-feed-live-label {
font-weight: 600;
color: var(--text);
}
.karma-feed-live-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--steel);
}
/* Date separator */
.karma-feed-date {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0 0.375rem;
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.karma-feed-date::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.karma-feed-date:first-child {
padding-top: 0;
}
/* Feed event item */
.karma-feed-event {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: 10px;
margin-bottom: 0.125rem;
transition: background 0.2s;
opacity: 0;
animation: karmaFeedItemIn 0.4s ease forwards;
}
.karma-feed-event:hover {
background: var(--trench);
}
/* Avatar */
.karma-feed-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
flex-shrink: 0;
overflow: hidden;
background: var(--cavern);
border: 1.5px solid var(--avatar-border-color);
}
.karma-feed-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.karma-feed-avatar-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--muted);
background: var(--cavern);
}
/* Content block */
.karma-feed-body {
flex: 1;
min-width: 0;
}
.karma-feed-headline {
display: flex;
align-items: baseline;
gap: 0.375rem;
flex-wrap: wrap;
line-height: 1.4;
}
.karma-feed-name {
font-weight: 600;
font-size: var(--fs-base);
color: var(--heading);
}
.karma-feed-desc {
font-size: var(--fs-xs);
color: var(--muted);
}
/* Reference image — Badge=ECKIG, Level=RUND */
.karma-feed-ref-img {
width: 28px;
height: 28px;
border-radius: 6px;
flex-shrink: 0;
object-fit: cover;
border: 1px solid var(--border);
}
.karma-feed-ref-img.tier-img {
border-radius: 50%;
}
/* Meta line (timestamp + source view) */
.karma-feed-meta {
font-size: var(--fs-xs);
color: var(--steel);
margin-top: 0.125rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.karma-feed-source {
padding: 0.0625rem 0.375rem;
border-radius: 4px;
background: var(--cavern);
font-size: var(--fs-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* New items indicator (hidden by default) */
.karma-feed-new-indicator {
display: none;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
margin-bottom: 0.75rem;
border-radius: 100px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.25);
color: var(--ember);
font-size: var(--fs-xs);
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.karma-feed-new-indicator:hover {
background: rgba(245, 158, 11, 0.16);
transform: translateY(-1px);
}
.karma-feed-new-indicator.visible {
display: flex;
}
/* Load more button */
.karma-feed-load-more {
display: flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.5rem;
margin: 1rem auto 0;
border-radius: 100px;
background: var(--trench);
border: 1px solid var(--border);
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.karma-feed-load-more:hover {
background: var(--cavern);
color: var(--text);
border-color: var(--border-hover);
}
.karma-feed-load-more:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Empty state */
.karma-feed-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--muted);
}
.karma-feed-empty svg {
width: 48px;
height: 48px;
opacity: 0.3;
margin-bottom: 1rem;
}
.karma-feed-empty-title {
font-size: var(--fs-base);
font-weight: 600;
color: var(--heading);
margin-bottom: 0.375rem;
}
.karma-feed-empty-text {
font-size: var(--fs-xs);
line-height: 1.5;
}
/* Animations */
@keyframes karmaFeedPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
@keyframes karmaFeedItemIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Light theme */
html[data-theme="light"] .karma-feed-event:hover {
background: #f8f9fa;
}
html[data-theme="light"] .karma-feed-source {
background: #f3f4f6;
}
html[data-theme="light"] .karma-feed-live {
background: #f8f9fa;
border-color: #e5e7eb;
}
html[data-theme="light"] .karma-feed-load-more {
background: #f8f9fa;
border-color: #e5e7eb;
}
html[data-theme="light"] .karma-feed-load-more:hover {
background: #f0f1f3;
}
html[data-theme="light"] .karma-feed-new-indicator {
background: rgba(245, 158, 11, 0.08);
}
/* Responsive */
@media (max-width: 640px) {
.karma-feed-event {
gap: 0.5rem;
padding: 0.5rem;
}
.karma-feed-avatar { width: 32px; height: 32px; }
.karma-feed-name { font-size: var(--fs-xs); }
.karma-feed-desc { font-size: var(--fs-xs); }
}
/* ══════════════════════════════════════════════════════════════
Monday Badge Gift Modal
A weekly social ritual — festive gift-wrapping aesthetic
with warm ember accents and celebratory micro-interactions.
══════════════════════════════════════════════════════════════ */
/* ── Gift-specific CSS variables ─────────────────────────── */
:root {
--gift-ribbon: linear-gradient(135deg, #f59e0b, #f97316, #fb923c);
--gift-ribbon-shadow: rgba(249, 115, 22, 0.3);
--gift-bg: rgba(15, 15, 30, 0.95);
--gift-card-bg: rgba(22, 22, 40, 0.5);
--gift-card-border: rgba(90, 90, 122, 0.12);
--gift-card-hover: rgba(245, 158, 11, 0.08);
--gift-selected-ring: rgba(245, 158, 11, 0.5);
--gift-selected-glow: rgba(245, 158, 11, 0.15);
--gift-step-inactive: rgba(90, 90, 122, 0.2);
--gift-step-line: rgba(90, 90, 122, 0.12);
--gift-step-done: #22c55e;
--gift-check-bg: rgba(34, 197, 94, 0.2);
--gift-confetti-a: #f59e0b;
--gift-confetti-b: #f97316;
--gift-confetti-c: #fbbf24;
--gift-confetti-d: #fb923c;
--gift-user-hover: rgba(245, 158, 11, 0.06);
--gift-msg-bg: rgba(22, 22, 40, 0.6);
--gift-msg-border: rgba(90, 90, 122, 0.18);
--gift-empty-icon: rgba(90, 90, 122, 0.2);
--gift-charge-bg: rgba(245, 158, 11, 0.1);
--gift-charge-border: rgba(245, 158, 11, 0.3);
--gift-charge-text: #fbbf24;
--gift-charge-spent: rgba(90, 90, 122, 0.1);
--gift-charge-spent-border: rgba(90, 90, 122, 0.2);
--gift-charge-spent-text: var(--muted);
--gift-preview-bg: rgba(22, 22, 40, 0.3);
--gift-success-bg: rgba(34, 197, 94, 0.06);
}
html[data-theme="light"] {
--gift-ribbon: linear-gradient(135deg, #d97706, #ea580c, #f97316);
--gift-ribbon-shadow: rgba(217, 119, 6, 0.2);
--gift-bg: rgba(255, 255, 255, 0.97);
--gift-card-bg: rgba(0, 0, 0, 0.03);
--gift-card-border: rgba(0, 0, 0, 0.08);
--gift-card-hover: rgba(217, 119, 6, 0.06);
--gift-selected-ring: rgba(217, 119, 6, 0.5);
--gift-selected-glow: rgba(217, 119, 6, 0.1);
--gift-step-inactive: rgba(0, 0, 0, 0.1);
--gift-step-line: rgba(0, 0, 0, 0.08);
--gift-step-done: #16a34a;
--gift-check-bg: rgba(22, 163, 74, 0.15);
--gift-confetti-a: #d97706;
--gift-confetti-b: #ea580c;
--gift-confetti-c: #eab308;
--gift-confetti-d: #f97316;
--gift-user-hover: rgba(217, 119, 6, 0.05);
--gift-msg-bg: rgba(0, 0, 0, 0.02);
--gift-msg-border: rgba(0, 0, 0, 0.1);
--gift-empty-icon: rgba(0, 0, 0, 0.1);
--gift-charge-bg: rgba(217, 119, 6, 0.08);
--gift-charge-border: rgba(217, 119, 6, 0.25);
--gift-charge-text: #b45309;
--gift-charge-spent: rgba(0, 0, 0, 0.04);
--gift-charge-spent-border: rgba(0, 0, 0, 0.1);
--gift-charge-spent-text: var(--muted);
--gift-preview-bg: rgba(0, 0, 0, 0.02);
--gift-success-bg: rgba(22, 163, 74, 0.04);
}
/* ── Gift Modal — wider variant ──────────────────────────── */
.gift-modal {
max-width: 600px;
width: 95vw;
background: var(--gift-bg);
backdrop-filter: blur(24px);
overflow: hidden;
}
.gift-modal .modal-body {
padding: 0;
overflow: hidden;
}
/* ── Step Indicator ──────────────────────────────────────── */
.gift-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 1.25rem 2rem 1rem;
position: relative;
}
.gift-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
position: relative;
z-index: 1;
flex: 0 0 auto;
cursor: default;
}
.gift-step-num {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 600;
background: var(--gift-step-inactive);
color: var(--muted);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.gift-step-label {
font-size: 0.65rem;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.3s ease;
white-space: nowrap;
}
/* Connector lines between steps */
.gift-step-line {
flex: 1;
height: 2px;
min-width: 48px;
max-width: 80px;
background: var(--gift-step-line);
position: relative;
top: -8px;
transition: background 0.4s ease;
}
.gift-step-line.reached {
background: var(--ember);
}
/* Active step */
.gift-step.active .gift-step-num {
background: var(--gift-ribbon);
color: #fff;
box-shadow: 0 0 16px var(--gift-ribbon-shadow);
transform: scale(1.1);
}
.gift-step.active .gift-step-label {
color: var(--ember);
font-weight: 600;
}
/* Completed step */
.gift-step.completed .gift-step-num {
background: var(--gift-step-done);
color: #fff;
}
.gift-step.completed .gift-step-num::after {
content: '';
position: absolute;
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(0, -1px);
}
/* Hide number text when completed */
.gift-step.completed .gift-step-num span { opacity: 0; }
.gift-step.completed .gift-step-label {
color: var(--gift-step-done);
}
/* ── Step Content Panels ─────────────────────────────────── */
.gift-step-content {
padding: 0 1.5rem 1.5rem;
animation: giftFadeIn 0.25s ease;
min-height: 200px;
}
.gift-step-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--heading);
margin-bottom: 0.75rem;
}
/* ── Badge Selection Grid ────────────────────────────────── */
.gift-badge-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
max-height: 320px;
overflow-y: auto;
padding: 0.25rem;
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) transparent;
}
.gift-badge-grid::-webkit-scrollbar { width: 4px; }
.gift-badge-grid::-webkit-scrollbar-track { background: transparent; }
.gift-badge-grid::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.gift-badge-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0.6rem 0.35rem;
border-radius: 10px;
background: var(--gift-card-bg);
border: 1.5px solid var(--gift-card-border);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.gift-badge-card:hover {
background: var(--gift-card-hover);
border-color: rgba(245, 158, 11, 0.2);
transform: translateY(-1px);
}
.gift-badge-card-img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
transition: transform 0.2s ease;
}
.gift-badge-card:hover .gift-badge-card-img {
transform: scale(1.05);
}
.gift-badge-card-name {
font-size: 0.6rem;
color: var(--muted);
text-align: center;
line-height: 1.2;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.2s ease;
}
.gift-badge-card:hover .gift-badge-card-name {
color: var(--heading);
}
/* Selected badge */
.gift-badge-card.selected {
border-color: var(--ember);
background: var(--gift-selected-glow);
box-shadow: 0 0 20px var(--gift-ribbon-shadow), inset 0 0 12px var(--gift-selected-glow);
}
.gift-badge-card.selected .gift-badge-card-img {
transform: scale(1.08);
}
.gift-badge-card.selected .gift-badge-card-name {
color: var(--ember);
font-weight: 600;
}
/* Selection checkmark on badge */
.gift-badge-card.selected::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ember);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.gift-badge-card.selected::before {
content: '';
position: absolute;
top: 8px;
right: 9px;
width: 8px;
height: 4px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg);
z-index: 1;
}
/* ── User / Recipient Selection ──────────────────────────── */
.gift-user-search {
position: relative;
margin-bottom: 0.65rem;
}
.gift-user-search input {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--gift-card-bg);
color: var(--heading);
font-size: 0.78rem;
font-family: inherit;
outline: none;
transition: border-color 0.2s ease;
}
.gift-user-search input:focus {
border-color: var(--ember);
}
.gift-user-search input::placeholder {
color: var(--input-placeholder);
}
.gift-user-search svg {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--muted);
}
.gift-user-list {
display: flex;
flex-direction: column;
gap: 0.2rem;
max-height: 280px;
overflow-y: auto;
padding: 0.15rem;
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) transparent;
}
.gift-user-list::-webkit-scrollbar { width: 4px; }
.gift-user-list::-webkit-scrollbar-track { background: transparent; }
.gift-user-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.gift-user-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.6rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
border: 1.5px solid transparent;
}
.gift-user-item:hover {
background: var(--gift-user-hover);
}
.gift-user-avatar {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--steel);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--heading);
overflow: hidden;
border: 1.5px solid var(--avatar-border-color);
}
.gift-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gift-user-name {
font-size: 0.8rem;
font-weight: 500;
color: var(--heading);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gift-user-username {
font-size: 0.68rem;
color: var(--muted);
margin-left: auto;
flex-shrink: 0;
}
/* Selected user */
.gift-user-item.selected {
background: var(--gift-selected-glow);
border-color: var(--ember);
}
.gift-user-item.selected .gift-user-name {
color: var(--ember);
}
/* Checkmark for selected user */
.gift-user-item.selected::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ember);
transform: translateY(-50%);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.gift-user-item.selected::before {
content: '';
position: absolute;
right: 17px;
top: 50%;
width: 8px;
height: 4px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translateY(-60%) rotate(-45deg);
z-index: 1;
}
/* ── Gift Preview / Confirmation ─────────────────────────── */
.gift-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
position: relative;
}
.gift-preview-card {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1.5rem;
border-radius: 14px;
background: var(--gift-preview-bg);
border: 1.5px solid var(--gift-card-border);
width: 100%;
position: relative;
overflow: hidden;
}
/* Decorative ribbon stripe at top of preview card */
.gift-preview-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gift-ribbon);
}
.gift-preview-badge-img {
width: 72px;
height: 72px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.gift-preview-info {
flex: 1;
min-width: 0;
}
.gift-preview-badge-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--heading);
margin-bottom: 0.15rem;
}
.gift-preview-arrow {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
color: var(--muted);
margin-bottom: 0.35rem;
}
.gift-preview-arrow svg {
width: 14px;
height: 14px;
color: var(--ember);
}
.gift-preview-recipient {
display: flex;
align-items: center;
gap: 0.5rem;
}
.gift-preview-recipient-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--steel);
overflow: hidden;
flex-shrink: 0;
}
.gift-preview-recipient-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gift-preview-recipient-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--ember);
}
/* Message input */
.gift-message-wrap {
width: 100%;
}
.gift-message-label {
font-size: 0.7rem;
color: var(--muted);
margin-bottom: 0.35rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.gift-message-label span {
font-size: 0.62rem;
opacity: 0.6;
}
.gift-message-input {
width: 100%;
padding: 0.6rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--gift-msg-border);
background: var(--gift-msg-bg);
color: var(--heading);
font-size: 0.78rem;
font-family: inherit;
resize: none;
height: 56px;
outline: none;
transition: border-color 0.2s ease;
}
.gift-message-input:focus {
border-color: var(--ember);
}
.gift-message-input::placeholder {
color: var(--input-placeholder);
}
/* ── Gift Ribbon Decoration ──────────────────────────────── */
.gift-ribbon {
position: absolute;
top: -6px;
right: -6px;
width: 64px;
height: 64px;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.gift-ribbon::before {
content: 'GIFT';
position: absolute;
right: -18px;
top: 14px;
width: 90px;
text-align: center;
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #fff;
background: var(--gift-ribbon);
transform: rotate(45deg);
padding: 3px 0;
box-shadow: 0 2px 8px var(--gift-ribbon-shadow);
}
/* ── Charge Badge Indicator ──────────────────────────────── */
.gift-charge-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.55rem;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
background: var(--gift-charge-bg);
border: 1px solid var(--gift-charge-border);
color: var(--gift-charge-text);
}
.gift-charge-badge svg {
width: 12px;
height: 12px;
}
.gift-charge-badge.spent {
background: var(--gift-charge-spent);
border-color: var(--gift-charge-spent-border);
color: var(--gift-charge-spent-text);
}
/* ── Success State ───────────────────────────────────────── */
.gift-success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
min-height: 240px;
background: var(--gift-success-bg);
border-radius: 0 0 var(--radius) var(--radius);
}
.gift-success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gift-step-done);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
animation: giftSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
.gift-success-icon svg {
width: 28px;
height: 28px;
color: #fff;
}
.gift-success-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--heading);
margin-bottom: 0.3rem;
}
.gift-success-subtitle {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.4;
max-width: 320px;
}
.gift-success-kp {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.6rem;
border-radius: 20px;
background: var(--gift-charge-bg);
border: 1px solid var(--gift-charge-border);
color: var(--gift-charge-text);
font-size: 0.7rem;
font-weight: 600;
margin-top: 0.75rem;
}
/* CSS-only confetti particles */
.gift-success::before,
.gift-success::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.gift-success.celebrating::before {
background-image:
radial-gradient(circle, var(--gift-confetti-a) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-b) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-c) 2px, transparent 2px),
radial-gradient(circle, var(--gift-confetti-d) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-a) 2px, transparent 2px),
radial-gradient(circle, var(--gift-confetti-c) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-b) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-d) 2px, transparent 2px);
background-size: 7% 7%, 8% 8%, 6% 6%, 9% 9%, 7% 7%, 8% 8%, 6% 6%, 9% 9%;
background-position:
10% 0%, 30% 0%, 50% 0%, 70% 0%,
20% 0%, 40% 0%, 60% 0%, 80% 0%;
animation: giftConfettiFall 2.5s ease-out forwards;
z-index: 0;
}
.gift-success.celebrating::after {
background-image:
radial-gradient(circle, var(--gift-confetti-c) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-a) 2px, transparent 2px),
radial-gradient(circle, var(--gift-confetti-d) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-b) 2px, transparent 2px),
radial-gradient(circle, var(--gift-confetti-c) 1.5px, transparent 1.5px),
radial-gradient(circle, var(--gift-confetti-a) 1.5px, transparent 1.5px);
background-size: 8% 8%, 6% 6%, 7% 7%, 9% 9%, 6% 6%, 8% 8%;
background-position:
15% 0%, 35% 0%, 55% 0%, 75% 0%, 25% 0%, 85% 0%;
animation: giftConfettiFall 2.8s 0.15s ease-out forwards;
z-index: 0;
}
.gift-success > * {
position: relative;
z-index: 1;
}
/* ── Empty / No-Charge States ────────────────────────────── */
.gift-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem;
text-align: center;
gap: 0.5rem;
}
.gift-empty-icon {
width: 48px;
height: 48px;
color: var(--gift-empty-icon);
margin-bottom: 0.25rem;
}
.gift-empty-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--heading);
}
.gift-empty-desc {
font-size: 0.75rem;
color: var(--muted);
max-width: 280px;
line-height: 1.4;
}
/* ── Modal Footer overrides for gift flow ────────────────── */
.gift-modal .modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-top: 1px solid var(--border-light);
}
.gift-footer-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Send Gift button — special gradient treatment */
.gift-send-btn {
background: var(--gift-ribbon) !important;
color: #fff !important;
font-weight: 600;
border: none;
padding: 0.5rem 1.2rem;
border-radius: 8px;
font-size: 0.78rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.35rem;
box-shadow: 0 2px 12px var(--gift-ribbon-shadow);
}
.gift-send-btn:hover {
filter: brightness(1.1);
box-shadow: 0 4px 20px var(--gift-ribbon-shadow);
transform: translateY(-1px);
}
.gift-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
filter: none;
}
.gift-send-btn svg {
width: 16px;
height: 16px;
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes giftFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes giftSuccessPop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes giftConfettiFall {
0% {
opacity: 1;
background-position:
10% -10%, 30% -15%, 50% -5%, 70% -12%,
20% -8%, 40% -10%, 60% -14%, 80% -6%;
}
100% {
opacity: 0;
background-position:
5% 105%, 25% 115%, 55% 100%, 65% 110%,
15% 108%, 45% 112%, 58% 95%, 85% 105%;
}
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
.gift-modal {
max-width: 100%;
width: 100%;
margin: 0;
border-radius: 0;
max-height: 100dvh;
}
.gift-steps {
padding: 1rem 1rem 0.75rem;
}
.gift-step-line {
min-width: 28px;
}
.gift-step-label {
font-size: 0.58rem;
}
.gift-step-content {
padding: 0 1rem 1rem;
}
.gift-badge-grid {
grid-template-columns: repeat(3, 1fr);
max-height: 260px;
}
.gift-badge-card-img {
width: 48px;
height: 48px;
}
.gift-preview-card {
padding: 0.85rem 1rem;
gap: 0.85rem;
}
.gift-preview-badge-img {
width: 56px;
height: 56px;
}
}
/* ═══════════════════════════════════════════════════════════════
LEVEL JOURNEY — Deep-Sea Progression Map
RPG skill tree × bioluminescent ocean cartography.
58 levels, 6 eras, one glowing spine.
═══════════════════════════════════════════════════════════════ */
/* ── Level Journey Variables ─────────────────────────────────── */
:root {
--tj-spine-width: 3px;
--tj-node-size: 64px;
--tj-node-current-size: 96px;
--tj-connector-length: 52px;
--tj-path-max: 700px;
--tj-gutter: 24px;
--tj-locked-opacity: 0.38;
--tj-detail-bg: rgba(6, 6, 14, 0.92);
--tj-detail-border: rgba(245, 158, 11, 0.15);
--tj-scan-line: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(255, 255, 255, 0.018) 3px,
rgba(255, 255, 255, 0.018) 4px
);
}
html[data-theme="light"] {
--tj-locked-opacity: 0.32;
--tj-detail-bg: rgba(255, 255, 255, 0.95);
--tj-detail-border: rgba(245, 158, 11, 0.2);
--tj-scan-line: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0, 0, 0, 0.02) 3px,
rgba(0, 0, 0, 0.02) 4px
);
}
/* ── Main Container ─────────────────────────────────────────── */
.tj {
position: relative;
padding: 0 0 4rem;
}
/* ── Toolbar — era pills + jump button ──────────────────────── */
.tj-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
}
.tj-toolbar .tj-era-pills {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
flex: 1;
}
.tj-era-pill {
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.tj-era-pill:hover {
background: var(--cavern);
color: var(--text);
}
.tj-era-pill.active {
background: var(--ember);
color: #fff;
border-color: var(--ember);
}
html[data-theme="light"] .tj-era-pill:hover {
background: rgba(0, 0, 0, 0.05);
}
/* ── Timeline Path Container ────────────────────────────────── */
.tj-path {
position: relative;
max-width: var(--tj-path-max);
margin: 0 auto;
scroll-behavior: smooth;
}
/* ── Era Sections ───────────────────────────────────────────── */
.tj-era {
position: relative;
padding: 0 0 1rem;
}
/* Subtle era background tint */
.tj-era::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
opacity: 0.35;
pointer-events: none;
transition: opacity 0.6s;
}
.tj-era[data-era="scribbles"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-scribbles-bg) 0%, transparent 70%); }
.tj-era[data-era="watercolor"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-watercolor-bg) 0%, transparent 70%); }
.tj-era[data-era="comic"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-comic-bg) 0%, transparent 70%); }
.tj-era[data-era="oil_painting"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-oil_painting-bg) 0%, transparent 70%); }
.tj-era[data-era="hyper_3d"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-hyper_3d-bg) 0%, transparent 70%); }
.tj-era[data-era="epic_fantasy"]::before { background: radial-gradient(ellipse at 50% 30%, var(--era-epic_fantasy-bg) 0%, transparent 70%); }
/* ── Era Header — chapter markers ───────────────────────────── */
.tj-era-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 0 1rem;
position: relative;
z-index: 1;
}
.tj-era-header::before,
.tj-era-header::after {
content: '';
flex: 1;
height: 1px;
}
.tj-era[data-era="scribbles"] .tj-era-header::before,
.tj-era[data-era="scribbles"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-scribbles) 40%, var(--era-scribbles) 60%, transparent); opacity: 0.25; }
.tj-era[data-era="watercolor"] .tj-era-header::before,
.tj-era[data-era="watercolor"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-watercolor) 40%, var(--era-watercolor) 60%, transparent); opacity: 0.25; }
.tj-era[data-era="comic"] .tj-era-header::before,
.tj-era[data-era="comic"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-comic) 40%, var(--era-comic) 60%, transparent); opacity: 0.25; }
.tj-era[data-era="oil_painting"] .tj-era-header::before,
.tj-era[data-era="oil_painting"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-oil_painting) 40%, var(--era-oil_painting) 60%, transparent); opacity: 0.25; }
.tj-era[data-era="hyper_3d"] .tj-era-header::before,
.tj-era[data-era="hyper_3d"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-hyper_3d) 40%, var(--era-hyper_3d) 60%, transparent); opacity: 0.25; }
.tj-era[data-era="epic_fantasy"] .tj-era-header::before,
.tj-era[data-era="epic_fantasy"] .tj-era-header::after { background: linear-gradient(90deg, transparent, var(--era-epic_fantasy) 40%, var(--era-epic_fantasy) 60%, transparent); opacity: 0.25; }
.tj-era-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.2rem 0.85rem;
border-radius: 20px;
border: 1px solid;
white-space: nowrap;
flex-shrink: 0;
}
.tj-era[data-era="scribbles"] .tj-era-label { color: var(--era-scribbles); border-color: var(--era-scribbles); background: var(--era-scribbles-bg); }
.tj-era[data-era="watercolor"] .tj-era-label { color: var(--era-watercolor); border-color: var(--era-watercolor); background: var(--era-watercolor-bg); }
.tj-era[data-era="comic"] .tj-era-label { color: var(--era-comic); border-color: var(--era-comic); background: var(--era-comic-bg); }
.tj-era[data-era="oil_painting"] .tj-era-label { color: var(--era-oil_painting); border-color: var(--era-oil_painting); background: var(--era-oil_painting-bg); }
.tj-era[data-era="hyper_3d"] .tj-era-label { color: var(--era-hyper_3d); border-color: var(--era-hyper_3d); background: var(--era-hyper_3d-bg); }
.tj-era[data-era="epic_fantasy"] .tj-era-label { color: var(--era-epic_fantasy); border-color: var(--era-epic_fantasy); background: var(--era-epic_fantasy-bg); }
.tj-era-range {
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.04em;
}
/* ── Spine — the glowing vertical path ──────────────────────── */
.tj-spine {
position: relative;
z-index: 0;
}
/* Core line — positioned at center via pseudo-element */
.tj-spine::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: var(--tj-spine-width);
transform: translateX(-50%);
border-radius: 2px;
background: var(--border);
opacity: 0.5;
}
/* Glow overlay — animated pulse */
.tj-spine::after {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: calc(var(--tj-spine-width) + 6px);
transform: translateX(-50%);
border-radius: 4px;
animation: tjSpinePulse 4s ease-in-out infinite;
opacity: 0.4;
}
/* Spine color per era */
.tj-era[data-era="scribbles"] .tj-spine::before { background: var(--era-scribbles); }
.tj-era[data-era="scribbles"] .tj-spine::after { background: var(--era-scribbles); box-shadow: 0 0 12px var(--era-scribbles-glow); }
.tj-era[data-era="watercolor"] .tj-spine::before { background: var(--era-watercolor); }
.tj-era[data-era="watercolor"] .tj-spine::after { background: var(--era-watercolor); box-shadow: 0 0 12px var(--era-watercolor-glow); }
.tj-era[data-era="comic"] .tj-spine::before { background: var(--era-comic); }
.tj-era[data-era="comic"] .tj-spine::after { background: var(--era-comic); box-shadow: 0 0 12px var(--era-comic-glow); }
.tj-era[data-era="oil_painting"] .tj-spine::before { background: var(--era-oil_painting); }
.tj-era[data-era="oil_painting"] .tj-spine::after { background: var(--era-oil_painting); box-shadow: 0 0 12px var(--era-oil_painting-glow); }
.tj-era[data-era="hyper_3d"] .tj-spine::before { background: var(--era-hyper_3d); }
.tj-era[data-era="hyper_3d"] .tj-spine::after { background: var(--era-hyper_3d); box-shadow: 0 0 12px var(--era-hyper_3d-glow); }
.tj-era[data-era="epic_fantasy"] .tj-spine::before { background: var(--era-epic_fantasy); }
.tj-era[data-era="epic_fantasy"] .tj-spine::after { background: var(--era-epic_fantasy); box-shadow: 0 0 12px var(--era-epic_fantasy-glow); }
/* ── Level Node — the core building block ────────────────────── */
.tj-node {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0;
z-index: 1;
cursor: pointer;
transition: transform 0.25s ease;
/* Default: left side (image + info flow left-to-right) */
width: 50%;
margin-left: 50%;
padding-left: calc(var(--tj-connector-length) + 12px);
}
/* Alternate right side — even nodes */
.tj-node:nth-child(even) {
margin-left: 0;
margin-right: 50%;
padding-left: 0;
padding-right: calc(var(--tj-connector-length) + 12px);
flex-direction: row-reverse;
text-align: right;
}
.tj-node:hover {
transform: scale(1.03);
}
/* ── Connector — horizontal line from spine to node ─────────── */
.tj-node-connector {
position: absolute;
top: 50%;
width: var(--tj-connector-length);
height: 2px;
transform: translateY(-50%);
opacity: 0.3;
/* Default: left side (connector goes from left edge toward spine) */
left: 0;
background: linear-gradient(90deg, transparent, var(--era-scribbles));
}
.tj-node:nth-child(even) .tj-node-connector {
left: auto;
right: 0;
background: linear-gradient(270deg, transparent, var(--era-scribbles));
}
/* Connector era colors */
.tj-era[data-era="scribbles"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-scribbles)); }
.tj-era[data-era="watercolor"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-watercolor)); }
.tj-era[data-era="comic"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-comic)); }
.tj-era[data-era="oil_painting"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-oil_painting)); }
.tj-era[data-era="hyper_3d"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-hyper_3d)); }
.tj-era[data-era="epic_fantasy"] .tj-node-connector { background: linear-gradient(90deg, transparent, var(--era-epic_fantasy)); }
.tj-era[data-era="scribbles"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-scribbles)); }
.tj-era[data-era="watercolor"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-watercolor)); }
.tj-era[data-era="comic"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-comic)); }
.tj-era[data-era="oil_painting"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-oil_painting)); }
.tj-era[data-era="hyper_3d"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-hyper_3d)); }
.tj-era[data-era="epic_fantasy"] .tj-node:nth-child(even) .tj-node-connector { background: linear-gradient(270deg, transparent, var(--era-epic_fantasy)); }
/* Reached nodes get brighter connectors */
.tj-node.reached .tj-node-connector,
.tj-node.current .tj-node-connector {
opacity: 0.6;
height: 2px;
}
/* ── Node Image — round level portrait ───────────────────────── */
.tj-node-image {
width: var(--tj-node-size);
height: var(--tj-node-size);
min-width: var(--tj-node-size);
border-radius: 50%;
overflow: hidden;
position: relative;
border: 2px solid var(--border);
background: var(--cavern);
transition: border-color 0.35s, box-shadow 0.35s, transform 0.3s;
}
.tj-node-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Reached level images — vivid, glowing border */
.tj-node.reached .tj-node-image {
border-color: var(--era-scribbles);
box-shadow: 0 0 10px var(--era-scribbles-glow);
}
.tj-era[data-era="scribbles"] .tj-node.reached .tj-node-image { border-color: var(--era-scribbles); box-shadow: 0 0 10px var(--era-scribbles-glow); }
.tj-era[data-era="watercolor"] .tj-node.reached .tj-node-image { border-color: var(--era-watercolor); box-shadow: 0 0 10px var(--era-watercolor-glow); }
.tj-era[data-era="comic"] .tj-node.reached .tj-node-image { border-color: var(--era-comic); box-shadow: 0 0 10px var(--era-comic-glow); }
.tj-era[data-era="oil_painting"] .tj-node.reached .tj-node-image { border-color: var(--era-oil_painting); box-shadow: 0 0 10px var(--era-oil_painting-glow); }
.tj-era[data-era="hyper_3d"] .tj-node.reached .tj-node-image { border-color: var(--era-hyper_3d); box-shadow: 0 0 10px var(--era-hyper_3d-glow); }
.tj-era[data-era="epic_fantasy"] .tj-node.reached .tj-node-image { border-color: var(--era-epic_fantasy); box-shadow: 0 0 10px var(--era-epic_fantasy-glow); }
/* ── Current Level — the hero node ───────────────────────────── */
.tj-node.current {
padding-top: 1rem;
padding-bottom: 1rem;
}
.tj-node.current .tj-node-image {
width: var(--tj-node-current-size);
height: var(--tj-node-current-size);
min-width: var(--tj-node-current-size);
border-width: 3px;
animation: tjCurrentBreathe 3s ease-in-out infinite;
}
.tj-era[data-era="scribbles"] .tj-node.current .tj-node-image { border-color: var(--era-scribbles); }
.tj-era[data-era="watercolor"] .tj-node.current .tj-node-image { border-color: var(--era-watercolor); }
.tj-era[data-era="comic"] .tj-node.current .tj-node-image { border-color: var(--era-comic); }
.tj-era[data-era="oil_painting"] .tj-node.current .tj-node-image { border-color: var(--era-oil_painting); }
.tj-era[data-era="hyper_3d"] .tj-node.current .tj-node-image { border-color: var(--era-hyper_3d); }
.tj-era[data-era="epic_fantasy"] .tj-node.current .tj-node-image { border-color: var(--era-epic_fantasy); }
/* ── Node Placeholder — number fallback ─────────────────────── */
.tj-node-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
background: var(--cavern);
}
html[data-theme="light"] .tj-node-placeholder {
color: rgba(0, 0, 0, 0.5);
background: #e5e7eb;
}
/* Era-gradient placeholders */
.tj-era[data-era="scribbles"] .tj-node-placeholder { background: linear-gradient(135deg, #4b5563, #6b7280); }
.tj-era[data-era="watercolor"] .tj-node-placeholder { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.tj-era[data-era="comic"] .tj-node-placeholder { background: linear-gradient(135deg, #dc2626, #f87171); }
.tj-era[data-era="oil_painting"] .tj-node-placeholder { background: linear-gradient(135deg, #d97706, #fbbf24); }
.tj-era[data-era="hyper_3d"] .tj-node-placeholder { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.tj-era[data-era="epic_fantasy"] .tj-node-placeholder { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
html[data-theme="light"] .tj-era[data-era="scribbles"] .tj-node-placeholder { background: linear-gradient(135deg, #9ca3af, #d1d5db); color: #374151; }
html[data-theme="light"] .tj-era[data-era="watercolor"] .tj-node-placeholder { background: linear-gradient(135deg, #60a5fa, #93c5fd); color: #1e3a5f; }
html[data-theme="light"] .tj-era[data-era="comic"] .tj-node-placeholder { background: linear-gradient(135deg, #f87171, #fca5a5); color: #7f1d1d; }
html[data-theme="light"] .tj-era[data-era="oil_painting"] .tj-node-placeholder { background: linear-gradient(135deg, #fbbf24, #fde68a); color: #713f12; }
html[data-theme="light"] .tj-era[data-era="hyper_3d"] .tj-node-placeholder { background: linear-gradient(135deg, #22d3ee, #67e8f9); color: #164e63; }
html[data-theme="light"] .tj-era[data-era="epic_fantasy"] .tj-node-placeholder { background: linear-gradient(135deg, #a78bfa, #c4b5fd); color: #3b0764; }
/* Current level — bigger placeholder text */
.tj-node.current .tj-node-placeholder {
font-size: 1.6rem;
}
/* ── Node Info — text block ─────────────────────────────────── */
.tj-node-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.tj-node-name {
font-size: 1.05rem;
font-weight: 600;
color: var(--heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.tj-node.current .tj-node-name {
font-size: 1.2rem;
color: var(--ember);
}
.tj-node-level {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.tj-node-kp {
font-size: 0.82rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 0.25rem;
}
.tj-node:nth-child(even) .tj-node-kp {
justify-content: flex-end;
}
.tj-node-kp .karma-symbol {
opacity: 0.6;
}
.tj-node-desc {
font-size: 0.82rem;
font-style: italic;
color: var(--steel);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 0.15rem;
max-width: 240px;
}
.tj-node.current .tj-node-desc {
max-width: 280px;
color: var(--muted);
}
.tj-node:nth-child(even) .tj-node-desc {
text-align: right;
}
.tj-node.locked .tj-node-desc {
display: none;
}
.tj-node-users {
font-size: 0.72rem;
color: var(--steel);
opacity: 0.7;
margin-top: 0.1rem;
}
/* ── Mini Progress Bar (current level only) ──────────────────── */
.tj-node-progress {
width: 100%;
max-width: 120px;
height: 4px;
border-radius: 2px;
background: var(--border);
overflow: hidden;
margin-top: 0.25rem;
}
.tj-node:nth-child(even) .tj-node-progress {
margin-left: auto;
}
.tj-node-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--ember);
transition: width 0.6s ease;
}
/* ── Locked Levels — the deep unknown ────────────────────────── */
.tj-node.locked {
cursor: default;
}
.tj-node.locked .tj-node-image {
filter: grayscale(0.85) brightness(0.55);
opacity: var(--tj-locked-opacity);
border-color: var(--border);
box-shadow: none;
}
html[data-theme="light"] .tj-node.locked .tj-node-image {
filter: grayscale(0.7) brightness(0.85);
}
.tj-node.locked .tj-node-info {
opacity: var(--tj-locked-opacity);
}
.tj-node.locked:hover {
transform: none;
}
/* Lock icon overlay */
.tj-node-lock {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.25);
border-radius: 50%;
z-index: 2;
}
.tj-node-lock svg {
width: 18px;
height: 18px;
opacity: 0.5;
color: var(--muted);
}
.tj-node.current .tj-node-lock,
.tj-node.reached .tj-node-lock {
display: none;
}
/* Scan lines on locked levels */
.tj-node.locked .tj-node-image::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--tj-scan-line);
pointer-events: none;
z-index: 1;
}
/* ── Detail Overlay — click-to-expand ───────────────────────── */
.tj-detail-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.tj-detail-overlay.open {
opacity: 1;
visibility: visible;
}
.tj-detail-panel {
background: var(--tj-detail-bg);
border: 1px solid var(--tj-detail-border);
border-bottom: none;
border-radius: 16px 16px 0 0;
width: 100%;
max-width: 480px;
max-height: 85vh;
overflow-y: auto;
padding: 1.75rem 1.5rem 2rem;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.tj-detail-overlay.open .tj-detail-panel {
transform: translateY(0);
}
html[data-theme="light"] .tj-detail-panel {
background: var(--tj-detail-bg);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.1);
}
/* Pull handle */
.tj-detail-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--border);
margin: 0 auto 1.25rem;
}
.tj-detail-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: var(--cavern);
color: var(--muted);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.tj-detail-close:hover {
background: var(--border);
color: var(--heading);
}
.tj-detail-close svg {
width: 14px;
height: 14px;
}
/* Detail Image */
.tj-detail-image {
width: 160px;
height: 160px;
border-radius: 50%;
margin: 0 auto 1.25rem;
overflow: hidden;
border: 3px solid var(--border);
background: var(--cavern);
}
.tj-detail-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tj-detail-image .tj-node-placeholder {
font-size: 3rem;
}
/* Detail reached/current — era glow */
.tj-detail-overlay[data-state="reached"] .tj-detail-image,
.tj-detail-overlay[data-state="current"] .tj-detail-image {
border-color: var(--ember);
box-shadow: 0 0 24px var(--era-scribbles-glow);
}
/* Detail Meta */
.tj-detail-meta {
text-align: center;
position: relative;
}
.tj-detail-era-badge {
display: inline-block;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.15rem 0.65rem;
border-radius: 12px;
border: 1px solid;
margin-bottom: 0.5rem;
}
.tj-detail-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--heading);
margin-bottom: 0.15rem;
}
.tj-detail-level {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.65rem;
}
.tj-detail-desc {
font-size: 0.78rem;
color: var(--text);
line-height: 1.55;
margin-bottom: 1rem;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.tj-detail-kp {
font-size: 0.75rem;
font-weight: 600;
color: var(--ember);
margin-bottom: 0.4rem;
}
.tj-detail-users {
font-size: 0.65rem;
color: var(--muted);
margin-bottom: 0.75rem;
}
.tj-detail-era[data-era="scribbles"] { color: var(--era-scribbles); }
.tj-detail-era[data-era="watercolor"] { color: var(--era-watercolor); }
.tj-detail-era[data-era="comic"] { color: var(--era-comic); }
.tj-detail-era[data-era="oil_painting"] { color: var(--era-oil_painting); }
.tj-detail-era[data-era="hyper_3d"] { color: var(--era-hyper_3d); }
.tj-detail-era[data-era="epic_fantasy"] { color: var(--era-epic_fantasy); }
.tj-detail-status {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.3rem 0.8rem;
border-radius: 12px;
display: inline-block;
margin-top: 0.5rem;
}
.tj-detail-status.reached {
color: #22c55e;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.tj-detail-status.locked {
color: var(--muted);
background: var(--tj-detail-bg);
border: 1px solid var(--border);
}
.tj-detail-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
padding-top: 0.85rem;
border-top: 1px solid var(--border);
}
.tj-detail-stat {
text-align: center;
}
.tj-detail-stat-value {
font-size: 1rem;
font-weight: 700;
color: var(--heading);
}
.tj-detail-stat-label {
font-size: 0.6rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Detail progress bar (for current level) */
.tj-detail-progress {
margin: 0.85rem auto 0;
max-width: 280px;
}
.tj-detail-progress-bar {
height: 6px;
border-radius: 3px;
background: var(--border);
overflow: hidden;
}
.tj-detail-progress-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--ember), var(--flame));
transition: width 0.6s ease;
}
.tj-detail-progress-label {
display: flex;
justify-content: space-between;
font-size: 0.6rem;
color: var(--muted);
margin-top: 0.35rem;
}
/* ── Jump to My Level Button ─────────────────────────────────── */
.tj-jump-btn {
position: sticky;
bottom: 1rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0.5rem auto 0;
padding: 0.5rem 1rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, var(--ember), var(--flame));
border: none;
border-radius: 24px;
cursor: pointer;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.15);
transition: transform 0.2s, box-shadow 0.2s;
}
.tj-jump-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(245, 158, 11, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.tj-jump-btn svg {
width: 14px;
height: 14px;
}
html[data-theme="light"] .tj-jump-btn {
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}
/* ── Loading State ──────────────────────────────────────────── */
.tj-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 3rem 0;
color: var(--muted);
font-size: 0.8rem;
}
.tj-loading-spine {
width: 3px;
height: 200px;
border-radius: 2px;
background: linear-gradient(180deg, var(--era-scribbles), var(--era-watercolor), var(--era-comic), var(--era-oil_painting), var(--era-hyper_3d), var(--era-epic_fantasy));
animation: tjLoadingPulse 1.5s ease-in-out infinite;
}
/* ── Empty State ────────────────────────────────────────────── */
.tj-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--muted);
}
.tj-empty-icon svg {
width: 48px;
height: 48px;
opacity: 0.3;
margin-bottom: 0.75rem;
}
.tj-empty-title {
font-size: 1rem;
font-weight: 600;
color: var(--heading);
margin-bottom: 0.35rem;
}
.tj-empty-text {
font-size: 0.78rem;
}
/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes tjSpinePulse {
0%, 100% { opacity: 0.25; }
50% { opacity: 0.6; }
}
@keyframes tjCurrentBreathe {
0%, 100% {
box-shadow: 0 0 12px var(--era-scribbles-glow), 0 0 28px transparent;
transform: scale(1);
}
50% {
box-shadow: 0 0 18px var(--era-scribbles-glow), 0 0 36px var(--era-scribbles-glow);
transform: scale(1.035);
}
}
/* Era-specific breathing glow */
.tj-era[data-era="scribbles"] .tj-node.current .tj-node-image { animation-name: tjBreatheScribbles; }
.tj-era[data-era="watercolor"] .tj-node.current .tj-node-image { animation-name: tjBreatheWatercolor; }
.tj-era[data-era="comic"] .tj-node.current .tj-node-image { animation-name: tjBreatheComic; }
.tj-era[data-era="oil_painting"] .tj-node.current .tj-node-image { animation-name: tjBreatheOilPainting; }
.tj-era[data-era="hyper_3d"] .tj-node.current .tj-node-image { animation-name: tjBreatheHyper3d; }
.tj-era[data-era="epic_fantasy"] .tj-node.current .tj-node-image { animation-name: tjBreatheEpicFantasy; }
@keyframes tjBreatheScribbles {
0%, 100% { box-shadow: 0 0 12px var(--era-scribbles-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-scribbles-glow), 0 0 48px var(--era-scribbles-glow); transform: scale(1.035); }
}
@keyframes tjBreatheWatercolor {
0%, 100% { box-shadow: 0 0 12px var(--era-watercolor-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-watercolor-glow), 0 0 48px var(--era-watercolor-glow); transform: scale(1.035); }
}
@keyframes tjBreatheComic {
0%, 100% { box-shadow: 0 0 12px var(--era-comic-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-comic-glow), 0 0 48px var(--era-comic-glow); transform: scale(1.035); }
}
@keyframes tjBreatheOilPainting {
0%, 100% { box-shadow: 0 0 12px var(--era-oil_painting-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-oil_painting-glow), 0 0 48px var(--era-oil_painting-glow); transform: scale(1.035); }
}
@keyframes tjBreatheHyper3d {
0%, 100% { box-shadow: 0 0 12px var(--era-hyper_3d-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-hyper_3d-glow), 0 0 48px var(--era-hyper_3d-glow); transform: scale(1.035); }
}
@keyframes tjBreatheEpicFantasy {
0%, 100% { box-shadow: 0 0 12px var(--era-epic_fantasy-glow); transform: scale(1); }
50% { box-shadow: 0 0 24px var(--era-epic_fantasy-glow), 0 0 48px var(--era-epic_fantasy-glow); transform: scale(1.035); }
}
@keyframes tjNodeAppear {
from {
opacity: 0;
transform: translateY(12px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes tjLoadingPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
/* ── Responsive — Mobile (<640px) ───────────────────────────── */
@media (max-width: 640px) {
.tj-path {
max-width: 100%;
}
/* No alternating on mobile — everything flows single column */
.tj-node,
.tj-node:nth-child(even) {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 3rem;
padding-right: 0.5rem;
flex-direction: row;
text-align: left;
}
.tj-spine {
left: 1rem;
transform: none;
}
.tj-node-connector,
.tj-node:nth-child(even) .tj-node-connector {
left: 0;
right: auto;
width: 2rem;
background: linear-gradient(90deg, transparent, var(--border)) !important;
}
.tj-node:nth-child(even) .tj-node-kp {
justify-content: flex-start;
}
.tj-node:nth-child(even) .tj-node-progress {
margin-left: 0;
}
.tj-node.current::after {
left: auto;
right: 0.5rem;
transform: none;
}
.tj-node-image {
width: 48px;
height: 48px;
min-width: 48px;
}
.tj-node.current .tj-node-image {
width: 72px;
height: 72px;
min-width: 72px;
}
.tj-era-header {
padding: 1rem 0 0.75rem;
}
.tj-toolbar {
flex-direction: column;
align-items: stretch;
}
.tj-toolbar .tj-era-pills {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tj-toolbar .tj-era-pills::-webkit-scrollbar {
display: none;
}
.tj-detail-panel {
padding: 1.25rem 1rem 1.5rem;
}
.tj-detail-image {
width: 120px;
height: 120px;
}
}
/* ══════════════════════════════════════════════════════════════
Badge Management — Game Inventory / Collectible Card Catalog
Prefix: .bm-
══════════════════════════════════════════════════════════════ */
/* ── Category Color Tokens ──────────────────────────────────── */
:root {
--bm-cat-engagement: #f59e0b;
--bm-cat-performance: #ef4444;
--bm-cat-streak: #f97316;
--bm-cat-milestone: #10b981;
--bm-cat-special: #a78bfa;
--bm-cat-karma: #fbbf24;
--bm-cat-crawler: #22d3ee;
--bm-cat-connector: #3b82f6;
--bm-cat-social: #ec4899;
--bm-cat-time: #94a3b8;
--bm-cat-default: var(--muted);
--bm-card-bg: rgba(15, 15, 30, 0.55);
--bm-preview-bg: rgba(10, 10, 22, 0.95);
}
html[data-theme="light"] {
--bm-cat-engagement: #d97706;
--bm-cat-performance: #dc2626;
--bm-cat-streak: #ea580c;
--bm-cat-milestone: #059669;
--bm-cat-special: #7c3aed;
--bm-cat-karma: #ca8a04;
--bm-cat-crawler: #0891b2;
--bm-cat-connector: #2563eb;
--bm-cat-social: #db2777;
--bm-cat-time: #64748b;
--bm-cat-default: var(--muted);
--bm-card-bg: rgba(255, 255, 255, 0.7);
--bm-preview-bg: rgba(255, 255, 255, 0.97);
}
/* ── Badge Pic Sizes (square, rounded corners) ────────────── */
.badge-pic-10 { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; overflow: hidden; }
.badge-pic-20 { width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.badge-pic-30 { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; overflow: hidden; }
.badge-pic-40 { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; overflow: hidden; }
.badge-pic-50 { width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.badge-pic-60 { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; overflow: hidden; }
.badge-pic-10 img,
.badge-pic-20 img,
.badge-pic-30 img,
.badge-pic-40 img,
.badge-pic-50 img,
.badge-pic-60 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-pic-10:hover,
.badge-pic-20:hover,
.badge-pic-30:hover,
.badge-pic-40:hover,
.badge-pic-50:hover,
.badge-pic-60:hover { transform: scale(1.08); transition: transform 0.15s ease; }
.badge-thumb-placeholder {
background: var(--surface-raised);
border: 1px dashed var(--border-mid);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.badge-thumb-placeholder svg { width: 40%; height: 40%; }
/* Badge trigger cell (icon + label in table) */
.badge-trigger-cell { display: inline-flex; align-items: center; gap: 0.35rem; }
.badge-trigger-cell svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
/* Row inactive state for badge table */
.row-inactive { opacity: 0.5; }
/* Clickable table rows */
#badgeMgmtTable tbody tr { cursor: pointer; }
#badgeMgmtTable tbody tr:hover { background: var(--hover-muted); }
/* ── Old bm-card styles removed — replaced by data-table ──── */
/* ── Badge Preview Overlay ─────────────────────────────────── */
.bm-preview {
position: fixed;
inset: 0;
z-index: 2500;
display: flex;
align-items: center;
justify-content: center;
background: var(--bm-preview-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
}
.bm-preview.open {
opacity: 1;
visibility: visible;
}
.bm-preview-panel {
position: relative;
width: 90%;
max-width: 420px;
background: var(--bm-card-bg);
border: 1px solid var(--border-mid);
border-radius: 16px;
overflow: hidden;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.bm-preview.open .bm-preview-panel {
transform: scale(1) translateY(0);
}
/* Category accent strip on preview */
.bm-preview-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--bm-cat, var(--ember));
z-index: 1;
}
/* Badge preview close — .btn-icon base + absolute positioning + red hover */
.bm-preview-close {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--surface-raised);
border: 1px solid var(--border-hover);
color: var(--heading);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
z-index: 2;
}
.bm-preview-close:hover {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
}
.bm-preview-close svg { width: 16px; height: 16px; }
.bm-preview-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1.5rem 1.5rem;
gap: 1rem;
}
/* Large preview image */
.bm-preview-image {
width: 192px;
height: 192px;
border-radius: 16px;
overflow: hidden;
border: 3px solid color-mix(in srgb, var(--bm-cat, var(--ember)) 35%, transparent);
box-shadow: 0 0 32px color-mix(in srgb, var(--bm-cat, var(--ember)) 15%, transparent);
background: var(--surface-raised);
flex-shrink: 0;
}
.bm-preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bm-preview-image .bm-card-placeholder {
width: 100%;
height: 100%;
}
.bm-preview-image .bm-card-placeholder svg {
width: 48px;
height: 48px;
}
/* Meta information */
.bm-preview-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
width: 100%;
}
.bm-preview-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--heading);
line-height: 1.3;
}
.bm-preview-desc {
font-size: 0.75rem;
color: var(--muted);
line-height: 1.5;
max-width: 320px;
}
/* Preview info grid */
.bm-preview-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
width: 100%;
padding: 0.75rem;
background: var(--surface-raised);
border-radius: 10px;
border: 1px solid var(--border);
margin-top: 0.25rem;
}
.bm-preview-info-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.4rem 0.5rem;
}
.bm-preview-info-label {
font-size: 0.58rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.bm-preview-info-value {
font-size: 0.75rem;
font-weight: 600;
color: var(--heading);
display: flex;
align-items: center;
gap: 0.3rem;
}
.bm-preview-info-value svg {
width: 13px;
height: 13px;
color: var(--ember);
}
.bm-preview-actions {
display: flex;
gap: 0.5rem;
padding-top: 0.5rem;
width: 100%;
}
.bm-preview-actions .btn {
flex: 1;
justify-content: center;
}
html[data-theme="light"] .bm-preview-panel {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .bm-preview-info {
background: #f5f5f7;
border-color: #e5e7eb;
}
/* ── Old bm list/loading/shimmer/empty styles removed ─────── */
@keyframes bmPreviewIn {
from {
opacity: 0;
transform: scale(0.85) translateY(30px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ── Badge Preview Responsive ─────────────────────────────── */
@media (max-width: 640px) {
.bm-preview-image {
width: 140px;
height: 140px;
}
.bm-preview-body {
padding: 1.5rem 1rem 1rem;
}
}
/* ── Badge Table Responsive ───────────────────────────────── */
@media (max-width: 768px) {
#badgeMgmtTable .badge-pic-60 {
width: 48px;
height: 48px;
border-radius: 8px;
}
}
/* ── Theme Colorizer Widget ──────────────────────────────── */
/* Floating toggle button (right edge, vertically centered) */
.tc-toggle {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9998;
width: 36px;
height: 36px;
border: 1px solid #2a2a4a;
border-right: none;
border-radius: 8px 0 0 8px;
background: #161628;
color: #e8e8e8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.25);
}
.tc-toggle:hover {
background: #1e1e36;
width: 42px;
}
.tc-toggle img {
width: 20px;
height: 20px;
filter: invert(1) grayscale(1);
opacity: 0.45;
pointer-events: none;
}
html[data-theme="light"] .tc-toggle img {
filter: grayscale(1);
opacity: 0.4;
}
.tc-toggle.tc-active {
background: #f59e0b;
border-color: #f59e0b;
color: #fff;
}
/* Panel */
.tc-panel {
position: fixed;
right: -320px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 280px;
max-height: 80vh;
overflow-y: auto;
background: #0a0a16;
border: 1px solid #2a2a4a;
border-right: none;
border-radius: 12px 0 0 12px;
box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}
.tc-panel.tc-open {
right: 0;
}
.tc-panel::-webkit-scrollbar { width: 4px; }
.tc-panel::-webkit-scrollbar-track { background: transparent; }
.tc-panel::-webkit-scrollbar-thumb { background: #3a3a5a; border-radius: 2px; }
/* Panel header */
.tc-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid #2a2a4a;
position: sticky;
top: 0;
background: #0a0a16;
z-index: 1;
}
.tc-header svg { width: 16px; height: 16px; color: #f59e0b; flex-shrink: 0; }
.tc-header-logo { width: 16px; height: 16px; flex-shrink: 0; filter: invert(1) grayscale(1); opacity: 0.6; }
html[data-theme="light"] .tc-header-logo { filter: grayscale(1); opacity: 0.5; }
.tc-header-title { font-weight: 700; font-size: 0.875rem; flex: 1; }
.tc-theme-indicator {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
background: #1e1e36;
color: #5a5a7a;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tc-close {
background: none;
border: none;
cursor: pointer;
color: #5a5a7a;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.tc-close:hover { background: #1e1e36; color: #e8e8e8; }
.tc-close svg { width: 14px; height: 14px; }
/* Color sections */
.tc-body { padding: 0.75rem 1rem 1rem; }
.tc-section-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #5a5a7a;
margin-bottom: 0.5rem;
margin-top: 0.75rem;
}
.tc-section-label:first-child { margin-top: 0; }
/* Color row */
.tc-row {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0;
}
.tc-swatch-wrap {
position: relative;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.tc-swatch {
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid #2a2a4a;
background:
linear-gradient(var(--tc-color), var(--tc-color)),
repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 8px 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.tc-swatch:hover {
border-color: #f59e0b;
transform: scale(1.1);
}
/* Hide the native color input, overlay it on the swatch */
.tc-color-input {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
}
.tc-label {
flex: 1;
font-size: 0.75rem;
color: #5a5a7a;
font-weight: 500;
}
.tc-hex {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #5a5a7a;
background: #12121e;
padding: 2px 4px;
border-radius: 4px;
border: 1px solid #2a2a4a;
width: 76px;
text-align: center;
transition: all 0.15s ease;
}
.tc-hex:focus {
outline: none;
border-color: #f59e0b;
color: #e8e8e8;
background: #161628;
}
.tc-hex.tc-modified {
color: #f59e0b;
font-weight: 600;
}
/* Opacity / alpha input per row */
.tc-alpha {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #5a5a7a;
background: #12121e;
padding: 2px 4px;
border-radius: 4px;
border: 1px solid #2a2a4a;
width: 48px;
text-align: center;
transition: all 0.15s ease;
flex-shrink: 0;
-moz-appearance: textfield;
}
.tc-alpha::-webkit-inner-spin-button,
.tc-alpha::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tc-alpha:focus {
outline: none;
border-color: #f59e0b;
color: #e8e8e8;
background: #161628;
}
.tc-alpha.tc-alpha-active {
color: #3b82f6;
font-weight: 600;
border-color: #3b82f6;
}
.tc-alpha-wrap {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.tc-alpha-unit {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #5a5a7a;
user-select: none;
}
/* Reset button per row (shows only if modified) */
.tc-reset-single {
width: 18px;
height: 18px;
border: none;
background: none;
cursor: pointer;
color: #5a5a7a;
padding: 0;
opacity: 0;
transition: opacity 0.15s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tc-row.tc-changed .tc-reset-single { opacity: 1; }
.tc-reset-single:hover { color: #ef4444; }
.tc-reset-single svg { width: 14px; height: 14px; }
/* Footer */
.tc-footer {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid #2a2a4a;
position: sticky;
bottom: 0;
background: #0a0a16;
}
.tc-footer .btn { flex: 1; font-size: 0.75rem; }
/* Unsaved changes indicator */
.tc-unsaved {
display: none;
font-size: 0.625rem;
color: #f59e0b;
text-align: center;
padding: 0.25rem 1rem 0;
font-weight: 600;
}
.tc-unsaved.tc-visible { display: block; }
/* Color+Alpha popup (appears on swatch click) */
.tc-popup {
position: fixed;
z-index: 10001;
background: #000;
border: 1px solid #2a2a4a;
border-radius: 10px;
padding: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,0.5);
display: none;
width: 230px;
}
.tc-popup.tc-popup-open { display: block; }
.tc-popup-color-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.tc-popup-swatch-wrap {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
border: 2px solid #3a3a5a;
cursor: pointer;
transition: border-color 0.15s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tc-popup-swatch-wrap:hover { border-color: #f59e0b; }
.tc-popup-swatch {
width: 100%;
height: 100%;
border-radius: 6px;
background:
linear-gradient(var(--tc-color), var(--tc-color)),
repeating-conic-gradient(#555 0% 25%, #888 0% 50%) 50% / 6px 6px;
}
.tc-popup-color {
position: absolute;
top: -4px;
left: -4px;
width: 44px;
height: 44px;
border: none;
cursor: pointer;
opacity: 0;
padding: 0;
}
.tc-popup-hex {
font-family: 'JetBrains Mono', monospace;
font-size: var(--fs-xs);
color: #8888a0;
}
.tc-popup-alpha-row {
display: flex;
align-items: center;
gap: 8px;
}
.tc-popup-alpha-label {
font-size: var(--fs-xs);
color: #8888a0;
flex-shrink: 0;
}
.tc-popup-range {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: #2a2a4a;
border-radius: 3px;
outline: none;
cursor: pointer;
}
.tc-popup-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid #000;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
margin-top: -4px;
}
.tc-popup-range::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid #000;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tc-popup-range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
}
.tc-popup-range::-moz-range-track {
height: 6px;
border-radius: 3px;
background: #2a2a4a;
}
.tc-popup-alpha-val {
font-family: 'JetBrains Mono', monospace;
font-size: var(--fs-xs);
color: #e0e0e0;
min-width: 32px;
text-align: right;
white-space: nowrap;
}
/* Light theme overrides — all TC widget values hardcoded to prevent color coupling */
html[data-theme="light"] .tc-toggle {
background: #dddde4;
color: #1a1a1a;
border-color: #c0c0c8;
box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .tc-toggle:hover { background: #d0d0d8; }
html[data-theme="light"] .tc-toggle.tc-active { background: #e8870a; border-color: #e8870a; color: #fff; }
html[data-theme="light"] .tc-panel {
background: #efefef;
border-color: #c0c0c8;
box-shadow: -4px 0 30px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .tc-panel::-webkit-scrollbar-thumb { background: #c0c0c8; }
html[data-theme="light"] .tc-header { background: #efefef; border-bottom-color: #c0c0c8; }
html[data-theme="light"] .tc-header svg { color: #e8870a; }
html[data-theme="light"] .tc-theme-indicator { background: #d0d0d8; color: #8888a0; }
html[data-theme="light"] .tc-close { color: #8888a0; }
html[data-theme="light"] .tc-close:hover { background: #d0d0d8; color: #1a1a1a; }
html[data-theme="light"] .tc-section-label { color: #8888a0; }
html[data-theme="light"] .tc-swatch { border-color: #c0c0c8; }
html[data-theme="light"] .tc-swatch:hover { border-color: #e8870a; }
html[data-theme="light"] .tc-label { color: #828282; }
html[data-theme="light"] .tc-hex { color: #8888a0; background: #e4e4ec; border-color: #c0c0c8; }
html[data-theme="light"] .tc-hex:focus { border-color: #e8870a; color: #1a1a1a; background: #dddde4; }
html[data-theme="light"] .tc-hex.tc-modified { color: #e8870a; }
html[data-theme="light"] .tc-alpha { color: #8888a0; background: #e4e4ec; border-color: #c0c0c8; }
html[data-theme="light"] .tc-alpha:focus { border-color: #e8870a; color: #1a1a1a; background: #dddde4; }
html[data-theme="light"] .tc-alpha.tc-alpha-active { color: #2563eb; border-color: #2563eb; }
html[data-theme="light"] .tc-alpha-unit { color: #8888a0; }
html[data-theme="light"] .tc-reset-single { color: #8888a0; }
html[data-theme="light"] .tc-reset-single:hover { color: #dc2626; }
html[data-theme="light"] .tc-footer { background: #efefef; border-top-color: #c0c0c8; }
html[data-theme="light"] .tc-unsaved { color: #e8870a; }
html[data-theme="light"] .tc-popup {
background: #f0f0f0;
border-color: #c8c8d0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .tc-popup-swatch-wrap { border-color: #c0c0c8; }
html[data-theme="light"] .tc-popup-hex { color: #666680; }
html[data-theme="light"] .tc-popup-alpha-label { color: #666680; }
html[data-theme="light"] .tc-popup-alpha-val { color: #1a1a2e; }
html[data-theme="light"] .tc-popup-range { background: #d0d0d8; }
html[data-theme="light"] .tc-popup-range::-webkit-slider-thumb { border-color: #f0f0f0; }
html[data-theme="light"] .tc-popup-range::-moz-range-thumb { border-color: #f0f0f0; }
/* Responsive: hide on small screens */
@media (max-width: 768px) {
.tc-toggle,
.tc-panel,
.tc-popup { display: none; }
}
/* ── Kraken Settings Page ──────────────────────────── */
#faviconCard { max-width: 50%; }
@media (max-width: 768px) { #faviconCard { max-width: 100%; } }
.krs-favicon-desc {
font-size: var(--fs-base);
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.krs-favicon-upload-zone {
display: flex;
align-items: flex-start;
gap: 1.25rem;
flex-wrap: wrap;
}
.krs-favicon-preview-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
}
.krs-favicon-preview {
width: 64px;
height: 64px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
object-fit: contain;
}
.krs-favicon-placeholder {
width: 64px;
height: 64px;
border-radius: 8px;
background: var(--active-ember);
border: 1px solid var(--glow);
display: flex;
align-items: center;
justify-content: center;
}
.krs-favicon-placeholder svg { width: 24px; height: 24px; opacity: 0.5; }
.krs-favicon-label {
font-size: var(--fs-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.krs-favicon-label--custom { color: var(--accent); }
.krs-favicon-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.25rem;
}
.krs-upload-btn { cursor: pointer; }
.krs-upload-btn svg { width: 14px; height: 14px; margin-right: 0.25rem; vertical-align: -2px; }
.krs-delete-btn svg { width: 14px; height: 14px; margin-right: 0.25rem; vertical-align: -2px; }
.krs-delete-btn:disabled { opacity: 0.35; pointer-events: none; }
.krs-favicon-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
opacity: 0.7;
}
.krs-favicon-status {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--text-muted);
min-height: 1em;
}
/* ── Kraken Settings: Toast Timeouts ── */
#toastSettingsCard { max-width: 50%; }
@media (max-width: 768px) { #toastSettingsCard { max-width: 100%; } }
.krs-toast-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.krs-toast-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--border-light);
}
.krs-toast-row:last-child { border-bottom: none; }
.krs-toast-label {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.krs-toast-name {
font-size: var(--fs-base);
font-weight: 500;
color: var(--text-primary);
}
.krs-toast-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.krs-toast-input-wrap {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
.krs-toast-input {
width: 70px;
text-align: center;
padding: 0.375rem 0.5rem;
}
.krs-toast-unit {
font-size: var(--fs-xs);
color: var(--text-muted);
font-weight: 500;
}
.krs-toast-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-light);
}
.krs-toast-save-status {
font-size: var(--fs-xs);
color: var(--text-muted);
}
/* ── Kraken Settings: API Usage Tab ── */
.krs-api-range-bar {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.krs-range-btn {
padding: 0.375rem 0.875rem;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
font-size: var(--fs-xs);
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.krs-range-btn:hover { border-color: var(--accent); color: var(--accent); }
.krs-range-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ── API Usage: Module Grid ── */
.krs-api-module-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.krs-api-module-item {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.krs-api-module-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.krs-api-module-title {
display: flex;
align-items: center;
gap: 0.5rem;
}
.krs-api-module-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
background: var(--mod-color, var(--accent));
}
.krs-api-module-name {
font-size: var(--fs-base);
font-weight: 600;
color: var(--text-primary);
}
.krs-api-module-credits {
font-size: var(--fs-xs);
color: var(--text-secondary);
font-weight: 500;
}
.krs-api-module-pct {
color: var(--text-muted);
font-weight: 400;
}
.krs-api-bar-track {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.krs-api-bar-fill {
height: 100%;
width: var(--bar-w, 0%);
background: var(--mod-color, var(--accent));
border-radius: 3px;
transition: width 0.4s ease;
}
.krs-api-module-meta {
font-size: var(--fs-xs);
color: var(--text-muted);
}
/* ── API Usage: Category Groups ── */
.krs-api-cat-group {
margin-bottom: 1.25rem;
}
.krs-api-cat-group:last-child { margin-bottom: 0; }
.krs-api-cat-group-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.75rem;
}
.krs-api-cat-group-total {
margin-left: auto;
font-weight: 500;
color: var(--text-secondary);
text-transform: none;
letter-spacing: 0;
}
.krs-api-cat-item {
padding: 0.375rem 0 0.375rem 1.375rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.krs-api-cat-item-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.krs-api-cat-label {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--text-primary);
}
.krs-api-cat-stats {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.krs-api-cat-fail {
color: #ef4444;
font-weight: 500;
}
/* ── API Usage: Daily Chart ── */
.krs-api-daily-stats {
display: flex;
gap: 1rem;
font-size: var(--fs-xs);
color: var(--text-muted);
margin-bottom: 0.5rem;
font-weight: 500;
}
.krs-api-daily-bars {
display: flex;
align-items: flex-end;
gap: 2px;
min-height: 160px;
padding-top: 1.25rem;
overflow-x: auto;
position: relative;
}
.krs-api-daily-bars::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: var(--avg-h, 0px);
height: 1px;
border-top: 1px dashed var(--text-muted);
opacity: 0.3;
pointer-events: none;
margin-bottom: 20px;
}
.krs-api-daily-col {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 18px;
position: relative;
cursor: default;
}
.krs-api-daily-col:hover .krs-api-daily-bar { opacity: 0.85; }
.krs-api-daily-col:hover .krs-api-daily-val { opacity: 1; }
.krs-api-daily-val {
font-size: 9px;
font-weight: 600;
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.15s;
margin-bottom: 2px;
white-space: nowrap;
}
.krs-api-daily-bar {
width: 100%;
max-width: 24px;
height: var(--bar-h, 4px);
background: var(--accent);
border-radius: 2px 2px 0 0;
min-height: 4px;
transition: height 0.3s ease, opacity 0.15s;
opacity: calc(0.4 + var(--bar-intensity, 0) * 0.6);
}
.krs-api-daily-bar--weekend {
opacity: calc(0.25 + var(--bar-intensity, 0) * 0.35);
}
.krs-api-daily-label {
font-size: 9px;
color: var(--text-muted);
margin-top: 4px;
white-space: nowrap;
line-height: 1;
}
.krs-api-empty {
font-size: var(--fs-xs);
color: var(--text-muted);
padding: 1.5rem 0;
text-align: center;
}
@media (max-width: 600px) {
.krs-api-cat-item { padding-left: 0.75rem; }
.krs-api-daily-label { display: none; }
.krs-api-daily-val { opacity: 1; }
}
/* ── Area 51 Staging Badge ────────────────────────────────────── */
#area51-badge {
position: fixed;
z-index: 999999;
pointer-events: auto;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#area51-badge[data-pos="center"] {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
}
#area51-badge[data-pos="top"] {
top: 0; left: 50%;
transform: translate(-50%, 0);
width: 400px; height: 48px;
border-radius: 0 0 16px 16px;
}
#area51-badge[data-pos="bottom"] {
bottom: 0; left: 50%; top: auto;
transform: translate(-50%, 0);
width: 400px; height: 48px;
border-radius: 16px 16px 0 0;
}
#area51-badge[data-pos="left"] {
left: 0; top: 50%;
transform: translate(0, -50%);
width: 48px; height: 200px;
border-radius: 0 16px 16px 0;
}
#area51-badge[data-pos="right"] {
right: 0; top: 50%; left: auto;
transform: translate(0, -50%);
width: 48px; height: 200px;
border-radius: 16px 0 0 16px;
}
/* Blob — center state */
.a51-blob {
position: absolute;
inset: 0;
border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%;
background: radial-gradient(ellipse at 35% 40%, #f59e0b44, transparent 60%),
radial-gradient(ellipse at 70% 60%, #f9731633, transparent 50%),
linear-gradient(135deg, #2a1a0a 0%, #2d1f0d 40%, #1a0a0a 100%);
border: 1px solid #f59e0b33;
box-shadow: 0 0 40px #f59e0b22, 0 0 80px #f9731611, inset 0 0 30px #f59e0b11;
animation: a51-morph 8s ease-in-out infinite, a51-glow 4s ease-in-out infinite alternate;
transition: border-radius 0.6s, box-shadow 0.6s;
overflow: hidden;
}
.a51-blob::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from 0deg, transparent, #f59e0b15, transparent, #f9731615, transparent);
animation: a51-rotate 12s linear infinite;
}
.a51-blob::after {
content: '';
position: absolute;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
background: radial-gradient(circle at 30% 25%, #f59e0b18 0%, transparent 40%),
radial-gradient(circle at 75% 70%, #f9731612 0%, transparent 35%);
animation: a51-float 6s ease-in-out infinite alternate;
}
/* Docked state — flat rectangle */
#area51-badge[data-pos="top"] .a51-blob,
#area51-badge[data-pos="bottom"] .a51-blob,
#area51-badge[data-pos="left"] .a51-blob,
#area51-badge[data-pos="right"] .a51-blob {
border-radius: inherit;
animation: none;
background: linear-gradient(135deg, #2a1a0a 0%, #2d1f0d 50%, #1a0a0a 100%);
border: 1px solid #f59e0b33;
box-shadow: 0 0 20px #f59e0b22;
}
#area51-badge[data-pos="top"] .a51-blob::before,
#area51-badge[data-pos="bottom"] .a51-blob::before,
#area51-badge[data-pos="left"] .a51-blob::before,
#area51-badge[data-pos="right"] .a51-blob::before,
#area51-badge[data-pos="top"] .a51-blob::after,
#area51-badge[data-pos="bottom"] .a51-blob::after,
#area51-badge[data-pos="left"] .a51-blob::after,
#area51-badge[data-pos="right"] .a51-blob::after {
display: none;
}
/* Content */
.a51-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 100%;
font: 700 14px/1 'JetBrains Mono', monospace;
letter-spacing: 3px;
color: #f59e0b;
text-shadow: 0 0 10px #f59e0b66, 0 0 20px #f59e0b33;
text-transform: uppercase;
white-space: nowrap;
}
#area51-badge[data-pos="left"] .a51-content,
#area51-badge[data-pos="right"] .a51-content {
writing-mode: vertical-lr;
text-orientation: mixed;
font-size: 11px;
letter-spacing: 2px;
}
.a51-content svg {
width: 28px;
height: 28px;
fill: #f59e0b;
filter: drop-shadow(0 0 6px #f59e0b66);
flex-shrink: 0;
}
#area51-badge[data-pos="left"] .a51-content svg,
#area51-badge[data-pos="right"] .a51-content svg {
width: 22px;
height: 22px;
}
#area51-badge[data-pos="top"] .a51-content svg,
#area51-badge[data-pos="bottom"] .a51-content svg {
width: 22px;
height: 22px;
}
/* Position switcher */
.a51-switcher {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 3;
display: grid;
grid-template: 18px 18px 18px / 18px 18px 18px;
gap: 2px;
opacity: 0;
transition: opacity 0.3s;
}
#area51-badge[data-pos="center"] .a51-switcher { opacity: 0.5; }
#area51-badge[data-pos="center"]:hover .a51-switcher { opacity: 1; }
#area51-badge:not([data-pos="center"]) .a51-switcher { display: none; }
.a51-switcher button {
background: #f59e0b22;
border: 1px solid #f59e0b33;
border-radius: 3px;
color: #f59e0b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 10px;
line-height: 1;
transition: background 0.2s;
}
.a51-switcher button:hover { background: #f59e0b44; }
.a51-sw-top { grid-column: 2; grid-row: 1; }
.a51-sw-left { grid-column: 1; grid-row: 2; }
.a51-sw-right { grid-column: 3; grid-row: 2; }
.a51-sw-bottom { grid-column: 2; grid-row: 3; }
/* Animations */
@keyframes a51-morph {
0% { border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%; }
25% { border-radius: 55% 45% 38% 62% / 52% 42% 58% 48%; }
50% { border-radius: 38% 62% 55% 45% / 58% 48% 52% 42%; }
75% { border-radius: 62% 38% 45% 55% / 42% 58% 48% 52%; }
100% { border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%; }
}
@keyframes a51-glow {
0% { box-shadow: 0 0 40px #f59e0b22, 0 0 80px #f9731611, inset 0 0 30px #f59e0b11; }
100% { box-shadow: 0 0 60px #f59e0b33, 0 0 120px #f9731622, inset 0 0 50px #f59e0b18; }
}
@keyframes a51-rotate {
to { transform: rotate(360deg); }
}
@keyframes a51-float {
to { transform: translate(5%, -5%) rotate(15deg); }
}
|