:root{
  --bg: #0e0f12; --panel:#16181d; --text:#e7e8ea; --muted:#9aa0a6; --accent:#CC5500; --border:#262a33;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:280px; background:var(--panel); border-right:1px solid var(--border);
  padding:24px; overflow:auto;
}

.brand {
    text-align: center;
}

.brand h1 {
    margin:0; font-size:20px
}
.brand .tagline {
    margin: -8px 0 16px 0;
    color:var(--muted);
    font-size:13px
}
.photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 500px;
    object-fit: cover;
    margin-bottom: 1em;
}
.sidebar nav ul{list-style:none; padding:0; margin:12px 0 0 0}
.sidebar nav li{margin:8px 0}
.sidebar footer{position:sticky; bottom:0; padding-top:16px; color:var(--muted); font-size:12px; background:linear-gradient(to top, var(--panel), transparent);}

.content{
  margin-left:280px; padding:32px; max-width:900px;
}
.post{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; margin:0 0 16px 0;}
.post-title{margin:0 0 4px 0; font-size:20px}
.post-meta{color:var(--muted); font-size:12px; margin-bottom:12px}
.post-body p{margin:12px 0}
code{background:#1e2430; padding:2px 6px; border-radius:4px}
.sc-embed iframe{border-radius:10px; overflow:hidden}
.notice{background:#1e2a1f; border:1px solid #2d3a2a; color:#c9f7c0; padding:8px 12px; border-radius:8px}

.admin-login .login-card{
  width:320px; margin:15vh auto; background:var(--panel); padding:20px; border:1px solid var(--border); border-radius:12px;
}
.admin .card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; margin:0 0 16px 0;}
label{display:block; margin:10px 0 6px 0; color:var(--muted)}
input[type=text], input[type=url], input[type=password], textarea{
  width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background:#111317; color:var(--text);
}
button{background:var(--accent); color:#0b1115; border:0; padding:10px 14px; border-radius:8px; font-weight:600; cursor:pointer}
button:hover{opacity:.95}
.postlist{list-style:none; padding:0; margin:0}
.postlist li{padding:8px 0; border-bottom:1px dashed var(--border)}

@media (max-width: 800px){
  .sidebar{
    position:static; width:auto; padding:16px;
    border-right:none; border-bottom:1px solid var(--border);
    display:grid; gap:12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items:center;
  }
  .profile img{ max-width:100%; height:auto; border-radius:12px; display:block; }
  .sidebar .photo img {
      max-height: 200px;
  }
  .content{ margin-left:0; padding:16px; }
  
  .sidebar > .text {
      grid-column: 1 / -1;
  }
  
  .sidebar > footer {
      grid-column: 1 / -1;     /* full width across the grid */
      position: static;         /* override desktop sticky */
      background: none;         /* remove gradient bar on mobile */
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--muted);
    }
}