:root {
  --bg-top: #f7f3eb;
  --bg-bottom: #dfeef7;
  --panel-bg: rgba(255, 250, 242, 0.82);
  --panel-border: rgba(168, 138, 105, 0.18);
  --text-main: #4a3323;
  --text-soft: #7f6750;
  --accent: #8b6238;
  --accent-soft: #f1c27b;
  --danger: #cb6d48;
  --ok: #4fa57a;
  --sheet-top: #f7efe0;
  --sheet-bottom: #ead8bb;
  --sheet-line: rgba(148, 114, 70, 0.11);
  --sheet-edge: rgba(160, 126, 83, 0.22);
  --ink-main: #4a3323;
  --field-bg: rgba(255, 253, 248, 0.78);
  --field-border: rgba(164, 129, 89, 0.24);
  --window-copy-leading: clamp(2.15rem, 3.9vw, 2.55rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: var(--text-main);
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  background: radial-gradient(circle at 15% 18%, rgba(246, 220, 180, 0.78) 0%, transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(185, 227, 244, 0.72) 0%, transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(248, 241, 228, 0.84) 0%, transparent 34%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  overflow: hidden;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-glow {
  position: fixed;
  width: 45vmax;
  height: 45vmax;
  filter: blur(66px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.bg-glow-left {
  left: -10vmax;
  top: 25vh;
  background: #f0d5a7;
}

.bg-glow-right {
  right: -12vmax;
  top: 10vh;
  background: #a3d7e7;
}

.app-header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 10;
  width: min(94vw, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 251, 246, 0.7);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(120, 87, 54, 0.12);
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-box {
  width: 96px;
  height: 34px;
  border: 1px solid rgba(148, 120, 86, 0.35);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  color: #71543c;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.58);
}

.brand-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #5b402c;
}

.header-center {
  display: flex;
  justify-content: center;
}

.header-center h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #7a5334;
  letter-spacing: 0.03em;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-footer {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 9;
  width: min(92vw, 1160px);
  border: 1px solid rgba(168, 138, 105, 0.18);
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  color: rgba(102, 75, 49, 0.84);
  background: rgba(255, 251, 246, 0.55);
  backdrop-filter: blur(12px);
  font-size: 0.86rem;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 248, 239, 0.74), rgba(224, 240, 248, 0.54));
  backdrop-filter: blur(10px);
}

.overlay-card {
  width: min(92vw, 1120px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 250, 244, 0.84);
  padding: 28px;
  box-shadow: 0 28px 70px rgba(131, 105, 75, 0.16);
  color: #4b3424;
}

.intro-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 20px;
  min-height: 560px;
  padding: 64px 48px 36px;
  text-align: center;
  background: linear-gradient(135deg, rgba(252, 247, 239, 0.96), rgba(219, 239, 248, 0.9));
}

.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 13% 72%, rgba(255, 255, 255, 0.95) 0 7%, transparent 7.2%),
    radial-gradient(circle at 20% 76%, rgba(255, 255, 255, 0.82) 0 10%, transparent 10.2%),
    radial-gradient(circle at 83% 26%, rgba(255, 255, 255, 0.82) 0 8%, transparent 8.2%),
    radial-gradient(circle at 88% 62%, rgba(255, 255, 255, 0.78) 0 9%, transparent 9.2%),
    linear-gradient(180deg, rgba(246, 229, 202, 0.26), rgba(187, 226, 245, 0.08));
  pointer-events: none;
}

.intro-card > * {
  position: relative;
  z-index: 1;
}

.intro-line {
  min-height: 1.4em;
  margin: 0;
  line-height: var(--window-copy-leading);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  max-width: 24em;
  margin-inline: auto;
}

.intro-hint {
  margin: 20px 0 0;
  color: rgba(101, 75, 53, 0.74);
  font-size: 0.92rem;
}

.scene-card-wrap {
  padding: 30px 28px 34px;
}

.scene-card-wrap h2 {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: #5f3f26;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.scene-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 210px;
  padding: 0 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(190, 160, 120, 0.26);
  background: rgba(255, 255, 255, 0.92);
  color: #4f3623;
  text-align: center;
  box-shadow: 0 18px 34px rgba(129, 101, 72, 0.14);
  cursor: pointer;
}

.scene-card::before {
  content: "";
  position: absolute;
  inset: 12px 12px auto 12px;
  height: 120px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.scene-card::after {
  content: "";
  position: absolute;
  inset: 22px 18px auto 18px;
  height: 84px;
  border-radius: 14px;
  background: linear-gradient(180deg, transparent 0 60%, rgba(255, 255, 255, 0.16) 60% 100%);
  pointer-events: none;
}

.scene-card strong,
.scene-card span {
  position: relative;
  z-index: 1;
}

.scene-card strong {
  font-size: 1.02rem;
  font-weight: 700;
}

.scene-card span {
  color: rgba(95, 73, 50, 0.72);
  font-size: 0.92rem;
}

.scene-card[data-scene="campfire"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(253, 245, 236, 0.96));
}

.scene-card[data-scene="campfire"]::before {
  background: linear-gradient(135deg, rgba(255, 232, 210, 0.96), rgba(255, 191, 120, 0.6)),
    radial-gradient(circle at 65% 70%, rgba(255, 148, 62, 0.95) 0 10%, transparent 10.2%),
    linear-gradient(180deg, rgba(255, 235, 220, 0.6), rgba(241, 208, 164, 0.9));
}

.scene-card[data-scene="hearth"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 244, 234, 0.96));
}

.scene-card[data-scene="hearth"]::before {
  background: linear-gradient(135deg, rgba(255, 237, 208, 0.9), rgba(196, 150, 100, 0.55)),
    radial-gradient(circle at 50% 62%, rgba(234, 129, 55, 0.95) 0 11%, transparent 11.2%),
    linear-gradient(180deg, rgba(255, 245, 232, 0.65), rgba(231, 192, 137, 0.86));
}

.scene-card[data-scene="sea"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 253, 0.96));
}

.scene-card[data-scene="sea"]::before {
  background: linear-gradient(135deg, rgba(199, 235, 248, 0.96), rgba(116, 173, 232, 0.58)),
    linear-gradient(180deg, rgba(234, 247, 255, 0.9), rgba(168, 204, 242, 0.86));
}

.scene-card[data-scene="white"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.96));
}

.scene-card[data-scene="white"]::before {
  background: linear-gradient(135deg, rgba(250, 250, 250, 0.95), rgba(236, 244, 251, 0.72)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 252, 0.9));
}

.scene-card:focus-visible,
.paper-swatch:focus-visible,
.scene-switch-card:focus-visible,
.btn:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="file"]:focus-visible {
  outline: 3px solid rgba(102, 156, 198, 0.35);
  outline-offset: 2px;
}

.panel {
  position: relative;
  z-index: 2;
  width: min(94vw, 1240px);
  margin: 90px auto 84px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 28px;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--text-main);
}

body.mode-burning .panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.985);
}

body[data-scene="campfire"] .panel {
  background: rgba(255, 248, 240, 0.52);
}

body[data-scene="hearth"] .panel {
  background: rgba(255, 247, 237, 0.52);
}

body[data-scene="sea"] .panel {
  background: rgba(244, 250, 255, 0.54);
}

body[data-scene="white"] .panel {
  background: rgba(250, 252, 255, 0.58);
}

.paper-panel::before {
  display: none;
}

.paper-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 18px;
  align-items: start;
}

.paper-sheet {
  position: relative;
  padding: 28px 24px 20px;
  border-radius: 24px;
  border: 1px solid var(--sheet-edge);
  background-image: repeating-linear-gradient(
      180deg,
      transparent,
      transparent 34px,
      var(--sheet-line) 34px,
      var(--sheet-line) 35px
    ),
    linear-gradient(180deg, var(--sheet-top), var(--sheet-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -26px 44px rgba(123, 92, 54, 0.1),
    0 14px 30px rgba(38, 24, 14, 0.12);
}

.paper-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.3), transparent 28%);
  pointer-events: none;
}

.paper-sheet::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 70px;
  height: 1px;
  background: rgba(161, 82, 66, 0.22);
  pointer-events: none;
}

.form-panel {
  margin-top: 0;
  transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin 220ms ease, padding 220ms ease;
  max-height: 820px;
  overflow: hidden;
}

body[data-paper-style="warm"] .form-panel {
  background-image: repeating-linear-gradient(
      180deg,
      transparent,
      transparent 34px,
      rgba(166, 118, 63, 0.14) 34px,
      rgba(166, 118, 63, 0.14) 35px
    ),
    linear-gradient(180deg, #f4dfbf, #d2b286);
}

body[data-paper-style="cold"] .form-panel {
  background-image: repeating-linear-gradient(
      180deg,
      transparent,
      transparent 34px,
      rgba(98, 129, 161, 0.14) 34px,
      rgba(98, 129, 161, 0.14) 35px
    ),
    linear-gradient(180deg, #eff4f9, #d9e5f1);
}

body[data-paper-style="ember"] .form-panel {
  background-image: repeating-linear-gradient(
      180deg,
      transparent,
      transparent 34px,
      rgba(136, 91, 48, 0.16) 34px,
      rgba(136, 91, 48, 0.16) 35px
    ),
    linear-gradient(180deg, #f1dfc8, #cda984);
}

body.mode-burning .form-panel,
body.mode-burned .form-panel {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.input-area {
  margin-top: 18px;
}

textarea {
  width: 100%;
  min-height: 122px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--ink-main);
  padding: 16px 18px;
  line-height: 1.6;
  outline: none;
  font-size: 1.02rem;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

textarea:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(216, 151, 72, 0.2);
}

input[type="file"] {
  width: 100%;
  border-radius: 14px;
  border: 1px dashed var(--field-border);
  background: var(--field-bg);
  color: var(--text-soft);
  padding: 12px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body[data-paper-style="warm"] label {
  color: #7f5631;
}

body[data-paper-style="warm"] textarea,
body[data-paper-style="warm"] input[type="file"] {
  border-color: rgba(157, 109, 60, 0.34);
  background: rgba(255, 244, 225, 0.78);
  color: #4f3420;
}

body[data-paper-style="cold"] label {
  color: #4e6480;
}

body[data-paper-style="cold"] textarea,
body[data-paper-style="cold"] input[type="file"] {
  border-color: rgba(92, 123, 156, 0.34);
  background: rgba(241, 247, 253, 0.82);
  color: #2f465d;
}

body[data-paper-style="ember"] label {
  color: #6a4529;
}

body[data-paper-style="ember"] textarea,
body[data-paper-style="ember"] input[type="file"] {
  border-color: rgba(134, 86, 46, 0.34);
  background: rgba(249, 234, 214, 0.76);
  color: #3e2918;
}

.upload-area {
  margin-top: 18px;
}

.image-preview {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(160, 126, 83, 0.2);
  background: rgba(255, 251, 244, 0.7);
  display: grid;
  gap: 10px;
  justify-items: center;
  transition: background-color 180ms ease, border-color 180ms ease;
}

body[data-paper-style="warm"] .image-preview {
  border-color: rgba(160, 109, 63, 0.28);
  background: rgba(255, 242, 220, 0.72);
}

body[data-paper-style="cold"] .image-preview {
  border-color: rgba(104, 131, 162, 0.26);
  background: rgba(239, 246, 252, 0.78);
}

body[data-paper-style="ember"] .image-preview {
  border-color: rgba(132, 84, 42, 0.3);
  background: rgba(248, 232, 211, 0.7);
}

.image-preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(32vh, 260px);
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(150, 119, 84, 0.18);
  background: rgba(255, 255, 255, 0.65);
}

.image-preview .btn {
  min-height: 40px;
}

#paperStyleSelect {
  display: none !important;
}

.writing-tools {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 12px;
  align-self: start;
  padding: 14px 12px;
  border-radius: 20px;
  border: 1px solid rgba(179, 147, 112, 0.2);
  background: rgba(255, 250, 243, 0.78);
  box-shadow: 0 8px 20px rgba(150, 121, 88, 0.1);
}

.tool-card {
  padding: 10px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tool-card + .tool-card {
  border-top: 1px solid rgba(170, 140, 107, 0.2);
  padding-top: 14px;
}

.tool-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #6a482d;
}

.paper-style-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.paper-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(161, 130, 96, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, #f7efd8, #ead7b6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.paper-swatch-warm {
  background: linear-gradient(180deg, #f4dfbf, #d2b286);
}

.paper-swatch-cold {
  background: linear-gradient(180deg, #eff4f9, #d9e5f1);
}

.paper-swatch-ember {
  background: linear-gradient(180deg, #f1dfc8, #cda984);
}

.paper-swatch.is-active {
  box-shadow: 0 0 0 2px rgba(127, 90, 46, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

.scene-switch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.scene-switch-card {
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(161, 130, 96, 0.25);
  background: rgba(255, 248, 240, 0.95);
  color: #6a492d;
  cursor: pointer;
}

.scene-switch-card.is-active {
  background: linear-gradient(135deg, rgba(75, 117, 159, 0.14), rgba(239, 181, 110, 0.14));
  border-color: rgba(120, 93, 61, 0.34);
}

.tool-card-audio {
  padding: 14px 16px;
}

.tool-card-audio .btn {
  width: 100%;
}

.hidden {
  display: none !important;
}

.action-layout {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.primary-actions {
  display: flex;
  justify-content: center;
}

.primary-actions .btn-ignite {
  width: min(100%, 360px);
}

.utility-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.scene-subtitle {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text-soft);
}

.scene-title-text {
  display: none;
}

.guide-text {
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
}

.btn,
select {
  border-radius: 10px;
  border: 1px solid rgba(119, 153, 173, 0.26);
  background: rgba(255, 251, 244, 0.86);
  color: var(--text-main);
  min-height: 44px;
  padding: 0 12px;
  box-shadow: 0 8px 18px rgba(148, 122, 91, 0.08);
}

.btn {
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent-soft);
}

.btn-primary {
  background: linear-gradient(135deg, #2558a7, #45c1d8);
  border-color: rgba(146, 223, 244, 0.75);
  color: #f8fdff;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(157, 134, 107, 0.22);
}

.btn-ignite {
  min-height: 50px;
  font-weight: 700;
}

.result-area {
  margin-top: 22px;
  border-top: 1px dashed rgba(130, 100, 63, 0.18);
  padding-top: 18px;
}

.result-area h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.status {
  margin: 0;
  color: var(--text-soft);
}

.result {
  margin-top: 8px;
  min-height: 84px;
  line-height: 1.8;
  color: #433221;
}

.result-poem {
  white-space: pre-line;
  text-align: center;
  font-size: 1.16rem;
  line-height: 1.72;
  letter-spacing: 0.02em;
  padding: 4px 2px;
}

.completion-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

body.mode-burned .panel {
  width: min(94vw, 1080px);
  padding: 28px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.mode-burned .paper-shell,
body.mode-burned .action-layout {
  display: none;
}

body.mode-burned .result-area {
  width: min(88vw, 840px);
  margin: 102px auto 0;
  padding: 46px 52px 40px;
  border: 1px solid rgba(183, 167, 143, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.82), transparent 36%),
    radial-gradient(circle at 82% 78%, rgba(210, 236, 246, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.94), rgba(246, 239, 227, 0.9));
  box-shadow:
    0 26px 70px rgba(116, 153, 159, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
  animation: complete-window-fade-in 1.2s ease-out both;
}

@keyframes complete-window-fade-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

body.mode-burned .result-area h2,
body.mode-burned .status,
body.mode-burned .progress-wrap {
  display: none;
}

body.mode-burned .result {
  min-height: auto;
  margin-top: 0;
  color: #5a3f2a;
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  line-height: var(--window-copy-leading);
  letter-spacing: 0.02em;
}

body.mode-burned .result-poem {
  line-height: var(--window-copy-leading);
  padding: 0;
  letter-spacing: 0.01em;
}

body.mode-burned .completion-actions {
  justify-content: center;
  grid-template-columns: repeat(2, minmax(148px, 214px));
  gap: 14px;
  margin-top: 24px;
}

body.mode-burned .completion-actions .btn {
  min-height: 52px;
  font-size: 1.02rem;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(140, 118, 92, 0.18);
}

.progress-wrap {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(117, 149, 173, 0.12);
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9f45, #ffd174);
  box-shadow: 0 0 12px rgba(255, 182, 88, 0.6);
  transition: width 120ms linear;
}

.btn:disabled,
select:disabled,
textarea:disabled,
input[type="file"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.status-burning {
  color: var(--danger);
}

.status-ready {
  color: var(--ok);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(244, 237, 229, 0.54);
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(90vw, 520px);
  border-radius: 18px;
  padding: 20px;
  background: rgba(255, 250, 244, 0.96);
  border: 1px solid rgba(138, 111, 76, 0.24);
  box-shadow: 0 18px 48px rgba(127, 99, 67, 0.16);
}

.modal-card h3 {
  margin: 0;
}

.modal-card p {
  margin: 8px 0 14px;
  color: var(--text-soft);
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.qr-item {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.qr-placeholder {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px dashed rgba(112, 88, 58, 0.45);
  background: repeating-linear-gradient(
      45deg,
      rgba(92, 73, 48, 0.08),
      rgba(92, 73, 48, 0.08) 8px,
      rgba(255, 255, 255, 0.46) 8px,
      rgba(255, 255, 255, 0.46) 16px
    );
  display: grid;
  place-items: center;
  color: rgba(74, 58, 38, 0.7);
  font-size: 0.9rem;
}

.perf-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: min(44vw, 180px);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(6px);
  font-size: 0.86rem;
  color: var(--text-soft);
}

.perf-panel h3 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #85633d;
}

.perf-panel p {
  margin: 3px 0;
}

.perf-panel span {
  color: #5f472f;
}

body.mode-burning .panel,
body.mode-burned .panel {
  width: min(92vw, 1080px);
}

.hidden {
  display: none !important;
}

#paperStyleSelect {
  display: none !important;
}

@media (max-width: 1100px) {
  .paper-shell {
    grid-template-columns: 1fr;
  }

  .writing-tools {
    position: static;
    grid-template-columns: 1fr;
  }

  .tool-card {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .app-header {
    top: 8px;
    width: calc(100vw - 16px);
    gap: 8px;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .brand-wrap {
    gap: 8px;
  }

  .logo-box {
    width: 72px;
  }

  .brand-title {
    font-size: 1.2rem;
  }

  .header-center h2 {
    font-size: 1.1rem;
    text-align: center;
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions .btn {
    min-height: 38px;
    padding: 0 8px;
    font-size: 0.82rem;
  }

  .panel {
    margin: 82px auto 78px;
    padding: 16px;
  }

  .overlay-card {
    padding: 18px;
  }

  .intro-card {
    min-height: 480px;
    padding: 48px 24px 28px;
  }

  .scene-grid {
    grid-template-columns: 1fr;
  }

  .scene-card {
    min-height: 180px;
  }

  .paper-shell {
    grid-template-columns: 1fr;
  }

  .writing-tools {
    position: static;
    grid-template-columns: 1fr;
  }

  .tool-card h3 {
    font-size: 0.92rem;
  }

  .scene-switch-card {
    min-height: 48px;
  }

  .primary-actions {
    grid-template-columns: 1fr;
  }

  .utility-bar {
    grid-template-columns: 1fr;
  }

  .perf-panel {
    width: auto;
    left: 10px;
    right: 10px;
    bottom: 54px;
  }

  .app-footer {
    width: calc(100vw - 16px);
    bottom: 8px;
  }

  .completion-actions,
  .qr-grid {
    grid-template-columns: 1fr;
  }

  body.mode-burned .result-area {
    width: min(92vw, 840px);
    margin-top: 92px;
    padding: 30px 22px 26px;
  }

  body.mode-burned .result {
    font-size: clamp(1.1rem, 5vw, 1.34rem);
    line-height: 2;
  }
}