/* Cymruera-wide UNUN type and color theme. Layout and behavior intentionally unchanged. */
@font-face {
  font-family: "Nunito Variable";
  src: url("/static/fonts/nunito-latin-wght-normal-v3.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Variable";
  src: url("/static/fonts/nunito-latin-wght-italic-v3.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Resource Han Rounded CN";
  src: url("/static/fonts/resource-han-rounded-cn-cymruera-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --unun-orange: #f84331;
  --unun-orange-deep: #d71712;
  --unun-orange-action: #c21a13;
  --unun-orange-action-hover: #b00000;
  --unun-purple: #926dff;
  --unun-purple-deep: #7746e0;
  --unun-yellow: #f7ca00;
  --unun-green: #00a94d;
  --unun-cream: #faf4ea;
  --unun-cream-deep: #f4ead9;
  --unun-card: #ffffff;
  --unun-ink: #09101a;
  --unun-muted: #62666d;
  --unun-line: #e0dad1;
  --unun-accent-soft: #fde8e3;
  --unun-purple-soft: #eee9ff;
  --unun-danger-soft: #fff0ed;
  --unun-shadow: 0 6px 28px rgba(9, 16, 26, 0.07), 0 18px 55px rgba(53, 38, 23, 0.08);

  --font-body: "Nunito Variable", "Resource Han Rounded CN", "PingFang SC", ui-rounded, system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: var(--font-body);
  --color-bg: var(--unun-cream);
  --color-text: var(--unun-ink);
  --color-text-secondary: var(--unun-muted);
  --color-link: var(--unun-orange-action);
  --color-accent: var(--unun-orange-action);
  --color-border: var(--unun-line);
  --color-code-bg: var(--unun-cream-deep);
  --color-highlight-bg: var(--unun-yellow);
  --color-highlight-text: var(--unun-ink);
  --color-blockquote-border: var(--unun-orange-action);
  --color-blockquote-bg: transparent;

  /* Frozen-page aliases. */
  --bg-color: var(--unun-cream);
  --glass-bg: rgba(250, 244, 234, 0.88);
  --primary-color: var(--unun-orange-action);
  --comments-page-bg: var(--unun-cream);
}

html[data-theme="dark"] {
  --unun-cream: #000000;
  --unun-cream-deep: #0b1220;
  --unun-card: #101927;
  --unun-ink: #f7f8fb;
  --unun-muted: #adb6c4;
  --unun-line: #293447;
  --unun-accent-soft: #351a1c;
  --unun-purple-soft: #251e43;
  --unun-danger-soft: #351a1c;
  --unun-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), 0 24px 70px rgba(0, 0, 0, 0.32);

  --color-link: #ff7468;
  --color-accent: #ff7468;
  --color-blockquote-border: #ff7468;
  --glass-bg: rgba(16, 25, 39, 0.88);
  --primary-color: #ff7468;
  --comments-page-bg: #000000;
  color-scheme: dark;
}

html[data-theme="light"] { color-scheme: light; }

html,
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-variation-settings: "ROND" 100;
}

button,
input,
textarea,
select,
option {
  font-family: var(--font-body);
  font-variation-settings: "ROND" 100;
}

code,
kbd,
samp,
pre,
#timer,
.header-clock,
.record-date,
.back-date,
.post-meta-text,
.item-time,
.block-duration,
.axis-time-label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--unun-yellow);
  color: #09101a;
}

:focus-visible {
  outline: 3px solid var(--unun-purple);
  outline-offset: 3px;
}

/* Shared header and menu. */
.staggered-menu-header,
.staggered-menu-panel {
  background: var(--color-bg);
  color: var(--color-text);
}

.staggered-menu-panel,
.sm-panel-link,
.sm-panel-itemLabel,
.sm-panel-list[data-numbering] .sm-panel-item::after {
  font-family: var(--font-body);
  font-variation-settings: "ROND" 100;
  font-synthesis: none;
}
.staggered-menu-panel { --sm-accent: var(--unun-orange-action) !important; }
.sm-panel-link {
  color: var(--sm-item-color, var(--color-text));
  font-weight: 900;
  letter-spacing: -.045em;
}
.sm-panel-list[data-numbering] .sm-panel-item::after {
  color: var(--sm-item-color, var(--color-link));
  font-weight: 850;
}
.sm-panel-item:nth-child(4n + 1) { --sm-item-color: var(--color-link); }
.sm-panel-item:nth-child(4n + 2) { --sm-item-color: var(--unun-purple-deep); }
.sm-panel-item:nth-child(4n + 3) { --sm-item-color: var(--color-text); }
.sm-panel-item:nth-child(4n) { --sm-item-color: #765f00; }
html[data-theme="dark"] .sm-panel-item:nth-child(4n + 2) { --sm-item-color: #ad91ff; }
html[data-theme="dark"] .sm-panel-item:nth-child(4n) { --sm-item-color: var(--unun-yellow); }
.sm-panel-link:hover {
  color: var(--sm-item-color, var(--color-link));
  filter: brightness(.82);
  text-shadow: 0 8px 24px color-mix(in srgb, var(--sm-item-color, var(--unun-purple)) 22%, transparent);
}
html[data-theme="dark"] .sm-panel-link:hover { filter: brightness(1.16); }
.sm-prelayer:first-child { background: var(--unun-purple-soft) !important; }
.sm-prelayer:last-child { background: var(--unun-cream-deep) !important; }
html[data-theme="dark"] .sm-prelayer:first-child { background: #251e43 !important; }
html[data-theme="dark"] .sm-prelayer:last-child { background: #101927 !important; }

.sm-toggle:hover { background: var(--unun-purple-soft); }
html[data-theme="dark"] .sm-toggle:hover { background: #251e43; }
.glitch-text::before,
html[data-theme="dark"] .glitch-text::before { color: var(--unun-purple); }
.glitch-text::after,
html[data-theme="dark"] .glitch-text::after { color: var(--unun-yellow); }

/* Shared cards, tags, and prose. */
.bear-tag {
  background: var(--unun-purple-soft);
  color: var(--color-text);
}
.bear-tag:hover { background: var(--unun-accent-soft); }
html[data-theme="dark"] .bear-tag { background: var(--unun-purple-soft); color: var(--color-text); }
html[data-theme="dark"] .bear-tag:hover { background: var(--unun-accent-soft); }

.posts-grid > .post-card-link:nth-child(3n + 1) {
  --card-color: var(--unun-orange);
  --card-color-ink: var(--unun-orange-action);
}
.posts-grid > .post-card-link:nth-child(3n + 2) {
  --card-color: var(--unun-purple);
  --card-color-ink: var(--unun-purple-deep);
}
.posts-grid > .post-card-link:nth-child(3n) {
  --card-color: var(--unun-yellow);
  --card-color-ink: #765f00;
}
html[data-theme="dark"] .posts-grid > .post-card-link:nth-child(3n + 1) { --card-color-ink: #ff8b81; }
html[data-theme="dark"] .posts-grid > .post-card-link:nth-child(3n + 2) { --card-color-ink: #b9a2ff; }
html[data-theme="dark"] .posts-grid > .post-card-link:nth-child(3n) { --card-color-ink: var(--unun-yellow); }
.post-card {
  position: relative;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--unun-orange)) 25%, var(--color-border));
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    var(--unun-card) 0%,
    var(--unun-card) 70%,
    color-mix(in srgb, var(--card-color, var(--unun-orange)) 13%, var(--unun-card)) 100%
  );
  box-shadow: var(--unun-shadow);
}
.post-card::before {
  position: absolute;
  z-index: -1;
  inset: 16px auto 16px 0;
  width: 7px;
  border-radius: 0 999px 999px 0;
  background: var(--card-color, var(--unun-orange));
  content: "";
}
.post-card::after {
  position: absolute;
  z-index: -1;
  top: 18px;
  right: 20px;
  width: 13px;
  height: 13px;
  border: 4px solid color-mix(in srgb, var(--card-color, var(--unun-orange)) 78%, transparent);
  border-radius: 50%;
  content: "";
}
.post-card-content { z-index: 1; }
html[data-theme="dark"] .post-card {
  background: linear-gradient(
    135deg,
    var(--unun-card) 0%,
    var(--unun-card) 70%,
    color-mix(in srgb, var(--card-color, var(--unun-orange)) 12%, var(--unun-card)) 100%
  );
  box-shadow: var(--unun-shadow);
}
.post-card:hover,
html[data-theme="dark"] .post-card:hover {
  border-color: color-mix(in srgb, var(--card-color, var(--unun-orange)) 55%, var(--color-border));
  box-shadow: 0 16px 42px color-mix(in srgb, var(--card-color, var(--unun-purple)) 18%, transparent);
}
.post-card-title,
html[data-theme="dark"] .post-card-title {
  color: var(--color-text);
  font-weight: 850;
}
.post-card-date,
html[data-theme="dark"] .post-card-date {
  color: var(--card-color-ink, var(--color-link));
  font-weight: 800;
}
.post-card-desc,
html[data-theme="dark"] .post-card-desc { color: var(--color-text-secondary); }
.post-card-tag,
html[data-theme="dark"] .post-card-tag {
  border: 1px solid color-mix(in srgb, var(--card-color, var(--unun-purple)) 24%, transparent);
  background: color-mix(in srgb, var(--card-color, var(--unun-purple)) 13%, var(--unun-card));
  color: var(--card-color-ink, var(--color-text));
  font-weight: 750;
}
.post-card-pinned {
  display: inline-flex;
  margin-bottom: .55rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: var(--unun-orange-action);
  color: #fff;
  font-weight: 850;
}
.code-copy-btn.copied { color: var(--unun-green); }

/* Home: same scene and typewriter behavior, new palette. */
html.home-page[data-theme="light"] body,
html.home-page[data-theme="light"] #jellyfish-bg { background: var(--unun-cream); }
html.home-page[data-theme="dark"] body,
html.home-page[data-theme="dark"] #jellyfish-bg { background: #000000; }
#typewriter { font-family: var(--font-heading); font-weight: 800; }
html[data-theme="light"] #typewriter { color: var(--unun-ink); }
html[data-theme="dark"] #typewriter { color: #f7f8fb; }
#typewriter::after { color: var(--unun-orange); }
html[data-theme="light"] .home-footer,
html[data-theme="dark"] .home-footer { color: var(--color-text-secondary); }
.home-footer a:hover { color: var(--color-link); }

/* About. */
.about-content { font-family: var(--font-heading); }
.char-encrypted { color: var(--color-accent); }

/* Auth menu and profile modal. */
.auth-login:hover {
  background: var(--unun-orange-action);
  border-color: var(--unun-orange-action);
  color: #ffffff;
}
.auth-avatar-badge,
.auth-menu-notif-count { background: var(--unun-orange); }
.auth-menu { background: var(--unun-card); border-color: var(--unun-line); box-shadow: var(--unun-shadow); }
.notif-nickname,
.notif-reply-to,
html[data-theme="dark"] .notif-nickname,
html[data-theme="dark"] .notif-reply-to { color: var(--unun-purple-deep); }
html[data-theme="dark"] .notif-nickname,
html[data-theme="dark"] .notif-reply-to { color: #ad91ff; }
.notif-item.unread { background: var(--unun-accent-soft); }
html[data-theme="dark"] .notif-item.unread { background: var(--unun-accent-soft); }
.auth-menu-mark-read,
.auth-menu-item-danger:hover { color: var(--color-link); }
.auth-menu-mark-read:hover { background: var(--unun-accent-soft); }
.profile-modal,
html[data-theme="dark"] .profile-modal { background: var(--unun-card); color: var(--color-text); }
.profile-modal-title,
.profile-modal-label,
html[data-theme="dark"] .profile-modal-title,
html[data-theme="dark"] .profile-modal-label { color: var(--color-text); }
.profile-modal-hint,
html[data-theme="dark"] .profile-modal-hint { color: var(--color-text-secondary); }
.profile-modal-avatar,
html[data-theme="dark"] .profile-modal-avatar { background: var(--unun-cream-deep); }
.profile-modal-input,
html[data-theme="dark"] .profile-modal-input {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
.profile-modal-input:focus,
html[data-theme="dark"] .profile-modal-input:focus {
  border-color: var(--unun-purple);
  box-shadow: 0 0 0 2px rgba(146, 109, 255, 0.18);
}
.profile-modal-label span { color: var(--unun-orange-action) !important; }
.profile-modal-btn-confirm { background: var(--unun-orange-action); }
.profile-modal-btn-confirm:hover:not(:disabled) { background: var(--unun-orange-action-hover); }
.profile-modal-btn-cancel,
html[data-theme="dark"] .profile-modal-btn-cancel { border-color: var(--color-border); color: var(--color-text); }
.profile-modal-btn-cancel:hover:not(:disabled),
html[data-theme="dark"] .profile-modal-btn-cancel:hover:not(:disabled) { background: var(--unun-purple-soft); }

/* Notes. */
.pinned-label,
.pinned-arrow,
.pinned-back,
.private-lock-icon,
.note-badge,
a.note-time,
html[data-theme="dark"] .pinned-label,
html[data-theme="dark"] .pinned-arrow,
html[data-theme="dark"] .pinned-back,
html[data-theme="dark"] .private-lock-icon,
html[data-theme="dark"] .note-badge { color: var(--color-text-secondary) !important; }
.pinned-section {
  border-bottom-color: transparent;
  background: linear-gradient(90deg, var(--unun-orange), var(--unun-purple), var(--unun-yellow)) left bottom / 100% 2px no-repeat;
}
.pinned-label,
html[data-theme="dark"] .pinned-label { color: var(--color-link) !important; }
.pinned-arrow,
html[data-theme="dark"] .pinned-arrow { color: var(--unun-purple-deep) !important; }
html[data-theme="dark"] .pinned-arrow { color: #ad91ff !important; }
.pinned-card:nth-child(3n + 1) {
  --note-accent: var(--unun-orange);
  --note-accent-ink: var(--unun-orange-action);
}
.pinned-card:nth-child(3n + 2) {
  --note-accent: var(--unun-purple);
  --note-accent-ink: var(--unun-purple-deep);
}
.pinned-card:nth-child(3n) {
  --note-accent: var(--unun-yellow);
  --note-accent-ink: #765f00;
}
.pinned-card,
html[data-theme="dark"] .pinned-card {
  border: 1px solid color-mix(in srgb, var(--note-accent, var(--unun-purple)) 28%, var(--color-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--note-accent, var(--unun-purple)) 11%, var(--unun-card));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--note-accent, var(--unun-purple)) 9%, transparent);
}
.pinned-card:hover,
html[data-theme="dark"] .pinned-card:hover {
  background: color-mix(in srgb, var(--note-accent, var(--unun-purple)) 18%, var(--unun-card));
}
.year-title {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--unun-purple-deep);
  font-weight: 900;
}
.year-title::after {
  width: 48px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--unun-orange) 0 30%, var(--unun-purple) 30% 66%, var(--unun-yellow) 66% 100%);
  content: "";
}
html[data-theme="dark"] .year-title { color: #ad91ff; }
.note-timeline-item:nth-child(3n + 1) {
  --note-accent: var(--unun-orange);
  --note-accent-ink: var(--unun-orange-action);
}
.note-timeline-item:nth-child(3n + 2) {
  --note-accent: var(--unun-purple);
  --note-accent-ink: var(--unun-purple-deep);
}
.note-timeline-item:nth-child(3n) {
  --note-accent: var(--unun-yellow);
  --note-accent-ink: #765f00;
}
html[data-theme="dark"] .note-timeline-item:nth-child(3n + 1) { --note-accent-ink: #ff8b81; }
html[data-theme="dark"] .note-timeline-item:nth-child(3n + 2) { --note-accent-ink: #b9a2ff; }
html[data-theme="dark"] .note-timeline-item:nth-child(3n) { --note-accent-ink: var(--unun-yellow); }
.note-timeline-day {
  color: var(--note-accent-ink, var(--color-text));
  font-weight: 850;
}
.note-timeline-month,
html[data-theme="dark"] .note-timeline-month {
  color: var(--note-accent-ink, var(--color-text-secondary)) !important;
  font-weight: 750;
}
.note-timeline-text.no-image,
html[data-theme="dark"] .note-timeline-text.no-image {
  border: 1px solid color-mix(in srgb, var(--note-accent, var(--unun-purple)) 24%, var(--color-border));
  border-left: 6px solid var(--note-accent, var(--unun-purple));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--unun-card),
    color-mix(in srgb, var(--note-accent, var(--unun-purple)) 10%, var(--unun-card))
  );
  box-shadow: 0 8px 22px color-mix(in srgb, var(--note-accent, var(--unun-purple)) 8%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.note-timeline-text.with-image {
  border-left: 4px solid var(--note-accent, var(--unun-purple));
  padding-left: .75rem;
}
.note-mosaic {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-accent, var(--unun-purple)) 32%, transparent);
}
.note-timeline-item:hover { opacity: 1; }
.note-timeline-item:hover .note-timeline-text.no-image {
  transform: translateY(-2px);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--note-accent, var(--unun-purple)) 14%, transparent);
}
.note-author,
html[data-theme="dark"] .note-author { color: var(--unun-purple-deep); }
html[data-theme="dark"] .note-author { color: #ad91ff; }
.note-avatar .avatar-skeleton { background: linear-gradient(90deg, var(--unun-cream-deep) 25%, var(--unun-purple-soft) 50%, var(--unun-cream-deep) 75%); background-size: 200% 100%; }
html[data-theme="dark"] .note-avatar .avatar-skeleton { background: linear-gradient(90deg, #101927 25%, #251e43 50%, #101927 75%); background-size: 200% 100%; }

/* Comments and likes. */
.comments-box,
[data-theme="dark"] .comments-box { background: var(--unun-card); }
.action-trigger,
[data-theme="dark"] .action-trigger,
.comment-avatar-placeholder,
[data-theme="dark"] .comment-avatar-placeholder { background: var(--unun-purple-soft); }
.action-trigger span,
[data-theme="dark"] .action-trigger span,
html:not([data-theme="dark"]) .action-trigger span { color: var(--unun-purple-deep); }
html[data-theme="dark"] .action-trigger span { color: #ad91ff; }
.action-trigger:hover,
[data-theme="dark"] .action-trigger:hover { background: var(--unun-accent-soft); }
.action-popup { background: var(--unun-purple-deep); }
.action-popup button:hover { background: #6540bd; }
.action-popup-divider { background: rgba(255, 255, 255, 0.28); }
.action-popup button.liked svg { color: var(--unun-yellow); fill: var(--unun-yellow); }
.box-separator,
.comment-separator,
[data-theme="dark"] .box-separator,
[data-theme="dark"] .comment-separator { border-color: var(--color-border); }
.likes-row > svg,
.comment-icon-col svg { color: var(--color-text-secondary); stroke: var(--color-text-secondary); }
.comment-nickname,
.comment-text .reply-name,
.comment-reply-indicator .reply-target,
[data-theme="dark"] .comment-nickname,
[data-theme="dark"] .comment-text .reply-name,
[data-theme="dark"] .comment-reply-indicator .reply-target { color: var(--unun-purple-deep); }
html[data-theme="dark"] .comment-nickname,
html[data-theme="dark"] .comment-text .reply-name,
html[data-theme="dark"] .comment-reply-indicator .reply-target { color: #ad91ff; }
.comment-badge { background: var(--unun-orange-action); }
.comment-meta,
.comment-delete-btn,
.comment-text .reply-prefix,
.comment-reply-indicator,
.comment-reply-indicator button,
.comment-input-form textarea::placeholder,
.comment-cancel-btn,
.comment-blocked { color: var(--color-text-secondary); }
.comment-text,
[data-theme="dark"] .comment-text { color: var(--color-text); }
.comment-input-form,
[data-theme="dark"] .comment-input-form { background: var(--color-bg); border-color: var(--unun-orange-action); }
.comment-input-form textarea,
[data-theme="dark"] .comment-input-form textarea { color: var(--color-text); }
.comment-send-btn { background: var(--unun-orange-action); }
.comment-send-btn:hover { background: var(--unun-orange-action-hover); }
.comment-login-prompt:hover,
.profile-nickname-input:focus { border-color: var(--unun-purple); color: var(--unun-purple-deep); }
.comments-invalid { background: var(--unun-card); }
html:not([data-theme="dark"]) .comment-login-prompt,
html[data-theme="dark"] .comment-login-prompt { color: var(--color-text-secondary); }

/* Admin and subscriptions. */
.auth-gate-spinner,
.admin-loading .mini-spinner,
.sub-loading-spinner,
html[data-theme="dark"] .sub-loading-spinner { border-top-color: var(--unun-purple); }
.auth-gate-apple-btn,
html[data-theme="dark"] .auth-gate-apple-btn {
  background: var(--unun-orange-action);
  color: #ffffff;
}
.auth-gate-apple-btn svg path,
html[data-theme="dark"] .auth-gate-apple-btn svg path { fill: currentColor; }
.admin-card,
.sub-card {
  background: linear-gradient(145deg, var(--unun-card), var(--unun-cream-deep));
  border-color: var(--color-border);
  box-shadow: var(--unun-shadow);
}
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .sub-card {
  background: linear-gradient(145deg, #101927, #0b1220);
  border-color: var(--color-border);
  box-shadow: var(--unun-shadow);
}
.admin-card:hover,
.sub-card:hover,
html[data-theme="dark"] .admin-card:hover,
html[data-theme="dark"] .sub-card:hover { box-shadow: 0 8px 32px rgba(119, 70, 224, 0.2), 0 0 0 1px var(--unun-purple); }
.admin-card::after,
.sub-card::after { background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(146, 109, 255, calc(var(--glow-intensity) * 0.72)) 0%, rgba(248, 67, 49, calc(var(--glow-intensity) * 0.3)) 35%, transparent 62%); }
.admin-card__number,
.sub-card__amount-yen,
.sub-card__amount-num,
.sub-card__summary-yen,
.sub-card__summary-num,
.sub-card__countdown.urgent { color: var(--color-link); }
.admin-tab-bar { background: var(--color-bg); }
.admin-tab.active { color: var(--color-link); border-bottom-color: var(--color-link); }
.stat-card,
.admin-list-item { background: var(--unun-card); }
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .admin-list-item { background: var(--unun-card); }
.admin-filter-label,
.admin-filter-check,
.admin-filter-count,
.stat-label,
.item-id,
.item-time,
.item-time-right,
.post-desc,
.post-meta-text,
.sub-card__amount-unit,
.sub-card__summary-unit,
.sub-card__countdown,
.sub-card__billing-date,
.sub-form-group label { color: var(--color-text-secondary); }
.progress-bar__fill--full { background: linear-gradient(90deg, var(--unun-purple-deep), var(--unun-purple)); }
.progress-bar__fill--normal { background: linear-gradient(90deg, var(--unun-orange), var(--unun-purple)); }
.progress-bar__fill--warning { background: linear-gradient(90deg, var(--unun-orange-deep), var(--unun-orange)); }
.sub-fab,
.sub-btn-fetch-logo,
.sub-btn-save,
.btn-action.primary,
.vis-btn.active,
.modal-btn.primary { background: var(--unun-orange-action); color: #ffffff; }
.sub-fab { box-shadow: 0 4px 18px rgba(248, 67, 49, 0.3); }
.sub-icon-option.selected,
.vis-btn:hover,
.vis-custom-input:focus { border-color: var(--unun-purple); }
.sub-modal-content,
html[data-theme="dark"] .sub-modal-content,
.admin-modal-content { background: var(--unun-card); color: var(--color-text); }
.sub-form-group input,
.sub-form-group select,
.sub-logo-url-input,
.sub-split-select,
.edit-input,
.edit-select,
.custom-tag-input {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Belle and Tuzki retain their gallery behavior and imagery. */
html[data-theme="light"] { --bg-color: #faf4ea; --glass-bg: rgba(250, 244, 234, 0.88); --primary-color: #c21a13; }
html[data-theme="dark"] { --bg-color: #000000; --glass-bg: rgba(16, 25, 39, 0.88); --primary-color: #ff7468; }
html body { background-color: var(--bg-color, var(--color-bg)); color: var(--color-text); }
.search-input,
.filter-chip { background: var(--unun-card); border-color: var(--color-border); color: var(--color-text); }
.search-input:focus { background: var(--unun-card); border-color: var(--unun-purple); box-shadow: 0 0 0 2px rgba(146, 109, 255, 0.18); }
.filter-chip.active { background: var(--unun-purple-deep); border-color: var(--unun-purple-deep); color: #ffffff; }
.view-nav { background: var(--bg-color); }
.view-nav-item.active { color: var(--color-link); }
.view-nav-item:not(.active),
html[data-theme="dark"] .view-nav-item:not(.active) { color: var(--color-text-secondary); }
.view-nav-item:not(.active):hover,
html[data-theme="dark"] .view-nav-item:not(.active):hover { color: var(--color-text); }
.view-nav-sep,
html[data-theme="dark"] .view-nav-sep { color: var(--color-border); }
.card-front img { background: var(--unun-cream-deep); }
.rating { color: var(--unun-yellow); }
.gate-mini.on .gate-mini-icon { color: var(--unun-green); }
.gate-mini.on .gate-mini-toggle { background: var(--unun-green); }

/* Shortcut shell. */
#timer { color: var(--unun-orange); }
.tips { color: var(--color-text-secondary); }

/* Legacy canvas game shell; game artwork itself is untouched. */
html[lang="en"] body { font-family: var(--font-body); }
html[data-theme="dark"] body > #container.container { background: #000000; }
html[lang="en"] .load-indicator { color: var(--unun-yellow); }
html[lang="en"] noscript { background: #000000; color: #f7f8fb; }