@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');
:root { --bg:#070b12; --bg-alt:#0d1420; --panel:#101923; --panel-alt:#121f2c; --panel-glass:rgba(20,30,45,.50); --accent:#53a9ff; --accent-alt:#7c6bff; --accent-glow:#2b9dff; --text:#dce4ef; --text-dim:#7a8899; --danger:#ff4d64; --radius:14px; --grad:linear-gradient(135deg,#032e55,#041423,#084774); --glow-soft:0 0 0 1px #12344f, 0 4px 18px -6px #006dca80, 0 0 55px -30px #009dff88; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; font-family:'Rajdhani',sans-serif; background:var(--bg); color:var(--text); min-height:100%; }
body { overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.neon-bg { position:fixed; inset:0; pointer-events:none; background:
 radial-gradient(circle at 78% 24%, rgba(80,160,255,.16), transparent 62%),
 radial-gradient(circle at 18% 82%, rgba(90,120,255,.14), transparent 58%),
 radial-gradient(circle at 50% 50%, rgba(40,110,210,.08), transparent 60%);
 filter:blur(90px) saturate(140%); opacity:.55; mix-blend-mode:screen; transition:.6s opacity; }

.logo { font-size:3rem; font-weight:700; letter-spacing:.04em; text-shadow:0 0 10px var(--accent),0 0 22px rgba(83,169,255,.45); filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.logo span { color:var(--accent); }
.logo.sm { font-size:1.6rem; }

.auth-grid { display:grid; place-items:center; min-height:100vh; padding:2rem; }
.auth-card { background:linear-gradient(180deg,var(--panel),var(--panel-alt)); padding:3rem 2.5rem 2.5rem; width:100%; max-width:420px; border-radius:var(--radius); position:relative; box-shadow:0 0 0 1px #13304d, 0 0 35px -5px #0071ff88, 0 0 120px -30px #009dffcc; backdrop-filter:blur(12px); }
.auth-form { display:flex; flex-direction:column; gap:.75rem; }
/* Unified input styling */
.auth-form input, .chat-form input, .create-post textarea, .create-post input[type=file],
input[type=text], input[type=password], input[type=file] {
  background:linear-gradient(145deg,#07101d,#0d1a29);
  border:1px solid #17324d;
  color:var(--text);
  padding:.85rem 1rem;
  font:inherit;
  border-radius:10px;
  outline:none;
  transition:.25s border, .25s background, .25s transform, .25s box-shadow;
  position:relative;
}
.auth-form input:focus, .chat-form input:focus, .create-post textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent),0 0 30px -10px var(--accent-alt);
}
::placeholder { color:#5a6a7f; }
.btn-primary { background:linear-gradient(90deg,#0078ff,#00a2ff); border:none; color:#fff; padding:.85rem 1.6rem; font:600 1.05rem 'Rajdhani'; border-radius:10px; cursor:pointer; letter-spacing:.05em; position:relative; overflow:hidden; box-shadow:0 0 0 1px #0f60b3,0 6px 18px -6px #008cffcc,0 0 35px -8px #009dff; }
.btn-primary::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent); transform:translateX(-100%); animation:shine 5s linear infinite; }
.btn-primary:hover { filter:brightness(1.15); }
.btn-primary:active { transform:translateY(2px); }
.btn-ghost { background:#0d1827; border:1px solid #1d3550; color:var(--text); padding:.6rem 1.2rem; border-radius:10px; cursor:pointer; font:600 0.95rem 'Rajdhani'; transition:.3s background, .3s color; }
.btn-ghost:hover { background:#12263b; color:#fff; }
.alert { background:#1b2636; border:1px solid var(--danger); color:var(--danger); padding:.75rem 1rem; border-radius:10px; font-weight:600; text-align:center; animation:pop .4s; }
.alt { text-align:center; font-size:.9rem; margin-top:.3rem; color:var(--text-dim); }

.layout-grid { display:grid; grid-template-rows:56px 1fr; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 1.4rem; backdrop-filter:blur(12px); background:rgba(8,14,22,.75); border-bottom:1px solid #11273d; position:sticky; top:0; z-index:10; }
.topbar nav { display:flex; flex-wrap:nowrap; white-space:nowrap; gap:.75rem; }
.topbar nav a, .topbar nav form { flex:0 0 auto; }
.topbar nav a { text-decoration:none !important; }
.topbar nav form { margin:0; padding:0; }
.topbar nav form .btn-ghost { display:inline-flex; align-items:center; }
.main-nav .btn-ghost.active { background:linear-gradient(120deg,#123048,#1b4363); color:#fff; box-shadow:0 0 0 1px #1b4d70,0 4px 12px -6px #0090ff55; }
.nav-more { position:relative; }
.nav-more-toggle { display:inline-flex; align-items:center; justify-content:center; padding:.6rem .9rem; font-size:.9rem; }
.nav-more[data-open="true"] .nav-more-toggle { background:linear-gradient(120deg,#123048,#1b4363); color:#fff; box-shadow:0 0 0 1px #1b4d70,0 4px 12px -6px #0090ff55; }
.nav-more-menu { position:absolute; top:110%; right:0; min-width:210px; background:linear-gradient(180deg,#0d1824,#0a131d); border:1px solid #16354d; box-shadow:0 10px 30px -12px #021c30,0 0 0 1px #12344f; border-radius:14px; padding:.6rem .55rem .7rem; display:flex; flex-direction:column; gap:.35rem; z-index:200; animation:fadeSlide .25s ease; }
.nav-more-menu[hidden]{ display:none !important; }
.home-link { width:46px; justify-content:center; padding:.6rem 0; }
.home-link svg { width:22px; height:22px; stroke:var(--accent); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 4px #009dff55); }
.home-link.active { background:linear-gradient(120deg,#123048,#1b4363); box-shadow:0 0 0 1px #1b4d70,0 4px 12px -6px #0090ff55; }
.nav-more-toggle { transition:.25s transform; }
.nav-more[data-open="true"] .nav-more-toggle { transform:rotate(180deg); }
.nav-more-menu::before { content:""; position:absolute; top:-8px; right:14px; width:15px; height:15px; background:inherit; border-left:1px solid #16354d; border-top:1px solid #16354d; transform:rotate(45deg); }
.more-link, .nav-more-menu button.more-link { background:#102131; border:1px solid #18374d; color:var(--text-dim); padding:.55rem .75rem; border-radius:10px; font:600 .68rem 'Rajdhani'; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:.5rem; text-decoration:none !important; }
.more-link:hover { background:#142c42; color:#fff; }
.more-link.active { background:linear-gradient(120deg,#123048,#1b4363); color:#fff; box-shadow:0 0 0 1px #1b4d70; }
.more-link.logout { color:#ff8899; border-color:#3b1d25; background:#201017; }
.more-link.logout:hover { background:#341823; color:#fff; }
@media (max-width:750px){
  .topbar nav { gap:.4rem; }
  .nav-more-menu { right:auto; left:0; }
}
.content { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; padding:2rem clamp(1rem,3vw,3rem) 3rem; align-items:start; max-width:1800px; margin:0 auto; }
.content.docs-full { display:block; padding:0; max-width:none; width:100%; }

.posts-panel, .chat-panel { background:linear-gradient(180deg,var(--panel),var(--panel-alt)); border-radius:var(--radius); padding:1.45rem 1.35rem 1.7rem; position:relative; box-shadow:var(--glow-soft); backdrop-filter:blur(8px); border:1px solid #1a3952; }
.posts-panel h2, .chat-panel h2 { margin:0 0 1rem; font-size:1.4rem; font-weight:600; letter-spacing:.06em; }
.posts-header { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }
.post-filters { display:flex; gap:.6rem; background:rgba(20,35,50,.35); padding:.4rem .5rem; border-radius:14px; border:1px solid #1d3d55; }
.filter-btn { background:transparent; border:none; color:var(--text-dim); font:600 .7rem 'Rajdhani'; letter-spacing:.12em; text-transform:uppercase; padding:.55rem .85rem .5rem; border-radius:10px; cursor:pointer; position:relative; transition:.25s color, .25s background; }
.filter-btn .count { font-weight:600; margin-left:.35rem; color:var(--accent); }
.filter-btn[aria-selected="true"] { background:linear-gradient(120deg,#123048,#1b4363); color:var(--text); box-shadow:0 0 0 1px #1b4d70,0 4px 12px -6px #0090ff55; }
.filter-btn:not([aria-selected="true"]):hover { color:var(--text); }
.chat-filters { background:rgba(20,35,50,.25); }

/* GIF Modal */
.gif-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); background:rgba(5,10,18,.55); z-index:400; }
.gif-modal[hidden] { display:none; }
.gif-modal-content { width:min(1100px,90%); max-height:85vh; background:linear-gradient(180deg,#111d29,#0f1825); border:1px solid #1b3d55; border-radius:18px; box-shadow:0 0 0 1px #152f44,0 20px 60px -25px #031c30; padding:1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:1rem; }
.gif-modal-head { display:flex; gap:.75rem; }
.gif-modal-head input { flex:1; }
.gif-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.65rem; overflow:auto; padding:.3rem; }
.gif-grid::-webkit-scrollbar { width:10px; }
.gif-grid::-webkit-scrollbar-thumb { background:#1b3146; border-radius:4px; }
.gif-grid img { width:100%; border-radius:12px; cursor:pointer; object-fit:cover; aspect-ratio:4/3; transition:.3s transform, .3s box-shadow; }
.gif-grid img:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 8px 18px -10px #0095ff55,0 0 0 1px #1d4d70; }
.gif-status { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); text-align:center; padding:.4rem 0 .2rem; }
.gif-modal-content button.btn-ghost { white-space:nowrap; }

/* GIF tag/thumbnail indicator */
#post-gif-thumb { background:#132638; padding:.35rem .6rem .3rem; border-radius:8px; }
.create-post { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.4rem; }
.create-post textarea { min-height:120px; resize:vertical; width:100%; }
/* Ensure the header toggle button wraps nicely */
.posts-header { gap:.6rem; }
.posts-header #toggle-post-editor { flex:0 0 auto; }
.posts-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; }
.chat-line { position:relative; }
.post { background:#0d1824; border:1px solid #1b3a55; border-radius:14px; padding:.95rem .95rem 1.15rem; position:relative; overflow:hidden; animation:fadeSlide .5s ease; }
.post::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(30,144,255,.06),transparent); pointer-events:none; }
.post .meta { display:flex; gap:.75rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); font-weight:600; }
.post .meta .user { color:var(--accent); }
.post .text { margin:.5rem 0 .6rem; line-height:1.4; white-space:pre-wrap; }
.post .img-wrap { border-radius:12px; margin-top:.5rem; }
.post img { width:auto; max-width:100%; height:auto; display:block; }
/* New interactions */
.post-actions { display:flex; gap:.8rem; align-items:center; margin-top:.55rem; flex-wrap:wrap; }
.post-actions button { background:#132435; border:1px solid #1e3a52; color:var(--text-dim); padding:.45rem .75rem; border-radius:9px; cursor:pointer; font:600 .7rem 'Rajdhani'; letter-spacing:.08em; display:flex; align-items:center; gap:.35rem; }
.post-actions button:hover { color:var(--text); background:#173248; }
.post-actions button.active { color:var(--accent); border-color:#2c5d80; background:#15344b; }
.counts { font-weight:600; }
.comments { margin-top:.7rem; display:flex; flex-direction:column; gap:.6rem; }
.comment-counter { font:600 .7rem 'Rajdhani'; letter-spacing:.08em; color:var(--text-dim); }
.tabs { display:flex; gap:.6rem; margin-bottom:1rem; }
.tab-btn { background:#102131; border:1px solid #18374d; color:var(--text-dim); padding:.55rem 1rem; font:600 .7rem 'Rajdhani'; letter-spacing:.12em; text-transform:uppercase; border-radius:10px; cursor:pointer; }
.tab-btn[aria-selected="true"] { background:linear-gradient(120deg,#123048,#1b4363); color:var(--text); box-shadow:0 0 0 1px #1b4d70,0 4px 12px -6px #0090ff55; }
.courses-panel { display:flex; flex-direction:column; gap:1.2rem; }
.course-create { display:flex; gap:.6rem; flex-wrap:wrap; background:#0d1824; border:1px solid #1b3a55; padding:.7rem .8rem; border-radius:12px; }
.course-create input { flex:1; min-width:160px; }
.course-list { display:flex; flex-direction:column; gap:1rem; }
.course { background:#0d1824; border:1px solid #1b3a55; padding:.8rem .9rem 1rem; border-radius:14px; }
.course .head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.course h3 { margin:.1rem 0 .6rem; font-size:1rem; }
.episodes { display:flex; flex-wrap:wrap; gap:.4rem; }
.ep { background:#132435; border:1px solid #1e3a52; padding:.35rem .55rem .32rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; border-radius:8px; cursor:pointer; user-select:none; }
.ep.done { background:#154865; border-color:#2a6b8f; color:var(--accent); box-shadow:0 0 0 1px #1c4f6d; }
.ep.peer-done { background:#1d2f44; border-color:#2d4f6d; color:#6aa9e0; box-shadow:0 0 0 1px #203d55; }
.ep.done.multi { background:linear-gradient(145deg,#154865,#2a3f67); color:#8dd4ff; border-color:#347aa5; box-shadow:0 0 0 1px #256287; }
.ep.readonly-done { outline:1px dashed #2e6c91; }
.ep.demo { cursor:default; padding:.35rem .55rem .32rem; }
.course-progress { font:600 .65rem 'Rajdhani'; letter-spacing:.1em; color:var(--text-dim); }
.course-post { background:#0c1a27; border:1px solid #193249; padding:.65rem .75rem .7rem; border-radius:12px; margin:.4rem 0 .2rem; position:relative; overflow:hidden; }
.course-post::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(83,169,255,.06),transparent); pointer-events:none; }
.course-post .cp-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; font:600 .65rem 'Rajdhani'; letter-spacing:.12em; text-transform:uppercase; }
.course-post .cp-ep { background:#153044; padding:.25rem .55rem .22rem; border-radius:8px; color:#7dbdff; }
.course-post.book .cp-ep { background:#244760; color:#9fd4ff; }
.course-post.book .cp-badge { color:#8ac8ff; }
.course-post.created .cp-bar span { width:0%; }
.course-post .cp-created { background:#2d3b52; padding:.25rem .55rem .22rem; border-radius:8px; color:#9bc1ff; }
.course-post .cp-title { font-size:.8rem; letter-spacing:.06em; color:var(--text); }
.course-post .cp-badge, .course-post .cp-total { margin-left:auto; font-weight:700; color:#69b3ff; }
.course-post .cp-bar { margin-top:.55rem; height:7px; background:#132838; border-radius:5px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px #1b3648; }
.course-post .cp-bar span { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#0078ff,#5f44ff); box-shadow:0 0 0 1px #1d4d70; }
.course-summary { margin-top:2rem; display:flex; flex-direction:column; gap:.8rem; }
/* Scrollable updates list constraint */
.updates-list{ scrollbar-width:thin; }
.updates-list::-webkit-scrollbar{ width:10px; }
.updates-list::-webkit-scrollbar-thumb{ background:#1b3146; border-radius:6px; }
.course-summary .item { background:#0d1824; border:1px solid #1b3a55; padding:.6rem .75rem .7rem; border-radius:12px; font:600 .7rem 'Rajdhani'; letter-spacing:.08em; display:flex; justify-content:space-between; align-items:center; }
.course-summary .bar { flex:1; height:6px; background:#132636; border-radius:4px; margin:0 .75rem; position:relative; overflow:hidden; }
.course-summary .bar span { position:absolute; inset:0; background:linear-gradient(90deg,#0078ff,#5f44ff); width:0%; }
.course-list:empty::after { content:"Noch keine Courses"; font:600 .75rem 'Rajdhani'; letter-spacing:.12em; color:var(--text-dim); opacity:.7; }
.comment { background:#0b1622; border:1px solid #183346; padding:.55rem .65rem; border-radius:10px; font-size:.75rem; line-height:1.3; }
.comment .meta { display:flex; gap:.5rem; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.25rem; }
.add-comment { display:flex; gap:.45rem; margin-top:.4rem; }
.add-comment input { flex:1; padding:.55rem .7rem; font-size:.75rem; background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); border-radius:10px; }
.add-comment input:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent); }
.category-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.edit-form textarea.edit-text { width:100%; min-height:110px; resize:vertical; background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); padding:.7rem .85rem; font:600 .8rem 'Rajdhani'; letter-spacing:.05em; border-radius:10px; line-height:1.35; }
.edit-form textarea.edit-text:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent); outline:none; }
.edit-form input[name=categories] { flex:1; min-width:200px; background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); padding:.55rem .7rem; font:600 .65rem 'Rajdhani'; border-radius:10px; }
.edit-form input[name=categories]:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.btn-delete { background:#2a1212 !important; border:1px solid #5a1e1e !important; color:#ff8585 !important; }
.btn-delete:hover { background:#451d1d !important; color:#ffb5b5 !important; }
.chat-line .chat-del { background:transparent; border:none; color:#555; cursor:pointer; font-size:.7rem; }
.chat-line .chat-del:hover { color:#ff6666; }
.course .course-del { background:#221111; border:1px solid #552222; color:#ff6d6d; padding:.35rem .6rem .3rem; border-radius:8px; font:600 .6rem 'Rajdhani'; letter-spacing:.08em; cursor:pointer; }
.course .course-del:hover { background:#3a1d1d; }
.chip { background:#132131; color:#89b3d9; padding:.28rem .55rem .25rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; border-radius:12px; border:1px solid #1d3d56; text-transform:uppercase; }
.categories-wrapper { background:#0d1824; border:1px solid #1b3a55; padding:.7rem .75rem .85rem; border-radius:12px; display:flex; flex-direction:column; gap:.65rem; }
.cat-choices { display:flex; flex-wrap:wrap; gap:.45rem; }
.cat-choices button { background:#132435; border:1px solid #1e3a52; color:#6f8aa3; padding:.45rem .75rem .4rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; border-radius:10px; cursor:pointer; transition:.25s background,.25s color,.25s border-color; }
.cat-choices button.active { background:#154865; color:var(--accent); border-color:#2a6b8f; box-shadow:0 0 0 1px #1b4d70; }
.cat-choices button:hover { color:#cfe7ff; }
.cat-add-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-add-row input { flex:1; min-width:180px; background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); padding:.55rem .65rem; border-radius:10px; font:600 .6rem 'Rajdhani'; letter-spacing:.08em; }
.cat-add-row input:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; }
.cat-select-row select { background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); padding:.55rem .6rem; border-radius:10px; font:600 .6rem 'Rajdhani'; letter-spacing:.08em; min-height:90px; }
.cat-select-row select:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; }
.cat-select-row input#new-category-name { background:linear-gradient(145deg,#07101d,#0d1a29); border:1px solid #17324d; color:var(--text); padding:.55rem .6rem; border-radius:10px; font:600 .6rem 'Rajdhani'; letter-spacing:.08em; }
.cat-select-row input#new-category-name:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; }
/* Removed internal posts list scroll; page handles scroll */
.post .text, .chat-line { overflow-wrap:break-word; }
.chat-line .img-wrap img, .post .img-wrap img { max-width:100%; height:auto; }
/* Lightbox */
.ps-lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.ps-lightbox[hidden]{ display:none; pointer-events:none; }
.ps-lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(2px); }
.ps-lightbox-content { position:relative; z-index:1; max-width:95vw; max-height:92vh; display:flex; align-items:center; justify-content:center; }
.ps-lightbox-content img { max-width:95vw; max-height:92vh; border-radius:12px; box-shadow:0 10px 40px -20px #000; }
.ps-lightbox-close { position:absolute; top:-12px; right:-12px; background:#101a27; border:1px solid #274566; color:#cfe3ff; border-radius:50%; width:36px; height:36px; cursor:pointer; box-shadow:0 0 0 1px #12344f, 0 6px 16px -8px #000; }
.ps-lightbox-close:hover { background:#14263a; }

.chat-panel { display:flex; flex-direction:column; height:calc(100vh - 140px); position:relative; overflow:hidden; z-index:9; pointer-events:auto; }
.chat-panel::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(83,169,255,.18), transparent 70%), radial-gradient(circle at 15% 90%, rgba(124,107,255,.18), transparent 65%); opacity:.35; pointer-events:none; mix-blend-mode:screen; }
.chat-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.9rem; padding:.5rem .4rem 1rem; scrollbar-width:thin; }
.chat-messages::-webkit-scrollbar { width:8px; }
.chat-messages::-webkit-scrollbar-thumb { background:#1c3048; border-radius:4px; }
.chat-line { background:#0b1625; border:1px solid #17324d; padding:.7rem .95rem .78rem; border-radius:12px; font-size:1rem; line-height:1.35; position:relative; animation:fadeSlide .4s; max-width:80%; }
.chat-line.me { margin-left:auto; border-color:#1f4e78; background:#0c1f33; }
.chat-line .user { font-weight:600; color:var(--accent); margin-right:.3rem; }
.chat-line .time { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin-right:.45rem; background:rgba(255,255,255,.06); padding:2px 6px 2px; border-radius:6px; position:relative; top:-1px; font-weight:600; }
.chat-line.system { text-align:center; background:transparent; border:none; color:var(--text-dim); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; }
.blink-focus { animation:psBlinkNew 1.4s ease-in-out 0s 2; }
.chat-line.unread { box-shadow:0 0 0 1px #ff5050,0 0 12px -2px #ff3d3dAA; border-color:#ff5050; }
.chat-line.chat-new { --neu-accent:#ff2d2d; border-color:var(--neu-accent); box-shadow:0 0 0 2px var(--neu-accent), 0 0 16px -2px #ff2d2dcc, 0 0 42px -10px #ff2d2d66 inset; position:relative; animation:neuPulse 2.6s ease-in-out infinite; }
.chat-line.chat-new::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(140deg,rgba(255,70,70,.18),rgba(255,70,70,0)); mix-blend-mode:screen; }
.chat-line.chat-new::after { content:'NEU'; position:absolute; top:-7px; right:8px; background:var(--neu-accent); color:#fff; font:700 .48rem 'Rajdhani'; padding:2px 6px 2px; border-radius:5px; letter-spacing:.12em; box-shadow:0 0 0 1px #8d1919,0 0 6px -1px #ff3d3d; text-shadow:0 0 4px #fff8; }
@keyframes neuPulse { 0%,100% { box-shadow:0 0 0 2px var(--neu-accent),0 0 10px -4px #ff2d2d88,0 0 30px -12px #ff2d2d55 inset; } 50% { box-shadow:0 0 0 2px var(--neu-accent),0 0 18px -2px #ff2d2d,0 0 55px -14px #ff2d2d88 inset; } }

/* ---------------- Typing Indicator ---------------- */
.typing-bar { display:none; gap:.55rem; padding:.25rem .4rem .35rem; font:600 .55rem 'Rajdhani'; letter-spacing:.08em; color:#6fa7d8; flex-wrap:wrap; align-items:center; margin-top:.2rem; min-height:18px; }
.typing-bar.active { display:flex; }
.typing-bar .typing-user { display:flex; align-items:center; gap:.4rem; background:#0b1625; border:1px solid #17324d; padding:.25rem .55rem .25rem .6rem; border-radius:30px; position:relative; box-shadow:0 0 0 1px #112a3d,0 0 8px -4px #1b4e70; }
.typing-bar .typing-user .name { color:#9bc7ec; font-weight:600; }
.typing-bar .typing-user .dots { display:inline-flex; gap:3px; }
.typing-bar .typing-user .dots span { width:6px; height:6px; background:#3d7fb5; border-radius:50%; animation:typingBlink 1.05s infinite ease-in-out; opacity:.35; }
.typing-bar .typing-user .dots span:nth-child(2){ animation-delay:.18s; }
.typing-bar .typing-user .dots span:nth-child(3){ animation-delay:.36s; }
@keyframes typingBlink { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
@keyframes psBlinkNew { 0%,100% { box-shadow:0 0 0 1px #1b3a55,0 0 0 0 #ff2d2d00; background:#2a1620; } 50% { box-shadow:0 0 0 1px #ff5050,0 0 18px 0 #ff3d3d99; background:#5a1e1e; } }
.chat-form { display:flex; gap:.65rem; margin-top:.9rem; background:linear-gradient(160deg,var(--panel-glass),rgba(10,20,35,.78)); padding:.75rem .75rem; border:1px solid #19364c; border-radius:14px; backdrop-filter:blur(12px) saturate(150%); box-shadow:0 0 0 1px #12364f, 0 0 14px -8px #008dff80; position:sticky; bottom:0; }
.chat-panel { padding-bottom:0; }

/* Small viewport adjustments */
@media (max-height:700px) {
  .chat-panel { height:auto; min-height:480px; }
  .chat-messages { max-height:50vh; }
}
@media (max-width:1100px) and (max-height:760px) {
  .chat-form { position:sticky; bottom:0; margin-top:.75rem; }
  .chat-messages { padding-bottom:5rem; }
}
/* Extra small height tolerance */
@media (max-height:600px) {
  .layout-grid { grid-template-rows:50px 1fr; }
  .topbar { padding:0 .9rem; }
  .chat-messages { max-height:55vh; }
  .chat-form { padding:.65rem .7rem; gap:.55rem; }
  .chat-form .btn-primary { padding:.6rem 1.05rem; }
  .posts-panel, .chat-panel { padding:1.1rem 1rem 1.2rem; }
  .create-post textarea { min-height:90px; }
}
@media (max-height:520px) {
  .chat-messages { max-height:58vh; }
  .create-post textarea { min-height:70px; }
  .btn-primary { padding:.7rem 1.1rem; }
}
@media (max-height:460px) {
  .topbar { position:static; }
  .chat-panel { min-height:unset; }
  .chat-messages { max-height:60vh; }
  .content { padding:1rem clamp(.5rem,2vw,2rem) 2rem; }
}
.chat-form input { flex:1; font-size:.95rem; resize:none; max-width:100%; }
.chat-form .btn-primary { padding:.75rem 1.35rem; font-size:.9rem; box-shadow:0 0 0 1px #1a5ba0,0 4px 14px -4px #008cffcc,0 0 25px -6px #5f44ff; }
.chat-form .btn-primary:hover { filter:brightness(1.2); }

/* Smoke (cigarette) action button */
.btn-smoke { background:linear-gradient(120deg,#0e1c2b,#0e2235); border:1px solid #1b3d59; color:#7bc6ff; padding:.6rem .9rem; border-radius:10px; font:700 .8rem 'Rajdhani'; letter-spacing:.12em; cursor:pointer; box-shadow:0 0 0 1px #12344f,0 0 18px -10px #2b9dff80; }
.btn-smoke:hover { color:#cfe7ff; background:linear-gradient(120deg,#13283d,#123047); }
.btn-smoke.active { color:#aee2ff; box-shadow:0 0 0 1px #1b5d80,0 0 25px -10px #2b9dff; }

/* Smoke animation */
.smoke-stream { position:absolute; left:8px; bottom:34px; pointer-events:none; display:flex; flex-direction:column; gap:6px; max-width:0; overflow:visible; }
.chat-line.me .smoke-stream { left:auto; right:8px; }
.smoke-line { position:relative; padding-left:30px; overflow:hidden; }
.chat-line.me.smoke-line { padding-left:0; padding-right:30px; }
.smoke-cig { position:absolute; left:0; bottom:.35rem; width:24px; height:6px; border-radius:3px; background:linear-gradient(90deg,#ededed,#c7c7c7 50%,#444 78%); box-shadow:0 0 0 1px #0b2540, 0 0 10px -4px #2b9dff; transform:rotate(350deg); }
.chat-line.me .smoke-cig { left:auto; right:0; transform:rotate(10deg) scaleX(-1); }
.smoke-ember { position:absolute; left:0; top:0; width:4px; height:6px; background:linear-gradient(180deg,#2bd0ff,#53a9ff,#2bd0ff); border-radius:2px; filter:drop-shadow(0 0 8px #2bd0ff); animation:emberPulse 1.2s ease-in-out infinite; }
@keyframes emberPulse { 0%,100% { filter:drop-shadow(0 0 4px #2bd0ff); opacity:.85; } 50% { filter:drop-shadow(0 0 10px #53a9ff); opacity:1; } }
.smoke-emoji { color:#7bc6ff; text-shadow:0 0 8px #53a9ff88; }

/* Parameterized puffs for smoother, cleaner effect */
.smoke-puff { width:12px; height:12px; border-radius:50%; background:radial-gradient(circle, rgba(123,198,255,.9) 12%, rgba(123,198,255,.25) 45%, rgba(123,198,255,0) 70%); opacity:var(--opacity0,.9); filter: blur(var(--blur,1.2px)) drop-shadow(0 0 4px #53a9ff66); will-change: transform, opacity; animation: smokeRise var(--dur,2.6s) cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes smokeRise {
  0% { transform: translate(0,0) scale(1); opacity: var(--opacity0,.9); }
  40% { transform: translate(10px, -40px) scale(1.35); opacity:.7; }
  80% { transform: translate(14px, -92px) scale(1.9); opacity:.35; }
  100% { transform: translate(16px, -120px) scale(2.1); opacity:0; }
}

/* Wisps (elongated faint trails) */
.smoke-wisp { width:16px; height:5px; border-radius:10px; background: radial-gradient(50% 70% at 50% 50%, rgba(123,198,255,.45), rgba(123,198,255,.05) 70%, rgba(123,198,255,0) 100%); filter: blur(2px); opacity:.75; will-change: transform, opacity; animation: wispRise var(--wDur,2s) ease-out forwards; }
@keyframes wispRise { 0% { transform: translate(4px,-6px) scale(1.05); opacity:.75; } 60% { transform: translate(10px,-54px) scale(1.3); opacity:.45; } 100% { transform: translate(12px,-96px) scale(1.5); opacity:0; } }

/* Escalating announce lines */
.smoke-announce { position:relative; font-weight:700; letter-spacing:.06em; color:#7bc6ff; text-shadow:0 0 6px #2b9dff66, 0 0 22px #2b9dff33; overflow:hidden; }
.smoke-announce.level-1 { filter:brightness(1); }
.smoke-announce.level-2 { color:#8fd4ff; text-shadow:0 0 8px #2b9dffaa,0 0 26px #2b9dff55; }
.smoke-announce.level-3 { color:#a3ddff; text-shadow:0 0 10px #2b9dffcc,0 0 30px #2b9dff66; }
.smoke-announce.level-4 { color:#b7e6ff; text-shadow:0 0 12px #2b9dffe6,0 0 40px #2b9dff88; }
.smoke-announce.level-5 { color:#d9f2ff; text-shadow:0 0 14px #2b9dffff,0 0 55px #2b9dffbb,0 0 90px #2b9dff66; animation: pulseGlow 2s ease-in-out infinite; }
.smoke-announce.level-6 { color:#ffffff; text-shadow:0 0 16px #2b9dffff,0 0 70px #2b9dffcc,0 0 120px #2b9dff88,0 0 180px #2b9dff55; animation: pulseGlow 1.5s ease-in-out infinite; letter-spacing:.08em; }
@keyframes pulseGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.3); } }

.smoke-announce .smoke-fx { position:absolute; inset:0; pointer-events:none; }
.smoke-puff-mini { position:absolute; left:50%; bottom:4px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle, rgba(123,198,255,.85) 25%, rgba(123,198,255,.15) 55%, rgba(123,198,255,0) 80%); opacity:.9; animation: miniPuff var(--dur,1.6s) cubic-bezier(.33,.6,.4,1) forwards; transform:translate(-50%,0) scale(.7); animation-delay:var(--delay,0s); }
@keyframes miniPuff { 0% { transform:translate(calc(-50% + var(--tx,0)),0) scale(.4); opacity:.9; } 60% { opacity:.55; } 100% { transform:translate(calc(-50% + var(--tx,0)),-70px) scale(1.4); opacity:0; } }

/* Subtle glow for focused chat input container */
.chat-form:focus-within { box-shadow:0 0 0 1px var(--accent),0 0 18px -6px var(--accent),0 0 55px -35px var(--accent-alt); border-color:var(--accent); }

/* Better file input appearance inside post form */
.create-post input[type=file] { padding:.55rem .9rem; font-size:.75rem; cursor:pointer; }
.create-post input[type=file]::-webkit-file-upload-button { background:#132235; border:none; color:var(--text-dim); padding:.45rem .9rem; margin-right:.75rem; border-radius:8px; cursor:pointer; font:600 .7rem 'Rajdhani'; letter-spacing:.08em; transition:.3s background, .3s color; }
.create-post input[type=file]::-webkit-file-upload-button:hover { background:#183148; color:#fff; }
/* Custom file input wrapper */
.file-field { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.file-field input[type=file] { position:absolute; left:-9999px; visibility:hidden; }
.btn-file { background:#132235; border:1px solid #1e3a52; color:var(--text-dim); padding:.55rem .95rem .5rem; border-radius:10px; cursor:pointer; font:600 .7rem 'Rajdhani'; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.4rem; }
.btn-file:hover { background:#183148; color:var(--text); }
.file-name { font:600 .6rem 'Rajdhani'; letter-spacing:.08em; color:#5a6a7f; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Scrollbar refinement */
.posts-panel::-webkit-scrollbar, .chat-messages::-webkit-scrollbar { width:10px; }
.posts-panel::-webkit-scrollbar-track, .chat-messages::-webkit-scrollbar-track { background:#0a131f; }
.posts-panel::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb { background:#1b2d43; border-radius:6px; border:2px solid #0a131f; }
.posts-panel::-webkit-scrollbar-thumb:hover, .chat-messages::-webkit-scrollbar-thumb:hover { background:#244568; }

/* Posts panel enhancement */
.posts-panel { backdrop-filter:blur(10px) saturate(135%); }
.posts-panel h2 { position:relative; }
.posts-panel h2::after { content:""; position:absolute; left:0; bottom:-6px; width:54px; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); border-radius:4px; box-shadow:0 0 12px -2px var(--accent); }


/* Category dropdown */
.cat-filter-dropdown { position:absolute; top:110%; right:0; background:#0d1824; border:1px solid #1b3a55; border-radius:12px; padding:.6rem .65rem; min-width:210px; max-height:340px; overflow:auto; box-shadow:0 10px 35px -15px #031b2e,0 0 0 1px #12344f; display:flex; flex-direction:column; gap:.4rem; z-index:25; }
.cat-filter-dropdown button.cat-opt { background:#132435; border:1px solid #1e3a52; color:#6f8aa3; padding:.45rem .6rem .4rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; border-radius:9px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.cat-filter-dropdown button.cat-opt.active { background:#154865; color:var(--accent); border-color:#2a6b8f; }
.cat-filter-dropdown button.cat-opt:hover { color:#cfe7ff; }
.cat-filter-dropdown .del { background:#2a1212; border:1px solid #552222; color:#ff8d8d; font:600 .55rem 'Rajdhani'; padding:.2rem .4rem .15rem; border-radius:6px; cursor:pointer; }
.cat-filter-dropdown .del:hover { background:#3d1b1b; }
.cat-filter-dropdown .empty { font:600 .55rem 'Rajdhani'; letter-spacing:.12em; color:var(--text-dim); text-align:center; padding:.4rem .2rem; }

/* Chat messages subtle layering */
.chat-messages { background:linear-gradient(180deg,rgba(20,32,46,.42),rgba(12,20,30,.22)); border:1px solid #153244; border-radius:14px; padding:.9rem .8rem 1.15rem; }
.chat-line { backdrop-filter:blur(6px); background:linear-gradient(140deg,#0d1c2a,#102436); }
.chat-line.me { background:linear-gradient(140deg,#10304a,#123a56); }
.chat-line::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,transparent,rgba(30,144,255,.07),transparent); opacity:.7; pointer-events:none; }

/* Persistent Upload HUD */
.ps-upload-hud { position:fixed; left:16px; bottom:16px; width:280px; background:linear-gradient(180deg,#0d1824,#0c1520); border:1px solid #1b3a55; border-radius:14px; box-shadow:0 10px 30px -18px #000, 0 0 0 1px #12344f; z-index:999; overflow:hidden; }
.ps-upload-hud .hud-head { font:700 .8rem 'Rajdhani'; letter-spacing:.14em; text-transform:uppercase; color:#9bc7ec; padding:.4rem .6rem; background:#0f1c2b; border-bottom:1px solid #18374d; }
.ps-upload-hud .hud-list { display:flex; flex-direction:column; gap:.5rem; padding:.55rem .6rem; max-height:40vh; overflow:auto; }
.ps-upload-hud .hud-item { background:#0b1622; border:1px solid #17324d; border-radius:10px; padding:.5rem .55rem .55rem; position:relative; }
.ps-upload-hud .hud-item .name { font:700 .75rem 'Rajdhani'; color:#8dc7ff; padding-right:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-upload-hud .hud-item .bar { position:relative; height:8px; background:#132535; border:1px solid #1b3a55; border-radius:6px; overflow:hidden; margin-top:.35rem; }
.ps-upload-hud .hud-item .bar span { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#0078ff,#5f44ff); box-shadow:0 0 0 1px #1d4d70,0 0 12px -2px #0095ffaa; transition:width .15s linear; }
.ps-upload-hud .hud-item .meta { display:flex; gap:.6rem; font:600 .6rem 'Rajdhani'; letter-spacing:.1em; color:#6f8aa3; margin-top:.25rem; }
.ps-upload-hud .hud-item .close { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; background:#132435; border:1px solid #1e3a52; color:#8fb4cc; cursor:pointer; display:grid; place-items:center; font-weight:700; line-height:1; }
.ps-upload-hud .hud-item .close:hover { background:#183148; color:#fff; }
.ps-upload-hud .hud-item.error { border-color:#5a2a3a; background:#21121a; }
.ps-upload-hud .hud-item.done { border-color:#245a3a; background:#102115; }

/* Hover lift for posts */
.post { transition:.35s transform, .35s box-shadow, .35s border-color; }
.post:hover { transform:translateY(-4px); border-color:#255b84; box-shadow:0 8px 22px -14px #008eff55, 0 0 0 1px #1b4d70; }
.post.blink-focus { animation:psPostBlink 1.6s ease-in-out 0s 2; }
@keyframes psPostBlink { 0%,100% { border-color:#1b3a55; background:#0d1824; } 50% { border-color:#ff5050; background:#3b1b1b; } }

/* Animations */
@keyframes shine { to { transform:translateX(100%); } }
@keyframes pop { 0% { transform:scale(.9); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes fadeSlide { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:translateY(0); } }
.animate-fadeIn { animation:pop .6s; }
.animate-slideInLeft { animation:fadeSlide .6s; }
.animate-slideInRight { animation:fadeSlide .6s; }

/* Responsive */
@media (max-width:950px) {
  .content { grid-template-columns:1fr; padding:1.5rem 1.25rem 3.5rem; }
  .chat-panel { height:auto; min-height:420px; }
}

/* ---------------- Presence / Online Users ---------------- */
.online-users { background:rgba(20,35,50,.28); border:1px solid #1b3d55; padding:.4rem .55rem .45rem; border-radius:12px; box-shadow:0 0 0 1px #143049,0 4px 14px -8px #003a66; max-height:70px; overflow:auto; scrollbar-width:thin; }
.online-users::-webkit-scrollbar { height:6px; width:6px; }
.online-users::-webkit-scrollbar-thumb { background:#1b3146; border-radius:4px; }
.online-users .ou { background:#132435; border:1px solid #1e3a52; padding:.3rem .55rem .28rem; border-radius:9px; display:inline-flex; align-items:center; gap:.45rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; position:relative; }
.online-users .ou .dot { width:8px; height:8px; border-radius:50%; background:#3fbf5b; box-shadow:0 0 0 1px #0d2918,0 0 8px -1px #2fff91; }
.online-users .ou button.ping-btn { background:#153044; border:1px solid #234b66; color:#88c3ff; padding:.25rem .45rem .22rem; font:600 .55rem 'Rajdhani'; letter-spacing:.1em; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem; }
.online-users .ou button.ping-btn:hover:not(:disabled) { background:#1b3d58; color:#fff; }
.online-users .ou button.ping-btn:disabled { opacity:.45; cursor:not-allowed; }
.online-users .ou .cd { margin-left:.15rem; font-weight:700; color:#ffce6b; }
.online-users .ou.offline { opacity:.30; background:#132435; }
.online-users .ou.offline .dot { background:#555; box-shadow:none; }
.online-users .ou .ls { font:600 .45rem 'Rajdhani'; letter-spacing:.15em; opacity:.65; background:#0c1924; padding:.15rem .4rem .12rem; border:1px solid #1d364a; border-radius:6px; }

.ping-toast { animation:pop .4s; }
.ping-toast.fade { opacity:0; }
/* Subtle flash when ping received in foreground */
.ping-flash { animation: pingFlash 0.6s ease-in-out; }
@keyframes pingFlash { 0% { filter:brightness(1) drop-shadow(0 0 0 #ff3b3b00);} 40% { filter:brightness(1.35) drop-shadow(0 0 6px #ff3b3b); } 100% { filter:brightness(1) drop-shadow(0 0 0 #ff3b3b00);} }

/* ---------------- Progress Dashboard ---------------- */
.progress-dash { margin-top:1.2rem; display:flex; flex-direction:column; gap:1.4rem; animation:fadeSlide .5s; }
.progress-row { display:flex; flex-wrap:wrap; gap:1.4rem; }
.progress-card { background:#0d1824; border:1px solid #1b3a55; border-radius:16px; padding:1rem 1.1rem 1.2rem; flex:1; min-width:280px; position:relative; box-shadow:0 0 0 1px #12364f,0 6px 20px -10px #004c7a66; }
.progress-card h3 { margin:.1rem 0 1rem; font:600 .95rem 'Rajdhani'; letter-spacing:.12em; text-transform:uppercase; color:#9bc7ec; }
.progress-card canvas { width:100%; height:auto; display:block; image-rendering:crisp-edges; }
.progress-card .legend { margin-top:.65rem; display:flex; flex-direction:column; gap:.35rem; max-height:200px; overflow:auto; scrollbar-width:thin; }
.progress-card .legend::-webkit-scrollbar { width:8px; }
.progress-card .legend::-webkit-scrollbar-thumb { background:#1b3146; border-radius:4px; }
.legend .leg-item { display:flex; align-items:center; gap:.55rem; font:600 .6rem 'Rajdhani'; letter-spacing:.1em; background:#122636; border:1px solid #1b3a55; padding:.35rem .55rem .3rem; border-radius:10px; }
.legend .leg-item .sw { width:16px; height:16px; border-radius:5px; box-shadow:0 0 0 1px #0b1e2c,0 0 8px -2px #5ab6ff; }
.legend .leg-item b { color:var(--accent); font-weight:700; margin-left:auto; }
.legend .leg-item i { font-style:normal; opacity:.55; }
.progress-meta { font:600 .65rem 'Rajdhani'; letter-spacing:.1em; display:flex; flex-wrap:wrap; gap:.8rem; }
.progress-meta .meta-line { background:#0d1824; border:1px solid #1b3a55; padding:.55rem .75rem .5rem; border-radius:10px; }
.progress-status { min-height:16px; }
.progress-dash::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent,rgba(83,169,255,.05),transparent); border-radius:inherit; }
.progress-dash .empty { font:600 .65rem 'Rajdhani'; letter-spacing:.12em; color:var(--text-dim); }
.progress-card .tc-list { display:flex; flex-direction:column; gap:.4rem; }
.progress-card .tc-item { display:flex; gap:.6rem; align-items:center; background:#122636; border:1px solid #1b3a55; padding:.4rem .55rem .38rem; border-radius:10px; font:600 .6rem 'Rajdhani'; letter-spacing:.08em; }
.progress-card .tc-item .rank { width:18px; height:18px; display:grid; place-items:center; background:#17324d; border-radius:6px; font-size:.55rem; color:#9bc7ec; }
.progress-card .tc-item .title { flex:1; color:#d2e6f9; }
.progress-card .tc-item .count { color:var(--accent); font-weight:700; }
.progress-card #progress-bugs .bug-kpis .bug-kpi b { font-size:1rem; }
.progress-card #progress-bugs .bug-oldest-list .bug-old-item { transition:background .15s,border-color .15s; }
.progress-card #progress-bugs .bug-oldest-list .bug-old-item:hover { background:#163047; border-color:#255279; }
/* Layout view modes */
/* Progress page stands alone now; no body[data-view] toggles required */
/* Responsive improvements for Progress Dashboard */
.progress-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; }
.progress-card { min-width:0; }
@media (max-width:620px){ .progress-row { grid-template-columns:1fr; } }