@font-face{
  font-family:'HeadingNow';
  src:url('https://rosshq.mcsite.ws/..rosshq/fonts/headingnow.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --bg:#0b0b0e; --bg-elevated:#131317; --bg-tile:#141418;
  --line:rgba(255,255,255,.08);
  --text:#f5f4f2; --muted:#98968f; --muted-dim:#5c5a56;
  --accent-1:#9583b3; --accent-2:#3a2c52;
  --accent-gradient:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --accent-glow:rgba(149,131,179,.35);
  --sidebar-w:250px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
html,body{
  margin:0; padding:0; min-height:100vh; width:100%;
  background:var(--bg); color:var(--text); font-family:'Inter', sans-serif;
}
::selection{ background:var(--accent-1); color:#0b0b0e; }
a{ color:inherit; }
button, input, textarea, select{ font-family:inherit; }

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw; border-bottom:1px solid var(--line);
  background:rgba(11,11,14,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  flex-wrap:wrap; gap:12px;
}
.brand{
  font-family:'HeadingNow', sans-serif; font-weight:400; letter-spacing:.03em;
  font-size:19px; text-transform:uppercase; color:var(--text); text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.brand-line{ width:22px; height:3px; border-radius:2px; background:var(--accent-gradient); display:inline-block; }
.topbar-tagline{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase;
}
.topbar-nav{ display:flex; gap:10px; flex-wrap:wrap; }
.topbar-link{
  font-family:'Inter', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text); text-decoration:none;
  padding:9px 16px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04);
  transition:background .18s ease, border-color .18s ease;
}
.topbar-link:hover{ background:rgba(255,255,255,.1); border-color:var(--accent-1); }
.topbar-link.active{ background:var(--accent-gradient); color:#0b0b0e; border-color:transparent; }

.page-wrap{ max-width:1000px; margin:0 auto; padding:44px 6vw 90px; }

/* ---------- PAGE HEADER ---------- */
.page-head{ margin-bottom:34px; }
.page-tag{
  font-family:'JetBrains Mono', monospace; font-weight:500; font-size:11px; letter-spacing:.2em;
  color:var(--muted); text-transform:uppercase; margin:0 0 12px;
  display:flex; align-items:center; gap:9px;
}
.page-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-gradient); }
.page-title{
  margin:0; font-family:'HeadingNow', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(30px, 5vw, 50px); line-height:1; letter-spacing:.01em;
}
.page-sub{ margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:560px; }

/* ---------- FORM ELEMENTS ---------- */
.field{ margin-bottom:20px; }
.field-label{
  display:block; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin-bottom:8px;
}
.field-input, .field-textarea, .field-select{
  width:100%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-family:'Inter', sans-serif; font-size:14px; padding:12px 14px;
  transition:border-color .15s ease;
}
.field-input:focus, .field-textarea:focus, .field-select:focus{
  outline:none; border-color:var(--accent-1);
}
.field-textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.field-row{ display:flex; gap:14px; flex-wrap:wrap; }
.field-row > .field{ flex:1; min-width:160px; }

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Inter', sans-serif; font-weight:700; font-size:13.5px;
  border:none; border-radius:8px; padding:12px 22px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; letter-spacing:.02em;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease, border-color .18s ease;
}
.btn:active{ transform:scale(.96); }
.btn.primary{ background:var(--accent-gradient); color:#f5f4f2; }
.btn.primary:hover{ box-shadow:0 12px 28px -8px var(--accent-glow); transform:translateY(-2px); }
.btn.secondary{ background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--line); }
.btn.secondary:hover{ background:rgba(255,255,255,.14); }
.btn.danger{ background:rgba(200,70,70,.14); color:#e08a8a; border:1px solid rgba(200,70,70,.3); }
.btn.danger:hover{ background:rgba(200,70,70,.24); }
.btn.small{ padding:8px 14px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }

/* ---------- BLOCK EDITOR ---------- */
.block-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.block-card{
  border:1px solid var(--line); border-radius:10px; background:var(--bg-elevated);
  padding:16px; position:relative;
}
.block-card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px;
}
.block-type-tag{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.12em;
  color:var(--accent-1); text-transform:uppercase; border:1px solid rgba(149,131,179,.4);
  border-radius:20px; padding:4px 11px; background:rgba(149,131,179,.08);
}
.block-card-actions{ display:flex; gap:6px; }
.icon-btn{
  width:30px; height:30px; border-radius:6px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,.14); border-color:var(--accent-1); }
.icon-btn svg{ width:14px; height:14px; }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.icon-btn:disabled:hover{ background:rgba(255,255,255,.06); border-color:var(--line); }

.add-block-bar{
  display:flex; gap:10px; flex-wrap:wrap; padding:18px; border:1px dashed var(--line);
  border-radius:10px; justify-content:center; margin-bottom:26px;
}
.add-block-btn{
  font-family:'Inter', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.02em;
  color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:8px; padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.add-block-btn:hover{ background:rgba(255,255,255,.12); border-color:var(--accent-1); }
.add-block-btn svg{ width:14px; height:14px; opacity:.8; }

.img-preview{
  max-width:100%; max-height:220px; border-radius:8px; display:block; margin-top:10px;
  border:1px solid var(--line); object-fit:cover;
}
.upload-drop{
  border:1px dashed var(--line); border-radius:8px; padding:22px; text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.upload-drop:hover{ border-color:var(--accent-1); background:rgba(255,255,255,.03); }
.upload-drop.dragover{ border-color:var(--accent-1); background:rgba(149,131,179,.08); }

/* ---------- ARCHIVE / MONTH-YEAR BROWSER ---------- */
.browser-grid{ display:grid; grid-template-columns:220px 1fr; gap:34px; }
@media (max-width:760px){ .browser-grid{ grid-template-columns:1fr; } }
.year-list{ display:flex; flex-direction:column; gap:4px; }
.year-btn{
  font-family:'HeadingNow', sans-serif; font-size:20px; text-transform:uppercase;
  color:var(--muted); background:none; border:none; text-align:left; cursor:pointer;
  padding:8px 0; border-bottom:1px solid var(--line); transition:color .15s ease;
}
.year-btn:hover, .year-btn.active{ color:var(--text); }
.year-btn.active{ color:var(--accent-1); }

.month-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px; margin-bottom:30px; }
.month-tile{
  border:1px solid var(--line); border-radius:10px; padding:16px 14px; background:var(--bg-elevated);
  cursor:pointer; transition:border-color .18s ease, transform .15s ease, background .18s ease;
  opacity:.4;
}
.month-tile.has-post{ opacity:1; }
.month-tile.has-post:hover{ border-color:var(--accent-1); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.month-tile:not(.has-post){ cursor:default; }
.month-name{
  font-family:'Inter', sans-serif; font-weight:700; font-size:13.5px; color:var(--text); display:block; margin-bottom:4px;
}
.month-count{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.08em; color:var(--muted-dim); text-transform:uppercase;
}

.post-list-item{
  display:block; border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  background:var(--bg-elevated); margin-bottom:12px; text-decoration:none; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.post-list-item:hover{ border-color:var(--accent-1); background:rgba(255,255,255,.06); }
.post-list-title{ font-family:'Inter', sans-serif; font-weight:700; font-size:15px; color:var(--text); margin:0 0 4px; }
.post-list-date{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.08em; color:var(--muted-dim); text-transform:uppercase; }

/* ---------- POST RENDER (display page) ---------- */
.post-render{ max-width:760px; margin:0 auto; }
.post-block{ margin:0 0 26px; }
.post-block h2, .post-block h3{
  font-family:'HeadingNow', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  line-height:1.15; margin:0 0 6px; color:var(--text);
}
.post-block h2{ font-size:clamp(22px,3.2vw,32px); }
.post-block p{ font-size:15px; line-height:1.7; color:var(--text); opacity:.9; margin:0; white-space:pre-wrap; }
.post-block img{ width:100%; border-radius:10px; display:block; border:1px solid var(--line); }
.post-block .block-btn-wrap{ display:flex; }
.post-block .block-btn{
  font-family:'Inter', sans-serif; font-weight:700; font-size:14px; text-decoration:none;
  border-radius:8px; padding:13px 24px; display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-gradient); color:#f5f4f2;
  transition:transform .16s ease, box-shadow .22s ease;
}
.post-block .block-btn:hover{ box-shadow:0 12px 28px -8px var(--accent-glow); transform:translateY(-2px); }

.empty-state{
  text-align:center; padding:70px 20px;
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase; border:1px dashed var(--line); border-radius:10px;
}

#toast{
  position:fixed; left:50%; bottom:28px; z-index:9999;
  transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  font-family:'Inter', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em;
  color:var(--text); background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:8px; padding:12px 20px; box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:opacity .25s ease, transform .25s ease;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }
#toast.error{ border-color:rgba(200,70,70,.4); color:#e08a8a; }

/* ---------- CUSTOM SCROLLBAR ---------- */
html{ scrollbar-width: thin; scrollbar-color: var(--accent-1) var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--accent-gradient); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-1); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}