/*
  Shared GUI polish layer.
  Loaded after each page's local styles so it can normalize the experience
  without requiring a large HTML migration.
*/

:root {
  --gui-bg: var(--bg, #0d0d0f);
  --gui-panel: var(--panel, #16161a);
  --gui-panel-2: var(--panel2, #1e1e24);
  --gui-panel-3: var(--panel3, #252530);
  --gui-border: color-mix(in srgb, var(--border, #2a2a35) 82%, transparent);
  --gui-accent: var(--accent, #6c63ff);
  --gui-success: var(--success, var(--green, #3ecf8e));
  --gui-warning: var(--warning, #f5a623);
  --gui-danger: var(--danger, var(--red, #e05252));
  --gui-text: var(--text, var(--text1, #e8e8f0));
  --gui-muted: var(--text2, #a0a0b8);
  --gui-faint: var(--text3, #606078);
  --gui-radius: 8px;
  --gui-shadow: 0 16px 50px rgba(0, 0, 0, .28);
  --gui-focus: 0 0 0 3px rgba(var(--accent-rgb, 108,99,255), .24);
}

html {
  color-scheme: dark;
  text-rendering: geometricPrecision;
}

html[data-theme="white"],
html[data-theme="blue-white"] {
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 12% -18%, rgba(var(--accent-rgb, 108,99,255), .14), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--gui-bg) 92%, #111827), var(--gui-bg));
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
[onclick] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--gui-focus) !important;
}

#header {
  min-height: 56px;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--gui-panel) 92%, transparent) !important;
  border-bottom-color: var(--gui-border) !important;
}

#header .logo {
  letter-spacing: 0 !important;
}

#header .logo,
#home-btn,
.mode-tab,
.credit-pill,
.badge,
.user-credit-pill,
#login-btn,
#idx-login-btn,
#mb-theme-btn {
  white-space: nowrap;
}

#header .logo::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gui-success);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gui-success) 60%, transparent);
  flex: 0 0 auto;
}

.badge,
.credit-pill,
.user-credit-pill,
#idx-credit-pill,
#login-btn,
#idx-login-btn,
#home-btn,
#mb-theme-btn {
  border-radius: 999px !important;
}

.badge {
  letter-spacing: .02em !important;
}

.panel,
.ai-panel,
#sidebar,
#editor-panel,
#expert-preview-panel,
#new-project-card,
#projects-section,
.proj-card,
.toolbar,
.modal-card,
.topup-card,
#sp-modal,
#sf-modal,
#confirm-delete-box,
#rename-box,
.checklist-card,
.stage-row,
.log-visual-card,
.run-detail,
.preview {
  border-color: var(--gui-border) !important;
  border-radius: var(--gui-radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

#new-project-card,
#projects-section,
.panel,
.ai-panel,
#sidebar,
#editor-panel,
#expert-preview-panel,
.toolbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gui-panel) 94%, white 2%), var(--gui-panel)) !important;
}

input,
textarea,
select,
.form-control,
#project-select,
#update-input,
#new-prompt,
.adv-select,
.model-select,
.search-box,
.wt-field input,
.wt-field select {
  background: color-mix(in srgb, var(--gui-panel-2) 88%, black 6%) !important;
  border-color: var(--gui-border) !important;
  border-radius: var(--gui-radius) !important;
  color: var(--gui-text) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:hover,
textarea:hover,
select:hover,
.form-control:hover,
#project-select:hover,
#update-input:hover,
#new-prompt:hover {
  border-color: color-mix(in srgb, var(--gui-accent) 48%, var(--gui-border)) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
#project-select:focus,
#update-input:focus,
#new-prompt:focus {
  border-color: var(--gui-accent) !important;
  box-shadow: var(--gui-focus) !important;
}

.btn,
.btn-sm,
#build-btn,
#update-btn,
#sp-ok-btn,
#sp-shuffle-btn,
#suggest-prompt-btn,
#new-project-card button,
.proj-card button,
.proj-card-action-btn,
.task-card,
.toggle-pill,
.pipeline-mode,
.filter-pill,
.wt-sub-pill,
.wt-sort-pill,
.theme-card,
.mode-tab,
.builder-preview-tab {
  transition:
    transform .14s ease,
    border-color .14s ease,
    background-color .14s ease,
    color .14s ease,
    box-shadow .14s ease !important;
}

.btn:hover,
.btn-sm:hover,
#build-btn:hover,
#update-btn:hover,
#sp-ok-btn:hover,
#sp-shuffle-btn:hover,
#suggest-prompt-btn:hover,
#new-project-card button:hover,
.proj-card button:hover,
.proj-card-action-btn:hover,
.task-card:hover,
.toggle-pill:hover,
.pipeline-mode:hover,
.filter-pill:hover,
.wt-sub-pill:hover,
.wt-sort-pill:hover,
.theme-card:hover {
  transform: translateY(-1px);
}

.task-card,
.pipeline-mode,
.theme-card,
.sp-idea-card,
.proj-card,
.proj-hist-item,
.stage-row {
  background: color-mix(in srgb, var(--gui-panel-2) 88%, transparent) !important;
}

.task-card.active,
.pipeline-mode.active,
.toggle-pill.active,
.wt-sub-pill.active,
.wt-sort-pill.active,
.filter-pill.active,
.theme-card.active,
.sp-idea-card.selected,
.mode-tab.active,
.builder-preview-tab.active {
  border-color: color-mix(in srgb, var(--gui-accent) 70%, var(--gui-border)) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 108,99,255), .16) inset !important;
}

#new-prompt,
#buildPrompt {
  line-height: 1.55 !important;
}

#ai-log,
#monaco-container,
#editor-placeholder,
.preview-panel,
#preview-placeholder,
#expert-preview-frame,
#preview-frame,
.log {
  border-color: var(--gui-border) !important;
}

.log-entry {
  border-radius: 6px;
}

#sp-overlay,
#confirm-delete-overlay,
#rename-overlay,
#topup-overlay,
.topup-overlay,
#hitl-modal {
  backdrop-filter: blur(10px);
}

#sp-modal,
.topup-card,
#confirm-delete-box,
#rename-box,
.modal-card {
  box-shadow: var(--gui-shadow) !important;
}

#sp-title,
#new-project-card h2,
.panel-title,
.section-title,
.rn-title,
.cd-title {
  letter-spacing: 0 !important;
}

.user-menu,
.mobile-top-menu,
#idx-user-menu,
#mb-theme-dropdown {
  border-color: var(--gui-border) !important;
  border-radius: var(--gui-radius) !important;
  box-shadow: var(--gui-shadow) !important;
}

#project-tab-bar {
  background: color-mix(in srgb, var(--gui-panel) 94%, transparent) !important;
}

.proj-tab.active {
  box-shadow: inset 0 -2px 0 var(--gui-accent);
}

@media (max-width: 760px) {
  #header {
    gap: 8px;
    padding-inline: 12px !important;
  }

  #main {
    padding-inline: 14px !important;
  }

  #new-project-card,
  #projects-section {
    padding: 20px !important;
  }

  #sp-modal,
  .topup-card,
  #confirm-delete-box,
  #rename-box {
    width: min(100%, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
  }
}

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

/* Responsive modernization layer. Keep this additive: page-local styles still own layout intent. */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --el-2: 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.04) inset;
  --el-3: 0 8px 28px rgba(0,0,0,.16);
  --el-4: 0 18px 56px rgba(0,0,0,.26);
  --tap: 44px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

h1,
.panel-title,
#new-project-card h2,
.pagetitle,
.my-projects-title {
  font-size: var(--fs-xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0 !important;
}

h2,
.section-title,
.sp-title {
  font-size: var(--fs-lg);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0 !important;
}

h3 {
  font-size: var(--fs-md);
  line-height: 1.3;
  font-weight: 600;
}

.proj-card-meta,
p {
  line-height: 1.55;
}

.badge,
.credit-pill,
.pill,
label,
.label,
.eyebrow {
  font-size: var(--fs-xs);
}

.eyebrow,
.section-label {
  color: var(--gui-faint);
  font-weight: 600;
  text-transform: uppercase;
}

.panel,
.ai-panel,
#new-project-card,
#projects-section,
.proj-card,
.modal-card,
.topup-card,
.checklist-card,
.task-card {
  border-radius: var(--gui-radius) !important;
}

.proj-card {
  box-shadow: var(--el-2) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.proj-card:hover {
  box-shadow: var(--el-3) !important;
  transform: translateY(-2px);
}

.btn,
.proj-card-open-btn,
#build-btn,
#update-btn {
  border-radius: var(--gui-radius) !important;
  font-weight: 600;
  padding-block: 10px;
}

.proj-card-badges .badge,
.status-chip,
.needs-fix,
.quality-failures,
.qa-note {
  font-weight: 600;
}

.needs-fix,
.status-chip.warn {
  color: #ffd9a0 !important;
}

.quality-failures,
.qa-note {
  color: #ffc98a !important;
}

.status-chip.ok,
.badge.ok {
  color: var(--gui-success) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--gui-faint);
  opacity: .9;
}

@media (pointer: coarse), (max-width: 760px) {
  .btn,
  .btn-sm,
  button,
  .proj-card-action-btn,
  .proj-card-open-btn,
  .mode-tab,
  .filter-pill,
  .toggle-pill,
  .wt-sub-pill,
  .wt-sort-pill,
  #login-btn,
  #idx-login-btn,
  #home-btn,
  #mb-theme-btn,
  .credit-pill,
  .user-credit-pill,
  a.btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--tap) !important;
    min-width: var(--tap);
  }

  .proj-card-action-btn {
    min-width: var(--tap);
  }

  input,
  textarea,
  select,
  .form-control,
  #new-prompt,
  #buildPrompt,
  #update-input,
  .search-box {
    font-size: 16px !important;
    min-height: var(--tap);
  }
}

@media (max-width: 1100px) {
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 1000px) {
  [style*="280px minmax(0,1fr) 360px"],
  [style*="280px minmax(0, 1fr) 360px"] {
    grid-template-columns: 1fr !important;
  }

  [style*="repeat(4,minmax(0,1fr))"],
  [style*="repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  [style*="repeat(6, minmax(110px"] {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

@media (max-width: 900px) {
  #main {
    gap: var(--sp-5) !important;
    padding-inline: max(14px, var(--safe-l)) max(14px, var(--safe-r)) !important;
  }

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #sidebar {
    border-bottom: 1px solid var(--gui-border) !important;
    border-right: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    position: static !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  #header {
    gap: var(--sp-2) !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: max(12px, var(--safe-l)) max(12px, var(--safe-r)) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #header::-webkit-scrollbar {
    display: none;
  }

  #header .logo,
  #header .logo span {
    font-size: var(--fs-md) !important;
  }

  #header .mode-tab,
  #header .nav-btn,
  #header a.btn {
    flex: 0 0 auto;
  }

  .nav-label-secondary,
  .hide-on-mobile {
    display: none !important;
  }

  #projects-grid,
  #theme-grid,
  #sp-ideas-grid,
  [style*="auto-fill, minmax(200px"],
  [style*="auto-fill, minmax(230px"] {
    gap: var(--sp-4) !important;
    grid-template-columns: 1fr !important;
  }

  [style*="auto-fill, minmax(88px"],
  [style*="auto-fill, minmax(150px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #task-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #task-cards-grid .task-card {
    min-width: 0 !important;
  }

  .proj-card-actions {
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
  }

  .proj-card-action-btn {
    flex: 1 1 auto !important;
  }

  .proj-card-open-btn {
    width: 100% !important;
  }

  #new-project-card,
  #projects-section,
  .panel,
  .ai-panel {
    padding: var(--sp-5) !important;
  }

  #sp-modal,
  .topup-card,
  #confirm-delete-box,
  #rename-box,
  .modal-card {
    border-radius: var(--gui-radius) !important;
    box-shadow: var(--el-4) !important;
    max-height: calc(100dvh - 24px) !important;
    max-width: calc(100vw - 16px) !important;
    width: min(100%, calc(100vw - 16px)) !important;
  }

  .sticky-actions,
  .build-bar,
  #build-bar,
  .bottom-bar {
    padding-bottom: calc(var(--sp-3) + var(--safe-b)) !important;
  }

  .proj-card-badges,
  .filter-row,
  .pill-row,
  .mode-tabs,
  .tabs-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .proj-card-badges::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar {
    display: none;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  canvas,
  iframe,
  .preview,
  .preview-frame {
    max-width: 100%;
  }

  .proj-card-name,
  .panel-title,
  h1,
  h2 {
    overflow-wrap: anywhere;
  }

  [style*="minmax(0,1fr) auto"],
  [style*="minmax(0, 1fr) auto"],
  [style*="34px minmax(0,1fr) auto"],
  [style*="34px minmax(0, 1fr) auto"],
  [style*="34px minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="repeat(2,minmax(0,1fr))"],
  [style*="repeat(2, minmax(0, 1fr))"],
  [style*="repeat(3,minmax(0,1fr))"],
  [style*="repeat(3, minmax(0, 1fr))"],
  [style*="repeat(2, minmax(220px"] {
    grid-template-columns: 1fr !important;
  }

  [style*="repeat(6, minmax(110px"],
  [style*="repeat(4,minmax(0,1fr))"],
  [style*="repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="auto-fit,minmax(118px"],
  [style*="auto-fit, minmax(118px"],
  [style*="auto-fit,minmax(145px"],
  [style*="auto-fit, minmax(145px"],
  [style*="auto-fill,minmax(120px"],
  [style*="auto-fill, minmax(120px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #expert-preview-panel,
  #preview-panel,
  .preview,
  .run-pane,
  #run-pane {
    min-height: 52vh;
  }

  #update-action-buttons > button {
    border-radius: var(--gui-radius) !important;
    height: var(--tap) !important;
    min-height: var(--tap) !important;
  }

  #update-action-buttons #area-select-chat-btn,
  #update-action-buttons #element-pick-btn {
    min-width: var(--tap) !important;
    width: var(--tap) !important;
  }
}