/* Base (scoped) */
#abc-app.abcac-root { padding: 16px; background:#f4f6f8; }
#abc-app .abc-container {
  max-width: 1100px; margin: 0 auto; background:#fff; padding: 1.5rem;
  border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); color:#333;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
#abc-app h1 { text-align:center; color:#2c3e50; margin:0 0 1rem; font-size: 1.6rem; }

#abc-app .abc-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:14px; }
#abc-app .abc-controls-secondary { justify-content:flex-end; gap:8px; }
#abc-app .abc-toggle { display:flex; align-items:center; gap:8px; font-size:14px; color:#2c3e50; }
#abc-app input[type="file"] {
  padding:10px; border:1px solid #e0e0e0; border-radius:8px; background:#fafafa;
}

#abc-app .abc-btn {
  padding:12px 14px; border:0; border-radius:10px; cursor:pointer; font-size:14px; transition:.2s; line-height:1.1;
  min-height:44px; /* mobile tap target */
}
#abc-app .abc-run { background:#28a745; color:#fff; }
#abc-app .abc-download { background:#007bff; color:#fff; }
#abc-app .abc-template { background:#6c757d; color:#fff; }
#abc-app .abc-btn:hover { filter: brightness(0.95); }

#abc-app .abc-info {
  background:#e9f7ef; color:#155724; padding:12px; border-left:5px solid #28a745;
  border-radius:8px; font-size:14px; margin-top:10px;
}
#abc-app .abc-hidden { display:none; }

/* Table wrapper adds scroll on small screens */
#abc-app .abc-table-wrap { margin-top:16px; overflow-x:auto; border:1px solid #eee; border-radius:10px; }

/* Table */
#abc-app table { width:100%; border-collapse:collapse; table-layout: auto; }
#abc-app th, #abc-app td { padding:10px; border-bottom:1px solid #f0f0f0; text-align:center; white-space:nowrap; }
#abc-app th { background:#f9fafb; font-weight:600; position: sticky; top: 0; z-index: 1; }

#abc-app .abc-cat-A { background:#28a745; color:#fff; font-weight:600; }
#abc-app .abc-cat-B { background:#ffc107; color:#111; font-weight:600; }
#abc-app .abc-cat-C { background:#dc3545; color:#fff; font-weight:600; }

#abc-app .abc-note { font-size:12px; color:#666; margin-top:8px; text-align:center; }

/* ===== Compact mode ===== */
#abc-app.abc-compact table { font-size: 12px; }
#abc-app.abc-compact th, #abc-app.abc-compact td { padding: 6px 8px; }
#abc-app.abc-compact .abc-container { padding: 1rem; }
#abc-app.abc-compact .abc-info { font-size: 13px; }

/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  #abc-app .abc-container { padding: 1rem; border-radius: 10px; }
  #abc-app h1 { font-size: 1.4rem; margin-bottom: .75rem; }
  #abc-app .abc-controls { gap:8px; }
  #abc-app input[type="file"] { width:100%; }
  #abc-app .abc-btn { flex: 1 1 100%; width:100%; }
  #abc-app table { font-size: 13px; }
  #abc-app th, #abc-app td { padding:8px 10px; }
  #abc-app .abc-controls-secondary { justify-content:center; }
}

@media (max-width: 420px) {
  #abc-app table { font-size: 12px; }
  #abc-app .abc-btn { font-size: 13px; }
}