:root {
  --bg-dark: #05070d;
  --card-bg: rgba(10, 15, 25, 0.85);
  --accent: #00e0ff;
  --yubico-green: #84bd00;
  --accent-soft: rgba(0,224,255,0.15);
  --accent-glow: rgba(0,224,255,0.4);
  --text-main: #e6faff;
  --text-dim: #6f8ea3;
  --border: rgba(0,224,255,0.2);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--text-main);
  background: #000;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://images.pexels.com/photos/220357/pexels-photo-220357.jpeg") center/cover no-repeat;
  filter: brightness(0.25) contrast(1.3) saturate(1.2);
  z-index: -3;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(0,224,255,0.15), transparent 60%),
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.95));
  z-index: -2;
}
.grid-overlay {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,224,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,224,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: -1;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove { from {background-position:0 0;} to {background-position:60px 60px;} }
.container { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: rgba(5,10,20,0.85); backdrop-filter: blur(10px); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.sidebar h1 { margin:0; padding:30px 20px; font-size:1.2em; letter-spacing:4px; text-transform:uppercase; color:var(--accent); text-shadow:0 0 15px var(--accent-glow); }
.sidebar ul { list-style:none; padding:0 10px; margin:0; }
.sidebar li { padding:14px 16px; margin-bottom:6px; border-radius:10px; cursor:pointer; color:var(--text-dim); transition:0.25s; font-size:0.9em; border:1px solid transparent; display:flex; align-items:center; }
.sidebar li:hover { border-color:var(--border); background:var(--accent-soft); color:var(--accent); }
.sidebar li.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.sidebar img { height:24px; margin-right:10px; border-radius: 4px; object-fit: contain;}

.sidebar li.yubi-active { 
    background: rgba(132, 189, 0, 0.15) !important; 
    border-color: var(--yubico-green) !important; 
    color: var(--yubico-green) !important; 
}

.main { flex-grow:1; padding:60px 50px; max-width:1500px; margin:0 auto; }

.header-area { margin-bottom:50px; text-align:center; }
.header-area h2 { font-size:2.8em; font-weight:800; letter-spacing:4px; text-transform:uppercase; margin:0; background:linear-gradient(90deg,#fff,var(--accent),#fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 25px var(--accent-glow); }
.header-area p { margin-top:15px; font-size:0.95em; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.header-divider { width:120px; height:2px; margin:20px auto 0; background:var(--accent); box-shadow:0 0 15px var(--accent); }

.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:30px; }
.tile { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:28px; transition:0.3s; backdrop-filter:blur(8px); display:flex; flex-direction:column; position:relative; }
.tile::before { content:""; position:absolute; inset:0; border-radius:16px; box-shadow:inset 0 0 20px rgba(0,224,255,0.05); pointer-events:none; }
.tile:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 0 35px var(--accent-glow); }
.tile h3 { margin:0 0 18px 0; color:var(--accent); letter-spacing:1px; font-size:1.05em; }

/* Yubikey Management: Persistent Green Theme */
.yubi-theme .tile { border-color: rgba(132, 189, 0, 0.4); }
.yubi-theme .tile h3 { color: var(--yubico-green); }
.yubi-theme .tile:hover { border-color: var(--yubico-green); box-shadow: 0 0 35px rgba(132, 189, 0, 0.4); }
.yubi-theme button { background: var(--yubico-green); color: #000; }

.azure-theme .tile { border-color: rgba(0,120,212,0.3); }
.azure-theme .tile h3 { color:#0078D4; }
.azure-theme .tile:hover { border-color:#0078D4; box-shadow:0 0 35px rgba(0,120,212,0.45); }

input { background: rgba(0,0,0,0.6); border:1px solid var(--border); color:#fff; padding:12px; border-radius:8px; margin-bottom:12px; }
button { background:var(--accent); border:none; padding:12px; border-radius:8px; color:#000; font-weight:700; cursor:pointer; transition: 0.2s; }
button:hover { opacity: 0.8; }

.result-box { margin:15px 0; font-family:monospace; font-size:0.85em; color:var(--text-dim); min-height:20px; }
.counter-box { margin-top: 6px; font-family: monospace; font-size: 0.8em; color: var(--text-dim); }

@media (max-width:900px) { .container { flex-direction:column; } .sidebar { width:100%; } }