/* ===== ERA theme tokens ===== */
:root{
  --era-navy:#0b3f7f;
  --era-navy-700:#0a366c;
  --era-navy-100:#e9f0fa;
  --era-orange:#f5a000;
  --era-orange-700:#cf8200;
  --era-white:#ffffff;

  --era-text:#0f1b2d;
  --era-muted:#6b7280;
  --era-border:#e6e8ee;
  --era-surface:#f8fafc;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--era-text);
  background:var(--era-white);
}
a{color:var(--era-navy); text-decoration:none}
a:hover{color:var(--era-orange)}
.container{max-width:1400px; margin:0 auto; padding:24px}

/* ===== Header ===== */
.header{
  border-bottom:1px solid var(--era-border);
  background:linear-gradient(180deg, var(--era-white), #fbfdff 60%);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-mark{width:90px; height:90px; object-fit:contain}
.brand-text{display:flex; align-items:center; gap:.5rem}
.brand-name{font-weight:800; color:var(--era-navy)}
.badge-era{
  background:var(--era-navy-100); color:var(--era-navy);
  padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700
}

/* ===== Sections & cards ===== */
.card{
  background:var(--era-white);
  border:1px solid var(--era-border);
  border-radius:12px;
  padding:16px 18px;
  margin-top:18px;
}
.section-title{
  display:flex; align-items:center; gap:.55rem;
  color:var(--era-navy); font-weight:800; margin:.2rem 0 12px;
}
.section-title::before{
  content:""; width:10px; height:10px; border-radius:999px; background:var(--era-orange);
}

/* ===== Forms & controls ===== */
.inline-form{display:flex; gap:8px; margin-bottom:10px}
.stack-form{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.input{
  flex:1 1 280px;
  border:1px solid var(--era-border);
  border-radius:10px;
  padding:.6rem .7rem;
  font-size:14px;
}
.input:focus{outline:2px solid color-mix(in oklab, var(--era-navy) 35%, white); border-color:var(--era-navy)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:.6rem; border:1px solid var(--era-border);
  font-weight:600; cursor:pointer; background:var(--era-white)
}
.btn-primary{background:var(--era-navy); color:#fff; border-color:var(--era-navy)}
.btn-primary:hover{background:var(--era-navy-700)}
.btn-accent{background:var(--era-orange); color:#1f2937; border-color:var(--era-orange)}
.btn-accent:hover{background:var(--era-orange-700); color:#0f172a}

/* ===== Table ===== */
.table-wrap{overflow-x:auto}
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--era-border);
  border-radius:12px; overflow:hidden;
  table-layout: auto;
}
.table thead th{
  background:var(--era-navy); color:#fff; text-align:left;
  padding:.75rem .8rem; font-weight:700; letter-spacing:.02em
}
.table tbody td{
  padding:.65rem .8rem; border-top:1px solid var(--era-border)
}
.table tbody tr:nth-child(even){background:var(--era-surface)}
.table tbody tr:hover{background: color-mix(in oklab, var(--era-navy-100) 60%, white)}
td.price, td.ts{text-align:left}

/* ===== Typography tweaks ===== */
h1{margin:0 0 8px 0}
h2{margin:0 0 8px 0}
.hint{color:var(--era-muted); font-size:.9rem; margin-top:8px}
code{background:#f3f5f9; padding:.1rem .3rem; border-radius:6px}


/* utilities used by login */
.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;
}
.login-form{max-width:420px}
.login-actions{display:flex; gap:10px; align-items:center}