/* ============================================================
       DESIGN TOKENS - ENHANCED
    ============================================================ */
    :root {
      --bg-core:        #020005;
      --bg-card:        #0d0d12;
      --accent:         #7c3aed;
      --accent-hover:   #6d28d9;
      --accent-glow:    rgba(124,58,237,.4);
      --accent-light:   #a78bfa;
      --accent-ultra:   #c4b5fd;
      --dock-glass:     rgba(10,10,15,.85);
      --modal-glass:    rgba(16,16,20,.96);
      --muted:          #94a3b8;
      --line:           rgba(255,255,255,.08);
      --line-subtle:    rgba(255,255,255,.05);
      --glass:          rgba(255,255,255,.04);
      --glass-strong:   rgba(255,255,255,.07);
      --glass-ultra:    rgba(255,255,255,.1);
      --ease-spring:    cubic-bezier(0.34,1.56,0.64,1);
      --ease-out:       cubic-bezier(0.16,1,0.3,1);
      --ease-bounce:    cubic-bezier(0.68,-0.55,0.265,1.55);
      --radius-card:    24px;
      --radius-pill:    999px;
      --font:           'Vazir','IRANSansX','Tahoma',sans-serif;
      --shadow-sm:      0 4px 12px rgba(0,0,0,.3);
      --shadow-md:      0 12px 32px rgba(0,0,0,.45);
      --shadow-lg:      0 24px 64px rgba(0,0,0,.55);
      --shadow-glow:    0 0 40px rgba(124,58,237,.25);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    a { text-decoration: none; color: inherit; }
    button { font-family: var(--font); cursor: pointer; border: none; background: none; }
    img { display: block; max-width: 100%; }

    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--accent-light), var(--accent));
      border-radius: 99px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    * { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }

    html { scroll-behavior: smooth; }

    body {
      background-color: var(--bg-core);
      background-image:
        radial-gradient(ellipse 80% 50% at 15% 15%, rgba(124,58,237,.12), transparent),
        radial-gradient(ellipse 60% 40% at 85% 80%, rgba(244,63,94,.08), transparent),
        radial-gradient(ellipse 70% 45% at 50% 50%, rgba(139,92,246,.05), transparent);
      background-attachment: fixed;
      color: #e2e8f0;
      font-family: var(--font);
      height: 100dvh;
      width: 100vw;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
      user-select: none;
    }

    /* ============================================================
       LAYOUT SHELL
    ============================================================ */
    #app-view {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    #scroll-container {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 14px;
      padding-bottom: 130px;
      -webkit-overflow-scrolling: touch;
    }

    /* ============================================================
       TOP APP BAR
    ============================================================ */
    .top-appbar {
      margin: 0 16px 16px;
      padding: 14px 18px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,.04) 50%,
        rgba(124,58,237,.12) 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      backdrop-filter: blur(20px) saturate(200%);
      -webkit-backdrop-filter: blur(20px) saturate(200%);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.1);
      position: relative;
      overflow: hidden;
    }

    .top-appbar::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      transition: left .6s ease;
    }

    .top-appbar:hover::before { left: 100%; }

    @media (min-width: 640px) {
      .top-appbar { margin: 0 24px 18px; padding: 16px 22px; }
    }

    .brand {
      justify-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      line-height: 1;
    }

    .brand-title {
      font-size: 20px;
      font-weight: 950;
      letter-spacing: -.03em;
      background: linear-gradient(100deg, #fff 0%, var(--accent-ultra) 30%, var(--accent-light) 55%, #fff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 2px 20px rgba(124,58,237,.3);
    }

    @media (min-width: 768px) { .brand-title { font-size: 22px; } }

    .brand-sub {
      font-size: 10px;
      font-weight: 900;
      color: rgba(148,163,184,.9);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .page-pill {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      background: rgba(0,0,0,.4);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
    }

    .page-pill .label {
      font-size: 10px;
      font-weight: 900;
      color: rgba(148,163,184,.9);
    }

    .page-pill #current-page {
      font-size: 15px;
      font-weight: 950;
      color: var(--accent-ultra);
      text-shadow: 0 0 12px rgba(124,58,237,.5);
    }

    /* ============================================================
       ARCHIVE HEADER - ENHANCED
    ============================================================ */
    .archive-header {
      margin: 0 16px 20px;
      padding: 22px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: linear-gradient(135deg,
        rgba(255,255,255,.07) 0%,
        rgba(255,255,255,.03) 60%,
        rgba(124,58,237,.12) 100%);
      border: 1px solid var(--line);
      border-radius: 26px;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.1);
      position: relative;
      overflow: hidden;
    }

    .archive-header::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%);
      pointer-events: none;
      opacity: .6;
    }

    @media (min-width: 640px) { .archive-header { margin: 0 24px 24px; padding: 24px 26px; } }

    .archive-header-title {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
      position: relative;
      z-index: 2;
    }

    .archive-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.12));
      border: 1px solid rgba(124,58,237,.4);
      color: var(--accent-ultra);
      box-shadow: 0 10px 28px rgba(124,58,237,.25), inset 0 1px 0 rgba(255,255,255,.15);
      flex-shrink: 0;
    }

    .archive-icon-wrap svg { width: 22px; height: 22px; }

    .archive-texts { min-width: 0; }

    .archive-texts h2 {
      font-size: 17px;
      font-weight: 950;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 4px;
      letter-spacing: -.01em;
    }

    .archive-texts p {
      font-size: 11.5px;
      font-weight: 850;
      color: rgba(148,163,184,.95);
      line-height: 1.8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw;
    }

    @media (min-width: 768px) {
      .archive-texts h2 { font-size: 19px; }
      .archive-texts p { max-width: none; }
    }

    /* ============================================================
       CARD GRID
    ============================================================ */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding: 0 16px;
      contain: layout;
      content-visibility: auto;
      contain-intrinsic-size: 0 400px;
    }

    @media (min-width: 500px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
    @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 24px; } }
    @media (min-width: 1280px) { .card-grid { grid-template-columns: repeat(6, 1fr); gap: 22px; } }

    /* ============================================================
       MANGA CARD
    ============================================================ */
    .manga-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-card);
      overflow: hidden;
      background: linear-gradient(160deg,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,.03) 50%,
        rgba(124,58,237,.08) 100%);
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: var(--shadow-md);
      transform: translate3d(0,0,0);
      transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), border-color .3s ease;
      will-change: transform, box-shadow;
      position: relative;
      opacity: 0;
      animation: fadeInUp .55s var(--ease-out) forwards;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .manga-card:nth-child(1) { animation-delay: .05s; }
    .manga-card:nth-child(2) { animation-delay: .1s; }
    .manga-card:nth-child(3) { animation-delay: .15s; }
    .manga-card:nth-child(4) { animation-delay: .2s; }
    .manga-card:nth-child(5) { animation-delay: .25s; }
    .manga-card:nth-child(6) { animation-delay: .3s; }
    .manga-card:nth-child(n+7) { animation-delay: .35s; }

    @media (hover: hover) {
      .manga-card:hover {
        transform: translateY(-10px) scale(1.025);
        box-shadow: 0 36px 80px rgba(0,0,0,.7),
                    0 0 0 1px rgba(124,58,237,.3),
                    0 0 70px rgba(124,58,237,.2);
        border-color: rgba(124,58,237,.45);
      }
      .manga-card:hover::after { opacity: 1; }
    }

    .manga-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-card);
      padding: 2px;
      background: linear-gradient(135deg, rgba(124,58,237,.5), transparent 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity .3s ease;
    }

    .manga-card:active { transform: scale(.97); }

    /* ---- Cover ---- */
    .card-media {
      position: relative;
      aspect-ratio: 3 / 4.2;
      background: #09090f;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform .6s cubic-bezier(0.25,0.46,0.45,0.94), filter .4s ease;
      filter: brightness(.95) contrast(1.05);
    }

    .manga-card:hover .card-media img {
      transform: scale(1.12);
      filter: brightness(1.05) contrast(1.08) saturate(1.1);
    }

    .card-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(0,0,0,.4) 0%,
        transparent 45%,
        rgba(0,0,0,.25) 100%);
      pointer-events: none;
    }

    /* ---- Top badges ---- */
    .card-badges-top {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 7px;
      z-index: 5;
    }

    .card-badges-left  { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
    .card-badges-right { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }

    .type-badge {
      font-size: 10px;
      font-weight: 950;
      padding: 6px 10px;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: .06em;
      box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
    }

    .type-manga   { background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.1));  color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
    .type-manhwa  { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(139,92,246,.1)); color: #c4b5fd; border: 1px solid rgba(139,92,246,.4); }
    .type-manhua  { background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,.1)); color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
    .type-comic   { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(59,130,246,.1)); color: #93c5fd; border: 1px solid rgba(59,130,246,.4); }
    .type-novel   { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.1)); color: #fcd34d; border: 1px solid rgba(245,158,11,.4); }
    .type-default { background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.08)); color: #e5e7eb; border: 1px solid rgba(255,255,255,.25); }

    .rating-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-pill);
      background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(245,158,11,.1));
      border: 1px solid rgba(245,158,11,.4);
      color: #fde68a;
      font-size: 10px;
      font-weight: 950;
      white-space: nowrap;
      box-shadow: 0 7px 18px rgba(245,158,11,.2), inset 0 1px 0 rgba(255,255,255,.1);
    }

    .rating-badge svg { width: 13px; height: 13px; fill: currentColor; }

    .tag-status {
      font-size: 9px;
      font-weight: 950;
      padding: 6px 10px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35);
      color: #e5e7eb;
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .status-ongoing   { color: #bbf7d0; background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.06)); border-color: rgba(16,185,129,.35); }
    .status-completed { color: #fecaca; background: linear-gradient(135deg, rgba(244,63,94,.14), rgba(244,63,94,.06));   border-color: rgba(244,63,94,.35); }
    .status-dropped   { color: #bfdbfe; background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.06));  border-color: rgba(59,130,246,.35); }
    .status-default   { color: #e5e7eb; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.15); }

    /* ---- Card body ---- */
    .card-body {
      padding: 14px 13px 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: rgba(2,0,5,.55);
      flex: 1;
    }

    .card-title {
      font-size: 13.5px;
      font-weight: 950;
      color: #fff;
      line-height: 1.7;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color .3s ease, text-shadow .3s ease;
    }

    @media (min-width: 768px) { .card-title { font-size: 14px; } }

    .manga-card:hover .card-title {
      color: var(--accent-ultra);
      text-shadow: 0 0 22px rgba(124,58,237,.35);
    }

    .card-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-top: auto;
    }

    .stat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 950;
      color: rgba(148,163,184,.95);
    }

    .stat svg {
      width: 14px;
      height: 14px;
      color: var(--accent-ultra);
      flex-shrink: 0;
      filter: drop-shadow(0 0 6px rgba(124,58,237,.35));
    }
    .stat b { color: #e5e7eb; font-weight: 950; }

    /* ============================================================
       PAGINATION
    ============================================================ */
    #pagination {
      margin-top: 32px;
      padding: 0 16px 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    @media (min-width: 768px) { #pagination { padding: 0 24px 12px; margin-top: 38px; gap: 12px; } }

    .page-btn {
      height: 44px;
      min-width: 44px;
      padding: 0 16px;
      border-radius: 16px;
      font-size: 12.5px;
      font-weight: 950;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: #fff;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all .25s var(--ease-spring);
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .page-btn svg { width: 17px; height: 17px; }

    .page-btn:hover {
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.09);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.12);
    }

    .page-btn:active { transform: scale(.97); }

    .page-btn.active {
      background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(124,58,237,.18));
      border-color: rgba(124,58,237,.6);
      box-shadow: 0 18px 44px rgba(124,58,237,.28),
                  inset 0 1px 0 rgba(255,255,255,.15),
                  0 0 0 1px rgba(124,58,237,.35);
      transform: translateY(-3px);
      color: var(--accent-ultra);
      text-shadow: 0 0 10px rgba(124,58,237,.4);
    }

    .page-ellipsis {
      display: inline-flex;
      align-items: center;
      color: rgba(148,163,184,.6);
      font-size: 14px;
      padding: 0 5px;
      user-select: none;
    }

    /* ============================================================
       DOCK
    ============================================================ */
    .dock-island {
      position: fixed;
      bottom: 22px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 50;
      pointer-events: none;
    }

    .dock-glass {
      pointer-events: auto;
      background: var(--dock-glass);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 32px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      gap: 7px;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12);
      max-width: calc(100vw - 20px);
    }

    .dock-icon {
      width: 60px;
      min-height: 54px;
      border-radius: 19px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #7a8899;
      transition: all .3s var(--ease-spring);
      position: relative;
      padding: 7px 5px;
    }

    .dock-icon svg { width: 21px; height: 21px; }

    .dock-icon:hover,
    .dock-icon.active {
      color: #fff;
      background: rgba(255,255,255,.1);
      transform: translateY(-5px);
      box-shadow: 0 12px 32px rgba(0,0,0,.5);
    }

    .dock-label {
      font-size: 10.5px;
      font-weight: 900;
      color: #8a9ab0;
      line-height: 1;
    }

    .dock-icon:hover .dock-label,
    .dock-icon.active .dock-label { color: #fff; }

    .dock-home {
      width: 56px;
      height: 56px;
      border-radius: 22px;
      background: linear-gradient(145deg, var(--accent) 0%, #4c1d95 100%);
      color: #fff;
      margin: -32px 11px 0;
      box-shadow: 0 12px 36px rgba(124,58,237,.5),
                  inset 0 1px 0 rgba(255,255,255,.15),
                  0 0 0 3px rgba(2,0,5,.8);
      border: 3px solid #020005;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .25s var(--ease-bounce);
    }

    .dock-home svg { width: 25px; height: 25px; stroke-width: 2.5px; }
    .dock-home:hover {
      transform: translateY(-6px) scale(1.05);
      box-shadow: 0 16px 48px rgba(124,58,237,.6),
                  inset 0 1px 0 rgba(255,255,255,.2),
                  0 0 0 3px rgba(2,0,5,.9);
    }
    .dock-home:active { transform: scale(.92); }

    .dock-login-dot {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #f43f5e;
      box-shadow: 0 0 12px rgba(244,63,94,.6);
    }

    .dock-status-dot {
      position: absolute;
      top: -3px;
      right: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 1px solid #1a1a1d;
    }

    .dock-status-dot.online  { background: #34d399; box-shadow: 0 0 10px #34d399; }
    .dock-status-dot.offline { background: #f43f5e; }

    .dock-avatar-wrap {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      background: linear-gradient(to bottom right, #7c3aed, #4f46e5);
      padding: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(124,58,237,.4);
    }

    .dock-avatar-wrap svg { width: 23px; height: 23px; color: #fff; }

    /* ============================================================
       MODALS
    ============================================================ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0,0,0,.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity .35s ease, visibility .35s;
    }

    .modal-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }

    .modal-card {
      width: 92%;
      max-width: 500px;
      background: var(--modal-glass);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 30px;
      padding: 24px;
      box-shadow: 0 36px 72px -18px rgba(0,0,0,.95);
      transform: translateY(30px) scale(.96);
      transition: transform .45s var(--ease-spring);
      max-height: 84vh;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .modal-overlay.open .modal-card { transform: translateY(0) scale(1); }

    .modal-card.wide { max-width: 620px; }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .modal-title {
      font-size: 19px;
      font-weight: 950;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .modal-title svg { width: 21px; height: 21px; color: var(--accent-ultra); }

    .modal-close-btn {
      width: 38px;
      height: 38px;
      background: rgba(255,255,255,.05);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      transition: all .25s ease;
    }

    .modal-close-btn svg { width: 19px; height: 19px; }
    .modal-close-btn:hover {
      background: rgba(244,63,94,.18);
      color: #f43f5e;
      transform: rotate(90deg);
    }

    /* ---- Menu modal ---- */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }

    .menu-btn {
      background: linear-gradient(135deg, rgba(255,255,255,.05), transparent);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #c8c8d0;
      font-size: 11.5px;
      font-weight: 850;
      transition: all .28s var(--ease-out);
      text-align: center;
    }

    .menu-btn:hover {
      background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.06));
      transform: translateY(-5px);
      border-color: rgba(124,58,237,.35);
      color: #fff;
      box-shadow: 0 12px 32px rgba(124,58,237,.18);
    }

    .menu-icon-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s ease;
    }

    .menu-icon-circle svg { width: 21px; height: 21px; color: #6b7280; }
    .menu-btn:hover .menu-icon-circle { background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.15)); }
    .menu-btn:hover .menu-icon-circle svg { color: var(--accent-ultra); }

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 19px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 16px;
      font-weight: 850;
      color: #e5e5e5;
      font-size: 12.5px;
      transition: all .25s ease;
      margin-bottom: 10px;
    }

    .action-btn:hover { background: rgba(255,255,255,.07); transform: translateX(-4px); }

    .action-btn-left  { display: flex; align-items: center; gap: 13px; }
    .action-btn-left svg  { width: 17px; height: 17px; color: #6b7280; }
    .action-btn-right svg { width: 17px; height: 17px; color: #374151; }

    .menu-footer {
      font-size: 10.5px;
      color: #4b5563;
      font-weight: 700;
      text-align: center;
      margin-top: 24px;
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,.07);
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    /* ---- Search modal ---- */
    .search-shell { width: 100%; text-align: right; }

    .search-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 11px;
    }

    .search-sub {
      font-size: 11.5px;
      font-weight: 850;
      color: rgba(148,163,184,.95);
      line-height: 1.95;
      margin: 0 0 15px;
    }

    .search-input-wrap {
      position: relative;
      background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
                  radial-gradient(circle at top right, rgba(124,58,237,.18), transparent 40%);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      padding: 11px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.5);
    }

    .search-input {
      width: 100%;
      height: 58px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.28);
      color: #fff;
      padding: 0 52px 0 15px;
      outline: none;
      font-weight: 900;
      font-size: 15.5px;
      font-family: var(--font);
      transition: all .25s ease;
    }

    .search-input:focus {
      border-color: rgba(124,58,237,.6);
      background: rgba(124,58,237,.09);
      box-shadow: 0 0 0 4px rgba(124,58,237,.18);
    }

    .search-input::placeholder { color: rgba(148,163,184,.6); font-weight: 850; }

    .search-icon {
      position: absolute;
      top: 50%;
      right: 23px;
      transform: translateY(-50%);
      color: rgba(148,163,184,.8);
      pointer-events: none;
    }

    .search-icon svg { width: 19px; height: 19px; }

    .search-suggest {
      display: none;
      margin-top: 11px;
      border-radius: 19px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      max-height: 400px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .search-suggest.show { display: block; }

    .sug-item {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px 15px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      cursor: pointer;
      transition: all .2s ease;
      min-height: 76px;
    }

    .sug-item:last-child { border-bottom: none; }
    .sug-item:hover { background: rgba(255,255,255,.06); transform: translateX(-3px); }

    .sug-cover {
      width: 46px;
      height: 60px;
      border-radius: 12px;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,.12);
      background: #0a0a0f;
      flex-shrink: 0;
    }

    .sug-main {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sug-title {
      font-size: 14px;
      font-weight: 950;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sug-sub {
      font-size: 12px;
      font-weight: 850;
      color: rgba(148,163,184,.95);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sug-badges { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

    .sug-pill {
      font-size: 10.5px;
      font-weight: 950;
      padding: 7px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: #e5e7eb;
      white-space: nowrap;
    }

    .search-actions { display: flex; gap: 11px; margin-top: 15px; }

    .btn-ghost,
    .btn-primary {
      flex: 1;
      height: 50px;
      border-radius: 16px;
      font-weight: 950;
      font-size: 12.5px;
      font-family: var(--font);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      transition: all .25s var(--ease-spring);
    }

    .btn-ghost {
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: #e5e7eb;
    }

    .btn-primary {
      flex: 1.3;
      border: 1px solid rgba(124,58,237,.42);
      background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.15));
      color: #fff;
      box-shadow: 0 18px 48px rgba(124,58,237,.22);
    }

    .btn-ghost svg, .btn-primary svg { width: 17px; height: 17px; }
    .btn-ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .btn-primary:hover {
      background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(124,58,237,.22));
      transform: translateY(-2px);
      box-shadow: 0 22px 56px rgba(124,58,237,.28);
    }
    .btn-ghost:active, .btn-primary:active { transform: scale(.98); }

    /* ---- Filter modal ---- */
    .filter-card {
      display: flex;
      flex-direction: column;
      height: 85vh;
      max-height: 85vh;
    }

    .filter-body {
      flex: 1;
      overflow-y: auto;
      padding-right: 2px;
      padding-bottom: 9px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .filter-section-label {
      font-size: 11.5px;
      color: #6b7280;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .09em;
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 11px;
    }

    .filter-section-label svg { width: 14px; height: 14px; }

    .sort-btn {
      width: 100%;
      padding: 14px 15px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #d1d5db;
      font-size: 12.5px;
      font-weight: 850;
      font-family: var(--font);
      transition: all .25s ease;
      margin-bottom: 9px;
    }

    .sort-btn:hover { background: rgba(255,255,255,.08); transform: translateX(-3px); }

    .sort-btn[data-active="true"] {
      background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(124,58,237,.08));
      border-color: rgba(124,58,237,.55);
      color: var(--accent-ultra);
      box-shadow: 0 8px 24px rgba(124,58,237,.18);
    }

    .sort-btn-left { display: flex; align-items: center; gap: 13px; }
    .sort-btn-left svg { width: 17px; height: 17px; color: #6b7280; }

    .sort-check {
      width: 21px; height: 21px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,.14);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s ease;
    }
    .sort-btn[data-active="true"] .sort-check {
      background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.15));
      border-color: var(--accent);
    }
    .sort-check svg { width: 14px; height: 14px; color: var(--accent-ultra); }

    .genre-label-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 11px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .clear-genres-btn {
      font-size: 10.5px;
      font-weight: 700;
      color: #f87171;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .25s ease;
    }

    .clear-genres-btn svg { width: 14px; height: 14px; }
    .clear-genres-btn:hover { color: #fca5a5; transform: scale(1.05); }

    #genre-container {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      max-height: 300px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .genre-btn {
      font-size: 11.5px;
      padding: 10px 14px;
      border-radius: 14px;
      font-weight: 700;
      font-family: var(--font);
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.05);
      color: #9ca3af;
      transition: all .25s ease;
      cursor: pointer;
      line-height: 1;
    }

    .genre-btn:hover { background: rgba(255,255,255,.1); color: #e5e7eb; transform: translateY(-2px); }

    .genre-btn.selected {
      background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(124,58,237,.12));
      border-color: var(--accent);
      color: #fff;
      box-shadow: 0 6px 18px rgba(124,58,237,.25);
      transform: scale(1.05);
    }

    .filter-footer {
      flex-shrink: 0;
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .apply-filter-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, var(--accent), #5b21b6);
      color: #fff;
      font-size: 14.5px;
      font-weight: 950;
      font-family: var(--font);
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      box-shadow: 0 12px 36px rgba(124,58,237,.32);
      transition: all .25s var(--ease-spring);
    }

    .apply-filter-btn:hover {
      background: linear-gradient(135deg, var(--accent-hover), #4c1d95);
      transform: translateY(-2px);
      box-shadow: 0 16px 48px rgba(124,58,237,.4);
    }
    .apply-filter-btn:active { transform: scale(.98); }

    .filter-count-badge {
      background: rgba(0,0,0,.25);
      padding: 4px 10px;
      border-radius: 9px;
      font-size: 11.5px;
    }

    .clear-all-btn {
      width: 100%;
      padding: 13px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color: #9ca3af;
      font-size: 13.5px;
      font-weight: 850;
      font-family: var(--font);
      border-radius: 17px;
      transition: all .25s ease;
    }

    .clear-all-btn:hover { background: rgba(255,255,255,.09); color: #e5e7eb; transform: translateY(-2px); }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer-trust {
      margin: 32px 16px 0;
      padding: 22px 20px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.1);
      background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 13px;
      overflow: hidden;
      content-visibility: auto;
      contain-intrinsic-size: 0 100px;
    }

    @media (min-width: 640px) { .footer-trust { margin: 38px 24px 0; } }

    .footer-trust .hint {
      font-size: 11.5px;
      font-weight: 900;
      color: rgba(148,163,184,.9);
      letter-spacing: .06em;
    }

    .enamad-slot {
      transform: translateY(14px);
      opacity: 0;
      transition: all .6s var(--ease-out);
      padding: 11px 15px;
      border-radius: 19px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.2);
    }

    .enamad-slot.ready { transform: translateY(0); opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .enamad-slot { transition: none; transform: none; opacity: 1; }
    }

    .enamad-slot img {
      height: 56px;
      width: auto;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
    }

    .contact-info {
      width: 100%;
      padding-top: 15px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 11px;
    }

    .contact-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      font-weight: 850;
      color: var(--muted);
    }

    .contact-icon {
      width: 17px;
      height: 17px;
      stroke-width: 2px;
      color: var(--accent-ultra);
      flex-shrink: 0;
    }

    /* ============================================================
       LOADING OVERLAY
    ============================================================ */
    #app-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(2,0,5,.85), rgba(2,0,5,.98));
      color: #fff;
      font-weight: 950;
      gap: 15px;
      flex-direction: column;
      padding: 20px;
    }

    .loading-spinner {
      width: 30px;
      height: 30px;
      color: var(--accent-ultra);
      animation: spin 1s linear infinite;
      filter: drop-shadow(0 0 12px rgba(124,58,237,.5));
    }

    @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

    .skeleton-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      width: calc(100% - 32px);
      max-width: 1200px;
      margin-top: 18px;
    }

    .skeleton-card {
      height: 220px;
      border-radius: 16px;
      background: linear-gradient(90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s ease-in-out infinite;
    }

    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ============================================================
       EMPTY STATE
    ============================================================ */
    .empty-state {
      grid-column: 1 / -1;
      height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 13px;
      color: #4b5563;
    }

    .empty-state svg {
      width: 50px;
      height: 50px;
      opacity: .5;
      stroke-width: 1.3;
      filter: drop-shadow(0 0 12px rgba(75,85,99,.3));
    }

    .empty-state p {
      font-size: 13.5px;
      font-weight: 700;
      opacity: .75;
    }

    .empty-clear-btn {
      margin-top: 5px;
      padding: 10px 20px;
      border-radius: 13px;
      border: 1px solid rgba(124,58,237,.4);
      background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.06));
      color: var(--accent-ultra);
      font-size: 12.5px;
      font-weight: 900;
      font-family: var(--font);
      transition: all .25s var(--ease-spring);
    }

    .empty-clear-btn:hover {
      background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(124,58,237,.12));
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(124,58,237,.2);
    }
    .empty-clear-btn:active { transform: scale(.97); }

    .bottom-spacer { height: 80px; width: 100%; }

    * { -webkit-tap-highlight-color: transparent; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }