:root {
  --bg: #f6f1e8;
  --paper: rgba(255, 251, 245, 0.78);
  --ink: #1d140d;
  --muted: #6f6255;
  --line: rgba(71, 44, 21, 0.14);
  --accent: #d95f38;
  --accent-dark: #8b3418;
  --shadow: 0 24px 80px rgba(77, 41, 12, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(217,95,56,0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(103,137,131,0.2), transparent 28%),
    linear-gradient(180deg, #f9f3eb, #efe3d1);
}
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.08;
  background-image: radial-gradient(#000 0.55px, transparent 0.55px);
  background-size: 10px 10px;
}
.shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 28px auto;
  position: relative;
}
.hero, .panel {
  backdrop-filter: blur(18px);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.hero {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 28px 32px; border-radius: 28px; margin-bottom: 22px;
}
.eyebrow {
  margin: 0 0 8px; font: 700 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-dark);
}
.hero h1 {
  margin: 0; font: 700 clamp(36px, 6vw, 64px)/0.95 "Space Grotesk", sans-serif;
}
.lede { margin: 12px 0 0; max-width: 720px; color: var(--muted); font-size: 16px; }
.hero-badge {
  align-self: flex-start; min-width: 170px; padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(135deg, #1d140d, #4f2a17); color: #fff;
}
.hero-badge span { display: block; opacity: 0.72; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.hero-badge strong { display: block; margin-top: 8px; font: 700 24px/1.1 "Space Grotesk", sans-serif; }
.grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 22px; }
.panel { border-radius: 26px; padding: 24px; }
.panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.panel-head h2 { margin: 0 0 6px; font: 700 22px/1.1 "Space Grotesk", sans-serif; }
.panel-head p, .summary { margin: 0; color: var(--muted); }
.stats { display: flex; gap: 10px; }
.stats div {
  min-width: 86px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.56); border: 1px solid var(--line);
}
.stats span { display: block; color: var(--muted); font-size: 12px; }
.stats strong { font: 700 22px/1.1 "Space Grotesk", sans-serif; }
textarea, pre, select, button { font: inherit; }
textarea, pre {
  width: 100%; min-height: 430px; border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.62); padding: 18px; color: var(--ink);
}
textarea { resize: vertical; outline: none; }
textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,95,56,0.12); }
pre { margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.toolbar, .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.toolbar { align-items: end; }
label span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
select {
  min-width: 200px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.78);
}
.file-pick {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px dashed rgba(71,44,21,0.24); background: rgba(255,255,255,0.48); cursor: pointer;
}
.file-pick b { font-weight: 700; }
button {
  border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
button:hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: 0.42; transform: none; }
.primary { background: linear-gradient(135deg, var(--accent), #ef8a52); color: #fff; }
.ghost { background: rgba(255,255,255,0.58); color: var(--ink); border: 1px solid var(--line); }
.error { min-height: 22px; margin: 14px 0 0; color: #b52318; }
@media (max-width: 900px) {
  .hero, .panel-head { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
  textarea, pre { min-height: 320px; }
}