/* Authenticated Web forms. Native pages retain their existing navigation and layout. */
.member-ui .member-form-page {
  color: var(--member-ink);
  width: 100%;
  min-width: 0;
  line-height: 1.8;
}

.member-ui .member-form-page h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 650; letter-spacing: -.025em; line-height: 1.45; }
.member-ui .member-form-page :is(h2, h3) { font-weight: 600; line-height: 1.5; }
.member-ui .member-form-page h2 { font-size: 22px; }
.member-ui .member-form-page :is(.card, [class*="shadow-"]) { box-shadow: none; }
.member-ui .member-form-page .card { border-color: var(--member-line); border-radius: 6px; background: var(--member-paper); }
.member-ui .member-form-page .card-body { gap: 20px; padding: 28px 32px; }
.member-ui .member-form-page :is([class*="bg-primary/"], [class*="bg-secondary/"], [class*="bg-accent/"], [class*="bg-warning/"], [class*="bg-success/"], [class*="bg-error/"]) { background-color: var(--member-surface); }
.member-ui .member-form-page :is([class*="border-primary/"], [class*="border-secondary/"], [class*="border-warning/"], [class*="border-success/"], [class*="border-error/"]) { border-color: var(--member-line); }
.member-ui .member-form-page :is(.text-primary, .text-secondary, .text-accent, .link-primary) { color: var(--member-ink); }
.member-ui .member-form-page :is([class*="text-base-content/"], .opacity-50) { color: var(--member-muted); opacity: 1; }
.member-ui .member-form-page :is(.rounded-2xl, .rounded-3xl, .rounded-xl) { border-radius: 6px; }
.member-ui .member-form-page :is(.input, .select, .textarea, .file-input) { border-color: var(--member-control); background-color: var(--member-paper); color: var(--member-ink); border-radius: 4px; font-size: 16px; }
.member-ui .member-form-page :is(.input, .select, .file-input) { min-height: 48px; }
.member-ui .member-form-page :is(.input, .select, .textarea, .file-input):focus-visible { outline: 2px solid var(--member-ink); outline-offset: 3px; }
.member-ui .member-form-page .label { white-space: normal; }
.member-ui .member-form-page .label-text-alt { font-size: 13px; line-height: 1.7; }
.member-ui .member-form-page .btn { min-height: 44px; height: auto; border-radius: 4px; padding-block: 10px; box-shadow: none; }
.member-ui .member-form-page .btn-primary { border-color: var(--member-ink); background: var(--member-ink); color: var(--member-paper); }
.member-ui .member-form-page .btn-primary:hover { background: color-mix(in srgb, var(--member-ink) 85%, var(--member-paper)); }
.member-ui .member-form-page .btn-outline { background: var(--member-paper); border-color: var(--member-ink); color: var(--member-ink); }
.member-ui .member-form-page .btn-ghost { color: var(--member-ink); }
.member-ui .member-form-page .btn-error { background: var(--member-paper); border-color: var(--member-error); color: var(--member-error); }
.member-ui .member-form-page .btn:disabled { background: var(--member-surface); border-color: var(--member-line); color: var(--member-muted); }
.member-ui .member-form-page .checkbox { --input-color: var(--member-ink); color: var(--member-ink); border-color: var(--member-muted); }
.member-ui .member-form-page .toggle { --input-color: var(--member-ink); color: var(--member-paper); border-color: var(--member-muted); background-color: var(--member-muted); }
.member-ui .member-form-page .toggle:checked { border-color: var(--member-ink); background-color: var(--member-ink); }
.member-ui .member-form-page .progress { color: var(--member-ink); }
.member-ui .member-form-page .badge { border-radius: 4px; background: var(--member-surface); border-color: var(--member-line); color: var(--member-ink); }
.member-ui .member-form-page :is(.badge-success, .text-success) { color: var(--member-success); }
.member-ui .member-form-page :is(.badge-warning, .text-warning) { color: var(--member-warning); }
.member-ui .member-form-page :is(.badge-error, .text-error) { color: var(--member-error); }
.member-ui .member-form-page .alert { background: var(--member-surface); border: 1px solid var(--member-line); box-shadow: none; border-radius: 4px; }
.member-ui .member-form-page .alert-error { color: var(--member-error); }
.member-ui .member-form-page .alert-success { color: var(--member-success); }

/* Four channel groups remain readable rows; SMS and device controls follow them. */
.member-ui .member-notifications { max-width: 1152px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.member-ui .member-notifications > :is(header, .member-channels-heading, .member-channel-list) { grid-column: 1 / -1; }
.member-ui .member-notification-header { order: 0; border: 0; padding-bottom: 0; margin-bottom: 42px; }
.member-ui .member-notification-header > p:not(.member-eyebrow) { max-width: none; font-size: 17px; }
.member-ui .member-notifications .member-eyebrow { display: none; }
.member-ui .member-channels-heading { order: 1; margin-bottom: 8px; }
.member-ui .member-channel-list { order: 2; display: block; margin-bottom: 32px; }
.member-ui .member-channel-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; border: 0; border-bottom: 1px solid var(--member-line); border-radius: 0; padding: 32px 0; }
.member-ui .member-channel-group > div:first-child > span { border: 0; background: transparent; }
.member-ui .member-channel-group h3 { font-size: 24px; }
.member-ui .member-channel-group h3 + span { display: none; }
.member-ui .member-channel-group .member-channel-intro { display: contents; }
.member-ui .member-channel-instructions { display: none; }
.member-ui .member-channel-intro > :is(a, button) { grid-column: 2; grid-row: 1; align-self: start; min-width: 142px; }
.member-ui .member-channel-entries { grid-column: 1 / -1; background: var(--member-surface); margin-top: 0; border-radius: 4px; padding: 0 24px; }
.member-ui .member-channel-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr); gap: 8px 24px; }
.member-ui .member-channel-entry > div:nth-child(2) { grid-row: 2; margin: 0; }
.member-ui .member-channel-entry > div:last-child { display: contents; }
.member-ui .member-channel-entry > div:last-child > p { grid-row: 2; grid-column: 2; margin: 0; }
.member-ui .member-channel-entry > div:last-child > div { grid-row: 1; grid-column: 2; justify-self: end; }
.member-ui .member-channel-entry .btn { font-size: 13px; }
.member-ui .member-channel-empty { grid-column: 1 / -1; margin-top: 0; padding: 18px 24px; background: var(--member-surface); border-radius: 4px; font-size: 14px; }
.member-ui .member-notifications > :is(.member-sms-block, .member-device-block) { border: 0; background: var(--member-surface); padding: 24px; margin-bottom: 0; align-self: stretch; }
.member-ui .member-sms-block { order: 3; }
.member-ui .member-device-block { order: 4; }
.member-ui .member-device-block > div:first-child { border: 0; padding: 0; }
.member-ui .member-device-block > div:last-child:not(:first-child) { padding-inline: 0; }
.member-ui .member-sms-block > div { flex-direction: column; align-items: start; gap: 16px; }

/* Configuration is the main column; the preview sits on a quiet surface. */
.member-ui .member-channel-settings { max-width: 1200px; }
.member-ui .member-channel-settings > header { margin-bottom: 40px; }
.member-ui .member-channel-settings > header > span { background: transparent; border: 0; }
.member-ui .member-channel-settings [data-channel-settings] { grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: 64px; }
.member-ui .member-channel-settings [data-channel-settings] > section { border: 0; border-radius: 0; padding: 0; }
.member-ui .member-notification-preview { background: var(--member-surface); border: 0; border-radius: 6px; padding: 28px; }
.member-ui .member-notification-preview > div:first-child { flex-wrap: wrap; }
.member-ui .member-notification-preview [class*="bg-"] { background-color: var(--member-paper); }
.member-ui .member-notification-preview :is([class*="text-slate-"], [class*="text-orange-"], [class*="text-blue-"], [class*="text-[#"]) { color: var(--member-ink); }
.member-ui .member-notification-preview :is([class*="border-slate-"], [class*="border-base-"]) { border-color: var(--member-line); }
.member-ui .member-notification-preview [class*="rounded-2xl"] { border-radius: 4px; }
.member-ui .member-notification-preview .bg-blue-600 { background: var(--member-ink); color: var(--member-paper); }

.member-ui .member-project-form > div:first-child { text-align: left; }
.member-ui .member-project-form > div:first-child > div { display: none; }
.member-ui .member-project-form > .card { border: 0; }
.member-ui .member-project-form > .card > .card-body { padding: 0; }
.member-ui .member-project-form input[type="radio"]:checked + div { border-color: var(--member-ink); box-shadow: 0 0 0 2px var(--member-paper), 0 0 0 3px var(--member-ink); }
.member-ui .member-profile .ring { --tw-ring-color: var(--member-line); box-shadow: none; }
.member-ui .member-profile .card > .h-1\.5 { display: none; }
.member-ui .member-profile :is(.bg-primary, .bg-secondary) { background-color: var(--member-ink); }
.member-ui .member-profile .group:hover > div { transform: none; }
.member-ui .member-token-create { flex-wrap: wrap; align-items: end; }
.member-ui .member-token-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.member-ui .member-api-tokens li { flex-wrap: wrap; gap: 16px; border-radius: 4px; border-color: var(--member-line); padding: 20px; }
.member-ui .member-api-tokens li > span { min-width: 0; overflow-wrap: anywhere; }
.member-ui .member-orders .table { min-width: 720px; }
.member-ui .member-orders .table :is(th, td) { padding: 20px 24px; border-color: var(--member-line); }
.member-ui .member-checkout #package_selection a { transform: none; }
.member-ui .member-checkout #package_selection a[aria-current="true"] > div { border-color: var(--member-ink); background: var(--member-surface); }
.member-ui .member-checkout #package_selection .bg-warning { background: var(--member-surface); color: var(--member-ink); border: 1px solid var(--member-line); border-radius: 4px; }
.member-ui .member-checkout #payment_alipay_label { border-color: var(--member-ink); background: var(--member-surface); }
.member-ui .member-checkout .payment-indicator { background: var(--member-ink); border-color: var(--member-ink); }
.member-ui .member-order-detail dd { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.member-ui .member-order-detail dl > div { gap: 24px; }
.member-ui .member-email-verification { min-height: 0; padding-block: 32px; background: var(--member-paper); }
.member-ui .member-email-verification :is([class*="bg-blue-"], [class*="bg-green-"]) { background: var(--member-surface); }
.member-ui .member-email-verification :is([class*="text-blue-"], [class*="text-gray-"], [class*="text-green-"]) { color: var(--member-ink); }
.member-ui .member-email-verification a.bg-blue-600 { background: var(--member-ink); color: var(--member-paper); }

@media (max-width: 900px) {
  .member-ui .member-channel-settings [data-channel-settings] { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .member-ui .member-notification-preview { position: static; }
}

@media (max-width: 640px) {
  .member-ui .member-form-page .card-body { padding: 24px 20px; }
  .member-ui .member-notifications { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .member-ui .member-notification-header { margin-bottom: 8px; }
  .member-ui .member-channel-group { gap: 20px 12px; padding-block: 28px; }
  .member-ui .member-channel-group h3 { font-size: 21px; }
  .member-ui .member-channel-intro > :is(a, button) { min-width: 0; font-size: 13px; padding-inline: 12px; }
  .member-ui .member-channel-entries { padding-inline: 16px; }
  .member-ui .member-channel-entry { grid-template-columns: minmax(0, 1fr); }
  .member-ui .member-channel-entry > div:last-child > p { grid-column: 1; grid-row: 3; }
  .member-ui .member-channel-entry > div:last-child > div { grid-column: 1; grid-row: 4; justify-self: start; }
  .member-ui .member-notification-preview { padding: 24px 20px; }
  .member-ui .member-api-tokens .member-token-create > .btn { width: 100%; }
  .member-ui .member-orders > div:first-child { flex-wrap: wrap; gap: 20px; }
  .member-ui .member-channel-detail > div:first-child { flex-wrap: wrap; gap: 20px; }
}
@media (min-width: 1024px) {
  .member-ui .member-channel-settings [data-channel-settings] > section { padding-top: 28px; }
}