/* ============================================================
   WASTELAND / APOCALYPTIC THEME — Design System
   ============================================================ */
:root {
  /* Background — scorched earth */
  --px-bg:          #0f0c08;
  --px-bg2:         #181410;
  --px-surface:     #1c1712;
  --px-surface2:    #231d16;
  --px-card:        #1c1712;
  --px-card-inner:  #231d16;

  /* Brand — rusted iron & radiation */
  --px-brand:       #d4851e;
  --px-brand-d:     #b06e18;
  --px-brand-l:     rgba(212,133,30,.10);
  --px-grad:        linear-gradient(135deg, #d4851e 0%, #8b4513 100%);
  --px-glow:        0 0 18px rgba(212,133,30,.22);

  /* Accent — radiation green, alert red, amber */
  --px-cyan:        #5a9a30;
  --px-cyan-l:      rgba(90,154,48,.12);
  --px-danger:      #cc3a2f;
  --px-danger-l:    rgba(204,58,47,.10);
  --px-amber:       #e0a020;

  /* Text */
  --px-ink:         #ede0c8;
  --px-text:        #c5b696;
  --px-muted:       #7a6a52;
  --px-invert:      #0d0804;

  /* Borders */
  --px-border:      rgba(180,120,50,.10);
  --px-border2:     rgba(180,120,50,.18);

  /* Radius */
  --px-r-sm:        3px;
  --px-r:           6px;
  --px-r-lg:        10px;
  --px-r-btn:       4px;
  --px-r-pill:      50px;

  /* Shadows */
  --px-shadow-sm:   0 2px 8px rgba(0,0,0,.4);
  --px-shadow:      0 4px 20px rgba(0,0,0,.45);
  --px-shadow-lg:   0 8px 40px rgba(0,0,0,.55);

  /* Fonts */
  --px-display:    'Share Tech Mono', monospace;
  --px-type:       'Special Elite', 'Courier New', monospace;
  --px-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Misc */
  --px-nav-w:       260px;
  --px-trans:       .25s ease;
  --px-texture:     url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--px-body);
  background:var(--px-bg);
  color:var(--px-text);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Global noise/texture overlay */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:99999;
  background:var(--px-texture);
  opacity:.6;mix-blend-mode:overlay;
}

a{color:var(--px-brand);text-decoration:none;transition:color var(--px-trans)}
a:hover{color:var(--px-amber)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5,h6{color:var(--px-ink);font-weight:700;line-height:1.25}
::selection{background:var(--px-brand-l);color:var(--px-ink)}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--px-surface)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6b4c1e,#8b6914);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8b6914,#b8860b)}

/* ============================================================
   SHELL / LAYOUT
   ============================================================ */
.px-shell{display:flex;min-height:100vh}
.px-shell > .px-layout{flex:1;min-width:0}
.px-app{flex:1;min-width:0;display:flex;flex-direction:column}
.px-wrap{flex:1;padding-bottom:3rem;min-height:60vh}

.px-layout{padding:0 1.5rem;max-width:1360px;margin:0 auto;width:100%}
.px-layout--full{max-width:none;padding:0 1.5rem}

.px-section{padding:20px 10px}
.px-section + .px-section{padding-top:0}
.px-grid-section{padding:2rem 0}
.px-narrow{max-width:900px;margin:0 auto;padding:2rem 1.5rem}
.px-detail-related{padding:2rem 1.5rem}

/* ============================================================
   RAIL — Left Sidebar Navigation
   ============================================================ */
.px-rail{
  position:sticky;top:0;left:0;width:var(--px-nav-w);min-width:var(--px-nav-w);
  height:100vh;overflow-y:auto;overflow-x:hidden;
  background:var(--px-surface);
  border-right:1px solid var(--px-border);
  display:flex;flex-direction:column;
  padding:1.5rem 1rem 1rem;
  z-index:1000;align-self:flex-start;
}
.px-rail__brand{
  display:flex;align-items:center;gap:.55rem;margin-bottom:1.25rem;
  font-family:var(--px-display);font-size:1.15rem;color:var(--px-ink);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:0 .25rem;
}
.px-logo__icon{font-size:1.5rem;line-height:1}
.px-rail__brand:hover{color:var(--px-brand)}

/* Search in rail */
.px-rail__search{
  display:flex;margin-bottom:1.25rem;
  background:var(--px-surface2);border:1px solid var(--px-border2);
  border-radius:var(--px-r);overflow:hidden;
}
.px-rail__search input{
  flex:1;min-width:0;background:transparent;border:none;
  color:var(--px-ink);padding:.55rem .75rem;font-size:.85rem;outline:none;
}
.px-rail__search input::placeholder{color:var(--px-muted)}
.px-rail__search button{
  background:transparent;border:none;color:var(--px-muted);
  padding:.55rem .7rem;font-size:.9rem;transition:color var(--px-trans);
}
.px-rail__search button:hover{color:var(--px-brand)}

/* Rail nav links */
.px-rail__nav{display:flex;flex-direction:column;gap:2px;margin-bottom:1.25rem}
.px-rail__link{
  display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;
  font-size:.88rem;color:var(--px-text);border-radius:var(--px-r);
  transition:all var(--px-trans);text-decoration:none;
}
.px-rail__link:hover,.px-rail__link.px-active{
  background:var(--px-brand-l);color:var(--px-brand);
}
.px-rail__link svg,.px-rail__link i{width:16px;text-align:center;font-size:.85rem;opacity:.6}
.px-rail__link:hover svg,.px-rail__link.px-active svg{opacity:1}

/* Rail categories */
.px-rail__cat{margin-bottom:1.25rem}
.px-rail__cat p,.px-rail__cath{
  font-family:var(--px-display);font-size:.72rem;letter-spacing:.08em;font-weight:700;
  text-transform:uppercase;color:var(--px-muted);margin-bottom:.5rem;
  padding:0 .25rem;
}
.px-side__h{
  font-family:var(--px-display);font-weight:700;color:var(--px-ink);
  font-size:.92rem;line-height:1.25;margin-bottom:.75rem;
  display:flex;align-items:center;gap:.5rem;
}
.px-rail__catlist{display:flex;flex-direction:column;gap:1px}
.px-rail__catlink{
  display:block;padding:.4rem .65rem;font-size:.84rem;
  color:var(--px-text);border-radius:var(--px-r);
  transition:all var(--px-trans);text-decoration:none;
}
.px-rail__catlink:hover,.px-rail__catlink.px-active{
  background:var(--px-brand-l);color:var(--px-brand);
}

/* Mobile rail toggle */
.px-rail__toggle{
  display:none;position:fixed;top:.85rem;left:.85rem;z-index:1010;
  background:var(--px-surface);border:1px solid var(--px-border2);
  color:var(--px-ink);font-size:1.3rem;width:38px;height:38px;
  border-radius:var(--px-r-sm);align-items:center;justify-content:center;
}
.px-rail__backdrop{display:none}

/* Sign-in & User chip */
.px-btn--signin{
  background:var(--px-brand-l);border:1px solid rgba(212,133,30,.2);
  color:var(--px-brand);padding:.5rem 1rem;border-radius:var(--px-r-btn);
  font-family:var(--px-display);font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;margin:.5rem .25rem;transition:all var(--px-trans);
}
.px-btn--signin:hover{background:var(--px-brand);color:var(--px-invert)}

.px-userchip{margin:.5rem 0;position:relative}
.px-userchip__btn{
  display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;
  background:var(--px-surface2);border:1px solid var(--px-border2);
  border-radius:var(--px-r);color:var(--px-text);width:100%;
  transition:all var(--px-trans);font-size:.85rem;
}
.px-userchip__btn:hover{border-color:var(--px-brand)}
.px-userchip__avatar{
  width:30px;height:30px;border-radius:var(--px-r-sm);
  background:var(--px-grad);color:var(--px-invert);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px-display);font-size:.75rem;flex-shrink:0;
}
.px-userchip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.px-dropdown{
  position:absolute;top:100%;left:0;right:0;margin-top:4px;
  background:var(--px-surface);border:1px solid var(--px-border2);
  border-radius:var(--px-r);overflow:hidden;z-index:50;box-shadow:var(--px-shadow-lg);
  display:none;
}
.px-userchip:hover .px-dropdown,
.px-dropdown.px-open{display:block}
.px-dropdown__item{
  display:block;padding:.5rem .75rem;font-size:.82rem;
  color:var(--px-text);transition:all var(--px-trans);text-decoration:none;
}
.px-dropdown__item:hover{background:var(--px-brand-l);color:var(--px-brand)}
.px-dropdown__div{height:1px;background:var(--px-border);margin:3px 0}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.px-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem;
}
.px-sec-head__left{display:flex;align-items:center;gap:.65rem}
.px-sec-title{
  font-family:var(--px-display);font-size:1.1rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--px-ink);
}
.px-sec-badge{
  background:var(--px-brand-l);color:var(--px-brand);
  font-family:var(--px-display);font-size:.7rem;padding:.15rem .5rem;
  border-radius:var(--px-r-pill);letter-spacing:.04em;
}
.px-sec-link{
  font-family:var(--px-display);font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--px-muted);transition:color var(--px-trans);
}
.px-sec-link:hover{color:var(--px-brand)}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.px-pagehead{padding:2.5rem 0 1.5rem}
.px-pagehead--center{text-align:center}
.px-pagehead__title{
  font-family:var(--px-display);font-size:1.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--px-ink);margin-bottom:.4rem;
}
.px-pagehead__sub{font-size:.95rem;color:var(--px-muted);max-width:600px}
.px-pagehead--center .px-pagehead__sub{margin:0 auto}
.px-pagehead__meta{
  display:flex;gap:.75rem;align-items:center;margin-top:.5rem;
  font-family:var(--px-display);font-size:.75rem;color:var(--px-muted);
}

/* ============================================================
   STANDARD CARDS (.px-card)
   ============================================================ */
.px-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.25rem;
}
.px-grid--tags{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.px-minigrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;
}

.px-card{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);overflow:hidden;
  transition:all var(--px-trans);display:block;text-decoration:none;
  position:relative;
}
.px-card:hover{
  border-color:var(--px-brand);box-shadow:var(--px-glow);
  transform:translateY(-2px);
}

.px-card__thumb{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  background:var(--px-surface2);
}
.px-card__thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.px-card:hover .px-card__thumb img{transform:scale(1.06)}

.px-card__badge{
  position:absolute;top:.55rem;left:.55rem;
  background:var(--px-brand);color:var(--px-invert);
  font-family:var(--px-display);font-size:.65rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:2px;
  z-index:2;
}
.px-card__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity var(--px-trans);
}
.px-card:hover .px-card__play{opacity:1}
.px-card__playbtn{
  width:44px;height:44px;border-radius:50%;background:var(--px-brand);
  color:var(--px-invert);display:flex;align-items:center;justify-content:center;
  font-size:1rem;box-shadow:0 0 20px rgba(212,133,30,.4);
  transition:transform var(--px-trans);
}
.px-card:hover .px-card__playbtn{transform:scale(1.1)}

.px-card__body{padding:.85rem 1rem}
.px-card__title{
  font-size:.95rem;font-weight:600;color:var(--px-ink);margin-bottom:.2rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.px-card__desc{
  font-size:.8rem;color:var(--px-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.px-card__footer{
  padding:.5rem 1rem .85rem;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--px-border);
}
.px-card__rating{
  display:flex;align-items:center;gap:.2rem;
  font-family:var(--px-display);font-size:.75rem;color:var(--px-amber);
}

/* ============================================================
   MAGAZINE MODULE (.px-mod-mag)
   ============================================================ */
.px-mod-mag{display:grid;grid-template-columns:1.6fr 1fr;gap:1.25rem;margin-bottom:2rem}

.px-mag__hero{
  position:relative;border-radius:var(--px-r-lg);overflow:hidden;
  min-height:380px;border:1px solid var(--px-border2);
}
.px-mag__hero-bg{
  position:absolute;inset:0;background:var(--px-surface2);
  background-size:cover;background-position:center;
  transition:transform .5s ease;
}
.px-mag__hero:hover .px-mag__hero-bg{transform:scale(1.05)}
.px-mag__hero-ovl{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,12,8,.95) 0%,rgba(15,12,8,.4) 50%,rgba(15,12,8,.15) 100%);
  z-index:1;
}
.px-mag__hero-body{
  position:absolute;bottom:0;left:0;right:0;padding:1.5rem;z-index:2;
}
.px-mag__tag{
  display:inline-block;background:var(--px-brand);color:var(--px-invert);
  font-family:var(--px-display);font-size:.65rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.15rem .55rem;border-radius:2px;margin-bottom:.5rem;
}
.px-mag__title{
  font-family:var(--px-display);font-size:1.5rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--px-ink);margin-bottom:.4rem;
}
.px-mag__desc{font-size:.85rem;color:var(--px-text);margin-bottom:.6rem;line-height:1.5}
.px-mag__meta{display:flex;align-items:center;gap:.75rem}
.px-mag__rating{display:flex;align-items:center;gap:.2rem;color:var(--px-amber);font-family:var(--px-display);font-size:.8rem}
.px-mag__btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--px-grad);color:var(--px-invert);border:none;
  padding:.45rem 1rem;border-radius:var(--px-r-btn);
  font-family:var(--px-display);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;transition:all var(--px-trans);
}
.px-mag__btn:hover{box-shadow:var(--px-glow);transform:translateY(-1px)}

/* Mag row (side cards) */
.px-mag__row{display:flex;flex-direction:column;gap:.85rem}
.px-mag__card{
  display:flex;gap:.75rem;background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r);padding:.65rem;text-decoration:none;
  transition:all var(--px-trans);align-items:center;
}
.px-mag__card:hover{border-color:var(--px-brand);box-shadow:var(--px-glow)}
.px-mag__img{
  width:90px;height:64px;min-width:90px;border-radius:var(--px-r-sm);
  overflow:hidden;background:var(--px-surface2);
}
.px-mag__img img{width:100%;height:100%;object-fit:cover}
.px-mag__card-body{flex:1;min-width:0}
.px-mag__num{
  font-family:var(--px-display);font-size:1.3rem;color:var(--px-brand);font-weight:700;
}
.px-mag__card-title{font-size:.85rem;font-weight:600;color:var(--px-ink);margin-bottom:.15rem}
.px-mag__card-rating{display:flex;align-items:center;gap:.15rem;color:var(--px-amber);font-family:var(--px-display);font-size:.7rem}

/* ============================================================
   CINEMATIC MODULE (.px-mod-cine)
   ============================================================ */
.px-mod-cine{overflow:hidden;margin-bottom:2rem}
.px-cine__track{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
}
.px-cine__track::-webkit-scrollbar{height:4px}
.px-cine{
  flex:0 0 280px;min-width:280px;scroll-snap-align:start;
  border-radius:var(--px-r-lg);overflow:hidden;text-decoration:none;
  border:1px solid var(--px-border);background:var(--px-card);
  transition:all var(--px-trans);
}
.px-cine:hover{border-color:var(--px-brand);box-shadow:var(--px-glow);transform:translateY(-2px)}
.px-cine__img{
  position:relative;height:170px;overflow:hidden;background:var(--px-surface2);
}
.px-cine__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.px-cine:hover .px-cine__img img{transform:scale(1.06)}
.px-cine__grad{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,12,8,.8) 0%,rgba(15,12,8,0) 50%);
}
.px-cine__rank{
  position:absolute;top:.5rem;left:.5rem;
  font-family:var(--px-display);font-size:1.1rem;font-weight:700;color:var(--px-brand);
  background:rgba(15,12,8,.7);padding:.15rem .45rem;border-radius:2px;
}
.px-cine__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--px-trans);
}
.px-cine:hover .px-cine__play{opacity:1}
.px-cine__play::after{
  content:'▶';font-size:2rem;color:var(--px-brand);
  filter:drop-shadow(0 0 12px rgba(212,133,30,.5));
}
.px-cine__info{padding:.75rem .9rem}
.px-cine__tag{
  display:inline-block;font-family:var(--px-display);font-size:.62rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--px-brand);
  background:var(--px-brand-l);padding:.1rem .4rem;border-radius:2px;margin-bottom:.35rem;
}
.px-cine__title{font-size:.9rem;font-weight:600;color:var(--px-ink);margin-bottom:.25rem}
.px-cine__rating{display:flex;align-items:center;gap:.15rem;color:var(--px-amber);font-family:var(--px-display);font-size:.72rem}

/* ============================================================
   BENTO MODULE (.px-mod-bento)
   ============================================================ */
.px-mod-bento{margin-bottom:2rem}
.px-bento__hero{
  display:block;position:relative;margin-bottom:1.25rem;
  border-radius:var(--px-r-lg);overflow:hidden;
  border:1px solid var(--px-border2);text-decoration:none;
  min-height:320px;background:var(--px-surface2);
}
.px-bento__hero-img{
  position:absolute;inset:0;
  background:var(--px-surface2);
  background-size:cover;background-position:center;
}
.px-bento__hero-img img{
  width:100%;height:100%;object-fit:cover;
}
.px-bento__hero-ovl{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(15,12,8,.9) 0%,rgba(15,12,8,.1) 60%);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:1.5rem;
}
.px-bento__tag{
  display:inline-block;background:var(--px-brand);color:var(--px-invert);
  font-family:var(--px-display);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:2px;margin-bottom:.5rem;
}
.px-bento__title{
  font-family:var(--px-display);font-size:1.4rem;letter-spacing:.04em;
  color:var(--px-ink);margin-bottom:.3rem;
}
.px-bento__desc{font-size:.82rem;color:var(--px-text);line-height:1.5;margin-bottom:.5rem}
.px-bento__rating{color:var(--px-amber);font-family:var(--px-display);font-size:.75rem}

.px-bento__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;
  grid-auto-rows:150px;
}
.px-bento{
  border-radius:var(--px-r);overflow:hidden;position:relative;text-decoration:none;
  border:1px solid var(--px-border);background:var(--px-surface2);
  transition:all var(--px-trans);
}
.px-bento:hover{border-color:var(--px-brand);box-shadow:var(--px-glow)}
.px-bento--1{grid-column:span 2;grid-row:span 2}
.px-bento--2{grid-column:span 2;grid-row:span 1}
.px-bento--3{grid-column:span 2;grid-row:span 2}
.px-bento--4{grid-column:span 3;grid-row:span 2}
.px-bento--5{grid-column:span 3;grid-row:span 2}
.px-bento__img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
}
.px-bento:hover .px-bento__img{transform:scale(1.08)}
.px-bento__info{
  position:absolute;bottom:0;left:0;right:0;padding:.85rem;
  background:linear-gradient(0deg,rgba(15,12,8,.92) 0%,rgba(15,12,8,0) 100%);
}
.px-bento__info .px-bento__title{font-size:.95rem}

/* ============================================================
   GALLERY MODULE (.px-mod-gallery)
   ============================================================ */
.px-mod-gallery{overflow:hidden;margin-bottom:2rem}
.px-gallery__wall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.px-gallery{
  border-radius:var(--px-r-lg);overflow:hidden;position:relative;
  text-decoration:none;border:1px solid var(--px-border);
  transition:all var(--px-trans);aspect-ratio:3/4;background:var(--px-surface2);
}
.px-gallery:hover{border-color:var(--px-brand);box-shadow:var(--px-glow)}
.px-gallery--up{transform:translateY(-20px)}
.px-gallery--down{transform:translateY(20px)}
.px-gallery__inner{
  width:100%;height:100%;overflow:hidden;
}
.px-gallery__inner img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
}
.px-gallery:hover .px-gallery__inner img{transform:scale(1.08)}
.px-gallery__ovl{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,12,8,.88) 0%,rgba(15,12,8,.05) 55%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;
}
.px-gallery__title{font-size:.9rem;font-weight:600;color:var(--px-ink);margin-bottom:.2rem}
.px-gallery__rating{color:var(--px-amber);font-family:var(--px-display);font-size:.72rem}

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.px-detail{position:relative;overflow:hidden}
.px-detail__bg{
  position:absolute;inset:0;background:var(--px-surface2);
  background-size:cover;background-position:center;filter:blur(60px);
  opacity:.25;z-index:0;
}
.px-detail__bg::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,12,8,.6) 0%,var(--px-bg) 100%);
}
.px-detail__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.px-detail__inner{
  position:relative;z-index:1;display:flex;gap:2rem;padding:2.5rem 1.5rem;
  align-items:flex-start;
}
.px-detail__cover{
  width:320px;min-width:320px;border-radius:var(--px-r-lg);overflow:hidden;
  border:1px solid var(--px-border2);box-shadow:var(--px-shadow-lg);
}
.px-detail__cover img{width:100%;display:block}
.px-detail__info{flex:1;min-width:0}
.px-detail__info h1{
  font-family:var(--px-display);font-size:1.8rem;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:.5rem;
}
.px-detail__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.px-detail__tag{
  background:var(--px-brand-l);color:var(--px-brand);
  font-family:var(--px-display);font-size:.65rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.15rem .55rem;border-radius:2px;
}
.px-detail__brief{font-size:.9rem;color:var(--px-text);line-height:1.6;margin-bottom:1rem}
.px-detail__stats{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}
.px-detail__stat{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--px-display);font-size:.78rem;color:var(--px-muted);
}
.px-detail__stat>div{display:flex;flex-direction:column;gap:.1rem;line-height:1.2}
.px-detail__stat small{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--px-muted)}
.px-detail__stat strong{font-size:.82rem;color:var(--px-text)}
.px-detail__icon{color:var(--px-brand);font-size:.9rem;flex-shrink:0}
.px-detail__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.px-detail__share{display:flex;gap:.5rem;align-items:center}
.px-detail__share a{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--px-surface2);border:1px solid var(--px-border2);
  color:var(--px-muted);transition:all var(--px-trans);
}
.px-detail__share a:hover{background:var(--px-brand-l);border-color:var(--px-brand);color:var(--px-brand)}

.px-detail-body{display:flex;gap:2rem;padding:1rem 1.5rem}
.px-detail-main{flex:1;min-width:0}
.px-detail-aside{width:300px;min-width:300px}
.px-detail-panels{margin-top:1.5rem}

/* Detail aside cards */
.px-daside__card{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:1.25rem;margin-bottom:1.25rem;
}
.px-daside__title{
  font-family:var(--px-display);font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:.85rem;color:var(--px-ink);
}
.px-daside__list{display:flex;flex-direction:column;gap:.55rem}
.px-daside__item{display:flex;gap:.6rem;align-items:center;text-decoration:none;transition:all var(--px-trans)}
.px-daside__item:hover{color:var(--px-brand)}
.px-daside__thumb{
  width:56px;height:40px;min-width:56px;border-radius:var(--px-r-sm);
  overflow:hidden;background:var(--px-surface2);
}
.px-daside__thumb img{width:100%;height:100%;object-fit:cover}
.px-daside__name{font-size:.82rem;color:var(--px-text);line-height:1.3}
.px-daside__sub{font-size:.7rem;color:var(--px-muted)}

/* Breadcrumb */
.px-crumb{
  display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;
  font-family:var(--px-display);font-size:.72rem;letter-spacing:.03em;
  color:var(--px-muted);margin-bottom:.75rem;
}
.px-crumb ol{display:flex;gap:.35rem;align-items:center;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.px-crumb li{display:flex;align-items:center;gap:.35rem}
.px-crumb li+li::before{content:'/';color:var(--px-muted);opacity:.4}
.px-crumb a{color:var(--px-muted)}
.px-crumb a:hover{color:var(--px-brand)}
.px-cur{color:var(--px-brand)}

/* ============================================================
   PLAYER & GAME OVERLAY
   ============================================================ */
.px-player{
  background:var(--px-surface);border:1px solid var(--px-border2);
  border-radius:var(--px-r-lg);overflow:hidden;margin-bottom:1.25rem;
}
.px-player__label{
  padding:.7rem 1rem;font-family:var(--px-display);font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--px-muted);
  border-bottom:1px solid var(--px-border);
}
.px-player__frame{width:100%;aspect-ratio:16/9;border:none;display:block;position:relative}
.px-player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}

.px-gameoverlay{
  position:fixed;inset:0;background:rgba(8,5,2,.94);z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.px-gameoverlay__stage{width:100%;max-width:1100px;border-radius:var(--px-r-lg);overflow:hidden}
.px-gameoverlay__stage iframe{width:100%;aspect-ratio:16/9;border:none}
.px-gameoverlay__exit{
  position:absolute;top:1rem;right:1rem;background:rgba(15,12,8,.7);
  border:1px solid var(--px-border2);color:var(--px-ink);
  width:40px;height:40px;border-radius:50%;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--px-trans);
}
.px-gameoverlay__exit:hover{background:var(--px-danger);border-color:var(--px-danger)}

/* Play / Fav buttons */
.px-btn--play{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--px-grad);color:var(--px-invert);border:none;
  padding:.6rem 1.3rem;border-radius:var(--px-r-btn);
  font-family:var(--px-display);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;transition:all var(--px-trans);
}
.px-btn--play:hover{box-shadow:var(--px-glow);transform:translateY(-1px)}

.px-btn-fav,.px-btn-unfav{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--px-card);border:1px solid var(--px-border2);
  color:var(--px-text);padding:.55rem 1rem;border-radius:var(--px-r-btn);
  font-family:var(--px-display);font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;transition:all var(--px-trans);
}
.px-btn-fav:hover,.px-btn-unfav:hover{border-color:var(--px-brand);color:var(--px-brand)}
.px-faved{border-color:var(--px-brand);color:var(--px-brand);background:var(--px-brand-l)}

/* ============================================================
   TABS & PROSE
   ============================================================ */
.px-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--px-border);margin-bottom:1.25rem;
}
.px-tabs button{
  background:transparent;border:none;color:var(--px-muted);
  padding:.6rem 1.2rem;font-family:var(--px-display);font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:all var(--px-trans);
  display:flex;align-items:center;gap:.35rem;
}
.px-tabs button:hover{color:var(--px-text)}
.px-tabs button.px-active{color:var(--px-brand);border-bottom-color:var(--px-brand)}
.px-tabs__count{
  background:var(--px-brand-l);color:var(--px-brand);
  font-size:.65rem;padding:.1rem .4rem;border-radius:var(--px-r-pill);
}
.px-tab{display:none}
.px-tab.px-active{display:block}

.px-prose{line-height:1.75;color:var(--px-text)}
.px-prose p{margin-bottom:1rem}
.px-prose h2,.px-prose h3{font-family:var(--px-display);margin:1.5rem 0 .75rem;text-transform:uppercase;letter-spacing:.04em}
.px-prose ul,.px-prose ol{padding-left:1.5rem;margin-bottom:1rem}
.px-prose li{margin-bottom:.35rem}
.px-prose img{border-radius:var(--px-r);margin:1rem 0}

.px-faq-list{display:flex;flex-direction:column;gap:.65rem}
.px-faq{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r);padding:1rem 1.15rem;cursor:pointer;
}
.px-faq summary{font-weight:600;color:var(--px-ink)}
.px-faq__answer{margin-top:.65rem;font-size:.88rem;color:var(--px-text);line-height:1.6}

/* ============================================================
   COMMENTS
   ============================================================ */
.px-comments{margin-top:1.5rem}
.px-comments__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.px-comments__count{
  font-family:var(--px-display);font-size:.85rem;color:var(--px-muted);
}

/* Comment form */
.px-cform{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:1.25rem;margin-bottom:1.25rem;
  display:flex;flex-direction:column;gap:.75rem;
}
.px-cform__head{display:flex;align-items:center;gap:.65rem}
.px-cform__avatar{
  width:36px;height:36px;border-radius:var(--px-r-sm);
  background:var(--px-surface2);border:1px solid var(--px-border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px-display);color:var(--px-brand);
}
.px-cform__author{font-weight:600;font-size:.88rem;color:var(--px-ink)}
.px-cform__rating{display:flex;gap:.15rem}
.px-star{
  font-size:1.2rem;color:rgba(224,160,32,.12);cursor:pointer;
  transition:color var(--px-trans);
}
.px-star:hover,.px-star.px-on{color:var(--px-amber)}
.px-cform textarea{
  width:100%;min-height:80px;background:var(--px-surface2);
  border:1px solid var(--px-border2);border-radius:var(--px-r);
  color:var(--px-ink);padding:.7rem .9rem;resize:vertical;
  font-size:.88rem;transition:border-color var(--px-trans);
}
.px-cform textarea:focus{border-color:var(--px-brand);outline:none}
.px-cform textarea::placeholder{color:var(--px-muted)}
.px-cform__foot{display:flex;justify-content:flex-end;gap:.5rem}
.px-login-hint{font-size:.82rem;color:var(--px-muted);text-align:center}

/* Individual comments */
.px-comment{
  display:flex;gap:.85rem;padding:1rem 0;border-bottom:1px solid var(--px-border);
}
.px-comment__avatar{
  width:38px;height:38px;min-width:38px;border-radius:var(--px-r-sm);
  background:var(--px-surface2);border:1px solid var(--px-border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px-display);font-size:.9rem;color:var(--px-brand);
  overflow:hidden;
}
.px-comment__avatar img{width:100%;height:100%;object-fit:cover}
.px-comment__head{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}
.px-comment__author{font-weight:600;font-size:.85rem;color:var(--px-ink)}
.px-comment__date{font-family:var(--px-display);font-size:.7rem;color:var(--px-muted)}
.px-comment__stars{display:flex;gap:.08rem;color:var(--px-amber);font-size:.75rem}
.px-comment__body{font-size:.85rem;color:var(--px-text);line-height:1.55;margin-top:.3rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.px-btn,
.px-btn--primary,
.px-btn--ghost,
.px-btn--danger,
.px-btn--play,
.px-btn--signin,
.px-btn-fav,
.px-btn-unfav,
.px-loadmore {
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border-radius:var(--px-r-btn);font-family:var(--px-display);
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  transition:all var(--px-trans);cursor:pointer;border:none;
  line-height:1.3;
}

.px-btn,
.px-btn--primary,
.px-btn--ghost,
.px-btn--danger,
.px-btn--play,
.px-btn--signin,
.px-btn-fav,
.px-btn-unfav {
  padding:.55rem 1.2rem;font-size:.8rem;
}

.px-btn--primary{background:var(--px-grad);color:var(--px-invert)}
.px-btn--primary:hover{box-shadow:var(--px-glow);transform:translateY(-1px);color:var(--px-invert)}
.px-btn--ghost{background:transparent;border:1px solid var(--px-border2);color:var(--px-text)}
.px-btn--ghost:hover{border-color:var(--px-brand);color:var(--px-brand)}
.px-btn--danger{background:var(--px-danger-l);border:1px solid rgba(204,58,47,.25);color:var(--px-danger)}
.px-btn--danger:hover{background:var(--px-danger);color:#fff}
.px-loadmore{
  display:block;margin:1.5rem auto 0;background:var(--px-card);
  border:1px solid var(--px-border2);color:var(--px-text);
  padding:.6rem 2rem;border-radius:var(--px-r-pill);
  font-family:var(--px-display);font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:all var(--px-trans);
}
.px-loadmore:hover{border-color:var(--px-brand);color:var(--px-brand)}

/* Pagination */
.px-pager{display:flex;justify-content:center;gap:.35rem;margin-top:2rem;flex-wrap:wrap}
.px-pager button,.px-pager a{
  min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--px-surface);border:1px solid var(--px-border2);
  color:var(--px-text);border-radius:var(--px-r-sm);font-size:.82rem;
  transition:all var(--px-trans);text-decoration:none;cursor:pointer;
}
.px-pager button:hover,.px-pager a:hover,
.px-pager button.px-active,.px-pager a.px-active{
  background:var(--px-brand);border-color:var(--px-brand);color:var(--px-invert);
}

/* Pagination - backend generated markup */
.pagination-container{display:flex;justify-content:center;width:100%}
.pagination{display:block}
.pagination-list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.35rem;list-style:none;margin:0;padding:0;
}
.pagination-item{list-style:none}
.pagination-link{
  min-width:36px;height:36px;padding:0 .55rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--px-surface);border:1px solid var(--px-border2);
  color:var(--px-text);border-radius:var(--px-r-sm);font-size:.82rem;
  transition:all var(--px-trans);text-decoration:none;line-height:1;
}
.pagination-link:hover{
  background:var(--px-brand);border-color:var(--px-brand);color:var(--px-invert);
}
.pagination-item.active .pagination-link,
.pagination-link.current{
  background:var(--px-brand);border-color:var(--px-brand);color:var(--px-invert);
}
.pagination-link.prev.disabled,
.pagination-link[aria-disabled="true"]{
  opacity:.45;pointer-events:none;cursor:not-allowed;
}

/* ============================================================
   EMPTY / LOADING STATES
   ============================================================ */
.px-empty{
  text-align:center;padding:3rem 1.5rem;color:var(--px-muted);
}
.px-empty__icon{font-size:3rem;margin-bottom:.75rem;opacity:.4}
.px-empty__title{font-size:1.17em;font-weight:700;line-height:1.25;color:var(--px-ink);margin:1em 0}
.px-empty p{font-size:.9rem;margin-bottom:.5rem}
.px-empty__btns{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}
.px-empty--sm{padding:1.5rem 1rem}
.px-empty--box{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:2rem;
}
.px-empty--boxicon{font-size:2rem;margin-bottom:.5rem;opacity:.3}

.px-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem;color:var(--px-muted);
}
.px-spinner{
  width:40px;height:40px;border:3px solid var(--px-border2);
  border-top-color:var(--px-brand);border-radius:50%;
  animation:px-spin .8s linear infinite;
}
@keyframes px-spin{to{transform:rotate(360deg)}}
.px-loading__text{font-family:var(--px-display);font-size:.78rem;margin-top:.75rem;letter-spacing:.04em}

/* Lazy image */
.px-lazy{opacity:0;transition:opacity .4s ease}
.px-lazy[src],.px-lazy.loaded{opacity:1}
.px-lazy{background:var(--px-surface2)}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.px-profile{display:flex;gap:2rem;padding:2rem 1.5rem;align-items:flex-start}
.px-profile__aside{width:260px;min-width:260px}
.px-profile__card{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:1.5rem;text-align:center;
}
.px-profile__avatar{
  width:80px;height:80px;border-radius:50%;margin:0 auto .75rem;
  background:var(--px-surface2);border:2px solid var(--px-border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px-display);font-size:1.8rem;color:var(--px-brand);
  overflow:hidden;
}
.px-profile__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.px-profile__card h3{font-size:1rem;margin-bottom:.15rem}
.px-profile__card > p{font-size:.78rem;color:var(--px-muted);margin-bottom:.75rem}
.px-profile__nav{display:flex;flex-direction:column;gap:3px;margin-top:.75rem}
.px-profile__nav button{
  width:100%;text-align:left;padding:.5rem .75rem;background:transparent;border:none;
  color:var(--px-text);border-radius:var(--px-r);font-size:.84rem;
  transition:all var(--px-trans);cursor:pointer;
}
.px-profile__nav button:hover,.px-profile__nav button.px-active{
  background:var(--px-brand-l);color:var(--px-brand);
}

.px-profile__main{flex:1;min-width:0}

/* px-profile__panel = main content column (used in profile.html) */
.px-profile__panel{
  flex:1;min-width:0;
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:1.5rem;margin-bottom:1.25rem;
}
.px-profile__pane{display:none}
.px-profile__pane.px-active{display:block}
.px-profile__heading{
  font-family:var(--px-display);font-size:.9rem;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:1rem;color:var(--px-ink);
}
.px-profile__stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.px-profile__stat{text-align:center}
.px-stat__val{
  font-family:var(--px-display);font-size:1.4rem;color:var(--px-brand);
}
.px-stat__label{font-size:.75rem;color:var(--px-muted);margin-top:.1rem}

/* Mini cards in profile */
.px-mini{
  display:flex;gap:.75rem;align-items:center;padding:.65rem 0;
  border-bottom:1px solid var(--px-border);text-decoration:none;
  transition:all var(--px-trans);
}
.px-mini:hover{color:var(--px-brand)}
.px-mini > a{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;text-decoration:none;color:inherit}
.px-mini__img{
  width:64px;height:48px;min-width:64px;border-radius:var(--px-r-sm);
  overflow:hidden;background:var(--px-surface2);
}
.px-mini__img img{width:100%;height:100%;object-fit:cover}
.px-mini__body{flex:1;min-width:0}
.px-mini__title{font-size:.85rem;color:var(--px-text);margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-mini__actions{display:flex;gap:.35rem}

/* Avatar upload section */
.px-avatar{padding:.5rem 0}
.px-avatar__head{margin-bottom:1rem}
.px-avatar__title{
  font-family:var(--px-display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--px-ink);
}
.px-avatar__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.px-avatar__preview{
  width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:var(--px-surface2);border:2px solid var(--px-border2);
}
.px-avatar__preview img{width:100%;height:100%;object-fit:cover}
.px-avatar__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.px-avatar__hint{font-size:.72rem;color:var(--px-muted);margin-top:.5rem}
.px-file{display:none}

/* Profile form */
.px-pform{display:flex;flex-direction:column;gap:1rem}

/* ============================================================
   FORMS (general)
   ============================================================ */
.px-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.px-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.px-form-grid .px-field{margin-bottom:0}
.px-field label{
  font-family:var(--px-display);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--px-text);
}
.px-field input,.px-field select,.px-field textarea{
  background:var(--px-surface2);border:1px solid var(--px-border2);
  color:var(--px-ink);padding:.6rem .8rem;border-radius:var(--px-r);
  font-size:.88rem;transition:border-color var(--px-trans),box-shadow var(--px-trans);
}
.px-field input:focus,.px-field select:focus,.px-field textarea:focus{
  border-color:var(--px-brand);box-shadow:0 0 0 3px var(--px-brand-l);outline:none;
}
.px-field input::placeholder,.px-field textarea::placeholder{color:var(--px-muted)}
.px-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a6a52' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
.px-field-grp{display:flex;flex-direction:column;gap:.75rem}
.px-field-grp h4{
  font-family:var(--px-display);font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--px-ink);margin-bottom:.25rem;
}

/* ============================================================
   ALERT / NOTIFICATION / TOAST
   ============================================================ */
.px-alert{display:none;padding:.6rem 1rem;border-radius:var(--px-r-sm);margin-bottom:1rem;font-size:.82rem;font-family:var(--px-display);letter-spacing:.03em}
.px-alert.px-show{display:block}
.px-alert.success{background:var(--px-cyan-l);border:1px solid rgba(90,154,48,.25);color:var(--px-cyan)}
.px-alert.error{background:var(--px-danger-l);border:1px solid rgba(204,58,47,.25);color:var(--px-danger)}
.px-alert.info{background:var(--px-brand-l);border:1px solid rgba(212,133,30,.25);color:var(--px-brand)}

.px-notify{
  position:fixed;top:1rem;right:1rem;z-index:10050;max-width:380px;
  background:var(--px-surface);border:1px solid var(--px-border2);
  border-radius:var(--px-r);padding:1rem 1.15rem;
  box-shadow:var(--px-shadow-lg);animation:pxSlideIn .3s ease;
  display:flex;flex-direction:column;gap:.4rem;
}
@keyframes pxSlideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
.px-notify--ok{border-left:3px solid var(--px-cyan)}
.px-notify--err{border-left:3px solid var(--px-danger)}
.px-notify__head{display:flex;align-items:center;justify-content:space-between}
.px-notify__head strong{font-family:var(--px-display);font-size:.82rem;letter-spacing:.04em;color:var(--px-ink)}
.px-notify__x{background:none;border:none;color:var(--px-muted);font-size:1.1rem;cursor:pointer;line-height:1}
.px-notify__x:hover{color:var(--px-ink)}
.px-notify__body{font-size:.82rem;color:var(--px-text);line-height:1.45}
.px-hidden{display:none !important}
.px-toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10050;
  background:var(--px-surface);border:1px solid var(--px-border2);
  color:var(--px-text);padding:.6rem 1.5rem;border-radius:var(--px-r-pill);
  font-family:var(--px-display);font-size:.78rem;letter-spacing:.04em;
  box-shadow:var(--px-shadow-lg);display:none;
}
.px-toast.px-show{
  display:block;animation:pxFadeUp .35s ease;
}
@keyframes pxFadeUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ============================================================
   AUTH MODAL (JS-generated)
   ============================================================ */
.px-auth{
  position:fixed;inset:0;background:rgba(8,5,2,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:10001;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;animation:pxFadeIn .25s ease;
}
@keyframes pxFadeIn{from{opacity:0}to{opacity:1}}
.px-auth__card{
  background:var(--px-card);border:1px solid var(--px-border2);
  border-radius:var(--px-r-lg);padding:2.2rem;max-width:440px;width:100%;
  max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:var(--px-shadow-lg);animation:pxModalIn .3s ease;
}
@keyframes pxModalIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.px-auth__x{
  position:absolute;top:.85rem;right:.85rem;background:none;border:none;
  color:var(--px-muted);font-size:1.5rem;cursor:pointer;transition:color var(--px-trans);line-height:1;
}
.px-auth__x:hover{color:var(--px-brand)}
.px-auth__head{text-align:center;margin-bottom:1.5rem}
.px-auth__logo{font-size:2.5rem;margin-bottom:.5rem}
.px-auth__head h2{font-size:1.4rem;margin-bottom:.3rem}
.px-auth__head p{font-size:.85rem;color:var(--px-muted)}
.px-auth__tabs{
  display:flex;gap:0;margin-bottom:1.5rem;border:1px solid var(--px-border2);
  border-radius:var(--px-r);overflow:hidden;
}
.px-auth__tabs button{
  flex:1;background:transparent;border:none;color:var(--px-muted);
  padding:.65rem;font-family:var(--px-display);font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all var(--px-trans);
}
.px-auth__tabs button.px-active,.px-auth__tabs button:hover{background:var(--px-brand-l);color:var(--px-brand)}
.px-auth__form{display:none}
.px-auth__form.px-active{display:block}
.px-pass{position:relative}
.px-pass input{padding-right:2.5rem}
.px-pass__icon{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  color:var(--px-muted);cursor:pointer;font-size:.85rem;transition:color var(--px-trans);
}
.px-pass__icon:hover{color:var(--px-text)}
.px-auth__submit{
  width:100%;padding:.75rem;background:var(--px-grad);color:var(--px-invert);
  border:none;border-radius:var(--px-r-btn);font-family:var(--px-display);
  font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all var(--px-trans);margin-top:.5rem;
}
.px-auth__submit:hover{box-shadow:var(--px-glow);transform:translateY(-1px)}
.px-auth__submit.px-busy{opacity:.7;cursor:not-allowed;pointer-events:none}
.px-auth__foot{text-align:center;margin-top:1rem;font-size:.82rem;color:var(--px-muted)}
.px-auth__foot a{color:var(--px-brand);cursor:pointer}
.px-has-error input{border-color:var(--px-danger) !important}
.px-field__error{font-size:.72rem;color:var(--px-danger);margin-top:.3rem;font-family:var(--px-display);letter-spacing:.03em}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */
.px-confirm{
  position:fixed;inset:0;background:rgba(8,5,2,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:10010;display:none;align-items:center;justify-content:center;
  padding:1.5rem;
}
.px-confirm.px-open{display:flex}
.px-confirm__box{
  background:var(--px-card);border:1px solid var(--px-border2);
  border-radius:var(--px-r-lg);padding:2rem;max-width:420px;width:100%;
  text-align:center;box-shadow:var(--px-shadow-lg);
}
.px-confirm__icon{font-size:2.5rem;margin-bottom:.75rem;color:var(--px-danger)}
.px-confirm__title{font-size:1.1rem;margin-bottom:.5rem}
.px-confirm__text{font-size:.88rem;color:var(--px-text);margin-bottom:1.25rem;line-height:1.5}
.px-confirm__btns{display:flex;gap:.6rem;justify-content:center}
.px-confirm__btn{
  padding:.55rem 1.5rem;border-radius:var(--px-r-btn);border:none;
  font-family:var(--px-display);font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:all var(--px-trans);
}
.px-confirm__btn--cancel{
  background:var(--px-surface2);border:1px solid var(--px-border2);color:var(--px-text);
}
.px-confirm__btn--cancel:hover{border-color:var(--px-brand);color:var(--px-brand)}
.px-confirm__btn--danger{background:var(--px-danger);color:#fff}
.px-confirm__btn--danger:hover{opacity:.9}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.px-cookie{
  position:fixed;bottom:0;left:0;right:0;z-index:10040;
  background:var(--px-surface);border-top:1px solid var(--px-border2);
  padding:1rem 1.5rem;display:none;align-items:center;gap:1.25rem;
  flex-wrap:wrap;
}
.px-cookie.px-show{display:flex}
.px-cookie__text{flex:1;min-width:200px;font-size:.84rem;color:var(--px-text)}
.px-cookie__btns{display:flex;gap:.5rem}
.px-cookie__btn{
  padding:.45rem 1.2rem;border-radius:var(--px-r-btn);border:none;
  font-family:var(--px-display);font-size:.75rem;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:all var(--px-trans);
}
.px-cookie__btn--accept{background:var(--px-grad);color:var(--px-invert)}
.px-cookie__btn--accept:hover{box-shadow:var(--px-glow)}

/* ============================================================
   FOOTER (.px-foot)
   ============================================================ */
.px-foot{
  background:var(--px-surface);border-top:1px solid var(--px-border);
  padding:3rem 2rem 1.5rem;margin-top:3rem;position:relative;
}
.px-foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,133,30,.12),transparent);
}
.px-foot__inner{max-width:1360px;margin:0 auto}
.px-foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.px-foot__brand{
  font-family:var(--px-display);font-size:1.1rem;color:var(--px-ink);
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  display:inline-block;margin-bottom:.75rem;
}
.px-foot__about{font-size:.84rem;color:var(--px-muted);line-height:1.6;margin-bottom:1rem}
.px-foot__social{display:flex;gap:.65rem;margin-top:.75rem}
.px-foot__social a{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--px-border2);border-radius:var(--px-r-sm);
  color:var(--px-muted);font-size:.85rem;transition:all var(--px-trans);
}
.px-foot__social a:hover{background:var(--px-brand);border-color:var(--px-brand);color:var(--px-invert)}
.px-foot__col h4,.px-foot__col p{
  font-family:var(--px-display);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.85rem;color:var(--px-ink);
}
.px-foot__col ul li{margin-bottom:.45rem}
.px-foot__col ul li a{font-size:.84rem;color:var(--px-muted);transition:color var(--px-trans)}
.px-foot__col ul li a:hover{color:var(--px-brand)}
.px-foot__bar{
  margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--px-border);
  text-align:center;font-size:.76rem;color:var(--px-muted);
  font-family:var(--px-display);letter-spacing:.03em;
}

/* ============================================================
   CONTENT PAGES (About, Privacy, Terms, etc.)
   ============================================================ */
.px-content{line-height:1.75;color:var(--px-text)}
.px-content p{margin-bottom:1rem}
.px-content h2{font-family:var(--px-display);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;color:var(--px-ink);margin:2rem 0 .75rem}
.px-content h3{font-family:var(--px-display);font-size:1rem;color:var(--px-ink);margin:1.5rem 0 .5rem}
.px-content ul,.px-content ol{padding-left:1.5rem;margin-bottom:1rem}
.px-content li{margin-bottom:.35rem}
.px-panel{
  background:var(--px-card);border:1px solid var(--px-border);
  border-radius:var(--px-r-lg);padding:1.5rem;margin-bottom:1.25rem;
}
.px-panel h2{font-family:var(--px-display);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;color:var(--px-ink);margin-bottom:.75rem}
.px-panel h3{font-family:var(--px-display);font-size:1rem;color:var(--px-ink);margin:1.25rem 0 .5rem}
.px-panel p{margin-bottom:.75rem;line-height:1.7}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .px-detail__inner{flex-direction:column}
  .px-detail__cover{width:240px;min-width:240px}
}

@media (max-width:1024px){
  .px-mod-mag{grid-template-columns:1fr}
  .px-mag__hero{min-height:300px}
  .px-gallery__wall{grid-template-columns:repeat(2,1fr)}
  .px-gallery--up,.px-gallery--down{transform:none}
  .px-bento__grid{grid-template-columns:repeat(2,1fr)}
  .px-bento--1,.px-bento--2,.px-bento--3,.px-bento--4,.px-bento--5{grid-column:span 1;grid-row:span 1}
  .px-detail-body{flex-direction:column}
  .px-detail-aside{width:100%;min-width:100%}
  .px-profile{flex-direction:column}
  .px-profile__aside{width:100%;min-width:100%}
  .px-foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  .px-rail{
    position:fixed;left:-100%;transition:left .3s ease;z-index:1000;
    box-shadow:var(--px-shadow-lg);
  }
  .px-rail.px-open{left:0}
  .px-rail__backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:999;
  }
  .px-rail.px-open ~ .px-rail__backdrop{display:block}
  .px-rail__toggle{display:flex}
  .px-shell{padding-left:0}
  .px-layout{padding:0 1rem}
  .px-section{padding:20px 10px}
  .px-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .px-grid--tags{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .px-mag__title{font-size:1.2rem}
  .px-mag__hero{min-height:250px}
  .px-cine{flex:0 0 240px;min-width:240px}
  .px-bento__grid{grid-template-columns:1fr}
  .px-gallery__wall{grid-template-columns:1fr 1fr;gap:.75rem}
  .px-detail__cover{width:100%;min-width:100%}
  .px-pagehead__title{font-size:1.4rem}
  .px-form-grid{grid-template-columns:1fr}
  .px-cookie{flex-direction:column;text-align:center}
  .px-foot__grid{grid-template-columns:1fr;gap:2rem}
  .px-foot{padding:2rem 1rem 1rem}
}

@media (max-width:480px){
  .px-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .px-gallery__wall{grid-template-columns:1fr}
  .px-cine{flex:0 0 200px;min-width:200px}
  .px-tabs button{padding:.5rem .7rem;font-size:.72rem}
  .px-bento__hero{min-height:220px}
}

/* ============================================================
   HERO SECTION (theme-matched override)
   ============================================================ */
.hero-section{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--px-brand-l), transparent 60%),
    linear-gradient(180deg, var(--px-bg2) 0%, var(--px-bg) 100%);
  border-bottom:1px solid var(--px-border);
  padding:4rem 1.5rem;
}
.hero-section::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--px-texture);opacity:.5;mix-blend-mode:overlay;
}
.hero-container{
  position:relative;max-width:1200px;margin:0 auto;width:100%;
}
.hero-content{max-width:720px}
.hero-tagline{
  display:inline-block;font-family:var(--px-display);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--px-brand);
  background:var(--px-brand-l);border:1px solid var(--px-border2);
  padding:.4rem .8rem;border-radius:var(--px-r-pill);
  margin-bottom:1.1rem;
}
.hero-content h1{
  font-family:var(--px-display);font-weight:700;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;
  color:var(--px-ink);margin-bottom:1rem;letter-spacing:.01em;
}
.hero-description{
  font-size:1.02rem;color:var(--px-text);line-height:1.7;
  max-width:620px;margin-bottom:.85rem;
}
.hero-subdescription{
  font-size:.92rem;color:var(--px-muted);line-height:1.7;
  max-width:620px;margin-bottom:1.75rem;
}
.hero-stats{display:flex;flex-wrap:wrap;gap:2.25rem;margin-bottom:2rem}
.stat-item{display:flex;flex-direction:column;gap:.2rem}
.stat-number{
  font-family:var(--px-display);font-size:1.7rem;font-weight:700;
  color:var(--px-brand);line-height:1;
}
.stat-label{
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--px-muted);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--px-display);font-size:.86rem;letter-spacing:.04em;
  border-radius:var(--px-r-btn);padding:.75rem 1.35rem;
  border:1px solid transparent;cursor:pointer;transition:all var(--px-trans);
  text-decoration:none;
}
.btn-primary{
  background:var(--px-grad);color:var(--px-invert);
  box-shadow:var(--px-glow);
}
.btn-primary:hover{
  color:var(--px-invert);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(212,133,30,.35);
}
.btn-outline{
  background:transparent;border-color:var(--px-border2);color:var(--px-text);
}
.btn-outline:hover{border-color:var(--px-brand);color:var(--px-brand)}

@media (max-width:768px){
  .hero-section{padding:2.75rem 1.25rem}
  .hero-stats{gap:1.5rem}
  .stat-number{font-size:1.4rem}
}
@media (max-width:480px){
  .hero-section{padding:2.25rem 1rem}
  .hero-stats{gap:1.1rem 1.75rem}
  .btn{width:100%;justify-content:center}
}