@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, Lora throughout for both display
   and 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 face 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:"Lora";
  src:url("../../../assets/fonts/Lora/Lora-VariableFont_wght.ttf") format("truetype");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../../../assets/fonts/Lora/Lora-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:400 700; font-style:italic; font-display:swap;
}

/* ================================================================
   1. TOKENS
   ================================================================ */
:root{
  /* Same two type tokens as the landing page, both on Lora:
     --font-display → logos, post titles, panel headings.
     --font-body    → everything else. */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", 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; }
/* Headings that exist for search engines and screen readers but have no place
   in the visual design. Clipped rather than display:none, which would take them
   out of the accessibility tree too. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* Type scale, matched to the landing page, which uses exactly this clamp for
   body text (see /styles.css) — 16.3px on phones up to 17.9px from ~1140px
   out. Lora's tall x-height means it needs no step-up the way the previous
   small-em body face did.
   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.02rem, .98rem + .2vw, 1.12rem);
  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.4rem; 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;
}
/* Above the container width the auto-fill track floor still only ever resolved
   to two columns, so the row is pinned to three once there is room for them. */
@media screen and (min-width: 1000px){
  #blogPosts{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ---- 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,
.post-card .post-image video{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  display:block;
  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 .post-author{
  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;
}
/* The arrow glyph sits a touch above the optical middle of the label beside
   it — hence the nudge back down, so it reads as level with the words. */
.post-read-more::after{
  content:" →";
  -webkit-text-fill-color:var(--pink); color:var(--pink);
  display:inline-block;
  margin-left: 4px;
  vertical-align:-.12em;
  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,
.post-card.post-view .post-image video{
  aspect-ratio:auto;
  width:auto; max-width:100%;
  object-fit:contain;
  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;
}
/* Sits above the invisible file input that blankets the label, so clicks
   reach the playback controls instead of reopening the file picker. */
.custom-file-input .video-preview{
  max-height:300px; width:auto; max-width:100%;
  border-radius:12px;
  position:relative; z-index:1;
}
.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; }
}

/* ================================================================
   10. PUBLIC POST SUBMISSION — add-post card + popup
   ================================================================ */

/* ---- The etheric "+" card ---- */
.add-post-card{
  position:relative;
  min-height:340px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border:1px solid rgba(168,85,247,.35);
  background:var(--panel);
  overflow:hidden;
}
.add-post-card .add-post-aurora{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(44,213,238,.35), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(168,85,247,.4), transparent 50%),
    radial-gradient(circle at 50% 75%, rgba(244,114,182,.35), transparent 45%);
  filter:blur(30px);
  pointer-events:none;
}
.add-post-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(246,243,255,.9), transparent 100%),
    radial-gradient(1px 1px at 72% 15%, rgba(246,243,255,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 62%, rgba(246,243,255,.8), transparent 100%),
    radial-gradient(1px 1px at 32% 78%, rgba(246,243,255,.6), transparent 100%),
    radial-gradient(1px 1px at 58% 48%, rgba(246,243,255,.7), transparent 100%);
  pointer-events:none;
}
.add-post-card .add-post-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center;
  padding:1.4rem;
}
.add-post-card .add-post-plus{
  width:86px; height:86px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:3.2rem; line-height:1;
  /* The + glyph sits below the optical center of its em box, so flex
     centering alone leaves it visually low in the circle. */
  padding-bottom:.45rem;
  color:var(--starlight);
  border-radius:50%;
  border:1px solid rgba(246,243,255,.35);
  background:rgba(246,243,255,.06);
  box-shadow:0 0 34px rgba(168,85,247,.5), inset 0 0 22px rgba(44,213,238,.25);
  transition:box-shadow .4s var(--ease);
}
.add-post-card:hover .add-post-plus{
  box-shadow:0 0 50px rgba(244,114,182,.65), inset 0 0 26px rgba(44,213,238,.4);
}
.add-post-card .add-post-text{
  margin-top:.6rem;
  font-family:var(--font-display);
  font-size:1.35rem; letter-spacing:-.01em;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.add-post-card .add-post-subtext{
  font-size:.9rem; letter-spacing:.03em;
  color:var(--haze);
}
.add-post-card:hover{
  border-color:rgba(244,114,182,.6);
  box-shadow:0 28px 64px rgba(4,2,12,.55), 0 0 60px rgba(168,85,247,.3);
}

/* ---- Popup ---- */
#publicPostOverlay{
  display:none;
  position:fixed; inset:0; z-index:1200;
  align-items:flex-start; justify-content:center;
  padding:clamp(1rem, 4vh, 3rem) var(--pad-x);
  background:rgba(4,2,12,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow-y:auto;
}
#publicPostOverlay.open{ display:flex; }
#publicPostPopup{
  position:relative;
  width:min(760px, 100%);
  margin:auto 0;
  padding:clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  background:linear-gradient(135deg, rgba(24,16,44,.97), rgba(11,8,26,.97));
  border:1px solid rgba(168,85,247,.4);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg), 0 0 80px rgba(168,85,247,.25);
}
#publicPostTitle{
  font-family:var(--font-display);
  font-weight:400; font-size:1.6rem;
  text-align:center;
  margin-bottom:.4rem;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* The ✕ is drawn from two bars rather than set as a × glyph. The glyph's ink
   sits off the centre of its text box, so rotating the button swung it up and
   to the left; two bars centred on the button's own middle spin in place. The
   &times; in the markup stays as the accessible label and is sized away. */
#publicPostClose{
  position:absolute; top:.8rem; right:1rem; z-index:2;
  width:40px; height:40px;
  font-size:0; line-height:1;
  color:var(--haze);
  background:none; border:none; cursor:pointer;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
#publicPostClose::before, #publicPostClose::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:19px; height:2px;
  margin:-1px 0 0 -9.5px;
  background:currentColor; border-radius:2px;
}
#publicPostClose::before{ transform:rotate(45deg); }
#publicPostClose::after{ transform:rotate(-45deg); }
#publicPostClose:hover{ color:var(--pink); transform:rotate(90deg); }

/* The popup itself is the glass panel — flatten the inner form so the
   admin #postForm chrome doesn't double up. Backdrop-filter is dropped
   for the same reason the admin form needs dialogsInBody (see main.js). */
#publicPostPopup #postForm{
  width:100%;
  padding:0;
  background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:none; box-shadow:none;
}
#publicPostPopup #summernoteWrapper{ width:100%; }

/* ---- Success toast ---- */
#publicPostThanks{
  position:fixed; left:50%; bottom:2rem; z-index:1300;
  transform:translateX(-50%);
  padding:.85rem 1.6rem;
  font-size:1rem; letter-spacing:.02em;
  color:var(--ink-on-grad);
  background:var(--grad-accent);
  border-radius:999px;
  box-shadow:0 14px 40px rgba(168,85,247,.5);
}

/* ================================================================
   14. IMAGE LIGHTBOX
   Click any image inside a post to blow it up over a dimmed, blurred
   copy of the page; click again (anywhere, or Esc) to drop back. The
   overlay is created on first use by assets/scripts/main.js, so no
   page has to carry the markup. z-index sits above the post popup
   (1200) and its toast (1300) — the lightbox is always the topmost
   thing on screen while it is open.
   ================================================================ */
#blogViewWrapper img{ cursor:zoom-in; }
/* An image the author wrapped in a link stays a link — the anchor wins. */
#blogViewWrapper a img{ cursor:pointer; }

#imageLightbox{
  position:fixed; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(4,2,12,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  cursor:zoom-out;
  /* Hidden by default and kept out of the tab order / hit-testing until
     .open lands, so the closed overlay can never swallow a click. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s var(--ease), visibility 0s linear .32s;
}
#imageLightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .32s var(--ease), visibility 0s;
}
#imageLightboxImage{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  margin:0;
  border-radius:16px;
  border:1px solid rgba(168,85,247,.35);
  box-shadow:var(--shadow-lg), 0 0 90px rgba(168,85,247,.22);
  transform:scale(.92);
  transition:transform .32s var(--ease);
}
#imageLightbox.open #imageLightboxImage{ transform:scale(1); }
#imageLightboxClose{
  position:absolute; top:clamp(.6rem, 2vw, 1.4rem); right:clamp(.6rem, 2vw, 1.4rem);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; line-height:1;
  color:var(--haze);
  background:none; border:none; cursor:pointer;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
#imageLightboxClose:hover{ color:var(--pink); transform:rotate(90deg); }

body.lightbox-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  #imageLightboxImage{ transform:none; transition:none; }
  #imageLightbox.open #imageLightboxImage{ transform:none; }
}

/* ================================================================
   TOUCH-DEVICE DEGRADATION  ·  iOS pinch-zoom crash guard
   Same guard as the landing page (styles.css, last section): pinch-
   zoom makes WebKit re-rasterise every composited layer at the zoomed
   scale, and five 140%-viewport will-change layers plus a backdrop-
   filter per card exhausts iPhone memory and kills the tab. Coarse-
   pointer devices keep the slow phase crossfade but lose the drift
   transforms and the layer overscan, and every backdrop-filter falls
   back to a near-opaque panel. Desktop keeps the full effect.
   ================================================================ */
@media (hover:none) and (pointer:coarse){
  .blog-phase{
    /* no drift → no overscan needed, no promoted layer */
    top:0; left:0; width:100%; height:100%;
    will-change:auto;
  }
  /* keep only the bgPhaseN opacity crossfade; drop the bgDrift transforms */
  .blog-phase--0{ animation:none; }
  .blog-phase--1{ animation:bgPhase1 var(--bg-cycle) linear infinite; }
  .blog-phase--2{ animation:bgPhase2 var(--bg-cycle) linear infinite; }
  .blog-phase--3{ animation:bgPhase3 var(--bg-cycle) linear infinite; }
  .blog-phase--4{ animation:bgPhase4 var(--bg-cycle) linear infinite; }
  /* full-screen blend layer forces an extra composite pass; at .05
     opacity its absence is invisible */
  .blog-bg__grain{ display:none; }

  body.overlayed::after{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(4,2,12,.8);
  }
  #navTop{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(8,5,20,.92);
  }
  #menuUser, #menuCategories,
  .custom-select, #categoryDropdown{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(135deg, rgba(20,14,38,.97), rgba(11,8,26,.97));
  }
  .post-card,
  #loginForm, #signupForm,
  #postForm, #categoriesForm,
  .error-page-container{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(135deg, rgba(20,14,38,.95), rgba(11,8,26,.95));
  }
  #panelSidebar{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(11,8,26,.96);
  }
  #panelMain table{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(15,10,30,.92);
  }
  #publicPostOverlay{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(4,2,12,.85);
  }
  #publicPostPopup #postForm{ background:none; }
  #imageLightbox{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(4,2,12,.94);
  }
  /* the 90px glow doubles the lightbox image's paint area */
  #imageLightboxImage{ box-shadow:var(--shadow-lg); }
}

/* While pinch-zoomed past ~1.3x the fixed background stack goes away: WebKit
   rasterises fixed layers at the zoom scale, so at 5x on a 3x-DPR phone even
   a static full-viewport layer is a tab-killing bitmap. Two steps, both
   driven from assets/scripts/main.js via visualViewport: .is-pinch-zoomed
   fades the stack out (the body's own --void base shows through), then
   ~300ms later .is-pinch-zoom-hidden display:none's it — the part that
   actually frees the memory. Zooming back out reverses: children first,
   then the fade-in. */
#blogBg{ transition:opacity .28s var(--ease); }
html.is-pinch-zoomed #blogBg{ opacity:0; }
html.is-pinch-zoom-hidden .blog-phase,
html.is-pinch-zoom-hidden .blog-bg__grain,
html.is-pinch-zoom-hidden .blog-bg__vignette{ display:none; }