*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --yellow:#FFD600;
  --yellow-dark:#C9AA00;
  --yellow-glow:rgba(255,214,0,.3);
  --dark:#0a0a0a;
  --dark2:#111;
  --panel:#141414;
  --card-bg:#141414;
  --text:#f0f0f0;
  --muted:#777;
  --border:#222;
  --success:#3fb950;
  --radius:12px;
}

body{
  background:var(--dark);
  min-height:100vh;
  font-family:'Segoe UI',system-ui,sans-serif;
  color:var(--text);
}

.app-wrapper{
  max-width:860px;
  margin:0 auto;
  padding:24px 16px 48px;
}

/* ─── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;padding:14px 24px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
}
.topbar-logo{display:flex;align-items:center;text-decoration:none}
.logo-full{height:42px;width:auto;display:block;mix-blend-mode:lighten}

/* ─── AUTH ───────────────────────────────────────────────────────────────── */
.btn-google-login{
  display:flex;align-items:center;gap:8px;padding:8px 16px;
  background:#fff;color:#3c4043;border-radius:8px;text-decoration:none;
  font-size:.85rem;font-weight:600;border:1px solid #ddd;transition:box-shadow .15s;
}
.btn-google-login:hover{box-shadow:0 2px 12px var(--yellow-glow)}

.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--yellow)}
.user-avatar-placeholder{
  width:32px;height:32px;border-radius:50%;
  background:var(--yellow);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;flex-shrink:0;
}
.user-name{
  font-size:.85rem;color:var(--text);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.admin-badge{
  font-size:.62rem;font-weight:900;letter-spacing:1.5px;
  background:var(--yellow);color:#000;padding:2px 8px;border-radius:4px;
  text-transform:uppercase;
}
.agent-badge{
  font-size:.62rem;font-weight:900;letter-spacing:1.5px;
  background:var(--success);color:#000;padding:2px 8px;border-radius:4px;
  text-transform:uppercase;
}

/* ─── ADMIN USERS PANEL ─────────────────────────────────────────────── */
.au-section{margin-bottom:24px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.au-title{font-size:1rem;color:var(--yellow);margin-bottom:16px}
.au-list{display:flex;flex-direction:column;gap:8px}
.au-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--dark2);border-radius:8px}
.au-info{display:flex;align-items:center;gap:10px}
.au-avatar{width:28px;height:28px;border-radius:50%}
.au-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem}
.au-details{display:flex;flex-direction:column}
.au-name{font-size:.85rem;color:var(--text)}
.au-email{font-size:.72rem;color:var(--muted)}
.au-actions{display:flex;align-items:center;gap:10px}
.au-role-label{font-size:.75rem;color:var(--muted)}
.au-toggle-btn{font-size:.72rem;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all .15s}
.au-toggle-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.au-toggle-btn.au-active{border-color:var(--success);color:var(--success)}
.au-discount{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--muted)}
.au-discount label{white-space:nowrap}
.au-discount-input{width:52px;padding:3px 6px;border-radius:4px;border:1px solid var(--border);background:var(--dark);color:var(--text);font-size:.75rem;text-align:center}
.au-discount-save{padding:3px 8px;border-radius:4px;border:1px solid var(--yellow);background:none;color:var(--yellow);cursor:pointer;font-size:.72rem;transition:all .15s}
.au-discount-save:hover{background:var(--yellow);color:#000}
.au-payment-select{padding:3px 6px;border-radius:4px;border:1px solid var(--border);background:var(--dark);color:var(--text);font-size:.72rem;cursor:pointer}
.au-tabs{display:flex;gap:6px;margin-bottom:16px}
.au-tab{background:none;border:1px solid var(--border);color:var(--muted);padding:6px 16px;border-radius:8px;cursor:pointer;font-size:.82rem;font-family:inherit;font-weight:600;transition:all .15s}
.au-tab:hover{border-color:var(--yellow);color:var(--yellow)}
.au-tab.active{background:var(--yellow);color:#000;border-color:var(--yellow)}
.au-agent-code{font-size:.7rem;font-family:monospace;color:var(--yellow);background:rgba(250,204,21,.1);padding:2px 8px;border-radius:4px;font-weight:700;letter-spacing:.5px}
.btn-logout{
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:5px 12px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .15s;
}
.btn-logout:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-outline-sm{
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:5px 12px;border-radius:6px;font-size:.8rem;text-decoration:none;
  transition:all .15s;display:inline-block;
}
.btn-outline-sm:hover{border-color:var(--yellow);color:var(--yellow)}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.app-header{text-align:center;margin-bottom:36px}
.app-header p{color:var(--muted);font-size:.9rem;letter-spacing:.5px}

/* ─── ERROR ──────────────────────────────────────────────────────────────── */
.error-box{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,80,80,.07);border:1px solid rgba(255,80,80,.3);
  border-radius:8px;padding:13px 16px;margin-bottom:16px;
  color:#ff8080;font-size:.9rem;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.app-footer{
  text-align:center;margin-top:44px;color:#2e2e2e;font-size:.78rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
}
.footer-logo{height:20px;width:auto;mix-blend-mode:lighten;opacity:.25;filter:grayscale(1)}
.footer-sep{color:#1d1d1d}
.footer-link{color:#3a3a3a;text-decoration:none;transition:color .15s}
.footer-link:hover{color:var(--yellow)}

.hidden{display:none!important}