:root {
  --ink: #172033;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe8f2;
  --paper: #fbfff9;
  --soft: #f5fbfa;
  --blue: #2f8bd8;
  --green: #22a06b;
  --yellow: #ffe48a;
  --pink: #ff8ab1;
  --cyan: #8be3e8;
  --orange: #ff9f43;
  --coral: #ff6f61;
  --mint: #34d399;
  --violet: #8b5cf6;
  --kid-blue: #38bdf8;
  --kid-lime: #84cc16;
  --sun: #ffd166;
  --rose: #fb7185;
  --teal: #2dd4bf;
  --lavender: #a78bfa;
  --paper-warm: #fffdf7;
  --paper-cream: #fff8e8;
  --sticker-aqua: #bdf5ee;
  --sticker-lemon: #fff0a8;
  --sticker-peach: #ffd2c2;
  --sticker-leaf: #d9f8bd;
  --soft-shadow: 0 18px 42px rgba(38, 57, 82, 0.075);
  --card-shadow: 0 10px 24px rgba(38, 57, 82, 0.055);
  --shadow: 0 22px 58px rgba(32, 46, 72, 0.105);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background:
    radial-gradient(circle at 8% -4%, rgba(189, 245, 238, 0.44), transparent 320px),
    radial-gradient(circle at 92% 2%, rgba(255, 240, 168, 0.34), transparent 340px),
    radial-gradient(circle at 50% 108%, rgba(255, 210, 194, 0.24), transparent 420px),
    repeating-linear-gradient(0deg, rgba(23, 32, 51, 0.016) 0 1px, transparent 1px 24px),
    linear-gradient(135deg, #fbfffd, #fffdf5 58%, #f3fbff);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 56px);
  background: rgba(255, 253, 247, 0.9);
  border-bottom: 1px solid rgba(231, 220, 202, 0.76);
  box-shadow: 0 10px 28px rgba(72, 55, 36, 0.055);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #33b7e8, #20c9aa);
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 12px;
  box-shadow:
    6px 6px 0 rgba(255, 209, 102, 0.7),
    0 10px 22px rgba(47, 139, 216, 0.16);
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #465162;
  font-size: 14px;
}

.nav > a {
  position: relative;
  min-height: 40px;
  padding: 9px 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(219, 232, 242, 0.34);
  border-radius: 999px;
}

.nav > a:not(.top-account-chip)::after {
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 2px;
  content: "";
  background: var(--teal);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.72);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.nav > a:hover,
.nav > a:focus-visible {
  border-color: rgba(32, 201, 170, 0.26);
  background: linear-gradient(135deg, #f2fffc, #fffaf0);
}

.nav > a.active,
.nav > a[aria-current="page"] {
  color: #0f766e;
  background: #fff;
  border-color: rgba(32, 201, 170, 0.3);
  box-shadow: 0 10px 22px rgba(32, 201, 170, 0.095);
}

.nav > a.active::after,
.nav > a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav .top-account-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 208px;
  max-width: 248px;
  margin-left: 4px;
  padding: 8px 12px;
  color: #4f6075;
  line-height: 1.1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.82));
  border: 1px solid rgba(188, 226, 221, 0.82);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(38, 57, 82, 0.045);
}

.nav .top-account-chip strong,
.nav .top-account-chip span,
.nav .top-account-head,
.nav .top-account-badge,
.nav .top-account-wallet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav .top-account-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.nav .top-account-chip strong {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.nav .top-account-badge {
  flex: 0 0 auto;
  max-width: 74px;
  padding: 2px 6px;
  color: #08745f;
  font-size: 10px;
  font-weight: 900;
  background: #dff9ee;
  border: 1px solid #aee6d0;
  border-radius: 999px;
}

.nav .top-account-chip span {
  color: #66788d;
  font-size: 12px;
  font-weight: 800;
}

.nav .top-account-wallet {
  color: #08745f;
  font-size: 11px;
  font-weight: 900;
}

.nav .top-account-chip.logged-in {
  color: #08745f;
  background: #ecfff8;
  border-color: #9be4cc;
}

.nav .top-account-chip.logged-in span {
  color: #08745f;
}

.top-logout-button {
  min-height: 36px;
  padding: 8px 10px;
  color: #b42318;
  font-size: 13px;
  font-weight: 900;
  background: #fff7f5;
  border: 1px solid #ffd5cc;
  border-radius: 999px;
  cursor: pointer;
}

.top-logout-button:hover,
.top-logout-button:focus-visible {
  background: #ffece8;
  border-color: #ffb4a6;
}

.quiet-admin-link {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 38px;
  padding: 8px 13px;
  color: #7f8da3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(190, 213, 238, 0.92);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(32, 46, 72, 0.12);
  opacity: 0.68;
  transform: translateZ(0);
  will-change: transform;
}

.quiet-admin-link:hover,
.quiet-admin-link:focus-visible {
  color: #1f6fb8;
  background: #fff;
  border-color: #b9dcff;
  opacity: 1;
}

.hero,
.workflow,
.quality,
.templates,
.delivery,
.admin,
.home-section {
  padding: clamp(48px, 7vw, 88px) clamp(18px, 5vw, 72px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
  min-height: min(740px, calc(100vh - 76px));
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.home-main .hero {
  min-height: min(620px, calc(100vh - 76px));
  padding-top: clamp(26px, 4vw, 46px);
  padding-bottom: clamp(22px, 4vw, 42px);
}

.home-main .home-section {
  padding-top: clamp(14px, 2vw, 26px);
  padding-bottom: clamp(14px, 2vw, 26px);
}

.home-main .quick-section {
  padding-top: clamp(12px, 1.8vw, 22px);
  padding-bottom: clamp(8px, 1.4vw, 14px);
}

.home-main .home-delivery-section {
  padding-top: clamp(8px, 1.5vw, 16px);
}

.workflow {
  padding-top: clamp(18px, 2.4vw, 32px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.content-page {
  padding: clamp(14px, 2vw, 24px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 48px);
}

.content-hero,
.make-heading,
.delivery-hero,
.showcase-hero {
  max-width: 960px;
  margin-bottom: 12px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 248, 232, 0.64)),
    radial-gradient(circle at 96% 0%, rgba(189, 245, 238, 0.58), transparent 210px);
  border: 1px solid rgba(231, 220, 202, 0.58);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(72, 55, 36, 0.05);
}

.content-hero .page-title,
.make-heading .page-title,
.delivery-hero .page-title,
.showcase-hero .page-title {
  max-width: 900px;
  margin-bottom: 6px;
  font-size: clamp(24px, 3vw, 34px);
}

.content-hero .page-title:first-child,
.make-heading .page-title:first-child,
.delivery-hero .page-title:first-child,
.showcase-hero .page-title:first-child {
  margin-top: 0;
}

.content-hero p:not(.eyebrow),
.make-heading > span,
.delivery-hero p:not(.eyebrow),
.showcase-hero p:not(.eyebrow) {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.content-form,
.content-result {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.96)),
    #fff;
  border: 1px solid rgba(224, 214, 198, 0.82);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(72, 55, 36, 0.075);
}

.content-workbench {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.content-form {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
}

.content-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.content-scenario-picker {
  display: grid;
  gap: 9px;
}

.content-scenario-picker .card-title-line {
  align-items: center;
}

.content-scenario-picker .field.compact {
  gap: 6px;
}

.content-scenario-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  counter-reset: content-category;
}

.content-scenario-category {
  --category-color: var(--blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 10px;
  color: #17324e;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, color-mix(in srgb, var(--category-color) 10%, #fff), #fffdf7);
  border: 1px dashed color-mix(in srgb, var(--category-color) 32%, #d8e6ef);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(72, 55, 36, 0.042);
}

.content-scenario-category:nth-child(6n + 1) {
  --category-color: var(--blue);
}

.content-scenario-category:nth-child(6n + 2) {
  --category-color: var(--coral);
}

.content-scenario-category:nth-child(6n + 3) {
  --category-color: var(--orange);
}

.content-scenario-category:nth-child(6n + 4) {
  --category-color: var(--mint);
}

.content-scenario-category:nth-child(6n + 5) {
  --category-color: var(--violet);
}

.content-scenario-category:nth-child(6n + 6) {
  --category-color: var(--kid-lime);
}

.content-scenario-category-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-scenario-category-count {
  margin-left: auto;
  color: #607086;
  font-size: 11px;
}

.content-scenario-category:hover,
.content-scenario-category:focus-visible,
.content-scenario-category.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--category-color) 10%, #fff), #fff);
  border-color: color-mix(in srgb, var(--category-color) 34%, #cfe4f1);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--category-color) 9%, transparent);
}

.content-scenario-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: min(58vh, 640px);
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.content-scenario-chip {
  --chip-color: var(--blue);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  min-height: 56px;
  height: 56px;
  padding: 9px 11px 8px;
  overflow: hidden;
  color: #17324e;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--chip-color) 4%, #fffdf7)),
    #fff;
  border: 1px solid color-mix(in srgb, var(--chip-color) 22%, #dbe8f2);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(72, 55, 36, 0.05);
}

.content-scenario-chip::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--chip-color), color-mix(in srgb, var(--chip-color) 35%, #fff));
}

.content-scenario-chip:nth-child(6n + 1) {
  --chip-color: var(--blue);
}

.content-scenario-chip:nth-child(6n + 2) {
  --chip-color: var(--orange);
}

.content-scenario-chip:nth-child(6n + 3) {
  --chip-color: var(--mint);
}

.content-scenario-chip:nth-child(6n + 4) {
  --chip-color: var(--coral);
}

.content-scenario-chip:nth-child(6n + 5) {
  --chip-color: var(--violet);
}

.content-scenario-chip:nth-child(6n + 6) {
  --chip-color: var(--kid-lime);
}

.content-scenario-chip:hover,
.content-scenario-chip:focus-visible,
.content-scenario-chip.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chip-color) 6%, #fff), #fff 68%);
  border-color: color-mix(in srgb, var(--chip-color) 34%, #cfe4f1);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--chip-color) 8%, transparent),
    0 14px 28px color-mix(in srgb, var(--chip-color) 10%, transparent);
}

.content-scenario-chip strong,
.content-scenario-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-scenario-chip strong {
  color: #102033;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}

.content-scenario-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.content-scenario-hint,
.content-scenario-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.content-actions {
  display: grid;
  gap: 10px;
}

.content-actions .button {
  width: 100%;
}

.content-actions .button.primary {
  min-height: 50px;
  font-size: 16px;
}

.content-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.content-secondary-actions .button {
  min-height: 42px;
  box-shadow: 2px 2px 0 rgba(31, 36, 48, 0.12);
}

.content-result {
  min-height: 520px;
  padding: clamp(16px, 2vw, 22px);
}

.content-empty-state {
  display: grid;
  min-height: 460px;
  place-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
  background: #f7fbff;
  border: 1px dashed #bddaf6;
  border-radius: 8px;
}

.content-empty-state strong {
  color: var(--ink);
  font-size: 20px;
}

.content-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.content-result-head > div {
  min-width: 0;
}

.content-result-head span,
.content-result-head em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.content-result-head h2 {
  margin: 4px 0 0;
  font-size: clamp(26px, 3vw, 38px);
  overflow-wrap: anywhere;
}

.content-title-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.content-title-options span {
  max-width: 100%;
  padding: 7px 10px;
  color: #17324e;
  font-weight: 900;
  background: #eef6ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
  overflow-wrap: anywhere;
}

.content-title-options button,
.content-intro-box button,
.content-decorative-phrases button,
.content-slogan button {
  min-height: 30px;
  padding: 0 10px;
  color: #17324e;
  font-size: 13px;
  font-weight: 900;
  background: #fff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
  cursor: pointer;
}

.content-section-list {
  display: grid;
  gap: 12px;
}

.content-section-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #fffdf7;
  border: 1px solid #eadfca;
  border-radius: 8px;
}

.content-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-section-head span {
  color: #7a5b22;
  font-size: 13px;
  font-weight: 900;
}

.content-section-head button {
  min-height: 30px;
  padding: 0 10px;
  color: #17324e;
  font-size: 13px;
  font-weight: 900;
  background: #fff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
  cursor: pointer;
}

.content-section-card h3 {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.content-section-card p,
.content-intro-box p,
.content-decorative-phrases p,
.content-slogan p {
  margin: 0;
  line-height: 1.85;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.content-section-card small {
  color: #7a5b22;
  font-size: 13px;
  font-weight: 900;
}

.content-layout-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  color: #31516f;
  font-size: 13px;
  line-height: 1.6;
}

.content-layout-hint strong {
  padding: 2px 7px;
  color: #17324e;
  background: #eaf4ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.content-layout-hint span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.content-copy-lines {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #ffffff;
  border: 1px dashed #d8c294;
  border-radius: 8px;
}

.content-copy-lines strong {
  color: #17324e;
  font-size: 13px;
}

.content-copy-lines ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-copy-lines li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.content-copy-lines li span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #7a5b22;
  font-size: 12px;
  font-weight: 900;
  background: #fff7df;
  border: 1px solid #eadfca;
  border-radius: 999px;
}

.content-copy-lines li p {
  padding-bottom: 5px;
  border-bottom: 1px solid #e8eef5;
  line-height: 1.65;
}

.content-intro-box,
.content-layout-plan,
.content-decorative-phrases,
.content-slogan,
.content-tips {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  background: #f7fbff;
  border: 1px solid #d8e9fb;
  border-radius: 8px;
}

.content-intro-box > div,
.content-layout-plan > div,
.content-decorative-phrases > div,
.content-slogan > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-layout-plan {
  background: #fffdf7;
  border-color: #eadfca;
}

.content-layout-plan ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-layout-plan li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.content-layout-plan li span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #17324e;
  font-size: 13px;
  font-weight: 900;
  background: #eaf4ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.content-layout-plan li p {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.content-decorative-phrases p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-decorative-phrases span {
  padding: 6px 9px;
  color: #17324e;
  font-weight: 900;
  background: #fff;
  border: 1px solid #d8e9fb;
  border-radius: 8px;
}

.content-tips ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.home-main .section-heading {
  margin-bottom: 12px;
}

.home-main .eyebrow {
  margin-bottom: 5px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 7px;
  padding: 4px 9px;
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, #e7fff5, #edf8ff);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 999px;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
}

.page-main h1.page-title {
  max-width: 960px;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
}

.home-main h2 {
  font-size: clamp(24px, 2.8vw, 36px);
}

h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.lead {
  max-width: 680px;
  color: #4f5b6d;
  font-size: 16px;
  line-height: 1.65;
}

.hero-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.generate-actions {
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e1edf8;
}

.generate-submit-button {
  min-width: min(100%, 280px);
  min-height: 58px;
  font-size: 22px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  font-weight: 800;
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(47, 139, 216, 0.12);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.button:hover,
.style-card:hover,
.scenario-card:hover,
.quick-card:hover,
.template-card:hover {
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.68;
  cursor: wait;
  transform: none;
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: rgba(47, 139, 216, 0.26);
}

.generate-submit-button,
#contentGenerateButton {
  background: linear-gradient(135deg, #ff7a66, #ffad5c);
  border-color: rgba(255, 122, 102, 0.32);
  box-shadow: 0 14px 30px rgba(255, 122, 102, 0.18);
}

.button.ghost {
  color: #28506f;
  background: linear-gradient(135deg, #fff, #f6fbff);
  border-color: #dbe8f2;
  box-shadow: 0 8px 18px rgba(38, 57, 82, 0.06);
}

.button.small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  background: #fff;
}

.button.wide {
  width: 100%;
}

.hero-steps,
.quality-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-steps span,
.quality-points span {
  padding: 8px 12px;
  color: #2f4c67;
  font-size: 14px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #d7edf3;
  border-radius: 999px;
}

.hero-board {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: start;
  position: relative;
  width: min(100%, 420px);
  transform: translateX(-10px);
}

.hero-board::before {
  content: "";
  position: absolute;
  inset: 16px 8px -16px 18px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(59, 130, 246, 0.08));
  border-radius: 10px;
  filter: blur(1px);
  transform: rotate(-4.5deg);
  z-index: 0;
}

.hero-sample-image {
  position: relative;
  display: block;
  width: min(100%, 420px);
  height: auto;
  max-height: none;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(217, 225, 234, 0.95);
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(32, 46, 72, 0.16);
  transform: rotate(-2.8deg);
  transform-origin: center;
  z-index: 1;
}

.account-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}

.account-banner strong {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
}

.account-banner p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}

.quick-card {
  display: grid;
  gap: 10px;
  min-height: 118px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96)),
    #fff;
  border: 1px solid rgba(219, 232, 242, 0.86);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.home-main .quick-grid {
  gap: 8px;
}

.home-main .quick-card {
  gap: 6px;
  min-height: 84px;
  padding: 12px;
  box-shadow: 0 7px 16px rgba(32, 46, 72, 0.055);
}

.home-main .quick-card strong {
  font-size: 16px;
}

.home-main .quick-card span {
  font-size: 12px;
  line-height: 1.35;
}

.quick-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.quick-card span {
  color: #4f5b6d;
  font-size: 14px;
  line-height: 1.5;
}

.quick-card.yellow {
  background: linear-gradient(180deg, #fff6bf, #fff);
}

.quick-card.blue {
  background: linear-gradient(180deg, #dff1ff, #fff);
}

.quick-card.cyan {
  background: linear-gradient(180deg, #d8fbff, #fff);
}

.quick-card.green {
  background: linear-gradient(180deg, #def8e8, #fff);
}

.quick-card.pink {
  background: linear-gradient(180deg, #ffe0ea, #fff);
}

.quick-card.dark {
  color: #fff;
  background: #203a35;
}

.quick-card.dark span {
  color: rgba(255, 255, 255, 0.78);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 18px;
}

.make-heading,
.auth-page .section-heading,
.admin .section-heading {
  max-width: 980px;
}

.make-heading {
  margin-bottom: 12px;
}

.make-heading .eyebrow {
  margin-bottom: 7px;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.section-heading.compact {
  max-width: none;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.reference-grid figure {
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(32, 46, 72, 0.08);
}

.reference-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #eef2f7;
}

.reference-grid figcaption {
  min-height: 48px;
  margin-top: 10px;
  color: #4f5b6d;
  font-size: 14px;
  line-height: 1.5;
}

.maker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.workspace {
  align-items: start;
}

.maker-panel,
.admin-shell,
.delivery-grid article,
.template-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.96)),
    #fff;
  border: 1px solid rgba(224, 214, 198, 0.82);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(72, 55, 36, 0.075);
}

.maker-panel {
  min-height: auto;
  padding: clamp(16px, 2vw, 24px);
}

.step-panel {
  display: none;
}

.step-panel.active {
  display: block;
}

.muted {
  color: var(--muted);
  line-height: 1.7;
}

.panel-title-row,
.section-mini-title,
.card-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-title-row {
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.panel-title-row h3 {
  font-size: 22px;
}

.panel-title-row .muted {
  font-size: 15px;
}

.panel-title-row h3,
.panel-title-row p {
  margin-bottom: 0;
}

.section-mini-title {
  margin: 8px 0 6px;
  padding: 13px 16px;
  background:
    linear-gradient(90deg, rgba(240, 253, 250, 0.96), rgba(255, 248, 232, 0.9) 64%, rgba(255, 236, 226, 0.78)),
    #fff;
  border: 1px dashed rgba(32, 201, 170, 0.34);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(72, 55, 36, 0.045);
}

.section-mini-title strong {
  font-size: 18px;
}

.section-mini-title span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.insight-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  color: #385069;
  background: #eef6ff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}

.insight-card strong {
  color: var(--ink);
}

.final-plan-card {
  background: #f7fbff;
}

.confirm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.confirm-head > div:first-child {
  min-width: 0;
}

.confirm-summary {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 900;
  line-height: 1.45;
}

.confirm-recommendation {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  overflow: hidden;
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #ecfdf5;
  border: 1px solid #99f6e4;
  border-radius: 999px;
}

.confirm-ready {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  max-width: 360px;
  padding: 7px 9px;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #86efac;
  border-radius: 8px;
}

.confirm-ready.missing {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.confirm-ready b {
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
  background: #10b981;
  border-radius: 999px;
}

.confirm-ready.missing b {
  background: #f97316;
}

.confirm-ready span {
  font-size: 13px;
  font-weight: 950;
}

.confirm-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.confirm-plan-cards span {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  color: #385069;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  background: #fff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}

.confirm-plan-cards b {
  color: var(--ink);
  font-size: 13px;
}

.confirm-plan-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
  gap: 8px;
  align-items: stretch;
}

.confirm-body-preview {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #d7e4f1;
  border-radius: 8px;
}

.confirm-body-preview b {
  color: var(--ink);
}

.confirm-body-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  color: #385069;
  font-size: 13px;
  line-height: 1.45;
}

.confirm-body-list span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 5px 7px;
  background: #f8fbff;
  border: 1px solid #e4eef8;
  border-radius: 7px;
}

.confirm-body-list em {
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.45;
  white-space: nowrap;
}

.confirm-body-list i {
  color: #385069;
  font-style: normal;
  word-break: break-word;
}

.confirm-visual-preview {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  color: #385069;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  background: #fff;
  border: 1px solid #d7e4f1;
  border-radius: 8px;
}

.confirm-visual-preview b {
  color: var(--ink);
  font-size: 14px;
}

.confirm-plan-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.confirm-plan-reasons em {
  padding: 4px 7px;
  color: #096b43;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  background: #dcfce7;
  border: 1px solid #8ee0ac;
  border-radius: 999px;
}

.style-grid,
.delivery-grid,
.template-grid {
  display: grid;
  gap: 14px;
}

.style-card {
  text-align: left;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dbe8f2;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
}

.style-card small {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}

.form-message {
  min-height: 24px;
  margin: -4px 0 14px;
  color: #385069;
  font-size: 14px;
  font-weight: 800;
}

.form-message.error {
  color: #b42318;
}

.choice-builder {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #dbe8f2;
  border-radius: 16px;
}

.edit-details {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #dbe8f2;
  border-radius: 14px;
}

.edit-details summary {
  color: #2f4c67;
  font-weight: 900;
  cursor: pointer;
}

.edit-details .field {
  margin-top: 14px;
}

.choice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.choice-head h3 {
  margin-bottom: 6px;
}

.choice-head p {
  margin-bottom: 0;
}

.choice-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #096b43;
  font-size: 13px;
  font-weight: 900;
  background: #dcfce7;
  border: 1px solid #8ee0ac;
  border-radius: 999px;
}

  .preset-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  .preset-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 68px;
    padding: 10px;
    text-align: left;
    background: #f7fbff;
    border: 2px solid #d9e8f7;
    border-radius: 8px;
    cursor: pointer;
  }

  .preset-card strong,
  .preset-card span {
    display: block;
  }

  .preset-card strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
  }

  .preset-card span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .preset-card.active {
    background: #eaf4ff;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(42, 123, 255, 0.13);
  }

  .choice-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }

  .choice-tier {
    margin-top: 14px;
  }

  .choice-tier > strong {
    display: block;
    color: var(--text);
    font-size: 16px;
  }

  .detail-grid {
    padding-top: 4px;
  }

.choice-group {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.choice-group strong {
  color: #1f2937;
  font-size: 17px;
}

.choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-group button {
  min-height: 32px;
  padding: 0 10px;
  color: #385069;
  font-size: 13px;
  font-weight: 800;
  background: #f5f8fb;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
  cursor: pointer;
}

.choice-group button:first-of-type {
  margin-left: 0;
}

  .choice-group button.active {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
  }

  @media (max-width: 780px) {
  .preset-strip {
    grid-template-columns: 1fr;
  }

    .choice-head,
    .choice-group {
      grid-template-columns: 1fr;
      align-items: flex-start;
    }

    .choice-head {
      flex-direction: column;
    }

    .choice-head > span {
      width: fit-content;
    }
  }

.field {
  display: grid;
  gap: 8px;
}

.field span {
  font-weight: 800;
}

.field small {
  color: var(--muted);
  line-height: 1.5;
}

.body-field {
  margin-top: 18px;
}

textarea,
select,
input {
  width: 100%;
  padding: 13px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d2e3ef;
  border-radius: 12px;
  outline: none;
}

textarea:focus,
select:focus,
input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 134, 215, 0.12);
}

.scenario-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.scenario-tools {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  counter-reset: scenario-tab;
}

.scenario-tabs button {
  --tab-color: var(--blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 11px 5px 7px;
  color: #17324e;
  font-weight: 900;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tab-color) 9%, #fff), #fffdf7);
  border: 1px dashed color-mix(in srgb, var(--tab-color) 32%, #d8e6ef);
  border-radius: 17px;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(72, 55, 36, 0.045);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.scenario-tabs button:nth-child(6n + 1) {
  --tab-color: var(--blue);
}

.scenario-tabs button:nth-child(6n + 2) {
  --tab-color: var(--coral);
}

.scenario-tabs button:nth-child(6n + 3) {
  --tab-color: var(--orange);
}

.scenario-tabs button:nth-child(6n + 4) {
  --tab-color: var(--mint);
}

.scenario-tabs button:nth-child(6n + 5) {
  --tab-color: var(--violet);
}

.scenario-tabs button:nth-child(6n + 6) {
  --tab-color: var(--kid-lime);
}

.scenario-tabs button.active {
  color: #12304b;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tab-color) 17%, #fff), #fff);
  border-color: color-mix(in srgb, var(--tab-color) 34%, #cfe4f1);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tab-color) 8%, transparent),
    0 12px 24px color-mix(in srgb, var(--tab-color) 11%, transparent);
}

.scenario-tab-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  background: var(--tab-color);
  border-radius: 10px;
  box-shadow: 0 6px 12px color-mix(in srgb, var(--tab-color) 18%, transparent);
}

.scenario-tab-label {
  white-space: nowrap;
}

.scenario-tab-count {
  min-width: 22px;
  padding: 2px 6px;
  color: #607086;
  font-size: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--tab-color) 20%, #edf4f8);
  border-radius: 999px;
}

.scenario-category-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background:
    linear-gradient(90deg, rgba(240, 253, 250, 0.94), rgba(255, 248, 232, 0.9) 58%, rgba(255, 236, 226, 0.72)),
    #fff;
  border: 1px solid rgba(224, 214, 198, 0.76);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(72, 55, 36, 0.04);
}

.scenario-category-guide strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.scenario-category-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.scenario-category-guide em {
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.scenario-guide-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scenario-guide-examples span {
  padding: 4px 7px;
  color: #17324e;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.88);
  border: 1px dashed rgba(190, 213, 238, 0.9);
  border-radius: 999px;
}

.scenario-card {
  --card-color: var(--blue);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-height: 86px;
  padding: 12px 12px 11px;
  overflow: hidden;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.96)),
    #fff;
  border: 1px solid color-mix(in srgb, var(--card-color) 22%, #dbe8f2);
  border-radius: 15px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(72, 55, 36, 0.052);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.scenario-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--card-color), color-mix(in srgb, var(--card-color) 32%, #fff));
  border: 0;
  border-radius: 0;
  transform: none;
  z-index: 0;
}

.scenario-card:nth-child(6n + 1) {
  --card-color: var(--blue);
}

.scenario-card:nth-child(6n + 2) {
  --card-color: var(--orange);
}

.scenario-card:nth-child(6n + 3) {
  --card-color: var(--mint);
}

.scenario-card:nth-child(6n + 4) {
  --card-color: var(--coral);
}

.scenario-card:nth-child(6n + 5) {
  --card-color: var(--violet);
}

.scenario-card:nth-child(6n + 6) {
  --card-color: var(--kid-lime);
}

.scenario-card strong {
  color: #102033;
  font-size: 16px;
  line-height: 1.25;
}

.scenario-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.scenario-card-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 2px;
  overflow: hidden;
}

.scenario-card b,
.scenario-card i {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
}

.scenario-card b {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--card-color) 46%, #1f2937);
  background: color-mix(in srgb, var(--card-color) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--card-color) 22%, #edf4f8);
}

.scenario-card i {
  flex: 1 1 auto;
  min-width: 0;
  color: #607086;
  font-style: normal;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #edf2f7;
}

.scenario-card.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-color) 5%, #fff), #fff 62%);
  border-color: color-mix(in srgb, var(--card-color) 34%, #cfe4f1);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--card-color) 8%, transparent),
    0 14px 28px rgba(38, 57, 82, 0.08);
}

.scenario-selected-summary {
  margin: -8px 0 16px;
}

.scenario-selected-summary:empty {
  display: none;
}

.scenario-selected-summary {
  padding: 12px 14px;
  background: #fffdf2;
  border: 1px solid #f0d56b;
  border-radius: 8px;
}

.selected-summary-compact {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(220px, 0.58fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: center;
}

.selected-summary-compact strong,
.selected-summary-compact small {
  display: block;
}

.selected-summary-compact small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.selected-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.selected-summary-tags span {
  padding: 5px 8px;
  color: #385069;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  border: 1px solid #f0d56b;
  border-radius: 999px;
}

.scenario-selected-summary ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 0;
  padding-left: 20px;
  color: #34465b;
  font-size: 13px;
  line-height: 1.45;
}

.empty-scenario {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--muted);
  background: #f8fbff;
  border: 1px dashed #cfe4fb;
  border-radius: 8px;
}

.fix-buttons button {
  padding: 8px 12px;
  color: #385069;
  background: #eef6ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
  cursor: pointer;
}

.effect-summary-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 14px;
  background: #fffdf2;
  border: 2px solid #f0d56b;
  border-radius: 8px;
}

.effect-summary-card-compact {
  margin-bottom: 12px;
  padding: 12px;
  background: #f8fbff;
  border-color: #cfe4fb;
}

.effect-summary-card span,
.effect-summary-card p,
.effect-summary-card em {
  color: #5f6f84;
}

.effect-summary-card span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 900;
}

.effect-summary-card strong {
  display: block;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

.effect-summary-card p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.effect-summary-status {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 8px;
  color: #047857;
  font-size: 12px;
  font-weight: 950;
  background: #dcfce7;
  border: 1px solid #8ee0ac;
  border-radius: 999px;
}

.effect-summary-status.missing {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.effect-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.effect-plan-list li {
  padding: 7px 8px;
  color: #385069;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: #fff;
  border: 1px solid #d7e4f1;
  border-radius: 8px;
}

.effect-summary-card em {
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  background: #fff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.effect-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 8px;
}

.effect-section-head strong,
.effect-section-head span {
  display: block;
}

.effect-section-head strong {
  font-size: 20px;
}

.effect-section-head span,
.effect-section-head em {
  color: var(--muted);
  font-size: 13px;
}

.effect-section-head em {
  flex: 0 0 auto;
  padding: 5px 9px;
  font-style: normal;
  font-weight: 900;
  background: #eef6ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.style-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.generation-progress {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  background: #f7fbff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}

.generation-progress-head,
.generation-progress-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.generation-progress-head strong {
  font-size: 18px;
}

.generation-progress-head span {
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.generation-bar {
  height: 14px;
  overflow: hidden;
  background: #e6eef8;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.generation-bar span {
  display: block;
  width: 0;
  height: 100%;
  background:
    linear-gradient(90deg, var(--blue), var(--green)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.28) 0 8px, transparent 8px 16px);
  border-radius: inherit;
  transition: width 0.45s ease;
}

.generation-progress-foot span {
  color: #385069;
  font-weight: 900;
}

.generation-progress-foot em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.generation-progress.done {
  background: #effcf4;
  border-color: #8ee0ac;
}

.generation-progress.error {
  background: #fff4f3;
  border-color: #f5b8b3;
}

.generation-progress.error .generation-progress-head span {
  color: #b42318;
}

.style-card {
  position: relative;
  min-height: 216px;
  padding: 14px;
}

.style-card.selected {
  border-color: rgba(47, 139, 216, 0.42);
  box-shadow:
    0 0 0 4px rgba(47, 139, 216, 0.08),
    var(--card-shadow);
}

.style-recommend {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  background: var(--green);
  border-radius: 999px;
}

.style-preview {
  position: relative;
  display: block;
  height: 104px;
  margin-bottom: 10px;
  border: 1px solid #dbe8f2;
  border-radius: 14px;
  background-color: #fffdf7;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.62), 0 8px 18px rgba(38,57,82,0.06);
  overflow: hidden;
}

.style-preview-asset {
  background: #fff;
}

.style-preview-asset::before,
.style-preview-asset::after {
  display: none;
}

.style-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-preview::before,
.style-preview::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.style-preview::before {
  top: 12px;
  left: 50%;
  width: 38%;
  height: 13px;
  background: var(--ink);
  border-radius: 999px;
  transform: translateX(-50%);
}

.style-preview::after {
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 3px;
  background:
    linear-gradient(var(--ink) 0 0) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 10px / 100% 3px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 20px / 100% 3px no-repeat;
  opacity: 0.7;
}

.style-card strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}

.style-card b {
  display: block;
  margin-top: 7px;
  color: #385069;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.effect-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.effect-choice-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fcfb;
  border: 1px solid #dbe8f2;
  border-radius: 16px;
}

.effect-choice-group > div:first-child strong,
.effect-choice-group > div:first-child span {
  display: block;
}

.effect-choice-group > div:first-child strong {
  font-size: 20px;
}

.effect-choice-group > div:first-child span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.effect-choice-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.effect-choice-buttons button {
  min-height: 82px;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 2px solid #d8e8f8;
  border-radius: 8px;
  cursor: pointer;
}

.effect-choice-buttons button.active {
  background: #e9f4ff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 134, 215, 0.12);
}

.effect-choice-buttons strong,
.effect-choice-buttons span {
  display: block;
}

.effect-choice-buttons strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.effect-choice-buttons span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.effect-native-fields {
  display: none;
}

.style-preview.marker {
  background:
    linear-gradient(var(--ink) 0 0) 10% 44% / 35% 4px,
    linear-gradient(var(--ink) 0 0) 55% 44% / 35% 4px,
    linear-gradient(var(--ink) 0 0) 10% 57% / 35% 4px,
    linear-gradient(var(--ink) 0 0) 55% 57% / 35% 4px,
    linear-gradient(#ffde59 0 0) 6% 12% / 16% 18px,
    radial-gradient(circle at 17% 22%, #ff7d4c 0 8px, transparent 9px),
    radial-gradient(circle at 82% 18%, #5bd0ff 0 14px, transparent 15px),
    radial-gradient(circle at 89% 66%, #58c96f 0 13px, transparent 14px),
    linear-gradient(135deg, transparent 0 61%, #ff9f68 62% 75%, transparent 76%),
    linear-gradient(90deg, transparent 49%, #9ac7ff 50% 51%, transparent 52%),
    #fffdf7;
}

.style-preview.marker::before {
  width: 46%;
  background: linear-gradient(90deg, #ef4444 0 30%, #1f8a42 31% 65%, #2586d7 66%);
}

.style-preview.red {
  background:
    linear-gradient(#111827 0 0) 9% 43% / 82% 6px,
    linear-gradient(#111827 0 0) 9% 57% / 74% 6px,
    linear-gradient(#111827 0 0) 11% 73% / 32% 5px,
    linear-gradient(#111827 0 0) 57% 73% / 32% 5px,
    radial-gradient(circle at 16% 22%, #ffde59 0 13px, transparent 14px),
    radial-gradient(circle at 84% 20%, #ef4444 0 13px, transparent 14px),
    linear-gradient(90deg, transparent 0 20%, #dc2626 21% 27%, transparent 28%),
    linear-gradient(135deg, transparent 0 58%, #fee2e2 59%),
    #fffdf7;
}

.style-preview.red::before {
  width: 44%;
  background: #dc2626;
  box-shadow: 4px 4px 0 #fbbf24;
}

.style-preview.sticker {
  background:
    linear-gradient(#1f2430 0 0) 13% 51% / 30% 4px,
    linear-gradient(#1f2430 0 0) 58% 51% / 30% 4px,
    linear-gradient(#1f2430 0 0) 13% 65% / 30% 4px,
    linear-gradient(#1f2430 0 0) 58% 65% / 30% 4px,
    linear-gradient(#fff 0 0) 9% 39% / 36% 43%,
    linear-gradient(#fff 0 0) 54% 39% / 36% 43%,
    radial-gradient(circle at 18% 22%, #f06292 0 13px, transparent 14px),
    radial-gradient(circle at 82% 23%, #60a5fa 0 12px, transparent 13px),
    radial-gradient(circle at 45% 24%, #ffd166 0 8px, transparent 9px),
    linear-gradient(90deg, transparent 0 58%, #ffe66d 59%),
    #fffdf7;
}

.style-preview.sticker::before {
  width: 50%;
  background: #f06292;
  box-shadow: 0 0 0 4px #fff, 5px 5px 0 #ffd166;
}

.style-preview.sticker::after {
  left: 11%;
  right: 11%;
}

.style-preview.ink {
  background:
    linear-gradient(#1f2430 0 0) 15% 58% / 30% 3px,
    linear-gradient(#1f2430 0 0) 58% 58% / 28% 3px,
    linear-gradient(#1f2430 0 0) 15% 70% / 30% 3px,
    linear-gradient(#1f2430 0 0) 58% 70% / 28% 3px,
    linear-gradient(90deg, transparent 0 17%, #17884f 18% 23%, transparent 24%),
    radial-gradient(ellipse at 70% 76%, #222 0 15px, transparent 16px),
    radial-gradient(ellipse at 64% 24%, rgba(23,136,79,0.22) 0 39px, transparent 40px),
    radial-gradient(ellipse at 30% 32%, rgba(37,134,215,0.18) 0 38px, transparent 39px),
    linear-gradient(135deg, transparent 0 68%, rgba(23,136,79,0.16) 69%),
    #fff;
}

.style-preview.ink::before {
  width: 42%;
  background: #17884f;
  border-radius: 4px 18px 4px 18px;
}

.style-preview.chalk {
  background:
    linear-gradient(rgba(255,255,255,0.62) 0 0) 12% 33% / 76% 4px,
    linear-gradient(rgba(255,255,255,0.48) 0 0) 13% 64% / 32% 3px,
    linear-gradient(rgba(255,255,255,0.48) 0 0) 58% 64% / 32% 3px,
    linear-gradient(rgba(255,255,255,0.3) 0 0) 13% 77% / 32% 3px,
    linear-gradient(rgba(255,255,255,0.3) 0 0) 58% 77% / 32% 3px,
    radial-gradient(circle at 18% 22%, #facc15 0 8px, transparent 9px),
    radial-gradient(circle at 83% 23%, #60a5fa 0 8px, transparent 9px),
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
    #203a35;
  background-size: 18px 18px;
}

.style-preview.chalk::before {
  width: 50%;
  background: rgba(255,255,255,0.86);
}

.style-preview.chalk::after {
  background:
    linear-gradient(rgba(255,255,255,0.52) 0 0) 0 0 / 100% 3px no-repeat,
    linear-gradient(rgba(255,255,255,0.38) 0 0) 0 10px / 100% 3px no-repeat,
    linear-gradient(rgba(255,255,255,0.28) 0 0) 0 20px / 100% 3px no-repeat;
}

.style-preview.cartoon {
  background:
    radial-gradient(circle at 21% 22%, #ffde59 0 13px, transparent 14px),
    radial-gradient(circle at 78% 22%, #ff8ac7 0 13px, transparent 14px),
    radial-gradient(circle at 49% 30%, #7dd3fc 0 10px, transparent 11px),
    radial-gradient(circle at 14% 70%, #34d399 0 13px, transparent 14px),
    linear-gradient(#1f2430 0 0) 12% 60% / 28% 3px,
    linear-gradient(#1f2430 0 0) 60% 60% / 28% 3px,
    linear-gradient(#1f2430 0 0) 12% 73% / 28% 3px,
    linear-gradient(#1f2430 0 0) 60% 73% / 28% 3px,
    linear-gradient(135deg, transparent 0 60%, #ffd166 61%),
    #fffdf7;
}

.style-preview.cartoon::before {
  width: 45%;
  background: #ff8ac7;
  box-shadow: 0 0 0 4px #fff, 5px 5px 0 #7dd3fc;
}

.style-preview.marker,
.style-preview.red,
.style-preview.sticker,
.style-preview.ink,
.style-preview.chalk,
.style-preview.cartoon {
  background-repeat: no-repeat;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.result-head,
.admin-top,
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  font-weight: 800;
  border-radius: 999px;
}

.status-pill {
  color: #9f4d00;
  background: #fff1d6;
}

.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.48fr);
  gap: 22px;
  margin-top: 24px;
}

.preview-card,
.order-card {
  position: relative;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.preview-paper {
  position: relative;
  aspect-ratio: 4 / 5.3;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.7) 0 45%, rgba(255,255,255,0.2) 46%),
    #fffdf5;
  border: 3px solid var(--ink);
}

.generated-preview {
  display: block;
  width: auto;
  max-width: min(100%, 760px);
  height: auto;
  max-height: min(58vh, 520px);
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dbe8f2;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
}

.preview-title {
  color: #111;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 900;
  text-align: center;
  text-shadow: 4px 4px 0 #32b36f;
}

.preview-box {
  width: 72%;
  margin: 42px auto 0;
  padding: 28px;
  color: #111;
  font-size: 25px;
  font-weight: 900;
  line-height: 2;
  text-align: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px 8px;
  filter: blur(1px);
}

.preview-deco {
  position: absolute;
  border: 3px solid var(--ink);
}

.deco-a {
  left: 28px;
  bottom: 70px;
  width: 90px;
  height: 72px;
  background: var(--yellow);
  transform: rotate(-12deg);
}

.deco-b {
  right: 24px;
  bottom: 42px;
  width: 110px;
  height: 72px;
  background: var(--cyan);
  border-radius: 60px 60px 0 0;
}

.preview-kind-label {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: rgba(31, 36, 48, 0.82);
  border-radius: 8px;
}

.delivery-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  background: #f8fbff;
  border-color: #cfe4fb;
}

.delivery-head span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.delivery-head h4 {
  margin: 4px 0 6px;
  font-size: 22px;
  line-height: 1.25;
}

.delivery-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.delivery-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #fff;
  border: 2px solid #cfe4fb;
  border-radius: 8px;
}

.delivery-status strong,
.delivery-status span {
  display: block;
}

.delivery-status strong {
  font-size: 17px;
}

.delivery-status span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.delivery-status em {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #9f4d00;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  background: #fff1d6;
  border-radius: 999px;
}

.delivery-status.paid {
  background: #f0fff6;
  border-color: #8ee0ac;
}

.delivery-status.paid em {
  color: #096b43;
  background: #dcfce7;
}

.delivery-package {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.delivery-package div {
  min-height: 74px;
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.delivery-package strong,
.delivery-package span {
  display: block;
}

.delivery-package strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.delivery-package span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.delivery-process span {
  min-height: 34px;
  padding: 8px 6px;
  color: #415873;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.delivery-process span.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.price-row {
  padding: 16px 0;
  margin: 8px 0 18px;
  border-top: 1px solid var(--line);
}

.delivery-price {
  padding: 12px;
  margin: 0;
  background: #fffdf2;
  border: 2px solid #f0d56b;
  border-radius: 8px;
}

.price-row span {
  color: #4d5f75;
  font-size: 13px;
  font-weight: 800;
}

.price-row strong {
  font-size: 30px;
}

.delivery-price strong {
  color: #cf2e1d;
  font-size: 28px;
}

.delivery-account {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: #f4f9ff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}

.delivery-account strong {
  color: var(--ink);
  font-size: 15px;
}

.delivery-account span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.delivery-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.download-list {
  display: grid;
  gap: 10px;
}

.download-link {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 8px 10px;
  color: #096b43;
  font-weight: 900;
  text-decoration: none;
  background: #dcfce7;
  border: 1px solid #8ee0ac;
  border-radius: 8px;
  cursor: pointer;
}

.download-link strong {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-size: 13px;
  background: var(--green);
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 12px;
}

.download-link span {
  line-height: 1.35;
}

.delivery-page {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2vw, 24px) clamp(18px, 5vw, 72px) 38px;
}

.delivery-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.delivery-hero .page-title {
  line-height: 1.08;
}

.delivery-hero p:not(.eyebrow) {
  margin: 0;
}

.delivery-hero-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  max-width: 430px;
}

.delivery-refresh-note {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  color: #0f558d;
  font-size: 13px;
  font-weight: 900;
  background: #e8f4ff;
  border: 1px solid #b9dcff;
  border-radius: 999px;
}

.delivery-current-card {
  padding: 0;
  background: transparent;
}

.delivery-empty-state {
  display: grid;
  gap: 10px;
  padding: 24px;
  color: #40536b;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.delivery-empty-state strong {
  color: var(--ink);
  font-size: 22px;
}

.delivery-empty-state span {
  color: var(--muted);
  line-height: 1.6;
}

.delivery-empty-state.error {
  border-color: #f3b6b6;
  background: #fff8f7;
}

.delivery-empty-state.warning {
  border-color: #f2d7a8;
  background: #fffaf0;
}

.delivery-history-section {
  display: grid;
  gap: 14px;
}

.delivery-history-section[hidden] {
  display: none;
}

.delivery-history-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.delivery-history-summary[hidden] {
  display: none;
}

.delivery-history-stat {
  --stat-color: var(--blue);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 3px;
  padding: 14px 14px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dbe8f2;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(38, 57, 82, 0.04);
}

.delivery-history-stat::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--stat-color), color-mix(in srgb, var(--stat-color) 34%, #fff));
}

.delivery-history-stat:nth-child(5n + 1) {
  --stat-color: var(--blue);
}

.delivery-history-stat:nth-child(5n + 2) {
  --stat-color: var(--orange);
}

.delivery-history-stat:nth-child(5n + 3) {
  --stat-color: var(--mint);
}

.delivery-history-stat:nth-child(5n + 4) {
  --stat-color: var(--violet);
}

.delivery-history-stat:nth-child(5n + 5) {
  --stat-color: var(--coral);
}

.delivery-history-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.delivery-history-stat strong {
  color: color-mix(in srgb, var(--stat-color) 44%, var(--ink));
  font-size: 24px;
  line-height: 1.1;
}

.delivery-history-stat small {
  color: #60738a;
  font-size: 12px;
  font-weight: 800;
}

.delivery-history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.delivery-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(32, 46, 72, 0.06);
}

.delivery-pagination[hidden] {
  display: none;
}

.delivery-pagination-status {
  display: grid;
  gap: 3px;
}

.delivery-pagination-status strong {
  color: var(--ink);
  font-size: 16px;
}

.delivery-pagination-status span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.delivery-pagination-actions {
  display: flex;
  gap: 10px;
}

.delivery-pagination button {
  min-height: 40px;
  padding: 0 18px;
  color: var(--ink);
  font-weight: 900;
  background: #f8fbff;
  border: 1px solid #b9dcff;
  border-radius: 999px;
}

.delivery-pagination button:not(:disabled) {
  cursor: pointer;
}

.delivery-pagination button:disabled {
  color: #9aa8b9;
  cursor: not-allowed;
  background: #f3f6fa;
  border-color: #d8e0ea;
}

.delivery-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(32, 46, 72, 0.08);
}

.delivery-record-card.current {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  border-color: #b9dcff;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.delivery-record-card:not(.current) {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(32, 46, 72, 0.06);
}

.delivery-record-card.ready:not(.current),
.delivery-record-card.queued:not(.current),
.delivery-record-card.generating:not(.current) {
  border-color: #a9d8ff;
  background: #fbfdff;
}

.delivery-record-card.failed:not(.current) {
  border-color: #f2c7c3;
  background: #fffafa;
}

.delivery-record-card.refunded:not(.current),
.delivery-record-card.compensated:not(.current) {
  border-color: #f2d7a8;
  background: #fffaf0;
}

.delivery-record-preview {
  display: grid;
  place-items: center;
  min-height: 240px;
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.delivery-preview-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  padding: 10px;
}

.delivery-preview-pair.color-only {
  grid-template-columns: minmax(0, 1fr);
}

.delivery-preview-pair figure {
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.delivery-preview-pair figcaption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.delivery-preview-missing {
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  min-height: 200px;
  padding: 18px;
  color: #385069;
  text-align: center;
  background: #f7fbff;
  border: 1px dashed #b9d6ef;
  border-radius: 8px;
}

.delivery-preview-missing strong,
.delivery-preview-missing span {
  display: block;
}

.delivery-preview-missing strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.delivery-preview-missing span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.delivery-preview-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

.delivery-record-card.current .delivery-preview-pair .delivery-preview-image {
  max-width: 100%;
  max-height: min(60vh, 520px);
}

.delivery-record-card:not(.current) .delivery-preview-image {
  max-height: min(52vh, 420px);
}

@media (max-width: 760px) {
  .delivery-preview-pair {
    grid-template-columns: 1fr;
  }
}

.delivery-record-card:not(.current) .delivery-record-preview,
.delivery-record-card:not(.current) .delivery-preview-placeholder {
  min-height: 240px;
}

.delivery-preview-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  transform: none;
}

.delivery-record-body {
  display: grid;
  align-content: start;
  gap: 12px;
}

.delivery-record-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.delivery-record-head span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.delivery-record-head h3 {
  margin: 6px 0;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.2;
}

.delivery-record-card:not(.current) .delivery-record-head h3 {
  font-size: clamp(18px, 1.8vw, 24px);
}

.delivery-record-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.delivery-record-head time {
  display: block;
  margin-top: 6px;
  color: #7b8ca0;
  font-size: 12px;
  font-weight: 800;
}

.delivery-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.delivery-record-meta small {
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  color: #31516f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f1f8ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
}

.delivery-record-head em {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #9f4d00;
  font-style: normal;
  font-weight: 900;
  background: #fff1d6;
  border-radius: 999px;
}

.delivery-record-head em.paid,
.delivery-record-head em.download-pending {
  color: #096b43;
  background: #dcfce7;
}

.delivery-record-head em.queued,
.delivery-record-head em.generating,
.delivery-record-head em.ready {
  color: #0f558d;
  background: #e8f4ff;
}

.delivery-record-head em.failed {
  color: #b42318;
  background: #fee4e2;
}

.delivery-record-head em.refunded,
.delivery-record-head em.compensated {
  color: #9a5b00;
  background: #fff3cd;
}

.delivery-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.delivery-progress span {
  min-height: 34px;
  padding: 8px 6px;
  overflow: hidden;
  color: #52677f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f8fbff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.delivery-progress span.done {
  color: #096b43;
  background: #dcfce7;
  border-color: #8ee0ac;
}

.delivery-progress span.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.delivery-progress span.failed {
  background: #b42318;
  border-color: #b42318;
}

.delivery-record-files {
  display: grid;
  gap: 10px;
}

.delivery-record-card:not(.current) .delivery-file-empty {
  padding: 10px 12px;
  font-size: 13px;
}

.delivery-record-card:not(.current) .download-link {
  min-height: 42px;
  padding: 6px 8px;
}

.delivery-record-card:not(.current) .download-link strong {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.download-link span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.download-link b {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.download-link small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-link.disabled {
  color: #7b8796;
  cursor: not-allowed;
  background: #f4f7fb;
  border-color: #d8e1ec;
}

.download-link.disabled strong {
  color: #6f7f92;
  background: #e7edf5;
  border-color: #d5deea;
}

.delivery-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.delivery-record-actions .button {
  min-height: 44px;
}

.delivery-file-empty {
  padding: 14px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
  background: #f8fbff;
  border: 1px dashed #b9dcff;
  border-radius: 8px;
}

.delivery-file-empty.queued,
.delivery-file-empty.generating {
  color: #0f558d;
  background: #f1f8ff;
  border-color: #9fd0ff;
}

.delivery-file-empty.download-pending {
  color: #096b43;
  background: #f0fdf4;
  border-color: #8ee0ac;
}

.delivery-file-empty.ready {
  color: #096b43;
  background: #f0fdf4;
  border-color: #86efac;
}

.delivery-file-empty.failed {
  color: #b42318;
  background: #fff8f7;
  border-color: #f3b6b6;
}

.delivery-file-empty.refunded,
.delivery-file-empty.compensated {
  color: #8a5600;
  background: #fff8e7;
  border-color: #efcf88;
}

.queue-placeholder {
  display: grid;
  place-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 34px;
  color: #0f558d;
  text-align: center;
  background: linear-gradient(180deg, #f7fbff, #eef7ff);
  border: 1px dashed #9fd0ff;
  border-radius: 8px;
}

.queue-placeholder strong {
  color: var(--ink);
  font-size: clamp(46px, 5.6vw, 72px);
  line-height: 1.12;
}

.queue-placeholder span {
  color: var(--muted);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.55;
}

.queue-placeholder.failed {
  color: #b42318;
  background: #fff8f7;
  border-color: #f3b6b6;
}

.delivery-page-message {
  padding: 12px 14px;
  color: #0f558d;
  font-weight: 900;
  background: #e8f4ff;
  border: 1px solid #b9dcff;
  border-radius: 8px;
}

.delivery-page-message.success {
  color: #096b43;
  background: #dcfce7;
  border-color: #86efac;
}

.delivery-page-message.error {
  color: #b42318;
  background: #fff8f7;
  border-color: #f3b6b6;
}

.showcase-page {
  display: grid;
  gap: 12px;
  padding: clamp(12px, 1.8vw, 22px) clamp(18px, 5vw, 72px) 38px;
}

.showcase-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.showcase-hero .page-title {
  line-height: 1.08;
}

.showcase-hero p:not(.eyebrow) {
  margin: 0;
}

.showcase-message {
  padding: 12px 14px;
  color: #0f558d;
  font-weight: 900;
  background: #e8f4ff;
  border: 1px solid #b9dcff;
  border-radius: 8px;
}

.showcase-message[hidden] {
  display: none;
}

.showcase-message.success {
  color: #096b43;
  background: #dcfce7;
  border-color: #86efac;
}

.showcase-message.error {
  color: #b42318;
  background: #fff8f7;
  border-color: #f3b6b6;
}

.showcase-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(32, 46, 72, 0.06);
}

.showcase-toolbar label,
.showcase-toolbar > div:not(.showcase-categories) {
  display: grid;
  gap: 8px;
}

.showcase-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.showcase-toolbar input {
  flex: 0 0 320px;
  min-height: 44px;
  padding: 0 13px;
  color: var(--ink);
  background: #f8fbff;
  border: 1px solid #cfe1f2;
  border-radius: 8px;
  outline: none;
}

.showcase-toolbar input:focus {
  border-color: #74b9f2;
  box-shadow: 0 0 0 3px rgba(37, 134, 215, 0.12);
}

.showcase-categories {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.showcase-categories button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  color: #40536b;
  font-size: 13px;
  font-weight: 900;
  background: #f8fbff;
  border: 1px solid #cfe1f2;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.showcase-categories button.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.showcase-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(32, 46, 72, 0.06);
}

.showcase-pagination[hidden] {
  display: none;
}

.showcase-pagination-status {
  display: grid;
  gap: 3px;
}

.showcase-pagination-status strong {
  color: var(--ink);
  font-size: 14px;
}

.showcase-pagination-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.showcase-pagination-actions {
  display: flex;
  gap: 8px;
}

.showcase-pagination button {
  min-height: 36px;
  padding: 0 13px;
  color: #27415f;
  font-weight: 900;
  background: #f8fbff;
  border: 1px solid #cfe1f2;
  border-radius: 8px;
  cursor: pointer;
}

.showcase-pagination button:not(:disabled) {
  background: #eaf5ff;
}

.showcase-pagination button:disabled {
  color: #9aaabc;
  cursor: not-allowed;
}

.showcase-card {
  display: grid;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(32, 46, 72, 0.08);
}

.showcase-card.highlight {
  border-color: #2f8fe8;
  box-shadow: 0 0 0 3px rgba(47, 143, 232, 0.18), 0 18px 42px rgba(32, 46, 72, 0.12);
}

.showcase-card-preview {
  position: relative;
  display: grid;
  min-height: 300px;
  background: #f8fbff;
  border-bottom: 1px solid #d8e8f8;
}

.showcase-preview-protect {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 9px;
  color: #123458;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cfe1f2;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(18, 52, 88, 0.1);
}

.showcase-preview-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.showcase-preview-pair.color-only {
  grid-template-columns: minmax(0, 1fr);
}

.showcase-preview-pair figure {
  display: grid;
  gap: 7px;
  align-content: start;
  justify-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.showcase-preview-pair figcaption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.showcase-preview-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 260px;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

.showcase-preview-placeholder,
.showcase-empty {
  display: grid;
  place-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 26px;
  color: #40536b;
  text-align: center;
  background: #fff;
  border: 1px dashed #b9dcff;
  border-radius: 8px;
}

.showcase-empty {
  grid-column: 1 / -1;
  border-style: solid;
}

.showcase-empty.error {
  color: #b42318;
  background: #fff8f7;
  border-color: #f3b6b6;
}

.showcase-preview-placeholder strong,
.showcase-empty strong {
  color: var(--ink);
  font-size: 22px;
}

.showcase-preview-placeholder span,
.showcase-empty span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.showcase-card-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.showcase-card-head {
  display: grid;
  gap: 5px;
}

.showcase-card-head span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.showcase-card-head strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.showcase-card-head small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.showcase-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.showcase-card-stats span {
  color: #096b43;
  font-size: 20px;
  font-weight: 900;
}

.showcase-card-stats em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.fix-panel {
  padding: 12px;
  background: #fff;
  border: 1px solid #d8e8f8;
  border-radius: 8px;
}

.fix-panel strong,
.fix-panel span {
  display: block;
}

.fix-panel span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.fix-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hidden {
  display: none !important;
}

.template-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.template-card {
  min-height: 180px;
  padding: 20px;
  overflow: hidden;
}

.template-card span {
  display: inline-flex;
  padding: 5px 10px;
  margin-bottom: 18px;
  color: #fff;
  font-weight: 800;
  background: var(--ink);
  border-radius: 999px;
}

.template-card h3 {
  font-size: 22px;
}

.template-card p {
  color: #465162;
  line-height: 1.6;
}

.template-card small {
  display: block;
  margin-top: 12px;
  color: #4f5b6d;
  font-weight: 800;
}

.template-card.yellow {
  background: #fff6bf;
}

.template-card.blue {
  background: #dff1ff;
}

.template-card.cyan {
  background: #d8fbff;
}

.template-card.green {
  background: #def8e8;
}

.template-card.pink {
  background: #ffe0ea;
}

.template-card.red {
  background: #ffe4e6;
}

.template-card.dark {
  color: #fff;
  background: #203a35;
}

.template-card.dark p {
  color: rgba(255, 255, 255, 0.76);
}

.template-card.dark small {
  color: rgba(255, 255, 255, 0.82);
}

.delivery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.delivery-grid article {
  padding: 24px;
}

.home-main .delivery-grid article {
  padding: 14px 16px;
}

.delivery-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(47, 139, 216, 0.12);
}

.home-main .delivery-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  font-size: 16px;
  border-width: 2px;
}

.delivery-grid p {
  color: var(--muted);
  line-height: 1.7;
}

.admin-body {
  background: #071523;
}

.admin-body.admin-authenticated,
.admin-body:has(.admin-console:not(.hidden)) {
  min-height: 100vh;
  overflow: hidden;
}

.admin-main {
  min-height: calc(100vh - 86px);
  background: inherit;
}

.admin-body:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin-main {
  min-height: auto;
}

.admin-body:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin {
  display: grid;
  gap: 18px;
  width: min(100% - 48px, 960px);
  margin: 0 auto;
  align-content: start;
  padding-top: clamp(24px, 3.2vw, 42px);
  padding-bottom: clamp(28px, 3.4vw, 46px);
}

.admin-body.admin-authenticated .admin-main,
.admin-body:has(.admin-console:not(.hidden)) .admin-main {
  min-height: 100vh;
}

.admin-body.admin-authenticated .admin,
.admin-body:has(.admin-console:not(.hidden)) .admin {
  padding: 0;
}

.admin-login-heading {
  max-width: 720px;
  margin-bottom: 0;
  color: #162033;
  text-align: center;
  justify-self: center;
}

.admin-login-heading .eyebrow {
  margin-bottom: 8px;
  font-size: 15px;
}

.admin-login-heading .page-title {
  max-width: 720px;
  margin-bottom: 12px;
  color: #162033;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
}

.admin-login-heading p:not(.eyebrow) {
  max-width: 720px;
  color: #607086;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

.admin-body:not(.admin-light-mode) .admin-login-heading,
.admin-body:not(.admin-light-mode) .admin-login-heading .page-title {
  color: #fff;
}

.admin-body:not(.admin-light-mode) .admin-login-heading p:not(.eyebrow) {
  color: #b7c3d4;
}

.admin-body:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin-login-card {
  width: min(100%, 480px);
  max-width: 480px;
  margin-top: 0;
  justify-self: center;
}

.admin-body.admin-authenticated .admin-public-topbar,
.admin-body.admin-authenticated .admin-login-heading,
.admin-body.admin-authenticated .admin-public-footer,
.admin-body:has(.admin-console:not(.hidden)) .admin-public-topbar,
.admin-body:has(.admin-console:not(.hidden)) .admin-login-heading,
.admin-body:has(.admin-console:not(.hidden)) .admin-public-footer {
  display: none;
}

.admin-console {
  --admin-bg: #071523;
  --admin-sidebar: #111827;
  --admin-top: #202b3b;
  --admin-panel: #111c2c;
  --admin-panel-soft: #172435;
  --admin-border: #2b394c;
  --admin-text: #f5f8ff;
  --admin-muted: #95a3b8;
  --admin-teal: #20d6c1;
  --admin-blue: #2f7fd8;
  --admin-red: #ef4444;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  color: var(--admin-text);
  background: var(--admin-bg);
}

.admin-body.admin-sidebar-collapsed .admin-console {
  grid-template-columns: 84px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #cbd5e1;
  background: var(--admin-sidebar);
  border-right: 1px solid #1e293b;
}

.admin-logo {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
  background: #0f172a;
  overflow: hidden;
}

.admin-logo-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #eaffff;
  font-size: 18px;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(32, 214, 193, 0.95), rgba(47, 127, 216, 0.95)),
    #172554;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 12px;
  box-shadow: 0 14px 26px rgba(2, 8, 23, 0.35);
}

.admin-logo-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-logo-copy strong {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.admin-logo-copy span,
.admin-logo-copy small {
  width: fit-content;
  padding: 3px 8px;
  color: #bcd1ea;
  font-size: 12px;
  font-weight: 800;
  background: #213147;
  border-radius: 8px;
}

.admin-body.admin-sidebar-collapsed .admin-logo {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 18px 12px;
}

.admin-body.admin-sidebar-collapsed .admin-logo-copy,
.admin-body.admin-sidebar-collapsed .admin-tab > span:not(.admin-tab-icon) {
  display: none;
}

.admin-body.admin-sidebar-collapsed .admin-tab {
  justify-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 0;
}

.auth-page {
  padding: clamp(14px, 2vw, 24px) clamp(18px, 5vw, 64px) clamp(28px, 4vw, 42px);
}

.payment-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.payment-confirm-card {
  display: grid;
  gap: 12px;
  width: min(100%, 460px);
  padding: 22px;
  background: #fff;
  border: 1px solid #dbe8f2;
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

.payment-confirm-card span {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.payment-confirm-card h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.payment-confirm-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.payment-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(280px, 360px);
  width: min(100%, 920px);
  margin: 0 auto;
  gap: 18px;
  align-items: start;
  justify-content: center;
  max-width: 920px;
}

.auth-layout > .auth-card {
  justify-self: center;
}

.card-title-line {
  justify-content: flex-start;
}

.card-title-line span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(47, 139, 216, 0.12);
}

.card-title-line h3 {
  margin-bottom: 0;
}

.card-title-line h4 {
  margin: 0;
  font-size: 20px;
}

.auth-card,
.admin-login-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(219, 232, 242, 0.86);
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

.auth-layout > .auth-card:first-child {
  width: 100%;
  max-width: 520px;
}

.auth-account-card {
  width: 100%;
  max-width: 360px;
}

.auth-card-head {
  display: grid;
  gap: 5px;
}

.auth-card-head h2 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
}

.auth-card-head > span {
  width: fit-content;
  padding: 4px 9px;
  color: #096b43;
  font-size: 12px;
  font-weight: 900;
  background: #dcfce7;
  border: 1px solid #8ee0ac;
  border-radius: 999px;
}

.auth-card-head h3 {
  margin: 0;
  font-size: 24px;
}

.auth-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.auth-form-grid.single {
  grid-template-columns: 1fr;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  background: #f2fafb;
  border: 1px solid #d7edf3;
  border-radius: 14px;
}

.auth-mode-tabs button {
  min-height: 36px;
  color: #385069;
  font-size: 15px;
  font-weight: 900;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.auth-mode-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 8px 18px rgba(47, 139, 216, 0.14);
}

.auth-mode-tabs button:disabled {
  color: #9aa9b8;
  cursor: not-allowed;
  opacity: 0.62;
}

.auth-mode-panel.registration-disabled {
  opacity: 0.72;
  pointer-events: none;
}

.auth-form-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fcfb;
  border: 1px solid #dbe8f2;
  border-radius: 16px;
}

.auth-form-block .card-title-line strong,
.auth-account-card .card-title-line strong {
  font-size: 18px;
  line-height: 1.2;
}

.auth-page .field {
  gap: 6px;
}

.auth-page .field span {
  font-size: 15px;
  font-weight: 850;
}

.auth-page input,
.auth-page select,
.auth-page textarea {
  min-height: 42px;
  padding: 9px 11px;
  font-size: 15px;
}

.auth-page .button {
  min-height: 42px;
  font-size: 15px;
  box-shadow: 3px 3px 0 rgba(31, 36, 48, 0.16);
}

.auth-form-block .button.primary.wide {
  min-height: 46px;
  margin-top: 2px;
  font-size: 17px;
}

.auth-form-block.muted-block {
  background: #fffdf5;
  border-color: #f0d56b;
}

.auth-mode-panel {
  display: none;
}

.auth-mode-panel.active {
  display: grid;
}

.auth-panel-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.email-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 10px;
  align-items: end;
}

.email-code-row .button {
  min-height: 48px;
  white-space: nowrap;
}

.account-status {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: #eef6ff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}

.account-status strong {
  font-size: 20px;
}

.account-status span {
  color: #385069;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.recharge-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.recharge-options button {
  --plan-color: var(--blue);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 12px 10px 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe8f2;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(38, 57, 82, 0.04);
}

.recharge-options button::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--plan-color), color-mix(in srgb, var(--plan-color) 34%, #fff));
}

.recharge-options button:nth-child(1) {
  --plan-color: var(--blue);
}

.recharge-options button:nth-child(2) {
  --plan-color: var(--orange);
}

.recharge-options button:nth-child(3) {
  --plan-color: var(--mint);
}

.recharge-options button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--plan-color) 5%, #fff), #fff 64%);
  border-color: color-mix(in srgb, var(--plan-color) 34%, var(--blue));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--plan-color) 9%, transparent),
    0 12px 24px rgba(38, 57, 82, 0.075);
}

.recharge-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 1px dashed #bdd2e7;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.recharge-options strong {
  color: #102033;
  font-size: 18px;
}

.recharge-options span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recharge-helper {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #bfe0ff;
  border-radius: 8px;
  background: #f3f9ff;
  color: #294766;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.continue-work-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fffdf2;
  border: 1px solid #f0d56b;
  border-radius: 8px;
}

.continue-work-card strong {
  color: #1f2937;
  font-size: 16px;
}

.continue-work-card span {
  color: #6b5b2d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.admin-login-card {
  max-width: 520px;
}

.admin-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 12px 12px;
  background: transparent;
  border-right: 0;
}

.admin-tab {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  color: #c7d2e2;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.admin-tab:hover {
  color: #fff;
  background: rgba(32, 214, 193, 0.08);
}

.admin-tab:focus-visible,
.admin-subtabs button:focus-visible,
.admin-console .button:focus-visible,
.admin-pagination button:focus-visible,
.admin-back-link:focus-visible {
  outline: 3px solid rgba(32, 214, 193, 0.32);
  outline-offset: 2px;
}

.admin-tab-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #a8b3c7;
  font-size: 13px;
  background: #111f31;
  border: 1px solid #2a3a50;
  border-radius: 10px;
}

.admin-tab.active {
  color: var(--admin-teal);
  background: #102b38;
  box-shadow: inset 3px 0 0 var(--admin-teal);
}

.admin-tab.active .admin-tab-icon {
  color: #061525;
  background: var(--admin-teal);
  border-color: var(--admin-teal);
}

.admin-workbench {
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% -10%, rgba(32, 214, 193, 0.13), transparent 30%),
    var(--admin-bg);
}

.admin-console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 0 28px;
  background: var(--admin-top);
  border-bottom: 1px solid #263449;
}

.admin-console-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-console-title h1,
.admin-console-title strong {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.15;
}

.admin-console-title p,
.admin-console-title span {
  margin: 0;
  color: #9aa8ba;
  font-size: 13px;
  font-weight: 800;
}

.admin-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: #cbd5e1;
  white-space: nowrap;
}

.admin-back-link {
  padding: 8px 11px;
  color: #dce8f8;
  font-weight: 900;
  background: #172435;
  border: 1px solid #35455b;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.admin-user-pill {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.admin-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #04201f;
  font-weight: 900;
  background: var(--admin-teal);
  border-radius: 12px;
}

.admin-user-pill strong,
.admin-user-pill small {
  display: block;
}

.admin-user-pill strong {
  color: #fff;
  line-height: 1.1;
}

.admin-user-pill small {
  margin-top: 3px;
  color: #96a4b8;
  font-weight: 800;
}

.admin-content {
  height: calc(100vh - 76px);
  min-height: 0;
  padding: 22px 30px 42px;
  overflow: auto;
}

.admin-page-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}

.admin-page-head h2 {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.admin-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.admin-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: auto;
  margin: 0 0 14px;
  padding: 10px;
  align-items: center;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.2);
}

.admin-subtabs button {
  min-height: 36px;
  padding: 0 13px;
  color: #d7e0ec;
  font-size: 14px;
  font-weight: 900;
  background: #1d2a3d;
  border: 1px solid #37465d;
  border-radius: 10px;
  cursor: pointer;
}

.admin-subtabs button.active {
  color: #061525;
  background: var(--admin-teal);
  border-color: var(--admin-teal);
  box-shadow: 0 10px 22px rgba(32, 214, 193, 0.22);
}

.admin-tip-box {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  color: #cbd5e1;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
}

.admin-tip-box h4 {
  display: block;
  margin: 0;
  padding: 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  border-bottom: 0;
}

.admin-tip-box ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #9fb3c8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.admin-search-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin: 0 0 16px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.2);
}

.admin-user-search {
  grid-template-columns: repeat(2, minmax(200px, 1fr)) repeat(2, minmax(160px, 0.7fr)) auto;
}

.admin-queue-search {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.45fr) auto;
}

.admin-create-user-form {
  grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
  margin-bottom: 0;
}

.admin-create-user-form .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.admin-create-user-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.56);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.18);
}

.admin-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-section-head div {
  display: grid;
  gap: 4px;
}

.admin-section-head span {
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-section-head strong {
  color: #f8fafc;
  font-size: 19px;
  font-weight: 950;
}

.admin-search-panel label {
  display: grid;
  gap: 7px;
  color: #dce5f2;
  font-size: 13px;
  font-weight: 900;
}

.admin-search-panel input,
.admin-search-panel select {
  min-height: 42px;
  padding: 0 12px;
  color: #eef5ff;
  background: #1b2638;
  border: 1px solid #3b4a61;
  border-radius: 10px;
}

.admin-search-panel input[readonly] {
  color: #9fb0c6;
  background: #111827;
  cursor: not-allowed;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.admin-form-actions .button {
  min-width: 96px;
}

.admin-result-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 14px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.16);
}

.admin-result-summary > div {
  display: grid;
  gap: 4px;
}

.admin-result-summary span,
.admin-result-summary small {
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-result-summary strong {
  color: #f8fafc;
  font-size: 19px;
  font-weight: 950;
}

.admin-result-summary ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-result-summary li {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  background: #172235;
  border: 1px solid #31435c;
  border-radius: 999px;
}

.admin-result-summary li.active {
  background: rgba(32, 214, 193, 0.12);
  border-color: rgba(32, 214, 193, 0.42);
}

.admin-result-summary li strong {
  max-width: 180px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-panel input::placeholder {
  color: #74839a;
}

.admin-search-panel input:focus,
.admin-search-panel select:focus,
.admin-console .settings-grid input:focus,
.admin-console .settings-grid select:focus {
  outline: 0;
  border-color: var(--admin-teal);
  box-shadow: 0 0 0 3px rgba(32, 214, 193, 0.12);
}

.admin-table-wrap {
  position: relative;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.22);
  scrollbar-color: #31435c #0f1827;
  scrollbar-width: thin;
}

.admin-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.admin-table-wrap::-webkit-scrollbar-track {
  background: #0f1827;
  border-radius: 999px;
}

.admin-table-wrap::-webkit-scrollbar-thumb {
  background: #31435c;
  border: 2px solid #0f1827;
  border-radius: 999px;
}

.admin-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
}

.admin-pagination span {
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-pagination-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.admin-pagination-status label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--admin-muted);
  font-weight: 900;
}

.admin-pagination-status select {
  min-height: 34px;
  padding: 0 34px 0 12px;
  color: #dce8f8;
  font-weight: 900;
  background: #1d2a3d;
  border: 1px solid #3a4a61;
  border-radius: 10px;
}

.admin-pagination-buttons {
  display: flex;
  gap: 8px;
}

.admin-pagination button {
  min-height: 34px;
  padding: 0 12px;
  color: #dce8f8;
  font-weight: 900;
  background: #1d2a3d;
  border: 1px solid #3a4a61;
  border-radius: 10px;
  cursor: pointer;
}

.admin-pagination button:disabled {
  color: #64748b;
  background: #111827;
  border-color: #263244;
  cursor: not-allowed;
}

.admin-pagination-empty {
  background: rgba(15, 23, 42, 0.54);
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.admin-console table {
  width: 100%;
  margin-top: 0;
  border-collapse: collapse;
  color: #f1f5f9;
  background: transparent;
}

.admin-action-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}

.admin-action-table th,
.admin-action-table td {
  white-space: nowrap;
}

.admin-action-table td:nth-child(2),
.admin-action-table td:nth-child(3) {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-action-table .tag {
  white-space: nowrap;
}

.admin-console th,
.admin-console td {
  padding: 11px 12px;
  text-align: left;
  line-height: 1.35;
  vertical-align: middle;
  border-bottom: 1px solid var(--admin-border);
}

.admin-console th {
  color: #9aa8ba;
  font-size: 13px;
  font-weight: 900;
  background: #202b3b;
}

.admin-console td {
  color: #e7edf7;
  font-size: 14px;
  font-weight: 700;
}

.admin-action-table th:last-child,
.admin-action-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 112px;
  background: #111827;
  border-left: 1px solid var(--admin-border);
  box-shadow: -14px 0 22px rgba(2, 8, 23, 0.3);
}

.admin-action-table th:last-child {
  z-index: 3;
  background: #202b3b;
}

.admin-action-table tbody tr:hover td:last-child {
  background: #132236;
}

.admin-console tbody tr:hover {
  background: rgba(32, 214, 193, 0.05);
}

.admin-link-button {
  color: var(--admin-teal);
  font-weight: 900;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.admin-link-button.danger {
  color: #fb7185;
}

.admin-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.admin-settings-actions .form-message {
  margin: 0;
}

.admin-empty {
  padding: 24px;
  color: var(--admin-muted);
  font-weight: 900;
  text-align: center;
}

.admin-empty-state {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  padding: 10px;
  color: var(--admin-muted);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}

.admin-empty-state strong {
  color: inherit;
  font-size: 15px;
}

.admin-empty-state small {
  max-width: 520px;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
}

.admin-table-wrap.compact th,
.admin-table-wrap.compact td {
  padding: 11px 12px;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-dashboard-grid article {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 15px;
  background:
    linear-gradient(135deg, rgba(32, 214, 193, 0.08), transparent 48%),
    var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.18);
}

.admin-dashboard-grid article.warn {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.14), transparent 52%),
    var(--admin-panel);
}

.admin-dashboard-grid article.danger {
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.14), transparent 52%),
    var(--admin-panel);
}

.admin-dashboard-grid span,
.admin-dashboard-grid small {
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-dashboard-grid strong {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.admin-dashboard-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-dashboard-card {
  min-width: 0;
}

.admin-dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-dashboard-card-head strong {
  color: #fff;
  font-size: 18px;
}

.admin-urgent-card {
  margin-bottom: 14px;
  padding: 16px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.18);
}

.admin-queue-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-queue-list.compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0;
}

.admin-queue-list article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  background: #172435;
  border: 1px solid var(--admin-border);
  border-radius: 14px;
}

.admin-queue-list article.danger {
  border-color: rgba(239, 68, 68, 0.48);
  box-shadow: inset 3px 0 0 #ef4444;
}

.admin-queue-list article.warn {
  border-color: rgba(250, 204, 21, 0.45);
  box-shadow: inset 3px 0 0 #facc15;
}

.admin-queue-list article.muted {
  box-shadow: inset 3px 0 0 #64748b;
}

.admin-queue-list span {
  width: fit-content;
  padding: 4px 9px;
  color: #071523;
  font-size: 12px;
  font-weight: 900;
  background: var(--admin-teal);
  border-radius: 999px;
}

.admin-queue-list strong {
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
}

.admin-queue-list small,
.admin-empty-note {
  margin: 0;
  color: var(--admin-muted);
  line-height: 1.5;
}

.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(2, 8, 23, 0.54);
  backdrop-filter: blur(4px);
}

.admin-drawer {
  width: min(520px, 100%);
  height: 100%;
  min-height: 0;
  overflow: auto;
  color: var(--admin-text);
  background: #111827;
  border-left: 1px solid var(--admin-border);
  box-shadow: -24px 0 60px rgba(2, 8, 23, 0.36);
}

.admin-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 0 18px;
  background: #202b3b;
  border-bottom: 1px solid var(--admin-border);
}

.admin-drawer-head strong {
  color: #fff;
  font-size: 20px;
}

.admin-drawer-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 16px;
}

.admin-drawer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-drawer-summary article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
}

.admin-drawer-summary span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-drawer-summary strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  word-break: break-word;
}

.admin-detail-row {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
}

.admin-detail-row span {
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 900;
}

.admin-detail-row strong {
  color: #fff;
  line-height: 1.55;
  word-break: break-word;
}

.admin-drawer-actions {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.admin-action-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
}

.admin-action-panel h4 {
  margin: 0;
}

.admin-action-panel label {
  display: grid;
  gap: 7px;
  color: #dce5f2;
  font-weight: 900;
}

.admin-action-panel input,
.admin-action-panel select,
.admin-action-panel textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #eef5ff;
  font: inherit;
  font-weight: 800;
  background: #1b2638;
  border: 1px solid #3b4a61;
  border-radius: 10px;
}

.admin-action-panel textarea {
  min-height: 86px;
  padding-top: 12px;
  resize: vertical;
}

.admin-action-panel input:focus,
.admin-action-panel select:focus,
.admin-action-panel textarea:focus {
  outline: 0;
  border-color: var(--admin-teal);
  box-shadow: 0 0 0 3px rgba(32, 214, 193, 0.12);
}

.admin-action-note {
  margin: 0 0 12px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.admin-action-row,
.admin-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-action-row-primary {
  align-items: center;
}

.admin-action-row-secondary {
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  justify-content: start;
}

.admin-action-row-danger {
  grid-template-columns: minmax(150px, max-content);
  justify-content: start;
  padding-top: 10px;
  border-top: 1px solid rgba(239, 68, 68, 0.28);
}

.tag.paid {
  color: #04201f;
  background: #59e6c8;
}

.tag.pending {
  color: #1f1600;
  background: #facc15;
}

.tag.danger {
  color: #fff;
  background: #ef4444;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.metric-grid div,
.template-list div,
.plan-grid article {
  padding: 15px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.18);
}

.plan-grid article.pending-delete {
  border-color: #ef4444;
  box-shadow: 0 18px 36px rgba(127, 29, 29, 0.26);
}

.metric-grid span,
.template-list span {
  display: block;
  color: var(--admin-muted);
}

.metric-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  color: #fff;
}

.template-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.subheading {
  margin-top: 22px;
}

.template-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.settings-grid label {
  display: grid;
  gap: 7px;
  color: #dce5f2;
  font-size: 13px;
  font-weight: 800;
}

.admin-console .settings-grid input,
.admin-console .settings-grid select {
  min-height: 42px;
  padding: 0 12px;
  color: #eef5ff;
  background: #1b2638;
  border: 1px solid #3b4a61;
  border-radius: 10px;
}

.admin-model-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.admin-model-summary > div {
  display: grid;
  gap: 6px;
  padding: 15px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.16);
}

.admin-model-summary span {
  color: var(--admin-muted);
  font-weight: 900;
}

.admin-model-summary strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
}

.admin-model-summary p {
  margin: 0;
  color: var(--admin-muted);
  line-height: 1.55;
}

.admin-model-settings .model-section {
  display: none;
}

.admin-model-settings[data-model-active-section="image"] .model-section-image,
.admin-model-settings[data-model-active-section="text"] .model-section-text,
.admin-model-settings[data-model-active-section="preview"] .model-section-preview {
  display: grid;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.plan-grid h4 {
  margin: 14px 0 6px;
}

.plan-grid strong {
  display: block;
  font-size: 26px;
  color: #fff;
}

.plan-grid p {
  margin: 10px 0 0;
  color: var(--admin-muted);
  line-height: 1.6;
}

.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-console h3,
.admin-console h4,
.template-list strong {
  color: #fff;
}

.admin-console .form-message {
  color: #cbd5e1;
}

.admin-console .button {
  color: #dce8f8;
  background: #1d2a3d;
  border-color: #3a4a61;
  box-shadow: none;
}

.admin-console .button.primary {
  color: #04201f;
  background: var(--admin-teal);
  border-color: var(--admin-teal);
}

.admin-console .button.small {
  min-height: 34px;
  padding: 0 12px;
  color: #dce8f8;
  background: #1d2a3d;
  border-color: #3a4a61;
}

.admin-console .button.danger,
.admin-console .button.small.danger {
  color: #ffe4e6;
  background: #7f1d1d;
  border-color: #be123c;
}

.admin-body.admin-light-mode .admin-console {
  --admin-bg: #f4f7fb;
  --admin-sidebar: #ffffff;
  --admin-top: #ffffff;
  --admin-panel: #ffffff;
  --admin-panel-soft: #f8fbff;
  --admin-border: #d9e2ef;
  --admin-text: #172033;
  --admin-muted: #5f6f84;
  --admin-teal: #1fb8a7;
  --admin-blue: #2f7fd8;
  color: var(--admin-text);
  background: #f4f7fb;
}

.admin-body.admin-light-mode {
  background: #f4f7fb;
}

.admin-body.admin-light-mode .admin-main {
  background: #f4f7fb;
}

.admin-body.admin-light-mode:has(.admin-console:not(.hidden)) {
  background: #f4f7fb;
}

.admin-body.admin-light-mode .admin-workbench {
  background:
    radial-gradient(circle at 78% -10%, rgba(31, 184, 167, 0.12), transparent 30%),
    #f4f7fb;
}

.admin-body.admin-light-mode .admin-sidebar,
.admin-body.admin-light-mode .admin-logo {
  color: #1f2937;
  background: #fff;
  border-color: #d9e2ef;
}

.admin-body.admin-light-mode .admin-logo-copy strong,
.admin-body.admin-light-mode .admin-console-title h1,
.admin-body.admin-light-mode .admin-console-title strong,
.admin-body.admin-light-mode td,
.admin-body.admin-light-mode .admin-console h3,
.admin-body.admin-light-mode .admin-console h4,
.admin-body.admin-light-mode .admin-dashboard-grid strong,
.admin-body.admin-light-mode .admin-dashboard-card-head strong,
.admin-body.admin-light-mode .admin-drawer-head strong,
.admin-body.admin-light-mode .admin-detail-row strong,
.admin-body.admin-light-mode .template-list strong,
.admin-body.admin-light-mode .plan-grid strong,
.admin-body.admin-light-mode .metric-grid strong {
  color: #172033;
}

.admin-body.admin-light-mode .admin-logo-copy span,
.admin-body.admin-light-mode .admin-logo-copy small {
  color: #31506b;
  background: #eef6ff;
}

.admin-body.admin-light-mode .admin-console-title p,
.admin-body.admin-light-mode .admin-console-title span,
.admin-body.admin-light-mode .admin-user-pill small,
.admin-body.admin-light-mode .admin-dashboard-grid span,
.admin-body.admin-light-mode .admin-dashboard-grid small,
.admin-body.admin-light-mode .admin-detail-row span,
.admin-body.admin-light-mode .metric-grid span,
.admin-body.admin-light-mode .template-list span,
.admin-body.admin-light-mode .plan-grid p,
.admin-body.admin-light-mode .admin-pagination span {
  color: #5f6f84;
}

.admin-body.admin-light-mode .admin-tab {
  color: #2f3d52;
}

.admin-body.admin-light-mode .admin-tab:hover,
.admin-body.admin-light-mode .admin-tab.active {
  background: #e8f8f6;
}

.admin-body.admin-light-mode .admin-tab-icon,
.admin-body.admin-light-mode .admin-console .button,
.admin-body.admin-light-mode .admin-pagination button,
.admin-body.admin-light-mode .admin-pagination-status select {
  color: #2f3d52;
  background: #f4f7fb;
  border-color: #d9e2ef;
}

.admin-body.admin-light-mode .admin-console-top,
.admin-body.admin-light-mode .admin-table-wrap,
.admin-body.admin-light-mode .admin-subtabs,
.admin-body.admin-light-mode .admin-search-panel,
.admin-body.admin-light-mode .admin-result-summary,
.admin-body.admin-light-mode .admin-create-user-panel,
.admin-body.admin-light-mode .admin-dashboard-grid article,
.admin-body.admin-light-mode .admin-urgent-card,
.admin-body.admin-light-mode .admin-queue-list article,
.admin-body.admin-light-mode .admin-drawer,
.admin-body.admin-light-mode .admin-drawer-head,
.admin-body.admin-light-mode .admin-detail-row,
.admin-body.admin-light-mode .metric-grid div,
.admin-body.admin-light-mode .template-list div,
.admin-body.admin-light-mode .plan-grid article,
.admin-body.admin-light-mode .admin-pagination {
  background: #fff;
  border-color: #d9e2ef;
  box-shadow: 0 10px 24px rgba(32, 46, 72, 0.07);
}

.admin-body.admin-light-mode th {
  color: #5f6f84;
  background: #f3f6fa;
}

.admin-body.admin-light-mode .admin-action-table th:last-child {
  background: #f3f6fa;
}

.admin-body.admin-light-mode .admin-action-table td:last-child {
  background: #fff;
  border-left-color: #d9e2ef;
  box-shadow: -14px 0 22px rgba(32, 46, 72, 0.08);
}

.admin-body.admin-light-mode .admin-action-table tbody tr:hover td:last-child {
  background: #f4fbfb;
}

.admin-body.admin-light-mode .admin-table-wrap {
  scrollbar-color: #cbd5e1 #eef2f7;
}

.admin-body.admin-light-mode .admin-table-wrap::-webkit-scrollbar-track {
  background: #eef2f7;
}

.admin-body.admin-light-mode .admin-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-color: #eef2f7;
}

.admin-body.admin-light-mode .admin-drawer-backdrop {
  background: rgba(15, 23, 42, 0.22);
}

.admin-body.admin-light-mode th,
.admin-body.admin-light-mode td {
  border-bottom-color: #e4ebf4;
}

.admin-body.admin-light-mode .admin-search-panel input,
.admin-body.admin-light-mode .admin-search-panel select,
.admin-body.admin-light-mode .admin-console .settings-grid input,
.admin-body.admin-light-mode .admin-console .settings-grid select {
  color: #172033;
  background: #fff;
  border-color: #d9e2ef;
}

.admin-body.admin-light-mode .admin-result-summary li {
  background: #eef6ff;
  border-color: #cbd5e1;
}

.admin-body.admin-light-mode .admin-result-summary strong,
.admin-body.admin-light-mode .admin-result-summary li strong,
.admin-body.admin-light-mode .admin-section-head strong,
.admin-body.admin-light-mode .admin-tip-box h4 {
  color: #172033;
}

.admin-body.admin-light-mode .admin-tip-box {
  color: #41566f;
  background: #eefbf8;
  border-color: #b6eee4;
}

.admin-body.admin-light-mode .admin-tip-box ul {
  color: #5f6f84;
}

.admin-body.admin-light-mode .admin-model-summary > div {
  background: #fff;
  border-color: #d9e2ef;
  box-shadow: 0 16px 34px rgba(32, 46, 72, 0.08);
}

.admin-body.admin-light-mode .admin-model-summary strong {
  color: #172033;
}

.admin-body.admin-light-mode .admin-back-link {
  color: #2f3d52;
  background: #f4f7fb;
  border-color: #d9e2ef;
}

.admin-body.admin-light-mode .admin-queue-list strong {
  color: #172033;
}

.admin-body.admin-light-mode .admin-action-panel {
  background: #fff;
  border-color: #d9e2ef;
  box-shadow: 0 16px 34px rgba(32, 46, 72, 0.08);
}

.admin-body.admin-light-mode .admin-action-panel label {
  color: #2f3d52;
}

.admin-body.admin-light-mode .admin-action-panel input,
.admin-body.admin-light-mode .admin-action-panel select,
.admin-body.admin-light-mode .admin-action-panel textarea {
  color: #172033;
  background: #fff;
  border-color: #d9e2ef;
}

.footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px clamp(18px, 5vw, 72px) 56px;
  color: #4f5b6d;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  background: #fff;
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .hero,
  .maker,
  .result-layout,
  .content-hero,
  .content-workbench,
  .admin-console,
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-category-guide {
    grid-template-columns: 1fr;
  }

  .style-grid,
  .effect-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-menu {
    flex-direction: row;
    overflow-x: auto;
  }

  .admin-console {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    min-height: auto;
    overflow-x: auto;
  }

  .admin-workbench {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .admin-logo {
    display: none;
  }

  .admin-console-top,
  .admin-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .admin-content {
    height: auto;
    min-height: 0;
  }

  .admin-console th,
  .admin-console td {
    padding: 11px 10px;
    font-size: 14px;
  }

  .admin-action-table {
    min-width: 760px;
  }

  .admin-action-table th:last-child,
  .admin-action-table td:last-child {
    min-width: 94px;
  }

  .admin-table-actions {
    gap: 6px;
  }

  .admin-console-top {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .admin-top-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .admin-tab {
    min-width: 138px;
  }

  .admin-search-panel,
  .admin-user-search {
    grid-template-columns: 1fr;
  }

  .admin-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-pagination-buttons {
    justify-content: flex-start;
  }

  .admin-form-actions {
    width: 100%;
  }

  .admin-form-actions .button {
    flex: 1 1 128px;
  }

  .admin-dashboard-grid,
  .admin-dashboard-columns,
  .admin-queue-list.compact {
    grid-template-columns: 1fr;
  }

  .admin-result-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-result-summary ul {
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) {
  .admin-console .admin-user-search,
  .admin-console .admin-queue-search,
  .admin-console .admin-wallet-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-console .admin-user-search .admin-form-actions,
  .admin-console .admin-queue-search .admin-form-actions,
  .admin-console .admin-wallet-search .admin-form-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav .top-account-chip {
    flex: 0 0 208px;
    margin-left: 0;
  }

  .hero {
    min-height: auto;
  }

  .home-main .hero,
  .home-main .home-section {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .home-main .quick-section,
  .home-main .home-delivery-section {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .workflow {
    padding-top: 18px;
    padding-bottom: 28px;
  }

  .make-heading {
    margin-bottom: 8px;
  }

  .make-heading .page-title {
    font-size: clamp(24px, 7vw, 30px);
  }

  .maker {
    gap: 12px;
  }

  .maker-panel {
    padding: 14px;
  }

  .auth-page {
    padding-top: 14px;
    padding-bottom: 28px;
  }

    .quick-grid,
    .form-row,
    .content-form-grid,
    .content-scenario-list,
    .content-secondary-actions,
    .auth-form-grid,
  .auth-mode-tabs,
  .email-code-row,
  .showcase-hero,
  .showcase-grid,
  .delivery-hero,
  .delivery-history-summary,
  .delivery-history-grid,
  .delivery-pagination,
  .delivery-record-card,
  .delivery-record-card.current,
  .scenario-strip,
  .scenario-selected-summary ul,
  .effect-plan-list,
  .confirm-recommendation,
  .confirm-head,
  .confirm-plan-main,
  .confirm-plan-cards,
  .confirm-body-preview ul,
  .plan-grid,
  .delivery-grid,
  .template-grid,
  .reference-grid,
  .metric-grid,
  .settings-grid,
  .admin-model-summary,
  .admin-action-row,
  .admin-inline-grid,
  .admin-queue-list.compact,
  .admin-search-panel,
  .admin-user-search {
    grid-template-columns: 1fr;
  }

  .content-page {
    padding-top: 14px;
    padding-bottom: 30px;
  }

  .content-hero {
    margin-bottom: 10px;
  }

  .content-hero .page-title {
    font-size: clamp(24px, 7vw, 30px);
  }

  .content-scenario-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-scenario-list {
    max-height: 460px;
  }

  .content-result {
    min-height: auto;
  }

  .content-empty-state {
    min-height: 260px;
  }

  .scenario-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .scenario-card {
    min-height: 82px;
    padding: 11px 10px;
  }

  .scenario-card strong {
    font-size: 15px;
  }

  .scenario-card small {
    font-size: 12px;
  }

  .scenario-card b,
  .scenario-card i {
    font-size: 10px;
  }

  .showcase-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .showcase-toolbar input {
    flex-basis: auto;
    width: 100%;
  }

  .selected-summary-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .style-grid,
  .effect-choice-grid,
  .effect-choice-buttons {
    grid-template-columns: 1fr;
  }

  .result-head,
  .delivery-record-head,
  .delivery-pagination,
  .admin-top,
  .price-row,
  .account-banner,
  .panel-title-row,
  .section-mini-title,
  .effect-summary-card,
  .effect-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .delivery-pagination {
    align-items: stretch;
  }

  .delivery-progress {
    grid-template-columns: 1fr;
  }

  .showcase-preview-pair {
    grid-template-columns: 1fr;
  }

  .showcase-preview-image {
    height: auto;
    max-height: 420px;
  }

  .delivery-pagination-actions {
    justify-content: space-between;
  }

  .hero-sample-image {
    width: min(100%, 360px);
    max-height: none;
  }

  .hero-board {
    justify-self: center;
    transform: none;
  }

  .hero-board::before {
    inset: 12px 18px -10px 18px;
  }

  h1 {
    font-size: 40px;
  }

  .home-main h1 {
    font-size: 34px;
  }

  .home-main h2 {
    font-size: 28px;
  }

  .admin-body:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin {
    padding-top: 22px;
    padding-bottom: 30px;
  }

  .admin-login-heading .page-title {
    font-size: clamp(26px, 8vw, 34px);
  }

  .home-main .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recharge-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .quiet-admin-link {
    right: 16px;
    bottom: 16px;
  }

  .home-main .quick-grid {
    grid-template-columns: 1fr;
  }

  .scenario-strip {
    grid-template-columns: 1fr;
  }

  .scenario-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-tabs button {
    justify-content: flex-start;
  }

  .scenario-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content-scenario-categories {
    grid-template-columns: 1fr;
  }
}

/* Admin soft data redesign */
.admin-soft-data {
  --admin-soft-bg: #f6fbf8;
  --admin-soft-bg-2: #f6faff;
  --admin-soft-panel: rgba(255, 255, 255, 0.94);
  --admin-soft-panel-solid: #fff;
  --admin-soft-line: #dbe8e4;
  --admin-soft-line-strong: #c4d9d2;
  --admin-soft-text: #132033;
  --admin-soft-muted: #66758a;
  --admin-soft-green: #16a56f;
  --admin-soft-green-dark: #087d52;
  --admin-soft-green-soft: #e9f8ef;
  --admin-soft-blue: #2f7fd8;
  --admin-soft-blue-soft: #eef6ff;
  --admin-soft-orange: #f59e0b;
  --admin-soft-orange-soft: #fff7e8;
  --admin-soft-purple: #6d5dfc;
  --admin-soft-purple-soft: #f3f1ff;
  --admin-soft-red: #ef4444;
  --admin-soft-red-soft: #fff1f2;
  --admin-soft-shadow: 0 16px 36px rgba(42, 69, 96, 0.08);
  --admin-soft-shadow-sm: 0 10px 24px rgba(42, 69, 96, 0.06);
  color: var(--admin-soft-text);
  background:
    linear-gradient(90deg, rgba(22, 165, 111, 0.045) 0 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #fbfffc 0%, var(--admin-soft-bg) 48%, #fffaf1 100%);
}

.admin-soft-data .admin-main {
  background: transparent;
}

.admin-soft-data .admin-public-topbar {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(196, 217, 210, 0.82);
  box-shadow: 0 10px 26px rgba(42, 69, 96, 0.05);
}

.admin-soft-data:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin {
  width: min(100% - 48px, 520px);
  min-height: calc(100vh - 170px);
  justify-content: center;
  align-content: center;
  gap: 14px;
  padding-top: 28px;
  padding-bottom: 34px;
}

.admin-soft-data:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin-login-heading {
  max-width: 520px;
  padding: 0;
  text-align: center;
}

.admin-soft-data:not(.admin-light-mode) .admin-login-heading,
.admin-soft-data:not(.admin-light-mode) .admin-login-heading .page-title {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-login-heading .page-title {
  margin-bottom: 9px;
  color: var(--admin-soft-text);
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: 0;
}

.admin-soft-data .admin-login-heading span,
.admin-soft-data .admin-login-heading p:not(.eyebrow) {
  color: var(--admin-soft-muted);
  font-size: 15px;
  line-height: 1.6;
}

.admin-soft-data .admin-login-card {
  width: 100%;
  max-width: 520px;
  gap: 13px;
  padding: 22px;
  background: var(--admin-soft-panel);
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
  box-shadow: var(--admin-soft-shadow);
}

.admin-soft-data .admin-login-card::before {
  display: block;
  width: 58px;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, var(--admin-soft-green), var(--admin-soft-blue), var(--admin-soft-orange));
  border-radius: 999px;
}

.admin-soft-data .admin-login-card .muted {
  margin: 0;
  padding: 9px 11px;
  color: #31566d;
  font-size: 13px;
  font-weight: 850;
  background: #f0faf5;
  border: 1px solid #cbeadc;
  border-radius: 8px;
}

.admin-soft-data .admin-login-card .field {
  gap: 7px;
}

.admin-soft-data .admin-login-card .field span {
  color: var(--admin-soft-text);
  font-size: 14px;
  font-weight: 900;
}

.admin-soft-data .admin-login-card input {
  min-height: 46px;
  color: var(--admin-soft-text);
  background: #fff;
  border: 1px solid #cfddd9;
  border-radius: 8px;
}

.admin-soft-data .admin-login-card input:focus {
  outline: 0;
  border-color: var(--admin-soft-green);
  box-shadow: 0 0 0 3px rgba(22, 165, 111, 0.14);
}

.admin-soft-data .admin-login-card .button.primary {
  min-height: 46px;
  color: #fff;
  background: linear-gradient(135deg, var(--admin-soft-green), #12b981);
  border-color: var(--admin-soft-green-dark);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(19, 32, 51, 0.12);
}

.admin-soft-data.admin-authenticated,
.admin-soft-data:has(.admin-console:not(.hidden)) {
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(22, 165, 111, 0.04) 0 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #fbfffc 0%, var(--admin-soft-bg-2) 55%, #fffaf1 100%);
}

.admin-soft-data .admin-console.hidden {
  display: none;
}

.admin-soft-data .admin-console:not(.hidden) {
  --admin-bg: transparent;
  --admin-sidebar: #ffffff;
  --admin-top: rgba(255, 255, 255, 0.92);
  --admin-panel: rgba(255, 255, 255, 0.94);
  --admin-panel-soft: #f8fcfb;
  --admin-border: var(--admin-soft-line);
  --admin-text: var(--admin-soft-text);
  --admin-muted: var(--admin-soft-muted);
  --admin-teal: var(--admin-soft-green);
  --admin-blue: var(--admin-soft-blue);
  --admin-red: var(--admin-soft-red);
  grid-template-columns: 238px minmax(0, 1fr);
  color: var(--admin-soft-text);
  background: transparent;
}

.admin-soft-data.admin-sidebar-collapsed .admin-console:not(.hidden) {
  grid-template-columns: 88px minmax(0, 1fr);
}

.admin-soft-data .admin-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 16px 12px 18px;
  color: var(--admin-soft-text);
  background: rgba(255, 255, 255, 0.88);
  border-right: 1px solid rgba(196, 217, 210, 0.88);
  box-shadow: 14px 0 34px rgba(42, 69, 96, 0.05);
}

.admin-soft-data .admin-logo {
  min-height: auto;
  margin: 0 0 18px;
  padding: 13px 12px;
  color: var(--admin-soft-text);
  background: linear-gradient(135deg, #f1fbf5, #fffaf0);
  border: 1px solid #d8ebe1;
  border-radius: 8px;
  box-shadow: var(--admin-soft-shadow-sm);
}

.admin-soft-data .admin-logo-mark {
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--admin-soft-green), #22c55e);
  border: 1px solid #9ad8bc;
  border-radius: 8px;
  box-shadow: none;
}

.admin-soft-data .admin-logo-copy strong {
  color: var(--admin-soft-text);
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-logo-copy span,
.admin-soft-data .admin-logo-copy small {
  padding: 0;
  color: var(--admin-soft-muted);
  font-size: 12px;
  background: transparent;
  border-radius: 0;
}

.admin-soft-data .admin-menu {
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #b8d5ca transparent;
}

.admin-soft-data .admin-tab {
  grid-template-columns: 28px minmax(0, 1fr);
  min-width: 0;
  min-height: 36px;
  padding: 0 9px;
  color: #30425a;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.admin-soft-data .admin-tab:hover {
  color: var(--admin-soft-green-dark);
  background: rgba(233, 248, 239, 0.76);
  border-color: #cfe8dc;
}

.admin-soft-data .admin-tab-icon {
  width: 28px;
  height: 28px;
  color: var(--admin-soft-green-dark);
  background: var(--admin-soft-green-soft);
  border: 1px solid #c3ead5;
  border-radius: 8px;
}

.admin-soft-data .admin-tab:nth-child(3n + 2) .admin-tab-icon {
  color: #1f65af;
  background: var(--admin-soft-blue-soft);
  border-color: #c8def7;
}

.admin-soft-data .admin-tab:nth-child(3n) .admin-tab-icon {
  color: #a16207;
  background: var(--admin-soft-orange-soft);
  border-color: #f5d8a6;
}

.admin-soft-data .admin-tab.active {
  color: var(--admin-soft-green-dark);
  background: linear-gradient(90deg, #ddf7e8, #f5fbf7);
  border-color: #bce8d0;
  box-shadow: inset 4px 0 0 var(--admin-soft-green);
}

.admin-soft-data .admin-tab.active .admin-tab-icon {
  color: #fff;
  background: var(--admin-soft-green);
  border-color: var(--admin-soft-green);
}

.admin-soft-data .admin-workbench {
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.admin-soft-data .admin-console-top {
  min-height: 58px;
  margin: 0;
  padding: 10px 18px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-bottom: 1px solid rgba(196, 217, 210, 0.86);
  border-radius: 0;
  box-shadow: var(--admin-soft-shadow-sm);
}

.admin-soft-data .admin-console-title h1,
.admin-soft-data .admin-console-title strong {
  color: var(--admin-soft-text);
  font-size: 15px;
  letter-spacing: 0;
}

.admin-soft-data .admin-console-title p,
.admin-soft-data .admin-console-title span,
.admin-soft-data .admin-user-pill small {
  color: var(--admin-soft-muted);
}

.admin-soft-data .admin-top-actions {
  color: var(--admin-soft-muted);
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.admin-soft-data .admin-console-title {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-soft-data .admin-console-title p {
  display: none;
}

.admin-soft-data .admin-top-menu,
.admin-soft-data .admin-home-dot,
.admin-soft-data .admin-bell {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #52637a;
  font-size: 15px;
  font-weight: 900;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-top-menu {
  cursor: pointer;
}

.admin-soft-data .admin-home-dot {
  border: 0;
  background: transparent;
}

.admin-soft-data .admin-global-search {
  position: relative;
  display: block;
  min-width: 0;
}

.admin-soft-data .admin-global-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.admin-soft-data .admin-global-search input {
  width: clamp(210px, 18vw, 310px);
  min-height: 36px;
  padding: 0 12px 0 34px;
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 800;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-global-search::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #9aa8b7;
  border-radius: 50%;
  transform: translateY(-55%);
}

.admin-soft-data .admin-global-search::after {
  position: absolute;
  top: 22px;
  left: 24px;
  width: 7px;
  height: 2px;
  content: "";
  background: #9aa8b7;
  transform: rotate(45deg);
}

.admin-soft-data .admin-export-button {
  min-height: 32px;
  padding: 0 12px;
  color: #26384d;
  font-size: 13px;
  font-weight: 850;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-export-button {
  cursor: pointer;
}

.admin-soft-data .admin-bell {
  position: relative;
  border: 0;
  background: transparent;
}

.admin-soft-data .admin-bell::before {
  content: "!";
}

.admin-soft-data .admin-bell {
  color: #fff;
  font-size: 11px;
  background: var(--admin-soft-red);
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.admin-soft-data .admin-back-link {
  color: #24425c;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-back-link:hover {
  color: var(--admin-soft-green-dark);
  border-color: #b9e1cd;
}

.admin-soft-data .admin-user-pill {
  min-height: 36px;
  padding: 4px 10px 4px 4px;
  max-width: 220px;
  min-width: 0;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-user-pill > div {
  min-width: 0;
}

.admin-soft-data .admin-avatar {
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--admin-soft-green);
  border-radius: 8px;
}

.admin-soft-data .admin-user-pill strong {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-content {
  display: grid;
  gap: 12px;
  height: calc(100vh - 58px);
  padding: 16px 18px 22px;
  align-content: start;
}

.admin-soft-data .admin-page-head {
  min-height: 0;
  margin-bottom: -4px;
}

.admin-soft-data .admin-page-actions {
  gap: 8px;
}

.admin-soft-data .admin-subtabs,
.admin-soft-data .admin-tip-box,
.admin-soft-data .admin-search-panel,
.admin-soft-data .admin-result-summary,
.admin-soft-data .admin-create-user-panel,
.admin-soft-data .admin-table-wrap,
.admin-soft-data .admin-pagination,
.admin-soft-data .admin-dashboard-card,
.admin-soft-data .admin-dashboard-grid article,
.admin-soft-data .admin-queue-list article,
.admin-soft-data .metric-grid div,
.admin-soft-data .template-list div,
.admin-soft-data .plan-grid article,
.admin-soft-data .admin-model-summary > div,
.admin-soft-data .admin-action-panel,
.admin-soft-data .admin-drawer,
.admin-soft-data .admin-detail-row {
  color: var(--admin-soft-text);
  background: var(--admin-soft-panel);
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
  box-shadow: var(--admin-soft-shadow-sm);
}

.admin-soft-data .admin-dashboard-card {
  padding: 12px;
}

.admin-soft-data .admin-dashboard-workbench {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-soft-data .admin-dashboard-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.admin-soft-data .admin-dashboard-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 16px 58px 14px 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(22, 165, 111, 0.1), rgba(255, 255, 255, 0.94) 55%),
    #fff;
}

.admin-soft-data .admin-dashboard-grid article::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: var(--tile-color, var(--admin-soft-green));
}

.admin-soft-data .admin-dashboard-grid article::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  content: "";
  background: color-mix(in srgb, var(--tile-color, var(--admin-soft-green)) 11%, transparent);
  border-radius: 999px;
}

.admin-soft-data .admin-stat-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  background: var(--tile-color, var(--admin-soft-green));
  border-radius: 8px;
}

.admin-soft-data .admin-dashboard-grid article:nth-child(2) {
  --tile-color: var(--admin-soft-blue);
  background: linear-gradient(135deg, rgba(47, 127, 216, 0.1), rgba(255, 255, 255, 0.94) 55%), #fff;
}

.admin-soft-data .admin-dashboard-grid article:nth-child(3),
.admin-soft-data .admin-dashboard-grid article:nth-child(4) {
  --tile-color: var(--admin-soft-orange);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.94) 55%), #fff;
}

.admin-soft-data .admin-dashboard-grid article:nth-child(6),
.admin-soft-data .admin-dashboard-grid article:nth-child(8) {
  --tile-color: var(--admin-soft-purple);
  background: linear-gradient(135deg, rgba(109, 93, 252, 0.1), rgba(255, 255, 255, 0.94) 55%), #fff;
}

.admin-soft-data .admin-dashboard-grid article.warn {
  --tile-color: var(--admin-soft-orange);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.13), rgba(255, 255, 255, 0.94) 58%), #fff;
}

.admin-soft-data .admin-dashboard-grid article.danger {
  --tile-color: var(--admin-soft-red);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(255, 255, 255, 0.94) 58%), #fff;
}

.admin-soft-data .admin-dashboard-grid span,
.admin-soft-data .admin-dashboard-grid small,
.admin-soft-data .admin-queue-list small,
.admin-soft-data .admin-empty-note,
.admin-soft-data .metric-grid span,
.admin-soft-data .template-list span,
.admin-soft-data .plan-grid p,
.admin-soft-data .admin-model-summary span,
.admin-soft-data .admin-model-summary p,
.admin-soft-data .admin-action-note,
.admin-soft-data .admin-detail-row span,
.admin-soft-data .admin-pagination span,
.admin-soft-data .admin-result-summary span,
.admin-soft-data .admin-result-summary small,
.admin-soft-data .admin-tip-box ul {
  color: var(--admin-soft-muted);
}

.admin-soft-data .admin-dashboard-grid span {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.admin-soft-data .admin-dashboard-grid strong {
  color: var(--admin-soft-text);
  font-size: 24px;
  line-height: 1.05;
}

.admin-soft-data .admin-dashboard-grid small {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.admin-soft-data .admin-monitor-metrics {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-soft-data .admin-monitor-metrics div {
  min-height: 92px;
  padding: 16px 18px 14px;
}

.admin-soft-data .admin-monitor-metrics span {
  font-size: 14px;
  font-weight: 850;
}

.admin-soft-data .admin-monitor-metrics strong {
  margin-top: 10px;
  font-size: 25px;
  line-height: 1.05;
}

.admin-soft-data .admin-dashboard-main {
  display: grid;
  grid-template-columns: minmax(230px, 0.92fr) minmax(300px, 1.36fr) minmax(220px, 0.88fr);
  grid-template-areas:
    "alert status monitor"
    "orders orders users"
    "orders orders audit"
    "orders orders system";
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.admin-soft-data .admin-dashboard-main > * {
  min-width: 0;
}

.admin-soft-data .admin-dashboard-card-head {
  min-height: 26px;
  margin-bottom: 8px;
}

.admin-soft-data .admin-dashboard-card-head strong,
.admin-soft-data .admin-section-head strong,
.admin-soft-data .admin-console h3,
.admin-soft-data .admin-console h4,
.admin-soft-data .admin-queue-list strong,
.admin-soft-data .metric-grid strong,
.admin-soft-data .template-list strong,
.admin-soft-data .plan-grid strong,
.admin-soft-data .admin-model-summary strong,
.admin-soft-data .admin-drawer-head strong,
.admin-soft-data .admin-detail-row strong {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-alert-card {
  grid-area: alert;
}

.admin-soft-data .admin-status-board {
  grid-area: status;
}

.admin-soft-data .admin-credit-audit-card {
  grid-area: audit;
}

.admin-soft-data .admin-credit-audit-card.danger {
  border-color: #fecaca;
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.12);
}

.admin-soft-data .admin-monitor-summary {
  grid-area: monitor;
}

.admin-soft-data .admin-recent-orders {
  grid-area: orders;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.admin-soft-data .admin-recent-orders,
.admin-soft-data .admin-user-activity,
.admin-soft-data .admin-credit-audit-card,
.admin-soft-data .admin-system-summary {
  height: 100%;
}

.admin-soft-data .admin-user-activity {
  grid-area: users;
}

.admin-soft-data .admin-system-summary {
  grid-area: system;
}

.admin-soft-data .admin-alert-list {
  display: grid;
  gap: 6px;
}

.admin-soft-data .admin-alert-list article {
  display: grid;
  grid-template-columns: 14px 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 2px 0;
}

.admin-soft-data .admin-alert-list article + article {
  border-top: 1px solid #edf3f1;
}

.admin-soft-data .admin-alert-list i {
  display: grid;
  width: 10px;
  height: 10px;
  place-items: center;
  color: transparent;
  border: 2px solid var(--admin-soft-green);
  border-radius: 999px;
}

.admin-soft-data .admin-alert-list article.warn i {
  border-color: var(--admin-soft-orange);
}

.admin-soft-data .admin-alert-list article.danger i {
  border-color: var(--admin-soft-red);
}

.admin-soft-data .admin-alert-list span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: var(--admin-soft-green);
  border-radius: 999px;
}

.admin-soft-data .admin-alert-list article.warn span {
  background: var(--admin-soft-orange);
}

.admin-soft-data .admin-alert-list article.danger span {
  background: var(--admin-soft-red);
}

.admin-soft-data .admin-alert-list strong {
  display: block;
  overflow: hidden;
  color: var(--admin-soft-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-alert-list small {
  display: block;
  overflow: hidden;
  color: var(--admin-soft-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-status-grid article {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 10px;
  background: var(--admin-soft-green-soft);
  border-radius: 8px;
}

.admin-soft-data .admin-status-grid article.blue {
  background: var(--admin-soft-blue-soft);
}

.admin-soft-data .admin-status-grid article.orange {
  background: var(--admin-soft-orange-soft);
}

.admin-soft-data .admin-status-grid article.red {
  background: #f7f7f7;
}

.admin-soft-data .admin-status-grid span {
  color: #2d4056;
  font-size: 13px;
  font-weight: 900;
}

.admin-soft-data .admin-status-grid strong {
  color: var(--admin-soft-text);
  font-size: 20px;
  line-height: 1;
}

.admin-soft-data .admin-status-grid small {
  justify-self: end;
  margin-top: -24px;
  color: #4b5d72;
  font-size: 12px;
  font-weight: 850;
}

.admin-soft-data .admin-status-grid b {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(19, 32, 51, 0.08);
  border-radius: 999px;
}

.admin-soft-data .admin-status-grid b i {
  display: block;
  height: 100%;
  background: var(--admin-soft-green);
  border-radius: inherit;
}

.admin-soft-data .admin-status-grid .blue b i {
  background: var(--admin-soft-blue);
}

.admin-soft-data .admin-status-grid .orange b i {
  background: var(--admin-soft-orange);
}

.admin-soft-data .admin-status-grid .red b i {
  background: var(--admin-soft-red);
}

.admin-soft-data .admin-audit-list {
  display: grid;
  gap: 8px;
}

.admin-soft-data .admin-audit-list article,
.admin-soft-data .admin-audit-banner {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}

.admin-soft-data .admin-audit-banner.success {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.admin-soft-data .admin-audit-banner.danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.admin-soft-data .admin-audit-list span,
.admin-soft-data .admin-audit-list small,
.admin-soft-data .admin-audit-banner span {
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-audit-list strong,
.admin-soft-data .admin-audit-banner strong {
  color: var(--admin-soft-text);
  font-size: 13px;
}

.admin-soft-data .admin-user-list {
  display: grid;
  gap: 8px;
}

.admin-soft-data .admin-user-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-soft-data .admin-user-list b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #8a4d12;
  font-size: 13px;
  font-weight: 950;
  background: #ffe7c2;
  border-radius: 999px;
}

.admin-soft-data .admin-user-list strong,
.admin-soft-data .admin-user-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-user-list strong {
  color: var(--admin-soft-text);
  font-size: 13px;
}

.admin-soft-data .admin-user-list small {
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-user-list span {
  color: var(--admin-soft-green-dark);
  font-size: 12px;
  font-weight: 900;
}

.admin-soft-data .admin-system-summary dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px 18px;
  margin: 0;
}

.admin-soft-data .admin-system-summary div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-soft-data .admin-system-summary dt,
.admin-soft-data .admin-system-summary dd {
  margin: 0;
  font-size: 12px;
  font-weight: 850;
}

.admin-soft-data .admin-system-summary dt {
  color: var(--admin-soft-muted);
}

.admin-soft-data .admin-system-summary dd {
  min-width: 0;
  color: var(--admin-soft-text);
  overflow-wrap: anywhere;
}

.admin-soft-data .admin-system-summary dd span {
  margin-left: 8px;
  padding: 2px 7px;
  color: var(--admin-soft-green-dark);
  background: #def7e8;
  border-radius: 999px;
}

.admin-soft-data .admin-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-soft-data .admin-cleanup-guard {
  display: grid;
  gap: 10px;
}

.admin-soft-data .admin-cleanup-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-cleanup-scope-grid article {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-cleanup-scope-grid span,
.admin-soft-data .admin-cleanup-scope-grid small {
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-cleanup-scope-grid strong {
  color: var(--admin-soft-text);
  font-size: 16px;
}

.admin-soft-data .admin-cleanup-boundary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-cleanup-boundary article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-cleanup-boundary article.warn {
  background: #fff9ed;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-cleanup-boundary strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-cleanup-boundary span {
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.admin-soft-data .admin-cleanup-risk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #f0fbf5;
  border: 1px solid #bfe8d2;
  border-radius: 8px;
}

.admin-soft-data .admin-cleanup-risk strong {
  color: var(--admin-soft-green-dark);
  font-size: 14px;
  font-weight: 950;
}

.admin-soft-data .admin-cleanup-risk span {
  color: var(--admin-soft-muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.admin-soft-data .admin-cleanup-risk.warn {
  background: #fff9ed;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-cleanup-risk.warn strong {
  color: #a86405;
}

.admin-soft-data .admin-cleanup-risk.danger {
  background: #fff1f1;
  border-color: #fecaca;
}

.admin-soft-data .admin-cleanup-risk.danger strong {
  color: #b42318;
}

.admin-soft-data .admin-settlement-note {
  display: grid;
  grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #385069;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-settlement-note strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-settlement-note span {
  min-width: 0;
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-soft-data .admin-settlement-note.paid {
  background: #f0fbf5;
  border-color: #bfe8d2;
}

.admin-soft-data .admin-settlement-note.pending {
  background: #fff9ed;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-settlement-note.danger {
  background: #fff1f1;
  border-color: #fecaca;
}

.admin-soft-data .admin-monitor-grid dl,
.admin-soft-data .admin-monitor-summary dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-soft-data .admin-monitor-grid dl div,
.admin-soft-data .admin-monitor-summary dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
}

.admin-soft-data .admin-monitor-grid dt,
.admin-soft-data .admin-monitor-summary dt {
  color: #64748b;
  font-size: 12px;
}

.admin-soft-data .admin-monitor-grid dd,
.admin-soft-data .admin-monitor-summary dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  text-align: right;
}

.admin-soft-data .admin-runtime-backups {
  margin-bottom: 14px;
}

.admin-soft-data .admin-runtime-backup-list span,
.admin-soft-data .admin-runtime-backup-list small {
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-runtime-backup-list {
  display: grid;
  gap: 8px;
}

.admin-soft-data .admin-runtime-backup-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 80px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-runtime-backup-list strong {
  overflow: hidden;
  color: var(--admin-soft-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-job-preview-panel,
.admin-soft-data .admin-generation-panel,
.admin-soft-data .admin-job-assets-panel,
.admin-soft-data .admin-failure-advice {
  grid-column: 1 / -1;
}

.admin-soft-data .admin-job-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-soft-data .admin-job-preview-grid figure {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.admin-soft-data .admin-job-preview-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f8fbf9;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-job-preview-grid figcaption {
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-soft-data .admin-asset-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-asset-status-grid article {
  display: grid;
  gap: 3px;
  padding: 9px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-asset-status-grid article.ready {
  border-color: #b7dfcb;
  background: #f4fbf7;
}

.admin-soft-data .admin-asset-status-grid article.missing {
  border-color: #fed7aa;
  background: #fffaf3;
}

.admin-soft-data .admin-asset-status-grid span,
.admin-soft-data .admin-asset-status-grid small {
  overflow: hidden;
  color: var(--admin-soft-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-asset-status-grid strong {
  color: var(--admin-soft-text);
  font-size: 14px;
}

.admin-soft-data .admin-generation-snapshot {
  display: grid;
  gap: 10px;
}

.admin-soft-data .admin-generation-snapshot dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-soft-data .admin-generation-snapshot dl div {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  background: #f8fbf9;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-generation-snapshot dt,
.admin-soft-data .admin-generation-snapshot dd {
  min-width: 0;
  margin: 0;
}

.admin-soft-data .admin-generation-snapshot dt {
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-generation-snapshot dd {
  overflow: hidden;
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-snapshot-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-soft-data .admin-snapshot-packs span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  padding: 5px 8px;
  color: var(--admin-soft-text);
  font-size: 12px;
  font-weight: 900;
  background: #f3f8f6;
  border: 1px solid var(--admin-soft-line);
  border-radius: 999px;
}

.admin-soft-data .admin-snapshot-packs small {
  color: var(--admin-soft-muted);
  font-size: 11px;
}

.admin-soft-data .admin-failure-advice {
  border-color: #fed7aa;
  background: #fffaf3;
}

.admin-soft-data .admin-failure-advice.danger {
  border-color: #fecaca;
  background: #fff5f5;
}

.admin-soft-data .admin-failure-advice p {
  margin: 0;
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 800;
}

.admin-soft-data .admin-failure-advice small {
  color: var(--admin-soft-muted);
  overflow-wrap: anywhere;
}

.admin-soft-data .admin-failure-action-strip {
  display: grid;
  grid-template-columns: minmax(92px, max-content) minmax(0, 1fr) minmax(110px, max-content);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  color: #7a4b07;
  background: #fff9ed;
  border: 1px solid #f6d6a7;
  border-radius: 8px;
}

.admin-soft-data .admin-failure-action-strip strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-failure-action-strip span,
.admin-soft-data .admin-failure-action-strip small {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-soft-data .admin-failure-action-strip small {
  color: var(--admin-soft-muted);
}

.admin-soft-data .admin-failure-action-strip.danger {
  color: #9f1d1d;
  background: #fff1f1;
  border-color: #fecaca;
}

.admin-soft-data .admin-recent-orders .admin-table-wrap {
  height: auto;
  min-height: 0;
  overflow-x: hidden;
}

.admin-soft-data .admin-recent-orders table {
  height: 100%;
}

.admin-soft-data .admin-recent-orders table {
  min-width: 0;
  table-layout: fixed;
}

.admin-soft-data .admin-recent-orders tbody {
  vertical-align: top;
}

.admin-soft-data .admin-recent-orders th,
.admin-soft-data .admin-recent-orders td {
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.25;
}

.admin-soft-data .admin-recent-orders th:nth-child(1),
.admin-soft-data .admin-recent-orders td:nth-child(1) {
  width: 25%;
}

.admin-soft-data .admin-recent-orders th:nth-child(2),
.admin-soft-data .admin-recent-orders td:nth-child(2) {
  width: 13%;
}

.admin-soft-data .admin-recent-orders th:nth-child(3),
.admin-soft-data .admin-recent-orders td:nth-child(3) {
  width: 21%;
}

.admin-soft-data .admin-recent-orders th:nth-child(4),
.admin-soft-data .admin-recent-orders td:nth-child(4) {
  width: 9%;
  text-align: center;
}

.admin-soft-data .admin-recent-orders th:nth-child(5),
.admin-soft-data .admin-recent-orders td:nth-child(5) {
  width: 11%;
}

.admin-soft-data .admin-recent-orders th:nth-child(6),
.admin-soft-data .admin-recent-orders td:nth-child(6) {
  width: 15%;
}

.admin-soft-data .admin-recent-orders th:nth-child(7),
.admin-soft-data .admin-recent-orders td:nth-child(7) {
  width: 6%;
  text-align: right;
}

.admin-soft-data .admin-recent-orders td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-soft-data .admin-user-activity .admin-dashboard-card-head strong {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}

.admin-soft-data .admin-user-activity .admin-dashboard-card-head strong span {
  color: var(--admin-soft-green);
  font-size: 12px;
}

.admin-soft-data .admin-subtabs {
  gap: 8px;
  margin: 0;
  padding: 8px;
}

.admin-soft-data .admin-subtabs button,
.admin-soft-data .admin-pagination button,
.admin-soft-data .admin-pagination-status select {
  min-height: 34px;
  color: #385069;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-subtabs button.active {
  color: #fff;
  background: var(--admin-soft-green);
  border-color: var(--admin-soft-green);
  box-shadow: none;
}

.admin-soft-data .admin-tip-box {
  margin: 0;
  padding: 12px 14px;
  background: #f1fbf6;
  border-color: #c8ead8;
}

.admin-soft-data .admin-tip-box h4 {
  color: var(--admin-soft-green-dark);
}

.admin-soft-data .admin-search-panel {
  margin: 0;
  padding: 14px;
  background: var(--admin-soft-panel);
}

.admin-soft-data .admin-search-panel label,
.admin-soft-data .admin-action-panel label,
.admin-soft-data .settings-grid label {
  color: #30425a;
}

.admin-soft-data .admin-search-panel input,
.admin-soft-data .admin-search-panel select,
.admin-soft-data .admin-action-panel input,
.admin-soft-data .admin-action-panel select,
.admin-soft-data .admin-action-panel textarea,
.admin-soft-data .admin-console .settings-grid input,
.admin-soft-data .admin-console .settings-grid select {
  color: var(--admin-soft-text);
  background: #fff;
  border: 1px solid #cfddd9;
  border-radius: 8px;
}

.admin-soft-data .admin-search-panel input[readonly] {
  color: #7a8796;
  background: #f4f7f7;
}

.admin-soft-data .admin-search-panel input::placeholder {
  color: #8795a6;
}

.admin-soft-data .admin-search-panel input:focus,
.admin-soft-data .admin-search-panel select:focus,
.admin-soft-data .admin-action-panel input:focus,
.admin-soft-data .admin-action-panel select:focus,
.admin-soft-data .admin-action-panel textarea:focus,
.admin-soft-data .admin-console .settings-grid input:focus,
.admin-soft-data .admin-console .settings-grid select:focus {
  outline: 0;
  border-color: var(--admin-soft-green);
  box-shadow: 0 0 0 3px rgba(22, 165, 111, 0.14);
}

.admin-soft-data .admin-result-summary {
  margin: 0;
  padding: 12px 14px;
}

.admin-soft-data .admin-result-summary strong,
.admin-soft-data .admin-result-summary li strong {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-result-summary li {
  background: #f4fbf7;
  border: 1px solid #d6eae0;
  border-radius: 999px;
}

.admin-soft-data .admin-result-summary li.active {
  background: #eaf8f0;
  border-color: #a8dbc2;
}

.admin-soft-data .admin-pagination-empty {
  background: #f8fbfa;
}

.admin-soft-data .admin-table-wrap {
  background: #fff;
  box-shadow: var(--admin-soft-shadow-sm);
  scrollbar-color: #b8c9d7 #eef4f2;
}

.admin-soft-data .admin-empty-state {
  color: var(--admin-soft-muted);
  background: #f8fcfb;
  border-color: #d8e8e1;
}

.admin-soft-data .admin-empty-state strong {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-table-wrap::-webkit-scrollbar-track {
  background: #eef4f2;
}

.admin-soft-data .admin-table-wrap::-webkit-scrollbar-thumb {
  background: #b8c9d7;
  border-color: #eef4f2;
}

.admin-soft-data .admin-console table {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-console th,
.admin-soft-data .admin-console td {
  border-bottom: 1px solid #edf3f1;
}

.admin-soft-data .admin-console th {
  color: #5f7085;
  background: #f4faf7;
}

.admin-soft-data .admin-console td {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-console tbody tr:hover {
  background: #f6fbf8;
}

.admin-soft-data .admin-action-table th:last-child,
.admin-soft-data .admin-action-table td:last-child {
  min-width: 132px;
  background: #fff;
  border-left-color: var(--admin-soft-line);
  box-shadow: -16px 0 24px rgba(42, 69, 96, 0.08);
}

.admin-soft-data .admin-action-table th:last-child {
  background: #f4faf7;
}

.admin-soft-data .admin-action-table tbody tr:hover td:last-child {
  background: #f6fbf8;
}

.admin-soft-data .admin-link-button {
  color: var(--admin-soft-green-dark);
}

.admin-soft-data .admin-link-button.danger {
  color: #dc2626;
}

.admin-soft-data .admin-table-actions,
.admin-soft-data .admin-operation-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, max-content));
  gap: 6px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}

.admin-soft-data .admin-table-actions .admin-link-button {
  min-height: 28px;
  padding: 0 4px;
  border-radius: 6px;
  white-space: nowrap;
}

.admin-soft-data .tag {
  border-radius: 999px;
}

.admin-soft-data .tag.paid {
  color: #087d52;
  background: #dff7e9;
}

.admin-soft-data .tag.pending {
  color: #9a5a00;
  background: #fff1c7;
}

.admin-soft-data .tag.danger {
  color: #b91c1c;
  background: #ffe4e6;
}

.admin-soft-data .metric-grid {
  gap: 14px;
  margin-top: 0;
}

.admin-soft-data .metric-grid div,
.admin-soft-data .plan-grid article,
.admin-soft-data .template-list div,
.admin-soft-data .admin-model-summary > div {
  background: #fff;
}

.admin-soft-data .metric-grid div:nth-child(4n + 1),
.admin-soft-data .plan-grid article:nth-child(4n + 1) {
  border-top: 4px solid var(--admin-soft-green);
}

.admin-soft-data .metric-grid div:nth-child(4n + 2),
.admin-soft-data .plan-grid article:nth-child(4n + 2) {
  border-top: 4px solid var(--admin-soft-blue);
}

.admin-soft-data .metric-grid div:nth-child(4n + 3),
.admin-soft-data .plan-grid article:nth-child(4n + 3) {
  border-top: 4px solid var(--admin-soft-orange);
}

.admin-soft-data .metric-grid div:nth-child(4n),
.admin-soft-data .plan-grid article:nth-child(4n) {
  border-top: 4px solid var(--admin-soft-purple);
}

.admin-soft-data .metric-grid strong,
.admin-soft-data .plan-grid strong {
  color: var(--admin-soft-text);
}

.admin-soft-data .admin-card-actions {
  gap: 8px;
}

.admin-soft-data .admin-console .button,
.admin-soft-data .admin-console .button.small {
  color: #2f4158;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
  box-shadow: none;
}

.admin-soft-data .admin-console .button:hover,
.admin-soft-data .admin-console .button.small:hover {
  color: var(--admin-soft-green-dark);
  border-color: #bce5cf;
  background: #f4fbf7;
}

.admin-soft-data .admin-console .button.primary {
  color: #fff;
  background: var(--admin-soft-green);
  border-color: var(--admin-soft-green-dark);
}

.admin-soft-data .admin-console .button.danger,
.admin-soft-data .admin-console .button.small.danger {
  color: #fff;
  background: var(--admin-soft-red);
  border-color: #dc2626;
}

.admin-soft-data .admin-console .button.admin-cleanup-confirm-ready {
  background: #b91c1c;
  border-color: #991b1b;
}

.admin-soft-data .admin-pagination {
  margin-top: 0;
}

.admin-soft-data .admin-create-user-panel {
  margin: 0;
  background: #f8fcfb;
}

.admin-soft-data .subheading {
  margin: 4px 0 -4px;
  color: var(--admin-soft-text);
  font-size: 18px;
}

.admin-soft-data .admin-drawer-backdrop {
  background: rgba(19, 32, 51, 0.22);
  backdrop-filter: blur(4px);
}

.admin-soft-data .admin-drawer {
  width: min(760px, 100%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: #fbfffc;
  border-left-color: var(--admin-soft-line);
  box-shadow: -24px 0 60px rgba(42, 69, 96, 0.18);
}

.admin-soft-data .admin-drawer-head {
  min-height: 52px;
  padding: 0 16px;
  background: #fff;
  border-bottom-color: var(--admin-soft-line);
}

.admin-soft-data .admin-drawer-head strong {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-drawer-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.admin-soft-data .admin-drawer-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 4px;
  background: #fbfffc;
}

.admin-soft-data .admin-drawer-summary article {
  gap: 4px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
  box-shadow: none;
}

.admin-soft-data .admin-drawer-summary article.success {
  background: #f0fbf5;
  border-color: #bfe8d2;
}

.admin-soft-data .admin-drawer-summary article.warn {
  background: #fff9ed;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-drawer-summary article.danger {
  background: #fff1f1;
  border-color: #ffc7c7;
}

.admin-soft-data .admin-drawer-summary span {
  color: var(--admin-soft-muted);
  font-size: 11px;
}

.admin-soft-data .admin-drawer-summary strong {
  color: var(--admin-soft-text);
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.3;
}

.admin-soft-data .admin-action-panel {
  background: #fff;
}

.admin-soft-data .admin-drawer-workflow {
  grid-column: 1 / -1;
  background: #f8fcfb;
}

.admin-soft-data .admin-drawer-workflow ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-soft-data .admin-drawer-workflow li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-left: 4px solid var(--admin-soft-green);
  border-radius: 8px;
}

.admin-soft-data .admin-drawer-workflow li.warn {
  border-left-color: var(--admin-soft-orange);
}

.admin-soft-data .admin-drawer-workflow li.danger {
  border-left-color: var(--admin-soft-red);
}

.admin-soft-data .admin-drawer-workflow strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-drawer-workflow span {
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.admin-soft-data .admin-relation-panel {
  grid-column: 1 / -1;
}

.admin-soft-data .admin-job-preview-panel,
.admin-soft-data .admin-generation-panel,
.admin-soft-data .admin-job-assets-panel,
.admin-soft-data .admin-failure-advice,
.admin-soft-data .admin-failure-action-strip,
.admin-soft-data .admin-user-service-summary {
  grid-column: 1 / -1;
}

.admin-soft-data .admin-relation-list {
  display: grid;
  gap: 6px;
}

.admin-soft-data .admin-relation-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #f8fbf9;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-relation-list strong,
.admin-soft-data .admin-relation-columns > div > strong {
  color: var(--admin-soft-text);
  font-size: 13px;
}

.admin-soft-data .admin-relation-list small {
  display: block;
  margin-top: 2px;
  color: var(--admin-soft-muted);
  font-size: 12px;
}

.admin-soft-data .admin-relation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-settlement-mini {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-settlement-mini strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-settlement-mini span {
  overflow: hidden;
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-user-service-summary {
  background: #f8fcfb;
  border-color: var(--admin-soft-line);
}

.admin-soft-data .admin-user-service-summary.warn {
  background: #fff9ed;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-user-service-summary > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-user-service-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-user-service-summary span,
.admin-soft-data .admin-user-service-summary small {
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-soft-data .admin-user-service-summary strong {
  color: var(--admin-soft-text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.3;
}

.admin-soft-data .admin-detail-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-detail-section h4 {
  margin: 0;
  color: var(--admin-soft-text);
  font-size: 14px;
  font-weight: 950;
}

.admin-soft-data .admin-detail-section > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-detail-section.secondary {
  background: #f8fcfb;
}

.admin-soft-data .admin-detail-row {
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  box-shadow: none;
}

.admin-soft-data .admin-detail-row span {
  font-size: 12px;
}

.admin-soft-data .admin-detail-row strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.admin-soft-data .admin-drawer-actions,
.admin-soft-data .admin-drawer-body .form-message {
  grid-column: 1 / -1;
}

.admin-soft-data .admin-drawer-actions {
  gap: 8px;
  margin-top: 0;
}

.admin-soft-data .admin-drawer-actions .admin-action-panel {
  gap: 8px;
  padding: 10px;
}

.admin-soft-data .admin-drawer-actions .admin-action-panel h4 {
  font-size: 15px;
}

.admin-soft-data .admin-drawer-actions .admin-action-panel input,
.admin-soft-data .admin-drawer-actions .admin-action-panel select {
  min-height: 32px;
  font-size: 13px;
}

.admin-soft-data .admin-drawer-actions .admin-action-panel textarea {
  min-height: 68px;
  padding-top: 8px;
  font-size: 13px;
}

.admin-soft-data .admin-drawer-actions .admin-action-row,
.admin-soft-data .admin-drawer-actions .admin-inline-grid {
  gap: 8px;
}

.admin-soft-data .admin-drawer-actions .admin-action-row-primary {
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  justify-content: start;
}

.admin-soft-data .admin-drawer-actions .admin-action-row-secondary {
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  padding: 8px;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-drawer-actions .admin-action-row-danger {
  grid-template-columns: minmax(130px, max-content);
  padding: 8px 0 0;
  border-top: 1px solid #ffd4d4;
}

.admin-soft-data .admin-drawer-actions .button {
  min-height: 32px;
  font-size: 13px;
}

.admin-soft-data .admin-console .form-message {
  color: var(--admin-soft-muted);
}

.admin-soft-data.admin-sidebar-collapsed .admin-logo {
  padding: 10px;
}

.admin-soft-data.admin-sidebar-collapsed .admin-tab {
  padding: 0 8px;
}

@media (max-width: 1180px) {
  .admin-soft-data .admin-dashboard-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .admin-soft-data .admin-dashboard-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "alert monitor"
      "status status"
      "orders users"
      "orders audit"
      "orders system";
  }

  .admin-soft-data .admin-queue-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .admin-soft-data .admin-console:not(.hidden) {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-sidebar {
    position: static;
    min-height: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--admin-soft-line);
  }

  .admin-soft-data .admin-logo {
    display: none;
  }

  .admin-soft-data .admin-menu {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .admin-soft-data .admin-tab {
    min-width: 136px;
  }

  .admin-soft-data .admin-workbench {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .admin-soft-data .admin-console-top {
    margin: 12px;
  }

  .admin-soft-data .admin-content {
    height: auto;
    padding: 0 12px 28px;
  }

  .admin-soft-data .admin-search-panel,
  .admin-soft-data .admin-user-search,
  .admin-soft-data .admin-queue-search,
  .admin-soft-data .admin-wallet-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-soft-data .admin-form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-soft-data:not(.admin-authenticated):not(:has(.admin-console:not(.hidden))) .admin {
    width: min(100% - 28px, 520px);
    min-height: auto;
    padding-top: 20px;
  }

  .admin-soft-data .admin-login-heading .page-title {
    font-size: clamp(28px, 9vw, 36px);
  }

  .admin-soft-data .admin-console-top {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .admin-soft-data .admin-top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .admin-soft-data .admin-global-search {
    width: 100%;
  }

  .admin-soft-data .admin-global-search input {
    width: 100%;
  }

  .admin-soft-data .admin-user-pill {
    max-width: 100%;
  }

  .admin-soft-data .admin-action-table th:last-child,
  .admin-soft-data .admin-action-table td:last-child {
    position: static;
    min-width: 0;
    box-shadow: none;
  }

  .admin-soft-data .admin-table-actions,
  .admin-soft-data .admin-operation-group {
    justify-content: start;
  }

  .admin-soft-data .admin-dashboard-grid,
  .admin-soft-data .admin-dashboard-main,
  .admin-soft-data .admin-dashboard-columns,
  .admin-soft-data .admin-queue-list.compact,
  .admin-soft-data .metric-grid,
  .admin-soft-data .plan-grid,
  .admin-soft-data .admin-model-summary,
  .admin-soft-data .admin-search-panel,
  .admin-soft-data .admin-user-search,
  .admin-soft-data .admin-queue-search,
  .admin-soft-data .admin-wallet-search,
  .admin-soft-data .settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-monitor-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-soft-data .admin-dashboard-main {
    grid-template-areas:
      "alert"
      "status"
      "monitor"
      "orders"
      "users"
      "audit"
      "system"
      "system";
  }

  .admin-soft-data .admin-page-head,
  .admin-soft-data .admin-result-summary,
  .admin-soft-data .admin-pagination,
  .admin-soft-data .admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-soft-data .admin-drawer-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-soft-data .admin-detail-section > div {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-cleanup-scope-grid,
  .admin-soft-data .admin-cleanup-boundary,
  .admin-soft-data .admin-relation-columns,
  .admin-soft-data .admin-user-service-summary > div,
  .admin-soft-data .admin-drawer-workflow ol {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-failure-action-strip,
  .admin-soft-data .admin-settlement-note {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-job-preview-grid,
  .admin-soft-data .admin-generation-snapshot dl,
  .admin-soft-data .admin-asset-status-grid {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-runtime-backup-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-soft-data .admin-form-actions {
    grid-column: auto;
  }
}

body.mobile-shell {
  min-width: 0;
  padding-bottom: 82px;
  background:
    radial-gradient(circle at 8% 0%, rgba(189, 245, 238, 0.42), transparent 230px),
    linear-gradient(180deg, #fffdf7, #f4fbff 50%, #fffaf1);
}

.mobile-shell .topbar {
  min-height: 58px;
  padding: 8px 12px;
  gap: 10px;
  border-bottom-color: rgba(219, 232, 242, 0.88);
  backdrop-filter: none;
}

.mobile-shell .brand {
  min-width: 0;
  gap: 9px;
}

.mobile-shell .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow:
    4px 4px 0 rgba(255, 209, 102, 0.68),
    0 8px 18px rgba(47, 139, 216, 0.13);
}

.mobile-shell .brand span:not(.brand-mark) {
  min-width: 0;
}

.mobile-shell .brand strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell .brand small {
  overflow: hidden;
  max-width: 210px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell .nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(207, 225, 242, 0.92);
  box-shadow: 0 -14px 34px rgba(32, 46, 72, 0.12);
  backdrop-filter: blur(18px);
}

.mobile-shell .nav > a {
  display: inline-flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 6px 5px;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  border-radius: 15px;
  box-shadow: none;
}

.mobile-shell .nav > a:not(.top-account-chip)::after {
  right: 50%;
  bottom: 5px;
  left: 50%;
  width: 18px;
  margin-left: -9px;
}

.mobile-shell .nav .top-account-chip {
  min-width: 0;
  max-width: none;
  margin-left: 0;
  padding: 5px;
  gap: 2px;
  border-radius: 15px;
}

.mobile-shell .nav .top-account-chip strong {
  max-width: 100%;
  font-size: 12px;
}

.mobile-shell .nav .top-account-chip::before {
  content: "\8D26\53F7";
  color: #17324e;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.mobile-shell .nav .top-account-chip.logged-in::before {
  content: "\6211\7684";
}

.mobile-shell .nav .top-account-chip strong,
.mobile-shell .nav .top-account-chip span,
.mobile-shell .nav .top-account-badge,
.mobile-shell .nav .top-account-wallet {
  display: none;
}

.mobile-shell .top-logout-button {
  display: none;
}

.mobile-shell .home-main .hero,
.mobile-shell .workflow,
.mobile-shell .content-page,
.mobile-shell .delivery-page,
.mobile-shell .showcase-page,
.mobile-shell .auth-page {
  padding: 12px 12px 96px;
}

.mobile-shell .home-main .hero {
  grid-template-columns: 1fr;
  min-height: auto;
  gap: 14px;
  padding-bottom: 18px;
}

.mobile-shell .hero-copy h1,
.mobile-shell .page-main h1.page-title,
.mobile-shell .content-hero .page-title,
.mobile-shell .make-heading .page-title,
.mobile-shell .delivery-hero .page-title,
.mobile-shell .showcase-hero .page-title {
  font-size: clamp(28px, 9vw, 38px);
  line-height: 1.08;
}

.mobile-shell .lead,
.mobile-shell .content-hero p:not(.eyebrow),
.mobile-shell .make-heading > span,
.mobile-shell .delivery-hero p:not(.eyebrow),
.mobile-shell .showcase-hero p:not(.eyebrow) {
  font-size: 13px;
  line-height: 1.55;
}

.mobile-shell .hero-actions,
.mobile-shell .panel-actions,
.mobile-shell .delivery-hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 14px;
}

.mobile-shell .button {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
}

.mobile-shell .hero-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-shell .hero-steps span {
  justify-content: center;
  padding: 8px 10px;
  font-size: 12px;
}

.mobile-shell .hero-board {
  padding: 10px;
  border-radius: 18px;
  width: 100%;
  transform: none;
}

.mobile-shell .hero-board::before {
  display: none;
}

.mobile-shell .hero-sample-image {
  width: min(100%, 360px);
  max-height: none;
  transform: none;
}

.mobile-shell .home-main .home-section,
.mobile-shell .home-main .quick-section,
.mobile-shell .home-main .home-delivery-section {
  padding: 14px 12px 24px;
}

.mobile-shell .delivery-grid,
.mobile-shell .quick-grid {
  grid-template-columns: 1fr;
}

.mobile-shell .content-hero,
.mobile-shell .make-heading,
.mobile-shell .delivery-hero,
.mobile-shell .showcase-hero {
  display: grid;
  max-width: none;
  gap: 10px;
  margin-bottom: 10px;
  padding: 16px;
  border-radius: 20px;
}

.mobile-shell .maker-panel,
.mobile-shell .content-form,
.mobile-shell .content-result,
.mobile-shell .auth-card,
.mobile-shell .delivery-empty-state,
.mobile-shell .showcase-toolbar {
  border-radius: 18px;
}

.mobile-shell .maker-panel,
.mobile-shell .content-form,
.mobile-shell .content-result {
  padding: 13px;
}

.mobile-shell .section-mini-title,
.mobile-shell .choice-head,
.mobile-shell .panel-title-row,
.mobile-shell .result-head,
.mobile-shell .delivery-record-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
}

.mobile-shell .section-mini-title strong,
.mobile-shell .card-title-line strong {
  font-size: 18px;
}

.mobile-shell .scenario-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-shell .scenario-tabs button {
  justify-content: flex-start;
  min-width: 0;
  padding-right: 8px;
}

.mobile-shell .scenario-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-shell .scenario-category-guide {
  grid-template-columns: 1fr;
  padding: 11px;
  border-radius: 16px;
}

.mobile-shell .scenario-guide-examples {
  display: none;
}

.mobile-shell .scenario-strip {
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 10px 0 12px;
}

.mobile-shell .scenario-card {
  min-height: 74px;
  padding: 11px 12px 10px;
}

.mobile-shell .scenario-card strong {
  font-size: 16px;
}

.mobile-shell .scenario-card small {
  font-size: 12px;
}

.mobile-shell .choice-grid,
.mobile-shell .detail-grid,
.mobile-shell .style-grid,
.mobile-shell .effect-choice-grid,
.mobile-shell .effect-choice-buttons,
.mobile-shell .selected-summary-compact,
.mobile-shell .confirm-recommendation,
.mobile-shell .confirm-plan-main,
.mobile-shell .confirm-plan-cards,
.mobile-shell .confirm-body-preview ul,
.mobile-shell .plan-grid {
  grid-template-columns: 1fr;
}

.mobile-shell .field textarea {
  min-height: 112px;
}

.mobile-shell .generate-actions {
  justify-content: stretch;
  padding-top: 12px;
}

.mobile-shell .generate-submit-button {
  min-width: 0;
  min-height: 54px;
  font-size: 18px;
}

.mobile-shell .content-workbench,
.mobile-shell .content-form-grid,
.mobile-shell .auth-layout,
.mobile-shell .delivery-history-summary,
.mobile-shell .delivery-record-card,
.mobile-shell .showcase-grid,
.mobile-shell .showcase-toolbar {
  grid-template-columns: 1fr;
}

.mobile-shell .content-scenario-categories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-shell .content-scenario-list {
  grid-template-columns: 1fr;
  max-height: 46vh;
  padding-right: 2px;
}

.mobile-shell .content-scenario-chip {
  height: auto;
  min-height: 58px;
}

.mobile-shell .content-scenario-chip strong,
.mobile-shell .content-scenario-chip span {
  white-space: normal;
}

.mobile-shell .content-actions {
  gap: 9px;
}

.mobile-shell .content-secondary-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-shell .content-empty-state {
  min-height: 220px;
  padding: 18px;
}

.mobile-shell .content-result {
  min-height: auto;
}

.mobile-shell .delivery-hero,
.mobile-shell .showcase-hero {
  align-items: stretch;
}

.mobile-shell .delivery-refresh-note {
  justify-content: center;
  border-radius: 14px;
}

.mobile-shell .delivery-record-card.current,
.mobile-shell .delivery-record-card {
  display: grid;
  gap: 0;
}

.mobile-shell .delivery-record-preview {
  border-radius: 16px 16px 0 0;
}

.mobile-shell .delivery-record-body {
  padding: 13px;
}

.mobile-shell .delivery-record-actions,
.mobile-shell .delivery-pagination,
.mobile-shell .showcase-pagination {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mobile-shell .delivery-pagination-actions,
.mobile-shell .showcase-pagination-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-shell .showcase-toolbar {
  display: grid;
  gap: 10px;
  padding: 11px;
}

.mobile-shell .showcase-toolbar input {
  width: 100%;
  flex-basis: auto;
}

.mobile-shell .showcase-categories {
  margin: 0 -2px;
  padding-bottom: 4px;
}

.mobile-shell .showcase-card {
  border-radius: 18px;
}

.mobile-shell .auth-layout {
  width: 100%;
  max-width: none;
  gap: 12px;
}

.mobile-shell .auth-layout > .auth-card,
.mobile-shell .auth-account-card {
  width: 100%;
  max-width: none;
}

.mobile-shell .auth-card {
  padding: 14px;
}

.mobile-shell .auth-form-block {
  padding: 12px;
  border-radius: 15px;
}

.mobile-shell .email-code-row {
  grid-template-columns: 1fr;
}

.mobile-shell .recharge-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-shell .recharge-options button {
  min-height: 66px;
  padding: 11px 8px 9px;
}

.mobile-shell .recharge-options strong {
  font-size: 16px;
}

.mobile-shell .quiet-admin-link {
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  min-width: 46px;
  min-height: 34px;
  padding: 7px 11px;
}

.mobile-shell .footer {
  padding: 14px 12px calc(96px + env(safe-area-inset-bottom));
  font-size: 12px;
  white-space: normal;
}

.admin-soft-data .admin-content.admin-list-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 58px);
  padding: 16px 18px 18px;
  overflow: hidden;
}

.admin-soft-data .admin-content.admin-list-content .admin-page-head,
.admin-soft-data .admin-content.admin-list-content .admin-tip-box,
.admin-soft-data .admin-content.admin-list-content .subheading {
  display: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-subtabs button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.admin-soft-data .admin-content.admin-list-content .metric-grid div {
  min-height: 58px;
  padding: 8px 11px;
  border-radius: 10px;
}

.admin-soft-data .admin-content.admin-list-content .metric-grid span {
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-list-content .metric-grid strong {
  margin-top: 4px;
  font-size: 20px;
}

.admin-soft-data .admin-content.admin-list-content .admin-search-panel {
  grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-user-search {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, 0.65fr)) auto;
  align-items: end;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="accounts"] .admin-search-panel {
  padding: 8px 10px;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="accounts"] .admin-search-panel label {
  gap: 4px;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="accounts"] .admin-search-panel input,
.admin-soft-data .admin-content.admin-list-content[data-admin-panel="accounts"] .admin-search-panel select {
  min-height: 32px;
}

.admin-soft-data .admin-content.admin-list-content .admin-search-panel label {
  gap: 5px;
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-list-content .admin-search-panel input,
.admin-soft-data .admin-content.admin-list-content .admin-search-panel select {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .admin-form-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.admin-soft-data .admin-content.admin-list-content .admin-form-actions .button {
  min-width: 68px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary > div {
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: baseline;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary small {
  display: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary span,
.admin-soft-data .admin-content.admin-list-content .admin-result-summary small {
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary strong {
  font-size: 18px;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary ul {
  flex-wrap: nowrap;
  overflow: hidden;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary li {
  flex: 0 1 auto;
  min-height: 24px;
  padding: 0 8px;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary li span,
.admin-soft-data .admin-content.admin-list-content .admin-result-summary li strong {
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-list-content .admin-result-summary li.active {
  flex-shrink: 0;
}

.admin-soft-data .admin-content.admin-list-content .admin-table-wrap {
  flex: 1 1 300px;
  min-height: 0;
  height: auto;
  overflow: auto;
  scrollbar-gutter: stable;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-action-table {
  width: 100%;
  min-width: 980px;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="orders"] .admin-action-table {
  min-width: 1040px;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="accounts"] .admin-action-table {
  min-width: 980px;
}

.admin-soft-data .admin-content.admin-list-content[data-admin-panel="works"] .admin-action-table {
  min-width: 1060px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="logs"] .admin-log-table {
  min-width: 980px;
}

.admin-soft-data .admin-content.admin-list-content .admin-console th,
.admin-soft-data .admin-content.admin-list-content .admin-console td,
.admin-soft-data .admin-content.admin-list-content th,
.admin-soft-data .admin-content.admin-list-content td {
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.25;
}

.admin-soft-data .admin-content.admin-list-content .admin-action-table th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.admin-soft-data .admin-content.admin-list-content .admin-action-table th:last-child {
  right: 0;
  z-index: 5;
}

.admin-soft-data .admin-content.admin-list-content .admin-action-table td:nth-child(1) {
  font-weight: 900;
}

.admin-soft-data .admin-content.admin-list-content .admin-action-table td:nth-child(2),
.admin-soft-data .admin-content.admin-list-content .admin-action-table td:nth-child(3) {
  max-width: 220px;
}

.admin-soft-data .admin-entity-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-soft-data .admin-entity-cell strong {
  overflow: hidden;
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-entity-cell small {
  overflow: hidden;
  color: var(--admin-soft-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-entity-cell.success strong {
  color: var(--admin-soft-green-dark);
}

.admin-soft-data .admin-entity-cell.warn strong {
  color: #b7791f;
}

.admin-soft-data .admin-entity-cell.danger strong {
  color: #b42318;
}

.admin-soft-data .admin-soft-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 9px;
  overflow: hidden;
  color: #385069;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #eef6f3;
  border: 1px solid var(--admin-soft-line);
  border-radius: 999px;
}

.admin-soft-data .admin-soft-tag.success {
  color: var(--admin-soft-green-dark);
  background: #e6f8ee;
  border-color: #bfe8d2;
}

.admin-soft-data .admin-soft-tag.warn {
  color: #a86405;
  background: #fff7e8;
  border-color: #f6d6a7;
}

.admin-soft-data .admin-soft-tag.danger {
  color: #b42318;
  background: #fff1f1;
  border-color: #fecaca;
}

.admin-soft-data .admin-content.admin-list-content .admin-table-actions {
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(46px, max-content));
  justify-content: end;
}

.admin-soft-data .admin-content.admin-list-content .admin-link-button {
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .tag {
  padding: 4px 9px;
  font-size: 12px;
}

.admin-soft-data .admin-action-table td,
.admin-soft-data .admin-log-table td,
.admin-soft-data .admin-detail-section,
.admin-soft-data .admin-detail-section > div,
.admin-soft-data .admin-cleanup-risk,
.admin-soft-data .admin-cleanup-risk span,
.admin-soft-data .admin-cleanup-boundary,
.admin-soft-data .admin-cleanup-boundary span,
.admin-soft-data .admin-drawer-workflow,
.admin-soft-data .admin-drawer-workflow span,
.admin-soft-data .admin-settlement-mini,
.admin-soft-data .admin-empty-state {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-soft-data .admin-action-table .admin-table-actions,
.admin-soft-data .admin-log-table .admin-table-actions {
  overflow-wrap: normal;
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination {
  align-self: end;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination-empty {
  color: var(--admin-soft-muted);
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination span {
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination-status {
  gap: 6px 10px;
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination-status label {
  gap: 6px;
}

.admin-soft-data .admin-content.admin-list-content .admin-pagination-status select,
.admin-soft-data .admin-content.admin-list-content .admin-pagination button {
  min-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-list-content .form-message {
  min-height: 0;
  margin: 0;
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-list-content .admin-create-user-panel {
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-list-content .admin-create-user-form {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content {
  gap: 10px;
  padding: 16px 18px 22px;
  overflow: auto;
}

.admin-soft-data .admin-content.admin-compact-content .admin-page-head,
.admin-soft-data .admin-content.admin-compact-content .admin-tip-box {
  display: none;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 240px));
  justify-content: start;
  gap: 10px;
  margin: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 190px));
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid div {
  min-height: 74px;
  padding: 14px 16px 12px;
  border-top-width: 3px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid div {
  min-height: 58px;
  padding: 9px 12px;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid span {
  font-size: 13px;
  line-height: 1.25;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid strong {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid strong {
  margin-top: 4px;
  font-size: 19px;
}

.admin-soft-data .admin-content.admin-compact-content .subheading {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.25;
}

.admin-soft-data .admin-content.admin-compact-content .admin-search-panel,
.admin-soft-data .admin-content.admin-compact-content .admin-action-panel,
.admin-soft-data .admin-content.admin-compact-content .admin-create-user-panel {
  gap: 10px 12px;
  padding: 12px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content .admin-search-panel {
  grid-template-columns: repeat(auto-fit, minmax(170px, 240px));
  justify-content: start;
  max-width: 1120px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-plan-editor {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-wallet-search,
.admin-soft-data .admin-content.admin-compact-content .admin-wallet-form {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  max-width: 1120px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-subtabs,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .metric-grid,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-guide,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-search-panel,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-result-summary,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-pagination {
  flex: 0 0 auto;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 180px));
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .metric-grid div {
  min-height: 56px;
  padding: 9px 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .metric-grid strong {
  margin-top: 4px;
  font-size: 19px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  background: #f8fcfb;
  border: 1px solid var(--admin-soft-line);
  border-radius: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-guide strong {
  color: var(--admin-soft-text);
  font-size: 13px;
  font-weight: 950;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-guide span {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-soft-muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-search {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 210px) auto;
  width: min(100%, 860px);
  padding: 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-result-summary {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-result-summary > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-result-summary small {
  display: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact {
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact > .admin-empty-state {
  grid-column: 1 / -1;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-height: 0;
  padding: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact span {
  grid-row: span 2;
  align-self: start;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact strong,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-queue-list.compact .admin-card-actions {
  grid-row: span 2;
  align-self: center;
  margin: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="queue"] .admin-pagination {
  padding: 7px 9px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid {
  flex: 0 0 auto;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-search-panel,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-result-summary,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-pagination {
  flex: 0 0 auto;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary small {
  display: none;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary ul {
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary li {
  min-height: 24px;
  padding: 0 8px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-result-summary li.active {
  flex-shrink: 0;
}

.admin-soft-data .admin-content.admin-compact-content .admin-pagination {
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content .admin-pagination-status {
  gap: 6px 10px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-pagination-status select,
.admin-soft-data .admin-content.admin-compact-content .admin-pagination button {
  min-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-table-wrap {
  flex: 1 1 250px;
  min-height: 280px;
  overflow: auto;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="logs"] .admin-table-wrap,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-table-wrap {
  min-height: 280px;
  overflow: auto;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-action-table {
  min-width: 960px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-search {
  grid-template-columns: minmax(200px, 1fr) 130px minmax(210px, 1fr) auto;
  width: min(100%, 980px);
  padding: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form {
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(140px, 0.72fr) auto;
  gap: 6px;
  padding: 8px;
  background: #f8fcfb;
  order: 10;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form label {
  min-width: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form .admin-action-note {
  align-self: end;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form input,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form select {
  min-height: 30px;
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .admin-wallet-form .button {
  min-height: 30px;
  min-width: 82px;
  padding: 0 10px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-search-panel label,
.admin-soft-data .admin-content.admin-compact-content .admin-action-panel label,
.admin-soft-data .admin-content.admin-compact-content .settings-grid label {
  gap: 5px;
  font-size: 12px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-search-panel input,
.admin-soft-data .admin-content.admin-compact-content .admin-search-panel select,
.admin-soft-data .admin-content.admin-compact-content .admin-action-panel input,
.admin-soft-data .admin-content.admin-compact-content .admin-action-panel select,
.admin-soft-data .admin-content.admin-compact-content .admin-action-panel textarea,
.admin-soft-data .admin-content.admin-compact-content .settings-grid input,
.admin-soft-data .admin-content.admin-compact-content .settings-grid select {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-action-panel textarea {
  min-height: 76px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .admin-form-actions {
  gap: 8px;
  align-items: end;
}

.admin-soft-data .admin-content.admin-compact-content .admin-form-actions .button,
.admin-soft-data .admin-content.admin-compact-content .admin-card-actions .button,
.admin-soft-data .admin-content.admin-compact-content .button,
.admin-soft-data .admin-content.admin-compact-content .button.small {
  min-width: 72px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .button.primary {
  min-width: 98px;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: start;
  gap: 10px;
  margin-top: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid article {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border-top-width: 3px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid .tag {
  width: fit-content;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid strong {
  font-size: 24px;
  line-height: 1;
}

.admin-soft-data .admin-content.admin-compact-content .plan-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 180px));
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid div {
  min-height: 56px;
  padding: 9px 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid strong {
  margin-top: 4px;
  font-size: 20px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .subheading {
  margin: 0;
  font-size: 14px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor {
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1.1fr) 120px 130px 140px minmax(180px, auto);
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 14px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 2px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor-head span {
  color: var(--admin-text);
  font-size: 16px;
  font-weight: 950;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor-head strong {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor label {
  gap: 5px;
  min-width: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-plan-note-field {
  grid-column: span 4;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor input,
.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor select {
  min-height: 36px;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-form-actions {
  grid-column: span 2;
  flex-wrap: nowrap;
  align-self: end;
  justify-content: flex-end;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .button {
  min-height: 36px;
  min-width: 104px;
  padding: 0 14px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 10px;
  min-height: 0;
  margin-top: 0;
  padding-right: 4px;
  overflow: auto;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row {
  display: grid;
  grid-template-columns: 82px minmax(220px, 1fr) 130px 150px auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 13px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 253, 250, 0.92)),
    var(--admin-panel);
  border: 1px solid rgba(190, 218, 211, 0.9);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row.pending-delete {
  border-color: rgba(239, 68, 68, 0.48);
  box-shadow: inset 4px 0 0 rgba(239, 68, 68, 0.76), 0 10px 22px rgba(239, 68, 68, 0.08);
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .tag {
  justify-self: start;
  padding: 6px 12px;
  white-space: nowrap;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row h4 {
  overflow: hidden;
  margin: 0;
  color: var(--admin-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row p {
  overflow: hidden;
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-stat span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-stat strong {
  color: var(--admin-text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .admin-card-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin: 0;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .button {
  min-height: 34px;
  min-width: 62px;
  padding: 0 12px;
  font-size: 13px;
}

@media (max-width: 1320px) {
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-plan-note-field {
    grid-column: span 2;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-form-actions {
    grid-column: span 1;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row {
    grid-template-columns: 82px minmax(180px, 1fr) 116px 128px;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .admin-card-actions {
    grid-column: 2 / -1;
  }
}

@media (max-width: 860px) {
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-plan-note-field,
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-form-actions {
    grid-column: auto;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor .admin-form-actions {
    justify-content: stretch;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-main,
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .admin-card-actions {
    grid-column: 1 / -1;
  }
}

.admin-soft-data .admin-content.admin-compact-content .admin-card-actions {
  gap: 6px;
  margin-top: 4px;
}

.admin-soft-data .admin-content.admin-compact-content .settings-grid,
.admin-soft-data .admin-content.admin-compact-content .admin-model-summary,
.admin-soft-data .admin-content.admin-compact-content .template-list {
  gap: 10px;
  margin-top: 8px;
}

.admin-soft-data .admin-content.admin-compact-content .settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: start;
}

.admin-soft-data .admin-content.admin-compact-content .admin-model-summary {
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: start;
}

.admin-soft-data .admin-content.admin-compact-content .admin-model-summary > div,
.admin-soft-data .admin-content.admin-compact-content .template-list div {
  padding: 12px;
  box-shadow: none;
}

.admin-soft-data .admin-content.admin-compact-content .admin-model-summary strong,
.admin-soft-data .admin-content.admin-compact-content .template-list strong {
  font-size: 15px;
  line-height: 1.3;
}

.admin-soft-data .admin-content.admin-compact-content .admin-model-summary p {
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .admin-soft-data .admin-content.admin-list-content {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .admin-soft-data .admin-content.admin-list-content .admin-search-panel,
  .admin-soft-data .admin-content.admin-list-content .admin-user-search,
  .admin-soft-data .admin-content.admin-list-content .admin-create-user-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-soft-data .admin-content.admin-list-content .admin-form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .mobile-shell .brand small {
    display: none;
  }

  .mobile-shell .nav {
    gap: 4px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .mobile-shell .nav > a {
    min-height: 46px;
    font-size: 11px;
  }

  .mobile-shell .scenario-tabs,
  .mobile-shell .content-scenario-categories,
  .mobile-shell .content-secondary-actions,
  .mobile-shell .recharge-options {
    grid-template-columns: 1fr;
  }
}

.admin-soft-data .admin-console-top {
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-width: 0;
}

.admin-soft-data .admin-top-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.admin-soft-data .admin-back-link {
  padding: 6px 10px;
  font-size: 13px;
}

.admin-soft-data .admin-user-pill {
  min-height: 34px;
  padding-right: 8px;
  max-width: 220px;
  min-width: 0;
}

.admin-soft-data .admin-content,
.admin-soft-data .admin-content.admin-list-content,
.admin-soft-data .admin-content.admin-compact-content {
  height: calc(100vh - 58px);
}

.admin-soft-data .admin-content.admin-dashboard-content {
  overflow: auto;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-card {
  padding: 10px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid article {
  min-height: 86px;
  gap: 5px;
  padding: 12px 48px 10px 12px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-workbench {
  gap: 8px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid {
  gap: 8px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid article::after {
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
}

.admin-soft-data .admin-dashboard-content .admin-stat-icon {
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid span {
  font-size: 12px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid strong {
  font-size: 21px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-grid small {
  font-size: 12px;
  line-height: 1.25;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-main {
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.42fr) minmax(210px, 0.86fr);
  grid-template-areas:
    "alert status monitor"
    "orders orders users"
    "orders orders audit"
    "orders orders system";
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
}

.admin-soft-data .admin-dashboard-content .admin-dashboard-card-head {
  min-height: 22px;
  margin-bottom: 6px;
}

.admin-soft-data .admin-dashboard-content .admin-alert-list {
  gap: 6px;
}

.admin-soft-data .admin-dashboard-content .admin-alert-list article {
  grid-template-columns: 10px 28px minmax(0, 1fr) auto;
  min-height: 32px;
  padding: 7px 8px;
}

.admin-soft-data .admin-dashboard-content .admin-status-grid {
  gap: 8px;
}

.admin-soft-data .admin-dashboard-content .admin-status-grid article {
  min-height: 64px;
  padding: 8px;
}

.admin-soft-data .admin-dashboard-content .admin-table-wrap.compact {
  max-height: 220px;
  scrollbar-gutter: stable;
}

.admin-soft-data .admin-dashboard-content .admin-recent-orders .admin-table-wrap.compact {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.admin-soft-data .admin-console th,
.admin-soft-data .admin-console td {
  padding: 9px 10px;
  font-size: 13px;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid div,
.admin-soft-data .admin-content.admin-list-content .metric-grid div {
  border-radius: 9px;
}

.admin-soft-data .admin-content.admin-compact-content .metric-grid strong,
.admin-soft-data .admin-content.admin-list-content .metric-grid strong {
  font-size: 18px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 150px));
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid div {
  min-height: 50px;
  padding: 7px 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .metric-grid strong {
  font-size: 18px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .admin-plan-editor {
  gap: 10px;
  padding: 14px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list {
  gap: 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row {
  gap: 14px;
  min-height: 76px;
  padding: 13px 16px;
  border-radius: 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row-stat strong {
  font-size: 24px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-row h4 {
  font-size: 18px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="recharge"] .plan-list .button {
  min-height: 34px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 160px));
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid div {
  min-height: 50px;
  padding: 7px 10px;
}

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="wallet"] .metric-grid strong {
  font-size: 18px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-monitor-metrics {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  justify-content: stretch;
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-monitor-metrics div {
  min-height: 62px;
  padding: 9px 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-monitor-metrics strong {
  margin-top: 5px;
  font-size: 20px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-monitor-grid {
  gap: 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-runtime-backup-list article {
  padding: 7px 9px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .metric-grid {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  justify-content: stretch;
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .metric-grid div {
  min-height: 56px;
  padding: 9px 12px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-cleanup-guard {
  gap: 10px;
  padding: 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-cleanup-boundary {
  padding: 9px 10px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-cleanup-scope-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-search-panel {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  max-width: none;
  padding: 10px;
}

@media (max-width: 760px) {
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="monitor"] .admin-monitor-metrics {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .metric-grid,
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-cleanup-scope-grid,
  .admin-soft-data .admin-content.admin-compact-content[data-admin-panel="cleanup"] .admin-search-panel {
    grid-template-columns: 1fr;
  }
}

.admin-soft-data .admin-drawer {
  width: min(720px, calc(100vw - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.admin-soft-data .admin-drawer-head {
  padding: 14px 16px;
}

.admin-soft-data .admin-drawer-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 16px;
}

.admin-soft-data .admin-drawer-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1 / -1;
  padding-bottom: 4px;
  background: #fbfffc;
}

.admin-soft-data .admin-detail-row {
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
}

.admin-soft-data .admin-detail-row strong {
  font-size: 13px;
}

@media (max-width: 1100px) {
  .admin-soft-data .admin-sidebar {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .admin-soft-data .admin-menu {
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    scroll-snap-type: x proximity;
  }

  .admin-soft-data .admin-tab {
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .admin-soft-data .admin-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .admin-soft-data .admin-drawer-head {
    min-height: 48px;
    padding: 10px 12px;
  }

  .admin-soft-data .admin-drawer-body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .admin-soft-data .admin-drawer-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-soft-data .admin-drawer-actions .admin-action-row-primary,
  .admin-soft-data .admin-drawer-actions .admin-action-row-secondary,
  .admin-soft-data .admin-drawer-actions .admin-action-row-danger,
  .admin-soft-data .admin-drawer-actions .admin-inline-grid,
  .admin-soft-data .admin-relation-list article {
    grid-template-columns: 1fr;
  }

  .admin-soft-data .admin-drawer-actions .button {
    width: 100%;
  }
}

.mobile-shell {
  overflow-x: hidden;
}

.mobile-shell .topbar,
.mobile-shell .nav {
  overflow: hidden;
}

.mobile-shell .nav .top-account-chip {
  width: 100%;
  overflow: hidden;
}

.mobile-shell .nav .top-account-head,
.mobile-shell .nav .top-account-wallet,
.mobile-shell .nav .top-account-badge,
.mobile-shell .nav .top-account-chip span,
.mobile-shell .nav .top-account-chip strong,
.mobile-shell .top-logout-button {
  display: none !important;
}

.mobile-shell .delivery-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  gap: 8px;
}

.mobile-shell .delivery-hero-actions .button {
  width: 100%;
  min-width: 0;
}

.mobile-shell .delivery-refresh-note {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 760px) {
  .nav {
    overflow: hidden;
  }

  .nav .top-account-chip {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    overflow: hidden;
  }

  .nav .top-account-head,
  .nav .top-account-wallet,
  .nav .top-account-badge,
  .nav .top-account-chip span,
  .nav .top-account-chip strong,
  .top-logout-button {
    display: none !important;
  }

  .delivery-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .delivery-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 8px;
    justify-content: stretch;
  }

  .delivery-hero-actions .button {
    width: 100%;
    min-width: 0;
  }

  .delivery-refresh-note {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .showcase-page {
    overflow-x: hidden;
  }

  .showcase-hero,
  .showcase-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .showcase-hero > *,
  .showcase-toolbar > *,
  .showcase-toolbar label,
  .showcase-toolbar input,
  .showcase-categories {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .showcase-hero .button {
    justify-self: stretch;
  }

  .showcase-categories {
    overflow-x: auto;
  }
}