1/* ═══════════════════════════════════════════════════════════════
2 NEXUS FORUM — main.css
3 Single canonical stylesheet. No duplicates.
4 ═══════════════════════════════════════════════════════════════ */
5
6
7:root {
8 --blue:#3b82f6; --blue-d:#2563eb; --blue-l:#eff6ff;
9 --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --purple:#8b5cf6;
10 --bg:#f1f5f9; --surface:#fff; --border:#e2e8f0; --border-l:#f1f5f9;
11 --text:#0f172a; --muted:#64748b; --faint:#94a3b8;
12 --header:56px; --sidebar:210px;
13 --r:8px; --r-lg:12px;
14 --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
15 --sh-md:0 4px 12px rgba(0,0,0,.1);
16 --sh-lg:0 10px 30px rgba(0,0,0,.12);
17 --font:'Inter',-apple-system,sans-serif;
18 --mono:'JetBrains Mono','Fira Code',monospace;
19}
20
21
22*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
23html { font-size:15px; scroll-behavior:smooth; }
24body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
25a { color:var(--blue); text-decoration:none; }
26a:hover { text-decoration:underline; }
27img { max-width:100%; height:auto; }
28
29
30.site-header { position:fixed; top:0; left:0; right:0; height:var(--header); background:var(--surface); border-bottom:1px solid var(--border); z-index:100; box-shadow:var(--sh); }
31.hdr-inner { display:flex; align-items:center; gap:12px; height:100%; padding:0 16px; max-width:1440px; margin:0 auto; }
32.hdr-left { display:flex; align-items:center; gap:10px; flex-shrink:0; }
33.hdr-search { flex:1; max-width:460px; }
34.hdr-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
35
36
37.burger { width:34px; height:34px; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:4px; border-radius:6px; transition:background .18s; }
38.burger:hover { background:var(--border-l); }
39.burger span { display:block; height:2px; background:var(--muted); border-radius:2px; transition:all .25s; }
40.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
41.burger.open span:nth-child(2) { opacity:0; }
42.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
43
44
45.logo { display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
46.logo:hover { text-decoration:none; }
47.logo-mark { width:32px; height:32px; background:var(--blue); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
48.logo-name { font-size:16px; font-weight:600; white-space:nowrap; }
49.logo-img { height:32px; width:auto; object-fit:contain; }
50
51
52.search-wrap { position:relative; width:100%; }
53.srch-icon { width:14px; height:14px; position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
54#searchInput { width:100%; height:36px; border:1px solid var(--border); border-radius:18px; background:var(--bg); padding:0 12px 0 30px; font-size:14px; font-family:var(--font); outline:none; transition:all .18s; }
55#searchInput:focus { background:var(--surface); border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
56.search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-md); z-index:200; display:none; overflow:hidden; }
57.search-results.show { display:block; }
58.sr-item { display:block; padding:10px 14px; font-size:14px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border-l); transition:background .18s; }
59.sr-item:last-child { border-bottom:none; }
60.sr-item:hover { background:var(--bg); text-decoration:none; }
61.sr-item small { display:block; font-size:12px; color:var(--muted); margin-top:1px; }
62
63
64.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; backdrop-filter:blur(2px); }
65.sb-overlay.show { display:block; }
66.sidebar { position:fixed; top:var(--header); left:0; width:var(--sidebar); height:calc(100vh - var(--header)); background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; z-index:95; transition:transform .25s; scrollbar-width:thin; }
67@media(max-width:900px) { .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); } }
68.sidebar nav { padding:10px 8px; }
69.nav-link { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; transition:all .18s; margin-bottom:2px; }
70.nav-link:hover { background:var(--blue-l); color:var(--blue); text-decoration:none; }
71.new-link { background:var(--blue)!important; color:#fff!important; margin-bottom:8px; }
72.new-link:hover { background:var(--blue-d)!important; }
73.nav-sep { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:10px 10px 4px; }
74.cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
75
76
77.main { margin-top:var(--header); margin-left:var(--sidebar); flex:1; }
78@media(max-width:900px) { .main { margin-left:0; } .sidebar { transform:translateX(-100%); } }
79.wrap { max-width:1100px; margin:0 auto; padding:28px 24px; }
80@media(max-width:600px) { .wrap { padding:16px; } }
81
82
83.site-footer { margin-left:var(--sidebar); background:var(--surface); border-top:1px solid var(--border); padding:14px 24px; font-size:13px; color:var(--muted); }
84@media(max-width:900px) { .site-footer { margin-left:0; } }
85.footer-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
86.footer-stats { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
87.footer-stats strong { color:var(--text); }
88.fs-div { color:var(--faint); }
89.footer-right { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }
90
91
92.notif-wrap,.user-wrap { position:relative; }
93.icon-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:50%; cursor:pointer; color:var(--muted); position:relative; transition:all .18s; }
94.icon-btn:hover { background:var(--border-l); color:var(--text); }
95.badge-dot { position:absolute; top:1px; right:1px; background:var(--red); color:#fff; font-size:9px; font-weight:700; border-radius:10px; padding:1px 4px; min-width:16px; text-align:center; line-height:14px; }
96.avatar-btn { width:36px; height:36px; border-radius:50%; border:2px solid var(--border); background:none; cursor:pointer; padding:0; overflow:hidden; transition:border-color .18s; }
97.avatar-btn:hover { border-color:var(--blue); }
98.notif-drop,.user-drop { position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-lg); z-index:200; display:none; min-width:200px; animation:dropIn .18s ease; }
99.notif-drop.show,.user-drop.show { display:block; }
100.notif-drop { min-width:300px; right:-60px; }
101@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
102.notif-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-l); font-weight:600; font-size:14px; }
103.link-btn { background:none; border:none; color:var(--blue); font-size:12px; cursor:pointer; padding:2px 6px; font-family:var(--font); }
104.link-btn:hover { text-decoration:underline; }
105#notifList { max-height:320px; overflow-y:auto; }
106.notif-item { display:block; padding:11px 16px; border-bottom:1px solid var(--border-l); font-size:13px; color:var(--text); text-decoration:none; transition:background .18s; }
107.notif-item:hover { background:var(--bg); }
108.notif-item.unread { background:var(--blue-l); }
109.notif-item-time { font-size:11px; color:var(--faint); margin-top:2px; }
110.notif-empty { padding:20px; text-align:center; color:var(--muted); font-size:13px; }
111.user-drop-top { padding:12px 16px 8px; border-bottom:1px solid var(--border-l); display:flex; align-items:center; gap:8px; }
112.user-drop a { display:flex; align-items:center; padding:9px 16px; font-size:14px; color:var(--text); text-decoration:none; transition:background .18s; }
113.user-drop a:hover { background:var(--bg); }
114.admin-lnk { color:var(--blue)!important; }
115.logout-lnk { color:var(--red)!important; }
116.drop-div { height:1px; background:var(--border-l); margin:4px 0; }
117
118
119.btn-primary { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--blue); color:#fff; border:none; border-radius:var(--r); font-size:14px; font-weight:500; font-family:var(--font); cursor:pointer; text-decoration:none; transition:all .18s; white-space:nowrap; }
120.btn-primary:hover { background:var(--blue-d); color:#fff; text-decoration:none; transform:translateY(-1px); }
121.btn-ghost { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:var(--r); font-size:14px; font-weight:500; font-family:var(--font); cursor:pointer; text-decoration:none; transition:all .18s; }
122.btn-ghost:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); text-decoration:none; }
123.btn-lg { padding:11px 24px; font-size:15px; }
124.btn-sm { padding:5px 12px; font-size:13px; }
125.btn-block { width:100%; justify-content:center; }
126.btn-warn { background:var(--amber); color:#fff; border:none; border-radius:var(--r); cursor:pointer; padding:5px 12px; font-size:13px; font-family:var(--font); }
127.btn-ok { background:var(--green); color:#fff; border:none; border-radius:var(--r); cursor:pointer; padding:5px 12px; font-size:13px; font-family:var(--font); }
128.btn-danger { background:var(--red); color:#fff; border:none; border-radius:var(--r); cursor:pointer; padding:5px 12px; font-size:13px; font-family:var(--font); }
129
130
131.fg { margin-bottom:16px; }
132.fg label { display:block; font-size:14px; font-weight:500; margin-bottom:5px; }
133.fi { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--r); font-size:14px; font-family:var(--font); color:var(--text); background:var(--surface); outline:none; transition:all .18s; }
134.fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
135textarea.fi { resize:vertical; min-height:80px; }
136select.fi { cursor:pointer; }
137.req { color:var(--red); }
138.hint { font-size:12px; color:var(--faint); margin-top:3px; display:block; }
139.form-actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
140.form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh); max-width:760px; }
141.form-card h1 { font-size:1.4rem; font-weight:700; margin-bottom:20px; }
142.form-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; margin-bottom:18px; box-shadow:var(--sh); }
143.form-section h2 { font-size:15px; font-weight:600; margin-bottom:14px; }
144.pw-row { position:relative; }
145.pw-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; }
146.pw-bar { height:4px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
147.pw-fill { height:100%; width:0; border-radius:2px; transition:all .3s; }
148.tag-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; min-height:22px; }
149
150
151.alert { padding:12px 16px; border-radius:var(--r); font-size:14px; margin-bottom:18px; }
152.alert.err,.alert-err { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
153.alert.ok { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
154.alert.warn{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
155
156
157.av-sm { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
158.av-md { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
159.av-lg { width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0; }
160.av-xl { width:76px; height:76px; border-radius:50%; object-fit:cover; flex-shrink:0; }
161.av-init { background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%); color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
162.av-sm.av-init { width:34px; height:34px; font-size:14px; }
163.av-md.av-init { width:42px; height:42px; font-size:16px; }
164.av-lg.av-init { width:54px; height:54px; font-size:20px; }
165.av-xl.av-init { width:76px; height:76px; font-size:28px; }
166.av-xs { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; font-size:10px; font-weight:700; }
167
168
169.role-tag { display:inline-flex; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; text-transform:capitalize; }
170.role-admin { background:#fee2e2; color:#991b1b; }
171.role-moderator { background:#dbeafe; color:#1e40af; }
172.role-member { background:#f1f5f9; color:#64748b; }
173.role-flair { font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; text-transform:uppercase; }
174.role-flair.admin { background:var(--red); color:#fff; }
175.role-flair.mod { background:var(--blue); color:#fff; }
176
177
178.tag { display:inline-flex; align-items:center; padding:2px 8px; background:#f1f5f9; color:var(--muted); border-radius:10px; font-size:11px; font-weight:500; border:1px solid var(--border); }
179.cat-tag { display:inline-flex; align-items:center; padding:2px 7px; border-radius:10px; font-size:11px; font-weight:500; background:color-mix(in srgb,var(--cc,var(--blue)) 15%,transparent); color:var(--cc,var(--blue)); border:1px solid color-mix(in srgb,var(--cc,var(--blue)) 30%,transparent); text-decoration:none; }
180.cat-tag:hover { text-decoration:none; filter:brightness(.9); }
181
182
183.home-hero { background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 60%,#1e3a8a 100%); border-radius:var(--r-lg); padding:44px 36px; margin-bottom:22px; color:#fff; position:relative; overflow:hidden; }
184.home-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E"); pointer-events:none; }
185.home-hero h1 { font-size:2.2rem; font-weight:700; margin-bottom:8px; position:relative; }
186.home-hero p { font-size:1.05rem; opacity:.85; margin-bottom:20px; position:relative; }
187.hero-btns { display:flex; gap:12px; flex-wrap:wrap; position:relative; }
188.hero-btns .btn-primary { background:#fff; color:var(--blue); }
189.hero-btns .btn-primary:hover { background:rgba(255,255,255,.9); }
190.hero-btns .btn-ghost { color:#fff; border-color:rgba(255,255,255,.5); }
191.hero-btns .btn-ghost:hover { background:rgba(255,255,255,.15); border-color:#fff; color:#fff; }
192.stats-row { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; align-items:center; padding:14px 20px; margin-bottom:22px; gap:4px; flex-wrap:wrap; box-shadow:var(--sh); }
193.stat { display:flex; align-items:center; gap:8px; padding:2px 12px; font-size:13px; color:var(--muted); }
194.stat strong { font-size:1.25rem; font-weight:700; color:var(--text); }
195.stat-div { width:1px; height:28px; background:var(--border); }
196.home-grid { display:grid; grid-template-columns:3fr 2fr; gap:22px; }
197@media(max-width:860px) { .home-grid { grid-template-columns:1fr; } }
198.sec-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--border-l); }
199
200
201.cat-card { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; text-decoration:none; color:var(--text); transition:all .18s; position:relative; overflow:hidden; box-shadow:var(--sh); margin-bottom:8px; }
202.cat-card:hover { border-color:var(--blue); transform:translateY(-1px); box-shadow:var(--sh-md); text-decoration:none; color:var(--text); }
203.cat-stripe { position:absolute; left:0; top:0; bottom:0; width:4px; }
204.cat-icon { font-size:22px; flex-shrink:0; }
205.cat-body { flex:1; min-width:0; }
206.cat-name { font-weight:600; font-size:14px; margin-bottom:2px; }
207.cat-desc { font-size:12px; color:var(--muted); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
208.cat-stats { font-size:11px; color:var(--faint); }
209.cat-chevron { font-size:18px; color:var(--faint); flex-shrink:0; }
210.empty-msg { color:var(--muted); font-size:14px; padding:20px 0; }
211
212
213.topic-row { display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; margin-bottom:6px; transition:all .18s; box-shadow:var(--sh); }
214.topic-row:hover { border-color:var(--blue); transform:translateY(-1px); box-shadow:var(--sh-md); }
215.tr-body { flex:1; min-width:0; }
216.tr-title { font-weight:500; font-size:14px; color:var(--text); display:block; margin-bottom:4px; }
217.tr-title:hover { color:var(--blue); text-decoration:none; }
218.tr-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
219.tr-counts { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; color:var(--faint); flex-shrink:0; }
220
221
222.bc { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap; }
223.bc a { color:var(--muted); } .bc a:hover { color:var(--blue); }
224.cat-hdr { display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:18px; box-shadow:var(--sh); flex-wrap:wrap; }
225.cat-hdr-icon { font-size:2.2rem; }
226.cat-hdr h1 { font-size:1.4rem; font-weight:700; }
227.cat-hdr p { color:var(--muted); margin-top:3px; font-size:14px; }
228.cat-hdr-meta { font-size:12px; color:var(--faint); margin-top:6px; }
229.subcats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
230.subcat { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; background:var(--surface); border:1px solid; border-radius:18px; font-size:13px; font-weight:500; text-decoration:none; color:var(--text); transition:all .18s; }
231.subcat:hover { transform:translateY(-1px); text-decoration:none; }
232.topic-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); }
233.tl-hdr { display:grid; grid-template-columns:1fr 80px 70px 100px; padding:10px 18px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); border-bottom:1px solid var(--border); background:var(--bg); }
234.tl-row { display:grid; grid-template-columns:1fr 80px 70px 100px; padding:13px 18px; border-bottom:1px solid var(--border-l); align-items:center; transition:background .18s; }
235.tl-row:last-child { border-bottom:none; }
236.tl-row:hover { background:var(--bg); }
237.tl-row.is-pinned { background:#fffbeb; }
238.tl-main { display:flex; align-items:flex-start; gap:10px; min-width:0; }
239.tl-title { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:3px; }
240.tl-title a { font-weight:500; font-size:14px; color:var(--text); }
241.tl-title a:hover { color:var(--blue); text-decoration:none; }
242.tl-meta { font-size:12px; color:var(--muted); }
243.tl-r { text-align:right; font-size:13px; color:var(--muted); }
244.empty-state { padding:44px 24px; text-align:center; }
245.empty-state p { color:var(--muted); margin-bottom:14px; }
246
247
248.topic-hdr { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:20px; display:flex; align-items:flex-start; gap:16px; box-shadow:var(--sh); flex-wrap:wrap; }
249.topic-hdr-main { flex:1; }
250.topic-badges { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
251.tbadge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:10px; font-size:12px; font-weight:600; }
252.tbadge.pin { background:#fef3c7; color:#92400e; }
253.tbadge.closed { background:#fee2e2; color:#991b1b; }
254.topic-title { font-size:1.5rem; font-weight:700; margin-bottom:10px; letter-spacing:-.02em; line-height:1.3; }
255.topic-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
256.topic-mod { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; flex-shrink:0; }
257
258
259.post { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; overflow:hidden; margin-bottom:6px; box-shadow:var(--sh); transition:border-color .18s; }
260.post:hover { border-color:#c7d3e4; }
261.post-op { border-left:3px solid var(--blue)!important; }
262.post-side { width:86px; flex-shrink:0; padding:18px 10px; background:var(--bg); border-right:1px solid var(--border-l); display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
263.post-name { font-size:11px; font-weight:600; color:var(--text); text-decoration:none; word-break:break-all; }
264.post-name:hover { color:var(--blue); }
265.post-pcnt { font-size:10px; color:var(--faint); }
266.post-location { display:flex; align-items:center; justify-content:center; gap:2px; font-size:10px; color:var(--faint); margin-top:1px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
267.post-karma { font-size:11px; color:var(--faint); margin-top:2px; }
268.post-karma-badge { display:inline-flex; align-items:center; gap:3px; margin-top:4px; padding:3px 7px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); border-radius:10px; font-size:11px; font-weight:700; color:#16a34a; }
269.pkb-icon { font-size:10px; display:inline-flex; align-items:center; }
270.pkb-val { font-family:var(--mono); letter-spacing:.01em; }
271.post-body { flex:1; min-width:0; padding:15px 18px; }
272.post-meta-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border-l); flex-wrap:wrap; }
273.pnum { font-size:12px; color:var(--faint); font-weight:600; }
274.edit-lbl { font-size:12px; color:var(--faint); font-style:italic; }
275.post-acts { display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap; }
276.pa-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; background:none; border:1px solid var(--border); border-radius:18px; font-size:12px; cursor:pointer; color:var(--muted); transition:all .18s; font-family:var(--font); }
277.pa-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
278.pa-btn.liked { color:var(--red)!important; border-color:var(--red)!important; background:#fef2f2!important; }
279.pa-btn.del:hover { color:var(--red)!important; border-color:var(--red)!important; background:#fef2f2!important; }
280.reply-ref { font-size:12px; color:var(--muted); background:var(--bg); padding:4px 10px; border-radius:6px; margin-bottom:10px; border-left:2px solid var(--blue); display:inline-flex; align-items:center; gap:5px; }
281
282
283.post-content,.rendered-post { line-height:1.75; font-size:15px; word-wrap:break-word; overflow-wrap:break-word; }
284.rendered-post h1,.rendered-post h2,.rendered-post h3,.rendered-post h4 { font-weight:600; margin:1.1em 0 .5em; line-height:1.3; }
285.rendered-post h1{font-size:1.5em} .rendered-post h2{font-size:1.3em} .rendered-post h3{font-size:1.1em}
286.rendered-post p,.post-content p { margin-bottom:.9em; }
287.rendered-post p:last-child,.post-content p:last-child { margin-bottom:0; }
288.rendered-post ul,.rendered-post ol,.post-content ul,.post-content ol { padding-left:1.5em; margin-bottom:.9em; }
289.rendered-post li,.post-content li { margin-bottom:.25em; }
290
291.rendered-post blockquote,
292.post-content blockquote,
293blockquote.post-quote {
294 position: relative;
295 margin: 12px 0;
296 padding: 12px 16px 12px 44px;
297 background: #f0fdf4;
298 border: 1px solid #bbf7d0;
299 border-radius: var(--r-lg);
300 color: #166534;
301 font-style: normal;
302}
303
304.rendered-post blockquote::before,
305.post-content blockquote::before,
306blockquote.post-quote::before {
307 content: '';
308 position: absolute;
309 left: 14px;
310 top: 50%;
311 transform: translateY(-50%);
312 width: 10px;
313 height: 10px;
314 background: #16a34a;
315 border-radius: 50%;
316 flex-shrink: 0;
317}
318.rendered-post blockquote p,
319.post-content blockquote p,
320blockquote.post-quote p {
321 margin: 0 0 4px;
322 color: #166534;
323}
324.rendered-post blockquote p:last-child,
325.post-content blockquote p:last-child,
326blockquote.post-quote p:last-child { margin-bottom: 0; }
327.rendered-post blockquote strong,
328.post-content blockquote strong { color: #14532d; }
329.rendered-post blockquote em,
330.post-content blockquote em { color: #166534; }
331[data-theme="dark"] .rendered-post blockquote,
332[data-theme="dark"] .post-content blockquote,
333[data-theme="dark"] blockquote.post-quote {
334 background: rgba(22,163,74,.08);
335 border-color: rgba(22,163,74,.25);
336 color: #86efac;
337}
338[data-theme="dark"] .rendered-post blockquote::before,
339[data-theme="dark"] .post-content blockquote::before,
340[data-theme="dark"] blockquote.post-quote::before {
341 background: #4ade80;
342}
343[data-theme="dark"] .rendered-post blockquote p,
344[data-theme="dark"] .post-content blockquote p,
345[data-theme="dark"] blockquote.post-quote p { color: #86efac; }
346
347
348.inline-code,
349.rendered-post :not(pre) > code,
350.post-content :not(pre) > code {
351 background: #f1f0ff;
352 color: #7c3aed;
353 border: 1px solid #ddd6fe;
354 padding: 1px 6px;
355 border-radius: 5px;
356 font-family: var(--mono);
357 font-size: .88em;
358 font-style: normal;
359 white-space: nowrap;
360 font-weight: 500;
361}
362
363
364.rendered-post pre,
365/* ─────────────────────────────────────────────────────────────────
366 CODE BLOCKS
367 Wrapper: .code-block-wrap Header: .cb-header Block: pre.code-block
368 ─────────────────────────────────────────────────────────────────── */
369
370
371.code-block-wrap {
372 position: relative;
373 margin: 12px 0;
374 padding: 0;
375 background: #faf5ff;
376 border: 1px solid #ddd6fe;
377 border-radius: var(--r-lg);
378 overflow: hidden;
379}
380
381.code-block-wrap::before {
382 content: '';
383 position: absolute;
384 left: 14px;
385 top: 14px;
386 width: 10px;
387 height: 10px;
388 background: #7c3aed;
389 border-radius: 50%;
390 z-index: 1;
391 pointer-events: none;
392}
393
394
395.cb-header {
396 display: flex;
397 align-items: center;
398 justify-content: space-between;
399 background: #f3e8ff;
400 border-bottom: 1px solid #ddd6fe;
401 padding: 6px 10px 6px 34px;
402 gap: 8px;
403 user-select: none;
404 min-height: 34px;
405}
406
407.cb-header-nolang {
408 justify-content: flex-end;
409 padding: 5px 10px 5px 34px;
410 min-height: 30px;
411}
412
413
414.cb-lang {
415 font-family: var(--mono);
416 font-size: 11px;
417 font-weight: 700;
418 color: #6d28d9;
419 text-transform: uppercase;
420 letter-spacing: .08em;
421}
422
423
424.cb-copy {
425 display: inline-flex;
426 align-items: center;
427 gap: 5px;
428 padding: 3px 9px;
429 background: transparent;
430 border: 1px solid #c4b5fd;
431 border-radius: 5px;
432 font-size: 11px;
433 font-family: var(--font);
434 font-weight: 500;
435 color: #7c3aed;
436 cursor: pointer;
437 transition: all .15s;
438 white-space: nowrap;
439 flex-shrink: 0;
440}
441.cb-copy:hover {
442 background: #ede9fe;
443 border-color: #a78bfa;
444 color: #6d28d9;
445}
446.cb-copy.copied {
447 border-color: #16a34a;
448 color: #16a34a;
449 background: #f0fdf4;
450}
451.cb-copy svg { flex-shrink: 0; }
452
453
454pre.code-block {
455 background: #faf5ff;
456 color: #3b1c6e;
457 margin: 0;
458 padding: 0;
459 overflow: hidden;
460 font-family: var(--mono);
461 font-size: 13.5px;
462 line-height: 1.7;
463 tab-size: 4;
464 -moz-tab-size: 4;
465}
466
467
468pre.code-block code {
469 display: block;
470 padding: 14px 16px 14px 34px;
471 overflow-x: auto;
472 background: transparent;
473 color: inherit;
474 font-size: inherit;
475 font-family: inherit;
476 line-height: inherit;
477 white-space: pre;
478 word-break: normal;
479 overflow-wrap: normal;
480 -webkit-overflow-scrolling: touch;
481 scrollbar-width: thin;
482 scrollbar-color: #c4b5fd transparent;
483}
484pre.code-block code::-webkit-scrollbar { height: 5px; }
485pre.code-block code::-webkit-scrollbar-track { background: transparent; }
486pre.code-block code::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }
487
488
489.inline-code,
490.post-content :not(pre) > code,
491.rendered-post :not(pre) > code {
492 font-family: var(--mono);
493 font-size: .88em;
494 background: #f5f3ff;
495 color: #7c3aed;
496 border: 1px solid #ddd6fe;
497 border-radius: 4px;
498 padding: 1px 6px;
499 white-space: nowrap;
500 font-weight: 500;
501}
502
503
504[data-theme="dark"] .code-block-wrap {
505 background: #1e1334;
506 border-color: #3d2a6b;
507}
508[data-theme="dark"] .code-block-wrap::before {
509 background: #a78bfa;
510}
511[data-theme="dark"] .cb-header {
512 background: #2a1a4e;
513 border-color: #3d2a6b;
514}
515[data-theme="dark"] .cb-header-nolang {
516 background: #2a1a4e;
517}
518[data-theme="dark"] .cb-lang { color: #c4b5fd; }
519[data-theme="dark"] .cb-copy {
520 border-color: #4c3a8a;
521 color: #c4b5fd;
522}
523[data-theme="dark"] .cb-copy:hover {
524 background: rgba(167,139,250,.1);
525 border-color: #7c3aed;
526 color: #ddd6fe;
527}
528[data-theme="dark"] pre.code-block {
529 background: #1e1334;
530 color: #e9d5ff;
531}
532[data-theme="dark"] pre.code-block code {
533 scrollbar-color: #4c3a8a transparent;
534}
535[data-theme="dark"] .inline-code,
536[data-theme="dark"] .post-content :not(pre) > code,
537[data-theme="dark"] .rendered-post :not(pre) > code {
538 background: #2d1f5e;
539 border-color: #4c3a8a;
540 color: #c4b5fd;
541}
542
543
544
545
546
547
548pre.code-block
549pre.code-block .token.comment,
550pre.code-block .token.prolog,
551pre.code-block .token.cdata { color: #6b7280; font-style: italic; }
552
553pre.code-block .token.keyword,
554pre.code-block .token.rule,
555pre.code-block .token.atrule { color: #7c3aed; font-weight: 600; }
556
557pre.code-block .token.string,
558pre.code-block .token.attr-value,
559pre.code-block .token.char { color: #0369a1; }
560
561pre.code-block .token.number,
562pre.code-block .token.boolean,
563pre.code-block .token.constant { color: #b45309; }
564
565pre.code-block .token.function,
566pre.code-block .token.function-name { color: #6d28d9; font-weight: 600; }
567
568pre.code-block .token.class-name,
569pre.code-block .token.namespace { color: #0f766e; }
570
571pre.code-block .token.tag,
572pre.code-block .token.selector { color: #9333ea; }
573
574pre.code-block .token.attr-name { color: #7c3aed; }
575
576pre.code-block .token.punctuation { color: #6b7280; }
577
578pre.code-block .token.operator { color: #7c3aed; }
579
580pre.code-block .token.variable,
581pre.code-block .token.parameter { color: #92400e; }
582
583pre.code-block .token.builtin { color: #0369a1; }
584
585
586[data-theme="dark"] pre.code-block .token.comment,
587[data-theme="dark"] pre.code-block .token.prolog { color: #9ca3af; font-style: italic; }
588[data-theme="dark"] pre.code-block .token.keyword { color: #c084fc; font-weight: 600; }
589[data-theme="dark"] pre.code-block .token.string { color: #93c5fd; }
590[data-theme="dark"] pre.code-block .token.number { color: #fcd34d; }
591[data-theme="dark"] pre.code-block .token.function { color: #d8b4fe; font-weight: 600; }
592[data-theme="dark"] pre.code-block .token.class-name { color: #6ee7b7; }
593[data-theme="dark"] pre.code-block .token.tag { color: #f0abfc; }
594[data-theme="dark"] pre.code-block .token.operator { color: #c084fc; }
595[data-theme="dark"] pre.code-block .token.punctuation { color: #9ca3af; }
596
597.edit-box { display:none; margin-top:14px; border-top:1px solid var(--border-l); padding-top:14px; }
598.edit-box.visible { display:block; }
599.edit-ta { width:100%; min-height:120px; padding:10px 13px; border:1px solid var(--border); border-radius:var(--r); font-family:var(--mono); font-size:13px; resize:vertical; outline:none; transition:border-color .18s; }
600.edit-ta:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.1); }
601.edit-btns { display:flex; gap:8px; margin-top:10px; justify-content:flex-end; }
602
603/* ═══════════════════════════════════════════════════════════════
604 POST EDITOR (v19 reply-box design)
605 ═══════════════════════════════════════════════════════════════ */
606
607.reply-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); margin-top:22px; }
608.reply-hdr { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-l); background:var(--bg); font-size:14px; color:var(--muted); }
609.ed-toolbar { display:flex; align-items:center; gap:2px; padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--border-l); flex-wrap:wrap; }
610.ed-toolbar button { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:6px; font-size:13px; cursor:pointer; color:var(--muted); transition:all .18s; font-family:var(--font); }
611.ed-toolbar button:hover { background:var(--surface); color:var(--text); }
612.ed-toolbar button#prevBtn.on { background:var(--blue-l); color:var(--blue); }
613.ed-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
614.ed-panes { position:relative; }
615.reply-ta { width:100%; min-height:130px; padding:15px 18px; border:none; outline:none; font-family:var(--mono); font-size:14px; line-height:1.7; resize:vertical; color:var(--text); background:var(--surface); }
616.reply-ta.dragging { background:var(--blue-l); }
617.reply-preview { min-height:130px; padding:15px 18px; font-size:15px; line-height:1.75; }
618.reply-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--border-l); background:var(--bg); flex-wrap:wrap; gap:8px; }
619.reply-footer-right { display:flex; align-items:center; gap:10px; }
620.cnt { font-size:12px; color:var(--faint); }
621.hidden { display:none!important; }
622.reply-cta { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; text-align:center; margin-top:22px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; color:var(--muted); box-shadow:var(--sh); }
623.reply-cta p { width:100%; margin:0 0 8px; font-weight:500; color:var(--text); }
624.closed-notice { background:#fffbeb; border:1px solid #fde68a; border-radius:var(--r); padding:14px 18px; text-align:center; color:#92400e; margin-top:22px; font-size:14px; font-weight:500; }
625
626
627/* ═══════════════════════════════════════════════════════════════
628 HORIZONTAL POST LAYOUT
629 ═══════════════════════════════════════════════════════════════ */
630.posts-horizontal .post {
631 flex-direction: column;
632}
633.posts-horizontal .post-side {
634 width: 100%;
635 flex-direction: row;
636 border-right: none;
637 border-bottom: 1px solid var(--border-l);
638 padding: 10px 16px;
639 gap: 10px;
640 justify-content: flex-start;
641 align-items: center;
642 background: var(--bg);
643}
644.posts-horizontal .post-side .av-lg {
645 width: 32px; height: 32px;
646 flex-shrink: 0;
647}
648.posts-horizontal .post-name {
649 font-size: 13px;
650}
651.posts-horizontal .post-pcnt,
652.posts-horizontal .post-location {
653 font-size: 11px;
654 white-space: nowrap;
655}
656.posts-horizontal .post-karma-badge {
657 margin-top: 0;
658}
659.posts-horizontal .post-side .role-flair {
660 margin: 0;
661}
662.posts-horizontal .post-body {
663 padding: 14px 18px;
664}
665
666
667.rate-limit-info { margin-bottom:10px; }
668.rate-limit-bar { display:flex; align-items:center; gap:12px; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--r); padding:10px 14px; font-size:13px; color:#92400e; }
669.rate-countdown { display:inline-flex; align-items:center; justify-content:center; background:#f59e0b; color:#fff; font-weight:700; font-size:15px; border-radius:50%; width:38px; height:38px; flex-shrink:0; font-family:var(--mono); }
670.post-captcha-row { display:flex; align-items:center; gap:12px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--r); padding:10px 14px; margin:8px 16px; flex-wrap:wrap; }
671.post-captcha-label { font-size:13px; font-weight:500; color:#166534; white-space:nowrap; }
672.post-captcha-label .captcha-q { font-size:16px; font-family:var(--mono); color:#15803d; }
673.post-captcha-inp { max-width:80px!important; font-size:16px!important; text-align:center; font-family:var(--mono)!important; padding:6px 8px!important; }
674
675
676.captcha-box { background:#f8fafc; border:2px solid var(--blue); border-radius:var(--r); padding:16px 18px; margin-bottom:16px; }
677.captcha-label { font-size:14px; font-weight:500; color:var(--text); margin-bottom:8px; display:block; }
678.captcha-q { font-size:18px; color:var(--blue); font-family:var(--mono); letter-spacing:.06em; }
679.captcha-input { max-width:100px!important; font-size:18px!important; text-align:center; font-family:var(--mono)!important; }
680
681
682.embed-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--r); margin:12px 0; background:#000; box-shadow:var(--sh-md); }
683.embed-wrap iframe,.embed-yt { position:absolute; top:0; left:0; width:100%; height:100%; border:none; border-radius:var(--r); }
684.embed-wrap[style*="height"] { padding-bottom:0; }
685.embed-wrap[style*="height"] iframe { position:absolute; }
686.embed-spotify { margin:12px 0; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
687.embed-spotify iframe { display:block; border:none; border-radius:var(--r); }
688.embed-sc { margin:12px 0; }
689.embed-sc iframe { border-radius:var(--r); border:none; display:block; }
690.embed-tweet { margin:12px 0; min-height:50px; }
691.tweet-fallback { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:#1d9bf0; color:#fff; border-radius:var(--r); font-size:14px; font-weight:500; text-decoration:none; transition:background .18s; }
692.tweet-fallback:hover { background:#1a8cd8; text-decoration:none; color:#fff; }
693
694
695.pager { display:flex; align-items:center; justify-content:center; gap:6px; padding:22px 0; flex-wrap:wrap; }
696.pg-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); font-size:14px; color:var(--muted); text-decoration:none; transition:all .18s; }
697.pg-btn:hover { border-color:var(--blue); color:var(--blue); text-decoration:none; }
698.pg-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
699
700
701.auth-body { background:linear-gradient(135deg,#eff6ff,#dbeafe); margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:24px; }
702.auth-page { width:100%; max-width:430px; }
703.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-lg); }
704.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:22px; justify-content:center; text-decoration:none; color:var(--text); font-size:18px; font-weight:700; }
705.auth-logo:hover { text-decoration:none; }
706.auth-card h1 { font-size:1.4rem; font-weight:700; text-align:center; margin-bottom:4px; }
707.auth-sub { text-align:center; color:var(--muted); font-size:14px; margin-bottom:22px; }
708.auth-foot { text-align:center; margin-top:18px; font-size:14px; color:var(--muted); }
709.auth-back { text-align:center; margin-top:16px; font-size:13px; }
710.auth-back a { color:var(--muted); }
711.auth-terms { font-size:11px; color:var(--faint); text-align:center; margin-top:10px; }
712
713
714.profile-hdr { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; display:flex; align-items:flex-start; gap:18px; margin-bottom:22px; flex-wrap:wrap; box-shadow:var(--sh); }
715.profile-info { flex:1; min-width:200px; }
716.profile-name-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
717.profile-name-row h1 { font-size:1.4rem; font-weight:700; }
718.profile-bio { color:var(--muted); font-size:14px; margin-bottom:10px; }
719.profile-meta { display:flex; gap:14px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
720.profile-stats { display:flex; gap:18px; flex-shrink:0; }
721.pstat { text-align:center; }
722.pstat strong { display:block; font-size:1.4rem; font-weight:700; }
723.pstat span { font-size:12px; color:var(--muted); }
724.pstat.karma-stat strong { color:var(--kc,#f59e0b); font-size:1.6rem; }
725.profile-actions { display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; }
726.profile-tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:2px solid var(--border); }
727.tab-btn { padding:9px 18px; background:none; border:none; font-family:var(--font); font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .18s; display:inline-flex; align-items:center; }
728.tab-btn:hover { color:var(--blue); }
729.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
730.tab-count { display:inline-flex; align-items:center; justify-content:center; background:var(--border); color:var(--muted); border-radius:10px; font-size:11px; font-weight:600; padding:1px 7px; margin-left:4px; }
731.tab-btn.active .tab-count { background:var(--blue); color:#fff; }
732.tab-pane.hidden { display:none; }
733.reply-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:13px 16px; margin-bottom:8px; }
734.rc-top { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border-l); }
735.rc-body { font-size:13px; color:var(--muted); max-height:80px; overflow:hidden; }
736.av-upload { display:flex; align-items:center; gap:18px; }
737
738
739.profile-tier-badge { display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:4px 10px; background:color-mix(in srgb,var(--tc,#f59e0b) 15%,transparent); border:1px solid color-mix(in srgb,var(--tc,#f59e0b) 40%,transparent); border-radius:20px; font-size:12px; font-weight:600; color:var(--tc,#f59e0b); white-space:nowrap; max-width:100%; }
740.profile-karma-row { margin-top:14px; padding:12px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); }
741.pkr-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
742.pkr-icon { font-size:18px; }
743.pkr-label { font-weight:700; font-size:14px; }
744.pkr-pts { margin-left:auto; font-size:13px; font-weight:600; color:var(--muted); font-family:var(--mono); }
745.pkr-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin-bottom:4px; }
746.pkr-fill { height:100%; border-radius:4px; transition:width .6s cubic-bezier(.4,0,.2,1); }
747.pkr-next { font-size:11px; color:var(--faint); text-align:right; }
748
749
750.pending-requests { background:#fffbeb; border:1px solid #fde68a; border-radius:var(--r-lg); padding:16px 20px; margin-bottom:20px; }
751.pending-requests h3 { font-size:14px; font-weight:600; margin-bottom:12px; color:#92400e; }
752.pending-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #fde68a; }
753.pending-row:last-child { border-bottom:none; }
754.pending-row a { font-weight:500; flex:1; }
755.friends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; padding:4px 0; }
756.friend-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); text-decoration:none; color:var(--text); transition:all .18s; text-align:center; box-shadow:var(--sh); }
757.friend-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--sh-md); text-decoration:none; }
758.friend-name { font-size:13px; font-weight:500; word-break:break-all; }
759.friend-karma { font-size:12px; font-weight:600; font-family:var(--mono); }
760
761
762.msg-page { max-width:860px; margin:0 auto; }
763.msg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
764.msg-header h1 { font-size:1.4rem; font-weight:700; margin:0; }
765.msg-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:2px solid var(--border); }
766.msg-tabs a.tab-btn { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
767.msg-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); }
768.msg-row { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border-l); text-decoration:none; color:var(--text); transition:background .18s; }
769.msg-row:last-child { border-bottom:none; }
770.msg-row:hover { background:var(--bg); text-decoration:none; }
771.msg-row.unread { background:var(--blue-l); }
772.msg-body { flex:1; min-width:0; }
773.msg-from { font-size:12px; color:var(--muted); margin-bottom:3px; display:flex; align-items:center; gap:6px; }
774.msg-subject { font-weight:600; font-size:14px; margin-bottom:3px; }
775.msg-preview { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
776.msg-time { font-size:12px; color:var(--faint); flex-shrink:0; }
777.unread-dot { color:var(--blue); font-size:10px; }
778.msg-view-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); margin-bottom:20px; }
779.msg-view-header { display:flex; align-items:flex-start; gap:14px; padding:20px; border-bottom:1px solid var(--border-l); background:var(--bg); }
780.msg-view-subject { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
781.msg-view-meta { font-size:13px; color:var(--muted); }
782.msg-view-body { padding:22px; font-size:15px; line-height:1.75; white-space:pre-wrap; word-wrap:break-word; }
783.to-input-wrap { position:relative; display:flex; align-items:center; }
784.at-prefix { position:absolute; left:12px; color:var(--muted); font-size:15px; font-weight:500; pointer-events:none; z-index:1; }
785.to-input-wrap .fi { padding-left:28px; }
786.to-suggestions { position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-md); z-index:100; display:none; }
787.to-sug-item { padding:9px 14px; font-size:14px; cursor:pointer; transition:background .18s; }
788.to-sug-item:hover { background:var(--bg); }
789
790
791.mention-tag { display:inline-flex; align-items:center; background:var(--blue-l); color:var(--blue); border-radius:4px; padding:1px 5px; font-weight:600; font-size:.9em; text-decoration:none; transition:background .18s; }
792.mention-tag:hover { background:var(--blue); color:#fff; text-decoration:none; }
793.mention-popup { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-md); z-index:500; min-width:180px; max-height:200px; overflow-y:auto; display:none; }
794.mention-popup.show { display:block; }
795.mention-item { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; cursor:pointer; transition:background .18s; }
796.mention-item:hover,.mention-item.selected { background:var(--blue-l); color:var(--blue); }
797
798
799.err-pg { text-align:center; padding:60px 24px; }
800.err-code { font-size:6rem; font-weight:800; background:linear-gradient(135deg,var(--blue),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:14px; }
801.err-pg h1 { font-size:1.7rem; margin-bottom:8px; }
802.err-pg p { color:var(--muted); margin-bottom:22px; }
803
804
805.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; display:flex; align-items:center; justify-content:center; cursor:zoom-out; backdrop-filter:blur(4px); animation:fadeIn .2s; }
806.lightbox img { max-width:92vw; max-height:90vh; border-radius:var(--r); box-shadow:0 24px 80px rgba(0,0,0,.8); }
807
808
809.toggle-sw { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
810.toggle-sw input { opacity:0; width:0; height:0; }
811.toggle-knob { position:absolute; cursor:pointer; inset:0; background:#cbd5e1; border-radius:24px; transition:.3s; }
812.toggle-knob::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
813.toggle-sw input:checked + .toggle-knob { background:var(--blue); }
814.toggle-sw input:checked + .toggle-knob::before { transform:translateX(20px); }
815.toggle-label { display:flex; align-items:center; justify-content:space-between; padding:8px 0; cursor:pointer; }
816
817
818.search-form { display:flex; gap:10px; margin-bottom:20px; }
819.search-fi { flex:1; max-width:600px; }
820
821
822@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
823
824
825@media(max-width:600px) {
826 .home-hero { padding:24px 18px; }
827 .home-hero h1 { font-size:1.5rem; }
828 .topic-title { font-size:1.1rem; }
829 .post-side { width:58px; }
830 .post-pcnt { display:none; }
831 .tl-hdr,.tl-row { grid-template-columns:1fr 60px 60px; }
832 .profile-hdr { flex-direction:column; }
833 .post-captcha-row { flex-direction:column; align-items:flex-start; }
834}
835
836
837
838/* ═══════════════════════════════════════════════════════════════
839 LIVE SEARCH DROPDOWN — topics + posts sections
840 ═══════════════════════════════════════════════════════════════ */
841.sr-section-lbl {
842 padding: 6px 14px 4px;
843 font-size: 10px;
844 font-weight: 700;
845 text-transform: uppercase;
846 letter-spacing: .07em;
847 color: var(--faint);
848 background: var(--bg);
849 border-bottom: 1px solid var(--border-l);
850 border-top: 1px solid var(--border-l);
851}
852.sr-section-lbl:first-child { border-top: none; }
853
854.sr-item {
855 display: flex;
856 align-items: center;
857 gap: 10px;
858 padding: 9px 14px;
859 font-size: 14px;
860 color: var(--text);
861 text-decoration: none;
862 border-bottom: 1px solid var(--border-l);
863 transition: background .15s;
864}
865.sr-item:last-child { border-bottom: none; }
866.sr-item:hover { background: var(--bg); text-decoration: none; }
867.sr-item strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
868.sr-item small { display: block; font-size: 11px; color: var(--muted);
869 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
870
871.sr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
872.sr-text { flex: 1; min-width: 0; }
873
874.sr-post { background: #fafafa; }
875.sr-post:hover { background: var(--blue-l); }
876
877.sr-goto-badge {
878 flex-shrink: 0;
879 font-size: 11px;
880 font-weight: 700;
881 color: var(--blue);
882 background: var(--blue-l);
883 border: 1px solid #bfdbfe;
884 padding: 2px 7px;
885 border-radius: 8px;
886}
887
888.sr-all {
889 font-size: 13px;
890 color: var(--blue);
891 font-weight: 500;
892 background: var(--bg);
893 justify-content: center;
894 padding: 10px 14px;
895 border-top: 1px solid var(--border-l);
896}
897.sr-all:hover { background: var(--blue-l); }
898
899
900
901
902
903.post:target {
904 border-color: var(--blue) !important;
905 box-shadow: 0 0 0 3px rgba(59,130,246,.18), var(--sh) !important;
906 animation: postPing 1.8s ease forwards;
907}
908@keyframes postPing {
909 0% { box-shadow: 0 0 0 5px rgba(59,130,246,.35), var(--sh); }
910 60% { box-shadow: 0 0 0 8px rgba(59,130,246,.10), var(--sh); }
911 100% { box-shadow: var(--sh); border-color: var(--border); }
912}
913
914/* ═══════════════════════════════════════════════════════════════
915 DARK MODE — [data-theme="dark"] overrides
916 ═══════════════════════════════════════════════════════════════ */
917[data-theme="dark"] {
918 --bg: #0f1117;
919 --surface: #1a1d27;
920 --border: #2d3148;
921 --border-l: #1e2235;
922 --text: #e2e8f0;
923 --muted: #94a3b8;
924 --faint: #64748b;
925 --blue-l: #1e3a5f;
926 --sh: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
927 --sh-md: 0 4px 16px rgba(0,0,0,.4);
928 --sh-lg: 0 10px 40px rgba(0,0,0,.5);
929}
930
931
932[data-theme="dark"] body { background: var(--bg); }
933[data-theme="dark"] .site-header { background: #12151e; border-color: var(--border); }
934[data-theme="dark"] .sidebar { background: #12151e; border-color: var(--border); }
935[data-theme="dark"] .site-footer { background: #12151e; border-color: var(--border); }
936[data-theme="dark"] .post { background: var(--surface); border-color: var(--border); }
937[data-theme="dark"] .post:hover { border-color: #3d4464; }
938[data-theme="dark"] .post-side { background: var(--bg); border-color: var(--border-l); }
939[data-theme="dark"] .posts-horizontal .post-side { background: #12151e; border-color: var(--border); }
940[data-theme="dark"] .form-card { background: var(--surface); border-color: var(--border); }
941[data-theme="dark"] .acard { background: var(--surface); border-color: var(--border); }
942[data-theme="dark"] .acard-head { background: var(--bg); border-color: var(--border); }
943[data-theme="dark"] .acard-body { background: var(--surface); }
944
945
946[data-theme="dark"] .fi { background: var(--bg); border-color: var(--border); color: var(--text); }
947[data-theme="dark"] .fi:focus { border-color: var(--blue); background: var(--surface); }
948[data-theme="dark"] select.fi { background: var(--bg); }
949[data-theme="dark"] .reply-ta { background: var(--surface); color: var(--text); }
950[data-theme="dark"] .reply-preview { background: var(--surface); }
951
952
953[data-theme="dark"] .nav-link:hover { background: rgba(59,130,246,.15); }
954[data-theme="dark"] .new-link { background: var(--blue) !important; }
955
956
957[data-theme="dark"] #searchInput { background: #1e2235; border-color: var(--border); color: var(--text); }
958[data-theme="dark"] #searchInput:focus { background: var(--surface); }
959[data-theme="dark"] .search-results { background: var(--surface); border-color: var(--border); }
960[data-theme="dark"] .sr-item:hover { background: var(--bg); }
961
962
963[data-theme="dark"] .topic-row { background: var(--surface); border-color: var(--border); }
964[data-theme="dark"] .topic-row:hover { background: #1e2235; }
965[data-theme="dark"] .cat-card { background: var(--surface); border-color: var(--border); }
966[data-theme="dark"] .cat-card:hover { background: #1e2235; }
967[data-theme="dark"] .tl-row { background: var(--surface); }
968[data-theme="dark"] .tl-row:hover { background: var(--bg); }
969
970
971[data-theme="dark"] .btn-ghost { border-color: var(--border); color: var(--muted); }
972[data-theme="dark"] .btn-ghost:hover { background: var(--border-l); color: var(--text); }
973[data-theme="dark"] .pa-btn { border-color: var(--border); color: var(--muted); background: transparent; }
974[data-theme="dark"] .pa-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-l); }
975[data-theme="dark"] .icon-btn { color: var(--muted); }
976[data-theme="dark"] .icon-btn:hover { background: var(--border-l); }
977
978
979[data-theme="dark"] .reply-box { background: var(--surface); border-color: var(--border); }
980[data-theme="dark"] .reply-hdr { background: var(--bg); border-color: var(--border); }
981[data-theme="dark"] .ed-toolbar { background: var(--bg); border-color: var(--border); }
982[data-theme="dark"] .ed-toolbar button { color: var(--muted); }
983[data-theme="dark"] .ed-toolbar button:hover { background: var(--surface); color: var(--text); }
984[data-theme="dark"] .reply-footer { background: var(--bg); border-color: var(--border); }
985
986
987[data-theme="dark"] .notif-drop { background: var(--surface); border-color: var(--border); }
988[data-theme="dark"] .notif-item { border-color: var(--border-l); }
989[data-theme="dark"] .notif-item:hover { background: var(--bg); }
990[data-theme="dark"] .notif-head { background: var(--bg); border-color: var(--border); }
991[data-theme="dark"] .user-drop { background: var(--surface); border-color: var(--border); }
992[data-theme="dark"] .drop-item:hover { background: var(--bg); }
993[data-theme="dark"] .drop-div { background: var(--border); }
994
995
996[data-theme="dark"] pre.code-block { border-color: var(--border); }
997
998
999[data-theme="dark"] .inline-code,
1000[data-theme="dark"] .post-content :not(pre) > code { background: #2d1f5e; border-color: #4c3a8a; color: #c4b5fd; }
1001
1002
1003[data-theme="dark"] .post-content blockquote,
1004[data-theme="dark"] .rendered-post blockquote { background: #1a2744; border-left-color: var(--blue); color: #94a3b8; }
1005
1006
1007[data-theme="dark"] .auth-body { background: linear-gradient(135deg,#0f1117,#1a1d27); }
1008[data-theme="dark"] .auth-card { background: var(--surface); border-color: var(--border); }
1009
1010
1011[data-theme="dark"] .profile-hdr { background: var(--surface); border-color: var(--border); }
1012[data-theme="dark"] .profile-karma-row { background: var(--bg); border-color: var(--border); }
1013
1014
1015[data-theme="dark"] .msg-list { background: var(--surface); border-color: var(--border); }
1016[data-theme="dark"] .msg-row { color: var(--text); border-color: var(--border-l); }
1017[data-theme="dark"] .msg-row:hover { background: var(--bg); }
1018[data-theme="dark"] .msg-row.unread { background: var(--blue-l); }
1019[data-theme="dark"] .msg-view-card { background: var(--surface); border-color: var(--border); }
1020[data-theme="dark"] .msg-view-header { background: var(--bg); border-color: var(--border); }
1021
1022
1023[data-theme="dark"] .mx-layout .mx-main,
1024[data-theme="dark"] .mx-widget { background: var(--surface); border-color: var(--border); }
1025[data-theme="dark"] .mx-widget-head { background: var(--bg); border-color: var(--border); }
1026[data-theme="dark"] .mx-row { color: var(--text); border-color: var(--border-l); }
1027[data-theme="dark"] .mx-row:hover { background: var(--bg); }
1028[data-theme="dark"] .mx-row.unread { background: var(--blue-l); }
1029
1030
1031[data-theme="dark"] .alert.ok { background: #052e16; border-color: #166534; color: #bbf7d0; }
1032[data-theme="dark"] .alert.err { background: #450a0a; border-color: #991b1b; color: #fecaca; }
1033[data-theme="dark"] .alert.warn { background: #431407; border-color: #9a3412; color: #fed7aa; }
1034
1035
1036[data-theme="dark"] .admin-sidebar { background: #12151e; border-color: var(--border); }
1037[data-theme="dark"] .anav { color: var(--muted); }
1038[data-theme="dark"] .anav:hover,.anav.on { background: var(--blue-l); color: var(--blue); }
1039[data-theme="dark"] .atable tr:hover td { background: var(--bg); }
1040[data-theme="dark"] .atable thead tr { background: var(--bg); }
1041
1042
1043[data-theme="dark"] .reply-cta { background: var(--surface); border-color: var(--border); }
1044[data-theme="dark"] .closed-notice { background: #431407; border-color: #9a3412; color: #fed7aa; }
1045[data-theme="dark"] .pager .pg-btn { background: var(--surface); border-color: var(--border); color: var(--muted); }
1046[data-theme="dark"] .pg-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
1047[data-theme="dark"] .sr-section-lbl { background: var(--bg); border-color: var(--border); }
1048[data-theme="dark"] .sr-item { background: var(--surface); border-color: var(--border-l); }
1049[data-theme="dark"] .sr-post { background: #1a1d27; }
1050[data-theme="dark"] .sr-all { background: var(--bg); }
1051[data-theme="dark"] .tag { background: #1e2235; border-color: var(--border); color: var(--muted); }
1052[data-theme="dark"] .tag-preview .tag { background: #1a2744; border-color: #2d4a7a; color: #93c5fd; }
1053[data-theme="dark"] .mention-tag { background: var(--blue-l); color: #93c5fd; }
1054
1055
1056.wg-guide {
1057 margin-top: 14px;
1058 border-top: 1px solid var(--border-l);
1059 padding-top: 10px;
1060}
1061.wg-toggle {
1062 display: inline-flex;
1063 align-items: center;
1064 gap: 5px;
1065 background: none;
1066 border: 1px solid var(--border);
1067 border-radius: var(--r);
1068 padding: 4px 10px;
1069 font-size: 12px;
1070 font-family: var(--font);
1071 color: var(--muted);
1072 cursor: pointer;
1073 transition: all .15s;
1074}
1075.wg-toggle:hover { background: var(--bg); color: var(--text); }
1076.wg-toggle.wg-open { background: var(--blue-l); color: var(--blue); border-color: #bfdbfe; }
1077.wg-arrow { transition: transform .2s; }
1078.wg-toggle.wg-open .wg-arrow { transform: rotate(180deg); }
1079.wg-body {
1080 margin-top: 10px;
1081 background: var(--bg);
1082 border: 1px solid var(--border-l);
1083 border-radius: var(--r);
1084 padding: 14px;
1085 animation: fadeIn .18s ease;
1086}
1087.wg-grid {
1088 display: grid;
1089 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1090 gap: 16px;
1091}
1092.wg-section-title {
1093 font-size: 11px;
1094 font-weight: 700;
1095 text-transform: uppercase;
1096 letter-spacing: .06em;
1097 color: var(--faint);
1098 margin-bottom: 8px;
1099}
1100.wg-row {
1101 display: flex;
1102 align-items: center;
1103 justify-content: space-between;
1104 gap: 8px;
1105 font-size: 12px;
1106 margin-bottom: 5px;
1107 color: var(--muted);
1108}
1109.wg-row code, .wg-mono {
1110 font-family: var(--mono);
1111 font-size: 11px;
1112 background: var(--surface);
1113 border: 1px solid var(--border);
1114 padding: 1px 5px;
1115 border-radius: 4px;
1116 color: var(--text);
1117}
1118.wg-block-row { flex-direction: column; align-items: flex-start; }
1119.wg-hint { font-size: 11px; color: var(--faint); font-style: italic; }
1120[data-theme="dark"] .wg-body { background: var(--bg); border-color: var(--border); }
1121[data-theme="dark"] .wg-row code, [data-theme="dark"] .wg-mono { background: var(--surface); border-color: var(--border); }
1122
1123
1124.pkr-label-green { color: #16a34a; font-weight: 700; }
1125.pkr-fill-green { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
1126.profile-tier-badge-green {
1127 background: rgba(34,197,94,.12);
1128 border-color: rgba(34,197,94,.35);
1129 color: #16a34a;
1130 --tc: #16a34a;
1131}
1132.pstat.karma-stat strong { color: #16a34a !important; }
1133
1134[data-theme="dark"] .pkr-label-green { color: #4ade80; }
1135[data-theme="dark"] .pkr-fill-green { background: linear-gradient(90deg,#22c55e,#16a34a) !important; }
1136[data-theme="dark"] .profile-tier-badge-green { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.3); color: #4ade80; }
1137[data-theme="dark"] .pstat.karma-stat strong { color: #4ade80 !important; }
1138[data-theme="dark"] .post-karma-badge { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.3); color: #4ade80; }
1139[data-theme="dark"] .post-karma-badge .pkb-icon svg { stroke: #4ade80 !important; }
1140
1141
1142.sec-warning {
1143 display: flex;
1144 align-items: flex-start;
1145 gap: 8px;
1146 margin: 0;
1147 padding: 9px 14px;
1148 background: #fffbeb;
1149 border-top: 1px solid #fde68a;
1150 color: #92400e;
1151 font-size: 12px;
1152 font-family: var(--font);
1153 line-height: 1.5;
1154}
1155.sec-warning svg {
1156 flex-shrink: 0;
1157 margin-top: 1px;
1158 color: #f59e0b;
1159}
1160[data-theme="dark"] .sec-warning {
1161 background: #431407;
1162 border-color: #9a3412;
1163 color: #fed7aa;
1164}
1165[data-theme="dark"] .sec-warning svg { color: #fb923c; }