/* SmarterPlus — Global styles */
:root{
  --sp-primary:#2c3e50;
  --sp-primary-2:#34495e;
  --sp-bg:#f8f9fa;
  --sp-card:#ffffff;
  --sp-text:#2c3e50;
  --sp-muted:#7f8c8d;
  --sp-border:#ecf0f1;
  --sp-accent:#f39c12;
  --sp-blue:#3498db;
  --sp-danger:#c0392b;
  --sp-success:#27ae60;
  --sp-shadow:0 5px 20px rgba(0,0,0,.06);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  background:var(--sp-bg);color:var(--sp-text);
}

a{color:var(--sp-blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Layout helpers */
.wrap,.container{max-width:1100px;margin:18px auto;padding:0 16px}
.card{background:var(--sp-card);border-radius:var(--radius);box-shadow:var(--sp-shadow);padding:18px;margin-bottom:16px}
header.site{background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-2));color:#fff;padding:14px}

/* Typography & utils */
h1,h2,h3{margin:0 0 .6rem}
.muted{color:var(--sp-muted)}
.accent{color:var(--sp-accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
.table-responsive{overflow:auto}

/* Buttons */
.btn{display:inline-block;background:var(--sp-blue);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(.98)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-danger{background:var(--sp-danger)}
.btn-ghost{background:transparent;border:2px solid var(--sp-border);color:var(--sp-text)}
.btn-outline{background:#fff;border:2px solid var(--sp-blue);color:var(--sp-blue)}

/* Forms */
label{display:block;margin:8px 0 4px;color:var(--sp-text)}
input,textarea,select{
  width:100%;padding:10px;border:2px solid var(--sp-border);border-radius:8px;background:#fff;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sp-blue);box-shadow:0 0 0 3px rgba(52,152,219,.15)}
.form-group{margin-bottom:10px}

/* Tables */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px;border-bottom:1px solid var(--sp-border);text-align:left;vertical-align:top}
thead th{background:#f3f6f8}

/* Badges & pills */
.badge,.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.badge-pending,.pill-pending{background:#f39c12;color:#fff}
.badge-settled,.pill-settled{background:#27ae60;color:#fff}
.badge-rejected,.pill-rejected{background:#c0392b;color:#fff}

/* Progress bars */
.progress{height:10px;background:#eef3f6;border-radius:999px;overflow:hidden}
.progress > .bar{height:100%;background:linear-gradient(90deg,#e67e22,#f1c40f);width:var(--value,0%)}

/* Modal (auth / donate) */
.auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:1000}
.auth-modal.is-open{display:block;animation:fadeIn .15s ease-out}
.auth-content{
  width:min(580px,95vw);background:#fff;border-radius:14px;margin:8vh auto;padding:16px;box-shadow:var(--sp-shadow);
}
.close-modal{background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer;float:right;color:#999}
.auth-tabs{display:flex;gap:8px;margin:10px 0 14px}
.auth-tab{flex:1;padding:10px;border:2px solid var(--sp-border);border-radius:8px;background:#fff;cursor:pointer}
.auth-tab.active{border-color:var(--sp-blue);box-shadow:0 0 0 3px rgba(52,152,219,.12)}

/* Messages */
.msg{background:#eaf2ff;border:1px solid #cfe2ff;color:var(--sp-primary);padding:10px;border-radius:8px;margin-bottom:12px}

/* Thumbnails */
.thumb{width:90px;height:auto;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* Header buttons cluster */
.topbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* === Brand bridge to your HTML design === */
:root{
  --sp-primary:#2c3e50;
  --sp-primary-2:#34495e;
  --sp-accent:#f39c12;
  --sp-red1:#e74c3c;
  --sp-red2:#c0392b;
  --sp-blue:#3498db;
}
header.site{
  background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-2));
}
.brand-hero{
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),linear-gradient(135deg,#f39c12,#e67e22);
  color:#fff;padding:70px 0;text-align:center;
}
.brand-hero h1{font-size:2.2rem;margin:0 0 .6rem}
.brand-hero p{opacity:.95;margin:0 auto 1rem;max-width:720px}
.btn-brand{background:linear-gradient(45deg,var(--sp-red1),var(--sp-red2));color:#fff}
.nav-brand a{color:#fff;margin-right:10px}
.nav-brand a:hover{color:var(--sp-accent)}