/* =========================================================
   DANAKU DESIGN SYSTEM — STEP 3B

   Visual layer only. Layout remains in each page stylesheet.
   The palette keeps DanaKU's warm gold identity while adding
   the blue already present in the DanaKU mark as a secondary
   accent. Semantic income/expense colors remain separate.
========================================================= */

:root {
    color-scheme: dark;

    --dk-bg: #0d0f12;
    --dk-bg-soft: #111318;
    --dk-surface-1: #15171c;
    --dk-surface-2: #1a1d23;
    --dk-surface-3: #21242b;
    --dk-surface-hover: #282c34;

    --dk-border-soft: #282c33;
    --dk-border: #323640;
    --dk-border-strong: #424854;

    --dk-text: #f5f7fa;
    --dk-text-soft: #c7cbd2;
    --dk-text-muted: #89909b;
    --dk-text-faint: #626976;

    --dk-gold: #f5c54a;
    --dk-gold-strong: #e7b52f;
    --dk-gold-soft: #ffdd75;
    --dk-blue: #5c8eb8;
    --dk-blue-soft: #7aa8cb;

    --dk-income: #38c99a;
    --dk-income-soft: rgba(56, 201, 154, 0.12);
    --dk-expense: #ff6b70;
    --dk-expense-soft: rgba(255, 107, 112, 0.11);
    --dk-warning: #f4a94f;

    --dk-radius-sm: 10px;
    --dk-radius-md: 14px;
    --dk-radius-lg: 20px;
    --dk-radius-xl: 24px;

    --dk-shadow-card: 0 14px 34px rgba(0, 0, 0, 0.16);
    --dk-shadow-float: 0 24px 70px rgba(0, 0, 0, 0.42);
    --dk-focus-ring: 0 0 0 3px rgba(245, 197, 74, 0.16);

    --dk-ease-out: cubic-bezier(.2, .8, .2, 1);
    --dk-ease-spring: cubic-bezier(.16, 1, .3, 1);
}

html,
body {
    background: var(--dk-bg);
    color: var(--dk-text);
    font-family:
        "Plus Jakarta Sans",
        "Segoe UI Variable",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

::selection {
    background: rgba(245, 197, 74, 0.28);
    color: #ffffff;
}

img {
    max-width: 100%;
}

button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dk-gold);
    outline-offset: 2px;
}

/* =========================================================
   LOGIN — PREMIUM BUT QUIET
========================================================= */

.login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 18%, rgba(92, 142, 184, 0.13), transparent 29%),
        radial-gradient(circle at 82% 78%, rgba(245, 197, 74, 0.11), transparent 31%),
        linear-gradient(145deg, #0b0d10 0%, #101318 52%, #0d0f12 100%);
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.26;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 86%);
}

.login-page::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(245, 197, 74, 0.045);
    filter: blur(70px);
    pointer-events: none;
}

.login-card {
    position: relative;
    max-width: 420px;
    padding: 32px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(27, 30, 36, 0.96), rgba(19, 21, 26, 0.96));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    box-shadow:
        0 30px 90px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.035);
    text-align: left;
    animation: dkLoginCardIn 620ms var(--dk-ease-spring) both;
}

.login-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.login-logo-shell {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(245,197,74,.13), rgba(92,142,184,.10));
    border: 1px solid rgba(245,197,74,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    animation: dkLogoIn 720ms 80ms var(--dk-ease-spring) both;
}

.login-logo {
    width: 40px;
    height: 40px;
    margin: 0;
}

.login-brand-copy {
    min-width: 0;
}

.login-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--dk-gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.login-title {
    color: var(--dk-text);
    font-size: 27px;
    line-height: 1;
    letter-spacing: -.035em;
}

.login-subtitle {
    max-width: 340px;
    margin: 0 0 24px;
    color: var(--dk-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.login-card form,
.toggle-button,
.form-message,
.login-footnote {
    animation: dkLoginContentIn 540ms var(--dk-ease-spring) both;
}

.login-card form { animation-delay: 120ms; }
.toggle-button { animation-delay: 170ms; }
.form-message { animation-delay: 200ms; }
.login-footnote { animation-delay: 230ms; }

.login-card input {
    height: 48px;
    margin-bottom: 11px;
    padding: 0 14px;
    background: #20232a;
    border-color: #2d323b;
    border-radius: 12px;
    color: var(--dk-text);
    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.login-card input:hover {
    background: #232730;
}

.login-card input:focus {
    background: #232730;
    border-color: rgba(245,197,74,.72);
    box-shadow: var(--dk-focus-ring);
}

.login-card input::placeholder {
    color: #737b87;
}

.primary-button {
    height: 48px;
    margin-top: 8px;
    background: linear-gradient(180deg, var(--dk-gold-soft), var(--dk-gold));
    border-radius: 13px;
    color: #17191d;
    box-shadow: 0 10px 24px rgba(245,197,74,.12);
    transition:
        transform 160ms var(--dk-ease-out),
        filter 160ms ease,
        box-shadow 160ms ease;
}

.primary-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffe08a, var(--dk-gold));
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(245,197,74,.17);
}

.primary-button:active:not(:disabled) {
    transform: translateY(0) scale(.995);
}

.toggle-button {
    width: 100%;
    margin-top: 13px;
    padding: 8px 0;
    color: var(--dk-text-muted);
    font-weight: 650;
    text-decoration: none;
}

.toggle-button:hover:not(:disabled) {
    color: var(--dk-gold);
    text-decoration: none;
}

.form-message {
    min-height: 19px;
    margin: 7px 0 0;
    font-weight: 650;
}

.login-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 17px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: var(--dk-text-faint);
    font-size: 9px;
}

.login-footnote svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.auth-success .login-card {
    animation: dkLoginSuccess 560ms var(--dk-ease-spring) both;
}

body.auth-success .login-page::after {
    animation: dkAmbientSuccess 560ms ease both;
}

@keyframes dkLoginCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dkLogoIn {
    from { opacity: 0; transform: translateY(6px) scale(.86) rotate(-5deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes dkLoginContentIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dkLoginSuccess {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    45% { transform: translateY(-2px) scale(1.008); border-color: rgba(56,201,154,.36); }
    100% { opacity: 0; transform: translateY(-10px) scale(.985); }
}

@keyframes dkAmbientSuccess {
    from { background: rgba(245, 197, 74, 0.045); }
    to { background: rgba(56, 201, 154, 0.08); }
}

/* =========================================================
   APP SHELL — NAVIGATION RECEDES, CONTENT LEADS
========================================================= */

.app-shell,
.home-page,
.wallets-page.app-content,
.detail-page.app-content {
    background-color: var(--dk-bg);
}

.app-sidebar {
    background:
        linear-gradient(180deg, rgba(17,19,23,.985), rgba(10,11,14,.985));
    border-color: rgba(255,255,255,.075);
    box-shadow:
        0 22px 58px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.sidebar-brand {
    background:
        linear-gradient(145deg, rgba(245,197,74,.095), rgba(92,142,184,.075));
    border-color: rgba(255,255,255,.085);
    transition:
        transform 180ms var(--dk-ease-out),
        border-color 180ms ease,
        background 180ms ease;
}

.sidebar-brand:hover,
.sidebar-brand:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(245,197,74,.32);
    background:
        linear-gradient(145deg, rgba(245,197,74,.14), rgba(92,142,184,.11));
}

.sidebar-divider {
    background: rgba(255,255,255,.08);
}

.sidebar-action {
    color: #737a86;
}

.sidebar-action:hover:not(:disabled),
.sidebar-action:focus-visible:not(:disabled) {
    color: var(--dk-text);
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.075);
}

.sidebar-action.is-active {
    color: var(--dk-gold);
    background: rgba(245,197,74,.085);
    border-color: rgba(245,197,74,.14);
    box-shadow: none;
}

.sidebar-action.is-active::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 3px;
    height: 21px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: var(--dk-gold);
    box-shadow: 0 0 14px rgba(245,197,74,.30);
}

.sidebar-action:disabled {
    color: #414650;
}

.sidebar-action::after,
.profile-popover {
    background: #191c21;
    border-color: #30343d;
    box-shadow: var(--dk-shadow-float);
}

.sidebar-avatar,
.profile-popover-avatar {
    background:
        linear-gradient(145deg, var(--dk-gold-soft), var(--dk-gold));
    color: #15171b;
}

.profile-menu-item:hover:not(:disabled) {
    background: rgba(255,255,255,.055);
}

/* =========================================================
   COMMON APP SURFACES
========================================================= */

.dashboard-card,
.wallet-overview-card,
.wallet-panel,
.metric-card,
.transaction-form-panel,
.detail-transactions {
    border-color: var(--dk-border-soft);
    box-shadow:
        var(--dk-shadow-card),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.dashboard-card,
.wallet-panel,
.metric-card,
.transaction-form-panel,
.detail-transactions,
.wallet-overview-stat {
    background: linear-gradient(180deg, #181b20 0%, #15171c 100%);
}

.dashboard-header h1,
.wallets-header h1,
.detail-page-header h1,
.wallet-panel-header h2,
.card-header-row h2,
.recent-header h2,
.detail-transaction-header h2,
.form-title {
    color: var(--dk-text);
}

.dashboard-header p,
.wallets-header p,
.detail-page-header p,
.metric-caption,
.wallet-stat-caption,
.wallet-card-name span,
.wallet-future-note p,
.detail-field > span {
    color: var(--dk-text-muted);
}

.card-kicker,
.wallet-card-kicker,
.detail-kicker {
    color: var(--dk-text-faint);
}

.balance-hero,
.wallet-overview-primary,
.wallet-identity-card {
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.26), transparent 27%),
        linear-gradient(135deg, #f6cc59 0%, #f2bd3d 58%, #e7ad28 100%);
    border-color: rgba(245,197,74,.62);
}

.metric-icon-income,
.income-icon-wrap {
    background: var(--dk-income-soft);
    color: var(--dk-income);
}

.metric-icon-expense,
.expense-icon-wrap {
    background: var(--dk-expense-soft);
    color: var(--dk-expense);
}

.metric-income,
.metric-value.income,
.wallet-stat-value.income,
.wallet-card-flow .income,
.transaction-income {
    color: var(--dk-income);
}

.metric-expense,
.metric-value.expense,
.wallet-stat-value.expense,
.wallet-card-flow .expense,
.transaction-expense {
    color: var(--dk-expense);
}

/* =========================================================
   HOME POLISH
========================================================= */

.dashboard-canvas,
.wallets-canvas,
.detail-canvas {
    width: min(100%, 1680px);
}

.dashboard-date-pill,
.subtle-chip,
.wallet-panel-badge,
.wallets-back-button,
.show-all-button,
.show-all-detail,
.transaction-filter select,
.detail-filter select {
    background: #1b1e24;
    border-color: var(--dk-border-soft);
    color: var(--dk-text-soft);
}

.dashboard-date-pill svg {
    color: var(--dk-blue-soft);
}

.metric-card:hover,
.metric-card:focus-visible,
.wallet-card-link:hover,
.wallet-card-link:focus-visible,
.quick-wallet-link:hover,
.quick-wallet-link:focus-visible {
    border-color: var(--dk-border-strong);
}

.wallet-breakdown-icon,
.quick-wallet-icon {
    color: var(--dk-text-soft);
    background: #20242b;
    border: 1px solid rgba(255,255,255,.045);
}

.wallet-breakdown-icon .wallet-icon-svg,
.quick-wallet-icon .wallet-icon-svg {
    width: 17px;
    height: 17px;
}

/* =========================================================
   WALLET HUB — PREPARES FOR CUSTOM ICON/COLOR
========================================================= */

.new-wallet-button {
    color: #7f8691;
    background: #191c21;
    border-color: var(--dk-border-soft);
}

.wallet-card-link {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wallet-accent) 10%, transparent), transparent 38%),
        linear-gradient(180deg, #1b1e24, #17191e);
    border-color: #2d3139;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.wallet-card-link::before {
    width: 3px;
    opacity: .95;
    box-shadow: 0 0 16px color-mix(in srgb, var(--wallet-accent) 20%, transparent);
}

.wallet-card-link::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -52px;
    top: -62px;
    border-radius: 50%;
    background: var(--wallet-accent);
    opacity: .035;
    pointer-events: none;
}

.wallet-card-link:hover,
.wallet-card-link:focus-visible {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wallet-accent) 15%, transparent), transparent 42%),
        linear-gradient(180deg, #20242a, #1a1d22);
    border-color: color-mix(in srgb, var(--wallet-accent) 32%, #343943);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0,0,0,.19);
}

.wallet-card-icon,
.wallet-distribution-icon,
.detail-wallet-icon {
    color: var(--wallet-accent, var(--dk-gold));
    background: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 11%, #1d2026);
    border: 1px solid color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 18%, transparent);
}

.wallet-card-icon .wallet-icon-svg,
.wallet-distribution-icon .wallet-icon-svg,
.detail-wallet-icon .wallet-icon-svg {
    width: 21px;
    height: 21px;
}

.wallet-icon-svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wallet-card-track,
.wallet-distribution-track,
.wallet-mini-track {
    background: #262a31;
}

.wallet-card-share {
    color: var(--wallet-accent);
}

.wallet-future-note {
    background:
        linear-gradient(135deg, rgba(92,142,184,.07), rgba(245,197,74,.045));
    border-color: rgba(92,142,184,.14);
}

.future-note-icon {
    color: var(--dk-blue-soft);
}

/* =========================================================
   WALLET DETAIL
========================================================= */

.detail-wallet-icon {
    --wallet-accent: #18191d;
    color: #191a1d;
    background: rgba(18,18,20,.11);
    border-color: rgba(18,18,20,.12);
}

.detail-input {
    background: #202329;
    border-color: #2d323a;
    color: var(--dk-text);
}

.detail-input:hover:not(:disabled) {
    background: #242830;
}

.detail-input:focus {
    border-color: rgba(245,197,74,.62);
    box-shadow: var(--dk-focus-ring);
}

.save-button {
    background: linear-gradient(180deg, var(--dk-gold-soft), var(--dk-gold));
    color: #17191d;
}

.save-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffe08a, var(--dk-gold));
}

/* =========================================================
   SCROLLBARS
========================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color: #3c424c transparent;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-thumb {
    background: #3a4049;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #4b525e;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
   RESPONSIVE POLISH
========================================================= */

@media (min-width: 2000px) {
    .dashboard-canvas,
    .wallets-canvas,
    .detail-canvas {
        width: min(100%, 1780px);
    }
}

@media (min-width: 721px) and (max-width: 1500px) {
    .dashboard-canvas,
    .wallets-canvas,
    .detail-canvas {
        width: 100%;
    }

    .dashboard-header,
    .wallets-header,
    .detail-page-header {
        margin-bottom: 14px;
    }
}

@media (max-width: 720px) {
    .login-card {
        max-width: 390px;
        padding: 26px 22px;
        border-radius: 21px;
    }

    .login-page::before {
        background-size: 34px 34px;
    }

    .sidebar-action.is-active::before {
        left: 50%;
        top: auto;
        bottom: -7px;
        width: 22px;
        height: 3px;
        transform: translateX(-50%);
    }
}

/* =========================================================
   ACCESSIBILITY — RESPECT REDUCED MOTION
========================================================= */

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

/* =========================================================
   STEP 3C — TYPOGRAPHY, SELECT MOTION, ICONS & THEMES
========================================================= */

html,
body,
button,
input,
select,
textarea {
    font-family:
        "Plus Jakarta Sans",
        "Segoe UI Variable",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        sans-serif;
}

body {
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Finance values stay visually stable as amounts change. */
.balance-hero-value,
.metric-value,
.wallet-total-value,
.wallet-card-balance,
.wallet-identity-balance strong,
.metric-card strong,
.transaction-right strong,
.detail-item-right strong,
.wallet-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
}

h1,
h2,
h3,
strong,
button {
    text-wrap: balance;
}

/* Smooth theme transition only while the user toggles it. */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition-property: background-color, background, border-color, color, box-shadow, fill, stroke !important;
    transition-duration: 260ms !important;
    transition-timing-function: var(--dk-ease-out) !important;
}

/* =========================================================
   DANAKU CUSTOM DROPDOWN / COMBOBOX — STEP 3D
   The original <select> remains as the data source while the
   visible trigger and floating menu are fully themeable.
========================================================= */

.dk-select-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    vertical-align: middle;
    --dk-select-accent: var(--dk-gold);
}

.dk-select-shell.is-full {
    display: flex;
    width: 100%;
}

/* Keep the native select in the DOM for application logic, but
   remove it from the visual/keyboard interaction layer. */
.dk-select-shell .dk-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dk-select-trigger {
    min-height: 34px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px 0 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        #1b1e24;
    border: 1px solid var(--dk-border-soft);
    border-radius: 11px;
    color: var(--dk-text-soft);
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
    transition:
        background 170ms ease,
        border-color 170ms ease,
        color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--dk-ease-spring);
}

.dk-select-shell.is-full .dk-select-trigger {
    min-height: 44px;
    padding-inline: 14px 12px;
    border-radius: 13px;
    font-size: 12px;
}

.dk-select-trigger:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent),
        #21252c;
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

.dk-select-trigger:focus-visible,
.dk-select-shell.is-open .dk-select-trigger {
    border-color: color-mix(in srgb, var(--dk-select-accent) 72%, var(--dk-border-strong));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--dk-select-accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,.025);
    color: var(--dk-text);
}

.dk-select-trigger:disabled {
    opacity: .46;
    cursor: not-allowed;
}

.dk-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dk-select-arrow {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--dk-text-muted);
    pointer-events: none;
}

.dk-select-arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
    transition:
        transform 240ms var(--dk-ease-spring),
        color 180ms ease;
}

.dk-select-trigger:hover .dk-select-arrow,
.dk-select-trigger:focus-visible .dk-select-arrow,
.dk-select-shell.is-open .dk-select-arrow {
    color: var(--dk-select-accent);
}

.dk-select-shell.is-open .dk-select-arrow svg {
    transform: rotate(180deg);
}

.dk-select-shell.did-change .dk-select-arrow {
    animation: dkSelectConfirm 260ms var(--dk-ease-spring);
}

.dk-select-shell.is-income {
    --dk-select-accent: var(--dk-income);
}

.dk-select-shell.is-expense {
    --dk-select-accent: var(--dk-expense);
}

.dk-select-shell.is-income .dk-select-value {
    color: var(--dk-income);
    font-weight: 750;
}

.dk-select-shell.is-expense .dk-select-value {
    color: var(--dk-expense);
    font-weight: 750;
}

.detail-field > .dk-select-shell {
    width: 100%;
}

.transaction-filter .dk-select-shell,
.detail-filter .dk-select-shell {
    flex: 0 0 auto;
    min-width: 112px;
}

/* The popup is portalled to <body>, so it is never clipped by cards
   with overflow:hidden. */
.dk-select-menu {
    position: fixed;
    z-index: 5000;
    max-height: min(420px, calc(100dvh - 24px));
    min-width: var(--dk-trigger-width, 140px);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
        rgba(24, 27, 33, .985);
    border: 1px solid #353b45;
    border-radius: 13px;
    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.012) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: top center;
    transition:
        opacity 135ms ease,
        transform 170ms var(--dk-ease-out),
        visibility 0s linear 170ms;
    scrollbar-width: thin;
    scrollbar-color: #49505a transparent;
}

.dk-select-menu.opens-up {
    transform: translateY(6px) scale(.985);
    transform-origin: bottom center;
}

.dk-select-menu.is-open {
    display: block;
}

.dk-select-menu.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.dk-select-menu::-webkit-scrollbar { width: 5px; }
.dk-select-menu::-webkit-scrollbar-thumb { background: #49505a; border-radius: 999px; }
.dk-select-menu::-webkit-scrollbar-track { background: transparent; }

.dk-select-option {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 9px 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #b9c0ca;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition:
        background 130ms ease,
        color 130ms ease,
        transform 130ms ease;
}

.dk-select-option:hover,
.dk-select-option:focus-visible {
    background: #252a32;
    color: #f1f3f6;
    transform: translateX(1px);
}

.dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-gold) 11%, transparent);
    color: var(--dk-gold-soft);
}

.dk-select-menu.is-income .dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-income) 11%, transparent);
    color: #42d7a6;
}

.dk-select-menu.is-expense .dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-expense) 11%, transparent);
    color: #ff777d;
}

.dk-select-option:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.dk-select-option-mark {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: currentColor;
    opacity: 0;
    transform: scale(.7);
    transition: opacity 130ms ease, transform 160ms var(--dk-ease-spring);
}

.dk-select-option.is-selected .dk-select-option-mark {
    opacity: 1;
    transform: scale(1);
}

.dk-option-check {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes dkSelectConfirm {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

[data-theme="light"] .dk-select-trigger {
    background: #f5f7fa;
    border-color: #dce2e9;
    color: #5f6975;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

[data-theme="light"] .dk-select-trigger:hover {
    background: #ffffff;
    border-color: #cbd4de;
    color: #1f252d;
}

[data-theme="light"] .dk-select-trigger:focus-visible,
[data-theme="light"] .dk-select-shell.is-open .dk-select-trigger {
    background: #ffffff;
}

[data-theme="light"] .dk-select-menu {
    background:
        linear-gradient(180deg, rgba(255,255,255,.8), transparent 30%),
        rgba(255,255,255,.985);
    border-color: #d9e0e8;
    box-shadow:
        0 18px 45px rgba(44,57,75,.16),
        0 0 0 1px rgba(255,255,255,.8) inset;
    scrollbar-color: #c8d0da transparent;
}

[data-theme="light"] .dk-select-option {
    color: #505b67;
}

[data-theme="light"] .dk-select-option:hover,
[data-theme="light"] .dk-select-option:focus-visible {
    background: #eef2f6;
    color: #171c22;
}

[data-theme="light"] .dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-gold) 12%, #ffffff);
    color: #9a7410;
}

[data-theme="light"] .dk-select-menu.is-income .dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-income) 10%, #ffffff);
    color: #117657;
}

[data-theme="light"] .dk-select-menu.is-expense .dk-select-option.is-selected {
    background: color-mix(in srgb, var(--dk-expense) 9%, #ffffff);
    color: #bd3f47;
}

/* =========================================================
   TRANSACTION DIRECTION ICONS
========================================================= */

.transaction-icon,
.detail-item-icon {
    color: var(--dk-text-soft);
}

.transaction-icon-income,
.detail-item-icon.income-icon {
    color: var(--dk-income);
    background: var(--dk-income-soft);
    border: 1px solid color-mix(in srgb, var(--dk-income) 20%, transparent);
}

.transaction-icon-expense,
.detail-item-icon.expense-icon {
    color: var(--dk-expense);
    background: var(--dk-expense-soft);
    border: 1px solid color-mix(in srgb, var(--dk-expense) 20%, transparent);
}

.transaction-direction-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms var(--dk-ease-spring);
}

.home-transaction-item:hover .transaction-direction-svg,
.detail-transaction-item:hover .transaction-direction-svg {
    transform: translateY(-1px) scale(1.04);
}

.action-icon-svg,
.button-action-svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transaction-edit-button {
    color: var(--dk-blue-soft);
}

.delete-button,
.cancel-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.delete-button .button-action-svg,
.cancel-delete-button .button-action-svg {
    width: 14px;
    height: 14px;
}

/* =========================================================
   THEME CONTROLS
========================================================= */

.theme-menu-item {
    min-height: 48px;
}

.theme-menu-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.theme-menu-icon svg,
.theme-toggle-icons svg {
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 180ms ease, transform 240ms var(--dk-ease-spring);
}

.theme-icon-sun {
    opacity: 0;
    transform: rotate(-35deg) scale(.72);
}

.theme-icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-icon-moon {
    opacity: 0;
    transform: rotate(32deg) scale(.72);
}

.theme-menu-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.theme-menu-copy strong {
    color: inherit;
    font-size: 11px;
    font-weight: 700;
}

.theme-menu-copy small {
    color: var(--dk-text-muted);
    font-size: 8px;
    font-weight: 600;
}

.theme-switch {
    width: 34px;
    height: 20px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px;
    background: #30343c;
    border: 1px solid #3b404a;
    border-radius: 999px;
    transition: background 180ms ease, border-color 180ms ease;
}

.theme-switch > span {
    width: 14px;
    height: 14px;
    background: #f2f4f7;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.24);
    transform: translateX(0);
    transition: transform 240ms var(--dk-ease-spring), background 180ms ease;
}

[data-theme="light"] .theme-switch {
    background: color-mix(in srgb, var(--dk-gold) 32%, #ffffff);
    border-color: color-mix(in srgb, var(--dk-gold) 48%, #d7b03b);
}

[data-theme="light"] .theme-switch > span {
    background: #fffdf7;
    transform: translateX(14px);
}

.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 20;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--dk-surface-2) 88%, transparent);
    border: 1px solid var(--dk-border-soft);
    border-radius: 12px;
    color: var(--dk-text-soft);
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(14px);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.login-theme-toggle:hover {
    transform: translateY(-1px);
    background: var(--dk-surface-3);
    border-color: var(--dk-border-strong);
}

.theme-toggle-icons {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] {
    color-scheme: light;

    --dk-bg: #f4f6f9;
    --dk-bg-soft: #edf1f5;
    --dk-surface-1: #ffffff;
    --dk-surface-2: #f8fafc;
    --dk-surface-3: #eef2f6;
    --dk-surface-hover: #e8edf3;

    --dk-border-soft: #e2e7ed;
    --dk-border: #d7dde5;
    --dk-border-strong: #c5ced8;

    --dk-text: #171b22;
    --dk-text-soft: #49515c;
    --dk-text-muted: #737d89;
    --dk-text-faint: #98a1ac;

    --dk-gold: #d8a91f;
    --dk-gold-strong: #bb8f12;
    --dk-gold-soft: #f0c84f;
    --dk-blue: #4b7fa9;
    --dk-blue-soft: #5d8fb8;

    --dk-income: #15966f;
    --dk-income-soft: rgba(21, 150, 111, 0.10);
    --dk-expense: #df5159;
    --dk-expense-soft: rgba(223, 81, 89, 0.09);

    --dk-shadow-card: 0 12px 30px rgba(44, 57, 75, 0.07);
    --dk-shadow-float: 0 22px 58px rgba(44, 57, 75, 0.15);
}

[data-theme="light"] body,
[data-theme="light"] .app-shell,
[data-theme="light"] .home-page,
[data-theme="light"] .wallets-page.app-content,
[data-theme="light"] .detail-page.app-content {
    background-color: var(--dk-bg);
    color: var(--dk-text);
}

[data-theme="light"] .home-page {
    --home-bg: #f4f6f9;
    --home-card: #ffffff;
    --home-card-soft: #f7f9fb;
    --home-border: #e0e5eb;
    --home-text: #171b22;
    --home-muted: #747e8a;
    --home-yellow: #d8a91f;
    --home-income: #15966f;
    --home-expense: #df5159;
    background:
        radial-gradient(circle at 24% 0%, rgba(216,169,31,.08), transparent 28%),
        var(--dk-bg);
}

[data-theme="light"] .wallets-page.app-content,
[data-theme="light"] .detail-page.app-content {
    background:
        radial-gradient(circle at 92% 4%, rgba(216,169,31,.07), transparent 24%),
        var(--dk-bg);
}

/* Sidebar stays visually anchored, but becomes a soft light rail. */
[data-theme="light"] .app-sidebar {
    --sidebar-bg: #ffffff;
    --sidebar-border: #e0e5eb;
    --sidebar-item: #f1f4f7;
    --sidebar-item-hover: #edf1f5;
    --danaku-yellow: #e3b52d;
    background: rgba(255,255,255,.94);
    border-color: #dfe5ec;
    box-shadow: 0 18px 45px rgba(50,65,82,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

[data-theme="light"] .sidebar-brand {
    background: #f6f8fa;
    border-color: #e2e7ed;
}

[data-theme="light"] .sidebar-divider { background: #e2e7ed; }
[data-theme="light"] .sidebar-action { color: #7f8995; }
[data-theme="light"] .sidebar-action:hover:not(:disabled),
[data-theme="light"] .sidebar-action:focus-visible:not(:disabled) {
    color: #1c222a;
    background: #edf1f5;
    border-color: #dbe2e9;
}

[data-theme="light"] .sidebar-action.is-active {
    color: #17191d;
    background: #e9bd3d;
    border-color: #e2b534;
    box-shadow: 0 8px 22px rgba(207,159,26,.16);
}

[data-theme="light"] .sidebar-avatar,
[data-theme="light"] .profile-popover-avatar {
    background: #1f252d;
    color: #ffffff;
}

[data-theme="light"] .profile-popover,
[data-theme="light"] .sidebar-flyout {
    background: rgba(255,255,255,.98);
    border-color: #dce3ea;
    box-shadow: var(--dk-shadow-float);
}

[data-theme="light"] .profile-popover-head { border-color: #e4e8ee; }
[data-theme="light"] .profile-popover-copy strong { color: #1b2027; }
[data-theme="light"] .profile-popover-copy span { color: #7b8590; }
[data-theme="light"] .profile-menu-item { color: #46505b; }
[data-theme="light"] .profile-menu-item:hover:not(:disabled) { background: #f0f3f7; color: #171b22; }
[data-theme="light"] .profile-menu-item:disabled { color: #a0a8b2; }

/* Core cards */
[data-theme="light"] .dashboard-card,
[data-theme="light"] .wallet-overview-card,
[data-theme="light"] .wallet-panel,
[data-theme="light"] .metric-card,
[data-theme="light"] .transaction-form-panel,
[data-theme="light"] .detail-transactions {
    background: #ffffff;
    border-color: #e0e5eb;
    box-shadow: var(--dk-shadow-card);
}

[data-theme="light"] .wallet-card-link {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wallet-accent) 9%, transparent), transparent 40%),
        #ffffff;
    border-color: #e0e5eb;
    box-shadow: var(--dk-shadow-card);
}

[data-theme="light"] .wallet-card-link:hover,
[data-theme="light"] .wallet-card-link:focus-visible {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wallet-accent) 13%, transparent), transparent 42%),
        #ffffff;
    border-color: color-mix(in srgb, var(--wallet-accent) 30%, #d8dfe7);
    box-shadow: 0 18px 38px rgba(44,57,75,.10);
}

[data-theme="light"] .wallet-card-icon,
[data-theme="light"] .wallet-distribution-icon,
[data-theme="light"] .detail-wallet-icon,
[data-theme="light"] .wallet-breakdown-icon,
[data-theme="light"] .quick-wallet-icon {
    background: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 10%, #f7f9fb);
}

/* Typography across pages */
[data-theme="light"] .dashboard-header h1,
[data-theme="light"] .card-header-row h2,
[data-theme="light"] .recent-header h2,
[data-theme="light"] .wallets-header h1,
[data-theme="light"] .detail-page-header h1,
[data-theme="light"] .form-title,
[data-theme="light"] .wallet-section-header h2,
[data-theme="light"] .wallet-card-title,
[data-theme="light"] .transaction-info strong,
[data-theme="light"] .detail-item-info strong {
    color: #171b22;
}

[data-theme="light"] .dashboard-breadcrumb strong,
[data-theme="light"] .wallets-breadcrumb strong,
[data-theme="light"] .detail-breadcrumb strong {
    color: #4b5561;
}

[data-theme="light"] .dashboard-breadcrumb,
[data-theme="light"] .wallets-breadcrumb,
[data-theme="light"] .detail-breadcrumb,
[data-theme="light"] .dashboard-header p,
[data-theme="light"] .wallets-header p,
[data-theme="light"] .detail-page-header p,
[data-theme="light"] .card-kicker,
[data-theme="light"] .detail-kicker,
[data-theme="light"] .wallet-card-kicker,
[data-theme="light"] .transaction-info span,
[data-theme="light"] .detail-item-info span {
    color: #7c8692;
}

[data-theme="light"] .dashboard-breadcrumb a,
[data-theme="light"] .wallets-breadcrumb a,
[data-theme="light"] .detail-breadcrumb a { color: #687380; }
[data-theme="light"] .dashboard-breadcrumb a:hover,
[data-theme="light"] .wallets-breadcrumb a:hover,
[data-theme="light"] .detail-breadcrumb a:hover { color: #1c222a; }

/* Controls */
[data-theme="light"] .dashboard-date-pill,
[data-theme="light"] .subtle-chip,
[data-theme="light"] .wallet-panel-badge,
[data-theme="light"] .wallets-back-button,
[data-theme="light"] .show-all-button,
[data-theme="light"] .show-all-detail,
[data-theme="light"] .transaction-filter select,
[data-theme="light"] .detail-filter select,
[data-theme="light"] .detail-input,
[data-theme="light"] .cancel-edit-button,
[data-theme="light"] .transaction-edit-button {
    background: #f5f7fa;
    border-color: #dce2e9;
    color: #4e5864;
}

[data-theme="light"] .detail-input:hover:not(:disabled),
[data-theme="light"] .transaction-filter select:hover,
[data-theme="light"] .detail-filter select:hover {
    background: #eef2f6;
}

[data-theme="light"] .detail-input:focus,
[data-theme="light"] .transaction-filter select:focus,
[data-theme="light"] .detail-filter select:focus {
    background: #ffffff;
}

[data-theme="light"] .detail-input::placeholder { color: #a1a9b3; }
[data-theme="light"] .date-input { color-scheme: light; }
[data-theme="dark"] .date-input { color-scheme: dark; }

[data-theme="light"] .form-helper { border-color: #e5e9ee; }
[data-theme="light"] .form-helper > span { background: #eef2f6; color: #747f8b; }
[data-theme="light"] .form-helper p { color: #84909c; }

/* Transactions */
[data-theme="light"] .home-transaction-item,
[data-theme="light"] .detail-transaction-item {
    border-color: #e7ebf0;
}

[data-theme="light"] .home-transaction-item:hover,
[data-theme="light"] .detail-transaction-item:hover {
    background: #f7f9fb;
}

[data-theme="light"] .transaction-info small,
[data-theme="light"] .detail-item-info small,
[data-theme="light"] .transaction-right span {
    color: #98a1ab;
}

[data-theme="light"] .recent-transactions,
[data-theme="light"] .detail-transaction-list {
    scrollbar-color: #c9d0d8 transparent;
}

/* Login */
[data-theme="light"] .login-page {
    background:
        radial-gradient(circle at 20% 18%, rgba(75,127,169,.12), transparent 29%),
        radial-gradient(circle at 82% 78%, rgba(216,169,31,.15), transparent 31%),
        linear-gradient(145deg, #eef2f6 0%, #f8fafc 52%, #f2f5f8 100%);
}

[data-theme="light"] .login-page::before {
    opacity: .38;
    background-image:
        linear-gradient(rgba(37,47,59,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,47,59,.05) 1px, transparent 1px);
}

[data-theme="light"] .login-page::after { background: rgba(216,169,31,.09); }

[data-theme="light"] .login-card {
    background: rgba(255,255,255,.94);
    border-color: #dfe5eb;
    box-shadow: 0 30px 80px rgba(56,70,86,.16), inset 0 1px 0 rgba(255,255,255,.95);
}

[data-theme="light"] .login-logo-shell {
    background: linear-gradient(145deg, rgba(216,169,31,.15), rgba(75,127,169,.10));
    border-color: rgba(190,143,18,.22);
}

[data-theme="light"] .login-title { color: #171b22; }
[data-theme="light"] .login-subtitle { color: #737e8a; }
[data-theme="light"] .login-card input {
    background: #f5f7fa;
    border-color: #dce2e8;
    color: #171b22;
}
[data-theme="light"] .login-card input:hover,
[data-theme="light"] .login-card input:focus { background: #ffffff; }
[data-theme="light"] .login-card input::placeholder { color: #9aa3ad; }

/* Gold hero cards intentionally stay gold in both themes. */
[data-theme="light"] .balance-hero,
[data-theme="light"] .wallet-overview-primary,
[data-theme="light"] .wallet-identity-card {
    color: #15171b;
    box-shadow: 0 16px 36px rgba(177,132,12,.12);
}

@media (max-width: 720px) {
    .login-theme-toggle {
        top: 14px;
        right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-changing *,
    html.theme-changing *::before,
    html.theme-changing *::after,
    .dk-select-arrow svg,
    .transaction-direction-svg,
    .theme-menu-icon svg,
    .theme-toggle-icons svg,
    .theme-switch > span {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}



/* Light-theme refinements for nested card content. */
[data-theme="light"] .metric-card:hover,
[data-theme="light"] .metric-card:focus-visible {
    background: #fbfcfd;
}

[data-theme="light"] .metric-badge,
[data-theme="light"] .wallet-card-arrow,
[data-theme="light"] .card-icon-button {
    background: #f2f5f8;
    border-color: #dfe5eb;
    color: #74808c;
}

[data-theme="light"] .cashflow-total-row > div:first-child strong,
[data-theme="light"] .metric-value,
[data-theme="light"] .wallet-breakdown-label strong,
[data-theme="light"] .wallet-breakdown-value,
[data-theme="light"] .quick-wallet-link strong,
[data-theme="light"] .wallet-card-name strong,
[data-theme="light"] .wallet-card-balance-row strong,
[data-theme="light"] .wallet-distribution-label strong,
[data-theme="light"] .wallet-distribution-value,
[data-theme="light"] .wallet-future-note strong {
    color: #20262e;
}

[data-theme="light"] .cashflow-total-row > div:first-child span,
[data-theme="light"] .cashflow-legend,
[data-theme="light"] .cashflow-bar-label,
[data-theme="light"] .cashflow-bar-row strong,
[data-theme="light"] .wallet-breakdown-label span,
[data-theme="light"] .quick-wallet-link small,
[data-theme="light"] .wallet-card-name span,
[data-theme="light"] .wallet-card-balance-row span,
[data-theme="light"] .wallet-card-flow,
[data-theme="light"] .wallet-distribution-label span,
[data-theme="light"] .wallet-future-note p {
    color: #7e8995;
}

[data-theme="light"] .cashflow-track,
[data-theme="light"] .wallet-mini-track,
[data-theme="light"] .wallet-card-track,
[data-theme="light"] .wallet-distribution-track {
    background: #e8edf2;
}

[data-theme="light"] .quick-wallet-link {
    background: #f7f9fb;
    border-color: #e2e7ed;
}

[data-theme="light"] .quick-wallet-link:hover,
[data-theme="light"] .quick-wallet-link:focus-visible {
    background: #eef2f6;
    border-color: #d4dce4;
}

[data-theme="light"] .quick-wallet-link > svg {
    stroke: #8e98a3;
}

[data-theme="light"] .wallet-card-arrow,
[data-theme="light"] .wallet-panel-badge,
[data-theme="light"] .new-wallet-button small {
    background: #eef2f6;
}

[data-theme="light"] .new-wallet-button {
    background: #f5f7fa;
    border-color: #dfe5eb;
    color: #87919c;
}

[data-theme="light"] .wallet-card-track,
[data-theme="light"] .wallet-distribution-track {
    background: #e6ebf0;
}

[data-theme="light"] .goals-preview,
[data-theme="light"] .wallet-future-note {
    background: rgba(216,169,31,.065);
    border-color: rgba(190,143,18,.22);
}

[data-theme="light"] .detail-transaction-header h2,
[data-theme="light"] .show-all-detail,
[data-theme="light"] .show-all-button {
    color: #b48710;
}

[data-theme="light"] .detail-filter select,
[data-theme="light"] .transaction-filter select {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

[data-theme="light"] .metric-filter-card:hover {
    background: #f8fafc;
}

[data-theme="light"] .delete-button {
    background: #d94f57;
}

[data-theme="light"] .delete-button:hover:not(:disabled) {
    background: #c9424a;
}

[data-theme="light"] .cancel-delete-button {
    background: #e9edf2;
    color: #56616d;
}

[data-theme="light"] .cancel-delete-button:hover {
    background: #dde3ea;
}

[data-theme="light"] .transaction-edit-button:hover {
    background: #e8edf3;
}

[data-theme="light"] .detail-transaction-list::-webkit-scrollbar-thumb,
[data-theme="light"] .recent-transactions::-webkit-scrollbar-thumb {
    background: #cbd2da;
}

.dk-select-trigger:disabled .dk-select-arrow {
    opacity: .42;
}

/* =========================================================
   STEP 3D — QUICK ACCESS WALLET HOVER ACCENTS
========================================================= */

.quick-wallet-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.quick-wallet-link::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--wallet-accent, var(--dk-gold));
    box-shadow: 0 0 14px color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 46%, transparent);
    opacity: 0;
    transform: scaleY(.35);
    transform-origin: center;
    transition:
        opacity 150ms ease,
        transform 210ms var(--dk-ease-spring);
}

.quick-wallet-link:hover,
.quick-wallet-link:focus-visible {
    background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 10%, transparent), transparent 42%),
        #23272e;
    border-color: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 30%, #3a414b);
}

.quick-wallet-link:hover::before,
.quick-wallet-link:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
}

.quick-wallet-icon {
    transition:
        color 170ms ease,
        background 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease,
        transform 190ms var(--dk-ease-spring);
}

.quick-wallet-link:hover .quick-wallet-icon,
.quick-wallet-link:focus-visible .quick-wallet-icon {
    color: var(--wallet-accent, var(--dk-gold));
    background: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 12%, #20242b);
    border-color: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 24%, transparent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 10%, transparent);
    transform: scale(1.045);
}

.quick-wallet-link > svg:last-child {
    transition:
        stroke 170ms ease,
        transform 190ms var(--dk-ease-spring);
}

.quick-wallet-link:hover > svg:last-child,
.quick-wallet-link:focus-visible > svg:last-child {
    stroke: var(--wallet-accent, var(--dk-gold));
    transform: translateX(2px);
}

[data-theme="light"] .quick-wallet-link:hover,
[data-theme="light"] .quick-wallet-link:focus-visible {
    background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 9%, transparent), transparent 42%),
        #ffffff;
    border-color: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 28%, #d8dfe7);
}

[data-theme="light"] .quick-wallet-link:hover .quick-wallet-icon,
[data-theme="light"] .quick-wallet-link:focus-visible .quick-wallet-icon {
    background: color-mix(in srgb, var(--wallet-accent, var(--dk-gold)) 11%, #ffffff);
}

/* =========================================================
   STEP 3E — DANAKU CUSTOM DATEPICKER
========================================================= */

.dk-date-shell {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
}

.dk-date-shell .dk-native-date {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dk-date-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 0 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        #202329;
    border: 1px solid #2d323a;
    border-radius: 13px;
    color: var(--dk-text-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
    transition:
        background 170ms ease,
        border-color 170ms ease,
        color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--dk-ease-spring);
}

.dk-date-trigger:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent),
        #252931;
    border-color: #404650;
    color: var(--dk-text);
}

.dk-date-trigger:focus-visible,
.dk-date-shell.is-open .dk-date-trigger {
    border-color: rgba(245,197,74,.72);
    box-shadow:
        0 0 0 3px rgba(245,197,74,.10),
        inset 0 1px 0 rgba(255,255,255,.025);
    color: var(--dk-text);
}

.dk-date-trigger:disabled {
    opacity: .46;
    cursor: not-allowed;
}

.dk-date-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dk-date-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    color: var(--dk-text-muted);
    transition:
        color 160ms ease,
        background 160ms ease,
        transform 190ms var(--dk-ease-spring);
}

.dk-date-trigger:hover .dk-date-icon,
.dk-date-shell.is-open .dk-date-icon {
    color: var(--dk-gold);
    background: rgba(245,197,74,.08);
    transform: scale(1.04);
}

.dk-date-calendar-svg,
.dk-date-chevron-svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dk-date-menu {
    position: fixed;
    z-index: 5100;
    width: 310px;
    padding: 10px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.028), transparent 25%),
        rgba(24,27,33,.99);
    border: 1px solid #363c46;
    border-radius: 16px;
    box-shadow:
        0 24px 60px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top center;
    transition:
        opacity 145ms ease,
        transform 185ms var(--dk-ease-out),
        visibility 0s linear 185ms;
}

.dk-date-menu.opens-up {
    transform: translateY(7px) scale(.985);
    transform-origin: bottom center;
}

.dk-date-menu.is-open { display: block; }

.dk-date-menu.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.dk-date-header {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.dk-date-month-title {
    color: var(--dk-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
}

.dk-date-nav {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    background: #20242b;
    border: 1px solid #303640;
    border-radius: 10px;
    color: #9ca4ae;
    cursor: pointer;
    outline: none;
    transition:
        color 150ms ease,
        background 150ms ease,
        border-color 150ms ease,
        transform 170ms var(--dk-ease-spring);
}

.dk-date-nav:hover,
.dk-date-nav:focus-visible {
    color: var(--dk-gold);
    background: #282d35;
    border-color: rgba(245,197,74,.26);
    transform: scale(1.04);
}

.dk-date-weekdays,
.dk-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.dk-date-weekdays {
    margin-bottom: 4px;
}

.dk-date-weekdays span {
    display: grid;
    place-items: center;
    height: 24px;
    color: #6f7782;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.dk-date-day {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c9ced5;
    font: inherit;
    font-size: 9.5px;
    font-weight: 650;
    cursor: pointer;
    outline: none;
    transition:
        color 130ms ease,
        background 130ms ease,
        border-color 130ms ease,
        transform 150ms var(--dk-ease-spring);
}

.dk-date-day:hover,
.dk-date-day:focus-visible {
    background: #272c34;
    border-color: #343b45;
    color: #ffffff;
    transform: translateY(-1px);
}

.dk-date-day.is-outside {
    color: #515964;
}

.dk-date-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--dk-gold);
}

.dk-date-day.is-selected {
    background: linear-gradient(180deg, var(--dk-gold-soft), var(--dk-gold));
    border-color: rgba(255,225,129,.78);
    color: #15181d;
    font-weight: 850;
    box-shadow: 0 7px 16px rgba(245,197,74,.16);
}

.dk-date-day.is-selected::after {
    background: #15181d;
}

.dk-date-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #2c3139;
}

.dk-date-helper {
    color: #6d7580;
    font-size: 8px;
    font-weight: 700;
}

.dk-date-today {
    min-height: 30px;
    padding: 0 10px;
    background: rgba(245,197,74,.08);
    border: 1px solid rgba(245,197,74,.15);
    border-radius: 9px;
    color: var(--dk-gold);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: background 140ms ease, transform 160ms var(--dk-ease-spring);
}

.dk-date-today:hover,
.dk-date-today:focus-visible {
    background: rgba(245,197,74,.13);
    transform: translateY(-1px);
}

[data-theme="light"] .dk-date-trigger {
    background: #f5f7fa;
    border-color: #dfe5eb;
    color: #46515d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

[data-theme="light"] .dk-date-trigger:hover:not(:disabled) {
    background: #ffffff;
    border-color: #ccd5de;
    color: #1d232a;
}

[data-theme="light"] .dk-date-menu {
    background: rgba(255,255,255,.995);
    border-color: #d9e0e7;
    box-shadow: 0 24px 60px rgba(46,55,67,.16);
}

[data-theme="light"] .dk-date-month-title { color: #20262e; }

[data-theme="light"] .dk-date-nav {
    background: #f4f7fa;
    border-color: #e0e6ec;
    color: #78838e;
}

[data-theme="light"] .dk-date-nav:hover,
[data-theme="light"] .dk-date-nav:focus-visible {
    background: #ffffff;
    color: #b48710;
    border-color: rgba(180,135,16,.25);
}

[data-theme="light"] .dk-date-weekdays span,
[data-theme="light"] .dk-date-helper { color: #929ca7; }

[data-theme="light"] .dk-date-day { color: #46515d; }
[data-theme="light"] .dk-date-day.is-outside { color: #b3bbc4; }

[data-theme="light"] .dk-date-day:hover,
[data-theme="light"] .dk-date-day:focus-visible {
    background: #f1f4f7;
    border-color: #e0e6ec;
    color: #171c22;
}

[data-theme="light"] .dk-date-footer { border-color: #e6ebf0; }

[data-theme="light"] .dk-date-today {
    background: rgba(180,135,16,.07);
    border-color: rgba(180,135,16,.16);
    color: #a97c0b;
}

@media (max-width: 420px) {
    .dk-date-menu {
        width: min(310px, calc(100vw - 20px)) !important;
    }
}

/* =========================================================
   STEP 3F — NAVIGATION MOTION + LOADING SYSTEM
========================================================= */

@view-transition {
    navigation: auto;
}

.app-sidebar { view-transition-name: danaku-sidebar; }
.app-content { view-transition-name: danaku-content; }

::view-transition-old(danaku-sidebar),
::view-transition-new(danaku-sidebar) {
    animation-duration: 180ms;
    animation-timing-function: var(--dk-ease-out);
}

::view-transition-old(danaku-content) {
    animation: dk-page-out 140ms ease both;
}

::view-transition-new(danaku-content) {
    animation: dk-page-in 210ms var(--dk-ease-out) both;
}

@keyframes dk-page-out {
    to { opacity: 0; transform: translateX(-6px) scale(.998); }
}

@keyframes dk-page-in {
    from { opacity: 0; transform: translateX(8px) scale(.998); }
    to { opacity: 1; transform: none; }
}

.dk-top-progress {
    position: fixed;
    z-index: 10000;
    inset: 0 0 auto 0;
    height: 3px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: rgba(92, 142, 184, .08);
    transition: opacity 120ms ease;
}

.dk-top-progress.is-visible { opacity: 1; }

.dk-top-progress-bar {
    display: block;
    height: 100%;
    width: 42%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dk-blue), var(--dk-gold), var(--dk-blue-soft));
    box-shadow: 0 0 14px rgba(245, 197, 74, .28);
    transform: translateX(-120%);
    animation: dk-progress-run 1.15s var(--dk-ease-out) infinite;
}

.dk-top-progress.is-finishing .dk-top-progress-bar {
    width: 100%;
    transform: translateX(0);
    animation: none;
    transition: transform 180ms ease, width 180ms ease;
}

@keyframes dk-progress-run {
    0% { transform: translateX(-120%); }
    60% { transform: translateX(135%); }
    100% { transform: translateX(245%); }
}

.dk-button-spinner {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .9;
    animation: dk-spinner .72s linear infinite;
}

.dk-button-success-mark {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(18, 25, 23, .14);
    font-weight: 900;
}

button.is-loading,
button.is-success {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@keyframes dk-spinner { to { transform: rotate(360deg); } }

/* =========================================================
   STEP 3F — DATEPICKER V2
========================================================= */

.dk-date-menu-v2 {
    max-height: min(520px, calc(100vh - 20px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #555e69 transparent;
}

.dk-date-manual-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #2e343d;
    border-radius: 12px;
    background: rgba(255,255,255,.015);
}

.dk-date-manual-field {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dk-date-manual-label {
    color: var(--dk-text-faint);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dk-date-manual-input {
    min-width: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--dk-text);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dk-date-manual-input::placeholder { color: #5e6671; }
.dk-date-manual-field.has-error .dk-date-manual-input { color: var(--dk-expense); }
.dk-date-manual-field.has-error { box-shadow: inset 0 -1px 0 var(--dk-expense); }

.dk-date-apply {
    height: 31px;
    padding: 0 10px;
    border: 1px solid rgba(245,197,74,.18);
    border-radius: 9px;
    background: rgba(245,197,74,.08);
    color: var(--dk-gold);
    font: inherit;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
}

.dk-date-title-group {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.dk-date-title-button {
    min-height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--dk-text);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.dk-date-title-button:hover,
.dk-date-title-button:focus-visible {
    background: #252a31;
    border-color: #343b44;
    color: var(--dk-gold);
}

.dk-date-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 2px 0 4px;
}

.dk-date-choice {
    min-height: 42px;
    padding: 5px 6px;
    border: 1px solid #2f353e;
    border-radius: 10px;
    background: #20242b;
    color: #c8ced6;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms var(--dk-ease-spring), background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.dk-date-choice:hover,
.dk-date-choice:focus-visible {
    transform: translateY(-1px);
    background: #292e36;
    border-color: #404751;
    color: #fff;
}

.dk-date-choice.is-viewing { border-color: rgba(92,142,184,.42); color: var(--dk-blue-soft); }
.dk-date-choice.is-selected {
    border-color: rgba(245,197,74,.55);
    background: rgba(245,197,74,.11);
    color: var(--dk-gold-soft);
}
.dk-date-choice.is-outside { opacity: .48; }

.dk-date-decade-label {
    margin: 1px 0 9px;
    text-align: center;
    color: var(--dk-text-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

[data-theme="light"] .dk-date-manual-row {
    background: #f7f9fb;
    border-color: #e0e6ec;
}
[data-theme="light"] .dk-date-manual-input { color: #242b33; }
[data-theme="light"] .dk-date-title-button { color: #252c34; }
[data-theme="light"] .dk-date-title-button:hover,
[data-theme="light"] .dk-date-title-button:focus-visible { background: #f2f5f8; border-color: #e0e6ec; color: #a97c0b; }
[data-theme="light"] .dk-date-choice { background: #f6f8fa; border-color: #e1e7ec; color: #4c5661; }
[data-theme="light"] .dk-date-choice:hover,
[data-theme="light"] .dk-date-choice:focus-visible { background: #fff; border-color: #ccd5de; color: #171c22; }
[data-theme="light"] .dk-date-choice.is-selected { background: #fff8df; border-color: #e0ba4d; color: #8c6500; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: .01ms !important; }
    .dk-top-progress-bar,
    .dk-button-spinner { animation-duration: 1.4s; }
}
/* Date pickers may be opened from the Step 3F report modal. */
.dk-date-menu { z-index: 7100; }

/* =========================================================
   STEP 4C — DYNAMIC WALLET THEME OVERRIDES
========================================================= */
.new-wallet-button {
    color: #17130a;
    background: linear-gradient(180deg, var(--dk-gold-soft), var(--dk-gold));
    border-color: color-mix(in srgb, var(--dk-gold) 70%, var(--dk-border));
}

[data-theme="light"] .new-wallet-button {
    color: #2a220d;
    background: linear-gradient(180deg, #f5d66d, var(--dk-gold));
    border-color: #cda225;
}

[data-theme="light"] .archive-wallet-button,
[data-theme="light"] .wallet-card-manage,
[data-theme="light"] .wallet-modal-close,
[data-theme="light"] .wallet-secondary-button,
[data-theme="light"] .wallet-editor-manage-actions button,
[data-theme="light"] .wallet-archive-actions button,
[data-theme="light"] .wallet-icon-choice {
    background: var(--dk-surface-2);
    border-color: var(--dk-border);
    color: var(--dk-text-soft);
}


/* =========================================================
   STEP 5.2 — PROCESS OVERLAY / LOGOUT FEEDBACK
========================================================= */
.dk-process-overlay{
    position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;
    background:rgba(6,8,10,.58);backdrop-filter:blur(7px);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;
}
.dk-process-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.dk-process-card{
    min-width:min(360px,calc(100vw - 36px));max-width:440px;display:flex;align-items:center;gap:14px;
    padding:16px 18px;border:1px solid var(--dk-border);border-radius:17px;
    background:linear-gradient(155deg,var(--dk-surface-2),var(--dk-surface-1));box-shadow:var(--dk-shadow-float);
}
.dk-process-spinner{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;position:relative;border-radius:12px;background:rgba(245,197,74,.08);border:1px solid rgba(245,197,74,.18)}
.dk-process-spinner i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--dk-gold);animation:dk-process-pulse 1s ease-in-out infinite}
.dk-process-spinner i:nth-child(1){animation-delay:-.22s}
.dk-process-spinner i:nth-child(2){animation-delay:-.11s}
.dk-process-spinner i:nth-child(3){}
.dk-process-copy{min-width:0;display:grid;gap:4px}.dk-process-copy strong{font-size:12px;letter-spacing:-.01em}.dk-process-copy span{color:var(--dk-text-muted);font-size:9.5px;line-height:1.5}
.dk-process-spinner i:nth-child(1){--dk-process-x:-9px}.dk-process-spinner i:nth-child(2){--dk-process-x:0px}.dk-process-spinner i:nth-child(3){--dk-process-x:9px}
@keyframes dk-process-pulse{0%,80%,100%{opacity:.32;translate:var(--dk-process-x) 0;scale:.72}40%{opacity:1;translate:var(--dk-process-x) -2px;scale:1}}
[data-theme="light"] .dk-process-overlay{background:rgba(232,237,242,.68)}
[data-theme="light"] .dk-process-card{background:#fff;border-color:#dfe5ea;box-shadow:0 24px 70px rgba(25,35,45,.18)}
@media(prefers-reduced-motion:reduce){.dk-process-overlay{transition:none}.dk-process-spinner i{animation-duration:1.8s}}


/* Step 5.6.1 — Goal icon consistency */
.goal-icon-svg {
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}