/* n456 AVLog UI Core - common CSS for n04/n05/n06 */

:root {
  --avlog-bg: #171224;
  --avlog-bg-2: #241835;
  --avlog-panel: rgba(27, 20, 43, .94);
  --avlog-panel-2: rgba(44, 31, 67, .92);
  --avlog-text: #f6edff;
  --avlog-muted: #b9a8cc;
  --avlog-accent: #a879ff;
  --avlog-accent-2: #ff9ee7;
  --avlog-line: rgba(190, 139, 255, .42);
  --avlog-glow: rgba(168, 121, 255, .34);
  --avlog-radius: 18px;
}

.avlog-ui,
.avh-hud,
.fanza-search-tool,
.avlog-discovery-board,
.n456-avlog-scope {
  color: var(--avlog-text);
  --local-panel: var(--avlog-panel);
}

.avlog-panel,
.avlog-card,
.avh-card,
.avh-panel,
.avdb-panel,
.avdb-card,
.n456-panel,
.n456-card {
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--avlog-panel), var(--avlog-panel-2));
  border: 1px solid var(--avlog-line);
  border-radius: var(--avlog-radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), 0 0 18px var(--avlog-glow);
  color: var(--avlog-text);
}

.avlog-title,
.avh-title,
.avdb-title,
.n456-title {
  color: var(--avlog-text);
  text-shadow: 0 0 12px var(--avlog-glow);
}

.avlog-muted,
.avh-muted,
.avdb-muted,
.n456-muted {
  color: var(--avlog-muted);
}

.avlog-badge,
.avh-badge,
.avdb-badge,
.n456-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .28em .65em;
  border: 1px solid var(--avlog-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--avlog-text);
}

.avlog-button,
.avh-button,
.avdb-button,
.n456-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  border: 1px solid var(--avlog-line);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--avlog-accent), var(--avlog-accent-2));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px var(--avlog-glow);
}

.avlog-grid,
.n456-grid {
  display: grid;
  gap: 14px;
}

.avlog-grid-4,
.n456-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .avlog-grid-4,
  .n456-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Theme: 紫（デフォ） */
body.avlog-theme-purple,
.avlog-theme-purple {
  --avlog-bg: #171224;
  --avlog-bg-2: #241835;
  --avlog-panel: rgba(27, 20, 43, .94);
  --avlog-panel-2: rgba(44, 31, 67, .92);
  --avlog-text: #f6edff;
  --avlog-muted: #b9a8cc;
  --avlog-accent: #a879ff;
  --avlog-accent-2: #ff9ee7;
  --avlog-line: rgba(190, 139, 255, .42);
  --avlog-glow: rgba(168, 121, 255, .34);
}

/* Theme: 漆黒 */
body.avlog-theme-shikkoku,
.avlog-theme-shikkoku {
  --avlog-bg: #050507;
  --avlog-bg-2: #111116;
  --avlog-panel: rgba(9, 9, 12, .96);
  --avlog-panel-2: rgba(22, 22, 28, .94);
  --avlog-text: #f3f0e8;
  --avlog-muted: #a9a39a;
  --avlog-accent: #d8b76a;
  --avlog-accent-2: #f5e3aa;
  --avlog-line: rgba(216, 183, 106, .38);
  --avlog-glow: rgba(216, 183, 106, .22);
}

/* Theme: 濃紺 */
body.avlog-theme-navy,
.avlog-theme-navy {
  --avlog-bg: #061222;
  --avlog-bg-2: #0b1d34;
  --avlog-panel: rgba(8, 21, 39, .96);
  --avlog-panel-2: rgba(11, 31, 56, .92);
  --avlog-text: #eaf4ff;
  --avlog-muted: #9fb8d2;
  --avlog-accent: #5fa8ff;
  --avlog-accent-2: #8dd8ff;
  --avlog-line: rgba(95, 168, 255, .42);
  --avlog-glow: rgba(95, 168, 255, .25);
}

/* Theme: 深緑 */
body.avlog-theme-green,
.avlog-theme-green {
  --avlog-bg: #06140e;
  --avlog-bg-2: #0c2418;
  --avlog-panel: rgba(7, 24, 15, .96);
  --avlog-panel-2: rgba(10, 39, 24, .92);
  --avlog-text: #eafff1;
  --avlog-muted: #9bc3a9;
  --avlog-accent: #42d978;
  --avlog-accent-2: #c5f56c;
  --avlog-line: rgba(66, 217, 120, .38);
  --avlog-glow: rgba(66, 217, 120, .22);
}

/* Theme: 蜜柑 */
body.avlog-theme-mikan,
.avlog-theme-mikan {
  --avlog-bg: #231207;
  --avlog-bg-2: #3a1d09;
  --avlog-panel: rgba(42, 22, 9, .95);
  --avlog-panel-2: rgba(70, 36, 12, .92);
  --avlog-text: #fff4e8;
  --avlog-muted: #e2b995;
  --avlog-accent: #ff8c22;
  --avlog-accent-2: #ffd166;
  --avlog-line: rgba(255, 140, 34, .45);
  --avlog-glow: rgba(255, 140, 34, .25);
}

/* Theme: サイバーパンク */
body.avlog-theme-cyberpunk,
.avlog-theme-cyberpunk {
  --avlog-bg: #07000f;
  --avlog-bg-2: #10001d;
  --avlog-panel: rgba(10, 2, 24, .96);
  --avlog-panel-2: rgba(25, 3, 44, .92);
  --avlog-text: #f4fdff;
  --avlog-muted: #9ee7f0;
  --avlog-accent: #00f5ff;
  --avlog-accent-2: #ff2bd6;
  --avlog-line: rgba(0, 245, 255, .62);
  --avlog-glow: rgba(0, 245, 255, .42);
}

.avlog-theme-cyberpunk .avlog-panel,
.avlog-theme-cyberpunk .avlog-card,
.avlog-theme-cyberpunk .avh-card,
.avlog-theme-cyberpunk .avh-panel,
.avlog-theme-cyberpunk .avdb-panel,
.avlog-theme-cyberpunk .avdb-card,
.avlog-theme-cyberpunk .n456-panel,
.avlog-theme-cyberpunk .n456-card {
  box-shadow: 0 0 7px rgba(0,245,255,.7), 0 0 18px rgba(255,43,214,.25), inset 0 0 18px rgba(0,245,255,.08);
}

.avlog-theme-cyberpunk .avlog-title,
.avlog-theme-cyberpunk .avh-title,
.avlog-theme-cyberpunk .avdb-title,
.avlog-theme-cyberpunk .n456-title {
  text-shadow: 0 0 7px #00f5ff, 0 0 16px rgba(255,43,214,.65);
}

/* Theme: インダストリアル */
body.avlog-theme-industrial,
.avlog-theme-industrial {
  --avlog-bg: #151515;
  --avlog-bg-2: #242424;
  --avlog-panel: rgba(31, 31, 31, .96);
  --avlog-panel-2: rgba(48, 48, 45, .93);
  --avlog-text: #f0eee7;
  --avlog-muted: #b0ada5;
  --avlog-accent: #ff9b24;
  --avlog-accent-2: #888f98;
  --avlog-line: rgba(255, 155, 36, .42);
  --avlog-glow: rgba(255, 155, 36, .18);
}

.avlog-theme-industrial .avlog-panel::before,
.avlog-theme-industrial .avh-panel::before,
.avlog-theme-industrial .avdb-panel::before,
.avlog-theme-industrial .n456-panel::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 4px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(170,170,170,.75) 0 12px, rgba(65,65,65,.75) 12px 24px);
  pointer-events: none;
}

/* Theme: ブルックリンスタイル */
body.avlog-theme-brooklyn,
.avlog-theme-brooklyn {
  --avlog-bg: #24150f;
  --avlog-bg-2: #362017;
  --avlog-panel: rgba(48, 30, 22, .94);
  --avlog-panel-2: rgba(69, 42, 29, .90);
  --avlog-text: #fff0df;
  --avlog-muted: #d2b79e;
  --avlog-accent: #d98252;
  --avlog-accent-2: #f2d1a1;
  --avlog-line: rgba(217, 130, 82, .42);
  --avlog-glow: rgba(217, 130, 82, .18);
}

.avlog-theme-brooklyn .avlog-ui,
.avlog-theme-brooklyn .avh-hud,
.avlog-theme-brooklyn .avlog-discovery-board,
.avlog-theme-brooklyn .n456-avlog-scope {
  background-image:
    linear-gradient(90deg, rgba(125,59,40,.18) 48%, rgba(60,28,19,.24) 50%, rgba(125,59,40,.18) 52%),
    linear-gradient(0deg, transparent 46%, rgba(60,28,19,.24) 50%, transparent 54%);
  background-size: 80px 40px;
}

/* Theme: スチームパンク */
body.avlog-theme-steampunk,
.avlog-theme-steampunk {
  --avlog-bg: #19110a;
  --avlog-bg-2: #2d2012;
  --avlog-panel: rgba(38, 26, 14, .96);
  --avlog-panel-2: rgba(62, 43, 23, .92);
  --avlog-text: #fff2d5;
  --avlog-muted: #c9aa78;
  --avlog-accent: #b8860b;
  --avlog-accent-2: #d2691e;
  --avlog-line: rgba(184, 134, 11, .50);
  --avlog-glow: rgba(184, 134, 11, .24);
}

.avlog-theme-steampunk .avlog-panel::after,
.avlog-theme-steampunk .avh-panel::after,
.avlog-theme-steampunk .avdb-panel::after,
.avlog-theme-steampunk .n456-panel::after {
  content: '⚙';
  position: absolute;
  right: 12px;
  top: 8px;
  opacity: .38;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}


/* Strong theme bridge for n04/n05/n06 legacy purple UI */
.n456-avlog-scope {
  background-color: var(--avlog-bg) !important;
  color: var(--avlog-text) !important;
}
.n456-avlog-scope .hs-fanza-wrap,
.n456-avlog-scope.hs-fanza-wrap,
.n456-avlog-scope.hs-avlog-vdb,
.n456-avlog-scope .hs-avlog-vdb,
.n456-avlog-scope.avh-hud,
.n456-avlog-scope .avh-hud {
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, var(--avlog-panel), var(--avlog-panel-2)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: var(--avlog-line) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24), 0 0 22px var(--avlog-glow), inset 0 0 34px rgba(255,255,255,.035) !important;
  color: var(--avlog-text) !important;
}
.n456-avlog-scope::before,
.n456-avlog-scope .hs-fanza-wrap::before,
.n456-avlog-scope.hs-avlog-vdb::before,
.n456-avlog-scope .hs-avlog-vdb::before,
.n456-avlog-scope .hs-fanza-card::before,
.n456-avlog-scope .hs-avlog-vdb-card::before {
  background: linear-gradient(90deg, transparent, var(--avlog-accent), transparent 50%, var(--avlog-accent-2), transparent) !important;
}
.n456-avlog-scope .hs-fanza-card,
.n456-avlog-scope .hs-fanza-page-card,
.n456-avlog-scope .hs-fanza-analysis,
.n456-avlog-scope .hs-fanza-page-filter,
.n456-avlog-scope .hs-fanza-related-sites,
.n456-avlog-scope .hs-fanza-actress-block,
.n456-avlog-scope .hs-fanza-favorite-card,
.n456-avlog-scope .hs-fanza-analysis-box,
.n456-avlog-scope .hs-avlog-vdb-card,
.n456-avlog-scope .hs-avlog-vdb-cell,
.n456-avlog-scope .hs-avlog-vdb-mini,
.n456-avlog-scope .hs-avlog-vdb-links {
  background: linear-gradient(180deg, var(--avlog-panel), var(--avlog-panel-2)) !important;
  border-color: var(--avlog-line) !important;
  color: var(--avlog-text) !important;
  box-shadow: 0 0 18px var(--avlog-glow), inset 0 0 22px rgba(255,255,255,.035) !important;
}
.n456-avlog-scope h1,
.n456-avlog-scope h2,
.n456-avlog-scope h3,
.n456-avlog-scope .hs-fanza-section-title,
.n456-avlog-scope .hs-fanza-analysis-title,
.n456-avlog-scope .hs-fanza-page-list-title,
.n456-avlog-scope .hs-avlog-vdb-section-title strong,
.n456-avlog-scope .hs-avlog-vdb h2,
.n456-avlog-scope .hs-avlog-vdb-card h3,
.n456-avlog-scope .hs-avlog-vdb-mini h3 {
  color: var(--avlog-text) !important;
  text-shadow: 0 0 12px var(--avlog-glow) !important;
}
.n456-avlog-scope .hs-fanza-meta,
.n456-avlog-scope .hs-fanza-note,
.n456-avlog-scope .hs-avlog-vdb-meta,
.n456-avlog-scope .hs-avlog-vdb-note,
.n456-avlog-scope .hs-avlog-vdb-lead,
.n456-avlog-scope .hs-avlog-vdb-kicker,
.n456-avlog-scope .hs-avlog-vdb-section-title span {
  color: var(--avlog-muted) !important;
}
.n456-avlog-scope .hs-fanza-button,
.n456-avlog-scope a.hs-fanza-button,
.n456-avlog-scope .hs-avlog-vdb-button,
.n456-avlog-scope a.hs-avlog-vdb-button,
.n456-avlog-scope .hs-avlog-vdb-mini-link,
.n456-avlog-scope a.hs-avlog-vdb-mini-link,
.n456-avlog-scope .hs-avlog-vdb-links a,
.n456-avlog-scope .avlog-button,
.n456-avlog-scope .avh-button,
.n456-avlog-scope .avdb-button,
.n456-avlog-scope .n456-button {
  background: linear-gradient(135deg, var(--avlog-accent), var(--avlog-accent-2)) !important;
  border: 1px solid var(--avlog-line) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--avlog-glow), inset 0 0 10px rgba(255,255,255,.12) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}
.n456-avlog-scope .hs-fanza-button:hover,
.n456-avlog-scope a.hs-fanza-button:hover,
.n456-avlog-scope .hs-avlog-vdb-button:hover,
.n456-avlog-scope a.hs-avlog-vdb-button:hover,
.n456-avlog-scope .hs-avlog-vdb-mini-link:hover,
.n456-avlog-scope a.hs-avlog-vdb-mini-link:hover,
.n456-avlog-scope .hs-avlog-vdb-links a:hover {
  filter: brightness(1.12) saturate(1.1) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 22px var(--avlog-glow), 0 0 10px var(--avlog-accent) !important;
}
.n456-avlog-scope .hs-fanza-reset,
.n456-avlog-scope .hs-fanza-mini-button,
.n456-avlog-scope .hs-fanza-mode-btn,
.n456-avlog-scope .hs-fanza-chip,
.n456-avlog-scope .hs-avlog-vdb-stat,
.n456-avlog-scope .hs-avlog-vdb-badge,
.n456-avlog-scope .hs-avlog-vdb-corner,
.n456-avlog-scope .hs-avlog-vdb-colhead,
.n456-avlog-scope .hs-avlog-vdb-rowhead {
  background: color-mix(in srgb, var(--avlog-accent) 15%, transparent) !important;
  color: var(--avlog-text) !important;
  border-color: var(--avlog-line) !important;
}
.n456-avlog-scope .hs-fanza-chip.is-active,
.n456-avlog-scope .hs-fanza-mode-btn.is-active,
.n456-avlog-scope .hs-fanza-favorite-button.is-saved,
.n456-avlog-scope .hs-fanza-actress-fav-btn.is-saved {
  background: linear-gradient(135deg, var(--avlog-accent), var(--avlog-accent-2)) !important;
  color: #fff !important;
  border-color: var(--avlog-line) !important;
}
.n456-avlog-scope .hs-avlog-vdb-review-plate {
  background: linear-gradient(180deg, var(--avlog-accent), var(--avlog-accent-2)) !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 0 16px var(--avlog-glow), 0 2px 8px rgba(0,0,0,.45) !important;
}
.n456-avlog-scope .hs-avlog-vdb-review-score span,
.n456-avlog-scope .hs-avlog-vdb-review-count span,
.n456-avlog-scope .hs-avlog-vdb-stat b {
  color: rgba(255,255,255,.82) !important;
}

.avlog-theme-brooklyn.n456-avlog-scope,
.avlog-theme-brooklyn .n456-avlog-scope {
  background-image:
    linear-gradient(90deg, rgba(125,59,40,.22) 48%, rgba(60,28,19,.32) 50%, rgba(125,59,40,.22) 52%),
    linear-gradient(0deg, transparent 46%, rgba(60,28,19,.32) 50%, transparent 54%),
    linear-gradient(180deg, var(--avlog-panel), var(--avlog-panel-2)) !important;
  background-size: 80px 40px, 80px 40px, auto !important;
}
.avlog-theme-cyberpunk.n456-avlog-scope .hs-fanza-button,
.avlog-theme-cyberpunk.n456-avlog-scope .hs-avlog-vdb-button,
.avlog-theme-cyberpunk .n456-avlog-scope .hs-fanza-button,
.avlog-theme-cyberpunk .n456-avlog-scope .hs-avlog-vdb-button {
  box-shadow: 0 0 9px var(--avlog-accent), 0 0 22px var(--avlog-glow) !important;
}