:root{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#0f1d3d;
  background:#f4f6fb;
  --blue:#2563eb;
  --blue-dark:#1e3a8a;
  --sky:#e0edff;
  --panel:#ffffff;
  --border:#c7d7f5;
  --muted:#5a6784;
  --muted-light:#8a97b5;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh;
  background:linear-gradient(135deg,#f4f8ff 0%,#d9e6ff 60%,#bed7ff 100%);
  color:inherit;
  display:flex; align-items:center; justify-content:center;
  padding:30px 16px;
}
.panel{
  width:100%; max-width:1040px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  box-shadow:0 25px 80px rgba(37,99,235,.15);
  position:relative;
}
header h1{margin:0;font-size:clamp(26px,4vw,42px);color:#0b1a3a;}
header p{color:var(--muted); margin-top:8px;}
.status-bar{
  display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap;
  padding:12px 16px;border-radius:16px;
  background:#eef3ff;border:1px solid #dae4ff;
}

.status-text{color:var(--muted-light);font-size:14px;}
form{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
label{font-weight:600;color:#142751;margin-bottom:4px;display:inline-block;}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=url],input[type=tel],select,textarea{
  width:100%; border-radius:14px; border:1px solid var(--border);
  background:#f9fbff; color:#0f1d3d; padding:12px 15px; font-size:16px;
  appearance:none;
}
input[type=color]{
  border:1px solid var(--border);
  border-radius:12px;
  width:100%;
  min-height:48px;
  padding:0;
  background:#fff;
  cursor:pointer;
}
.file-drop{
  border:2px dashed #c7d7f5;
  border-radius:16px;
  padding:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fdfefe;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
  text-align:center;
}
.file-drop:hover{
  border-color:var(--blue);
  background:#edf3ff;
}
.file-drop span{
  font-weight:600;
  color:var(--blue-dark);
}
.file-drop input{display:none;}
.file-note{font-size:13px;color:var(--muted-light);}
input[type=file]{
  padding:10px 14px;
  border-radius:14px;
  border:1px dashed #c7d7f5;
  background:#fdfefe;
  color:#1a2750;
  font-size:15px;
  word-break:break-all;
  max-width:100%;
  box-sizing:border-box;
}
input[type=file]::file-selector-button{
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  padding:10px 14px;
  margin-right:12px;
  cursor:pointer;
  font-weight:600;
}
input[type=file]::-webkit-file-upload-button{
  height:100%;
}
input[type=file]:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(37,99,235,.25);
  border-color:var(--blue);
}
select{
  background-image:linear-gradient(45deg,transparent 50%,#7e8bb1 50%),linear-gradient(135deg,#7e8bb1 50%,transparent 50%),linear-gradient(to right,#dbe6ff,#dbe6ff);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%,calc(100% - 40px) 0;
  background-size:6px 6px,6px 6px,1px 70%;
  background-repeat:no-repeat;
  padding-right:48px;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(37,99,235,.25);
  border-color:var(--blue);
}
button{
  border:none; border-radius:14px; padding:12px 18px; font-weight:700;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(37,99,235,.25);
}
button:hover{transform:translateY(-2px);}
button:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;}
.ghost{
  background:#e3ecff;
  color:var(--blue-dark);
  box-shadow:none;
}
.copy-btn{
  font-size:13px;
  padding:8px 14px;
}
.copy-btn.error-state{
  background:#fee2e2;
  color:#b91c1c;
}
.error{
  background:#fee2e2;
  border:1px solid #fecaca;
  padding:10px 14px;
  border-radius:14px;
  color:#b91c1c;
}
.badge{
  display:inline-flex;padding:4px 10px;border-radius:999px;font-size:12px;
  background:#e4edff;color:#1d3b7a;font-weight:600;
}
.tool-grid{display:grid;gap:18px;margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.tool{
  border-radius:18px;padding:20px;background:#f5f8ff;border:1px solid #d9e7ff;
  display:flex;flex-direction:column;gap:12px;
}
.tool h3{margin:0;font-size:18px;color:#0b1f46;}
.tool-meta{color:#546285;font-size:14px;margin-top:-4px;}
.tool.upcoming{border-style:dashed;background:#edf2ff;}
.output{
  font-family:"JetBrains Mono",monospace;background:#eef2ff;padding:10px;border-radius:12px;min-height:40px;
  color:#0f1b38;
}
textarea.small{min-height:140px;resize:vertical;}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.actions button{flex:1;min-width:120px;}
.flash{box-shadow:0 0 0 2px rgba(37,99,235,.3);transition:box-shadow .4s ease;}
nav.tabs{display:none;}
.nav-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.nav-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d6e3ff;
  border-radius:14px;
  background:#fff;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.nav-label{font-weight:600;color:#122250;font-size:14px;}
.nav-icon{display:flex;flex-direction:column;gap:4px;}
.nav-icon span{
  display:block;
  width:18px;height:2px;
  background:#1a2d53;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle.active .nav-icon span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.active .nav-icon span:nth-child(2){opacity:0;}
.nav-toggle.active .nav-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-label{font-weight:600;color:#122250;font-size:14px;}
.nav-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
  z-index:90;
}
.nav-drawer{
  position:fixed;
  top:20px;
  right:20px;
  width:min(320px, calc(100% - 40px));
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(4,7,18,.25);
  z-index:100;
  padding:20px;
  transform:translateX(120%);
  transition:transform .25s ease;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  overscroll-behavior:auto;
}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.nav-drawer__header h3{margin:0;color:#0d1f44;}
.nav-close{
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  color:#122250;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-drawer__links{display:flex;flex-direction:column;gap:10px;}
.nav-drawer__links a{
  text-decoration:none;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d6e3ff;
  color:#122250;
  font-weight:600;
}
.nav-drawer__links a.active{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  border-color:transparent;
}
.nav-drawer__links a:hover{border-color:var(--blue);}
.nav-drawer__footer{margin-top:20px;padding-top:12px;border-top:1px solid #e3ecff;display:flex;justify-content:flex-end;}
.logout-link{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background:linear-gradient(135deg,#f87171,#b91c1c);
  padding:10px 18px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(185,28,28,.3);
}
.logout-link:hover{opacity:.9;}
.scanner-tool{display:flex;flex-direction:column;gap:24px;}
.scan-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,0.8fr);gap:20px;align-items:flex-start;}
.scan-video{position:relative;border:1px solid #dbe6ff;border-radius:18px;overflow:hidden;background:#000;}
.scan-video video{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;}
.scan-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.4);color:#fff;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.6);}
.scan-toast{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:linear-gradient(135deg,#a3e635,#4ade80);
  color:#0f172a;
  text-align:center;
  padding:14px;
  font-weight:600;
  letter-spacing:.02em;
  z-index:200;
  box-shadow:0 10px 30px rgba(22,101,52,.3);
  transition:transform .3s ease, opacity .3s ease;
  transform:translateY(-100%);
  opacity:0;
}
.scan-toast.visible{
  transform:translateY(0);
  opacity:1;
}
.scan-controls{display:flex;flex-direction:column;gap:12px;}
.scan-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px;}
.scan-table th,.scan-table td{padding:8px 10px;border-bottom:1px solid #e2e8ff;text-align:left;vertical-align:top;}
.scan-table th{text-transform:uppercase;font-size:12px;color:#7c8aa8;}
.scan-value{word-break:break-word;}
.table-wrapper{overflow:auto;border:1px solid #dbe6ff;border-radius:16px;}
.scan-time{font-size:12px;color:#7c8aa8;}
.scan-table tr.flash{animation:flashRow .4s;}
@keyframes flashRow{from{background:#fff9d6;}to{background:transparent;}}

main{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.page-intro{color:var(--muted);}
.overview-block{margin-top:36px;}
.section-heading h2{margin:2px 0 6px;color:#0d1f44;}
.section-heading p{margin:4px 0 0;color:var(--muted);}
.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.18em;color:#7b8db1;margin:0;}
.focus-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
.chip{padding:4px 10px;border-radius:999px;background:#e4edff;font-size:13px;color:#1d3b7a;}
.badge-soft{background:#d6e3ff;color:#1d3b7a;}
.empty-state{
  border:1px dashed #c7d7f5;
  background:#f8fbff;
  border-radius:18px;
  padding:24px;
  margin-top:18px;
}
.empty-state.compact{padding:20px;}
.empty-state h3{margin:0 0 6px;color:#112756;}
.empty-state p{margin:6px 0;color:var(--muted);}

@media (max-width: 768px){
  body{
    padding:16px 12px;
    align-items:center;
  }
  .panel{
    padding:20px;
    border-radius:18px;
    box-shadow:0 12px 40px rgba(37,99,235,.18);
  }
  header h1{
    font-size:clamp(22px,7vw,30px);
    line-height:1.2;
  }
  header p{
    font-size:15px;
  }
  .nav-bar{
    margin-bottom:12px;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
  }
  .nav-toggle{
    width:100%;
    justify-content:space-between;
  }
  .tool-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .tool{
    padding:16px;
  }
  .tool h3{
    font-size:17px;
  }
  .actions{
    flex-direction:column;
  }
  .actions button{
    flex:unset;
    width:100%;
  }
  form{
    gap:10px;
  }
  input[type=text],input[type=number],textarea{
    font-size:15px;
    padding:10px 12px;
  }
  table.list-table,
  table.share-table{
    font-size:13px;
  }
  table.list-table th,
  table.list-table td,
  table.share-table th,
  table.share-table td{
    padding:10px 6px;
  }
  .panel header{
    margin-bottom:12px;
  }
}
.empty-state .muted{color:var(--muted-light);font-size:14px;}
.hash-form form{margin-top:12px;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.inline-option{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);}
.inline-option input{margin:0;}
.field-block{display:flex;flex-direction:column;gap:6px;}
.checkbox-block .inline-option{margin:0;}
.color-field{display:flex;flex-direction:column;gap:6px;}
.color-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:14px 0;
}
.hue-range{
  margin-top:8px;
  height:14px;
  border-radius:999px;
  border:none;
  appearance:none;
  background:linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);
}
.hue-range::-webkit-slider-thumb{
  appearance:none;
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(0,0,0,.3);
  background:#0f1d3d;
  cursor:pointer;
}
.hue-range::-moz-range-thumb{
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(0,0,0,.3);
  background:#0f1d3d;
  cursor:pointer;
}
.muted-info{color:var(--muted-light);font-size:14px;margin-top:12px;}
.hash-results{display:grid;gap:18px;margin-top:26px;}
.hash-card{background:#f5f8ff;border:1px solid #d9e7ff;border-radius:18px;padding:20px;}
.param-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:18px;}
.param-card{border:1px solid #dbe6ff;border-radius:18px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:10px;}
.param-card h4{margin:0;color:#0d1f44;}
.param-hint{font-size:13px;color:var(--muted-light);margin:0;}
.param-fields{display:grid;gap:12px;}
.hash-row{margin-top:14px;}
.hash-row:first-of-type{margin-top:10px;}
.hash-row-head{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.hash-hint{font-size:13px;color:var(--muted-light);}
.hash-code{
  display:block;margin-top:6px;padding:12px;border-radius:12px;background:#edf2ff;font-family:"JetBrains Mono",monospace;
  font-size:13px;word-break:break-all;color:#0b1d44;
}
.template-fields{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.template-fields .field{display:flex;flex-direction:column;gap:6px;}
.template-fields textarea{min-height:140px;}
.template-hint{margin-top:6px;color:var(--muted-light);}
.code-studio{display:flex;flex-direction:column;gap:28px;}
.code-tool form{margin-top:0;}
.tab-bar{
  display:flex;
  gap:8px;
  background:#eef3ff;
  border:1px solid #d3e0ff;
  border-radius:18px;
  padding:6px;
  width:100%;
}
.tab-btn{
  flex:1;
  border:none;
  background:transparent;
  color:#516087;
  font-weight:600;
  padding:12px 20px;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.tab-btn.active{
  background:#fff;
  color:#0f1d3d;
  box-shadow:0 10px 25px rgba(37,99,235,.15);
  transform:translateY(-2px);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.generator-layout{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(260px,0.9fr);
  gap:32px;
  margin-top:20px;
  align-items:flex-start;
}
.generator-form{
  background:#f9fbff;
  border:1px solid #dbe6ff;
  border-radius:18px;
  padding:20px;
  min-width:0;
  overflow:hidden;
}
.preview-card{
  margin-top:18px;
  border:1px solid #dbe6ff;
  border-radius:16px;
  padding:18px;
  background:#fff;
  min-width:0;
  overflow:hidden;
}
.preview-card h4{margin:0 0 8px;color:#0d1f44;}
.preview{
  min-height:260px;
  border-radius:16px;
  background:#f4f7ff;
  border:1px dashed #b9c8eb;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.preview canvas,.preview img{max-width:100%;height:auto;}
.preview .placeholder{color:var(--muted-light);margin:0;text-align:center;}
.resize-results{margin-top:32px;}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:16px;}
.result-card{
  border:1px solid #dbe6ff;
  border-radius:18px;
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.preview-wrap{width:100%;max-height:320px;overflow:auto;border-radius:12px;border:1px solid #e2e8ff;background:#f8faff;padding:8px;}
.preview-wrap img{max-width:100%;height:auto;display:block;margin:0 auto;}
.split-tool,
.pdf-tool{display:flex;flex-direction:column;gap:20px;}
.split-grid,
.pdf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.doc-inputs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.split-row,
.pdf-row{display:flex;gap:12px;flex-wrap:wrap;}
.split-actions,
.pdf-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.split-preview-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(50px,1fr));
  gap:8px;
}
.split-preview-grid img{width:100%;height:auto;border-radius:8px;border:1px solid #dbe6ff;}
.quality-wrap{display:flex;flex-direction:column;gap:4px;}
.quality-wrap input[type=range]{width:100%;}
.quality-block .quality-head{display:flex;justify-content:space-between;align-items:center;}
.quality-block .quality-head span{font-weight:600;color:var(--blue-dark);}
.pdf-tool .split-preview-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}
.doc-list,
.reorder-list{
  list-style:none;
  padding:0;
  margin:16px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.doc-list li,
.reorder-list li{
  padding:10px 14px;
  border-radius:12px;
  border:1px dashed #c7d7f5;
  background:#f8fbff;
  cursor:grab;
}
.doc-list .doc-placeholder{
  cursor:auto;
  color:#7c8aa8;
  text-align:center;
}
.doc-list li.dragging,
.reorder-list li.dragging{opacity:.6;}
.split-download{
  display:none;
  text-decoration:none;
  padding:12px 18px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  font-weight:700;
  text-align:center;
  box-shadow:0 8px 20px rgba(37,99,235,.25);
}
.split-download:hover{transform:translateY(-2px);}
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  background:#0f172a;
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 20px 40px rgba(15,23,42,.35);
  opacity:0;
  transform:translate(-50%,10px);
  transition:opacity .25s ease, transform .25s ease;
  z-index:140;
  pointer-events:none;
  max-width:320px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast.visible{opacity:1;transform:translate(-50%,0);}
.toast.toast-right{left:auto;right:24px;transform:translateY(10px);}
.toast.toast-right.visible{transform:translateY(0);}
.toast-message{
  font-size:.95rem;
  line-height:1.3;
}
.toast-progress{
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}
.toast-progress-bar{
  width:100%;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.4));
  transform-origin:right center;
}
.toast-progress-bar.animate{
  animation:toastProgress 6s linear infinite;
}
@keyframes toastProgress{
  from{transform:scaleX(1);}
  to{transform:scaleX(0);}
}
@media (max-width:600px){
  body{padding:14px 10px;}
  .panel{padding:18px;}
  nav.tabs{justify-content:flex-start;}
  .hash-row-head{flex-direction:column;align-items:flex-start;}
  .param-grid{grid-template-columns:1fr;}
  .form-grid,
  .form-grid.two,
  .split-grid,
  .pdf-grid,
  .result-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .generator-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
  .scan-grid{
    grid-template-columns:1fr;
  }
  .color-grid{
    grid-template-columns:1fr;
  }
  .split-row,
  .pdf-row{
    grid-template-columns:1fr;
  }
  .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .split-row input[type=number],
  .pdf-row input[type=number]{
    width:100%;
  }
  .token-inputs{
    flex-direction:column;
    align-items:stretch;
  }
  .token-inputs input[type=number],
  .token-inputs select,
  .token-inputs button{
    width:100%;
  }
  .doc-list li,
  .reorder-list li{
    font-size:14px;
    line-height:1.4;
  }
  .split-preview-grid,
  .pdf-tool .split-preview-grid{
    grid-template-columns:repeat(var(--cols,4),minmax(40px,1fr));
  }
  .share-table{
    font-size:13px;
  }
  .share-table th,
  .share-table td{
    padding:6px;
  }
  .actions button,
  button{
    width:100%;
  }
}
.note-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:18px;
}
.note-card{
  border:1px solid #dbe6ff;
  border-radius:18px;
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.note-card.editing{
  box-shadow:0 0 0 2px rgba(37,99,235,.25);
}
.note-card textarea{
  min-height:140px;
  resize:vertical;
}
.note-title{
  border:1px solid #dbe6ff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
}
.note-card textarea:disabled,
.note-title:disabled{
  background:#f5f7ff;
  color:#5a6784;
}
.note-meta{
  font-size:13px;
  color:#7c8aa8;
}
.note-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.token-toast{
  position:fixed;
  top:16px;
  left:50%;
  width:clamp(280px,90vw,420px);
  transform:translate(-50%,-150%);
  opacity:0;
  z-index:260;
  transition:transform .3s ease,opacity .3s ease;
}
.token-toast.visible{
  transform:translate(-50%,0);
  opacity:1;
}
.token-card{
  background:linear-gradient(135deg,#fde68a,#f97316);
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 30px rgba(248,115,22,.35);
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(249,115,22,.4);
  color:#431407;
}
.token-card h4{margin:0;color:#7c2d12;}
.token-card p{margin:0;color:#7c2d12;}
.token-card input{
  border:1px solid #dbe6ff;
  border-radius:12px;
  padding:10px 12px;
  font-size:16px;
}
.token-actions{display:flex;gap:10px;justify-content:flex-end;}
.note-color-picker{
  font-size:13px;
  color:#5a6784;
  display:flex;
  align-items:center;
  gap:8px;
}
.note-color-picker input[type=color]{
  width:48px;
  min-height:32px;
  padding:0;
  border-radius:10px;
  border:1px solid #c7d7f5;
}
.toast-global{
  position:fixed;
  top:16px;
  left:50%;
  width:clamp(280px,90vw,1040px);
  padding:14px;
  text-align:center;
  font-weight:600;
  letter-spacing:.02em;
  z-index:250;
  transform:translate(-50%,-150%);
  opacity:0;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(15,23,42,.25);
  transition:transform .3s ease,opacity .3s ease;
}
.toast-global.visible{
  transform:translate(-50%,0);
  opacity:1;
}
.toast-global.success{
  background:linear-gradient(135deg,#a3e635,#4ade80);
  color:#0f172a;
}
.toast-global.error{
  background:linear-gradient(135deg,#fecaca,#f87171);
  color:#450a0a;
}
.toast-global.warning{
  background:linear-gradient(135deg,#fcd34d,#fbbf24);
  color:#422006;
}
.toast-global.info{
  background:linear-gradient(135deg,#c7d7ff,#94b7ff);
  color:#0f172a;
}

.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,12px);
  background:rgba(23,35,58,.95);
  color:#f5f8ff;
  padding:16px 20px;
  border-radius:16px;
  box-shadow:0 16px 30px rgba(7,12,26,.45);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:180;
  min-width:240px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast.visible{
  opacity:1;
  transform:translate(-50%,0);
}
.toast-message{
  font-weight:600;
  letter-spacing:.02em;
}
.toast-progress{
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}
.toast-progress-bar{
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#fdfdff 0%,#a5c0ff 100%);
  transform-origin:left center;
  animation:toastBar 3s linear infinite;
}
@keyframes toastBar{
  from{transform:scaleX(1);}
  to{transform:scaleX(0);}
}

/* --- Tech Blue Theme Overrides --- */
:root{
  color:#f1f5ff;
  background:#132749;
  --blue:#6aa2ff;
  --blue-dark:#3a66e8;
  --sky:#273b5f;
  --panel:#2d4471;
  --border:#3a517b;
  --muted:#b7c7ec;
  --muted-light:#e8efff;
}

body{
  background:radial-gradient(circle at top,#3f6297 0%,#243d67 45%,#132749 100%);
  color:#f1f5ff;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 28px 70px rgba(10,16,32,.55);
}

header h1{color:#f6f8ff;text-shadow:0 4px 14px rgba(0,0,0,.45);}
header p{color:var(--muted);}

.status-bar{
  background:rgba(106,162,255,.18);
  border:1px solid rgba(106,162,255,.32);
}
.status-text{color:var(--muted-light);}

form{color:#f6f8ff;}
label{color:#e6edff;}

input[type=text],input[type=number],input[type=password],input[type=email],input[type=url],input[type=tel],select,textarea{
  border:1px solid rgba(117,150,204,.75);
  background:#182a4a;
  color:#fdfdff;
}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=tel]:focus,textarea:focus,select:focus{
  border-color:#6aa2ff;
  box-shadow:0 0 0 2px rgba(106,162,255,.35);
}

input[type=file]{
  border-color:rgba(106,162,255,.4);
  background:#1a2d50;
  color:#f4f7ff;
}
input[type=file]::file-selector-button{
  background:linear-gradient(120deg,#6aa2ff,#3d6cf0);
}

.file-drop{
  border-color:rgba(106,162,255,.4);
  background:rgba(25,39,66,.65);
  color:#f1f4ff;
}
.file-drop span{color:#c3d4ff;}
.file-drop:hover{background:rgba(106,162,255,.22);}

.badge{
  background:rgba(106,162,255,.2);
  color:#eef3ff;
}

.tool{
  background:rgba(30,48,80,.94);
  border:1px solid rgba(120,162,228,.35);
  color:#f5f7ff;
}
.tool h3{color:#fbfdff;}
.muted-info{color:#c7d3ef;}

.doc-list li,
.reorder-list li{
  border:1px dashed rgba(106,162,255,.3);
  background:rgba(24,38,64,.88);
  color:#f0f4ff;
}
.doc-list .doc-placeholder{color:#c0caea;}

.actions button{
  background:linear-gradient(135deg,#6aa2ff,#3d6cf0);
  box-shadow:0 12px 28px rgba(10,14,30,.5);
}
.actions .ghost,
.ghost{
  background:rgba(255,255,255,.15);
  color:#d3dbff;
  border:1px solid rgba(255,255,255,.28);
}

.nav-toggle{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  box-shadow:0 12px 24px rgba(12,16,30,.45);
}
.nav-label{color:#eff3ff;}
.nav-icon span{background:#d1defc;}

.toast-global{
  background:rgba(22,34,58,.95);
  color:#f4f7ff;
}

.result-card,
.note-card,
.split-download,
.preview-wrap{
  background:rgba(29,45,76,.9);
  border:1px solid rgba(255,255,255,.15);
  color:#f6f9ff;
}

.bggen-main{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  margin-top:24px;
}
@media (max-width:900px){
  .bggen-main{
    grid-template-columns:1fr;
  }
}
.bg-form .angle-group{
  display:flex;
  align-items:center;
  gap:10px;
}
.bg-form input[type=range]{
  flex:1;
}
.angle-group > input[type=number]{
  width:70px;
  text-align:center;
}
.color-stop-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
}
.color-stop-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}
.color-stop-row{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  padding:12px;
  border-radius:14px;
  background:rgba(19,31,56,.8);
  border:1px solid rgba(255,255,255,.08);
}
.color-stop-row label{
  font-size:14px;
  color:#d4defa;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.color-stop-row input[type=color]{
  width:100%;
  height:40px;
  border:none;
  border-radius:10px;
  padding:0;
}
.pos-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.pos-group input[type=number]{
  width:70px;
}
.color-stop-remove{
  align-self:flex-start;
  font-size:20px;
  line-height:1;
  padding:8px 12px;
}

.bg-preview-tool textarea{
  background:#182a4a;
  border:1px solid rgba(255,255,255,.15);
  color:#f5f7ff;
}
.bg-preview{
  width:100%;
  height:260px;
  border-radius:18px;
  background:linear-gradient(135deg,#6aa2ff,#3d6cf0);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 25px rgba(0,0,0,.25);
  margin-bottom:16px;
}
.preset-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:14px;
}
.preset-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(26,40,70,.8);
  border-radius:14px;
  padding:14px;
  color:#f2f6ff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.preset-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(12,16,30,.45);
}
.preset-card small{
  color:#c5d3ee;
}