/* ============ أساس — إعادة الضبط، المسرح، إطار الجهاز ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, #16223C 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #1A1526 0%, transparent 55%),
    #04060B;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold-500); color: var(--ink-900); }
svg.lucide { width: 1em; height: 1em; stroke-width: 1.75; }

/* — المسرح — */
.stage {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5); padding: var(--s-5) var(--s-4) var(--s-7);
}
.stage__bar {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; justify-content: center;
}
.stage__title {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.02em;
}
.stage__sizes { display: flex; gap: 6px; background: rgba(255,255,255,.04);
  padding: 5px; border-radius: var(--r-full); border: 1px solid var(--line); }
.stage__sizes button {
  font-size: 11.5px; padding: 7px 12px; border-radius: var(--r-full);
  color: var(--text-muted); transition: all var(--t-fast) var(--ease);
}
.stage__sizes button.is-on { background: var(--gold-500); color: var(--ink-900); font-weight: 600; }

/* — إطار الجهاز — */
.device {
  position: relative;
  width: var(--device-w); height: var(--device-h);
  border-radius: 54px;
  background: var(--ink-900);
  border: 10px solid #05070C;
  box-shadow: 0 0 0 1px #2A3345, var(--shadow-float);
  overflow: hidden;
  isolation: isolate;
  flex: none;
}
.device::after { /* نمط النجمة الثمانية — زخرفة عربية خفيفة */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(228,176,74,.10), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M36 4 44 20 62 12 54 30 70 36 54 44 62 62 44 54 36 70 28 54 10 62 18 44 2 36 18 28 10 12 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 72px 72px;
}
.device__island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 33px; background: #000; border-radius: var(--r-full); z-index: 30;
}
.statusbar {
  position: absolute; top: 0; inset-inline: 0; height: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px 0; font-family: var(--font-display); font-size: 14px;
  font-weight: 600; color: var(--text); z-index: 25; pointer-events: none;
}
.statusbar__icons { display: flex; gap: 6px; font-size: 15px; align-items: center; }
.homebar {
  position: absolute; bottom: 8px; inset-inline: 0; display: grid; place-items: center;
  z-index: 32; pointer-events: none;
}
.homebar span { width: 134px; height: 5px; border-radius: var(--r-full); background: rgba(255,255,255,.42); }

/* — حاوية الشاشات — */
.screenRoot {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding-top: var(--safe-top); padding-bottom: calc(var(--safe-bottom) + 8px);
}
.screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  animation: screenIn var(--t-base) var(--ease) both;
}
.screenRoot.has-tabs { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 6px); }
.screen--back { animation-name: screenInBack; }
.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }
.pad { padding-inline: 20px; }
@keyframes screenIn { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
@keyframes screenInBack { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* — الأيقونات: مساحة محفوظة حتى لو تعذّر تحميل المكتبة — */
i[data-lucide] { display: inline-block; width: 1em; height: 1em; flex: none; }
html.no-icons i[data-lucide] { display: none; }