:root{--bg:#07070b;--panel:#101018;--panel2:#151521;--text:#f6f5fb;--muted:#9b98aa;--purple:#8b5cf6;--purple2:#c026d3;--border:#29263a}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 50% -20%,#23103b 0,#0b0910 35%,#07070b 70%);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}.sv-wrap{width:min(1180px,calc(100% - 32px));margin:auto}.sv-nav{height:70px;border-bottom:1px solid var(--border);display:flex;align-items:center;background:rgba(7,7,11,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.sv-nav .sv-wrap{display:flex;align-items:center;gap:24px}.sv-brand{font-weight:950;letter-spacing:-1px;font-size:22px}.sv-brand span{color:#a855f7}.sv-navlinks{display:flex;gap:18px;color:#aaa6b8;font-size:12px;font-weight:800}.sv-actions{margin-left:auto;display:flex;gap:8px}.sv-btn{border:1px solid #3a3350;background:#15131e;color:white;border-radius:9px;padding:10px 14px;font-weight:850;cursor:pointer}.sv-btn.primary{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#9b6cff}.sv-btn.small{padding:7px 10px;font-size:11px}
.hero{padding:58px 0 28px;text-align:center}.eyebrow{color:#a78bfa;font-size:11px;font-weight:950;letter-spacing:2px}.hero h1{font-size:clamp(38px,6vw,70px);margin:8px 0 12px;letter-spacing:-3px}.hero p{color:var(--muted);max-width:700px;margin:auto;line-height:1.6}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:24px 0}.tabs,.cats{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:#0e0d14;color:#a7a3b3;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:850;cursor:pointer}.chip.active{background:#2c1745;color:#d8b4fe;border-color:#6d3a9c}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:70px}.card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#13121b,#0c0b11);min-height:330px;display:flex;flex-direction:column}.cover{height:160px;background:linear-gradient(135deg,#27113e,#0e1728 55%,#401457);position:relative}.cover:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(168,85,247,.4),transparent 35%)}
.cardbody{padding:16px;display:flex;flex-direction:column;flex:1}.label{color:#c084fc;font-size:10px;font-weight:950;letter-spacing:1.2px}.card h3{font-size:19px;margin:7px 0}.summary{color:#a5a1b0;font-size:12px;line-height:1.5}.meta{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:16px;color:#817d8e;font-size:10px}.empty{grid-column:1/-1;text-align:center;border:1px dashed var(--border);padding:60px;border-radius:16px;color:var(--muted)}
.editor{width:min(900px,calc(100% - 32px));margin:36px auto 80px}.panel{border:1px solid var(--border);background:#0e0d14;border-radius:16px;padding:22px}.panel h1{margin-top:0}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:10px;color:#aaa6b8;font-weight:900;letter-spacing:1px}.field input,.field select,.field textarea{width:100%;border:1px solid #302d3d;background:#09090e;color:white;border-radius:9px;padding:12px;font:inherit}.field textarea{min-height:330px;resize:vertical;line-height:1.6}.counter{text-align:right;color:#777383;font-size:10px}
.article{width:min(850px,calc(100% - 32px));margin:42px auto 90px}.article .crumb{color:#8f8a9d;font-size:11px}.article h1{font-size:clamp(36px,6vw,62px);line-height:1.02;letter-spacing:-2.5px;margin:18px 0 12px}.article-summary{font-size:18px;color:#aaa6b8;line-height:1.6}.article-meta{display:flex;gap:12px;flex-wrap:wrap;color:#888394;font-size:11px;border-bottom:1px solid var(--border);padding:18px 0}.article-content{font-size:16px;line-height:1.8;color:#d8d5df;padding-top:25px;white-space:pre-wrap}.article-actions{display:flex;gap:8px;margin-top:28px}
@media(max-width:760px){.sv-navlinks{display:none}.sv-wrap{width:min(100% - 20px,1180px)}.sv-nav{height:58px}.sv-brand{font-size:18px}.hero{padding:34px 0 18px}.hero h1{font-size:39px;letter-spacing:-2px}.grid{grid-template-columns:1fr}.cover{height:135px}.toolbar{margin:15px 0}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.editor{margin-top:18px}.panel{padding:15px}.article{margin-top:25px}.article h1{font-size:38px}}

/* StateVault Articles top navigation/filter polish */
.article-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 24px;
}
.article-topbar .toolbar{
  margin:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.article-topbar .tabs,.article-topbar .cats{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.article-topbar .chip{
  appearance:none;
  -webkit-appearance:none;
  background:#0e0d14 !important;
  color:#aaa6b8 !important;
  border:1px solid #29263a !important;
  box-shadow:none !important;
}
.article-topbar .chip:hover{
  background:#17131f !important;
  color:#eee9f7 !important;
  border-color:#4b3b63 !important;
}
.article-topbar .chip.active{
  background:#2c1745 !important;
  color:#e9d5ff !important;
  border-color:#7541a6 !important;
}
.moderator-link{
  flex:0 0 auto;
  white-space:nowrap;
  background:#17111f !important;
  border-color:#5b3677 !important;
  color:#d8b4fe !important;
}
.moderator-link[hidden]{display:none !important}
@media(max-width:760px){
  .article-topbar{display:block;margin-top:14px}
  .article-topbar .toolbar{display:block}
  .article-topbar .tabs,.article-topbar .cats{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:7px;
  }
  .article-topbar .tabs::-webkit-scrollbar,.article-topbar .cats::-webkit-scrollbar{display:none}
  .article-topbar .cats{margin-top:6px}
  .article-topbar .chip{flex:0 0 auto}
  .moderator-link{display:inline-flex;margin-top:6px}
}

.review-hero{padding:38px 0 18px}.review-hero h1{margin:7px 0;font-size:42px}.review-hero p{color:var(--muted)}
.review-main{padding-bottom:70px}.review-tabs{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:12px 0 16px}
.review-tabs .chip{background:#0e0d14 !important;color:#aaa6b8 !important;border:1px solid #29263a !important}
.review-tabs .chip.active{background:#2c1745 !important;color:#e9d5ff !important;border-color:#7541a6 !important}
.review-message{color:#8f8a9d;font-size:12px;margin:10px 0 14px}.review-grid{display:grid;gap:14px}
.review-card{border:1px solid #29263a;background:#0e0d14;border-radius:14px;overflow:hidden}.review-cover{width:100%;max-height:260px;object-fit:cover}
.review-card-body{padding:18px}.review-card h2{margin:7px 0}.review-card p{color:#aaa6b8}.review-card details{border-top:1px solid #29263a;margin-top:14px;padding-top:14px}
.review-card summary{cursor:pointer;color:#c4b5fd;font-weight:800}.review-content{padding:16px 0;line-height:1.7;color:#ddd9e4}.review-content img{max-width:100%;height:auto;border-radius:10px}
.review-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.sv-btn.danger{background:#261116;border-color:#68313d}.sv-btn.feature{background:#17111f;border-color:#55346f}
@media(max-width:760px){.review-tabs{flex-wrap:nowrap;overflow-x:auto}.review-tabs .chip{flex:0 0 auto}.review-hero h1{font-size:34px}}

/* 2026-09-05 article UX update */
.compact-filter-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 0 7px;
}
.compact-filter-row::-webkit-scrollbar{display:none}
.compact-filter-row .tabs,
.compact-filter-row .cats{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:5px !important;
  flex:0 0 auto;
}
.compact-filter-row .chip{
  flex:0 0 auto;
  padding:5px 8px !important;
  min-height:25px !important;
  border-radius:7px !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.15px !important;
  font-weight:800 !important;
  white-space:nowrap;
}
.article-topbar{align-items:center !important}
.article-topbar .toolbar{min-width:0;flex:1}
.article-card-cover{height:165px;overflow:hidden;background:linear-gradient(135deg,#27113e,#0e1728 55%,#401457)}
.article-card-cover img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.article-card-cover:after{pointer-events:none}
.article-main-image{width:100%;max-height:460px;object-fit:cover;display:block;border-radius:15px;margin-top:24px;border:1px solid #29263a}
.article-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.article-head-row .eyebrow{margin:0}
.article-edit-btn{flex:0 0 auto}
.article-content{white-space:normal !important}
.article-content img{max-width:100%;height:auto;display:block;margin:20px auto;border-radius:12px}
.article-content h2,.article-content h3{color:#f6f5fb;line-height:1.2}
.article-content p{margin:0 0 1em}
@media(max-width:760px){
  .article-topbar{display:block}
  .compact-filter-row{width:100%;padding-bottom:8px}
  .compact-filter-row .chip{padding:5px 7px !important;font-size:8px !important}
  .moderator-link{margin-top:5px}
  .article-head-row{align-items:flex-start}
  .article-edit-btn{font-size:10px}
}

/* Rich article body rendering */
.article-content{white-space:normal !important;overflow-wrap:anywhere}
.article-content p,.article-content div{white-space:normal}
.article-content ul,.article-content ol{padding-left:24px;margin:14px 0}
.article-content blockquote{margin:18px 0;padding:10px 16px;border-left:3px solid #7541a6}
.article-content img{max-width:100% !important;height:auto !important;display:block;margin:20px auto;border-radius:12px}

/* Published article layout — centered */
.article-page,.article-detail,.article-shell,.article-view{
  width:min(920px,calc(100% - 32px));
  margin-left:auto !important;
  margin-right:auto !important;
}
.article-head,.article-header,.article-content,.article-main-image,.article-meta,.article-actions{
  margin-left:auto;
  margin-right:auto;
}
.article-content{
  width:100%;
  max-width:820px;
}
.article-content img{
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.category-only-row{
  justify-content:center;
}
.category-only-row .cats{
  justify-content:center;
}
@media(max-width:760px){
  .article-page,.article-detail,.article-shell,.article-view{width:min(100% - 20px,920px)}
  .category-only-row,.category-only-row .cats{justify-content:flex-start}
}

/* 2026-09-07 article cover hero */
.article-cover-hero{
  position:relative;
  overflow:hidden;
  margin:18px 0 0;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(135deg,#17111f,#0c0b11);
  isolation:isolate;
}
.article-cover-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--article-cover);
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.02);
}
.article-cover-hero.has-cover::before{opacity:.42}
.article-cover-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(7,7,11,.94) 0%,rgba(7,7,11,.78) 58%,rgba(7,7,11,.68) 100%),linear-gradient(0deg,rgba(7,7,11,.88),rgba(7,7,11,.25));
}
.article-cover-hero-inner{padding:30px 32px 26px}
.article-cover-hero .article-head-row{margin-top:0}
.article-cover-hero h1{margin-top:16px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.article-cover-hero .article-summary{max-width:720px;color:#d0ccd8;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.article-cover-hero .article-meta{border-bottom:0;padding-bottom:0;color:#aaa5b3}
.article-cover-hero + .article-content{padding-top:30px}
@media(max-width:760px){
  .article-cover-hero{border-radius:14px;margin-top:14px}
  .article-cover-hero-inner{padding:22px 18px 20px}
  .article-cover-hero h1{font-size:36px;letter-spacing:-2px}
  .article-cover-hero .article-summary{font-size:15px;line-height:1.55}
  .article-cover-hero.has-cover::before{opacity:.34}
}

/* Launch Fix 05 — article author/date metadata + post button */
.post-article-btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:6px 10px !important;
  font-size:10px !important;
  border-color:#51376c !important;
  background:#15101d !important;
  color:#e6d5ff !important;
}
.article-card-author{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  color:#b9b3c5;
  font-weight:800;
}
.article-card-author img{
  width:18px;
  height:18px;
  flex:0 0 18px;
  object-fit:cover;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b0a0f;
}
.article-card-author span{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.meta-sep,.meta-featured{flex:0 0 auto}
@media(max-width:760px){
  .article-topbar{display:flex !important;align-items:flex-start !important;gap:8px}
  .article-topbar .toolbar{min-width:0;flex:1}
  .post-article-btn{margin-top:0 !important}
  .article-card-author span{max-width:145px}
}