:root{
  /* Palette sampled from your logo/banner */
  --brand-orange: #E67232; /* warm/burnt orange */
  --brand-yellow: #F6D796; /* soft golden */
  --brand-sky:    #72A8E4; /* sky blue */
  --brand-ocean:  #2F6DD5; /* ocean blue */
  --brand-navy:   #10233E; /* deep navy */
  --ink:          #101418;
  --muted:        #60666D;
  --bg:           #0C1220;  /* page background tint */
  --panel:        #0F1A2C;  /* panel background */
  --panel-2:      #121F34;
  --success:      #1fb27b;
  --danger:       #e64c51;
  --radius:       16px;
  --shadow:       0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:#e9eef7; background:linear-gradient(180deg,#0c1426 0%, #0d1528 60%, #0f1930 100%);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}

/* Layout */
.wrap{max-width:1100px;margin-inline:auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(150%) blur(6px);background:rgba(12,20,38,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand-logo{height:36px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.brand-name{font-family:Fraunces,serif;font-weight:700;letter-spacing:.2px}
.top-links a{color:#cfe3ff;text-decoration:none;margin-left:18px;font-size:.95rem}
.top-links a:hover{color:#fff}

.site-main{min-height:calc(100dvh - 64px - 160px)}
.site-footer{border-top:1px solid rgba(255,255,255,.06);background:#0b1221}
.footer-inner{padding:28px 20px;color:#b9c6dc}
.footer-inner a{color:#d6e7ff}

/* Auth grid */
.auth-grid{display:grid;grid-template-columns: 1.2fr 1fr;min-height:calc(100dvh - 64px)}
.auth-visual{background:linear-gradient( to bottom right, rgba(231,114,50,.65), rgba(114,168,228,.65) ), url('/assets/img/banner.jpg') center/cover no-repeat;position:relative}
.visual-overlay{position:absolute;inset:0;background:radial-gradient(1200px 600px at -10% -10%, rgba(246,215,150,.65), transparent 60%), radial-gradient(1200px 600px at 110% 110%, rgba(47,109,213,.45), transparent 60%)}

.auth-panel{display:grid;place-items:center;background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%)}
.panel-inner{width:100%;max-width:420px;padding:42px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow)}

h1{margin:0 0 8px;font-family:Fraunces,serif;font-weight:700;letter-spacing:.2px}
.sub{margin:0 0 22px;color:#c1cee0}
.center{text-align:center}
.tiny{font-size:.85rem}
.muted{color:#9fb0c8}

.field{display:grid;gap:8px;margin:0 0 16px}
.field span{font-size:.95rem;color:#d8e4f7}
.field input{padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(5,10,20,.6);color:#fff;outline: none}
.field input:focus{border-color:var(--brand-sky);box-shadow:0 0 0 3px rgba(114,168,228,.25)}

.with-toggle{position:relative}
.with-toggle .toggle{position:absolute;right:8px;top:34px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#cfe3ff;cursor:pointer}
.with-toggle .toggle:hover{background:rgba(255,255,255,.06)}

.form-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.checkbox{display:flex;align-items:center;gap:10px;color:#d8e4f7}
.checkbox input{width:18px;height:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(180deg, var(--brand-orange), #d85c19); color:#1b0c02; border-color:#b44e17}
.btn-primary:hover{filter:saturate(110%) brightness(1.02)}
.btn-outline{color:#e7f1ff;background:transparent;border-color:rgba(255,255,255,.22)}
.btn-outline:hover{background:rgba(255,255,255,.06)}

.alert{padding:12px 14px;border-radius:12px;margin:0 0 14px}
.alert-error{background:rgba(230,76,81,.12);border:1px solid rgba(230,76,81,.25);color:#ffd6d8}

.divider{display:flex;align-items:center;gap:14px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent)}

/* Dashboard cards */
.dash h1{margin-top:28px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 48px}
.card{padding:18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#e3eeff}
.card:hover{background:rgba(255,255,255,.06)}
.card h3{margin:6px 0 8px;font-family:Fraunces,serif}
.card p{margin:0;color:#b8c8de}

/* Responsive */
@media (max-width: 1024px){
  .auth-grid{grid-template-columns:1fr}
  .auth-visual{display:none}
  .panel-inner{margin:32px 16px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .header-inner{min-height:56px}
  .brand-name{display:none}
  .cards{grid-template-columns:1fr}
}

/* Accessibility helpers */
:focus-visible{outline:2px solid var(--brand-sky);outline-offset:2px}

/* ============================ assets/js/main.js ============================ */
// Save as: assets/js/main.js
(function(){
  document.querySelectorAll('[data-toggle-password]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = btn.getAttribute('data-toggle-password');
      var input = document.getElementById(id);
      if (!input) return;
      var isPw = input.type === 'password';
      input.type = isPw ? 'text' : 'password';
      btn.textContent = isPw ? 'Hide' : 'Show';
    });
  });
})();