/* ═════════════════════════════════════════════════════════════════════
   LECTA · MOBILE PATCH
   Drop-in stylesheet, load AFTER design.css in _base_app.html / base.html.
   Mobile-only — all rules wrapped in (max-width: 900px) media query.
   Builds on existing Bloom tokens — no new colors/fonts introduced.
   ═════════════════════════════════════════════════════════════════════ */

/* Desktop: hide mobile-only elements */
.mob-login, .mob-app, .mob-footer-link, .sheet, .lec-pills { display: none; }

@media (max-width: 900px) {

  /* ─── TOPBAR (base.html pages): hide nav, show bottom-nav ──────── */
  .topbar .topbar-inner nav,
  .topbar .burger,
  .topbar .mobile-menu,
  .topbar .topbar-inner .right { display: none !important; }
  .topbar .topbar-inner .brand { pointer-events: auto; }
  .topbar .topbar-inner .mob-login,
  .topbar .topbar-inner .mob-app {
    display: inline-flex !important;
    margin-left: auto;
    font-size: 14px; font-weight: 600;
    color: var(--ink); text-decoration: none;
    padding: 8px 16px; border-radius: 999px;
    background: var(--bg-3);
  }

  /* ─── FOOTER: single line on mobile (landing only) ────────────── */
  footer.site {
    padding: 0 16px calc(80px + var(--safe-bottom, 0px)) !important;
    border-top: 0 !important;
  }
  footer.site .grid { display: none !important; }
  /* Hide footer entirely on app-like pages that have bottom-nav */
  body:has(.bottom-nav .on) footer.site { display: none !important; }
  footer.site .page { padding: 0 !important; }
  footer.site .bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
    padding: 14px 0 !important;
    border-top: 0 !important;
    font-size: 11.5px; color: var(--ink-3);
    white-space: nowrap;
  }
  footer.site .bottom .mob-footer-link {
    display: inline !important;
    color: var(--ink-3); text-decoration: none; font-weight: 600;
  }
  footer.site .bottom .mob-footer-link::before {
    content: "·"; margin-right: 6px;
  }
  footer.site .bottom .mob-footer-link:hover { color: var(--coral); }

  /* ─── safe-area + iOS keyboard awareness ────────────────────────── */
  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top, 0px);
    --nav-h:       72px;          /* bottom nav height incl. safe area */
    --fab-h:       64px;          /* FAB diameter + gap */
  }

  body { font-size: 16px; }   /* iOS won't zoom on input focus */

  /* ─── APP HEADER: minimal logo + avatar, no inline tabs/quota ─── */
  .appnav {
    padding: 10px 16px;
    gap: 0;
    background: rgba(253,251,247,.88);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
  }
  .appnav .brand { width: 92px; height: 28px; }
  .appnav .nav-pills,
  .appnav .quota,
  .appnav .lang-switch { display: none !important; }
  .appnav .right { gap: 8px; }
  .appnav .me {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .appnav .me .em { display: none; }
  .appnav .me .ava { width: 36px; height: 36px; font-size: 14px; }

  /* dashboard tab — push greeting up by removing crumbs gap */
  .crumbs { padding: 10px 16px 0; font-size: 12px; }

  /* ─── DASHBOARD: greeting + stats strip + lecture cards ────────── */

  .content {
    padding: 18px 16px calc(120px + var(--safe-bottom)) !important;
  }

  /* Greeting block — bigger, with date pill */
  .greeting {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .greeting .date {
    display: none !important;
  }
  .greeting h1 {
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }
  .greeting .hand {
    font-size: 26px !important;
    margin-left: 8px !important;
  }
  .sub {
    font-size: 14.5px !important;
    margin-bottom: 16px !important;
  }

  /* Drop-zone disappears on mobile — replaced by FAB. Keep only file
     inputs the FAB triggers via JS click() chain. */
  .dz { display: none !important; }

  /* Stats — 2-column grid (or 2x2 for 4 cards). No horizontal scroll —
     users dislike accidental h-scroll on what should be a static page. */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .stats .stat-card {
    flex: none;
    min-width: 0;
    scroll-snap-align: unset;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }
  .stats .stat-card:hover { transform: none !important; }
  .stats .stat-card .v { font-size: 22px !important; }

  /* Filter tabs row — bulletproof styling (works without template's inline CSS) */
  .tabs-row {
    margin-top: 22px !important;
    margin-bottom: 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs {
    display: flex !important;
    gap: 4px !important;
    background: var(--bg-3) !important;
    padding: 4px !important;
    border-radius: 999px !important;
    width: 100%;
  }
  .tabs button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 8px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
    font-family: var(--sans) !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    flex: 1;
  }
  .tabs button.on {
    background: var(--ink) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  .tabs button .n {
    font-size: 11px !important;
    opacity: .7;
    font-variant-numeric: tabular-nums;
  }
  .tabs button[data-tab="fail"] {
    display: none !important;
  }

  /* Quota strip — compact, with circular badge */
  .quota-strip {
    margin-top: 18px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .quota-strip .h .b { font-size: 16px !important; }
  .quota-strip .h .renew { font-size: 12px !important; }

  /* ─── LECTURES LIST: convert table-on-mobile to true cards ─────── */

  .lectures thead { display: none; }
  .lectures, .lectures tbody, .lectures tr, .lectures td { display: block; }
  .lectures { border-spacing: 0 10px; }

  .lectures tbody tr {
    position: relative;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 14px -10px rgba(0,0,0,.08) !important;
    border: 1px solid var(--rule);
  }
  .lectures tbody tr:hover { transform: none !important; }
  .lectures tbody td {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .lectures tbody td:first-child { padding-left: 0 !important; }
  .lectures tbody td:last-child  { padding-right: 0 !important; }

  /* Card body restructure: stack rows */
  .lectures .lec {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
  }
  .lectures .lec .thumb {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  .lectures .lec .meta { flex: 1; min-width: 0; }
  .lectures .lec .meta .t {
    font-size: 14.5px !important;
    max-width: 100% !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3 !important;
  }
  .lectures .lec .meta .s {
    font-size: 11.5px !important;
    max-width: 100% !important;
    margin-top: 3px;
  }

  /* Combined meta row: when, dur, status as inline chips */
  .lectures .when,
  .lectures .dur,
  .lectures .st {
    display: inline-flex !important;
    align-items: center;
    font-size: 11.5px !important;
    color: var(--ink-3);
    font-weight: 600;
    padding: 0 !important;
    margin-right: 8px;
  }
  .lectures .when b {
    display: inline !important;
    font-size: 11.5px !important;
    color: var(--ink-2);
    font-weight: 700;
    margin-left: 4px;
  }
  .lectures .st { margin-right: 0; }
  .lectures .actions {
    display: flex !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    margin-top: 6px;
    border-top: 1px solid var(--rule);
  }
  .lectures .actions a {
    margin: 0 !important;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--bg-2);
    font-size: 12.5px !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .lectures .actions a.primary {
    background: var(--coral);
    color: #fff !important;
  }

  /* Make whole card a link target via the title's anchor */
  .lectures .lec .meta .t a {
    display: block;
  }

  /* ─── LECTURE PAGE: slim header, full-bleed report ─────────────── */

  .lec-head {
    padding: 8px 14px 12px !important;
    background: rgba(253,251,247,.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    position: sticky;
    top: 0;
    z-index: 25;
  }
  .lec-head .crumbs-inline {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .lec-head .top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  .lec-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
  }
  .lec-title-pen { display: none; }    /* tap on title to edit on mobile */
  .lec-meta { gap: 6px !important; }

  /* Hide top-bar action row & course picker → moved into "..." sheet */
  .lec-actions { display: none !important; }
  .course-picker {
    margin-top: 8px !important;
  }
  .course-picker .selected {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Hide desktop sidebars on mobile; provide floating pills instead */
  .lec-toc,
  .lec-chat {
    display: none !important;
  }

  /* Report grid → single column */
  .lec-shell {
    display: block !important;
    padding: 14px 16px calc(110px + var(--safe-bottom)) !important;
  }
  .lec-report {
    padding: 22px 18px 32px !important;
    border-radius: 22px !important;
  }
  .lec-report h2.report-title {
    font-size: 24px !important;
    line-height: 1.18 !important;
    margin-bottom: 18px !important;
  }
  .lec-report .kicker { font-size: 11px !important; }
  .report-tldr {
    padding: 16px 18px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
  }
  .report-tldr p { font-size: 14.5px !important; line-height: 1.55 !important; }
  .report-section { margin-top: 32px !important; }
  .report-section .h2 {
    font-size: 12px !important;
    padding-top: 20px !important;
    margin-bottom: 14px !important;
  }
  .report-chapter {
    margin-top: 36px !important;
    padding-top: 24px !important;
  }
  .report-chapter .ch-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .report-chapter .ch-n {
    font-size: 14px !important;
    color: var(--coral-deep);
  }
  .report-chapter h3 {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }
  .report-chapter .ch-range {
    font-size: 11px !important;
    margin-bottom: 4px;
  }
  .report-chapter .ch-summary { font-size: 15px !important; line-height: 1.6 !important; }
  .report-chapter .ch-notes { font-size: 14.5px !important; line-height: 1.7 !important; }

  /* Quotes — slimmer */
  .report-quote { padding: 14px 16px !important; }
  .report-quote .q { font-size: 14.5px !important; }

  /* ─── FLOATING LECTURE PILLS (TOC + Chat) ─────────────────────── */
  /* Markup: <div class="lec-pills"><button data-sheet="toc">…</button>… */
  .lec-pills {
    position: fixed;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
    left: 0; right: 0;
    z-index: 45;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0 16px;
  }
  .lec-pills .group {
    display: flex; align-items: center;
    gap: 4px; padding: 6px;
    border-radius: 999px;
    background: rgba(26,34,51,.94);
    color: #fff;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.45);
    pointer-events: auto;
  }
  .lec-pills .pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px 9px 13px;
    border-radius: 999px;
    background: transparent;
    border: 0; color: #fff;
    font: 700 13px var(--sans);
    cursor: pointer;
  }
  .lec-pills .pill .n {
    font-size: 10px; opacity: .65;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .lec-pills .pill.cta {
    background: var(--coral);
  }
  .lec-pills .sep {
    width: 1px; height: 18px;
    background: rgba(255,255,255,.18);
  }

  /* ─── BOTTOM SHEET (TOC, Chat, Upload, Lecture-actions) ─────── */
  /* Markup: <div class="sheet" id="…"><div class="scrim"></div>
              <div class="panel"><div class="grip"></div>…</div></div>     */
  .sheet {
    display: block;
    position: fixed; inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
  }
  .sheet.open { pointer-events: auto; visibility: visible; }
  .sheet .scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.46);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .sheet.open .scrim { opacity: 1; }
  .sheet .panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    background: var(--bg);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 50px rgba(26,34,51,.22);
    padding-bottom: var(--safe-bottom);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .sheet.open .panel { transform: translateY(0); }
  .sheet .grip {
    width: 40px; height: 4px;
    border-radius: 4px;
    background: var(--rule-3);
    margin: 10px auto 4px;
    flex: none;
  }
  .sheet .sheet-head {
    padding: 6px 18px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex: none;
  }
  .sheet .sheet-head .h {
    font-size: 11px; font-weight: 700;
    color: var(--ink-3);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .sheet .sheet-head .b {
    font-size: 18px; font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-top: 2px;
  }
  .sheet .sheet-head .close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 0; color: var(--ink-2);
    display: grid; place-items: center;
    cursor: pointer;
  }
  .sheet .sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 24px;
    -webkit-overflow-scrolling: touch;
  }

  /* TOC items inside sheet — mirror the desktop .lec-toc styling */
  .sheet .toc-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
  }
  .sheet .toc-row .n {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--ink-3);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .sheet .toc-row .t {
    font-size: 13.5px; font-weight: 600;
    line-height: 1.3;
  }
  .sheet .toc-row .ts {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); font-weight: 600;
    margin-top: 3px;
  }
  .sheet .toc-row.active {
    background: var(--coral-soft);
  }
  .sheet .toc-row.active .n {
    background: var(--coral); color: #fff;
  }
  .sheet .toc-row.active .t { color: var(--coral-deep); font-weight: 700; }
  .sheet .toc-row.active .ts { color: var(--coral-deep); }

  /* Chat inside the sheet — reuses .lec-chat selectors with overrides */
  .sheet.sheet-chat .panel {
    height: 90vh;
    max-height: 90vh;
  }
  .sheet.sheet-chat .lec-chat {
    display: flex !important;
    position: static !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    overflow: hidden;
    max-height: none !important;
  }
  .sheet.sheet-chat .lec-chat .chat-head { display: none; }
  .sheet.sheet-chat .lec-chat .msgs {
    min-height: 0; max-height: none !important;
    padding: 8px 16px 14px;
  }

  /* Upload sheet — three action rows */
  .sheet-upload .action-row {
    display: flex; gap: 14px; align-items: center;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--ink);
  }
  .sheet-upload .action-row .ic {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: grid; place-items: center;
    flex: none;
  }
  .sheet-upload .action-row .ic.coral  { background: var(--coral-soft); color: var(--coral-deep); }
  .sheet-upload .action-row .ic.mint   { background: var(--mint-soft);  color: var(--mint-deep); }
  .sheet-upload .action-row .ic.violet { background: var(--violet-soft); color: var(--violet-ink); }
  .sheet-upload .action-row .body { flex: 1; min-width: 0; }
  .sheet-upload .action-row .body .t {
    font-size: 15px; font-weight: 700; color: var(--ink);
  }
  .sheet-upload .action-row .body .s {
    font-size: 12px; color: var(--ink-3); margin-top: 2px;
  }
  .sheet-upload .action-row .chev {
    color: var(--ink-4); flex: none;
  }

  /* ─── BOTTOM NAV: floating pill + side FAB (replaces bottom-nav) ─ */

  .bottom-nav {
    display: block !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: transparent !important;
    border-top: 0 !important;
    padding: 0 16px calc(14px + var(--safe-bottom)) !important;
  }
  .bottom-nav nav {
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 18px 40px -16px rgba(26,34,51,.18);
    display: flex; gap: 4px;
    max-width: none;
    margin: 0;
    padding-right: calc(6px + 44px + 8px);
    position: relative;
    overflow: visible;
  }
  .bottom-nav nav a {
    flex: 1;
    flex-direction: column;
    gap: 1px;
    padding: 8px 4px;
    border-radius: 999px;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-2);
    background: transparent;
  }
  .bottom-nav nav a.on {
    background: var(--ink);
    color: #fff;
  }
  .bottom-nav nav a.on .ico { color: #fff; }
  .bottom-nav nav a:hover { color: var(--ink); background: var(--bg-2); }
  .bottom-nav nav a.on:hover { background: var(--ink); color: #fff; }
  .bottom-nav .ico { width: 20px; height: 20px; }

  /* FAB lives inside .bottom-nav nav as a sibling of links */
  .bottom-nav .fab {
    position: absolute;
    right: 6px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    border: 0; padding: 0;
    display: grid; place-items: center;
    box-shadow: 0 18px 40px -10px rgba(255,106,74,.65);
    cursor: pointer;
    z-index: 2;
  }
  .bottom-nav .fab:hover { background: var(--coral-deep); }
  .bottom-nav .fab svg { width: 28px; height: 28px; }

  /* Body should leave room for the new floating nav (it's not full bleed) */
  main { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); }

  /* ─── ACCOUNT: better profile card, ring-style quota ──────────── */

  .acc-page { padding: 16px 0 calc(110px + var(--safe-bottom)) !important; }
  .acc-head h1 { font-size: 28px !important; }
  .acc-head { margin-bottom: 16px !important; }
  .acc-card { padding: 18px !important; border-radius: 20px !important; }
  .profile-row { gap: 14px !important; }
  .profile-row .ava { width: 56px !important; height: 56px !important; font-size: 22px !important; }
  .sub-name { font-size: 20px !important; }
  .sub-track { height: 8px !important; }
  .danger-card { padding: 18px !important; border-radius: 20px !important; margin-top: 14px !important; }

  /* ─── PRICING: stacked plan cards ─────────────────────────────── */

  .plans-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .plan { padding: 22px 20px !important; border-radius: 22px !important; }

  /* ─── LOGIN: bigger taps, full-bleed buttons ──────────────────── */

  .auth-card { padding: 22px 18px !important; border-radius: 22px !important; margin: 8px auto 0 !important; }
  .auth-card .input { padding: 14px 16px !important; font-size: 15px !important; border-radius: 14px !important; }
  .auth-card .btn { padding: 14px 16px !important; min-height: 48px; }

  /* ─── PROGRESS / PROCESSING SCREEN: nicer ring layout ─────────── */

  .prog-card { padding: 18px !important; border-radius: 20px !important; }
  .prog-card h3 { font-size: 16px !important; }
  .step-row { padding: 12px !important; gap: 12px !important; }
  .step-row .step-label { font-size: 14px !important; }

  /* ─── COMMON: fix tap target sizes ─────────────────────────────── */

  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 10px 16px !important; }
  .chip { line-height: 1.3; }

  /* Reduce desktop max widths */
  .page { padding: 0 16px !important; }
}

/* ───────────────────────────────────────────────────────────────────
   Tablet / wide-mobile (901–1100px) — soften extreme overrides
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1100px) {
  .lec-shell {
    grid-template-columns: 1fr !important;
  }
  .lec-toc, .lec-chat {
    position: static !important;
    max-height: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Pulse animation (used by status dots in chips/cards)
   ─────────────────────────────────────────────────────────────────── */
@keyframes mob-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.7); }
}

/* ═════════════════════════════════════════════════════════════════════
   POLISH · second pass
   Account · Login · Pricing · Processing · Lecture-actions sheet
   Loaded together with the main mobile patch above.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ─── reusable ring-progress (CSS-only via conic-gradient) ────────
     Markup: <div class="ring" style="--pct:47" data-color="coral">
               <div class="ring-c">47<span class="ring-u">%</span></div>
             </div>
     Color via [data-color] attribute on the wrapper. */
  .ring {
    --size: 64px;
    --stroke: 6px;
    --pct: 0;
    --ring-c: var(--coral);
    --track-c: var(--bg-3);
    width: var(--size); height: var(--size);
    border-radius: 50%;
    background:
      conic-gradient(var(--ring-c) calc(var(--pct) * 1%), var(--track-c) 0);
    display: grid; place-items: center;
    flex: none;
    position: relative;
  }
  .ring[data-color="mint"]   { --ring-c: var(--mint-deep); }
  .ring[data-color="violet"] { --ring-c: var(--violet-ink); }
  .ring[data-color="warn"]   { --ring-c: var(--warn); }
  .ring::before {
    content: ""; position: absolute; inset: var(--stroke);
    border-radius: 50%; background: var(--surface);
  }
  .ring-c {
    position: relative; z-index: 1;
    font-size: calc(var(--size) * 0.28);
    font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1; letter-spacing: -0.02em;
    text-align: center;
  }
  .ring-u {
    font-size: calc(var(--size) * 0.16);
    color: var(--ink-3); font-weight: 600;
    margin-left: 1px;
  }
  .ring--lg { --size: 80px; --stroke: 7px; }

  /* ─── ACCOUNT: profile + ring quota + grouped settings ─────────── */

  /* Force single-column on mobile (production template has this in its
     own @media; we re-declare so the patch works even if that block is
     moved or modified). */
  .acc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .kv {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
  }
  .kv .v2 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Profile card */
  .acc-card#profile {
    display: flex; align-items: center; gap: 14px;
    padding: 18px !important;
  }
  .acc-card#profile > .k { display: none; }   /* hide eyebrow on mobile */
  .acc-card#profile .profile-row {
    flex-direction: row; gap: 14px; margin: 0;
    flex: 1; min-width: 0;
  }
  .acc-card#profile .profile-row .name { font-size: 17px !important; letter-spacing: -0.015em; }
  .acc-card#profile .profile-row .sub  { font-size: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
  .acc-card#profile .kv { display: none !important; }    /* hide email/ID block — name + email already in profile-row */
  .acc-card#profile form { margin-top: 0 !important; }

  /* Usage card with ring-progress */
  .acc-card#usage {
    padding: 18px !important;
    display: flex !important;
    gap: 16px;
    flex-direction: column;
  }
  .acc-card#usage > .k {
    font-size: 10.5px !important;
    margin-bottom: -4px;
  }
  .acc-card#usage .sub-name {
    font-size: 18px !important;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .acc-card#usage .sub-desc {
    font-size: 12.5px !important;
    line-height: 1.5;
  }
  .acc-card#usage .sub-track { display: none; }   /* hidden — replaced visually by ring (added via JS, see below) */
  .acc-card#usage [style*="margin-top:18px"] { gap: 8px; flex-wrap: wrap; }

  /* JS may inject a .ring element ahead of the sub-name; if so, side-by-side */
  .acc-card#usage.with-ring {
    flex-direction: row; align-items: center;
  }
  .acc-card#usage.with-ring .body { flex: 1; min-width: 0; }

  /* Billing card — keep compact */
  .acc-card#billing { padding: 18px !important; }
  .acc-card#billing > .k { font-size: 10.5px !important; }
  .acc-card#billing p { font-size: 13px !important; margin-top: 6px !important; }
  .acc-card#billing .kv {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
    font-size: 12.5px;
  }

  /* Section heads for visual rhythm */
  .acc-grid + .acc-card,
  .acc-card + .acc-card,
  .acc-card + .danger-card,
  .acc-card + .admin-card { margin-top: 12px !important; }

  /* ─── LOGIN: OAuth-first + bigger taps + attractive layout ────── */

  /* Auth page container — warm gradient bg, full height */
  body > .auth-page,
  body > .page > .auth-page,
  .auth-page {
    padding: 24px 18px 80px !important;
    min-height: 100vh;
    background: radial-gradient(circle at top right, var(--coral-soft), transparent 60%),
                radial-gradient(circle at bottom left, var(--sun-soft), transparent 50%),
                var(--bg);
    max-width: 460px !important;
  }

  /* Auth head — big greeting */
  .auth-head { text-align: left !important; margin-bottom: 26px !important; }
  .auth-head h1 {
    font-size: 36px !important;
    letter-spacing: -0.04em !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
  }
  .auth-head .sub {
    font-size: 14.5px !important;
    color: var(--ink-2) !important;
    line-height: 1.5 !important;
    max-width: 320px !important;
    margin: 0 !important;
  }

  /* Auth card — frame with shadow */
  .auth-card {
    padding: 22px 20px !important;
    border-radius: 24px !important;
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: 0 20px 50px -24px rgba(26,34,51,.22);
    margin: 0 auto !important;
  }

  /* Form layout */
  .auth-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* SSO block: pull to top, padded, like a primary CTA */
  .auth-form .sso {
    order: -1;
    margin: 0 0 14px !important;
  }
  .auth-form .sso a {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 16px !important;
    background: var(--surface);
    border: 1.5px solid var(--rule-2);
    border-radius: 14px !important;
    font-size: 15px !important; font-weight: 700;
    color: var(--ink) !important; text-decoration: none;
    min-height: 52px;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .auth-form .sso a:hover {
    border-color: var(--ink);
    background: var(--bg-2);
    box-shadow: 0 4px 12px -8px rgba(0,0,0,.15);
  }
  .auth-form .sso .ico {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
  }

  /* "Или email" divider — inject via ::before on the first .field */
  .auth-form .sso + .field::before,
  .auth-form .field:first-of-type:not(.sso + .field)::before { content: none; }
  .auth-form .sso + .field {
    margin-top: 22px !important;
    position: relative;
  }
  .auth-form .sso + .field::before {
    content: "или email";
    display: block;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
    position: relative;
  }
  .auth-form .sso + .field::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0; right: 0;
    height: 1px;
    background: var(--rule);
    z-index: 0;
  }
  .auth-form .sso + .field::before {
    background: var(--surface);
    padding: 0 12px;
    display: inline-block;
    z-index: 1;
    position: relative;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Inputs — 16px font prevents iOS zoom on focus */
  .auth-form .input,
  .auth-form input.input,
  .auth-form .field input {
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    min-height: 52px;
  }
  .auth-form .field + .field { margin-top: 14px; }
  .auth-form .field-head { margin-bottom: 8px !important; }
  .auth-form .field-head a {
    color: var(--coral);
    border-bottom-color: var(--coral-soft);
    font-weight: 600;
  }

  /* Submit button — coral, full width, prominent */
  .auth-form button[type="submit"],
  .auth-form .btn[type="submit"],
  .auth-form button.btn:not(.sso button) {
    margin-top: 20px !important;
    min-height: 52px;
    font-size: 15px !important;
    border-radius: 999px;
    width: 100%;
    box-shadow: 0 10px 26px -10px rgba(255,106,74,.55);
  }

  /* Alt link below card */
  .alt-link {
    margin-top: 22px !important;
    font-size: 14px !important;
    text-align: center;
  }
  .alt-link a {
    color: var(--coral);
    font-weight: 700;
    border-bottom: 1.5px solid var(--coral);
    padding-bottom: 2px;
    text-decoration: none;
  }

  /* ─── PRICING: stacked plan cards, popular elevated ──────────── */

  /* Pricing uses .plans (not .plans-grid). Stack on mobile. */
  .plans {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .plan {
    padding: 22px 20px !important;
    border-radius: 22px !important;
    position: relative;
  }
  .plan .name { font-size: 17px !important; }
  .plan .price {
    font-size: 32px !important;
    letter-spacing: -0.03em !important;
  }
  .plan ul, .plan .features { margin: 14px 0 16px !important; }
  .plan ul li, .plan .features li {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    padding-left: 28px !important;
    margin-bottom: 8px !important;
  }
  .plan .btn { min-height: 48px; font-size: 14px !important; }

  /* Popular plan (.plan.feat) gets ink-card treatment */
  .plan.feat {
    background: var(--ink) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 24px 50px -22px rgba(26,34,51,.5) !important;
  }
  .plan.feat .name, .plan.feat .price { color: #fff !important; }
  .plan.feat .price small,
  .plan.feat .sub { color: rgba(255,255,255,.6) !important; }
  .plan.feat li, .plan.feat ul li { color: rgba(255,255,255,.86) !important; }
  .plan.feat .badge-pos .chip { background: var(--coral) !important; color: #fff !important; }

  /* Billing switcher (period toggle) — full-width on mobile so buttons
     don't auto-size based on label length (фикс "неровного" вида) */
  .toggle {
    padding: 0 !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .toggle-inner {
    width: 100% !important;
    flex-shrink: 1 !important;
    display: flex !important;
  }
  .toggle-inner button {
    flex: 1 !important;
    padding: 11px 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
    min-height: 44px;
    text-align: center;
  }

  .billing-switch, .period-tabs {
    background: var(--bg-3);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 16px;
    display: flex !important;
    gap: 4px;
  }
  .billing-switch a, .period-tabs a, .period-tabs button {
    flex: 1; text-align: center; padding: 9px 8px !important;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-2);
  }
  .billing-switch a.on, .period-tabs a.on, .period-tabs button.on {
    background: var(--surface); color: var(--ink); font-weight: 700;
    box-shadow: 0 4px 12px -8px rgba(0,0,0,.18);
  }

  /* ─── PROCESSING / PROGRESS: ring-progress visualization ──────── */

  .prog-card {
    border-radius: 22px !important;
    padding: 20px !important;
  }
  /* Wrap percent + status into a flex row with ring on the left */
  .prog-card h3 { font-size: 15px !important; }
  /* Hide the linear progress bar inside the prog-card on mobile;
     JS adds a .ring element if available (graceful degrade if not). */
  .prog-card .prog-track + .prog-meta { font-size: 11.5px !important; }
  .prog-card .ring + .prog-meta-block { flex: 1; min-width: 0; }

  /* ─── LECTURE: "…" actions sheet trigger ──────────────────────── */

  /* Markup is injected by mobile.js into .lec-head on mobile.
     Production HTML doesn't need changes. */
  .lec-head .lec-more {
    position: absolute;
    top: 8px; right: 8px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    display: grid; place-items: center;
    z-index: 10;
    cursor: pointer;
  }
  .lec-head .lec-more svg { width: 18px; height: 18px; }
  .lec-head { position: relative; }

  /* Lecture actions sheet */
  .sheet.sheet-lec-actions .action-row {
    /* identical to upload sheet rows */
    display: flex; gap: 14px; align-items: center;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    font-family: var(--sans);
    cursor: pointer;
    color: var(--ink);
    text-decoration: none;
  }
  .sheet.sheet-lec-actions .action-row.danger {
    border-color: var(--coral-soft);
  }
  .sheet.sheet-lec-actions .action-row.danger .ic {
    background: var(--coral-soft);
    color: var(--coral-deep);
  }
  .sheet.sheet-lec-actions .action-row.danger .t {
    color: var(--coral-deep);
  }
  .sheet.sheet-lec-actions form {
    margin: 0; display: block;
  }
  .sheet.sheet-lec-actions form button.action-row {
    width: 100%; border: 1px solid var(--rule);
    background: var(--surface);
    cursor: pointer;
  }

  /* ─── LECTURE TOC PILL: hide when scrolled out of header view ─── */
  /* Optional: JS could toggle .lec-pills.hidden when keyboard appears.
     For now, ensure pills don't show on lectures that have no report. */
  .lec-pills:has(.pill) {
    /* visible */
  }

  /* ─── SHARE LINK / OPEN SHARE: cleaner mobile layout ────────── */
  .share-link {
    flex-direction: column;
    align-items: stretch !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }
  .share-link input {
    min-width: 0 !important; width: 100% !important;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid var(--mint);
  }

  /* ─── ONBOARDING / EMPTY-DROP: nicer mobile look ─────────────── */

  .empty-hero { padding: 24px 16px 8px !important; }
  .empty-hero h1 { font-size: 32px !important; line-height: 1.05 !important; }
  .empty-hero .hand { font-size: 30px !important; }
  .empty-hero p { font-size: 14.5px !important; max-width: 100% !important; }
  .empty-drop {
    margin-top: 24px !important;
    padding: 40px 22px !important;
    border-radius: 26px !important;
  }
  .empty-drop .ic { width: 64px !important; height: 64px !important; border-radius: 18px !important; }
  .empty-drop .ic svg { width: 28px; height: 28px; }
  .empty-drop .t { font-size: 20px !important; margin-top: 18px !important; }
  .empty-drop .s { font-size: 13.5px !important; }

  /* ─── SWIPE-ACTIONS on lecture cards (opt-in via JS) ──────────── */

  /* When mobile.js detects touch + finds .lectures cards, it can wrap
     each row in a swipeable container. CSS supports it via a .swipe
     wrapper class added by JS. */
  .lectures tbody tr.swipe {
    transform-origin: left center;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    overflow: visible !important;
  }
  .lectures tbody tr.swipe.swiping {
    transition: none;
  }
  .lectures tbody tr.swipe.revealed {
    transform: translateX(-128px);
  }
  .lectures tbody tr.swipe::after {
    content: "";
    position: absolute;
    right: -128px; top: 0; bottom: 0;
    width: 128px;
    background: linear-gradient(90deg, transparent, var(--coral-soft));
    border-radius: 0 18px 18px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
  }
  .lectures tbody tr.swipe.swiping::after,
  .lectures tbody tr.swipe.revealed::after { opacity: 1; }

  .swipe-actions {
    position: absolute;
    right: -128px; top: 0; bottom: 0;
    width: 128px;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; padding-right: 10px;
  }
  .swipe-actions button {
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 0; padding: 0;
    display: grid; place-items: center;
    background: var(--surface);
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.18);
    color: var(--ink-2);
  }
  .swipe-actions button.danger {
    background: var(--coral-deep); color: #fff;
  }
  .swipe-actions button.share {
    background: var(--mint-deep); color: #fff;
  }

  /* ─── COURSE PICKER on mobile: convert dropdown to bottom-sheet ─ */
  /* Existing CSS already lifts it to fixed bottom <640px; here we
     polish the visuals to match other sheets. */
  .course-picker .panel {
    border-radius: 24px 24px 0 0 !important;
    padding: 12px 16px 24px !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  }
  .course-picker .panel .search {
    background: var(--bg-2);
    border-radius: 12px;
    padding: 10px 12px;
  }
  .course-picker .panel .item {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}