body{background:#f3f4f6;}
.navbar{background:#1f2937 !important;}
.navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text{color:#fff !important;}
.container{max-width:1200px;}
.card-elev{border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06);}

.searchbar{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border-radius:999px; padding:6px 6px 6px 14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px;
}
.searchbar input{
  flex:1; border:none; outline:none; background:transparent;
  height:36px; font-size:14px; color:#111;
}
.searchbar .icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:999px; background:#111827; color:#fff; cursor:pointer;
}
.searchbar .icon-btn:hover{ filter:brightness(.95); }

/* home grid 5 cols */
.res-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
@media(min-width:768px){.res-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1200px){.res-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.res-grid .card{height:100%;}
.card .thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-top-left-radius:.5rem;border-top-right-radius:.5rem;}

/* detail hero */
.hero-card{border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06);padding:18px;}
.hero-flex{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
@media (min-width: 768px){ .hero-flex{flex-wrap:nowrap;} }
.thumb-sq{position:relative;width:100%;max-width:420px;flex:0 0 100%;border-radius:14px;overflow:hidden;background:#f1f4fb;border:1px solid #e8ecf5;}
.thumb-sq::before{content:"";display:block;padding-top:100%;}
.thumb-sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@media (min-width: 768px){ .thumb-sq{flex-basis:360px;max-width:360px;} }
.info-side{flex:1 1 300px;min-width:280px;display:flex;flex-direction:column;gap:12px;}
.badge-orange{background:#ff7f2a;color:#fff;border-radius:999px;padding:.2rem .55rem;font-weight:700;font-size:.85rem;}
.hero-title{margin:0;font-size:1.2rem;line-height:1.3;font-weight:800;color:#111;}
.meta-small{color:#555;font-size:.85rem;display:flex;gap:1rem;flex-wrap:wrap;}
.callout{background:linear-gradient(90deg,#5c7cff,#6fb6ff);color:#fff;border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;font-size:.95rem;}
.btn-upg{background:#0ea5e9;color:#fff;border:none;}
.btn-upg:hover{filter:brightness(.95);color:#fff;}
.rule-line{background:#f7f9ff;border:1px solid #e3eaff;border-radius:10px;padding:.55rem .75rem;font-weight:700;color:#333;font-size:.95rem;}
.rule-line .state{font-weight:600;margin-left:.5rem;}
.btn-baidu{background:#e92828;color:#fff;border:none;}
.btn-baidu:hover{filter:brightness(.95);color:#fff;}
.kv-pills{display:flex;gap:.5rem;flex-wrap:wrap;}
.kv-pill{background:#f6f7fb;border:1px solid #e9ecf5;border-radius:8px;padding:.35rem .6rem;font-size:.9rem;}
.notice{border:1px dashed #ffb26b;background:#fff7ef;color:#b95a00;border-radius:8px;padding:.55rem .7rem;font-size:.9rem;}
.detail-card{border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06);padding:18px;}
.detail-card h4{font-size:1rem;font-weight:800;margin-bottom:.6rem;}
.detail-card img{max-width:100%;height:auto;border-radius:10px;margin:.5rem 0 1rem;}


/* v3.16 — robust square thumbnail wrapper (works without aspect-ratio support) */
.thumb-wrap{ position:relative; width:100%; padding-top:100%; overflow:hidden;
  border-top-left-radius:.5rem; border-top-right-radius:.5rem;
  background:#eef2f7; }
.thumb-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }


/* v3.17 — Home card meta & title clamp */
.res-card{ border-radius:14px; overflow:hidden; }
.line-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}
.card-meta .meta-item{ display:flex; align-items:center; gap:.35rem; color:#6b7280; font-size:.9rem; }
.card-meta svg{ color:#6b7280; }


/* v3.18 — Anime elements (sakura petals & sparkle) */
.anime .anime-deco{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.anime .anime-deco .petal{
  position:absolute;width:14px;height:14px;border-radius:60% 40% 60% 40%;
  background:radial-gradient( #ffd1e8 30%, #ff9ac1 70%);
  box-shadow:0 0 6px rgba(255,154,193,.5);
  opacity:.55; filter:blur(.1px);
  animation:petal-fall 14s linear infinite;
}
@keyframes petal-fall{
  0%{ transform:translateY(-10vh) rotate(0deg); opacity:.0; }
  10%{ opacity:.55; }
  100%{ transform:translateY(110vh) rotate(360deg); opacity:.0; }
}
/* distribute petals */
.p1{left:8%; animation-duration:12s; animation-delay: -2s;}
.p2{left:18%; animation-duration:15s; animation-delay: -5s;}
.p3{left:28%; animation-duration:13s; animation-delay: -9s;}
.p4{left:38%; animation-duration:16s; animation-delay: -1s;}
.p5{left:48%; animation-duration:14s; animation-delay: -7s;}
.p6{left:58%; animation-duration:17s; animation-delay: -11s;}
.p7{left:68%; animation-duration:12s; animation-delay: -4s;}
.p8{left:78%; animation-duration:15s; animation-delay: -8s;}
.p9{left:88%; animation-duration:13s; animation-delay: -3s;}
.p10{left:25%; animation-duration:18s; animation-delay: -12s;}
.p11{left:55%; animation-duration:19s; animation-delay: -6s;}
.p12{left:85%; animation-duration:16s; animation-delay: -10s;}

/* subtle sparkles on resource cards when anime on */
.anime .res-card{ position:relative; }
.anime .res-card::after{
  content:""; position:absolute; right:10px; top:10px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(#fff, rgba(255,255,255,0));
  box-shadow: 0 0 0 0 rgba(255,255,255,.8), 8px 10px 0 0 rgba(255,255,255,.6), -6px 16px 0 0 rgba(255,255,255,.5);
  animation:twinkle 2.8s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.2; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.4); }
}


/* v3.19 — Cohesive Anime Theme (no falling petals) */
.theme-anime{
  --anime-bg1:#0f1424;
  --anime-bg2:#1c2540;
  --anime-grad: linear-gradient(135deg,#7c3aed 0%, #60a5fa 45%, #22d3ee 100%);
  --anime-card: rgba(255,255,255,.06);
  --anime-stroke: rgba(255,255,255,.12);
  --anime-text:#e5e7eb;
  --anime-sub:#9ca3af;
  --anime-pill:#1f2a44;
  --anime-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.theme-anime body, .theme-anime .navbar{ background: none !important; }
.theme-anime .navbar{ background: var(--anime-grad) !important; }
.theme-anime .container{ position:relative; z-index:2; }
.theme-anime:before{
  content:""; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1200px 600px at -10% -20%, #233362 0%, rgba(0,0,0,0) 60%),
    radial-gradient(1000px 500px at 110% -10%, #2a3c72 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--anime-bg1), var(--anime-bg2));
}
.theme-anime .card, .theme-anime .card-elev, .theme-anime .detail-card, .theme-anime .hero-card{
  background: var(--anime-card) !important;
  backdrop-filter: blur(8px);
  border:1px solid var(--anime-stroke);
  color: var(--anime-text);
  box-shadow: var(--anime-shadow);
}
.theme-anime .card .card-title, .theme-anime .hero-title{ color:#fff; }
.theme-anime .meta-small, .theme-anime .card-meta .meta-item, .theme-anime .notice{ color: var(--anime-sub) !important; }
.theme-anime .btn-primary, .theme-anime .btn-upg{
  background: var(--anime-grad) !important; border:none; color:#fff; box-shadow:0 6px 16px rgba(34,211,238,.35);
}
.theme-anime .btn-baidu{ background:#ef4444 !important; box-shadow:0 6px 16px rgba(239,68,68,.35); }
.theme-anime .kv-pill, .theme-anime .rule-line{ background: var(--anime-pill); border-color: var(--anime-stroke); color:#d1d5db; }
.theme-anime .badge-orange{ background: #f59e0b; color:#1f2937; }

/* admin navbar tweaks already include gradient; ensure text high contrast */
.theme-anime .navbar .nav-link, .theme-anime .navbar .navbar-brand, .theme-anime .navbar .navbar-text{ color:#fff !important; }

/* Disable previous anime-deco */
.theme-anime .anime-deco{ display:none !important; }


/* v3.20 — Japanese Anime (JP) theme */
.theme-jp{
  --jp-bg1:#0e1025;
  --jp-bg2:#151a35;
  --jp-grad: linear-gradient(135deg,#ff9ac1 0%, #a78bfa 45%, #7dd3fc 100%);
  --jp-card: rgba(255,255,255,.08);
  --jp-stroke: rgba(255,255,255,.16);
  --jp-text:#f3f4f6;
  --jp-sub:#c7c9d3;
  --jp-pill:#1f2342;
  --jp-shadow: 0 12px 32px rgba(0,0,0,.35);
  --jp-font: "Hiragino Sans GB","PingFang SC","Noto Sans CJK JP","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.theme-jp body{ font-family:var(--jp-font); }
.theme-jp .navbar{ background:var(--jp-grad)!important; box-shadow:0 10px 24px rgba(167,139,250,.25); }
.theme-jp .container{ position:relative; z-index:2; }
.theme-jp:before{
  content:""; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1200px 500px at -10% -15%, rgba(255,154,193,.25), transparent 60%),
    radial-gradient(1000px 500px at 110% -10%, rgba(125,211,252,.18), transparent 55%),
    radial-gradient(400px 400px at 20% 80%, rgba(167,139,250,.18), transparent 60%),
    linear-gradient(180deg,var(--jp-bg1),var(--jp-bg2));
}
.theme-jp .card, .theme-jp .card-elev, .theme-jp .detail-card, .theme-jp .hero-card{
  background: var(--jp-card)!important;
  color: var(--jp-text);
  backdrop-filter: blur(10px);
  border:1px solid var(--jp-stroke);
  box-shadow: var(--jp-shadow);
  border-radius: 18px;
}
.theme-jp .table{ color:var(--jp-text); }
.theme-jp .table thead th{ color:#e6e8f2; border-color:var(--jp-stroke); }
.theme-jp .table td{ border-color:var(--jp-stroke); color:#e7e9f4; }

.theme-jp .btn-primary, .theme-jp .btn-upg{ background:var(--jp-grad)!important; border:none; color:#0b1220; font-weight:700; }
.theme-jp .btn-baidu{ background:#ff6b6b!important; border:none; }

.theme-jp .kv-pill, .theme-jp .rule-line{
  background: var(--jp-pill);
  border-color: var(--jp-stroke);
  color: #e9ebf5;
  border-radius: 12px;
}

.jp-panel{ padding:18px; background:var(--jp-card); border:1px solid var(--jp-stroke); border-radius:18px; box-shadow:var(--jp-shadow); }
.jp-grid-4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media(min-width:992px){ .jp-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.jp-stat{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--jp-stroke); }
.jp-stat__icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--jp-grad); color:#0b1220; box-shadow: 0 6px 16px rgba(125,211,252,.35); }
.jp-stat__label{ color:var(--jp-sub); font-size:.9rem; line-height:1; }
.jp-stat__value{ font-weight:900; font-size:1.4rem; color:#fff; line-height:1.3; }

.jp-section-title{ font-weight:900; letter-spacing:.02em; margin-bottom:.8rem; color:#fff; }
.jp-badge{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-weight:700; font-size:.8rem;
  color:#0b1220; background:var(--jp-grad); }

/* cards on home remain, but elevate title color */
.theme-jp .res-card .card-title{ color:#fff; }


/* v3.21 — Admin tables contrast + theme unify */
.theme-jp .table{ background:transparent !important; color:var(--jp-text); }
.theme-jp .table>:not(caption)>*>*{ background-color:transparent !important; color:#e9ebf5; border-color:var(--jp-stroke); }
.theme-jp .table thead th{ color:#ffffff; font-weight:800; letter-spacing:.02em; }
.theme-jp .table-hover tbody tr:hover{ background:rgba(255,255,255,.06) !important; }
.theme-jp .table .btn{ border-radius:10px; padding:.35rem .7rem; font-weight:700; }
.theme-jp .btn-outline-danger{ color:#ff7b7b; border-color:#ff7b7b; }
.theme-jp .btn-outline-danger:hover{ background:#ff7b7b; color:#0b1220; border-color:#ff7b7b; }
.theme-jp .btn-primary, .theme-jp .btn-success{ background:var(--jp-grad) !important; border:none; color:#0b1220; font-weight:800; }
.theme-jp .badge.bg-success{ background:#34d399 !important; color:#0b1220; font-weight:800; }
.theme-jp .badge.bg-danger{ background:#f87171 !important; color:#0b1220; font-weight:800; }
.theme-jp .badge.bg-secondary{ background:#94a3b8 !important; color:#0b1220; font-weight:800; }

/* Panel look for pages even without jp-panel wrapper */
.theme-jp .container > h4 + .table, 
.theme-jp .container .table-bordered{
  padding:0; border-radius:18px; overflow:hidden;
  background:var(--jp-card); border:1px solid var(--jp-stroke); box-shadow:var(--jp-shadow);
}


/* v3.22 — JP theme front tables + variable override */
.theme-jp{
  --bs-table-bg: transparent;
}
.theme-jp .jp-panel .table-responsive{ background:transparent !important; }
.theme-jp .jp-panel .table{ background:transparent !important; color:#e9ebf5; }
.theme-jp .jp-panel .table>:not(caption)>*>*{ background-color:transparent !important; color:#e9ebf5; border-color:var(--jp-stroke); }
.theme-jp .jp-panel .table thead th{ color:#ffffff; font-weight:800; letter-spacing:.02em; }
.theme-jp .jp-panel .table-hover tbody tr:hover{ background:rgba(255,255,255,.06) !important; }
.theme-jp .jp-panel .badge{ border-radius:10px; font-weight:800; }


/* v3.23 — stronger transparency for user center payments table */
.theme-jp .jp-panel,
.theme-jp .jp-panel * {
  --bs-table-bg: transparent !important;
}
.theme-jp .jp-panel .table-responsive,
.theme-jp .jp-panel .table {
  background: transparent !important;
}
.theme-jp .jp-panel .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: #e9ebf5;
  border-color: var(--jp-stroke);
}
.theme-jp .jp-panel .table thead th {
  color: #ffffff; font-weight: 800; letter-spacing: .02em;
  background: transparent !important;
}
.theme-jp .jp-panel .table-hover tbody tr:hover {
  background: rgba(255,255,255,.06) !important;
}


/* v3.26 — Admin navbar layout fix */
.admin-nav-fix{ padding-top:.4rem; padding-bottom:.4rem; }
.admin-nav-fix .navbar-nav{ gap:1rem; align-items:center; flex-wrap:wrap; }
.admin-nav-fix .navbar-brand{ margin-right:1.25rem; font-weight:900; font-size:1.3rem; }
.admin-nav-fix .nav-link{ padding:.25rem .5rem !important; font-weight:700; border-radius:8px; }
.admin-nav-fix .nav-link:hover{ background:rgba(255,255,255,.08); }


/* v3.27 — Admin navbar single-line & scrollable on small screens */
.admin-nav-fix{padding-top:.4rem;padding-bottom:.4rem;}
.admin-nav-fix .navbar-brand{margin-right:1.25rem;font-weight:900;font-size:1.3rem}
.admin-nav-fix .navbar-nav{display:flex;flex-direction:row;gap:1.25rem;flex-wrap:nowrap;white-space:nowrap;align-items:center}
.admin-nav-fix .nav-link{padding:.25rem .5rem!important;font-weight:700;border-radius:8px}
.admin-nav-fix .nav-link:hover{background:rgba(255,255,255,.08)}
@media (max-width:1200px){
  .admin-nav-fix .navbar-nav{overflow-x:auto;scrollbar-width:thin}
  .admin-nav-fix .navbar-nav::-webkit-scrollbar{height:6px}
}


/* v3.28 resource: image box fixed ratio */
.card-elev img{ display:block; border-radius:12px }


/* v3.30 Admin navbar one-line */
.admin-nav-fix{padding-top:.45rem;padding-bottom:.45rem}
.admin-nav-fix .navbar-nav{display:flex;flex-wrap:nowrap;gap:1.25rem;white-space:nowrap;align-items:center}
.admin-nav-fix .nav-link{padding:.25rem .5rem!important;border-radius:8px;font-weight:800}
.admin-nav-fix .nav-link:hover{background:rgba(255,255,255,.08)}
@media (max-width:1200px){.admin-nav-fix .navbar-nav{overflow-x:auto;scrollbar-width:thin}.admin-nav-fix .navbar-nav::-webkit-scrollbar{height:6px}}


/* v3.32 admin navbar solid single-line */
.admin-nav-fix .navbar-nav{display:flex;gap:1.2rem;flex-wrap:nowrap;white-space:nowrap;align-items:center}
@media (max-width:1200px){.admin-nav-fix .navbar-nav{overflow-x:auto;scrollbar-width:thin}.admin-nav-fix .navbar-nav::-webkit-scrollbar{height:6px}}


/* v3.33 admin navbar one-line */
.admin-nav-fix .navbar-nav{display:flex;gap:1.1rem;flex-wrap:nowrap;white-space:nowrap;align-items:center}
@media (max-width:1200px){.admin-nav-fix .navbar-nav{overflow-x:auto;scrollbar-width:thin}.admin-nav-fix .navbar-nav::-webkit-scrollbar{height:6px}}