:root {
    --tdz-app-bg: #000000;
    --tdz-shell-bg: rgba(9, 9, 9, 0.95);
    --tdz-surface-bg: rgba(17, 17, 17, 0.96);
    --tdz-surface-elevated-bg: rgba(20, 20, 20, 0.96);
    --tdz-surface-border: rgba(255,255,255,0.10);
    --tdz-surface-shadow: 0 24px 70px rgba(0,0,0,0.32);
    --tdz-field-bg: rgba(255,255,255,0.045);
    --tdz-field-border: rgba(255,255,255,0.10);
    --tdz-field-text: rgba(255,255,255,0.92);
    --tdz-field-placeholder: rgba(255,255,255,0.32);
    --tdz-field-focus: rgba(29,161,242,0.42);
    --tdz-pill-bg: rgba(255,255,255,0.045);
    --tdz-pill-bg-hover: rgba(255,255,255,0.08);
    --tdz-pill-border: rgba(255,255,255,0.10);
    --tdz-pill-text: rgba(255,255,255,0.70);
    --tdz-primary-bg: #ffffff;
    --tdz-primary-text: #111827;
    --tdz-card-bg:
        linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.032)),
        rgba(18, 18, 18, 0.92);
    --tdz-card-border: rgba(255,255,255,0.11);
    --tdz-card-border-hover: rgba(255,255,255,0.16);
    --tdz-card-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 42px rgba(0,0,0,0.26);
    --tdz-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 50px rgba(0,0,0,0.32);
    --tdz-card-shine: radial-gradient(circle at 16% 0%, rgba(29,161,242,0.10), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%);
    --tdz-chip-bg: rgba(255,255,255,0.045);
    --tdz-chip-text: rgba(255,255,255,0.58);
    --tdz-meta-text: rgba(255,255,255,0.42);
    --tdz-title-text: rgba(255,255,255,0.94);
    --tdz-body-text: rgba(255,255,255,0.56);
    --tdz-vote-bg: rgba(255,255,255,0.055);
    --tdz-vote-border: rgba(255,255,255,0.10);
    --tdz-vote-hover-bg: rgba(255,255,255,0.075);
    --tdz-vote-fill: #17354b;
    --tdz-vote-fill-muted: rgba(23,53,75,0.72);
    --tdz-divider: rgba(255,255,255,0.08);
}

html.light {
    --tdz-app-bg: #f3f5f7;
    --tdz-shell-bg: rgba(255,255,255,0.94);
    --tdz-surface-bg: rgba(247,248,250,0.96);
    --tdz-surface-elevated-bg: rgba(255,255,255,0.96);
    --tdz-surface-border: rgba(15,23,42,0.10);
    --tdz-surface-shadow: 0 24px 70px rgba(15,23,42,0.10);
    --tdz-field-bg: rgba(248,250,252,0.94);
    --tdz-field-border: rgba(15,23,42,0.12);
    --tdz-field-text: rgba(17,24,39,0.92);
    --tdz-field-placeholder: rgba(17,24,39,0.42);
    --tdz-field-focus: rgba(43,131,189,0.45);
    --tdz-pill-bg: rgba(15,23,42,0.045);
    --tdz-pill-bg-hover: rgba(15,23,42,0.08);
    --tdz-pill-border: rgba(15,23,42,0.10);
    --tdz-pill-text: rgba(17,24,39,0.70);
    --tdz-primary-bg: #111827;
    --tdz-primary-text: #ffffff;
    --tdz-card-bg:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,252,0.88)),
        #ffffff;
    --tdz-card-border: rgba(15,23,42,0.10);
    --tdz-card-border-hover: rgba(15,23,42,0.16);
    --tdz-card-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 16px 38px rgba(15,23,42,0.08);
    --tdz-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.95), 0 22px 46px rgba(15,23,42,0.12);
    --tdz-card-shine: radial-gradient(circle at 18% 0%, rgba(43,131,189,0.11), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.78), transparent 46%);
    --tdz-chip-bg: rgba(15,23,42,0.055);
    --tdz-chip-text: rgba(17,24,39,0.54);
    --tdz-meta-text: rgba(17,24,39,0.46);
    --tdz-title-text: rgba(17,24,39,0.94);
    --tdz-body-text: rgba(17,24,39,0.58);
    --tdz-vote-bg: rgba(15,23,42,0.055);
    --tdz-vote-border: rgba(15,23,42,0.10);
    --tdz-vote-hover-bg: rgba(15,23,42,0.075);
    --tdz-vote-fill: #2b83bd;
    --tdz-vote-fill-muted: rgba(43,131,189,0.70);
    --tdz-divider: rgba(15,23,42,0.12);
}

.trendiz-card {
    position: relative;
    isolation: isolate;
    background: var(--tdz-card-bg) !important;
    border-color: var(--tdz-card-border) !important;
    box-shadow: var(--tdz-card-shadow);
    backdrop-filter: blur(18px);
}

.trendiz-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--tdz-card-shine);
    pointer-events: none;
}

.trendiz-card:hover {
    transform: translateY(-1px);
    border-color: var(--tdz-card-border-hover) !important;
    box-shadow: var(--tdz-card-shadow-hover);
}

.tdz-card-title {
    color: var(--tdz-title-text) !important;
    font-weight: 600 !important;
}

.tdz-card-body {
    color: var(--tdz-body-text) !important;
}

.tdz-meta {
    color: var(--tdz-meta-text) !important;
    font-weight: 500 !important;
}

.tdz-chip {
    background: var(--tdz-chip-bg) !important;
    color: var(--tdz-chip-text) !important;
    font-weight: 500 !important;
}

.tdz-avatar {
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 6px 16px rgba(0,0,0,0.18);
}

html.light .tdz-avatar {
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.08);
}

.tdz-vote {
    background: var(--tdz-vote-bg) !important;
    border-color: var(--tdz-vote-border) !important;
}

.tdz-vote:not(:disabled):hover {
    background: var(--tdz-vote-hover-bg) !important;
}

.tdz-vote-fill {
    background: var(--tdz-vote-fill) !important;
}

.tdz-vote-fill-muted {
    background: var(--tdz-vote-fill-muted) !important;
}

.tdz-divider {
    border-color: var(--tdz-divider) !important;
}

.tdz-surface {
    background: var(--tdz-surface-bg) !important;
    border-color: var(--tdz-surface-border) !important;
    color: var(--tdz-title-text) !important;
    box-shadow: var(--tdz-surface-shadow);
}

.tdz-surface-elevated {
    background: var(--tdz-surface-elevated-bg) !important;
    border-color: var(--tdz-surface-border) !important;
}

.tdz-field {
    background: var(--tdz-field-bg) !important;
    border-color: var(--tdz-field-border) !important;
    color: var(--tdz-field-text) !important;
}

.tdz-field::placeholder {
    color: var(--tdz-field-placeholder) !important;
}

.tdz-field:focus,
.tdz-field:focus-within {
    border-color: var(--tdz-field-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdz-field-focus), transparent 72%);
    outline: none !important;
}

.tdz-pill {
    background: var(--tdz-pill-bg) !important;
    border-color: var(--tdz-pill-border) !important;
    color: var(--tdz-pill-text) !important;
}

.tdz-pill:hover {
    background: var(--tdz-pill-bg-hover) !important;
}

.tdz-pill.bg-white,
.tdz-pill.border-white {
    background: var(--tdz-primary-bg) !important;
    border-color: var(--tdz-primary-bg) !important;
    color: var(--tdz-primary-text) !important;
}

.tdz-primary {
    background: var(--tdz-primary-bg) !important;
    color: var(--tdz-primary-text) !important;
}