/* ════════════════════════════════════════════
   MSIGN PORTAL.CSS — Complete Stylesheet
   Upload to: /uploads/msign/portal.css
════════════════════════════════════════════ */

/* ── FONTS (fallback if not in headerinclude) ── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap');

/* ── CSS VARS ── */
:root {
    --bg:      #0b0b0d;
    --bg-tile: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAALklEQVR4nGMUE5P6+vUzKyvr79+/mb5+/czNzfv7929WVlYmVlZWOJ8JIgbhAwB3fhgrnF/1GAAAAABJRU5ErkJggg==");
    --mid:     #161618;
    --card:    #111113;
    --card2:   #0e0e10;
    --border:  #222226;
    --border2: #1a1a1e;
    --red:     #cc0000;
    --redline: #cc6600;
    --cyan:    #00ccff;
    --green:   #00cc55;
    --orange:  #ff8800;
    --pink:    #ff33ff;
    --yellow:  #ffcc00;
    --white:   #e8e8e8;
    --grey:    #999999;
    --dim:     #555555;
}

/* ── RESET + BASE ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
    background-color: var(--bg);
    background-image: var(--bg-tile);
    background-repeat: repeat;
    font-family: 'Rajdhani', sans-serif;
    color: var(--white);
    font-size: 13px;
}
a { text-decoration: none; color: var(--cyan); }
a:hover { color: #fff; }

/* ════ HEADER ════ */
@keyframes gradshift { to { background-position: 200% center; } }

.zs-topnav { background: var(--mid); border-bottom: 2px solid var(--orange); }
.zs-topnav-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    display: flex; justify-content: space-between; align-items: stretch;
    padding: 0 16px;
}
.zs-topnav-links { display: flex; width: 100%; }
.zs-topnav-links a {
    display: flex; align-items: center; justify-content: center;
    flex: 1; padding: 0 10px; height: 38px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; color: var(--white);
    text-decoration: none; border-right: 1px solid #111;
    transition: background 0.15s; text-transform: uppercase; cursor: pointer;
}
.zs-topnav-links a:hover,
.zs-topnav-links a.active { background: rgba(255,255,255,0.05); }
.zs-topnav-links a.portal  { color: var(--cyan); }
.zs-topnav-links a.forum   { color: #a066ff; }
.zs-topnav-links a.credits { color: var(--orange); }
.zs-topnav-links a.upgrade { color: var(--green); }
.zs-topnav-links a.regs    { color: var(--orange); }
.zs-topnav-links a.faq     { color: var(--pink); }

.zs-subnav { background: var(--bg); border-bottom: 1px solid #1c1c1c; padding: 0; }
.zs-subnav-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    padding: 5px 16px; display: flex; gap: 20px;
}
.zs-subnav a { color:var(--grey); font-size:13px; font-weight:600; text-decoration:none; transition:color 0.15s; }
.zs-subnav a:hover { color:var(--cyan); }

/* ── HEADER BAND ── */
.zs-header-band { background: var(--card); border-bottom: 1px solid var(--border); }
.zs-header-band-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    display: flex; min-height: 90px;
    padding: 0 16px; box-sizing: border-box;
}
.zs-logo-box {
    background:#111; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:14px 20px; border-right:1px solid var(--border);
    min-width:160px; flex-shrink:0; text-decoration:none;
}
.zs-logo-text { font-family:'Oswald',sans-serif; font-size:34px; font-weight:900; letter-spacing:6px; color:#fff; line-height:1; }
.zs-logo-sub { background:var(--orange); color:#fff; font-size:8px; font-weight:700; letter-spacing:2px; padding:2px 8px; margin-top:7px; text-transform:uppercase; }

/* Staff Picks in header band */
.zs-staff-picks-bar {
    display:flex; flex-direction:column; justify-content:center;
    flex:1; border-right:1px solid var(--border); overflow:hidden;
    background: linear-gradient(135deg, rgba(255,204,0,0.03) 0%, transparent 60%);
}
.zs-staff-pick-label {
    display:flex; flex-direction:row; align-items:center;
    padding:6px 12px 4px; gap:6px;
    border-bottom:1px solid var(--border2); flex-shrink:0;
    background:rgba(255,204,0,0.05);
}
.zs-staff-pick-label i { color:var(--yellow); font-size:10px; }
.zs-staff-pick-label span { font-family:'Oswald',sans-serif; font-size:9px; font-weight:700; color:var(--yellow); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.zs-hdr-pick-card {
    display:flex; align-items:center; gap:9px; padding:7px 12px;
    border-bottom:1px solid var(--border2); cursor:pointer; transition:background 0.15s; min-width:0;
}
.zs-hdr-pick-card:last-child { border-bottom:none; }
.zs-hdr-pick-card:hover { background:rgba(255,204,0,0.05); }
.zs-hdr-pick-ico {
    width:32px; height:32px; border-radius:7px; flex-shrink:0; overflow:hidden;
    background:#111; border:1px solid rgba(255,255,255,0.07); position:relative;
}
.zs-hdr-pick-ico img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zs-hdr-pick-info { flex:1; min-width:0; }
.zs-hdr-pick-name { font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.zs-hdr-pick-sub { font-size:9px; color:var(--dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zs-hdr-pick-badge { font-size:7px; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.5px; background:rgba(255,204,0,0.15); color:var(--yellow); border:1px solid rgba(255,204,0,0.3); padding:1px 5px; border-radius:2px; flex-shrink:0; white-space:nowrap; }

/* User panel */
.zs-user-panel {
    width:220px; flex-shrink:0; padding:12px 0 12px 16px;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.zs-user-top { display:flex; align-items:center; gap:10px; }
.zs-user-av {
    width:40px; height:40px; border-radius:50%;
    background:var(--card2); border:2px solid var(--cyan);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; color:var(--cyan);
    flex-shrink:0;
}
.zs-user-name { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:#fff; }
.zs-user-tier { font-size:10px; color:var(--orange); letter-spacing:1px; text-transform:uppercase; }
.zs-user-quota { display:flex; gap:4px; align-items:center; font-size:11px; color:var(--dim); }
.zs-quota-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.zs-quota-fill { height:100%; background:var(--cyan); border-radius:2px; width:20%; }
.zs-quota-fill.warn { background:var(--orange); }
.zs-quota-fill.full { background:var(--orange); }
.zs-user-actions { display:flex; gap:6px; margin-top:2px; }
.zs-user-actions a {
    flex:1; text-align:center; padding:4px 0;
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase; border:1px solid var(--border);
    color:var(--grey); text-decoration:none; transition:all 0.15s;
}
.zs-user-actions a:hover { border-color:var(--cyan); color:var(--cyan); }
.zs-user-actions a.primary { background:var(--cyan); color:#000; border-color:var(--cyan); }
.zs-user-actions a.primary:hover { background:#00e5ff; }

/* Desktop panel slot */
#zs-desk-panel-slot { display:flex; align-items:stretch; }
#desk-user-panel,
#desk-guest-panel { display:none; }
#zs-desk-panel-slot #desk-user-panel,
#zs-desk-panel-slot #desk-guest-panel { display:flex; }

/* ════ PAGE SHELL ════ */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.page-wrap {
    max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px;
    display: none; flex-direction: column; gap: 16px;
}
.page-wrap.active { display: flex; }

/* ════ SECTION CARD ════ */
.sec-card { background:var(--card); border:1px solid var(--border); overflow:hidden; }
.sec-head {
    background: linear-gradient(90deg,#1a1a1e,#111113);
    border-left:3px solid var(--cyan); padding:7px 12px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--border);
}
.sec-head.orange { border-left-color:var(--orange); }
.sec-head.red    { border-left-color:var(--orange); }
.sec-head.green  { border-left-color:var(--green); }
.sec-head.pink   { border-left-color:var(--pink); }
.sec-head.purple { border-left-color:#a066ff; }
.sec-head-title {
    font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:1px; color:#fff; text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
}
.sec-head-title i { color:var(--cyan); font-size:11px; }
.sec-head.orange .sec-head-title i { color:var(--orange); }
.sec-head.red    .sec-head-title i { color:var(--red); }
.sec-head.green  .sec-head-title i { color:var(--green); }
.sec-head.pink   .sec-head-title i { color:var(--pink); }
.sec-head.purple .sec-head-title i { color:#a066ff; }
.sec-head-meta { font-size:11px; color:var(--dim); font-family:'Oswald',sans-serif; letter-spacing:0.5px; }

/* ════ LAYOUT GRIDS ════ */
.two-col      { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.three-col    { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.portal-layout { display:grid; grid-template-columns:1fr 300px; gap:16px; }
.forum-layout  { display:grid; grid-template-columns:1fr 260px; gap:16px; }
.portal-sidebar { display:flex; flex-direction:column; gap:16px; }

/* ════ PORTAL PAGE ════ */

/* News rows */
.news-row { display:flex; gap:0; border-bottom:1px solid var(--border2); transition:background .15s; cursor:pointer; }
.news-row:last-child { border-bottom:none; }
.news-row:hover { background:rgba(255,255,255,.015); }
.news-thumb { width:80px; flex-shrink:0; background:var(--card2); border-right:1px solid var(--border2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 8px; position:relative; }
.news-badge { position:absolute; top:6px; left:6px; font-size:8px; font-weight:700; letter-spacing:.5px; padding:2px 5px; text-transform:uppercase; }
.news-badge.update    { background:var(--orange); color:#000; }
.news-badge.guide     { background:#5588ff; color:#fff; }
.news-badge.new-badge { background:var(--green); color:#000; }
.news-thumb-icon { font-size:28px; color:var(--dim); }
.news-body { flex:1; padding:12px 16px; min-width:0; }
.news-title { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:#fff; margin-bottom:5px; line-height:1.3; transition:color .15s; }
.news-title:hover { color:var(--cyan); }
.news-desc { font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:8px; }
.news-meta { display:flex; gap:14px; font-size:11px; color:var(--dim); flex-wrap:wrap; }
.news-meta span { display:flex; align-items:center; gap:4px; }
.news-meta i { font-size:10px; }

/* App filter tabs */
.app-filter-tabs { display:flex; gap:6px; flex-wrap:nowrap; padding:10px 16px; justify-content:center; border-bottom:1px solid var(--border2); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.app-filter-tabs::-webkit-scrollbar { display:none; }
.app-tab { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--grey); cursor:pointer; border:1px solid var(--border); border-radius:5px; background:transparent; transition:all .15s; white-space:nowrap; flex-shrink:0; user-select:none; }
.app-tab i { font-size:10px; }
.app-tab:hover { color:var(--white); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.04); }
.app-tab.active { color:#000; background:var(--orange); border-color:var(--orange); box-shadow:0 0 10px rgba(255,136,0,.3); }

/* Staff picks banner (inside Latest Apps card) */
.staff-picks-wrap { margin:0; border-bottom:1px solid var(--border2); }
.staff-picks-label { padding:6px 14px 5px; display:flex; align-items:center; gap:7px; background:rgba(255,204,0,.04); border-bottom:1px solid var(--border2); }
.staff-picks-label i { color:var(--yellow); font-size:10px; }
.staff-picks-label span { font-family:'Oswald',sans-serif; font-size:9px; font-weight:700; color:var(--yellow); letter-spacing:2px; text-transform:uppercase; }
.staff-picks-label em { font-style:normal; font-size:10px; color:var(--dim); margin-left:2px; }

/* App grid v2 */
.app-grid2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--border2); }
.app-card2 { background:var(--card); padding:14px 16px; display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:12px; cursor:pointer; transition:background .15s; }
.app-card2:hover { background:rgba(0,204,255,.03); }
.app-card2-icon { width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; background:var(--card2); border:1px solid var(--border); }
.app-card2-icon img { width:32px; height:32px; object-fit:contain; }
.app-card2-info { min-width:0; }
.app-card2-name { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card2-bundle { font-size:10px; color:var(--cyan); margin-top:2px; font-family:'Courier New',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card2-ver { font-size:10px; color:var(--dim); margin-top:3px; }
.app-card2-dl { font-size:11px; color:var(--green); flex-shrink:0; display:flex; align-items:center; gap:4px; font-weight:600; white-space:nowrap; }
.app-card2-dl i { font-size:10px; }

/* Forum stats bar */
.fstats-bar { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border-top:1px solid var(--border2); }
.fstats-cell { padding:14px 18px; border-right:1px solid var(--border2); display:flex; flex-direction:column; gap:4px; }
.fstats-cell:last-child { border-right:none; }
.fstats-label { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); font-family:'Oswald',sans-serif; font-weight:600; }
.fstats-val { font-family:'Oswald',sans-serif; font-size:26px; font-weight:700; line-height:1; }
.fstats-val.cyan  { color:var(--cyan); }
.fstats-val.green { color:var(--green); }

/* Latest posts grid */
.lp-grid { display:grid; grid-template-columns:1fr 1fr; }
.lp-col { padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.lp-col:first-child { border-right:1px solid var(--border2); }
.lp-row { display:flex; align-items:flex-start; gap:8px; }
.lp-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.lp-info { flex:1; min-width:0; }
.lp-title { font-size:12px; font-weight:600; color:var(--grey); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s; }
.lp-title:hover { color:var(--cyan); }
.lp-meta { font-size:10px; color:var(--dim); margin-top:2px; display:flex; align-items:center; gap:4px; }

/* Trending */
.trending-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border2); font-size:12px; cursor:pointer; transition:background .15s; }
.trending-row:last-child { border-bottom:none; }
.trending-row:hover { background:rgba(255,255,255,.02); }
.trending-rank { font-family:'Oswald',sans-serif; font-size:20px; font-weight:700; color:var(--border); width:22px; flex-shrink:0; text-align:center; }
.trending-row:first-child .trending-rank { color:var(--yellow); }
.trending-row:nth-child(2) .trending-rank { color:var(--grey); }
.trending-row:nth-child(3) .trending-rank { color:var(--orange); }
.trending-icon { width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.trending-icon img { width:22px; height:22px; object-fit:contain; }
.trending-info { flex:1; }
.trending-name { font-weight:700; color:#fff; }
.trending-signs { font-size:11px; color:var(--dim); margin-top:1px; }

/* Recent activity */
.activity-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border2); font-size:12px; }
.activity-row:last-child { border-bottom:none; }
.activity-icon { width:26px; height:26px; border-radius:50%; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.activity-icon.sign { border-color:rgba(0,204,255,.3); color:var(--cyan); }
.activity-icon.user { border-color:rgba(0,204,85,.3); color:var(--green); }
.activity-icon.warn { border-color:rgba(255,136,0,.3); color:var(--orange); }
.activity-icon.up   { border-color:rgba(255,136,0,.3); color:var(--orange); }
.activity-text { flex:1; color:var(--grey); line-height:1.4; }
.activity-text strong { color:var(--white); }
.activity-time { color:var(--dim); font-size:10px; flex-shrink:0; }

/* Online users */
.online-list { display:flex; flex-wrap:wrap; gap:4px; padding:12px; }
.online-tag { display:flex; align-items:center; gap:5px; padding:3px 8px; background:var(--card2); border:1px solid var(--border); font-size:11px; color:var(--grey); border-radius:2px; cursor:default; transition:all .15s; }
.online-tag:hover { border-color:var(--cyan); color:var(--cyan); }
.online-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }
.online-dot.away { background:var(--orange); }
.online-dot.busy { background:var(--orange); }

/* ════ FORUM / BOARD STYLES ════ */
.board-cat-header { background:var(--card2); padding:6px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border2); }
.board-cat-name { font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
.board-row { display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border2); gap:12px; cursor:pointer; transition:background .15s; }
.board-row:last-child { border-bottom:none; }
.board-row:hover { background:rgba(255,255,255,.015); }
.board-icon { width:38px; height:38px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.board-icon.purple { background:rgba(160,102,255,.1); color:#a066ff; border:1px solid rgba(160,102,255,.2); }
.board-icon.cyan   { background:rgba(0,204,255,.08); color:var(--cyan); border:1px solid rgba(0,204,255,.15); }
.board-icon.orange { background:rgba(255,136,0,.08); color:var(--orange); border:1px solid rgba(255,136,0,.15); }
.board-icon.red    { background:rgba(204,0,0,.08); color:var(--red); border:1px solid rgba(204,0,0,.15); }
.board-icon.green  { background:rgba(0,204,85,.08); color:var(--green); border:1px solid rgba(0,204,85,.15); }
.board-icon.yellow { background:rgba(255,204,0,.08); color:var(--yellow); border:1px solid rgba(255,204,0,.15); }
.board-info { flex:1; min-width:0; }
.board-name { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:#fff; }
.board-desc { font-size:11px; color:var(--dim); margin-top:2px; }
.board-stats { display:flex; gap:18px; flex-shrink:0; text-align:center; }
.board-stat-num { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:var(--grey); line-height:1; }
.board-stat-lbl { font-size:10px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; }
.board-last { width:170px; flex-shrink:0; font-size:11px; color:var(--dim); }
.board-last-title { color:var(--grey); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-last-user  { color:var(--dim); margin-top:2px; }
.board-new-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0; box-shadow:0 0 4px var(--cyan); }
.board-last-av { width:20px; height:20px; border-radius:50%; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; }
.board-last-meta { display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; }
.board-unread { width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0; box-shadow:0 0 4px var(--cyan); }
.board-read { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.bs-num { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:var(--grey); line-height:1; }
.bs-lbl { font-size:10px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; }

/* Thread rows */
.thread-row { display:flex; align-items:center; padding:9px 14px; border-bottom:1px solid var(--border2); gap:10px; cursor:pointer; transition:background .15s; }
.thread-row:last-child { border-bottom:none; }
.thread-row:hover { background:rgba(255,255,255,.015); }
.thread-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; color:var(--dim); }
.thread-icon.new    { color:var(--cyan); }
.thread-icon.hot    { color:var(--orange); }
.thread-icon.pinned { color:var(--yellow); }
.thread-icon.locked { color:var(--dim); }
.thread-info { flex:1; min-width:0; }
.thread-title { font-size:13px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-title.read { color:var(--grey); font-weight:400; }
.thread-sub { font-size:11px; color:var(--dim); margin-top:2px; }
.thread-badge { font-size:9px; font-weight:700; padding:1px 5px; letter-spacing:.5px; text-transform:uppercase; border-radius:2px; flex-shrink:0; margin-left:6px; }
.tb-pin  { background:rgba(255,204,0,.12); color:var(--yellow); border:1px solid rgba(255,204,0,.25); }
.tb-hot  { background:rgba(255,136,0,.12); color:var(--orange); border:1px solid rgba(255,136,0,.25); }
.tb-new  { background:rgba(0,204,255,.1); color:var(--cyan); border:1px solid rgba(0,204,255,.2); }
.thread-stats { display:flex; gap:14px; flex-shrink:0; text-align:center; }
.ts-num { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:var(--dim); line-height:1; }
.ts-lbl { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; }
.thread-last { width:140px; flex-shrink:0; font-size:11px; }
.thread-last-user { color:var(--grey); font-weight:600; }
.thread-last-time { color:var(--dim); margin-top:2px; }

/* Forum sidebar */
.forum-sidebar { display:flex; flex-direction:column; gap:16px; }
.fstat-row { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-bottom:1px solid var(--border2); font-size:12px; }
.fstat-row:last-child { border-bottom:none; }
.fstat-label { color:var(--dim); }
.fstat-val   { font-weight:700; color:var(--white); }
.whos-online-list { padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.whos-row { display:flex; align-items:center; gap:7px; font-size:12px; }
.whos-av { width:22px; height:22px; border-radius:50%; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--dim); flex-shrink:0; }
.whos-name  { color:var(--grey); flex:1; }
.whos-where { color:var(--dim); font-size:10px; }

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; padding:10px 0; font-size:12px; color:var(--dim); flex-wrap:wrap; }
.breadcrumb a { color:var(--dim); transition:color .15s; }
.breadcrumb a:hover { color:var(--cyan); }
.breadcrumb i { font-size:9px; }

/* Animations */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ════ DESKTOP VISIBILITY ════ */
.zs-desktop-only { display:block; }
.zs-mobile-header { display:none; }

/* ════ RESPONSIVE ════ */
@media (max-width:768px) {
  .zs-desktop-only { display:none !important; }
  .zs-mobile-header { display:block; background:var(--mid); border-bottom:2px solid var(--orange); }

  .zs-mob-topbar { display:flex; align-items:stretch; height:46px; background:var(--mid); border-bottom:2px solid var(--orange); overflow:hidden; }
  .zs-mob-logo { font-family:'Oswald',sans-serif; font-size:20px; font-weight:900; letter-spacing:3px; color:#fff; text-decoration:none; display:flex; align-items:center; padding:0 12px; flex-shrink:0; border-right:1px solid #111; }
  .zs-mob-mainnav { display:flex; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; flex:1; min-width:0; }
  .zs-mob-mainnav::-webkit-scrollbar { display:none; }
  .zs-mob-mainnav a { display:inline-flex; align-items:center; justify-content:center; padding:0 12px; height:46px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; text-decoration:none; border-right:1px solid #111; transition:background .15s; }
  .zs-mob-mainnav a:hover,.zs-mob-mainnav a.active { background:rgba(255,255,255,.05); }
  .zs-mob-mainnav a.portal  { color:var(--cyan); }
  .zs-mob-mainnav a.forum   { color:#a066ff; }
  .zs-mob-mainnav a.credits { color:var(--orange); }
  .zs-mob-mainnav a.upgrade { color:var(--green); }
  .zs-mob-mainnav a.regs    { color:var(--orange); }
  .zs-mob-mainnav a.faq     { color:var(--pink); }
  .zs-mob-topbar-right { display:flex; align-items:center; flex-shrink:0; border-left:1px solid #111; }
  .zs-mob-search-icon { background:transparent; border:none; color:#fff; font-size:16px; cursor:pointer; padding:0 12px; height:46px; border-right:1px solid #111; }
  .zs-mob-hamburger { background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer; padding:0 12px; height:46px; line-height:1; }
  .zs-mob-search { display:none; border-bottom:1px solid var(--border2); }
  .zs-mob-search.open { display:flex; }
  .zs-mob-search input { flex:1; background:var(--bg); border:none; color:#fff; padding:0 14px; font-size:13px; height:40px; outline:none; font-family:inherit; }
  .zs-mob-search input::placeholder { color:#555; }
  .zs-mob-search button { background:var(--orange); border:none; color:#fff; padding:0 16px; height:40px; cursor:pointer; font-size:15px; flex-shrink:0; }
  .zs-mob-subnav { display:flex; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 4px; border-bottom:1px solid var(--border2); background:var(--bg); }
  .zs-mob-subnav::-webkit-scrollbar { display:none; }
  .zs-mob-subnav a { display:inline-flex; align-items:center; gap:4px; padding:8px 10px; font-size:12px; font-weight:600; white-space:nowrap; flex-shrink:0; color:var(--grey); text-decoration:none; transition:color .15s; font-family:inherit; }
  .zs-mob-subnav a:hover { color:#fff; }
  .zs-mob-userband { display:flex; align-items:center; padding:10px 14px 6px; gap:10px; background:var(--mid); }
  .zs-mob-av { width:42px; height:42px; border-radius:50%; flex-shrink:0; border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; color:var(--orange); cursor:pointer; background:rgba(255,136,0,.1); }
  .zs-mob-userinfo { display:flex; flex-direction:column; flex-shrink:0; }
  .zs-mob-username { font-family:'Oswald',sans-serif; font-size:17px; font-weight:700; color:#fff; cursor:pointer; line-height:1.15; }
  .zs-mob-userrole { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
  .zs-mob-quota-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
  .zs-mob-quota-labels { display:flex; align-items:center; justify-content:space-between; width:130px; font-size:10px; color:var(--grey); }
  .zs-mob-quota-bar { width:130px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
  .zs-mob-quota-fill { height:100%; background:var(--cyan); border-radius:2px; }
  .zs-mob-actions { display:flex; width:100%; border-top:1px solid var(--border2); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--mid); }
  .zs-mob-actions::-webkit-scrollbar { display:none; }
  .zs-mob-btn { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:10px 8px; white-space:nowrap; font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--grey); text-decoration:none; border-right:1px solid var(--border2); background:transparent; transition:all .15s; }
  .zs-mob-btn:last-child { border-right:none; }
  .zs-mob-btn:hover { color:#fff; background:rgba(255,255,255,.04); }
  .zs-mob-btn-primary { background:rgba(0,204,255,.12); color:var(--cyan) !important; border-color:rgba(0,204,255,.25) !important; font-weight:700; }
  .zs-mob-btn-primary:hover { background:rgba(0,204,255,.2); }
  .zs-mob-btn-orange { color:var(--orange) !important; }
  .zs-mob-btn-red    { color:#ff5555 !important; }
  .zs-mob-btn-icon   { flex:0 0 auto; padding:10px 14px; position:relative; }
  .zs-mob-badge-inline { position:absolute; top:5px; right:3px; background:var(--orange); color:#000; font-size:8px; font-weight:800; padding:1px 4px; border-radius:8px; line-height:1.3; font-family:'Oswald',sans-serif; }

  /* Layout */
  .two-col,.three-col,.portal-layout,.forum-layout { grid-template-columns:1fr; }
  .app-grid2 { grid-template-columns:1fr; }
  .app-card2 { grid-template-columns:44px 1fr auto; gap:10px; }
  .app-card2-icon { width:44px; height:44px; border-radius:10px; }
  .news-thumb { width:60px; }
  .news-body { padding:10px 12px; }
  .news-title { font-size:13px; }
  .news-desc { display:none; }
  .fstats-bar { grid-template-columns:1fr 1fr; }
  .fstats-val { font-size:20px; }
  .fstats-cell { padding:10px 12px; }
  .lp-grid { grid-template-columns:1fr; }
  .lp-col:first-child { border-right:none; border-bottom:1px solid var(--border2); }
  .app-filter-tabs { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:8px 10px; }
  .app-tab { flex-shrink:0; min-height:36px; }
  .page-wrap { padding:10px 10px 40px; gap:10px; }
}

@media (max-width:480px) {
  .zs-user-actions a { font-size:9px; }
  .zs-subnav a { padding:8px 11px; font-size:11px; }
  .app-card2 { grid-template-columns:40px 1fr; }
  .app-card2-dl { display:none; }
  .fstats-bar { grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════
   NEWS PLUGIN — Add to bottom of portal.css
════════════════════════════════════════════ */

/* Pagination buttons */
.pg-btn {
    width:28px; height:28px; background:var(--card2); border:1px solid var(--border);
    color:var(--grey); font-family:'Oswald',sans-serif; font-size:12px;
    cursor:pointer; transition:all .15s;
}
.pg-btn:hover  { border-color:var(--cyan); color:var(--cyan); }
.pg-btn.active { background:var(--orange); border-color:var(--orange); color:#000; font-weight:700; }

/* News list rows (.nl-row) — used on allnews page */
.nl-row { display:flex; gap:0; border-bottom:1px solid var(--border2); transition:background .15s; }
.nl-row:hover { background:rgba(255,255,255,.015); }
.nl-row:last-of-type { border-bottom:none; }
.nl-thumb { width:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--border2); }
.nl-body { flex:1; padding:14px 18px; min-width:0; }
.nl-meta-top { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.nl-date { font-size:11px; color:var(--dim); display:flex; align-items:center; gap:4px; }
.nl-title { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:#fff; line-height:1.3; margin-bottom:6px; transition:color .15s; }
.nl-row:hover .nl-title { color:var(--cyan); }
.nl-excerpt { font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:10px; }
.nl-footer { display:flex; align-items:center; gap:14px; font-size:11px; color:var(--dim); }
.nl-author { display:flex; align-items:center; gap:4px; }
.nl-stat { display:flex; align-items:center; gap:4px; }
.nl-tag { font-size:9px; font-weight:700; padding:2px 6px; letter-spacing:.5px; text-transform:uppercase; border-radius:2px; flex-shrink:0; }
.nl-tag.update   { background:rgba(255,136,0,.15); color:var(--orange); border:1px solid rgba(255,136,0,.3); }
.nl-tag.guide    { background:rgba(0,204,255,.1);  color:var(--cyan);   border:1px solid rgba(0,204,255,.2); }
.nl-tag.release  { background:rgba(0,204,85,.12);  color:var(--green);  border:1px solid rgba(0,204,85,.25); }
.nl-tag.announce { background:rgba(255,204,0,.1);  color:var(--yellow); border:1px solid rgba(255,204,0,.25); }

/* Article comments */
.comment-row { display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border2); align-items:flex-start; }
.comment-row:last-of-type { border-bottom:none; }
.cm-av { width:36px; height:36px; border-radius:50%; background:var(--card2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:11px; font-weight:700; color:var(--dim); flex-shrink:0; }
.cm-body { flex:1; min-width:0; }
.cm-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.cm-name { font-size:13px; font-weight:700; color:#fff; }
.cm-role { font-size:9px; font-weight:700; padding:1px 5px; border-radius:2px; text-transform:uppercase; letter-spacing:.5px; }
.cm-role.dev     { background:rgba(0,204,255,.1); color:var(--cyan); border:1px solid rgba(0,204,255,.2); }
.cm-role.encoder { background:rgba(255,204,0,.1); color:var(--yellow); border:1px solid rgba(255,204,0,.2); }
.cm-time { font-size:10px; color:var(--dim); margin-left:auto; }
.cm-text { font-size:13px; color:var(--grey); line-height:1.7; margin-bottom:8px; }
.cm-actions { display:flex; gap:14px; font-size:11px; color:var(--dim); }
.cm-actions span { display:flex; align-items:center; gap:4px; cursor:pointer; transition:color .15s; }
.cm-actions span:hover { color:var(--cyan); }

/* Page banner (allnews header) */
.page-banner { border-left:4px solid var(--cyan); background:linear-gradient(90deg,rgba(0,204,255,.06) 0%,transparent 60%); padding:18px 24px; display:flex; align-items:center; gap:20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.page-banner-icon { font-size:36px; color:var(--cyan); flex-shrink:0; }
.page-banner-text h2 { font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; color:#fff; letter-spacing:1px; margin-bottom:4px; text-transform:uppercase; }
.page-banner-text p { font-size:13px; color:var(--grey); }

/* Donor tag (used for article/news tags) */
.donor-tag { padding:4px 12px; border:1px solid var(--border); font-size:12px; color:var(--grey); background:var(--card2); border-radius:2px; transition:all .15s; cursor:default; }
.donor-tag:hover { border-color:var(--cyan); color:var(--cyan); }

/* Mobile */
@media(max-width:768px) {
    .nl-thumb { width:54px; }
    .nl-body { padding:10px 12px; }
    .nl-title { font-size:14px; }
    .nl-excerpt { display:none; }
    .page-banner { padding:12px 14px; gap:10px; }
    .page-banner-icon { font-size:22px; }
    .page-banner-text h2 { font-size:16px; }
}