:root {
      --bg: #1a201e;
      --panel: #1a1c1e;
      --ink: #e8eef6;
      --muted: #696d6c;
      --accent: #5eead4;
      --accent-strong: #2dd4bf;
      --danger: #ef4444;
      --radius: 16px;
    }
    
    *, *::before, *::after { box-sizing: border-box; }

        textarea, input[type="text"] {
          width: 100%;
          max-width: 100%;
          /* keep your padding/border — they’re now included in the 100% */
        }
    
    body { margin:0; padding:30px 10px; font:16px/1.5 system-ui; color:var(--ink); background:var(--bg); }
    .wrap { max-width:1100px; margin:0 auto; }
    .card {
      border-radius: var(--radius);
    }
    label { display:block; margin:8px 0 6px; color:var(--muted); font-size:13px; }
    textarea {
      width:100%; background:#171c1a;color:var(--ink);
      border:1px solid rgba(255,255,255,0.15);
      border-radius:6px; padding:10px; resize:none;
      font:14px/1.4 ui-monospace;
    }
    textarea:focus { border-color:var(--accent); outline:none; }
    textarea.drag-over { border: 2px dashed var(--accent); }
    
    #command{
        margin-bottom:10px;
    }
    
    button {
      border:0; padding:12px 18px; margin-top:20px;
      border-radius:999px; font-weight:700;
      background:linear-gradient(180deg,var(--accent),var(--accent-strong));
      color:#071a18; cursor:pointer;
      width: 160px;
      font-size: 19px;
    }
    .controls { margin-top:10px; margin-bottom: 120px;}
    .mic { margin:6px 0px 0px 20px;}
    .status { font-size:13px; color:var(--muted); margin-left:8px; }
    .led { width:10px;height:10px;border-radius:999px;display:inline-block;background:#7c8b99;margin-right:6px;}
    .led.live { background:var(--danger); box-shadow:0 0 0 8px rgba(239,68,68,0.1); }
    
      .input-title { font-weight: bold; margin: 5px 0; color: #45dfc9; font-size:19px;text-transform: uppercase; }

      .border-data { border: 2px solid #00ffff !important; }
      .border-text { border: 2px solid #00ff00 !important; }
      .loading-overlay { 
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba(255,255,255,0.5); 
        z-index: 9999;
        justify-content: center;
        align-items: center;
      }
      .loading-overlay.active { display: flex; }
      .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
     .input-file {
      border:0; padding:12px 18px; margin:20px 0px 0px 10px;
      border-radius:999px; font-weight:700;
      background:#00ff00;
      color:#071a18; cursor:pointer;
    }
    .camera-btn {
      width: 90px;
      vertical-align: top;
    }
    .camera-btn img {
      display: block;
      height: 21.5px;
      margin: 0 auto;
    }
    
    #addInputBtn:hover, .input-file:hover, #processBtn:hover{
    	background: #ffffff;
    }
    
    #addInputBtn{
        margin: 20px 0px 70px 30px;
        font-size: 19px;
    }
    
    .input-group{
        background: #252b29;
  padding: 10px 20px 30px;
  border-radius: 6px;
  margin: 60px 0px 50px 0px;
    }
    
      .input-wrapper { position: relative; }
.enter-btn, .convert-btn {
  position: absolute;
  bottom: 10px; /* Aligned on the same horizontal line */
  padding: 6px 14px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 19px;
  font-weight: bold;
  display: none; 
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* First button on the left */
.data-btn {
  left: 10px;
  background: #2ecc71; /* Green */
}

/* Second button offset to the right of the first */
.text-btn {
  left: 180px; /* Adjust this value based on the width of ENTER-DATA */
  background: #3498db; /* Blue */
}

.enter-btn.visible, .convert-btn.visible {
  display: block;
}

.enter-btn:hover, .convert-btn:hover {
  filter: brightness(1.1);
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #252b29;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 20px 30px 30px;
  max-width: 700px;
}
.modal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-btns button {
  width: auto;
}

#processBtn {
  transition: opacity 0.3s ease;
  font-size: 19px;
  width: auto;
  margin: 10px 0px;
}

input[type="checkbox"] {
  transform: scale(1.7);
  margin-right: 10px;
}

.action-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.addedstyle{
    background-color: #cfc;
    color: #000;
    
}


.removedstyle{
    background-color: #a44;
    color: #fff;
    
}


    .data-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 20px 0px;
    }
    .data-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .data-row input {

	border-radius: 4px;
  	padding: 9px 14px;
  	font-size: 19px;
  	outline: none;
  	background: #252b29;
  	margin: 4px 4px;
  	border: 1px #45dfc9 solid;
    }
    .data-row input:focus {
      border-color: #6c8ebf;
    }
    .data-row .dk {
      width: 46%;
      font-weight: 600;
      color: #45dfc9;
    }
    .data-row .dv {
      flex: 1;
      color: #ffffff;
    }
    .data-row .del-row .zz{
      border: none;
      background: none;
      color: var(--ink);
      cursor: pointer;
      font-size: 19px;
      padding: 0 4px;
      border-radius: 50%;
      transition: color 0.2s;
      margin: 0px;
      width: 34px;
      font-weight: normal;
    }
    .data-row .del-row:hover { color: #e55; }
    
    .data-card-add {
      align-self: flex-start;
      margin-top: 20px;
      border: 2px solid #505553;
      background: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-size: 14px;
      color: #505553;
      cursor: pointer;
      font-size: 19px;
      transition: border-color 0.2s, color 0.2s;
      margin-bottom: 30px;
    }
    .data-card-add:hover, #docPanelToggle:hover{ border-color: #fff; color: #fff; }
    
   .processbutton {
   
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 12px;
  background: rgba(26,32,30,0.7);
  border-top: 2px solid #358579;
  backdrop-filter: blur(10px);
}

.processbutton button {
  background: #ff9030;

} 
    
 .input-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remove-input, .data-row .del-row {
    width: 24px;
  background: none;
  border: none;
  color: #505553;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 3px;
  margin: 0;
  border: 1px solid #505553;
}

.remove-input:hover {
  color: #e55;
  border: 1px solid #e55;
}

.doc-tag{
  display: inline-block;
  margin-right: 8px;
  border: 2px var(--muted) solid;
  padding: 2px 5px 5px 8px;
  margin-top: 8px;
  border-radius: 18px;
}

    #docPanel { margin-bottom: 16px; }
    #docPanelToggle { margin-bottom: 8px;
  cursor: pointer;
  background: #171c1a;
  border: 2px solid #505553;
  width: auto;
  color: #505553; 
  font-size: 19px;
  }
    #docPanelBody { display: block;         
  margin-top: 60px;
  padding: 10px 20px 30px;
  border-radius: 10px;
  margin-bottom: 30px;
    border: 1px #303030 solid;    
    }
    #docPanelBody.hidden { display: none; }
    .doc-entry { margin-bottom: 10px; margin-top: 20px;}
    .doc-entry h2 { display: inline; font-size: 1em; margin: 0 6px 0 4px; }
    .doc-tags { font-size: 16px; color:var(--muted) }
  
    .doc-tag-clickable { cursor: pointer; }
    .doc-tag-clickable:hover { color: #fff; border-color: #fff; }
    .doc-tag .ck { visibility: hidden; color: #00f000; font-weight: bold; }
    .doc-tag-found .ck { visibility: visible; }
    .doc-tag-found {border: 1px #00f000 solid; color: #00f000;}

.logo { text-align: center; }

.upload-center {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  min-height: 45vh;
}
.camera-main {
  width: 160px;
  height: 160px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #00ff00;
}
.camera-main:hover { background: #ffffff; }
.lang-select {
  padding: 8px 14px;
  font-size: 19px;
  color: var(--ink);
  background: #252b29;
  border: 1px solid #45dfc9;
  border-radius: 6px;
}
.camera-main img {
  display: block;
  width: 70px;
  margin: 0 auto;
}

.result { margin: 20px 0 80px; }
.result-title h1 { margin: 4px 0 20px; color: #45dfc9; font-size: 26px; line-height: 1.3; }
.title-badge { font-size: 13px; color: var(--muted); text-transform: uppercase; }
.meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 10px; }
.meta-label { color: var(--muted); font-size: 13px; text-transform: uppercase; margin-right: 6px; }
.tags-row { margin: 6px 0; }
.noun-link {
  color: #00f000;
  border-color: #00f000;
  text-decoration: underline;
  cursor: pointer;
}
.noun-link:hover { color: #fff; border-color: #fff; }
#wordModal .modal { margin: 0 15px; }
#wordModalTitle { color: #45dfc9; }
#wordModalText { white-space: pre-line; }
.version {
  background: #252b29;
  padding: 10px 20px 20px;
  border-radius: 6px;
  margin: 30px 0;
}
.version h2 { font-size: 17px; color: #45dfc9; margin: 8px 0 12px; }
.version-text { white-space: pre-line; }
.complete-btn {
  display: block;
  width: 100%;
  margin: 30px 0;
  padding: 18px;
  font-size: 22px;
  border-radius: 6px;
}
.complete-btn:hover { background: #ffffff; }
.original { margin-top: 30px; color: var(--muted); }
.original summary { cursor: pointer; }
.original .version-text { color: var(--ink); margin-top: 12px; }