.dkt-app,
.dkt-account-shell,
.dkt-onboarding-shell {
    --dkt-bg: #f4f7fb;
    --dkt-surface: #ffffff;
    --dkt-surface-soft: #eef4fb;
    --dkt-text: #1b2738;
    --dkt-muted: #5c6979;
    --dkt-border: #d8e0ea;
    --dkt-accent: #365f9d;
    --dkt-accent-strong: #244b84;
    --dkt-success: #176b37;
    --dkt-warning: #8a5700;
    --dkt-error: #9f2929;
    --dkt-focus: #b44f00;
    --dkt-font-scale: 1;
    box-sizing: border-box;
    max-width: 1180px;
    margin: 24px auto;
    padding: 24px;
    color: var(--dkt-text);
    font-size: calc(18px * var(--dkt-font-scale));
    line-height: 1.55;
    background: var(--dkt-bg);
    border-radius: 24px;
}

.dkt-app *,
.dkt-app *::before,
.dkt-app *::after,
.dkt-account-shell *,
.dkt-account-shell *::before,
.dkt-account-shell *::after,
.dkt-onboarding-shell *,
.dkt-onboarding-shell *::before,
.dkt-onboarding-shell *::after {
    box-sizing: border-box;
}

.dkt-app button,
.dkt-app select,
.dkt-app input,
.dkt-account-shell button,
.dkt-account-shell select,
.dkt-account-shell input,
.dkt-onboarding-shell button,
.dkt-onboarding-shell select,
.dkt-onboarding-shell input {
    font: inherit;
}

.dkt-skip-link {
    position: absolute;
    left: -9999px;
    top: 10px;
    z-index: 9999;
    padding: 12px 16px;
    background: #fff;
    color: #000;
}

.dkt-skip-link:focus {
    left: 10px;
}

.dkt-app :focus-visible,
.dkt-account-shell :focus-visible,
.dkt-onboarding-shell :focus-visible {
    outline: 4px solid var(--dkt-focus);
    outline-offset: 3px;
}

.dkt-app a,
.dkt-account-shell a,
.dkt-onboarding-shell a {
    color: var(--dkt-accent-strong);
}

.dkt-app__eyebrow {
    margin: 0;
    color: var(--dkt-accent);
    font-size: .8em;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dkt-notice {
    margin: 18px 0;
    padding: 16px 18px;
    border: 2px solid var(--dkt-border);
    border-radius: 12px;
    font-weight: 700;
}

.dkt-notice--success {
    border-color: #77b98c;
    background: #eaf7ee;
    color: #164c2b;
}

.dkt-notice--warning {
    border-color: #d5ad60;
    background: #fff7e6;
    color: #704600;
}

.dkt-notice--error {
    border-color: #d48b8b;
    background: #fff0f0;
    color: #792020;
}

/* Guest account screens. */
.dkt-account-shell {
    display: grid;
    min-height: 70vh;
    place-items: center;
}

.dkt-account-card {
    width: min(100%, 760px);
    padding: 34px;
    border: 1px solid var(--dkt-border);
    border-radius: 22px;
    background: var(--dkt-surface);
    box-shadow: 0 12px 38px rgba(31, 48, 72, .09);
}

.dkt-account-brand {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.dkt-account-brand__icon {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    flex: 0 0 68px;
    border-radius: 18px;
    background: var(--dkt-surface-soft);
    font-size: 34px;
}

.dkt-account-brand h1,
.dkt-account-card h2 {
    margin: 4px 0 8px;
    color: var(--dkt-text);
    line-height: 1.2;
}

.dkt-account-brand h1 {
    font-size: 1.8em;
}

.dkt-account-card h2 {
    font-size: 1.45em;
}

.dkt-account-intro > p {
    color: var(--dkt-muted);
}

.dkt-big-actions {
    display: grid;
    gap: 16px;
    margin-top: 26px;
}

.dkt-primary-action,
.dkt-secondary-action {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 2px solid var(--dkt-accent);
    border-radius: 16px;
    text-decoration: none;
}

.dkt-primary-action {
    background: var(--dkt-accent);
    color: #fff !important;
}

.dkt-secondary-action {
    background: var(--dkt-surface);
    color: var(--dkt-accent-strong) !important;
}

.dkt-primary-action span,
.dkt-secondary-action span {
    font-size: 1.7em;
}

.dkt-account-form {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.dkt-account-form label,
.dkt-step-content label {
    color: var(--dkt-text);
}

.dkt-account-form input[type="text"],
.dkt-account-form input[type="email"],
.dkt-account-form input[type="password"],
.dkt-step-content input[type="text"],
.dkt-step-content select {
    width: 100%;
    min-height: 54px;
    padding: 11px 13px;
    border: 2px solid #b8c4d3;
    border-radius: 11px;
    background: #fff;
    color: #172033;
}

.dkt-field-help,
.dkt-help-text {
    margin: 0 0 10px;
    color: var(--dkt-muted);
    font-size: .9em;
}

.dkt-password-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.dkt-password-toggle {
    min-width: 110px;
    border: 2px solid var(--dkt-border);
    border-radius: 11px;
    background: var(--dkt-surface-soft);
    color: var(--dkt-text);
    cursor: pointer;
    font-weight: 700;
}

.dkt-privacy-summary {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface-soft);
}

.dkt-privacy-summary summary {
    cursor: pointer;
    font-weight: 800;
}

.dkt-check-row,
.dkt-security-choice {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 12px 0;
}

.dkt-check-row input,
.dkt-security-choice input {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
}

.dkt-form-submit,
.dkt-wizard-back {
    min-height: 56px;
    padding: 12px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
}

.dkt-form-submit {
    border: 0;
    background: var(--dkt-accent);
    color: #fff;
}

.dkt-wizard-back {
    border: 2px solid var(--dkt-border);
    background: var(--dkt-surface);
    color: var(--dkt-text);
}

.dkt-account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 20px 0 0;
}

.dkt-account-links a,
.dkt-small-link {
    font-weight: 700;
}

.dkt-login-register {
    margin: 22px 0 0;
    padding: 18px;
    border: 2px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface-soft);
}

.dkt-login-register h3 {
    margin: 0 0 8px;
    color: var(--dkt-text);
    font-size: 1.18em;
    line-height: 1.3;
}

.dkt-login-register p {
    margin: 12px 0 0;
    color: var(--dkt-muted);
    font-size: .9em;
}

.dkt-login-register__button {
    width: 100%;
    box-sizing: border-box;
}

.dkt-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 4px;
    color: var(--dkt-muted);
    font-size: .9em;
    font-weight: 700;
    text-align: center;
}

.dkt-login-divider::before,
.dkt-login-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--dkt-border);
}

.dkt-login-divider span {
    flex: 0 1 auto;
}

.dkt-private-note,
.dkt-resume-note {
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--dkt-border);
    color: var(--dkt-muted);
    font-size: .88em;
}

.dkt-known-device {
    display: grid;
    width: 56px;
    height: 56px;
    margin: 0 0 12px;
    place-items: center;
    border-radius: 50%;
    background: #eaf7ee;
    color: var(--dkt-success);
    font-size: 30px;
    font-weight: 900;
}

.dkt-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Onboarding wizard. */
.dkt-onboarding-shell {
    max-width: 980px;
}

.dkt-onboarding-card {
    padding: 34px;
    border: 1px solid var(--dkt-border);
    border-radius: 22px;
    background: var(--dkt-surface);
    box-shadow: 0 12px 38px rgba(31, 48, 72, .09);
}

.dkt-onboarding-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.dkt-onboarding-header h1 {
    margin: 4px 0 0;
    color: var(--dkt-text);
    font-size: 1.9em;
    line-height: 1.2;
}

.dkt-progress {
    margin: 24px 0;
}

.dkt-progress p {
    margin: 0 0 8px;
    font-weight: 800;
}

.dkt-progress__track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7f1;
}

.dkt-progress__track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dkt-accent);
    transition: width .2s ease;
}

.dkt-step-content {
    padding: 28px;
    border: 1px solid var(--dkt-border);
    border-radius: 18px;
    background: var(--dkt-surface-soft);
}

.dkt-step-content h2 {
    margin: 4px 0 12px;
    color: var(--dkt-text);
    font-size: 1.55em;
}

.dkt-step-icon {
    font-size: 42px;
}

.dkt-info-panel {
    margin: 18px 0;
    padding: 16px 18px;
    border-left: 6px solid var(--dkt-accent);
    border-radius: 10px;
    background: var(--dkt-surface);
}

.dkt-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
}

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

.dkt-choice-card {
    position: relative;
    display: flex;
    min-height: 210px;
    box-sizing: border-box;
    border: 2px solid var(--dkt-border);
    border-radius: 16px;
    background: var(--dkt-surface);
    cursor: pointer;
}

/*
 * Das echte Radiofeld bleibt für Tastatur und Screenreader bedienbar,
 * wird aber visuell ausgeblendet. Dadurch können Themes seine Position
 * nicht mehr verändern oder es aus der Auswahlkarte herausdrücken.
 */
.dkt-choice-card input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dkt-choice-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 2px solid var(--dkt-muted);
    border-radius: 50%;
    background: var(--dkt-surface);
    pointer-events: none;
}

.dkt-choice-card:has(input:checked)::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dkt-accent);
    pointer-events: none;
}

.dkt-choice-card:has(input:checked) {
    border-color: var(--dkt-accent);
    box-shadow: 0 0 0 3px rgba(54, 95, 157, .14);
}

.dkt-choice-card:has(input:focus-visible) {
    outline: 4px solid rgba(54, 95, 157, .28);
    outline-offset: 3px;
}

.dkt-choice-card__content {
    display: flex;
    width: 100%;
    min-height: 210px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 10px;
    padding: 28px 54px 24px 22px;
}

.dkt-choice-card__content strong {
    color: var(--dkt-text);
    font-size: 1.2em;
}

.dkt-choice-card__content small {
    color: var(--dkt-muted);
    font-size: .9em;
    line-height: 1.55;
}

.dkt-choice-card__content em {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    color: var(--dkt-accent-strong);
    font-size: .82em;
    font-style: normal;
    font-weight: 800;
    line-height: 1.4;
}

.dkt-preview-senior .dkt-choice-card__content strong,
.dkt-preview-contrast .dkt-choice-card__content strong {
    font-size: 1.35em;
}

.dkt-preview-contrast {
    border-color: #172033;
}

.dkt-mode-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 24px 0 0;
    padding: 18px;
    border: 2px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface);
}

.dkt-mode-fieldset legend {
    padding: 0 8px;
    font-weight: 800;
}

.dkt-mode-fieldset label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dkt-mode-fieldset input {
    width: 21px;
    height: 21px;
}

.dkt-security-choice {
    padding: 20px;
    border: 2px solid var(--dkt-border);
    border-radius: 15px;
    background: var(--dkt-surface);
}

.dkt-security-choice span {
    display: grid;
    gap: 5px;
}

.dkt-security-choice small {
    color: var(--dkt-muted);
}

.dkt-confirmed-line {
    color: var(--dkt-success);
    font-weight: 800;
}

.dkt-summary-list {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.dkt-summary-list div {
    display: grid;
    grid-template-columns: minmax(130px, .5fr) 1fr;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--dkt-surface);
}

.dkt-summary-list dt {
    font-weight: 800;
}

.dkt-summary-list dd {
    margin: 0;
}

.dkt-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
}

.dkt-wizard-actions .dkt-form-submit {
    margin-left: auto;
    min-width: 180px;
}

/* Diary dashboard. */
.dkt-app__header,
.dkt-display-controls,
.dkt-dashboard-card,
.dkt-development-note {
    border: 1px solid var(--dkt-border);
    background: var(--dkt-surface);
    box-shadow: 0 8px 30px rgba(31, 48, 72, .07);
}

.dkt-app__header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    padding: 32px;
    border-radius: 20px;
}

.dkt-app__header h1 {
    margin: 4px 0 10px;
    color: var(--dkt-text);
    font-size: 2em;
    line-height: 1.15;
}

.dkt-app__header-actions {
    display: grid;
    min-width: 175px;
    gap: 10px;
}

.dkt-app__security {
    padding: 16px;
    text-align: center;
    border-radius: 16px;
    background: #eaf6ee;
    color: #205b35;
}

.dkt-app__security span,
.dkt-app__security strong {
    display: block;
}

.dkt-app__security span {
    font-size: 2em;
}

.dkt-logout-link {
    padding: 9px 12px;
    border: 1px solid var(--dkt-border);
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}

.dkt-display-controls {
    margin-top: 20px;
    padding: 24px;
    border-radius: 18px;
}

.dkt-display-controls h2 {
    margin: 0;
}

.dkt-display-controls p {
    color: var(--dkt-muted);
}

.dkt-control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.dkt-control-button,
.dkt-font-scale select {
    min-height: 48px;
    padding: 10px 16px;
    border: 2px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface);
    color: var(--dkt-text);
    cursor: pointer;
}

.dkt-control-button:hover,
.dkt-control-button[aria-pressed="true"] {
    border-color: var(--dkt-accent);
    background: #eaf1fb;
}

.dkt-font-scale {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-weight: 700;
}

.dkt-save-status {
    min-height: 1.5em;
    margin-bottom: 0;
    font-weight: 700;
}

.dkt-dashboard {
    margin-top: 22px;
}

.dkt-new-entry {
    display: flex;
    width: 100%;
    min-height: 110px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 24px;
    border: 0;
    border-radius: 20px;
    background: var(--dkt-accent);
    color: #fff;
    text-align: center;
}

.dkt-new-entry span {
    font-size: 2em;
}

.dkt-new-entry strong {
    font-size: 1.35em;
}

.dkt-new-entry small {
    flex-basis: 100%;
}

.dkt-new-entry:disabled {
    opacity: .78;
    cursor: not-allowed;
}

.dkt-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.dkt-dashboard-card {
    padding: 26px;
    border-radius: 18px;
}

.dkt-dashboard-card__icon {
    font-size: 2.1em;
}

.dkt-dashboard-card h2 {
    margin: 8px 0;
    color: var(--dkt-text);
}

.dkt-dashboard-card p {
    margin: 0;
    color: var(--dkt-muted);
}

.dkt-development-note {
    margin-top: 20px;
    padding: 24px;
    border-left: 7px solid var(--dkt-accent);
    border-radius: 14px;
}

.dkt-development-note h2 {
    margin-top: 0;
}

@media (max-width: 820px) {
    .dkt-choice-grid,
    .dkt-choice-grid--three,
    .dkt-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .dkt-onboarding-header,
    .dkt-app__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dkt-app__header-actions {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .dkt-app,
    .dkt-account-shell,
    .dkt-onboarding-shell {
        margin: 0;
        padding: 10px;
        border-radius: 0;
    }

    .dkt-account-card,
    .dkt-onboarding-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .dkt-account-brand {
        align-items: flex-start;
    }

    .dkt-account-brand__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        font-size: 28px;
    }

    .dkt-password-field {
        grid-template-columns: 1fr;
    }

    .dkt-password-toggle {
        min-height: 48px;
    }

    .dkt-step-content,
    .dkt-app__header,
    .dkt-display-controls,
    .dkt-dashboard-card,
    .dkt-development-note {
        padding: 22px 18px;
    }

    .dkt-summary-list div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .dkt-wizard-actions {
        flex-direction: column-reverse;
    }

    .dkt-wizard-actions .dkt-form-submit,
    .dkt-wizard-actions .dkt-wizard-back {
        width: 100%;
        margin: 0;
    }

    .dkt-control-button {
        flex: 1 1 145px;
    }
}

/* M005: personal cloud storage. */
.dkt-storage-panel {
    margin: 24px 0;
    padding: 28px;
    border: 2px solid var(--dkt-border);
    border-radius: 20px;
    background: var(--dkt-surface);
}

.dkt-storage-panel__heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.dkt-storage-panel__heading h2 {
    margin: 4px 0 8px;
    font-size: 1.45em;
    line-height: 1.2;
}

.dkt-storage-panel__heading p:last-child {
    margin-bottom: 0;
    color: var(--dkt-muted);
}

.dkt-storage-badge {
    display: inline-flex;
    min-width: 130px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 2px solid var(--dkt-border);
    border-radius: 999px;
    background: var(--dkt-surface-soft);
    color: var(--dkt-text);
    font-weight: 800;
    text-align: center;
}

.dkt-storage-message {
    margin: 22px 0;
    padding: 15px 17px;
    border: 2px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-message.is-success {
    border-color: #77b98c;
    background: #eaf7ee;
    color: #164c2b;
}

.dkt-storage-message.is-error {
    border-color: #d48b8b;
    background: #fff0f0;
    color: #792020;
}

.dkt-storage-message.is-warning {
    border-color: #d5ad60;
    background: #fff7e6;
    color: #704600;
}

.dkt-storage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.dkt-storage-summary > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-summary dt {
    color: var(--dkt-muted);
    font-size: .86em;
    font-weight: 700;
}

.dkt-storage-summary dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.dkt-storage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.dkt-primary-button,
.dkt-secondary-button,
.dkt-danger-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
}

.dkt-primary-button {
    border: 2px solid var(--dkt-accent);
    background: var(--dkt-accent);
    color: #fff;
}

.dkt-secondary-button {
    border: 2px solid var(--dkt-accent);
    background: var(--dkt-surface);
    color: var(--dkt-accent-strong) !important;
}

.dkt-danger-button {
    border: 2px solid #a33b3b;
    background: var(--dkt-surface);
    color: #8e2727;
}

.dkt-primary-button:disabled,
.dkt-danger-button:disabled,
.dkt-secondary-button:disabled {
    cursor: wait;
    opacity: .62;
}

.dkt-storage-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dkt-storage-form fieldset:disabled {
    opacity: .62;
}

.dkt-storage-form legend {
    margin-bottom: 14px;
    color: var(--dkt-text);
    font-size: 1.1em;
    font-weight: 800;
}

.dkt-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.dkt-provider-card {
    position: relative;
    display: grid;
    min-height: 150px;
    align-content: start;
    gap: 7px;
    padding: 22px 20px 18px 58px;
    border: 2px solid var(--dkt-border);
    border-radius: 15px;
    background: var(--dkt-surface);
    color: var(--dkt-text);
    cursor: pointer;
}

.dkt-provider-card input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.dkt-provider-card__marker {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 24px;
    height: 24px;
    border: 2px solid #607086;
    border-radius: 50%;
    background: var(--dkt-surface);
}

.dkt-provider-card__marker::after {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--dkt-accent);
    content: '';
    opacity: 0;
}

.dkt-provider-card:has(input:checked) {
    border-color: var(--dkt-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dkt-accent) 25%, transparent);
}

.dkt-provider-card input:checked + .dkt-provider-card__marker::after {
    opacity: 1;
}

.dkt-provider-card:has(input:focus-visible) {
    outline: 4px solid var(--dkt-focus);
    outline-offset: 3px;
}

.dkt-provider-card__icon {
    font-size: 1.8em;
    line-height: 1;
}

.dkt-provider-card strong {
    font-size: 1.08em;
}

.dkt-provider-card small {
    color: var(--dkt-muted);
    font-size: .88em;
}

.dkt-storage-form > fieldset > label {
    display: block;
    margin-top: 15px;
}

.dkt-storage-form input[type="url"],
.dkt-storage-form input[type="text"],
.dkt-storage-form input[type="password"] {
    width: 100%;
    min-height: 54px;
    margin-top: 6px;
    padding: 11px 13px;
    border: 2px solid #b8c4d3;
    border-radius: 11px;
    background: #fff;
    color: #172033;
}

.dkt-storage-help {
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-help summary {
    cursor: pointer;
    font-weight: 800;
}

.dkt-storage-security-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin: 18px 0;
    padding: 16px;
    border-left: 5px solid var(--dkt-accent);
    border-radius: 10px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-security-note span {
    font-size: 1.5em;
}

.dkt-storage-security-note p {
    margin: 0;
}

@media (max-width: 720px) {
    .dkt-storage-panel {
        padding: 20px;
    }

    .dkt-storage-panel__heading {
        flex-direction: column;
    }

    .dkt-storage-badge {
        align-self: stretch;
    }

    .dkt-storage-summary,
    .dkt-provider-grid {
        grid-template-columns: 1fr;
    }

    .dkt-storage-actions > * {
        width: 100%;
    }
}

.dkt-storage-consent {
    display: flex !important;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 0 !important;
    padding: 15px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-consent input {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 2px 0 0;
}

/* M005.1: account-free protected test storage. */
.dkt-provider-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dkt-provider-card--test {
    grid-column: 1 / -1;
    min-height: 138px;
    border-color: color-mix(in srgb, var(--dkt-accent) 58%, var(--dkt-border));
    background: var(--dkt-surface-soft);
}

.dkt-provider-card__recommended {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eaf7ee;
    color: #164c2b;
    font-size: .8em;
    font-weight: 800;
}

.dkt-storage-credentials {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface-soft);
}

.dkt-storage-credentials > label {
    display: block;
    margin-top: 15px;
}

.dkt-storage-credentials > label:first-child {
    margin-top: 0;
}

.dkt-storage-credentials[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .dkt-provider-grid--three {
        grid-template-columns: 1fr;
    }

    .dkt-provider-card--test {
        grid-column: auto;
    }
}

/* M006: OAuth provider cards and local security check. */
.dkt-provider-card--oauth {
    min-height: 160px;
}

.dkt-provider-card.is-unavailable {
    cursor: not-allowed;
    opacity: .68;
    filter: grayscale(.12);
}

.dkt-provider-card.is-unavailable:hover {
    transform: none;
}

.dkt-provider-card__availability {
    display: inline-flex;
    width: fit-content;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--dkt-text);
    font-size: .78em;
    font-weight: 800;
}

.dkt-provider-card.is-unavailable .dkt-provider-card__availability {
    background: var(--dkt-surface-soft);
    color: var(--dkt-muted);
}

.dkt-oauth-self-test {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 20px 0;
    padding: 18px;
    border: 2px dashed color-mix(in srgb, var(--dkt-accent) 55%, var(--dkt-border));
    border-radius: 14px;
    background: var(--dkt-surface-soft);
}

.dkt-oauth-self-test p {
    margin: 6px 0 0;
    color: var(--dkt-muted);
}

@media (max-width: 720px) {
    .dkt-oauth-self-test {
        grid-template-columns: 1fr;
    }

    .dkt-oauth-self-test button {
        width: 100%;
    }
}

/* M007: encrypted text diary. */
.dkt-diary-module {
    margin-bottom: 24px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--dkt-border);
    border-radius: 20px;
    background: var(--dkt-surface);
    box-shadow: 0 12px 34px rgba(37, 55, 82, .08);
}

.dkt-diary-module__header,
.dkt-entry-editor__header,
.dkt-entry-editor__footer,
.dkt-entry-card__head,
.dkt-draft-banner {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
}

.dkt-diary-module__header h2,
.dkt-entry-editor__header h3,
.dkt-entry-card h3 {
    margin: 4px 0 8px;
}

.dkt-encryption-badge,
.dkt-entry-card__private {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--dkt-success) 45%, var(--dkt-border));
    border-radius: 999px;
    color: var(--dkt-success);
    background: color-mix(in srgb, var(--dkt-success) 9%, var(--dkt-surface));
    font-size: .82em;
    font-weight: 800;
}

.dkt-diary-status,
.dkt-entry-editor__footer [data-dkt-entry-save-status] {
    min-height: 1.7em;
    margin: 14px 0;
    color: var(--dkt-muted);
    font-weight: 700;
}

.dkt-diary-status.is-success,
[data-dkt-entry-save-status].is-success {
    color: var(--dkt-success);
}

.dkt-diary-status.is-warning,
[data-dkt-entry-save-status].is-warning {
    color: var(--dkt-warning);
}

.dkt-diary-status.is-error,
[data-dkt-entry-save-status].is-error {
    color: var(--dkt-error);
}

.dkt-diary-gate,
.dkt-key-panel {
    padding: clamp(22px, 4vw, 38px);
    border: 2px solid var(--dkt-border);
    border-radius: 18px;
    background: var(--dkt-surface-soft);
    text-align: center;
}

.dkt-diary-gate > span:first-child {
    display: block;
    margin-bottom: 10px;
    font-size: 2.5em;
}

.dkt-diary-gate h3,
.dkt-key-panel h3 {
    margin: 0 0 10px;
}

.dkt-primary-link {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--dkt-accent);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

.dkt-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border: 5px solid var(--dkt-border);
    border-top-color: var(--dkt-accent);
    border-radius: 50%;
    animation: dkt-spin .9s linear infinite;
}

@keyframes dkt-spin {
    to { transform: rotate(360deg); }
}

.dkt-key-panel {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.dkt-key-panel > .dkt-primary-button {
    margin-top: 10px;
}

.dkt-recovery-created {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--dkt-border);
}

.dkt-secret-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin: 12px 0;
}

.dkt-secret-row input,
.dkt-key-panel > input,
.dkt-entry-editor input,
.dkt-entry-editor select,
.dkt-entry-editor textarea,
.dkt-entry-search input {
    width: 100%;
    min-height: 50px;
    padding: 10px 12px;
    border: 2px solid var(--dkt-border);
    border-radius: 10px;
    color: var(--dkt-text);
    background: var(--dkt-surface);
    font: inherit;
}

.dkt-entry-editor textarea {
    min-height: 260px;
    resize: vertical;
}


.dkt-recovery-actions {
    margin: 12px 0 6px;
}

.dkt-recovery-local-note {
    margin: 8px 0 16px;
    color: var(--dkt-muted);
    font-size: .9em;
}

.dkt-confirm-row,
.dkt-entry-options label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0;
    font-weight: 700;
}

.dkt-confirm-row input,
.dkt-entry-options input {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.dkt-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dkt-text-button {
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    color: var(--dkt-accent-strong);
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
}

.dkt-draft-banner {
    margin-bottom: 18px;
    padding: 16px;
    border: 2px solid color-mix(in srgb, var(--dkt-warning) 55%, var(--dkt-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--dkt-warning) 9%, var(--dkt-surface));
}

.dkt-draft-banner p {
    margin: 4px 0 0;
}

.dkt-entry-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(260px, 1.2fr);
    gap: 18px;
    align-items: stretch;
}

.dkt-entry-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 16px;
    border: 1px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface-soft);
    font-weight: 800;
}

.dkt-entry-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.dkt-entry-tabs button {
    min-height: 46px;
    padding: 8px 14px;
    border: 2px solid var(--dkt-border);
    border-radius: 10px;
    color: var(--dkt-text);
    background: var(--dkt-surface);
    cursor: pointer;
    font-weight: 800;
}

.dkt-entry-tabs button[aria-pressed="true"] {
    border-color: var(--dkt-accent);
    color: #fff;
    background: var(--dkt-accent);
}

.dkt-entry-empty {
    padding: 22px;
    border: 1px dashed var(--dkt-border);
    border-radius: 14px;
    color: var(--dkt-muted);
    text-align: center;
}

.dkt-entry-list {
    display: grid;
    gap: 14px;
}

.dkt-entry-card {
    padding: 18px;
    border: 1px solid var(--dkt-border);
    border-radius: 15px;
    background: var(--dkt-surface);
}

.dkt-entry-card__date,
.dkt-entry-card__meta {
    margin: 0;
    color: var(--dkt-muted);
    font-size: .88em;
}

.dkt-entry-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
}

.dkt-entry-card__tags span {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--dkt-surface-soft);
    font-size: .82em;
}

.dkt-entry-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.dkt-entry-card__actions button {
    min-height: 44px;
    padding: 8px 13px;
    border: 2px solid var(--dkt-accent);
    border-radius: 9px;
    color: var(--dkt-accent-strong);
    background: var(--dkt-surface);
    cursor: pointer;
    font-weight: 800;
}

.dkt-entry-card__actions button.is-danger {
    border-color: var(--dkt-error);
    color: var(--dkt-error);
}

.dkt-entry-editor {
    margin-top: 22px;
    padding: clamp(18px, 3vw, 28px);
    border: 3px solid var(--dkt-accent);
    border-radius: 18px;
    background: var(--dkt-surface-soft);
}

.dkt-editor-close {
    width: 48px;
    height: 48px;
    border: 2px solid var(--dkt-border);
    border-radius: 50%;
    color: var(--dkt-text);
    background: var(--dkt-surface);
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
}

.dkt-form-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.dkt-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.dkt-entry-editor label {
    display: grid;
    gap: 6px;
    font-weight: 800;
}

.dkt-entry-editor label small {
    color: var(--dkt-muted);
    font-weight: 400;
}

.dkt-entry-text-label,
.dkt-entry-editor > form > label {
    margin-bottom: 14px;
}

.dkt-entry-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
    padding: 14px;
    border-radius: 12px;
    background: var(--dkt-surface);
}

.dkt-entry-editor__footer {
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--dkt-border);
}

.dkt-entry-editor__footer p {
    margin: 0;
}

.dkt-dashboard__grid--secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
    .dkt-diary-module__header,
    .dkt-entry-editor__header,
    .dkt-entry-editor__footer,
    .dkt-entry-card__head,
    .dkt-draft-banner {
        flex-direction: column;
    }

    .dkt-entry-toolbar,
    .dkt-form-grid--two,
    .dkt-form-grid--three,
    .dkt-entry-options,
    .dkt-dashboard__grid--secondary {
        grid-template-columns: 1fr;
    }

    .dkt-secret-row {
        grid-template-columns: 1fr;
    }

    .dkt-entry-toolbar .dkt-new-entry,
    .dkt-button-row > button,
    .dkt-button-row > .dkt-primary-button,
    .dkt-button-row > .dkt-secondary-button {
        width: 100%;
    }
}

.dkt-diary-module [hidden] { display: none !important; }

/* M008.3: field-by-field speech input. */
.dkt-entry-text-block {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.dkt-entry-text-heading,
.dkt-field-with-speech__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.dkt-entry-text-heading > label,
.dkt-field-with-speech__head > label {
    font-weight: 800;
}

.dkt-field-with-speech {
    display: grid;
    gap: 6px;
}

.dkt-entry-tags-field {
    margin-bottom: 14px;
}

.dkt-entry-tags-field > small {
    color: var(--dkt-muted);
}

.dkt-speech-button {
    display: inline-flex;
    min-height: 28px;
    max-width: 110px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1.5px solid var(--dkt-accent);
    border-radius: 8px;
    color: var(--dkt-accent-strong);
    background: var(--dkt-surface);
    cursor: pointer;
    font: inherit;
    font-size: 0.74em;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.dkt-speech-button:hover,
.dkt-speech-button:focus-visible {
    background: color-mix(in srgb, var(--dkt-accent) 10%, var(--dkt-surface));
}

.dkt-speech-button.is-listening,
.dkt-speech-button[aria-pressed="true"] {
    border-color: var(--dkt-error);
    color: #fff;
    background: var(--dkt-error);
}

.dkt-speech-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.dkt-speech-button [data-dkt-speech-icon] {
    font-size: 1em;
}

.dkt-speech-status {
    min-height: 1.6em;
    margin: 0;
    color: var(--dkt-muted);
    font-weight: 700;
}

.dkt-speech-status.is-success {
    color: var(--dkt-success);
}

.dkt-speech-status.is-warning {
    color: var(--dkt-warning);
}

.dkt-speech-status.is-error {
    color: var(--dkt-error);
}

.dkt-speech-status.is-listening {
    color: var(--dkt-accent-strong);
}

.dkt-speech-help {
    padding: 10px 12px;
    border: 1px solid var(--dkt-border);
    border-radius: 10px;
    background: var(--dkt-surface);
}

.dkt-speech-help summary {
    cursor: pointer;
    font-weight: 800;
}

.dkt-speech-help p {
    margin: 10px 0 0;
    color: var(--dkt-muted);
}

.dkt-image-caption-field {
    margin-top: 8px;
}

@media (max-width: 620px) {
    .dkt-entry-text-heading,
    .dkt-field-with-speech__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        width: 100%;
        min-width: 0;
    }

    .dkt-field-with-speech__head > label,
    .dkt-entry-text-heading > label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .dkt-speech-button {
        min-height: 27px;
        max-width: 90px;
        padding: 4px 6px;
        font-size: 0.7em;
    }
}


/* M008: encrypted photos and video. */
.dkt-media-editor {
    display: grid;
    gap: 18px;
    margin: 18px 0;
    padding: clamp(16px, 2.5vw, 24px);
    border: 2px solid var(--dkt-border);
    border-radius: 16px;
    background: var(--dkt-surface);
}

.dkt-media-editor__heading,
.dkt-media-section__title,
.dkt-video-card__details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dkt-media-editor__heading h4,
.dkt-media-editor__heading p,
.dkt-media-section p {
    margin: 0;
}

.dkt-media-test-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--dkt-success);
    border-radius: 999px;
    color: var(--dkt-success);
    background: color-mix(in srgb, var(--dkt-success) 8%, var(--dkt-surface));
    font-size: .88em;
    font-weight: 800;
}

.dkt-media-section {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--dkt-border);
}

.dkt-media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dkt-image-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dkt-media-card,
.dkt-video-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface-soft);
}

.dkt-media-card__preview {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: var(--dkt-surface);
}

.dkt-media-card__preview img,
.dkt-video-card video,
.dkt-video-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.dkt-video-card video,
.dkt-video-poster {
    max-height: 420px;
    background: #000;
}

.dkt-media-loading {
    display: grid;
    min-height: 130px;
    place-items: center;
    padding: 16px;
    color: var(--dkt-muted);
    text-align: center;
    font-weight: 700;
}

.dkt-media-card__meta,
.dkt-video-card__details span {
    color: var(--dkt-muted);
    font-size: .9em;
}

.dkt-media-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dkt-media-card__actions button {
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--dkt-border);
    border-radius: 8px;
    color: var(--dkt-text);
    background: var(--dkt-surface);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.dkt-media-card__actions button.is-danger {
    border-color: var(--dkt-error);
    color: var(--dkt-error);
}

.dkt-media-status {
    min-height: 1.4em;
    margin: 0;
    color: var(--dkt-muted);
    font-weight: 700;
}

.dkt-media-status.is-success { color: var(--dkt-success); }
.dkt-media-status.is-warning { color: var(--dkt-warning); }
.dkt-media-status.is-error { color: var(--dkt-error); }

.dkt-entry-card__media {
    margin: 8px 0;
    color: var(--dkt-accent-strong);
    font-weight: 800;
}

@media (max-width: 820px) {
    .dkt-image-list {
        grid-template-columns: 1fr;
    }

    .dkt-media-buttons,
    .dkt-media-card__actions {
        flex-direction: column;
    }

    .dkt-media-buttons > button,
    .dkt-media-card__actions > button {
        width: 100%;
    }
}


/* M008.3: mobile layout hardening for media editor and compact field microphones. */
.dkt-entry-editor,
.dkt-entry-editor form,
.dkt-field-with-speech,
.dkt-entry-text-block,
.dkt-media-editor,
.dkt-media-section,
.dkt-media-card,
.dkt-video-card,
.dkt-image-list,
.dkt-media-buttons,
.dkt-media-card__actions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.dkt-entry-editor {
    width: 100%;
    overflow: hidden;
}

.dkt-media-editor {
    width: 100%;
    overflow: hidden;
}

.dkt-media-editor__heading,
.dkt-media-section__title,
.dkt-video-card__details {
    min-width: 0;
}

.dkt-media-editor__heading > *,
.dkt-media-section__title > *,
.dkt-video-card__details > * {
    min-width: 0;
}

.dkt-media-editor__heading h4,
.dkt-media-editor__heading p,
.dkt-media-section p,
.dkt-help-text,
.dkt-media-status,
.dkt-media-card__meta,
.dkt-video-card__details span {
    overflow-wrap: anywhere;
}

.dkt-media-buttons > button,
.dkt-media-card__actions > button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dkt-image-caption-field input {
    min-width: 0;
}

@media (max-width: 620px) {
    .dkt-entry-editor {
        padding: 14px;
        border-width: 2px;
        border-radius: 14px;
    }

    .dkt-media-editor {
        gap: 14px;
        margin: 14px 0;
        padding: 12px;
        border-width: 1px;
        border-radius: 12px;
    }

    .dkt-media-editor__heading {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .dkt-media-test-badge {
        justify-self: start;
        min-height: 28px;
        max-width: 100%;
        padding: 4px 8px;
        font-size: .72em;
        white-space: normal;
        text-align: left;
    }

    .dkt-media-section__title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .dkt-media-buttons,
    .dkt-media-card__actions {
        gap: 8px;
    }

    .dkt-media-buttons > button,
    .dkt-media-card__actions > button {
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        font-size: .9em;
    }

    .dkt-media-card,
    .dkt-video-card {
        padding: 10px;
        border-radius: 12px;
    }

    .dkt-image-caption-field .dkt-field-with-speech__head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dkt-image-caption-field .dkt-speech-button {
        max-width: 88px;
    }
}


/* M008.4: Beschriftung und Mikrofonsymbol passen zuverlässig in die kompakten Feldbuttons. */
.dkt-speech-button {
    overflow: hidden;
}

.dkt-speech-button [data-dkt-speech-icon] {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.15em;
    min-width: 1.15em;
    align-items: center;
    justify-content: center;
    font-size: .92em;
    line-height: 1;
}

.dkt-speech-button [data-dkt-speech-label] {
    display: inline-block;
    min-width: 0;
    font-size: .92em;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .dkt-speech-button,
    .dkt-image-caption-field .dkt-speech-button {
        width: auto;
        min-width: 82px;
        max-width: 88px;
        min-height: 27px;
        gap: 3px;
        padding: 4px 5px;
        font-size: 11px !important;
        line-height: 1;
    }

    .dkt-speech-button [data-dkt-speech-icon] {
        width: 13px;
        min-width: 13px;
        font-size: 12px;
    }

    .dkt-speech-button [data-dkt-speech-label] {
        font-size: 11px;
        letter-spacing: 0;
    }
}

/* M009 – Video QR sharing. */
.dkt-video-share{margin-top:18px;padding:16px;border:1px solid #bfd0e6;border-radius:14px;background:#f8fbff;text-align:center;min-width:0}.dkt-video-share h5{margin:0 0 8px;font-size:1.05rem}.dkt-video-share__hint{margin:0 auto 14px;max-width:720px;line-height:1.5}.dkt-video-share__qr{display:flex;justify-content:center;align-items:center;margin:10px auto 14px;padding:10px;background:#fff;border-radius:12px;width:min(290px,100%);overflow:hidden}.dkt-video-share__qr svg{display:block;width:min(250px,100%);height:auto;max-width:100%}.dkt-video-share__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.dkt-video-share__actions button,.dkt-video-share>button{min-height:44px;padding:9px 13px;border-radius:9px;border:1px solid #496c9d;background:#fff;color:#17345d;font-weight:700}.dkt-video-share__actions .is-danger{border-color:#ba4545;color:#8c2222}.dkt-video-card .dkt-media-card__actions{flex-wrap:wrap}@media(max-width:640px){.dkt-video-share{padding:12px 9px}.dkt-video-share__actions{display:grid;grid-template-columns:1fr}.dkt-video-share__actions button,.dkt-video-share>button{width:100%;font-size:.92rem}.dkt-video-share__qr{padding:8px}}


/* M009.1 – clearer private-video explanation. */
.dkt-privacy-explainer {
    margin: 8px 0 0;
    color: var(--dkt-muted);
    font-size: .9em;
    line-height: 1.45;
}

/* M010 – privater Kalender und persönliche Rückblicke. */
.dkt-reflection-module {
    margin-top: 26px;
    padding: 22px;
    border: 2px solid var(--dkt-border);
    border-radius: 16px;
    background: var(--dkt-surface-soft);
    min-width: 0;
}

.dkt-reflection-module__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.dkt-reflection-module__header h3,
.dkt-reflection-module__header p {
    margin-top: 0;
}

.dkt-reflection-private {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--dkt-border);
    border-radius: 999px;
    color: var(--dkt-success);
    font-weight: 800;
    white-space: nowrap;
}

.dkt-reflection-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.dkt-reflection-tabs button {
    min-height: 48px;
    border: 2px solid var(--dkt-border);
    border-radius: 10px;
    background: var(--dkt-surface);
    color: var(--dkt-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.dkt-reflection-tabs button[aria-pressed="true"] {
    border-color: var(--dkt-accent);
    background: #edf4ff;
}

.dkt-calendar-panel,
.dkt-memories-panel {
    min-width: 0;
}

.dkt-calendar-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.dkt-calendar-controls > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.dkt-calendar-controls [data-dkt-calendar-label] {
    font-size: 1.16em;
    text-transform: capitalize;
}

.dkt-calendar-year-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dkt-muted);
    font-weight: 700;
}

.dkt-calendar-year-label select {
    min-height: 40px;
    border: 1px solid var(--dkt-border);
    border-radius: 8px;
    background: var(--dkt-surface);
    color: var(--dkt-text);
    font: inherit;
    font-weight: 700;
}

.dkt-calendar-weekdays,
.dkt-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.dkt-calendar-weekdays {
    margin-bottom: 6px;
    color: var(--dkt-muted);
    text-align: center;
    font-size: .86em;
    font-weight: 800;
}

.dkt-calendar-cell {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 42px;
    padding: 4px;
    border: 1px solid var(--dkt-border);
    border-radius: 10px;
    background: var(--dkt-surface);
    color: var(--dkt-text);
    font: inherit;
    font-weight: 800;
}

button.dkt-calendar-cell {
    cursor: pointer;
}

.dkt-calendar-cell.is-empty {
    border-color: transparent;
    background: transparent;
}

.dkt-calendar-cell.has-entries {
    border-color: var(--dkt-accent);
}

.dkt-calendar-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--dkt-focus);
}

.dkt-calendar-cell.is-selected {
    background: var(--dkt-accent);
    color: #fff;
}

.dkt-calendar-count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--dkt-accent-strong);
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.dkt-calendar-cell.is-selected .dkt-calendar-count {
    background: #fff;
    color: var(--dkt-accent-strong);
}

.dkt-calendar-day-list {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface);
}

.dkt-calendar-day-list > p,
.dkt-calendar-day-list > h4 {
    margin-top: 0;
}

.dkt-calendar-day-cards,
.dkt-memory-grid {
    display: grid;
    gap: 12px;
}

.dkt-year-overview {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface);
}

.dkt-year-overview summary {
    cursor: pointer;
    font-weight: 800;
}

.dkt-year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.dkt-year-grid button {
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    border: 1px solid var(--dkt-border);
    border-radius: 9px;
    background: var(--dkt-surface-soft);
    color: var(--dkt-text);
    cursor: pointer;
    font: inherit;
}

.dkt-year-grid strong,
.dkt-year-grid span {
    display: block;
}

.dkt-year-grid span {
    margin-top: 3px;
    color: var(--dkt-muted);
    font-size: .82em;
}

.dkt-memory-bucket {
    padding: 14px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface);
}

.dkt-memory-bucket > h4 {
    margin: 0 0 10px;
    color: var(--dkt-accent-strong);
}

.dkt-memory-card {
    padding: 14px;
    border: 1px solid var(--dkt-border);
    border-radius: 11px;
    background: var(--dkt-surface-soft);
}

.dkt-memory-card + .dkt-memory-card {
    margin-top: 10px;
}

.dkt-memory-card h5 {
    margin: 4px 0 8px;
    font-size: 1.08em;
}

.dkt-memory-card p {
    margin: 6px 0;
}

.dkt-memory-card__prefix,
.dkt-memory-card__date,
.dkt-memory-card__meta,
.dkt-memory-card__media,
.dkt-memory-empty {
    color: var(--dkt-muted);
}

.dkt-memory-card__prefix {
    font-weight: 800;
    color: var(--dkt-accent-strong);
}

.dkt-random-memory {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--dkt-border);
    border-radius: 12px;
    background: var(--dkt-surface);
}

.dkt-random-memory h4,
.dkt-random-memory p {
    margin: 0 0 5px;
}

[data-dkt-random-memory-result] {
    margin-top: 12px;
}

@media (max-width: 620px) {
    .dkt-reflection-module {
        padding: 14px 10px;
    }

    .dkt-reflection-module__header,
    .dkt-random-memory {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dkt-reflection-private {
        justify-self: start;
        white-space: normal;
    }

    /* M010.3 – kompakte, vollständig sichtbare Reiter auf kleinen Displays. */
    .dkt-reflection-tabs button {
        min-width: 0;
        padding: 10px 4px;
        font-size: .82em;
        line-height: 1.15;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    .dkt-calendar-weekdays,
    .dkt-calendar-grid {
        gap: 3px;
    }

    .dkt-calendar-cell {
        min-height: 38px;
        border-radius: 8px;
        font-size: .88em;
    }

    .dkt-calendar-count {
        min-width: 15px;
        height: 15px;
        font-size: 9px;
    }

    .dkt-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dkt-random-memory .dkt-primary-button {
        width: 100%;
    }
}

/* M010.1 – private Kalender-Suche für Alltag, Gesundheit und Business. */
.dkt-calendar-search {
    margin: 0 0 20px;
    padding: 18px;
    border: 2px solid var(--dkt-border);
    border-radius: 14px;
    background: var(--dkt-surface);
}

.dkt-calendar-search__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.dkt-calendar-search__intro h4,
.dkt-calendar-search__intro p {
    margin: 0 0 6px;
}

.dkt-calendar-search__intro > span {
    font-size: 1.7em;
    line-height: 1;
}

.dkt-calendar-search__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.dkt-calendar-search__main label,
.dkt-calendar-search__filter-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--dkt-text);
    font-weight: 800;
}

.dkt-calendar-search input,
.dkt-calendar-search select {
    width: 100%;
    min-height: 46px;
    padding: 9px 11px;
    border: 2px solid var(--dkt-border);
    border-radius: 9px;
    background: var(--dkt-surface-soft);
    color: var(--dkt-text);
}

.dkt-calendar-search__filters {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--dkt-border);
    border-radius: 10px;
    background: var(--dkt-surface-soft);
}

.dkt-calendar-search__filters summary {
    cursor: pointer;
    font-weight: 800;
}

.dkt-calendar-search__filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dkt-calendar-search__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.dkt-calendar-search__footer p {
    margin: 0;
    color: var(--dkt-muted);
}

.dkt-calendar-search-results {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.dkt-calendar-search-result {
    padding: 14px;
    border: 1px solid var(--dkt-border);
    border-radius: 11px;
    background: var(--dkt-surface-soft);
}

.dkt-calendar-search-result h5,
.dkt-calendar-search-result p {
    margin: 5px 0;
}

.dkt-calendar-search-result__tags {
    color: var(--dkt-accent-strong);
    font-weight: 700;
}

.dkt-calendar-search-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.dkt-calendar-search__privacy {
    margin: 12px 0 0;
    color: var(--dkt-success);
    font-size: .9em;
    font-weight: 700;
}

@media (max-width: 620px) {
    .dkt-calendar-search {
        padding: 14px 10px;
    }

    .dkt-calendar-search__main,
    .dkt-calendar-search__filter-grid {
        grid-template-columns: 1fr;
    }

    .dkt-calendar-search__main .dkt-primary-button,
    .dkt-calendar-search__footer .dkt-secondary-button,
    .dkt-calendar-search-result__actions button {
        width: 100%;
    }

    .dkt-calendar-search__footer,
    .dkt-calendar-search-result__actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* M010.2 – Spracheingabe direkt in der privaten Kalendersuche. */
.dkt-calendar-search__field {
    min-width: 0;
}

.dkt-calendar-search input::placeholder {
    opacity: 1;
}

/* M011.4 – optionale verschlüsselte Angaben für feste Buchvorlagen. */
.dkt-entry-book-fields{margin:14px 0 16px;padding:12px 14px;border:1px solid var(--dkt-border,#c8d4e3);border-radius:16px;background:color-mix(in srgb,var(--dkt-surface,#fff) 96%,#fff2ea)}
.dkt-entry-book-fields summary{cursor:pointer;font-weight:750}
.dkt-entry-book-fields>p{margin:.75em 0 1em;line-height:1.5}
.dkt-entry-book-fields input{width:100%;min-height:50px;border:2px solid var(--dkt-border,#b6c5d8);border-radius:13px;padding:10px 12px;background:var(--dkt-input-bg,#fff);color:inherit;font:inherit;font-weight:400}
.dkt-entry-book-fields input::placeholder{font-weight:400;opacity:.72}
.dkt-mode-dark .dkt-entry-book-fields{background:#1d2b3b;color:#f6f9fc}
.dkt-mode-dark .dkt-entry-book-fields input{background:#152333;color:#fff}
.dkt-mode-dark .dkt-entry-book-fields input::placeholder{color:#fff;opacity:.8}

/* M011.4.5: sichtbare Rückmeldung bei der erstmaligen Tagebuch-Aktivierung. */
.dkt-key-activate-status {
    min-height: 1.5em;
    margin: 10px 0 0;
    font-weight: 700;
    line-height: 1.45;
}
.dkt-key-activate-status.is-warning { color: #815a00; }
.dkt-key-activate-status.is-error { color: #9b2c2c; }
.dkt-key-activate-status.is-success { color: #1f6f43; }