/* Monroeville Mall Archive — Valyrian-inspired (red palette)
   Drop-in full site.css replacement
*/

/* ========== DESIGN TOKENS ========== */
:root{
  --bg:#07070b;
  --bg2:#0b0b12;
  --text:#f0f0f6;
  --muted:rgba(240,240,246,.72);

  --accent:#e50914;     /* blood */
  --accent2:#7a0205;    /* deep blood */
  --glow:rgba(229,9,20,.25);
  --glow2:rgba(229,9,20,.16);

  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.07);

  --radius:18px;
  --radius2:14px;

  --shadow:0 18px 55px rgba(0,0,0,.60);
  --shadow2:0 12px 32px rgba(0,0,0,.45);

  --font-body: "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display: "Sora", Cinzel, ui-serif, Georgia, serif;

  --container:1200px;
}

/* ========== BASE / BACKGROUND ========== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 18% -5%, rgba(229,9,20,.30), transparent 62%),
    radial-gradient(900px 520px at 90% 0%, rgba(122,2,5,.24), transparent 60%),
    linear-gradient(180deg, #0a0a10 0%, #07070b 55%, #050508 100%);
  overflow-x:hidden;
}

/* subtle grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* scanlines whisper */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.08;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 100% 7px;
}

/* Typography */
h1,h2,h3{
  margin:0 0 10px 0;
  font-family:var(--font-display);
  letter-spacing:.6px;
  text-transform:uppercase;
}
p{ margin:0 0 12px 0; color:var(--muted); line-height:1.6; }

a{ color:inherit; text-decoration:none; }
a:hover{ color:#fff; }

/* ========== LAYOUT ========== */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding: 28px 18px 56px;
}

/* Utilities */
.muted{ color:var(--muted); }
.hr{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 18px 0;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(240,240,246,.86);
  font-weight:700;
  font-size:12px;
  letter-spacing:.25px;
}

/* ========== VALYRIAN GLASS SURFACES ========== */
.panel, .card{
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(229,9,20,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.panel{ width:100%; padding:18px; }

.card{
  padding:18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(229,9,20,.35);
  box-shadow: var(--shadow);
}

/* ========== BENTO GRID ========== */
.bento{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:14px;
}
.span-12{ grid-column: span 12; }
.span-9{ grid-column: span 9; }
.span-8{ grid-column: span 8; }
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }
.span-3{ grid-column: span 3; }

@media (max-width: 980px){
  .span-9,.span-8,.span-6,.span-4,.span-3{ grid-column: span 12; }
}

/* ========== PAGE HERO (for Browse/Submit/Artifact) ========== */
.page-hero{
  width:100%;
  padding: 20px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background:
    radial-gradient(900px 240px at 25% 0%, rgba(229,9,20,.18), transparent 60%),
    linear-gradient(180deg, rgba(18,18,28,.92), rgba(8,8,12,.92));
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}
.page-hero h1{
  margin:0;
  font-size:22px;
}
.page-hero p{ margin: 6px 0 0; }

/* ========== HEADER (VALYRIAN-ISH) ========== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(10px) saturate(140%);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(229,9,20,.22), transparent 55%),
    linear-gradient(180deg, rgba(12,12,18,.92), rgba(7,7,11,.86));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.site-header::after{
  content:'';
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(229,9,20,.55), transparent);
  opacity:.55;
}

.topbar{
  max-width:var(--container);
  margin:0 auto;
  padding: 10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}
.brand-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.55));
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-title{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:.7px;
  font-size:16px;
}
.brand-subtitle{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
  margin-top:2px;
}

.nav-desktop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* nav micro-animations */
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 14px;
  border-radius: 999px;               /* OVAL */
  color: rgba(240,240,246,.88);
  font-weight: 750;
  font-size: 13px;
  letter-spacing: .18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120px 28px at 35% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}

.nav-link:hover{
  color:#fff;
  transform: translateY(-1px);
  border-color: rgba(229,9,20,.45);
  box-shadow:
    0 16px 38px rgba(0,0,0,.55),
    0 0 0 3px rgba(229,9,20,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  background:
    radial-gradient(140px 34px at 35% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(229,9,20,.18), rgba(255,255,255,.03));
}

.nav-link::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: radial-gradient(120px 60px at 50% 50%, rgba(229,9,20,.55), transparent 70%);
  opacity:0;
  filter: blur(6px);
  transition: opacity .18s ease;
  z-index:-1;
}
.nav-link:hover::before{
  opacity:.9;
}

.nav-link.active{
  color:#fff;
  border-color: rgba(229,9,20,.65);
  background:
    radial-gradient(140px 40px at 35% 15%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(229,9,20,.90), rgba(122,2,5,.78));
  box-shadow:
    0 18px 50px rgba(0,0,0,.60),
    0 0 0 3px rgba(229,9,20,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-link.active::before{
  opacity:1;
}

.nav-link::after{
  content:'';
  position:absolute;
  top:-60%;
  left:-35%;
  width:40%;
  height:220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:0;
}
.nav-link:hover::after{
  opacity:1;
  animation: navsheen .85s ease;
}
@keyframes navsheen{
  from{ left:-35%; }
  to{ left:120%; }
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Search (collapsed -> expand) */
.search{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  padding: 6px;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.search:focus-within{
  border-color: rgba(229,9,20,.45);
  box-shadow: 0 0 0 3px rgba(229,9,20,.18);
  background: rgba(0,0,0,.28);
}
.search input{
  width:0;
  opacity:0;
  border:0;
  outline:none;
  background:transparent;
  color: var(--text);
  transition: width .18s ease, opacity .18s ease;
}
body.search-open .search input{
  width: 190px;
  opacity:1;
  padding: 2px 8px;
}

.icon-btn{
  border:0;
  background: transparent;
  color: rgba(240,240,246,.85);
  width:28px;
  height:28px;
  border-radius:999px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .14s ease, color .14s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.06); color:#fff; }
.icon-btn.go{ background: rgba(229,9,20,.12); }
.icon-btn.go:hover{ background: rgba(229,9,20,.20); }

/* Buttons (Valyrian sheen) */
.btn-primary{
  position:relative;
  overflow:hidden;
  padding: 9px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(229,9,20,.96), rgba(122,2,5,.86));
  border:1px solid rgba(229,9,20,.55);
  color:#fff;
  font-weight: 900;
  letter-spacing:.2px;
  box-shadow: 0 10px 28px rgba(229,9,20,.18);
  transition: transform .14s ease, filter .14s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary::after{
  content:'';
  position:absolute;
  top:-40%;
  left:-30%;
  width:40%;
  height:180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity:0;
  transition: opacity .18s ease;
}
.btn-primary:hover::after{ opacity:1; animation: sheen .9s ease; }
@keyframes sheen{ from{ left:-30%; } to{ left:120%; } }

.btn-ghost{
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(240,240,246,.92);
  font-weight: 850;
  transition: transform .14s ease, background .14s ease;
}
.btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); color:#fff; }

.user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.user-name{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: rgba(240,240,246,.92);
  font-weight: 800;
  font-size: 13px;
}

/* Hamburger */
.hamburger{
  display:none;
  width:42px;
  height:42px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(240,240,246,.88);
  margin:4px auto;
  border-radius:999px;
}

/* Mobile nav slide */
.nav-mobile{
  max-width:var(--container);
  margin:0 auto;
  padding: 0 18px 10px;
  display:none;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
}
.nav-mobile.open{
  display:flex;
  max-height:360px;
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 980px){
  .nav-desktop{ display:none; }
  .hamburger{ display:inline-block; }
  body.search-open .search input{ width: 150px; }
  .brand{ min-width:auto; }
  .brand-logo{ width:52px; height:52px; }
}

/* ========== FORMS ========== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), select, textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(229,9,20,.45);
  box-shadow: 0 0 0 3px rgba(229,9,20,.18);
  background: rgba(0,0,0,.28);
}

label{
  display:block;
  font-weight:800;
  letter-spacing:.2px;
  margin: 0 0 6px 0;
  color: rgba(240,240,246,.92);
}

/* ========== TABLES (basic) ========== */
.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(229,9,20,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.table th, .table td{
  padding:10px 12px;
  text-align:left;
  border-top:1px solid rgba(255,255,255,.06);
}
.table thead th{
  border-top:0;
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  background: rgba(255,255,255,.04);
}

/* ========== FOOTER ========== */
.site-footer{
  margin-top:42px;
  padding: 28px 16px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 320px at 30% 0%, rgba(229,9,20,.16), transparent 60%),
    linear-gradient(180deg, rgba(12,12,18,.92), rgba(7,7,11,.98));
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 100% 7px;
}

.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  position:relative;
  z-index:1;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.footer-brand img{
  width:50px; height:50px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.footer-title{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing:.5px;
  text-transform: uppercase;
}
.footer-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top:2px;
}

.footer-cols{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap:14px;
}
.footer-head{
  font-weight: 900;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:.25px;
}
.footer-col a{
  display:block;
  padding: 6px 0;
  color: rgba(240,240,246,.82);
  transition: color .14s ease, transform .14s ease;
}
.footer-col a:hover{
  color:#fff;
  transform: translateX(2px);
}
.footer-note .muted{ color: var(--muted); line-height:1.55; }

.footer-bottom{
  max-width:var(--container);
  margin: 18px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(240,240,246,.65);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.footer-bottom .dot{ opacity:.5; }

@media (max-width: 980px){
  .footer-cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-cols{ grid-template-columns: 1fr; }
}

/* ================= PORTLAND NAV OVERRIDE (RED OVALS) ================= */
:root{
  --font-body: "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display: "Sora", Cinzel, ui-serif, Georgia, serif;
}

/* Keep header compact */
.topbar{ padding: 10px 18px; }
.brand-logo{ width:60px; height:60px; }

/* Desktop nav spacing */
.nav-desktop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* Portland-style pill nav */
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(240,240,246,.88);
  font-weight: 750;
  font-size: 13px;
  letter-spacing: .18px;

  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120px 28px at 35% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}

.nav-link::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: radial-gradient(120px 60px at 50% 50%, rgba(229,9,20,.55), transparent 70%);
  opacity:0;
  filter: blur(6px);
  transition: opacity .18s ease;
  z-index:-1;
}

/* Sheen sweep */
.nav-link::after{
  content:'';
  position:absolute;
  top:-60%;
  left:-35%;
  width:40%;
  height:220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:0;
}

/* Hover */
.nav-link:hover{
  color:#fff;
  transform: translateY(-1px);
  border-color: rgba(229,9,20,.45);
  box-shadow:
    0 16px 38px rgba(0,0,0,.55),
    0 0 0 3px rgba(229,9,20,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  background:
    radial-gradient(140px 34px at 35% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(229,9,20,.18), rgba(255,255,255,.03));
}
.nav-link:hover::before{ opacity:.9; }
.nav-link:hover::after{ opacity:1; animation: navsheen .85s ease; }

@keyframes navsheen{
  from{ left:-35%; }
  to{ left:120%; }
}

/* Active = solid red pill */
.nav-link.active{
  color:#fff;
  border-color: rgba(229,9,20,.65);
  background:
    radial-gradient(140px 40px at 35% 15%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(229,9,20,.92), rgba(122,2,5,.78));
  box-shadow:
    0 18px 50px rgba(0,0,0,.60),
    0 0 0 3px rgba(229,9,20,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-link.active::before{ opacity:1; }

/* Mobile nav items should look like pills too */
.nav-mobile .nav-link{
  width: fit-content;
}

/* Admin menu compatibility:
   If your admin nav links are not using .nav-link, you can map them here.
   Uncomment if needed.
*/
/*
.admin-nav a, .admin-nav .link, .admin-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120px 28px at 35% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  color: rgba(240,240,246,.88);
  font-weight: 750;
  font-size: 13px;
  letter-spacing: .18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.admin-nav a:hover, .admin-nav .link:hover, .admin-menu a:hover{
  color:#fff;
  transform: translateY(-1px);
  border-color: rgba(229,9,20,.45);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 0 3px rgba(229,9,20,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
*/

/* ================== TYPO + BODY CLEANUP (Pentester-ish) ================== */
:root{
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Kill "middle body gradient" – keep it modern/quiet */
html, body{
  background: #0b0b0e !important;
  background-image: none !important;
}

/* Optional: subtle “cinematic” texture without a big gradient */
body{
  font-family: var(--font-body) !important;
  color: rgba(240,240,246,.88);
}
body::before{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* very subtle film grain + faint scanline */
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.035), transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,.025), transparent 45%),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: auto, auto, 100% 9px;
  opacity: .35;
}

/* Make containers feel cleaner (less “washed” by gradients) */
.panel, .card{
  background: rgba(15,15,22,.78) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Headings: strong but not “fantasy serif” */
h1,h2,h3,.brand-title{
  font-family: var(--font-display) !important;
  letter-spacing: -.2px;
}

/* Portland pill nav stays, but with Inter-like menu typography */
.nav-link{
  font-family: var(--font-body) !important;
  font-weight: 650 !important;
  letter-spacing: .10px !important;
  text-transform: none !important;
}

/* Slightly more technical “chip” feel for badges/meta */
.badge, .muted, .meta, .kpi, .table th{
  font-family: var(--font-body) !important;
}
.badge{
  font-weight: 650;
  letter-spacing: .12px;
}

/* If you want that pentester “technical” vibe for tiny labels only: */
.tiny, .code-ish, .table td .hash, .footer-note small{
  font-family: var(--font-mono) !important;
  letter-spacing: .15px;
}

/* Reduce any remaining large background gradients in main sections */
.page-hero{
  background: none !important;
}

/* ================== PORTLAND NAV + NO SWIPE (FINAL OVERRIDE) ================== */

/* Webflow-ish baseline */
*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove ALL sheen/swipe animations on nav + buttons */
.nav-link::after,
.btn-primary::after,
.btn-ghost::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

.nav-link:hover::after,
.btn-primary:hover::after,
.btn-ghost:hover::after{
  animation: none !important;
}

/* If any prior keyframes exist, they simply won't be referenced now. */

/* Portland-like anchor behavior: transition on color only (and our pill bg/border) */
a{
  text-decoration:none;
  transition: color .35s ease, background .20s ease, border-color .20s ease, box-shadow .20s ease, transform .20s ease;
}

/* NAV LINK — match the Portland snippet (plus our red pill aesthetic) */
.nav-link{
  z-index: 1;
  color: #fff;

  flex-direction: row;
  justify-content: center;
  align-items: center;

  height: 100%;
  padding: 10px 15px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  display: flex;
  position: relative;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);

  /* static “modern” pill */
  background:
    radial-gradient(140px 34px at 35% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  transform: translateY(0);
}

/* Static glow halo (no movement) */
.nav-link::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: radial-gradient(120px 60px at 50% 50%, rgba(229,9,20,.42), transparent 72%);
  opacity: 0;
  filter: blur(7px);
  transition: opacity .25s ease;
  z-index:-1;
}

.nav-link:hover{
  color:#fff;
  border-color: rgba(229,9,20,.45);
  box-shadow:
    0 16px 38px rgba(0,0,0,.55),
    0 0 0 3px rgba(229,9,20,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  background:
    radial-gradient(160px 40px at 35% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(229,9,20,.14), rgba(255,255,255,.02));
}

.nav-link:hover::before{ opacity: 1; }

/* Active is a richer red pill (still static) */
.nav-link.active{
  color:#fff;
  border-color: rgba(229,9,20,.65);
  background:
    radial-gradient(170px 44px at 35% 18%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(229,9,20,.88), rgba(122,2,5,.76));
  box-shadow:
    0 18px 50px rgba(0,0,0,.60),
    0 0 0 3px rgba(229,9,20,.20),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.nav-link.active::before{ opacity: 1; }

/* BUTTONS — remove sheen, keep premium feel */
.btn-primary, .btn-ghost{
  position:relative;
  overflow:hidden;
}
.btn-primary:hover, .btn-ghost:hover{
  transform: translateY(-1px);
}

/* Ensure no other “sweep” exists via background-position animations */
.btn-primary, .btn-ghost, .nav-link{
  background-position: 0 0 !important;
}
/* ==========================================================
   PROFILE: Force DOB + BIO styling consistency (FINAL)
   This block intentionally uses high specificity + !important
   to override profile.php inline <style> rules.
   ========================================================== */

.profile-wrap textarea.pill-textarea,
textarea.pill-textarea{
  /* Rounded rectangle (NOT pill) */
  border-radius: 16px !important;
  min-height: 120px !important;
  height: auto !important;
  padding: 14px 16px !important;
  resize: vertical !important;

  /* Typography consistency */
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  /* Match field chrome */
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;
}

.profile-wrap input.pill[type="date"],
input.pill[type="date"]{
  /* Keep pill geometry */
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  /* Typography consistency */
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  /* Match field chrome */
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;

  /* Better dark rendering for native date picker */
  color-scheme: dark;
}

/* Focus state (same as profile theme) */
.profile-wrap textarea.pill-textarea:focus,
textarea.pill-textarea:focus,
.profile-wrap input.pill[type="date"]:focus,
input.pill[type="date"]:focus{
  border-color: rgba(229, 9, 20, .85) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .25) !important;
}
/* ==========================================================
   PILL SELECT (Shared): custom dropdown arrow + focus animation
   Use by wrapping: <div class="pill-select"><select class="pill">...</select></div>
   ========================================================== */

/* Ensure pill selects remain readable on dark theme */
select.pill{
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
}

/* Dropdown option list (browser-native menu) */
select.pill option{
  background: #0f0f13;
  color: rgba(255,255,255,.92);
}

/* Wrapper provides the custom arrow */
.pill-select{
  position: relative;
  display: block;
}

.pill-select > select.pill{
  width: 100%;
  padding-right: 44px; /* room for arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* Arrow */
.pill-select::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.75);
  border-bottom: 2px solid rgba(255,255,255,.75);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  opacity: .85;
}

/* “Open” animation (native select can’t expose open state; animate on focus) */
.pill-select:focus-within::after{
  transform: translateY(-40%) rotate(225deg);
  opacity: 1;
}

.pill-select:focus-within > select.pill{
  transform: translateY(-1px);
  transition: transform .18s ease;
}

/* Focus styling aligns with the rest of the site */
select.pill:focus{
  outline: none;
  border-color: rgba(229,9,20,.85);
  box-shadow: 0 0 0 3px rgba(229,9,20,.25);
}
.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;   /* Rounded square */
  object-fit: cover;
  display: block;
}

/* Logout Success Alert */
.alert-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 8px; /* rectangular, not pill */
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  animation: fadeSlideIn 0.3s ease-out;
}

.success-alert {
  background: linear-gradient(135deg, #1f7a3f, #27ae60);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
}

.alert-icon {
  font-size: 16px;
  font-weight: bold;
}

/* subtle entrance animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header profile pill: retract to preserve header room */
.topbar{
  gap: 12px;
}

.topbar > *{
  min-width: 0;
}

.brand{
  flex: 0 1 auto;
}

.nav-desktop{
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.top-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.profile-pill{
  flex: 0 1 auto;
  min-width: 0;
  max-width: clamp(180px, 24vw, 320px);
  padding: 8px 10px 8px 8px;
}

.profile-pill-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.profile-pill-name{
  min-width: 0;
  max-width: clamp(10ch, 16vw, 22ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.profile-pill-role{
  flex: 0 0 auto;
  margin-left: 12px;
}

.profile-pill-role-admin{
  border-color: rgba(229,9,20,.58);
  background: rgba(229,9,20,.12);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(229,9,20,.14);
}

.profile-pill-mobile{
  width: 100%;
  justify-content: flex-start;
  padding: 10px 12px;
}

.profile-pill-mobile .profile-pill-name{
  max-width: 22ch;
}

@media (max-width: 1180px){
  .profile-pill{
    max-width: clamp(160px, 22vw, 260px);
  }

  .profile-pill-name{
    max-width: clamp(8ch, 13vw, 18ch);
  }
}

@media (max-width: 980px){
  .top-actions{
    margin-left: auto;
  }

  .profile-pill{
    max-width: min(100%, 280px);
  }
}