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

:root{
  --charcoal-deep: #14161a;
  --charcoal: #1c1f24;
  --charcoal-panel: #23262c;
  --charcoal-line: #33373f;
  --brass: #b08d57;
  --brass-light: #d9b878;
  --brass-dim: #7c6742;
  --text-main: #e8e6df;
  --text-dim: #8b8f98;
  --green: #5fae82;
  --red: #c1554d;
  --amber: #d9b878;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--charcoal-deep);
  color: var(--text-main);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}

/* login */
.login-body{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  background: radial-gradient(circle at 50% 40%, #1e2126 0%, #0f1114 75%);
}
.login-box{ width:340px; text-align:center; }
.dial{
  width:120px; height:120px; margin:0 auto 28px; border-radius:50%;
  border:2px solid var(--brass-dim); position:relative;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 6px rgba(176,141,87,0.06), inset 0 0 30px rgba(0,0,0,0.6);
}
.dial-notch{
  width:4px; height:14px; background: var(--brass-light);
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  border-radius:2px; box-shadow: 0 0 6px var(--brass-light);
}
.dial-center{ font-family:'Cormorant Garamond', serif; font-size:34px; color: var(--brass-light); font-weight:600; }
.brand{ font-family:'Cormorant Garamond', serif; font-size:30px; font-weight:700; letter-spacing:2px; }
.brand span{ color: var(--brass-light); }
.brand-sub{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color: var(--text-dim); margin-top:6px; }

.login-form{ margin-top:32px; text-align:left; }
.login-form label{
  display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--text-dim); margin-bottom:6px;
}
.login-form input{
  width:100%; background: var(--charcoal-panel); border:1px solid var(--charcoal-line);
  color: var(--text-main); padding:11px 14px; border-radius:4px; font-size:14px;
  margin-bottom:18px; outline:none;
}
.login-form input:focus{ border-color: var(--brass); }
.login-btn, .vault-btn{
  width:100%; padding:13px; border:none; border-radius:4px;
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
  color:#1a1a1a; font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer;
}
.login-btn:hover, .vault-btn:hover{ filter: brightness(1.08); }
.login-hint{ text-align:center; font-size:11px; color: var(--text-dim); margin-top:18px; }
.alert-error{
  background: rgba(193,85,77,0.12); color: var(--red); border:1px solid rgba(193,85,77,0.4);
  padding:10px 14px; border-radius:4px; font-size:13px; margin-bottom:16px;
}

/* dashboard */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 36px; border-bottom:1px solid var(--charcoal-line); background: var(--charcoal);
}
.topbar-right{ display:flex; align-items:center; gap:18px; }
.who{ font-size:12px; color: var(--text-dim); }
.logout-link{ font-size:12px; color: var(--brass-light); text-decoration:none; }
.logout-link:hover{ text-decoration:underline; }

.status-pill{
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; display:flex; align-items:center; gap:6px;
}
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; }
.status-locked{ color: var(--text-dim); border:1px solid var(--charcoal-line); }
.status-locked::before{ background: var(--text-dim); }
.status-pending{ color: var(--amber); border:1px solid rgba(217,184,120,0.4); }
.status-pending::before{ background: var(--amber); box-shadow:0 0 6px var(--amber); }
.status-unlocked{ color: var(--green); border:1px solid rgba(95,174,130,0.4); }
.status-unlocked::before{ background: var(--green); box-shadow:0 0 6px var(--green); }

.container{ padding:32px 36px 60px; max-width:1000px; margin:0 auto; }
.page-title{ font-family:'Cormorant Garamond', serif; font-size:28px; font-weight:600; margin-bottom:4px; }
.page-sub{ color: var(--text-dim); font-size:13px; margin-bottom:28px; }

.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom:28px; }
.kpi-card{
  background: var(--charcoal-panel); border:1px solid var(--charcoal-line);
  border-radius:8px; padding:18px 20px; position:relative;
}
.kpi-card::after{ content:""; position:absolute; top:0; left:0; width:3px; height:100%; background: var(--brass); }
.kpi-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-dim); margin-bottom:8px; }
.kpi-value{ font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:700; color: var(--brass-light); }

.panel{
  background: var(--charcoal-panel); border:1px solid var(--charcoal-line);
  border-radius:8px; padding:22px; margin-bottom:22px;
}
.panel-title{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); margin-bottom:16px; }
.vault-text{ font-size:14px; margin-bottom:16px; line-height:1.5; }
.vault-text.muted{ color: var(--text-dim); }
.vault-note{ font-size:13px; color: var(--text-dim); margin-top:10px; }

.approval-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-bottom:16px; }
.approval-card{
  border:1px solid var(--charcoal-line); border-radius:6px; padding:14px; text-align:center;
  background: rgba(255,255,255,0.02);
}
.approval-card.ok{ border-color: rgba(95,174,130,0.5); background: rgba(95,174,130,0.08); }
.approval-name{ font-size:13px; font-weight:600; margin-bottom:6px; }
.approval-status{ font-size:12px; color: var(--text-dim); }
.approval-card.ok .approval-status{ color: var(--green); }

.unlocked-banner{
  background: rgba(95,174,130,0.1); border:1px solid rgba(95,174,130,0.4);
  color: var(--green); padding:14px 16px; border-radius:6px; font-size:14px; margin-bottom:18px;
}

.vault-btn{ width:auto; padding:11px 22px; display:inline-block; }
.vault-btn-secondary{
  background:transparent; border:1px solid var(--charcoal-line); color: var(--text-dim);
  padding:9px 18px; border-radius:4px; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; margin-top:10px;
}
.vault-btn-secondary:hover{ border-color: var(--brass-dim); color: var(--brass-light); }
.reset-form{ margin-top:6px; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
tbody td{ padding:10px 8px; border-bottom:1px solid rgba(255,255,255,0.05); }
.mono{ font-family:'JetBrains Mono', monospace; color: var(--text-dim); font-size:12px; white-space:nowrap; }

@media (max-width: 720px){
  .kpi-grid{ grid-template-columns: repeat(2,1fr); }
  .approval-grid{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; gap:10px; align-items:flex-start; }
}