:root{
  --bg:#1b1e23;
  --card:#262a30;
  --text:#ececef;
  --muted:#aeb3bd;
  --accent:#d32f2f;          /* Einhell red for primary btn */
  --border:rgba(255,255,255,0.10);
  --shadow:0 10px 30px rgba(0,0,0,0.28);
  --radius:16px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont,"SF Pro Text","Inter",Segoe UI,Roboto,Arial,Helvetica,sans-serif;
}

/* Topbar — original */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,3vw,28px);
  background:rgba(22,24,28,0.75);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.logo{height:28px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35))}
.brand-text{opacity:.95; font-weight:600; letter-spacing:.2px}
.top-actions{display:flex; gap:10px}
.icon-btn{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:12px; cursor:pointer;
}
.icon-btn:hover{border-color:rgba(255,255,255,0.18)}

/* Controls — left aligned, legend under search */
.controls{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; padding:18px clamp(16px,3vw,28px);
}
#search{
  width:min(620px,100%);
  padding:12px 14px; border-radius:14px; border:1px solid var(--border);
  background:#191c21; color:var(--text);
}
.legend{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start;
  font-size:13px; color:var(--muted);
}
.legend-item{display:flex; align-items:center; gap:6px}
.legend-icon{font-size:16px; line-height:1}

/* Content + categories */
.content{padding:10px clamp(16px,3vw,28px) 40px}
.category{margin-top:26px}
.category-title{
  margin:18px 6px; font-size:15px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
}

/* Grid with FIXED-size cards (no stretching) */
.grid{
  display:flex; flex-wrap:wrap; gap:18px;
}
.card{
  position:relative;
  width:280px;
  min-height:170px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  padding:14px; transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,0.16)}
.icon-wrap{height:32px; display:flex; align-items:center}
.app-icon{height:28px; width:28px; object-fit:contain; border-radius:6px; background:#191c21}
.card-body{flex:1}
.app-name{margin:2px 0 4px; font-size:16px; text-align:left}
.app-comment{margin:0; color:var(--muted); font-size:13px; font-style:italic; text-align:left}
.card-actions{display:flex; gap:8px; align-items:center; margin-top:auto}
.btn{
  background:#33373e; color:var(--text); border:1px solid var(--border);
  padding:8px 10px; border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:rgba(255,255,255,0.18)}
.btn.primary{background:var(--accent); border-color:rgba(0,0,0,0.3); color:white; font-weight:600}

/* Access badges (top-right, emoji) */
.access-badge{
  position:absolute; top:8px; right:10px;
  font-size:18px; line-height:1;
}
.access-public{ /* ✅ */ }
.access-internal{ /* 🚫 */ }

/* 🔒 Lock screen (on top, nothing visible behind because app is hidden) */
.lock-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  background: #0f1216;                  /* solid backdrop */
}
.lock-card{
  width:min(520px,92vw);
  background:#21262d;
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px;
  box-shadow:var(--shadow);
}
.lock-card .muted{color:var(--muted)}
#lock-form{display:flex; gap:10px; margin-top:12px}
#password-input{
  flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#191c21; color:var(--text);
}
.error{color:#ff7474; margin-top:10px}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:#33373e; color:var(--text); border:1px solid var(--border);
  padding:10px 14px; border-radius:12px; opacity:0; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}