:root{
  --bg:#f5f7fa; --surface:#ffffff; --navy:#16233b; --navy-2:#1f3a5f; --text:#1c2433;
  --muted:#5b6b80; --accent:#b50101; --accent-dark:#8f0101; --line:#e2e7ee;
  --ok:#1a7f37; --warn:#b25e00; --danger:#b50101; --radius:12px;
  --shadow:0 1px 3px rgba(16,35,59,.08),0 1px 2px rgba(16,35,59,.04);
  --shadow-lg:0 8px 24px rgba(16,35,59,.12);
  --maxw:1140px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);
  background:var(--bg);color:var(--text);line-height:1.55;display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--navy);line-height:1.15;font-family:var(--font-display);letter-spacing:-0.01em;font-weight:600}
.container{max-width:var(--maxw);width:100%;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.icon{width:1.05em;height:1.05em;fill:currentColor;vertical-align:-0.14em;flex:none}
/* One orchestrated page-load reveal (staggered), reduced-motion aware */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .app > *{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
  .app > *:nth-child(2){animation-delay:.05s}
  .app > *:nth-child(3){animation-delay:.10s}
  .app > *:nth-child(4){animation-delay:.15s}
  .app > *:nth-child(5){animation-delay:.20s}
}

/* Header — navy, matches footer */
.topbar{background:var(--navy);position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(16,35,59,.25)}
.topbar-inner{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;
  padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center}
.brand-logo{height:48px;width:auto;display:block;filter:brightness(0) invert(1)}
.topbar-right{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.search{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  padding:.5rem .9rem;border-radius:999px;min-width:200px;outline:none}
.search::placeholder{color:#aebbcd}
.search:focus{border-color:#fff;background:rgba(255,255,255,.14)}
.nav{display:flex;gap:1rem;align-items:center}
.nav-link{font-size:.92rem;color:#cdd9e8;font-weight:500}
.nav-link:hover{color:#fff}
.nav .muted{color:#aebbcd}
.btn{background:var(--accent);color:#fff;border:none;padding:.5rem .95rem;border-radius:8px;
  cursor:pointer;font-size:.95rem;font-weight:500;display:inline-flex;align-items:center;gap:.4rem}
.btn:hover{background:var(--accent-dark)}
.btn.secondary{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}
.btn.secondary:hover{background:rgba(255,255,255,.18)}
.btn.ok{background:var(--ok)} .btn.danger{background:var(--danger)}
.btn.google{background:#fff;border:1px solid var(--line);color:var(--navy)}
/* secondary buttons placed on light backgrounds (admin tables) */
.app .btn.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}
.app .btn.secondary:hover{background:#f0f3f7}

.app{padding-top:1.75rem;padding-bottom:1.75rem;flex:1}
.loading{color:var(--muted);padding:3rem;text-align:center}
.back{color:var(--muted);font-size:.9rem;display:inline-block;margin-bottom:1rem}
.back:hover{color:var(--accent)}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:700;color:var(--accent)}
.section-title{margin:.5rem 0 1rem;font-size:1.3rem}
.hero{padding:1rem 0 1.25rem}
.hero h1{margin:.3rem 0;font-size:1.9rem}
.hero p{color:var(--muted);margin:0 0 1rem;max-width:680px}

/* Landing */
.landing-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  border-radius:16px;padding:2.75rem 2rem;margin-bottom:2rem;text-align:center}
.landing-hero h1{color:#fff;font-size:2.1rem;margin:0 0 .6rem;max-width:820px;margin-inline:auto}
.landing-hero p{color:#cdd9e8;margin:0;max-width:640px;margin-inline:auto}
.product-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;display:block}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.product-card-top{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.product-card h3{margin:.3rem 0 .1rem;font-size:1.35rem}
.product-kind{color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.product-card p{color:var(--text);font-size:.9rem;margin:0 0 .9rem}
.product-card .count{color:var(--accent);font-weight:600;font-size:.85rem}
.product-card.placeholder{border-style:dashed;background:transparent;box-shadow:none;color:var(--muted)}
.product-card.placeholder:hover{transform:none;box-shadow:none}
.product-card.placeholder h3{color:var(--muted)}

/* Section heads */
.section-head{display:flex;align-items:center;gap:.5rem;margin:2rem 0 1rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--line)}
.section-head h2{margin:0;font-size:1.25rem;display:inline-flex;align-items:center;gap:.5rem}
.section-head .muted{font-size:.9rem;margin-left:.25rem}

/* Category tiles */
.cat-tiles{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:1rem 0 .5rem}
.cat-tile{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--radius);padding:1.2rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cat-tile h3{margin:.2rem 0;font-size:1.05rem}
.cat-tile p{color:var(--muted);margin:0;font-size:.88rem}
.cat-tile .count{color:var(--accent);font-size:.8rem;margin-top:.6rem;font-weight:600}

/* Cards */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#cdd6e2}
.card .body{padding:.9rem}
.card .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600}
.card h3{margin:.3rem 0;font-size:1rem}
.card p{margin:0;color:var(--muted);font-size:.85rem}
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-2))}
.thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.play-badge{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(181,1,1,.92);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none}
.play-badge .icon{width:22px;height:22px}
.doc-card .doc-icon{aspect-ratio:16/9;background:linear-gradient(135deg,#eef2f7,#dde6f1);
  display:flex;align-items:center;justify-content:center;position:relative;color:var(--navy)}
.doc-card .doc-icon .icon{width:42px;height:42px}
.doc-ext{position:absolute;bottom:.5rem;background:var(--navy);color:#fff;font-size:.6rem;
  font-weight:700;letter-spacing:.08em;padding:.1rem .4rem;border-radius:4px}

/* Item detail */
.player video{width:100%;border-radius:var(--radius);background:#000}
.player iframe{width:100%;height:80vh;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.detail-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.steps{margin:1.25rem 0;padding-left:1.25rem}
.steps li{margin:.4rem 0}
.doc-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;white-space:pre-wrap;max-height:70vh;overflow:auto;box-shadow:var(--shadow)}

/* Login */
.notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;max-width:460px;margin:3rem auto;box-shadow:var(--shadow)}
.notice h2{margin-top:0;text-align:center}
.notice p{color:var(--muted)}
.divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.8rem;margin:1.25rem 0}
.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--line)}
.divider span{padding:0 .75rem}
.field{display:block;margin:.6rem 0}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.25rem}
.field input{width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;outline:none}
.field input:focus{border-color:var(--accent)}
.form-error{color:var(--danger);font-size:.85rem;margin:.5rem 0 0;min-height:1em}
.form-toggle{margin-top:.9rem;font-size:.85rem;color:var(--muted);text-align:center}
.form-toggle a{color:var(--accent);cursor:pointer;font-weight:500}

/* Tables / error codes */
.table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{text-align:left;padding:.7rem .75rem;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.table th{background:#eef2f7;color:var(--navy);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.pill{padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.pill.pending{background:rgba(178,94,0,.12);color:var(--warn)}
.pill.approved{background:rgba(26,127,55,.12);color:var(--ok)}
.pill.rejected,.pill.hard{background:rgba(181,1,1,.1);color:var(--danger)}
.pill.soft{background:rgba(178,94,0,.12);color:var(--warn)}
.pill.info{background:#eef2f7;color:var(--muted)}
.err-code{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.doc-ref{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;color:var(--accent);font-size:.82rem;font-weight:500}
.doc-ref:hover{text-decoration:underline}

/* Footer — 4 columns, navy */
.footer{background:var(--navy);color:#cdd6e2;margin-top:2.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.75rem;padding-top:2.25rem;padding-bottom:1.75rem}
.footer-col{display:flex;flex-direction:column;gap:.55rem}
.footer-col h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .35rem}
.footer-col a{color:#cdd6e2;font-size:.9rem}
.footer-col a:hover{color:#fff}
.footer-logo{height:42px;width:auto;filter:brightness(0) invert(1)}
.footer-tag{color:#9fb0c3;font-size:.86rem;margin:.7rem 0 0;line-height:1.5}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:.9rem 1rem;font-size:.8rem;color:#8aa0bb}

@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:.6rem}
  .search{min-width:0;width:100%}
  .container{padding-left:1rem;padding-right:1rem}
  .landing-hero{padding:2rem 1.25rem}
  .landing-hero h1{font-size:1.6rem}
  .footer-grid{grid-template-columns:1fr}
}