:root{--bg:#f6f8fb;--card:#fff;--accent:#1f6feb;--accent-2:#2563eb;--muted:#6b7280;--danger:#dc2626;--nav:#0b5ed7;--nav-dark:#084298;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto}

/* ===== GoTech unified top navigation ===== */
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--nav-dark),var(--nav));border-bottom:1px solid rgba(255,255,255,.12)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{color:#fff;font-weight:800;letter-spacing:.2px;text-decoration:none;font-size:18px;display:flex;align-items:center}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:#eaf2ff;text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:700;font-size:14px;user-select:none}
.nav-link:hover{background:rgba(255,255,255,.14)}
.nav-link.active{background:rgba(255,255,255,.20);color:#fff}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar-user .badge{background:rgba(255,255,255,.16);color:#fff}
.nav-danger{background:rgba(220,38,38,.16)}
.nav-danger:hover{background:rgba(220,38,38,.26)}

/* Dropdown-ready (uses <details>) */
.nav-dd{position:relative}
.nav-dd > summary{list-style:none}
.nav-dd > summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;top:42px;left:0;min-width:200px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.12);padding:8px;display:flex;flex-direction:column;gap:4px}
.dd-item{padding:10px 10px;border-radius:10px;color:#111827;text-decoration:none;font-weight:650;font-size:14px;white-space:nowrap}
.dd-item:hover{background:#f3f4f6}
.dd-item.active{background:#eef2ff;color:#1d4ed8}

@media (max-width: 720px){
  .topbar-user{width:100%;margin-left:0}
  .dd-menu{position:static;box-shadow:none;border-radius:12px;margin-top:8px}
}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border-radius:16px;box-shadow:0 6px 18px rgba(27,31,35,.08);padding:20px;margin-bottom:16px}
h1,h2{margin:0 0 12px}
label{display:block;font-weight:600;margin:8px 0 6px}
input,select,button,textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;font-size:14px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
button{background:var(--accent-2);color:#fff;border:none;cursor:pointer}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:600;font-size:12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
a.btn{display:inline-block;background:#e5e7eb;color:#111827;border-radius:8px;padding:10px 12px;text-decoration:none}
.tablewrap{max-height:60vh;overflow:auto;border:1px solid #e5e7eb;border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #f3f4f6;text-align:left;white-space:nowrap;font-size:14px;background:#fff}
thead th{position:sticky;top:0;background:#f3f4f6;z-index:1}
.notice{background:#eaf5ff;border:1px solid #b6daff;padding:8px;border-radius:8px;color:#054082;margin:10px 0}
.error{background:#fdecec;border:1px solid #f5c2c7;padding:8px;border-radius:8px;color:#7f1d1d;margin:10px 0}
small.muted{color:var(--muted)}
input[readonly]{background:#f9fafb}
hr{border:none;border-top:1px solid #e5e7eb;margin:16px 0}