/* ═══════════════════════════════════════════════════════════════════════════════
   Nyano Portal Theme v3 — Liquid Azure
   ═══════════════════════════════════════════════════════════════════════════════
   Features:
   - Liquid metal buttons with shimmer animation
   - Glassmorphism with subtle borders
   - Soft glow effects
   - Feature card visibility fix (white + themed colors)
   - Scoped by body[data-mode="public"|"portal"] to avoid affecting Admin
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   § Root Variables & Fallbacks
   ───────────────────────────────────────────────────────────────────────────────── */
:root {
  --nyano-brand: var(--primary, var(--brand, #0ea5e9));

  /* Primary Palette (Sky/Cyan) */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;

  /* Accent Palette */
  --accent-pink: #fdf2f8;
  --accent-purple: #f5f3ff;
  --accent-violet: #a78bfa;

  /* Text */

  /* Legacy variables */
  --nyano-accent: var(--primary, var(--nyano-brand));
  --nyano-accent2: var(--secondary, var(--primary-400));
  --nyano-accent3: var(--accent, var(--primary-300));
  --nyano-ink: var(--text-primary, #0c4a6e);
  --nyano-muted: var(--text-muted, #64748b);

  /* Component gradients */
  --gradient-step: var(--stepper-active-bg, linear-gradient(145deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%));
  --shadow-step: var(--stepper-active-shadow, 0 8px 24px rgba(14, 165, 233, 0.35));
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Global Surface — Portal/Public
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"],
body[data-mode="portal"] {
  background: var(--app-bg-gradient, var(--app-bg, #f0f9ff)) !important;
  background-attachment: fixed;
  color: var(--text-primary, #0c4a6e);
  font-family: var(--font-sans, 'Outfit', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Atmospheric glow layers */
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  body[data-mode="public"],
  body[data-mode="portal"] {
    background:
      radial-gradient(ellipse 900px 600px at 10% 5%, color-mix(in srgb, var(--primary, #0ea5e9) 22%, transparent), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 15%, color-mix(in srgb, var(--accent-purple, #a78bfa) 14%, transparent), transparent 55%),
      radial-gradient(ellipse 800px 600px at 70% 110%, color-mix(in srgb, var(--accent-pink, #f472b6) 10%, transparent), transparent 60%),
      var(--app-bg-gradient, var(--app-bg, #f0f9ff)) !important;
    background-attachment: fixed;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Header — Glassmorphism
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .nyano-header,
body[data-mode="portal"] .nyano-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: var(--header-blur, var(--glass-blur, saturate(180%) blur(20px)));
  -webkit-backdrop-filter: var(--header-blur, var(--glass-blur, saturate(180%) blur(20px)));
  background: var(--header-bg, var(--glass-bg, rgba(255, 255, 255, 0.75)));
  border-bottom: 1px solid var(--header-border, rgba(14, 165, 233, 0.10));
  box-shadow: var(--header-shadow, 0 4px 20px rgba(14, 165, 233, 0.08));
}

/* Inner shine highlight */
body[data-mode="public"] .nyano-header::before,
body[data-mode="portal"] .nyano-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 60%);
  border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Brand
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .nyano-brand,
body[data-mode="portal"] .nyano-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-primary, #0c4a6e);
  min-height: 44px;
}

.nyano-brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.50);
}

.nyano-brand-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--glass-bg, rgba(255, 255, 255, 0.80));
  border: 1px solid rgba(255, 255, 255, 0.50);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.nyano-brand-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 25%;
}

.nyano-brand-text { line-height: 1.15; }
.nyano-brand-name {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0c4a6e);
}
.nyano-brand-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Navigation — Pill Style with Glassmorphism
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .nyano-nav {
  display: none;
}

body[data-mode="portal"] .nyano-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--nav-border, rgba(14, 165, 233, 0.10));
  background: var(--nav-bg, rgba(255, 255, 255, 0.70));
  backdrop-filter: var(--nav-blur, saturate(180%) blur(16px));
  -webkit-backdrop-filter: var(--nav-blur, saturate(180%) blur(16px));
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.50);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body[data-mode="portal"] .nyano-nav::-webkit-scrollbar { display: none; }

.nyano-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-text, #0369a1);
  text-decoration: none;
  min-height: 40px;
  white-space: nowrap;
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.nyano-nav-item:hover {
  background: var(--nav-item-hover-bg, rgba(14, 165, 233, 0.08));
  transform: translateY(-1px);
}

.nyano-nav-item.is-active {
  background: var(--nav-item-active-bg, rgba(255, 255, 255, 0.90));
  color: var(--nav-text-active, #0284c7);
  box-shadow: var(--nav-item-active-shadow, 0 4px 16px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.60));
}

@media (max-width: 860px) {
  body[data-mode="portal"] .nyano-nav {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Cards — Glassmorphism with Glow (CRITICAL FIX)
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .card,
body[data-mode="portal"] .card {
  position: relative;
  border: 1px solid var(--card-border, rgba(14, 165, 233, 0.12));
  border-radius: var(--radius-card, 1.25rem);
  background: var(--gradient-card, var(--card-bg, rgba(255, 255, 255, 0.72)));
  box-shadow: var(--card-shadow, 0 8px 32px rgba(14, 165, 233, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04));
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
  overflow: hidden;
}

/* Inner shine */
body[data-mode="public"] .card::before,
body[data-mode="portal"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  pointer-events: none;
  background: var(--glass-shine, linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%));
  border-radius: inherit;
}

body[data-mode="portal"] .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover, 0 16px 48px rgba(14, 165, 233, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06));
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="public"] .card,
  body[data-mode="portal"] .card {
    transition: none;
  }
  body[data-mode="portal"] .card:hover {
    transform: none;
  }
}

/* Guide Card — Special gradient + glow */
body[data-mode="public"] .nyano-guide-card,
body[data-mode="portal"] .nyano-guide-card {
  background: var(--gradient-guide, var(--gradient-card, var(--card-bg)));
  border-color: var(--guide-border, rgba(14, 165, 233, 0.20));
  box-shadow: var(--guide-shadow, 0 16px 48px rgba(14, 165, 233, 0.14), 0 6px 20px rgba(0, 0, 0, 0.06));
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Feature Cards — VISIBILITY FIX (No more gray!)
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .card.p-4,
body[data-mode="public"] .card.p-5,
body[data-mode="portal"] .card.p-4,
body[data-mode="portal"] .card.p-5 {
  background: var(--feature-card-bg, rgba(255, 255, 255, 0.75)) !important;
  border-color: var(--feature-card-border, rgba(14, 165, 233, 0.15)) !important;
  box-shadow: var(--feature-card-shadow, 0 8px 32px rgba(14, 165, 233, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.80)) !important;
}

body[data-mode="public"] .card.p-4 .font-semibold,
body[data-mode="public"] .card.p-5 .font-semibold,
body[data-mode="portal"] .card.p-4 .font-semibold,
body[data-mode="portal"] .card.p-5 .font-semibold {
  color: var(--feature-card-text, #0c4a6e) !important;
}

body[data-mode="public"] .card.p-4 .nyano-muted,
body[data-mode="public"] .card.p-5 .nyano-muted,
body[data-mode="portal"] .card.p-4 .nyano-muted,
body[data-mode="portal"] .card.p-5 .nyano-muted {
  color: var(--feature-card-text-secondary, #0369a1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Chips — Visible & Beautiful (VISIBILITY FIX)
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--chip-border, rgba(14, 165, 233, 0.20));
  background: var(--chip-bg, rgba(255, 255, 255, 0.90));
  color: var(--chip-text, #0369a1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--chip-shadow, 0 2px 8px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60));
  transition: all 200ms ease;
}

.nyano-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* Hero chips — ensure visibility */
body[data-mode="public"] .nyano-hero .nyano-chip {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary, #0c4a6e);
  border-color: rgba(14, 165, 233, 0.15);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Buttons — Liquid Metal Style
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 14px;
  min-height: 48px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* Primary Button — Liquid Metal */
.nyano-btn-primary {
  color: var(--button-primary-text, #ffffff);
  background: var(--button-primary-bg, var(--liquid-metal-base, linear-gradient(145deg, #0369a1 0%, #0284c7 25%, #0ea5e9 50%, #38bdf8 75%, #7dd3fc 100%)));
  background-size: 200% 200%;
  background-position: 50% 50%;
  border: 1px solid var(--button-primary-border, rgba(255, 255, 255, 0.30));
  box-shadow: var(--button-primary-shadow, 0 8px 24px rgba(14, 165, 233, 0.40), 0 4px 8px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.10));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Liquid metal shine overlay */
.nyano-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--liquid-metal-shine, linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.25) 37%, rgba(255, 255, 255, 0.50) 50%, rgba(255, 255, 255, 0.25) 63%, transparent 75%));
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 600ms ease;
  pointer-events: none;
}

.nyano-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--button-primary-shadow-hover, 0 12px 32px rgba(14, 165, 233, 0.50), 0 6px 12px rgba(14, 165, 233, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12));
  background-position: 100% 100%;
}

.nyano-btn-primary:hover::before {
  background-position: 100% 0;
}

.nyano-btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30), inset 0 2px 4px rgba(0, 0, 0, 0.10);
}

/* Secondary Button — Glass */
.nyano-btn-secondary {
  color: var(--button-secondary-text, #0284c7);
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.80));
  border: 1px solid var(--button-secondary-border, rgba(14, 165, 233, 0.25));
  box-shadow: var(--button-secondary-shadow, 0 4px 16px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60));
  backdrop-filter: blur(8px);
}

.nyano-btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--button-secondary-hover-bg, rgba(255, 255, 255, 0.95));
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* Small button */
.nyano-btn-sm {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
}

/* Ghost button */
.nyano-btn-ghost {
  color: var(--text-secondary, #0369a1);
  background: transparent;
  border: 1px solid var(--surface-border, rgba(14, 165, 233, 0.15));
  box-shadow: none;
}

.nyano-btn-ghost:hover {
  background: rgba(14, 165, 233, 0.06);
  border-color: var(--primary, #0ea5e9);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Login Buttons — Provider-specific Liquid Metal
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-login-dropdown {
  position: relative;
}

.nyano-login-dropdown > summary {
  list-style: none;
}

.nyano-login-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nyano-login-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: 0 18px 50px rgba(2, 132, 199, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}

.nyano-login-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: rgba(12, 74, 110, 0.95);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 180ms, box-shadow 180ms, background 180ms;
}

.nyano-login-dropdown-item:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.18);
}

.nyano-login-dropdown-caret {
  margin-left: 2px;
  opacity: 0.9;
}

.nyano-login-dropdown-ico {
  width: 1.2em;
  display: inline-flex;
  justify-content: center;
}

.nyano-login-dropdown-more {
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
  text-decoration: none;
  color: rgba(3, 105, 161, 0.95);
}

.nyano-login-dropdown-more:hover {
  text-decoration: underline;
}
.nyano-login-buttons {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 920px) {
  .nyano-login-buttons { justify-content: center; }
}

/* Official links (external) — reuse login button skins */
.nyano-social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

@media (max-width: 920px) {
  .nyano-social-buttons { justify-content: center; }
}

.nyano-login-btn.is-compact {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
}

.nyano-login-btn.is-compact .nyano-login-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 13px;
}

.nyano-login-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: translateY(0);
  transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  background-size: 200% 200%;
  background-position: 50% 50%;
}

/* Shine sweep animation */
.nyano-login-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.50) 50%, rgba(255, 255, 255, 0.35) 60%, transparent 80%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 500ms ease;
  pointer-events: none;
}

.nyano-login-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.nyano-login-btn:hover::before {
  background-position: 100% 0;
}

.nyano-login-btn:active {
  transform: translateY(0) scale(0.98);
}

.nyano-login-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.50);
  outline-offset: 3px;
}

.nyano-login-ico {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 14px;
}

/* Provider skins — Liquid Metal variants */
.nyano-login-btn.is-twitch {
  color: #fff;
  background: linear-gradient(145deg, #7c3aed 0%, #8b5cf6 30%, #9146FF 50%, #a78bfa 80%, #c4b5fd 100%);
  box-shadow: 0 8px 28px rgba(145, 70, 255, 0.45), 0 4px 10px rgba(145, 70, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.nyano-login-btn.is-twitch:hover {
  box-shadow: 0 14px 40px rgba(145, 70, 255, 0.55), 0 6px 14px rgba(145, 70, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.nyano-login-btn.is-discord {
  color: #fff;
  background: linear-gradient(145deg, #4338ca 0%, #4f46e5 30%, #5865F2 50%, #818cf8 80%, #a5b4fc 100%);
  box-shadow: 0 8px 28px rgba(88, 101, 242, 0.45), 0 4px 10px rgba(88, 101, 242, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.nyano-login-btn.is-discord:hover {
  box-shadow: 0 14px 40px rgba(88, 101, 242, 0.55), 0 6px 14px rgba(88, 101, 242, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.nyano-login-btn.is-x {
  color: #fff;
  background: linear-gradient(145deg, #000000 0%, #18181b 30%, #27272a 50%, #3f3f46 80%, #52525b 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.nyano-login-btn.is-x:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.50), 0 6px 14px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.nyano-login-btn.is-line {
  color: #fff;
  background: linear-gradient(145deg, #15803d 0%, #16a34a 30%, #06C755 50%, #22c55e 80%, #4ade80 100%);
  box-shadow: 0 8px 28px rgba(6, 199, 85, 0.45), 0 4px 10px rgba(6, 199, 85, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.nyano-login-btn.is-line:hover {
  box-shadow: 0 14px 40px rgba(6, 199, 85, 0.55), 0 6px 14px rgba(6, 199, 85, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.nyano-login-btn.is-wallet {
  color: #fff;
  background: linear-gradient(145deg, #be185d 0%, #db2777 30%, #ec4899 55%, #f472b6 80%, #fbcfe8 100%);
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.40), 0 4px 10px rgba(236, 72, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.nyano-login-btn.is-wallet:hover {
  box-shadow: 0 14px 40px rgba(236, 72, 153, 0.52), 0 6px 14px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}


/* ─────────────────────────────────────────────────────────────────────────────────
   § Step Numbers — Liquid Metal Orbs
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-step {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--stepper-active-text, #ffffff);
  background: var(--gradient-step, var(--stepper-active-bg, linear-gradient(145deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%)));
  box-shadow: var(--shadow-step, var(--stepper-active-shadow, 0 8px 24px rgba(14, 165, 233, 0.35)));
  border: 1px solid rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Shine highlight */
.nyano-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Hero Section
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--surface-border, rgba(14, 165, 233, 0.15));
  background: var(--gradient-hero), var(--gradient-card, rgba(255, 255, 255, 0.80));
}

/* Sparkle overlay */
.nyano-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(3px 3px at 15% 20%, rgba(255, 255, 255, 0.90), transparent 60%),
    radial-gradient(2px 2px at 75% 15%, rgba(255, 255, 255, 0.85), transparent 55%),
    radial-gradient(3px 3px at 85% 70%, rgba(255, 255, 255, 0.80), transparent 60%),
    radial-gradient(2px 2px at 25% 80%, rgba(255, 255, 255, 0.75), transparent 55%);
  opacity: 0.8;
}

.nyano-hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.nyano-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 920px) {
  .nyano-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.nyano-hero-title {
  font-family: var(--font-display, var(--font-sans));
  margin-top: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: clamp(2rem, 3.5vw, 3rem);
  background: var(--text-gradient, linear-gradient(135deg, #0369a1 0%, #0ea5e9 40%, #06b6d4 70%, #0ea5e9 100%));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift var(--anim-gradient-shift, 8s) ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.nyano-hero-sub {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary, #0369a1);
}

.nyano-hero-note {
  margin-top: 1rem;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Carousel
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-carousel {
  width: min(440px, 90%);
}

.nyano-carousel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(14, 165, 233, 0.15);
  box-shadow: 0 24px 60px rgba(14, 165, 233, 0.18), 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  overflow: hidden;
  animation: nyano-float var(--anim-float, 6s) ease-in-out infinite;
}

.nyano-carousel-slide {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 450ms ease, transform 450ms ease;
  cursor: pointer;
}

.nyano-carousel-slide.is-active,
.nyano-carousel-slide:first-child {
  opacity: 1;
  transform: scale(1);
}

.nyano-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.nyano-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.nyano-carousel-dot {
  appearance: none;
  border: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.25);
  cursor: pointer;
  transition: all 200ms ease;
}

.nyano-carousel-dot.is-active {
  background: var(--primary, #0ea5e9);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.50);
}

.nyano-hero-media-caption {
  margin-top: 1rem;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  text-align: center;
}

@keyframes nyano-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 920px) {
  .nyano-carousel { width: min(400px, 92%); margin: 0 auto; }
  .nyano-carousel-stage { aspect-ratio: 4 / 5; }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Userbar
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-userbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nyano-userbar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #0369a1);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Footer
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="public"] .nyano-footer,
body[data-mode="portal"] .nyano-footer {
  padding: 32px 0 40px;
  background: var(--footer-bg, rgba(240, 249, 255, 0.80));
  border-top: 1px solid var(--footer-border, rgba(14, 165, 233, 0.10));
}

.nyano-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--footer-text, #64748b);
}

.nyano-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-secondary, #0369a1);
}

.nyano-footer-note {
  max-width: 52ch;
  text-align: right;
  color: var(--footer-text, #64748b);
}

.nyano-footer-links {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.nyano-footer-links a {
  color: var(--text-muted, #64748b);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.nyano-footer-links a:hover {
  color: var(--primary, #0ea5e9);
  text-decoration: underline;
}

@media (max-width: 680px) {
  .nyano-footer-note { text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Callouts
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-callout {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, 0.15);
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.10);
  backdrop-filter: blur(8px);
}

.nyano-callout-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  flex-shrink: 0;
}

.nyano-callout-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; color: var(--text-primary); }
.nyano-callout-message { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.nyano-callout-ok { border-color: rgba(16, 185, 129, 0.25); }
.nyano-callout-ok .nyano-callout-icon { background: rgba(16, 185, 129, 0.15); }

.nyano-callout-warn { border-color: rgba(245, 158, 11, 0.30); }
.nyano-callout-warn .nyano-callout-icon { background: rgba(245, 158, 11, 0.18); }

.nyano-callout-danger { border-color: rgba(239, 68, 68, 0.30); }
.nyano-callout-danger .nyano-callout-icon { background: rgba(239, 68, 68, 0.14); }

.nyano-callout-info { border-color: rgba(14, 165, 233, 0.25); }
.nyano-callout-info .nyano-callout-icon { background: rgba(14, 165, 233, 0.14); }

/* ─────────────────────────────────────────────────────────────────────────────────
   § Stats
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .nyano-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nyano-stat {
  border: 1px solid var(--stat-card-border, rgba(14, 165, 233, 0.12));
  background: var(--stat-card-bg, rgba(255, 255, 255, 0.75));
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.08);
  backdrop-filter: blur(8px);
}

.nyano-stat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nyano-stat-ico {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--stat-icon-bg, rgba(14, 165, 233, 0.12));
  color: var(--stat-icon-color, #0284c7);
}

.nyano-stat-label {
  font-size: 12px;
  color: var(--stat-label, #64748b);
  font-weight: 700;
}

.nyano-stat-value {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--stat-value, #0c4a6e);
}

.nyano-stat-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Progress
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-progress { margin-top: 12px; }

.nyano-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nyano-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary, linear-gradient(90deg, #0284c7, #0ea5e9, #38bdf8));
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30);
  transition: width 350ms ease;
}

.nyano-progress-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Empty State
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-empty {
  border: 2px dashed rgba(14, 165, 233, 0.20);
  background: rgba(255, 255, 255, 0.60);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
}

.nyano-empty-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(14, 165, 233, 0.15);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
  font-size: 28px;
}

.nyano-empty-title {
  margin-top: 14px;
  font-weight: 800;
  color: var(--text-primary, #0c4a6e);
  font-size: 1.1rem;
}

.nyano-empty-message {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted, #64748b);
  line-height: 1.6;
}

.nyano-empty-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Toast
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 100;
  width: min(500px, calc(100% - 32px));
  pointer-events: none;
}

.nyano-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, 0.15);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(14, 165, 233, 0.20), 0 6px 16px rgba(0, 0, 0, 0.08);
  color: var(--text-primary, #0c4a6e);
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.nyano-toast-ico { font-size: 18px; }
.nyano-toast-msg { font-size: 14px; }
.nyano-toast.is-hide { opacity: 0; transform: translateY(10px); transition: all 200ms ease; }
.nyano-toast.is-show { opacity: 1; transform: translateY(0); transition: all 200ms ease; }

/* ─────────────────────────────────────────────────────────────────────────────────
   § Decorative Corner Image
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-deco {
  position: fixed;
  right: -40px;
  bottom: -50px;
  width: min(480px, 42vw);
  max-width: 520px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 20px 40px rgba(14, 165, 233, 0.15));
}

@media (max-width: 900px) { .nyano-deco { display: none; } }

/* Ensure content sits above decoration */
body[data-mode="public"] main,
body[data-mode="portal"] main,
body[data-mode="public"] header,
body[data-mode="portal"] header,
body[data-mode="public"] footer,
body[data-mode="portal"] footer {
  position: relative;
  z-index: 10;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Tailwind Gray Remap (Portal only)
   ───────────────────────────────────────────────────────────────────────────────── */
body[data-mode="portal"] .text-gray-900,
body[data-mode="portal"] .text-gray-800 {
  color: var(--text-primary, #0c4a6e) !important;
}

body[data-mode="portal"] .text-gray-700 {
  color: var(--text-secondary, #0369a1) !important;
}

body[data-mode="portal"] .text-gray-600,
body[data-mode="portal"] .text-gray-500 {
  color: var(--text-muted, #64748b) !important;
}

body[data-mode="portal"] .text-gray-400,
body[data-mode="portal"] .text-gray-300 {
  color: var(--text-subtle, #94a3b8) !important;
}

body[data-mode="portal"] .bg-gray-50 {
  background: rgba(255, 255, 255, 0.75) !important;
}

body[data-mode="portal"] .bg-gray-100,
body[data-mode="portal"] .bg-gray-200 {
  background: var(--primary-subtle, rgba(14, 165, 233, 0.10)) !important;
}

body[data-mode="portal"] .border,
body[data-mode="portal"] .border-gray-100,
body[data-mode="portal"] .border-gray-200,
body[data-mode="portal"] .border-gray-300 {
  border-color: var(--surface-border, rgba(14, 165, 233, 0.12)) !important;
}

body[data-mode="portal"] .hover\:bg-gray-50:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Badge helper classes */
body[data-mode="portal"] .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

body[data-mode="portal"] .badge.bg-green-100 {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #047857 !important;
}

body[data-mode="portal"] .badge.bg-gray-200,
body[data-mode="portal"] .badge.bg-gray-100 {
  background: rgba(14, 165, 233, 0.10) !important;
  color: var(--text-secondary, #0369a1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Page Layout Helpers
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.nyano-h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #0c4a6e);
}

.nyano-muted {
  color: var(--text-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Surface / Surface Container
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-surface {
  border: 1px solid var(--card-border, rgba(14, 165, 233, 0.12));
  background: var(--gradient-card, var(--card-bg, rgba(255, 255, 255, 0.75)));
  border-radius: var(--radius-card, 1.25rem);
  box-shadow: var(--card-shadow, 0 8px 32px rgba(14, 165, 233, 0.10));
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* Container */
body[data-mode="public"] .container,
body[data-mode="portal"] .container {
  max-width: var(--container-max, 1200px);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Details / Accordion
   ───────────────────────────────────────────────────────────────────────────────── */
details.nyano-details > summary {
  cursor: pointer;
  list-style: none;
}

details.nyano-details > summary::-webkit-details-marker { display: none; }
details.nyano-details > summary .chev { transition: transform 150ms ease; }
details.nyano-details[open] > summary .chev { transform: rotate(180deg); }

/* ─────────────────────────────────────────────────────────────────────────────────
   § Link helpers
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-link {
  color: var(--text-secondary, #0369a1);
  text-decoration: none;
  font-weight: 700;
  transition: color 150ms ease;
}

.nyano-link:hover {
  color: var(--primary, #0ea5e9);
  text-decoration: underline;
}

/* btn-brand (legacy) */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background: var(--gradient-primary, linear-gradient(135deg, #0284c7, #0ea5e9, #38bdf8));
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.30);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 200ms ease;
}

.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.40);
}

/* text-brand */
.text-brand {
  color: var(--primary, #0ea5e9);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Illustration
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-illustration {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 30%, rgba(224, 242, 254, 0.70), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(14, 165, 233, 0.20), transparent 52%),
    radial-gradient(circle at 50% 85%, rgba(56, 189, 248, 0.14), transparent 52%),
    rgba(255,255,255,0.65);
  border: 1px solid rgba(14, 165, 233, 0.12);
  box-shadow: 0 18px 36px rgba(14, 165, 233, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nyano-float { animation: nyano-float var(--anim-float-small, 3.2s) ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────────────────────────
   § Pulse Animation
   ───────────────────────────────────────────────────────────────────────────────── */
@keyframes nyano-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

body[data-mode="public"] .nyano-pulse,
body[data-mode="portal"] .nyano-pulse {
  animation: nyano-pulse-ring var(--anim-pulse-ring, 0.9s) ease-out;
  border-radius: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Reduced Motion
   ───────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nyano-btn,
  .nyano-login-btn,
  .nyano-carousel-slide,
  .nyano-progress-bar,
  .nyano-carousel-stage,
  .nyano-hero-title {
    transition: none !important;
    animation: none !important;
  }
  
  .nyano-btn:hover,
  .nyano-login-btn:hover {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Dark Mode (Auto)
   ───────────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body[data-mode="public"][data-theme-id=""],
  body[data-mode="portal"][data-theme-id=""] {
    --text-primary: #e0f2fe;
    --text-secondary: #bae6fd;
    --text-muted: #94a3b8;
    --nyano-ink: #e0f2fe;
    --nyano-muted: rgba(224, 242, 254, 0.70);

    --app-bg:
      radial-gradient(ellipse 800px 500px at 15% 5%, rgba(14, 165, 233, 0.35), transparent 55%),
      radial-gradient(ellipse 700px 450px at 85% 15%, rgba(167, 139, 250, 0.25), transparent 50%),
      radial-gradient(ellipse 750px 500px at 65% 105%, rgba(244, 114, 182, 0.15), transparent 55%),
      #0c1929;

    --surface-bg: rgba(12, 25, 41, 0.80);
    --surface-border: rgba(14, 165, 233, 0.20);
    --header-bg: rgba(8, 18, 30, 0.75);
    --card-bg: rgba(12, 25, 41, 0.75);
    --glass-bg: rgba(12, 25, 41, 0.70);
  }

  body[data-mode="public"][data-theme-id=""] header,
  body[data-mode="portal"][data-theme-id=""] header {
    background: rgba(8, 18, 30, 0.80) !important;
    border-color: rgba(14, 165, 233, 0.15) !important;
  }

  body[data-mode="public"][data-theme-id=""] .nyano-chip,
  body[data-mode="portal"][data-theme-id=""] .nyano-chip {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.25);
    color: #bae6fd;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────────
   § Official accounts buttons (distinct from login)
   ───────────────────────────────────────────────────────────────────────────────── */
.nyano-social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* The official account links reuse .nyano-login-btn markup, but are intentionally styled
   to *not* look like login buttons (to avoid confusion). */
.nyano-social-buttons .nyano-login-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px dashed rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.20) !important;
  filter: none !important;
}

.nyano-social-buttons .nyano-login-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.24) !important;
}

.nyano-social-buttons .nyano-login-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.14) !important;
}

.nyano-social-buttons .nyano-login-btn::after {
  content: "公式↗";
  margin-left: auto;
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.nyano-social-buttons .nyano-login-ico {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   § Print
   ───────────────────────────────────────────────────────────────────────────────── */
@media print {
  body[data-mode="public"],
  body[data-mode="portal"] {
    background: white !important;
  }
  
  .nyano-header,
  .nyano-footer,
  .nyano-deco {
    display: none !important;
  }
}

/* nyano-official-links-visual-v1 */
.nyano-social-buttons{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:14px 0 6px;}
.nyano-social-buttons .nyano-login-btn{background:rgba(255,255,255,.92)!important; color:var(--text-primary,#1f2a44)!important; border:1.5px dashed rgba(123,148,255,.55)!important; box-shadow:0 10px 25px rgba(20,35,80,.12)!important; text-shadow:none!important; position:relative; overflow:hidden;}
.nyano-social-buttons .nyano-login-btn *{color:inherit!important;}
.nyano-social-buttons .nyano-login-btn::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(145,120,255,.10), rgba(90,180,255,.08)); pointer-events:none;}
.nyano-social-buttons .nyano-login-btn::after{content:"����?"; position:absolute; right:12px; top:10px; font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(20,30,55,.10); color:var(--text-primary,#1f2a44); border:1px solid rgba(20,30,55,.12);}
.nyano-social-buttons .nyano-login-btn:hover{transform:translateY(-1px); filter:none;}
.nyano-social-buttons .nyano-login-btn:active{transform:translateY(0);}
.nyano-social-buttons .nyano-login-btn.is-x{border-color:rgba(30,30,30,.25)!important;}
.nyano-social-buttons .nyano-login-btn.is-line{border-color:rgba(70,190,120,.35)!important;}
.nyano-social-buttons .nyano-login-btn.is-discord{border-color:rgba(120,140,255,.35)!important;}
.nyano-social-buttons .nyano-login-btn.is-twitch{border-color:rgba(170,120,255,.35)!important;}

`n/* nyano-official-links-badge-v2 */`n.nyano-social-buttons .nyano-login-btn{position:relative;padding-right:56px}`n.nyano-social-buttons .nyano-login-btn::after{content:"\\2197";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:800;font-size:16px;opacity:.55;pointer-events:none;background:transparent;border:0;padding:0;border-radius:0;color:currentColor;z-index:2}`n

/* admin-quest-templates-layout-v1 */
body[data-path^="/admin/quest"] .table td{white-space:normal; word-break:break-word;}
body[data-path^="/admin/quest"] .table td code{white-space:pre-wrap; word-break:break-word;}
body[data-path^="/admin/quest"] .btn-row, body[data-path^="/admin/quest"] .actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}



/* nyano-official-badge-safe-v4 */
/* ASCII-safe external badge: avoid mojibake from non-UTF8 content strings */
.nyano-social-buttons .nyano-login-btn::after, .nyano-social-buttons a::after{content:"\\2197" !important;}