*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  min-height:100vh;color:#333
}

.app-container{max-width:1400px;margin:0 auto;padding:20px}

.header{
  text-align:center;margin-bottom:30px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);padding:20px;border-radius:20px;
  border:1px solid rgba(255,255,255,.2)
}
.header h1{font-size:3.2rem;color:#fff;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}
.header p{color:rgba(255,255,255,.9);font-size:1.4rem}

.toolbar{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
.tool-btn{
  background:linear-gradient(145deg,#4facfe 0%,#00f2fe 100%);
  color:#fff;border:none;padding:12px 24px;border-radius:25px;cursor:pointer;font-weight:600;
  transition:all .3s ease;box-shadow:0 4px 15px rgba(79,172,254,.3)
}
.tool-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,172,254,.4)}
.tool-btn.active{background:linear-gradient(145deg,#ff6b6b,#ffa500)}

.tool-panel{
  background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:20px;padding:25px;
  margin-bottom:20px;box-shadow:0 10px 30px rgba(0,0,0,.1);
  border:1px solid rgba(255,255,255,.3);display:none;animation:slideIn .3s ease-out
}
@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.tool-panel.active{display:block}

.abacus-container{background:linear-gradient(145deg,#1a1a2e,#16213e);border-radius:15px;padding:40px;box-shadow:0 15px 35px rgba(0,0,0,.2)}.controls{display:flex;gap:28px;margin-bottom:30px;flex-wrap:wrap;align-items:center}
.control-group{display:flex;flex-direction:column;gap:8px}
.control-group label{color:#fff;font-weight:600;font-size:1.2rem}
select,.reset-btn{padding:10px 15px;border-radius:8px;border:1px solid #ddd;font-size:1rem;background:#fff;cursor:pointer}
.reset-btn{background:linear-gradient(145deg,#ff4757,#ff3742);color:#fff;border:none;font-weight:600;transition:all .3s ease}
.reset-btn:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(255,71,87,.4)}

.display{
  background:#000;padding:15px;border-radius:10px;margin-bottom:20px;text-align:center;border:3px solid #0ff;
  box-shadow:0 0 20px rgba(0,255,255,.3)
}
.display-value{font-family:'Courier New',monospace;font-size:2.6rem;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.5);letter-spacing:.1em}
.base-info{color:#0ff;font-size:1.2rem;margin-top:10px}

.abacus{background:linear-gradient(145deg,#2c3e50,#34495e);border-radius:15px;padding:30px;box-shadow:inset 0 5px 15px rgba(0,0,0,.3)}.rods-container{display:flex;justify-content:space-around;align-items:flex-end;min-height:0; /* allow the abacus box to shrink for small bases (e.g., base 2) */position:relative;padding-bottom:24px;padding-left:50px}
.rod{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  padding:15px;
  min-height:0; /* let each rod size to its content (beads + controls) */
  /* align controls with bead column center */
  --label-w: 40px;
  --bead-w: 55px;
  --col-gap: 8px;
}
.rod::before{
  content: none; /* disable fixed line; we will draw it relative to bead height */
  display: none;
}
.bead-area{
  display:flex;
  flex-direction:column;
  justify-content:flex-end; /* pack rows at the bottom */
  align-items:center;       /* center the rows so the line aligns with beads */
  position:relative;        /* anchor ::before line to content height */
  flex:0 0 auto;            /* DO NOT stretch; height = content */
  width:100%;
  padding:4px 0;            /* small breathing room above/below beads */
  /* sync with .bead-row grid sizes */
  --label-w: 40px;
  --bead-w: 55px;
  --col-gap: 8px;
}

.bead-area::before{
  content:'';
  position:absolute;
  top:0;          /* start at top of bead stack */
  bottom:0;       /* end at bottom of bead stack */
  left: calc(var(--label-w) + var(--col-gap) + (var(--bead-w) / 2) + 4px);
  width:4px;
  background:linear-gradient(to bottom,#7f8c8d,#95a5a6);
  transform:translateX(-50%);
  border-radius:2px;
}
.bead-container{display:flex;flex-direction:column-reverse;align-items:center;margin-bottom:10px}

.value-labels{position:absolute;left:-40px;top:50px;display:flex;flex-direction:column;gap:2px;font-family:'Courier New',monospace;font-size:1.2rem;color:#fff;font-weight:600}
.value-label{
  height:35px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:5px;
  color:#fff;
  font-size:1.2rem;
}

.bead-row{
  display:grid;
  grid-template-columns:40px 55px; /* label | bead */
  align-items:center;
  gap:8px;
  margin:2px 0;
}

.bead{
  width:55px;
  height:35px;
  margin:2px 0;
  border-radius:50%;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  z-index:10;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
}
.bead.active{background:linear-gradient(145deg,#ff4757,#ff3742);box-shadow:0 5px 15px rgba(255,71,87,.4);transform:scale(1.1)}
.bead.inactive{background:linear-gradient(145deg,#95a5a6,#7f8c8d)}

/* New bead state classes for single-value highlighting */
.bead.unselected{
  background:linear-gradient(145deg,#95a5a6,#7f8c8d);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  transform:none;
}

.bead.selected{
  background:linear-gradient(145deg,#ff4757,#ff3742);
  box-shadow:0 5px 15px rgba(255,71,87,.4);
  transform:scale(1.1);
}

.bead.selected-zero{
  background:linear-gradient(145deg,#2ecc71,#27ae60);
  box-shadow:0 5px 15px rgba(39,174,96,.4);
  transform:scale(1.1);
}

.buttons{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  order:1; /* buttons come first */
  position: relative;
  align-self: flex-start; /* allow horizontal offset from left edge of rod */
  left: calc(var(--label-w) + var(--col-gap) + (var(--bead-w) / 2) + 4px);
  transform: translateX(-50%); /* center the button group on the line */
}

.place-value{
  order:2; /* ensure it appears below the buttons */
  margin-top:10px;
  font-size:1rem;
  color:#fff;
  font-weight:600;
  text-align:center;
  width:80px;
  background:rgba(0,0,0,.7);
  padding:4px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.3);
  position: relative;
  align-self: flex-start;
  left: calc(var(--label-w) + var(--col-gap) + (var(--bead-w) / 2) + 4px);
  transform: translateX(-50%);
}
.increment-btn,.decrement-btn{
     background:linear-gradient(145deg,#00d2ff,#3a7bd5);color:#fff;border:none;padding:12px 22px;border-radius:24px;cursor:pointer;font-weight:600;
     transition:all .3s ease;box-shadow:0 3px 10px rgba(0,210,255,.3);font-size:1.1rem
   }
.increment-btn:hover,.decrement-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,210,255,.4)}

.instructions{line-height:1.6}
.instructions h3{color:#2c3e50;margin-bottom:15px;font-size:1.6rem}
.instructions ul{padding-left:20px;margin-bottom:15px}
.instructions li{margin-bottom:8px}

.video-section{text-align:center}
.video-placeholder{background:linear-gradient(145deg,#2c3e50,#34495e);color:#fff;padding:60px 20px;border-radius:15px;margin-top:20px;font-size:1.2rem}

@media (max-width:768px){
  .controls{flex-direction:column;align-items:stretch}
  .rods-container{min-height:250px}
  .rod{min-height:230px}
  .header h1{font-size:2rem}
  .display-value{font-size:1.5rem}
}

.carry-animation{animation:carry .5s ease-in-out}
@keyframes carry{0%,100%{transform:scale(1)}50%{transform:scale(1.2);background:#ffd700}}

.learning-tip{background:linear-gradient(145deg,#74b9ff,#0984e3);color:#fff;padding:15px;border-radius:10px;margin-top:20px;border-left:4px solid #0984e3}

.base-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:20px}
.base-card{background:rgba(255,255,255,.1);padding:15px;border-radius:10px;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.2)}

.arithmetic-section{margin-bottom:30px}
.arithmetic-controls{margin-bottom:20px}
.operation-buttons{display:flex;gap:10px;flex-wrap:wrap}
.op-btn{
  background:linear-gradient(145deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:15px;cursor:pointer;font-weight:600;
  transition:all .3s ease;box-shadow:0 4px 15px rgba(102,126,234,.3)
}
.op-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.4)}

.calculator-panel,.step-panel{
  background:rgba(255,255,255,.1);border-radius:15px;padding:20px;margin-top:15px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)
}
.calc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.calc-input,.calc-select{padding:12px 15px;border-radius:10px;border:1px solid #ddd;font-size:1rem;background:#fff;min-width:120px}
.calc-btn{
  background:linear-gradient(145deg,#2ecc71,#27ae60);color:#fff;border:none;padding:12px 20px;border-radius:10px;cursor:pointer;font-weight:600;font-size:1.2rem;transition:all .3s ease
}
.calc-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(46,204,113,.4)}

.result-display{
  background:#000;color:#0ff;padding:15px;border-radius:10px;font-family:'Courier New',monospace;font-size:1.2rem;border:2px solid #0ff;
  box-shadow:0 0 20px rgba(0,255,255,.3);margin-bottom:15px
}
.use-result-btn{
  background:linear-gradient(145deg,#f39c12,#e67e22);color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-weight:600;transition:all .3s ease
}
.use-result-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(243,156,18,.4)}

.step-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.step-btn{
  background:linear-gradient(145deg,#9b59b6,#8e44ad);color:#fff;border:none;padding:10px 20px;border-radius:15px;cursor:pointer;font-weight:600;transition:all .3s ease
}
.step-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(155,89,182,.4)}
.step-display{background:rgba(255,255,255,.9);padding:20px;border-radius:10px;color:#333;line-height:1.6}
.step-example{background:#f8f9fa;padding:15px;border-radius:8px;margin:15px 0;border-left:4px solid #3498db;font-family:'Courier New',monospace}
.highlight{background:#ffeb3b;padding:2px 6px;border-radius:4px;color:#333;font-weight:bold}

.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px;margin-top:30px}
.video-card{background:rgba(255,255,255,.95);border-radius:15px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.15);transition:transform .3s ease,box-shadow .3s ease}
.video-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.2)}
.video-thumbnail{position:relative;height:200px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.video-thumbnail.binary-bg{background:linear-gradient(135deg,#00c9ff 0%,#92fe9d 100%)}
.video-thumbnail.hex-bg{background:linear-gradient(135deg,#fc466b 0%,#3f5efb 100%)}
.video-thumbnail.conversion-bg{background:linear-gradient(135deg,#fdbb2d 0%,#22c1c3 100%)}
.video-thumbnail.addition-bg{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%)}
.video-thumbnail.subtraction-bg{background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%)}
.video-thumbnail.octal-bg{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%)}
.video-thumbnail.complete-bg{background:linear-gradient(135deg,#a18cd1 0%,#fbc2eb 100%)}
.play-button{
  position:absolute;width:80px;height:80px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#333;transition:all .3s ease;box-shadow:0 5px 20px rgba(0,0,0,.3)
}
.video-thumbnail:hover .play-button{transform:scale(1.1);background:#fff}
.video-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;padding:20px 15px 15px;text-align:center}
.video-overlay h4{color:#fff;margin-bottom:5px;font-size:1.1rem}
.video-overlay p{font-size:.9rem;opacity:.9;margin:0}
.video-info{padding:20px;text-align:center}
.video-description{color:#666;font-size:.9rem;line-height:1.5;margin-bottom:15px}
.watch-btn{
  display:inline-block;background:linear-gradient(145deg,#ff6b6b,#ffa500);color:#fff;text-decoration:none;padding:10px 20px;border-radius:20px;font-weight:600;
  transition:all .3s ease;box-shadow:0 4px 15px rgba(255,107,107,.3)
}
.watch-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,107,.4);text-decoration:none;color:#fff}

.learning-resources{margin-top:40px;background:rgba(255,255,255,.1);border-radius:15px;padding:25px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}
.learning-resources h4{color:#2c3e50;margin-bottom:20px;text-align:center}
.resource-links{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}
.resource-btn{
  display:inline-block;background:linear-gradient(145deg,#3498db,#2980b9);color:#fff;text-decoration:none;padding:12px 20px;border-radius:25px;font-weight:600;
  transition:all .3s ease;box-shadow:0 4px 15px rgba(52,152,219,.3)
}
.resource-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(52,152,219,.4);text-decoration:none;color:#fff}

@media (max-width:768px){
  .video-grid{grid-template-columns:1fr;gap:20px}
  .resource-links{flex-direction:column;align-items:center}
  .resource-btn{width:100%;max-width:300px;text-align:center}
}
/* Simple red highlight for negative results */
.abacus.negative-result {
  animation: negativeFlash 1s ease-in-out;
}

@keyframes negativeFlash {
  0% { box-shadow: 0 0 0px rgba(255, 0, 0, 0); }
  50% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.8); }
  100% { box-shadow: 0 0 0px rgba(255, 0, 0, 0); }
}

/* Red glow for negative result box */
#calcResult.negative-result {
  animation: redBoxFlash 1s ease-in-out;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
  border: 2px solid rgba(255, 0, 0, 0.8);
  color: #ff4d4d;
}

@keyframes redBoxFlash {
  0% { box-shadow: 0 0 0 rgba(255, 0, 0, 0); }
  50% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.8); }
  100% { box-shadow: 0 0 0 rgba(255, 0, 0, 0); }
}