/*
  Neumorphism ("Soft UI") panel
  ------------------------------------------------------------
  The one rule that defines this style: the object and the
  background are the SAME flat color. There are no gradients,
  no borders, no color surfaces. Depth exists only because of a
  paired shadow — a dark one cast away from the light source
  (bottom-right) and a light one catching the light (top-left).
  Flip both shadows to `inset` and the same recipe reads as
  pressed-in instead of raised. Every selector below is scoped
  to .theme-neu so it can't leak into sibling theme panels.
*/

.theme-neu {
  /* single flat surface color = background color (the whole point) */
  --neu-bg: #2e333c;
  --neu-light: #3d4451;   /* highlight shadow: lighter than bg */
  --neu-dark: #16181d;    /* cast shadow: darker than bg */

  --neu-text: #ccd1da;
  --neu-text-strong: #f2f4f8;
  --neu-text-muted: #949dab; /* tuned to clear 4.5:1 AA against --neu-bg */

  /* spot color reserved for icons/glyphs only — echoes the cyan
     glow used on the Cosmixon hub-link pill elsewhere in the app */
  --neu-accent: #4dd8ea;
  --neu-danger: #e88a90;

  /* reusable dual-shadow recipes, scaled to element size */
  --sh-raised-xs: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light);
  --sh-raised-sm: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --sh-raised-md: 7px 7px 14px var(--neu-dark), -7px -7px 14px var(--neu-light);
  --sh-raised-lg: 11px 11px 24px var(--neu-dark), -11px -11px 24px var(--neu-light);

  --sh-pressed-xs: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
  --sh-pressed-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --sh-pressed-md: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light);

  background: var(--neu-bg);
  color: var(--neu-text);
  padding: 40px clamp(16px, 4vw, 48px) 64px;
  font-feature-settings: "tnum" 1;
}

.theme-neu * {
  box-sizing: border-box;
}

/* ---------- head ---------- */

.theme-neu .panel-head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--neu-text-strong);
  letter-spacing: 0.01em;
}

.theme-neu .panel-desc {
  margin: 0;
  color: var(--neu-text-muted);
  font-size: 0.95rem;
}

.theme-neu .demo-block h3 {
  margin: 0 0 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neu-text-muted);
}

/* ---------- shared interactive base ---------- */

.theme-neu button,
.theme-neu input,
.theme-neu select {
  font-family: inherit;
  color: var(--neu-text);
  background: var(--neu-bg);
}

.theme-neu button {
  cursor: pointer;
  border: none;
  outline: none;
  transition: box-shadow 180ms ease, transform 180ms ease, color 180ms ease;
}

.theme-neu button:focus-visible,
.theme-neu input:focus-visible,
.theme-neu select:focus-visible,
.theme-neu .neu-toggle input:focus-visible + .track {
  outline: 2px solid var(--neu-accent);
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */

.theme-neu .demo-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.theme-neu .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--sh-raised-md);
}

.theme-neu .btn:active {
  box-shadow: var(--sh-pressed-sm);
  transform: translateY(1px);
}

.theme-neu .btn-icon {
  font-size: 1rem;
  line-height: 1;
}

/* primary — raised, brightest text, cyan-tinted glyph only */
.theme-neu .btn-primary {
  color: var(--neu-text-strong);
}
.theme-neu .btn-primary .btn-icon {
  color: var(--neu-accent);
}

/* secondary — permanently debossed, reads as a quieter action */
.theme-neu .btn-secondary {
  box-shadow: var(--sh-pressed-sm);
  color: var(--neu-text-muted);
  font-weight: 500;
}
.theme-neu .btn-secondary:active {
  box-shadow: var(--sh-pressed-md);
}

/* icon-only — raised circle */
.theme-neu .btn-icon-only {
  min-height: 48px;
  width: 48px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.15rem;
  box-shadow: var(--sh-raised-md);
}
.theme-neu .btn-icon-only:active {
  box-shadow: var(--sh-pressed-sm);
  transform: translateY(1px);
}

/* disabled — flat, flush with the background, no depth at all */
.theme-neu .btn-flat {
  box-shadow: none;
  color: var(--neu-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.theme-neu .btn-flat:active {
  transform: none;
}

/* destructive — raised, only the icon+label carry a muted accent */
.theme-neu .btn-danger {
  color: var(--neu-danger);
}
.theme-neu .btn-danger .btn-icon {
  color: var(--neu-danger);
}

/* ---------- Form ---------- */

.theme-neu .demo-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 380px;
}

.theme-neu .field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-neu .field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--neu-text-muted);
}

.theme-neu input[type="text"] {
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  box-shadow: var(--sh-pressed-sm);
  font-size: 0.95rem;
}

.theme-neu input[type="text"]::placeholder {
  color: var(--neu-text-muted);
  opacity: 0.8;
}

.theme-neu .select-wrap {
  position: relative;
}

.theme-neu .select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--neu-text-muted);
  border-bottom: 2px solid var(--neu-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.theme-neu select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 50px;
  padding: 0 40px 0 18px;
  border-radius: 12px;
  box-shadow: var(--sh-pressed-sm);
  font-size: 0.95rem;
  cursor: pointer;
}

/* neumorphic toggle switch */
.theme-neu .neu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  cursor: pointer;
  user-select: none;
}

.theme-neu .neu-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-neu .neu-toggle .track {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  box-shadow: var(--sh-pressed-sm);
  transition: box-shadow 180ms ease;
  flex-shrink: 0;
}

.theme-neu .neu-toggle .thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--sh-raised-xs);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.theme-neu .neu-toggle input:checked ~ .track .thumb {
  transform: translateX(22px);
  box-shadow: var(--sh-raised-xs), 0 0 0 3px rgba(77, 216, 234, 0.16);
}

.theme-neu .neu-toggle input:checked ~ .track .thumb::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--neu-accent);
  opacity: 0.85;
}

.theme-neu .toggle-text {
  font-size: 0.9rem;
  color: var(--neu-text);
}

.theme-neu .btn-submit {
  align-self: flex-start;
  margin-top: 4px;
}

/* ---------- Card ---------- */

.theme-neu .demo-card {
  max-width: 340px;
  padding: 28px 26px;
  border-radius: 22px;
  box-shadow: var(--sh-raised-lg);
}

.theme-neu .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 1.4rem;
  box-shadow: var(--sh-raised-sm);
  margin-bottom: 18px;
}

.theme-neu .card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--neu-text-strong);
}

.theme-neu .card-desc {
  margin: 0 0 20px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--neu-text-muted);
}

.theme-neu .card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--neu-accent);
  text-decoration: none;
  box-shadow: var(--sh-raised-xs);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.theme-neu .card-action:hover {
  box-shadow: var(--sh-raised-sm);
}

.theme-neu .card-action:active {
  box-shadow: var(--sh-pressed-xs);
  transform: translateY(1px);
}

/* ---------- Mobile phone mock ---------- */
/* phone-mock / phone-notch bezel chrome comes from the shared shell;
   only the screen contents below belong to this theme. */

.theme-neu .phone-screen {
  background: var(--neu-bg);
  color: var(--neu-text);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.theme-neu .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-neu .app-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--neu-text-strong);
}

.theme-neu .app-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: var(--sh-raised-xs);
  flex-shrink: 0;
}

.theme-neu .app-icon-btn:active {
  box-shadow: var(--sh-pressed-xs);
}

.theme-neu .balance-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 18px;
  box-shadow: var(--sh-pressed-sm);
}

.theme-neu .balance-label {
  font-size: 0.72rem;
  color: var(--neu-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.theme-neu .balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neu-text-strong);
}

.theme-neu .app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--sh-raised-xs);
}

.theme-neu .row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: var(--sh-pressed-xs);
}

.theme-neu .row-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--neu-text);
}

.theme-neu .row-chevron {
  color: var(--neu-text-muted);
  font-size: 1rem;
}

.theme-neu .app-nav {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px;
  border-radius: 18px;
  box-shadow: var(--sh-raised-sm);
}

.theme-neu .nav-item {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: none;
  color: var(--neu-text-muted);
}

.theme-neu .nav-item.is-active {
  box-shadow: var(--sh-pressed-xs);
  color: var(--neu-accent);
}

/* ---------- Usage demo: neumorphic music player ---------- */

.theme-neu .demo-usage {
  display: flex;
}

.theme-neu .player {
  width: 100%;
  max-width: 360px;
  padding: 26px 24px;
  border-radius: 24px;
  box-shadow: var(--sh-raised-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.theme-neu .player-art {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: var(--sh-raised-sm);
}

.theme-neu .player-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.theme-neu .player-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--neu-text-strong);
}

.theme-neu .player-artist {
  font-size: 0.8rem;
  color: var(--neu-text-muted);
}

.theme-neu .player-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-neu .progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  box-shadow: var(--sh-pressed-xs);
  overflow: hidden;
}

.theme-neu .progress-fill {
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: var(--neu-accent);
  opacity: 0.75;
}

.theme-neu .progress-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--neu-text-muted);
}

.theme-neu .player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}

.theme-neu .ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: var(--sh-raised-sm);
  color: var(--neu-text);
}

.theme-neu .ctrl-btn:active {
  box-shadow: var(--sh-pressed-xs);
  transform: translateY(1px);
}

.theme-neu .ctrl-play {
  width: 58px;
  height: 58px;
  font-size: 1.2rem;
  color: var(--neu-accent);
  box-shadow: var(--sh-raised-md);
}

/* ---------- responsive ---------- */

@media (max-width: 480px) {
  .theme-neu {
    padding: 28px 16px 48px;
  }
  .theme-neu .demo-buttons {
    gap: 14px;
  }
  .theme-neu .btn {
    padding: 0 18px;
  }
  .theme-neu .demo-form,
  .theme-neu .demo-card,
  .theme-neu .player {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-neu button,
  .theme-neu .neu-toggle .thumb,
  .theme-neu .card-action {
    transition: none;
  }
  .theme-neu .btn:active,
  .theme-neu .btn-icon-only:active,
  .theme-neu .card-action:active,
  .theme-neu .ctrl-btn:active {
    transform: none;
  }
  .theme-neu .loading-spinner::after,
  .theme-neu .skel-line::after {
    animation: none;
  }
}

/* ---------- Alert dialog ---------- */
/* .theme-alert-backdrop already gets position:fixed/inset/flex-centering
   and [hidden]{display:none} from the shared shell (../style.css) —
   this theme only supplies the tint + the box's neumorphic look. */

.theme-neu .theme-alert-backdrop {
  background: rgba(10, 11, 15, 0.66);
  padding: 20px;
}

.theme-neu .theme-alert-box {
  width: 100%;
  max-width: 380px;
  background: var(--neu-bg);
  color: var(--neu-text);
  padding: 34px 28px 28px;
  border-radius: 26px;
  box-shadow: var(--sh-raised-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.theme-neu .theme-alert-box .alert-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.6rem;
  box-shadow: var(--sh-raised-sm);
  margin-bottom: 16px;
}

.theme-neu .alert-title {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--neu-text-strong);
}

.theme-neu .alert-desc {
  margin: 0 0 24px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--neu-text-muted);
}

.theme-neu .alert-actions {
  display: flex;
  gap: 14px;
  width: 100%;
}

.theme-neu .alert-actions .btn {
  flex: 1;
  justify-content: center;
  min-height: 46px;
  padding: 0 12px;
}

/* ---------- Loading (spinner + skeleton + result) ---------- */

.theme-neu .demo-loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.theme-neu .loading-panel {
  width: 100%;
  max-width: 380px;
  min-height: 118px;
  padding: 24px;
  border-radius: 18px;
  box-shadow: var(--sh-pressed-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* skeleton — debossed placeholder bars, shown in the idle state */
.theme-neu .loading-skeleton {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.theme-neu .skel-line {
  position: relative;
  height: 13px;
  border-radius: 999px;
  box-shadow: var(--sh-pressed-xs);
  overflow: hidden;
}

.theme-neu .skel-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--neu-light), transparent);
  opacity: 0.55;
  transform: translateX(-100%);
  animation: neu-shimmer 1.6s ease-in-out infinite;
}

.theme-neu .skel-w1 {
  width: 100%;
}
.theme-neu .skel-w2 {
  width: 82%;
}
.theme-neu .skel-w3 {
  width: 60%;
}

/* spinner — debossed circular track, moving arc in the spot-accent color */
.theme-neu .loading-spinner {
  display: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: var(--sh-pressed-sm);
  position: relative;
  flex-shrink: 0;
}

.theme-neu .loading-spinner::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--neu-accent);
  animation: neu-spin 900ms linear infinite;
}

/* result — raised card, revealed only in the done state */
.theme-neu .loading-result {
  display: none;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: var(--sh-raised-sm);
}

.theme-neu .loading-result p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--neu-text-strong);
}

.theme-neu .loading-panel[data-state="idle"] .loading-skeleton {
  display: flex;
}

.theme-neu .loading-panel[data-state="loading"] .loading-spinner {
  display: block;
}
.theme-neu .loading-panel[data-state="loading"] .loading-skeleton {
  display: flex;
  opacity: 0.35;
}

.theme-neu .loading-panel[data-state="done"] .loading-result,
.theme-neu .loading-panel[data-state="done"] .loading-result[hidden] {
  display: block;
}

@keyframes neu-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes neu-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .theme-neu .theme-alert-box {
    max-width: 100%;
    padding: 28px 20px 22px;
  }
  .theme-neu .loading-panel {
    max-width: 100%;
    padding: 18px;
  }
}