/* Impeccable · macrostructure: Catalogue · kind: content-hub
 * variety: differs from previous (Catalogue V7) — full token system + Geist + blue-pink gradient
 * dials: V7 M7 D5
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ===== Design Tokens ===== */
:root {
  /* Depth layers (Linear-style deep blacks with micro-purple) */
  --bg-deep:    #050508;
  --bg-base:    #08080d;
  --bg-card:    #0c0c14;
  --bg-hover:   #11111b;
  --bg-tag:     #14141e;

  /* Borders & surfaces */
  --border:       rgba(255,255,255,.06);
  --border-hover: rgba(255,255,255,.10);

  /* Text hierarchy */
  --text:       #c4c4cc;
  --text-dim:   #72727e;
  --text-head:  #ececf4;

  /* Accent system — blue→pink OKLCH gradient */
  --accent:          oklch(0.64 0.14 250);   /* primary: blue, bg fills */
  --accent-text:     oklch(0.72 0.08 250);   /* text accent, ≥7:1 on #050508 */
  --accent-glow:     rgba(180,140,210,.15);  /* hover glow — pink-leaning oklch(0.62 0.12 310) */
  --accent-red:      oklch(0.58 0.18 340);   /* hearts, delete — decorative only */

  /* Radii */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --shadow-hover: 0 4px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px var(--accent-glow);

  /* Type */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::selection { background: var(--accent); color:#000; }

.icon-sm { width:15px; height:15px; flex-shrink:0; }
.icon-md { width:18px; height:18px; flex-shrink:0; }

/* ===== Header — frosted glass + micro-purple bleed ===== */
header {
  position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.header-row {
  display:contents;
}
.header-actions { display:flex; align-items:center; gap:10px; flex:1; }
.header-btns { display:flex; gap:6px; }
.search-wrap { position:relative; margin-left:auto; }
header h1 {
  font-size:18px; font-weight:600; color:var(--text-head);
  letter-spacing:-.02em;
  display:flex; align-items:center; gap:6px;
  line-height:1;
}
header .count { font-size:12px; color:var(--text-dim); font-weight:500;
  font-variant-numeric: tabular-nums; line-height:1;
}
#header-updated { font-size:11px; }

/* ===== Buttons — pill style, accent variants ===== */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:var(--radius-full);
  border:1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size:12.5px; font-weight:500;
  cursor:pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s;
  white-space:nowrap; font-family:var(--font-sans);
  position:relative; overflow:hidden; /* for :active ripple if desired — unused, reserved */
}
.btn:hover { background:var(--bg-hover); border-color:var(--border-hover); color:var(--text-head); }
.btn:active { transform:scale(.96); box-shadow:0 0 0 3px var(--accent-glow); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.btn-accent { border-color:var(--accent); color:var(--accent-text); }
.btn-accent:hover { background:var(--accent); color:#000; border-color:var(--accent); }
.btn-accent:active { box-shadow:0 0 0 4px var(--accent-glow); }

.btn-danger { border-color:var(--accent-red); color:var(--accent-red); }
.btn-danger:hover { background:var(--accent-red); color:#000; border-color:var(--accent-red); }
.btn-danger:active { box-shadow:0 0 0 4px rgba(255,90,90,.2); }

.btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.btn-accent.crawling { animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ===== Header scroll shadow ===== */
header.scrolled { box-shadow:0 1px 0 rgba(255,255,255,.03),0 4px 16px rgba(0,0,0,.3); }

/* ===== Search ===== */
.search-wrap { position:relative; }
.search-box {
  position:relative;
  padding:7px 14px 7px 30px; border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-head);
  font-size:13px; width:190px; outline:none;
  font-family:var(--font-sans);
  transition: border-color .2s, width .2s, box-shadow .2s;
}
.search-box:focus { border-color:var(--accent); width:240px; box-shadow:0 0 0 2px var(--accent-glow); }
.search-box::placeholder { color:var(--text-dim); transition:color .25s; }
.search-box:focus::placeholder { color:var(--text-head); opacity:.6; }
.search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none; z-index:1; }

/* ===== Category Bar — floating pills ===== */
.category-bar-wrap {
  position:sticky; top:49px; z-index:99;
  background:color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
}
.category-bar { display:flex; gap:6px; padding:8px 4px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.category-bar::-webkit-scrollbar { display:none; }
.cat-arrow {
  flex-shrink:0; width:32px; height:24px; margin:0 6px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim); font-size:16px; font-weight:300;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s; line-height:1;
  border-radius:var(--radius-md);
}
.cat-arrow:hover { color:var(--text-head); border-color:var(--border-hover); }
.cat-arrow:active { transform:scale(.9); }
.category-bar button {
  padding:4px 12px; border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text);
  font-size:12px; cursor:pointer; white-space:nowrap;
  transition: all .18s; font-family:var(--font-sans); font-weight:500;
  user-select:none;
}
.category-bar button:hover { border-color:var(--border-hover); background:var(--bg-hover); transform:translateY(-1px) scale(1.015); }
.category-bar button.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; transform:translateY(-1px); }

/* ===== Cover Progress ===== */
.cover-progress { height:2px; background:transparent; overflow:hidden; }
.cover-progress-bar { height:100%; width:0%; background:var(--accent); transition:width .3s ease; border-radius:1px; }

/* ===== Card Grid — borderless + micro-purple bg ===== */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:14px; padding:14px 20px;
}

/* Staggered fadeUp via CSS custom properties */
@keyframes fadeUpStaggered {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.card {
  background:var(--bg-card); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  box-shadow: var(--shadow-card);
  position:relative;
  /* Stagger: --i set inline by JS, capped at 4 rows */
  animation: fadeUpStaggered .45s cubic-bezier(.2,0,0,1) both;
  animation-delay: calc(min(var(--i, 0), 15) * 30ms);
}
.card:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: var(--shadow-hover);
}
.card:active { transform: translateY(-1px) scale(.995) !important; }

/* ===== Card Cover ===== */
.card-cover {
  width:100%; aspect-ratio:16/9;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:36px;
  overflow:hidden; position:relative;
}
.card-cover img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card-cover img { transform: scale(1.03); }
.card-cover img[loading="lazy"] { opacity:0; }
.card-cover img.loaded { opacity:1; }
.card-cover .placeholder-icon { opacity:.12; }

/* ===== Shimmer — micro-purple sweep ===== */
.card-cover .shimmer {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(140,130,255,.04) 40%,
    rgba(180,160,255,.06) 50%,
    rgba(140,130,255,.04) 60%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ===== Card Badges & Buttons ===== */
.card-badge {
  position:absolute; top:8px; left:8px; z-index:2;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  color:var(--text-dim); font-size:10px;
  padding:2px 8px; border-radius:var(--radius-full); font-weight:500;
}
.fav-btn, .wl-btn {
  position:absolute; z-index:3;
  width:28px; height:28px; border-radius:50%;
  border:none;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: color .15s, background .15s, transform .15s;
}
.fav-btn { top:8px; right:8px; }
.fav-btn:hover { background:rgba(0,0,0,.8); color:var(--accent-red); }
.fav-btn.faved { color:var(--accent-red); }
.fav-btn:active { transform:scale(1.2); }

.wl-btn { bottom:8px; right:8px; }
.wl-btn:hover { background:rgba(0,0,0,.8); color:var(--accent-text); }
.wl-btn.watch-latered { color:var(--accent-text); }
.wl-btn:active { transform:scale(1.2); }

/* ===== Card Body ===== */
.card-body { padding:10px 12px 12px; }
.card-title {
  font-size:14px; font-weight:600; color:var(--text-head);
  line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom:6px; letter-spacing:-.005em;
}
.card-meta {
  font-size:11px; color:var(--text-dim);
  display:flex; gap:10px; align-items:center;
  font-variant-numeric: tabular-nums;
}

/* ===== Article Page ===== */
.article-page { max-width:860px; margin:0 auto; padding:30px 20px; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.view-enter { animation:fadeUp .35s cubic-bezier(.2,0,0,1) both; }

.article-cover {
  width:100%; max-height:420px; object-fit:cover;
  border-radius:var(--radius-lg); margin-bottom:24px;
  background:#000; min-height:200px;
}
.article-header { margin-bottom:8px; }
.article-header .action-btns { display:flex; gap:6px; margin-top:10px; justify-content:flex-end; }
.article-header .icon-btn {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-dim);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: color .15s, background .15s, border-color .15s;
}
.article-header .icon-btn:hover { border-color:var(--border-hover); color:var(--text-head); }
.article-header .icon-btn:active { transform:scale(.92); }
.article-header .icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.article-header .icon-btn.faved { color:var(--accent-red); border-color:var(--accent-red); }
.article-header .icon-btn.watch-latered { color:var(--accent-text); border-color:var(--accent-text); }
.article-title {
  font-size:24px; font-weight:700; color:var(--text-head);
  letter-spacing:-.02em; line-height:1.3;
  text-wrap: balance;
}
.article-meta {
  font-size:13px; color:var(--text-dim); margin-bottom:8px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.article-meta span { display:inline-flex; align-items:center; gap:4px; }
.article-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:18px; }
.article-tags span {
  padding:2px 10px; border-radius:var(--radius-full);
  background:var(--bg-tag); font-size:11px;
  color:var(--text-dim); font-weight:500;
}
.article-content {
  font-size:15px; line-height:1.9; color:var(--text); margin-bottom:28px;
}
.article-content p { margin-bottom:14px; }
.article-content img { max-width:100%; border-radius:var(--radius-sm); margin:12px 0; }
.article-content pre, .article-content code {
  background:var(--bg-base); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:2px 6px;
  font-size:13px; font-family:'Geist Mono','JetBrains Mono','Fira Code',monospace;
  color:#c8c8d4;
}
.article-content pre { padding:14px 16px; overflow-x:auto; }
.article-content pre code { background:none; border:none; padding:0; }
.article-content h2, .article-content h3 {
  color:var(--text-head); margin:28px 0 12px;
  font-size:18px; font-weight:600;
}
.video-section { margin-bottom:24px; }
.video-section h3 {
  font-size:14px; color:var(--text-dim);
  margin:22px 0 10px; padding-top:14px;
  border-top:1px solid var(--border); font-weight:500;
}
.dplayer-container { border-radius:var(--radius-sm); overflow:hidden; background:#000; }

/* ===== History ===== */
.hist-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--bg-card);
  cursor:pointer;
  transition: background .15s, transform .12s; margin-bottom:8px;
  box-shadow: var(--shadow-card);
}
.hist-item:hover { background:var(--bg-hover); transform:translateX(2px); }
.hist-item-main { flex:1; min-width:0; }
.hist-item-title {
  font-size:14px; font-weight:500; color:var(--text-head);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.hist-item-meta { font-size:11px; color:var(--text-dim); margin-top:2px; display:flex; gap:10px; }
.hist-del {
  width:28px; height:28px; border-radius:50%;
  border:1px solid transparent;
  background:transparent; color:var(--text-dim);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: color .15s, border-color .15s;
  flex-shrink:0; font-size:16px; line-height:1;
}
.hist-del:hover { color:var(--accent-red); border-color:var(--accent-red); }
.hist-del:focus-visible { outline:2px solid var(--accent-red); outline-offset:2px; }

/* ===== Empty & Loading ===== */
.empty { text-align:center; padding:100px 20px; color:var(--text-dim); grid-column:1 / -1; }
.empty p { font-size:15px; margin-top:12px; }
.empty svg { opacity:.2; width:48px; height:48px; }
.loading { text-align:center; padding:60px; color:var(--text-dim); grid-column:1 / -1; }
.spinner {
  width:32px; height:32px;
  border:2.5px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto 10px;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== Pagination ===== */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; padding:20px; flex-wrap:wrap; }
.pagination button {
  padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text);
  cursor:pointer; font-size:13px; font-weight:500;
  font-family:var(--font-sans);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.pagination button:hover { border-color:var(--accent); background:var(--bg-hover); }
.pagination button:active { transform:scale(.95); }
.pagination button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pagination button.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
.pagination button.active:hover { box-shadow:0 0 16px var(--accent-glow); }
.jump-input {
  width:52px; padding:7px 4px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-head);
  font-size:13px; text-align:center;
  font-family:var(--font-sans); outline:none;
  transition: border-color .2s;
  -moz-appearance:textfield;
}
.jump-input::-webkit-inner-spin-button, .jump-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.jump-input:focus { border-color:var(--accent); }

/* ===== Back to Top ===== */
.back-to-top {
  position:fixed; bottom:28px; right:24px; z-index:200;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-dim);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .25s, transform .2s, box-shadow .2s;
  opacity:0; transform:translateY(12px); pointer-events:none;
  box-shadow:var(--shadow-card);
}
.back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover { background:var(--bg-hover); color:var(--text-head); }
.back-to-top:active { transform:scale(.92); }
.back-to-top:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ===== Scroll to Bottom ===== */
.scroll-bottom {
  position:fixed; bottom:28px; right:72px; z-index:200;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-dim);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .25s, transform .2s;
  opacity:0; transform:translateY(12px); pointer-events:none;
  box-shadow:var(--shadow-card);
}
.scroll-bottom.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-bottom:hover { background:var(--bg-hover); color:var(--text-head); }
.scroll-bottom:active { transform:scale(.92); }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; padding:10px 12px; }
  .card-body { padding:8px 10px 10px; }
  .card-title { font-size:13px; }
  .card-meta { font-size:10px; }
  header { padding:8px 12px; }
  header h1 { font-size:16px; }
  .btn { font-size:12px; padding:5px 10px; }
  .category-bar-wrap { top:0; position:static; }
  .category-bar { padding:6px 12px; gap:4px; }
  .category-bar button { font-size:11px; padding:3px 10px; }
  .article-page { padding:16px 12px; }
  .article-title { font-size:18px; }
  .pagination { padding:14px; gap:4px; }
  .pagination button { padding:6px 10px; font-size:12px; }
  .back-to-top { bottom:28px; right:12px; width:36px; height:36px; }
  .scroll-bottom { right:56px; width:36px; height:36px; }
  .fav-btn, .wl-btn { width:24px; height:24px; }
  .fav-btn svg, .wl-btn svg { width:12px; height:12px; }
  .article-header .icon-btn { width:32px; height:32px; }
  /* Mobile header: search on its own row */
  header { flex-direction:column; align-items:stretch; gap:4px; padding:6px 12px; position:static; }
  .header-row { display:flex; align-items:center; gap:8px; }
  .header-row:first-child { padding-bottom:4px; }
  .header-actions { flex-direction:column; gap:6px; margin-left:0; }
  .header-btns { gap:4px; }
  .header-btns .btn { font-size:11px; padding:4px 8px; }
  .search-wrap { width:calc(100% - 8px); margin:0 auto; }
  .search-box, .search-box:focus { width:100%; padding-top:5px; padding-bottom:5px; }
  .search-icon { left:10px; }
  #header-updated { margin-left:auto; }
  /* Mobile article header: one row, left/right */
  #view-article header { flex-direction:row; }
  #view-article .header-row { display:none; }
  /* Card tap feedback */
  .card { -webkit-tap-highlight-color:transparent; }
  .card:active { transform:translateY(-1px) scale(.985) !important; box-shadow:var(--shadow-hover); transition:transform .1s, box-shadow .1s; }
}
@media (max-width:400px) {
  .grid { grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
}
@media (max-width:360px) {
  .fav-btn, .wl-btn { width:20px; height:20px; }
  .fav-btn svg, .wl-btn svg { width:10px; height:10px; }
  .card-title { padding-right:0; }
  .card-badge { font-size:9px; padding:1px 6px; }
}

/* ===== Performance Degradation ===== */
@media (max-width:768px) {
  .low-end header,
  .low-end .category-bar-wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .low-end header { background:var(--bg-deep); }
  .low-end .category-bar-wrap { background:var(--bg-deep); }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior:auto; }
  .card { animation:none; }
}