.ab-app, .ab-public {
  --ab-primary: #3A5F7D;
  --ab-accent: #F2B705;
  --ab-brown: #7D583A;
  --ab-success: #23C378;
  --ab-bg: #ffffff;
  --ab-text: #0f172a;
  --ab-muted: #475569;
  --ab-border: #e2e8f0;
  --ab-danger: #b91c1c;
  --ab-warn: #b45309;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ab-app a, .ab-public a { color: var(--ab-primary); text-decoration: none; }
.ab-app a:hover, .ab-public a:hover { text-decoration: underline; }

.ab-card { background: var(--ab-bg); border: 1px solid var(--ab-border); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ab-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ab-col { flex: 1 1 220px; }

.ab-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius: 10px; border:1px solid var(--ab-border); background:#fff; color:var(--ab-text); cursor:pointer; }
.ab-btn:hover { border-color: var(--ab-primary); }
.ab-btn:disabled { opacity:.55; cursor:not-allowed; }
.ab-btn--primary { background: var(--ab-primary); color:#fff; border-color: var(--ab-primary); }
.ab-btn--primary:hover { filter: brightness(.95); }
.ab-btn--accent { background: var(--ab-accent); color:#1f2937; border-color: var(--ab-accent); }
.ab-btn--danger { background: var(--ab-danger); color:#fff; border-color: var(--ab-danger); }

.ab-field label { display:block; font-size: 12px; color: var(--ab-muted); margin-bottom:6px; }
.ab-field input, .ab-field select, .ab-field textarea { width:100%; padding:10px 12px; border:1px solid var(--ab-border); border-radius:10px; }
.ab-field input:focus, .ab-field select:focus, .ab-field textarea:focus { outline:2px solid rgba(35,195,120,.25); border-color: var(--ab-success); }

.ab-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius: 999px; border:1px solid var(--ab-border); font-size: 12px; color: var(--ab-muted); }
.ab-badge--status { border-color: rgba(58,95,125,.35); color: var(--ab-primary); }

.ab-alert { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--ab-border); }
.ab-alert--error { border-color: rgba(185,28,28,.35); color: var(--ab-danger); }
.ab-alert--success { border-color: rgba(35,195,120,.35); color: var(--ab-success); }

.ab-spinner { width:18px; height:18px; border:2px solid var(--ab-border); border-top-color: var(--ab-primary); border-radius:50%; animation: abspin 1s linear infinite; }
@keyframes abspin { to { transform: rotate(360deg); } }