/* =====================================
   Wordle Lab – Compact / Optimized CSS
   (Dark mode as base, Light overrides)
   ===================================== */

/* ========== Fonts ========== */
@font-face {
  font-family: "Lobster";
  src: url('./Lobster-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ========== Design Tokens (Dark base) ========== */
:root{
  /* Core theme */
  --bg-main:#050608;
  --bg-card:rgba(20,22,30,0.96);
  --bg-card-soft:rgba(16,18,26,0.9);
  --bg-input:#151824;
  --border:#2a3040;
  --fg:#f6f7ff;
  --sub:#9aa1c5;
  --accent:#4dd0ff;
  --accent-soft:rgba(77,208,255,0.12);
  --danger:#ff6b81;
  --btn:#202538;
  --btnHover:#2b3250;
  --shadow:0 18px 40px rgba(0,0,0,0.55);
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.15);
  --shadow-strong: 0 10px 28px rgba(0,0,0,0.22);
  --overlay:radial-gradient(circle at top,#151a33 0,rgba(5,6,8,0.7) 55%,rgba(3,4,6,0.88) 100%);
  --bg-bright:0.7;
  --bg-blur:0.4px;
  --font-main:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Toast palette (dark base) */
  --toast-fg: #f7f7f8;
  --toast-bg: #1f2330;
  --toast-border: rgba(255,255,255,.08);
  --toast-success: #2fbf71;
  --toast-error:   #ff4d5e;
  --toast-info:    #8ea0ff;
  --toast-warn:    #ffc857;

  /* Panel tint tokens (dark base, soft) */
  --tint-green-soft:  rgba(46, 204, 113, 0.08);
  --tint-yellow-soft: rgba(241, 196, 15,  0.08);
  --tint-gray-soft:   rgba(149, 165, 166, 0.10);
  --tint-inc-soft:    rgba(64, 156, 255,  0.08);
  --tint-exc-soft:    rgba(229, 65, 95,   0.08);

  --tint-green-border:  rgba(46, 204, 113, 0.35);
  --tint-yellow-border: rgba(241,196, 15,  0.35);
  --tint-gray-border:   rgba(149,165,166, 0.35);
  --tint-inc-border:    rgba(64, 156, 255,  0.35);
  --tint-exc-border:    rgba(229,65, 95,    0.35);
}

/* Light theme overrides */
body.light{
  --bg-main:#f5f6fb;
  --bg-card:rgba(255,255,255,0.96);
  --bg-card-soft:rgba(255,255,255,0.94);
  --bg-input:#f3f4fd;
  --border:#d5d8ea;
  --fg:#141624;
  --sub:#667099;
  --accent:#5c6ffb;
  --accent-soft:rgba(92,111,251,0.09);
  --danger:#e5415f;
  --btn:#e3e6fb;
  --btnHover:#d6daf8;
  --shadow:0 16px 32px rgba(15,17,25,0.16);
  --overlay:radial-gradient(circle at top,#ffffff 0,#f5f6fb 50%,#eef0fa 100%);
  --bg-bright:1.2;
  --bg-blur:0.7px;

  /* Toast (light) */
  --toast-fg: #1b1d22;
  --toast-bg: #ffffff;
  --toast-border: rgba(0,0,0,.10);
  --toast-success: #1d8f5b;
  --toast-error:   #c9303d;
  --toast-info:    #4a64e0;
  --toast-warn:    #d9a100;

  /* Panel tints slightly stronger in light */
  --tint-green-soft:  rgba(46, 204, 113, 0.25);  /* rgba(46, 204, 113, 0.12); */
  --tint-yellow-soft: rgba(241,196, 15,  0.23);  /* rgba(241,196, 15,  0.12); */
  --tint-gray-soft:   rgba(149,165,166, 0.25);  /* rgba(149,165,166, 0.14); */
  --tint-inc-soft:    rgba(64, 156, 255,  0.23);  /* rgba(64, 156, 255,  0.12); */
  --tint-exc-soft:    rgba(229, 65, 95,   0.23);  /* rgba(229, 65, 95,   0.12); */

  --tint-green-border:  rgba(46, 204, 113, 0.55);  /* rgba(46, 204, 113, 0.45); */
  --tint-yellow-border: rgba(241,196, 15,  0.55);  /* rgba(241,196, 15,  0.45); */
  --tint-gray-border:   rgba(149,165,166, 0.55);  /* rgba(149,165,166, 0.45); */
  --tint-inc-border:    rgba(64, 156, 255,  0.60);  /* rgba(64, 156, 255,  0.45); */
  --tint-exc-border:    rgba(229,65, 95,    0.60);  /* rgba(229,65, 95,    0.45); */
}

/* Dark mode: stronger tints + glass effect for panels */
body:not(.light) {
  --tint-green-soft:  rgba(46, 204, 113, 0.25);
  --tint-yellow-soft: rgba(241, 196, 15,  0.23);
  --tint-gray-soft:   rgba(189, 195, 199, 0.25);
  --tint-inc-soft:    rgba(64, 156, 255,  0.23);
  --tint-exc-soft:    rgba(231, 76, 60,   0.23);

  --tint-green-border:  rgba(46, 204, 113, 0.55);
  --tint-yellow-border: rgba(241, 196, 15,  0.55);
  --tint-gray-border:   rgba(189, 195, 199, 0.55);
  --tint-inc-border:    rgba(64, 156, 255,  0.60);
  --tint-exc-border:    rgba(231, 76, 60,   0.60);
}

/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
}
body{
  min-height:100vh;
  font-family:var(--font-main);
  background:var(--bg-main);
  color:var(--fg);
}

/* ========== Background Images & Overlay ========== */
/* Dark mode image */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('./double-bubble-dark.png') center/460px repeat;
  filter:brightness(var(--bg-bright)) saturate(1) blur(var(--bg-blur));
  z-index:-2;
  pointer-events:none;
  will-change:transform;
}
/* Light mode image */
body.light::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('./symphony.png') center/420px repeat;
  filter:brightness(1.3) saturate(1.05) blur(0.7px);
  z-index:-2;
  pointer-events:none;
  will-change:transform;
}
/* Overlay */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:-1;
  pointer-events:none;
}

/* ========== Layout ========== */
.wrap{
  max-width:960px;
  margin:0 auto;
  padding:20px 16px 40px;
}

/* Header */
.header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
h1{
  margin:0;
  font-size:26px;
  letter-spacing:0.03em;
}
h1 .tag{
  display:inline-block;
  margin-top:4px;
  font-size:13px;
  font-weight:400;
  color:var(--sub);
}
.brand{
  font-family:"Lobster", cursive;
}

/* ========== Cards, Rows, Lists ========== */
.card{
  background:var(--bg-card);
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:12px 14px;
  backdrop-filter:blur(18px);
  /* transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out; Transition for background and transform */
}
.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.list{
  max-height:220px;
  overflow:auto;
}

/* ================================
   Page-turn style panel animation
   ================================ */

@keyframes tabPanelSwipeRight {
  0% {
    transform: translateX(20px) rotateY(-7deg);
    opacity: 0.0;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  55% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
    box-shadow: var(--shadow-strong);
  }
  100% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
    box-shadow: var(--shadow-soft);
  }
}

@keyframes tabPanelSwipeLeft {
  0% {
    transform: translateX(-20px) rotateY(7deg);
    opacity: 0.0;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  55% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
    box-shadow: var(--shadow-strong);
  }
  100% {
    transform: translateX(0) rotateY(0deg);
    opacity: 1;
    box-shadow: var(--shadow-soft);
  }
}

.tab-swipe-right {
  animation: tabPanelSwipeRight 0.23s cubic-bezier(.25, .9, .3, 1.1);
  transform-origin: 100% 50%; /* like turning from the right edge */
}

.tab-swipe-left {
  animation: tabPanelSwipeLeft 0.23s cubic-bezier(.25, .9, .3, 1.1);
  transform-origin: 0% 50%;   /* like turning from the left edge */
}

/* Stronger but elegant animation when switching Pos tabs 
@keyframes tabPanelFlash {
  0% {
    transform: scale(0.96) translateY(4px);
    opacity: 0.65;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    transform: scale(1.02) translateY(-1px);
    opacity: 1;
    box-shadow: var(--shadow-strong);
  }
  100% {
    transform: scale(1.0) translateY(0);
    opacity: 1;
    box-shadow: var(--shadow-soft); 
  }
} */

/* Apply the animation 
.tab-flash {
  animation: tabPanelFlash 0.22s cubic-bezier(.23,1.15,.32,1);
} */

/* ========== Buttons ========== */
.btn{
  background:var(--btn);
  border:1px solid var(--border);
  color:var(--fg);
  border-radius:999px;
  padding:7px 14px;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .05s ease,
    box-shadow .15s ease;
}
.btn:hover{
  background:var(--btnHover);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(1px);
}
.btn:active{
  transform:scale(.97);
  transform: translateY(3px);
}
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Theme / mode toggle buttons */
#modeToggle,
#modeSwitch{
  white-space:nowrap;
}

#filterModeToggle {
  width: 130px;
  min-width: 130px;
  /* display: flex;               flex container */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  text-align: center;
}

/* ========== Top Controls (word list / clear / mode toggle) ========== */
.bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.top-controls{
  justify-content:space-between;
}
.top-controls-left{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.top-controls-left label{
  font-size:13px;
  color:var(--sub);
  display:flex;
  align-items:center;
  gap:6px;
}
.top-controls-right{
  margin-left:auto;
}

/* Selects */
.bar select{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--fg);
  font-size:13px;
}

/* Search input (Advanced mode / Pattern Search) */
.search{
  flex:1 1 200px;
}
.search input{
  width:100%;
  padding:8px 10px; 
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--fg);
  font-size:13px;
}
.search input::placeholder{
  color:var(--sub);
  opacity:.8;
}

/* Analyze input */
#analyzeInput{
  width:150px; /* min-width:120px; */
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--fg);
  font-size:13px;
}
#analyzeInput::placeholder{
  color:var(--sub);
  opacity:.8;
}

/* ========== Letter Keyboards ========== */
/* Generic grid (Global / Position / Green / Yellow / Gray etc.) */
.grid{
  display:grid;
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:4px;
}

/* Gray Letter-only grid (bottom of Basic mode) */
.graygrid{
  display:grid;
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:4px;
}

/* Desktop: make Gray row 1×26 so buttons don’t look huge */
@media (min-width: 622px){
  .graygrid{
    grid-template-columns:repeat(26,1fr);
  }
}

/* Default key style */
.k{
  border-radius:10px;
  border:1px solid var(--border);
  padding:6px 0;
  text-align:center;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  background:var(--bg-card-soft);
  color:var(--sub);
  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease,
    transform .05s ease;
}
.k:hover{transform:translateY(-1px)}

/* Include / Exclude (Advanced mode) */
.k.inc{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.k.exc{
  background:rgba(229,65,95,0.07);
  border-color:var(--danger);
  color:var(--danger);
}

/* Lock status during calculation */
.grid.locked .k,
.graygrid.locked .k{
  pointer-events:none;
  opacity:0.45;
}

/* ========== Easy Mode key colors (Green / Yellow / Gray) ========== */
/* Green: correct letter at this position */
#greenKeys .k.inc{
  background:rgba(46,204,113,0.18);
  border-color:#2ecc71;
  color:#2ecc71;
}
/* Yellow: present but not at this position */
#yellowKeys .k.exc{
  background:rgba(241,196,15,0.18);
  border-color:#f1c40f;
  color:#f1c40f;
}
/* Gray: not in the word at all (Global Exclude) */
#grayKeys .k.exc{
  background:rgba(149,165,166,0.2);
  border-color:#95a5a6;
  color:#95a5a6;
}

/* Extra Gray for dedicated gray grid (kept for clarity) */
.graygrid .k.exc{
  background:rgba(149,165,166,0.2);
  border-color:#95a5a6;
  color:#95a5a6;
}
.graygrid.locked .k{
  pointer-events:none;
  opacity:0.45;
}

/* ========== Tabs (Pos 1–5) ========== */
.tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.tab{
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-card-soft);
  color:var(--sub);
  padding:5px 10px;
  font-size:11px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.tab .num{font-weight:600}
.tab.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
@media(max-width:340px){
  .tab .label{display:none}
}

/* ========== Counter & Word list ========== */
.counter{
  margin-top:10px;
  font-size:13px;
  color:var(--sub);
}
.counter span{
  font-weight:600;
  font-size:18px;
  margin-right:3px;
}

/* Candidate word list */
#words{
  list-style:none;
  margin:0;
  padding:0;
  columns:4 110px;
  column-gap:12px;
  font-family:"SF Mono","Roboto Mono",ui-monospace,Menlo,Monaco,monospace;
  font-size:14px;  /* 13 */
}
#words li{
  break-inside:avoid;
  padding:1px 0;
}
/* Scrollbar styling (optional) */
.list::-webkit-scrollbar {
  width: 6px;
}
.list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
body.light .list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
}

/* ========== Recommender controls ========== */
.ctl{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.ctl label{
  font-size:13px;
  color:var(--sub);
  display:flex;
  gap:6px;
  align-items:center;
}
.ctl input[type="checkbox"]{
  accent-color:var(--accent);
}
.ctl select{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--fg);
  font-size:13px;
}

/* Cands Thr / Pool Thr + Suggest / Stop / Reset */
.button-container{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
.button-container label{
  font-size:13px;
  color:var(--sub);
  display:flex;
  align-items:center;
  gap:6px;
}
.button-container input[type="number"]{
  width:86px;
  padding:7px; /* 6px */
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--fg);
  font-size:13px;
}
.button-container .btn{
  padding-inline:14px;
  flex:0 0 auto;
}
#space-1{
  display:none;
  flex-basis:0;
}

/* ========== Progress bar ========== */
.progress{
  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.progress .barin{
  position:absolute;
  inset:0;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),#7cf3ff);
  transition:width .12s linear;
}

/* ========== Tables ========== */
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
th,td{
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--sub);
  background:rgba(0,0,0,0.1);
}
body.light th{
  background:rgba(0,0,0,0.02);
}
td{color:var(--fg)}
td.mono{
  font-family:"SF Mono","Roboto Mono",ui-monospace,Menlo,Monaco,monospace;
}

/* Sortable headers */
th#sort-steps,
th#sort-entropy,
th#sort-cands,
th#sort-bucket{
  cursor:pointer;
}
th#sort-steps:focus,
th#sort-entropy:focus,
th#sort-cands:focus,
th#sort-bucket:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ========== Word Analyzer ========== */
#deepLabel{
  font-size:13px;
  color:var(--sub);
  display:flex;
  align-items:center;
  gap:6px;
}

/* ========== Help / Toggle sections ========== */
.help{
  margin-top:16px;
  font-size:13px;
  color:var(--sub);
}
.help ul{
  margin:6px 0 0;
  padding-left:18px;
}
.help li{margin-bottom:4px;}

.toggle-header{
  display:inline-block;
  margin-top:6px;
  cursor:pointer;
  user-select:none;
}
.toggle-header::before{
  content:"▶";
  display:inline-block;
  margin-right:6px;
  font-size:10px;
  transform:translateY(-1px);
}
.toggle-header.open::before{
  content:"▼";
}
.toggle-content{
  display:none;
  margin-top:4px;
}

/* Hints */
.hint{
  font-size:12px;
  color:var(--sub);
}

/* ========== Toasts ========== */
/* Container */
#toastContainer{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column-reverse; /* newest on top visually */
  gap:8px;
  z-index:99999;
  pointer-events:none;
}

/* Each toast */
.toast{
  pointer-events:auto;
  min-width:220px;
  max-width:min(92vw,520px);
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
  font-size:14px;
  line-height:1.25;

  background:var(--toast-bg);
  color:var(--toast-fg);
  border:1px solid var(--toast-border);
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}
.toast.hide{
  opacity:0;
  transform:translateY(8px);
}

/* Legacy per-type palettes (borders) – kept for compatibility */
body.light .toast.info  { border-color:#cdd9ff; }
body.light .toast.warn  { border-color:#ffe0a6; }
body.light .toast.ok    { border-color:#bfe8c9; }
body:not(.light) .toast.info { border-color:#2f3b5c; }
body:not(.light) .toast.warn { border-color:#5a3d12; }
body:not(.light) .toast.ok   { border-color:#1f4e31; }

/* Type accents via variables */
.toast.success{ color:var(--toast-success); }
.toast.error  { color:var(--toast-error); }
.toast.info   { color:var(--toast-info); }
.toast.warn   { color:var(--toast-warn); }

/* ========== Tinted Panels (Basic & Advanced) ========== */
/* BASIC: Green / Yellow / Gray panels */
#greenKeys{
  background:
    linear-gradient(135deg,var(--tint-green-soft),transparent 70%),
    var(--bg-card);
  border:1px solid var(--tint-green-border);
  border-radius:12px;
  padding:10px;
}
#yellowKeys{
  background:
    linear-gradient(135deg,var(--tint-yellow-soft),transparent 70%),
    var(--bg-card);
  border:1px solid var(--tint-yellow-border);
  border-radius:12px;
  padding:10px;
}
#grayKeys, .graygrid{
  background:
    linear-gradient(135deg,var(--tint-gray-soft),transparent 70%),
    var(--bg-card);
  border:1px solid var(--tint-gray-border);
  border-radius:12px;
  padding:10px;
}

/* ADVANCED: Global / Position Include / Exclude */
#gInc, #pInc{
  background:
    linear-gradient(135deg,var(--tint-inc-soft),transparent 70%),
    var(--bg-card);
  border:1px solid var(--tint-inc-border);
  border-radius:12px;
  padding:10px;
}
#gExc, #pExc{
  background:
    linear-gradient(135deg,var(--tint-exc-soft),transparent 70%),
    var(--bg-card);
  border:1px solid var(--tint-exc-border);
  border-radius:12px;
  padding:10px;
}

/* Dark mode: add extra glass / brightness */
body:not(.light) #greenKeys,
body:not(.light) #yellowKeys,
body:not(.light) #grayKeys,
body:not(.light) .graygrid,
body:not(.light) #gInc,
body:not(.light) #pInc,
body:not(.light) #gExc,
body:not(.light) #pExc{
  backdrop-filter:blur(20px) brightness(1.1);
}

/* Dark mode gradients slightly angled */
body:not(.light) #greenKeys{
  background:
    linear-gradient(120deg,var(--tint-green-soft) 0%,transparent 85%),
    var(--bg-card);
}
body:not(.light) #yellowKeys{
  background:
    linear-gradient(120deg,var(--tint-yellow-soft) 0%,transparent 85%),
    var(--bg-card);
}
body:not(.light) #grayKeys,
body:not(.light) .graygrid{
  background:
    linear-gradient(120deg,var(--tint-gray-soft) 0%,transparent 85%),
    var(--bg-card);
}
body:not(.light) #gInc,
body:not(.light) #pInc{
  background:
    linear-gradient(120deg,var(--tint-inc-soft) 0%,transparent 85%),
    var(--bg-card);
}
body:not(.light) #gExc,
body:not(.light) #pExc{
  background:
    linear-gradient(120deg,var(--tint-exc-soft) 0%,transparent 85%),
    var(--bg-card);
}

/* Keep buttons readable on tinted panels */
#greenKeys .k,
#yellowKeys .k,
#grayKeys .k,
.graygrid .k,
#gInc .k, #pInc .k,
#gExc .k, #pExc .k{
  background:var(--bg-card-soft);
}
#greenKeys .k:hover,
#yellowKeys .k:hover,
#grayKeys .k:hover,
.graygrid .k:hover,
#gInc .k:hover, #pInc .k:hover,
#gExc .k:hover, #pExc .k:hover{
  filter:brightness(1.05);
}

/* When locked, keep panel tone; only keys fade */
#gInc.locked, #pInc.locked,
#gExc.locked, #pExc.locked,
#greenKeys.locked, #yellowKeys.locked,
#grayKeys.locked, .graygrid.locked{
  opacity:1;
}

/* ========== Analyze Word: pattern distribution ========== */

/* Scrollable body */
.pattern-scroll {
  max-height: 220px;
  overflow-y: auto;
}

/* Match column widths of header and body */
.pattern-header-table,
.pattern-body-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.pattern-header-table th:nth-child(1),
.pattern-body-table td:nth-child(1) {
  width: 50%;
}

.pattern-header-table th:nth-child(2),
.pattern-body-table td:nth-child(2) {
  width: 25%;
}

.pattern-header-table th:nth-child(3),
.pattern-body-table td:nth-child(3) {
  width: 25%;
}

/* Table cell styling (inherit your existing styles) */
.pattern-header-table th,
.pattern-body-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

body.light .pattern-header-table th {
  background: rgba(0,0,0,0.02);
}

/* Keep header looking like other section headers */
.pattern-header-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sub);
  background: rgba(0,0,0,0.1);
}

/* Scrollbar styling (optional) */
.pattern-scroll::-webkit-scrollbar {
  width: 6px;
}
.pattern-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
body.light .pattern-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
}



/* ========== Responsive Tweaks ========== */
@media(max-width:900px){
  #words{columns:3 110px}
}
@media(max-width:720px){
  body::before{
    filter:brightness(calc(var(--bg-bright) + 0.1)) saturate(1) blur(0.6px);
  }
  body.light::before{
    filter:brightness(1.35) saturate(1.1) blur(0.55px);
  }
  .wrap{padding-inline:10px}
  .header-row{
    flex-direction:column;
    align-items:flex-start;
  }
  #words{columns:2 110px}
}

/* Mobile: Cands/Pool one row, buttons one row */
@media(max-width:600px){
  .button-container label{
    flex:1 1 calc(50% - 6px);
  }
  #limitLabel{
    flex:1 1 calc(80% - 6px);
  }
  #space-1{
    display:block;
    flex-basis:100%;
    height:0;
  }
  .button-container .btn{
    flex:1 1 calc(33.3% - 6px);
    justify-content:center;
  }

  .top-controls{
    flex-direction:column;
    align-items:stretch;
  }
  .top-controls-left{
    width:100%;
    justify-content:flex-start;
  }
  .top-controls-right{
    width:100%;
    display:flex;
    justify-content:flex-end;
  }
}
/* Mobile: Cands/Pool one row, buttons one row */
@media(max-width:404px){
  #deepLabel{
    flex:1 1 calc(80% - 6px);
  }
}