/* LearnFutura's interface theme. Worksheet and print styles stay independent. */
@media screen {
  :root { --accent: #5a48d6; --border: #e5e6ef; --muted: #686b80; }
  * { box-sizing: border-box; }
  body { background: #f8f9fc; color: #202137; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .lf-sidebar { position: fixed; inset: 0 auto 0 0; width: 224px; padding: 34px 20px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  .lf-brand { display: flex; align-items: center; font-size: 1.32rem; font-weight: 750; letter-spacing: -.7px; color: #202137; text-decoration: none; }
  .lf-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; margin-right: 10px; background: var(--accent); color: white; font-size: 1.25rem; }
  .lf-brand-dot { color: var(--accent); }
  .lf-nav-label { font-size: .75rem; font-weight: 650; letter-spacing: 1.1px; color: #8b8da1; margin: 55px 8px 16px; }
  .lf-sidebar nav a { display: block; padding: 14px 12px; border-radius: 9px; font-size: .9rem; font-weight: 550; color: var(--muted); margin-bottom: 7px; text-decoration: none; }
  .lf-sidebar nav .active { background: #f0edff; color: var(--accent); }
  .lf-sidebar nav a:hover { background: #f8f7ff; }
  .lf-sidebar-note { margin-top: auto; padding: 20px 16px; background: #f8f7ff; border-radius: 12px; font-size: .9rem; line-height: 1.7; color: var(--muted); }
  .lf-sidebar-note strong { display: block; color: #202137; margin-bottom: 10px; }
  .lf-page { margin-left: 224px; }
  .lf-topbar { min-height: 80px; padding: 20px 32px; background: white; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; font-size: .875rem; }
  .lf-topbar a { color: var(--muted); text-decoration: none; }
  .lf-topbar .lf-current { font-weight: 600; }
  .lf-header { padding: 32px 32px 22px; max-width: 1500px; margin: auto; }
  .lf-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 1.6px; color: var(--accent); }
  .lf-header h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -1.2px; margin: 12px 0; }
  .lf-header p { max-width: 740px; font-size: 1rem; line-height: 1.7; color: var(--muted); margin: 0; }
  .app-shell { max-width: 1500px; margin: auto; padding: 0 32px 40px; gap: 28px; }
  .app-sidebar { flex: 0 0 320px; padding: 22px; border: 1px solid var(--border); border-radius: 15px; top: 20px; max-height: calc(100dvh - 40px); scrollbar-width: thin; }
  .lf-control-title { font-size: 1.125rem; margin: 0 0 16px; letter-spacing: -.3px; }
  .app-sidebar label { font-size: .875rem; color: #404257; margin-top: 16px; margin-bottom: 7px; }
  .app-sidebar input:not([type='checkbox']), .app-sidebar select, #own-text-panel textarea { width: 100%; border: 1px solid #d6d6e4; border-radius: 8px; padding: 10px; font: inherit; font-size: .875rem; color: #202137; background: white; }
  .app-sidebar input[type='file'] { font-size: .8rem; overflow: hidden; }
  .app-sidebar input::file-selector-button { background: #f2efff; border: 0; border-radius: 5px; padding: 6px 8px; color: var(--accent); margin-right: 8px; font: inherit; }
  .app-sidebar input[type='checkbox'] { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--accent); }
  .app-sidebar button { background: #f8f7fd; color: #4b426d; border: 1px solid #e3dfef; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: .875rem; font-weight: 600; }
  .app-sidebar button:hover:enabled { background: #f0edff; border-color: #c3b8ef; }
  .app-sidebar #btn-create, .app-sidebar #btn-print { background: var(--accent); color: white; border-color: var(--accent); padding: 12px; }
  .app-sidebar #btn-create:hover, .app-sidebar #btn-print:hover:enabled { background: #4936be; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #a99af5; outline-offset: 3px; }
  .settings-panel { margin-top: 15px; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: #fdfdff; }
  .settings-panel summary { font-size: .875rem; line-height: 1.6; color: #404257; }
  .settings-panel[open] summary { margin-bottom: 14px; color: var(--accent); }
  .panel-heading { font-size: .875rem; }
  .candidate-count, .storage-status, .cloze-status, #packet-list, .fit-notices, .fit-indicator, .preview-hint { font-size: .8rem; line-height: 1.65; }
  .candidate-count { color: var(--muted); margin: 8px 0; }
  .sidebar-actions { bottom: -22px; margin: 22px -22px -22px; padding: 14px 22px 22px; border-top: 1px solid var(--border); }
  .preview-scroll { min-width: 0; overflow: hidden; padding: 22px 16px 26px; border: 1px solid var(--border); border-radius: 15px; background: #f1f1fa; }
  .lf-preview-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; margin-bottom: 22px; font-size: .8rem; color: #76788d; }
  .lf-preview-label strong { font-size: .875rem; color: #404257; }
  .page-frame { box-shadow: 0 5px 24px #2b245018; }
  .preview-hint { border-radius: 8px; }
  .fit-notices { background: #f2efff; color: #1f3a5f; }
  #preview.is-picking .ws-sentence [data-w]:hover { background: rgba(90, 72, 214, .12); }
  #preview.is-picking .ws-sentence [data-w]:focus-visible { outline-color: var(--accent); }
  .lf-export-note { background: #f8f7ff; color: #625783; padding: 10px; font-size: .8rem; line-height: 1.65; border-radius: 8px; }
  .cloze-row { flex-wrap: wrap; }
  .cloze-row button { flex-basis: 100%; }
  .cloze-row input[type='number'] { width: 5em; }
  #packet-list li { flex-wrap: wrap; }
  #packet-list li button { min-width: 30px; min-height: 30px; }
  [hidden] { display: none !important; }
  @media (max-width: 1200px) { .lf-sidebar { width: 200px; padding: 28px 16px; } .lf-page { margin-left: 200px; } .app-shell { gap: 18px; padding: 0 24px 30px; } .app-sidebar { flex-basis: 290px; padding: 18px; } .sidebar-actions { margin: 18px -18px -18px; bottom: -18px; padding: 12px 18px 18px; } .lf-header { padding: 28px 24px 22px; } }
  @media (max-width: 960px) { .lf-sidebar { position: static; width: auto; padding: 18px 24px; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; border-right: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .lf-nav-label, .lf-sidebar-note { display: none; } .lf-sidebar nav { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; } .lf-sidebar nav a { margin: 0; padding: 10px; } .lf-page { margin: 0; } .lf-topbar { min-height: 55px; padding: 16px 24px; } }
  @media (max-width: 650px) { .app-shell { flex-direction: column; padding: 0 16px 24px; } .app-sidebar { flex: auto; width: 100%; position: static; max-height: none; overflow: visible; } .sidebar-actions { position: static; max-height: none; } .preview-scroll { width: 100%; padding: 18px 12px; } .lf-header { padding: 26px 18px 22px; } .lf-sidebar { padding: 16px 18px; } .lf-topbar { padding: 16px 18px; } .lf-preview-label { flex-wrap: wrap; } }
}