:root {
    --ui-bg: #f2f2f7;
    --ui-card: rgba(255,255,255,.92);
    --ui-card-raised: #ffffff;
    --ui-text: #000000;
    --ui-text-2: #3c3c43;
    --ui-hint: #8e8e93;
    --ui-section-header: #6d6d72;
    --ui-separator: rgba(60,60,67,.18);
    --ui-accent: #48484a;
    --ui-accent-strong: #3a3a3c;
    --ui-accent-fill: #48484a;
    --ui-accent-fill-strong: #636366;
    --ui-accent-text: #ffffff;
    --ui-accent-soft: rgba(120,120,128,.18);
    --ui-accent-grad: linear-gradient(180deg,#636366 0%,#48484a 48%,#3a3a3c 100%);
    --ui-accent-sheen-1: #8e8e93;
    --ui-accent-sheen-2: #636366;
    --ui-pro: #823bf5;
    --ui-destructive: #ff3b30;
    --ui-confirm: #34c759;
    --ui-star: #f5a623;
    --ui-fill: rgba(120,120,128,.12);
    --ui-fill-2: rgba(120,120,128,.18);
    --ui-fill-3: rgba(120,120,128,.24);
    --ui-hover: rgba(0,0,0,.035);
    --ui-press: rgba(0,0,0,.07);
    --ui-radius-card: 26px;
    --ui-radius-field: 16px;
    --ui-radius-pill: 999px;
    --ui-font: "SF Pro",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
    --ui-ease: cubic-bezier(.25,.1,.25,1);
    --ui-ease-out: cubic-bezier(.16,1,.3,1);
    --ui-ease-nav: cubic-bezier(.33,1,.68,1);
    --ui-dur: .18s;
    --ui-dur-screen: .42s;
    --ui-safe-top: 0px;
    --ui-safe-bottom: 0px;
    --ui-fullscreen-top: 0px;
    --ui-keyboard: 0px;
    --ui-cta-bar-height: 84px
}

[data-theme=dark] {
    --ui-bg: #000000;
    --ui-card: rgba(28,28,30,.92);
    --ui-card-raised: #2c2c2e;
    --ui-text: #ffffff;
    --ui-text-2: #ebebf5;
    --ui-hint: #8e8e93;
    --ui-section-header: #8d8d93;
    --ui-separator: rgba(84,84,88,.55);
    --ui-accent: #ebebf5;
    --ui-accent-strong: #ffffff;
    --ui-accent-fill: #636366;
    --ui-accent-fill-strong: #8e8e93;
    --ui-accent-text: #ffffff;
    --ui-accent-soft: rgba(120,120,128,.28);
    --ui-destructive: #ff453a;
    --ui-star: #fdb44d;
    --ui-fill: rgba(120,120,128,.22);
    --ui-fill-2: rgba(120,120,128,.3);
    --ui-fill-3: rgba(120,120,128,.38);
    --ui-hover: rgba(255,255,255,.06);
    --ui-press: rgba(255,255,255,.1)
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

input,textarea,[contenteditable] {
    -webkit-user-select: text;
    user-select: text
}

.ui-selectable {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default
}

.ui-page {
    width: min(100%,560px);
    margin: 0 auto;
    padding: calc(14px + var(--ui-safe-top)) 0 calc(32px + var(--ui-safe-bottom));
    font-family: var(--ui-font);
    color: var(--ui-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

.ui-page * {
    box-sizing: border-box
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: calc(var(--ui-fullscreen-top) * 1.5);
    pointer-events: none;
    background: linear-gradient(180deg,var(--ui-bg) 0%,var(--ui-bg) 40%,color-mix(in srgb,var(--ui-bg) 70%,transparent) 58%,color-mix(in srgb,var(--ui-bg) 30%,transparent) 78%,transparent 100%)
}

.ui-fade-bottom:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -34px;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--ui-bg) 30%,transparent) 30%,color-mix(in srgb,var(--ui-bg) 78%,transparent) 56%,var(--ui-bg) 80%)
}

.ui-page-head {
    padding: 18px 22px 14px
}

.ui-page-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1
}

.ui-page-sub {
    margin: 5px 0 0;
    color: var(--ui-hint);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35
}

.ui-section {
    margin-bottom: 24px
}

.ui-section-header {
    display: block;
    margin: 0 0 8px;
    padding: 0 28px;
    color: var(--ui-section-header);
    font-size: 13px;
    font-weight: 590;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-transform: uppercase
}

.ui-section-footer {
    display: block;
    margin: 9px 0 0;
    padding: 0 22px;
    color: var(--ui-hint);
    font-size: 13px;
    line-height: 1.35
}

.ui-section--accent .ui-section-header {
    color: var(--ui-accent)
}

.ui-section--accent .ui-card {
    background: var(--ui-accent-soft)
}

.ui-card {
    margin: 0 12px;
    overflow: hidden;
    border-radius: var(--ui-radius-card);
    background: var(--ui-card);
    border: .5px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset
}

.ui-row {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 13px 18px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left
}

.ui-row+.ui-row:before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 0;
    height: 1px;
    background: var(--ui-separator);
    transform: scaleY(.5);
    transform-origin: top;
    transition: opacity var(--ui-dur) var(--ui-ease)
}

.ui-row--interactive {
    cursor: pointer
}

.ui-row--interactive:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ui-press);
    opacity: 0;
    transition: opacity var(--ui-dur) var(--ui-ease);
    pointer-events: none
}

@media (hover: hover) {
    .ui-row--interactive:hover:after {
        background:var(--ui-hover);
        opacity: 1
    }
}

.ui-row--interactive:active:after {
    background: var(--ui-press);
    opacity: 1
}

.ui-row--interactive:active:before,.ui-row--interactive:active+.ui-row:before {
    opacity: 0
}

@media (hover: hover) {
    .ui-row--interactive:hover:before,.ui-row--interactive:hover+.ui-row:before {
        opacity:0
    }
}

.ui-row-before,.ui-row-body,.ui-row-after {
    position: relative;
    z-index: 1
}

.ui-row-press {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer
}

.ui-row--actionable>.ui-row-before,.ui-row--actionable>.ui-row-body,.ui-row--actionable>.ui-row-after {
    pointer-events: none
}

.ui-row-before {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--ui-accent)
}

.ui-row-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px
}

.ui-row-overline {
    color: var(--ui-hint);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2
}

.ui-row-title {
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.3
}

.ui-row--accent .ui-row-title {
    color: var(--ui-accent)
}

.ui-row-subtitle {
    color: var(--ui-hint);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.3
}

.ui-row-after {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--ui-hint);
    font-size: 17px;
    white-space: nowrap
}

.ui-row-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.ui-modelpicker-head {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.ui-modelpicker-row--selected,.ui-modelpicker-extra {
    background: var(--ui-accent-soft)
}

.ui-modelpicker-lock {
    flex: none;
    padding: 4px 9px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb,var(--ui-pro) 12%,transparent);
    color: var(--ui-pro);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2
}

.ui-modelpicker-check {
    display: inline-flex;
    color: var(--ui-accent);
    animation: ui-check-pop .24s var(--ui-ease-out)
}

@keyframes ui-check-pop {
    0% {
        opacity: 0;
        transform: scale(.4)
    }
}

.ui-modelpicker-star {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: -12px -8px -12px -4px;
    padding: 12px 8px 12px 4px;
    border: 0;
    background: none;
    color: var(--ui-hint);
    pointer-events: auto;
    cursor: pointer;
    transition: color var(--ui-dur) var(--ui-ease),transform var(--ui-dur) var(--ui-ease)
}

.ui-modelpicker-star:active {
    transform: scale(.82)
}

.ui-modelpicker-star--on {
    color: var(--ui-star)
}

.ui-modelpicker-star--on svg {
    animation: ui-check-pop .24s var(--ui-ease-out)
}

.ui-modelpicker-trailing {
    overflow: hidden;
    max-width: 108px;
    padding: 4px 9px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-fill);
    color: var(--ui-text-2);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-overflow: ellipsis
}

.ui-modelpicker-trailing--positive {
    background: color-mix(in srgb,var(--ui-confirm) 15%,transparent);
    color: var(--ui-confirm)
}

.ui-modelpicker-row .ui-row-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px
}

.ui-modelpicker-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ui-modelpicker-badge {
    display: inline-flex;
    flex: none;
    color: var(--ui-hint)
}

.ui-modelpicker-row--selected .ui-modelpicker-badge {
    color: var(--ui-accent)
}

.ui-modelpicker-row .ui-row-subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.ui-modelpicker-extra {
    display: grid;
    grid-template-rows: 1fr;
    animation: ui-modelpicker-extra-in .28s var(--ui-ease-out)
}

.ui-modelpicker-extra-clip {
    min-height: 0;
    overflow: hidden
}

.ui-modelpicker-extra .ui-row:before,.ui-modelpicker-extra+.ui-row:before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 0;
    height: 1px;
    background: var(--ui-separator);
    transform: scaleY(.5);
    transform-origin: top
}

@keyframes ui-modelpicker-extra-in {
    0% {
        grid-template-rows: 0fr;
        opacity: 0
    }
}

.ui-amount {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-text);
    font-size: 23px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1
}

.ui-amount svg,.ui-row-value svg {
    color: var(--ui-accent);
    flex: 0 0 auto
}

.ui-submit {
    padding: 8px 22px 0
}

.ui-field {
    display: block;
    width: 100%;
    min-height: 92px;
    padding: 15px 18px;
    border: 0;
    outline: none;
    background: none;
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 17px;
    line-height: 1.45;
    resize: none
}

.ui-field--short {
    min-height: 66px
}

.ui-field--input {
    min-height: 0
}

.ui-field::placeholder {
    color: var(--ui-hint);
    opacity: 1
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent-fill);
    color: var(--ui-accent-text);
    cursor: pointer;
    font-family: var(--ui-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--ui-dur) var(--ui-ease),transform var(--ui-dur) var(--ui-ease),opacity var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .ui-button:hover:not(:disabled) {
        background:var(--ui-accent-fill-strong)
    }
}

.ui-button:active:not(:disabled) {
    transform: scale(.97)
}

.ui-button:disabled {
    cursor: default;
    opacity: .5
}

.ui-button--large {
    width: 100%;
    height: 52px;
    font-size: 17px
}

.ui-button--tinted {
    background: var(--ui-accent-soft);
    color: var(--ui-accent)
}

@media (hover: hover) {
    .ui-button--tinted:hover:not(:disabled) {
        background:var(--ui-accent-soft);
        filter: brightness(.96)
    }
}

.ui-cta {
    position: relative;
    padding: 1.6px;
    border-radius: var(--ui-radius-pill);
    background: linear-gradient(110deg,var(--ui-accent-fill) 0%,var(--ui-accent-sheen-1) 25%,var(--ui-accent-fill) 50%,var(--ui-accent-sheen-2) 75%,var(--ui-accent-fill) 100%);
    background-size: 280% 100%;
    animation: ui-shimmer 5s linear infinite;
    transition: padding var(--ui-dur) var(--ui-ease)
}

.ui-cta>.ui-button {
    width: 100%
}

.ui-cta--off {
    padding: 0;
    background: none;
    animation: none
}

.ui-cta-spacer {
    height: calc(var(--ui-cta-bar-height,84px) + var(--ui-keyboard))
}

.ui-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 14px 12px calc(14px + var(--ui-safe-bottom));
    pointer-events: none;
    transform: translateY(min(0px,var(--ui-safe-bottom,0px) - var(--ui-keyboard,0px)));
    transition: transform .28s var(--ui-ease-nav);
    will-change: transform
}

.ui-cta-bar-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100%,560px);
    margin: 0 auto;
    pointer-events: auto
}

.ui-cta-bar-inner .ui-notice {
    margin-top: 0;
    margin-bottom: 9px
}

@keyframes ui-shimmer {
    to {
        background-position: 280% 0
    }
}

.ui-icon-button {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-hint);
    cursor: pointer;
    transition: background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease),transform var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .ui-icon-button:hover {
        background:var(--ui-hover)
    }
}

.ui-icon-button:active {
    transform: scale(.9)
}

.ui-draglist {
    position: relative;
    margin: 0 12px 24px;
    border-radius: var(--ui-radius-card);
    background: var(--ui-card)
}

.ui-draglist-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 13px 16px 13px 6px;
    transition: transform var(--ui-dur) var(--ui-ease)
}

.ui-draglist-row+.ui-draglist-row:before {
    content: "";
    position: absolute;
    top: 0;
    left: 46px;
    right: 0;
    height: 1px;
    background: var(--ui-separator);
    transform: scaleY(.5);
    transform-origin: top;
    transition: opacity var(--ui-dur) var(--ui-ease)
}

.ui-draglist[data-dragging] .ui-draglist-row:before {
    opacity: 0
}

.ui-draglist-row--lifted {
    z-index: 5;
    background: var(--ui-card-raised);
    border-radius: 14px;
    box-shadow: 0 8px 22px #00000038;
    transition: none
}

.ui-drag-handle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -2px 0;
    padding: 0;
    border: 0;
    background: none;
    place-items: center;
    color: var(--ui-hint);
    cursor: grab;
    touch-action: none
}

.ui-drag-handle:active {
    cursor: grabbing
}

.ui-chip {
    display: inline-flex;
    max-width: 100%;
    height: 36px;
    align-items: center;
    padding: 0 15px;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-fill);
    color: var(--ui-text);
    cursor: pointer;
    font-family: var(--ui-font);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease),transform var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .ui-chip:hover {
        background:var(--ui-fill-2)
    }
}

.ui-chip:active {
    transform: scale(.95)
}

.ui-chip__label {
    overflow: hidden;
    max-width: 240px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ui-chip--active {
    background: var(--ui-accent);
    color: var(--ui-accent-text);
    font-weight: 600
}

@media (hover: hover) {
    .ui-chip--active:hover {
        background:var(--ui-accent-strong)
    }
}

.ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px 18px 16px
}

.ui-wheel {
    position: relative;
    overflow: hidden;
    margin: 8px 0 2px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 26%,#000 74%,transparent 100%);
    mask-image: linear-gradient(to bottom,transparent 0%,#000 26%,#000 74%,transparent 100%)
}

.ui-wheel:active {
    cursor: grabbing
}

.ui-wheel-track {
    will-change: transform
}

.ui-wheel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 700px
}

.ui-wheel-item-inner {
    color: var(--ui-text);
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    backface-visibility: hidden;
    will-change: transform,opacity
}

.ui-wheel-band {
    position: absolute;
    left: 16px;
    right: 16px;
    border-radius: 12px;
    background: var(--ui-fill);
    pointer-events: none
}

.ui-wheel-presets {
    display: flex;
    gap: 8px;
    padding: 4px 16px 16px
}

.ui-wheel-preset {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-fill);
    color: var(--ui-text);
    cursor: pointer;
    font-family: var(--ui-font);
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease),transform var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .ui-wheel-preset:hover {
        background:var(--ui-fill-2)
    }

    .ui-wheel-preset--active:hover {
        background: var(--ui-accent-soft);
        filter: brightness(.96)
    }
}

.ui-wheel-preset:active {
    transform: scale(.94)
}

.ui-wheel-preset--active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-weight: 600
}

.ui-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: var(--ui-hint);
    animation: ui-spin .85s linear infinite
}

.ui-spinner-track {
    opacity: .22
}

.ui-button .ui-spinner {
    width: 18px;
    height: 18px;
    color: inherit
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg)
    }
}

.ui-notice {
    margin: 12px 22px 0;
    color: var(--ui-hint);
    font-family: var(--ui-font);
    font-size: 14px;
    line-height: 1.4;
    text-align: center
}

.ui-notice--error {
    color: var(--ui-destructive)
}

.ui-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #0006;
    animation: ui-fade .2s var(--ui-ease);
    font-family: var(--ui-font);
    color: var(--ui-text)
}

.ui-overlay,.ui-overlay * {
    box-sizing: border-box
}

@keyframes ui-fade {
    0% {
        opacity: 0
    }
}

.ui-modal {
    width: min(100%,360px);
    padding: 22px;
    border-radius: var(--ui-radius-card);
    background: var(--ui-card);
    animation: ui-pop .24s var(--ui-ease-out)
}

.ui-modal-title {
    margin: 0 0 12px;
    color: var(--ui-text);
    font-size: 19px;
    font-weight: 700;
    text-align: center
}

.ui-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px
}

.ui-modal-actions>* {
    flex: 1 1 0
}

.oem-token-modal {
    padding: 22px 20px 20px
}

.oem-token-steps {
    margin: 0 0 17px;
    padding-left: 22px;
    color: var(--ui-hint);
    font-size: 14px;
    line-height: 1.45
}

.oem-token-steps li+li {
    margin-top: 7px
}

.oem-token-steps a {
    color: var(--ui-accent);
    font-weight: 600;
    text-decoration: none
}

.oem-token-label {
    display: block;
    margin: 0 0 7px 3px;
    color: var(--ui-hint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase
}

.oem-token-input {
    min-height: 48px;
    padding: 0 14px;
    border: .5px solid var(--ui-separator);
    border-radius: 14px;
    background: var(--ui-fill);
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 15px
}

.oem-token-input:focus {
    border-color: var(--ui-accent)
}

.oem-token-note {
    margin: 10px 3px 0;
    color: var(--ui-hint);
    font-size: 12px;
    line-height: 1.35
}

.oem-token-error {
    margin: 8px 3px 0;
    color: var(--ui-destructive);
    font-size: 12px;
    line-height: 1.35
}

@keyframes ui-pop {
    0% {
        opacity: 0;
        transform: scale(.94)
    }
}

.ui-overlay--popup {
    padding-bottom: calc(20px + var(--ui-keyboard));
    background: #00000073;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.ui-popup {
    display: flex;
    width: min(100%,340px);
    max-height: min(76vh,560px);
    flex-direction: column;
    border-radius: 26px;
    background: var(--ui-card);
    box-shadow: 0 24px 70px #00000047,0 2px 8px #00000014;
    animation: ui-popup-in .32s cubic-bezier(.34,1.3,.64,1)
}

.ui-popup-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 8px 20px
}

.ui-popup-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25
}

.ui-popup-close {
    display: inline-grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-fill);
    color: var(--ui-hint);
    cursor: pointer;
    transition: transform var(--ui-dur) var(--ui-ease),background var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .ui-popup-close:hover {
        background:var(--ui-fill-2)
    }
}

.ui-popup-close:active {
    transform: scale(.88)
}

.ui-popup-body {
    overflow-y: auto;
    padding: 4px 14px 14px
}

@keyframes ui-popup-in {
    0% {
        opacity: 0;
        transform: scale(.88) translateY(14px)
    }
}

.ui-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer
}

.ui-checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.ui-checkbox-box {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    background: var(--ui-fill);
    color: transparent;
    transition: background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease)
}

.ui-checkbox-input:checked+.ui-checkbox-box {
    background: var(--ui-accent);
    color: var(--ui-accent-text)
}

.ui-checkbox-input:disabled+.ui-checkbox-box {
    opacity: .5
}

.ui-checkbox-label {
    min-width: 0;
    color: var(--ui-text);
    font-size: 16px;
    line-height: 1.3
}

.ui-switch {
    position: relative;
    flex: 0 0 auto;
    width: 51px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-fill-3);
    cursor: pointer;
    transition: background var(--ui-dur) var(--ui-ease)
}

.ui-switch:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px #0003;
    transition: left var(--ui-dur) var(--ui-ease)
}

.ui-switch--on {
    background: var(--ui-confirm)
}

.ui-switch--on:after {
    left: 22px
}

.ui-switch:disabled,.ui-switch[aria-disabled=true] {
    cursor: default;
    opacity: .5
}

.ui-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-fill)
}

.ui-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: none;
    color: var(--ui-hint);
    cursor: pointer;
    font-family: var(--ui-font);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease)
}

.ui-segment--active {
    background: var(--ui-card);
    color: var(--ui-text);
    box-shadow: 0 1px 3px #0000001f
}

.ui-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 24px 22px;
    text-align: center
}

.ui-hero-emoji {
    display: flex;
    width: 144px;
    height: 144px;
    align-items: center;
    justify-content: center;
    font-size: 116px;
    line-height: 1;
    animation: ui-hero-emoji-in .5s var(--ui-ease-out) both
}

.ui-hero-emoji>* {
    animation: ui-hero-float 4s ease-in-out .5s infinite
}

.ui-hero-emoji canvas,.ui-hero-emoji svg,.ui-hero-emoji img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.ui-emoji-img {
    display: block;
    object-fit: contain;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none
}

.ui-hero-title {
    margin: 16px 0 0;
    color: var(--ui-text);
    font-size: 36px;
    font-weight: var(--ui-weight-bold);
    letter-spacing: var(--ui-tracking-title);
    line-height: var(--ui-leading-tight);
    animation: ui-hero-rise .42s var(--ui-ease-out) .06s both
}

.ui-hero-sub {
    margin: 10px 0 0;
    max-width: 32ch;
    color: var(--ui-hint);
    font-size: var(--ui-size-row);
    line-height: var(--ui-leading-normal);
    animation: ui-hero-rise .42s var(--ui-ease-out) .12s both
}

@keyframes ui-hero-emoji-in {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(10px)
    }
}

@keyframes ui-hero-float {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@keyframes ui-hero-rise {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }
}

.ui-screen {
    animation-duration: var(--ui-dur-screen);
    animation-timing-function: var(--ui-ease-nav);
    animation-fill-mode: both
}

.ui-screen--fwd {
    animation-name: ui-screen-in-fwd
}

.ui-screen--back {
    animation-name: ui-screen-in-back
}

@keyframes ui-screen-in-fwd {
    0% {
        opacity: 0;
        transform: translate(26px)
    }
}

@keyframes ui-screen-in-back {
    0% {
        opacity: 0;
        transform: translate(-26px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .ui-cta,.ui-overlay,.ui-modal,.ui-popup,.ui-modelpicker-check,.ui-modelpicker-extra {
        animation: none
    }

    .ui-hero-emoji,.ui-hero-emoji>*,.ui-hero-title,.ui-hero-sub,.ui-screen {
        animation: none!important
    }

    .ui-cta-bar {
        transition: none
    }
}

.ui-screen:focus,.ui-modal:focus,.ui-popup:focus {
    outline: none
}

html,body {
    margin: 0;
    min-height: 100dvh;
    background: var(--ui-bg);
    overflow-x: hidden
}

#root {
    min-height: 100dvh
}

.pod-center {
    display: flex;
    min-height: 70vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px
}

.pod-retry {
    display: flex;
    justify-content: center;
    padding: 0 24px
}

.pod-sending {
    min-height: 86vh;
    gap: 18px
}

.pod-sending-text {
    color: var(--ui-text);
    font-size: var(--ui-size-section);
    font-weight: var(--ui-weight-semibold)
}

.ui-hero-title {
    font-weight: 700
}

.pod-attach-thumb {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    object-fit: cover
}

.pod-topic {
    min-height: 132px;
    resize: none
}

.pod-step-num {
    display: flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: 14px;
    font-weight: var(--ui-weight-semibold);
    font-variant-numeric: tabular-nums
}

.pod-host {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--ui-dur) var(--ui-ease)
}

.pod-host+.pod-host:before {
    content: "";
    position: absolute;
    top: 0;
    left: 64px;
    right: 16px;
    height: .5px;
    background: var(--ui-separator);
    transition: opacity var(--ui-dur) var(--ui-ease)
}

.pod-host--active:before,.pod-host--active+.pod-host:before {
    opacity: 0
}

.pod-host:active {
    background: var(--ui-press)
}

.pod-host--active {
    background: var(--ui-accent-soft)
}

.pod-host-avatar {
    display: flex;
    flex: 0 0 auto;
    width: 40px;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1
}

.pod-host-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px
}

.pod-host-title {
    min-width: 0;
    overflow: hidden;
    color: var(--ui-text);
    font-size: var(--ui-size-row);
    font-weight: var(--ui-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap
}

.pod-host-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px
}

.pod-host-badge {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb,var(--ui-destructive) 32%,transparent);
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb,var(--ui-destructive) 11%,transparent);
    color: var(--ui-destructive);
    font-size: 11px;
    font-weight: var(--ui-weight-semibold);
    line-height: 1
}

.pod-host-desc {
    color: var(--ui-hint);
    font-size: var(--ui-size-footnote);
    line-height: var(--ui-leading-snug)
}

.pod-host-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px
}

.pod-host-check {
    display: flex;
    color: var(--ui-accent)
}

.pod-host-play {
    display: flex;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    cursor: pointer;
    transition: transform var(--ui-dur) var(--ui-ease),background var(--ui-dur) var(--ui-ease)
}

.pod-host-play:active {
    background: var(--ui-fill-2);
    transform: scale(.9)
}

.pod-hidden-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px
}

.pod-hidden-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 1.5px dashed var(--ui-separator);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-accent);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: var(--ui-weight-semibold);
    transition: transform var(--ui-dur) var(--ui-ease),border-color var(--ui-dur) var(--ui-ease),background var(--ui-dur) var(--ui-ease)
}

@media (hover: hover) {
    .pod-hidden-toggle:hover {
        background:var(--ui-accent-soft);
        border-color: color-mix(in srgb,var(--ui-accent) 34%,var(--ui-separator))
    }
}

.pod-hidden-toggle:active {
    background: var(--ui-fill);
    transform: scale(.96)
}

.pod-hidden-toggle[aria-expanded=true] {
    border-style: solid
}

@media (prefers-reduced-motion:reduce) {
    .pod-hidden-toggle {
        transition: none
    }
}

:root {
    --lawx-color-bg: #0c0b0a;
    --lawx-color-sand-1: #141312;
    --lawx-color-sand-2: #1c1b19;
    --lawx-color-sand-3: #2a2825;
    --lawx-color-border: #2a2825;
    --lawx-color-border-strong: #3a3835;
    --lawx-color-text: #f2efe8;
    --lawx-color-text-muted: #c8c2b8;
    --lawx-color-icon: #9a9590;
    --lawx-color-accent: #5a5650;
    --lawx-color-accent-warm: #d4a853;
    --lawx-color-accent-olive: #c4842f;
    --lawx-color-overlay-55: rgba(0,0,0,0.55);
    --lawx-color-overlay-45: rgba(0,0,0,0.45);
    --lawx-color-overlay-35: rgba(0,0,0,0.35);
    --lawx-color-overlay-25: rgba(0,0,0,0.25);
    --lawx-color-surface-glass: rgba(28,27,25,0.9);
    --lawx-color-surface-accent-soft: rgba(212,168,83,0.08);
    --lawx-color-surface-accent: rgba(212,168,83,0.15);
    --lawx-color-focus: rgba(212,168,83,0.5);
    --lawx-shadow-strong: 0 12px 40px rgba(0,0,0,0.6);
    --lawx-shadow-soft: 0 10px 24px rgba(0,0,0,0.2);
    --bg-color: var(--lawx-color-bg);
    --text-color: var(--lawx-color-text);
    --text-secondary: var(--lawx-color-text-muted);
    --mid-gray: var(--lawx-color-icon);
    --light-gray: var(--lawx-color-border-strong);
    --separator-color: var(--lawx-color-border);
    --icon-color: var(--lawx-color-icon);
    --accent-blue: var(--lawx-color-accent);
    --accent-yellow: var(--lawx-color-accent-warm);
    --accent-green: var(--lawx-color-accent-olive);
    --sand-1: var(--lawx-color-sand-1);
    --sand-2: var(--lawx-color-sand-2);
    --sand-3: var(--lawx-color-sand-3);
    --dialog-bg: var(--lawx-color-bg);
    --dialog-panel: var(--lawx-color-sand-1);
    --bubble-out: var(--lawx-color-accent);
    --bubble-text: var(--lawx-color-text);
}

.loading-spinner {
    border-color: var(--lawx-color-border);
    border-top-color: var(--lawx-color-border-strong);
}

.media-placeholder.media-image {
    background: linear-gradient(135deg,var(--lawx-color-sand-1),var(--lawx-color-sand-3));
}

button:focus-visible,.dialog-item:focus-visible {
    outline: 2px solid var(--lawx-color-focus);
}