.native-app--text-logo-maker {
  --logo-ink: #fff8e8;
  --logo-muted: #a9bdb4;
  --logo-green: #0b3427;
  --logo-green-deep: #06251c;
  --logo-panel: #103c2f;
  --logo-line: rgba(123, 218, 180, .26);
  --logo-mint: #7bdab4;
  --logo-gold: #ffc45b;
}

.native-app--text-logo-maker .native-package-body { padding: 0; }
.native-app--text-logo-maker *, .native-app--text-logo-maker *::before, .native-app--text-logo-maker *::after { box-sizing: border-box; }
.native-app--text-logo-maker .logo-maker { color: var(--logo-ink); background: radial-gradient(circle at 93% 2%, rgba(123,218,180,.12), transparent 24%), var(--logo-green-deep); font-family: Manrope, Arial, sans-serif; }
.native-app--text-logo-maker .logo-maker__intro { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; padding: clamp(1.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--logo-line); }
.native-app--text-logo-maker .logo-maker__eyebrow, .native-app--text-logo-maker .logo-maker__section-heading small { display: block; margin-bottom: .55rem; color: var(--logo-gold); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.native-app--text-logo-maker .logo-maker__intro h2 { max-width: 800px; margin: 0 0 .75rem; color: var(--logo-ink); font: 700 clamp(2.2rem, 5vw, 4.8rem)/.98 Fraunces, Georgia, serif; letter-spacing: -.035em; }
.native-app--text-logo-maker .logo-maker__intro p { max-width: 760px; margin: 0; color: var(--logo-muted); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; }
.native-app--text-logo-maker .logo-maker__format { flex: 0 0 180px; padding: 1.1rem 1.25rem; border: 1px solid var(--logo-line); border-radius: 22px; background: rgba(123,218,180,.06); }
.native-app--text-logo-maker .logo-maker__format strong { display: block; color: var(--logo-mint); font-size: 1.55rem; }
.native-app--text-logo-maker .logo-maker__format span { color: var(--logo-muted); font-size: .76rem; }
.native-app--text-logo-maker .logo-maker__workspace { display: grid; grid-template-columns: minmax(320px, .84fr) minmax(440px, 1.16fr); }
.native-app--text-logo-maker .logo-maker__controls, .native-app--text-logo-maker .logo-maker__preview-panel { min-width: 0; padding: clamp(1.35rem, 3vw, 2.6rem); }
.native-app--text-logo-maker .logo-maker__controls { border-right: 1px solid var(--logo-line); }
.native-app--text-logo-maker .logo-maker__preview-panel { position: sticky; top: 1rem; align-self: start; }
.native-app--text-logo-maker .logo-maker__section-heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.65rem; }
.native-app--text-logo-maker .logo-maker__section-heading > span { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border: 1px solid rgba(255,196,91,.48); border-radius: 16px; color: var(--logo-gold); font-weight: 800; }
.native-app--text-logo-maker .logo-maker__section-heading small { margin: 0 0 .16rem; }
.native-app--text-logo-maker .logo-maker__section-heading h3 { margin: 0; color: var(--logo-ink); font: 700 clamp(1.45rem, 2.2vw, 2rem)/1.1 Fraunces, Georgia, serif; }
.native-app--text-logo-maker .logo-maker__field { display: grid; gap: .48rem; min-width: 0; margin-bottom: 1.15rem; }
.native-app--text-logo-maker .logo-maker__field > span { display: flex; justify-content: space-between; gap: .5rem; color: var(--logo-ink); font-size: .81rem; font-weight: 750; }
.native-app--text-logo-maker .logo-maker__field output { color: var(--logo-mint); font-weight: 650; }
.native-app--text-logo-maker .logo-maker__field small { color: var(--logo-muted); font-size: .7rem; text-align: right; }
.native-app--text-logo-maker input[type="text"], .native-app--text-logo-maker input[type="number"], .native-app--text-logo-maker select { width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--logo-line); border-radius: 13px; outline: 0; background: #082b21; color: var(--logo-ink); font: 650 .95rem Manrope, Arial, sans-serif; }
.native-app--text-logo-maker input:focus, .native-app--text-logo-maker select:focus { border-color: var(--logo-mint); box-shadow: 0 0 0 3px rgba(123,218,180,.12); }
.native-app--text-logo-maker select { appearance: auto; color-scheme: dark; }
.native-app--text-logo-maker .logo-maker__field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.native-app--text-logo-maker .logo-maker__field-grid--type { grid-template-columns: .9fr 1.15fr .72fr; }
.native-app--text-logo-maker .logo-maker__color-control { display: flex !important; align-items: center; justify-content: flex-start !important; min-height: 48px; padding: .45rem .65rem; border: 1px solid var(--logo-line); border-radius: 13px; background: #082b21; }
.native-app--text-logo-maker input[type="color"] { width: 36px; height: 32px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: transparent; }
.native-app--text-logo-maker .logo-maker__color-control output { margin-left: .65rem; color: var(--logo-ink); font-size: .77rem; }
.native-app--text-logo-maker .logo-maker__switch, .native-app--text-logo-maker .logo-maker__check { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.3rem; color: var(--logo-ink); cursor: pointer; }
.native-app--text-logo-maker .logo-maker__switch input { position: absolute; opacity: 0; }
.native-app--text-logo-maker .logo-maker__switch > span { position: relative; width: 46px; height: 26px; flex: 0 0 46px; border: 1px solid var(--logo-line); border-radius: 999px; background: #082b21; transition: .2s ease; }
.native-app--text-logo-maker .logo-maker__switch > span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--logo-muted); transition: .2s ease; }
.native-app--text-logo-maker .logo-maker__switch input:checked + span { background: var(--logo-mint); }
.native-app--text-logo-maker .logo-maker__switch input:checked + span::after { transform: translateX(20px); background: var(--logo-green-deep); }
.native-app--text-logo-maker .logo-maker__switch b { font-size: .81rem; }
.native-app--text-logo-maker .logo-maker__range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.native-app--text-logo-maker input[type="range"] { width: 100%; accent-color: var(--logo-gold); }
.native-app--text-logo-maker .logo-maker__dimensions .logo-maker__field > div { display: flex; align-items: center; border: 1px solid var(--logo-line); border-radius: 13px; background: #082b21; overflow: hidden; }
.native-app--text-logo-maker .logo-maker__dimensions input { border: 0; border-radius: 0; }
.native-app--text-logo-maker .logo-maker__dimensions i { padding-right: .85rem; color: var(--logo-muted); font-size: .75rem; font-style: normal; }
.native-app--text-logo-maker .logo-maker__check { align-items: flex-start; padding: .95rem; border: 1px solid var(--logo-line); border-radius: 14px; background: rgba(123,218,180,.05); }
.native-app--text-logo-maker .logo-maker__check input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--logo-mint); }
.native-app--text-logo-maker .logo-maker__check span { display: grid; gap: .16rem; }
.native-app--text-logo-maker .logo-maker__check small { color: var(--logo-muted); font-size: .72rem; }
.native-app--text-logo-maker .logo-maker__preview { display: grid; min-height: 420px; padding: clamp(1rem, 3vw, 2rem); place-items: center; border: 1px solid var(--logo-line); border-radius: 22px; overflow: hidden; background-color: #163f33; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.045) 75%); background-position: 0 0, 0 12px, 12px -12px, -12px 0; background-size: 24px 24px; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.native-app--text-logo-maker canvas { display: block; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.native-app--text-logo-maker .logo-maker__meta { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .2rem 1.3rem; color: var(--logo-muted); font-size: .72rem; }
.native-app--text-logo-maker .logo-maker__meta b { color: var(--logo-mint); }
.native-app--text-logo-maker .logo-maker__actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: .8rem; }
.native-app--text-logo-maker .logo-maker__button { min-height: 52px; padding: .8rem 1.15rem; border: 1px solid var(--logo-line); border-radius: 14px; color: var(--logo-ink); font: 800 .86rem Manrope, Arial, sans-serif; cursor: pointer; }
.native-app--text-logo-maker .logo-maker__button span { margin-right: .4rem; font-size: 1.15rem; }
.native-app--text-logo-maker .logo-maker__button--secondary { background: transparent; }
.native-app--text-logo-maker .logo-maker__button--primary { border-color: var(--logo-gold); background: var(--logo-gold); color: #183126; box-shadow: 0 14px 30px rgba(255,196,91,.14); }
.native-app--text-logo-maker .logo-maker__button:hover { transform: translateY(-1px); border-color: var(--logo-mint); }
.native-app--text-logo-maker .logo-maker__status { min-height: 1.4em; margin: .75rem 0 0; color: var(--logo-muted); font-size: .72rem; text-align: right; }
.native-app--text-logo-maker [data-background-field].is-disabled { opacity: .42; }

@media (max-width: 900px) {
  .native-app--text-logo-maker .logo-maker__workspace { grid-template-columns: 1fr; }
  .native-app--text-logo-maker .logo-maker__controls { border-right: 0; border-bottom: 1px solid var(--logo-line); }
  .native-app--text-logo-maker .logo-maker__preview-panel { position: static; }
}
@media (max-width: 620px) {
  .native-app--text-logo-maker .logo-maker__intro { align-items: flex-start; flex-direction: column; }
  .native-app--text-logo-maker .logo-maker__format { width: 100%; flex-basis: auto; }
  .native-app--text-logo-maker .logo-maker__field-grid, .native-app--text-logo-maker .logo-maker__range-grid { grid-template-columns: 1fr; gap: 0; }
  .native-app--text-logo-maker .logo-maker__field-grid--colors, .native-app--text-logo-maker .logo-maker__dimensions { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .native-app--text-logo-maker .logo-maker__preview { min-height: 260px; padding: .7rem; }
  .native-app--text-logo-maker .logo-maker__actions { grid-template-columns: 1fr; }
  .native-app--text-logo-maker .logo-maker__button--primary { order: -1; }
}
@media (max-width: 390px) {
  .native-app--text-logo-maker .logo-maker__field-grid--colors, .native-app--text-logo-maker .logo-maker__dimensions { grid-template-columns: 1fr; gap: 0; }
  .native-app--text-logo-maker .logo-maker__meta { align-items: flex-start; flex-direction: column; gap: .25rem; }
}