/* /* ===========================
   Base / variables
   =========================== */
   :root{
    /* palette */
    --accent: #00b9e5;
    --accent-2: #4cc0ff;
    --muted: #9aa4b2;
    --panel: rgba(255,255,255,0.03);
    --card-bg: rgba(255,255,255,0.02);
    --input-border: rgba(255,255,255,0.06);
    --danger: #e55353;
  
    /* typography */
    --text-dark: #0b1220;
    --text-light: #e6eefc;
  
    /* force-readability for Learn */
    --force-text-light: rgba(194,206,225,0.78);
    --force-text-dark: #0b1220;
    --force-muted-dark: rgba(230,238,252,0.78);
  
    /* spacing / radii */
    --radius: 10px;
    --gutter: 12px;
  }
  
  /* Box sizing & sensible defaults */
  *,
  *::before,
  *::after { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  html { font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:16px; }
  body { margin:0; color:var(--text-light); background: linear-gradient(180deg,#0b1220 0%, #071021 100%); -webkit-tap-highlight-color: transparent; }
  
  /* ---------- Container ---------- */
  .container{
    max-width:1200px;
    margin:0 auto;
    padding:16px;
    width:100%;
  }
  
  /* ---------- Topbar / panels ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gutter);
    margin-bottom:18px;
  }
  .panel{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.02);
  }
  
  /* small card / preview */
  .card-block{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:12px;
    border-radius:8px;
  }
  
  /* ---------- Form controls ---------- */
  .form-control, .form-select, textarea{
    background: transparent;
    border: 1px solid var(--input-border);
    color: inherit;
    border-radius:6px;
    padding:.5rem;
    width:100%;
    min-height:40px;
  }
  .form-control:focus, .form-select:focus, textarea:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(76,192,255,0.06);
    border-color: rgba(76,192,255,0.22);
  }
  
  /* misc text */
  .small-muted{ color: var(--muted); }
  .section-title{ font-weight:600; color: #dff6f1; margin-bottom:8px; }
  
  /* ---------- Buttons ---------- */
  .btn-accent{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;               /* touch-friendly */
    padding: .5rem 1rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border:none;
    color:#022;
    border-radius:10px;
    cursor:pointer;
  }
  .btn-ghost{
    background: transparent;
    border:1px solid rgba(255,255,255,0.04);
    color: var(--muted);
    min-height:44px;
    padding:.5rem .75rem;
    border-radius:8px;
  }
  
  /* ---------- Meta grid (responsive) ---------- */
  .meta-grid{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:var(--gutter);
  }
  .notes-area{ height:160px; resize:vertical; }
  .compact-input{ height:40px; padding:.35rem .5rem; }
  
  /* ---------- JSON output ---------- */
  .json-out{
    background:#021018;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.03);
    max-height:240px;
    overflow:auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    font-size:0.92rem;
  }
  
  /* ---------- Flashcard / quiz ---------- */
  .flashcard-row{ display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; flex-wrap:wrap; }
  .quiz-block{
    margin-bottom:12px;
    border-radius:10px;
    padding:12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.02);
  }
  
  /* quiz inputs */
  .quiz-question{
    width:100%;
    border-radius:12px;
    border:1px solid var(--input-border);
    padding:12px 14px;
    font-size:15px;
    background:transparent;
  }
  .choices-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
  }
  .choice-input{
    border-radius:8px;
    padding:.6rem;
    height:42px;
    border:1px solid var(--input-border);
    background:transparent;
  }
  .quiz-controls{ display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
  .correct-input{ width:70px; padding:.45rem; border-radius:8px; text-align:center; border:1px solid var(--input-border); background:transparent; }
  .explain-input{ flex:1; padding:.45rem; border-radius:8px; border:1px solid rgba(255,255,255,0.03); color:rgba(255,255,255,0.85); }
  .remove-btn{ background: linear-gradient(135deg,#a83a3a,#ff6b6b); color:#fff; border:none; padding:.5rem .7rem; border-radius:8px; cursor:pointer; }
  
  /* ---------- Learn / flashcard area ---------- */
  .custom-navbar{ background: rgba(10,10,10,0.85); width:100%; position:relative; z-index:10; }
  .logo-circle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#111;
    color:#fff;
    font-weight:700;
  }
  
  /* dark card */
  .dark-card{
    background: var(--card-bg);
    border-radius:12px;
    border:0;
    box-shadow:0 6px 20px rgba(17,24,39,0.06);
  }
  
  /* flashcard container and 3D flip */
  .flashcard-card{ background:transparent; border:0; }
  #flashcard{
    width:100%;
    max-width:680px;
    height:220px;
    margin:0 auto;
    perspective:1200px;
    cursor:pointer;
  }
  #flashcard-inner{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .6s;
  }
  #flashcard.flipped #flashcard-inner{ transform:rotateY(180deg); }
  .flash-face{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    padding:20px;
    backface-visibility:hidden;
    box-shadow:0 8px 24px rgba(15,23,42,0.08);
    color: inherit;
    overflow:hidden;
  }
  /* FRONT / BACK adapt to theme via variables */
  .flash-face.front{
    background: var(--front-bg, #ffffff);
    color: var(--front-color, #000);
  }
  .flash-face.back{
    background: var(--back-bg, #111);
    color: var(--back-color, #fff);
    transform:rotateY(180deg);
  }
  
  /* panes controlled by JS */
  .pane{ display:none; }
  .pane.active{ display:block; }
  
  /* utilities */
  .muted-small{ font-size:.85rem; color:var(--muted); }
  .quiz-option{
    cursor:pointer;
    border-radius:8px;
    padding:.6rem;
    margin:.35rem 0;
    border:1px solid rgba(0,0,0,0.06);
    background: transparent;
  }
  .quiz-option:hover{ background: rgba(255,255,255,0.02); }
  .quiz-option.correct{ border-color: #2ecc71; }
  .quiz-option.wrong{ border-color: #d63333; }
  
  /* ===========================
     LIGHT THEME OVERRIDES
     Apply when body has class .light
     =========================== */
  body.light{
    background: linear-gradient(180deg,#f5f5f5 0%, #dcdfe3 100%);
    color: var(--text-dark);
  }
  body.light .panel{ background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.06); }
  body.light .card-block{ background: linear-gradient(180deg,#fff,#f6f8fa); color: var(--text-dark); }
  body.light .form-control, body.light .form-select, body.light textarea{
    border:1px solid rgba(0,0,0,0.08);
    color: var(--text-dark);
    background: #fff;
  }
  body.light .form-control:focus, body.light .form-select:focus, body.light textarea:focus{
    box-shadow:0 0 0 3px rgba(0,185,229,0.06);
    border-color: rgba(0,185,229,0.22);
  }
  body.light .btn-accent{ color:#022; }
  body.light .btn-ghost{ border-color: rgba(0,0,0,0.06); color: #555; }
  
  /* flashface colors in light mode */
  body.light {
    --front-bg: #ffffff;
    --front-color: #0b1220;
    --back-bg: #f0f4f8;
    --back-color: #0b1220;
  }
  
  /* dark defaults */
  body:not(.light){
    --front-bg: #ffffff;
    --front-color: #000;
    --back-bg: #111;
    --back-color: #fff;
  }
  
  /* small accessibility: ensure .json-out text color */
  .json-out, .quiz-block, .flash-face.back { color: inherit; }
  .panel-header .title, .title { color: inherit; }
  
  /* ---------- FORCE readable header / muted text for Learn page ---------- */
  #learnPage .header-text,
  #learnPage .header-text * { color: var(--force-text-light) !important; }
  #learnPage .small-muted,
  #learnPage .muted-small,
  #learnPage .text-muted,
  #learnPage .small.text-muted { color: var(--force-muted-dark) !important; opacity:1 !important; }
  #learnPage #progressLabel,
  #learnPage .progress,
  #learnPage .progress .progress-bar { color: var(--force-muted-dark) !important; }
  #learnPage kbd { background: rgba(255,255,255,0.06) !important; color: var(--force-text-light) !important; border-radius:4px; padding:2px 6px; font-weight:600; }
  #learnPage .card-body, 
  #learnPage .card-body h5,
  #learnPage .card-body p,
  #learnPage .card-body small,
  #learnPage .card-body ul,
  #learnPage .card-body li { color: var(--force-text-light) !important; }
  body.light #learnPage .header-text,
  body.light #learnPage .card-body,
  body.light #learnPage .small-muted,
  body.light #learnPage .text-muted { color: var(--force-text-dark) !important; }
  #learnPage [style*="color: black"], #learnPage [style*="color:black"] { color: var(--force-text-light) !important; }
  
  /* ===========================
     Responsive adjustments
     Breakpoints: Desktop > 992, Tablet 768-991, Mobile < 768
     =========================== */
  @media (max-width: 991px) {
    html { font-size:15px; } /* slightly smaller on tablets */
    .meta-grid{ grid-template-columns: 1fr; }
    .notes-area{ height:140px; }
    .choices-grid{ grid-template-columns: 1fr; }
    #flashcard{ max-width:560px; height:200px; perspective:1000px; }
    .logo-circle{ width:32px; height:32px; }
  }
  
  @media (max-width: 767px) {
    html { font-size:14px; } /* mobile baseline */
    .container{ padding:12px; }
    .topbar{ gap:10px; align-items:center; }
    .panel{ padding:12px; border-radius:8px; }
    .meta-grid{ grid-template-columns: 1fr; gap:10px; }
    .notes-area{ height:120px; }
    .choices-grid{ grid-template-columns:1fr; gap:8px; }
    .choice-input, .quiz-question{ font-size:14px; padding:.55rem; }
    .btn-accent, .btn-ghost{ width:100%; justify-content:center; min-height:48px; border-radius:10px; }
    .flashcard-row{ flex-direction:column; }
    #flashcard{ height:180px; max-width:420px; perspective:900px; }
    #flashcard-inner{ transition:transform .55s; }
    .flash-face{ padding:14px; border-radius:8px; }
    .logo-circle{ width:30px; height:30px; font-size:0.9rem; }
    .json-out{ font-size:0.88rem; max-height:200px; }
    .muted-small{ font-size:0.82rem; }
  }
  
  /* very small phones */
  @media (max-width: 420px) {
    html { font-size:13px; }
    .container{ padding:10px; }
    #flashcard{ height:160px; max-width:360px; }
    .flash-face{ padding:12px; }
    .btn-accent, .btn-ghost{ min-height:52px; padding:.7rem; }
    .panel{ padding:10px; }
  }
  
  /* Accessibility / focus */
  a:focus, button:focus, .form-control:focus { outline: 3px solid rgba(0,185,229,0.12); outline-offset:2px; }
  
  /* Small polish: ensure long text wraps inside cards and flashfaces */
  .card-block, .flash-face, .json-out, .quiz-block { word-break: break-word; hyphens: auto; }
  
  /* End of stylesheet */
  
  /* ===========================
  Responsive fixes tuned for iPhone 11 & similar (CSS width 414px)
  Paste after your main stylesheet to override problematic rules
  =========================== */

/* Keep desktop base comfortable */
html { font-size:16px; }

/* Ensure form controls and buttons are comfortably large by default */
.form-control, .form-select, textarea { min-height:48px; font-size:1rem; }
.btn-accent, .btn-ghost { min-height:52px; padding:.6rem .95rem; font-size:1rem; }

/* Strong stacking for author area: preview below inputs on narrow screens */
.meta-grid { grid-template-columns: 1fr 320px; gap:12px; }

/* Make preview card more flexible */
.card-block.dark-card { padding:14px; }

/* Improve wrapping and spacing */
.panel { padding:16px; }
.container { padding:16px; }

/* ---------- iPhone 11 / small phones specific adjustments ---------- */
@media (max-width: 414px) {
  /* Slightly increase root font-size so text is naturally larger on mobile */
  html { font-size:17px; }

  /* Layout: single column, preview below form */
  .meta-grid {
    display:block;
    grid-template-columns: none;
    gap:14px;
  }

  /* Make panels and cards more touch-friendly */
  .panel { padding:14px; border-radius:10px; }
  .card-block.dark-card { padding:12px; border-radius:10px; }

  /* Inputs: larger, roomy padding */
  .form-control, .form-select, textarea {
    min-height:54px;
    padding:.7rem .75rem;
    font-size:1rem;
    border-radius:10px;
  }

  /* Notes area slightly taller for typing comfort */
  .notes-area { min-height:140px; max-height:300px; }

  /* Buttons full-width and visually prominent */
  .btn-accent, .btn-ghost {
    width:100%;
    display:block;
    min-height:56px;
    padding:.8rem 1rem;
    border-radius:12px;
    font-size:1.03rem;
  }

  /* Preview: full width, clear hierarchy */
  aside, .card-block { width:100%; box-sizing:border-box; }
  #previewTitle { font-size:1.05rem; line-height:1.15; margin-bottom:6px; }
  #previewMeta { font-size:.95rem; margin-top:2px; }

  /* JSON / notes preview: comfortable height */
  .json-out, #previewNotes { max-height:160px; font-size:0.96rem; padding:10px; }

  /* Flashcard/quiz: increase tap size */
  .choice-input, .quiz-question, .choice-input { min-height:52px; padding:.65rem; font-size:1rem; border-radius:10px; }

  /* Logo circle slightly smaller but centered */
  .logo-circle { width:36px; height:36px; font-size:0.95rem; }

  /* Flashcard container adjustments */
  #flashcard { max-width:420px; height:180px; perspective:900px; margin-left:auto; margin-right:auto; }
  .flash-face { padding:14px; border-radius:10px; }

  /* Ensure hints & small text remain readable */
  .small-muted, .muted-small { font-size:0.95rem; opacity:0.95; }

  /* Accessibility: bigger focus outline for touch navigation */
  a:focus, button:focus, .form-control:focus {
    outline: 3px solid rgba(0,185,229,0.16);
    outline-offset:2px;
  }

  /* Prevent inputs from shrinking when keyboard opens (iOS) */
  input, textarea, select { -webkit-user-modify: read-write-plaintext-only; }

  /* Avoid text overflow in tight places */
  .panel-header, .card-block, .previewTitle, #previewNotes { word-break:break-word; hyphens:auto; }

  /* Reduce visual density of lists / grids */
  .choices-grid { gap:8px; grid-template-columns:1fr; }

  /* Small extra spacing under form elements to avoid cramped layout */
  .meta-grid > * { margin-bottom:8px; }

  /* Keep Save button visible: make it sticky at bottom if needed (optional) */
  /* uncomment if you want a sticky save bar:
  .author-save-bar {
    position:fixed; left:0; right:0; bottom:0; padding:10px; background:linear-gradient(180deg, rgba(11,18,32,0.95), rgba(11,18,32,0.98)); box-shadow:0 -6px 20px rgba(0,0,0,0.25); z-index:999;
  }
  */
}

/* Extra safety: if something earlier forced font-size tiny, override with important */
@media (max-width: 414px) {
  html, body, .container { -webkit-text-size-adjust:100% !important; font-size:17px !important; }
}
/* ===========================
   Minimal mobile-only responsiveness (paste AFTER your main CSS)
   Purpose: collapse columns, prevent horizontal overflow,
   keep Preview/JSON stacked & readable, equalize "Add" buttons.
   =========================== */

/* Defensive: allow children to shrink inside grid columns */
.meta-grid, .meta-grid > * { min-width: 0; box-sizing: border-box; }

/* Ensure side preview/json behave and never overflow horizontally */
aside, .json-out, #previewNotes, #previewTitle {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  box-sizing: border-box;
}

/* Make add buttons uniform (target common classnames used in many UIs) */
.add-btn, .btn-add, .author-add, button.add, .btn-accent.add, .btn-ghost.add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 110px;    /* uniform minimum width */
  height: 38px;        /* slightly smaller touch size */
  padding: .35rem .6rem;
  font-size: .95rem;
  border-radius: 8px;
  box-sizing: border-box;
}

/* smaller icon sizes inside add buttons */
.add-btn svg, .btn-add svg { width: 16px; height: 16px; }

/* Prevent accidental horizontal scroll on tiny screens */
html, body { overflow-x: hidden; }

/* Mobile breakpoints: collapse columns and improve touch targets */
@media (max-width: 767px) {
  /* single-column layout so preview stacks under form */
  .meta-grid { display: block; grid-template-columns: none; gap: 10px; }

  /* make panels a bit tighter to avoid overflow */
  .panel { padding-left: 12px; padding-right: 12px; }

  /* Ensure notes area and json don't become too tall while remaining usable */
  .notes-area { height: 120px; min-height: 100px; }
  .json-out { max-height: 180px; font-size: .95rem; padding: 10px; }

  /* Make buttons full-width only if they're inside narrow containers */
  .add-btn, .btn-add, .author-add, button.add {
    min-width: 100%;
    width: 100%;
    height: 48px;
    font-size: 1rem;
    border-radius: 10px;
  }