/* MahirAI Mobile V3 — one proof-building journey across Learn, Lesson, AI, and Profile.
   Presentation only: learning state, consent, entitlements, billing, and the canonical icon stay intact. */
 .ui-icon-label { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; vertical-align: middle; }
 .ui-icon-label .mahir-icon { width: .95rem; height: .95rem; flex: 0 0 auto; stroke-width: 2; }
 .symbol-tile .mahir-icon { display: block; }

@media (max-width: 899px) {
  .learn-view,
  .profile-view,
  .ai-workbench-v3 { padding-top: 1rem !important; }

  /* Learn: one active outcome before the library. */
  .learn-command-v3 {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 1.15rem;
    color: var(--ink1);
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand2) 14%, transparent), transparent 11rem),
      linear-gradient(145deg, color-mix(in srgb, #effbff 94%, var(--card)), color-mix(in srgb, #edf2ff 92%, var(--card)));
    border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
    border-radius: 27px;
    box-shadow: 0 18px 42px rgba(32,69,112,.11);
  }
  .learn-command-v3::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand2), var(--brand) 68%, var(--green));
  }
  .learn-command-v3__top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: start; }
  .learn-command-v3__kicker,
  .profile-next-v3__kicker,
  .ai-workbench__kicker {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--brand);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .learn-command-v3__kicker i,
  .profile-next-v3__kicker i,
  .ai-workbench__kicker i { width: 6px; height: 6px; background: var(--brand2); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand2) 12%, transparent); }
  .learn-command-v3 h2 { margin-top: .65rem; font: 800 1.25rem/1.22 Sora,Inter,sans-serif; letter-spacing: -.03em; }
  .learn-command-v3__promise { margin-top: .4rem; color: var(--ink3); font-size: .75rem; line-height: 1.55; }
  .proof-orbit-v3 {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: conic-gradient(var(--brand2), var(--brand) calc(var(--value) * 1%), color-mix(in srgb, var(--brand) 8%, var(--card)) 0);
    border-radius: 50%;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand2) 6%, transparent);
  }
  .proof-orbit-v3::before { content: ""; position: absolute; width: 50px; height: 50px; background: var(--card); border-radius: 50%; }
  .proof-orbit-v3 span { position: relative; z-index: 1; font: 850 .78rem/1 Sora,Inter,sans-serif; text-align: center; }
  .proof-orbit-v3 small { display: block; margin-top: .22rem; color: var(--ink4); font: 800 .45rem/1 Inter,sans-serif; text-transform: uppercase; }

  .proof-loop-v3 { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .42rem; margin-top: 1.15rem; }
  .proof-loop-v3__node { display: grid; justify-items: center; gap: .32rem; color: var(--ink4); font-size: .52rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
  .proof-loop-v3__node i { width: 22px; height: 22px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
  .proof-loop-v3__node.is-done i { color: #fff; background: var(--green); border-color: var(--green); }
  .proof-loop-v3__node.is-current { color: var(--brand); }
  .proof-loop-v3__node.is-current i { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); }
  .proof-loop-v3__line { height: 1px; background: linear-gradient(90deg,var(--green),var(--brand2)); }
  .proof-loop-v3__line:last-of-type { background: var(--line); }
  .learn-command-v3__artifact { margin-top: 1rem; padding-top: .85rem; color: var(--ink4); border-top: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line)); font-size: .62rem; font-weight: 750; }
  .learn-command-v3__artifact strong { color: var(--ink2); }
  .learn-command-v3__action { min-height: 48px; width: 100%; margin-top: .85rem; color: #fff; background: var(--brand); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 22%, transparent); }
  .learn-outcome-heading-v3 { margin-top: 1.65rem; }
  .learn-view .outcome-program.is-active { color: var(--ink1); background: var(--card); border-color: color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand) 7%,transparent); }
  .learn-view .outcome-program.is-active .ink3 { color: var(--ink3); }
  .learn-view .outcome-program.is-active .chip { color: var(--brand) !important; background: var(--brand-bg) !important; }

  /* Lesson: focused reading surface and a persistent next action. */
  .lesson-view-v3 { min-height: 100svh; padding: max(.8rem,env(safe-area-inset-top)) 1rem calc(1.2rem + env(safe-area-inset-bottom)) !important; background: var(--bg); }
  .lesson-progress-v3 { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: .7rem; margin: -.8rem -1rem 1rem; padding: max(.8rem,env(safe-area-inset-top)) 1rem .75rem; background: color-mix(in srgb,var(--bg) 88%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--line) 76%,transparent); backdrop-filter: blur(20px); }
  .lesson-progress-v3 > .btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 50%; }
  .lesson-progress-v3__bar { height: 5px !important; }
  .lesson-progress-v3__bar > div { height: 5px !important; }
  .lesson-progress-v3__step { min-width: 32px; color: var(--ink4); font-size: .62rem; font-weight: 850; text-align: right; }
  .lesson-stage-v3 { padding: 1.2rem !important; border-radius: 27px; box-shadow: 0 18px 42px rgba(32,69,112,.09); }
  .lesson-stage-v3 > h2 { font: 800 clamp(1.3rem,6.7vw,1.7rem)/1.16 Sora,Inter,sans-serif; letter-spacing: -.035em; }
  .lesson-stage-v3 > h3 { position: relative; padding-left: .8rem; }
  .lesson-stage-v3 > h3::before { content: ""; position: absolute; inset: .18rem auto .18rem 0; width: 2px; background: var(--brand2); border-radius: 999px; }
  .practice-ticket-v3 { position: relative; overflow: hidden; border-radius: 20px; border-color: color-mix(in srgb,var(--brand) 22%,var(--line)); background: color-mix(in srgb,var(--brand-bg) 45%,var(--card)); }
  .practice-ticket-v3::after { content: "TRY → CHECK → USE"; display: block; margin-top: .8rem; padding-top: .65rem; color: var(--ink4); border-top: 1px dashed color-mix(in srgb,var(--brand) 20%,var(--line)); font: 850 .5rem/1 Inter,sans-serif; letter-spacing: .12em; }
  .lesson-action-v3 { position: sticky; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 7; min-height: 50px; border-radius: 17px; box-shadow: 0 14px 32px color-mix(in srgb,var(--brand) 25%,transparent); }
  .lesson-stage-v3--quiz .opt { min-height: 48px; border-radius: 15px; }

  /* Completion: the handoff from learning to doing. */
  .result-view-v3 { background: radial-gradient(circle at 50% -8%,color-mix(in srgb,var(--brand2) 10%,transparent),transparent 18rem),var(--bg); }
  .result-score-v3 { border-radius: 23px; box-shadow: none; }
  .practice-loop-v3 { position: relative; overflow: hidden; color: #f8fbff; background: linear-gradient(145deg,#071426,#0b2943); border-color: #19415f !important; border-radius: 27px; box-shadow: 0 20px 44px rgba(7,20,38,.2); }
  .practice-loop-v3::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--brand2),var(--brand),var(--green)); }
  .practice-loop-v3 .brand { color: #7ce9f7; }
  .practice-loop-v3 .ink2 { color: #c2d2df; }
  .practice-loop-v3 .ink3 { color: #9ab1c3; }
  .practice-loop-v3 .ink4 { color: #728da3; }
  .practice-loop-v3 .prompt-box { color: var(--ink1); background: #f7fbff; border-color: #28506b; }
  .practice-loop-v3 textarea { color: var(--ink1); background: #f7fbff; }

  /* AI: a practical workbench, not an empty chat room. */
  .ai-workbench-v3 .ai-workbench__header { position: relative; overflow: hidden; align-items: flex-start; padding: 1rem; border-radius: 23px; box-shadow: none; }
  .ai-workbench-v3 .ai-workbench__header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(var(--brand2),var(--brand)); }
  .ai-workbench__kicker { margin-bottom: .45rem; }
  .ai-workbench-v3 .ai-model-rail { margin: .75rem -1rem 0; padding: .25rem 1rem .6rem; }
  .ai-workbench-v3 .ai-model-rail .btn { min-height: 40px; border-radius: 14px; }
  .ai-starter-v3 { padding: 1rem !important; border-radius: 23px; background: color-mix(in srgb,var(--card2) 68%,var(--card)); }
  .ai-proof-loop-v3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin-bottom: .9rem; }
  .ai-proof-loop-v3 span { position: relative; min-height: 48px; display: flex; align-items: flex-end; padding: .55rem; color: var(--ink3); background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: .55rem; font-weight: 850; line-height: 1.25; }
  .ai-proof-loop-v3 span::before { position: absolute; top: .45rem; left: .55rem; color: var(--brand); font: 900 .62rem/1 Sora,Inter,sans-serif; }
  .ai-proof-loop-v3 span:nth-child(1)::before { content: "01"; }
  .ai-proof-loop-v3 span:nth-child(2)::before { content: "02"; }
  .ai-proof-loop-v3 span:nth-child(3)::before { content: "03"; }
  .ai-workbench-v3 .opt { min-height: 46px; border-radius: 15px; }
  .ai-workbench-v3 .bubble-u { border-radius: 18px 18px 5px 18px; box-shadow: 0 8px 20px color-mix(in srgb,var(--brand) 14%,transparent); }
  .ai-workbench-v3 .bubble-a { border-radius: 18px 18px 18px 5px; border: 1px solid var(--line); box-shadow: none; }
  .ai-workbench-v3 .chat-composer { bottom: calc(88px + env(safe-area-inset-bottom)); padding: .4rem 10px; background: transparent !important; }
  .ai-composer-v3 { border-radius: 20px; background: color-mix(in srgb,var(--card) 92%,transparent); box-shadow: 0 14px 34px rgba(31,60,95,.18); backdrop-filter: blur(22px); }

  /* Profile: identity first, then one readable progress ledger. */
  .profile-hero-v3 { position: relative; padding-right: 5.6rem !important; border-radius: 27px; }
  .profile-hero-v3 .proof-orbit-v3 { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); }
  .profile-hero-v3 .proof-orbit-v3::before { background: #0a2036; }
  .profile-hero-v3 .proof-orbit-v3 span { color: #f8fbff; }
  .profile-hero-v3 .proof-orbit-v3 small { color: #7895ab; }
  .profile-next-v3 { margin-top: .75rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 23px; box-shadow: 0 12px 30px rgba(32,69,112,.07); }
  .profile-next-v3__row { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-top: .65rem; }
  .profile-next-v3 h3 { font: 800 .92rem/1.3 Sora,Inter,sans-serif; }
  .profile-next-v3 p { margin-top: .3rem; color: var(--ink4); font-size: .63rem; line-height: 1.45; }
  .profile-next-v3 button { min-height: 44px; flex: 0 0 auto; padding-inline: .85rem; }
  .profile-next-v3__bar { height: 5px; margin-top: .8rem; overflow: hidden; background: var(--card2); border-radius: 999px; }
  .profile-next-v3__bar i { display: block; width: calc(var(--value) * 1%); height: 100%; background: linear-gradient(90deg,var(--brand),var(--brand2)); border-radius: inherit; }
  .profile-ledger-heading-v3 { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 1.25rem; }
  .profile-ledger-heading-v3 span { color: var(--ink4); font-size: .55rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
  .profile-metrics { gap: 1px !important; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 22px; }
  .profile-metrics .card { min-height: 82px; display: grid; align-content: center; border: 0; border-radius: 0; background: var(--card); }
  .profile-badges { gap: 1px !important; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 20px; }
  .profile-badges .card { min-height: 72px; display: grid; align-content: center; border: 0; border-radius: 0; background: var(--card); }
}

@media (max-width: 350px) {
  .learn-command-v3__top { grid-template-columns: 1fr; }
  .learn-command-v3 .proof-orbit-v3 { position: absolute; top: 1rem; right: 1rem; width: 58px; height: 58px; }
  .learn-command-v3__promise { padding-right: 4.2rem; }
  .proof-loop-v3 { gap: .25rem; }
  .proof-loop-v3__node { font-size: .46rem; }
  .ai-proof-loop-v3 { grid-template-columns: 1fr; }
  .ai-proof-loop-v3 span { min-height: 42px; padding-left: 2.2rem; align-items: center; }
}

@media (min-width: 760px) and (max-width: 899px) {
  .learn-command-v3 { padding: 1.35rem; }
  .profile-next-v3 { padding: 1.2rem; }
}

[data-theme="dark"] .learn-command-v3 { color: #f8fbff; background: radial-gradient(circle at 100% 0%,rgba(34,211,238,.14),transparent 12rem),linear-gradient(145deg,#08182b,#0a2942); border-color: #173d5b; }
[data-theme="dark"] .learn-command-v3__promise { color: #a8bdcd; }
[data-theme="dark"] .learn-command-v3__artifact { color: #7892a8; border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .learn-command-v3__artifact strong { color: #dbe8f1; }
[data-theme="dark"] .proof-orbit-v3::before { background: #0a1e33; }
[data-theme="dark"] .proof-orbit-v3 span { color: #f8fbff; }
[data-theme="dark"] .lesson-progress-v3 { background: color-mix(in srgb,#071426 88%,transparent); }
[data-theme="dark"] .practice-ticket-v3 { background: #0b2238; }
[data-theme="dark"] .profile-next-v3 { background: #0a1c30; border-color: #17344d; }

@media (hover: hover) and (pointer: fine) and (max-width: 899px) {
  .learn-command-v3__action:hover,
  .lesson-action-v3:hover { transform: translateY(-1px); }
  .profile-next-v3 button:hover { box-shadow: 0 8px 20px color-mix(in srgb,var(--brand) 16%,transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .learn-command-v3__action,
  .lesson-action-v3,
  .profile-next-v3 button { transform: none !important; transition-property: color,background-color,border-color,box-shadow,opacity !important; }
}