/* ==========================================================================
   XiaoYang Studio Theme
   ========================================================================== */

:root {
  --bg-color: #0a0a0a;
  --panel-bg: #111214;
  --surface-bg: #18191c;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  
  --text-primary: #f9fbfc;
  --text-secondary: #b6bbc2;
  --text-muted: #646870;
  
  --accent-gradient: linear-gradient(90deg, #29cc49 0%, #51e02d 24%, #74ff52 76%, #99eb2f 100%);
  --accent-solid: #29cc49;
  --accent-glow: rgba(41, 204, 73, 0.25);
  
  --gold-vip: #e6a23c;
  --gold-bg: rgba(230, 162, 60, 0.12);
  
  --sidebar-width: 76px;
  --font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --bezel-shadow: rgba(255, 255, 255, 0.28) -0.5px -0.5px 0.5px 0px inset, 
                  rgba(255, 255, 255, 0.64) 0.5px 0.5px 0.5px 0px inset;
  
  --popover-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

/* Base resets & styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-family);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
}

::selection {
  background: #1d7cff;
  color: #fff;
}

::-moz-selection {
  background: #1d7cff;
  color: #fff;
}

img,
svg,
video,
canvas,
input[type="checkbox"],
input[type="radio"] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input,
textarea,
select,
code,
pre,
.api-main,
.api-main *,
.task-detail-panel,
.task-detail-panel *,
.video-card,
.video-card *,
.modal-content,
.modal-content * {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Custom Scrollbars */
.-scroll-none::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================================================
   LEFT SIDEBAR STYLE
   ========================================================================== */

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--panel-bg);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  z-index: 100;
  border-right: 1px solid var(--border-color);
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.sidebar-logo:hover {
  transform: rotate(10deg);
}

.logo-svg {
  width: 100%;
  height: 100%;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  gap: 6px;
  transition: all 0.2s ease;
}

.nav-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.nav-item span {
  font-size: 10px;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.04);
}

.nav-item:hover .nav-icon {
  transform: scale(1.05);
}

.nav-item.active {
  color: var(--accent-solid);
  background-color: rgba(41, 204, 73, 0.08);
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.api-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
  text-decoration: none;
  gap: 4px;
  position: relative;
  transition: color 0.2s ease;
}

.api-link:hover {
  color: var(--text-primary);
}

.api-icon {
  width: 20px;
  height: 20px;
}

.dot-badge {
  position: absolute;
  top: 0;
  right: 6px;
  width: 6px;
  height: 6px;
  background-color: #ff4d4f;
  border-radius: 50%;
}

.signin-btn {
  width: 56px;
  height: 26px;
  border-radius: 13px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signin-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-secondary);
}

.plans-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(230,162,60,0.15) 0%, rgba(230,162,60,0.05) 100%);
  border: 1px solid rgba(230,162,60,0.25);
  border-radius: 8px;
  padding: 6px 4px;
  width: 60px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.plans-banner:hover {
  border-color: var(--gold-vip);
}

.banner-title {
  font-size: 8px;
  color: var(--text-secondary);
}

.banner-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-vip);
}

.banner-sub {
  font-size: 8px;
  color: var(--text-muted);
}

.more-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.more-btn:hover {
  color: var(--text-primary);
}


/* ==========================================================================
   MAIN LAYOUT & SCROLLER
   ========================================================================== */

main {
  flex: 1;
  margin-left: var(--sidebar-width);
  height: 100vh;
  background-color: var(--bg-color);
}

.main-page-content {
  display: flex;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   GENERATOR PANEL (LEFT COLUMN)
   ========================================================================== */

.generator-panel {
  width: 560px;
  flex-shrink: 0;
  height: 100%;
  border-right: 1px solid var(--border-color);
}

.designer-container {
  width: 100%;
  height: 100%;
}

.main-content.video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--panel-bg);
}

.resize-handle {
  display: none; /* Can implement resize logic if needed */
}

/* Sub tabs under Generator Panel Header */
.top-nav-panel {
  height: 64px;
  width: 100%;
  background-color: var(--panel-bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);
}

.tabs.size-small {
  display: flex;
  gap: 24px;
}

.tab-item {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-item:hover {
  color: var(--text-primary);
}

.tab-item.active {
  color: var(--text-primary);
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-solid);
}

/* Main workspace area inside left panel */
.designer-main-container {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}

.designer-component.property-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.property-content {
  flex: 1;
  padding: 16px 20px 20px;
}

.panel-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Version Selector Combobox */
.combo.version-select-root {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  height: 56px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease;
  overflow: hidden;
}

.combo.version-select-root:hover {
  border-color: var(--border-hover);
}

.combobox-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  gap: 12px;
  position: relative;
}

.model-badge-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2124 0%, #0d0d0d 100%);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-solid);
  flex-shrink: 0;
}

.model-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.model-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.tag-new {
  font-size: 9px;
  font-weight: 700;
  background-color: rgba(41, 204, 73, 0.15);
  color: var(--accent-solid);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.2;
}

.model-desc {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.dropdown-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

/* Config Card box wrapping prompts & uploads */
.panel-prompt-skeleton.border-gradient {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 400px;
}

/* TOP AREA: File upload frames */
.panel-prompt-skeleton__top {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: rgba(255, 255, 255, 0.01);
}

.upload-frame-container {
  width: 100%;
}

.upload-frame-container.hidden {
  display: none !important;
}

.upload-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-box-dashed {
  height: 120px;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-box-dashed:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--accent-solid);
}

.upload-icon {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
}

.upload-box-dashed:hover .upload-icon {
  color: var(--accent-solid);
}

.upload-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
  text-align: center;
}

.upload-history-btn {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  height: 28px;
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  padding: 0 12px;
  transition: background-color 0.2s;
}

.upload-history-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Motion Mode: Dual Upload Row */
.dual-upload-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.upload-box-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-box-half .upload-box-dashed {
  height: 96px;
  padding: 0 12px;
}

.upload-box-half .upload-icon {
  width: 20px;
  height: 20px;
}

.upload-box-half .upload-text {
  font-size: 10px;
}

/* API docs must remain selectable so users can copy keys, endpoints, and examples. */
body:has(.api-main) .api-main,
body:has(.api-main) .api-main * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: text;
}

body:has(.api-main) .api-main ::selection {
  background: #1d7cff;
  color: #fff;
}

body:has(.api-main) .api-main ::-moz-selection {
  background: #1d7cff;
  color: #fff;
}

body:has(.api-main) button,
body:has(.api-main) button *,
body:has(.api-main) a,
body:has(.api-main) a * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: pointer;
}

.motion-orientation-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.motion-orientation-choice {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.motion-orientation-choice:hover {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-primary);
}

.motion-orientation-choice:has(input:checked) {
  border-color: var(--border-color);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
}

.motion-orientation-choice input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-solid);
  flex: 0 0 auto;
}

.motion-orientation-choice input:checked {
  filter: drop-shadow(0 0 5px rgba(42, 169, 255, 0.75));
}

.wardrobe-replace-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wardrobe-replace-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  max-width: 100%;
}

.wardrobe-replace-options input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-solid);
}

.wardrobe-replace-options input:checked {
  filter: drop-shadow(0 0 5px rgba(42, 169, 255, 0.75));
}

.wardrobe-replace-options input:checked + span {
  color: var(--accent-solid);
}

.version-select-root.is-static {
  cursor: default;
}

.version-select-root.is-static .combobox-inner {
  pointer-events: none;
}

.upload-actions {
  display: flex;
  gap: 6px;
}

.mini-upload-btn {
  flex: 1;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  height: 24px;
  font-size: 10px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s;
}

.mini-upload-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mini-upload-btn.highlight-btn {
  border-color: rgba(41, 204, 73, 0.4);
  color: var(--accent-solid);
  background: rgba(41, 204, 73, 0.05);
}

.mini-upload-btn.highlight-btn:hover {
  background: rgba(41, 204, 73, 0.1);
}

.orientation-modes {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  display: none;
}

.custom-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  display: inline-block;
  position: relative;
  transition: border-color 0.2s;
}

.radio-label input[type="radio"]:checked + .custom-radio {
  border-color: var(--accent-solid);
}

.radio-label input[type="radio"]:checked + .custom-radio::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-solid);
}

.radio-text {
  font-size: 11px;
  color: var(--text-secondary);
}

/* BOTTOM AREA: Text Prompt Editor */
.panel-prompt-skeleton__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
}

.prompt-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.-prompt-editor-container {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  flex: 1;
}

.prompt-textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  resize: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  outline: none;
}

.prompt-textarea::placeholder {
  color: var(--text-muted);
}

.prompt-operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid var(--border-color);
  background-color: rgba(0, 0, 0, 0.2);
}

/* Multi-shot mode toggle switch */
.storyboard-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storyboard-btn-group.hidden {
  display: none !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #313336;
  border-radius: 9px;
  transition: .2s;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  transition: .2s;
}

.switch input:checked + .switch-slider {
  background-color: var(--accent-solid);
}

.switch input:checked + .switch-slider:before {
  transform: translateX(14px);
  background-color: #000;
}

.toggle-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
}

.custom-multi-link {
  font-size: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

.custom-multi-link:hover {
  color: var(--accent-solid);
}

/* Motion Mode guidelines text description */
.motion-guidelines-desc {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 80%;
}

.motion-guidelines-desc.hidden {
  display: none !important;
}

.motion-guidelines-desc .link-span,
.motion-guidelines-desc .guide-link {
  color: var(--accent-solid);
  text-decoration: none;
  cursor: pointer;
}

.upload-note {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-solid);
  text-align: center;
}

/* Helpers icons on right of prompt operation */
.right-operations {
  display: flex;
  gap: 8px;
}

.helper-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.helper-icon-btn svg {
  width: 16px;
  height: 16px;
}

.helper-icon-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   BOTTOM ACTION CONTAINER
   ========================================================================== */

.bottom-button {
  height: 76px;
  border-top: 1px solid var(--border-color);
  padding: 16px 20px 24px;
}

.setting-and-generate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.placeholder {
  display: flex;
  align-items: center;
}

.setting-collect-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bottom Settings Selector Button */
.setting-select {
  height: 36px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.setting-select:hover {
  border-color: var(--border-hover);
  background-color: rgba(255, 255, 255, 0.07);
}

.dropdown-chevron-mini {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

/* Audio Switch pill toggle button */
.setting-switch {
  height: 36px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.setting-switch:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.setting-switch.inactive {
  opacity: 0.6;
}

.switch-icon {
  color: var(--text-secondary);
}

.switch-check {
  font-size: 10px;
  color: var(--accent-solid);
  display: inline-block;
  margin-left: 2px;
  transition: opacity 0.2s;
}

.switch-check.hidden {
  opacity: 0;
}

/* Primary generate button */
.bottom-pay {
  width: 160px;
}

.generate-btn {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-gradient);
  border: none;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bezel-shadow);
  transition: all 0.2s ease;
}

.generate-btn:hover {
  opacity: 0.95;
  box-shadow: var(--bezel-shadow), 0 0 12px var(--accent-glow);
}

.generate-btn:active {
  transform: scale(0.98);
}


/* ==========================================================================
   RIGHT CONTENT CONTAINER (ASSETS & MOTION LIBRARY)
   ========================================================================== */

.history-stream {
  flex: 1;
  height: 100%;
  background-color: var(--bg-color);
  position: relative;
  overflow: hidden;
}

.content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.content-container.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.content-container.active-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 1. ASSETS PANEL */
.assets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.assets-header h3 {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

.assets-count {
  font-size: 12px;
  color: var(--text-muted);
}

.sign-in-to-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.chat-bubble-illustration {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
}

.bubble-svg {
  width: 100%;
  height: 100%;
}

.signin-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.signin-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.signin-btn-main {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  height: 38px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.signin-btn-main:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary);
}

/* Assets Dynamic Grid */
.assets-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* Asset Card Item */
.asset-card {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  aspect-ratio: 9/12;
  transition: transform 0.2s, border-color 0.2s;
}

.asset-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-solid);
}

/* Loading status style inside card */
.asset-loading-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.4);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-solid);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-text {
  font-size: 11px;
  color: var(--accent-solid);
  font-weight: 500;
}

.loading-prompt {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}

/* Finished Simulated Video Style */
.asset-video-wrapper {
  position: relative;
  flex: 1;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mock-video-canvas {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1b3a24 0%, #0d0d0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mock-video-canvas::after {
  content: '\25B6';
  font-size: 24px;
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(0, 0, 0, 0.6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  transition: all 0.2s;
}

.asset-card:hover .mock-video-canvas::after {
  background-color: var(--accent-solid);
  color: #000;
  transform: scale(1.05);
}

.asset-info {
  padding: 10px;
  background: var(--panel-bg);
}

.asset-prompt {
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-meta {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   2. MOTION LIBRARY PANEL
   ========================================================================== */

.motion-library-header {
  margin-bottom: 20px;
}

.motion-library-header .title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.motion-library-header h3 {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

.close-library-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.close-library-btn:hover {
  color: var(--text-primary);
}

.motion-library-tabs {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.lib-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  padding-bottom: 8px;
}

.lib-tab.active {
  color: var(--text-primary);
  font-weight: 600;
}

.lib-tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-solid);
}

.motion-library-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 20px;
}

.motion-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.motion-thumb {
  aspect-ratio: 3/4;
  border-radius: 8px;
  background-color: #1a1a1a;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.motion-card:hover .motion-thumb {
  border-color: var(--accent-solid);
  transform: translateY(-2px);
}

/* Beautiful simulated thumbnails for Motion Presets using styling gradients */
.thumb-chinese {
  background: linear-gradient(135deg, #3d1b1c 0%, #0d0d0d 100%);
}
.thumb-baby {
  background: linear-gradient(135deg, #1b2f3d 0%, #0d0d0d 100%);
}
.thumb-color {
  background: linear-gradient(135deg, #3d3b1b 0%, #0d0d0d 100%);
}
.thumb-overdrive {
  background: linear-gradient(135deg, #2b1b3d 0%, #0d0d0d 100%);
}
.thumb-expression {
  background: linear-gradient(135deg, #1b3d32 0%, #0d0d0d 100%);
}
.thumb-nezha {
  background: linear-gradient(135deg, #3d251b 0%, #0d0d0d 100%);
}
.thumb-heart {
  background: linear-gradient(135deg, #3d1b32 0%, #0d0d0d 100%);
}
.thumb-motorcycle {
  background: linear-gradient(135deg, #232d28 0%, #0d0d0d 100%);
}
.thumb-subject {
  background: linear-gradient(135deg, #28232d 0%, #0d0d0d 100%);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.2s;
}

.motion-card:hover .play-overlay {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
}

.play-overlay svg {
  color: var(--text-primary);
  transform: scale(0.9);
  transition: transform 0.2s;
}

.motion-card:hover .play-overlay svg {
  transform: scale(1.1);
  color: var(--accent-solid);
}

.badge-hot {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
}

.motion-title {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motion-card:hover .motion-title {
  color: var(--accent-solid);
}


/* ==========================================================================
   FLOATING POPUP DIALOGS (VERSION CHOOSE, SETTINGS DIALOGS)
   ========================================================================== */

/* 1. Version listbox selector popup */
.popup-dropdown {
  position: fixed;
  background-color: #17181c;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 520px;
  box-shadow: var(--popover-shadow);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 500;
}

.popup-dropdown.active {
  display: flex;
}

.version-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.version-option:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.version-option.active {
  background-color: rgba(41, 204, 73, 0.08);
}

.version-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.version-option.is-disabled:hover {
  background-color: transparent;
}

.version-option.is-disabled .tag-new {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.version-option-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.model-badge-circle.small {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.option-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.option-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.option-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.option-desc {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkmark {
  color: var(--accent-solid);
  font-size: 12px;
  display: none;
}

.version-option.active .checkmark {
  display: inline;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 4px 0;
}

.more-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.more-options-row:hover {
  color: var(--text-primary);
}

/* 2. Aspect/Setting popover */
.settings-popover {
  position: fixed;
  background-color: rgba(23, 24, 28, 0.96);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 350px;
  box-shadow: var(--popover-shadow);
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 16px;
  z-index: 500;
  backdrop-filter: blur(10px);
}

.settings-popover.active {
  display: flex;
}

.popover-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.options-pills {
  display: flex;
  gap: 8px;
}

.pill-btn {
  flex: 1;
  height: 28px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
}

.pill-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.pill-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.vip-tag {
  position: absolute;
  top: -6px;
  right: -2px;
  background-color: var(--gold-vip);
  color: #000;
  font-size: 7px;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 4px;
  transform: scale(0.9);
}

/* Slider Custom Styles */
.slider-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-value-display {
  font-size: 12px;
  color: var(--accent-solid);
  font-weight: 600;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-limit {
  font-size: 10px;
  color: var(--text-muted);
}

.custom-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: #313336;
  border-radius: 2px;
  outline: none;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Ratio cards selection styles */
.ratio-cards {
  display: flex;
  gap: 10px;
}

.ratio-card {
  flex: 1;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 10px;
  transition: all 0.2s;
}

.ratio-card:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.ratio-card.active {
  border-color: var(--accent-solid);
  color: var(--accent-solid);
  background: rgba(41, 204, 73, 0.03);
}

.ratio-rect {
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background: transparent;
}

.r16-9 {
  width: 24px;
  height: 14px;
}

.r1-1 {
  width: 16px;
  height: 16px;
}

.r9-16 {
  width: 14px;
  height: 24px;
}

/* ==========================================================================
   XiaoYang overrides for -clone (only what we use)
   ========================================================================== */
.hidden { display: none !important; }
.muted-tip { color: var(--text-muted); font-size: 12px; margin-top: 8px; }
.cost-tag { color: var(--accent-solid); font-weight: 600; font-size: 13px; margin-right: 12px; align-self: center; }
.prompt-input-row { width: 100%; padding: 12px 14px; }
.prompt-input { width: 100%; min-height: 80px; resize: vertical; background: transparent; border: none; outline: none; color: var(--text-primary); font-family: inherit; font-size: 14px; }
.prompt-counter {
  margin-top: 6px;
  text-align: right;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.prompt-counter.warn { color: #f0b84a; }
.prompt-counter.error { color: #ff6b6b; }
.upload-box-dashed { cursor: pointer; }
.upload-box-dashed.has-file { border-style: solid; border-color: var(--accent-solid); }
.upload-box-dashed .preview-img, .upload-box-dashed .preview-video { max-width: 100%; max-height: 220px; border-radius: 10px; object-fit: contain; }
.upload-box-dashed .progress { width: 100%; height: 3px; background: rgba(255,255,255,.05); margin-top: 8px; border-radius: 999px; overflow: hidden; }
.upload-box-dashed .progress > span { display:block; height:100%; background: var(--accent-gradient); width: 0%; transition: width .2s; }
.toast-host { position: fixed; bottom: 24px; right: 24px; display:flex; flex-direction: column; gap: 8px; z-index: 999; }

.top1-reward-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(16px);
}
.top1-reward-modal.hidden { display: none; }
.top1-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.top1-reward-card {
  position: relative;
  z-index: 1;
  width: min(550px, 100%);
  padding: 48px 34px 34px;
  text-align: center;
  border-radius: 24px;
  border: 2px solid rgba(234, 179, 8, 0.45);
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 44px rgba(234, 179, 8, 0.24), inset 0 0 24px rgba(234, 179, 8, 0.12);
  overflow: hidden;
  transform: scale(0.72);
  opacity: 0;
  animation: top1CardEntrance 1.15s cubic-bezier(.18,.89,.32,1.28) forwards;
}
.top1-reward-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: rotate(45deg);
  animation: top1Shimmer 3s linear infinite;
  pointer-events: none;
}
.top1-badge-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  margin-bottom: 22px;
}
.top1-crown {
  position: absolute;
  top: -36px;
  color: #fef08a;
  font-size: 46px;
  text-shadow: 0 0 18px rgba(250, 204, 21, .75);
  animation: top1FloatCrown 2.4s ease-in-out infinite;
}
.top1-badge {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  color: #fff;
  font-family: Outfit, Inter, sans-serif;
  font-size: 56px;
  font-weight: 800;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 10px 30px rgba(217,119,6,.5);
  animation: top1PulseBadge 1.8s ease-in-out infinite alternate;
}
.top1-reward-card h2 {
  margin: 0 0 10px;
  color: #fcd34d;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(32px, 7vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(252,211,77,.55);
}
.top1-subtitle {
  margin: 0 0 24px;
  color: #cbd5e1;
  font-size: 18px;
}
.top1-credit-box {
  margin: 0 auto 26px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(234,179,8,.34);
  background: linear-gradient(90deg, rgba(234,179,8,.1), rgba(234,179,8,.22), rgba(234,179,8,.1));
}
.top1-credit-box span {
  display: block;
  margin-bottom: 8px;
  color: #fde047;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.top1-credit-box strong {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(44px, 10vw, 64px);
  font-weight: 900;
  text-shadow: 0 0 22px rgba(234,179,8,.85), 0 0 44px rgba(234,179,8,.42);
}
.top1-credit-box em {
  color: #fcd34d;
  font-size: 22px;
  font-style: normal;
}
.top1-claim-btn {
  border: 0;
  border-radius: 999px;
  padding: 16px 34px;
  min-width: 240px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(90deg, #eab308, #d97706);
  box-shadow: 0 6px 20px rgba(217,119,6,.44);
  font-family: Outfit, Inter, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.top1-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(217,119,6,.62), 0 0 18px rgba(234,179,8,.7);
}
.top1-claim-btn:disabled {
  cursor: wait;
  opacity: .78;
}
.top1-coin {
  position: fixed;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5100;
  color: #78350f;
  font-size: 13px;
  font-weight: 900;
  background: radial-gradient(circle, #fde047 0%, #d97706 100%);
  box-shadow: inset 0 0 5px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.28);
}
.top1-coin::before { content: "C"; }
@keyframes top1CardEntrance {
  from { transform: scale(.56); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes top1Shimmer {
  from { translate: -40% 0; }
  to { translate: 40% 0; }
}
@keyframes top1PulseBadge {
  from { transform: scale(1); box-shadow: 0 0 18px rgba(234,179,8,.48); }
  to { transform: scale(1.06); box-shadow: 0 0 32px rgba(234,179,8,.8); }
}
@keyframes top1FloatCrown {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
}
.toast { background: var(--surface-bg); border: 1px solid var(--border-color); padding: 12px 16px; border-radius: 12px; min-width: 240px; box-shadow: var(--popover-shadow); color: var(--text-primary); font-size: 13px; }
.toast.success { border-color: var(--accent-solid); }
.toast.error { border-color: #ff4d4f; }
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 12px; align-items: start; align-content: start; }
.history-stream { overflow-y: auto; }
#assetsPanel { overflow-y: auto; }
#assetsGrid { overflow: visible; padding-bottom: 48px; }
/* XiaoYang override:  clone .asset-card co aspect-ratio:9/12 + overflow:hidden, can deo lai */
.asset-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; aspect-ratio: auto; overflow: visible; display: block; }
.asset-card .thumb { background: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding-bottom: 0; aspect-ratio: 9 / 16; overflow: hidden; position: relative; }
.asset-card .thumb-error-message {
  color: #ff7d7f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding: 10px;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
}
.asset-card .thumb video, .asset-card .thumb img { width: 100%; height: auto; display: block; border-radius: 8px; background: #000; }
.asset-card .thumb .lazy-video { width: 100%; height: 100%; }
.asset-card .thumb .lazy-video video,
.asset-card .thumb .lazy-video img.lazy-video-poster {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.asset-card .thumb .lazy-video video {
  position: absolute;
  inset: 0;
  display: block;
}
.asset-card .info { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.asset-card .status { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.asset-card .status.QUEUED, .asset-card .status.PENDING, .asset-card .status.PROCESSING { background: rgba(230,162,60,.16); color: var(--gold-vip); }
.asset-card .status.SUCCESS { background: rgba(41,204,73,.16); color: var(--accent-solid); }
.asset-card .status.FAIL { background: rgba(255,77,79,.16); color: #ff7d7f; }
.task-4k-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(28, 184, 255, .16);
  color: #22b8ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: middle;
}
.asset-card .meta { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.asset-card .actions { margin-top: 8px; display: flex; gap: 6px; }
.asset-card .btn-mini { flex:1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; text-decoration: none; text-align: center; font-weight: 500; }
.asset-card .btn-mini.primary { background: var(--accent-gradient); color: #051b07; border-color: transparent; }
.asset-card .mobile-download-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 18;
  min-height: 28px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #051b07;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(116,255,82,.48), 0 8px 20px rgba(0,0,0,.45);
}
.asset-card .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--accent-solid); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.asset-card { cursor: pointer; }
.asset-card .actions, .asset-card .actions * { cursor: auto; }
.task-detail-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 28px;
  background: var(--bg-color);
  z-index: 20;
  padding: 28px 32px;
  overflow: hidden;
}
.task-detail-view.hidden { display: none !important; }
.detail-back {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
}
.detail-stage {
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 70px 20px 28px;
  overflow: hidden;
}
.detail-stage video,
.detail-stage img {
  width: min(100%, 860px);
  max-width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: 4px;
  background: #000;
  object-fit: contain;
}
.detail-stage .lazy-video {
  width: min(56vh, 420px);
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 140px);
}
.lazy-video {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 8px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.lazy-video-detail {
  aspect-ratio: 9 / 16;
}
.lazy-video-card {
  aspect-ratio: 9 / 16;
}
.result-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  border-radius: 8px;
}
.result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.result-image-detail {
  width: min(100%, 860px);
  max-width: 100%;
  max-height: calc(100vh - 140px);
  aspect-ratio: 9 / 16;
}
.result-image-card {
  aspect-ratio: 9 / 16;
}
.lazy-video-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #000;
  filter: none;
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
}
.lazy-video-card .lazy-video-poster {
  object-fit: contain;
  object-position: center center;
}
.lazy-video-poster.empty {
  background: linear-gradient(180deg, #3a3a3a, #050505);
}
.lazy-video-play {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  display: grid;
  place-items: center;
  font-size: 17px;
  padding-left: 2px;
}
.lazy-video-card .lazy-video-play {
  left: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.lazy-video-loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}
.lazy-video-loader::after {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  animation: spin .85s linear infinite;
}
.lazy-video-card .lazy-video-loader::after {
  width: 34px;
  height: 34px;
  border-width: 4px;
}
.lazy-video.is-waiting::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,229,255,.11), rgba(140,0,255,.07) 28%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.96) 100%),
    rgba(9,10,15,.84);
  backdrop-filter: blur(6px) saturate(78%) contrast(112%);
  box-shadow: inset 0 0 58px rgba(0,0,0,.9);
  pointer-events: none;
}
.lazy-video.is-waiting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 18% 88%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 70%, rgba(255,255,255,.34) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 92%, rgba(0,229,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 66%, rgba(255,255,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 44%, rgba(140,0,255,.34) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 34%, rgba(255,255,255,.24) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  opacity: .78;
  filter: drop-shadow(0 0 9px rgba(255,255,255,.24));
  animation: renderPixies 6s linear infinite;
  pointer-events: none;
}
.lazy-video-render-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(68%, 170px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  perspective: 520px;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(0,229,255,.22));
}
.render-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.render-orbit:nth-child(1) {
  border-top-color: #00e5ff;
  border-bottom-color: #00e5ff;
  animation: renderSpin3dA 3s linear infinite;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.62));
}
.render-orbit:nth-child(2) {
  border-left-color: #8c00ff;
  border-right-color: #8c00ff;
  animation: renderSpin3dB 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(140,0,255,.62));
}
.render-orbit:nth-child(3) {
  inset: 10%;
  border-top-color: rgba(255,255,255,.96);
  border-right-color: rgba(255,255,255,.28);
  animation: renderSpin3dC 2.15s cubic-bezier(.68,-.35,.265,1.35) infinite;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.48));
}
.render-core {
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(9,10,15,.82), rgba(9,10,15,.18) 70%, transparent);
  color: rgba(255,255,255,.82);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(255,255,255,.55);
  animation: renderPulse 1.6s ease-in-out infinite;
}
.lazy-video-card .lazy-video-render-effect {
  width: min(72%, 118px);
}
.lazy-video-card .render-core {
  font-size: 18px;
  letter-spacing: 0;
}
.lazy-video-card .render-orbit {
  border-width: 1.5px;
}
.lazy-video[data-loading="1"] .lazy-video-loader {
  display: grid;
}
.lazy-video[data-loading="1"] .lazy-video-render-effect,
.lazy-video[data-loaded="1"] .lazy-video-render-effect {
  display: none;
}
.lazy-video.is-waiting .lazy-video-poster {
  opacity: .12;
  filter: blur(9px) saturate(48%) contrast(112%);
  transform: scale(1.08);
  animation: waitPosterDistort 5.2s ease-in-out infinite;
}
.lazy-video[data-loaded="1"].is-waiting::before,
.lazy-video[data-loaded="1"].is-waiting::after {
  display: none;
}
@keyframes renderPixies {
  0% { opacity: .42; transform: translateY(18px); background-position: 0 0; }
  50% { opacity: .8; transform: translateY(-10px); background-position: 18px -44px; }
  100% { opacity: .42; transform: translateY(-28px); background-position: 34px -88px; }
}
@keyframes renderSpin3dA {
  0% { transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes renderSpin3dB {
  0% { transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(60deg) rotateZ(360deg); }
}
@keyframes renderSpin3dC {
  0% { transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg); }
  100% { transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg); }
}
@keyframes renderPulse {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes waitPosterDistort {
  0%, 100% { transform: scale(1.1) translate3d(0,0,0) skew(0deg,0deg); }
  34% { transform: scale(1.13) translate3d(-1.4%, .7%, 0) skew(.35deg,-.2deg); }
  68% { transform: scale(1.12) translate3d(1.2%, -.6%, 0) skew(-.25deg,.25deg); }
}
.lazy-video video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #000;
  opacity: 0;
}
.lazy-video video.lazy-video-preload {
  pointer-events: none;
}
.lazy-video video.lazy-video-poster-video {
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
.lazy-video video.ready {
  z-index: 5;
  opacity: 1;
}
.lazy-video[data-loaded="1"] .lazy-video-poster,
.lazy-video[data-loaded="1"] .lazy-video-poster-video,
.lazy-video[data-loaded="1"] .lazy-video-play,
.lazy-video[data-loaded="1"] .lazy-video-loader {
  display: none;
}
.detail-stage .stage-placeholder {
  width: min(520px, 80%);
  min-height: 280px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-secondary);
  text-align: center;
}
.detail-stage .stage-placeholder .error-guidance {
  max-width: 440px;
  color: #ff7d7f;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}
.detail-sidebar {
  border-left: 1px solid var(--border-color);
  padding-left: 28px;
  overflow-y: auto;
  min-width: 0;
}
.detail-sidebar h3 { margin: 0; font-size: 16px; }
.detail-divider { height: 1px; background: var(--border-color); margin: 14px 0 24px; }
.detail-block { margin-bottom: 18px; }
.detail-label { display: block; color: var(--text-secondary); font-size: 12px; margin-bottom: 8px; }
.detail-block b { font-size: 14px; }
.detail-block p { margin: 0; line-height: 1.5; color: var(--text-primary); font-size: 14px; white-space: pre-wrap; }
.detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.detail-meta-grid div { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.03); min-width: 0; }
.detail-meta-grid span { display: block; color: var(--text-muted); font-size: 11px; margin-bottom: 5px; }
.detail-meta-grid b { display: block; font-size: 12px; overflow-wrap: anywhere; }
.ingredient-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70px;
  grid-template-rows: 70px;
  gap: 10px;
  width: 100%;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
}
.ingredient-item {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  max-width: 70px;
  max-height: 70px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-bg);
  display: block;
  position: relative;
  overflow: hidden;
}
.ingredient-item > img,
.ingredient-item > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  max-width: none;
  max-height: none;
}
.ingredient-missing {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: #ff9a9c;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.ingredient-pop {
  position: fixed;
  left: 16px;
  top: 16px;
  transform: scale(.96);
  width: min(220px, calc(100vw - 32px));
  height: min(220px, calc(100vh - 32px));
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  background: var(--surface-bg);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 9999;
  box-shadow: var(--popover-shadow);
}
.ingredient-pop::before { display: none; }
.ingredient-pop img,
.ingredient-pop video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
  background: #000;
}
.ingredient-pop .ingredient-missing {
  border-radius: 7px;
  font-size: 14px;
  background: #141414;
}
.ingredient-pop.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; clear: both; }
.detail-actions .btn-mini { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none; font-weight: 700; }
.detail-actions .btn-mini.primary { background: var(--accent-gradient); color: #051b07; border-color: transparent; font-weight: 700; }
.btn-mini.report { border-color: rgba(255, 191, 87, 0.55); color: #ffbf57; }
.btn-mini.report:disabled { opacity: .55; cursor: default; }
@media (max-width: 980px) {
  .task-detail-view { grid-template-columns: 1fr; overflow-y: auto; }
  .detail-sidebar { border-left: 0; border-top: 1px solid var(--border-color); padding-left: 0; padding-top: 20px; }
}
.bottom-pay { display: flex; align-items: center; }
.banner-sub { font-size: 10px; opacity: .7; }


/* ==========================================================================
   Auth pages (login + redeem) - match  theme
   ========================================================================== */
.auth-body {
  width: 100vw; height: 100vh; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-color); padding: 32px 20px;
}
.auth-shell { width: 100%; display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.auth-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.auth-card h1 { margin: 0; font-size: 24px; font-weight: 700; text-align: center; }
.auth-sub { margin: 0; color: var(--text-secondary); text-align: center; font-size: 13px; }
.auth-tabs {
  display: flex; gap: 6px; padding: 4px;
  background: var(--surface-bg); border-radius: 12px; margin: 8px 0 4px;
}
.auth-tab {
  flex: 1; background: transparent; border: none; padding: 10px;
  border-radius: 10px; color: var(--text-muted); font-weight: 600;
  cursor: pointer; font-family: inherit; font-size: 13px; transition: all .15s;
}
.auth-tab.active { background: rgba(41,204,73,0.12); color: var(--accent-solid); }
.auth-label {
  display: block; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em; margin-top: 4px;
}
.auth-input {
  width: 100%; background: var(--surface-bg);
  border: 1px solid var(--border-color); border-radius: 10px;
  padding: 11px 14px; outline: none; color: var(--text-primary);
  font-family: inherit; font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.auth-input:focus { border-color: var(--accent-solid); background: var(--bg-color); }
.auth-submit {
  width: 100%; height: 44px; margin-top: 8px;
  border-radius: 12px; cursor: pointer; border: none;
  font-weight: 700; font-size: 14px; color: #051b07;
  background: var(--accent-gradient);
}
.auth-submit:hover { filter: brightness(1.05); }
.auth-foot { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.auth-back {
  display: inline-block; margin-top: 4px; text-align: center;
  color: var(--text-secondary); text-decoration: none; font-size: 13px;
  border: 1px solid var(--border-color); padding: 8px 14px;
  border-radius: 10px; align-self: center;
}
.auth-back:hover { color: var(--text-primary); border-color: var(--accent-solid); }


/* Disabled length pill (audio mismatch) */
.pill-btn.is-disabled { opacity: 0.35; cursor: not-allowed; position: relative; }
.pill-btn.is-disabled::after {
  content: "audio"; position: absolute; right: -4px; top: -8px;
  background: rgba(255,77,79,.18); color: #ff7d7f;
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}


/* Audio switch / settings disabled state */
.setting-switch.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.setting-switch.disabled .switch-text { text-decoration: line-through; }
.setting-switch.disabled .switch-check { display: none; }
.setting-select.is-locked {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.6);
}


/* Audio switch disabled state (modal unsupported audio o duration nay) */
.setting-switch.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.setting-switch.disabled .switch-check { display: none; }
.setting-switch.disabled::after {
  content: "unsupported";
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,77,79,.18);
  color: #ff7d7f;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.setting-collect-box[style*="none"] .setting-switch.disabled::after {
  content: none;
}


/* XiaoYang: 2-column workspace layout ( clone CSS thieu rule cho .main-content trong) */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.main-content.video {
  flex-direction: column;
}
.generator-frame {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.property-frame {
  flex: 1.4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  position: relative;
  height: 100%;
  overflow-y: auto;
}
.history-stream {
  flex: 1;
  min-width: 320px;
  height: 100%;
  background: var(--bg-color);
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .generator-frame { flex-direction: column; }
  .property-frame, .history-stream { flex: none; width: 100%; min-height: 0; }
}


/* XiaoYang polish: sidebar credit + Generate button + version badge */
.credit-fire {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,138,76,0.10);
  border: 1px solid rgba(255,138,76,0.25);
  border-radius: 14px;
  color: #ffb185;
  font-weight: 700;
  font-size: 12px;
}
.credit-fire svg { flex-shrink: 0; }
.upgrade-btn {
  width: 56px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all .15s;
}
.upgrade-btn:hover { color: var(--text-primary); border-color: var(--accent-solid); }
.user-mini {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generate button - pill with fire icon and number inside */
.generate-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 22px !important;
  height: 40px;
  font-weight: 700;
  font-size: 14px;
}
.generate-btn .btn-fire { flex-shrink: 0; }
.generate-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Version combo: tighten spacing */
.combo .model-badge-circle {
  background: linear-gradient(135deg, #29cc49 0%, #74ff52 100%);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 13px;
}
.tag-new {
  display: inline-block;
  background: linear-gradient(135deg, #29cc49, #74ff52);
  color: #0a0a0a;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: .04em;
  vertical-align: middle;
}


/* === Sidebar size match  exactly === */
.sidebar { width: 76px; padding: 14px 0; gap: 4px; }
.sidebar-logo { width: 36px; height: 36px; margin-bottom: 14px; }
.sidebar-nav { gap: 6px; }
.nav-item { width: 60px; height: 56px; padding: 6px 4px; border-radius: 10px; font-size: 10px; }
.nav-icon { width: 20px; height: 20px; }
.nav-item span { font-size: 10px; }
.sidebar-footer { gap: 8px; padding: 0 6px 4px; }
.credit-fire { padding: 4px 8px; border-radius: 12px; font-size: 11px; gap: 4px; }
.credit-fire svg { width: 14px; height: 14px; }
.upgrade-btn { width: 60px; height: 24px; font-size: 10px; border-radius: 12px; }
.user-mini { font-size: 9px; max-width: 64px; }


/* === Tighten property panel to  proportions === */
.property-frame { flex: 0 0 610px; max-width: 610px; padding: 16px 18px; }
.history-stream { flex: 1; }
@media (max-width: 1280px) { .property-frame { flex: 0 0 540px; max-width: 540px; } }

.top-nav-panel { padding: 4px 6px 14px; }
.tabs.size-small { gap: 4px; }
.tabs.size-small .tab-item { font-size: 12px; padding: 6px 8px; white-space: nowrap; }

.panel-box { gap: 10px; display: flex; flex-direction: column; }
.combo.version-select-root { padding: 10px 14px; min-height: 56px; }
.combo .model-badge-circle { width: 36px; height: 36px; font-size: 12px; }
.combo .model-name { font-size: 13px; }
.combo .model-desc { font-size: 11px; line-height: 1.35; }

.panel-prompt-skeleton { padding: 10px; gap: 10px; }
.upload-frame-container { padding: 0; }
.upload-box-dashed { min-height: 160px; max-height: 220px; padding: 16px; }
.upload-box-dashed .upload-icon { width: 28px; height: 28px; }
.upload-box-dashed .upload-text { font-size: 12px; }
.upload-box-half .upload-box-dashed { min-height: 150px; }

.prompt-input-row { padding: 8px 12px; }
.prompt-input { min-height: 100px; max-height: 160px; font-size: 13px; }

.bottom-button { padding: 10px 4px 4px; }
.setting-select, .setting-switch { height: 36px; padding: 0 12px; font-size: 12px; }
.generate-btn { height: 36px !important; padding: 0 18px !important; font-size: 13px !important; }

/* History panel */
.assets-header { padding: 14px 18px; }
.assets-header h3 { font-size: 16px; }
.assets-grid { padding: 14px; gap: 12px; }

.settings-popover .popover-section.hidden { display: none; }
.settings-popover .ratio-pills { display: flex; flex-wrap: wrap; max-width: 260px; }
.settings-popover .ratio-pills .pill-btn { min-width: 56px; }

.ai-plus-mode-switch,
.enhance-type-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.upload-frame-container > .ai-plus-mode-switch {
  display: none;
}
.ai-plus-mode-switch .pill-btn {
  flex: 1;
  justify-content: center;
}
.enhance-type-switch label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
}
.enhance-type-switch input {
  accent-color: var(--accent-solid);
}
.setting-switch[data-on="1"] {
  border-color: rgba(41, 204, 73, .55);
  box-shadow: 0 0 14px rgba(41, 204, 73, .18);
}


/* === Upload preview match : fill the box === */
.upload-box-dashed.has-file {
  padding: 0;
  overflow: hidden;
  position: relative;
  background: var(--surface-bg);
  min-height: 220px;
}
.upload-box-dashed.has-file .upload-icon,
.upload-box-dashed.has-file .upload-text {
  display: none;
}
.upload-box-dashed .preview-img,
.upload-box-dashed .preview-video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.upload-box-dashed.has-file .name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.upload-box-dashed.has-file:hover::after {
  content: \"Click de doi anh\";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 8px;
  pointer-events: none;
}
.upload-box-half .upload-box-dashed.has-file { min-height: 200px; }
.upload-box-half .upload-box-dashed.has-file:hover::after { content: \"Click de doi\"; font-size: 11px; }


/* === Upload box: lock 9:16, fit (contain) entire image === */
.upload-frame-container .upload-box-dashed {
  aspect-ratio: 9 / 16;
  min-height: 0;
  max-height: 520px;
  width: 100%;
  margin: 0 auto;
  max-width: 320px;
}
.upload-box-dashed.has-file {
  padding: 0;
  overflow: hidden;
  background: #000;
}
.upload-box-dashed .preview-img,
.upload-box-dashed .preview-video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: #000;
  border-radius: 6px;
}
.upload-box-half .upload-box-dashed { max-width: 100%; aspect-ratio: 9 / 16; }


/* === Upload box: tu co theo anh upload, khong khoa ratio === */
.upload-frame-container .upload-box-dashed {
  aspect-ratio: auto !important;
  min-height: 220px;
  max-height: 520px;
  height: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-box-dashed.has-file {
  padding: 0;
  background: #000;
  overflow: hidden;
}
.upload-box-dashed .preview-img,
.upload-box-dashed .preview-video {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain !important;
  background: #000;
  border-radius: 6px;
  display: block;
}
.upload-box-half .upload-box-dashed.has-file {
  min-height: 200px;
}
.upload-box-half .upload-box-dashed .preview-img,
.upload-box-half .upload-box-dashed .preview-video {
  max-height: 320px;
}


/* === Upload box: -style fixed landscape window === */
.upload-frame-container .upload-box-dashed {
  aspect-ratio: 16 / 9 !important;
  width: 100%;
  max-width: none;
  height: auto !important;
  min-height: 0 !important;
  max-height: 240px !important;
  margin: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-bg);
}
.upload-box-dashed.has-file {
  background: #000;
  padding: 0;
  overflow: hidden;
}
.upload-box-dashed .preview-img,
.upload-box-dashed .preview-video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #000;
  border-radius: 6px;
  display: block;
}
/* Motion control: 2 box vuong nho hon */
.upload-box-half .upload-box-dashed {
  aspect-ratio: 1 / 1 !important;
  max-height: 200px !important;
}


/* Override credit-fire color to match new SVG (Kling-style green) */
.credit-fire {
  background: rgba(116, 255, 82, 0.10);
  border-color: rgba(116, 255, 82, 0.30);
  color: #b8ff8a;
}
.credit-fire svg { color: #74ff52; }


/* Sidebar/auth logo image */
.sidebar-logo .logo-img { width: 36px; height: 36px; object-fit: contain; display: block; }
.auth-logo .logo-img { display: block; margin: 0 auto; }


/* Logo image: bigger so the cat is recognizable */
.sidebar-logo { width: 56px; height: 56px; margin-bottom: 18px; }
.sidebar-logo .logo-img { width: 56px; height: 56px; object-fit: contain; }
.auth-logo .logo-img { width: 80px; height: 80px; }


/* Logo: scale up to match icons below */
.sidebar-logo { width: 64px !important; height: 64px !important; margin-bottom: 14px !important; }
.sidebar-logo .logo-img { width: 64px !important; height: 64px !important; }
.auth-logo .logo-img { width: 120px !important; height: 120px !important; }


/* Sidebar second brand image */
.sidebar-brand2 { width: 44px; height: 44px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.sidebar-brand2 .brand2-img { width: 44px; height: 44px; object-fit: contain; }


/* Redeem nav-item: always green-glow like credit fire icon */
a.nav-item[href="/redeem"] { color: var(--text-secondary); }
a.nav-item[href="/redeem"] svg.nav-icon {
  color: #74ff52;
  filter: drop-shadow(0 0 4px rgba(116, 255, 82, 0.55));
}
a.nav-item[href="/redeem"]:hover { color: var(--text-primary); }
a.nav-item[href="/redeem"]:hover svg.nav-icon {
  color: #99eb2f;
  filter: drop-shadow(0 0 6px rgba(116, 255, 82, 0.8));
}


/* === User profile widget (replaces credit-fire + logout) === */
.user-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 4px; }
.user-profile .avatar-container {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.user-profile .avatar-ring {
  position: absolute; inset: -4px;
  pointer-events: none;
}
.user-profile .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #29cc49 0%, #74ff52 100%);
  color: #051b07;
  font-weight: 800;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(116, 255, 82, 0.35);
  transition: transform .15s ease;
}
.user-profile .avatar-container:hover .avatar { transform: scale(1.05); }

.user-profile .point-box {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: rgba(116, 255, 82, 0.10);
  border: 1px solid rgba(116, 255, 82, 0.30);
  border-radius: 999px;
  color: #b8ff8a;
  font-size: 12px;
  font-weight: 700;
}
.user-profile .point-box svg { color: #74ff52; }
.user-profile .point-box .value { line-height: 1; }

.profile-menu {
  position: absolute;
  bottom: 12px; left: 84px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  box-shadow: var(--popover-shadow);
  display: none;
  z-index: 200;
}
.profile-menu.open { display: block; }
.profile-menu-email {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
  word-break: break-all;
}
.profile-menu-item {
  display: block; width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
}
.profile-menu-item:hover { background: var(--bg-color); color: var(--text-primary); }


/* === Upload box: Kling key-frames style === */
.upload-frame-container .upload-box-dashed {
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--surface-bg) !important;
  border: 1.5px dashed rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  position: relative;
  transition: border-color .15s, background .15s;
}
.upload-frame-container .upload-box-dashed:hover {
  border-color: var(--accent-solid) !important;
  background: rgba(41,204,73,0.04) !important;
}
.upload-frame-container .upload-box-dashed.drag {
  border-color: var(--accent-solid) !important;
  background: rgba(41,204,73,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(41,204,73,0.35), 0 0 24px rgba(41,204,73,0.12);
}
.upload-frame-container .upload-box-dashed .upload-icon {
  width: 24px !important;
  height: 24px !important;
  color: var(--text-secondary);
  opacity: 0.85;
}
.upload-frame-container .upload-box-dashed .upload-text {
  font-size: 13px !important;
  color: var(--text-secondary);
  font-weight: 500;
}
.upload-box-dashed.has-file {
  background: #000 !important;
  border-style: solid !important;
  border-color: var(--accent-solid) !important;
  padding: 0 !important;
}
.upload-box-dashed .preview-img,
.upload-box-dashed .preview-video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #000;
  border-radius: 8px;
  display: block;
}
/* Motion control: 2 box ngang (cung 140px) */
.upload-box-half .upload-box-dashed {
  aspect-ratio: auto !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
}


/* === Icons via <img> (svgrepo) - tinted with CSS filter === */
/* Default: light gray (text-secondary). Active/highlight: handled by parent. */
.nav-icon, .upload-icon, .switch-icon { display: inline-block; }
img.nav-icon { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(74%) sepia(8%) saturate(370%) hue-rotate(190deg) brightness(96%) contrast(85%); transition: filter .15s; }
img.upload-icon { width: 28px; height: 28px; filter: brightness(0) saturate(100%) invert(74%) sepia(8%) saturate(370%) hue-rotate(190deg) brightness(96%) contrast(85%); opacity: 0.85; }
img.switch-icon { width: 16px; height: 16px; filter: brightness(0) saturate(100%) invert(74%) sepia(8%) saturate(370%) hue-rotate(190deg) brightness(96%) contrast(85%); }

/* On hover / active in sidebar => green tint */
a.nav-item:hover img.nav-icon,
a.nav-item.active img.nav-icon {
  filter: brightness(0) saturate(100%) invert(80%) sepia(46%) saturate(2000%) hue-rotate(70deg) brightness(105%) contrast(94%);
}

a.nav-item[href^="http://zaloapp.com/"]:focus,
a.nav-item[href^="http://zaloapp.com/"]:focus-visible,
a.nav-item[href^="https://zalo.me/"]:focus,
a.nav-item[href^="https://zalo.me/"]:focus-visible {
  outline: none;
}

/* Audio switch: green when active */
.setting-switch:not(.disabled) img.switch-icon { filter: brightness(0) saturate(100%) invert(74%) sepia(8%) saturate(370%) hue-rotate(190deg) brightness(96%) contrast(85%); }
.setting-switch[data-on="1"] img.switch-icon {
  filter: brightness(0) saturate(100%) invert(80%) sepia(46%) saturate(2000%) hue-rotate(70deg) brightness(105%) contrast(94%);
}


/* Version badge images */
.model-badge-img {
  width: 36px; height: 36px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.model-badge-img.small { width: 28px; height: 28px; border-radius: 7px; }


/* === Assets toolbar (Select / Select all / Delete / Cancel) === */
.assets-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.assets-header h3 { flex: 0 0 auto; }
.assets-reminder {
  flex: 1 1 520px;
  min-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: var(--accent-solid);
  font-size: 26px;
  font-weight: 800;
  line-height: 34px;
  opacity: 0.95;
  text-overflow: ellipsis;
}
.assets-toolbar { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; }
.toolbtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.toolbtn:hover { color: var(--text-primary); border-color: var(--accent-solid); }
.toolbtn.select-spotlight {
  color: #071b0c;
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 0 rgba(50, 255, 114, .55), 0 0 18px rgba(50, 255, 114, .45);
  animation: selectPulse 1.45s ease-in-out infinite;
}
.toolbtn.select-spotlight:hover {
  color: #031107;
  box-shadow: 0 0 0 7px rgba(50, 255, 114, .14), 0 0 24px rgba(50, 255, 114, .62);
}
@keyframes selectPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(50, 255, 114, .5), 0 0 16px rgba(50, 255, 114, .42); }
  50% { box-shadow: 0 0 0 8px rgba(50, 255, 114, 0), 0 0 28px rgba(50, 255, 114, .72); }
}
.toolbtn.danger { color: #ff7d7f; border-color: rgba(255,77,79,0.35); }
.toolbtn.danger:hover { background: rgba(255,77,79,0.10); border-color: #ff5e7a; }
.toolbtn.hidden { display: none; }
.toolbtn .toolicon { width: 14px; height: 14px; filter: brightness(0) saturate(100%) invert(56%) sepia(80%) saturate(2300%) hue-rotate(330deg) brightness(101%) contrast(101%); }

/* Selection mode card overlay */
.asset-card { position: relative; }
.asset-card .select-check {
  position: absolute; top: 12px; left: 12px;
  min-width: 74px;
  height: 34px;
  padding: 0 10px 0 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.78);
  border: 2px solid rgba(255,255,255,0.78);
  display: none;
  z-index: 20;
  cursor: pointer;
  align-items: center; justify-content: center;
  gap: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  font-family: inherit;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.asset-card .select-check .select-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 13px;
  line-height: 1;
}
.asset-card .select-check .select-word {
  line-height: 1;
}
.assets-grid.select-mode .asset-card .select-check { display: flex; }
.asset-card.selected .select-check {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #051b07;
  box-shadow: 0 0 0 4px rgba(50,255,114,.18), 0 12px 24px rgba(50,255,114,.22);
}
.asset-card.selected .select-check .select-mark {
  border-color: #051b07;
  color: #051b07;
}
.assets-grid.select-mode .asset-card { cursor: pointer; }
.assets-grid.select-mode .asset-card.selected { outline: 2px solid var(--accent-solid); outline-offset: -1px; }


/* === Redeem page (inside main-content shell) === */
.redeem-wrap {
  display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); gap: 18px; align-items: start; justify-content: center;
  padding: 40px 20px; min-height: 100%;
}
.redeem-wrap.single { grid-template-columns: minmax(0, 480px); }
@media (max-width: 980px) { .redeem-wrap { grid-template-columns: 1fr; } }
.redeem-card {
  width: 100%; max-width: 480px;
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.redeem-card h1 { margin: 0; font-size: 22px; font-weight: 700; }
.redeem-card .auth-sub { margin: 0; color: var(--text-secondary); font-size: 13px; }
.topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.topup-grid > div { background: rgba(255,255,255,.04); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.topup-label { display: block; color: var(--text-secondary); font-size: 11px; margin-bottom: 4px; }
.topup-grid b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.topup-code { color: var(--accent-solid); letter-spacing: .04em; }
.topup-qr { width: 180px; max-width: 100%; border-radius: 14px; border: 1px solid var(--border-color); align-self: center; }
.topup-qr.hidden { display: none; }
.topup-history { display: flex; flex-direction: column; gap: 8px; }
.topup-history-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 8px; color: var(--text-secondary); font-size: 12px; }
.topup-history-row b { color: var(--text-primary); }
.topup-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.topup-modal.hidden { display: none; }
.topup-modal-card { width: min(420px, 100%); background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--popover-shadow); position: relative; }
.topup-modal-card h2 { margin: 0; font-size: 20px; }
.topup-modal-card .topup-qr { width: 260px; align-self: center; }
.topup-modal-close { position: absolute; top: 12px; right: 12px; border: 1px solid var(--border-color); background: rgba(255,255,255,.05); color: var(--text-primary); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; }
.topup-modal-meta { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; font-size: 13px; }
.topup-modal-meta span { color: var(--text-secondary); }
.topup-modal-meta b { overflow-wrap: anywhere; }

/* Weekly top-up ranking */
.ranking-main {
  min-height: 100vh;
  overflow: auto;
}

.ranking-shell {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 40px 20px;
}

.ranking-card {
  width: min(920px, 100%);
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ranking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ranking-eyebrow {
  margin: 0 0 6px;
  color: var(--accent-solid);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ranking-card h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
}

.ranking-period {
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  background: rgba(255,255,255,.035);
}

.ranking-alert {
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 214, 77, .45);
  background: rgba(255, 214, 77, .08);
  color: #ff3b30;
  font-weight: 900;
  text-align: center;
  animation: rankingPrizeBlink 1s infinite alternate;
}

@keyframes rankingPrizeBlink {
  from {
    color: #ff2d20;
    text-shadow: 0 0 9px rgba(255,45,32,.55);
    border-color: rgba(255,45,32,.48);
  }
  to {
    color: #ffd84d;
    text-shadow: 0 0 12px rgba(255,216,77,.75);
    border-color: rgba(255,216,77,.72);
  }
}

.ranking-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 90px minmax(220px, 1.5fr) minmax(140px, .8fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  font-size: 13px;
}

.ranking-row-head {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: 0;
  padding-bottom: 2px;
}

.ranking-row.is-first {
  border-color: rgba(255,216,77,.55);
  background: rgba(255,216,77,.08);
}

.ranking-row.is-me {
  outline: 1px solid rgba(116,255,82,.5);
}

.ranking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  border-radius: 999px;
  background: rgba(116,255,82,.11);
  color: var(--accent-solid);
  font-weight: 900;
}

.ranking-row.is-first .ranking-badge {
  color: #ffd84d;
  background: rgba(255,216,77,.14);
  box-shadow: 0 0 16px rgba(255,216,77,.35);
}

.ranking-user {
  color: var(--text-primary);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ranking-empty,
.ranking-loading {
  padding: 28px 14px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 760px) {
  .ranking-shell { padding: 22px 12px; }
  .ranking-card { padding: 22px 16px; }
  .ranking-head { flex-direction: column; }
  .ranking-period { width: 100%; }
  .ranking-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .ranking-row span:nth-child(3),
  .ranking-row span:nth-child(4) {
    grid-column: 2;
  }
  .ranking-row-head { display: none; }
}

/* Developer API page */
.api-main { min-height: 100vh; overflow: auto; }
.api-shell {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 40px 20px;
}
.api-card {
  width: min(980px, 100%);
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.api-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.api-head h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.api-create-btn { min-width: 140px; }
.api-warning {
  padding: 12px 14px;
  border: 1px solid rgba(255,216,77,.45);
  border-radius: 12px;
  background: rgba(255,216,77,.08);
  color: #ffd84d;
  font-size: 13px;
}
.api-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.api-section h2 {
  margin: 0;
  font-size: 16px;
}
.api-key-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.api-key-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.api-key-row b,
.api-key-row span {
  display: block;
}
.api-key-row span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}
.api-key-row.is-revoked {
  opacity: .55;
}
.api-key-reveal,
.api-empty {
  padding: 14px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
}
.api-key-reveal code {
  display: block;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--accent-solid);
  overflow-wrap: anywhere;
}
.api-key-copy-field {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  outline: 1px solid transparent;
  background: rgba(0,0,0,.35);
  color: var(--accent-solid);
  font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.api-key-copy-field:focus {
  outline-color: rgba(41, 204, 73, .55);
}
.api-main,
.api-main * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: text;
}
.api-main ::selection {
  background: #1d7cff;
  color: #ffffff;
}
.api-main ::-moz-selection {
  background: #1d7cff;
  color: #ffffff;
}
.api-main button,
.api-main button *,
.api-main a,
.api-main a *,
.api-main .nav-item,
.api-main .nav-item * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: pointer;
}
.api-key-reveal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.api-copy-btn {
  min-width: 72px;
  padding: 8px 12px;
}

.api-key-reveal.hidden { display: none; }
.api-code {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #050607;
  color: #dce6ef;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
}
.api-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-table-row {
  display: grid;
  grid-template-columns: minmax(120px, .9fr) minmax(130px, 1fr) minmax(120px, .9fr) minmax(180px, 1.4fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  font-size: 12px;
}
.api-table-errors .api-table-row {
  grid-template-columns: 70px minmax(180px, 1.2fr) minmax(180px, 1fr);
}
.api-table-head {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.api-table-row span {
  overflow-wrap: anywhere;
}
.api-note {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .api-shell { padding: 22px 12px; }
  .api-card { padding: 22px 16px; }
  .api-head,
  .api-key-row { flex-direction: column; align-items: stretch; }
  .api-table-row,
  .api-table-errors .api-table-row {
    grid-template-columns: 1fr;
  }
}

/* Make nav-icon images same size as inline svg nav-icons (22x22) */
img.nav-icon { width: 22px !important; height: 22px !important; }


/* Redeem nav-icon: shrink to match Generate visually */
a.nav-item[href="/redeem"] img.nav-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Phone portrait: keep a desktop-like workspace, but shorten My Videos. */
@media (max-width: 760px) and (orientation: portrait) {
  :root { --sidebar-width: 72px; }
  body {
    overflow: hidden;
    align-items: stretch;
  }
  .sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width);
    padding: 10px 0 !important;
    gap: 2px !important;
  }
  .sidebar-logo,
  .sidebar-logo .logo-img {
    width: 44px !important;
    height: 44px !important;
  }
  .sidebar-logo { margin-bottom: 8px !important; }
  .sidebar-nav { gap: 4px !important; }
  .nav-item {
    width: 56px !important;
    height: 50px !important;
    padding: 4px 3px !important;
    gap: 4px !important;
  }
  .nav-icon { width: 18px !important; height: 18px !important; }
  .nav-item span { font-size: 9px !important; }
  .sidebar-footer {
    display: flex !important;
    gap: 4px !important;
    padding: 0 4px 4px !important;
  }
  .credit-fire {
    display: flex !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-color: rgba(116,255,82,.35);
    background: rgba(41,204,73,.12);
  }
  .upgrade-btn,
  .user-mini { display: none !important; }

  .main-content {
    position: fixed;
    left: var(--sidebar-width);
    top: 0;
    margin-left: 0 !important;
    width: calc(100vw - var(--sidebar-width));
    min-width: 900px;
    height: 100vh;
    overflow: auto;
  }
  .generator-frame {
    min-width: 900px;
    height: 100vh;
    min-height: 100vh;
    flex-direction: column !important;
    overflow: hidden;
  }
  .property-frame {
    flex: 0 0 460px !important;
    width: 465px !important;
    max-width: 465px !important;
    min-width: 465px !important;
    height: 460px !important;
    min-height: 460px !important;
    padding: 12px 16px !important;
    border-right: 1px solid var(--border-color);
    overflow: hidden !important;
  }
  .top-nav-panel {
    height: 42px !important;
    padding: 2px 6px 8px !important;
  }
  .tabs.size-small { gap: 26px !important; }
  .tabs.size-small .tab-item {
    font-size: 13px !important;
    padding: 5px 0 !important;
  }
  .designer-main-container,
  .designer-component,
  .property-content {
    height: auto !important;
    min-height: 0 !important;
  }
  .panel-box { gap: 8px !important; }
  .combo.version-select-root {
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
  .model-badge-img { width: 32px !important; height: 32px !important; }
  .combo .model-name { font-size: 12px !important; }
  .panel-prompt-skeleton {
    padding: 8px !important;
    gap: 8px !important;
  }
  .upload-box-dashed {
    min-height: 136px !important;
    max-height: 136px !important;
    padding: 10px !important;
  }
  .upload-box-half .upload-box-dashed {
    min-height: 124px !important;
    max-height: 124px !important;
  }
  .upload-box-dashed .upload-icon { width: 22px !important; height: 22px !important; }
  .upload-box-dashed .upload-text { font-size: 11px !important; }
  .prompt-input-row { padding: 6px 10px !important; }
  .prompt-input {
    min-height: 78px !important;
    max-height: 92px !important;
    font-size: 12px !important;
  }
  .bottom-button { padding: 8px 0 0 !important; }
  .setting-and-generate {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .setting-collect-box { gap: 8px !important; }
  .setting-select,
  .setting-switch {
    height: 34px !important;
    min-width: 96px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .bottom-pay { width: 150px !important; flex: 0 0 150px !important; }
  .generate-btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .history-stream {
    flex: 1 1 auto !important;
    width: 900px !important;
    min-width: 900px !important;
    height: calc(100vh - 460px) !important;
    min-height: 210px !important;
    border-top: 1px solid var(--border-color);
    overflow: hidden !important;
  }
  #assetsPanel {
    height: 100% !important;
    overflow: hidden !important;
  }
  .assets-header {
    min-height: 56px;
    padding: 10px 40px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .assets-header h3 {
    font-size: 15px !important;
    white-space: nowrap;
  }
  .assets-reminder {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 22px !important;
    line-height: 28px !important;
    text-align: left !important;
  }
  .assets-toolbar {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .toolbtn {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  .assets-count {
    flex: 0 0 auto;
    font-size: 12px !important;
    white-space: nowrap;
  }
  #assetsGrid {
    height: calc(100% - 58px) !important;
    overflow-y: auto !important;
    padding: 10px 40px 18px !important;
    grid-template-columns: repeat(auto-fill, minmax(92px, 112px)) !important;
    gap: 10px !important;
  }
  .asset-card {
    padding: 5px !important;
    border-radius: 8px !important;
  }
  .asset-card .info,
  .asset-card .meta {
    display: none !important;
  }
  .asset-card .actions {
    display: none !important;
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 8;
    margin-top: 0 !important;
    gap: 4px !important;
    pointer-events: none;
  }
  .asset-card .actions:empty {
    display: none !important;
  }
  .asset-card .actions .btn-mini {
    min-height: 24px !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    background: rgba(8, 10, 12, .78) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }
  .asset-card .actions .btn-mini.primary {
    background: var(--accent-gradient) !important;
    color: #051b07 !important;
    border-color: transparent !important;
    font-weight: 800 !important;
  }
  .asset-card .mobile-download-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 18;
    min-height: 24px;
    border-radius: 999px;
    background: var(--accent-gradient);
    color: #051b07;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(116,255,82,.48), 0 8px 20px rgba(0,0,0,.45);
  }
  .sign-in-to-view {
    height: calc(100% - 58px) !important;
    max-width: none !important;
    transform: scale(.72);
    transform-origin: center;
  }
  .chat-bubble-illustration {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 8px !important;
  }
}

/* Final copy override: all visible text should be selectable across every page. */
body,
body * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

img,
svg,
video,
canvas,
input[type="checkbox"],
input[type="radio"] {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Desktop-on-phone fit: keep desktop layout, then shrink the whole canvas. */
html.desktop-fit-mobile {
  width: 1280px !important;
  min-width: 1280px !important;
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
}

html.desktop-fit-mobile body {
  width: 1280px !important;
  min-width: 1280px !important;
  max-width: none !important;
  transform-origin: top left;
  touch-action: pan-x pan-y pinch-zoom !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.desktop-fit-mobile body * {
  touch-action: pan-x pan-y pinch-zoom !important;
}