/* ============================================================
   ENIGMA — application shell CSS (auth pages, diagnostics, vault lock
   screen). This is the HOST-APP-STYLE layer: everything the user sees
   BEFORE and AROUND the preserved ENIGMA tool, which restyles itself via
   assets/css/enigma-theme.css layered on assets/build/enigma.css instead.
   Palette deliberately mirrors this project's sibling application so the
   two feel like one family of tools, without sharing any code.
   ============================================================ */

:root{
  --en-green-900: #0B160F;
  --en-green-800: #0E2A1C;
  --en-green-700: #123422;
  --en-green-600: #176B3A;
  --en-green-500: #1B7A42;
  --en-green-400: #1F8A4C;
  --en-green-300: #2E9E5B;
  --en-green-200: #4CAF50;
  --en-mint:      #EAFBF0;
  --en-mint-2:    #BFE3CC;

  --en-ink:       #12261B;
  --en-dim:       #4A6153;
  --en-faint:     #7C978A;
  --en-line:      #DCE7DF;
  --en-line-2:    #C3D6C9;
  --en-panel:     #FFFFFF;
  --en-panel-2:   #F3F8F4;
  --en-bg:        #F5F8F6;

  --en-amber:     #B7791F;
  --en-red:       #C62828;
  --en-blue:      #1B6CA8;

  --en-topbar-h:  58px;
  --en-sidebar-w: 246px;
  --en-mono: 'Consolas', 'Courier New', Courier, monospace;
  --en-sans: 'Times New Roman', Times, Georgia, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--en-sans);
  background:var(--en-bg);
  color:var(--en-ink);
  font-size:14.5px;
}
a{color:var(--en-green-600);text-decoration:none}
a:hover{color:var(--en-green-500)}
.mono{font-family:var(--en-mono)}
.en-dim{color:var(--en-dim)}
.en-faint{color:var(--en-faint)}

/* ---- layout helpers (a tiny subset of Bootstrap-alike utilities, so
   pages below don't need a whole framework for a handful of flex rows) ---- */
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}
.justify-content-center{justify-content:center}
.gap-2{gap:8px}
.gap-3{gap:14px}
.mt-3{margin-top:14px}
.mt-4{margin-top:20px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:14px}
.mb-4{margin-bottom:20px}
.py-2{padding-top:9px;padding-bottom:9px}
.py-5{padding-top:48px;padding-bottom:48px}
.w-100{width:100%}
.text-center{text-align:center}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:8px;padding:10px 16px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.btn-enigma{background:var(--en-green-600);border-color:var(--en-green-600);color:#fff}
.btn-enigma:hover{background:var(--en-green-500);border-color:var(--en-green-500);color:#fff}
.btn-enigma:disabled{opacity:.6;cursor:progress}
.btn-outline-enigma{border-color:var(--en-line-2);color:var(--en-green-600);background:#fff}
.btn-outline-enigma:hover{background:var(--en-green-600);border-color:var(--en-green-600);color:#fff}

/* ---- form controls ---- */
.form-label{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--en-faint);margin-bottom:5px;font-family:var(--en-mono);
}
.form-control{
  width:100%;border:1px solid var(--en-line-2);border-radius:8px;
  padding:10px 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--en-ink);
}
.form-control:focus{
  outline:none;border-color:var(--en-green-400);
  box-shadow:0 0 0 .2rem rgba(31,138,76,.16);
}
.input-group{position:relative;display:flex}
.input-group .form-control{border-radius:8px}
.toggle-pw{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--en-faint);cursor:pointer;padding:6px 8px;
}
.en-pw-meter{height:5px;border-radius:3px;background:var(--en-line);overflow:hidden;margin-top:6px}
.en-pw-meter span{display:block;height:100%;width:0;background:var(--en-red);transition:width .2s,background .2s}

/* ---- alerts ---- */
.alert{border-radius:8px;padding:10px 13px;font-size:13.5px;line-height:1.55}
.alert-danger{background:#FDECEC;border:1px solid #F3C6C6;color:#8A1F1F}
.alert-warning{background:#FBF3E2;border:1px solid #EAD9AE;color:#6B4E0E}
.alert-info{background:var(--en-mint);border:1px solid var(--en-mint-2);color:#0E3A28}

/* ---- auth pages (login / register / lock screen / 403) ---- */
.en-auth{background:var(--en-bg)}
.en-auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.en-auth-card{
  width:100%;max-width:920px;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(18,38,27,.16);
  display:grid;grid-template-columns:1fr 1fr;
}
@media (max-width:820px){ .en-auth-card{grid-template-columns:1fr} }

.en-auth-side{
  background:linear-gradient(165deg,var(--en-green-900),var(--en-green-700));
  color:#fff;padding:40px 36px;display:flex;flex-direction:column;
}
.en-auth-side h2{font-size:22px;margin:22px 0 10px}
.en-auth-side p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.82)}
.en-auth-feature{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:12.5px;line-height:1.6}
.en-auth-feature .dot{
  width:7px;height:7px;border-radius:50%;background:var(--en-green-300);
  margin-top:6px;flex:0 0 auto;
}
.en-logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:var(--en-green-400);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;
}
.en-auth-body{padding:40px 36px}
.en-auth-body h1{font-size:24px;margin:0 0 6px}
.en-divider{
  display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--en-faint);font-size:12px;
}
.en-divider::before,.en-divider::after{content:'';flex:1;height:1px;background:var(--en-line)}
.en-denied-icon{font-size:40px}

/* ---- diagnostics ---- */
.en-diag-card{
  background:#fff;border:1px solid var(--en-line);border-radius:10px;margin-bottom:16px;
  box-shadow:0 1px 3px rgba(18,38,27,.06);
}
.en-diag-head{
  padding:13px 16px;border-bottom:1px solid var(--en-line);font-size:11.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--en-dim);font-family:var(--en-mono);
}
.en-diag-body{padding:16px}
.en-diag-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--en-panel-2);font-size:13.5px;
}
.en-diag-row:last-child{border-bottom:none}
.en-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-family:var(--en-mono);
}
.en-pill.ok{background:var(--en-mint);color:#0E3A28}
.en-pill.bad{background:#FDECEC;color:#8A1F1F}
.en-pill.warn{background:#FBF3E2;color:#6B4E0E}
.en-topbar-mini{
  display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--en-green-900);color:#fff;
}
.en-topbar-mini a{color:var(--en-mint-2)}
.en-container{max-width:880px;margin:0 auto;padding:28px 20px 60px}

/* ---- vault lock / create screen ---- */
.en-lock-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--en-bg);padding:24px;
}
.en-lock-card{
  width:100%;max-width:440px;background:#fff;border-radius:16px;padding:36px 34px;
  box-shadow:0 24px 64px rgba(18,38,27,.16);
}
.en-lock-icon{
  width:54px;height:54px;border-radius:14px;background:var(--en-green-400);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:16px;
}
.en-lock-note{
  background:var(--en-panel-2);border:1px solid var(--en-line);border-radius:8px;
  padding:11px 13px;font-size:12px;line-height:1.6;color:var(--en-dim);margin-top:16px;
}