/* ===== Intranet stylesheet (CSP-safe) ===== */
:root{
  --bg: #0f172a;       /* slate-900 */
  --panel:#0b1324;     /* deep slate */
  --card:#0f1a33;      /* slightly lighter */
  --line:#1f2937;      /* slate-700 */
  --text:#e5e7eb;      /* slate-200 */
  --muted:#9ca3af;     /* slate-400 */
  --brand:#2563eb;     /* blue-600 */
  --hover:#152449;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 20px;
  background:rgba(11,19,36,.70);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}
.brand{font-weight:700;letter-spacing:.2px}
.muted{color:var(--muted)}

.user{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.btn{
  padding:8px 12px;
  border-radius:10px;
  background:transparent;
  border:1px solid var(--line);
  line-height:1;
}
.btn:hover{background:rgba(255,255,255,.04)}

.hero{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:22px 0 4px 0;
  padding:0 20px;
}
/* Make sure the logo is never huge */
#logo,
.hero img,
img.site-logo,
.logo img,
header img.logo,
img[alt*="logo" i]{
  max-height: clamp(64px, 12vw, 120px);
  max-width: min(60vw, 320px);
  height:auto;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

main.grid{
  --min:180px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  gap:16px;
  max-width:1100px;
  margin:28px auto;
  padding:0 20px;
}

.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:140px;
  padding:18px 14px;
  background:linear-gradient(180deg, var(--card) 0%, #0c1936 100%);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tile:hover{ transform: translateY(-2px); background: var(--hover); box-shadow: 0 10px 28px rgba(0,0,0,.32); }

.icon{opacity:.9}
.icon svg{ width:48px; height:48px; display:block; }
.label{ font-weight:600; letter-spacing:.2px; text-align:center; }
.badge{
  position:absolute; top:10px; right:10px;
  font-size:11px; padding:3px 8px; border-radius:999px;
  color:#e5efff; background:rgba(37,99,235,.28);
  border:1px solid rgba(37,99,235,.45);
  text-transform:lowercase;
}

footer{
  margin:36px 0 24px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Responsive tweaks */
@media (max-width: 640px){
  header{padding:12px 12px}
  .btn{padding:7px 10px}
  main.grid{--min:150px;margin:18px auto}
  #logo,
  .hero img{ max-height: clamp(56px, 16vw, 96px); max-width: 70vw; }
}