:root {
  color-scheme: light;
  --ink: #182035;
  --muted: #667089;
  --line: rgb(104 112 156 / 16%);
  --glass: rgb(255 255 255 / 78%);
  --violet: #5d5cf2;
  --violet-dark: #4442ce;
  --cyan: #22a7c3;
  --red: #b7465a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
  background: linear-gradient(135deg, #6f4cf5 0%, #9171f7 24%, #4ba7ef 58%, #65bce8 78%, #8c77ee 100%);
  background-attachment: fixed;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgb(255 255 255 / 8%), transparent 34%),
    linear-gradient(315deg, rgb(255 255 255 / 12%), transparent 40%);
}

button, input, select { font: inherit; }
h1, h2, p { margin-top: 0; }

.page-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 22px;
}

.topbar {
  min-height: 76px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

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

.brand-mark {
  width: 44px;
  height: 44px;
  padding: 9px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  background: rgb(255 255 255 / 20%);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
  backdrop-filter: blur(12px);
}

.brand-mark i { width: 5px; background: #fff; border-radius: 2px; }
.brand-mark i:nth-child(1) { height: 12px; opacity: .72; }
.brand-mark i:nth-child(2) { height: 22px; }
.brand-mark i:nth-child(3) { height: 17px; opacity: .84; }

.eyebrow {
  margin: 0 0 2px;
  color: rgb(255 255 255 / 70%);
  font-size: 10px;
  font-weight: 750;
}

h1 { margin-bottom: 0; font-size: 25px; line-height: 1.2; }
h2 { margin-bottom: 5px; font-size: 19px; }

.system-state {
  min-height: 38px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  background: rgb(255 255 255 / 15%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 19px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
  backdrop-filter: blur(12px);
  font-size: 12px;
  white-space: nowrap;
}

.state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #63e6ae;
  box-shadow: 0 0 0 4px rgb(99 230 174 / 18%);
}

.workspace {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: 24px;
}

.input-pane, .output-pane {
  min-width: 0;
  padding: clamp(26px, 3.5vw, 44px);
  background: var(--glass);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgb(48 42 129 / 25%), inset 0 1px 0 rgb(255 255 255 / 70%);
  backdrop-filter: blur(30px) saturate(130%);
}

.output-pane { background: rgb(255 255 255 / 86%); }

.section-heading {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.step {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, var(--violet), #7877ff);
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 8px;
  box-shadow: 0 7px 18px rgb(93 92 242 / 26%);
  font-size: 11px;
  font-weight: 800;
}

form > label, .field label {
  display: block;
  margin: 17px 0 7px;
  color: #343b50;
  font-size: 12px;
  font-weight: 720;
}

input, select {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  color: var(--ink);
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(106 114 153 / 20%);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgb(57 62 94 / 4%);
  outline: none;
}

input::placeholder { color: #9ba2b4; }
input:focus, select:focus {
  background: #fff;
  border-color: rgb(93 92 242 / 62%);
  box-shadow: 0 0 0 3px rgb(93 92 242 / 12%);
}

select { padding-right: 38px; cursor: pointer; }

.selector-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 0 12px;
}

.template-summary {
  min-height: 30px;
  margin: 9px 0 0;
  padding: 8px 10px;
  color: #68728a;
  background: rgb(93 92 242 / 6%);
  border-left: 2px solid rgb(93 92 242 / 50%);
  font-size: 11px;
  line-height: 1.45;
}

.presentation-field { margin-top: 12px; }
.presentation-field label { display: block; margin: 0 0 7px; color: #343b50; font-size: 12px; font-weight: 720; }
.field-note { margin: 7px 0 0; color: var(--muted); font-size: 11px; }

details { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
summary { width: max-content; color: var(--violet-dark); cursor: pointer; font-size: 12px; font-weight: 720; }
.advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.wide-field { grid-column: 1 / -1; }
.form-actions { margin-top: 26px; }

#generate-button {
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  color: #fff;
  background: linear-gradient(135deg, #5958ec, #6977f7 52%, #4d9fe7);
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgb(78 77 214 / 24%), inset 0 1px 0 rgb(255 255 255 / 25%);
  cursor: pointer;
  font-weight: 750;
}

#generate-button:hover { filter: brightness(.97); transform: translateY(-1px); }
#generate-button:disabled { cursor: wait; opacity: .62; transform: none; }
.submit-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.output-switch {
  height: 40px;
  margin-bottom: 18px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgb(91 98 137 / 8%);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.output-switch button {
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
}

.output-switch button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 7px rgb(55 61 93 / 10%);
}

.preview-state { min-height: 610px; }
.preview-meta {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}
.preview-meta span:last-child { color: var(--violet-dark); font-weight: 740; }

.phone-preview {
  --preview-primary: #286b57;
  --preview-accent: #d08035;
  width: min(326px, 100%);
  aspect-ratio: 326 / 630;
  margin: 0 auto;
  padding: 9px;
  position: relative;
  overflow: hidden;
  background: #202325;
  border: 1px solid rgb(13 16 18 / 65%);
  border-radius: 28px;
  box-shadow: 0 22px 48px rgb(33 40 55 / 22%), inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.phone-speaker {
  width: 60px;
  height: 5px;
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  background: #16191a;
  border-radius: 3px;
}

.phone-screen {
  height: 100%;
  overflow: hidden;
  color: #242927;
  background: #f3f5f2;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

.phone-status {
  height: 28px;
  padding: 8px 15px 0;
  display: flex;
  justify-content: space-between;
  color: #56605c;
  background: #fff;
  font-size: 8px;
  font-weight: 650;
}

.phone-appbar {
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid #e5e9e5;
}
.phone-appbar strong { max-width: 190px; display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.phone-appbar small { max-width: 205px; margin-top: 2px; display: block; overflow: hidden; color: #7a837f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.preview-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--preview-primary);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
}
.preview-icon[data-icon="card"] { color: var(--preview-primary); background: #fff; border: 3px solid var(--preview-primary); }
.preview-icon[data-icon="grid"] { background: linear-gradient(135deg, var(--preview-primary) 50%, var(--preview-accent) 50%); }
.preview-icon[data-icon="document"] { color: var(--preview-primary); background: #fff; border: 1px solid #cfd7d2; border-left: 6px solid var(--preview-primary); }
.preview-icon[data-icon="compass"] { background: var(--preview-primary); border: 4px solid #dfe8e3; border-radius: 50%; }
.preview-icon[data-icon="check"] { color: transparent; background: var(--preview-primary); border-radius: 50%; }
.preview-icon[data-icon="check"]::after { width: 13px; height: 7px; content: ""; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }

.preview-content { height: calc(100% - 86px); padding: 16px 14px 20px; position: relative; overflow: hidden; }
.pv-heading { margin-bottom: 12px; }
.pv-heading small, .pv-focus-label { color: var(--preview-primary); font-size: 8px; font-weight: 760; }
.pv-heading h3 { margin: 3px 0 0; font-size: 18px; }

.pv-panel { padding: 13px; background: #fff; border: 1px solid #e0e5e1; border-radius: 6px; }
.pv-field { min-width: 0; margin-bottom: 9px; padding: 8px 9px; background: #f1f4f1; border-left: 3px solid #d9dfda; }
.pv-field small { display: block; color: #7a837f; font-size: 7px; }
.pv-field b, .pv-field span { margin-top: 3px; display: block; overflow: hidden; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.pv-field-detail span { height: 28px; white-space: normal; }
.pv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pv-primary-action, .pv-quiet-action { height: 34px; display: grid; place-items: center; font-size: 9px; font-weight: 740; }
.pv-primary-action { color: #fff; background: var(--preview-primary); }
.pv-quiet-action { margin-top: 7px; color: var(--preview-primary); background: #fff; border: 1px solid #dbe2dd; }

.pv-metrics { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pv-metrics div { height: 54px; display: grid; place-content: center; justify-items: center; background: #fff; border: 1px solid #e0e5e1; border-radius: 5px; }
.pv-metrics b { font-size: 17px; }
.pv-metrics small { color: #7a837f; font-size: 7px; }
.pv-section-title { margin: 10px 0 6px; display: flex; justify-content: space-between; font-size: 9px; }
.pv-section-title span { color: var(--preview-primary); }
.pv-record { min-height: 52px; margin-bottom: 7px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid #e0e5e1; border-radius: 5px; }
.pv-record div { min-width: 0; }
.pv-record b, .pv-record small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-record b { font-size: 10px; }
.pv-record small { margin-top: 4px; color: #7a837f; font-size: 7px; }
.pv-record > span { flex: 0 0 auto; color: var(--preview-primary); font-size: 8px; font-weight: 700; }
.pv-fab { width: 38px; height: 38px; position: absolute; right: 15px; bottom: 18px; display: grid; place-items: center; color: #fff; background: var(--preview-primary); border-radius: 50%; box-shadow: 0 7px 16px rgb(30 55 45 / 24%); font-size: 20px; }

.pv-tabs { height: 34px; margin-bottom: 10px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid #e0e5e1; border-radius: 5px; overflow: hidden; }
.pv-tabs > * { display: grid; place-items: center; color: #7a837f; font-size: 8px; }
.pv-tabs b { color: #fff; background: var(--preview-primary); }

.pv-timeline { margin: 4px 0 16px 4px; }
.pv-timeline > div { min-height: 62px; padding-left: 25px; position: relative; }
.pv-timeline > div::before { width: 1px; position: absolute; top: 12px; bottom: -4px; left: 6px; content: ""; background: #ccd5cf; }
.pv-timeline > div:last-child::before { display: none; }
.pv-timeline i { width: 13px; height: 13px; position: absolute; top: 1px; left: 0; background: #fff; border: 3px solid #c8d0cb; border-radius: 50%; }
.pv-timeline .done i { border-color: var(--preview-primary); background: var(--preview-primary); }
.pv-timeline b, .pv-timeline small { display: block; }
.pv-timeline b { font-size: 10px; }
.pv-timeline small { margin-top: 4px; color: #7a837f; font-size: 7px; }

.pv-focus-label { margin-bottom: 7px; }
.pv-focus-card { min-height: 260px; padding: 20px 17px; display: flex; flex-direction: column; justify-content: center; background: #fff; border-top: 5px solid var(--preview-primary); box-shadow: 0 12px 26px rgb(34 45 40 / 9%); }
.pv-focus-card small { color: #7a837f; font-size: 8px; }
.pv-focus-card h3 { margin: 8px 0 12px; font-size: 19px; }
.pv-focus-card p { max-height: 70px; margin: 0; overflow: hidden; color: #5e6763; font-size: 9px; line-height: 1.6; }
.pv-focus-card div { margin-top: 18px; display: flex; gap: 6px; }
.pv-focus-card span { padding: 6px 8px; color: var(--preview-primary); background: #edf3ef; font-size: 7px; }

.pv-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pv-catalog div { min-height: 56px; padding: 9px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e5e1; border-radius: 5px; }
.pv-catalog i { color: var(--preview-accent); font-size: 8px; font-style: normal; font-weight: 780; }
.pv-catalog span { font-size: 8px; font-weight: 680; }
.pv-preview-error { padding: 14px; color: var(--red); background: #fff; border-left: 3px solid var(--red); font-size: 10px; }

.idle-state {
  min-height: 397px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 19px;
  color: var(--muted);
  background: rgb(255 255 255 / 34%);
  border: 1px dashed rgb(93 92 242 / 28%);
  border-radius: 7px;
}

.idle-state p { margin: 0; font-size: 12px; }
.package-mark { display: flex; gap: 10px; }
.package-mark span {
  width: 64px;
  height: 78px;
  display: grid;
  place-items: center;
  color: var(--violet-dark);
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgb(93 92 242 / 18%);
  border-radius: 7px;
  box-shadow: 0 12px 26px rgb(64 67 135 / 10%);
  font-size: 13px;
  font-weight: 800;
}
.package-mark span:last-child { color: #14758e; border-color: rgb(34 167 195 / 23%); }

.progress-state { min-height: 397px; padding-top: 126px; }
.progress-track { height: 6px; overflow: hidden; background: rgb(93 92 242 / 10%); border-radius: 3px; }
.progress-track span {
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  animation: progress 1.25s ease-in-out infinite alternate;
}
.progress-state p { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
@keyframes progress { from { transform: translateX(-10%); } to { transform: translateX(175%); } }

.error-state {
  padding: 15px;
  color: var(--red);
  background: rgb(255 240 244 / 88%);
  border-left: 3px solid var(--red);
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
}

.result-state dl { margin: 0; border-top: 1px solid var(--line); }
.result-state dl div {
  min-height: 44px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
dt { color: var(--muted); font-size: 11px; }
dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 650; }

.download-actions { margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.download-actions a {
  min-height: 44px;
  padding: 11px 12px;
  display: block;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
}
.primary-link { background: var(--violet); box-shadow: 0 8px 18px rgb(93 92 242 / 20%); }
.secondary-link { background: #34405e; }

.paths { padding: 15px; background: rgb(243 245 252 / 78%); border: 1px solid var(--line); border-radius: 6px; }
.paths p { margin: 13px 0 5px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.paths p:first-child { margin-top: 0; }
.paths code { display: block; color: #4a536b; overflow-wrap: anywhere; font-size: 10px; line-height: 1.55; }
.copy-button { padding: 0; color: var(--violet-dark); background: transparent; border: 0; cursor: pointer; font-size: 10px; }

.remaining { margin-top: 17px; padding-left: 12px; border-left: 3px solid #e6a043; }
.remaining strong { font-size: 11px; }
.remaining p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

footer {
  min-height: 42px;
  padding: 13px 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: rgb(255 255 255 / 70%);
  font-size: 10px;
}

@media (max-width: 780px) {
  .page-shell { width: calc(100% - 24px); padding-top: 14px; }
  .topbar { min-height: 68px; padding: 0 2px; }
  .brand-mark { width: 39px; height: 39px; padding: 8px; }
  h1 { font-size: 21px; }
  .system-state { display: none; }
  .workspace { margin-top: 12px; grid-template-columns: 1fr; gap: 14px; }
  .input-pane, .output-pane { padding: 24px 20px; }
  .advanced-grid, .selector-grid, .download-actions { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .result-state dl div { grid-template-columns: 88px 1fr; }
  .preview-state { min-height: 590px; }
  .phone-preview { width: min(310px, 100%); }
  footer { flex-wrap: wrap; gap: 7px 15px; padding-bottom: 8px; }
}

@media (max-width: 460px) {
  .eyebrow { display: none; }
  .section-heading { margin-bottom: 22px; }
}