:root{
--bg:#020617;
--panel:rgba(15,23,42,.75);
--panel-2:rgba(15,23,42,.55);
--border:rgba(148,163,184,.18);

--text:#f8fafc;
--muted:#cbd5e1;
--accent:#34d399;

--danger:#f87171;
--warn:#fbbf24;

--radius:16px;
--radius-pill:999px;
--shadow:0 10px 30px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }

html,body{ height:auto; min-height: 100%; }

html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:"ui-sans-serif","system-ui","-apple-system","Segoe UI","Roboto","Arial";
line-height:1.5;
}

/* Kill ugly visited purple everywhere */
a:visited{ color:inherit; }

/* Layout */
.container{
max-width:1100px;
margin:0 auto;
padding:24px 16px;
}

/* Header */
.site-header{
  background: rgba(2,6,23,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);}

/* Header container should be tighter than page container */
.site-header .container{
padding-top:10px;
padding-bottom:10px;
}

.header-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.brand{
font-weight:800;
letter-spacing:-.02em;
text-decoration:none;
color:var(--text);
white-space:nowrap;
}

/* NAV (desktop defaults) */
.nav{
display:flex;
align-items:center;
gap:14px;
}

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

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

.nav a{
color:var(--muted);
text-decoration:none;
font-size:14px;
padding:8px 10px;
border-radius:var(--radius-pill);
border:1px solid transparent;
display:inline-flex;
justify-content:center;
white-space:nowrap;
}

.nav a:hover{
color:var(--text);
background:rgba(148,163,184,.08);
border-color:rgba(148,163,184,.12);
}

/* Panels / type */
.panel{
border:1px solid var(--border);
background:var(--panel);
border-radius:var(--radius);
padding:18px;
box-shadow:var(--shadow);
}

.h-eyebrow{
color:var(--accent);
text-transform:uppercase;
letter-spacing:.25em;
font-size:12px;
font-weight:800;
}

.h-title{
font-size:36px;
line-height:1.15;
margin:10px 0 0 0;
letter-spacing:-.02em;
}

.h-sub{
color:var(--muted);
max-width:720px;
margin:12px 0 0 0;
}

/* Glow text */
.glow-text{
color:var(--accent);
text-shadow:
    0 0 18px rgba(52, 211, 153, 0.35),
    0 0 40px rgba(52, 211, 153, 0.18);
}

.muted{ color:var(--muted); }
.text{ color:var(--text); }
.small{ font-size:13px; color:var(--muted); margin:8px 0 0 0; }

/* Grid */
.grid{ display:grid; gap:16px; }
.grid.two{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }

/* Buttons */
.btn, .pill{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 14px;
border-radius:var(--radius-pill);
border:1px solid var(--border);
background:var(--panel-2);
color:var(--text);
text-decoration:none;
font-size:14px;
line-height:1;
}

.btn:hover, .pill:hover{ border-color:rgba(148,163,184,.35); }

.glow{
border-color:rgba(52,211,153,.55) !important;
color:var(--accent) !important;
box-shadow:0 0 24px rgba(52,211,153,.18);
}

.glow:hover{ box-shadow:0 0 30px rgba(52,211,153,.25); }

.pill.danger, .btn.danger{
border-color:rgba(248,113,113,.55) !important;
background:rgba(248,113,113,.12) !important;
color:var(--text) !important;
}

.pill.danger:hover, .btn.danger:hover{
border-color:rgba(248,113,113,.85) !important;
}

/* Badges */
.badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:4px 10px;
border-radius:var(--radius-pill);
border:1px solid var(--border);
font-size:12px;
color:var(--text);
background:var(--panel-2);
}

.badge-ok{ border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.10); }

.badge-warn{ border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.10); }

/* Messages */
.messages{ margin:12px 0; display:grid; gap:8px; }

.msg{
padding:10px 12px;
border-radius:12px;
border:1px solid var(--border);
background:var(--panel-2);
color:var(--text);
font-size:14px;
}

.msg.success{ border-color:rgba(52,211,153,.35); }
.msg.error{ border-color:rgba(248,113,113,.35); }

.page {
  min-height: 100vh;     /* full viewport height */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;}               /* pushes footer d

/* Page head */
.page-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
flex-wrap:wrap;
}

.head-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

/* Cards */
.card-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
margin-top:16px;
}

.card{
display:block;
border:1px solid var(--border);
background:var(--panel);
border-radius:var(--radius);
padding:16px;
text-decoration:none;
color:var(--text);
box-shadow:var(--shadow);
}

.card:hover{ border-color:rgba(148,163,184,.35); }

.card-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
}
.card h2{ margin:0; font-size:16px; line-height:1.25; }

/* Forms */
.form{ display:block; }

.field label{
display:block;
font-size:13px;
margin-bottom:6px;
color:var(--muted);
}

.field input,
.field select,
.field textarea{
width:100%;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(148,163,184,.22);
background:rgba(2,6,23,.55);
color:var(--text);
outline:none;
}

.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color:rgba(52,211,153,.55);
box-shadow:0 0 0 3px rgba(52,211,153,.10);
}

.field .errorlist{
margin:8px 0 0 0;
padding:0;
list-style:none;
color:#fecaca;
font-size:13px;
}

/* Footer */
.site-footer{
border-top:1px solid var(--border);
margin-top:40px;
}

.footer-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding-top:18px;
padding-bottom:12px;
flex-wrap:wrap;
}

/* Social initials */
.icon-row{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
align-items:center;
}
.icon-btn{
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:1px solid rgba(148,163,184,.22);
background:rgba(2,6,23,.55);
color:var(--text);
text-decoration:none;
font-weight:800;
letter-spacing:.06em;
font-size:12px;
}

.icon-btn:hover{
border-color:rgba(52,211,153,.70);
color:var(--accent);
box-shadow:0 0 24px rgba(52,211,153,.18);
}

/* Prevent grid children from overflowing */
.grid.two > * { min-width: 0; }

/* Safer wrapping on big headings */
.h-title {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Make sure panels don’t visually overlap on mobile */
.panel { overflow: hidden; }

/* ✅ Responsive */
@media (max-width: 900px){
  .card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px){
  .grid.two{ grid-template-columns:1fr; }
}

/* ✅ Mobile NAV: compact, not full screen */
@media (max-width: 640px){
  .header-row{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  }

  .nav{
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  }

  /* 4 links in one row like Vercel */
  .nav-links{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  }

  .nav a{
  width:100%;
  padding:10px 8px;
  white-space:nowrap;
  text-align:center;
  }

  /* Auth row under it */
  .nav-auth{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  }

  .nav-auth a{
  width:100%;
  }
}

/* If a tiny screen is too tight for 4 cols, switch to 2x2 */
@media (max-width: 520px){
  .nav-links{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card-grid{ grid-template-columns:1fr; }
  .h-title{ font-size:30px; }
}

/* ==========================
   MOBILE NAV: compact header
   ========================== */

@media (max-width: 640px){
  /* reduce padding so header isn't huge */
  .container{ padding: 16px 14px; }
}

  /* ==========================
   MOBILE HEADER: make it compact
   ========================== */
@media (max-width: 640px){

  /* tighten ONLY the header container (not the whole site) */
  .site-header .container{
    padding: 10px 12px;
  }

  /* stop huge vertical stacking */
  .header-row{
    padding: 0;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav{
    width: 100%;
    gap: 8px;
  }

  /* 4 links in one neat row */
  .nav-links{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-links a{
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  /* auth row compact */
  .nav-auth{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .nav-auth a{
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1;
  }

  /* brand slightly smaller */
  .brand{ font-size: 16px; }

  /* reduce how “tall” pills/buttons feel */
  .pill, .btn{
    padding: 8px 10px;
  }
}

/* --- Orders page mobile overflow fixes --- */

/* Let flex/grid children shrink properly (prevents overflow) */
.page-head > * { min-width: 0; }
.card-top > * { min-width: 0; }

/* Wrap long titles/names instead of stretching the card */
.card h2,
.page-head h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make the right-side action button behave on small screens */
.page-head .pill,
.page-head .btn {
  max-width: 100%;
}

/* On small screens: stack title + button nicely */
@media (max-width: 520px){
  .page-head{
    flex-direction: column;
    align-items: stretch;
  }

  .page-head a.pill,
  .page-head a.btn{
    width: 100%;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}