.ut-ui{position: relative;padding: 16px;border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-background);box-shadow: var(--shadow-md);color: var(--color-text);font-family: var(--font-body);font-size: 13px;line-height: 1.4;text-align: left}.ut-ui p{margin: 0}.ut-ui svg{display: block}.ut-ui__head{display: flex;align-items: center;gap: 12px}.ut-ui__icon{display: grid;place-items: center;flex: none;width: 36px;height: 36px;border-radius: 10px;background: var(--color-primary-soft);color: var(--color-primary)}.ut-ui__icon svg{width: 18px;height: 18px}.ut-ui__title{color: var(--color-heading);font-weight: var(--weight-semibold);font-size: 14px}.ut-ui__sub{color: var(--color-muted);font-size: 12px}.ut-ui--editor{padding: 0;overflow: hidden}.ut-ui__bar{display: flex;align-items: center;gap: 5px;height: 30px;padding: 0 12px;border-bottom: 1px solid var(--color-border)}.ut-ui__bar span{width: 8px;height: 8px;border-radius: 50%;background: var(--color-border-strong)}.ut-ui__bar em{margin-left: 8px;color: var(--color-muted);font-size: 11px;font-style: normal;font-weight: var(--weight-medium)}.ut-ui__split{display: grid;grid-template-columns: 1fr 150px;min-height: 190px}.ut-ui__canvas{display: grid;gap: 8px;align-content: start;padding: 12px;background: var(--color-surface)}.ut-ui__blk{border-radius: 8px;background: var(--color-background);box-shadow: inset 0 0 0 1px var(--color-border)}.ut-ui__blk--nav{height: 16px}.ut-ui__blk--hero{display: grid;gap: 6px;padding: 12px;background: var(--ut-ui-accent,var(--color-primary));box-shadow: none;transition: background-color .5s}.ut-ui__blk--hero i{display: block;height: 7px;border-radius: 4px;background: rgba(255,255,255,.85)}.ut-ui__blk--hero i:first-child{width: 70%;height: 10px}.ut-ui__blk--hero i:nth-child(2){width: 50%;opacity: .7}.ut-ui__blk--hero b{width: 44px;height: 14px;margin-top: 4px;border-radius: 7px;background: #fff}.ut-ui__blk--grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 6px;padding: 0;background: none;box-shadow: none}.ut-ui__blk--grid i{height: 36px;border-radius: 6px;background: var(--color-background);box-shadow: inset 0 0 0 1px var(--color-border)}.ut-ui__panel{display: grid;gap: 10px;align-content: start;padding: 12px;border-left: 1px solid var(--color-border)}.ut-ui__label{color: var(--color-heading);font-weight: var(--weight-semibold)}.ut-ui__row{display: flex;align-items: center;justify-content: space-between;gap: 8px;color: var(--color-muted);font-size: 11.5px}.ut-ui__row--col{flex-direction: column;align-items: stretch}.ut-ui__swatches{display: flex;gap: 3px}.ut-ui__swatches i{width: 14px;height: 14px;border-radius: 50%;background: var(--c);box-shadow: inset 0 0 0 1px rgba(0,0,0,.1)}.ut-ui__swatches i.is-active{box-shadow: 0 0 0 2px #fff,0 0 0 3px var(--color-heading)}.ut-ui__font{color: var(--color-heading);font-family: var(--font-display);font-size: 16px}.ut-ui__slider{position: relative;height: 4px;border-radius: 2px;background: var(--color-surface-2)}.ut-ui__slider i{position: absolute;top: 50%;left: 40%;width: 12px;height: 12px;margin: -6px 0 0 -6px;border-radius: 50%;background: var(--color-heading)}.ut-ui__slider::before{content: "";position: absolute;inset: 0 60% 0 0;border-radius: 2px;background: var(--color-heading);transform-origin: 0 50%}.ut-ui__toggle{position: relative;width: 26px;height: 15px;border-radius: 8px;background: var(--color-border-strong)}.ut-ui__toggle i{position: absolute;top: 2px;left: 2px;width: 11px;height: 11px;border-radius: 50%;background: #fff;transition: transform var(--dur-base)}.ut-ui__toggle.is-on{background: var(--color-primary)}.ut-ui__toggle.is-on i{transform: translateX(11px)}.ut-ui__progress{height: 6px;margin: 14px 0 12px;border-radius: 3px;background: var(--color-surface-2);overflow: hidden}.ut-ui__progress i{display: block;height: 100%;border-radius: 3px;background: var(--color-primary);transform-origin: 0 50%}.ut-ui__steps{display: grid;gap: 8px;margin: 0 0 14px;padding: 0;list-style: none}.ut-ui__step{display: flex;align-items: center;gap: 10px;color: var(--color-heading)}.ut-ui__tick{display: grid;place-items: center;width: 20px;height: 20px;border-radius: 50%;background: var(--color-primary);color: #fff}.ut-ui__tick svg{width: 12px;height: 12px}.ut-ui__btn{display: block;padding: 9px;border-radius: var(--radius-pill);background: var(--color-heading);color: #fff;font-weight: var(--weight-semibold);text-align: center}.ut-ui__metrics{display: grid;gap: 12px;margin: 14px 0 0;padding: 0;list-style: none}.ut-ui__metric-top{display: flex;align-items: baseline;gap: 8px;margin-bottom: 6px}.ut-ui__metric-top strong{color: var(--color-heading);font-size: 12px;font-weight: var(--weight-bold);letter-spacing: .04em;font-variant-numeric: tabular-nums}.ut-ui__metric-top span{flex: 1;color: var(--color-muted);font-size: 12px}.ut-ui__metric-top em{padding: 2px 8px;border-radius: var(--radius-pill);background: var(--color-primary-soft);color: var(--color-primary-hover);font-size: 11px;font-style: normal;font-weight: var(--weight-semibold)}.ut-ui__meter{height: 8px;border-radius: 4px;background: linear-gradient(90deg,var(--color-surface-2) 0 100%);overflow: hidden}.ut-ui__meter i{display: block;width: var(--fill);height: 100%;border-radius: 4px;background: var(--color-primary);transform-origin: 0 50%}.ut-ui__searchbar{display: flex;align-items: center;gap: 8px;padding: 9px 12px;border: 1px solid var(--color-border);border-radius: var(--radius-pill);color: var(--color-muted)}.ut-ui__searchbar svg{width: 15px;height: 15px}.ut-ui__result{position: relative;margin-top: 12px;padding: 12px;border-radius: 10px}.ut-ui__result.is-top{background: var(--color-surface);box-shadow: inset 0 0 0 1px var(--color-border)}.ut-ui__url{color: var(--color-muted);font-size: 11px}.ut-ui__link{margin: 2px 0 4px !important;color: #1a4fd6;font-size: 14px;font-weight: var(--weight-medium)}.ut-ui__desc{color: var(--color-muted);font-size: 12px}.ut-ui__rank{position: absolute;top: -10px;right: 10px;padding: 3px 9px;border-radius: var(--radius-pill);background: var(--color-primary);color: #fff;font-size: 11px;font-weight: var(--weight-semibold)}.ut-ui__result:not(.is-top) i{display: block;height: 7px;margin-top: 6px;border-radius: 4px;background: var(--color-surface-2)}.ut-ui__result:not(.is-top) i:first-child{width: 40%}.ut-ui__result:not(.is-top) i:nth-child(2){width: 75%;height: 9px}.ut-ui__avatar{display: grid;place-items: center;flex: none;width: 34px;height: 34px;border-radius: 50%;background: var(--color-surface-2);color: var(--color-heading);font-size: 12px;font-weight: var(--weight-bold)}.ut-ui__avatar.is-team{width: 28px;height: 28px;background: var(--color-primary);color: #fff;font-size: 10px}.ut-ui__status{margin-left: auto;padding: 3px 9px;border-radius: var(--radius-pill);background: var(--color-primary-soft);color: var(--color-primary-hover);font-size: 11px;font-weight: var(--weight-semibold)}.ut-ui__msg{margin-top: 12px;padding: 10px 12px;border-radius: 12px 12px 12px 4px;background: var(--color-surface-2);color: var(--color-heading)}.ut-ui__msg.is-reply{display: flex;gap: 10px;align-items: flex-start;margin-left: 24px;border-radius: 12px 12px 4px 12px;background: var(--color-primary-soft)}.ut-ui__typing{display: flex;gap: 4px;margin: 10px 0 0 24px}.ut-ui__typing i{width: 6px;height: 6px;border-radius: 50%;background: var(--color-subtle);animation: ut-typing 1.2s ease-in-out infinite}.ut-ui__typing i:nth-child(2){animation-delay: .15s}.ut-ui__typing i:nth-child(3){animation-delay: .3s}@keyframes ut-typing{0%,60%,100%{transform: translateY(0);opacity: .5}30%{transform: translateY(-4px);opacity: 1}}.ut-section--dark .ut-ui{border-color: transparent;box-shadow: 0 30px 60px -20px rgba(0,0,0,.6)}.wp-block-siteapp-illustration{width: 100%}.ut-split__visual>.wp-block-siteapp-illustration,.ut-story__panel .wp-block-siteapp-illustration>.ut-ui,.ut-card .wp-block-siteapp-illustration>.ut-ui{max-width: 440px;margin-inline: auto}.ut-split__visual .ut-ui{max-width: 440px;margin-inline: auto;font-size: 14px}.ut-card .wp-block-siteapp-illustration{width: auto}.ut-ui__status{white-space: nowrap}.ut-ui__filters{display: flex;gap: 6px;margin: 14px 0 12px}.ut-ui__filters span{padding: 4px 10px;border-radius: var(--radius-pill);box-shadow: inset 0 0 0 1px var(--color-border);color: var(--color-muted);font-size: 11px;font-weight: var(--weight-medium)}.ut-ui__filters span.is-on{background: var(--color-heading);box-shadow: none;color: #fff}.ut-ui__tiles{display: grid;grid-template-columns: repeat(3,1fr);gap: 8px;margin: 0;padding: 0;list-style: none}.ut-ui__tile{position: relative;display: grid;gap: 4px;padding: 0 0 8px;border-radius: 8px;background: var(--color-surface);box-shadow: inset 0 0 0 1px var(--color-border);overflow: hidden;transition: box-shadow var(--dur-base),transform var(--dur-base) var(--ease-out)}.ut-ui__tile i{display: block;height: 30px;margin-bottom: 4px;background: var(--c)}.ut-ui__tile b{display: block;height: 5px;margin: 0 8px;border-radius: 3px;background: var(--color-border-strong)}.ut-ui__tile b + b{width: 45%;background: var(--color-border)}.ut-ui__tile.is-selected{box-shadow: 0 0 0 2px var(--color-primary);transform: translateY(-2px)}.ut-ui__picked{display: inline-flex;align-items: center;gap: 8px;margin-top: 12px;color: var(--color-heading);font-weight: var(--weight-semibold)}
