/* ─── Extracted <style> Blocks ─── */

:root { --red: #C8102E; --black: #0a0a0a; --white: #f5f0ee; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; padding: 40px; min-height: 100vh; }
    .container { max-width: 640px; margin: 0 auto; }
    h1 { font-family: 'Bebas Neue', cursive; font-size: 2.6rem; letter-spacing: 0.04em; margin-bottom: 8px; }
    .subtitle { opacity: 0.5; font-size: 0.85rem; margin-bottom: 32px; }
    .field { margin-bottom: 20px; }
    .field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
    .field input, .field textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 14px 16px; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; outline: none; transition: border-color 0.2s; }
    .field input:focus, .field textarea:focus { border-color: var(--red); }
    .field textarea { min-height: 100px; resize: vertical; }
    .hint { font-size: 0.75rem; opacity: 0.4; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
    .btn { background: var(--red); color: white; border: none; padding: 14px 28px; border-radius: 3px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
    .btn:hover { background: #a00d25; }
    .btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); padding: 12px 22px; border-radius: 3px; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; margin-right: 10px; }
    .msg { padding: 14px 18px; border-radius: 4px; margin-bottom: 24px; font-size: 0.85rem; }
    .msg-ok { background: rgba(27,94,32,0.2); border: 1px solid rgba(27,94,32,0.4); color: #81c784; }
    .msg-err { background: rgba(200,16,46,0.15); border: 1px solid rgba(200,16,46,0.35); color: #ff6b6b; }

/* ── Variables ── */
    :root {
      --red-deep:    #1e0104;
      --red-vivid:   #C8102E;
      --orange:      #FF6B00;
      --orange-lite: #FF9D3D;
      --black:       #0a0a0a;
      --white:       #f5f0ee;
      --cream:       #e8e0d8;
      --grey-muted:  #5a5a5a;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

    body {
      background-color: var(--black);
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
    }

    ::selection { background: var(--red-vivid); color: white; }

    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--black); }
    ::-webkit-scrollbar-thumb { background: var(--red-vivid); }

    /* ── Grain overlay ── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.035;
      pointer-events: none;
      z-index: 9998;
    }

    /* ── Nav (same as main site) ── */
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 20px 40px;
      display: flex; align-items: center; justify-content: space-between;
      background: linear-gradient(to bottom, rgba(10,0,2,0.95) 0%, transparent 100%);
      transition: background 0.3s;
    }
    .site-nav.scrolled {
      background: rgba(10,0,2,0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(200,16,46,0.15);
    }
    .nav-logo {
      font-family: 'Bebas Neue', cursive; font-size: 1.5rem; letter-spacing: 0.08em;
      color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 10px;
    }
    .nav-logo span { color: var(--red-vivid); }
    .nav-links { display: flex; align-items: center; gap: 36px; }
    .nav-link {
      font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(245,240,238,0.5); text-decoration: none; transition: color 0.2s;
    }
    .nav-link:hover { color: var(--white); }
    .nav-link.active { color: var(--orange-lite); }
    .btn-nav {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--red-vivid); color: white; font-size: 0.75rem;
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 10px 20px; text-decoration: none;
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
      transition: background 0.2s;
    }
    .btn-nav:hover { background: #a80d26; }

    /* ── AGE GATE ── */
    #ageGate {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--black);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; text-align: center; padding: 40px;
    }
    #ageGate.hidden { display: none; }

    .age-gate-logo {
      font-family: 'Bebas Neue', cursive; font-size: 3.5rem;
      letter-spacing: 0.06em; line-height: 1;
      margin-bottom: 12px;
    }
    .age-gate-subtitle {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 1.1rem; color: rgba(255,255,255,0.45); margin-bottom: 48px;
      letter-spacing: 0.04em;
    }
    .age-gate-line {
      width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--red-vivid), transparent);
      margin: 0 auto 48px;
    }
    .age-gate-question {
      font-family: 'Cormorant Garamond', serif; font-size: 1.4rem;
      color: var(--cream); margin-bottom: 8px; font-weight: 300;
    }
    .age-gate-note {
      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.25); margin-bottom: 40px;
    }
    .age-gate-btns { display: flex; gap: 16px; justify-content: center; }
    .age-btn-yes {
      font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.85rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      background: var(--red-vivid); color: white; border: none;
      padding: 14px 40px; cursor: pointer;
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
      transition: background 0.2s;
    }
    .age-btn-yes:hover { background: #a80d26; }
    .age-btn-no {
      font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.85rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      background: transparent; color: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.12); padding: 14px 40px; cursor: pointer;
      transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center;
    }
    .age-btn-no:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }
    .age-disclaimer {
      position: absolute; bottom: 32px;
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.08em; color: rgba(255,255,255,0.18);
      text-align: center; max-width: 500px; line-height: 1.7;
    }

    /* ── PAGE HERO ── */
    .gallery-hero {
      min-height: 100vh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0 40px 64px;
      position: relative; overflow: hidden;
      background: linear-gradient(160deg, #0a0a0a 0%, #12010305 50%, #0a0a0a 100%);
    }
    .gallery-hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 80% 40%, rgba(200,16,46,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 15% 60%, rgba(255,107,0,0.06) 0%, transparent 60%);
    }
    /* Decorative large letter */
    .hero-deco-letter {
      position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(20rem, 35vw, 40rem);
      line-height: 1; color: transparent;
      -webkit-text-stroke: 1px rgba(200,16,46,0.07);
      user-select: none; pointer-events: none;
      letter-spacing: -0.05em;
    }
    .gallery-hero-content { position: relative; z-index: 2; }
    .gallery-eyebrow {
      font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--orange); margin-bottom: 20px;
      display: flex; align-items: center; gap: 12px;
    }
    .gallery-eyebrow::before {
      content: ''; display: inline-block; width: 32px; height: 1px;
      background: var(--orange);
    }
    .gallery-title {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(5rem, 13vw, 13rem);
      line-height: 0.88; letter-spacing: 0.01em;
    }
    .gallery-title .outline {
      color: transparent; -webkit-text-stroke: 2px rgba(245,240,238,0.18);
    }
    .gallery-title .red { color: var(--red-vivid); }
    .gallery-subtitle {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 300;
      color: rgba(232,224,216,0.65); margin-top: 20px; letter-spacing: 0.03em;
    }
    .gallery-meta-row {
      display: flex; align-items: center; gap: 40px; margin-top: 40px;
      flex-wrap: wrap;
    }
    .gallery-meta-item {
      display: flex; flex-direction: column; gap: 4px;
    }
    .gallery-meta-num {
      font-family: 'Bebas Neue', cursive; font-size: 2rem; line-height: 1; color: white;
    }
    .gallery-meta-label {
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-muted);
    }
    .gallery-meta-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

    /* ── SCROLL INDICATOR ── */
    .scroll-indicator {
      position: absolute; bottom: 32px; right: 40px; z-index: 2;
      display: flex; align-items: center; gap: 10px;
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.25);
      writing-mode: vertical-lr; transform: rotate(180deg);
    }

    /* ── FILTER BAR ── */
    .gallery-filters {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 40px; border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-wrap: wrap; gap: 16px; position: sticky; top: 0; z-index: 50;
      background: rgba(10,10,10,0.92); backdrop-filter: blur(16px);
    }
    .filter-group { display: flex; gap: 4px; }
    .f-tab {
      font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 7px 18px; border: 1px solid rgba(255,255,255,0.1);
      background: transparent; color: rgba(255,255,255,0.4); cursor: pointer;
      transition: all 0.2s;
    }
    .f-tab:hover { border-color: rgba(200,16,46,0.4); color: rgba(255,255,255,0.75); }
    .f-tab.active { background: var(--red-vivid); border-color: var(--red-vivid); color: white; }
    .filter-right {
      font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.2);
    }

    /* ── SERIES SECTION ── */
    .series-section { padding: 80px 40px; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .series-header {
      display: grid; grid-template-columns: 1fr auto; align-items: end;
      margin-bottom: 48px; gap: 20px;
    }
    .series-name {
      font-family: 'Bebas Neue', cursive; font-size: clamp(2.5rem, 5vw, 4rem);
      line-height: 1; letter-spacing: 0.03em;
    }
    .series-year {
      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
      letter-spacing: 0.14em; color: var(--orange); background: rgba(255,107,0,0.1);
      border: 1px solid rgba(255,107,0,0.25); padding: 4px 10px;
      align-self: flex-start;
    }
    .series-desc {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 1rem; color: rgba(255,255,255,0.4); letter-spacing: 0.03em;
      margin-top: 8px; max-width: 60ch; line-height: 1.7;
    }

    /* ── EDITORIAL GRID ── */
    .editorial-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 60px;
      gap: 8px;
    }

    /* Portrait items — tall */
    .grid-item[data-aspect="portrait"]  { grid-column: span 3; grid-row: span 8; }
    /* Landscape items — wide */
    .grid-item[data-aspect="landscape"] { grid-column: span 6; grid-row: span 5; }
    /* Square items */
    .grid-item[data-aspect="square"]    { grid-column: span 4; grid-row: span 6; }

    /* First item of each series — featured, big */
    .grid-item:first-child { grid-column: span 7; grid-row: span 9; }

    .grid-item {
      position: relative; overflow: hidden; cursor: pointer;
      background: #111;
    }
    .grid-item img,
    .grid-item .thumb-inner {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s;
      filter: grayscale(15%) brightness(0.9);
    }
    .grid-item:hover img,
    .grid-item:hover .thumb-inner img { transform: scale(1.04); filter: grayscale(0%) brightness(1); }

    /* Placeholder when no real image */
    .thumb-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #0f0f0f 0%, #1a0608 50%, #0d0d0d 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .thumb-placeholder-letter {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 4rem; color: rgba(200,16,46,0.12); user-select: none;
      transition: color 0.4s;
    }
    .grid-item:hover .thumb-placeholder-letter { color: rgba(200,16,46,0.22); }

    /* Hover overlay */
    .grid-overlay {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(to top, rgba(10,0,2,0.85) 0%, transparent 50%);
      opacity: 0; transition: opacity 0.35s;
      display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
    }
    .grid-item:hover .grid-overlay { opacity: 1; }

    .overlay-title {
      font-family: 'Cormorant Garamond', serif; font-size: 1rem;
      font-weight: 400; color: var(--cream); letter-spacing: 0.04em;
    }
    .overlay-loc {
      font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.45); margin-top: 3px;
    }

    /* Video indicator */
    .video-indicator {
      position: absolute; top: 12px; left: 12px; z-index: 3;
      display: flex; align-items: center; gap: 6px;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
      padding: 4px 10px;
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #ff4040;
      border-left: 2px solid #ff4040;
    }
    .duration-badge {
      position: absolute; bottom: 10px; right: 10px; z-index: 3;
      background: rgba(0,0,0,0.75); color: white;
      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
      padding: 2px 8px; letter-spacing: 0.04em;
    }
    .play-circle {
      position: absolute; inset: 0; z-index: 3;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.3s;
    }
    .grid-item:hover .play-circle { opacity: 1; }
    .play-circle-inner {
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(200,16,46,0.9); display: flex; align-items: center; justify-content: center;
      transform: scale(0.85); transition: transform 0.3s;
    }
    .grid-item:hover .play-circle-inner { transform: scale(1); }

    /* ── LIGHTBOX ── */
    #lightbox {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.97); backdrop-filter: blur(12px);
      display: none; align-items: center; justify-content: center;
    }
    #lightbox.open { display: flex; }

    .lb-inner {
      position: relative; max-width: 90vw; max-height: 90vh;
      display: flex; flex-direction: column; align-items: center;
    }
    .lb-image-wrap {
      max-height: 80vh; max-width: 85vw; position: relative;
    }
    #lbImg {
      max-height: 80vh; max-width: 85vw;
      object-fit: contain; display: block;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .lb-info {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; margin-top: 16px; padding: 0 4px;
    }
    .lb-title {
      font-family: 'Cormorant Garamond', serif; font-size: 1rem;
      font-style: italic; color: var(--cream); letter-spacing: 0.04em;
    }
    .lb-loc {
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3);
    }
    .lb-close {
      position: fixed; top: 24px; right: 32px;
      background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer;
      font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px; transition: color 0.2s;
    }
    .lb-close:hover { color: white; }
    .lb-nav {
      position: fixed; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer;
      font-size: 2rem; padding: 20px; transition: color 0.2s; z-index: 9001;
    }
    .lb-nav:hover { color: var(--red-vivid); }
    .lb-prev { left: 16px; }
    .lb-next { right: 16px; }

    /* Video lightbox / modal */
    #videoModal {
      position: fixed; inset: 0; z-index: 9100;
      background: rgba(0,0,0,0.95); display: none;
      align-items: center; justify-content: center;
    }
    #videoModal.open { display: flex; }
    .vm-inner { position: relative; width: 88vw; max-width: 1000px; }
    .vm-close {
      position: absolute; top: -44px; right: 0;
      background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer;
      font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
    }
    .vm-close:hover { color: white; }
    .vm-frame-wrap {
      position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
      border: 1px solid rgba(200,16,46,0.25);
    }
    .vm-frame-wrap iframe {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }

    /* ── FOOTER ── */
    .gallery-footer {
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: 48px 40px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px; margin-top: 40px;
    }
    .footer-copy {
      font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.2);
    }
    .footer-quote {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 0.9rem; color: rgba(255,255,255,0.25); text-align: center;
    }

    /* ── Animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .anim-up { animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .d1 { animation-delay: 0.1s; }
    .d2 { animation-delay: 0.25s; }
    .d3 { animation-delay: 0.4s; }
    .d4 { animation-delay: 0.55s; }

    /* Responsive */
    @media (max-width: 900px) {
      .editorial-grid { grid-template-columns: repeat(6, 1fr); }
      .grid-item[data-aspect="portrait"]  { grid-column: span 3; grid-row: span 6; }
      .grid-item[data-aspect="landscape"] { grid-column: span 6; grid-row: span 4; }
      .grid-item[data-aspect="square"]    { grid-column: span 3; grid-row: span 5; }
      .grid-item:first-child              { grid-column: span 6; grid-row: span 7; }
      .site-nav { padding: 16px 20px; }
      .gallery-hero, .series-section, .gallery-footer { padding-left: 20px; padding-right: 20px; }
      .gallery-filters { padding: 16px 20px; }
    }
    @media (max-width: 600px) {
      .editorial-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }
      .grid-item[data-aspect="portrait"]  { grid-column: span 1; grid-row: span 3; }
      .grid-item[data-aspect="landscape"] { grid-column: span 2; grid-row: span 2; }
      .grid-item[data-aspect="square"]    { grid-column: span 1; grid-row: span 2; }
      .grid-item:first-child              { grid-column: span 2; grid-row: span 3; }
      .nav-links { display: none; }
    }

body { background:#0a0a0a; color:#f5f0ee; font-family:'DM Sans',sans-serif; display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
    .font-display { font-family:'Bebas Neue',cursive; }
    .font-mono    { font-family:'JetBrains Mono',monospace; }

:root { --red: #C8102E; --black: #0a0a0a; --white: #f5f0ee; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; padding: 40px; }
    .admin-header { max-width: 1200px; margin: 0 auto 40px; }
    .admin-header h1 { font-family: 'Bebas Neue', cursive; font-size: 3rem; letter-spacing: 0.04em; margin-bottom: 12px; }
    .admin-header p { opacity: 0.5; font-size: 0.85rem; }
    .back-link { color: var(--red); text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; display: inline-block; }
    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
    .sub-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; }
    .sub-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #111; display: block; }
    .sub-body { padding: 16px; }
    .sub-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
    .sub-meta { font-size: 0.75rem; opacity: 0.5; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }
    .sub-desc { font-size: 0.85rem; opacity: 0.7; line-height: 1.6; margin-bottom: 16px; }
    .sub-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .btn { padding: 10px 18px; border: none; border-radius: 3px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
    .btn-approve { background: #1b5e20; color: white; }
    .btn-approve:hover { background: #2e7d32; }
    .btn-reject { background: rgba(200,16,46,0.2); color: #ff6b6b; border: 1px solid rgba(200,16,46,0.4); }
    .btn-reject:hover { background: rgba(200,16,46,0.3); }
    .empty { text-align: center; padding: 80px 20px; opacity: 0.4; font-style: italic; }
    .nav-bar { max-width: 1200px; margin: 0 auto 40px; display: flex; gap: 12px; }
    .nav-link { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
    .nav-link:hover { color: white; }

:root { --red: #C8102E; --dark: #0a0a0a; --white: #f5f0ee; }
    body { background: var(--dark); color: var(--white); font-family: 'DM Sans', sans-serif; }
    .glass-card {
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .glass-card:hover {
      box-shadow: 0 8px 32px rgba(200,16,46,0.05);
      border-color: rgba(255,255,255,0.1);
    }
    .input-field {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 14px 18px;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    .input-field:focus {
      outline: none;
      border-color: rgba(200,16,46,0.6);
      box-shadow: 0 0 12px rgba(200,16,46,0.2);
      background: rgba(200,16,46,0.02);
    }
    .form-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(245,240,238,0.5);
      margin-bottom: 8px;
    }
    .btn-submit {
      background: linear-gradient(135deg, var(--red), #a00d25);
      color: var(--white);
      padding: 16px 32px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(200,16,46,0.3);
      position: relative;
      overflow: hidden;
    }
    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(200,16,46,0.4);
    }
    .btn-draft {
      background: transparent;
      border: 1px solid rgba(245,240,238,0.2);
      color: var(--white);
      padding: 16px 32px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s;
    }
    .btn-draft:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.4);
    }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

:root { --red: #C8102E; --dark: #0a0a0a; --white: #f5f0ee; }
    body { background: var(--dark); color: var(--white); font-family: 'DM Sans', sans-serif; }
    
    .glass-card {
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 32px;
      margin-bottom: 24px;
    }
    .glass-card h2 {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      letter-spacing: 0.04em;
      margin: 0 0 24px;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
    }
    .info-item { margin-bottom: 8px; }
    .info-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(245,240,238,0.4);
      margin-bottom: 4px;
    }
    .info-val { font-size: 1rem; color: var(--white); }

    .doc-link {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 16px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--white);
      transition: all 0.2s;
    }
    .doc-link:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.2);
      transform: translateY(-2px);
    }
    .doc-icon {
      font-size: 1.5rem;
    }

    .split-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
    }
    @media (min-width: 900px) {
      .split-layout {
        grid-template-columns: 1fr 1fr;
      }
    }

    .input-field {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 12px 16px;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      border-radius: 6px;
      margin-bottom: 16px;
      transition: all 0.3s ease;
    }
    .input-field:focus {
      outline: none;
      border-color: rgba(200,16,46,0.6);
      box-shadow: 0 0 12px rgba(200,16,46,0.2);
    }

    .btn-submit {
      background: linear-gradient(135deg, var(--red), #a00d25);
      color: var(--white);
      padding: 14px 28px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(200,16,46,0.3);
      width: 100%;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,16,46,0.4); }

.glass-card {
      background: rgba(17, 17, 17, 0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    
    .input-field {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }
    .input-field:focus {
      border-color: #00c864;
      outline: none;
      box-shadow: 0 0 15px rgba(0, 200, 100, 0.2);
    }
    
    /* Custom Toggle */
    .toggle-checkbox:checked { right: 0; border-color: #ff9d3d; background-color: #ff9d3d; }
    .toggle-checkbox:checked + .toggle-label { background-color: rgba(255,157,61,0.2); border-color: #ff9d3d; }
    .toggle-checkbox { right: 20px; border-color: #333; background-color: #888; }
    .toggle-label { border: 2px solid #333; }

    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

:root { --red: #C8102E; --black: #0a0a0a; --white: #f5f0ee; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; padding: 40px; }
    .container { max-width: 1200px; margin: 0 auto; }
    .nav-bar { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
    .nav-link { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
    .nav-link:hover { color: white; }
    .nav-link.action { color: var(--red); }
    h1 { font-family: 'Bebas Neue', cursive; font-size: 2.6rem; letter-spacing: 0.04em; margin-bottom: 8px; }
    .subtitle { opacity: 0.5; font-size: 0.85rem; margin-bottom: 32px; }
    .rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
    .rule-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; }
    .rule-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #111; display: block; }
    .rule-body { padding: 14px; }
    .rule-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
    .rule-meta { font-size: 0.75rem; opacity: 0.5; font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; }
    .rule-status { display: inline-block; padding: 4px 10px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
    .status-pending { background: rgba(255,152,0,0.15); color: #ffab3d; border: 1px solid rgba(255,152,0,0.3); }
    .status-approved { background: rgba(27,94,32,0.15); color: #81c784; border: 1px solid rgba(27,94,32,0.3); }
    .status-rejected { background: rgba(200,16,46,0.15); color: #ff6b6b; border: 1px solid rgba(200,16,46,0.3); }
    .empty { text-align: center; padding: 80px 20px; opacity: 0.4; font-style: italic; }

:root { --red: #C8102E; --dark: #0a0a0a; --white: #f5f0ee; }
    body { background: var(--dark); color: var(--white); font-family: 'DM Sans', sans-serif; }
    .glass-card {
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      margin-bottom: 32px;
    }
    .input-field {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 12px 16px;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.9rem;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    .input-field:focus {
      outline: none;
      border-color: rgba(200,16,46,0.6);
      box-shadow: 0 0 12px rgba(200,16,46,0.2);
      background: rgba(200,16,46,0.02);
    }
    .btn-upload {
      margin-top: 8px;
      background: rgba(255,255,255,0.05);
      border: 1px dashed rgba(255,255,255,0.2);
      color: rgba(245,240,238,0.8);
      padding: 10px 14px;
      border-radius: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      width: 100%;
      transition: all 0.3s;
    }
    .btn-upload:hover {
      background: rgba(200,16,46,0.1);
      border-color: rgba(200,16,46,0.4);
      color: #ff6b6b;
    }
    .timeline {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 48px;
      padding: 0 20px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      top: 16px;
      left: 40px;
      right: 40px;
      height: 2px;
      background: rgba(255,255,255,0.08);
      z-index: 0;
    }
    .timeline-step {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
    }
    .timeline-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--dark);
      border: 2px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      transition: all 0.3s;
    }
    .timeline-step.active .timeline-circle {
      border-color: var(--red);
      background: rgba(200,16,46,0.2);
      color: #ff6b6b;
      box-shadow: 0 0 15px rgba(200,16,46,0.4);
    }
    .timeline-step.completed .timeline-circle {
      background: var(--red);
      border-color: var(--red);
      color: white;
    }
    .timeline-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.05em;
      color: rgba(245,240,238,0.4);
      text-transform: uppercase;
      text-align: center;
    }
    .timeline-step.active .timeline-label { color: #ff6b6b; }
    .timeline-step.completed .timeline-label { color: white; }
    
    .status-banner {
      padding: 20px 24px;
      border-radius: 8px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .status-banner.approved { background: rgba(0,200,100,0.08); border: 1px solid rgba(0,200,100,0.25); }
    .status-banner.rejected { background: rgba(200,16,46,0.1); border: 1px solid rgba(200,16,46,0.3); }
    .status-banner.pending { background: rgba(255,107,0,0.08); border: 1px solid rgba(255,107,0,0.25); }
    
    .btn-submit {
      background: linear-gradient(135deg, var(--red), #a00d25);
      color: var(--white);
      padding: 14px 28px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(200,16,46,0.25);
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,16,46,0.4); }

/* ─── Live Room Layout ─────────────────────────────────────────── */

        :root {
            --live-chat-width: 360px;
            --live-drawer-width: 360px;
        }

        /* The 3-column shell: fills viewport below the fixed nav */
        #liveRoom {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: calc(100dvh - 80px);
            overflow: hidden;
            position: relative;
        }

        /* LEFT COLUMN — Models sidebar */
        #modelsSidebar {
            width: 260px;
            flex-shrink: 0;
            height: 100%;
            overflow-y: auto;
            border-right: 1px solid rgba(255, 255, 255, 0.07);
            background: #070707;
            display: none;
            /* shown via JS / media query toggle */
        }

        /* Show sidebar on large screens automatically */
        @media (min-width: 1280px) {
            #modelsSidebar {
                display: flex;
                flex-direction: column;
            }
        }

        @media (min-width: 1024px) {
            #liveRoom {
                display: flex !important;
                flex-direction: row !important;
            }

            #centerCol {
                display: flex !important;
                flex-direction: column !important;
            }

            #streamSection {
                display: block !important;
                flex: 0 0 auto !important;
                width: 100% !important;
                min-height: 360px;
                aspect-ratio: 16 / 9 !important;
            }

            #mobileTabBar {
                display: none !important;
            }

            #chatSidebar {
                display: flex !important;
            }

            #profileSection {
                display: block !important;
            }
        }

        /* CENTER COLUMN — stream + interactive panels */
        #centerCol {
            flex: 1;
            min-width: 0;
            height: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        /* Theater mode: center col expands, interactive area scrolls under */
        #liveRoom.theater-mode #centerCol {
            /* center col already flex-1, nothing changes — the video fills its width naturally */
        }

        /* RIGHT COLUMN — chat */
        #chatSidebar {
            position: relative;
            overflow: hidden;
            width: var(--live-chat-width) !important;
            min-width: var(--live-chat-width);
            max-width: var(--live-chat-width);
            flex: 0 0 var(--live-chat-width);
            height: 100%;
            display: flex;
            flex-direction: column;
            border-left: 1px solid rgba(255, 255, 255, 0.07);
            background: #070707;
        }

        /* Theater mode: hide interactive area, chat stays */
        #liveRoom.theater-mode #interactiveArea {
            display: none;
        }

        /* ─── Fullscreen (entire #liveRoom) ────────────────────────────── */
        #liveRoom:fullscreen,
        #liveRoom:-webkit-full-screen {
            background: #000;
            width: 100vw;
            height: 100dvh;
        }

        #liveRoom:fullscreen #modelsSidebar,
        #liveRoom:-webkit-full-screen #modelsSidebar,
        #liveRoom:fullscreen #interactiveArea,
        #liveRoom:-webkit-full-screen #interactiveArea {
            display: none !important;
        }

        #liveRoom:fullscreen #streamSection,
        #liveRoom:-webkit-full-screen #streamSection {
            height: 100dvh !important;
            aspect-ratio: auto !important;
            border-radius: 0 !important;
            border: none !important;
        }

        #liveRoom:fullscreen #chatSidebar,
        #liveRoom:-webkit-full-screen #chatSidebar {
            width: 360px;
            border-radius: 0 !important;
            height: 100dvh !important;
        }

        /* ─── Mobile/Tablet Responsive Layout ───────────────────────────── */
        @media (max-width: 1024px) {
            #liveRoom {
                display: flex;
                flex-direction: column;
                height: calc(100dvh - 80px);
                overflow: hidden;
            }
            #centerCol {
                display: contents;
            }
            #streamSection {
                order: 1;
                flex: none;
                width: 100%;
                aspect-ratio: 4 / 3;
                z-index: 50;
            }
            #mobileTabBar {
                order: 2;
                flex: none;
                width: 100%;
                z-index: 50;
            }
            #chatSidebar, #profileSection, #modelsSidebar {
                order: 3;
                width: 100% !important;
                max-width: none !important;
                flex: 1 1 0%;
                min-height: 0;
                overflow-y: auto;
                border: none;
            }
            .mobile-tab-content,
            #chatSidebar:not(.mobile-active-tab),
            #profileSection:not(.mobile-active-tab),
            #modelsSidebar:not(.mobile-active-tab) {
                display: none !important;
            }
            #chatSidebar.mobile-active-tab,
            #modelsSidebar.mobile-active-tab {
                display: flex !important;
                flex-direction: column;
            }
            #profileSection.mobile-active-tab {
                display: block !important;
            }
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ─── Scrollbar ────────────────────────────────────────────────── */
        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 107, 0, 0.3);
            border-radius: 5px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 107, 0, 0.7);
        }

        /* ─── Animations ───────────────────────────────────────────────── */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-bounce-slight {
            animation: bounceSlight 2s infinite;
        }

        @keyframes bounceSlight {

            0%,
            100% {
                transform: translateY(-10%);
                animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            }

            50% {
                transform: none;
                animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }
        }

        /* Theater mode button glow when active */
        #theaterBtn.theater-active {
            background: rgba(255, 107, 0, 0.2);
            border-color: rgba(255, 107, 0, 0.5);
            color: #ff9d3d;
        }

        /* Mobile: show sidebar as overlay drawer */
        #modelsSidebar.drawer-open {
            display: flex !important;
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 50;
            box-shadow: 4px 0 30px rgba(0, 0, 0, 0.6);
        }

body { margin:0; background:#0a0a0a; color:#f5f0ee; font-family:'DM Sans',sans-serif; }
    .page { min-height:100vh; display:flex; flex-direction:column; }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 40px; border-bottom:1px solid rgba(255,255,255,0.08); }
    .nav-actions { display:flex; align-items:center; gap:18px; }
    .logo { font-family:'Bebas Neue',cursive; font-size:1.5rem; letter-spacing:0.08em; color:#f5f0ee; text-decoration:none; }
    .logo span { color:#C8102E; }
    .back { color:rgba(255,255,255,0.45); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
    .legal-container { width:min(1100px, calc(100% - 40px)); margin:0 auto; padding:96px 0; display:grid; grid-template-columns: 240px 1fr; gap:60px; }
    @media (max-width: 768px) { .legal-container { grid-template-columns: 1fr; gap: 40px; } }
    .sidebar { display:flex; flex-direction:column; gap:8px; }
    .sidebar a { color:rgba(245,240,238,0.55); text-decoration:none; padding:12px 16px; border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; transition:all 0.2s ease; }
    .sidebar a:hover { color:#f5f0ee; background:rgba(255,255,255,0.05); }
    .sidebar a.active { color:#FF9D3D; background:rgba(255,157,61,0.1); font-weight:700; }
    .legal-content { min-width: 0; }
    .eyebrow { font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:#FF9D3D; margin-bottom:16px; }
    h1 { font-family:'Bebas Neue',cursive; font-size:clamp(3rem, 8vw, 6rem); line-height:0.9; margin:0 0 40px; letter-spacing:0.02em; }
    .content { display:grid; gap:18px; color:rgba(245,240,238,0.72); font-size:1rem; line-height:1.8; }
    .message, .errors { margin-top:32px; padding:16px 18px; border:1px solid rgba(255,107,0,0.35); color:rgba(245,240,238,0.78); background:rgba(255,107,0,0.08); line-height:1.7; }
    .errors { border-color:rgba(200,16,46,0.4); background:rgba(200,16,46,0.08); }
    .report-form { margin-top:36px; display:grid; gap:16px; }
    .field { display:grid; gap:8px; }
    .field label { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(245,240,238,0.45); }
    .field input, .field select, .field textarea { width:100%; border:1px solid rgba(245,240,238,0.14); background:rgba(255,255,255,0.04); color:#f5f0ee; padding:14px; border-radius:4px; font:inherit; }
    .field textarea { min-height:150px; resize:vertical; line-height:1.6; }
    .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:rgba(200,16,46,0.72); box-shadow:0 0 0 3px rgba(200,16,46,0.18); }
    .submit { justify-self:start; border:0; background:#C8102E; color:white; padding:14px 28px; border-radius:4px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
    .submit:hover { background:#e0102a; }
    .notice { margin-top:40px; padding:18px 20px; border:1px solid rgba(200,16,46,0.35); color:rgba(245,240,238,0.55); font-family:'JetBrains Mono',monospace; font-size:0.72rem; line-height:1.7; text-transform:uppercase; letter-spacing:0.06em; }
    footer { margin-top:auto; padding:32px 40px; color:rgba(255,255,255,0.25); font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; }

/* ─── Extracted Inline Styles ─── */

.view-custom-style-1 {
    margin-left:10px;
}

.view-custom-style-2 {
    color:var(--red-vivid);
}

.view-custom-style-3 {
    margin-right:18px;
}

.view-custom-style-4 {
    font-size:0.62rem;padding:6px 14px;
}

.view-custom-style-5 {
    font-size:0.62rem;padding:6px 14px;background:transparent;border:1px solid rgba(255,255,255,0.2);margin-left:6px;
}

.view-custom-style-6 {
    display:none;
}

.view-custom-style-7 {
    font-size:1.2rem;margin-bottom:8px;display:flex;align-items:center;gap:8px;
}

.view-custom-style-8 {
    color:#C8102E;
}

.view-custom-style-9 {
    display:flex;gap:20px;
}

.view-custom-style-10 {
    color:rgba(255,255,255,0.3);text-decoration:none;
}

.view-custom-style-11 {
    background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E&quot;);
}

.view-custom-style-12 {
    text-align:center;padding:40px;
}

.view-custom-style-13 {
    font-size:12rem;line-height:1;color:rgba(200,16,46,0.15);
}

.view-custom-style-14 {
    font-size:3rem;margin-top:-20px;
}

.view-custom-style-15 {
    color:rgba(255,255,255,0.4);margin:16px 0 32px;font-size:0.9rem;
}

.view-custom-style-16 {
    display:inline-flex;align-items:center;gap:8px;background:#C8102E;color:white;padding:12px 28px;text-decoration:none;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;
}

.view-custom-style-17 {
    background:#0a0a0a;color:#f5f0ee;font-family:'DM Sans',sans-serif;
}

.view-custom-style-18 {
    max-width:720px;margin:120px auto 80px;padding:0 20px;
}

.view-custom-style-19 {
    font-family:'Bebas Neue',cursive;font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:48px;
}

.view-custom-style-20 {
    background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);padding:32px;border-radius:4px;margin-bottom:24px;
}

.view-custom-style-21 {
    font-family:'Bebas Neue',cursive;font-size:1.3rem;margin:0 0 20px;
}

.view-custom-style-22 {
    display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:0.9rem;
}

.view-custom-style-23 {
    color:rgba(245,240,238,0.4);
}

.view-custom-style-24 {
    display:flex;flex-direction:column;gap:12px;
}

.view-custom-style-25 {
    display:flex;align-items:center;gap:12px;
}

.view-custom-style-26 {
    display:flex;align-items:center;gap:8px;cursor:pointer;
}

.view-custom-style-27 {
    background:rgba(255,255,255,0.08);color:#f5f0ee;padding:8px 16px;border:none;border-radius:2px;cursor:pointer;
}

.view-custom-style-28 {
    display:flex;flex-direction:column;gap:8px;
}

.view-custom-style-29 {
    width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);padding:10px 14px;color:#f5f0ee;border-radius:2px;
}

.view-custom-style-30 {
    background:rgba(255,255,255,0.08);color:#f5f0ee;padding:8px 16px;border:none;border-radius:2px;cursor:pointer;align-self:flex-start;
}

.view-custom-style-31 {
    text-align:center;
}

.view-custom-style-32 {
    color:rgba(245,240,238,0.4);font-size:0.85rem;
}

.view-custom-style-33 {
    position: absolute; top:0; left:0; right:0; z-index: 100;
}

.view-custom-style-34 {
    display:inline-block; width:6px; height:6px; border-radius:50%; background-color:#fff; box-shadow:0 0 5px #fff; animation:pulse 2s infinite;
}

.view-custom-style-35 {
    display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
}

.view-custom-style-36 {
    padding:6px 12px;font-size:0.75rem;
}

.view-custom-style-37 {
    margin-top:20px;
}

.view-custom-style-38 {
    display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;
}

.view-custom-style-39 {
    background:rgba(200,16,46,0.15);border:1px solid rgba(200,16,46,0.3);padding:4px 12px;border-radius:20px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:#ff6b6b;
}

.view-custom-style-40 {
    color:rgba(245,240,238,0.5);margin-bottom:24px;
}

.view-custom-style-41 {
    text-transform:uppercase;
}

.view-custom-style-42 {
    margin-top:24px;
}

.view-custom-style-43 {
    color:var(--white);font-size:0.95rem;line-height:1.6;
}

.view-custom-style-44 {
    color:var(--red);
}

.view-custom-style-45 {
    grid-column: 1 / -1;
}

.view-custom-style-46 {
    color:var(--white); opacity:0.5; font-size:0.8rem; margin-top:4px;
}

.view-custom-style-47 {
    display:flex;gap:12px;margin-top:24px;
}

.view-custom-style-48 {
    margin:0;
}

.view-custom-style-49 {
    margin-top:24px;text-align:center;
}

.view-custom-style-50 {
    text-align:center;padding:40px 0;opacity:0.5;
}

.view-custom-style-51 {
    font-size:2rem;margin-bottom:12px;
}

.view-custom-style-52 {
    background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);padding:16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;
}

.view-custom-style-53 {
    color:var(--red);font-size:0.9rem;
}

.view-custom-style-54 {
    margin:6px 0 0;font-size:0.85rem;color:rgba(245,240,238,0.8);
}

.view-custom-style-55 {
    font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:rgba(245,240,238,0.4);
}

.view-custom-style-56 {
    background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);padding:16px;border-radius:8px;
}

.view-custom-style-57 {
    display:flex;justify-content:space-between;margin-bottom:8px;
}

.view-custom-style-58 {
    color:#ff6b6b;font-size:0.9rem;
}

.view-custom-style-59 {
    margin:0;font-size:0.9rem;line-height:1.5;
}

.view-custom-style-60 {
    border-color: #ff4444; color: #ff4444;
}

.view-custom-style-61 {
    width:18px;height:18px;flex-shrink:0
}

.view-custom-style-62 {
    display:inline;
}

.view-custom-style-63 {
    max-width:800px;margin:120px auto 80px;padding:0 20px;
}

body.profile-page {
    display: block;
    align-items: initial;
    justify-content: initial;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 80px;
    overflow-x: hidden;
    background: #000;
}

.profile-page .view-custom-style-33 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.profile-page .tab-btn.active {
    color: #fff;
}

.profile-page .tab-btn.active::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: #C8102E;
}

.profile-page .profile-info {
    min-width: 0;
}

.profile-page .profile-info h1,
.profile-page .profile-info p {
    overflow-wrap: anywhere;
}

.profile-page .glass-card {
    width: 100%;
    min-width: 0;
}

.profile-page .input-field {
    box-sizing: border-box;
}

.profile-page .profile-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 9999;
    transform: translate(-50%, 16px);
    opacity: 0;
    border: 1px solid rgba(0, 200, 100, 0.4);
    border-radius: 14px;
    background: rgba(0, 24, 14, 0.86);
    color: #00c864;
    padding: 12px 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.profile-page .profile-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 640px) {
    .profile-page .view-custom-style-35,
    .profile-page .view-custom-style-47,
    .profile-page .view-custom-style-52,
    .profile-page .view-custom-style-57 {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-page .glass-card,
    .profile-page #lumaDetailsView {
        padding: 24px;
        border-radius: 18px;
    }

    .profile-page .tab-btn {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
        white-space: nowrap;
    }
}

.view-custom-style-64 {
    text-align: center; margin-bottom: 56px;
}

.view-custom-style-65 {
    font-family:'Bebas Neue',cursive;font-size:clamp(3rem,8vw,5rem);letter-spacing:0.02em;line-height:0.95;margin-bottom:16px;
}

.view-custom-style-66 {
    color:rgba(245,240,238,0.6);font-weight:300;font-size:1.1rem;line-height:1.7;max-width:600px;margin:0 auto;
}

.view-custom-style-67 {
    text-align:center; padding: 60px 20px; max-width: 600px; margin: 0 auto;
}

.view-custom-style-68 {
    font-family:'Bebas Neue',cursive; font-size: 2.5rem; letter-spacing: 0.05em; margin-bottom: 16px;
}

.view-custom-style-69 {
    color:rgba(245,240,238,0.7); font-size: 1rem; line-height: 1.6; margin-bottom: 30px;
}

.view-custom-style-70 {
    display:inline-block; text-decoration:none;
}

.view-custom-style-71 {
    background:rgba(200,16,46,0.08);border:1px solid rgba(200,16,46,0.25);padding:20px 24px;margin-bottom:40px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;
}

.view-custom-style-72 {
    margin:0;font-family:'JetBrains Mono',monospace;font-size:0.8rem;letter-spacing:0.05em;color:#ff6b6b;
}

.view-custom-style-73 {
    color:white;
}

.view-custom-style-74 {
    display:flex;flex-direction:column;gap:32px;
}

.view-custom-style-75 {
    display:flex;align-items:center;gap:12px;margin-bottom:28px;
}

.view-custom-style-76 {
    width:32px;height:32px;border-radius:50%;background:rgba(200,16,46,0.15);display:flex;align-items:center;justify-content:center;color:var(--red);font-family:'Bebas Neue',cursive;font-size:1.2rem;
}

.view-custom-style-77 {
    font-family:'Bebas Neue',cursive;font-size:1.8rem;margin:0;letter-spacing:0.04em;
}

.view-custom-style-78 {
    margin-bottom:20px;
}

.view-custom-style-79 {
    border-top: 2px solid #C8102E;
}

.view-custom-style-80 {
    display:flex;align-items:center;gap:12px;margin-bottom:24px;
}

.view-custom-style-81 {
    width:32px;height:32px;border-radius:50%;background:rgba(200,16,46,0.15);display:flex;align-items:center;justify-content:center;color:var(--red);
}

.view-custom-style-82 {
    width: 100%; text-align: left; border-collapse: collapse;
}

.view-custom-style-83 {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.view-custom-style-84 {
    padding: 12px 0; font-family:'JetBrains Mono',monospace; font-size: 0.75rem; text-transform: uppercase; color: var(--red);
}

.view-custom-style-85 {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.view-custom-style-86 {
    padding: 16px 12px 16px 0; font-weight: 500;
}

.view-custom-style-87 {
    padding: 16px 0; color: rgba(245,240,238,0.7);
}

.view-custom-style-88 {
    border-color: rgba(200,16,46,0.3); background: rgba(200,16,46,0.05);
}

.view-custom-style-89 {
    display:flex;align-items:flex-start;gap:16px;cursor:pointer;
}

.view-custom-style-90 {
    margin-top:4px;width:20px;height:20px;accent-color:var(--red);
}

.view-custom-style-91 {
    font-weight:500;font-size:1.05rem;
}

.view-custom-style-92 {
    display:flex;gap:16px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap;
}

.view-custom-style-93 {
    max-width:1200px;margin:120px auto 80px;padding:0 20px;
}

.view-custom-style-94 {
    margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}

.view-custom-style-95 {
    font-family:'Bebas Neue',cursive;font-size:clamp(2.5rem,5vw,4rem);margin:0;line-height:0.9;
}

.view-custom-style-96 {
    width:auto;background:rgba(255,255,255,0.05);box-shadow:none;border:1px solid rgba(255,255,255,0.1);text-decoration:none;
}

.view-custom-style-97 {
    margin-top:16px;
}

.view-custom-style-98 {
    margin:0;font-size:0.95rem;color:rgba(245,240,238,0.8);
}

.view-custom-style-99 {
    margin-bottom: 16px;
}

.view-custom-style-100 {
    background: rgba(255,64,64,0.1); border: 1px solid rgba(255,64,64,0.3); padding: 16px; border-radius: 6px;
}

.view-custom-style-101 {
    color:#ff4040; margin:0 0 8px; font-size:1rem;
}

.view-custom-style-102 {
    color:#ff4040; margin:0; font-size:0.9rem;
}

.view-custom-style-103 {
    color:rgba(255,255,255,0.5); font-size:0.9rem; margin:0;
}

.view-custom-style-104 {
    font-size:0.95rem;line-height:1.6;color:var(--white);margin:0 0 20px;
}

.view-custom-style-105 {
    font-size:0.9rem;font-weight:600;
}

.view-custom-style-106 {
    font-size:0.7rem;color:rgba(255,255,255,0.4);font-family:'JetBrains Mono',monospace;
}

.view-custom-style-107 {
    opacity:0.4;cursor:not-allowed;
}

.view-custom-style-108 {
    background:rgba(0,200,100,0.08);border:1px solid rgba(0,200,100,0.25);padding:14px 20px;border-radius:6px;margin-bottom:24px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#00c864;
}

.view-custom-style-109 {
    background:rgba(200,16,46,0.1);border:1px solid rgba(200,16,46,0.3);padding:14px 20px;border-radius:6px;margin-bottom:24px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#ff4040;
}

.view-custom-style-110 {
    margin-bottom:8px;
}

.view-custom-style-111 {
    appearance:none;cursor:pointer;
}

.view-custom-style-112 {
    margin-bottom:8px;margin-top:8px;
}

.view-custom-style-113 {
    margin-top:8px;
}

.view-custom-style-114 {
    border:0; border-top:1px solid rgba(255,255,255,0.05); margin: 24px 0;
}

.view-custom-style-115 {
    background: rgba(200,16,46,0.1); color: #ff4040; border: 1px solid rgba(200,16,46,0.3); box-shadow: none;
}

.view-custom-style-116 {
    margin-top:10px;font-size:0.8rem;opacity:0.6;
}

.view-custom-style-117 {
    margin-top:12px; border-top:1px solid rgba(255,255,255,0.1); padding-top:10px;
}

.view-custom-style-118 {
    display:flex; align-items:center; gap:8px; cursor:pointer; font-size:0.8rem; font-weight: 500; color: #ff9d3d;
}

.view-custom-style-119 {
    font-family:'Bebas Neue',cursive;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:0.02em;margin-bottom:12px;
}

.view-custom-style-120 {
    text-align:center;padding:64px 32px;
}

.view-custom-style-121 {
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:2rem;color:rgba(255,255,255,0.3);
}

.view-custom-style-122 {
    color:rgba(245,240,238,0.6);margin-bottom:32px;font-size:1.1rem;
}

.view-custom-style-123 {
    display:inline-block;text-decoration:none;
}

.view-custom-style-124 {
    font-size:1.8rem;
}

.view-custom-style-125 {
    margin:0 0 4px;font-size:1.1rem;color:#00c864;
}

.view-custom-style-126 {
    margin:0;font-size:0.9rem;color:rgba(245,240,238,0.7);
}

.view-custom-style-127 {
    margin:0 0 4px;font-size:1.1rem;color:#ff4040;
}

.view-custom-style-128 {
    color:#ff6b6b;
}

.view-custom-style-129 {
    margin:0 0 4px;font-size:1.1rem;color:#ff9d3d;
}

.view-custom-style-130 {
    color:#fff;
}

.view-custom-style-131 {
    font-family:'Bebas Neue',cursive;font-size:1.6rem;margin:0 0 8px;letter-spacing:0.04em;
}

.view-custom-style-132 {
    color:rgba(245,240,238,0.5);margin-bottom:24px;font-size:0.9rem;line-height:1.5;
}

.view-custom-style-133 {
    display:flex;align-items:center;gap:16px;margin-bottom:32px;background:rgba(255,107,0,0.05);padding:16px;border-radius:6px;border:1px solid rgba(255,107,0,0.15);flex-wrap:wrap;
}

.view-custom-style-134 {
    background:rgba(255,107,0,0.15);border:1px solid rgba(255,107,0,0.4);color:#ff9d3d;padding:10px 16px;border-radius:4px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:0.8rem;letter-spacing:0.05em;cursor:pointer;transition:all 0.2s;
}

.view-custom-style-135 {
    font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:rgba(245,240,238,0.6);
}

.view-custom-style-136 {
    color:#ff9d3d;text-transform:uppercase;
}

.view-custom-style-137 {
    display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px;
}

.view-custom-style-138 {
    display:block;font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.1em;color:rgba(245,240,238,0.5);margin-bottom:8px;
}

.view-custom-style-139 {
    grid-column: 1 / -1; display:flex; justify-content:flex-end; margin-top: 16px;
}

.view-custom-style-140 {
    margin-top: 24px; background: rgba(0,200,255,0.03); border: 1px solid rgba(0,200,255,0.15);
}

.view-custom-style-141 {
    font-family:'Bebas Neue',cursive;font-size:1.6rem;margin:0 0 8px;letter-spacing:0.04em;color:#00c8ff;
}

.view-custom-style-142 {
    display:flex;align-items:center;gap:16px;margin-bottom:16px;background:rgba(255,255,255,0.02);padding:16px;border-radius:6px;border:1px solid rgba(255,255,255,0.05);
}

.view-custom-style-143 {
    background:rgba(0,200,255,0.15);border:1px solid rgba(0,200,255,0.4);color:#00c8ff;padding:10px 16px;border-radius:4px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:0.8rem;letter-spacing:0.05em;cursor:pointer;transition:all 0.2s;
}

.view-custom-style-144 {
    color:#00c864;font-family:'JetBrains Mono',monospace;font-size:0.9rem;font-weight:bold;
}

.view-custom-style-145 {
    padding:12px;background:rgba(255,64,64,0.1);border:1px solid rgba(255,64,64,0.3);border-radius:4px;
}

.view-custom-style-146 {
    color:#ff4040;font-size:0.85rem;margin:0;
}

.view-custom-style-147 {
    font-family:'Bebas Neue',cursive;font-size:1.5rem;margin:0;letter-spacing:0.04em;
}

.view-custom-style-148 {
    color:#ff6b6b;font-family:'DM Sans',sans-serif;font-size:0.85rem;text-decoration:underline;text-underline-offset:2px;
}

.view-custom-style-149 {
    display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;font-size:0.95rem;
}

.view-custom-style-150 {
    display:block;font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.1em;color:rgba(245,240,238,0.4);margin-bottom:4px;text-transform:uppercase;
}

.view-custom-style-151 {
    margin-top:40px;text-align:center;
}

.view-custom-style-152 {
    color:rgba(245,240,238,0.4);font-size:0.85rem;text-decoration:none;transition:color 0.2s;
}

.view-custom-style-153 {
    height:100vh;
}

.view-custom-style-154 {
    top: 80px;
    width: var(--live-drawer-width) !important;
    min-width: var(--live-drawer-width);
    max-width: var(--live-drawer-width);
    z-index: 1000;
}

@media (max-width: 767px) {
    .view-custom-style-154 {
        top: 0;
        width: 100vw !important;
        min-width: 100vw;
        max-width: 100vw;
    }
}

.view-custom-style-155 {
    z-index: 9999;
}

.view-custom-style-156 {
    text-shadow: 1px 1px 3px black, -1px -1px 3px black;
}

.view-custom-style-157 {
    writing-mode: vertical-rl; transform: rotate(180deg);
}

.view-custom-style-158 {
    margin-left:120px;
}

/* ─── Mobile UI Polish Layer ───────────────────────────────────── */
:root {
  --ui-surface: rgba(17, 17, 17, 0.72);
  --ui-border: rgba(255, 255, 255, 0.1);
  --ui-focus: rgba(255, 107, 0, 0.34);
  --ui-radius: 12px;
  --ui-radius-lg: 18px;
}

html {
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-width: 320px;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button,
[type="button"],
[type="submit"],
[role="button"],
.btn,
.btn-primary,
.btn-secondary,
.btn-submit,
.btn-draft,
.btn-nav,
.submit {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.input-field,
.field input,
.field select,
.field textarea {
  min-height: 48px;
  width: 100%;
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  background: rgba(0, 0, 0, 0.42);
  color: var(--white, #f5f0ee);
  font-size: 16px;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

textarea,
.field textarea,
textarea.input-field {
  min-height: 112px;
  resize: vertical;
}

select {
  appearance: none;
  padding-right: 2.75rem !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245, 240, 238, 0.6) 50%),
    linear-gradient(135deg, rgba(245, 240, 238, 0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input-field:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.input-field:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(255, 107, 0, 0.68);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.form-label,
.field label,
label.font-mono {
  line-height: 1.3;
}

.glass-card,
.sub-card,
.rule-card,
.doc-link,
.status-banner,
.message,
.errors,
.notice {
  border-radius: var(--ui-radius-lg);
}

.glass-card {
  background: var(--ui-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

.overflow-x-auto,
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 0, 0.45) rgba(255, 255, 255, 0.06);
}

.overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  vertical-align: middle;
}

@media (max-width: 768px) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  main {
    max-width: 100vw;
  }

  .glass-card {
    padding: 20px;
    border-radius: 18px;
    margin-bottom: 18px;
  }

  .glass-card h2 {
    font-size: 1.35rem;
    margin-bottom: 18px;
  }

  .grid-2,
  .info-grid,
  .split-layout,
  .card-grid,
  .rules-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  form,
  .report-form {
    gap: 16px;
  }

  .field {
    margin-bottom: 16px;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-submit,
  .btn-draft,
  .btn-upload,
  .submit {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.07em;
  }

  .btn-primary {
    clip-path: none;
  }

  .view-custom-style-63 {
    padding: 104px 16px 40px !important;
  }

  .view-custom-style-64 {
    margin-bottom: 28px !important;
    text-align: center;
  }

  .view-custom-style-74 {
    gap: 18px !important;
  }

  .view-custom-style-88,
  .view-custom-style-92,
  .sub-actions,
  .nav-bar,
  .gallery-meta-row,
  .age-gate-btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .view-custom-style-88 > *,
  .view-custom-style-92 > * {
    width: 100%;
  }

  .overflow-x-auto {
    margin-inline: -16px;
    padding-inline: 16px;
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  .overflow-x-auto table,
  table.whitespace-nowrap,
  table[class*="min-w"] {
    min-width: 640px;
  }

  table {
    font-size: 0.875rem;
  }

  th,
  td {
    padding: 14px 16px !important;
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(5, 5, 5, 0.94);
    backdrop-filter: blur(10px);
  }

  tr {
    min-height: 52px;
  }

  .admin-header,
  .container {
    width: 100%;
    max-width: none;
  }

  .admin-header {
    margin-bottom: 28px;
  }

  .admin-header h1,
  h1 {
    overflow-wrap: anywhere;
  }

  #walletDrawer,
  #giftsDrawer,
  #controlDrawer,
  .view-custom-style-154 {
    width: min(100vw, 420px) !important;
    max-width: 100vw;
    border-left-color: rgba(255, 255, 255, 0.08);
  }

  #mobileMenuOverlay {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .site-nav,
  nav.fixed {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .glass-card {
    padding: 16px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .input-field,
  .field input,
  .field select,
  .field textarea {
    padding-left: 14px;
    padding-right: 14px;
  }

  .gallery-filters,
  .filter-group,
  .filter-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .f-tab,
  .filter-tab {
    flex: 0 0 auto;
    min-height: 40px;
  }
}

@media (max-width: 768px) {
  body.profile-page {
    padding-bottom: 48px;
  }

  .profile-page #profile-cover {
    height: 360px !important;
    background-position: center top;
  }

  .profile-page #profile-cover label[for="cover-upload"] {
    top: 86px !important;
    right: 14px !important;
    opacity: 1 !important;
    padding: 10px 12px !important;
    max-width: calc(100vw - 28px);
  }

  .profile-page #profile-cover label[for="cover-upload"] span {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-page > .max-w-\[1200px\] {
    width: 100%;
    margin-top: -74px !important;
    padding-inline: 14px !important;
  }

  .profile-page .profile-info {
    width: 100%;
    min-width: 0 !important;
    flex-basis: 100%;
  }

  .profile-page .profile-info h1 {
    font-size: clamp(2.25rem, 13vw, 3.35rem) !important;
    white-space: normal !important;
    text-align: center;
    line-height: 0.95;
  }

  .profile-page #profile-avatar-img {
    width: 116px !important;
    height: 116px !important;
  }

  .profile-page .btn,
  .profile-page .btn-primary,
  .profile-page .btn-secondary,
  .profile-page .btn-live {
    justify-content: center;
    min-width: 0;
    width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  .profile-page .tab-btn {
    min-height: 46px;
    padding: 12px 14px !important;
    font-size: 0.82rem !important;
    line-height: 1.1;
  }

  .profile-page .tab-btn.active::after {
    left: 14px;
    right: 14px;
  }

  .profile-page .glass-card,
  .profile-page #lumaDetailsView {
    padding: 20px !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
  }

  .profile-page .glass-card h2,
  .profile-page #lumaDetailsView h2 {
    font-size: clamp(1.55rem, 9vw, 2.25rem) !important;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .profile-page .view-custom-style-35 {
    gap: 14px;
  }

  .profile-page .grid {
    min-width: 0;
  }

  .profile-page .grid-cols-\[repeat\(auto-fit\,minmax\(200px\,1fr\)\)\],
  .profile-page #editProfileForm .grid,
  .profile-page #lumaDetailsView .grid {
    grid-template-columns: 1fr !important;
  }

  .profile-page #gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .profile-page #lumaDetailsView .col-span-2 {
    grid-column: auto !important;
  }

  .profile-page #lumaDetailsView .flex.justify-between {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px;
  }

  .profile-page #lumaDetailsView svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto;
  }

  .profile-page #lumaDetailsView span.block.text-xl {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }

  .profile-page .info-item,
  .profile-page #lumaDetailsView .grid > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
  }

  .profile-page .info-val,
  .profile-page .view-custom-style-43,
  .profile-page .view-custom-style-54,
  .profile-page .view-custom-style-59 {
    overflow-wrap: anywhere;
  }

  .profile-page .input-field,
  .profile-page input,
  .profile-page textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .profile-page #gallery-dropzone {
    padding: 24px 14px !important;
    border-radius: 14px !important;
  }

  .profile-page #gallery-grid {
    gap: 12px !important;
  }

  .profile-page #setup-2fa-container {
    padding: 18px !important;
  }

  .profile-page #setup-2fa-container .flex {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-page #setup-2fa-token,
  .profile-page #disable-2fa-token {
    max-width: none !important;
  }

  .profile-page #twofa-qrcode {
    width: min(200px, 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 420px) {
  .profile-page #profile-cover {
    height: 320px !important;
  }

  .profile-page > .max-w-\[1200px\] {
    padding-inline: 12px !important;
  }

  .profile-page .glass-card,
  .profile-page #lumaDetailsView {
    padding: 16px !important;
  }

  .profile-page .tab-btn {
    padding-inline: 12px !important;
  }

  .profile-page #gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-page .profile-toast {
    width: calc(100vw - 24px);
    padding: 12px 14px;
    text-align: center;
  }
}