*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#eef2f7;color:#162033}header{padding:16px 22px;background:#1f2937;color:white}header h1{margin:0 0 5px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;background:white;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:10}button,.fileLabel{border:0;background:#2563eb;color:white;padding:9px 14px;border-radius:8px;cursor:pointer;font-weight:600}button:disabled{background:#999;cursor:not-allowed}#clearBtn{background:#dc2626}#stopBtn{background:#16a34a}.fileLabel input{display:none}label{display:flex;align-items:center;gap:6px}.mainArea{padding:15px;text-align:center}#board{width:100%;max-width:1280px;background:white;border:2px solid #111;border-radius:10px;touch-action:none;box-shadow:0 6px 20px rgba(0,0,0,.18)}.resultBox{padding:12px 20px}.resultBox a{font-weight:bold;color:#075985}.active{outline:3px solid #f59e0b}

#board {
  touch-action: none;
  user-select: none;
}
.video-card {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 8px 0;
  border-radius: 8px;
  background: #fff;
}


.webcamModal{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);

display:none;

justify-content:center;
align-items:center;

z-index:9999;

}

.webcamBox{

background:white;

padding:15px;

border-radius:10px;

text-align:center;

}

#webcamVideo,
#webcamCanvas{

width:700px;
max-width:95vw;

border:2px solid #333;

}

.webcamButtons{

margin-top:15px;

display:flex;

gap:10px;

justify-content:center;

}
#shapePalette{
  position:absolute;
  top:55px;
  left:20px;

  display:grid;
  grid-template-columns:repeat(4,50px);

  gap:8px;

  padding:10px;

  background:white;

  border:1px solid #bbb;

  border-radius:10px;

  box-shadow:0 4px 12px rgba(0,0,0,.25);

  z-index:1000;
}

.hidden{
  display:none;
}

.shapeIcon{

  width:42px;
  height:42px;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:24px;

  cursor:pointer;

  border-radius:6px;

}

.shapeIcon:hover{

  background:#e7f1ff;

}

.ribbon {
  background: #3102ee;
  border-bottom: 1px solid #cbd5e1;
}

.ribbon-tabs {
  display: flex;
  gap: 3px;
  background: #036af2;
  padding: 5px 8px 0;
}

.tabBtn {
  border: none;
  background: transparent;
  padding: 9px 18px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
}

.tabBtn.active {
  background: white;
  color: #1d4ed8;
}

.ribbon-panel {
  display: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  background: rgb(12, 243, 62);
}

.ribbon-panel.active {
  display: flex;
}

.ribbon-panel button,
.ribbon-panel input[type="text"],
.fileLabel {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  background: #03488e;
  border-radius: 8px;
  cursor: pointer;
}

.shapeIcon {
  width: 44px;
  height: 44px;
  font-size: 24px;
}
#textInput,
#videoTitle
{
  color: white;
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

.ribbon {
  position: relative;
  z-index: 100;
}

.mainArea {
  position: relative;
  z-index: 1;
}
.ribbon,
.ribbon * {
  cursor: default !important;
}

.ribbon input,
.ribbon select,
.ribbon textarea {
  cursor: text !important;
  pointer-events: auto !important;
  user-select: text !important;
}

#fontSize {
  cursor: pointer !important;
}

.mainArea,
#board {
  cursor: crosshair;
}

.uploadStatusBox {
  min-width: 300px;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
}

.uploadBar {
  width: 100%;
  height: 12px;
  background: #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
  margin: 6px 0;
}

#uploadBarFill {
  width: 0%;
  height: 100%;
  background: #2563eb;
  transition: width 0.2s;
}
/* Default */
#startBtn,
#pauseBtn {
    transition: all 0.25s ease;
}

/* Recording started */
.recording {
    background: #e53935 !important;
    color: white !important;
    font-weight: bold;
}

/* Recording paused */
.paused {
    background: #ff9800 !important;
    color: white !important;
    font-weight: bold;
}