:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --panel-2:#101010;
  --text-main:#e8e8e8;
  --text-muted:#a8a8a8;
  --accent:#d64949;
  --accent-2:#8f2b2b;
  --border:#222;
  --shadow: 0 16px 40px rgba(0,0,0,.55);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text-main);
}

/* Layout */
.pj-app{min-height:100vh; display:flex; align-items:stretch}
.pj-sidebar{
  width:280px;
  flex:0 0 280px;
  background:linear-gradient(180deg, #090909, #050505);
  border-right:1px solid var(--border);
  padding:1.4rem 1.2rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.pj-main{
  flex:1;
  padding:1.6rem 2rem;
  min-width:0;
}

/* Brand */
.pj-brand{padding:.6rem .3rem 1.1rem .3rem}
.pj-brand-kicker{
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:.9;
}
.pj-brand-name{
  margin-top:.35rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1.25rem;
  line-height:1.05;
}
.pj-brand-name span{color:var(--accent)}
.pj-brand-sub{
  margin-top:.55rem;
  color:var(--text-muted);
  font-size:.9rem;
  line-height:1.35;
}

/* Nav */
.pj-nav-block{margin-top:.75rem}
.pj-nav-title{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:.9rem .3rem .6rem;
}
.pj-nav a{
  display:block;
  padding:.62rem .8rem;
  margin:.12rem 0;
  border-radius:12px;
  color:var(--text-main);
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
}
.pj-nav a:hover{
  background:#0f0f0f;
  border-color:#1c1c1c;
}
.pj-nav a.active{
  background:rgba(214,73,73,.14);
  border-color:rgba(214,73,73,.45);
  color:var(--text-main);
}

/* Sidebar footer */
.pj-sidebar-footer{
  margin-top:1.25rem;
  padding:1rem .8rem;
  border:1px solid var(--border);
  background:#080808;
  border-radius:var(--radius);
  color:var(--text-muted);
  font-size:.82rem;
  line-height:1.6;
}

/* Topbar */
.pj-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #0b0b0b, #070707);
  box-shadow:var(--shadow);
}
.pj-title{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.pj-subtitle{
  margin-top:.35rem;
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.35;
  max-width:760px;
}
.pj-controls{display:flex; gap:.6rem; align-items:center}
.pj-btn{
  padding:.7rem 1rem;
  border-radius:12px;
  border:1px solid rgba(214,73,73,.55);
  background:rgba(214,73,73,.12);
  color:var(--text-main);
  cursor:pointer;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem;
}
.pj-btn:hover{background:rgba(214,73,73,.18)}

/* Grid */
.pj-grid{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.15rem;
}
.pj-empty{
  margin-top:1.25rem;
  padding:1rem 1.15rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#080808;
  color:var(--text-muted);
}

/* Cards */
.pj-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, #0b0b0b, #070707);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:380px;
}
.pj-card-img{
  height:160px;
  background-size:cover;
  background-position:center;
  background-color:#0c0c0c;
  border-bottom:1px solid var(--border);
}
.pj-card-body{
  padding:1rem 1.05rem 1.05rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.pj-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.6rem;
}
.pj-tag{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(214,73,73,.45);
  background:rgba(214,73,73,.10);
}
.pj-source{
  color:var(--text-muted);
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55%;
}
.pj-card-title{
  margin:.15rem 0 .55rem 0;
  font-size:1.05rem;
  line-height:1.25;
}
.pj-card-title a{
  color:var(--text-main);
  text-decoration:none;
}
.pj-card-title a:hover{color:var(--accent)}
.pj-snippet{
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.45;
  flex:1;
}
.pj-footer{
  margin-top:.85rem;
  padding-top:.85rem;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  color:var(--text-muted);
  font-size:.82rem;
}
.pj-footer a{
  color:var(--text-main);
  text-decoration:none;
  padding:.35rem .6rem;
  border:1px solid #1f1f1f;
  border-radius:10px;
  background:#0c0c0c;
}
.pj-footer a:hover{border-color:rgba(214,73,73,.45)}

/* Page template support (your block, kept) */
.pj-page{max-width:980px}
.pj-page-title{
  margin:0 0 1rem 0;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.25rem;
}
.pj-page-content{
  padding:1rem 1.2rem;
  background:#0b0b0b;
  border:1px solid #222;
  border-radius:6px;
}

.pj-form-wrap{max-width:980px}
.pj-note{
  margin:0 0 1rem 0;
  padding:12px 14px;
  border:1px solid #222;
  background:#050505;
  border-radius:6px;
  color:var(--text-muted);
}
.pj-submit-form input[type="text"],
.pj-submit-form select,
.pj-submit-form textarea{
  width:100%;
  padding:10px;
  background:#050505;
  border:1px solid #222;
  border-radius:6px;
  color:var(--text-main);
  font-family:inherit;
}
.pj-submit-form textarea{min-height:220px}
.pj-submit-form fieldset{
  border:1px solid #222;
  border-radius:6px;
  padding:12px;
  margin:12px 0;
}
.pj-submit-form button{
  padding:12px 18px;
  border-radius:6px;
  border:1px solid #222;
  background:#111;
  color:var(--text-main);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.8rem;
}
.pj-submit-form button:hover{border-color:var(--accent)}

/* Responsive */
@media (max-width: 1100px){
  .pj-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .pj-main{padding:1.25rem 1.2rem}
}
@media (max-width: 860px){
  .pj-app{display:block}
  .pj-sidebar{
    position:relative;
    height:auto;
    width:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .pj-main{padding:1rem}
  .pj-topbar{flex-direction:column; align-items:stretch}
  .pj-grid{grid-template-columns:1fr}
  .pj-source{max-width:65%}
}