/*
 * Nexora Hub depth layer
 * An original, responsive 3D visual system shared by the admin and user workspaces.
 */
:root {
    --three-font-body: "Manrope", "Segoe UI", Arial, sans-serif;
    --three-font-display: "Outfit", "Segoe UI", Arial, sans-serif;
    --three-violet: #7a2ef0;
    --three-violet-dark: #4f16bb;
    --three-indigo: #4259ec;
    --three-canvas: #eee8ff;
    --three-surface: #ffffff;
    --three-ink: #16234a;
    --three-shadow: 0 24px 46px rgba(70, 42, 133, .16), 0 7px 14px rgba(48, 33, 89, .08);
    --three-shadow-raised: 0 30px 54px rgba(70, 42, 133, .23), 0 10px 0 rgba(89, 49, 164, .08);
    --three-inset: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -2px 4px rgba(74, 39, 143, .05);
}

html { font-synthesis: none; }

body,
button,
input,
select,
textarea {
    font-family: var(--three-font-body);
}

body {
    color: var(--three-ink);
    font-weight: 500;
    letter-spacing: -.012em;
}

h1,
h2,
h3,
.brand,
.admin-sidebar-brand,
.metric-card h2,
.admin-metrics strong,
.stat,
.service-card h3,
.admin-table strong,
.user-identity strong,
.user-service-summary strong {
    font-family: var(--three-font-display);
    font-weight: 700;
    letter-spacing: -.035em;
}

.auth-copy h1,
.auth-card h2,
.welcome-row h1,
.admin-heading h1,
.section-head h2,
.content h1,
.content h2 {
    font-family: var(--three-font-display);
    font-weight: 800;
    letter-spacing: -.05em;
}

.kicker,
.eyebrow,
.nav-label,
.admin-nav-label,
.admin-table th,
.user-directory-columns,
.admin-filter label,
.admin-form label,
.settings-form label {
    font-family: var(--three-font-body);
    font-weight: 800;
    letter-spacing: .075em;
}

.metric-card p,
.service-card p,
.subtle,
.admin-heading p,
.admin-table small,
.user-identity p,
.user-identity span {
    line-height: 1.58;
}

@keyframes three-d-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0); }
    50% { transform: translate3d(0, -6px, 0) rotateX(1.5deg); }
}

@keyframes three-d-glow {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50% { opacity: .9; transform: scale(1.05); }
}

/* Shared user navigation and dashboard */
.app-shell {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 86% 4%, rgba(183, 135, 255, .42), transparent 22rem),
        radial-gradient(circle at 38% 80%, rgba(152, 204, 255, .34), transparent 29rem),
        linear-gradient(145deg, #f7f3ff 0%, #ede9ff 50%, #f8f3ff 100%);
}

.app-shell::before,
.app-shell::after {
    position: fixed;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(157, 82, 255, .18), rgba(157, 82, 255, 0) 68%);
    content: "";
    filter: blur(2px);
    pointer-events: none;
}

.app-shell::before { top: 14%; right: 5%; }
.app-shell::after { bottom: 3%; left: 21%; animation: three-d-glow 7s ease-in-out infinite; }

.app-shell > .sidebar {
    border-right: 1px solid rgba(255, 255, 255, .84);
    background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(247, 244, 255, .9));
    box-shadow: 13px 0 30px rgba(62, 35, 121, .10), inset -1px 0 rgba(112, 54, 221, .08);
    backdrop-filter: blur(18px);
    transition: transform .24s ease, width .24s ease, padding .24s ease, box-shadow .24s ease;
}

.app-shell > .sidebar::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #5c4cf2, #9a2bff 55%, #44bddc);
    content: "";
}

.app-shell .brand-mark,
.app-shell .profile-menu summary span,
.app-shell .admin-avatar {
    background: linear-gradient(145deg, #a94aff, #6321d9 62%, #3e20b5);
    box-shadow: 0 9px 0 rgba(74, 30, 170, .15), 0 13px 23px rgba(102, 36, 211, .30), inset 0 1px rgba(255, 255, 255, .55);
    text-shadow: 0 1px 2px rgba(33, 10, 91, .35);
}

.app-shell .nav-item,
.app-shell .side-link,
.app-shell .side-button {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.app-shell .nav-item:hover,
.app-shell .side-link:hover,
.app-shell .side-button:hover {
    border-color: rgba(128, 73, 238, .15);
    box-shadow: 0 7px 13px rgba(85, 47, 173, .10), var(--three-inset);
    transform: translateX(3px) translateY(-1px);
}

.app-shell .nav-item.active,
.app-shell .side-link.active {
    border-color: rgba(255, 255, 255, .44);
    background: linear-gradient(135deg, #7e28ed, #a33bfa 58%, #4b63ee);
    box-shadow: 0 8px 0 rgba(72, 23, 157, .18), 0 14px 24px rgba(88, 32, 199, .28), inset 0 1px rgba(255, 255, 255, .45);
    text-shadow: 0 1px rgba(58, 20, 133, .28);
    transform: translateY(-2px);
}

.app-shell .nav-item > .nav-icon,
.app-shell .side-icon {
    border-radius: 9px;
    color: #7040d3;
    text-shadow: 0 1px #fff;
}

.app-shell .nav-item.active > .nav-icon,
.app-shell .side-link.active .side-icon {
    color: #fff;
    text-shadow: 0 1px rgba(46, 14, 109, .45);
}

#sidebar .nav-item > .nav-text {
    width: auto;
    color: inherit;
    font-size: inherit;
    text-align: left;
}

.desktop-collapse-sidebar,
.expand-sidebar { display: none; }

.desktop-collapse-sidebar {
    margin-left: auto;
    font-size: 1.45rem;
    line-height: 1;
}

.app-shell > .workspace {
    transition: width .24s ease, margin-left .24s ease;
}

@media (min-width: 801px) {
    .desktop-collapse-sidebar { display: grid; }

    .app-shell.sidebar-collapsed #sidebar {
        width: 78px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-shell.sidebar-collapsed .workspace {
        width: calc(100% - 78px);
        margin-left: 78px;
    }

    .app-shell.sidebar-collapsed #sidebar .sidebar-top {
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    .app-shell.sidebar-collapsed #sidebar .brand { gap: 0; }
    .app-shell.sidebar-collapsed #sidebar .brand-name,
    .app-shell.sidebar-collapsed #sidebar .nav-label,
    .app-shell.sidebar-collapsed #sidebar .nav-text,
    .app-shell.sidebar-collapsed #sidebar .nav-item i,
    .app-shell.sidebar-collapsed #sidebar .sidebar-help-copy,
    .app-shell.sidebar-collapsed #collapseSidebar { display: none; }

    .app-shell.sidebar-collapsed #sidebar .nav-item {
        justify-content: center;
        padding-right: 9px;
        padding-left: 9px;
    }

    .app-shell.sidebar-collapsed #sidebar .nav-item > .nav-icon {
        width: 22px;
        font-size: 1.08rem;
    }

    .app-shell.sidebar-collapsed #sidebar .sidebar-help {
        justify-content: center;
        padding: 10px;
    }

    .app-shell.sidebar-collapsed .expand-sidebar { display: grid; }
}

.workspace-return-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
    border: 1px solid rgba(118, 70, 211, .16);
    border-radius: 12px;
    padding: 10px 12px;
    background: linear-gradient(145deg, #fff, #eee6ff);
    box-shadow: 0 4px 0 rgba(93, 52, 174, .07), 0 9px 15px rgba(61, 33, 119, .09), var(--three-inset);
    color: #6332b7;
    font-size: .78rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease;
}

.workspace-return-link:hover {
    box-shadow: 0 7px 0 rgba(93, 52, 174, .09), 0 14px 20px rgba(61, 33, 119, .12), var(--three-inset);
    transform: translateY(-2px);
}

.app-shell .sidebar-help {
    border: 1px solid rgba(148, 91, 244, .13);
    background: linear-gradient(145deg, #fff, #f1eaff);
    box-shadow: 0 10px 0 rgba(110, 59, 199, .05), 0 16px 25px rgba(85, 47, 173, .10), var(--three-inset);
}

.workspace {
    background: transparent;
}

.workspace .topbar {
    margin: 12px 14px 0;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 19px;
    background: linear-gradient(115deg, rgba(255, 255, 255, .93), rgba(250, 247, 255, .86));
    box-shadow: 0 11px 0 rgba(100, 61, 185, .05), 0 18px 32px rgba(67, 38, 130, .12), var(--three-inset);
}

.workspace .icon-btn,
.workspace .return-admin-button {
    border: 1px solid rgba(116, 68, 212, .14);
    background: linear-gradient(145deg, #fff, #eee8ff);
    box-shadow: 0 4px 0 rgba(101, 60, 180, .08), 0 8px 15px rgba(75, 42, 145, .10), var(--three-inset);
}

.workspace .profile-menu summary {
    border-radius: 13px;
    padding: 4px 7px 4px 4px;
    background: rgba(255, 255, 255, .7);
    box-shadow: var(--three-inset);
}

.overview-date {
    border: 1px solid rgba(113, 65, 208, .13);
    border-radius: 999px;
    padding: 7px 10px;
    background: linear-gradient(145deg, #fff, #eee8ff);
    box-shadow: 0 3px 0 rgba(93, 52, 174, .07), var(--three-inset);
    color: #6040a6;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}

.workspace-search {
    display: flex;
    width: min(29vw, 315px);
    min-width: 210px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(113, 65, 208, .16);
    border-radius: 13px;
    padding: 4px 5px 4px 11px;
    background: linear-gradient(145deg, #fff, #f0ebff);
    box-shadow: 0 4px 0 rgba(93, 52, 174, .07), 0 8px 15px rgba(61, 33, 119, .08), var(--three-inset);
}

.workspace-search > span {
    color: #7242ce;
    font-size: 1rem;
    font-weight: 800;
}

.workspace-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--three-ink);
    font: inherit;
    font-size: .72rem;
}

.workspace-search input::placeholder { color: #9090aa; }

.workspace-search:focus-within {
    border-color: rgba(116, 54, 221, .47);
    box-shadow: 0 0 0 4px rgba(127, 57, 232, .11), 0 4px 0 rgba(93, 52, 174, .07), var(--three-inset);
}

.workspace-search button {
    border: 0;
    border-radius: 9px;
    padding: 7px 9px;
    background: linear-gradient(145deg, #8d34f2, #6120c9);
    box-shadow: 0 3px 0 rgba(64, 20, 151, .25), inset 0 1px rgba(255, 255, 255, .38);
    color: #fff;
    font: inherit;
    font-size: .64rem;
    font-weight: 800;
}

.workspace-search-status {
    min-height: 1.2em;
    margin: 11px 0 0;
    color: #6f52a6;
    font-size: .7rem;
    font-weight: 700;
}

.service-heading { margin-top: 43px; }

.service-count {
    border-radius: 999px;
    padding: 7px 10px;
    background: linear-gradient(145deg, #eafff5, #c7f2de);
    box-shadow: 0 3px 0 rgba(34, 135, 91, .10), inset 0 1px rgba(255, 255, 255, .7);
    color: #137c54;
    font-size: .67rem;
    font-weight: 800;
}

.service-empty {
    display: grid;
    min-height: 170px;
    place-items: center;
    grid-column: 1 / -1;
    border: 1px dashed rgba(115, 65, 208, .28);
    border-radius: 21px;
    padding: 26px;
    background: rgba(255, 255, 255, .57);
    color: #66708b;
    text-align: center;
}

.service-empty span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #f2e7ff, #d8bfff);
    box-shadow: 0 5px 0 rgba(93, 52, 174, .10), inset 0 1px #fff;
    color: #7022cd;
}

.service-empty h3 { margin: 12px 0 4px; color: var(--three-ink); }
.service-empty p { max-width: 350px; margin: 0; font-size: .76rem; line-height: 1.5; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dashboard-content {
    perspective: 1300px;
}

.welcome-row h1,
.admin-heading h1 {
    color: var(--three-ink);
    text-shadow: 0 2px 0 #fff, 0 8px 17px rgba(64, 35, 127, .13);
}

.wave {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #ffd789, #ff9b42);
    box-shadow: 0 6px 0 rgba(202, 112, 34, .17), 0 10px 18px rgba(202, 112, 34, .23), inset 0 1px rgba(255, 255, 255, .7);
    color: #fff5dc;
    text-shadow: 0 1px #c77524;
    vertical-align: middle;
}

.outline-btn,
.ghost-btn,
.workspace .profile-popover,
.workspace .profile-popover button {
    border-color: rgba(119, 73, 209, .18);
    background: linear-gradient(145deg, #fff, #f0ebff);
    box-shadow: 0 5px 0 rgba(104, 62, 188, .08), 0 10px 19px rgba(74, 40, 145, .10), var(--three-inset);
}

.outline-btn:hover,
.ghost-btn:hover {
    box-shadow: 0 8px 0 rgba(104, 62, 188, .10), 0 16px 25px rgba(74, 40, 145, .15), var(--three-inset);
    transform: translateY(-2px);
}

.metric-card,
.service-card,
.activity-card {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .93);
    box-shadow: var(--three-shadow), var(--three-inset);
    transition: transform .24s ease, box-shadow .24s ease;
}

.metric-card::after,
.service-card::after,
.activity-card::after,
.onboarding-card::after {
    position: absolute;
    z-index: -1;
    top: 1px;
    right: 12%;
    left: 12%;
    height: 40%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0));
    content: "";
    filter: blur(6px);
    pointer-events: none;
}

.metric-card:hover,
.service-card:hover,
.activity-card:hover {
    box-shadow: var(--three-shadow-raised), var(--three-inset);
    transform: translate3d(0, -7px, 18px) rotateX(1deg);
}

.metric-card {
    border-radius: 22px;
    background: linear-gradient(145deg, #fff 0%, #f6f4ff 100%);
}

.metric-card.blue { background: linear-gradient(145deg, #fff, #ebefff); }
.metric-card.amber { background: linear-gradient(145deg, #fff, #fff5e3); }
.metric-card.violet { background: linear-gradient(145deg, #fff, #f1e8ff); }
.metric-card.mint { background: linear-gradient(145deg, #fff, #e9fff5); }

.metric-icon,
.service-icon,
.empty-feed > span {
    border: 1px solid rgba(255, 255, 255, .82);
    background: linear-gradient(145deg, #fff, #e8e2ff);
    box-shadow: 0 6px 0 rgba(105, 67, 176, .10), 0 10px 17px rgba(75, 42, 145, .15), inset 0 1px #fff;
    transform: translateZ(18px);
}

.service-icon.service-image {
    overflow: hidden;
    background: #fff;
}

.service-icon.service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blue .metric-icon { background: linear-gradient(145deg, #eaf0ff, #cbd5ff); color: #3456df; }
.amber .metric-icon { background: linear-gradient(145deg, #fff8da, #ffda88); color: #bd7800; }
.violet .metric-icon { background: linear-gradient(145deg, #f4eaff, #d3b4ff); color: #7022cd; }
.mint .metric-icon { background: linear-gradient(145deg, #e7fff6, #b5eed6); color: #078b5d; }

.service-card {
    display: block;
    overflow: hidden;
    border-radius: 21px;
    box-shadow: 0 10px 0 rgba(93, 57, 160, .05), 0 21px 34px rgba(67, 38, 130, .12), var(--three-inset);
}

.service-card-actionable { cursor: pointer; }

.service-card-actionable:focus-visible {
    outline: 3px solid rgba(115, 51, 226, .42);
    outline-offset: 3px;
}

.service-card-menu {
    border-radius: 9px;
    padding: 3px 7px;
    background: rgba(255, 255, 255, .65);
    box-shadow: var(--three-inset);
    color: #776795;
    letter-spacing: .12em;
    line-height: 1;
}

.service-card-link,
.service-card-unavailable {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    color: #4558e8;
    font-size: .69rem;
    font-weight: 800;
}

.service-card-link b {
    margin-left: auto;
    font-size: .95rem;
    line-height: 1;
}

.service-card-unavailable { color: #727d92; }

.service-image {
    position: relative;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-image-fallback {
    display: grid;
    position: absolute;
    inset: 0;
    place-items: center;
}

.card-cyan { background: linear-gradient(145deg, #f8ffff, #dff8fa); }
.card-yellow { background: linear-gradient(145deg, #fffef8, #fff1b9); }
.card-pink { background: linear-gradient(145deg, #fffafb, #ffdfe8); }
.card-lilac { background: linear-gradient(145deg, #fffaff, #eee0ff); }
.card-sky { background: linear-gradient(145deg, #fbfdff, #dceaff); }
.card-orange { background: linear-gradient(145deg, #fffdfb, #ffe2cb); }

.service-card-top button {
    border-radius: 9px;
    padding: 3px 7px;
    background: rgba(255, 255, 255, .65);
    box-shadow: var(--three-inset);
}

.activity-card {
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #f5f2ff);
}

.onboarding-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 22px;
    box-shadow: 0 12px 0 rgba(67, 21, 144, .14), 0 28px 44px rgba(67, 21, 144, .29), inset 0 1px rgba(255, 255, 255, .40);
}

.onboarding-card::before {
    position: absolute;
    top: -55%;
    right: -26%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 63%);
    content: "";
}

.dark-btn,
.primary-btn,
.admin-primary,
.btn:not(.outline):not(.dark):not(.gray):not(.red) {
    border: 1px solid rgba(255, 255, 255, .27);
    background: linear-gradient(145deg, #9c45fb, #6d24da 58%, #455ae8);
    box-shadow: 0 7px 0 rgba(68, 23, 158, .27), 0 15px 25px rgba(79, 28, 177, .29), inset 0 1px rgba(255, 255, 255, .44);
    text-shadow: 0 1px rgba(48, 11, 119, .36);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.dark-btn:hover,
.primary-btn:hover,
.admin-primary:hover,
.btn:not(.outline):not(.dark):not(.gray):not(.red):hover {
    background: linear-gradient(145deg, #ae55ff, #7829e6 58%, #5067f1);
    box-shadow: 0 4px 0 rgba(68, 23, 158, .25), 0 11px 20px rgba(79, 28, 177, .27), inset 0 1px rgba(255, 255, 255, .44);
    transform: translateY(3px);
}

.dark-btn:active,
.primary-btn:active,
.admin-primary:active,
.btn:not(.outline):not(.dark):not(.gray):not(.red):active {
    box-shadow: 0 1px 0 rgba(68, 23, 158, .22), inset 0 2px 5px rgba(46, 8, 120, .26);
    transform: translateY(6px);
}

/* Authentication is intentionally calmer, while still using the same 3D language. */
.auth-shell {
    background: radial-gradient(circle at 78% 24%, #f7ecff, #e8e0ff 49%, #d9ceff 100%);
}

.auth-art {
    box-shadow: 20px 0 48px rgba(68, 29, 137, .18);
}

.auth-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(243, 238, 255, .88));
}

.auth-card {
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;
    padding: clamp(26px, 3vw, 38px);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .94));
    box-shadow: var(--three-shadow-raised), var(--three-inset);
}

.auth-card h2 {
    color: var(--three-ink);
    text-shadow: 0 2px #fff;
}

.phone-field,
.google-auth-btn {
    border-color: rgba(112, 67, 204, .18);
    background: linear-gradient(145deg, #fff, #f2eeff);
    box-shadow: var(--three-inset), 0 5px 11px rgba(75, 42, 145, .08);
}

.signal-center,
.signal {
    box-shadow: 0 13px 0 rgba(76, 37, 149, .11), 0 24px 32px rgba(31, 23, 90, .22), inset 0 1px rgba(255, 255, 255, .7);
}

.signal-center { animation: three-d-float 5s ease-in-out infinite; }
.signal-a { animation: three-d-float 6s ease-in-out .4s infinite; }
.signal-b { animation: three-d-float 5.5s ease-in-out .8s infinite; }
.signal-c { animation: three-d-float 6.5s ease-in-out 1.2s infinite; }

/* Admin overview and operations */
.admin-page {
    background:
        radial-gradient(circle at 78% 8%, rgba(180, 124, 255, .45), transparent 26rem),
        radial-gradient(circle at 30% 94%, rgba(115, 160, 255, .26), transparent 33rem),
        linear-gradient(145deg, #f8f5ff, #eee9ff 49%, #faf7ff);
}

.admin-sidebar {
    border-right-color: rgba(255, 255, 255, .87);
    background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(246, 241, 255, .92));
    box-shadow: 14px 0 0 rgba(101, 55, 189, .035), 18px 0 35px rgba(61, 33, 119, .12);
}

.admin-sidebar::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #505bea, #9b31f7 55%, #c271ff);
    content: "";
}

.admin-profile,
.admin-sidebar-footer a,
.admin-sidebar-footer button {
    border: 1px solid rgba(125, 75, 219, .13);
    background: linear-gradient(145deg, #fff, #f0eaff);
    box-shadow: 0 5px 0 rgba(95, 53, 176, .07), 0 11px 18px rgba(65, 36, 127, .09), var(--three-inset);
}

.admin-profile > span,
.admin-sidebar-brand span,
.admin-avatar {
    background: linear-gradient(145deg, #ac4fff, #6c23dd 63%, #4120bb);
    box-shadow: 0 6px 0 rgba(77, 30, 164, .17), 0 11px 17px rgba(96, 35, 201, .25), inset 0 1px rgba(255, 255, 255, .5);
}

.admin-side-link {
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-side-link:hover {
    border-color: rgba(123, 68, 224, .14);
    box-shadow: 0 6px 0 rgba(92, 49, 174, .07), 0 11px 18px rgba(61, 33, 119, .10), var(--three-inset);
    transform: translateX(3px) translateY(-1px);
}

.admin-side-link.active {
    border-color: rgba(255, 255, 255, .42);
    background: linear-gradient(135deg, #7b25e8, #a03bf8 58%, #4d60e9);
    box-shadow: 0 8px 0 rgba(71, 25, 158, .20), 0 15px 24px rgba(84, 29, 191, .28), inset 0 1px rgba(255, 255, 255, .43);
    transform: translateY(-2px);
}

.admin-topbar {
    border-bottom: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, .88), rgba(249, 246, 255, .85));
    box-shadow: 0 7px 0 rgba(105, 63, 188, .04), 0 13px 26px rgba(61, 33, 119, .10);
}

.admin-sidebar-toggle,
.admin-topbar-balance,
.admin-topbar-actions a {
    border: 1px solid rgba(119, 72, 210, .16);
    box-shadow: 0 4px 0 rgba(93, 52, 174, .08), 0 8px 15px rgba(61, 33, 119, .10), var(--three-inset);
}

.admin-sidebar-toggle { background: linear-gradient(145deg, #fff, #e9ddff); }
.admin-topbar-balance { background: linear-gradient(145deg, #fff, #f0ebff); }
.admin-topbar-actions a { background: linear-gradient(145deg, #34456f, #192846); }

.admin-content { perspective: 1400px; }

.admin-card,
.admin-metrics article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .88);
    background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(245, 242, 255, .96));
    box-shadow: var(--three-shadow), var(--three-inset);
}

.admin-card::before,
.admin-metrics article::after {
    position: absolute;
    z-index: -1;
    top: -38%;
    right: -10%;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(182, 134, 255, .20), rgba(182, 134, 255, 0) 68%);
    content: "";
}

.admin-card:hover {
    box-shadow: var(--three-shadow-raised), var(--three-inset);
    transform: translateY(-3px);
}

.admin-metrics {
    gap: 23px;
}

.admin-metrics article {
    min-height: 142px;
    border-radius: 23px;
    padding: 25px 24px 21px 78px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.admin-metrics article::before {
    position: absolute;
    top: 24px;
    left: 22px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 14px;
    background: linear-gradient(145deg, #efe5ff, #cdb3ff);
    box-shadow: 0 6px 0 rgba(95, 53, 176, .10), 0 11px 17px rgba(65, 36, 127, .14), inset 0 1px #fff;
    color: #6921cb;
    content: "✦";
    font-size: 1rem;
}

.admin-metrics article:nth-child(2)::before { background: linear-gradient(145deg, #e8f4ff, #afceff); color: #1d65c9; content: "◌"; }
.admin-metrics article:nth-child(3)::before { background: linear-gradient(145deg, #eafff3, #a9eccd); color: #087a50; content: "↗"; }

.admin-metrics article:hover {
    box-shadow: var(--three-shadow-raised), var(--three-inset);
    transform: translate3d(0, -7px, 18px) rotateX(1.1deg);
}

.admin-metrics article strong {
    text-shadow: 0 2px #fff, 0 6px 12px rgba(54, 33, 115, .10);
}

.quick-links {
    gap: 11px;
    overflow: visible;
    padding: 11px;
    border-radius: 23px;
}

.quick-links a {
    border: 1px solid rgba(119, 72, 210, .10);
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #f1edff);
    box-shadow: 0 5px 0 rgba(93, 52, 174, .06), 0 9px 15px rgba(61, 33, 119, .08), var(--three-inset);
    transition: transform .18s ease, box-shadow .18s ease;
}

.quick-links a:hover {
    background: linear-gradient(145deg, #fff, #eee4ff);
    box-shadow: 0 8px 0 rgba(93, 52, 174, .08), 0 14px 20px rgba(61, 33, 119, .12), var(--three-inset);
    transform: translateY(-3px);
}

.admin-filter,
.admin-form,
.settings-form,
.user-directory,
.table-wrap,
.log-list > .admin-card {
    border-radius: 22px;
}

.admin-filter input,
.admin-filter select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.settings-form input,
.settings-form textarea,
.settings-form select,
.row-form input,
.row-form select {
    border-color: rgba(119, 72, 210, .17);
    background: linear-gradient(145deg, #fff, #f6f3ff);
    box-shadow: var(--three-inset);
}

.status-pill,
.user-role-pill,
.admin-count {
    box-shadow: 0 3px 0 rgba(66, 36, 119, .09), inset 0 1px rgba(255, 255, 255, .6);
}

/* Telegram workspace uses the same depth but keeps its dense tools easy to scan. */
.content .topbar {
    border: 1px solid rgba(255, 255, 255, .93);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(247, 243, 255, .88));
    box-shadow: 0 10px 0 rgba(95, 53, 176, .06), 0 19px 30px rgba(61, 33, 119, .11), var(--three-inset);
}

.content .panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .92);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(246, 243, 255, .96));
    box-shadow: var(--three-shadow), var(--three-inset);
    transition: transform .22s ease, box-shadow .22s ease;
}

.content .panel:hover {
    box-shadow: var(--three-shadow-raised), var(--three-inset);
    transform: translateY(-3px);
}

.content .grid-3 > .panel {
    min-height: 132px;
}

.content .grid-3 > .panel:nth-child(1) { background: linear-gradient(145deg, #fff, #eee5ff); }
.content .grid-3 > .panel:nth-child(2) { background: linear-gradient(145deg, #fff, #e2edff); }
.content .grid-3 > .panel:nth-child(3) { background: linear-gradient(145deg, #fff, #e2fff2); }
.content .grid-3 > .panel:nth-child(4) { background: linear-gradient(145deg, #fff, #fff1d8); }

.content .stat {
    color: var(--three-ink);
    text-shadow: 0 2px #fff, 0 7px 13px rgba(54, 33, 115, .11);
}

.content .btn.outline,
.content .btn.dark,
.content .btn.gray,
.content .btn.red,
.content .sidebar-toggle {
    border-color: rgba(119, 72, 210, .18);
    background: linear-gradient(145deg, #fff, #f0ebff);
    box-shadow: 0 4px 0 rgba(93, 52, 174, .08), 0 9px 15px rgba(61, 33, 119, .10), var(--three-inset);
}

.content input,
.content textarea,
.content select {
    border-color: rgba(119, 72, 210, .18);
    background: linear-gradient(145deg, #fff, #f7f4ff);
    box-shadow: var(--three-inset);
}

/*
 * Violet console refinement
 * A high-contrast, raised control-room treatment for all three workspaces.
 * It intentionally uses an original structure rather than mirroring any reference UI.
 */
:root {
    --three-violet: #9139e8;
    --three-violet-dark: #6221bf;
    --three-indigo: #7143dd;
    --three-canvas: #f4f2f9;
    --three-surface: #ffffff;
    --three-ink: #20243a;
    --three-shadow: 0 19px 38px rgba(67, 36, 121, .13), 0 5px 13px rgba(55, 38, 94, .08);
    --three-shadow-raised: 0 26px 46px rgba(67, 36, 121, .20), 0 8px 0 rgba(103, 49, 187, .08);
}

body {
    background-color: var(--three-canvas);
    color: var(--three-ink);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.55;
}

h1,
h2,
h3,
h4,
strong {
    color: #1e2238;
}

.admin-page,
.app-shell {
    background:
        radial-gradient(circle at 90% 2%, rgba(197, 115, 255, .24), transparent 24rem),
        radial-gradient(circle at 35% 100%, rgba(118, 90, 223, .13), transparent 33rem),
        linear-gradient(135deg, #f8f7fb 0%, #f1eef8 51%, #f8f7fb 100%);
}

/* The left rail is intentionally saturated so the white content surface stays easy to scan. */
.admin-sidebar,
.app-shell > .sidebar {
    border-right: 1px solid rgba(255, 255, 255, .27);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .28), transparent 15rem),
        linear-gradient(163deg, #b850ee 0%, #963ce5 43%, #6d28c5 100%);
    box-shadow: 11px 0 27px rgba(75, 30, 141, .19), inset -1px 0 rgba(255, 255, 255, .20);
    color: #fff;
}

.admin-sidebar::before,
.app-shell > .sidebar::before {
    height: 1px;
    background: rgba(255, 255, 255, .65);
}

.admin-sidebar-brand {
    gap: 9px;
    padding: 4px 10px 19px;
    color: #fff;
    font-family: var(--three-font-display);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.admin-sidebar-brand b { color: #fff; }

.admin-sidebar-brand small {
    display: block;
    margin-left: -5px;
    color: rgba(255, 255, 255, .70);
    font-family: var(--three-font-body);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.admin-sidebar-brand span,
.admin-profile > span,
.app-shell .brand-mark,
.app-shell .profile-menu summary span,
.app-shell .admin-avatar {
    background: linear-gradient(145deg, #fff, #ece1ff);
    box-shadow: 0 5px 0 rgba(72, 22, 145, .20), 0 10px 16px rgba(52, 16, 105, .24), inset 0 1px rgba(255, 255, 255, .95);
    color: #7c2cdb;
    text-shadow: none;
}

.admin-profile,
.app-shell .sidebar-help,
.admin-sidebar-footer a,
.admin-sidebar-footer button {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 7px 15px rgba(67, 19, 132, .13);
    color: #fff;
}

.admin-profile b,
.admin-profile small,
.admin-sidebar-footer > span,
.admin-sidebar-footer > span b,
.app-shell .sidebar-help,
.app-shell .sidebar-help strong,
.app-shell .sidebar-help a {
    color: #fff;
}

.admin-profile small,
.admin-sidebar-footer > span,
.app-shell .sidebar-help,
.app-shell .sidebar-help a { color: rgba(255, 255, 255, .75); }

.admin-sidebar-footer { border-top-color: rgba(255, 255, 255, .24); }

.admin-sidebar-footer button { background: rgba(66, 17, 123, .25); }

.admin-nav-label,
.app-shell .nav-label {
    color: rgba(255, 255, 255, .63);
    font-size: .61rem;
}

.admin-side-link,
.app-shell .nav-item,
.app-shell .side-link,
.app-shell .side-button {
    border-color: transparent;
    color: rgba(255, 255, 255, .94);
    font-weight: 700;
}

.admin-nav-icon,
.app-shell .nav-item > .nav-icon,
.app-shell .side-icon,
.app-shell .nav-item > span,
.app-shell .help-icon {
    color: rgba(255, 255, 255, .92);
    text-shadow: none;
}

.admin-side-link:hover,
.app-shell .nav-item:hover,
.app-shell .side-link:hover,
.app-shell .side-button:hover {
    border-color: rgba(255, 255, 255, .20);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 7px 14px rgba(65, 20, 129, .14);
    color: #fff;
    transform: translateX(3px);
}

.admin-side-link.active,
.app-shell .nav-item.active,
.app-shell .side-link.active {
    border-color: rgba(255, 255, 255, .48);
    background: linear-gradient(135deg, #fff, #f8f4ff);
    box-shadow: 0 7px 0 rgba(73, 23, 145, .17), 0 13px 21px rgba(57, 16, 118, .23), inset 0 1px #fff;
    color: #742bd1;
    text-shadow: none;
}

.admin-side-link.active .admin-nav-icon,
.app-shell .nav-item.active > .nav-icon,
.app-shell .side-link.active .side-icon,
.app-shell .nav-item.active > span {
    color: #7c2cdb;
    text-shadow: none;
}

/* Purple title bars create a strong visual hierarchy while keeping actions as bright, tactile controls. */
.admin-topbar,
.workspace .topbar,
.content .topbar {
    border-color: rgba(255, 255, 255, .28);
    background:
        radial-gradient(circle at 81% 0%, rgba(255, 255, 255, .22), transparent 15rem),
        linear-gradient(112deg, #b54ef0 0%, #9636e3 52%, #7330c9 100%);
    box-shadow: 0 10px 24px rgba(88, 33, 165, .20), inset 0 1px rgba(255, 255, 255, .26);
    color: #fff;
}

.admin-crumb,
.admin-crumb b,
.workspace .crumb,
.workspace .crumb b,
.workspace .crumb strong,
.content .topbar h1,
.content .topbar h2,
.content .topbar p {
    color: rgba(255, 255, 255, .93);
}

.admin-sidebar-toggle,
.admin-topbar-balance,
.admin-topbar-actions a,
.workspace .icon-btn,
.workspace .return-admin-button,
.workspace .profile-menu summary,
.content .btn.outline,
.content .btn.dark,
.content .btn.gray,
.content .btn.red,
.content .sidebar-toggle {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 4px 0 rgba(71, 23, 142, .14), inset 0 1px #fff;
    color: #6330b8;
}

.admin-topbar-actions a { color: #3f266e; }

.workspace-search {
    border-color: rgba(255, 255, 255, .40);
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 5px 0 rgba(70, 20, 139, .14), inset 0 1px #fff;
}

.workspace-search > span,
.workspace-search input { color: #6330b8; }
.workspace-search input::placeholder { color: #9383b3; }

.metric-card,
.service-card,
.activity-card,
.admin-card,
.admin-metrics article,
.content .panel {
    border-color: rgba(255, 255, 255, .96);
    background: linear-gradient(145deg, #fff 0%, #f8f6fc 100%);
    box-shadow: 0 15px 0 rgba(92, 46, 170, .045), 0 24px 36px rgba(64, 41, 111, .11), var(--three-inset);
}

.metric-card:hover,
.service-card:hover,
.activity-card:hover,
.admin-card:hover,
.admin-metrics article:hover,
.content .panel:hover {
    box-shadow: 0 19px 0 rgba(92, 46, 170, .055), 0 31px 43px rgba(64, 41, 111, .17), var(--three-inset);
}

.admin-table th,
.admin-table td {
    border-bottom-color: #ebe7f2;
}

.admin-table th,
.admin-filter label,
.admin-form label,
.settings-form label,
.user-directory-columns {
    color: #70728a;
}

.admin-table td { color: #50536a; }
.admin-table strong { color: #20243a; }

.admin-product-cover {
    display: block;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 5px 0 rgba(83, 49, 150, .08), 0 9px 15px rgba(66, 39, 120, .11);
}

.product-list-heading {
    align-items: center;
    margin-bottom: 20px;
}

.product-list-heading .eyebrow {
    color: #8c61c4;
}

.product-list-heading h1 {
    margin: 2px 0 5px;
}

.product-list-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.product-total {
    border: 1px solid #e0d3f4;
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, .72);
    color: #6d5499;
    font-size: .67rem;
    font-weight: 800;
}

.product-catalog {
    display: grid;
    gap: 17px;
}

.product-list-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: clamp(18px, 2.4vw, 30px);
    overflow: hidden;
    border: 1px solid rgba(229, 218, 244, .98);
    border-radius: 23px;
    padding: clamp(18px, 2.2vw, 27px);
    background: linear-gradient(140deg, rgba(255, 255, 255, .97), rgba(247, 242, 253, .93));
    box-shadow: 0 9px 0 rgba(91, 48, 167, .045), 0 20px 32px rgba(68, 42, 120, .10), inset 0 1px rgba(255, 255, 255, .93);
}

.product-list-card::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 4px;
    border-radius: 0 9px 9px 0;
    background: linear-gradient(#c55afa, #7440e5);
    content: "";
}

.product-list-main {
    display: flex;
    min-width: 0;
    gap: 17px;
}

.product-list-cover {
    display: grid;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 19px;
    background: linear-gradient(145deg, #fff, #eee3fb);
    box-shadow: 0 7px 0 rgba(91, 51, 166, .08), 0 13px 21px rgba(67, 41, 118, .12), inset 0 1px #fff;
    color: #7b36c7;
    font-size: 1.7rem;
}

.product-list-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list-identity {
    min-width: 0;
    flex: 1;
}

.product-list-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.product-list-title-row h2 {
    margin: 0;
    color: #222640;
    font-family: var(--three-font-display);
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.product-list-code {
    display: block;
    margin-top: 4px;
    color: #806ba5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .65rem;
    font-weight: 700;
}

.product-type-badge,
.product-card-visibility {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e4daf1;
    border-radius: 999px;
    padding: 6px 9px;
    background: #f8f4ff;
    color: #745490;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-list-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 9px 0 13px;
    color: #71758a;
    font-size: .72rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-property-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.product-property-grid > div {
    min-width: 0;
    border: 1px solid #ede5f5;
    border-radius: 11px;
    padding: 8px 9px;
    background: rgba(255, 255, 255, .7);
}

.product-property-grid dt {
    margin-bottom: 4px;
    color: #9691a6;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.product-property-grid dd {
    overflow: hidden;
    margin: 0;
    color: #42465f;
    font-size: .65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-plan-chip-section {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
}

.product-plan-chip-section > span {
    flex: 0 0 auto;
    padding-top: 5px;
    color: #8e879e;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.product-plan-chips {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 7px;
}

.product-plan-chip,
.product-plan-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e8dff3;
    border-radius: 8px;
    padding: 5px 7px;
    background: #fbf9fe;
    color: #5e576f;
    font-size: .61rem;
    white-space: nowrap;
}

.product-plan-chip b { color: #4f3e75; }
.product-plan-chip i { color: #8a6ab2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }
.product-plan-chip em { color: #117a5c; font-style: normal; font-weight: 800; }
.product-plan-more { color: #7651a7; font-weight: 800; }

.product-list-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border-left: 1px solid #ece4f5;
    padding-left: clamp(16px, 2vw, 25px);
}

.product-card-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.product-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.product-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.product-card-status.is-active {
    background: #def8ea;
    color: #177653;
}

.product-card-status.is-active i { background: #16a773; box-shadow: 0 0 0 3px rgba(22, 167, 115, .12); }
.product-card-status.is-inactive { background: #fff0d9; color: #a96d15; }
.product-card-status.is-inactive i { background: #e6a337; box-shadow: 0 0 0 3px rgba(230, 163, 55, .13); }

.product-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-card-action {
    display: inline-flex;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfd4ef;
    border-radius: 9px;
    padding: 8px 9px;
    background: #fff;
    color: #624d86;
    font: inherit;
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.product-card-action:hover {
    border-color: #a782d9;
    background: #f7f1ff;
    color: #5d2fa3;
}

.product-card-open {
    grid-column: 1 / -1;
    justify-content: space-between;
    border-color: #8e47df;
    background: linear-gradient(135deg, #9842eb, #6837d9);
    box-shadow: 0 5px 0 #5f2cc7, 0 9px 15px rgba(95, 44, 199, .17);
    color: #fff;
}

.product-card-open:hover {
    border-color: #7335d2;
    background: linear-gradient(135deg, #8d37e0, #5c2fc9);
    color: #fff;
}

.product-card-edit { border-color: #b5dfd1; color: #0e735b; }
.product-card-edit:hover { border-color: #69b79f; background: #eefff8; color: #075d48; }

.product-card-delete-form {
    grid-column: 1 / -1;
    margin: 0;
}

.product-card-delete {
    width: 100%;
    border-color: #ffd1db;
    background: #fff8fa;
    color: #c23d58;
}

.product-card-delete:hover {
    border-color: #f5a7b9;
    background: #ffedf1;
    color: #ab2846;
}

.product-catalog-empty {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    border: 1px dashed #d9c9ed;
    border-radius: 22px;
    padding: 30px;
    background: rgba(255, 255, 255, .7);
    text-align: center;
}

.product-catalog-empty > span {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #efdfff, #c89af8);
    color: #6e30bd;
    font-size: 1.25rem;
}

.product-catalog-empty h2 {
    margin: 13px 0 5px;
    color: #36314c;
    font-family: var(--three-font-display);
    font-size: 1.15rem;
}

.product-catalog-empty p {
    max-width: 350px;
    margin: 0 0 17px;
    color: #817c90;
    font-size: .74rem;
}

.product-catalog-pagination { margin-top: 18px; }

/* The catalogue list deliberately keeps only the six values that are managed here. */
.product-ledger-shell {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid rgba(225, 213, 240, .98);
    border-radius: 23px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(240, 232, 250, .82));
    box-shadow: 0 8px 0 rgba(91, 48, 167, .045), 0 20px 34px rgba(68, 42, 120, .10), inset 0 1px rgba(255, 255, 255, .96);
}

.product-ledger-scroll {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.product-ledger {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0 9px;
    table-layout: fixed;
}

.product-ledger th {
    padding: 0 14px 5px;
    color: #8c849c;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.product-ledger-col-product { width: auto; }
.product-ledger-col-type { width: 108px; }
.product-ledger-col-visibility { width: 104px; }
.product-ledger-col-actions { width: 218px; }

.product-ledger td {
    border-top: 1px solid #eae2f3;
    border-bottom: 1px solid #eae2f3;
    padding: 16px 14px;
    background: linear-gradient(90deg, #fff, #fbf9fe);
    color: #4d5064;
    vertical-align: middle;
}

.product-ledger tbody tr {
    filter: drop-shadow(0 6px 7px rgba(67, 39, 119, .075));
}

.product-ledger td:first-child {
    border-left: 1px solid #eae2f3;
    border-radius: 13px 0 0 13px;
    box-shadow: inset 4px 0 0 #a949ec;
}

.product-ledger td:last-child {
    border-right: 1px solid #eae2f3;
    border-radius: 0 13px 13px 0;
}

.product-ledger tbody tr:hover td { background: linear-gradient(90deg, #fff, #f5edff); }

.product-ledger-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.product-ledger-cover {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #e9dcfa);
    box-shadow: 0 4px 0 rgba(91, 51, 166, .09), 0 8px 14px rgba(67, 41, 118, .13), inset 0 1px #fff;
    color: #7632cb;
    font-size: 1rem;
}

.product-ledger-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-ledger-cover-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.product-ledger-copy {
    display: block;
    min-width: 0;
}

.product-ledger-copy strong,
.product-ledger-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-ledger-copy strong {
    color: #272a42;
    font-family: var(--three-font-display);
    font-size: .91rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.product-ledger-copy small {
    margin-top: 5px;
    color: #8068a5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .62rem;
    font-weight: 700;
}

.product-ledger-product-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.product-ledger-product-cell .product-ledger-identity {
    flex: 1 1 160px;
}

.product-ledger-product-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.product-ledger-product-controls form { margin: 0; }

.product-ledger-pricing,
.product-ledger-availability {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    border: 1px solid #e1d3f5;
    border-radius: 11px;
    padding: 7px 9px;
    background: linear-gradient(145deg, #fff, #f7f1ff);
    box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 4px 0 rgba(102, 49, 186, .08);
    color: #6833b8;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.product-ledger-pricing:hover {
    border-color: #b688e7;
    background: #f4ebff;
    color: #4c1b96;
    transform: translateY(-1px);
}

.product-ledger-pricing > span,
.product-ledger-pricing small,
.product-ledger-availability b,
.product-ledger-availability small {
    display: block;
    line-height: 1.15;
    white-space: nowrap;
}

.product-ledger-pricing > span,
.product-ledger-availability b {
    font-size: .65rem;
    font-weight: 850;
}

.product-ledger-pricing small,
.product-ledger-availability small {
    margin-top: 3px;
    color: #87799b;
    font-size: .56rem;
    font-weight: 700;
}

.product-ledger-availability {
    border-color: #ccefdc;
    cursor: pointer;
}

.product-ledger-availability.is-off {
    border-color: #f3d6bd;
    background: linear-gradient(145deg, #fffdfa, #fff2e6);
    color: #9a5e17;
}

.product-ledger-availability:hover { transform: translateY(-1px); }

.product-ledger-switch {
    display: inline-flex;
    width: 28px;
    height: 16px;
    flex: 0 0 28px;
    align-items: center;
    border-radius: 999px;
    background: #22b87a;
    box-shadow: inset 0 1px 2px rgba(24, 107, 75, .24);
    transition: background .18s ease;
}

.product-ledger-switch i {
    display: block;
    width: 12px;
    height: 12px;
    margin-left: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(41, 42, 72, .28);
    transition: margin .18s ease;
}

.product-ledger-availability.is-off .product-ledger-switch { background: #d58b37; }
.product-ledger-availability.is-off .product-ledger-switch i { margin-left: 2px; }

.product-ledger-pill {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    gap: 5px;
    border: 1px solid #e7dcf3;
    border-radius: 999px;
    padding: 6px 9px;
    background: #fbf8ff;
    color: #70528f;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-ledger-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.product-ledger-pill.is-active { border-color: #ccefdc; background: #e7fbef; color: #187653; }
.product-ledger-pill.is-active i { background: #19ab76; box-shadow: 0 0 0 3px rgba(25, 171, 118, .12); }
.product-ledger-pill.is-inactive { border-color: #f2dcb7; background: #fff3df; color: #a96d15; }
.product-ledger-pill.is-inactive i { background: #e6a337; box-shadow: 0 0 0 3px rgba(230, 163, 55, .13); }
.product-ledger-visibility { color: #7655a2; }

.product-ledger-actions { text-align: right; }

.product-ledger-action-group {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    white-space: nowrap;
}

.product-ledger-action-group form { margin: 0; }

.product-ledger-action {
    display: inline-flex;
    min-height: 33px;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded2ed;
    border-radius: 9px;
    padding: 7px 10px;
    background: #fff;
    color: #664d87;
    font: inherit;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.product-ledger-edit { border-color: #b8e1d3; color: #0f7259; }
.product-ledger-edit:hover { border-color: #69b79f; background: #effff8; color: #075d48; }
.product-ledger-delete { border-color: #ffd2dc; background: #fff8fa; color: #c63b58; }
.product-ledger-delete:hover { border-color: #f2a1b4; background: #ffedf1; color: #aa2745; }

@media (max-width: 720px) {
    .product-ledger-shell { padding: 9px; border-radius: 18px; }
    .product-ledger { min-width: 980px; }
    .product-ledger td { padding: 14px 11px; }
    .product-ledger-cover { width: 39px; height: 39px; flex-basis: 39px; }
}

@container (max-width: 1180px) {
    .product-ledger th { padding-right: 10px; padding-left: 10px; }
    .product-ledger td { padding-right: 10px; padding-left: 10px; }
    .product-ledger-action { padding-right: 6px; padding-left: 6px; font-size: .61rem; }
    .product-ledger-product-cell { align-items: flex-start; flex-direction: column; }
    .product-ledger-product-controls { justify-content: flex-start; }
}

/* A narrower desktop rail keeps the navigation readable while returning workspace width to the list views. */
@media (min-width: 821px) {
    .admin-sidebar {
        width: 220px;
        flex-basis: 220px;
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Product catalogue: primary details stay together, compact fields adapt to the rail. */
.product-core-grid > .product-field--primary,
.product-core-grid > .product-field--description {
    grid-column: span 6;
}

.product-core-grid > .product-field--compact {
    grid-column: span 4;
}

.product-field--description textarea {
    min-height: 92px;
}

.product-field > small a {
    color: #6b31c1;
    font-weight: 800;
    text-decoration: none;
}

.product-field > small a:hover { text-decoration: underline; }

@media (min-width: 1281px) {
    .admin-shell.sidebar-collapsed .product-core-grid > .product-field--compact {
        grid-column: span 3;
    }
}

@media (max-width: 1100px) {
    .product-core-grid > .product-field--primary,
    .product-core-grid > .product-field--description,
    .product-core-grid > .product-field--compact {
        grid-column: span 6;
    }
}

@media (max-width: 760px) {
    .product-core-grid > .product-field--primary,
    .product-core-grid > .product-field--description,
    .product-core-grid > .product-field--compact {
        grid-column: 1 / -1;
    }
}

.product-types-layout {
    display: grid;
    grid-template-columns: minmax(260px, .64fr) minmax(0, 1.36fr);
    gap: 22px;
    align-items: start;
}

.product-type-create {
    max-width: none;
    grid-template-columns: 1fr;
}

.product-type-create-intro {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-type-create-intro > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #a84efc, #6a24d8);
    box-shadow: 0 5px 0 rgba(91, 35, 185, .19), 0 10px 16px rgba(91, 35, 185, .18);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.product-type-create-intro h2,
.product-type-directory h2 {
    margin: 0;
    color: #242841;
    font-family: var(--three-font-display);
    font-size: 1rem;
}

.product-type-create-intro p {
    margin: 3px 0 0;
    color: #7b7f95;
    font-size: .72rem;
    line-height: 1.45;
}

.product-type-create label small {
    display: block;
    margin-top: 6px;
    color: #85899c;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

.product-type-create-actions {
    justify-content: space-between !important;
    padding-top: 2px;
}

.product-type-create-actions .admin-primary span { margin-left: 10px; }

.product-type-directory { padding: clamp(18px, 2vw, 26px); }

.product-type-directory-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 19px;
}

.product-type-directory-heading p {
    margin: 0 0 4px;
    color: #8d63d8;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.product-type-directory-heading > span {
    border: 1px solid #e6d9fb;
    border-radius: 999px;
    padding: 7px 10px;
    background: #f7f1ff;
    color: #7540c9;
    font-size: .67rem;
    font-weight: 800;
}

.product-type-directory-columns,
.product-type-directory-row {
    display: grid;
    grid-template-columns: minmax(145px, 1.35fr) minmax(110px, .8fr) minmax(82px, .55fr) auto;
    gap: 12px;
    align-items: center;
}

.product-type-directory-columns {
    border-bottom: 1px solid #e9e2f3;
    padding: 0 12px 9px;
    color: #8a8da0;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.product-type-directory-list { display: grid; gap: 9px; padding-top: 10px; }

.product-type-directory-row {
    min-height: 68px;
    border: 1px solid #e9e2f3;
    border-radius: 14px;
    padding: 11px 12px;
    background: linear-gradient(145deg, #fff, #f8f5ff);
    box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 5px 11px rgba(67, 38, 126, .045);
}

.product-type-name { display: grid; gap: 3px; min-width: 0; }
.product-type-name strong { color: #2b2e46; font-size: .78rem; }
.product-type-name small { color: #85899c; font-size: .65rem; }

.product-type-directory-row code {
    overflow: hidden;
    color: #6334ab;
    font-family: var(--three-font-body);
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-type-count,
.product-type-required {
    width: max-content;
    border-radius: 999px;
    padding: 6px 8px;
    font-size: .63rem;
    font-weight: 800;
    white-space: nowrap;
}

.product-type-count { background: #edf7ff; color: #397097; }
.product-type-required { border: 1px solid #d8efdf; background: #ebfbf1; color: #19805a; }

.product-type-actions { justify-self: end; }
.product-type-actions form { margin: 0; }

.product-type-actions button {
    border: 1px solid #ffd5df;
    border-radius: 9px;
    padding: 7px 9px;
    background: #fff7f9;
    color: #c83b58;
    font: inherit;
    font-size: .64rem;
    font-weight: 800;
    cursor: pointer;
}

.product-type-actions button:hover { border-color: #f0a8bb; background: #ffedf1; }

@media (max-width: 940px) {
    .product-types-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .product-type-directory-columns { display: none; }
    .product-type-directory-row { grid-template-columns: 1fr auto; gap: 10px; }
    .product-type-directory-row code,
    .product-type-count { grid-column: 1; }
    .product-type-actions { grid-column: 2; grid-row: 1 / span 2; }
}

/* Services are the user dashboard's first action, not a secondary summary. */
.dashboard-content > .service-heading-primary {
    margin-top: 0;
    padding-top: clamp(2px, .8vw, 10px);
}

.dashboard-content > .service-heading-primary h2 {
    font-size: clamp(1.7rem, 2.3vw, 2.35rem);
}

/* User rows use the same compact, book-like ledger treatment as products. */
.user-list-heading { align-items: center; }

.user-list-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.user-ledger-shell {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid rgba(225, 213, 240, .98);
    border-radius: 23px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(240, 232, 250, .82));
    box-shadow: 0 8px 0 rgba(91, 48, 167, .045), 0 20px 34px rgba(68, 42, 120, .10), inset 0 1px rgba(255, 255, 255, .96);
}

.user-ledger-scroll {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.user-ledger {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0 9px;
    table-layout: fixed;
}

.user-ledger-col-account { width: auto; }
.user-ledger-col-service { width: 190px; }
.user-ledger-col-role { width: 96px; }
.user-ledger-col-status { width: 110px; }
.user-ledger-col-actions { width: 264px; }

.user-ledger th {
    padding: 0 14px 5px;
    color: #8c849c;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.user-ledger td {
    border-top: 1px solid #eae2f3;
    border-bottom: 1px solid #eae2f3;
    padding: 16px 14px;
    background: linear-gradient(90deg, #fff, #fbf9fe);
    color: #4d5064;
    vertical-align: middle;
}

.user-ledger tbody tr { filter: drop-shadow(0 6px 7px rgba(67, 39, 119, .075)); }
.user-ledger td:first-child {
    border-left: 1px solid #eae2f3;
    border-radius: 13px 0 0 13px;
    box-shadow: inset 4px 0 0 #7e40e7;
}
.user-ledger td:last-child {
    border-right: 1px solid #eae2f3;
    border-radius: 0 13px 13px 0;
}
.user-ledger tbody tr:hover td { background: linear-gradient(90deg, #fff, #f5edff); }

.user-ledger-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.user-ledger-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 13px;
    background: linear-gradient(145deg, #f4e5ff, #d9bcff);
    box-shadow: 0 4px 0 rgba(91, 51, 166, .09), 0 8px 14px rgba(67, 41, 118, .13), inset 0 1px #fff;
    color: #6d2cc1;
    font-size: .8rem;
    font-weight: 800;
}

.user-ledger-copy {
    display: block;
    min-width: 0;
}

.user-ledger-copy strong,
.user-ledger-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-ledger-copy strong {
    color: #272a42;
    font-family: var(--three-font-display);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.user-ledger-copy small {
    margin-top: 5px;
    color: #8068a5;
    font-size: .62rem;
    font-weight: 700;
}

.user-ledger-service,
.user-ledger-balance { display: block; }
.user-ledger-service {
    overflow: hidden;
    color: #454960;
    font-size: .69rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-ledger-balance {
    margin-top: 5px;
    color: #117a5c;
    font-size: .64rem;
    font-weight: 800;
}

.user-ledger-pill {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    gap: 5px;
    border: 1px solid #d4eedf;
    border-radius: 999px;
    padding: 6px 9px;
    background: #e8fbf0;
    color: #177653;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.user-ledger-pill.is-admin { border-color: #e4d7f5; background: #f3ecff; color: #7643a5; }
.user-ledger-pill.is-active i,
.user-ledger-pill.is-inactive i { width: 6px; height: 6px; border-radius: 50%; }
.user-ledger-pill.is-active i { background: #19ab76; box-shadow: 0 0 0 3px rgba(25, 171, 118, .12); }
.user-ledger-pill.is-inactive { border-color: #f2dcb7; background: #fff3df; color: #a96d15; }
.user-ledger-pill.is-inactive i { background: #e6a337; box-shadow: 0 0 0 3px rgba(230, 163, 55, .13); }

.user-ledger-actions { text-align: right; }
.user-ledger-action-group {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
}
.user-ledger-action-group form { min-width: 0; flex: 1 1 0; margin: 0; }

.user-ledger-action {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 33px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded2ed;
    border-radius: 9px;
    padding: 7px 6px;
    background: #fff;
    color: #664d87;
    font: inherit;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.user-ledger-action-group > .user-ledger-action { flex: 1 1 0; }
.user-ledger-login { border-color: #8e47df; background: linear-gradient(135deg, #9842eb, #6837d9); color: #fff; }
.user-ledger-edit { border-color: #b8e1d3; color: #0f7259; }
.user-ledger-edit:hover { border-color: #69b79f; background: #effff8; color: #075d48; }
.user-ledger-delete { border-color: #ffd2dc; background: #fff8fa; color: #c63b58; }
.user-ledger-delete:hover { border-color: #f2a1b4; background: #ffedf1; color: #aa2745; }

.user-ledger-empty {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    border: 1px dashed #d9c9ed;
    border-radius: 17px;
    padding: 30px;
    background: rgba(255, 255, 255, .7);
    text-align: center;
}
.user-ledger-empty > span { color: #8a50cf; font-size: 1.3rem; }
.user-ledger-empty h2 { margin: 10px 0 5px; color: #36314c; font-family: var(--three-font-display); font-size: 1.05rem; }
.user-ledger-empty p { margin: 0; color: #817c90; font-size: .74rem; }
.user-ledger-pagination { margin-top: 18px; }

@container (max-width: 1180px) {
    .user-ledger th { padding-right: 10px; padding-left: 10px; }
    .user-ledger td { padding-right: 10px; padding-left: 10px; }
    .user-ledger-action { font-size: .59rem; }
}

@media (max-width: 720px) {
    .user-list-heading { align-items: flex-start; flex-direction: column; }
    .user-list-heading-actions { justify-content: flex-start; }
    .user-ledger-shell { padding: 9px; border-radius: 18px; }
}

.admin-filter input,
.admin-filter select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.settings-form input,
.settings-form textarea,
.settings-form select,
.row-form input,
.row-form select,
.content input,
.content textarea,
.content select {
    border-color: #e3dcec;
    background: #fcfbfe;
    color: #292d44;
    box-shadow: inset 0 1px 2px rgba(60, 34, 115, .04);
}

/* Let every workspace use the available canvas instead of leaving fixed side gutters. */
.admin-content,
.dashboard-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 3vw, 48px) clamp(18px, 2.25vw, 44px) clamp(52px, 6vw, 86px);
}

.admin-content {
    min-height: calc(100vh - 70px);
}

.dashboard-content {
    min-height: calc(100vh - 87px);
}

.admin-content > .admin-card,
.admin-content > .admin-form,
.admin-content > .settings-form,
.admin-content > .admin-filter,
.admin-content > .table-wrap,
.admin-content > .log-list,
.admin-content > .user-directory,
.admin-content > .admin-metrics,
.admin-content > .quick-links,
.admin-content > .pagination,
.dashboard-content > .metric-grid,
.dashboard-content > .service-grid,
.dashboard-content > .lower-grid {
    width: 100%;
    max-width: none;
}

.admin-content .admin-form:not(.product-form),
.admin-content .settings-form,
.admin-console-content {
    width: 100%;
    max-width: none;
}

.admin-console-content {
    margin: 0;
    padding: clamp(30px, 4vw, 62px) clamp(20px, 4vw, 72px);
}

/* Product create and edit are one shared, deliberate flow instead of two disconnected screens. */
.product-heading {
    align-items: center;
    margin: 0 0 16px;
}

.product-heading h1 {
    margin: 0;
}

.product-form {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 19px;
    padding: clamp(22px, 3vw, 34px);
}

.product-form-intro {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #ece6f4;
    padding: 0 0 20px;
}

.product-form-intro > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    background: linear-gradient(145deg, #b550ef, #7b2fd8);
    box-shadow: 0 6px 0 rgba(90, 38, 170, .16), 0 12px 20px rgba(79, 31, 153, .18), inset 0 1px rgba(255, 255, 255, .45);
    color: #fff;
    font-family: var(--three-font-display);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.product-form-intro h2 {
    margin: 0;
    color: #22263e;
    font-size: 1.08rem;
}

.product-form-intro p {
    max-width: 620px;
    margin: 4px 0 0;
    color: #72758a;
    font-size: .75rem;
    line-height: 1.55;
}

.product-edit-code {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto;
    border: 1px solid #ded2f4 !important;
    border-radius: 999px !important;
    padding: 7px 10px;
    background: #f8f4ff !important;
    box-shadow: none !important;
    color: #6e35c4 !important;
    font-family: var(--three-font-body) !important;
    font-size: .67rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}

.product-form-section {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 17px;
    border: 1px solid #e8e2f0;
    border-radius: 19px;
    padding: clamp(18px, 2.1vw, 27px);
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(249, 247, 253, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 9px 19px rgba(69, 41, 124, .055);
}

.product-section-title {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
}

.product-section-title > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 10px;
    background: #eee3ff;
    color: #7632cc;
    font-family: var(--three-font-display);
    font-size: .65rem;
    font-weight: 800;
}

.product-section-title h2 {
    margin: 0;
    color: #292d44;
    font-size: 1rem;
}

.product-section-title p {
    margin: 3px 0 0;
    color: #7f8295;
    font-size: .71rem;
    line-height: 1.45;
}

.product-section-title-row { align-items: flex-start; }

.product-core-grid > .product-field { grid-column: span 4; }
.product-core-grid > .product-field.form-span { grid-column: 1 / -1; }

.product-field {
    display: block;
    color: #62667d !important;
    font-size: .67rem !important;
    letter-spacing: .075em;
}

.product-field > input,
.product-field > select,
.product-field > textarea {
    margin-top: 8px !important;
}

.product-field > small {
    display: block;
    margin-top: 6px;
    color: #85889c;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}

.product-field > small b {
    color: #6330b8;
    font-weight: 800;
}

.product-cover-label {
    display: block;
}

.product-cover-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.select-cover-image {
    display: inline-flex;
    min-height: 48px;
    flex: 1;
    align-items: center;
    gap: 8px;
    border: 1px dashed #bd9eea;
    border-radius: 11px;
    padding: 9px 11px;
    background: linear-gradient(145deg, #fcfaff, #f0e6ff);
    color: #6930ba;
    font: inherit;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
}

.select-cover-image > span:first-child {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 7px rgba(89, 44, 165, .12);
    font-size: .9rem;
}

.select-cover-image:hover {
    border-color: #8040d7;
    background: linear-gradient(145deg, #f8f2ff, #e7d5ff);
}

.product-cover-preview {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    border: 1px solid #dfd3f0;
    border-radius: 10px;
    padding: 4px 8px 4px 4px;
    background: #fff;
    box-shadow: 0 4px 9px rgba(69, 42, 122, .07);
}

.product-cover-preview img {
    display: block;
    width: 39px;
    height: 39px;
    border-radius: 7px;
    object-fit: cover;
    background: #eee8f7;
}

.product-cover-preview span {
    overflow: hidden;
    max-width: 92px;
    color: #5b556c;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-toggle {
    display: inline-flex !important;
    width: auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    border: 1px solid #dfd3f3;
    border-radius: 999px;
    padding: 8px 11px;
    background: #fbf9ff;
    color: #6630b7 !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.inline-toggle input { width: 15px !important; height: 15px; margin: 0 !important; accent-color: #8436dc; }

.product-plans { padding-bottom: 22px; }
.product-plans [hidden],
.product-setup [hidden] { display: none !important; }
.plan-price-help {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f4effc;
    color: #645776;
    font-size: .72rem;
    line-height: 1.6;
}

.product-plan-head,
.product-plan-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(58px, .65fr) minmax(86px, 1fr) minmax(92px, 1fr) minmax(208px, 2fr) minmax(90px, 1.3fr) minmax(105px, .9fr) 34px;
    gap: 10px;
    align-items: end;
}

.product-plan-head {
    padding: 0 10px;
    color: #85889b;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.product-plan-list { display: contents; }

.product-plan-row {
    position: relative;
    border: 1px solid #e8e2f0;
    border-radius: 14px;
    padding: 11px 10px;
    background: #fff;
    box-shadow: 0 5px 11px rgba(69, 41, 124, .045), inset 0 1px #fff;
}

.product-plan-row label {
    display: block;
    margin: 0;
    color: #6e7186;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: none;
}

.product-plan-row label > span { display: none; }

.product-plan-row input,
.product-plan-row select {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    border-color: #e3dcec;
    border-radius: 8px;
    padding: 8px 9px;
    background: #fcfbfe;
    color: #2b2e45;
    font: inherit;
    font-size: .72rem;
    outline-color: #8540dc;
}

.product-plan-row > *,
.plan-discount > * { min-width: 0; }
.plan-discount { display: grid; grid-template-columns: minmax(122px, 1.25fr) minmax(72px, .8fr); gap: 7px; }

.plan-total {
    align-self: center;
    color: #19795d;
    font-family: var(--three-font-display);
    font-size: .76rem;
    font-weight: 800;
    text-align: right;
}

.plan-total output { display: block; white-space: nowrap; }
.plan-discount-badge {
    display: inline-block;
    margin-top: 5px;
    border-radius: 6px;
    padding: 4px 6px;
    background: #e6f7ee;
    color: #17704e;
    font: 700 .63rem/1.25 var(--three-font-body, sans-serif);
}
.plan-value-error {
    display: block;
    margin-top: 5px;
    color: #b13750;
    font: 600 .65rem/1.4 var(--three-font-body, sans-serif);
}

.remove-plan {
    width: 30px;
    height: 30px;
    align-self: center;
    border: 1px solid #ffd5df;
    border-radius: 9px;
    background: #fff5f7;
    color: #cf3d59;
    font-size: 1rem;
    line-height: 1;
}

.remove-plan:hover { background: #ffe8ee; }

.product-plan-empty {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 76px;
    border: 1px dashed #d8c9ed;
    border-radius: 13px;
    color: #777b90;
    font-size: .74rem;
    text-align: center;
}

.product-plan-empty span { color: #8140d6; font-size: 1.2rem; }
.product-plan-empty p { margin: 0; }

.add-plan-button {
    justify-self: start;
    grid-column: 1 / -1;
    border: 1px solid #dacaf2;
    border-radius: 11px;
    padding: 9px 12px;
    background: #f8f3ff;
    color: #7130c4;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
}

.add-plan-button:hover { background: #efE5ff; }

.product-settings-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px;
}

.product-access-settings {
    margin: 2px 0 0;
    border: 1px solid #e8e1f0;
    border-radius: 17px;
    padding: 17px;
    background: linear-gradient(135deg, #fcfbfe, #f4f0fb);
}

.product-order-settings {
    margin: 2px 0 0;
    border: 1px solid #e8e1f0;
    border-radius: 17px;
    padding: 17px;
    background: linear-gradient(135deg, #fcfbfe, #f4f0fb);
}

.product-order-settings legend {
    padding: 0 6px;
    color: #5f31ae;
    font-family: var(--three-font-display);
    font-size: .86rem;
    font-weight: 800;
}

.product-order-settings > p {
    margin: -1px 0 13px;
    color: #7b7e93;
    font-size: .71rem;
}

.product-order-settings > label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 7px 0 0;
    border: 1px solid #e9e3f1;
    border-radius: 11px;
    padding: 10px;
    background: #fff;
    color: #2e3148;
    font-size: .72rem;
    text-transform: none;
}

.product-order-settings input { width: 16px; height: 16px; margin: 0; accent-color: #7f36d6; }
.product-order-settings label span { display: grid; gap: 2px; }
.product-order-settings label small { color: #85889b; font-size: .65rem; font-weight: 500; }

.product-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.product-pricing-button {
    border-color: #d3baef;
    background: #fbf7ff;
    color: #6930bd;
}

.pricing-review {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin: 0 0 18px;
}

.pricing-review article {
    display: grid;
    min-height: 98px;
    align-content: center;
    border: 1px solid rgba(223, 209, 242, .95);
    border-radius: 17px;
    padding: 15px 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 244, 255, .92));
    box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 7px 0 rgba(88, 47, 160, .045), 0 16px 27px rgba(68, 42, 120, .08);
}

.pricing-review span,
.pricing-review small { color: #7d7890; font-size: .67rem; font-weight: 700; }
.pricing-review strong { margin: 4px 0 3px; color: #2a2945; font-family: var(--three-font-display); font-size: 1.26rem; letter-spacing: -.04em; }
.pricing-review small { line-height: 1.35; }
.product-pricing-form { max-width: none; container-type: inline-size; }

.product-access-settings legend {
    padding: 0 6px;
    color: #5f31ae;
    font-family: var(--three-font-display);
    font-size: .86rem;
    font-weight: 800;
}

.product-access-settings > p {
    margin: -1px 0 13px;
    color: #7b7e93;
    font-size: .71rem;
}

.admin-form .product-active-toggle {
    width: 100%;
    min-height: 62px;
    align-items: center;
    border-color: rgba(132, 65, 219, .19);
    border-radius: 13px;
    background: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 5px 12px rgba(75, 41, 137, .06);
    color: #30334a;
}

.admin-form .product-active-toggle > span { display: grid; gap: 3px; }
.admin-form .product-active-toggle b { color: #2b2e45; font-size: .79rem; }

.admin-form .product-active-toggle small {
    color: #7d8094;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.4;
}

.admin-form .product-active-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 6px;
    accent-color: #7c31d9;
}

.product-setup .setup-fee-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 17px;
}

.setup-fee-grid > .product-field { grid-column: span 3; }
.setup-fee-grid > .product-field.form-span { grid-column: 1 / -1; }

.setup-total {
    display: grid;
    grid-column: span 3;
    align-content: center;
    min-height: 63px;
    border: 1px solid #d7f0e5;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f3fff9;
}

.setup-total span { color: #56816f; font-size: .65rem; font-weight: 700; }
.setup-total output { margin-top: 3px; color: #137a59; font-family: var(--three-font-display); font-size: 1.04rem; font-weight: 800; }

.product-media-grid > .product-field { grid-column: 1 / -1; }

.product-upload-manager {
    grid-column: 1 / -1;
    border: 1px dashed #cdb6ef;
    border-radius: 16px;
    padding: clamp(15px, 2vw, 21px);
    background: linear-gradient(140deg, #fcfaff, #f5efff);
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 7px 15px rgba(93, 52, 174, .05);
}

.product-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.add-gallery-images,
.clear-gallery-images {
    border: 0;
    font: inherit;
    font-size: .73rem;
    font-weight: 800;
    cursor: pointer;
}

.add-gallery-images {
    border-radius: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #a641ee, #7035d8);
    box-shadow: 0 5px 0 #6229c5, 0 10px 18px rgba(100, 45, 204, .18);
    color: #fff;
}

.add-gallery-images:hover { transform: translateY(-1px); }

.product-upload-actions strong {
    color: #443c62;
    font-size: .73rem;
}

.clear-gallery-images {
    border: 1px solid #dfd0f5;
    border-radius: 9px;
    padding: 8px 11px;
    background: #fff;
    color: #7650ad;
}

.product-upload-manager > p {
    margin: 12px 0 0;
    color: #716a88;
    font-size: .72rem;
    line-height: 1.55;
}

.product-upload-limit {
    display: block;
    margin-top: 8px;
    color: #b74c2a;
    font-size: .68rem;
    font-weight: 800;
}

.product-new-image-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 11px;
    margin-top: 15px;
}

.product-new-image-preview {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid #e0d5ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(70, 42, 121, .08);
}

.product-new-image-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1.3;
    object-fit: cover;
    background: #ece8f6;
}

.product-new-image-preview figcaption {
    overflow: hidden;
    padding: 7px 28px 7px 8px;
    color: #5b556d;
    font-size: .62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-new-image-preview button {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(41, 30, 69, .82);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.product-new-image-preview button:hover { background: #bd3c5a; }

.product-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
    padding-top: 4px;
}

.product-image-tile {
    overflow: hidden;
    margin: 0;
    border: 1px solid #e5ddf0;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f8f4fd);
    box-shadow: 0 6px 13px rgba(69, 41, 124, .07), inset 0 1px #fff;
}

.product-image-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eee8f6;
}

.product-image-tile figcaption {
    padding: 8px 10px 3px;
    color: #5f6380;
    font-size: .67rem;
    font-weight: 800;
}

.remove-product-image {
    width: calc(100% - 20px);
    margin: 5px 10px 10px;
    border: 1px solid #ffd4df;
    border-radius: 8px;
    padding: 7px 9px;
    background: #fff5f7;
    color: #c73c57;
    font: inherit;
    font-size: .65rem;
    font-weight: 800;
}

.remove-product-image:hover { background: #ffe8ee; }

.product-form-errors {
    border: 1px solid #ffcfd8;
    border-radius: 12px;
    padding: 11px 13px;
    background: #fff5f7;
    color: #bd314c;
    font-size: .75rem;
    font-weight: 700;
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #c43a55;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.product-form-actions {
    justify-content: space-between !important;
    border-top: 1px solid #ece6f4;
    padding-top: 20px;
}

.product-form-actions .admin-primary {
    min-width: 165px;
}

.product-form-actions .admin-primary span {
    margin-left: 14px;
    font-size: 1rem;
}

@media (max-width: 1120px) {
    .product-list-card { grid-template-columns: 1fr; }
    .product-list-side {
        flex-direction: row;
        align-items: center;
        border-top: 1px solid #ece4f5;
        border-left: 0;
        padding: 16px 0 0;
    }
    .product-card-actions { width: min(470px, 100%); }
}

@media (max-width: 720px) {
    .product-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .product-list-heading-actions { justify-content: flex-start; }
    .product-list-card { padding: 17px; }
    .product-list-main { gap: 12px; }
    .product-list-cover {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        border-radius: 15px;
        font-size: 1.25rem;
    }
    .product-list-title-row { align-items: flex-start; flex-direction: column; gap: 6px; }
    .product-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-plan-chip-section { align-items: flex-start; flex-direction: column; gap: 5px; }
    .product-list-side {
        align-items: stretch;
        flex-direction: column;
    }
    .product-card-actions { width: 100%; }
}

@media (max-width: 440px) {
    .product-list-main { flex-direction: column; }
    .product-property-grid { grid-template-columns: 1fr; }
    .product-card-actions { grid-template-columns: 1fr; }
    .product-card-action,
    .product-card-delete-form { grid-column: 1; }
}

@media (max-width: 1100px) {
    .product-core-grid > .product-field { grid-column: span 6; }
    .product-plan-head { display: none; }
    .product-plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .product-plan-row label > span { display: block; margin: 0 0 5px; color: #76798d; }
    .plan-total { text-align: left; }
    .setup-fee-grid > .product-field,
    .setup-total { grid-column: span 4; }
}

@media (max-width: 760px) {
    .product-form { grid-template-columns: 1fr; padding: 18px; }
    .product-form-section { grid-template-columns: 1fr; padding: 16px; }
    .product-heading-actions { justify-content: flex-start; }
    .pricing-review { grid-template-columns: 1fr; }
    .pricing-review article { min-height: 84px; }
    .product-core-grid > .product-field,
    .product-core-grid > .product-field.form-span,
    .product-media-grid > .product-field,
    .product-upload-manager,
    .setup-fee-grid > .product-field,
    .setup-fee-grid > .product-field.form-span,
    .setup-total { grid-column: 1; }
    .product-settings-grid { grid-template-columns: 1fr; gap: 15px; }
    .product-section-title-row { align-items: center; }
    .product-section-title-row .inline-toggle { margin-left: 0; }
    .product-plan-head { display: none; }
    .product-plan-row { grid-template-columns: 1fr; gap: 11px; padding: 13px; }
    .product-plan-row label > span { display: block; margin: 0 0 5px; color: #76798d; }
    .plan-total { text-align: left; }
    .remove-plan { position: absolute; top: 10px; right: 10px; }
    .product-edit-code { display: none !important; }
}

@media (max-width: 820px) {
    .workspace .topbar { margin: 7px 8px 0; border-radius: 15px; }
    .overview-date { display: none; }
    .workspace-search { width: min(42vw, 260px); min-width: 0; }
    .metric-card:hover,
    .service-card:hover,
    .activity-card:hover,
    .admin-metrics article:hover,
    .content .panel:hover { transform: translateY(-3px); }
}

@container (max-width: 1000px) {
    .product-plan-head { display: none; }
    .product-plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
    .product-plan-row label > span { display: block; margin: 0 0 5px; }
    .product-plan-row .plan-total { text-align: left; }
    .product-plan-row .remove-plan { justify-self: end; }
}

@container (max-width: 560px) {
    .product-plan-row { grid-template-columns: minmax(0, 1fr); padding-top: 44px; }
    .product-plan-row .remove-plan { position: absolute; top: 9px; right: 10px; }
}

/* Keep the user workspace header inside narrow screens without a horizontal rail. */
@media (max-width: 640px) {
    .workspace .topbar {
        height: auto;
        min-height: 64px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .workspace .crumb { display: none; }
    .workspace .topbar-start { width: auto; min-width: 0; flex: 1; gap: 8px; }
    .workspace .topbar-actions { flex: 0 0 auto; gap: 7px; }
    .workspace-search { flex: 1; width: auto; }
    .workspace-search button { padding: 7px; font-size: 0; }
    .workspace-search button::after { content: "⌕"; font-size: .85rem; }

    .workspace .return-admin-button {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 0;
    }

    .workspace .return-admin-button::after { content: "↩"; font-size: 1rem; }
}

@media (max-width: 800px) {
    .desktop-collapse-sidebar,
    .expand-sidebar { display: none !important; }

    .app-shell.sidebar-collapsed #sidebar {
        width: min(85vw, 280px);
        padding: 25px 15px 18px;
    }

    .app-shell.sidebar-collapsed .workspace {
        width: 100%;
        margin-left: 0;
    }

    .app-shell.sidebar-collapsed #sidebar .sidebar-top {
        justify-content: space-between;
        padding-right: 12px;
        padding-left: 12px;
    }

    .app-shell.sidebar-collapsed #sidebar .brand { gap: 10px; }
    .app-shell.sidebar-collapsed #sidebar .brand-name,
    .app-shell.sidebar-collapsed #sidebar .nav-text,
    .app-shell.sidebar-collapsed #sidebar .sidebar-help-copy { display: inline; }
    .app-shell.sidebar-collapsed #sidebar .nav-label { display: block; }
    .app-shell.sidebar-collapsed #sidebar .nav-item i { display: inline; }
    .app-shell.sidebar-collapsed #sidebar .nav-item { justify-content: flex-start; padding-right: 12px; padding-left: 12px; }
    .app-shell.sidebar-collapsed #sidebar .sidebar-help { justify-content: flex-start; padding: 12px; }
}

@media (max-width: 550px) {
    .admin-content,
    .dashboard-content {
        min-height: auto;
        padding: 24px 15px 46px;
    }

    .admin-console-content {
        padding: 28px 15px 42px;
    }

    .workspace .topbar { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
    .workspace .topbar-start { width: auto; min-width: 0; flex: 1; gap: 8px; }
    .workspace .topbar-actions { flex: 0 0 auto; gap: 7px; }
    .workspace-search { flex: 1; width: auto; }
    .workspace-search button { padding: 7px; font-size: 0; }
    .workspace-search button::after { content: "⌕"; font-size: .85rem; }
    .service-heading { margin-top: 33px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Telegram workspace: one focused header and a calm device-login flow. */
.telegram-workspace-shell .telegram-workspace-sidebar {
    width: 240px;
    padding: 20px 12px;
}

.telegram-workspace-shell .content {
    width: calc(100% - 240px);
    margin-left: 240px;
    padding: 18px 24px 44px 20px;
}

.telegram-workspace-shell .logo-row {
    padding: 2px 10px 18px;
}

.telegram-workspace-shell .telegram-workspace-brand {
    color: #fff;
    font-family: var(--three-font-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.055em;
}

.telegram-workspace-shell .telegram-workspace-brand span {
    color: rgba(255, 255, 255, .72);
}

.telegram-workspace-shell .sidebar-toggle {
    width: 36px;
    height: 36px;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 5px 12px rgba(61, 18, 124, .16);
    color: #fff;
}

.telegram-workspace-shell .workspace-return-link {
    margin: 0 2px 18px;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 0 rgba(67, 19, 132, .15), 0 12px 20px rgba(57, 16, 118, .16);
    color: #6330b8;
}

.telegram-workspace-shell .workspace-return-link .side-icon { color: inherit; }

.telegram-workspace-shell .telegram-workspace-topbar {
    min-height: 66px;
    gap: 16px;
    margin: 0 0 22px;
    padding: 10px 16px;
}

.telegram-workspace-shell .telegram-workspace-search-wrap {
    width: min(100%, 540px);
    max-width: 540px;
    min-width: 0;
}

.telegram-workspace-shell .telegram-workspace-search-box {
    min-height: 42px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 13px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 0 rgba(70, 20, 139, .13), inset 0 1px #fff;
    color: #6330b8;
}

.telegram-workspace-shell .telegram-workspace-search-box .search-icon {
    color: #7c3ddd;
    font-size: 1.05rem;
    font-weight: 800;
}

.telegram-workspace-shell .telegram-workspace-search-box input {
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #2b2440;
    font-size: .88rem;
    font-weight: 600;
    padding: 8px 0;
}

.telegram-workspace-shell .telegram-workspace-search-box input:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.telegram-workspace-shell .telegram-workspace-search-box kbd {
    flex: 0 0 auto;
    border: 1px solid #e3d8f7;
    border-radius: 7px;
    padding: 2px 6px;
    background: #f7f2ff;
    color: #7852ad;
    font-family: var(--three-font-body);
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}

.telegram-workspace-shell .telegram-workspace-actions {
    flex: 0 0 auto;
    gap: 9px;
}

.telegram-workspace-shell .return-admin-button,
.telegram-workspace-shell .wallet-top-button,
.telegram-workspace-shell .top-icon-button,
.telegram-workspace-shell .avatar {
    min-height: 36px;
}

.telegram-workspace-shell .return-admin-button {
    white-space: nowrap;
}

.telegram-workspace-shell .wallet-top-button {
    height: 36px;
    padding: 0 12px;
    box-shadow: 0 4px 0 rgba(71, 23, 142, .13), inset 0 1px #fff;
}

.telegram-workspace-shell .top-icon-button {
    height: 30px;
}

.telegram-workspace-shell .avatar {
    width: 38px;
    height: 38px;
}

.telegram-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.telegram-workspace-shell .telegram-breadcrumb {
    margin: 2px 0 14px;
    color: #817895;
    font-size: .82rem;
    font-weight: 700;
}

.telegram-workspace-shell .telegram-breadcrumb a { color: #7635d2; }

.telegram-workspace-shell .telegram-overview-hero .telegram-overview-hero-header {
    align-items: center;
    border-bottom: 0;
    padding: 25px 28px;
}

.telegram-workspace-shell .telegram-overview-hero h1 {
    margin: 0 0 5px;
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.telegram-eyebrow {
    margin: 0 0 6px;
    color: #7d3ed7;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.telegram-workspace-shell .telegram-setup-alert {
    border-color: #f1cf8c;
    background: linear-gradient(145deg, #fffdf8, #fff4d9);
}

.telegram-workspace-shell .telegram-setup-alert h2 {
    margin: 0 0 6px;
    color: #80530a;
    font-size: 1.04rem;
}

.telegram-workspace-shell .telegram-setup-alert p { margin: 0; }

.telegram-workspace-shell .telegram-plan-panel { padding: 25px 28px; }

.telegram-workspace-shell .telegram-plan-grid > div {
    min-width: 0;
}

.telegram-workspace-shell .telegram-plan-grid > div + div {
    border-left: 1px solid #ede6f5;
    padding-left: 28px;
}

.telegram-workspace-shell .telegram-plan-grid .stat {
    margin-top: 7px;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.28;
}

.telegram-workspace-shell .telegram-plan-limit { max-width: 26rem; }

.telegram-workspace-shell .telegram-stat-grid > .panel {
    min-height: 122px;
    padding: 24px 28px;
}

.telegram-workspace-shell .telegram-token-panel { padding: 24px 28px; }

.telegram-workspace-shell .telegram-token-grid {
    align-items: center;
    gap: 24px;
}

.telegram-token-note {
    display: grid;
    gap: 4px;
    justify-self: end;
    max-width: 275px;
    color: #7a728e;
    font-size: .78rem;
    line-height: 1.45;
}

.telegram-token-note strong { color: #3c3153; }

.telegram-workspace-shell .device-title { padding: 24px 28px; }

.telegram-workspace-shell .device-table th {
    color: #7c7390;
    font-size: .67rem;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.telegram-workspace-shell .device-table td { vertical-align: middle; }

.telegram-workspace-shell .device-row-actions .btn {
    min-height: 34px;
    padding: 9px 11px;
    font-size: .77rem;
}

.telegram-workspace-shell .device-help {
    color: #817895;
    font-size: .78rem;
}

.telegram-workspace-shell .device-help strong { color: #6330b8; }

.telegram-workspace-body.dark-mode .telegram-workspace-search-box {
    border-color: #38445d;
    background: #111827;
}

.telegram-workspace-body.dark-mode .telegram-workspace-search-box input { color: #edf2ff; }
.telegram-workspace-body.dark-mode .telegram-workspace-search-box kbd { border-color: #3a465f; background: #202b3f; color: #c9d7ff; }
.telegram-workspace-body.dark-mode .telegram-plan-grid > div + div { border-left-color: #2a354b; }
.telegram-workspace-body.dark-mode .telegram-token-note strong { color: #f0ecff; }

@media (max-width: 1000px) {
    .telegram-workspace-shell .telegram-workspace-sidebar { width: 100%; }

    .telegram-workspace-shell .content {
        width: 100%;
        margin-left: 0;
        padding: 16px;
    }

    .telegram-workspace-shell .telegram-workspace-topbar {
        align-items: center;
        flex-direction: row;
    }
}

@media (max-width: 720px) {
    .telegram-workspace-shell .telegram-workspace-topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .telegram-workspace-shell .telegram-workspace-search-wrap {
        order: 2;
        width: 100%;
        max-width: none;
    }

    .telegram-workspace-shell .telegram-workspace-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .telegram-workspace-shell .telegram-plan-grid > div + div {
        border-top: 1px solid #ede6f5;
        border-left: 0;
        padding-top: 16px;
        padding-left: 0;
    }

    .telegram-token-note {
        justify-self: start;
        max-width: none;
    }
}

@media (max-width: 460px) {
    .telegram-workspace-shell .telegram-workspace-actions { gap: 7px; }
    .telegram-workspace-shell .telegram-workspace-search-box kbd { display: none; }

    .telegram-workspace-shell .return-admin-button {
        width: 36px;
        padding: 0;
        font-size: 0;
    }

    .telegram-workspace-shell .return-admin-button::after {
        content: "↩";
        font-size: 1rem;
    }

    .telegram-workspace-shell .wallet-top-button { padding: 0 9px; }
    .telegram-workspace-shell .wallet-top-button > span:last-child { display: none; }
}

/*
 * Dashboard summary system
 *
 * The workspace background deliberately has more colour than the cards. That
 * separation keeps the primary numbers readable at 100% zoom while the low,
 * raised card edge still gives the dashboards their shared 3D character.
 */
:root {
    --three-summary-height: 104px;
    --three-summary-surface: linear-gradient(145deg, #ffffff 0%, #eef4ff 100%);
    --three-summary-border: rgba(255, 255, 255, .98);
    --three-summary-shadow: 0 9px 0 rgba(79, 47, 157, .11), 0 24px 38px rgba(46, 35, 96, .19);
}

.dashboard-content,
.admin-content,
.telegram-workspace-shell .content {
    background:
        radial-gradient(circle at 94% 2%, rgba(214, 148, 255, .48), transparent 25rem),
        radial-gradient(circle at 5% 96%, rgba(112, 177, 255, .30), transparent 28rem),
        linear-gradient(135deg, #ded1ff 0%, #c9bcf7 47%, #dbe9ff 100%);
}

.metric-grid,
.admin-metrics,
.telegram-workspace-shell .telegram-stat-grid {
    gap: clamp(18px, 1.45vw, 25px);
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card,
.admin-metrics > article,
.telegram-workspace-shell .telegram-stat-grid > .panel {
    min-width: 0;
    min-height: var(--three-summary-height);
    overflow: hidden;
    border: 1px solid var(--three-summary-border);
    border-radius: 27px;
    background: var(--three-summary-surface);
    box-shadow: var(--three-summary-shadow), var(--three-inset);
}

.metric-card {
    display: grid;
    height: var(--three-summary-height);
    grid-template-areas:
        "icon label"
        "icon value"
        "icon detail";
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 13px;
    align-content: center;
    padding: 14px 18px;
}

.metric-card.blue { background: linear-gradient(145deg, #ffffff 0%, #e9f1ff 100%); }
.metric-card.amber { background: linear-gradient(145deg, #ffffff 0%, #fff3df 100%); }
.metric-card.violet { background: linear-gradient(145deg, #ffffff 0%, #f1e9ff 100%); }
.metric-card.mint { background: linear-gradient(145deg, #ffffff 0%, #e8faf4 100%); }

.metric-card p,
.admin-metrics > article p,
.telegram-workspace-shell .telegram-stat-grid > .panel > .muted:first-child {
    color: #5b6680;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .015em;
}

.metric-card p {
    grid-area: label;
    margin: 0;
    line-height: 1.2;
}

.metric-card h2,
.admin-metrics > article strong,
.telegram-workspace-shell .telegram-stat-grid > .panel .stat {
    color: #182344;
    font-size: clamp(1.55rem, 1.75vw, 2.15rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.06;
    text-shadow: 0 1px #ffffff, 0 5px 11px rgba(35, 42, 84, .12);
}

.metric-card h2 {
    grid-area: value;
    margin: 1px 0;
}

.metric-card .metric-icon {
    grid-area: icon;
    align-self: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 1.1rem;
}

.metric-card > a,
.metric-card > .metric-meta {
    grid-area: detail;
    margin: 0;
    line-height: 1.2;
}

.admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-metrics > article {
    display: grid;
    align-content: space-between;
    height: var(--three-summary-height);
    padding: 16px 20px 15px 68px;
}

.admin-metrics > article::before {
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
}

.admin-metrics > article:nth-child(1) { background: linear-gradient(145deg, #ffffff 0%, #f0eaff 100%); }
.admin-metrics > article:nth-child(2) { background: linear-gradient(145deg, #ffffff 0%, #e8f2ff 100%); }
.admin-metrics > article:nth-child(3) { background: linear-gradient(145deg, #ffffff 0%, #e8fbf4 100%); }

.telegram-workspace-shell .telegram-stat-grid > .panel {
    display: grid;
    align-content: space-between;
    height: var(--three-summary-height);
    padding: 16px 20px 15px;
}

.telegram-workspace-shell .telegram-stat-grid > .panel:nth-child(1) { background: linear-gradient(145deg, #ffffff 0%, #f0eaff 100%); }
.telegram-workspace-shell .telegram-stat-grid > .panel:nth-child(2) { background: linear-gradient(145deg, #ffffff 0%, #e8f2ff 100%); }
.telegram-workspace-shell .telegram-stat-grid > .panel:nth-child(3) { background: linear-gradient(145deg, #ffffff 0%, #e8fbf4 100%); }

.telegram-workspace-shell .telegram-stat-grid > .panel .muted:last-child {
    color: #71809c;
    font-size: .78rem;
}

@media (max-width: 1180px) {
    .metric-grid,
    .admin-metrics,
    .telegram-workspace-shell .telegram-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .metric-grid,
    .admin-metrics,
    .telegram-workspace-shell .telegram-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .metric-card,
    .admin-metrics > article,
    .telegram-workspace-shell .telegram-stat-grid > .panel {
        min-height: 122px;
        height: auto;
        border-radius: 22px;
    }
}

/*
 * One panel profile for every workspace.
 *
 * Summary tiles remain the compact, fixed-height family above. Everything
 * else shares its outer geometry and depth while retaining a natural height
 * for tables, forms and long service descriptions.
 */
:root {
    --three-panel-radius: 24px;
    --three-panel-border: rgba(255, 255, 255, .96);
    --three-panel-shadow: 0 9px 0 rgba(79, 47, 157, .08), 0 22px 38px rgba(46, 35, 96, .15);
}

.service-card,
.service-empty,
.activity-card,
.onboarding-card,
.admin-card,
.user-ledger-shell,
.product-ledger-shell,
.product-list-card,
.content .panel {
    min-width: 0;
    border-radius: var(--three-panel-radius);
    border-color: var(--three-panel-border);
    box-shadow: var(--three-panel-shadow), var(--three-inset);
}

.service-card,
.service-empty {
    min-height: 172px;
    padding: clamp(17px, 1.35vw, 21px);
}

.activity-card,
.onboarding-card {
    min-height: 196px;
    padding: clamp(19px, 1.65vw, 25px);
}

.quick-links {
    gap: 12px;
    padding: 12px;
    border-radius: var(--three-panel-radius);
    box-shadow: var(--three-panel-shadow), var(--three-inset);
}

.quick-links a {
    display: flex;
    min-height: 88px;
    align-items: center;
    border-radius: 18px;
    padding: 16px 18px;
}

.product-list-card,
.user-ledger-shell,
.product-ledger-shell {
    border-radius: var(--three-panel-radius);
}

@media (max-width: 720px) {
    .service-card,
    .service-empty {
        min-height: 156px;
    }

    .activity-card,
    .onboarding-card {
        min-height: 178px;
    }

    .quick-links a {
        min-height: 68px;
    }

    .service-card,
    .service-empty,
    .activity-card,
    .onboarding-card,
    .admin-card,
    .user-ledger-shell,
    .product-ledger-shell,
    .product-list-card,
    .content .panel,
    .quick-links {
        border-radius: 20px;
    }
}

/* Keep admin content directly below its persistent title bar. */
.admin-content,
.admin-content.admin-dashboard-content {
    padding-top: 18px;
}

@media (max-width: 820px) {
    .admin-content,
    .admin-content.admin-dashboard-content {
        padding-top: 16px;
    }
}