label{display:block;margin:12px 0 4px;color:#a59e95;font-size:12px}
label.inl{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0;margin-inline-end:16px;cursor:pointer}

textarea,select,
input[type=text],input[type=password],input[type=number],input[type=datetime-local]{
  width:100%;
  font-family:Consolas,"Courier New",monospace;font-size:13px;
  color:#e6e0d6;
  background:#050505;
  border:1px solid #2e2e2e;border-top-color:#000;border-left-color:#000;
  padding:8px 10px;outline:none;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.9);
}
textarea{min-height:110px;resize:vertical}
textarea.tall{min-height:160px}
textarea[dir=auto],input[dir=auto]{font-family:Tahoma,Consolas,sans-serif}
select{font-family:Tahoma,sans-serif}
select.auto{width:auto}
input[type=range]{width:100%}
input.narrow{width:80px}
.grow{flex:1}
.mt{margin-top:6px}
input:focus,textarea:focus,select:focus{border-color:var(--blood)}

.bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.bar.tight{margin-top:0}

button{
  font-family:Tahoma,sans-serif;font-size:12px;font-weight:bold;cursor:pointer;
  color:#eee;padding:6px 16px;
  border:1px solid #000;border-radius:3px;
  background:linear-gradient(#4a4a4a 0%,#2b2b2b 50%,#1a1a1a 51%,#262626 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.8);
  text-shadow:0 -1px 0 #000;
}
button:hover{background:linear-gradient(#5a5a5a 0%,#363636 50%,#222 51%,#303030 100%)}
button.red{background:linear-gradient(#c41a1f 0%,#8c0a0e 50%,#6a0508 51%,#850a0d 100%);border-color:#2a0000}
button.red:hover{background:linear-gradient(#e0262b 0%,#a30e12 50%,#7c070a 51%,#9a0d10 100%)}
button:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.8);transform:translateY(1px)}

.out{
  margin-top:12px;min-height:44px;
  background:#030303;border:1px solid #1d1d1d;border-inline-start:3px solid var(--blood);
  padding:10px 12px;
  font-family:Consolas,"Courier New",monospace;font-size:12.5px;color:#e8dfd2;
  direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-all;
}
.out.txt{direction:inherit;text-align:start;font-family:Tahoma,sans-serif;unicode-bidi:plaintext;word-break:break-word}
.out.scroll{max-height:260px;overflow:auto}
.out:empty::before{content:"...";color:#444}
.out .k{color:#8d8682}
.out .v{color:#ff6b5f}

.note{font-size:11px;color:#6d6762;margin-top:8px}
.alert{margin-top:10px;padding:8px 12px;border:1px solid #4a0d0d;background:#1a0505;color:#ffb3ab}
.hidden{display:none}
.err{color:#ff5a4f !important}
.ok{color:#78c27a !important}
.warn{color:#f0a04b !important}

.meter{height:6px;background:#111;border:1px solid #222;margin-top:8px}
.meter i{display:block;height:100%;width:0;transition:width .25s,background .25s}
.meter i.red{background:var(--blood2)}

table.kv{width:100%;border-collapse:collapse;margin-top:12px;font-family:Consolas,Tahoma,monospace;font-size:12.5px}
table.kv td{border-bottom:1px solid #1c1c1c;padding:7px 8px;vertical-align:top;word-break:break-all;unicode-bidi:plaintext;text-align:start}
table.kv td:first-child{color:var(--ash);width:150px;word-break:normal;font-family:Tahoma,sans-serif}
table.kv td.copy{width:60px}
table.kv button{padding:2px 8px;font-size:11px}

mark{background:#6a0508;color:#fff;padding:0 1px}
mark.inv{background:#8a5a00;color:#fff;font-size:10px}
.diff div{padding:0 6px}
.diff .add{background:#0d2a10;color:#9be59e}
.diff .del{background:#2e0a0a;color:#ff9a92;text-decoration:line-through}

.drop{
  border:1px dashed #3a1a1a;padding:22px;text-align:center;color:var(--ash);cursor:pointer;background:#060404;
}
.drop:hover,.drop.over{border-color:var(--blood2);color:var(--bone)}
.drop input{display:none}
.prev{max-width:100%;max-height:240px;margin-top:12px;display:none;border:1px solid #222}

.lv0{color:#e0503f}.lv1{color:#e67e22}.lv2{color:#8fc44a}.lv3{color:#3fb950}

canvas.board{display:none;max-width:100%;margin-top:12px;border:1px solid #2a1414;cursor:crosshair;touch-action:none}

table.grid{border-collapse:collapse;margin-top:6px}
table.grid th,table.grid td{padding:6px 14px;border:1px solid #1f1414;text-align:center;font-weight:normal}
table.grid th{color:var(--ash);font-size:12px;background:#0b0606}
table.grid input{width:16px;height:16px;cursor:pointer}

.nojs{margin:20px 0;padding:12px;border:1px solid #4a0d0d;background:#1a0505;color:#ffb3ab;text-align:center}

.big{font-family:"Courier New",monospace;font-size:44px;letter-spacing:8px;color:#ff4d42;text-shadow:0 0 14px rgba(209,20,26,.6);direction:ltr;text-align:center;margin:10px 0 0}
.big small{display:block;font-family:Tahoma,sans-serif;font-size:12px;letter-spacing:1px;color:var(--ash);text-shadow:none}

canvas.qrimg{display:block;margin-top:12px;max-width:100%;image-rendering:pixelated;border:6px solid #fff}
canvas.qrimg.hidden,video.hidden{display:none}
video.cam{display:block;max-width:100%;max-height:300px;margin-top:10px;border:1px solid #2a1414}

select.list{font-family:Tahoma,sans-serif;min-height:180px;padding:4px}
select.list option{padding:4px 6px}
select.list option:checked{background:#5a0609 linear-gradient(#5a0609,#5a0609);color:#fff}

input[type=range].q{width:160px;vertical-align:middle}
.big.ok{color:#5fd068;text-shadow:0 0 14px rgba(63,185,80,.4)}
.big.warn{color:#f0a04b;text-shadow:0 0 14px rgba(240,160,75,.4)}
.big.err{color:#ff4d42}

table.kv input{font-size:12px;padding:4px 8px}
.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:700px){.cols3{grid-template-columns:1fr}}