/* ═══════════════════════════════════════════════
   Bento Grid Dark-first Design System
   Zinc/Slate Palette · Hairline Borders
   ═══════════════════════════════════════════════ */

/* ── Theme tokens (dark default) ── */

[data-theme="dark"] {
  --bg:           #09090b;
  --surface:      #18181b;
  --surface-alt:  #1c1c20;
  --elevated:     #27272a;
  --border:       #27272a;
  --border-strong:#3f3f46;
  --text:         #fafafa;
  --text-sec:     #a1a1aa;
  --text-muted:   #71717a;
  --field-bg:     #1c1c20;
  --field-border: #3f3f46;
  --field-focus:  #52525b;
  --btn-bg:       #fafafa;
  --btn-text:     #09090b;
  --btn-hover:    #e4e4e7;
  --outline-border:#52525b;
  --outline-hover: #71717a;
  --error-bg:     #2d1215;
  --error-text:   #fca5a5;
  --slider-track: #3f3f46;
  --slider-thumb:  #fafafa;
  --select-arrow: %23a1a1aa;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:           #fafafa;
  --surface:      #ffffff;
  --surface-alt:  #f4f4f5;
  --elevated:     #e4e4e7;
  --border:       #e4e4e7;
  --border-strong:#d4d4d8;
  --text:         #09090b;
  --text-sec:     #52525b;
  --text-muted:   #a1a1aa;
  --field-bg:     #f4f4f5;
  --field-border: #d4d4d8;
  --field-focus:  #a1a1aa;
  --btn-bg:       #18181b;
  --btn-text:     #fafafa;
  --btn-hover:    #27272a;
  --outline-border:#d4d4d8;
  --outline-hover: #a1a1aa;
  --error-bg:     #fef2f2;
  --error-text:   #b91c1c;
  --slider-track: #d4d4d8;
  --slider-thumb:  #18181b;
  --select-arrow: %2352525b;
  color-scheme: light;
}

/* ── Reset ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Noto Sans SC", "PingFang SC", -apple-system, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Shell ── */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ════════════════════════════════════════════
   BENTO CONTAINER
   ════════════════════════════════════════════ */

.bento {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ── Header Zone ── */

.bento-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
}

.header-left { display: flex; flex-direction: column; gap: 6px; }

.bento-header h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
}

.mode-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Theme Toggle ── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-sec);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-alt);
}

.theme-toggle svg { flex-shrink: 0; }

[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

.theme-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Feature Badges ── */

.bento-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.feat-badge {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  transition: color 0.2s;
}

.feat-badge:last-child { border-right: none; }

/* ── Workspace Grid ── */

.bento-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
}

/* ── Cell ── */

.cell {
  padding: 24px 28px;
}

.cell-tts {
  border-right: 1px solid var(--border);
}

.cell-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 14px;
}

.cell-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* ── Form Fields ── */

.ctrl-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

textarea, select {
  width: 100%;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.7;
}

textarea:focus, select:focus {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 2px rgba(113, 113, 122, 0.15);
}

select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='var(--select-arrow)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

.meta-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meta-hint { font-weight: 500; }

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

/* ── Sliders ── */

.slider-group {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-row { display: flex; flex-direction: column; gap: 6px; }

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-head .ctrl-label { margin-bottom: 0; }

.slider-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 28px;
  text-align: right;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--slider-track);
  outline: none;
  border: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-thumb);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: transform 0.12s ease;
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.1); }

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-thumb);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: var(--slider-track);
  border: none;
}

/* ── Action Row ── */

.action-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Buttons ── */

.btn-primary {
  padding: 11px 28px;
  border: none;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}

.btn-primary:hover:not(:disabled) { background: var(--btn-hover); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary.is-loading { position: relative; overflow: hidden; }
.btn-primary.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(128,128,128,0.18) 50%, transparent 85%);
  animation: shimmer 1.2s linear infinite;
}

.btn-outline {
  padding: 10px 22px;
  border: 1px solid var(--outline-border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-sec);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--outline-hover);
  color: var(--text);
  background: var(--surface-alt);
}

.btn-outline:active:not(:disabled) { transform: scale(0.97); }
.btn-outline:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-outline.is-loading { position: relative; overflow: hidden; }
.btn-outline.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(128,128,128,0.12) 50%, transparent 85%);
  animation: shimmer 1.2s linear infinite;
}

.btn-sm { padding: 8px 16px; font-size: 0.82rem; }

.status-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Upload Zone ── */

.upload-zone {
  position: relative;
  border: 1px dashed var(--field-border);
  border-radius: 4px;
  padding: 48px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--field-bg);
  transition: border-color 0.2s, background 0.2s;
}

.upload-zone:hover {
  border-color: var(--field-focus);
  background: var(--surface-alt);
}

.upload-zone.drag-over {
  border-color: var(--text);
  background: var(--elevated);
}

.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  margin: 0 auto 12px;
  display: block;
}

.upload-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 6px;
}

.upload-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* ── File Info ── */

.file-info {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--field-bg);
  font-size: 0.85rem;
}

.file-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.file-size {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.remove-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 2px;
  transition: color 0.15s;
}

.remove-btn:hover { color: var(--error-text); }

/* ── Result Cards ── */

.result-card {
  margin-top: 12px;
  padding: 20px 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: background-color 0.3s, border-color 0.3s;
}

.result-card textarea {
  margin-top: 8px;
}

.result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.result-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 12px;
}

.result-head .result-title { margin-bottom: 0; }

.result-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
}

#audioPlayer {
  width: 100%;
  margin: 10px 0 14px;
  border-radius: 4px;
}

.error-card {
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 0.88rem;
  font-weight: 600;
  border-color: transparent;
}

/* ── Analysis Content ── */

.analysis-content {
  line-height: 1.75;
  font-size: 0.9rem;
  color: var(--text-sec);
}

.analysis-content h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 18px 0 6px; }
.analysis-content h4 { font-size: 0.94rem; font-weight: 700; color: var(--text); margin: 14px 0 5px; }
.analysis-content h5 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin: 10px 0 4px; }
.analysis-content p { margin: 5px 0; }
.analysis-content ul, .analysis-content ol { margin: 5px 0; padding-left: 20px; }
.analysis-content li { margin: 3px 0; }
.analysis-content strong { font-weight: 700; color: var(--text); }
.analysis-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.84em;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--elevated);
}
.analysis-content pre {
  background: var(--elevated);
  border-radius: 4px;
  padding: 14px;
  overflow-x: auto;
  font-size: 0.84rem;
}

/* ── Export ── */

.export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Utility ── */

.hidden { display: none !important; }

/* ── Animations ── */

@keyframes shimmer {
  from { transform: translateX(-140%); }
  to   { transform: translateX(140%); }
}

/* ── Responsive ── */

@media (max-width: 900px) {
  .bento-workspace { grid-template-columns: 1fr; }
  .cell-tts { border-right: none; border-bottom: 1px solid var(--border); }
  .bento-badges { flex-direction: column; }
  .feat-badge { border-right: none; border-bottom: 1px solid var(--border); }
  .feat-badge:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  .shell { padding: 12px 8px 32px; }
  .bento-header { padding: 16px 18px 12px; flex-wrap: wrap; gap: 12px; }
  .cell { padding: 18px; }
  .controls-grid { grid-template-columns: 1fr; }
  .action-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }
  .export-row { flex-direction: column; }
  .result-card { padding: 16px 18px; }
}