/* ── Streamfinitytv Dashboard — v2 (reference design) ──────── */

:root {
    --sftv-bg:         #f1f5f9;
    --sftv-surface:    #ffffff;
    --sftv-border:     #e2e8f0;
    --sftv-accent:     #06A6FF;
    --sftv-accent-h:   #0483cc;
    --sftv-accent-bg:  #e0f2ff;
    --sftv-text:       #0f172a;
    --sftv-muted:      #64748b;
    --sftv-sidebar-w:  228px;
    --sftv-radius:     12px;
    --sftv-header-h:   56px;
    --sftv-shadow:     0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}

/* ── Full-screen takeover ─────────────────────────────────── */
.sftv-page-active .site-header,
.sftv-page-active #masthead,
.sftv-page-active .ast-above-header-bar,
.sftv-page-active .ast-primary-header-bar,
.sftv-page-active .ast-below-header-bar,
.sftv-page-active .site-footer,
.sftv-page-active #colophon,
.sftv-page-active .ast-breadcrumbs-wrapper,
.sftv-page-active .entry-title,
.sftv-page-active .ast-page-title,
.sftv-page-active .woocommerce-breadcrumb { display: none !important; }

.sftv-page-active body,
.sftv-page-active .site,
.sftv-page-active #page,
.sftv-page-active .site-content,
.sftv-page-active #content,
.sftv-page-active .ast-article-single,
.sftv-page-active .entry-content,
.sftv-page-active .site-main,
.sftv-page-active #main,
.sftv-page-active main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

.sftv-page-active body {
    background: var(--sftv-bg) !important;
    overflow-x: hidden;
}

/* ── Auth (login) layout ───────────────────────────────────── */
.sftv-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}
.sftv-auth-wrap--success {
    background: var(--sftv-bg);
}
.sftv-auth-wrap--register .sftv-auth-card {
    padding-top: 4px;
}
.sftv-auth-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 10px 8px 18px;
}
.sftv-auth-wrap--success .sftv-auth-card {
    max-width: 520px;
    border-radius: 18px;
    box-shadow: none;
    padding: 28px 28px 26px;
    background: transparent;
}
.sftv-auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 10px;
}
.sftv-auth-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sftv-auth-topbar-right .sftv-auth-topbar-login {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sftv-text);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--sftv-border);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sftv-auth-topbar-right .sftv-auth-topbar-login:hover {
    background: var(--sftv-bg);
}
.sftv-auth-wrap--split {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 0;
}
.sftv-auth-wrap--split .sftv-auth-card {
    flex: 0 0 50%;
    max-width: none;
    padding: 40px 48px;
}
.sftv-auth-header {
    text-align: center;
    margin-bottom: 0;
}
.sftv-auth-title {
    margin: 0 0 2px;
    font-size: 30px;
    font-weight: 700;
    color: var(--sftv-text);
}
.sftv-auth-sub {
    margin: 0;
    font-size: 16px;
    color: var(--sftv-muted);
}
.sftv-auth-wrap--success .sftv-auth-title {
    font-size: 28px;
}
.sftv-auth-wrap--success .sftv-auth-sub {
    margin-top: 4px;
}
.sftv-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.sftv-auth-toggle {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0;
    padding: 2px;
    border-radius: 999px;
    background: var(--sftv-bg);
    margin-bottom: 18px;
}
.sftv-auth-toggle-btn {
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sftv-muted);
    padding: 7px 0;
    border-radius: 999px;
    cursor: default;
}
.sftv-auth-toggle-btn.is-active {
    background: #ffffff;
    color: var(--sftv-text);
    box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.sftv-auth-toggle-btn[disabled] {
    opacity: .5;
}
.sftv-auth-form {
    margin: 0;
}
.sftv-field-group {
    margin-bottom: 10px;
}
.sftv-field-group:first-of-type {
    margin-top: 0;
}
.sftv-field-row--two {
    display: flex;
    gap: 10px;
}
.sftv-field-group--half { flex: 1; }
.sftv-field-group--quarter { flex: 0 0 50%; }
.sftv-field-group--threequarter { flex: 0 0 50%; }
.sftv-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sftv-muted);
    margin-bottom: 5px;
}
.sftv-field-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sftv-field-icon svg {
    width: 16px;
    height: 16px;
}
.sftv-field-input {
    width: 100%;
    border-radius: 9px;
    border: 1px solid var(--sftv-border);
    background: var(--sftv-bg);
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--sftv-text);
    box-shadow: none;
    line-height: 1.3;
}
.sftv-field-input[type="password"] {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12.5C4.2 9 7.7 6.5 12 6.5c4.3 0 7.8 2.5 9 6-1.2 3.5-4.7 6-9 6-4.3 0-7.8-2.5-9-6Z' stroke='%2356677a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9.5L14.5 14.5M14.5 9.5L9.5 14.5' stroke='%2356677a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
}
.sftv-field-input select {
    background: var(--sftv-bg);
}

select.sftv-field-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--sftv-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    border-radius: 9px;
}
.sftv-select {
    position: relative;
}
.sftv-field-group--quarter.sftv-select-expanded .sftv-select-list {
    width: 200%;
    left: 0;
    right: auto;
}
.sftv-select-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.sftv-select-display {
    width: 100%;
    border-radius: 9px;
    border: 1px solid var(--sftv-border);
    background: var(--sftv-bg);
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--sftv-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: none;
}
.sftv-select-arrow svg {
    width: 14px;
    height: 14px;
}
.sftv-select.is-open .sftv-select-display {
    border-color: var(--sftv-accent);
    box-shadow: 0 0 0 2px rgba(6,166,255,.18);
}
.sftv-select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 210px;
    overflow: auto;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--sftv-border);
    box-shadow: 0 18px 40px rgba(15,23,42,.22);
    padding: 4px;
    margin: 0;
    list-style: none;
    z-index: 20;
    display: none;
}
.sftv-select.is-open .sftv-select-list {
    display: block;
}
.sftv-select-option {
    padding: 6px 9px;
    font-size: 0.84rem;
    border-radius: 6px;
    cursor: pointer;
}
.sftv-select-option:hover {
    background: var(--sftv-bg);
}
.sftv-select-option.is-active {
    background: rgba(6,166,255,.08);
    color: #0369a1;
    font-weight: 600;
}
.sftv-password-meter {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.sftv-password-meter-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: #f97316;
    transition: width .18s ease, background-color .18s ease;
}
.sftv-field-input:focus {
    outline: none;
    border-color: var(--sftv-accent);
    box-shadow: 0 0 0 2px rgba(6,166,255,.18);
}
.sftv-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.sftv-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sftv-remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.sftv-switch {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
    transition: background .18s;
}
.sftv-switch-knob {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15,23,42,.25);
    transform: translateX(0);
    transition: transform .18s;
}
.sftv-remember input[type="checkbox"]:checked + .sftv-switch {
    background: var(--sftv-accent);
}
.sftv-remember input[type="checkbox"]:checked + .sftv-switch .sftv-switch-knob {
    transform: translateX(14px);
}
.sftv-switch-label {
    font-size: 0.8rem;
}
.sftv-auth-btn {
    background: var(--sftv-accent) !important;
    color: #ffffff !important;
    border-radius: 9px;
    padding: 10px 12px;
    border: 1px solid var(--sftv-border) !important;
    font-size: 0.9rem;
    font-weight: 600;
    width: 100%;
    margin-top: 10px;
    line-height: 1.3;
}
.sftv-auth-btn--primary {
    display: block;
}
.sftv-auth-btn:hover {
    background: var(--sftv-accent-h) !important;
}
.sftv-auth-card .woocommerce-button.button,
.sftv-auth-card .button {
    box-sizing: border-box;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    border-width: 1px !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    height: auto !important;
}
.sftv-auth-extra {
    font-size: 0.8rem;
    text-align: right;
    margin-top: 10px;
}
.sftv-auth-footer {
    margin-top: 6px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--sftv-muted);
}
.sftv-auth-footer a {
    color: var(--sftv-accent);
    font-weight: 500;
}

.sftv-auth-extra--below {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--sftv-muted);
}

/* Right column marketing panel on register view */
.sftv-auth-aside {
    flex: 0 0 50%;
    min-width: 0;
    padding: 40px 48px;
    border-radius: 0;
    background: radial-gradient(circle at 10% 20%, #0ea5e9 0, #0369a1 40%, #020617 100%);
    color: #e5f6ff;
}
.sftv-auth-aside-title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
}
.sftv-auth-aside-sub {
    margin: 0 0 18px;
    font-size: 0.9rem;
    color: #bae6fd;
}
.sftv-auth-aside-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
}
.sftv-auth-aside-list li {
    margin-bottom: 8px;
}

/* Neutralize default WooCommerce form spacing inside auth card */
.sftv-auth-card .woocommerce-form,
.sftv-auth-card .woocommerce-form-row,
.sftv-auth-card .form-row,
.sftv-auth-card .form-row-wide {
    margin: 0;
    padding: 0;
}
.sftv-auth-card .woocommerce-form-login {
    border: none !important;
    background: transparent !important;
    padding: 0;
    box-shadow: none !important;
}
.sftv-auth-card .woocommerce-form-register {
    border: none !important;
    background: transparent !important;
    padding: 0;
    box-shadow: none !important;
}
.sftv-auth-card .woocommerce-Input.input-text {
    border-radius: 9px;
    border: 1px solid var(--sftv-border);
    background: var(--sftv-bg);
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--sftv-text);
    box-shadow: none;
}
.sftv-auth-card .woocommerce-Input.input-text:focus {
    outline: none;
    border-color: var(--sftv-accent);
    box-shadow: 0 0 0 2px rgba(6,166,255,.18);
}
.sftv-auth-card .woocommerce-privacy-policy-text {
    display: none;
}
.sftv-auth-card .woocommerce-password-strength,
.sftv-auth-card .woocommerce-password-hint {
    display: none !important;
}

/* ── Woo notices — center & style on auth/dashboard ────────── */
.woocommerce-notices-wrapper {
    display: flex;
    justify-content: center;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    max-width: 440px;
    width: 100%;
    margin: 0 auto 8px;
    border-radius: 8px;
    border: none;
    padding: 8px 10px;
    font-size: 0.8rem;
}

.woocommerce-error {
    background: #fee2e2;
    color: #b91c1c;
}

.woocommerce-message {
    background: #dcfce7;
    color: #166534;
}

.woocommerce-info {
    background: #e0f2fe;
    color: #075985;
}

/* Align Woo notice icons to the left, away from text */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    position: relative;
    padding-left: 28px;
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    position: absolute;
    left: 9px;
    top: 9px;
    transform: none;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sftv-auth-card .woocommerce-form-row,
.sftv-auth-card .form-row {
    width: 100%;
}
.sftv-auth-card .woocommerce-LostPassword {
    margin: 0;
}

/* ── Layout ───────────────────────────────────────────────── */
.sftv-dashboard-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    background: var(--sftv-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--sftv-text);
    overflow: hidden;
}
.sftv-dashboard-layout *, .sftv-wrap * { box-sizing: border-box; }

/* ── Sidebar — Light mode design ─────────────────────────── */
.sftv-sidebar {
    width: var(--sftv-sidebar-w);
    min-width: var(--sftv-sidebar-w);
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid var(--sftv-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

/* ── Brand ─────────────────────────────────────────────────── */
.sftv-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--sftv-header-h);
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sftv-border);
}
.sftv-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.sftv-brand-icon img {
    max-height: 28px;
    width: auto;
    display: block;
    object-fit: contain;
}
.sftv-brand-icon svg { width: 14px; height: 14px; }
.sftv-sidebar-brand span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sftv-text);
    white-space: nowrap;
    letter-spacing: -.02em;
}

/* ── Scrollable nav ────────────────────────────────────────── */
.sftv-sidebar-nav-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0 8px;
}
.sftv-sidebar-nav-wrap::-webkit-scrollbar { width: 0; }

/* ── Section label ─────────────────────────────────────────── */
.sftv-nav-label {
    font-size: 0.57rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #475569;
    padding: 20px 20px 6px;
    margin: 0;
}
.sftv-nav-label:first-child { padding-top: 4px; }

/* ── Nav group ─────────────────────────────────────────────── */
.sftv-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 12px;
}

/* ── Nav item ──────────────────────────────────────────────── */
.sftv-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none !important;
    color: #475569;
    font-size: 0.845rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1;
    border: none !important;
    box-shadow: none !important;
}

/* Hover */
.sftv-nav-item:hover {
    background: #f9fafb;
    color: #0f172a;
    text-decoration: none !important;
}

/* Icon */
.sftv-nav-icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    transition: color .15s;
}
.sftv-nav-icon svg { width: 16px; height: 16px; }
.sftv-nav-item:hover .sftv-nav-icon { color: #0f172a; }

/* ── Active state ──────────────────────────────────────────── */
.sftv-nav-item.is-active,
.sftv-nav-item.woocommerce-MyAccount-navigation-link--is-active {
    background: rgba(6,166,255,.1);
    color: #0369a1;
    font-weight: 600;
}
.sftv-nav-item.is-active .sftv-nav-icon,
.sftv-nav-item.woocommerce-MyAccount-navigation-link--is-active .sftv-nav-icon {
    color: #06A6FF;
}
/* Glowing left dot */
.sftv-nav-item.is-active::before,
.sftv-nav-item.woocommerce-MyAccount-navigation-link--is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #06A6FF;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(6,166,255,.55);
}

/* ── Sidebar footer ────────────────────────────────────────── */
.sftv-sidebar-footer {
    border-top: 1px solid var(--sftv-border);
    flex-shrink: 0;
    padding: 14px 12px;
}

/* User row */
.sftv-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: #f8fafc;
    border: 1px solid var(--sftv-border);
    cursor: default;
    transition: background .15s;
}
.sftv-sidebar-user:hover { background: #e5fdf4; }

.sftv-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06A6FF, #0483cc);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sftv-user-info {
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; min-width: 0;
}
.sftv-user-info strong {
    font-size: 0.8rem; font-weight: 600;
    color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sftv-user-info span {
    font-size: 0.67rem; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-transform: capitalize;
}

/* Logout */
.sftv-nav-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none !important;
    color: #475569;
    font-size: 0.835rem;
    font-weight: 500;
    transition: background .13s, color .13s;
    width: 100%;
}
.sftv-nav-logout:hover {
    background: rgba(239,68,68,.1);
    color: #f87171;
    text-decoration: none !important;
}
.sftv-nav-logout .sftv-nav-icon { color: #475569; width: 18px; height: 18px; }
.sftv-nav-logout .sftv-nav-icon svg { width: 15px; height: 15px; }
.sftv-nav-logout:hover .sftv-nav-icon { color: #f87171; }

/* ── Main ─────────────────────────────────────────────────── */
.sftv-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sftv-bg);
}

.sftv-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sftv-header-h);
    padding: 0 32px;
    border-bottom: 1px solid var(--sftv-border);
    background: var(--sftv-surface);
}

.sftv-main-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sftv-main-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sftv-text);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.sftv-content {
    padding: 24px 40px 56px;
    max-width: none;
    width: 100%;
    margin: 0;
}

/* ── Wrap ─────────────────────────────────────────────────── */
.sftv-wrap { color: var(--sftv-text); }

/* Page top row */
.sftv-page-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.sftv-page-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sftv-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--sftv-text);
}
.sftv-page-sub { font-size: 0.85rem; color: var(--sftv-muted); margin: 0; }

.sftv-page-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.sftv-page-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--sftv-surface);
    border: 1px solid var(--sftv-border);
    box-shadow: none;
    cursor: pointer;
    color: var(--sftv-text);
    transition: background .15s, border-color .15s, color .15s;
}
.sftv-page-user:hover {
    background: #f1f5f9;
    border-color: var(--sftv-border);
}

.sftv-page-user .sftv-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    border-radius: 50%;
}

.sftv-user-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sftv-user-meta strong {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sftv-text);
}

.sftv-user-meta span {
    font-size: 0.72rem;
    color: var(--sftv-muted);
}
.sftv-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sftv-muted);
    background: var(--sftv-surface);
    border: 1px solid var(--sftv-border);
    border-radius: 8px;
    padding: 6px 12px;
}
.sftv-date-badge svg { width: 13px; height: 13px; }

.sftv-user-menu[data-sftv-user-menu] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--sftv-border);
    padding: 10px 12px 10px;
    display: none;
    z-index: 40;
}
.sftv-user-menu.is-open {
    display: block;
}
.sftv-user-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sftv-user-menu-meta strong {
    display: block;
    font-size: 0.86rem;
}
.sftv-user-menu-meta span {
    display: block;
    font-size: 0.75rem;
    color: var(--sftv-muted);
}
.sftv-user-menu-body {
    border-top: 1px solid var(--sftv-border);
    padding-top: 8px;
    margin-top: 4px;
}
.sftv-user-menu-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 6px;
    font-size: 0.78rem;
}
.sftv-user-menu-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 0.7rem;
    color: var(--sftv-muted);
}
.sftv-user-menu-value {
    color: var(--sftv-text);
}
.sftv-user-menu-footer {
    border-top: 1px solid var(--sftv-border);
    padding-top: 8px;
    margin-top: 6px;
    text-align: right;
}
.sftv-user-menu-logout {
    margin-top: 0;
}

/* ── Stat cards ──────────────────────────────────────────── */
.sftv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .sftv-stats { grid-template-columns: repeat(2, 1fr); } }

.sftv-stat-card {
    background: var(--sftv-surface);
    border: 1px solid var(--sftv-border);
    border-radius: var(--sftv-radius);
    padding: 18px 18px 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sftv-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sftv-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sftv-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.sftv-stat-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sftv-stat-icon svg { width: 14px; height: 14px; }
.sftv-icon-green  { background: #e0f2ff; color: #06A6FF; }
.sftv-icon-blue   { background: #eff6ff; color: #3b82f6; }
.sftv-icon-purple { background: #f5f3ff; color: #7c3aed; }
.sftv-icon-orange { background: #fff7ed; color: #f97316; }

.sftv-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--sftv-text);
    line-height: 1;
    margin-top: 2px;
}
.sftv-stat-value--sm { font-size: 1.1rem; }

.sftv-stat-trend {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sftv-stat-trend span { font-weight: 400; color: var(--sftv-muted); }
.sftv-trend-up      { color: #06A6FF; }
.sftv-trend-down    { color: #ef4444; }
.sftv-trend-neutral { color: var(--sftv-muted); }

/* ── Dashboard grid ──────────────────────────────────────── */
.sftv-dash-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}
@media (max-width: 820px) { .sftv-dash-grid { grid-template-columns: 1fr; } }

/* ── Panels ──────────────────────────────────────────────── */
.sftv-panel {
    background: var(--sftv-surface);
    border: 1px solid var(--sftv-border);
    border-radius: var(--sftv-radius);
    padding: 20px;
    box-shadow: none;
    margin-bottom: 0;
}
.sftv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.sftv-panel-head h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sftv-text);
    margin: 0;
}
.sftv-view-all {
    font-size: 0.78rem;
    color: var(--sftv-accent);
    text-decoration: none;
    font-weight: 500;
}
.sftv-view-all:hover { text-decoration: underline; }

/* Chart */
.sftv-chart-wrap { height: 200px; position: relative; }
.sftv-chart-legend {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--sftv-muted);
    gap: 6px;
}
.sftv-legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}

/* Order list */
.sftv-order-list { display: flex; flex-direction: column; gap: 0; }
.sftv-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sftv-border);
    font-size: 0.845rem;
}
.sftv-order-row:last-child { border-bottom: none; }
.sftv-order-id { display: flex; flex-direction: column; gap: 2px; }
.sftv-order-id a { color: var(--sftv-text); text-decoration: none; font-weight: 600; font-size: 0.845rem; }
.sftv-order-id a:hover { color: var(--sftv-accent); }
.sftv-order-id span { font-size: 0.72rem; color: var(--sftv-muted); }
.sftv-order-row strong { font-size: 0.845rem; white-space: nowrap; }

/* Status badges */
.sftv-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.sftv-status-completed  { background: #e0f2ff; color: #06A6FF; }
.sftv-status-processing { background: #ede9fe; color: #7c3aed; }
.sftv-status-pending    { background: #fef9c3; color: #a16207; }
.sftv-status-cancelled  { background: #fee2e2; color: #dc2626; }
.sftv-status-on-hold    { background: #f1f5f9; color: #475569; }
.sftv-status-refunded   { background: #fce7f3; color: #be185d; }

/* Quick links row */
.sftv-quicklink-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 820px) { .sftv-quicklink-grid { grid-template-columns: repeat(2, 1fr); } }

.sftv-quicklink-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sftv-surface);
    border: 1px solid var(--sftv-border);
    border-radius: var(--sftv-radius);
    padding: 14px 16px;
    text-decoration: none !important;
    color: var(--sftv-text);
    font-size: 0.845rem;
    font-weight: 500;
    box-shadow: none;
    transition: border-color .15s;
}
.sftv-quicklink-card:hover { border-color: var(--sftv-accent); }
.sftv-ql-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sftv-ql-icon svg { width: 15px; height: 15px; }
.sftv-ql-text { flex: 1; }
.sftv-ql-arrow { color: var(--sftv-muted); font-size: 0.8rem; }

/* ── Other page headers (account, settings) ───────────────── */
.sftv-header { margin-bottom: 24px; }
.sftv-header h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 3px; color: var(--sftv-text); }
.sftv-header p { color: var(--sftv-muted); margin: 0; font-size: 0.875rem; }

/* Panels used in account / settings pages */
.sftv-panel--form { margin-bottom: 16px; }
.sftv-panel h3 {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sftv-muted);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sftv-border);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sftv-panel h4 { font-size: 0.9rem; font-weight: 600; color: var(--sftv-text); margin: 0 0 4px; }

/* Form */
.sftv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 560px) { .sftv-form-grid { grid-template-columns: 1fr; } }
.sftv-form-group { display: flex; flex-direction: column; gap: 5px; }
.sftv-form-group.sftv-full { grid-column: 1 / -1; }
.sftv-form-group label { font-size: 0.72rem; font-weight: 600; color: var(--sftv-muted); text-transform: uppercase; letter-spacing: .06em; }
.sftv-form-group input,
.sftv-form-group select {
    background: var(--sftv-bg);
    border: 1px solid var(--sftv-border);
    border-radius: 8px;
    padding: 9px 13px;
    color: var(--sftv-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.sftv-form-group input:focus,
.sftv-form-group select:focus { border-color: var(--sftv-accent); box-shadow: 0 0 0 3px rgba(16,185,129,.1); }

.sftv-divider { border: none; border-top: 1px solid var(--sftv-border); margin: 20px 0; }
.sftv-hint { font-size: 0.78rem; color: var(--sftv-muted); margin: 0 0 14px; }

.sftv-btn {
    background: var(--sftv-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
}
.sftv-btn:hover { background: var(--sftv-accent-h); box-shadow: 0 4px 12px rgba(6,166,255,.35); }

.sftv-notice { border-radius: 8px; padding: 11px 15px; margin-bottom: 18px; font-size: 0.86rem; font-weight: 500; }
.sftv-notice-success { background: #e0f2ff; border: 1px solid #bae6fd; color: #06A6FF; }

.sftv-empty { color: var(--sftv-muted); font-size: 0.86rem; text-align: center; padding: 28px 0; }

/* Toggle */
.sftv-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--sftv-border); }
.sftv-toggle-row:last-of-type { border-bottom: none; }
.sftv-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.sftv-toggle-info span { font-size: 0.875rem; color: var(--sftv-text); font-weight: 500; }
.sftv-toggle-info small { font-size: 0.75rem; color: var(--sftv-muted); }
.sftv-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.sftv-toggle input { opacity: 0; width: 0; height: 0; }
.sftv-toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: background .18s; }
.sftv-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s; }
.sftv-toggle input:checked + .sftv-toggle-slider { background: var(--sftv-accent); }
.sftv-toggle input:checked + .sftv-toggle-slider::before { transform: translateX(18px); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sftv-dashboard-layout { position: relative; height: auto; flex-direction: column; overflow: visible; }
    .sftv-sidebar { width: 100%; min-width: 0; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid var(--sftv-border); }
    .sftv-sidebar-nav-wrap { max-height: 0; overflow: hidden; transition: max-height .3s; }
    .sftv-sidebar.open .sftv-sidebar-nav-wrap { max-height: 600px; }
    .sftv-main { overflow: visible; }
    .sftv-content { padding: 20px 16px 40px; }
    .sftv-stats { grid-template-columns: repeat(2, 1fr); }
    .sftv-quicklink-grid { grid-template-columns: repeat(2, 1fr); }
}