/* Tema embos Kampung Studio — selaras logo (ungu · oranye · magenta) */

.emboss-ui {
  --emboss-bg: #0f0b16;
  --emboss-surface: #151021;
  --emboss-panel: #1b1529;
  --emboss-elevated: #221a32;
  --emboss-dark: #07050c;
  --emboss-light: rgba(167, 139, 215, 0.22);
  --emboss-light-soft: rgba(124, 98, 180, 0.16);
  --emboss-well-dark: #050308;
  --emboss-accent: #e879f9;
  --emboss-accent-soft: #f9a8d4;
  --emboss-cta-a: #ffb347;
  --emboss-cta-b: #ff6b81;
  --emboss-cta-c: #e056fd;
  --emboss-cta-d: #9b59f6;
  --emboss-text: #ece8f4;
  --emboss-muted: #9d93b0;
  --emboss-cta-gradient: linear-gradient(
    135deg,
    var(--emboss-cta-a) 0%,
    var(--emboss-cta-b) 38%,
    var(--emboss-cta-c) 72%,
    var(--emboss-cta-d) 100%
  );
  --emboss-cta-glow: 0 8px 28px rgba(224, 86, 253, 0.35), 0 4px 16px rgba(255, 107, 129, 0.2);

  --bg: var(--emboss-bg);
  --surface: var(--emboss-surface);
  --card: var(--emboss-panel);
  --card-elevated: var(--emboss-elevated);
  --card-border: transparent;
  --text: var(--emboss-text);
  --text-soft: #d4cce6;
  --muted: var(--emboss-muted);
  --muted-2: #7a7190;
  --accent: var(--emboss-accent);
  --accent-2: var(--emboss-accent-soft);
  --accent-soft: rgba(232, 121, 249, 0.14);
  --accent-glow: rgba(224, 86, 253, 0.42);
  --suno-orange: #ffb347;
  --suno-pink: #ff6b81;
  --suno-tab-active: #e056fd;
  --violet-glow: rgba(155, 89, 246, 0.18);
  color: var(--emboss-text);
}

.emboss-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(560px 340px at 6% 8%, rgba(155, 89, 246, 0.14), transparent 68%),
    radial-gradient(480px 300px at 94% 12%, rgba(255, 107, 129, 0.1), transparent 62%),
    radial-gradient(420px 260px at 50% 100%, rgba(255, 179, 71, 0.06), transparent 70%),
    var(--emboss-bg);
}

.emboss-ui .layout,
.emboss-ui .app-shell {
  position: relative;
  z-index: 1;
}

.emboss-ui .layout {
  background: var(--emboss-bg);
}

.emboss-ui .sidebar {
  background: var(--emboss-surface);
  border-right: none;
  box-shadow:
    6px 0 16px var(--emboss-dark),
    inset -1px 0 0 rgba(167, 139, 215, 0.1);
}

.emboss-ui .main {
  background: var(--emboss-bg);
  box-shadow:
    inset 4px 4px 12px var(--emboss-well-dark),
    inset -3px -3px 10px var(--emboss-light-soft);
}

.emboss-ui .main__scroll {
  background: transparent;
}

.emboss-ui .card {
  background: var(--emboss-panel);
  border: none;
  border-radius: 20px;
  box-shadow:
    6px 6px 14px var(--emboss-dark),
    -5px -5px 12px var(--emboss-light);
}

.emboss-ui .card--compose {
  background: var(--emboss-panel);
  box-shadow:
    8px 8px 18px var(--emboss-dark),
    -6px -6px 14px var(--emboss-light);
}

.emboss-ui .card--compose::before {
  width: 4px;
  background: var(--emboss-cta-gradient);
  box-shadow:
    2px 0 10px rgba(224, 86, 253, 0.45),
    inset -1px 0 2px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

.emboss-ui .card--side {
  background: var(--emboss-surface);
  border: none;
  box-shadow:
    5px 5px 12px var(--emboss-dark),
    -4px -4px 10px var(--emboss-light);
}

.emboss-ui .card--side::after,
.emboss-ui .library-card::after {
  display: none;
}

.emboss-ui .zu-top-sticky {
  background: var(--emboss-bg);
  border: none;
  border-radius: 16px;
  box-shadow:
    inset 4px 4px 8px var(--emboss-well-dark),
    inset -3px -3px 8px var(--emboss-light-soft);
}

.emboss-ui .zu-segment {
  background: var(--emboss-bg);
  border: none;
  border-radius: 14px;
  box-shadow:
    inset 3px 3px 6px var(--emboss-well-dark),
    inset -2px -2px 6px var(--emboss-light-soft);
}

.emboss-ui .zu-type-btn,
.emboss-ui .zu-segment-btn,
.emboss-ui .tiny-btn,
.emboss-ui .library-toolbar-btn,
.emboss-ui .zu-gender-btn,
.emboss-ui .zu-like-filter-btn {
  background: var(--emboss-panel);
  border: none;
  color: var(--emboss-text);
  box-shadow:
    3px 3px 7px var(--emboss-dark),
    -2px -2px 6px var(--emboss-light);
  transition: box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.emboss-ui .zu-type-btn:hover,
.emboss-ui .zu-segment-btn:hover,
.emboss-ui .tiny-btn:hover:not(:disabled),
.emboss-ui .library-toolbar-btn:hover:not(:disabled),
.emboss-ui .zu-gender-btn:hover,
.emboss-ui .zu-like-filter-btn:hover {
  color: #f5d0fe;
}

.emboss-ui .zu-type-btn:active:not(:disabled),
.emboss-ui .zu-segment-btn:active:not(:disabled),
.emboss-ui .tiny-btn:active:not(:disabled),
.emboss-ui .library-toolbar-btn:active:not(:disabled),
.emboss-ui .zu-gender-btn:active:not(:disabled) {
  box-shadow:
    inset 3px 3px 6px var(--emboss-well-dark),
    inset -2px -2px 6px var(--emboss-light-soft);
  transform: scale(0.98);
}

.emboss-ui .zu-type-btn.is-active,
.emboss-ui .zu-segment-btn.is-active,
.emboss-ui .zu-type-btn--on,
.emboss-ui .zu-like-filter-btn--on {
  background: linear-gradient(145deg, rgba(91, 33, 120, 0.55), rgba(49, 24, 78, 0.85));
  color: #faf5ff;
  box-shadow:
    inset 0 0 0 1px rgba(232, 121, 249, 0.35),
    3px 3px 8px rgba(0, 0, 0, 0.45),
    -2px -2px 6px var(--emboss-light);
}

.emboss-ui .zu-gender-btn--on {
  background: linear-gradient(145deg, rgba(157, 23, 77, 0.45), rgba(76, 29, 110, 0.55));
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(244, 114, 182, 0.35),
    3px 3px 8px rgba(0, 0, 0, 0.4);
}

.emboss-ui .input,
.emboss-ui .textarea,
.emboss-ui select,
.emboss-ui .library-search {
  background: #0c0812;
  border: 1px solid rgba(196, 181, 253, 0.34);
  color: var(--emboss-text);
  border-radius: 14px;
  box-shadow:
    inset 4px 4px 8px var(--emboss-well-dark),
    inset -3px -3px 8px var(--emboss-light-soft);
}

.emboss-ui .input:focus,
.emboss-ui .textarea:focus,
.emboss-ui select:focus,
.emboss-ui .library-search:focus {
  outline: none;
  box-shadow:
    inset 5px 5px 10px var(--emboss-well-dark),
    inset -4px -4px 10px var(--emboss-light-soft),
    0 0 0 2px rgba(224, 86, 253, 0.32);
}

.emboss-ui .input::placeholder,
.emboss-ui .textarea::placeholder {
  color: #6e6484;
}

.emboss-ui .btn-primary,
.emboss-ui .btn-secondary,
.emboss-ui .btn-gradient,
.emboss-ui .zu-action-btn {
  border: none;
  border-radius: 16px;
  background: var(--emboss-panel);
  color: #c4b5fd;
  font-weight: 700;
  box-shadow:
    5px 5px 10px var(--emboss-dark),
    -4px -4px 10px var(--emboss-light);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.emboss-ui .btn-gradient--suno,
.emboss-ui .form-actions .btn-gradient--suno {
  background: var(--emboss-cta-gradient);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    var(--emboss-cta-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.emboss-ui .btn-primary:hover:not(:disabled),
.emboss-ui .btn-secondary:hover:not(:disabled),
.emboss-ui .btn-gradient:hover:not(:disabled),
.emboss-ui .btn-gradient--suno:hover:not(:disabled),
.emboss-ui .zu-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.emboss-ui .btn-gradient--suno:hover:not(:disabled) {
  box-shadow:
    0 12px 36px rgba(224, 86, 253, 0.42),
    0 6px 20px rgba(255, 107, 129, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.emboss-ui .btn-primary:active:not(:disabled),
.emboss-ui .btn-secondary:active:not(:disabled),
.emboss-ui .btn-gradient:active:not(:disabled),
.emboss-ui .btn-gradient--suno:active:not(:disabled),
.emboss-ui .zu-action-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow:
    inset 4px 4px 8px var(--emboss-well-dark),
    inset -3px -3px 8px var(--emboss-light-soft);
}

.emboss-ui .nav-item {
  border: none;
  background: transparent;
  color: #b8afc8;
}

.emboss-ui .nav-item:hover {
  background: var(--emboss-panel);
  border: none;
  transform: none;
  color: #f5d0fe;
  box-shadow:
    3px 3px 7px var(--emboss-dark),
    -2px -2px 6px var(--emboss-light);
}

.emboss-ui .nav-item--active {
  background: var(--emboss-cta-gradient);
  color: #fff;
  box-shadow:
    var(--emboss-cta-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.emboss-ui .nav-item--active .nav-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
  color: #fff;
}

.emboss-ui .library-card,
.emboss-ui .library-toolbar-card,
.emboss-ui .settings-card {
  background: var(--emboss-panel);
  border: none;
  border-radius: 16px;
  box-shadow:
    5px 5px 12px var(--emboss-dark),
    -4px -4px 10px var(--emboss-light);
}

.emboss-ui .library-card:hover {
  border: none;
  transform: translateY(-1px);
  box-shadow:
    7px 7px 16px var(--emboss-dark),
    -5px -5px 12px var(--emboss-light),
    0 0 0 1px rgba(232, 121, 249, 0.12);
}

.emboss-ui .library-card-art {
  border-radius: 12px;
  background: linear-gradient(145deg, #7c3aed 0%, #ec4899 48%, #f97316 100%);
  box-shadow:
    4px 4px 8px var(--emboss-dark),
    -3px -3px 7px var(--emboss-light),
    inset 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.emboss-ui .sidebar-qris,
.emboss-ui .sidebar-user {
  background: var(--emboss-bg);
  border: none;
  border-radius: 16px;
  box-shadow:
    inset 4px 4px 8px var(--emboss-well-dark),
    inset -3px -3px 8px var(--emboss-light-soft);
}

.emboss-ui .sidebar-qris__title {
  color: #f5d0fe;
}

.emboss-ui .sidebar-qris__img {
  border-radius: 14px;
  box-shadow:
    4px 4px 10px var(--emboss-dark),
    -3px -3px 8px var(--emboss-light);
}

.emboss-ui .brand-logo {
  filter: drop-shadow(0 4px 14px rgba(155, 89, 246, 0.35));
}

.emboss-ui .brand-logo img {
  box-shadow:
    6px 6px 14px var(--emboss-dark),
    -5px -5px 12px var(--emboss-light);
}

.emboss-ui .brand-title--gradient {
  color: #ffffff;
  background: none;
  filter: none;
}

.emboss-ui .brand-sub {
  color: rgba(196, 181, 253, 0.72);
}

.emboss-ui .main-topbar,
.emboss-ui .main-topbar-credit {
  background: var(--emboss-panel);
  border: none;
  border-radius: 14px;
  box-shadow:
    4px 4px 10px var(--emboss-dark),
    -3px -3px 8px var(--emboss-light);
}

.emboss-ui .player-bar {
  background: var(--emboss-surface);
  border-top: none;
  box-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(167, 139, 215, 0.12);
}

.emboss-ui .mobile-bottom-nav {
  background: var(--emboss-surface);
  border-top: none;
  box-shadow:
    0 -8px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(167, 139, 215, 0.1);
}

.emboss-ui .mobile-bottom-nav__btn {
  background: transparent;
  border: none;
}

.emboss-ui .mobile-bottom-nav__btn--fab .mobile-bottom-nav__fab-inner {
  background: var(--emboss-cta-gradient);
  box-shadow: var(--emboss-cta-glow);
}

.emboss-ui .mobile-bottom-nav__btn--active:not(.mobile-bottom-nav__btn--fab) .mobile-bottom-nav__ico {
  color: #f0abfc;
}

.emboss-ui .modal-backdrop {
  background: rgba(15, 11, 22, 0.78);
  backdrop-filter: blur(8px);
}

.emboss-ui .modal-card,
.emboss-ui .settings-zu-card {
  background: var(--emboss-panel);
  border: none;
  box-shadow:
    10px 10px 24px rgba(0, 0, 0, 0.55),
    -6px -6px 16px var(--emboss-light);
}

.emboss-ui .toast-stack .toast {
  background: var(--emboss-panel);
  border: none;
  box-shadow:
    6px 6px 14px var(--emboss-dark),
    -4px -4px 10px var(--emboss-light);
}

.emboss-ui .playground-form--suno.zu-compose-panel {
  background: transparent;
}

.emboss-ui .zu-field-well,
.emboss-ui .zu-lyrics-box,
.emboss-ui .zu-style-box {
  background: #0c0812;
  border: none;
  border-radius: 16px;
  box-shadow:
    inset 5px 5px 10px var(--emboss-well-dark),
    inset -4px -4px 10px var(--emboss-light-soft);
}

.emboss-ui .status-pill,
.emboss-ui .library-status-pill {
  box-shadow:
    inset 2px 2px 4px var(--emboss-well-dark),
    inset -1px -1px 3px var(--emboss-light-soft);
}

.emboss-ui a {
  color: #e879f9;
}

.emboss-ui a:hover {
  color: #f9a8d4;
}

.emboss-ui .status-dot--on {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.emboss-ui .sidebar-refresh-btn {
  background: var(--emboss-panel);
  border: none;
  color: #c4b5fd;
  box-shadow:
    3px 3px 7px var(--emboss-dark),
    -2px -2px 6px var(--emboss-light);
}

.emboss-ui .pwa-install-banner {
  background: var(--emboss-panel);
  border: none;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    -4px -4px 12px var(--emboss-light);
}

.emboss-ui .pwa-install-banner__btn {
  background: var(--emboss-cta-gradient);
  color: #fff;
  border: none;
}