/*
   Appearance variants
   The quiet editorial style remains the baseline. These attribute-driven layers
   let one interface move from light glass to deliberately raised or inset
   neumorphism without changing its information architecture.
*/

html[data-theme="light"] {
    background: #eeece9;
    color-scheme: light;
}

html[data-theme="dark"] {
    background: #1d1d1c;
    color-scheme: dark;
}

/* The current design, with only a thin glimmer rather than hard seams. */
html[data-ui-style="original"] body.dash-app {
    --quiet-canvas: #eeece9;
    --quiet-canvas-deep: #e4e1dc;
    --quiet-surface: rgba(250, 249, 247, 0.72);
    --quiet-surface-solid: #faf9f7;
    --quiet-surface-muted: #f1efeb;
    --quiet-ink: #292724;
    --quiet-muted: #706d67;
    --quiet-faint: #97938c;
    --quiet-line: rgba(83, 78, 71, 0.12);
    --quiet-white-line: rgba(255, 255, 255, 0.72);
    --quiet-shadow: 0 10px 28px rgba(49, 43, 36, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --quiet-shadow-hover: 0 14px 34px rgba(49, 43, 36, 0.095), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --quiet-press: inset 0 2px 7px rgba(46, 41, 34, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

html[data-ui-style="original"] body.dash-app .dash-card,
html[data-ui-style="original"] body.dash-app .dash-form-panel,
html[data-ui-style="original"] body.dash-app .dash-inline-filters,
html[data-ui-style="original"] body.dash-app .home-priority-panel,
html[data-ui-style="original"] body.dash-app .home-work-surface,
html[data-ui-style="original"] body.dash-app .home-upcoming-panel,
html[data-ui-style="original"] body.dash-app .home-shortcuts-panel,
html[data-ui-style="original"] body.dash-app .dash-modal {
    position: relative;
}

html[data-ui-style="original"] body.dash-app .dash-card::before,
html[data-ui-style="original"] body.dash-app .dash-form-panel::before,
html[data-ui-style="original"] body.dash-app .home-priority-panel::before,
html[data-ui-style="original"] body.dash-app .home-work-surface::before,
html[data-ui-style="original"] body.dash-app .home-upcoming-panel::before,
html[data-ui-style="original"] body.dash-app .home-shortcuts-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.34), transparent 35%);
    pointer-events: none;
}

/* Shared appearance controls in Profile → Aspetto. */
body.dash-app .profile-appearance-panel {
    display: grid;
    gap: 1.05rem;
}

body.dash-app .profile-appearance-panel > .profile-muted-copy {
    margin: -0.35rem 0 0;
    color: var(--quiet-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.dash-app .appearance-settings-group {
    display: grid;
    gap: 0.58rem;
}

body.dash-app .appearance-settings-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
}

body.dash-app .appearance-settings-label {
    color: var(--quiet-ink);
    font-size: 0.78rem;
    font-weight: 800;
}

body.dash-app .appearance-settings-hint {
    color: var(--quiet-muted);
    font-size: 0.72rem;
    text-align: right;
}

body.dash-app .appearance-choice-grid {
    display: grid;
    gap: 0.48rem;
}

body.dash-app .appearance-style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.dash-app .appearance-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.dash-app .appearance-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem;
    min-height: 74px;
    padding: 0.68rem;
    border: 1px solid var(--quiet-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.32);
    box-shadow: 0 2px 7px rgba(46, 41, 34, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.66);
    color: var(--quiet-ink);
    font-family: var(--font-body, "Noto Sans", sans-serif);
    text-align: left;
    transition: transform 180ms cubic-bezier(.2, .7, .3, 1), box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

body.dash-app .appearance-choice:hover {
    border-color: rgba(90, 83, 75, 0.24);
    background: var(--quiet-surface-solid);
    box-shadow: 0 6px 13px rgba(46, 41, 34, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transform: translateY(-1px);
}

body.dash-app .appearance-choice.is-selected {
    border-color: rgba(148, 57, 66, 0.34);
    background: var(--quiet-red-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body.dash-app .appearance-choice-icon {
    color: var(--quiet-red);
    font-size: 1.12rem;
}

body.dash-app .appearance-choice-copy {
    display: grid;
    min-width: 0;
    gap: 0.16rem;
}

body.dash-app .appearance-choice-copy strong {
    color: var(--quiet-ink);
    font-size: 0.76rem;
    line-height: 1.15;
}

body.dash-app .appearance-choice-copy small {
    color: var(--quiet-muted);
    font-size: 0.64rem;
    line-height: 1.28;
}

body.dash-app .appearance-choice-check {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    color: transparent;
    font-size: 0.75rem;
}

body.dash-app .appearance-choice.is-selected .appearance-choice-check {
    background: var(--quiet-red);
    color: #fffafa;
}

body.dash-app .appearance-preference-status {
    margin: 0;
    color: var(--quiet-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* Dark Original: still airier than the two tactile variants. */
html[data-theme="dark"] body.dash-app {
    --quiet-canvas: #1d1d1c;
    --quiet-canvas-deep: #171716;
    --quiet-surface: rgba(43, 42, 40, 0.82);
    --quiet-surface-solid: #2c2b29;
    --quiet-surface-muted: #343230;
    --quiet-ink: #f3f0eb;
    --quiet-muted: #b5b0a8;
    --quiet-faint: #88837b;
    --quiet-line: rgba(255, 251, 244, 0.12);
    --quiet-white-line: rgba(255, 255, 255, 0.08);
    --quiet-red: #d67178;
    --quiet-red-dark: #f09aa0;
    --quiet-red-soft: #472c2e;
    --quiet-green: #85b49a;
    --quiet-green-soft: #283d31;
    --quiet-amber: #e1b66f;
    --quiet-amber-soft: #42371f;
    --quiet-danger: #ee9090;
    --quiet-danger-soft: #492b2b;
    --quiet-shadow: 0 11px 28px rgba(0, 0, 0, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --quiet-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --quiet-press: inset 0 2px 8px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.035);
    background: var(--quiet-canvas);
}

html[data-theme="dark"] body.dash-app .dash-login-wrapper,
html[data-theme="dark"] body.dash-app .dash-shell,
html[data-theme="dark"] body.dash-app .dash-main {
    background: var(--quiet-canvas);
}

html[data-theme="dark"] body.dash-app .dash-login-card,
html[data-theme="dark"] body.dash-app .dash-topbar,
html[data-theme="dark"] body.dash-app .dash-profile-btn,
html[data-theme="dark"] body.dash-app .dash-bg-tasks-dropdown,
html[data-theme="dark"] body.dash-app .dash-notif-dropdown,
html[data-theme="dark"] body.dash-app .mentions-autocomplete,
html[data-theme="dark"] body.dash-app .dash-modal,
html[data-theme="dark"] body.dash-app .home-command-header,
html[data-theme="dark"] body.dash-app .dash-card,
html[data-theme="dark"] body.dash-app .dash-form-panel,
html[data-theme="dark"] body.dash-app .dash-inline-filters,
html[data-theme="dark"] body.dash-app .dash-stat-card,
html[data-theme="dark"] body.dash-app .home-priority-panel,
html[data-theme="dark"] body.dash-app .home-work-surface,
html[data-theme="dark"] body.dash-app .home-upcoming-panel,
html[data-theme="dark"] body.dash-app .home-shortcuts-panel,
html[data-theme="dark"] body.dash-app .dash-article-shell,
html[data-theme="dark"] body.dash-app .bacheca-pane,
html[data-theme="dark"] body.dash-app .bacheca-message,
html[data-theme="dark"] body.dash-app .lavagna-section,
html[data-theme="dark"] body.dash-app .compete-panel,
html[data-theme="dark"] body.dash-app .team-member-card,
html[data-theme="dark"] body.dash-app .account-user-card,
html[data-theme="dark"] body.dash-app .rubrica-row,
html[data-theme="dark"] body.dash-app .giochi-manager-card,
html[data-theme="dark"] body.dash-app .feedback-card {
    background: var(--quiet-surface);
    border-color: var(--quiet-white-line);
}

html[data-theme="dark"] body.dash-app .dash-sidebar { background: #141413; }
html[data-theme="dark"] body.dash-app .dash-sidebar-item.active { background: rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] body.dash-app .dash-auth-logo {
    filter: brightness(0) invert(1) grayscale(1);
}

html[data-theme="dark"] body.dash-app .dash-topbar-brandmark {
    filter: brightness(0) invert(1) grayscale(1);
}

/* A white sheen reads as a rendering error on the black original theme. */
html[data-theme="dark"][data-ui-style="original"] body.dash-app .dash-card::before,
html[data-theme="dark"][data-ui-style="original"] body.dash-app .dash-form-panel::before,
html[data-theme="dark"][data-ui-style="original"] body.dash-app .home-priority-panel::before,
html[data-theme="dark"][data-ui-style="original"] body.dash-app .home-work-surface::before,
html[data-theme="dark"][data-ui-style="original"] body.dash-app .home-upcoming-panel::before,
html[data-theme="dark"][data-ui-style="original"] body.dash-app .home-shortcuts-panel::before {
    content: none;
}

html[data-theme="dark"] body.dash-app .dash-btn,
html[data-theme="dark"] body.dash-app .dash-icon-btn,
html[data-theme="dark"] body.dash-app .dash-mobile-toggle,
html[data-theme="dark"] body.dash-app .dash-notif-btn,
html[data-theme="dark"] body.dash-app .dash-bg-tasks-btn,
html[data-theme="dark"] body.dash-app .dash-topbar-site,
html[data-theme="dark"] body.dash-app .dash-btn-logout,
html[data-theme="dark"] body.dash-app .home-focus-switch button,
html[data-theme="dark"] body.dash-app .home-work-tabs button,
html[data-theme="dark"] body.dash-app .appearance-choice,
html[data-theme="dark"] body.dash-app .home-task-row,
html[data-theme="dark"] body.dash-app .home-shortcut {
    background: rgba(57, 55, 52, 0.72);
    border-color: var(--quiet-line);
    color: var(--quiet-ink);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] body.dash-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] body.dash-app select,
html[data-theme="dark"] body.dash-app textarea,
html[data-theme="dark"] body.dash-app .dash-table,
html[data-theme="dark"] body.dash-app .lavagna-board-v2 {
    background: rgba(21, 21, 20, 0.4);
    border-color: var(--quiet-line);
    color: var(--quiet-ink);
}

html[data-theme="dark"] body.dash-app .dash-table th,
html[data-theme="dark"] body.dash-app .editor-toolbar,
html[data-theme="dark"] body.dash-app .editor-toolbar-group,
html[data-theme="dark"] body.dash-app .editor-side-panel-header {
    background: rgba(17, 17, 16, 0.34);
    color: var(--quiet-muted);
}

html[data-theme="dark"] body.dash-app .home-task-row:hover,
html[data-theme="dark"] body.dash-app .home-shortcut:hover,
html[data-theme="dark"] body.dash-app .appearance-choice:hover,
html[data-theme="dark"] body.dash-app .bacheca-message:hover {
    background: #373532;
}

html[data-theme="dark"] body.dash-app .home-task-icon,
html[data-theme="dark"] body.dash-app .bacheca-message .author-avatar,
html[data-theme="dark"] body.dash-app .public-profile-avatar {
    background: #33312e;
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.dash-app .dash-tabs,
html[data-theme="dark"] body.dash-app .cal-view-switch,
html[data-theme="dark"] body.dash-app .segment-control,
html[data-theme="dark"] body.dash-app .editor-mode-switch,
html[data-theme="dark"] body.dash-app .compete-tabs {
    background: rgba(17, 17, 16, 0.32);
    border-color: var(--quiet-line);
}

html[data-theme="dark"] body.dash-app .dash-tabs button.active,
html[data-theme="dark"] body.dash-app .cal-view-switch button.active,
html[data-theme="dark"] body.dash-app .segment-control button.active,
html[data-theme="dark"] body.dash-app .editor-mode-switch button.active,
html[data-theme="dark"] body.dash-app .compete-tabs button.active,
html[data-theme="dark"] body.dash-app .home-work-tabs button.active {
    background: #44413d;
    border-color: rgba(255, 255, 255, 0.09);
    color: var(--quiet-ink);
}

html[data-theme="dark"] body.dash-app .dash-btn-primary,
html[data-theme="dark"] body.dash-app .dash-btn-action {
    background: #a94751;
    border-color: #a94751;
    color: #fffafa;
}

/* Override the public site's legacy #btn-login dark-mode rule. */
html[data-theme="dark"] body.dash-app #btn-login {
    background: #a94751;
    border-color: #a94751;
    color: #fffafa;
}

html[data-theme="dark"] body.dash-app .dash-btn-primary:hover:not(:disabled),
html[data-theme="dark"] body.dash-app .dash-btn-action:hover:not(:disabled) {
    background: #bd5660;
    border-color: #bd5660;
}

html[data-theme="dark"] body.dash-app .dash-empty,
html[data-theme="dark"] body.dash-app .dash-empty-inline,
html[data-theme="dark"] body.dash-app .home-empty-card,
html[data-theme="dark"] body.dash-app .cal-inline-empty,
html[data-theme="dark"] body.dash-app .team-empty-hint {
    background: rgba(21, 21, 20, 0.3);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Raised neumorphism: cards and chrome emerge; fields remain slightly inset. */
html[data-ui-style="neumorph-emboss"] body.dash-app {
    --quiet-canvas: #e8e7e5;
    --quiet-canvas-deep: #dedcd9;
    --quiet-surface: #e8e7e5;
    --quiet-surface-solid: #e8e7e5;
    --quiet-surface-muted: #e8e7e5;
    --quiet-line: rgba(255, 255, 255, 0.18);
    --quiet-white-line: rgba(255, 255, 255, 0.48);
    --quiet-shadow: 10px 10px 22px rgba(172, 169, 164, 0.46), -10px -10px 22px rgba(255, 255, 255, 0.94);
    --quiet-shadow-hover: 13px 13px 26px rgba(172, 169, 164, 0.5), -13px -13px 26px rgba(255, 255, 255, 0.98);
    --quiet-press: inset 7px 7px 14px rgba(173, 170, 165, 0.42), inset -7px -7px 14px rgba(255, 255, 255, 0.83);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-topbar,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-login-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-command-header,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-form-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-inline-filters,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-stat-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-priority-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-surface,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-upcoming-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-shortcuts-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-article-shell,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-toolbar,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-week-day,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-day-board,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-agenda-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .bacheca-pane,
html[data-ui-style="neumorph-emboss"] body.dash-app .lavagna-section,
html[data-ui-style="neumorph-emboss"] body.dash-app .compete-panel,
html[data-ui-style="neumorph-emboss"] body.dash-app .team-member-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .team-writer-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .account-user-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .rubrica-row,
html[data-ui-style="neumorph-emboss"] body.dash-app .giochi-manager-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .feedback-card,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-modal {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: var(--quiet-shadow);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-card::before,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-form-panel::before,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-priority-panel::before,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-surface::before,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-upcoming-panel::before,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-shortcuts-panel::before {
    content: none;
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-icon-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-mobile-toggle,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-notif-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-bg-tasks-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-topbar-site,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn-logout,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-profile-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-focus-switch button,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-tabs button,
html[data-ui-style="neumorph-emboss"] body.dash-app .appearance-choice,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-shortcut,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-task-row {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 5px 5px 11px rgba(172, 169, 164, 0.4), -5px -5px 11px rgba(255, 255, 255, 0.88);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn:not(.dash-icon-btn),
html[data-ui-style="neumorph-emboss"] body.dash-app .home-focus-switch button,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-tabs button {
    border-radius: 999px;
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-icon-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-mobile-toggle,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-notif-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-bg-tasks-btn,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-task-icon,
html[data-ui-style="neumorph-emboss"] body.dash-app .appearance-choice-icon {
    border-radius: 19px;
}

html[data-ui-style="neumorph-emboss"] body.dash-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-ui-style="neumorph-emboss"] body.dash-app select,
html[data-ui-style="neumorph-emboss"] body.dash-app textarea,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-table,
html[data-ui-style="neumorph-emboss"] body.dash-app .lavagna-board-v2,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-tabs,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-tabs,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-view-switch,
html[data-ui-style="neumorph-emboss"] body.dash-app .segment-control,
html[data-ui-style="neumorph-emboss"] body.dash-app .editor-mode-switch,
html[data-ui-style="neumorph-emboss"] body.dash-app .compete-tabs {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: var(--quiet-press);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn-primary,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn-action {
    background: var(--quiet-red);
    border-color: var(--quiet-red);
    box-shadow: 6px 6px 12px rgba(135, 53, 62, 0.28), -4px -4px 10px rgba(255, 255, 255, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .dash-btn:active:not(:disabled),
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-icon-btn:active,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-shortcut:active,
html[data-ui-style="neumorph-emboss"] body.dash-app .appearance-choice:active {
    box-shadow: var(--quiet-press);
}

html[data-ui-style="neumorph-emboss"] body.dash-app .home-focus-switch button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .home-work-tabs button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .dash-tabs button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .cal-view-switch button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .segment-control button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .editor-mode-switch button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .compete-tabs button.active,
html[data-ui-style="neumorph-emboss"] body.dash-app .appearance-choice.is-selected {
    background: var(--quiet-red-soft);
    box-shadow: var(--quiet-press);
}

/* Inset neumorphism: the workspace is primarily a set of calm valleys. */
html[data-ui-style="neumorph-deboss"] body.dash-app {
    --quiet-canvas: #e8e7e5;
    --quiet-canvas-deep: #dedcd9;
    --quiet-surface: #e8e7e5;
    --quiet-surface-solid: #e8e7e5;
    --quiet-surface-muted: #e8e7e5;
    --quiet-line: rgba(255, 255, 255, 0.16);
    --quiet-white-line: rgba(255, 255, 255, 0.34);
    --quiet-shadow: inset 9px 9px 18px rgba(172, 169, 164, 0.42), inset -9px -9px 18px rgba(255, 255, 255, 0.86);
    --quiet-shadow-hover: inset 10px 10px 20px rgba(172, 169, 164, 0.46), inset -10px -10px 20px rgba(255, 255, 255, 0.9);
    --quiet-press: inset 7px 7px 14px rgba(173, 170, 165, 0.44), inset -7px -7px 14px rgba(255, 255, 255, 0.84);
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-topbar,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-command-header,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-form-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-inline-filters,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-stat-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-priority-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-surface,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-upcoming-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-shortcuts-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-toolbar,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-week-day,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-day-board,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-agenda-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .bacheca-pane,
html[data-ui-style="neumorph-deboss"] body.dash-app .lavagna-section,
html[data-ui-style="neumorph-deboss"] body.dash-app .compete-panel,
html[data-ui-style="neumorph-deboss"] body.dash-app .team-member-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .team-writer-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .account-user-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .rubrica-row,
html[data-ui-style="neumorph-deboss"] body.dash-app .giochi-manager-card,
html[data-ui-style="neumorph-deboss"] body.dash-app .feedback-card {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: var(--quiet-shadow);
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-card::before,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-form-panel::before,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-priority-panel::before,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-surface::before,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-upcoming-panel::before,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-shortcuts-panel::before {
    content: none;
}

html[data-ui-style="neumorph-deboss"] body.dash-app .home-task-row,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-shortcut,
html[data-ui-style="neumorph-deboss"] body.dash-app .appearance-choice,
html[data-ui-style="neumorph-deboss"] body.dash-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-ui-style="neumorph-deboss"] body.dash-app select,
html[data-ui-style="neumorph-deboss"] body.dash-app textarea,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-table,
html[data-ui-style="neumorph-deboss"] body.dash-app .lavagna-board-v2,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-tabs,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-tabs,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-view-switch,
html[data-ui-style="neumorph-deboss"] body.dash-app .segment-control,
html[data-ui-style="neumorph-deboss"] body.dash-app .editor-mode-switch,
html[data-ui-style="neumorph-deboss"] body.dash-app .compete-tabs {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: var(--quiet-press);
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-icon-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-mobile-toggle,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-notif-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-bg-tasks-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-topbar-site,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-btn-logout,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-profile-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-focus-switch button,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-tabs button {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 5px 5px 11px rgba(172, 169, 164, 0.4), -5px -5px 11px rgba(255, 255, 255, 0.88);
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-btn:not(.dash-icon-btn),
html[data-ui-style="neumorph-deboss"] body.dash-app .home-focus-switch button,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-tabs button {
    border-radius: 999px;
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-icon-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-mobile-toggle,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-notif-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-bg-tasks-btn,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-task-icon {
    border-radius: 19px;
}

html[data-ui-style="neumorph-deboss"] body.dash-app .dash-btn-primary,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-btn-action {
    background: var(--quiet-red);
    border-color: var(--quiet-red);
    box-shadow: 6px 6px 12px rgba(135, 53, 62, 0.28), -4px -4px 10px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-ui-style="neumorph-deboss"] body.dash-app .home-focus-switch button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .home-work-tabs button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .dash-tabs button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .cal-view-switch button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .segment-control button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .editor-mode-switch button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .compete-tabs button.active,
html[data-ui-style="neumorph-deboss"] body.dash-app .appearance-choice.is-selected {
    background: var(--quiet-red-soft);
    box-shadow: 4px 4px 9px rgba(172, 169, 164, 0.32), -4px -4px 9px rgba(255, 255, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

/* Dark tactile variants share the same geometry but adapt their light source. */
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app {
    --quiet-canvas: #242321;
    --quiet-canvas-deep: #1e1d1c;
    --quiet-surface: #242321;
    --quiet-surface-solid: #242321;
    --quiet-surface-muted: #242321;
    --quiet-line: rgba(255, 255, 255, 0.045);
    --quiet-white-line: rgba(255, 255, 255, 0.065);
    --quiet-shadow: 10px 10px 22px rgba(10, 10, 9, 0.7), -10px -10px 22px rgba(67, 64, 60, 0.42);
    --quiet-shadow-hover: 13px 13px 26px rgba(10, 10, 9, 0.76), -13px -13px 26px rgba(67, 64, 60, 0.48);
    --quiet-press: inset 7px 7px 14px rgba(9, 9, 8, 0.7), inset -7px -7px 14px rgba(65, 62, 58, 0.42);
}

html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app {
    --quiet-canvas: #242321;
    --quiet-canvas-deep: #1e1d1c;
    --quiet-surface: #242321;
    --quiet-surface-solid: #242321;
    --quiet-surface-muted: #242321;
    --quiet-line: rgba(255, 255, 255, 0.045);
    --quiet-white-line: rgba(255, 255, 255, 0.055);
    --quiet-shadow: inset 9px 9px 18px rgba(9, 9, 8, 0.72), inset -9px -9px 18px rgba(66, 63, 59, 0.38);
    --quiet-shadow-hover: inset 10px 10px 20px rgba(9, 9, 8, 0.76), inset -10px -10px 20px rgba(66, 63, 59, 0.42);
    --quiet-press: inset 7px 7px 14px rgba(9, 9, 8, 0.7), inset -7px -7px 14px rgba(65, 62, 58, 0.4);
}

html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-topbar,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-login-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-command-header,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-form-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-inline-filters,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-stat-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-priority-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-work-surface,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-upcoming-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-shortcuts-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .cal-toolbar,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .cal-week-day,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .cal-day-board,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .cal-agenda-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .bacheca-pane,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .lavagna-section,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .compete-panel,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .team-member-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .team-writer-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .account-user-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .rubrica-row,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .giochi-manager-card,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .feedback-card {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.04);
    box-shadow: var(--quiet-shadow);
}

html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-btn,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-icon-btn,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-mobile-toggle,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-notif-btn,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-bg-tasks-btn,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-topbar-site,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-btn-logout,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-profile-btn,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-focus-switch button,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-work-tabs button,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .appearance-choice,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-shortcut,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .home-task-row {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.045);
    box-shadow: 5px 5px 11px rgba(9, 9, 8, 0.6), -5px -5px 11px rgba(62, 59, 55, 0.34);
}

html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app select,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app textarea,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .dash-table,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .lavagna-board-v2,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .home-work-tabs,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .dash-tabs,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .cal-view-switch,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .segment-control,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .editor-mode-switch,
html[data-theme="dark"][data-ui-style="neumorph-emboss"] body.dash-app .compete-tabs,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .home-task-row,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .home-shortcut,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .appearance-choice,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app select,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app textarea,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .dash-table,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .lavagna-board-v2,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .home-work-tabs,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .dash-tabs,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .cal-view-switch,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .segment-control,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .editor-mode-switch,
html[data-theme="dark"][data-ui-style="neumorph-deboss"] body.dash-app .compete-tabs {
    background: var(--quiet-canvas);
    border-color: rgba(255, 255, 255, 0.035);
    box-shadow: var(--quiet-press);
}

html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-btn-primary,
html[data-theme="dark"][data-ui-style^="neumorph"] body.dash-app .dash-btn-action {
    background: #aa4c56;
    border-color: #aa4c56;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.36), -3px -3px 8px rgba(98, 67, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] body.dash-app .appearance-choice.is-selected,
html[data-theme="dark"] body.dash-app .home-focus-switch button.active {
    background: var(--quiet-red-soft);
    border-color: rgba(240, 154, 160, 0.24);
}

/* Keep tactile depth on the primary surfaces without boxing every nested group. */
html[data-ui-style^="neumorph"] body.dash-app .home-command-header,
html[data-ui-style^="neumorph"] body.dash-app .home-priority-panel,
html[data-ui-style^="neumorph"] body.dash-app .home-work-surface,
html[data-ui-style^="neumorph"] body.dash-app .home-upcoming-panel,
html[data-ui-style^="neumorph"] body.dash-app .home-shortcuts-panel {
    border-color: transparent;
}

html[data-ui-style^="neumorph"] body.dash-app .home-task-row,
html[data-ui-style^="neumorph"] body.dash-app .home-shortcut,
html[data-ui-style^="neumorph"] body.dash-app .home-work-tabs,
html[data-ui-style^="neumorph"] body.dash-app .dash-tabs,
html[data-ui-style^="neumorph"] body.dash-app .cal-view-switch,
html[data-ui-style^="neumorph"] body.dash-app .segment-control,
html[data-ui-style^="neumorph"] body.dash-app .editor-mode-switch,
html[data-ui-style^="neumorph"] body.dash-app .compete-tabs {
    border-color: transparent;
    box-shadow: none;
}

html[data-ui-style^="neumorph"] body.dash-app .home-task-row:hover,
html[data-ui-style^="neumorph"] body.dash-app .home-shortcut:hover {
    background: var(--quiet-surface-muted);
    box-shadow: none;
}

html[data-theme="dark"] body.dash-app .home-work-tabs em {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body.dash-app .dash-btn-danger {
    background: var(--quiet-danger-soft);
    border-color: rgba(238, 144, 144, 0.28);
    color: #ffb1b1;
}

html[data-theme="dark"] body.dash-app .dash-btn-success {
    background: #315442;
    border-color: #466f5a;
    color: #f3fff7;
}

@media (max-width: 700px) {
    body.dash-app .appearance-style-grid,
    body.dash-app .appearance-theme-grid {
        grid-template-columns: 1fr;
    }

    body.dash-app .appearance-settings-heading {
        display: grid;
        gap: 0.2rem;
    }

    body.dash-app .appearance-settings-hint { text-align: left; }
    body.dash-app .appearance-choice { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    body.dash-app .appearance-choice { transition: none; }
}