/* Royal Diamond WhatsApp Panel */
:root {
  --navy: #0B1F3A;
  --navy2: #12294d;
  --gold: #C9A227;
  --gold2: #D4AF37;
  --red: #c0392b;
  --green: #1c7a3f;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background:#f3f4f7; color:#1c2333; }
a { color: var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #081527, var(--navy2)); }
.login-card { background:#fff; border-radius:18px; padding:44px 40px; width:min(400px, 92vw); box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center; }
.login-logo { height:70px; margin:0 auto 14px; }
.login-card h1 { font-size:1.25rem; color:var(--navy); margin-bottom:4px; }
.login-sub { color:#888; font-size:.85rem; margin-bottom:22px; }
.login-card input { width:100%; padding:13px 16px; border:1.5px solid #ddd; border-radius:10px; margin-bottom:14px; font-size:1rem; }
.login-card input:focus { outline:none; border-color:var(--gold); }
.btn { display:inline-block; padding:12px 26px; border:none; border-radius:50px; font-weight:600; cursor:pointer; font-size:.95rem; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color:#1a1405; width:100%; }
.btn-gold:hover { opacity:.92; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-del { background:#fdeaea; color:var(--red); border:1px solid #f5c6c6; border-radius:8px; padding:5px 12px; font-size:.78rem; cursor:pointer; font-weight:600; }
.btn-del:hover { background:var(--red); color:#fff; }
.btn-optout { background:#e3f5e9; color:var(--green); border:1px solid #bfe6cc; border-radius:8px; padding:4px 10px; font-size:.76rem; cursor:pointer; font-weight:600; }
.btn-optout.off { background:#fdf3dd; color:#9a6a00; border-color:#f0dfb0; }
.filter-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }

/* Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--navy); color:#fff; padding:24px 0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px; }
.side-title { font-size:1.05rem; font-weight:800; display:block; }
.side-sub { font-size:.68rem; color:var(--gold2); letter-spacing:.16em; text-transform:uppercase; }
.sidebar nav a { display:block; padding:11px 22px; color:rgba(255,255,255,.85); font-size:.92rem; border-left:3px solid transparent; transition:all .2s; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); text-decoration:none; color:#fff; }
.sidebar nav a.on { background:rgba(201,162,39,.15); border-left-color:var(--gold); color:#fff; }
.side-foot { margin-top:auto; padding:14px 22px; font-size:.75rem; color:rgba(255,255,255,.4); }
.main { flex:1; padding:34px 40px; max-width:1100px; }
.main h1 { color:var(--navy); margin-bottom:22px; font-size:1.6rem; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:22px; }
.card { background:#fff; border-radius:14px; padding:20px; box-shadow:0 4px 18px rgba(11,31,58,.07); border:1px solid rgba(11,31,58,.05); }
.card-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#8a93a3; font-weight:700; margin-bottom:8px; }
.card-value { font-size:1.35rem; font-weight:800; color:var(--navy); }
.card-sub { font-size:.8rem; color:#8a93a3; margin-top:5px; }
.card-sub.warn { color:#b7791f; }

/* Table */
.table { width:100%; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(11,31,58,.06); border-collapse:collapse; font-size:.92rem; }
.table th { background:#f7f8fa; text-align:left; padding:12px 16px; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:#6b7480; }
.table td { padding:12px 16px; border-top:1px solid #eef0f3; vertical-align:middle; }
.table .empty { text-align:center; color:#9aa2ad; padding:30px; }

/* Badges */
.badge { display:inline-block; padding:4px 12px; border-radius:30px; font-size:.75rem; font-weight:600; background:#eef0f3; color:#555; }
.badge-green { background:#e3f5e9; color:var(--green); }
.badge-red { background:#fdeaea; color:var(--red); }
.badge-yellow { background:#fdf3dd; color:#9a6a00; }
.badge-blue { background:#e3edfb; color:#2456a6; }

/* Alerts */
.alert { padding:13px 18px; border-radius:12px; margin-bottom:16px; font-size:.92rem; }
.alert-green { background:#e3f5e9; color:var(--green); border:1px solid #bfe6cc; }
.alert-red { background:#fdeaea; color:var(--red); border:1px solid #f5c6c6; }
.alert-yellow { background:#fdf3dd; color:#9a6a00; }
.warn { color:#b7791f; font-size:.88rem; margin-top:6px; }

/* Forms */
.form-box { background:#fff; border-radius:14px; padding:26px; box-shadow:0 4px 18px rgba(11,31,58,.06); margin-bottom:22px; max-width:640px; }
.form-row { margin-bottom:16px; }
.form-row label { display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:7px; }
.form-row small { font-weight:400; color:#8a93a3; }
.form-row input, .form-row select, .form-row textarea { width:100%; padding:11px 14px; border:1.5px solid #e0e3e8; border-radius:10px; font-size:.95rem; font-family:inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline:none; border-color:var(--gold); }

.info-box { background:#fff; border-radius:14px; padding:22px 26px; box-shadow:0 4px 18px rgba(11,31,58,.06); border-left:4px solid var(--gold); max-width:640px; }
.info-box h3 { font-size:1rem; color:var(--navy); margin-bottom:10px; }
.info-box pre { background:#f6f7f9; padding:14px; border-radius:10px; font-size:.85rem; margin:10px 0; overflow-x:auto; }
.info-box p { font-size:.9rem; color:#5c6675; margin-bottom:8px; }
.info-line { color:#5c6675; font-size:.92rem; margin:10px 0; }
.send-box { margin:18px 0; }

@media (max-width:800px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; }
  .main { padding:22px 18px; }
}