/* ================================================================
   PERSONAL ERP D5.2 — THEME IDENTITY / DARK PREMIUM
   One UX architecture, four genuinely distinct visual systems.
   ================================================================ */

/* ---------------------------------------------------------------
   Shared theme polish
   --------------------------------------------------------------- */

:root {
    --d52-card-transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.content-card,
.workspace-widget,
.d35-more-grid > a,
.d35-settings-grid > a,
.d43-project-card,
.d43-task-card,
.d43-document-card,
.d43-note-card,
.d32-family-card {
    transition: var(--d52-card-transition);
}

@media (hover: hover) and (pointer: fine) {
    .content-card:hover,
    .workspace-widget:hover,
    .d35-more-grid > a:hover,
    .d35-settings-grid > a:hover {
        border-color: var(--ui-border-strong);
    }
}

/* D5.1 follow-up: the FAB no longer visually sits directly on content. */
@media (max-width: 1039px) {
    .erp-main .page {
        padding-bottom:
            calc(
                132px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    body.d51-no-fab .erp-main .page {
        padding-bottom:
            calc(
                84px
                + env(safe-area-inset-bottom)
            ) !important;
    }
}

/* D5.1 follow-up: Quick Create titles/subtitles may use two lines. */
@media (max-width: 649px) {
    .quick-create-grid > a {
        align-items: center !important;
    }

    .quick-create-grid strong {
        display: -webkit-box !important;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: clip !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .quick-create-grid small {
        -webkit-line-clamp: 2 !important;
    }

    /* Empty workspace widgets should not occupy a full content card. */
    .workspace-home-dashboard
    .workspace-widget:has(.workspace-empty-state) {
        min-height: 0 !important;
    }

    .workspace-home-dashboard
    .workspace-empty-state {
        min-height: 58px !important;
        padding: 8px !important;
        gap: 5px !important;
    }

    .workspace-home-dashboard
    .workspace-empty-state > span {
        width: 29px !important;
        height: 29px !important;
    }

    .workspace-home-dashboard
    .workspace-empty-state strong {
        font-size: .76rem !important;
    }

    .workspace-home-dashboard
    .workspace-empty-state small {
        font-size: .6rem !important;
    }
}

/* AI exchange */
.ai-exchange-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.ai-exchange-hero h1 {
    margin: 4px 0 8px;
}

.ai-exchange-hero p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--ui-text-muted);
}

.ai-exchange-mark {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 24px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: 2rem;
}

.ai-exchange-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr);
    gap: 18px;
    align-items: start;
}

.ai-exchange-form,
.ai-exchange-guide,
.ai-exchange-preview {
    padding: 22px;
}

.ai-exchange-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ai-exchange-field {
    display: grid;
    gap: 7px;
}

.ai-exchange-goal {
    margin-bottom: 14px;
}

.ai-exchange-sections {
    margin: 18px 0;
    padding: 0;
    border: 0;
}

.ai-exchange-sections legend {
    margin-bottom: 9px;
    font-weight: 700;
}

.ai-exchange-sections ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-exchange-sections label,
.ai-exchange-check {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface-soft);
}

.ai-exchange-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ai-exchange-guide ol {
    display: grid;
    gap: 16px;
    margin: 18px 0 22px;
    padding: 0;
    list-style: none;
}

.ai-exchange-guide li {
    display: flex;
    gap: 11px;
}

.ai-exchange-guide li > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 10px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 800;
}

.ai-exchange-guide li div {
    display: grid;
    gap: 3px;
}

.ai-exchange-guide small {
    color: var(--ui-text-muted);
    line-height: 1.4;
}

.ai-exchange-preview {
    margin-top: 18px;
}

.ai-exchange-preview header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ai-exchange-preview header h2 {
    margin: 3px 0 0;
}

.ai-exchange-preview header > span {
    color: var(--ui-text-muted);
    font-size: .82rem;
}

.ai-exchange-preview textarea {
    width: 100%;
    min-height: 420px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-bg-subtle);
    color: var(--ui-text);
    font: .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    resize: vertical;
}

@media (max-width: 820px) {
    .ai-exchange-layout {
        grid-template-columns: 1fr;
    }

    .ai-exchange-sections ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .ai-exchange-mark {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 17px;
        font-size: 1.4rem;
    }

    .ai-exchange-grid,
    .ai-exchange-sections ul {
        grid-template-columns: 1fr;
    }

    .ai-exchange-actions > * {
        width: 100%;
    }

    .ai-exchange-preview header {
        display: grid;
    }
}

/* Payment control */
.payment-promo {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: -4px 0 18px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.payment-promo > span,
.payment-attention-strip > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 13px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 850;
}

.payment-promo div,
.payment-attention-strip div {
    display: grid;
    flex: 1;
    gap: 3px;
}

.payment-promo small,
.payment-attention-strip small {
    color: var(--ui-text-muted);
}

.payment-promo i {
    color: var(--ui-text-soft);
    font-style: normal;
    font-size: 1.3rem;
}

.payment-hero,
.payment-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
}

.payment-hero h1,
.payment-detail-hero h1,
.payment-form-hero h1 {
    margin: 4px 0 8px;
}

.payment-hero p:last-child,
.payment-detail-hero p:last-child,
.payment-form-hero p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--ui-text-muted);
}

.payment-metrics,
.payment-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.payment-metrics > *,
.payment-detail-metrics > * {
    display: grid;
    min-height: 104px;
    align-content: center;
    gap: 4px;
    padding: 15px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
    color: inherit;
    text-decoration: none;
}

.payment-metrics small,
.payment-detail-metrics small {
    color: var(--ui-text-muted);
}

.payment-metrics strong,
.payment-detail-metrics strong {
    font-size: 1.15rem;
}

.payment-metrics .danger strong {
    color: #C44848;
}

.payment-metrics .warning strong {
    color: #B07920;
}

.payment-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
}

.payment-tabs a {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    white-space: nowrap;
    text-decoration: none;
}

.payment-tabs a.active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 750;
}

.payment-attention-strip {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
    padding: 13px 15px;
}

.payment-attention-strip > span {
    background: rgba(197, 72, 72, .1);
    color: #C44848;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.payment-card {
    display: grid;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: var(--ui-surface);
    color: inherit;
    text-decoration: none;
    transition: var(--d52-card-transition);
}

.payment-card.needs-attention {
    border-color: rgba(197, 72, 72, .32);
}

.payment-card header,
.payment-card footer,
.payment-period-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.payment-frequency,
.payment-state,
.payment-detail-tags span {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--ui-bg-subtle);
    color: var(--ui-text-muted);
    font-size: .7rem;
    font-weight: 700;
}

.payment-state {
    background: rgba(54, 154, 104, .1);
    color: #2F8B5D;
}

.payment-state.paused {
    background: var(--ui-bg-subtle);
    color: var(--ui-text-soft);
}

.payment-card h2 {
    margin: 0;
    font-size: 1.03rem;
}

.payment-card > p {
    min-height: 20px;
    margin: -7px 0 0;
    color: var(--ui-text-muted);
    font-size: .82rem;
}

.payment-card-value {
    display: grid;
    gap: 3px;
}

.payment-card-value small,
.payment-period-line span,
.payment-card footer {
    color: var(--ui-text-muted);
    font-size: .76rem;
}

.payment-period-line {
    padding: 10px;
    border-radius: 12px;
    background: var(--ui-surface-soft);
    font-size: .78rem;
}

.payment-card-alert {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #B74444;
    font-size: .78rem;
    font-weight: 750;
}

.payment-card-alert span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 8px;
    background: rgba(197, 72, 72, .1);
}

.payment-empty {
    grid-column: 1 / -1;
    padding: 36px;
    text-align: center;
}

.payment-detail-tags,
.payment-detail-actions,
.payment-current-actions,
.payment-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.payment-detail-tags {
    margin-bottom: 10px;
}

.payment-current {
    margin-bottom: 18px;
    padding: 20px;
}

.payment-current.needs-attention {
    border-color: rgba(197, 72, 72, .3);
}

.payment-current > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.payment-current h2 {
    margin: 3px 0 0;
}

.payment-current > header > span {
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(197, 72, 72, .1);
    color: #B74444;
    font-size: .76rem;
    font-weight: 750;
}

.payment-current-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.payment-current-grid > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 13px;
    background: var(--ui-surface-soft);
}

.payment-current-grid small,
.payment-history-row small {
    color: var(--ui-text-muted);
}

.payment-paid-details {
    position: relative;
}

.payment-paid-details > summary {
    display: grid;
    min-height: 44px;
    place-items: center;
    padding: 0 16px;
    cursor: pointer;
    list-style: none;
}

.payment-paid-details > form {
    position: absolute;
    z-index: 4;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    width: min(360px, 82vw);
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-lg);
}

.payment-paid-details label,
.payment-add-period label,
.payment-form label {
    display: grid;
    gap: 6px;
}

.payment-manage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.payment-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px;
}

.payment-next-card h2 {
    margin: 3px 0 5px;
}

.payment-next-card p:last-child {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: .82rem;
}

.payment-add-period {
    padding: 0;
}

.payment-add-period > summary {
    display: flex;
    min-height: 100%;
    align-items: center;
    gap: 12px;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}

.payment-add-period > summary > span {
    color: var(--ui-primary);
    font-size: 1.4rem;
}

.payment-add-period > summary > div {
    display: grid;
    flex: 1;
    gap: 3px;
}

.payment-add-period small {
    color: var(--ui-text-muted);
}

.payment-add-period > summary > i {
    color: var(--ui-text-soft);
    font-style: normal;
}

.payment-add-period > form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding: 0 18px 18px;
}

.payment-history {
    margin: 22px 0;
}

.payment-history-list {
    display: grid;
    gap: 8px;
}

.payment-history-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 13px 15px;
}

.payment-history-row > div {
    display: grid;
    gap: 3px;
}

.payment-history-row.overdue {
    border-color: rgba(197, 72, 72, .3);
}

.payment-notes {
    padding: 18px;
}

.payment-form-hero {
    margin: 14px 0 20px;
}

.payment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px;
}

.payment-form-wide {
    grid-column: 1 / -1;
}

.payment-form-section {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ui-border);
}

.payment-form-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.payment-form-heading > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 800;
}

.payment-form-heading > div {
    display: grid;
    gap: 2px;
}

.payment-form-heading small,
.payment-form-hint {
    color: var(--ui-text-muted);
}

.payment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-form-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-participants {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
}

.payment-participants ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.payment-participants label,
.payment-form-check {
    display: flex !important;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface-soft);
}

.payment-form-hint {
    margin: 10px 0 0;
    font-size: .78rem;
}

@media (hover: hover) and (pointer: fine) {
    .payment-card:hover,
    .payment-promo:hover {
        border-color: var(--ui-border-strong);
        transform: translateY(-1px);
        box-shadow: var(--ui-shadow-sm);
    }
}

@media (max-width: 980px) {
    .payment-grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-current-grid,
    .payment-detail-metrics,
    .payment-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .payment-history-row {
        grid-template-columns: 1.4fr 1fr;
    }
}

@media (max-width: 680px) {
    .payment-hero,
    .payment-detail-hero {
        display: grid;
    }

    .payment-hero > a,
    .payment-detail-actions > *,
    .payment-detail-actions button {
        width: 100%;
    }

    .payment-detail-actions {
        display: grid;
    }

    .payment-grid,
    .payment-manage-grid,
    .payment-form,
    .payment-form-grid,
    .payment-form-grid-three {
        grid-template-columns: 1fr;
    }

    .payment-form-wide,
    .payment-participants {
        grid-column: auto;
    }

    .payment-current > header,
    .payment-next-card {
        display: grid;
    }

    .payment-current-actions {
        display: grid;
    }

    .payment-current-actions > *,
    .payment-current-actions button,
    .payment-next-card button {
        width: 100%;
    }

    .payment-paid-details > form {
        position: static;
        width: 100%;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .payment-metrics,
    .payment-detail-metrics,
    .payment-current-grid,
    .payment-history-row {
        grid-template-columns: 1fr;
    }

    .payment-metrics > *,
    .payment-detail-metrics > * {
        min-height: 82px;
    }
}

/* ===============================================================
   1. MINIMAL SAAS
   Flat, precise, clean.
   =============================================================== */

html[data-theme="minimal"] {
    --ui-bg: #F7F8FB;
    --ui-bg-subtle: #F0F3F8;
    --ui-surface: #FFFFFF;
    --ui-surface-raised: #FFFFFF;
    --ui-surface-soft: #FAFBFD;

    --ui-text: #172033;
    --ui-text-muted: #69758A;
    --ui-text-soft: #929CAF;

    --ui-border: #E2E7EF;
    --ui-border-strong: #CBD3E0;

    --ui-primary: #3564E8;
    --ui-primary-hover: #2B56CD;
    --ui-primary-soft: #EDF2FF;

    --ui-shadow-sm: 0 1px 2px rgba(23, 32, 51, .035);
    --ui-shadow-md: 0 5px 16px rgba(23, 32, 51, .055);
    --ui-shadow-lg: 0 18px 44px rgba(23, 32, 51, .09);

    --ui-radius-sm: 7px;
    --ui-radius-md: 11px;
    --ui-radius-lg: 14px;
    --ui-radius-xl: 18px;
}

html[data-theme="minimal"] body {
    background:
        linear-gradient(
            180deg,
            #FAFBFD 0,
            var(--ui-bg) 220px
        ) !important;
}

html[data-theme="minimal"] .content-card,
html[data-theme="minimal"] .workspace-widget,
html[data-theme="minimal"] .d35-more-grid > a,
html[data-theme="minimal"] .d35-settings-grid > a {
    box-shadow: none !important;
}

html[data-theme="minimal"] .workspace-home-hero {
    background: #FFFFFF !important;
    box-shadow: none !important;
}

html[data-theme="minimal"] .workspace-home-hero::after {
    opacity: .28 !important;
}

html[data-theme="minimal"] .desktop-sidebar {
    border-right: 1px solid var(--ui-border);
}

html[data-theme="minimal"] .sidebar-link.active {
    background: var(--ui-primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

html[data-theme="minimal"] .workspace-widget-kind-icon,
html[data-theme="minimal"] .d35-more-grid > a > span,
html[data-theme="minimal"] .d35-settings-icon {
    border: 1px solid
        color-mix(
            in srgb,
            var(--ui-primary) 12%,
            var(--ui-border)
        );
}

/* ===============================================================
   2. DARK PREMIUM
   Deep navy/graphite, layered glass, violet light.
   =============================================================== */

html[data-theme="dark"] {
    --ui-bg: #0A0E14;
    --ui-bg-subtle: #0F151E;
    --ui-surface: #121923;
    --ui-surface-raised: #171F2B;
    --ui-surface-soft: #0F1620;

    --ui-text: #F5F7FB;
    --ui-text-muted: #A4AEBD;
    --ui-text-soft: #6F7B8D;

    --ui-border: #222C3A;
    --ui-border-strong: #354255;

    --ui-primary: #9580FF;
    --ui-primary-hover: #A996FF;
    --ui-primary-soft: #211D37;

    --ui-success: #50CC91;
    --ui-success-soft: #163126;
    --ui-warning: #E8B55F;
    --ui-warning-soft: #352A18;
    --ui-danger: #FF737B;
    --ui-danger-soft: #3B1D24;
    --ui-info: #78A1FF;
    --ui-purple: #B293FF;
    --ui-pink: #EF7CAD;

    --ui-shadow-sm:
        0 1px 0 rgba(255, 255, 255, .025),
        0 8px 18px rgba(0, 0, 0, .16);

    --ui-shadow-md:
        0 1px 0 rgba(255, 255, 255, .035),
        0 16px 34px rgba(0, 0, 0, .28);

    --ui-shadow-lg:
        0 1px 0 rgba(255, 255, 255, .045),
        0 28px 70px rgba(0, 0, 0, .42);

    --ui-radius-sm: 9px;
    --ui-radius-md: 13px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;

    --ui-sidebar-bg: #0C1118;
    --ui-sidebar-text: #929DAE;
    --ui-sidebar-active: #1A1A2E;
    --ui-sidebar-active-text: #D3C9FF;
    --ui-topbar-bg: rgba(10, 14, 20, .86);
    --ui-modal-bg: rgba(2, 4, 8, .72);
    --ui-focus: rgba(149, 128, 255, .3);

    color-scheme: dark;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(
            circle at 72% -10%,
            rgba(121, 94, 255, .16),
            transparent 34rem
        ),
        radial-gradient(
            circle at -8% 42%,
            rgba(55, 108, 171, .08),
            transparent 28rem
        ),
        var(--ui-bg) !important;
}

html[data-theme="dark"] .erp-main::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    width: min(56vw, 920px);
    height: 360px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at top right,
            rgba(149, 128, 255, .08),
            transparent 68%
        );
}

html[data-theme="dark"] .desktop-sidebar {
    border-right: 1px solid
        rgba(255, 255, 255, .055);
    background:
        linear-gradient(
            180deg,
            #0D121A,
            #090D13
        ) !important;
}

html[data-theme="dark"] .sidebar-brand {
    border-bottom-color:
        rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .sidebar-brand-mark,
html[data-theme="dark"] .user-avatar {
    background:
        linear-gradient(
            145deg,
            #6B59DA,
            #A08BFF 60%,
            #677DF0
        ) !important;
    box-shadow:
        0 8px 24px rgba(108, 85, 222, .24);
}

html[data-theme="dark"] .sidebar-link {
    border: 1px solid transparent;
}

html[data-theme="dark"] .sidebar-link:hover {
    background:
        rgba(255, 255, 255, .035) !important;
    color: #D9DFE8 !important;
}

html[data-theme="dark"] .sidebar-link.active {
    border-color:
        rgba(161, 139, 255, .15);
    background:
        linear-gradient(
            100deg,
            rgba(119, 91, 242, .21),
            rgba(95, 83, 180, .08)
        ) !important;
    color: #D9D0FF !important;
    box-shadow:
        inset 3px 0 0 #9A87FF,
        0 8px 24px rgba(0, 0, 0, .1);
}

html[data-theme="dark"] .sidebar-link.active .sidebar-icon {
    color: #B9AAFF !important;
}

html[data-theme="dark"] .desktop-topbar {
    border-bottom-color:
        rgba(255, 255, 255, .055) !important;
    background:
        rgba(9, 13, 19, .82) !important;
    backdrop-filter:
        blur(22px)
        saturate(130%);
}

html[data-theme="dark"] .topbar-search {
    border-color:
        rgba(255, 255, 255, .07) !important;
    background:
        rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .topbar-create-button {
    background:
        linear-gradient(
            135deg,
            #725DE8,
            #9580FF
        ) !important;
    box-shadow:
        0 10px 24px rgba(103, 81, 218, .25);
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .workspace-widget,
html[data-theme="dark"] .d35-more-grid > a,
html[data-theme="dark"] .d35-settings-grid > a,
html[data-theme="dark"] .d43-project-card,
html[data-theme="dark"] .d43-task-card,
html[data-theme="dark"] .d43-document-card,
html[data-theme="dark"] .d43-note-card,
html[data-theme="dark"] .d32-family-card {
    border-color:
        rgba(255, 255, 255, .075) !important;
    background:
        linear-gradient(
            145deg,
            rgba(24, 32, 44, .96),
            rgba(16, 23, 33, .96)
        ) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .content-card:hover,
    html[data-theme="dark"] .workspace-widget:hover,
    html[data-theme="dark"] .d35-more-grid > a:hover,
    html[data-theme="dark"] .d35-settings-grid > a:hover {
        border-color:
            rgba(163, 143, 255, .22) !important;
        background:
            linear-gradient(
                145deg,
                rgba(28, 37, 51, .98),
                rgba(18, 25, 36, .98)
            ) !important;
        box-shadow: var(--ui-shadow-md) !important;
    }
}

html[data-theme="dark"] .workspace-home-hero {
    overflow: hidden;
    border-color:
        rgba(166, 146, 255, .18) !important;
    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(163, 140, 255, .19),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #171E2B,
            #101721 58%,
            #0D131C
        ) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04),
        0 20px 50px rgba(0, 0, 0, .26) !important;
}

html[data-theme="dark"] .workspace-home-hero::after {
    border-color:
        rgba(177, 159, 255, .1) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .workspace-home-customize {
    border-color:
        rgba(255, 255, 255, .09) !important;
    background:
        rgba(255, 255, 255, .045) !important;
    color: #E8EAF0 !important;
}

html[data-theme="dark"] .workspace-pulse-item {
    border-color:
        rgba(255, 255, 255, .07) !important;
    background:
        rgba(255, 255, 255, .035) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .workspace-pulse-item > span,
html[data-theme="dark"] .workspace-widget-kind-icon,
html[data-theme="dark"] .workspace-object-icon,
html[data-theme="dark"] .d35-more-grid > a > span,
html[data-theme="dark"] .d35-settings-icon {
    border: 1px solid
        rgba(167, 145, 255, .12) !important;
    background:
        linear-gradient(
            145deg,
            rgba(149, 128, 255, .19),
            rgba(149, 128, 255, .08)
        ) !important;
    color: #B8A8FF !important;
}

html[data-theme="dark"] .workspace-type-attention
.workspace-widget-kind-icon {
    border-color:
        rgba(255, 115, 123, .17) !important;
    background:
        rgba(255, 115, 123, .1) !important;
    color: #FF858C !important;
}

html[data-theme="dark"] .workspace-type-events
.workspace-widget-kind-icon {
    border-color:
        rgba(120, 161, 255, .17) !important;
    background:
        rgba(120, 161, 255, .1) !important;
    color: #91B2FF !important;
}

html[data-theme="dark"] .workspace-type-projects
.workspace-widget-kind-icon {
    border-color:
        rgba(80, 204, 145, .17) !important;
    background:
        rgba(80, 204, 145, .095) !important;
    color: #69D5A0 !important;
}

html[data-theme="dark"] .workspace-task-check {
    border-color:
        #465267 !important;
    background:
        rgba(255, 255, 255, .018) !important;
}

html[data-theme="dark"] .workspace-task-check:hover {
    border-color: #9B89FF !important;
    background: var(--ui-primary-soft) !important;
    color: #C3B8FF !important;
}

html[data-theme="dark"] .workspace-schedule-rail::before {
    background:
        linear-gradient(
            180deg,
            rgba(149, 128, 255, .15),
            rgba(149, 128, 255, .52),
            rgba(149, 128, 255, .12)
        ) !important;
}

html[data-theme="dark"] .workspace-schedule-rail i {
    background: #9A87FF !important;
    box-shadow:
        0 0 0 4px rgba(149, 128, 255, .09),
        0 0 16px rgba(149, 128, 255, .32);
}

html[data-theme="dark"] .workspace-project-progress-track,
html[data-theme="dark"] .d43-project-progress-track,
html[data-theme="dark"] .d45-project-progress-track {
    background:
        rgba(255, 255, 255, .055) !important;
}

html[data-theme="dark"] .workspace-project-progress-track > i,
html[data-theme="dark"] .d43-project-progress-track > span,
html[data-theme="dark"] .d45-project-progress-track > i {
    background:
        linear-gradient(
            90deg,
            #7765E8,
            #9E89FF 58%,
            #61C59B
        ) !important;
    box-shadow:
        0 0 12px rgba(149, 128, 255, .16);
}

html[data-theme="dark"] .primary-button {
    border-color: transparent !important;
    background:
        linear-gradient(
            135deg,
            #715FE3,
            #9580FF
        ) !important;
    box-shadow:
        0 9px 24px rgba(102, 80, 217, .22);
}

html[data-theme="dark"] .secondary-button {
    border-color:
        rgba(255, 255, 255, .09) !important;
    background:
        rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color:
        rgba(255, 255, 255, .09) !important;
    background:
        #0D141E !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color:
        rgba(164, 143, 255, .52) !important;
    box-shadow:
        0 0 0 3px
        rgba(149, 128, 255, .11) !important;
}

html[data-theme="dark"] .mobile-bottom-nav {
    border-top-color:
        rgba(255, 255, 255, .065) !important;
    background:
        rgba(10, 14, 20, .9) !important;
    box-shadow:
        0 -16px 40px rgba(0, 0, 0, .28) !important;
    backdrop-filter:
        blur(22px)
        saturate(135%);
}

html[data-theme="dark"] .mobile-nav-item {
    color: #778294 !important;
}

html[data-theme="dark"] .mobile-nav-item.active {
    color: #B8A9FF !important;
}

html[data-theme="dark"] .mobile-nav-item.active
.mobile-nav-icon {
    border: 1px solid
        rgba(155, 136, 255, .12);
    background:
        rgba(149, 128, 255, .12) !important;
}

html[data-theme="dark"] .mobile-create-fab {
    border-color:
        rgba(12, 17, 24, .96) !important;
    background:
        linear-gradient(
            145deg,
            #725FE6,
            #9B86FF
        ) !important;
    box-shadow:
        0 14px 36px rgba(77, 56, 178, .36) !important;
}

html[data-theme="dark"] .quick-create-sheet {
    border-color:
        rgba(255, 255, 255, .08) !important;
    background:
        linear-gradient(
            160deg,
            #161D28,
            #101721
        ) !important;
    box-shadow:
        0 -10px 50px rgba(0, 0, 0, .48) !important;
}

html[data-theme="dark"] .quick-create-grid > a {
    border-color:
        rgba(255, 255, 255, .075) !important;
    background:
        rgba(255, 255, 255, .028) !important;
}

html[data-theme="dark"] .quick-create-grid > a:hover {
    border-color:
        rgba(160, 139, 255, .22) !important;
    background:
        rgba(149, 128, 255, .06) !important;
}

html[data-theme="dark"] .quick-create-icon {
    background:
        rgba(149, 128, 255, .11) !important;
    color: #B8A9FF !important;
}

/* ===============================================================
   3. WARM FAMILY
   Soft cream, tactile cards, orange warmth.
   =============================================================== */

html[data-theme="warm"] {
    --ui-bg: #FBF5EC;
    --ui-bg-subtle: #F5EBDD;
    --ui-surface: #FFFDFC;
    --ui-surface-raised: #FFFFFF;
    --ui-surface-soft: #FFF8EF;

    --ui-text: #30271F;
    --ui-text-muted: #7D6D60;
    --ui-text-soft: #A39385;

    --ui-border: #E9DCCB;
    --ui-border-strong: #D7C2A7;

    --ui-primary: #E78943;
    --ui-primary-hover: #D67530;
    --ui-primary-soft: #FFF0DF;

    --ui-shadow-sm:
        0 2px 7px rgba(91, 63, 39, .045);
    --ui-shadow-md:
        0 10px 28px rgba(91, 63, 39, .075);
    --ui-shadow-lg:
        0 24px 64px rgba(91, 63, 39, .11);

    --ui-radius-sm: 11px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 20px;
    --ui-radius-xl: 26px;
}

html[data-theme="warm"] body {
    background:
        radial-gradient(
            circle at 86% 4%,
            rgba(232, 137, 67, .075),
            transparent 25rem
        ),
        var(--ui-bg) !important;
}

html[data-theme="warm"] .workspace-home-hero {
    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(231, 137, 67, .09),
            transparent 36%
        ),
        #FFFDFC !important;
}

html[data-theme="warm"] .content-card,
html[data-theme="warm"] .workspace-widget,
html[data-theme="warm"] .d35-more-grid > a,
html[data-theme="warm"] .d35-settings-grid > a {
    border-color:
        rgba(181, 145, 104, .28) !important;
}

html[data-theme="warm"] .workspace-widget-kind-icon,
html[data-theme="warm"] .d35-more-grid > a > span,
html[data-theme="warm"] .d35-settings-icon,
html[data-theme="warm"] .quick-create-icon {
    background:
        linear-gradient(
            145deg,
            #FFF2E4,
            #FFECD8
        ) !important;
    color: #D77C38 !important;
}

html[data-theme="warm"] .mobile-create-fab {
    background:
        linear-gradient(
            145deg,
            #ED934E,
            #E47E34
        ) !important;
}

/* ===============================================================
   4. BOLD MODULAR
   Strong geometry, violet blocks, compact energy.
   =============================================================== */

html[data-theme="bold"] {
    --ui-bg: #F4F5FA;
    --ui-bg-subtle: #EDEFFC;
    --ui-surface: #FFFFFF;
    --ui-surface-raised: #FFFFFF;
    --ui-surface-soft: #F8F9FE;

    --ui-text: #15182A;
    --ui-text-muted: #666F86;
    --ui-text-soft: #949CB0;

    --ui-border: #DEE2EC;
    --ui-border-strong: #C5CBD9;

    --ui-primary: #5B50F5;
    --ui-primary-hover: #4940D8;
    --ui-primary-soft: #ECEAFF;

    --ui-shadow-sm:
        0 3px 0 rgba(39, 42, 76, .04);
    --ui-shadow-md:
        0 8px 0 rgba(39, 42, 76, .055);
    --ui-shadow-lg:
        0 14px 0 rgba(39, 42, 76, .07);

    --ui-radius-sm: 6px;
    --ui-radius-md: 9px;
    --ui-radius-lg: 12px;
    --ui-radius-xl: 15px;
}

html[data-theme="bold"] body {
    background:
        linear-gradient(
            90deg,
            rgba(91, 80, 245, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(91, 80, 245, .025) 1px,
            transparent 1px
        ),
        var(--ui-bg) !important;
    background-size: 28px 28px !important;
}

html[data-theme="bold"] .content-card,
html[data-theme="bold"] .workspace-widget,
html[data-theme="bold"] .d35-more-grid > a,
html[data-theme="bold"] .d35-settings-grid > a {
    box-shadow:
        3px 3px 0
        rgba(35, 38, 72, .055) !important;
}

html[data-theme="bold"] .workspace-home-hero {
    border-color:
        rgba(91, 80, 245, .2) !important;
    background:
        linear-gradient(
            115deg,
            #FFFFFF 0 68%,
            #F0EEFF 68%
        ) !important;
    box-shadow:
        5px 5px 0
        rgba(91, 80, 245, .07) !important;
}

html[data-theme="bold"] .sidebar-link.active {
    border-radius: 7px !important;
    background:
        #ECEAFF !important;
    box-shadow:
        inset 4px 0 0 #5B50F5;
}

html[data-theme="bold"] .workspace-widget-kind-icon,
html[data-theme="bold"] .d35-more-grid > a > span,
html[data-theme="bold"] .d35-settings-icon {
    border-radius: 6px !important;
    background:
        #ECEAFF !important;
    color: #5046DB !important;
}

html[data-theme="bold"] .primary-button,
html[data-theme="bold"] .mobile-create-fab,
html[data-theme="bold"] .topbar-create-button {
    background:
        linear-gradient(
            135deg,
            #5B50F5,
            #7569FF
        ) !important;
}

html[data-theme="bold"] .workspace-project-progress-track > i,
html[data-theme="bold"] .d43-project-progress-track > span,
html[data-theme="bold"] .d45-project-progress-track > i {
    background:
        linear-gradient(
            90deg,
            #5B50F5 0 70%,
            #26B776 70%
        ) !important;
}

/* ===============================================================
   Appearance page — previews must communicate the differences.
   =============================================================== */

.theme-choice-minimal .theme-preview {
    background: #F7F8FB !important;
}

.theme-choice-minimal .theme-preview-sidebar {
    background: #FFFFFF !important;
}

.theme-choice-minimal .theme-preview-main {
    background: #F7F8FB !important;
}

.theme-choice-dark .theme-preview {
    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(149, 128, 255, .2),
            transparent 48%
        ),
        #0A0E14 !important;
}

.theme-choice-dark .theme-preview-sidebar {
    background: #0C1118 !important;
}

.theme-choice-dark .theme-preview-main {
    background: #101721 !important;
}

.theme-choice-dark .theme-preview-topbar,
.theme-choice-dark .theme-preview-content i,
.theme-choice-dark .theme-preview-metrics i {
    background: #171F2B !important;
    border-color: #2A3545 !important;
}

.theme-choice-warm .theme-preview {
    background: #FBF5EC !important;
}

.theme-choice-warm .theme-preview-sidebar {
    background: #FFFDFC !important;
}

.theme-choice-warm .theme-preview-main {
    background: #FBF5EC !important;
}

.theme-choice-bold .theme-preview {
    background:
        linear-gradient(
            90deg,
            rgba(91, 80, 245, .06) 1px,
            transparent 1px
        ),
        #F4F5FA !important;
    background-size: 10px 10px !important;
}

.theme-choice-bold .theme-preview-sidebar {
    background: #FFFFFF !important;
}

/* ===============================================================
   Mobile Dark Premium-specific density/contrast.
   =============================================================== */

@media (max-width: 649px) {
    html[data-theme="dark"]
    .workspace-home-dashboard
    .workspace-widget {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .03),
            0 9px 22px rgba(0, 0, 0, .16) !important;
    }

    html[data-theme="dark"]
    .workspace-attention-item {
        border-color:
            rgba(255, 255, 255, .07) !important;
        background:
            rgba(255, 255, 255, .025) !important;
    }

    html[data-theme="dark"]
    .d35-more-grid > a {
        background:
            linear-gradient(
                145deg,
                rgba(23, 31, 43, .96),
                rgba(15, 22, 32, .96)
            ) !important;
    }

    html[data-theme="bold"]
    .workspace-home-dashboard
    .workspace-widget {
        border-left:
            3px solid
            color-mix(
                in srgb,
                var(--ui-primary) 65%,
                transparent
            ) !important;
    }
}

/* Respect reduced motion. */
html[data-motion="reduce"] .content-card,
html[data-motion="reduce"] .workspace-widget,
html[data-motion="reduce"] .d35-more-grid > a,
html[data-motion="reduce"] .d35-settings-grid > a {
    transition: none !important;
}

/* Keyboard and touch accessibility fixes shared by every visual theme. */
.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-text);
    color: var(--ui-surface);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

@media (pointer: coarse) {
    button,
    summary,
    .primary-button,
    .secondary-button,
    .danger-button,
    .action-link-button,
    .workspace-widget-open,
    .workspace-widget-settings,
    .workspace-row-open {
        min-width: 44px;
        min-height: 44px !important;
    }
}