/* CSS phone screens recreating real app screens (strings from i18n/HeUi.kt) */
.screen {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--glow-main) 45%, transparent), transparent 60%),
    radial-gradient(circle at 5% 65%, color-mix(in srgb, var(--glow-side) 22%, transparent), transparent 55%),
    radial-gradient(circle at 70% 95%, color-mix(in srgb, var(--glow-main) 30%, transparent), transparent 60%),
    var(--bg);
  font-size: 11px; line-height: 1.4; color: var(--text); padding: 26px 12px 10px;
}
.screen.teach {
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--glow-warm) 28%, transparent), transparent 60%),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--glow-main) 35%, transparent), transparent 60%),
    var(--bg);
}
.screen::before { /* status bar */
  content: ""; position: absolute; top: 9px; left: 50%; width: 34%; height: 5px; margin-left: -17%;
  border-radius: 9px; background: rgba(255, 255, 255, .18);
}
.m-title { font-size: 19px; font-weight: 700; margin: 4px 0 2px; }
.m-sub { color: var(--muted); font-size: 10px; margin-bottom: 10px; }
.m-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.m-pill {
  font-size: 9.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent);
}
.m-pill.fill { background: var(--fill); color: #fff; border-color: transparent; }
.m-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 9px 10px; margin-bottom: 8px;
}
.m-card.hl { border-color: var(--edge); box-shadow: 0 0 9px color-mix(in srgb, var(--edge) 40%, transparent); }
.m-card b { display: block; font-size: 12px; font-weight: 500; }
.m-card small { color: var(--muted); font-size: 9.5px; display: block; }
.m-min { text-align: center; color: var(--muted); font-size: 9px; flex: none; }
.m-min strong { display: block; font-size: 17px; font-weight: 300; color: var(--text); line-height: 1.1; }
.m-warn { color: var(--peach); }
.m-sec { color: var(--peach); font-size: 10px; font-weight: 500; margin: 8px 0 5px; }
.m-ex { display: flex; gap: 8px; align-items: center; }
.m-ex .thumb { width: 42px; height: 32px; border-radius: 7px; background: #fff; flex: none; overflow: hidden; display: grid; place-items: center; }
.m-ex .thumb img { max-height: 100%; object-fit: contain; }
.m-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 5px 0 3px; }
.m-bar i { display: block; height: 100%; background: var(--fill); }
.m-tabs {
  margin-top: auto; display: flex; justify-content: space-around; padding: 7px 4px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); font-size: 9.5px; color: var(--muted);
}
.m-tabs .on { color: var(--peach); font-weight: 500; }
.m-teach-img { background: #fff; border-radius: 13px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; margin: 8px 0; }
.m-teach-img img { max-height: 100%; object-fit: contain; }
.m-big { font-size: 18px; font-weight: 700; margin: 2px 0; }
.m-spring { display: inline-flex; gap: 4px; align-items: center; }
.m-spring i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.m-nav { display: flex; gap: 6px; margin-top: auto; }
.m-nav span { flex: 1; text-align: center; padding: 7px 0; border-radius: 999px; font-size: 10.5px; }
.m-nav .next { background: var(--fill); color: #fff; }
.m-nav .prev { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.m-dots { display: flex; gap: 4px; margin: 2px 0 8px; }
.m-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .24); }
.m-dots i.d { background: var(--accent); }
.m-dots i { position: relative; overflow: hidden; height: 4px; }
.m-dots i b { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; background: var(--accent); transition: width .35s ease; }
.m-slide { will-change: transform, opacity; }
.plans .amount, .section-head .amount { color: var(--text, #fff); font-size: 1.5rem; font-weight: 600; margin: 4px 0 2px; }
.section-head .amount.small { font-size: 1.05rem; color: var(--peach); margin-top: 10px; }