* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1226; color: #e6e8f0; }

/* ---- Login ---- */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(180deg, #1a0a2e, #16213e 60%, #0f3460); }
.auth-card { background: #181a30; border: 1px solid rgba(168,85,247,0.25); border-radius: 18px; padding: 30px 26px; width: 100%; max-width: 360px; }
.auth-card h2 { text-align: center; font-size: 18px; margin: 18px 0 20px; }
.auth-card label { display: block; font-size: 13px; margin-bottom: 6px; color: #b7bdd6; }
.auth-card input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: #12142a; color: #fff; font-size: 14px; margin-bottom: 16px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand.center { justify-content: center; }
.brand-icon { width: auto; height: 40px; display: block; object-fit: contain; }
.brand picture { display: inline-flex; align-items: center; line-height: 0; }
.brand b { display: block; font-size: 16px; }
.brand span { display: block; font-size: 11px; color: #c084fc; }

/* ---- Shell ---- */
.admin-shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: #12142a; border-right: 1px solid rgba(255,255,255,0.06);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { margin-bottom: 20px; padding: 0 6px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav a { color: #c9cde4; text-decoration: none; padding: 11px 14px; border-radius: 10px; font-size: 14px; }
.sidebar nav a:hover { background: rgba(255,255,255,0.05); }
.sidebar nav a.active { background: linear-gradient(135deg, rgba(79,172,254,0.25), rgba(168,85,247,0.25)); color: #fff; }
.sidebar .logout-form { margin: 0; }
.sidebar .logout { color: #f87171; text-decoration: none; padding: 11px 14px; border-radius: 10px; font-size: 14px;
  background: none; border: none; cursor: pointer; text-align: left; width: 100%; display: block; font-family: inherit; }
.sidebar .logout:hover { background: rgba(248,113,113,0.1); }

.content { flex: 1; padding: 28px 32px; overflow-x: auto; }
.content h1 { font-size: 22px; margin-bottom: 22px; }

/* ---- Cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: #181a30; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.card-label { font-size: 12.5px; color: #9aa1c4; }
.card-value { font-size: 24px; font-weight: 700; }

/* ---- Panels / forms ---- */
.panel { background: #181a30; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.panel h3 { font-size: 15px; margin-bottom: 14px; color: #c9c1ff; }
.panel label { display: block; font-size: 13px; margin: 12px 0 6px; color: #b7bdd6; }
.panel input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: #12142a; color: #fff; font-size: 14px; }
.form-grid { max-width: 640px; }
.big-value { font-size: 26px; font-weight: 700; color: #4ade80; }

.btn-primary { margin-top: 8px; padding: 14px 22px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #a855f7, #ec4899); color: #fff; font-weight: 700; font-size: 14.5px; }
.btn-small { padding: 7px 12px; border: none; border-radius: 8px; cursor: pointer; background: #4facfe; color: #fff; font-size: 12.5px; font-weight: 600; }
.btn-small.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #c9cde4; }
a.btn-small, .panel a.btn-small { color: #fff; text-decoration: none; }
.panel a.btn-small.ghost { color: #c9cde4; }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 13.5px; }
.alert.sucesso { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #86efac; }
.alert.erro { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.4); color: #fca5a5; }

/* ---- Table ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; background: #181a30; border-radius: 12px; overflow: hidden; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: middle; }
.table th { background: #1e2140; color: #b7bdd6; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.table a:not(.btn-small) { color: #4facfe; text-decoration: none; }
.acoes { display: flex; gap: 6px; }
.acoes form { margin: 0; }

.badge-status { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.s-pago { background: rgba(251,191,36,0.18); color: #fbbf24; }
.s-enviado { background: rgba(79,172,254,0.18); color: #4facfe; }
.s-concluido { background: rgba(34,197,94,0.18); color: #86efac; }
.s-erro { background: rgba(248,113,113,0.18); color: #fca5a5; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist li { padding-left: 22px; position: relative; font-size: 13.5px; color: #c9cde4; }
.checklist li:before { content: "→"; position: absolute; left: 0; color: #a855f7; }
.checklist a, .panel a { color: #4facfe; text-decoration: none; }

.muted { color: #9aa1c4; }
.small { font-size: 12px; }
.center { text-align: center; }
code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- Área do afiliado ---- */
.afiliado-shell { max-width: 960px; margin: 0 auto; padding: 0 16px 40px; }
.afiliado-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.afiliado-topbar .brand { display: flex; align-items: center; gap: 10px; }
.afiliado-topbar .brand b { display: block; font-size: 15px; line-height: 1; }
.afiliado-topbar .brand span { font-size: 11px; color: #9aa1c4; }

.link-copy { display: flex; gap: 8px; }
.link-copy input { flex: 1; background: #12142b; border: 1px solid rgba(255,255,255,0.12); color: #e8eaf6; border-radius: 8px; padding: 11px 12px; font-size: 13px; }
.link-copy .btn-primary { white-space: nowrap; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat-card { background: #171a34; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-card.destaque { border-color: rgba(74,222,128,0.4); background: rgba(34,197,94,0.08); }
.stat-label { font-size: 12px; color: #9aa1c4; text-transform: uppercase; letter-spacing: .3px; }
.stat-value { font-size: 22px; font-weight: 800; color: #f0f2ff; }
@media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .link-copy { flex-direction: column; } }

/* ---- Status do cliente ---- */
.badge-cli { padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; display: inline-block; }
.c-concluido  { background: rgba(34,197,94,0.18);  color: #86efac; }
.c-andamento  { background: rgba(79,172,254,0.18); color: #4facfe; }
.c-fila       { background: rgba(251,191,36,0.18); color: #fbbf24; }
.c-preparando { background: rgba(168,85,247,0.18); color: #c084fc; }
.c-parcial    { background: rgba(251,146,60,0.18); color: #fdba74; }
.c-cancelado  { background: rgba(248,113,113,0.18); color: #fca5a5; }

/* ---- Serviços (ativar/desativar) ---- */
.svc-row { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.svc-row:last-child { border-bottom: none; }
.svc-row.is-off { opacity: .55; }
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-name b { font-size: 14.5px; }
.tgl { border: none; border-radius: 20px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tgl-on  { background: rgba(34,197,94,0.18);  color: #86efac; }
.tgl-off { background: rgba(255,255,255,0.08); color: #9aa1c4; }
.svc-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tier-chip { border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; background: #12142a; color: #e6e8f0; display: inline-flex; align-items: center; gap: 6px; }
.tier-chip.chip-on  { border-color: rgba(34,197,94,0.4); }
.tier-chip.chip-off { text-decoration: line-through; color: #9aa1c4; background: transparent; }
.chip-mark { font-weight: 700; }
.chip-on .chip-mark  { color: #86efac; }
.chip-off .chip-mark { color: #fca5a5; }

/* ---- Admin responsivo (celular) ---- */
@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: column; gap: 10px; padding: 14px 16px;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sidebar .brand { margin-bottom: 4px; padding: 0; }
  .sidebar nav { flex: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sidebar nav a { padding: 8px 12px; font-size: 13px; border: 1px solid rgba(255,255,255,0.08); }
  .sidebar .logout-form { align-self: flex-start; }
  .sidebar .logout { width: auto; padding: 8px 14px; }
  .content { padding: 16px; }
  .content h1 { font-size: 19px; margin-bottom: 16px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-value { font-size: 20px; }
  .panel { padding: 16px; }
}
@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---- Selects e textarea no tema escuro ---- */
.panel select, .panel textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15); background: #12142a;
  color: #fff; font-size: 14px; font-family: inherit; outline: none;
}
.panel select {
  cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa1c4' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
.panel select:focus, .panel textarea:focus { border-color: #4facfe; box-shadow: 0 0 0 3px rgba(79,172,254,0.22); }
.panel select option { background: #181a30; color: #fff; }
.panel textarea { resize: vertical; min-height: 70px; }

/* ---- Formulário de Pacotes: multi-select + tiers ---- */
.chk-inline { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; cursor: pointer; }
.chk-inline input { width: auto !important; }

.ms { position: relative; }
.ms-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #12142a;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 8px 10px; min-height: 46px; }
.ms-chips { display: contents; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(79,172,254,0.16);
  border: 1px solid rgba(79,172,254,0.35); color: #dbe9ff; border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.ms-chip b { color: #4facfe; }
.ms-chip a { color: #fca5a5; cursor: pointer; font-weight: 700; text-decoration: none; }
.ms-input { flex: 1; min-width: 140px; border: none !important; background: transparent !important; color: #fff; font-size: 13px; outline: none; padding: 4px !important; }
.ms-drop { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; max-height: 260px; overflow-y: auto;
  background: #181a30; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.ms-opt { padding: 9px 12px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ms-opt:hover { background: rgba(79,172,254,0.15); }
.ms-opt b { color: #4facfe; }
.ms-empty { padding: 10px 12px; color: #9aa1c4; font-size: 12.5px; }

.tier-card { background: #12142a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.tier-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tier-item { border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 10px; margin-top: 10px; }
.tier-item:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.tier-item-nome { font-size: 12.5px; color: #c9cde4; margin-bottom: 6px; }
.tier-item-nome b { color: #4facfe; }
/* Limites do fornecedor (GramFama) e alerta de quantidade fora da faixa. */
.tier-lim { color: #8a92ae; font-size: 11.5px; }
.tier-alerta { background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.45);
  color: #fca5a5; font-size: 11.5px; font-weight: 600; padding: 6px 9px;
  border-radius: 8px; margin-bottom: 8px; }
.tier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tier-grid label { font-size: 11px !important; margin: 0 0 4px !important; }
.tier-card input { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: #181a30; color: #fff; font-size: 13px; }
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---- Tipo de link por ID (form de serviço) ---- */
.link-por-id { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lpi-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #12142a; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 10px; }
.lpi-nome { flex: 1; min-width: 160px; font-size: 12.5px; color: #c9cde4; }
.lpi-nome b { color: #4facfe; }
.lpi-row select { width: auto !important; min-width: 190px; }