@font-face { font-family:'Px Grotesk'; src:url('/fonts/Px-Grotesk-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Px Grotesk'; src:url('/fonts/Px-Grotesk-Bold-Italic.ttf')  format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Px Grotesk'; src:url('/fonts/Px-Grotesk-Bold.ttf')    format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* Theme */
  --bg: #000000;              /* background */
  --panel:#0b120e;           /* slightly lighter than bg */
  --text: #ffffff;            /* text */
  --muted:#b3bfb9;           /* subtle text */
  --line:#13231b;            /* separators */
  --primary: #c7ff00;
  --secondary: #84910f;
  --accent: #8aea30;
  /* Layout gutters */
  --gutter:24px;             /* default horizontal padding */
  --gutter-sm:16px;          /* mobile/tablet horizontal padding */
}
*{box-sizing:border-box}
html{background-color:var(--bg); scrollbar-gutter: stable both-edges}
html,body{height:100%}
/* Sticky footer layout */
body{
  margin:0; color:var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, #0e1511 0%, var(--bg) 60%) fixed;
  background-color: var(--bg);
  font-family:'Px Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:16px; line-height:1.5;
  letter-spacing:.1px;
  min-height:100vh; display:flex; flex-direction:column;
}
/* Prevent accidental horizontal scrolling */
html, body { overflow-x:hidden }
/* Robust containment: avoid children forcing horizontal overflow */
img, svg, video, canvas, iframe{max-width:100%; height:auto}
/* Allow long tokens (z.B. Codes, E‑Mails) to wrap instead of overflowing */
:where(p, li, td, th, code, a){overflow-wrap:anywhere; word-break:break-word}
/* Make common containers shrinkable in flex/grid to prevent overflow */
.container, .card, .table, header nav{min-width:0}
/* Reserve scrollbar space to prevent horizontal layout jump between pages */
@supports not (scrollbar-gutter: stable) {
  html{ overflow-y:scroll }
}
header{padding:6px 0; background:linear-gradient(180deg,#0a110d,var(--bg)); border-bottom:1px solid var(--line)}
footer{padding:12px 0; background:linear-gradient(180deg,#0a110d,var(--bg)); border-top:1px solid var(--line)}
/* Keep header visible while scrolling */
header{position:sticky; top:0; z-index:1000}
.brand{display:block; max-height:86px; max-width:100%; height:auto}
/* Header layout: brand above, nav centered below; stays inside header */
header .container{display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; align-items:center; position:relative; padding:12px var(--gutter)}
header .container > a[aria-label]{grid-column:2; grid-row:1; justify-self:center}
header nav{grid-column:2; grid-row:2; justify-self:center; display:inline-grid; grid-template-columns:repeat(2, 140px); gap:8px; align-content:center}
/* Ensure enough header space for multi-row nav */
header{padding-bottom:4px}
.container{max-width:980px; margin:0 auto; padding:var(--gutter); width:100%}

/* Let main area expand to push footer to bottom */
main{flex:1 0 auto}

h1,h2,h3{letter-spacing:.4px}
h1{font-weight:700; font-size:28px}
h2{font-weight:600; font-size:20px; color:#ddd}

.card{
  border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px 0;
  background:linear-gradient(180deg,#0b130f,#09110d);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.btn{display:inline-block; padding:11px 16px; border-radius:10px; text-decoration:none;
     border:1px solid var(--line); color:var(--text); background:#0c1310; backdrop-filter:blur(4px)}
.btn{font-size:14px}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.35)}
.btn-primary{background:var(--primary); color:#070b09; border-color:var(--secondary); font-weight:600}

.input, select, textarea{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#0a120e; color:var(--text)}
.label{display:block; font-weight:600; margin:12px 0 6px; color:#cfcfcf}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px; text-align:left; color:#d8d8d8}

.notice{background:#0e1511; border:1px solid #1a2a22; padding:12px; border-radius:10px; color:#dfe5e2}
.success{background:#0b1912; border:1px solid #1b3a2b; padding:12px; border-radius:10px}

nav a{display:flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none; margin:0; padding:6px 10px; font-weight:700; font-size:14px;
  border:1px solid var(--line); border-radius:10px; background:#0c1310; backdrop-filter:blur(4px);
  box-shadow:0 6px 14px rgba(0,0,0,.28); height:36px}
nav a:hover{color:var(--text); transform:translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.35)}

/* Default: hide mobile-only footer logout */
footer .logout-mobile{ display:none }

/* Desktop: place Logout at top-right and make it stand out */
@media (min-width: 601px){
  /* Desktop: nav items inline in a single row */
  header nav{display:flex; gap:8px; margin-top:6px}
  header nav a[href$="logout.php"]{
    position:absolute; right:var(--gutter); top:8px; z-index:1001;
    background:var(--accent); color:#070b09; border-color:var(--secondary);
    font-weight:700; padding:8px 14px; height:40px;
  }
  header nav a[href$="logout.php"]:hover{ color:#070b09 }
}

/* Global links (content, footer, legal) */
a{color:var(--accent); text-decoration:underline}

a:hover{color:var(--primary)}
a:active{color:var(--secondary)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

small,.muted{color:var(--muted)}

/* Mobile optimizations */
@media (max-width: 768px){
  :root{ --gutter: var(--gutter-sm) }
  .container{padding:var(--gutter)}
  header{padding:5px 0}
  footer{padding:10px 0}
  h1{font-size:24px}
  h2{font-size:18px}
  .card{padding:14px; margin:12px 0}
  /* Stack: brand first, nav below; evenly sized cards */
  header .container{display:block; padding:4px var(--gutter)}
  header .brand{display:block; margin:0 auto; max-height:66px}
  header nav{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:8px}
  nav a{width:100%; height:40px; padding:8px 12px}
  /* Mobile: place Logout as full-width last row item (not fixed) */
  header nav a[href$="logout.php"]{ grid-column:1 / -1 }
  /* Dashboard-only: hide header Logout and show footer Logout */
  body.dashboard header nav a[href$="logout.php"]{ display:none }
  body.dashboard footer .logout-mobile{ display:block; width:100%; text-align:center }
  /* Tables: allow horizontal scroll on small screens */
  .table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table th,.table td{white-space:nowrap; padding:8px}
}