:root{
  --bg:#0b1220; --panel:#0f172a; --panel2:#111827;
  --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937;
  --blue:#2563eb; --red:#dc2626; --green:#10b981;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#070b15,var(--bg));color:var(--text)}
a{color:inherit}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:rgba(17,24,39,.9);border-bottom:1px solid var(--border);
  position:sticky;top:0;backdrop-filter:blur(6px);z-index:10
}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800}
.title{font-weight:800}
.sub{font-size:12px;color:var(--muted)}
.userbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.userline{font-size:13px;color:var(--muted);margin-right:8px}

.wrap{max-width:1150px;margin:18px auto;padding:0 16px}
.panel{
  background:rgba(17,24,39,.75);border:1px solid var(--border);border-radius:14px;
  padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{
  background:rgba(15,23,42,.85);border:1px solid var(--border);border-radius:14px;padding:16px;
  text-decoration:none;display:block;transition:.15s transform,.15s border-color
}
.card:hover{transform:translateY(-2px);border-color:#334155}
.card .h{font-weight:800;margin-bottom:6px}
.card .p{font-size:12px;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;border-radius:10px;border:1px solid #334155;
  background:rgba(51,65,85,.4);text-decoration:none;cursor:pointer
}
.btn.primary{background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.55)}
.btn.danger{background:rgba(220,38,38,.16);border-color:rgba(220,38,38,.55)}
.btn.full{width:100%}
hr{border:0;border-top:1px solid var(--border);margin:14px 0}

.form label{display:block;margin:10px 0 6px;color:#cbd5e1;font-size:13px}
.form input,.form select,.form textarea{
  width:100%;padding:11px;border-radius:12px;border:1px solid #334155;
  background:rgba(2,6,23,.6);color:var(--text);outline:none
}
.form textarea{min-height:110px;resize:vertical}
.row{display:flex;gap:12px}
.row>div{flex:1}
@media (max-width:720px){.row{flex-direction:column}}

.alert{
  padding:12px 14px;border-radius:12px;border:1px solid var(--border);
  background:rgba(15,23,42,.8);margin-bottom:12px
}
.alert.success{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.08)}
.alert.error{border-color:rgba(220,38,38,.55);background:rgba(220,38,38,.08)}
.alert.info{border-color:rgba(37,99,235,.55);background:rgba(37,99,235,.08)}

.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);display:inline-block}
.badge.SUBMITTED{border-color:#334155}
.badge.APPROVED{border-color:rgba(16,185,129,.6)}
.badge.REJECTED{border-color:rgba(220,38,38,.6)}
.footer{max-width:1150px;margin:22px auto 30px;padding:0 16px;color:var(--muted);font-size:12px}