1 /* ═══════════════════════════════════════════════════════════════ 2 NEXUS FORUM — main.css 3 Single canonical stylesheet. No duplicates. 4 ═══════════════════════════════════════════════════════════════ */ 5 6 /* ── Variables ─────────────────────────────────────────────────── */ 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 /* ── Reset ─────────────────────────────────────────────────────── */ 22 *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } 23 html { font-size:15px; scroll-behavior:smooth; } 24 body { 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; } 25 a { color:var(--blue); text-decoration:none; } 26 a:hover { text-decoration:underline; } 27 img { max-width:100%; height:auto; } 28 29 /* ── Header ─────────────────────────────────────────────────────── */ 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 /* Burger */ 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 /* Logo */ 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 /* Search */ 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 /* ── Sidebar ─────────────────────────────────────────────────────── */ 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 /* ── Main layout ─────────────────────────────────────────────────── */ 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 /* ── Footer ─────────────────────────────────────────────────────── */ 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 /* ── Dropdowns ───────────────────────────────────────────────────── */ 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 /* ── Buttons ─────────────────────────────────────────────────────── */ 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 /* ── Forms ───────────────────────────────────────────────────────── */ 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); } 135 textarea.fi { resize:vertical; min-height:80px; } 136 select.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 /* ── Alerts ─────────────────────────────────────────────────────── */ 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 /* ── Avatars ─────────────────────────────────────────────────────── */ 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 /* ── Role tags ───────────────────────────────────────────────────── */ 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 /* ── Tags / pills ────────────────────────────────────────────────── */ 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 /* ── Home page ───────────────────────────────────────────────────── */ 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 /* ── Category cards ──────────────────────────────────────────────── */ 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 /* ── Topic rows ──────────────────────────────────────────────────── */ 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 /* ── Category page ───────────────────────────────────────────────── */ 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 /* ── Topic page ──────────────────────────────────────────────────── */ 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 /* ── Posts ───────────────────────────────────────────────────────── */ 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 /* ── Post content (rendered markdown) ────────────────────────────── */ 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 /* ── Blockquote ── dark-green circle + light-green background ── */ 291 .rendered-post blockquote, 292 .post-content blockquote, 293 blockquote.post-quote { 294 position: relative; 295 margin: 12px 0; 296 padding: 12px 16px 12px 44px; /* left room for the circle */ 297 background: #f0fdf4; /* very light green */ 298 border: 1px solid #bbf7d0; 299 border-radius: var(--r-lg); 300 color: #166534; /* dark green text */ 301 font-style: normal; 302 } 303 /* Dark green filled circle on the left */ 304 .rendered-post blockquote::before, 305 .post-content blockquote::before, 306 blockquote.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; /* dark green circle */ 315 border-radius: 50%; 316 flex-shrink: 0; 317 } 318 .rendered-post blockquote p, 319 .post-content blockquote p, 320 blockquote.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, 326 blockquote.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 /* ── Inline code ─────────────────────────────────────────────── */ 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 /* ── Code block wrapper ──────────────────────────────────────── */ 364 .rendered-post pre, 365 /* ───────────────────────────────────────────────────────────────── 366 CODE BLOCKS 367 Wrapper: .code-block-wrap Header: .cb-header Block: pre.code-block 368 ─────────────────────────────────────────────────────────────────── */ 369 370 /* ── Code block ── purple circle + light-purple background ─────── */ 371 .code-block-wrap { 372 position: relative; 373 margin: 12px 0; 374 padding: 0; /* inner padding handled by code element */ 375 background: #faf5ff; /* very light purple */ 376 border: 1px solid #ddd6fe; 377 border-radius: var(--r-lg); 378 overflow: hidden; 379 } 380 /* Purple filled circle — same circle concept as blockquote */ 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; /* dark purple circle */ 389 border-radius: 50%; 390 z-index: 1; 391 pointer-events: none; 392 } 393 394 /* Header bar — language label + copy button */ 395 .cb-header { 396 display: flex; 397 align-items: center; 398 justify-content: space-between; 399 background: #f3e8ff; /* slightly deeper purple tint */ 400 border-bottom: 1px solid #ddd6fe; 401 padding: 6px 10px 6px 34px; /* 34px left to clear the circle */ 402 gap: 8px; 403 user-select: none; 404 min-height: 34px; 405 } 406 /* No-lang header: circle still shows, just copy button on right */ 407 .cb-header-nolang { 408 justify-content: flex-end; 409 padding: 5px 10px 5px 34px; 410 min-height: 30px; 411 } 412 413 /* Language label */ 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 /* Copy button */ 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 /* The <pre> block — light purple background, dark purple text */ 454 pre.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 /* Scrollable code area — preserves ALL whitespace exactly */ 468 pre.code-block code { 469 display: block; 470 padding: 14px 16px 14px 34px; /* 34px left = past the circle */ 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 } 484 pre.code-block code::-webkit-scrollbar { height: 5px; } 485 pre.code-block code::-webkit-scrollbar-track { background: transparent; } 486 pre.code-block code::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; } 487 488 /* Inline code */ 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 /* Dark mode */ 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 /* ── Syntax token colors (GitHub Dark palette) ───────────────── */ 545 /* These work standalone AND override Prism's injected theme */ 546 547 /* Comments */ 548 pre.code-block /* Prism.js token colors — tuned for light purple background */ 549 pre.code-block .token.comment, 550 pre.code-block .token.prolog, 551 pre.code-block .token.cdata { color: #6b7280; font-style: italic; } 552 553 pre.code-block .token.keyword, 554 pre.code-block .token.rule, 555 pre.code-block .token.atrule { color: #7c3aed; font-weight: 600; } 556 557 pre.code-block .token.string, 558 pre.code-block .token.attr-value, 559 pre.code-block .token.char { color: #0369a1; } 560 561 pre.code-block .token.number, 562 pre.code-block .token.boolean, 563 pre.code-block .token.constant { color: #b45309; } 564 565 pre.code-block .token.function, 566 pre.code-block .token.function-name { color: #6d28d9; font-weight: 600; } 567 568 pre.code-block .token.class-name, 569 pre.code-block .token.namespace { color: #0f766e; } 570 571 pre.code-block .token.tag, 572 pre.code-block .token.selector { color: #9333ea; } 573 574 pre.code-block .token.attr-name { color: #7c3aed; } 575 576 pre.code-block .token.punctuation { color: #6b7280; } 577 578 pre.code-block .token.operator { color: #7c3aed; } 579 580 pre.code-block .token.variable, 581 pre.code-block .token.parameter { color: #92400e; } 582 583 pre.code-block .token.builtin { color: #0369a1; } 584 585 /* Dark mode token colors — dark purple background */ 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 /* ── Edit box ────────────────────────────────────────────────────── */ 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 /* ── Rate limit / Post captcha ───────────────────────────────────── */ 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 /* ── Captcha (registration) ──────────────────────────────────────── */ 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 /* ── Media embeds ────────────────────────────────────────────────── */ 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 /* ── Pagination / breadcrumb ─────────────────────────────────────── */ 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 /* ── Auth pages ──────────────────────────────────────────────────── */ 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 /* ── Profile page ────────────────────────────────────────────────── */ 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 /* ── Karma tier badge (profile avatar) ───────────────────────────── */ 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 /* ── Friends ──────────────────────────────────────────────────────── */ 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 /* ── Messages ────────────────────────────────────────────────────── */ 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 /* ── @mentions ───────────────────────────────────────────────────── */ 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 /* ── Error pages ─────────────────────────────────────────────────── */ 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 /* ── Lightbox ────────────────────────────────────────────────────── */ 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 /* ── Toggle switch ───────────────────────────────────────────────── */ 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 /* ── Search page ─────────────────────────────────────────────────── */ 818 .search-form { display:flex; gap:10px; margin-bottom:20px; } 819 .search-fi { flex:1; max-width:600px; } 820 821 /* ── Animations ──────────────────────────────────────────────────── */ 822 @keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } 823 824 /* ── Mobile ──────────────────────────────────────────────────────── */ 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 /* ── Post :target highlight (CSS-only, no JS needed) ────────── */ 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 /* Surfaces */ 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 /* Inputs */ 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 /* Navigation */ 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 /* Search */ 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 /* Topic / forum cards */ 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 /* Buttons */ 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 /* Reply box editor */ 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 /* Dropdowns */ 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 /* Code blocks — already dark, just keep them */ 996 [data-theme="dark"] pre.code-block { border-color: var(--border); } 997 998 /* Inline code */ 999 [data-theme="dark"] .inline-code, 1000 [data-theme="dark"] .post-content :not(pre) > code { background: #2d1f5e; border-color: #4c3a8a; color: #c4b5fd; } 1001 1002 /* Blockquote */ 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 /* Auth page */ 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 /* Profile */ 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 /* Messages */ 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 /* mx-* messages */ 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 /* Alerts */ 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 /* Admin */ 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 /* Misc */ 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 /* ── Welcome guide addon CSS ──────────────────────────────────── */ 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 /* ── Green karma redesign ─────────────────────────────────────── */ 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 /* ── Security warning banner ───────────────────────────────── */ 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; }