:root {
  color-scheme: light;
  --paper: #eeeade;
  --paper-deep: #e4dfd0;
  --paper-light: #f7f4ec;
  --ink: #26352f;
  --ink-soft: #52615a;
  --quiet: #8d9285;
  --line: #d5d0c1;
  --line-dark: rgba(240, 235, 221, .16);
  --pine: #263c35;
  --pine-2: #344f43;
  --moss: #788365;
  --rust: #bb563e;
  --rust-dark: #a64834;
  --ochre: #d8a45a;
  --sand: #dbcfb9;
  --white: #fffdf7;
  --serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(187, 86, 62, .42); outline-offset: 3px; }
[hidden] { display: none !important; }

.boot-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.boot-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--pine); color: var(--ochre); font-family: var(--serif); font-size: 31px; }
.brand-symbol { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; font-family: var(--serif); font-size: 29px; font-style: italic; line-height: 1; background: var(--ochre); color: var(--pine); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.wordmark-light { color: var(--paper-light); }
.wordmark-name { font-family: var(--serif); font-size: 22px; letter-spacing: -.055em; }
.wordmark-period { color: var(--rust); }
.wordmark-light .wordmark-period { color: var(--ochre); }

/* Sign-in: a quiet, botanical printshop rather than a synthetic gradient. */
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.04fr) minmax(500px, .96fr); background: var(--paper-light); }
.auth-art-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 35px 4.4vw 27px; overflow: hidden; background: var(--pine); color: var(--paper-light); }
.auth-art-top, .auth-art-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.edition-tag, .auth-art-footer, .auth-bottom-note { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.edition-tag { color: #b4b8a7; }
.auth-artwork-wrap { position: relative; width: min(100%, 550px); margin: 30px auto 23px; padding: 19px 19px 13px; background: #ede6d8; color: var(--ink); box-shadow: 0 21px 48px rgba(0,0,0,.18); transform: rotate(-1.5deg); }
.auth-artwork { display: block; width: 100%; height: auto; }
.artwork-stamp { position: absolute; z-index: 1; right: -27px; top: 43px; padding: 10px 13px; transform: rotate(7deg); border: 1px solid rgba(38,60,53,.38); color: var(--pine); background: rgba(238,234,222,.94); font: 9px/1.6 var(--sans); letter-spacing: .13em; }
.artwork-caption { display: flex; justify-content: space-between; padding: 13px 3px 1px; font: 15px var(--serif); color: #41534a; }
.artwork-caption span:last-child { font: 9px var(--sans); letter-spacing: .12em; align-self: center; }
.auth-art-footer { color: #aeb6a9; }
.auth-form-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 37px 5vw 26px; }
.auth-form-wrap { width: min(100%, 433px); margin: 34px auto; }
.eyebrow, .section-kicker { font-size: 9px; font-weight: 650; letter-spacing: .15em; color: var(--quiet); }
.auth-form-wrap h1, .page-heading h1, .secondary-heading h1 { margin: 21px 0 11px; color: var(--ink); font: 500 clamp(42px, 4.4vw, 57px)/.99 var(--serif); letter-spacing: -.055em; }
.auth-form-wrap h1 em, .page-heading h1 em, .secondary-heading h1 em, .payment-modal h2 em, .pricing-card h2 em, .payment-confirmed h3 em { color: var(--rust); font-weight: 400; }
.auth-lede { margin: 17px 0 31px; color: #71786f; font: 15px/1.65 var(--serif); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.auth-tab { flex: 1; padding: 0 5px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: #85877d; font-size: 12px; cursor: pointer; }
.auth-tab.is-active { color: var(--pine); font-weight: 650; border-color: var(--rust); }
.auth-form { display: grid; gap: 16px; }
.field-wrap { display: flex; flex-direction: column; gap: 8px; color: #69746c; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.field-wrap input, .field-wrap textarea { width: 100%; min-height: 47px; border: 1px solid #d7d2c4; border-radius: 3px; padding: 0 14px; background: #fbf9f2; color: var(--ink); font-size: 13px; font-weight: 400; letter-spacing: 0; transition: border .18s, box-shadow .18s; }
.field-wrap input::placeholder, .field-wrap textarea::placeholder { color: #aaa99e; }
.field-wrap input:focus, .field-wrap textarea:focus { outline: none; border-color: #9c8069; box-shadow: 0 0 0 3px rgba(187,86,62,.08); }
.password-field { display: flex; position: relative; }
.password-field input { padding-right: 58px; }
.show-password { position: absolute; top: 0; right: 0; height: 47px; padding: 0 13px; border: 0; background: transparent; color: #8c9187; font-size: 10px; cursor: pointer; }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-radius: 3px; padding: 0 17px; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(32,49,40,.14); }
.button:disabled { opacity: .56; cursor: not-allowed; }
.button-primary { background: var(--rust); color: #fffaf0; }
.button-primary:hover:not(:disabled) { background: var(--rust-dark); }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-terms { margin: -1px 0 0; color: #9b9d91; font-size: 10px; line-height: 1.7; }
.auth-terms span { color: #6d776e; }
.auth-error { padding: 10px 12px; border-left: 2px solid var(--rust); background: #f3e4dd; color: #8f3827; font-size: 11px; line-height: 1.5; }
.welcome-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 14px; border: 1px solid #ded8c8; background: #f4f0e5; color: #71776d; font-size: 11px; }
.welcome-note strong { color: var(--pine); }
.welcome-spark { color: var(--rust); font-size: 19px; }
.auth-bottom-note { color: #97988d; }
.mobile-wordmark { display: none; }

/* Public front page: make the product and its creative range immediately visible. */
.landing-screen { overflow: hidden; background: #f1ecdf; }
.landing-nav { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 16px clamp(24px, 6.2vw, 100px); border-bottom: 1px solid rgba(43,59,51,.11); background: #f7f3e9; }
.landing-nav .wordmark-name { font-size: 24px; }
.landing-nav-links, .landing-nav-actions { display: flex; align-items: center; gap: clamp(18px, 3vw, 43px); }
.landing-nav-links a, .landing-signin { color: #5e6b60; font-size: 11px; text-decoration: none; transition: color .18s; }
.landing-nav-links a:hover, .landing-signin:hover { color: var(--rust); }
.landing-signin { border: 0; background: none; cursor: pointer; }
.landing-nav-cta { min-height: 42px; padding: 0 15px; font-size: 10px; }
.landing-menu-button { display: none; border: 0; background: none; color: var(--pine); font-size: 10px; font-weight: 650; cursor: pointer; }
.landing-menu-button span { margin-left: 6px; color: var(--rust); }
.landing-hero { position: relative; max-width: 1600px; min-height: 690px; display: grid; grid-template-columns: minmax(430px, .94fr) minmax(440px, 1.06fr); align-items: center; margin: 0 auto; padding: 53px clamp(40px, 8.2vw, 132px) 88px; background: #eee8d9; }
.landing-hero::before { position: absolute; top: -130px; left: -170px; width: 430px; height: 430px; border: 1px solid rgba(68,90,75,.11); border-radius: 50%; content: ''; }
.landing-hero-copy { position: relative; z-index: 2; max-width: 585px; padding: 0 0 24px; }
.landing-kicker, .landing-section-kicker { display: flex; align-items: center; gap: 9px; color: #788071; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.landing-kicker-star { color: var(--rust); font-size: 18px; line-height: .7; }
.landing-hero h1 { margin: 28px 0 21px; color: #293b34; font: 500 clamp(54px, 6.1vw, 87px)/.94 var(--serif); letter-spacing: -.065em; }
.landing-hero h1 em, .landing-section-heading h2 em, .models-heading h2 em, .pricing-copy h2 em { color: #bd573e; font-weight: 400; }
.landing-lede { max-width: 462px; margin: 0; color: #687267; font: 16px/1.7 var(--serif); }
.landing-hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.landing-main-cta { min-width: 205px; min-height: 53px; padding: 0 17px; }
.landing-secondary-link { color: #626e61; font-size: 10px; text-decoration: none; }
.landing-secondary-link span { margin-left: 7px; color: var(--rust); font-size: 14px; }
.landing-free-note { display: flex; align-items: center; gap: 11px; max-width: 365px; margin-top: 30px; padding-top: 15px; border-top: 1px solid #d8d0bf; color: #828679; font-size: 10px; }
.landing-free-note strong { color: #394e40; font-weight: 650; }
.free-note-mark { color: #c26a45; font-size: 19px; }
.landing-art-area { position: relative; min-width: 0; height: 570px; display: grid; place-items: center; isolation: isolate; }
.landing-art-area::before { position: absolute; z-index: -2; top: 41px; right: 2%; width: min(90%, 470px); aspect-ratio: 1; border-radius: 49% 51% 42% 58% / 49% 40% 60% 51%; background: #d7a66f; content: ''; transform: rotate(-17deg); }
.landing-art-area::after { position: absolute; z-index: -1; top: 8px; right: 1%; width: min(92%, 485px); aspect-ratio: 1; border: 1px solid rgba(45,69,56,.26); border-radius: 50%; content: ''; }
.landing-orbit { position: absolute; z-index: -1; border-radius: 50%; }
.orbit-one { top: 74px; right: 4%; width: 14px; height: 14px; background: #bd573e; box-shadow: 5px 0 0 7px rgba(189,87,62,.09); }
.orbit-two { right: 15%; bottom: 25px; width: 8px; height: 8px; background: #586f53; box-shadow: 0 0 0 7px rgba(88,111,83,.11); }
.landing-art-card { position: relative; width: min(66%, 382px); padding: 12px 12px 0; background: #f9f4e8; box-shadow: 0 24px 56px rgba(42,49,39,.2); transform: rotate(3deg) translate(-10px, -3px); }
.landing-art-topline { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 9px; color: #808576; font-size: 7px; letter-spacing: .14em; }
.landing-art-topline b { margin-left: 5px; color: #ba6248; font-weight: 700; }
.art-topline-star { color: #bb6043; font-size: 15px; }
.landing-sample-art { display: block; width: 100%; height: auto; }
.landing-art-caption { display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 13px; color: #33483d; }
.landing-art-caption small { display: block; margin-bottom: 4px; color: #9b7761; font-size: 6px; letter-spacing: .14em; }
.landing-art-caption strong { font: 14px var(--serif); }
.landing-art-mark { color: #a2775d; font: 8px/1.35 var(--sans); letter-spacing: .11em; text-align: center; }
.prompt-slip { position: absolute; right: -1%; bottom: 58px; display: flex; align-items: center; gap: 12px; padding: 14px 17px 14px 14px; background: #f7f1e5; box-shadow: 0 12px 27px rgba(41,54,43,.14); transform: rotate(-4deg); }
.slip-icon { color: #bc5c40; font: 23px var(--serif); }
.prompt-slip small, .model-seal small { display: block; margin-bottom: 4px; color: #879080; font-size: 6px; letter-spacing: .16em; }
.prompt-slip strong { color: #354a3d; font: 12px/1.35 var(--serif); }
.model-seal { position: absolute; top: 73px; left: 1%; display: flex; align-items: center; gap: 8px; width: 104px; height: 104px; justify-content: center; flex-direction: column; border: 1px solid rgba(46,68,53,.35); border-radius: 50%; background: #e3bd7c; color: #415342; transform: rotate(-12deg); }
.model-seal small { margin-bottom: 3px; color: #667460; }
.model-seal b { font-size: 7px; letter-spacing: .1em; }
.seal-spark { color: #b85039; font-size: 17px; }
.hero-bottomline { position: absolute; right: clamp(40px, 8.2vw, 132px); bottom: 28px; left: clamp(40px, 8.2vw, 132px); display: flex; align-items: center; gap: 14px; color: #929385; font-size: 7px; letter-spacing: .15em; }
.hero-bottomline::before, .hero-bottomline::after { height: 1px; flex: 1; background: #d2cbbb; content: ''; }
.hero-bottom-arrow { color: #b95b43; font-size: 13px; }
.landing-intro { padding: 106px clamp(34px, 9vw, 145px) 112px; background: #faf7ef; }
.landing-section-heading, .models-heading { max-width: 1120px; display: flex; align-items: end; justify-content: space-between; gap: 60px; margin: 0 auto 54px; }
.landing-section-heading h2, .models-heading h2, .pricing-copy h2 { margin: 18px 0 0; color: #293b34; font: 500 clamp(40px, 4.5vw, 61px)/.98 var(--serif); letter-spacing: -.055em; }
.landing-section-heading p, .models-heading > p { max-width: 350px; margin: 0 0 5px; color: #767b70; font: 14px/1.7 var(--serif); }
.landing-steps { max-width: 1120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 auto; }
.landing-step { position: relative; min-height: 275px; padding: 22px 23px 20px; border: 1px solid #e2ddcf; background: #f6f2e8; }
.step-index { position: absolute; top: 20px; right: 21px; color: #a9a897; font: 12px var(--serif); }
.step-illustration { height: 103px; display: flex; align-items: center; justify-content: center; margin: 0 0 18px; }
.step-illustration-prompt { position: relative; align-items: start; flex-direction: column; gap: 9px; padding: 17px 22px; border: 1px solid #ddd7c8; background: #fbf8ef; }
.prompt-line { width: 67%; height: 5px; background: #b9c1ac; }
.prompt-line.long { width: 82%; background: #83927b; }
.prompt-line.short { width: 48%; }
.prompt-cursor { position: absolute; right: 20%; bottom: 15px; color: #bd5a40; font-size: 22px; }
.step-illustration-model { gap: 10px; }
.mini-medium { width: 43%; height: 81px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border: 1px solid #d9d5c7; background: #f9f6ee; }
.mini-medium i { font-size: 17px; font-style: normal; }
.mini-medium b { color: #455749; font: 12px var(--serif); }
.mini-medium small { color: #85897c; font-size: 7px; }
.medium-art i { color: #bf5d42; }
.medium-photo i { color: #657f73; }
.step-illustration-save { justify-content: start; gap: 13px; padding-left: 13px; background: #e7dfcf; }
.saved-picture { position: relative; width: 75px; height: 85px; display: grid; place-items: center; background: #c17b5a; }
.saved-picture::before { width: 43px; height: 56px; border: 2px solid #f2e7d1; border-radius: 24px 24px 0 0; content: ''; }
.saved-picture span { position: absolute; top: 18px; right: 15px; width: 15px; height: 15px; border-radius: 50%; background: #e8c979; }
.saved-picture i { position: absolute; right: -8px; bottom: -5px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #f6f2e8; border-radius: 50%; background: #405a4d; color: white; font-size: 13px; font-style: normal; }
.saved-caption { color: #808274; font-size: 7px; line-height: 1.9; letter-spacing: .13em; }
.saved-caption b { color: #465a4b; }
.landing-step h3 { margin: 0 0 8px; color: #36493d; font: 21px var(--serif); letter-spacing: -.02em; }
.landing-step p { max-width: 290px; margin: 0; color: #85877a; font-size: 10px; line-height: 1.7; }
.landing-models { padding: 104px clamp(34px, 9vw, 145px) 112px; background: #293f37; color: #f4efe2; }
.landing-models .landing-section-kicker { color: #adb69f; }
.models-heading { max-width: 1120px; margin-bottom: 45px; }
.models-heading h2 { color: #f2eddf; }
.models-heading h2 em { color: #e4ad70; }
.models-heading > p { color: #bcc2b4; }
.model-cards { max-width: 1120px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 0 auto; }
.model-feature { padding: 12px; background: #f1ecdf; color: #34483c; }
.model-feature-art { position: relative; height: 290px; overflow: hidden; }
.illustration-art { background: #e6b17b; }
.illustration-sun { position: absolute; top: 32px; right: 16%; width: 92px; height: 92px; border-radius: 50%; background: #f2d68e; }
.illustration-arch { position: absolute; z-index: 1; right: 17%; bottom: 21px; width: 45%; height: 67%; border-radius: 50% 50% 0 0; background: #66887d; }
.illustration-arch::after { position: absolute; top: 17px; right: 17px; bottom: 0; left: 17px; border-radius: 50% 50% 0 0; background: #f1e7cf; content: ''; }
.illustration-stem { position: absolute; z-index: 2; bottom: 20px; left: 27%; width: 3px; height: 74%; background: #47604b; transform: rotate(14deg); }
.stem-two { left: 19%; height: 55%; transform: rotate(-12deg); }
.illustration-leaf { position: absolute; z-index: 2; bottom: 54%; left: 12%; width: 52px; height: 27px; border-radius: 100% 0 100% 0; background: #58765a; transform: rotate(-20deg); }
.leaf-two { bottom: 67%; left: 29%; transform: rotate(40deg) scale(.8); background: #728462; }
.illustration-pot { position: absolute; z-index: 3; bottom: 11px; left: 37%; width: 24%; height: 63px; border-radius: 4px 4px 20px 20px; background: #bd5c43; }
.illustration-pot::before { position: absolute; top: -9px; left: -5px; width: calc(100% + 10px); height: 13px; background: #d07655; content: ''; }
.photo-art { background: #a8b8b0; }
.photo-sun { position: absolute; top: 33px; right: 18%; width: 88px; height: 88px; border-radius: 50%; background: #efd3a3; }
.photo-horizon { position: absolute; top: 45%; right: 0; left: 0; height: 55%; background: linear-gradient(180deg,#a7b5a9,#718b80 45%,#435e55); }
.photo-ridge { position: absolute; bottom: 28%; width: 0; height: 0; border-right: 180px solid transparent; border-bottom: 132px solid #61776b; border-left: 180px solid transparent; }
.ridge-back { left: -37px; border-bottom-color: #75887a; }
.ridge-front { right: -61px; bottom: 22%; transform: scale(.78); border-bottom-color: #42594f; }
.photo-reflection { position: absolute; z-index: 1; right: 14%; bottom: 3%; width: 38%; height: 70px; background: linear-gradient(180deg,rgba(231,207,166,.7),rgba(231,207,166,0)); clip-path: polygon(31% 0,69% 0,100% 100%,0 100%); }
.photo-frame { position: absolute; right: 8%; bottom: 15%; left: 8%; height: 42%; border-bottom: 2px solid rgba(240,225,194,.5); border-radius: 50%; transform: rotate(-3deg); }
.photo-grain { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 4px 5px); }
.model-feature-info { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 17px 12px 12px; }
.model-index { color: #949586; font-size: 7px; letter-spacing: .15em; }
.model-feature-info h3 { margin: 7px 0 5px; color: #31483a; font: 24px var(--serif); }
.model-feature-info p { margin: 0; color: #808477; font: 11px/1.5 var(--serif); }
.model-price { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid #d8d2c3; }
.model-price strong { color: #bd5c42; font: 31px/.9 var(--serif); }
.model-price span { color: #848779; font-size: 6px; line-height: 1.5; letter-spacing: .1em; }
.landing-pricing { position: relative; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 8vw; padding: 110px clamp(34px, 12vw, 190px); background: #eee6d5; }
.pricing-copy { max-width: 440px; }
.pricing-copy h2 { margin-top: 18px; }
.pricing-copy > p { max-width: 385px; margin: 22px 0 25px; color: #6e766a; font: 15px/1.7 var(--serif); }
.button-light { background: #30483b; color: #f9f2e4; }
.button-light:hover:not(:disabled) { background: #22372e; }
.pricing-cta { min-width: 240px; }
.pricing-copy > small { display: block; margin-top: 11px; color: #989789; font-size: 8px; }
.credit-ledger { position: relative; max-width: 475px; padding: 23px 27px 19px; border: 1px solid #cfc7b5; background: #f8f3e7; box-shadow: 13px 14px 0 rgba(64,81,65,.08); }
.ledger-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #ddd5c5; color: #8a8c7e; font-size: 7px; letter-spacing: .15em; }
.ledger-heading span:last-child { color: #b95840; font-size: 17px; }
.ledger-line { min-height: 65px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e3ddcf; color: #697365; font-size: 11px; }
.ledger-line > span { display: flex; align-items: center; gap: 13px; }
.ledger-line > span b { color: #b1684d; font: 12px var(--serif); }
.ledger-line > strong { color: #354b3d; font: 19px var(--serif); text-align: right; }
.ledger-line > strong small { display: block; margin-top: 4px; color: #999789; font: 6px var(--sans); letter-spacing: .1em; }
.ledger-foot { display: flex; align-items: center; gap: 11px; margin-top: 16px; color: #818476; font-size: 8px; line-height: 1.7; }
.ledger-foot b { color: #4b6250; font-weight: 600; }
.ledger-chain-mark { color: #b45e43; font-size: 20px; }
.ledger-stamp { position: absolute; right: -30px; bottom: -22px; width: 82px; height: 82px; display: grid; place-items: center; border: 1px solid #c16b50; border-radius: 50%; background: #e9d0a5; color: #835343; font-size: 7px; line-height: 1.6; letter-spacing: .08em; text-align: center; transform: rotate(12deg); }
.landing-footer { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px clamp(24px, 6.2vw, 100px); background: #263c35; color: #aeb9a9; }
.landing-footer .brand-symbol { background: #d6a75f; }
.landing-footer .wordmark-name { color: #f2eddf; font-size: 19px; }
.landing-footer > span { font-size: 7px; letter-spacing: .16em; }
.landing-footer > button { border: 0; background: none; color: #e1c48e; font: 13px var(--serif); cursor: pointer; }
.landing-footer > button span { margin-left: 5px; }
.landing-footer > small { color: #809084; font-size: 7px; letter-spacing: .1em; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #818477; font-size: 10px; cursor: pointer; }
.auth-back span { color: var(--rust); font-size: 15px; }

/* Studio shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; min-height: 700px; display: flex; flex-direction: column; padding: 28px 20px 18px; background: var(--pine); color: var(--paper-light); }
.sidebar-brand { padding: 0 8px; }
.sidebar-brand .brand-symbol { width: 32px; height: 32px; border-radius: 10px; font-size: 27px; }
.sidebar-brand .wordmark-name { font-size: 20px; }
.sidebar-label { margin: 53px 10px 13px; color: #8f9a89; font-size: 8px; font-weight: 650; letter-spacing: .15em; }
.side-nav { display: grid; gap: 5px; }
.side-link { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: #c4c8ba; text-align: left; font-size: 11px; cursor: pointer; }
.side-link:hover { background: rgba(255,255,255,.055); }
.side-link.is-active { background: rgba(238,234,222,.12); color: #fff9ec; }
.side-link.is-active::before { position: absolute; content: ''; width: 2px; height: 25px; margin-left: -10px; background: var(--ochre); }
.nav-icon { width: 15px; color: var(--ochre); font-size: 16px; text-align: center; }
.nav-icon-grid { font-size: 19px; }
.nav-count { margin-left: auto; color: var(--ochre); font: 11px var(--serif); }
.side-pill { min-width: 20px; margin-left: auto; border-radius: 9px; padding: 3px 6px; background: rgba(255,255,255,.1); color: #d8d8ca; text-align: center; font-size: 9px; }
.sidebar-divider { margin: 30px 8px 0; border-top: 1px solid var(--line-dark); }
.sidebar-divider + .sidebar-label { margin-top: 24px; }
.sidebar-note { position: relative; padding: 4px 13px 14px; }
.sidebar-note-mark { color: var(--ochre); font: 38px/.8 var(--serif); }
.sidebar-note p { margin: 8px 0 13px; color: #d3d2c5; font: 17px/1.35 var(--serif); }
.note-credit { color: #819084; font-size: 8px; letter-spacing: .12em; }
.sidebar-bottom { margin-top: auto; }
.credit-card-mini { padding: 14px 13px 12px; border: 1px solid rgba(233,227,210,.2); background: rgba(13,32,26,.18); }
.credit-mini-heading, .credit-mini-foot { display: flex; justify-content: space-between; align-items: center; }
.credit-mini-heading { color: #a4aea1; font-size: 8px; font-weight: 650; letter-spacing: .13em; }
.credit-mini-dot { width: 5px; height: 5px; border-radius: 50%; background: #b6c28c; box-shadow: 0 0 0 3px rgba(182,194,140,.12); }
.credit-mini-balance { margin: 10px 0 8px; color: var(--paper-light); font: 32px/.9 var(--serif); letter-spacing: -.05em; }
.credit-unit { margin-left: 6px; color: #9eaa9a; font: 9px var(--sans); letter-spacing: .12em; }
.credit-meter, .wallet-balance-meter { height: 3px; overflow: hidden; background: rgba(238,234,222,.13); }
.credit-meter span, .wallet-balance-meter span { display: block; height: 100%; width: 50%; background: var(--ochre); transition: width .3s; }
.credit-mini-foot { margin-top: 9px; color: #96a193; font-size: 8px; }
.credit-mini-foot button { border: 0; background: transparent; color: #e3bd7a; font-size: 9px; cursor: pointer; }
.profile-row { display: flex; align-items: center; gap: 9px; margin: 17px 1px 0; padding: 5px 3px; }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(220,184,126,.7); border-radius: 50%; color: #f1d5a4; font: 13px var(--serif); text-transform: uppercase; }
.profile-meta { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.profile-meta strong { overflow: hidden; color: #f3efe3; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.profile-meta span { overflow: hidden; color: #96a094; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu { width: 25px; height: 26px; border: 0; background: transparent; color: #a8b0a4; font-size: 19px; letter-spacing: 2px; cursor: pointer; }
.main-area { min-width: 0; max-width: 1800px; width: 100%; margin: 0 auto; padding: 0 clamp(25px, 4.5vw, 74px) 60px; }
.topbar { height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 10px; color: #85897f; font-size: 8px; font-weight: 650; letter-spacing: .14em; }
.crumb-slash { color: #b3ad9e; font: 14px var(--serif); }
.crumbs strong { color: #34473e; font-size: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.queue-indicator { display: flex; align-items: center; gap: 8px; color: #8b8f84; font-size: 9px; }
.queue-indicator strong { color: #4d6954; font-weight: 650; }
.queue-dot { width: 6px; height: 6px; border-radius: 50%; background: #82956f; box-shadow: 0 0 0 3px rgba(130,149,111,.12); }
.queue-dot.is-offline { background: #bb563e; box-shadow: 0 0 0 3px rgba(187,86,62,.12); }
.top-credit-button { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 9px; border: 1px solid #d4cdbd; border-radius: 3px; background: #f4f0e6; cursor: pointer; }
.top-credit-star { color: var(--rust); font-size: 17px; }
.top-credit-button > span:nth-child(2) { display: flex; align-items: baseline; gap: 4px; }
.top-credit-button strong { color: var(--pine); font: 17px var(--serif); }
.top-credit-button small { color: #858a7e; font-size: 8px; }
.top-plus { color: var(--rust); font-size: 14px; }
.page-view { animation: page-in .25s ease-out; }
@keyframes page-in { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 38px 0 25px; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow-rule { width: 17px; height: 1px; background: var(--rust); }
.eyebrow-end { color: #aeaa9a; font: 11px var(--serif); letter-spacing: .03em; }
.page-heading h1 { margin: 13px 0 9px; font-size: clamp(39px, 4vw, 54px); }
.page-heading > div > p, .secondary-heading > p { margin: 0; color: #777f74; font: 14px/1.5 var(--serif); }
.heading-caption { display: flex; align-items: center; gap: 9px; padding: 0 0 5px; color: #8a8d81; font-size: 8px; line-height: 1.65; letter-spacing: .1em; }
.heading-caption strong { color: var(--ink); font-size: 9px; }
.heading-caption-icon { color: var(--rust); font-size: 20px; }
.studio-layout { display: grid; grid-template-columns: minmax(370px, 1.1fr) minmax(350px, .9fr); gap: 20px; align-items: stretch; }
.composer-panel, .preview-panel { min-width: 0; border: 1px solid var(--line); background: rgba(249,247,239,.58); }
.composer-panel { padding: 22px clamp(18px, 2vw, 27px) 15px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.section-kicker { display: block; color: #8d9284; }
.panel-heading h2, .preview-topline h2, .recent-heading h2 { margin: 7px 0 0; color: var(--ink); font: 22px var(--serif); letter-spacing: -.035em; }
.panel-pencil { color: var(--rust); font-size: 19px; }
.prompt-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #5f7066; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.prompt-label > span { color: #a1a094; font-size: 9px; font-weight: 400; letter-spacing: 0; text-align: right; }
.prompt-wrap { border: 1px solid #d5d0c1; background: #fbf9f2; transition: border .15s; }
.prompt-wrap:focus-within { border-color: #a8846a; }
.prompt-wrap textarea { display: block; width: 100%; min-height: 113px; resize: vertical; border: 0; outline: 0; padding: 12px 13px 7px; background: transparent; color: #304238; font: 14px/1.55 var(--serif); }
.prompt-wrap textarea::placeholder { color: #aaa99c; }
.prompt-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 10px; color: #a0a093; font-size: 8px; }
.prompt-tip { color: #8c9285; }
.prompt-tip span { margin-right: 5px; color: var(--rust); }
.composer-section { margin-top: 20px; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cost-caption, .optional-note { margin-bottom: 9px; color: #a2a092; font-size: 8px; letter-spacing: .1em; }
.model-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.model-option { position: relative; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 59px; padding: 8px; border: 1px solid #d9d4c5; background: #f8f6ee; text-align: left; cursor: pointer; transition: border .15s, background .15s; }
.model-option.is-selected { border-color: var(--pine-2); background: #f2f0e5; box-shadow: inset 0 0 0 1px var(--pine-2); }
.model-swatch { position: relative; width: 32px; height: 36px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(47,67,55,.1); }
.model-swatch-illustration { background: #d8c8a9; }
.model-swatch-illustration span:first-child { position: absolute; width: 18px; height: 20px; left: 7px; top: 7px; border-radius: 50% 50% 3px 3px; background: #b75539; }
.model-swatch-illustration span:nth-child(2) { position: absolute; width: 6px; height: 18px; left: 15px; top: 0; background: #4b6950; transform: rotate(25deg); }
.model-swatch-illustration span:last-child { position: absolute; width: 9px; height: 9px; left: 2px; bottom: 2px; border-radius: 50%; background: #d8a45a; }
.model-swatch-photo { background: linear-gradient(145deg,#d6d4c0 0 42%,#79836e 42% 62%,#b98362 62%); }
.model-swatch-photo span:first-child { position: absolute; width: 24px; height: 12px; top: 8px; left: 4px; border-radius: 50% 50% 0 0; background: rgba(255,246,220,.7); }
.model-swatch-photo span:last-child { position: absolute; width: 32px; height: 12px; left: 0; bottom: 0; background: #536950; }
.model-option-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.model-option-copy strong { color: #35473d; font: 14px var(--serif); }
.model-option-copy small { color: #898d81; font-size: 8px; }
.model-cost { display: flex; align-items: baseline; gap: 3px; color: #384b40; }
.model-cost strong { font: 14px var(--serif); }
.model-cost small { color: #929384; font-size: 7px; }
.radio-mark { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border: 1px solid #b7b4a6; border-radius: 50%; }
.is-selected .radio-mark { border-color: var(--rust); background: var(--rust); box-shadow: inset 0 0 0 2px #f5f1e6; }
.options-section { padding-top: 15px; border-top: 1px solid #ddd8ca; }
.options-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; }
.select-field { display: flex; flex-direction: column; gap: 7px; color: #899083; font-size: 8px; }
.select-field select { width: 100%; min-width: 0; height: 37px; appearance: none; border: 1px solid #d9d4c5; border-radius: 2px; padding: 0 25px 0 10px; background: #fbf9f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='m2 3 3 3 3-3' fill='none' stroke='%237c8579' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 10px center; color: #45574b; font-size: 9px; }
.toggle-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 11px; padding: 6px 0; border-top: 1px solid #e1dccf; }
.toggle-copy { display: flex; flex-direction: column; gap: 3px; }
.toggle-copy strong { color: #506157; font-size: 9px; font-weight: 600; }
.toggle-copy small { color: #99998d; font-size: 8px; }
.switch { position: relative; width: 31px; height: 17px; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: absolute; inset: 0; border: 1px solid #c7c5b7; border-radius: 10px; background: #e5e1d4; transition: all .18s; }
.switch-track::after { position: absolute; content: ''; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fffdf6; box-shadow: 0 1px 2px rgba(30,40,32,.2); transition: transform .18s; }
.switch input:checked + .switch-track { border-color: var(--pine-2); background: var(--pine-2); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: var(--ochre); }
.switch input:focus-visible + .switch-track { outline: 3px solid rgba(187,86,62,.36); outline-offset: 3px; }
.advanced-options { border-top: 1px solid #e1dccf; }
.advanced-options summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; color: #83887c; font-size: 9px; cursor: pointer; list-style: none; }
.advanced-options summary::-webkit-details-marker { display: none; }
.advanced-options summary span { color: var(--rust); font-size: 14px; }
.advanced-options[open] summary span { transform: rotate(45deg); }
.advanced-inner { padding-bottom: 10px; }
.advanced-inner .toggle-row { margin-top: 0; }
.negative-field { margin-top: 11px; }
.negative-field > span { display: flex; justify-content: space-between; }
.negative-field small { color: #a2a194; font-size: 8px; font-weight: 400; }
.negative-field textarea { resize: vertical; border: 1px solid #d9d4c5; padding: 9px; background: #fbf9f2; color: var(--ink); font: 11px/1.45 var(--sans); }
.generate-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 13px; border-top: 1px solid #dcd7c9; }
.generation-cost { display: flex; align-items: center; gap: 9px; }
.cost-medallion { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #ece2cf; color: var(--rust); font-size: 14px; }
.generation-cost > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.generation-cost strong { color: #3b5145; font: 13px var(--serif); }
.generation-cost small { color: #92958a; font-size: 8px; }
.generation-cost small b { color: #68756a; font-weight: 600; }
.generate-button { min-width: 139px; min-height: 43px; }
.button-arrow { font-size: 15px; font-weight: 400; }
.render-note { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: #9b9b8d; font-size: 8px; }
.render-note-dot { width: 5px; height: 5px; border-radius: 50%; background: #b2a680; }
.preview-panel { display: flex; flex-direction: column; padding: 21px 20px 13px; background: #e8e3d6; }
.preview-topline { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 2px 14px; }
.preview-topline h2 { font-size: 19px; }
.preview-number { color: #a3a08f; font: 17px var(--serif); }
.preview-stage { position: relative; flex: 1; min-height: 290px; max-height: 485px; overflow: hidden; display: grid; place-items: center; background: #d8d3c4; }
.preview-art { display: block; width: 100%; max-height: 485px; height: 100%; object-fit: cover; }
.preview-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; background: #d7d1c3; }
.preview-stamp { position: absolute; top: 17px; right: 14px; padding: 8px 10px; transform: rotate(4deg); border: 1px solid rgba(38,60,53,.32); background: rgba(247,244,236,.88); color: #43574c; font-size: 7px; letter-spacing: .12em; line-height: 1.6; }
.preview-progress { position: absolute; inset: auto 15px 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 15px; border: 1px solid rgba(240,234,219,.7); background: rgba(248,246,237,.94); box-shadow: 0 7px 20px rgba(46,55,43,.12); }
.progress-ornament { position: absolute; right: 14px; top: 13px; color: var(--rust); animation: slow-turn 8s linear infinite; }
@keyframes slow-turn { to { transform: rotate(360deg); } }
.preview-progress strong { color: #3d5146; font: 18px var(--serif); }
.preview-progress > span:not(.progress-ornament) { color: #879083; font-size: 9px; }
.progress-track { width: 100%; height: 3px; margin-top: 4px; background: #ddd8ca; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--rust); transition: width .35s; }
.preview-caption { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0 9px; border-bottom: 1px solid #d1ccbd; color: #667368; font: 12px var(--serif); }
.preview-caption i { color: var(--rust); font-style: normal; }
.preview-caption span:last-child { align-self: center; color: #a09d8e; font: 7px var(--sans); letter-spacing: .12em; }
.preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0 0; color: #858b7e; font-size: 8px; }
.preview-dot { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #95a180; }
.download-link { color: var(--rust-dark); font-size: 9px; text-decoration: none; }
.download-link span { margin-left: 3px; }
.recent-section { padding-top: 35px; }
.recent-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.recent-heading h2 { margin-top: 6px; font-size: 23px; }
.text-link { padding: 5px 0; border: 0; background: transparent; color: #667469; font-size: 9px; cursor: pointer; }
.text-link span { margin-left: 7px; color: var(--rust); }
.recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.empty-recent { grid-column: 1/-1; min-height: 73px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #929487; font: 13px var(--serif); }
.empty-recent-mark { color: var(--rust); font-size: 20px; }
.recent-card, .library-card { min-width: 0; border: 1px solid var(--line); background: rgba(248,246,238,.8); cursor: pointer; }
.recent-card img, .library-card img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #d7d0c0; }
.recent-card-meta { padding: 8px 9px 9px; }
.recent-card-meta strong { display: block; overflow: hidden; color: #3e5145; font: 12px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.recent-card-meta span { display: block; margin-top: 5px; color: #969689; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }

/* Collection and wallet */
.secondary-view { min-height: calc(100vh - 75px); padding-top: 44px; }
.secondary-heading { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.secondary-heading h1 { margin: 14px 0 8px; font-size: 52px; }
.wallet-layout { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(360px, 1.12fr); gap: 20px; margin-top: 24px; }
.wallet-balance-card { min-height: 337px; display: flex; flex-direction: column; padding: 24px; background: var(--pine); color: var(--paper-light); }
.wallet-card-top { display: flex; align-items: center; justify-content: space-between; color: #aab1a1; font-size: 8px; letter-spacing: .14em; }
.wallet-card-mark { color: var(--ochre); font-size: 22px; }
.wallet-big-balance { display: flex; align-items: baseline; gap: 10px; margin-top: 27px; }
.wallet-big-balance span { font: 72px/.9 var(--serif); letter-spacing: -.07em; }
.wallet-big-balance small { color: #abb3a4; font-size: 11px; }
.wallet-balance-meter { margin: 22px 0 10px; background: rgba(238,234,222,.13); }
.wallet-balance-meter span { background: var(--ochre); }
.wallet-balance-foot { display: flex; align-items: center; justify-content: space-between; color: #98a496; font-size: 9px; }
.balance-infinity { color: var(--ochre); font: 18px var(--serif); }
.button-light { min-height: 43px; margin-top: auto; background: #e8ddc7; color: var(--pine); }
.button-light:hover:not(:disabled) { background: #f2e8d4; }
.pricing-card { min-height: 337px; padding: 24px 26px; border: 1px solid var(--line); background: #f7f4eb; }
.pricing-card h2 { margin: 13px 0 21px; color: var(--ink); font: 29px/1.02 var(--serif); letter-spacing: -.045em; }
.pricing-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #ddd8ca; color: #3e5146; font: 14px var(--serif); }
.pricing-line > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.pricing-line strong { font-weight: 500; }
.pricing-line small { color: #98988b; font: 8px var(--sans); }
.pricing-line > span:last-child { font-family: var(--serif); }
.pricing-line > span:last-child small { margin-left: 5px; font-size: 7px; letter-spacing: .1em; }
.daily-note-card { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 11px 12px; background: #eee8d9; }
.daily-note-icon { color: var(--rust); font-size: 20px; }
.daily-note-card p { margin: 0; color: #7d8277; font-size: 9px; line-height: 1.55; }
.daily-note-card strong { color: #42564a; }
.wallet-start-link { margin-top: 12px; }
.payment-history { margin-top: 36px; }
.payment-history .recent-heading { align-items: center; }
.payment-history .recent-heading h2 { font-size: 21px; }
.secure-caption { color: #818b7a; font-size: 8px; }
.secure-caption span { margin-right: 4px; color: #617c61; }
.topup-history { border-top: 1px solid var(--line); }
.empty-history { padding: 18px 0; color: #969688; font: 13px var(--serif); }
.topup-row { display: grid; grid-template-columns: minmax(140px,1.2fr) minmax(120px,1fr) 110px 130px; align-items: center; gap: 12px; padding: 14px 3px; border-bottom: 1px solid var(--line); font-size: 10px; }
.topup-chain { display: flex; align-items: center; gap: 9px; color: #3e5146; font-weight: 600; }
.topup-row small { display: block; margin-top: 3px; color: #99988b; font-size: 8px; font-weight: 400; }
.status-chip { justify-self: start; border: 1px solid #d5d1c2; border-radius: 20px; padding: 5px 8px; color: #727a6f; font-size: 8px; text-transform: capitalize; }
.status-chip.confirmed { border-color: #bed0b9; background: #e8eee1; color: #4e6951; }
.status-chip.rejected { border-color: #e4beb0; background: #f6e8e1; color: #a14430; }
.topup-row a { color: var(--rust-dark); font-size: 8px; text-decoration: none; }
.credits-footnote { display: flex; gap: 10px; margin-top: 25px; padding: 13px 15px; border: 1px solid var(--line); color: #8c8d80; font-size: 9px; line-height: 1.6; }
.credits-footnote > span { color: var(--rust); font-size: 18px; }
.credits-footnote p { margin: 0; }
.credits-footnote strong { color: #485c4f; }
.library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding-top: 22px; }
.library-card { transition: transform .2s, box-shadow .2s; }
.library-card:hover { transform: translateY(-3px); box-shadow: 0 11px 24px rgba(52,58,45,.1); }
.library-card img { aspect-ratio: .86/1; }
.library-card-copy { padding: 11px 12px; }
.library-card-copy strong { display: block; overflow: hidden; color: #394d41; font: 14px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.library-card-copy p { display: -webkit-box; overflow: hidden; min-height: 31px; margin: 7px 0; color: #888d81; font-size: 9px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-card-copy span { color: #a19f91; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.empty-library { grid-column: 1/-1; min-height: 180px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; border: 1px dashed #c9c3b4; color: #8b8f83; font: 15px var(--serif); }
.empty-library span { color: var(--rust); font-size: 25px; }

/* Crypto top-up dialog */
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgba(23,37,30,.57); backdrop-filter: blur(3px); }
.payment-modal { position: relative; width: min(100%, 490px); max-height: min(92vh, 820px); overflow: auto; padding: 28px 32px 20px; background: var(--paper-light); box-shadow: 0 24px 70px rgba(15,26,20,.3); animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(9px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 18px; right: 19px; width: 30px; height: 30px; border: 1px solid #d7d1c2; border-radius: 50%; background: transparent; color: #68746a; font-size: 20px; line-height: 1; cursor: pointer; }
.payment-modal-head { display: flex; align-items: center; justify-content: space-between; color: #879084; }
.payment-modal-mark { color: var(--rust); font-size: 19px; }
.payment-modal h2 { margin: 14px 0 16px; color: var(--ink); font: 34px/.98 var(--serif); letter-spacing: -.045em; }
.topup-offer { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #ddd7c8; background: #f1ede2; }
.offer-symbol { color: var(--rust); font-size: 20px; }
.topup-offer > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.topup-offer strong { color: #3f5548; font: 16px var(--serif); }
.topup-offer small { color: #8c9084; font-size: 8px; }
.offer-price { color: var(--ink); font: 20px var(--serif); }
.payment-steps { margin: 23px 0 16px; }
.step-indicator, .step-labels { display: grid; grid-template-columns: 20px 1fr 20px 1fr 20px; align-items: center; gap: 8px; }
.step-indicator { margin: 0 7px; }
.step-num { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #cbc8ba; border-radius: 50%; color: #9b9c8e; font-size: 8px; }
.step-num.is-current, .step-num.is-done { border-color: var(--rust); background: var(--rust); color: white; }
.step-num.is-done { background: var(--pine); border-color: var(--pine); }
.step-line { height: 1px; background: #d7d2c4; }
.step-labels { grid-template-columns: 1fr 1fr 1fr; margin-top: 7px; color: #94968a; font-size: 7px; text-align: center; }
.step-labels span:first-child { text-align: left; }
.step-labels span:last-child { text-align: right; }
.payment-step-panel { animation: page-in .2s ease-out; }
.payment-intro { margin: 0 0 13px; color: #777f74; font: 12px/1.55 var(--serif); }
.network-options { display: grid; gap: 8px; }
.network-option { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 57px; padding: 9px 11px; border: 1px solid #d9d4c6; background: #fbf9f2; text-align: left; cursor: pointer; }
.network-option.is-selected { border-color: var(--pine-2); box-shadow: inset 0 0 0 1px var(--pine-2); }
.chain-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; font: 13px var(--serif); }
.chain-bsc { background: #b18a3e; }
.chain-tron { background: #bc5144; }
.network-option > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.network-option strong { color: #3b4f44; font-size: 10px; font-weight: 600; }
.network-option small { color: #96968a; font-size: 8px; }
.network-radio { width: 13px; height: 13px; border: 1px solid #b8b7a9; border-radius: 50%; }
.network-option.is-selected .network-radio { border: 4px solid var(--rust); }
.payment-warning { display: flex; gap: 9px; margin: 13px 0; padding: 10px; background: #f1e9da; color: #7d7769; }
.payment-warning > span { width: 15px; height: 15px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #b58555; border-radius: 50%; color: #a35d38; font-size: 9px; }
.payment-warning p { margin: 0; font-size: 8px; line-height: 1.6; }
.payment-warning strong { color: #43574b; }
.payment-continue { width: 100%; min-height: 43px; }
.address-box { padding: 11px; border: 1px solid #d8d3c4; background: #f5f1e6; }
.address-box-top { display: flex; justify-content: space-between; color: #969687; font-size: 7px; letter-spacing: .13em; }
.address-box-top span:last-child { color: #566f5a; font-weight: 650; }
.address-text-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.address-text-row code { min-width: 0; overflow-wrap: anywhere; flex: 1; color: #34483c; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-button { min-height: 28px; padding: 0 9px; border: 1px solid #c6cbbb; background: #fbf9f2; color: #566c5b; font-size: 8px; cursor: pointer; }
.payment-order-line { display: flex; justify-content: space-between; gap: 12px; margin: 11px 0 14px; color: #929487; font-size: 8px; }
.payment-order-line strong { color: #47594d; font-weight: 650; }
.tx-form { display: grid; gap: 11px; }
.tx-form .field-wrap input { min-height: 42px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tx-form .button { width: 100%; min-height: 42px; }
.payment-status-note { margin-top: 11px; padding: 10px; border-left: 2px solid #7c926f; background: #eaf0e4; color: #51684d; font-size: 9px; line-height: 1.55; }
.payment-status-note.is-error { border-color: var(--rust); background: #f6e8df; color: #943f2c; }
.payment-back { margin-top: 10px; color: #8a8c80; font-size: 8px; }
.payment-confirmed { display: flex; align-items: center; flex-direction: column; padding: 20px 5px 10px; text-align: center; }
.confirmed-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: #dfe9d9; color: #55754f; font-size: 23px; }
.payment-confirmed h3 { margin: 9px 0; color: #33483d; font: 28px/1.05 var(--serif); }
.payment-confirmed p { margin: 0 0 18px; color: #82887b; font: 12px var(--serif); }
.payment-confirmed .button { width: 100%; }
.payment-modal-foot { display: flex; align-items: center; gap: 7px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #e0dbce; color: #9a998d; font-size: 7px; }
.secure-lock { color: #667e60; font-size: 12px; }
.toast-region { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { max-width: min(360px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid #c3ceba; background: #f6f3e8; color: #42594a; box-shadow: 0 8px 28px rgba(39,49,39,.17); font-size: 10px; line-height: 1.5; animation: page-in .2s ease-out; }
.toast.is-error { border-color: #dfb7a8; color: #99402d; }

@media (min-width: 1500px) {
  .main-area { padding-right: clamp(68px, 5.5vw, 105px); padding-left: clamp(68px, 5.5vw, 105px); }
  .studio-layout { grid-template-columns: minmax(460px, 1.05fr) minmax(420px, .95fr); gap: 24px; }
  .composer-panel { padding: 25px 30px 17px; }
}
@media (max-width: 1160px) {
  .app-shell { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar { padding-right: 15px; padding-left: 15px; }
  .main-area { padding-right: 25px; padding-left: 25px; }
  .studio-layout { grid-template-columns: minmax(0,1fr); }
  .preview-panel { min-height: 520px; }
  .preview-stage { max-height: 480px; }
  .preview-art { max-width: 560px; margin: 0 auto; }
  .landing-hero { grid-template-columns: minmax(360px, .9fr) minmax(330px, 1.1fr); padding-right: 5vw; padding-left: 5vw; }
  .landing-art-area { height: 510px; }
  .landing-art-card { width: min(69%, 350px); }
  .hero-bottomline { right: 5vw; left: 5vw; }
  .landing-pricing { padding-right: 8vw; padding-left: 8vw; }
}
@media (max-width: 760px) {
  .landing-nav { min-height: 69px; gap: 10px; padding: 12px 18px; }
  .landing-nav .brand-symbol { width: 31px; height: 31px; font-size: 26px; }
  .landing-nav .wordmark { gap: 8px; }
  .landing-nav .wordmark-name { font-size: 20px; }
  .landing-nav-links { display: none; }
  .landing-nav-actions { gap: 15px; margin-left: auto; }
  .landing-nav-cta { display: none; }
  .landing-signin { padding: 8px 0; font-size: 9px; }
  .landing-menu-button { display: block; padding: 8px 0 8px 6px; font-size: 9px; }
  .landing-hero { min-height: 0; grid-template-columns: minmax(0,1fr); gap: 4px; padding: 57px 25px 74px; }
  .landing-hero-copy { padding-bottom: 0; }
  .landing-kicker { font-size: 7px; letter-spacing: .12em; }
  .landing-kicker-star { font-size: 16px; }
  .landing-hero h1 { margin: 21px 0 16px; font-size: clamp(49px, 12.5vw, 73px); }
  .landing-lede { max-width: 455px; font-size: 14px; }
  .landing-hero-actions { gap: 17px; margin-top: 23px; }
  .landing-main-cta { min-width: 184px; min-height: 48px; padding: 0 12px; font-size: 10px; }
  .landing-secondary-link { font-size: 9px; }
  .landing-free-note { margin-top: 21px; font-size: 9px; }
  .landing-art-area { width: min(100%, 510px); height: 455px; justify-self: center; margin-top: 2px; }
  .landing-art-area::before { top: 35px; right: 2%; width: 88%; }
  .landing-art-area::after { top: 6px; right: 0; width: 91%; }
  .landing-art-card { width: min(67%, 320px); padding: 9px 9px 0; }
  .landing-art-topline { font-size: 6px; }
  .landing-art-caption strong { font-size: 12px; }
  .prompt-slip { right: -1%; bottom: 39px; padding: 11px 12px; }
  .prompt-slip strong { font-size: 10px; }
  .model-seal { top: 48px; left: 0; width: 79px; height: 79px; }
  .model-seal b { font-size: 6px; }
  .model-seal small { font-size: 5px; }
  .hero-bottomline { right: 25px; bottom: 23px; left: 25px; gap: 8px; font-size: 5px; }
  .landing-intro, .landing-models { padding: 71px 23px 76px; }
  .landing-section-heading, .models-heading { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 30px; }
  .landing-section-heading h2, .models-heading h2, .pricing-copy h2 { margin-top: 14px; font-size: clamp(41px, 10vw, 54px); }
  .landing-section-heading p, .models-heading > p { max-width: 450px; font-size: 13px; }
  .landing-steps { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .landing-step { min-height: 0; padding: 18px 18px 17px; }
  .step-illustration { height: 91px; max-width: 280px; }
  .step-illustration-prompt { padding: 14px 19px; }
  .landing-step h3 { font-size: 20px; }
  .landing-step p { max-width: 390px; font-size: 10px; }
  .landing-models { padding-top: 72px; }
  .model-cards { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .model-feature-art { height: 245px; }
  .model-feature-info { padding: 15px 8px 9px; }
  .model-feature-info h3 { font-size: 21px; }
  .model-feature-info p { max-width: 210px; font-size: 10px; }
  .landing-pricing { grid-template-columns: minmax(0,1fr); gap: 35px; padding: 73px 27px 85px; }
  .pricing-copy > p { font-size: 14px; }
  .credit-ledger { width: calc(100% - 7px); padding: 20px 18px 17px; }
  .ledger-line { min-height: 61px; }
  .ledger-stamp { right: -13px; bottom: -33px; width: 70px; height: 70px; }
  .landing-footer { min-height: 0; display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 27px 22px 24px; }
  .landing-footer > span { display: none; }
  .landing-footer > button { font-size: 11px; }
  .landing-footer > small { grid-column: 1 / -1; }
  .auth-back { font-size: 9px; }
  .auth-screen { min-height: 100vh; display: flex; flex-direction: column; }
  .auth-art-panel { display: none; }
  .auth-form-panel { min-height: 100vh; padding: 20px 24px 18px; }
  .mobile-wordmark { display: inline-flex; }
  .auth-form-wrap { margin: 45px auto 35px; }
  .auth-form-wrap h1 { font-size: 47px; }
  .auth-bottom-note { font-size: 7px; }
  .app-shell { display: block; padding-bottom: 65px; }
  .sidebar { position: fixed; z-index: 10; inset: auto 0 0; width: 100%; height: 63px; min-height: 0; flex-direction: row; justify-content: space-around; padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid rgba(240,235,221,.18); }
  .sidebar-brand, .sidebar-label, .sidebar-divider, .sidebar-note, .sidebar-bottom { display: none; }
  .side-nav { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
  .side-link { height: 56px; min-height: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 3px; border-radius: 0; font-size: 8px; }
  .side-link.is-active::before { width: 28px; height: 2px; top: 0; left: 50%; margin: 0; transform: translateX(-50%); }
  .side-link .nav-icon { width: auto; height: 17px; font-size: 15px; }
  .side-count, .nav-count, .side-pill { display: none; }
  .main-area { padding: 0 17px 32px; }
  .topbar { height: 59px; }
  .topbar-actions { gap: 9px; }
  .queue-indicator { font-size: 0; }
  .queue-indicator strong { font-size: 8px; }
  .queue-dot { width: 7px; height: 7px; }
  .top-credit-button { min-height: 34px; gap: 6px; padding: 0 6px; }
  .top-credit-button strong { font-size: 15px; }
  .top-credit-star { font-size: 14px; }
  .page-heading { padding: 29px 0 20px; }
  .heading-caption { display: none; }
  .page-heading h1 { max-width: 340px; margin-top: 13px; font-size: clamp(38px, 11vw, 49px); }
  .page-heading > div > p { font-size: 13px; }
  .studio-layout { gap: 13px; }
  .composer-panel { padding: 18px 15px 13px; }
  .panel-heading { margin-bottom: 17px; }
  .panel-heading h2 { font-size: 20px; }
  .prompt-label { align-items: flex-start; font-size: 7px; }
  .prompt-label > span { max-width: 54%; font-size: 8px; }
  .prompt-wrap textarea { min-height: 110px; font-size: 13px; }
  .model-options { gap: 6px; }
  .model-option { gap: 6px; min-height: 56px; padding: 6px; }
  .model-swatch { width: 27px; height: 33px; }
  .model-option-copy strong { font-size: 12px; }
  .model-cost strong { font-size: 12px; }
  .model-cost small { font-size: 6px; }
  .cost-caption, .optional-note { font-size: 7px; }
  .options-grid { grid-template-columns: 1fr; }
  .select-field select { height: 38px; }
  .generate-footer { align-items: flex-end; }
  .generation-cost { gap: 6px; }
  .generation-cost strong { font-size: 12px; }
  .generate-button { min-width: 130px; padding: 0 12px; font-size: 10px; }
  .render-note { align-items: flex-start; font-size: 7px; line-height: 1.5; }
  .preview-panel { min-height: 0; padding: 17px 14px 11px; }
  .preview-stage { min-height: 300px; max-height: 460px; }
  .preview-topline h2 { font-size: 17px; }
  .preview-caption { font-size: 10px; }
  .preview-caption span:last-child { font-size: 6px; }
  .recent-section { padding-top: 27px; }
  .recent-heading h2 { font-size: 20px; }
  .recent-heading .text-link { font-size: 8px; }
  .recent-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .recent-card-meta { padding: 7px; }
  .recent-card-meta strong { font-size: 11px; }
  .secondary-view { min-height: calc(100vh - 125px); padding-top: 30px; }
  .secondary-heading h1 { font-size: 43px; }
  .wallet-layout { grid-template-columns: 1fr; gap: 12px; margin-top: 15px; }
  .wallet-balance-card { min-height: 300px; padding: 20px; }
  .pricing-card { min-height: 0; padding: 20px; }
  .pricing-card h2 { font-size: 26px; }
  .topup-row { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .topup-row > :nth-child(3) { justify-self: start; }
  .topup-row > :nth-child(4) { justify-self: end; }
  .library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-top: 14px; }
  .library-card-copy { padding: 8px; }
  .library-card-copy strong { font-size: 12px; }
  .library-card-copy p { font-size: 8px; }
  .payment-modal { width: min(100%, 450px); padding: 24px 20px 16px; }
  .payment-modal h2 { font-size: 31px; }
  .payment-steps { margin: 19px 0 13px; }
  .payment-intro { font-size: 11px; }
  .toast-region { right: 12px; bottom: 73px; }
}
@media (max-width: 390px) {
  .main-area { padding-right: 12px; padding-left: 12px; }
  .model-option { gap: 4px; }
  .model-swatch { width: 23px; }
  .model-option-copy small { font-size: 7px; }
  .model-cost { gap: 2px; }
  .generate-button { min-width: 115px; }
  .payment-modal { padding-right: 16px; padding-left: 16px; }
}