/* Page surfaces for the orange Uzushio / sub design. Behaviour stays in each
   existing page: visibility, modal state, playback and form submission are not
   overridden here. The shared shell supplies colour and type tokens. */

body.festival-ui :is(
  .create-form-card, .privacy-card, .login-card, .register-card,
  .password-reset-card, .profile-hero, .profile-edit-form, .plan-card,
  .inquiry-form, .plan-summary, .delete-account-wrapper, .song-header-card,
  .music-player-card, .lyrics-card, .comments-card, .action-panel,
  .song-detail-page .flashcard-section, .song-detail-page .related-songs,
  .song-detail-page .karaoke-section,
  .classroom-main-card, .create-main-card, .join-main-card, .candidate-card,
  .violation-card, .privacy-form-card, .song-info-card, .assignment-card,
  .up-drawer, .qc-song-card
) {
  background: var(--surface-elevated);
  border: 2px solid var(--border-color) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  color: var(--text-primary);
}

body.festival-ui :is(
  .my-songs-title, .library-title, .create-title, .join-title,
  .classroom-title, .share-title, .upgrade-title, .inquiry-title,
  .profile-name, .song-main-title, .candidate-heading h1,
  .create-song-page-heading, .lyrics-page-heading
) {
  color: var(--text-primary);
  font-family: inherit;
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-text-fill-color: currentColor;
  background: none;
}

body.festival-ui :is(
  .my-songs-subtitle, .library-subtitle, .classroom-subtitle,
  .share-subtitle, .upgrade-subtitle, .inquiry-subtitle,
  .candidate-eyebrow, .section-label, .song-meta, .song-artist,
  .profile-bio, .creation-date-large
) { color: var(--text-secondary); }

body.festival-ui :is(
  .login-container, .register-container, .password-reset-container,
  .profile-container, .profile-edit-container, .upgrade-container,
  .inquiry-container, .delete-account-container, .music-library
) {
  background: transparent;
  min-height: 0;
}

body.festival-ui :is(
  .login-container, .register-container, .password-reset-container,
  .profile-edit-container, .inquiry-container, .delete-account-container
) { padding-block: clamp(28px, 6vw, 64px); }

body.festival-ui :is(.login-wrapper, .register-wrapper, .password-reset-wrapper) {
  width: 100%;
  max-width: 500px;
}

/* The School form is a card of its own: keep labels and controls inside its
   rounded edge, without a second padded white surface squeezing the form. */
body.festival-ui .inquiry-wrapper { max-width: 760px; }

body.festival-ui .inquiry-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.festival-ui .inquiry-form {
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  gap: 24px;
}

body.festival-ui .inquiry-form .form-group {
  min-width: 0;
  margin: 0;
  gap: 8px;
}

body.festival-ui .inquiry-form .form-group > label {
  margin: 0;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

body.festival-ui .inquiry-form :is(
  input[type='text'], input[type='email'], input[type='tel'], select, textarea
) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 2px solid var(--control-border);
  border-radius: 14px;
  background-color: var(--surface-elevated);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
}

body.festival-ui .inquiry-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23715c4c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
body.festival-ui .inquiry-form textarea { min-height: 144px; }
body.festival-ui .inquiry-form input[type='checkbox'] {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--action-color);
}

body.festival-ui .inquiry-form :is(input, select, textarea):focus {
  border-color: var(--primary-dark);
}

body.festival-ui .inquiry-form :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

body.festival-ui .inquiry-content .plan-summary {
  padding: clamp(20px, 4vw, 32px);
  margin-bottom: 24px;
}

body.festival-ui .inquiry-note { overflow-wrap: anywhere; }

body.festival-ui :is(.login-body, .register-body, .password-reset-body) {
  padding: clamp(24px, 4vw, 36px);
}

body.festival-ui :is(.login-footer, .register-footer) {
  padding: 0 clamp(24px, 4vw, 36px) 28px;
  background: transparent;
}

body.festival-ui :is(.login-footer, .register-footer) .divider span {
  background: var(--surface-elevated);
  color: var(--text-secondary);
}

body.festival-ui .login-footer .btn-register,
body.festival-ui .register-footer .btn-login-link {
  background: var(--surface-elevated);
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color);
  border-radius: 14px;
  box-shadow: none;
}

body.festival-ui :is(.forgot-password-link, .back-link, .link-back) a,
body.festival-ui a:is(.back-link, .link-back) { color: var(--primary-dark); }
body.festival-ui .profile-edit-wrapper .edit-header .back-link { color: #fff; }

/* Lists keep a clear shared outline, with quieter separators inside it. */
body.festival-ui :is(.my-songs-header, .library-header) {
  padding: 12px 0 26px;
  margin-bottom: 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.festival-ui :is(.song-list, .music-library .songs-list, .profile-container .songs-list) {
  border: 2px solid var(--border-color);
  border-radius: 24px;
  background: var(--surface-elevated);
  box-shadow: none;
  padding: 4px 14px;
}

body.festival-ui :is(.song-row, .music-library .song-item, .song-list-item) {
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 88px;
  padding-block: 18px;
}

body.festival-ui :is(.song-row, .music-library .song-item, .song-list-item):last-child {
  border-bottom: 0;
}

body.festival-ui :is(.song-row, .music-library .song-item, .song-list-item):hover {
  background: var(--primary-soft);
  box-shadow: none;
}

body.festival-ui :is(.song-title-text, .song-title-link, .song-list-title) {
  color: var(--text-primary);
  font-weight: 800;
}

body.festival-ui :is(.song-genre-badge, .song-genre, .tag-badge-small, .song-list-genre) {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
  border-radius: 9px;
}

body.festival-ui :is(.song-info, .song-details, .song-main-info, .song-list-info) {
  min-width: 0;
}
body.festival-ui .song-duration { color: var(--text-muted); }

body.festival-ui :is(.song-cover, .related-placeholder) { border-radius: 14px; }

body.festival-ui :is(.btn-play-mini, .play-button) {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
  box-shadow: none;
}

body.festival-ui .btn-play-mini.playing {
  background: var(--action-color);
  color: #fff;
  border-color: var(--primary-dark);
}

body.festival-ui :is(.menu-dropdown, .delete-modal-content, .delete-song-modal-content,
  .tag-modal-content, .karaoke-modal-content, .cropper-modal-content, .consent-dialog) {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 22px;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--surface-dark) 13%, transparent);
}

body.festival-ui .menu-dropdown { border-radius: 16px; }
body.festival-ui .menu-item:not(.delete-item) { color: var(--text-primary); }
body.festival-ui .menu-item:hover { background: var(--primary-soft); }

body.festival-ui :is(.search-section, .search-container) { background: transparent; }
body.festival-ui .search-input-wrapper {
  border: 2px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface-elevated);
  box-shadow: none;
}
body.festival-ui .search-input { background: transparent; color: var(--text-primary); }
body.festival-ui .sort-tabs { gap: 8px; border: 0; flex-wrap: wrap; }
body.festival-ui .sort-tab {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--surface-elevated);
  color: var(--text-secondary);
}
body.festival-ui .sort-tab.active {
  border-color: var(--border-color);
  background: var(--action-color);
  color: #fff;
  box-shadow: none;
}
body.festival-ui .sort-tab.active::after { display: none; }

/* Material upload and song preparation. */
body.festival-ui .up-wrap {
  max-width: 780px;
  padding: 32px 24px 64px;
}
body.festival-ui .up-hero {
  background: var(--surface-elevated);
  border: 2px dashed var(--border-color);
  border-radius: 26px;
  box-shadow: none;
}
body.festival-ui .up-hero.drag-over {
  background: var(--primary-soft);
  border-color: var(--primary-dark);
}
body.festival-ui .up-empty { padding: clamp(32px, 6vw, 60px) 24px; }
body.festival-ui .up-empty-title { color: var(--text-primary); font-size: clamp(24px, 3vw, 32px); font-weight: 900; }
body.festival-ui .up-empty-icon { color: var(--primary-dark); }
body.festival-ui .up-empty-ring { border-color: var(--border-light); }
body.festival-ui .up-hero-bg-dot { background: none; }
body.festival-ui .up-drawer { margin-top: 20px; overflow: hidden; }
body.festival-ui .up-drawer-trigger { background: var(--primary-soft); padding: 18px 24px; color: var(--text-primary); }
body.festival-ui .up-drawer-body { padding: 24px; }
body.festival-ui .up-foot { margin-top: 24px; }
body.festival-ui .up-manual-entry { color: var(--primary-dark); padding-block: 18px; }

body.festival-ui :is(.create-form-card .form-header, .lyrics-page .card-header,
  .karaoke-modal-header, .profile-edit-form .edit-header) {
  color: var(--text-primary);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  padding: 22px 26px;
}
body.festival-ui :is(.create-form-card .form-header h3, .lyrics-page .card-header h3,
  .karaoke-modal-header h3) { color: inherit; font-weight: 900; }
body.festival-ui :is(.form-body, .lyrics-page .card-body) { padding: 26px; }
body.festival-ui :is(.form-check-modern, .locked-feature-box, .source-text,
  .extracted-text, .uploaded-file-info, .genre-suggestions, .flashcard-option) {
  background: var(--surface);
  border-color: var(--border-light);
  border-radius: 16px;
  box-shadow: none;
}
body.festival-ui .privacy-card { box-shadow: none !important; border-color: var(--border-light) !important; border-radius: 18px !important; }
body.festival-ui :is(.vocal-toggle-wrapper, .candidate-segments, .up-duration-group) {
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border-light);
  border-radius: 17px;
  background: var(--surface);
}
body.festival-ui :is(.vocal-toggle-btn, .candidate-option, .up-duration-btn) {
  min-height: 44px;
  border-radius: 12px;
  color: var(--text-secondary);
  box-shadow: none;
}
body.festival-ui .candidate-option:has(input:checked),
body.festival-ui .up-duration-input:checked + .up-duration-btn,
body.festival-ui #vocal-female:checked ~ .vocal-toggle-wrapper label[for="vocal-female"],
body.festival-ui #vocal-male:checked ~ .vocal-toggle-wrapper label[for="vocal-male"],
body.festival-ui #duration-60:checked ~ .vocal-toggle-wrapper label[for="duration-60"],
body.festival-ui #duration-120:checked ~ .vocal-toggle-wrapper label[for="duration-120"],
body.festival-ui #duration-180:checked ~ .vocal-toggle-wrapper label[for="duration-180"] {
  background: var(--action-color);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: none;
}
body.festival-ui .progress-section { padding: 20px 0 28px; }
body.festival-ui .step-icon { border: 2px solid var(--border-light); box-shadow: none; background: var(--surface-elevated); color: var(--text-secondary); }
body.festival-ui .step.active .step-icon { border-color: var(--border-color); background: var(--action-color); color: #fff; box-shadow: none; }
body.festival-ui .upload-drop-area { border-color: var(--border-color); border-radius: 20px; background: var(--surface); }

/* Candidate and generation states retain their live-status semantics. */
body.festival-ui .candidate-comparison { max-width: 1120px; }
body.festival-ui .candidate-toolbar { margin-bottom: 28px; }
body.festival-ui .candidate-grid { gap: 22px; }
body.festival-ui .candidate-card { padding: 26px; }
body.festival-ui .candidate-card-selected { background: var(--primary-soft); border-color: var(--primary-dark) !important; }
body.festival-ui .candidate-preview { border: 1px solid var(--border-light); border-radius: 18px; background: var(--surface); }
body.festival-ui .candidate-card-selected .candidate-preview { background: var(--surface-elevated); }
body.festival-ui :is(.candidate-refresh, .candidate-button) { border-radius: 14px; }
body.festival-ui .candidate-button-primary { background: var(--action-color); color: #fff; border-color: var(--border-color); box-shadow: none; }
body.festival-ui .candidate-button-secondary { background: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-light); }
body.festival-ui :is(.candidate-progress, .generating-progress-bar) { background: var(--border-light); }
body.festival-ui :is(.candidate-progress span, .generating-progress-fill) { background: var(--action-color); }
body.festival-ui .generating-container {
  width: min(100%, 660px);
  padding: clamp(28px, 5vw, 48px);
  background: var(--surface-elevated);
  border: 2px solid var(--border-color);
  border-radius: 28px;
  box-shadow: none;
}
body.festival-ui :is(.generating-title, .generating-song-name) { color: var(--text-primary); -webkit-text-fill-color: currentColor; background: none; }
body.festival-ui :is(.music-icon-wrapper, .lyrics-icon-wrapper) { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }
body.festival-ui :is(.generating-status, .generating-queue-info) { border: 1px solid var(--border-light); border-radius: 16px; background: var(--surface); }

/* Track detail: artwork, controls, lyrics and discussion form one family. */
body.festival-ui .song-detail-page .song-header-card { padding: clamp(20px, 4vw, 32px); }
body.festival-ui .song-detail-page :is(.music-player-card, .lyrics-card, .comments-card) { overflow: hidden; }
body.festival-ui .song-detail-page :is(.flashcard-section, .related-songs, .karaoke-section) { padding: 24px; }
body.festival-ui .song-main-cover { border-radius: 18px; border: 1px solid var(--border-light); box-shadow: none; }
body.festival-ui .song-main-placeholder { border-radius: 18px; background: var(--primary-soft); color: var(--primary-dark); }
body.festival-ui .song-detail-page :is(.player-header, .lyrics-header, .comments-header) {
  padding: 20px 24px;
  color: var(--text-primary);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border-light);
}
body.festival-ui .song-detail-page :is(.player-header, .lyrics-header, .comments-header) h3 { font-size: 1.15rem; font-weight: 900; color: inherit; }
body.festival-ui .song-detail-page :is(.player-body, .lyrics-content, .comments-list) { padding: 24px; }
body.festival-ui .song-detail-page .lyrics-content { line-height: 2; }
body.festival-ui .song-detail-page .card-modern:hover { transform: none; box-shadow: none; }
body.festival-ui :is(.stats-grid .stat-box, .comment-form-section, .original-text-section, .mixer-track) {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: none;
}
body.festival-ui .stat-value { color: var(--text-primary); }
body.festival-ui .song-detail-page :is(.creator-avatar-large, .comment-avatar) {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
}
body.festival-ui .song-detail-page .tags-section { border-color: var(--border-light); }
body.festival-ui .song-detail-page .tag-badge {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
  box-shadow: none;
  border-radius: 10px;
}
body.festival-ui .song-detail-page :is(.btn-karaoke-start, .btn-recreate-lyrics, .btn-karaoke-retry),
body.festival-ui .song-detail-page .flashcard-section a.btn:not(.btn-outline-secondary) {
  background: var(--action-color) !important;
  color: #fff !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: none;
}
body.festival-ui .song-detail-page .flashcard-section .badge { background: var(--primary-soft) !important; color: var(--primary-dark); }
body.festival-ui .song-detail-page .flashcard-section .btn-outline-secondary { border-radius: 14px !important; }
body.festival-ui .comment-item { border-color: var(--border-light); }
body.festival-ui .related-song-item { border-radius: 14px; }
body.festival-ui .related-song-item:hover { background: var(--primary-soft); }
body.festival-ui .main-genre-badge { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid var(--border-light); border-radius: 10px; }
body.festival-ui .karaoke-container { background: var(--surface-elevated); }
body.festival-ui .karaoke-line.active { color: var(--primary-dark); }
body.festival-ui .btn-loop.active { background: var(--action-color); color: #fff; }
body.festival-ui .btn-edit-tags { color: var(--primary-dark); }
body.festival-ui .action-button.delete-button { color: var(--danger); }
body.festival-ui .action-button.delete-button:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Secondary song information should stay smaller than the playback card. */
body.festival-ui .song-detail-page .action-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
body.festival-ui .song-detail-page .action-panel h4 {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.5;
}
body.festival-ui .song-detail-page .action-panel .stats-grid { display: block; margin: 0; }
body.festival-ui .song-detail-page .action-panel .stat-box {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.festival-ui .song-detail-page .action-panel .stat-icon { display: none; }
body.festival-ui .song-detail-page .action-panel .stat-value { font-size: .9rem; font-variant-numeric: tabular-nums; }
body.festival-ui .song-detail-page .action-panel .stat-label { font-size: .7rem; }
.song-detail-page .song-info-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: stretch; gap: 8px; min-width: 0; }
body.festival-ui .song-detail-page .action-panel .action-buttons { display: flex; flex: 0 1 auto; min-width: 0; }
body.festival-ui .song-detail-page .action-panel .owner-actions { display: flex; margin: 0; padding: 0; border: 0; }
body.festival-ui .song-detail-page .action-panel .action-button {
  min-height: 44px;
  padding: 8px;
  gap: 6px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: .8rem;
  line-height: 1.5;
  transform: none;
  box-shadow: none;
}
body.festival-ui .song-detail-page .action-panel .favorite-button { width: 100%; background: var(--surface); color: var(--text-primary); }
body.festival-ui .song-detail-page .action-panel .favorite-button.btn-warning,
body.festival-ui .song-detail-page .action-panel .favorite-button:hover { background: var(--primary-soft); color: var(--primary-dark); }
body.festival-ui .song-detail-page .action-panel .delete-button { border-color: transparent; background: transparent; color: var(--text-secondary); }
body.festival-ui .song-detail-page .action-panel .delete-button:hover { background: #fff0ed; color: var(--danger); }

/* Accounts and classrooms. Keep avatars round, and keep destructive actions red. */
body.festival-ui .hero-background { background: var(--primary-soft); }
body.festival-ui .profile-hero .profile-main { position: relative; }
body.festival-ui .profile-stats { border-color: var(--border-light); }
body.festival-ui .stat-number { color: var(--primary-dark); }
body.festival-ui .section-header { border-color: var(--border-light); }
body.festival-ui .section-title { color: var(--text-primary); font-weight: 900; }
body.festival-ui .view-all-link { color: var(--primary-dark); }
body.festival-ui :is(.classroom-card, .classroom-item, .assignment-item) {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  box-shadow: none;
}
body.festival-ui :is(.classroom-card.hosted, .classroom-item.hosted) { background: var(--primary-soft); }
body.festival-ui :is(.classroom-icon, .host-badge) { background: var(--primary-soft); color: var(--primary-dark); }
body.festival-ui .classroom-header {
  background: var(--surface-elevated);
  color: var(--text-primary);
  padding: 28px;
  border: 2px solid var(--border-color);
  border-radius: 24px;
  box-shadow: none;
}
body.festival-ui .classroom-header .menu-btn {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
  border-radius: 12px;
}
body.festival-ui .classroom-header :is(.classroom-code, .menu-btn):focus-visible {
  outline-color: var(--primary-dark);
}
body.festival-ui .classroom-header + .row > :is(.col-lg-8, .col-lg-4) > div {
  background: var(--surface-elevated) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 24px !important;
  box-shadow: none;
}
body.festival-ui .classroom-header + .row .action-btn {
  background: var(--action-color);
  color: #fff;
  border: 2px solid var(--border-color);
  border-radius: 14px;
  box-shadow: none;
}
body.festival-ui .classroom-header + .row .song-card {
  background: var(--surface);
  border-color: var(--border-light);
  border-radius: 16px;
  box-shadow: none;
}
body.festival-ui .classroom-header + .row .member-avatar {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-light);
}
body.festival-ui .classroom-code { background: var(--primary-soft); border-color: var(--border-light); color: var(--primary-dark); border-radius: 12px; }
body.festival-ui .member-item { border-color: var(--border-light); }
body.festival-ui .member-role { color: var(--primary-dark); background: var(--primary-soft); }
body.festival-ui .classroom-header + .row :is(.song-meta, .empty-state) { color: var(--text-muted); }
body.festival-ui .classroom-header + .row h3 > span { color: var(--text-muted) !important; }
body.festival-ui .share-page .song-card { background: var(--surface-elevated); border: 2px solid var(--border-color); border-radius: 20px; box-shadow: none; }
body.festival-ui :is(.create-main-card, .join-main-card, .classroom-main-card) { padding: clamp(24px, 4vw, 36px); }
body.festival-ui :is(.bio-textarea, .title-input, .tag-input, .confirm-input, .code-input) { border-radius: 14px; border-color: var(--control-border); background: var(--surface-elevated); color: var(--text-primary); }
body.festival-ui .danger-zone { border-radius: 18px; }
body.festival-ui .danger-zone :is(h3, .btn-danger-link) { color: var(--danger); }
body.festival-ui .danger-zone .btn-danger-link { border-color: var(--danger); }
body.festival-ui .danger-zone .btn-danger-link:hover { background: var(--danger); color: #fff; }

/* Plans, legal material and learning tools. */
body.festival-ui .upgrade-header { margin-bottom: 36px; }
body.festival-ui .plans-grid { gap: 20px; }
body.festival-ui .plan-card { padding: 28px; }
body.festival-ui .plan-card.popular { background: var(--primary-soft); }
body.festival-ui .plan-card.highlighted { background: var(--surface-dark); color: #fff; }
body.festival-ui .plan-card.highlighted :is(.plan-name, .price-amount) { color: #fff; }
body.festival-ui .plan-card.highlighted :is(.price-period, .price-jpy-note, .plan-description) { color: var(--on-dark); }
body.festival-ui .popular-badge { background: var(--action-color); color: #fff; border-radius: 12px; box-shadow: none; }
body.festival-ui .plan-btn.primary { background: var(--action-color); color: #fff; border: 2px solid var(--border-color); box-shadow: none; border-radius: 14px; }
body.festival-ui .plan-card.highlighted .plan-btn.primary { background: var(--action-color); color: #fff !important; }
body.festival-ui .plan-card.highlighted .plan-btn.primary:hover:not(:disabled) { background: var(--action-hover); }
body.festival-ui .plan-card.highlighted .plan-btn:is(.secondary, .current) { background: var(--surface-elevated); color: var(--text-primary) !important; }
body.festival-ui .plan-card.highlighted .plan-btn.secondary:hover { background: var(--primary-soft); }
body.festival-ui .plan-features .unavailable { color: var(--text-muted); }
body.festival-ui .plan-card.highlighted .plan-features .unavailable { color: var(--on-dark); }
body.festival-ui .plans-grid + div { color: var(--text-muted) !important; }
body.festival-ui .faq-item { background: var(--surface-elevated); border: 1px solid var(--border-light); border-radius: 16px; }
body.festival-ui .faq-question { color: var(--text-primary); }
body.festival-ui .legal-page .card-body { padding: clamp(24px, 4vw, 40px); }
body.festival-ui .legal-page :is(h1, h2, h3) { color: var(--text-primary); }
body.festival-ui .legal-page h2 { margin-top: 32px; }
body.festival-ui .legal-page a { color: var(--primary-dark); text-underline-offset: 3px; }
body.festival-ui .legal-page :is(td, th) { border-color: var(--border-light); }
body.festival-ui :is(.flashcard-front, .flashcard-back) {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}
body.festival-ui .flashcard-back { background: var(--primary-soft) !important; }
body.festival-ui .flashcard-back small { color: var(--primary-dark) !important; }
body.festival-ui .selection-toolbar { background: var(--surface-elevated); border: 2px solid var(--border-color); border-radius: 20px; box-shadow: none; }
body.festival-ui .term-item { border: 1px solid var(--border-light); border-radius: 14px; background: var(--surface-elevated); }
body.festival-ui .term-item:has(input:checked) { border-color: var(--primary-dark); background: var(--primary-soft); }
body.festival-ui .filter-btn.active { background: var(--action-color); border-color: var(--primary-dark); color: #fff; }
body.festival-ui .flashcard-create-page .upload-area { border: 2px dashed var(--border-color); border-radius: 20px; background: var(--surface-elevated); }

/* Staff surfaces use the same readable light palette as the visitor app. */
body.festival-ui :is(.ut-container, .tm-container, .td-container) { color: var(--text-primary); background: transparent; }
body.festival-ui :is(.ut-header, .tm-header, .td-header) { background: transparent; color: var(--text-primary); border-color: var(--border-light); box-shadow: none; }
body.festival-ui :is(.ut-panel, .tm-card, .td-card, .staff-portal__list,
  .staff-portal__shortcut, .summary-card, .staff-table) {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 22px;
  box-shadow: none;
}
body.festival-ui :is(.ut-result-header, .tm-card-header, .td-card-header) { background: var(--primary-soft); color: var(--text-primary); border-color: var(--border-light); }
body.festival-ui :is(.ut-label, .ut-status-text, .tm-label, .tm-metric-value,
  .td-section-label, .td-card-num, .staff-portal__title, .staff-portal__label) { color: var(--text-primary); }
body.festival-ui :is(.ut-hint, .ut-song-result, .tm-metric-label, .tm-footer,
  .td-result-count, .td-card-preview, .td-prompt-meta) { color: var(--text-secondary); }
body.festival-ui :is(.ut-server-row, .ut-result-panel, .tm-metric, .tm-type-switch,
  .td-filter, .td-stats, .td-section, .staff-portal__row) { background: var(--surface); border-color: var(--border-light); color: var(--text-primary); }
body.festival-ui :is(.ut-textarea, .ut-input, .ut-select, .td-input, .td-textarea,
  .td-select, .pending-input) { background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 12px; }
body.festival-ui :is(.ut-btn, .tm-btn, .td-btn, .act-btn) { border-radius: 12px; }
body.festival-ui :is(.ut-btn-generate, .ut-btn-proceed, .tm-btn-start,
  .td-btn-generate, .td-btn-save) { background: var(--action-color); color: #fff; border-color: var(--border-color); box-shadow: none; }
body.festival-ui .staff-portal__role { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid var(--border-light); }
body.festival-ui .staff-portal__icon { background: var(--primary-soft); color: var(--primary-dark); }
body.festival-ui .staff-portal__list > li:first-child > a { border-radius: 19px 19px 0 0; }
body.festival-ui .staff-portal__list > li:last-child > a { border-radius: 0 0 19px 19px; }
body.festival-ui .staff-portal__list > li:only-child > a { border-radius: 19px; }
body.festival-ui :is(.td-modal, .td-modal-header, .td-modal-footer) { background: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-light); }
body.festival-ui .td-modal { border: 2px solid var(--border-color); border-radius: 22px; box-shadow: none; }
body.festival-ui :is(.tm-log, .ut-lyrics-pre, .ut-prompt-used) { background: var(--surface-dark); color: var(--on-dark); border-radius: 14px; }

/* Smaller screens keep breathing room without squeezing the useful content. */
@media (max-width: 767px) {
  body.festival-ui :is(.my-songs-header, .library-header) { padding-top: 8px; padding-bottom: 18px; margin-bottom: 18px; }
  body.festival-ui :is(.song-list, .music-library .songs-list, .profile-container .songs-list) { padding-inline: 8px; border-radius: 20px; }
  body.festival-ui :is(.song-row, .music-library .song-item, .song-list-item) { padding-block: 15px; min-height: 78px; }
  body.festival-ui .up-wrap { padding: 20px 16px 40px; }
  body.festival-ui :is(.up-drawer-body, .form-body, .lyrics-page .card-body) { padding: 20px; }
  body.festival-ui :is(.create-form-card .form-header, .lyrics-page .card-header) { padding: 20px; }
  body.festival-ui .song-detail-page :is(.player-header, .lyrics-header, .comments-header, .player-body, .lyrics-content, .comments-list) { padding: 18px; }
  body.festival-ui .candidate-card { padding: 20px; }
  body.festival-ui .candidate-grid { gap: 18px; }
  body.festival-ui .classroom-header { padding: 20px; }
  body.festival-ui .plan-card { padding: 24px; }
  body.festival-ui .sort-tab { padding: 9px 13px; }
}

@media (max-width: 420px) {
  body.festival-ui :is(.song-list, .music-library .songs-list, .profile-container .songs-list) { padding-inline: 4px; }
  body.festival-ui :is(.login-body, .register-body, .password-reset-body) { padding: 22px 20px; }
  body.festival-ui :is(.login-footer, .register-footer) { padding-inline: 20px; }
  body.festival-ui :is(.my-songs-header-actions, .candidate-toolbar) { gap: 8px; }
  body.festival-ui .my-songs-header { align-items: flex-start; }
  body.festival-ui .up-empty { padding-inline: 18px; }
}

@media (hover: hover) and (pointer: fine) {
  body.festival-ui :is(.classroom-card, .classroom-item, .staff-portal__shortcut):hover {
    transform: translateY(-2px);
    background: var(--primary-soft);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.festival-ui :is(.classroom-card, .classroom-item, .staff-portal__shortcut):hover { transform: none; }
}