1|/* News Aggregator — slmnpost.com — Modern Minimalist */
2|
3|:root {
4|    --bg: #f0f2f5;
5|    --bg-gradient: linear-gradient(135deg, #f0f2f5 0%, #e8ecf1 50%, #f0f4f8 100%);
6|    --card: #ffffff;
7|    --card-hover: #f8fafc;
8|    --scrollbar-thumb: #94a3b8;
9|    --scrollbar-track: #f8fafc;
10|    --text: #1a1a2e;
11|    --text-secondary: #6b7280;
12|    --accent: #64748b;
13|    --accent2: #94a3b8;
14|    --accent3: #ec4899;
15|    --green: #10b981;
16|    --amber: #f59e0b;
17|    --red: #ef4444;
18|    --blue: #3b82f6;
19|    --border-light: rgba(0,0,0,0.06);
20|    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
21|    --shadow: 0 4px 12px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
22|    --shadow-hover: 0 8px 24px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.03);
23|    --radius: 12px;
24|    --radius-sm: 8px;
25|    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
26|    --modal-overlay: rgba(0,0,0,0.25);
27|    --transition: 0.25s ease;
28|}
29|
30|[data-theme="dark"] {
31|    --bg: #121212;
32|    --bg-gradient: linear-gradient(135deg, #121212 0%, #1e1e1e 50%, #121212 100%);
33|    --card: #1e1e1e;
34|    --card-hover: #2a2a2a;
35|    --scrollbar-thumb: #475569;
36|    --scrollbar-track: #252525;
37|    --text: #e4e4e4;
38|    --text-secondary: #999;
39|    --accent: #22d3ee;
40|    --accent2: #2dd4bf;
41|    --border-light: rgba(255,255,255,0.06);
42|    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
43|    --shadow: 0 4px 12px rgba(0,0,0,0.4);
44|    --shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
45|    --modal-overlay: rgba(0,0,0,0.55);
46|}
47|
48|/* Dark mode: restore gradients for accent buttons */
49|[data-theme="dark"] .search-modal-btn,
50|[data-theme="dark"] .filter-btn.active,
51|[data-theme="dark"] .pagination .current,
52|[data-theme="dark"] .modal-footer-block a,
53|[data-theme="dark"] .detalle-original a {
54|    background: linear-gradient(135deg, var(--accent), var(--accent2));
55|}
56|[data-theme="dark"] .modal-footer-block a,
57|[data-theme="dark"] .search-modal-btn,
58|[data-theme="dark"] .search-chip-clear,
59|[data-theme="dark"] .detalle-original a,
60|[data-theme="dark"] .filter-btn.active,
61|[data-theme="dark"] .pagination .current { color: #0f172a; }
62|[data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,0.7); }
63|
64|*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
65|
66|html { overflow-y: scroll; }
67|
68|body {
69|    font-family: var(--font);
70|    background: var(--bg-gradient);
71|    color: var(--text);
72|    font-size: 15px;
73|    line-height: 1.6;
74|    min-height: 100vh;
75|    min-height: 100dvh;
76|    -webkit-font-smoothing: antialiased;
77|    display: block;
78|    overflow-x: hidden;
79|    padding-top: 56px;
80|    padding-bottom: env(safe-area-inset-bottom, 0px);
81|    transition: background 0.3s ease, color 0.3s ease;
82|}
83|
84|a { color: inherit; text-decoration: none; }
85|
86|/* ── HEADER ─────────────────────── */
87|
88|.header {
89|    background: var(--card);
90|    border-bottom: 1px solid var(--border-light);
91|    padding: 0 20px;
92|    height: 56px;
93|    display: flex;
94|    align-items: center;
95|    position: fixed;
96|    top: 0;
97|    left: 0;
98|    width: 100%;
99|    z-index: 100;
100|    transition: background 0.3s ease;
101|}
102|
103|.header-inner {
104|    max-width: 1040px;
105|    margin: 0 auto;
106|    width: 100%;
107|    display: flex;
108|    align-items: center;
109|    gap: 12px;
110|    position: relative;
111|    justify-content: flex-end;
112|}
113|
114|.theme-toggle {
115|    position: relative;
116|    width: 54px;
117|    height: 30px;
118|    border: none;
119|    border-radius: 15px;
120|    background: #e8e8e8;
121|    cursor: pointer;
122|    flex-shrink: 0;
123|    transition: background 0.4s ease;
124|    -webkit-tap-highlight-color: transparent;
125|    outline: none;
126|    padding: 0;
127|    overflow: hidden;
128|}
129|.theme-toggle .toggle-knob {
130|    position: absolute;
131|    top: 3px;
132|    left: 3px;
133|    width: 24px;
134|    height: 24px;
135|    border-radius: 50%;
136|    background: #fff;
137|    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
138|    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
139|    display: flex;
140|    align-items: center;
141|    justify-content: center;
142|    font-size: 13px;
143|    line-height: 1;
144|    z-index: 2;
145|    color: #333;
146|}
147|.theme-toggle.dark {
148|    background: #1e1e1e;
149|}
150|[data-theme="dark"] .theme-toggle.dark {
151|    background: #3a3a3a;
152|}
153|.theme-toggle.dark .toggle-knob {
154|    transform: translateX(24px) rotate(360deg);
155|    background: #333;
156|    color: #fff;
157|}
158|.theme-toggle .toggle-icons {
159|    position: absolute;
160|    inset: 0;
161|    display: flex;
162|    align-items: center;
163|    justify-content: space-between;
164|    padding: 0 7px;
165|    font-size: 12px;
166|    z-index: 1;
167|    color: #666;
168|    transition: color 0.4s ease;
169|}
170|.theme-toggle.dark .toggle-icons {
171|    color: rgba(255,255,255,0.7);
172|}
173|
174|.toggle-knob .icon-moon { display: none; }
175|.theme-toggle.dark .toggle-knob .icon-sun { display: none; }
176|.theme-toggle.dark .toggle-knob .icon-moon { display: block; }
177|
178|/* Estado oscuro vía data-theme (para el toggle del sidebar) */
179|[data-theme="dark"] .theme-toggle {
180|    background: #3a3a3a;
181|}
182|[data-theme="dark"] .theme-toggle .toggle-knob {
183|    transform: translateX(24px) rotate(360deg);
184|    background: #333;
185|    color: #fff;
186|}
187|[data-theme="dark"] .theme-toggle .toggle-icons {
188|    color: rgba(255,255,255,0.7);
189|}
190|[data-theme="dark"] .toggle-knob .icon-sun { display: none; }
191|[data-theme="dark"] .toggle-knob .icon-moon { display: block; }
192|
193|.header-brand {
194|    display: flex;
195|    flex-direction: column;
196|    align-items: center;
197|    gap: 2px;
198|    position: absolute;
199|    left: 50%;
200|    transform: translateX(-50%);
201|}
202|.header-logo {
203|    display: flex;
204|    align-items: center;
205|    gap: 8px;
206|    font-size: 1.3rem;
207|    font-weight: 800;
208|    color: var(--text);
209|    white-space: nowrap;
210|    flex-shrink: 0;
211|    letter-spacing: -0.3px;
212|}
213|.header-logo .logo-icon {
214|    width: 28px;
215|    height: 28px;
216|}
217|
218|.header-logo .logo-dot {
219|    width: 34px;
220|    height: 34px;
221|    background: linear-gradient(135deg, var(--accent), var(--accent2));
222|    border-radius: 10px;
223|    display: flex;
224|    align-items: center;
225|    justify-content: center;
226|    font-size: 1.1rem;
227|    color: #fff;
228|    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
229|}
230|
231|.header-logo span.accent {
232|    background: linear-gradient(135deg, var(--accent), var(--accent3));
233|    -webkit-background-clip: text;
234|    -webkit-text-fill-color: transparent;
235|    background-clip: text;
236|}
237|
238|.search-box {
239|    display: none;
240|}
241|
242|.search-box input {
243|    width: 100%;
244|    height: 40px;
245|    padding: 0 16px 0 40px;
246|    border: 1.5px solid transparent;
247|    border-radius: 12px;
248|    background: #f1f5f9;
249|    font-size: 14px;
250|    font-family: var(--font);
251|    outline: none;
252|    transition: all 0.2s ease;
253|    color: var(--text);
254|}
255|
256|.search-box input:hover { background: #e8ecf1; }
257|.search-box input:focus { 
258|    background: #fff; 
259|    border-color: var(--accent); 
260|    box-shadow: 0 0 0 3px rgba(99,102,241,0.1); 
261|}
262|.search-box input::placeholder { color: #94a3b8; }
263|
264|.search-box .search-icon {
265|    position: absolute;
266|    left: 14px;
267|    top: 50%;
268|    transform: translateY(-50%);
269|    color: #94a3b8;
270|    font-size: 15px;
271|    pointer-events: none;
272|}
273|
274|/* Mobile search toggle */
275|.search-toggle {
276|    display: flex;
277|    align-items: center;
278|    justify-content: center;
279|    width: 38px; height: 38px;
280|    border: none;
281|    border-radius: 10px;
282|    background: var(--card);
283|    color: var(--text-secondary);
284|    cursor: pointer;
285|    flex-shrink: 0;
286|}
287|.search-toggle:hover { color: var(--text); }
288|
289|/* Hamburger menu button */
290|.hamburger-btn {
291|    display: none;
292|    align-items: center;
293|    justify-content: center;
294|    width: 38px; height: 38px;
295|    border: none;
296|    border-radius: 10px;
297|    background: var(--card);
298|    color: var(--text-secondary);
299|    cursor: pointer;
300|    flex-shrink: 0;
301|    order: -1;
302|}
303|.hamburger-btn:hover { color: var(--text); }
304|
305|.header-actions {
306|    display: flex;
307|    align-items: center;
308|    gap: 8px;
309|    margin-left: auto;
310|}
311|
312|/* ── SEARCH MODAL ───────────────── */
313|.search-overlay {
314|    position: fixed;
315|    inset: 0;
316|    background: var(--modal-overlay);
317|    z-index: 200;
318|    display: flex;
319|    align-items: center;
320|    justify-content: center;
321|    opacity: 0;
322|    pointer-events: none;
323|    transition: opacity 0.25s ease;
324|}
325|.search-overlay.active { opacity: 1; pointer-events: auto; }
326|.search-modal-box {
327|    background: var(--card);
328|    border-radius: var(--radius);
329|    padding: 20px 24px;
330|    width: 90%;
331|    max-width: 500px;
332|    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
333|    position: relative;
334|    transform: translateY(-20px);
335|    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
336|}
337|.search-overlay.active .search-modal-box { transform: translateY(0); }
338|.search-modal-close {
339|    position: absolute;
340|    top: -40px; right: -8px;
341|    width: 32px; height: 32px;
342|    border: none; border-radius: 50%;
343|    background: rgba(255,255,255,0.2);
344|    cursor: pointer;
345|    font-size: 16px;
346|    color: #fff;
347|    display: flex; align-items: center; justify-content: center;
348|}
349|.search-modal-close:hover { background: rgba(255,255,255,0.35); }
350|.search-modal-form {
351|    display: flex;
352|    align-items: center;
353|    gap: 10px;
354|}
355|.search-modal-icon {
356|    color: var(--text-secondary);
357|    flex-shrink: 0;
358|}
359|.search-modal-input-wrap {
360|    flex: 1;
361|    background: var(--bg);
362|    border-radius: 25px;
363|    padding: 4px;
364|    display: flex;
365|    align-items: center;
366|}
367|.search-modal-form input {
368|    width: 100%;
369|    border: none;
370|    background: transparent;
371|    font-size: 16px;
372|    color: var(--text);
373|    outline: none;
374|    font-family: var(--font);
375|    padding: 8px 14px;
376|}
377|.search-modal-form input::placeholder { color: #94a3b8; }
378|.search-modal-btn {
379|    flex-shrink: 0;
380|    border: none;
381|    background: linear-gradient(135deg, var(--accent), var(--accent2));
382|    background: var(--accent);
383|    color: #fff;
384|    width: 42px; height: 42px;
385|    border-radius: 50%;
386|    cursor: pointer;
387|    display: flex; align-items: center; justify-content: center;
388|    transition: opacity 0.2s;
389|}
390|.search-modal-btn:hover { opacity: 0.9; }
391|
392|/* ── LAYOUT ─────────────────────── */
393|
394|.layout {
395|    max-width: 720px;
396|    margin: 0 auto;
397|    padding: 20px 20px 60px;
398|}
399|
400|/* ── Sidebar Reddit-style ── */
401|.sidebar {
402|    position: fixed;
403|    left: 0;
404|    top: 56px;
405|    width: 260px;
406|    height: calc(100vh - 56px);
407|    overflow-y: auto;
408|    overflow-x: hidden;
409|    overscroll-behavior: contain;
410|    z-index: 90;
411|    background: var(--card);
412|    border-right: 1px solid var(--border-light);
413|    padding: 8px 12px 20px 24px;
414|    display: flex;
415|    flex-direction: column;
416|    gap: 6px;
417|    transition: width 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
418|}
419|
420|/* Sidebar overlay (mobile drawer) */
421|.sidebar-overlay {
422|    position: fixed;
423|    inset: 0;
424|    background: rgba(0,0,0,0.5);
425|    z-index: 89;
426|    opacity: 0;
427|    pointer-events: none;
428|    transition: opacity 0.3s ease;
429|}
430|.sidebar-overlay.open {
431|    opacity: 1;
432|    pointer-events: auto;
433|}
434|
435|.sidebar::-webkit-scrollbar { width: 4px; }
436|.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
437|.sidebar::-webkit-scrollbar-track { background: transparent; }
438|
439|/* Firefox scrollbar */
440|.sidebar {
441|        padding-top: 20px;
442|    scrollbar-color: var(--scrollbar-thumb) transparent;
443|    scrollbar-width: thin;
444|}
445|
446|/* Colapsado — todos los botones circulares, mismo tamaño, centrados */
447|.sidebar.collapsed { width: 56px; padding: 6px 6px 20px; }
448|.sidebar.collapsed .sidebar-label,
449|.sidebar.collapsed .sidebar-badge,
450|.sidebar.collapsed .sidebar-card-header .sidebar-card-icon,
451|.sidebar.collapsed .sidebar-about { display: none; }
452|.sidebar.collapsed .sidebar-card { padding: 4px 0; }
453|.sidebar.collapsed .sidebar-card-header { justify-content: center; padding: 0; gap: 0; }
454|.sidebar.collapsed .sidebar-card-body { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
455|
456|/* Hide categories + about cards in collapsed mode (no visible content) */
457|.sidebar.collapsed .sidebar-card:nth-of-type(2),
458|.sidebar.collapsed .sidebar-card:nth-of-type(4) { display: none; }
459|
460|/* Toggle button (☰) */
461|.sidebar.collapsed .sidebar-toggle:hover {
462|    background: var(--card-hover);
463|    transform: scale(1.15);
464|}
465|.sidebar.collapsed .sidebar-toggle {
466|    border-radius: 50%;
467|    align-self: center;
468|    margin: 0 auto 4px;
469|    width: 34px;
470|    height: 34px;
471|    background: transparent;
472|    transition: transform 0.2s ease, background 0.15s;
473|}
474|.sidebar.collapsed .sidebar-toggle svg { width: 17px; height: 17px; }
475|
476|/* Home nav item */
477|.sidebar.collapsed .sidebar-nav-item {
478|    display: flex;
479|    align-items: center;
480|    justify-content: center;
481|    padding: 0;
482|    gap: 0;
483|    width: 34px;
484|    height: 34px;
485|    border-radius: 50%;
486|    margin: 0 auto;
487|    min-width: 34px;
488|    min-height: 34px;
489|    background: #e8e8e8;
490|    line-height: 0;
491|    transition: transform 0.2s ease, background 0.15s;
492|}
493|.sidebar.collapsed .sidebar-nav-item svg {
494|    width: 18px;
495|    height: 18px;
496|    display: block;
497|    flex-shrink: 0;
498|}
499|[data-theme="dark"] .sidebar.collapsed .sidebar-nav-item {
500|    background: #3a3a3a;
501|}
502|.sidebar.collapsed .sidebar-nav-item:hover {
503|    background: var(--card-hover);
504|    transform: scale(1.15);
505|}
506|.sidebar.collapsed .sidebar-nav-item.active::before { display: none; }
507|
508|/* Newspaper links */
509|.sidebar.collapsed .sidebar-link {
510|    justify-content: center;
511|    padding: 0;
512|    gap: 0;
513|    width: 34px;
514|    height: 34px;
515|    border-radius: 50%;
516|    margin: 0 auto;
517|    background: transparent;
518|    overflow: hidden;
519|    transition: transform 0.2s ease, background 0.15s;
520|}
521|.sidebar.collapsed .sidebar-link:hover {
522|    background: var(--card-hover);
523|    transform: scale(1.15);
524|}
525|.sidebar.collapsed .sidebar-link-img { overflow: hidden; 
526|    margin: 0;
527|    width: 100%;
528|    height: 100%;
529|    object-fit: cover;
530|    border-radius: 50%;
531|}
532|
533|/* Theme toggle (☀/☾) */
534|.sidebar.collapsed .theme-toggle {
535|    width: 34px;
536|    height: 34px;
537|    border-radius: 50%;
538|    display: flex;
539|    align-items: center;
540|    justify-content: center;
541|    margin: 0 auto;
542|    transition: transform 0.2s ease;
543|}
544|.sidebar.collapsed .theme-toggle:hover { transform: scale(1.15); }
545|.sidebar.collapsed .toggle-icons { display: none !important; }
546|
547|[data-theme="dark"] .sidebar.collapsed .toggle-knob,
548|[data-theme="light"] .sidebar.collapsed .toggle-knob {
549|    position: static;
550|    width: 22px;
551|    height: 22px;
552|    border-radius: 50%;
553|    transform: none !important;
554|    background: transparent !important;
555|    box-shadow: none !important;
556|    display: flex;
557|    align-items: center;
558|    justify-content: center;
559|    color: var(--text-secondary);
560|    top: auto;
561|    left: auto;
562|}
563|.sidebar.collapsed .toggle-knob svg { width: 16px; height: 16px; }
564|
565|[data-theme="light"] .sidebar.collapsed .toggle-knob .icon-sun { display: block; }
566|[data-theme="light"] .sidebar.collapsed .toggle-knob .icon-moon { display: none; }
567|[data-theme="dark"] .sidebar.collapsed .toggle-knob .icon-sun { display: none; }
568|[data-theme="dark"] .sidebar.collapsed .toggle-knob .icon-moon { display: block; }
569|
570|
571|/* Toggle button */
572|.sidebar-toggle {
573|    display: flex;
574|    align-items: center;
575|    justify-content: center;
576|    width: 32px;
577|    height: 32px;
578|    border: none;
579|    background: transparent;
580|    color: var(--text-secondary);
581|    cursor: pointer;
582|    border-radius: 8px;
583|    padding: 0;
584|    transition: color 0.15s, background 0.15s;
585|    align-self: flex-end;
586|    flex-shrink: 0;
587|}
588|.sidebar-toggle:hover { color: var(--text); background: var(--card-hover); }
589|
590|/* Nav items */
591|.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
592|.sidebar-nav-item {
593|    display: flex;
594|    align-items: center;
595|    gap: 10px;
596|    padding: 8px 12px;
597|    border-radius: 8px;
598|    text-decoration: none;
599|    color: var(--text);
600|    font-size: 14px;
601|    font-weight: 400;
602|    transition: background 0.15s;
603|    position: relative;
604|}
605|.sidebar-nav-item:hover { background: var(--card-hover); }
606|.sidebar-nav-item.active {
607|    background: var(--card-hover);
608|    color: var(--text);
609|    font-weight: 500;
610|}
611|/* Barra indicadora izquierda estilo Reddit */
612|.sidebar-nav-item.active::before {
613|    content: '';
614|    position: absolute;
615|    left: 0;
616|    top: 6px;
617|    bottom: 6px;
618|    width: 3px;
619|    background: var(--text);
620|    border-radius: 0 2px 2px 0;
621|    opacity: 0.8;
622|}
623|
624|/* Cards */
625|.sidebar-card {
626|    padding: 10px 0;
627|    border-bottom: 1px solid var(--border-light);
628|}
629|.sidebar-card:last-child { border-bottom: none; }
630|.sidebar-card-header {
631|    display: flex;
632|    align-items: center;
633|    gap: 8px;
634|    font-size: 12px;
635|    font-weight: 600;
636|    text-transform: uppercase;
637|    letter-spacing: 0.5px;
638|    color: var(--text-secondary);
639|    padding: 8px 0;
640|}
641|.sidebar-card-icon { flex-shrink: 0; color: var(--text-secondary); }
642|.sidebar-card-body { display: flex; flex-direction: column; gap: 2px; }
643|
644|/* Links */
645|.sidebar-link {
646|    display: flex;
647|    align-items: center;
648|    gap: 8px;
649|    padding: 8px 12px;
650|    border-radius: 8px;
651|    text-decoration: none;
652|    color: var(--text);
653|    font-size: 14px;
654|    transition: background 0.15s;
655|    white-space: nowrap;
656|}
657|.sidebar-link:hover { background: var(--card-hover); color: var(--accent); }
658|.sidebar-link-img { overflow: hidden; 
659|    width: 20px;
660|    height: 20px;
661|    border-radius: 50%;
662|    object-fit: cover;
663|    flex-shrink: 0;
664|}
665|
666|/* Badge */
667|.sidebar-badge {
668|    margin-left: auto;
669|    font-size: 12px;
670|    font-weight: 600;
671|    color: var(--text-secondary);
672|    background: var(--card-hover);
673|    padding: 2px 8px;
674|    border-radius: 10px;
675|    flex-shrink: 0;
676|}
677|
678|/* About */
679|.sidebar-about { font-size: 13px; }
680|.sidebar-about p { margin-bottom: 6px; }
681|.sidebar-meta { color: var(--text-secondary); font-size: 12px; margin: 0; }
682|
683|/* Mobile: sidebar as drawer */
684|
685|@media (max-width: 768px) {
686|    .hamburger-btn { display: flex; }
687|    .sidebar-toggle { display: none; }
688|    .sidebar {
689|        padding-top: 20px;
690|        transform: translateX(-100%);
691|        width: 280px;
692|        box-shadow: var(--shadow);
693|    }
694|    .sidebar.open { transform: translateX(0); }
695|    .layout { padding: 14px 12px 40px; }
696|}
697|
698|/* ── FILTERS ────────────────────── */
699|
700|.filters {
701|    display: flex;
702|    gap: 6px;
703|    flex-wrap: wrap;
704|    align-items: center;
705|    margin-bottom: 14px;
706|    padding: 6px 0;
707|}
708|
709|.filter-btn {
710|    padding: 7px 14px;
711|    border: none;
712|    border-radius: 10px;
713|    background: var(--card);
714|    cursor: pointer;
715|    font-size: 13px;
716|    font-weight: 600;
717|    transition: all 0.2s ease;
718|    display: inline-flex;
719|    align-items: center;
720|    gap: 6px;
721|    white-space: nowrap;
722|    color: var(--text-secondary);
723|    font-family: var(--font);
724|    box-shadow: var(--shadow-sm);
725|}
726|
727|.filter-btn:hover { background: var(--card-hover); color: var(--text); box-shadow: var(--shadow); transform: translateY(-1px); }
728|.filter-btn.active { 
729|    background: linear-gradient(135deg, var(--accent), var(--accent2)); 
730|    background: var(--accent);
731|    color: #fff; 
732|    box-shadow: 0 2px 8px rgba(99,102,241,0.3); 
733|}
734|
735|.filter-btn img {
736|    width: 18px;
737|    height: 18px;
738|    border-radius: 6px;
739|    object-fit: cover;
740|    flex-shrink: 0;
741|}
742|
743|.filter-sep { display: none; }
744|
745|/* Search chip */
746|.search-chip {
747|    display: inline-flex;
748|    align-items: center;
749|    gap: 10px;
750|    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
751|    border: 1px solid rgba(99,102,241,0.15);
752|    border-radius: 25px;
753|    padding: 8px 16px;
754|    margin-bottom: 14px;
755|    font-size: 13px;
756|    color: var(--text-secondary);
757|}
758|.search-chip strong { color: var(--accent); font-weight: 700; }
759|.search-chip-clear {
760|    display: flex;
761|    align-items: center;
762|    justify-content: center;
763|    width: 22px; height: 22px;
764|    border-radius: 50%;
765|    background: var(--accent);
766|    color: #fff;
767|    font-size: 11px;
768|    text-decoration: none;
769|    transition: opacity 0.2s;
770|    flex-shrink: 0;
771|}
772|.search-chip-clear:hover { opacity: 0.8; }
773|
774|.cat-select-wrap {
775|    position: relative;
776|    display: none;
777|    align-items: center;
778|}
779|.cat-select-wrap .cat-icon {
780|    position: absolute;
781|    left: 10px;
782|    top: 50%;
783|    transform: translateY(-50%);
784|    color: var(--text-secondary);
785|    pointer-events: none;
786|    z-index: 1;
787|    width: 14px;
788|    height: 14px;
789|}
790|.cat-select {
791|    padding: 7px 30px 7px 30px;
792|    border: none;
793|    border-radius: 10px;
794|    font-size: 13px;
795|    font-weight: 600;
796|    background: var(--card);
797|    cursor: pointer;
798|    appearance: none;
799|    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
800|    background-repeat: no-repeat;
801|    background-position: right 10px center;
802|    color: var(--text-secondary);
803|    outline: none;
804|    font-family: var(--font);
805|    box-shadow: var(--shadow-sm);
806|    transition: all 0.2s ease;
807|}
808|
809|.cat-select:hover { box-shadow: var(--shadow); color: var(--text); }
810|
811|/* ── POST ───────────────────────── */
812|
813|.post {
814|    background: var(--card);
815|    border-radius: var(--radius);
816|    margin-bottom: 10px;
817|    display: flex;
818|    cursor: pointer;
819|    transition: all 0.25s ease;
820|    box-shadow: var(--shadow);
821|    overflow: hidden;
822|}
823|
824|.post:hover {
825|    box-shadow: var(--shadow-hover);
826|    transform: translateY(-2px);
827|}
828|
829|.post-content {
830|    flex: 1;
831|    padding: 14px 16px;
832|    min-width: 0;
833|    display: flex;
834|    gap: 14px;
835|}
836|
837|.post-thumb {
838|    width: 56px;
839|    height: 56px;
840|    flex-shrink: 0;
841|    border-radius: 12px;
842|    overflow: hidden;
843|    background: linear-gradient(135deg, #f1f5f9, #e8ecf1);
844|    display: flex;
845|    align-items: center;
846|    justify-content: center;
847|}
848|
849|.post-thumb img {
850|    width: 32px;
851|    height: 32px;
852|    object-fit: cover;
853|    border-radius: 8px;
854|}
855|
856|/* ── Article image thumbnail ─────────── */
857|.post-thumb.has-image {
858|    width: 100px;
859|    height: 100px;
860|    background: var(--card);
861|    border-radius: 12px;
862|}
863|.post-thumb.has-image img {
864|    width: 100%;
865|    height: 100%;
866|    object-fit: cover;
867|    border-radius: 12px;
868|}
869|
870|.post-body { flex: 1; min-width: 0; }
871|
872|.post-title {
873|    font-size: 16px;
874|    font-weight: 600;
875|    line-height: 1.4;
876|    color: var(--text);
877|    margin-bottom: 5px;
878|    word-wrap: break-word;
879|    letter-spacing: -0.2px;
880|}
881|
882|.post-title a:hover { color: var(--accent); }
883|
884|.post-meta {
885|    font-size: 12px;
886|    color: var(--text-secondary);
887|    display: flex;
888|    align-items: center;
889|    gap: 4px;
890|    flex-wrap: wrap;
891|    margin-bottom: 4px;
892|}
893|
894|.post-meta .sep { color: #cbd5e1; margin: 0 1px; }
895|
896|.post-flair {
897|    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
898|    color: var(--accent);
899|    padding: 2px 8px;
900|    border-radius: 6px;
901|    font-size: 11px;
902|    font-weight: 600;
903|    line-height: 1.6;
904|}
905|
906|.post-summary {
907|    font-size: 13px;
908|    color: var(--text-secondary);
909|    line-height: 1.6;
910|    margin-top: 4px;
911|    max-height: 42px;
912|    overflow: hidden;
913|}
914|
915|.post-actions {
916|    display: flex;
917|    gap: 8px;
918|    margin-top: 8px;
919|}
920|
921|.post-actions a {
922|    font-size: 12px;
923|    font-weight: 600;
924|    color: var(--text-secondary);
925|    display: flex;
926|    align-items: center;
927|    gap: 4px;
928|    padding: 4px 8px;
929|    border-radius: 6px;
930|    transition: all 0.15s ease;
931|}
932|
933|.post-actions a:hover { background: var(--card-hover); color: var(--accent); }
934|
935|.read-original {
936|    background: var(--bg);
937|    border-radius: 10px;
938|    display: inline-flex;
939|    align-items: center;
940|    gap: 6px;
941|    padding: 7px 14px;
942|    font-size: 13px;
943|    font-weight: 600;
944|    color: var(--text-secondary);
945|    text-decoration: none;
946|    transition: all 0.2s ease;
947|}
948|.read-original:hover { background: var(--card-hover); color: var(--text); }
949|
950|/* ── SIDEBAR ────────────────────── */
951|
952|.sidebar-card {
953|    /* fondo y sombra removidos */
954|}
955|
956|.sidebar-card-header {
957|    padding: 14px 16px 10px;
958|    font-size: 11px;
959|    font-weight: 700;
960|    text-transform: uppercase;
961|    letter-spacing: 0.8px;
962|    color: var(--text-secondary);
963|}
964|
965|.sidebar-card-body {
966|    padding: 0 16px 14px;
967|    font-size: 13px;
968|    color: var(--text);
969|    line-height: 1.6;
970|}
971|
972|.sidebar-card-body p { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
973|.sidebar-card-body p:last-child { margin-bottom: 0; }
974|.sidebar-card-body a { transition: color 0.15s; }
975|.sidebar-card-body a:hover { color: var(--accent); }
976|
977|.sidebar-stat {
978|    font-size: 12px;
979|    font-weight: 700;
980|    color: var(--accent);
981|    background: rgba(99,102,241,0.08);
982|    padding: 2px 8px;
983|    border-radius: 6px;
984|}
985|
986|/* ── PAGINATION ─────────────────── */
987|
988|.pagination {
989|    display: flex;
990|    gap: 4px;
991|    margin-top: 20px;
992|    flex-wrap: wrap;
993|}
994|
995|.pagination a, .pagination span {
996|    padding: 8px 13px;
997|    border-radius: 8px;
998|    font-size: 13px;
999|    font-weight: 600;
1000|    text-decoration: none;
1001|    color: var(--text-secondary);
1002|    background: var(--card);
1003|    box-shadow: var(--shadow-sm);
1004|    transition: all 0.2s ease;
1005|}
1006|
1007|.pagination a:hover { color: #fff; background: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
1008|.pagination .current { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); background: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
1009|.pagination .disabled { opacity: 0.3; pointer-events: none; }
1010|
1011|/* ── EMPTY ──────────────────────── */
1012|
1013|.empty-state {
1014|    text-align: center;
1015|    padding: 60px 20px;
1016|    background: var(--card);
1017|    border-radius: var(--radius);
1018|    color: var(--text-secondary);
1019|    box-shadow: var(--shadow);
1020|}
1021|
1022|.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
1023|
1024|/* ── RESPONSIVE ─────────────────── */
1025|
1026|@media (max-width: 960px) {
1027|    .layout { padding: 14px 12px 40px; }
1028|    .main-feed { width: 100%; }
1029|}
1030|
1031|@media (max-width: 640px) {
1032|    .header { padding: 0 12px; height: 50px; }
1033|    .sidebar { top: 50px; height: calc(100dvh - 50px); }
1034|        padding-top: 20px;
1035|    .header-inner { gap: 8px; justify-content: space-between; }
1036|    .header-logo { font-size: 1.1rem; }
1037|    .header-logo .logo-dot { width: 28px; height: 28px; border-radius: 8px; font-size: 0.9rem; }
1038|    .search-box { display: none; }
1039|
1040|    .theme-toggle { 
1041|        width: 48px; height: 26px; 
1042|        border-radius: 13px; 
1043|        flex-shrink: 0;
1044|    }
1045|    .theme-toggle .toggle-knob { 
1046|        width: 20px; height: 20px; top: 3px; left: 3px; 
1047|        font-size: 10px;
1048|    }
1049|    .theme-toggle.dark .toggle-knob { transform: translateX(22px) rotate(360deg); }
1050|    .theme-toggle .toggle-icons { padding: 0 5px; font-size: 10px; }
1051|    .theme-toggle .toggle-icons svg { width: 12px; height: 12px; }
1052|    .toggle-knob svg { width: 11px; height: 11px; }
1053|    .layout { padding: 10px 8px max(80px, calc(60px + env(safe-area-inset-bottom, 40px))); gap: 10px; }
1054|    .post { border-radius: var(--radius-sm); margin-bottom: 8px; }
1055|    .post-content { padding: 12px 10px; gap: 10px; }
1056|    .post-thumb { width: 42px; height: 42px; border-radius: 10px; }
1057|    .post-thumb img { width: 26px; height: 26px; }
1058|    .post-thumb.has-image { width: 70px; height: 70px; border-radius: 10px; }
1059|    .post-thumb.has-image img { border-radius: 10px; }
1060|    .post-title { font-size: 14px; }
1061|    .filters { gap: 4px; }
1062|    .filter-btn { padding: 6px 10px; font-size: 12px; }
1063|    .cat-select { font-size: 12px; padding: 6px 26px 6px 28px; }
1064|}
1065|
1066|/* ── SHARE BUTTONS ───────────────── */
1067|
1068|.share-btns {
1069|    display: flex;
1070|    align-items: center;
1071|    gap: 6px;
1072|}
1073|.share-label {
1074|    font-size: 10px;
1075|    font-weight: 600;
1076|    color: var(--text-secondary);
1077|    text-transform: uppercase;
1078|    letter-spacing: 0.5px;
1079|    margin-right: 2px;
1080|}
1081|.share-btn {
1082|    width: 32px; height: 32px;
1083|    border: none;
1084|    border-radius: 8px;
1085|    cursor: pointer;
1086|    display: flex;
1087|    align-items: center;
1088|    justify-content: center;
1089|    transition: all 0.2s ease;
1090|    text-decoration: none;
1091|    background: transparent;
1092|    color: inherit;
1093|}
1094|.share-btn:hover { transform: translateY(-1px); }
1095|.share-btn.whatsapp { color: #25d366; }
1096|.share-btn.twitter { color: #000; }
1097|.share-btn.facebook { color: #1877f2; }
1098|
1099|[data-theme="dark"] .share-btn.whatsapp { color: #3ddb84; }
1100|[data-theme="dark"] .share-btn.twitter { color: #e2e8f0; }
1101|[data-theme="dark"] .share-btn.facebook { color: #6badf7; }
1102|
1103|/* ── RELATED ─────────────────────── */
1104|
1105|.related {
1106|    margin-top: 20px;
1107|    padding-top: 20px;
1108|    border-top: 1px solid var(--border-light);
1109|}
1110|.related h3 {
1111|    font-size: 13px;
1112|    font-weight: 700;
1113|    color: var(--accent);
1114|    margin-bottom: 12px;
1115|    text-transform: uppercase;
1116|    letter-spacing: 0.8px;
1117|}
1118|.related-list {
1119|    display: flex;
1120|    flex-direction: column;
1121|    gap: 8px;
1122|}
1123|.related-item {
1124|    display: flex;
1125|    align-items: center;
1126|    gap: 10px;
1127|    padding: 10px 12px;
1128|    background: var(--bg);
1129|    border-radius: var(--radius-sm);
1130|    text-decoration: none;
1131|    color: var(--text);
1132|    transition: all 0.2s ease;
1133|    font-size: 13px;
1134|    font-weight: 500;
1135|}
1136|.related-item:hover { background: var(--card-hover); color: var(--accent); }
1137|.related-item img {
1138|    width: 20px; height: 20px;
1139|    border-radius: 5px;
1140|    object-fit: cover;
1141|    flex-shrink: 0;
1142|}
1143|.related-item .related-source {
1144|    font-size: 10px;
1145|    color: var(--text-secondary);
1146|    font-weight: 600;
1147|    text-transform: uppercase;
1148|}
1149|
1150|/* ── MODAL ──────────────────────── */
1151|
1152|.modal-overlay {
1153|    position: fixed;
1154|    inset: 0;
1155|    background: var(--modal-overlay);
1156|    z-index: 999;
1157|    display: flex;
1158|    align-items: center;
1159|    justify-content: center;
1160|    padding: 20px;
1161|    opacity: 0;
1162|    pointer-events: none;
1163|    transition: opacity 0.2s ease;
1164|    /* iOS: usar altura dinámica para que el overlay cubra el viewport real */
1165|    height: 100vh;
1166|    height: 100dvh;
1167|}
1168|.modal-overlay.active { opacity: 1; pointer-events: auto; touch-action: none; }
1169|
1170|.modal-box {
1171|    background: transparent;
1172|    box-shadow: none;
1173|    max-width: 700px;
1174|    width: 100%;
1175|    max-height: 85vh;
1176|    max-height: 85dvh;
1177|    overflow-y: auto;
1178|    overscroll-behavior: contain;
1179|    -webkit-overflow-scrolling: touch;
1180|    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
1181|    scrollbar-width: thin;
1182|    padding: 0;
1183|    position: relative;
1184|    display: flex;
1185|    flex-direction: column;
1186|    gap: 12px;
1187|    transform: translateY(60px);
1188|    opacity: 0;
1189|    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
1190|}
1191|.modal-overlay.active .modal-box {
1192|    transform: translateY(0);
1193|    opacity: 1;
1194|}
1195|
1196|/* Scrollbar personalizada (Firefox + WebKit) */
1197|.modal-box::-webkit-scrollbar { width: 6px; }
1198|.modal-box::-webkit-scrollbar-track { background: transparent; }
1199|.modal-box::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
1200|
1201|/* mobile: modal full-width, slide from bottom */
1202|@media (max-width: 640px) {
1203|    .modal-overlay {
1204|        align-items: flex-end;
1205|        padding: 40px 0 0 0;
1206|        padding-bottom: env(safe-area-inset-bottom, 0px);
1207|        height: 100dvh;
1208|    }
1209|    .modal-box {
1210|        max-width: 100%;
1211|        max-height: calc(90vh - 40px);
1212|        max-height: calc(90dvh - 40px - env(safe-area-inset-bottom, 0px));
1213|        border-radius: var(--radius) var(--radius) 0 0;
1214|        padding: 28px 28px max(28px, calc(28px + env(safe-area-inset-bottom, 20px))) 28px;
1215|        transform: translateY(100%);
1216|        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
1217|    }
1218|    .modal-overlay.active .modal-box {
1219|        transform: translateY(0);
1220|    }
1221|    .modal-card { padding: 20px 16px; }
1222|    .modal-header-block { padding: 20px 16px 16px; }
1223|    .modal-title { font-size: 18px; }
1224|    .modal-text { font-size: 15px; }
1225|    .modal-footer-block { flex-direction: column; gap: 12px; padding: 16px; text-align: center; }
1226|    .modal-footer-block a { width: 100%; text-align: center; }
1227|    .modal-share { margin: 4px 0 0; }
1228|}
1229|
1230|.modal-close {
1231|    position: absolute;
1232|    top: 12px;
1233|    right: 14px;
1234|    width: 32px; height: 32px;
1235|    border: none;
1236|    border-radius: 8px;
1237|    background: var(--bg);
1238|    cursor: pointer;
1239|    font-size: 18px;
1240|    color: var(--text-secondary);
1241|    display: flex;
1242|    align-items: center;
1243|    justify-content: center;
1244|}
1245|.modal-close:hover { background: var(--card-hover); }
1246|
1247|/* ── Modal cards ── */
1248|.modal-card {
1249|    background: var(--card);
1250|    border-radius: var(--radius);
1251|    box-shadow: var(--shadow);
1252|    padding: 28px;
1253|}
1254|.modal-card:last-child { margin-bottom: 0; }
1255|
1256|/* ── Modal header ── */
1257|.modal-header-block { padding: 28px 28px 24px; }
1258|.modal-source { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
1259|.modal-source img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: var(--bg); padding: 4px; }
1260|.modal-source span { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
1261|.modal-title { font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 12px; color: var(--text); padding-right: 36px; letter-spacing: -0.3px; }
1262|.modal-meta-row { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
1263|.modal-flair { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)); color: var(--accent); padding: 3px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
1264|.modal-dot { color: #cbd5e1; }
1265|
1266|/* ── Modal body ── */
1267|.modal-text { font-size: 16px; line-height: 1.85; color: var(--text); }
1268|.modal-text p { margin-bottom: 18px; }
1269|.modal-text p:last-child { margin-bottom: 0; }
1270|.modal-text .resumen-subtitle { font-size: 13px; font-weight: 700; color: var(--accent); margin: 20px 0 8px 0; text-transform: uppercase; letter-spacing: 0.6px; }
1271|.modal-text .resumen-subtitle:first-child { margin-top: 0; }
1272|.modal-text img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
1273|.modal-text a { color: var(--accent); text-decoration: underline; }
1274|
1275|/* ── Modal footer ── */
1276|.modal-footer-block { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
1277|.modal-footer-block span { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
1278|.modal-footer-block a { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); background: var(--accent); padding: 8px 18px; border-radius: 10px; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(99,102,241,0.25); white-space: nowrap; }
1279|.modal-footer-block a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }
1280|
1281|.modal-share {
1282|    display: flex;
1283|    align-items: center;
1284|    gap: 6px;
1285|    margin: 6px 0 14px;
1286|}
1287|.modal-share-label {
1288|    font-size: 11px;
1289|    font-weight: 600;
1290|    color: var(--text-secondary);
1291|    text-transform: uppercase;
1292|    letter-spacing: 0.5px;
1293|    margin-right: 4px;
1294|}
1295|
1296|/* ─── Auth pages ─── */
1297|.auth-page {
1298|    max-width: 420px;
1299|    margin: 40px auto;
1300|    padding: 0 16px;
1301|}
1302|.auth-card {
1303|    background: var(--card);
1304|    border-radius: 12px;
1305|    padding: 32px 28px;
1306|    box-shadow: var(--shadow);
1307|    text-align: center;
1308|}
1309|.auth-title {
1310|    font-size: 22px;
1311|    font-weight: 700;
1312|    color: var(--text);
1313|    margin: 0 0 6px 0;
1314|}
1315|.auth-subtitle {
1316|    font-size: 14px;
1317|    color: var(--text-secondary);
1318|    margin: 0 0 24px 0;
1319|    line-height: 1.5;
1320|}
1321|.auth-error {
1322|    background: #fee2e2;
1323|    color: #991b1b;
1324|    padding: 10px 14px;
1325|    border-radius: 8px;
1326|    font-size: 13px;
1327|    margin-bottom: 20px;
1328|    text-align: left;
1329|}
1330|[data-theme="dark"] .auth-error {
1331|    background: #3b1010;
1332|    color: #fca5a5;
1333|}
1334|.auth-form {
1335|    text-align: left;
1336|}
1337|.auth-field {
1338|    margin-bottom: 16px;
1339|}
1340|.auth-field label {
1341|    display: block;
1342|    font-size: 13px;
1343|    font-weight: 600;
1344|    color: var(--text-secondary);
1345|    margin-bottom: 6px;
1346|    text-transform: uppercase;
1347|    letter-spacing: 0.5px;
1348|}
1349|.auth-field input {
1350|    width: 100%;
1351|    padding: 10px 14px;
1352|    border: 1.5px solid var(--border);
1353|    border-radius: 8px;
1354|    font-size: 15px;
1355|    color: var(--text);
1356|    background: var(--bg);
1357|    outline: none;
1358|    transition: border-color 0.2s;
1359|    box-sizing: border-box;
1360|}
1361|.auth-field input:focus {
1362|    border-color: var(--accent);
1363|    box-shadow: 0 0 0 3px rgba(34,211,238,0.15);
1364|}
1365|[data-theme="light"] .auth-field input:focus {
1366|    box-shadow: 0 0 0 3px rgba(100,116,139,0.15);
1367|}
1368|.auth-btn {
1369|    width: 100%;
1370|    padding: 11px 20px;
1371|    border: none;
1372|    border-radius: 8px;
1373|    font-size: 15px;
1374|    font-weight: 600;
1375|    cursor: pointer;
1376|    margin-top: 8px;
1377|    background: linear-gradient(135deg, #22d3ee, #2dd4bf);
1378|    color: #0f172a;
1379|    transition: opacity 0.2s, transform 0.15s;
1380|}
1381|.auth-btn:hover {
1382|    opacity: 0.92;
1383|    transform: translateY(-1px);
1384|}
1385|.auth-btn:active {
1386|    transform: translateY(0);
1387|}
1388|[data-theme="light"] .auth-btn {
1389|    background: #64748b;
1390|    color: #fff;
1391|}
1392|.auth-footer {
1393|    margin-top: 20px;
1394|    font-size: 13px;
1395|    color: var(--text-secondary);
1396|}
1397|.auth-footer a {
1398|    color: var(--accent);
1399|    text-decoration: none;
1400|    font-weight: 600;
1401|}
1402|.auth-footer a:hover {
1403|    text-decoration: underline;
1404|}
1405|
1406|/* ─── Header user links ─── */
1407|.header-login-link {
1408|    font-size: 13px;
1409|    font-weight: 600;
1410|    color: var(--accent);
1411|    text-decoration: none;
1412|    padding: 6px 14px;
1413|    border-radius: 8px;
1414|    transition: background 0.2s;
1415|    white-space: nowrap;
1416|}
1417|.header-login-link:hover {
1418|    background: var(--card-hover);
1419|}
1420|.header-user-link {
1421|    display: flex;
1422|    align-items: center;
1423|    gap: 6px;
1424|    font-size: 13px;
1425|    font-weight: 600;
1426|    color: var(--text);
1427|    text-decoration: none;
1428|    padding: 6px 12px;
1429|    border-radius: 8px;
1430|    transition: background 0.2s;
1431|    white-space: nowrap;
1432|}
1433|.header-user-link:hover {
1434|    background: var(--card-hover);
1435|}
1436|.header-user-link svg {
1437|    flex-shrink: 0;
1438|}
1439|.header-user-name {
1440|    max-width: 100px;
1441|    overflow: hidden;
1442|    text-overflow: ellipsis;
1443|}
1444|@media (max-width: 640px) {
1445|    .header-user-name { display: none; }
1446|    .auth-page { margin: 16px auto; }
1447|}
1448|

/* ─── Auth Modal ─── */
.auth-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.auth-overlay.active { opacity: 1; pointer-events: auto; }
.auth-modal-box {
    background: var(--card); border-radius: 12px;
    padding: 32px 28px; width: 100%; max-width: 400px;
    max-height: 90dvh; overflow-y: auto;
    position: relative; box-shadow: var(--shadow);
    margin: 16px;
}
.auth-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none; font-size: 22px;
    color: var(--text-secondary); cursor: pointer;
    padding: 4px 8px; line-height: 1;
}
.auth-modal-close:hover { color: var(--text); }

.auth-panel .auth-title { font-size: 20px; margin: 0 0 4px 0; }
.auth-panel .auth-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px 0; }
.auth-panel .auth-error {
    background: #fee2e2; color: #991b1b;
    padding: 10px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 16px;
}
[data-theme="dark"] .auth-panel .auth-error { background: #3b1010; color: #fca5a5; }
.auth-panel .auth-field { margin-bottom: 14px; }
.auth-panel .auth-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.auth-panel .auth-field input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 15px; color: var(--text);
    background: var(--bg); outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.auth-panel .auth-field input:focus { border-color: var(--accent); }
.auth-panel .auth-btn {
    width: 100%; padding: 11px; border: none;
    border-radius: 8px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 6px;
    background: linear-gradient(135deg, #22d3ee, #2dd4bf);
    color: #0f172a; transition: opacity 0.2s;
}
.auth-panel .auth-btn:hover { opacity: 0.9; }
.auth-panel .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
[data-theme="light"] .auth-panel .auth-btn { background: #64748b; color: #fff; }
.auth-panel .auth-footer {
    margin-top: 16px; font-size: 13px; text-align: center;
    color: var(--text-secondary);
}
.auth-panel .auth-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* ─── Live field feedback ─── */
.field-feedback {
    display: block; font-size: 12px; margin-top: 3px;
    min-height: 16px; transition: color 0.2s;
}
.field-feedback.ok { color: #16a34a; }
.field-feedback.err { color: #dc2626; }
.field-feedback.checking { color: var(--text-secondary); }
[data-theme="dark"] .field-feedback.ok { color: #4ade80; }
[data-theme="dark"] .field-feedback.err { color: #f87171; }