<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Cairo,Arial,sans-serif;background:#060D09;color:#F5F2EC;min-height:100vh}
.nav{background:#0B1A12;border-bottom:1px solid rgba(245,242,236,.08);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.nav-logo{font-weight:800;font-size:1.1rem;color:#2DC48F}
.nav-links{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav-links a{color:rgba(245,242,236,.6);text-decoration:none;padding:6px 12px;border-radius:7px;font-size:.82rem;transition:.2s}
.nav-links a:hover,.nav-links a.active{background:rgba(29,158,117,.15);color:#2DC48F}
.main{max-width:1100px;margin:0 auto;padding:28px 24px}
.page-title{font-size:1.4rem;font-weight:800;margin-bottom:6px}
.page-sub{color:rgba(245,242,236,.5);margin-bottom:28px;font-size:.88rem}
.card{background:#0B1A12;border:1px solid rgba(245,242,236,.08);border-radius:14px;padding:22px;margin-bottom:20px}
.card-title{font-weight:700;margin-bottom:16px;font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.btn{padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.82rem;font-weight:700;font-family:Cairo,Arial;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-green{background:#1D9E75;color:#fff}.btn-green:hover{background:#2DC48F}
.btn-ghost{background:rgba(245,242,236,.06);color:rgba(245,242,236,.7);border:1px solid rgba(245,242,236,.1)}
.btn-danger{background:rgba(220,38,38,.15);color:#f87171;border:1px solid rgba(220,38,38,.2)}
.empty{text-align:center;padding:32px;color:rgba(245,242,236,.35);font-size:.85rem}
.code-block{background:rgba(245,242,236,.04);border:1px solid rgba(245,242,236,.08);border-radius:8px;padding:12px 14px;font-family:'Courier New',monospace;font-size:.78rem;color:#2DC48F;word-break:break-all}
.badge{padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:700}
.b-active{background:rgba(29,158,117,.2);color:#2DC48F}
.b-paused{background:rgba(245,242,236,.08);color:rgba(245,242,236,.5)}
.b-done{background:rgba(29,158,117,.15);color:#2DC48F}
.b-failed{background:rgba(220,38,38,.15);color:#f87171}
input,select,textarea{background:rgba(245,242,236,.06);border:1px solid rgba(245,242,236,.12);color:#F5F2EC;padding:9px 12px;border-radius:8px;font-family:Cairo,Arial;font-size:.85rem;width:100%;margin-bottom:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(29,158,117,.5)}
</style>
</head><body>
<nav class="nav">
  <span class="nav-logo">⚡ Sudanna Agent</span>
  <div class="nav-links">
    <a href="index.php">Dashboard</a>
    <a href="api.php">API Keys</a>
    <a href="agents.php">Agents</a>
    <a href="logs.php">Logs</a>
    <a href="billing.php">Billing</a>
    <a href="/" style="margin-right:8px;border:1px solid rgba(245,242,236,.1);padding:5px 12px;border-radius:7px;color:rgba(245,242,236,.5);font-size:.78rem;text-decoration:none">← Platform</a>
  </div>
  <div style="font-size:.8rem;color:rgba(245,242,236,.4)"><?= htmlspecialchars($u['name'] ?? '') ?></div>
</nav>
