*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f6f7fb;color:#111}
a{color:#0a58ca;text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:40px auto;padding:0 16px}
.container.small{max-width:480px}

/* Top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:10}
.brand a{font-weight:800;color:#111;text-decoration:none}

/* Nav links */
.nav-wrap{display:flex;align-items:center;gap:16px;flex:1}
.nav-links{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap}

/* Hamburger + avatar: hidden by default (desktop) */
.menu-btn{display:none}
.user-mini{display:none}

/* Cards / tables */
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
label{display:block;margin:8px 0 10px;font-size:14px}
input,select,button{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px}
button{cursor:pointer;background:#0d6efd;color:#fff;border-color:#0d6efd}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee}
.alert{padding:10px;border-left:4px solid #0d6efd;background:#e9f2ff;border-radius:8px;margin:12px 0}
.alert.error{border-left-color:#dc3545;background:#fde8ea}

/* Mobile behaviour */
@media (max-width: 900px){
  .menu-btn{display:block;margin-left:auto;font-size:20px;cursor:pointer;padding:6px 10px;border:1px solid #ddd;border-radius:8px;background:#fff}
  .nav-links{display:none;position:absolute;left:0;right:0;top:56px;background:#fff;border-bottom:1px solid #eee;padding:10px 16px;flex-direction:column;align-items:flex-start;gap:12px}
  .nav-links.open{display:flex}
  .user-mini{display:flex;align-items:center;gap:8px;margin-left:8px}
  .user-mini .avatar{width:15px;height:15px;border-radius:50%;object-fit:cover;border:1px solid #e5e7eb}
  .user-mini .avatar-fallback{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;color:#374151;font-size:10px;font-weight:700;border:1px solid #e5e7eb}
}