:root{
  --bg:#0b0d12; --card:#141821; --muted:#8b93a5;
  --accent:#6366f1; --accent2:#d946ef; --border:#232838;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
}
*{box-sizing:border-box;margin:0;padding:0}
body.dark{background:var(--bg);color:#e6e9ef;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}
a{color:inherit;text-decoration:none}
.nav{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2rem;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(11,13,18,.85);
  backdrop-filter:blur(12px);z-index:10}
.brand{font-weight:800;font-size:1.2rem;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:1rem;align-items:center;font-size:.9rem}
.balance{padding:.25rem .75rem;border-radius:999px;
  background:var(--card);border:1px solid var(--border);color:var(--success)}

.hero{text-align:center;padding:4rem 1rem 2rem}
.hero h1{font-size:2.5rem;font-weight:800;
  background:linear-gradient(90deg,#fff,#a5b4fc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);margin-top:.5rem}

.grid.services{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  padding:2rem 1rem}
.card{background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:1.25rem;position:relative;transition:.25s}
.service-card{overflow:hidden}
.service-card::before{content:"";position:absolute;inset:-2px;border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  z-index:-1;opacity:.7;transition:.3s}
.service-card:hover::before{opacity:1;filter:blur(6px)}
.service-card:hover{transform:translateY(-3px)}
.icon{font-size:1.6rem;margin-bottom:.5rem}
.price{margin:.75rem 0;font-size:1.4rem;font-weight:700;color:var(--accent2)}
.price small{font-size:.75rem;color:var(--muted);margin-left:2px}

.input{width:100%;padding:.65rem .85rem;background:#0e111a;
  border:1px solid var(--border);border-radius:10px;color:#fff;
  margin-bottom:.75rem;font-size:.9rem;outline:none}
.input:focus{border-color:var(--accent)}
.btn-primary,.btn-secondary,.btn-danger{
  cursor:pointer;border:none;padding:.65rem 1.2rem;border-radius:10px;
  font-weight:600;font-size:.9rem;text-align:center;display:inline-block}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
.btn-secondary{background:var(--card);border:1px solid var(--border);color:#e6e9ef}
.btn-danger{background:var(--danger);color:#fff}
.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{filter:brightness(1.1)}
.w-full{width:100%}

table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{padding:.6rem .5rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.7rem}

.badge{padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}
.badge-success{background:rgba(16,185,129,.15);color:var(--success)}
.badge-pending{background:rgba(245,158,11,.15);color:var(--warning)}
.badge-inprogress{background:rgba(99,102,241,.15);color:#a5b4fc}
.badge-failed,.badge-canceled{background:rgba(239,68,68,.15);color:var(--danger)}
.badge-partial{background:rgba(168,85,247,.15);color:#c084fc}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal.hidden{display:none}
.modal-card{max-width:440px;width:100%}
.footer{text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.8rem;
  border-top:1px solid var(--border);margin-top:4rem}
.err{color:var(--danger);margin-bottom:.75rem;font-size:.85rem}
.flex{display:flex}.flex-1{flex:1}.gap-2{gap:.5rem}.mt-4{margin-top:1rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.p-6{padding:1.5rem}
.p-4{padding:1rem}.text-2xl{font-size:1.5rem}.font-bold{font-weight:700}
.opacity-70{opacity:.7}.text-sm{font-size:.85rem}
@media(max-width:640px){.nav{padding:1rem}.hero h1{font-size:1.8rem}}



/* ============================================
   ADMIN LOGIN — compact centered layout
   ============================================ */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:
    radial-gradient(500px 280px at 15% 10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(500px 280px at 85% 90%, rgba(217,70,239,.14), transparent 60%),
    var(--bg);
}

.login-card{
  width:100%;
  max-width:360px;
  padding:2rem 1.75rem 1.5rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.login-head{text-align:center;margin-bottom:1.5rem}
.login-head h1{
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin-top:.6rem;
  color:#fff;
}
.login-sub{
  font-size:.78rem;
  color:var(--muted);
  margin-top:.25rem;
}
.logo-mark{
  width:44px;height:44px;
  margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  font-size:1.25rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 22px rgba(99,102,241,.35);
}

.field{margin-bottom:.9rem}
.field label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
  margin-bottom:.35rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.field input{
  width:100%;
  padding:.65rem .8rem;
  background:#0e111a;
  border:1px solid var(--border);
  border-radius:9px;
  color:#fff;
  font-size:.9rem;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.field input::placeholder{color:#3a4253}

.login-btn{
  width:100%;
  padding:.7rem;
  margin-top:.4rem;
  border:none;
  border-radius:9px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:filter .15s, transform .05s;
}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:active{transform:scale(.99)}

.login-back{
  text-align:center;
  font-size:.78rem;
  color:var(--muted);
  margin-top:1.25rem;
}
.login-back a{color:var(--muted);transition:color .15s}
.login-back a:hover{color:#fff}

.err{
  color:var(--danger);
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.25);
  border-radius:8px;
  padding:.55rem .75rem;
  font-size:.8rem;
  margin-bottom:.9rem;
}
.flash{
  padding:.55rem .75rem;
  border-radius:8px;
  font-size:.8rem;
  margin-bottom:.9rem;
  border:1px solid transparent;
}
.flash-success{
  background:rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.25);
  color:var(--success);
}
.flash-error{
  background:rgba(239,68,68,.1);
  border-color:rgba(239,68,68,.25);
  color:var(--danger);
}

@media (max-width:400px){
  .login-card{padding:1.5rem 1.25rem 1.25rem;border-radius:14px}
  .login-head h1{font-size:1.15rem}
}