/* =========================================================
   Phone: device frame, motion states, tap feedback,
   and the tuvedu app screens (rebuilt from real screenshots).
   Screen is laid out at 390 × 844 logical px, then scaled.
   ========================================================= */

/* ---------- Stage and motion ---------- */
.phone-stage {
  position: relative;
  width: calc(420px * var(--device-scale));
  height: calc(874px * var(--device-scale));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phone-stage__tilt {
  width: 100%; height: 100%;
  transform-origin: 50% 40%;
  transform: perspective(1800px) rotateY(-12deg) rotateX(4deg) rotate(-4deg);
  transition: transform var(--dur-slow) var(--ease);
}
.phone-stage.is-active .phone-stage__tilt { transform: perspective(1800px) scale(1.04); }
.phone-stage.is-static .phone-stage__tilt { transform: none; }

/* ---------- Device ---------- */
.device {
  position: absolute; left: 0; top: 0; width: 420px; height: 874px;
  transform: scale(var(--device-scale)); transform-origin: 0 0;
}
.device__rim {
  position: absolute; inset: 0; border-radius: 64px; padding: 4px;
  background: linear-gradient(135deg, #C9CBCF 0%, #7B7E83 22%, #3D4044 50%, #8A8D92 78%, #D2D4D8 100%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 50px 90px -36px rgba(19, 38, 29, .55), 0 20px 36px -22px rgba(19, 38, 29, .4);
}
.device__rim::before { content: ""; position: absolute; inset: 4px; border-radius: 60px; background: #050706; }
.device__screen {
  position: absolute; left: 15px; top: 15px; width: 390px; height: 844px;
  border-radius: 50px; overflow: hidden; background: var(--app-bg);
  font-family: var(--app-font); color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}
.device__side { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #5E6166, #A4A7AC); }
.device__side--action   { left: -4px; top: 150px; height: 34px; }
.device__side--vol-up   { left: -4px; top: 214px; height: 66px; }
.device__side--vol-down { left: -4px; top: 294px; height: 66px; }
.device__side--power    { right: -4px; top: 246px; height: 104px; background: linear-gradient(270deg, #5E6166, #A4A7AC); }
.device__island { position: absolute; z-index: 30; top: 12px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 18px; background: #000; }
.device__glare { position: absolute; inset: 0; z-index: 31; pointer-events: none; border-radius: 50px; background: linear-gradient(125deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 28%); }

/* ---------- Screen layers and transitions ---------- */
.app-layers { position: absolute; inset: 0; }
.app-screen { position: absolute; inset: 0; overflow: hidden; background: var(--app-bg); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.app-screen--white { background: #fff; }
.app-screen.enter-push { transform: translateX(34%); opacity: 0; }
.app-screen.enter-up { transform: translateY(8%); opacity: 0; }
.app-screen.enter-fade { opacity: 0; }
.app-screen.is-in { transform: none; opacity: 1; }
.app-screen.leave-push { transform: translateX(-14%); opacity: 0; }
.app-screen.leave-fade { opacity: 0; }

/* ---------- Interaction feedback (no cursor, no circles) ---------- */
/* About to be pressed: very light dimming so the eye finds the element. */
.is-tap-target { filter: brightness(.96); transition: filter 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease); }
/* Pressed: slightly smaller and darker, shadow flattened, released after ~200 ms. */
.is-pressed { transform: scale(.96) !important; filter: brightness(.88); box-shadow: none !important;
  transition: transform 120ms var(--ease), filter 120ms var(--ease), box-shadow 120ms var(--ease) !important; }
/* Wide targets (answer field, options) move less so the layout stays calm. */
.q__field.is-pressed, .c-opt.is-pressed { transform: scale(.985) !important; }
/* Tabs have no fill of their own: the press shows the same soft pill as the active tab. */
.tab.is-pressed { background: #ECECEF; }

/* ---------- Shared app pieces ---------- */
.a-pad { position: absolute; left: 20px; right: 20px; }
.a-title { font: 700 34px/1.1 var(--app-font); letter-spacing: -.5px; }
.a-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--app-green); color: #fff; display: flex; align-items: center; justify-content: center; font: 500 16px/1 var(--app-font); }
.a-row { display: flex; align-items: center; justify-content: space-between; }
.a-date { margin-top: 18px; font: 600 12.5px/1 var(--app-font); letter-spacing: .05em; color: var(--app-grey-2); }
.a-dots { display: inline-flex; align-items: center; gap: 4px; }
.a-dots i { display: block; width: 10px; height: 10px; border-radius: 5px; background: var(--app-green); }
.a-dots i.ring { width: 9px; height: 9px; background: transparent; border: 2px solid var(--app-amber); }
.a-dots--light i { background: #fff; }
.a-dots.is-listening i:nth-child(1) { animation: dotmeter .7s ease-in-out infinite; }
.a-dots.is-listening i:nth-child(2) { animation: dotmeter .7s ease-in-out .15s infinite; }
.a-dots.is-listening i:nth-child(3) { animation: dotmeter .7s ease-in-out .3s infinite; }
.a-dots.is-listening i.ring { animation: dotmeter .7s ease-in-out .45s infinite; }
@keyframes dotmeter { 0%, 100% { height: 10px; } 50% { height: 22px; } }

/* Today */
.t-card { margin-top: 14px; border-radius: 26px; padding: 20px 20px 18px; color: #fff; background: linear-gradient(160deg, #4A6DAA, #33528A); box-shadow: 0 14px 30px -18px rgba(51, 82, 138, .9); }
.t-card__kicker { font: 600 11.5px/1 var(--app-font); letter-spacing: .08em; opacity: .9; }
.t-card__title { margin-top: 10px; min-height: 54px; font: 700 22px/1.22 var(--app-font); }
.t-card__meta { margin-top: 8px; font: 400 15px/1 var(--app-font); opacity: .9; }
.t-card__bars { margin-top: 14px; display: flex; gap: 6px; border-radius: 10px; transition: box-shadow var(--dur-base) var(--ease), padding var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.t-card__bars i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.t-card__bars i.is-on { background: #fff; }
.t-card__bars.is-highlight { padding: 8px 10px; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 8px rgba(217, 164, 65, .55); }
.t-card__btns { margin-top: 16px; display: flex; gap: 10px; }
.t-btn { flex: 1; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 17px/1 var(--app-font); }
.t-btn--start { background: #fff; color: var(--app-subject-deep); }
.t-btn--talk { flex: 1.2; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; }
.t-more { margin-top: 26px; font: 700 22px/1 var(--app-font); }
.t-list { margin-top: 14px; border-radius: 26px; background: var(--app-card); }
.t-sub { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 14px; }
.t-sub + .t-sub { border-top: 1px solid #EFEFF2; }
.t-sub__ic { flex: none; width: 40px; height: 40px; border-radius: 11px; color: #fff; display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--app-font); }
.t-sub__body { flex: 1; min-width: 0; }
.t-sub__name { display: flex; align-items: baseline; gap: 6px; font: 600 16px/1.2 var(--app-font); white-space: nowrap; min-width: 0; }
.t-sub__name > span { overflow: hidden; text-overflow: ellipsis; }
.t-sub__name small { flex: none; font: 500 11px/1 var(--app-font); color: var(--app-grey); }
.t-sub__line { display: block; margin-top: 3px; font: 400 14px/1.3 var(--app-font); color: var(--app-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sub__ready { flex: none; max-width: 64px; text-align: right; font: 500 12px/1.2 var(--app-font); }
.t-sub__more { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--app-bg); display: flex; align-items: center; justify-content: center; }
.t-sub__more .a-dots i { width: 6px; height: 6px; } .t-sub__more .a-dots i.ring { width: 6px; height: 6px; border-width: 1.5px; }

/* Tab bar */
.tabbar { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 20px; height: 72px; padding: 0 6px; border-radius: 36px; display: flex; align-items: center;
  background: rgba(255, 255, 255, .95); box-shadow: 0 8px 26px rgba(0, 0, 0, .12); }
.tab { position: relative; flex: 1; height: 60px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 11px/1 var(--app-font); color: #1C1C1E; }
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active { background: #ECECEF; color: #1E3A2C; }

/* Lesson header */
.l-head { position: absolute; z-index: 4; left: 20px; right: 20px; top: 62px; height: 44px; display: flex; align-items: center; gap: 14px; }
.l-close { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; }
.l-close svg { width: 14px; height: 14px; stroke: #000; stroke-width: 2.2; stroke-linecap: round; }
.l-segs { flex: 1; display: flex; gap: 6px; }
.l-segs i { flex: 1; height: 5px; border-radius: 3px; background: var(--app-fill); }
.l-segs i.is-on { background: var(--app-subject); }
.l-count { font: 400 15px/1 var(--app-font); color: var(--app-grey); }

/* Theory */
.th { top: 130px; display: flex; flex-direction: column; gap: 14px; }
.th__why { display: flex; gap: 8px; align-items: baseline; }
.th__why b { font: 700 12.5px/1 var(--app-font); letter-spacing: .12em; color: var(--app-subject); }
.th__why span { font: 400 13px/1 var(--app-font); color: var(--app-grey); }
.th__title { font: 700 30px/1.15 var(--app-font); letter-spacing: -.4px; }
.th__body { font: 400 16.5px/1.45 var(--app-font); color: #1C1C1E; }
.th__ex { padding: 16px 20px; border-radius: 22px; background: var(--app-subject-tint); display: flex; flex-direction: column; gap: 8px; }
.th__ex b { font: 600 12.5px/1 var(--app-font); letter-spacing: .12em; }
.th__ex span { font: 400 16px/1.45 var(--app-font); }
.th__src { font: 600 12.5px/1.3 var(--app-font); color: var(--app-grey); }

/* Status pill and lesson CTA */
.l-status { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 102px; height: 54px; border-radius: 27px; padding: 0 22px; display: flex; align-items: center; gap: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); font: 400 17px/1 var(--app-font); }
.l-cta { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 34px; height: 58px; border-radius: 29px; display: flex; align-items: center; justify-content: center; background: var(--app-subject); color: #fff; font: 600 19px/1 var(--app-font); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.l-cta.is-disabled { background: #D1D1D6; color: var(--app-grey); }

/* Practice: input */
.q { top: 130px; display: flex; flex-direction: column; gap: 18px; }
.q__text { min-height: 86px; font: 700 22px/1.3 var(--app-font); }
.q__field { height: 140px; padding: 16px 18px; border-radius: 22px; background: var(--app-bg); font: 400 17px/1.45 var(--app-font); color: var(--app-text); transition: box-shadow var(--dur-fast) var(--ease); }
.q__field.is-empty .q__value::before { content: attr(data-ph); color: var(--app-grey); }
.q__field.is-focused { box-shadow: 0 0 0 2.5px var(--app-subject); }
.q__caret { display: none; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; background: var(--app-subject); animation: caret 1s steps(1) infinite; }
.q__field.is-focused .q__caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }
.q__mic { display: flex; align-items: center; gap: 14px; }
.q__micbtn { flex: none; width: 62px; height: 62px; border-radius: 50%; background: var(--app-green); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.q__micbtn svg { width: 24px; height: 24px; }
.q__micbtn .rec-dot { display: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.q__micbtn.is-recording { background: var(--app-red); box-shadow: 0 0 0 10px rgba(224, 53, 43, .18); }
.q__micbtn.is-recording svg { display: none; }
.q__micbtn.is-recording .rec-dot { display: block; }
.q__miclabel { font: 400 14px/1.4 var(--app-font); color: var(--app-grey-2); }
.q__hint { font: 400 12.5px/1.3 var(--app-font); color: var(--app-grey); }

/* Practice: choice */
.c-opts { display: flex; flex-direction: column; gap: 12px; }
.c-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-radius: 18px; background: var(--app-bg); font: 400 17px/1.35 var(--app-font); transition: background var(--dur-fast) var(--ease); }
.c-opt.is-selected { background: var(--app-bad-bg); }
.c-opt.is-wrong { background: var(--app-bad-bg); }
.c-opt.is-wrong::after { content: "✕"; color: var(--app-bad); font-weight: 700; }
.c-opt.is-right { background: var(--app-ok-bg); }
.c-opt.is-right::after { content: "✓"; color: var(--app-ok); font-weight: 700; }

/* Keyboard */
.kb { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 296px; padding: 10px 4px 0; background: #D3D5DB; display: flex; flex-direction: column; gap: 12px; transform: translateY(100%); transition: transform var(--dur-fast) var(--ease); }
.kb.is-up { transform: none; }
.kb__row { display: flex; justify-content: center; gap: 5px; }
.kb__key { flex: 0 0 auto; width: var(--kw, 32px); height: 44px; border-radius: 7px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; font: 400 21px/1 var(--app-font); }
.kb__key--fn { background: #ADB1BA; font-size: 15px; }
.kb__key.is-hit { background: #ADB1BA; }

/* Feedback sheet */
.sheet { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; padding: 12px 20px 34px; border-radius: 36px 36px 0 0; background: var(--app-bg); box-shadow: 0 -12px 36px rgba(0, 0, 0, .1); transform: translateY(105%); transition: transform var(--dur-base) var(--ease); }
.sheet.is-up { transform: none; }
.sheet__grab { width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: #D1D1D6; }
.sheet__pill { height: 54px; padding: 0 22px; border-radius: 27px; display: flex; align-items: center; gap: 16px; background: var(--app-fill); font: 400 17px/1 var(--app-font); }
.sheet__pill.is-bad { background: var(--app-bad-bg); }
.sheet__verdict { margin-top: 18px; display: flex; align-items: center; gap: 10px; font: 700 19px/1 var(--app-font); }
.sheet__verdict i { font-style: normal; font-weight: 700; }
.sheet__verdict.is-ok i { color: var(--app-ok); }
.sheet__verdict.is-bad i { color: var(--app-bad); }
.sheet__text { margin-top: 10px; font: 400 17px/1.42 var(--app-font); color: #1C1C1E; }
.sheet .l-cta { position: static; margin-top: 18px; }

/* Recap */
.rc { top: 120px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rc__ring { width: 124px; height: 124px; }
.rc__ring circle { fill: none; stroke-width: 10; }
.rc__ring .track { stroke: #ECECEF; }
.rc__ring .arc { stroke: var(--app-subject); stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 900ms var(--ease); }
.rc__ring.is-in .arc { stroke-dashoffset: 150; }
.rc__ring text { font: 500 26px var(--app-font); }
.rc__title { margin-top: 8px; font: 700 31px/1.15 var(--app-font); letter-spacing: -.4px; text-align: center; }
.rc__sub { font: 400 15px/1.3 var(--app-font); color: var(--app-grey-2); text-align: center; }
.rc__card { align-self: stretch; margin-top: 8px; padding: 16px 20px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 #ECECEF, 0 6px 20px rgba(0, 0, 0, .06); display: flex; flex-direction: column; gap: 7px; }
.rc__card b { font: 600 11.5px/1 var(--app-font); letter-spacing: .1em; color: var(--app-subject); }
.rc__card strong { font: 600 18px/1.3 var(--app-font); }
.rc__card span { font: 400 15px/1.4 var(--app-font); color: var(--app-grey-2); }
.rc__src { margin-top: 4px; padding-top: 10px; border-top: 1px solid #ECECEF; display: flex; align-items: center; justify-content: space-between; font: 400 12.5px/1 var(--app-font); color: var(--app-grey); }
.rc__doubt { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(61, 95, 158, .4); color: var(--app-subject); font: 500 13px/1 var(--app-font); }
.rc .l-close { position: absolute; left: 0; top: -58px; }

/* Reviews */
.rv { top: 62px; display: flex; flex-direction: column; gap: 14px; }
.rv__count { font: 400 15px/1 var(--app-font); color: var(--app-grey-2); }
.rv__chips { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.rv__chips span { padding: 10px 14px; border-radius: 20px; background: var(--app-fill); font: 500 15px/1 var(--app-font); }
.rv__chips b { color: var(--app-subject); }
.rv__card { padding: 18px 20px; border-radius: 26px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); display: flex; flex-direction: column; gap: 10px; }
.rv__card-top { display: flex; justify-content: space-between; font: 500 13.5px/1 var(--app-font); }
.rv__card-top span:first-child { color: var(--app-subject); }
.rv__card-top span:last-child { color: var(--app-grey); }
.rv__card strong { font: 700 23px/1.2 var(--app-font); }
.rv__card p { font: 400 15px/1.4 var(--app-font); color: var(--app-grey-2); }
.rv__start { height: 58px; border-radius: 29px; background: var(--app-green); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 18px/1 var(--app-font); }
.rv__load { padding: 16px 18px; border-radius: 22px; background: #fff; display: flex; flex-direction: column; gap: 9px; }
.rv__load b { font: 600 11.5px/1 var(--app-font); letter-spacing: .1em; color: var(--app-grey-2); }
.rv__load span { font: 500 15px/1.2 var(--app-font); }
.rv__bars { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.rv__bars i { flex: 1; border-radius: 3px; background: var(--app-subject); }
.rv__bars i:first-child { background: var(--app-green); }
.rv__axis { display: flex; justify-content: space-between; font: 400 12px/1 var(--app-font); color: var(--app-grey); }
.rv__later { font: 700 22px/1 var(--app-font); }

/* Reduced motion: no tilt; presses change brightness only, no scale */
.reduced-motion .phone-stage__tilt { transform: none !important; }
.reduced-motion .is-pressed { transform: none !important; }