/* =========================================
Pharos — Glass UI · dark/light theme system
========================================= */
/* ===== Geologica (self-hosted, from fullbet.gr) ===== */
@font-face {
font-family: 'Geologica';
src: url('/assets/fonts/display-r.woff2') format('woff2'),
url('/assets/fonts/display-r.woff') format('woff');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Geologica';
src: url('/assets/fonts/display-mi.woff2') format('woff2'),
url('/assets/fonts/display-mi.woff') format('woff');
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Geologica';
src: url('/assets/fonts/display-sb.woff2') format('woff2'),
url('/assets/fonts/display-sb.woff') format('woff');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Geologica';
src: url('/assets/fonts/display-b.woff2') format('woff2'),
url('/assets/fonts/display-b.woff') format('woff');
font-weight: 700; font-style: normal; font-display: swap;
}
:root {
--accent: #f97316;
--accent-2: #facc15;
--good: #22c55e;
--bad: #ef4444;
--info: #60a5fa;
/* Dark (default) */
--bg-base: #0a0a0f;
--bg-grad-1: rgba(249, 115, 22, 0.18);
--bg-grad-2: rgba(96, 165, 250, 0.16);
--bg-grad-3: rgba(167, 139, 250, 0.14);
--bg-noise-op: .035;
--glass-bg: rgba(255, 255, 255, 0.04);
--glass-bg-hover: rgba(255, 255, 255, 0.07);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
--text: #e8ebf2;
--text-dim: #c0c5d4;
--muted: #8c92a8;
--muted-2: #5f667c;
--link: #93c5fd;
--input-bg: rgba(255, 255, 255, 0.04);
--input-border: rgba(255, 255, 255, 0.10);
--radius: 18px;
--radius-sm: 10px;
--radius-xs: 6px;
--header-h: 96px;
}
:root[data-theme="light"] {
/* Punchier accent palette for light mode (darker so colors pop on white) */
--accent: #ea580c;
--accent-2: #d97706;
--good: #15803d;
--bad: #b91c1c;
--info: #2563eb;
--bg-base: #f4f6fb;
--bg-grad-1: rgba(234, 88, 12, 0.22);
--bg-grad-2: rgba(37, 99, 235, 0.20);
--bg-grad-3: rgba(139, 92, 246, 0.18);
--bg-noise-op: .025;
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-bg-hover: rgba(255, 255, 255, 0.92);
--glass-border: rgba(15, 23, 42, 0.12);
--glass-shadow: 0 6px 24px rgba(15, 23, 42, 0.10);
--text: #0f172a;
--text-dim: #1e293b;
--muted: #475569;
--muted-2: #94a3b8;
--link: #2563eb;
--input-bg: rgba(255, 255, 255, 0.85);
--input-border: rgba(15, 23, 42, 0.18);
}
/* ===== Base ===== */
* { box-sizing: border-box; }
/* Don't lock html/body to viewport height — kills position:sticky on long pages */
html, body { min-height: 100%; }
html { background: var(--bg-base); }
body {
margin: 0;
color: var(--text);
font: 19px/1.6 "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
transition: color .25s, background .25s;
}
/* Vibrant gradient background blobs + subtle noise */
body::before {
content: "";
position: fixed; inset: 0;
z-index: -2;
background:
radial-gradient(60% 60% at 8% 0%, var(--bg-grad-1) 0%, transparent 70%),
radial-gradient(50% 50% at 95% 12%, var(--bg-grad-2) 0%, transparent 70%),
radial-gradient(45% 45% at 50% 100%, var(--bg-grad-3) 0%, transparent 70%),
var(--bg-base);
transition: opacity .35s;
}
body::after {
content: "";
position: fixed; inset: 0;
z-index: -1; pointer-events: none;
opacity: var(--bg-noise-op);
background-image: url("data:image/svg+xml;utf8,");
}
a { color: var(--link); text-decoration: none; }
a:hover { filter: brightness(1.15); }
h1 { font-size: 38px; font-weight: 700; margin: 0 0 .35em; letter-spacing: -.01em; }
h2 { font-size: 23px; font-weight: 600; margin: 0 0 14px; color: var(--text); letter-spacing: -.005em; display: inline-flex; align-items: center; gap: 10px; }
h2 .muted { font-weight: 400; }
h2 .ico { color: var(--accent); flex-shrink: 0; opacity: .9; width: 22px; height: 22px; }
.mini-head { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }
.mini-head .ico { color: var(--accent); opacity: .85; }
/* Card description — explanatory line under each card head */
.card-desc {
color: var(--muted);
font-size: 17px;
line-height: 1.55;
margin: -2px 0 16px;
max-width: 72ch;
}
.card-desc code {
background: var(--glass-bg-hover);
border: 1px solid var(--glass-border);
border-radius: 4px;
padding: 2px 7px;
font-size: 15px;
color: var(--accent-2);
}
.card-desc b { color: var(--text-dim); font-weight: 600; }
/* Nav icon */
.nav-ico { flex-shrink: 0; opacity: .7; transition: opacity .15s; }
.main-nav a:hover .nav-ico { opacity: 1; }
.main-nav a.active .nav-ico { opacity: 1; color: var(--accent); }
.main-nav a { display: inline-flex; align-items: center; gap: 7px; }
/* Brand icons (Google, X, Wikipedia) — preserve their colors */
.brand-ico {
flex-shrink: 0;
display: block;
}
/* X mark is monochrome, follow text */
:root[data-theme="light"] .brand-ico path[fill="currentColor"] { color: #0f172a; }
/* ===========================================================
PULSE — distinct source cards
=========================================================== */
.pulse-wrap { margin-top: 36px; position: relative; }
/* ===== Pulse section intro · banner-style header που σηματοδοτεί
ότι όλα τα cards κάτω από αυτό είναι ΕΝΑ section ===== */
.pulse-intro {
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 36px 40px 32px;
margin-bottom: 26px;
background: linear-gradient(135deg,
rgba(167, 139, 250, .10) 0%,
rgba(99, 102, 241, .08) 35%,
rgba(236, 72, 153, .06) 70%,
rgba(167, 139, 250, .04) 100%);
border: 1px solid rgba(167, 139, 250, .22);
box-shadow:
0 10px 50px -20px rgba(167, 139, 250, .35),
inset 0 1px 0 rgba(255, 255, 255, .04);
}
:root[data-theme="light"] .pulse-intro {
background: linear-gradient(135deg,
rgba(167, 139, 250, .14) 0%,
rgba(99, 102, 241, .10) 35%,
rgba(236, 72, 153, .08) 70%,
rgba(167, 139, 250, .06) 100%);
border-color: rgba(167, 139, 250, .35);
}
/* Connect visually το intro με το grid από κάτω — μικρό divider + grouping */
.pulse-wrap::before {
content: '';
position: absolute;
left: 50%; top: -18px;
transform: translateX(-50%);
width: 60px; height: 3px;
background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .6), transparent);
border-radius: 2px;
}
/* Decorative orbs in background */
.pulse-intro-bg {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.pulse-intro-orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: .6;
}
.pulse-intro-orb-1 {
width: 280px; height: 280px;
top: -100px; left: -80px;
background: radial-gradient(circle, rgba(167, 139, 250, .50), transparent 70%);
animation: pulse-orb 8s ease-in-out infinite;
}
.pulse-intro-orb-2 {
width: 200px; height: 200px;
bottom: -60px; right: 20%;
background: radial-gradient(circle, rgba(236, 72, 153, .35), transparent 70%);
animation: pulse-orb 10s ease-in-out infinite reverse;
}
.pulse-intro-orb-3 {
width: 240px; height: 240px;
top: 20%; right: -60px;
background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 70%);
animation: pulse-orb 12s ease-in-out infinite;
animation-delay: 2s;
}
@keyframes pulse-orb {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -10px) scale(1.08); }
}
/* Content overlays */
.pulse-intro-content {
position: relative;
z-index: 2;
max-width: 800px;
}
.pulse-intro-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: rgba(167, 139, 250, .14);
border: 1px solid rgba(167, 139, 250, .35);
border-radius: 999px;
font-size: 11px; font-weight: 800;
letter-spacing: 2px;
color: rgba(196, 181, 253, 1);
margin-bottom: 18px;
}
:root[data-theme="light"] .pulse-intro-eyebrow {
background: rgba(167, 139, 250, .18);
color: rgba(124, 58, 237, 1);
}
.pulse-intro-pulse-dot {
width: 8px; height: 8px;
background: #f472b6;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(244, 114, 182, .6);
animation: pulse-live-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-live-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, .6); }
50% { box-shadow: 0 0 0 8px rgba(244, 114, 182, 0); }
}
.pulse-intro-title {
display: flex; align-items: center; gap: 14px;
margin: 0 0 14px;
font-size: 34px; font-weight: 800;
line-height: 1.15; letter-spacing: -.8px;
color: var(--text);
}
.pulse-intro-title .ico {
flex-shrink: 0;
width: 36px; height: 36px;
color: rgba(196, 181, 253, 1);
filter: drop-shadow(0 0 12px rgba(167, 139, 250, .5));
}
:root[data-theme="light"] .pulse-intro-title .ico { color: rgba(124, 58, 237, 1); }
.pulse-intro-desc {
margin: 0 0 22px;
font-size: 15px; line-height: 1.65;
color: var(--text-dim);
max-width: 720px;
}
.pulse-intro-desc b { color: var(--text); font-weight: 700; }
.pulse-intro-sources {
display: flex; flex-wrap: wrap; gap: 8px;
}
.pulse-intro-src {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-size: 12px; font-weight: 600;
color: var(--text-dim);
backdrop-filter: blur(8px);
transition: background .15s, border-color .15s, transform .15s;
}
.pulse-intro-src:hover {
background: rgba(255, 255, 255, .08);
border-color: rgba(167, 139, 250, .45);
transform: translateY(-1px);
}
:root[data-theme="light"] .pulse-intro-src {
background: rgba(15, 23, 42, .04);
}
.pulse-intro-src svg {
flex-shrink: 0;
}
/* Mobile tuning */
@media (max-width: 720px) {
.pulse-intro { padding: 24px 22px; }
.pulse-intro-title { font-size: 24px; gap: 10px; }
.pulse-intro-title .ico { width: 28px; height: 28px; }
.pulse-intro-desc { font-size: 14px; }
}
.pulse-grid {
/* override grid-2's gap for a slightly tighter feel */
gap: 22px;
}
.pulse-source {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 26px 28px 22px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
min-width: 0;
display: flex;
flex-direction: column;
transition: transform .2s, border-color .2s;
}
.pulse-source:hover { transform: translateY(-2px); }
/* Subtle source-specific tint (no left accent strip) */
.pulse-source-google { background: linear-gradient(135deg, rgba(66, 133, 244, .04), var(--glass-bg) 60%); }
.pulse-source-x { background: linear-gradient(135deg, rgba(15, 23, 42, .10), var(--glass-bg) 60%); }
:root[data-theme="light"] .pulse-source-x { background: linear-gradient(135deg, rgba(15, 23, 42, .04), var(--glass-bg) 60%); }
.pulse-source-wiki { background: linear-gradient(135deg, rgba(200, 200, 200, .05), var(--glass-bg) 60%); }
.pulse-source-gnews { background: linear-gradient(135deg, rgba(26, 115, 232, .05), var(--glass-bg) 60%); }
.pulse-source-youtube { background: linear-gradient(135deg, rgba(255, 0, 0, .04), var(--glass-bg) 60%); }
.pulse-source-reddit { background: linear-gradient(135deg, rgba(255, 69, 0, .05), var(--glass-bg) 60%); }
.pulse-source-bsky { background: linear-gradient(135deg, rgba(0, 133, 255, .05), var(--glass-bg) 60%); }
.pulse-source-head {
display: flex; align-items: center; gap: 16px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--glass-border);
}
.brand-badge {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
background: var(--bg-base);
border: 1px solid var(--glass-border);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .brand-badge { background: #ffffff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.brand-badge.brand-x { background: #000000; }
:root[data-theme="light"] .brand-badge.brand-x { background: #000000; }
.brand-badge.brand-x .brand-ico path { fill: #ffffff !important; }
.brand-badge.brand-wiki { background: #ffffff; }
.brand-badge.brand-wiki .brand-ico path { fill: #000000 !important; }
.brand-badge.brand-youtube { background: #ffffff; }
:root[data-theme="light"] .brand-badge.brand-youtube { background: #ffffff; }
.brand-badge.brand-reddit { background: #ffffff; }
:root[data-theme="light"] .brand-badge.brand-reddit { background: #ffffff; }
.brand-badge.brand-bsky { background: #ffffff; }
:root[data-theme="light"] .brand-badge.brand-bsky { background: #ffffff; }
.pulse-source-meta { flex: 1; min-width: 0; }
.pulse-source-meta h3 {
margin: 0 0 4px 0;
font-size: 19px;
font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
}
.pulse-source-meta .src-pill {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
padding: 3px 10px;
border-radius: 999px;
background: var(--glass-bg-hover);
border: 1px solid var(--glass-border);
transition: color .15s;
}
.pulse-source-meta .src-pill:hover { color: var(--accent); }
@media (max-width: 760px) {
.pulse-source { padding: 20px 18px; }
.brand-badge { width: 44px; height: 44px; border-radius: 12px; }
.pulse-source-meta h3 { font-size: 17px; }
}
.container { max-width: 1320px; margin: 0 auto; padding: 24px; }
.muted { color: var(--muted); }
.small { font-size: 16px; font-weight: 400; }
/* ===== HEADER (glass · sticky · full-width) ===== */
/* ===== Side menu (left sidebar) ===== */
:root { --sidebar-w: 296px; }
body:has(.sidebar) { padding-left: var(--sidebar-w); }
.sidebar {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
width: var(--sidebar-w);
display: flex; flex-direction: column;
padding: 22px 14px 18px;
background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-base) 82%, transparent), color-mix(in srgb, var(--bg-base) 68%, transparent));
border-right: 1px solid var(--glass-border);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: 2px 0 14px rgba(0, 0, 0, 0.16);
overflow-y: auto;
}
:root[data-theme="light"] .sidebar {
box-shadow: 2px 0 14px rgba(15, 23, 42, 0.05);
}
.logo {
display: flex; align-items: center; justify-content: center;
color: var(--text);
text-decoration: none;
line-height: 0;
padding: 2px 6px 12px;
margin-bottom: 10px;
}
.logo .logo-svg {
/* viewBox 256×56 (αναλογία 4.57:1) — διαστασιολόγηση κατά ΠΛΑΤΟΣ ώστε να μη
ξεχειλίζει ποτέ το sidebar· το ύψος ακολουθεί την αναλογία. */
width: 100%; height: auto; max-width: 252px;
display: block;
transition: filter .2s, transform .2s;
filter: drop-shadow(0 4px 14px rgba(249, 115, 22, .25));
}
.logo:hover .logo-svg { transform: translateY(-1px); filter: drop-shadow(0 6px 18px rgba(249, 115, 22, .45)); }
/* Dark/light theme variant switching */
.logo .logo-light { display: none; }
.logo .logo-dark { display: block; }
:root[data-theme="light"] .logo .logo-light { display: block; filter: drop-shadow(0 3px 10px rgba(234, 88, 12, .22)); }
:root[data-theme="light"] .logo .logo-dark { display: none; }
.main-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.main-nav a {
display: flex; align-items: center; gap: 11px;
padding: 10px 14px; border-radius: 12px;
color: var(--muted); font-weight: 500; font-size: 15px;
transition: .18s;
white-space: nowrap;
}
.nav-ico { width: 18px; height: 18px; flex: none; }
.main-nav a:hover { color: var(--text); background: var(--glass-bg-hover); }
.main-nav a.active { color: var(--text); background: var(--glass-bg-hover); }
.sidebar-footer {
display: flex; flex-direction: column; gap: 10px;
padding-top: 14px; margin-top: 10px;
border-top: 1px solid var(--glass-border);
}
.sidebar-footer-row { display: flex; align-items: center; gap: 8px; }
.sidebar-footer-row .btn-ghost { flex: 1; text-align: center; }
.sidebar-footer .prop-switcher { width: 100%; }
/* Mobile hamburger toggle + backdrop */
.sidebar-toggle {
display: none;
position: fixed; top: 14px; left: 14px; z-index: 120;
width: 42px; height: 42px; border-radius: 12px;
align-items: center; justify-content: center;
background: var(--glass-bg); border: 1px solid var(--glass-border);
color: var(--text); cursor: pointer;
backdrop-filter: blur(18px);
}
.sidebar-toggle svg { width: 22px; height: 22px; }
.sidebar-backdrop {
display: none;
position: fixed; inset: 0; z-index: 90;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
}
.badge {
padding: 8px 18px; border-radius: 999px;
background: var(--glass-bg-hover);
border: 1px solid var(--glass-border);
color: var(--text-dim);
font-size: 17px; font-weight: 500;
}
.prop-switcher {
appearance: none;
-webkit-appearance: none;
padding: 8px 38px 8px 16px;
border-radius: 999px;
background: var(--glass-bg-hover) url("data:image/svg+xml;utf8,") no-repeat right 14px center;
border: 1px solid var(--glass-border);
color: var(--text);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: .18s;
max-width: 240px;
}
.prop-switcher:hover { background-color: var(--glass-bg); border-color: var(--muted); }
.prop-switcher:focus { outline: 2px solid rgba(249,115,22,.4); outline-offset: 1px; }
.prop-switcher:disabled { opacity: .6; cursor: wait; }
/* Property assignment chips (users.php) */
.prop-assign-row {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--glass-border);
}
.prop-assign-label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 8px;
}
.prop-assign-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.prop-assign-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-size: 13px;
color: var(--text-dim);
cursor: pointer;
transition: .15s;
}
.prop-assign-chip:hover { background: var(--glass-bg-hover); color: var(--text); }
.prop-assign-chip input[type="checkbox"] {
width: 14px; height: 14px;
accent-color: var(--accent, #f97316);
cursor: pointer;
}
.prop-assign-chip:has(input:checked) {
background: rgba(249,115,22,.12);
border-color: rgba(249,115,22,.4);
color: var(--text);
}
.btn-ghost {
padding: 9px 18px; border-radius: 999px;
color: var(--muted);
border: 1px solid var(--glass-border);
background: transparent;
transition: .18s; cursor: pointer;
font-size: 17px;
}
.btn-ghost:hover { color: var(--text); border-color: var(--muted); background: var(--glass-bg-hover); }
/* In-card range toggle (e.g. card-level 1d/7d switch) */
.range-toggle {
display: inline-flex;
gap: 4px;
padding: 3px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 999px;
}
.range-toggle .range-btn {
appearance: none;
background: transparent;
border: 0;
padding: 5px 12px;
border-radius: 999px;
color: var(--text-dim);
font: inherit;
font-size: 13px;
cursor: pointer;
transition: .15s;
}
.range-toggle .range-btn:hover { color: var(--text); }
.range-toggle .range-btn.active {
background: var(--accent, #f97316);
color: #fff;
box-shadow: 0 2px 8px rgba(249,115,22,.35);
}
/* In-card source badge — small SVG (e.g. Google Analytics mark) inside card-head */
.ga-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 8px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.ga-badge svg { width: 18px; height: 18px; }
/* ===== TOPIC GAP CARD ===== */
.topic-gap-list {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.topic-gap-summary {
padding: 10px 14px;
background: var(--glass-bg);
border-left: 3px solid var(--accent, #f97316);
border-radius: 8px;
color: var(--text);
margin-bottom: 4px;
}
.topic-gap-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
transition: .15s;
}
.topic-gap-item:hover { background: var(--glass-bg-hover); }
.topic-gap-item .gap-badge {
flex: 0 0 auto;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.topic-gap-item.uncovered .gap-badge {
background: rgba(249,115,22,.18);
color: #f97316;
border: 1px solid rgba(249,115,22,.45);
}
.topic-gap-item.covered .gap-badge {
background: rgba(34,197,94,.15);
color: #22c55e;
border: 1px solid rgba(34,197,94,.35);
}
.topic-gap-item .gap-body { flex: 1; min-width: 0; }
.topic-gap-item .gap-term {
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topic-gap-item .gap-meta {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.topic-gap-item.covered .gap-term { opacity: .65; }
/* ===== STORY RADAR TABLE ===== */
.radar-table-wrap { overflow-x: auto; margin-top: 12px; }
.radar-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.radar-table th,
.radar-table td {
text-align: left;
padding: 12px 10px;
border-bottom: 1px solid var(--glass-border);
vertical-align: top;
}
.radar-table thead th {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted);
background: var(--glass-bg);
border-bottom: 2px solid var(--glass-border);
position: sticky; top: 0;
}
.radar-table tbody tr:hover { background: var(--glass-bg-hover); }
.radar-rank {
font-weight: 700;
font-size: 15px;
color: var(--text-dim);
width: 36px;
}
.radar-term {
font-weight: 600;
color: var(--text);
min-width: 140px;
max-width: 240px;
}
/* ===== SEO TABLE + ANALYSIS MODAL ===== */
.seo-scroll { max-height: 540px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 10px; }
.seo-scroll .radar-table thead th { position: sticky; top: 0; z-index: 2; }
.seo-table { font-size: 13px; }
.seo-table .radar-term a { color: var(--text); }
.seo-table .radar-term a:hover { color: var(--accent, #f97316); }
.seo-analyze-btn { white-space: nowrap; }
/* Hero: animated score ring + summary */
.seo-hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
padding: 28px;
background:
radial-gradient(circle at 0% 0%, rgba(168,85,247,.10), transparent 50%),
radial-gradient(circle at 100% 100%, rgba(249,115,22,.08), transparent 50%),
var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 18px;
margin-bottom: 24px;
}
.seo-score-ring {
position: relative;
width: 130px; height: 130px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.seo-score-ring svg { transform: rotate(-90deg); width: 130px; height: 130px; }
.seo-score-ring circle.track { stroke: var(--glass-border); fill: none; stroke-width: 10; }
.seo-score-ring circle.bar { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.seo-score-ring.score-ok circle.bar { stroke: #22c55e; }
.seo-score-ring.score-warn circle.bar { stroke: #facc15; }
.seo-score-ring.score-bad circle.bar { stroke: #ef4444; }
.seo-score-text {
position: absolute;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.seo-score-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text); }
.seo-score-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 4px; }
.seo-summary-text { font-size: 18px; line-height: 1.6; color: var(--text); }
.seo-summary-text b { color: var(--accent, #f97316); }
/* Section dividers inside modal */
.seo-section-title {
margin: 28px 0 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted);
display: flex; align-items: center; gap: 12px;
}
.seo-section-title::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, var(--glass-border), transparent);
}
/* Status checks grid — full borders + status dot + pill */
.seo-checks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.seo-check {
padding: 18px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
transition: transform .2s, border-color .2s;
}
.seo-check:hover { transform: translateY(-1px); }
.seo-check.check-ok { border-color: rgba(34,197,94,.35); }
.seo-check.check-warn { border-color: rgba(250,204,21,.4); }
.seo-check.check-bad { border-color: rgba(239,68,68,.4); }
.seo-check-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.seo-check-label {
font-weight: 700; font-size: 16px; color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.seo-check-dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
}
.seo-check.check-ok .seo-check-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.seo-check.check-warn .seo-check-dot { background: #facc15; box-shadow: 0 0 0 4px rgba(250,204,21,.2); }
.seo-check.check-bad .seo-check-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.2); }
.seo-check-status {
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
padding: 4px 10px;
border-radius: 999px;
text-transform: uppercase;
white-space: nowrap;
}
.seo-check.check-ok .seo-check-status { background: rgba(34,197,94,.15); color: #22c55e; }
.seo-check.check-warn .seo-check-status { background: rgba(250,204,21,.2); color: #ca8a04; }
.seo-check.check-bad .seo-check-status { background: rgba(239,68,68,.18); color: #ef4444; }
.seo-check-detail { font-size: 15px; line-height: 1.6; color: var(--text-dim); }
/* Suggestions */
.seo-sug-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.seo-sug-card {
padding: 18px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
transition: transform .15s;
}
.seo-sug-card:hover { transform: translateY(-1px); }
.seo-sug-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.seo-sug-level {
font-size: 11px;
font-weight: 800;
padding: 4px 10px;
border-radius: 6px;
background: linear-gradient(135deg, #a855f7, #f97316);
color: #fff;
letter-spacing: .05em;
}
.seo-sug-reason { font-size: 16px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; line-height: 1.5; }
.seo-sug-current,
.seo-sug-suggested {
padding: 12px 16px;
border-radius: 10px;
font-size: 16px;
line-height: 1.55;
margin-top: 10px;
border: 1px solid var(--glass-border);
}
.seo-sug-current { background: rgba(239,68,68,.06); }
.seo-sug-suggested { background: rgba(34,197,94,.08); }
.seo-sug-current .lbl { color: #ef4444; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 10px; display: inline-block; }
.seo-sug-suggested .lbl { color: #22c55e; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 10px; display: inline-block; }
/* Current headings hierarchy */
.seo-headings-current {
background: var(--glass-bg);
padding: 20px;
border-radius: 14px;
border: 1px solid var(--glass-border);
}
.seo-h-block { margin-bottom: 16px; }
.seo-h-block:last-child { margin-bottom: 0; }
.seo-h-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.seo-h-tag {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px;
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
color: #fff;
letter-spacing: .05em;
}
.seo-h-tag.h1 { background: #f97316; }
.seo-h-tag.h2 { background: #a855f7; }
.seo-h-tag.h3 { background: #3b82f6; }
.seo-h-tag.h4 { background: #22c55e; }
.seo-h-tag.h5 { background: #6b7280; }
.seo-h-tag.h6 { background: #6b7280; opacity: .7; }
.seo-h-count { font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--glass-bg-hover); }
.seo-h-list { margin: 6px 0 0 0; padding: 0; list-style: none; }
.seo-h-list li {
font-size: 15px;
color: var(--text-dim);
line-height: 1.55;
padding: 6px 0 6px 20px;
position: relative;
}
.seo-h-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent, #f97316);
font-weight: 800;
}
/* Meta grid */
.seo-meta-grid {
display: grid;
grid-template-columns: minmax(130px, auto) 1fr auto;
gap: 12px 18px;
align-items: baseline;
background: var(--glass-bg);
padding: 20px;
border-radius: 14px;
border: 1px solid var(--glass-border);
}
.seo-meta-grid .lbl { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.seo-meta-grid .val { font-size: 16px; color: var(--text); line-height: 1.6; word-break: break-word; }
.seo-meta-grid .val.missing { color: var(--muted); font-style: italic; }
.seo-meta-grid .chars { font-size: 11px; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--glass-bg-hover); white-space: nowrap; }
.seo-meta-grid a { color: var(--text); border-bottom: 1px dotted var(--muted); text-decoration: none; }
.seo-meta-grid a:hover { color: var(--accent, #f97316); }
/* Loading state inside SEO modal */
.seo-loading {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px;
text-align: center;
min-height: 360px;
}
.seo-loading h3 {
margin: 12px 0 24px;
font-size: 20px;
color: var(--text);
background: linear-gradient(90deg, #a855f7, #f97316);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.seo-loading-orb {
position: relative;
width: 100px; height: 100px;
margin-bottom: 14px;
}
.seo-loading-orb .orb {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, #a855f7, #f97316, #22c55e, #3b82f6, #a855f7);
filter: blur(8px);
opacity: .55;
animation: seoOrb 3s linear infinite;
}
.seo-loading-orb .orb:nth-child(2) { animation-duration: 4.5s; animation-direction: reverse; opacity: .35; }
.seo-loading-orb .orb:nth-child(3) {
inset: 25%;
background: var(--bg-base);
filter: none; opacity: 1;
animation: seoPulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 2px var(--glass-border), 0 0 40px rgba(168,85,247,.5);
}
@keyframes seoOrb {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes seoPulse {
0%,100% { transform: scale(1); }
50% { transform: scale(.85); }
}
.seo-loading-steps {
list-style: none;
padding: 0;
margin: 0 0 18px;
text-align: left;
max-width: 380px;
width: 100%;
}
.seo-loading-steps li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
margin-bottom: 6px;
border-radius: 10px;
color: var(--text-dim);
font-size: 14px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
transition: all .25s;
}
.seo-loading-steps li.step-active {
color: var(--text);
background: linear-gradient(135deg, rgba(168,85,247,.10), rgba(249,115,22,.06));
border-color: rgba(168,85,247,.35);
}
.seo-loading-steps .step-bullet {
width: 10px; height: 10px; border-radius: 50%;
background: var(--glass-border);
flex-shrink: 0;
position: relative;
}
.seo-loading-steps .step-active .step-bullet {
background: #a855f7;
box-shadow: 0 0 0 4px rgba(168,85,247,.2);
animation: seoBullet 1.4s ease-in-out infinite;
}
@keyframes seoBullet {
0%,100% { box-shadow: 0 0 0 4px rgba(168,85,247,.18); }
50% { box-shadow: 0 0 0 8px rgba(168,85,247,.06); }
}
.theme-toggle {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: var(--glass-bg);
color: var(--text-dim);
cursor: pointer; transition: .2s;
}
.theme-toggle:hover { background: var(--glass-bg-hover); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
/* ===== PAGE HEAD ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; gap: 16px; flex-wrap: wrap; }
.page-title { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
/* Range picker — 38px to align with AI button + refresh button */
.range-picker {
display: inline-flex; align-items: center; gap: 2px;
height: 38px; padding: 3px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-sizing: border-box;
}
.range-picker a {
height: 30px; padding: 0 13px;
display: inline-flex; align-items: center;
border-radius: 7px;
color: var(--muted);
font-size: 14px; font-weight: 600;
transition: .15s;
letter-spacing: .01em;
}
.range-picker a:hover { color: var(--text); }
.range-picker a.on {
background: linear-gradient(180deg, var(--accent), #ea580c);
color: white;
font-weight: 700;
box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
/* ===== LIVE STRIP ===== */
.live-strip {
display: flex; align-items: center; gap: 18px;
padding: 22px 26px;
background: linear-gradient(135deg, rgba(249,115,22,.22), rgba(249,115,22,.04));
border: 1px solid rgba(249, 115, 22, 0.35);
border-radius: var(--radius);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
margin-bottom: 22px;
box-shadow: 0 4px 20px rgba(249,115,22,.08);
}
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-label { font-size: 15px; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.live-num { font-size: 64px; font-weight: 800; line-height: 1; color: var(--text); margin-left: -4px; font-variant-numeric: tabular-nums; }
.live-sub { color: var(--muted); font-size: 18px; }
.live-spark { margin-left: auto; display: flex; gap: 16px; color: var(--muted); font-size: 17px; flex-wrap: wrap; }
.live-spark span b { color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; }
/* ===== KPI grid ===== */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.kpi-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
padding: 18px 20px;
display: flex; flex-direction: column; gap: 8px;
transition: .2s;
box-shadow: var(--glass-shadow);
}
.kpi-card:hover {
transform: translateY(-2px);
background: var(--glass-bg-hover);
border-color: rgba(249, 115, 22, 0.3);
}
.kpi-card .label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.kpi-card .value { font-size: 42px; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi-card.skeleton .value { color: var(--muted-2); }
.kpi-card .sub { color: var(--muted); font-size: 16px; }
.kpi-card.accent { background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(249,115,22,.02)); border-color: rgba(249,115,22,.35); }
/* ===== CARDS (the glass) ===== */
.card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 22px 24px;
margin-bottom: 18px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--glass-shadow);
transition: background .2s, border-color .2s;
min-width: 0;
overflow: hidden;
}
.card:hover { background: var(--glass-bg-hover); }
.card h2 { display: flex; align-items: center; gap: 8px; }
.chart-box { height: 290px; position: relative; }
.chart-box.small { height: 230px; }
/* Layouts — min-width:0 on grid items lets them shrink so children with
white-space:nowrap can be clipped instead of expanding the row. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
/* Pulse cards: 3 ανά σειρά σε ευρείες οθόνες (override του 2-col του .grid-2 —
μπαίνει ΜΕΤΑ το .grid-2 ώστε να κερδίζει σε source order, ίδια specificity). */
.pulse-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
.grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1200px) {
.pulse-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
body:has(.sidebar) { padding-left: 0; }
.sidebar {
transform: translateX(-100%);
transition: transform .25s ease;
width: 280px;
}
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-backdrop { display: block; }
.sidebar-toggle { display: flex; }
}
@media (max-width: 760px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.container { padding: 16px; }
.page-title { font-size: 22px; }
.live-num { font-size: 32px; }
}
/* ===== LISTS ===== */
.list { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.list li {
display: flex; gap: 16px; align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--glass-border);
min-width: 0;
}
.list li:last-child { border-bottom: 0; }
.list .rank {
color: var(--muted-2); font-weight: 800; font-size: 17px;
min-width: 30px; flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.list .title { flex: 1 1 0; min-width: 0; overflow: hidden; }
.list .title a {
color: var(--text); font-weight: 500; display: block;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
line-height: 1.4;
font-size: 18px;
}
.list .title a:hover { color: var(--accent); }
.list .title .path {
display: block; font-size: 15px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 3px;
}
.list .metric {
font-weight: 700; color: var(--text);
white-space: nowrap; flex-shrink: 0;
font-variant-numeric: tabular-nums;
text-align: right;
font-size: 18px;
}
.list .metric .label { color: var(--muted); font-weight: 400; font-size: 15px; margin-left: 5px; }
.list.compact li { padding: 11px 0; }
.list.compact .metric { font-size: 17px; }
/* ===== Expandable category rows (submenu top 5 ανά κατηγορία) ===== */
.tdim-toggle {
background: transparent; border: 0; cursor: pointer;
color: var(--muted); padding: 6px 8px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, transform .2s;
flex-shrink: 0;
}
.tdim-toggle:hover { background: var(--glass-border); color: var(--text); }
.tdim-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tdim-toggle svg { transition: transform .2s ease; }
.tdim-sublist { padding: 0 !important; border-bottom: 1px solid var(--glass-border); display: block; }
.tdim-sublist[hidden] { display: none; }
.tdim-sublist-inner {
list-style: none; margin: 0; padding: 6px 0 10px 38px;
background: var(--glass-border-faint, rgba(255,255,255,.02));
}
.tdim-sublist-inner li {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px; border-bottom: 0 !important;
font-size: 15px;
}
.tdim-sublist-inner .rank-sm {
color: var(--muted-2); font-weight: 700; min-width: 18px;
font-variant-numeric: tabular-nums; font-size: 13px;
}
.tdim-sublist-inner .tdim-page-title {
flex: 1 1 0; min-width: 0; color: var(--text-dim);
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.tdim-sublist-inner .tdim-page-title:hover { color: var(--accent); }
.tdim-sublist-inner .metric-sm {
color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;
font-size: 14px; flex-shrink: 0;
}
/* ===== Pages Sources card · per-article channels at a glance ===== */
.ps-live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
margin-left: 8px;
vertical-align: middle;
transition: background-color .25s ease;
}
#pages-sources.ps-realtime-active .ps-live-dot,
#top-authors-card.ta-realtime-active .ps-live-dot {
background: #ef4444;
box-shadow: 0 0 0 0 rgba(239, 68, 68, .55);
animation: ps-live-pulse 1.6s ease-out infinite;
}
@keyframes ps-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.pages-sources-list { font-size: 15px; }
.pages-sources-list .ps-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--glass-border);
min-width: 0;
}
.pages-sources-list .ps-row:last-child { border-bottom: 0; }
.ps-body { min-width: 0; }
.ps-title a {
color: var(--text); font-weight: 600; font-size: 16px;
display: block; line-height: 1.35;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.ps-title a:hover { color: var(--accent); }
.ps-bar {
display: flex;
height: 6px; border-radius: 4px; overflow: hidden;
margin: 7px 0;
background: var(--glass-border);
}
.ps-bar-seg {
height: 100%; display: block;
transition: opacity .15s;
}
.ps-bar-seg:hover { opacity: .8; }
.ps-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 8px;
background: var(--bg);
border: 1px solid var(--bd);
color: var(--c);
border-radius: 8px;
font-size: 12px; font-weight: 700;
letter-spacing: .2px;
line-height: 1.4;
transition: transform .12s, filter .12s;
}
.ps-pill:hover { transform: translateY(-1px); filter: brightness(1.15); }
.ps-pill-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ps-pill-name {
text-transform: uppercase;
letter-spacing: .6px;
opacity: .95;
}
.ps-pill-pct {
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ps-pill-views {
padding-left: 7px;
margin-left: 2px;
border-left: 1px solid currentColor;
border-left-color: var(--bd);
opacity: .65;
font-weight: 600;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--text-dim);
}
.ps-stats {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.ps-views {
font-weight: 700; color: var(--text);
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: 16px;
text-align: right;
}
.ps-views .label { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
@media (max-width: 720px) {
.pages-sources-list .ps-row { grid-template-columns: 24px minmax(0,1fr); gap: 10px; }
.pages-sources-list .ps-stats { grid-column: 2; justify-content: flex-end; margin-top: 4px; }
}
/* ===== Per-article sources button on top-pages list ===== */
.page-sources-btn {
background: transparent; border: 1px solid var(--glass-border);
color: var(--muted); cursor: pointer; padding: 5px 7px; border-radius: 6px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background .15s, border-color .15s, color .15s;
}
.page-sources-btn:hover { background: var(--glass-border); color: var(--accent); border-color: var(--accent); }
/* ===== Sources modal content ===== */
.src-summary {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; background: var(--glass-border-faint, rgba(255,255,255,.03));
border-radius: 10px; margin-bottom: 18px;
font-size: 15px;
}
.src-summary b { color: var(--text); font-weight: 700; }
.src-summary .src-link { color: var(--muted); text-decoration: none; font-family: monospace; font-size: 13px; }
.src-summary .src-link:hover { color: var(--accent); }
.src-channel { margin-bottom: 14px; border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden; }
.src-channel-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; background: var(--glass-border-faint, rgba(255,255,255,.02));
}
.src-channel-name { font-weight: 700; color: var(--text); font-size: 16px; margin-right: 10px; }
.src-channel-metric { text-align: right; }
.src-pct { font-weight: 800; color: var(--accent); font-size: 18px; display: block; line-height: 1.1; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list .src-sub {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 16px; border-top: 1px solid var(--glass-border);
font-size: 14px;
}
.src-list .src-name { color: var(--text-dim); font-family: monospace; }
.src-list .src-stats { color: var(--muted); font-variant-numeric: tabular-nums; }
/* ===== Discover Potential badge ===== */
.dp-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 52px; padding: 4px 8px; border-radius: 8px;
font-size: 12px; font-weight: 800; letter-spacing: .3px;
font-variant-numeric: tabular-nums; flex-shrink: 0;
border: 1px solid transparent;
}
.dp-hot { background: rgba(249,115,22,.18); color: #f97316; border-color: rgba(249,115,22,.35); }
.dp-warm { background: rgba(250,204,21,.18); color: #eab308; border-color: rgba(250,204,21,.35); }
.dp-cool { background: rgba(96,165,250,.16); color: #60a5fa; border-color: rgba(96,165,250,.30); }
.dp-cold { background: rgba(148,163,184,.14); color: var(--muted); border-color: var(--glass-border); }
/* ===== Google Discover Potential card · Discover-style preview grid ===== */
.discover-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.dp-card {
display: flex; flex-direction: column;
background: var(--card-bg, rgba(255,255,255,.03));
border: 1px solid var(--glass-border);
border-radius: 14px;
overflow: hidden;
transition: border-color .2s, transform .2s, box-shadow .25s;
min-width: 0;
}
.dp-card:hover {
border-color: rgba(249,115,22,.30);
box-shadow: 0 10px 30px -16px rgba(0,0,0,.45);
}
/* Image area · 16:9 με score overlay */
.dp-card-imgwrap {
position: relative; display: block;
aspect-ratio: 16 / 9;
background: var(--glass-border);
overflow: hidden;
}
.dp-card-imgwrap img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
transition: transform .35s ease;
}
.dp-card:hover .dp-card-imgwrap img { transform: scale(1.04); }
.dp-noimg {
width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #f59e0b; font-size: 30px;
background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
}
.dp-noimg span {
font-size: 11px; font-weight: 700; letter-spacing: .5px;
margin-top: 6px; text-transform: uppercase;
}
/* Score badge overlay πάνω δεξιά */
.dp-card-score {
position: absolute; top: 10px; right: 10px;
display: flex; flex-direction: column; align-items: center;
padding: 8px 10px; border-radius: 12px;
min-width: 54px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(15, 17, 21, .82);
border: 1.5px solid transparent;
box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.dp-card-score-num {
font-size: 22px; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.dp-card-score-lbl {
font-size: 9px; font-weight: 800; letter-spacing: 1px;
opacity: .8; margin-top: 2px;
}
.dp-card-score.dp-hot { color: #f97316; border-color: rgba(249,115,22,.55); }
.dp-card-score.dp-warm { color: #eab308; border-color: rgba(250,204,21,.55); }
.dp-card-score.dp-cool { color: #60a5fa; border-color: rgba(96,165,250,.45); }
.dp-card-score.dp-cold { color: #cbd5e1; border-color: rgba(203,213,225,.30); }
/* Rank badge πάνω αριστερά */
.dp-card-rank {
position: absolute; top: 10px; left: 10px;
font-size: 11px; font-weight: 800; letter-spacing: .5px;
padding: 4px 8px; border-radius: 6px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
background: rgba(15, 17, 21, .72);
color: rgba(255,255,255,.92);
}
/* Body */
.dp-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.dp-card-source {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--muted);
}
.dp-card-favicon {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: #f97316; color: #fff;
font-size: 11px; font-weight: 800; line-height: 1;
}
.dp-card-host { font-weight: 600; color: var(--text-dim); }
.dp-card-dot { opacity: .5; }
.dp-card-age { color: var(--muted); }
.dp-card-title {
margin: 0; line-height: 1.32; font-weight: 700;
}
.dp-card-title a {
color: var(--text); font-size: 17px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.dp-card-title a:hover { color: var(--accent); }
.dp-card-excerpt {
margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.dp-card-stats {
display: flex; flex-wrap: wrap; gap: 12px;
color: var(--muted); font-size: 12px;
padding-top: 8px; border-top: 1px solid var(--glass-border);
}
.dp-card-stats b { color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ===== Discover status banners — prominent, scannable ===== */
.dp-status {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1.5px solid transparent;
background: var(--bg, transparent);
}
.dp-status-icon {
flex-shrink: 0;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--bg-icon, transparent);
color: var(--c, var(--text));
}
.dp-status-body { flex: 1; min-width: 0; }
.dp-status-title {
font-size: 14px; font-weight: 800;
line-height: 1.3; letter-spacing: -.1px;
color: var(--c, var(--text));
text-transform: none;
}
.dp-status-sub {
font-size: 12px; color: var(--muted);
margin-top: 3px; line-height: 1.4;
}
.dp-status-list {
list-style: none; margin: 6px 0 0; padding: 0;
font-size: 13px; line-height: 1.5;
color: var(--text-dim);
}
.dp-status-list li {
position: relative;
padding-left: 14px;
margin-bottom: 2px;
}
.dp-status-list li::before {
content: '';
position: absolute; left: 0; top: 9px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c, var(--muted));
opacity: .8;
}
.dp-status-list li:last-child { margin-bottom: 0; }
/* Variants */
.dp-status-ok {
--c: #22c55e;
--bg: rgba(34, 197, 94, .08);
--bg-icon: rgba(34, 197, 94, .15);
border-color: rgba(34, 197, 94, .30);
}
.dp-status-warn {
--c: #f59e0b;
--bg: rgba(245, 158, 11, .09);
--bg-icon: rgba(245, 158, 11, .18);
border-color: rgba(245, 158, 11, .35);
}
.dp-status-critical {
--c: #ef4444;
--bg: rgba(239, 68, 68, .10);
--bg-icon: rgba(239, 68, 68, .20);
border-color: rgba(239, 68, 68, .40);
animation: dp-critical-pulse 2.4s ease-in-out infinite;
}
@keyframes dp-critical-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .25); }
50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
.dp-signals {
display: flex; gap: 10px; flex-wrap: wrap;
font-size: 10px; color: var(--muted);
}
.dp-signals span {
display: inline-flex; align-items: center; gap: 5px;
text-transform: lowercase;
}
.dp-sig-bar {
display: inline-block; width: 32px; height: 3px;
background: var(--glass-border); border-radius: 2px;
position: relative; overflow: hidden;
}
.dp-sig-bar::after {
content: ''; position: absolute; inset: 0;
width: var(--w, 0); background: linear-gradient(90deg, #f97316, #fb923c);
border-radius: 2px; transition: width .4s ease;
}
.dp-card-actions {
display: flex; gap: 8px; padding-top: 6px;
}
.dp-action-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 8px;
background: transparent; border: 1px solid var(--glass-border);
color: var(--muted); font-size: 12px; font-weight: 600;
cursor: pointer; transition: background .15s, color .15s, border-color .15s;
text-decoration: none;
}
.dp-action-btn:hover {
background: var(--glass-border); color: var(--accent); border-color: var(--accent);
}
.dp-card .dp-action-btn.page-sources-btn { padding: 5px 11px; }
/* ===== Rising-now badge (cross-reference με last-30-min trending) ===== */
.rising-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 800; letter-spacing: .5px;
color: #f97316;
background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.30);
padding: 2px 7px; border-radius: 999px;
margin-top: 4px;
animation: rising-pulse 2.4s ease-in-out infinite;
}
@keyframes rising-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.30); }
50% { box-shadow: 0 0 0 6px rgba(249,115,22,0); }
}
/* Inline percentage pill (devices, sources, countries) */
.list .pct-pill {
flex-shrink: 0;
padding: 4px 11px;
border-radius: 999px;
background: rgba(249, 115, 22, 0.10);
border: 1px solid rgba(249, 115, 22, 0.30);
color: var(--accent);
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 64px;
text-align: center;
}
/* Long lists inside cards: cap height with smooth scroll */
.card .list.scrollable {
max-height: 560px;
overflow-y: auto;
padding-right: 6px;
/* custom scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--glass-border) transparent;
}
.card .list.scrollable::-webkit-scrollbar { width: 6px; }
.card .list.scrollable::-webkit-scrollbar-track { background: transparent; }
.card .list.scrollable::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }
.card .list.scrollable::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
/* Make grid-2 cards equal height */
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > .list { flex: 1 1 auto; }
/* ===== TABLES ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.data-table th, .data-table td {
padding: 14px 16px; text-align: left;
border-bottom: 1px solid var(--glass-border);
font-variant-numeric: tabular-nums;
}
.data-table th {
color: var(--muted);
font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
background: transparent;
}
.data-table .num { text-align: right; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--glass-bg-hover); }
.data-table .rank { color: var(--muted-2); width: 30px; font-weight: 800; }
.data-table.dense th, .data-table.dense td { padding: 8px 10px; }
.data-table a { color: var(--text); }
.data-table a:hover { color: var(--accent); }
.input-search {
width: 100%; padding: 14px 17px; border-radius: 10px;
border: 1px solid var(--input-border);
background: var(--input-bg);
color: var(--text); font-size: 18px;
font-family: inherit;
margin-bottom: 12px;
backdrop-filter: blur(8px);
transition: border-color .15s;
}
.input-search:focus { outline: none; border-color: var(--accent); }
.input-search::placeholder { color: var(--muted-2); }
/* ===== AUTH ===== */
.auth-page {
display: grid; place-items: center; min-height: 100vh;
padding: 24px;
}
.auth-card {
width: 100%; max-width: 400px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 36px;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: var(--glass-shadow);
}
.auth-card-wide { max-width: 580px; }
.auth-card .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.auth-card .brand .brand-mark { font-size: 40px; }
.auth-card h1 { margin: 0; font-size: 24px; }
.auth-card p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.auth-card label {
display: block; font-size: 16px; color: var(--muted);
margin-bottom: 16px; font-weight: 500;
}
.auth-card input[type=password],
.auth-card input[type=text] {
width: 100%; padding: 15px 17px; margin-top: 7px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text);
border-radius: 10px; font-size: 17px;
font-family: inherit;
transition: border-color .15s;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.setup-help {
margin-bottom: 18px; padding: 14px 16px;
background: var(--input-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
}
.setup-help summary { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.setup-help ol { color: var(--muted); font-size: 13px; padding-left: 18px; margin-top: 10px; }
.setup-help code { background: var(--glass-bg-hover); padding: 2px 6px; border-radius: 4px; color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.form-grid label { margin-bottom: 0; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.btn-primary, .btn-secondary {
border: 0; padding: 15px 28px; border-radius: 10px;
font-weight: 700; cursor: pointer; font-size: 18px;
font-family: inherit;
transition: .18s;
}
.btn-primary {
background: linear-gradient(180deg, var(--accent), #ea580c);
color: white; width: 100%;
box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(249,115,22,.5); }
.btn-secondary {
background: var(--glass-bg-hover);
color: var(--text);
border: 1px solid var(--glass-border);
}
.btn-secondary:hover { border-color: var(--muted); }
.alert {
padding: 15px 19px;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.5);
color: #fca5a5;
border-radius: 10px;
margin-bottom: 14px; font-size: 18px;
backdrop-filter: blur(8px);
}
:root[data-theme="light"] .alert { color: #b91c1c; }
.alert-ok { background: rgba(34, 197, 94, 0.12); border-color: var(--good); color: #86efac; }
:root[data-theme="light"] .alert-ok { color: #15803d; }
.alert-card { border-color: rgba(249, 115, 22, 0.5); background: linear-gradient(180deg, rgba(249, 115, 22, 0.08), transparent); }
.code-box {
display: inline-block; padding: 4px 8px;
background: var(--input-bg);
border-radius: 4px;
color: var(--accent-2); font-size: 13px;
border: 1px solid var(--glass-border);
}
.code-block {
background: var(--input-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 12px 14px;
color: var(--text);
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
white-space: pre-wrap; word-break: break-all;
overflow-x: auto;
}
/* ===== SETTINGS TABLE ===== */
.settings-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.settings-table th { color: var(--muted); font-size: 14px; text-align: left; padding: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.settings-table td { padding: 8px; font-size: 17px; }
.settings-table input[type=text],
.settings-table input[type=password],
.settings-table select {
width: 100%; padding: 11px 14px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text); border-radius: 8px; font-size: 16px;
font-family: inherit;
}
.settings-table input:focus, .settings-table select:focus { outline: none; border-color: var(--accent); }
.form-grid select {
width: 100%; padding: 15px 17px; margin-top: 7px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text);
border-radius: 10px; font-size: 17px;
font-family: inherit;
}
/* ===== TRENDS PAGE specifics ===== */
.trend-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 20px 22px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--glass-shadow);
display: flex; flex-direction: column;
height: 100%;
}
.trend-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.trend-card-head h2 { margin: 0; }
.trend-card-head .badge-source {
font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted);
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
padding: 9px 17px;
background: var(--glass-bg-hover);
border: 1px solid var(--glass-border);
border-radius: 999px;
color: var(--text); font-size: 17px; font-weight: 500;
transition: .15s;
text-decoration: none;
line-height: 1.2;
}
.tag:hover { background: rgba(249,115,22,.16); border-color: var(--accent); color: var(--accent); }
.tag .count { color: var(--muted); margin-left: 7px; font-size: 15px; }
.tag.tag-rank-1 { background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.55); color: var(--accent-2); }
.tag.tag-rank-2 { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.32); }
.tag.tag-rank-3 { background: rgba(249,115,22,.08); }
.trend-row {
display: flex; gap: 12px; align-items: flex-start;
padding: 11px 0;
border-bottom: 1px solid var(--glass-border);
}
.trend-row:last-child { border-bottom: 0; }
.trend-row .rank { color: var(--accent); font-weight: 800; min-width: 28px; font-size: 18px; }
.trend-row .term { flex: 1; min-width: 0; }
.trend-row .term a { color: var(--text); font-weight: 600; font-size: 18px; }
.trend-row .term a:hover { color: var(--accent); }
.trend-row .term .meta { color: var(--muted); font-size: 16px; margin-top: 3px; }
.trend-row .traffic {
padding: 5px 12px; border-radius: 999px;
background: rgba(249,115,22,.14);
color: var(--accent);
font-size: 14px; font-weight: 700;
border: 1px solid rgba(249,115,22,.3);
white-space: nowrap;
}
.trend-articles { margin-top: 8px; padding-left: 32px; }
.trend-articles a {
display: block; color: var(--text-dim); font-size: 17px;
padding: 5px 0; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trend-articles a:hover { color: var(--accent); }
.trend-articles a .src { color: var(--muted); font-size: 15px; margin-right: 6px; }
.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 11px 0;
border-bottom: 1px solid var(--glass-border);
}
.news-item:last-child { border-bottom: 0; }
.news-item .src-pill {
padding: 5px 10px; border-radius: 6px;
background: var(--glass-bg-hover);
color: var(--muted-2);
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
white-space: nowrap;
border: 1px solid var(--glass-border);
}
.news-item .news-body { flex: 1; min-width: 0; }
.news-item .news-body a { color: var(--text); font-weight: 500; font-size: 18px; line-height: 1.4; display: block; }
.news-item .news-body a:hover { color: var(--accent); }
.news-item .time { color: var(--muted); font-size: 15px; margin-top: 4px; }
.footer-note { color: var(--muted); font-size: 16px; text-align: center; margin: 32px 0 8px; }
.site-footer {
margin-top: 40px;
padding: 32px 0 24px;
border-top: 1px solid var(--glass-border);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.made-by {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: .22em;
color: var(--muted-2);
text-transform: uppercase;
}
.made-by a {
color: var(--accent);
text-decoration: none;
margin-left: 4px;
transition: filter .15s;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
}
.made-by a:hover { filter: brightness(1.2); }
/* ===== Skeleton shimmer ===== */
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton-line {
height: 14px; margin: 8px 0;
border-radius: 6px;
background: linear-gradient(90deg, var(--glass-bg) 0%, var(--glass-bg-hover) 50%, var(--glass-bg) 100%);
background-size: 800px 100%;
animation: shimmer 1.4s infinite linear;
}
/* ===== KPI deltas vs previous period ===== */
.kpi-card .delta {
display: inline-flex; align-items: center; gap: 5px;
font-size: 16px; font-weight: 700;
font-variant-numeric: tabular-nums;
margin-top: 3px;
padding: 5px 12px;
border-radius: 999px;
width: max-content;
border: 1px solid transparent;
}
.delta-up { color: #34d399; background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.25); }
.delta-down { color: #f87171; background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.25); }
.delta-flat { color: var(--muted-2); background: transparent; }
:root[data-theme="light"] .delta-up { color: #047857; }
:root[data-theme="light"] .delta-down { color: #b91c1c; }
/* ===== Reveal animations (staggered) ===== */
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kpi-reveal { animation: reveal .4s ease both; }
.row-reveal { animation: reveal .35s ease both; }
.card { animation: reveal .35s ease both; }
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.kpi-reveal, .row-reveal, .card { animation: none; }
}
/* ===== Sync freshness badge ===== */
.sync-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 15px; border-radius: 999px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--muted);
font-size: 15px; font-weight: 600;
letter-spacing: .02em;
line-height: 1;
text-transform: lowercase;
}
.sync-badge:empty { display: none; }
.sync-badge b { color: var(--text-dim); font-weight: 700; }
.sync-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--muted-2);
box-shadow: 0 0 6px transparent;
}
.sync-dot.live { background: var(--good); box-shadow: 0 0 8px var(--good); animation: pulse 2s infinite; }
.sync-dot.cache { background: var(--info); box-shadow: 0 0 6px rgba(96,165,250,.5); }
/* ===== Refresh button ===== */
.refresh-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: var(--glass-bg);
color: var(--text-dim);
cursor: pointer; transition: .18s;
padding: 0;
flex-shrink: 0;
}
.refresh-btn:hover { background: var(--glass-bg-hover); color: var(--accent); }
.refresh-btn svg { width: 16px; height: 16px; transition: transform .35s; }
.refresh-btn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Section header (with sync info next to title) ===== */
.head-meta {
display: flex; align-items: center; gap: 12px;
color: var(--muted); font-size: 14px;
flex-wrap: wrap;
line-height: 1;
}
/* Force every control to align at the same Y baseline regardless of internal text metrics */
.head-meta > * { align-self: center; line-height: 1; }
.head-meta > .btn-ai,
.head-meta > .refresh-btn,
.head-meta > .range-picker { margin: 0; }
/* ===== Card head with action buttons ===== */
.card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; gap: 12px;
}
.card-head h2 { margin: 0; }
.card-head .actions { display: flex; gap: 6px; align-items: center; }
/* Subtle accent ring on focus for accessibility */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 6px;
}
/* ===== Sync log (settings page) ===== */
.sync-log {
display: flex; flex-direction: column; gap: 6px;
margin-top: 12px;
}
.sync-log-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 17px;
border-radius: 8px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
font-size: 17px;
font-variant-numeric: tabular-nums;
}
.sync-log-row .status {
padding: 4px 12px;
border-radius: 999px;
font-size: 15px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em;
}
.sync-log-row .status.ok { background: rgba(34,197,94,.14); color: #34d399; }
.sync-log-row .status.partial { background: rgba(250,204,21,.16); color: #fbbf24; }
.sync-log-row .status.error { background: rgba(239,68,68,.14); color: #f87171; }
.sync-log-row .status.running { background: rgba(96,165,250,.16); color: #60a5fa; }
.sync-log-row .when { color: var(--text-dim); flex: 1; }
.sync-log-row .meta { color: var(--muted); font-size: 16px; }
/* ===== Stat boxes (settings sync section) ===== */
.stat-box {
display: flex; flex-direction: column; gap: 6px;
padding: 16px 18px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
}
.stat-box .stat-label {
font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
color: var(--muted); font-weight: 700;
}
.stat-box .stat-value {
font-size: 25px; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stat-box .stat-sub {
font-size: 16px;
color: var(--muted);
}
.stat-box .stat-sub.status-ok { color: #34d399; }
.stat-box .stat-sub.status-partial { color: #fbbf24; }
.stat-box .stat-sub.status-error { color: #f87171; }
/* ===========================================================
USER MANAGEMENT PAGE
=========================================================== */
/* Stats strip at top */
.users-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 22px;
}
@media (max-width: 760px) { .users-stats { grid-template-columns: 1fr; } }
.stat-tile {
display: flex; align-items: center; gap: 16px;
padding: 22px 24px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--glass-shadow);
transition: transform .15s;
}
.stat-tile:hover { transform: translateY(-2px); }
.stat-tile-icon {
width: 52px; height: 52px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, rgba(249, 115, 22, .18), rgba(249, 115, 22, .06));
color: var(--accent);
}
.stat-tile-icon-admin {
background: linear-gradient(135deg, rgba(96, 165, 250, .20), rgba(96, 165, 250, .06));
color: var(--info);
}
.stat-tile-icon-user {
background: linear-gradient(135deg, rgba(167, 139, 250, .20), rgba(167, 139, 250, .06));
color: #a78bfa;
}
.stat-tile-body { flex: 1; min-width: 0; }
.stat-tile-value {
font-size: 30px; font-weight: 800;
color: var(--text); letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.stat-tile-label {
font-size: 14px; color: var(--muted);
margin-top: 4px;
font-weight: 500;
}
/* New user creation form (1-row inline) */
.user-create-form .form-row {
display: grid;
grid-template-columns: 1.5fr 1.5fr 1fr auto;
gap: 14px;
align-items: end;
}
@media (max-width: 900px) {
.user-create-form .form-row { grid-template-columns: 1fr 1fr; }
.user-create-form .form-row > button { grid-column: 1 / -1; }
}
.user-create-form label {
display: flex; flex-direction: column; gap: 6px;
font-size: 14px; color: var(--muted); font-weight: 500;
}
.user-create-form input,
.user-create-form select {
padding: 12px 15px; border-radius: 10px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text); font-size: 16px;
font-family: inherit;
transition: border-color .15s;
}
.user-create-form input:focus, .user-create-form select:focus {
outline: none; border-color: var(--accent);
}
/* User cards grid */
.users-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 18px;
margin-top: 14px;
}
.user-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 22px 24px;
transition: transform .15s, border-color .15s;
box-shadow: var(--glass-shadow);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.user-card:hover { transform: translateY(-2px); border-color: rgba(249, 115, 22, 0.30); }
.user-card-self {
border-color: rgba(249, 115, 22, 0.35);
background: linear-gradient(135deg, rgba(249, 115, 22, .06), var(--glass-bg) 60%);
}
.user-card-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--glass-border);
}
.user-avatar {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white;
font-size: 24px;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20), inset 0 -2px 0 rgba(0, 0, 0, 0.10);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.user-meta { flex: 1; min-width: 0; }
.user-name {
font-size: 19px;
font-weight: 700;
color: var(--text);
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.user-self-pill {
padding: 2px 9px; border-radius: 999px;
background: rgba(249, 115, 22, .14);
color: var(--accent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
border: 1px solid rgba(249, 115, 22, .35);
}
.user-role-row {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
}
.role-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
font-size: 12px; font-weight: 700;
letter-spacing: .06em;
}
.role-admin {
background: rgba(96, 165, 250, .14);
color: var(--info);
border: 1px solid rgba(96, 165, 250, .35);
}
.role-user {
background: rgba(167, 139, 250, .14);
color: #a78bfa;
border: 1px solid rgba(167, 139, 250, .35);
}
:root[data-theme="light"] .role-user { color: #6d28d9; }
.user-card-body {
display: flex; flex-direction: column; gap: 10px;
}
.inline-field {
display: flex; align-items: center; gap: 12px;
font-size: 14px;
}
.inline-field > span {
color: var(--muted);
font-weight: 600;
min-width: 110px;
flex-shrink: 0;
}
.inline-field select,
.inline-field input {
flex: 1;
padding: 9px 12px;
border-radius: 8px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text); font-size: 14px;
font-family: inherit;
}
.inline-field input:focus, .inline-field select:focus {
outline: none; border-color: var(--accent);
}
.user-update-form { display: flex; flex-direction: column; gap: 10px; }
.user-save-btn { align-self: flex-start; margin-top: 4px; }
.btn-sm {
padding: 8px 14px !important;
font-size: 13px !important;
width: auto !important;
display: inline-flex; align-items: center; gap: 6px;
}
.btn-danger {
border: 1px solid rgba(239, 68, 68, 0.40);
background: rgba(239, 68, 68, 0.10);
color: #f87171;
border-radius: 10px;
font-weight: 700; cursor: pointer;
font-family: inherit;
transition: .18s;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.20); color: #fca5a5; }
:root[data-theme="light"] .btn-danger { color: #b91c1c; background: rgba(239, 68, 68, 0.08); }
:root[data-theme="light"] .btn-danger:hover { background: rgba(239, 68, 68, 0.18); color: #991b1b; }
.user-self-note {
padding: 10px 14px;
background: var(--glass-bg);
border-radius: 8px;
border: 1px dashed var(--glass-border);
color: var(--muted);
font-size: 13px;
text-align: center;
margin: 0;
}
/* ===========================================================
DEMOGRAPHICS — age bars
=========================================================== */
.demo-bars { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.demo-bar {
display: grid;
grid-template-columns: 70px 1fr 130px;
align-items: center;
gap: 14px;
}
.demo-label {
font-weight: 700;
color: var(--text);
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.demo-bar-wrap {
height: 14px;
border-radius: 999px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
overflow: hidden;
}
.demo-bar-fill {
height: 100%;
background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
border-radius: 999px;
transition: width .65s cubic-bezier(.22,.61,.36,1);
box-shadow: 0 0 12px rgba(167, 139, 250, .35);
}
.demo-value {
font-variant-numeric: tabular-nums;
color: var(--text);
font-weight: 700;
font-size: 14px;
text-align: right;
}
.demo-value .muted { font-weight: 500; }
/* ===========================================================
SUB-CARDS — visual separation between side-by-side panels inside a card
(used για Top queries vs Top pages στο GSC section)
=========================================================== */
.subcard {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 18px 20px;
min-width: 0;
transition: border-color .15s, background .15s;
}
.subcard:hover { border-color: rgba(96, 165, 250, .35); background: var(--glass-bg-hover); }
.subcard-head {
display: flex; align-items: center; gap: 8px;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
font-size: 16px;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0;
text-transform: none;
}
.subcard-head .ico { color: var(--info); }
.gsc-split { margin-top: 18px; gap: 18px; }
/* ===========================================================
GSC channel breakdown — 3 sub-cards (Web / Discover / News)
=========================================================== */
.gsc-channels {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.gsc-channel {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 14px 16px 10px;
transition: border-color .25s ease, background .25s ease;
}
.gsc-channel:hover { border-color: rgba(96, 165, 250, .25); }
.gsc-channel-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.gsc-channel-head h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
}
.gsc-channel-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
flex-shrink: 0;
}
.gsc-channel-kpis {
margin-left: auto;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.gsc-channel-chart { height: 200px; margin-top: 4px; }
/* ===========================================================
Subcard hint text (above list inside .subcard)
=========================================================== */
.subcard-hint { margin: 6px 0 10px; line-height: 1.45; }
/* ===========================================================
GSC Trending queries — WoW growth list
=========================================================== */
.trend-badge {
flex-shrink: 0;
align-self: center;
background: rgba(52, 211, 153, .15);
border: 1px solid rgba(52, 211, 153, .45);
color: #34d399;
font-size: 11.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
.trend-badge.trend-new {
background: rgba(251, 191, 36, .15);
border-color: rgba(251, 191, 36, .55);
color: #fbbf24;
letter-spacing: .04em;
}
/* ===========================================================
GSC Inspect button + modal
=========================================================== */
.gsc-inspect-btn {
background: transparent;
border: 1px solid var(--glass-border);
border-radius: 8px;
cursor: pointer;
color: var(--text-muted, #9ca3af);
font-size: 14px;
padding: 3px 8px;
flex-shrink: 0;
align-self: center;
transition: border-color .2s, color .2s, background .2s;
margin-left: 4px;
}
.gsc-inspect-btn:hover {
border-color: rgba(96, 165, 250, .55);
color: var(--accent, #60a5fa);
background: rgba(96, 165, 250, .08);
}
/* Generic centered modal (URL Inspection). Reuses fadeIn/slideUp keyframes
defined for .ai-modal. These classes had NO styles → modal εμφανιζόταν σπασμένο. */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.open { display: block; }
.modal-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: fadeIn .2s ease;
}
.modal-content {
position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: min(720px, 92vw); max-height: 88vh;
background: var(--bg-base);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(249, 115, 22, .15) inset;
overflow: hidden;
display: flex; flex-direction: column;
animation: slideUp .25s cubic-bezier(.22,.61,.36,1);
}
.modal-content.modal-md { width: min(640px, 92vw); }
:root[data-theme="light"] .modal-content { background: #ffffff; }
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 22px; gap: 14px;
background: linear-gradient(135deg, rgba(96, 165, 250, .10), rgba(52, 211, 153, .05) 70%);
border-bottom: 1px solid var(--glass-border);
}
.modal-head h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0; }
.modal-close {
background: transparent; border: none; color: var(--muted);
font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
transition: color .15s;
}
.modal-close:hover { color: var(--text); }
.modal-meta {
padding: 12px 22px; border-bottom: 1px solid var(--glass-border);
font-size: 13px; color: var(--text-dim);
}
.modal-body { padding: 18px 22px; overflow-y: auto; }
.inspect-section {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 12px;
}
.inspect-section-head {
margin-bottom: 10px;
}
.inspect-verdict {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .01em;
}
.inspect-verdict.v-ok { background: rgba( 52, 211, 153, .15); color: #34d399; border: 1px solid rgba( 52, 211, 153, .45); }
.inspect-verdict.v-warn { background: rgba(251, 191, 36, .15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .45); }
.inspect-verdict.v-fail { background: rgba(248, 113, 113, .15); color: #f87171; border: 1px solid rgba(248, 113, 113, .45); }
.inspect-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
}
.inspect-list li {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 13px;
padding: 4px 0;
border-bottom: 1px dashed var(--glass-border);
}
.inspect-list li span { color: var(--text-muted, #9ca3af); }
.inspect-list li b { font-weight: 500; text-align: right; word-break: break-all; }
.inspect-issues {
margin: 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.55;
color: var(--text-muted, #9ca3af);
}
.inspect-issues li { padding: 2px 0; }
/* Canonical-mismatch warning row spans the full grid + highlighted */
.inspect-list li.inspect-warn-row {
grid-column: 1 / -1;
border-bottom: none;
background: rgba(251, 191, 36, .12);
border: 1px solid rgba(251, 191, 36, .4);
border-radius: 8px;
padding: 6px 10px;
}
.inspect-list li.inspect-warn-row span { color: #fbbf24; font-weight: 600; }
.inspect-section.inspect-section-warn { border-color: rgba(251, 191, 36, .45); }
/* Inspect modal meta row: URL + live re-check button */
#inspect-meta {
display: flex; align-items: center; gap: 12px; justify-content: space-between;
flex-wrap: wrap;
}
#inspect-meta .inspect-url { word-break: break-all; min-width: 0; }
.inspect-refresh {
flex: none;
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 999px;
background: var(--glass-bg-hover); border: 1px solid var(--glass-border);
color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer;
transition: .15s;
}
.inspect-refresh:hover { color: var(--accent); border-color: var(--accent); }
.inspect-footer { margin-top: 4px; font-size: 13px; }
.inspect-footer a { color: var(--accent); font-weight: 500; }
@media (max-width: 640px) {
.inspect-list { grid-template-columns: 1fr; }
}
/* ===== Sitemap health ===== */
.sitemap-overall {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 14px;
padding: 8px 16px; border-radius: 999px; margin-bottom: 14px;
}
.sitemap-overall.sm-ok { background: rgba( 52, 211, 153, .15); color: #34d399; border: 1px solid rgba( 52, 211, 153, .4); }
.sitemap-overall.sm-warn { background: rgba(251, 191, 36, .15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .4); }
.sitemap-overall.sm-fail { background: rgba(248, 113, 113, .15); color: #f87171; border: 1px solid rgba(248, 113, 113, .4); }
.sitemap-list { display: flex; flex-direction: column; gap: 10px; }
.sitemap-row {
padding: 12px 14px; border: 1px solid var(--glass-border);
border-radius: 12px; background: var(--glass-bg);
}
.sitemap-row-main { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sitemap-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sitemap-row.sm-ok .sitemap-dot { background: #34d399; }
.sitemap-row.sm-warn .sitemap-dot { background: #fbbf24; }
.sitemap-row.sm-fail .sitemap-dot { background: #f87171; }
.sitemap-path { font-weight: 500; word-break: break-all; color: var(--text); }
.sitemap-path:hover { color: var(--accent); }
.sitemap-meta { line-height: 1.5; }
.sitemap-meta .sm-err { color: #f87171; }
.sitemap-meta .sm-warn { color: #fbbf24; }
/* ===== Keyword cannibalization ===== */
.cannibal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cannibal-item { display: block; padding: 16px 18px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); transition: border-color .15s; }
.cannibal-item:hover { border-color: rgba(251, 191, 36, .4); }
.cannibal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.cannibal-q { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.cannibal-q .ico { color: #fbbf24; flex: none; font-size: 15px; }
.cannibal-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .35); white-space: nowrap; flex: none; }
.cannibal-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cannibal-prow { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.cannibal-rank { flex: none; width: 46px; text-align: center; font-weight: 700; font-size: 13px; padding: 4px 0; border-radius: 8px; background: var(--glass-bg-hover); color: var(--text-dim); }
.cannibal-rank.r-good { background: rgba( 52, 211, 153, .16); color: #34d399; }
.cannibal-rank.r-mid { background: rgba(251, 191, 36, .16); color: #fbbf24; }
.cannibal-rank.r-low { background: rgba(248, 113, 113, .14); color: #f87171; }
.cannibal-rank-lbl { font-size: 10px; font-weight: 500; color: var(--muted); display: block; margin-top: -1px; }
.cannibal-link { flex: 1 1 0; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cannibal-link:hover { color: var(--accent); }
.cannibal-clicks { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
/* ===========================================================
AI ANALYZER — button + modal
=========================================================== */
.btn-ai {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 0 16px;
height: 38px;
border-radius: 10px;
background: var(--glass-bg);
color: var(--text);
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
border: 1px solid var(--glass-border);
cursor: pointer;
font-family: inherit;
line-height: 1;
transition: background .18s, border-color .18s, transform .12s;
white-space: nowrap;
}
.btn-ai .ico {
color: var(--accent);
transition: transform .25s ease;
flex-shrink: 0;
}
.btn-ai > span { font-weight: 600; }
.btn-ai:hover {
background: var(--glass-bg-hover);
border-color: rgba(249, 115, 22, .35);
}
.btn-ai:hover .ico { transform: rotate(15deg) scale(1.05); }
.btn-ai:active { transform: translateY(0.5px); }
.ai-modal {
position: fixed; inset: 0; z-index: 200;
display: none;
}
.ai-modal.open { display: block; }
.ai-modal-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ai-modal-panel {
position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: min(900px, 92vw);
max-height: 88vh;
background: var(--bg-base);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(249, 115, 22, .15) inset;
overflow: hidden;
display: flex; flex-direction: column;
animation: slideUp .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes slideUp { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } }
:root[data-theme="light"] .ai-modal-panel { background: #ffffff; }
.ai-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 26px;
background: linear-gradient(135deg, rgba(167, 139, 250, .10), rgba(244, 114, 182, .06) 60%, rgba(249, 115, 22, .06));
border-bottom: 1px solid var(--glass-border);
gap: 16px;
flex-wrap: wrap;
}
.ai-modal-body {
flex: 1;
overflow-y: auto;
padding: 24px 26px 30px;
}
.ai-modal-head h2 {
margin: 0;
font-size: 22px;
background: linear-gradient(90deg, #a78bfa, #f472b6, #f97316);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-flex; align-items: center; gap: 10px;
}
.ai-modal-head h2 .ico { color: #a78bfa; -webkit-text-fill-color: currentColor; }
.ai-modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-content {
flex: 1;
overflow-y: auto;
padding: 28px 32px;
font-size: 16px;
line-height: 1.6;
color: var(--text);
}
.ai-content h2, .ai-content h3, .ai-content h4 {
margin: 24px 0 12px;
color: var(--text);
display: block;
}
.ai-content h2 { font-size: 22px; }
.ai-content h3 {
font-size: 18px;
padding-bottom: 6px;
border-bottom: 1px solid var(--glass-border);
color: var(--accent);
}
.ai-content h4 { font-size: 16px; color: var(--text-dim); }
.ai-content p { margin: 10px 0; color: var(--text-dim); }
.ai-content ul, .ai-content ol { padding-left: 24px; margin: 10px 0; }
.ai-content li { margin: 6px 0; color: var(--text-dim); }
.ai-content strong { color: var(--text); font-weight: 700; }
.ai-content code {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 4px;
padding: 2px 7px;
font-size: 14px;
color: var(--accent-2);
}
.ai-content :first-child { margin-top: 0; }
/* Loading state */
.ai-loading {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px;
padding: 60px 20px;
text-align: center;
color: var(--muted);
}
.ai-spinner {
width: 48px; height: 48px;
border: 3px solid var(--glass-border);
border-top-color: #a78bfa;
border-right-color: #f472b6;
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@media (max-width: 640px) {
.ai-modal-panel { width: 96vw; max-height: 92vh; border-radius: 14px; }
.ai-content { padding: 20px 18px; font-size: 15px; }
.ai-modal-head { padding: 14px 18px; }
}
/* ===========================================================
ONE-PAGE DASHBOARD ENHANCEMENTS
=========================================================== */
/* Hero header */
.hero {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
margin: 4px 0 22px;
padding: 22px 26px;
background: linear-gradient(135deg, rgba(249,115,22,.10), rgba(96,165,250,.06) 60%, transparent);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
}
.hero::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(60% 100% at 0% 0%, rgba(249,115,22,.10), transparent 60%),
radial-gradient(50% 100% at 100% 100%, rgba(96,165,250,.10), transparent 60%);
pointer-events: none;
}
.hero-left { position: relative; z-index: 1; }
.hero-sub { margin: 4px 0 0; }
.hero .head-meta { position: relative; z-index: 1; }
/* Section glow accents */
.glow-orange { box-shadow: 0 4px 28px rgba(249,115,22,.10), var(--glass-shadow); }
.glow-blue { box-shadow: 0 4px 28px rgba(96,165,250,.10), var(--glass-shadow); }
.glow-purple { box-shadow: 0 4px 28px rgba(167,139,250,.10), var(--glass-shadow); }
/* Grid 3-2 (chart wider + new/return narrower) */
.grid-32 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; margin-bottom: 18px; }
.grid-32 > * { min-width: 0; }
@media (max-width: 1100px) { .grid-32 { grid-template-columns: 1fr; } }
/* KPI 4-col override (for GSC strip) */
.kpi-grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Card link */
.card-link {
font-size: 16px; color: var(--muted);
padding: 7px 16px; border-radius: 999px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
transition: .15s;
white-space: nowrap;
}
.card-link:hover { color: var(--accent); border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.06); }
/* Section anchor offset (for sticky header) */
.section-anchor { scroll-margin-top: 20px; }
/* Mini heading inside cards */
.mini-head {
font-size: 12px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
/* Movers split layout */
.movers-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
}
.movers-grid > * { min-width: 0; overflow: hidden; }
@media (max-width: 760px) { .movers-grid { grid-template-columns: 1fr; } }
.list .mover-delta {
padding: 4px 10px; border-radius: 999px;
font-size: 14px; font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.list .mover-delta.up { background: rgba(34,197,94,.14); color: #34d399; border: 1px solid rgba(34,197,94,.32); }
.list .mover-delta.down { background: rgba(239,68,68,.14); color: #f87171; border: 1px solid rgba(239,68,68,.32); }
/* Sections horizontal bar */
.sections-bar { display: flex; flex-direction: column; gap: 10px; }
.section-row {
display: grid; grid-template-columns: 130px 1fr 80px;
align-items: center; gap: 12px;
}
.section-row .name {
font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 17px; text-transform: capitalize;
}
.section-row .bar-wrap {
height: 10px; border-radius: 999px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
overflow: hidden;
position: relative;
}
.section-row .bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #ea580c);
border-radius: 999px;
box-shadow: 0 0 12px rgba(249,115,22,.35);
transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.section-row .views { color: var(--text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; font-size: 17px; }
/* Heatmap */
.heatmap-grid {
display: grid;
grid-template-columns: 40px repeat(24, 1fr);
gap: 2px;
margin-top: 8px;
}
.heatmap-grid .hm-label, .heatmap-grid .hm-day-label {
font-size: 10px; color: var(--muted);
display: flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.heatmap-grid .hm-day-label { justify-content: flex-end; padding-right: 8px; }
.heatmap-grid .hm-cell {
aspect-ratio: 1;
border-radius: 4px;
background: rgba(249,115,22, calc(var(--hm-v, 0) * 1));
border: 1px solid var(--glass-border);
position: relative;
transition: transform .12s;
min-height: 22px;
}
.heatmap-grid .hm-cell:hover {
transform: scale(1.15);
z-index: 5;
border-color: var(--accent);
}
.heatmap-grid .hm-cell[data-views="0"] { background: var(--glass-bg); }
/* Concentration card */
.concentration-stat { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.concentration-stat .big {
font-size: 34px; font-weight: 800; color: var(--text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.concentration-stat .label { color: var(--muted); font-size: 14px; }
.concentration-stat .hhi-bar {
height: 8px; border-radius: 999px;
background: linear-gradient(90deg, var(--good) 0%, var(--accent-2) 50%, var(--bad) 100%);
position: relative;
margin-top: 6px;
}
.concentration-stat .hhi-marker {
position: absolute; top: -3px; width: 4px; height: 14px;
background: var(--text); border-radius: 2px;
transform: translateX(-50%);
box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.concentration-stat .hhi-legend { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 12px; }
/* KPI mini block (new/return) */
.kpi-mini {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.kpi-mini .mini-card {
padding: 12px 14px; border-radius: var(--radius-sm);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
text-align: center;
}
.kpi-mini .mini-card .v { font-size: 28px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-mini .mini-card .pct {
font-size: 17px; font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.kpi-mini .mini-card .l { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-top: 6px; }