@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --ink: #123f33;
  --muted: #71827b;
  --paper: #f5faf7;
  --surface: rgba(255, 255, 255, .9);
  --line: #e6eeea;
  --green: #147d60;
  --green-deep: #0d654e;
  --mint: #e2f3e9;
  --amber: #c9851d;
  --amber-soft: #fff5df;
  --red: #c44c46;
  --red-soft: #fff0ee;
  --shadow: 0 24px 70px rgba(31, 72, 58, .08);
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
 [hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.ambient { position: fixed; pointer-events: none; border-radius: 50%; filter: blur(2px); opacity: .55; z-index: 0; }
.ambient-one { width: 380px; height: 380px; background: #e5f5eb; top: -120px; right: -120px; }
.ambient-two { width: 260px; height: 260px; background: #fff2d6; left: -100px; bottom: 80px; opacity: .35; }
.page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(211, 226, 218, .72); position: relative; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: 19px; line-height: 1; letter-spacing: -.04em; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; color: #e4f8ec; background: linear-gradient(145deg, #15906d, #0c6a51); box-shadow: 0 9px 20px rgba(11, 116, 88, .16); transition: transform .25s ease, box-shadow .25s ease; }
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 13px 24px rgba(11, 116, 88, .2); }.brand-mark svg { width: 28px; height: 28px; }
.brand-mark span { width: 4px; border-radius: 8px; background: #dff5e7; display: block; }
.brand-mark span:nth-child(1) { height: 11px; opacity: .66; }.brand-mark span:nth-child(2) { height: 19px; }.brand-mark span:nth-child(3) { height: 14px; opacity: .8; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #43a77d; box-shadow: 0 0 0 5px #eaf6f0; }
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }.topbar-center strong { display: block; font-size: 18px; }.topbar-center span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }.menu-button { width: 54px; height: 54px; border: 1px solid #dbe8e1; color: #58766c; background: rgba(255,255,255,.78); border-radius: 17px; font-size: 25px; line-height: 1; box-shadow: 0 4px 14px rgba(31,72,58,.04); }
.quran-widget { background: rgba(255,255,255,.78); border: 1px solid #e0ebe5; border-radius: 18px; padding: 13px 16px; box-shadow: 0 10px 28px rgba(31,72,58,.035); margin-top: 18px; }.quran-heading { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 13px; }.quran-heading strong { font-size: 16px; }.quran-heading > span:last-child { color: var(--muted); font-size: 11px; margin-right: auto; }.book-icon { font-size: 20px; }.quran-controls { display: grid; grid-template-columns: .78fr 1.22fr; gap: 12px; margin-top: 10px; }.audio-controls { min-height: 43px; display: flex; align-items: center; justify-content: space-around; border-radius: 13px; background: #f1f5f3; color: #18211e; }.audio-controls button { border: 0; background: transparent; color: inherit; font-size: 16px; padding: 8px 10px; border-radius: 9px; }.audio-controls button:hover, .audio-controls button.is-playing { color: var(--green); background: var(--mint); }.audio-controls span { font-size: 11px; color: var(--muted); min-width: 34px; text-align: center; }.surah-select { position: relative; display: block; }.surah-select select { width: 100%; height: 43px; appearance: none; border: 1px solid #dfeae4; border-radius: 13px; background: #fff; color: var(--muted); padding: 0 36px 0 12px; direction: rtl; outline: none; }.surah-select > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; pointer-events: none; }.quran-offline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }.quran-status { color: var(--muted); font-size: 10px; }.quran-status.ready { color: var(--green); }.quran-status.loading { color: var(--amber); }.offline-button { border: 1px solid #bcdaca; color: var(--green); background: #f7fcf9; border-radius: 9px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }.offline-button:hover { background: var(--mint); }.offline-button:disabled { opacity: .65; cursor: wait; }
.hero { min-height: 355px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 90px; padding: 48px 8px 38px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); background: var(--mint); border-radius: 20px; padding: 7px 13px; font-size: 12px; font-weight: 600; }
.eyebrow-icon { font-size: 14px; }
.hero h1 { font-size: clamp(37px, 5.3vw, 67px); line-height: 1.13; letter-spacing: -.07em; margin: 21px 0 14px; font-weight: 700; }
.hero h1 em { font-family: 'Playfair Display', Georgia, serif; color: #8a9991; font-style: italic; font-weight: 600; letter-spacing: -.05em; }
.hero-copy > p { max-width: 565px; margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 27px; }
.primary-button, .outline-button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-radius: 12px; min-height: 45px; padding: 0 18px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button { background: var(--green); color: #fff; font-weight: 600; box-shadow: 0 11px 24px rgba(11, 116, 88, .16); }
.primary-button:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11, 116, 88, .22); }
.primary-button span:first-child { font-size: 18px; line-height: 1; }
.hero-hint { color: var(--muted); font-size: 12px; }.hero-hint b { color: var(--ink); }
.hero-features { display: flex; flex-wrap: wrap; gap: 15px 25px; margin-top: 22px; color: var(--muted); font-size: 11px; }.hero-features span { display: inline-flex; align-items: center; gap: 6px; }.hero-features b { color: #4aa77f; font-size: 15px; }
.hero-card { justify-self: end; width: min(290px, 100%); border-radius: 22px; background: var(--surface); border: 1px solid #e7f0eb; box-shadow: var(--shadow); padding: 22px; transform: rotate(2deg); }
.hero-card-top { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; }.mini-calendar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--green); background: var(--mint); font-size: 17px; }
.hero-card-number { color: var(--green); font-family: 'Playfair Display', Georgia, serif; font-size: 64px; line-height: 1; margin-top: 12px; }.hero-card-label { color: var(--muted); font-size: 12px; margin-bottom: 19px; }
.hero-card-line { border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 11px; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 8px; font-size: 11px; }.hero-card-line b { font-size: 10px; color: var(--muted); font-weight: 500; }.line-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; font-weight: 700; }.line-icon.green { background: var(--mint); color: var(--green); }.line-icon.amber { background: var(--amber-soft); color: var(--amber); }.line-icon.red { background: var(--red-soft); color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }.stat-card { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 78px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; transition: transform .22s ease, box-shadow .22s ease; }.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(31,72,58,.07); }.stat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-weight: 700; font-size: 17px; }.stat-card strong { display: block; font-size: 24px; line-height: 1.1; }.stat-card span:not(.stat-icon) { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }.stat-total .stat-icon { color: #5b7a94; background: #edf4fa; }.stat-safe .stat-icon { color: var(--green); background: var(--mint); }.stat-alert .stat-icon { color: var(--amber); background: var(--amber-soft); }.stat-expired .stat-icon { color: var(--red); background: var(--red-soft); }
.alerts-panel { border: 1px solid #f1dfba; background: linear-gradient(105deg, #fffaf0, #fffdf9); border-radius: 16px; padding: 17px 19px; margin-bottom: 18px; }.alerts-panel.hidden { display: none; }.alert-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }.alert-heading .alert-mark { color: var(--amber); background: var(--amber-soft); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; }.alert-heading h3 { margin: 0; font-size: 14px; }.alert-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.alert-items { display: flex; flex-wrap: wrap; gap: 9px; }.alert-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; color: var(--ink); background: rgba(255,255,255,.76); border: 1px solid #f2e6cb; border-radius: 10px; font-size: 11px; }.alert-chip b { color: var(--amber); }.alert-chip.urgent b { color: var(--red); }
.workspace { display: grid; grid-template-columns: minmax(285px, .75fr) minmax(0, 1.6fr); gap: 18px; align-items: start; direction: ltr; }.form-column, .list-column { direction: rtl; }.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 21px; box-shadow: 0 15px 40px rgba(31,72,58,.045); backdrop-filter: blur(8px); }.form-panel { padding: 23px; }.panel-heading, .list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.section-kicker { display: block; text-transform: uppercase; color: var(--green); letter-spacing: .08em; font-size: 10px; font-weight: 700; margin-bottom: 6px; }.panel h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; }.panel-symbol { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--mint); color: var(--green); font-size: 21px; }.panel-intro { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 15px 0 21px; }.panel-intro b { color: var(--ink); }
form label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 7px; color: #456259; }form label span { color: var(--red); }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
input[type=text], input[type=search] { width: 100%; border: 1px solid #dfeae4; outline: none; color: var(--ink); background: #fff; border-radius: 10px; min-height: 44px; padding: 0 13px; transition: border .2s, box-shadow .2s; direction: rtl; }input::placeholder { color: #a4b1ab; font-size: 11px; }input:focus { border-color: #70b59a; box-shadow: 0 0 0 4px rgba(82, 173, 137, .12); }.input-with-icon { position: relative; }.input-with-icon input { padding-left: 33px; }.input-with-icon span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 14px; pointer-events: none; }.date-help { color: #94a29c; font-size: 10px; margin: 9px 1px 0; }.form-error { color: var(--red); background: var(--red-soft); border: 1px solid #f6d6d1; border-radius: 9px; padding: 9px 10px; font-size: 11px; margin-top: 13px; }.form-actions { display: flex; align-items: center; gap: 13px; margin-top: 20px; }.submit-button { width: 100%; }.text-button { color: var(--muted); border: 0; background: transparent; font-size: 11px; white-space: nowrap; }.text-button:hover { color: var(--ink); }.hidden { display: none !important; }
.tip-card { display: flex; gap: 10px; align-items: flex-start; padding: 15px; margin-top: 13px; border-radius: 15px; background: #f1f8f4; border: 1px solid #e1f0e7; }.tip-icon { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #dff2e7; color: var(--green); }.tip-card strong { font-size: 11px; }.tip-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.list-panel { padding: 23px; min-height: 400px; }.result-count { color: var(--muted); font-size: 11px; padding-top: 7px; }.toolbar { display: flex; align-items: center; gap: 10px; margin: 21px 0 17px; }.search-box { min-width: 170px; flex: 1; position: relative; }.search-box span { position: absolute; right: 12px; top: 50%; transform: translateY(-52%); color: #94a39c; font-size: 19px; }.search-box input { padding-right: 34px; min-height: 39px; background: #fbfdfc; }.filters { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f3f7f4; }.filter-button { border: 0; color: var(--muted); background: transparent; border-radius: 8px; padding: 6px 9px; font-size: 10px; }.filter-button.active { color: var(--green); background: #fff; box-shadow: 0 2px 8px rgba(31,72,58,.08); font-weight: 600; }.materials-list { display: grid; gap: 9px; }.material-item { position: relative; display: grid; grid-template-columns: 39px 1.45fr 1fr auto; align-items: center; gap: 13px; padding: 14px 13px; border: 1px solid #e8efeb; border-radius: 13px; background: #fff; transition: border .2s, transform .2s, box-shadow .2s; }.material-item:hover { border-color: #c9e2d5; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31,72,58,.06); }.material-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: var(--mint); font-weight: 700; font-size: 16px; }.material-main strong { display: block; font-size: 13px; margin-bottom: 4px; }.material-main span, .material-date span { display: block; color: var(--muted); font-size: 10px; }.material-date { text-align: right; }.material-date b { display: block; color: var(--ink); font-size: 11px; margin-bottom: 4px; }.material-status { text-align: left; min-width: 82px; }.status-label { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 5px 8px; font-size: 10px; white-space: nowrap; }.status-label:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-safe { color: var(--green); background: var(--mint); }.status-soon { color: var(--amber); background: var(--amber-soft); }.status-urgent, .status-expired { color: var(--red); background: var(--red-soft); }.item-actions { display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end; }.item-action { border: 0; background: transparent; color: #9aaba3; padding: 2px; font-size: 10px; }.item-action:hover { color: var(--green); }.empty-state { text-align: center; padding: 52px 20px 30px; }.empty-state.hidden { display: none; }.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 12px; background: var(--mint); color: var(--green); border-radius: 15px; font-size: 24px; }.empty-state h3 { margin: 0 0 6px; font-size: 15px; }.empty-state p { color: var(--muted); font-size: 11px; margin: 0 auto 17px; }.outline-button { min-height: 37px; border: 1px solid #bcdaca; color: var(--green); background: #fff; font-size: 11px; }.outline-button:hover { background: var(--mint); }
.footer { display: flex; justify-content: space-between; color: #95a29c; font-size: 10px; padding: 32px 4px 26px; margin-top: 10px; border-top: 1px solid rgba(211, 226, 218, .72); }.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 22px); opacity: 0; pointer-events: none; padding: 10px 15px; color: #fff; background: var(--ink); border-radius: 10px; font-size: 11px; transition: all .25s ease; z-index: 5; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 880px) { .hero { gap: 35px; grid-template-columns: 1fr .7fr; }.workspace { grid-template-columns: 1fr; }.form-column { order: 2; }.list-column { order: 1; } }
@media (max-width: 640px) { .page-shell { width: min(100% - 28px, 520px); }.topbar { height: 68px; }.topbar-center strong { font-size: 15px; }.topbar-center span { font-size: 9px; }.brand small { display: none; }.brand-mark { width: 35px; height: 35px; }.menu-button { width: 47px; height: 47px; border-radius: 15px; }.quran-widget { margin-top: 14px; padding: 12px; }.quran-heading strong { font-size: 14px; }.quran-controls { grid-template-columns: 1fr; gap: 8px; }.audio-controls { order: 2; }.surah-select { order: 1; }.hero { display: block; padding: 45px 2px 29px; text-align: right; }.hero h1 { font-size: clamp(43px, 12vw, 58px); line-height: 1.16; margin-top: 19px; }.hero-copy > p { font-size: 13px; line-height: 1.9; max-width: 95%; }.hero-card { display: none; }.hero-actions { align-items: stretch; flex-direction: column; gap: 11px; margin-top: 24px; }.hero-actions .primary-button { width: 100%; min-height: 57px; font-size: 17px; border-radius: 16px; }.hero-hint { text-align: center; }.hero-features { justify-content: flex-start; gap: 9px 15px; line-height: 1.7; margin-top: 18px; }.stats { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { min-height: 78px; padding: 12px; border-radius: 17px; }.stat-card strong { font-size: 22px; }.stat-card span:not(.stat-icon) { font-size: 10px; }.stat-icon { width: 35px; height: 35px; }.field-grid { grid-template-columns: 1fr; }.toolbar { align-items: stretch; flex-direction: column; }.filters { justify-content: space-between; }.filter-button { flex: 1; }.material-item { grid-template-columns: 35px 1fr auto; gap: 9px; }.material-avatar { width: 35px; height: 35px; }.material-date { grid-column: 2 / -1; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 1px; }.material-status { grid-column: 3; grid-row: 1; }.item-actions { grid-column: 2 / -1; }.footer { flex-direction: column; gap: 7px; } }

.welcome-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 690px; margin: 0 auto; padding: 42px 14px; position: relative; }.welcome-screen.hidden { display: none; }.welcome-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 54px; }.welcome-brand strong { display: block; font-size: 20px; }.welcome-brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }.welcome-illustration { position: absolute; top: 120px; left: 18px; width: 190px; height: 190px; border-radius: 52% 48% 55% 45%; background: linear-gradient(145deg, #e4f5eb, #f9fcfa); opacity: .92; transform: rotate(-12deg); }.welcome-check { position: absolute; right: 64px; top: 62px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; color: white; background: var(--green); font-size: 31px; transform: rotate(12deg); box-shadow: 0 14px 28px rgba(11,116,88,.18); }.welcome-leaf { position: absolute; display: block; width: 55px; height: 90px; border-radius: 100% 0 100% 0; background: #cdebd9; transform: rotate(28deg); }.leaf-one { left: 33px; bottom: 21px; }.leaf-two { left: 76px; bottom: 11px; background: #9ed5b8; transform: rotate(55deg) scale(.8); }.welcome-screen .eyebrow { margin-bottom: 18px; }.welcome-screen h1 { font-size: clamp(43px, 7vw, 76px); line-height: 1.12; letter-spacing: -.07em; margin: 0 0 17px; }.welcome-screen h1 em { font-family: 'Playfair Display', Georgia, serif; color: #8a9991; font-style: italic; font-weight: 600; }.welcome-screen p { max-width: 565px; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }.welcome-button { margin-top: 30px; min-height: 57px; padding: 0 32px; font-size: 17px; border-radius: 16px; }.welcome-benefits { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: 11px; margin-top: 24px; }
body:not(.app-mode) > .ambient, body:not(.app-mode) .page-shell > :not(#welcomeScreen) { display: none; } body.app-mode .welcome-screen { display: none; }
@media (max-width: 640px) { .welcome-screen { min-height: 100svh; padding: 28px 3px; justify-content: center; }.welcome-brand { margin-bottom: 92px; }.welcome-illustration { top: 116px; left: 5px; transform: scale(.78) rotate(-12deg); transform-origin: top left; opacity: .7; }.welcome-screen h1 { font-size: clamp(43px, 12vw, 58px); }.welcome-screen p { font-size: 13px; line-height: 1.9; }.welcome-button { width: 100%; margin-top: 25px; }.welcome-benefits { gap: 9px 16px; line-height: 1.6; } }

/* تحسينات الواجهة المرجعية والقرآن المختصر */
[hidden]{display:none!important}
.welcome-screen{min-height:calc(100vh - 30px);width:min(690px,100%);display:flex;flex-direction:column;align-items:stretch;justify-content:center;margin:0 auto;padding:22px 28px 40px;position:relative}
.welcome-screen:before{content:'';position:absolute;inset:14px 0 24px;border:1px solid rgba(205,220,212,.82);border-radius:38px;background:rgba(255,255,255,.72);box-shadow:0 24px 55px rgba(22,67,52,.08);z-index:-1}
.welcome-brand{display:flex;align-items:center;gap:11px;margin:0 18px 26px}.welcome-brand strong{display:block;font-size:18px}.welcome-brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.welcome-illustration{position:absolute;top:26px;left:32px;width:64px;height:64px;border-radius:19px;background:var(--mint);opacity:1;transform:none}.welcome-check{position:absolute;right:13px;top:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:var(--green);font-size:20px;transform:none;box-shadow:none}.welcome-leaf{display:none}.welcome-screen .eyebrow{align-self:flex-start;margin:40px 0 17px;padding:9px 14px;border:1px solid #d8eae0;border-radius:13px;background:#eff9f2}.welcome-screen h1{font-size:clamp(42px,7vw,73px);line-height:1.16;letter-spacing:-.06em;margin:0 0 18px}.welcome-screen h1 em{font-family:'Playfair Display',Georgia,serif;color:#87978f;font-style:italic;font-weight:600}.welcome-screen p{max-width:570px;margin:0;color:var(--muted);font-size:16px;line-height:2}.welcome-button{align-self:flex-start;margin-top:28px;min-height:59px;padding:0 30px;font-size:17px;border-radius:16px}.welcome-button span{font-size:22px;margin-right:9px}.welcome-benefits{display:flex;flex-direction:column;align-items:flex-start;gap:9px;color:var(--muted);font-size:12px;line-height:1.8;margin:23px 3px 0}.welcome-benefits span{direction:rtl}.welcome-benefits span::first-letter{color:var(--green)}
.quran-widget{padding:9px 13px;border-radius:16px;margin-top:14px}.quran-heading{min-height:36px;gap:8px}.quran-heading strong{font-size:14px}.quran-heading>span:last-of-type{font-size:10px}.quran-widget .quran-controls,.quran-widget .quran-offline-row{display:none}.quran-quick-button{width:34px;height:34px;margin-right:auto;border:0;border-radius:11px;color:#fff;background:linear-gradient(145deg,#168b69,#0d654e);box-shadow:0 7px 14px rgba(11,116,88,.18);font-size:12px;transition:transform .2s ease,box-shadow .2s ease}.quran-quick-button:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(11,116,88,.24)}.quran-quick-button.is-playing{background:#0a5844}.hero-actions{margin-top:20px}.hero-hint{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.58);border:1px solid var(--line)}
@media(max-width:640px){.welcome-screen{min-height:100svh;padding:20px 22px 32px}.welcome-screen:before{inset:10px 0 18px;border-radius:30px}.welcome-brand{margin:0 8px 18px}.welcome-illustration{top:25px;left:26px;transform:scale(.82);transform-origin:top left}.welcome-screen .eyebrow{margin-top:42px;font-size:11px}.welcome-screen h1{font-size:clamp(40px,11.5vw,58px)}.welcome-screen p{font-size:13px;line-height:1.95}.welcome-button{width:100%;font-size:17px}.welcome-benefits{font-size:11px;margin-right:4px}}

/* لوحة التطبيق — مطابقة ترتيب التصميم المرجعي */
.topbar{margin-top:18px;padding:0 6px 14px;border-bottom:0}.quran-widget{display:block;margin-top:14px;padding:14px 18px;border:1px solid #dfe9e3;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(24,66,51,.06)}.quran-heading{min-height:30px;justify-content:flex-start}.quran-heading .book-icon{font-size:21px}.quran-heading strong{font-size:16px;color:var(--green)}.quran-heading>span:last-of-type{font-size:11px;color:var(--muted);margin-right:4px}.quran-quick-button{display:none}.quran-widget .quran-controls{display:grid;grid-template-columns:1fr 1.45fr;gap:12px;margin-top:10px}.quran-widget .audio-controls{display:flex;align-items:center;justify-content:space-around;min-height:43px;border-radius:22px;background:#f5f7f6;direction:ltr}.quran-widget .audio-controls button{border:0;background:transparent;color:#111;font-size:19px}.quran-widget .audio-controls span{color:var(--muted);font-size:10px}.quran-widget .surah-select{display:block;position:relative}.quran-widget .surah-select select{width:100%;height:43px;padding:0 35px 0 12px;border:1px solid #dce7e1;border-radius:13px;background:#fff;color:var(--muted);font:inherit;font-size:12px;direction:rtl}.quran-widget .surah-select>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1}.quran-widget .quran-offline-row{display:none}.hero{padding-top:54px}.hero-copy{max-width:760px}.hero .eyebrow{margin-bottom:18px}.hero h1{font-size:clamp(45px,7vw,78px);line-height:1.13}.hero-copy>p{font-size:17px;line-height:1.9;max-width:590px}.hero-actions{margin-top:27px}.hero-add-button{min-height:58px;width:min(100%,650px);font-size:18px;border-radius:17px;justify-content:center}.hero-add-button span{font-size:28px;line-height:0}.stats{margin-top:22px}.stat-card{min-height:102px;border-radius:22px}.stat-card strong{font-size:28px}.stat-card span:not(.stat-icon){font-size:12px}.workspace{margin-top:26px}
@media(max-width:640px){.topbar{margin-top:8px;padding-bottom:10px}.quran-widget{margin-top:8px;padding:12px;border-radius:19px}.quran-widget .quran-controls{grid-template-columns:1fr;gap:8px}.quran-widget .audio-controls{order:2}.quran-widget .surah-select{order:1}.hero{padding-top:42px}.hero h1{font-size:clamp(43px,12vw,60px)}.hero-copy>p{font-size:13px;line-height:1.9}.hero-add-button{width:100%;min-height:58px}.stats{margin-top:21px;gap:10px}.stat-card{min-height:84px;padding:13px;border-radius:19px}.stat-card strong{font-size:24px}.stat-card span:not(.stat-icon){font-size:10px}}

/* مشغل القرآن المصغّر — بطاقة أنيقة بصف واحد */
.quran-widget{max-width:100%;margin:10px auto 0;padding:10px 13px;border-radius:20px}.quran-heading{min-height:26px;gap:6px}.quran-heading .book-icon{font-size:18px}.quran-heading strong{font-size:14px}.quran-heading>span:last-of-type{font-size:10px}.quran-widget .quran-controls{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;margin-top:8px}.quran-widget .audio-controls{min-height:39px;border-radius:20px}.quran-widget .audio-controls button{font-size:17px}.quran-widget .audio-controls span{font-size:9px}.quran-widget .surah-select select{height:39px;border-radius:12px;font-size:11px}.quran-widget .quran-offline-row{display:none}.quran-quick-button{display:none}
@media(max-width:640px){.quran-widget{margin-top:7px;padding:9px 11px;border-radius:17px}.quran-widget .quran-controls{grid-template-columns:1fr 1.45fr;gap:8px;margin-top:6px}.quran-widget .audio-controls{order:1;min-height:37px}.quran-widget .surah-select{order:2}.quran-widget .surah-select select{height:37px;font-size:10px;padding-right:27px}.quran-widget .audio-controls button{font-size:16px}.quran-heading strong{font-size:13px}.quran-heading>span:last-of-type{font-size:9px}}

/* النسق الموحد المصغّر لبقية الواجهات */
:root{--radius-card:18px;--radius-control:12px}
.hero-card,.stat-card,.panel,.alerts-panel,.tip-card,.material-item{box-shadow:0 10px 26px rgba(31,72,58,.045)}
.hero-card{width:min(260px,100%);padding:18px;border-radius:var(--radius-card);transform:none}.hero-card-number{font-size:56px;margin-top:9px}.hero-card-line{padding-top:9px;margin-top:8px}
.stat-card{min-height:88px;padding:14px;border-radius:var(--radius-card);gap:10px}.stat-icon{width:34px;height:34px;border-radius:11px;font-size:15px}.stat-card strong{font-size:25px}.stat-card span:not(.stat-icon){font-size:10px;margin-top:3px}
.alerts-panel{border-radius:var(--radius-card);padding:14px 16px;margin-bottom:16px}.alert-heading{margin-bottom:9px}.alert-heading h3{font-size:13px}.alert-heading p{font-size:10px}.alert-chip{padding:7px 9px;border-radius:9px;font-size:10px}
.workspace{gap:14px}.panel{border-radius:var(--radius-card);box-shadow:0 10px 26px rgba(31,72,58,.04)}.form-panel,.list-panel{padding:18px}.panel h2{font-size:19px}.panel-symbol{width:32px;height:32px;border-radius:10px;font-size:18px}.panel-intro{font-size:10px;margin:12px 0 17px}.form-actions{margin-top:16px}.submit-button{min-height:43px;border-radius:var(--radius-control);font-size:12px}.tip-card{padding:12px;margin-top:10px;border-radius:14px}.tip-card strong{font-size:10px}.tip-card p{font-size:9px}
input[type=text],input[type=search]{min-height:41px;border-radius:var(--radius-control);font-size:12px}.field-grid{gap:9px;margin-top:11px}.date-help{font-size:9px;margin-top:7px}.form-error{border-radius:var(--radius-control);padding:8px;font-size:10px;margin-top:10px}
.toolbar{margin:16px 0 13px;gap:8px}.search-box input{min-height:37px}.filters{border-radius:var(--radius-control)}.filter-button{padding:6px 8px;font-size:9px}.materials-list{gap:8px}.material-item{gap:10px;padding:12px 11px;border-radius:var(--radius-control)}.material-avatar{width:36px;height:36px;border-radius:11px;font-size:14px}.material-main strong{font-size:12px;margin-bottom:3px}.material-main span,.material-date span{font-size:9px}.material-date b{font-size:10px;margin-bottom:3px}.material-status{min-width:75px}.status-label{padding:4px 7px;font-size:9px}.item-action{font-size:9px}.empty-state{padding:42px 16px 25px}.empty-state h3{font-size:14px}.empty-state p{font-size:10px}
.footer{font-size:9px;padding:24px 3px 21px;margin-top:8px}.toast{font-size:10px;border-radius:9px;padding:9px 13px}
@media(max-width:880px){.hero-card{width:min(240px,100%)}}
@media(max-width:640px){.hero{padding-top:38px;padding-bottom:25px}.hero-card{display:none}.stats{gap:8px;margin-bottom:14px}.stat-card{min-height:76px;padding:11px;border-radius:16px}.stat-card strong{font-size:22px}.stat-icon{width:32px;height:32px}.workspace{gap:12px}.panel{border-radius:16px}.form-panel,.list-panel{padding:15px}.panel h2{font-size:18px}.panel-intro{line-height:1.7}.material-item{border-radius:12px;padding:11px 10px}.tip-card{border-radius:13px}}

/* الوضع الليلي — نفس النسق المصغّر بسطوع مريح */
.topbar-actions{display:flex;align-items:center;gap:8px}.theme-toggle{width:38px;height:38px;border:1px solid #dbe8e1;border-radius:12px;color:#56756a;background:rgba(255,255,255,.78);font-size:19px;line-height:1;transition:background .2s,color .2s,transform .2s}.theme-toggle:hover{transform:translateY(-1px)}
body.dark-mode{--ink:#e5f1eb;--muted:#9aada4;--paper:#111b18;--surface:rgba(26,39,35,.94);--line:#2b4038;--green:#65c39b;--green-deep:#4eaa83;--mint:#1d3c31;--amber:#e2aa55;--amber-soft:#3a2f1d;--red:#ee8580;--red-soft:#3b2525;background:var(--paper);color:var(--ink)}
body.dark-mode .ambient-one{background:#173d31;opacity:.35}body.dark-mode .ambient-two{background:#49351d;opacity:.2}body.dark-mode .topbar{border-color:#263b33}body.dark-mode .theme-toggle,body.dark-mode .menu-button{color:#b8d8ca;background:#1b2b26;border-color:#345046}body.dark-mode .quran-widget{background:rgba(25,39,34,.96);border-color:#30483e;box-shadow:0 10px 28px rgba(0,0,0,.16)}body.dark-mode .quran-widget .audio-controls{background:#16251f;color:#d9ece3}body.dark-mode .quran-widget .surah-select select{background:#16251f;color:#c4d8cf;border-color:#345046}body.dark-mode .hero-card,body.dark-mode .stat-card,body.dark-mode .panel,body.dark-mode .material-item{background:var(--surface);border-color:var(--line)}body.dark-mode input[type=text],body.dark-mode input[type=search]{background:#16251f;color:var(--ink);border-color:#345046}body.dark-mode .search-box input{background:#16251f}body.dark-mode .filters{background:#1b2b26}body.dark-mode .filter-button.active{background:#2b473b;color:var(--green)}body.dark-mode .tip-card{background:#19362b;border-color:#2b5443}body.dark-mode .hero h1 em{color:#9bb1a7}body.dark-mode .alerts-panel{background:linear-gradient(105deg,#302719,#241f17);border-color:#5b4726}body.dark-mode .alert-chip{background:#2b2519;border-color:#5b4726}body.dark-mode .footer{border-color:#263b33}body.dark-mode .welcome-screen:before{background:rgba(26,39,35,.94);border-color:#2b4038}body.dark-mode .welcome-illustration{background:#1d3c31}body.dark-mode .welcome-check{background:var(--green-deep)}
@media(max-width:640px){.topbar-actions{gap:6px}.theme-toggle{width:35px;height:35px;border-radius:11px;font-size:17px}}

.duration-input{display:grid;grid-template-columns:1fr 92px;gap:7px}.duration-input input{width:100%;border:1px solid #dfeae4;outline:none;color:var(--ink);background:#fff;border-radius:var(--radius-control);min-height:41px;padding:0 13px;direction:rtl}.duration-input select{width:100%;border:1px solid #dfeae4;outline:none;color:var(--muted);background:#fff;border-radius:var(--radius-control);min-height:41px;padding:0 8px;font:inherit;font-size:11px}.duration-input input:focus,.duration-input select:focus{border-color:#70b59a;box-shadow:0 0 0 4px rgba(82,173,137,.12)}body.dark-mode .duration-input input,body.dark-mode .duration-input select{background:#16251f;color:var(--ink);border-color:#345046}
@media(max-width:640px){.duration-input{grid-template-columns:1fr 82px}}

.list-tools{display:flex;align-items:center;gap:6px}.export-button{border:1px solid #cfe2d7;background:#f7fcf9;color:var(--green);border-radius:9px;padding:6px 8px;font:inherit;font-size:9px;cursor:pointer}.export-button:hover{background:var(--mint)}body.dark-mode .export-button{background:#1b2b26;border-color:#345046;color:var(--green)}
@media(max-width:640px){.list-tools{gap:4px}.export-button{padding:5px 6px;font-size:8px}.list-header{align-items:center}}

.alert-days-field{max-width:220px;margin-top:12px}.days-input{display:grid;grid-template-columns:1fr 58px;align-items:center;gap:7px}.days-input input{width:100%;border:1px solid #dfeae4;outline:none;color:var(--ink);background:#fff;border-radius:var(--radius-control);min-height:41px;padding:0 13px;direction:rtl}.days-input span{color:var(--muted);font-size:10px}.days-input input:focus{border-color:#70b59a;box-shadow:0 0 0 4px rgba(82,173,137,.12)}body.dark-mode .days-input input{background:#16251f;color:var(--ink);border-color:#345046}
@media(max-width:640px){.alert-days-field{max-width:none}}