/* Bugonia twin — small supplement to neo.css (same tokens, same hairlines).
   Only what the twin needs beyond the house system: data tables. */

table.twin{
  width:100%;border-collapse:collapse;font-size:11px;
  font-variant-numeric:tabular-nums;text-align:left;
}
table.twin th{
  font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line2);
}
table.twin td{
  padding:6px 8px;border-bottom:1px solid var(--line);color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;
}
table.twin td.num,table.twin th.num{text-align:right}
table.twin td.dim{color:var(--muted)}
table.twin tr:hover td{background:var(--hover)}

/* status colors reuse the house classes st-ok / st-warn / st-err */

/* lobby row sub-value fills (live stats on the home rows) */
.lobby-row-l.live{color:var(--muted)}

/* login page footer — matches #lobby::after of the house system exactly */
.auth-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:2;text-align:center;
  color:var(--dim);font-size:7px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 0;pointer-events:none;
}

/* login shell: same 260px column as the AuthShell */
.auth-main{flex:1;width:100%;max-width:260px;display:flex;flex-direction:column;justify-content:center;margin:auto;position:relative;z-index:1}
.auth-logo{
  color:var(--fg);font-size:clamp(34px,7vw,64px);line-height:1.6;
  font-weight:400;padding:.15em .84em .3em .45em;
  display:inline-block;text-align:center;transform:translateX(-.22em);
}
.auth-logo-wrap{display:grid;place-items:center;width:100%}
.micro-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.field{display:flex;flex-direction:column;gap:4px}
.field input[type=text],.field input[type=password]{
  height:32px;width:100%;border-radius:0;border:1px solid var(--line);
  background:var(--card,var(--p1));color:var(--fg);padding:0 10px;
  font:12px/1.4 var(--mono);outline:none;
  transition:border-color 120ms ease-out,box-shadow 120ms ease-out;
}
.field input:focus{border-color:var(--line2)}
.field input.invalid{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(201,119,110,.12)}
.err-text{margin-top:10px;font:11px/1.4 var(--mono);color:var(--c-red);text-align:center;min-height:14px}
.btn-spin{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block;
  border:1.5px solid currentColor;border-top-color:transparent;opacity:.9;
  animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.remember-row{display:inline-flex;flex-direction:row;align-items:center;gap:6px;
  font-weight:400;text-transform:none;letter-spacing:0;cursor:pointer;padding:2px 0;
  justify-content:flex-start}
.remember-row input[type=checkbox]{width:14px;height:14px;accent-color:var(--fg)}

/* login form: AuthShell column + hairline fields + full-width brand button */
#login-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
#login-btn{
  height:32px;width:100%;border-radius:0;border:1px solid transparent;
  background:var(--brand,#e7e7e7);color:#0a0a0a;font:500 12px/1 var(--mono);
  cursor:pointer;transition:background-color 120ms ease-out,opacity 120ms ease-out;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
#login-btn:hover{background:#fff}
#login-btn:disabled{opacity:.4;cursor:default}