/* ============================================================================
 * SJS MASTER — shared/styles.css
 * Hub + login chrome. Governed by the BRAND LAWS (see CLAUDE.md):
 *   dark always · gold #B3892B accent only · no neon/glow (cyan ON HOLD — see CLAUDE.md) ·
 *   green = win, red = fail, gold = neutral · Bebas headers · Space Mono body ·
 *   motion calm and deliberate.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --gold:#B3892B; --gold-bright:#d4a83a; --gold-dim:#7a5e1e;
  --green:#5aa95a; --red:#c0605f;
  --bg:#070708; --surface:#101013; --surface2:#17171b;
  --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.05);
  --soft:#e7e5df; --soft-mid:#bdbab1; --dim:#8e8c86;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:radial-gradient(1100px 720px at 50% -10%,#15131a,var(--bg) 60%);
  color:var(--soft); font-family:'Space Mono',monospace;
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

/* ── top status strip ───────────────────────────────────────────────────── */
.hub-strip{
  display:flex; align-items:center; gap:12px;
  padding:9px 20px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#141418,var(--surface));
  font-size:10px; letter-spacing:2px; color:var(--dim);
}
.hub-strip .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(90,169,90,0.5);}
.hub-strip .right{margin-left:auto;color:var(--soft-mid);}

/* ── header ─────────────────────────────────────────────────────────────── */
.hub-wrap{max-width:1080px;margin:0 auto;padding:56px 24px 40px;animation:fadeIn .4s ease;}
.hub-logo{font-family:'Bebas Neue',sans-serif;font-size:84px;line-height:.9;letter-spacing:10px;color:var(--gold-bright);text-align:center;}
.hub-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:7px;color:var(--soft);text-align:center;margin-top:6px;}
.hub-tag{font-size:11px;letter-spacing:3px;color:var(--dim);text-align:center;margin-top:10px;}
.hub-rule{height:1px;background:var(--border);max-width:280px;margin:26px auto;}

/* ── tile grid ──────────────────────────────────────────────────────────── */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:10px;}
.tile{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.tile:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,0.45),0 0 0 1px rgba(179,137,43,0.25);}
.tile-badge{
  flex-shrink:0;width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:1px;
  color:var(--gold-bright);background:rgba(179,137,43,0.08);
  border:1px solid var(--gold-dim);
}
.tile-body{flex:1;min-width:0;}
.tile-name{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--soft);}
.tile-desc{font-size:11px;letter-spacing:1px;color:var(--soft-mid);margin-top:3px;line-height:1.5;}
.tile-go{flex-shrink:0;font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700;}
.tile:hover .tile-go{color:var(--gold-bright);}

/* coming-soon tiles — view only, dimmed, no motion */
.tile.soon{opacity:.5;pointer-events:none;}
.tile.soon .tile-badge{color:var(--dim);border-color:var(--border);background:rgba(255,255,255,0.02);}
.tile-chip{flex-shrink:0;font-size:9px;letter-spacing:2px;color:var(--dim);border:1px solid var(--border);border-radius:980px;padding:4px 10px;}

/* ── footer ─────────────────────────────────────────────────────────────── */
.hub-foot{max-width:1080px;margin:36px auto 0;padding:18px 24px 48px;border-top:1px solid var(--border-soft);
  font-size:10px;letter-spacing:1.5px;color:var(--dim);line-height:1.8;text-align:center;}
.hub-foot b{color:var(--soft-mid);font-weight:700;}

/* ── login modal (reserved for the unified-auth wire-up; gold-only) ──────── */
.login-box{background:rgba(16,16,20,0.9);border:1px solid var(--border);padding:40px 48px;display:flex;flex-direction:column;gap:18px;min-width:380px;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(179,137,43,0.15);animation:fadeIn .4s ease;}
.login-logo{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:8px;color:var(--gold-bright);text-align:center;line-height:1;}
.login-fld{background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--soft);font-family:'Space Mono',monospace;font-size:13px;letter-spacing:1px;padding:12px;width:100%;outline:none;border-radius:10px;transition:border-color .2s;}
.login-fld:focus{border-color:var(--gold-bright);}
.login-btn{background:linear-gradient(180deg,#e6c25c,#c69a32);border:none;color:#1a1407;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;letter-spacing:3px;padding:13px;cursor:pointer;border-radius:980px;transition:filter .15s,transform .15s;}
.login-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.login-err{font-size:11px;color:var(--red);letter-spacing:1px;text-align:center;font-weight:700;display:none;}