.nav { display: block; padding: .5rem .75rem; border-radius: .375rem; color: #cbd5e1; }
.nav:hover { background: #1e293b; color: #fff; }
.nav-on { background: #334155; color: #fff; font-weight: 600; }
.card { background: #fff; border-radius: .6rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); padding: .75rem; }
.btn { display: inline-flex; align-items: center; gap: .25rem; padding: .4rem .75rem; border-radius: .45rem; font-size: .875rem; font-weight: 600; }
.btn-primary { background: #2563eb; color: #fff; } .btn-primary:hover { background: #1d4ed8; }
.btn-gray { background: #e2e8f0; color: #334155; } .btn-gray:hover { background: #cbd5e1; }
.btn-red { background: #fee2e2; color: #b91c1c; } .btn-red:hover { background: #fecaca; }
.inp { width: 100%; border: 1px solid #cbd5e1; border-radius: .45rem; padding: .35rem .55rem; font-size: .875rem; background: #fff; }
.inp:focus { outline: 2px solid #93c5fd; border-color: #60a5fa; }
.logbox { background: #0f172a; color: #e2e8f0; font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
          border-radius: .5rem; padding: .75rem; max-height: 22rem; overflow-y: auto; line-height: 1.5; }
.log-success { color: #86efac; } .log-error { color: #fca5a5; } .log-warn { color: #fcd34d; }
.badge { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 600; }
.b-running { background: #dbeafe; color: #1d4ed8; } .b-success { background: #dcfce7; color: #15803d; } .b-failed { background: #fee2e2; color: #b91c1c; }
.b-stopped { background: #fef3c7; color: #b45309; }
.hl { background: #fef9c3 !important; font-weight: 600; }
.pw-eye { font-size: .75rem; color: #94a3b8; margin-left: .15rem; cursor: pointer; }
.pw-eye:hover { color: #334155; }