:root{
  --pine-950:#0b1f16;
  --pine-900:#0f2a1e;
  --pine-800:#123b28;
  --pine-700:#16523a;
  --emerald-600:#1c9c6b;
  --emerald-700:#158055;
  --emerald-500:#2bb17e;
  --mint-100:#e8f4ee;
  --mint-200:#d1e9dd;
  --sand-50:#f6f4ec;
  --sand-100:#efece0;
  --amber-500:#c6912f;
  --amber-600:#a97522;
  --amber-100:#f6e9cf;
  --ink-900:#182420;
  --ink-600:#5c6a62;
  --line:#e3dfd1;
  --white:#ffffff;
  --danger:#c0483f;

  --shadow-sm:0 2px 10px rgba(11,31,22,.06);
  --shadow-md:0 14px 32px rgba(11,31,22,.10);
  --shadow-lg:0 28px 56px rgba(11,31,22,.18);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:30px;
  --r-full:999px;

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',sans-serif;

  --primary:var(--emerald-600);
  --primary-dark:var(--emerald-700);
  --bg:var(--sand-50);
  --card:var(--white);
  --text:var(--ink-900);
  --muted:var(--ink-600);
  --border:var(--line);
  --shadow:var(--shadow-md);
  --radius:var(--r-lg);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
}

::selection{background:var(--mint-200);color:var(--pine-900)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--emerald-600);border-radius:var(--r-full)}
::-webkit-scrollbar-track{background:transparent}

:focus-visible{
  outline:2.5px solid var(--emerald-600);
  outline-offset:2px;
  border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

.hidden{display:none}

#loadingScreen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:22px;
  background:var(--sand-50);
  z-index:9999;
}

#loadingScreen p{
  color:var(--ink-600);
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
}

.loader{
  width:52px;
  height:52px;
  border-radius:50%;
  border:4px solid var(--mint-200);
  border-top-color:var(--emerald-600);
  animation:spin .9s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.topo::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.14) 0 1px, transparent 1px 30px),
    repeating-radial-gradient(circle at 88% 82%, rgba(255,255,255,.10) 0 1px, transparent 1px 38px);
}

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
  position:relative;
  background:
    linear-gradient(160deg, rgba(11,31,22,.94), rgba(18,59,40,.88) 55%, rgba(28,156,107,.55)),
    url("../assets/bg_lab.png") center / cover no-repeat fixed;
}

.auth-shell{
  width:100%;
  max-width:380px;
  position:relative;
  z-index:1;
}

.auth-card{
  background:var(--sand-50);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:riseIn .5s ease;
}

@keyframes riseIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

.auth-brand{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--pine-800),var(--pine-950));
  padding:34px 30px 28px;
  text-align:center;
}

.auth-brand img{
  width:64px;
  height:64px;
  object-fit:contain;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.auth-brand h1{
  color:var(--white);
  font-size:21px;
  position:relative;
  z-index:1;
}

.auth-brand span{
  display:block;
  color:var(--mint-200);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:6px;
  position:relative;
  z-index:1;
}

.auth-body{
  padding:30px 28px 32px;
}

.field{
  margin-bottom:16px;
}

.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--pine-700);
  margin-bottom:7px;
  letter-spacing:.02em;
}

input.field-input,
.auth-body input[type="text"],
.auth-body input[type="password"]{
  width:100%;
  padding:13px 16px;
  border-radius:var(--r-md);
  border:1.5px solid var(--line);
  background:var(--white);
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-900);
  outline:none;
  transition:.2s;
}

.auth-body input::placeholder{color:#a3ab9f}

.auth-body input:focus{
  border-color:var(--emerald-600);
  box-shadow:0 0 0 3px rgba(28,156,107,.15);
}

.btn-primary{
  width:100%;
  padding:13px 16px;
  border:none;
  border-radius:var(--r-md);
  background:var(--emerald-600);
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 10px 22px rgba(28,156,107,.28);
}

.btn-primary:hover{background:var(--emerald-700);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none}

.auth-help{
  margin-top:18px;
  text-align:center;
  font-size:13px;
  color:var(--ink-600);
}

.auth-help a{
  color:var(--emerald-700);
  font-weight:700;
  text-decoration:none;
}

.auth-help a:hover{text-decoration:underline}

.auth-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,20,16,.85);
  backdrop-filter:blur(6px);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  z-index:999;
}

.state-icon{
  width:68px;
  height:68px;
  border-radius:50%;
  border:3px solid;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
}

.state-icon.success{border-color:var(--emerald-500);color:var(--emerald-500)}
.state-icon.error{border-color:#e08078;color:#e08078}

.auth-overlay .msg{
  color:#f2efe6;
  font-size:14.5px;
  letter-spacing:.01em;
}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.popup-bg{
  position:fixed;
  inset:0;
  background:rgba(11,20,16,.55);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:999;
}

.popup{
  width:100%;
  max-width:340px;
  background:var(--white);
  border-radius:var(--r-xl);
  padding:30px 26px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  animation:riseIn .3s ease;
}

.popup-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  color:var(--pine-800);
  margin-bottom:14px;
}

.popup-id{
  font-size:24px;
  font-weight:800;
  color:var(--emerald-700);
  margin-bottom:14px;
  word-break:break-word;
}

.popup-msg{
  font-size:13.5px;
  color:var(--ink-600);
  line-height:1.55;
  margin-bottom:22px;
}

.topbar{
  min-height:76px;
  background:linear-gradient(120deg,var(--pine-950),var(--pine-800));
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 28px;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:var(--shadow-md);
}

.brand{display:flex;align-items:center;gap:13px}

.brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brand-title{display:flex;flex-direction:column}

.brand-title h2{
  margin:0;
  color:#fff;
  font-size:19px;
  line-height:1.15;
}

.brand-title span{
  font-size:11.5px;
  color:var(--mint-200);
  letter-spacing:.02em;
}

.top-action{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

button{
  font-family:var(--font-body);
  border:none;
  cursor:pointer;
  border-radius:var(--r-md);
  padding:11px 17px;
  background:var(--emerald-600);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  transition:.2s;
  position:relative;
  overflow:hidden;
}

button:hover{background:var(--emerald-700);transform:translateY(-1px)}

.cloud-btn{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf6ef;
}

.cloud-btn:hover{background:rgba(255,255,255,.18)}

#changeIdBtn{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf6ef;
}

#changeIdBtn:hover{background:rgba(255,255,255,.18)}

#logoutBtn{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#f3ece2;
}

#logoutBtn:hover{background:rgba(224,128,120,.18);border-color:#e08078}

.avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--emerald-500),var(--pine-700));
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}

.avatar.large{
  width:96px;
  height:96px;
  margin:0 auto 16px;
  font-size:30px;
}

.user-box{
  display:flex;
  align-items:center;
  gap:11px;
  padding:6px 12px 6px 6px;
  border-radius:var(--r-full);
  cursor:pointer;
  background:rgba(255,255,255,.08);
  transition:.2s;
}

.user-box:hover{background:rgba(255,255,255,.16)}

.user-info{display:flex;flex-direction:column}

.user-info strong{font-size:13.5px;color:#fff}

.user-info small{font-size:11.5px;color:var(--mint-200)}

.layout{
  display:block;
  grid-template-columns:1fr;
  gap:26px;
  padding:22px 20px 60px;
  max-width:1180px;
  margin:0 auto;
}

.sidebar{position:static}

.profile-card{
  display:none;
  background:var(--card);
  border-radius:var(--r-lg);
  padding:28px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}

.profile-card h3{font-size:17px;color:var(--pine-800);margin-bottom:4px}

.profile-card p{color:var(--ink-600);font-size:13px;margin-bottom:6px}

.profile-divider{width:100%;height:1px;background:var(--line);margin:18px 0}

.profile-item{margin-top:13px;text-align:left}

.profile-item label{display:block;font-size:11px;color:var(--ink-600);margin-bottom:5px;letter-spacing:.03em;text-transform:uppercase}

.profile-item span{font-weight:700;color:var(--ink-900);font-size:14px}

.content{display:flex;flex-direction:column;gap:26px}

.welcome-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--pine-800),var(--emerald-700) 130%);
  color:#fff;
  padding:34px 32px;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}

.badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  padding:7px 15px;
  border-radius:var(--r-full);
  margin-bottom:16px;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:700;
  position:relative;
  z-index:1;
}

.welcome-card h1{
  font-size:30px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

.welcome-card p{
  opacity:.92;
  line-height:1.6;
  font-size:14.5px;
  max-width:520px;
  position:relative;
  z-index:1;
}

.menu-wrapper{display:flex;flex-direction:column;gap:18px}

.section-title{display:flex;justify-content:space-between;align-items:flex-end}

.section-title h2{
  color:var(--pine-800);
  font-size:22px;
  margin-bottom:4px;
}

.section-title p{color:var(--ink-600);font-size:13.5px}

.menu-grid,.menu-loading{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}

.menu-card{
  position:relative;
  overflow:hidden;
  background:var(--card);
  border-radius:var(--r-lg);
  padding:22px 22px 20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:.25s;
}

.menu-card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:4px;height:100%;
  background:linear-gradient(var(--emerald-600),var(--amber-500));
  transform:scaleY(0);
  transform-origin:top;
  transition:.3s;
}

.menu-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--mint-200);
}

.menu-card:hover::before{transform:scaleY(1)}

.menu-card h3{
  color:var(--pine-800);
  font-size:15.5px;
  font-weight:600;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.submenu-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:224px;
  overflow-y:auto;
  padding-right:5px;
}

.submenu-list::-webkit-scrollbar{width:5px}
.submenu-list::-webkit-scrollbar-track{background:transparent}
.submenu-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
.submenu-list::-webkit-scrollbar-thumb:hover{background:var(--emerald-600)}

.submenu-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--sand-50);
  color:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 14px;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  transition:.2s;
}

.submenu-item:hover{
  background:var(--emerald-600);
  color:#fff;
  border-color:var(--emerald-600);
  transform:translateX(3px);
}

.submenu-item small{font-size:15px;opacity:.75}

.card-skeleton{
  height:150px;
  border-radius:var(--r-lg);
  background:linear-gradient(90deg,#ece9dd,#f7f5ec,#ece9dd);
  background-size:200%;
  animation:loadingSkeleton 1.2s infinite;
}

@keyframes loadingSkeleton{
  from{background-position:200%}
  to{background-position:-200%}
}

.empty-state{
  grid-column:1/-1;
  width:100%;
  padding:56px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--ink-600);
}

.empty-icon{font-size:44px;margin-bottom:16px;opacity:.55}

[data-access-level]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:5px 13px;
  border-radius:var(--r-full);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.1em;
}

[data-access-level].access-sss{
  color:var(--amber-600);
  background:linear-gradient(135deg,var(--amber-100),#f0cd82);
}

[data-access-level].access-ss{
  color:var(--emerald-700);
  background:linear-gradient(135deg,var(--mint-100),var(--mint-200));
}

[data-access-level].access-s{
  color:var(--pine-700);
  background:var(--sand-100);
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,20,16,.5);
  justify-content:center;
  align-items:center;
  z-index:50;
  backdrop-filter:blur(5px);
  padding:20px;
}

.modal-content{
  width:min(420px,100%);
  background:var(--card);
  padding:30px 28px;
  border-radius:var(--r-xl);
  animation:riseIn .25s ease;
}

.modal-content h2{color:var(--pine-800);font-size:20px;margin-bottom:8px}

.modal-desc{color:var(--ink-600);font-size:13.5px;margin-bottom:22px}

.modal-content label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--pine-700);
  margin-bottom:6px;
}

.modal-content input{
  width:100%;
  padding:12px 14px;
  margin:0 0 16px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
  transition:.2s;
}

.modal-content input:focus{
  border-color:var(--emerald-600);
  box-shadow:0 0 0 3px rgba(28,156,107,.15);
}

.modal-content input[readonly]{
  background:var(--sand-50);
  color:var(--ink-600);
}

.modal-action{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

.modal-action button[type="button"]{
  background:transparent;
  color:var(--ink-600);
  border:1.5px solid var(--line);
}

.modal-action button[type="button"]:hover{
  background:var(--sand-50);
  transform:none;
}

.profile-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,20,16,.45);
  backdrop-filter:blur(8px);
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:20px;
}

.profile-modal-content{
  width:100%;
  max-width:330px;
  background:var(--card);
  padding:30px 26px 26px;
  border-radius:var(--r-xl);
  text-align:center;
  box-shadow:var(--shadow-lg);
  animation:riseIn .25s ease;
}

.profile-modal-content h3{color:var(--pine-800);font-size:19px;margin-bottom:4px}

.profile-modal-content p{color:var(--ink-600);font-size:13px;margin-bottom:4px}

.profile-modal-content #modalChangeId{
  width:100%;
  margin-top:20px;
}

#toast{
  position:fixed;
  right:20px;
  bottom:20px;
  left:20px;
  max-width:360px;
  margin-left:auto;
  padding:14px 18px;
  border-radius:var(--r-md);
  color:#fff;
  background:var(--pine-800);
  box-shadow:var(--shadow-lg);
  display:none;
  z-index:9999;
  font-size:13.5px;
  font-weight:500;
}

#toast.error{background:var(--danger)}
#toast.success{background:var(--emerald-600)}

.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:rippleAnim .5s linear;
  background:rgba(255,255,255,.35);
  pointer-events:none;
}

@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

@media(min-width:960px){
  .layout{grid-template-columns:280px 1fr;align-items:start}
  .sidebar{position:sticky;top:100px}
  .profile-card{display:block}
}

@media(max-width:640px){
  .topbar{padding:14px 16px}
  .brand img{width:36px;height:36px}
  .brand-title h2{font-size:16.5px}
  .top-action{gap:8px}
  .top-action button{padding:10px 13px;font-size:12.5px}
  .layout{padding:18px 14px 50px}
  .welcome-card{padding:26px 22px}
  .welcome-card h1{font-size:24px}
  .menu-grid,.menu-loading{grid-template-columns:1fr}
}

@media(max-width:420px){
  .user-info{display:none}
  .top-action button span{display:none}
  .top-action button{padding:10px}
}