/*
 * jo.to scans — joto-main.css
 * ============================
 * Core theme stylesheet. Enqueued globally via functions.php.
 * Contains: CSS variables (dark + light mode), base reset, typography,
 *           site header, footer, card grid, ticker bar, bg layer,
 *           sakura petals, bg-settings panel, mobile nav, buttons,
 *           scrollbar, dark/light mode variables, and responsive rules.
 *
 * Page-specific styles (search, browse, account, taxonomy, archive)
 * live in theme-pages.css, enqueued separately.
 */

:root {
    --bg: #0e0f12;
    --bg2: #13141a;
    --bg3: #1a1b22;
    --bg4: #202128;
    --pink: #e8197a;
    --pink-dim: rgba(232,25,122,0.15);
    --pink-glow: rgba(232,25,122,0.35);
    --amber: #f5a623;
    --text: #f0f0f4;
    --text-dim: #8a8a9a;
    --text-mute: #4a4a5a;
    --border: rgba(255,255,255,0.07);
    --border-pink: rgba(232,25,122,0.3);
    --radius: 8px;
    --radius-lg: 14px;
    --font-head: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --toolbar-h: 48px;       /* reader toolbar height */
    --sidebar-w: 220px;      /* reader sidebar width (overridden in media queries) */
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 10px; }

  /* === NOISE OVERLAY === */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  .wrap { max-width: 1380px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

  /* ===== HEADER ===== */
  /* ═══ HEADER 2-ROW ═══ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(10,11,15,.9);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--border);
  }
  .site-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--pink) 25%, var(--cyan) 75%, transparent 100%);
    opacity: .32;
  }

  /* Row 1 — logo / search / auth */
  .hdr-row1 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 22px;
    height: 84px;
  }

  /* Row 2 — nav + bg settings */
  .hdr-row2 {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 18px;
    height: 38px;
    border-top: 1px solid var(--border);
    background: rgba(8,9,14,.5);
  }

  /* ── LOGO ── */
  .logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .logo-mark {
    height: 72px;
    width: auto;
    max-width: 220px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 14px var(--logo-glow, rgba(225,34,123,.55)));
    transition: filter .4s ease;
  }
  .logo-mark:not([src]), .logo-mark[src=""] {
    display: none;
  }
  .logo-words {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
  }
  .logo-main {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.3px;
    color: var(--text);
  }
  .logo-main em { color: var(--pink); font-style: normal; }
  .logo-sub {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-dim);
  }

  /* ── SEARCH ── */
  .hdr-search {
    position: relative;
    flex: 1;
    max-width: 360px;
  }
  .hdr-search input {
    width: 100%;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 36px 8px 14px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: all .18s ease;
    font-family: 'Outfit', sans-serif;
  }
  .hdr-search input:focus {
    border-color: rgba(225,34,123,.35);
    background: rgba(225,34,123,.05);
    box-shadow: 0 0 0 3px rgba(225,34,123,.06);
  }
  .hdr-search input::placeholder { color: var(--text-dim); }
  .hdr-search-ico {
    position: absolute;
    right: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    line-height: 0;
  }

  /* ── AUTH BUTTONS ── */
  .hdr-auth {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .btn-login {
    padding: 6px 15px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    text-decoration: none;
    transition: all .18s ease;
    background: none;
    cursor: pointer;
  }
  .btn-login:hover { border-color: var(--pink); color: var(--pink); }
  .btn-reg {
    padding: 6px 15px;
    background: var(--pink);
    border-radius: 7px;
    color: #fff;
    font-size: 12.5px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s ease;
    border: none;
    cursor: pointer;
  }
  .btn-reg:hover { background: #ff2d8a; transform: translateY(-1px); }

  /* ── NAV ROW ── */
  .hdr-nav {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 1;
  }
  .hdr-nav a {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
  }
  .hdr-nav a:hover { color: var(--text); background: rgba(255,255,255,.055); }
  .hdr-nav a.active { color: var(--pink); }

  /* ── BG SETTINGS BUTTON (row 2) ── */
  .btn-bgsettings {
    width: 30px; height: 30px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text-dim);
    line-height: 0;
    cursor: pointer;
    transition: all .18s ease;
    margin-left: auto;
  }
  .btn-bgsettings:hover, .btn-bgsettings.active {
    border-color: rgba(225,34,123,.35);
    color: var(--pink);
    background: rgba(225,34,123,.1);
  }

  /* ── MOBILE HAMBURGER ── */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
    margin-left: auto;
  }
  .hamburger span {
    display: block;
    width: 21px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.25s;
  }

  @media (max-width: 820px) {
    .hdr-search { max-width: 180px; }
    .hdr-row2 { display: none; }
  }
  @media (max-width: 600px) {
    .hdr-search, .hdr-auth { display: none; }
    .hamburger { display: flex; }
  }

  /* ===== TICKER ===== */
  .ticker-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .ticker-label {
    background: var(--pink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-transform: uppercase;
  }
  .ticker-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }
  .ticker-track {
    display: flex;
    gap: 40px;
    animation: ticker 40s linear infinite;
    white-space: nowrap;
  }
  .ticker-track:hover { animation-play-state: paused; }
  @keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
  }
  .ticker-item a { color: var(--text); text-decoration: none; transition: color 0.2s; }
  .ticker-item a:hover { color: var(--pink); }
  .ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }
  .ticker-date { color: var(--pink); font-size: 11px; font-family: var(--font-mono); }

  /* ===== HERO SECTION ===== */
  .hero {
    padding: 36px 0 0;
    position: relative;
  }

  /* ===== FEATURED SLIDER ===== */
  .featured-slider {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    margin-bottom: 16px;
  }

  .featured-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/7;
    cursor: pointer;
  }
  .featured-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .featured-main:hover .featured-main-img { transform: scale(1.03); }
  .featured-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14,15,18,0.97) 0%, rgba(14,15,18,0.5) 50%, transparent 100%);
  }
  .featured-main-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
  }
  .featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
  }
  .featured-title {
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--text);
  }
  .featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .meta-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .meta-tag svg { color: var(--pink); }
  .btn-read {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pink);
    color: #fff;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: transform 0.15s, opacity 0.15s;
  }
  .btn-read:hover { transform: translateY(-2px); opacity: 0.9; }

  .featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .featured-side-item {
    display: flex;
    gap: 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
    flex: 1;
    align-items: center;
    padding: 10px;
  }
  .featured-side-item:hover { border-color: var(--border-pink); transform: translateX(2px); }

  .side-thumb {
    width: 60px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg3);
  }
  .side-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
  .side-label {
    font-size: 10px;
    color: var(--pink);
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .side-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .side-meta { font-size: 11px; color: var(--text-mute); }

  /* ===== TOP STRIP (stats) ===== */
  .stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 32px;
  }
  .stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pink-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
    flex-shrink: 0;
  }
  .stat-num {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .stat-label { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

  /* ===== MAIN GRID LAYOUT ===== */
  .main-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    padding-bottom: 60px;
  }

  /* ===== SECTION HEADER ===== */
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  .section-title::before {
    content: '';
    display: block;
    width: 3px;
    height: 18px;
    background: var(--pink);
    border-radius: 2px;
  }
  .section-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg3);
    border-radius: 7px;
    padding: 3px;
  }
  .tab {
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
  }
  .tab.active { background: var(--pink); color: #fff; }
  .tab:not(.active):hover { color: var(--text); background: var(--bg4); }
  .see-all {
    font-size: 12px;
    color: var(--pink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s;
  }
  .see-all:hover { gap: 7px; }

  /* ===== CARD GRID ===== */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
  }

  .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .card:hover {
    border-color: var(--border-pink);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  }

  .card-thumb-wrap {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--bg3);
  }
  .card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
  }
  .card-thumb-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .card:hover .card-thumb { transform: scale(1.06); }
  .card-lang {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; padding: 1px 5px; border-radius: 3px;
    border: 1px solid var(--border); color: var(--text-dim);
    font-family: var(--font-mono);
  }
  .card-rating-val { font-weight: 700; margin-left: 2px; }

  .card-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(14,15,18,0.85);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
    color: var(--pink);
    font-size: 9px;
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
  }

  .card-rating {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(14,15,18,0.85);
    backdrop-filter: blur(6px);
    color: var(--amber);
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14,15,18,0.9) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
  }
  .card:hover .card-overlay { opacity: 1; }
  .card-quick-read {
    background: var(--pink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    transform: translateY(8px);
    transition: transform 0.2s;
  }
  .card:hover .card-quick-read { transform: translateY(0); }

  .card-body { padding: 10px 11px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .card-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-head);
  }
  .card-sub {
    font-size: 10.5px;
    color: var(--text-mute);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  .card-tag {
    background: var(--bg4);
    color: var(--text-dim);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    text-decoration: none;
  }
  .card-tag:hover { background: var(--pink-dim); color: var(--pink); }
  /* Genre tag — always cyan */
  .card-tag-genre {
    background: rgba(0,180,210,.12);
    color: #00c8e8;
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    text-decoration: none;
    border: 1px solid rgba(0,180,210,.25);
  }
  .card-tag-genre:hover { background: rgba(0,180,210,.22); color: #40e0ff; }
  .tag-chip {
    background: var(--bg4);
    color: var(--text-dim);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
  }
  .tag-chip:hover { background: var(--pink-dim); color: var(--pink); cursor: pointer; }

  /* ===== NEWS SECTION ===== */
  .news-list { display: flex; flex-direction: column; gap: 1px; }
  .news-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    cursor: pointer;
  }
  .news-item:last-child { border-bottom: none; }
  .news-thumb {
    width: 90px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg3);
  }
  .news-info { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
  .news-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-item:hover .news-title { color: var(--pink); }
  .news-meta { font-size: 11px; color: var(--text-mute); display: flex; gap: 10px; align-items: center; }
  .news-date { color: var(--pink); font-family: var(--font-mono); font-size: 10px; }

  /* ===== SIDEBAR ===== */
  .sidebar { display: flex; flex-direction: column; gap: 20px; }

  .widget {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .widget-header {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .widget-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .widget-title svg { color: var(--pink); }
  .widget-body { padding: 14px 16px; }

  /* Chatbox */
  .chat-messages {
    height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding-right: 4px;
  }
  .chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .chat-msg-user { font-size: 11px; color: var(--pink); font-weight: 600; font-family: var(--font-mono); }
  .chat-msg-text {
    background: var(--bg3);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
  }
  .chat-msg-time { font-size: 10px; color: var(--text-mute); align-self: flex-end; }
  .chat-input-row { display: flex; gap: 8px; }
  .chat-input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 8px 12px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
  }
  .chat-input:focus { border-color: var(--border-pink); }
  .chat-send {
    background: var(--pink);
    border: none;
    border-radius: 7px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
  }
  .chat-send:hover { opacity: 0.85; transform: scale(0.95); }

  /* Online status */
  .chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #4caf50;
    font-family: var(--font-mono);
  }
  .status-dot {
    width: 6px;
    height: 6px;
    background: #4caf50;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Tag cloud */
  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cloud-tag {
    background: var(--bg3);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-mono);
    text-decoration: none;
  }
  .cloud-tag:hover { background: var(--pink-dim); border-color: var(--border-pink); color: var(--pink); }

  /* Top manga sidebar list */
  .top-list { display: flex; flex-direction: column; gap: 10px; }
  .top-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
  }
  .top-item:hover { opacity: 0.8; }
  .top-num {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-mute);
    flex-shrink: 0;
  }
  .top-item:first-child .top-num { background: var(--pink); color: #fff; }
  .top-item:nth-child(2) .top-num { background: rgba(232,25,122,0.3); color: var(--pink); }
  .top-item:nth-child(3) .top-num { background: rgba(232,25,122,0.15); color: var(--pink); }
  .top-thumb {
    width: 38px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--bg3);
    flex-shrink: 0;
  }
  .top-info { flex: 1; overflow: hidden; }
  .top-name {
    font-size: 12px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
  }
  .top-count { font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); }

  /* Announcement widget */
  .announce-text {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.65;
  }
  .announce-text strong { color: var(--pink); }
  .announce-text s { color: var(--text-mute); }
  .announce-date {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--pink);
    background: var(--pink-dim);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  /* ===== PAGINATION ===== */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0;
  }
  .page-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text-dim);
    transition: all 0.18s;
    text-decoration: none;
    font-family: var(--font-mono);
  }
  .page-btn:hover { border-color: var(--border-pink); color: var(--pink); }
  .page-btn.active { background: var(--pink); border-color: var(--pink); color: #fff; }
  .page-dots { color: var(--text-mute); padding: 0 2px; }

  /* ===== FOOTER ===== */
  footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 40px 0 24px;
    margin-top: 20px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
  }
  .footer-brand .logo { margin-bottom: 12px; display: inline-flex; }
  .footer-desc { font-size: 12.5px; color: var(--text-mute); line-height: 1.6; }
  .footer-col-title {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }
  .footer-links { display: flex; flex-direction: column; gap: 8px; }
  .footer-links a {
    font-size: 12.5px;
    color: var(--text-mute);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--pink); }
  .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-copy { font-size: 11.5px; color: var(--text-mute); }
  .footer-copy span { color: var(--pink); }

  /* ===== BACK TO TOP ===== */
  .back-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: var(--pink);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--pink-glow);
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
    pointer-events: none;
    border: none;
  }
  .back-top.visible { opacity: 1; pointer-events: auto; }
  .back-top:hover { transform: translateY(-3px); }

  /* Placeholder image (gradient) */
  .img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .placeholder-cover {
    width: 100%;
    height: 100%;
  }

  /* ===== MOBILE NAV OVERLAY ===== */
  .mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14,15,18,0.97);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: fadeIn 0.2s ease;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dim);
    text-decoration: none;
    padding: 10px 20px;
    transition: color 0.2s;
  }
  .mobile-nav a:hover { color: var(--pink); }
  .mobile-close {
    position: absolute;
    top: 18px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 22px;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1100px) {
    .featured-slider { grid-template-columns: 1fr; }
    .featured-sidebar { display: none; }
    .main-layout { grid-template-columns: 1fr; }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    nav { display: none; }
    .hamburger { display: flex; }
    .search-bar { width: 160px; }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-title { font-size: 20px; }
    .sidebar { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .header-right .btn-login span { display: none; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .search-bar { display: none; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
  }
/* ══════════════════════════════════════════════
   BG SETTINGS PANEL
══════════════════════════════════════════════ */
@keyframes mdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bgsettings-overlay{display:none;position:fixed;inset:0;z-index:149;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.bgsettings-overlay.vis{display:block}
.bgsettings-panel{position:fixed;top:64px;right:18px;width:310px;background:var(--bg-elev);border:1px solid var(--border-hi);border-radius:14px;box-shadow:0 18px 56px rgba(0,0,0,.7);z-index:150;display:none;overflow:hidden;animation:mdrop .16s ease}
.bgsettings-panel.vis{display:block}
.bgsp-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 11px;border-bottom:1px solid var(--border)}
.bgsp-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.bgsp-close{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-dim);transition:all var(--dur) var(--ease)}
.bgsp-close:hover{background:rgba(255,255,255,.07);color:var(--text)}
.bgsp-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.bgsp-section:last-child{border-bottom:none}
.bgsp-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted);margin-bottom:8px}
.bgsp-label{font-size:12.5px;font-weight:600;color:var(--text)}
.bgsp-sublabel{font-size:11px;color:var(--text-dim);margin-top:1px}
.bgsp-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;gap:10px}
.bgtoggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid var(--border);position:relative;flex-shrink:0;transition:all .22s var(--ease)}
.bgtoggle.on{background:var(--pink);border-color:var(--pink)}
.bgtoggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .22s var(--ease)}
.bgtoggle.on .bgtoggle-knob{transform:translateX(16px)}
.bgsp-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bgsp-preset{width:46px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:2px;border:2px solid var(--border);background:rgba(255,255,255,.03);overflow:hidden;transition:all var(--dur) var(--ease);cursor:pointer;padding:0}
.bgsp-preset span{flex:1;height:100%;display:block}
.bgsp-preset:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.bgsp-preset.active{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-dim)}
.bgsp-swatch-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:32px}
.bgsp-swatch{width:30px;height:30px;border-radius:6px;border:2px solid rgba(255,255,255,.12);position:relative;cursor:pointer;transition:all var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}
.bgsp-swatch:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.bgsp-swatch-del{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:rgba(20,20,30,.9);border:1px solid var(--border);display:none;align-items:center;justify-content:center;font-size:8px;color:var(--text-muted);line-height:0}
.bgsp-swatch:hover .bgsp-swatch-del{display:flex}
.bgsp-swatch-del:hover{background:#f55;color:#fff;border-color:#f55}
.bgsp-add-color{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;border:1px dashed var(--border-hi);color:var(--text-muted);font-size:12px;transition:all var(--dur) var(--ease)}
.bgsp-add-color:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-dim)}
.bgsp-footer{padding:10px 16px;border-top:1px solid var(--border)}
.bgsp-reset,.bgsp-reset-btn{font-size:12px;color:var(--text-dim);padding:4px 10px;border-radius:5px;border:1px solid transparent;transition:all var(--dur) var(--ease)}
.bgsp-reset:hover,.bgsp-reset-btn:hover{color:#f55;border-color:rgba(255,50,50,.25)}
.bgsp-blob-row{display:flex;gap:12px;align-items:flex-start}
.bgsp-blob-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.bgsp-blob-swatch{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:0 0 14px rgba(0,0,0,.4);position:relative}
.bgsp-blob-swatch:hover{transform:scale(1.1);border-color:rgba(255,255,255,.4)}
.bgsp-blob-swatch::after{content:'✎';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,0);transition:color var(--dur) var(--ease);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bgsp-blob-swatch:hover::after{color:rgba(255,255,255,.85)}
.bgsp-blob-label{font-size:10px;color:var(--text-dim);white-space:nowrap}



  /* ═══ ACCORDION SECTIONS ═══ */
  .acc-block{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:16px}
  .acc-header{display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;cursor:pointer;user-select:none;transition:background .18s ease}
  .acc-header:hover{background:rgba(255,255,255,.03)}
  .acc-toggle-icon{width:26px;height:26px;border-radius:7px;background:var(--pink-dim);border:1px solid var(--border-pink);display:flex;align-items:center;justify-content:center;color:var(--pink);flex-shrink:0;transition:all .22s ease;line-height:0}
  .acc-block.open .acc-toggle-icon{background:var(--pink);color:#fff;transform:rotate(180deg)}
  .acc-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text);flex:1}
  .acc-title em{color:var(--pink);font-style:normal;margin-left:5px;font-size:11px;font-weight:600;letter-spacing:.5px;opacity:.8}
  .acc-type-tabs{display:flex;gap:4px}
  .acc-type-tab{padding:4px 12px;border-radius:20px;font-size:11.5px;font-weight:700;border:1px solid var(--border);color:var(--text-dim);background:none;cursor:pointer;transition:all .16s ease;font-family:'Outfit',sans-serif}
  .acc-type-tab:hover{border-color:var(--border-hi);color:var(--text)}
  .acc-type-tab.active{background:var(--pink);border-color:var(--pink);color:#fff}
  .acc-see-all{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-dim);text-decoration:none;transition:color .16s ease;flex-shrink:0}
  .acc-see-all:hover{color:var(--pink)}
  .acc-body{display:none;padding:0 20px 20px;border-top:1px solid var(--border)}
  .acc-block.open .acc-body{display:block}
  .acc-lang-row{display:flex;align-items:center;gap:6px;padding:12px 0 14px}
  .acc-lang-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-right:4px}
  .acc-lang-btn{padding:3px 11px;border-radius:5px;font-size:11.5px;font-weight:600;border:1px solid var(--border);color:var(--text-dim);background:none;cursor:pointer;transition:all .16s ease;font-family:'Outfit',sans-serif}
  .acc-lang-btn:hover{color:var(--text);border-color:var(--border-hi)}
  .acc-lang-btn.active{border-color:rgba(225,34,123,.4);color:var(--pink);background:var(--pink-dim)}
  .acc-grid-wrap{min-height:80px}
  .acc-empty{text-align:center;padding:36px 0;font-size:13px;color:var(--text-dim)}
  .lang-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:4px;background:var(--bg3);border:1px solid var(--border);color:var(--text-dim)}


  /* time-filter + genre/rating rows share .acc-lang-row style */
  .acc-filter-row { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
  .acc-filter-row + .acc-filter-row { margin-top:6px; }
  .acc-filters-wrap { padding:12px 0 14px;display:flex;flex-direction:column;gap:0; }
  .acc-star-btn { padding:3px 11px;border-radius:5px;font-size:11.5px;font-weight:700;
    border:1px solid var(--border);color:var(--text-dim);background:none;cursor:pointer;
    transition:all .16s ease;font-family:'Outfit',sans-serif;letter-spacing:.2px; }
  .acc-star-btn:hover{color:var(--gold);border-color:rgba(255,167,0,.35)}
  .acc-star-btn.active{border-color:rgba(255,167,0,.5);color:var(--gold);background:rgba(255,167,0,.09)}
  /* star display on cards */
  .card-rating { display:flex;align-items:center;gap:4px;margin-top:3px; }
  .card-stars  { color:var(--gold);font-size:11px;letter-spacing:-.5px; }
  .card-rating-num { font-size:11px;font-weight:700;color:var(--gold); }
  .card-rating-count { font-size:10.5px;color:var(--text-dim); }


  /* ═══ LIGHT MODE ═══ */
  /* Applied when <html data-theme="light"> */
  [data-theme="light"] {
    --bg:          #f5f5f8;
    --bg2:         #ededf2;
    --bg3:         #e4e4ea;
    --bg4:         #dadadf;
    --bg-card:     #ffffff;
    --bg-elev:     #f0f0f5;
    --bg-input:    rgba(0,0,0,0.04);
    --bg-panel:    #f0f0f5;

    --text:        #1a1a2e;
    --text-dim:    #38385a;
    --text-mute:   #3e3e58;
    --text-muted:  #343450;

    --border:      rgba(0,0,0,0.09);
    --border-hi:   rgba(0,0,0,0.16);
    --border-pink: rgba(225,34,123,0.25);

    --pink-dim:    rgba(225,34,123,0.1);
    --pink-glow:   rgba(225,34,123,0.12);

    /* Blobs lighter in light mode */
    --blob-opacity: .07;
  }

  /* Invert mesh grid line colour in light mode */
  [data-theme="light"] .bg-mesh,
  [data-theme="light"] .mesh {
    background-image:
      linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
  }

  /* Blobs less intense in light mode */
  [data-theme="light"] .bg-blob-1,
  [data-theme="light"] .bg-blob-2,
  [data-theme="light"] .bg-blob-3,
  [data-theme="light"] .blob { opacity: .07 !important; }

  /* Header */
  [data-theme="light"] .site-header {
    background: rgba(245,245,248,.94);
  }
  [data-theme="light"] .hdr-row2 {
    background: rgba(237,237,242,.7);
  }

  /* Cards */
  [data-theme="light"] .post-card,
  [data-theme="light"] .card,
  [data-theme="light"] .mini-card {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.04);
  }

  /* Widgets */
  [data-theme="light"] .widget,
  [data-theme="light"] .acc-block {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  /* Inputs */
  [data-theme="light"] .hdr-search input,
  [data-theme="light"] .af-input,
  [data-theme="light"] .as-select,
  [data-theme="light"] .stb-select {
    background: #fff;
    color: var(--text);
  }

  /* Stat labels — explicitly darker in light mode */
  [data-theme="light"] .stat-label,
  [data-theme="light"] .featured-meta,
  [data-theme="light"] .meta-tag,
  [data-theme="light"] .ticker-item,
  [data-theme="light"] .card-artist,
  [data-theme="light"] .card-meta-row,
  [data-theme="light"] .wrc-time,
  [data-theme="light"] .wn-time {
    color: #505070;
  }

  /* Featured title — pink-tinted glow for brightness on light bg */
  [data-theme="light"] .featured-title,
  [data-theme="light"] .featured-title a {
    color: #0e0e1c;
    text-shadow: 0 0 28px rgba(225,34,123,.22), 0 1px 0 rgba(255,255,255,.8);
  }

  /* Scrollbar */
  [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg2); }
  [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }

  /* Theme toggle button state */
  [data-theme="light"] .theme-toggle-btn .icon-moon { display: none; }
  [data-theme="light"] .theme-toggle-btn .icon-sun  { display: flex; }

  /* ── Colour scheme hint for browser UI (scrollbar, form controls) ── */
  [data-theme="light"] { color-scheme: light; }
  :root                { color-scheme: dark;  }


  /* ── Light mode text & title fixes ── */
  [data-theme="light"] a {
    color: var(--text);
  }
  [data-theme="light"] a:hover {
    color: var(--pink);
  }
  [data-theme="light"] .stat-label,
  [data-theme="light"] .card-artist,
  [data-theme="light"] .ticker-date,
  [data-theme="light"] .news-meta,
  [data-theme="light"] .acc-lang-label,
  [data-theme="light"] .widget-title {
    color: var(--text-mute);
  }
  [data-theme="light"] .featured-title a,
  [data-theme="light"] .featured-title {
    color: #0f0f1e;
    text-shadow:
      0 0 40px rgba(225,34,123,.45),
      0 2px 12px rgba(0,0,0,.35);
  }

  /* ── Smooth transition on theme switch ─────────────────────────────── */
  *, *::before, *::after {
    transition:
      background-color .22s ease,
      border-color     .22s ease,
      color            .18s ease,
      box-shadow       .22s ease;
  }
  /* Don't animate things that shouldn't transition */
  .ticker-track, .bg-blob-1, .bg-blob-2, .bg-blob-3,
  .blob, .petal, canvas { transition: none !important; }


  /* ── Theme toggle button ─────────────────────────────────────────────── */
  .theme-toggle-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s ease;
    flex-shrink: 0;
  }
  .theme-toggle-btn:hover {
    border-color: var(--border-pink);
    color: var(--pink);
    background: var(--pink-dim);
  }
  .theme-toggle-btn .icon-sun  { display: none; }
  .theme-toggle-btn .icon-moon { display: flex; }

  /* ═══ TICKER ADDITIONS ═══ */
  .ticker-label-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.5);
    animation: tickerBlink 1.4s ease-in-out infinite;
  }
  @keyframes tickerBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
  .ticker-lang-badge {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; padding: 1px 5px; border-radius: 3px;
    border: 1px solid var(--border); color: var(--text-dim);
  }
  .ticker-track.paused { animation-play-state: paused; }

  /* ══════════════════════════════════════════════
     HOMEPAGE LAYOUT
  ══════════════════════════════════════════════ */
  .homepage-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding: 28px 0 60px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .homepage-main { min-width: 0; }
  .homepage-layout > .sidebar {
    position: sticky;
    top: 110px;
    align-self: start;
  }

  /* Ticker sub-elements */
  .ticker-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--pink); flex-shrink: 0; margin-right: 2px;
  }
  .ticker-title { color: var(--text); font-size: 12.5px; font-weight: 500; }
  .ticker-sep   { color: var(--text-mute); margin: 0 4px; }
  .ticker-artist{ color: var(--text-dim); font-size: 12px; }
  .ticker-lang  { display: none; } /* shown by .ticker-lang-badge from last session */

  /* Featured hero sub-elements */
  .featured-side {
    display: flex; flex-direction: column; gap: 10px;
  }
  .featured-stats {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text-dim); margin-top: 10px;
  }
  .featured-stats span { display: flex; align-items: center; gap: 4px; }
  .featured-lang {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; padding: 1px 6px; border-radius: 3px;
    border: 1px solid var(--border); color: var(--text-dim);
  }
  .featured-read-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; background: var(--pink); color: #fff;
    border-radius: 8px; font-size: 13px; font-weight: 700;
    text-decoration: none; transition: all .18s ease;
    margin-top: 14px; width: fit-content;
  }
  .featured-read-btn:hover { background: #ff2d8a; transform: translateY(-1px); }
  .featured-tag {
    color: var(--text-dim); font-size: 12px; text-decoration: none;
  }
  .featured-tag:hover { color: var(--pink); }

  /* Side panel (3 small featured items) */
  .side-info  { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .side-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
  .side-tag   { font-size: 10px; color: var(--text-dim); background: var(--bg3);
                padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }
  .side-pages { font-size: 11px; color: var(--text-mute); }
  .side-thumb {
    width: 52px; height: 72px; object-fit: cover; border-radius: 5px;
    flex-shrink: 0; background: var(--bg3);
  }

  /* placeholder-cover (gradient fallback on featured main) */
  .placeholder-cover {
    width: 100%; height: 100%;
    position: absolute; inset: 0;
  }

  /* Responsive homepage */
  @media (max-width: 1024px) {
    .homepage-layout { grid-template-columns: 1fr; }
    .homepage-layout > .sidebar { display: none; }
  }

  /* ══════════════════════════════════════════════
     BACKGROUND LAYER — blobs, noise, mesh, petals
  ══════════════════════════════════════════════ */
  .bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }
  .bg-layer.no-mesh::after { display: none; }

  .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    pointer-events: none;
  }
  .bg-blob-1 {
    width: 700px; height: 700px;
    top: -200px; left: -150px;
    background: radial-gradient(circle, rgba(225,34,123,.35), transparent 70%);
    animation: blobFloat1 22s ease-in-out infinite;
  }
  .bg-blob-2 {
    width: 600px; height: 600px;
    top: 30%; right: -100px;
    background: radial-gradient(circle, rgba(210,60,110,.25), transparent 70%);
    animation: blobFloat2 28s ease-in-out infinite;
  }
  .bg-blob-3 {
    width: 500px; height: 500px;
    bottom: -100px; left: 35%;
    background: radial-gradient(circle, rgba(255,180,210,.2), transparent 70%);
    animation: blobFloat3 18s ease-in-out infinite;
  }

  @keyframes blobFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(60px,-40px) scale(1.05); }
    66%      { transform: translate(-30px,50px) scale(.95); }
  }
  @keyframes blobFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(-70px,30px) scale(1.08); }
    75%      { transform: translate(40px,-60px) scale(.94); }
  }
  @keyframes blobFloat3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-50px,-40px) scale(1.06); }
  }

  .bg-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.35;
    pointer-events: none;
  }

  .sakura-wrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .petal {
    position: absolute;
    top: -20px;
    border-radius: 50% 0 50% 0;
    pointer-events: none;
    animation: petalFall linear infinite;
    opacity: 0.7;
  }
  @keyframes petalFall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
    5%   { opacity: .7; }
    95%  { opacity: .5; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
  }

  /* ══════════════════════════════════════════════
     SIDEBAR & WIDGETS
  ══════════════════════════════════════════════ */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .widget {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .widget-title, .widget-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
  }
  .widget-body {
    padding: 14px 16px;
  }
  .widget ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    margin: 0;
  }
  .widget ul li a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    transition: color .15s;
  }
  .widget ul li a:hover { color: var(--pink); }

  /* Accordion loading state */
  .acc-loading {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }