:root{
  --bg:#0f1217;
  --panel:#151a22;
  --panel2:#11161f;
  --border:#2b3140;
  --text:#eaeef7;
  --muted:#b7c0d4;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:18px;overflow-x:hidden}

.top{display:flex;flex-direction:column;gap:10px}
.titleRow{display:flex;justify-content:flex-start;align-items:flex-end;gap:12px;flex-wrap:wrap;position:relative}
.titleRow h1{flex:1 1 auto; min-width:280px;}
h1{margin:0;font-size:28px}
.mini{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

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

/* Right-side tab controls (e.g., Learned List/Study toggle) */
.tabsRight{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Smaller tab buttons */
.tab.tiny{padding:6px 10px;font-size:12px;opacity:0.95}
.tab{
  border-radius:12px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);padding:10px 12px;cursor:pointer;
}
.tab.active{background:var(--panel);outline:1px solid #3a4256}

.counts{font-size:13px;color:var(--muted)}

.countsControlsRow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-right:10%;margin-bottom:0}
.countsControlsRow .field span{display:none}
.countsControlsRow .groupDropdown .select{padding:7px 9px;font-size:12px}
.countsControlsRow #allCardsBtn{padding:7px 9px;font-size:12px}
.countsControlsRow .searchToggleBtn{padding:7px 9px;font-size:12px}

.controls{display:flex;gap:8px;align-items:center}
.leftControls{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;flex:1;min-width:0}

.field{display:flex;flex-direction:column;gap:6px}
.field span{color:var(--muted);font-size:12px}

select,button,input{
  border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);padding:10px 12px;
}
input{background:var(--panel2);min-width:280px}

/* Custom dark dropdown for Study / Group (avoids native white option list on Windows) */
.hiddenSelect{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.groupDropdown{position:relative;width:170px}
.groupDropdown .select{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between}
.groupDropdown .select::after{content:"▾";color:var(--muted);font-size:12px;margin-left:10px}
.dropdownMenu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:6px;max-height:260px;overflow:auto;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.dropdownMenu.hidden{display:none}
.dropdownItem{padding:10px 10px;border-radius:10px;color:var(--text);cursor:pointer;user-select:none}
.dropdownItem:hover{background:rgba(255,255,255,.06)}
.dropdownItem.muted{color:var(--muted)}
.dropdownItem.selected{background:rgba(255,255,255,.08)}

button{cursor:pointer}
button.secondary{background:var(--panel2)}
button.good{background:#12311f;border-color:#1d5a35}
button.danger{background:#321313;border-color:#6e2222}

.status{color:var(--muted);font-size:13px}
.statusInMeta{color:var(--muted);font-size:12px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{margin-top:4px}
.view.hidden{display:none}

.cardMeta{position:relative;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:2px 0 6px}

#cardPos{flex:1;text-align:center}
.cardMeta .statusInMeta{flex:1}
.cardMeta .randomRow{flex:1;justify-content:flex-end}

/* Study view indented column */
#viewStudy{padding:0 10%}

/* Portrait/mobile: let study content use the full width (requested) */
@media (max-width: 600px){
  #viewStudy{ padding: 0; }
}

/* Flip styles: fixed mirrored text */
.card{
  border-radius:20px;border:1px solid var(--border);
  background:var(--panel);display:grid;place-items:center;
  perspective:1200px;outline:none;
  padding:12px 0;
}

.card-inner{
  width:92%;
  position:relative;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .22s ease;
  will-change: transform;
}

.card.flipped .card-inner{
  transform: rotateY(180deg);
}

.card-face{
  position:absolute;inset:0;
  padding:18px;
  display:flex;flex-direction:column;gap:10px;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transform: rotateY(0deg);
}

.card-face.back{
  transform: rotateY(180deg);
}

.pill{
  display:inline-block;width:fit-content;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);font-size:13px;color:var(--muted);
}
.big{font-size:34px;line-height:1.12}
.small{color:var(--muted);font-size:14px}

/* Extra info shown on the definition side of study cards (breakdown + literal meaning) */
.defExtras{margin-top:14px;font-size:13px;line-height:1.45;color:var(--muted)}
.defExtras .label{font-weight:600;color:var(--text);opacity:0.9;margin-top:6px}
.defExtras .value{margin-top:4px}
.defExtras .parts{margin-top:4px}
.defExtras .parts span{white-space:nowrap}
.defExtras .sep{opacity:0.7;margin:0 6px}
.hint{margin-top:auto;color:var(--muted);font-size:13px}

.actionsRow{display:flex;gap:10px;margin-top:14px;justify-content:center;flex-wrap:wrap}

.listHeader{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bulkBtns{display:flex;gap:8px;flex-wrap:wrap}

.list{display:grid;gap:10px;margin-top:12px}
.item{
  border:1px solid var(--border);background:var(--panel);
  border-radius:16px;padding:12px;display:flex;justify-content:space-between;
  gap:12px;align-items:flex-start;
}
.itemLeft{display:flex;gap:10px;align-items:flex-start}
.item b{font-size:16px}
.item small{color:var(--muted);display:block;margin-top:4px;line-height:1.35}
.defText{ text-decoration: underline; }
.itemRight{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.chk{margin-top:4px;transform:scale(1.15)}

.settingsBox{
  border:1px solid var(--border);background:var(--panel);
  border-radius:16px;padding:14px;margin-top:10px;
}
.settingsGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px;margin-top:10px;
}
.toggle{display:flex;gap:10px;align-items:center;background:var(--panel2);padding:10px 12px;border-radius:12px;border:1px solid var(--border)}
.toggle input{transform:scale(1.1)}


/* ---- Compact, clearer settings UI ---- */
.settingsBox.compact{
  max-width: 760px;
  margin: 10px auto 0;
  padding: 14px;
}

.settingsTop{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}

.settingsSectionTitle{
  margin-top:14px;
  margin-bottom:8px;
  font-size:13px;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.settingRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
  user-select:none;
}

.settingRow input{
  margin-top: 3px;
  transform: scale(1.15);
}

.settingText{display:flex;flex-direction:column;gap:3px}
.settingTitle{font-weight:600}
.settingDesc{font-size:12px;color:var(--muted);line-height:1.35}

.settingSelect{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
}

.helpText{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  line-height:1.3;
}


/* ---- User line / auth modal ---- */
#userLine{ margin-left:auto; }
.settingsBtnHeader{
  padding: 6px 10px;
  font-size: 14px;
  margin-left: 6px;
  flex-shrink: 0;
  border-radius: 10px;
}

/* ---- Search icon toggle ---- */
.searchToggleBtn{
  padding: 8px 10px;
  font-size: 14px;
  flex-shrink: 0;
}
/* Default: search icon visible, text box hidden (expands on click) */
.searchWrapper .searchInput{ display: none; }
.searchWrapper .searchToggleBtn{ display: inline-flex; }
.searchWrapper.expanded .searchInput{ display: block; }
.searchWrapper.expanded .searchClearBtn{ z-index: 51; }
.searchWrapper.expanded .searchToggleBtn{ opacity: 0.3; }
.searchInput{ min-width: 0 !important; }

.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  padding:16px;
  z-index:9999;
  overflow:auto;
  overscroll-behavior:contain;
}

.modalOverlay.hidden{display:none}

body.modalLock{ overflow:hidden; }

.modalCard{
  width:min(520px, 96vw);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  max-height: calc(100vh - 32px);
  overflow:auto;
}

.modalTitle{ margin:0 0 8px 0; font-size:20px; }
.modalText{ color:var(--muted); font-size:13px; line-height:1.4; margin:6px 0 10px 0; }
.modalBtns{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:10px; }
.modalForm{ display:grid; gap:10px; margin-top:8px; }
.modalToggle{ background:transparent; border:none; padding:0; }
.modalFinePrint{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.35; }

/* Divider for auth modal */
.modalDivider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 6px 0;
  color:var(--muted);
  font-size:12px;
}
.modalDivider::before,
.modalDivider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

/* Make modal inputs full width */
.modalForm input{
  min-width:100%;
}

/* Range input styling */
.rangeInput{
  width:100%;
  height:8px;
  border-radius:4px;
  background:var(--panel2);
  border:1px solid var(--border);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.rangeInput::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#1d5a35;
  border:2px solid #2a7a4a;
  cursor:pointer;
}
.rangeInput::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#1d5a35;
  border:2px solid #2a7a4a;
  cursor:pointer;
}


.hidden{display:none !important}


/* ---- Current tab highlight ---- */
.tabs button.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.tab.small{
  padding:6px 8px;
  font-size:0.85em;
  border-radius:10px;
}
.itemActions{
  display:flex;
  gap:8px;
  align-items:center;
}
.mini{
  padding:6px 8px;
  font-size:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
}
.mini.good{ border-color: rgba(22,163,74,.45); }
.mini.warn{ border-color: rgba(99,102,241,.45); }
.mini.neutral{ border-color: rgba(148,163,184,.35); }




/* Highlight which study filter is active (All Cards vs Selected Group) */
.filterActive{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}


/* Selection checkboxes are disabled */
.chk{ display:none !important; }


.modalCardWide{
  width:min(920px, 98vw);
}

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

.breakdownGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:8px;
}

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

.breakdownRow{
  display:grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap:8px;
  align-items:center;
  margin:8px 0;
}

.textarea{
  width:100%;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  resize:vertical;
}

.miniToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}

.tinyBtn{
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

.breakdownsList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 62vh;
  overflow:auto;
  padding-right:4px;
}

.breakdownListItem{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
}

.breakdownListItem:hover{
  outline:1px solid #3a4256;
}

.breakdownListItem .bTitle{
  font-weight:700;
  margin-bottom:4px;
}

.input{width:100%; border:1px solid var(--border); background:var(--panel2); color:var(--text); border-radius:12px; padding:10px 12px;}


/* Random order toggle + refresh */
.randomRow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.randomText{white-space:nowrap}
.iconBtn{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:14px;line-height:1}
.iconBtn:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.iconOnly{padding:8px 10px;min-width:auto}

/* iOS-style switch */
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2b3140;transition:.2s;border-radius:999px;border:1px solid var(--border)}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:2px;background:var(--text);transition:.2s;border-radius:999px}
.switch input:checked + .slider{background:#1f6feb}
.switch input:checked + .slider:before{transform:translateX(20px)}


/* Study header right-side toggles */
#randomStudyWrap{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
#randomStudyWrap .switch{
  transform: scale(0.82);
  transform-origin: center right;
}
.breakdownStudyChk{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:var(--muted);
  font-size:13px;
}
.breakdownStudyChk input{
  width:14px;
  height:14px;
  accent-color:#1f6feb;
}


/* Disabled button */
.btn:disabled, button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(35%);
}


/* Smaller toggle for compact UI */
.switch.small{width:34px;height:18px}
.switch.small .slider:before{height:14px;width:14px;left:2px;bottom:1px}
.switch.small input:checked + .slider:before{transform:translateX(16px)}

.studyUnderStatus{display:flex;justify-content:flex-start;margin-top:6px}
.studyUnderStatus.hidden{display:none}

.settingRow.disabled{opacity:.55;cursor:not-allowed}
.settingRow.disabled *{pointer-events:none}

.settingRow .switch{margin-top:2px;flex:0 0 auto}

/* User menu dropdown */
.userMenu{
  position: absolute;
  right: 18px;
  top: 58px;
  min-width: 220px;
  z-index: 999;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.userMenu.hidden{ display: none; }
.userMenuRow{ padding: 6px 6px; }
.userMenuLink{
  display: block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.03);
}
.userMenuLink:hover{ background: rgba(255,255,255,0.08); }
.mutedSmall{ opacity: 0.85; font-size: 12px; }
#userLine{ cursor: pointer; user-select: none; }
#userLine:focus{ outline: 2px solid rgba(255,255,255,0.18); outline-offset: 2px; border-radius: 10px; }
.userMenuAction{
  display: block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  color: inherit;
  background: rgba(255,255,255,0.03);
}
.userMenuAction:hover{ background: rgba(255,255,255,0.08); }
.userMenuDivider{
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 8px 0;
}
.userBtn{
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);

  margin-left:12px;
}

/* App-like buttons */
.appBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.appBtn.primary{
  background: linear-gradient(135deg, #1f6feb 0%, #1a5cc7 100%);
  color: #fff;
}
.appBtn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(31, 111, 235, 0.4);
}
.appBtn.success{
  background: linear-gradient(135deg, #166534 0%, #14532d 100%);
  color: #fff;
}
.appBtn.success:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(22, 101, 52, 0.4);
}
.appBtn.danger{
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  color: #fff;
}
.appBtn.danger:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(153, 27, 27, 0.4);
}
.appBtn.secondary{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.appBtn.secondary:hover{
  background: rgba(255,255,255,0.12);
}
.appBtn.fullWidth{
  width: 100%;
}

/* Settings page redesign */
.settingsPage h2{
  margin: 0 0 16px 0;
  font-size: 24px;
}
.settingsNav{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.settingsNavBtn{
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.settingsNavBtn:hover{
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.settingsNavBtn.active{
  background: linear-gradient(135deg, #1f6feb 0%, #1a5cc7 100%);
  color: #fff;
  border-color: #1f6feb;
}
.settingsSection{
  display: none;
}
.settingsSection.active{
  display: block;
}
.settingsCard{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.settingsCardHeader{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settingsBtnRow{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.settingsBottomActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Sync page styles */
.syncCard{
  background: rgba(255,255,255,0.02);
}
.loginStatusBanner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.3) 0%, rgba(20, 83, 45, 0.2) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
}
.loginStatusBanner .statusIcon{
  font-size: 24px;
  color: #4ade80;
}
.loginStatusBanner .statusTitle{
  font-weight: 600;
  color: #fff;
}
.loginStatusBanner .statusSub{
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.loginStatusBanner.loggedOut{
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.3) 0%, rgba(127, 29, 29, 0.2) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}
.loginStatusBanner.loggedOut .statusIcon{
  color: #f87171;
}
.syncLastTime{
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 16px 0;
}
.syncInfoBox{
  background: rgba(31, 111, 235, 0.1);
  border: 1px solid rgba(31, 111, 235, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.syncInfoTitle{
  font-weight: 600;
  color: #5ca5ff;
  margin-bottom: 8px;
}
.syncInfoList{
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}
.syncSection{
  margin-bottom: 16px;
}
.syncSectionTitle{
  font-weight: 600;
  margin-bottom: 8px;
}
.syncDivider{
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 20px 0;
}
.syncStatus{
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}
.syncStatus.success{
  display: block;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.syncStatus.error{
  display: block;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* AI status grid */
.aiStatusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.aiStatusItem{
  background: rgba(0,0,0,0.2);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.aiStatusLabel{
  color: var(--muted);
  font-size: 13px;
}
.aiStatusValue{
  font-weight: 500;
}
.aiStatusValue.active{
  color: #4ade80;
}
.aiStatusValue.inactive{
  color: #f87171;
}

/* Star button */
.starBtn{
  font-size: 18px;
  min-width: 44px;
}
.starBtn.starred{
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

/* List controls */
.listHeader{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.listControls{
  display: flex;
  gap: 12px;
  align-items: end;
}
.field.small span{
  font-size: 11px;
}
.field.small select{
  padding: 8px 10px;
  font-size: 13px;
}

/* Item star button in list */
.itemStar{
  font-size: 16px;
  padding: 6px 10px;
  min-width: 36px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
}
.itemStar.starred{
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

/* ========================================
   EDIT DECKS PAGE
   ======================================== */

.settingsQuickAction{
  margin-bottom: 16px;
}

.editDecksPage{
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
.editDecksHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.editDecksHeader h2{
  margin: 0;
  font-size: 20px;
}

/* Edit Decks Tabs */
.editDecksTabs{
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--panel2);
  padding: 4px;
  border-radius: 12px;
}
.editDecksTab{
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.editDecksTab:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.editDecksTab.active{
  background: linear-gradient(135deg, #1f6feb 0%, #1a5cc7 100%);
  color: white;
}

.editDecksStatus{
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}
.editDecksStatus.success{
  display: block;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.editDecksStatus.error{
  display: block;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.editDecksStatus.info{
  display: block;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.editDecksSection{
  display: none;
}
.editDecksSection.active{
  display: block;
}

/* Current Deck Banner */
.currentDeckBanner{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #166534 0%, #14532d 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}
.currentDeckIcon{
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.currentDeckInfo{
  flex: 1;
}
.currentDeckName{
  font-weight: 600;
  font-size: 16px;
}
.currentDeckCount{
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

/* Decks List */
.decksList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deckItem{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.deckItem:hover{
  background: rgba(255,255,255,0.05);
}
.deckItem.active{
  border-color: #1f6feb;
  background: rgba(31, 111, 235, 0.1);
}
.deckRadio{
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deckMiniLogo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.deckItem.active .deckRadio{
  border-color: #1f6feb;
  background: #1f6feb;
}
.deckItem.active .deckRadio::after{
  content: "";
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}
.deckInfo{
  flex: 1;
}
.deckName{
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.deckBadge{
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--muted);
}
.deckBadge.default{
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.deckBadge.builtin{
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.deckBadge.unlocked{
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.deckClearDefaultBtn{
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.deckDesc{
  font-size: 12px;
  color: var(--muted);
}
.deckCount{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.deckActions{
  display: flex;
  gap: 8px;
}
.deckDeleteBtn{
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.deckDeleteBtn:hover{
  background: rgba(239, 68, 68, 0.2);
}

/* Create Deck Form */
.createDeckForm{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--panel2);
  border-radius: 10px;
}

/* Invite Code Form */
.inviteCodeForm{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
}

/* Add Card Form */
.addCardForm{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inputWithBtn{
  display: flex;
  gap: 8px;
}
.inputWithBtn input{
  flex: 1;
}
.appBtn.small{
  padding: 8px 12px;
  font-size: 14px;
}

/* AI Dropdown */
.aiDropdown{
  margin-top: 8px;
  padding: 12px;
  background: var(--panel2);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.aiDropdown.hidden{
  display: none;
}
.aiDropdownTitle{
  font-size: 11px;
  color: #60a5fa;
  margin-bottom: 8px;
  font-weight: 500;
}
.aiDropdownList{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aiOption{
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.aiOption:hover{
  background: rgba(59, 130, 246, 0.2);
}
.aiLoading{
  text-align: center;
  padding: 12px;
  color: var(--muted);
}

/* User Cards List */
.userCardsList{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.userCardsList.hidden{
  display: none;
}
.userCardItem{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel2);
  border-radius: 8px;
}
.userCardInfo{
  flex: 1;
}
.userCardTerm{
  font-weight: 600;
}
.userCardMeaning{
  font-size: 12px;
  color: var(--muted);
}
.userCardActions{
  display: flex;
  gap: 6px;
}
.userCardActions button{
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.userCardActions button:hover{
  background: rgba(255,255,255,0.05);
}
.userCardActions button.delete{
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}
.userCardActions button.delete:hover{
  background: rgba(239, 68, 68, 0.2);
}

/* Deleted Cards */
.deletedSearchRow{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.deletedSearchRow input{
  flex: 1;
}
.deletedCount{
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.deletedCardsList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deletedCardItem{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel2);
  border-radius: 8px;
}
.deletedCardInfo{
  flex: 1;
}
.deletedCardTerm{
  font-weight: 600;
}
.deletedCardMeaning{
  font-size: 12px;
  color: var(--muted);
}
.restoreBtn{
  padding: 8px 16px;
  background: linear-gradient(135deg, #166534 0%, #14532d 100%);
  border: none;
  color: white;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.restoreBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.3);
}
.emptyState{
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.emptyState .icon{
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ========================================
   SEARCH CLEAR BUTTON
   ======================================== */
.searchWrapper{
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.searchWrapper .searchInput{
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  z-index: 50;
  padding-right: 32px;
  border-radius: 12px;
}
.searchClearBtn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}
.searchClearBtn:hover{
  background: rgba(255,255,255,0.1);
  color: var(--text);
}
.searchClearBtn.hidden{
  display: none;
}

/* AI Generator Styles */
.genMethodTabs{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.genMethodTab{
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.genMethodTab:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.genMethodTab.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.genMethodSection{
  padding: 16px 0;
}
.genMethodSection.hidden{
  display: none;
}
.uploadZone{
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}
.uploadZone:hover{
  border-color: var(--accent);
  background: rgba(31, 111, 235, 0.05);
}
.uploadZone.dragover{
  border-color: var(--accent);
  background: rgba(31, 111, 235, 0.1);
}
.uploadIcon{
  font-size: 48px;
  margin-bottom: 12px;
}
.uploadText{
  color: var(--text);
  font-size: 14px;
}
.uploadSubtext{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.uploadPreview{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  margin-bottom: 16px;
}
.uploadPreview.hidden{
  display: none;
}
.uploadPreview img{
  max-width: 100px;
  max-height: 80px;
  border-radius: 6px;
  object-fit: cover;
}
.docFileName{
  color: var(--text);
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AI Generator action row (Generate / Cancel / Preview All) */
.aiGenActionRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px; /* prevents touching the box above */
}
.aiGenActionRight{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Reduce Generate button size ~25% compared to default small */
.aiGenGenerateBtn{
  transform: scale(0.75);
  transform-origin: left center;
}
/* Keep layout stable even with scaled button */
.aiGenActionRow .aiGenGenerateBtn{
  margin-left:-8px;
}
.aiGenFormatRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}

.aiGenLoading{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  justify-content: center;
  color: var(--muted);
}
.aiGenLoading.hidden{
  display: none;
}
.aiGenLoading .spinner{
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}
.aiWarning{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 13px;
  margin: 12px 0;
}
.aiWarning.hidden{
  display: none;
}
.aiWarning a{
  color: #5ca5ff;
}
.aiGenResults{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.aiGenResults.hidden{
  display: none;
}
.aiGenResultsCount{
  font-weight: normal;
  color: var(--muted);
  font-size: 13px;
}
.aiGenSelectActions{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.aiGenResultsList{
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.aiGenResultItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.aiGenResultItem:hover{
  background: rgba(0,0,0,0.3);
}
.aiGenResultItem.selected{
  background: rgba(31, 111, 235, 0.15);
  border-color: var(--accent);
}
.aiGenResultItem input[type="checkbox"]{
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.aiGenResultInfo{
  flex: 1;
  min-width: 0;
}
.aiGenResultTerm{
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.aiGenResultDef{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.aiGenResultMeta{
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.aiGenResultGroup{
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--muted);
}
.aiGenResultPron{
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.aiGenAddSection{
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.aiGenAddSection .field{
  flex: 1;
  min-width: 200px;
}
.aiGenDeckInfo{color:var(--muted);font-size:13px;margin-bottom:12px;}.aiGenDeckInfo strong{color:var(--accent);}
.userMenuLogout{color:#f87171;border-top:1px solid var(--border);margin-top:4px;padding-top:8px;}

/* Deck switch button and active label */
.deckSwitchBtn{padding:4px 12px !important;font-size:12px !important;}
.deckActiveLabel{color:#22c55e;font-size:12px;font-weight:600;}
.deckActions{display:flex;gap:8px;align-items:center;}


/* Header deck title - main definition moved to mobile responsive section */
.appTitle{font-weight:700;}


/* Set default deck button */
.deckDefaultBtn{background:transparent;border:1px solid #666;color:#888;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:14px;}
.deckDefaultBtn:hover{background:rgba(234,179,8,0.2);border-color:#eab308;color:#eab308;}


/* Breakdown indicator */
.breakdownIndicator { transition: all 0.3s ease; }
.breakdownIndicator.has-breakdown { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; color: #fff !important; border-color: #3b82f6 !important; }
.breakdownIndicator.has-breakdown:hover { box-shadow: 0 0 12px rgba(59, 130, 246, 0.5); }


/* Custom Set Settings — Full Page View */
.csPage { padding: 16px; max-width: 800px; margin: 0 auto; }
.csPageHeader { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.csPageHeader h2 { margin: 0; font-size: 20px; white-space: nowrap; }
.csPageHeader .appBtn { margin-left: auto; flex-shrink: 0; }
.csCurrentSetName { font-size: 12px; color: #888; background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 4px; margin-right: auto; margin-left: 12px; }
.customSetTabs { display: flex; gap: 4px; margin-bottom: 16px; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 8px; }
.csTab { padding: 8px 16px; border-radius: 6px; cursor: pointer; background: transparent; border: none; color: #888; font-size: 13px; transition: all 0.2s; flex: 1; }
.csTab:hover { background: rgba(255,255,255,0.05); color: #ccc; }
.csTab.active { background: linear-gradient(135deg, #1f6feb 0%, #1d4ed8 100%); color: #fff; }
.csTabBody { min-height: 200px; }
.csTabContent { display: none; }
.csTabContent.active { display: block; animation: fadeIn 0.2s ease; }

/* Settings Tab */
.csRandomPickRow { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.csRandomPickRow button { white-space: nowrap; font-size: 12px; }
.csRandomInput { width: 52px; text-align: center; padding: 6px 2px; font-size: 13px;  min-width: auto !important; }

/* Manage Cards Tab */
/*
  The Manage Cards panes are intentionally stacked vertically across ALL viewports
  (desktop + mobile). Each pane is an accordion section (only one expanded at a time).
*/
.csManageSplit { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.csManagePane {
  /* Slightly narrower with bigger side gutters (matches mobile "Edit Decks" feel) */
  width: auto;
  flex: 0 0 auto;
  margin: 0 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  min-width: 0;
}
.csPaneHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.csPaneTitle { font-weight: 600; color: #fff; font-size: 13px; }
.csPaneCount { font-size: 11px; color: #888; background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 10px; }
.csPaneSearch { margin-bottom: 8px; }
.csSearchInput { width: 100%; padding: 6px 10px; font-size: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff;   min-width: 0 !important;
}
.csSearchInput:focus { outline: none; border-color: #1f6feb; }
.csCardList { height: clamp(320px, 52vh, 520px); overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 6px; margin-bottom: 10px; }
/* Card rows: checkbox on LEFT, status badge on RIGHT, text wraps and grows in height if needed */
.csCardItem { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 5px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: all 0.15s; }
.csCardItem:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
.csCardItem.selected { background: rgba(31, 111, 235, 0.2); border-color: rgba(31, 111, 235, 0.4); }
.csCardItem input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.csCardItem .cardInfo { flex: 1; min-width: 0; padding-right: 8px; }
.csCardItem .cardTerm { font-weight: 600; color: #fff; font-size: 12px; white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; }
.csCardItem .cardMeaning { color: #888; font-size: 11px; white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; margin-top: 2px; }
.csCardItem .cardStatus { font-size: 9px; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
.csCardItem .cardStatus.learned { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.csCardItem .cardStatus.unsure { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
.csPaneActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.csPaneActions button{ font-size: 13px; padding: 6px 10px; }
.csPaneActions .appBtn.small{ font-size: 13px; padding: 6px 10px; }
.csBackBtn{ font-size: 12px; padding: 6px 10px; }

/* In-Set actions: responsive layout */
.csPaneActionsInSet{ width: 100%; }
.csBtnRemove .btnIcon{ margin-right: 6px; }

@media (max-width: 600px) and (orientation: portrait){
  /* 2-row layout: [Select All | Set Learned | Set Unsure] then [Clear All | (blank) | Remove] */
  .csPaneActionsInSet{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "select learned unsure"
      "clear . remove";
    align-items: stretch;
  }
  .csPaneActionsInSet .csBtnSelectAll{ grid-area: select; }
  .csPaneActionsInSet .csBtnLearned{ grid-area: learned; }
  .csPaneActionsInSet .csBtnUnsure{ grid-area: unsure; }
  .csPaneActionsInSet .csBtnClearAll{ grid-area: clear; }
  .csPaneActionsInSet .csBtnRemove{ grid-area: remove; justify-self: end; width: 100%; }
  .csPaneActionsInSet button{ width: 100%; }  .csPaneActionsInSet .csBtnClearAll,
  .csPaneActionsInSet .csBtnRemove{ width: auto !important; justify-self: start; }
  .csPaneActionsInSet .csBtnRemove{ justify-self: end; }

}

@media (max-width: 380px){
  /* If space is tight, Remove can be icon-only */
  .csBtnRemove .btnLabel{ display:none; }
  .csBtnRemove .btnIcon{ margin-right: 0; }
}

@media (max-width: 1024px) and (orientation: landscape){
  /* Mobile landscape: slightly narrower panes + taller list to show ~4 items */
  .csManagePane{ max-width: 85%; margin-left: auto; margin-right: auto; }
  /* Bump height so ~4 cards are visible while scrolling on typical phones */
  .csCardList{ height: clamp(300px, 84vh, 680px); }
}
.csPaneActions .pushRight { margin-left: auto; }
/* .csBulkBar removed: bulk buttons now live inside the In-Custom-Set action row */
.csEmptyState { text-align: center; color: #666; padding: 30px 10px; font-size: 12px; }

/* Saved Sets Tab */
.csSaveRow { display: flex; gap: 8px; margin-top: 12px; }
.csSaveInput { flex: 1; padding: 8px 12px;   min-width: 0 !important;
}
.csSavedList { max-height: 200px; overflow-y: auto; }
.csSavedItem { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.05); }
.csSavedItem.active { border-color: #1f6feb; background: rgba(31, 111, 235, 0.1); }
.csSavedItem .setInfo { flex: 1; }
.csSavedItem .setName { font-weight: 600; color: #fff; font-size: 14px; }
.csSavedItem .setMeta { font-size: 11px; color: #888; margin-top: 2px; }
.csSavedItem .setActions { display: flex; gap: 6px; }
.csSetInfo { margin-top: 12px; padding: 12px; background: rgba(59, 130, 246, 0.1); border-radius: 8px; border: 1px solid rgba(59, 130, 246, 0.2); }
.csInfoText { font-size: 12px; color: #60a5fa; }


/* ===== Deck Logo (header) ===== */
.deckLogoWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  position: relative;
  flex-shrink: 0;
}

/* Fixed position - no transform jumping */
.deckLogoWrap img{
  transform: none;
}

.deckLogoImg{
  width: 83px;
  height: 83px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* ===== Deck Title truncation ===== */
.deckTitle{
  font-weight:400;
  color:#5ca5ff;
  font-size:0.7em;
  opacity:0.9;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.deckTitle:before{content:"• ";color:#666;}

/* ===== File input tuning ===== */
.fileInput{
  padding: 10px 12px;
}


.loginVersionCorner{ position:absolute; top:12px; right:16px; font-size:12px; color:#9ca3af; opacity:0.9; }


/* ===============================================
   MOBILE RESPONSIVENESS
   =============================================== */

/* Tablet breakpoint */
@media (max-width: 900px) {
  .wrap { padding: 12px; }
  h1 { font-size: 24px; }
  .titleRow h1 { min-width: 200px; }
  .deckTitle { max-width: 140px; }
  .deckLogoImg { width: 70px; height: 70px; }
  
  .controls { gap: 10px; }
  .searchWrapper { flex: 1; }
  .searchWrapper .searchInput { min-width: 200px; }
  
  .big { font-size: 28px; }
  
  /* Admin Edit User modal */
  .modal-card { max-width: 95vw; max-height: 85vh; }
  .deck-access-grid { flex-direction: column; gap: 12px; }
  .deck-access-col { min-width: 100%; }
  .deckAccessList { max-height: 150px; }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .wrap { padding: 10px; }
  h1 { font-size: 20px; }
  .titleRow { flex-wrap: wrap; gap: 8px; align-items: center; }
  .titleRow h1 { min-width: auto; width: 100%; }
  /* Keep user line + settings on one row */
  #userLine { margin-left: 0; }
  .settingsBtnHeader { margin-left: 4px; }
  
  /* Deck logo inline on mobile */
  .deckLogoWrap { 
    margin-left: 0;
    order: 0;
  }
  .deckLogoImg { width: 45px; height: 45px; }
  .deckTitle { max-width: 120px; font-size: 0.6em; }
  
  .tabs { gap: 4px; flex-wrap: wrap; }
  .tab { padding: 8px 10px; font-size: 13px; }
  .tab.small { padding: 6px 8px; font-size: 12px; }
  .tab.tiny { padding: 4px 8px; font-size: 11px; }
  .tabsRight { margin-left: 0; margin-top: 6px; width: 100%; }
  
  .counts { font-size: 12px; }
  
  /* === COMPACT CONTROLS FOR PORTRAIT === */
  .controls { 
    flex-direction: row; 
    flex-wrap: nowrap;
    gap: 6px; 
    align-items: center;
  }
  
  /* Group (auto-width) left, then All Cards + Search pushed right */
  .leftControls { 
    flex: 1;
    min-width: 0;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
  }
  .leftControls .field { flex: 0 0 auto; min-width: 0; }
  .leftControls .field > span { display: none; }
  .groupDropdown { width: auto; flex: 0 0 auto; min-width: 0; }
  .groupDropdown .select { padding: 8px 10px; font-size: 13px; }
  #allCardsBtn { width: auto; padding: 8px 10px; font-size: 13px; flex-shrink: 0; }
  
  /* Search icon - collapsed by default, expands as overlay */
  .searchWrapper { 
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .searchWrapper .searchInput{ 
    width: 60vw;
    padding: 8px 32px 8px 10px;
    font-size: 13px;
  }
  
  input { min-width: auto; }
  
  /* Settings button in header */
  .settingsBtnHeader { padding: 6px 8px; font-size: 12px; }
  
  .big { font-size: 26px; }
  .small { font-size: 14px; }
  .pill { padding: 4px 8px; font-size: 12px; }
  .hint { font-size: 12px; }
  
  .cardMeta { margin: 2px 0 4px; gap: 8px; }

  /* Status line: show "Custom > Status" hint on the left in portrait */
  #statusStudy{ text-align:left; }
  #statusStudy:before{ content:"Custom > "; color: var(--muted); }
  #statusStudy:empty:after{ content:"Status"; color: var(--muted); }
  
  /* Study nav row: keep Prev / Speak / Custom / Next on ONE line, edge-to-edge */
  #studyNavRow{ width:100%; justify-content:space-between; flex-wrap:nowrap; gap:6px; }
  #studyNavRow button{ flex: 1 1 0; min-width: 0; padding: 10px 10px; font-size: 13px; }

  /* Other actions rows may still wrap */
  .actionsRow { gap: 6px; flex-wrap: wrap; }
  .actionsRow button { padding: 10px 12px; font-size: 13px; flex: 1 1 auto; min-width: 80px; }

  /* Ensure breakdown modal meta text hugs the left edge in portrait */
  #breakdownMeta{ margin-left:0; text-align:left; }
  
  #userLine { font-size: 11px; padding: 4px 6px; }
  .userMenu { right: 10px; top: 52px; min-width: 180px; }
  
  /* Modals */
  .modalCard { width: 98vw; padding: 14px; }
  .modalTitle { font-size: 18px; }
  .modalForm input { min-width: 100%; }
  
  /* Admin modal */
  .modal-card { 
    width: 98vw; 
    max-width: 98vw; 
    max-height: 90vh; 
    padding: 16px;
    overflow-y: auto;
  }
  .modal-title { font-size: 16px; }
  .form-group { margin-bottom: 12px; }
  .deck-access-grid { flex-direction: column; gap: 10px; }
  .deck-access-col { min-width: 100%; width: 100%; }
  .deckAccessList { max-height: 120px; padding: 8px; }
  .deckAccessRow { flex-direction: column; gap: 6px; align-items: flex-start; }
  .deckAccessName { font-size: 13px; }
  .deckAccessMeta { font-size: 10px; }
  .quick-actions { flex-direction: column; gap: 8px; }
  .quick-actions .btn { width: 100%; justify-content: center; }
  
  /* Settings page - add close button area */
  .settingsPage h2 { display: flex; justify-content: space-between; align-items: center; }
  .settingsCloseBtn { 
    padding: 6px 12px; 
    font-size: 14px; 
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 8px; 
    color: #ccc; 
    cursor: pointer; 
  }
  .settingsCloseBtn:hover { background: rgba(255,255,255,0.15); color: #fff; }
  .settingsNav { flex-wrap: wrap; gap: 4px; }
  .settingsNavBtn { padding: 8px 10px; font-size: 12px; }
  .settingsCard { padding: 12px; }
  .settingRow { padding: 8px; }
  .settingTitle { font-size: 14px; }
  .settingDesc { font-size: 11px; }
  
  /* === DECK ITEM PORTRAIT LAYOUT === */
  .deckItem { 
    flex-wrap: wrap; 
    padding: 12px; 
    gap: 10px;
  }
  .deckMiniLogo { width: 28px; height: 28px; }
  .deckInfo { 
    flex: 1; 
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .deckName { 
    font-size: 14px; 
    flex-wrap: wrap;
    gap: 4px;
  }
  .deckDesc { 
    font-size: 11px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deckCount { font-size: 10px; }
  .deckBadge { font-size: 9px; padding: 1px 5px; }
  /* Icon-only badges on portrait */
  .deckBadge .badgeText { display: none; }
  .deckBadge::before { font-size: 11px; }
  
  /* Deck actions - vertical stack */
  .deckActions { 
    width: 100%; 
    display: flex; 
    flex-direction: row;
    gap: 6px; 
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
    margin-top: 4px;
  }
  .deckSwitchBtn { flex: 1; justify-content: center; }
  .deckDefaultBtn, .deckClearDefaultBtn, .deckEditBtn, .deckDeleteBtn { 
    padding: 6px 8px !important; 
    font-size: 12px !important; 
  }
  .deckActiveLabel { font-size: 11px; flex: 1; text-align: center; }
  
  /* Custom Set manage panes on mobile */
  .csManageSplit { flex-direction: column; }
  .csManagePane { min-height: 100px; }
  .csCardList { height: 200px; }
  
  /* Custom Set modal */
  .customSetTabs { flex-wrap: wrap; }
  .csTab { padding: 6px 10px; font-size: 12px; }
  .csTabBody { min-height: auto; }
  
  /* Breakdowns modal */
  .modalCardWide { width: 98vw; max-width: 98vw; }
  .breakdownGrid { grid-template-columns: 1fr; }
  .breakdownRow { grid-template-columns: 1fr; gap: 6px; }
  .breakdownRow input { width: 100%; }
}

/* Small mobile breakpoint */
@media (max-width: 400px) {
  h1 { font-size: 18px; }
  .deckLogoImg { width: 45px; height: 45px; }
  .deckTitle { max-width: 80px; font-size: 0.55em; }
  
  .tab { padding: 6px 8px; font-size: 12px; }
  
  .big { font-size: 22px; }
  
  .actionsRow button { padding: 8px 10px; font-size: 12px; min-width: 70px; }
  #breakdownBtn { padding: 8px; min-width: auto; }
  
  /* Even more compact controls */
  .groupDropdown .select { padding: 6px 8px; font-size: 12px; }
  #allCardsBtn { padding: 6px 8px; font-size: 12px; }
}

/* === LANDSCAPE MODE OPTIMIZATIONS === */
@media (orientation: landscape) and (max-height: 500px) {
  .wrap { padding: 6px 12px; }
  
  /* Compact header */
  h1 { font-size: 18px; }
  .titleRow { gap: 6px; }
  .deckLogoImg { width: 40px; height: 40px; }
  
  /* Compact controls row */
  .controls { 
    flex-direction: row; 
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }
  .leftControls { 
    flex: 0 0 auto;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .leftControls .field { flex: 0 0 auto; min-width: 0; }
  .leftControls .field > span { display: none; }
  .groupDropdown { width: auto; min-width: 0; flex: 0 0 auto; }
  .groupDropdown .select { padding: 4px 8px; font-size: 11px; }
  #allCardsBtn { padding: 4px 8px; font-size: 11px; flex-shrink: 0; }
  .searchWrapper { flex: 0 0 auto; }
  .searchWrapper .searchToggleBtn{ padding: 4px 8px; font-size: 11px; }
  .searchWrapper .searchInput{ width: 30vw; padding: 4px 26px 4px 8px; font-size: 11px; }
  
  /* Card meta row */
  .cardMeta { margin: 2px 0 4px; gap: 6px; }
  .statusInMeta { font-size: 11px; }
  
  .settingsBtnHeader { padding: 4px 8px; font-size: 12px; }
  
  .card { padding: 6px 0; }
  .card-face { padding: 12px 16px; gap: 6px; }
  .defExtras { margin-top: 6px; font-size: 12px; line-height: 1.35; }
  .big { font-size: 20px; }
  .pill { padding: 3px 6px; font-size: 11px; }
  .hint { font-size: 11px; }
  
  .actionsRow { gap: 4px; margin-top: 6px; }
  .actionsRow button { padding: 6px 10px; font-size: 12px; }
  #breakdownBtn { flex: 0 0 auto; min-width: auto; padding: 6px 8px; }
  
  .tabs { gap: 3px; }
  .tab { padding: 5px 8px; font-size: 12px; }
  .counts { font-size: 11px; margin: 2px 0; }
  
  .settingsPage h2 { font-size: 18px; margin-bottom: 10px; }
  .settingsNav { gap: 3px; margin-bottom: 12px; padding-bottom: 10px; }
  .settingsNavBtn { padding: 6px 10px; font-size: 11px; }
  .settingsCard { padding: 10px; margin-bottom: 10px; }
  .settingsCardHeader { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; }
  
  .deckItem { padding: 10px; gap: 8px; }
  .deckMiniLogo { width: 30px; height: 30px; }
  .deckName { font-size: 13px; }
  .deckDesc { font-size: 11px; }
  .deckCount { font-size: 10px; }
  .deckActions { flex-direction: row; width: auto; border-top: none; padding-top: 0; margin-top: 0; }
}

/* === RESPONSIVE TEXT HIDING === */
/* Hide button text on mobile, show only icons */
@media (max-width: 600px) {
  .btnText { display: none; }
  .badgeText { display: none; }
}

/* Settings close button always visible on desktop too */
.settingsCloseBtn { 
  padding: 6px 12px; 
  font-size: 14px; 
  background: rgba(255,255,255,0.08); 
  border: 1px solid rgba(255,255,255,0.15); 
  border-radius: 8px; 
  color: #aaa; 
  cursor: pointer;
  margin-left: auto;
}
.settingsCloseBtn:hover { 
  background: rgba(255,255,255,0.12); 
  color: #fff; 
}



/* Custom Set Settings - Responsive (prevents Manage Cards overflow/misalignment) */
@media (max-width: 820px){
  .csManageSplit{ flex-direction: column; }
  .csManagePane{ width: 100%; }
}


/* ===== UI Error Log Panel ===== */
.uiLogPanel{
  position:fixed;
  right:12px;
  bottom:12px;
  width:min(520px, 96vw);
  max-height:40vh;
  background:rgba(20,24,30,0.95);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.55);
  z-index:9999;
  display:flex;
  flex-direction:column;
}
.uiLogPanel.hidden{ display:none; }
.uiLogHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.uiLogTitle{ font-weight:700; opacity:0.95; }
.uiLogActions{ display:flex; gap:8px; }
.uiLogBody{
  padding:10px 12px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  white-space:pre-wrap;
}
.uiLogLine{ margin:0 0 8px 0; opacity:0.95; }
.uiLogLine .tag{ opacity:0.7; margin-right:6px; }



/* ===== Custom Set Manage Cards: Collapsible panes (mobile portrait) ===== */
.csPaneHeaderToggle{ cursor:pointer; user-select:none; }
.csPaneChevron{ margin-left:auto; opacity:0.7; }
.csManagePane.collapsed .csPaneBody{ display:none; }
.csManagePane.collapsed .csPaneChevron{ transform:rotate(-90deg); display:inline-block; }
.csManagePane .csPaneHeader{ display:flex; gap:10px; align-items:center; }

/* Improve card rows in Manage Cards (works well on desktop + landscape) */
.csCardItem{
  display:grid;
  grid-template-columns: 26px 1fr auto;
  gap:10px;
  align-items:center;
}
.csCardItem input[type="checkbox"]{
  width:18px;
  height:18px;
}
.csCardItem .cardInfo{ min-width:0; }
.csCardItem .cardTerm{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.csCardItem .cardMeaning{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0.85;
}
.csCardItem .cardStatus{
  min-width:28px;
  text-align:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  opacity:0.92;
}

/* Mobile sizing for Custom Set full-page view */
@media (max-width: 720px){
  .csPage{
    padding:10px;
  }
  .csPageHeader h2{ font-size:18px; }
  .csTabBody{
    overflow:visible;
  }
  .csManageSplit{
    flex-direction:column;
    gap:10px;
  }
  .csCardList{
    height:auto;
    max-height:35vh;
  }
}

/* Mobile: start with panes collapsed (portrait + landscape) */
@media (max-width: 720px){
  .csManagePane{ width:100%; }
}
@media (orientation: landscape) and (max-height: 500px){
  .csManagePane{ width:100%; }
  .csManageSplit{ flex-direction:column; gap:10px; }
  .csCardList{ height:auto; max-height:30vh; }
}


/* Custom Set Manage Cards – tighter remove button */
.csBtnRemove{ padding-left: 12px; padding-right: 12px; }


/* === Custom Set: enforce checkbox-left layout across ALL orientations === */
.csCardItem{
  display:grid;
  grid-template-columns: 26px 1fr auto;
  grid-template-areas: "cb info status";
  column-gap: 10px;
  align-items:center;
}
.csCardItem input[type="checkbox"]{ grid-area: cb; justify-self:center; margin:0; }
.csCardItem .cardInfo{ grid-area: info; min-width: 0; }
.csCardItem .cardStatus{ grid-area: status; justify-self:end; }

/* Wrap long term/definition safely without colliding with edges/badges */
.csCardItem .cardTerm,
.csCardItem .cardDef{ 
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Action buttons: keep Clear short and Remove flush-right */
.csPaneActionsInSet{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; }
.csPaneActionsInSet .csBtnRemove{ margin-left:auto; }
.csPaneActionsInSet .csBtnClearAll{ flex: 0 0 auto; }
.csPaneActionsInSet .csBtnRemove{ flex: 0 0 auto; }

/* Tighten icon-label spacing for Remove */
.csBtnRemove{ display:inline-flex; align-items:center; gap:4px; }
.csBtnRemove .btnIcon{ margin-right:0 !important; }

/* Clear All: text-sized button, aligned left */
.csBtnClearAll{ width:auto; padding-left:12px; padding-right:12px; }

/* Mobile landscape: show ~5 cards by allowing taller list (override later max-height clamps) */
@media (max-width: 1024px) and (orientation: landscape){
  .csCardList{ 
    max-height: none !important;
    height: clamp(340px, 72vh, 560px) !important;
  }
}



/* ============================================================
   EDIT DECK MODAL TABS + EDIT CARDS
   ============================================================ */
.modalWide{
  width: min(920px, 92vw);
}
.modalTabs{
  display:flex;
  gap:10px;
  margin: 6px 0 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
}
.modalTab{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  cursor:pointer;
  font-weight: 700;
}
.modalTab.active{
  background: rgba(31, 111, 235, 0.18);
  border-color: rgba(31, 111, 235, 0.45);
}
.modalTabBody{ display:none; }
.modalTabBody.active{ display:block; }

.editCardsTopRow{ display:flex; justify-content:flex-end; margin: 0 0 10px 0; }

.editCardsToolbar{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  align-items:center;
  margin-bottom: 10px;
}
.editCardsToolbar input{
  flex: 1 1 280px;
}
.editCardsToolbar select{
  flex: 0 0 200px;
}

/* Edit Cards: search input with clear (X) */
.searchWithClear{
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.searchWithClear input{
  width: 100%;
  padding-right: 38px;
}
.searchWithClear .clearBtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 18px;
  line-height: 22px;
  cursor: pointer;
  display: none;
  padding: 0;
}
.searchWithClear.hasValue .clearBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Edit Cards: in-modal notice (auto-hides) */
.editCardsNotice{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  margin: 6px 0 10px 0;
  font-weight: 700;
  display: none;
}
.editCardsNotice.show{ display:block; }
.editCardsNotice.error{
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.12);
  color: #fecaca;
}
.editCardsNotice.success{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.12);
  color: #bbf7d0;
}

/* Ensure nested modals appear above Edit Deck modal */
.modalOverlay#aiTemplateModal{ z-index: 10050; }
.modalOverlay#choiceModal{ z-index: 10060; }
.modalOverlay#previewModal{ z-index: 10055; }
.tinyCheck{
  display:flex;
  align-items:center;
  gap:8px;
  opacity: 0.9;
  user-select:none;
}

.editCardsBulkBar{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  margin-bottom: 12px;
}
.editCardsBulkBar .bulkLeft,
.editCardsBulkBar .bulkRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.editCardsList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow:auto;
  padding-right: 4px;
}
.editCardRow{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  position: relative;
  /* reserve space for the checkbox which is pinned to the top-left */
  padding-left: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.editCardRow.deleted{
  opacity: 0.55;
}
.editCardRow input[type="checkbox"]{
  /* pin selection checkbox to the top-left corner like other list UIs */
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0;
}
.editCardMain{
  flex: 1 1 auto;
  min-width: 0;
}
.editCardTerm{
  font-weight: 800;
  font-size: 15px;
}
.editCardMeaning{
  margin-top: 4px;
  opacity: 0.95;
  line-height: 1.25;
}
.editCardMeta{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}
.editCardActions{
  display:flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.editCardActions button{
  min-width: 92px;
}

/* Inline editor (Edit Cards) – keep it compact and list-like (no accordion feel) */
.editCardEditBox{
  display:flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.editCardEditBtns{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive: prevent horizontal overflow in the Edit Cards modal */
@media (max-width: 760px){
  .editCardActions{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .editCardActions button{ min-width: auto; }
  .editCardEditGrid .row2{ grid-template-columns: 1fr; }
}
.editCardEditGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}
.editCardEditGrid .row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.previewList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.previewItem{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.previewItem .top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.previewItem .term{
  font-weight: 800;
}
.previewItem .note{
  font-size: 12px;
  opacity: 0.7;
}
.previewItem .beforeAfter{
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.95;
  line-height: 1.25;
}
.previewItem .beforeAfter .before{
  opacity: 0.75;
  margin-bottom: 2px;
}
.previewItem .beforeAfter{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.previewItem .beforeAfter .label{
  font-weight: 800;
  opacity: 0.85;
}
.previewItem .beforeAfter .arrow{
  opacity: 0.7;
}
.previewItem .beforeAfter .after{
  opacity: 0.95;
}

/* Sub-tabs for Deleted / Edited */
.subTabs{
  display:flex;
  gap:10px;
  margin: 12px 0;
}
.subTab{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  cursor:pointer;
  font-weight: 700;
}
.subTab.active{
  background: rgba(31, 111, 235, 0.18);
  border-color: rgba(31, 111, 235, 0.45);
}
.subTabBody{ display:none; }
.subTabBody.active{ display:block; }

.editedCardsList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.editedCardItem{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.editedCardItem .editedTop{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.editedCardItem .editedTopRight{
  display:flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.editedCardItem .editedTerm{
  font-weight: 800;
}
.editedCardItem .editedTime{
  font-size: 12px;
  opacity: 0.7;
}
.editedCardItem .editedDetail{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.95;
}
.editedCardItem .editedDetail .before{
  opacity: 0.75;
  margin-bottom: 2px;
}



/* --- AI Template multi-field selector + close X --- */
.modalTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modalCloseX{
  appearance:none;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:inherit;
  border-radius:10px;
  width:36px;
  height:36px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.modalCloseX:hover{ background:rgba(255,255,255,0.10); }

.multiSelect{ position:relative; }
.multiSelectBtn{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  color:inherit;
  cursor:pointer;
}
.multiSelectMenu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  background:rgba(18,18,18,0.98);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:10px;
  z-index:10080;
  box-shadow:0 14px 30px rgba(0,0,0,0.45);
}
.msOpt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
}
.msOpt:hover{ background:rgba(255,255,255,0.06); }
.msOpt input{ transform:scale(1.1); }


/* Small close button inside modal tab row */
.smallClose{
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  border-radius:12px;
  height:28px;
}


/* AI Generator formatting helper dropdown */
.aiFormatHelpers{ position:relative; display:inline-block; margin-top:6px; }
.aiFormatMenu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  min-width:220px;
  background:rgba(18,18,18,0.98);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:10px;
  z-index:10050;
  box-shadow:0 14px 30px rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aiFormatMenu button{ width:100%; text-align:left; }


/* AI Template field select (compact like Target Deck) */
.compactSelect{max-width:240px;width:50%;min-width:180px}


/* AI Generator: instructions row with always-visible Clear button */
.aiInstrRow{display:flex; gap:10px; align-items:flex-start;}
.aiInstrRow textarea{width:75%; resize:none; overflow:hidden;}
.aiInstrRow .aiInstrClearBtn{height:32px; margin-top:2px;}


/* Collapsible sections (Decks page) */
.collapsibleSection{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
  background: rgba(255,255,255,0.02);
}
.collapsibleHeader{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: none;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.collapsibleChevron{
  opacity: 0.8;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
.collapsibleBody{
  padding: 14px;
}
.collapsibleSection.collapsed .collapsibleBody{
  display: none;
}
.collapsibleSection:not(.collapsed) .collapsibleChevron{
  transform: rotate(180deg);
}

/* Sub-tabs inside Add Cards */
.subTabs{
  display:flex;
  gap: 8px;
  margin: 12px 0 6px 0;
  flex-wrap: wrap;
}
.subTabBtn{
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.subTabBtn:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.subTabBtn.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.subTabSection{
  padding-top: 10px;
}
.subTabSection:not(.active){
  display:none;
}

/* Reuse generator tab styles for bulk generators */
.bulkGenMethodTabs, .editBulkGenMethodTabs{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bulkGenMethodTab, .editBulkGenMethodTab{
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.bulkGenMethodTab:hover, .editBulkGenMethodTab:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.bulkGenMethodTab.active, .editBulkGenMethodTab.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bulkGenMethodSection.hidden, .editBulkGenMethodSection.hidden{
  display:none;
}