/* Scoped CSS for the B&W Converter Pro App */

#myBwConverterApp {
    /* Variables now inherit from global or are tool-specific */
    --brand-color: #4da35c;
    --brand-rgb: 77,163,92;
    --bg-primary: var(--input-bg, #f4f7f6);
    --bg-secondary: var(--secondary-bg, #ffffff);
    --bg-tertiary: var(--input-bg, #e9ecef);
    --bg-panel: var(--secondary-bg, #ffffff);
    --bg-control-group: rgba(0, 0, 0, 0.03);
    --bg-method-option: var(--primary-bg, #f4f7f6);
    --bg-method-option-hover: rgba(var(--brand-rgb), 0.15);
    --bg-method-option-active: rgba(var(--brand-rgb), 0.25);
    --text-primary: var(--heading-color, #212529);
    --text-secondary: var(--text-color, #495057);
    --text-muted: #6c757d;
    --border-primary: var(--border-color, #dee2e6);
    --border-accent: rgba(var(--brand-rgb), 0.3);
    --slider-track: rgba(var(--brand-rgb), 0.25);
    --slider-thumb: var(--brand-color);
    --btn-gradient-start: #6bc47c;
    --btn-gradient-end: #4da35c;
    --btn-shadow: rgba(var(--brand-rgb), 0.25);
    --btn-shadow-hover: rgba(var(--brand-rgb), 0.4);
    width: 100%;
    box-sizing: border-box;
}

/* Removed empty ruleset for light-theme-active */

/* Reset for elements within the tool */
#myBwConverterApp *, #myBwConverterApp *::before, #myBwConverterApp *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: inherit; }
#myBwConverterApp .container { width: 100%; }

/* Tool Header */
#myBwConverterApp .bwc-pro-tool-app-header { background: var(--bg-secondary); padding: 15px 20px; border-bottom: 1px solid var(--border-primary); border-radius: 12px 12px 0 0; }
#myBwConverterApp .bwc-pro-seo-heading { text-align: center; font-size: 1.8em; color: var(--text-primary); margin-bottom: 10px; font-weight: 600; }
#myBwConverterApp .bwc-pro-seo-description { text-align: center; font-size: .9em; color: var(--text-secondary); line-height: 1.5; max-width: 700px; margin: 0 auto 15px auto; }
#myBwConverterApp .header-bar { display: flex; justify-content: space-between; align-items: center; }
#myBwConverterApp .app-title { color: var(--text-primary); font-size: 1.6rem; font-weight: 600; }
#myBwConverterApp #themeToggleBtn { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 8px 12px; font-size: 1em; border-radius: 6px; cursor: pointer; transition: background-color .3s,color .3s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; }
#myBwConverterApp #themeToggleBtn:hover { background: var(--brand-color); color: white; }
#myBwConverterApp button:focus-visible, #myBwConverterApp input:focus-visible, #myBwConverterApp select:focus-visible, #myBwConverterApp .method-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-color-light); }
#myBwConverterApp #themeToggleBtn .bwc-icon-moon, #myBwConverterApp #themeToggleBtn .bwc-icon-sun { font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-font-smoothing: antialiased; }
#myBwConverterApp #themeToggleBtn .bwc-icon-moon::before { content: "\f186"; }
#myBwConverterApp #themeToggleBtn .bwc-icon-sun::before { content: "\f185"; }
#myBwConverterApp #themeToggleBtn .bwc-icon-moon { display: inline-block; }
#myBwConverterApp #themeToggleBtn .bwc-icon-sun { display: none; }
#myBwConverterApp.light-theme-active #themeToggleBtn .bwc-icon-moon { display: none; }
#myBwConverterApp.light-theme-active #themeToggleBtn .bwc-icon-sun { display: inline-block; }

/* Main Content Layout */
#myBwConverterApp .content { display: flex; flex-direction: column; padding: 15px; gap: 15px; }
#myBwConverterApp .bwc-top-workspace { display: flex; gap: 15px; width: 100%; }
#myBwConverterApp .upload-section { flex: 7; min-width: 320px; }
#myBwConverterApp .primary-controls { flex: 3; min-width: 280px; }
#myBwConverterApp .bwc-bottom-workspace { display: flex; width: 100%; }
#myBwConverterApp .secondary-controls { width: 100%; }
#myBwConverterApp .secondary-controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 992px) { #myBwConverterApp .bwc-top-workspace { flex-direction: column; } }
@media (max-width: 768px) { #myBwConverterApp .secondary-controls-grid { grid-template-columns: 1fr; } }

/* Shared Panel Styles */
#myBwConverterApp .upload-section, #myBwConverterApp .controls { background: var(--bg-tertiary); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-primary); }
#myBwConverterApp .upload-section.dragover { background-color: rgba(var(--brand-rgb), .1); border-color: var(--border-color); }
#myBwConverterApp .section-title { color: var(--text-secondary); font-size: 1.3rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
#myBwConverterApp .section-title h2 { font-size: inherit; font-weight: inherit; color: inherit; line-height: 1.2; }
#myBwConverterApp #imageInput { display: none; }

/* Upload Section */
#myBwConverterApp #uploadButton { background: var(--bg-control-group); color: var(--text-primary); padding: 9px 15px; font-size: .9rem; border-radius: 6px; cursor: pointer; transition: background-color .3s,transform .2s; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-primary); align-self: flex-start; margin-bottom: 8px; }
#myBwConverterApp #uploadButton:hover { background: var(--brand-color); color: white; transform: translateY(-1px); }
#myBwConverterApp #uploadButton i { font-size: .9rem; }
#myBwConverterApp .upload-hint { font-size: .75rem; color: var(--text-muted); margin-top: -5px; margin-bottom: 8px; }
#myBwConverterApp .preview-container { display: flex; flex-direction: column; gap: 12px; width: 100%; flex-grow: 1; }
#myBwConverterApp .preview-box { width: 100%; text-align: center; display: flex; flex-direction: column; flex-grow: 1; }
#myBwConverterApp .preview-box h4 { color: var(--text-secondary); margin-bottom: 8px; font-size: 1rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
#myBwConverterApp .preview-img { width: 100%; background: var(--bg-primary); border-radius: 8px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 1px solid var(--border-primary); box-shadow: inset 0 0 10px rgba(0,0,0,.1); flex-grow: 1; }
#myBwConverterApp #originalPreview.preview-img { height: 150px; max-height: 150px; flex-grow: 0; }
#myBwConverterApp #resultPreview.preview-img { min-height: 300px; }
#myBwConverterApp .preview-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#myBwConverterApp .placeholder-text { color: var(--text-muted); font-size: .85rem; padding: 10px; }

/* Controls Section */
#myBwConverterApp .control-group { background: var(--bg-control-group); border-radius: 10px; padding: 15px; border: 1px solid var(--border-primary); }
#myBwConverterApp .control-group h3 { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 12px; line-height: 1.2; }
#myBwConverterApp .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
#myBwConverterApp .method-option { background: var(--bg-method-option); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all .2s ease; display: flex; flex-direction: column; align-items: center; }
#myBwConverterApp .method-option:hover { transform: translateY(-2px); background: var(--bg-method-option-hover); border-color: var(--border-accent); }
#myBwConverterApp .method-option.active { border-color: var(--brand-color); background: var(--bg-method-option-active); box-shadow: 0 0 10px rgba(var(--brand-rgb),.2); }
#myBwConverterApp .method-option i { font-size: 1.8rem; color: var(--brand-color); margin-bottom: 8px; }
#myBwConverterApp .method-option.active i { color: var(--text-primary); }
#myBwConverterApp .method-option h5 { font-size: .9rem; font-weight: 500; margin-bottom: 4px; line-height: 1.2; color: var(--text-primary); }
#myBwConverterApp .method-option p { color: var(--text-muted); font-size: .75rem; line-height: 1.2; }
#myBwConverterApp .slider-container { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
#myBwConverterApp .slider-container label { font-size: .9rem; color: var(--text-primary); white-space: nowrap; }
#myBwConverterApp .slider-container span { font-size: .9rem; color: var(--text-primary); text-align: right; min-width: 45px; }
#myBwConverterApp .slider-container input[type=color], #myBwConverterApp .slider-container select { grid-column: 2 / span 2; width: 100%; padding: 4px 8px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--input-bg, #f8f9fa); color: var(--text-primary); font-size: .85rem; cursor: pointer; }
#myBwConverterApp .slider-container input[type=color] { padding: 1px; height: 28px; }
#myBwConverterApp .slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--slider-track); border-radius: 3px; outline: none; }
#myBwConverterApp .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--slider-thumb); cursor: pointer; border: 2px solid var(--bg-secondary); box-shadow: 0 0 6px rgba(var(--brand-rgb),.4); }
#myBwConverterApp .slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--slider-thumb); cursor: pointer; border: 2px solid var(--bg-secondary); box-shadow: 0 0 6px rgba(var(--brand-rgb),.4); }
#myBwConverterApp .separator { border: 0; border-top: 1px solid var(--border-primary); margin: 15px 0; }
#myBwConverterApp .action-buttons { display: grid; gap: 10px; margin-top: auto; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); padding-top: 15px; }
#myBwConverterApp .btn { min-width: 100px; background-image: linear-gradient(135deg,var(--btn-gradient-start),var(--btn-gradient-end)); color: white; border: none; padding: 10px 15px; font-size: .9rem; border-radius: 8px; cursor: pointer; transition: all .2s ease; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 10px var(--btn-shadow); }
#myBwConverterApp .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 12px var(--btn-shadow-hover); filter: brightness(1.1); }
#myBwConverterApp .btn:active { transform: translateY(0); filter: brightness(.95); }
#myBwConverterApp .btn:disabled { opacity: .6; cursor: not-allowed; background-image: linear-gradient(135deg,#7c7c7c,#5c5c5c); box-shadow: none; }
#myBwConverterApp .btn i { font-size: .9rem; }
#myBwConverterApp .btn.reset { background-image: linear-gradient(135deg,#f98326,#ea680c); }
#myBwConverterApp .btn.random { background-image: linear-gradient(135deg,#e0479b,#c026d3); }
#myBwConverterApp .btn.undo, #myBwConverterApp .btn.redo { background-image: linear-gradient(135deg,#3a8a4a,#2a6a3a); }
#myBwConverterApp .status { color: var(--brand-color); margin-top: auto; font-weight: 500; text-align: center; min-height: 18px; font-size: .9rem; padding-top: 10px; }
#myBwConverterApp canvas { display: none; }
#myBwConverterApp .fas, #myBwConverterApp .far, #myBwConverterApp .fal, #myBwConverterApp .fad { font-family: "Font Awesome 6 Free",FontAwesome,sans-serif; font-weight: 900; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; }
#myBwConverterApp .bwc-pro-info-wrapper { width: 100%; display: flex; flex-direction: column; gap: 15px; padding-top: 15px; }
#myBwConverterApp .info-section { background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 12px; padding: 25px; color: var(--text-secondary); }
#myBwConverterApp .info-section h2 { font-size: 1.6rem; color: var(--text-primary); margin-bottom: 20px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--border-primary); padding-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
#myBwConverterApp .info-section h3 { font-size: 1.2rem; color: var(--text-primary); margin-top: 20px; margin-bottom: 10px; font-weight: 500; }
#myBwConverterApp .info-section p { font-size: .95rem; line-height: 1.7; margin-bottom: 10px; }
#myBwConverterApp .info-section ul { list-style-position: outside; list-style-type: disc; margin-left: 20px; padding: 0; }
#myBwConverterApp .info-section ul li { margin-bottom: 8px; line-height: 1.6; }
#myBwConverterApp .info-section ul li::marker { color: var(--brand-color); }
#myBwConverterApp .info-section ul li strong { color: var(--text-primary); font-weight: 500; }
@media (max-width:768px){#myBwConverterApp .bwc-pro-tool-app-header{padding:10px 15px}#myBwConverterApp .bwc-pro-seo-heading{font-size:1.5em}#myBwConverterApp .header-bar{flex-direction:column;gap:10px;padding:10px 0 0 0}#myBwConverterApp .app-title{font-size:1.3rem;text-align:center}#myBwConverterApp #themeToggleBtn{align-self:center}#myBwConverterApp .method-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}#myBwConverterApp .info-section{padding:15px}#myBwConverterApp .info-section h2{font-size:1.4rem}#myBwConverterApp .info-section h3{font-size:1.1rem}}