/* Popup-wide control styles. Keep provider panels on these same tokens. */
:root { --settings-control-border:#718096; }
@media (prefers-color-scheme: dark) { :root { --settings-control-border:#71869e; } }
.popup-settings-panel input:not([type="checkbox"]):not([type="range"]),
.popup-settings-panel select, .popup-settings-panel textarea, .popup-reviewed-control {
    box-sizing:border-box; max-width:100%; padding:6px 8px; font:inherit;
    color:var(--default-text-color); background:var(--color-accent-subtle);
    border:1px solid var(--settings-control-border); border-radius:4px;
}
.popup-settings-panel input::placeholder, .popup-settings-panel textarea::placeholder { color:var(--placeholder-color); opacity:1; }
.popup-settings-panel button:not(.tts-test-button):not(.textInputUploadButton), .overlayButton, .popup-icon-button {
    font:inherit; padding:5px 9px; min-height:30px; border:1px solid var(--settings-control-border);
    border-radius:4px; background:var(--button-background); color:var(--text-button-text); cursor:pointer;
}
.popup-settings-panel button:disabled { opacity:.65; cursor:default; }
.popup-icon-button { background:transparent; }
.popup-settings-panel summary { cursor:pointer; padding:6px 0; }
.popup-settings-panel .popup-subsection, .popup-subsection { border-top:1px solid var(--collapsible-border-color); margin-top:12px; padding-top:8px; }
#sticker-rewards-settings, #captureSiteReminder { padding:12px; margin:10px 0; border:1px solid var(--collapsible-border-color); border-radius:4px; background:var(--options-group-background-color); color:var(--default-text-color); }
.popup-settings-panel .popup-toggle-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.popup-toggle-row label.switch { flex:0 0 30px; }
.popup-toggle-row > label:not(.switch) { flex:1; min-width:100px; cursor:pointer; }
.popup-guide-link { display:block; margin:8px 0; font-size:.9em; color:var(--text-secondary); }
.popup-settings-panel a { color:var(--color-accent); }
.popup-reviewed-control:focus, .popup-settings-panel input:focus, .popup-settings-panel select:focus, .popup-settings-panel button:focus,
.popup-settings-panel summary:focus, .popup-settings-panel a:focus, .overlayButton:focus, .popup-icon-button:focus {
    outline:2px solid var(--color-accent); outline-offset:2px;
}
.popup-settings-panel .slider { box-shadow:inset 0 0 0 1px var(--settings-control-border); }
.popup-settings-panel .popup-toggle-row .switch { margin-right:4px; }
.switch input:focus + .slider { outline:2px solid var(--color-accent); outline-offset:3px; }
/* Preserve native keyboard toggling for the popup's existing accordion pattern. */
.collapsible { position:relative; }
.collapsible-input { display:block; position:absolute; width:1px; height:1px; opacity:0; }
.collapsible-input:focus + .collapsible-label { outline:2px solid var(--color-accent); outline-offset:-3px; }
body .popup-settings-panel .textInputContainer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 0; margin:6px 0; }
body .popup-settings-panel .textInputContainer .textInput { grid-area:2 / 1 / 3 / 3; height:auto; min-height:32px; }
body .popup-settings-panel .textInputContainer .textInput + label { position:static; grid-area:1 / 1 / 2 / 3; font-size:1em; padding:0; max-width:100%; color:var(--default-text-color); }
body .popup-settings-panel .textInputContainer .textInput + label::before { display:none; }
body .popup-settings-panel .textInputContainer .textInputUploadButton { grid-area:2 / 2; position:static; }
#monetization-settings > summary { font-size:1.17em; font-weight:600; color:var(--h3-color); background:var(--collapsible-label-color); padding:4px 8px; border-radius:4px; }
#sticker-custom-form input[type="text"], #sticker-custom-form input[type="url"] { display:block; width:100%; }
@media (prefers-reduced-motion: reduce) { html, html.extension-popup-surface body { scroll-behavior:auto; } .slider, .slider:before { transition:none; } }

/* Text fields and selectors use the same palette in old and new sections. */
body input[type="text"], body input[type="password"], body input[type="url"],
body input[type="email"], body input[type="number"], body textarea, body select {
    box-sizing:border-box; max-width:100%; border:1px solid var(--settings-control-border);
    border-radius:4px; background:var(--color-accent-subtle); color:var(--default-text-color);
    font:inherit; padding:6px 8px;
}
body input::placeholder, body textarea::placeholder { color:var(--placeholder-color); opacity:1; }
body input:focus, body select:focus, body textarea:focus, body button:focus,
body a:focus, body summary:focus { outline:2px solid var(--color-accent); outline-offset:2px; }

/* Visible labels stay above fields rather than competing with placeholders. */
body .textInputContainer { display:inline-grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 0; margin:8px 0; vertical-align:top; }
body .textInputContainer .textInput { grid-area:2 / 1 / 3 / 3; min-height:32px; height:auto; }
body .textInputContainer .textInput + label { position:static; grid-area:1 / 1 / 2 / 3; max-width:100%; padding:0; font-size:1em; color:var(--default-text-color); white-space:normal; }
body .textInputContainer .textInput + label::before { display:none; }
body .textInputContainer .textInputUploadButton { grid-area:2 / 2; position:static; }

/* Normal actions are neutral; test/play actions keep the familiar blue style. */
body .options button:not(.glowingButton):not(.copy-link-btn),
body .popup-settings-panel button, body .popup-secondary-button {
    font:inherit; line-height:1.25; min-height:30px; padding:5px 9px;
    border:1px solid var(--settings-control-border); border-radius:4px;
    background:var(--button-background); color:var(--text-button-text); cursor:pointer;
}
body .options button.tts-test-button:not(.glowingButton), body .popup-settings-panel button.tts-test-button {
    background:#0066d4; color:#fff; border-color:#0066d4;
}
body .options button.textInputUploadButton:not(.glowingButton) {
    background:var(--upload-button-bg); color:#fff; border-color:var(--upload-button-bg);
}
body button:disabled { cursor:default; }
body .options button:disabled { opacity:.65; }
.popup-secondary-button { margin:2px 1px; }

body .options h4, body .options h5 { color:var(--h3-color); font-size:1em; font-weight:600; margin:12px 0 8px; }
body .options details > summary, body .popup-settings-panel details > summary {
    color:var(--h3-color); font-size:1em; font-weight:600; line-height:1.4;
    padding:8px 0; cursor:pointer;
}
body .options details + details { border-top:1px solid var(--collapsible-border-color); margin-top:8px; }
body .slider { box-shadow:inset 0 0 0 1px var(--settings-control-border); }

/* Decorative cues remain outside translated text and screen-reader names. */
.popup-control-icon { display:inline-block; min-width:1.15em; margin-right:.3em; font-size:1em; line-height:1; text-align:center; vertical-align:baseline; }
body .textInputWithUpload .textInput { padding-right:96px; }

/* Audience setup uses the standard accordion, fields, and theme tokens. */
#nc-audience-room .nc-audience-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; }
#nc-audience-room .textInputContainer { width:100%; }
#nc-audience-room [data-nc-public-url], #nc-audience-room [data-nc-code] { direction:ltr; }
#nc-audience-room [hidden] { display:none !important; }
#nc-audience-room p, #nc-audience-room a { overflow-wrap:anywhere; }
#nc-audience-room { text-align:start; }

/* Compact heading copy actions match the adjacent link controls. */
body .heading-actions button.copy-link, body button.edit-link {
    border:0; margin:0; font-family:inherit; line-height:inherit;
}
body .heading-actions button.copy-link:focus, body button.edit-link:focus {
    outline:2px solid var(--color-accent); outline-offset:2px;
}

/* Giveaway controls reuse the shared field and action styles. */
.options_group.giveaway .textInputContainer { display:grid; width:100%; }
.giveaway-actions { display:flex; flex-wrap:wrap; gap:6px; }