.kol-novel-donation[hidden] {
    display: none !important;
}

.kol-novel-donation {
    isolation: isolate;
}

.kol-novel-donation__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--foreground) 62%, transparent);
    backdrop-filter: blur(3px);
}

.kol-novel-donation__panel {
    box-sizing: border-box;
    min-height: 0;
    max-height: min(700px, calc(100vh - 40px));
    max-height: min(700px, calc(100svh - 40px));
    max-height: min(700px, calc(100dvh - 40px));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 22px;
    background: var(--card, var(--background));
    color: var(--card-foreground, var(--foreground));
    box-shadow: 0 24px 70px color-mix(in srgb, var(--foreground) 32%, transparent);
}
.kol-novel-donation__panel.kol-ui-card {
    display: block;
}

.kol-novel-donation__handle {
    display: none;
}

/* Match the shared bottom sheet's mobile drag breakpoint. */
@media (max-width: 700px) {
    .kol-novel-donation__handle {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        touch-action: none;
        cursor: grab;
    }

    .kol-novel-donation__handle > span {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--muted-foreground);
        pointer-events: none;
    }
}

.kol-novel-donation__header {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.kol-novel-donation__eyebrow {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 800;
}

.kol-novel-donation__title {
    color: inherit;
    font-size: 21px;
    line-height: 1.35;
}

.kol-novel-donation__body {
}

.kol-novel-donation__balance {
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 700;
}

.kol-novel-donation__balance .mycred-my-balance-wrapper {
    display: inline-flex;
    margin: 0;
    color: var(--primary);
    font-size: 21px;
    font-weight: 900;
}

.kol-novel-donation__state {
    color: var(--muted-foreground);
}

.kol-novel-donation__state.kol-ui-alert {
    grid-auto-flow: row;
    box-shadow: none;
}

.kol-novel-donation__state p {
    margin: 0;
    line-height: 1.8;
}

.kol-novel-donation__state--notice {
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    color: var(--primary);
    font-weight: 700;
}

.kol-novel-donation__form .mycred-transfer-cred-wrapper,
.kol-novel-donation__form .mycred-transfer-form,
.kol-novel-donation__form .mycred-transfer-form .row {
    width: 100%;
}

.kol-novel-donation__form .mycred-transfer-form {
    display: grid;
    gap: 15px;
}

.kol-novel-donation__form .mycred-transfer-form .row {
    display: grid;
    gap: 15px;
    margin: 0;
}

.kol-novel-donation__form .mycred-transfer-form [class*="col-"] {
    width: 100%;
    padding: 0;
}

.kol-novel-donation__form label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 800;
}

.kol-novel-donation__form input:not([type="hidden"]),
.kol-novel-donation__form select,
.kol-novel-donation__form textarea {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    border: 1px solid var(--kol-border-color, var(--border));
    border-radius: 12px;
    background: var(--input, var(--card));
    color: var(--foreground);
    font: inherit;
    padding: 10px 13px;
}

.kol-novel-donation__form input:not([type="hidden"]):focus,
.kol-novel-donation__form select:focus,
.kol-novel-donation__form textarea:focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 16%, transparent);
    outline-offset: 1px;
}

.kol-novel-donation__form .mycred-submit-transfer:disabled {
    cursor: wait;
    opacity: .65;
}

.kol-novel-donation__form .mycred-transfer-cred-wrapper > p,
.kol-novel-donation__form .mycred-transfer-cred-wrapper > .error,
.kol-novel-donation__form .mycred-transfer-cred-wrapper > .info {
    margin: 0;
    line-height: 1.8;
}

body.kol-novel-donation-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .kol-novel-donation {
        padding: 12px;
    }

    .kol-novel-donation__panel {
        max-height: calc(100vh - 24px);
        max-height: calc(100svh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    .kol-novel-donation__header,
    .kol-novel-donation__body {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kol-novel-donation__backdrop,
    .kol-novel-donation__panel {
        transition: none;
    }
}

/* Use shared responsive-bottom-sheet geometry; donation keeps its content only. */
responsive-bottom-sheet.kol-novel-donation {
    position: static;
    display: contents;
    padding: 0;
}

responsive-bottom-sheet.kol-novel-donation > dialog {
    z-index: 100000;
}

responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__panel {
    width: min(440px, 100%);
    max-height: min(700px, calc(90dvh - 24px));
    border-color: var(--kol-border-color, #dddddd);
    border-radius: var(--radius-lg, 10px);
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
}

responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__header {
    border-color: var(--kol-border-color, #dddddd);
    background: var(--background);
    color: var(--foreground);
}

responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__panel :is(.kol-novel-donation__eyebrow, .kol-novel-donation__balance, .kol-novel-donation__state, label) {
    color: var(--muted-foreground);
}

responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__panel :is(.kol-novel-donation__title, .mycred-my-balance-wrapper) {
    color: var(--foreground);
}

responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__panel :is(input:not([type="hidden"]), select, textarea) {
    border-color: var(--kol-border-color, #dddddd);
    background: var(--background);
    color: var(--foreground);
}

@media (max-width: 700px) {
    responsive-bottom-sheet.kol-novel-donation .kol-novel-donation__panel {
        width: 100%;
        max-height: calc(100vh - 12px);
        max-height: calc(100svh - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
    }
}