@charset "UTF-8";
/* ================================================================
   ИСКРЕН БЛОГ — modern stylesheet
   Written from scratch to share the visual language of the main
   Iskren book landing page: cosmic void backdrop, glass panels,
   teal→purple→pink accent gradient, Sansation display type with
   Zen Kurenaido body text. Replaces the legacy shapeshifter styles
   (kept as styles-legacy.css.bak). Markup and JS are unchanged —
   every ID/class hook and show/hide default is preserved.
   ================================================================ */

/* ================================================================
   0. LOCAL FONTS — the exact two faces the main landing page uses,
   loaded straight from /assets/fonts (this file lives in
   /blog/assets/css, hence the three levels up). No Google Fonts
   request, so the blog and the landing page never disagree about
   which typeface they are showing.
   ================================================================ */
@font-face{
  font-family:"Sansation";
  src:url("../../../assets/fonts/Sansation/Sansation-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sansation";
  src:url("../../../assets/fonts/Sansation/Sansation-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sansation";
  src:url("../../../assets/fonts/Sansation/Sansation-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Zen Kurenaido";
  src:url("../../../assets/fonts/Zen_Kurenaido/ZenKurenaido-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ================================================================
   1. TOKENS
   ================================================================ */
:root{
  /* Same two type tokens as the landing page:
     --font-display → logos, post titles, panel headings.
     --font-body    → everything else. */
  --font-display: "Sansation", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Zen Kurenaido", system-ui, -apple-system, Segoe UI, sans-serif;

  --nav-h: 70px;
  --maxw: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 3.25rem);
  --radius: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --starlight: #f6f3ff;
  --haze:      #c8bfe8;
  --muted:     #9087b6;
  --void:      #06040f;

  --teal:   #2cd5ee;
  --purple: #a855f7;
  --pink:   #f472b6;
  --grad-accent: linear-gradient(120deg, #2cd5ee 0%, #a855f7 48%, #f472b6 100%);

  --panel:      linear-gradient(135deg, rgba(20,14,38,.80), rgba(11,8,26,.80));
  --panel-flat: rgba(15,10,30,.72);
  --panel-line: rgba(246,243,255,.12);
  --field:      rgba(246,243,255,.05);
  --field-line: rgba(246,243,255,.14);
  --shadow:     0 18px 45px rgba(4,2,12,.42);
  --shadow-lg:  0 30px 80px rgba(4,2,12,.55);
  --ink-on-grad:#160a26;
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
/* Type scale, matched to the landing page. Zen Kurenaido runs small for its em
   size, so the landing page sets body text a step larger with exactly this
   clamp (see /styles.css) — 18.2px on phones up to 20.5px from ~1140px out.
   The blog sizes every element in rem, so putting the clamp on the root rather
   than on body carries the increase through the whole UI, spacing included,
   instead of only the paragraphs. On the root element, rem resolves against
   the reader's default font size, so browser zoom/font preferences still work. */
html{
  font-size:clamp(1.14rem, 1.08rem + .28vw, 1.28rem);
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--starlight);
  /* Flat void only. The colour now comes from #blogBg (section 2B), which
     paints over this; keeping a gradient here as well would just be a second
     full-screen paint on every scroll. It still reads as the fallback if the
     background markup is ever missing from a page. */
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--haze); text-decoration:none; transition:color .3s var(--ease); }
a:hover{ color:var(--starlight); }
button{ font-family:inherit; }
input, select, textarea{ font-family:inherit; font-size:1rem; }
::selection{ background:rgba(168,85,247,.45); color:#fff; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(168,85,247,.35); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(168,85,247,.55); }

/* Overlay used when the admin sidebar opens on mobile */
body.overlayed::after{
  content:"";
  position:fixed; inset:0; z-index:10;
  background:rgba(4,2,12,.66);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

/* ================================================================
   2B. LIVING BACKGROUND
   The five gradient "phases" of the book landing page (/styles.css
   section 3), stacked full-screen behind the whole blog. There they are
   scroll-driven — the reader scrubs from deep space to fire. The blog has
   no such single spine to scroll along, so here the same five run on a
   timer instead, each morphing into the next and looping forever.
   --bg-cycle is the length of one full trip through all five; every fade
   below is expressed as a percentage of it, so that one value is the only
   knob for "faster/slower". Markup: private/pages/includes/bg.php.

   The order is the landing page's own, rotated to enter on blue: blue →
   teal/pink → fire → deep space → purple → back to blue. Rotated rather
   than reshuffled, so every hand-off is one the landing page already makes
   (purple runs into blue there too, which is what makes the wrap work).
   Slot 0 is the one every page opens on, because a page load restarts CSS
   animations from zero — so it is the blue phase, the most legible of the
   five, rather than the near-black deep space the landing page starts on.

   Why the opacity keyframes look asymmetric: the phases are stacked in
   DOM order and each one is opaque, so a phase fading IN always has an
   opaque phase directly beneath it — the blend never dips toward the bare
   void mid-morph the way a symmetric crossfade would. Slots 1–4 fade in
   over the slot below, hold, and then fade back to 0 while the NEXT slot
   already covers them (invisible — it happens behind an opaque layer,
   purely to reset them). Slot 0 stays opaque at the bottom for the whole
   cycle, and that is what slot 4 fades out to reveal as the loop comes
   back around.
   ================================================================ */
#blogBg{
  --bg-cycle: 120s;
  position:fixed; inset:0; z-index:-1;
  overflow:hidden;
  background:var(--void);
  pointer-events:none;
}
.blog-phase{
  position:absolute;
  /* oversized so the slow drift never pulls an edge into view */
  top:-20%; left:-20%; width:140%; height:140%;
  opacity:0;
  will-change:opacity, transform;
}

/* — Slot 0 · electric blue → luminous teal. The floor of the stack: always
   opaque, and the phase every page opens on. (Landing page .phase--2.) — */
.blog-phase--0{
  opacity:1;
  background:
    radial-gradient(48% 52% at 76% 24%, #1d4ed8 0%, transparent 58%),
    radial-gradient(52% 55% at 18% 72%, #0891b2 0%, transparent 58%),
    radial-gradient(40% 40% at 52% 50%, #2563eb 0%, transparent 45%),
    linear-gradient(160deg, #08235e 0%, #062c50 100%);
  animation:bgDriftC 31s var(--ease) infinite;
}
/* — Slot 1 · teal → cosmic pink. (Landing page .phase--3.) — */
.blog-phase--1{
  background:
    radial-gradient(46% 50% at 24% 30%, #06b6d4 0%, transparent 55%),
    radial-gradient(52% 56% at 80% 66%, #db2777 0%, transparent 58%),
    radial-gradient(40% 40% at 56% 18%, #14b8a6 0%, transparent 45%),
    linear-gradient(160deg, #0a3d52 0%, #3a0f3a 100%);
  animation:bgDriftA 43s var(--ease) infinite reverse,
            bgPhase1 var(--bg-cycle) linear infinite;
}
/* — Slot 2 · fire — flame-orange → red → ember on a charred base.
   (Landing page .phase--4.) — */
.blog-phase--2{
  background:
    radial-gradient(50% 52% at 70% 22%, #f97316 0%, transparent 55%),
    radial-gradient(36% 40% at 38% 50%, #fbbf24 0%, transparent 46%),
    radial-gradient(54% 56% at 22% 66%, #dc2626 0%, transparent 58%),
    radial-gradient(50% 54% at 62% 90%, #ea580c 0%, transparent 60%),
    linear-gradient(165deg, #4a0f08 0%, #160503 100%);
  animation:bgDriftB 37s var(--ease) infinite,
            bgPhase2 var(--bg-cycle) linear infinite;
}
/* — Slot 3 · deep space. (Landing page .phase--0.) Lifted well clear of that
   original's near-black (#08051a base): there it is the hero backdrop with a
   twinkling starfield drawn over it, which is what keeps it from reading as
   a black screen. The blog has no starfield, and under the scrim below the
   original went flat — so this is indigo rather than black. Still the calm,
   dark rest-point of the loop, just not a dead screen. — */
.blog-phase--3{
  background:
    radial-gradient(48% 60% at 50% -8%,  #4527a0 0%, transparent 62%),
    radial-gradient(42% 52% at 82% 18%,  #3730a3 0%, transparent 58%),
    radial-gradient(52% 52% at 12% 78%,  #312071 0%, transparent 58%),
    linear-gradient(180deg, #1d1247 0%, #150c32 100%);
  animation:bgDriftA 34s var(--ease) infinite,
            bgPhase3 var(--bg-cycle) linear infinite;
}
/* — Slot 4 · deep purple → electric blue. (Landing page .phase--1.) Last in
   the loop because it is what the landing page runs into blue from, so the
   wrap back to slot 0 is a transition the eye already knows. — */
.blog-phase--4{
  background:
    radial-gradient(45% 50% at 20% 28%, #4c1d95 0%, transparent 58%),
    radial-gradient(50% 55% at 84% 68%, #3a0ca3 0%, transparent 58%),
    radial-gradient(40% 40% at 60% 8%,  #7c3aed 0%, transparent 50%),
    linear-gradient(160deg, #1b0a44 0%, #100a34 100%);
  animation:bgDriftB 40s var(--ease) infinite,
            bgPhase4 var(--bg-cycle) linear infinite;
}

/* Each slot owns a fifth of the cycle: it fades in over 8%, holds for the
   rest of its slot, then clears itself out of sight. Only phase 4's fade-out
   (92→100%) is seen — it is the hand-off back to phase 0. */
@keyframes bgPhase1{
  0%,  12%{ opacity:0; animation-timing-function:cubic-bezier(.45,0,.55,1); }
  20%, 40%{ opacity:1; }
  50%,100%{ opacity:0; }
}
@keyframes bgPhase2{
  0%,  32%{ opacity:0; animation-timing-function:cubic-bezier(.45,0,.55,1); }
  40%, 60%{ opacity:1; }
  70%,100%{ opacity:0; }
}
@keyframes bgPhase3{
  0%,  52%{ opacity:0; animation-timing-function:cubic-bezier(.45,0,.55,1); }
  60%, 80%{ opacity:1; }
  90%,100%{ opacity:0; }
}
@keyframes bgPhase4{
  0%,  72%{ opacity:0; animation-timing-function:cubic-bezier(.45,0,.55,1); }
  80%, 92%{ opacity:1; animation-timing-function:cubic-bezier(.45,0,.55,1); }
  100%    { opacity:0; }
}

/* Autonomous drift — small, edge-safe transforms, no rotation. Same three
   paths as the landing page, so a phase never sits perfectly still. */
@keyframes bgDriftA{ 0%,100%{transform:translate3d(0,0,0) scale(1)}     50%{transform:translate3d(2.5%,-2%,0) scale(1.07)} }
@keyframes bgDriftB{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)}  50%{transform:translate3d(-3%,2.5%,0) scale(1)} }
@keyframes bgDriftC{ 0%,100%{transform:translate3d(-1.5%,1.5%,0) scale(1.04)} 50%{transform:translate3d(2%,-1%,0) scale(1.09)} }

/* Legibility scrim. The blog is long-form reading, and the brighter phases
   (teal/pink, and fire especially) would otherwise fight the body text the
   way they never have to on the landing page. A flat veil plus a vignette
   holds every phase at roughly the same, readable brightness — raise the
   .34 if the fire phase still feels hot behind a post. */
.blog-bg__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,2,12,.28) 0%, rgba(4,2,12,.34) 100%),
    radial-gradient(120% 90% at 50% 38%, transparent 48%, rgba(4,2,12,.58) 100%);
}
/* Film grain — kills gradient banding on wide dark fills and adds texture */
.blog-bg__grain{
  position:absolute; inset:0; opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Reduced motion: freeze the whole thing on phase 0 — phases 1–4 keep their
   base opacity of 0, so what is left is the landing page's deep-space still. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .blog-phase{ animation:none !important; }
}

/* ================================================================
   3. PUBLIC NAV
   ================================================================ */
#homeWrapper{ min-height:100vh; display:flex; flex-direction:column; }

#navTop{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:center;
  height:var(--nav-h);
  padding:0 var(--pad-x);
  background:rgba(8,5,20,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(246,243,255,.08), 0 10px 34px rgba(4,2,12,.5);
}
#navTopInner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--maxw); height:100%;
  position:relative;
}
#navLogo{
  font-family:var(--font-display);
  font-weight:700; font-size:1.7rem; letter-spacing:.3px; line-height:1;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:filter .3s var(--ease);
  font-style: italic;
  letter-spacing: 1px;
}
#navLogo:hover{ filter:brightness(1.15); }

/* Categories trigger */
#menuCategoriesWrapper{
  display:flex; align-items:center;
  position:relative;
  font-size:.95rem; font-weight:500; letter-spacing:.02em;
  color:var(--haze);
  cursor:pointer;
  transition:color .3s var(--ease);
}
#menuCategoriesWrapper:hover{ color:var(--starlight); }
/* Chevron drawn from two borders rather than an icon file: it inherits the
   trigger's colour (so it brightens on hover with the label), stays crisp at
   any zoom, and flips to point up when the panel is open. The nudge inside
   the transform keeps the optical centre steady through the rotation. */
#menuCategoriesWrapper::after{
  content:"";
  display:inline-block; width:7px; height:7px;
  margin-left:9px;
  margin-top: 6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:0 0 1px 0;
  opacity:.75;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
#menuCategoriesWrapper:hover::after{ opacity:1; }
#menuCategoriesWrapper.open::after{ transform:translateY(1px) rotate(-135deg); opacity:1; }

/* Dropdown panels (categories + user) — hidden by default, JS fades them */
#menuUser, #menuCategories{
  display:none;
  position:absolute; top:calc(100% + 12px); z-index:30;
  min-width:190px; overflow:hidden;
  background:var(--panel);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--panel-line);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:.4rem;
}
#menuCategories{ left:0; }
#menuUser{ right:0; }
#menuUser .menu-user-item a, #menuCategories .menu-user-item a{
  display:block;
  padding:.55rem .9rem;
  font-size:.95rem; font-weight:500;
  color:var(--haze);
  border-radius:10px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
#menuUser .menu-user-item a:hover, #menuCategories .menu-user-item a:hover{
  background:rgba(168,85,247,.16);
  color:var(--starlight);
}

#navRight{ display:flex; align-items:center; gap:.9rem; }

/* Search — collapsed to an icon; JS expands the overlay */
#navSearch{ display:flex; align-items:center; justify-content:center; height:36px; }
#navSearch #searchBtn{
  appearance:none; -webkit-appearance:none;
  width:22px; height:100%;
  background:url("../images/search.svg") no-repeat center/20px;
  border:none; cursor:pointer;
  opacity:.85; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
#navSearch #searchBtn:hover{ opacity:1; transform:scale(1.08); }
#navSearch #searchInputWrapper{
  display:none;               /* JS switches to flex */
  align-items:center;
  width:100%; height:46px;
  position:absolute; top:calc(50% - 23px); left:0; z-index:25;
  padding:0 3.2rem 0 1.2rem;
  /* Fully opaque on purpose. This pill is absolutely positioned over the whole
     nav row, so it sits on top of the "Искрен" logo and the categories
     trigger — at the old .92 alpha the bright gradient logo showed through it,
     and the backdrop blur only smeared it rather than hiding it. An opaque
     fill makes the blur redundant, so that goes too. */
  background:#0f0a1e;
  border:1px solid var(--field-line);
  border-radius:999px;
}
#navSearch #search{
  appearance:none; -webkit-appearance:none;
  display:none;               /* JS fades in */
  width:100%; height:100%;
  font-size:1rem;
  color:var(--starlight);
  background:none; border:none; outline:none;
}
#navSearch #search::placeholder{ color:var(--muted); }
#navSearch input[type=search]::-ms-clear,
#navSearch input[type=search]::-ms-reveal{ display:none; width:0; height:0; }
#navSearch input[type=search]::-webkit-search-decoration,
#navSearch input[type=search]::-webkit-search-cancel-button,
#navSearch input[type=search]::-webkit-search-results-button,
#navSearch input[type=search]::-webkit-search-results-decoration{ display:none; }
#navSearch #closeSearch{
  display:none;               /* JS fades in */
  position:absolute; right:3.1rem; z-index:26;
  width:18px; height:18px;
  background:url("../images/search-close.svg") no-repeat center/16px;
  opacity:.8;
}
#navSearch #closeSearch:hover{ opacity:1; }

/* User avatar button */
#menuUserWrapper{ display:flex; position:relative; }
#menuUserButton{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(246,243,255,.06) url("../images/user.svg") no-repeat center/18px;
  border:1px solid var(--field-line);
  cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
#menuUserButton:hover{ border-color:rgba(168,85,247,.6); background-color:rgba(168,85,247,.12); }
#menuUserButton img{ width:80%; height:80%; border-radius:50%; }

/* ================================================================
   4. PUBLIC LAYOUT & POST GRID
   ================================================================ */
main{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(1.6rem, 4vh, 3rem) var(--pad-x) 4rem;
  flex:1;
}

#backLink{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-bottom:1.2rem;
  font-size:.92rem; font-weight:500; letter-spacing:.03em;
  color:var(--muted);
}
/* Drawn arrow instead of the "←" glyph, whose weight came from the body font
   and was far lighter than the other nav icons. Masked rather than used as a
   background image so it still inherits the link colour and hover fade. */
#backLink::before{
  content:"";
  flex:none; width:18px; height:18px;
  background-color:currentColor;
  -webkit-mask:url("../images/back-arrow.svg") no-repeat center/18px;
  mask:url("../images/back-arrow.svg") no-repeat center/18px;
  transition:transform .3s var(--ease);
}
/* Without mask support the block above would paint a solid square — fall back
   to the old glyph instead. */
@supports not ((-webkit-mask-image:url("../images/back-arrow.svg")) or (mask-image:url("../images/back-arrow.svg"))){
  #backLink::before{
    content:"←";
    width:auto; height:auto;
    background-color:transparent;
    font-size:1.05rem;
  }
}
#backLink:hover{ color:var(--starlight); }
#backLink:hover::before{ transform:translateX(-3px); }

#blogPosts{
  display:grid;
  /* Track floor in rem, not px, so it grows with the type above — a fixed
     300px card would have squeezed the enlarged titles down to a few words a
     line. min(100%,…) keeps the track from overflowing narrow phones. */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap:clamp(1.2rem, 2.5vw, 1.8rem);
  margin-top:1rem;
}

/* ---- Post card ---- */
.post-card{
  position:relative;
  min-width:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--panel);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.post-card:hover{
  transform:translateY(-6px);
  border-color:rgba(168,85,247,.42);
  box-shadow:0 28px 64px rgba(4,2,12,.55), 0 0 40px rgba(168,85,247,.12);
}
.post-card .post-image{ overflow:hidden; }
.post-card .post-image img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease);
}
.post-card:hover .post-image img{ transform:scale(1.045); }
.post-card .post-main{
  display:flex; flex-direction:column; flex:1;
  padding:1.15rem 1.35rem 3.4rem;
}
.post-card .post-title{
  font-family:var(--font-display);
  font-weight:400; font-size:1.35rem; line-height:1.22;
  letter-spacing:-.01em;
  color:var(--starlight);
  overflow-wrap:anywhere;
  transition:color .3s var(--ease);
}
.post-card .post-title-link:hover .post-title{ color:var(--pink); }
.post-card .post-info{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin-top:.7rem;
}
.post-card .post-date, .post-card .reading-time{
  font-size:.8rem; letter-spacing:.02em;
  color:var(--muted);
}
.post-card .post-category{
  flex-shrink:0;
  padding:.22rem .85rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  white-space:nowrap;
  color:var(--ink-on-grad);
  background:var(--grad-accent);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(168,85,247,.32);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card .post-category:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(168,85,247,.5); }
.post-card .post-content{
  margin-top:.85rem;
  font-size:.95rem; line-height:1.7;
  color:var(--haze);
  overflow-wrap:anywhere;
}
.post-card .post-read-more{
  position:absolute; left:1.35rem; bottom:1.1rem;
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.post-read-more::after{
  content:" →";
  -webkit-text-fill-color:var(--pink); color:var(--pink);
  display:inline-block;
  transition:transform .3s var(--ease);
}
.post-read-more:hover::after{ transform:translateX(4px); }

/* ---- Single post view ---- */
#postMain{ max-width:860px; }
#blogViewWrapper{ width:100%; }
.post-card.post-view{
  padding:clamp(1.4rem, 4vw, 2.8rem);
  cursor:default;
}
.post-card.post-view:hover{ transform:none; border-color:var(--panel-line); box-shadow:var(--shadow); }
.post-card.post-view .post-image img{
  aspect-ratio:auto;
  width:auto; max-width:100%;
  margin:0 auto;
  border-radius:16px;
}
.post-card.post-view:hover .post-image img{ transform:none; }
.post-card.post-view .post-main{ padding:1.4rem 0 0; }
.post-card.post-view .post-title{
  font-size:clamp(1.8rem, 4.5vw, 2.7rem); line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.post-card.post-view .post-info{ margin:1.05rem 0 .4rem; }
.post-card.post-view .post-content{
  margin-top:1.3rem;
  font-size:1.05rem; line-height:1.8;
}
#blogViewWrapper p, #blogViewWrapper span, #blogViewWrapper font, #blogViewWrapper li{
  color:var(--haze);
}
#blogViewWrapper b, #blogViewWrapper strong{ color:var(--starlight); }
#blogViewWrapper img{ border-radius:14px; margin:1rem auto; }
#blogViewWrapper a{ color:var(--teal); }
#blogViewWrapper a:hover{ color:var(--starlight); }
.post-content ol, .post-content ul{ padding-left:1.4rem; margin:.8rem 0; }
.post-content ol li, .post-content ul li{ margin-bottom:.4rem; }

/* ---- Pagination ---- */
#pagination{
  display:flex; gap:.6rem;
  margin-top:2.6rem;
}
#pagination a, #pagination span{
  display:inline-flex; align-items:center;
  padding:.5rem 1.15rem;
  font-size:.92rem; font-weight:500;
  border:1px solid var(--panel-line);
  border-radius:999px;
  color:var(--haze);
  background:rgba(246,243,255,.03);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
#pagination a:hover{
  border-color:rgba(168,85,247,.55);
  background:rgba(168,85,247,.12);
  color:var(--starlight);
  transform:translateY(-2px);
}
#pagination span{ opacity:.38; }

/* ---- Footer (legacy element — stays hidden) ---- */
#homeFooter{ display:none; }

#pageNotFound{
  margin:14vh auto;
  font-family:var(--font-display);
  font-weight:400; font-size:clamp(1.6rem, 4vw, 2.6rem);
  text-align:center;
  color:var(--starlight);
}

/* ================================================================
   5. LOGIN & SIGNUP
   ================================================================ */
#blogWrapper{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:7rem 1.25rem 2rem;
}
#loginForm, #signupForm{
  display:flex; flex-direction:column; align-items:center;
  width:min(420px, 100%);
  position:relative;
  padding:4.4rem 2.4rem 2.2rem;
  background:var(--panel);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg), 0 0 60px rgba(168,85,247,.10);
}
#formHeader{ display:flex; flex-direction:column; align-items:center; }
#loginTitle, #signupTitle{
  font-family:var(--font-display);
  font-weight:400; font-size:1.9rem; letter-spacing:-.01em;
  color:var(--starlight);
}
#formLogo{
  display:flex;
  width:92px; height:92px;
  position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  /* Plain gradient disc — the logo mark that used to sit on top of it was
     dropped from the project. */
  background:var(--grad-accent);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(246,243,255,.18), 0 0 46px rgba(168,85,247,.5);
}

/* Fields */
#loginForm .input-wrapper, #signupForm .input-wrapper{
  width:100%;
  margin-top:1rem;
  position:relative;
  background:var(--field);
  border:1px solid var(--field-line);
  border-radius:12px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
#loginForm .input-wrapper:focus-within, #signupForm .input-wrapper:focus-within{
  border-color:rgba(44,213,238,.6);
  box-shadow:0 0 0 3px rgba(44,213,238,.15);
}
#loginForm .input-wrapper.has-error, #signupForm .input-wrapper.has-error{
  border-color:rgba(244,114,182,.65);
}
#loginForm .input-wrapper input, #signupForm .input-wrapper input{
  width:100%; height:48px;
  padding:0 1.05rem;
  font-size:1rem;
  color:var(--starlight);
  background:none; border:none; outline:none;
}
#loginForm input::placeholder, #signupForm input::placeholder{ color:var(--muted); }
#loginForm input:-webkit-autofill, #signupForm input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 60px #140e26 inset;
  -webkit-text-fill-color:var(--starlight);
  caret-color:var(--starlight);
  border-radius:12px;
}
.validation-error{
  width:100%;
  margin:.5rem 0 0;
  font-size:.85rem;
  color:var(--pink);
}

#rememberMeContainer{
  display:flex; align-items:center; gap:.5rem;
  margin-top:1.05rem;
  font-size:.9rem; color:var(--haze);
}
#rememberMeContainer input[type=checkbox]{
  width:16px; height:16px;
  accent-color:var(--purple);
  cursor:pointer;
}
#rememberMeContainer label{ cursor:pointer; }

#loginForm #btnSubmit, #signupForm #btnSubmit{
  appearance:none; -webkit-appearance:none;
  width:100%; height:50px;
  margin-top:1.5rem;
  font-size:1.02rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink-on-grad);
  background:var(--grad-accent);
  border:none; border-radius:999px;
  box-shadow:0 12px 32px rgba(168,85,247,.38);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
#loginForm #btnSubmit:hover, #signupForm #btnSubmit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(168,85,247,.52);
}
#loginForm > span, #signupForm > span{
  margin-top:1.4rem;
  font-size:.92rem; text-align:center; line-height:1.55;
  color:var(--muted);
}
#loginForm > span a, #signupForm > span a{
  font-weight:600;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
#copyrightNotice{
  margin-top:2.2rem;
  font-size:.85rem; letter-spacing:.04em;
  color:var(--muted);
}

/* ================================================================
   6. ADMIN — SHELL
   ================================================================ */
#panelWrapper{
  min-height:100vh;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(44,213,238,.07), transparent 60%),
    var(--void);
}

#panelSidebar{
  width:264px; height:100%;
  position:fixed; top:0; left:0; z-index:15;
  padding:1.4rem 1.1rem;
  background:rgba(11,8,26,.72);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-right:1px solid var(--panel-line);
  transition:left .45s var(--ease);
}
#panelSidebarLogo{
  margin:0 .5rem 1.3rem;
  font-family:var(--font-display);
  font-weight:700; font-size:1.65rem; line-height:1.3;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
#panelSidebarLogo::before{ content:"Искрен"; }
#sidebarCloseButton{
  display:none;
  position:absolute; top:18px; right:16px;
  width:20px; height:20px;
  background:url("../images/search-close.svg") no-repeat center/16px;
  cursor:pointer; opacity:.8;
}
#sidebarCloseButton:hover{ opacity:1; }

#panelNav{ list-style:none; }
#panelNav .panel-nav-item{
  margin-bottom:.35rem;
  border-radius:12px;
  transition:background .3s var(--ease);
}
#panelNav .panel-nav-item a{
  display:block;
  padding:.72rem 1rem;
  font-size:.98rem; font-weight:500; letter-spacing:.01em;
  color:var(--haze);
  border-radius:12px;
  transition:color .3s var(--ease);
}
#panelNav .panel-nav-item:hover{ background:rgba(246,243,255,.05); }
#panelNav .panel-nav-item:hover a{ color:var(--starlight); }
#panelNav .panel-nav-item.active{
  background:var(--grad-accent);
  box-shadow:0 10px 26px rgba(168,85,247,.35);
}
#panelNav .panel-nav-item.active a{ color:var(--ink-on-grad); font-weight:600; }

#panelMain{
  margin-left:264px;
  padding:clamp(1.4rem, 3.5vw, 2.6rem);
  max-width:1160px;
}

#panelHeader{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.8rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--panel-line);
}
#panelTitle{ display:flex; align-items:center; gap:.4rem; color:var(--haze); }
#panelTitle h1{
  font-family:var(--font-display);
  font-weight:400; font-size:clamp(1.55rem, 3vw, 2.2rem); line-height:1.1;
  letter-spacing:-.015em;
  color:var(--starlight);
}
#panelTitle #categoryBtnWrapper{ display:flex; align-items:center; }
#panelTitle a{ display:flex; align-items:center; }

.btn-primary[id^=addNew]{
  display:flex;
  width:34px; height:34px;
  margin-left:12px;
  background:url("../images/plus.svg") no-repeat center/18px, var(--grad-accent);
  border-radius:50%;
  box-shadow:0 8px 22px rgba(168,85,247,.4);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary[id^=addNew]:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 30px rgba(168,85,247,.55);
}

#menuUserWrapper #sidebarButton{
  display:none;
  width:22px; height:22px;
  background:url("../images/menu.svg") no-repeat center/20px;
  cursor:pointer;
}
#panelWrapper #menuUserButton{ margin-left:12px; }
#panelWrapper #menuUser{ top:calc(100% + 12px); }

/* ================================================================
   7. ADMIN — TABLES
   ================================================================ */
#panelMain table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  overflow:hidden;
  background:var(--panel-flat);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--panel-line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
#panelMain table th, #panelMain table td{
  display:flex; align-items:center;
  padding:.7rem .9rem;
  text-align:left;
  border-bottom:1px solid rgba(246,243,255,.07);
}
#panelMain table th{
  font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  background:rgba(28,20,52,.65);
}
#panelMain table td{ font-size:.95rem; color:var(--haze); overflow-wrap:anywhere; }
#panelMain table tbody tr{ transition:background .25s var(--ease); }
#panelMain table tbody tr:hover{ background:rgba(168,85,247,.08); }
#panelMain table tbody tr:last-child th,
#panelMain table tbody tr:last-child td{ border-bottom:none; }

/* Flex rows with stable column widths (keeps legacy responsive behavior) */
#panelMain table tr{ display:flex; }
#panelMain table tr > :first-child{ width:calc(45% - 128px); }
#panelMain table tr > :nth-child(2){ width:calc(38% - 128px); }
#panelMain table tr > :nth-child(3){ width:140px; }
#panelMain table tr > :nth-child(4){ width:88px; }
#panelMain table tr > :nth-child(5){ width:96px; }
#panelMain table tr > :last-child{ flex-grow:1; }

table#categoriesTable tr th:nth-child(3),
table#categoriesTable tr td:nth-child(3){ display:flex; }

#postsTable #postImage{ max-width:100%; }
#panelMain table td img{
  border-radius:10px;
  filter:none;
}

/* Row action buttons */
.post-edit, .post-delete, .category-edit, .category-delete{
  appearance:none; -webkit-appearance:none;
  width:30px; height:30px;
  background:url("../images/edit.svg") no-repeat center/16px, var(--grad-accent);
  border:none; border-radius:9px;
  box-shadow:0 6px 16px rgba(168,85,247,.3);
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post-delete, .category-delete{
  margin-left:6px;
  background-image:url("../images/delete.svg"), var(--grad-accent);
  background-size:16px, cover;
  background-repeat:no-repeat;
  background-position:center;
}
.post-edit:hover, .post-delete:hover,
.category-edit:hover, .category-delete:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(168,85,247,.5);
}

/* ================================================================
   8. ADMIN — FORMS
   ================================================================ */
#adminAddPost, #adminEditPost, #adminDeletePost,
#adminAddCategory, #adminEditCategory, #adminDeleteCategory{
  display:flex; justify-content:center;
}

#postForm, #categoriesForm{
  display:flex; flex-direction:column; align-items:center;
  width:min(720px, 100%);
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
  background:var(--panel);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
#adminDeletePost h1, #adminDeleteCategory h1{
  font-family:var(--font-display);
  font-weight:400; font-size:1.6rem;
  color:var(--starlight);
  margin-bottom:.6rem;
}

#postForm .input-wrapper, #categoriesForm .input-wrapper{
  width:min(420px, 100%);
  margin-top:1rem;
  position:relative;
  background:var(--field);
  border:1px solid var(--field-line);
  border-radius:12px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
#postForm .input-wrapper:focus-within,
#categoriesForm .input-wrapper:focus-within{
  border-color:rgba(44,213,238,.6);
  box-shadow:0 0 0 3px rgba(44,213,238,.15);
}
#postForm .input-wrapper.has-error,
#categoriesForm .input-wrapper.has-error{ border-color:rgba(244,114,182,.65); }
#postForm .input-wrapper input,
#categoriesForm .input-wrapper input{
  width:100%; height:48px;
  padding:0 1.05rem;
  font-size:1rem;
  color:var(--starlight);
  background:none; border:none; outline:none;
}
#postForm input::placeholder, #categoriesForm input::placeholder{
  color:var(--muted);
}
#postForm .validation-error, #categoriesForm .validation-error{
  width:min(420px, 100%);
}

/* Read-only fields on delete screens */
.visualize-field{
  display:flex; align-items:center;
  width:100%; height:48px;
  padding:0 1.05rem;
  color:var(--haze);
}

/* Image upload dropzone */
#postForm .input-wrapper#postImageWrapper,
#postImageWrapper{
  display:flex; justify-content:center;
  width:100%; height:auto;
  padding:1.1rem;
  background:rgba(246,243,255,.03);
  border:1px dashed rgba(168,85,247,.45);
  border-radius:16px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
#postImageWrapper:hover{ border-color:var(--purple); background:rgba(168,85,247,.07); }
.custom-file-input{
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  width:100%;
  cursor:pointer;
}
.custom-file-input img{
  max-height:300px; width:auto; max-width:100%;
  border-radius:12px;
}
.hidden-input{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.custom-text{
  display:inline-block;
  margin-top:.7rem;
  font-size:.88rem; letter-spacing:.02em;
  color:var(--muted);
}
#userImageWrapper{ display:flex; justify-content:center; }
#userImage{
  width:104px; height:104px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(246,243,255,.18), 0 0 34px rgba(168,85,247,.35);
}

/* Category selector chip + dropdown */
#disabledSelect, #roleSelect, #categorySelect{ display:none; }
.input-wrapper-select{
  display:flex; justify-content:center;
  position:relative; z-index:5;
  margin-top:1rem;
}
.input-wrapper-select a{ text-decoration:none !important; }
.category-display{
  padding:.42rem 1.25rem;
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  text-align:center;
  color:var(--ink-on-grad);
  background:var(--grad-accent);
  border-radius:999px;
  box-shadow:0 8px 22px rgba(168,85,247,.35);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.category-display:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(168,85,247,.5); }
.custom-select, #categoryDropdown{
  display:none;               /* JS toggles */
  min-width:180px;
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  z-index:6;
  overflow:hidden;
  padding:.4rem;
  background:var(--panel);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--panel-line);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
}
.custom-select .option, .custom-select .selected-option, .custom-select .category-option,
#categoryDropdown .option, #categoryDropdown .selected-option, #categoryDropdown .category-option{
  padding:.5rem .85rem;
  font-size:.92rem; font-weight:500;
  text-align:center;
  color:var(--haze);
  border-radius:9px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
#categoryDropdown .category-option:hover, .custom-select .option:hover{
  background:rgba(168,85,247,.18);
  color:var(--starlight);
}
.custom-select .options, #categoryDropdown .options{ display:none; }

/* Status / role toggle pills */
.btn-primary.toggle-option, #toggleOptionRole, #toggleOptionUser, #toggleOptionCategory{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1rem;
  padding:.42rem 1.25rem;
  font-size:.92rem; font-weight:600;
  color:var(--starlight);
  background:rgba(246,243,255,.05);
  border:1px solid rgba(168,85,247,.5);
  border-radius:999px;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary.toggle-option:hover{ background:rgba(168,85,247,.16); border-color:var(--purple); }

/* Summernote — dark glass */
#summernoteWrapper{
  width:100%;
  margin-top:1.15rem;
  border-radius:14px;
}
#summernoteWrapper.has-error{ border:1px solid rgba(244,114,182,.65); }
.note-editor.note-frame{
  background:rgba(11,8,26,.6) !important;
  border:1px solid var(--panel-line) !important;
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:none !important;
}
.note-toolbar{
  background:rgba(28,20,52,.8) !important;
  border-bottom:1px solid var(--panel-line) !important;
}
/* Summernote ships its own body font — override it so the editor shows the
   post in the same face the published page will use. */
.note-editor .note-editing-area, .note-editor .note-editable{
  background:transparent !important;
  font-family:var(--font-body) !important;
  color:var(--haze) !important;
}
.note-editor .note-editable font{ color:var(--haze); }
.note-btn{
  background:rgba(246,243,255,.05) !important;
  color:var(--haze) !important;
  border:none !important;
  border-radius:7px !important;
}
.note-btn:hover{ background:rgba(168,85,247,.22) !important; color:var(--starlight) !important; }
.note-placeholder{ color:var(--muted) !important; }
.note-statusbar{ background:rgba(28,20,52,.8) !important; border-top:1px solid var(--panel-line) !important; }
.note-statusbar .note-resizebar .note-icon-bar{ border-color:var(--muted) !important; }
.note-dropdown-menu{
  background:#140e26 !important;
  border:1px solid var(--panel-line) !important;
  border-radius:10px !important;
}
.note-dropdown-menu a, .note-dropdown-menu .note-dropdown-item{ color:var(--haze) !important; }
.note-dropdown-menu a:hover, .note-dropdown-menu .note-dropdown-item:hover{
  background:rgba(168,85,247,.2) !important; color:var(--starlight) !important;
}
/* Dialogs (Insert Image / Insert Link / Video). Summernote is told to append
   these to <body> — see dialogsInBody in assets/scripts/main.js. They must not
   live inside #postForm, whose backdrop-filter would make it their containing
   block and stacking context, leaving the dialog sized to the form and stuck
   behind its own backdrop. Everything below assumes body-level dialogs. */
.note-modal-content{
  background:#140e26 !important;
  border:1px solid var(--panel-line) !important;
  border-radius:16px !important;
  color:var(--haze) !important;
  box-shadow:var(--shadow-lg) !important;
}
.note-modal-header{ border-bottom:1px solid var(--panel-line) !important; }
.note-modal-footer{ border-top:1px solid var(--panel-line) !important; }
/* Summernote's own title colour is a slate grey meant for a white dialog. */
.note-modal-title{ font-family:var(--font-display); color:var(--starlight) !important; }
.note-modal .note-form-label{ color:var(--haze) !important; }
.note-modal .note-help-block{ color:var(--muted) !important; }
.note-modal-header .close{
  color:var(--muted) !important; opacity:1 !important;
  background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer;
  transition:color .3s var(--ease);
}
.note-modal-header .close:hover{ color:var(--starlight) !important; }
.note-modal-footer a{ color:var(--teal) !important; }
/* Match the sheet the admin sidebar already drops over the page, instead of
   Summernote's flat 50% black. */
.note-modal-backdrop{ background:rgba(4,2,12,.66) !important; opacity:1 !important; }
.note-input, .note-modal-content input{
  background:var(--field) !important;
  border:1px solid var(--field-line) !important;
  color:var(--starlight) !important;
  border-radius:9px !important;
}
/* The file picker is a native control. color-scheme lets the browser draw its
   own button chrome dark rather than leaving a light-grey slab in the dialog;
   the "no file chosen" text beside it just inherits. Scoped to this input
   rather than :root, so nothing else on the site changes rendering. */
.note-modal-content input[type=file]{
  color:var(--haze) !important; padding:.45rem !important; color-scheme:dark;
}
.note-modal .note-btn{ background:rgba(246,243,255,.08) !important; }
.note-modal .note-btn:hover{ background:rgba(168,85,247,.28) !important; }

/* Popover — the toolbar that appears over a selected image or link. Ships as
   #fff with a #ccc border, i.e. a white slab in the middle of a dark editor,
   and the site had no overrides for it at all. The arrow is drawn as border
   colours on a pseudo-element, so both layers have to be recoloured. */
.note-popover.popover{
  background:#140e26 !important;
  border:1px solid var(--panel-line) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow) !important;
}
.note-popover.popover .popover-content, .note-popover .note-popover-content{
  background:transparent !important;
}
.note-popover.bottom .note-popover-arrow{ border-bottom-color:var(--panel-line) !important; }
.note-popover.bottom .note-popover-arrow:after{ border-bottom-color:#140e26 !important; }
.note-popover.top .note-popover-arrow{ border-top-color:var(--panel-line) !important; }
.note-popover.top .note-popover-arrow:after{ border-top-color:#140e26 !important; }
.note-popover.right .note-popover-arrow{ border-right-color:var(--panel-line) !important; }
.note-popover.right .note-popover-arrow:after{ border-right-color:#140e26 !important; }
.note-popover.left .note-popover-arrow{ border-left-color:var(--panel-line) !important; }
.note-popover.left .note-popover-arrow:after{ border-left-color:#140e26 !important; }

/* Form footer buttons */
#formFooter{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  width:100%;
  margin-top:1.7rem;
}
#postForm #btnSubmit, #categoriesForm #btnSubmit,
#formFooter #btnSubmit{
  appearance:none; -webkit-appearance:none;
  min-width:150px; height:46px;
  padding:0 1.9rem;
  font-size:1rem; font-weight:600;
  color:var(--ink-on-grad);
  background:var(--grad-accent);
  border:none; border-radius:999px;
  box-shadow:0 12px 32px rgba(168,85,247,.38);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
#postForm #btnSubmit:hover, #categoriesForm #btnSubmit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(168,85,247,.52);
}
#btnBack{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px;
  padding:0 1.7rem;
  font-size:1rem; font-weight:500;
  color:var(--starlight);
  background:rgba(246,243,255,.04);
  border:1px solid rgba(246,243,255,.28);
  border-radius:999px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
#btnBack:hover{
  border-color:rgba(246,243,255,.6);
  background:rgba(246,243,255,.09);
  transform:translateY(-2px);
  color:var(--starlight);
}

/* Admin standalone submit (outside formFooter, e.g. category form) */
#postForm #formFooter #btnSubmit{ margin-top:0; }

/* ================================================================
   9. ERROR PAGES
   ================================================================ */
.error-page-container{
  max-width:640px;
  margin:16vh auto 0;
  padding:2.6rem 2.2rem;
  text-align:center;
  background:var(--panel);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.error-page-container h1{
  font-family:var(--font-display);
  font-weight:400; font-size:clamp(1.5rem, 4vw, 2.1rem);
  color:var(--starlight);
}
.error-page-container p{
  margin:1rem auto 0;
  max-width:46ch;
  color:var(--haze);
}
.error-page-container img{ margin:1.4rem auto 0; max-height:160px; }
.error-page-container .error-page-options{
  display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1.8rem;
}
.error-page-container .error-page-options div{
  display:inline-flex;
  background:var(--grad-accent);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(168,85,247,.35);
  transition:transform .3s var(--ease);
}
.error-page-container .error-page-options div:hover{ transform:translateY(-2px); }
.error-page-container .error-page-options div a{
  padding:.6rem 1.4rem;
  font-size:.95rem; font-weight:600;
  color:var(--ink-on-grad) !important;
}

/* ================================================================
   10. RESPONSIVE
   ================================================================ */
@media screen and (max-width: 900px){
  #panelSidebar{ left:-280px; }
  #panelSidebar.open{ left:0; }
  #panelSidebar #sidebarCloseButton{ display:flex; }
  #panelMain{ margin-left:0; }
  #menuUserWrapper #sidebarButton{ display:flex; }
}

@media screen and (max-width: 700px){
  #panelMain{ padding:1.2rem 1rem; }
  #postForm, #categoriesForm{ width:100%; }
}

@media screen and (max-width: 600px){
  #navLogo{ font-size:1.4rem; }
  /* Label collapses on phones — the chevron alone would say nothing, so the
     trigger falls back to the categories glyph (borders reset, or the chevron
     would still be drawn over it). */
  #menuCategoriesWrapper{ font-size:0; }
  #menuCategoriesWrapper::after{
    width:20px; height:20px;
    margin-left:0; margin-top:0;
    border:none; border-radius:0;
    /* Sized in px, not contain: the icon fills only the middle 20 of its 24
       units, so `contain` would draw it noticeably smaller than the search
       glyph next to it. 20px matches that one exactly. */
    background:url("../images/categories.svg") no-repeat center/20px;
    transform:none;
  }
  #menuCategoriesWrapper.open::after{ transform:none; opacity:1; }
  main{ padding-left:1.1rem; padding-right:1.1rem; }
}

@media screen and (max-width: 480px){
  #panelMain table tr th:nth-child(3),
  #panelMain table tr td:nth-child(3){ display:none; }
  #panelMain table tr > :first-child{ width:calc(52% - 60px); }
  #panelMain table tr > :nth-child(2){ width:calc(48% - 124px); }
  #loginForm, #signupForm{ padding:3.8rem 1.4rem 1.8rem; }
}