:root[data-trife-page-theme="dark"] {
    color-scheme: dark !important;
    --account-bg: #030914;
    --account-surface: #121722;
    --account-surface-2: #171c27;
    --account-border: #2c3748;
    --account-text: #f8fafc;
    --account-muted: #8c98aa;
    --account-cyan: #24c7f4;
    --account-gold: #ffd60a;
    --account-green: #20d466;
    --account-red: #ff5c71;
}

* { box-sizing: border-box; }

html[data-trife-page-theme="dark"],
body.account-details-page,
body.account-details-page.trife-saas-layout,
body.account-details-page.trife-saas-layout.trife-sidebar-collapsed {
    min-height: 100%;
    background: var(--account-bg) !important;
    color: var(--account-text) !important;
}

body.account-details-page {
    margin: 0;
    min-height: 100dvh;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 50% -8%, rgba(36, 199, 244, .08), transparent 27rem),
        var(--account-bg) !important;
}

.account-details-page .trife-topbar { display: none !important; }
.account-details-page .trife-app-bottom {
    width: min(100%, 576px) !important;
    bottom: 0 !important;
    z-index: 100010 !important;
    color-scheme: dark;
    background: rgba(12, 22, 38, .98) !important;
    border-color: rgba(101, 119, 145, .32) !important;
}
.account-details-page .trife-app-fab-stack {
    right: max(12px, calc((100vw - 576px) / 2 + 12px));
    bottom: calc(80px + env(safe-area-inset-bottom));
}

.account-shell {
    width: min(576px, 100%);
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) 18px 36px;
}

.account-header {
    height: 64px;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    margin-bottom: 12px;
}
.account-header h1 {
    margin: 0;
    text-align: center;
    color: var(--account-text) !important;
    font-size: 1.32rem;
    font-weight: 900;
    letter-spacing: -.025em;
}
.account-back {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--account-text) !important;
    background: transparent !important;
    font-size: 1.25rem;
    cursor: pointer;
}

.profile-block {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}
.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #1d8fec, #6836df);
    border: 2px solid rgba(255,255,255,.13);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    font-size: 1.45rem;
    font-weight: 900;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-copy { min-width: 0; }
.profile-copy h2 {
    margin: 0;
    color: var(--account-text) !important;
    font-size: 1.25rem;
    line-height: 1.15;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.account-badge {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 900;
    white-space: nowrap;
}
.account-badge.app.on { color: var(--account-green); background: rgba(32,212,102,.08); }
.account-badge.site.on { color: var(--account-cyan); background: rgba(36,199,244,.08); }
.account-badge.off { color: var(--account-red); background: rgba(255,92,113,.08); }
.account-badge.owner { color: var(--account-gold); background: rgba(255,214,10,.08); }
.profile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 9px;
    color: var(--account-muted);
    font-size: .76rem;
}
.profile-contact span { min-width: 0; overflow-wrap: anywhere; }
.created-label { margin: 5px 0 0; color: var(--account-muted); font-size: .72rem; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.license-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--license-color) 42%, transparent);
    border-radius: 16px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--license-color) 7%, #151820), #151820 68%);
    box-shadow: 0 14px 36px rgba(0,0,0,.15);
}
.license-card.app { --license-color: var(--account-gold); }
.license-card.site { --license-color: var(--account-cyan); }
.license-title { display: flex; align-items: center; gap: 7px; color: var(--license-color); font-size: .79rem; font-weight: 900; }
.license-detail {
    min-height: 70px;
    margin: 12px 0 14px;
    color: #c5cbd5;
    white-space: pre-line;
    font-size: .72rem;
    line-height: 1.55;
}
.license-action {
    min-height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px solid color-mix(in srgb, var(--license-color) 75%, #fff 10%);
    border-radius: 11px;
    color: #06101b !important;
    background: var(--license-color) !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 7px 20px color-mix(in srgb, var(--license-color) 20%, transparent);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 950;
}

.account-divider { height: 1px; margin: 0 0 24px; background: rgba(255,255,255,.09); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.stat-card {
    min-width: 0;
    min-height: 116px;
    padding: 14px 8px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 15px;
    background: #151820;
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.stat-card i { color: var(--stat-color); font-size: 1.05rem; }
.stat-card strong { color: var(--account-text); font-size: 1.08rem; font-weight: 950; }
.stat-card span { color: var(--account-muted); font-size: .67rem; }
.stat-card.clients { --stat-color: #2e9cff; }
.stat-card.vehicles { --stat-color: #f5a524; }
.stat-card.products { --stat-color: #f23c88; }

.editor-title { margin: 0 0 17px; color: var(--account-cyan) !important; font-size: .93rem; font-weight: 900; }
.account-form { display: grid; gap: 18px; }
.account-field { position: relative; }
.account-field label {
    position: absolute;
    z-index: 2;
    left: 16px;
    top: -9px;
    padding: 0 7px;
    color: #aab4c3;
    background: var(--account-bg);
    font-size: .78rem;
    line-height: 18px;
}
.account-input,
.account-details-page input.account-input,
.account-details-page select.account-input {
    width: 100%;
    min-height: 70px;
    padding: 0 18px;
    border: 2px solid var(--account-border) !important;
    border-radius: 14px;
    outline: 0;
    color: var(--account-text) !important;
    background: rgba(2,8,17,.72) !important;
    -webkit-text-fill-color: var(--account-text) !important;
    caret-color: var(--account-cyan);
    font-size: 1rem;
}
.account-input:focus { border-color: var(--account-cyan) !important; box-shadow: 0 0 0 3px rgba(36,199,244,.11); }
.account-input:disabled { color: var(--account-muted) !important; opacity: .75; }
.slug-input-wrap { position: relative; display: flex; align-items: center; }
.slug-input-wrap > span {
    position: absolute;
    z-index: 2;
    left: 18px;
    color: #758297;
    font-size: .82rem;
    font-weight: 750;
    pointer-events: none;
}
.slug-input-wrap .account-input { padding-left: 112px !important; }
.slug-status { margin: 7px 4px 0; color: var(--account-muted); font-size: .67rem; line-height: 1.4; }
.slug-status.checking { color: #f8c45c; }
.slug-status.available { color: #58df8b; }
.slug-status.taken,
.slug-status.invalid,
.slug-status.error { color: #ff8293; }
.account-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.save-button {
    min-height: 58px;
    border: 0;
    border-radius: 14px;
    color: #06202b !important;
    background: linear-gradient(145deg, #57d1f3, #24acd9) !important;
    box-shadow: 0 14px 32px rgba(36,172,217,.22);
    font-size: .84rem;
    font-weight: 950;
    cursor: pointer;
}
.save-button:disabled { opacity: .65; cursor: wait; }
.guest-note { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(36,199,244,.18); border-radius: 12px; color: #b4c0d1; background: rgba(36,199,244,.06); font-size: .72rem; line-height: 1.5; }
.account-toast { position: fixed; z-index: 200200; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); width: min(420px, calc(100% - 28px)); padding: 13px 16px; transform: translate(-50%, 18px); border: 1px solid var(--account-border); border-radius: 13px; color: var(--account-text); background: #101b2c; box-shadow: 0 18px 55px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: .2s; font-size: .76rem; font-weight: 800; }
.account-toast.show { opacity: 1; transform: translate(-50%, 0); }
.account-toast.error { border-color: rgba(255,92,113,.42); color: #ff93a3; }
.account-loader { position: fixed; inset: 0; z-index: 200300; display: grid; place-items: center; background: var(--account-bg); color: var(--account-cyan); transition: opacity .2s; }
.account-loader i { font-size: 1.8rem; }
[hidden] { display: none !important; }

@media (max-width: 430px) {
    .account-shell { padding-inline: 14px; }
    .profile-block { grid-template-columns: 68px minmax(0,1fr); gap: 13px; }
    .profile-avatar { width: 66px; height: 66px; }
    .profile-copy h2 { font-size: 1.08rem; }
    .account-badge { min-height: 24px; padding-inline: 6px; font-size: .56rem; }
    .plan-grid { gap: 9px; }
    .license-card { padding: 11px; }
    .license-title { font-size: .66rem; }
    .license-detail { min-height: 76px; font-size: .62rem; }
    .license-action { min-height: 46px; font-size: .63rem; }
    .stats-grid { gap: 8px; }
    .stat-card { min-height: 103px; }
    .account-two-columns { grid-template-columns: 1fr; }
    .slug-input-wrap > span { left: 14px; font-size: .72rem; }
    .slug-input-wrap .account-input { padding-left: 99px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .account-details-page *, .account-details-page *::before, .account-details-page *::after { animation: none !important; transition: none !important; }
}