/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   base.css — Reset, body, layout scaffolding
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
/* Paint the document root (the window/ICB that spans the full visual viewport,
   incl. behind the status bar / notch) with the theme base — otherwise, in
   immersive fullscreen, 100dvh stops short of the cutout and the bare WebView
   window shows through as a black band at the top. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-base); transition: background var(--dur-med) var(--ease-out); }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(129,140,248,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(167,139,250,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 40%, rgba(103,232,249,0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Pages ── */
.pages-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0;
  z-index: 1; overflow: hidden;
}
.page {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  will-change: opacity, transform;
}
.page.active   { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.page.exit-up  { opacity: 0; transform: translateY(-14px) scale(0.98); }

.scroll-area {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  /* Safe-area insets keep the hero/headers clear of notches, punch-holes &
     curved edges. Uses the KsuWebUI window insets (var(--inset-*), env()
     fallback): when the status bar is shown the top inset clears it; in
     fullscreen the inset is 0 and content rises to the top edge (like ReZygisk). */
  padding-top:    calc(var(--inset-top, 0px) + 16px);
  padding-left:   calc(var(--page-px) + var(--inset-left, 0px));
  padding-right:  calc(var(--page-px) + var(--inset-right, 0px));
  padding-bottom: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-area::-webkit-scrollbar { display: none; }
/* clear the floating dock: content scrolls behind it (glass) but the last
   items still come to rest above it. */
.scroll-bottom-pad { height: var(--bot-nav-h); }

/* ── Section label ── */
.section-label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px; padding-left: 4px;
}

/* ── Page header ── */
.page-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 20px;
}
.page-header__title {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text-primary);
}
/* Header trailing action (e.g. Library backup/restore) */
.page-header__action {
  flex-shrink: 0; width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: rgba(129,140,248,.14);
  border: 1px solid rgba(129,140,248,.30);
  color: var(--accent-primary);
  display: grid; place-items: center; cursor: pointer;
  outline: none; appearance: none; -webkit-appearance: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--spring),
              border-color var(--dur-fast) var(--ease-out);
}
.page-header__action svg { width: 20px; height: 20px; }
.page-header__action:hover  { background: rgba(129,140,248,.22); border-color: var(--glass-border-active); }
.page-header__action:active { transform: scale(.92); }

/* ── Glass card ── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  margin-bottom: 20px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* ── Divider ── */
.sys-divider { height: 1px; background: var(--glass-border); margin: 0 16px; }

/* ── Icon button ── */
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--spring),
              border-color var(--dur-fast) var(--ease-out);
  outline: none; appearance: none; -webkit-appearance: none;
}
.icon-btn:hover { background: var(--glass-bg-hover); color: var(--text-primary); border-color: var(--glass-border-active); }
.icon-btn:active { transform: scale(0.88); }

/* ── Animations ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(.7); }
}
@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(10px,14px) scale(1.06); }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-8px,-12px) scale(1.04); }
}
@keyframes sheetIn {
  from { opacity:0; transform:translateY(100%); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes sheetOut {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(100%); }
}
@keyframes overlayIn {
  from { opacity:0; } to { opacity:1; }
}

/* ── Ripple ── */
.ripple-container { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
.ripple {
  position:absolute; border-radius:50%;
  background:rgba(129,140,248,0.2);
  transform:scale(0);
  animation:ripple-spread 480ms var(--ease-out) forwards;
  pointer-events:none;
}
@keyframes ripple-spread { to { transform:scale(1); opacity:0; } }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: calc(var(--bot-nav-h) + 12px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface-3); border: 1px solid var(--glass-border);
  border-radius: var(--radius-full); padding: 9px 18px;
  font-size: 0.8rem; font-weight: 500; color: var(--text-primary);
  z-index: 800; backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--spring);
  pointer-events: none; white-space: nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms!important; transition-duration:1ms!important; }
}

/* ── Responsive cap ── */
@media (min-width:480px)  { :root { --page-px:20px; } }
@media (min-width:600px)  {
  body { max-width:480px; margin:0 auto; }
  .bottom-nav { max-width:480px; left:50%; transform:translateX(-50%); }
  .ripple-container { max-width:480px; left:50%; transform:translateX(-50%); }
}

/* ── RTL ──
   dir="rtl" on <html>/<body> makes `direction:rtl` cascade to every flex
   row, which already mirrors `flex-direction:row` right-to-left on its own.
   We must NOT also flip flex-direction:row-reverse — doing both double-
   reverses the row and pins the (right-aligned) label text against the
   value, eating the gap. So we only fix what the engine can't infer:
   directional glyphs and fields that must stay LTR. */
[dir="rtl"] .console-card__arrow   { transform:rotate(180deg); }
[dir="rtl"] .setting-row__chevron,
[dir="rtl"] .about-header__chevron { transform:scaleX(-1); }
/* Technical values stay LTR and hug the far (left) edge so the gap to the
   Persian label is preserved. */
[dir="rtl"] .sys-row__value        { direction:ltr; text-align:left; }
[dir="rtl"] .package-card__pkg     { direction:ltr; text-align:right; }
[dir="rtl"] .lib-search__input     { text-align:right; }

/* ── Home compaction (fit typical phones without scrolling; scroll still allowed) ── */
.page--home .section-label { margin-bottom:8px; }
.page--home .stats-grid,
.page--home .glass-card    { margin-bottom:14px; }
.page--home .scroll-bottom-pad { height:calc(var(--bot-nav-h) - 16px); }
