:root { --bg: #f6f4ef; --card: #fff; --ink: #1d2a22; --muted: #6a756e; --accent: #1f6b4f; --line: #d9d6cc; --mark: #ffe58a; }
@media (prefers-color-scheme: dark) { :root { --bg: #14201a; --card: #1c2b23; --ink: #e8eee9; --muted: #9db0a5; --accent: #5fc59a; --line: #2f4237; --mark: #6b5a12; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.8 "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }
.top { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; background: var(--accent); color: #fff; }
.top .muted { color: #e3f2ea; flex: 1; font-size: .9rem; }
main { max-width: 860px; margin: 0 auto; padding: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; margin: 0 0 .8rem; }
.search { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .search { grid-template-columns: 1fr 14rem auto; } }
input, select, button { font: inherit; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; }
button { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
button.small { padding: .25rem .6rem; font-size: .9rem; }
button.link { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0; }
button:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: .6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.muted, .note { color: var(--muted); }
.note { font-size: .9rem; }
.pill { margin-inline-start: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 0 .6rem; font-size: .85rem; }
.text { white-space: pre-wrap; margin: .4rem 0 .6rem; }
.reader { border-color: var(--accent); }
.reader .text { max-height: 60vh; overflow: auto; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }