/* ============================================================
   ImagesDB.ai — Main Stylesheet
   Dark-first design · CSS Custom Properties · Mobile-first
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Colors */
  --clr-primary:      #8a78ff;   /* vivid indigo-violet */
  --clr-primary-h:    #7164df;   /* deeper hover */
  --clr-secondary:    #18e4f5;   /* electric cyan */
  --clr-accent:       #f562a4;   /* hot pink */
  --clr-success:      #22d49a;   /* emerald */
  --clr-warning:      #f5b340;   /* amber */
  --clr-danger:       #ff5c72;   /* coral */
  --btn-primary-bg:   linear-gradient(135deg, #26384d 0%, #315066 55%, #2e5861 100%);
  --btn-primary-bg-h: linear-gradient(135deg, #2b4158 0%, #35586f 55%, #33646d 100%);
  --btn-primary-brd:  #3d6278;
  --btn-primary-sh:   0 10px 22px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.06) inset;
  --btn-primary-sh-h: 0 14px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.05) inset;

  /* Gradients */
  --grad-primary:     linear-gradient(135deg, #8a78ff, #18e4f5);
  --grad-hero:        linear-gradient(135deg, #050810 0%, #0d1528 55%, #0b1e35 100%);
  --grad-card:        linear-gradient(180deg, transparent 55%, rgba(0,0,0,.74) 100%);

  /* Dark palette — deep navy-black base */
  --bg:               #050810;
  --bg-2:             #0c1120;
  --surface:          #111928;
  --surface-2:        #192434;
  --surface-3:        #1e2d42;
  --border:           #253648;
  --border-2:         #304a62;
  --text:             #eef3ff;
  --text-2:           #8da6c2;
  --text-3:           #5e7488;
  --text-inv:         #050810;

  /* Typography */
  --font:             'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs:            .72rem;
  --fs-sm:            .85rem;
  --fs-base:          1rem;
  --fs-lg:            1.125rem;
  --fs-xl:            1.35rem;
  --fs-2xl:           1.65rem;
  --fs-3xl:           2.2rem;
  --fs-4xl:           3rem;

  /* Spacing */
  --sp-1:   .25rem;
  --sp-2:   .5rem;
  --sp-3:   .75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;

  /* Radii */
  --r-sm:   .4rem;
  --r-md:   .75rem;
  --r-lg:   1.25rem;
  --r-xl:   1.25rem;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.42);
  --shadow:    0 8px 24px rgba(0,0,0,.52);
  --shadow-lg: 0 20px 52px rgba(0,0,0,.64);
  --glow:      0 0 28px rgba(138,120,255,.38);
  --glow-2:    0 0 28px rgba(24,228,245,.28);

  /* Transitions */
  --trans:   .2s ease;
  --trans-md:.35s ease;

  /* Header */
  --header-h: 68px;
}

[data-theme="light"] {
  --clr-primary:      #4e46d8;
  --clr-primary-h:    #4038be;
  --clr-secondary:    #0d8fb8;
  --clr-accent:       #d83e84;
  --clr-success:      #178a63;
  --clr-warning:      #b67a20;
  --clr-danger:       #c83652;
  --btn-primary-bg:   linear-gradient(135deg, #1f3850 0%, #2f5675 55%, #2a6b70 100%);
  --btn-primary-bg-h: linear-gradient(135deg, #20405b 0%, #336187 55%, #2e7478 100%);
  --btn-primary-brd:  #3e6a8b;
  --btn-primary-sh:   0 8px 20px rgba(38,64,89,.16), 0 1px 0 rgba(255,255,255,.55) inset;
  --btn-primary-sh-h: 0 12px 24px rgba(38,64,89,.2), 0 0 0 1px rgba(255,255,255,.45) inset;

  --grad-primary:     linear-gradient(135deg, #4e46d8, #0d8fb8);
  --grad-hero:        linear-gradient(135deg, #f4f8ff 0%, #ebf3ff 55%, #e8f5ff 100%);
  --grad-card:        linear-gradient(180deg, transparent 45%, rgba(10,23,40,.12) 100%);

  --bg:               #f4f8ff;
  --bg-2:             #ebf2fc;
  --surface:          #ffffff;
  --surface-2:        #f4f8ff;
  --surface-3:        #edf3ff;
  --border:           #d7e2f2;
  --border-2:         #c3d3e8;
  --text:             #12253c;
  --text-2:           #4f6781;
  --text-3:           #6f849a;
  --text-inv:         #ffffff;

  --shadow-sm: 0 1px 4px rgba(17,38,61,.1);
  --shadow:    0 10px 24px rgba(17,38,61,.14);
  --shadow-lg: 0 20px 44px rgba(17,38,61,.16);
  --glow:      0 0 22px rgba(78,70,216,.2);
  --glow-2:    0 0 20px rgba(13,143,184,.2);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Ensure HTML hidden attribute always wins over display rules in component CSS */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:var(--fs-base);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  min-height:100vh;
  transition:background var(--trans), color var(--trans);
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--clr-primary);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--clr-secondary)}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4,h5{line-height:1.25;font-weight:700;color:var(--text)}

/* ── Layout helpers ────────────────────────────────────────── */
.container{
  width:100%;
  max-width:1635px;
  margin:0 auto;
  padding:0 var(--sp-4);
}
.container--full{max-width:none}
@media(min-width:640px){.container{padding:0 var(--sp-6)}}
@media(min-width:1024px){.container{padding:0 var(--sp-8)}}

/* ── Typography ─────────────────────────────────────────────── */
.gradient-text{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-title{font-size:var(--fs-xl);font-weight:700;color:var(--text);margin-bottom:var(--sp-6)}
.page-title  {font-size:var(--fs-3xl);font-weight:800;margin-bottom:var(--sp-3);color:var(--text)}
.page-sub    {font-size:var(--fs-lg);color:var(--text-2);margin-bottom:var(--sp-4)}
.page-count  {font-size:var(--fs-sm);color:var(--text-3);background:var(--surface-2);padding:.2em .7em;border-radius:var(--r-full);border:1px solid var(--border)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.6em 1.4em;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:600;
  transition:all var(--trans);
  white-space:nowrap;
  cursor:pointer;
  border:1.5px solid transparent;
  text-decoration:none;
  line-height:1.4;
}
.btn-lg{padding:.75em 1.8em;font-size:var(--fs-base)}
.btn-sm{padding:.38em .9em;font-size:var(--fs-xs)}
.btn-full{width:100%;justify-content:center}
.btn-primary{
  background:var(--btn-primary-bg);
  color:#f4f8ff;
  border-color:var(--btn-primary-brd);
  box-shadow:var(--btn-primary-sh);
}
.btn-primary:hover{
  background:var(--btn-primary-bg-h);
  transform:translateY(-1px);
  box-shadow:var(--btn-primary-sh-h);
  color:#fff;
}
.btn-outline{background:transparent;border-color:var(--border-2);color:var(--text-2)}
.btn-outline:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--clr-danger);color:#fff;border-color:transparent}
.btn-danger:hover{opacity:.85}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;transition:all var(--trans);
  cursor:pointer;
}
.btn-icon:hover{
  background:rgba(37,54,72,.92);
  border-color:#45657a;
  color:#eef6ff;
  box-shadow:0 0 12px rgba(255,255,255,.15);
  transform:scale(1.08);
}
.btn-icon--dl:hover{
  background:rgba(34,212,154,.22);
  border-color:rgba(34,212,154,.45);
  color:#d8fff0;
  box-shadow:0 0 14px rgba(34,212,154,.28);
  transform:scale(1.08);
}
.btn-icon--fav:hover{
  background:var(--clr-accent);
  box-shadow:0 0 12px rgba(255,255,255,.2);
}
.btn-icon--fav.active{
  background:var(--clr-accent);
  border-color:var(--clr-accent);
  box-shadow:0 0 14px rgba(245,98,164,.35);
}
.btn-fav-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(5,8,16,.6);
  backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.92);
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .18s ease;
  cursor:pointer;position:relative;z-index:3;
  pointer-events:auto;flex-shrink:0;
}
.btn-fav-pill:hover{
  background:rgba(24,228,245,.14);
  border-color:var(--clr-secondary);
  color:var(--clr-secondary);
  box-shadow:0 0 18px rgba(24,228,245,.32);
  transform:scale(1.12);
}
.btn-fav-pill.active{
  background:rgba(245,179,64,.16);
  border-color:var(--clr-warning);
  color:var(--clr-warning);
  box-shadow:0 0 20px rgba(245,179,64,.34);
}
.btn-fav-pill svg{transition:fill .18s ease,stroke .18s ease,transform .18s ease}
.btn-fav-pill.active svg{fill:currentColor}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.4em;margin-bottom:var(--sp-4)}
.form-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.form-label .required{color:var(--clr-danger)}
.form-hint{font-size:var(--fs-xs);color:var(--text-3)}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:.6em .9em;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, #ffffff 12%), color-mix(in srgb, var(--surface) 92%, #000000 8%));
  border:1.5px solid color-mix(in srgb, var(--border) 82%, var(--clr-secondary) 18%);
  border-radius:var(--r-md);
  color:var(--text);
  font-size:var(--fs-base);
  box-shadow:0 10px 22px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.04) inset;
  transition:border-color var(--trans),box-shadow var(--trans),background var(--trans),color var(--trans);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--clr-secondary);
  box-shadow:0 0 0 3px rgba(24,228,245,.14), 0 14px 28px rgba(0,0,0,.2);
}
.form-textarea{resize:vertical;min-height:80px}
.form-select{
  appearance:none;
  -webkit-appearance:none;
  font-weight:600;
  color:color-mix(in srgb, var(--text) 88%, #ffffff 12%);
  border-radius:12px 12px 10px 10px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396ddea' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:center,right .75em center;
  background-size:auto,14px 14px;
  padding-right:2.5em;
}
.form-select option{color:var(--text);background:color-mix(in srgb, var(--surface) 88%, #101826 12%)}
.form-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--border)}
.form-help{margin-top:.55rem;font-size:var(--fs-xs);color:var(--text-3)}
.form-legal{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-3);text-align:center}
.form-row-2{display:grid;gap:var(--sp-4)}
@media(min-width:640px){.form-row-2{grid-template-columns:1fr 1fr}}
.input-password-wrap{position:relative}
.input-password-wrap .form-input{padding-right:2.8em}
.toggle-pw{position:absolute;right:.7em;top:50%;transform:translateY(-50%);color:var(--text-3);transition:color var(--trans)}
.toggle-pw:hover{color:var(--text)}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert{
  display:flex;align-items:center;gap:.6em;
  padding:.85em 1.1em;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
  margin-bottom:var(--sp-5);
}
.alert-success{background:rgba(34,212,154,.12);border:1px solid rgba(34,212,154,.3);color:var(--clr-success)}
.alert-error  {background:rgba(255,92,114,.12);border:1px solid rgba(255,92,114,.3);color:var(--clr-danger)}

/* ── Header ─────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 94%, var(--clr-primary) 6%) 0%,
      color-mix(in srgb, var(--bg) 90%, var(--clr-primary) 10%) 100%);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb, var(--border) 80%, var(--clr-primary) 20%);
  box-shadow:0 8px 32px rgba(0,0,0,.3), 0 1px 0 rgba(138,120,255,.12) inset;
  transition:background var(--trans), box-shadow var(--trans);
}
.header-inner{
  display:flex;align-items:center;gap:var(--sp-4);
  height:var(--header-h);
  max-width:1440px;margin:0 auto;
  padding:0 var(--sp-4);
}
@media(min-width:640px){.header-inner{padding:0 var(--sp-6)}}
@media(min-width:1024px){.header-inner{padding:0 var(--sp-8)}}

/* Logo */
.logo{display:flex;align-items:center;gap:.5em;flex-shrink:0}
.logo-icon{flex-shrink:0;border-radius:8px}
.logo-text{font-size:1.2rem;font-weight:800;color:var(--text);letter-spacing:-.03em}
.logo-dot{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Search */
.header-search{flex:1;max-width:540px;margin:0 var(--sp-4)}
.search-wrap{position:relative;display:flex;align-items:center}
.search-ico{position:absolute;left:.85em;color:var(--text-3);pointer-events:none;flex-shrink:0}
.search-input{
  width:100%;
  height:42px;
  padding:0 5.5rem 0 2.6em;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  color:var(--text);
  font-size:var(--fs-sm);
  transition:border-color var(--trans),box-shadow var(--trans);
}
.search-input::placeholder{color:var(--text-3)}
.search-input:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(138,120,255,.15);background:var(--surface)}
.search-btn{
  position:absolute;right:5px;
  height:32px;
  padding:0 .9em;
  background:linear-gradient(135deg, rgba(35,50,68,.98), rgba(45,78,92,.98));
  border:1px solid #406274;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  color:#f2f7ff;
  border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;
  transition:background var(--trans),border-color var(--trans),transform var(--trans),box-shadow var(--trans);
}
.search-btn:hover{
  background:linear-gradient(135deg, rgba(41,60,80,.98), rgba(51,89,102,.98));
  border-color:#4c7387;
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.24);
}

/* Nav */
.header-nav{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
 /* padding:.3em;*/
  border-radius:var(--r-full);
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  /*border:1px solid var(--border);*/
}
.nav-link{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text-2);
  padding:.43em .75em;
  border-radius:var(--r-full);
  transition:all var(--trans);
  border:1px solid transparent;
}
.nav-link:hover,.nav-link.active{
  color:var(--text);
  background:rgba(138,120,255,.14);
  /*border-color:rgba(138,120,255,.32);*/
}
.nav-link--highlight{color:var(--clr-secondary)}
.nav-link--admin{color:var(--clr-accent)}
.nav-cta{margin-left:.3em;
font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    padding: .43em .75em;
    border-radius: var(--r-full);
    transition: all var(--trans);
    border: 1px solid transparent;
  }

/* User menu */
.nav-user{position:relative}
.user-btn{
  display:flex;align-items:center;gap:.5em;
  padding:.35em .7em;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:var(--fs-sm);font-weight:500;
  transition:all var(--trans);
}
.user-btn:hover{background:var(--surface-3)}
.user-avatar{
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
.user-avatar__svg{display:block;width:100%;height:100%}
.user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:200px;
  background:
    radial-gradient(circle at 100% 0%, rgba(24,228,245,.12), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface-2) 94%, #000000 6%));
 /* border:1px solid color-mix(in srgb, var(--border-2) 72%, var(--clr-secondary) 28%);*/
  border-radius:18px;
  box-shadow:0 20px 42px rgba(0,0,0,.34), 0 0 0 1px rgba(24,228,245,.06) inset;
  padding:.5em;
  z-index:200;
  display:none;
  animation:fadeDown .15s ease;
}
.user-dropdown.open{display:block}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dropdown-item{
  display:flex;align-items:center;
  padding:.65em .9em;
  border-radius:12px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:color-mix(in srgb, var(--text-2) 82%, #ffffff 18%);
  transition:all var(--trans);
  white-space:nowrap;
}
.dropdown-item:hover{
  background:linear-gradient(90deg, rgba(24,228,245,.12), rgba(24,228,245,.04));
  color:var(--text);
  transform:translateX(2px);
}
.dropdown-item--danger:hover{background:rgba(255,92,114,.1);color:var(--clr-danger)}
.dropdown-sep{height:1px;background:color-mix(in srgb, var(--border) 76%, var(--clr-secondary) 24%);margin:.4em .45em}

/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.hamburger span{display:block;width:18px;height:2px;background:var(--text-2);border-radius:2px;transition:all var(--trans)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-top:1px solid rgba(138,120,255,.2);
  border-bottom:1px solid var(--border);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  gap:.35em;
  animation:fadeDown .15s ease;
  box-shadow:0 20px 40px rgba(0,0,0,.36);
}
.mobile-menu[hidden]{display:none !important}
.mobile-link{
  padding:.75em .9em;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--text-2);
  transition:all var(--trans);
}
.mobile-link:hover{background:var(--surface-2);color:var(--text)}
.mobile-link.active{background:rgba(138,120,255,.16);color:var(--clr-primary);border:1px solid rgba(138,120,255,.28)}
.mobile-link--highlight{background:var(--grad-primary);color:#fff !important;margin-top:.3em}
.mobile-link--danger{color:var(--clr-danger)}

@media(max-width:900px){
  .header-search{max-width:240px}
  .nav-link,.nav-cta{display:none}
  .header-nav{padding:.25em .3em;background:transparent;border-color:transparent}
  .user-name{display:none}
  .hamburger{display:flex}
}
@media(max-width:600px){
  .header-inner{gap:var(--sp-2);padding:0 var(--sp-3)}
  .logo-image{width:132px;height:auto}
  .header-search{display:none}
  .header-nav{margin-left:auto}
  .header-nav{gap:var(--sp-1)}
  .user-btn{padding:.3em .5em}
  .mobile-menu{padding:var(--sp-3)}
}
@media(min-width:901px){
  .mobile-menu{display:none !important}
}

/* Scroll to top */
.scroll-top-btn{
  position:fixed;
  right:18px;
  bottom:20px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 70%, var(--clr-secondary) 30%);
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 85%, #fff 15%), color-mix(in srgb, var(--surface-2) 92%, #000 8%));
  color:var(--text);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  z-index:140;
  transition:opacity .2s ease, transform .2s ease, background var(--trans), border-color var(--trans);
}
.scroll-top-btn:hover{
  border-color:color-mix(in srgb, var(--clr-secondary) 48%, var(--border) 52%);
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 78%, #fff 22%), color-mix(in srgb, var(--surface-2) 88%, #000 12%));
}
.scroll-top-btn.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media(max-width:600px){
  .scroll-top-btn{right:14px;bottom:16px;width:42px;height:42px}
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{
  background:var(--grad-hero);
  padding:var(--sp-20) var(--sp-4) var(--sp-16);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 58% at 50% -12%, rgba(138,120,255,.32), transparent),
    radial-gradient(ellipse 55% 44% at 90% 88%, rgba(24,228,245,.2), transparent),
    radial-gradient(ellipse 42% 52% at 4% 66%, rgba(245,98,164,.12), transparent);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:760px;margin:0 auto}
.hero-title{font-size:clamp(2rem,6vw,4.2rem);font-weight:900;line-height:1.08;margin-bottom:var(--sp-4)}
.hero-sub{font-size:var(--fs-lg);color:var(--text-2);margin-bottom:var(--sp-8);max-width:560px;margin-left:auto;margin-right:auto;margin-bottom:var(--sp-8)}
.hero-form{max-width:600px;margin:0 auto var(--sp-6)}
.hero-input-wrap{
  position:relative;
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--surface) 94%, var(--clr-primary) 6%);
  border:1.5px solid var(--border-2);
  border-radius:var(--r-full);
  padding:5px;
  box-shadow:var(--shadow-lg);
  transition:border-color var(--trans),box-shadow var(--trans);
}
.hero-input-wrap:focus-within{border-color:var(--clr-primary);box-shadow:var(--glow)}
.hi-ico{position:absolute;left:1.1em;color:var(--text-3);pointer-events:none;flex-shrink:0}
.hero-input{
  flex:1;
  height:48px;
  padding:0 1em 0 2.8em;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:var(--fs-base);
}
.hero-input:focus{outline:none}
.hero-btn{height:38px;padding:0 1.4em;border-radius:calc(var(--r-full) - 3px)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;margin-top:var(--sp-4)}
.chip{
  padding:.3em .9em;
  background:rgba(138,120,255,.12);
  border:1px solid rgba(138,120,255,.25);
  border-radius:var(--r-full);
  color:var(--clr-primary);
  font-size:var(--fs-xs);font-weight:500;
  transition:all var(--trans);
}
.chip:hover{background:rgba(138,120,255,.22);color:var(--clr-primary);border-color:var(--clr-primary)}
.hero-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
.hero-stat{text-align:center}
.hs-num{display:block;font-size:var(--fs-2xl);font-weight:800;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs-lbl{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.hero-stat-sep{width:1px;height:36px;background:linear-gradient(180deg, transparent, var(--border-2) 50%, transparent)}

/* ── Category bar ───────────────────────────────────────────── */
.cat-bar{
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border-bottom:1px solid var(--border);
  padding:.75em 0;
  overflow:hidden;
}
.cat-pills{
  display:flex;align-items:center;gap:.5em;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.cat-pills::-webkit-scrollbar{display:none}
.cp{
  display:flex;align-items:center;gap:.4em;
  padding:.35em .9em;
  border-radius:var(--r-full);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-2);
  font-size:var(--fs-sm);font-weight:500;
  white-space:nowrap;
  transition:all var(--trans);
  flex-shrink:0;
}
.cp:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-2)}
.cp--active{background:rgba(138,120,255,.15);border-color:var(--clr-primary);color:var(--clr-primary)}
.cp-count{font-size:var(--fs-xs);color:var(--text-3);background:var(--surface-3);padding:.1em .45em;border-radius:var(--r-full)}

/* ── Grid controls ──────────────────────────────────────────── */
.grid-controls{padding:var(--sp-6) 0 0}
.gc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.gc-title{font-size:var(--fs-xl);font-weight:700;display:flex;align-items:center;gap:.5em;margin:0}
.gc-count{font-size:var(--fs-sm);color:var(--text-3);background:var(--surface-2);padding:.15em .6em;border-radius:var(--r-full);border:1px solid var(--border)}
.gc-sort{display:flex;gap:.4em}
.sort-btn{padding:.4em .9em;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);border:1px solid var(--border);background:var(--surface-2);transition:all var(--trans)}
.sort-btn:hover{color:var(--text);background:var(--surface-3)}
.sort-btn--active{background:rgba(138,120,255,.15);border-color:var(--clr-primary);color:var(--clr-primary)}

/* ── Masonry grid ───────────────────────────────────────────── */
.masonry{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  width:100%;
  --masonry-gap: 12px;
  gap:var(--masonry-gap);
  margin-bottom:var(--sp-10);
}

.masonry .masonry-sizer{display:none}

.masonry .img-card{
  width:auto;
  margin:0;
}
@media(min-width:560px){
  .masonry{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(min-width:900px){
  .masonry{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media(min-width:1220px){
  .masonry{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media(min-width:1560px){
  .masonry{grid-template-columns:repeat(5, minmax(0, 1fr))}
}
@media(min-width:1940px){
  .masonry{grid-template-columns:repeat(6, minmax(0, 1fr))}
}

.masonry--sm{grid-template-columns:1fr}
@media(min-width:720px){
  .masonry--sm{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(min-width:1160px){
  .masonry--sm{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* Home feed variant: dense mixed-height masonry like modern inspiration boards */
.masonry--feed{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  --masonry-gap: 10px;
  gap:var(--masonry-gap);
}

.masonry--feed .masonry-sizer{display:none}

.masonry--feed .img-card{
  width:auto;
  margin:0;
  border-radius:0;
  border:0;
  background:transparent;
  overflow:hidden;
}
@media(min-width:620px){
  .masonry--feed{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(min-width:980px){
  .masonry--feed{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media(min-width:1280px){
  .masonry--feed{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media(min-width:1620px){
  .masonry--feed{grid-template-columns:repeat(5, minmax(0, 1fr))}
}
@media(min-width:1920px){
  .masonry--feed{grid-template-columns:repeat(6, minmax(0, 1fr))}
}
@media(min-width:2300px){
  .masonry--feed{grid-template-columns:repeat(7, minmax(0, 1fr))}
}
.masonry--feed .img-card:hover{transform:none}
.masonry--feed .img-card__media{background:#0b1024}
.masonry--feed .img-card__img{height:auto}
.masonry--feed .img-card__overlay{
  opacity:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 44%),
    linear-gradient(0deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 44%);
  padding:var(--sp-2);
}
.masonry--feed .img-card__actions{gap:.3em}
.masonry--feed .btn-icon{
  width:28px;height:28px;
  border-radius:8px;
  background:rgba(5,8,16,.65);
  border:1px solid rgba(255,255,255,.18);
}
.masonry--feed .btn-fav-pill{width:30px;height:30px}
.masonry--feed .img-card__views-chip{font-size:.63rem}
.masonry--feed .img-card__meta{align-self:flex-start;gap:.3em}
.masonry--feed .img-card__badge{
  font-size:.62rem;
  letter-spacing:.015em;
  background:rgba(5,8,16,.7);
  border:1px solid rgba(255,255,255,.18);
}
.masonry--feed .img-card__title{font-size:.75rem;-webkit-line-clamp:1;line-clamp:1}

@media(max-width:480px){
  .masonry--feed{--masonry-gap:var(--sp-2)}
  .masonry--feed .img-card{margin-bottom:var(--sp-2)}
}

@media(max-width:520px){
  .masonry,.masonry--sm,.masonry--feed{--masonry-gap:var(--sp-3)}
}

.masonry.masonry--enhanced,
.masonry--sm.masonry--enhanced,
.masonry--feed.masonry--enhanced{
  display:block;
  gap:0;
}

.masonry.masonry--enhanced .masonry-sizer,
.masonry--sm.masonry--enhanced .masonry-sizer,
.masonry--feed.masonry--enhanced .masonry-sizer{display:block}

.masonry.masonry--enhanced .img-card,
.masonry--sm.masonry--enhanced .img-card,
.masonry--feed.masonry--enhanced .img-card{margin:0 0 var(--masonry-gap)}

.masonry.masonry--enhanced .masonry-sizer{width:100%}
.masonry.masonry--enhanced .img-card{width:100%}
@media(min-width:560px){
  .masonry.masonry--enhanced .masonry-sizer{width:calc((100% - var(--masonry-gap)) / 2)}
  .masonry.masonry--enhanced .img-card{width:calc((100% - var(--masonry-gap)) / 2)}
}
@media(min-width:900px){
  .masonry.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
  .masonry.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
}
@media(min-width:1220px){
  .masonry.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 3)) / 4)}
  .masonry.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 3)) / 4)}
}
@media(min-width:1560px){
  .masonry.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 4)) / 5)}
  .masonry.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 4)) / 5)}
}
@media(min-width:1940px){
  .masonry.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 5)) / 6)}
  .masonry.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 5)) / 6)}
}

.masonry--sm.masonry--enhanced .img-card{width:100%}
.masonry--sm.masonry--enhanced .masonry-sizer{width:100%}
@media(min-width:720px){
  .masonry--sm.masonry--enhanced .masonry-sizer{width:calc((100% - var(--masonry-gap)) / 2)}
  .masonry--sm.masonry--enhanced .img-card{width:calc((100% - var(--masonry-gap)) / 2)}
}
@media(min-width:1160px){
  .masonry--sm.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
  .masonry--sm.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
}

.masonry--feed.masonry--enhanced .masonry-sizer{width:100%}
.masonry--feed.masonry--enhanced .img-card{width:100%}
@media(min-width:620px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - var(--masonry-gap)) / 2)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - var(--masonry-gap)) / 2)}
}
@media(min-width:980px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 2)) / 3)}
}
@media(min-width:1280px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 3)) / 4)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 3)) / 4)}
}
@media(min-width:1620px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 4)) / 5)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 4)) / 5)}
}
@media(min-width:1920px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 5)) / 6)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 5)) / 6)}
}
@media(min-width:2300px){
  .masonry--feed.masonry--enhanced .masonry-sizer{width:calc((100% - (var(--masonry-gap) * 6)) / 7)}
  .masonry--feed.masonry--enhanced .img-card{width:calc((100% - (var(--masonry-gap) * 6)) / 7)}
}

/* ── Image Card ─────────────────────────────────────────────── */
.img-card{
  position:relative;
  border-radius:0;
  overflow:hidden;
  background:transparent;
  border:0;
  transition:none;
  cursor:pointer;
}
.img-card:hover{transform:none;box-shadow:none;border-color:transparent}
.img-card__stretched-link{position:absolute;inset:0;z-index:1}
.img-card__stretched-link:focus-visible{outline:2px solid var(--clr-primary);outline-offset:2px}
.img-card__media{position:relative;overflow:hidden;background:var(--surface-2);line-height:0}
.img-card__img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  display:block;
  transition:transform .4s ease,filter .3s ease;
}
.img-card:hover .img-card__img{transform:scale(1.04)}
.img-card__overlay{
  position:absolute;inset:0;
  background:var(--grad-card);
  opacity:0;
  transition:opacity .25s ease;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:var(--sp-2);
  z-index:2;
  pointer-events:none;
}
.img-card:hover .img-card__overlay{opacity:1}
.img-card__overlay-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.35em}
.img-card__views-chip{
  display:inline-flex;align-items:center;gap:.28em;
  padding:.24em .6em;
  background:rgba(5,8,16,.65);
  backdrop-filter:blur(10px);
  border-radius:var(--r-full);
  font-size:.67rem;font-weight:600;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;line-height:1;
}
.img-card__actions{display:flex;gap:.35em;align-items:center;pointer-events:auto}
.img-card__meta{display:flex;flex-wrap:wrap;gap:.3em;align-self:flex-end}
.img-card__badge{
  padding:.2em .55em;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  border-radius:var(--r-full);
  font-size:.68rem;font-weight:600;
  color:#fff;
  text-transform:capitalize;
}
.img-card__badge--muted{opacity:.7}
.img-card__title{
  position:absolute;bottom:0;left:0;right:0;
  z-index:3;
  padding:.55em .7em .65em;
  margin:0;
  font-size:.8rem;font-weight:600;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Lazy loading */
.lazy{opacity:0;transition:opacity .4s ease}
.lazy.loaded{opacity:1}

/* ── Grid section + grid section spacing ────────────────────── */
.grid-section{padding-bottom:var(--sp-12)}

/* ── Tags ───────────────────────────────────────────────────── */
.tags-section{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:var(--sp-12) 0;
}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.6em}
.tag-pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.38em .9em;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  color:var(--text-2);
  font-size:var(--fs-sm);font-weight:500;
  transition:all var(--trans);
}
.tag-pill:hover{background:rgba(138,120,255,.12);border-color:var(--clr-primary);color:var(--clr-primary)}
.tp-count{font-size:var(--fs-xs);color:var(--text-3)}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:.35em;
  font-size:var(--fs-sm);color:var(--text-3);
  padding:var(--sp-6) 0 var(--sp-4);
}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--clr-primary)}
.breadcrumb span[aria-current]{color:var(--text)}

/* ── Page header ────────────────────────────────────────────── */
.page-header{margin-bottom:0px}

/* ── Image detail page ──────────────────────────────────────── */
.page-image{padding-bottom:var(--sp-16)}
.img-detail-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  margin-bottom:var(--sp-12);
}
@media(min-width:900px){.img-detail-layout{grid-template-columns:1fr 340px}}
@media(min-width:1200px){.img-detail-layout{grid-template-columns:1fr 400px}}
.img-preview-wrap{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(138,120,255,.14), transparent 46%),
    radial-gradient(circle at 88% 84%, rgba(24,228,245,.1), transparent 46%),
    var(--surface);
  /*border:1px solid var(--border-2);*/
  box-shadow:0 16px 48px rgba(0,0,0,.48), 0 0 0 1px rgba(138,120,255,.08) inset;
}
.img-preview{width:100%;height:auto;display:block;max-height:85vh;object-fit:contain;cursor:zoom-in}
.img-expand-btn{
  position:absolute;
  top:var(--sp-3);
  right:var(--sp-3);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.4em .7em;
  border-radius:var(--r-full);
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  font-size:var(--fs-xs);
  font-weight:600;
  transition:all var(--trans);
}
.img-expand-btn:hover{background:rgba(0,0,0,.72)}

.img-info-col{
  gap:var(--sp-6);
}
.img-title{
  letter-spacing:-.02em;
  text-wrap:balance;
}
.img-desc{
  color:var(--text-2);
  line-height:1.8;
}
.img-desc-model{font-size:var(--fs-sm);color:var(--text-2);margin-top:-.35em}
.img-desc-model strong{color:var(--clr-secondary);font-weight:700}

/* Lightbox overlay */
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none; /* never intercept clicks while invisible */
  transition:opacity .25s ease;
}
.image-lightbox.open{opacity:1;pointer-events:auto;}
.image-lightbox.open .image-lightbox__dialog{transform:scale(1);opacity:1}

/* Dialog card — auto-sized to image */
.image-lightbox__dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  max-width:min(96vw, 1600px);
  max-height:96vh;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), var(--surface));
 /* border:1px solid color-mix(in srgb, var(--border-2) 75%, var(--clr-secondary) 25%);*/
  border-radius:15px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  overflow:hidden;
  transform:scale(.93);
  opacity:0;
  transition:transform .28s cubic-bezier(.22,.68,0,1.2), opacity .22s ease;
}

/* Header */
.image-lightbox__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, #ffffff 10%), var(--surface));
}
.image-lightbox__title{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.image-lightbox__header-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
}

/* Close button */
.image-lightbox__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-2);
  transition:all var(--trans);
}
.image-lightbox__close:hover{background:var(--clr-danger);border-color:var(--clr-danger);color:#fff}

/* Body: scrollable if image is very tall */
.image-lightbox__body{
  flex:1;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  background:var(--bg-2);
}
.image-lightbox__img{
  display:block;
  max-width:min(96vw, 1600px);
  max-height:calc(96vh - 100px);
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Footer */
.image-lightbox__footer{
  flex-shrink:0;
  padding:var(--sp-2) var(--sp-4);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  display:flex;
  align-items:center;
}
.image-lightbox__dims{
  font-size:var(--fs-xs);
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.img-info-col{display:flex;flex-direction:column;gap:var(--sp-5)}
.img-title{font-size:var(--fs-2xl);font-weight:800;line-height:1.2}
.img-desc{color:var(--text-2);font-size:var(--fs-base);line-height:1.7}
.img-desc-model{font-size:var(--fs-sm);color:var(--text-2)}
.img-actions{display:flex;gap:.75em;flex-wrap:wrap}
.btn-download{
  flex:1;
  justify-content:center;
  position:relative;
  padding:.58em 1.2em;
  font-size:.93rem;
  border:1px solid #3f6477;
  background:linear-gradient(135deg, #24384c 0%, #2c4c60 58%, #315a5d 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
  letter-spacing:.01em;
}
.btn-download:hover{
  transform:translateY(-2px) scale(1.01);
  background:linear-gradient(135deg, #294258 0%, #32566b 58%, #386463 100%);
  box-shadow:0 16px 32px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.btn-download svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.btn-lightbox-download{
  border-radius:var(--r-full);
  padding:.42em 1em;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.btn-fav{
  flex-shrink:0;
  width:52px;
  height:52px;
  padding:0;
  justify-content:center;
  border-radius:50%;
}
.btn-fav.active{
  border-color:rgba(245,179,64,.45);
  background:rgba(245,179,64,.14);
  color:var(--clr-warning);
}
.btn-fav.active svg{fill:currentColor}
.img-meta{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:.5em;
  box-shadow:var(--shadow-sm);
}
.meta-row{display:flex;align-items:baseline;gap:.5em;justify-content:space-between;flex-wrap:wrap}
.meta-row dt{color:var(--text-3);font-size:var(--fs-sm);flex-shrink:0}
.meta-row dd{font-size:var(--fs-sm);font-weight:500;color:var(--text);text-align:right}
.tags-heading{font-size:var(--fs-sm);font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5em}
.tag-list{display:flex;flex-wrap:wrap;gap:.4em}
.tag-chip{
  padding:.28em .7em;
  background:rgba(138,120,255,.1);
  border:1px solid rgba(138,120,255,.2);
  border-radius:var(--r-full);
  color:var(--clr-primary);
  font-size:var(--fs-xs);font-weight:500;
  transition:all var(--trans);
}
.tag-chip:hover{background:rgba(138,120,255,.2)}
.img-prompt{background:linear-gradient(180deg, var(--surface), var(--surface-2));border:1px solid var(--border-2);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.prompt-text{
  color:var(--text-2);font-size:var(--fs-sm);font-style:italic;line-height:1.7;
  margin-bottom:.6em;
  border-left:3px solid var(--clr-primary);
  padding-left:.75em;
}
.copy-prompt{color:var(--clr-primary);font-size:var(--fs-xs);font-weight:600}
.copy-prompt:hover{opacity:.75}
.share-btns{display:flex;flex-wrap:wrap;gap:.5em}
.share-btn{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.4em .9em;
  border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  transition:all var(--trans);
  cursor:pointer;
}
.share-btn svg{width:14px;height:14px;flex-shrink:0}
.share-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary);transform:translateY(-1px)}
.share-btn--twitter:hover{border-color:#111111;color:#111111;background:rgba(255,255,255,.08)}
.share-btn--facebook:hover{border-color:#1877f2;color:#1877f2;background:rgba(24,119,242,.12)}
.share-btn--linkedin:hover{border-color:#0a66c2;color:#0a66c2;background:rgba(10,102,194,.12)}
.share-btn--telegram:hover{border-color:#2aabee;color:#2aabee;background:rgba(42,171,238,.12)}
.share-btn--whatsapp:hover{border-color:#25d366;color:#25d366;background:rgba(37,211,102,.12)}
.share-btn--reddit:hover{border-color:#ff4500;color:#ff4500;background:rgba(255,69,0,.12)}
.share-btn--twitter:hover{border-color:#1d9bf0;color:#1d9bf0}
.share-btn--pinterest:hover{border-color:#e60023;color:#e60023}
.share-btn--email:hover{border-color:#f5a623;color:#f5a623;background:rgba(245,166,35,.12)}
.share-btn--copy:hover{border-color:var(--clr-secondary);color:var(--clr-secondary);background:rgba(24,228,245,.12)}
.related-section{padding:var(--sp-12) 0}
.related-section .section-title{margin-bottom:var(--sp-6)}

@media(max-width:640px){
  .img-actions{gap:.55em}
  .btn-download{width:100%}
  .image-lightbox__dialog{border-radius:20px}
}

/* ── Category cards ─────────────────────────────────────────── */
.page-categories{padding:var(--sp-8) 0 var(--sp-16)}
.categories-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(260px, .8fr);
  gap:var(--sp-6);
  align-items:stretch;
  margin-bottom:var(--sp-8);
}
.categories-hero__content,
.categories-hero__panel-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
 /* border:1px solid color-mix(in srgb, var(--border-2) 75%, var(--clr-secondary) 25%);*/
  background:
    radial-gradient(circle at 14% 18%, rgba(24,228,245,.14), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(245,98,164,.12), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface-2) 95%, #000000 5%));
  box-shadow:0 22px 46px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.categories-hero__content{padding:var(--sp-7)}
.categories-hero__header{margin: 10px; margin-bottom:var(--sp-6)}
.categories-kicker{
  display:inline-flex;align-items:center;
  margin-bottom:var(--sp-3);
  padding:.28em .75em;
  border-radius:var(--r-full);
  background:rgba(24,228,245,.1);
  border:1px solid rgba(24,228,245,.18);
  color:var(--clr-secondary);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.categories-hero .page-sub{max-width:62ch;color:var(--text-2)}
.categories-hero__stats{margin: 5px; display:flex;gap:var(--sp-4);flex-wrap:wrap}
.categories-stat{
  min-width:170px;
  padding:var(--sp-4) var(--sp-5);
  border-radius:18px;
  background:rgba(8,13,24,.5);
  border:1px solid rgba(255,255,255,.08);
}
.categories-stat__value{display:block;font-size:clamp(1.35rem, 2vw, 2rem);font-weight:800;color:var(--text)}
.categories-stat__label{display:block;margin-top:.15em;font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.categories-hero__panel{display:flex}
.categories-hero__panel-card{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--sp-6);
}
.categories-panel__eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--clr-warning);font-weight:700}
.categories-panel__title{display:block;margin-top:.5em;font-size:var(--fs-xl);line-height:1.15;color:var(--text)}
.categories-panel__text{margin-top:.75em;color:var(--text-2);max-width:28ch}
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-5);
  margin-top:var(--sp-4);
}
.cat-card{
  position:relative;
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface-2) 94%, #000000 6%));
 /* border:1px solid color-mix(in srgb, var(--border) 78%, #ffffff 22%);*/
  border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.03) inset;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
  color:inherit;
}
.cat-card:hover{border-color:color-mix(in srgb, var(--clr-secondary) 35%, #ffffff 15%);box-shadow:0 22px 48px rgba(0,0,0,.24), 0 0 28px rgba(24,228,245,.12);transform:translateY(-4px)}
.cat-card__icon{
  position:relative;
  width:64px;height:64px;flex-shrink:0;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--clr-secondary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 20px rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
}
.cat-card__icon::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity:.6;
  pointer-events:none;
}
.cat-card__icon svg{
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cat-card:hover .cat-card__icon{
  transform:translateY(-2px) scale(1.03);
}
.cat-card__body{flex:1;min-width:0}
.cat-card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:.65em;flex-wrap:wrap}
.cat-card__name{font-size:1.05rem;font-weight:750;margin-bottom:.3em;letter-spacing:-.01em}
.cat-card__desc{font-size:var(--fs-sm);color:var(--text-3);overflow:hidden;line-clamp:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:0}
.cat-card__count{
  display:inline-flex;align-items:center;
  padding:.28em .75em;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-2);
}
.cat-card__browse{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.cat-card__arrow{color:var(--text-3);flex-shrink:0;transition:transform var(--trans), color var(--trans)}
.cat-card:hover .cat-card__arrow{transform:translateX(4px);color:var(--text)}
.cat-card--aqua .cat-card__icon{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(155deg, rgba(24,228,245,.3), rgba(24,228,245,.08));
  color:var(--clr-secondary);
  border-color:rgba(24,228,245,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px rgba(24,228,245,.18);
}
.cat-card--violet .cat-card__icon{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(155deg, rgba(138,120,255,.34), rgba(138,120,255,.1));
  color:var(--clr-primary);
  border-color:rgba(138,120,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px rgba(138,120,255,.2);
}
.cat-card--amber .cat-card__icon{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(155deg, rgba(245,179,64,.35), rgba(245,179,64,.1));
  color:var(--clr-warning);
  border-color:rgba(245,179,64,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px rgba(245,179,64,.18);
}
.cat-card--rose .cat-card__icon{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.25), transparent 34%),
    linear-gradient(155deg, rgba(245,98,164,.34), rgba(245,98,164,.1));
  color:var(--clr-accent);
  border-color:rgba(245,98,164,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px rgba(245,98,164,.18);
}

@media(max-width:900px){
  .categories-hero{grid-template-columns:1fr}
}
@media(max-width:640px){
  .categories-hero__content,
  .categories-hero__panel-card,
  .cat-card{padding:var(--sp-5)}
  .categories-grid{grid-template-columns:1fr}
}

/* ── Search page ────────────────────────────────────────────── */
.page-search{padding:var(--sp-6) 0 var(--sp-16)}
.search-page-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.search-page-header h1{font-size:var(--fs-2xl);margin:0;letter-spacing:-.015em}
.page-count{
  display:inline-flex;align-items:center;
  padding:.2em .65em;
  border-radius:var(--r-full);
  background:rgba(24,228,245,.1);
  border:1px solid rgba(24,228,245,.18);
  color:var(--clr-secondary);
  font-size:var(--fs-sm);
  font-weight:600;
}
.filter-bar{
  background:
    radial-gradient(circle at 12% -30%, rgba(24,228,245,.16), transparent 48%),
    radial-gradient(circle at 92% 120%, rgba(245,98,164,.12), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #ffffff 10%), color-mix(in srgb, var(--surface-2) 92%, #000000 8%));
  border:1px solid color-mix(in srgb, var(--border-2) 78%, var(--clr-secondary) 22%);
  border-radius:18px;
  padding:var(--sp-5);
  margin-bottom:var(--sp-5);
  box-shadow:0 20px 44px rgba(0,0,0,.24), 0 0 0 1px rgba(24,228,245,.05) inset;
}
.filter-query-row{margin-bottom:var(--sp-4)}
.filter-query-label{
  display:block;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:.45em;
}
.filter-query-wrap{
  position:relative;
  display:flex;
  align-items:center;
  background:color-mix(in srgb, var(--surface) 84%, #ffffff 16%);
  border:1px solid color-mix(in srgb, var(--border-2) 72%, var(--clr-secondary) 28%);
  border-radius:var(--r-full);
  padding:4px;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.filter-query-wrap:focus-within{border-color:var(--clr-secondary);box-shadow:0 0 0 3px rgba(24,228,245,.14)}
.filter-query-icon{position:absolute;left:.9em;color:var(--text-3);pointer-events:none}
.filter-query-input{
  width:100%;
  height:42px;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  padding:0 6.1rem 0 2.6rem;
  font-size:var(--fs-sm);
}
.filter-query-input::placeholder{color:var(--text-3)}
.filter-query-btn{position:absolute;right:5px;height:32px;border-radius:var(--r-full);padding:0 1em}
.filter-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:var(--sp-3);
  align-items:end;
}
.filter-group{display:flex;flex-direction:column;gap:.38em;min-width:0}
.filter-label{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--fs-xs);font-weight:700;
  color:color-mix(in srgb, var(--text-2) 78%, var(--clr-secondary) 22%);
  text-transform:uppercase;letter-spacing:.06em;
}
.filter-label svg{color:var(--clr-secondary);flex-shrink:0;opacity:.95}
.filter-select-wrap{position:relative}
.filter-select-icon{
  position:absolute;
  top:55%;left:.8em;
  transform:translateY(-50%);
  color:color-mix(in srgb, var(--clr-secondary) 72%, #ffffff 28%);
  pointer-events:none;
  z-index:1;
}
.filter-select{
  appearance:none;
  -webkit-appearance:none;
  height:40px;
  width:100%;
  padding:.42em 2.4em .42em 2.55em;
  font-size:var(--fs-sm);
  font-weight:600;
  color:color-mix(in srgb, var(--text) 88%, #ffffff 12%);
  border:1px solid color-mix(in srgb, var(--border-2) 80%, var(--clr-secondary) 20%);
  border-radius:12px 12px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    color-mix(in srgb, var(--surface) 90%, #182130 10%);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2396ddea' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    color-mix(in srgb, var(--surface) 90%, #182130 10%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center, right .82em center, center;
  background-size:auto, 12px 12px, auto;
  box-shadow:0 10px 20px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.04) inset;
}
.filter-select option{color:var(--text);background:color-mix(in srgb, var(--surface) 88%, #101826 12%)}
.filter-select:focus{outline:none;border-color:var(--clr-secondary);box-shadow:0 0 0 3px rgba(24,228,245,.14)}
.filter-clear{
  display:flex;align-items:center;gap:.35em;
  justify-content:center;
  min-height:40px;
  padding:.4em .95em;
  border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:600;
  color:var(--clr-warning);
  border:1px solid rgba(245,179,64,.32);
  background:rgba(245,179,64,.12);
  transition:all var(--trans);
  white-space:nowrap;
}
.filter-clear:hover{background:rgba(245,179,64,.18);color:var(--clr-warning);transform:translateY(-1px)}
.active-tag-filter{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.4em .9em;
  background:rgba(24,228,245,.1);
  border:1px solid rgba(24,228,245,.18);
  border-radius:var(--r-full);
  font-size:var(--fs-sm);
  color:var(--clr-secondary);
  margin-bottom:var(--sp-4);
}
.remove-filter{font-size:1.1rem;font-weight:700;line-height:1;color:var(--clr-secondary)}

@media(max-width:1050px){
  .filter-row{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:640px){
  .filter-bar{padding:var(--sp-4)}
  .filter-row{grid-template-columns:1fr}
  .filter-query-input{height:40px;padding-right:5.8rem}
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.4em;
  padding:var(--sp-8) 0;
}
.page-btn{
  display:flex;align-items:center;gap:.3em;
  min-width:38px;height:38px;
  padding:0 .75em;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:500;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-2);
  transition:all var(--trans);
  justify-content:center;
}
.page-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary);background:rgba(138,120,255,.08)}
.page-btn--active{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff;font-weight:700}
.page-btn--active:hover{opacity:.88;color:#fff}
.page-dots{color:var(--text-3);padding:0 .25em}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state{
  text-align:center;
  padding:var(--sp-16) var(--sp-8);
  color:var(--text-3);
}
.empty-state svg{margin:0 auto var(--sp-4);opacity:.4}
.empty-state h3{font-size:var(--fs-xl);font-weight:700;margin-bottom:.5em;color:var(--text-2)}
.empty-state p{font-size:var(--fs-base);margin-bottom:var(--sp-6)}

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-page{
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem, 3vw, 2.5rem) var(--sp-4);
  background:
    radial-gradient(circle at 12% 12%, rgba(24,228,245,.08), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(245,98,164,.08), transparent 24%),
    linear-gradient(180deg, #060a12 0%, #0a111d 48%, #08111b 100%);
}
.auth-shell{width:100%;max-width:1180px;display:grid;gap:var(--sp-6);align-items:stretch}
.auth-aside{
  position:relative;
  overflow:hidden;
  padding:clamp(1.6rem, 3vw, 2.3rem);
  border-radius:30px;
  background:
    radial-gradient(circle at top right, rgba(24,228,245,.16), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(138,120,255,.16), transparent 30%),
    linear-gradient(145deg, rgba(10,18,31,.96), rgba(15,25,40,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.26);
}
.auth-kicker{
  display:inline-flex;align-items:center;
  padding:.38em .78em;border-radius:var(--r-full);
  background:rgba(24,228,245,.1);border:1px solid rgba(24,228,245,.2);
  color:var(--clr-secondary);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.auth-title{font-size:clamp(2.2rem, 4vw, 3.6rem);font-weight:800;line-height:.98;margin:var(--sp-4) 0 var(--sp-3);max-width:11ch}
.auth-sub{color:var(--text-2);font-size:1rem;max-width:58ch;margin-bottom:var(--sp-6)}
.auth-feature-list{display:grid;gap:var(--sp-4)}
.auth-feature-card{
  padding:1rem 1.05rem;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.auth-feature-card h2{font-size:1rem;margin-bottom:.4rem}
.auth-feature-card p{font-size:var(--fs-sm);color:var(--text-2)}
.auth-box{
  width:100%;max-width:520px;
  background:linear-gradient(160deg, rgba(17,25,40,.96) 0%, rgba(22,34,52,.94) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  padding:clamp(1.4rem, 3vw, 2.2rem);
  box-shadow:var(--shadow-lg), 0 0 50px rgba(138,120,255,.08);
}
.auth-box--wide{max-width:none}
.auth-logo{display:flex;justify-content:center;margin-bottom:var(--sp-6)}
.auth-logo .logo-text{font-size:1.5rem;font-weight:900}
.auth-form{display:flex;flex-direction:column;gap:0}
.auth-box__head{text-align:center;margin-bottom:var(--sp-5)}
.auth-badge{display:inline-flex;align-items:center;justify-content:center;padding:.38em .8em;border-radius:var(--r-full);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--sp-3)}
.auth-card-title{font-size:clamp(1.7rem, 2.6vw, 2.2rem);font-weight:800;margin-bottom:.35rem}
.auth-card-sub{color:var(--text-2);font-size:var(--fs-sm)}
.auth-form__label-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.auth-mini-note{font-size:var(--fs-xs);color:var(--text-3)}
.auth-divider{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent)}
.auth-divider span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.auth-social{display:grid;gap:var(--sp-3)}
.auth-social__head span{display:inline-flex;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.auth-social__grid{display:grid;gap:var(--sp-3)}
.auth-social__btn{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:48px;padding:.8rem 1rem;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);color:var(--text);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  transition:transform var(--trans),border-color var(--trans),background var(--trans),box-shadow var(--trans);
}
.auth-social__btn:hover{transform:translateY(-1px);border-color:rgba(24,228,245,.24);background:rgba(24,228,245,.06);box-shadow:0 12px 24px rgba(0,0,0,.18);color:var(--text)}
.auth-social__btn--disabled{opacity:.55;cursor:not-allowed}
.auth-social__hint{font-size:var(--fs-xs);color:var(--text-3)}
.auth-captcha{display:grid;gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-5)}
.auth-captcha__block{display:grid;gap:.55rem}
.auth-captcha__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.auth-captcha__hint{font-size:var(--fs-xs);color:var(--text-3);padding:.85rem 1rem;border-radius:16px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12)}
.auth-strength{display:grid;gap:.55rem;margin-top:.8rem}
.auth-strength__bar{display:block;width:100%;height:8px;border-radius:var(--r-full);background:rgba(255,255,255,.06);overflow:hidden}
.auth-strength__bar > span{display:block;width:0;height:100%;border-radius:inherit;transition:width var(--trans),background var(--trans)}
.auth-strength__label{font-size:var(--fs-xs);color:var(--text-3)}
.auth-caps{display:inline-flex;margin-top:.55rem;font-size:var(--fs-xs);color:var(--clr-warning)}
.auth-switch{text-align:center;font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--sp-4)}

@media(min-width:960px){
  .auth-shell{grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr)}
  .auth-aside{min-height:100%}
}

@media(max-width:959px){
  .auth-title{max-width:none}
}

/* ── Profile ────────────────────────────────────────────────── */
.page-profile{padding:var(--sp-8) 0 var(--sp-16)}
.profile-header{
  display:flex;align-items:center;gap:var(--sp-6);
  margin-bottom:var(--sp-8);
  padding:10px;
 /* border:1px solid color-mix(in srgb, var(--border-2) 72%, var(--clr-secondary) 28%);*/
  border-radius:26px;
  background:
    radial-gradient(circle at 12% 18%, rgba(24,228,245,.14), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(245,98,164,.12), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface-2) 95%, #000000 5%));
  box-shadow:0 22px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.profile-avatar{
  width:92px;height:92px;flex-shrink:0;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.profile-avatar__svg{display:block;width:100%;height:100%}
.profile-kicker{
  display:inline-flex;align-items:center;
  margin-bottom:var(--sp-2);
  padding:.24em .72em;
  border-radius:var(--r-full);
  background:rgba(24,228,245,.1);
  border:1px solid rgba(24,228,245,.18);
  color:var(--clr-secondary);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.profile-name{font-size:var(--fs-2xl);font-weight:800;margin-bottom:.2em}
.profile-email{color:var(--text-3);font-size:var(--fs-sm);margin-bottom:.4em}
.profile-handle{display:inline-flex;align-items:center;padding:.28em .8em;border-radius:var(--r-full);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.profile-grid{display:grid;gap:var(--sp-6);margin-bottom:var(--sp-8)}
@media(min-width:768px){.profile-grid{grid-template-columns:1fr 1fr}}
.profile-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface-2) 95%, #000000 5%));
 /* border:1px solid color-mix(in srgb, var(--border) 78%, var(--clr-secondary) 22%);*/
  border-radius:22px;
  padding:var(--sp-6);
  box-shadow:0 18px 38px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.03) inset;
}
.card-title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-4)}
.profile-card__sub{color:var(--text-3);font-size:var(--fs-sm);margin-top:-.5em;margin-bottom:var(--sp-4)}
.profile-stats{display:flex;flex-direction:column;gap:var(--sp-3)}
.ps-item{display:flex;justify-content:space-between;align-items:center;padding:.7em 0;border-bottom:1px solid var(--border)}
.ps-item:last-child{border-bottom:none}
.ps-item dt{color:var(--text-3);font-size:var(--fs-sm)}
.ps-item dd{font-weight:600}
.ps-item__locked{display:inline-flex;align-items:center;gap:.35em;color:var(--text-2)}
.profile-favorites .pf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}

@media(max-width:640px){
  .profile-header{padding:10px;border-radius:22px;align-items:flex-start}
  .profile-avatar{width:76px;height:76px;border-radius:22px}
}

/* ── 404 ────────────────────────────────────────────────────── */
.not-found-page{
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--sp-8);
}
.nf-inner{max-width:480px}
.nf-code{
  font-size:8rem;font-weight:900;line-height:1;
  background:var(--grad-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:var(--sp-4);
}
.nf-title{font-size:var(--fs-3xl);margin-bottom:.5em}
.nf-desc{color:var(--text-2);margin-bottom:var(--sp-6)}
.nf-actions{display:flex;gap:.75em;flex-wrap:wrap;justify-content:center}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{
  background:var(--surface);
  border-top:none;
  padding:var(--sp-12) 0 0;
  margin-top:auto;
  position:relative;
}
.site-footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(138,120,255,.5) 30%, rgba(24,228,245,.45) 70%, transparent 100%);
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  max-width:1440px;margin:0 auto;
  padding:0 var(--sp-4) var(--sp-10);
}
@media(min-width:640px){.footer-inner{padding:0 var(--sp-6) var(--sp-10)}}
@media(min-width:768px){.footer-inner{grid-template-columns:260px 1fr}}
@media(min-width:1024px){.footer-inner{padding:0 var(--sp-8) var(--sp-10)}}
.footer-logo .logo-text{font-size:1.3rem}
.footer-desc{color:var(--text-3);font-size:var(--fs-sm);max-width:260px;margin:var(--sp-3) 0 var(--sp-4)}
.footer-social{display:flex;gap:.6em}
.social-link{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-3);
  transition:all var(--trans);
}
.social-link:hover{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff}
.footer-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-6);
}
@media(min-width:640px){.footer-links{grid-template-columns:repeat(4,1fr)}}
.footer-col h4{font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:var(--sp-3);text-transform:uppercase;letter-spacing:.06em}
.footer-col a{
  display:block;
  font-size:var(--fs-sm);color:var(--text-3);
  margin-bottom:.55em;
  transition:color var(--trans);
}
.footer-col a:hover{color:var(--clr-primary)}
.footer-bottom{
  border-top:1px solid var(--border);
  padding:var(--sp-4) var(--sp-4);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5em;
  max-width:1440px;margin:0 auto;
}
@media(min-width:640px){.footer-bottom{padding:var(--sp-4) var(--sp-6)}}
@media(min-width:1024px){.footer-bottom{padding:var(--sp-4) var(--sp-8)}}
.footer-bottom p{font-size:var(--fs-xs);color:var(--text-3)}

/* ── Admin ──────────────────────────────────────────────────── */
.admin-body{background:var(--bg-2)}
.admin-layout{display:flex;min-height:100vh}

/* Sidebar */
.admin-sidebar{
  width:240px;flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width var(--trans-md),transform var(--trans-md);
}
@media(max-width:900px){
  .admin-sidebar{
    position:fixed;z-index:200;
    transform:translateX(-100%);
    height:100%;
  }
  .admin-sidebar.open{transform:translateX(0)}
}
.sidebar-top{
  display:flex;align-items:center;gap:.75em;justify-content:space-between;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-logo .logo-text{font-size:1.1rem}
.admin-badge{
  font-size:.65rem;font-weight:800;
  padding:.2em .55em;
  border-radius:var(--r-full);
  background:rgba(245,98,164,.15);
  color:var(--clr-accent);
  text-transform:uppercase;letter-spacing:.06em;
}
.sidebar-nav{
  display:flex;flex-direction:column;gap:.15em;
  padding:var(--sp-4);
  flex:1;
}
.sidebar-link{
  display:flex;align-items:center;gap:.6em;
  padding:.7em .85em;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--text-2);
  transition:all var(--trans);
  white-space:nowrap;
}
.sidebar-link:hover{background:var(--surface-2);color:var(--text)}
.sidebar-link.active{background:rgba(138,120,255,.12);color:var(--clr-primary)}
.sidebar-sep{height:1px;background:var(--border);margin:.4em 0}

/* Admin main */
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.admin-topbar{
  display:flex;align-items:center;gap:var(--sp-4);
  height:60px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 var(--sp-5);
  position:sticky;top:0;z-index:50;flex-shrink:0;
}
.sidebar-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-2);
  flex-shrink:0;
}
@media(max-width:900px){.sidebar-toggle{display:flex}}
.admin-page-title{
  flex:1;font-size:var(--fs-lg);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.topbar-user{font-size:var(--fs-sm);color:var(--text-2)}
.admin-content{padding:var(--sp-6) var(--sp-5);flex:1}
@media(min-width:1024px){.admin-content{padding:var(--sp-8)}}

/* Admin components */
.admin-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  margin-bottom:var(--sp-5);
}
.admin-card-title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-5)}
.admin-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.admin-grid-2{display:grid;gap:var(--sp-5)}
@media(min-width:768px){.admin-grid-2{grid-template-columns:1fr 1fr}}
.admin-section{margin-bottom:var(--sp-8)}
.admin-section-title{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--sp-4)}
.section-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}

/* Stats grid */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-bottom:var(--sp-8)}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.stats-grid{grid-template-columns:repeat(7,1fr)}}
.stat-card{
  display:flex;align-items:center;gap:var(--sp-4);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);
}
.sc-icon{
  width:46px;height:46px;flex-shrink:0;
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
}
.sc-icon--blue  {background:rgba(24,228,245,.12);color:var(--clr-secondary)}
.sc-icon--purple{background:rgba(138,120,255,.12);color:var(--clr-primary)}
.sc-icon--green {background:rgba(34,212,154,.12);color:var(--clr-success)}
.sc-icon--orange{background:rgba(245,179,64,.12);color:var(--clr-warning)}
.sc-icon--cyan  {background:rgba(90,180,255,.14);color:#73b9ff}
.sc-icon--rose  {background:rgba(245,98,164,.14);color:var(--clr-accent)}
.sc-icon--teal  {background:rgba(53,191,180,.14);color:#53d4c5}
.sc-num{display:block;font-size:var(--fs-2xl);font-weight:800;line-height:1.1}
.sc-lbl{font-size:var(--fs-xs);color:var(--text-3)}

/* Dashboard analytics */
.dashboard-panels-grid{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.dashboard-chart-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 96%, #000 4%));
  border:1px solid color-mix(in srgb, var(--border) 82%, var(--clr-secondary) 18%);
  border-radius:24px;
  padding:var(--sp-5);
  box-shadow:0 18px 34px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.03) inset;
}
.dashboard-chart-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.chart-kicker{display:inline-flex;align-items:center;padding:.28em .7em;border-radius:var(--r-full);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.65rem}
.chart-meta{font-size:var(--fs-xs);color:var(--text-3)}
.trend-chart{display:grid;gap:var(--sp-3)}
.trend-chart svg{width:100%;height:120px;overflow:visible}
.trend-chart__line{fill:none;stroke:var(--clr-secondary);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 8px 16px rgba(24,228,245,.16))}
.trend-chart__line--secondary{stroke:var(--clr-primary);filter:drop-shadow(0 8px 16px rgba(138,120,255,.18))}
.trend-chart__labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:var(--sp-2)}
.trend-chart__label{display:grid;gap:.2rem;text-align:center}
.trend-chart__label strong{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.trend-chart__label span{font-size:var(--fs-xs);color:var(--text-3)}
.stacked-meter{display:flex;height:12px;border-radius:var(--r-full);overflow:hidden;background:rgba(255,255,255,.05);margin-bottom:var(--sp-4)}
.stacked-meter__segment{display:block;height:100%}
.stacked-meter__segment--published,.stacked-meter__segment--active{background:linear-gradient(90deg, rgba(34,212,154,.7), rgba(34,212,154,.95))}
.stacked-meter__segment--draft{background:linear-gradient(90deg, rgba(245,179,64,.7), rgba(245,179,64,.92))}
.stacked-meter__segment--deleted,.stacked-meter__segment--suspended{background:linear-gradient(90deg, rgba(255,92,114,.7), rgba(255,92,114,.92))}
.metric-list{display:grid;gap:.8rem}
.metric-list__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:.72rem .8rem;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04)}
.metric-list__row dt{font-size:var(--fs-sm);color:var(--text-2)}
.metric-list__row dd{font-size:var(--fs-base);font-weight:700;color:var(--text)}
.metric-list--emphasis .metric-list__row dd{color:var(--clr-secondary)}
.bars-list{display:grid;gap:var(--sp-3)}
.bars-list__item{display:grid;gap:.55rem}
.bars-list__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.bars-list__meta strong{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.bars-list__meta span{font-size:var(--fs-xs);color:var(--text-3)}
.bars-list__track{height:10px;border-radius:var(--r-full);background:rgba(255,255,255,.05);overflow:hidden}
.bars-list__track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg, rgba(24,228,245,.38), rgba(24,228,245,.95))}
.bars-list__track--accent span{background:linear-gradient(90deg, rgba(138,120,255,.38), rgba(138,120,255,.95))}
.bars-list--compact .bars-list__meta{align-items:center}
.performers-list{display:grid;gap:var(--sp-3)}
.performer-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);padding:.78rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);color:var(--text)}
.performer-row:hover{border-color:rgba(24,228,245,.22);background:rgba(24,228,245,.05);color:var(--text)}
.performer-row__thumb{border-radius:12px;object-fit:cover;background:var(--surface-2)}
.performer-row__meta{display:grid;gap:.18rem;min-width:0}
.performer-row__meta strong{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.performer-row__meta span{font-size:var(--fs-xs);color:var(--text-3)}
.performer-row__score{font-size:var(--fs-sm);font-weight:800;color:var(--clr-secondary)}

/* File analytics pages */
.admin-analytics-page{display:grid;gap:var(--sp-5)}
.analytics-kicker{display:inline-flex;align-items:center;padding:.32em .78em;border-radius:var(--r-full);background:rgba(24,228,245,.08);border:1px solid rgba(24,228,245,.18);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-secondary);margin-bottom:.65rem}
.analytics-intro{max-width:70ch;color:var(--text-2);font-size:var(--fs-sm)}
.analytics-intro--small{margin-bottom:var(--sp-4)}
.analytics-actions{display:flex;align-items:center;gap:var(--sp-3)}
.analytics-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.analytics-summary-card{
  display:grid;gap:.45rem;padding:1.1rem 1.15rem;border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 96%, #000 4%));
  border:1px solid color-mix(in srgb, var(--border) 82%, var(--clr-primary) 18%);
}
.analytics-summary-card__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.analytics-summary-card strong{font-size:clamp(1.5rem, 2.8vw, 2.2rem);line-height:1;font-weight:800}
.analytics-summary-card__meta{font-size:var(--fs-xs);color:var(--text-3)}
.analytics-period-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.analytics-period-grid--compact{margin-top:calc(var(--sp-2) * -1)}
.analytics-period-card{
  display:grid;gap:.55rem;padding:1rem 1.05rem;border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.analytics-period-card strong{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1;font-weight:800}
.analytics-period-card__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.analytics-period-card__meta{font-size:var(--fs-xs);color:var(--text-3)}
.analytics-period-card__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0}
.analytics-period-card__stats div{display:grid;gap:.14rem}
.analytics-period-card__stats dt{font-size:var(--fs-xs);color:var(--text-3)}
.analytics-period-card__stats dd{margin:0;font-size:var(--fs-sm);font-weight:700}
.analytics-grid{display:grid;gap:var(--sp-4)}
.analytics-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 96%, #000 4%));
  border:1px solid color-mix(in srgb, var(--border) 82%, var(--clr-secondary) 18%);
  border-radius:24px;
  padding:var(--sp-5);
  box-shadow:0 18px 34px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.03) inset;
}
.analytics-card--large{padding:var(--sp-6)}
.analytics-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.analytics-card__kicker{display:inline-flex;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.45rem}
.analytics-card__head h3{font-size:var(--fs-lg);font-weight:700}
.analytics-card__meta{font-size:var(--fs-xs);color:var(--text-3)}
.analytics-line-chart{height:170px;padding:.35rem 0 0}
.analytics-line-chart svg{width:100%;height:100%;overflow:visible}
.analytics-line-chart polyline{fill:none;stroke:var(--clr-danger);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 10px 20px rgba(255,92,114,.18))}
.analytics-line-chart--large{height:220px}
.analytics-line-chart__labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:var(--sp-2)}
.analytics-line-chart__labels--dense{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}
.analytics-line-chart__label{display:grid;gap:.22rem;text-align:center}
.analytics-line-chart__label strong{font-size:var(--fs-sm);font-weight:700}
.analytics-line-chart__label span{font-size:var(--fs-xs);color:var(--text-3)}
.analytics-daily-mini-table{display:grid;gap:.55rem;margin-top:var(--sp-4)}
.analytics-daily-mini-table__row{display:grid;grid-template-columns:60px repeat(3,minmax(0,1fr));gap:var(--sp-3);padding:.7rem .8rem;border-radius:14px;background:rgba(255,255,255,.035);font-size:var(--fs-xs);color:var(--text-2)}
.analytics-donut-wrap{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-4);align-items:center}
.analytics-donut{width:120px;height:120px;border-radius:50%;position:relative}
.analytics-donut::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface)}
.analytics-source-list{display:grid;gap:.7rem}
.analytics-source-list__row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:.7rem;font-size:var(--fs-sm)}
.analytics-source-list__dot{width:12px;height:12px;border-radius:50%}
.analytics-bars{display:grid;gap:var(--sp-3)}
.analytics-bars__row{display:grid;gap:.55rem}
.analytics-bars__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm)}
.analytics-bars__meta--page{align-items:flex-start;flex-direction:column}
.analytics-bars__track{height:10px;border-radius:var(--r-full);background:rgba(255,255,255,.05);overflow:hidden}
.analytics-bars__track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg, rgba(245,179,64,.4), rgba(245,179,64,.95))}
.analytics-bars__track--alt span{background:linear-gradient(90deg, rgba(138,120,255,.38), rgba(138,120,255,.95))}
.analytics-filter-form{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.analytics-filter-form .form-select{max-width:220px}
.analytics-table th,.analytics-table td{white-space:nowrap}
.analytics-code{padding:1rem 1.1rem;border-radius:18px;background:#0b1220;border:1px solid rgba(255,255,255,.08);color:#dce7ff;overflow:auto;margin-bottom:var(--sp-4)}

@media(min-width:900px){
  .analytics-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .analytics-grid--main{grid-template-columns:1.4fr 1fr 1fr}
  .analytics-grid--secondary{grid-template-columns:1fr 1fr}
}

@media(max-width:767px){
  .analytics-summary-grid{grid-template-columns:1fr}
  .analytics-period-grid{grid-template-columns:1fr}
  .analytics-period-card__stats{grid-template-columns:1fr 1fr 1fr}
  .analytics-card__head,.analytics-actions,.analytics-bars__meta{flex-direction:column;align-items:flex-start}
  .analytics-donut-wrap{grid-template-columns:1fr}
  .analytics-daily-mini-table__row{grid-template-columns:1fr 1fr}
}

@media(min-width:900px){
  .dashboard-panels-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-panels-grid--three{grid-template-columns:1.2fr .95fr .95fr}
  .dashboard-chart-card--wide{grid-column:auto}
}

@media(max-width:767px){
  .dashboard-chart-card__head,.bars-list__meta{flex-direction:column;align-items:flex-start}
  .performer-row{grid-template-columns:44px minmax(0,1fr);}
  .performer-row__score{grid-column:2}
}

/* Quick actions */
.quick-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.qa-btn{
  display:flex;align-items:center;gap:.5em;
  padding:.7em 1.2em;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--text-2);
  transition:all var(--trans);
}
.qa-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary);background:rgba(138,120,255,.08)}

/* Admin table */
.admin-actions-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.admin-search-form{display:flex;gap:.5em;flex:1;max-width:400px}
.admin-search-form .form-input{height:38px}
.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--sp-4)}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.admin-table th{
  text-align:left;padding:.75em 1em;
  background:var(--surface-2);
  font-size:var(--fs-xs);font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.admin-table td{padding:.7em 1em;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--surface-2)}
.admin-thumb{border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2)}
.td-title a{font-weight:500;color:var(--text)}
.td-title a:hover{color:var(--clr-primary)}
.td-mono{font-family:monospace;font-size:.8rem;color:var(--text-2)}
.td-date{color:var(--text-3);white-space:nowrap}
.td-actions{display:flex;gap:.4em;flex-wrap:nowrap}
.td-empty{text-align:center;padding:var(--sp-10);color:var(--text-3)}

.admin-images{display:grid;gap:var(--sp-4)}
.admin-images-overview{
  display:grid;
  gap:var(--sp-3);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.admin-images-overview__item{
  display:grid;
  gap:.3rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(160deg, rgba(14,27,44,.92), rgba(14,20,34,.9)),
    radial-gradient(circle at top right, rgba(24,228,245,.12), transparent 45%);
}
.admin-images-overview__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700}
.admin-images-overview__value{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.1}

.admin-images-quickbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:.8rem 1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.admin-images-quickbar__left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.admin-images-quickbar__counter{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.admin-images-quickbar__actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}

.flag-toggle{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);color:var(--text-2);font-weight:600}
.flag-toggle input[type="checkbox"]{accent-color:var(--clr-primary);width:15px;height:15px}

.admin-table-wrap{
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(circle at top left, rgba(24,228,245,.08), transparent 42%);
}
.admin-table th{position:sticky;top:0;z-index:1}

@media(max-width:1080px){
  .admin-images-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:767px){
  .admin-images-overview{grid-template-columns:1fr}
  .admin-images-quickbar{padding:.75rem .8rem}
}

/* Status badge */
.status-badge{
  display:inline-block;
  padding:.18em .6em;border-radius:var(--r-full);
  font-size:.7rem;font-weight:700;text-transform:capitalize;
}
.status-badge--published{background:rgba(34,212,154,.12);color:var(--clr-success)}
.status-badge--draft    {background:rgba(245,179,64,.12);color:var(--clr-warning)}
.status-badge--active   {background:rgba(34,212,154,.12);color:var(--clr-success)}
.status-badge--suspended{background:rgba(255,92,114,.12);color:var(--clr-danger)}

.role-badge{
  display:inline-block;
  padding:.18em .6em;
  border-radius:var(--r-full);
  font-size:.7rem;
  font-weight:700;
  text-transform:capitalize;
}
.role-badge--admin{background:rgba(245,98,164,.14);color:var(--clr-accent)}
.role-badge--moderator{background:rgba(24,228,245,.14);color:var(--clr-secondary)}
.role-badge--user{background:rgba(255,255,255,.1);color:var(--text-2)}

.td-actions--stack{display:grid;gap:.45rem;min-width:260px}
.admin-user-inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:.4rem;
  align-items:center;
}
.form-select--sm{height:34px;padding:.35em .65em;font-size:.78rem}

@media(max-width:900px){
  .td-actions--stack{min-width:220px}
  .admin-user-inline-form{grid-template-columns:1fr}
}

/* Upload form */
.upload-form,.drop-zone{width:100%}
.admin-upload-grid{display:grid;gap:var(--sp-5)}
.upload-panel-head{display:grid;gap:.55rem;margin-bottom:var(--sp-4)}
.upload-panel-copy{color:var(--text-2);font-size:var(--fs-sm);max-width:52ch}
.admin-card--ai{
  background:
    radial-gradient(circle at top right, rgba(24,228,245,.08), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 96%, #000 4%));
}
.drop-zone{
  position:relative;
  border:2px dashed var(--border-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition:all var(--trans);
  background:var(--surface-2);
  margin-bottom:var(--sp-6);
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--clr-primary);background:rgba(138,120,255,.06)}
.drop-input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;height:100%}
.dz-content{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);padding:var(--sp-10);text-align:center;
  pointer-events:none;
}
.dz-content svg{color:var(--text-3);opacity:.6}
.dz-text{font-size:var(--fs-base);color:var(--text-2)}
.dz-link{color:var(--clr-primary);font-weight:600}
.dz-hint{font-size:var(--fs-xs);color:var(--text-3)}
.dz-preview{position:relative}
.dz-preview img{width:100%;max-height:340px;object-fit:contain}
.dz-remove{
  position:absolute;top:.5em;right:.5em;
  width:30px;height:30px;
  background:rgba(0,0,0,.7);
  border-radius:50%;
  color:#fff;font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.form-row-3{display:grid;gap:var(--sp-4)}
.ai-status-strip,.settings-ai-status{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:var(--sp-4)}
.ai-status-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;border-radius:999px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,255,255,.08);
}
.ai-status-pill.is-ready{background:rgba(34,212,154,.12);color:var(--clr-success);border-color:rgba(34,212,154,.25)}
.ai-status-pill.is-warning{background:rgba(245,179,64,.14);color:var(--clr-warning);border-color:rgba(245,179,64,.28)}
.ai-status-pill.is-muted{background:rgba(255,255,255,.04);color:var(--text-3)}
.ai-workflow-note{
  display:grid;gap:.35rem;padding:1rem 1.05rem;border-radius:18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:var(--sp-4)
}
.ai-workflow-note strong{font-size:var(--fs-sm)}
.ai-workflow-note p{font-size:var(--fs-sm);color:var(--text-2)}

/* Edit layout */
.edit-layout{display:grid;gap:var(--sp-6)}
@media(min-width:768px){.edit-layout{grid-template-columns:200px 1fr}}
.edit-preview-img{width:100%;border-radius:var(--r-md);object-fit:cover;margin-bottom:var(--sp-3)}
.edit-preview-meta{display:flex;flex-direction:column;gap:.3em;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-3)}
.btn-full{width:100%;justify-content:center}

/* Admin category list */
.cat-list{display:flex;flex-direction:column;gap:.3em;max-height:420px;overflow-y:auto}
.cat-list-item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:.65em .75em;
  background:var(--surface-2);
  border-radius:var(--r-md);
  border:1px solid var(--border);
}
.cli-info{display:flex;flex-direction:column;gap:.15em}
.cli-info strong{font-size:var(--fs-sm);font-weight:600}
.cli-count{font-size:var(--fs-xs);color:var(--text-3)}

/* Admin tags cloud */
.tags-admin-cloud{display:flex;flex-wrap:wrap;gap:.5em}
.tag-admin-pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3em .7em;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-full);font-size:var(--fs-sm);color:var(--text-2);
}
.tap-count{font-size:var(--fs-xs);background:var(--surface-3);padding:.1em .4em;border-radius:var(--r-full);color:var(--text-3)}

.admin-tags{display:grid;gap:var(--sp-4)}
.admin-tags-overview{display:grid;gap:var(--sp-3);grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-tags-overview__item{
  display:grid;
  gap:.28rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(160deg, rgba(12,24,40,.94), rgba(10,18,30,.92)),
    radial-gradient(circle at top right, rgba(24,228,245,.13), transparent 44%);
}
.admin-tags-overview__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700}
.admin-tags-overview__value{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.1}

.admin-tags-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.admin-tags-filter{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.admin-tags-filter .form-input{min-height:38px}

.admin-tags-quickbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem;
  padding:.8rem .9rem;
  margin-bottom:var(--sp-4);
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.admin-tags-quickbar__counter{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}

.admin-tags-list{display:grid;gap:.65rem}
.admin-tags-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.admin-tags-item[open]{border-color:rgba(24,228,245,.35);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.admin-tags-item__summary{
  display:grid;
  gap:.65rem;
  align-items:center;
  grid-template-columns:auto minmax(130px,1fr) minmax(100px,1fr) auto auto;
  padding:.85rem .95rem;
  list-style:none;
  cursor:pointer;
}
.admin-tags-item__summary::-webkit-details-marker{display:none}
.admin-tags-item__name{font-weight:700;letter-spacing:.01em}
.admin-tags-item__slug{font-size:var(--fs-xs);color:var(--text-3);font-family:monospace}
.admin-tags-item__usage{font-size:var(--fs-xs);font-weight:700;padding:.28rem .62rem;border-radius:999px;border:1px solid rgba(255,255,255,.1)}
.admin-tags-item__usage.is-used{color:var(--clr-success);background:rgba(34,212,154,.12);border-color:rgba(34,212,154,.25)}
.admin-tags-item__usage.is-unused{color:var(--clr-warning);background:rgba(245,179,64,.12);border-color:rgba(245,179,64,.26)}
.admin-tags-item__hint{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}

.admin-tags-item__body{display:grid;gap:.65rem;padding:.75rem .95rem .95rem;border-top:1px solid rgba(255,255,255,.06)}
.admin-tags-form-row{display:grid;gap:.55rem;grid-template-columns:minmax(170px,1fr) auto}

@media(max-width:900px){
  .admin-tags-overview{grid-template-columns:1fr 1fr}
  .admin-tags-item__summary{grid-template-columns:auto minmax(120px,1fr) auto;grid-auto-flow:row}
  .admin-tags-item__slug,.admin-tags-item__hint{grid-column:2/-1}
}

@media(max-width:767px){
  .admin-tags-overview{grid-template-columns:1fr}
  .admin-tags-form-row{grid-template-columns:1fr}
}

/* Dashboard user cell */
.user-cell{display:flex;align-items:center;gap:.5em}
.user-avatar--sm{width:24px;height:24px;font-size:.6rem}

/* Settings */
.settings-fieldset{
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.settings-fieldset legend{font-size:var(--fs-sm);font-weight:700;padding:0 .5em;color:var(--text-2)}
.seo-tools{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.seo-tool-btn{
  display:flex;align-items:center;gap:.5em;
  padding:.65em 1.2em;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);
  transition:all var(--trans);
}
.seo-tool-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.admin-settings-page{display:grid;gap:var(--sp-5)}
.settings-actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.settings-status-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.settings-status-card{
  display:grid;gap:.42rem;padding:1rem 1.05rem;border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 96%, #000 4%));
  border:1px solid color-mix(in srgb, var(--border) 80%, var(--clr-primary) 20%);
}
.settings-status-card__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.settings-status-card strong{font-size:clamp(1.2rem,2.5vw,1.9rem);line-height:1;font-weight:800}
.settings-status-card__meta{font-size:var(--fs-xs);color:var(--text-3)}
.settings-layout{display:grid;gap:var(--sp-4)}
.settings-sidebar{align-self:start;position:sticky;top:84px;margin-bottom:0}
.settings-sidebar__eyebrow{display:inline-flex;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-3)}
.settings-nav{display:grid;gap:.45rem;margin-bottom:var(--sp-5)}
.settings-nav a{padding:.72rem .85rem;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.settings-nav a:hover{background:rgba(24,228,245,.06);border-color:rgba(24,228,245,.18);color:var(--text)}
.settings-sidebar__note{display:grid;gap:.45rem;padding:1rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.settings-sidebar__note strong{font-size:var(--fs-sm)}
.settings-sidebar__note p{font-size:var(--fs-xs);color:var(--text-3)}
.settings-form-stack{display:grid;gap:var(--sp-4)}
.settings-card{margin-bottom:0}
.settings-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.settings-card__kicker{display:inline-flex;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.45rem}
.settings-provider-grid{display:grid;gap:var(--sp-4)}
.settings-provider-card{display:grid;gap:var(--sp-3);padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.settings-provider-card h4{font-size:var(--fs-base);font-weight:700}
.settings-check{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);cursor:pointer}
.settings-check input{margin-top:.2rem;accent-color:var(--clr-secondary)}
.settings-check span{display:grid;gap:.18rem}
.settings-check strong{font-size:var(--fs-sm)}
.settings-check small{font-size:var(--fs-xs);color:var(--text-3)}
.settings-info-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--sp-4)}
.settings-info-item{display:grid;gap:.22rem;padding:.9rem 1rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.settings-info-item span{font-size:var(--fs-xs);color:var(--text-3)}
.settings-info-item strong{font-size:var(--fs-sm);font-weight:700}
.settings-form-actions{justify-content:flex-start;margin-top:0}
.settings-system-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.settings-system-item{display:grid;gap:.45rem;padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.settings-system-item h4{font-size:var(--fs-base);font-weight:700}
.settings-system-item p{font-size:var(--fs-sm);color:var(--text-2)}
.settings-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.category-admin-overview{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.category-admin-overview__item{display:grid;gap:.18rem;padding:1rem 1.05rem;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.category-admin-overview__item span{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.category-admin-overview__item strong{font-size:clamp(1.2rem,2vw,1.65rem);font-weight:800}
.admin-categories-grid{display:grid;gap:var(--sp-4)}
.category-admin-create{align-self:start}
.category-admin-card__sub{margin-top:.35rem;color:var(--text-3);max-width:54ch;font-size:var(--fs-sm)}
.category-admin-list-note{display:grid;gap:.2rem;padding:.9rem 1rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);min-width:220px}
.category-admin-list-note span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.category-admin-list-note strong{font-size:var(--fs-sm);font-weight:700}
.category-admin-list{display:grid;gap:var(--sp-4)}
.category-admin-item{position:relative;border:1px solid rgba(255,255,255,.06);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.018));overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);transition:border-color var(--trans),transform var(--trans),box-shadow var(--trans)}
.category-admin-item::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,rgba(24,228,245,.8),rgba(245,98,164,.5));opacity:.45}
.category-admin-item:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.12);box-shadow:0 24px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)}
.category-admin-item[open]{border-color:rgba(24,228,245,.22);background:linear-gradient(180deg,rgba(24,228,245,.045),rgba(255,255,255,.02));box-shadow:0 28px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05)}
.category-admin-item__summary{list-style:none;display:grid;gap:var(--sp-3);padding:1.1rem 1.2rem;cursor:pointer}
.category-admin-item__summary::-webkit-details-marker{display:none}
.category-admin-item__identity{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.category-admin-item__index{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;color:var(--text-3);flex:0 0 auto}
.category-admin-item__meta,.category-admin-item__summary-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.category-admin-item__thumb{width:68px;height:68px;border-radius:18px;object-fit:cover;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.category-admin-item__thumb--empty{display:grid;place-items:center;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.category-admin-item__excerpt{margin-top:.45rem;color:var(--text-3);font-size:var(--fs-sm);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.category-admin-pill{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .72rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.category-admin-pill--success{background:rgba(36,209,122,.12);border-color:rgba(36,209,122,.22);color:#8df0bb}
.category-admin-pill--info{background:rgba(24,228,245,.12);border-color:rgba(24,228,245,.22);color:#8ce9f3}
.category-admin-pill--muted{color:var(--text-3)}
.category-admin-pill--outline{background:transparent}
.category-admin-item__toggle{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .9rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.category-admin-item__body{display:grid;gap:var(--sp-4);padding:0 1.2rem 1.2rem}
.category-admin-item__rail{display:grid;gap:var(--sp-4)}
.category-admin-editor{display:grid;gap:var(--sp-4)}
.category-admin-section{display:grid;gap:var(--sp-4);padding:1rem 1.05rem;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.category-admin-section--compact{gap:var(--sp-3)}
.category-admin-section__head{display:grid;gap:.28rem}
.category-admin-section__head h3{font-size:var(--fs-base);font-weight:700}
.category-admin-section__head p{font-size:var(--fs-sm);color:var(--text-3)}
.category-admin-preview,.category-admin-notes{display:grid;gap:var(--sp-3);padding:1rem 1.05rem;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.category-admin-preview__label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.category-admin-preview__image{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
.category-admin-preview__empty{display:grid;place-items:center;min-height:140px;padding:1rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.08);color:var(--text-3);text-align:center}
.category-admin-preview__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-3)}
.category-admin-preview__meta strong{color:var(--text)}
.category-admin-note-stack{display:grid;gap:var(--sp-3)}
.category-admin-note-card{display:grid;gap:.22rem;padding:.95rem 1rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.category-admin-note-card span{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.category-admin-note-card strong{font-size:var(--fs-sm);font-weight:700;word-break:break-word}
.category-admin-notes__grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.category-admin-notes__grid div{display:grid;gap:.18rem;padding:.85rem .9rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.category-admin-notes__grid span{font-size:var(--fs-xs);color:var(--text-3)}
.category-admin-notes__grid strong{font-size:var(--fs-sm);font-weight:700;word-break:break-word}
.category-admin-item__delete{display:flex;justify-content:flex-end}
.category-hero{position:relative;display:grid;gap:var(--sp-5);padding:15px;border-radius:30px;background:linear-gradient(145deg,rgba(13,23,35,.96),rgba(15,30,48,.94));overflow:hidden; margin-bottom: 15px;}
.category-hero::before{content:"";position:absolute;inset:-20% auto auto -10%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(24,228,245,.16), transparent 70%);pointer-events:none}
.category-hero--with-image{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:center}
.category-hero__content{position:relative;z-index:1}
.category-hero__media{position:relative;z-index:1}
.category-hero__image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 48px rgba(0,0,0,.28)}

@media(min-width:1080px){
  .settings-layout{grid-template-columns:280px minmax(0,1fr)}
  .admin-upload-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .admin-categories-grid{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}
  .category-admin-item__body{grid-template-columns:minmax(260px,.42fr) minmax(0,1fr)}
}

@media(min-width:900px){
  .category-admin-overview{grid-template-columns:repeat(4,minmax(0,1fr))}
  .settings-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .form-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-admin-item__summary{grid-template-columns:minmax(260px,1.1fr) minmax(0,1fr) auto;align-items:center}
}

@media(max-width:767px){
  .settings-status-grid,.settings-info-grid,.settings-system-grid{grid-template-columns:1fr}
  .settings-card__head,.settings-actions{flex-direction:column;align-items:flex-start}
  .settings-sidebar{position:static}
  .category-admin-item__summary,.category-admin-item__identity{align-items:flex-start}
  .category-admin-item__identity{width:100%}
  .category-admin-list-note{min-width:0;width:100%}
  .category-admin-item__thumb{width:56px;height:56px;border-radius:16px}
  .category-admin-item__meta,.category-admin-item__summary-actions,.category-admin-preview__meta{align-items:flex-start;justify-content:flex-start}
  .category-admin-notes__grid{grid-template-columns:1fr}
  .category-hero--with-image{grid-template-columns:1fr}
}

/* ── Misc ────────────────────────────────────────────────────── */
.page-category,.page-favorites,.page-profile,.page-doc{padding:var(--sp-6) 0 var(--sp-16)}

/* Static and legal pages */
.doc-hero{
  position:relative;
  display:grid;
  gap:var(--sp-6);
  margin-bottom:var(--sp-8);
  padding:clamp(1.5rem, 2vw, 2rem);
 /* border:1px solid color-mix(in srgb, var(--border-2) 76%, var(--clr-secondary) 24%);*/
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(24,228,245,.14), transparent 32%),
    radial-gradient(circle at left center, rgba(245,98,164,.12), transparent 28%),
    linear-gradient(145deg, rgba(11,20,36,.96), rgba(16,27,43,.94));
  box-shadow:0 28px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.doc-hero::after{
  content:"";
  position:absolute;
  inset:auto 1.25rem 1.25rem auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(138,120,255,.22), transparent 68%);
  pointer-events:none;
}
.doc-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp-4)}
.doc-eyebrow,.doc-panel__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  width:max-content;
  padding:.45em .85em;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clr-secondary);
}
.doc-title{max-width:14ch;font-size:clamp(2.3rem, 5vw, 4.3rem);line-height:.95;letter-spacing:-.04em}
.doc-intro{max-width:68ch;color:var(--text-2);font-size:clamp(1rem, 1.4vw, 1.12rem)}
.doc-meta{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.doc-meta__item{
  padding:1rem 1.05rem;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}
.doc-meta__item dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin-bottom:.35rem}
.doc-meta__item dd{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.doc-hero__panel{
  position:relative;
  z-index:1;
  align-self:start;
  padding:1.2rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.doc-hero__panel h2{font-size:1.05rem;margin:.75rem 0 1rem}
.doc-toc{display:flex;flex-direction:column;gap:.65rem}
.doc-toc a{
  color:var(--text-2);
  padding:.65rem .8rem;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
  transition:all var(--trans);
}
.doc-toc a:hover{color:var(--text);border-color:rgba(24,228,245,.22);background:rgba(24,228,245,.07)}
.doc-highlights{
  display:grid;
  gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:var(--sp-8);
}
.doc-highlight{
  padding:1.3rem;
  border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #fff 10%), color-mix(in srgb, var(--surface-2) 94%, #000 6%));
 /* border:1px solid color-mix(in srgb, var(--border) 78%, var(--clr-primary) 22%);*/
  box-shadow:var(--shadow-sm);
}
.doc-highlight h2{font-size:1.05rem;margin-bottom:.55rem}
.doc-highlight p{color:var(--text-2);font-size:var(--fs-sm)}
.doc-highlight__link{display:inline-flex;margin-top:.85rem;font-size:var(--fs-sm);font-weight:700}
.doc-layout{display:grid;gap:var(--sp-6);align-items:start}
.doc-sidebar{display:none}
.doc-sidebar__card{
  position:sticky;
  top:calc(var(--header-h) + 1rem);
  padding:1.15rem;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.06);
}
.doc-main{display:grid;gap:var(--sp-5)}
.doc-section{
  padding:clamp(1.1rem, 1.7vw, 1.5rem);
  border-radius:24px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-2) 95%, #000 5%));
 /* border:1px solid color-mix(in srgb, var(--border) 84%, var(--clr-secondary) 16%);*/
  box-shadow:var(--shadow-sm);
}
.doc-section h2{margin-bottom:.8rem;font-size:clamp(1.2rem, 2vw, 1.55rem)}
.doc-section p{color:var(--text-2)}
.doc-section p + p{margin-top:.95rem}
.doc-list{display:grid;gap:.7rem;margin-top:1rem}
.doc-list li{
  position:relative;
  padding-left:1.3rem;
  color:var(--text-2);
}
.doc-list li::before{
  content:"";
  position:absolute;
  top:.62rem;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--grad-primary);
  box-shadow:0 0 0 5px rgba(138,120,255,.12);
}
.section-head--doc{margin-bottom:var(--sp-5)}
.doc-faq{margin-top:var(--sp-10)}
.doc-faq__grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.doc-faq__item{
  padding:1.2rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.06);
}
.doc-faq__item h3{font-size:1rem;margin-bottom:.55rem}
.doc-faq__item p{color:var(--text-2);font-size:var(--fs-sm)}
.doc-cta{
  display:grid;
  gap:var(--sp-5);
  align-items:center;
  margin-top:var(--sp-10);
  padding:clamp(1.35rem, 2vw, 1.8rem);
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(245,98,164,.16), transparent 26%),
    radial-gradient(circle at bottom right, rgba(24,228,245,.14), transparent 30%),
    linear-gradient(145deg, rgba(17,25,40,.98), rgba(10,16,27,.96));
 /* border:1px solid color-mix(in srgb, var(--border-2) 78%, var(--clr-primary) 22%);*/
  box-shadow:var(--shadow);
}
.doc-cta h2{font-size:clamp(1.35rem, 2vw, 1.9rem);margin:.7rem 0}
.doc-cta p{max-width:60ch;color:var(--text-2)}
.doc-cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

@media(min-width:900px){
  .doc-hero{grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr)}
  .doc-layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
  .doc-sidebar{display:block}
  .doc-cta{grid-template-columns:minmax(0,1fr) auto}
}

@media(max-width:699px){
  .doc-title{max-width:none}
  .doc-hero__panel{padding:1rem}
  .doc-toc a{padding:.6rem .7rem}
  .doc-cta__actions .btn{width:100%;justify-content:center}
}

/* ── Scheduled Publishing ───────────────────────────────────── */
.schedule-toggle-label{display:flex;align-items:center;gap:.55rem;cursor:pointer;font-weight:500}
.schedule-checkbox{width:1rem;height:1rem;accent-color:var(--clr-primary);cursor:pointer}
.schedule-panel{background:color-mix(in srgb,var(--surface-1) 70%,var(--clr-primary) 4%);border:1px solid color-mix(in srgb,var(--border-1) 60%,var(--clr-primary) 30%);border-radius:var(--radius);padding:var(--sp-4);margin-top:.5rem}
.schedule-active-badge{color:var(--clr-primary);font-weight:600;font-size:.82rem}

/* ── Metadata Quality Score Widget ─────────────────────────── */
.mqs-widget{border:1px solid var(--border-1);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);background:var(--surface-1)}
.mqs-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.mqs-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-1)}
.mqs-body{margin-top:var(--sp-3)}
.mqs-score-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.mqs-ring-wrap{position:relative;width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mqs-ring{display:block}
.mqs-ring-bg{stroke:var(--border-1)}
.mqs-ring-fg{transition:stroke-dashoffset .5s ease,stroke .3s ease}
.mqs-ring-score{position:absolute;font-size:.85rem;font-weight:700;color:var(--text-1)}
.mqs-grade-col{display:flex;flex-direction:column;gap:.2rem}
.mqs-grade{font-size:2rem;font-weight:800;line-height:1;color:var(--text-1)}
.mqs-grade-label{font-size:var(--fs-sm);color:var(--text-2)}
.mqs-bars{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--sp-3)}
.mqs-bar-row{display:grid;grid-template-columns:6rem 1fr 3rem;align-items:center;gap:.5rem;font-size:var(--fs-xs)}
.mqs-bar-name{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mqs-bar-track{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.mqs-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}
.mqs-bar-pct{color:var(--text-3);text-align:right}
.mqs-tips{padding-left:1.2rem;margin:0;font-size:var(--fs-sm);color:var(--text-2)}
.mqs-tips li+li{margin-top:.3rem}

/* ── SEO Landing Pages ──────────────────────────────────────── */
.page-landing .landing-hero{padding:var(--sp-8) 0 var(--sp-6);border-bottom:1px solid var(--border-1);margin-bottom:var(--sp-6)}
.landing-breadcrumb{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-3)}
.landing-breadcrumb a{color:var(--text-3);text-decoration:none}
.landing-breadcrumb a:hover{color:var(--clr-primary)}
.landing-breadcrumb span{margin:0 .35rem}
.landing-h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;line-height:1.2;margin:0 0 var(--sp-2);color:var(--text-1)}
.landing-count{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-3)}
.landing-intro{max-width:65ch;font-size:var(--fs-base);color:var(--text-2);line-height:1.7;margin:0}
.landing-related{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border-1)}
.landing-related h2{font-size:1rem;font-weight:600;color:var(--text-2);margin:0 0 var(--sp-3)}
.landing-related-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.landing-related-tags a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--border-1);border-radius:2rem;font-size:var(--fs-xs);color:var(--text-2);text-decoration:none;background:var(--surface-1);transition:border-color .2s,color .2s}
.landing-related-tags a:hover{border-color:var(--clr-primary);color:var(--clr-primary)}