/* Final UI layer: shared density, radius, oshi-color accents, and mobile polish. */

:root {
	--hm-radius-outer: var(--ui-radius, 6px);
	--hm-radius-inner: max(3px, calc(var(--hm-radius-outer) - 2px));
	--hm-tap-min: 44px;
	--hm-line: color-mix(in srgb, var(--text-main, #102332) 12%, transparent);
	--hm-line-strong: color-mix(in srgb, var(--text-main, #102332) 20%, transparent);
	--hm-surface: color-mix(in srgb, var(--bg-card, #ffffff) 96%, var(--bg-dark, #ffffff) 4%);
	--hm-surface-soft: color-mix(in srgb, var(--bg-card-hover, #ffffff) 88%, var(--bg-dark, #eef3f8) 12%);
	--hm-copy: var(--text-main, #102332);
	--hm-copy-muted: var(--text-dim, #435864);
	--hm-accent: var(--oshi-color, var(--oshi-primary, var(--accent-color, var(--primary, #ff6b61))));
}

body * {
	box-shadow: none !important;
	text-shadow: none !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid color-mix(in srgb, var(--hm-accent) 72%, #ffffff 28%);
	outline-offset: 2px;
}

html {
	scroll-padding-top: 12px;
}

.header-container {
	position: static !important;
	top: auto !important;
	padding: 0 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.header-top-row {
	padding-top: 10px !important;
	padding-bottom: 6px !important;
}

.scroll-nav {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	gap: 8px;
}

.header-container .pill {
	min-height: 32px !important;
	padding: 5px 11px !important;
	font-size: 0.82rem !important;
}

:where(
	.card,
	.btn,
	.chip,
	.badge,
	.tag,
	.panel,
	[class$="-card"],
	[class*="-card "],
	[class$="-panel"],
	[class*="-panel "],
	[class$="-box"],
	[class*="-box "],
	.panel,
	.section-card,
	.dashboard-desc,
	.home-command,
	.holonavi-cta,
	.history-header,
	.history-section,
	.history-fan-card,
	.history-live-card,
	.history-chat-card,
	.history-activity-card,
	.history-next-panel,
	.search-panel,
	.ratio-card,
	.ranking-card-detailed,
	.simple-ranking-card,
	.s-card,
	.stats-hub-hero,
	.stats-hub-hero-card,
	.member-card,
	.members-section,
	.member-card__group,
	.member-music-section,
	.music-ranking-list-panel,
	.music-ranking-filter,
	.timeline-section,
	.upcoming-event-box,
	.upcoming-event-item,
	.aurora-card,
	.aurora-side-list,
	.aurora-member-card,
	.aurora-daily-panel,
	.aurora-priority-panel,
	.aurora-daybook-panel,
	.aurora-shortcut,
	.oshi-maker-block,
	.oshi-maker-page .panel.section-card,
	.od-stage-card,
	.od-side-card,
	.od-vote-card,
	.od-community-card,
	.mobile-bottom-nav,
	.vtuber-hero,
	.vtuber-section,
	.vtuber-stat,
	.vtuber-agency-card,
	.vtuber-talent-card,
	.vtuber-video-card
) {
	border-radius: var(--hm-radius-outer) !important;
	box-shadow: none !important;
}

:where(
	.stream-card,
	.ranking-card-detailed,
	.simple-ranking-card,
	.ratio-card,
	.s-card,
	.timeline-section,
	.search-panel,
	.history-section,
	.member-card,
	.member-music-section,
	.music-ranking-list-panel,
	.aurora-card,
	.aurora-shortcut,
	.vtuber-video-card
) {
	border-color: var(--hm-line) !important;
}

:where(
	.stream-thumb,
	.rank-thumb,
	.rank-thumb-img,
	.rc-thumb,
	.music-thumb,
	.history-song-thumb,
	.aurora-home-feature-media,
	.aurora-member-card img,
	.vtuber-video-thumb,
	.oshi-maker-test-thumb,
	.od-pick-thumb,
	.od-result-avatar
) {
	border-radius: var(--hm-radius-inner) !important;
}

:where(
	input,
	select,
	textarea,
	.button,
	button,
	[class$="-btn"],
	[class*="-btn "],
	[class$="-chip"],
	[class*="-chip "],
	[class$="-pill"],
	[class*="-pill "],
	.pill,
	.home-command__link,
	.holonavi-cta__chip,
	.holonavi-cta__link,
	.members-discovery-btn,
	.history-social-btn,
	.history-ranking-link,
	.music-ranking-filter-link,
	.aurora-home-pill,
	.aurora-card-action,
	.aurora-card-badge,
	.od-link-chip,
	.od-tab-btn,
	.od-answer-btn,
	.od-stage-btn,
	.mb-nav-item,
	.mm-link,
	.mm-note-card,
	.oshi-maker-hero-mode-btn,
	.oshi-maker-hero-chip,
	.oshi-maker-test-btn,
	.oshi-maker-test-modal-close,
	.vtuber-pill,
	.vtuber-action
) {
	min-height: var(--hm-tap-min);
	border-radius: var(--hm-radius-outer) !important;
	box-shadow: none !important;
}

:where(.share-x-btn, .theme-toggle-btn, .palette-toggle-btn, .hamburger-btn, .search-mobile-btn) {
	border-radius: var(--hm-radius-outer) !important;
	box-shadow: none !important;
}

:where(.pill.active, .home-command__link.is-active, .od-tab-btn.is-active, .vtuber-pill.is-active, .mb-nav-item.active, .mm-link.active) {
	background: color-mix(in srgb, var(--hm-accent) 18%, var(--hm-surface) 82%) !important;
	border-color: color-mix(in srgb, var(--hm-accent) 32%, transparent) !important;
	color: var(--hm-copy) !important;
}

:where(.history-social-btn.is-primary, .holonavi-cta__link.is-primary, .members-discovery-btn.is-primary, .od-link-chip.is-primary, .od-stage-btn.is-primary) {
	background: color-mix(in srgb, var(--hm-accent) 76%, #0c161a 24%) !important;
	border-color: color-mix(in srgb, var(--hm-accent) 80%, #0c161a 20%) !important;
	color: #ffffff !important;
}

:where(.history-social-btn.is-primary, .holonavi-cta__link.is-primary, .members-discovery-btn.is-primary, .od-link-chip.is-primary, .od-stage-btn.is-primary) :where(i, span, strong) {
	color: inherit !important;
}

:where(
	.history-header,
	.member-card,
	.upcoming-event-item,
	.history-next-member-chip,
	.aurora-member-card,
	.oshi-maker-block,
	.od-result-card,
	.vtuber-talent-card
) {
	border-left: 4px solid color-mix(in srgb, var(--hm-accent) 72%, transparent) !important;
}

:where(.upcoming-event-item, .member-card, .history-next-member-chip):hover {
	border-left-color: var(--hm-accent) !important;
	background: color-mix(in srgb, var(--hm-accent) 7%, var(--hm-surface) 93%) !important;
}

.site-footer {
	box-shadow: none !important;
}

.mobile-bottom-nav {
	background: color-mix(in srgb, var(--hm-surface) 88%, var(--bg-dark, #0c161a) 12%) !important;
	border: 1px solid var(--hm-line) !important;
	border-radius: var(--hm-radius-outer) !important;
	box-shadow: none !important;
}

.mb-nav-item {
	border-radius: var(--hm-radius-inner) !important;
	color: var(--hm-copy-muted) !important;
}

.mb-nav-item i,
.mb-nav-item span {
	color: inherit !important;
}

.mb-nav-item.active i {
	color: var(--hm-accent) !important;
}

.vtuber-hero {
	gap: 14px;
	padding: clamp(18px, 4vw, 30px) !important;
}

.vtuber-hero h1 {
	font-size: clamp(1.8rem, 5vw, 3rem) !important;
}

.vtuber-stat-grid {
	gap: 10px !important;
}

.vtuber-stat {
	padding: 12px !important;
	background: var(--hm-surface-soft) !important;
}

.vtuber-stat strong {
	font-size: clamp(1.45rem, 3vw, 2rem) !important;
	letter-spacing: -0.04em;
}

.vtuber-stat span {
	margin-top: 6px !important;
	font-size: 0.84rem !important;
}

.oshi-maker-test-page::before,
.oshi-maker-test-page::after,
.oshi-maker-page .oshi-maker-hero::before,
.oshi-maker-page .oshi-maker-hero::after {
	display: none !important;
}

.oshi-maker-page .oshi-maker-hero {
	background: var(--hm-surface) !important;
	border-color: var(--hm-line) !important;
}

.oshi-maker-hero-title,
.oshi-maker-step-title {
	color: var(--hm-copy) !important;
	text-shadow: none !important;
}

.oshi-maker-hero-title span,
.oshi-maker-hero-sub,
.oshi-maker-step-copy {
	color: var(--hm-copy-muted) !important;
}

.oshi-maker-test-modal {
	background: color-mix(in srgb, var(--bg-dark, #0c161a) 72%, transparent) !important;
}

.oshi-maker-test-modal-panel {
	border-radius: var(--hm-radius-outer) !important;
	background: var(--hm-surface) !important;
	box-shadow: none !important;
}

.od-vote-stage-footer {
	border-radius: var(--hm-radius-outer) !important;
	box-shadow: none !important;
}

html[data-theme="light_apple"],
html[data-theme="light"] {
	--hm-line: rgba(12, 22, 26, 0.12);
	--hm-line-strong: rgba(12, 22, 26, 0.2);
	--hm-surface: #ffffff;
	--hm-surface-soft: #f7fafc;
	--hm-copy: #0c161a;
	--hm-copy-muted: #435864;
}

html:not([data-theme]),
html[data-theme="dark"],
html[data-theme="default"] {
	--hm-line: rgba(255, 255, 255, 0.12);
	--hm-line-strong: rgba(255, 255, 255, 0.2);
	--hm-surface: color-mix(in srgb, var(--bg-card, #0a0a0a) 92%, #ffffff 8%);
	--hm-surface-soft: color-mix(in srgb, var(--bg-card-hover, #111111) 88%, #ffffff 12%);
	--hm-copy: var(--text-main, #f3f4f6);
	--hm-copy-muted: var(--text-dim, #9ca3af);
}

html[data-theme="light_apple"] :where(.oshi-maker-hero-mode-btn, .oshi-maker-hero-chip),
html[data-theme="light"] :where(.oshi-maker-hero-mode-btn, .oshi-maker-hero-chip) {
	background: #f7fafc !important;
	border: 1px solid var(--hm-line) !important;
	color: #102433 !important;
}

@media (max-width: 768px) {
	.header-top-row {
		padding-top: 8px !important;
		padding-bottom: 6px !important;
	}

	.brand-lockup {
		gap: 6px !important;
		padding: 2px 0 !important;
	}

	.brand-needle {
		width: 24px !important;
		height: 24px !important;
	}

	.brand-wordmark {
		width: min(148px, 40vw) !important;
		height: auto !important;
	}

	.header-container .scroll-nav {
		display: none !important;
	}

	.main-container {
		margin-top: 12px !important;
	}

	:where(.panel, .section-card, .dashboard-desc, .history-header, .history-section, .vtuber-hero, .vtuber-section) {
		padding: 16px !important;
	}

	:where(.pill, .home-command__link, .history-social-btn, .members-discovery-btn, .od-link-chip, .vtuber-pill) {
		min-height: 42px;
		padding: 9px 12px;
	}

	.vtuber-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.vtuber-stat strong {
		font-size: 1.35rem !important;
	}
}

@media (max-width: 480px) {
	.vtuber-stat-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.vtuber-stat {
		padding: 10px !important;
	}

	.vtuber-stat span {
		font-size: 0.78rem !important;
	}
}