:root{
  --panel-w: 280px;
  --accent: #9c4af4;
  --muted: #6b7280;
  --bg: #0f172a;
  --card: #0b1220;
  --glass: rgba(255,255,255,0.03);
  --text: #e6eef8;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--text);background:linear-gradient(180deg,#071021 0%, #071022 60%);}

.panel{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--panel-w);
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-right:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.brand{text-align:center}
.author-photo{width:110px;height:110px;border-radius:8px;object-fit:cover;display:block;margin:0 auto 10px}
.author-name{font-size:20px;margin:0}
.author-role{text-align: left;margin:6px 0 0;color:var(--muted);font-size:13px}

.nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nav-btn{
  background:transparent;border:0;color:var(--text);text-align:left;padding:12px;border-radius:8px;font-size:15px;cursor:pointer;
}
.nav-btn:hover{background:var(--glass)}
.nav-btn.active{background:linear-gradient(90deg, rgba(156,74,244,0.12), rgba(156,74,244,0.04));box-shadow:0 4px 12px rgba(156,74,244,0.06)}

.panel-footer{margin-top:auto;text-align:center;color:var(--muted);font-size:12px}

.app{
  margin-left:var(--panel-w);
  padding:36px;
  min-height:100vh;
}

/* layout sections */
.container{max-width:1100px;margin:0 auto}
.section{margin-bottom:28px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.title{font-size:20px;margin:0}
.small{color:var(--muted);font-size:13px}

/* cards */
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.025);
}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:13px}
.card .meta{font-size:12px;color:var(--muted);margin-top:8px}

/* big feature (blog main) */
.feature{
  display:flex;gap:18px;align-items:stretch;background:linear-gradient(90deg, rgba(156,74,244,0.06), rgba(0,0,0,0.02));padding:20px;border-radius:12px;
}
.feature .content{flex:1}
.feature img{width:300px;height:200px;object-fit:cover;border-radius:8px}

/* simple controls */
.controls{display:flex;gap:10px;align-items:center}
.input,select{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.btn{padding:10px 14px;border-radius:8px;border:0;background:var(--accent);color:white;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.7);z-index:50}
.hidden{display:none}
.modal-content{background:#081226;padding:18px;border-radius:10px;max-width:820px;width:100%;position:relative}
.modal-close{position:absolute;right:12px;top:12px;border-radius:6px;border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}

/* responsiveness */
@media(max-width:900px){
  :root{--panel-w:72px}
  .panel{width:72px;padding:18px}
  .author-photo,.author-name,.author-role{display:none}
  .app{margin-left:72px;padding:20px}
  .feature img{display:none}
  .header-row{flex-direction:column;align-items:flex-start}
}