@font-face {
      font-family: 'Pretendard Variable';
      font-weight: 45 920;
      font-style: normal;
      font-display: swap;
      src: local('Pretendard Variable'),
           local('Pretendard'),
           url('/fonts/PretendardVariable.woff2') format('woff2-variations');
    }

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

    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    /* Unified Global Dark Scrollbar Theme */
    * {
      scrollbar-width: thin;
      scrollbar-color: #334155 #06080e;
    }
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #06080e;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }

    :root {

      --font-main: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', sans-serif;
      --bg-page: #080C14;
      --bg-surface: #0B0F19;
      --bg-section: #111827;
      --bg-card: rgba(11, 15, 25, 0.9);
      --bg-glass: rgba(17, 24, 39, 0.75);
      --bg-glass-elevated: rgba(30, 41, 59, 0.65);
      --border-neon: #1E293B;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-highlight: rgba(6, 182, 212, 0.5);
      --text-pure: #FFFFFF;
      --text-bright: #F8FAFC;
      --text-muted: #94A3B8;
      --text-dim: #64748B;
      --neon-blue: #2563EB;
      --neon-cyan: #06B6D4;
      --neon-gold: #F59E0B;
      --neon-emerald: #10B981;
      --neon-purple: #A855F7;
      --neon-blue-glow: 0 0 20px rgba(37, 99, 235, 0.45);
      --neon-cyan-glow: 0 0 20px rgba(6, 182, 212, 0.45);
      --neon-gold-glow: 0 0 16px rgba(245, 158, 11, 0.4);
      --neon-emerald-glow: 0 0 16px rgba(16, 185, 129, 0.4);
      --shadow-obsidian: 0 20px 40px -15px rgba(0, 0, 0, 0.85);
      --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      --gnb-height: 60px;
      --content-top-spacing: 14px;
      --hero-banner-height: 204px;
    }

    body {
      background-color: var(--bg-page);
      color: var(--text-bright);
      font-family: var(--font-main);
      line-height: 1.5;
      letter-spacing: -0.025em;
      -webkit-font-smoothing: antialiased;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Sticky Global Navigation Bar (GNB ~60px) */
    .header-gnb {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(11, 15, 25, 0.95);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-neon);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
      height: var(--gnb-height);
      min-height: var(--gnb-height);
      max-height: var(--gnb-height);
      flex-shrink: 0;
    }

    .gnb-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-sizing: border-box;
      overflow-x: clip;
    }

    .gnb-left-group {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .brand-group {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      cursor: pointer;
      padding: 4px 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .brand-group:hover {
      opacity: 0.95;
      transform: scale(1.02);
    }

    .brand-name {
      display: inline-flex;
      align-items: center;
      font-size: 20px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.01em;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
      user-select: none;
    }

    .brand-name span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      color: var(--neon-cyan);
      background: rgba(6, 182, 212, 0.12);
      border: 1px solid rgba(6, 182, 212, 0.35);
      border-radius: 4px;
      padding: 1.5px 5px;
      margin-left: 5px;
      line-height: 1;
      vertical-align: middle;
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
    }

    /* GNB Persistent Navigation Tabs */
    .gnb-nav {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
      overflow-x: visible;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .gnb-nav::-webkit-scrollbar {
      display: none;
    }

    .gnb-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 9px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .gnb-tab-btn:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.05);
    }

    .gnb-tab-btn.active {
      color: var(--neon-cyan);
      font-weight: 700;
      background: rgba(6, 182, 212, 0.12);
      border-color: rgba(6, 182, 212, 0.35);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
    }

    .gnb-tab-btn .tab-emoji {
      font-size: 14px;
      line-height: 1;
    }

    .gnb-tab-dropdown-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .gnb-dropdown-arrow {
      font-size: 10px;
      margin-left: 2px;
      opacity: 0.7;
      transition: transform 0.2s ease;
    }

    .gnb-tab-dropdown-wrap:hover .gnb-dropdown-arrow {
      transform: rotate(180deg);
    }

    .gnb-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 6px;
      min-width: 175px;
      background: rgba(13, 17, 23, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(6, 182, 212, 0.3);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 15px rgba(6, 182, 212, 0.15);
      padding: 6px;
      display: none;
      flex-direction: column;
      gap: 4px;
      z-index: 1000;
    }

    .gnb-tab-dropdown-wrap:hover .gnb-dropdown-menu,
    .gnb-tab-dropdown-wrap:focus-within .gnb-dropdown-menu {
      display: flex;
    }

    .gnb-subtab-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .gnb-subtab-btn:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.08);
    }

    .gnb-subtab-btn.active {
      color: var(--neon-cyan);
      font-weight: 700;
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.35);
    }

    /* GNB Right Controls */
    .gnb-right-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 1 auto;
      min-width: 0;
    }

    .gnb-search-wrap {
      position: relative;
      width: clamp(115px, 12vw, 170px);
      flex: 0 1 170px;
      min-width: 100px;
    }

    .search-icon-svg {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-dim);
      pointer-events: none;
    }

    .search-input-field {
      width: 100%;
      box-sizing: border-box;
      background: rgba(17, 24, 39, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 9999px;
      padding: 6px 24px 6px 30px;
      font-size: 12px;
      color: #FFFFFF;
      outline: none;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    .gnb-search-clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 11px;
      cursor: pointer;
      padding: 2px 4px;
      line-height: 1;
    }

    .gnb-search-clear-btn:hover {
      color: #ffffff;
    }

    .search-input-field:focus {
      background: #111827;
      border-color: var(--neon-cyan);
      box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
    }

    .search-input-field::placeholder {
      color: var(--text-dim);
    }

    .gnb-utility-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-utility {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(17, 24, 39, 0.8);
      border: 1px solid var(--border-neon);
      color: var(--text-muted);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .btn-utility:hover {
      color: #FFFFFF;
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(6, 182, 212, 0.4);
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
    }

    .btn-utility.active {
      color: var(--neon-cyan);
      border-color: var(--neon-cyan);
      background: rgba(6, 182, 212, 0.15);
    }

    /* Language Selector */
    .gnb-lang-wrap {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .lang-select-box {
      appearance: none;
      -webkit-appearance: none;
      pointer-events: none !important;
      color-scheme: dark;
      background-color: rgba(15, 23, 42, 0.92);
      color: #F8FAFC;
      border: 1px solid rgba(6, 182, 212, 0.35);
      border-radius: 8px;
      padding: 6px 22px 6px 8px;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      transition: all 0.15s ease;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2306B6D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    .lang-select-box option {
      background-color: #0b0f19;
      color: #f8fafc;
      font-weight: 600;
    }

    .lang-select-box:disabled {
      opacity: 1;
      cursor: pointer;
    }

    .lang-select-box:hover {
      border-color: rgba(6, 182, 212, 0.65);
      background-color: rgba(30, 41, 59, 0.95);
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.22);
    }

    .lang-select-box:focus {
      border-color: var(--neon-cyan);
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
    }

    /* GNB User Widget & Badges */
    .gnb-user-widget {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .btn-auth-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 13px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #032510;
      background: linear-gradient(135deg, #10B981, #059669);
      border: 1px solid rgba(16, 185, 129, 0.4);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
      white-space: nowrap;
    }

    .btn-auth-pill:hover {
      background: linear-gradient(135deg, #34D399, #10B981);
      box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
      transform: translateY(-1px);
    }

    .btn-auth-pill .btn-auth-text {
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .user-profile-group {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .user-name-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #F1F5F9;
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 0 10px;
      border-radius: 8px;
      white-space: nowrap;
    }

    .user-avatar-img {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      object-fit: cover;
      vertical-align: middle;
    }

    .btn-point-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #F59E0B;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      padding: 0 8px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .btn-point-pill:hover {
      background: rgba(245, 158, 11, 0.22);
      border-color: rgba(245, 158, 11, 0.6);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
      transform: translateY(-1px);
    }

    .badge-checkin-alert {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #EF4444;
      box-shadow: 0 0 8px #EF4444;
      animation: pulseAlert 1.5s infinite;
      margin-left: 2px;
    }

    @keyframes pulseAlert {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
    }

    .btn-fav-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #94A3B8;
      background: rgba(17, 24, 39, 0.8);
      border: 1px solid var(--border-neon);
      padding: 0 9px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .btn-fav-pill:hover {
      color: #F8FAFC;
      border-color: rgba(6, 182, 212, 0.4);
      background: rgba(30, 41, 59, 0.9);
      transform: translateY(-1px);
    }

    .btn-fav-pill .fav-count-pill {
      background: rgba(6, 182, 212, 0.2);
      color: var(--neon-cyan);
      font-size: 11px;
      padding: 1px 5px;
      border-radius: 9999px;
      font-weight: 700;
    }

    .btn-studio-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #C084FC;
      background: rgba(168, 85, 247, 0.12);
      border: 1px solid rgba(168, 85, 247, 0.35);
      padding: 0 8px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .btn-studio-pill:hover {
      color: #FFFFFF;
      background: rgba(168, 85, 247, 0.28);
      border-color: rgba(168, 85, 247, 0.7);
      transform: translateY(-1px);
    }

    .btn-admin-hub-pill {
      color: #38BDF8;
      background: rgba(56, 189, 248, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.45);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
    }

    .btn-admin-hub-pill:hover {
      color: #FFFFFF;
      background: rgba(56, 189, 248, 0.3);
      border-color: #38BDF8;
      box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
      transform: translateY(-1px);
    }

    .gnb-nav-hub-slot {
      display: none;
    }

    .btn-myinfo-pill,
    .btn-myinfo,
    .btn-logout-pill,
    .btn-logout {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;
      min-height: 32px;
      min-width: 0;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #CBD5E1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 0 9px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .btn-myinfo-pill:hover,
    .btn-myinfo:hover {
      color: #38BDF8;
      border-color: rgba(56, 189, 248, 0.5);
      background: rgba(56, 189, 248, 0.15);
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
      transform: translateY(-1px);
    }

    .btn-logout-pill:hover,
    .btn-logout:hover {
      color: #EF4444;
      border-color: rgba(239, 68, 68, 0.4);
      background: rgba(239, 68, 68, 0.15);
      transform: translateY(-1px);
    }

    .gnb-admin-controls {
      display: inline-flex;
      align-items: center;
    }

    .btn-admin-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 32px;
      box-sizing: border-box;
      line-height: 1;
      font-size: 12px;
      font-weight: 700;
      color: #F59E0B;
      background: rgba(245, 158, 11, 0.14);
      border: 1px solid rgba(245, 158, 11, 0.45);
      padding: 0 11px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
    }

    .btn-admin-pill:hover {
      color: #FCD34D;
      background: rgba(245, 158, 11, 0.28);
      border-color: #F59E0B;
      box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
      transform: translateY(-1px);
    }

    /* Card Favorite Button (Unified Heart 🤍 / ❤️) */
    .btn-card-fav {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: rgba(10, 15, 28, 0.76);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 50%;
      color: #F8FAFC;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      flex-shrink: 0;
      padding: 0;
    }

    .btn-card-fav:hover {
      background: rgba(15, 23, 42, 0.92);
      border-color: rgba(244, 63, 94, 0.55);
      box-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
    }

    .btn-card-fav.active {
      color: #F43F5E;
      background: rgba(244, 63, 94, 0.22);
      border-color: rgba(244, 63, 94, 0.65);
      box-shadow: 0 0 14px rgba(244, 63, 94, 0.45);
    }

    /* Obsidian Modals */
    .koxlo-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 7, 13, 0.78);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .koxlo-modal-overlay.active {
      display: flex;
    }

    .koxlo-modal-box {
      background: #0B0F19;
      border: 1px solid rgba(6, 182, 212, 0.3);
      border-radius: 18px;
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 35px rgba(6, 182, 212, 0.18);
      width: 100%;
      max-width: 440px;
      overflow: hidden;
      animation: modalScaleIn 0.2s ease-out;
    }

    @keyframes modalScaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid var(--border-neon);
      background: rgba(17, 24, 39, 0.6);
    }

    .modal-head-title {
      font-size: 16px;
      font-weight: 700;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-close-x {
      background: transparent;
      border: none;
      color: #94A3B8;
      font-size: 20px;
      cursor: pointer;
      line-height: 1;
      padding: 4px;
      border-radius: 6px;
      transition: color 0.15s;
    }

    .modal-close-x:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.08);
    }

    .modal-body {
      padding: 22px;
    }

    .modal-tab-switch {
      display: flex;
      background: rgba(17, 24, 39, 0.9);
      border: 1px solid var(--border-neon);
      border-radius: 10px;
      padding: 3px;
      margin-bottom: 18px;
    }

    .modal-tab-opt {
      flex: 1;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #94A3B8;
      background: transparent;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
      text-align: center;
    }

    .modal-tab-opt.active {
      background: rgba(6, 182, 212, 0.18);
      color: var(--neon-cyan);
      font-weight: 700;
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
    }

    .form-group-item {
      margin-bottom: 14px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #94A3B8;
      margin-bottom: 6px;
    }

    .form-input-styled {
      width: 100%;
      background: rgba(17, 24, 39, 0.9);
      border: 1px solid var(--border-neon);
      border-radius: 9px;
      padding: 10px 14px;
      font-size: 13.5px;
      color: #FFFFFF;
      outline: none;
      font-family: inherit;
      transition: all 0.15s ease;
    }

    .form-input-styled:focus {
      border-color: var(--neon-cyan);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    .modal-bonus-notice {
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #6EE7B7;
      font-size: 12px;
      font-weight: 600;
      padding: 9px 12px;
      border-radius: 8px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .modal-btn-submit {
      width: 100%;
      background: linear-gradient(135deg, #0284C7, #06B6D4);
      color: #FFFFFF;
      font-weight: 700;
      font-size: 14px;
      padding: 11px;
      border-radius: 9px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
      margin-top: 6px;
      box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
    }

    .modal-btn-submit:hover {
      opacity: 0.92;
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    }

    .btn-verify-action {
      background: #1e293b;
      border: 1px solid #38bdf8;
      color: #38bdf8;
      font-size: 13px;
      font-weight: 600;
      padding: 0 14px;
      height: 40px;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: inherit;
    }
    .btn-verify-action:hover:not(:disabled) {
      background: rgba(56, 189, 248, 0.15);
      border-color: #06b6d4;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
    }
    .btn-verify-action:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: #475569;
      color: #94a3b8;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      margin: 14px 0 10px;
      gap: 10px;
    }
    .auth-divider-line {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
    }
    .auth-divider-text {
      font-size: 11px;
      color: #94A3B8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .btn-google-signin {
      width: 100%;
      background: #FFFFFF;
      color: #1E293B;
      font-weight: 600;
      font-size: 13.5px;
      padding: 10px 14px;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .btn-google-signin:hover {
      background: #F1F5F9;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

    .modal-alert {
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 12.5px;
      margin-bottom: 14px;
      display: none;
    }

    .modal-alert.error {
      display: block;
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #FCA5A5;
    }

    .modal-alert.success {
      display: block;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6EE7B7;
    }

    /* Password reset (forgot-password entry in the login modal + reset modal) */
    .auth-forgot-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }
    .auth-link-btn {
      background: none;
      border: none;
      padding: 2px 0;
      color: #67E8F9;
      font-size: 12.5px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .auth-link-btn:hover {
      color: #A5F3FC;
    }
    .pw-reset-desc {
      font-size: 12.5px;
      line-height: 1.6;
      color: #CBD5E1;
      margin: 0 0 14px;
    }
    .pw-reset-hint {
      font-size: 11.5px;
      color: #94A3B8;
      margin-top: 6px;
    }
    .pw-reset-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      justify-content: center;
      margin-top: 14px;
    }

    /* Support Center & Rich Web Editor Styles */
    .koxlo-modal-box.modal-wide {
      max-width: 680px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
    }

    .modal-body-scrollable {
      padding: 20px;
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
      scrollbar-gutter: stable;
    }

    .support-modal-footer {
      padding: 14px 20px 16px 20px;
      background: rgba(11, 17, 30, 0.98);
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
      flex-shrink: 0;
      z-index: 30;
      box-sizing: border-box;
    }

    @keyframes field-error-shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-6px); }
      40%, 80% { transform: translateX(6px); }
    }
    .field-has-error {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
      animation: field-error-shake 0.4s ease-in-out;
    }
    .form-field-error-text {
      color: #f87171;
      font-size: 11px;
      font-weight: 600;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .support-type-pills {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
    }

    .support-type-btn {
      flex: 1;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      white-space: nowrap;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(15, 23, 42, 0.6);
      color: #94A3B8;
      transition: all 0.15s ease;
    }

    .support-type-btn.active-bug {
      background: rgba(239, 68, 68, 0.18);
      border-color: rgba(239, 68, 68, 0.6);
      color: #F87171;
      box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
    }

    .support-type-btn.active-inquiry {
      background: rgba(56, 189, 248, 0.18);
      border-color: rgba(56, 189, 248, 0.6);
      color: #38BDF8;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
    }

    .support-editor-wrap {
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.7);
      margin-bottom: 14px;
    }

    .support-editor-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px 10px;
      background: rgba(30, 41, 59, 0.7);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      align-items: center;
    }

    .editor-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #CBD5E1;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 26px;
      transition: all 0.12s ease;
    }

    .editor-btn:hover {
      background: rgba(56, 189, 248, 0.2);
      border-color: rgba(56, 189, 248, 0.5);
      color: #38BDF8;
    }

    .editor-sep {
      width: 1px;
      height: 18px;
      background: rgba(255, 255, 255, 0.12);
      margin: 0 3px;
    }

    .support-editor-content {
      min-height: 150px;
      max-height: 300px;
      overflow-y: auto;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1.6;
      color: #F1F5F9;
      outline: none;
    }

    .support-editor-content:empty:before {
      content: attr(data-placeholder);
      color: #64748B;
      pointer-events: none;
    }

    .support-editor-content blockquote {
      border-left: 3px solid #38BDF8;
      margin: 6px 0;
      padding: 4px 10px;
      background: rgba(56, 189, 248, 0.08);
      color: #94A3B8;
    }

    .support-editor-content pre {
      background: rgba(0, 0, 0, 0.4);
      padding: 8px 12px;
      border-radius: 6px;
      font-family: monospace;
      font-size: 13px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      overflow-x: auto;
    }

    .support-dropzone {
      border: 1.5px dashed rgba(56, 189, 248, 0.35);
      background: rgba(15, 23, 42, 0.4);
      border-radius: 10px;
      padding: 14px 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 10px;
    }

    .support-dropzone:hover, .support-dropzone.dragover {
      border-color: #38BDF8;
      background: rgba(56, 189, 248, 0.08);
    }

    .support-attachment-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .attachment-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(30, 41, 59, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 12px;
      color: #E2E8F0;
    }

    .attachment-chip img {
      width: 22px;
      height: 22px;
      object-fit: cover;
      border-radius: 4px;
    }

    .attachment-chip .btn-remove-att {
      background: transparent;
      border: none;
      color: #EF4444;
      cursor: pointer;
      padding: 0 2px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }

    .attachment-chip .btn-remove-att:hover {
      color: #F87171;
    }

    .support-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin: 14px 0 18px;
      padding: 0 10px;
    }

    .support-stepper::before {
      content: '';
      position: absolute;
      top: 14px;
      left: 24px;
      right: 24px;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      z-index: 0;
    }

    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      font-size: 11px;
      color: #64748B;
      font-weight: 600;
    }

    .step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #0F172A;
      border: 2px solid #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      font-size: 11px;
      color: #94A3B8;
      transition: all 0.2s ease;
    }

    .step-item.active .step-dot {
      background: #0284C7;
      border-color: #38BDF8;
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
    }

    .step-item.active {
      color: #38BDF8;
      font-weight: 700;
    }

    .step-item.completed .step-dot {
      background: #065F46;
      border-color: #10B981;
      color: #FFFFFF;
    }

    .step-item.completed {
      color: #10B981;
    }

    /* Points Center Box */
    .points-hero-card {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(17, 24, 39, 0.8));
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 12px;
      padding: 18px;
      text-align: center;
      margin-bottom: 18px;
    }

    .points-hero-label {
      font-size: 12px;
      font-weight: 600;
      color: #F59E0B;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .points-hero-val {
      font-size: 32px;
      font-weight: 900;
      color: #FFFFFF;
      text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    }

    .points-hero-val span {
      font-size: 18px;
      color: #F59E0B;
      margin-left: 4px;
    }

    .daily-checkin-box {
      background: rgba(17, 24, 39, 0.8);
      border: 1px solid var(--border-neon);
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .checkin-info-title {
      font-size: 13px;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 2px;
    }

    .checkin-info-desc {
      font-size: 11.5px;
      color: #94A3B8;
    }

    .btn-claim-daily {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #FFFFFF;
      font-weight: 700;
      font-size: 12px;
      padding: 8px 14px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: all 0.15s ease;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    .btn-claim-daily:hover:not(:disabled) {
      opacity: 0.9;
      transform: scale(1.03);
    }

    .btn-claim-daily:disabled {
      background: rgba(30, 41, 59, 0.8);
      color: #64748B;
      cursor: not-allowed;
      box-shadow: none;
    }

    .points-history-title {
      font-size: 13px;
      font-weight: 700;
      color: #E2E8F0;
      margin-bottom: 10px;
    }

    .points-history-scroll {
      max-height: 180px;
      overflow-y: auto;
      border: 1px solid var(--border-neon);
      border-radius: 9px;
      background: rgba(11, 15, 25, 0.8);
    }

    .history-entry-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 12px;
    }

    .history-entry-row:last-child {
      border-bottom: none;
    }

    .history-entry-desc {
      color: #E2E8F0;
      font-weight: 500;
    }

    .history-entry-date {
      color: #64748B;
      font-size: 11px;
    }

    .history-entry-amount {
      font-weight: 700;
      color: #10B981;
    }

    /* Favorites Drawer */
    .koxlo-drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 7, 13, 0.65);
      backdrop-filter: blur(4px);
      z-index: 3000;
      display: none;
      justify-content: flex-end;
    }

    .koxlo-drawer-overlay.active {
      display: flex;
    }

    .koxlo-drawer-panel {
      background: #0B0F19;
      border-left: 1px solid var(--border-neon);
      box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8);
      width: 100%;
      max-width: 420px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      animation: drawerSlide 0.25s ease-out;
    }

    @keyframes drawerSlide {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    .drawer-items-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .fav-card-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(17, 24, 39, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 10px;
      padding: 10px;
      transition: all 0.15s ease;
    }

    .fav-card-item:hover {
      border-color: rgba(6, 182, 212, 0.4);
      background: rgba(30, 41, 59, 0.9);
    }

    .fav-card-thumb {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .fav-card-info {
      flex: 1;
      min-width: 0;
    }

    .fav-card-service-tag {
      font-size: 10px;
      font-weight: 700;
      color: var(--neon-cyan);
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .fav-card-title {
      font-size: 13px;
      font-weight: 700;
      color: #FFFFFF;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }

    .fav-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-fav-goto {
      font-size: 11px;
      font-weight: 600;
      background: rgba(6, 182, 212, 0.15);
      color: var(--neon-cyan);
      border: 1px solid rgba(6, 182, 212, 0.4);
      padding: 4px 8px;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
    }

    .btn-fav-goto:hover {
      background: var(--neon-cyan);
      color: #042612;
    }

    .btn-fav-del {
      font-size: 11px;
      color: #64748B;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .btn-fav-del:hover {
      color: #EF4444;
    }

    .drawer-empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #64748B;
      font-size: 13px;
      line-height: 1.6;
    }

    .drawer-empty-icon {
      font-size: 36px;
      margin-bottom: 12px;
      opacity: 0.5;
    }

    /* Toast Notification */
    .koxlo-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: #0B0F19;
      border: 1px solid var(--neon-cyan);
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 600;
      padding: 12px 18px;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(6, 182, 212, 0.3);
      z-index: 4000;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: toastFade 0.25s ease-out;
    }

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

    /* Seamless Viewport Container (App Shell) */
    .app-viewport-container {
      height: calc(100vh - 60px);
      height: calc(100dvh - 60px);
      flex: 1;
      min-height: 0;
      width: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: var(--bg-page);
    }

    .shell-view-pane {
      width: 100%;
      height: 100%;
    }

    .shell-view-home {
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      scroll-behavior: smooth;
    }

    .shell-view-service {
      position: absolute;
      inset: 0;
      display: none;
      background: #080C14;
      overflow: hidden;
    }

    .shell-view-game {
      overflow-y: auto;
      overflow-x: hidden;
      display: none;
      flex-direction: column;
      scroll-behavior: smooth;
      background: var(--bg-dark);
      width: 100%;
      height: 100%;
    }

    .shell-view-legal {
      overflow-y: auto;
      overflow-x: hidden;
      display: none;
      flex-direction: column;
      scroll-behavior: smooth;
      background: var(--bg-page);
      width: 100%;
      height: 100%;
    }

    .legal-page-container {
      max-width: 960px;
      margin: 0 auto;
      padding: 48px 24px 80px;
      width: 100%;
      box-sizing: border-box;
      flex: 1 0 auto;
    }

    .legal-header {
      margin-bottom: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: 24px;
    }

    .legal-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #94a3b8;
      font-size: 0.88rem;
      font-weight: 600;
      text-decoration: none;
      margin-bottom: 16px;
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .legal-back-btn:hover {
      color: #38bdf8;
    }

    .legal-badge {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #06b6d4;
      background: rgba(6, 182, 212, 0.12);
      border: 1px solid rgba(6, 182, 212, 0.3);
      padding: 3px 10px;
      border-radius: 9999px;
      margin-bottom: 12px;
    }

    .legal-title {
      font-size: 2rem;
      font-weight: 800;
      color: #f8fafc;
      margin: 0 0 10px 0;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    .legal-meta {
      font-size: 0.85rem;
      color: #64748b;
    }

    .legal-card {
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 16px;
      padding: 36px 32px;
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(12px);
      line-height: 1.75;
      color: #cbd5e1;
      font-size: 0.95rem;
    }

    .legal-card h2 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #f1f5f9;
      margin: 32px 0 14px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legal-card h2:first-of-type {
      margin-top: 0;
    }

    .legal-card h3 {
      font-size: 1.05rem;
      font-weight: 600;
      color: #e2e8f0;
      margin: 20px 0 8px 0;
    }

    .legal-card p {
      margin: 0 0 14px 0;
      color: #94a3b8;
    }

    .legal-card ul, .legal-card ol {
      margin: 0 0 18px 0;
      padding-left: 24px;
      color: #94a3b8;
    }

    .legal-card li {
      margin-bottom: 8px;
    }

    .legal-highlight-box {
      background: rgba(6, 182, 212, 0.07);
      border-left: 3px solid #06b6d4;
      border-radius: 0 8px 8px 0;
      padding: 14px 18px;
      margin: 20px 0;
      color: #e0f2fe;
      font-size: 0.9rem;
    }

    .legal-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .legal-header-top .legal-back-btn {
      margin-bottom: 0;
    }

    .btn-legal-print {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(0, 242, 254, 0.35);
      color: #38bdf8;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.18s ease;
      text-decoration: none;
    }

    .btn-legal-print:hover {
      background: rgba(0, 242, 254, 0.15);
      border-color: #00f2fe;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
      transform: translateY(-1px);
    }

    .btn-legal-print svg {
      flex-shrink: 0;
    }

    @media print {
      body, html {
        background: #ffffff;
        color: #111827;
      }
      .gnb-portal, .footer-unified, .legal-back-btn, .btn-legal-print, .global-toast-container, .portal-search-drawer {
        display: none;
      }
      .shell-view-pane {
        display: block;
      }
      .legal-page-container {
        padding: 0;
        max-width: 100%;
      }
      .legal-card {
        background: transparent;
        border: none;
        box-shadow: none;
        color: #111827;
        padding: 0;
      }
      .legal-card h2, .legal-card h3, .legal-title {
        color: #0f172a;
      }
      .legal-card p, .legal-card li {
        color: #334155;
      }
      .legal-highlight-box {
        border-left: 3px solid #0284c7;
        background: #f0f9ff;
        color: #0369a1;
      }
    }

    .game-hero-spotlight {
      margin-bottom: 0;
    }

    .game-billboard-showcase {
      position: relative;
      background: #070A14;
      border-bottom: 1px solid rgba(6, 182, 212, 0.35);
      height: 212px;
      min-height: 212px;
      max-height: 212px;
      padding: 14px 0;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 0;
      box-shadow: 0 20px 42px -10px rgba(0, 0, 0, 0.88);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }

    .game-billboard-showcase .billboard-bg-layer {
      opacity: 0.9;
      background-position: right 25% center;
      background-size: cover;
      filter: saturate(1.25) contrast(1.1) brightness(1.05);
      transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .game-billboard-showcase .billboard-gradient-overlay {
      background: 
        linear-gradient(90deg, #070A14 0%, rgba(7, 10, 20, 0.96) 28%, rgba(7, 10, 20, 0.72) 48%, rgba(7, 10, 20, 0.15) 75%, transparent 100%),
        linear-gradient(0deg, #070A14 0%, transparent 28%),
        radial-gradient(circle at 82% 35%, rgba(6, 182, 212, 0.22) 0%, transparent 60%);
      pointer-events: none;
    }

    .game-billboard-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .game-billboard-left-col {
      flex: 1;
      max-width: 760px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
    }

    .game-billboard-title {
      min-height: 0;
    }

    .game-billboard-desc {
      min-height: 37.7px;
    }

    .game-hero-telemetry-hud {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 6px;
      width: 340px;
      min-width: 340px;
      max-width: 340px;
      height: 180px;
      min-height: 180px;
      max-height: 180px;
      box-sizing: border-box;
      background: rgba(11, 16, 30, 0.86);
      border: 1px solid rgba(6, 182, 212, 0.5);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(6, 182, 212, 0.16);
      flex-shrink: 0;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .game-hero-telemetry-hud:hover {
      border-color: rgba(6, 182, 212, 0.75);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 32px rgba(6, 182, 212, 0.3);
    }

    .game-hud-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      margin-bottom: 0;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .game-hud-live-beacon {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 10px #10B981;
      animation: hudPulse 2s infinite;
    }

    @keyframes hudPulse {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(0.95); opacity: 0.8; }
    }

    .game-hud-status-title {
      font-family: var(--font-main);
      font-size: 10.5px;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0.06em;
    }

    .game-hud-tag {
      margin-left: auto;
      font-family: var(--font-main);
      font-size: 9.5px;
      font-weight: 700;
      color: var(--neon-cyan);
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.3);
      padding: 1.5px 6px;
      border-radius: 4px;
    }

    .game-hud-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 0;
    }

    .game-hud-item {
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 7px;
      padding: 4px 8px;
      min-width: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .game-hud-label {
      display: block;
      font-family: var(--font-main);
      font-size: 9px;
      font-weight: 700;
      color: #64748B;
      letter-spacing: 0.05em;
      margin-bottom: 1px;
    }

    .game-hud-val {
      display: block;
      font-family: var(--font-main);
      font-size: 11px;
      font-weight: 800;
      color: #E2E8F0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    .btn-game-hud-launch {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      box-sizing: border-box;
      font-family: var(--font-main);
      background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
      border: 1px solid rgba(103, 232, 249, 0.75);
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -0.01em;
      padding: 0 12px;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-game-hud-launch:hover {
      background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
      border-color: #67e8f9;
      box-shadow: 0 6px 16px rgba(6, 182, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
    }

    .billboard-selector-bar.game-billboard-selector-bar,
    .game-billboard-selector-bar {
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
      max-width: 1400px;
      width: 100%;
      margin: 6px auto 0;
      padding: 8px 20px 0;
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    @media (max-width: 1180px) {
      .billboard-selector-bar.game-billboard-selector-bar,
      .game-billboard-selector-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 1024px) {
      .game-hero-telemetry-hud {
        display: none;
      }
      .game-billboard-inner {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 640px) {
      .billboard-selector-bar.game-billboard-selector-bar,
      .game-billboard-selector-bar {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    /* 3D Showcase Track: Horizontal Rail by Default, Grid in .portal-grid-mode */
    .game-showcase-2col-track {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 16px;
      width: 100%;
      padding: 6px 0 16px;
      box-sizing: border-box;
      scrollbar-width: none;
    }

    .game-showcase-2col-track::-webkit-scrollbar {
      display: none;
    }

    .game-widescreen-card {
      width: 280px;
      max-width: 280px;
      min-width: 280px;
      flex: 0 0 280px;
      height: auto;
      min-height: 330px;
      background: var(--bg-card);
      border: 1px solid var(--border-neon);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.7);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      box-sizing: border-box;
    }

    .game-widescreen-card:hover {
      transform: translateY(-4px);
      border-color: rgba(6, 182, 212, 0.5);
      box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(6, 182, 212, 0.2);
    }

    .game-widescreen-card .card-media-banner {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      min-height: 0;
      max-height: none;
      position: relative;
      overflow: hidden;
      background: #000;
    }

    .game-widescreen-card .card-media-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.35s ease;
    }

    .game-widescreen-card .card-floating-badges {
      top: auto;
      bottom: 12px;
      right: 12px;
    }

    .game-widescreen-card:hover .card-media-banner img {
      transform: scale(1.04);
    }

    .game-widescreen-card .card-content {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 6px;
    }

    .game-spec-chips-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
      padding-top: 6px;
      margin-bottom: 2px;
    }

    .game-spec-chip {
      font-size: 11px;
      font-weight: 700;
      color: #94A3B8;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 3px 8px;
      border-radius: 6px;
    }

    .btn-action-lg {
      padding: 9px 14px;
      font-size: 13px;
      font-weight: 800;
    }

    .game-widescreen-card .card-bottom,
    .service-card[data-category="game"] .card-bottom,
    .service-card[data-id="aerostrike"] .card-bottom,
    .service-card[data-id="deepdive"] .card-bottom,
    .service-card[data-id="neonswarm"] .card-bottom {
      height: 48px;
      min-height: 48px;
      max-height: 48px;
      flex: 0 0 48px;
      flex-shrink: 0;
      padding: 0 14px;
      margin-top: auto;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(10, 14, 23, 0.85);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-sizing: border-box;
    }

    .game-widescreen-card .card-bottom .btn-action,
    .service-card[data-category="game"] .card-bottom .btn-action,
    #zone-arcade .netflix-carousel-track .service-card .btn-arcade,
    .netflix-carousel-track .game-arcade-card .btn-arcade,
    .game-widescreen-card .btn-arcade {
      flex: 0 0 auto;
      flex-shrink: 0;
      width: auto;
      min-width: 108px;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 700;
      color: #FFFFFF;
      background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
      border: 1px solid rgba(56, 189, 248, 0.4);
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
      text-decoration: none;
      transition: all 0.2s ease;
      text-align: center;
      white-space: nowrap;
      line-height: 1;
      box-sizing: border-box;
    }

    .game-widescreen-card .card-domain-badge,
    .service-card[data-category="game"] .card-domain-badge,
    .service-card[data-id="aerostrike"] .card-domain-badge,
    .service-card[data-id="deepdive"] .card-domain-badge,
    .service-card[data-id="neonswarm"] .card-domain-badge {
      display: none;
    }

    /* 3D WebGL 7-Game Grid Track */
    .game-arcade-grid-track {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 18px;
      width: 100%;
      padding: 8px 0 20px;
      box-sizing: border-box;
    }

    @media (max-width: 680px) {
      .game-arcade-grid-track {
        grid-template-columns: 1fr;
      }
    }

    .game-shelves-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px 48px;
      width: 100%;
      flex: 1 0 auto;
      box-sizing: border-box;
    }

    .game-hub-hero {
      text-align: center;
      margin-bottom: 36px;
      background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, rgba(13, 17, 23, 0) 100%);
      border: 1px solid rgba(6, 182, 212, 0.2);
      border-radius: 20px;
      padding: 36px 24px;
      position: relative;
      overflow: hidden;
    }

    .game-hub-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--neon-cyan);
      background: rgba(6, 182, 212, 0.12);
      border: 1px solid rgba(6, 182, 212, 0.3);
      padding: 4px 12px;
      border-radius: 9999px;
      margin-bottom: 14px;
    }

    .game-hub-title {
      font-size: 32px;
      font-weight: 900;
      color: #FFFFFF;
      margin: 0 0 12px;
      letter-spacing: -0.02em;
    }

    .game-hub-desc {
      font-size: 15px;
      color: var(--text-muted);
      max-width: 650px;
      margin: 0 auto 24px;
      line-height: 1.6;
    }

    .game-hub-nav-pills {
      display: inline-flex;
      gap: 12px;
      background: rgba(0, 0, 0, 0.4);
      padding: 6px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .game-hub-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid transparent;
      color: var(--text-muted);
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    .game-hub-pill:hover,
    .game-hub-pill.active {
      color: #FFFFFF;
      background: rgba(6, 182, 212, 0.18);
      border-color: rgba(6, 182, 212, 0.4);
    }

    .game-hub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 28px;
    }

    .game-hub-item-card {
      background: #0D1117;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .game-hub-item-card:hover {
      transform: translateY(-4px);
      border-color: rgba(6, 182, 212, 0.4);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 182, 212, 0.15);
    }

    .game-card-banner {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: #030712;
    }

    .game-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .game-hub-item-card:hover .game-cover-img {
      transform: scale(1.05);
    }

    .game-card-floating-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 11px;
      font-weight: 700;
      color: #FFFFFF;
      background: rgba(0, 0, 0, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      padding: 4px 10px;
      border-radius: 6px;
    }

    .game-card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .game-card-sub {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--neon-cyan);
      margin-bottom: 6px;
    }

    .game-card-title {
      font-size: 20px;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0 0 8px;
    }

    .game-card-genre {
      font-size: 13px;
      font-weight: 600;
      color: #A855F7;
      margin-bottom: 12px;
    }

    .game-card-synopsis {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 18px;
      flex: 1;
    }

    .game-card-highlights {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: #cbd5e1;
    }

    .game-card-highlights li {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .game-card-highlights li::before {
      content: '✓';
      color: #10B981;
      font-weight: bold;
    }

    .btn-game-launch {
      width: 100%;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .btn-launch-aero {
      background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
      color: #030712;
      font-weight: 800;
    }

    .btn-launch-aero:hover {
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
      filter: brightness(1.1);
    }

    .btn-launch-deep {
      background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
      color: #030712;
      font-weight: 800;
    }

    .btn-launch-deep:hover {
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
      filter: brightness(1.1);
    }

    .btn-launch-arcade {
      background: linear-gradient(135deg, #00F0FF 0%, #6366F1 100%);
      color: #030712;
      font-weight: 800;
    }

    .btn-launch-arcade:hover {
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
      filter: brightness(1.1);
    }

    .arcade-collection-section {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .arcade-collection-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .arcade-collection-title {
      font-size: 22px;
      font-weight: 900;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .arcade-collection-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 9999px;
      background: rgba(0, 240, 255, 0.12);
      border: 1px solid rgba(0, 240, 255, 0.35);
      color: var(--neon-cyan);
      letter-spacing: 0.05em;
    }

    .arcade-games-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
    }

    .arcade-mini-card {
      background: rgba(13, 20, 36, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .arcade-mini-card:hover {
      border-color: rgba(0, 240, 255, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 240, 255, 0.15);
      background: rgba(15, 23, 42, 0.85);
    }

    .arcade-mini-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .arcade-mini-icon {
      font-size: 26px;
    }

    .arcade-mini-badge {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.35);
      color: #f59e0b;
    }

    .arcade-mini-title {
      font-size: 17px;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 4px;
    }

    .arcade-mini-meta {
      font-size: 11.5px;
      color: var(--neon-cyan);
      font-weight: 600;
      margin-bottom: 8px;
    }

    .arcade-mini-desc {
      font-size: 12px;
      color: #94a3b8;
      line-height: 1.5;
      margin-bottom: 16px;
      flex: 1;
    }

    .btn-arcade-mini-play {
      background: rgba(0, 240, 255, 0.1);
      border: 1px solid rgba(0, 240, 255, 0.3);
      color: var(--neon-cyan);
      font-size: 12.5px;
      font-weight: 700;
      padding: 9px 16px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .btn-arcade-mini-play:hover {
      background: var(--neon-cyan);
      color: #030712;
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    }

    .app-shell-iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #080C14;
    }

    /* Hero Spotlight Showcase */
    .hero-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 28px 20px 20px;
      width: 100%;
      box-sizing: border-box;
    }

    .hero-showcase-card {
      background: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 60%), #0B0F19;
      border: 1px solid var(--border-neon);
      border-radius: 22px;
      padding: 40px 44px 34px;
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(6, 182, 212, 0.12);
      position: relative;
      overflow: hidden;
      min-height: 380px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-backdrop-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(8, 12, 20, 0.98) 0%, rgba(8, 12, 20, 0.88) 55%, rgba(8, 12, 20, 0.4) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .hero-inner-content {
      position: relative;
      z-index: 2;
    }

    .hero-badge-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .hero-chip {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 9999px;
      letter-spacing: 0.03em;
    }

    .hero-chip-primary {
      background: linear-gradient(135deg, #2563EB, #06B6D4);
      color: #FFFFFF;
      box-shadow: 0 0 14px rgba(6, 182, 212, 0.5);
    }

    .hero-chip-subtle {
      background: rgba(17, 24, 39, 0.7);
      color: #CBD5E1;
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .hero-title {
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.03em;
      line-height: 1.25;
      margin-bottom: 12px;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
    }

    .hero-desc {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 820px;
      margin-bottom: 22px;
      word-break: keep-all;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    }

    .hero-launcher-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }

    .launcher-pill-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(17, 24, 39, 0.75);
      border: 1px solid var(--border-neon);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #F8FAFC;
      font-size: 12.5px;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 9999px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .launcher-pill-link:hover {
      background: rgba(30, 41, 59, 0.85);
      border-color: var(--neon-cyan);
      box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
      transform: translateY(-2px);
      color: #FFFFFF;
    }

    /* =========================================================================
       KOXLO PORTAL EXPERIENCE ENHANCED LAYOUT STYLES
       ========================================================================= */

    /* 1. Rolling Notice / Event Banner (Below Hero, Above Filter Bar) */
    .portal-notice-bar {
      max-width: 1400px;
      margin: 12px auto 0;
      padding: 0 20px;
      width: 100%;
      box-sizing: border-box;
    }

    .notice-bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(90deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%);
      border: 1px solid rgba(6, 182, 212, 0.25);
      border-radius: 10px;
      padding: 6px 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .notice-badge-box {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #06B6D4, #2563EB);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
    }

    .notice-ticker-window {
      flex: 1;
      height: 22px;
      overflow: hidden;
      position: relative;
    }

    .notice-ticker-item {
      display: none;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #E2E8F0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      animation: fadeInSlide 0.35s ease forwards;
    }

    .notice-ticker-item.active {
      display: flex;
    }

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

    .notice-item-prefix {
      color: #F59E0B;
      font-weight: 700;
    }

    .notice-action-box {
      flex-shrink: 0;
    }

    .btn-notice-action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #FBBF24;
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 7px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .btn-notice-action:hover {
      background: rgba(245, 158, 11, 0.3);
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
      color: #FFFFFF;
      transform: translateY(-1px);
    }

    /* 2. Portal Hero & User Hub Row - Unified 100% Full Width Edge-to-Edge */
    .portal-hero-row {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    @media (max-width: 960px) {
      .portal-hero-row {
        grid-template-columns: 1fr;
      }
    }

    /* Billboard Showcase Card - 100% Full Width Edge-to-Edge */
    .billboard-showcase-card {
      position: relative;
      background: #0B101E;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 1px solid rgba(6, 182, 212, 0.25);
      border-radius: 0;
      padding: 14px 0;
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      height: 212px;
      min-height: 212px;
      max-height: 212px;
      width: 100%;
      box-sizing: border-box;
      transition: border-color 0.3s ease;
    }


    .billboard-bg-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 30%;
      opacity: 0.28;
      transition: background-image 0.6s ease, opacity 0.6s ease;
      filter: saturate(1.2);
    }

    .billboard-gradient-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),
                  linear-gradient(90deg, rgba(11, 16, 30, 0.98) 0%, rgba(11, 16, 30, 0.85) 50%, rgba(11, 16, 30, 0.65) 100%);
      pointer-events: none;
    }

    .billboard-inner {
      position: relative;
      z-index: 2;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .billboard-left-col {
      flex: 1;
      max-width: 760px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
    }

    .billboard-highlights-row {
      display: none;
    }

    .billboard-highlight-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 700;
      color: #94A3B8;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 4px 10px;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .billboard-highlight-pill:hover {
      border-color: rgba(6, 182, 212, 0.4);
      color: #E2E8F0;
      background: rgba(15, 23, 42, 0.85);
    }

    .billboard-highlight-pill .pill-check {
      color: #10B981;
      font-weight: 900;
    }

    /* Portal Hero Telemetry Glass HUD Card (Desktop) */
    .hero-telemetry-hud {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 6px;
      width: 340px;
      min-width: 340px;
      max-width: 340px;
      height: 180px;
      min-height: 180px;
      max-height: 180px;
      background: rgba(11, 16, 30, 0.86);
      border: 1px solid rgba(6, 182, 212, 0.5);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(6, 182, 212, 0.16);
      flex-shrink: 0;
      box-sizing: border-box;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .hero-telemetry-hud:hover {
      border-color: rgba(6, 182, 212, 0.75);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 32px rgba(6, 182, 212, 0.3);
    }

    .hero-hud-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      margin-bottom: 0;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-hud-live-beacon {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 10px #10B981;
      animation: hudPulse 2s infinite;
    }

    .hero-hud-status-title {
      font-family: var(--font-main);
      font-size: 10.5px;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0.06em;
    }

    .hero-hud-tag {
      margin-left: auto;
      font-family: var(--font-main);
      font-size: 9.5px;
      font-weight: 700;
      color: #06B6D4;
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.3);
      padding: 1.5px 6px;
      border-radius: 4px;
    }

    .hero-hud-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 0;
    }

    .hero-hud-item {
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 7px;
      padding: 4px 8px;
      min-width: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .hero-hud-label {
      display: block;
      font-family: var(--font-main);
      font-size: 9px;
      font-weight: 700;
      color: #64748B;
      letter-spacing: 0.05em;
      margin-bottom: 1px;
    }

    .hero-hud-val {
      display: block;
      font-family: var(--font-main);
      font-size: 11px;
      font-weight: 800;
      color: #E2E8F0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    .btn-hero-hud-quick {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      box-sizing: border-box;
      font-family: var(--font-main);
      background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
      border: 1px solid rgba(103, 232, 249, 0.75);
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -0.01em;
      padding: 0 12px;
      border-radius: 7px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .btn-hero-hud-quick:hover {
      background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
      border-color: #67e8f9;
      box-shadow: 0 6px 16px rgba(6, 182, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
    }

    @media (max-width: 1024px) {
      .hero-telemetry-hud {
        display: none;
      }
      .billboard-inner {
        display: block;
      }
    }


    .billboard-badge-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin: 0;
    }

    .billboard-chip {
      display: inline-flex;
      align-items: center;
      font-size: 10.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 6px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .chip-featured {
      background: linear-gradient(135deg, #EF4444, #F97316);
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
    }

    .chip-hot {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #000000;
      font-weight: 900;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    }

    .chip-exclusive {
      background: linear-gradient(135deg, #8B5CF6, #6366F1);
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
    }

    .chip-subtle {
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #CBD5E1;
    }

    .billboard-title {
      font-size: 26px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.02em;
      line-height: 1.18;
      margin: 0;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .billboard-desc {
      font-size: 13px;
      font-weight: 400;
      color: #CBD5E1;
      line-height: 1.45;
      letter-spacing: -0.02em;
      max-width: 680px;
      margin: 0;
      height: 37.7px;
      min-height: 37.7px;
      max-height: 37.7px;
      word-break: keep-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .billboard-cta-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0;
      padding-top: 2px;
    }

    .btn-billboard-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 36px;
      box-sizing: border-box;
      background: linear-gradient(135deg, #06B6D4, #2563EB);
      color: #FFFFFF;
      font-size: 13px;
      line-height: 1;
      font-weight: 800;
      padding: 0 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.45);
      transition: all 0.2s ease;
    }

    .btn-billboard-primary:hover {
      background: linear-gradient(135deg, #22D3EE, #3B82F6);
      box-shadow: 0 6px 22px rgba(6, 182, 212, 0.6);
      transform: translateY(-2px);
    }

    .btn-billboard-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 36px;
      box-sizing: border-box;
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #F8FAFC;
      font-size: 13px;
      line-height: 1;
      font-weight: 700;
      padding: 0 16px;
      border-radius: 8px;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .btn-billboard-secondary:hover {
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(6, 182, 212, 0.5);
      color: #22D3EE;
      transform: translateY(-2px);
    }

    /* Billboard Interactive Preview Selectors */
    .billboard-selector-bar {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      max-width: 1400px;
      width: 100%;
      margin: 6px auto 0;
      padding: 8px 20px 0;
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    @media (max-width: 640px) {
      .billboard-selector-bar {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 5px;
        padding-top: 10px;
      }
      .billboard-selector-bar::-webkit-scrollbar { display: none; }
      .billboard-selector-btn {
        min-width: 90px;
        flex-shrink: 0;
        padding: 5px 8px;
        gap: 6px;
      }
      .billboard-selector-btn .sel-icon {
        font-size: 14px;
      }
      .billboard-selector-btn .sel-title {
        font-size: 11px;
      }
      .billboard-selector-btn .sel-sub {
        font-size: 9px;
      }
    }

    .billboard-selector-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 7px;
      padding: 5px 8px;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: all 0.2s ease;
    }

    .billboard-selector-btn:hover {
      background: rgba(30, 41, 59, 0.85);
      border-color: rgba(6, 182, 212, 0.3);
    }

    .billboard-selector-btn.active {
      background: rgba(6, 182, 212, 0.16);
      border-color: var(--neon-cyan);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    .sel-icon {
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
    }

    .sel-text-col {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    .sel-title {
      font-size: 11.5px;
      font-weight: 700;
      color: #F1F5F9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .billboard-selector-btn.active .sel-title {
      color: var(--neon-cyan);
    }

    .sel-sub {
      font-size: 9.5px;
      font-weight: 500;
      color: #64748B;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 3. Portal Quick Widget / User Hub */
    .portal-user-hub {
      background: var(--bg-surface);
      border: 1px solid rgba(6, 182, 212, 0.25);
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hub-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .hub-head-title-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hub-head-icon {
      font-size: 15px;
    }

    .hub-head-title {
      font-size: 14px;
      font-weight: 800;
      color: #F8FAFC;
      letter-spacing: -0.02em;
    }

    .hub-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 800;
      color: #10B981;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      padding: 2px 7px;
      border-radius: 9999px;
      text-transform: uppercase;
    }

    .hub-user-box {
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .hub-user-left {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow: hidden;
    }

    .hub-avatar-symbol {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: linear-gradient(135deg, #1E293B, #0F172A);
      border: 1px solid rgba(6, 182, 212, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .hub-user-info-col {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .hub-user-greeting {
      font-size: 12.5px;
      font-weight: 700;
      color: #F1F5F9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hub-user-sub {
      font-size: 10.5px;
      color: #94A3B8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn-hub-auth {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #032510;
      border: none;
      font-size: 11px;
      font-weight: 800;
      padding: 6px 11px;
      border-radius: 7px;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    }

    .btn-hub-auth:hover {
      background: linear-gradient(135deg, #34D399, #10B981);
      transform: translateY(-1px);
    }

    .btn-hub-logout {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94A3B8;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    .btn-hub-logout:hover {
      color: #EF4444;
      border-color: rgba(239, 68, 68, 0.4);
    }

    /* Hub Points Card */
    .hub-points-card {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(30, 41, 59, 0.5) 100%);
      border: 1px solid rgba(245, 158, 11, 0.28);
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .hub-points-card:hover {
      border-color: rgba(245, 158, 11, 0.55);
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
      transform: translateY(-1px);
    }

    .hub-points-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .hub-points-label {
      font-size: 11px;
      font-weight: 700;
      color: #FBBF24;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .hub-points-hint {
      font-size: 10px;
      color: #94A3B8;
    }

    .hub-points-val-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .hub-points-val {
      font-size: 24px;
      font-weight: 900;
      color: #F8FAFC;
      letter-spacing: -0.03em;
    }

    .hub-points-unit {
      font-size: 14px;
      font-weight: 800;
      color: #F59E0B;
    }

    /* 1-Click Daily Check-in Button */
    .btn-hub-daily-claim {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #000000;
      border: none;
      font-size: 12.5px;
      font-weight: 800;
      padding: 11px 16px;
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
      transition: all 0.2s ease;
    }

    .btn-hub-daily-claim:hover {
      background: linear-gradient(135deg, #FBBF24, #F59E0B);
      box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
      transform: translateY(-1px);
    }

    .btn-hub-daily-claim.claimed {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #34D399;
      box-shadow: none;
      cursor: default;
    }

    /* Bookmarks & Shortcuts */
    .hub-footer-shortcuts {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn-hub-bookmarks {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 9px;
      padding: 8px 12px;
      color: #E2E8F0;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    .btn-hub-bookmarks:hover {
      background: rgba(30, 41, 59, 0.85);
      border-color: rgba(6, 182, 212, 0.4);
      color: #FFFFFF;
    }

    .hub-fav-badge {
      background: rgba(6, 182, 212, 0.2);
      color: var(--neon-cyan);
      font-size: 11px;
      font-weight: 800;
      padding: 1px 7px;
      border-radius: 9999px;
    }

    .hub-quick-chips {
      display: flex;
      align-items: center;
      gap: 5px;
      justify-content: space-between;
    }

    .hub-chip-link {
      flex: 1;
      text-align: center;
      padding: 5px 0;
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #94A3B8;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .hub-chip-link:hover {
      color: #FFFFFF;
      background: rgba(30, 41, 59, 0.7);
      border-color: var(--neon-cyan);
    }

    /* 4. Real-time Trending & Ranking Section */
    .portal-trending-section {
      max-width: 1320px;
      margin: 18px auto 0;
      padding: 0 20px;
      width: 100%;
    }

    .trending-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .trending-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .trending-title-icon {
      font-size: 18px;
    }

    .trending-title-text {
      font-size: 17px;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -0.02em;
    }

    .trending-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 800;
      color: #EF4444;
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.3);
      padding: 2px 8px;
      border-radius: 9999px;
      letter-spacing: 0.04em;
    }

    .pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #EF4444;
      box-shadow: 0 0 6px #EF4444;
      animation: pulseDot 1.4s infinite;
    }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(0.7); opacity: 0.4; }
    }

    .trending-sub-text {
      font-size: 12px;
      color: #64748B;
      font-weight: 500;
    }

    .trending-cards-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    @media (max-width: 1100px) {
      .trending-cards-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 640px) {
      .trending-cards-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 10px;
        padding-bottom: 4px;
      }
      .trending-cards-grid::-webkit-scrollbar { display: none; }
      .ranking-card {
        min-width: 200px;
        flex-shrink: 0;
        scroll-snap-align: start;
      }
    }

    .ranking-card {
      position: relative;
      background: var(--bg-surface);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

    .ranking-card:hover {
      transform: translateY(-3px);
      border-color: rgba(6, 182, 212, 0.4);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

    .ranking-badge-top {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 3;
      display: inline-flex;
      align-items: baseline;
      gap: 1px;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 900;
      font-size: 13px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }

    .rank-gold .ranking-badge-top {
      background: linear-gradient(135deg, #F59E0B, #B45309);
      color: #000000;
    }

    .rank-silver .ranking-badge-top {
      background: linear-gradient(135deg, #94A3B8, #475569);
      color: #FFFFFF;
    }

    .rank-bronze .ranking-badge-top {
      background: linear-gradient(135deg, #D97706, #78350F);
      color: #FFFFFF;
    }

    .ranking-card:not(.rank-gold):not(.rank-silver):not(.rank-bronze) .ranking-badge-top {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #CBD5E1;
    }

    .ranking-thumb-wrap {
      position: relative;
      width: 100%;
      height: 105px;
      border-radius: 10px;
      overflow: hidden;
      background: #000000;
    }

    .ranking-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .ranking-card:hover .ranking-thumb-img {
      transform: scale(1.05);
    }

    .ranking-cat-chip {
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      color: #E2E8F0;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ranking-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .ranking-name-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px;
    }

    .ranking-item-title {
      font-size: 13px;
      font-weight: 800;
      color: #F8FAFC;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.02em;
    }

    .ranking-star {
      font-size: 11px;
      font-weight: 800;
      color: #FBBF24;
      flex-shrink: 0;
    }

    .ranking-stat-text {
      font-size: 11px;
      color: #94A3B8;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn-ranking-launch {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 8px;
      padding: 7px 10px;
      color: #E2E8F0;
      font-size: 11.5px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-ranking-launch:hover {
      background: rgba(6, 182, 212, 0.15);
      border-color: var(--neon-cyan);
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    /* 5. Category Curation Specs Panel */
    .curation-specs-panel {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 10px 14px;
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
    }

    .curation-spec-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 500;
    }

    .curation-spec-chip .spec-label {
      background: rgba(6, 182, 212, 0.15);
      color: var(--neon-cyan);
      font-weight: 700;
      font-size: 10.5px;
      padding: 2px 7px;
      border-radius: 5px;
      border: 1px solid rgba(6, 182, 212, 0.3);
    }

    .curation-spec-chip .spec-value {
      color: #CBD5E1;
    }

    /* Category Filter Section */
    .filter-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 12px 20px 10px;
      width: 100%;
      box-sizing: border-box;
    }

    .portal-notice-bar + .filter-section {
      padding-top: 10px;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      background: #111827;
      border: 1px solid rgba(6, 182, 212, 0.22);
      border-radius: 10px;
      padding: 6px 14px;
      box-shadow: var(--shadow-obsidian);
    }

    .category-tabs-group {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-muted);
      padding: 5px 12px;
      border-radius: 7px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-main);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s ease;
    }

    .tab-btn:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.05);
    }

    .tab-btn.active {
      background: linear-gradient(135deg, #2563EB, #06B6D4);
      color: #FFFFFF;
      font-weight: 700;
      border-color: rgba(6, 182, 212, 0.4);
      box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
    }

    .tab-count-pill {
      font-family: var(--font-main);
      font-size: 11px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.1);
    }

    .tab-btn.active .tab-count-pill {
      background: rgba(0, 0, 0, 0.25);
      color: #FFFFFF;
    }

    .filter-meta-text {
      display: none;
    }

    /* Main Content & Zone Layouts */
    .main-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px 48px;
      flex: 1;
      width: 100%;
      box-sizing: border-box;
    }

    .portal-zones-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* =========================================================================
       NETFLIX STREAMING ROWS & HORIZONTAL CAROUSEL TRACK
       ========================================================================= */
    .portal-zone {
      scroll-margin-top: 80px;
    }

    .netflix-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      scroll-margin-top: 80px;
      margin-bottom: 0;
    }

    .netflix-row-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 0 0 2px 0;
      border-bottom: none;
    }

    .netflix-row-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1 1 220px;
    }

    .netflix-cat-icon {
      font-size: 18px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      flex-shrink: 0;
    }

    .netflix-title-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .netflix-row-title-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .netflix-row-title {
      font-size: 17px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.02em;
      margin: 0;
    }

    .rail-count-badge,
    .subcat-badge-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.76rem;
      font-weight: 800;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.14);
      border: 1px solid rgba(56, 189, 248, 0.35);
      padding: 0.15rem 0.55rem;
      border-radius: 12px;
      line-height: 1.2;
      white-space: nowrap;
      vertical-align: middle;
    }

    .netflix-row-tagline {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    .netflix-row-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .btn-row-horror {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: linear-gradient(135deg, #991b1b, #dc2626);
      color: #ffffff;
      border: 1px solid rgba(248, 113, 113, 0.45);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-row-horror:hover {
      filter: brightness(1.12);
      box-shadow: 0 0 14px rgba(220, 38, 38, 0.45);
      transform: translateY(-1px);
    }

    .btn-row-tutorial {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: rgba(99, 102, 241, 0.18);
      color: #c7d2fe;
      border: 1px solid rgba(99, 102, 241, 0.4);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-row-tutorial:hover {
      background: rgba(99, 102, 241, 0.3);
      border-color: rgba(129, 140, 248, 0.65);
      transform: translateY(-1px);
    }

    .netflix-row-more-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--neon-cyan);
      text-decoration: none;
      padding: 7px 14px;
      border-radius: 8px;
      background: rgba(6, 182, 212, 0.08);
      border: 1px solid rgba(6, 182, 212, 0.25);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .netflix-row-more-link:hover {
      background: rgba(6, 182, 212, 0.22);
      border-color: var(--neon-cyan);
      box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
      transform: translateX(3px);
    }

    /* Horizontal Rail System with Left/Right Chevrons (Video OTT Style) */
    .rail-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .rail-track,
    .novel-bookshelf-track,
    .netflix-carousel-track {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding: 6px 0 8px 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
      width: 100%;
      box-sizing: border-box;
    }

    .rail-track::-webkit-scrollbar,
    .novel-bookshelf-track::-webkit-scrollbar,
    .netflix-carousel-track::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .rail-track .service-card,
    .rail-track .netflix-subcard,
    .rail-track .novel-bookshelf-card,
    .netflix-carousel-track .service-card,
    .netflix-carousel-track .netflix-subcard,
    .novel-bookshelf-track .novel-bookshelf-card {
      flex: 0 0 calc((100% - (3 * 16px)) / 4);
      width: calc((100% - (3 * 16px)) / 4);
      min-width: calc((100% - (3 * 16px)) / 4);
      max-width: calc((100% - (3 * 16px)) / 4);
      box-sizing: border-box;
      scroll-snap-align: start;
      flex-shrink: 0;
    }

    /* Empty Lineup Full-Width Centered Banner (Zero Void Solution) */
    .empty-lineup-wide-banner {
      grid-column: 1 / -1;
      flex: 1 1 100%;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: 4px 0 8px 0;
      padding: 44px 32px;
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.75) 0%, rgba(13, 17, 28, 0.92) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
    }

    .rail-track:has(.empty-lineup-wide-banner),
    .netflix-carousel-track:has(.empty-lineup-wide-banner) {
      display: block;
      width: 100%;
      padding: 12px 0 24px 0;
      box-sizing: border-box;
    }

    .empty-lineup-wide-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 1.5px;
      background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.6), rgba(168, 85, 247, 0.6), transparent);
    }

    .empty-lineup-content {
      max-width: 660px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .empty-lineup-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 14px;
      border-radius: 9999px;
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.35);
      font-size: 11.5px;
      font-weight: 700;
      color: #FBBF24;
      letter-spacing: 0.04em;
    }

    .empty-lineup-badge .pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #FBBF24;
      box-shadow: 0 0 8px #FBBF24;
      animation: pulse-glow 2s infinite ease-in-out;
    }

    @keyframes pulse-glow {
      0%, 100% { opacity: 0.6; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.15); }
    }

    .empty-lineup-title {
      font-size: 20px;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -0.02em;
      margin: 0;
      line-height: 1.35;
    }

    .empty-lineup-desc {
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--text-dim, #94A3B8);
      margin: 0;
      max-width: 560px;
    }

    .empty-lineup-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .btn-empty-action {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 38px;
      padding: 0 18px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    .btn-empty-primary {
      background: linear-gradient(135deg, #2563EB, #06B6D4);
      color: #FFFFFF;
      border: 1px solid rgba(6, 182, 212, 0.4);
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    }

    .btn-empty-primary:hover {
      box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
      transform: translateY(-1.5px);
    }

    .btn-empty-secondary {
      background: rgba(255, 255, 255, 0.06);
      color: #E2E8F0;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .btn-empty-secondary:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.24);
      color: #FFFFFF;
      transform: translateY(-1.5px);
    }

    .rail-wrapper:has(.empty-lineup-wide-banner) .rail-btn {
      display: none;
    }

    .tab-count-pill.tab-count-ready {
      font-size: 10px;
      background: rgba(245, 158, 11, 0.2);
      color: #FBBF24;
      border: 1px solid rgba(245, 158, 11, 0.35);
      padding: 1px 6px;
      font-weight: 700;
    }

    .tab-btn.active .tab-count-pill.tab-count-ready {
      background: rgba(245, 158, 11, 0.35);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.4);
    }

    @media (max-width: 600px) {
      .empty-lineup-wide-banner {
        padding: 28px 16px;
      }
      .empty-lineup-title {
        font-size: 16px;
      }
      .empty-lineup-desc {
        font-size: 12px;
      }
      .btn-empty-action {
        height: 34px;
        padding: 0 14px;
        font-size: 12px;
      }
    }

    .rail-btn,
    .rail-btn-prev,
    .rail-btn-next {
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 84px;
      background: rgba(10, 15, 26, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #fff;
      font-size: 2.2rem;
      cursor: pointer;
      z-index: 25;
      border-radius: 8px;
      transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
      opacity: 0.65;
      pointer-events: auto;
      line-height: 1;
      user-select: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    .rail-btn.is-active {
      display: flex;
      opacity: 0.95;
    }

    .rail-wrapper:hover .rail-btn {
      opacity: 0.9;
    }

    .rail-wrapper:hover .rail-btn.is-active {
      opacity: 1;
    }

    .rail-btn:hover {
      background: var(--neon-cyan);
      color: #000;
      border-color: var(--neon-cyan);
      box-shadow: 0 0 18px rgba(6, 182, 212, 0.6);
      transform: translateY(-50%) scale(1.05);
      opacity: 1;
    }

    .rail-btn-prev { left: 0; }
    .rail-btn-next { right: 0; }

    /* Authoritative KOXLO Unified Single-Line Footer */
    .footer-unified {
      background: #080b12;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 1.25rem 1.5rem;
      color: #94a3b8;
      font-family: inherit;
      margin-top: auto;
      flex-shrink: 0;
      position: relative;
      z-index: 20;
      width: 100%;
      box-sizing: border-box;
    }

    .footer-unified-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-wrap: wrap;
      gap: 1.25rem;
      padding: 0;
      border-bottom: none;
    }

    .footer-left {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 0.82rem;
      color: #64748b;
      text-align: center;
    }

    .footer-brand-name {
      display: inline-flex;
      align-items: center;
      font-size: 1.15rem;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.01em;
      line-height: 1;
    }

    .footer-copyright {
      color: #64748b;
      font-size: 0.8rem;
    }

    .footer-support-mail {
      color: #38bdf8;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .footer-legal-links {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
    }

    .footer-legal-links a {
      color: #94a3b8;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.82rem;
      transition: color 0.15s ease;
      cursor: pointer;
    }

    .footer-legal-links a:hover {
      color: #38bdf8;
      text-decoration: underline;
    }

    .footer-legal-divider {
      color: #475569;
      font-size: 0.75rem;
    }

    @media (max-width: 768px) {
      .footer-unified {
        padding: 1.25rem 1rem 4.75rem 1rem;
        margin-top: 1.5rem;
      }
      .footer-unified-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 0.75rem;
      }
      .footer-left {
        justify-content: center;
        text-align: center;
        gap: 6px;
        line-height: 1.45;
      }
      .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 8px;
        width: 100%;
      }
      .footer-legal-links .footer-legal-divider {
        display: none;
      }
      .footer-legal-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        border-radius: 8px;
        background: rgba(30, 41, 59, 0.65);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #e2e8f0;
        font-size: 0.8rem;
        font-weight: 700;
      }
      .footer-legal-links a:active {
        background: rgba(56, 189, 248, 0.2);
        border-color: rgba(56, 189, 248, 0.5);
        color: #38bdf8;
      }
    }

    /* Single-Row Horizontal Carousel Track (Exact match across all categories) */
    .netflix-carousel-track,
    .novel-bookshelf-track {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding: 6px 0 8px 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
      width: 100%;
      box-sizing: border-box;
    }

    .netflix-carousel-track:has(.empty-lineup-wide-banner),
    .novel-bookshelf-track:has(.empty-lineup-wide-banner) {
      display: block;
      width: 100%;
    }

    .netflix-carousel-track::-webkit-scrollbar,
    .novel-bookshelf-track::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    /* Netflix & Novel Card Sizing & Appearance (Single-Row Standard 4 Cards Full-Width) */
    .netflix-carousel-track .service-card,
    .netflix-carousel-track .netflix-subcard,
    .novel-bookshelf-track .novel-bookshelf-card {
      flex: 0 0 calc((100% - (3 * 16px)) / 4);
      width: calc((100% - (3 * 16px)) / 4);
      max-width: calc((100% - (3 * 16px)) / 4);
      min-width: calc((100% - (3 * 16px)) / 4);
      flex-shrink: 0;
      box-sizing: border-box;
      height: 345px;
      background: var(--bg-card);
      border: 1px solid var(--border-neon);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.7);
      scroll-snap-align: start;

      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
    }

    @media (max-width: 1100px) {
      .netflix-carousel-track .service-card,
      .netflix-carousel-track .netflix-subcard,
      .novel-bookshelf-track .novel-bookshelf-card {
        flex: 0 0 calc((100% - (2 * 16px)) / 3);
        width: calc((100% - (2 * 16px)) / 3);
        max-width: calc((100% - (2 * 16px)) / 3);
        min-width: calc((100% - (2 * 16px)) / 3);
      }
    }

    @media (max-width: 768px) {
      .netflix-carousel-track .service-card,
      .netflix-carousel-track .netflix-subcard,
      .novel-bookshelf-track .novel-bookshelf-card {
        flex: 0 0 calc((100% - 16px) / 2);
        width: calc((100% - 16px) / 2);
        max-width: calc((100% - 16px) / 2);
        min-width: calc((100% - 16px) / 2);
      }
    }

    @media (max-width: 520px) {
      .netflix-carousel-track .service-card,
      .netflix-carousel-track .netflix-subcard,
      .novel-bookshelf-track .novel-bookshelf-card {
        flex: 0 0 168px;
        width: 168px;
        max-width: 168px;
        min-width: 168px;
      }
    }

    .netflix-carousel-track .service-card:hover,
    .netflix-carousel-track .netflix-subcard:hover,
    .novel-bookshelf-track .novel-bookshelf-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(6, 182, 212, 0.6);
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(6, 182, 212, 0.25);
      z-index: 2;
    }

    .netflix-carousel-track .card-media-banner,
    .netflix-carousel-track .cinema-21-9-marquee {
      height: 150px;
      min-height: 150px;
      max-height: 150px;
      aspect-ratio: auto;
      position: relative;
      overflow: hidden;
      background: #0B0F19;
      margin: 0;
      padding: 0;
    }

    .netflix-carousel-track .card-cover-img,
    .netflix-carousel-track .cinema-marquee-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      display: block;
    }

    .netflix-carousel-track .service-card:hover .card-cover-img,
    .netflix-carousel-track .netflix-subcard:hover .card-cover-img,
    .netflix-carousel-track .service-card:hover .cinema-marquee-img {
      transform: scale(1.06);
    }

    .netflix-carousel-track .card-content {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 8px;
    }

    .netflix-carousel-track .card-title {
      font-size: 16px;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .netflix-carousel-track .card-description {
      font-size: 12.5px;
      color: #94A3B8;
      line-height: 1.5;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .netflix-carousel-track .card-genre-pill {
      margin-bottom: 0;
      padding: 3px 8px;
      font-size: 11px;
    }

    .netflix-carousel-track .card-bottom {
      padding: 10px 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(11, 15, 25, 0.7);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: auto;
    }

    .netflix-carousel-track .card-domain-badge {
      display: none;
    }

    .netflix-carousel-track .btn-action {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 800;
      border-radius: 8px;
      white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    }

    /* Hide bulky legacy vertical sub-panels inside modern Netflix carousel tiles */
    .netflix-carousel-track .console-status-strip,
    .netflix-carousel-track .magazine-top-strip,
    .netflix-carousel-track .bookshelf-spine-bar,
    .netflix-carousel-track .tactical-hud-panel,
    .netflix-carousel-track .story-lineup-panel,
    .netflix-carousel-track .multilingual-showcase-panel,
    .netflix-carousel-track .cinema-interactive-player-panel,
    .netflix-carousel-track .cinema-dolby-tags-row,
    .netflix-carousel-track .cinema-anamorphic-flare,
    .netflix-carousel-track .cinema-marquee-overlay,
    .netflix-carousel-track .card-synopsis-box,
    .netflix-carousel-track .card-highlights-section,
    .netflix-carousel-track .card-tag-list,
    .netflix-carousel-track .card-header-flex .card-icon-box,
    .netflix-carousel-track .card-header-flex .card-num-chip,
    .netflix-carousel-track .card-header-flex .card-sub-en,
    .netflix-carousel-track .cinema-header-row .card-icon-box,
    .netflix-carousel-track .cinema-header-row .card-num-chip,
    .netflix-carousel-track .cinema-header-row .card-sub-en,
    .curation-specs-panel {
      display: none;
    }

    /* ============================================================
       KOXLO Dedicated Video Cinema Card System (Dense 16:9 Streaming)
       Completely eliminates dead vertical voids and enhances media cards
       ============================================================ */
    #zone-video .netflix-carousel-track .netflix-subcard,
    .netflix-carousel-track .video-cinema-card {
      height: 350px;
      border: 1px solid rgba(225, 29, 72, 0.28);
      background: linear-gradient(180deg, #131722 0%, #0c0f17 100%);
      box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.75);
    }

    #zone-video .netflix-carousel-track .netflix-subcard:hover,
    .netflix-carousel-track .video-cinema-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(225, 29, 72, 0.75);
      box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.9), 0 0 22px rgba(225, 29, 72, 0.3);
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-media-banner,
    .netflix-carousel-track .video-cinema-card .card-media-banner {
      height: 160px;
      min-height: 160px;
      max-height: 160px;
      position: relative;
    }

    .video-play-center-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      z-index: 3;
    }

    .netflix-subcard:hover .video-play-center-btn {
      transform: translate(-50%, -50%) scale(1.12);
      background: rgba(225, 29, 72, 0.88);
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 24px rgba(225, 29, 72, 0.75);
    }

    .video-play-center-btn svg {
      margin-left: 2px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    .video-specs-strip {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .video-spec-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2.5px 7px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #CBD5E1;
    }

    .video-spec-chip.spec-audio {
      color: #38BDF8;
      border-color: rgba(56, 189, 248, 0.35);
      background: rgba(56, 189, 248, 0.08);
    }

    .video-spec-chip.spec-quality {
      color: #FB7185;
      border-color: rgba(244, 63, 94, 0.35);
      background: rgba(244, 63, 94, 0.08);
    }

    .video-time-badge {
      background: rgba(11, 15, 25, 0.85);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #38BDF8;
      border: 1px solid rgba(56, 189, 248, 0.45);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
      font-variant-numeric: tabular-nums;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-content,
    .netflix-carousel-track .video-cinema-card .card-content {
      padding: 10px 14px 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-title,
    .netflix-carousel-track .video-cinema-card .card-title {
      font-size: 15.5px;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.35;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-genre-pill,
    .netflix-carousel-track .video-cinema-card .card-genre-pill {
      font-size: 11px;
      padding: 2px 7px;
      background: rgba(225, 29, 72, 0.12);
      border: 1px solid rgba(225, 29, 72, 0.3);
      color: #FDA4AF;
      align-self: flex-start;
      border-radius: 4px;
      margin: 0;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-description,
    .netflix-carousel-track .video-cinema-card .card-description {
      font-size: 12px;
      color: #94A3B8;
      line-height: 1.45;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .card-bottom,
    .netflix-carousel-track .video-cinema-card .card-bottom {
      height: 48px;
      min-height: 48px;
      max-height: 48px;
      padding: 0 14px;
      margin-top: auto;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(10, 14, 23, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .video-live-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      color: #10B981;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
      line-height: 1;
    }

    .video-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 6px #10B981;
      animation: pulseLiveDot 2s infinite ease-in-out;
      flex-shrink: 0;
    }

    @keyframes pulseLiveDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(0.65); opacity: 0.35; }
    }

    #zone-video .netflix-carousel-track .netflix-subcard .btn-cinema,
    .netflix-carousel-track .video-cinema-card .btn-cinema {
      width: auto;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 14px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 700;
      color: #FFFFFF;
      background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
      border: 1px solid rgba(244, 63, 94, 0.4);
      box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
      text-decoration: none;
      transition: all 0.2s ease;
      flex: 0 0 auto;
      white-space: nowrap;
      line-height: 1;
      box-sizing: border-box;
    }

    #zone-video .netflix-carousel-track .netflix-subcard .btn-cinema:hover,
    .netflix-carousel-track .video-cinema-card .btn-cinema:hover {
      background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
      box-shadow: 0 4px 16px rgba(225, 29, 72, 0.55);
      transform: translateY(-1px);
    }

    /* ============================================================
       KOXLO Dedicated 3D Game Arcade Card System (Dense 16:9 Carousel)
       Completely eliminates dead vertical voids and enhances game cards
       ============================================================ */
    #zone-arcade .netflix-carousel-track .service-card,
    .netflix-carousel-track .game-arcade-card {
      height: auto;
      min-height: 365px;
      border: 1px solid rgba(6, 182, 212, 0.28);
      background: linear-gradient(180deg, #131722 0%, #0c0f17 100%);
      box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.75);
    }

    #zone-arcade .netflix-carousel-track .service-card:hover,
    .netflix-carousel-track .game-arcade-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(6, 182, 212, 0.8);
      box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.9), 0 0 22px rgba(6, 182, 212, 0.35);
    }

    #zone-arcade .netflix-carousel-track .service-card .card-media-banner,
    .netflix-carousel-track .game-arcade-card .card-media-banner {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      min-height: 0;
      max-height: none;
      position: relative;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-cover-img,
    .netflix-carousel-track .game-arcade-card .card-cover-img {
      object-fit: cover;
      object-position: top center;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-floating-badges {
      top: auto;
      bottom: 10px;
      right: 12px;
    }

    .game-play-center-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      z-index: 3;
    }

    .service-card:hover .game-play-center-btn,
    .game-arcade-card:hover .game-play-center-btn {
      transform: translate(-50%, -50%) scale(1.12);
      background: rgba(6, 182, 212, 0.88);
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 24px rgba(6, 182, 212, 0.75);
    }

    .game-play-center-btn svg {
      margin-left: 2px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    .game-specs-strip {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .game-spec-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 6.5px;
      border-radius: 4px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      white-space: nowrap;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #CBD5E1;
    }

    .game-spec-chip.spec-engine {
      color: #38BDF8;
      border-color: rgba(56, 189, 248, 0.35);
      background: rgba(56, 189, 248, 0.08);
    }

    .game-spec-chip.spec-combat {
      color: #34D399;
      border-color: rgba(52, 211, 153, 0.35);
      background: rgba(52, 211, 153, 0.08);
    }

    .game-spec-chip.spec-mode {
      color: #FBBF24;
      border-color: rgba(251, 191, 36, 0.35);
      background: rgba(251, 191, 36, 0.08);
    }

    #zone-arcade .netflix-carousel-track .service-card .card-content,
    .netflix-carousel-track .game-arcade-card .card-content,
    .game-widescreen-card .card-content {
      padding: 10px 14px 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-title,
    .netflix-carousel-track .game-arcade-card .card-title,
    .game-widescreen-card .card-title {
      font-size: 15.5px;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.35;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-genre-pill,
    .netflix-carousel-track .game-arcade-card .card-genre-pill,
    .game-widescreen-card .card-genre-pill {
      font-size: 11px;
      padding: 2px 7px;
      background: rgba(6, 182, 212, 0.12);
      border: 1px solid rgba(6, 182, 212, 0.3);
      color: #67E8F9;
      align-self: flex-start;
      border-radius: 4px;
      margin: 0;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-description,
    .netflix-carousel-track .game-arcade-card .card-description,
    .game-widescreen-card .card-description {
      font-size: 12px;
      color: #94A3B8;
      line-height: 1.45;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 36px;
      flex: 0 0 auto;
    }

    #zone-arcade .netflix-carousel-track .service-card .card-bottom,
    .netflix-carousel-track .game-arcade-card .card-bottom,
    .game-widescreen-card .card-bottom {
      height: 48px;
      min-height: 48px;
      max-height: 48px;
      flex: 0 0 48px;
      flex-shrink: 0;
      padding: 0 14px;
      margin-top: auto;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(10, 14, 23, 0.85);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-sizing: border-box;
    }

    .game-live-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      color: #06B6D4;
      font-weight: 600;
      white-space: nowrap;
      flex: 0 0 auto;
      flex-shrink: 0;
      line-height: 1;
    }

    .game-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #06B6D4;
      box-shadow: 0 0 6px #06B6D4;
      animation: pulseLiveDot 2s infinite ease-in-out;
      flex-shrink: 0;
    }

    #zone-arcade .netflix-carousel-track .service-card .btn-arcade,
    .netflix-carousel-track .game-arcade-card .btn-arcade,
    .game-widescreen-card .btn-arcade,
    .game-widescreen-card .card-bottom .btn-action {
      width: auto;
      min-width: 108px;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 14px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 700;
      color: #FFFFFF;
      background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
      border: 1px solid rgba(56, 189, 248, 0.4);
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
      text-decoration: none;
      transition: all 0.2s ease;
      flex: 0 0 auto;
      flex-shrink: 0;
      white-space: nowrap;
      line-height: 1;
      box-sizing: border-box;
    }

    #zone-arcade .netflix-carousel-track .service-card .btn-arcade:hover,
    .netflix-carousel-track .game-arcade-card .btn-arcade:hover,
    .game-widescreen-card .btn-arcade:hover,
    .game-widescreen-card .card-bottom .btn-action:hover {
      background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
      box-shadow: 0 4px 16px rgba(14, 165, 233, 0.55);
      transform: translateY(-1px);
    }

    /* ============================================================
       KOXLO Dedicated Web Novel Bookshelf System (3:4 Hardcover)
       Completely distinct from Webtoon 16:9 Comic Banner Cards
       ============================================================ */
    .novel-bookshelf-section {
      position: relative;
    }
    .novel-bookshelf-section .novel-cat-icon {
      background: linear-gradient(135deg, #c084fc, #a855f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 24px;
    }
    .novel-bookshelf-title {
      background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .novel-bookshelf-tagline {
      color: #c084fc;
    }
    .novel-more-link {
      color: #c084fc;
      border-color: rgba(168, 85, 247, 0.4);
    }
    .novel-more-link:hover {
      background: rgba(168, 85, 247, 0.15);
      color: #f3e8ff;
      border-color: #a855f7;
    }

    /* ============================================================
       KOXLO Dedicated Web Novel Bookshelf Card System (Unified 4-Card Vertical)
       Matches Webtoon / Video aesthetic with rich literature details
       ============================================================ */
    .novel-rail-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    #zone-cartoon .netflix-carousel-track .netflix-subcard,
    .netflix-subcard[data-category="cartoon"],
    #zone-novel .novel-bookshelf-card,
    .novel-bookshelf-track .novel-bookshelf-card {
      height: 410px;
      border: 1px solid rgba(168, 85, 247, 0.3);
      background: linear-gradient(180deg, #131226 0%, #0c0a18 100%);
      box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.75), 0 0 12px rgba(168, 85, 247, 0.08);
    }

    #zone-cartoon .netflix-carousel-track .netflix-subcard,
    .netflix-subcard[data-category="cartoon"] {
      border: 1px solid rgba(245, 158, 11, 0.28);
      background: linear-gradient(180deg, #131722 0%, #0c0f17 100%);
    }

    #zone-novel .novel-bookshelf-card:hover,
    .novel-bookshelf-track .novel-bookshelf-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(168, 85, 247, 0.75);
      box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.9), 0 0 24px rgba(168, 85, 247, 0.35);
    }

    #zone-cartoon .netflix-carousel-track .netflix-subcard .card-media-banner,
    .netflix-subcard[data-category="cartoon"] .card-media-banner,
    .novel-bookshelf-card .card-media-banner {
      height: 215px;
      min-height: 215px;
      max-height: 215px;
      position: relative;
      overflow: hidden;
      background: #080b12;
    }

    .card-cover-ambient {
      position: absolute;
      inset: -18px;
      background-size: cover;
      background-position: center;
      filter: blur(20px) brightness(0.42) saturate(1.25);
      transform: scale(1.12);
      pointer-events: none;
      z-index: 0;
    }

    #zone-cartoon .netflix-carousel-track .netflix-subcard .card-cover-img,
    .netflix-subcard[data-category="cartoon"] .card-cover-img,
    .novel-bookshelf-card .card-cover-img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.72));
      transition: transform 0.4s ease;
    }

    #zone-cartoon .netflix-carousel-track .netflix-subcard:hover .card-cover-img,
    .netflix-subcard[data-category="cartoon"]:hover .card-cover-img,
    .novel-bookshelf-card:hover .card-cover-img {
      transform: scale(1.04);
    }

    .novel-bookshelf-card .novel-book-spine-crease {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 10px;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
      pointer-events: none;
      z-index: 2;
    }

    .novel-bookshelf-card .novel-book-gloss-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
      pointer-events: none;
      z-index: 2;
    }

    .badge-novel-status {
      background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .badge-novel-chars {
      background: rgba(245, 158, 11, 0.18);
      color: #FDE68A;
      border: 1px solid rgba(245, 158, 11, 0.35);
      font-weight: 700;
      font-size: 10px;
      padding: 3px 7px;
      border-radius: 4px;
    }

    .novel-bookshelf-card .card-content {
      padding: 12px 14px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .novel-bookshelf-card .card-title {
      font-size: 15.5px;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 1.3;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .novel-bookshelf-card .card-title a {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .novel-bookshelf-card .card-title a:hover {
      color: #C084FC;
    }

    .novel-meta-pill-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .novel-genre-badge {
      background: rgba(168, 85, 247, 0.18);
      color: #D8B4FE;
      border: 1px solid rgba(168, 85, 247, 0.35);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .novel-rating-chip {
      background: rgba(245, 158, 11, 0.12);
      color: #FBBF24;
      border: 1px solid rgba(245, 158, 11, 0.3);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .novel-ep-chip {
      font-size: 11px;
      color: #94A3B8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .novel-bookshelf-card .card-description {
      font-size: 12px;
      color: #94A3B8;
      line-height: 1.45;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      font-style: italic;
    }

    .novel-bookshelf-card .card-bottom {
      height: 48px;
      min-height: 48px;
      max-height: 48px;
      padding: 0 14px;
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(11, 15, 25, 0.6);
      box-sizing: border-box;
    }

    .btn-novel-sub-bookshelf {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      min-height: 32px;
      padding: 0 10px;
      background: rgba(168, 85, 247, 0.12);
      border: 1px solid rgba(168, 85, 247, 0.3);
      border-radius: 8px;
      color: #D8B4FE;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .btn-novel-sub-bookshelf:hover {
      background: rgba(168, 85, 247, 0.24);
      color: #FFFFFF;
      border-color: rgba(168, 85, 247, 0.6);
    }

    .novel-bookshelf-card .btn-novel {
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 14px;
      font-size: 12.5px;
      font-weight: 700;
      border-radius: 8px;
      text-decoration: none;
      background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      color: #FFFFFF;
      border: 1px solid rgba(168, 85, 247, 0.5);
      box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
      transition: all 0.2s ease;
      flex: 1 1 auto;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .novel-bookshelf-card .btn-novel:hover {
      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
      box-shadow: 0 4px 18px rgba(168, 85, 247, 0.55);
      transform: translateY(-1px);
    }

    .zone-header {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .zone-badge-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .zone-chip {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 2px 8px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .zone-chip-arcade {
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.5);
      color: #22D3EE;
    }

    .zone-chip-story {
      background: rgba(168, 85, 247, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.5);
      color: #C084FC;
    }

    .zone-chip-cinema {
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.5);
      color: #FBBF24;
    }

    .zone-tagline {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .zone-title {
      font-size: 22px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.02em;
    }

    /* Zone Grids */
    .zone-arcade-grid, .zone-story-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .zone-cinema-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    /* Service Card Base with 3D Tilt (EVAL-01 / Phase 4) */
    .service-card {
      background: var(--bg-card);
      border: 1px solid var(--border-neon);
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-obsidian);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
      will-change: transform;
    }

    .service-card:hover {
      --ty: -5px;
      border-color: rgba(0, 242, 254, 0.55);
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 242, 254, 0.45);
    }

    /* Media Banner & Overlays */
    .card-media-banner {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: #0F172A;
    }

    .card-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      display: block;
    }

    .service-card:hover .card-cover-img {
      transform: scale(1.05);
    }

    .card-media-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 12, 20, 0.1) 0%, rgba(8, 12, 20, 0.8) 100%);
      pointer-events: none;
    }

    .overlay-teal {
      background: linear-gradient(180deg, rgba(4, 47, 46, 0.15) 0%, rgba(8, 12, 20, 0.85) 100%);
    }

    .overlay-novel {
      background: linear-gradient(180deg, rgba(76, 29, 149, 0.15) 0%, rgba(8, 12, 20, 0.85) 100%);
    }

    .overlay-cartoon {
      background: linear-gradient(180deg, rgba(120, 53, 15, 0.15) 0%, rgba(8, 12, 20, 0.85) 100%);
    }

    .card-floating-badges {
      position: absolute;
      top: 10px;
      left: 10px;
      right: auto;
      bottom: auto;
      display: flex;
      gap: 6px;
      z-index: 2;
    }

    .game-widescreen-card .card-floating-badges,
    .game-arcade-card .card-floating-badges,
    #zone-arcade .netflix-carousel-track .service-card .card-floating-badges {
      position: absolute;
      top: auto;
      bottom: 8px;
      left: 8px;
      right: 42px;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      overflow: hidden;
      z-index: 2;
    }

    .game-widescreen-card .card-media-banner .btn-card-fav,
    .game-arcade-card .card-media-banner .btn-card-fav,
    #zone-arcade .netflix-carousel-track .service-card .card-media-banner .btn-card-fav {
      top: auto;
      bottom: 6px;
      right: 8px;
      width: 28px;
      height: 28px;
      font-size: 13px;
    }

    .game-widescreen-card .card-floating-badges .badge,
    .game-arcade-card .card-floating-badges .badge,
    #zone-arcade .netflix-carousel-track .service-card .card-floating-badges .badge {
      font-size: 10px;
      padding: 2px 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .game-widescreen-card .card-floating-category,
    .game-arcade-card .card-floating-category,
    #zone-arcade .netflix-carousel-track .service-card .card-floating-category {
      display: none;
    }

    .card-floating-category {
      position: absolute;
      bottom: 12px;
      left: 14px;
      background: rgba(8, 12, 20, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #F8FAFC;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    /* Consumer-friendly Neon Badges */
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      line-height: 1.2;
      display: inline-flex;
      align-items: center;
      letter-spacing: 0.02em;
    }

    .badge-hot {
      background: rgba(239, 68, 68, 0.15);
      color: #F87171;
      border: 1px solid rgba(239, 68, 68, 0.5);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
    }

    .badge-popular {
      background: rgba(245, 158, 11, 0.15);
      color: #FBBF24;
      border: 1px solid rgba(245, 158, 11, 0.5);
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
    }

    .badge-new {
      background: rgba(6, 182, 212, 0.15);
      color: #22D3EE;
      border: 1px solid rgba(6, 182, 212, 0.5);
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.35);
    }

    .badge-free {
      background: rgba(16, 185, 129, 0.15);
      color: #34D399;
      border: 1px solid rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
    }

    .badge-series {
      background: rgba(168, 85, 247, 0.15);
      color: #C084FC;
      border: 1px solid rgba(168, 85, 247, 0.5);
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
    }

    .badge-default {
      background: rgba(148, 163, 184, 0.15);
      color: #94A3B8;
      border: 1px solid rgba(148, 163, 184, 0.3);
    }

    /* Card Content Area */
    .card-content {
      padding: 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .card-header-flex {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }

    .card-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
      background: #111827;
      border: 1px solid var(--border-neon);
    }

    .card-icon-cyan { color: #06B6D4; border-color: rgba(6, 182, 212, 0.4); }
    .card-icon-emerald { color: #10B981; border-color: rgba(16, 185, 129, 0.4); }
    .card-icon-purple { color: #A855F7; border-color: rgba(168, 85, 247, 0.4); }
    .card-icon-amber { color: #F59E0B; border-color: rgba(245, 158, 11, 0.4); }
    .card-icon-gold { color: #FBBF24; border-color: rgba(251, 191, 36, 0.4); }

    .card-title-area {
      flex: 1;
      min-width: 0;
    }

    .card-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .card-title {
      font-size: 18px;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 1.35;
      letter-spacing: -0.025em;
    }

    .card-num-chip {
      font-size: 11px;
      font-weight: 800;
      color: var(--neon-cyan);
      font-family: monospace;
      background: rgba(6, 182, 212, 0.1);
      border: 1px solid rgba(6, 182, 212, 0.25);
      padding: 1px 6px;
      border-radius: 5px;
      letter-spacing: 0.03em;
      flex-shrink: 0;
    }

    .card-sub-en {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-dim);
      margin-top: 2px;
      font-family: monospace;
    }

    .card-genre-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(17, 24, 39, 0.8);
      border: 1px solid var(--border-neon);
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 12px;
      width: fit-content;
    }

    .genre-icon {
      color: var(--neon-cyan);
    }

    /* Tactical HUD & Status Strips for Zone 1 */
    .console-status-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 16px;
      font-size: 11px;
      font-family: monospace;
      font-weight: 700;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border-neon);
    }

    .avionics-strip {
      background: rgba(6, 182, 212, 0.06);
      color: #38BDF8;
      border-bottom-color: rgba(6, 182, 212, 0.25);
    }

    .sonar-strip {
      background: rgba(16, 185, 129, 0.06);
      color: #34D399;
      border-bottom-color: rgba(16, 185, 129, 0.25);
    }

    .strip-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .strip-label {
      color: var(--text-dim);
    }

    .strip-indicator-cyan {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #06B6D4;
      box-shadow: 0 0 8px #06B6D4;
      display: inline-block;
    }

    .strip-indicator-emerald {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 8px #10B981;
      display: inline-block;
    }

    .tactical-hud-panel {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(11, 15, 25, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }

    .hud-radar-visual, .hud-sonar-visual {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hud-briefing-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .hud-briefing-title {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text-dim);
      letter-spacing: 0.06em;
      margin-bottom: 2px;
    }

    .hud-spec-row {
      font-size: 11.5px;
      color: var(--text-bright);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hud-spec-tag {
      font-weight: 700;
      color: var(--neon-cyan);
      margin-right: 4px;
    }

    /* Radar / Sonar Animations */
    .radar-sweep-anim {
      transform-origin: 50px 50px;
      animation: sweep-rotation 3s linear infinite;
    }

    .sonar-sweep-anim {
      transform-origin: 50px 50px;
      animation: sweep-rotation 4s linear infinite;
    }

    .sonar-pulse-ring {
      animation: pulse-ring 2.4s ease-out infinite;
    }

    .radar-target-blip, .sonar-contact-blip {
      animation: blip-blink 1.2s ease-in-out infinite alternate;
    }

    @keyframes sweep-rotation {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes pulse-ring {
      0% { r: 10px; opacity: 0.9; }
      50% { opacity: 0.4; }
      100% { r: 42px; opacity: 0; }
    }

    @keyframes blip-blink {
      0% { opacity: 0.2; transform: scale(0.85); }
      100% { opacity: 1; transform: scale(1.2); }
    }

    /* Zone 2: Story & Comics Studio Custom Styles */
    .bookshelf-spine-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 700;
      background: linear-gradient(90deg, rgba(88, 28, 135, 0.2) 0%, rgba(15, 23, 42, 0.4) 100%);
      border-bottom: 1px solid rgba(168, 85, 247, 0.25);
      border-left: 5px solid #7C3AED;
      color: #DDD6FE;
      letter-spacing: 0.05em;
    }

    .spine-gold-emboss {
      font-family: monospace;
    }

    .spine-serial-tag {
      color: var(--neon-purple);
    }

    .story-lineup-panel {
      background: rgba(11, 15, 25, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .lineup-header-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--neon-purple);
      letter-spacing: 0.05em;
      margin-bottom: 2px;
    }

    .lineup-book-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      flex-wrap: wrap;
    }

    .lineup-badge-primary {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(168, 85, 247, 0.2);
      border: 1px solid rgba(168, 85, 247, 0.5);
      color: #C084FC;
    }

    .lineup-badge-secondary {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(6, 182, 212, 0.2);
      border: 1px solid rgba(6, 182, 212, 0.5);
      color: #22D3EE;
    }

    .lineup-work-title {
      font-weight: 700;
      color: #FFFFFF;
    }

    .lineup-work-meta {
      font-size: 11px;
      color: var(--text-dim);
    }

    .viewer-feature-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .viewer-chip {
      font-size: 11px;
      font-weight: 600;
      color: #CBD5E1;
      background: rgba(255, 255, 255, 0.06);
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .magazine-top-strip {
      padding: 6px 14px;
      background: rgba(245, 158, 11, 0.08);
      border-bottom: 1px solid rgba(245, 158, 11, 0.25);
    }

    .serialization-days-row {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      flex-wrap: wrap;
    }

    .day-slot {
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-dim);
      font-weight: 600;
    }

    .day-slot-active {
      background: rgba(245, 158, 11, 0.25);
      border: 1px solid rgba(245, 158, 11, 0.6);
      color: #FBBF24;
      font-weight: 800;
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
    }

    .day-slot-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--neon-gold);
      margin-left: 6px;
    }

    .multilingual-showcase-panel {
      background: rgba(11, 15, 25, 0.85);
      border: 1px solid var(--border-neon);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .multilingual-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dim);
    }

    .engine-badge {
      font-size: 10px;
      font-weight: 800;
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.4);
      color: #22D3EE;
      padding: 1px 6px;
      border-radius: 4px;
    }

    .lang-pills-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .lang-pill {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #F8FAFC;
    }

    .lineup-works-summary {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* Zone 3: AI Star Cinema & Media Custom Styles */
    .cinema-21-9-marquee {
      position: relative;
      width: 100%;
      aspect-ratio: 21 / 9;
      min-height: 380px;
      overflow: hidden;
      background: #050810;
      border-bottom: 1px solid var(--border-neon);
      box-shadow: 0 0 50px rgba(6, 182, 212, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.9);
    }

    .cinema-marquee-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-card:hover .cinema-marquee-img {
      transform: scale(1.04);
    }

    .cinema-marquee-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 12, 20, 0.2) 0%, rgba(8, 12, 20, 0.85) 100%);
      pointer-events: none;
    }

    .cinema-anamorphic-flare {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(6, 182, 212, 0) 0%, rgba(6, 182, 212, 0.6) 50%, rgba(6, 182, 212, 0) 100%);
      pointer-events: none;
      box-shadow: 0 0 16px rgba(6, 182, 212, 0.8);
      z-index: 1;
    }

    .cinema-dolby-tags-row {
      position: absolute;
      bottom: 16px;
      left: 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      z-index: 2;
    }

    .dolby-tag {
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 6px;
      letter-spacing: 0.05em;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .dolby-cinema {
      background: rgba(245, 158, 11, 0.2);
      border: 1px solid rgba(245, 158, 11, 0.7);
      color: #FBBF24;
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    }

    .dolby-atmos {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #FFFFFF;
    }

    .dolby-4k {
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.5);
      color: #22D3EE;
    }

    .dolby-spatial {
      background: rgba(168, 85, 247, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.5);
      color: #C084FC;
    }

    .cinema-interactive-player-panel {
      background: rgba(11, 15, 25, 0.9);
      border: 1px solid var(--border-neon);
      border-radius: 14px;
      padding: 16px 18px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .player-top-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .player-status-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .player-status-text {
      font-size: 12px;
      font-weight: 700;
      color: #FFFFFF;
    }

    .player-badge-live {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #34D399;
    }

    /* Equalizer Visualizer */
    .eq-visualizer {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 20px;
    }

    .eq-bar {
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(180deg, #F59E0B, #EF4444);
    }

    .eq-bar-1 { animation: eq-dance-1 1s ease-in-out infinite; }
    .eq-bar-2 { animation: eq-dance-2 1.3s ease-in-out infinite; }
    .eq-bar-3 { animation: eq-dance-3 0.9s ease-in-out infinite; }
    .eq-bar-4 { animation: eq-dance-4 1.1s ease-in-out infinite; }
    .eq-bar-5 { animation: eq-dance-5 1.4s ease-in-out infinite; }

    @keyframes eq-dance-1 { 0%, 100% { height: 6px; } 50% { height: 18px; } }
    @keyframes eq-dance-2 { 0%, 100% { height: 16px; } 50% { height: 8px; } }
    @keyframes eq-dance-3 { 0%, 100% { height: 10px; } 50% { height: 20px; } }
    @keyframes eq-dance-4 { 0%, 100% { height: 18px; } 50% { height: 11px; } }
    @keyframes eq-dance-5 { 0%, 100% { height: 8px; } 50% { height: 17px; } }

    .player-controls-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .player-ctrl-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #F59E0B, #D97706);
      border: none;
      color: #080C14;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
      flex-shrink: 0;
    }

    .player-scrubber-wrap {
      flex: 1;
    }

    .player-scrubber-bar {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
    }

    .player-scrubber-progress {
      width: 62%;
      height: 100%;
      background: linear-gradient(90deg, #F59E0B, #06B6D4);
      border-radius: 3px;
    }

    .player-time-display {
      font-size: 11px;
      font-family: monospace;
      color: var(--text-dim);
      flex-shrink: 0;
    }

    .audio-tracklist-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .track-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 12px;
    }

    .track-active {
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(245, 158, 11, 0.35);
    }

    .track-num {
      font-family: monospace;
      color: var(--neon-gold);
      font-weight: 700;
      width: 20px;
    }

    .track-name {
      flex: 1;
      color: #FFFFFF;
      font-weight: 600;
    }

    .track-duration {
      font-family: monospace;
      color: var(--text-dim);
      font-size: 11px;
    }

    .track-playing-pill {
      font-size: 10px;
      font-weight: 800;
      color: #FBBF24;
      background: rgba(245, 158, 11, 0.2);
      padding: 1px 6px;
      border-radius: 4px;
    }

    .track-action-pill {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-dim);
      background: rgba(255, 255, 255, 0.05);
      padding: 1px 6px;
      border-radius: 4px;
    }

    /* Common Card Details */
    .card-synopsis-box {
      border-left: 3px solid #2563EB;
      padding: 8px 12px;
      border-radius: 0 8px 8px 0;
      margin-bottom: 12px;
      background: rgba(17, 24, 39, 0.6);
    }

    .synopsis-cyan { border-left-color: var(--neon-cyan); }
    .synopsis-emerald { border-left-color: var(--neon-emerald); }
    .synopsis-purple { border-left-color: var(--neon-purple); }
    .synopsis-amber { border-left-color: var(--neon-gold); }
    .synopsis-cinema { border-left-color: #EF4444; }

    .synopsis-text {
      font-size: 12px;
      font-weight: 500;
      color: #E2E8F0;
      line-height: 1.55;
      word-break: keep-all;
    }

    .card-description {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 14px;
      word-break: keep-all;
    }

    .card-highlights-section {
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid var(--border-neon);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 14px;
    }

    .highlights-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    .highlights-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .highlight-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: #CBD5E1;
      line-height: 1.45;
    }

    .highlight-check {
      flex-shrink: 0;
      margin-top: 2px;
    }

    .card-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: auto;
      padding-top: 6px;
    }

    .tag-chip {
      font-size: 11px;
      font-weight: 600;
      color: #94A3B8;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 2px 8px;
      border-radius: 6px;
    }

    /* Card Bottom Action Area */
    .card-bottom {
      padding: 14px 22px;
      border-top: 1px solid var(--border-neon);
      background: rgba(8, 12, 20, 0.6);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .card-domain-badge {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      letter-spacing: -0.01em;
      font-family: monospace;
    }

    .btn-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      color: #FFFFFF;
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
      transition: all 0.2s ease;
      white-space: nowrap;
      cursor: pointer;
    }

    .btn-action:hover {
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
      transform: translateY(-2px);
      border-color: rgba(6, 182, 212, 0.8);
    }

    .btn-arcade {
      background: linear-gradient(135deg, #1D4ED8, #0284C7);
    }

    .btn-novel {
      background: linear-gradient(135deg, #6D28D9, #4F46E5);
    }

    .btn-cartoon {
      background: linear-gradient(135deg, #D97706, #EA580C);
    }

    .btn-cartoon.btn-cartoon-locked-admin {
      background: linear-gradient(135deg, #DC2626, #EA580C) !important;
      box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    }

    .btn-cartoon.btn-cartoon-public-ep1 {
      background: linear-gradient(135deg, #059669, #0D9488) !important;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
    }

    .btn-cinema {
      background: linear-gradient(135deg, #DC2626, #BE123C);
    }

    /* Empty Search State */
    .no-results-panel {
      text-align: center;
      padding: 60px 20px;
      background: var(--bg-surface);
      border: 1px solid var(--border-neon);
      border-radius: 16px;
      margin-top: 20px;
      box-shadow: var(--shadow-obsidian);
    }

    .no-results-icon {
      width: 48px;
      height: 48px;
      color: var(--text-dim);
      margin: 0 auto 12px;
    }

    .no-results-title {
      font-size: 17px;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 6px;
    }

    .no-results-desc {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .btn-reset-filter {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #1E293B;
      color: #F8FAFC;
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
    }

    .btn-reset-filter:hover {
      background: #334155;
      border-color: var(--neon-cyan);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    /* Obsidian Portal Footer */
    .portal-footer {
      margin-top: auto;
      background: #050810;
      border-top: 1px solid var(--border-neon);
      padding: 36px 24px 32px;
    }

    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
    }

    @media (min-width: 768px) {
      .footer-inner {
        flex-direction: row;
      }
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: center;
    }

    @media (min-width: 768px) {
      .footer-brand { text-align: left; }
    }

    .footer-brand-title {
      font-size: 17px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: -0.03em;
    }

    .footer-brand-title span { color: var(--neon-cyan); }

    .footer-copyright {
      font-size: 12px;
      color: var(--text-dim);
    }

    .footer-links {
      display: flex;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .footer-links a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s ease;
      cursor: pointer;
    }

    .footer-links a:hover {
      color: var(--neon-cyan);
    }

    /* Responsive Breakdown */
    @media (min-width: 769px) {
      .gnb-nav {
        flex-shrink: 0;
        overflow-x: visible;
      }
    }

    @media (max-width: 1280px) {
      .gnb-inner {
        padding: 0 16px;
        gap: 6px;
      }
      .gnb-left-group {
        gap: 10px;
      }
      .gnb-tab-btn {
        padding: 6px 7px;
        font-size: 12px;
        gap: 4px;
      }
      .gnb-search-wrap {
        width: 135px;
        flex: 0 1 135px;
        min-width: 90px;
      }
      .btn-admin-pill .btn-admin-text {
        display: none;
      }
      .btn-admin-pill {
        padding: 4px 8px;
      }
      .user-name-badge {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    @media (max-width: 1180px) {
      .gnb-search-wrap {
        display: none;
      }
      .gnb-nav {
        gap: 2px;
      }
      .gnb-tab-btn {
        padding: 5px 7px;
        font-size: 12px;
        gap: 4px;
      }
      .user-name-badge {
        max-width: 75px;
      }
      .btn-studio-pill,
      .btn-admin-hub-pill {
        padding: 0 7px;
      }
      .btn-point-pill {
        padding: 0 7px;
      }
    }

    @media (max-width: 992px) {
      .gnb-search-wrap {
        display: none;
      }
      .btn-fav-pill {
        display: none;
      }
      .btn-studio-pill .btn-studio-text,
      .btn-admin-hub-pill .btn-studio-text {
        display: none;
      }
      .gnb-tab-btn {
        padding: 5px 6px;
        font-size: 11.5px;
        gap: 3px;
      }
      .user-profile-group {
        gap: 4px;
      }
    }

    @media (max-width: 860px) {
      .zone-arcade-grid, .zone-story-grid {
        grid-template-columns: 1fr;
      }
      .cinema-21-9-marquee {
        aspect-ratio: 16 / 9;
        min-height: 220px;
      }
      .gnb-search-wrap {
        display: none;
      }
      .btn-utility .util-text {
        display: none;
      }
      .btn-utility {
        padding: 6px 8px;
      }
    }

    @media (max-width: 768px) {
      .header-gnb {
        height: auto;
        min-height: 84px;
        max-height: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        background: rgba(8, 12, 20, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0;
      }
      .gnb-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        height: auto;
        padding: 8px 12px 6px;
        gap: 0;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
      }
      .gnb-left-group {
        display: contents;
      }
      .brand-group {
        order: 1;
        gap: 6px;
        flex-shrink: 0;
        height: 32px;
        display: flex;
        align-items: center;
      }
      .brand-symbol {
        width: 28px;
        height: 28px;
        font-size: 13px;
        border-radius: 7px;
      }
      .brand-name {
        font-size: 15px;
        font-weight: 900;
        letter-spacing: -0.01em;
      }
      .brand-name span {
        font-size: 9px;
        padding: 1px 4px;
        margin-left: 3px;
      }
      .brand-sub {
        display: none;
      }
      .gnb-right-group {
        order: 2;
        gap: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 32px;
      }
      .gnb-lang-wrap {
        display: flex;
        align-items: center;
      }
      .lang-select-box {
        padding: 3px 19px 3px 7px;
        font-size: 11px;
        font-weight: 700;
        height: 28px;
        width: auto;
        min-width: 68px;
        max-width: 84px;
        border-radius: 7px;
        color-scheme: dark;
        background-color: rgba(15, 23, 42, 0.92);
        border: 1px solid rgba(6, 182, 212, 0.38);
        color: #f8fafc;
        background-position: right 5px center;
        text-overflow: clip;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }
      .gnb-admin-controls {
        display: inline-flex;
        align-items: center;
      }
      .btn-admin-pill {
        padding: 4px 8px;
        font-size: 12px;
        height: 28px;
        border-radius: 7px;
        min-width: 28px;
        justify-content: center;
        gap: 3px;
        background: rgba(245, 158, 11, 0.15);
        border: 1px solid rgba(245, 158, 11, 0.35);
        color: #f59e0b;
      }
      .btn-admin-pill .btn-admin-text {
        display: none;
      }
      .gnb-user-widget {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }
      .btn-auth-pill {
        padding: 0 10px;
        font-size: 11.5px;
        font-weight: 700;
        height: 28px;
        box-sizing: border-box;
        line-height: 1;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff;
        border: 1px solid rgba(16, 185, 129, 0.4);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
      }
      .btn-auth-pill .btn-auth-text {
        font-size: 11.5px;
        line-height: 1;
        white-space: nowrap;
      }
      .user-profile-group {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }
      .user-name-badge {
        font-size: 11.5px;
        font-weight: 700;
        height: 28px;
        width: 28px;
        min-width: 28px;
        box-sizing: border-box;
        line-height: 1;
        padding: 0;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
        cursor: pointer;
      }
      .user-name-badge .user-name-text {
        display: none;
      }
      .user-name-badge .user-avatar-img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
      }
      .btn-point-pill {
        font-size: 11.5px;
        font-weight: 700;
        padding: 0 7px;
        height: 28px;
        box-sizing: border-box;
        line-height: 1;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .btn-fav-pill {
        display: none;
      }
      .btn-studio-pill {
        font-size: 11.5px;
        font-weight: 700;
        padding: 0 7px;
        height: 28px;
        box-sizing: border-box;
        line-height: 1;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .btn-studio-pill .btn-studio-text,
      .btn-admin-hub-pill .btn-studio-text {
        display: none;
      }
      .btn-myinfo-pill,
      .btn-myinfo,
      .btn-logout-pill,
      .btn-logout {
        font-size: 11.5px;
        font-weight: 700;
        padding: 0 8px;
        height: 28px;
        min-height: 28px;
        min-width: 64px;
        box-sizing: border-box;
        line-height: 1;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      }
      .gnb-search-wrap,
      .gnb-utility-controls {
        display: none;
      }

      /* Row 2: Full-width Mobile GNB Nav Tabs - Symmetrical 6-Column Grid */
      .gnb-nav {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
        min-width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
        overflow: hidden;
        padding: 5px 0 2px;
        margin-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .gnb-nav::-webkit-scrollbar {
        display: none;
      }
      .gnb-tab-btn {
        width: 100%;
        min-width: 0;
        padding: 4px 1px;
        font-size: 9.5px;
        font-weight: 700;
        gap: 1.5px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        transition: all 0.15s ease;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      .gnb-tab-btn .tab-emoji {
        font-size: 11px;
        line-height: 1;
        flex-shrink: 0;
      }
      .gnb-tab-btn .tab-text {
        font-size: 9.5px;
        line-height: 1.15;
        letter-spacing: -0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      html[lang="ja"] .gnb-tab-btn .tab-text {
        font-size: 8.6px;
        letter-spacing: -0.05em;
      }
      .gnb-tab-btn.active {
        color: #38bdf8;
        background: rgba(14, 165, 233, 0.18);
        border-color: rgba(14, 165, 233, 0.5);
        font-weight: 700;
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.25);
      }
      .app-viewport-container {
        flex: 1 1 0%;
        min-height: 0;
        height: auto;
      }
      .shell-view-home,
      .shell-view-game,
      .shell-view-legal,
      .shell-view-community,
      .shell-view-service {
        height: 100%;
      }

      /* Notice Bar on Mobile */
      .portal-notice-bar {
        margin: 8px auto 0;
        padding: 0 10px;
      }
      .notice-bar-inner {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 10px;
      }
      .notice-badge-box {
        padding: 3px 6px;
        font-size: 10px;
        gap: 3px;
        border-radius: 5px;
      }
      .notice-ticker-window {
        flex: 1;
        min-width: 0;
        height: 20px;
      }
      .notice-ticker-item {
        font-size: 11.5px;
        gap: 6px;
      }
      .btn-notice-action {
        padding: 3px 8px;
        font-size: 10px;
        border-radius: 6px;
      }

      /* Portal Hero Row & Billboard Showcase Card */
      .portal-hero-row {
        margin: 10px auto 0;
        padding: 0 10px;
        gap: 12px;
        grid-template-columns: 1fr;
      }
      .billboard-showcase-card {
        padding: 16px 14px 12px;
        border-radius: 14px;
        min-height: auto;
      }
      .billboard-badge-row {
        margin-bottom: 8px;
        gap: 5px;
      }
      .billboard-chip {
        font-size: 10px;
        padding: 3px 7px;
        border-radius: 5px;
      }
      .billboard-title {
        font-size: 18px;
        line-height: 1.25;
        margin-bottom: 6px;
      }
      .billboard-desc {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .billboard-cta-row {
        margin-bottom: 14px;
        gap: 8px;
      }
      .btn-billboard-primary {
        padding: 8px 16px;
        font-size: 12px;
        border-radius: 8px;
      }
      .btn-billboard-secondary {
        padding: 8px 12px;
        font-size: 11.5px;
        border-radius: 8px;
      }
      .billboard-inner {
        padding: 0;
      }
      .billboard-selector-bar {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 10px 0 0 0;
        margin: 10px 0 0 0;
        width: 100%;
      }
      .billboard-selector-bar::-webkit-scrollbar {
        display: none;
      }
      .billboard-selector-btn {
        min-width: 105px;
        flex-shrink: 0;
        padding: 6px 10px;
        border-radius: 8px;
      }
      .sel-icon {
        font-size: 14px;
      }
      .sel-title {
        font-size: 11px;
      }
      .sel-sub {
        font-size: 9px;
      }

      /* Portal User Hub on Mobile */
      .portal-user-hub {
        padding: 14px;
        border-radius: 14px;
      }
      .hub-head-title {
        font-size: 13.5px;
      }
      .hub-user-greeting {
        font-size: 13px;
      }
      .hub-user-sub {
        font-size: 11px;
      }
      .btn-hub-auth {
        font-size: 11px;
        padding: 6px 12px;
      }
      .hub-points-val {
        font-size: 24px;
      }
      .btn-hub-daily-claim {
        padding: 10px 14px;
        font-size: 12.5px;
      }
      .btn-hub-bookmarks, .btn-hub-ranking {
        font-size: 11.5px;
        padding: 8px 12px;
      }

      /* Filter Section & Tabs on Mobile */
      .filter-section {
        padding: 10px 10px 6px;
      }
      .filter-bar {
        padding: 6px 8px;
        border-radius: 10px;
        gap: 6px;
        flex-wrap: wrap;
        overflow-x: visible;
        scrollbar-width: none;
      }
      .filter-bar::-webkit-scrollbar {
        display: none;
      }
      .filter-meta-text {
        display: none;
      }
      .category-tabs-group {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex: 1 1 0%;
        min-width: 0;
        width: auto;
        padding-bottom: 2px;
      }
      #view-game .filter-bar .category-tabs-group {
        flex: 1 1 100%;
        width: 100%;
      }
      .category-tabs-group::-webkit-scrollbar {
        display: none;
      }
      .tab-btn {
        padding: 5px 9px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* Content Cards & Netflix Row Headers on Mobile */
      .main-content {
        padding: 10px 10px 64px;
      }
      .netflix-row-header {
        gap: 8px;
        padding-bottom: 8px;
      }
      .netflix-row-title-wrap {
        gap: 10px;
        flex: 1 1 180px;
      }
      .netflix-cat-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
        border-radius: 10px;
      }
      .netflix-row-title {
        font-size: 17px;
      }
      .netflix-row-tagline {
        font-size: 11.5px;
        line-height: 1.35;
      }
      .netflix-row-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
      }
      .netflix-row-actions .netflix-row-more-link {
        margin-left: auto;
      }
      .btn-row-horror,
      .btn-row-tutorial {
        padding: 5px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .netflix-row-more-link {
        padding: 5px 10px;
        font-size: 11.5px;
        white-space: nowrap;
      }
      .rail-btn {
        width: 30px;
        height: 30px;
        font-size: 18px;
      }
      .horror-spotlight-banner {
        padding: 14px;
        gap: 12px;
      }
      .horror-spotlight-actions {
        width: 100%;
      }
      .horror-spotlight-actions button {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        padding: 9px 12px;
      }
      .card-content {
        padding: 14px;
      }
      .card-bottom {
        padding: 10px 14px;
      }
    }

    /* Daily Recommended Webtoon Curator Dock & Floating Pill */
    #daily-webtoon-mascot-widget {
      position: fixed;
      right: 22px;
      bottom: 24px;
      z-index: 8800;
      width: 320px;
      background: rgba(11, 15, 25, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0.22s ease;
    }

    #daily-webtoon-mascot-fab {
      position: fixed;
      right: 22px;
      bottom: 24px;
      z-index: 8800;
      background: rgba(11, 15, 25, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: #f8fafc;
      border: 1px solid rgba(56, 189, 248, 0.35);
      border-radius: 999px;
      padding: 6px 10px 6px 8px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0.22s ease;
    }

    #btn-mascot-fab-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      font-size: 10px;
      line-height: 1;
      margin-left: 2px;
      transition: background 0.15s ease, color 0.15s ease;
    }

    #btn-mascot-fab-close:hover {
      background: rgba(239, 68, 68, 0.25);
      color: #fca5a5;
    }

    @media (max-width: 768px) {
      #daily-webtoon-mascot-widget {
        right: 10px;
        left: 10px;
        bottom: 12px;
        width: auto;
        max-width: calc(100vw - 20px);
      }
      #daily-webtoon-mascot-fab {
        right: 12px;
        bottom: 12px;
        padding: 5px 10px 5px 7px;
        font-size: 11px;
      }
    }

    /* Auto-hide floating mascot widget/FAB & ambient HUD when footer is in view so footer links are never obstructed */
    body.mascot-footer-visible #daily-webtoon-mascot-widget,
    body.mascot-footer-visible #daily-webtoon-mascot-fab,
    body.mascot-footer-visible .ambient-mini-hud {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(18px) scale(0.95);
    }

    /* Hide Floating Daily Webtoon Mascot Widget & FAB when inside Games or non-Home views */
    body[data-active-tab]:not([data-active-tab="home"]) #daily-webtoon-mascot-widget,
    body[data-active-tab]:not([data-active-tab="home"]) #daily-webtoon-mascot-fab {
      display: none;
    }

    @media (max-width: 480px) {
      .brand-name span {
        display: none;
      }
      .btn-point-pill {
        display: none;
      }
      .notice-badge-box .notice-tag-text {
        display: none;
      }
      .btn-fav-pill {
        display: none;
      }
    }

    /* Ambient Soundscape Lounge & GNB Styles */
    .gnb-ambient-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 9999px;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    .gnb-ambient-btn:hover {
      background: rgba(56, 189, 248, 0.15);
      border-color: rgba(56, 189, 248, 0.5);
      color: #f0f9ff;
    }
    .gnb-ambient-btn.is-playing {
      background: rgba(14, 165, 233, 0.2);
      border-color: #38bdf8;
      color: #38bdf8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    }
    .ambient-wave-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #64748b;
      transition: background 0.3s;
    }
    .ambient-wave-dot.playing {
      background: #38bdf8;
      box-shadow: 0 0 8px #38bdf8;
      animation: ambientPulse 1.4s ease-in-out infinite alternate;
    }
    @keyframes ambientPulse {
      0% { transform: scale(0.85); opacity: 0.7; }
      100% { transform: scale(1.3); opacity: 1; }
    }

    /* Floating Mini HUD */
    .ambient-mini-hud {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 920;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: rgba(15, 23, 42, 0.94);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(56, 189, 248, 0.3);
      border-radius: 9999px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
      transition: all 0.3s ease;
    }
    .ambient-mini-hud.hidden {
      display: none;
    }
    .ambient-hud-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #1e293b;
      border: 1px solid #334155;
      color: #38bdf8;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ambient-hud-btn:hover {
      background: #0284c7;
      color: #fff;
    }
    .ambient-hud-info {
      cursor: pointer;
      min-width: 110px;
    }
    .ambient-hud-label {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: #38bdf8;
    }
    .ambient-hud-title {
      font-size: 12px;
      font-weight: 600;
      color: #f1f5f9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
    }

    /* Ambient Modal Overlay */
    .ambient-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1050;
      background: rgba(0, 0, 0, 0.78);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .ambient-modal-container {
      width: 100%;
      max-width: 640px;
      max-height: 90vh;
      overflow-y: auto;
      background: #0f172a;
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.12);
      color: #f8fafc;
      animation: ambientModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes ambientModalFadeIn {
      from { opacity: 0; transform: scale(0.96) translateY(10px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .ambient-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(51, 65, 85, 0.6);
      padding-bottom: 16px;
    }
    .ambient-modal-title-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ambient-modal-title-icon {
      font-size: 28px;
    }
    .ambient-modal-title {
      font-size: 18px;
      font-weight: 700;
      color: #f8fafc;
      margin: 0;
    }
    .ambient-modal-subtitle {
      font-size: 12px;
      color: #94a3b8;
      margin: 2px 0 0;
    }
    .ambient-modal-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 20px;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      transition: all 0.2s;
    }
    .ambient-modal-close:hover {
      background: #1e293b;
      color: #f8fafc;
    }

    /* Visualizer & Master Bar */
    .ambient-visualizer-bar {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 20px;
    }
    .ambient-canvas {
      width: 100%;
      height: 48px;
      border-radius: 8px;
      background: #090d16;
      display: block;
      margin-bottom: 14px;
    }
    .ambient-master-controls {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .ambient-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      background: linear-gradient(135deg, #0284c7, #0369a1);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ambient-btn-primary:hover {
      background: linear-gradient(135deg, #38bdf8, #0284c7);
      box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);
    }
    .ambient-master-vol-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 160px;
    }
    .ambient-vol-val {
      font-size: 12px;
      font-weight: 700;
      color: #38bdf8;
      min-width: 36px;
      text-align: right;
    }
    .ambient-btn-secondary {
      padding: 8px 14px;
      background: #334155;
      border: 1px solid #475569;
      color: #cbd5e1;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ambient-btn-secondary:hover {
      background: #475569;
      color: #fff;
    }

    /* Sections */
    .ambient-section {
      margin-bottom: 20px;
    }
    .ambient-section-title {
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 10px;
    }

    /* Presets Grid */
    .ambient-presets-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
      gap: 8px;
    }
    .ambient-preset-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .ambient-preset-card:hover {
      border-color: rgba(56, 189, 248, 0.4);
      background: #253349;
    }
    .ambient-preset-card.active {
      border-color: #38bdf8;
      background: rgba(14, 165, 233, 0.15);
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
    }
    .ambient-preset-icon {
      font-size: 22px;
      margin-bottom: 4px;
    }
    .ambient-preset-name {
      font-size: 12px;
      font-weight: 700;
      color: #f1f5f9;
      margin-bottom: 2px;
    }
    .ambient-preset-desc {
      font-size: 10px;
      color: #94a3b8;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }

    /* 6-Track Mixer Grid */
    .ambient-mixer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 16px;
    }
    @media (max-width: 500px) {
      .ambient-mixer-grid {
        grid-template-columns: 1fr;
      }
    }
    .ambient-track-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ambient-track-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #cbd5e1;
    }
    .ambient-track-val {
      font-size: 11px;
      color: #38bdf8;
      font-weight: 700;
    }

    /* Range Sliders */
    .ambient-range-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #334155;
      outline: none;
      transition: background 0.2s;
    }
    .ambient-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #38bdf8;
      cursor: pointer;
      box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
      transition: transform 0.15s;
    }
    .ambient-range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    /* Sleep Timer Footer */
    .ambient-modal-footer {
      border-top: 1px solid rgba(51, 65, 85, 0.6);
      padding-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .ambient-timer-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .ambient-timer-title {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
    }
    .ambient-timer-buttons {
      display: flex;
      gap: 6px;
    }
    .ambient-timer-btn {
      padding: 5px 10px;
      background: #1e293b;
      border: 1px solid #334155;
      color: #94a3b8;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ambient-timer-btn:hover {
      border-color: #475569;
      color: #f1f5f9;
    }
    .ambient-timer-btn.active {
      background: rgba(14, 165, 233, 0.2);
      border-color: #38bdf8;
      color: #38bdf8;
    }
    .ambient-sleep-display {
      font-size: 12px;
      font-weight: 700;
      color: #f59e0b;
    }
    .ambient-sleep-display.hidden {
      display: none;
    }

    /* =========================================================================
       21-SERVICE REAL-TIME RANKING HUB (서비스별 실시간 랭킹 허브)
       ========================================================================= */
    .ranking-hub-zone {
      margin-top: 28px;
      background: linear-gradient(165deg, rgba(15, 23, 42, 0.92) 0%, rgba(9, 13, 24, 0.96) 100%);
      border: 1px solid rgba(56, 189, 248, 0.24);
      border-radius: 20px;
      padding: 24px 26px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      position: relative;
      overflow: hidden;
    }
    .ranking-hub-Header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }
    .ranking-hub-group-pills {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ranking-group-pill {
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      background: rgba(15, 23, 42, 0.75);
      color: #cbd5e1;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .ranking-group-pill:hover {
      border-color: rgba(56, 189, 248, 0.55);
      color: #f8fafc;
    }
    .ranking-group-pill.active {
      background: linear-gradient(135deg, #0284c7, #2563eb);
      border-color: #38bdf8;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
    }
    .ranking-service-tabs-rail {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 2px 12px 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(56, 189, 248, 0.35) rgba(15, 23, 42, 0.4);
    }
    .ranking-svc-tab {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: rgba(30, 41, 59, 0.65);
      color: #cbd5e1;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.18s ease;
      flex-shrink: 0;
    }
    .ranking-svc-tab:hover {
      background: rgba(51, 65, 85, 0.85);
      border-color: rgba(56, 189, 248, 0.45);
      color: #ffffff;
      transform: translateY(-1px);
    }
    .ranking-svc-tab.active {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(99, 102, 241, 0.32));
      border-color: #38bdf8;
      color: #ffffff;
      box-shadow: 0 0 16px rgba(56, 189, 248, 0.28);
    }
    .ranking-svc-tab .svc-tab-emoji {
      font-size: 15px;
    }
    .ranking-active-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin: 12px 0 16px 0;
      padding: 16px 20px;
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
      border: 1px solid rgba(56, 189, 248, 0.22);
    }
    .ranking-active-info {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .ranking-active-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: rgba(14, 165, 233, 0.16);
      border: 1px solid rgba(56, 189, 248, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .ranking-active-title {
      font-size: 18px;
      font-weight: 800;
      color: #f8fafc;
      margin: 0 0 4px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ranking-active-metric {
      font-size: 12.5px;
      color: #94a3b8;
      font-weight: 600;
    }
    .ranking-my-status-box {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .ranking-my-badge {
      padding: 8px 14px;
      border-radius: 10px;
      background: rgba(245, 158, 11, 0.14);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
      font-size: 12.5px;
      font-weight: 700;
    }
    .btn-ranking-launch {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      border-radius: 10px;
      border: 1px solid rgba(56, 189, 248, 0.5);
      background: linear-gradient(135deg, #0284c7, #4f46e5);
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .btn-ranking-launch:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
    }
    .ranking-table-wrap {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 10px;
    }
    .ranking-entry-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.78);
      border: 1px solid rgba(148, 163, 184, 0.15);
      transition: all 0.16s ease;
    }
    .ranking-entry-card:hover {
      border-color: rgba(56, 189, 248, 0.4);
      background: rgba(30, 41, 59, 0.85);
    }
    .ranking-entry-card.rank-top-1 {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(15, 23, 42, 0.88));
      border-color: rgba(245, 158, 11, 0.48);
    }
    .ranking-entry-card.rank-top-2 {
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.16), rgba(15, 23, 42, 0.88));
      border-color: rgba(203, 213, 225, 0.4);
    }
    .ranking-entry-card.rank-top-3 {
      background: linear-gradient(135deg, rgba(217, 119, 6, 0.14), rgba(15, 23, 42, 0.88));
      border-color: rgba(217, 119, 6, 0.4);
    }
    .ranking-entry-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .ranking-rank-medal {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      background: rgba(30, 41, 59, 0.9);
      color: #94a3b8;
      border: 1px solid rgba(148, 163, 184, 0.25);
      flex-shrink: 0;
    }
    .rank-top-1 .ranking-rank-medal {
      background: rgba(245, 158, 11, 0.25);
      color: #fbbf24;
      border-color: #f59e0b;
    }
    .rank-top-2 .ranking-rank-medal {
      background: rgba(203, 213, 225, 0.22);
      color: #f1f5f9;
      border-color: #cbd5e1;
    }
    .rank-top-3 .ranking-rank-medal {
      background: rgba(217, 119, 6, 0.22);
      color: #fdba74;
      border-color: #d97706;
    }
    .ranking-holder-col {
      min-width: 0;
    }
    .ranking-holder-name {
      font-size: 14px;
      font-weight: 800;
      color: #f8fafc;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ranking-holder-sub {
      font-size: 11.5px;
      color: #94a3b8;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ranking-score-col {
      text-align: right;
      flex-shrink: 0;
    }
    .ranking-score-val {
      font-size: 15px;
      font-weight: 900;
      color: #38bdf8;
    }
    .rank-top-1 .ranking-score-val {
      color: #fbbf24;
    }
    .ranking-score-sec {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }
    .ranking-overview-strip {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(148, 163, 184, 0.14);
    }
    .ranking-overview-title {
      font-size: 13px;
      font-weight: 800;
      color: #cbd5e1;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ranking-overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 8px;
    }
    .ranking-mini-card {
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(148, 163, 184, 0.14);
      cursor: pointer;
      transition: all 0.16s ease;
    }
    .ranking-mini-card:hover {
      border-color: rgba(56, 189, 248, 0.45);
      background: rgba(30, 41, 59, 0.85);
    }
    .ranking-mini-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 800;
      color: #e2e8f0;
      margin-bottom: 4px;
    }
    .ranking-mini-champ {
      font-size: 11.5px;
      color: #38bdf8;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body[data-active-tab]:not([data-active-tab="home"]) .ambient-mini-hud {
      display: none;
    }

    @media (max-width: 768px) {
      .ranking-hub-zone {
        padding: 16px 14px;
        border-radius: 16px;
        margin-bottom: 18px;
      }
      .ranking-table-wrap {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .ranking-entry-card {
        padding: 10px 12px;
        gap: 8px;
      }
      .ranking-overview-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
      }
      .ambient-mini-hud {
        bottom: 64px;
        right: 12px;
        padding: 6px 12px;
      }
      .horror-hud-bar {
        font-size: 11px;
        gap: 6px;
      }
      .horror-canvas-wrap {
        height: 240px;
      }
      .horror-controls-row #btn-horror-flashlight {
        flex: 1 1 100%;
        width: 100%;
      }
      .horror-controls-row button:not(#btn-horror-flashlight) {
        flex: 1 1 calc(50% - 6px);
      }
    }

    @media (max-width: 540px) {
      .support-cat-author-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .support-type-pills {
        flex-direction: column;
        gap: 6px;
      }
    }

    /* Novel-style Inline Search & Grid View Toggle for Portal & Game Tabs */
    .portal-inline-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .portal-inline-search-box {
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(15, 23, 42, 0.78);
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 999px;
      padding: 5px 12px;
      min-width: 240px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .portal-inline-search-box:focus-within {
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
    }

    .portal-inline-search-icon {
      font-size: 12px;
      color: #94a3b8;
      margin-right: 6px;
      pointer-events: none;
    }

    .portal-inline-search-input {
      background: transparent;
      border: none;
      outline: none;
      color: #f8fafc;
      font-size: 12.5px;
      font-weight: 500;
      width: 100%;
      font-family: inherit;
    }

    .portal-inline-search-input::placeholder {
      color: #64748b;
    }

    .portal-inline-search-clear {
      background: none;
      border: none;
      color: #94a3b8;
      cursor: pointer;
      font-size: 11px;
      padding: 0 2px;
      line-height: 1;
    }

    .portal-inline-search-clear:hover {
      color: #f8fafc;
    }

    .portal-view-mode-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(30, 41, 59, 0.78);
      border: 1px solid rgba(148, 163, 184, 0.26);
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      font-family: inherit;
      transition: all 0.2s ease;
    }

    .portal-view-mode-btn:hover {
      background: rgba(56, 189, 248, 0.16);
      border-color: rgba(56, 189, 248, 0.5);
      color: #f8fafc;
    }

    .portal-view-mode-btn.active {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(37, 99, 235, 0.28));
      border-color: #38bdf8;
      color: #38bdf8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.22);
    }

    .portal-zones-container.portal-grid-mode .rail-track,
    .portal-zones-container.portal-grid-mode .game-showcase-2col-track,
    #view-game .game-unified-grid-track,
    .game-unified-grid-track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      overflow: visible;
      flex-wrap: wrap;
      padding: 6px 0 8px 0;
      width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 1100px) {
      .portal-zones-container.portal-grid-mode .rail-track,
      .portal-zones-container.portal-grid-mode .game-showcase-2col-track,
      #view-game .game-unified-grid-track,
      .game-unified-grid-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
    }

    @media (max-width: 768px) {
      .portal-zones-container.portal-grid-mode .rail-track,
      .portal-zones-container.portal-grid-mode .game-showcase-2col-track,
      #view-game .game-unified-grid-track,
      .game-unified-grid-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
    }

    .portal-zones-container.portal-grid-mode .netflix-carousel-track.rail-track > .service-card,
    .portal-zones-container.portal-grid-mode .netflix-carousel-track.rail-track > .netflix-subcard,
    .portal-zones-container.portal-grid-mode .novel-bookshelf-track.rail-track > .novel-bookshelf-card,
    .portal-zones-container.portal-grid-mode .rail-track > *,
    .portal-zones-container.portal-grid-mode .game-showcase-2col-track > *,
    #view-game .game-unified-grid-track.game-widescreen-grid > .game-widescreen-card,
    #view-game .game-unified-grid-track > .netflix-subcard,
    .game-unified-grid-track > * {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      flex: 1 1 auto !important;
    }

    .portal-zones-container.portal-grid-mode .rail-btn-prev,
    .portal-zones-container.portal-grid-mode .rail-btn-next,
    .portal-zones-container.portal-grid-mode .netflix-row-more-link {
      display: none;
    }

    @media (max-width: 1100px) {
      .filter-bar .filter-meta-text {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .billboard-showcase-card {
        height: auto;
        min-height: 168px;
        max-height: none;
        padding: 14px 0;
      }
      .billboard-inner {
        padding: 0 12px;
      }
      .billboard-left-col {
        gap: 6px;
        width: 100%;
        max-width: 100%;
      }
      .billboard-chip {
        font-size: 10px;
        padding: 2px 8px;
      }
      .billboard-title {
        font-size: clamp(1.15rem, 4.8vw, 1.45rem);
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .billboard-desc {
        font-size: 12px;
        line-height: 1.4;
        height: auto;
        min-height: 0;
        max-height: 34px;
        -webkit-line-clamp: 2;
      }
      .billboard-cta-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
      }
      .btn-billboard-primary,
      .btn-billboard-secondary {
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
        flex: 0 1 auto;
        min-width: 0;
      }
      #view-home .filter-bar .portal-inline-search-wrap {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
      }
      #view-game .filter-bar .portal-inline-search-wrap {
        width: 100%;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 5px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }
      #view-game .filter-bar #btn-open-game-tutorial-modal {
        font-size: 11px;
        padding: 4px 10px;
        height: 28px;
        max-width: calc(100% - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #view-game .filter-bar #gameViewModeBtn,
      #view-home .filter-bar #portalViewModeBtn {
        height: 28px;
        padding: 0 10px;
        font-size: 11.5px;
        flex-shrink: 0;
      }
    }

    @media (max-width: 640px) {
      /* Mobile Grid Mode: Crisp 2-Column Layout */
      .portal-zones-container.portal-grid-mode .rail-track,
      .portal-zones-container.portal-grid-mode .game-showcase-2col-track,
      #view-game .game-unified-grid-track,
      .game-unified-grid-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      /* Mobile Rail Mode: 2-Card Default (for 1~2 card rows) + 2.34-Card Peek (for 3+ card scrollable rows) */
      #view-game .rail-track .game-widescreen-card,
      #view-game .game-showcase-2col-track .game-widescreen-card {
        width: calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
        flex: 0 0 calc((100% - 10px) / 2);
      }

      /* Compact Mobile Card Ergonomics for Both Rail & Grid */
      #zone-arcade .netflix-carousel-track .service-card,
      #zone-video .netflix-carousel-track .netflix-subcard,
      #zone-cartoon .netflix-carousel-track .netflix-subcard,
      #zone-novel .novel-bookshelf-card,
      .netflix-carousel-track .service-card,
      .netflix-carousel-track .netflix-subcard,
      .novel-bookshelf-track .novel-bookshelf-card,
      .game-widescreen-card {
        height: auto;
        min-height: 0;
      }

      #zone-video .netflix-carousel-track .netflix-subcard .card-media-banner,
      .netflix-carousel-track .video-cinema-card .card-media-banner {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
        max-height: none;
      }

      #zone-cartoon .netflix-carousel-track .netflix-subcard .card-media-banner,
      .netflix-subcard[data-category="cartoon"] .card-media-banner,
      .novel-bookshelf-card .card-media-banner {
        height: 156px;
        min-height: 156px;
        max-height: 156px;
      }

      /* Declutter mobile thumbnail overlays so 168px cards never collide */
      .card-media-banner .card-floating-category {
        display: none;
      }

      .card-media-banner .card-floating-badges .badge:nth-child(n+3) {
        display: none;
      }

      .card-media-banner .card-floating-badges .badge {
        font-size: 9.5px;
        padding: 2px 6px;
      }

      .card-media-banner .game-play-center-btn,
      .card-media-banner .video-play-center-btn {
        width: 30px;
        height: 30px;
      }

      .card-media-banner .game-play-center-btn svg,
      .card-media-banner .video-play-center-btn svg {
        width: 14px;
        height: 14px;
      }

      .card-media-banner .btn-card-fav {
        width: 26px;
        height: 26px;
        top: 6px;
        right: 6px;
        font-size: 12px;
      }

      .game-widescreen-card .card-media-banner .btn-card-fav,
      .game-arcade-card .card-media-banner .btn-card-fav,
      #zone-arcade .netflix-carousel-track .service-card .card-media-banner .btn-card-fav {
        top: auto;
        bottom: 6px;
        right: 6px;
      }

      .game-widescreen-card .game-specs-strip,
      .game-widescreen-card .game-spec-chips-row,
      .service-card .game-specs-strip,
      .service-card .game-spec-chips-row,
      .netflix-subcard .video-specs-strip {
        display: none;
      }

      #zone-arcade .netflix-carousel-track .service-card .card-content,
      .netflix-carousel-track .game-arcade-card .card-content,
      .game-widescreen-card .card-content,
      .netflix-carousel-track .service-card .card-content,
      .netflix-carousel-track .netflix-subcard .card-content {
        padding: 8px 10px 6px;
        gap: 4px;
      }

      #zone-arcade .netflix-carousel-track .service-card .card-title,
      .netflix-carousel-track .game-arcade-card .card-title,
      .game-widescreen-card .card-title,
      .netflix-carousel-track .service-card .card-title,
      .netflix-carousel-track .netflix-subcard .card-title {
        font-size: 13px;
        line-height: 1.25;
      }

      #zone-arcade .netflix-carousel-track .service-card .card-genre-pill,
      .netflix-carousel-track .game-arcade-card .card-genre-pill,
      .game-widescreen-card .card-genre-pill {
        font-size: 10px;
        padding: 1px 6px;
      }

      #zone-arcade .netflix-carousel-track .service-card .card-description,
      .netflix-carousel-track .game-arcade-card .card-description,
      .game-widescreen-card .card-description,
      #zone-video .netflix-carousel-track .netflix-subcard .card-description,
      .netflix-carousel-track .video-cinema-card .card-description,
      .netflix-carousel-track .service-card .card-description,
      .netflix-carousel-track .netflix-subcard .card-description {
        font-size: 11px;
        line-height: 1.35;
        height: auto;
        min-height: 0;
        max-height: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #zone-arcade .netflix-carousel-track .service-card .card-bottom,
      .netflix-carousel-track .game-arcade-card .card-bottom,
      .game-widescreen-card .card-bottom,
      .service-card[data-category="game"] .card-bottom,
      #zone-video .netflix-carousel-track .netflix-subcard .card-bottom,
      .netflix-carousel-track .video-cinema-card .card-bottom {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        flex: 0 0 36px;
        padding: 0 8px;
        gap: 6px;
      }

      .game-widescreen-card .card-bottom .game-live-status,
      .service-card .card-bottom .game-live-status,
      .netflix-subcard .card-bottom .video-live-status,
      .game-widescreen-card .card-bottom .card-meta,
      .service-card[data-category="game"] .card-bottom .card-meta,
      .novel-bookshelf-card .card-bottom .btn-novel-sub-bookshelf {
        display: none;
      }

      .game-widescreen-card .card-bottom .btn-action,
      .service-card[data-category="game"] .card-bottom .btn-action,
      #zone-arcade .netflix-carousel-track .service-card .btn-arcade,
      .netflix-carousel-track .game-arcade-card .btn-arcade,
      .game-widescreen-card .btn-arcade,
      #zone-video .netflix-carousel-track .netflix-subcard .btn-cinema,
      .netflix-carousel-track .video-cinema-card .btn-cinema {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        padding: 0 8px;
        font-size: 11.5px;
        justify-content: center;
      }
    }

    /* =========================================================================
       YouTube-Style Rail Sort Badge & PC/Mobile Rail/Grid Anti-Overflow Guard
       ========================================================================= */
    .rail-sort-mode-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 800;
      color: #c4b5fd;
      background: rgba(139, 92, 246, 0.14);
      border: 1px solid rgba(167, 139, 250, 0.35);
      padding: 0.14rem 0.52rem;
      border-radius: 999px;
      line-height: 1.2;
      white-space: nowrap;
      flex-shrink: 0;
      vertical-align: middle;
    }

    .netflix-row-header,
    .rail-header {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .netflix-row-title-line,
    .rail-title-wrap {
      display: flex;
      align-items: center;
      gap: 6px 8px;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }

    .netflix-row-title,
    .rail-title {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .service-card,
    .netflix-subcard,
    .novel-bookshelf-card,
    .game-widescreen-card {
      min-width: 0;
      box-sizing: border-box;
    }

    .service-card .btn-action,
    .netflix-subcard .btn-action,
    .novel-bookshelf-card .btn-action,
    .game-widescreen-card .btn-action {
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .rail-sort-mode-badge {
        font-size: 0.66rem;
        padding: 0.1rem 0.42rem;
      }
      .main-content,
      .game-shelves-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
      }
      .netflix-row-header {
        gap: 6px;
        padding: 0 2px 4px;
      }
      .netflix-row-actions .btn-row-more,
      .netflix-row-actions .btn-row-horror {
        font-size: 11px;
        padding: 4px 9px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /* =========================================================================
       Mobile Horizontal Rail Affordance System (3rd-Card Peek + Swipe Hint + Neon Progress)
       Ensures users on mobile immediately see additional cards & know to swipe horizontally
       ========================================================================= */
    .rail-mobile-swipe-hint,
    .rail-mobile-progress {
      display: none;
    }

    @keyframes swipeHintPulse {
      0%, 100% { transform: translateX(0); box-shadow: 0 0 8px rgba(6, 182, 212, 0.22); }
      50% { transform: translateX(2px); box-shadow: 0 0 14px rgba(56, 189, 248, 0.48); }
    }

    @media (max-width: 768px) {
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper {
        flex-direction: column;
        align-items: stretch;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-track,
      .portal-zones-container:not(.portal-grid-mode) .netflix-carousel-track,
      .portal-zones-container:not(.portal-grid-mode) .novel-bookshelf-track,
      .portal-zones-container:not(.portal-grid-mode) .game-showcase-2col-track {
        gap: 10px;
      }

      /* Non-scrollable 1~2 card rows: clean 2-column fit */
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper:not(.has-mobile-overflow) .rail-track > .service-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper:not(.has-mobile-overflow) .rail-track > .netflix-subcard,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper:not(.has-mobile-overflow) .rail-track > .novel-bookshelf-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper:not(.has-mobile-overflow) .rail-track > .game-widescreen-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
      }

      /* Scrollable 3+ card rows: 2.34 cards per viewport so ~34% of Card #3 clearly peeks on the right */
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-track,
      .portal-zones-container:not(.portal-grid-mode) .rail-track:has(> :nth-child(3)) {
        padding-right: 16px;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-track > .service-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-track > .netflix-subcard,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-track > .novel-bookshelf-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-track > .game-widescreen-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-track:has(> :nth-child(3)) > .service-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-track:has(> :nth-child(3)) > .netflix-subcard,
      .portal-zones-container:not(.portal-grid-mode) .rail-track:has(> :nth-child(3)) > .novel-bookshelf-card,
      .portal-zones-container:not(.portal-grid-mode) .rail-track:has(> :nth-child(3)) > .game-widescreen-card {
        flex: 0 0 calc((100% - 20px) / 2.34) !important;
        width: calc((100% - 20px) / 2.34) !important;
        min-width: calc((100% - 20px) / 2.34) !important;
        max-width: calc((100% - 20px) / 2.34) !important;
      }

      /* Unified Mobile Rail Scroll Buttons (32x52px across all 5 domains) */
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn,
      #view-game .rail-wrapper .rail-btn {
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        background: rgba(11, 15, 25, 0.9) !important;
        border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 10px rgba(6, 182, 212, 0.35) !important;
        opacity: 0.95 !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn-next,
      #view-game .rail-wrapper .rail-btn-next {
        right: 0 !important;
        border-radius: 8px !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn-prev,
      #view-game .rail-wrapper .rail-btn-prev {
        left: 0 !important;
        border-radius: 8px !important;
      }

      /* Interactive Swipe Hint Badge in section header */
      .portal-zones-container:not(.portal-grid-mode) .rail-mobile-swipe-hint {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 1.5px 7px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(37, 99, 235, 0.28));
        border: 1px solid rgba(56, 189, 248, 0.65);
        color: #7dd3fc;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        font-family: inherit;
        animation: swipeHintPulse 2.2s ease-in-out infinite;
      }

      /* Always-visible Neon Horizontal Scroll Progress Bar below scrollable rails */
      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper.has-mobile-overflow .rail-mobile-progress {
        display: block;
        position: relative;
        width: 100%;
        height: 4px;
        background: rgba(15, 23, 42, 0.88);
        border: 1px solid rgba(56, 189, 248, 0.22);
        border-radius: 999px;
        margin-top: 4px;
        overflow: hidden;
      }

      .rail-mobile-progress-thumb {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 30%;
        background: linear-gradient(90deg, #06b6d4, #3b82f6);
        border-radius: 999px;
        box-shadow: 0 0 8px rgba(6, 182, 212, 0.75);
        transition: left 0.12s ease-out, width 0.2s ease;
      }
    }

    /* =========================================================================
       KOXLO 5-Domain Unified Card, Banner, Content, Bottom & CTA Button System
       100% Identical Dimensions Across Webtoon, Novel, Video, Game, and Viz
       in Both Rail Mode and Grid Mode on PC (> 768px) and Mobile (<= 768px)
       ========================================================================= */
    /* Hide legacy sub-panels and duplicate chip rows in all rail & grid tracks */
    .game-unified-grid-track .console-status-strip,
    .game-unified-grid-track .magazine-top-strip,
    .game-unified-grid-track .bookshelf-spine-bar,
    .game-unified-grid-track .tactical-hud-panel,
    .game-unified-grid-track .story-lineup-panel,
    .game-unified-grid-track .multilingual-showcase-panel,
    .game-unified-grid-track .cinema-interactive-player-panel,
    .game-unified-grid-track .cinema-dolby-tags-row,
    .game-unified-grid-track .cinema-anamorphic-flare,
    .game-unified-grid-track .cinema-marquee-overlay,
    .game-unified-grid-track .card-synopsis-box,
    .game-unified-grid-track .card-highlights-section,
    .game-unified-grid-track .card-tag-list,
    .game-unified-grid-track .card-header-flex .card-icon-box,
    .game-unified-grid-track .card-header-flex .card-num-chip,
    .game-unified-grid-track .card-header-flex .card-sub-en,
    .portal-zones-container .video-specs-strip,
    .portal-zones-container .game-specs-strip,
    .portal-zones-container .game-spec-chips-row,
    #view-game .game-specs-strip,
    #view-game .game-spec-chips-row {
      display: none !important;
    }

    /* Hide secondary footer items so all 5 domains share an identical full-width CTA button */
    .portal-zones-container .card-bottom .card-domain-badge,
    .portal-zones-container .card-bottom .btn-novel-sub-bookshelf,
    .portal-zones-container .card-bottom .video-live-status,
    .portal-zones-container .card-bottom .game-live-status,
    .portal-zones-container .card-bottom .card-meta,
    #view-game .card-bottom .card-domain-badge,
    #view-game .card-bottom .game-live-status,
    #view-game .card-bottom .card-meta {
      display: none !important;
    }

    /* PC & Tablet (> 768px): Unified 350px Card / 176px Banner / 124px Content / 48px Bottom / 34px Button */
    @media (min-width: 769px) {
      #zone-cartoon .netflix-carousel-track .netflix-subcard,
      #zone-cartoon .netflix-subcard,
      #zone-novel .novel-bookshelf-card,
      #zone-video .netflix-carousel-track .netflix-subcard,
      #zone-video .video-cinema-card,
      #zone-arcade .netflix-carousel-track .service-card,
      #zone-arcade .game-arcade-card,
      #zone-viz .netflix-carousel-track .service-card,
      #zone-viz .game-arcade-card,
      #view-game .game-widescreen-card,
      #view-game .service-card,
      #view-game .netflix-subcard,
      .portal-zones-container .netflix-carousel-track > .service-card,
      .portal-zones-container .netflix-carousel-track > .netflix-subcard,
      .portal-zones-container .novel-bookshelf-track > .novel-bookshelf-card,
      .game-unified-grid-track > .game-widescreen-card,
      .game-unified-grid-track > .service-card,
      .game-unified-grid-track > .netflix-subcard {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
      }

      #zone-cartoon .card-media-banner,
      #zone-novel .card-media-banner,
      #zone-video .card-media-banner,
      #zone-arcade .card-media-banner,
      #zone-viz .card-media-banner,
      #view-game .card-media-banner,
      .portal-zones-container .card-media-banner,
      .game-unified-grid-track .card-media-banner {
        width: 100% !important;
        height: 176px !important;
        min-height: 176px !important;
        max-height: 176px !important;
        flex: 0 0 176px !important;
        aspect-ratio: auto !important;
      }

      #zone-cartoon .card-content,
      #zone-novel .card-content,
      #zone-video .card-content,
      #zone-arcade .card-content,
      #zone-viz .card-content,
      #view-game .card-content,
      .portal-zones-container .card-content,
      .game-unified-grid-track .card-content {
        padding: 12px 14px 8px !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .card-header-flex,
      #view-game .card-header-flex,
      .game-unified-grid-track .card-header-flex {
        margin: 0 !important;
        gap: 8px !important;
      }

      .portal-zones-container .card-title,
      #view-game .card-title,
      .game-unified-grid-track .card-title {
        font-size: 15.5px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .portal-zones-container .card-genre-pill,
      .portal-zones-container .novel-meta-pill-row,
      #view-game .card-genre-pill,
      .game-unified-grid-track .card-genre-pill {
        margin: 0 !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .card-genre-pill > span:first-child,
      #view-game .card-genre-pill > span:first-child,
      .game-unified-grid-track .card-genre-pill > span:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
      }

      .portal-zones-container .card-genre-pill > span:last-child,
      #view-game .card-genre-pill > span:last-child,
      .game-unified-grid-track .card-genre-pill > span:last-child {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn,
      #view-game .rail-wrapper .rail-btn {
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        border-radius: 10px !important;
        padding: 0 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        background: rgba(11, 15, 25, 0.88) !important;
        border: 1px solid rgba(56, 189, 248, 0.38) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65) !important;
        opacity: 0.9 !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn:hover,
      #view-game .rail-wrapper .rail-btn:hover {
        background: linear-gradient(135deg, #06b6d4, #2563eb) !important;
        border-color: #67e8f9 !important;
        color: #ffffff !important;
        box-shadow: 0 0 18px rgba(6, 182, 212, 0.65) !important;
        transform: translateY(-50%) scale(1.05) !important;
        opacity: 1 !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn-prev,
      #view-game .rail-wrapper .rail-btn-prev {
        left: 0 !important;
      }

      .portal-zones-container:not(.portal-grid-mode) .rail-wrapper .rail-btn-next,
      #view-game .rail-wrapper .rail-btn-next {
        right: 0 !important;
      }

      .portal-zones-container .novel-meta-pill-row {
        display: flex !important;
        width: 100% !important;
      }

      .portal-zones-container .card-description,
      #view-game .card-description,
      .game-unified-grid-track .card-description {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-height: 35px !important;
        flex: 0 0 auto !important;
      }

      #zone-cartoon .card-bottom,
      #zone-novel .card-bottom,
      #zone-video .card-bottom,
      #zone-arcade .card-bottom,
      #zone-viz .card-bottom,
      #view-game .card-bottom,
      .portal-zones-container .card-bottom,
      .game-unified-grid-track .card-bottom {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        padding: 0 14px !important;
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
      }

      #zone-cartoon .card-bottom .btn-action,
      #zone-novel .card-bottom .btn-action,
      #zone-video .card-bottom .btn-action,
      #zone-arcade .card-bottom .btn-action,
      #zone-viz .card-bottom .btn-action,
      #view-game .card-bottom .btn-action,
      .portal-zones-container .card-bottom .btn-action,
      .game-unified-grid-track .card-bottom .btn-action {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
      }
    }

    /* Mobile (<= 768px): Unified 224px Card / 96px Banner / 88px Content / 38px Bottom / 28px Button */
    @media (max-width: 768px) {
      #zone-cartoon .netflix-carousel-track .netflix-subcard,
      #zone-cartoon .netflix-subcard,
      #zone-novel .novel-bookshelf-card,
      #zone-video .netflix-carousel-track .netflix-subcard,
      #zone-video .video-cinema-card,
      #zone-arcade .netflix-carousel-track .service-card,
      #zone-arcade .game-arcade-card,
      #zone-viz .netflix-carousel-track .service-card,
      #zone-viz .game-arcade-card,
      #view-game .game-widescreen-card,
      #view-game .service-card,
      #view-game .netflix-subcard,
      .portal-zones-container .netflix-carousel-track > .service-card,
      .portal-zones-container .netflix-carousel-track > .netflix-subcard,
      .portal-zones-container .novel-bookshelf-track > .novel-bookshelf-card,
      .game-unified-grid-track > .game-widescreen-card,
      .game-unified-grid-track > .service-card,
      .game-unified-grid-track > .netflix-subcard {
        height: 224px !important;
        min-height: 224px !important;
        max-height: 224px !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
      }

      #zone-cartoon .card-media-banner,
      #zone-novel .card-media-banner,
      #zone-video .card-media-banner,
      #zone-arcade .card-media-banner,
      #zone-viz .card-media-banner,
      #view-game .card-media-banner,
      .portal-zones-container .card-media-banner,
      .game-unified-grid-track .card-media-banner {
        width: 100% !important;
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
        flex: 0 0 96px !important;
        aspect-ratio: auto !important;
      }

      #zone-cartoon .card-content,
      #zone-novel .card-content,
      #zone-video .card-content,
      #zone-arcade .card-content,
      #zone-viz .card-content,
      #view-game .card-content,
      .portal-zones-container .card-content,
      .game-unified-grid-track .card-content {
        padding: 8px 10px 6px !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .card-header-flex,
      #view-game .card-header-flex,
      .game-unified-grid-track .card-header-flex {
        margin: 0 !important;
        gap: 4px !important;
      }

      .portal-zones-container .card-title,
      #view-game .card-title,
      .game-unified-grid-track .card-title {
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .portal-zones-container .card-genre-pill,
      #view-game .card-genre-pill,
      .game-unified-grid-track .card-genre-pill {
        font-size: 10px !important;
        padding: 1.5px 6px !important;
        margin: 0 !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .card-genre-pill > span:first-child,
      #view-game .card-genre-pill > span:first-child,
      .game-unified-grid-track .card-genre-pill > span:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
      }

      .portal-zones-container .card-genre-pill > span:last-child,
      #view-game .card-genre-pill > span:last-child,
      .game-unified-grid-track .card-genre-pill > span:last-child {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
      }

      .portal-zones-container .novel-meta-pill-row {
        margin: 0 !important;
        gap: 4px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .novel-genre-badge,
      .portal-zones-container .novel-rating-chip {
        font-size: 10px !important;
        padding: 1px 5px !important;
        line-height: 1.2 !important;
        height: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
      }

      .portal-zones-container .novel-ep-chip,
      .portal-zones-container .novel-rating-chip.is-unrated {
        display: none !important;
      }

      .portal-zones-container .card-description,
      #view-game .card-description,
      .game-unified-grid-track .card-description {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-height: 30px !important;
        flex: 0 0 auto !important;
      }

      #zone-cartoon .card-bottom,
      #zone-novel .card-bottom,
      #zone-video .card-bottom,
      #zone-arcade .card-bottom,
      #zone-viz .card-bottom,
      #view-game .card-bottom,
      .portal-zones-container .card-bottom,
      .game-unified-grid-track .card-bottom {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        flex: 0 0 38px !important;
        padding: 0 8px !important;
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
      }

      #zone-cartoon .card-bottom .btn-action,
      #zone-novel .card-bottom .btn-action,
      #zone-video .card-bottom .btn-action,
      #zone-arcade .card-bottom .btn-action,
      #zone-viz .card-bottom .btn-action,
      #view-game .card-bottom .btn-action,
      .portal-zones-container .card-bottom .btn-action,
      .game-unified-grid-track .card-bottom .btn-action {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
      }
    }

    /* =========================================================================
       KOXLO Integrated Community & Notice Board (#view-community)
       PC (1536x730) & Mobile (390x844) Responsive Styles
       ========================================================================= */
    .shell-view-community {
      overflow-y: auto;
      overflow-x: hidden;
      display: none;
      flex-direction: column;
      scroll-behavior: smooth;
      background: var(--bg-page);
      width: 100%;
      height: 100%;
    }

    .comm-page-container {
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      padding: 20px 20px 56px;
      box-sizing: border-box;
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .comm-hero-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 24px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 88% 20%, rgba(6, 182, 212, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 15, 29, 0.98) 100%);
      border: 1px solid rgba(56, 189, 248, 0.28);
      box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.65);
    }

    .comm-hero-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }

    .comm-hero-badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.35);
      padding: 3px 10px;
      border-radius: 999px;
    }

    .comm-hero-title {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 900;
      color: #f8fafc;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }

    .comm-hero-desc {
      margin: 0;
      font-size: 0.88rem;
      color: #94a3b8;
      line-height: 1.45;
    }

    .comm-hero-right {
      flex-shrink: 0;
    }

    .btn-comm-write-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 11px 20px;
      border-radius: 11px;
      background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
      color: #ffffff;
      border: 1px solid rgba(125, 211, 252, 0.45);
      font-size: 0.9rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 6px 18px rgba(6, 182, 212, 0.32);
      transition: all 0.18s ease;
      white-space: nowrap;
    }

    .btn-comm-write-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(6, 182, 212, 0.45);
      filter: brightness(1.06);
    }

    /* Toolbar: Category Filter Pills + Sort + Search */
    .comm-toolbar-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 11px 15px;
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.78);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
    }

    .comm-cat-tabs {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .comm-cat-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 11px;
      border-radius: 10px;
      background: rgba(30, 41, 59, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.09);
      color: #cbd5e1;
      font-size: 0.81rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.16s ease;
      white-space: nowrap;
    }

    .comm-cat-tab-btn:hover {
      background: rgba(51, 65, 85, 0.78);
      color: #ffffff;
      border-color: rgba(56, 189, 248, 0.35);
    }

    .comm-cat-tab-btn.active {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.24), rgba(37, 99, 235, 0.28));
      border-color: #38bdf8;
      color: #ffffff;
      box-shadow: 0 0 14px rgba(56, 189, 248, 0.22);
    }

    .comm-cat-tab-btn .tab-count-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 18px;
      padding: 0 6px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      background: rgba(15, 23, 42, 0.75);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.28);
    }

    .comm-controls-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .comm-sort-group {
      display: inline-flex;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 9px;
      padding: 2px;
      gap: 2px;
    }

    .comm-sort-btn {
      padding: 5px 11px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: #94a3b8;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .comm-sort-btn.active {
      background: rgba(56, 189, 248, 0.2);
      color: #38bdf8;
    }

    .comm-search-box {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 11px;
      border-radius: 9px;
      background: rgba(9, 13, 24, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94a3b8;
      width: 210px;
      min-width: 175px;
    }

    .comm-search-box:focus-within {
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.16);
    }

    .comm-search-input {
      border: none;
      background: transparent;
      color: #f8fafc;
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
      width: 100%;
    }

    .comm-search-input::placeholder {
      color: #64748b;
    }

    /* Post List Rows */
    .comm-posts-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .comm-post-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 18px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.68);
      border: 1px solid rgba(255, 255, 255, 0.07);
      cursor: pointer;
      transition: all 0.16s ease;
    }

    .comm-post-row:hover {
      background: rgba(30, 41, 59, 0.82);
      border-color: rgba(56, 189, 248, 0.35);
      transform: translateY(-1px);
    }

    .comm-post-row.is-pinned-row {
      background: linear-gradient(90deg, rgba(6, 182, 212, 0.11) 0%, rgba(15, 23, 42, 0.82) 45%);
      border-color: rgba(56, 189, 248, 0.28);
    }

    .comm-row-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }

    .comm-row-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .comm-pin-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 800;
      background: rgba(245, 158, 11, 0.18);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, 0.4);
      white-space: nowrap;
    }

    .comm-cat-pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 9px;
      border-radius: 6px;
      font-size: 0.73rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .comm-cat-pill.pill-notice {
      background: rgba(239, 68, 68, 0.16);
      color: #fca5a5;
      border: 1px solid rgba(239, 68, 68, 0.38);
    }

    .comm-cat-pill.pill-strategy {
      background: rgba(56, 189, 248, 0.15);
      color: #7dd3fc;
      border: 1px solid rgba(56, 189, 248, 0.35);
    }

    .comm-cat-pill.pill-review {
      background: rgba(168, 85, 247, 0.16);
      color: #d8b4fe;
      border: 1px solid rgba(168, 85, 247, 0.35);
    }

    .comm-cat-pill.pill-free {
      background: rgba(16, 185, 129, 0.15);
      color: #6ee7b7;
      border: 1px solid rgba(16, 185, 129, 0.35);
    }

    .comm-row-title {
      margin: 0;
      font-size: 0.93rem;
      font-weight: 700;
      color: #f1f5f9;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }

    .comm-row-title-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .comm-comment-count-pill {
      color: #38bdf8;
      font-size: 0.8rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .comm-row-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      color: #94a3b8;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .comm-meta-author {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #cbd5e1;
      font-weight: 600;
    }

    .comm-author-admin-tag {
      display: inline-flex;
      align-items: center;
      padding: 1px 6px;
      border-radius: 5px;
      font-size: 0.68rem;
      font-weight: 800;
      background: rgba(6, 182, 212, 0.2);
      color: #38bdf8;
      border: 1px solid rgba(6, 182, 212, 0.4);
    }

    .comm-meta-sep {
      color: #475569;
    }

    .comm-meta-stat {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .comm-stat-like {
      color: #fda4af;
      font-weight: 700;
    }

    .comm-empty-state {
      padding: 48px 20px;
      text-align: center;
      background: rgba(15, 23, 42, 0.55);
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      color: #94a3b8;
    }

    .comm-empty-icon {
      font-size: 2rem;
      margin-bottom: 8px;
    }

    .comm-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
    }

    .comm-page-btn {
      min-width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #cbd5e1;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
    }

    .comm-page-btn.active {
      background: #0284c7;
      border-color: #38bdf8;
      color: #ffffff;
    }

    /* Post Detail View */
    .comm-detail-card {
      background: rgba(15, 23, 42, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      padding: 24px 28px;
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
    }

    .comm-detail-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
    }

    .btn-comm-back-list,
    .btn-comm-back-secondary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 9px;
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: #e2e8f0;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
    }

    .btn-comm-back-list:hover,
    .btn-comm-back-secondary:hover {
      background: rgba(51, 65, 85, 0.9);
      border-color: #38bdf8;
      color: #ffffff;
    }

    .btn-comm-del-post,
    .btn-comm-del-comment {
      padding: 5px 11px;
      border-radius: 7px;
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.38);
      color: #fca5a5;
      font-size: 0.76rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
    }

    .comm-detail-header {
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 20px;
    }

    .comm-detail-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .comm-detail-title {
      margin: 0 0 12px 0;
      font-size: 1.35rem;
      font-weight: 800;
      color: #f8fafc;
      line-height: 1.35;
    }

    .comm-detail-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 0.82rem;
      color: #94a3b8;
    }

    .comm-detail-author {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .comm-author-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #06b6d4, #3b82f6);
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .comm-detail-stats {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .comm-detail-stats strong {
      color: #e2e8f0;
    }

    .comm-detail-body {
      padding: 6px 0 24px;
      color: #e2e8f0;
      font-size: 0.96rem;
      line-height: 1.75;
      min-height: 120px;
    }

    .comm-body-p {
      margin: 0 0 10px 0;
      word-break: break-word;
    }

    .comm-body-spacer {
      height: 10px;
    }

    .comm-detail-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 0 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .btn-comm-like {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      border-radius: 999px;
      background: rgba(244, 63, 94, 0.14);
      border: 1px solid rgba(244, 63, 94, 0.4);
      color: #fda4af;
      font-size: 0.88rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.18s ease;
    }

    .btn-comm-like:hover,
    .btn-comm-like.liked {
      background: linear-gradient(135deg, #e11d48, #be123c);
      border-color: #fda4af;
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35);
    }

    .comm-like-pill {
      background: rgba(0, 0, 0, 0.3);
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.78rem;
    }

    /* Comments Section */
    .comm-comments-section {
      padding-top: 20px;
    }

    .comm-comments-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      font-weight: 800;
      color: #f8fafc;
      margin-bottom: 14px;
    }

    .comm-comments-badge {
      background: rgba(56, 189, 248, 0.18);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.35);
      padding: 1px 8px;
      border-radius: 999px;
      font-size: 0.76rem;
    }

    .comm-comments-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .comm-comments-empty {
      padding: 20px;
      text-align: center;
      color: #64748b;
      font-size: 0.84rem;
      background: rgba(9, 13, 24, 0.5);
      border-radius: 10px;
    }

    .comm-comment-item {
      padding: 12px 16px;
      border-radius: 11px;
      background: rgba(9, 13, 24, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .comm-comment-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .comm-comment-author-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    .comm-comment-author {
      font-size: 0.82rem;
      font-weight: 700;
      color: #e2e8f0;
    }

    .comm-comment-date {
      font-size: 0.74rem;
      color: #64748b;
    }

    .comm-comment-body {
      font-size: 0.88rem;
      color: #cbd5e1;
      line-height: 1.55;
      word-break: break-word;
    }

    .comm-comment-form {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }

    .comm-comment-textarea {
      flex: 1;
      background: rgba(9, 13, 24, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 10px;
      padding: 10px 14px;
      color: #f8fafc;
      font-size: 0.85rem;
      font-family: inherit;
      resize: vertical;
      outline: none;
    }

    .comm-comment-textarea:focus {
      border-color: #38bdf8;
    }

    .btn-comm-comment-submit {
      padding: 0 20px;
      border-radius: 10px;
      background: linear-gradient(135deg, #0284c7, #2563eb);
      border: 1px solid rgba(125, 211, 252, 0.4);
      color: #ffffff;
      font-size: 0.84rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
    }

    /* Write Post Modal */
    .comm-write-textarea {
      min-height: 160px;
      resize: vertical;
      line-height: 1.6;
    }

    .comm-write-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
    }

    .btn-comm-cancel {
      padding: 10px 18px;
      border-radius: 10px;
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #cbd5e1;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
    }

    .btn-comm-submit-main {
      width: auto !important;
      padding: 10px 24px !important;
      margin-top: 0 !important;
    }

    /* Mobile Responsive (iPhone 14 Pro 390x844 & Tablets) */
    @media (max-width: 768px) {
      .comm-page-container {
        padding: 12px 12px 44px;
        gap: 10px;
      }

      .comm-hero-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
      }

      .comm-hero-title {
        font-size: 1.2rem;
      }

      .comm-hero-desc {
        font-size: 0.8rem;
      }

      .btn-comm-write-primary {
        width: 100%;
        padding: 10px 16px;
      }

      .comm-toolbar-card {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 10px;
      }

      .comm-cat-tabs {
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 5px;
      }

      .comm-cat-tab-btn {
        padding: 6px 9px;
        font-size: 0.75rem;
        gap: 4px;
        flex: 1 1 auto;
        justify-content: center;
      }

      .comm-cat-tab-btn .tab-count-pill {
        min-width: 18px;
        height: 16px;
        padding: 0 5px;
        font-size: 0.68rem;
      }

      .comm-controls-row {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .comm-sort-group {
        width: 100%;
      }

      .comm-sort-btn {
        flex: 1;
        text-align: center;
      }

      .comm-search-box {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
      }

      .comm-post-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
      }

      .comm-row-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
      }

      .comm-row-title {
        width: 100%;
        font-size: 0.88rem;
      }

      .comm-row-meta {
        width: 100%;
        font-size: 0.74rem;
        flex-wrap: wrap;
        gap: 6px;
      }

      .comm-detail-card {
        padding: 16px 14px;
      }

      .comm-detail-title {
        font-size: 1.1rem;
      }

      .comm-comment-form {
        flex-direction: column;
      }

      .btn-comm-comment-submit {
        padding: 10px 16px;
        width: 100%;
      }
    }

    /* Duplicate Header Guard (#84): Never render #app-gnb inside an embedded iframe */
    html.is-embedded #app-gnb,
    body.is-embedded #app-gnb,
    :root.is-embedded #app-gnb,
    html.is-embedded .header-gnb,
    body.is-embedded .header-gnb {
      display: none !important;
    }
    html.is-embedded #app-viewport-container,
    body.is-embedded #app-viewport-container {
      padding-top: 0 !important;
      margin-top: 0 !important;
      top: 0 !important;
      height: 100vh !important;
    }