/* ── PHAZE site in xat.com's look (docs/UI_PARITY.md "Site pages") ─────────
   Loaded after pages.css. xat.com is a Bootstrap 4 site: white page, #212529
   text, system font, a 62px navy gradient navbar (#000044 → #000088), blue
   #007bff links and buttons with 4px corners, #dee2e6 borders. Measured live
   2026-10-11; only colours and sizes are matched, PHAZE keeps its own name. */
:root {
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface2:    #f8f9fa;
  --surface3:    #e9ecef;
  --border:      #dee2e6;
  --border-hi:   #adb5bd;
  --purple:      #007bff;
  --purple-light:#007bff;
  --purple-dim:  rgba(0,123,255,.08);
  --text:        #212529;
  --text-muted:  #6c757d;
  --text-dim:    #868e96;
  --green:       #28a745;
  --red:         #dc3545;
  --yellow:      #d39e00;
  --r:           4px;
  --r-sm:        4px;
  --r-lg:        4px;
}
body { background:#fff; color:#212529; font-size:16px; }
a { color:#007bff; }
a:hover { color:#0056b3; text-decoration:underline; }

/* navbar */
.p-nav {
  height:62px; background:linear-gradient(#000044,#000088);
  border-bottom:none; backdrop-filter:none; padding:0 16px;
}
.p-nav-logo {
  background:none; -webkit-text-fill-color:#fff; color:#fff;
  font-size:24px; font-weight:700; letter-spacing:.04em;
}
.p-nav-logo img { display:block; height:34px; width:auto; }
.p-nav-link { color:#fff; font-size:16px; font-weight:400; padding:8px 10px; border-radius:0; }
.p-nav-link:hover, .p-nav-link.active { color:#fff; background:transparent; text-decoration:underline; }
.p-nav-link.active { color:#fff; }
.p-nav-btn { font-size:14px; font-weight:400; padding:6px 12px; border-radius:4px; }
.p-nav-btn-ghost { background:transparent; color:#fff; border:1px solid #007bff; }
.p-nav-btn-ghost:hover { color:#fff; background:rgba(0,123,255,.25); border-color:#007bff; text-decoration:none; }
.p-nav-btn-solid { background:#007bff; color:#fff; border:1px solid #007bff; }
.p-nav-btn-solid:hover { background:#0069d9; color:#fff; text-decoration:none; }
.p-nav-user:hover { background:rgba(255,255,255,.1); }
.p-nav-av { border:2px solid rgba(255,255,255,.5); }
.p-nav-uname { color:#fff; }
.p-nav-dropdown-menu { background:#fff; border:1px solid rgba(0,0,0,.15); box-shadow:0 6px 12px rgba(0,0,0,.175); }
.p-nav-dropdown-item { color:#212529; }
.p-nav-dropdown-item:hover { color:#16181b; background:#f8f9fa; text-decoration:none; }

/* rank badges, readable on white */
.rank-member  { background:#e9ecef; color:#495057; }
.rank-mod     { background:#cce5ff; color:#004085; }
.rank-owner   { background:#fff3cd; color:#856404; }
.rank-admin   { background:#f8d7da; color:#721c24; }
.rank-mainowner { background:#e2d9f3; color:#3d1f7a; }

/* headings and page header: plain, left-aligned, as xat's "buy powers" */
.p-page-hero { background:none; border-bottom:1px solid #dee2e6; text-align:left; padding:24px 20px 16px; }
.p-page-hero > * { max-width:1100px; margin-left:auto; margin-right:auto; }
.p-page-title { font-size:40px; font-weight:500; color:#212529; }
.p-page-sub { color:#212529; font-size:16px; max-width:none; }

/* cards, buttons, forms (Bootstrap 4) */
.p-card { background:#fff; border:1px solid rgba(0,0,0,.125); border-radius:4px; }
.p-card-title { color:#212529; text-transform:none; letter-spacing:0; font-size:20px; font-weight:500; }
.p-btn { font-size:16px; font-weight:400; padding:6px 12px; border-radius:4px; }
.p-btn-primary { background:#007bff; color:#fff; border:1px solid #007bff; }
.p-btn-primary:hover { background:#0069d9; border-color:#0062cc; color:#fff; text-decoration:none; }
.p-btn-ghost { background:#fff; color:#007bff; border:1px solid #007bff; }
.p-btn-ghost:hover { background:#007bff; color:#fff; border-color:#007bff; text-decoration:none; }
.p-btn-danger { background:#dc3545; color:#fff; border:1px solid #dc3545; }
.p-btn-danger:hover { background:#c82333; color:#fff; }
.p-btn-lg { padding:8px 16px; font-size:20px; }
.p-btn-sm { padding:4px 8px; font-size:14px; }
.p-label { color:#212529; font-size:16px; font-weight:400; text-transform:none; letter-spacing:0; margin-bottom:8px; }
.p-input { background:#fff; color:#495057; border:1px solid #ced4da; border-radius:4px; padding:6px 12px; font-size:16px; }
.p-input:focus { border-color:#80bdff; box-shadow:0 0 0 .2rem rgba(0,123,255,.25); }
.p-input::placeholder { color:#6c757d; }

/* auth pages */
.p-auth-card { background:#fff; border:1px solid rgba(0,0,0,.125); border-radius:4px; box-shadow:none; }
.p-auth-logo { background:none; -webkit-text-fill-color:#000088; color:#000088; }
.p-auth-sub, .p-auth-footer { color:#6c757d; }
.p-auth-error { background:#f8d7da; border-color:#f5c6cb; color:#721c24; }

/* footer */
.p-footer { border-top:1px solid #dee2e6; color:#6c757d; background:#f8f9fa; }
.p-footer-logo { color:#000088; }
.p-footer-links a { color:#007bff; }

/* settings menu and tabs */
.p-settings-menu { background:#fff; border:1px solid rgba(0,0,0,.125); }
.p-settings-menu-item { color:#007bff; font-weight:400; }
.p-settings-menu-item:hover { background:#f8f9fa; color:#0056b3; }
.p-settings-menu-item.active { background:#007bff; color:#fff; }

/* room cards keep their banner; the frame goes light */
.p-room-card { border:1px solid rgba(0,0,0,.125); }
.p-room-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.15); border-color:#adb5bd; }

/* xat-style tables (store, lists): bordered, 4.8px cells */
.x-table { width:100%; border-collapse:collapse; color:#212529; }
.x-table th, .x-table td { border:1px solid #dee2e6; padding:4.8px; vertical-align:top; text-align:left; }
.x-table th { font-weight:700; }
.x-table tbody tr:nth-of-type(odd) { background:rgba(0,0,0,.05); }
/* filter buttons: Bootstrap outline-primary, active = filled */
.x-pills { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0; }
.x-pill { background:#fff; color:#007bff; border:1px solid #007bff; border-radius:4px; padding:6px 12px; font-size:16px; cursor:pointer; font-family:inherit; }
.x-pill:hover, .x-pill.active { background:#007bff; color:#fff; }
.x-sublinks { display:flex; flex-wrap:wrap; gap:4px 14px; padding:12px 0; border-bottom:1px solid #dee2e6; font-size:16px; }
.x-sublinks a.active { color:#212529; }