/* SINKAYO Music OS v3.36.0 – final modern UI layer
   Loaded last on purpose. Presentation only: no storage or application logic. */

:root,
[data-theme="dark"] {
  --sx-bg-0: #06070b;
  --sx-bg-1: #0b0d13;
  --sx-bg-2: #11141d;
  --sx-panel: rgba(19, 22, 31, .86);
  --sx-panel-2: rgba(27, 31, 43, .92);
  --sx-panel-hover: rgba(36, 41, 56, .94);
  --sx-border-0: rgba(255, 255, 255, .085);
  --sx-border-1: rgba(255, 255, 255, .14);
  --sx-text-0: #f7f8fb;
  --sx-text-1: #c9ced9;
  --sx-text-2: #929aab;
  --sx-accent: #ed315f;
  --sx-accent-2: #57c7ff;
  --sx-accent-soft: rgba(237, 49, 95, .14);
  --sx-radius-sm: 10px;
  --sx-radius-md: 14px;
  --sx-radius-lg: 18px;
  --sx-radius-xl: 24px;
  --sx-shadow-soft: 0 14px 40px rgba(0, 0, 0, .28);
  --sx-shadow-panel: 0 22px 70px rgba(0, 0, 0, .36);
}

html { font-size: 16px; }
body {
  min-width: 320px;
  color: var(--sx-text-0);
  background:
    radial-gradient(circle at 15% -10%, rgba(237,49,95,.13), transparent 32rem),
    radial-gradient(circle at 92% 2%, rgba(87,199,255,.075), transparent 28rem),
    linear-gradient(145deg, #06070b 0%, #090b11 48%, #07080d 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
small, .muted, .eyebrow, .server-label, .last-backup, .shortcut-hint { font-size: 12px; }
p, td, label, input, select, textarea, .nav-btn, .top-command-main { font-size: 14px; }

body.is-admin:not(.is-guest):not(.is-guest-preview) .main {
  background: transparent;
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-shell {
  padding: 12px clamp(18px, 2vw, 34px) 0;
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-bar {
  min-height: 70px;
  border: 1px solid var(--sx-border-0);
  border-radius: 18px;
  background: rgba(10, 12, 18, .86);
  box-shadow: 0 18px 55px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(135%);
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-brand-text strong {
  font-size: 16px;
  letter-spacing: .12em;
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-main,
body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-arrow,
body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-action {
  min-height: 42px;
  border-radius: 10px;
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .content {
  padding-top: 24px;
  padding-left: clamp(22px, 2.3vw, 44px);
  padding-right: clamp(24px, 3vw, 58px);
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view > .page-header h2 {
  font-size: clamp(32px, 2.35vw, 48px);
  letter-spacing: .055em;
  line-height: 1;
}

.card, .stat-card, .song-card, .album-card, .command-center-card,
.command-center-panel, .backup-center, .package-center, .health-card,
.visual-vault-card, .prompt-vault-card, .album-vault-card,
.editor-workflow-panel, .editor-form-card, .detail-card {
  border-radius: var(--sx-radius-lg);
}

body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .card,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .stat-card,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .editor-workflow-panel,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .editor-form-card,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .empty-state,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .about-card,
body.is-admin:not(.is-guest):not(.is-guest-preview) .content > .view:not(#dashboard) .album-card {
  border: 1px solid var(--sx-border-0);
  border-radius: var(--sx-radius-lg);
  background: linear-gradient(180deg, rgba(23,26,36,.90), rgba(13,15,22,.91));
  box-shadow: var(--sx-shadow-soft), inset 0 1px rgba(255,255,255,.035);
}

body.is-admin:not(.is-guest):not(.is-guest-preview) #songs #tableView {
  border-radius: var(--sx-radius-lg);
  background: rgba(13,15,22,.88);
}

body.is-admin:not(.is-guest):not(.is-guest-preview) #songs thead th {
  min-height: 44px;
  padding-top: 13px;
  padding-bottom: 13px;
  background: rgba(10,12,18,.97);
  font-size: 12px;
}

body.is-admin:not(.is-guest):not(.is-guest-preview) #songs tbody td {
  padding-top: 13px;
  padding-bottom: 13px;
}

input, select, textarea, .btn, .nav-btn, .copy-btn, .icon-btn {
  min-height: 40px;
}

textarea { line-height: 1.55; }

.btn.primary, .nav-btn.primary, .top-command-new-song {
  background: linear-gradient(135deg, #f03b68, #b91f49);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: 0 10px 28px rgba(237,49,95,.20);
}

.btn:hover, .nav-btn:hover, .top-command-main:hover, .top-command-action:hover {
  transform: translateY(-1px);
}

.detail-tab-btn, .editor-workflow-tab, .view-toggle button {
  min-height: 42px;
  padding-inline: 15px;
  font-size: 13px;
}

.focus-mode-content {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  border: 1px solid var(--sx-border-1);
  border-radius: 22px;
  background: rgba(9,11,16,.97);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.focus-lyrics { font-size: clamp(17px, 1.15vw, 20px); line-height: 1.75; }

body.is-guest {
  background:
    radial-gradient(circle at 50% -15%, rgba(237,49,95,.16), transparent 34rem),
    linear-gradient(145deg, #06070b, #0b0d13);
}

body.is-guest .sidebar {
  background: rgba(7,9,13,.92);
  border-right: 1px solid rgba(255,255,255,.075);
  backdrop-filter: blur(20px);
}

body.is-guest .public-hero,
body.is-guest .public-homebase-latest-stable,
body.is-guest .public-discography-card,
body.is-guest #detail .detail-header,
body.is-guest #detail .detail-tab-panel {
  border-color: var(--sx-border-0);
  border-radius: var(--sx-radius-xl);
  background: linear-gradient(180deg, rgba(22,25,34,.90), rgba(12,14,20,.92));
  box-shadow: var(--sx-shadow-panel);
}

@media (max-width: 1100px) {
  body.is-admin:not(.is-guest):not(.is-guest-preview) .content {
    padding-inline: 16px;
  }
  body.is-admin:not(.is-guest):not(.is-guest-preview) .top-command-shell {
    padding-inline: 12px;
  }
}

@media (max-width: 700px) {
  html { font-size: 15px; }
  body { font-size: 14px; }
  .focus-mode-content { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}