@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel2: #ffffff;
  --card: #ffffff;
  --sidebar: #f1f5f9;
  --border: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #037b90;
  --primary2: #026475;
  --danger: #ef4444;
  --ok: #10b981;
  --warn: #f59e0b;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --radius: 8px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color:var(--text);
  background: var(--bg);
}

/* Auth Page */
.auth-container{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
}

.auth-card{
  width: min(1040px, 94vw);
  max-width: min(1040px, 94vw);
  background: #ffffff;
  border-radius: 12px;
  border-top: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.role-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.auth-hint{
  background: rgba(241, 245, 249, 0.5);
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
}

.auth-hint-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.auth-hint-title{
  font-size:0.85rem;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:800;
}

.role-tile.role-card{
  flex-direction: column;
  text-align: center;
  justify-content: center;
  min-height: 98px;
  gap: 10px;
}

.role-tile.role-card .role-ic{width:38px;height:38px}
.role-tile.role-card .role-title{font-size:0.9rem}
.role-tile.role-card .role-sub{font-size:0.74rem}

.role-tile{
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap: 12px;
  text-align:left;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.role-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
  border-color: rgba(3, 123, 144, 0.35);
}

.role-ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(3, 123, 144, 0.10);
  color: var(--primary);
  flex: 0 0 auto;
}

.role-title{font-weight:900;color: var(--text);line-height: 1.1}
.role-sub{margin-top:2px;font-size:0.8rem;color: var(--muted);font-weight:600;line-height: 1.2}

a{color:inherit;text-decoration:none}

.app-shell{display:grid;grid-template-columns: 260px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  padding: 1.5rem;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
}

.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background: rgba(3, 123, 144, 0.12);
  border:1px solid rgba(3, 123, 144, 0.25);
  font-weight:800;
  color: var(--primary);
}
.brand-title{font-weight:900;letter-spacing:0.2px}
.brand-sub{font-size:0.82rem;color:var(--muted)}

.nav{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.nav-divider{height:1px;background: var(--border);margin: 6px 0;opacity:0.8}
.nav-section-title{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.6px;font-weight:800;padding:6px 10px 0}
.nav-item{
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(51,65,85,1);
  font-weight: 500;
  display:flex;
  align-items:center;
  gap: 10px;
  transition: all 0.2s;
}
.nav-item:hover{background: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);color: var(--primary)}
.nav-item.active{background: var(--primary);color:#ffffff;font-weight:600;box-shadow: 0 4px 6px -1px rgba(3, 123, 144, 0.3)}

.role-card{
  margin-top:18px;
  padding:12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.role-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.role-label{font-size:0.78rem;color:var(--muted)}
.role-name{font-weight:900}
.role-meta{margin-top:8px;font-size:0.85rem;color:var(--muted)}

.user-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#ffffff;font-size:0.85rem;font-weight:700;color:var(--text)}
.user-chip .dot{width:8px;height:8px;border-radius:999px;background: var(--ok)}

.content{padding:20px 26px 28px;max-width: 1200px;margin: 0 auto}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.page-head h1{margin:6px 0 6px;font-size:1.9rem}
.kicker{font-size:0.8rem;color:rgba(148,163,184,0.9);text-transform:uppercase;letter-spacing:2px}
.muted{color:var(--muted)}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}

.profile-wrap{position:relative;display:flex;align-items:center}
.profile-btn{appearance:none;border:1px solid var(--border);background:#ffffff;border-radius:999px;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow: 0 1px 2px rgba(0,0,0,0.04);transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;}
.profile-btn:hover{transform: translateY(-1px);box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);border-color: rgba(3, 123, 144, 0.35)}
.profile-btn .name{font-weight:900;font-size:0.9rem;color: var(--text);line-height:1.1}
.profile-btn .sub{font-weight:700;font-size:0.78rem;color: var(--muted);line-height:1.1}
.profile-btn .chev{font-size:0.75rem;color: var(--muted)}

.profile-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(320px, 80vw);background:#ffffff;border:1px solid var(--border);border-radius: 12px;box-shadow: var(--shadow-lg);padding:8px;display:none;z-index:9999}
.profile-menu.open{display:block}
.profile-menu .menu-item{width:100%;text-align:left;display:flex;gap:10px;align-items:center;padding:10px 10px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:800;color: var(--text)}
.profile-menu .menu-item:hover{background:#f1f5f9;border-color:#e2e8f0}
.profile-menu .menu-meta{padding:10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;margin-bottom:8px}
.profile-menu .menu-meta .t{font-weight:900}
.profile-menu .menu-meta .m{margin-top:2px;color: var(--muted);font-size:0.85rem;font-weight:700}

.panel{
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.panel + .panel{margin-top:14px}

.card-title-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.icon-chip{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background: rgba(3, 123, 144, 0.10);border: 1px solid rgba(3, 123, 144, 0.25);color: var(--primary);font-weight:900;font-size:0.78rem;letter-spacing:0.6px;flex: 0 0 auto}

.grid{display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:14px}
@media (max-width: 980px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid{grid-template-columns:1fr}}

.card{
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 0.2s, border-color 0.2s;
}
.card:hover{border-color: rgba(3, 123, 144, 0.35);transform: translateY(-2px)}
.card-title{font-weight:900;margin-bottom:6px}
.card-desc{color:var(--muted);font-size:0.92rem;line-height:1.45}
.card-actions{margin-top:12px}

.stats{display:grid;grid-template-columns: repeat(4, minmax(0,1fr));gap:12px}
@media (max-width: 980px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{
  padding:12px;
  border-radius:14px;
  background: rgba(2,132,199,0.04);
  border:1px solid rgba(15,23,42,0.10);
}
.stat .label{font-size:0.78rem;color:rgba(148,163,184,0.9);text-transform:uppercase;letter-spacing:1.6px}
.stat .value{font-size:1.25rem;font-weight:900;margin-top:6px}

.two-col{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
@media (max-width: 980px){.two-col{grid-template-columns:1fr}}
.mini-title{font-weight:800;margin-bottom:6px}

.btn{
  cursor:pointer;
  border:none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn:hover{background: var(--primary2);transform: translateY(-1px)}
.btn:disabled{opacity:0.55;cursor:not-allowed}
.btn-primary{background: var(--primary);color:#ffffff;box-shadow: 0 4px 6px -1px rgba(3, 123, 144, 0.3)}
.btn-primary:hover{background: var(--primary2)}
.btn-outline{background: #ffffff;color: var(--text);border: 1px solid var(--border)}
.btn-outline:hover{background: #f1f5f9;border-color: #94a3b8;transform: translateY(-1px)}
.btn-danger{background: var(--danger);color:#ffffff}
.btn-sm{padding:8px 10px;border-radius:10px;font-size:0.85rem}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid rgba(15,23,42,0.10);border-radius: 12px;overflow:hidden;background:#ffffff}
.table thead th{background:#f8fafc}
.table th,.table td{padding:12px 12px;border-bottom:1px solid rgba(15,23,42,0.08);text-align:left;font-size:0.92rem}
.table tbody tr:last-child td{border-bottom:none}
.table th{font-size:0.78rem;color:rgba(100,116,139,0.95);text-transform:uppercase;letter-spacing:1.2px;font-weight:800}
.table tbody tr:hover td{background: rgba(3, 123, 144, 0.05)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:0.78rem;font-weight:800;border:1px solid rgba(148,163,184,0.22);background: rgba(255,255,255,0.06)}
.badge.ok{border-color: rgba(22,163,74,0.35);background: rgba(22,163,74,0.12)}
.badge.warn{border-color: rgba(245,158,11,0.35);background: rgba(245,158,11,0.12)}
.badge.danger{border-color: rgba(225,29,72,0.35);background: rgba(225,29,72,0.12)}

 .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(148,163,184,0.30);background:#ffffff;font-size:0.9rem;font-weight:800;color:var(--text)}
 .chip .k{font-size:0.78rem;color:rgba(148,163,184,0.95);font-weight:900;text-transform:uppercase;letter-spacing:1.1px}
 .chip .v{font-weight:900}
 .chip.muted{background: rgba(241,245,249,0.65)}
 .chip .dot{width:8px;height:8px;border-radius:999px;background: var(--ok)}
 .chip .dot.warn{background: var(--warn)}
 .chip .dot.danger{background: var(--danger)}

 .result-banner{border-radius:16px;border:1px solid rgba(148,163,184,0.22);padding:12px 12px;background: rgba(255,255,255,0.92)}
 .result-banner .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
 .result-banner .title{font-weight:900}
 .result-banner .desc{margin-top:6px;color:var(--muted);font-weight:700;font-size:0.9rem;line-height:1.35}
 .result-banner.ok{border-color: rgba(22,163,74,0.35);background: rgba(22,163,74,0.10)}
 .result-banner.warn{border-color: rgba(245,158,11,0.35);background: rgba(245,158,11,0.10)}
 .result-banner.danger{border-color: rgba(225,29,72,0.35);background: rgba(225,29,72,0.08)}
 .result-banner .rows{margin-top:10px;display:grid;grid-template-columns: 1fr 1fr;gap:10px}
 @media (max-width: 980px){.result-banner .rows{grid-template-columns:1fr}}
 .result-banner .row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background: rgba(255,255,255,0.55)}
 .result-banner .row .l{font-size:0.78rem;color:rgba(148,163,184,0.95);font-weight:900;text-transform:uppercase;letter-spacing:1.2px}
 .result-banner .row .r{font-weight:900;text-align:right}

 .filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:12px}
 .filter-row .field{margin:0;min-width: 180px}
 .filter-row .field label{margin-bottom:4px}

 details.collapse{border:1px solid rgba(148,163,184,0.22);border-radius:16px;background: rgba(255,255,255,0.85);padding:10px 12px;margin-top:10px}
 details.collapse > summary{cursor:pointer;font-weight:900;list-style:none}
 details.collapse > summary::-webkit-details-marker{display:none}
 details.collapse .body{margin-top:10px}

.field{margin:10px 0}
.field label{display:block;margin-bottom:6px;font-size:0.82rem;color:rgba(148,163,184,0.95);font-weight:800}
.input, select.input, textarea.input{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.98);
  color: var(--text);
  outline:none;
}
textarea.input{min-height:110px;resize:vertical}
.input:focus{border-color: rgba(56,189,248,0.55);box-shadow: 0 0 0 4px rgba(56,189,248,0.12)}

.modal-overlay{position:fixed;inset:0;background: rgba(15, 23, 42, 0.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999}
.modal{width:min(720px,96vw);background: rgba(255, 255, 255, 0.95);border:1px solid #e2e8f0;border-radius: 16px;box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid #e2e8f0;background: rgba(241, 245, 249, 0.75)}
.modal-title{font-weight:900}
.modal-body{padding:14px 16px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 16px 16px}
.icon-btn{border:none;background:transparent;color:rgba(15,23,42,0.70);font-weight:900;cursor:pointer}

.toast-wrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:100000}
.toast{padding:12px 12px;border-radius: 12px;border:1px solid var(--border);background: #ffffff;box-shadow: var(--shadow-lg);min-width: 260px}
.toast .t{font-weight:900;margin-bottom:2px}
.toast .m{color:rgba(15,23,42,0.70);font-size:0.9rem}
.toast.ok{border-color: rgba(52,211,153,0.30)}
.toast.err{border-color: rgba(251,113,133,0.30)}
.toast.warn{border-color: rgba(251,191,36,0.30)}

.footer{margin-top:18px;color:rgba(148,163,184,0.7);font-size:0.85rem}

.paper{
  background: #ffffff;
  color: #0b1220;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(15,23,42,0.12);
}
.paper .seal{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.paper .seal .u{font-weight:900;letter-spacing:0.8px}
.paper .seal .b{font-size:0.82rem;color: rgba(15,23,42,0.65)}
.paper h2{margin:8px 0 8px;font-size:1.15rem}
.paper .inst{font-size:0.88rem;color: rgba(15,23,42,0.72);margin-bottom:10px}

.choice{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;border:1px solid rgba(15,23,42,0.12);margin:8px 0}
.choice:hover{background: rgba(2,132,199,0.06)}
.choice img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid rgba(15,23,42,0.12)}
.choice .nm{font-weight:900}
.choice .mt{font-size:0.85rem;color: rgba(15,23,42,0.65)}

.split-row{display:grid;grid-template-columns: 1.1fr 0.9fr;gap:14px}
@media (max-width: 980px){.split-row{grid-template-columns:1fr}}

.codebox{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:0.85rem; color: rgba(15,23,42,0.86); background: rgba(15,23,42,0.04); border:1px solid rgba(15,23,42,0.10); padding:12px; border-radius:14px; overflow:auto; max-height: 320px}