:root{ --brand:#1f6feb; --bg:#0a0c10; --card:#111520; --text:#e6edf3; --muted:#8b949e; --accent:#2ea043; --danger:#f85149; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
header{position:sticky;top:0;background:linear-gradient(180deg,#0b1020,#0a0c10);border-bottom:1px solid #222;padding:10px 16px;z-index:10}
.banner{display:flex;align-items:center;gap:12px}
.banner img.logo{height:40px;width:40px;border-radius:8px}
.title{font-size:1.2rem;font-weight:700}
.spacer{flex:1}

.btn{background:var(--brand);border:none;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.secondary{background:#30363d}
.btn.danger{background:var(--danger)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.hero{background:#0b1020;border-bottom:1px solid #222}
.hero img{width:100%;max-height:220px;object-fit:cover;border-radius:12px}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:800px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid #222;border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.muted{color:var(--muted)}
.link{text-decoration:underline;cursor:pointer}

/* Menu */
.hamburger{display:inline-flex;flex-direction:column;gap:4px;cursor:pointer}
.hamburger span{width:24px;height:2px;background:#fff;display:block}
.menu{position:absolute;right:16px;top:60px;background:var(--card);border:1px solid #222;border-radius:12px;min-width:220px;display:none}
.menu.open{display:block}
.menu a{display:block;color:#fff;text-decoration:none;padding:10px 12px;border-bottom:1px solid #222}
.menu a:hover{background:#1a2235}

/* ===== Modal (enlarged + safe scroll) ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .panel{
  background:var(--card);
  border:1px solid #222;
  border-radius:16px;
  padding:16px;
  width:100%;
  max-width:680px;              /* enlarged from 520px */
  max-height:min(88vh, 920px);  /* safe internal scroll if content is tall */
  overflow:auto;
}
@media(min-width:1200px){
  .modal .panel{ max-width:760px; }
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}

/* Form rows */
.row{display:flex;flex-direction:column;margin:10px 0}
.row.actions{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.row.actions .left{display:flex;gap:8px;flex-wrap:wrap}
.row.actions .right{display:flex;gap:8px}
label{font-size:.9rem;margin-bottom:6px}
input,select{background:#0d1117;border:1px solid #30363d;color:#fff;padding:10px;border-radius:10px}
.row>input,.row>select{width:100%;min-width:0}
.msg{min-height:18px}

/* Two-up name fields at medium+ widths */
.name-grid{display:block}
@media(min-width:540px){
  .name-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .name-grid .row{margin:0}
}

/* Table (if used elsewhere) */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #222;padding:8px;text-align:left}

footer{padding:30px 16px;color:var(--muted);text-align:center;border-top:1px solid #222;margin-top:40px}

/* ===== Auth Pane Switch – Directional Variant (compatible) ===== */
.auth-panes{position:relative;min-height:320px;overflow:hidden}
.auth-pane{position:absolute;inset:0;opacity:0;transform:translateX(16px);pointer-events:none;transition:opacity 180ms ease,transform 200ms ease}
.auth-pane.active{opacity:1;transform:translateX(0);pointer-events:auto}
.auth-pane.dir-back{transform:translateX(-16px)}
@media (prefers-reduced-motion: reduce){.auth-pane,.auth-pane.active{transition:none!important;transform:none!important}}


/* === WCMB Contrast & Media Enhancements ===
   Safe to append at end of your existing style.css
*/
:root{
  --link-color:#58a6ff;           /* bright blue on dark */
  --link-color-hover:#79c0ff;     /* lighter on hover */
}

/* High-contrast, always-underlined links on dark background */
a:not(.btn){
  color:var(--link-color);
  text-decoration:underline;
  text-underline-offset: 2px;
}
a:not(.btn):hover{ color:var(--link-color-hover); }

/* Product and gallery images: keep contained and consistent */
img.responsive{ max-width:100%; height:auto; display:block; }
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* Storefront cards (grid) */
.product-card img{ width:100%; height:180px; object-fit:cover; border-radius:10px; background:#0b0f19; border:1px solid #1f2633; }

/* Product detail hero image */
.product-hero{ width:100%; max-height:360px; object-fit:cover; border-radius:12px; background:#0b0f19; border:1px solid #1f2633; }

/* Admin thumbs already small, add subtle border */
img.thumb{ border:1px solid #1f2633; border-radius:8px; background:#0b0f19; }

/* === Smaller storefront images === */
.product-card img{
  width:75%;
  height:100px;           /* was 180px; try 140–160 to taste */
  object-fit:cover;
  border-radius:10px;
  background:#0b0f19;
  border:1px solid #1f2633;
}

/* Smaller hero image on product detail */
.product-hero{
  width:75%;
  max-height:100px;       /* was 360px */
  object-fit:cover;
  border-radius:12px;
  background:#0b0f19;
  border:1px solid #1f2633;
}

/* Link contrast (keep from earlier patch) */
:root{
  --link-color:#58a6ff;
  --link-color-hover:#79c0ff;
}
a:not(.btn){
  color:var(--link-color);
  text-decoration:underline;
  text-underline-offset:2px;
}
a:not(.btn):hover{ color:var(--link-color-hover); }