src/ui/styles.css

/*
 * Objectverse Diary - Gradio archive workbench UI.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --ov-bg: #161513;
  --ov-bg-panel: rgba(30, 28, 25, 0.82);
  --ov-bg-panel-solid: #1f1d1a;
  --ov-bg-subtle: rgba(22, 21, 19, 0.52);
  --ov-bg-field: rgba(22, 21, 19, 0.36);
  --ov-bg-chip: rgba(212, 175, 55, 0.06);
  --ov-bg-input: #1b1a18;
  --ov-border-faint: rgba(212, 175, 55, 0.16);
  --ov-border-light: rgba(212, 175, 55, 0.34);
  --ov-text-main: #e6e1d3;
  --ov-text-soft: #d6d1c4;
  --ov-text-muted: #9d927d;
  --ov-text-dark: #2a261f;
  --ov-gold: #d4af37;
  --ov-gold-bright: #f5d061;
  --ov-red: #d76b55;
  --font-typewriter: 'Courier Prime', 'Space Mono', 'Courier New', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: Georgia, serif;
}

html[data-ov-theme="light"] {
  --ov-bg: #f4ecdd;
  --ov-bg-panel: rgba(255, 250, 240, 0.86);
  --ov-bg-panel-solid: #fff7e8;
  --ov-bg-subtle: rgba(255, 247, 232, 0.72);
  --ov-bg-field: rgba(255, 247, 232, 0.78);
  --ov-bg-chip: rgba(142, 104, 29, 0.08);
  --ov-bg-input: #fffaf0;
  --ov-border-faint: rgba(142, 104, 29, 0.18);
  --ov-border-light: rgba(142, 104, 29, 0.36);
  --ov-text-main: #2f2a22;
  --ov-text-soft: #453b2d;
  --ov-text-muted: #756a58;
  --ov-text-dark: #2a261f;
  --ov-gold: #8e681d;
  --ov-gold-bright: #6f4f0f;
  --ov-red: #a94e3d;
}

.lang-zh,
.auto-zh {
  display: none !important;
}

html[data-ov-lang="zh"] .lang-zh,
html[data-ov-lang="zh"] .auto-zh {
  display: inline !important;
}

html[data-ov-lang="zh"] .lang-zh.block {
  display: block !important;
}

html,
body,
gradio-app {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--ov-bg);
  color: var(--ov-text-main);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
}

.gradio-container {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ov-text-main) !important;
  font-family: var(--font-sans);
}

footer,
.footer {
  display: none !important;
}

#objectverse-app,
#app-container,
#main-content,
.archive-panel {
  color: var(--ov-text-main);
}

#app-container {
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 34px 24px 56px;
  gap: 18px !important;
}

#objectverse-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--ov-border-faint);
}

.hero-copy h1 {
  margin: 6px 0 8px;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-kicker {
  margin: 0;
  color: var(--ov-gold) !important;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
}

.hero-feature {
  max-width: 660px;
  margin: 10px 0 0;
  color: var(--ov-text-soft) !important;
  font-size: 15px;
  line-height: 1.6;
}

.hero-badges,
.status-pills,
.case-strip,
.file-meta,
.file-tags,
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-badges {
  margin-top: 14px;
}

.hero-badges span,
.status-pills span,
.case-strip span,
.file-meta span,
.file-tags span,
.card-tags span,
.example-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--ov-border-light);
  border-radius: 999px;
  color: var(--ov-gold-bright) !important;
  background: var(--ov-bg-chip);
  font-family: var(--font-typewriter);
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
}

.archive-label {
  color: var(--ov-gold) !important;
  font-family: var(--font-typewriter);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.top-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  color: var(--ov-text-muted);
  font-family: var(--font-typewriter);
  font-size: 12px;
}

.top-actions,
.language-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  justify-content: flex-end;
  width: 100%;
}

.language-control {
  justify-content: flex-end;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ov-border-light);
  border-radius: 8px;
  background: var(--ov-bg-subtle);
  color: var(--ov-gold) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.icon-link:hover,
.icon-link:focus {
  border-color: var(--ov-gold);
  background: var(--ov-bg-chip);
  color: var(--ov-gold-bright) !important;
  outline: none;
}

.icon-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-link svg[hidden] {
  display: none !important;
}

.icon-link[href*="youtu"] svg rect {
  fill: currentColor;
  stroke: currentColor;
}

.icon-link[href*="youtu"] svg path {
  fill: var(--ov-bg);
  stroke: var(--ov-bg);
}

.x-mark {
  font-family: var(--font-typewriter);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.theme-toggle {
  padding: 0;
}

.theme-toggle.active {
  background: var(--ov-gold);
  color: var(--ov-text-dark) !important;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 92px;
  overflow: hidden;
  border: 1px solid var(--ov-border-light);
  border-radius: 6px;
  background: var(--ov-bg-subtle);
}

.segmented-control button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--ov-border-faint);
  background: transparent;
  color: var(--ov-text-muted);
  font-family: var(--font-typewriter);
  font-size: 12px;
  cursor: pointer;
}

.segmented-control button:last-child {
  border-right: 0;
}

.segmented-control button:hover,
.segmented-control button:focus,
.segmented-control button.active {
  color: var(--ov-text-dark);
  background: var(--ov-gold);
  outline: none;
}

.archive-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ov-border-faint);
  border-left: 4px solid var(--ov-border-light);
  border-radius: 8px;
  background: var(--ov-bg-panel);
}

.archive-status strong {
  display: block;
  margin: 4px 0;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
  font-size: 16px;
}

.archive-status p {
  margin: 0;
  color: var(--ov-text-muted) !important;
  font-size: 13px;
  line-height: 1.5;
}

.archive-status.awake {
  border-left-color: var(--ov-gold);
}

.archive-status.error {
  border-left-color: var(--ov-red);
}

.content-section {
  display: flex !important;
  gap: 18px !important;
  margin: 0;
}

.archive-panel {
  position: relative;
  padding: 18px;
  border: 1px solid var(--ov-border-faint) !important;
  border-radius: 8px;
  background: var(--ov-bg-panel) !important;
}

.gradio-container .block,
.gradio-container .form,
.gradio-container .box {
  border-color: var(--ov-border-faint) !important;
  border-radius: 8px !important;
  background: var(--ov-bg-subtle) !important;
  box-shadow: none !important;
}

.gradio-container .form {
  gap: 12px !important;
}

.gradio-container label,
.gradio-container span.svelte-1gfknul {
  color: var(--ov-text-muted) !important;
  font-family: var(--font-typewriter);
}

.gradio-container input,
.gradio-container textarea {
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 6px !important;
  background: var(--ov-bg-input) !important;
  color: var(--ov-text-main) !important;
  font-family: var(--font-sans) !important;
}

.gradio-container input:focus,
.gradio-container textarea:focus {
  border-color: var(--ov-gold) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18) !important;
}

#object-upload {
  min-height: 176px;
  border: 1px dashed var(--ov-border-light) !important;
  border-radius: 8px;
  background: var(--ov-bg-field) !important;
  color: var(--ov-text-muted) !important;
  text-align: center;
}

#object-upload :is(label, span, p, div, button) {
  color: var(--ov-text-muted) !important;
}

.mode-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
}

.mode-header .lang-zh {
  color: var(--ov-text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
}

#personality-mode .wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#personality-mode label {
  flex: 1 1 120px;
  min-height: 44px;
  padding: 10px !important;
  border: 1px solid var(--ov-border-faint) !important;
  border-radius: 6px !important;
  background: var(--ov-bg-field) !important;
  text-align: center;
  cursor: pointer;
}

#personality-mode label span {
  display: block;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
  font-size: 13px;
}

#personality-mode label:has(input:checked) {
  border-color: var(--ov-gold) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35) inset;
}

#personality-mode label:has(input:checked) span {
  color: var(--ov-gold-bright) !important;
}

#wake-button {
  width: 100%;
  margin-top: 18px;
  padding: 15px !important;
  border: 1px solid rgba(245, 208, 97, 0.4) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #d8ac54 0%, #a67c2d 100%) !important;
  color: var(--ov-text-dark) !important;
  font-family: var(--font-typewriter);
  font-size: 16px !important;
  font-weight: 700;
  box-shadow: none !important;
}

#wake-button:hover {
  filter: brightness(1.07);
}

.example-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ov-border-faint);
}

.example-header strong {
  display: block;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
  font-size: 16px;
  font-weight: 400;
}

.example-header span:not(.example-badge) {
  color: var(--ov-text-muted) !important;
  font-size: 13px;
}

button.example-card {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-bottom: 8px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--ov-border-faint) !important;
  border-radius: 6px !important;
  background: var(--ov-bg-subtle) !important;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter) !important;
  text-align: left !important;
  transition: border-color 0.2s, background 0.2s;
}

button.example-card:hover,
button.example-card:focus {
  border-color: var(--ov-gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

button.example-card * {
  color: inherit !important;
}

.panel-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ov-border-faint);
}

.panel-header > span {
  color: var(--ov-gold) !important;
  font-family: var(--font-typewriter);
  font-size: 15px;
}

.panel-header h2 {
  margin: 0 0 4px;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
  font-size: 20px;
  line-height: 1.25;
}

.panel-header h2 small,
.panel-header p {
  color: var(--ov-text-muted) !important;
}

.panel-header p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

#diary-output,
.diary-entry {
  color: var(--ov-text-soft) !important;
  font-family: var(--font-serif) !important;
  font-size: 16px;
  line-height: 1.75;
}

.diary-entry h2,
#diary-output h2,
#diary-output h3 {
  margin: 0 0 14px;
  color: var(--ov-gold) !important;
  font-family: var(--font-typewriter);
  font-size: 16px;
  line-height: 1.3;
  text-transform: uppercase;
}

.diary-entry p {
  margin: 0;
}

.zh-helper {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--ov-border-faint);
  color: var(--ov-text-muted) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}

.archive-empty,
.objectverse-placeholder {
  padding: 28px 22px;
  border: 1px dashed var(--ov-border-light);
  border-radius: 8px;
  color: var(--ov-text-muted) !important;
  background: var(--ov-bg-field);
  text-align: center;
}

.archive-empty h3,
.objectverse-placeholder strong {
  display: block;
  margin: 8px 0;
  color: var(--ov-text-main) !important;
  font-family: var(--font-typewriter);
}

.archive-empty p,
.objectverse-placeholder p {
  margin: 6px 0 0;
  color: var(--ov-text-muted) !important;
}

.object-file-card,
.trace-card,
.archive-error,
.objectverse-card {
  color: var(--ov-text-main) !important;
}

.object-file-card h3,
.trace-card strong,
.archive-error strong,
.objectverse-card h2 {
  color: var(--ov-text-main) !important;
}

.case-strip {
  margin-bottom: 12px;
}

.file-meta {
  margin-bottom: 12px;
}

.object-name,
.object-file-card dt,
.object-file-card p,
.object-file-card li,
.trace-card p,
.archive-error p,
.card-kicker,
.card-object,
.card-cn {
  color: var(--ov-text-muted) !important;
}

.object-file-card dl {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.object-file-card dl > div {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ov-border-faint);
}

.object-file-card dt {
  margin-bottom: 4px;
  font-family: var(--font-typewriter);
  font-size: 12px;
  text-transform: uppercase;
}

.object-file-card dd {
  margin: 0;
  color: var(--ov-text-soft) !important;
}

.feature-list strong,
.card-quote {
  color: var(--ov-text-soft) !important;
}

.feature-list ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.complaint,
.card-stamp {
  color: var(--ov-gold) !important;
}

.file-tags,
.card-tags {
  margin-top: 16px;
}

.objectverse-card {
  max-width: 520px;
  padding: 22px;
  border: 1px solid var(--ov-border-light);
  border-radius: 8px;
  background: var(--ov-bg-subtle);
}

.card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.card-header h2 {
  margin: 4px 0 0;
  font-family: var(--font-typewriter);
}

.card-quote {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
}

.card-cn {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ov-border-faint);
}

.quiet-button {
  border: 1px solid var(--ov-border-light) !important;
  border-radius: 6px !important;
  background: var(--ov-bg-subtle) !important;
  color: var(--ov-gold) !important;
  font-family: var(--font-typewriter) !important;
}

.developer-details {
  border: 1px solid var(--ov-border-faint) !important;
  border-radius: 8px !important;
  background: var(--ov-bg-panel) !important;
}

.developer-json-grid {
  gap: 16px !important;
}

.gradio-container :is(summary, pre, code) {
  color: var(--ov-text-main) !important;
}

.gradio-container :is(.json-holder, .json-holder *, .chatbot, .chatbot *) {
  color: var(--ov-text-main) !important;
}

.gradio-container :is(.chatbot, .json-holder, pre) {
  background: var(--ov-bg-subtle) !important;
}

@media (max-width: 980px) {
  #app-container {
    padding: 28px 18px 44px;
  }

  #objectverse-hero,
  .content-section,
  .split-section,
  .developer-json-grid,
  .archive-status {
    flex-direction: column !important;
  }

  .top-controls,
  .archive-status {
    width: 100%;
  }

  .top-controls {
    align-items: flex-start;
  }

  .top-actions,
  .language-control {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  #app-container {
    padding: 22px 14px 36px;
  }

  .archive-panel {
    padding: 16px;
  }

  .hero-copy h1 {
    font-size: 30px;
    word-break: break-word;
  }

  .hero-kicker {
    font-size: 15px;
  }

  .hero-feature {
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-badges span,
  .status-pills span,
  .case-strip span,
  .file-meta span,
  .file-tags span,
  .card-tags span {
    font-size: 11px;
  }

  #personality-mode label {
    flex: 1 1 45% !important;
    padding: 10px 6px !important;
  }
}