:root{
  --bg:#0b1020; --card:#0f162e; --soft:#121a36; --text:#e7ecf5; --muted:#a7b0c3;
  --brand:#14b36b; --brand-2:#1a73e8;
  --brand-grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px; --radius-lg:22px; --max:1200px;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(1200px 600px at 10% -10%,#16336133 0%,transparent 60%),
    radial-gradient(1000px 500px at 110% 10%,#0a5c3d33 0%,transparent 60%),
    var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.main{padding:28px 0 0}

/* Buttons */
.btn{appearance:none; border:none; padding:12px 18px; border-radius:12px; font-weight:700; cursor:pointer}
.btn-primary{background:var(--brand-grad); color:white; box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12)}
.btn-sm{padding:6px 10px; font-size:14px}

/* Cards */
.card{background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); box-shadow:var(--shadow)}
.pad{padding:22px}
.muted{color:var(--muted)}

/* Nav */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,16,32,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:36px; height:36px; border-radius:10px}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{color:var(--muted); font-weight:600}
.nav-links a:hover{color:var(--text)}

/* Page header */
.page-head{padding:12px 0 18px}
.page-title{font-size:clamp(26px,4vw,36px); margin:0 0 8px}
.page-sub{margin:0; color:var(--muted)}

/* Forms / tables */
label{display:block; font-weight:600; margin:14px 0 6px}
input[type=text], input[type=email], select, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:#0d1328; color:var(--text)
}
textarea{min-height:120px}
.grid{display:grid; gap:16px}
.grid-1{grid-template-columns:1fr}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06)}
th{color:#cfd6e6; font-weight:700; background:rgba(255,255,255,.03)}
tr:hover td{background:rgba(255,255,255,.02)}

/* Footer */
.footer{margin:32px auto 60px; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; color:var(--muted)}
.footer img{width:22px; height:22px; border-radius:6px}
.footer-links{display:flex; gap:16px}

/* Responsive */
@media (max-width: 960px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}


/* Auth layout */
.auth-wrap { max-width: 520px; margin: 0 auto; }
.auth-card { padding: 28px; border-radius: 18px; background: var(--layer-2); box-shadow: var(--shadow-2); }
.card-title { font-size: 1.5rem; font-weight: 700; color: var(--text-strong); margin: 0 0 4px; }
.card-sub { color: var(--text-muted); margin: 0 0 20px; }

.form .field { margin-bottom: 14px; }
.label { display: block; font-size: .9rem; color: var(--text-dim); margin: 0 0 6px; }
.input-wrap { position: relative; }
.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--layer-1);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
  transition: 160ms border, 160ms box-shadow, 160ms background;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: color-mix(in srgb, var(--layer-1) 94%, var(--brand-500));
}
.hint { font-size: .8rem; color: var(--text-muted); margin-top: 6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.gap-4 { gap: 1rem; }
.w-full { width: 100%; }
.mt-4 { margin-top: 1rem; }

/* Flash messages */
.flash-wrap { margin-bottom: 10px; }
.flash { padding: 10px 12px; border-radius: 10px; font-size: .9rem; }
.flash.error { background: #3a1d1f; color: #f6b2b7; border: 1px solid #5b2a2f; }
.flash.success { background: #1d3a2a; color: #b6f2cf; border: 1px solid #2a5b42; }


.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  color: var(--text-muted);
}
.toggle-password:hover {
  opacity: 1;
}
.toggle-password:focus {
  outline: none;
}