:root {
  --bg: #0b0c10;
  --panel: #11131a;
  --panel-2: #151823;
  --text: #ededed;
  --muted: #a8adb7;
  --line: #2a3040;
  --button: #161b27;
  --button-hover: #202739;
  --primary: #d9dce2;
  --primary-text: #090a0c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Helvetica, Arial, sans-serif; }
body { min-height: 100vh; }
.app-shell { width: min(1100px, 100% - 24px); margin: 18px auto 28px; }
.app-header { margin-bottom: 14px; }
h1 { margin: 0; font-size: 34px; letter-spacing: 0.04em; }
.tagline { margin: 6px 0 4px; font-size: 18px; color: var(--text); }
.caption { margin: 0; color: var(--muted); max-width: 860px; line-height: 1.5; }
.tabs { display: flex; gap: 10px; margin: 18px 0; }
.tab, button, select, input, textarea { border: 1px solid var(--line); border-radius: 14px; background: var(--button); color: var(--text); font: inherit; }
.tab, button { padding: 12px 16px; cursor: pointer; }
.tab:hover, button:hover:not([disabled]) { background: var(--button-hover); }
.tab.is-active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.panel { display: none; }
.panel.is-active { display: block; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; background: var(--panel); padding: 14px; border: 1px solid var(--line); border-radius: 18px; }
.field-wide { grid-column: 1 / -1; }
.field span { font-size: 14px; color: var(--muted); }
textarea, select, input { width: 100%; padding: 12px 14px; background: var(--panel-2); }
textarea { resize: vertical; min-height: 160px; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.status-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 14px; }
#status { min-height: 24px; color: var(--muted); }
.progress-wrap { width: 100%; height: 8px; background: #1a1d27; border-radius: 999px; overflow: hidden; margin-top: 10px; }
#progress { width: 0%; height: 100%; background: var(--primary); transition: width 0.15s linear; }
.canvas-wrap { background: linear-gradient(180deg, #10131b, #0c0e13); border: 1px solid var(--line); border-radius: 26px; padding: 18px; display: flex; justify-content: center; align-items: center; }
canvas { width: min(100%, 768px); height: auto; background: #0d0f14; border-radius: 16px; image-rendering: auto; }
.camera-card, .about-card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.camera-preview { height: 300px; border-radius: 16px; background: linear-gradient(180deg, #0f1118, #181c27); display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 12px; border: 1px solid var(--line); }
ul { line-height: 1.7; }
@media (max-width: 760px) {
  .control-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  h1 { font-size: 28px; }
}