:root{
  --lum:#003366;
  --bg: #f7f8fb;
  --fg: #111827;
  --muted:#6b7280;
  --brand:#1E3A8A;
  --card:#ffffff;
  --ring:#93c5fd;
  --shadow: 0 2px 6px rgba(0,0,0,.08);
}
:root.dark{
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted:#9ca3af;
  --brand:#8ab4ff;
  --card:#101828;
  --ring:#60a5fa;
  --shadow: 0 2px 10px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.app-header{
  position: sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px; backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg), transparent 10%);
  border-bottom: 1px solid color-mix(in oklab, var(--muted), transparent 80%);
}
.title-wrap{display:flex; align-items:center; gap:12px}
.brand-icon{width:28px; height:28px; border-radius:8px}
h1{font-size: clamp(18px, 2.6vw, 22px); margin:0; font-weight:700}
.badge{font-size:12px; padding:3px 8px; border-radius:999px; margin-left:8px;
  background: color-mix(in oklab, var(--brand), white 75%); color: var(--brand);
  border: 1px solid color-mix(in oklab, var(--brand), white 60%);
}

.actions{display:flex; gap:8px}
.btn{cursor:pointer; border:none; border-radius:10px; padding:8px 12px; font-weight:600;
  background: var(--brand); color:white; box-shadow: var(--shadow);
}
.btn:focus-visible{outline:2px solid var(--ring)}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid color-mix(in oklab, var(--fg), transparent 70%)}

.container{max-width:1100px; margin:20px auto; padding:0 16px}

.controls{display:grid; gap:12px; grid-template-columns: 1fr; margin: 12px 0 8px}
#search{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--muted), transparent 60%);
  background: var(--card); color: var(--fg); box-shadow: var(--shadow);
}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  border:1px solid color-mix(in oklab, var(--muted), transparent 60%);
  background: var(--card); color:var(--fg); padding:8px 10px; border-radius:999px; cursor:pointer;
}
.tab.active{outline:2px solid var(--ring)}

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 14px 0 28px;
}
.card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background: var(--card); border-radius:14px; padding:20px; text-decoration:none;
  color: var(--brand); border:1px solid color-mix(in oklab, var(--muted), transparent 70%);
  box-shadow: var(--shadow); min-height:120px; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible{ transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 24px rgba(0,0,0,.12) }
.card .icon{ font-size:36px }
.card .label{ font-weight:700; color: var(--fg) }
.card .sub{ font-size:12px; color: var(--muted) }

.empty{ text-align:center; padding:40px 0; opacity:.8}

.app-footer{ text-align:center; padding:20px; color: var(--muted) }

@media (prefers-color-scheme: dark){
  :root:not(.light){ color-scheme: dark; }
}


/* === LUM blue cards (no icons) === */
.card{
  background: var(--lum, #003366) !important;
  color: #fff !important;
  border: none !important;
}
.card .label{ color:#fff !important; }
.card .sub{ display:none !important; }
.icon{ display:none !important; margin:0 !important; font-size:0 !important; }
.card:hover, .card:focus-visible{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}