[verified] Security hardening + UX/UI polish

Security (requesting-code-review pipeline + independent reviewer):
- Fix path traversal on file upload (basename sanitize + resolve-containment)
- Fix IDOR: org + owner scoping on all group/chat routes (_authorize_group/_get_owned_group),
  hide other users' personal groups in listings
- Remove XSS via v-html in Chat task (text interpolation)
- Add test_security.py (traversal + cross-user denial) — all pass

UX/UI (ui-ux-pro-max + frontend-dev-verification):
- Global: focus rings, 44px touch targets, hover/press transitions, input focus glow,
  prefers-reduced-motion, skeleton loaders, empty states, back links, spinner
- Login: password toggle, autocomplete, spinner, disabled-when-empty
- Cards lift on hover; dashboard skeleton + empty state; analyze button spinner

All backend tests pass (m0/m1/routes/security/e2e); frontend builds; served SPA verified via curl.

frontend/src/style.css

@@ -71,3 +71,84 @@ label { font-size: 13px; color: var(--muted); display: block; margin: 10px 0 4px
 .muted { color: var(--muted); }
 .msg-seller { background: var(--accent); color: #fff; align-self: flex-end; border-radius: 16px 16px 4px 16px; }
 .msg-customer { background: #fff; align-self: flex-start; border-radius: 16px 16px 16px 4px; border: 1px solid var(--border); }
+
+/* ── UX polish: focus rings, touch targets, transitions ───────────── */
+/* Visible focus rings for keyboard nav (a11y) */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+a { color: inherit; }
+a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Comfortable touch density + consistent transitions */
+button { min-height: 44px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; }
+button:not(:disabled):hover { box-shadow: 0 4px 12px rgba(20,24,40,.1); }
+button:not(:disabled):active { transform: scale(.97); }
+button.primary:not(:disabled):hover { box-shadow: 0 6px 18px rgba(79,70,229,.35); }
+
+input, select, textarea {
+  min-height: 44px;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+input:focus, select:focus, textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
+}
+textarea { min-height: 88px; resize: vertical; }
+
+/* Cards lift on hover (only for interactive/uniform card grids) */
+.card.lift { transition: transform .2s ease, box-shadow .25s ease; }
+.card.lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,24,40,.10); }
+
+/* Disabled clarity */
+button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
+
+/* Back link button */
+.btn-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; margin-bottom: 12px;
+  background: transparent; border: 1px solid var(--border); border-radius: 10px;
+  color: var(--muted); font-size: 13px; text-decoration: none;
+}
+.btn-back:hover { color: var(--ink); border-color: var(--accent); }
+
+/* Status spinner */
+.spinner {
+  width: 16px; height: 16px; border-radius: 50%;
+  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
+  animation: spin .7s linear infinite; display: inline-block;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Skeleton loading blocks */
+.skeleton {
+  border-radius: 8px;
+  background: linear-gradient(90deg, #eef0f5 25%, #e2e5ec 37%, #eef0f5 63%);
+  background-size: 400% 100%;
+  animation: shimmer 1.4s ease infinite;
+}
+@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+
+/* Empty-state block */
+.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
+.empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); }
+
+/* Field helper/error lines under inputs */
+.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }
+
+/* Responsive container default */
+@media (max-width: 640px) {
+  .main { padding: 16px; }
+  .row { gap: 10px; }
+  .msg-seller, .msg-customer { max-width: 84%; }
+}