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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--t1);
}
body { display: flex; height: 100vh; }

::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 4px; }

/* ── Shared buttons ── */
.btn-primary {
  padding: 6px 13px;
  background: var(--ac);
  border: none; color: #fff;
  border-radius: 7px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: var(--ac2); }

.btn-secondary {
  padding: 6px 11px;
  background: transparent; border: 1px solid var(--b2); color: var(--t2);
  border-radius: 7px; font-family: var(--sans); font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.btn-secondary:hover { background: var(--panel); }

/* ── Shared form fields ── */
.fl {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px;
}
.fi {
  width: 100%; background: var(--panel); border: 1px solid var(--b2);
  color: var(--t1); border-radius: 7px; padding: 7px 10px;
  font-family: var(--sans); font-size: 13px; outline: none; transition: border-color .15s;
}
.fi:focus { border-color: rgba(59,124,247,.4); }
.fsel {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%234f5a6e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}
.fta {
  width: 100%; background: var(--panel); border: 1px solid var(--b2);
  color: var(--t1); border-radius: 7px; padding: 8px 10px;
  font-family: var(--mono); font-size: 12px; outline: none;
  resize: vertical; min-height: 110px; line-height: 1.65; transition: border-color .15s;
}
.fta:focus { border-color: rgba(59,124,247,.4); }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--b2); color: var(--t1);
  padding: 8px 16px; border-radius: 8px; font-size: 13px;
  z-index: 300; pointer-events: none; white-space: nowrap;
  animation: fi .2s ease;
}
.toast.err { color: var(--re); }

/* ── Pulse dot ── */
.pulse { width: 7px; height: 7px; background: var(--gr); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

@keyframes fi { from{opacity:0;transform:translate(-50%,5px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes msg-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

@media(max-width:640px){ .sidebar{display:none!important} .kb-panel{width:100%!important} }