.caption-panel { display:grid; gap:10px; margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.caption-toolbar, .slide-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.caption-toolbar label, .slide-toolbar label { display:flex; align-items:center; gap:7px; }
.caption-toolbar select { width:auto; }
.caption-window { min-height:76px; padding:11px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.caption-window small { color:var(--muted); font-weight:700; }
.caption-window p { margin:7px 0 0; font-size:17px; line-height:1.45; }
.caption-window.translated { border-color:#8bb7aa; }
.slide-workspace { display:grid; gap:12px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.slide-toolbar select { flex:1; min-width:150px; }
.slide-toolbar input { width:72px; }
.slide-stage { position:relative; width:100%; min-height:260px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#202625; }
.slide-stage iframe, .slide-stage img { display:block; width:100%; height:420px; border:0; object-fit:contain; background:#fff; }
.slide-stage canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.lecture-workspace-toolbar { display:grid; grid-template-columns:1.2fr .7fr 1fr; gap:10px; align-items:end; margin-bottom:12px; }
.lecture-workspace-toolbar label { display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:750; }
.lecture-workspace-toolbar select { min-height:42px; }
.audio-version-row { align-items:center; margin-bottom:12px; }
.audio-version-row button,
#translated-track-buttons button,
.ai-output-panel #retry-ai-output,
#process-audio-button,
#next-chunk-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:max-content;
  max-width:100%;
  padding:0 16px;
  white-space:nowrap;
  border-radius:12px;
  font-weight:800;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,rgba(244,248,246,.92));
  box-shadow:0 6px 18px rgba(21,45,43,.06);
}
.audio-version-row button.track-ready { border-color:#8abbb0; }
.audio-version-row button.track-unavailable {
  opacity:.55;
  border-style:dashed;
  background:rgba(128,150,145,.08);
  cursor:not-allowed;
}
.audio-version-row button.active-audio-version,
#translated-track-buttons button.active-audio-version {
  border-color:#3f776d;
  background:linear-gradient(135deg,#c9eadf,#ffffff 48%,#b8e1d1);
  color:#142a2b;
  box-shadow:inset 0 0 0 1px rgba(63,119,109,.28), 0 10px 24px rgba(63,119,109,.14);
}
#translated-track-buttons { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
#process-audio-button,
#next-chunk-button { color:#2b5f57; }
.ai-output-panel #retry-ai-output {
  min-height:48px;
  border-color:#142a2b;
  background:linear-gradient(135deg,#183836,#285f57);
  color:#fff;
  box-shadow:0 12px 28px rgba(20,42,43,.18);
}
@media(prefers-color-scheme:dark) {
  .audio-version-row button,
  #translated-track-buttons button,
  #process-audio-button,
  #next-chunk-button {
    background:linear-gradient(180deg,#1a2826,#14211f);
  }
  .audio-version-row button.active-audio-version,
  #translated-track-buttons button.active-audio-version {
    border-color:#8bc4b4;
    background:linear-gradient(135deg,#315d55,#1a302c 52%,#284b45);
    color:#edf4f1;
  }
}
.premium-toggle { display:grid; grid-template-columns:22px 1fr; align-items:start; gap:11px; padding:13px; border:1px solid var(--line); border-radius:8px; }
.premium-toggle input[type="checkbox"] { width:20px; height:20px; margin:2px 0 0; }
.premium-toggle span { display:grid; gap:4px; }
.premium-toggle small { color:var(--muted); font-weight:400; line-height:1.4; }
.premium-options { display:grid; gap:14px; margin:0; padding:14px; border:1px solid var(--line); border-radius:8px; }
.premium-options legend { padding:0 7px; color:var(--muted); font-weight:700; }
.premium-options:disabled { opacity:.55; }
.post-editor { display:grid; gap:18px; margin-bottom:24px; }
.post-editor h2 { margin:3px 0 6px; }
.post-editor p { margin-bottom:0; }
.post-editor-controls { display:grid; grid-template-columns:minmax(130px,180px) 1fr; gap:12px; align-items:end; }
.post-upload-button { min-height:44px; font-weight:750; }
.pdf-text-panel { border:1px solid var(--line); border-radius:8px; padding:12px; }
.pdf-text-panel summary { cursor:pointer; font-weight:750; }
.pdf-text-panel pre { max-height:320px; overflow:auto; white-space:pre-wrap; font:13px/1.5 ui-monospace,SFMono-Regular,monospace; }
@media(max-width:760px) { .post-editor-controls { grid-template-columns:1fr; } .post-upload-button { width:100%; } }
.lecture-study-layout { display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; margin-bottom:24px; }
.lecture-study-layout.layout-photos-large,
.lecture-study-layout.layout-equal,
.lecture-study-layout.layout-stacked { grid-template-columns:1fr; }
.layout-resizer { display:grid; place-items:center; align-self:stretch; min-width:18px; min-height:90px; padding:0; border:1px dashed var(--line); border-radius:999px; background:rgba(128,150,145,.11); color:var(--muted); cursor:col-resize; touch-action:none; }
.layout-resizer span { transform:rotate(90deg); font-size:14px; pointer-events:none; }
.layout-resizer:hover,
.layout-resizer:focus-visible,
.layout-resizing .layout-resizer { border-color:#5d9288; background:rgba(139,196,180,.22); color:#2f675f; }
.layout-stacked .layout-resizer { display:none; }
.lecture-study-layout > .layout-resizer,
.lecture-study-layout > .lecture-gallery-panel { display:none; }
.layout-resizing { cursor:col-resize; user-select:none; }
.sync-timeline-panel { display:grid; gap:14px; margin-bottom:0; }
.sync-timeline-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.sync-timeline-heading h2 { margin:3px 0 0; }
.sync-timeline-heading .eyebrow { margin-top:0; }
#sync-current-time { font-size:20px; font-variant-numeric:tabular-nums; }
.timeline-scrubber { width:100%; height:30px; padding:0; border:0; accent-color:#3f776d; cursor:grab; }
.timeline-scrubber:active { cursor:grabbing; }
.scrubber-labels { display:flex; justify-content:space-between; margin-top:-12px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.sync-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.32fr); gap:18px; align-items:start; }
.lecture-video-stack { display:grid; gap:10px; min-width:0; }
.sync-slide-stage { min-height:300px; }
.sync-slide-stage iframe,.sync-slide-stage img { height:min(58vh,560px); }
.sync-slide-stage img { object-fit:contain; }
.sync-slide-stage canvas { pointer-events:none; }
.sync-empty { display:grid; place-items:center; min-height:300px; padding:30px; text-align:center; color:#b9c7c4; }
.sync-caption-panel { display:grid; gap:8px; }
.caption-line { display:grid; gap:5px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(184,225,209,.14); }
.caption-line span { color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.caption-line p { margin:0; font-size:17px; line-height:1.45; }
.caption-line.translated { border-color:#8bb7aa; background:rgba(139,196,180,.18); }
.sync-content h3 { margin:0 0 10px; }
.sync-notes { display:grid; gap:5px; max-height:380px; overflow:auto; }
@media(max-width:760px) {
  .sync-timeline-heading { align-items:start; }
  .sync-timeline-heading h2 { font-size:18px; }
  #sync-current-time { font-size:17px; }
  .sync-content { grid-template-columns:1fr; }
  .sync-slide-stage iframe,.sync-slide-stage img { height:300px; }
  .lecture-study-layout,
  .lecture-study-layout.layout-photos-large,
  .lecture-study-layout.layout-equal,
  .lecture-study-layout.layout-stacked { grid-template-columns:1fr; }
  .layout-resizer { display:none; }
}
.ai-output-panel { display:grid; gap:10px; margin-bottom:14px; padding:14px; }
.ai-output-panel h2 { margin:3px 0 0; }
.ai-output-panel .sync-timeline-heading { align-items:center; }
.ai-output-panel .sync-timeline-heading h2 { font-size:20px; }
.ai-output-panel #ai-output-status { margin:0; }
.ai-output-panel #retry-ai-output { width:max-content; }
.ai-output-panel details { border:1px solid var(--line); border-radius:8px; padding:12px; }
.ai-output-panel summary { cursor:pointer; font-weight:750; }
.ai-output-panel pre,.ai-text { max-height:520px; overflow:auto; margin:12px 0 0; white-space:pre-wrap; font:14px/1.55 inherit; }
@media(max-width:760px) { .slide-stage iframe, .slide-stage img { height:330px; } }
.modal-open { overflow:hidden; }
.attachment-viewer { position:fixed; inset:0; z-index:50; display:grid; grid-template-rows:auto 1fr; background:rgba(7,15,14,.96); padding-top:env(safe-area-inset-top); }
.attachment-viewer-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line); }
.attachment-viewer-bar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-viewer-bar button { flex:0 0 auto; font-weight:800; }
.attachment-viewer-body { display:grid; place-items:center; min-height:0; padding:10px; }
.attachment-viewer-body img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.attachment-viewer-body iframe { width:100%; height:100%; border:0; background:#fff; }
.material { width:100%; height:auto; min-height:0; text-align:left; }
.lecture-actions-guide { display:grid; gap:5px; padding:13px; border-radius:8px; background:#e7f2ed; }
.lecture-actions-guide span { color:var(--muted); font-size:13px; line-height:1.45; }
.recording-actions { margin:12px 0 18px; }
.recording-actions .file-button { flex:1; gap:7px; font-weight:750; }
.recording-actions .photo-action { border-color:#3f776d; background:#3f776d; color:#fff; }
.recording-control-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.recording-control-row .danger { grid-column:1 / -1; width:100%; }
.resume-recording-action { white-space:nowrap; }
.companion-action { white-space:nowrap; border-color:#3f776d; color:#3f776d; }
.companion-recorder-panel .stats-grid { opacity:.55; }
.companion-recorder-panel .energy-state span { color:#3f776d; }
#leave-companion-button { grid-column:1 / -1; width:100%; }
.silent-camera-panel { display:grid; gap:12px; margin:0 0 18px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.silent-camera-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.silent-camera-preview { position:relative; overflow:hidden; min-height:220px; border:1px solid var(--line); border-radius:8px; background:#050807; }
.silent-camera-preview video { display:block; width:100%; height:min(52vh,420px); object-fit:cover; transform-origin:center; }
.silent-camera-zoom { display:grid; gap:6px; }
.silent-camera-zoom input { padding:0; accent-color:#3f776d; }
.subject-library { display:grid; gap:10px; margin:0 0 18px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; }
.section-heading .eyebrow { margin:0; }
.subject-filter-list { display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:thin; }
.subject-chip { flex:0 0 auto; min-height:38px; border-radius:999px; padding:0 13px; font-size:13px; font-weight:750; }
.subject-chip.active { border-color:#3f776d; background:#3f776d; color:#fff; }
.subject-heading { margin:18px 0 4px; font-size:18px; }
.subject-album-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.subject-album-card { display:grid; gap:10px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; }
.subject-album-card:focus-visible { outline:3px solid rgba(139,196,180,.65); outline-offset:2px; }
.subject-album-card h2 { margin:0; font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
.subject-album-card p { margin:0; color:var(--muted); font-size:13px; }
.subject-album-cover { display:grid; place-items:center; height:150px; overflow:hidden; border-radius:10px; background:
  radial-gradient(circle at 20% 20%, rgba(184,225,209,.9), transparent 35%),
  linear-gradient(135deg, #183532, #0f1d1b 70%); color:#dff3ed; font-size:34px; font-weight:850; letter-spacing:.08em; }
.subject-album-cover img { width:100%; height:100%; object-fit:cover; }
.subject-hero { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:16px; align-items:center; margin-bottom:18px; }
.subject-cover { display:grid; place-items:center; width:150px; height:110px; overflow:hidden; border-radius:12px; background:
  radial-gradient(circle at 30% 25%, rgba(184,225,209,.95), transparent 36%),
  linear-gradient(135deg, #244b45, #101f1d); color:#e9f7f3; font-size:32px; font-weight:850; letter-spacing:.08em; }
.subject-cover img { width:100%; height:100%; object-fit:cover; }
.subject-hero h1 { margin:3px 0 5px; overflow-wrap:anywhere; }
.lecture-gallery-panel { display:grid; gap:14px; margin-bottom:0; }
.lecture-photo-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.photo-note-card { display:grid; gap:8px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.photo-note-card img { display:block; width:100%; height:160px; object-fit:cover; border-radius:8px; background:#fff; cursor:pointer; }
.photo-note-card img.broken-photo { display:grid; place-items:center; background:#24312f; }
.photo-note-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo-note-card small { color:var(--muted); font-variant-numeric:tabular-nums; }
.photo-note-list { display:grid; gap:5px; max-height:140px; overflow:auto; }
.photo-note-list p { margin:0; font-size:13px; line-height:1.4; }
.photo-note-list span { color:#5a9a8e; font-weight:800; font-variant-numeric:tabular-nums; }
.lecture-card-side { display:grid; justify-items:end; gap:8px; align-content:start; }
.small-action { min-height:34px; padding:0 10px; font-size:12px; }
.lecture-edit-card { grid-template-columns:1fr; cursor:default; }
.lecture-edit-card .button-row { justify-content:flex-start; }
.panel-lite { display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:rgba(184,225,209,.12); }
.mic-check strong { display:block; margin-bottom:4px; }
.mic-meter { height:12px; overflow:hidden; border-radius:999px; background:rgba(128,150,145,.25); }
.mic-meter span { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8bc4b4,#e0b84f,#d85b5b); transition:width .08s linear; }
.mic-check button { width:max-content; font-weight:750; }
.device-code-box { display:grid; justify-items:center; gap:4px; padding:14px; border:1px solid var(--line); border-radius:10px; background:rgba(184,225,209,.16); }
.device-code-box strong { font-size:34px; letter-spacing:.18em; font-variant-numeric:tabular-nums; }
.device-code-box span,.device-code-box small { color:var(--muted); }
@media(max-width:760px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .topbar { height:calc(58px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .login-shell { display:flex; align-items:center; justify-content:center; width:100%; padding:16px; }
  .login-card { width:100%; max-width:420px; padding:24px 20px; margin:0 auto; }
  .login-card input, .login-card button { font-size:16px; }
  #google-signin { display:flex; justify-content:center; max-width:100%; overflow:hidden; }
  .recording-actions { display:grid; grid-template-columns:1fr; }
  .recording-actions .file-button { width:100%; min-height:52px; }
  .recording-control-row { grid-template-columns:1fr; }
  .recording-control-row .danger { grid-column:auto; }
  .silent-camera-preview { min-height:200px; }
  .silent-camera-preview video { height:38vh; }
  .timeline-tools { min-width:0; }
  .slide-toolbar { align-items:stretch; }
  .slide-toolbar select { width:100%; }
  .subject-filter-list { margin-right:-14px; padding-right:14px; }
  .subject-album-grid { grid-template-columns:1fr; gap:12px; }
  .subject-album-card { grid-template-columns:96px minmax(0,1fr); align-items:center; }
  .subject-album-cover { grid-row:span 2; height:86px; font-size:26px; }
  .subject-hero { grid-template-columns:1fr; align-items:start; }
  .subject-cover { width:100%; height:150px; }
  .subject-hero .primary { width:100%; }
  .lecture-workspace-toolbar { grid-template-columns:1fr; }
  .audio-version-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
  .audio-version-row button,
  #translated-track-buttons button,
  #process-audio-button,
  #next-chunk-button {
    min-width:0;
    width:100%;
    padding:0 10px;
    font-size:14px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .audio-version-row #translated-track-buttons,
  .audio-version-row #process-audio-button,
  .audio-version-row #audio-processing-status { grid-column:1 / -1; }
  .audio-version-row #translated-track-buttons { display:grid; grid-template-columns:1fr; }
  .ai-output-panel #retry-ai-output { width:100%; }
  .lecture-photo-gallery { grid-template-columns:1fr; }
  .lecture-card { grid-template-columns:1fr; }
  .lecture-card-side { display:flex; align-items:center; justify-content:space-between; justify-items:stretch; }
  .lecture-edit-card input { font-size:16px; }
  .mic-check button { width:100%; }
}

/* Mobile redesign v1: phone-first layout without changing app logic. */
:root {
  --mobile-radius:18px;
  --mobile-radius-sm:14px;
  --mobile-shadow:0 16px 42px rgba(18,42,40,.10);
  --mobile-soft:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,248,.92));
  --mobile-accent:linear-gradient(135deg,#153130,#2f6f66);
}

button,
.file-button,
.material,
.lecture-card,
.subject-album-card {
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:active,
.file-button:active,
.lecture-card:active,
.subject-album-card:active {
  transform:translateY(1px);
}

@media(max-width:760px) {
  body {
    background:
      radial-gradient(circle at 14% -6%, rgba(184,225,209,.52), transparent 34%),
      linear-gradient(180deg,#f6faf7 0%, #eef4f1 46%, #f7f8f4 100%);
  }

  body:has(#recording-view:not(.hidden)) {
    background:linear-gradient(180deg,#0f1d1b 0%, #132523 52%, #f4f6f3 52%, #f4f6f3 100%);
  }

  .topbar {
    top:0;
    height:calc(64px + env(safe-area-inset-top));
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    gap:8px;
    background:rgba(247,250,248,.86);
    border-bottom:1px solid rgba(55,82,78,.14);
    box-shadow:0 10px 26px rgba(20,42,43,.08);
  }

  .brand-button {
    flex:0 0 auto;
    min-height:44px;
    padding:0;
  }

  .brand-mark.small {
    width:44px;
    height:44px;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(20,42,43,.16);
  }

  .top-actions {
    flex:1;
    justify-content:flex-end;
    min-width:0;
    gap:6px;
  }

  .top-actions .chip {
    min-height:34px;
    padding:0 10px;
    font-size:12px;
  }

  #network-chip {
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .icon-button {
    width:42px;
    min-width:42px;
    min-height:42px;
    border-radius:14px;
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 18px rgba(20,42,43,.07);
  }

  .page,
  .page.narrow {
    width:100%;
    padding:22px 12px calc(82px + env(safe-area-inset-bottom));
  }

  .page-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin:8px 0 18px;
  }

  .page-heading h1,
  #lecture-title,
  #dashboard-title,
  #subject-title {
    font-size:30px;
    line-height:1.04;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
  }

  .eyebrow {
    margin:8px 0 5px;
    font-size:11px;
    letter-spacing:.16em;
  }

  .panel,
  .login-card,
  .lecture-card,
  .subject-album-card,
  .material {
    border-radius:var(--mobile-radius);
    border-color:rgba(55,82,78,.16);
    background:var(--mobile-soft);
    box-shadow:var(--mobile-shadow);
  }

  .panel {
    padding:16px;
  }

  input,
  textarea,
  select {
    min-height:50px;
    border-radius:14px;
    padding:13px 14px;
    font-size:16px;
    background:rgba(255,255,255,.9);
  }

  button,
  .file-button {
    min-height:50px;
    border-radius:15px;
    font-weight:800;
  }

  .primary {
    background:var(--mobile-accent);
    border-color:#255a54;
    box-shadow:0 12px 26px rgba(37,90,84,.18);
  }

  .danger:not(.primary) {
    border-color:#c65a5a;
    color:#943737;
    background:rgba(255,255,255,.92);
  }

  .primary.danger {
    background:linear-gradient(135deg,#b94545,#d25b55);
    border-color:#bd4c4c;
  }

  .back-button {
    min-height:40px;
    margin:4px 0 14px;
    padding:0;
    color:#315d58;
    font-weight:800;
  }

  .access-card {
    margin-bottom:18px;
  }

  .access-card h2,
  .access-settings h2 {
    font-size:22px;
    line-height:1.15;
  }

  .access-actions {
    width:100%;
  }

  .telegram-link {
    min-height:44px;
    justify-content:center;
    border:1px solid rgba(63,119,109,.24);
    border-radius:14px;
    background:rgba(184,225,209,.18);
  }

  #new-lecture-button,
  #subject-new-lecture-button {
    min-width:128px;
    min-height:52px;
    padding:0 16px;
    border-radius:18px;
    white-space:nowrap;
  }

  .subject-album-grid {
    display:grid;
    gap:12px;
  }

  .subject-album-card {
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }

  .subject-album-cover {
    width:92px;
    height:92px;
    border-radius:18px;
    font-size:25px;
  }

  .subject-album-card h2 {
    font-size:21px;
    line-height:1.08;
  }

  .subject-album-card p {
    font-size:13px;
    line-height:1.35;
  }

  .subject-hero {
    padding:14px;
  }

  .subject-cover {
    height:132px;
    border-radius:18px;
  }

  .lecture-list {
    gap:12px;
  }

  .lecture-card {
    grid-template-columns:minmax(0,1fr);
    padding:15px;
  }

  .lecture-card h2 {
    font-size:20px;
    line-height:1.16;
  }

  .lecture-card p {
    font-size:14px;
    line-height:1.35;
  }

  .lecture-card-side {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    justify-items:stretch;
    gap:8px;
  }

  .lecture-card-side time {
    align-self:center;
  }

  .small-action,
  .resume-recording-action,
  .companion-action {
    min-height:42px;
    border-radius:13px;
    font-size:13px;
    white-space:nowrap;
  }

  #lecture-form {
    gap:13px;
    margin-top:14px;
  }

  #lecture-form > .primary.danger[type="submit"] {
    position:sticky;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:4;
    min-height:58px;
    border-radius:19px;
    font-size:18px;
  }

  .premium-toggle,
  .premium-options,
  .notice-inline,
  .recording-checks,
  .panel-lite {
    border-radius:16px;
  }

  .premium-toggle {
    grid-template-columns:28px minmax(0,1fr);
    padding:14px;
  }

  .premium-toggle input[type="checkbox"] {
    width:26px;
    height:26px;
  }

  .mic-check button {
    min-height:50px;
  }

  .recording-page {
    padding:0 10px calc(104px + env(safe-area-inset-bottom));
  }

  .recording-header {
    top:calc(64px + env(safe-area-inset-top));
    margin:0 -10px 12px;
    padding:12px 14px;
    color:#eef8f4;
    background:rgba(15,29,27,.94);
    border-bottom:1px solid rgba(184,225,209,.14);
    box-shadow:none;
  }

  .recording-header strong {
    display:block;
    max-width:58vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px;
  }

  .recording-header time {
    font-size:24px;
    color:#fff;
  }

  .recording-grid {
    gap:12px;
  }

  .recorder-panel {
    background:linear-gradient(180deg,#162927,#10211f);
    color:#eef8f4;
    border-color:rgba(184,225,209,.16);
  }

  .recorder-panel .muted,
  .recorder-panel .upload-line {
    color:#b5c8c3;
  }

  .energy-state {
    padding-bottom:12px;
  }

  .energy-state span {
    color:#9dd4c1;
  }

  .energy-state strong {
    font-size:19px;
    line-height:1.18;
  }

  .stats-grid {
    margin:14px 0;
    border-radius:16px;
    overflow:hidden;
    background:rgba(184,225,209,.14);
  }

  .stats-grid div {
    padding:12px;
    background:rgba(255,255,255,.045);
  }

  .stats-grid dd {
    font-size:19px;
    color:#fff;
  }

  .recording-control-row {
    position:sticky;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:8;
    grid-template-columns:1fr 1fr;
    padding:8px;
    margin:12px -4px -4px;
    border:1px solid rgba(184,225,209,.22);
    border-radius:22px;
    background:rgba(15,29,27,.88);
    backdrop-filter:blur(16px);
    box-shadow:0 18px 40px rgba(0,0,0,.24);
  }

  .recording-control-row .danger {
    grid-column:1 / -1;
    color:#fff;
    background:linear-gradient(135deg,#b94545,#d35d57);
  }

  .recording-control-row button {
    min-height:52px;
  }

  .timeline-tools {
    padding:14px;
  }

  .lecture-actions-guide {
    border-radius:16px;
    background:linear-gradient(135deg,rgba(184,225,209,.34),rgba(255,255,255,.58));
  }

  .recording-actions {
    grid-template-columns:1fr;
    gap:10px;
  }

  .recording-actions .file-button {
    min-height:56px;
    border-radius:18px;
    font-size:16px;
  }

  .recording-actions .photo-action {
    background:var(--mobile-accent);
    box-shadow:0 12px 26px rgba(37,90,84,.18);
  }

  .silent-camera-panel,
  .slide-workspace {
    border-radius:18px;
  }

  .silent-camera-preview,
  .slide-stage {
    border-radius:18px;
  }

  .slide-stage iframe,
  .slide-stage img {
    height:300px;
  }

  #note-form textarea,
  #slide-annotation-form textarea,
  #post-annotation-form textarea {
    min-height:96px;
  }

  #note-form .button-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }

  #note-form .button-row button {
    min-width:0;
    padding:0 8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .timeline-item {
    grid-template-columns:62px minmax(0,1fr);
    padding:12px 0;
  }

  .player-panel {
    position:sticky;
    top:calc(64px + env(safe-area-inset-top));
    z-index:4;
    display:grid;
    gap:10px;
    margin:0 -4px 14px;
    padding:12px;
    border-radius:0 0 22px 22px;
    background:rgba(247,250,248,.94);
    backdrop-filter:blur(16px);
  }

  .lecture-workspace-toolbar {
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .lecture-workspace-toolbar label:first-child {
    grid-column:1 / -1;
  }

  .lecture-workspace-toolbar label {
    min-width:0;
  }

  .lecture-workspace-toolbar select {
    min-height:46px;
    font-size:14px;
  }

  .audio-version-row {
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:0;
  }

  .audio-version-row button,
  #translated-track-buttons button,
  #process-audio-button,
  #next-chunk-button {
    min-height:48px;
    border-radius:15px;
  }

  .player-panel audio {
    height:42px;
  }

  .player-meta {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    font-size:12px;
  }

  #chunk-position {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #next-chunk-button {
    max-width:150px;
  }

  .sync-timeline-panel {
    gap:12px;
  }

  .sync-slide-stage {
    min-height:250px;
    border-radius:20px;
    background:#111c1b;
  }

  .sync-slide-stage iframe,
  .sync-slide-stage img {
    height:min(54vh,430px);
  }

  .sync-empty {
    min-height:250px;
  }

  .caption-line {
    border-radius:16px;
    padding:12px;
  }

  .caption-line p {
    font-size:16px;
  }

  .sync-notes {
    max-height:none;
  }

  .ai-output-panel {
    border-radius:20px;
    padding:14px;
  }

  .ai-output-panel .sync-timeline-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .ai-output-panel .sync-timeline-heading h2 {
    font-size:21px;
    line-height:1.12;
  }

  #refresh-ai-output {
    min-height:42px;
    border-radius:14px;
    padding:0 12px;
  }

  .ai-output-panel details {
    border-radius:16px;
  }

  .post-editor {
    gap:14px;
  }

  .post-editor-controls {
    gap:10px;
  }

  .lecture-detail-grid {
    gap:18px;
  }

  .materials {
    gap:10px;
  }

  .material {
    min-height:58px;
    padding:14px;
  }

  .toast {
    left:12px;
    right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    max-width:none;
    border-radius:16px;
  }
}

@media(max-width:390px) {
  .page-heading {
    grid-template-columns:1fr;
  }

  #new-lecture-button,
  #subject-new-lecture-button {
    width:100%;
  }

  .top-actions {
    gap:4px;
  }

  .icon-button {
    width:40px;
    min-width:40px;
  }

  .lecture-workspace-toolbar {
    grid-template-columns:1fr;
  }

  .audio-version-row {
    grid-template-columns:1fr;
  }

  .player-meta {
    grid-template-columns:1fr;
  }

  #next-chunk-button {
    max-width:none;
    width:100%;
  }
}

@media(prefers-color-scheme:dark) and (max-width:760px) {
  body {
    background:
      radial-gradient(circle at 15% -4%, rgba(58,111,103,.34), transparent 34%),
      linear-gradient(180deg,#101817 0%, #13211f 100%);
  }

  .topbar,
  .player-panel {
    background:rgba(16,24,23,.9);
  }

  .panel,
  .lecture-card,
  .subject-album-card,
  .material,
  .login-card {
    background:linear-gradient(180deg,#172321,#13201e);
    border-color:rgba(184,225,209,.16);
  }

  input,
  textarea,
  select {
    background:#14211f;
  }

  .telegram-link,
  .lecture-actions-guide {
    background:rgba(184,225,209,.1);
  }
}