:root {
  color-scheme: light;
  --ink: #15171b;
  --muted: #6b6f76;
  --line: #e4e2dc;
  --paper: #f6f4ef;
  --accent: #5945d6;
  --accent-dark: #4230b3;
  --good: #157347;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, textarea, select { font: inherit; }
button, summary, input[type="color"], input[type="file"] { cursor: pointer; }

.topbar {
  position: sticky; top: 0; z-index: 10; height: 72px; padding: 0 clamp(20px, 4vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(246, 244, 239, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.brand { display: flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { width: 28px; height: 25px; position: relative; display: block; }
.brand-mark i { position: absolute; width: 15px; height: 21px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); }
.brand-mark i:nth-child(1) { left: 0; transform: rotate(-9deg); }
.brand-mark i:nth-child(2) { left: 6px; top: 2px; }
.brand-mark i:nth-child(3) { left: 12px; transform: rotate(9deg); }
.status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #ece9e2; }
.status span { width: 8px; height: 8px; border-radius: 50%; background: #a3a3a3; }
.status-ready { background: #e3f3e9; color: var(--good); }.status-ready span { background: #24a263; }
.status-error { background: #fbe5e3; color: #a52a23; }.status-error span { background: #d2443c; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.header-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border: 1px solid #d6d2ca; border-radius: 9px; color: #494b50; background: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; cursor: pointer; }
.header-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.workspace { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(520px, 1.06fr) minmax(430px, .94fr); }
.editor-panel { padding: 72px clamp(32px, 7vw, 104px) 96px; background: #fff; }
.intro { max-width: 680px; margin-bottom: 52px; }
.eyebrow { margin: 0 0 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 850; }
h1 { max-width: 620px; margin: 0; font-size: clamp(42px, 5vw, 66px); line-height: .98; letter-spacing: -.055em; }
.intro > p:last-child { max-width: 600px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }

form { max-width: 720px; }
fieldset { padding: 0; border: 0; margin: 0 0 46px; }
legend { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 0 17px; margin-bottom: 20px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 17px; }
legend span { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.field-grid { display: grid; gap: 18px; }.field-grid.two { grid-template-columns: 1fr 1fr; }.field-grid.compact { margin-top: 18px; }
label { display: flex; flex-direction: column; gap: 8px; color: #3d4046; font-size: 12px; font-weight: 750; letter-spacing: .015em; }
.optional { color: #a0a0a0; font-weight: 550; }
input, textarea, select {
  width: 100%; color: var(--ink); background: #faf9f6; border: 1px solid #dbd9d3; border-radius: 10px; padding: 13px 14px;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(89,69,214,.12); }
input[type="color"] { height: 47px; padding: 5px; }
.logo-grid { grid-template-columns: minmax(0, 1fr); align-items: end; margin-top: 18px; }
.or { padding-bottom: 14px; color: #999; text-align: center; font-size: 11px; }
.upload-button { height: 46px; justify-content: center; align-items: center; color: var(--accent); border: 1px solid #cac4f2; border-radius: 10px; background: #f5f2ff; }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hint, .security-note { margin: 9px 0 0; color: #898989; font-size: 11px; line-height: 1.45; }

details { margin: -12px 0 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details + details { margin-top: -35px; }
summary { display: flex; justify-content: space-between; padding: 18px 2px; font-size: 14px; font-weight: 800; list-style: none; }
summary::-webkit-details-marker { display: none; } summary span { color: #999; font-size: 11px; font-weight: 600; }
.details-body { padding: 4px 2px 22px; }
.description-fields .field-pair { display: grid; gap: 12px; margin-top: 18px; }
.description-fields .field-grid + .field-grid, .description-fields .field-pair + .field-grid { margin-top: 18px; }
.extra-field { display: grid; grid-template-columns: 1fr 1.5fr 34px; gap: 10px; margin-bottom: 10px; }
.extra-field button { border: 0; background: transparent; color: #a22; font-size: 20px; }
.secondary-button { border: 1px solid #d4d0c7; border-radius: 9px; background: #fff; padding: 10px 14px; font-weight: 750; font-size: 12px; }
.secondary-button.full { width: 100%; margin-top: 9px; }
.create-button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 42px; padding: 17px 19px; color: #fff; background: var(--accent); border: 0; border-radius: 11px; font-weight: 850; box-shadow: 0 9px 24px rgba(89,69,214,.25); }
.create-button:hover { background: var(--accent-dark); }.create-button:disabled { opacity: .6; cursor: wait; }
.create-button b { font-size: 20px; }
.experimental-button { width: 100%; margin-top: 12px; padding: 13px 16px; border: 1px dashed #c67820; border-radius: 10px; color: #85500e; background: #fff8e9; font-size: 12px; font-weight: 800; }
.experimental-button:disabled { opacity: .6; cursor: wait; }
.experiment-note { margin: 8px 0 0; color: #8a6b43; text-align: center; font-size: 10px; line-height: 1.45; }
.security-note { text-align: center; }
.form-message { margin: 20px 0 -22px; padding: 12px 14px; border-radius: 9px; color: #9c2722; background: #fff0ef; font-size: 13px; line-height: 1.5; }
.form-message.success { color: #15603d; background: #e8f6ed; }

.preview-panel { position: relative; padding: 52px 34px 70px; background: #edeae3; overflow: hidden; }
.preview-panel::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; right: -150px; top: -180px; background: rgba(89,69,214,.09); }
.preview-heading { max-width: 420px; margin: 0 auto 19px; display: flex; justify-content: space-between; position: relative; z-index: 1; }
.preview-heading span { font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }.preview-heading small { color: #858585; }
.phone { width: min(420px, 100%); min-height: 760px; margin: 0 auto; padding: 14px 18px 42px; border: 9px solid #16171b; border-radius: 46px; background: #202126; box-shadow: 0 34px 80px rgba(29,25,20,.24); position: relative; z-index: 1; }
.phone-top, .wallet-chrome { color: #fff; display: flex; justify-content: space-between; align-items: center; }
.phone-top { padding: 4px 8px 0; font-size: 11px; font-weight: 750; }.wallet-chrome { padding: 20px 5px 24px; font-size: 25px; }.wallet-chrome strong { color: #b9aaff; }
.pass-card { color: #fff; border-radius: 27px; background: #ff4f52; overflow: hidden; box-shadow: 0 14px 28px rgba(0,0,0,.22); transition: background .2s, color .2s; }
.hero-preview { height: 118px; background-size: cover; background-position: center; border-bottom: 1px solid rgba(255,255,255,.18); }
.pass-issuer { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 17px; font-weight: 570; }
.logo-shell { flex: 0 0 auto; width: 41px; height: 41px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; color: #333; font-size: 18px; font-weight: 850; }
.logo-shell img { width: 100%; height: 100%; object-fit: contain; display: none; }.logo-shell img.loaded { display: block; }.logo-shell img.loaded + span { display: none; }
.pass-content { padding: 22px 20px 26px; }.pass-content h2 { margin: 0 0 24px; font-size: 34px; line-height: 1.05; letter-spacing: -.035em; font-weight: 480; }
.ticket-row { display: flex; flex-direction: column; gap: 4px; }.ticket-row.split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.ticket-row.split > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ticket-row small { opacity: .82; font-size: 12px; }.ticket-row strong { font-size: 16px; line-height: 1.25; font-weight: 650; }.align-right { text-align: right; }
.divider { height: 1px; margin: 19px 0; background: rgba(255,255,255,.17); }
.qr-shell { width: 190px; margin: 29px auto 0; padding: 12px 12px 7px; border-radius: 18px; color: #777; background: #fff; text-align: center; }
.qr-shell img { width: 100%; display: block; }.qr-shell small { display: block; margin-top: 1px; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.extra-preview { margin-top: 19px; display: grid; gap: 9px; }.extra-preview div { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.14); }.extra-preview small, .extra-preview strong { display: block; }.extra-preview small { opacity: .8; }.extra-preview strong { margin-top: 2px; font-size: 12px; }
.preview-note { max-width: 410px; margin: 24px auto 0; color: #74726d; font-size: 11px; text-align: center; line-height: 1.5; position: relative; z-index: 1; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(20,20,24,.68); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }.modal-card { width: min(500px, 100%); position: relative; padding: 38px; border-radius: 20px; background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.modal-close { position: absolute; right: 15px; top: 12px; border: 0; background: transparent; color: #777; font-size: 28px; }
.success-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 50%; color: #fff; background: var(--good); font-weight: 900; }
.modal-card h2 { margin: 0 0 12px; font-size: 28px; }.modal-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.wallet-button { display: block; margin-top: 24px; padding: 14px; border-radius: 9px; background: #111; color: #fff; text-align: center; text-decoration: none; font-weight: 800; }
dl { margin: 24px 0 0; border-top: 1px solid var(--line); } dl div { padding: 12px 0; border-bottom: 1px solid var(--line); } dt { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } dd { margin: 5px 0 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 11px; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 10%, #ded8ff 0, transparent 32%), var(--paper); }
.login-card { width: min(480px, 100%); padding: clamp(30px, 6vw, 54px); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(25,22,18,.13); }
.login-brand { margin-bottom: 50px; }.login-card h1 { font-size: clamp(38px, 8vw, 55px); }.login-copy { margin: 20px 0 30px; color: var(--muted); line-height: 1.6; }.login-card .create-button { margin-top: 20px; }

@media (max-width: 980px) { .workspace { grid-template-columns: 1fr; }.preview-panel { grid-row: 1; }.phone { min-height: 690px; }.editor-panel { padding-top: 56px; } }
@media (max-width: 600px) { .topbar { padding: 0 12px; }.status { display: none; }.top-actions { gap: 5px; }.header-button { padding: 8px; }.preview-panel { padding: 32px 12px 54px; }.phone { border-width: 6px; border-radius: 38px; padding-inline: 13px; }.editor-panel { padding: 45px 20px 70px; }h1 { font-size: 43px; }.field-grid.two { grid-template-columns: 1fr; }.logo-grid { grid-template-columns: 1fr; }.modal-card { padding: 30px 24px; } }