:root {
  color-scheme: light;
  --ink: #192039;
  --muted: #667085;
  --line: #dfe3eb;
  --soft: #f4f6fa;
  --blue: #303b97;
  --blue-dark: #222d79;
  --gold: #b79643;
  --danger: #b42318;
  --shadow: 0 20px 45px rgba(25, 32, 57, 0.12);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #e9edf4; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 75% 0%, rgba(48, 59, 151, 0.11), transparent 28rem),
    #eef1f6;
}

body.embedded-mode { min-height: 100vh; }
body.embedded-mode .workspace { min-height: 100vh; }

button, input { font: inherit; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: white;
  background: rgba(27, 34, 85, .96);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: baseline; gap: 14px; color: white; text-decoration: none; }
.brand-name { font-size: 1.7rem; font-weight: 900; letter-spacing: .055em; }
.brand-name::after { content: ""; display: block; width: 62%; height: 3px; margin-top: 1px; background: var(--gold); }
.brand-subtitle { color: #cdd2ef; font-size: .84rem; letter-spacing: .02em; }
.header-meta { display: flex; align-items: center; gap: 9px; color: #dfe2f6; font-size: .84rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 4px rgba(126,226,168,.13); }

.workspace {
  display: grid;
  grid-template-columns: minmax(330px, 470px) minmax(520px, 1fr);
  gap: 28px;
  max-width: 1680px;
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 56px) 48px;
}

.controls-panel, .preview-panel {
  border: 1px solid rgba(36, 43, 87, .08);
  border-radius: 18px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 32px rgba(25, 32, 57, .07);
}

.controls-panel { align-self: start; overflow: hidden; }
.panel-heading { padding: 28px 30px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #fff, #f7f8fc); }
.eyebrow { margin: 0 0 6px; color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; color: var(--ink); line-height: 1.15; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
.panel-heading > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

form { padding: 2px 30px 10px; }
fieldset { min-width: 0; margin: 0; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); }
legend { width: 100%; margin-bottom: 14px; padding: 0; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.field-grid { display: grid; gap: 14px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; color: #344054; font-size: .86rem; font-weight: 650; }
.field small, .choice-card small, .switch-row small { display: block; color: var(--muted); font-size: .74rem; font-weight: 450; line-height: 1.35; }
input[type="number"], input[type="text"] {
  width: 100%; min-height: 43px; border: 1px solid #cfd5df; border-radius: 9px; padding: 9px 11px;
  color: var(--ink); background: white; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48,59,151,.12); }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,24,.09); }
.input-with-unit { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.input-with-unit input { border-radius: 9px 0 0 9px; }
.input-with-unit > span { display: grid; place-items: center; align-self: stretch; min-width: 43px; border: 1px solid #cfd5df; border-left: 0; border-radius: 0 9px 9px 0; color: var(--muted); background: #f8f9fb; font-size: .76rem; }
.field-error { min-height: 1em; color: var(--danger); font-size: .73rem; font-weight: 600; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 11px; min-height: 72px; padding: 11px; border: 1px solid #d8dce5; border-radius: 11px; cursor: pointer; background: white; }
.choice-card:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), 0 5px 12px rgba(48,59,151,.09); background: #fafaff; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-visual { position: relative; width: 42px; height: 46px; border: 2px solid #313b57; border-bottom-width: 3px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(48,59,151,.04) 5px 6px); }
.regular-head { clip-path: polygon(9% 0, 91% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); }
.flat-head { border-radius: 3px 3px 0 0; }
.choice-visual::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 2px solid #313b57; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; }
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #c9ced8; transition: .18s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: .18s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(20px); }
.strip-position { margin-top: 16px; }
.strip-position.is-disabled { opacity: .45; }

.check-list { display: grid; gap: 8px; }
.check-list label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 11px; border: 1px solid #e0e3ea; border-radius: 9px; color: #344054; cursor: pointer; background: #fbfcfd; font-size: .85rem; font-weight: 600; }
.check-list input { width: 17px; height: 17px; accent-color: var(--blue); }

.export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px 30px 8px; }
.button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 58px; border-radius: 10px; padding: 10px 14px; cursor: pointer; text-align: left; font-size: .77rem; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button span { font-size: .95rem; font-weight: 900; letter-spacing: .04em; }
.button.primary { border: 1px solid var(--blue); color: white; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); box-shadow: 0 8px 18px rgba(48,59,151,.2); }
.button.secondary { border: 1px solid #cfd4e3; color: var(--blue-dark); background: white; }
.form-status { min-height: 22px; margin: 0; padding: 5px 30px 22px; color: var(--muted); font-size: .8rem; }
.form-status.error { color: var(--danger); }

.preview-panel { display: flex; flex-direction: column; min-width: 0; min-height: 760px; overflow: hidden; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.preview-badges { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.preview-badges span { padding: 5px 9px; border: 1px solid #d9deea; border-radius: 99px; color: var(--muted); background: #fafbfc; font-size: .69rem; font-weight: 700; }
.paper-stage { position: relative; display: grid; place-items: center; flex: 1; min-height: 670px; padding: 30px; overflow: auto; background-color: #d9dee8; background-image: linear-gradient(45deg, rgba(255,255,255,.32) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.32) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.32) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.32) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
#preview-image { display: block; width: min(100%, 760px); height: auto; aspect-ratio: 210 / 297; object-fit: contain; background: white; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; }
.paper-stage.is-ready #preview-image { opacity: 1; }
.loading-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(25,32,57,.12); font-size: .82rem; }
.paper-stage.is-ready .loading-card { display: none; }
.spinner { width: 16px; height: 16px; border: 2px solid #d8dcec; border-top-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview-note { margin: 0; padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .controls-panel { max-width: none; }
  .preview-panel { min-height: 850px; }
}

@media (max-width: 620px) {
  .app-header { min-height: 64px; padding: 10px 16px; }
  .brand-subtitle, .header-meta { display: none; }
  .workspace { padding: 14px 10px 30px; gap: 14px; }
  .controls-panel, .preview-panel { border-radius: 12px; }
  .panel-heading, form { padding-left: 18px; padding-right: 18px; }
  .two-columns, .choice-grid, .export-actions { grid-template-columns: 1fr; }
  .export-actions { padding-left: 18px; padding-right: 18px; }
  .form-status { padding-left: 18px; padding-right: 18px; }
  .preview-toolbar { align-items: flex-start; padding: 16px; }
  .preview-badges span:last-child { display: none; }
  .paper-stage { min-height: 500px; padding: 14px; }
}