/* F&X Premium Catalog Viewer - V6 */
#fandx-catalog.catalog-shell,
#fandx-catalog.catalog-shell * { box-sizing:border-box; }

#fandx-catalog.catalog-shell {
  --fx-red:#e51b2b;
  --fx-red2:#ff3547;
  --fx-text:#f7f7f7;
  width:100%; min-height:100vh; min-height:100dvh;
  padding:20px 24px 22px;
  position:relative; overflow:hidden; isolation:isolate;
  color:var(--fx-text); background:
    radial-gradient(circle at 50% 48%,rgba(92,18,28,.52),transparent 48%),
    linear-gradient(135deg,#272b31 0%,#181b20 50%,#292d33 100%);
  font-family:inherit;
}

#fandx-catalog.catalog-shell::before {
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.035) 48%,transparent 61%),
             radial-gradient(circle at 50% 72%,rgba(0,0,0,.42),transparent 62%);
}

.catalog-topbar {
  height:56px; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:30;
}
.catalog-brand { display:flex; align-items:center; }
.catalog-logo { display:block; height:34px; width:auto; max-width:150px; object-fit:contain; filter:drop-shadow(0 5px 16px rgba(0,0,0,.45)); }

.icon-btn,
.catalog-nav-btn {
  appearance:none; -webkit-appearance:none; border:1px solid rgba(229,27,43,.82);
  color:#fff; background:rgba(10,12,16,.82); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:0; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(229,27,43,.08) inset,0 10px 30px rgba(0,0,0,.42),0 0 26px rgba(229,27,43,.16);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.icon-btn:hover,.catalog-nav-btn:hover {
  transform:translateY(-2px) scale(1.035); border-color:#ff4051; background:rgba(30,14,18,.94);
  box-shadow:0 0 0 1px rgba(229,27,43,.12) inset,0 14px 34px rgba(0,0,0,.48),0 0 36px rgba(229,27,43,.30);
}
.icon-btn:active,.catalog-nav-btn:active { transform:scale(.96); }

.icon-btn { width:46px; height:46px; border-radius:50%; }
.icon-btn svg { width:21px; height:21px; display:block; }
.catalog-nav-btn { width:50px; height:50px; border-radius:50%; }
.catalog-nav-btn svg { width:22px; height:22px; display:block; }

.viewer-wrap {
  width:100%; height:clamp(400px,72vh,720px); min-height:360px;
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:visible; perspective:1800px;
}

.book {
  position:relative; z-index:8; width:min(94vw,1100px); height:min(68vh,650px);
  min-height:300px; display:flex; align-items:center; justify-content:center;
  overflow:hidden !important; border-radius:14px;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.48));
}

.book canvas { image-rendering:auto; }
#fandx-catalog .stf__parent { margin:0 auto !important; overflow:hidden !important; border-radius:14px; }
#fandx-catalog .stf__block,#fandx-catalog .stf__item { overflow:hidden !important; }
#fandx-catalog .stf__item > div { overflow:hidden !important; border-radius:12px; }

.book-shadow {
  position:absolute; z-index:4; width:min(82vw,930px); height:min(25vh,180px);
  left:50%; top:59%; transform:translate(-50%,0) rotateX(68deg); pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,0,0,.80) 0%,rgba(0,0,0,.46) 35%,rgba(0,0,0,.08) 66%,transparent 78%);
  filter:blur(18px); opacity:.92;
}

.catalog-glow { position:absolute; z-index:1; pointer-events:none; border-radius:50%; mix-blend-mode:screen; }
.glow-one { width:min(76vw,860px); height:min(42vh,410px); left:50%; top:39%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(229,27,43,.66) 0%,rgba(229,27,43,.32) 30%,rgba(229,27,43,.10) 54%,transparent 74%); filter:blur(34px); }
.glow-two { width:min(54vw,620px); height:min(35vh,330px); left:22%; top:49%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(255,37,55,.38),transparent 74%); filter:blur(48px); }
.glow-three { width:min(54vw,620px); height:min(35vh,330px); left:78%; top:49%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(255,37,55,.34),transparent 74%); filter:blur(48px); }

.loading {
  position:absolute; z-index:25; left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:22px 28px; border:1px solid rgba(255,255,255,.08); border-radius:18px;
  background:rgba(10,12,15,.62); box-shadow:0 20px 60px rgba(0,0,0,.40),0 0 40px rgba(229,27,43,.12);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.loading-logo-wrap { width:74px; height:44px; display:grid; place-items:center; }
.loading-logo { max-width:74px; max-height:40px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(229,27,43,.30)); }
.premium-loader { display:flex; align-items:center; gap:7px; }
.premium-loader span { width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 13px rgba(229,27,43,.9); animation:fxPulse 1.15s infinite ease-in-out; }
.premium-loader span:nth-child(2){animation-delay:.14s}.premium-loader span:nth-child(3){animation-delay:.28s}
@keyframes fxPulse{0%,70%,100%{transform:scale(.65);opacity:.35}35%{transform:scale(1.25);opacity:1}}
.loading-text{font-size:13px;color:rgba(255,255,255,.84);}

.error { position:absolute; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90%,520px); padding:18px 20px; text-align:center; color:#fff; background:rgba(100,13,21,.88); border:1px solid rgba(255,70,84,.6); border-radius:14px; box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 35px rgba(229,27,43,.22); }

.controls { position:relative; z-index:30; margin:5px auto 0; display:flex; align-items:center; justify-content:center; gap:26px; }
.page-indicator { min-width:82px; height:50px; display:flex; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.94); font-size:14px; font-variant-numeric:tabular-nums; }
.page-divider{color:rgba(255,255,255,.34)}
.hint{position:relative;z-index:20;margin:12px auto 0;text-align:center;color:rgba(255,255,255,.55);font-size:12px}
.hint-icon{margin-left:5px;color:rgba(255,255,255,.78)}

#fandx-catalog.is-fullscreen { padding:24px 28px; }
#fandx-catalog.is-fullscreen .viewer-wrap { height:calc(100dvh - 150px); }
#fandx-catalog.is-fullscreen .book { width:min(94vw,1250px); height:min(78dvh,800px); }

@media (max-width:900px){
  #fandx-catalog.catalog-shell{padding:14px 12px 18px}
  .catalog-topbar{height:48px}.catalog-logo{height:28px;max-width:125px}.icon-btn{width:42px;height:42px}.icon-btn svg{width:20px;height:20px}
  .viewer-wrap{height:clamp(360px,66dvh,610px);min-height:330px}
  .book{width:96vw;height:min(62dvh,570px);min-height:290px}
  .book-shadow{width:82vw;top:60%}.controls{gap:20px}.catalog-nav-btn{width:46px;height:46px}.catalog-nav-btn svg{width:21px;height:21px}
}

@media (max-width:700px){
  #fandx-catalog.catalog-shell{padding:10px 10px 14px}
  .viewer-wrap{height:67dvh;min-height:360px;padding:0 2px}
  .book{width:92vw;height:63dvh;min-height:320px;max-height:690px}
  .book-shadow{width:78vw;height:85px;top:63%;filter:blur(15px)}
  .glow-one{width:120vw;height:38vh}.glow-two,.glow-three{width:78vw;height:28vh}
  .controls{gap:18px;margin-top:7px}.catalog-nav-btn{width:48px;height:48px}.page-indicator{height:48px;min-width:70px;font-size:13px}
  .hint{font-size:10.5px;margin-top:8px;padding:0 8px}
  .loading{min-width:185px;padding:18px 20px}.loading-text{font-size:12px}
}

@media (max-width:380px){
  .viewer-wrap{height:65dvh}.book{height:61dvh;min-height:300px}.controls{gap:12px}.catalog-nav-btn{width:45px;height:45px}.page-indicator{min-width:62px}
}

@media (prefers-reduced-motion:reduce){.premium-loader span,.icon-btn,.catalog-nav-btn{animation:none!important;transition:none!important}}