.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:15px;
}

.settings-box{
  background:var(--card);
  padding:15px;
  border-radius:8px;
  border:1px solid var(--border);
}

/* responsive fallback */
@media(max-width:900px){
  .settings-grid{
    grid-template-columns:1fr;
  }
}

:root{
  --bg:#f4f5f7;--card:#fff;--text:#333;--header:#1a1f2c;
  --border:#e2e8f0;--input:#fff;--tableHead:#edf2f7;
}

body.dark{
  --bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--header:#020617;
  --border:#334155;--input:#0f172a;--tableHead:#1e293b;
}

body{
  font-family:system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;padding:20px;
  transition:.3s;
}

.container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

.card,
.settings-box,
.xc-card,
.proxy-list,
.mass-delete-box{
  width:100%;
  box-sizing:border-box;
}

.grid,
.settings-grid,
.xc-grid{
  width:100%;
  align-items:stretch;
}

header{
  background:var(--header);
  color:#fff;
  padding:20px;
  border-radius:8px;
  margin-bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

h1,h2,h3{margin:0}
h3{font-size:16px;margin:15px 0 5px;color:#475569}

.card{
  background:var(--card);
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  margin-bottom:20px;
}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{
  text-align:left;
  padding:10px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
th{background:var(--tableHead)}

input,select,textarea{
  width:100%;
  padding:8px;
  margin:4px 0 10px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--input);
  color:var(--text);
  box-sizing:border-box;
}

button{
  background:#2563eb;
  color:#fff;
  border:0;
  padding:8px 14px;
  border-radius:4px;
  font-weight:700;
  cursor:pointer;
}
button:hover{background:#1d4ed8}

.btn-danger{background:#dc2626}
.btn-danger:hover{background:#b91c1c}
.btn-success{background:#16a34a}

.action-btns button{padding:4px 8px;font-size:12px;margin-right:4px}
.flex-actions{display:flex;gap:4px;align-items:center}

.tabs{display:flex;gap:10px;margin-bottom:20px}
.tab-btn{
  background:var(--tableHead);
  color:var(--text);
  border:0;
  padding:10px 18px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
}
.tab-btn.active{background:#2563eb;color:#fff}

.tab-content{display:none}
.tab-content.active{display:block}

.proxy-list,.mass-delete-box{
  margin-top:15px;
  padding:10px;
  border-radius:6px;
  background:var(--card);
  border:1px solid var(--border);
}

.proxy-item{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.proxy-item:last-child{border:0}

.badge{
  display:inline-block;
  padding:2px 6px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:#64748b;
}
.badge-alert{background:#dc2626}
.badge-ok{background:#16a34a}
.badge-expired{text-decoration:line-through}

.xc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:15px;
}

.xc-card{
  padding:18px;
  border-radius:10px;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.xc-title{font-size:13px;opacity:.85;letter-spacing:.5px}
.xc-value{font-size:28px;font-weight:700;margin-top:8px}
.xc-sub{font-size:11px;opacity:.7;margin-top:5px}

.xc-card.blue{background:linear-gradient(135deg,#2563eb,#1e40af)}
.xc-card.green{background:linear-gradient(135deg,#16a34a,#065f46)}
.xc-card.purple{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.xc-card.orange{background:linear-gradient(135deg,#f97316,#c2410c)}

@media(max-width:900px){.xc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.xc-grid{grid-template-columns:1fr}}

.quick-btn{
  background:#2563eb;
  color:#fff;
  border:0;
  padding:12px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.quick-btn:hover{background:#1d4ed8;transform:translateY(-1px)}

@media(max-width:1200px){
  .settings-grid,
  .grid{
    grid-template-columns:1fr;
  }

  .xc-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .xc-grid{
    grid-template-columns:1fr;
  }
}