/* ══════════════════════════════════════════════════════════
   夜班 · 门房  |  NIGHT DOORMAN
   监控室配色：暗金属 + CRT 绿 + 警示红
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:        #08090b;
  --bg-2:      #0d0f13;
  --panel:     #12151a;
  --panel-2:   #171b22;
  --line:      #232a33;
  --line-2:    #2f3945;
  --txt:       #c6cdd6;
  --txt-dim:   #6d7784;
  --txt-faint: #414a55;
  --green:     #6ef2a0;
  --green-dim: #2b6b45;
  --amber:     #f0b34e;
  --red:       #e24a4a;
  --red-dim:   #6b2525;
  --blue:      #64a8ff;
  --mono: "Consolas","SF Mono","DejaVu Sans Mono","Courier New",monospace;
  --cjk: "Microsoft YaHei","PingFang SC","Noto Sans SC","Hiragino Sans GB",sans-serif;
}

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

html,body{height:100%}

body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #141a22 0%, transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:var(--cjk);
  font-size:13px;
  overflow:hidden;
  user-select:none;
  -webkit-font-smoothing:antialiased;
}

#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  min-width:1180px;
}

.hidden{display:none !important}

/* ─────────── 顶部状态条 ─────────── */

#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:52px;
  padding:0 16px;
  background:linear-gradient(180deg,#141922,#0b0e13);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 1px 0 #000, 0 0 24px #000 inset;
  flex:none;
}

.brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand-cn{font-size:16px;font-weight:700;letter-spacing:3px;color:#dfe6ef}
.brand-en{font-family:var(--mono);font-size:9px;letter-spacing:2.4px;color:var(--txt-faint)}

.topbar-mid{display:flex;align-items:center;gap:20px;flex:1;justify-content:center}

.clockbox{display:flex;align-items:center;gap:10px}
#clock{
  font-family:var(--mono);
  font-size:19px;
  letter-spacing:2px;
  color:var(--amber);
  text-shadow:0 0 10px rgba(240,179,78,.45);
  min-width:70px;
}
.clockbar{
  width:190px;height:6px;
  background:#0a0c10;
  border:1px solid var(--line);
  overflow:hidden;
}
#clockfill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--green-dim),var(--amber));
  transition:width .4s linear;
}

.topbar-right{display:flex;gap:14px}
.stat{
  display:flex;flex-direction:column;align-items:center;
  padding:2px 12px;border-left:1px solid var(--line);
}
.stat b{font-family:var(--mono);font-size:17px;color:#e8eef6;line-height:1.1}
.stat span{font-size:9px;letter-spacing:1.6px;color:var(--txt-faint)}

.ghost-btn{
  font-family:var(--cjk);font-size:11px;letter-spacing:1.5px;
  color:var(--txt-dim);background:#0e1116;
  border:1px solid var(--line-2);padding:6px 12px;cursor:pointer;
  transition:.15s;
}
.ghost-btn:hover{color:var(--green);border-color:var(--green-dim);background:#0f1a14}

/* ─────────── 主区域 ─────────── */

main{
  flex:1;
  display:grid;
  grid-template-columns:186px minmax(620px,1fr) 372px;
  gap:12px;
  padding:12px;
  min-height:0;
}

.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 2px 0 #05070a, 0 0 0 1px #05070a inset;
  display:flex;flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.panel-head{
  flex:none;
  font-size:11px;letter-spacing:2.5px;color:var(--txt-dim);
  padding:9px 11px;
  border-bottom:1px solid var(--line);
  background:#0d1015;
  display:flex;align-items:center;justify-content:space-between;
}

.tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.5px;
  color:var(--txt-faint);border:1px solid var(--line-2);
  padding:1px 6px;border-radius:2px;background:#0a0d11;
}
.tag.ok{color:var(--green);border-color:var(--green-dim)}
.tag.bad{color:var(--red);border-color:var(--red-dim)}
.tag.warn{color:var(--amber);border-color:#6b5223}

/* ─────────── 左：摄像头列表 ─────────── */

#camlist{min-width:0}

#cam-buttons{padding:7px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}

.cam-btn{
  position:relative;
  display:block;width:100%;text-align:left;
  font-family:var(--cjk);font-size:11.5px;color:var(--txt-dim);
  background:#0d1116;
  border:1px solid var(--line);
  border-left:3px solid #1c2229;
  padding:8px 9px 8px 11px;
  cursor:pointer;transition:.13s;
}
.cam-btn:hover{background:#131922;color:var(--txt);border-left-color:var(--line-2)}
.cam-btn .num{
  font-family:var(--mono);font-size:9px;color:var(--txt-faint);
  display:block;letter-spacing:1.5px;margin-bottom:2px;
}
.cam-btn.active{
  background:#0f1d17;color:var(--green);
  border-color:var(--green-dim);border-left-color:var(--green);
  box-shadow:0 0 12px rgba(110,242,160,.1) inset;
}
.cam-btn.active .num{color:var(--green-dim)}
/* 这个通道现在有动静：大门外有人、或者楼里出了什么事。
   注意：alert 是加在 .cam-btn 自己身上的，所以小点得用伪元素画，
   原来写成 `.cam-btn .alert`（后代选择器）是永远匹配不到的。 */
.cam-btn.alert::after{
  content:"";
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 8px var(--red);animation:pulse 1s infinite;
}
.cam-btn.active.alert::after{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.cam-btn .nobody{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:8px;color:var(--txt-faint);letter-spacing:1px;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.panel-foot{
  margin-top:auto;flex:none;
  display:flex;align-items:center;gap:5px;
  padding:8px 10px;border-top:1px solid var(--line);background:#0b0e12;
}
.key{
  font-family:var(--mono);font-size:9px;color:var(--txt-dim);
  border:1px solid var(--line-2);border-radius:2px;
  padding:1px 5px;background:#12161c;
}
.foot-txt{font-size:9.5px;color:var(--txt-faint);margin-left:3px;letter-spacing:.6px}

/* ─────────── 中：监控画面 ─────────── */

#stage{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}

#screen-frame{
  position:relative;
  flex:1;
  min-height:0;
  background:#000;
  border:2px solid #1a1f27;
  border-radius:5px;
  box-shadow:
    0 0 0 1px #000,
    0 0 40px rgba(0,0,0,.9) inset,
    0 6px 22px rgba(0,0,0,.7);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

#screen{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

#scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    rgba(0,0,0,.30) 0px,
    rgba(0,0,0,.30) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) 3px);
  mix-blend-mode:multiply;
  opacity:var(--scanline-op,.75);
}

#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,.82) 100%);
  opacity:var(--vignette-op,1);
}

#screen-ui{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}

.rec{
  position:absolute;top:11px;left:14px;
  font-size:11px;letter-spacing:2px;color:#ff5a5a;
  display:flex;align-items:center;gap:6px;text-shadow:0 0 7px rgba(255,0,0,.6);
}
.rec i{
  width:8px;height:8px;border-radius:50%;background:#ff3b3b;
  animation:pulse 1.1s infinite;
}

#cam-name{
  position:absolute;bottom:11px;left:14px;
  font-size:11.5px;letter-spacing:2.4px;color:#dfe8f2;
  text-shadow:0 1px 4px #000, 0 0 12px rgba(0,0,0,.9);
}
#cam-live{
  position:absolute;bottom:11px;right:14px;
  font-size:11px;letter-spacing:2px;color:var(--green);
  text-shadow:0 0 8px rgba(110,242,160,.5);
}
#cam-live.offline{color:var(--red);text-shadow:0 0 8px rgba(226,74,74,.6)}

#noise-overlay{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;background-repeat:repeat;background-size:170px 96px;
  mix-blend-mode:screen;
}
#noise-overlay.on{opacity:var(--noise-op,.55)}

#glitch-bar{
  position:absolute;left:0;right:0;height:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);
  mix-blend-mode:screen;
}

#underbar{
  flex:none;
  background:#0d1015;border:1px solid var(--line);border-radius:3px;
  padding:9px 13px;
  min-height:56px;
}
#prompt{font-size:13px;color:#d5dde7;letter-spacing:.7px;line-height:1.5}
#prompt.noise{color:var(--amber);font-style:italic}
#prompt-sub{font-size:10.5px;color:var(--txt-faint);margin-top:4px;letter-spacing:.7px}

/* ─────────── 右：证件 / 登记册 / 清单 ─────────── */

#desk{display:grid;grid-template-rows:auto minmax(110px,1fr) auto auto;gap:9px;min-height:0}

#id-panel{flex:none}
.empty-hint{padding:16px 12px;font-size:11.5px;color:var(--txt-faint);letter-spacing:.8px}

#id-card{padding:11px;display:block}

.id-photo-wrap{
  float:left;position:relative;
  border:1px solid var(--line-2);
  background:#0a0d11;
  padding:5px 5px 16px;
  margin:0 12px 8px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
#id-photo{display:block;image-rendering:pixelated;width:120px;height:150px;
  filter:sepia(.28) contrast(1.06) brightness(.94)}
.id-photo-tag{
  position:absolute;bottom:3px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--txt-faint);
}

.id-fields{overflow:hidden}
.id-fields > div{
  display:flex;gap:8px;padding:5px 0;
  border-bottom:1px dashed #1d232b;
}
.id-fields dt{
  flex:none;width:46px;font-size:10px;letter-spacing:1.4px;
  color:var(--txt-faint);padding-top:1px;
}
.id-fields dd{
  font-family:var(--mono);font-size:14px;color:#e6edf6;letter-spacing:.6px;
}
.id-fields dd.suspect{
  color:var(--red);
  text-shadow:0 0 9px rgba(226,74,74,.45);
  background:rgba(226,74,74,.08);
  padding:1px 5px;border-radius:2px;
  text-decoration:line-through;text-decoration-color:rgba(226,74,74,.7);
}
.id-fields dd.blank{color:var(--txt-faint)}

.tamper{
  clear:both;margin-top:8px;padding:7px 9px;
  font-size:10.5px;letter-spacing:.6px;color:var(--amber);
  background:rgba(240,179,78,.07);
  border-left:2px solid var(--amber);
}

/* 登记册 */

#log-panel{min-height:0}
#log-scroll{overflow-y:auto;min-height:0;flex:1}

#log-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10.5px}
#log-table thead th{
  position:sticky;top:0;z-index:2;
  background:#0d1015;color:var(--txt-faint);
  font-family:var(--cjk);font-size:9.5px;font-weight:400;letter-spacing:1.4px;
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);
}
#log-table td{
  padding:5px 8px;border-bottom:1px solid #171c23;color:var(--txt-dim);
  white-space:nowrap;
}
#log-table tr:hover td{background:#131922}
#log-table td.room{color:#dfe7f1}
#log-table td.name{color:#c9d3df;font-family:var(--cjk);font-size:11.5px}
#log-table td.note{font-family:var(--cjk);font-size:10px;white-space:normal;line-height:1.3}

tr.row-danger td.note{color:var(--red)}
tr.row-warn td.note{color:var(--amber)}
tr.row-used td{background:rgba(110,242,160,.045)}
tr.row-used td.room::before{content:"✓ ";color:var(--green)}
tr.row-match td{background:rgba(100,168,255,.09)}
tr.row-match td.room{color:var(--blue);font-weight:700}

/* 核验清单 */

#verify-panel{flex:none;max-height:196px}
#checklist{list-style:none;padding:5px;overflow-y:auto}

#checklist li{
  display:flex;align-items:flex-start;gap:7px;
  padding:4px 7px;font-size:11px;line-height:1.35;
  color:var(--txt-faint);border-radius:2px;
}
#checklist li .mark{font-family:var(--mono);font-size:10px;flex:none;width:11px;margin-top:1px}
#checklist li.done{color:var(--txt)}
#checklist li.done .mark{color:var(--green)}
#checklist li.fail{color:#ffd9d9;background:rgba(226,74,74,.12)}
#checklist li.fail .mark{color:var(--red)}
#checklist li.skip{opacity:.32;text-decoration:line-through}
#checklist .why{display:block;font-size:9.5px;color:var(--amber);letter-spacing:.3px;margin-top:1px}

/* 判定按钮 */

#actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:none}

.act{
  font-family:var(--cjk);font-size:15px;letter-spacing:4px;
  color:#dbe3ec;background:#151a21;
  border:1px solid var(--line-2);border-radius:3px;
  padding:13px 6px 9px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:.14s;
}
.act small{font-family:var(--mono);font-size:8.5px;letter-spacing:1px;color:var(--txt-faint)}
.act:disabled{opacity:.32;cursor:not-allowed}
.act:not(:disabled):hover{transform:translateY(-1px)}
.act:not(:disabled):active{transform:translateY(1px)}

.act.let:not(:disabled):hover{
  background:#0f2018;border-color:var(--green-dim);color:var(--green);
  box-shadow:0 0 18px rgba(110,242,160,.16);
}
.act.deny:not(:disabled):hover{
  background:#20100f;border-color:var(--red-dim);color:var(--red);
  box-shadow:0 0 18px rgba(226,74,74,.16);
}
.act.let.flash{background:#123322;border-color:var(--green);color:var(--green)}
.act.deny.flash{background:#331414;border-color:var(--red);color:var(--red)}

/* ─────────── 底部状态栏 ─────────── */

#statusbar{
  flex:none;height:26px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 15px;
  background:#0a0d11;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:1.1px;color:var(--txt-faint);
}
#status-text{color:var(--txt-dim)}
#status-text.good{color:var(--green)}
#status-text.bad{color:var(--red)}

/* ─────────── 弹窗 ─────────── */

.modal{
  position:fixed;inset:0;z-index:60;
  background:rgba(4,5,7,.86);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  animation:fade .22s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal-box{
  width:520px;max-width:92vw;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#161b23,#0e1218);
  border:1px solid var(--line-2);
  border-radius:4px;
  padding:26px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.85), 0 0 0 1px #000;
}
.modal-box.wide{width:620px}
.modal-box h1{
  font-size:23px;letter-spacing:6px;font-weight:700;color:#e9f0f8;
  margin-bottom:16px;
}
.modal-box h2{
  font-size:15px;letter-spacing:4px;color:#dfe7f0;
  margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--line);
}
.modal-box p{font-size:12.5px;line-height:1.85;color:var(--txt-dim);margin-bottom:11px}
.modal-box p em{color:var(--amber);font-style:normal}
.modal-box strong{color:#e2eaf4}
.modal-note{font-size:10.5px;color:var(--txt-faint);margin:14px 0 18px}
.modal-box .act{width:100%;margin-top:6px}

/* ── 夜班结算 ── */
.summary-grid{
  display:flex;gap:10px;margin:4px 0 16px;
}
.summary-grid > div{
  flex:1;background:#0d1117;border:1px solid var(--line);border-radius:3px;
  padding:11px 12px;display:flex;flex-direction:column;gap:5px;
}
.summary-grid b{
  font-family:var(--mono);font-size:21px;font-weight:600;color:var(--green);
  line-height:1;
}
.summary-grid span{
  font-family:var(--cjk);font-size:10px;color:var(--txt-faint);letter-spacing:1.2px;
}
#summary-table{
  width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10.5px;
  margin-bottom:14px;
}
#summary-table thead th{
  background:#0d1015;color:var(--txt-faint);
  font-family:var(--cjk);font-size:9.5px;font-weight:400;letter-spacing:1.4px;
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);
}
#summary-table td{
  padding:5px 8px;border-bottom:1px solid #171c23;color:var(--txt-dim);white-space:nowrap;
}
#summary-table td.room{color:#dfe7f1}
#summary-table td.name{color:#c9d3df;font-family:var(--cjk);font-size:11.5px}
#summary-table tr.bad td{color:var(--red)}
#summary-table tr.bad td.room,#summary-table tr.bad td.name{color:var(--red)}

#rules-list{list-style:none;counter-reset:r}
#rules-list li{
  counter-increment:r;
  position:relative;padding:10px 12px 10px 40px;margin-bottom:7px;
  background:#0d1116;border-left:2px solid var(--line-2);
  font-size:12px;line-height:1.6;color:var(--txt-dim);
}
#rules-list li::before{
  content:"第 " counter(r) " 条";
  position:absolute;left:9px;top:10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.5px;color:var(--txt-faint);
}
#rules-list li b{display:block;color:#dde5ef;font-size:13px;letter-spacing:1px;margin-bottom:3px}
#rules-list li.new{border-left-color:var(--amber);background:rgba(240,179,78,.06)}
#rules-list li.new b::after{
  content:"新增";font-size:8.5px;font-family:var(--cjk);
  color:#1a1408;background:var(--amber);padding:1px 5px;border-radius:2px;
  margin-left:8px;letter-spacing:1px;vertical-align:2px;
}

#intro-body p{font-size:13px}
#intro-body .quote{
  border-left:2px solid var(--green-dim);
  padding:9px 13px;margin:14px 0;
  background:rgba(110,242,160,.045);
  font-size:12px;color:#b9c6d4;line-height:1.8;
}
#intro-body ul{margin:10px 0 12px 4px;list-style:none}
#intro-body ul li{font-size:12px;color:var(--txt-dim);line-height:1.75;padding-left:14px;position:relative}
#intro-body ul li::before{content:"▸";position:absolute;left:0;color:var(--green-dim)}

/* ─────────── 惊吓覆盖 ─────────── */

#scare{
  position:fixed;inset:0;z-index:90;background:#000;
  display:flex;align-items:center;justify-content:center;
}
#scare-canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}

/* ─────────── 调试面板（F1 / ~ 开关） ─────────── */

#debug{
  position:fixed;left:12px;bottom:12px;z-index:200;
  width:300px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(14,18,24,.97),rgba(9,12,16,.97));
  border:1px solid #2b3a4a;border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.85), 0 0 0 1px #000;
  font-family:var(--mono);color:var(--txt-dim);
}
#debug.hidden{display:none}

.dbg-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:7px 10px;border-bottom:1px solid var(--line);
  background:#111823;
}
.dbg-head b{font-family:var(--cjk);font-size:11.5px;color:var(--amber);letter-spacing:2px;font-weight:400}
.dbg-hint{font-size:9px;color:var(--txt-faint);margin-left:auto}
#dbg-close{
  background:none;border:1px solid var(--line);color:var(--txt-dim);
  width:18px;height:18px;line-height:1;border-radius:2px;cursor:pointer;font-size:13px;padding:0;
}
#dbg-close:hover{border-color:var(--red);color:var(--red)}

.dbg-body{overflow-y:auto;padding:8px 10px 10px}

.dbg-sec{margin-bottom:11px}
.dbg-sec:last-child{margin-bottom:0}
.dbg-title{
  font-family:var(--cjk);font-size:9.5px;color:var(--txt-faint);letter-spacing:1.6px;
  margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid #1b222b;
}
.dbg-title b{color:var(--green);font-family:var(--mono);font-size:11px}

.dbg-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:4px}
.dbg-lbl{font-family:var(--cjk);font-size:9.5px;color:var(--txt-faint);flex:none;min-width:46px}
.dbg-val{font-size:9.5px;color:var(--green);margin-left:auto}
.dbg-out{
  margin:4px 0 0;padding:5px 6px;max-height:132px;overflow-y:auto;
  background:#080b0e;border:1px solid #171d24;border-radius:2px;
  font-family:var(--mono);font-size:9.5px;line-height:1.5;color:#8fa0b0;white-space:pre-wrap;
}
.dbg-out b{color:var(--amber);font-weight:400}
.dbg-out .k{color:#5f6d7d}
.dbg-out .bad{color:var(--red)}
.dbg-out .good{color:var(--green)}

#debug button{
  font-family:var(--cjk);font-size:10.5px;color:var(--txt-dim);
  background:#151b23;border:1px solid var(--line);border-radius:2px;
  padding:3px 8px;cursor:pointer;transition:.12s;
}
#debug button:hover{background:#1d2632;color:var(--txt);border-color:#3a4756}
#debug button.on{background:#0f1d17;color:var(--green);border-color:var(--green-dim)}
#debug button.danger:hover{border-color:var(--red);color:var(--red)}

#debug input[type=range]{
  flex:1;min-width:80px;height:12px;-webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
}
#debug input[type=range]::-webkit-slider-runnable-track{
  height:3px;background:#232c36;border-radius:2px;
}
#debug input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:10px;height:10px;margin-top:-3.5px;
  border-radius:50%;background:var(--green-dim);border:1px solid #0a0f0c;
}
#debug input[type=range]::-moz-range-track{height:3px;background:#232c36;border-radius:2px}
#debug input[type=range]::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;background:var(--green-dim);border:1px solid #0a0f0c;
}

/* ─────────── 滚动条 ─────────── */

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0a0d11}
::-webkit-scrollbar-thumb{background:#242b35;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#333d4a}