.blog-reader-container {
    --br-reader-font-family: inherit;
    --br-reader-font-size: 16px;
    --br-reader-line-height: 1.6;
    --br-reader-title-size: 20px;
    --br-reader-helper-size: 14px;
    --br-reader-bg: #ffffff;
    --br-reader-text: #1d2327;
    --br-reader-border: #008ad6;
    --br-reader-panel-bg: #f7fbff;
    --br-reader-panel-border: #c6dff4;
    --br-reader-button-bg: #00306a;
    --br-reader-button-text: #ffffff;
    --br-reader-button-bg-hover: #008ad6;
    --br-reader-radius: 8px;
    --br-reader-button-radius: 999px;
    --br-reader-container-padding: 20px;
    --br-reader-panel-padding: 20px;
    --br-reader-gap: 16px;
    --br-reader-controls-gap: 14px;
    --br-reader-controls-padding: 14px;
    --br-reader-controls-bg: #ffffff;
    --br-reader-controls-border: #c6dff4;
    --br-reader-input-bg: #ffffff;
    --br-reader-input-border: var(--br-reader-panel-border);
    --br-reader-input-radius: var(--br-reader-radius);
    --br-reader-audio-player-bg: #ffffff;
    --br-reader-audio-player-padding: 10px 12px;
    --br-reader-button-secondary-bg: var(--br-reader-controls-bg);
    --br-reader-button-secondary-text: var(--br-reader-text);
    --br-reader-button-secondary-border: var(--br-reader-controls-border);
    --br-reader-button-secondary-bg-hover: var(--br-reader-panel-bg);
    --br-reader-focus-color: #008ad6;
    --br-reader-status-info-border: rgba(0, 138, 214, 0.35);
    --br-reader-status-info-bg: rgba(0, 138, 214, 0.09);
    --br-reader-status-info-text: #006ba8;
    --br-reader-status-success-border: rgba(0, 102, 51, 0.35);
    --br-reader-status-success-bg: rgba(0, 102, 51, 0.09);
    --br-reader-status-success-text: #006633;
    --br-reader-status-warning-border: rgba(0, 48, 106, 0.35);
    --br-reader-status-warning-bg: rgba(0, 48, 106, 0.1);
    --br-reader-status-warning-text: #00306a;
    --br-reader-status-error-border: rgba(209, 66, 146, 0.35);
    --br-reader-status-error-bg: rgba(209, 66, 146, 0.1);
    --br-reader-status-error-text: #d14292;
    --br-prompt-bg: #f7f7f7;
    --br-prompt-text: #333333;
    --br-prompt-border: #dddddd;
    --br-prompt-font-size: 14px;
    --br-prompt-padding: 16px;
    margin: 24px 0;
    padding: var(--br-reader-container-padding, 20px);
    border: 1px solid var(--br-reader-border);
    border-radius: calc(var(--br-reader-radius) + 2px);
    background: var(--br-reader-bg);
    color: var(--br-reader-text);
    font-family: var(--br-reader-font-family);
    font-size: var(--br-reader-font-size);
    line-height: var(--br-reader-line-height);
    display: grid;
    gap: var(--br-reader-gap);
    max-width: 100%;
    overflow: hidden;
}

.blog-reader-container,
.blog-reader-container * {
    box-sizing: border-box;
}

.blog-reader-title {
    margin: 0;
    font-size: var(--br-reader-title-size);
    line-height: 1.25;
}

.blog-reader-header {
    display: grid;
    gap: 8px;
}

.blog-reader-helper {
    margin: 0;
    font-size: var(--br-reader-helper-size);
    opacity: 0.88;
}

.blog-reader-panel {
    border: 1px solid var(--br-reader-panel-border);
    background: var(--br-reader-panel-bg);
    border-radius: var(--br-reader-radius);
    padding: var(--br-reader-panel-padding, 20px);
    display: grid;
    gap: var(--br-reader-gap);
}

.blog-reader-main-panel {
    align-items: start;
}

.blog-reader-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--br-reader-controls-gap);
    padding: var(--br-reader-controls-padding, 14px);
    border: 1px solid var(--br-reader-controls-border);
    border-radius: calc(var(--br-reader-radius) + 2px);
    background: var(--br-reader-controls-bg);
    box-shadow: 0 1px 2px rgba(0, 48, 106, 0.06);
}

.blog-reader-controls-item {
    min-width: 0;
}

.blog-reader-controls-action {
    justify-self: end;
}

.blog-reader-language {
    display: grid;
    gap: 6px;
    min-width: 180px;
}

.blog-reader-label {
    margin: 0;
    font-weight: 600;
    font-size: 0.98em;
}

.blog-reader-container select,
.blog-reader-container textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--br-reader-input-border, var(--br-reader-panel-border));
    border-radius: var(--br-reader-input-radius);
    background: var(--br-reader-input-bg);
    color: var(--br-reader-text);
    padding: 10px 12px;
    font: inherit;
    line-height: 1.45;
}

.blog-reader-language-select {
    min-height: 48px;
    border-radius: var(--br-reader-input-radius);
    border-color: var(--br-reader-input-border, var(--br-reader-panel-border));
    background: var(--br-reader-input-bg);
    box-shadow: inset 0 1px 0 rgba(0, 48, 106, 0.04);
}

.blog-reader-container textarea {
    min-height: 96px;
    resize: vertical;
}

.blog-reader-button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--br-reader-button-radius);
    background: var(--br-reader-button-bg);
    color: var(--br-reader-button-text);
    padding: 11px 18px;
    min-height: 48px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-reader-button:hover,
.blog-reader-button:focus-visible {
    background: var(--br-reader-button-bg-hover);
    box-shadow: 0 8px 18px rgba(0, 138, 214, 0.2);
}

.blog-reader-button:active {
    transform: translateY(1px);
}

.blog-reader-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.blog-reader-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.blog-reader-button-secondary {
    background: var(--br-reader-button-secondary-bg, var(--br-reader-controls-bg));
    color: var(--br-reader-button-secondary-text, var(--br-reader-text));
    border-color: var(--br-reader-button-secondary-border, var(--br-reader-controls-border));
}

.blog-reader-button-secondary:hover,
.blog-reader-button-secondary:focus-visible {
    background: var(--br-reader-button-secondary-bg-hover, var(--br-reader-panel-bg));
    box-shadow: none;
}

.blog-reader-prompt-override {
    background: var(--br-prompt-bg);
    color: var(--br-prompt-text);
    border: 1px solid var(--br-prompt-border);
    border-radius: var(--br-reader-radius);
    padding: var(--br-prompt-padding, 16px);
    font-size: var(--br-prompt-font-size);
    display: grid;
    gap: var(--br-reader-gap);
}

.blog-reader-admin-panel .blog-reader-subtitle {
    margin: 0;
    font-size: 1.02em;
}

.blog-reader-admin-block {
    display: grid;
    gap: 8px;
}

.blog-reader-status {
    margin: 0;
    min-height: 1.35em;
    padding: 10px 12px;
    border: 1px solid var(--br-reader-status-info-border);
    border-radius: var(--br-reader-input-radius);
    background: var(--br-reader-status-info-bg);
    color: var(--br-reader-status-info-text);
    font-size: var(--br-reader-helper-size);
}

.blog-reader-status:empty {
    display: none;
}

.blog-reader-status.is-info {
    border-color: var(--br-reader-status-info-border);
    background: var(--br-reader-status-info-bg);
    color: var(--br-reader-status-info-text);
}

.blog-reader-status.is-success {
    border-color: var(--br-reader-status-success-border);
    background: var(--br-reader-status-success-bg);
    color: var(--br-reader-status-success-text);
}

.blog-reader-status.is-warning {
    border-color: var(--br-reader-status-warning-border);
    background: var(--br-reader-status-warning-bg);
    color: var(--br-reader-status-warning-text);
}

.blog-reader-status.is-error {
    border-color: var(--br-reader-status-error-border);
    background: var(--br-reader-status-error-bg);
    color: var(--br-reader-status-error-text);
}

[data-br-role="guiding-thread-status"] {
    margin-top: 4px;
}

.blog-reader-audio-player {
    border: 1px solid var(--br-reader-panel-border);
    border-radius: calc(var(--br-reader-radius) + 2px);
    background: var(--br-reader-audio-player-bg);
    padding: var(--br-reader-audio-player-padding, 10px 12px);
}

.blog-reader-audio-player[hidden] {
    display: none !important;
}

.blog-reader-audio,
#br-audio {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0;
}

.blog-reader-container select:focus-visible,
.blog-reader-container textarea:focus-visible,
.blog-reader-button:focus-visible {
    outline: 2px solid var(--br-reader-focus-color);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .blog-reader-controls {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .blog-reader-language {
        min-width: 100%;
    }

    .blog-reader-controls-action {
        justify-self: stretch;
    }

    .blog-reader-button {
        width: 100%;
    }
}