:root {
  color-scheme: light;
  --sand: #FDF8F0;
  --card: #FFF5E6;
  --white: #FFFFFF;
  --ochre: #D4A05A;
  --ochre-dark: #B9823F;
  --ink: #2C2C2C;
  --muted: #8A7A6A;
  --burgundy: #8B3A3A;
  --line: #E8DDD0;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background: #FDF8F0 !important;
  background-image: radial-gradient(circle at 10% 4%, rgba(212,160,90,.12) 0 2px, transparent 3px), radial-gradient(circle at 90% 18%, rgba(139,58,58,.05) 0 1px, transparent 2px) !important;
  background-size: 38px 38px, 52px 52px !important;
  color: #2C2C2C !important;
}

body::after {
  position: fixed; right: -28px; bottom: -30px; z-index: -1;
  width: 132px; height: 132px; border: 1px solid rgba(212,160,90,.18);
  border-radius: 50%; box-shadow: 0 0 0 13px rgba(212,160,90,.035), 0 0 0 26px rgba(212,160,90,.025);
  content: "";
}

.app-shell { width: min(100%, 620px); margin: 0 auto; padding: calc(22px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); }
.hero { position: relative; padding: 7px 8px 22px; text-align: center; }
.close-button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border: 1px solid #E8DDD0; border-radius: 50%; background: #FFFFFF !important; color: #8B3A3A !important; font: inherit; font-size: 18px; cursor: pointer; }
.wizard-progress { margin: 0 0 10px; color: #8B3A3A !important; text-align: center; font-size: 13px; }
.wizard-step[hidden] { display: none; }
.wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wizard-actions.end { justify-content: flex-end; }
.wizard-actions .primary-button, .wizard-actions .secondary-button { width: auto; min-width: 130px; margin-top: 0; }
.secondary-button { min-height: 47px; padding: 0 16px; border: 1px solid #D4A05A; border-radius: 10px; background: #FFFFFF !important; color: #B9823F !important; font: inherit; font-weight: 700; cursor: pointer; }
.file-list { display: grid; gap: 8px; margin-top: 10px; }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #E8DDD0; border-radius: 8px; background: rgba(255,255,255,.72); color: #5C7044; font-size: 13px; }
.file-row span { overflow-wrap: anywhere; }
.remove-file { flex: 0 0 auto; border: 0; background: transparent; color: #8B3A3A; font: inherit; font-size: 12px; cursor: pointer; }
.clients-list { display: grid; gap: 9px; }
.client-card { padding: 11px; border: 1px solid #E8DDD0; border-radius: 9px; background: rgba(255,255,255,.72); }
.client-name { color: #2C2C2C; font-weight: 700; }
.client-meta { margin-top: 4px; color: #8A7A6A; font-size: 13px; line-height: 1.45; }
.client-orders { margin-top: 7px; color: #5C7044; font-size: 12px; line-height: 1.45; }
.save-button { margin-top: 14px; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border: 2px solid rgba(212,160,90,.42); border-radius: 50%; background: linear-gradient(145deg,#E8BE7A,#D4A05A) !important; color: #FFFFFF !important; font-family: Georgia,serif; font-size: 29px; font-weight: 700; box-shadow: 0 5px 14px rgba(212,160,90,.24); }
.eyebrow, .step-label { margin: 0 0 6px; color: #8A7A6A !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0; color: #2C2C2C !important; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.subtitle { max-width: 360px; margin: 8px auto 0; color: #8A7A6A !important; font-size: 15px; line-height: 1.45; }
.card { margin: 12px 0; padding: 16px; border: 1px solid rgba(232,221,208,.88); border-radius: 12px; background: #FFF5E6 !important; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.step-label { display: flex; align-items: center; gap: 7px; color: #8B3A3A !important; font-size: 11px; }
.step-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(212,160,90,.17) !important; font-size: 14px; letter-spacing: 0; }
label { display: block; margin: 10px 0 9px; color: #2C2C2C !important; font-size: 16px; font-weight: 700; }
input[type="text"], select { width: 100%; min-height: 47px; padding: 12px; border: 1px solid #E8DDD0 !important; border-radius: 8px; outline: none; background: #FFFFFF !important; color: #2C2C2C !important; font: inherit; font-size: 16px; }
input[type="text"]::placeholder { color: #B4A79A; }
input[type="text"]:focus, select:focus { border-color: #D4A05A !important; box-shadow: 0 0 0 3px rgba(212,160,90,.16); }
input[type="file"] { display: block; width: 100%; color: #8A7A6A !important; font: inherit; font-size: 14px; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 9px 12px; border: 1px solid #D4A05A; border-radius: 8px; background: transparent; color: #B9823F; font: inherit; font-weight: 700; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: rgba(212,160,90,.10); }
.hint { margin: 9px 0 0; color: #8A7A6A !important; font-size: 14px; line-height: 1.45; }
.template-link { display: inline-block; margin-top: 11px; padding: 8px 12px; border: 1px solid #D4A05A; border-radius: 8px; color: #B9823F !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.template-link:hover { background: rgba(212,160,90,.10); }
.file-status { min-height: 24px; margin-top: 10px; color: #6C6A44 !important; font-size: 14px; font-weight: 700; }
.file-status.empty { color: #8A7A6A !important; font-weight: 400; }
.summary { padding: 13px 16px; background: rgba(255,245,230,.68) !important; }
.summary-row { display: flex; justify-content: space-between; padding: 5px 0; color: #8A7A6A !important; font-size: 14px; }
.summary-row strong { color: #8B3A3A !important; font-size: 16px; }
.primary-button { width: 100%; min-height: 53px; margin-top: 14px; border: 0; border-radius: 12px; background: #D4A05A !important; color: #FFFFFF !important; font: inherit; font-size: 18px; font-weight: 700; box-shadow: 0 4px 12px rgba(212,160,90,.30); cursor: pointer; transition: background .18s ease, transform .12s ease; }
.primary-button:hover { background: #B9823F !important; }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.message { min-height: 24px; margin: 12px 4px 0; text-align: center; font-size: 14px; line-height: 1.4; }
.message.success { color: #5C7044 !important; }
.message.error { color: #8B3A3A !important; }
.footer-note { max-width: 360px; margin: 14px auto 0; color: #8A7A6A !important; text-align: center; font-size: 12px; line-height: 1.45; }
.success-screen { text-align: center; padding: 26px 18px; }
.success-screen[hidden] { display: none; }
.success-badge { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.success-title { margin: 0 0 8px; color: #2C2C2C !important; font-size: 24px; }
.success-subtitle { max-width: 320px; margin: 0 auto 16px; color: #8A7A6A !important; font-size: 15px; line-height: 1.5; }
.bot-link { display: block; margin: 0 auto 14px; padding: 10px 12px; border: 1px dashed #D4A05A; border-radius: 9px; background: rgba(255,255,255,.8); color: #8B3A3A !important; font-size: 15px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.success-screen .primary-button, .success-screen .secondary-button { width: 100%; margin-top: 9px; }
.next-steps { margin-top: 18px; padding: 13px 14px; border-radius: 10px; background: rgba(255,245,230,.6); text-align: left; }
.next-steps h3 { margin: 0 0 8px; color: #2C2C2C !important; font-size: 15px; }
.next-steps ol { margin: 0; padding-left: 18px; color: #6C6A44; font-size: 14px; line-height: 1.6; }
.text-button { margin-top: 16px; border: 0; background: transparent; color: #B9823F !important; font: inherit; font-size: 14px; cursor: pointer; }
@media (min-width: 600px) { .app-shell { padding-top: 34px; } .card { padding: 18px; } }