:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --accent:#0b6efd;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin:0; background:var(--bg); color:#111}
.container{max-width:900px;margin:48px auto;padding:24px}
header h1{margin:0 0 6px;font-size:28px}
.lead{margin:0 0 20px;color:var(--muted)}
.button-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.big-btn{background:linear-gradient(180deg,var(--accent),#0a58d1);color:white;border:0;padding:18px 16px;border-radius:10px;font-size:18px;cursor:pointer;box-shadow:0 6px 18px rgba(11,110,253,0.18);transition:transform .12s ease,box-shadow .12s}
.big-btn:active{transform:translateY(1px)}
.big-btn:focus{outline:3px solid rgba(11,110,253,0.18)}
.placeholder{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 6px 16px rgba(15,23,42,0.06)}

@media (max-width:640px){
  .button-grid{grid-template-columns:1fr;}
}

/* Submenu styles */
.hidden{display:none}
.sub-menu{display:flex;gap:12px;margin-bottom:16px}
.sub-btn{background:#fff;border:1px solid #e6e9ef;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;color:#0b6efd;box-shadow:0 4px 10px rgba(11,110,253,0.06);transition:transform .08s}
.sub-btn:active{transform:translateY(1px)}

@media (max-width:640px){
  .sub-menu{flex-direction:column}
}

/* Global Top Navigation Bar */
.top-nav {
  background: linear-gradient(135deg, #2d5436 0%, #234028 100%);
  padding: 16px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-nav .logo {
  height: 40px;
  width: auto;
}

.top-nav h1 {
  margin: 0;
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.btn-back-top {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

.btn-back-top:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

.btn-logout-top {
  background: #dc2626;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

.btn-logout-top:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-logout-top:active {
  transform: translateY(0);
}