/* Links Portal — Split Studio */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

:root {
    --ink: #0B1628;
    --surface: #F0F4FA;
    --card: #ffffff;
    --accent: #2B8FD4;
    --accent-dark: #1a6fad;
    --glow: rgba(43, 143, 212, 0.22);
    --border: rgba(11, 22, 40, 0.1);
    --muted: #64748b;
    --radius: 14px;
    --font-display: 'DIN Next LT Arabic', sans-serif;
    --font-body: 'DIN Next LT Arabic', sans-serif;
    --hero-mask-image: radial-gradient(110.26% 96% at 50% 0%, #000 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.90) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.30) 87.6%, rgba(0, 0, 0, 0.20) 91.21%, rgba(0, 0, 0, 0.10) 95.32%, rgba(0, 0, 0, 0.00) 100%);
    --cutout-mask-image: radial-gradient(110.26% 100% at 50% 0%, #000 60%, rgba(0, 0, 0, 0.99) 64.72%, rgba(0, 0, 0, 0.97) 68.55%, rgba(0, 0, 0, 0.93) 71.65%, rgba(0, 0, 0, 0.88) 74.13%, rgba(0, 0, 0, 0.82) 76.15%, rgba(0, 0, 0, 0.75) 77.82%, rgba(0, 0, 0, 0.67) 79.3%, rgba(0, 0, 0, 0.59) 80.7%, rgba(0, 0, 0, 0.50) 82.18%, rgba(0, 0, 0, 0.41) 83.85%, rgba(0, 0, 0, 0.33) 85.87%, rgba(0, 0, 0, 0.24) 88.35%, rgba(0, 0, 0, 0.15) 91.45%, rgba(0, 0, 0, 0.07) 95.28%, rgba(0, 0, 0, 0.00) 100%);
}

html { scroll-behavior: smooth; }

.st-portal-body {
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--ink);
    min-height: 100dvh;
    direction: rtl;
    overflow-x: hidden;
}

.st-portal-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, var(--glow), transparent 55%),
        radial-gradient(ellipse 60% 50% at 95% 100%, rgba(43, 143, 212, 0.12), transparent 50%),
        var(--surface);
    z-index: 0;
    pointer-events: none;
}

.st-portal-app {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 48px;
}

/* Header — LTR bar so logo stays on the physical left */
.st-portal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px 0;
    direction: ltr;
}

.st-portal-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
}

.st-brand-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.st-brand-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.st-portal-header-actions {
    margin-inline-start: auto;
}

/* Auth */
.st-auth-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0 60px;
}

.st-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 28px 32px;
    box-shadow: 0 24px 60px rgba(11, 22, 40, 0.08);
}

.st-auth-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 8px;
}

.st-auth-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
}

.st-auth-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.st-auth-card:has(.st-oauth-first) .st-auth-sub {
    margin-top: 0;
    margin-bottom: 16px;
}

.st-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--surface);
    padding: 4px;
    border-radius: 10px;
}

.st-auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--muted);
    transition: background 0.2s, color 0.2s;
}

.st-auth-tab.is-active {
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.st-auth-form { display: flex; flex-direction: column; gap: 14px; }

.st-oauth-first {
    margin: 0 0 16px;
}

.st-oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.st-oauth-divider-below {
    margin: 0 0 20px;
}

.st-oauth-divider::before,
.st-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.st-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid #c7d2e0;
    background: #f8fafc;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.st-oauth-btn:hover {
    background: #eef2ff;
    border-color: #93a8c7;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
    color: #0f172a;
}

.st-oauth-btn-google {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-color: #b8c4d9;
}

.st-google-icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.st-oauth-btn-facebook {
    border-color: #1877f2;
    color: #1877f2;
}

.st-oauth-btn-facebook i { color: #1877f2; }

.st-oauth-email-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.st-auth-msg, .st-form-msg {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.st-auth-msg.is-error, .st-form-msg.is-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.st-auth-msg.is-success, .st-form-msg.is-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Editor layout */
.st-editor-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.st-editor-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(11, 22, 40, 0.05);
}

.st-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.st-step {
    flex: 1;
    min-width: 100px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.2s;
}

.st-step.is-active {
    border-color: var(--accent);
    background: rgba(43, 143, 212, 0.08);
    color: var(--accent-dark);
}

.st-panel-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 18px;
}

.st-subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--ink);
}

.st-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.st-field span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.st-field span em { color: #ef4444; font-style: normal; }

.st-field input[type="text"],
.st-field input[type="email"],
.st-field input[type="password"],
.st-field input[type="url"],
.st-field textarea,
.st-field select {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.st-field input:focus,
.st-field textarea:focus,
.st-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

.st-field-hint { font-size: 0.75rem; color: var(--muted); }

.st-slug-row {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.st-slug-prefix {
    padding: 10px;
    font-size: 0.7rem;
    color: var(--muted);
    background: var(--surface);
    white-space: nowrap;
    direction: ltr;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-slug-row input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
}

.st-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .st-field-grid { grid-template-columns: 1fr; }
}

.st-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px dashed var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    flex-shrink: 0;
}

.st-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-avatar-placeholder { color: var(--muted); font-size: 1.4rem; }

.st-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

.st-theme-grid input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}

.st-field-wide { grid-column: 1 / -1; }

.st-font-sample {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Preset gallery */
.st-dash-design-view[hidden] {
    display: none !important;
}

#st-dash-design-themes > .st-field-hint {
    margin: 0 0 16px;
}

.st-theme-picker-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    margin: 0 0 20px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    text-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.st-theme-picker-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.12);
    transform: translateY(-1px);
}

.st-theme-picker-sample {
    flex-shrink: 0;
    width: 48px;
    display: block;
}

.st-theme-picker-sample .st-preset-swatch {
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 10px;
}

.st-theme-picker-sample .st-preset-aa {
    top: 5px;
    right: 5px;
    font-size: 0.72rem;
}

.st-theme-picker-sample .st-preset-chip {
    inset-inline-start: 5px;
    inset-inline-end: -35%;
    bottom: 6px;
    height: 14px;
}

.st-theme-picker-sample .st-preset-custom-icon {
    font-size: 1rem;
}

.st-theme-picker-sample .st-preset-custom-glyph {
    width: 22px;
    height: 22px;
}

.st-theme-picker-type {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}

.st-theme-picker-name {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: end;
}

.st-theme-picker-chevron {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

.st-wallpaper-picker-sample {
    flex-shrink: 0;
    width: 48px;
    height: 60px;
    border-radius: 10px;
    background: #eef2f8;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}

.st-buttons-picker-sample {
    flex-shrink: 0;
    width: 48px;
    height: 60px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
}

.st-buttons-picker-sample-chip {
    display: block;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: var(--accent);
}

.st-text-picker-sample,
.st-colors-picker-sample {
    flex-shrink: 0;
    width: 48px;
    height: 60px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
}

.st-text-picker-sample-label {
    display: block;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-colors-picker-dots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
}

.st-colors-picker-dot {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.st-button-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.st-button-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 2px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}

.st-button-style-card.is-active {
    border-color: var(--ink);
    color: var(--ink);
}

.st-button-style-preview {
    width: 100%;
    height: 34px;
    border-radius: 999px;
    display: block;
}

.st-button-style-preview--fill {
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.st-button-style-preview--glass {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

.st-button-style-preview--outline {
    background: transparent;
    border: 2px solid var(--accent);
}

.st-button-style-name {
    line-height: 1.2;
    text-align: center;
}

.st-button-preset-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.st-button-preset-tabs--card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.st-button-preset-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-button-preset-tabs--card .st-button-preset-tab {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 78px;
    padding: 12px 8px;
    border-width: 1.5px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.76rem;
    text-align: center;
}

.st-button-preset-tabs--shadow .st-button-preset-tab {
    min-height: 72px;
    gap: 10px;
}

.st-button-preset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: inherit;
}

.st-button-preset-icon-svg {
    display: block;
    width: 16px;
    height: 16px;
}

.st-button-preset-tabs--card .st-button-preset-icon-svg {
    width: 22px;
    height: 22px;
}

.st-button-preset-label {
    line-height: 1.25;
}

.st-button-preset-tabs--card .st-button-preset-label {
    max-width: 100%;
    font-size: 0.76rem;
    font-weight: 700;
    color: inherit;
}

.st-button-shadow-preview {
    display: block;
    width: 36px;
    height: 16px;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.82);
    flex-shrink: 0;
}

.st-button-shadow-preview--none {
    box-shadow: none;
}

.st-button-shadow-preview--soft {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

.st-button-shadow-preview--strong {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.32);
}

.st-button-shadow-preview--hard {
    box-shadow: 3px 3px 0 rgba(15, 23, 42, 0.78);
}

.st-button-preset-tab.is-active .st-button-shadow-preview {
    background: #fff;
}

.st-button-preset-tab.is-active .st-button-shadow-preview--soft {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.st-button-preset-tab.is-active .st-button-shadow-preview--strong {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

.st-button-preset-tab.is-active .st-button-shadow-preview--hard {
    box-shadow: 3px 3px 0 rgba(15, 23, 42, 0.55);
}

.st-button-preset-tab.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.st-button-preset-tabs--card .st-button-preset-tab.is-active {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.st-button-preset-tabs--card .st-button-preset-tab:not(.is-active):hover {
    border-color: rgba(15, 23, 42, 0.22);
    background: #fff;
    color: var(--ink);
}

.st-button-style-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

#st-dash-design-buttons > .st-button-style-grid + .st-header-media-row,
#st-dash-design-buttons > .st-header-media-row + .st-button-style-panel {
    margin-top: 16px;
}

#st-dash-design-buttons .st-header-media-row:has(.st-button-preset-tabs) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#st-dash-design-buttons .st-header-media-row:has(.st-button-preset-tabs) .st-header-media-control {
    justify-content: flex-start;
}

.st-wallpaper-style-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 18px;
}

.st-wallpaper-style-tab {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-wallpaper-style-tab:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.st-wallpaper-style-tab.is-active {
    border-color: var(--accent);
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.12);
}

.st-wallpaper-style-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: #eef2f8 center / cover no-repeat;
    border: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    position: relative;
}

.st-wallpaper-style-preview.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        #f1f5f9,
        #f1f5f9 8px,
        #e2e8f0 8px,
        #e2e8f0 16px
    );
    color: #94a3b8;
}

.st-wallpaper-style-preview.is-empty i,
.st-wallpaper-style-preview.is-empty svg {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 1;
}

.st-wallpaper-style-preview img,
.st-wallpaper-style-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-wallpaper-style-preview-card {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56%;
    height: 88%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    z-index: 2;
}

.st-wallpaper-style-preview-backdrop {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(18px) saturate(1.08);
    transform: scale(1.08);
    pointer-events: none;
    z-index: 0;
}

.st-wallpaper-style-preview-card .st-prev-wallpaper-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.st-wallpaper-style-preview-card .st-prev-wallpaper-pattern__grid {
    background-size: 24px 24px;
}

.st-wallpaper-style-preview-card .st-prev-wallpaper-pattern__blobs-blur {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.st-wallpaper-picker-sample .st-wallpaper-style-preview-card {
    width: 62%;
    height: 90%;
    border-radius: 8px 8px 0 0;
}

.st-wallpaper-style-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: inherit;
}

.st-wallpaper-panel[hidden] {
    display: none !important;
}

.st-wallpaper-gradient-mode-row {
    margin-bottom: 14px;
}

.st-wallpaper-gradient-mode-row .st-wallpaper-seg {
    margin-bottom: 0;
    width: 100%;
    max-width: 280px;
    margin-inline-start: auto;
}

.st-wallpaper-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.st-wallpaper-seg-btn {
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    color: var(--muted);
}

.st-wallpaper-seg-btn.is-active {
    border-color: var(--accent);
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.12);
}

.st-wallpaper-dir-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
}

.st-wallpaper-dir-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    max-width: 132px;
}

.st-wallpaper-dir-hint {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}

.st-wallpaper-dir-row .st-header-media-control {
    flex: 0 0 auto;
    min-width: 0;
    width: min(260px, 58%);
}

.st-wallpaper-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.st-wallpaper-premade-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.st-wallpaper-dir-row .st-wallpaper-dir-grid {
    margin-bottom: 0;
    width: 100%;
}

.st-wallpaper-dir-row .st-wallpaper-dir-card {
    min-height: 72px;
    padding: 8px 6px;
    font-size: 0.72rem;
}

.st-wallpaper-pattern-row {
    margin-top: 16px;
}

.st-wallpaper-pattern-row .st-header-media-control {
    display: flex;
    justify-content: flex-start;
}

.st-wallpaper-pattern-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.st-wallpaper-pattern-card {
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background-color: #f8fafc;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.st-wallpaper-pattern-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.st-wallpaper-dir-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 10px 8px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.st-wallpaper-premade-card {
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f8fafc;
    box-shadow:
        0 0 0 1.5px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.st-wallpaper-dir-icon {
    display: inline-flex;
    color: var(--accent);
}

.st-wallpaper-dir-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.st-wallpaper-dir-card.is-active .st-wallpaper-dir-icon {
    color: var(--accent);
}

.st-wallpaper-dir-card.is-active,
.st-wallpaper-pattern-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.14);
}

.st-wallpaper-premade-card.is-active {
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 0 5px rgba(43, 143, 212, 0.18);
}

.st-wallpaper-onoff-row {
    margin: 10px 0;
}

.st-wallpaper-onoff-row .st-wallpaper-dir-copy {
    max-width: none;
    flex: 1;
}

.st-wallpaper-onoff-row .st-header-media-control {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.st-wallpaper-switch {
    position: relative;
    width: 48px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.st-wallpaper-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transition: left 0.18s ease;
}

.st-wallpaper-switch.is-on {
    background: var(--accent);
}

.st-wallpaper-switch.is-on .st-wallpaper-switch-thumb {
    left: calc(100% - 25px);
}

.st-wallpaper-effects-row {
    margin: 10px 0 12px;
    align-items: flex-start;
}

.st-wallpaper-effects-row .st-header-media-control {
    flex: 1;
    min-width: 0;
}

.st-wallpaper-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    justify-content: flex-start;
}

.st-wallpaper-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 68px;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

.st-wallpaper-chip-icon {
    display: inline-flex;
    color: currentColor;
}

.st-wallpaper-chip-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.st-wallpaper-chip.is-active {
    border-color: var(--accent);
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.12);
}

.st-wallpaper-media-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.st-wallpaper-media-preview {
    margin-bottom: 12px;
    min-height: 120px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: #f1f5f9 center / cover no-repeat;
    overflow: hidden;
}

.st-wallpaper-media-preview video,
.st-wallpaper-media-preview img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.st-prev-wallpaper-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.st-prev-wallpaper-media {
    background-size: cover;
    background-position: center;
}

.st-prev-wallpaper-media.is-fx-mono { filter: grayscale(1); }
.st-prev-wallpaper-media.is-fx-blur { filter: blur(10px); transform: scale(1.08); }
.st-prev-wallpaper-media.is-fx-halftone {
    filter: contrast(1.2);
    background-image: radial-gradient(rgba(0,0,0,0.35) 1px, transparent 1.5px);
    background-size: 4px 4px;
}

.st-prev-wallpaper-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-prev-wallpaper-tint {
    background: #0f172a;
    opacity: 0.35;
}

.st-wallpaper-tint-row {
    margin: 10px 0;
}

.st-wallpaper-tint-row .st-wallpaper-dir-copy {
    max-width: none;
    flex: 0 0 auto;
}

.st-wallpaper-tint-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    margin-inline-start: auto;
}

.st-wallpaper-tint-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted);
}

.st-wallpaper-tint-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.st-wallpaper-tint-range {
    flex: 1;
    min-width: 0;
    width: 100%;
    accent-color: var(--accent);
}

.st-prev-wallpaper-noise {
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}

.st-prev-wallpaper-pattern {
    overflow: hidden;
}

.st-prev-wallpaper-pattern__fill,
.st-prev-wallpaper-pattern__mask,
.st-prev-wallpaper-pattern__grid,
.st-prev-wallpaper-pattern__blobs {
    position: absolute;
    inset: 0;
}

.st-prev-wallpaper-pattern__mask {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.st-prev-wallpaper-pattern__grid {
    background-size: 80px 80px;
    background-repeat: repeat;
    background-position: center;
}

.st-prev-wallpaper-pattern__waves {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.st-prev-wallpaper-pattern__waves-mask {
    position: absolute;
    inset: 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

@keyframes st-prev-wallpaper-blob-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.375); }
    100% { transform: scale(1); }
}

.st-prev-wallpaper-pattern__blob {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    transform-origin: center center;
    animation: st-prev-wallpaper-blob-pulse 4s ease-in-out infinite;
}

.st-prev-wallpaper-pattern__blobs-blur {
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.st-preset-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
    align-items: stretch;
}

.st-preset-gallery > .st-preset {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: 100%;
}

.st-preset.st-preset--preview {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease;
}

.st-preset.st-preset--preview:hover {
    transform: translateY(-2px);
}

.st-preset-gallery .st-theme-preview-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.st-preset-gallery .st-theme-preview-screen {
    flex: 1 1 auto;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    padding: 14px 10px 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.st-preset-gallery .st-preset-preview-screen--custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.st-preset-gallery .st-preset-preview-card--custom {
    border: 2px dashed rgba(100, 116, 139, 0.38);
    background: #fff;
    box-shadow: none;
}

.st-preset-gallery .st-preset--custom.is-active .st-preset-preview-card--custom {
    background: rgba(77, 175, 228, 0.08);
    border-color: var(--accent);
    border-style: solid;
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 0 5px var(--glow);
}

.st-preset-gallery .st-preset--custom .st-preset-custom-icon {
    position: static;
    inset: auto;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-profile {
    margin-bottom: 10px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.75rem;
    margin: 0 auto 6px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-name {
    font-size: 0.68rem;
    margin-bottom: 3px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-bio {
    font-size: 0.58rem;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-official {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-official-btn {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1.2;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-official-btn i {
    font-size: 0.5rem;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-links {
    gap: 4px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-link {
    font-size: 0.52rem;
    padding: 6px 7px;
    gap: 5px;
}

.st-preset-gallery .st-theme-preview-screen .st-prev-icon {
    width: 16px;
    height: 16px;
    font-size: 0.44rem;
}

.st-preset-gallery .st-preset-name {
    flex-shrink: 0;
    margin-top: 8px;
}

.st-preset.is-active .st-theme-preview-card {
    border-color: var(--accent);
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 0 5px var(--glow);
}

.st-preset {
    cursor: pointer;
    border: 0;
    border-radius: 16px;
    padding: 0;
    background: transparent;
    transition: transform 0.15s;
}

.st-preset:hover { transform: translateY(-2px); }

.st-preset-swatch {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease;
}

.st-preset.is-active .st-preset-swatch {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 2px var(--accent),
        0 0 0 5px var(--glow);
}

.st-preset-aa {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: block;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
    direction: rtl;
    pointer-events: none;
}

.st-preset-chip {
    position: absolute;
    inset-inline-start: 12px;
    inset-inline-end: -28%;
    bottom: 14px;
    height: 40px;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
}

.st-preset-swatch--custom {
    background: #f8fafc;
    border: 2px dashed rgba(100, 116, 139, 0.38);
    box-shadow: none;
}

.st-preset.is-active .st-preset-swatch--custom {
    background: rgba(77, 175, 228, 0.08);
    border-color: var(--accent);
    border-style: solid;
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 0 5px var(--glow);
}

.st-preset-custom-icon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.85rem;
    line-height: 1;
    pointer-events: none;
}

.st-preset.is-active .st-preset-custom-icon {
    color: var(--accent);
}

.st-preset-custom-glyph {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--st-preset-custom-icon) center / contain no-repeat;
    mask: var(--st-preset-custom-icon) center / contain no-repeat;
}

.st-preset-name {
    display: block;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 6px;
    color: var(--ink);
    line-height: 1.25;
}

/* QR */
.st-qr-stage {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.st-qr-stage canvas {
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}

.st-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.st-qr-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.st-qr-color {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--muted);
}

.st-qr-color input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px;
    cursor: pointer;
}

/* Live preview — button style variants */
.st-prev-link.is-fill { color: #fff; border: none; }
.st-prev-link.is-soft { background: rgba(255,255,255,0.95); box-shadow: 0 4px 14px rgba(0,0,0,0.1); border: none; }
.st-prev-link.is-outline { background: transparent; border: 2px solid currentColor; }
.st-prev-link.is-glass { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); }
.st-prev-link.is-brutal { background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; color: #111; }

.st-prev-avatar.shape-rounded { border-radius: 18px; }
.st-prev-avatar.shape-square { border-radius: 4px; }

/* Custom buttons */
.st-cbtn-row {
    display: grid;
    grid-template-columns: 40px 32px 1fr 1fr 28px;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.st-cbtn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    font-size: 0.75rem;
    color: var(--muted);
}

.st-cbtn-icon img { width: 100%; height: 100%; object-fit: cover; }

.st-cbtn-color { width: 32px; height: 32px; border: none; padding: 0; cursor: pointer; border-radius: 6px; }

.st-cbtn-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.st-sortable-list {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.st-sortable-list li {
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    cursor: grab;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-sortable-list li:last-child { border-bottom: none; }

.st-sortable-list li::before {
    content: '⋮⋮';
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: -2px;
}

/* Buttons */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.st-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.st-btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px var(--glow);
}

.st-btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

.st-btn-outline {
    background: #fff;
    border: 1.5px solid var(--accent);
    color: var(--accent-dark);
}

.st-btn-ghost {
    background: transparent;
    color: var(--muted);
}

.st-btn-block { width: 100%; }

.st-btn-sm { padding: 7px 12px; font-size: 0.8rem; }

.st-form-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Preview phone */
.st-preview-panel {
    position: sticky;
    top: 20px;
}

.st-phone-frame {
    background: var(--ink);
    border-radius: 36px;
    padding: 12px;
    box-shadow: 0 32px 64px rgba(11, 22, 40, 0.2), inset 0 0 0 2px rgba(255,255,255,0.08);
}

.st-phone-notch {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
    margin: 4px auto 10px;
}

.st-phone-screen {
    background: #eef2f8;
    border-radius: 26px;
    min-height: 520px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px 14px;
    font-size: 0.8rem;
}

.st-share-box {
    margin-top: 20px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.st-copy-row {
    display: flex;
    gap: 8px;
}

.st-copy-row input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
}

.st-qr-wrap {
    margin-top: 14px;
    text-align: center;
}

.st-qr-wrap canvas {
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
}

/* Stats */
.st-stats-card {
    margin-top: 24px;
    padding: 16px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.st-stats-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.st-stats-row {
    display: flex;
    gap: 16px;
}

.st-stat {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
}

.st-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
}

.st-stat span:last-child {
    font-size: 0.75rem;
    color: var(--muted);
}

.st-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.st-stats-head h3 { margin-bottom: 0; }

.st-range-tabs {
    display: inline-flex;
    background: var(--bg, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.st-range-tab {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.st-range-tab:hover { color: var(--text, #0f172a); }

.st-range-tab.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.st-chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    font-size: 0.75rem;
    color: var(--muted);
}

.st-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.st-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.st-legend-view { background: var(--accent); }
.st-legend-click { background: #f59e0b; }

.st-chart {
    margin-top: 10px;
}

.st-chart-sub {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 2px 0 10px;
}

.st-plot {
    position: relative;
    height: 132px;
    padding-top: 4px;
    border-bottom: 1px solid var(--border);
}

/* faint mid + quarter gridlines */
.st-plot::before,
.st-plot::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    border-top: 1px dashed var(--border);
    opacity: 0.7;
}
.st-plot::before { top: 50%; }
.st-plot::after  { top: 0; }

.st-ymax {
    position: absolute;
    top: -2px;
    inset-inline-start: 2px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    padding: 0 4px;
    border-radius: 6px;
}

.st-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.st-bcol {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.st-b {
    flex: 1 1 0;
    max-width: 9px;
    min-height: 2px;
    border-radius: 5px 5px 0 0;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.st-b-v {
    background: var(--accent);
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
}
.st-b-c { background: linear-gradient(180deg, #fbbf24, #f59e0b); }

.st-bcol:hover .st-b { filter: brightness(1.12); }

.st-xaxis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--muted);
}

.st-chart-empty {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.st-top-links {
    list-style: none;
    margin-top: 12px;
    font-size: 0.8rem;
}

.st-top-links li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

/* Live preview inner styles */
.st-prev-profile { text-align: center; margin-bottom: 16px; }
.st-prev-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 10px;
    background: var(--accent, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.4rem;
    overflow: hidden;
}
.st-prev-avatar img,
.st-prev-avatar video { width: 100%; height: 100%; object-fit: cover; }
.st-prev-name { font-weight: 600; font-size: 1.5rem; margin-bottom: 4px; }

.st-prev-profile--shape .st-prev-name {
    font-size: 2.5rem;
    line-height: 1.05;
}
.st-prev-bio { font-size: 1rem; opacity: 0.75; line-height: 1.5; }
.st-prev-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 40px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.st-prev-icon {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.st-prev-icon.has-tabler-icon .st-tabler-icon-img { width: 1rem; height: 1rem; object-fit: contain; }

.st-prev-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-prev-link--no-thumb {
    justify-content: center;
    text-align: center;
    padding-inline: 14px;
}
.st-prev-embed {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────
   TABLET (≤1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .st-editor-layout {
        grid-template-columns: 1fr;
    }
    .st-preview-panel {
        position: static;
        order: -1;
    }
    .st-phone-screen {
        min-height: 380px;
        max-height: 420px;
    }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE (≤640px) — Enhanced Editor UX
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Login: no page scroll, centered card */
    .st-portal-body.st-login-active {
        overflow: hidden;
        height: 100dvh;
    }

    .st-portal-body.st-login-active .st-portal-app {
        min-height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        padding: 0 16px;
        overflow: hidden;
    }

    .st-portal-body.st-login-active .st-portal-main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
    }

    .st-portal-body.st-login-active .st-auth-screen {
        padding: 0;
        width: 100%;
        align-items: center;
    }

    .st-portal-body.st-login-active .st-auth-card {
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tighten app padding */
    .st-portal-app {
        padding: 0 12px 32px;
    }

    /* Header */
    .st-portal-header {
        padding: 14px 0;
        flex-shrink: 0;
    }
    .st-portal-brand {
        font-size: 1rem;
        gap: 10px;
    }

    .st-brand-logo-mark {
        width: 36px;
        height: 36px;
    }

    .st-brand-logo-mark img {
        width: 100%;
        height: 100%;
    }

    /* Auth card */
    .st-auth-card {
        padding: 22px 18px 24px;
        border-radius: 16px;
    }
    .st-auth-title {
        font-size: 1.35rem;
    }
    .st-oauth-btn {
        min-height: 48px;
        font-size: 0.9rem;
    }

    /* Editor panel */
    .st-editor-panel {
        padding: 16px 14px;
        border-radius: 12px;
    }

    /* Steps — horizontal scroll on very small screens */
    .st-steps {
        display: flex;
        gap: 6px;
        margin-bottom: 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .st-step {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 10px 14px;
        scroll-snap-align: start;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Panel title */
    .st-panel-title {
        font-size: 1.05rem;
        margin-bottom: 14px;
    }

    /* Fields */
    .st-field {
        margin-bottom: 12px;
    }
    .st-field span {
        font-size: 0.78rem;
    }
    .st-field input[type="text"],
    .st-field input[type="email"],
    .st-field input[type="password"],
    .st-field input[type="url"],
    .st-field textarea,
    .st-field select {
        padding: 11px 12px;
        font-size: 16px; /* Prevent iOS zoom */
        border-radius: 10px;
    }
    .st-field textarea {
        min-height: 80px;
    }

    /* Slug row */
    .st-slug-row {
        flex-direction: column;
        align-items: stretch;
    }
    .st-slug-prefix {
        max-width: 100%;
        text-align: center;
        padding: 8px;
        font-size: 0.68rem;
        border-bottom: 1px solid var(--border);
    }
    .st-slug-row input {
        text-align: center;
        padding: 10px !important;
    }

    /* Upload row */
    .st-upload-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .st-upload-row > div {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .st-upload-row .st-btn {
        flex: 1;
    }

    /* Theme grid */
    .st-theme-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .st-theme-grid input[type="color"] {
        height: 44px;
    }
    .st-field select {
        padding: 12px;
    }

    /* Preset gallery */
    .st-preset-gallery {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: 12px;
    }
    .st-preset-gallery .st-theme-preview-screen {
        height: 260px;
        min-height: 260px;
        max-height: 260px;
        padding: 12px 8px 10px;
    }
    .st-preset {
        padding: 3px;
        border-radius: 16px;
    }
    .st-preset-swatch {
        border-radius: 16px;
    }
    .st-preset-aa {
        top: 10px;
        right: 10px;
        font-size: 1.25rem;
    }
    .st-preset-chip {
        height: 36px;
        bottom: 12px;
    }
    .st-preset-name {
        font-size: 0.6rem;
    }

    /* Custom buttons row */
    .st-cbtn-row {
        grid-template-columns: 36px 28px 1fr 28px;
        gap: 5px;
        padding: 6px;
    }
    .st-cbtn-row input:nth-child(4) {
        grid-column: 3;
    }
    .st-cbtn-icon {
        width: 32px;
        height: 32px;
    }
    .st-cbtn-color {
        width: 28px;
        height: 28px;
    }

    /* Sortable list */
    .st-sortable-list li {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    /* Form footer — stack buttons */
    .st-form-footer {
        flex-direction: column;
        gap: 8px;
        margin-top: 18px;
        padding-top: 16px;
    }
    .st-form-footer .st-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
    .st-form-footer #st-prev-step {
        order: 1;
    }

    /* Preview phone — compact */
    .st-phone-frame {
        border-radius: 28px;
        padding: 10px;
        margin: 0 auto;
        max-width: 300px;
    }
    .st-phone-notch {
        width: 60px;
        height: 5px;
        margin: 3px auto 8px;
    }
    .st-phone-screen {
        border-radius: 20px;
        min-height: 320px;
        max-height: 360px;
        padding: 14px 10px;
        font-size: 0.75rem;
    }
    .st-prev-avatar {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }
    .st-prev-name {
        font-size: 0.9rem;
    }
    .st-prev-link {
        padding: 8px 10px;
        font-size: 0.72rem;
    }
    .st-prev-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    /* Share box */
    .st-share-box {
        padding: 12px;
        margin-top: 14px;
    }
    .st-copy-row {
        flex-direction: column;
        gap: 8px;
    }
    .st-copy-row input {
        text-align: center;
    }
    .st-copy-row .st-btn {
        width: 100%;
    }

    /* QR section */
    .st-qr-stage canvas {
        width: 160px !important;
        height: 160px !important;
    }
    .st-qr-logo {
        width: 38px;
        height: 38px;
    }
    .st-qr-controls {
        gap: 8px;
    }

    /* Stats card */
    .st-stats-card {
        padding: 12px;
        margin-top: 16px;
    }
    .st-stats-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .st-range-tabs {
        width: 100%;
        justify-content: center;
    }
    .st-range-tab {
        flex: 1;
        text-align: center;
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    .st-stats-row {
        gap: 8px;
    }
    .st-stat {
        padding: 10px 6px;
    }
    .st-stat-num {
        font-size: 1.25rem;
    }
    .st-stat span:last-child {
        font-size: 0.68rem;
    }

    /* Chart */
    .st-plot {
        height: 100px;
    }
    .st-chart-legend {
        justify-content: center;
        gap: 12px;
    }

    /* Subtitle */
    .st-subtitle {
        font-size: 0.88rem;
        margin: 16px 0 8px;
    }
    .st-field-hint {
        font-size: 0.7rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   VERY SMALL PHONES (≤400px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .st-portal-app {
        padding: 0 8px 24px;
    }
    .st-auth-card {
        padding: 20px 14px;
    }
    .st-auth-title {
        font-size: 1.2rem;
    }
    .st-editor-panel {
        padding: 14px 10px;
    }
    .st-theme-grid {
        grid-template-columns: 1fr;
    }
    .st-preset-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
    .st-preset-gallery .st-theme-preview-screen {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }
    .st-phone-frame {
        max-width: 260px;
    }
    .st-phone-screen {
        min-height: 280px;
        max-height: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.st-btn:focus-visible,
.st-auth-tab:focus-visible,
.st-step:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =========================================================================
 * Onboarding wizard + Dashboard (Linktree-style)
 * ========================================================================= */

.st-btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: 12px; }

/* ── Wizard shell ───────────────────────────────────────────────────── */
.st-wiz { position: relative; padding: 0; }

/* Top nav: brand (left) · centered progress · back (right) */
.st-wiz-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand progress back";
    align-items: center;
    gap: 12px;
    padding: 22px 24px 6px;
    direction: ltr;
}

.st-wiz-topbar[hidden] { display: none; }

.st-onboarding-active .st-wiz-topbar:not([hidden]) {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 40;
    background: var(--card);
    padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 12px;
    border-bottom: 1px solid rgba(11, 22, 40, 0.06);
    box-shadow: 0 4px 18px rgba(11, 22, 40, 0.05);
}

.st-onboarding-active #st-onboarding-screen:has(.st-wiz-topbar:not([hidden])) .st-wiz-stage {
    padding-top: calc(58px + env(safe-area-inset-top, 0px));
}

.st-wiz-back {
    grid-area: back;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 6px 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    direction: rtl;
    transition: color 0.15s ease, background 0.15s ease;
}

.st-wiz-back:hover {
    color: var(--accent-dark);
    background: rgba(77, 175, 228, 0.08);
}

.st-wiz-back:active {
    background: rgba(77, 175, 228, 0.14);
}

.st-wiz-back-label {
    letter-spacing: 0.01em;
}

.st-wiz-back-icon {
    font-size: 0.78rem;
    opacity: 0.88;
    transition: transform 0.15s ease;
}

.st-wiz-back:hover .st-wiz-back-icon {
    transform: translateX(-2px);
}

.st-wiz-topbar-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    justify-self: start;
    font-size: 1rem;
    margin: 0;
    direction: ltr;
}

.st-wiz-topbar-brand .st-brand-logo-mark {
    width: 36px;
    height: 36px;
}

.st-wiz-topbar-brand .st-brand-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.st-wiz-progress {
    grid-area: progress;
    justify-self: center;
    flex: 0 0 auto;
    width: 190px;
    max-width: 42vw;
    height: 6px;
    background: rgba(11, 22, 40, 0.1);
    border-radius: 99px;
    overflow: hidden;
    margin: 0;
}

.st-wiz-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius: 99px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.st-wiz-stage {
    display: flex;
    flex-direction: column;
}

.st-wiz-step {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Bottom room clears the fixed CTA overlay. */
    padding: 20px 20px 120px;
    animation: stWizIn 0.35s ease;
}

/* Goal step onward — breathing room below the fixed topbar */
.st-wiz-step:not(.st-wiz-welcome) {
    padding-top: 44px;
}

.st-wiz-step[hidden] { display: none; }

/* Welcome step has its own in-content CTA (no fixed footer), so no reserve. */
.st-wiz-welcome {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

@keyframes stWizIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Box-less, centered step content */
.st-wiz-body {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.st-wiz-body-wide { max-width: 1040px; }

.st-wiz-body .st-field,
.st-wiz-body .st-wiz-links,
.st-wiz-body .st-wiz-custom-list { text-align: start; }

.st-wiz-grouptitle {
    font-size: 0.98rem;
    font-weight: 800;
    margin: 28px 0 14px;
    color: var(--ink);
}

.st-wiz-grouphint {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.6;
    margin: -6px 0 14px;
}

/* Legacy card (kept for safety; unused in the redesigned flow) */
.st-wiz-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid rgba(11, 22, 40, 0.05);
    border-radius: 26px;
    padding: 44px 40px;
    box-shadow: 0 30px 80px rgba(11, 22, 40, 0.12);
}

.st-wiz-card-wide { max-width: 760px; }

.st-wiz-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-dark);
    background: rgba(43, 143, 212, 0.1);
    padding: 5px 12px;
    border-radius: 99px;
    margin-bottom: 14px;
}

.st-wiz-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.st-wiz-sub {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 28px;
}

/* Persistent full-width bottom CTA — fixed overlay so it never takes space,
   with a transparent fade so content scrolling underneath blends out. */
.st-wiz-footer {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
        var(--card) 0%,
        var(--card) 52%,
        rgba(255, 255, 255, 0.82) 82%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.st-wiz-footer .st-wiz-skip-btn,
.st-wiz-footer .st-wiz-cta { pointer-events: auto; }

.st-wiz-footer[hidden] { display: none; }

.st-wiz-skip-btn {
    position: static;
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid rgba(11, 22, 40, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.st-wiz-skip-btn:hover {
    color: var(--accent-dark);
    border-color: rgba(77, 175, 228, 0.35);
    box-shadow: 0 6px 18px rgba(11, 22, 40, 0.1);
    transform: translateY(-1px);
}

.st-wiz-skip-btn[hidden] { display: none; }

.st-wiz-cta {
    width: 100%;
    max-width: 680px;
    padding: 15px 28px;
    font-size: 1.02rem;
    font-weight: 800;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    box-shadow: 0 12px 26px var(--glow);
}

.st-wiz-cta[hidden] { display: none; }

.st-wiz-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px var(--glow);
}

.st-wiz-cta:disabled { opacity: 0.6; cursor: default; }

.st-wiz-msg {
    max-width: min(520px, calc(100vw - 40px));
    margin: 18px auto 0;
    text-align: center;
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface);
}

/* Keep wizard alerts above the fixed footer CTA */
.st-wiz-msg:not([hidden]) {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(11, 22, 40, 0.12);
}

.st-onboarding-active #st-onboarding-screen:has(.st-wiz-skip-btn:not([hidden])) .st-wiz-msg:not([hidden]) {
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}

.st-wiz-msg.is-error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
.st-wiz-msg.is-success { background: rgba(16, 185, 129, 0.12); color: #047857; }

.st-slug-row-lg { font-size: 1.05rem; border-color: rgba(11, 22, 40, 0.18); }
.st-slug-row-lg .st-slug-prefix { font-size: 0.8rem; max-width: none; }
.st-slug-row-lg input { padding: 13px 12px; font-size: 1rem; text-align: left; }
.st-slug-row-lg:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }

/* ── Goal cards ─────────────────────────────────────────────────────── */
.st-goal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.st-goal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 16px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.st-goal-card:hover { transform: translateY(-2px); }

.st-goal-card.is-active {
    border-color: var(--accent);
    background: rgba(43, 143, 212, 0.06);
    box-shadow: 0 8px 24px var(--glow);
}

.st-goal-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--card);
    color: var(--accent);
    font-size: 1.4rem;
}

.st-goal-label { font-weight: 800; font-size: 1rem; }
.st-goal-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ── Theme picker ───────────────────────────────────────────────────── */
.st-theme-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.st-theme-tile {
    border: none;
    background: transparent;
    border-radius: 18px;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s, border-color 0.2s;
}

.st-theme-tile:hover { transform: translateY(-2px); }

.st-theme-tile.is-active {
    box-shadow: none;
}

.st-theme-preview-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(11, 22, 40, 0.08);
    background: #fff;
    box-shadow: none;
    transition: border-color 0.2s;
}

.st-theme-tile.is-active .st-theme-preview-card {
    border-color: var(--accent);
    box-shadow: none;
}

.st-theme-preview-screen {
    display: block;
    width: 100%;
    min-height: 360px;
    padding: 16px 12px 14px;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
}

.st-prev-wallpaper-card {
    position: relative;
    min-height: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.st-prev-wallpaper-card > :not(.st-prev-wallpaper-layer) {
    position: relative;
    z-index: 1;
}

.st-theme-preview-screen .st-prev-profile {
    margin-bottom: 12px;
}

.st-theme-preview-screen .st-prev-avatar {
    width: 52px;
    height: 52px;
    font-size: 0.85rem;
    margin: 0 auto 8px;
    overflow: hidden;
}

.st-theme-preview-screen .st-prev-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-theme-preview-screen .st-prev-avatar.is-logo-mark {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.st-theme-preview-screen .st-prev-avatar.is-logo-mark img {
    object-fit: contain;
}

.st-theme-preview-screen .st-prev-avatar.shape-rounded {
    border-radius: 16px;
}

.st-theme-preview-screen .st-prev-avatar.shape-square {
    border-radius: 8px;
}

.st-theme-preview-screen .st-prev-name {
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.25;
}

.st-theme-preview-screen .st-prev-bio {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    opacity: 0.88;
}

.st-theme-preview-screen .st-prev-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.st-theme-preview-screen .st-prev-link {
    font-size: 0.56rem;
    padding: 7px 8px;
    margin-bottom: 0;
    gap: 6px;
    border-radius: 999px;
    line-height: 1.2;
}

.st-theme-preview-screen .st-prev-icon {
    width: 18px;
    height: 18px;
    font-size: 0.48rem;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Platform picker ────────────────────────────────────────────────── */
.st-wiz-body-wide .st-platform-grid {
    grid-template-columns: repeat(4, 120px);
    max-width: 528px;
    gap: 16px;
}

.st-platform-grid {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    justify-content: center;
    gap: 16px;
    max-width: 528px;
    margin: 0 auto;
}

.st-platform-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 8px 12px;
    border: 2px solid var(--border);
    background: var(--card);
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(11, 22, 40, 0.04);
}

.st-platform-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 22, 40, 0.07);
}

.st-platform-chip.is-active {
    border-color: var(--accent);
    background: rgba(43, 143, 212, 0.05);
    box-shadow: 0 8px 22px var(--glow);
}

.st-platform-ic {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Onboarding platforms + links: boxed brand icons */
.st-platform-chip .st-platform-ic,
.st-wiz-link-mark {
    border-radius: 10px;
    padding: 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(11, 22, 40, 0.08);
    overflow: hidden;
}

.st-platform-chip .st-platform-ic.has-brand-icon,
.st-wiz-link-mark.has-brand-icon {
    background: #fff !important;
    color: inherit;
    padding: 2px;
}

.st-platform-chip .st-platform-ic .st-brand-icon,
.st-wiz-link-mark .st-brand-icon {
    border-radius: 10px;
}

.st-platform-chip .st-brand-icon.is-brand-icon-scaled,
.st-wiz-link-mark .st-brand-icon.is-brand-icon-scaled,
#st-add-link-modal .st-brand-icon.is-brand-icon-scaled {
    transform: scale(1.09);
    transform-origin: center center;
}

.st-prev-icon.has-brand-icon {
    background: transparent !important;
    color: inherit;
    padding: 0;
}

.st-brand-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: inherit;
}

.st-platform-label {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--ink);
}

.st-platform-check {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
}

.st-platform-chip.is-active .st-platform-check { opacity: 1; transform: scale(1); }

/* ── Wizard: links + profile ────────────────────────────────────────── */
.st-wiz-body-links {
    max-width: 560px;
    text-align: center;
}

.st-wiz-body-links .st-wiz-grouptitle,
.st-wiz-body-links .st-wiz-grouphint {
    text-align: center;
}

.st-wiz-body-links .st-wiz-add-custom-btn {
    margin-inline: auto;
}

.st-wiz-links-block,
.st-wiz-custom-block {
    margin-top: 8px;
}

.st-wiz-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.st-wiz-link-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 22, 40, 0.04);
}

.st-wiz-link-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 1.15rem;
}

.st-wiz-link-field {
    flex: 1;
    min-width: 0;
}

.st-wiz-link-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--ink);
}

.st-wiz-link-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.st-wiz-link-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

.st-wiz-custom-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.st-wiz-custom-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 22, 40, 0.04);
}

.st-wiz-custom-icon-btn {
    width: 48px;
    height: 48px;
    border: 1.5px dashed var(--border);
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s, transform 0.15s;
    overflow: hidden;
    padding: 0;
}

.st-wiz-custom-icon-btn.is-empty:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.st-wiz-custom-icon-btn.has-icon {
    border-style: solid;
    border-color: transparent;
    color: inherit;
}

.st-wiz-custom-icon-btn.has-icon:hover {
    transform: translateY(-1px);
}

.st-wiz-custom-icon-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.15rem;
}

.st-wiz-custom-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

.st-wiz-custom-icon-btn .st-tabler-icon-img {
    width: 24px;
    height: 24px;
    display: block;
}

.st-wiz-custom-icon-btn i {
    font-size: 1.15rem;
    color: var(--ink);
}

.st-wiz-custom-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.st-wiz-custom-url {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: #fff;
}

.st-wiz-custom-url:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

.st-wiz-custom-remove {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #fee2e2;
    color: #dc2626;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
}

.st-wiz-custom-remove:hover { background: #fecaca; }

.st-wiz-add-custom-btn { margin-top: 4px; }

.st-wiz-icon-picker {
    position: fixed;
    z-index: 60;
    width: min(320px, calc(100vw - 24px));
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(11, 22, 40, 0.16);
}

.st-wiz-icon-picker-title {
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ink);
}

.st-wiz-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    max-height: 260px;
    overflow-y: auto;
    padding-inline-end: 4px;
}

.st-wiz-icon-preset {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 4px;
    transition: border-color 0.2s, transform 0.15s;
}

.st-wiz-icon-preset img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.st-wiz-icon-preset:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.st-wiz-icon-upload {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.st-wiz-icon-upload:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.st-wiz-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
}

.st-avatar-preview-lg {
    position: relative;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(77, 175, 228, 0.22);
    background: linear-gradient(145deg, #f8fafc 0%, #eef2f8 100%);
    box-shadow: 0 10px 24px rgba(11, 22, 40, 0.08);
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.st-avatar-preview-lg:hover {
    border-color: rgba(77, 175, 228, 0.45);
    box-shadow: 0 14px 30px rgba(43, 143, 212, 0.14);
    transform: translateY(-1px);
}

.st-avatar-preview-lg .st-avatar-placeholder {
    font-size: 2rem;
    color: rgba(100, 116, 139, 0.55);
}

.st-avatar-preview-lg img {
    border-radius: 50%;
    object-fit: cover;
}

/* "+" badge on the avatar (Linktree-style) */
.st-wiz-avatar-add {
    position: absolute;
    right: 2px;
    bottom: 2px;
    left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--card);
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(43, 143, 212, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.st-wiz-avatar-add:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(43, 143, 212, 0.42);
}

.st-wiz-avatar-hint {
    margin: 12px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

/* Profile step — centered column + card form */
.st-wiz-body-profile {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}

.st-wiz-body-profile .st-wiz-title {
    font-size: 1.95rem;
    margin-bottom: 8px;
}

.st-wiz-body-profile .st-wiz-sub {
    margin-bottom: 28px;
    font-size: 0.98rem;
    line-height: 1.7;
}

.st-wiz-profile-card {
    background: var(--card);
    border: 1px solid rgba(11, 22, 40, 0.06);
    border-radius: 20px;
    padding: 28px 22px 22px;
    box-shadow: 0 8px 28px rgba(11, 22, 40, 0.06);
    text-align: start;
}

.st-wiz-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-wiz-body-profile .st-field {
    margin-bottom: 14px;
}

.st-wiz-body-profile .st-field:last-child {
    margin-bottom: 0;
}

.st-wiz-body-profile .st-field span {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ink);
}

.st-wiz-body-profile .st-field input[type="text"],
.st-wiz-body-profile .st-field textarea {
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 0.95rem;
    border: 1.5px solid var(--border);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.st-wiz-body-profile .st-field textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

.st-wiz-body-profile .st-field input:focus,
.st-wiz-body-profile .st-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

/* ── Wizard success + confetti ──────────────────────────────────────── */
.st-wiz-step-success { position: relative; }

.st-wiz-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.st-wiz-success .st-wiz-title { font-size: 2rem; }

.st-wiz-success-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.st-wiz-success-copy .st-wiz-sub {
    margin-bottom: 0;
}

.st-wiz-page-preview {
    width: min(360px, 100%);
    max-width: 92vw;
    aspect-ratio: 414 / 896;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

@media (min-width: 480px) {
    .st-wiz-page-preview {
        width: min(380px, 100%);
    }
}

.st-wiz-page-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

.st-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 60;
}

.st-confetti-piece {
    position: absolute;
    top: -8vh;
    opacity: 0;
    animation: stConfettiFall linear forwards;
    will-change: transform, opacity;
    transform: scale(var(--st-scale, 1));
}

.st-confetti-piece--rect {
    width: 9px;
    height: 15px;
    border-radius: 2px;
}

.st-confetti-piece--circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.st-confetti-piece--strip {
    width: 4px;
    height: 24px;
    border-radius: 99px;
}

.st-confetti-piece--ring {
    width: 13px;
    height: 13px;
    border: 2.5px solid;
    border-radius: 50%;
    background: transparent !important;
}

.st-confetti-piece--star {
    width: 14px;
    height: 14px;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}

.st-confetti-piece.is-shimmer {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 0 14px rgba(77, 175, 228, 0.45);
}

.st-confetti-piece.is-burst {
    top: 38%;
    left: 50%;
    margin-left: -5px;
    animation-name: stConfettiBurst;
    animation-timing-function: cubic-bezier(0.15, 0.85, 0.25, 1);
}

@keyframes stConfettiFall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg) scale(var(--st-scale, 1));
        opacity: 0;
    }
    6% { opacity: 1; }
    20% {
        transform: translate3d(calc(var(--st-drift, 0px) * 0.25), 22vh, 0)
            rotate(calc(var(--st-spin, 360deg) * 0.2)) scale(var(--st-scale, 1));
    }
    45% {
        transform: translate3d(calc(var(--st-drift, 0px) * -0.35), 48vh, 0)
            rotate(calc(var(--st-spin, 360deg) * 0.45)) scale(var(--st-scale, 1));
    }
    70% {
        transform: translate3d(calc(var(--st-drift, 0px) * 0.65), 74vh, 0)
            rotate(calc(var(--st-spin, 360deg) * 0.72)) scale(var(--st-scale, 1));
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--st-drift, 0px), 112vh, 0)
            rotate(var(--st-spin, 360deg)) scale(calc(var(--st-scale, 1) * 0.85));
        opacity: 0;
    }
}

@keyframes stConfettiBurst {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    100% {
        transform: translate3d(calc(-50% + var(--st-bx, 0px)), calc(-50% + var(--st-by, 0px)), 0)
            scale(1) rotate(var(--st-spin, 180deg));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-confetti-piece {
        animation: none !important;
        display: none;
    }
}

/* ── Dashboard (three-panel) ─────────────────────────────────────────── */
.st-dash {
    min-height: 100vh;
    height: 100%;
    position: relative;
}

.st-dash-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 120;
    min-width: min(92vw, 360px);
    max-width: min(92vw, 520px);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 16px 40px rgba(11, 22, 40, 0.16);
    border: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.st-dash-toast:not([hidden]) {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.st-dash-toast.is-success {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.st-dash-toast.is-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.st-dash-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    background: #f4f6f9;
}

.st-dash-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    flex-shrink: 0;
    direction: ltr;
}

.st-dash-topbar-start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: start;
}

.st-dash-topbar-center {
    display: flex;
    justify-content: center;
    justify-self: center;
    min-width: 0;
}

.st-dash-topbar-end {
    display: flex;
    align-items: center;
    justify-self: end;
    min-width: 0;
    gap: 8px;
}

.st-dash-topbar-brand {
    font-size: 1rem;
}

.st-dash-topbar-brand .st-brand-logo-mark {
    width: 36px;
    height: 36px;
}

.st-dash-topbar-brand .st-brand-logo-mark img {
    width: 100%;
    height: 100%;
}

.st-dash-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: var(--ink);
}

.st-dash-topbar-url {
    justify-self: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 999px;
    max-width: min(100%, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-dash-user-menu {
    position: relative;
}

.st-dash-share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(100%, 460px);
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    direction: ltr;
}

.st-dash-share-trigger:hover,
.st-dash-share-trigger[aria-expanded="true"] {
    border-color: rgba(43, 143, 212, 0.35);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(77, 175, 228, 0.12);
}

.st-dash-share-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.st-dash-share-logo img {
    width: 100%;
    height: 100%;
}

.st-dash-public-link {
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(320px, 40vw);
    color: var(--ink);
    letter-spacing: 0.01em;
}

.st-dash-share-icon {
    flex-shrink: 0;
    color: var(--accent);
    display: block;
}

.st-dash-user-dropdown {
    position: fixed;
    top: 57px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%) translateY(8px);
    width: min(300px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 22, 40, 0.14);
    padding: 12px;
    z-index: 50;
    direction: rtl;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.st-dash-user-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.st-dash-user-dropdown[hidden] {
    display: none !important;
}

.st-dash-user-dropdown-url {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
}

.st-dash-user-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

.st-dash-user-menuitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    text-align: start;
    transition: background 0.15s;
    direction: rtl;
}

.st-dash-user-menuitem:hover {
    background: rgba(77, 175, 228, 0.1);
}

.st-dash-user-menuitem i {
    width: 18px;
    color: var(--accent-dark);
}

.st-dash-user-dropdown-qr {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}

.st-dash-user-dropdown-qr canvas {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
}

.st-dash-accounts-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.st-dash-accounts-card {
    margin-top: 8px;
    padding: 18px 16px 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-dash-accounts-card-head {
    margin-bottom: 14px;
}

.st-dash-accounts-card-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.st-dash-accounts-card-hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted);
}

.st-dash-accounts-card .st-dash-accounts-list {
    gap: 10px;
    margin-bottom: 12px;
}

.st-dash-accounts-card .st-dash-account-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.st-dash-accounts-card .st-dash-account-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 6px 0;
    margin: 0;
    font-family: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
}

.st-dash-accounts-card .st-dash-account-main:disabled {
    cursor: default;
}

.st-dash-accounts-card .st-dash-account-item:not(.is-active):hover {
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(37, 99, 235, 0.03);
    transform: translateY(-1px);
}

.st-dash-accounts-card .st-dash-account-item:not(.is-active) .st-dash-account-main:hover {
    color: inherit;
}

.st-dash-accounts-card .st-dash-account-item.is-active {
    border-color: rgba(77, 175, 228, 0.55);
    background: rgba(77, 175, 228, 0.08);
    box-shadow: inset 0 0 0 1px rgba(77, 175, 228, 0.12);
}

.st-dash-account-menu {
    position: relative;
    flex: 0 0 auto;
}

.st-dash-account-menu .st-dash-link-menu-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: 220px;
}

.st-dash-accounts-card .st-dash-account-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
}

.st-dash-account-active-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0369a1;
    background: rgba(77, 175, 228, 0.18);
}

.st-dash-account-switch-hint {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}

.st-dash-account-switch-icon {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: #94a3b8;
    transform: scaleX(-1);
}

.st-dash-account-add-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #4DAFE4 0%, #2563eb 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.st-dash-account-add-primary:hover {
    filter: brightness(1.03);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.st-dash-account-add-primary:active {
    transform: scale(0.99);
}

.st-dash-account-add-primary[hidden],
.st-dash-account-add[hidden] {
    display: none;
}

.st-dash-pwa-install {
    margin-top: 16px;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-dash-pwa-install .st-dash-accounts-card-title {
    margin-bottom: 8px;
}

.st-dash-pwa-install .st-dash-accounts-card-hint {
    margin-bottom: 14px;
}

.st-dash-pwa-install-btn[hidden] {
    display: none;
}

.st-pwa-install-modal-panel {
    width: min(400px, calc(100vw - 32px));
}

.st-pwa-install-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 22px;
    text-align: center;
}

.st-pwa-install-modal-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.st-pwa-install-modal-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.st-pwa-install-modal-lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

.st-pwa-install-modal-hint {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #64748b;
}

.st-pwa-install-modal-hint[hidden] {
    display: none;
}

.st-pwa-install-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.st-pwa-install-modal-btn {
    width: 100%;
}

.st-pwa-install-modal-btn[hidden] {
    display: none;
}

.st-pwa-install-modal-later {
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px;
}

.st-pwa-install-modal-later:hover {
    color: #334155;
}

.st-dash-accounts-limit-note {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
    background: rgba(15, 23, 42, 0.04);
    text-align: center;
}

.st-dash-accounts-limit-note[hidden] {
    display: none;
}

.st-dash-accounts-card-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    text-align: center;
}

.st-dash-account-logout-btn {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.st-dash-account-logout-btn:hover {
    color: #64748b;
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(15, 23, 42, 0.05);
}

.st-dash-settings-accounts {
    margin-bottom: 8px;
}

.st-dash-settings-accounts-hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.st-dash-settings-accounts .st-dash-accounts-list {
    gap: 8px;
    margin-bottom: 8px;
}

.st-dash-settings-accounts .st-dash-account-item {
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: #fff;
}

.st-dash-settings-accounts .st-dash-account-item.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.06);
}

.st-dash-settings-accounts .st-dash-account-add {
    margin-top: 0;
    border: 1.5px dashed rgba(37, 99, 235, 0.28);
    border-radius: 14px;
    padding: 12px 16px;
    justify-content: center;
}

.st-dash-settings-accounts .st-dash-account-add:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.45);
}

.st-dash-accounts-title {
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.st-dash-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-dash-account-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: inherit;
    text-align: start;
    color: inherit;
}

.st-dash-account-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
}

.st-dash-account-main:disabled {
    cursor: default;
}

.st-dash-account-item:hover {
    background: rgba(15, 23, 42, 0.05);
}

.st-dash-account-item.is-active {
    background: rgba(37, 99, 235, 0.08);
}

.st-dash-account-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.08);
}

.st-dash-account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-dash-account-avatar-fallback {
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
}

.st-dash-account-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.st-dash-account-name {
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-dash-account-slug {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: end;
    direction: ltr;
}

.st-dash-account-check {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #2563eb;
}

.st-dash-account-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: #2563eb;
    cursor: pointer;
    text-align: start;
}

.st-dash-account-add:hover {
    background: rgba(37, 99, 235, 0.08);
}

.st-dash-account-add[hidden] {
    display: none;
}

.st-dash-user-dropdown-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.st-dash-user-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: #dc2626;
    cursor: pointer;
    text-align: start;
}

.st-dash-user-logout:hover {
    background: rgba(220, 38, 38, 0.08);
}

.st-dash-settings-account {
    margin-top: 4px;
}

.st-dash-settings-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: 1.5px solid rgba(220, 38, 38, 0.22);
    background: rgba(220, 38, 38, 0.04);
    padding: 13px 16px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.st-dash-settings-logout:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.35);
}

.st-dash-settings-logout:active {
    transform: scale(0.99);
}

.st-dash-mobile-share-btn {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--accent);
    cursor: pointer;
    place-items: center;
}

.st-dash-preview-topbar-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(43, 143, 212, 0.35);
    border-radius: 999px;
    background: rgba(77, 175, 228, 0.08);
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    direction: rtl;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.st-dash-preview-topbar-btn i {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.st-dash-preview-topbar-label {
    white-space: nowrap;
}

.st-dash-preview-topbar-btn:hover,
.st-dash-preview-topbar-btn:focus-visible {
    border-color: rgba(43, 143, 212, 0.55);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(77, 175, 228, 0.12);
}

.st-dash-mobile-share-btn[aria-expanded="true"] {
    border-color: rgba(43, 143, 212, 0.35);
    box-shadow: 0 0 0 3px rgba(77, 175, 228, 0.12);
}

.st-dash-user-sheet-head {
    display: none;
}

.st-dash-user-sheet-backdrop {
    display: none;
}

.st-dash-workspace {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    height: 100%;
}

.st-dash-sidebar {
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
    border-inline-end: 1px solid var(--border);
    padding: 18px 14px;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-dash-sidebar-head {
    padding: 0 8px 2px;
}

.st-dash-sidebar-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.st-dash-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-dash-navbtn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 10px 12px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    text-align: start;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.st-dash-navbtn:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(11, 22, 40, 0.06);
}

.st-dash-navicon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.st-dash-navicon-glyph {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--dash-nav-icon) center / contain no-repeat;
    mask: var(--dash-nav-icon) center / contain no-repeat;
}

.st-dash-navicon--content {
    background: rgba(43, 143, 212, 0.12);
    color: var(--accent-dark);
}

.st-dash-navicon--profile {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

.st-dash-navicon--design {
    background: rgba(219, 39, 119, 0.12);
    color: #be185d;
}

.st-dash-navicon--settings {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.st-dash-navtext {
    min-width: 0;
    line-height: 1.25;
}

.st-dash-navbtn.is-active {
    background: #fff;
    color: var(--ink);
    border-color: rgba(43, 143, 212, 0.18);
    box-shadow: 0 8px 24px rgba(11, 22, 40, 0.06);
}

.st-dash-navbtn.is-active .st-dash-navicon {
    box-shadow: 0 4px 12px rgba(11, 22, 40, 0.08);
    transform: scale(1.04);
}

.st-dash-navbtn.is-active .st-dash-navicon--content {
    background: rgba(43, 143, 212, 0.18);
    color: var(--accent-dark);
}

.st-dash-navbtn.is-active .st-dash-navicon--profile {
    background: rgba(124, 58, 237, 0.18);
    color: #5b21b6;
}

.st-dash-navbtn.is-active .st-dash-navicon--design {
    background: rgba(219, 39, 119, 0.18);
    color: #9d174d;
}

.st-dash-navbtn.is-active .st-dash-navicon--settings {
    background: rgba(100, 116, 139, 0.18);
    color: #334155;
}

/* Mobile bottom dock (hidden on desktop) */
.st-dash-mobile-nav {
    display: none;
}

.st-dash-mobile-navbtn {
    min-width: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    flex: 1 1 0;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.st-dash-mobile-navicon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    line-height: 1;
}

.st-dash-mobile-navicon .st-dash-navicon-glyph {
    width: 20px;
    height: 20px;
}

.st-dash-mobile-navlabel {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.st-dash-mobile-navbtn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(11, 22, 40, 0.1);
}

.st-dash-mobile-navbtn[data-dash-section="content"].is-active { color: #2563eb; }
.st-dash-mobile-navbtn[data-dash-section="header"].is-active { color: #7c3aed; }
.st-dash-mobile-navbtn[data-dash-section="design"].is-active { color: #ea580c; }
.st-dash-mobile-navbtn[data-dash-section="settings"].is-active { color: #475569; }

.st-dash-editor {
    overflow-y: auto;
    padding: 20px 24px 28px;
    min-height: 0;
    height: 100%;
}

.st-dash-section { animation: stWizIn 0.25s ease; }

.st-dash-panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: var(--ink);
}

.st-dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.st-dash-panel-head .st-dash-panel-title {
    flex: 1 1 auto;
    min-width: 0;
}

#st-dash-design-panel-head {
    margin-bottom: 20px;
}

.st-dash-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.st-dash-panel-toolbtn {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.st-dash-panel-toolbtn:hover:not(:disabled) {
    background: #f8fafc;
    color: var(--ink);
    border-color: #cbd5e1;
}

.st-dash-panel-toolbtn:disabled {
    opacity: 0.4;
    cursor: default;
}

.st-dash-panel-savebtn {
    border: none;
    border-radius: 10px;
    background: var(--accent, #2563eb);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 9px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.st-dash-panel-savebtn:hover {
    opacity: 0.92;
}

.st-dash-panel-toolbar[hidden] {
    display: none !important;
}

.st-dash-panel-toolbtn[hidden] {
    display: none !important;
}

.st-dash-panel-savebtn[hidden] {
    display: none !important;
}

.st-unsaved-changes-modal-body {
    padding: 0 20px 20px;
}

.st-unsaved-changes-msg {
    margin: 0 0 18px;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
}

.st-unsaved-changes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.st-unsaved-changes-actions .st-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.st-dash-content-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 20px;
}

.st-dash-profile-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.st-dash-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.st-dash-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-dash-profile-text-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 0;
    padding: 4px;
    margin: 0;
    border: none;
    background: transparent;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.st-dash-profile-text-btn:hover {
    background: #f1f5f9;
}

.st-dash-profile-text-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.st-dash-profile-text-edit {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 0.62rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.st-dash-profile-text-btn:hover .st-dash-profile-text-edit {
    opacity: 1;
}

.st-dash-profile-avatar-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

#st-dash-profile-avatar-btn .st-header-media-thumb-main {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1.5px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.10);
    background:
        radial-gradient(circle at 50% 42%, #f8fafc 0%, #e2e8f0 100%);
}

#st-dash-profile-avatar-btn:hover .st-header-media-thumb-main {
    box-shadow:
        0 0 0 1.5px var(--accent),
        0 4px 12px rgba(15, 23, 42, 0.12);
}

#st-dash-profile-avatar-btn .st-avatar-placeholder {
    font-size: 0.95rem;
    color: #94a3b8;
}

#st-dash-profile-avatar-btn .st-header-media-thumb-edit {
    width: 20px;
    height: 20px;
    font-size: 0.58rem;
    border: 1.5px solid #fff;
    box-shadow:
        0 0 0 1px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transition: opacity 0.15s ease;
}

#st-dash-profile-avatar-btn:hover .st-header-media-thumb-edit {
    opacity: 1;
}

.st-dash-profile-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-dash-profile-bio {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.st-dash-profile-bio[hidden] {
    display: none !important;
}

.st-dash-profile-socials {
    --profile-social-color: #94a3b8;
    --profile-social-color-hover: #475569;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 24px;
    width: 100%;
}

.st-dash-profile-social-btn {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--profile-social-color);
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.st-dash-profile-social-btn:not(.is-add):hover {
    color: var(--profile-social-color-hover);
}

.st-dash-profile-social-btn.is-configured {
    color: #0f172a;
}

.st-dash-profile-social-btn.is-configured:hover {
    color: #000000;
}

.st-dash-profile-social-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.st-dash-profile-social-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    flex-shrink: 0;
}

.st-dash-profile-social-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--profile-social-color);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.st-dash-profile-social-clicks {
    position: absolute;
    bottom: -6px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
}

[dir="rtl"] .st-dash-profile-social-clicks {
    transform: translateX(50%);
}

.st-dash-profile-social-btn:not(.is-add):hover .st-dash-profile-social-badge {
    border-color: #cbd5e1;
    color: var(--profile-social-color-hover);
}

.st-dash-profile-social-btn.is-add {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #e2e8f0;
    color: #334155;
    line-height: 1;
}

.st-dash-profile-social-btn.is-add:hover {
    background: #cbd5e1;
    border-color: #94a3b8;
    color: #0f172a;
    transform: scale(0.98);
}

.st-dash-profile-social-btn.is-add i {
    pointer-events: none;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.8125rem;
    line-height: 1;
}

.st-dash-profile-socials.is-empty-state {
    gap: 12px;
}

.st-dash-profile-social-btn .st-tabler-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.st-dash-modal-body.st-profile-social-setup-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.st-dash-modal-body.st-profile-social-setup-body .st-field {
    gap: 8px;
    margin-bottom: 0;
}

.st-dash-modal-body.st-profile-social-setup-body .st-field > span {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.st-dash-modal-body.st-profile-social-setup-body .st-field input[type="text"],
.st-dash-modal-body.st-profile-social-setup-body .st-field input[type="email"],
.st-dash-modal-body.st-profile-social-setup-body .st-field input[type="tel"] {
    margin-top: 2px;
}

.st-dash-modal-body.st-profile-social-setup-body .st-field-hint {
    margin-top: 4px;
    line-height: 1.45;
}

.st-profile-social-picker-body {
    padding: 0 20px 20px;
}

.st-profile-social-picker-body {
    max-height: min(52vh, 420px);
    overflow: auto;
}

.st-profile-social-picker-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
}

.st-profile-social-picker-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    text-align: inherit;
    transition: background 0.15s ease;
}

.st-profile-social-picker-item:hover {
    background: #f1f5f9;
}

.st-profile-social-picker-icon-wrap {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    color: #475569;
}

.st-profile-social-picker-icon-wrap.has-brand-icon {
    width: 28px;
    height: 28px;
}

.st-profile-social-picker-icon-wrap .st-brand-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.st-profile-social-picker-icon-wrap .st-brand-icon.is-brand-icon-scaled {
    transform: scale(1.08);
    transform-origin: center;
}

.st-profile-social-picker-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.st-profile-social-picker-item .st-tabler-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.st-profile-social-picker-label {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-prev-profile-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    --profile-social-bg: #0f172a;
    --profile-social-icon-color: #ffffff;
    --profile-social-size: 36px;
    --profile-social-icon-size: 20px;
}

.st-prev-profile-social-link {
    position: relative;
    z-index: 0;
    cursor: default;
    overflow: hidden;
    border: 0;
    width: var(--profile-social-size, 52px);
    height: var(--profile-social-size, 52px);
    border-radius: 50%;
    background: var(--profile-social-bg, #0f172a);
    padding: 0;
    margin: 0;
    color: var(--profile-social-icon-color, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease;
}

.st-prev-profile-social-link:hover {
    transform: scale(1.06);
}

.st-prev-profile-social-icon {
    display: block;
    width: var(--profile-social-icon-size, 22px);
    height: var(--profile-social-icon-size, 22px);
    background-color: var(--profile-social-icon-color, #ffffff);
    pointer-events: none;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    flex-shrink: 0;
}

.st-dash-content-actions {
    display: flex;
    width: 100%;
    gap: 10px;
}

.st-dash-content-cta {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.st-dash-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.st-dash-cta-icon i {
    font-size: 11px;
    line-height: 1;
}

.st-dash-content-cta.st-btn-outline {
    background: #fff;
    border-width: 2px;
}

.st-dash-content-cta.st-btn-outline:hover:not(:disabled) {
    background: #f8fafc;
    transform: translateY(-1px);
}

.st-dash-content-cta.st-btn-primary {
    min-height: 48px;
    box-shadow: 0 6px 20px var(--glow);
}

.st-dash-content-view[hidden] { display: none !important; }

.st-dash-content-subhead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.st-dash-content-back {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.st-dash-content-back:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.st-dash-content-subtitle {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
}

.st-dash-picker-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.st-dash-picker-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 0;
    font-family: inherit;
    font-size: 0.9rem;
}

.st-dash-picker-search input:focus { outline: none; }

.st-dash-picker-quick {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.st-dash-picker-quickbtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.st-dash-picker-body {
    padding-bottom: 8px;
}

.st-dash-link-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
}

.st-dash-link-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 4px;
}

.st-dash-link-form-icon.has-brand-icon { background: transparent; }
.st-dash-link-form-icon img { width: 100%; height: 100%; object-fit: contain; }
.st-dash-link-form-icon i { font-size: 1.2rem; color: #fff; }

.st-dash-link-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.st-dash-link-form input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}

.st-dash-form-section-label {
    margin: 0 0 16px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
}

.st-dash-form-section-label--sub {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 700;
}

.st-dash-thumb-block {
    margin-top: 4px;
}

.st-dash-thumb-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-dash-thumb-card-change {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    white-space: nowrap;
}

.st-dash-thumb-card-change:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.st-dash-thumb-card-change i {
    font-size: 0.72rem;
    color: #64748b;
}

.st-field--bare {
    gap: 0;
}

.st-dash-platform-url-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 12px 16px;
    text-align: start;
    border-style: dashed;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--muted);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.st-dash-platform-url-btn:hover:not(:disabled) {
    border-color: var(--brand-primary-mid, #4DAFE4);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(77, 175, 228, 0.12);
}

.st-dash-platform-url-btn.has-url {
    border-style: solid;
    border-color: #dbeafe;
    background: #fff;
    color: var(--ink);
}

.st-dash-platform-url-btn.is-empty .st-dash-platform-url-btn-text {
    font-weight: 700;
    color: var(--ink);
}

.st-dash-platform-url-btn.is-updating {
    border-style: solid;
    border-color: #dbeafe;
    background: #fff;
    color: var(--ink);
    cursor: wait;
}

.st-dash-platform-url-btn.is-updating .st-dash-platform-url-btn-text[data-updating="1"]::after {
    content: ' · جاري التحديث…';
    direction: rtl;
    unicode-bidi: isolate;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.88em;
}

.st-dash-platform-url-btn:disabled {
    opacity: 1;
}

.st-dash-platform-url-btn-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

.st-dash-platform-url-btn-end {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: #64748b;
}

.st-dash-platform-url-btn.has-url .st-dash-platform-url-btn-end {
    background: rgba(77, 175, 228, 0.12);
    color: var(--brand-primary-mid, #4DAFE4);
}

.st-dash-platform-url-btn.is-updating .st-dash-platform-url-btn-end {
    background: transparent;
    color: var(--brand-primary-mid, #4DAFE4);
}

.st-dash-platform-url-btn-icon {
    font-size: 0.82rem;
}

.st-platform-url-modal-body {
    padding: 0 20px 20px;
}

.st-profile-text-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 20px 20px;
}

.st-profile-text-modal-body .st-field textarea {
    resize: vertical;
    min-height: 88px;
}

.st-whatsapp-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 14px;
}

.st-whatsapp-mode-tabs--compact {
    margin-bottom: 10px;
}

.st-whatsapp-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.st-whatsapp-mode-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.st-whatsapp-mode-tab i {
    font-size: 0.82rem;
    color: #25D366;
}

.st-whatsapp-panel .st-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

.st-whatsapp-phone-wrap {
    display: flex;
    align-items: stretch;
    direction: ltr;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-whatsapp-phone-wrap:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.st-whatsapp-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    border-left: 1px solid #e2e8f0;
    user-select: none;
}

.st-whatsapp-phone-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.95rem;
    outline: none;
}

.st-whatsapp-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.12);
    color: #16a34a;
    font-size: 0.72rem;
    vertical-align: middle;
}

.st-dash-platform-url-btn.is-whatsapp-contact .st-dash-platform-url-btn-text,
.st-dash-platform-url-btn.is-whatsapp-group .st-dash-platform-url-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.st-wiz-link-row.is-whatsapp .st-wiz-whatsapp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.st-wiz-whatsapp-panel {
    width: 100%;
}

.st-wiz-whatsapp-panel[hidden] {
    display: none !important;
}

.st-dash-link-item.is-empty-link {
    border-style: dashed;
    border-color: #dbeafe;
    background: #fcfdff;
}

.st-dash-link-item.is-empty-link .st-dash-link-label {
    color: #64748b;
}

.st-dash-archived-block {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

.st-dash-archived-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.st-dash-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-dash-collection {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    touch-action: manipulation;
}

.st-dash-collection.is-hidden-link {
    opacity: 0.78;
}

.st-dash-collection-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 4px 2px 2px;
}

.st-dash-collection-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
}

.st-dash-collection-body {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.st-dash-collection-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.st-dash-collection-collapse {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.st-dash-collection-collapse i {
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.st-dash-collection-collapse:hover,
.st-dash-collection-collapse:focus-visible {
    background: #e2e8f0;
    color: #0f172a;
    outline: none;
}

.st-dash-collection.is-collapsed .st-dash-collection-collapse {
    color: #0f172a;
    background: #e2e8f0;
}

.st-dash-collection.is-collapsed .st-dash-collection-list,
.st-dash-collection.is-collapsed .st-dash-collection-add {
    display: none;
}

.st-dash-collection-title {
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 6px 8px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #0f172a);
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.st-dash-collection-title:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.st-dash-collection-title:focus,
.st-dash-collection.is-editing-title .st-dash-collection-title {
    border-color: var(--accent, #2b8fd4);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.14);
    outline: none;
}

.st-dash-collection-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 52px;
    border-radius: 14px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.st-dash-collection-list.st-dash-collection-list--over {
    background: rgba(77, 175, 228, 0.08);
    box-shadow: inset 0 0 0 1.5px rgba(77, 175, 228, 0.35);
}

.st-dash-collection-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.st-dash-collection-add:hover {
    border-color: #94a3b8;
    background: #fff;
    color: #0f172a;
}

.st-dash-link-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 12px 12px 14px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    /* Do not transition transform — Sortable sets it every frame while dragging. */
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}

.st-dash-link-item:hover {
    border-color: #d7e3ef;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.st-dash-link-item--chosen {
    border-color: #bfdbfe;
    box-shadow: 0 10px 28px rgba(77, 175, 228, 0.14);
    cursor: pointer;
    transition: none;
}

.st-dash-link-item--ghost {
    background: #f8fafc;
    box-shadow: none;
    cursor: pointer;
}

.st-dash-link-item--ghost .st-dash-link-icon,
.st-dash-link-item--ghost .st-dash-link-body {
    opacity: 0.45;
}

.st-dash-link-item--drag {
    transform: scale(1.01);
    cursor: grabbing;
    transition: none !important;
    touch-action: none;
}

.st-dash-collection.st-dash-link-item--chosen,
.st-dash-collection.st-dash-link-item--drag,
.st-dash-collection.sortable-chosen,
.st-dash-collection.sortable-drag {
    transition: none !important;
    touch-action: none;
}

.st-dash-link-item.is-hidden-link {
    background: #f8fafc;
}

.st-dash-link-item.is-hidden-link .st-dash-link-icon,
.st-dash-link-item.is-hidden-link .st-dash-link-body {
    opacity: 0.68;
}

.st-dash-link-item.is-archived-link .st-dash-link-icon,
.st-dash-link-item.is-archived-link .st-dash-link-body {
    opacity: 0.78;
}

.st-dash-link-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.st-dash-link-icon.has-brand-icon {
    --st-brand-thumb-radius: 10px;
    background: #fff;
    padding: 1px;
    box-sizing: border-box;
    border-radius: var(--st-brand-thumb-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

button.st-dash-link-thumb.has-brand-icon {
    padding: 1px;
    background: #fff;
    border-radius: var(--st-brand-thumb-radius, 10px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.st-dash-link-icon.has-brand-icon .st-dash-link-thumb-main {
    border-radius: var(--st-brand-thumb-radius, 10px);
    overflow: hidden;
}

.st-dash-link-icon.has-brand-icon .st-brand-icon,
.st-dash-link-icon.has-brand-icon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--st-brand-thumb-radius, 10px);
}

.st-dash-link-item.is-brand-icon-scaled .st-dash-link-icon:not(.st-dash-link-thumb--detail) .st-brand-icon,
#st-add-link-modal .st-add-link-item.is-brand-icon-scaled .st-brand-icon {
    transform: scale(1.09);
}
.st-dash-link-icon.has-tabler-icon { background: #ecfdf5; color: #059669; }
.st-dash-link-icon.is-thumb-empty { background: #f1f5f9; color: #94a3b8; }
.st-dash-link-icon img { width: 100%; height: 100%; object-fit: contain; }
.st-dash-link-icon i { font-size: 0.95rem; color: #fff; }
.st-dash-link-icon.has-tabler-icon .st-tabler-icon-img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}
.st-dash-link-icon.is-thumb-empty i { color: inherit; }
.st-tabler-icon-img {
    object-fit: contain;
    display: block;
}

button.st-dash-link-thumb {
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.st-dash-link-thumb-main {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.st-dash-link-thumb-edit {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: rgba(15, 23, 42, 0.52);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.st-dash-link-thumb-edit i {
    font-size: 0.78rem;
    color: #fff;
}

button.st-dash-link-thumb:hover,
button.st-dash-link-thumb:focus-visible {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

button.st-dash-link-thumb.has-brand-icon:hover,
button.st-dash-link-thumb.has-brand-icon:focus-visible {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
}

button.st-dash-link-thumb:hover .st-dash-link-thumb-edit,
button.st-dash-link-thumb:focus-visible .st-dash-link-thumb-edit {
    opacity: 1;
}

button.st-dash-link-thumb:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

.st-dash-link-thumb--detail {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.st-dash-link-thumb--detail.has-brand-icon {
    --st-brand-thumb-radius: 12px;
    padding: 7px;
    border-radius: var(--st-brand-thumb-radius);
}

.st-dash-link-thumb--detail.has-brand-icon .st-dash-link-thumb-main {
    border-radius: var(--st-brand-thumb-radius);
    overflow: hidden;
}

.st-dash-link-thumb--detail.has-brand-icon .st-brand-icon {
    border-radius: var(--st-brand-thumb-radius);
}

.st-dash-link-thumb--detail.is-empty,
.st-dash-link-icon.is-empty {
    background: #f1f5f9;
    border: 1.5px dashed rgba(15, 23, 42, 0.12);
}

.st-dash-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    font-size: 1.25rem;
}

.st-dash-link-thumb--detail .st-dash-link-thumb-edit i {
    font-size: 0.95rem;
}

.st-dash-link-thumb--detail img { object-fit: cover; }

@media (max-width: 520px) {
    .st-dash-thumb-card {
        flex-wrap: wrap;
    }

    .st-dash-thumb-card-change {
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
    }
}

.st-dash-link-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.st-dash-link-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #64748b;
}

.st-dash-link-clicks {
    font-weight: 600;
    color: #64748b;
}

.st-dash-link-meta-sep {
    color: #cbd5e1;
    font-weight: 700;
}

.st-dash-link-domain {
    font-weight: 500;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.st-dash-link-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.st-dash-link-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.st-dash-link-status {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.st-dash-link-status--official {
    background: rgba(77, 175, 228, 0.14);
    color: var(--accent-dark, #2B8FD4);
}

.st-dash-link-status--setup {
    background: #fef3c7;
    color: #b45309;
}

.st-dash-link-setup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border: none;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.st-dash-link-setup-badge:hover,
.st-dash-link-setup-badge:focus-visible {
    background: #fde68a;
    outline: none;
}

.st-dash-link-setup-badge .st-dash-link-setup-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
    color: inherit;
}

.st-dash-official-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
}

.st-dash-official-toggle input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #4DAFE4);
    cursor: pointer;
}

.st-dash-official-toggle-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.st-dash-official-toggle-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
}

.st-dash-official-toggle-hint {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.45;
}

.st-prev-official {
    margin-bottom: 12px;
}

.st-prev-official-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 800;
}

.st-prev-official-btn i {
    font-size: 0.9rem;
}

.st-dash-link-menu {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
}

.st-dash-link-menu-trigger {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.st-dash-link-menu-trigger i {
    font-size: 1rem;
    line-height: 1;
}

.st-dash-link-menu-trigger:hover,
.st-dash-link-menu-trigger:focus-visible,
.st-dash-link-menu.is-open .st-dash-link-menu-trigger {
    background: #e2e8f0;
    color: #0f172a;
}

.st-dash-link-menu-dropdown {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    z-index: 20;
}

.st-dash-link-menu-dropdown[hidden] { display: none; }

.st-dash-link-menuitem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    text-align: start;
}

.st-dash-link-menuitem i {
    width: 16px;
    color: #64748b;
    font-size: 0.82rem;
}

.st-dash-link-menuitem:hover:not(:disabled) {
    background: #f1f5f9;
}

.st-dash-link-menuitem:disabled {
    opacity: 0.45;
    cursor: default;
}

.st-dash-link-menu-dropdown .is-danger .st-dash-link-menuitem {
    color: #dc2626;
}

.st-dash-link-menu-dropdown .is-danger .st-dash-link-menuitem i {
    color: #dc2626;
}

.st-dash-empty {
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    padding: 32px 16px;
}

.st-dash-savebar {
    position: sticky;
    bottom: 0;
    margin-top: 24px;
    padding: 14px 0 0;
    background: linear-gradient(to top, #f4f6f9 75%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 2;
}

.st-dash-preview {
    background: #eef1f5;
    border-inline-start: 1px solid var(--border);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.st-dash-preview-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

.st-dash-preview-open-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(11, 22, 40, 0.1);
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.st-dash-preview-open-btn i {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.st-dash-preview-open-label {
    display: none;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.st-dash-preview-open-btn:hover {
    color: var(--brand-primary-mid, #4DAFE4);
    border-color: rgba(77, 175, 228, 0.35);
    box-shadow: 0 6px 18px rgba(77, 175, 228, 0.16);
}

.st-dash-preview-open-btn:focus-visible {
    outline: 2px solid rgba(77, 175, 228, 0.45);
    outline-offset: 2px;
}

.st-dash-preview-open-btn:active {
    transform: scale(0.96);
}

.st-dash-preview-modal-body .st-dash-preview-open-btn:active {
    transform: translateX(-50%) scale(0.96);
}

.st-dash-preview-frame {
    position: relative;
    width: min(100%, 350px, calc((100vh - 100px) * 414 / 896));
    aspect-ratio: 414 / 896;
    height: auto;
    max-height: calc(100vh - 100px);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 48px rgba(11, 22, 40, 0.12);
    display: flex;
    flex: 0 0 auto;
}

.st-dash-preview-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    pointer-events: none;
}

.st-dash-preview-frame.is-loading .st-dash-preview-loading {
    display: flex;
}

.st-dash-preview-loading i {
    font-size: 1.85rem;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.9));
}

.st-dash-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}

.st-dash-preview-modal {
    padding: 20px;
    place-items: center;
}

.st-dash-preview-modal-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    height: min(calc(100vh - 40px), 920px);
    max-height: calc(100vh - 40px);
    border-radius: 20px;
    background: #eef1f5;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(11, 22, 40, 0.18);
}

.st-dash-preview-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
}

.st-dash-preview-modal-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.st-dash-preview-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-dash-preview-modal-close:hover,
.st-dash-preview-modal-close:focus-visible {
    border-color: rgba(43, 143, 212, 0.35);
    color: var(--accent);
}

.st-dash-preview-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.st-dash-preview-modal-body .st-dash-preview-inner {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 390px, calc((100vh - 120px) * 414 / 896));
    max-width: 100%;
    gap: 0;
}

.st-dash-preview-modal-body .st-dash-preview-frame {
    width: 100%;
    max-height: calc(100vh - 120px);
}

.st-dash-preview-modal-body .st-dash-preview-open-btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 8px;
}

@media (min-width: 420px) {
    .st-dash-preview-modal-body .st-dash-preview-open-btn {
        width: auto;
        height: auto;
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 999px;
    }

    .st-dash-preview-modal-body .st-dash-preview-open-btn .st-dash-preview-open-label {
        display: inline;
    }
}

.st-header-media-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

#st-dash-design-text .st-header-media-rows,
#st-dash-design-colors .st-header-media-rows {
    gap: 16px;
    margin-bottom: 0;
}

#st-dash-design-text > .st-header-media-row + .st-header-media-row,
#st-dash-design-colors > .st-header-media-row + .st-header-media-row {
    margin-top: 16px;
}

.st-header-media-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.st-header-media-row--top {
    align-items: flex-start;
}

.st-header-media-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
    flex-shrink: 0;
}

.st-header-media-label em {
    color: #ef4444;
    font-style: normal;
}

.st-header-media-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.st-header-media-control--grow {
    flex: 1;
    max-width: min(440px, 78%);
}

.st-header-inline-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-header-inline-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.st-header-inline-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.45;
    font-weight: 500;
}

.st-title-style-tabs {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    background: #f1f5f9;
}

.st-title-style-tab {
    min-width: 64px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.st-title-style-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.st-color-field {
    position: relative;
}

.st-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px 6px 6px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-color-swatch:hover,
.st-color-swatch[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.st-color-swatch-chip {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.st-color-swatch-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
    direction: ltr;
    unicode-bidi: isolate;
}

.st-design-font-row {
    margin-bottom: 16px;
}

.st-font-field {
    position: relative;
}

.st-font-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: min(240px, 70vw);
    max-width: 280px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-font-trigger:hover,
.st-font-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.12);
}

.st-font-trigger-label {
    flex: 1;
    min-width: 0;
    text-align: start;
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.st-font-preview-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: inline-start center;
    pointer-events: none;
    user-select: none;
}

.st-font-trigger > i {
    font-size: 0.7rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.st-font-picker-panel {
    width: min(560px, 100%);
    max-height: min(90vh, 780px);
}

.st-font-picker-modal-body {
    padding: 0 20px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.st-font-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow-y: auto;
    max-height: min(70vh, 600px);
    margin-top: 18px;
    padding: 2px 2px 4px;
    align-content: start;
}

.st-font-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 76px;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background: rgb(242, 241, 239);
    text-align: center;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.st-font-option .st-font-preview-img {
    height: 48px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
}

.st-font-option:hover {
    background: rgb(232, 230, 226);
}

.st-font-option.is-active {
    background: rgb(232, 230, 226);
    box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 560px) {
    .st-font-picker-grid {
        grid-template-columns: 1fr;
        max-height: min(65vh, 520px);
        margin-top: 14px;
    }

    .st-font-option {
        min-height: 68px;
        padding: 12px 14px;
    }

    .st-font-option .st-font-preview-img {
        height: 42px;
    }
}

.st-prev-name,
.st-prev-hero-name {
    font-family: var(--title-font, inherit);
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: var(--profile-title-white-space, normal);
}

.st-theme-preview-screen,
.st-dash-preview-phone .st-prev-profile {
    font-family: var(--page-font, inherit);
}

/* Pickr (@simonwep/pickr) — portal-styled title color palette */
.pcr-app.st-pickr {
    --st-pickr-radius: 12px;
    direction: ltr;
    font-family: inherit;
    z-index: 80 !important;
    width: 280px !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
    padding: 14px !important;
    border: 1px solid rgba(11, 22, 40, 0.08);
    border-radius: 16px !important;
    background: #fff;
    box-shadow:
        0 4px 6px rgba(11, 22, 40, 0.04),
        0 20px 48px rgba(11, 22, 40, 0.16) !important;
    color: var(--ink);
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 148px auto !important;
    grid-gap: 12px !important;
    height: auto !important;
    width: 100%;
    align-items: stretch;
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-preview,
.pcr-app.st-pickr .pcr-swatches {
    display: none !important;
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-palette {
    grid-area: 1 / 1 / 2 / 2 !important;
    width: 100%;
    height: 100%;
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette {
    border-radius: var(--st-pickr-radius);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(11, 22, 40, 0.08);
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before {
    border-radius: var(--st-pickr-radius);
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-chooser {
    grid-area: 2 / 1 / 3 / 2 !important;
    height: 12px !important;
    margin: 0 !important;
}

.pcr-app.st-pickr[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider {
    height: 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(11, 22, 40, 0.08);
}

.pcr-app.st-pickr .pcr-selection .pcr-picker {
    width: 16px;
    height: 16px;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(11, 22, 40, 0.35);
}

.pcr-app.st-pickr .pcr-interaction {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 14px 0 0;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(11, 22, 40, 0.08);
    align-items: stretch;
}

.pcr-app.st-pickr .pcr-interaction > * {
    margin: 0 !important;
}

.pcr-app.st-pickr .pcr-interaction .pcr-result {
    grid-column: 1;
    min-width: 0;
    flex: none;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    direction: ltr;
    text-align: left;
    box-sizing: border-box;
}

.pcr-app.st-pickr .pcr-interaction .pcr-result:hover {
    filter: none;
    border-color: rgba(43, 143, 212, 0.45);
}

.pcr-app.st-pickr .pcr-interaction .pcr-result:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.16);
}

.pcr-app.st-pickr .pcr-interaction .pcr-result::selection {
    background: var(--accent);
    color: #fff;
}

.pcr-app.st-pickr .pcr-interaction input.pcr-save {
    grid-column: 2;
    min-width: 72px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--accent) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(11, 22, 40, 0.08);
    transition: background 0.15s ease;
}

.pcr-app.st-pickr .pcr-interaction input.pcr-save:hover {
    filter: none;
    background: var(--accent-dark) !important;
}

.pcr-app.st-pickr .pcr-interaction input.pcr-save:focus {
    box-shadow: 0 0 0 3px rgba(43, 143, 212, 0.22);
}

.pcr-app.st-pickr .pcr-interaction input.pcr-type {
    display: none !important;
}

.st-header-media-thumb {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.st-header-media-thumb-main {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
}

#st-avatar-thumb-btn .st-header-media-thumb-main,
#st-banner-thumb-btn .st-header-media-thumb-main,
#st-title-logo-thumb-btn .st-header-media-thumb-main {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1.5px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.10);
    background:
        radial-gradient(circle at 50% 42%, #f8fafc 0%, #e2e8f0 100%);
}

#st-avatar-thumb-btn:hover .st-header-media-thumb-main,
#st-banner-thumb-btn:hover .st-header-media-thumb-main,
#st-title-logo-thumb-btn:hover .st-header-media-thumb-main {
    box-shadow:
        0 0 0 1.5px var(--accent),
        0 4px 12px rgba(15, 23, 42, 0.12);
}

#st-avatar-thumb-btn .st-avatar-placeholder,
#st-banner-thumb-btn .st-avatar-placeholder,
#st-title-logo-thumb-btn .st-avatar-placeholder {
    font-size: 1.05rem;
    color: #94a3b8;
}

/* Wallpaper background image / video thumbs — larger landscape preview */
#st-wallpaper-image-upload,
#st-wallpaper-video-upload {
    width: 112px;
    height: 72px;
}

#st-wallpaper-image-upload .st-header-media-thumb-main,
#st-wallpaper-video-upload .st-header-media-thumb-main {
    border-radius: 14px;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1.5px var(--border),
        0 2px 10px rgba(15, 23, 42, 0.10);
    background:
        linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
}

#st-wallpaper-image-upload:hover .st-header-media-thumb-main,
#st-wallpaper-video-upload:hover .st-header-media-thumb-main {
    box-shadow:
        0 0 0 1.5px var(--accent),
        0 4px 14px rgba(15, 23, 42, 0.14);
}

#st-wallpaper-image-upload .st-avatar-placeholder,
#st-wallpaper-video-upload .st-avatar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 1.25rem;
    color: #64748b;
}

#st-wallpaper-video-upload .st-avatar-placeholder svg {
    display: block;
    width: 28px;
    height: 28px;
}

#st-wallpaper-image-upload .st-header-media-thumb-edit,
#st-wallpaper-video-upload .st-header-media-thumb-edit {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
    border: 1.5px solid #fff;
    box-shadow:
        0 0 0 1px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.12);
    background: var(--accent);
    color: #fff;
}

.st-header-media-thumb-main img,
.st-header-media-thumb-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.st-header-media-thumb-edit {
    position: absolute;
    inset-inline-end: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 0.62rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

#st-avatar-thumb-btn .st-header-media-thumb-edit,
#st-banner-thumb-btn .st-header-media-thumb-edit,
#st-title-logo-thumb-btn .st-header-media-thumb-edit {
    border: 1.5px solid #fff;
    box-shadow:
        0 0 0 1px var(--border),
        0 2px 8px rgba(15, 23, 42, 0.12);
}

.st-header-layout-title {
    margin-top: 0;
}

.st-header-layout-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.st-header-layout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}

.st-header-layout-card.is-active {
    border-color: var(--ink);
    color: var(--ink);
    background: #fff;
}

.st-header-layout-thumb {
    width: 100%;
    height: 84px;
    border-radius: 10px;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.st-header-layout-name {
    margin-top: auto;
    line-height: 1.2;
    text-align: center;
}

.st-layout-mock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.st-layout-mock-img {
    display: block;
    object-fit: cover;
    max-width: 100%;
    flex-shrink: 0;
}

.st-layout-mock--classic .st-layout-mock-img--avatar {
    width: min(56px, 100%);
    height: auto;
    aspect-ratio: 1;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
}

.st-layout-mock--classic.is-empty-avatar::after {
    content: '';
    width: min(56px, 70%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #e2e8f0;
}

.st-layout-mock--hero.is-empty-avatar {
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
}

.st-layout-mock--hero.is-empty-avatar .st-layout-mock-hero-overlay {
    display: block;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.18) 0%, transparent 55%);
}

.st-layout-mock--banner.is-empty-avatar::after {
    content: '';
    position: relative;
    width: min(40px, 70%);
    aspect-ratio: 1;
    margin: -20px auto 0;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    z-index: 1;
}

.st-layout-mock--shape.is-empty-avatar .st-layout-mock-shape-frame {
    background: #e2e8f0;
}

.st-layout-mock--hero {
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
}

.st-layout-mock--hero .st-layout-mock-img--hero {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;
    border-radius: 0;
    -webkit-mask-image: radial-gradient(110.26% 96% at 50% 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.2) 91.21%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(110.26% 96% at 50% 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.2) 91.21%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.st-layout-mock--hero .st-layout-mock-hero-overlay {
    display: none;
}

.st-layout-mock-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.18) 50%, transparent 100%);
    pointer-events: none;
}

.st-layout-mock--banner {
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
}

.st-layout-mock--banner .st-layout-mock-img--banner {
    width: 100%;
    height: 34px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.st-layout-mock--banner .st-layout-mock-img--avatar-over {
    position: relative;
    width: min(40px, 70%);
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: -20px auto 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    z-index: 1;
}

.st-header-layout-card[data-header-layout="cutout"] .st-header-layout-thumb {
    background: transparent;
}

.st-layout-mock--cutout {
    background: transparent;
}

.st-layout-mock--cutout .st-layout-mock-img--cutout {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;
    filter: none;
    -webkit-mask-image: radial-gradient(110.26% 96% at 50% 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.2) 91.21%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(110.26% 96% at 50% 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.2) 91.21%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.st-layout-mock--shape {
    align-items: center;
    justify-content: center;
    padding: 0;
}

.st-layout-mock--shape .st-layout-mock-shape-frame {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    display: block;
    flex-shrink: 1;
    min-height: 0;
    min-width: 0;
}

.st-layout-mock--shape .st-layout-mock-img--avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.st-header-shape-panel {
    margin-bottom: 18px;
}

.st-header-shape-panel .st-header-layout-note {
    margin-top: 12px;
    margin-bottom: 0;
}

.st-header-shape-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.st-header-shape-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}

.st-header-shape-opt.is-active {
    border-color: var(--ink);
    color: var(--ink);
}

.st-header-shape-preview {
    width: auto;
    max-width: 72%;
    max-height: 56px;
    aspect-ratio: 4 / 3;
    height: auto;
    display: block;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    flex-shrink: 1;
    min-height: 0;
    min-width: 0;
}

.st-header-shape-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.st-header-shape-opt.is-active .st-header-shape-preview {
    box-shadow: 0 0 0 2px #0f172a;
}

.st-header-shape-preview.avatar-shape-loop,
.st-layout-mock-shape-frame.avatar-shape-loop,
.st-prev-avatar--shape.avatar-shape-loop {
    clip-path: url(#st-shape-clip-loop);
    border-radius: 0;
}

.st-header-shape-preview.avatar-shape-flower,
.st-layout-mock-shape-frame.avatar-shape-flower,
.st-prev-avatar--shape.avatar-shape-flower {
    clip-path: url(#st-shape-clip-flower);
    border-radius: 0;
}

.st-header-shape-preview.avatar-shape-oval,
.st-layout-mock-shape-frame.avatar-shape-oval,
.st-prev-avatar--shape.avatar-shape-oval {
    clip-path: url(#st-shape-clip-oval);
    border-radius: 0;
}

.st-header-shape-preview.avatar-shape-rounded,
.st-layout-mock-shape-frame.avatar-shape-rounded,
.st-prev-avatar--shape.avatar-shape-rounded {
    clip-path: none;
    aspect-ratio: 4 / 3;
    border-radius: 26.667% / 35.556%;
}

.st-header-shape-preview.avatar-shape-burst,
.st-layout-mock-shape-frame.avatar-shape-burst,
.st-prev-avatar--shape.avatar-shape-burst {
    clip-path: url(#st-shape-clip-burst);
    border-radius: 0;
}

.st-header-layout-note {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--muted);
}

.st-header-layout-note[hidden] {
    display: none !important;
}

.st-header-layout-note p { margin: 0 0 6px; }
.st-header-layout-note p:last-child { margin-bottom: 0; }
.st-header-layout-note strong { color: var(--ink); }

.st-prev-profile--hero,
.st-prev-profile--banner,
.st-prev-profile--cutout,
.st-prev-profile--shape {
    text-align: center;
}

.st-prev-hero {
    position: relative;
    width: 100%;
    margin-bottom: 4px;
}

.st-prev-hero-backdrop {
    position: relative;
    width: 100%;
    height: 168px;
    overflow: hidden;
    border-radius: 0;
    background-color: transparent;
}

.st-prev-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 0;
    -webkit-mask-image: var(--hero-mask-image);
    mask-image: var(--hero-mask-image);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.st-prev-hero-img--fallback {
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--hero-mask-image);
    mask-image: var(--hero-mask-image);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.st-prev-hero-head {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 14px 6px;
    text-align: center;
    max-width: 100%;
}

.st-prev-hero-head .st-prev-profile-socials {
    margin-top: 4px;
    margin-bottom: 0;
}

.st-prev-hero-name {
    position: static;
    transform: none;
    z-index: auto;
    padding: 0;
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
    text-align: center;
    line-height: 1.05;
}

.st-prev-banner {
    width: calc(100% + 24px);
    margin: 0 -12px;
}

.st-prev-banner-img,
video.st-prev-banner-img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.st-prev-banner-img--empty {
    height: 72px;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.12));
}

.st-prev-banner-avatar {
    width: 56px;
    height: 56px;
    margin: -28px auto 8px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.st-prev-banner-avatar img,
.st-prev-banner-avatar video,
.st-prev-avatar-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-prev-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
}

.st-prev-cutout {
    width: calc(100% + 24px);
    margin: 0 -12px 10px;
}

.st-prev-cutout-stage {
    position: relative;
    display: block;
    padding-top: 28px;
}

.st-prev-cutout-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.st-prev-cutout-backdrop {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: var(--cutout-mask-image);
    mask-image: var(--cutout-mask-image);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.st-prev-cutout-title {
    position: relative;
    z-index: 2;
    margin: 0 0 -4px;
    padding: 0;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--title-color, #0f172a);
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: var(--profile-title-white-space, normal);
}

.st-prev-cutout-img,
.st-prev-cutout-backdrop video {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
}

.st-prev-cutout-fallback {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
}

.st-prev-avatar--shape {
    width: min(120px, 100%);
    max-width: 120px;
    max-height: 90px;
    aspect-ratio: 4 / 3;
    height: auto;
    margin: 0 auto 10px;
    overflow: hidden;
}

.st-prev-avatar--shape img,
.st-prev-avatar--shape video,
.st-prev-shape-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.st-prev-shape-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
}

.st-prev-bio--hero {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 1;
    max-width: 100%;
}

.st-prev-title--logo,
.st-prev-name.st-prev-title--logo,
.st-prev-hero-name.st-prev-title--logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-prev-title-logo {
    display: block;
    max-width: 120px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.st-prev-hero-name .st-prev-title-logo {
    max-height: 22px;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}

@media (max-width: 720px) {
    .st-header-layout-grid,
    .st-header-shape-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .st-header-layout-grid,
    .st-header-shape-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Add-link modal */
.st-dash-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.st-dash-modal[hidden] { display: none !important; }

.st-dash-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 22, 40, 0.45);
}

.st-dash-modal-panel {
    position: relative;
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(11, 22, 40, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.st-dash-modal-panel--sm { width: min(420px, 100%); }

.st-dash-modal-panel--md { width: min(560px, 100%); }

.st-dash-modal-panel--xl { width: min(720px, 100%); }

.st-thumbnail-menu {
    position: fixed;
    z-index: 110;
    width: min(320px, calc(100vw - 20px));
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 18px 48px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.st-thumbnail-menu[hidden] { display: none !important; }

.st-thumbnail-menu-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.st-thumbnail-menu-title {
    display: block;
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.st-thumbnail-menu .st-thumb-picker-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
    padding: 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.st-thumbnail-menu .st-thumb-picker-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1.5px solid transparent;
    background: transparent;
    color: #475569;
    border-radius: 12px;
    padding: 10px 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.st-thumbnail-menu .st-thumb-picker-tab:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.06);
}

.st-thumbnail-menu .st-thumb-picker-tab.is-active {
    background: #fff;
    color: var(--accent-dark, #2B8FD4);
    border-color: rgba(77, 175, 228, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.st-thumbnail-menu-body {
    padding: 14px;
}

.st-thumbnail-menu .st-thumb-picker-panel {
    display: none;
}

.st-thumbnail-menu .st-thumb-picker-panel.is-active {
    display: block;
    animation: st-thumb-panel-in 0.16s ease;
}

@keyframes st-thumb-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.st-thumb-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.st-thumb-picker-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1.5px dashed #cbd5e1;
    background: #fff;
    color: #94a3b8;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button.st-thumb-picker-avatar {
    font: inherit;
}

.st-thumb-picker-avatar-main {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.st-thumb-picker-avatar-main i {
    font-size: 1.15rem;
}

.st-thumb-picker-avatar-edit {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.52);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.st-thumb-picker-avatar-edit i {
    font-size: 0.82rem;
}

.st-thumb-picker-avatar:hover,
.st-thumb-picker-avatar:focus-visible {
    border-color: #94a3b8;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.st-thumb-picker-avatar:hover .st-thumb-picker-avatar-edit,
.st-thumb-picker-avatar:focus-visible .st-thumb-picker-avatar-edit {
    opacity: 1;
}

.st-thumb-picker-avatar.has-image {
    border-style: solid;
    border-color: #e2e8f0;
}

.st-thumb-picker-avatar.has-image .st-thumb-picker-avatar-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-thumb-picker-avatar.has-tabler {
    border-style: solid;
    border-color: #6ee7b7;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
}

.st-thumb-picker-avatar.has-tabler .st-tabler-icon-img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}

.st-thumb-picker-avatar.is-selected {
    border-color: #64748b;
    border-style: solid;
    background: #f1f5f9;
    box-shadow: inset 0 0 0 2px rgba(100, 116, 139, 0.18);
}

.st-thumb-picker-copy {
    min-width: 0;
    flex: 1;
}

.st-thumb-picker-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.4;
    margin-bottom: 4px;
}

.st-thumb-picker-hint {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
}

.st-thumb-picker-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.st-thumb-picker-action {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-thumb-picker-action:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--ink);
    transform: translateY(-1px);
}

.st-thumb-picker-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.st-thumb-picker-action.is-danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.st-thumbnail-menu .st-field-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
}

.st-thumbnail-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.st-thumb-picker-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.st-thumb-picker-tab {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.st-thumb-picker-tab.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.st-thumb-picker-panel { display: none; }
.st-thumb-picker-panel.is-active { display: block; }

.st-thumb-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 14px;
    margin-bottom: 12px;
}

.st-thumb-search-wrap input {
    border: none;
    width: 100%;
    font: inherit;
    background: transparent;
}

.st-thumb-search-wrap input:focus { outline: none; }

.st-tabler-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 8px;
    height: min(42vh, 360px);
    min-height: min(42vh, 360px);
    overflow: auto;
    padding: 2px;
    align-content: start;
}

.st-tabler-icon-btn {
    width: 100%;
    height: 44px;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #334155;
    padding: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.st-tabler-icon-btn:hover {
    border-color: rgba(15, 23, 42, 0.12);
    background: #e2e8f0;
    color: #0f172a;
}

.st-tabler-icon-btn .st-tabler-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.st-tabler-icon-grid .st-tabler-grid-note {
    grid-column: 1 / -1;
    margin: 4px 0 0;
}

.st-dash-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.st-dash-modal-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.st-dash-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    cursor: pointer;
    color: var(--muted);
}

.st-dash-modal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 20px 0;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.st-dash-modal-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 0;
    font-family: inherit;
    font-size: 0.9rem;
}

.st-dash-modal-search input:focus { outline: none; }

.st-dash-modal-quick {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
}

.st-dash-modal-quickbtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.st-dash-modal-quickbtn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(77, 175, 228, 0.12);
    color: var(--brand-primary-mid, #4DAFE4);
    flex-shrink: 0;
}

.st-dash-modal-quickbtn-icon i {
    font-size: 10px;
    line-height: 1;
}

.st-dash-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 12px;
}

.st-add-link-group { margin-bottom: 18px; }

.st-add-link-group-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.st-add-link-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.st-add-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, transform 0.15s;
}

.st-add-link-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.st-add-link-item-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 10px;
    padding: 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(11, 22, 40, 0.08);
}

.st-add-link-item-icon.has-brand-icon {
    background: #fff;
}

.st-add-link-item-fallback {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.st-add-link-item-icon .st-brand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.st-add-link-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.st-add-link-item-label,
.st-add-link-item > span:last-child {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.2;
}

.st-dash-modal-viewall {
    margin: 0 20px 16px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--accent-dark);
    cursor: pointer;
}

.st-portal-body.st-dashboard-active .st-portal-header { display: none; }
.st-portal-body.st-dashboard-active .st-portal-main {
    max-width: none;
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}
.st-portal-body.st-dashboard-active .st-portal-app {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
.st-portal-body.st-dashboard-active .st-dash-shell {
    min-height: 100vh;
    height: 100vh;
}
.st-portal-body.st-dashboard-active .st-dash {
    height: 100%;
}

@media (max-width: 520px) {
    .st-dash-public-link { max-width: min(180px, 46vw); font-size: 0.82rem; }
    .st-dash-share-trigger { padding: 6px 10px; gap: 8px; }
}

@media (max-width: 1100px) {
    .st-dash-workspace {
        grid-template-columns: 228px minmax(0, 1fr);
    }
    .st-dash-preview { display: none; }
    .st-dash-preview-topbar-btn { display: inline-flex; }
}

/* ── Welcome split (username step only) ─────────────────────────────── */
.st-wiz-welcome {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 0;
    height: 100%;
    position: relative;
}

/* Physical left panel — welcome image only */
.st-wiz-welcome .st-welcome-media {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    position: relative;
    z-index: 4;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
    border: none;
    border-radius: 0;
}

.st-wiz-welcome .st-welcome-media-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    display: block;
    border: none;
    border-radius: 0;
}

/* Physical right panel — brand + form */
.st-wiz-welcome .st-welcome-side {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: var(--card);
    position: relative;
    z-index: 2;
}

.st-welcome-brandbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    padding: 24px 48px 12px;
    direction: ltr;
}

.st-welcome-brand {
    text-decoration: none;
}

/* Welcome keeps its CTA inside the content column (right side in RTL). */
.st-welcome-cta {
    display: block;
    width: 100%;
    margin-top: 24px;
}

.st-welcome-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 24px 48px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.st-welcome-inner {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: start;
}

.st-welcome-inner .st-wiz-title,
.st-welcome-inner .st-wiz-sub {
    text-align: center;
}

.st-welcome-inner .st-field-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 1.25rem;
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

.st-welcome-inner .st-field-hint.is-checking {
    color: #64748b;
}

.st-welcome-inner .st-field-hint.is-success {
    color: #059669;
}

.st-welcome-inner .st-field-hint.is-error {
    color: #dc2626;
}

.st-welcome-inner .st-field-hint.is-muted {
    color: #64748b;
}

.st-welcome-inner .st-field-hint i {
    font-size: 0.82rem;
    line-height: 1;
}

.st-slug-row.is-checking {
    border-color: #94a3b8;
}

.st-slug-row.is-available {
    border-color: #059669;
}

.st-slug-row.is-unavailable {
    border-color: #dc2626;
}

.st-welcome-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.st-welcome-inner .st-wiz-title { font-size: 2.1rem; }

/* Goal step — centered content column */
.st-wiz-body-goal {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}

.st-wiz-body-goal .st-wiz-title {
    font-size: 1.95rem;
    margin-bottom: 8px;
}

.st-wiz-body-goal .st-wiz-sub {
    margin-bottom: 32px;
    font-size: 0.98rem;
}

.st-wiz-body-goal .st-goal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.st-wiz-body-goal .st-goal-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: start;
    padding: 12px 14px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(11, 22, 40, 0.04);
}

.st-wiz-body-goal .st-goal-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11, 22, 40, 0.07);
}

.st-wiz-body-goal .st-goal-card.is-active {
    border-color: var(--accent);
    background: rgba(43, 143, 212, 0.05);
    box-shadow: 0 8px 22px var(--glow);
}

.st-wiz-body-goal .st-goal-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.st-wiz-body-goal .st-goal-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(43, 143, 212, 0.12);
    font-size: 0.95rem;
}

.st-wiz-body-goal .st-goal-card.is-active .st-goal-icon {
    background: var(--accent);
    color: #fff;
}

.st-wiz-body-goal .st-goal-label {
    font-size: 0.92rem;
    line-height: 1.35;
}

.st-wiz-body-goal .st-goal-desc {
    font-size: 0.76rem;
    line-height: 1.45;
}

.st-welcome-terms {
    margin-top: 18px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.65;
    text-align: center;
}

/* ── Wizard / Dashboard responsive ──────────────────────────────────── */
@media (max-width: 860px) {
    .st-dash-workspace {
        grid-template-columns: 1fr;
    }
    .st-dash-topbar {
        grid-template-columns: 1fr auto;
    }
    .st-dash-topbar-center {
        display: none;
    }
    .st-dash-topbar-end {
        display: flex;
        align-items: center;
        justify-self: end;
    }
    .st-dash-mobile-share-btn {
        display: grid;
    }
    .st-dash-user-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .st-dash-user-sheet-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .st-dash-user-sheet-backdrop[hidden] {
        display: none !important;
    }
    .st-dash-user-dropdown {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, visibility 0.25s ease;
        border-radius: 20px 20px 0 0;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        max-height: min(88vh, 640px);
        overflow-y: auto;
        z-index: 60;
        box-shadow: 0 -12px 40px rgba(11, 22, 40, 0.18);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .st-dash-user-dropdown.is-open {
        transform: translateY(0);
    }
    .st-dash-user-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: sticky;
        top: 0;
        background: #fff;
        padding: 10px 0 12px;
        margin-bottom: 4px;
        direction: rtl;
    }
    .st-dash-user-sheet-handle {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
    }
    .st-dash-user-sheet-title {
        margin: 16px 0 0;
        font-size: 1rem;
        font-weight: 800;
        color: var(--ink);
        flex: 1;
        text-align: center;
    }
    .st-dash-user-sheet-close {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 10px;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 12px;
    }
    .st-dash-user-dropdown-url {
        font-size: 0.92rem;
        font-weight: 800;
        color: var(--ink);
        text-align: center;
        direction: ltr;
        margin-bottom: 12px;
    }
    .st-dash-user-dropdown-qr canvas {
        width: 140px;
        height: 140px;
    }
    body.st-dash-sheet-open {
        overflow: hidden;
    }
    .st-dash-sidebar {
        display: none !important;
    }
    .st-dash-mobile-nav {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 2px;
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 45;
        width: min(calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 360px);
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 20px;
        box-shadow: 0 10px 28px rgba(11, 22, 40, 0.14);
    }
    .st-dash-editor {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    .st-dash-savebar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .st-dash-preview { display: none; }
    .st-dash-topbar-brand span:not(.st-brand-logo-mark) { display: none; }
    .st-theme-picker { grid-template-columns: repeat(3, 1fr); }
    .st-wiz-body-wide .st-platform-grid {
        grid-template-columns: repeat(3, 120px);
        max-width: 384px;
        gap: 10px;
    }
    .st-platform-grid {
        grid-template-columns: repeat(3, 120px);
        max-width: 384px;
        gap: 10px;
    }

    /* Wizard topbar: brand + back row, then full-width progress below */
    .st-wiz-topbar {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand back"
            "progress progress";
        gap: 12px;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
    }

    .st-onboarding-active .st-wiz-topbar:not([hidden]) {
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
    }

    .st-wiz-topbar-brand {
        justify-self: start;
    }

    .st-wiz-back {
        justify-self: end;
    }

    .st-wiz-progress {
        grid-area: progress;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .st-wiz-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }

    .st-wiz-skip-btn {
        padding: 7px 14px;
        font-size: 0.78rem;
    }

    .st-wiz-cta {
        padding: 14px 20px;
        font-size: 0.98rem;
    }

    .st-onboarding-active #st-onboarding-screen:has(.st-wiz-topbar:not([hidden])) .st-wiz-stage {
        padding-top: calc(84px + env(safe-area-inset-top, 0px));
    }

    /* Stack welcome step on mobile: image → brand → form */
    .st-wiz-welcome {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
    }

    .st-welcome-side {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        background: var(--card);
        position: relative;
        z-index: 2;
    }

    .st-welcome-brandbar {
        padding: 18px 22px 10px;
        background: var(--card);
        justify-content: flex-start;
        position: relative;
        z-index: 2;
    }

    .st-wiz-welcome .st-welcome-media {
        flex: 0 0 auto;
        order: -1;
        width: 100%;
        height: min(42vh, 340px);
        min-height: 220px;
        max-height: none;
        position: relative;
        z-index: 1;
        inset: auto;
    }

    .st-wiz-welcome .st-welcome-media-img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        padding: 0;
        object-fit: cover;
    }

    .st-wiz-welcome .st-welcome-content {
        flex: 1 1 auto;
        position: relative;
        z-index: 2;
        background: var(--card);
    }

    .st-welcome-content {
        padding: 8px 22px 32px;
    }

    .st-welcome-inner { max-width: 440px; margin: 0 auto; }
    .st-wiz-body-goal { max-width: 440px; margin: 0 auto; }

    .st-wiz-body-profile .st-wiz-title { font-size: 1.65rem; }
    .st-wiz-profile-card { padding: 22px 16px 18px; border-radius: 18px; }
    .st-avatar-preview-lg { width: 100px; height: 100px; }
}

@media (max-width: 560px) {
    .st-wiz-card { padding: 30px 22px; }
    .st-goal-grid { grid-template-columns: 1fr; }
    .st-theme-picker { grid-template-columns: 1fr; }
    .st-wiz-body-wide .st-platform-grid {
        grid-template-columns: repeat(2, 132px);
        max-width: 288px;
    }
    .st-platform-grid {
        grid-template-columns: repeat(2, 132px);
        max-width: 288px;
    }
    .st-platform-chip { padding: 14px 8px 12px; }
    .st-platform-ic { width: 38px; height: 38px; font-size: 1rem; }
    .st-wiz-title { font-size: 1.5rem; }
    .st-welcome-inner .st-wiz-title { font-size: 1.7rem; }

    .st-wiz-step:not(.st-wiz-welcome) {
        padding-top: 32px;
    }

    .st-wiz-custom-row {
        grid-template-columns: 44px 1fr 32px;
        gap: 10px;
        padding: 12px 14px;
    }

    .st-wiz-custom-remove {
        width: 30px;
        height: 30px;
    }

    .st-wiz-link-row {
        padding: 12px 14px;
        gap: 12px;
    }

    .st-wiz-link-mark {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}

/* ── Full-screen setup mode (no header · box-less · sticky bottom CTA) ── */
.st-portal-body.st-onboarding-active .st-portal-header { display: none; }

.st-portal-body.st-onboarding-active.st-wiz-welcome-active {
    background: transparent;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-portal-bg {
    background: transparent;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-portal-header {
    display: none;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-portal-app {
    background: transparent;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active #st-onboarding-screen {
    background: transparent;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-welcome-side {
    background: var(--card);
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active #st-header-actions {
    display: none !important;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-portal-app {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-portal-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.st-portal-body.st-onboarding-active.st-wiz-welcome-active #st-onboarding-screen {
    flex: 1 1 auto;
    min-height: 0;
}

.st-portal-body.st-onboarding-active .st-portal-app {
    max-width: none;
    margin: 0;
    padding: 0;
}

.st-onboarding-active #st-onboarding-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--card);
}

.st-onboarding-active .st-wiz-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.st-onboarding-active .st-wiz-welcome {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

/* Welcome step — lock to viewport on desktop */
@media (min-width: 861px) {
    .st-portal-body.st-onboarding-active.st-wiz-welcome-active {
        overflow: hidden;
        height: 100dvh;
    }

    .st-portal-body.st-onboarding-active.st-wiz-welcome-active:has(.st-wiz-welcome:not([hidden])) {
        overflow: hidden;
        height: 100dvh;
    }

    .st-onboarding-active #st-onboarding-screen:has(.st-wiz-welcome:not([hidden])) {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .st-onboarding-active .st-wiz-stage:has(> .st-wiz-welcome:not([hidden])) {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .st-wiz-welcome {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-wiz-welcome .st-welcome-media {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: 47.5%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: none;
        z-index: 1;
    }

    .st-portal-body.st-onboarding-active.st-wiz-welcome-active .st-wiz-welcome .st-welcome-side {
        position: relative;
        z-index: 2;
    }
}

/* ── Dedicated routes: login / signup / home / admin ── */
.st-auth-heading { font-size: 1.5rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; }
.st-auth-sub { margin: 0 0 20px; color: #64748b; font-size: 0.95rem; }
.st-auth-switch { margin-top: 18px; text-align: center; color: #64748b; font-size: 0.9rem; }
.st-auth-switch a { color: #4DAFE4; font-weight: 700; text-decoration: none; }

.st-home {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.st-portal-body.st-home-active {
    overflow-x: clip;
}

.st-home-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 85% 10%, rgba(77, 175, 228, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 60% at 5% 90%, rgba(43, 143, 212, 0.12), transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.06), transparent 42%),
        linear-gradient(180deg, #f7faff 0%, #eef4fb 45%, #f3f6fa 100%);
}

.st-home-bg-mesh {
    position: absolute;
    inset: -20%;
    opacity: 0.55;
    background:
        conic-gradient(from 210deg at 12% 18%, rgba(77, 175, 228, 0.14), transparent 28%),
        conic-gradient(from 30deg at 88% 12%, rgba(139, 92, 246, 0.1), transparent 32%),
        conic-gradient(from 120deg at 72% 82%, rgba(43, 143, 212, 0.12), transparent 30%);
    animation: stHomeBgMesh 18s ease-in-out infinite alternate;
}

.st-home-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(43, 143, 212, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 143, 212, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 20%, transparent 78%);
}

.st-home-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    background-image: url("../images/home-bg-pattern.svg");
    background-size: 160px 160px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

.st-home-bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.st-home-bg-aurora {
    position: absolute;
    inset: -10% -5%;
    background:
        radial-gradient(ellipse 42% 28% at 18% 28%, rgba(125, 211, 252, 0.22), transparent 70%),
        radial-gradient(ellipse 38% 30% at 78% 22%, rgba(139, 92, 246, 0.14), transparent 72%),
        radial-gradient(ellipse 34% 24% at 62% 68%, rgba(77, 175, 228, 0.16), transparent 70%);
    animation: stHomeBgAurora 14s ease-in-out infinite alternate;
}

.st-home-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}

.st-home-blob--1 {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -80px;
    background: rgba(77, 175, 228, 0.35);
    animation: stHomeBgBlob 16s ease-in-out infinite alternate;
}

.st-home-blob--2 {
    width: 360px;
    height: 360px;
    top: 35%;
    right: -100px;
    background: rgba(43, 143, 212, 0.22);
    animation: stHomeBgBlob 20s ease-in-out infinite alternate-reverse;
}

.st-home-blob--3 {
    width: 280px;
    height: 280px;
    bottom: 8%;
    left: 20%;
    background: rgba(125, 211, 252, 0.28);
    animation: stHomeBgBlob 18s ease-in-out infinite alternate;
    animation-delay: -4s;
}

.st-home-bg-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(43, 143, 212, 0.12);
    box-shadow: inset 0 0 40px rgba(77, 175, 228, 0.04);
}

.st-home-bg-orbit--1 {
    width: min(72vw, 620px);
    height: min(72vw, 620px);
    top: -18%;
    right: -12%;
    animation: stHomeBgOrbit 24s linear infinite;
}

.st-home-bg-orbit--2 {
    width: min(54vw, 460px);
    height: min(54vw, 460px);
    bottom: 8%;
    left: -14%;
    border-color: rgba(139, 92, 246, 0.1);
    animation: stHomeBgOrbit 32s linear infinite reverse;
}

.st-home-bg-orbit--3 {
    width: min(38vw, 320px);
    height: min(38vw, 320px);
    top: 42%;
    left: 38%;
    border-style: dashed;
    border-color: rgba(77, 175, 228, 0.14);
    animation: stHomeBgOrbit 28s linear infinite;
}

.st-home-bg-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background-image: url("../images/home-bg-waves.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.95;
}

@keyframes stHomeBgMesh {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
}

@keyframes stHomeBgAurora {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.85; }
    100% { transform: translate3d(-2%, 2%, 0) rotate(2deg); opacity: 1; }
}

@keyframes stHomeBgBlob {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(24px, -18px, 0) scale(1.08); }
}

@keyframes stHomeBgOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .st-home-bg-mesh,
    .st-home-bg-aurora,
    .st-home-blob,
    .st-home-bg-orbit {
        animation: none;
    }
}

.st-home-header {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 14px max(16px, calc((100vw - min(100vw, 1360px)) / 2)) 18px;
    direction: ltr;
}

.st-home-header-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 12px 10px 14px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 250, 255, 0.86) 100%);
    border: 1px solid rgba(43, 143, 212, 0.12);
    box-shadow:
        0 18px 40px rgba(11, 22, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.st-home-header-brand {
    min-width: 0;
    gap: 12px;
}

.st-home-header-logo {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.st-home-header-brand-name {
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--ink);
}

.st-home-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.st-home-nav-links {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(43, 143, 212, 0.06);
    border: 1px solid rgba(43, 143, 212, 0.08);
}

.st-home-navlink {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.st-home-navlink:hover {
    color: var(--accent-dark);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(43, 143, 212, 0.1);
}

.st-home-nav-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid rgba(43, 143, 212, 0.12);
}

.st-home-header-btn {
    padding: 10px 16px;
    font-size: 0.86rem;
    border-radius: 999px;
}

.st-home-header-btn.st-btn-ghost {
    color: var(--accent-dark);
    background: rgba(43, 143, 212, 0.08);
    border: 1px solid rgba(43, 143, 212, 0.1);
}

.st-home-header-btn.st-btn-ghost:hover:not(:disabled) {
    color: var(--accent-dark);
    background: rgba(43, 143, 212, 0.14);
    transform: translateY(-1px);
}

.st-home-header-btn.st-btn-primary {
    box-shadow: 0 8px 20px rgba(43, 143, 212, 0.24);
}

.st-home-main {
    flex: 1;
}

.st-home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 56px);
    padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 8vw, 88px);
}

.st-home-hero-copy {
    text-align: right;
}

.st-home-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(43, 143, 212, 0.18);
    color: var(--accent-dark);
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(43, 143, 212, 0.08);
}

.st-home-badge i {
    color: #f59e0b;
}

.st-home-hero h1 {
    font-size: clamp(2rem, 4.8vw, 3.35rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 18px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.st-home-gradient-text {
    background: linear-gradient(135deg, #2B8FD4 0%, #4DAFE4 45%, #1a6fad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.st-home-lead {
    max-width: 540px;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.75;
    margin: 0 0 28px;
}

.st-home-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.st-home-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 0;
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
}

.st-home-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.st-home-trust i {
    color: #10b981;
    font-size: 0.78rem;
}

.st-home-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.st-home-hero-frame {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    border-radius: 28px;
    padding: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 24px 60px rgba(11, 22, 40, 0.14),
        0 0 0 1px rgba(43, 143, 212, 0.08);
}

.st-home-hero-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.st-home-float {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 32px rgba(11, 22, 40, 0.12);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    animation: stHomeFloat 5s ease-in-out infinite;
}

.st-home-float i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(77, 175, 228, 0.14);
    color: var(--accent);
    font-size: 0.82rem;
}

.st-home-float--links {
    top: 12%;
    left: -4%;
    animation-delay: 0s;
}

.st-home-float--stats {
    bottom: 10%;
    right: -2%;
    animation-delay: 1.2s;
}

@keyframes stHomeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.st-home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2.5vw, 20px);
    margin-bottom: clamp(48px, 8vw, 88px);
}

.st-home-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(18px, 3vw, 24px) clamp(14px, 2vw, 18px) clamp(20px, 3vw, 26px);
    border-radius: 22px;
    text-align: center;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.88) 100%);
    border: 1px solid rgba(43, 143, 212, 0.12);
    box-shadow:
        0 18px 40px rgba(11, 22, 40, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.st-home-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, #5ec4ff 55%, #8b5cf6 100%);
    opacity: 0.85;
}

.st-home-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 143, 212, 0.22);
    box-shadow:
        0 24px 48px rgba(43, 143, 212, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.st-home-stat-visual {
    position: relative;
    width: clamp(104px, 16vw, 136px);
    height: clamp(104px, 16vw, 136px);
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(219, 236, 252, 0.55) 100%);
    border: 1px solid rgba(43, 143, 212, 0.1);
    box-shadow: 0 10px 24px rgba(43, 143, 212, 0.12);
}

.st-home-stat-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.st-home-stat-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-home-stat strong {
    display: block;
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    font-weight: 900;
    color: var(--accent-dark);
    line-height: 1.1;
}

.st-home-stat span {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--muted);
}

.st-home-section {
    margin-bottom: clamp(56px, 9vw, 96px);
}

.st-home-section--alt {
    padding: clamp(28px, 5vw, 44px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 50px rgba(11, 22, 40, 0.05);
}

.st-home-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(28px, 5vw, 40px);
}

.st-home-section-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.st-home-section-head h2 {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 3.5vw, 2.15rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
}

.st-home-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.st-home-section--features {
    margin-bottom: clamp(56px, 9vw, 96px);
}

.st-home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 18px);
}

.st-home-feature {
    position: relative;
    padding: 24px 20px;
    border-radius: 22px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 250, 255, 0.9) 100%);
    border: 1px solid rgba(43, 143, 212, 0.12);
    box-shadow:
        0 16px 36px rgba(11, 22, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.st-home-feature::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, #5ec4ff 55%, #8b5cf6 100%);
    opacity: 0.85;
}

.st-home-feature:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(43, 143, 212, 0.22);
    box-shadow:
        0 22px 44px rgba(43, 143, 212, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.st-home-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(77, 175, 228, 0.2), rgba(43, 143, 212, 0.08));
    border: 1px solid rgba(43, 143, 212, 0.1);
    color: var(--accent-dark);
    font-size: 1.15rem;
    box-shadow: 0 8px 18px rgba(43, 143, 212, 0.1);
}

.st-home-feature h3 {
    margin: 0 0 8px;
    font-size: 1.06rem;
    font-weight: 900;
    color: var(--ink);
}

.st-home-feature p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.st-home-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.st-home-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.st-home-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    font-size: 0.95rem;
    box-shadow: 0 8px 18px rgba(43, 143, 212, 0.25);
}

.st-home-step h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}

.st-home-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.st-home-showcase {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(24px, 5vw, 48px);
    align-items: center;
    margin-bottom: clamp(56px, 9vw, 96px);
    padding: clamp(24px, 5vw, 40px);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(43, 143, 212, 0.08) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(77, 175, 228, 0.1) 100%);
    border: 1px solid rgba(43, 143, 212, 0.12);
}

.st-home-showcase-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.25;
    color: var(--ink);
}

.st-home-showcase-copy p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.7;
}

.st-home-showcase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.st-home-showcase-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #334155;
    font-size: 0.95rem;
}

.st-home-showcase-list i {
    color: var(--accent);
}

.st-home-showcase-card {
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

.st-home-showcase-card-frame {
    position: relative;
    width: min(100%, 300px);
    transform: rotate(-2deg);
    transition: transform 0.35s ease;
}

.st-home-showcase-card-frame:hover {
    transform: rotate(0deg) translateY(-6px);
}

.st-home-showcase-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 28px;
    background: #fff;
    box-shadow:
        0 28px 60px rgba(11, 22, 40, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    overflow: hidden;
}

.st-home-showcase-banner {
    position: relative;
    height: 118px;
    overflow: hidden;
}

.st-home-showcase-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 22, 40, 0.02) 0%, rgba(11, 22, 40, 0.18) 100%);
}

.st-home-showcase-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-home-showcase-body {
    position: relative;
    margin-top: -42px;
    padding: 0 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.st-home-showcase-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
}

.st-home-showcase-avatar {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(43, 143, 212, 0.22);
}

.st-home-showcase-avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4DAFE4, #2B8FD4 45%, #8b5cf6 100%);
    animation: stHomeShowcaseRing 4s linear infinite;
}

@keyframes stHomeShowcaseRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.st-home-showcase-profile {
    text-align: center;
}

.st-home-showcase-profile strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 4px;
}

.st-home-showcase-profile span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.4;
}

.st-home-showcase-links {
    width: 100%;
    display: grid;
    gap: 8px;
}

.st-home-showcase-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(238, 242, 247, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.05);
    font-size: 0.82rem;
    font-weight: 800;
    color: #334155;
    box-shadow: 0 6px 16px rgba(11, 22, 40, 0.04);
}

.st-home-showcase-link i {
    color: var(--accent);
    font-size: 0.9rem;
}

.st-home-showcase-link--accent {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #4DAFE4 0%, #2B8FD4 55%, #1a6fad 100%);
    box-shadow: 0 10px 22px rgba(43, 143, 212, 0.28);
}

.st-home-showcase-link--accent i {
    color: #fff;
}

.st-home-showcase-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}

.st-home-showcase-socials span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(43, 143, 212, 0.08);
    color: var(--accent-dark);
    font-size: 0.88rem;
    border: 1px solid rgba(43, 143, 212, 0.12);
}

.st-home-showcase-badge {
    position: absolute;
    top: -12px;
    right: -8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(43, 143, 212, 0.16);
    box-shadow: 0 10px 24px rgba(43, 143, 212, 0.16);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-dark);
    white-space: nowrap;
}

.st-home-showcase-badge i {
    color: var(--accent);
}

.st-home-showcase-glow {
    position: absolute;
    inset: 18% -12% -8%;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 175, 228, 0.35) 0%, rgba(77, 175, 228, 0) 70%);
    filter: blur(18px);
    pointer-events: none;
}

.st-home-cta-band {
    position: relative;
    z-index: 1;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw) clamp(40px, 7vw, 72px);
    padding: clamp(48px, 8vw, 88px) clamp(20px, 4vw, 40px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(139, 92, 246, 0.22) 0%, transparent 38%),
        linear-gradient(135deg, #1a6fad 0%, #2B8FD4 42%, #4DAFE4 100%);
    box-shadow:
        0 28px 70px rgba(26, 111, 173, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.st-home-cta-band-inner {
    position: relative;
    z-index: 1;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(20px, 4vw, 36px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

.st-home-cta-band-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.st-home-cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
}

.st-home-cta-blob--1 {
    width: 220px;
    height: 220px;
    top: -80px;
    left: -60px;
    background: rgba(255, 255, 255, 0.28);
}

.st-home-cta-blob--2 {
    width: 260px;
    height: 260px;
    bottom: -100px;
    right: 18%;
    background: rgba(77, 175, 228, 0.35);
}

.st-home-cta-grid {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.65) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.65) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 95%);
}

.st-home-cta-band-copy {
    position: relative;
    z-index: 1;
    text-align: right;
}

.st-home-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.st-home-cta-band-inner h2 {
    margin: 0 0 12px;
    font-size: clamp(1.55rem, 3.8vw, 2.35rem);
    font-weight: 900;
    line-height: 1.2;
    max-width: 14ch;
}

.st-home-cta-highlight {
    position: relative;
    display: inline-block;
}

.st-home-cta-highlight::after {
    content: "";
    position: absolute;
    inset: auto 0 -4px 0;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    z-index: -1;
}

.st-home-cta-band-inner p {
    margin: 0 0 18px;
    max-width: 42ch;
    opacity: 0.94;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.75;
}

.st-home-cta-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.st-home-cta-perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
}

.st-home-cta-perks i {
    color: #bbf7d0;
    font-size: 0.82rem;
}

.st-home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.st-home-cta-band-btn {
    background: #fff !important;
    color: var(--accent-dark) !important;
    box-shadow: 0 12px 28px rgba(11, 22, 40, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.st-home-cta-band-btn:hover:not(:disabled) {
    filter: brightness(1.03);
    transform: translateY(-2px);
}

.st-home-cta-band-btn-secondary {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: none;
}

.st-home-cta-band-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-2px);
}

.st-home-cta-band-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

.st-home-cta-visual-frame {
    position: relative;
    width: min(100%, 380px);
    padding: 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px rgba(11, 22, 40, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.st-home-cta-visual-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.st-home-cta-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(11, 22, 40, 0.14);
    animation: stHomeFloat 4.5s ease-in-out infinite;
}

.st-home-cta-float i {
    color: var(--accent);
}

.st-home-cta-float--links {
    top: 8%;
    left: 0;
    animation-delay: 0.3s;
}

.st-home-cta-float--stats {
    bottom: 10%;
    right: 0;
    animation-delay: 1.1s;
}

.st-home-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 24px 0 36px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    direction: ltr;
}

.st-home-footer-brand {
    font-size: 1rem;
}

.st-home-footer-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.st-home-footer-nav {
    display: flex;
    gap: 14px;
}

.st-home-footer-nav a {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.st-home-footer-nav a:hover {
    color: var(--accent);
}

.st-btn-lg { padding: 14px 28px; font-size: 1rem; }

@media (min-width: 900px) {
    .st-home-nav-links {
        display: inline-flex;
    }
}

@media (max-width: 960px) {
    .st-home-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .st-home-hero-copy {
        text-align: center;
        order: 2;
    }

    .st-home-hero-visual {
        order: 1;
    }

    .st-home-lead {
        margin-inline: auto;
    }

    .st-home-cta,
    .st-home-trust {
        justify-content: center;
    }

    .st-home-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .st-home-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .st-home-steps {
        grid-template-columns: 1fr;
    }

    .st-home-showcase {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .st-home-showcase-list li {
        justify-content: center;
    }

    .st-home-showcase-card-frame {
        transform: none;
        margin-inline: auto;
    }

    .st-home-showcase-card-frame:hover {
        transform: translateY(-4px);
    }

    .st-home-cta-band-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .st-home-cta-band-copy {
        text-align: center;
    }

    .st-home-cta-band-inner h2,
    .st-home-cta-band-inner p {
        margin-inline: auto;
    }

    .st-home-cta-perks {
        justify-content: center;
    }

    .st-home-cta-actions {
        justify-content: center;
    }

    .st-home-cta-band-visual {
        order: -1;
        min-height: 200px;
    }

    .st-home-cta-float--links {
        left: 4%;
    }

    .st-home-cta-float--stats {
        right: 4%;
    }

    .st-home-float--links {
        left: 2%;
    }

    .st-home-float--stats {
        right: 2%;
    }
}

@media (max-width: 899px) {
    .st-home-nav-cta {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

@media (max-width: 560px) {
    .st-home-header {
        padding-top: 10px;
    }

    .st-home-header-shell {
        padding: 8px 10px;
        border-radius: 18px;
    }

    .st-home-header-logo {
        width: 32px;
        height: 32px;
    }

    .st-home-nav-cta {
        gap: 6px;
    }

    .st-home-header-btn {
        padding: 9px 12px;
        font-size: 0.8rem;
    }

    .st-home-nav .st-home-navlink {
        display: none;
    }

    .st-home-stats,
    .st-home-features {
        grid-template-columns: 1fr;
    }

    .st-home-float {
        display: none;
    }

    .st-home-cta-float {
        display: none;
    }

    .st-home-footer {
        flex-direction: column;
        text-align: center;
    }
}

.st-profile-not-found {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.st-profile-not-found-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
}

.st-profile-not-found-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 80px;
    max-width: 560px;
    margin: 0 auto;
}

.st-profile-not-found-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-size: 1.8rem;
    margin-bottom: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.st-profile-not-found-main h1 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 900;
    margin: 0 0 12px;
    color: #0f172a;
}

.st-profile-not-found-lead {
    margin: 0 0 10px;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.75;
}

.st-profile-not-found-lead strong {
    color: #0f172a;
    font-weight: 800;
}

.st-profile-not-found-url {
    margin: 0 0 24px;
    color: #94a3b8;
    font-size: 0.86rem;
    word-break: break-all;
}

.st-profile-not-found-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.st-admin { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.st-admin-header h1 { margin: 0 0 6px; font-size: 1.6rem; }
.st-admin-sub { color: #64748b; margin: 0 0 20px; }
.st-admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.st-admin-kpi { background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 16px; }
.st-admin-kpi-label { display: block; font-size: 0.8rem; color: #64748b; margin-bottom: 6px; }
.st-admin-kpi strong { font-size: 1.4rem; color: #0f172a; }
.st-admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.st-admin-toolbar .st-field-input { flex: 1; min-width: 200px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; }
.st-admin-table-wrap { overflow-x: auto; background: rgba(255,255,255,.92); border-radius: 14px; border: 1px solid rgba(15,23,42,.08); }
.st-admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.st-admin-table th, .st-admin-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid #f1f5f9; }
.st-admin-table th { background: #f8fafc; color: #475569; font-weight: 700; }

/* ── Avatar media picker + crop ─────────────────────────────────────────── */
.st-avatar-media-modal-body {
    padding: 8px 16px 20px;
}

.st-avatar-media-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-avatar-media-actions[hidden] {
    display: none !important;
}

.st-avatar-media-action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    text-align: right;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.st-avatar-media-action:hover {
    border-color: rgba(15, 23, 42, 0.16);
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.st-avatar-media-action.is-danger {
    color: #b91c1c;
}

.st-avatar-media-action.is-danger:hover {
    background: #fef2f2;
    border-color: rgba(185, 28, 28, 0.25);
}

.st-avatar-media-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #0f172a;
    flex-shrink: 0;
    font-size: 1rem;
}

.st-avatar-media-action.is-danger .st-avatar-media-action-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.st-avatar-media-action-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.st-avatar-media-action-label {
    font-size: 0.95rem;
    font-weight: 800;
}

.st-avatar-media-action-hint {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.st-avatar-media-action.is-danger .st-avatar-media-action-hint {
    color: #f87171;
}

.st-avatar-media-action-chevron {
    color: #94a3b8;
    font-size: 0.75rem;
}

.st-avatar-media-drop {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-avatar-media-drop[hidden] {
    display: none !important;
}

.st-avatar-drop-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
}

.st-avatar-drop-back:hover {
    color: #0f172a;
}

.st-avatar-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 180px;
    padding: 28px 20px;
    border: 2px dashed rgba(15, 23, 42, 0.18);
    border-radius: 16px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.st-avatar-dropzone:hover,
.st-avatar-dropzone.is-dragover {
    border-color: #0f172a;
    background: #f1f5f9;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.st-avatar-dropzone-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.st-avatar-dropzone-title {
    font-size: 0.98rem;
    font-weight: 800;
}

.st-avatar-dropzone-hint {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
}

.st-avatar-drop-error {
    margin: 0;
    font-size: 0.84rem;
    color: #b91c1c;
    text-align: center;
}

.st-avatar-crop-panel {
    width: min(520px, 100%);
}

.st-avatar-crop-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 20px 20px;
}

.st-avatar-crop-hint {
    margin: 0;
    font-size: 0.86rem;
    color: #64748b;
    text-align: center;
}

.st-avatar-crop-stage {
    display: grid;
    place-items: center;
}

.st-avatar-crop-workspace {
    position: relative;
    width: min(420px, 88vw);
    height: min(420px, 72vw);
    border-radius: 16px;
    overflow: hidden;
    background: #111827;
    cursor: grab;
    touch-action: none;
    user-select: none;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 12px 32px rgba(15, 23, 42, 0.18);
}

.st-avatar-crop-workspace.is-banner {
    height: min(220px, 48vw);
}

.st-avatar-crop-workspace.is-wallpaper {
    width: min(280px, 52vw);
    height: min(420px, 72vh);
}

.st-avatar-crop-workspace.is-dragging {
    cursor: grabbing;
}

.st-avatar-crop-media {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.st-avatar-crop-media img,
.st-avatar-crop-media video {
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
    display: block;
}

.st-avatar-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.st-avatar-crop-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(260px, 62%);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
    box-sizing: border-box;
}

.st-avatar-crop-workspace.is-banner .st-avatar-crop-frame {
    width: min(360px, 86%);
    aspect-ratio: 3 / 1;
    border-radius: 6px;
}

.st-avatar-crop-workspace.is-wallpaper .st-avatar-crop-frame {
    width: min(164px, 46%);
    aspect-ratio: 1 / 2;
    border-radius: 10px;
}

.st-crop-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0 solid #fff;
    box-sizing: border-box;
}

.st-crop-corner--tl {
    top: -2px;
    left: -2px;
    border-top-width: 3px;
    border-left-width: 3px;
}

.st-crop-corner--tr {
    top: -2px;
    right: -2px;
    border-top-width: 3px;
    border-right-width: 3px;
}

.st-crop-corner--bl {
    bottom: -2px;
    left: -2px;
    border-bottom-width: 3px;
    border-left-width: 3px;
}

.st-crop-corner--br {
    bottom: -2px;
    right: -2px;
    border-bottom-width: 3px;
    border-right-width: 3px;
}

.st-crop-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%, rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
        linear-gradient(to bottom, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%, rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px));
    opacity: 0.7;
}

.st-avatar-crop-status {
    margin: 0;
    font-size: 0.84rem;
    color: #64748b;
    text-align: center;
}

.st-avatar-crop-status.is-error {
    color: #b91c1c;
}

.st-avatar-crop-actions {
    display: flex;
    gap: 10px;
    justify-content: stretch;
}

.st-avatar-crop-actions .st-btn {
    flex: 1;
}

.st-header-media-thumb-main video,
#st-dash-profile-avatar video,
.st-avatar-preview video,
.st-layout-mock-img--avatar,
.st-prev-avatar video,
.st-prev-banner-avatar video,
.st-prev-hero-img {
    object-fit: cover;
}

.st-prev-cutout-img,
.st-prev-cutout-backdrop video {
    object-fit: contain;
}

.st-header-media-thumb-main video,
.st-dash-profile-avatar video,
.st-avatar-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}