:root{
  --od-green:#3f4a2b;
  --od-green-dark:#262e19;
  --bg-black:#15170f;
  --panel:#1d2116;
  --panel-light:#262b1c;
  --gold:#c7a352;
  --gold-bright:#e0bf6f;
  --off-white:#e9e6da;
  --muted:#9aa085;
  --alert:#9a3324;
  --ok:#5b7a3a;
  --line:#3a4029;
  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Roboto', Arial, sans-serif;
  --font-mono:'Roboto Mono', 'Courier New', monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--bg-black);
  color:var(--off-white);
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--bg-black);}

/* ===================== LOGIN SCREEN ===================== */
#login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(199,163,82,0.08), transparent 60%),
    var(--bg-black);
  padding:24px;
}
#login-screen::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(199,163,82,0.035) 0px, rgba(199,163,82,0.035) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(25deg, rgba(199,163,82,0.03) 0px, rgba(199,163,82,0.03) 1px, transparent 1px, transparent 140px);
  pointer-events:none;
}
.login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  padding:42px 36px 34px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.seal-wrap{
  width:96px;height:96px;
  margin:0 auto 18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a5530, var(--od-green-dark));
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(199,163,82,0.12), inset 0 0 14px rgba(0,0,0,0.5);
}
.seal-wrap svg{width:52px;height:52px;}
.sys-name{
  font-family:var(--font-display);
  letter-spacing:3px;
  font-size:12px;
  color:var(--gold);
  font-weight:600;
  margin-bottom:2px;
}
.sys-full{
  font-size:10px;
  color:var(--muted);
  letter-spacing:1px;
  margin-bottom:26px;
  text-transform:uppercase;
}
.welcome-line{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  letter-spacing:0.5px;
  color:var(--off-white);
  margin-bottom:2px;
}
.welcome-line span{color:var(--gold-bright);}
.rank-sub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:28px;
}
.field-label{
  text-align:left;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
#password{
  width:100%;
  padding:12px 14px;
  background:var(--bg-black);
  border:1px solid var(--line);
  color:var(--off-white);
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:8px;
  outline:none;
  transition:border-color .15s;
}
#password:focus{border-color:var(--gold);}
.field-hint{
  text-align:left;
  font-size:10.5px;
  color:var(--muted);
  margin-bottom:22px;
}
.signin-btn{
  width:100%;
  padding:13px;
  background:var(--od-green);
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:var(--font-display);
  letter-spacing:2px;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.signin-btn:hover{background:var(--gold);color:var(--bg-black);}
.login-footer{
  margin-top:22px;
  font-size:9.5px;
  color:var(--muted);
  letter-spacing:1px;
  line-height:1.6;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.error-msg{
  display:none;
  text-align:left;
  color:#e08a7a;
  font-size:11px;
  margin:-4px 0 14px;
  letter-spacing:0.5px;
}
.error-msg.show{display:block;}
.shake{animation:shake .35s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}

/* ===================== DASHBOARD ===================== */
#dashboard{display:none;min-height:100vh;}
#dashboard.active{display:flex;}

.sidebar{
  width:220px;
  background:var(--panel);
  border-right:1px solid var(--line);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  padding:20px 0;
}
.side-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 20px 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.side-brand .mini-seal{
  width:34px;height:34px;border-radius:50%;
  background:var(--od-green-dark);border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.side-brand .mini-seal svg{width:20px;height:20px;}
.side-brand-text{line-height:1.2;}
.side-brand-text .t1{font-family:var(--font-display);font-size:14px;color:var(--gold);letter-spacing:1px;}
.side-brand-text .t2{font-size:9px;color:var(--muted);letter-spacing:1px;}

.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--panel-light);color:var(--off-white);}
.nav-item.active{
  background:var(--panel-light);
  color:var(--gold-bright);
  border-left-color:var(--gold);
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-spacer{flex:1;}
.nav-item.logout{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;color:#c98874;}
.nav-item.logout:hover{color:#e08a7a;}

.main{
  flex:1;
  overflow-y:auto;
  background:
    radial-gradient(ellipse at top right, rgba(199,163,82,0.05), transparent 50%),
    var(--bg-black);
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(29,33,22,0.6);
}
.topbar h1{
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:1px;
  color:var(--off-white);
  font-weight:500;
}
.topbar .breadcrumb{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.status-pill{
  font-family:var(--font-mono);
  font-size:11px;
  background:rgba(91,122,58,0.18);
  color:#9fca7a;
  border:1px solid var(--ok);
  padding:5px 12px;
  letter-spacing:1px;
}

.content{padding:28px 32px 60px;}

/* ID CARD - signature element */
.id-card{
  display:flex;
  background:linear-gradient(120deg, #232919 0%, #1b1f14 100%);
  border:1px solid var(--line);
  border-left:5px solid var(--gold);
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
}
.id-card::after{
  content:"COMMON ACCESS";
  position:absolute;
  right:-38px;top:14px;
  transform:rotate(45deg);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:2px;
  color:rgba(199,163,82,0.35);
  width:160px;text-align:center;
}
.id-photo{
  width:120px;
  background:var(--od-green-dark);
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  flex-shrink:0;
}
.id-photo svg{width:64px;height:64px;color:var(--muted);}
.id-body{padding:20px 26px;flex:1;display:flex;flex-wrap:wrap;gap:26px;align-items:center;}
.id-name-block .rank{
  font-family:var(--font-mono);
  font-size:11px;color:var(--gold);letter-spacing:1px;
}
.id-name-block .name{
  font-family:var(--font-display);
  font-size:24px;color:var(--off-white);letter-spacing:0.5px;
}
.id-name-block .comp{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:0.5px;}
.id-meta{display:flex;gap:34px;flex-wrap:wrap;}
.id-meta .im{display:flex;flex-direction:column;gap:3px;}
.id-meta .im-label{font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;}
.id-meta .im-val{font-family:var(--font-mono);font-size:13.5px;color:var(--off-white);letter-spacing:0.5px;}
.id-chip{margin-left:auto;padding-right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.chip-icon{width:34px;height:26px;background:linear-gradient(135deg,#d9c07a,#a9863f);border-radius:3px;}
.barcode{display:flex;gap:1.5px;align-items:flex-end;height:20px;}
.barcode span{width:2px;background:var(--muted);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:20px 22px;
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.panel-head h2{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold-bright);
  font-weight:500;
}
.panel-head .tag{font-size:9px;color:var(--muted);font-family:var(--font-mono);}
.row{
  display:flex;justify-content:space-between;
  font-size:12.5px;
  padding:7px 0;
  border-bottom:1px dashed rgba(255,255,255,0.05);
}
.row:last-child{border-bottom:none;}
.row .k{color:var(--muted);}
.row .v{font-family:var(--font-mono);color:var(--off-white);text-align:right;}

.badge-list{display:flex;flex-wrap:wrap;gap:8px;}
.badge{
  font-size:10.5px;font-family:var(--font-mono);
  padding:5px 10px;
  background:var(--panel-light);
  border:1px solid var(--line);
  color:var(--off-white);
  letter-spacing:0.5px;
}
.badge.gold{border-color:var(--gold);color:var(--gold-bright);}

.readiness-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.readiness-item .k{font-size:12.5px;color:var(--off-white);}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;}
.dot.green{background:#7fae52;box-shadow:0 0 6px #7fae52;}
.dot.yellow{background:#d6b24a;box-shadow:0 0 6px #d6b24a;}
.dot.red{background:var(--alert);box-shadow:0 0 6px var(--alert);}
.readiness-status{font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;}

.task-item{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,0.05);}
.task-item:last-child{border-bottom:none;}
.task-dot{width:6px;height:6px;background:var(--gold);margin-top:6px;flex-shrink:0;}
.task-item .tt{font-size:12.5px;color:var(--off-white);}
.task-item .td{font-size:10px;color:var(--muted);margin-top:2px;font-family:var(--font-mono);}

.full-span{grid-column:1/-1;}

.alert-box{
  background:rgba(154,51,36,0.12);
  border:1px solid var(--alert);
  padding:12px 14px;
  margin-bottom:12px;
}
.alert-box .alert-title{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:#e0897a;
  letter-spacing:1px;
  margin-bottom:6px;
}
.alert-box .alert-body{
  font-size:12px;
  color:var(--off-white);
  line-height:1.5;
  margin-bottom:6px;
}
.alert-box .alert-link{
  font-size:11px;
  color:var(--gold-bright);
  text-decoration:none;
  font-family:var(--font-mono);
  cursor:pointer;
}
.alert-box .alert-link:hover{text-decoration:underline;}

.note-box{
  margin-top:14px;
  padding:10px 12px;
  background:var(--panel-light);
  border:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
}

.view{display:none;}
.view.active{display:block;animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:800px){
  .sidebar{position:fixed;left:-220px;top:0;bottom:0;z-index:20;transition:left .2s;}
  .sidebar.open{left:0;}
  .content{padding:20px 16px 60px;}
  .topbar{padding:14px 16px;}
  .id-body{padding:16px;}
  .menu-toggle{display:flex !important;}
}
.menu-toggle{
  display:none;
  width:34px;height:34px;
  align-items:center;justify-content:center;
  background:var(--panel-light);border:1px solid var(--line);
  color:var(--gold);cursor:pointer;font-size:16px;
}