/* 🌗 الثيم الداكن لكل الشاشات (الموقع والتطبيق). الورقة نفسها (.page) بتفضل أبيض وأسود زي ما هتتطبع. */
html[data-theme=dark] { color-scheme: dark; --field: #0f1a2e; --soft: #1a2540; --soft2: #22304f; }
html[data-theme=dark] body, html[data-theme=dark] body.app-shell { background: var(--bg); color: var(--text); }

/* form fields everywhere */
html[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
html[data-theme=dark] select, html[data-theme=dark] textarea {
  background: var(--field) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme=dark] ::placeholder { color: #6b7a94; }
html[data-theme=dark] option, html[data-theme=dark] optgroup { background: var(--panel); color: var(--text); }

/* app.css surfaces */
html[data-theme=dark] .drop { background: var(--field); border-color: #34445f; }
html[data-theme=dark] .drop:hover, html[data-theme=dark] .drop.over { background: #0f2a2a; }
html[data-theme=dark] .thumb, html[data-theme=dark] .presets button, html[data-theme=dark] .preview,
html[data-theme=dark] .symbols button, html[data-theme=dark] .icon-grid button, html[data-theme=dark] .tabs-mini button { background: var(--soft); color: var(--text); }
html[data-theme=dark] .icon-grid button.sel { background: #0f2a2a; }
html[data-theme=dark] .busy-card, html[data-theme=dark] .modal { background: var(--panel); color: var(--text); }
html[data-theme=dark] .spinner { border-color: var(--soft2); border-top-color: var(--brand); }
html[data-theme=dark] .toolbar button, html[data-theme=dark] .x { color: var(--text); }
html[data-theme=dark] .pages-scroll { background: var(--bg); }
html[data-theme=dark] #pages .page { box-shadow: 0 2px 16px rgba(0,0,0,.6); }
html[data-theme=dark] .toast { background: #e6ecf5; color: #0c1322; }
html[data-theme=dark] .toast.err { background: var(--danger); color: #fff; }
html[data-theme=dark] .modal-foot .danger, html[data-theme=dark] #pages .page-del { background: #3b1620; }

/* account / admin */
html[data-theme=dark] .auth-card, html[data-theme=dark] .user-btn, html[data-theme=dark] .user-drop, html[data-theme=dark] .ap-intro,
html[data-theme=dark] .ap-card, html[data-theme=dark] .table-wrap, html[data-theme=dark] .stats div, html[data-theme=dark] .mini-btn { background: var(--panel); color: var(--text); }
html[data-theme=dark] .mini-btn.ok { background: var(--brand); color: #fff; }
html[data-theme=dark] .auth-tabs button.active { background: var(--soft2); color: var(--text); }
html[data-theme=dark] .google-btn { background: #fff; color: #3c4043; }
html[data-theme=dark] .ap-table th, html[data-theme=dark] .src-default, html[data-theme=dark] code.copy, html[data-theme=dark] .bar { background: var(--soft); color: var(--muted); }
html[data-theme=dark] .ap-table tr.st-pending td, html[data-theme=dark] .warn { background: #2a2210; color: #fcd34d; border-color: #5c4813; }
html[data-theme=dark] .plan-card, html[data-theme=dark] .req-row { border-color: var(--border); }
html[data-theme=dark] .plan-card.cur { background: #0f2a2a; }
html[data-theme=dark] .admin-panel, html[data-theme=dark] .ap-body { background: var(--bg); color: var(--text); }

/* scanner / book */
html[data-theme=dark] .scan-page, html[data-theme=dark] .scan-page img { background: var(--soft); }
html[data-theme=dark] .book-info { background: #0f2a2a; border-color: #115e59; }

/* shapes library + maths keyboard + save formats */
html[data-theme=dark] .sp-search, html[data-theme=dark] .sp-chips button, html[data-theme=dark] .sp-card, html[data-theme=dark] .sp-prev,
html[data-theme=dark] .sp-labels label, html[data-theme=dark] .mp, html[data-theme=dark] .mp-key, html[data-theme=dark] .sv-fmt { background: var(--panel); color: var(--text); }
html[data-theme=dark] .sp-grades button, html[data-theme=dark] .mp-tabs, html[data-theme=dark] .sv-note { background: var(--soft); }
html[data-theme=dark] .mp-tabs button.on, html[data-theme=dark] .mp-key:hover, html[data-theme=dark] .sv-fmt.on { background: #0f2a2a; color: #5eead4; }
html[data-theme=dark] .sp-chips button.on { background: var(--brand); color: #fff; }
html[data-theme=dark] .sp-card svg, html[data-theme=dark] .sp-prev svg, html[data-theme=dark] .icon-grid svg { background: #fff; border-radius: 8px; }

/* phone app */
html[data-theme=dark] .m-nav, html[data-theme=dark] .m-sheet-card, html[data-theme=dark] .m-quick .ghost,
html[data-theme=dark] body.app-shell .side .panel:not(.hidden) { background: var(--panel); color: var(--text); }
html[data-theme=dark] body.app-shell .side .panel h3 { color: var(--text); }
html[data-theme=dark] .m-nav button { color: var(--muted); }
html[data-theme=dark] .m-nav button.active { color: #5eead4; }
html[data-theme=dark] .m-dot { border-color: var(--panel); }
html[data-theme=dark] .m-bar { background: linear-gradient(135deg, #0b3b37, #0c1322); }

/* small shared bits */
.auth-tools { display: flex; gap: 6px; justify-content: flex-end; margin: -10px -6px 4px; }
.auth-tools button { padding: 4px 10px; font-size: 13px; }
.m-right { display: flex; align-items: center; gap: 6px; }
.m-ico { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: 10px; min-width: 34px; height: 32px; font-weight: 700; font-size: 13px; }

/* English / left-to-right layout fixes */
html[dir=ltr] .panel label, html[dir=ltr] .hint { text-align: left; }
html[dir=ltr] .side { border-inline-end: 1px solid var(--border); }