/* ============================================================
   For You Create (FYC) — page + preview modal styles
   Prefix: .fyc-  Semua warna pakai CSS var tema yang sama dengan
   halaman lain (--bg2, --border2, --txt, dst) supaya otomatis ikut
   light/dark mode tanpa override tambahan. Lihat js/fyc-engine.js
   untuk logic fetch manifest + render + modal.
   ============================================================ */

.fyc-page {
  padding: 24px 24px 24px; width: 100%; animation: pageIn .28s var(--ease);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h)); min-height: 480px;
}

/* ============================================================
   HEADER CARD — konsisten di semua menu (License, Updates,
   Brackets, Pro Mode): icon 44x44/radius13, card padding 20/22,
   radius18, gap16, icon SEJAJAR vertikal (align-items:center)
   dengan judul, bukan nempel di atas. Title 17px/800, sub
   11.5px/500. Lihat juga qe-bracket-bank.css, qe-pro-mode.css,
   components.css (.lic-header) — 4 file ini harus disamain
   kalau salah satu diubah.
   ============================================================ */
.fyc-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-shrink: 0;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.fyc-header-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,0,0,.07), rgba(0,0,0,.03));
  border: 1px solid var(--border2); color: var(--txt);
}
html.dark .fyc-header-icon { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); }
.fyc-header-title { font-size: 17px; font-weight: 800; color: var(--txt); letter-spacing: -.4px; line-height: 1.2; margin-bottom: 4px; }
.fyc-header-sub { font-size: 11.5px; font-weight: 500; color: var(--txt3); line-height: 1.5; max-width: 560px; }

/* Tab filter tipis: Semua / Prompt / Tutorial / Panduan / dst — diisi dinamis
   dari kumpulan "type" yang benar-benar ada di manifest.
   [UPDATE 2026-08-02] Dulu pakai flex-wrap:wrap — kalau tag/type banyak,
   baris toolbar melebar ke bawah (2+ baris) dan makan tempat vertikal.
   SEKARANG: satu baris tetap (nowrap), kalau kepanjangan tinggal
   di-scroll/geser horizontal (mouse-drag di desktop, swipe di HP) — pola
   & scrollbar-hidden-nya SAMA PERSIS seperti .qe-lib-tags-row di Library
   (lihat components.css) supaya konsisten dengan menu lain. */
.fyc-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth; cursor: grab;
}
.fyc-toolbar::-webkit-scrollbar { display: none; height: 0; }
.fyc-toolbar.fyc-toolbar-dragging { cursor: grabbing; scroll-behavior: auto; }
.fyc-tab {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border2); background: var(--bg2); color: var(--txt2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.fyc-tab:hover { background: var(--tint-05); border-color: var(--border3); color: var(--txt); }
.fyc-tab.active { background: var(--txt); color: var(--bg2); border-color: transparent; }
/* Angka total item, nempel di tombol "Semua" (dulu badge terpisah di
   header). Warnanya ngikut state tombol: redup pas idle, kontras pas
   active — sama pola dengan count di category list Brackets. */
.fyc-tab-count {
  font-size: 10px; font-weight: 700; line-height: 1; padding: 2.5px 6px; border-radius: 99px;
  background: var(--tint-2); color: var(--txt3);
}
.fyc-tab.active .fyc-tab-count { background: rgba(255,255,255,.22); color: var(--bg2); }
html.dark .fyc-tab-count { background: rgba(255,255,255,.08); }
html.dark .fyc-tab.active .fyc-tab-count { background: rgba(0,0,0,.22); color: var(--bg2); }

.fyc-list {
  flex: 1; min-height: 0;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  overflow: hidden; /* penting: biar iframe/img preview ikut ke-clip rounded, bukan kotak nembus sudut */
}

#fyc-rows { flex: 1; min-height: 0; overflow-y: auto; }

.fyc-loading, .fyc-empty {
  padding: 40px 20px; text-align: center; font-size: 12px; font-weight: 600; color: var(--txt3);
}

/* Satu baris = satu item: ikon tipe + judul/deskripsi + badge tipe.
   Sengaja list rapi, BUKAN grid kartu, sesuai konsep createrus. */
.fyc-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.fyc-row:last-child { border-bottom: none; }
.fyc-row:hover { background: var(--tint-05); }
html.dark .fyc-row:hover { background: rgba(255,255,255,.05); }

.fyc-row-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-2); border: 1px solid var(--border); color: var(--txt2);
}
html.dark .fyc-row-icon { background: rgba(255,255,255,.06); }

.fyc-row-body { flex: 1; min-width: 0; }
.fyc-row-title-wrap { display: flex; align-items: center; gap: 8px; }
.fyc-row-title { font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: -.1px; }
.fyc-pin-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 99px; background: var(--link); }
.fyc-row-desc {
  font-size: 11.5px; font-weight: 500; color: var(--txt3); line-height: 1.4;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fyc-row-type {
  flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--txt3); padding: 3px 9px;
  border-radius: 99px; background: var(--tint-2); border: 1px solid var(--border);
  white-space: nowrap;
}
html.dark .fyc-row-type { background: rgba(255,255,255,.06); }

.fyc-row-chev { flex-shrink: 0; color: var(--txt3); }

/* ── Detail preview — INLINE, di dalam kartu #fyc-list yang sama.
   TIDAK ADA position:fixed/overlay sama sekali (lihat catatan fix di
   index.html) supaya tidak pernah nabrak overlay lain punya sistem
   (mis. Library) saat pindah halaman. ── */
#fyc-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.fyc-detail-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border2);
}
.fyc-detail-back {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--txt2);
  padding: 8px 11px 8px 9px; border-radius: 10px; border: 1px solid var(--border2); background: var(--bg2);
  transition: background var(--dur-base) var(--ease);
}
.fyc-detail-back:hover { background: var(--tint-05); }

.fyc-detail-headtext { flex: 1; min-width: 0; }
.fyc-detail-title {
  font-size: 13.5px; font-weight: 700; color: var(--txt); letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fyc-detail-type { font-size: 11px; font-weight: 600; color: var(--txt3); margin-top: 2px; }

.fyc-detail-openbtn {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--txt2);
  padding: 8px 13px; border-radius: 10px; border: 1px solid var(--border2);
  background: var(--bg2); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease);
}
.fyc-detail-openbtn:hover { background: var(--tint-05); }

.fyc-detail-body { flex: 1; min-height: 0; background: var(--bg3); position: relative; }
.fyc-detail-body iframe { width: 100%; height: 100%; border: none; display: block; }
.fyc-detail-body img.fyc-detail-img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg3);
}

/* Fallback: link generik yang tidak bisa/aman di-embed (X-Frame-Options dsb) */
.fyc-detail-fallback {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 40px;
}
.fyc-detail-fallback-icon { color: var(--txt3); }
.fyc-detail-fallback-text { font-size: 12.5px; font-weight: 600; color: var(--txt3); max-width: 360px; line-height: 1.6; }
.fyc-detail-fallback-btn {
  font-size: 12px; font-weight: 700; color: var(--bg2); background: var(--txt);
  padding: 10px 18px; border-radius: 10px; text-decoration: none;
}

@media (max-width: 768px) {
  /* UI/UX FIX: dulu flex-wrap:wrap bikin icon "lompat" jadi baris sendiri
     di atas judul (makan tempat vertikal). Sekarang tetap 1 baris
     (icon sejajar judul), sama pola dengan .lic-header di License. */
  .fyc-header { gap: 10px; padding: 14px 14px; }
  .fyc-header-icon { width: 34px; height: 34px; }
  .fyc-header-title { font-size: 14px; }
  .fyc-header-sub {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* UI/UX FIX: .fyc-page sebelumnya cuma punya padding desktop flat
     (24px 24px 24px, lihat rule .fyc-page di atas) tanpa override mobile
     sama sekali — beda dengan .page/.qe-page/.lic-inner/.bb-page/.pm-page
     yang semuanya sudah dikompakkan ke var(--sb-gap) di breakpoint ini
     (lihat blok unifier di css/components.css, dekat komentar "SEMUA
     halaman lain ... pakai padding kiri-kanan 24px"). Akibatnya menu
     Updates kelihatan lebih renggang kiri-kanan dibanding menu lain di
     HP. File ini (fyc.css) di-load SETELAH components.css — jadi rule
     unifier di sana kalah cascade oleh rule `.fyc-page` di atas kalau
     tidak di-duplikasi di sini juga (sumber aslinya), persis pola yang
     sudah dipakai .bb-page di qe-bracket-bank.css. */
  .fyc-page { padding: var(--nav-v-gap) var(--sb-gap) 24px; }
}