/* i3 / tmux 风格的窗口管理器界面 */
:root{
  --bg:#08090a;
  --win:#0e1012;
  --hd:#16181b;
  --bd:#24262a;
  --fg:#c3c6ca;
  --dim:#6b7075;
  --dim2:#42474d;
  --grn:#8ec07c;
  --red:#e06c75;
  --yel:#e5c07b;
  --blu:#61afef;
  --mag:#c678dd;
  --cyn:#56b6c2;
  --mono:"JetBrains Mono","DejaVu Sans Mono","Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:12px;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:#2f4a33;color:#e8ece9}

.desktop{height:100vh;display:flex;flex-direction:column}

/* ---------------- polybar ---------------- */
.bar{
  height:24px;flex:0 0 24px;display:flex;align-items:center;gap:12px;
  padding:0 8px;background:#0a0b0c;border-bottom:1px solid #1b1d20;
  font-size:11px;color:var(--dim);user-select:none;
}
.ws{display:flex;gap:2px}
.ws span{padding:0 7px;line-height:18px;color:var(--dim)}
.ws span.active{background:#2b2f36;color:#e6e8ea}
.bar .mod{color:#9aa1a8}
.bar .right{margin-left:auto;display:flex;gap:14px}
.bar .right span{color:#9aa1a8}

/* ---------------- work area ---------------- */
.work{
  flex:1;min-height:0;display:grid;gap:4px;padding:4px;
  grid-template-columns:214px minmax(0,1fr) 330px;
  grid-template-rows:minmax(0,1fr) 202px;
  grid-template-areas:
    "left term right"
    "notes notes sys";
}
.col-left{grid-area:left;display:flex;flex-direction:column;gap:4px;min-height:0}
.col-mid{grid-area:term;display:flex;min-height:0}
.col-right{grid-area:right;display:flex;flex-direction:column;gap:4px;min-height:0}
.col-notes{grid-area:notes;display:flex;min-height:0}
.col-sys{grid-area:sys;display:flex;min-height:0}

.win{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--win);border:1px solid var(--bd);
}
.win.grow{flex:1}
.win.focus{border-color:#37433a;box-shadow:0 0 0 1px rgba(120,160,125,.08) inset}
.win.focus .hd{background:#1b1f23;color:#a9b0b7}
.hd{
  flex:0 0 20px;display:flex;align-items:center;gap:6px;
  padding:0 6px;background:var(--hd);border-bottom:1px solid var(--bd);
  font-size:11px;color:#82888f;user-select:none;white-space:nowrap;overflow:hidden;
}
.hd .ic{color:#4e5359;font-size:10px}
.hd .x{margin-left:auto;color:#4e5359;padding:0 2px}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:8px}
#attach{color:#4a5b4d;font-size:10px}
#attach.live{color:var(--grn)}
.bd{flex:1;min-height:0;overflow:auto;padding:5px 7px;font-size:12px}

/* 细滚动条 */
.bd::-webkit-scrollbar{width:8px;height:8px}
.bd::-webkit-scrollbar-thumb{background:#23262a}
.bd::-webkit-scrollbar-thumb:hover{background:#33373c}
.bd::-webkit-scrollbar-track{background:transparent}

.dim{color:var(--dim)}
.mono{font-family:var(--mono)}

/* ---------------- 文件树 ---------------- */
.tree{font-size:11.5px;line-height:1.62;padding-top:4px}
.tree .l{white-space:pre;overflow:hidden;text-overflow:ellipsis}
.tree .dir{color:#7f9fc4}
.tree .fil{color:#b0b4b8}
.tree i{color:var(--dim2);font-style:normal;float:right}
.tree .hot .fil{color:var(--yel)}

/* ---------------- top ---------------- */
.top{font-size:11px;line-height:1.6}
.top .th,.top .tr{display:grid;grid-template-columns:46px 40px 42px 40px minmax(0,1fr);gap:4px}
.top .th{color:var(--dim2);border-bottom:1px solid #1c1e21;padding-bottom:2px;margin-bottom:3px}
.top .tr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .tr .c{color:var(--yel)}
.top .tr .m{color:#a3b58f}
.top .tr .cm{color:#9aa1a8}

/* ---------------- 终端 ---------------- */
.term{
  background:#0d0e10;padding:6px 8px;
  font-size:12px;line-height:1.55;color:#c5c8c6;
  white-space:pre-wrap;word-break:break-word;
}
.term .t{display:block}
.t-cmd{color:#e8e8e8}
.t-dim{color:#6b7075}
.t-err{color:var(--red)}
.t-ok{color:var(--grn)}
.t-warn{color:var(--yel)}
.t-hdr{color:var(--blu)}
.t-mag{color:var(--mag)}
.ps1i{color:#7fae6b}
.cur{
  display:inline-block;width:7px;height:13px;margin-left:1px;
  background:#c5c8c6;vertical-align:-2px;
  animation:blink 1.06s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

.inp{
  flex:0 0 auto;display:flex;align-items:baseline;gap:6px;
  padding:3px 8px 4px;border-top:1px solid #1a1c1f;background:#0b0c0e;
}
.ps1{color:var(--grn);white-space:nowrap;font-size:12px}
.ps1 .dim{color:#4f7a4a}
#cmd{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:#e8e8e8;font-family:var(--mono);font-size:12px;caret-color:#c5c8c6;
}
.blk{display:none}

/* ---------------- tcpdump / hashcat ---------------- */
#dump{font-size:10.5px;line-height:1.5;color:#5f666d;word-break:break-all;white-space:pre-wrap}
.hash{font-size:11px}
.hrow{display:flex;gap:10px;justify-content:space-between;padding:1px 0;border-bottom:1px dotted #1a1c1f}
.hrow span{color:var(--dim)}
.hrow b{font-weight:400;color:#b9bdc1;text-align:right}
.hrow b.ok{color:var(--grn)}
.hash .plain{
  margin-top:6px;padding-top:5px;border-top:1px dashed #1e2124;
  color:#8fae8a;font-size:10.5px;white-space:pre-wrap;line-height:1.45;
}

/* ---------------- ss ---------------- */
.ss{font-size:10.5px;line-height:1.62}
.ss div{white-space:pre;overflow:hidden;text-overflow:ellipsis}
.ss .ok{color:#7ea97a}

/* ---------------- notes (vim) ---------------- */
.notes{
  padding:4px 0 0;font-size:11.5px;line-height:1.5;overflow:auto;
  background:#0d0e10;color:#b6b9bd;
}
.notes .ln{display:flex;white-space:pre;padding:0 8px}
.notes .ln:hover{background:#131518}
.notes .n{
  display:inline-block;width:26px;flex:0 0 26px;margin-right:10px;
  text-align:right;color:var(--dim2);user-select:none;
}
.notes .h1{color:var(--blu)}
.notes .h2{color:var(--mag)}
.notes .hi{color:var(--yel)}
.notes .crit{color:var(--red)}
.vstatus{
  flex:0 0 18px;display:flex;align-items:center;gap:12px;
  padding:0 6px;background:#1a1d21;color:#82888f;font-size:10.5px;
  border-top:1px solid var(--bd);user-select:none;
}
.vstatus .mode{background:#3c5a3c;color:#d7e6d4;padding:0 6px;line-height:18px;margin-left:-6px}
.grow-s{flex:1}

/* ---------------- tmux 状态行 ---------------- */
.status{
  flex:0 0 20px;display:flex;align-items:center;gap:10px;
  padding:0 8px;background:#0f1113;border-top:1px solid #1b1d20;
  font-size:11px;color:#9aa1a8;user-select:none;
}
.status .sess{background:#233a26;color:#b9d8b4;padding:0 6px;line-height:20px;margin-left:-8px}
.status .w{color:#c3c6ca}
.status #hint{color:#4a4f55}
.status #clock{color:#b9bdc1}

/* ---------------- 窄屏 ---------------- */
@media (max-width:1080px){
  body{overflow:auto}
  .desktop{height:auto;min-height:100vh}
  .work{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:"term" "left" "right" "notes" "sys";
  }
  .col-mid .win{height:62vh}
  .col-left .win{height:190px}
  .col-left .win:last-child{height:160px}
  .col-right .win{height:180px}
  .col-notes .win{height:240px}
  .col-sys .win{height:170px}
  .bar .right{display:none}
}