:root {
  --flash-green: #194f45;
  --flash-leaf: #2f6f5e;
  --flash-cream: #fff9e9;
  --flash-paper: #fffdf8;
  --flash-yellow: #f8c63f;
  --flash-ink: #193d38;
  --flash-muted: #62766d;
  --flash-line: #ded7c5;
}

body.flash-card-page {
  margin: 0;
  color: var(--flash-ink);
  background:
    radial-gradient(circle at 13% 8%, rgba(248, 198, 63, .16), transparent 21rem),
    radial-gradient(circle at 89% 32%, rgba(111, 158, 114, .12), transparent 24rem),
    var(--flash-cream);
}

.flash-card-wrap {
  width: min(1220px, calc(100% - 32px));
  margin: 24px auto 70px;
}

.flash-hero {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 34px 42px 38px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .04), transparent 36%),
    linear-gradient(135deg, #123f37, #1f5a4c 64%, #34725c);
  box-shadow: 0 24px 60px rgba(25, 79, 69, .2);
}

.flash-hero::before,
.flash-hero::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  transform: rotate(10deg);
}

.flash-hero::before { width: 218px; height: 142px; right: 85px; top: -52px; }
.flash-hero::after { width: 154px; height: 98px; right: 28px; bottom: -52px; transform: rotate(-12deg); }

.hero-copy { max-width: 760px; position: relative; z-index: 1; }
.back-link { display: inline-block; margin-bottom: 24px; color: #fff; font-size: .88rem; font-weight: 900; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.eyebrow { margin: 0 0 5px; color: #487067; font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.flash-hero .eyebrow { color: #ffe59c; }
.flash-hero h1 { margin: 0 0 10px; color: #fff; font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; }
.flash-hero h1 span { display: inline-block; margin-right: 8px; transform: rotate(-5deg); }
.flash-hero p:not(.eyebrow) { max-width: 670px; margin: 0; color: rgba(255,255,255,.86); font-size: 1.05rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-points span { padding: 6px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; font-size: .78rem; font-weight: 900; }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: start;
  gap: 24px;
  margin-top: 24px;
}

.builder { display: grid; gap: 18px; }
.panel,
.preview-panel,
.download-panel {
  border: 1px solid rgba(213, 203, 181, .9);
  border-radius: 19px;
  background: rgba(255, 253, 248, .95);
  box-shadow: 0 12px 34px rgba(40, 76, 62, .09);
}

.panel { padding: 24px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.panel-heading.compact { margin-bottom: 6px; }
.panel-heading h2,
.download-panel h2,
.preview-heading h2 { margin: 0; color: #194f45; font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.4rem; line-height: 1.2; }
.step-number { float: left; display: grid; place-items: center; width: 32px; height: 32px; margin: 2px 11px 0 0; border-radius: 10px; background: #edf5df; color: #295a49; font-size: .9rem; font-weight: 900; }
.field-label { display: block; margin-bottom: 8px; color: #2c4d43; font-size: .88rem; font-weight: 900; }

.terms-textarea {
  width: 100%;
  min-height: 238px;
  resize: vertical;
  padding: 17px 18px;
  border: 2px solid #d8ddcf;
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: #213f37;
  font: 700 1.1rem/1.65 'Nunito', 'Noto Sans SC', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.terms-textarea:focus { border-color: #4c8672; box-shadow: 0 0 0 4px rgba(76, 134, 114, .12); }
.input-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 8px; }
.field-help { margin: 0; color: var(--flash-muted); font-size: .82rem; }
.term-count { flex: 0 0 auto; margin: 0; color: #2c6956; font-size: .78rem; font-weight: 900; }

.ghost-button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #bdd0c6;
  border-radius: 999px;
  background: #fff;
  color: #285648;
  font: 900 .78rem 'Nunito', sans-serif;
  cursor: pointer;
}
.ghost-button:hover { border-color: #477967; background: #f6faef; }

.library-drawer { margin-top: 18px; border-top: 1px solid #e6dfcf; padding-top: 14px; }
.library-drawer > summary { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; color: #285648; cursor: pointer; list-style: none; }
.library-drawer > summary::-webkit-details-marker { display: none; }
.library-drawer > summary > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff0b5; }
.library-drawer summary strong,
.library-drawer summary small { display: block; }
.library-drawer summary strong { font-size: .86rem; }
.library-drawer summary small { margin-top: 1px; color: #718078; font-size: .71rem; }
.library-drawer[open] > summary { margin-bottom: 12px; }
.library-drawer .lib-picker { margin-bottom: 0; }

.detected-list { max-height: 332px; margin-top: 14px; overflow: auto; border: 1px solid #e2dccd; border-radius: 12px; background: #fbfaf4; }
.detected-row { display: grid; grid-template-columns: minmax(78px, .55fr) 18px minmax(130px, 1fr) minmax(130px, 1fr); align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #eae5d8; }
.detected-row:last-child { border-bottom: 0; }
.detected-zh { overflow: hidden; color: #173e34; font-size: 1.04rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.detected-arrow { color: #99a9a1; text-align: center; }
.detected-row input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #cdd8d1; border-radius: 8px; background: #fff; color: #385d53; font: 700 .88rem 'Nunito', sans-serif; }
.detected-row input:focus { outline: 2px solid rgba(47,111,94,.22); border-color: #4c8672; }
.empty-state { margin: 0; padding: 25px 16px; color: #78877f; font-size: .84rem; text-align: center; }

.side-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.side-options { min-width: 0; margin: 0; padding: 14px; border: 1px solid #d9dfd4; border-radius: 13px; background: #fbfcf6; }
.side-options legend { padding: 0 6px; color: #285648; font-size: .84rem; font-weight: 900; }
.side-options legend span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 8px; background: #194f45; color: #fff; font-size: .7rem; }
.side-options label { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border: 1px solid #e0e4da; border-radius: 9px; background: #fff; color: #3c5e54; font-size: .84rem; font-weight: 900; cursor: pointer; }
.side-options label:has(input:checked) { border-color: #6f9e72; background: #edf5df; color: #194f45; }
.side-options input { width: 17px; height: 17px; margin: 0; accent-color: #2f6f5e; }
.display-status { min-height: 18px; margin: 9px 0 0; color: #b25142; font-size: .76rem; font-weight: 800; }

.color-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.color-swatch { width: 34px; height: 34px; padding: 0; border: 4px solid #fff; border-radius: 50%; outline: 1px solid #d1d8d2; background: var(--swatch); box-shadow: 0 1px 3px rgba(0,0,0,.13); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .color-swatch:hover { transform: translateY(-2px); }
}
.color-swatch.is-selected { outline: 3px solid #f3c64d; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #bc8e13; }
.custom-color { display: inline-flex; align-items: center; gap: 9px; color: #4f665d; font-size: .78rem; font-weight: 900; }
.custom-color input { width: 43px; height: 34px; padding: 2px; border: 1px solid #cbd4ce; border-radius: 8px; background: #fff; cursor: pointer; }

.download-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 21px 22px; color: #fff; border-color: transparent; background: linear-gradient(135deg, #194f45, #286654); }
.download-panel h2 { color: #fff; font-size: 1.18rem; }
.download-panel p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: .78rem; line-height: 1.45; }
.download-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; background: rgba(255,255,255,.09); color: #ffe29a; font-size: 1.35rem; font-weight: 900; }
.download-button { grid-column: 1 / -1; width: 100%; margin-top: 14px; padding: 13px 18px; border: 0; border-radius: 11px; background: #f8c63f; color: #153b33; font: 900 .95rem 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 7px 16px rgba(0,0,0,.13); }
@media (hover: hover) and (pointer: fine) {
  .download-button:hover:not(:disabled) { background: #ffda6d; transform: translateY(-1px); }
}
.download-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .5; }
.generation-status { grid-column: 1 / -1; min-height: 18px; text-align: center; }
.generation-status[data-state="error"] { color: #ffd0c9; }
.generation-status[data-state="success"] { color: #d9f1b7; }

.preview-panel { position: sticky; top: 18px; padding: 22px; }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.side-switch { display: flex; padding: 3px; border: 1px solid #d5ddcf; border-radius: 999px; background: #f0f4e9; }
.side-switch button { padding: 6px 11px; border: 0; border-radius: 999px; background: transparent; color: #65776f; font: 900 .72rem 'Nunito', sans-serif; cursor: pointer; }
.side-switch button.is-active { background: #194f45; color: #fff; box-shadow: 0 2px 5px rgba(25,79,69,.25); }
.preview-note { display: flex; align-items: flex-start; gap: 7px; margin: 13px 0; padding: 9px 11px; border-radius: 10px; background: #fff5cd; color: #6d5c25; font-size: .74rem; line-height: 1.4; }
.preview-note span:first-child { color: #c88d0b; }

.sheet-preview { position: relative; width: 100%; aspect-ratio: 8.5 / 11; padding: 4.1% 4.4%; overflow: hidden; border: 1px solid #ddd7ca; background: #fff; box-shadow: 0 13px 32px rgba(40,60,52,.18); }
.sheet-preview::after { position: absolute; right: 8px; bottom: 6px; content: 'LETTER · 8.5 × 11'; color: #a6aaa5; font-size: clamp(5px, 1vw, 8px); font-weight: 800; letter-spacing: .07em; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); width: 100%; height: 100%; gap: 1.1%; }
.preview-card { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; border: clamp(2px, .52vw, 4px) solid var(--card-border); border-radius: clamp(5px, 1.2vw, 10px); background: #fff; text-align: center; }
.preview-card.is-empty { border-color: #edf0eb; border-style: dashed; }
.preview-card-content { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 90%; gap: clamp(2px, .45vw, 6px); overflow: hidden; }
.preview-line { max-width: 100%; overflow: hidden; color: #315f55; font-family: 'Nunito', Arial, sans-serif; font-size: clamp(var(--line-size-min), var(--line-size-fluid), var(--line-size-max)); font-weight: 800; line-height: 1.16; overflow-wrap: anywhere; white-space: pre-line; }
.preview-line--zh { color: #c3c3c3; font-family: 'KaiTi', 'STKaiti', 'Kaiti SC', '楷体', serif; font-weight: 400; }
.preview-line--en { color: #60756d; }

.page-navigation { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 15px; color: #526a61; font-size: .76rem; font-weight: 900; }
.page-navigation button { display: grid; place-items: center; width: 32px; height: 28px; border: 1px solid #d2dbd5; border-radius: 8px; background: #fff; color: #315f52; font-weight: 900; cursor: pointer; }
.page-navigation button:disabled { cursor: default; opacity: .35; }
.print-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 12px; color: #63766e; font-size: .72rem; font-weight: 800; }
.print-key span { display: inline-flex; align-items: center; gap: 6px; }
.print-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.front-dot { background: #f0b429; }
.back-dot { background: #2f6f5e; }

@media (max-width: 960px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .preview-panel { position: static; width: min(620px, 100%); margin: 0 auto; order: -1; }
}

@media (max-width: 600px) {
  .flash-card-wrap { width: min(100% - 20px, 1220px); margin-top: 10px; }
  .flash-hero { min-height: 0; padding: 25px 22px 29px; border-radius: 17px; }
  .flash-hero h1 { font-size: 2rem; }
  .flash-hero p:not(.eyebrow) { font-size: .92rem; }
  .panel,
  .preview-panel { padding: 18px; border-radius: 15px; }
  .panel-heading { align-items: flex-start; }
  .input-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .detected-row { grid-template-columns: 66px 12px minmax(0, 1fr); padding-inline: 9px; }
  .detected-row input:last-child { grid-column: 3; }
  .side-options-grid { grid-template-columns: 1fr; }
  .preview-heading { align-items: stretch; flex-direction: column; }
  .side-switch { align-self: flex-start; }
}

@media print {
  .flash-card-wrap,
  .site-main-nav,
  .site-main-footer,
  .tool-learning-guide { display: none !important; }
}