/* miniapp/src/styles.css */
:root {
  color-scheme: light;
  font-family:
    "Segoe UI",
    "Arial",
    sans-serif;
  color: #1a2146;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(104, 175, 255, 0.34),
      transparent 23%),
    radial-gradient(
      circle at 92% 2%,
      rgba(166, 87, 255, 0.3),
      transparent 24%),
    radial-gradient(
      circle at 18% 62%,
      rgba(181, 255, 107, 0.18),
      transparent 16%),
    linear-gradient(
      180deg,
      #f7f8ff 0%,
      #fefeff 54%,
      #ffffff 100%);
}
* {
  box-sizing: border-box;
}
html,
body,
#root {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
}
body {
  background: transparent;
}
button,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.page-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding: max(10px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
}
.page-orb {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.9;
}
.page-orb-left {
  top: 90px;
  left: -20px;
  width: 110px;
  height: 110px;
  background:
    radial-gradient(
      circle,
      rgba(62, 193, 255, 0.72),
      rgba(62, 193, 255, 0));
}
.page-orb-right {
  top: 28px;
  right: -24px;
  width: 132px;
  height: 132px;
  background:
    radial-gradient(
      circle,
      rgba(176, 79, 255, 0.68),
      rgba(176, 79, 255, 0));
}
.app-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.hero-header,
.proof-card,
.composer-card,
.result-card,
.payment-sheet {
  border: 1px solid rgba(212, 222, 248, 0.9);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 38px rgba(82, 95, 184, 0.1);
}
.hero-header,
.proof-card,
.composer-card,
.results-section,
.payment-sheet {
  border-radius: 26px;
}
.hero-header,
.proof-card,
.composer-card,
.payment-sheet {
  padding: 16px;
}
.hero-header {
  overflow: hidden;
  display: grid;
  gap: 10px;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 204, 77, 0.2),
      transparent 28%),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(246, 247, 255, 0.95));
}
.hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand-mark {
  margin: 0;
  color: #3049d7;
  font-size: clamp(1.75rem, 6.5vw, 2rem);
  font-weight: 900;
  line-height: 1;
}
.hero-flash {
  padding: 7px 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 233, 127, 0.95),
      rgba(185, 255, 120, 0.95));
  color: #54420a;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}
.hero-title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(1.05rem, 4.8vw, 1.2rem);
  line-height: 1.28;
  font-weight: 800;
}
.hero-subtitle {
  margin: 8px 0 0;
  max-width: 34ch;
  color: #66708f;
  font-size: 0.92rem;
  line-height: 1.42;
}
.hero-badges {
  display: grid;
  gap: 8px;
}
.spark-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6675d8;
  font-size: 0.95rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 800;
}
.pill-balance {
  border: 0;
  background:
    linear-gradient(
      90deg,
      #e8f8ff 0%,
      #eef0ff 55%,
      #f6eaff 100%);
  color: #2757d1;
}
.pill-week {
  color: #814615;
  background:
    linear-gradient(
      90deg,
      #fff2b7 0%,
      #ffd79f 100%);
}
.proof-card {
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(253, 254, 255, 0.96),
      rgba(249, 245, 255, 0.92));
}
.section-kicker {
  margin: 0;
  color: #5b6a8f;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-note {
  margin: 6px 0 0;
  color: #6f7893;
  font-size: 0.89rem;
  line-height: 1.4;
}
.proof-row {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.proof-item {
  padding: 13px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #f7f9ff 0%,
      #eff4ff 100%);
}
.proof-item-accent {
  background:
    linear-gradient(
      135deg,
      rgba(229, 241, 255, 0.95),
      rgba(245, 235, 255, 0.96));
}
.proof-label {
  display: inline-flex;
  margin-bottom: 8px;
  color: #405388;
  font-size: 0.78rem;
  font-weight: 800;
}
.proof-item p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.46;
}
.proof-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: #6577b8;
  font-size: 1.25rem;
  font-weight: 900;
}
.section-head,
.styles-head,
.result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.counter {
  flex-shrink: 0;
  color: #73809b;
  font-size: 0.86rem;
  font-weight: 800;
}
.counter-error,
.feedback-error {
  color: #d64f57;
}
.message-input {
  width: 100%;
  min-height: 96px;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(209, 221, 245, 1);
  border-radius: 20px;
  outline: none;
  resize: none;
  background:
    linear-gradient(
      180deg,
      #fbfcff 0%,
      #f4f8ff 100%);
  color: #1d2340;
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.message-input:focus {
  border-color: rgba(89, 109, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(96, 133, 255, 0.12);
  transform: translateY(-1px);
}
.message-input::placeholder {
  color: #8d97b0;
}
.styles-block {
  margin-top: 16px;
}
.styles-head {
  align-items: center;
}
.styles-head strong {
  color: #2ea83d;
  font-size: 0.91rem;
}
.styles-tip {
  margin: 5px 0 0;
  color: #6d77a0;
  font-size: 0.82rem;
}
.style-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.style-chip {
  min-height: 112px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(214, 223, 245, 0.98);
  border-radius: 18px;
  color: #26314f;
  text-align: left;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.style-chip-selected {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(103, 111, 255, 0.12);
}
.tone-festive {
  background:
    linear-gradient(
      180deg,
      rgba(255, 243, 204, 0.92),
      rgba(255, 232, 183, 0.72));
}
.tone-poetic {
  background:
    linear-gradient(
      180deg,
      rgba(236, 241, 255, 0.94),
      rgba(240, 232, 255, 0.82));
}
.tone-humorous {
  background:
    linear-gradient(
      180deg,
      rgba(230, 255, 237, 0.94),
      rgba(212, 255, 223, 0.82));
}
.tone-rap {
  background:
    linear-gradient(
      180deg,
      rgba(231, 242, 255, 0.95),
      rgba(207, 225, 255, 0.84));
}
.style-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.style-chip-emoji {
  font-size: 1.24rem;
}
.style-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #35436c;
  font-size: 0.92rem;
  font-weight: 800;
}
.style-chip-title {
  font-size: 0.96rem;
  font-weight: 800;
}
.style-chip-subtitle {
  color: #5d6a89;
  font-size: 0.81rem;
  line-height: 1.35;
}
.composer-actions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.primary-button,
.share-button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      #b32fff 0%,
      #4b56ff 56%,
      #14a4ff 100%);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(86, 87, 255, 0.24);
}
.primary-button:disabled,
.secondary-link:disabled {
  opacity: 0.58;
}
.ghost-button,
.secondary-link,
.card-button,
.package-card {
  border: 1px solid rgba(214, 223, 245, 0.98);
  background: #ffffff;
  color: #273454;
}
.ghost-button {
  min-height: 48px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
}
.feedback {
  margin: 0 6px;
  color: #52607c;
  font-size: 0.9rem;
  line-height: 1.45;
}
.results-section {
  display: grid;
  gap: 12px;
}
.results-title {
  margin: 6px 0 0;
  font-size: 1.06rem;
  line-height: 1.35;
}
.result-list,
.package-list {
  display: grid;
  gap: 12px;
}
.result-card {
  padding: 16px;
  border-radius: 22px;
  animation: fade-up 0.28s ease both;
}
.result-style {
  margin: 0;
  color: #26314f;
  font-size: 0.98rem;
  font-weight: 800;
}
.result-style-note {
  margin: 6px 0 0;
  color: #66728e;
  font-size: 0.82rem;
}
.result-text {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.result-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.card-button {
  min-height: 46px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
}
.card-button-accent {
  background:
    linear-gradient(
      90deg,
      rgba(74, 112, 255, 0.12),
      rgba(179, 47, 255, 0.15));
}
.share-button {
  margin-top: 4px;
}
.secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.secondary-link {
  min-height: 46px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
}
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  align-items: end;
  padding: 16px 12px max(16px, env(safe-area-inset-bottom));
  background: rgba(20, 28, 54, 0.32);
}
.payment-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 24px 24px 18px 18px;
}
.sheet-balance {
  margin: 12px 0 0;
  color: #2457d4;
  font-size: 0.96rem;
  font-weight: 800;
}
.package-card {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-card,
  .message-input,
  .style-chip {
    animation: none;
    transition: none;
  }
}
@media (min-width: 400px) {
  .hero-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 720px) {
  .page-shell {
    padding: 18px;
  }
  .proof-row {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: stretch;
  }
  .proof-arrow {
    display: flex;
  }
}