/* ============================================================
   FRAS — Shared CSS
   Contains ONLY rules verified byte-identical across index.html,
   register.html, and admin.php at the time of extraction (2026-07).
   Each page keeps its own :root theme variables (values differ
   intentionally per page — e.g. --r/--rl border-radius) and its
   own page-specific styling. Do not add anything here that isn't
   truly identical in all pages that use it.
   ============================================================ */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}
.font-mono-ui{font-family:'DM Mono',ui-monospace,monospace}

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

@keyframes sp{to{transform:rotate(360deg)}}

/* Badge color dots — the color-mapping rules (.bg/.ba/.bb/.br/.ble)
   themselves reference page-specific variable names (--gbg vs
   --green-bg etc.) and stay in each page's own CSS. Only the ::before
   dot rules are identical everywhere since they reference the primary
   color variables (--green/--red/--amber/--accent), which ARE named
   and valued identically across all three pages. */
.bg::before{background:var(--green)}
.ba::before{background:var(--amber)}
.bb::before{background:var(--accent)}
.ble::before{background:var(--red)}
.br::before{background:var(--red)}

/* Toast notifications */
#toast{
  position:fixed;top:16px;right:16px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  max-width:340px;
}
.ti{
  display:flex;align-items:flex-start;gap:8px;
  min-width:0;font-size:12px;line-height:1.4;color:var(--text);
  background:var(--bg2);border:1px solid var(--border2);border-left-width:3px;
  border-radius:var(--r);padding:10px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  pointer-events:auto;
  animation:tisi .25s ease;
}
@keyframes tisi{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
.ti.success{border-left-color:var(--green)}
.ti.error{border-left-color:var(--red)}
.ti.info{border-left-color:var(--accent)}
.ti.warn{border-left-color:var(--amber)}
.ti svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.ti span{flex:1}
@media(max-width:480px){
  #toast{left:8px;right:8px;max-width:none}
}

/* Tables */
table{border-collapse:collapse}
thead th{border-bottom:1px solid var(--border)}
tbody td{border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(127,127,127,.035)}
.tdn{color:var(--text);font-weight:500}

/* Login password-visibility toggle */
.lpass-eye:hover{color:var(--text)}

/* Generic modal backdrop */
.mbg{display:none}
.mbg.open{display:flex}

/* Every password field here has its own custom eye-toggle button. Edge
   (and some Chromium-based browsers) automatically injects their own
   native reveal icon into password fields too, which then sits right
   next to — or overlaps — our custom one. Hiding the native one avoids
   showing two eye icons on the same field. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display:none;
}