/* الأساسيات: المتغيرات الثابتة، الخطوط، RTL، الشريط العلوي. ألوان الثيم تأتي من PHP (inc/themes.php) */
:root {
  --radius-card: 28px;
  --radius-btn: 24px;
  --maxw: 560px;
  --t: 200ms;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --col-pad: max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  background: var(--bg); color: var(--text); font-family: var(--ui-font); font-size: 16px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
}
/* ملمس الورق: grain.png مكرر بشفافية الثيم فوق --bg */
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/grain.png") repeat; opacity: var(--grain, .35);
}
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; line-height: 1.6; overflow-x: hidden; }
#app { max-width: var(--maxw); margin-inline: auto; min-height: 100vh; min-height: 100dvh; position: relative; animation: page-in var(--t) ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.muted { color: var(--text-muted); }
.danger { color: var(--danger) !important; }
.poem-font { font-family: var(--poem-font); }
.brand { font-family: 'F-aref', 'Aref Ruqaa', serif; color: var(--primary); font-weight: 700; font-size: 2.3rem; line-height: 1.4; text-align: center; }
.brand-lg { font-size: 2.6rem; }

/* الأيقونات (SVG sprite) */
.ic { width: 24px; height: 24px; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
.ic-sm { width: 18px; height: 18px; }

/* الشريط العلوي */
.appbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 2px;
  padding: calc(6px + var(--safe-t)) 8px 6px; min-height: calc(56px + var(--safe-t)); background: var(--appbar);
}
.appbar-spacer { flex: 1; }
.appbar-title { font-size: 1.1rem; font-weight: 600; padding-inline: 6px; }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text);
  display: inline-grid; place-items: center; transition: background var(--t); flex: none;
}
.icon-btn:hover, .icon-btn:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); outline: 0; }
.icon-btn[data-gold], .icon-btn.is-gold { color: var(--primary); }
.icon-btn.is-on { color: var(--primary); }
.icon-btn[disabled] { opacity: .4; pointer-events: none; }

/* صور الشاعر */
.poet { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold-ring); background: var(--surface-tint); display: block; }
.poet-lg { width: 128px; height: 128px; }

.page-pad { padding: 8px 16px calc(40px + var(--safe-b)); }
.fine { font-size: .85rem; text-align: center; padding: 12px 8px; }

/* حقول النماذج */
.field { display: grid; gap: 6px; font-size: .9rem; color: var(--text-muted); }
.field input, .search-input {
  font-size: 1rem; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); outline: 0; width: 100%;
}
.field input:focus, .search-input:focus { border-color: var(--primary); }
.form-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 10px 14px; border-radius: 14px; font-size: .9rem; }