:root{
  --bg:#0b0b0b;
  --panel:#0f0f0f;
  --panel2:#121212;
  --border:#232323;
  --text:#f3f3f3;
  --muted:#a1a1a1;
  --pending:#7a7a7a;
  --danger:#ff6363;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
  --split: 380px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:14px;
  line-height:1.35;
}

a{color:var(--text); text-decoration:none}
a:hover{text-decoration:underline}

.app{
  display:grid;
  grid-template-columns: var(--split) 10px 1fr;
  height:100%;
  padding:16px;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom:52px;
}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:0;
}

.cardHeader{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.title{font-weight:700}
.sub{color:var(--muted); font-size:12px}
.cardBody{padding:14px; min-height:0}

.stack{display:flex; flex-direction:column; gap:10px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap}
.spacer{flex:1}

.btn{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font:inherit;
  transition:.12s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{border-color:#3a3a3a; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{border-color:#4b4b4b}
.btn.danger{border-color:rgba(255,99,99,.45)}
.btn.danger:hover{border-color:rgba(255,99,99,.8)}
.btn.hidden{display:none !important;}

.btnPlus{
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  line-height:1;
}

/* квадратная кнопка "-" для списков (например, имена) */
.btnMinus{
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  line-height:1;
}

.chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  color:var(--muted);
  font-size:12px;
}

.switch{
  display:flex; gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
}
.switch button{
  border:0; background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
}
.switch button.active{
  background:#1a1a1a;
  color:var(--text);
  border:1px solid #2a2a2a;
}

.input, select, textarea{
  width:100%;
  background:#0b0b0b;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 10px;
  font:inherit;
  outline:none;
}
.input:focus, select:focus, textarea:focus{ border-color:#4b4b4b; }
textarea{min-height:90px; resize:vertical}

.label{color:var(--muted); font-size:12px; margin-bottom:6px}
.field{display:flex; flex-direction:column; gap:6px}
.twoCol{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.muted{color:var(--muted)}
.monoSmall{font-size:12px;color:var(--muted)}

.split{
  display:flex; align-items:stretch; justify-content:center;
  cursor:col-resize; user-select:none;
}
.split::before{
  content:""; width:2px; background:#1f1f1f; border-radius:2px; margin:0 auto;
}
.split:hover::before{ background:#3a3a3a; }

.treeWrap{height: calc(100vh - 32px); display:flex; flex-direction:column; min-height:0;}
.treeScroller{padding:10px 12px 14px; overflow:auto; min-height:0;}

.treeNode{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px;}
.treeNode:hover{background:#141414}
.treeIndent{width: var(--indent, 0px); flex:0 0 var(--indent, 0px)}
.twisty{
  width: 18px; height: 18px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--muted);
  cursor:pointer; user-select:none;
}
.twisty:hover{border-color:#3a3a3a;color:var(--text)}
.twisty.empty{opacity:.2; cursor:default}
.nodeText{display:flex; flex-direction:column; gap:2px; min-width:0; cursor:pointer}
.nodeMain{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nodeMeta{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nodePending .nodeMain, .nodePending .nodeMeta{color:var(--pending)}

.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  color:var(--text);
  background:#0b0b0b;
  cursor:pointer;
  user-select:none;
  font-size:12px;
}
.pill:hover{border-color:#3a3a3a}

.divider{height:1px;background:var(--border);margin:6px 0}

dialog{
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  color:var(--text);
  box-shadow: var(--shadow);
  max-width:980px;
  width:calc(100% - 26px);
  padding:0;
}
dialog::backdrop{background:rgba(0,0,0,.7)}
.dlgHeader{padding:14px 14px 12px; border-bottom:1px solid var(--border)}
.dlgBody{padding:14px}

/* универсальный контрол даты/года */
.dateCtl{
  display:flex;
  gap:10px;
  align-items:center;
}
.dateCtl .dateMode{
  width:88px;
  min-width:88px;
  padding:10px 8px;
}
.dateCtl .dateFull{flex:1}
.dateCtl .dateYear{flex:1}
.dateCtl .hidden{display:none !important;}

.checkboxRow{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.checkboxRow input[type="checkbox"]{
  width:18px;
  height:18px;
}

.footer{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:rgba(11,11,11,.92);
  backdrop-filter: blur(6px);
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.footer a{color:var(--text)}

.dlgActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
}
.dlgActions .left{
  margin-right:auto;
}