:root { font-family: system-ui, sans-serif; }
body { margin: 0; color: #1a1a1a; }
.topbar { display: flex; gap: 24px; align-items: center; padding: 16px 24px; border-bottom: 1px solid #eee; }
.topbar .brand { font-weight: 700; text-decoration: none; color: inherit; }
.topbar nav a { margin-right: 16px; text-decoration: none; color: #333; }
.topbar .auth { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .auth .user { color: #555; font-size: 14px; }
.topbar .auth .login { text-decoration: none; color: #fff; background: #1a1a1a; padding: 8px 16px; border-radius: 8px; }
.topbar .auth .logout-form { margin: 0; }
.topbar .auth .logout-form button { cursor: pointer; border: 1px solid #ccc; background: #fff; padding: 8px 14px; border-radius: 8px; color: #333; }
main { padding: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { display: block; padding: 24px; border: 1px solid #e5e5e5; border-radius: 12px; text-decoration: none; color: inherit; }
.card:hover { border-color: #888; }
.gen-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.gen-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #555; }
.gen-form select, .gen-form textarea, .gen-form input[type="file"] { font: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.gen-form button { align-self: flex-start; cursor: pointer; border: none; background: #1a1a1a; color: #fff; padding: 10px 20px; border-radius: 8px; font: inherit; }
.gen-form button:disabled { opacity: .5; cursor: default; }
.status { margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: #f3f3f3; font-size: 14px; }
.status--running { background: #eef4ff; color: #1c4fb3; }
.status--done { background: #eafbef; color: #1a7f37; }
.status--error { background: #fdeeee; color: #b42318; }
.result { margin-top: 16px; }
.result img { max-width: 100%; border-radius: 12px; border: 1px solid #e5e5e5; }