.section-title{ font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; margin:22px 2px 10px 2px; display:flex; align-items:center; justify-content:space-between; }
.device.lang-fa .section-title{ flex-direction:row-reverse; }
.section-title .count{ background:var(--bg-soft); color:var(--text-muted); font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600; }
.empty-hint{ color:var(--text-muted); font-size:13px; background:var(--card); border:1px dashed var(--border); border-radius:16px; padding:16px; text-align:center; }
.empty-section-hint{ margin-bottom:8px; }
.empty-section-hint p{ margin:0 0 10px 0; }
/* No entrance animation on .item-card/.event-card on purpose —
   #page-home's lists are fully rebuilt on every render (including just
   switching days), so a fade/slide-in on every row read as the page
   "reloading" each time, and briefly showed the red .swipe-delete-bg
   through the fading opacity underneath each card. The keyframe itself
   stays for .period-quiz-step below, a one-time flow that doesn't
   re-render this way. */
@keyframes stagger-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.app-toast{
  position:absolute; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:90;
  background:var(--card); color:var(--text); border:1px solid var(--border);
  padding:10px 16px; border-radius:12px; font-size:13px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:80%; text-align:center;
}
.app-toast.show{ opacity:1; transform:translate(-50%,0); }
.lang-loading{
  position:absolute; inset:0; z-index:95; background:var(--overlay);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.lang-loading.show{ opacity:1; pointer-events:auto; }
/* Brand loader: the splash's spinning arc around the logo (index.html
   has the same, inline), for in-app waits like switching language. */
.brand-loader{ position:relative; width:84px; height:84px; }
.brand-loader svg{ position:absolute; inset:0; width:100%; height:100%; animation:brand-spin 1.4s linear infinite; }
.brand-loader .track{ fill:none; stroke:var(--border); stroke-width:6; }
.brand-loader .arc{ fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round; stroke-dasharray:70 300; animation:brand-arc 1.4s ease-in-out infinite; }
.brand-loader img{ position:absolute; inset:16px; width:52px; height:52px; border-radius:50%; animation:brand-breathe 2s ease-in-out infinite; }
@keyframes brand-spin{ to{ transform:rotate(360deg); } }
@keyframes brand-arc{ 0%,100%{ stroke-dasharray:20 300; } 50%{ stroke-dasharray:110 300; } }
@keyframes brand-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.94); } }
@media (prefers-reduced-motion:reduce){ .brand-loader *{ animation:none; } }
.inline-row{ display:flex; gap:8px; }
.inline-row > *{ flex:1; }
/* section collapse */
.section-toggle{ position:relative; width:22px; height:22px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
.section-toggle::before{ content:''; position:absolute; inset:-6px; }
.section-toggle svg{ width:12px; height:12px; }
.section-toggle.open{ transform:rotate(180deg); }