:root {
    --pwan-accent: var(--color-primary, #c2652a);
    --pwan-accent-hover: var(--color-primary-dark, #9e4c1e);
    --pwan-accent-soft: var(--color-primary-soft, #f3dfcf);
    --pwan-danger: var(--color-tertiary, #8c3c3c);
    --pwan-surface: var(--color-surface, #fffdf9);
    --pwan-surface-muted: var(--color-surface-muted, #f6eee5);
    --pwan-text: var(--color-text, #3a302a);
    --pwan-muted: var(--color-text-muted, #756a63);
    --pwan-border: var(--color-border, rgba(216, 208, 200, 0.60));
    --pwan-backdrop: rgba(39, 28, 22, 0.58);
    --pwan-radius: var(--radius-lg, 24px);
    --pwan-shadow: 0 24px 80px rgba(54, 36, 25, 0.28);
    --pwan-z-index: 1200;
}

.pwan-scroll-lock {
    overflow: hidden;
}

.pwan-root,
.pwan-root *,
.pwan-root *::before,
.pwan-root *::after {
    box-sizing: border-box;
}

.pwan-root[hidden] {
    display: none !important;
}

.pwan-root {
    position: fixed;
    inset: 0;
    z-index: var(--pwan-z-index);
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--pwan-text);
    font-family: "Chiron GoRound TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pwan-backdrop {
    position: absolute;
    inset: 0;
    background: var(--pwan-backdrop);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pwan-dialog {
    position: relative;
    width: min(100%, 420px);
    max-height: min(720px, calc(100dvh - 40px));
    overflow: auto;
    padding: 32px 28px;
    border: 1px solid var(--pwan-border);
    border-radius: var(--pwan-radius);
    outline: 0;
    background: var(--pwan-surface);
    background: color-mix(in srgb, var(--pwan-surface) 96%, transparent);
    box-shadow: var(--pwan-shadow);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    text-align: center;
    animation: pwan-enter 180ms ease-out both;
}

.pwan-dialog:focus-visible {
    box-shadow: var(--pwan-shadow), 0 0 0 3px rgba(194, 101, 42, 0.25);
}

.pwan-icon-button {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pwan-muted);
    font: inherit;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.pwan-icon-button:hover {
    background: var(--pwan-surface-muted);
    color: var(--pwan-text);
}

.pwan-icon-button:focus-visible,
.pwan-button:focus-visible {
    outline: 2px solid var(--pwan-accent);
    outline-offset: 2px;
}

.pwan-bell {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 4px auto 16px;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(145deg, var(--pwan-surface-muted), var(--pwan-accent-soft));
    font-size: 34px;
    box-shadow: inset 0 0 0 1px rgba(194, 101, 42, 0.16), 0 8px 20px rgba(194, 101, 42, 0.08);
}

.pwan-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pwan-accent-soft);
    color: var(--pwan-accent-hover);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pwan-root[data-pwan-state="granted"] .pwan-status {
    background: rgba(101, 121, 105, 0.15);
    color: var(--color-sage, #657969);
}

.pwan-root[data-pwan-state="denied"] .pwan-status,
.pwan-root[data-pwan-state="unsupported"] .pwan-status {
    background: rgba(140, 60, 60, 0.1);
    color: var(--pwan-danger);
}

.pwan-root[data-pwan-state="granted"] .pwan-bell {
    background: linear-gradient(145deg, #eef4f0, #dbe6de);
    box-shadow: inset 0 0 0 1px rgba(101, 121, 105, 0.2), 0 8px 20px rgba(101, 121, 105, 0.08);
}

.pwan-root[data-pwan-state="denied"] .pwan-bell,
.pwan-root[data-pwan-state="unsupported"] .pwan-bell {
    filter: grayscale(1);
    opacity: 0.72;
}

.pwan-title {
    margin: 0;
    color: var(--pwan-text);
    font-size: clamp(20px, 4.5vw, 24px);
    font-weight: 800;
    line-height: 1.35;
}

.pwan-description {
    margin: 12px auto 0;
    color: var(--pwan-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pwan-error {
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid rgba(140, 60, 60, 0.25);
    border-radius: var(--radius-sm, 10px);
    background: #fdf5f5;
    color: var(--pwan-danger);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.pwan-error[hidden] {
    display: none !important;
}

.pwan-actions {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.pwan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}

.pwan-button:not(:disabled):active {
    transform: translateY(1px);
}

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

.pwan-button-primary {
    background: var(--pwan-accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(194, 101, 42, 0.24);
}

.pwan-button-primary:not(:disabled):hover {
    background: var(--pwan-accent-hover);
    box-shadow: 0 6px 18px rgba(194, 101, 42, 0.32);
}

.pwan-button-secondary {
    border-color: var(--pwan-border);
    background: transparent;
    color: var(--pwan-text);
}

.pwan-button-secondary:not(:disabled):hover {
    background: var(--pwan-surface-muted);
    border-color: rgba(200, 190, 180, 0.8);
}

.pwan-button-danger {
    border-color: rgba(140, 60, 60, 0.25);
    background: rgba(140, 60, 60, 0.06);
    color: var(--pwan-danger);
}

.pwan-button-danger:not(:disabled):hover {
    background: var(--pwan-danger);
    border-color: var(--pwan-danger);
    color: #ffffff;
}

.pwan-button[hidden] {
    display: none !important;
}

.pwan-is-busy .pwan-bell {
    animation: pwan-ring 900ms ease-in-out infinite;
}

@keyframes pwan-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pwan-ring {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-7deg); }
    70% { transform: rotate(7deg); }
}

@media (max-width: 520px) {
    .pwan-root {
        align-items: end;
        padding: 0;
    }

    .pwan-dialog {
        width: 100%;
        max-height: calc(100dvh - 18px);
        padding: 30px 20px calc(24px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        animation-name: pwan-enter-mobile;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwan-dialog,
    .pwan-is-busy .pwan-bell {
        animation: none;
    }

    .pwan-button {
        transition: none;
    }
}

@keyframes pwan-enter-mobile {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}