/* ============================================================
 * PokeCardia V3.17.0
 * Free Binder 3x3
 * ============================================================ */

.free-binder-index,
.free-binder-workspace{
  padding:48px 0 78px;
  background:
    radial-gradient(circle at 12% 10%,rgba(116,206,255,.12),transparent 28%),
    radial-gradient(circle at 88% 14%,rgba(161,101,245,.1),transparent 28%),
    #f8fcff;
}
.free-binder-intro{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:center;
  gap:34px;
  padding:36px;
  border:1px solid #dbe8f2;
  border-radius:30px;
  background:#fff;
  box-shadow:0 24px 70px rgba(57,80,112,.1);
}
.free-binder-intro h1{
  margin:9px 0 12px;
  color:#2f4161;
  font-size:clamp(34px,5vw,58px);
  letter-spacing:-1.7px;
}
.free-binder-intro p{
  max-width:650px;
  margin:0;
  color:#72809a;
  line-height:1.7;
}
.free-binder-specs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.free-binder-specs span{
  padding:9px 12px;
  border:1px solid #dfe8f0;
  border-radius:999px;
  background:#f8fbfe;
  color:#68758c;
  font-size:11px;
  font-weight:750;
}
.free-binder-specs b{
  color:#6f4ed3;
}
.free-binder-preview{
  position:relative;
  min-height:310px;
  padding:32px 24px 32px 46px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(45,61,96,.2);
}
.binder-preview-ring{
  position:absolute;
  top:0;
  bottom:0;
  left:22px;
  width:9px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 34px,
      rgba(255,255,255,.95) 34px 50px,
      transparent 50px 76px
    );
}
.binder-preview-sheet{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  height:100%;
  min-height:246px;
  padding:15px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(12px);
}
.binder-preview-sheet i{
  border:1px solid rgba(255,255,255,.8);
  border-radius:10px;
  background:rgba(255,255,255,.33);
  box-shadow:inset 0 0 0 1px rgba(58,72,105,.05);
}

.art-sky{
  --art-a:#68d5f3;
  --art-b:#7165ed;
  --art-c:#f7fbff;
}
.art-lavender{
  --art-a:#a67cf2;
  --art-b:#e9a5f2;
  --art-c:#fff5ff;
}
.art-ember{
  --art-a:#ff8c5f;
  --art-b:#f44375;
  --art-c:#fff2e7;
}
.art-ocean{
  --art-a:#37b9d7;
  --art-b:#2979da;
  --art-c:#e9fbff;
}
.art-forest{
  --art-a:#75c96c;
  --art-b:#238f79;
  --art-c:#efffed;
}
.free-binder-preview,
.free-binder-cover,
.free-art-card-visual{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.72),transparent 24%),
    radial-gradient(circle at 84% 12%,rgba(255,255,255,.35),transparent 18%),
    linear-gradient(135deg,var(--art-a),var(--art-b));
}
.free-binder-cover{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  align-items:center;
  gap:25px;
  min-height:290px;
  margin-top:26px;
  padding:38px;
  border-radius:30px;
  color:#fff;
  box-shadow:0 26px 65px rgba(45,61,96,.2);
  overflow:hidden;
}
.free-binder-cover-copy>span{
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
}
.free-binder-cover-copy h2{
  margin:9px 0;
  color:#fff;
  font-size:34px;
}
.free-binder-cover-copy p{
  margin:0 0 15px;
  color:rgba(255,255,255,.85);
}
.free-binder-cover-copy .progress{
  max-width:520px;
  background:rgba(255,255,255,.25);
}
.free-binder-cover-copy .progress i{
  background:#fff;
}
.free-binder-cover-copy strong{
  display:block;
  margin-top:8px;
}
.free-binder-cover-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  padding:14px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px;
  background:rgba(255,255,255,.24);
}
.free-binder-cover-grid i{
  aspect-ratio:63/88;
  border:1px solid rgba(255,255,255,.65);
  border-radius:8px;
  background:rgba(255,255,255,.2);
}
.free-binder-cover-grid i.filled{
  background:rgba(255,255,255,.85);
}
.free-binder-create-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:26px;
  padding:30px 34px;
  border:1px solid #dfe8f1;
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 55px rgba(57,78,108,.08);
}
.free-binder-create-card h2{
  margin:7px 0;
  color:#334563;
}
.free-binder-create-card p{
  color:#77849a;
}
.free-binder-create-card ul{
  margin:18px 0 0;
  padding-left:20px;
  color:#66758d;
  line-height:1.9;
}
.free-art-preview-section{
  margin-top:45px;
}
.free-art-preview-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.free-art-card{
  padding:12px;
  border:1px solid #dfe7ef;
  border-radius:18px;
  background:#fff;
}
.free-art-card-visual{
  aspect-ratio:4/3;
  border-radius:13px;
}
.free-art-card b,
.free-art-card small{
  display:block;
}
.free-art-card b{
  margin-top:10px;
  color:#34435e;
}
.free-art-card small{
  margin-top:3px;
  color:#8490a3;
}

.free-binder-hero{
  position:relative;
  padding:118px 0 42px;
  background:
    radial-gradient(circle at 12% 18%,rgba(91,194,242,.14),transparent 32%),
    radial-gradient(circle at 88% 14%,rgba(137,96,235,.12),transparent 34%),
    linear-gradient(135deg,#eefaff,#f7f3ff 58%,#fff);
}
.free-binder-hero-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}
.free-binder-hero h1{
  margin:8px 0;
  color:#2e405f;
  font-size:clamp(34px,5vw,58px);
}
.free-binder-hero p{
  color:#6d7b93;
}
.free-binder-hero .progress{
  max-width:560px;
}
.free-binder-hero-actions{
  display:grid;
  gap:9px;
  width:min(100%,490px);
}
.free-binder-inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.free-binder-side-navigation{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:13px;
  scrollbar-width:thin;
}
.free-binder-side-navigation button{
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  border:1px solid #d9e5ee;
  border-radius:999px;
  background:#fff;
  color:#68758d;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.free-binder-side-navigation button.active{
  border-color:transparent;
  background:linear-gradient(135deg,var(--art-a),var(--art-b));
  color:#fff;
}
.free-binder-book{
  position:relative;
  min-height:720px;
  margin-top:10px;
  padding:25px 25px 25px 58px;
  border:1px solid rgba(52,71,102,.12);
  border-radius:30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.56)),
    linear-gradient(135deg,var(--art-a),var(--art-b));
  box-shadow:0 30px 80px rgba(51,69,98,.18);
}
.free-binder-rings{
  position:absolute;
  top:55px;
  bottom:55px;
  left:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}
.free-binder-rings i{
  width:44px;
  height:15px;
  border:4px solid rgba(255,255,255,.95);
  border-right:0;
  border-radius:14px 0 0 14px;
  filter:drop-shadow(0 4px 3px rgba(50,62,84,.15));
}
.free-binder-page{
  display:none;
  min-height:670px;
  padding:24px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:23px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.6));
  backdrop-filter:blur(12px);
}
.free-binder-page.active{
  display:block;
}
.free-binder-page>header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.free-binder-page>header span{
  color:#7957d4;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}
.free-binder-page>header h2{
  margin:3px 0 0;
  color:#32435f;
}
.free-binder-page>header small{
  color:#7e8a9f;
}
.free-binder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.free-binder-slot{
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.free-binder-pocket{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:63/88;
  padding:8px;
  border:1px solid rgba(132,148,172,.25);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.76),rgba(239,246,252,.48));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 10px 24px rgba(48,66,94,.08);
  overflow:hidden;
}
.free-binder-slot:hover .free-binder-pocket{
  transform:translateY(-2px);
  border-color:rgba(121,82,222,.4);
}
.free-binder-pocket img{
  width:100%;
  height:100%;
  border-radius:10px;
  object-fit:contain;
}
.free-binder-card-meta{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  padding:6px 7px;
  border-radius:8px;
  background:rgba(35,47,70,.78);
  color:#fff;
  font-size:8px;
  font-style:normal;
  font-weight:800;
  text-align:center;
}
.free-binder-empty-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px dashed #c9d5e2;
  border-radius:50%;
  color:#8a67df;
  font-size:25px;
  font-style:normal;
}
.free-binder-pocket>small{
  margin-top:8px;
  color:#8a96a8;
}
.free-binder-slot>strong,
.free-binder-slot>small{
  display:block;
}
.free-binder-slot>strong{
  margin-top:8px;
  color:#35445f;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.free-binder-slot>small{
  margin-top:2px;
  color:#8a95a7;
  font-size:9px;
}
.free-binder-collection-empty{
  margin-bottom:22px;
  padding:24px;
  border:1px solid #e4d9b5;
  border-radius:20px;
  background:#fffaf0;
  text-align:center;
}
.free-binder-collection-empty h2{
  margin:0 0 7px;
  color:#524732;
}
.free-binder-collection-empty p{
  color:#82765f;
}
.free-binder-slot-modal .modal-card{
  width:min(94vw,760px);
  max-height:88vh;
  overflow:auto;
}
.free-binder-card-search{
  margin:16px 0 12px;
}
.free-binder-card-picker{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  max-height:430px;
  overflow:auto;
  padding:2px;
}
.free-binder-picker-card{
  display:grid;
  grid-template-columns:55px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid #dfe7ef;
  border-radius:13px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.free-binder-picker-card:hover,
.free-binder-picker-card.selected{
  border-color:#976cf0;
  background:#f8f4ff;
}
.free-binder-picker-card img{
  width:55px;
  aspect-ratio:63/88;
  object-fit:contain;
}
.free-binder-picker-card b,
.free-binder-picker-card small{
  display:block;
}
.free-binder-picker-card b{
  color:#34435d;
  font-size:11px;
}
.free-binder-picker-card small{
  margin-top:4px;
  color:#8490a2;
  font-size:9px;
  line-height:1.5;
}
.free-binder-modal-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
}

@media(max-width:900px){
  .free-binder-intro,
  .free-binder-cover{
    grid-template-columns:1fr;
  }
  .free-art-preview-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .free-binder-hero-inner{
    align-items:stretch;
    flex-direction:column;
  }
  .free-binder-hero-actions{
    width:100%;
  }
}
@media(max-width:680px){
  .free-binder-index,
  .free-binder-workspace{
    padding:28px 0 58px;
  }
  .free-binder-intro{
    padding:22px;
  }
  .free-binder-create-card{
    align-items:stretch;
    flex-direction:column;
  }
  .free-art-preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .free-binder-book{
    min-height:560px;
    padding:15px 12px 15px 34px;
    border-radius:22px;
  }
  .free-binder-rings{
    left:8px;
  }
  .free-binder-rings i{
    width:30px;
    height:11px;
    border-width:3px;
  }
  .free-binder-page{
    min-height:525px;
    padding:14px;
  }
  .free-binder-grid{
    gap:8px;
  }
  .free-binder-pocket{
    padding:4px;
    border-radius:10px;
  }
  .free-binder-slot>strong{
    font-size:9px;
  }
  .free-binder-card-meta{
    right:6px;
    bottom:6px;
    left:6px;
    font-size:6px;
  }
  .free-binder-card-picker{
    grid-template-columns:1fr;
  }
  .free-binder-inline-form{
    grid-template-columns:1fr;
  }
}


/* ============================================================
 * PokeCardia V3.17.1
 * Binder Artwork & Visual Polish
 * ============================================================ */

/* Binder dibuat lebih ringkas dan proporsional di desktop. */
.free-binder-workspace .container{
  max-width:1180px!important;
}
.free-binder-book{
  min-height:auto!important;
  max-width:1080px;
  margin:12px auto 0!important;
  padding:22px 22px 22px 56px!important;
}
.free-binder-page{
  min-height:auto!important;
  padding:20px!important;
}
.free-binder-grid{
  gap:12px!important;
}
.free-binder-pocket{
  max-height:340px;
}
.free-binder-slot>strong{
  margin-top:6px!important;
}

/* Artwork panel */
.free-binder-art-panel{
  display:none;
  padding:28px 0;
  background:
    linear-gradient(135deg,var(--art-c),#fff);
  border-top:1px solid rgba(63,79,108,.08);
  border-bottom:1px solid rgba(63,79,108,.08);
}
.free-binder-art-panel.is-open{
  display:block;
}
.free-binder-art-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.free-binder-art-panel-head h2{
  margin:6px 0 5px;
  color:#30415f;
}
.free-binder-art-panel-head p{
  margin:0;
  color:#72809a;
}
.free-binder-art-picker{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.free-binder-art-option{
  display:grid;
  gap:10px;
  padding:11px;
  border:2px solid transparent;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(49,68,98,.08);
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.free-binder-art-option:hover{
  transform:translateY(-2px);
}
.free-binder-art-option.active{
  border-color:var(--art-b);
  box-shadow:0 15px 35px rgba(87,64,170,.18);
}
.free-binder-art-option.is-saving{
  opacity:.55;
  pointer-events:none;
}
.free-binder-art-option.is-success{
  transform:scale(.98);
}
.free-binder-art-swatch{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:13px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.75),transparent 25%),
    linear-gradient(135deg,var(--art-a),var(--art-b));
}
.free-binder-art-swatch i{
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,.3);
}
.free-binder-art-swatch i:nth-child(1){
  width:70px;
  height:70px;
  top:-18px;
  right:-12px;
}
.free-binder-art-swatch i:nth-child(2){
  width:38px;
  height:38px;
  left:14px;
  bottom:12px;
}
.free-binder-art-swatch i:nth-child(3){
  width:90px;
  height:12px;
  left:25%;
  top:50%;
  transform:rotate(-24deg);
}
.free-binder-art-option>span:nth-child(2) b,
.free-binder-art-option>span:nth-child(2) small{
  display:block;
}
.free-binder-art-option>span:nth-child(2) b{
  color:#34445f;
  font-size:12px;
}
.free-binder-art-option>span:nth-child(2) small{
  margin-top:3px;
  color:#8793a6;
  font-size:9px;
}
.free-binder-art-option>strong{
  color:var(--art-b);
  font-size:10px;
}

.free-binder-book{
  background:
    linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.57)),
    linear-gradient(135deg,var(--art-a),var(--art-b))!important;
}
.free-binder-page{
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.64))!important;
}
.free-binder-side-navigation button.active{
  box-shadow:0 8px 20px color-mix(in srgb,var(--art-b) 28%,transparent);
}

@media(max-width:900px){
  .free-binder-art-picker{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .free-binder-art-picker{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .free-binder-art-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .free-binder-book{
    padding:12px 10px 12px 30px!important;
  }
}


/* ============================================================
 * PokeCardia V3.17.2
 * Artwork Applied to Binder Only
 * ============================================================ */

/* Default variables are defined directly, without self-reference. */
.free-binder-preview,
.free-binder-cover,
.free-art-card,
.free-binder-art-option,
.free-binder-book{
  --art-a:#68d5f3;
  --art-b:#7165ed;
  --art-c:#f7fbff;
}

/* Header and workspace remain neutral. Artwork changes only binder. */
.free-binder-workspace{
  background:
    radial-gradient(circle at 14% 8%,rgba(94,198,244,.1),transparent 29%),
    radial-gradient(circle at 86% 10%,rgba(139,100,237,.08),transparent 29%),
    linear-gradient(180deg,#f8fcff,#fff)!important;
}

.free-binder-art-panel{
  background:
    linear-gradient(135deg,#f7fbff,#fbf8ff)!important;
}

/* Actual binder body receives the selected artwork. */
.free-binder-book{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 8%,rgba(255,255,255,.72),transparent 22%),
    radial-gradient(circle at 92% 8%,rgba(255,255,255,.28),transparent 22%),
    linear-gradient(135deg,var(--art-a),var(--art-b))!important;
  transition:background .28s ease, box-shadow .28s ease;
}
.free-binder-book::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.08) 0 2px,
      transparent 2px 18px
    );
  opacity:.42;
}
.free-binder-book>.free-binder-rings,
.free-binder-book>.free-binder-page{
  position:relative;
  z-index:1;
}
.free-binder-page{
  border-color:rgba(255,255,255,.84)!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.91),
      color-mix(in srgb,var(--art-c) 42%,white)
    )!important;
}

/* Artwork selector previews */
.free-binder-art-option{
  --art-a:#68d5f3;
  --art-b:#7165ed;
  --art-c:#f7fbff;
}
.free-binder-art-option.active{
  border-color:var(--art-b)!important;
}
.free-binder-art-swatch{
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.78),transparent 25%),
    linear-gradient(135deg,var(--art-a),var(--art-b))!important;
}

/* Binder landing visuals */
.free-binder-preview,
.free-binder-cover{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.72),transparent 24%),
    radial-gradient(circle at 84% 12%,rgba(255,255,255,.35),transparent 18%),
    linear-gradient(135deg,var(--art-a),var(--art-b))!important;
}
.free-binder-cover{
  color:#fff!important;
}
.free-binder-cover-copy h2,
.free-binder-cover-copy p,
.free-binder-cover-copy strong,
.free-binder-cover-copy>span{
  color:#fff!important;
}
.free-binder-cover-copy p{
  opacity:.88;
}

/* Artwork cards now show actual swatches instead of blank white boxes. */
.free-art-card{
  --art-a:#68d5f3;
  --art-b:#7165ed;
  --art-c:#f7fbff;
}
.free-art-card-visual{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.78),transparent 24%),
    linear-gradient(135deg,var(--art-a),var(--art-b))!important;
}
.free-art-card-visual i{
  position:absolute;
  display:block;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
.free-art-card-visual i:nth-child(1){
  width:72px;
  height:72px;
  top:-20px;
  right:-15px;
}
.free-art-card-visual i:nth-child(2){
  width:42px;
  height:42px;
  left:15px;
  bottom:12px;
}
.free-art-card-visual i:nth-child(3){
  width:95px;
  height:12px;
  left:28%;
  top:50%;
  transform:rotate(-25deg);
}

/* Explicit theme values */
.art-sky{
  --art-a:#5fd4f2;
  --art-b:#6d67ef;
  --art-c:#eefbff;
}
.art-lavender{
  --art-a:#a176f0;
  --art-b:#df91ed;
  --art-c:#fff3ff;
}
.art-ember{
  --art-a:#ff9568;
  --art-b:#f24771;
  --art-c:#fff2e8;
}
.art-ocean{
  --art-a:#39bfd8;
  --art-b:#2b79d8;
  --art-c:#eafcff;
}
.art-forest{
  --art-a:#75cf72;
  --art-b:#229579;
  --art-c:#efffed;
}

/* Avoid color-mix fallback issues on older browsers. */
@supports not (background:color-mix(in srgb, red 50%, white)){
  .free-binder-page{
    background:rgba(255,255,255,.88)!important;
  }
}


/* ============================================================
 * PokeCardia V3.17.3
 * Elemental Binder Backgrounds
 * ============================================================ */

/* Binder artwork is now shown mainly behind the cards / page area. */
.free-binder-page{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:rgba(255,255,255,.84)!important;
}
.free-binder-page::before,
.free-binder-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.free-binder-page > *{
  position:relative;
  z-index:1;
}

.free-binder-book .free-binder-page::before{
  opacity:.92;
}
.free-binder-book .free-binder-page::after{
  opacity:.30;
  mix-blend-mode:soft-light;
}

/* Page background per element theme */
.free-binder-book.art-sky .free-binder-page{
  background:linear-gradient(180deg,rgba(255,253,236,.96),rgba(255,246,198,.93))!important;
}
.free-binder-book.art-sky .free-binder-page::before{
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.75),transparent 16%),
    radial-gradient(circle at 84% 15%,rgba(255,241,120,.78),transparent 18%),
    linear-gradient(125deg,transparent 0 18%,rgba(255,213,51,.24) 18% 20%,transparent 20% 45%,rgba(255,223,92,.22) 45% 47%,transparent 47% 100%),
    linear-gradient(35deg,transparent 0 54%,rgba(255,209,51,.20) 54% 56%,transparent 56% 72%,rgba(255,235,125,.18) 72% 74%,transparent 74% 100%),
    linear-gradient(155deg,rgba(255,237,116,.28),rgba(255,249,218,.04));
}
.free-binder-book.art-sky .free-binder-page::after{
  background:
    radial-gradient(circle at 18% 74%,rgba(255,196,0,.24),transparent 20%),
    radial-gradient(circle at 84% 76%,rgba(255,215,0,.20),transparent 18%),
    radial-gradient(circle at 54% 56%,rgba(255,231,119,.12),transparent 26%);
}

.free-binder-book.art-lavender .free-binder-page{
  background:linear-gradient(180deg,rgba(244,255,244,.96),rgba(228,247,224,.92))!important;
}
.free-binder-book.art-lavender .free-binder-page::before{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.55),transparent 15%),
    radial-gradient(circle at 82% 14%,rgba(224,245,214,.72),transparent 18%),
    radial-gradient(ellipse 16% 8% at 14% 76%,rgba(71,161,82,.20),transparent 70%),
    radial-gradient(ellipse 16% 8% at 86% 68%,rgba(68,155,82,.18),transparent 70%),
    radial-gradient(ellipse 21% 10% at 72% 36%,rgba(76,163,90,.16),transparent 70%),
    radial-gradient(ellipse 21% 10% at 28% 40%,rgba(101,182,113,.16),transparent 70%),
    linear-gradient(145deg,rgba(142,205,112,.10),rgba(255,255,255,0));
}
.free-binder-book.art-lavender .free-binder-page::after{
  background:
    linear-gradient(32deg,transparent 0 46%,rgba(255,255,255,.28) 46% 48%,transparent 48% 100%),
    linear-gradient(148deg,transparent 0 58%,rgba(255,255,255,.20) 58% 60%,transparent 60% 100%);
}

.free-binder-book.art-ember .free-binder-page{
  background:linear-gradient(180deg,rgba(255,247,240,.96),rgba(255,231,217,.92))!important;
}
.free-binder-book.art-ember .free-binder-page::before{
  background:
    radial-gradient(circle at 18% 14%,rgba(255,241,222,.74),transparent 15%),
    radial-gradient(circle at 82% 16%,rgba(255,192,140,.42),transparent 17%),
    radial-gradient(circle at 24% 82%,rgba(255,112,54,.30),transparent 20%),
    radial-gradient(circle at 76% 72%,rgba(224,45,78,.24),transparent 22%),
    repeating-linear-gradient(145deg,rgba(92,31,21,.08) 0 8px,transparent 8px 22px),
    linear-gradient(155deg,rgba(255,130,70,.20),rgba(255,255,255,0));
}
.free-binder-book.art-ember .free-binder-page::after{
  background:
    linear-gradient(18deg,transparent 0 42%,rgba(255,255,255,.12) 42% 44%,transparent 44% 100%),
    linear-gradient(162deg,transparent 0 58%,rgba(255,255,255,.10) 58% 60%,transparent 60% 100%),
    radial-gradient(circle at 56% 58%,rgba(255,146,72,.16),transparent 24%);
}

.free-binder-book.art-ocean .free-binder-page{
  background:linear-gradient(180deg,rgba(239,251,255,.96),rgba(222,242,255,.92))!important;
}
.free-binder-book.art-ocean .free-binder-page::before{
  background:
    radial-gradient(circle at 14% 14%,rgba(255,255,255,.60),transparent 12%),
    radial-gradient(circle at 82% 16%,rgba(207,240,255,.58),transparent 15%),
    radial-gradient(circle at 72% 78%,rgba(77,182,222,.20),transparent 20%),
    linear-gradient(180deg,rgba(79,180,227,.16),rgba(255,255,255,0)),
    repeating-radial-gradient(circle at 20% 18%,rgba(255,255,255,.08) 0 8px,transparent 8px 26px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 18px);
}
.free-binder-book.art-ocean .free-binder-page::after{
  background:
    radial-gradient(circle at 32% 72%,rgba(118,216,255,.14),transparent 20%),
    linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.12) 10% 12%,transparent 12% 100%),
    linear-gradient(180deg,transparent 0 68%,rgba(255,255,255,.08) 68% 70%,transparent 70% 100%);
}

.free-binder-book.art-forest .free-binder-page{
  background:linear-gradient(180deg,rgba(248,244,235,.97),rgba(234,226,211,.93))!important;
}
.free-binder-book.art-forest .free-binder-page::before{
  background:
    radial-gradient(circle at 14% 16%,rgba(255,255,255,.48),transparent 12%),
    radial-gradient(circle at 82% 16%,rgba(226,214,191,.66),transparent 18%),
    linear-gradient(145deg,rgba(125,97,72,.20),rgba(255,255,255,0) 30%),
    linear-gradient(35deg,rgba(164,141,111,.13),rgba(255,255,255,0) 26%),
    repeating-linear-gradient(160deg,rgba(118,101,79,.06) 0 8px,transparent 8px 24px),
    repeating-linear-gradient(20deg,rgba(255,255,255,.08) 0 10px,transparent 10px 24px);
}
.free-binder-book.art-forest .free-binder-page::after{
  background:
    radial-gradient(circle at 28% 76%,rgba(173,150,117,.18),transparent 19%),
    radial-gradient(circle at 78% 68%,rgba(138,116,92,.16),transparent 17%),
    linear-gradient(180deg,transparent 0 74%,rgba(255,255,255,.08) 74% 76%,transparent 76% 100%);
}

/* Small decorative element icons behind slots */
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+1)::before,
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+1)::before,
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+1)::before,
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+1)::before,
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+1)::before,
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+2)::before,
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+2)::before,
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+2)::before,
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+2)::before,
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+2)::before,
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+3)::before,
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+3)::before,
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+3)::before,
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+3)::before,
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  pointer-events:none;
  opacity:.16;
}
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+1)::before{
  background:linear-gradient(135deg,transparent 0 34%,rgba(255,215,64,.42) 34% 38%,transparent 38% 100%);
}
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+2)::before{
  background:linear-gradient(45deg,transparent 0 56%,rgba(255,224,96,.34) 56% 60%,transparent 60% 100%);
}
.free-binder-book.art-sky .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  background:radial-gradient(circle at 70% 30%,rgba(255,221,88,.30),transparent 26%);
}
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+1)::before{
  background:radial-gradient(ellipse 40% 24% at 36% 28%,rgba(101,182,113,.34),transparent 70%);
}
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+2)::before{
  background:radial-gradient(ellipse 34% 20% at 70% 70%,rgba(78,165,91,.30),transparent 70%);
}
.free-binder-book.art-lavender .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  background:linear-gradient(35deg,transparent 0 45%,rgba(126,199,132,.18) 45% 49%,transparent 49% 100%);
}
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+1)::before{
  background:radial-gradient(circle at 36% 34%,rgba(255,118,48,.38),transparent 28%);
}
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+2)::before{
  background:linear-gradient(155deg,transparent 0 50%,rgba(216,61,74,.18) 50% 53%,transparent 53% 100%);
}
.free-binder-book.art-ember .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  background:repeating-linear-gradient(135deg,rgba(92,31,21,.06) 0 5px,transparent 5px 12px);
}
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+1)::before{
  background:repeating-linear-gradient(0deg,rgba(76,191,232,.10) 0 3px,transparent 3px 12px);
}
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+2)::before{
  background:radial-gradient(circle at 30% 72%,rgba(120,219,255,.18),transparent 25%);
}
.free-binder-book.art-ocean .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  background:linear-gradient(90deg,transparent 0 16%,rgba(255,255,255,.14) 16% 18%,transparent 18% 100%);
}
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+1)::before{
  background:repeating-linear-gradient(150deg,rgba(120,101,76,.08) 0 6px,transparent 6px 16px);
}
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+2)::before{
  background:radial-gradient(circle at 64% 28%,rgba(169,144,110,.20),transparent 25%);
}
.free-binder-book.art-forest .free-binder-page .free-binder-slot:nth-child(3n+3)::before{
  background:linear-gradient(35deg,transparent 0 48%,rgba(189,168,140,.16) 48% 52%,transparent 52% 100%);
}

/* Pockets stay readable while letting page art be visible around the cards. */
.free-binder-pocket{
  backdrop-filter:blur(4px);
  background:
    linear-gradient(145deg,rgba(255,255,255,.78),rgba(246,249,253,.42));
}
.free-binder-slot:hover .free-binder-pocket{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 14px 28px rgba(48,66,94,.12);
}

/* Theme selector / preview visuals now match the elemental concepts. */
.free-binder-art-swatch,
.free-art-card-visual,
.free-binder-preview,
.free-binder-cover{
  position:relative;
  overflow:hidden;
}
.free-binder-art-swatch i,
.free-art-card-visual i{
  opacity:.72;
}

.art-sky.free-binder-art-option,
.art-sky.free-art-card,
.art-sky.free-binder-preview,
.art-sky.free-binder-cover,
.art-sky .free-binder-art-swatch,
.art-sky .free-art-card-visual,
.free-binder-preview.art-sky,
.free-binder-cover.art-sky{
  --art-a:#ffe158;
  --art-b:#f3b424;
  --art-c:#fff8d3;
}
.art-lavender.free-binder-art-option,
.art-lavender.free-art-card,
.art-lavender.free-binder-preview,
.art-lavender.free-binder-cover,
.art-lavender .free-binder-art-swatch,
.art-lavender .free-art-card-visual,
.free-binder-preview.art-lavender,
.free-binder-cover.art-lavender{
  --art-a:#7fd573;
  --art-b:#2da56c;
  --art-c:#eefceb;
}
.art-ember.free-binder-art-option,
.art-ember.free-art-card,
.art-ember.free-binder-preview,
.art-ember.free-binder-cover,
.art-ember .free-binder-art-swatch,
.art-ember .free-art-card-visual,
.free-binder-preview.art-ember,
.free-binder-cover.art-ember{
  --art-a:#ff9a4d;
  --art-b:#d94157;
  --art-c:#fff2e9;
}
.art-ocean.free-binder-art-option,
.art-ocean.free-art-card,
.art-ocean.free-binder-preview,
.art-ocean.free-binder-cover,
.art-ocean .free-binder-art-swatch,
.art-ocean .free-art-card-visual,
.free-binder-preview.art-ocean,
.free-binder-cover.art-ocean{
  --art-a:#55c5ee;
  --art-b:#2c75da;
  --art-c:#ecfbff;
}
.art-forest.free-binder-art-option,
.art-forest.free-art-card,
.art-forest.free-binder-preview,
.art-forest.free-binder-cover,
.art-forest .free-binder-art-swatch,
.art-forest .free-art-card-visual,
.free-binder-preview.art-forest,
.free-binder-cover.art-forest{
  --art-a:#b99666;
  --art-b:#78634d;
  --art-c:#f6efe6;
}

/* Decorative swatch motifs */
.art-sky .free-binder-art-swatch,
.art-sky .free-art-card-visual,
.free-binder-preview.art-sky,
.free-binder-cover.art-sky{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.78),transparent 23%),
    linear-gradient(135deg,transparent 0 30%,rgba(255,247,179,.45) 30% 34%,transparent 34% 100%),
    linear-gradient(45deg,transparent 0 60%,rgba(255,214,74,.36) 60% 64%,transparent 64% 100%),
    linear-gradient(135deg,#ffe670,#f3b424)!important;
}
.art-lavender .free-binder-art-swatch,
.art-lavender .free-art-card-visual,
.free-binder-preview.art-lavender,
.free-binder-cover.art-lavender{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.7),transparent 23%),
    radial-gradient(ellipse 28% 14% at 26% 76%,rgba(184,240,173,.42),transparent 70%),
    radial-gradient(ellipse 24% 12% at 78% 28%,rgba(135,212,132,.36),transparent 70%),
    linear-gradient(135deg,#9be27e,#33a565)!important;
}
.art-ember .free-binder-art-swatch,
.art-ember .free-art-card-visual,
.free-binder-preview.art-ember,
.free-binder-cover.art-ember{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,244,236,.66),transparent 23%),
    radial-gradient(circle at 28% 78%,rgba(255,173,102,.34),transparent 28%),
    linear-gradient(145deg,transparent 0 56%,rgba(255,219,201,.18) 56% 59%,transparent 59% 100%),
    linear-gradient(135deg,#ff9f57,#e54d54)!important;
}
.art-ocean .free-binder-art-swatch,
.art-ocean .free-art-card-visual,
.free-binder-preview.art-ocean,
.free-binder-cover.art-ocean{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.72),transparent 23%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 2px,transparent 2px 10px),
    radial-gradient(circle at 78% 76%,rgba(128,228,255,.24),transparent 24%),
    linear-gradient(135deg,#64d1f0,#2e7de0)!important;
}
.art-forest .free-binder-art-swatch,
.art-forest .free-art-card-visual,
.free-binder-preview.art-forest,
.free-binder-cover.art-forest{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.7),transparent 23%),
    repeating-linear-gradient(145deg,rgba(97,77,59,.10) 0 6px,transparent 6px 18px),
    radial-gradient(circle at 74% 70%,rgba(215,186,142,.18),transparent 24%),
    linear-gradient(135deg,#c6a170,#7f6951)!important;
}

/* Art cards should use neutral label style and still look filled. */
.free-art-card-visual,
.free-binder-art-swatch{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
}


/* ============================================================
 * PokeCardia V3.18.0
 * Uploaded Binder Artwork Rendering
 * ============================================================ */
.free-binder-book[style*="--binder-art-image"]
  .free-binder-page::before{
  background-image:
    linear-gradient(
      rgba(255,255,255,.22),
      rgba(255,255,255,.18)
    ),
    var(--binder-art-image)!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.76!important;
}
.free-binder-book[style*="--binder-art-image"]
  .free-binder-page::after{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.28),
      transparent 44%,
      rgba(255,255,255,.13)
    )!important;
  opacity:.55!important;
}
.free-binder-art-swatch[style*="background-image"],
.free-art-card-visual[style*="background-image"]{
  background-size:cover!important;
  background-position:center!important;
}
.free-binder-cover[style*="--binder-cover-image"]{
  background:
    linear-gradient(
      90deg,
      rgba(31,43,68,.63),
      rgba(31,43,68,.18)
    ),
    var(--binder-cover-image)!important;
  background-size:cover!important;
  background-position:center!important;
}


/* ============================================================
 * PokeCardia V3.18.2
 * Binder Header & Slot Modal Polish
 * ============================================================ */

/* Binder header controls */
.free-binder-hero-actions{
  width:min(100%,560px)!important;
  gap:12px!important;
}
.free-binder-name-card{
  display:grid;
  gap:8px;
  padding:17px;
  border:1px solid rgba(205,217,232,.9);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 34px rgba(49,66,99,.08);
}
.free-binder-name-card>label{
  margin:0!important;
  color:#65738c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.free-binder-name-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.free-binder-field-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #d8e2ee;
  border-radius:13px;
  background:#f6f8ff;
  color:#7d5be1;
  font-size:18px;
}
.free-binder-name-row .input{
  min-height:44px;
  margin:0!important;
  border-color:#cfd9e8!important;
  background:#fff!important;
  font-size:15px;
  font-weight:750;
}
.free-binder-name-row .btn{
  min-height:44px;
  padding:0 16px!important;
  gap:7px;
  border-radius:13px!important;
}
.free-binder-art-open{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  border:1px solid #d9ccfb!important;
  border-radius:15px!important;
  background:
    linear-gradient(135deg,#fff,#f8f4ff)!important;
  color:#6546ca!important;
  box-shadow:0 10px 25px rgba(105,73,190,.08);
}
.free-binder-art-open i{
  position:absolute;
  right:16px;
  color:#c7b2ff;
  font-style:normal;
}

/* Slot modal shell */
.free-binder-slot-modal{
  padding:24px!important;
  background:rgba(25,34,54,.42)!important;
  backdrop-filter:blur(10px);
}
.free-binder-slot-modal .modal-card{
  width:min(94vw,820px)!important;
  max-height:90vh!important;
  padding:28px!important;
  border:1px solid rgba(215,222,235,.95)!important;
  border-radius:28px!important;
  background:
    linear-gradient(180deg,#fff,#fbfcff)!important;
  box-shadow:0 35px 90px rgba(30,43,72,.28)!important;
}
.free-binder-slot-modal .modal-close{
  top:18px!important;
  right:18px!important;
  display:grid!important;
  place-items:center;
  width:40px!important;
  height:40px!important;
  border:1px solid #d9e1ec!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#66758f!important;
  font-size:24px!important;
  box-shadow:0 8px 18px rgba(43,57,84,.08);
}
.free-binder-modal-heading{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding-right:48px;
  padding-bottom:20px;
  border-bottom:1px solid #e5ebf2;
}
.free-binder-modal-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:22px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.62),transparent 30%),
    linear-gradient(135deg,#a984ff,#7148e8);
  color:#fff;
  font-size:30px;
  box-shadow:0 13px 28px rgba(111,72,224,.22);
}
.free-binder-modal-heading h2{
  margin:5px 0 4px!important;
  color:#293d62!important;
  font-size:27px!important;
}
.free-binder-modal-heading p{
  margin:0!important;
  color:#72809a!important;
  font-size:13px!important;
}
.free-binder-search-wrap{
  position:relative;
  margin:20px 0 14px;
}
.free-binder-search-wrap>span{
  position:absolute;
  top:50%;
  left:16px;
  z-index:2;
  transform:translateY(-50%);
  color:#7887a2;
  font-size:24px;
}
.free-binder-card-search{
  min-height:50px!important;
  margin:0!important;
  padding-left:52px!important;
  border:1px solid #ccd8e7!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(45,62,92,.05);
}

/* Picker cards */
.free-binder-card-picker{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  max-height:420px!important;
  padding:3px!important;
}
.free-binder-picker-card{
  position:relative;
  grid-template-columns:76px minmax(0,1fr) 28px!important;
  min-height:132px;
  gap:14px!important;
  padding:14px!important;
  border:1px solid #d8e2ef!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 9px 22px rgba(43,61,92,.06);
  transition:.18s ease;
}
.free-binder-picker-card:hover{
  transform:translateY(-1px);
  border-color:#bdacef!important;
  box-shadow:0 13px 28px rgba(79,61,140,.11);
}
.free-binder-picker-card.selected{
  border-color:#8e65eb!important;
  background:#faf7ff!important;
  box-shadow:
    0 0 0 2px rgba(142,101,235,.11),
    0 14px 30px rgba(83,60,150,.12);
}
.free-binder-picker-card img{
  width:76px!important;
  height:104px;
  aspect-ratio:auto!important;
  border-radius:8px;
  object-fit:contain!important;
  background:#f4f6fa;
}
.free-binder-picker-copy{
  display:flex!important;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.free-binder-picker-copy>b{
  display:block;
  max-width:100%;
  color:#293b61!important;
  font-size:14px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.free-binder-picker-meta{
  display:flex!important;
  align-items:center;
  gap:7px;
  margin:7px 0 8px;
}
.free-binder-picker-meta i{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:0 7px;
  border:1px solid #d8d4f2;
  border-radius:6px;
  background:#f4f1ff;
  color:#694dc9;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}
.free-binder-picker-meta small{
  color:#73809a!important;
  font-size:10px!important;
}
.free-binder-picker-copy>small{
  color:#71809a!important;
  font-size:11px!important;
  font-weight:750;
}
.free-binder-picker-radio{
  display:block;
  width:24px;
  height:24px;
  align-self:center;
  border:2px solid #ccd7e7;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 0 0 5px #fff;
}
.free-binder-picker-card.selected
  .free-binder-picker-radio{
  border-color:#8056e6;
  background:#8056e6;
}

/* Modal footer */
.free-binder-modal-actions{
  align-items:center!important;
  margin-top:20px!important;
  padding-top:18px;
  border-top:1px solid #e5ebf2;
}
.free-binder-modal-actions .btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 20px!important;
  border-radius:14px!important;
  font-weight:900!important;
}
.free-binder-modal-actions .btn-danger{
  min-width:190px;
  border:1px solid #f2a7b3!important;
  background:#fff!important;
  color:#e43e5d!important;
}
.free-binder-modal-actions .btn-primary{
  min-width:220px;
  background:
    linear-gradient(135deg,#734ae7,#9b5cff)!important;
  box-shadow:0 13px 28px rgba(117,73,226,.22)!important;
}
.free-binder-modal-actions .btn-primary:disabled{
  opacity:.45!important;
  box-shadow:none!important;
}

@media(max-width:720px){
  .free-binder-name-row{
    grid-template-columns:40px minmax(0,1fr);
  }
  .free-binder-name-row .btn{
    grid-column:1 / -1;
    width:100%;
  }
  .free-binder-slot-modal{
    padding:10px!important;
  }
  .free-binder-slot-modal .modal-card{
    padding:20px 15px!important;
    border-radius:22px!important;
  }
  .free-binder-modal-heading{
    grid-template-columns:56px minmax(0,1fr);
    gap:12px;
  }
  .free-binder-modal-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:24px;
  }
  .free-binder-modal-heading h2{
    font-size:22px!important;
  }
  .free-binder-card-picker{
    grid-template-columns:1fr!important;
  }
  .free-binder-picker-card{
    grid-template-columns:64px minmax(0,1fr) 26px!important;
    min-height:112px;
  }
  .free-binder-picker-card img{
    width:64px!important;
    height:88px;
  }
  .free-binder-modal-actions{
    align-items:stretch!important;
    flex-direction:column-reverse;
  }
  .free-binder-modal-actions .btn{
    width:100%;
    min-width:0;
  }
}


/* ============================================================
 * PokeCardia V3.18.3
 * Binder Spacing Fix
 * ============================================================ */

.free-binder-grid{
  grid-template-columns:repeat(3,minmax(0,244px))!important;
  justify-content:center!important;
  column-gap:20px!important;
  row-gap:24px!important;
}

.free-binder-slot{
  position:relative;
  width:100%;
  max-width:244px;
  justify-self:center;
}

.free-binder-slot.filled .free-binder-pocket{
  padding:0!important;
  border:0!important;
  border-radius:13px!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:visible!important;
}

.free-binder-slot.filled .free-binder-pocket img{
  display:block;
  width:100%!important;
  height:auto!important;
  max-width:244px;
  margin:0 auto;
  border:0!important;
  outline:0!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:0 11px 24px rgba(35,49,77,.18);
}

.free-binder-slot.filled .free-binder-card-meta{
  right:8px!important;
  bottom:8px!important;
  left:8px!important;
  border-radius:7px!important;
  background:rgba(34,46,69,.76)!important;
}

.free-binder-slot>strong{
  margin-top:7px!important;
}

.free-binder-slot>small{
  margin-top:1px!important;
}

.free-binder-slot.empty .free-binder-pocket{
  min-height:0;
  border:1px solid rgba(154,168,190,.24)!important;
  border-radius:14px!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.58),
      rgba(246,249,253,.26)
    )!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    0 8px 18px rgba(48,66,94,.05)!important;
}

.free-binder-page{
  padding:20px 22px!important;
}

@media(min-width:1180px){
  .free-binder-grid{
    grid-template-columns:repeat(3,236px)!important;
    column-gap:18px!important;
  }

  .free-binder-slot{
    max-width:236px;
  }

  .free-binder-slot.filled .free-binder-pocket img{
    max-width:236px;
  }
}

@media(max-width:900px){
  .free-binder-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:12px!important;
    row-gap:18px!important;
  }

  .free-binder-slot,
  .free-binder-slot.filled .free-binder-pocket img{
    max-width:none;
  }
}

@media(max-width:680px){
  .free-binder-page{
    padding:13px!important;
  }

  .free-binder-grid{
    column-gap:7px!important;
    row-gap:12px!important;
  }

  .free-binder-slot.filled .free-binder-pocket img{
    border-radius:8px!important;
    box-shadow:0 7px 15px rgba(35,49,77,.15);
  }

  .free-binder-slot.filled .free-binder-card-meta{
    right:4px!important;
    bottom:4px!important;
    left:4px!important;
    padding:4px!important;
  }

  .free-binder-slot>strong{
    margin-top:4px!important;
  }
}


/* ============================================================
 * PokeCardia V3.18.4
 * Binder Card Only + Name Input Polish
 * ============================================================ */

/* Di halaman binder, yang tampil hanya kartu. Nama dan rarity bawah kartu disembunyikan. */
.free-binder-slot.filled > strong,
.free-binder-slot.filled > small{
  display:none!important;
}

/* Karena meta bawah hilang, jarak antar row bisa lebih rapat. */
.free-binder-grid{
  row-gap:18px!important;
}

/* Textbox nama binder dibuat lebih rounded dan premium. */
.free-binder-name-card{
  display:grid;
  gap:10px;
  padding:18px!important;
  border:1px solid rgba(214,223,236,.95)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%)!important;
  box-shadow:0 16px 36px rgba(49,66,99,.07)!important;
}

.free-binder-name-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto!important;
  align-items:center;
  gap:10px!important;
}

.free-binder-name-row .input{
  min-height:52px!important;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid #d9e2ef!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfcff 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 18px rgba(44,62,92,.06)!important;
  font-size:15px!important;
  font-weight:800!important;
  color:#31425f!important;
  transition:all .18s ease!important;
}

.free-binder-name-row .input::placeholder{
  color:#97a3b8!important;
  font-weight:600!important;
}

.free-binder-name-row .input:focus{
  border-color:#9f7aea!important;
  box-shadow:
    0 0 0 4px rgba(159,122,234,.12),
    0 10px 24px rgba(115,74,231,.12)!important;
  background:#fff!important;
  outline:none!important;
}

.free-binder-field-icon{
  width:52px!important;
  height:52px!important;
  border-radius:16px!important;
}

.free-binder-name-row .btn{
  min-height:52px!important;
  border-radius:16px!important;
}

@media(max-width:720px){
  .free-binder-name-row{
    grid-template-columns:48px minmax(0,1fr)!important;
  }

  .free-binder-name-row .btn{
    grid-column:1 / -1;
    width:100%;
  }
}

@media(max-width:680px){
  .free-binder-grid{
    row-gap:10px!important;
  }
}


/* ============================================================
 * PokeCardia V3.18.5
 * Binder Floating Page Navigation
 * ============================================================ */

.free-binder-side-navigation{
  display:none!important;
}

.free-binder-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(100%,1040px);
  margin:0 auto 16px;
  padding:11px 14px;
  border:1px solid rgba(210,220,234,.86);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 28px rgba(42,58,92,.07);
  backdrop-filter:blur(12px);
}

.free-binder-page-status{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.free-binder-page-status span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  background:linear-gradient(135deg,#7b55e9,#9d67ff);
  color:#fff;
  font-size:11px;
  font-weight:950;
  box-shadow:0 8px 20px rgba(117,80,222,.18);
}

.free-binder-page-status small{
  color:#7a879c;
  font-size:11px;
  font-weight:800;
}

.free-binder-page-dots{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}

.free-binder-page-dots i{
  display:block;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#d2dbea;
  cursor:pointer;
  transition:.18s ease;
}

.free-binder-page-dots i.active{
  width:20px;
  background:#8259e9;
}

.free-binder-float-nav{
  position:absolute;
  top:50%;
  z-index:5;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(218,227,239,.92);
  border-radius:999px;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.95),transparent 32%),
    rgba(255,255,255,.86);
  color:#704fd4;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(44,62,94,.16);
  backdrop-filter:blur(12px);
  transform:translateY(-50%);
  transition:.18s ease;
}

.free-binder-float-nav:hover{
  transform:translateY(-50%) scale(1.06);
  border-color:#beaaf2;
  color:#5f3dc8;
  box-shadow:0 20px 42px rgba(91,66,165,.2);
}

.free-binder-float-nav.prev{
  left:-27px;
}

.free-binder-float-nav.next{
  right:-27px;
}

.free-binder-page{
  transform-origin:center;
}

.free-binder-page.active.turning-next{
  animation:pcBinderPageNext .28s ease both;
}

.free-binder-page.active.turning-prev{
  animation:pcBinderPagePrev .28s ease both;
}

@keyframes pcBinderPageNext{
  from{
    opacity:.35;
    transform:translateX(18px) scale(.985);
    filter:blur(1px);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@keyframes pcBinderPagePrev{
  from{
    opacity:.35;
    transform:translateX(-18px) scale(.985);
    filter:blur(1px);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@media(max-width:1180px){
  .free-binder-float-nav.prev{
    left:10px;
  }

  .free-binder-float-nav.next{
    right:10px;
  }
}

@media(max-width:760px){
  .free-binder-page-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .free-binder-page-dots{
    justify-content:flex-start;
  }

  .free-binder-float-nav{
    width:42px;
    height:42px;
    font-size:32px;
  }

  .free-binder-float-nav.prev{
    left:6px;
  }

  .free-binder-float-nav.next{
    right:6px;
  }
}


/* ============================================================
 * PokeCardia V3.18.6
 * Binder Floating Arrow Position Fix
 * ============================================================ */

/* Panah harus keluar dari badan binder, bukan kepotong di pinggir. */
.free-binder-book{
  overflow:visible!important;
}

.free-binder-float-nav{
  z-index:20!important;
  width:58px!important;
  height:58px!important;
}

/* Geser tombol lebih keluar dari frame binder. */
.free-binder-float-nav.prev{
  left:-78px!important;
}

.free-binder-float-nav.next{
  right:-78px!important;
}

/* Desktop sedang: tetap di luar, tapi tidak terlalu jauh. */
@media(max-width:1280px){
  .free-binder-float-nav.prev{
    left:-58px!important;
  }

  .free-binder-float-nav.next{
    right:-58px!important;
  }
}

/* Tablet: tombol tetap terlihat utuh, sedikit masuk tapi tidak menutupi slot. */
@media(max-width:980px){
  .free-binder-float-nav{
    width:48px!important;
    height:48px!important;
    font-size:36px!important;
  }

  .free-binder-float-nav.prev{
    left:-24px!important;
  }

  .free-binder-float-nav.next{
    right:-24px!important;
  }
}

/* Mobile: tombol masuk ke tepi binder agar tidak keluar layar. */
@media(max-width:680px){
  .free-binder-float-nav{
    width:40px!important;
    height:40px!important;
    font-size:30px!important;
  }

  .free-binder-float-nav.prev{
    left:6px!important;
  }

  .free-binder-float-nav.next{
    right:6px!important;
  }
}


/* ============================================================
 * PokeCardia V3.18.7
 * Binder Nav Button Beautify
 * ============================================================ */
.free-binder-float-nav{
  z-index:24!important;
  width:62px!important;
  height:62px!important;
  border:1px solid rgba(167,138,241,.30)!important;
  background:linear-gradient(180deg,#ffffff 0%, #f7f3ff 100%)!important;
  color:#7b58eb!important;
  font-size:40px!important;
  font-weight:900!important;
  box-shadow:
    0 18px 34px rgba(73,56,139,.18),
    0 4px 10px rgba(98,74,180,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(14px);
}

.free-binder-float-nav::before{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(243,237,255,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  z-index:0;
}

.free-binder-float-nav::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(152,117,247,.16),rgba(93,175,255,.10));
  z-index:-1;
}

.free-binder-float-nav > *{
  position:relative;
  z-index:1;
}

.free-binder-float-nav:hover{
  transform:translateY(-50%) scale(1.08)!important;
  color:#6940e0!important;
  border-color:rgba(143,110,236,.55)!important;
  box-shadow:
    0 24px 44px rgba(94,70,172,.24),
    0 8px 16px rgba(98,74,180,.16),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
}

.free-binder-float-nav:active{
  transform:translateY(-50%) scale(.97)!important;
}

.free-binder-float-nav.prev{
  left:-84px!important;
}

.free-binder-float-nav.next{
  right:-84px!important;
}

@media(max-width:1280px){
  .free-binder-float-nav.prev{
    left:-64px!important;
  }
  .free-binder-float-nav.next{
    right:-64px!important;
  }
}

@media(max-width:980px){
  .free-binder-float-nav{
    width:52px!important;
    height:52px!important;
    font-size:34px!important;
  }
  .free-binder-float-nav::before{
    inset:6px;
  }
}

@media(max-width:680px){
  .free-binder-float-nav{
    width:42px!important;
    height:42px!important;
    font-size:28px!important;
  }
  .free-binder-float-nav::before{
    inset:5px;
  }
}


/* ============================================================
 * PokeCardia V3.19.0
 * Binder Page Artwork + Neumorphic Arrows
 * ============================================================ */

/* Tombol panah model neumorphic seperti referensi. */
.free-binder-float-nav{
  width:64px!important;
  height:64px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(145deg,#ffffff,#eef1f6)!important;
  color:#4d535c!important;
  font-size:0!important;
  box-shadow:
    13px 13px 26px rgba(83,92,112,.20),
    -10px -10px 22px rgba(255,255,255,.95),
    inset 1px 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:none!important;
}

.free-binder-float-nav::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 28% 25%,rgba(255,255,255,.72),transparent 34%),
    linear-gradient(145deg,#ffffff,#eef1f6);
  z-index:0;
}

.free-binder-float-nav::after{
  content:"";
  position:relative;
  z-index:1;
  display:block;
  width:18px;
  height:18px;
  border-top:4px solid #474b52;
  border-right:4px solid #474b52;
  transform:rotate(45deg);
}

.free-binder-float-nav.prev::after{
  transform:rotate(-135deg);
}

.free-binder-float-nav:hover{
  transform:translateY(-50%) scale(1.04)!important;
  box-shadow:
    16px 16px 30px rgba(83,92,112,.22),
    -11px -11px 24px rgba(255,255,255,.98),
    inset 1px 1px 0 rgba(255,255,255,.96)!important;
}

.free-binder-float-nav:active{
  transform:translateY(-50%) scale(.96)!important;
  box-shadow:
    inset 7px 7px 14px rgba(83,92,112,.16),
    inset -7px -7px 14px rgba(255,255,255,.9)!important;
}

/* Selector artwork per halaman. */
.free-binder-page-art-form{
  min-width:230px;
}

.free-binder-page-art-form label{
  display:grid;
  gap:4px;
  margin:0!important;
  color:#7b879b;
  font-size:9px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.free-binder-page-art-form select{
  min-height:34px;
  padding:0 34px 0 12px;
  border:1px solid #dce5f1;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  color:#33415f;
  font-size:11px;
  font-weight:850;
  outline:none;
  box-shadow:0 8px 18px rgba(45,62,92,.05);
}

/* Artwork upload / custom per halaman. */
.free-binder-page[style*="--binder-art-image"]::before{
  background-image:
    linear-gradient(
      rgba(255,255,255,.22),
      rgba(255,255,255,.18)
    ),
    var(--binder-art-image)!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.76!important;
}

.free-binder-page[style*="--binder-art-image"]::after{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.28),
      transparent 44%,
      rgba(255,255,255,.13)
    )!important;
  opacity:.55!important;
}

@media(max-width:760px){
  .free-binder-page-art-form{
    width:100%;
    min-width:0;
  }

  .free-binder-page-art-form select{
    width:100%;
  }

  .free-binder-float-nav{
    width:44px!important;
    height:44px!important;
  }

  .free-binder-float-nav::after{
    width:13px;
    height:13px;
    border-width:3px;
  }
}


/* ============================================================
 * PokeCardia V3.19.1
 * Page Artwork CSS + Arrow Visual Fix
 * ============================================================ */

/* FIX: artwork per halaman harus membaca class pada halaman, bukan hanya class pada binder book. */
.free-binder-page.art-sky{
  background:linear-gradient(180deg,rgba(255,253,236,.96),rgba(255,246,198,.93))!important;
}
.free-binder-page.art-sky::before{
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.75),transparent 16%),
    radial-gradient(circle at 84% 15%,rgba(255,241,120,.78),transparent 18%),
    linear-gradient(125deg,transparent 0 18%,rgba(255,213,51,.24) 18% 20%,transparent 20% 45%,rgba(255,223,92,.22) 45% 47%,transparent 47% 100%),
    linear-gradient(35deg,transparent 0 54%,rgba(255,209,51,.20) 54% 56%,transparent 56% 72%,rgba(255,235,125,.18) 72% 74%,transparent 74% 100%),
    linear-gradient(155deg,rgba(255,237,116,.28),rgba(255,249,218,.04))!important;
}

.free-binder-page.art-lavender{
  background:linear-gradient(180deg,rgba(244,255,244,.96),rgba(228,247,224,.92))!important;
}
.free-binder-page.art-lavender::before{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.55),transparent 15%),
    radial-gradient(circle at 82% 14%,rgba(224,245,214,.72),transparent 18%),
    radial-gradient(ellipse 16% 8% at 14% 76%,rgba(71,161,82,.20),transparent 70%),
    radial-gradient(ellipse 16% 8% at 86% 68%,rgba(68,155,82,.18),transparent 70%),
    radial-gradient(ellipse 21% 10% at 72% 36%,rgba(76,163,90,.16),transparent 70%),
    radial-gradient(ellipse 21% 10% at 28% 40%,rgba(101,182,113,.16),transparent 70%),
    linear-gradient(145deg,rgba(142,205,112,.10),rgba(255,255,255,0))!important;
}

.free-binder-page.art-ember{
  background:linear-gradient(180deg,rgba(255,247,240,.96),rgba(255,231,217,.92))!important;
}
.free-binder-page.art-ember::before{
  background:
    radial-gradient(circle at 18% 14%,rgba(255,241,222,.74),transparent 15%),
    radial-gradient(circle at 82% 16%,rgba(255,192,140,.42),transparent 17%),
    radial-gradient(circle at 24% 82%,rgba(255,112,54,.30),transparent 20%),
    radial-gradient(circle at 76% 72%,rgba(224,45,78,.24),transparent 22%),
    repeating-linear-gradient(145deg,rgba(92,31,21,.08) 0 8px,transparent 8px 22px),
    linear-gradient(155deg,rgba(255,130,70,.20),rgba(255,255,255,0))!important;
}

.free-binder-page.art-ocean{
  background:linear-gradient(180deg,rgba(239,251,255,.96),rgba(222,242,255,.92))!important;
}
.free-binder-page.art-ocean::before{
  background:
    radial-gradient(circle at 14% 14%,rgba(255,255,255,.60),transparent 12%),
    radial-gradient(circle at 82% 16%,rgba(207,240,255,.58),transparent 15%),
    radial-gradient(circle at 72% 78%,rgba(77,182,222,.20),transparent 20%),
    linear-gradient(180deg,rgba(79,180,227,.16),rgba(255,255,255,0)),
    repeating-radial-gradient(circle at 20% 18%,rgba(255,255,255,.08) 0 8px,transparent 8px 26px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 18px)!important;
}

.free-binder-page.art-forest{
  background:linear-gradient(180deg,rgba(248,244,235,.97),rgba(234,226,211,.93))!important;
}
.free-binder-page.art-forest::before{
  background:
    radial-gradient(circle at 14% 16%,rgba(255,255,255,.48),transparent 12%),
    radial-gradient(circle at 82% 16%,rgba(226,214,191,.66),transparent 18%),
    linear-gradient(145deg,rgba(125,97,72,.20),rgba(255,255,255,0) 30%),
    linear-gradient(35deg,rgba(164,141,111,.13),rgba(255,255,255,0) 26%),
    repeating-linear-gradient(160deg,rgba(118,101,79,.06) 0 8px,transparent 8px 24px),
    repeating-linear-gradient(20deg,rgba(255,255,255,.08) 0 10px,transparent 10px 24px)!important;
}

.free-binder-page.art-sky::after,
.free-binder-page.art-lavender::after,
.free-binder-page.art-ember::after,
.free-binder-page.art-ocean::after,
.free-binder-page.art-forest::after{
  opacity:.32!important;
}

/* FIX: tombol panah dibuat seperti referensi, tidak pakai pseudo arrow yang bikin terlihat seperti loading. */
.free-binder-float-nav{
  display:grid!important;
  place-items:center!important;
  width:64px!important;
  height:64px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(145deg,#ffffff,#eef1f6)!important;
  color:#41464f!important;
  font-size:44px!important;
  font-weight:400!important;
  font-family:Arial, Helvetica, sans-serif!important;
  line-height:1!important;
  box-shadow:
    12px 12px 24px rgba(75,83,102,.22),
    -9px -9px 18px rgba(255,255,255,.95),
    inset 1px 1px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:none!important;
  text-indent:0!important;
}

.free-binder-float-nav::before,
.free-binder-float-nav::after{
  display:none!important;
  content:none!important;
}

.free-binder-float-nav:hover{
  transform:translateY(-50%) scale(1.045)!important;
  color:#2f343b!important;
  box-shadow:
    15px 15px 28px rgba(75,83,102,.24),
    -10px -10px 20px rgba(255,255,255,.98),
    inset 1px 1px 0 rgba(255,255,255,.95)!important;
}

.free-binder-float-nav:active{
  transform:translateY(-50%) scale(.96)!important;
  box-shadow:
    inset 7px 7px 14px rgba(75,83,102,.16),
    inset -7px -7px 14px rgba(255,255,255,.90)!important;
}

@media(max-width:760px){
  .free-binder-float-nav{
    width:44px!important;
    height:44px!important;
    font-size:30px!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.9
 * Binder Card Meta Hide
 * ============================================================ */

/* Hapus tulisan MA / nomor / rarity overlay di bawah kartu binder
   karena menutupi artwork kartu. */
.free-binder-card-meta{
  display:none!important;
}

/* Pastikan kartu tetap bersih tanpa padding tambahan dari meta. */
.free-binder-slot.filled .free-binder-pocket{
  padding:0!important;
  overflow:visible!important;
}


/* ============================================================
 * PokeCardia V3.21.0
 * Binder Modal AJAX Quick Pick
 * ============================================================ */

.free-binder-picker-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}

.free-binder-picker-tools button{
  min-height:32px;
  padding:0 12px;
  border:1px solid #dce5f1;
  border-radius:999px;
  background:#fff;
  color:#6e7b92;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.free-binder-picker-tools button.active{
  border-color:#8d65ed;
  background:linear-gradient(135deg,#7952e7,#9a5cff);
  color:#fff;
  box-shadow:0 9px 18px rgba(121,82,231,.18);
}

.free-binder-picker-card.is-used{
  background:linear-gradient(180deg,#fff,#fbfaff)!important;
}

.free-binder-picker-card.is-used .free-binder-picker-radio{
  border-color:#f4b7d0;
  background:#fff7fb;
}

.free-binder-picker-copy em{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  min-height:20px;
  margin-top:7px;
  padding:0 7px;
  border:1px solid #dbe5f1;
  border-radius:999px;
  background:#f7fbff;
  color:#71809a;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}

.free-binder-picker-card.is-used .free-binder-picker-copy em{
  border-color:#f3bdd4;
  background:#fff5fa;
  color:#d64188;
}

.free-binder-slot-modal.is-saving .modal-card{
  pointer-events:none;
}

.free-binder-slot-modal.is-saving .modal-card::after{
  content:"Menyimpan slot...";
  position:absolute;
  top:18px;
  right:68px;
  z-index:8;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#7751e5;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(77,57,143,.14);
}

.free-binder-slot.filled{
  transition:transform .18s ease, filter .18s ease;
}

.free-binder-slot.filled:hover{
  transform:translateY(-2px);
}

@media(max-width:720px){
  .free-binder-picker-tools{
    gap:6px;
  }

  .free-binder-picker-tools button{
    flex:1 1 auto;
  }
}


/* ============================================================
 * PokeCardia V3.22.0
 * Binder Drag / Swap Slot
 * ============================================================ */

.free-binder-drag-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid rgba(218,228,242,.95);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#71809a;
  font-size:10px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(50,65,96,.06);
}

.free-binder-slot.filled{
  cursor:grab;
}

.free-binder-slot.filled:active{
  cursor:grabbing;
}

.free-binder-slot.dragging{
  opacity:.48;
  transform:scale(.96)!important;
  filter:saturate(.85);
}

.free-binder-slot.drag-over{
  outline:3px solid rgba(126,87,237,.42)!important;
  outline-offset:6px;
  transform:translateY(-4px) scale(1.025)!important;
  box-shadow:
    0 20px 48px rgba(126,87,237,.18),
    0 0 0 8px rgba(126,87,237,.08)!important;
}

.free-binder-slot.drop-saving{
  pointer-events:none;
}

.free-binder-slot.drop-saving::after,
.free-binder-slot.slot-swapped::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  pointer-events:none;
}

.free-binder-slot.drop-saving::after{
  border:2px dashed rgba(126,87,237,.45);
  animation:pcBinderPulse 1s linear infinite;
}

.free-binder-slot.slot-swapped{
  animation:pcBinderSwapPop .52s ease both;
}

body.binder-dragging .free-binder-slot.empty{
  outline:2px dashed rgba(126,87,237,.20);
  outline-offset:5px;
}

body.binder-swap-saving .free-binder-book{
  cursor:progress;
}

@keyframes pcBinderPulse{
  0%{opacity:.35;transform:scale(.98)}
  50%{opacity:1;transform:scale(1.02)}
  100%{opacity:.35;transform:scale(.98)}
}

@keyframes pcBinderSwapPop{
  0%{transform:scale(.96)}
  55%{transform:scale(1.035)}
  100%{transform:scale(1)}
}

@media(max-width:760px){
  .free-binder-drag-hint{
    width:100%;
    text-align:center;
    white-space:normal;
    line-height:1.35;
    padding:8px 12px;
  }
}


/* ============================================================
 * PokeCardia V3.23.0
 * Binder Mobile Touch Drag
 * ============================================================ */

.free-binder-slot{
  touch-action:manipulation;
}

.free-binder-slot.filled{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

body.binder-touch-dragging{
  overflow:hidden;
  overscroll-behavior:none;
}

body.binder-touch-dragging .free-binder-book{
  touch-action:none;
}

.free-binder-slot.touch-drag-source{
  opacity:.42;
  transform:scale(.96)!important;
  filter:saturate(.82);
}

.free-binder-slot.touch-drag-over{
  outline:3px solid rgba(255,183,77,.72)!important;
  outline-offset:6px;
  transform:translateY(-5px) scale(1.035)!important;
  box-shadow:
    0 22px 52px rgba(255,183,77,.22),
    0 0 0 9px rgba(255,183,77,.14)!important;
}

.free-binder-touch-ghost{
  position:fixed!important;
  top:0!important;
  left:0!important;
  z-index:9999!important;
  pointer-events:none!important;
  opacity:.92!important;
  transform:translate(-9999px,-9999px);
  translate:-50% -50%;
  box-shadow:
    0 28px 72px rgba(49,38,82,.32),
    0 0 0 8px rgba(255,255,255,.38)!important;
  animation:pcBinderTouchLift .18s ease both;
}

.free-binder-touch-ghost strong,
.free-binder-touch-ghost small{
  display:none!important;
}

body.binder-touch-dragging .free-binder-slot.empty{
  outline:2px dashed rgba(255,183,77,.28);
  outline-offset:5px;
}

@keyframes pcBinderTouchLift{
  from{
    opacity:.1;
    scale:.82;
  }
  to{
    opacity:.92;
    scale:1;
  }
}

@media(pointer:coarse){
  .free-binder-drag-hint::after{
    content:" Tahan kartu 0.3 detik lalu geser.";
  }

  .free-binder-slot.filled{
    cursor:default;
  }
}


/* ============================================================
 * PokeCardia V3.24.1
 * Binder Slot Action Menu Fix
 * ============================================================ */

.free-binder-slot-action-menu{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(27,22,43,.28);backdrop-filter:blur(10px)}
.free-binder-slot-action-menu[hidden]{display:none!important}
.slot-action-card{position:relative;width:min(360px,100%);padding:20px;border:1px solid rgba(226,232,244,.95);border-radius:24px;background:radial-gradient(circle at 20% 0,rgba(255,210,102,.18),transparent 34%),linear-gradient(180deg,#fff,#fbf9ff);box-shadow:0 28px 90px rgba(45,35,82,.26);animation:pcSlotActionIn .18s ease both}
.slot-action-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #e4e9f3;border-radius:999px;background:#fff;color:#66738b;font-size:22px;font-weight:800;cursor:pointer}
.slot-action-kicker{display:block;margin-bottom:6px;color:#8a63ef;font-size:10px;font-weight:950;letter-spacing:.16em}
.slot-action-card strong{display:block;padding-right:42px;color:#283652;font-size:24px;line-height:1.1}
.slot-action-card small{display:block;margin-top:7px;color:#748199;font-weight:750}
.slot-action-buttons{display:grid;gap:9px;margin-top:18px}
.slot-action-buttons button,.slot-action-buttons a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid #e0e8f4;border-radius:16px;background:#fff;color:#384762;font-size:13px;font-weight:900;text-align:left;cursor:pointer;box-shadow:0 8px 18px rgba(54,73,105,.06)}
.slot-action-buttons button:hover,.slot-action-buttons a:hover{transform:translateY(-1px);border-color:#cdbdf9;box-shadow:0 12px 26px rgba(90,70,160,.10)}
.slot-action-buttons button:disabled,.slot-action-buttons a.disabled{opacity:.42;pointer-events:none}
.slot-action-buttons span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:10px;background:#f4f0ff;color:#7b57e9}
body.slot-action-open{overflow:hidden}
@keyframes pcSlotActionIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:720px){.free-binder-slot-action-menu{align-items:end;padding:12px}.slot-action-card{width:100%;border-radius:24px 24px 18px 18px}}


/* ============================================================
 * PokeCardia V3.25.0
 * Binder Auto Fill Master Set
 * ============================================================ */

.free-binder-master-fill-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:18px;
  border:1px solid rgba(220,230,244,.95);
  border-radius:24px;
  background:
    radial-gradient(circle at 10% 0,rgba(255,210,102,.18),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,255,.88));
  box-shadow:0 18px 42px rgba(58,76,112,.09);
}

.free-binder-master-fill-card h2{
  margin:4px 0 6px;
  color:#283652;
  font-size:22px;
}

.free-binder-master-fill-card p{
  max-width:680px;
  margin:0;
  color:#71809a;
  font-size:13px;
  font-weight:650;
}

.free-binder-master-fill-card form{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:420px;
}

.free-binder-master-fill-card select{
  min-width:240px;
  min-height:44px;
  padding:0 12px;
  border:1px solid #dce6f3;
  border-radius:15px;
  background:#fff;
  color:#33415c;
  font-size:12px;
  font-weight:850;
  outline:none;
}

.free-binder-master-fill-card small{
  grid-column:1 / -1;
  display:block;
  margin-top:-6px;
  color:#8a7598;
  font-size:11px;
  font-weight:850;
}

.free-binder-master-fill-card form.is-saving{
  opacity:.64;
  pointer-events:none;
}

.free-binder-master-fill-card form.is-saving button{
  cursor:progress;
}

@media(max-width:980px){
  .free-binder-master-fill-card{
    grid-template-columns:1fr;
  }

  .free-binder-master-fill-card form{
    justify-content:flex-start;
    min-width:0;
  }
}

@media(max-width:720px){
  .free-binder-master-fill-card form{
    display:grid;
    grid-template-columns:1fr;
  }

  .free-binder-master-fill-card select,
  .free-binder-master-fill-card button{
    width:100%;
  }
}

/* ============================================================
 * PokeCardia V3.25.1
 * Pretty AJAX Alert / Confirm
 * ============================================================ */
.free-binder-dialog{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:18px;background:rgba(25,20,42,.34);backdrop-filter:blur(12px)}
.free-binder-dialog[hidden]{display:none!important}
.free-binder-dialog-card{width:min(390px,100%);padding:24px;border:1px solid rgba(226,232,244,.96);border-radius:28px;background:radial-gradient(circle at 12% 0,rgba(255,210,102,.22),transparent 34%),radial-gradient(circle at 92% 8%,rgba(139,92,246,.16),transparent 32%),linear-gradient(180deg,#fff,#fbfaff);box-shadow:0 34px 100px rgba(38,31,72,.30);text-align:center;animation:pcBinderDialogIn .18s ease both}
.free-binder-dialog-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(135deg,#fff7db,#f1eaff);color:#8258ee;font-size:28px;box-shadow:0 14px 32px rgba(126,87,237,.14)}
.free-binder-dialog-card h3{margin:6px 0 8px;color:#283652;font-size:24px;line-height:1.12}
.free-binder-dialog-card p{margin:0;color:#748199;font-size:14px;font-weight:700;line-height:1.55}
.free-binder-dialog-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.free-binder-dialog-actions .btn{min-width:112px;justify-content:center}
body.binder-dialog-open{overflow:hidden}
@keyframes pcBinderDialogIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.free-binder-dialog{align-items:end;padding:12px}.free-binder-dialog-card{border-radius:28px 28px 18px 18px}.free-binder-dialog-actions{display:grid;grid-template-columns:1fr}.free-binder-dialog-actions .btn{width:100%}}


/* ============================================================
 * PokeCardia V3.34.0
 * Binder Public Share
 * ============================================================ */

.free-binder-share-panel{padding:0 0 22px;background:#fff}
.free-binder-share-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border:1px solid #dce8f3;border-radius:26px;background:radial-gradient(circle at 12% 0,rgba(255,210,102,.18),transparent 30%),linear-gradient(180deg,#fff,#fbfaff);box-shadow:0 18px 42px rgba(58,76,112,.09)}
.free-binder-share-card.has-link{border-color:#cdbdf9}
.free-binder-share-card.is-saving{opacity:.72;pointer-events:none}
.free-binder-share-card h2{margin:4px 0 6px;color:#273551;font-size:22px}
.free-binder-share-card p{max-width:680px;margin:0;color:#71809a;font-size:13px;font-weight:750}
.free-binder-share-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.free-binder-share-pills span{display:inline-flex;min-height:26px;align-items:center;padding:0 9px;border:1px solid #e2e8f4;border-radius:999px;background:#fff;color:#6f7d96;font-size:10px;font-weight:950}
.free-binder-share-result{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.free-binder-share-result[hidden]{display:none!important}
.free-binder-share-result label{grid-column:1 / -1;color:#7b57e9;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.free-binder-share-result input{min-height:42px;padding:0 13px;border:1px solid #dce8f3;border-radius:14px;background:#f9fcff;color:#33415c;font-size:12px;font-weight:800}
.free-binder-share-actions{display:flex;gap:8px}
.free-binder-share-actions .disabled{opacity:.45;pointer-events:none}
.free-binder-share-card small{grid-column:1 / -1;color:#7f8aa1;font-size:11px;font-weight:850}

.free-binder-public-hero{background:radial-gradient(circle at 12% 0,rgba(255,210,102,.20),transparent 32%),radial-gradient(circle at 90% 8%,rgba(112,201,245,.16),transparent 30%),linear-gradient(180deg,#f7fcff,#fff)}
.free-binder-public-cta{padding:0 0 24px;background:#fff}
.free-binder-public-cta-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border:1px solid #dce8f3;border-radius:26px;background:#fff;box-shadow:0 16px 38px rgba(58,76,112,.08)}
.free-binder-public-cta-card h2{margin:4px 0 6px;color:#273551;font-size:23px}
.free-binder-public-cta-card p{max-width:720px;margin:0;color:#71809a;font-size:13px;font-weight:750}
.free-binder-public-cta-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

.free-binder-slot.is-readonly{padding:0;position:relative}
.free-binder-slot.is-readonly a{display:grid;width:100%;height:100%;color:inherit}
.free-binder-slot.is-readonly img{width:100%;height:100%;object-fit:contain}
.free-binder-slot.is-readonly span:not(.empty-slot){position:absolute;left:7px;bottom:7px;right:7px;display:block;overflow:hidden;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.90);color:#33415c;font-size:10px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.free-binder-slot .empty-slot{display:grid;place-items:center;height:100%;color:#aab5c8;font-size:11px;font-weight:900}

@media(max-width:760px){
  .free-binder-share-card,.free-binder-public-cta-card{grid-template-columns:1fr}
  .free-binder-share-result,.free-binder-share-actions,.free-binder-public-cta-actions{grid-template-columns:1fr;display:grid}
  .free-binder-share-card .btn,.free-binder-public-cta-actions .btn{width:100%;justify-content:center}
}