/* Shared accessibility and layout fixes; deliberately loaded after legacy styles. */
html { scroll-padding-top: 100px; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
:where(button, input, textarea, select) { font: inherit; }
:where(img, video) { max-width: 100%; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #0284c7 !important; outline-offset: 4px; }
:where(.form-group, .form-grid > *, .me-hero-copy, .detail-copy) { min-width: 0; }
:where(.form-control, input, select, textarea) { max-width: 100%; }
.skip-link { position: fixed; top: 8px; right: 8px; z-index: 100000; padding: 10px 18px; background: #fff; color: #16233c; border-radius: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
html[data-theme="light"] body.me-home-dark {
 --me-bg: #f0f4ff; --me-bg-2: #e6eefb; --me-card: #fff; --me-card-2: #edf3fc;
 --me-border: #becde3; --me-border-soft: #d6e1ef; --me-text: #172b46; --me-muted: #4e627c; --me-faint: #536b87;
 --me-blue: #0369a1; --me-blue-2: #1d4ed8; --me-blue-3: #075985;
 --me-shadow: 0 12px 36px rgba(30,58,138,.08);
 background: linear-gradient(180deg,#f0f4ff,#f8faff) !important; color: var(--me-text) !important;
}
html[data-theme="light"] body.me-home-dark::before,
html[data-theme="light"] body.me-home-dark::after,
html[data-theme="light"] body.me-home-dark .me-bg-orb { display:none !important; }
html[data-theme="light"] body.me-home-dark :is(.me-topbar,.me-footer,.me-service-card,.me-why,.me-home-expert,.repairman-card,.me-article-card,.article-card,.me-conversion-card,.me-trust-box,.faq-item,.modal-content,.auth-modal-content,.contact-card,.about-card,.me-loading,.me-empty) {
 background: var(--me-card) !important; color: var(--me-text) !important; border-color: var(--me-border-soft) !important; box-shadow: var(--me-shadow);
}
html[data-theme="light"] body.me-home-dark :is(.me-brand-text strong,.me-section-title h2,.me-service-card h3,.me-why h2,.me-why-grid strong,.me-home-expert h3,.repairman-card h3,.me-conversion-card h3,.me-trust-box h2,.me-footer h3,.faq-question,.modal-title,.auth-title) { color: var(--me-text) !important; }
html[data-theme="light"] body.me-home-dark :is(.me-section-title p,.me-service-card p,.me-why-grid span,.me-home-expert p,.me-conversion-card p,.me-trust-box p,.me-footer p,.faq-answer,.me-brand-text small) { color: var(--me-muted) !important; }
html[data-theme="light"] body.me-home-dark :is(.me-trust-box li,.me-seo-service-links a,.me-why-grid div) { background:#eaf2fc !important; color:#172b46 !important; border-color:#ccdbee !important; }
html[data-theme="light"] body.me-home-dark :is(.form-control,input,textarea,select) { background:#fff !important; color:#172b46 !important; border-color:#becde3 !important; }
html[data-theme="light"] body.me-home-dark :is(.me-nav,.me-login-btn,.me-exit-btn) { color:#172b46 !important; }
/* Hero artwork is dark in both themes: keep all overlay copy readable. */
body.me-home-dark .me-hero { --me-text:#f5f9ff; --me-muted:#cedcf0; --text-color:#f5f9ff; --text-muted:#cedcf0; }
body.me-home-dark .me-hero :is(h1,p,.me-hero-stats span,.me-hero-stats b,.btn-outline) { color:#f5f9ff !important; }
body.me-home-dark .theme-switch { width:44px; height:44px; min-width:44px; flex-shrink:0; border-radius:12px; border:1px solid var(--me-border-soft); background:var(--me-card); color:var(--me-text); cursor:pointer; }
@media(max-width:760px) {
 body.me-home-dark .me-topbar { flex-wrap:wrap; gap:12px !important; }
 body.me-home-dark .me-brand { min-width:0; flex:1; }
 body.me-home-dark .me-brand-text { min-width:0; }
 body.me-home-dark .me-actions { gap:8px; flex-wrap:wrap; }
 body.me-home-dark .me-shell { width:calc(100% - 24px); }
 .settings-tabs { max-width:100%; overflow-x:auto; flex-wrap:nowrap !important; }
 .settings-tabs .settings-tab { flex-shrink:0; white-space:nowrap; min-height:44px; }
 #panel-payment input, #panel-payment select { width:100%; min-width:0; }
 .dashboard-content, .page-content { min-width:0; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto !important; }
 *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body.me-home-dark .articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
body.me-home-dark .article-card { min-width:0; border-radius:20px !important; overflow:hidden; }
body.me-home-dark .article-card .article-image { aspect-ratio:8/5; height:auto !important; }
body.me-home-dark .article-card .article-image img { width:100%; height:100%; object-fit:cover; }
body.me-home-dark .article-card .article-body { padding:22px !important; }
body.me-home-dark .article-card h3 { line-height:1.9 !important; overflow-wrap:anywhere; }
body.me-home-dark .article-card .excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:2; }
@media(max-width:960px) { body.me-home-dark .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { body.me-home-dark .articles-grid { grid-template-columns:minmax(0,1fr); } }

/* Legacy home panels also need explicit light surfaces rather than inherited dark fills. */
html[data-theme="light"] body.me-home-dark :is(.card,.me-auth-card,.article-modal-box,.me-home-article-card,.me-home-article-pro,.me-trust,.me-contact-hero,.me-contact-info,.me-about-hero,.me-about-process,.me-about-signature-v24) { background:var(--me-card) !important; border-color:var(--me-border-soft) !important; color:var(--me-text) !important; }
html[data-theme="light"] body.me-home-dark :is(.card,.me-auth-card,.article-modal-box,.me-home-article-card,.me-trust,.me-contact-hero,.me-contact-info,.me-about-hero,.me-about-process,.me-about-signature-v24) :is(h2,h3,h4,strong,label) { color:var(--me-text) !important; }
html[data-theme="light"] body.me-home-dark :is(.card,.me-auth-card,.article-modal-box,.me-home-article-card,.me-trust,.me-contact-hero,.me-contact-info,.me-about-hero,.me-about-process,.me-about-signature-v24) :is(p,small,.excerpt,.meta) { color:var(--me-muted) !important; }
html[data-theme="light"] body.me-home-dark .me-nav a { color:var(--me-text) !important; }
html[data-theme="light"] body.me-home-dark .me-footer :is(a,h4) { color:var(--me-text) !important; }
html[data-theme="light"] body.me-home-dark .copyright :is(p,span) { color:var(--me-muted) !important; }
@media(max-width:1100px) { html[data-theme="light"] body.me-home-dark .me-nav { background:#fff !important; } }