/* =====================================================================
   StoryKai UI v2 — dense reader-first layer
   Loads AFTER app.css. Scoped to body.sk-ui.
   ===================================================================== */

.sk-ui{
  --bg:#0A0910;
  --panel:#13121B;
  --panel-2:#1A1824;
  --panel-3:#221F2E;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  --txt:#ECEAF2;
  --txt-2:#9C97A9;
  --txt-3:#6A6577;

  --brand:#7C4DFF;
  --brand-2:#A17BFF;
  --brand-wash:rgba(124,77,255,.15);
  --gold:#FFB93B;
  --mint:#3ED8A0;
  --rose:#FF5D7A;

  /* app.css uses var(--border) but never defines it */
  --border:var(--line);

  --r:10px;
  --r-lg:14px;
  --shell:1400px;
  --gutter:clamp(12px,2.4vw,26px);
  --header:60px;

  background:var(--bg);
  color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
}

.sk-ui a{color:inherit;text-decoration:none}
.sk-ui img{display:block;max-width:100%}
.sk-ui ::selection{background:var(--brand);color:#fff}
.sk-ui :focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px}

.sk-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* =====================================================================
   HEADER — solid brand bar, the convention in this niche
   ===================================================================== */
.sk-ui .topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);
  height:var(--header);min-height:var(--header);
  padding-inline:var(--gutter);
  background:linear-gradient(180deg,#1B1230,#150F27);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.sk-ui .storykai-brand{flex:0 0 auto;display:flex;align-items:center}
.sk-ui .storykai-brand img{width:112px;height:auto}

.sk-ui .desktop-nav{display:flex;align-items:center;gap:2px;min-width:0}
.sk-ui .desktop-nav a{
  padding:8px 12px;border-radius:8px;
  font-size:.875rem;font-weight:600;color:rgba(255,255,255,.8);
  white-space:nowrap;transition:background .16s,color .16s;
}
.sk-ui .desktop-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.sk-ui .desktop-nav a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff}
.sk-ui .topbar .desktop-nav a:nth-last-child(-n+2){display:inline-flex}

.sk-ui .nav-search{
  position:relative;margin-left:auto;
  flex:1 1 240px;max-width:340px;min-width:0;display:flex;align-items:center;
}
.sk-ui .nav-search input{
  width:100%;height:38px;margin:0;padding:0 14px 0 36px;
  border-radius:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);color:#fff;font-size:.875rem;
}
.sk-ui .nav-search input::placeholder{color:rgba(255,255,255,.5)}
.sk-ui .nav-search input:focus{
  outline:none;border-color:var(--brand-2);background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px var(--brand-wash);
}
.sk-ui .nav-search > span{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);pointer-events:none;
}
.sk-ui .search-suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:300px;
  padding:5px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:#17151F;
  box-shadow:0 20px 50px rgba(0,0,0,.65);z-index:70;
}
.sk-ui .search-suggestions a{display:block;padding:9px 11px;border-radius:8px;font-size:.86rem;color:var(--txt-2)}
.sk-ui .search-suggestions a:hover{background:var(--panel-3);color:#fff}

.sk-ui .top-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.sk-ui .icon-link{
  position:relative;display:grid;place-items:center;
  width:36px;height:36px;border-radius:9px;
  color:rgba(255,255,255,.85);transition:background .16s;
}
.sk-ui .icon-link:hover{background:rgba(255,255,255,.12)}
.sk-ui .notification-link b{
  position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--rose);color:#fff;font-size:.58rem;font-weight:800;
  border:2px solid #1B1230;font-variant-numeric:tabular-nums;
}
.sk-ui .user-pill{
  display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;
  border-radius:999px;background:rgba(255,255,255,.12);
  font-size:.8rem;font-weight:600;color:#fff;
}
.sk-ui .user-pill:hover{background:rgba(255,255,255,.2)}
.sk-ui .avatar.mini{
  width:25px;height:25px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));
  color:#fff;font-size:.7rem;font-weight:800;
}

/* buttons */
.sk-ui .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border-radius:9px;border:1px solid transparent;
  font-size:.86rem;font-weight:700;cursor:pointer;transition:filter .16s,background .16s;
}
.sk-ui .btn.primary{background:var(--brand);color:#fff}
.sk-ui .btn.primary:hover{background:var(--brand-2)}
.sk-ui .btn.ghost{background:rgba(255,255,255,.12);color:#fff}
.sk-ui .btn.ghost:hover{background:rgba(255,255,255,.2)}
.sk-ui .btn.small{height:34px;padding:0 13px;font-size:.8rem}

.sk-btn-sm,.sk-link{
  display:inline-flex;align-items:center;height:28px;padding:0 11px;
  border-radius:7px;background:var(--panel-3);
  font-size:.76rem;font-weight:700;color:var(--txt-2);white-space:nowrap;
  transition:background .16s,color .16s;
}
.sk-btn-sm:hover,.sk-link:hover{background:var(--brand);color:#fff}
.sk-btn-sm.solid{background:var(--brand);color:#fff}

/* =====================================================================
   PAGE GRID — main column + sticky sidebar
   ===================================================================== */
.sk-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(14px,1.6vw,22px);
  align-items:start;
  padding-block:clamp(14px,2vw,22px) clamp(40px,6vw,72px);
}
.sk-main,.sk-side{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}

/* =====================================================================
   PANEL — the repeating container
   ===================================================================== */
.sk-panel{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  padding:14px;
}
.sk-panel-accent{
  background:linear-gradient(180deg,rgba(124,77,255,.13),var(--panel) 62%);
  border-color:rgba(124,77,255,.3);
}
.sk-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:13px;
}
.sk-panel-head h2{
  display:flex;align-items:center;gap:9px;
  margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.02em;color:var(--txt);
}
.sk-ico{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--brand-wash);color:var(--brand-2);font-size:.72rem;
}
.sk-ico.gold{background:rgba(255,185,59,.15);color:var(--gold)}
.sk-ico.mint{background:rgba(62,216,160,.15);color:var(--mint)}

/* =====================================================================
   SPOTLIGHT STRIP
   ===================================================================== */
.sk-spotlight{
  background:linear-gradient(180deg,#120E1E,var(--bg));
  border-bottom:1px solid var(--line);
  padding:16px 0 18px;
}
.sk-spot-rail{
  display:flex;gap:10px;align-items:center;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.sk-spot-rail::-webkit-scrollbar{display:none}
.sk-spot{
  position:relative;flex:0 0 auto;
  width:132px;aspect-ratio:3/4;
  border-radius:var(--r);overflow:hidden;
  background:var(--panel-2);
  scroll-snap-align:center;
  opacity:.55;filter:saturate(.75);
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s,filter .4s,box-shadow .4s;
}
.sk-spot img{width:100%;height:100%;object-fit:cover}
.sk-spot-blank{display:block;width:100%;height:100%;background:linear-gradient(150deg,#2A1E45,#141220)}
.sk-spot.is-active{
  width:186px;opacity:1;filter:none;
  transform:translateY(-6px);
  box-shadow:0 0 0 2px var(--brand),0 18px 40px rgba(0,0,0,.6);
}
.sk-spot-score{
  position:absolute;top:7px;left:7px;
  padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,.72);color:var(--gold);
  font-size:.66rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.sk-spot-name{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 8px 7px;
  background:linear-gradient(0deg,rgba(5,4,10,.95),transparent);
  font-size:.76rem;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transition:opacity .3s;
}
.sk-spot.is-active .sk-spot-name{opacity:1}

/* =====================================================================
   COVERS — one component, four sizes
   ===================================================================== */
.sk-cov{
  position:relative;display:block;
  aspect-ratio:2/3;border-radius:8px;overflow:hidden;
  background:var(--panel-2);flex:0 0 auto;
}
.sk-cov img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sk-cov.xs{width:38px;border-radius:6px}
.sk-cov.sm{width:46px;border-radius:6px}
.sk-cov.md{width:74px}
.sk-kind{
  position:absolute;top:5px;left:5px;
  padding:2px 6px;border-radius:5px;
  background:rgba(5,4,10,.8);
  font-size:.55rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;font-style:normal;color:#fff;
}

/* =====================================================================
   RAIL + CARD
   ===================================================================== */
.sk-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);
  gap:11px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:4px;scrollbar-width:none;
}
.sk-rail::-webkit-scrollbar{display:none}
.sk-rail > *{scroll-snap-align:start}
.sk-card{display:flex;flex-direction:column;gap:6px;min-width:0}
.sk-card:hover .sk-cov img{transform:scale(1.06)}
.sk-card-title{
  font-size:.82rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-card small{
  font-size:.74rem;color:var(--brand-2);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-score{
  font-size:.73rem;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.sk-score.sm{font-size:.7rem}

/* =====================================================================
   LATEST UPDATES — two columns of series, each with its last chapters
   ===================================================================== */
.sk-updates{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.sk-upd{
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:11px;
  padding:9px;border-radius:var(--r);
  background:var(--panel-2);
  border:1px solid transparent;
  transition:border-color .16s,background .16s;
}
.sk-upd:hover{border-color:var(--line-2);background:var(--panel-3)}
.sk-upd-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.sk-upd-title{
  font-size:.87rem;font-weight:700;line-height:1.28;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-upd-title:hover{color:var(--brand-2)}
.sk-chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sk-chapters a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 8px;border-radius:6px;
  background:rgba(255,255,255,.035);
  font-size:.76rem;color:var(--txt-2);
  transition:background .14s,color .14s;
}
.sk-chapters a:hover{background:var(--brand-wash);color:#fff}
.sk-chapters a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sk-chapters time{flex:0 0 auto;font-size:.7rem;color:var(--txt-3);font-variant-numeric:tabular-nums}
.sk-chapters a.is-new{background:rgba(62,216,160,.1);color:var(--mint)}
.sk-chapters a.is-new time{color:rgba(62,216,160,.75)}

/* =====================================================================
   CONTINUE READING
   ===================================================================== */
.sk-continue-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px;
}
.sk-continue{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;
  padding:8px;border-radius:var(--r);background:rgba(0,0,0,.24);
  border:1px solid var(--line);
}
.sk-continue:hover{border-color:var(--brand)}
.sk-continue-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.sk-continue-body b{
  font-size:.82rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-continue-body small{font-size:.72rem;color:var(--txt-3)}
.sk-continue-body small.sk-hot{color:var(--mint);font-weight:700}
.sk-bar{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:3px}
.sk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--mint))}

/* =====================================================================
   RANKING SIDEBAR
   ===================================================================== */
.sk-tabs{display:flex;gap:3px;background:var(--panel-2);padding:3px;border-radius:8px}
.sk-tabs button{
  border:0;padding:5px 9px;border-radius:6px;background:none;
  color:var(--txt-3);font-size:.72rem;font-weight:700;cursor:pointer;
  transition:background .16s,color .16s;
}
.sk-tabs button.is-on{background:var(--brand);color:#fff}
.sk-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sk-rank a{
  display:grid;grid-template-columns:22px 38px minmax(0,1fr);gap:9px;align-items:center;
  padding:6px;border-radius:8px;transition:background .16s;
}
.sk-rank a:hover{background:var(--panel-2)}
.sk-rn{
  display:grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:var(--panel-3);color:var(--txt-3);
  font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.sk-rn.r1{background:var(--gold);color:#241A05}
.sk-rn.r2{background:#C7CBD6;color:#1B1D24}
.sk-rn.r3{background:#C88A4B;color:#221305}
.sk-rank-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.sk-rank-body b{
  font-size:.81rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-rank-body small{
  font-size:.68rem;color:var(--txt-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-rank-empty{padding:14px 6px;font-size:.78rem;color:var(--txt-3);line-height:1.55}

/* editor's pick */
.sk-pick{
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel);
}
.sk-pick-art{aspect-ratio:16/10;background:var(--panel-2)}
.sk-pick-art img{width:100%;height:100%;object-fit:cover}
.sk-pick-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.sk-tagline{
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.sk-pick-body b{font-size:.98rem;font-weight:800;letter-spacing:-.02em}
.sk-pick-body a:hover b{color:var(--brand-2)}
.sk-pick-body p{margin:0;font-size:.78rem;line-height:1.55;color:var(--txt-3)}

/* discover list */
.sk-discover{display:flex;flex-direction:column;gap:5px}
.sk-disc{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:var(--r);background:var(--panel-2);
  border-left:2px solid transparent;transition:border-color .16s,background .16s;
}
.sk-disc:hover{background:var(--panel-3);border-left-color:var(--brand)}
.sk-disc b{font-size:.84rem;font-weight:700}
.sk-disc small{font-size:.73rem;color:var(--txt-3);line-height:1.45}

/* empty state */
.sk-empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:26px 20px;border-radius:var(--r);
  border:1px dashed var(--line-2);background:rgba(255,255,255,.02);
}
.sk-empty b{font-size:.95rem;font-weight:800}
.sk-empty p{margin:0;font-size:.82rem;color:var(--txt-3);line-height:1.6;max-width:52ch}

/* =====================================================================
   SERIES PAGE — cinematic banner header over the existing markup
   ===================================================================== */
.sk-ui .series-hero{
  position:relative;min-height:auto;background-image:none;
  overflow:clip;isolation:isolate;
  padding-block:0;
}
.sk-ui .series-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--banner,none);
  background-size:cover;background-position:center 22%;
}
.sk-ui .series-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,var(--bg) 4%,rgba(10,9,16,.94) 34%,rgba(10,9,16,.55) 72%,rgba(10,9,16,.35)),
    linear-gradient(0deg,var(--bg) 2%,transparent 58%);
}
.sk-ui .series-hero-overlay{display:none}
.sk-ui .series-hero-inner{
  display:grid;
  grid-template-columns:clamp(130px,14vw,186px) minmax(0,1fr) auto;
  gap:clamp(16px,2.4vw,34px);
  align-items:end;
  padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,36px);
}
.sk-ui .series-cover{border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2),0 24px 55px rgba(0,0,0,.7)}
.sk-ui .series-breadcrumbs{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:10px}
.sk-ui .series-breadcrumbs a:hover{color:var(--brand-2)}
.sk-ui .series-primary h1{
  font-size:clamp(1.7rem,4.2vw,3.1rem);
  line-height:1.03;letter-spacing:-.035em;font-weight:800;margin:6px 0 4px;
}
.sk-ui .original-title{font-size:.9rem;color:var(--txt-3);margin-bottom:12px}
.sk-ui .series-primary p{font-size:.9rem;line-height:1.68;color:var(--txt-2);max-width:66ch}
.sk-ui .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.sk-ui .status-chip,.sk-ui .type-chip{
  padding:4px 10px;border-radius:6px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.4);
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.sk-ui .status-chip.ongoing{color:var(--mint);border-color:rgba(62,216,160,.4);background:rgba(62,216,160,.12)}
.sk-ui .status-chip.completed{color:var(--brand-2);border-color:rgba(161,123,255,.4);background:rgba(124,77,255,.12)}
.sk-ui .hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* the floating stat card, AnimoFlix-style */
.sk-ui .series-stats{
  grid-column:3;grid-row:1;align-self:center;
  display:flex;flex-direction:column;
  width:210px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:rgba(14,12,22,.82);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  overflow:hidden;
}
.sk-ui .series-stats > div{
  display:flex;flex-direction:column-reverse;gap:4px;
  padding:12px 16px;border:0;border-bottom:1px solid var(--line);
}
.sk-ui .series-stats > div:last-child{border-bottom:0}
.sk-ui .series-stats strong{
  font-size:1.18rem;font-weight:800;letter-spacing:-.03em;color:var(--brand-2);
  font-variant-numeric:tabular-nums;
}
.sk-ui .series-stats span{
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);margin:0;
}

.sk-ui .series-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(14px,1.8vw,22px);
  padding-block:clamp(16px,2.4vw,26px) clamp(44px,6vw,80px);
}
.sk-ui .info-card,.sk-ui .pulse-card,.sk-ui .comment-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:16px;
}
.sk-ui .info-card h2,.sk-ui .info-card h3{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.sk-ui .synopsis-full{font-size:.9rem;line-height:1.75;color:var(--txt-2)}
.sk-ui .sticky{top:calc(var(--header) + 14px)}

/* chapter list */
.sk-ui .chapter-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-height:520px;overflow-y:auto}
.sk-ui .chapter-row{
  padding:11px 14px;border-bottom:1px solid var(--line);
  transition:background .14s,border-left-color .14s;
  border-left:2px solid transparent;
}
.sk-ui .chapter-row:last-child{border-bottom:0}
.sk-ui .chapter-row:hover{background:var(--panel-2);border-left-color:var(--brand)}
.sk-ui .chapter-row strong{font-size:.86rem;font-weight:700}
.sk-ui .chapter-row span,.sk-ui .chapter-row time{font-size:.72rem;color:var(--txt-3);font-variant-numeric:tabular-nums}
.sk-ui .chapter-search{
  height:36px;border-radius:8px;padding:0 12px;
  background:var(--panel-2);border:1px solid var(--line);
}
.sk-ui .chapter-sort button{
  height:32px;padding:0 12px;border-radius:7px;
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt-2);font-size:.76rem;font-weight:700;cursor:pointer;
}
.sk-ui .chapter-sort button.active{background:var(--brand);border-color:var(--brand);color:#fff}

.sk-ui .tag-cloud a,.sk-ui .tag-cloud span{
  padding:5px 10px;border-radius:6px;
  background:var(--panel-2);border:1px solid var(--line);
  font-size:.74rem;color:var(--txt-2);
}
.sk-ui .tag-cloud a:hover{background:var(--brand);border-color:var(--brand);color:#fff}

.sk-ui .reaction-strip button{
  border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel-2);padding:11px 6px;
  transition:background .16s,border-color .16s,transform .16s;
}
.sk-ui .reaction-strip button:hover{background:var(--panel-3);transform:translateY(-2px)}
.sk-ui .reaction-strip button.active{background:var(--brand-wash);border-color:var(--brand)}
.sk-ui .reaction-strip button small{color:var(--txt-3);font-weight:700}

.sk-ui .comment-card{padding:13px 15px}
.sk-ui .comment-avatar{border-radius:999px;background:linear-gradient(140deg,var(--brand-2),var(--brand))}
.sk-ui .comment-body{font-size:.88rem;line-height:1.65;color:var(--txt-2)}
.sk-ui .comment-compose textarea,.sk-ui .reply-form textarea{
  border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel-2);padding:11px 13px;font-size:.88rem;line-height:1.6;
}
.sk-ui .comment-compose textarea:focus,.sk-ui .reply-form textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);outline:none;
}
.sk-ui .series-mobile-dock{
  background:rgba(12,10,20,.93);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid var(--line-2);border-radius:14px;
}

/* browse */
.sk-ui .browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:11px}
.sk-ui .browse-filter-bar{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:12px;
}
.sk-ui .browse-filter-bar input,.sk-ui .browse-filter-bar select{
  height:38px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
}

/* flashes */
.sk-ui .global-flash-wrap{max-width:var(--shell);margin:12px auto 0;padding-inline:var(--gutter)}
.sk-ui .flash{border-radius:9px;padding:11px 14px;font-size:.86rem;font-weight:600;border:1px solid var(--line)}
.sk-ui .flash.success{background:rgba(62,216,160,.12);border-color:rgba(62,216,160,.35);color:#9CEFD0}
.sk-ui .flash.error{background:rgba(255,93,122,.12);border-color:rgba(255,93,122,.35);color:#FFC1CD}
.sk-ui .skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:11px 16px;background:var(--brand);color:#fff;font-weight:700}
.sk-ui .skip-link:focus{left:0}

/* =====================================================================
   MOBILE DRAWER — app.js keeps driving the [hidden] attribute
   ===================================================================== */
.sk-ui .mobile-drawer{
  position:fixed;inset:0 0 0 auto;top:0;
  width:min(84vw,320px);height:100dvh;max-height:none;z-index:90;
  display:flex;flex-direction:column;gap:2px;
  padding:calc(var(--header) + 14px) 12px calc(env(safe-area-inset-bottom) + 20px);
  background:#141024;border-left:1px solid var(--line-2);border-bottom:0;
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  overflow-y:auto;overscroll-behavior:contain;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .22s,visibility .34s;
}
.sk-ui .mobile-drawer[hidden]{
  display:flex!important;visibility:hidden;opacity:0;
  pointer-events:none;transform:translateX(100%);
}
.sk-ui .mobile-drawer:not([hidden]){visibility:visible;opacity:1;transform:translateX(0)}
.sk-ui .mobile-drawer a{
  display:flex;align-items:center;min-height:44px;padding:0 13px;
  border-radius:9px;border-bottom:0;
  font-size:.94rem;font-weight:600;color:var(--txt-2);
}
.sk-ui .mobile-drawer a:hover,.sk-ui .mobile-drawer a:active{background:var(--panel-3);color:#fff}

.sk-scrim{
  position:fixed;inset:0;z-index:80;background:rgba(4,3,8,.66);
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;
}
.sk-ui.sk-drawer-open .sk-scrim{opacity:1;visibility:visible}
.sk-ui.sk-drawer-open{overflow:hidden}

.sk-ui .mobile-menu-btn{
  position:relative;width:38px;height:38px;flex:0 0 38px;
  border-radius:9px;border:0;background:rgba(255,255,255,.12);
  font-size:0;color:transparent;cursor:pointer;
}
.sk-ui .mobile-menu-btn::before,.sk-ui .mobile-menu-btn::after{
  content:"";position:absolute;left:50%;top:50%;
  width:16px;height:1.8px;border-radius:2px;background:#fff;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.sk-ui .mobile-menu-btn::before{transform:translate(-50%,-4px)}
.sk-ui .mobile-menu-btn::after{transform:translate(-50%,3px)}
.sk-ui .mobile-menu-btn[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.sk-ui .mobile-menu-btn[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* =====================================================================
   BOTTOM TAB BAR
   ===================================================================== */
.sk-tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:5px 6px calc(env(safe-area-inset-bottom) + 5px);
  background:rgba(14,12,22,.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-top:1px solid var(--line-2);
}
.sk-tabbar ul{display:flex;list-style:none;margin:0;padding:0}
.sk-tabbar li{flex:1}
.sk-tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 2px;border-radius:9px;color:var(--txt-3);
  font-size:.6rem;font-weight:700;
}
.sk-tabbar .sk-tab-ico{font-size:1.05rem;line-height:1}
.sk-tabbar a[aria-current="page"]{color:var(--brand-2)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.sk-ui .storykai-footer{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,50px);align-items:start;
  max-width:var(--shell);margin:0 auto;
  padding:clamp(30px,4vw,48px) var(--gutter) clamp(28px,4vw,42px);
  border-top:1px solid var(--line);background:none;color:var(--txt-3);
}
.sk-ui .footer-brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sk-ui .footer-brand img{width:118px}
.sk-ui .footer-brand span{font-size:.62rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brand-2)}
.sk-ui .footer-brand small{font-size:.8rem;line-height:1.6;color:var(--txt-3);max-width:36ch}
.sk-footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sk-footer-col{display:flex;flex-direction:column;gap:8px}
.sk-footer-col b{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.sk-footer-col a{font-size:.82rem;color:var(--txt-3)}
.sk-footer-col a:hover{color:var(--brand-2)}
.sk-ui .footer-domain{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:700;color:var(--txt-2)}
.sk-ui .footer-domain small{font-size:.74rem;font-weight:400;color:var(--txt-3)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1180px){
  .sk-page{grid-template-columns:minmax(0,1fr) 300px}
  .sk-ui .desktop-nav a{padding:8px 9px;font-size:.82rem}
  .sk-ui .nav-search{max-width:230px}
}
@media(max-width:1020px){
  .sk-ui .desktop-nav,.sk-ui .nav-search{display:none!important}
  .sk-ui .mobile-menu-btn{display:block!important}
  .sk-ui .storykai-brand{margin-right:auto}
  .sk-page{grid-template-columns:minmax(0,1fr)}
  .sk-ui .series-layout{grid-template-columns:minmax(0,1fr)}
  .sk-ui .sticky{position:static}
  .sk-ui .series-hero-inner{grid-template-columns:clamp(120px,20vw,170px) minmax(0,1fr)}
  .sk-ui .series-stats{
    grid-column:1/-1;grid-row:auto;width:100%;
    flex-direction:row;
  }
  .sk-ui .series-stats > div{flex:1;border-bottom:0;border-right:1px solid var(--line)}
  .sk-ui .series-stats > div:last-child{border-right:0}
}
@media(min-width:1021px){
  .sk-ui .mobile-menu-btn{display:none!important}
  .sk-ui .mobile-drawer{display:none!important}
  .sk-scrim{display:none}
}
@media(max-width:760px){
  .sk-ui{--header:54px;font-size:14px}
  .sk-tabbar{display:block}
  .sk-ui main#main-content{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .sk-updates{grid-template-columns:minmax(0,1fr)}
  .sk-rail{grid-auto-columns:31vw}
  .sk-spot{width:104px}
  .sk-spot.is-active{width:142px}
  .sk-ui .storykai-brand img{width:98px}
  .sk-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-ui .storykai-footer{grid-template-columns:minmax(0,1fr)}
  .sk-ui .series-hero-inner{grid-template-columns:96px minmax(0,1fr);gap:13px;align-items:start}
  .sk-ui .series-primary h1{font-size:1.45rem}
  .sk-ui .series-primary p{display:none}
  .sk-ui .series-stats{flex-wrap:wrap}
  .sk-ui .series-stats > div{flex:1 0 45%;border-bottom:1px solid var(--line)}
  .sk-ui .series-mobile-dock{bottom:calc(66px + env(safe-area-inset-bottom))}
  .sk-ui .chapter-list{max-height:none}
}
@media(max-width:520px){
  .sk-rail{grid-auto-columns:40vw}
  .sk-continue-row{grid-template-columns:minmax(0,1fr)}
  .sk-panel{padding:11px}
  .sk-cov.md{width:62px}
  .sk-upd{grid-template-columns:62px minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .sk-ui *,.sk-ui *::before,.sk-ui *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* StoryKai v3 — Liquid Story premium interface */
.sk-ui{--bg:#07070a;--panel:rgba(28,28,34,.58);--panel-2:rgba(44,44,52,.48);--panel-3:rgba(64,64,74,.52);--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.17);--txt:#f5f5f7;--txt-2:#c7c7cc;--txt-3:#8e8e93;--brand:#9b8cff;--brand-2:#c9c1ff;--brand-wash:rgba(155,140,255,.17);--r:18px;--r-lg:26px;--header:74px;background:radial-gradient(900px 520px at 14% -8%,rgba(116,84,255,.18),transparent 64%),radial-gradient(760px 480px at 88% 8%,rgba(56,153,255,.11),transparent 62%),#07070a;letter-spacing:-.012em}
.sk-ui :focus-visible{outline:3px solid rgba(190,181,255,.62);outline-offset:3px;border-radius:14px}
.sk-ui .topbar{top:12px;width:min(calc(100% - 24px),calc(var(--shell) - 12px));height:62px;min-height:62px;margin-inline:auto;padding:8px 10px 8px 16px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(180deg,rgba(40,40,47,.73),rgba(18,18,23,.64));-webkit-backdrop-filter:blur(32px) saturate(165%);backdrop-filter:blur(32px) saturate(165%);box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.13)}
.sk-ui .desktop-nav{gap:3px}.sk-ui .desktop-nav a{padding:9px 13px;border-radius:999px;font-size:.82rem;color:rgba(245,245,247,.72)}.sk-ui .desktop-nav a:hover{background:rgba(255,255,255,.09);color:#fff}.sk-ui .desktop-nav a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}
.sk-ui .nav-search input{height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);padding-left:39px}.sk-ui .nav-search input:focus{background:rgba(255,255,255,.11);border-color:rgba(190,181,255,.48);box-shadow:0 0 0 4px rgba(155,140,255,.1)}
.sk-ui .search-suggestions{top:calc(100% + 12px);padding:8px;border-radius:22px;background:rgba(25,25,30,.86);backdrop-filter:blur(34px) saturate(170%);box-shadow:0 24px 80px rgba(0,0,0,.48)}.sk-ui .search-suggestions a{border-radius:14px;padding:11px 12px}
.sk-ui .icon-link,.sk-ui .mobile-menu-btn{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.sk-ui .icon-link:hover,.sk-ui .mobile-menu-btn:hover{background:rgba(255,255,255,.14)}.sk-ui .user-pill{min-height:42px;padding:4px 13px 4px 5px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08)}.sk-ui .avatar.mini{width:32px;height:32px;background:linear-gradient(145deg,#c7bfff,#7866ff)}
.sk-ui .btn,.sk-btn-sm,.sk-link{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.085);color:#f5f5f7;box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 22px rgba(0,0,0,.10);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,border-color .22s,box-shadow .22s}.sk-ui .btn{height:42px;padding-inline:18px}.sk-ui .btn:before,.sk-btn-sm:before,.sk-link:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.13),transparent 38%)}.sk-ui .btn:hover,.sk-btn-sm:hover,.sk-link:hover{transform:translateY(-1px) scale(1.015);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}.sk-ui .btn:active,.sk-btn-sm:active,.sk-link:active{transform:scale(.975)}.sk-ui .btn.primary,.sk-btn-sm.solid{background:linear-gradient(180deg,rgba(180,167,255,.98),rgba(119,94,255,.93));border-color:rgba(214,207,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 30px rgba(100,73,255,.25)}
.sk-page{padding-top:34px;gap:24px;grid-template-columns:minmax(0,1fr) 316px}.sk-main,.sk-side{gap:22px}
.sk-panel,.sk-ui .info-card,.sk-ui .pulse-card,.sk-ui .comment-card,.sk-ui .browse-filter-bar{border:1px solid rgba(255,255,255,.10);border-radius:28px;background:linear-gradient(145deg,rgba(36,36,43,.62),rgba(19,19,24,.54));-webkit-backdrop-filter:blur(26px) saturate(145%);backdrop-filter:blur(26px) saturate(145%);box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);padding:18px}.sk-panel-accent{background:radial-gradient(600px 200px at 10% 0%,rgba(145,121,255,.16),transparent 60%),linear-gradient(145deg,rgba(38,35,51,.68),rgba(18,18,23,.56));border-color:rgba(176,160,255,.18)}.sk-panel-head{margin-bottom:16px}.sk-panel-head h2{font-size:1.08rem;font-weight:720;letter-spacing:-.035em}.sk-ico{width:30px;height:30px;border-radius:11px;background:rgba(155,140,255,.14);border:1px solid rgba(190,181,255,.13)}
.sk-spotlight{margin-top:20px;padding:30px 0 24px;border:0;background:transparent}.sk-spot-rail{gap:14px;padding-block:10px 18px}.sk-spot{width:124px;border-radius:20px;opacity:.48;filter:saturate(.72) brightness(.82);box-shadow:0 12px 34px rgba(0,0,0,.18)}.sk-spot.is-active{width:190px;transform:translateY(-8px) scale(1.015);border:1px solid rgba(255,255,255,.20);box-shadow:0 28px 70px rgba(0,0,0,.38),0 0 0 1px rgba(172,157,255,.22)}.sk-spot-score{top:9px;left:9px;border-radius:999px;background:rgba(16,16,20,.62);backdrop-filter:blur(14px)}
.sk-cov{border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.24)}.sk-cov.sm,.sk-cov.xs{border-radius:12px}.sk-card{transition:transform .28s cubic-bezier(.2,.8,.2,1)}.sk-card:hover{transform:translateY(-5px)}.sk-card:hover .sk-cov img{transform:scale(1.045)}.sk-kind{top:7px;left:7px;padding:4px 7px;border-radius:999px;background:rgba(16,16,20,.58);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(14px)}
.sk-updates{gap:10px}.sk-upd{border:1px solid rgba(255,255,255,.075)!important;border-radius:20px;background:rgba(255,255,255,.035);padding:10px;transition:.22s}.sk-upd:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12)!important;transform:translateY(-1px)}.sk-chapters li a{border-radius:12px;padding:7px 9px}.sk-chapters li a:hover{background:rgba(255,255,255,.07)}
.sk-tabs{padding:3px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}.sk-tabs button{border-radius:999px!important;border:0!important;background:transparent!important}.sk-tabs button.is-on{background:rgba(255,255,255,.14)!important;color:#fff!important}.sk-rank li a{border-radius:16px;padding:8px}.sk-rank li a:hover{background:rgba(255,255,255,.06)}.sk-disc{border:1px solid rgba(255,255,255,.075)!important;border-radius:18px!important;background:rgba(255,255,255,.035);padding:13px 14px!important;margin-top:8px;transition:.2s}.sk-disc:hover{transform:translateX(3px);background:rgba(255,255,255,.07)}
.sk-ui .series-hero{overflow:hidden;border-bottom:0!important;background:linear-gradient(180deg,rgba(10,10,14,.05),rgba(7,7,10,.94))!important}.sk-ui .series-hero-inner{padding-top:34px;padding-bottom:34px}.sk-ui .series-cover{border-radius:26px!important;box-shadow:0 30px 90px rgba(0,0,0,.5)!important}.sk-ui .series-primary h1{font-weight:760;letter-spacing:-.055em}.sk-ui .series-stats{border-radius:26px;background:rgba(28,28,34,.55);border:1px solid rgba(255,255,255,.11);box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09)}.sk-ui .series-stats strong{color:#fff}
.sk-ui .chapter-list{border:0;border-radius:20px;background:rgba(255,255,255,.025);padding:5px}.sk-ui .chapter-row{margin:3px 0;padding:12px 14px;border:0;border-radius:15px;background:transparent;transition:.18s}.sk-ui .chapter-row:hover{background:rgba(255,255,255,.065);transform:translateX(2px)}.sk-ui .chapter-search{height:42px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);padding-inline:15px}.sk-ui .chapter-sort{padding:3px;border-radius:999px;background:rgba(255,255,255,.045)}.sk-ui .chapter-sort button{height:34px;border-radius:999px;border:0;background:transparent}.sk-ui .chapter-sort button.active{background:rgba(255,255,255,.14);color:#fff}.sk-ui .tag-cloud a,.sk-ui .tag-cloud span{border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.sk-ui .reaction-strip button{border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075)}.sk-ui .reaction-strip button:hover{background:rgba(255,255,255,.08)}.sk-ui input,.sk-ui select,.sk-ui textarea{color:var(--txt);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09)}
.sk-ui .mobile-drawer{width:min(88vw,360px);padding:88px 14px 24px;background:rgba(20,20,25,.82);border-left:1px solid rgba(255,255,255,.10);backdrop-filter:blur(36px) saturate(170%)}.sk-ui .mobile-drawer a{min-height:50px;border-radius:16px;padding-inline:16px}.sk-scrim{background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}.sk-tabbar{left:10px;right:10px;bottom:10px;padding:5px 5px calc(env(safe-area-inset-bottom) + 5px);border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(28,28,33,.72);backdrop-filter:blur(30px) saturate(165%);box-shadow:0 20px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09)}.sk-tabbar a{border-radius:17px;padding:7px 2px}.sk-tabbar a[aria-current=page]{background:rgba(255,255,255,.10);color:#fff}
.sk-ui .storykai-footer{border-top:0;margin-top:24px}
@media(max-width:1020px){.sk-ui .topbar{width:calc(100% - 20px);top:10px}.sk-page{padding-top:28px}}
@media(max-width:760px){.sk-ui{--header:68px}.sk-ui .topbar{height:56px;min-height:56px;border-radius:20px;padding:7px 8px 7px 13px}.sk-ui .storykai-brand img{width:96px}.sk-panel,.sk-ui .info-card,.sk-ui .pulse-card,.sk-ui .comment-card{border-radius:23px;padding:14px}.sk-rail{grid-auto-columns:38vw;gap:13px}.sk-spotlight{margin-top:15px;padding-top:22px}.sk-ui .series-cover{border-radius:20px!important}}
@media(max-width:520px){.sk-rail{grid-auto-columns:43vw}.sk-panel{padding:13px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sk-ui .topbar,.sk-panel,.sk-ui .series-stats,.sk-tabbar,.sk-ui .mobile-drawer{background:#17171c}}


/* =====================================================================
   StoryKai Search Material v4 — 2026-08-24
   Fixes inherited span positioning and gives suggestions a stable layout.
   ===================================================================== */
.sk-ui .chapter-row[hidden],
.sk-ui .chapter-row.chapter-filtered-out{display:none!important}
.sk-ui .chapter-search-empty[hidden]{display:none!important}

.sk-ui .nav-search{isolation:isolate}
.sk-ui .nav-search>span{right:auto!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important}
.sk-ui .search-suggestions[hidden]{display:none!important}
.sk-ui .search-suggestions{
  overflow-y:auto!important;overflow-x:hidden!important;
  max-height:min(430px,70vh)!important;
  scrollbar-width:thin;
}

/* Critical reset: base app.css historically positioned every .nav-search span. */
.sk-ui .nav-search .search-suggestions span,
.sk-ui .nav-search .search-suggestions strong,
.sk-ui .nav-search .search-suggestions small{
  position:static!important;
  inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  transform:none!important;
}

.sk-ui .nav-search .search-suggestions{
  left:auto!important;right:0!important;
  width:390px!important;
  min-width:390px!important;
  padding:7px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(35,35,42,.97),rgba(18,18,23,.97))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  -webkit-backdrop-filter:blur(34px) saturate(170%)!important;
  backdrop-filter:blur(34px) saturate(170%)!important;
  box-shadow:0 26px 76px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.09)!important;
  z-index:120!important;
}

.sk-ui .search-suggestions>a{
  position:relative!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:66px!important;
  padding:6px 8px!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-radius:15px!important;
  background:transparent!important;
  color:#f5f5f7!important;
  text-align:left!important;
  overflow:hidden!important;
}
.sk-ui .search-suggestions>a+a{margin-top:3px!important}
.sk-ui .search-suggestions>a:hover,
.sk-ui .search-suggestions>a.is-active{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.sk-ui .search-suggestions .suggest-cover{
  position:static!important;
  grid-column:1!important;grid-row:1!important;
  width:46px!important;height:56px!important;min-width:46px!important;
  display:grid!important;place-items:center!important;
  overflow:hidden!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(155,140,255,.18),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#c9c1ff!important;
}
.sk-ui .search-suggestions .suggest-cover img{
  position:static!important;
  width:100%!important;height:100%!important;
  display:block!important;object-fit:cover!important;
  border:0!important;border-radius:0!important;
}

.sk-ui .search-suggestions>a>span:last-child{
  position:static!important;
  grid-column:2!important;grid-row:1!important;
  width:auto!important;min-width:0!important;max-width:100%!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
  gap:3px!important;
  overflow:hidden!important;
}
.sk-ui .search-suggestions strong{
  display:block!important;
  width:100%!important;max-width:100%!important;
  margin:0!important;padding:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#f5f5f7!important;font-size:.86rem!important;font-weight:730!important;line-height:1.25!important;
  letter-spacing:-.02em!important;
}
.sk-ui .search-suggestions small{
  display:block!important;
  width:100%!important;max-width:100%!important;
  margin:0!important;padding:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#98989f!important;font-size:.69rem!important;font-weight:500!important;line-height:1.3!important;
}
.sk-ui .search-suggestions .suggest-empty{
  padding:15px!important;text-align:center!important;color:#98989f!important;font-size:.78rem!important;
}

/* Browse uses the same result cards, but remains constrained to its field width. */
.sk-ui .browse-search-suggestions{
  left:0!important;right:0!important;width:100%!important;min-width:0!important;
}

@media(max-width:1180px){
  .sk-ui .nav-search .search-suggestions{width:360px!important;min-width:360px!important}
}

/* StoryKai taxonomy focus: genres navigate, tags describe */
.facet-chips.informational span{
  display:inline-flex;align-items:center;padding:5px 8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);border-radius:999px;color:#8f8799;font-size:.69rem;
  cursor:default;user-select:text
}
.genre-landing .pagination{justify-content:center;flex-wrap:wrap}


/* =====================================================================
   StoryKai UI v4 — PETROL DEPTH
   Deep petrol-blue identity. Artwork first, calm cyan light, zero purple.
   ===================================================================== */
.sk-ui{
  --bg:#031015;
  --bg-deep:#02090d;
  --panel:#071a20;
  --panel-2:#0a222a;
  --panel-3:#0d2c36;
  --line:rgba(134,220,225,.095);
  --line-2:rgba(145,232,235,.18);
  --txt:#eef9fa;
  --txt-2:#a6c1c6;
  --txt-3:#6f9299;
  --brand:#21c8c0;
  --brand-2:#67d8e9;
  --brand-3:#1d6f88;
  --brand-wash:rgba(33,200,192,.13);
  --gold:#f5c96a;
  --mint:#63dfb6;
  --rose:#ff758a;
  --r:16px;
  --r-lg:24px;
  --header:72px;
  background:
    radial-gradient(1000px 520px at 10% -10%,rgba(19,116,133,.22),transparent 63%),
    radial-gradient(860px 580px at 96% 8%,rgba(27,91,126,.18),transparent 62%),
    linear-gradient(180deg,#041318 0,#031015 34%,#020b0f 100%);
  color:var(--txt);
}
.sk-ui::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(114,213,219,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(114,213,219,.012) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 75%);
}
.sk-ui::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 300px at 48% 0,rgba(51,205,208,.065),transparent 72%);
}
.sk-ui ::selection{background:#157b86;color:#fff}
.sk-ui :focus-visible{outline:2px solid rgba(103,216,233,.9);outline-offset:3px}

/* ----- petrol navigation: low, wide and precise ----- */
.sk-ui .topbar{
  top:10px;
  width:min(calc(100% - 20px),1420px);
  height:60px;min-height:60px;
  margin-inline:auto;
  padding:7px 9px 7px 15px;
  border:1px solid rgba(122,224,228,.13);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(10,39,47,.92),rgba(5,24,30,.88));
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  backdrop-filter:blur(28px) saturate(145%);
  box-shadow:
    0 16px 48px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(177,244,245,.09);
}
.sk-ui .storykai-brand img{width:110px}
.sk-ui .desktop-nav{gap:2px}
.sk-ui .desktop-nav a{
  position:relative;
  padding:9px 12px;
  border-radius:12px;
  color:#8fb1b7;
  font-size:.8rem;
  font-weight:680;
  letter-spacing:-.015em;
}
.sk-ui .desktop-nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;
  background:var(--brand);transform:scaleX(0);opacity:.8;
  transition:transform .18s ease;
}
.sk-ui .desktop-nav a:hover{background:rgba(74,188,197,.07);color:#e8fbfc}
.sk-ui .desktop-nav a:hover::after,
.sk-ui .desktop-nav a[aria-current=page]::after{transform:scaleX(1)}
.sk-ui .desktop-nav a[aria-current=page]{
  color:#dffafb;background:rgba(30,160,165,.09);
}
.sk-ui .nav-search{
  max-width:370px;
}
.sk-ui .nav-search input{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(125,216,222,.12);
  background:rgba(0,10,14,.42);
  color:#eaf8f9;
  box-shadow:inset 0 1px 7px rgba(0,0,0,.22);
}
.sk-ui .nav-search input::placeholder{color:#66878e}
.sk-ui .nav-search input:focus{
  background:rgba(4,28,34,.86);
  border-color:rgba(70,216,215,.55);
  box-shadow:0 0 0 3px rgba(33,200,192,.09),0 8px 28px rgba(0,0,0,.24);
}
.sk-ui .nav-search > span{color:#6aa4aa}
.sk-ui .search-suggestions{
  top:calc(100% + 9px);
  width:min(420px,calc(100vw - 28px));
  min-width:min(360px,calc(100vw - 28px));
  left:auto;right:0;
  padding:7px;
  border-radius:18px;
  border:1px solid rgba(116,222,225,.16);
  background:rgba(5,27,33,.96);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  backdrop-filter:blur(28px) saturate(145%);
  box-shadow:0 25px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(185,247,248,.06);
}
.sk-ui .search-suggestions a[role="option"]{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  min-height:66px!important;
  padding:7px 9px!important;
  border-radius:13px!important;
  background:transparent!important;
  color:#a9c3c7!important;
}
.sk-ui .search-suggestions a[role="option"]:hover,
.sk-ui .search-suggestions a[role="option"].is-active{
  background:linear-gradient(90deg,rgba(33,200,192,.12),rgba(61,133,165,.07))!important;
  box-shadow:inset 0 0 0 1px rgba(96,220,223,.08);
}
.sk-ui .search-suggestions a[role="option"] > span:first-child{
  position:static!important;transform:none!important;
  width:46px!important;height:54px!important;
  display:block!important;border-radius:9px!important;overflow:hidden!important;
  background:#0b2026!important;
}
.sk-ui .search-suggestions a[role="option"] > span:first-child img{
  width:100%;height:100%;object-fit:cover;
}
.sk-ui .search-suggestions a[role="option"] > span:last-child{
  position:static!important;transform:none!important;
  min-width:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;
}
.sk-ui .search-suggestions strong{
  color:#f2fbfc!important;font-size:.86rem!important;line-height:1.2!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.sk-ui .search-suggestions small{
  color:#668990!important;font-size:.68rem!important;line-height:1.25!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.sk-ui .icon-link,.sk-ui .mobile-menu-btn{
  border:1px solid rgba(122,220,224,.11);
  border-radius:13px;
  background:rgba(39,145,154,.055);
  color:#b8d5d9;
}
.sk-ui .icon-link:hover,.sk-ui .mobile-menu-btn:hover{
  background:rgba(48,194,196,.12);color:#effeff;
}
.sk-ui .user-pill{
  min-height:42px;
  background:rgba(34,134,143,.10);
  border:1px solid rgba(100,214,219,.11);
  color:#d7eff1;
}
.sk-ui .avatar.mini{background:linear-gradient(145deg,#48d2cf,#176d86)}

/* ----- controls: petrol capsules with lit edge ----- */
.sk-ui .btn,.sk-btn-sm,.sk-link{
  border:1px solid rgba(111,213,218,.13);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(21,65,75,.58),rgba(9,39,47,.64));
  color:#d7edef;
  box-shadow:inset 0 1px 0 rgba(185,247,248,.06),0 8px 22px rgba(0,0,0,.16);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.sk-ui .btn::before,.sk-btn-sm::before,.sk-link::before{display:none}
.sk-ui .btn{height:41px;padding-inline:17px}
.sk-ui .btn:hover,.sk-btn-sm:hover,.sk-link:hover{
  transform:translateY(-1px);
  color:#fff;
  background:linear-gradient(180deg,rgba(29,93,104,.8),rgba(10,53,62,.82));
  border-color:rgba(83,218,219,.30);
  box-shadow:0 10px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(197,249,250,.08);
}
.sk-ui .btn:active,.sk-btn-sm:active,.sk-link:active{transform:translateY(0) scale(.985)}
.sk-ui .btn.primary,.sk-btn-sm.solid{
  color:#021014;
  background:linear-gradient(135deg,#58e2d5 0%,#34c3cd 42%,#46aee2 100%);
  border-color:rgba(165,244,241,.38);
  box-shadow:0 9px 26px rgba(15,150,160,.21),inset 0 1px 0 rgba(255,255,255,.35);
}
.sk-ui .btn.primary:hover,.sk-btn-sm.solid:hover{
  color:#001014;
  background:linear-gradient(135deg,#72e9df,#42cbd4 45%,#55b8e8);
  box-shadow:0 12px 32px rgba(19,170,178,.26),inset 0 1px 0 rgba(255,255,255,.42);
}

/* ----- content architecture: ocean slabs, not generic glass ----- */
.sk-page{
  padding-top:30px;
  gap:22px;
  grid-template-columns:minmax(0,1fr) 310px;
}
.sk-main,.sk-side{gap:18px}
.sk-panel,.sk-ui .info-card,.sk-ui .pulse-card,.sk-ui .comment-card,.sk-ui .browse-filter-bar{
  position:relative;
  border:1px solid rgba(105,205,211,.085);
  border-radius:22px 22px 22px 8px;
  background:
    linear-gradient(145deg,rgba(9,31,38,.96),rgba(4,19,24,.94));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(126,228,231,.035);
}
.sk-panel::before,.sk-ui .info-card::before,.sk-ui .pulse-card::before{
  content:"";position:absolute;left:0;top:18px;width:2px;height:32px;border-radius:99px;
  background:linear-gradient(#60dfd6,#2a83a3);
  box-shadow:0 0 18px rgba(57,199,200,.25);
}
.sk-panel::after,.sk-ui .info-card::after{
  content:"";position:absolute;right:16px;top:0;width:90px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(84,207,212,.25));
}
.sk-panel-accent{
  background:
    radial-gradient(550px 180px at 0 0,rgba(31,152,164,.16),transparent 68%),
    linear-gradient(145deg,#082029,#04151a);
  border-color:rgba(78,203,208,.15);
}
.sk-panel-head h2,.sk-ui .section-head h2{
  color:#effbfc;
  letter-spacing:-.035em;
}
.sk-ui .eyebrow{
  color:#59cfd0;
  letter-spacing:.17em;
  font-weight:800;
}
.sk-ico{
  background:rgba(40,178,181,.10);
  border-color:rgba(86,214,216,.12);
  color:#65ded8;
}

/* ----- spotlight: undersea carousel ----- */
.sk-spotlight{
  margin-top:18px;
  padding:24px 0 22px;
  border:0;
  background:
    linear-gradient(180deg,rgba(3,23,29,.72),rgba(3,16,21,.22) 74%,transparent);
}
.sk-spot-rail{gap:12px}
.sk-spot{
  width:126px;
  border-radius:18px 18px 18px 7px;
  opacity:.43;
  filter:saturate(.72) brightness(.7) hue-rotate(-4deg);
  border:1px solid rgba(100,195,201,.055);
  box-shadow:0 15px 38px rgba(0,0,0,.22);
}
.sk-spot.is-active{
  width:188px;
  opacity:1;filter:none;
  transform:translateY(-5px);
  border-color:rgba(80,216,216,.36);
  box-shadow:0 25px 65px rgba(0,0,0,.42),0 0 38px rgba(36,155,167,.13);
}
.sk-spot.is-active::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(195,248,248,.08);
}
.sk-spot-score{
  border-radius:8px;
  background:rgba(2,18,23,.74);
  border:1px solid rgba(107,215,217,.13);
  color:#ffd271;
}
.sk-spot-name{
  background:linear-gradient(0deg,rgba(2,15,20,.98),rgba(2,15,20,.75) 45%,transparent);
}

/* ----- covers and story cards ----- */
.sk-cov,.sk-ui .poster{
  border-radius:17px 17px 17px 6px;
  box-shadow:0 18px 42px rgba(0,0,0,.26);
  overflow:hidden;
}
.sk-card{transition:transform .24s ease}
.sk-card:hover{transform:translateY(-4px)}
.sk-card-title,.sk-ui .series-card h3{color:#e7f5f6}
.sk-card small,.sk-ui .series-card-submeta{color:#67868d}
.sk-kind,.sk-ui .type-chip{
  border-radius:8px;
  background:rgba(3,24,30,.78);
  border:1px solid rgba(93,214,218,.14);
  color:#9fdadd;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.sk-score{color:#f2ca6d}

/* ----- update rows / lists ----- */
.sk-updates{gap:8px}
.sk-upd{
  border:1px solid rgba(98,194,201,.065)!important;
  border-radius:16px 16px 16px 5px;
  background:linear-gradient(90deg,rgba(14,43,51,.54),rgba(6,25,31,.44));
  padding:9px;
}
.sk-upd:hover{
  background:linear-gradient(90deg,rgba(18,65,73,.62),rgba(7,31,38,.58));
  border-color:rgba(77,208,210,.15)!important;
}
.sk-chapters li a{border-radius:9px;color:#99b5ba}
.sk-chapters li a:hover{background:rgba(42,164,170,.08);color:#e7f8f9}

/* ----- ranking, discovery ----- */
.sk-tabs{
  background:#06181e;
  border:1px solid rgba(98,198,203,.08);
  border-radius:11px;
}
.sk-tabs button{border-radius:8px!important;color:#668a91}
.sk-tabs button.is-on{
  background:#0d333c!important;
  color:#ccecef!important;
  box-shadow:inset 0 0 0 1px rgba(88,207,211,.10);
}
.sk-rank li a{border-radius:12px}
.sk-rank li a:hover{background:rgba(41,152,160,.07)}
.sk-rn.r1{color:#f4cf71}.sk-rn.r2{color:#a9c9ce}.sk-rn.r3{color:#c5936b}
.sk-disc{
  border-radius:14px 14px 14px 5px!important;
  background:rgba(10,37,44,.48);
  border-color:rgba(100,197,202,.06)!important;
}
.sk-disc:hover{
  background:rgba(13,53,61,.62);
  border-color:rgba(74,206,209,.14)!important;
}

/* ----- cinematic series page ----- */
.sk-ui .series-breadcrumbs{color:#5e7e85}
.sk-ui .series-breadcrumbs a{color:#79a2a9}
.sk-ui .series-breadcrumbs strong{color:#b8d6d9}
.sk-ui .series-hero{
  position:relative;
  border-bottom:0!important;
  background:
    linear-gradient(90deg,rgba(2,15,20,.94) 0%,rgba(3,19,24,.73) 48%,rgba(2,12,17,.94) 100%)!important;
}
.sk-ui .series-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 340px at 22% 42%,rgba(29,138,151,.20),transparent 70%),
    linear-gradient(180deg,transparent 55%,#031015 100%);
}
.sk-ui .series-hero-inner{
  position:relative;z-index:2;
  padding-top:34px;padding-bottom:38px;
  gap:28px;
}
.sk-ui .series-cover{
  border-radius:24px 24px 24px 7px!important;
  border:1px solid rgba(113,218,221,.14);
  box-shadow:0 32px 90px rgba(0,0,0,.53),0 0 50px rgba(28,132,146,.08)!important;
}
.sk-ui .series-primary h1{
  color:#f2fbfc;
  font-weight:780;
  letter-spacing:-.052em;
}
.sk-ui .series-primary > p{color:#a7c0c4;line-height:1.68}
.sk-ui .status-chip.ongoing{
  background:rgba(73,218,171,.10);
  color:#74e2ba;
  border-color:rgba(73,218,171,.16);
}
.sk-ui .series-stats{
  border-radius:20px 20px 20px 7px;
  background:linear-gradient(180deg,#09232a,#06181e);
  border:1px solid rgba(110,210,215,.10);
  box-shadow:0 25px 65px rgba(0,0,0,.28),inset 0 1px 0 rgba(146,231,233,.04);
}
.sk-ui .series-stats > div{border-color:rgba(98,197,201,.065)}
.sk-ui .series-stats strong{color:#eaf9fa}
.sk-ui .series-stats span{color:#63858c}

/* ----- chapters: clean reader ledger ----- */
.sk-ui .chapter-list{
  border:1px solid rgba(94,193,199,.065);
  border-radius:16px 16px 16px 6px;
  background:#04161b;
  padding:5px;
}
.sk-ui .chapter-row{
  margin:2px 0;
  padding:13px 14px;
  border:0;
  border-radius:11px;
  color:#a4bec2;
}
.sk-ui .chapter-row strong{color:#dceff1}
.sk-ui .chapter-row:hover{
  background:linear-gradient(90deg,rgba(32,148,155,.10),rgba(20,90,113,.045));
  transform:translateX(2px);
}
.sk-ui .chapter-search{
  height:40px;
  border-radius:11px;
  border:1px solid rgba(105,201,206,.10);
  background:#04151a;
  color:#dceff1;
}
.sk-ui .chapter-search:focus{
  border-color:rgba(70,213,214,.42);
  box-shadow:0 0 0 3px rgba(33,200,192,.075);
}
.sk-ui .chapter-sort{
  border-radius:11px;
  background:#05191f;
  border:1px solid rgba(96,196,201,.07);
}
.sk-ui .chapter-sort button{border-radius:8px;color:#6d9298}
.sk-ui .chapter-sort button.active{
  background:#0c333b;
  color:#d4eff1;
}

/* ----- Story DNA / pulse ----- */
.sk-ui .dna-meter-grid em{background:#11333a}
.sk-ui .dna-meter-grid em.on{
  background:linear-gradient(90deg,#2ac6bc,#55bce3);
  box-shadow:0 0 8px rgba(44,194,198,.18);
}
.sk-ui .editorial-note,.sk-ui .editor-note{
  border-left:2px solid #2ecbc2;
  background:rgba(16,68,76,.34);
}
.sk-ui .pulse-stats > div{
  background:#06191f;
  border:1px solid rgba(96,198,203,.06);
  border-radius:12px;
}

/* ----- genre/tag chips ----- */
.sk-ui .tag-cloud a,.sk-ui .tag-cloud span,
.sk-ui .facet-chips a,.sk-ui .facet-chips.informational span{
  border-radius:9px;
  background:#092028;
  border:1px solid rgba(103,204,209,.08);
  color:#90afb5;
}
.sk-ui .tag-cloud a:hover,.sk-ui .facet-chips a:hover{
  background:#0d343d;
  border-color:rgba(73,212,214,.18);
  color:#d8f3f4;
}

/* ----- reactions / community ----- */
.sk-ui .reaction-strip button{
  border-radius:14px;
  background:#071c22;
  border-color:rgba(99,194,200,.06);
}
.sk-ui .reaction-strip button:hover{
  background:#0a2a32;
  border-color:rgba(84,209,211,.14);
}
.sk-ui .reaction-strip button.selected,
.sk-ui .reaction-strip button.active{
  background:rgba(32,161,166,.12);
  border-color:rgba(64,210,211,.24);
}
.sk-ui .comment-compose textarea,.sk-ui .reply-form textarea,
.sk-ui .browse-filter-bar input,.sk-ui .browse-filter-bar select,
.sk-ui input,.sk-ui select,.sk-ui textarea{
  background:#05181e;
  border-color:rgba(100,196,202,.08);
  color:#d8ecee;
}
.sk-ui input:focus,.sk-ui textarea:focus,.sk-ui select:focus{
  border-color:rgba(67,209,211,.34);
  box-shadow:0 0 0 3px rgba(33,200,192,.06);
}

/* ----- browse ----- */
.sk-ui .browse-filter-bar{
  background:linear-gradient(145deg,#071f26,#04161b);
}
.sk-ui .series-card{
  border-radius:18px 18px 18px 7px;
  transition:transform .22s ease,background .22s ease;
}
.sk-ui .series-card:hover{transform:translateY(-4px)}
.sk-ui .pagination a{
  background:#071c22;
  border-color:rgba(94,194,200,.08);
  color:#799ca2;
}
.sk-ui .pagination a:hover,.sk-ui .pagination a.active{
  background:#0c343d;
  border-color:rgba(66,209,211,.18);
  color:#e4f7f8;
}

/* ----- mobile drawer / dock ----- */
.sk-ui .mobile-drawer{
  background:rgba(4,23,29,.96);
  border-left:1px solid rgba(100,209,213,.10);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
}
.sk-ui .mobile-drawer a{border-radius:12px;color:#9bb8bd}
.sk-ui .mobile-drawer a:hover{background:#0a2a31;color:#effcfd}
.sk-scrim{background:rgba(0,8,11,.58);backdrop-filter:blur(5px)}
.sk-tabbar{
  border:1px solid rgba(109,215,219,.12);
  border-radius:20px;
  background:rgba(5,29,35,.92);
  box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(174,239,240,.05);
}
.sk-tabbar a{border-radius:12px;color:#64868d}
.sk-tabbar a[aria-current=page]{background:#0b333b;color:#bde9eb}

/* ----- footer ----- */
.sk-ui .storykai-footer{
  background:linear-gradient(180deg,transparent,#020b0f 26%);
  border-top:0;
}
.sk-ui .storykai-footer::before{
  background:linear-gradient(90deg,transparent,rgba(67,202,205,.20),transparent);
}
.sk-ui .sk-footer-col b{color:#8bbfc3}
.sk-ui .sk-footer-col a{color:#63868d}
.sk-ui .sk-footer-col a:hover{color:#c9eff0}

/* ----- ambient motion is subtle and never affects scroll ----- */
@media (prefers-reduced-motion:no-preference){
  .sk-ui .btn.primary{
    background-size:140% 140%;
    animation:skPetrolPulse 8s ease-in-out infinite alternate;
  }
}
@keyframes skPetrolPulse{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}

@media(max-width:1020px){
  .sk-ui .topbar{top:8px;width:calc(100% - 16px)}
  .sk-page{padding-top:24px}
}
@media(max-width:760px){
  .sk-ui{--header:66px}
  .sk-ui .topbar{
    height:56px;min-height:56px;
    border-radius:16px;
    padding:6px 7px 6px 12px;
  }
  .sk-ui .storykai-brand img{width:98px}
  .sk-panel,.sk-ui .info-card,.sk-ui .pulse-card,.sk-ui .comment-card{
    border-radius:18px 18px 18px 6px;
    padding:14px;
  }
  .sk-ui .series-hero-inner{padding-top:24px}
  .sk-ui .series-cover{border-radius:19px 19px 19px 6px!important}
  .sk-rail{grid-auto-columns:39vw}
}
@media(max-width:520px){
  .sk-rail{grid-auto-columns:44vw}
  .sk-ui .series-primary h1{font-size:clamp(2rem,11vw,3rem)}
  .sk-ui .search-suggestions{
    position:fixed;
    top:74px;left:10px;right:10px;width:auto;min-width:0;
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sk-ui .topbar,.sk-ui .mobile-drawer,.sk-tabbar,.sk-ui .search-suggestions{background:#061c22}
}


/* =====================================================================
   StoryKai Petrol v4.1 — MOBILE CONTRACT
   Final authoritative phone/tablet layout. Must remain last in this file.
   ===================================================================== */

/* Any flex/grid child is allowed to shrink instead of forcing horizontal overflow. */
.sk-ui #main-content,
.sk-ui #main-content *,
.sk-ui .topbar *,
.sk-ui .storykai-footer *{box-sizing:border-box}
.sk-ui #main-content{min-width:0;overflow-x:clip}
.sk-ui .content-shell,.sk-ui .sk-shell{min-width:0}
.sk-ui img{max-width:100%;height:auto}

/* tablet */
@media(max-width:1020px){
  .sk-ui .topbar{
    position:sticky;
    top:8px;
    width:calc(100% - 16px);
    height:58px;min-height:58px;
    padding:6px 9px;
    gap:8px;
    border-radius:16px;
  }
  .sk-ui .mobile-menu-btn{
    display:grid!important;place-items:center;
    flex:0 0 40px;width:40px;height:40px;
  }
  .sk-ui .topbar .desktop-nav,
  .sk-ui .topbar .nav-search{display:none!important}
  .sk-ui .storykai-brand{min-width:0}
  .sk-ui .storykai-brand img{width:102px!important;max-width:102px}
  .sk-ui .topbar .top-actions{
    margin-left:auto;min-width:0;gap:5px;
  }
  .sk-ui .topbar .top-actions .btn.small{
    height:38px;min-height:38px;padding:0 11px;
  }
  .sk-ui .mobile-drawer{
    top:74px!important;
    right:8px!important;
    width:min(88vw,360px)!important;
    max-height:calc(100dvh - 84px)!important;
    padding:14px!important;
    border-radius:18px 18px 18px 7px;
    box-shadow:0 24px 70px rgba(0,0,0,.48);
  }

  .sk-ui .sk-page{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    padding-top:22px!important;
  }
  .sk-ui .sk-side{position:static!important}
  .sk-ui .sk-side > *{position:static!important}

  .sk-ui .series-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    width:min(100% - 24px,var(--max,1400px))!important;
    padding-top:18px!important;
  }
  .sk-ui .series-side .sticky{position:static!important;top:auto!important}

  .sk-ui .series-intelligence,
  .sk-ui .dna-grid,
  .sk-ui .profile-dashboard,
  .sk-ui .radar-columns{grid-template-columns:minmax(0,1fr)!important}
}

/* phone */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .sk-ui{
    --gutter:12px;
    --header:64px;
    font-size:14px;
  }

  /* header */
  .sk-ui .topbar{
    top:6px;
    width:calc(100% - 12px);
    height:54px;min-height:54px;
    padding:5px 7px;
    gap:6px;
    border-radius:15px;
  }
  .sk-ui .mobile-menu-btn{
    flex-basis:38px;width:38px;height:38px;border-radius:11px;
  }
  .sk-ui .storykai-brand{flex:0 1 auto;overflow:hidden}
  .sk-ui .storykai-brand img{
    width:94px!important;max-width:94px!important;height:auto!important;
  }
  .sk-ui .topbar .top-actions{gap:4px}
  .sk-ui .topbar .top-actions .icon-link{
    width:36px;height:36px;border-radius:11px;
  }
  .sk-ui .topbar .top-actions .user-pill{
    min-height:36px;padding:3px 7px 3px 3px;
  }
  .sk-ui .topbar .top-actions .user-pill > span:last-child{display:none}
  .sk-ui .topbar .top-actions .btn.small{
    height:36px;min-height:36px;padding:0 10px;font-size:.72rem;
  }
  .sk-ui .topbar .top-actions>a[href="/auth/google"]{display:none!important}
  .sk-ui .mobile-drawer{
    top:66px!important;
    max-height:calc(100dvh - 74px)!important;
  }

  /* global containers */
  .sk-ui .content-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .sk-ui .sk-shell{padding-left:12px!important;padding-right:12px!important}
  .sk-ui .page-hero .content-shell{padding-top:18px;padding-bottom:16px}

  /* homepage rails/cards */
  .sk-ui .sk-spotlight{margin-top:12px;padding:18px 0 15px}
  .sk-ui .sk-spot-rail{padding-inline:12px!important;gap:9px}
  .sk-ui .sk-spot{width:104px!important;border-radius:14px 14px 14px 5px}
  .sk-ui .sk-spot.is-active{width:144px!important;transform:translateY(-3px)}
  .sk-ui .sk-rail{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-columns:unset!important;
    overflow:visible!important;
    gap:12px!important;
    scroll-snap-type:none!important;
  }
  .sk-ui .sk-card{min-width:0!important;width:auto!important}
  .sk-ui .sk-card .sk-cov{width:100%!important}
  .sk-ui .sk-panel{
    padding:13px!important;
    border-radius:17px 17px 17px 6px!important;
  }
  .sk-ui .sk-panel-head{
    gap:8px;align-items:center;margin-bottom:12px;
  }
  .sk-ui .sk-panel-head h2{font-size:.98rem}
  .sk-ui .sk-panel-head .sk-btn-sm{flex:0 0 auto}

  /* series hero: explicit 2-column + full-width stats contract */
  .sk-ui .series-hero-inner{
    display:grid!important;
    grid-template-columns:94px minmax(0,1fr)!important;
    grid-template-areas:
      "cover primary"
      "stats stats"!important;
    gap:14px 15px!important;
    align-items:start!important;
    width:100%!important;
    padding:22px 12px 24px!important;
  }
  .sk-ui .series-cover{
    grid-area:cover!important;
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
    align-self:start!important;
    border-radius:17px 17px 17px 5px!important;
  }
  .sk-ui .series-primary{
    grid-area:primary!important;
    min-width:0!important;
    padding:0!important;
  }
  .sk-ui .series-primary h1{
    margin:5px 0 3px!important;
    font-size:clamp(1.72rem,8vw,2.35rem)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere;
  }
  .sk-ui .series-primary .original-title{
    margin-bottom:8px!important;
    font-size:.75rem!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sk-ui .series-primary > p{display:none!important}
  .sk-ui .chip-row{gap:5px!important;flex-wrap:wrap!important}
  .sk-ui .type-chip,.sk-ui .status-chip{font-size:.58rem!important;padding:4px 6px!important}
  .sk-ui .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    margin-top:10px!important;
  }
  .sk-ui .hero-actions .btn,
  .sk-ui .hero-actions form,
  .sk-ui .hero-actions .library-form{min-width:0!important}
  .sk-ui .hero-actions .btn{
    height:34px!important;
    padding:0 9px!important;
    font-size:.68rem!important;
    white-space:nowrap;
  }
  .sk-ui .hero-actions select{
    height:34px!important;
    max-width:130px;
    font-size:.68rem!important;
  }
  .sk-ui .series-stats{
    grid-area:stats!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    border-radius:15px 15px 15px 5px!important;
    overflow:hidden!important;
  }
  .sk-ui .series-stats > div{
    min-width:0!important;
    padding:10px 6px!important;
    text-align:center;
    align-items:center;
    border-bottom:0!important;
  }
  .sk-ui .series-stats > div:last-child{border-right:0!important}
  .sk-ui .series-stats strong{font-size:1rem!important}
  .sk-ui .series-stats span{font-size:.58rem!important;margin-top:2px!important}

  /* breadcrumbs */
  .sk-ui .series-breadcrumbs{
    padding:12px 12px 4px!important;
    font-size:.62rem!important;
    gap:5px!important;
    overflow:hidden!important;
  }

  /* series cards/panels */
  .sk-ui .info-card,
  .sk-ui .pulse-card,
  .sk-ui .comment-card{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:17px 17px 17px 6px!important;
  }
  .sk-ui .section-head{
    gap:8px!important;align-items:flex-start!important;
  }
  .sk-ui .section-head h2{font-size:1rem!important}
  .sk-ui .synopsis-full{font-size:.82rem!important;line-height:1.65!important}
  .sk-ui .editorial-note{padding:12px!important;margin-top:14px!important}

  /* chapter tools/search */
  .sk-ui .chapter-tools{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    margin-top:8px!important;
  }
  .sk-ui .chapter-search{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:40px!important;
    margin:0!important;
  }
  .sk-ui .chapter-sort{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  .sk-ui .chapter-sort button{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
  }
  .sk-ui .chapter-list{max-height:none!important;overflow:visible!important}
  .sk-ui .chapter-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:11px!important;
  }
  .sk-ui .chapter-row > div:first-child{min-width:0}
  .sk-ui .chapter-row > div:first-child strong,
  .sk-ui .chapter-row > div:first-child span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sk-ui .chapter-row > div:last-child{
    min-width:62px!important;text-align:right!important;
  }
  .sk-ui .chapter-row > div:last-child span,
  .sk-ui .chapter-row > div:last-child time{font-size:.62rem!important}

  /* community */
  .sk-ui .reaction-strip{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .sk-ui .reaction-strip button{min-width:0!important;padding:9px 4px!important}
  .sk-ui .rating-row{gap:10px;flex-wrap:wrap}
  .sk-ui .series-intelligence{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .sk-ui .dna-meter-grid{grid-template-columns:1fr!important}
  .sk-ui .pulse-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* browse / generic card grids */
  .sk-ui .browse-filter-bar{
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    padding:12px!important;
  }
  .sk-ui .browse-search-field,
  .sk-ui .browse-filter-actions{grid-column:auto!important;width:100%!important}
  .sk-ui .browse-filter-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .sk-ui .card-grid,
  .sk-ui .browse-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  .sk-ui .series-card{min-width:0!important}
  .sk-ui .series-card-body{padding:9px!important}
  .sk-ui .series-card h3{
    font-size:.78rem!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* footer */
  .sk-ui .storykai-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
    padding:34px 14px 94px!important;
    text-align:left!important;
  }
  .sk-ui .footer-brand{max-width:none!important}
  .sk-ui .sk-footer-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px 14px!important;
    width:100%!important;
  }
  .sk-ui .sk-footer-col{min-width:0!important}

  /* floating mobile dock */
  .sk-ui .sk-tabbar,
  .sk-ui .series-mobile-dock{
    left:7px!important;right:7px!important;bottom:7px!important;
    width:auto!important;max-width:none!important;
    border-radius:17px!important;
  }
  .sk-ui .series-mobile-dock{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:5px!important;
  }
  .sk-ui .series-mobile-dock a{
    min-width:0!important;
    padding:8px 2px!important;
    font-size:.62rem!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* very small phones */
@media(max-width:430px){
  .sk-ui .storykai-brand img{width:88px!important;max-width:88px!important}
  .sk-ui .topbar .top-actions .btn.small{padding:0 8px!important}
  .sk-ui .topbar .top-actions .icon-link.notification-link{display:none!important}

  .sk-ui .series-hero-inner{
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .sk-ui .series-cover{width:82px!important;min-width:82px!important;max-width:82px!important}
  .sk-ui .series-primary h1{font-size:clamp(1.5rem,8vw,2rem)!important}
  .sk-ui .hero-actions .btn{font-size:.62rem!important;padding:0 8px!important}
  .sk-ui .series-stats > div{padding:9px 3px!important}
  .sk-ui .series-stats strong{font-size:.9rem!important}
  .sk-ui .series-stats span{font-size:.52rem!important}

  .sk-ui .card-grid,
  .sk-ui .browse-grid{gap:9px!important}
  .sk-ui .reaction-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .sk-ui .search-suggestions{
    position:fixed!important;
    top:68px!important;left:7px!important;right:7px!important;
    width:auto!important;min-width:0!important;max-width:none!important;
  }
}

/* Never let hidden elements be resurrected by later display declarations. */
.sk-ui [hidden]{display:none!important}


/* =====================================================================
   StoryKai premium logo integration
   Generated wordmark + magic-book emblem, optimized for the petrol UI.
   ===================================================================== */
.sk-ui .storykai-brand{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:visible;
}
.sk-ui .storykai-brand img{
  display:block!important;
  width:176px!important;
  max-width:176px!important;
  height:auto!important;
  max-height:56px!important;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(45,190,211,.12));
}
.sk-ui .topbar{
  height:68px!important;
  min-height:68px!important;
}
.sk-ui .footer-brand img{
  width:232px!important;
  max-width:min(232px,100%)!important;
  height:auto!important;
  filter:drop-shadow(0 0 18px rgba(45,190,211,.10));
}
.storykai-auth-logo{
  display:inline-flex;
  align-items:center;
  max-width:100%;
}
.storykai-auth-logo img{
  width:290px!important;
  max-width:min(290px,92vw)!important;
  height:auto!important;
  filter:drop-shadow(0 0 20px rgba(45,190,211,.13));
}

@media(max-width:1320px) and (min-width:1021px){
  .sk-ui .storykai-brand img{
    width:150px!important;
    max-width:150px!important;
  }
  .sk-ui .desktop-nav a{padding-left:9px!important;padding-right:9px!important}
  .sk-ui .topbar .desktop-nav a:nth-last-child(-n+2){display:none!important}
  .sk-ui .nav-search{max-width:240px!important}
}

@media(max-width:1020px){
  .sk-ui .topbar{
    height:60px!important;
    min-height:60px!important;
  }
  .sk-ui .storykai-brand img{
    width:138px!important;
    max-width:138px!important;
    max-height:47px!important;
  }
  .sk-ui .mobile-drawer{top:76px!important}
}

@media(max-width:760px){
  .sk-ui .topbar{
    height:58px!important;
    min-height:58px!important;
  }
  .sk-ui .storykai-brand img{
    width:128px!important;
    max-width:128px!important;
    max-height:43px!important;
  }
  .sk-ui .mobile-drawer{top:70px!important}
  .sk-ui .footer-brand img{
    width:210px!important;
    max-width:88vw!important;
  }
}

@media(max-width:430px){
  .sk-ui .storykai-brand img{
    width:116px!important;
    max-width:116px!important;
    max-height:39px!important;
  }
  .storykai-auth-logo img{
    width:240px!important;
    max-width:86vw!important;
  }
}

/* =====================================================================
   StoryKai 2026 content polish — Spotlight / Series Hero / HD Browse
   Final authoritative layer for the current production markup.
   ===================================================================== */

/* --- Spotlight v2: fixed geometry = reliable taps, richer large artwork --- */
.sk-ui .sk-spotlight{
  position:relative;
  margin:14px 0 4px!important;
  padding:22px 0 18px!important;
  border:0!important;
  background:
    radial-gradient(800px 260px at 20% 0%,rgba(37,183,190,.09),transparent 68%),
    linear-gradient(180deg,rgba(4,23,29,.72),rgba(3,16,21,.12))!important;
  overflow:hidden;
}
.sk-ui .sk-spot-shell{
  width:min(calc(100% - 28px),1420px);
  margin-inline:auto;
}
.sk-ui .sk-spot-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:12px;padding-inline:2px;
}
.sk-ui .sk-spot-head>div:first-child{display:flex;flex-direction:column;gap:3px}
.sk-ui .sk-spot-kicker{
  color:#55d5d1;font-size:.62rem;line-height:1;font-weight:850;letter-spacing:.19em;
}
.sk-ui .sk-spot-head strong{font-size:1.08rem;color:#e7f7f8;letter-spacing:-.025em}
.sk-ui .sk-spot-controls{display:flex;gap:7px}
.sk-ui .sk-spot-controls button{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:1px solid rgba(101,209,214,.12);background:#08232a;color:#a9d3d7;
  cursor:pointer;transition:.18s ease;
}
.sk-ui .sk-spot-controls button:hover{background:#0d343d;color:#fff;border-color:rgba(73,213,215,.23);transform:translateY(-1px)}
.sk-ui .sk-spot-rail{
  display:flex!important;align-items:stretch!important;gap:16px!important;
  width:100%;max-width:none!important;margin:0!important;padding:0 1px 7px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;scroll-padding-inline:1px;
  scrollbar-width:none;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.sk-ui .sk-spot-rail::-webkit-scrollbar{display:none}
.sk-ui .sk-spot{
  position:relative!important;
  flex:0 0 clamp(680px,72vw,1020px)!important;
  width:auto!important;min-width:0!important;
  height:clamp(310px,31vw,430px)!important;aspect-ratio:auto!important;
  margin:0!important;border-radius:25px 25px 25px 8px!important;
  overflow:hidden!important;scroll-snap-align:start!important;
  opacity:.68!important;filter:saturate(.86) brightness(.78)!important;
  transform:none!important;
  border:1px solid rgba(100,204,210,.09)!important;
  background:#061b21!important;
  box-shadow:0 22px 55px rgba(0,0,0,.26)!important;
  transition:opacity .28s ease,filter .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}
.sk-ui .sk-spot.is-active{
  width:auto!important;transform:none!important;opacity:1!important;filter:none!important;
  border-color:rgba(79,214,214,.24)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.36),0 0 0 1px rgba(60,196,201,.04)!important;
}
.sk-ui .sk-spot-hit{
  position:relative;isolation:isolate;
  display:grid!important;grid-template-columns:clamp(150px,18vw,220px) minmax(0,1fr)!important;
  align-items:end;gap:clamp(18px,3vw,38px);
  width:100%;height:100%;padding:clamp(22px,3vw,38px)!important;
  color:inherit!important;text-decoration:none!important;
}
.sk-ui .sk-spot-backdrop{position:absolute;inset:0;z-index:-3;display:block!important}
.sk-ui .sk-spot-backdrop img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 26%;transform:scale(1.025)}
.sk-ui .sk-spot-shade{
  position:absolute;inset:0;z-index:-2;display:block;
  background:
    linear-gradient(90deg,rgba(2,14,18,.96) 0%,rgba(3,20,25,.88) 29%,rgba(3,19,24,.57) 58%,rgba(2,13,18,.80) 100%),
    linear-gradient(0deg,rgba(2,14,18,.92) 0%,transparent 72%);
}
.sk-ui .sk-spot-poster{
  display:block;align-self:end;width:100%;aspect-ratio:2/3;overflow:hidden;
  border-radius:20px 20px 20px 6px;border:1px solid rgba(161,230,232,.14);
  background:#082129;box-shadow:0 24px 58px rgba(0,0,0,.48);
}
.sk-ui .sk-spot-poster img{width:100%!important;height:100%!important;object-fit:cover!important}
.sk-ui .sk-spot-copy{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  min-width:0;max-width:640px;padding-bottom:4px;
  position:static!important;opacity:1!important;background:none!important;
}
.sk-ui .sk-spot-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sk-ui .sk-spot-chips em{
  padding:5px 8px;border-radius:8px;border:1px solid rgba(95,211,214,.13);
  background:rgba(7,45,53,.68);color:#a6dadd;font-style:normal;
  font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.sk-ui .sk-spot-copy>strong{
  max-width:100%;color:#f2fbfc;font-size:clamp(2rem,4vw,4rem);line-height:.98;
  letter-spacing:-.055em;font-weight:790;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-ui .sk-spot-summary{
  display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  max-width:58ch;margin-top:13px;color:#a4c0c4;font-size:.86rem;line-height:1.58;
}
.sk-ui .sk-spot-meta{display:flex;gap:13px;flex-wrap:wrap;margin-top:14px;color:#b9d4d7;font-size:.72rem}
.sk-ui .sk-spot-meta b:first-child{color:#f1c96d}
.sk-ui .sk-spot-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 13px;
  border-radius:11px;background:linear-gradient(135deg,#54ddd3,#3abccc 54%,#43a5d0);
  color:#031418;font-size:.72rem;font-weight:850;
  box-shadow:0 10px 28px rgba(24,159,169,.18);
}
.sk-ui .sk-spot-cta i{font-style:normal;font-size:1rem}
.sk-ui .sk-spot-dots{display:flex;justify-content:center;gap:6px;margin-top:11px}
.sk-ui .sk-spot-dots button{
  width:6px;height:6px;padding:0;border:0;border-radius:999px;background:#31545a;cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.sk-ui .sk-spot-dots button.is-active{width:24px;background:#44c8c7}

/* --- Series hero v2: real backdrop image, never dependent on pseudo/background cascade --- */
.sk-ui .series-hero{
  display:block!important;visibility:visible!important;opacity:1!important;
  position:relative!important;isolation:isolate;min-height:390px!important;
  overflow:hidden!important;background:#031015!important;
}
.sk-ui .series-hero::before,.sk-ui .series-hero::after{display:none!important}
.sk-ui .series-hero-backdrop{
  display:block!important;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.sk-ui .series-hero-backdrop img{
  width:100%;height:100%;object-fit:cover;object-position:center 24%;
  filter:saturate(.86) contrast(1.04);transform:scale(1.035);
}
.sk-ui .series-hero-backdrop.cover-fallback img{
  object-position:72% 28%;filter:blur(12px) saturate(.78) brightness(.62);transform:scale(1.13);
}
.sk-ui .series-hero-overlay{
  display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none;
  background:
    linear-gradient(90deg,#031015 0%,rgba(3,16,21,.91) 31%,rgba(3,16,21,.57) 62%,rgba(3,16,21,.72) 100%),
    linear-gradient(0deg,#031015 0%,rgba(3,16,21,.32) 58%,rgba(3,16,21,.48) 100%)!important;
}
.sk-ui .series-hero-inner{
  position:relative!important;z-index:2!important;min-height:390px!important;
}
.sk-ui .series-cover{box-shadow:0 28px 75px rgba(0,0,0,.56),0 0 0 1px rgba(101,215,218,.10)!important}

/* --- Browse: HD artwork gets room to breathe --- */
.sk-ui .browse-page{max-width:1420px}
.sk-ui .browse-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(16px,1.7vw,24px)!important;
  align-items:start;
}
.sk-ui .browse-grid .series-card{
  display:block!important;min-width:0;overflow:hidden;
  border:1px solid rgba(100,201,206,.075);
  border-radius:22px 22px 22px 7px;
  background:linear-gradient(180deg,#082027,#05171c);
  box-shadow:0 16px 42px rgba(0,0,0,.17);
}
.sk-ui .browse-grid .poster{
  width:100%!important;aspect-ratio:2/3!important;height:auto!important;
  border-radius:0!important;background:#06191f;
}
.sk-ui .browse-grid .poster img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.sk-ui .browse-grid .series-card-body{padding:13px 13px 15px!important}
.sk-ui .browse-grid .series-card h3{
  margin:0 0 9px;font-size:.95rem!important;line-height:1.25;
  white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-ui .browse-grid .meta-row{font-size:.73rem}
.sk-ui .browse-grid .series-card-submeta{font-size:.67rem}

@media(max-width:1120px){
  .sk-ui .browse-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .sk-ui .sk-spot{flex-basis:min(82vw,860px)!important}
}

@media(max-width:760px){
  .sk-ui .sk-spotlight{margin-top:9px!important;padding:15px 0 13px!important}
  .sk-ui .sk-spot-shell{width:100%!important}
  .sk-ui .sk-spot-head{padding-inline:12px;margin-bottom:9px;align-items:center}
  .sk-ui .sk-spot-head strong{font-size:.94rem}
  .sk-ui .sk-spot-controls{display:none!important}
  .sk-ui .sk-spot-rail{gap:10px!important;padding:0 12px 4px!important;scroll-padding-inline:12px!important}
  .sk-ui .sk-spot{
    flex:0 0 calc(100vw - 36px)!important;
    height:252px!important;min-height:252px!important;
    border-radius:20px 20px 20px 7px!important;
    opacity:1!important;filter:none!important;
    scroll-snap-align:center!important;
  }
  .sk-ui .sk-spot.is-active{transform:none!important}
  .sk-ui .sk-spot-hit{
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:14px!important;padding:16px!important;align-items:end!important;
  }
  .sk-ui .sk-spot-shade{
    background:
      linear-gradient(90deg,rgba(2,15,19,.97) 0%,rgba(3,18,23,.87) 46%,rgba(3,18,23,.68) 100%),
      linear-gradient(0deg,rgba(2,14,18,.92),transparent 72%);
  }
  .sk-ui .sk-spot-poster{width:104px!important;border-radius:15px 15px 15px 5px}
  .sk-ui .sk-spot-copy>strong{font-size:clamp(1.45rem,7vw,2rem)!important;line-height:1!important}
  .sk-ui .sk-spot-summary{-webkit-line-clamp:3;font-size:.72rem;line-height:1.45;margin-top:8px}
  .sk-ui .sk-spot-chips{margin-bottom:7px;gap:4px}
  .sk-ui .sk-spot-chips em{font-size:.48rem;padding:4px 5px}
  .sk-ui .sk-spot-meta{margin-top:9px;font-size:.62rem;gap:8px}
  .sk-ui .sk-spot-cta{margin-top:10px;padding:7px 9px;font-size:.61rem;border-radius:9px}
  .sk-ui .sk-spot-dots{margin-top:8px}

  .sk-ui .series-hero{min-height:0!important}
  .sk-ui .series-hero-backdrop{display:block!important}
  .sk-ui .series-hero-backdrop img{object-position:62% 20%}
  .sk-ui .series-hero-overlay{
    background:
      linear-gradient(90deg,rgba(3,16,21,.96),rgba(3,16,21,.78) 55%,rgba(3,16,21,.66)),
      linear-gradient(0deg,#031015,transparent 76%)!important;
  }
  .sk-ui .series-hero-inner{min-height:0!important}

  /* One result card per row on phones. Poster stays large and crisp. */
  .sk-ui .browse-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  .sk-ui .browse-grid .series-card{
    display:grid!important;
    grid-template-columns:minmax(138px,42vw) minmax(0,1fr)!important;
    align-items:stretch!important;
    min-height:215px;
    border-radius:19px 19px 19px 6px;
  }
  .sk-ui .browse-grid .poster{
    width:100%!important;height:100%!important;min-height:215px!important;
    aspect-ratio:2/3!important;border-radius:0!important;
  }
  .sk-ui .browse-grid .series-card-body{
    display:flex;flex-direction:column;justify-content:center;min-width:0;
    padding:16px 14px!important;
  }
  .sk-ui .browse-grid .series-card h3{font-size:1.05rem!important;margin-bottom:12px}
  .sk-ui .browse-grid .meta-row{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:.76rem}
  .sk-ui .browse-grid .series-card-submeta{margin-top:13px;display:flex;flex-direction:column;gap:5px;font-size:.69rem}
}

@media(max-width:430px){
  .sk-ui .sk-spot{flex-basis:calc(100vw - 26px)!important;height:238px!important;min-height:238px!important}
  .sk-ui .sk-spot-rail{padding-inline:8px!important;scroll-padding-inline:8px!important}
  .sk-ui .sk-spot-hit{grid-template-columns:92px minmax(0,1fr)!important;padding:13px!important;gap:12px!important}
  .sk-ui .sk-spot-poster{width:92px!important}
  .sk-ui .sk-spot-summary{-webkit-line-clamp:2}
  .sk-ui .browse-grid .series-card{grid-template-columns:minmax(128px,41vw) minmax(0,1fr)!important;min-height:198px}
  .sk-ui .browse-grid .poster{min-height:198px!important}
  .sk-ui .browse-grid .series-card-body{padding:13px 11px!important}
  .sk-ui .browse-grid .series-card h3{font-size:.94rem!important}
}

/* StoryKai Petrol: account media + rank identity */
.sk-ui .profile-media-card{background:linear-gradient(145deg,#082028,#04161b);border-color:rgba(85,208,211,.10)}.sk-ui .profile-upload-btn{border-color:rgba(72,211,213,.22);background:rgba(37,177,181,.10);color:#a9eff0!important}.sk-ui .rank-badge{background:#09242b;border-color:rgba(96,211,214,.14);color:#d9f4f5}.sk-ui .badge-card{background:linear-gradient(145deg,#082028,#04161b);border-color:rgba(90,202,207,.08)}


/* =====================================================================
   StoryKai v4.2 — Rank Crests + Artwork-first Mobile Browse
   ===================================================================== */
.sk-ui .rank-badge{
  background:linear-gradient(180deg,rgba(7,30,36,.96),rgba(3,18,23,.96))!important;
  border-color:color-mix(in srgb,var(--rank-glow,#91a0ad) 26%,transparent)!important;
  color:#dff3f4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.13)!important;
}
.sk-ui .rank-badge .rank-mini-crest img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.65))}
.sk-ui .profile-name-row .rank-badge{min-height:29px;padding-right:10px!important}
.sk-ui .profile-name-row .rank-mini-crest{width:24px!important;height:24px!important}
.sk-ui .badge-card{border-radius:15px;background:linear-gradient(145deg,#082028,#04161b)}
.sk-ui .badge-icon{border-radius:14px;background:#071a20;border:1px solid rgba(99,209,213,.08)}

/* Mobile Browse: two clean poster columns, like a dedicated comic catalog. */
@media(max-width:760px){
  .sk-ui .browse-page{
    padding-left:10px!important;padding-right:10px!important;
  }
  .sk-ui .browse-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px 9px!important;
    align-items:start!important;
  }
  .sk-ui .browse-grid .series-card{
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:15px 15px 15px 5px!important;
    background:linear-gradient(180deg,#082028,#05161b)!important;
    border:1px solid rgba(97,202,207,.07)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
  }
  .sk-ui .browse-grid .poster{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:2/3!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .sk-ui .browse-grid .poster img{
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  .sk-ui .browse-grid .type-chip{
    top:6px!important;left:6px!important;
    padding:3px 5px!important;border-radius:6px!important;
    font-size:.48rem!important;letter-spacing:.04em!important;
  }
  .sk-ui .browse-grid .series-card-body{
    display:block!important;min-width:0!important;
    padding:8px 8px 10px!important;
  }
  .sk-ui .browse-grid .series-card h3{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
    min-height:2.1em!important;
    margin:0 0 6px!important;
    font-size:.72rem!important;line-height:1.05!important;
    white-space:normal!important;overflow:hidden!important;
    color:#e7f5f6!important;
  }
  .sk-ui .browse-grid .meta-row{
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
    gap:4px!important;margin:0!important;
    font-size:.56rem!important;color:#89abb1!important;
    white-space:nowrap!important;
  }
  .sk-ui .browse-grid .meta-row span:first-child{color:#f0c869!important}
  .sk-ui .browse-grid .series-card-submeta{
    display:flex!important;flex-direction:row!important;justify-content:space-between!important;gap:4px!important;
    margin-top:6px!important;padding-top:6px!important;
    border-top:1px solid rgba(103,204,209,.06);
    font-size:.51rem!important;color:#607e85!important;
    white-space:nowrap!important;
  }
  .sk-ui .browse-grid .series-card:hover{transform:none!important}
}

@media(max-width:430px){
  .sk-ui .browse-page{padding-left:8px!important;padding-right:8px!important}
  .sk-ui .browse-grid{gap:10px 7px!important}
  .sk-ui .browse-grid .series-card-body{padding:7px 7px 9px!important}
  .sk-ui .browse-grid .series-card h3{font-size:.68rem!important}
  .sk-ui .browse-grid .meta-row{font-size:.52rem!important}
  .sk-ui .browse-grid .series-card-submeta{font-size:.48rem!important}
}


/* ===== StoryKai mobile type-chip final fix ===== */
@media(max-width:760px){
  .sk-ui .poster > .type-chip,
  .sk-ui .browse-grid .poster > .type-chip{
    position:absolute!important;
    top:6px!important;left:6px!important;right:auto!important;bottom:auto!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;max-width:calc(100% - 12px)!important;height:auto!important;min-height:0!important;
    padding:4px 6px!important;margin:0!important;
    border-radius:7px!important;
    background:rgba(3,24,30,.86)!important;
    border:1px solid rgba(93,214,218,.18)!important;
    color:#bcebed!important;
    font-size:.49rem!important;font-weight:850!important;line-height:1!important;letter-spacing:.055em!important;
    text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    z-index:4!important;box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
    -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  }
  .sk-ui .type-chip.static{
    position:static!important;inset:auto!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;max-width:100%!important;height:auto!important;min-height:22px!important;
    padding:4px 7px!important;margin:0!important;
    border-radius:7px!important;
    font-size:.55rem!important;line-height:1!important;letter-spacing:.06em!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}
@media(max-width:430px){
  .sk-ui .poster > .type-chip,.sk-ui .browse-grid .poster > .type-chip{font-size:.46rem!important;padding:3px 5px!important;top:5px!important;left:5px!important;max-width:calc(100% - 10px)!important}
  .sk-ui .type-chip.static{font-size:.51rem!important;padding:4px 6px!important}
}