:root { --brand: #004158; --brand-2: #0a5a76; --ok: #16a34a; --bad: #dc2626; --warn: #d97706; --bg: #f3f5f9; --line: #e3e8ef; --text: #334155; --muted: #64748b; --head: #0f172a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
a { color: var(--brand-2); }
.side { position: fixed; inset: 0 auto 0 0; width: 236px; background: linear-gradient(180deg, #002a3a, #004158); color: #cfe3ea; display: flex; flex-direction: column; z-index: 10; }
.side .brand { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.side .brand img { height: 34px; background: #fff; border-radius: 8px; padding: 3px; }
.side .brand b { display: block; font-size: 1rem; } .side .brand small { color: #9cc3d1; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.side nav { padding: .6rem; display: grid; gap: 2px; }
.side nav a { color: #cfe3ea; text-decoration: none; padding: .55rem .8rem; border-radius: 8px; font-weight: 500; display: flex; justify-content: space-between; }
.side nav a:hover, .side nav a.on { background: rgba(255,255,255,.1); color: #fff; }
.side nav .sec { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #7fa9b8; padding: .8rem .8rem .2rem; }
.side .me { margin-top: auto; padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; }
.side .me button { margin-top: .5rem; }
.pill { background: var(--bad); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45rem; font-weight: 700; }
main { margin-left: 236px; padding: 1.4rem 1.8rem 2rem; max-width: 1320px; }
h1 { font-size: 1.4rem; color: var(--head); margin: .2rem 0 .3rem; }
.lead { color: var(--muted); margin: 0 0 1.1rem; }
.top-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1rem; }
.card h2 { font-size: 1rem; color: var(--head); margin: 0 0 .8rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.stat .n { font-size: 1.9rem; font-weight: 700; color: var(--head); } .stat .l { color: var(--muted); font-size: .82rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; }
.mono { font-family: Consolas, monospace; font-size: .84rem; }
label { display: block; font-weight: 600; font-size: .78rem; margin: 0 0 .25rem; color: var(--head); }
input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; background: #fff; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(0,65,88,.25); border-color: var(--brand); }
.row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; margin-bottom: .75rem; }
.btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; background: var(--brand); color: #fff; padding: .5rem 1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--brand-2); } .btn.go { background: var(--ok); } .btn.stop { background: var(--bad); }
.btn.light { background: #fff; color: var(--brand); border-color: #cbd5e1; } .btn.sm { padding: .3rem .6rem; font-size: .8rem; }
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #eef1f5; color: #475569; }
.badge.ok { background: #dcfce7; color: #166534; } .badge.bad { background: #fee2e2; color: #991b1b; } .badge.run { background: #e0f2fe; color: #075985; } .badge.warn { background: #fef3c7; color: #92400e; }
.msg { padding: .65rem .85rem; border-radius: 8px; background: #e0f2fe; color: #075985; margin-bottom: 1rem; }
.msg.err { background: #fee2e2; color: #991b1b; }
.private { background: #fff7ed; border: 1px dashed #fdba74; border-radius: 10px; padding: .8rem 1rem; }
.private h3 { margin: 0 0 .4rem; font-size: .8rem; color: #9a3412; text-transform: uppercase; letter-spacing: .05em; }
dl.facts { display: grid; grid-template-columns: 170px 1fr; gap: .35rem .8rem; margin: 0; } dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; color: var(--head); }
.thread .m { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; background: #fff; }
.thread .m.bls { border-left: 4px solid var(--brand); } .thread .m.customer, .thread .m.app { border-left: 4px solid var(--ok); } .thread .m.distributor { border-left: 4px solid var(--warn); }
.thread .m.internal { background: #fff7ed; border-style: dashed; }
.thread .who { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; } .thread .body { white-space: pre-wrap; }
.muted { color: var(--muted); } .stack > * + * { margin-top: .75rem; }
.pager { margin-top: .8rem; } .pager nav svg { width: 16px; }
/* sign-in */
body.auth-page { min-height: 100vh; color: #fff; background: url("/img/dm-pattern.svg") repeat, radial-gradient(1100px 600px at 12% 18%, rgba(10,106,140,.55), transparent 60%),
  radial-gradient(900px 520px at 88% 92%, rgba(220,38,38,.22), transparent 60%), linear-gradient(135deg, #001f2c 0%, #004158 52%, #075a77 100%); background-attachment: fixed; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,440px); gap: 3rem; align-items: center; max-width: 1180px; margin: 0 auto; padding: 2.5rem 2rem; }
.auth-brand .logo-tile { display: inline-flex; background: #fff; border-radius: 18px; padding: .9rem 1.2rem; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.auth-brand .logo-tile img { height: 88px; display: block; }
.auth-brand h1 { color: #fff; font-size: 2.2rem; line-height: 1.15; margin: 1.5rem 0 .6rem; } .auth-brand h1 span { color: #7dd3fc; }
.auth-brand p { color: rgba(255,255,255,.8); font-size: 1.02rem; max-width: 520px; }
.auth-brand ul { list-style: none; padding: 0; display: grid; gap: .7rem; } .auth-brand li { color: rgba(255,255,255,.88); }
.auth-brand li b { color: #fff; }
.auth-card { background: #fff; color: var(--text); border-radius: 18px; padding: 2rem; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.auth-card h2 { margin: 0 0 .25rem; color: var(--head); } .auth-card .btn { width: 100%; justify-content: center; padding: .7rem; }
.auth-card .mini-logo { display: none; height: 60px; margin: 0 auto 1rem; }
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; padding: 1.2rem; } .auth-brand { display: none; } .auth-card .mini-logo { display: block; }
  .side { position: static; width: auto; } main { margin-left: 0; padding: 1rem; } .grid2 { grid-template-columns: 1fr; }
}