:root{
--bg:#0b0f14;
--fg:#e6edf3;
--muted:#8b96a5;
--card:#111826;
--line:#233042;
/* --accent:#0051d3; */
--accent:#b1cfff;
--btn-bg:#0051d3;
--danger:#ef4444;
--ok:#16a34a;
--warn:#f59e0b;

--ToolBlue:#3476cc;

}


/* DARK MODE */

:root{
--bg: #0b0f14;
--fg: #cfd6dd;
--muted: #8b96a5;
--card: #111826;
--line: #233042;
/* --accent: #0051d3; */
--accent:#b1cfff;
--danger: #ef4444;
--ok: #16a34a;
--warn: #f59e0b;
--xp: #8b5cf6;
/* --bg-header-row:#172c55; */
/* --bg-header-row:linear-gradient(90deg, rgba(52, 118, 204, 1) 0%, rgba(35, 99, 184, 1) 50%, rgba(52, 118, 204, 1) 100%); */
--bg-header-row:linear-gradient(90deg, rgb(7 54 116) 0%, rgba(21, 65, 123, 1) 50%, rgb(22 68 128) 100%);
--nav-active-link-color:#006880;
--nav-link-color:#2e436a;

--card-hover: #1a2332;
--badge-bg: #1f2937;
--progress-bg: #0f172a;
--shadow: rgba(0,0,0,0.2);
--glass: rgba(11,15,20,0.9);

--rail-w: 320px;
--gap: 24px;
--ad-bg: #f7f7f8;
--ad-bd: #e5e7eb;

--btn-accent:#white;
--btn-accent-bg:rgb(27, 62, 129);
--btn-bg-hover:#0051d317;

--toggle-mode-bg:#1a2332;
--toggle-mode-fg:#dbdbdb;
--toggle-mode-logo-color:#9e9e9e;
/* 
--toggle-mode-bg-active:linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); */

--toggle-mode-bg-active:rgb(27, 62, 129);
--toggle-mode-fg-active:white;
--toggle-mode-logo-color-active:white;
--toggle-mode-br-active:rgb(27,62,129);
--toggle-mode-btn-hover:#243045;

/* FINAL VARIABLES */

--lightgrey-toggle:#0e0e0e;
--ToolBlue:#0c3e80;
--btn-bg-tool:#0c3e80;
--btn-bt-tool-hover:#1354ab;

--fg-color:rgb(196, 196, 196);
--nav-font-color:#fff;
--nav-background-color-tinted:#2363b9;

--btn-bg:green;
/* --btn-bg-tool:#548eff; */
/* --btn-bg-tool:#0065e7; */
--btn-bt-tool:#0c3e80;
--btn-fg-tool:#fff;

--btn-bg-accent:#3f0dc9;
--btn-bg-accent-hover:#350da3;
/* --btn-bg-danger:#ab3434; */

/* --btn-bg-danger:rgb(248 113 113); */
--btn-bg-danger:rgb(220 38 38/.2);

--hline-fg:rgb(49 82 159 / 80%);
--link-text-color:rgb(59 130 246);

--color-bg-secondary:rgb(112, 112, 112);
--bg-secondary:rgb(241,245,249);

/* --bg-card-panel:#2869be24; */
/* --bg-card-panel:#2767bc14; */
--bg-card-panel:#ffffff14;
--deck-tools-caption-color:#b0daff;

--rename-btn-color:#bcd9ff;

--btn-light-danger:#ffb0b0;

--header-accent:#007587;
--header-accent-fg-color:#efefef;
--dialog-btn-bgcolor:#18d4f1;

  --cb-border: #6b7280;
  --cb-bg: #111827;
  --cb-bg-checked: #0b2a4a;

  --cb-check: #60a5fa;
  
--hero-heading:#8ebaf3;

}

/* Light theme overrides */
body[data-theme="light"]{
  --bg: #f3f4f6;
   --badge-bg: #e5e7eb; /* example light */
  --fg: #111827;
  --muted: #4b5563;

  --card: #ffffff;
  --card-hover: #f9fafb;
  --line: #d1d5db;
  --hover:#e1eaf9;
  --accent: #0051d3;
  --accent-fg:white;
  --danger: #b91c1c;
  --ok: #15803d;
  --warn: #b45309;
  --xp: #7c3aed;

  /* --bg-header-row: #655ac338; */
  /* --bg-header-row:#4a91ff38; */
  --bg-header-row:linear-gradient(90deg, rgba(52, 118, 204, 1) 0%, rgba(35, 99, 184, 1) 50%, rgba(52, 118, 204, 1) 100%);
  --nav-active-link-color: #111827;
  --nav-link-color: #4b5563;

  /* Header / rail glass + shadows */
  --glass: rgba(255,255,255,0.9);
  --shadow: rgba(15,23,42,0.12);

  /* Ad rail cards */
  --ad-bg: #f9fafb;
  --ad-bd: #e5e7eb;

  /* Optional: lighter accent button background if you use this var */
  --btn-accent-bg: #2563eb;
  --btn-bg-hover:#0051d317;
  --progress-bg:rgb(205, 207, 205);


  --toggle-mode-bg:#f8f9fa;
--toggle-mode-fg:#5f6368;
--toggle-mode-logo-color:#9e9e9e;

/* 
--toggle-mode-bg-active:linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
--toggle-mode-fg-active:#465bb7;
--toggle-mode-logo-color-active:#465bb7;
--toggle-mode-br-active:#465bb7; */


--lightgrey-toggle:#efefef;

--toggle-mode-bg-active:rgb(27, 62, 129);
--toggle-mode-fg-active:white;
--toggle-mode-logo-color-active:white;
--toggle-mode-br-active:rgb(27,62,129);

--toggle-mode-btn-hover:#f0f0f0;

--fg-color:rgb(32, 32, 32);

--hline-fg:rgba(15, 23, 42, 0.12);
--link-text-color:rgb(59 130 246);

/* --bg-card-panel:#2767bc31; */
--bg-card-panel:#2767bc42;
--deck-tools-caption-color:#3b81dd;
--rename-btn-color:#0c3e80;

--btn-bg-danger:rgb(255 184 184 / 20%);

--btn-light-danger:#9b2d2d;

--header-accent:#007587;
--header-accent-fg-color:#efefef;

--dialog-btn-bgcolor:#18d4f1;

--hero-heading:#4281d3;
}


body[data-theme="default"]{

    /* ===== Scrollbar theming (Dark-friendly) ===== */

    /* 1) Firefox */
    * {
      scrollbar-width: thin; /* auto | thin | none */
      scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06); /* thumb track */
    }

    /* 2) Chromium / Safari */
    *::-webkit-scrollbar {
      width: 10px;
      height: 10px; /* horizontal scrollbars */
    }

    *::-webkit-scrollbar-track {
      background: rgba(255,255,255,.06);
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.22);
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.06); /* gives spacing so it doesn't look chunky */
    }

    *::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,.30);
    }

    *::-webkit-scrollbar-corner {
      background: transparent;
    }

}

:root {
   --cb-size: 18px;

  --cb-border: #9aa0a6;
  --cb-bg: #ffffff;            /* unchecked background */
  --cb-bg-checked: #e9f2ff;    /* checked background */

  --cb-check: #1a73e8;         /* checkmark color */
  --cb-disabled-opacity: 0.55;
}

input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;

  width: 20px;
  height: 20px;
  border: 2px solid var(--cb-border, #9aa0a6);
  border-radius: 4px;
  background: var(--cb-bg, #fff);

  display: inline-grid;
  place-content: center;
}


/* Light */
body[data-theme="light"] 
input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>\<path fill='%230051d3' d='M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818'/>\</svg>");
}

/* Default/Dark */
body[data-theme="default"] 
input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>\<path fill='rgb(24, 212, 241)' d='M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818'/>\</svg>");
}

/* Add this instead */
input[type="checkbox"]{
  background: var(--card-hover);

  /* draw the checkmark as a real background image */
  /* background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>\<path fill='%230051d3' d='M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818'/>\</svg>"); */
 background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
}

.d-none{
  display:none !important;
}

*{
box-sizing:border-box
}

body{
margin:0;font:15px/1.45 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)
}

header{
position:sticky;top:0;background:rgba(11,15,20,.9);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid var(--line);z-index:10
}

.wrap{
max-width:1100px;margin:0 auto;padding:14px 16px
}

h1{
font-size:20px;margin:0
}

.row{
display:flex;align-items:center;gap:10px
}

.right{
margin-left:auto
}

.toolbar{
display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items: flex-start;justify-content: end;
}

nav{
display:flex;gap:8px;flex-wrap:wrap;margin-top:10px
}
/* 
nav button{
padding:8px 10px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;cursor:pointer
}

nav button:hover{
border-color:#3b82f6
} */

.muted{
color:var(--muted)
}

/* .badge{
background:#1f2937;border:1px solid var(--line);padding:2px 8px;border-radius:999px
} */

.pill{
display:inline-block;background:#132235;border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-right:4px
}

.btn{
padding:8px 10px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;cursor:pointer;height:40px;font-size: 14px;
}

.btn:hover{
border-color:#3b82f6
}

.btn-primary{
background:var(--accent);border-color:var(--accent);color:white
}

.btn-primary-outline{
  background:transparent;
  min-height: 25px;
  padding: 0;
  margin:0;
  text-decoration: underline;
  color:var(--ToolBlue);
}

.btn-primary-outline:hover{
  transform: none !important;
  box-shadow: none !important;
}

.btn-danger{
background:var(--danger);border-color:var(--danger);color:white
}

.btn-disabled{
opacity:.6;pointer-events:none
}

input,textarea,select{
background:#0f172a;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%
}

textarea{
min-height:88px
}

.grid{
display:grid;grid-template-columns:1fr 1fr;gap:16px
}

.card{
background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px
}

.hidden{
display:none
}

table{
width:100%;border-collapse:collapse
}

th,td{
border-top:1px solid var(--line);padding:8px 10px;vertical-align:top
}

.progress{
height:8px;background:#0f172a;border:1px solid var(--line);border-radius:999px;overflow:hidden
}

.bar{
height:100%;width:0;background:var(--accent)
}

.success{
color:var(--ok)
}

.danger{
color:var(--danger)
}

.m-0{
  margin:0 !important;
}

.mtb-25{
  margin:25px 0;
}
.mtb-15{
  margin:15px 0;
}

.mtb-10{
  margin:10px 0;
}

.mtb-5{
  margin:5px 0;
}

.mtb-0{
  margin-top:0;
  margin-bottom: 0;
}


.mb-0{
  margin-bottom: 0;
}

.mb-5{
  margin-bottom: 5px;
}

.mb-10{
  margin-bottom: 10px;
}

.mb-15{
  margin-bottom: 15px;
}

.mb-20{
  margin-bottom:20px;
}
.mb-25{
  margin-bottom: 25px;
}

.mb-30{
  margin-bottom: 30px;
}

.mt-6{
margin-top:6px
}

.mt-10{
margin-top:10px
}
.mt-15{
margin-top:15px
}

.mt-20{
  margin-top:20px;
}

.mt-25{
  margin-top:25px;
}

.mt-0{
  margin-top:0;
}

.m-20{
  margin:20px;
}


.pl-10{
  padding-left:10px;
}

.t-left{
  text-align: left;
}
.t-right{
  text-align: right;
}

.img-preview{
max-width:100%;border:1px solid var(--line);border-radius:10px
}

details summary{
cursor:pointer
}

.hidden{
display:none !important;
}

.relative{
  position: relative;
}

#editModal.hidden,
#tbEditModal.hidden{
pointer-events: none;
}

.c-mult-opt input{
width:20px;
}

:root{
--pt-bg: #0b1324;
--pt-card:#0f172a;
--pt-soft:#0b2447;
--pt-line:#203354;
--pt-text:#e5e7eb;
--pt-muted:#94a3b8;
--pt-accent:#60a5fa;
--pt-good:#22c55e;
--pt-bad:#f43f5e;
--pt-warn:#f59e0b;
--pt-chip:#1f2a44;
}

.pt-badge{
margin-left: 8px;
padding: 3px 8px;
font-size: 12px;
border-radius: 999px;
border: 1px solid var(--pt-line);
background: #0b1a35;
color: var(--pt-muted);
}

.pt-badge.ok{
color: var(--pt-good); border-color: rgba(34,197,94,.6);
}

.pt-badge.bad{
color: var(--pt-bad); border-color: rgba(244,63,94,.6);
}

.pt-badge.na{
color: var(--pt-muted); opacity: .85;
}

.pt-choice.is-correct{
background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.6);
}

.pt-choice.is-wrong{
background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.6);
}

#tab-practice .toolbar{
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(11,19,36,.9), rgba(11,19,36,.6));
border-bottom: 1px solid var(--pt-line);
padding: 10px 12px;
border-radius: 12px;
}

#tab-practice .toolbar .row{
display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

#tab-practice .toolbar input,
#tab-practice .toolbar select{
background:#0b1a35; color:var(--pt-text);
border:1px solid var(--pt-line); border-radius:10px; padding:8px 10px;
}

#tab-practice .toolbar .btn-primary{
background:var(--pt-accent); color:#06101f; border:0; border-radius:10px; padding:8px 12px;
}

#tab-practice .toolbar .btn-primary:hover{
filter:brightness(1.1);
}

.pt-progress{
margin-top:8px; height:6px; width:100%;
background: rgba(96,165,250,.15); border-radius:999px; overflow:hidden;
}

.pt-progress > span{
display:block; height:100%; width:0%;
background: linear-gradient(90deg, #60a5fa, #22d3ee);
border-radius:inherit; transition:width .35s ease;
}

#testArea{
margin-top:14px;
display:grid; gap:14px;
grid-template-columns: 1fr;
}

.pt-card{
background:var(--pt-card);
border:1px solid var(--pt-line);
border-radius:16px;
padding:16px;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.pt-header{
display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.pt-index{
font-weight:700; letter-spacing:.4px; color:var(--pt-muted);
}

.pt-chips{
display:flex; flex-wrap:wrap; gap:6px;
}

.pt-chip{
background:var(--pt-chip); color:var(--pt-muted);
border:1px solid var(--pt-line); padding:2px 8px; border-radius:999px;
font-size:12px;
}

.pt-q{
margin-top:8px; font-size:18px; line-height:1.45; color:var(--pt-text);
}

.pt-choices{
margin-top:14px;
display:grid; gap:10px;
}

.pt-choice{
display:flex; align-items:center; gap:10px;
background:#0b1a35; color:var(--pt-text);
border:1px solid var(--pt-line); border-radius:12px; padding:10px 12px;
cursor:pointer; user-select:none; transition:transform .04s ease, background .2s ease, border-color .2s ease;
}

.pt-choice:hover{
transform: translateY(-1px); border-color:#2c4671;
}

.pt-choice input{
display:none;
}

.pt-choice .dot{
width:16px; height:16px; border-radius:999px;
border:2px solid var(--pt-muted); flex: 0 0 auto;
}

.pt-choice.is-selected{
background: rgba(96,165,250,.12);
border-color:#3b82f6;
}

.pt-choice.is-selected .dot{
border-color:#60a5fa; background:#60a5fa;
}

.pt-choice.is-correct{
background: rgba(34,197,94,.14);
border-color: rgba(34,197,94,.6);
animation: pop .12s ease;
}

.pt-choice.is-correct .dot{
background:var(--pt-good); border-color:var(--pt-good);
}

.pt-choice.is-wrong{
background: rgba(244,63,94,.10);
border-color: rgba(244,63,94,.6);
animation: shake .18s ease;
}

.pt-choice.is-wrong .dot{
background:var(--pt-bad); border-color:var(--pt-bad);
}

.pt-free{
margin-top:14px; display:flex; flex-direction:column; gap:10px;
}

.pt-free textarea{
min-height:96px; resize:vertical;
background:#0b1a35; color:var(--pt-text);
border:1px solid var(--pt-line); border-radius:12px; padding:10px 12px;
}

.pt-actions{
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}

.pt-actions .btn{
background:#0b1a35; color:var(--pt-text);
border:1px solid var(--pt-line); border-radius:10px; padding:8px 12px;
}

.pt-actions .btn-primary{
background:var(--pt-accent); color:#051426; border:0;
}

.pt-feedback{
margin-top:10px; padding:10px 12px; border-radius:12px; border:1px dashed var(--pt-line);
background: #0a162d;
color: var(--pt-muted);
}

.pt-feedback .ok{
color:var(--pt-good);
}

.pt-feedback .bad{
color:var(--pt-bad);
}

.pt-score{
margin-left:auto;
background: #0b1a35; color:var(--pt-muted);
border:1px solid var(--pt-line); padding:4px 8px; border-radius:999px; font-size:12px;
}

.pt-score.ok{
color:var(--pt-good); border-color: rgba(34,197,94,.6);
}

.pt-score.bad{
color:var(--pt-bad); border-color: rgba(244,63,94,.6);
}

#tab-study .card.study-card{
display: grid;
grid-template-rows: auto 1fr auto;
gap: 12px;
min-height: min(72vh, 900px);
position: relative;
}

#tab-study .card .study-body{
overflow: auto;
padding: 8px 10px;
border-radius: 10px;
/* background: rgba(255,255,255,0.03); */
background:var(--card);
min-height: 100%;
}

#tab-study .card .study-body img{
max-width: 100%;
height: auto;
max-height: 38vh;
object-fit: contain;
}

#tab-study .card .study-actions{
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 12px;
margin-top: 4px;
/* border-top: 1px solid rgba(255,255,255,0.08); */
/* background: linear-gradient(
to bottom,
rgba(16,16,20,0.65),
rgba(16,16,20,0.85)
); */
/* backdrop-filter: blur(4px); */
/* border-radius: 10px; */
 background-color: var(--card-hover);
  border-radius: 0;
  margin-block:20px;
  padding:25px 0;
  display: flex;
  justify-content: center;
}

#tab-study .card .study-actions .spacer{
min-width: 10px;
}

#tab-study .card .study-actions .grade-group{
display: grid;
grid-auto-flow: column;
gap: 8px;
}

.grade-group{
  justify-content: center;
}

.study-actions{
  background-color: var(--card-hover);
  border-radius: 0;
  margin-block:20px;
  padding:25px 0;
  display: flex;
}

#tab-study .study-input-row textarea,
#tab-study .study-input-row input[type="text"]{
max-height: 160px;
overflow: auto;
}

.bookmarklet-cta{
display: none;
}

#tab-import .bookmarklet-cta{
display: block;
}

#tab-study .bookmarklet-cta,
#tab-deck .bookmarklet-cta,
#tab-analytics .bookmarklet-cta,
#tab-notes .bookmarklet-cta{
display: none !important;
}

.img-preview{
max-width: 100%; max-height: 320px; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.modal.hidden{
display: none !important;
}

.modal{
position: fixed; inset: 0; z-index: 1000;
}

.modal__backdrop{
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
}

.modal__panel{
position: relative;
max-width: 920px; width: min(96vw, 920px);
margin: 6vh auto; padding: 16px;
background: var(--card); color: var(--fg);
border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.modal__sections{
display: grid; gap: 16px;
grid-template-columns: 1fr 1fr;
}

.modal__section{
background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}

.modal__section-title{
margin: 0 0 8px 0; font-size: 14px; color: var(--muted);
}

#uimpPaste{
font-family: monospace;
font-size: 0.9em;
min-height: 120px;
}

.info-box{
padding: 16px;
background: var(--color-bg-secondary, rgba(255, 255, 255, 0.05));
border-radius: var(--border-radius, 10px);
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
margin-top: 16px;
}

.info-box h4{
margin-top: 0;
margin-bottom: 8px;
}

.info-box ol{
margin-left: 20px;
line-height: 1.6;
}

.code-block{
padding: 12px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
font-family: monospace;
font-size: 0.8em;
overflow-x: auto;
max-height: 150px;
overflow-y: auto;
}

.btn-ghost{
background: transparent;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.2));
color: var(--color-text);
}

/* .edit-section{
border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
padding: 25px;
border:1px solid lightgrey;
background-color: #fdfdfd;
margin-bottom: 25px;
}

.edit-section:last-of-type{
border-bottom: none;
}

.edit-section h4{
margin: 0 0 8px 0;
color: var(--color-primary, #3b82f6);
font-size: 16px;
} */

.image-preview{
min-height: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
padding-top:0;
}

.image-preview img{
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.2));
border-radius: 4px;
}

.btn-ghost:hover{
background: rgba(255, 255, 255, 0.1);
}

.btn-secondary{
/* background: var(--color-bg-secondary, #6b7280) !important; */
background-color:rgb(241,245,249) !important;
color: var(--fg-color);
color:var(--color-bg-secondary) !important;
border: none;
font-weight: 600 !important;
font-size: .95em;
}

.btn-secondary:hover{
background: var(--btn-bg-hover, #5b6470);
border:none !important;
}


.horizontal-heading{
  display: flex;
  justify-content: space-between;
  margin:15px 0;
}

.horizontal-heading > *{
  margin:5px 0;
}

.modal-content{
max-height: 90vh;
overflow-y: auto;
}

#tab-study .card.study-card{
display: block !important;
width: 100%;
max-width: 100%;
margin: 0 auto;
/* padding: 40px 32px; */
position: relative;
min-height: auto;
padding:0;
border: 1px solid var(--line);
}

#tab-study .card.study-card:has(#studyArea:not(.hidden)){
gap: 12px;
min-height: min(72vh, 900px);
max-width: 100%;
padding: 14px;
}

#tab-study{
  display: block;
/* display: flex;
justify-content: center;
align-items: center; */
}

#tab-study:has(#studyArea:not(.hidden)){
display: block;
min-height: auto;
padding: 0;
}

#tab-study .card.study-card > h3{
text-align: left;
/* font-size: 32px; */
/* margin-bottom: 32px; */
}

#tab-study .session-config{
display: flex;
flex-direction: column;
gap: 20px;
margin:20px 0;
text-align: left;

width:510px;
margin:20px auto;
}

#tab-study .session-config .row{
display: flex;
gap: 20px;
}



#tab-study .session-config label{
display: flex;
flex-direction: column;
gap: 8px;
font-size: 15px;
font-weight: 500;
}

#tab-study .session-config input,
#tab-study .session-config select{
font-size: 16px;
padding: 12px 14px;
}

#tab-study #startStudyBtn{
font-size: 18px;
/* padding: 14px 24px; */
margin-top: 32px;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
}

#tab-study .card.study-card.study-session-active{
display: grid !important;
grid-template-rows: auto 1fr auto;
gap: 12px;
min-height: min(72vh, 900px);
max-width: 100%;
padding: 14px;
}

#tab-study:has(.study-session-active),
#tab-study .has-active-session{
display: block;
min-height: auto;
padding: 0;
}


.btn-h{
  height:44px;
}

.btn-h50{
  height:50px;
}

#mappingSection{
  width:100%;
}
.column-mapping-grid{
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:15px !important;
}

@media (max-width:860px){
.grid{
grid-template-columns:1fr
}
}

@media (min-width: 820px){
.pt-choices.pt-mc{
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 860px){
.modal__sections{
grid-template-columns: 1fr;
}
}

@media (max-width: 768px){
#tab-study .card.study-card{
max-width: 100%;
    padding: 24px 20px;
}

/* #tab-study .card.study-card > h3{
font-size: 24px;
margin-bottom:10px;
} */
 
#tab-study .session-config .row{
flex-direction: column;
width:100%;
}

#studyModeOptions{
  flex-direction: row !important;
  margin-top:20px;
  margin-bottom: 10px;
}

}

@keyframes pop{
from{ transform:scale(.98); } to{ transform:scale(1); }
}

@keyframes shake{
0%{ transform: translateX(0) }
  25%{ transform: translateX(-2px) }
  50%{ transform: translateX(2px) }
  75%{ transform: translateX(-1px) }
  100%{ transform: translateX(0) }
}

/* === From enhanced-style.css === */



*{
box-sizing: border-box;
}

body{
margin: 0;
font: 15px/1.45 system-ui, Segoe UI, Roboto, sans-serif;
background: var(--bg);
color: var(--fg);
transition: background-color 0.3s ease;
}


.header-branding{
  font-size: 1.6em;
  font-weight: 400;
  margin-right:20px;
  color:var(--nav-font-color);
}

header{
position: sticky;
top: 0;
background: var(--glass);
backdrop-filter: saturate(150%) blur(6px);
border-bottom: 1px solid var(--line);
z-index: 100;
box-shadow: 0 2px 10px var(--shadow);
margin-bottom:20px;
}

.head-wrap{
  padding:0 15px;
}

.wrap{
max-width: 100%;
margin: 0 auto;
padding-top:0;
/* padding: 14px 16px; */
}

h1{
font-size: 20px; 
margin: 0;
font-weight: 400;
}

h3{
margin-top: 0;
font-weight: 400;
}

h4{
margin-bottom: 0.5rem;
font-weight: 400;
}

.row{
display: flex;
align-items: center;
gap: 10px;
}

.right{
margin-left: auto;
}

.grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.flex{
  display: flex;
  justify-content: center;
}

.flex-c{
  flex-direction: column;
}

.g-1{
  gap:5px;
}
.g-2{
  gap:10px;
}
.g-3{
  gap:15px;
}
.g-4{
  gap:20px;
}
.g-5{
  gap:25px;
}



nav{
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}

.nav-menu-link{
  border:none;
  border-radius:0;
  font-size: 1.1em;
  background-color:transparent;
  padding:8px 10px;
  /* margin-bottom: -8px; */
  cursor: pointer;
  color:var(--nav-font-color);
  border-bottom:1px solid transparent;
  /* background-color:var(--nav-link-color); */
}

.nav-menu-link:hover{
  /* background:var(--nav-background-color-tinted); */
  border-bottom:1px solid var(--nav-font-color);
}

.nav-menu-link.active{
  border-bottom:2px solid var(--nav-font-color) !important;
  /* border-top:1px solid var(--nav-background-color-tinted); */
  /* background-color:var(--nav-active-link-color); */
}


.btn-accent{
  color:var(--btn-accent) !important;
  background-color: var(--btn-accent-bg) !important;
}

.btn-accent:hover{
  opacity: .9;
}


.tab-btn{
padding: 8px 12px;
border: 1px solid var(--line);
background: var(--card);
color: var(--fg);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}

.tab-btn:hover{
border-color: var(--accent);
transform: translateY(-1px);
}

.tab-btn.active{
background: var(--accent);
color: white;
border-color: var(--accent);
}

.card{
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
box-shadow: 0 2px 8px var(--shadow);
transition: all 0.2s ease;
}

/* .card:hover{
box-shadow: 0 4px 12px var(--shadow);
background: var(--card-hover);
} */

.card.nested{
padding: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
transition: all 0.2s ease;
}

.card.nested:hover{
background: rgba(255,255,255,0.04);
border-color: var(--accent);
}


.card-modal-add{
  color:var(--fg);
  display:flex;
  flex-direction: column;
  gap:15px;
  padding:0;
  border-radius:5px;
  border-color:var(--header-accent);
}

.card-add-card-header{
  padding:8px 20px;
  background-color:var(--header-accent);
  color:var(--header-accent-fg-color);
  font-size:1.1em;
}


.card-add-card-body{
  padding:20px;
}


#closeAddCard{
  background-color:transparent;
  width: 50px;
  font-size:2em;
  padding:0;
}


.version-number{
  font-size: 12px;
}

.badge {
  background: var(--badge-bg);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}


.badge.success{
color: var(--ok); border-color: var(--ok);
}

.badge.danger{
color: var(--danger); border-color: var(--danger);
}

.badge.xp{
color: var(--xp); border-color: var(--xp);
}

.pill{
display: inline-block;
background:var(--badge-bg);
border: 1px solid var(--line);
padding: 2px 10px;
border-radius: 999px;
margin-right: 4px;
font-size: 12px;
}

.s-btn{
  min-height:44px;
  min-width:100px;
  padding:0 20px;
  border-radius:10px;
  transition:all 100ms ease-in-out;
  font-size: 15px;
  border:none;
}

.s-btn:hover{
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--shadow);
}

.s-btn-danger{
  color:var(--btn-fg-tool);
  background:var(--btn-bg-danger);

  background-color: var(--btn-bg-danger);
  border: 2px solid var(--danger);
  color: var(--btn-light-danger);
}

.s-btn-primary{
  background:var(--btn-bg-tool);
  color:var(--btn-fg-tool);
  border:none;
}
.s-btn-primary:hover{
  background:var(--btn-bt-tool-hover);
}

.s-btn-primary-link{
  height:auto;
  min-height: auto;
  background-color:transparent;
  color:var(--ToolBlue);
  text-decoration: underline;
}

.s-btn-primary-link:hover{
  box-shadow: none;
  background:transparent;
  opacity:.8;
}

.s-btn-secondary{
  /* background:var(--btn-bg-accent); */
  background:var(--muted);
  color:var(--btn-fg-tool);
}

.s-btn-secondary:hover{
  /* background:var(--btn-bg-accent-hover); */
  opacity: .8;
}

.s-btn-cancel{
  background-color:lightgrey;
  color:black;
}


.s-btn-logo{
  height:42px;
  padding:0 15px;
  border-radius: 10px;
  border:none;
}

.s-btn-logo:hover{
  cursor: pointer;
}

.s-btn-logo-ghost{
  background:transparent;
}

.s-btn-logo-svg{
  fill:var(--fg-color);
  background:transparent;
}

.s-btn-logo-svg-danger{
  fill:var(--btn-bg-danger);
    background:transparent;
}

.s-btn-logo-primary{
  background:var(--btn-bg-tool);

}

.s-btn-logo-danger> svg{
  fill:white;
}


.s-btn-logo-trash{
  background:#f7f7f7;
  background:transparent;
  /* border:1px solid var(--card-hover); */
  color:var(--link-text-color);
  font-size:1em;
  text-decoration: underline; 
  height:auto;
  padding:5px;
}

.s-btn-logo-trash svg{
  fill:var(--btn-bg-danger);
}

.btn{
padding: 8px 14px;
border: 1px solid var(--line);
background: var(--btn-bg);
color: var(--fg);
border-radius: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}

.btn:hover{
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 2px 6px var(--shadow);

}

.btn-primary{
background:var(--btn-bg);
border:none;
border-color: var(--accent);
color: white;
}

.btn-primary:hover{
background: color-mix(in srgb, var(--btn-accent-bg) 85%, white);
}

.btn-danger{
background: var(--danger);
border-color: var(--danger);
color: white;
}

.btn-disabled{
opacity: 0.6;
pointer-events: none;
}


.btn-deck-btns{
  background: transparent !important;
  border-radius: 10px;;
  border:none !important;
  background-position:center;
  background-repeat: no-repeat;
  height:40px;
  width:40px;
  padding-top:4px;
}

.btn-deck-btns:hover{
  cursor: pointer;
  border:1px solid var(--card-hover) !important;
  background:var(--card-hover) !important;
}


.btn-deck-btns-edit svg{
  fill:darkgrey;
}

.btn-deck-btns-delete svg{
  fill:var(--danger);
}

.btn-deck-delete{
  border:none;
  background-image: url("./images/Trash_r_20.png");
  background-position:center;
  background-repeat: no-repeat;
  height:40px;
  width:40px;
  margin-left:20px;
}

.btn-deck-edit{
  border:none;
  background-image: url("./images/Edit_g_20.png");
  background-position:center;
  background-repeat: no-repeat;
  height:40px;
  width:40px;
}

.btn-deck-edit svg{
  fill:orange;
}


input, textarea, select{
  /* Use theme variables instead of a hard-coded dark color */
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-height:30px;
  line-height: normal;
  transition: border-color 0.2s ease;
}


input:focus, textarea:focus, select:focus{
outline: none;
border-color: var(--accent);
}

textarea{
min-height: 88px;
}


/* input:focus,
textarea:focus,
select:focus,
button:focus,
.nav-menu-link:focus,
.hamburger:focus,
.btn:focus,
.tab-btn:focus {
  outline: 2px solid #facc15;
  outline-offset: 2px;
} */


.progress{
height: 8px;
background: var(--progress-bg);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}

.bar{
height: 100%;
background: var(--accent);
transition: width 0.3s ease;
}

.bar.success{
background: var(--ok);
}

.bar.danger{
background: var(--danger);
}

.bar.xp{
background: var(--xp);
}

.analytics-header{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.analytics-card-performance-header{
  align-items: baseline;
}

.analytics-study-cal-header {
  color: var(--accent);
  font-size: 16px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.analytics-experience-header{
  color: var(--accent);
  font-size: 16px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.analytics-progress-header{
    color: var(--accent);
  font-size: 16px;
  margin-bottom: 1rem;
  font-weight: 600;
}


.section-main-card-header{
  color: var(--accent);
  font-size: 1.5em;
  margin-bottom: 1rem;
  font-weight: 400;
}

.stat-card{
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
text-align: center;
}

.big-number{
font-size: 36px;
font-weight: 700;
color: var(--accent);
}

.stat-bar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.stat-bar .progress{
flex: 1;
max-width: 200px;
}

.streak-calendar{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}

.calendar-header{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}

.calendar-weekday{
text-align: center;
font-size: 16px;
font-weight: 600;
color: var(--muted);
padding: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.calendar-day{
aspect-ratio: 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
cursor: pointer;
transition: all 0.2s ease;
}

.calendar-day.studied{
background: var(--ok);
color: white;
border-color: var(--ok);
}

.calendar-day.today{
border-color: var(--accent);
border-width: 2px;
}

.calendar-day:hover{
transform: scale(1.1);
}

.scroll-all{
  overflow:auto;
}

.justify-space-around{
  justify-content: space-around;;
}

.jusitfy-right{
  justify-content: right;
  text-align: right;
}

.import-mini-card{
  display:flex;
  flex-direction: column;
  gap:20px;
}

.import-mini-card-flex{
  display: flex;
  gap:10px;
  /* flex-wrap: wrap; */
}

.justify-row{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-items: start;
}

.justify-col{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap:15px;
}

.h-a{
  height:auto;
}

.study-card{
/* background: var(--card); */
/* border: 1px solid var(--line); */
/* border-radius: 14px; */
/* padding: 24px; */
min-height: 200px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* font-size: 20px; */
/* box-shadow: 0 4px 12px var(--shadow); */

background:transparent;
border:none;
box-shadow: none;
}

.study-card img{
max-width: 100%;
max-height: 300px;
border-radius: 10px;
margin: 16px 0;
}

.flashcard-display{
display: flex;
flex-direction: column;
width:100%;


margin-bottom: 20px;
}

.answer-area{
display: flex;
flex-direction: column;
gap:20px;
padding-inline:24px;
}

.answer-area hr{
  width:100%;
}

.modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-content{
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 24px;
/* max-width: 500px; */
max-width: 70%;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}

.hidden{
display: none !important;
}

.muted{
color: var(--muted);
}

.m-10{
  margin:10px;
}

.m-15{
  margin:15px;
}

.mt-5{
  margin-top:5px;
}

.mt-6{
margin-top: 6px;
}

.mt-8{
  margin-top:8px;
}

.mt-10{
margin-top: 10px;
}

.mt-15{
  margin-top:15px;
}

.mr-5{
  margin-right: 5px;
}

.mr-10{
  margin-right:10px;
}

.ml-5{
  margin-left:5px;
}

.ml-10{
  margin-left:10px;
}


.fade-in{
animation: fadeIn 0.3s ease;
}

.confetti{
position: fixed;
width: 10px;
height: 10px;
background: var(--accent);
animation: confetti 3s ease-out forwards;
pointer-events: none;
z-index: 9999;
}

.confetti:nth-child(2n){
background: var(--ok); width: 8px; height: 8px;
}

.confetti:nth-child(3n){
background: var(--warn); width: 12px; height: 12px;
}

.confetti:nth-child(4n){
background: var(--danger); width: 6px; height: 6px;
}

.confetti:nth-child(5n){
background: var(--xp);
}

.theme-selector{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}

.theme-option{
cursor: pointer;
}

.theme-preview{
display: block;
padding: 16px;
border: 2px solid var(--line);
border-radius: 10px;
text-align: center;
transition: all 0.2s ease;
}

.theme-option input[type="radio"]{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.theme-option input[type="radio"]:checked + .theme-preview{
border-color: var(--accent);
background: var(--card-hover);
}

.theme-preview.default{
background: #0b0f14; color: #e6edf3;
}

.theme-preview.blue{
background: #0a1628; color: #60a5fa;
}

.theme-preview.green{
background: #0f1f0f; color: #4ade80;
}

.theme-preview.sunset{
background: #1a0f0a; color: #fb923c;
}

.theme-preview.contrast{
background: #000; color: #fff;
}

.offline-status{
background: var(--warn);
color: white;
border-color: var(--warn);
}

.tooltip{
position: relative;
cursor: help;
}

.tooltip:after{
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--card);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
}

.tooltip:hover:after{
opacity: 1;
}

.advanced-options{
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0;
}

.advanced-options summary{
padding: 10px 14px;
cursor: pointer;
list-style: none;
}

.advanced-options[open] summary{
border-bottom: 1px solid var(--line);
}

.advanced-options > div{
padding: 16px;
}


.study-mode-toggle{
/* background: rgba(255,255,255,0.02); */
/* border: 1px solid var(--line); */
/* border-radius: 10px; */
padding: 12px;
padding-inline:0;
padding-bottom: 2em;
border:none;
border-radius: 0;
border-bottom:1px solid var(--line);
/* font-size: 1.5em; */
font-size: 18px;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.study-mode-header-wrapper{
  gap:10px;
  justify-content: center;
  height:120px;
  justify-content: space-around;
}

.style-mode-toggle-btn{
  width:50%;
  background:var(--toggle-mode-bg);
  color:var(--toggle-mode-fg);
  height:100%;
  border-radius:5px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap:10px;
  transition:all 50ms ease-in-out;
}

.style-mode-toggle-btn:hover{
  box-shadow: 3px 3px 4px rgba(0,0,0,.5);
  /* background:var(--toggle-mode-btn-hover); */
  cursor: pointer;
  border:1px solid lightgrey;
  /* border-left:1px solid lightgrey; */
}

.style-mode-toggle-btn.active{
  /* border:2px solid var(--toggle-mode-br-active); */
  /* background-color:var(--toggle-mode-bg-active); */
   
  border:2px solid var(--ToolBlue);
  background-color:var(--ToolBlue);
  color:var(--toggle-mode-fg-active);
}

.style-mode-toggle-btn.active:hover{
  box-shadow: none !important;
}

.style-mode-toggle-btn.active span{
  color:var(--toggle-mode-fg-active);
}

.style-mode-toggle-btn.active > .svg-quiz-logo {
  fill:var(--toggle-mode-logo-color-active) !important;
}

.style-mode-toggle-btn input{
  display:none;
}


.svg-quiz-logo{
  fill:var(--toggle-mode-logo-color);
  height:40px;
  width:40px;
}

.radio-option{
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}

.radio-option:hover{
background: rgba(255,255,255,0.05);
}

.radio-option input[type="radio"]:checked + span{
color: var(--fg);
font-weight: 600;
}

.session-header{
/* background: rgba(255,255,255,0.02); */
background:var(--card);
/* border: 1px solid var(--line); */
border-radius: 10px;
border:none;
padding: 16px;
}

.loading{
opacity: 0.6;
pointer-events: none;
position: relative;
}

.loading:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 2px solid var(--accent);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}

.alert{
background: rgba(255,255,255,0.05);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
margin: 16px 0;
}

.alert.info{
border-color: var(--accent);
background: rgba(59,130,246,0.1);
}

.alert.success{
border-color: var(--ok);
background: rgba(22,163,74,0.1);
}

.alert.danger{
border-color: var(--danger);
background: rgba(239,68,68,0.1);
}

table{
width: 100%;
border-collapse: collapse;
}

.tbl-compact{
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.tbl-compact thead{
background: rgba(255,255,255,0.03);
border-bottom: 2px solid var(--line);
}

.tbl-compact th{
padding: 10px 12px;
text-align: left;
font-weight: 600;
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.tbl-compact td{
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}

.tbl-compact tbody tr:hover{
background: rgba(255,255,255,0.02);
}

.tbl-compact tbody tr:last-child td{
border-bottom: none;
}

.pct-bar-wrap{
width: 100%;
height: 20px;
background: var(--progress-bg);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--line);
}

.pct-bar{
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--ok));
border-radius: 10px;
transition: width 0.3s ease;
min-width: 2px;
}

.table-scroll{
max-height: 400px;
overflow-y: auto;
--webkit-overflow-scrolling:touch;
border: 1px solid var(--line);
border-radius: 10px;
margin-top: 0.5rem;
}

.table-scroll::-webkit-scrollbar{
width: 8px;
}

.table-scroll::-webkit-scrollbar-track{
background: var(--bg);
border-radius: 10px;
}

.table-scroll::-webkit-scrollbar-thumb{
background: var(--line);
border-radius: 10px;
}

.table-scroll::-webkit-scrollbar-thumb:hover{
background: var(--accent);
}

.mb-4em{
  margin-bottom: 4em;
}


#analytics-correctness > .card{
margin-bottom: 20px;
}

#analytics-correctness > .card:last-child{
margin-bottom: 0;
}

#analytics-correctness h4{
color: var(--accent);
font-size: 16px;
margin-bottom: 1rem;
font-weight: 600;
}

th, td{
border-top: 1px solid var(--line);
padding: 10px 12px;
vertical-align: top;
}

th{
background: rgba(255,255,255,0.02);
font-weight: 600;
text-align: left;
}

tr:hover td{
background: rgba(255,255,255,0.02);
}

.deck-table-container{
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 10px;
}

#deckTable td, #deckTable td span{
  font-size:14px;
}

.xp-display{
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
}

.divider{
text-align: center;
color: var(--muted);
position: relative;
margin: 20px 0;
}

.divider:before{
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--line);
}

.divider:after{
content: attr(data-text);
background: var(--card);
padding: 0 12px;
position: relative;
}

#qrCode{
max-width: 200px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
background: white;
}

.setting-group{
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
}

.setting-group h4{
margin-top: 0;
color: var(--accent);
}

.notes-list{
display: flex;
flex-direction: column;
gap: 12px;
}

.note-item{
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
transition: all 0.2s ease;
}

.note-item:hover{
background: rgba(255,255,255,0.05);
transform: translateX(4px);
}

.note-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.note-date{
font-size: 12px;
color: var(--muted);
}

.goal-complete{
animation: goalComplete 0.5s ease;
}

.audio-play-btn{
background: var(--bg-secondary, #2a2a3a);
border: 1px solid var(--border, #3a3a4a);
border-radius: 6px;
padding: 4px 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
margin-left: 8px;
vertical-align: middle;
flex-shrink: 0;
}

.audio-play-btn:hover{
background: var(--accent, #4a9eff);
transform: scale(1.05);
border-color: var(--accent, #4a9eff);
}

.audio-play-btn:active,
.audio-play-btn.playing{
transform: scale(0.95);
background: var(--ok, #4ade80);
border-color: var(--ok, #4ade80);
}

.card-text-with-audio{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--fg);
}

.card-text{
flex: 1;
font-size: 1.1em;
line-height: 1.5;
}

.answer-item-with-audio{
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
padding: 8px 12px;
/* background: rgba(255, 255, 255, 0.03); */
border-radius: 6px;
transition: background 0.2s ease;
}

.answer-item-with-audio:hover{
background: rgba(255, 255, 255, 0.06);
}

.answer-text{
flex: 1;
line-height: 1.4;
}

.audio-play-btn.playing{
animation: pulse 0.5s ease-in-out;
}

.tag-autocomplete-suggestions{
position: absolute;
background: var(--card);
border: 1px solid var(--accent);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
margin-top: 4px;
min-width: 200px;
}

.tag-suggestion{
padding: 8px 12px;
cursor: pointer;
transition: background 0.2s ease;
border-bottom: 1px solid var(--line);
}

.tag-suggestion:last-child{
border-bottom: none;
}

.tag-suggestion:hover{
background: var(--accent);
color: white;
}

label:has(input[list="tagAutocomplete"]),
label:has(#studyTagFilter),
label:has(#tags),
label:has(#editTags){
position: relative;
}

input[list="tagAutocomplete"],
#studyTagFilter,
#tags,
#editTags{
width: 100%;
}

.tag-suggestion::before{
content: '🏷️';
margin-right: 6px;
opacity: 0.7;
}

.tag-autocomplete-suggestions::-webkit-scrollbar{
width: 8px;
}

.tag-autocomplete-suggestions::-webkit-scrollbar-track{
background: var(--bg);
border-radius: 4px;
}

.tag-autocomplete-suggestions::-webkit-scrollbar-thumb{
background: var(--accent);
border-radius: 4px;
}

.tag-autocomplete-suggestions::-webkit-scrollbar-thumb:hover{
background: color-mix(in srgb, var(--accent) 85%, white);
}

.quiz-display{
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
width: 100%;
max-width: 800px;
margin: 0 auto;
}

.question-side{
background: var(--card, #1e293b);
padding: 24px;
border-radius: 12px;
/* border: 1px solid var(--border, #334155); */
}

.question-side h3{
font-size: 1.2rem;
line-height: 1.6;
margin: 0 0 16px 0;
color: var(--fg);
}

.card-text-with-audio{
display: flex;
align-items: flex-start;
gap: 12px;
}

.card-text{
flex: 1;
margin: 0;
}

.options-list{
display: flex;
flex-direction: column;
gap: 12px;
/* margin-top: 20px; */
}

.quiz-option{
display: flex;
align-items: center;
gap: 5px;
padding: 7px !important;
background: var(--card, #1e293b);
border: 1px solid var(--border, #334155);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}

.quiz-option > input{
  width:15px;
  max-width:15px;
}

.quiz-option:hover{
border-color: var(--accent, #3b82f6);
background: var(--hover, #2d3748);
transform: translateX(4px);
}

.quiz-option input[type="checkbox"]{
width: 20px;
height: 20px;
cursor: pointer;
margin: 0;
flex-shrink: 0;
}

.option-letter{
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--accent, #0051d3);
color: white;
border-radius: 50%;
font-weight: 600;
flex-shrink: 0;
}

.option-text{
flex: 1;
font-size: 1rem;
line-height: 1.5;
color: var(--fg, #f1f5f9);
text-align:left;
text-indent: 10px;
}

.quiz-option.correct{
border-color: var(--ok, #10b981);
background: rgba(16, 185, 129, 0.1);
}

.quiz-option.correct .option-letter{
background: var(--ok, #10b981);
}

.quiz-option.wrong{
border-color: var(--danger, #ef4444);
background: rgba(239, 68, 68, 0.1);
}

.quiz-option.wrong .option-letter{
background: var(--danger, #ef4444);
}

.audio-play-btn{
/* background: var(--btn-accent-bg, #0051d3); */
background:transparent;
border: none;
border-radius: 6px;
padding: 6px 10px;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
border-radius: 10px;
}

.audio-play-btn:hover{
background: var(--accent-hover, #2563eb);
background:transparent;
fill:white;
transform: scale(1.1);
}

.audio-play-btn svg{
  fill:#4791f1;
}

.audio-play-btn.playing {
  border-radius: 10px;
  animation: pulse 0.5s ease;
}

.quiz-option input[type="checkbox"]:disabled{
cursor: not-allowed;
opacity: 0.7;
}

.quiz-option:has(input:disabled){
cursor: default;
}

.quiz-option:has(input:disabled):hover{
transform: none;
}
 
.quiz-check-btn{
  padding:0 20px !important;
}

.alert{
padding: 16px;
border-radius: 8px;
border: 1px solid;
}

.alert.danger{
background: rgba(239, 68, 68, 0.1);
border-color: var(--danger, #ef4444);
color: var(--danger, #ef4444);
}

.alert ul{
margin: 10px 0 0 20px;
font-size: 0.9rem;
}

.alert li{
margin: 4px 0;
}

#mappingSection select,
#mappingSection input{
width: 100%;
padding: 8px;
margin-top: 4px;
}

#uimpGrid{
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}

#uimpGrid th,
#uimpGrid td{
border: 1px solid var(--border, #333);
padding: 8px;
text-align: left;
max-width:100px;
}

#uimpGrid th{
background: var(--card, #1a1a1a);
font-weight: 600;
}

#uimpGrid td[contenteditable]{
cursor: text;
background: var(--bg, #0a0a0a);
}

#uimpGrid td[contenteditable]:hover{
background: var(--card, #1a1a1a);
}

#uimpGrid td{
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scroll-tabs{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
/* padding-bottom: 4px; */
/* margin-top:15px; */
margin:0 -15px;
/* margin-top:0; */

padding:15px 10px;
gap:8px;
background:var(--bg-header-row);



}

.scroll-tabs::-webkit-scrollbar{
height: 6px;
}

.scroll-tabs::-webkit-scrollbar-thumb{
background: var(--line);
border-radius: 999px;
}

.table-scroll-sm{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.table-scroll-sm table{
min-width: 640px;
}

.safe-area{
padding-left: max(env(safe-area-inset-left), 12px);
padding-right: max(env(safe-area-inset-right), 12px);
}

.muted{
overflow-wrap: normal; word-break: normal;
font-weight: 400;
font-size: 0.9em;
}

.header-label, .toolbar .muted{
white-space: nowrap;
}

.page.two-col{
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
align-items: start;
}

.page{
display:grid;
grid-template-columns: 1fr;
gap: var(--gap);
align-items:start;
}

.ad-rail{
display:none;
}

.ad-inline{
display:block; margin-bottom: var(--gap);
}

.ad-slot{
width:100%;
min-height:250px;
border:1px solid var(--ad-bd);
background: var(--ad-bg);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom: var(--gap);
overflow:hidden;
}

.ad-slot.tall{
min-height:600px;
}

.ad-label{
font: 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color:#6b7280;
letter-spacing:.08em;
text-transform:uppercase;
}

.ad-slot{
display:block; max-width:100%; overflow:hidden; margin:12px 0;
}

.ad-slot:empty{
display:none;
}

.ad-inline{
border:1px solid var(--line); border-radius:12px; background:var(--card);
}

.ad-slot .ad-box{
width:100%; aspect-ratio: 6 / 5;
}

.ad-sticky{
position: sticky; bottom: 0; z-index: 20;
padding:8px; border-top:1px solid var(--line); background:var(--bg);
}

.only-mobile{
display: none;
}
/* 
.hide-on-mobile{
display: flex;
} */

.mobile-only-feedback{
  display: none;
}

.actions-menu{
position: relative;
}

.actions-menu .menu{
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 50;
min-width: 180px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 10px 22px rgba(0,0,0,.35);
padding: 6px;
}

.actions-menu .menu-item{
width: 100%;
text-align: left;
padding: 10px 12px;
border-radius: 10px;
background: transparent;
border: 0;
color: var(--fg);
cursor: pointer;
}

.actions-menu .menu-item:hover,
.actions-menu .menu-item:focus{
background: var(--card-hover);
}

.actions-menu .menu-item.danger{
background: var(--danger-bg, #3b0f16);
color: var(--danger-fg, #ffb3b3);
}

.actions-menu .menu-item.danger:hover,
.actions-menu .menu-item.danger:focus{
filter: brightness(1.05);
}

.setbar{
display: flex; align-items: center; gap: 8px; width: 100%;
}

.setpicker{
flex: 1 1 auto; min-width: 0;
}

.setpicker select{
width: 100%; min-width: 0;max-width:350px;font-size:15px;height:44px;
}

.actions-menu .menu-item{
width: 100%; text-align: left;
padding: 10px 12px; border-radius: 10px;
background: transparent; border: 0; color: var(--fg);
}

.row{
min-width: 0;
}

.row > *{
min-width: 0;
}


#addCardDialog { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); }
#addCardDialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }



.drive-picker-list button{
  color:lightgrey;
}


.note-thumb{
  max-width:100%;
}

.googledrive-btn-logo[data-loading="true"] {
  opacity: 0.7;
  pointer-events: none;
}
 
.googledrive-btn-logo{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.googledrive-btn-logo img{
  width:50px;
}


/* Keep study / quiz buttons from shrinking and jumping horizontally */
#tab-study .card .study-actions .grade-group .btn,
#tab-study .self-grade-buttons .btn {
  min-width: 80px;
  text-align: center;
}


/* Study: place grade buttons inside the session header, under the green progress bar */
#tab-study .session-header .study-actions {
  position: static;
  margin-top: 8px;
  padding: 6px 0 0;
  border-top: none;
  background: transparent;
  backdrop-filter: none;
  display: flex;
  justify-content: center;
  gap: 8px;
}

#tab-study .session-header .study-actions .grade-group {
  display: flex;
  gap: 8px;
}


/* Pomodoro timer widget */
/* #pomodoroWidget {
  display: flex;
  align-items: center;
} */

#pomoToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.9);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}

#pomoToggleBtn[data-state="running"] {
  background: rgba(37, 99, 235, 0.18);
  border-color: var(--accent);
}

#pomoLabel {
  font-weight: 500;
}

#pomoTime {
  font-variant-numeric: tabular-nums;
  min-width: 43px;
  text-align: right;
}

/* Break overlay */
#pomoBreakOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

#pomoBreakOverlay.hidden {
  display: none;
}

#pomoBreakOverlay .pomo-break-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 20px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

#pomoBreakOverlay h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

#pomoBreakOverlay p {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

.pomo-media {
  margin-bottom: 14px;
}

.pomo-media video,
.pomo-media img {
  max-width: 100%;
  border-radius: 12px;
}

.pomo-media video {
  display: none; /* made visible only when ad plays */
}

/* Pomodoro timer widget in header */
/* #pomodoroWidget.pomo-widget {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background-color: var(--card);
} */

.pomo-widget {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* border-radius: 10px; */
  /* background-color: var(--card); */
  background:transparent;
  border-left:1px solid var(--nav-font-color);
  border-right:1px solid var(--nav-font-color);
  margin-right:20px;
  padding:0 20px;
  
}




#pomoDisplayBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 14px;
  border:none;
  /* border-radius: 999px; */
  /* border: 1px solid var(--line); */
  /* background: rgba(15, 23, 42, 0.9); */
  /* background:var(--badge-bg); */
  /* color: var(--fg); */
  cursor: pointer;
  background:transparent;
  color:var(--nav-font-color);
}

#pomoDisplayBtn:focus{
  outline: none;
}
#pomoDisplayBtn[data-state="running"] {
  /* background: rgba(37, 99, 235, 0.18); */
  border-color: var(--accent);
}

#pomoDisplayBtn:hover{
  background:var(--nav-background-color-tinted);
}


/* Controls + inputs */
.pomo-controls {
  display: inline-flex;
  align-items: center;
  /* gap: 4px; */
  /* padding:6px 4px; */
  /* font-size: 12px; */
  /* border-radius: 10px; */
}

.pomo-controls button {
  /* display: inline-flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* border-radius: 999px; */
  /* border: 1px solid var(--line); */
  /* background: rgba(15, 23, 42, 0.9); */
  /* background:var(--card); */
  /* color: var(--fg-muted); */

  /* Bigger tap targets */
  /* padding: 8px 10px; */
  min-width: 40px;
  min-height: 40px;

  font-size: 14px;
  /* line-height: 1; */
  cursor: pointer;
  color:var(--nav-font-color);
  background:transparent;
  transition: all 50ms ease-in-out;
}


.pomo-controls button:hover {
  /* border-color: var(--accent);
  color: var(--accent); */
  background:var(--nav-background-color-tinted);
  color:#d0fff7;

}

.pomo-field {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pomo-field span {
  font-size: 14px;
  color: var(--muted);
}

.pomo-field input {
  width: 42px;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.9);
  background:var(--card);
  color: var(--fg);
  font-size: 14px;
}

.pomo-playpausebtn{
  border:none;
  border-radius: 0;
  background: transparent;
}

.pomo-resetbtn{
  border-radius:0 10px 10px 0;
  border:none;
  background:transparent;
}

#themeToggleBtn:focus{
  outline: none;
}

.notes-header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding:5px;
  padding-top:0;
}


.study-grade-btns{
  font-size:16px;
  font-weight: 600;
  width:80px !important;
  max-width:20% !important;
  padding:2px 10px !important;
  border:none;
  color:white;
}

.study-actions-gradeButtons{
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  z-index: 100;
  /* background: #889db8e0; */
  /* background:#395a85e0; */
  background-color:#003e918f;
  margin:0;
  padding:15px !important;
}


.grade-group{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:15px;
}

.study-grade-btn-show-answer{
  background-color:#f59e0b;
  border-radius:5px !important;
  font-weight: 600;
}

.study-grade-btn-again{
  background-color:#ef4444;
}

.study-grade-btn-hard{
  /* background-color:#B25F4A; */
  background-color:#f59e0b;
}

.study-grade-btn-good{
  /* background-color:#449e63; */
  background-color:#3b82f6;
}

.study-grade-btn-easy{
  /* background-color:#006834; */
  background-color:#10b981;
}


  .flashcard-actions{
    height:80px;
    display: flex;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    z-index: 35;
    width:100%;
    justify-content: center;
    margin:0;
    /* background-color:var(--card); */
    /* background:#395a85e0; */
    background-color:#003e91de;
    /* background:#7db3a0e0; */
    /* background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    /* background: #b5b5b5; */
/* background: linear-gradient(90deg, rgba(181, 181, 181, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(168, 168, 168, 1) 100%); */
    padding:15px 0;
    gap:0;
  }

/* 
  .flashcard-actions button{
    height:44px;
    width:100%;
    border-radius: 2px;
  } */

.pomo-media video {
  display: none; /* only visible when an ad is playing */
}


.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  /* padding:0; */
  border-radius: 10px;
  /* border: 1px solid var(--line); */
  /* background: rgba(15, 23, 42, 0.9); */
  /* color: var(--fg); */
  font-size: 1em;
  cursor: pointer;
  height:44px;

  background: transparent;
  color:var(--nav-font-color);
  border:none;
  
}

.theme-toggle:hover{
  background:var(--nav-background-color-tinted);
}

/* body[data-theme="light"] .theme-toggle {
  background: #f9fafb;

} */


.theme-toggle-icon {
  font-size: 14px;
}

.theme-preview.light {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

#studyModeRevisitCheckbox{
  gap:0;
  align-items: center;
  flex-direction: row !important;
  width:100% !important;
  font-weight:400;
  padding:8px 0;
  background:var(--card-hover);
  border-radius: 5px;
  justify-content: flex-start;
}


/* #studyModeRevisitCheckbox > input {
  width:50px;
} */

#installAppBtn {
  font-size: 15px;
  padding: 6px 10px;
}

.skip-link {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  color: #000000;
  border-radius: 0.5rem;
  z-index: 100000;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  /* transform: translateY(0); */
      left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border:1px solid #990000;
}


.inline-check-span{
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* .inline-check-span input{
  width:80px !important;
} */


.min-height-150{
  min-height: 150px;
}


.card-widget{
    display: flex;
    flex-direction: row;
    /* background-color: var(--card); */
    /* border: 1px solid lavender; */
    padding: 16px 0; 
    flex-wrap: wrap;
    gap:15px;
}

.card-widget h4{
  margin-top:0;
  color:var(--accent);
  font-size:1.2em;
}

.card-half-widget {
  /* background:rgba(255,255,255,0.02); */
  background-color:var(--card-hover);
  width: calc(50% - 20px);
  padding: 15px;
  margin: 5px;
  border-radius: 10px;
}

/* --- Browse Deck table: layout + scroll area --- */

.deck-table-container {
  /* Use more of the viewport height */
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  margin:20px 0;
}

/* Make the table fill horizontally */
.deck-table-container table {
  width: 100%;
  table-layout: auto;
}

/* Header sorting affordances */
.deck-table-container thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.deck-table-container thead th.sortable::after {
  content: " ⇅";
  opacity: 0.35;
  font-size: 0.75rem;
  padding-left: 4px;
}

.deck-table-container thead th.sort-asc::after {
  content: " ▲";
  opacity: 0.9;
}

.deck-table-container thead th.sort-desc::after {
  content: " ▼";
  opacity: 0.9;
}

/* Flashcard layout with fixed bottom action bar */
.flashcard-display {
  display: flex;
  flex-direction: column;
  /* min-height: 360px; */
              /* gives room for question + answer */
  min-height: 50vh;
  justify-content: space-between;
}

/* Question + answer stack */
.flashcard-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.2em;
  color:var(--fg);
}

/* Action bar at bottom */
/* .flashcard-actions {
  margin: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
} */

/* .flashcard-actions-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;

} */

.flashcard-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.self-grade-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


#bmDragBtn{
  padding:10px 15px;
  border-radius: 8px;
  text-decoration: none;
}


/* Header feedback button */
.header-feedback-btn{
  height:44px;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:5px;
  padding:0 20px;
  border-radius:10px;
  /* border:1px solid var(--accent); */
  border:none;
  /* background:var(--nav-background-color-tinted); */
  background:transparent;
  color:var(--nav-font-color);
  font-size:1em;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;

}

.header-feedback-btn:hover{
  background-color:rgba(59,130,246,0.12); /* uses accent tone */
  background:var(--nav-background-color-tinted);
}



.session-summary{
  padding:25px 0;
}

#feedbackForm{
  display: flex;
  flex-direction: column;
  gap:15px;
}


#feedbackDialog{
  border: none;
  border-radius: 5px;
  padding:0;
  background:var(--card);
  border:1px solid var(--header-accent);
  color:var(--fg);
}

.feedbackDialog-header{
  padding:10px;
  color:var(--header-accent-fg-color) !important;
  background-color:var(--header-accent) !important;
}

#feedbackDialog-Body{
  padding:10px 30px 10px;
}

.dialog-send-card-header{
  background:var(--card);
  color:var(--fg);
  justify-content: space-between;
  align-items: center;
  box-shadow: none;
  font-size: 1.1em;
}

#feedbackDialogCloseBtn{
  /* color:var(--fg);  */
  color:#fff;
  width:50px;
  padding:0;
}

#feedbackDialogCloseBtn:hover{
  cursor:pointer;
}

#studyArea{
  background-color: var(--card);
  border-radius: 10px;
  padding:25px;
}


.study-mode-wrapper{
  background-color:var(--card);
  border-radius: 14px;
  padding:20px;
  box-shadow: 0 2px 8px var(--shadow);
}

.study-mode-wrapper h3{
  text-align: left;
}

.mobile-nav-icons{
  display:none;
}

.grid-to-flex-mobile{
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 4em;
}

.icon-button{
  background:transparent;
  border:none;
  font-size: 2rem;
}

.no-bx-shadow{
  box-shadow: none !important;
}




.btn-show-answer{
  width:100%;
  /* padding:5px; */
  background:#d99009;
  font-size: 16px;
  /* font-size: 1em; */
  border:none;
  border-radius:0 !important;
  color:white;
  /* height:80px !important; */
  background-color:#f59e0b;
  border-radius:5px !important;
  font-weight: 600;

}

.btn-show-answer:hover{
  background-color:#b97d0d;

}

.import-header{
  font-size: 1.5em;
  font-weight: 400;
  /* border-bottom:1px solid lightgrey; */
  width:100%;
  /* color:var(--fg); */
  color:var(--accent);
  padding-bottom:10px;
}


/* import export styles */
.t-center{
  text-align: center;
  justify-content: center;
  align-items: center;
}

.import-export-wrapper{
  background:transparent !important;
  box-shadow: none !important;
  border:none !important;
  overflow: visible !important; 
  box-shadow: 0 2px 8px var(--shadow);
}

.import-export-subcard{
background:var(--card);
border-radius: 15px;
border:1px solid var(--progress-bg);
padding:30px 30px 40px;
margin-bottom:20px;
box-shadow: 0 2px 8px var(--shadow);
}

.import-bookmark-p{
  margin:0;
  /* margin-bottom:-15px; */
  text-indent: 10px;
}

.import-csv-wrapper{
  display:flex;
  gap:25px;
}

.csv-section-bookmark-btns{
  flex-wrap: wrap;
  gap:10px;
}

.csv-section-paste{
  width:100%;
}

.import-flex-col{
  display: flex;
  flex-direction: row;
  gap:15px;
  margin:0;
}

#bookmarkletBox{
  display: flex;
  flex-direction: column;
  gap:15px;
}

.import-or{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;               /* space between line and OR */
  width: 100%;
}

.import-or hr{
  flex: 1;                 /* make both lines expand evenly */
  border: 0;
  border-top: 1px solid #cfd6e4;  /* your line color */
  margin: 0;               /* kill default hr margins */
}

.import-or-p{
  margin: 0;               /* kill default p margins */
  white-space: nowrap;     /* keep OR on one line */
  font-weight: 600;
}


/* new layout import export */
/* =========================
   Import Wizard Layout (scoped + renamed)
   ========================= */

.uimpw { width: 100%; }

/* Header row (title + stepper) */
.uimpw__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Stepper */
.uimpw__stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.uimpw__stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.7;
}

.uimpw__stepper .step .dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,0,0,0.20);
  font-weight: 700;
}

.uimpw__stepper .step .label {
  font-weight: 600;
  font-size: 13px;
}

.uimpw__stepper .line {
  width: 42px;
  height: 2px;
  background: rgba(0,0,0,0.12);
}

.uimpw__stepper .step.is-active { opacity: 1; }
.uimpw__stepper .step.is-active .dot {
  border-color: rgba(0,0,0,0.45);
}

/* Panels */
.uimpw__panel { margin-top: 14px; }

/* Step 1 grid */
.uimpw__sourceGrid {
  display: grid;
  grid-template-columns: 1.2fr 120px 0.8fr;
  gap: 18px;
  align-items: start;
}

/* Bookmarklet card */
.uimpw__bookmark textarea#uimpPaste {
  width: 100%;
  resize: vertical;
}

.uimpw__rule {
  margin-top: 15px;
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.15);
}

/* OR column */
.uimpw__or {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 10px;
  margin-top: 40px;
}

.uimpw__or .or-line {
  width: 100%;
  height: 2px;
  background: rgba(0,0,0,0.12);
}

.uimpw__or .or-text {
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0.08em;
}

/* Right actions */
.uimpw__actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* Parse & Map grid */
.uimpw__configGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.uimpw__configGrid .form-group {
  display: grid;
  gap: 6px;
}

.uimpw__configGrid .parse-area {
  align-self: end;
}

/* Wizard footer nav */
.uimpw__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.btn-show-hint{
  position:absolute;
  left:15px;
  color:var(--accent-fg);
  background:var(--ToolBlue);
}


.stimp-left{
  flex-basis: 45%;
}


.note-preview-rich {
  max-height: 7.5em;       /* keeps cards uniform */
  overflow: hidden;
}

.note-preview-rich h1,
.note-preview-rich h2 {
  margin: 0.2em 0;
  font-size: 1rem;
}

.note-preview-rich p {
  margin: 0.25em 0;
}

.note-preview-rich ul,
.note-preview-rich ol {
  margin: 0.25em 0 0.25em 1.25em;
}

.btn-edit-notes{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
  color:#fff;
}
.btn-delete-notes{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
 color:#fff;
}


.s-btn-import-browse{
    display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
 color:#fff;
}

.btn-settings-feedback{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
 color:var(--fg-color);
}

.install-app-settings{
  /* text-align: center; */
  width:100%;
}

.w-50{
  width:50%;
}

.w-100{
  width:100%;
}


.edit-modal-header{
  background:var(--card);
  color:var(--fg-color);
  padding:20px 30px;
 
}

.edit-modal-header h3{
  margin:0;
}

.edit-modal-container{
  background:var(--card-hover);
  color:var(--fg-color);
  padding:0;
  /* background-color:lightgrey; */
  width:50%;
}

.edit-modal-subsection{
  background-color:var(--card);
  color:var(--fg-color);
  margin:15px;
  border-radius: 15px;
}

.edit-modal-subsection-header{
  /* border-bottom:1px solid lightgrey; */
  display: flex;
  justify-content: space-between;
  padding: 5px;
  position: relative;
}

.edit-modal-subsection-header-footnote{
  font-size:15px;
  padding-top:7px;
  margin-left:10px;
  color:darkgrey;
  text-transform: none;
}

.edit-modal-subsection-header h4{
  font-size: 20px;
  margin:0;
  text-transform: uppercase;
  padding-left:15px;
  align-items: center;
}

.edit-modal-subsection-header-lang{
  display:flex;
  align-items: center;
}

.edit-modal-subsection-header-lang select{
  width:auto;
  padding:10px 15px; /* space for arrow on right */
  margin:0 10px;
  border:0;

  background:transparent;
  font-size:14px;
  color:var(--fg-color);
  cursor:pointer;

  background-color:var(--card-hover);
  border-radius: 0;
  /* remove native styling */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

.edit-modal-subsection-header-img-upload{
  display: flex;
  align-items: center;
  color:rgb(59 130 246);
}


.edit-modal-subsection-header-img-upload:hover{
  cursor: pointer;
}

/* .edit-modal-subsection-header-lang::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-50%) rotate(45deg);
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  pointer-events:none;

} */




#editQ{
  border-radius: 0;
  max-width: 90%;
  width:90%;
  min-height: 100%;
  min-height: 100px;
  max-height: 200px;
  /* border-left:none; */
  /* border-right: none; */
  padding:20px;
  margin-bottom:0;
  border-color:var(--line);
}

#editA{
  border-radius: 0;
  max-width: 100%;
  width:100%;
  min-height: 100%;
  min-height: 100px;
  max-height: 200px;
  /* border-left:none; */
  /* border-right: none; */
  padding:20px;
}

/* #editWorked,#editDistractors{
  border-left:none;
  border-right:none;
} */

.edit-modal-subsection-wrapper{
  padding:10px;
}

.edit-modal-subsection-wrapper textarea{
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 1em;
  border-radius: 0;
}

#editTags{
  border-radius: 0;
  /* border:none; */
  /* border-block:1px solid var(--line); */
  margin-bottom:1em;
}



.note-editor-readonly {
  cursor: default;
}
.note-card { cursor: pointer; }
.note-card button { cursor: pointer; }


.action-btn-rename{
  background-color:var(--card);
  color:var(--rename-btn-color);
  border:2px solid var(--rename-btn-color);  
}

.action-btn-rename:hover{
  background-color: var(--card-hover);
}

.action-btn-remove{
  /* background-color:var(--card); */
  /* color:var(--danger); */
  /* color:var(--fg); */
  background-color: var(--btn-bg-danger);
  /* rgb(220 38 38/.2) */
  border:2px solid var(--danger);
  color:var(--btn-light-danger);
}


/* Modal base */
dialog.modal {
  border: none;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 24px);
  border-radius: 14px;
  background: var(--card, #111827);
  color: var(--text, #e5e7eb);
  /* box-shadow: 0 24px 80px rgba(0,0,0,.55); */
}

dialog.modal::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.modal-card { padding: 18px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title { margin: 0; font-size: 18px; }
.modal-x {
  border: none; background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
  opacity: .85;
}
.modal-x:hover { opacity: 1; }

.modal-body { padding: 14px 0; }
.modal-lead { margin: 0 0 12px; opacity: .95; }

.modal-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  font-size: 14px;
}
.modal-metrics b { font-weight: 700; }

.modal-hint {
  font-size: 13px;
  opacity: .9;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.25);
}

.modal-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
}
.modal-footer-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* If you don't already have button styles, add minimal ones */
.btn { padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,.12); }
.btn-primary { background: #2563eb; color: white; }
.btn-danger-outline { background: transparent; color: #fca5a5; border-color: rgba(239,68,68,.45); }
.btn-danger-outline:hover { background: rgba(239,68,68,.12); }

.sub-section-title {
  text-transform: uppercase;
  /* color: #999; */
  /* color:#555353; */
  color:var(--fg-color);
  font-weight: 500;
  font-size: 1em;
  margin:0;
}

/* Delete Set Safety Modal tweaks */
#deleteSetDialog .dialog-card {
  max-width: 520px;
}

#deleteSetDialog{
  border:none;
}

.dialog-header{
  box-shadow: none;
  border:none;
}



#deleteSetDialog strong {
  font-weight: 700;
}

#deleteSetDialog::backdrop {
  background: rgba(0,0,0,.55);
}

/* Simple modal styling */
/* ---- dialog fallback: keep it hidden unless opened (fixes iPad Safari w/o <dialog>) ---- */
#revisitHintDialog {
  display: none; /* default hidden everywhere */
}

/* When native dialog is supported, showModal() sets [open] */
#revisitHintDialog[open] {
  display: block;
}

/* When dialog is NOT supported, we toggle this class from JS */
#revisitHintDialog.is-open {
  display: block;
}

#revisitHintDialog::backdrop { background: rgba(0,0,0,.55); }
#revisitHintDialog.modal { border: none; padding: 0; background: transparent; }
#revisitHintDialog .modal-card{
  width:min(520px, calc(100vw - 32px));
  border-radius:16px;
  padding:18px;
  background: var(--card, #111827);
  /* color: var(--text, #e5e7eb); */
  color:var(--fg-color);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
#revisitHintDialog .modal-title{ margin:0 0 8px; font-size:18px; }
#revisitHintDialog .modal-body{ margin:0 0 14px; opacity:.9; line-height:1.35; }
#revisitHintDialog .modal-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }



.deck-tools-header{
  display: flex;
  align-items: center;
  gap: 15px;
  color:var(--deck-tools-caption-color);
}

.deck-tools-header svg{
  fill:var(--deck-tools-caption-color);
}


/* .deck-tools-header::marker{
 unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: end !important;
    text-align-last: auto !important;
} */

/* Make the summary a flex row so we can push an indicator to the right */
details.deck-tools > summary.deck-tools-header-marker {
  list-style: none;            /* removes marker in Firefox */
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* removes marker in Chromium/Safari */
details.deck-tools > summary.deck-tools-header-marker::-webkit-details-marker {
  display: none;
}

/* your header wrapper should take the available space */
details.deck-tools > summary.deck-tools-header-marker .deck-tools-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: end;
}

/* custom right-side marker */
details.deck-tools > summary.deck-tools-header-marker::after {
  content: "▸";
  font-size: 1.8em;
  line-height: 1;
  margin-left: auto;
  transition: transform 150ms ease;
  opacity: 0.85;
  color:var(--deck-tools-caption-color);
}

/* rotate when open */
details.deck-tools[open] > summary.deck-tools-header-marker::after {
  transform: rotate(90deg);
}

/* optional: nicer focus */
details.deck-tools > summary.deck-tools-header-marker:focus-visible {
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 4px;
  border-radius: 10px;
}

.card-panel{
  background:var(--bg-card-panel);
  padding:30px 50px 40px;
  margin:0 -20px;
  display: flex;
  gap:20px;
  justify-content: space-evenly;
}



.deck-tools-subsection > .horizontal-heading{
  margin:0;
}

.deck-tools-subsection > .sub-section-title{
  margin:0;
}

.deck-tools-actions{
  width:25%;
  /* text-align: center; */
}


.deck-tools-wrapper{
  color:var(--accent-fg);
    flex-direction: column;
}

.deck-tools-wrapper > .btn{
  width:100%;
}





.stats-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}

.stats-btn:focus {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  white-space: nowrap;
  color:var(--fg-color);
}

.stats-tooltip {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  display: none;
}

.stats-tooltip.open {
  display: block;
}

.stats-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.stats-tip-row .k {
  font-weight: 600;
  opacity: 0.85;
}

.stats-tip-row .v {
  opacity: 0.9;
  text-align: right;
}

.stats-btn:focus{
  outline:none !important;

}


/* 1) The element that scrolls */
.deck-table-container {
  overflow-y: auto;
  /* if you already have a height/max-height, keep yours */
  max-height: 520px;
}

/* 2) Sticky header cells */
.deck-table-container thead tr th {
  position: sticky;
  top: -1px;
  z-index: 5;              /* keep above body cells */
  background: var(--card-hover);      
}

/* Optional: keep header border visible while sticky */
.deck-table-container thead tr th {
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}



/* --- Deck Tools: make summary behave like a compact "button" --- */
details.deck-tools{
  /* display: flex;
  flex-direction: column;
  align-items: flex-end;  */
  text-align: right;
}

/* keep the opened content full width */
details.deck-tools > div.mt-6{
  align-self: stretch;
}

/* make the summary size to its content */
details.deck-tools > summary.deck-tools-header-marker{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

/* override the earlier "flex:1 + justify-content:end" */
details.deck-tools > summary.deck-tools-header-marker .deck-tools-header{
  flex: 0 1 auto;
  justify-content: flex-start;
}

/* don't push the arrow to the far right anymore */
details.deck-tools > summary.deck-tools-header-marker::after{
  margin-left: 8px; /* was auto */
}
/* 

details.deck-tools { width: 100%; }

details.deck-tools > summary.deck-tools-header-marker {
  display: inline-flex;
  width: fit-content;
}

/* stretch the first element after the summary */
details.deck-tools[open] > summary + * {
  width: 100%;
  align-self: stretch;
  display: block;
  text-align: left;
} 


.answer-group-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  justify-content: end;
}

.answer-group-audio .audio-play-btn {
  margin-left: 0; /* override the default margin-left */
}


.deck-tools-toggle{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:6px;
}

/* Ensure disabled import action buttons LOOK disabled */
.stimp-final-actions .btn:disabled,
.stimp-final-actions .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled,
.s-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* Force disabled buttons to LOOK disabled (even with custom .btn styling) */
button.btn:disabled,
button.btn.disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.15) !important;
}


button.btn:disabled:hover,
button.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

button.btn:disabled,
button.btn.disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


.import-step1-summary{
  margin: 2em;
  color:var(--muted);
}


.import-step1-summary *{
  margin:0;
}


#addCardShowMoreDetails{
  padding-top:10px;
}

.dialog-btn-primary{
  border:1px solid var(--dialog-btn-bgcolor);
  background:transparent;
  color:var(--header-accent);
}

.dialog-btn-primary:hover{
  background-color: transparent;
  box-shadow: none;
}

.dialog-btn-secondary{
  background: transparent;
  border:1px solid var(--ToolBlue);
  color:var(--fg-color);
}

.dialog-btn-secondary:hover{
  background:transparent;
  box-shadow: none;
}

.dialog-btn-cancel{
  background-color: transparent;
  color: var(--danger);
  border:1px solid;
}

.dialog-btn-cancel:hover{

}


.copy-prompt{
  color:var(--fg-color);
}


.deck-tagline-wrapper{
  text-align: left;
  color:var(--fg-color);
  text-align: center;
  
}

.deck-hero-heading{
  font-size: 1.7em;
  /* text-align: center; */
  /* color: #6e63d9; */
  color:var(--hero-heading);
  /* font-style: italic; */
  font-weight: 500;
}

.hero-tagline{
  color:var(--fg-color);
  /* text-align: center; */
  margin: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1em;
  opacity: .7;
}


.btn-dialog-tr-x{
  background-color: transparent;
  width:50px;
  font-size: 2em;
  padding:0;
}

.btn-dialog-tr-x:hover{
  box-shadow: none;
  background:transparent;
}

.deck-title-caption{
  float: left;
  margin-top: -5px;
}

.consent-banner {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 100000;
  display: flex;
  align-items: flex-end;
}

.consent-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 12px;
  background: var(--card-bg, #fff);
  color: var(--text, #111);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.hidden {
  display: none !important;
}


/* Responsive */
@media (max-width: 980px) {
  .uimpw__sourceGrid { grid-template-columns: 1fr; }
  .uimpw__or { display: none; }
  .uimpw__configGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .uimpw__configGrid { grid-template-columns: 1fr; }
}





/* Make it mobile-friendly */
@media (max-width: 768px) {
    #pomodoroWidget.pomo-widget {
    gap: 4px;
    gap:0;
    margin:0;
    border-left:none;
    padding:5px 0;
  }
  #pomoDisplayBtn {
    font-size: 15px;
    padding: 9px 8px;
    padding:0;
  }
  .pomo-controls {
    flex-wrap: wrap;
    gap: 2px 4px;
  }

   .header-feedback-btn{
    padding:6px 10px;
    font-size:.8rem;
  }

  .flashcard-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .flashcard-actions-right {
    justify-content: space-between;
  }

  .self-grade-buttons button {
    flex: 1 1 auto;

    border-radius: 2px;
    height:60px;
  }
  
  .nav-menu-link.active{
    border-bottom:2px solid var(--nav-background-color-tinted) !important;
    border-top:1px solid var(--nav-background-color-tinted);
    /* background-color:var(--nav-active-link-color); */
  }


  /* .flashcard-actions-left button{
    border-radius: 2px;
    height:60px;
  } */

  .import-mini-card-flex{
    flex-wrap: wrap;
  }

  .flashcard-display{
    padding:15px ;
  }

  .flashcard-main{
    width:100%;
  }
  .question-side{
    width:100%;
    padding:15px !important;
    border:none;
  }

  .answer-area{
    width:100%;
  }
  .answer-area hr{
    width:100%;
  }

  .modal-content{
    max-width:90%;
    width:90%;
  }

  .edit-modal-header{
    padding:20px;
  }

  .edit-modal-subsection{
    margin:15px 5px;
  }

  .edit-modal-subsection-header-footnote{
    display:none;
  }

  .card-panel-d-tools{
    padding:10px;
    flex-direction: column;
  }

  .card-panel-d-tools > div{
    width:100%;
  }

  .deck-tools-actions{
    margin-block:2em;
  }

  .import-step1-summary{
    margin-block: 2em;
    margin-inline:0;
    /* color:var(--muted); */
  }

  .deck-tools-toggle{
    width:100%;
  }

  #openAddCard{
    width:100%;
  }

  .deck-title-caption{
    position:absolute;
  }
}





/* Mobile behaviour – keep it scrollable horizontally if needed */
@media (max-width: 768px) {
  .deck-table-container {
    max-height: calc(100vh - 220px);
    overflow-x: auto;
  }

  .deck-table-container table {
    /* Ensure columns don't get impossibly skinny on phones */
    min-width: 640px;
  }
}



/* Mobile tweaks */
@media (max-width: 768px) {
  #pomoToggleBtn {
    font-size: 12px;
    padding: 4px 8px;
  }

  .card-half-widget{
    width:100%;
  }
}


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

.analytics-header{
grid-template-columns: 1fr;
}

.theme-selector{
grid-template-columns: 1fr;
}

.big-number{
font-size: 28px;
}
}

@media print{
body{
background: white; color: black;
}

header{
display: none;
}

.btn{
display: none;
}

.card{
box-shadow: none; border: 1px solid #ddd;
}
}

@media (max-width: 768px){

  #notificationHost {
    width: 100%;
  }
  #notificationHost .notification {
    width: auto;
  }
  
.hide-on-mobile{
  display: none !important;
}

.head-wrap{
  padding:0;
}

.quiz-display{
padding: 12px;
}

.question-side{
padding: 16px;
}

.question-side h3{
font-size: 1.1rem;
}

.quiz-option{
padding: 12px;
}



.option-letter{
width: 28px;
height: 28px;
font-size: 0.9rem;
}

.option-text{
font-size: 0.9rem;
}
}

@media (max-width: 540px){



  .flashcard-display{
    padding:15px;
  }
  
  .flashcard-main{
    width:100%;
  }
  .question-side{
    width:100%;
    padding:15px;
    border:none;
  }

  .answer-area{
    width:100%;
  }
  .answer-area hr{
    width:100%;
  }

.nav-menu-link{
  border:none;
  border-radius:0;
  font-size: 1.1em;
  /* background-color:transparent; */
  /* background-color:var(--card); */
  background:transparent;
  line-height: 2;
  border:none;
  text-align: left;
  padding-left:30px;
  display:flex;
  gap:25px;

}


.nav-menu-link.active{
  /* border-bottom:2px solid var(--nav-active-border-color); */
  /* background-color:var(--nav-active-link-color); */
  background-color: var(--nav-background-color-tinted);
  /* color:var(--accent-fg); */
  /* color:var(--ad-bd); */
}

.mobile-nav-icons{
  display: block;
  margin-top:5px;
  margin-bottom: -5px;
}

.grid-to-flex-mobile{
  display:flex !important;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid-to-flex-mobile-item{
  width:46% !important;
}

#ss-dd-titles{
  width:60%;
}

.hide-on-mobile{
  display:none;
}

/* .mobile-only-feedback{
   display: block;
} */

.page > .wrap {
  padding:10px !important;
  margin:0 !important;
  max-width:100% !important;
}

.stack-sm{
gap: 8px;
}

.stack-sm > *{
flex: 1 1 100%; min-width: 0;
}

.stack-sm .btn,
  .stack-sm select{
width: 100%;
}

.tab-btn,
  .btn{
padding: 10px 14px; border-radius: 12px;
}

.card-mobile-padded{
padding: 16px !important;
}

.grid{
gap: 12px;
}

input, textarea, select{
padding: 12px;
}

label{
display: block;
}

header .wrap{
padding: 10px 12px;
padding:0;
}

h1{
font-size: 18px;
}

.badge{
font-size: 12px; padding: 2px 8px;
}

#tab-study .study-card,
  #tab-study .card.study-card{
/* padding: 14px !important; */
/* padding: 0 !important; */
border:none;
background:var(--card);
}

#tab-study .card .study-body img{
max-height: 32vh;
}

.modal__panel{
width: 96vw; margin: 4vh auto; padding: 12px;
}

.modal__sections{
grid-template-columns: 1fr !important; gap: 12px;
}

.deck-table-container table thead th{
position: sticky; top: 0;
background: var(--card);
z-index: 1;
}

.muted{
opacity: .9;
}

.analytics-header{
gap: 12px;
}

.big-number{
font-size: 24px;
}

.grid{
display: grid;
grid-template-columns: minmax(0, 1fr);
}

.grid > *{
min-width: 0;
}

.card,
  .row,
  .toolbar,
  .deck-table-container,
  .modal__panel{
min-width: 0;
max-width: 100%;
}

input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  textarea,
  .btn{
max-width: 100%;
}

.badge,
  .muted,
  .stat,
  .tag{
min-width: 0;
overflow-wrap: anywhere;
}

pre, code, kbd, samp{
white-space: pre-wrap;
word-break: break-word;
}

.table-scroll-sm{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}

.table-scroll-sm table{
  /* min-width: 640px; */
  min-width: 0;
}

html, body{
overflow-x: hidden;
}

.toolbar{
flex-wrap: wrap; gap: 8px;
}

.toolbar .row{
flex-wrap: wrap; gap: 8px;
}

.toolbar .card-cnt{
  justify-content: flex-end;
}

.toolbar select,
  .toolbar .btn{
flex: 0 0 auto;
}

.toolbar select{
min-width: 200px; max-width: 100%;
}


.toolbar-deck-study-set-actions{
  flex-wrap:wrap;
  gap:0;
  column-gap: 5px;
}


.only-mobile{
display: inline-flex;
}


.page{
display: inherit;
grid-template-columns: 1fr;

gap: var(--gap);
align-items: start;
}

.setbar{
flex-wrap: nowrap;
}

.actions-menu.inline{
flex: 0 0 auto;
}
/* 
#actionsMenuBtn{
height: 100%;
} */

#tab-study .grid,
  #tab-analytics .grid{
grid-template-columns: minmax(0, 1fr) !important;
}

#tab-study .grid > *,
  #tab-analytics .grid > *,
  #tab-analytics .analytics-header > *,
  .tab-content > .grid > *{
min-width: 0;
max-width: 100%;
}

#tab-study .card,
  #tab-study .study-card{
max-width: 100%;
}

#tab-study .study-card,
  #tab-study .study-card *{
  min-width: 0 !important;
  padding:0;
  align-items: center;
  /* width:100%; */
  /* margin: 1.25em .25em; */
  /* width:10px; */
  /* justify-content: space-around; */
}

.flashcard-actions-left{
  width:100%;
}

.quiz-display > .options-list{
  align-items: normal !important;
  border:none;
  width:95%;
}

.quiz-display > .option-list > label{
  border:none;
  background:#f1f1f1 !important;
  padding:10px;
}

.quiz-display > .option-list >input{
  display:none;
}

.btn-show-answer{
  width:100%;
  padding:5px;
  /* background:#d99009; */
  background:#18966c;
  font-size: 1.2em;
  border:none;
  color:white;
  height:80px !important;
}


.study-mode-wrapper{
  box-shadow: none !important;
  padding-block:15px !important;
}

#selectStudyModeOption{
  border:none;
  border-bottom: 2px solid var(--bg);
  border-radius: 0;
}

.study-mode-header-wrapper{
  flex-direction: column !important;
  width:calc(100% - 15px);
  margin-left:-15px;
}

.answer-content{
  padding:0 15px !important;
}

.study-filter-wrapper{
  width:100%;
}
.study-filter-label{
   width:100%;
   align-items: left;
}

#studyTagFilter{
  width:100%;
}

/* .flashcard-actions{
  margin:1.25em .25em;
} */

#allowRevisit{
  width:30px;
  height:40px;
}

#studyModeRevisitCheckbox{
  align-items: center;
  flex-direction: row !important;
}

.audio-play-btn{
  padding:5px 20px !important;
}

.session-header{
  border:none;
}

/* #showAnswerBtn{
  padding:13px !important;
} */

#endSessionBtn{
  padding:10px 15px !important;
}

.self-grade-buttons > button{
  padding:10px !important;
}

.badge{
  padding:2px 10px !important;
}

.radio-option > input{
  width:10px;
}

#tab-study .card .study-body{
overflow: auto;
max-width: 100%;
}

#tab-analytics .card,
  #tab-analytics .analytics-header,
  #tab-analytics .stat-card,
  #tab-analytics .stat-bar,
  #tab-analytics .streak-calendar,
  #tab-analytics .calendar-header{
max-width: 100%;
min-width: 0;
}

#tab-analytics .stat-bar .progress{
max-width: none; width: 100%;
}

.row{
flex-wrap: wrap; min-width: 0;
}

.deck-actions-column{
  min-width:110px;
  justify-content: space-around;
}

.setpicker select{
min-width: 0; width: 100%;
}

#tab-study .grid > *,
  #tab-analytics .grid > *,
  #tab-study .card,
  #tab-analytics .card,
  #tab-analytics .analytics-header,
  #tab-analytics .analytics-header > *,
  #tab-study * ,
  #tab-analytics *{
min-width: 0; max-width: 100%;
}


#tab-study h3{
  padding-left:15px;
}
.stat-bar{
gap: 8px;
}

.stat-bar .progress{
flex: 1 1 auto; max-width: none; width: 100%;
}

#tab-study .session-header .row{
flex-wrap: wrap;
}

#tab-study .right.row{
flex: 1 1 auto; justify-content: flex-end;
}

.streak-calendar,
  .calendar-header{
grid-template-columns: repeat(7, minmax(0, 1fr));
}

#tab-analytics .grid,
  #tab-analytics .analytics-header,
  #tab-analytics .metrics-grid,
  #tab-analytics .kpi-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px;
}

#tab-analytics .grid > *,
  #tab-analytics .analytics-header > *,
  #tab-analytics .kpi-grid > *,
  #tab-analytics .metrics-grid > *,
  #tab-analytics .card,
  #tab-analytics .card *{
min-width: 0;
max-width: 100%;
}

#tab-analytics .row{
flex-wrap: wrap; min-width: 0;
}

#tab-analytics .stat-bar{
display: flex; align-items: center; gap: 8px;
}

#tab-analytics .stat-bar .progress{
flex: 1 1 auto; width: 100%; max-width: none;
}

#tab-analytics .streak-calendar,
  #tab-analytics .calendar-header{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

#tab-analytics img,
  #tab-analytics canvas,
  #tab-analytics svg{
max-width: 100%;
height: auto;
}

.deck-tagline{
  text-align: center;
}


}


@supports (height: 100svh){
@media (max-height: 620px) and (max-width: 540px){
.scroll-tabs { margin-top: 6px; }
}
}

@media (min-width:1024px){
.page{
grid-template-columns: 1fr minmax(280px, var(--rail-w));
/* grid-template-columns:minmax(280px, var(--rail-w)) 1fr minmax(280px, var(--rail-w)); */
}

.page.two-col{
/* grid-template-columns: minmax(280px, var(--rail-w)) 1fr minmax(280px, var(--rail-w)); */
grid-template-columns: 1fr minmax(280px, var(--rail-w));
}

.ad-rail{
display:block;
position: sticky;
top: 80px;
height: fit-content;
}

.ad-inline{
display:none;
}
}

@media (prefers-color-scheme: dark){
:root{
--ad-bg:#0f1115; --ad-bd:#23252b;
}

.ad-label{
color:#55575a;
}
}

@media (min-width: 540px){
.ad-slot .ad-box{
aspect-ratio: 3 / 1;
}
}

@media (min-width: 720px){
.ad-sticky{
display:none;
}
}

@keyframes fadeIn{
from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes confetti{
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes spin{
to { transform: rotate(360deg); }
}

@keyframes goalComplete{
0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes pulse{
0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}



/* --- Mobile hamburger nav --- */
.hamburger {
  display: none;
  margin-left: auto;
  width: 40px; height: 34px;
  border: 1px solid var(--line);
  /* background: var(--card); */
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background:var(--nav-background-color-tinted);
  color:var(--nav-font-color);
  border:none;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  /* background: var(--fg); */
  background:var(--nav-font-color);
  margin: 2.5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* container that holds the nav buttons */
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }


/* Small screens: collapse nav to hamburger */
@media (max-width: 640px) {

    .pomo-controls {
    gap: 8px;
  }

  .pomo-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  .hamburger { 
    display: inline-flex; 
    display: flex;
    flex-direction: column;
    padding:0;
  }

  /* stack brand + hamburger; hide links until opened */
  .scroll-tabs {
    align-items: center;
    margin:0;
  }
  .scroll-tabs .nav-links {
    display: none;
    width: 100%;
    margin-top: 10px;
    flex-direction: column;
    gap: 1px;
    margin:10px -10px 10px -10px;
    width:110%;
  }
  /* open state toggled by JS */
  .scroll-tabs.open .nav-links { 
    display: flex;
    border-top:1px solid var(--nav-font-color);
  }

  /* optional: hide the right-side badges row on small screens */
  /* .scroll-tabs .right { display: none; } */
  /* Show the right-side row on small screens (Pomodoro + theme switcher) */
  .scroll-tabs .right {
    display: flex;
      gap: 0;
      margin: auto;

      border-top:1px solid var(--nav-font-color);
      margin:0;
      WIDTH:100%;
      justify-content: space-evenly;
      padding-top:10px;
      margin-top:10px;


    
  }



}

/* nice X animation (optional) */
.scroll-tabs.open .hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.scroll-tabs.open .hamburger span:nth-child(2) { opacity: 0; }
.scroll-tabs.open .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }




#noteEditor{
  color:var(--fg-color);
  background:var(--card-hover);
  border:none;
  border-radius: 5px;
  padding:0;
}

.notes-list {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
  grid-template-columns: 1fr;
  gap: 12px;
}
.note-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.note-card .note-title { font-weight: 600; }
.note-card .note-meta { font-size: .85rem; color: var(--muted); }
.note-card .note-preview { color: var(--text); opacity: .85; max-height: 5.5em; overflow: hidden; }
.note-card .row { justify-content: space-between; align-items: center; }

.note-dialog::backdrop { background: rgba(0,0,0,.45); }
.note-editor {
  min-height: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
}
.note-editor:focus { outline: 2px solid var(--accent); }
.note-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.note-editor h1, .note-editor h2 { margin: .6em 0 .2em; }

/* editor body */
.note-editor {
  border:1px solid var(--line);
  white-space: pre-wrap;   /* keep line breaks */
  word-break: break-word;  /* avoid overflow on long URLs/words */
}

/* === From section-width-normalize.css === */

/* === Section Width Normalization (drop-in override) =======================
   Ensures *all* tab sections render with the same content width, using the
   available viewport width with a sensible max. No HTML changes required.
=========================================================================== */

/* 1) App-wide container (centered). Works for every tab */
:root {
  --page-max: 1200px;      /* adjust if you want a wider/narrower page */
  --page-pad: 16px;
  --gap: 16px;
}

.page > .wrap {
  max-width: min(var(--page-max), 100% - (2 * var(--page-pad)));
  width:100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* 2) Make the first-level child inside any tab fill the width */
.tab-content > .card,
.tab-content > .grid,
.tab-content > .row,
.tab-content > .container {
  width: 100%;
  box-sizing: border-box;
}

/* 3) Normalize cards to expand to container width unless explicitly sized */
.tab-content .card {
  max-width: 100%;
}

/* 4) Deck tab: convert the two cards to a responsive grid that shares space */
#tab-deck .grid {
  display: grid;
  /* grid-template-columns: minmax(280px, 0.45fr) minmax(360px, 1fr); */
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px) {
  #tab-deck .grid {
    grid-template-columns: 1fr;
  }
}

/* 5) Prevent accidental fixed widths from breaking consistency */
.tab-content [style*="width:"],
.tab-content .w-fixed {
  max-width: 100% !important;
}

/* 6) Tables and scroll areas should not force wider layouts */
.table-scroll-sm,
.deck-table-container,
.tab-content .table-scroll,
.tab-content .table-scroll-sm {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

/* 7) Optional: make the analytics header cards wrap nicely on narrow viewports */
.analytics-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 860px) {
  .analytics-header {
    grid-template-columns: 1fr;
  }
}

/* 8) Ensure inputs/controls stretch to fill available space consistently */
.tab-content input[type="text"],
.tab-content input[type="number"],
.tab-content input[type="search"],
.tab-content input:not([type]),
.tab-content select,
.tab-content textarea {
  width: 100%;
  box-sizing: border-box;
}




@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
  /* iPad / tablet styles */

  select{
    height:44px;
  }
  #setPicker{
    margin:30px;
  }
}









/* ==========================
   Import/Export: new workflow layout
   ========================== */
/* 
.import-workflow { padding: 18px; }

.import-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 16px 0;
}

.import-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.import-card-sub {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 12px;
}

.process-row {
  display: flex;
  justify-content: center;
  padding: 16px 0 6px;
}

.process-btn {
  min-width: 180px;
  padding: 10px 18px;
  border-radius: 10px;
}

.process-attn {
  animation: processPulse 1.15s ease-in-out infinite;
}

@keyframes processPulse {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 16px rgba(255,255,255,0.35); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

.import-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .import-two-col { grid-template-columns: 1fr; }
} */
/* =========================================================
   Import/Export (new layout) — scoped + minimal collisions
   Paste at END of styles.css
   ========================================================= */
#tab-import .card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0;
  overflow: hidden;
}

/* Top "Import Cards" look */
#tab-import .stimp-wizard {
  /* padding: 18px 22px 22px; */
  /* padding:40px 30px; */
  padding:30px 30px 40px;
}

#tab-import .stimp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-direction: column;
  align-items: center;
}
/* 
#tab-import .stimp-head h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color:var(--fg);
} */

/* divider line */
#tab-import .stimp-divider {
  border: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.10);
  margin: 0;
}

/* ---------------------------------------------------------
   Stepper (1-2-3 with circles + line)
   --------------------------------------------------------- */
#tab-import .stimp-stepper {
  width: min(680px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
  margin-bottom:2em;
}

#tab-import .stimp-step {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  display: grid;
  justify-items: center;
  gap: 6px;
  /* min-width: 120px; */
  min-width:50px;
}

#tab-import .stimp-dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  /* border: 2px solid rgba(15, 23, 42, 0.18); */
  border:2px solid var(--card-hover);
  /* color: rgba(15, 23, 42, 0.65); */
  color:var(--fg);
  /* background: #fff; */
  background:var(--card);
}

#tab-import .stimp-label {
  font-size: 12px;
  font-weight: 600;
  /* color: rgba(15, 23, 42, 0.65); */
  color:var(--fg);
  white-space: nowrap;
}

#tab-import .stimp-line {
  height: 2px;
  /* background: rgba(15, 23, 42, 0.12); */
  background:var(--hline-fg);
  border-radius: 999px;
}

#tab-import .stimp-step.is-active .stimp-dot {
  background: #1976d2;
  border-color: #1976d2;
  color: #fff;
}

#tab-import .stimp-step.is-active .stimp-label {
  color: #1976d2;
}

.import-table-wrapper{
  max-height: 300px;
  overflow-y: auto;
}

/* ---------------------------------------------------------
   Panels + section titles
   --------------------------------------------------------- */
#tab-import .stimp-panel {
  padding: 0;
}

#tab-import .stimp-panel .muted {
  /* color: rgba(15, 23, 42, 0.65); */
  color:var(--fg);
}

/* Step 1 title "Choose Your Import Source" vibe */
#tab-import .stimp-panel h4 {
  font-size: 1em;
  font-weight: 700;
  /* color: #0f172a; */
  color:var(--fg);
  margin: 0;
}

/* ---------------------------------------------------------
   Dashed bookmarklet box (like screenshot)
   --------------------------------------------------------- */
#tab-import .stimp-bookmarklet-box {
  border: 1.5px dashed rgba(15, 23, 42, 0.25);
  border-radius: 10px;
  /* padding: 14px 16px; */
  padding:40px 20px;
  /* background: rgba(248, 250, 252, 0.5); */
  background:var(--card-hover);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#tab-import .stimp-bookmarklet-box h3 {
  font-size: 1em;
  font-weight: 700;
  margin: 0;
  /* color: rgba(15, 23, 42, 0.80); */
  color:var(--fg);
}

#tab-import .stimp-thin-rule {
  border: 0;
  height: 1px;
  /* background: rgba(15, 23, 42, 0.10); */
  background:var(--card);
  margin: 14px 0;
}

/* ---------------------------------------------------------
   Source grid layout
   (Use two columns; OR separator becomes its own row)
   --------------------------------------------------------- */
#tab-import .stimp-source-grid {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 14px;
  margin-bottom: 30px;
  /* background-color:var(--lightgrey-toggle); */
  padding:0;

}

/* Textarea like screenshot */
#tab-import textarea#uimpPaste {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 12px 12px;
  font-size: 13px;
  line-height: 1.35;
  /* background: #fff; */
  background:var(--card);
  outline: none;
}

#tab-import textarea#uimpPaste:focus {
  border-color: rgba(25, 118, 210, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.14);
}

/* OR separator line */
#tab-import .stimp-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  /* color: rgba(15, 23, 42, 0.65); */
  color: var(--fg);
  font-weight: 700;
  font-size: 12px;

  font-size: 1.1em;
  margin:2em 0;
}

#tab-import .stimp-or-line {
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
}

#tab-import .stimp-or-text {
  letter-spacing: 0.06em;
}

/* Bottom file/drive buttons side-by-side */
#tab-import .stimp-right {
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color:var(--card-hover);
  border:1px dashed rgba(15,23,42,.25);
  border-radius:15px;
}

/* ---------------------------------------------------------
   Buttons (scoped so only Import tab changes)
   --------------------------------------------------------- */
#tab-import .stimp-wizard .btn {
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}

#tab-import .stimp-wizard .btn.btn-primary {
  background: #1976d2;
  border-color: #1976d2;
  color: #fff;
}

#tab-import .stimp-wizard .btn.btn-primary:hover {
  filter: brightness(0.97);
}

#tab-import .stimp-wizard .btn.btn-secondary {
  /* background: #fff; */
  background:var(--card-hover);
  border-color: rgba(15, 23, 42, 0.18);
  border-color:var(--card-hover);
  /* color: rgba(15, 23, 42, 0.85); */
  color:var(--fg);
}

#tab-import .stimp-wizard .btn.btn-secondary:hover {
  /* background: rgba(248, 250, 252, 0.8); */
  background:var(--card);
}

/* Bookmarklet "Add Bookmarklet" button slightly smaller */
#tab-import #bmDragBtn.btn {
  padding: 11px 14px;
}

/* Google Drive button icon alignment */
#tab-import .googledrive-btn-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#tab-import .googledrive-btn-logo img {
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* ---------------------------------------------------------
   Footer nav (Continue button aligned right)
   --------------------------------------------------------- */
#tab-import .stimp-nav {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 6px;
}

#tab-import #importNextToStep2.btn,
#tab-import #importNextToStep3.btn {
  padding: 12px 18px;
  border-radius: 8px;
}

/* Optional arrow on Continue (if you add it as text/icon) */
#tab-import .stimp-nav .btn::after {
  content: "";
}

/* ---------------------------------------------------------
   Step 2 form layout (if/when you show it)
   --------------------------------------------------------- */
#tab-import .stimp-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#tab-import .stimp-field > span {
  font-size: 12px;
  font-weight: 700;
  color:var(--fg);
  /* color: rgba(15, 23, 42, 0.75); */
}

#tab-import .stimp-field select,
#tab-import .stimp-field input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
  /* background: #fff; */
  background:var(--card-hover);
}

#tab-import .stimp-field select:focus,
#tab-import .stimp-field input:focus {
  border-color: rgba(25, 118, 210, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.14);
}

#tab-import .stimp-parse {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}


.step-one-bk-left{
  display: flex;
  flex-direction: column;
  
}


.hr-import-spacer{
  margin-block: 3em;
  color:var(--hline-fg);
}


.card-note-editor{
  padding:0;
  border:1px solid var(--header-accent);
}

.note-editor-dialog-header{
  padding:8px 20px;
  background-color:var(--header-accent);
  color:var(--header-accent-fg-color);
}
.note-editor-dialog-body{
  padding:20px;
}


/* ---------------------------------------------------------
   Responsive tweaks
   --------------------------------------------------------- */
@media (max-width: 900px) {
  #tab-import .stimp-head {
    flex-direction: column;
    align-items: stretch;
  }

  #tab-import .stimp-stepper {
    grid-template-columns: auto 1fr auto 1fr auto;
    width: 100%;
  }

  #tab-import .stimp-right {
    grid-template-columns: 1fr;
    padding:15px;
  }

  #tab-import .stimp-config-grid {
    grid-template-columns: 1fr;
  }

  .step-one-bk-left{
    width:100%;
  }

  #tab-import .stimp-bookmarklet-box{
    flex-direction: column;
  }

  #tab-import .stimp-source-grid{
     grid-template-columns: repeat(auto-fill,minmax(50%,1fr));
  }
}


/* iPAD */
/* iPad / iPadOS Safari (including iPad Pro, even with trackpad) */

/* Portrait: iPad Mini, Air, Standard, and some Pros */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    /* Insert iPad Portrait Styles Here */
     .study-actions-gradeButtons { height: 120px; touch-action: manipulation;}
    .flashcard-actions { height: 120px; touch-action: manipulation;}

}

/* Landscape: iPad Mini, Air, Standard, and some Pros */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    /* Insert iPad Landscape Styles Here */
     .study-actions-gradeButtons { height: 120px; touch-action: manipulation;}
    .flashcard-actions { height: 120px; touch-action: manipulation;}

}

/* Specific for 11-inch and 12.9-inch iPad Pro (Higher Resolution) */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    /* Insert iPad Pro 11"/12.9" Portrait Styles */
     .study-actions-gradeButtons { height: 120px; touch-action: manipulation;}
    .flashcard-actions { height: 120px; touch-action: manipulation;}

}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    /* Insert iPad Pro 11"/12.9" Landscape Styles */
     .study-actions-gradeButtons { height: 120px; touch-action: manipulation;}
    .flashcard-actions { height: 120px; touch-action: manipulation;}

}