Spaces:
Sleeping
Sleeping
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif; | |
| background: | |
| radial-gradient(140% 160% at 0% 0%, rgba(59,130,246,0.08), transparent 42%), | |
| radial-gradient(140% 140% at 100% 0%, rgba(6,182,212,0.08), transparent 42%), | |
| #020617; | |
| color: #e5e7eb; | |
| min-height: 100vh; | |
| } | |
| .app-shell { | |
| padding: 24px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .app-shell::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -20% -10% auto -10%; | |
| height: 340px; | |
| background: radial-gradient(circle at 30% 22%, rgba(79,70,229,0.16), transparent 42%), | |
| radial-gradient(circle at 70% 12%, rgba(6,182,212,0.14), transparent 38%); | |
| filter: blur(42px); | |
| opacity: 0.8; | |
| pointer-events: none; | |
| } | |
| .app-shell > * { position: relative; z-index: 1; } | |
| .auth-page { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 64px 16px 72px; | |
| position: relative; | |
| background: radial-gradient(circle at 50% 10%, #0f172a 0, #020617 55%, #020617 100%); | |
| } | |
| .auth-page::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: | |
| radial-gradient(circle at 50% 18%, rgba(99,102,241,0.35), transparent 55%), | |
| radial-gradient(circle at 30% 10%, rgba(59,130,246,0.12), transparent 50%), | |
| radial-gradient(circle at 70% 8%, rgba(6,182,212,0.12), transparent 50%); | |
| filter: blur(18px); | |
| opacity: 0.9; | |
| } | |
| .auth-stage { | |
| width: 100%; | |
| max-width: 1040px; | |
| min-height: 520px; | |
| border-radius: 32px; | |
| background: rgba(15,23,42,0.75); | |
| border: 1px solid rgba(148,163,184,0.25); | |
| box-shadow: 0 40px 80px rgba(15,23,42,0.9); | |
| backdrop-filter: blur(24px); | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 32px; | |
| } | |
| .auth-stage::before, | |
| .auth-stage::after { | |
| content: ""; | |
| position: absolute; | |
| width: 320px; | |
| height: 320px; | |
| border-radius: 999px; | |
| background: linear-gradient(135deg, #38bdf8, #6366f1); | |
| filter: blur(38px); | |
| opacity: 0.6; | |
| z-index: 0; | |
| animation: drift 26s ease-in-out infinite alternate; | |
| } | |
| .auth-stage::before { | |
| top: -80px; | |
| left: -60px; | |
| } | |
| .auth-stage::after { | |
| bottom: -120px; | |
| right: -40px; | |
| animation-duration: 30s; | |
| } | |
| .auth-card-wrap { | |
| width: 100%; | |
| max-width: 480px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .main-page { | |
| padding: 12px 0 48px; | |
| display: flex; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .main-page::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: | |
| radial-gradient(circle at 50% 8%, rgba(99,102,241,0.24), transparent 55%), | |
| radial-gradient(circle at 20% 0%, rgba(59,130,246,0.1), transparent 50%), | |
| radial-gradient(circle at 80% 0%, rgba(6,182,212,0.1), transparent 50%); | |
| filter: blur(26px); | |
| opacity: 0.7; | |
| } | |
| .main-card-wrap { | |
| width: 100%; | |
| max-width: 940px; | |
| margin: 0 auto; | |
| } | |
| .hero { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .hero-subtitle { | |
| margin: 4px 0 0 0; | |
| color: #9ca3af; | |
| font-size: 14px; | |
| } | |
| .status { | |
| color: #a5f3fc; | |
| font-size: 14px; | |
| max-width: 360px; | |
| } | |
| .card { | |
| background: rgba(15,23,42,0.9); | |
| border: 1px solid rgba(148,163,184,0.22); | |
| border-radius: 16px; | |
| padding: 24px; | |
| box-shadow: 0 18px 48px rgba(0,0,0,0.55); | |
| backdrop-filter: blur(22px); | |
| animation: cardIn 0.42s ease-out; | |
| } | |
| .card-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .card-subtitle { | |
| margin: 4px 0 0 0; | |
| color: #94a3b8; | |
| font-size: 13px; | |
| } | |
| .card h2 { | |
| font-size: 22px; | |
| } | |
| .card h2 { | |
| margin: 0; | |
| } | |
| /* Auth card spacing & padding (taller, airier) */ | |
| .auth-card-wrap .card { | |
| padding: 40px 36px; | |
| min-height: 420px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .auth-card-wrap .card-head { | |
| margin-bottom: 12px; | |
| } | |
| .auth-card-wrap .card .card-subtitle { | |
| margin-top: 14px; | |
| } | |
| .auth-card-wrap .card input { | |
| margin-top: 16px; | |
| margin-bottom: 0; | |
| } | |
| .auth-card-wrap .card input:first-of-type { | |
| margin-top: 12px; | |
| } | |
| .auth-card-wrap .card button { | |
| margin-top: 24px; | |
| } | |
| .auth-card-wrap .card .link, | |
| .auth-card-wrap .card .muted.small { | |
| margin-top: 16px; | |
| } | |
| @media (max-width: 480px) { | |
| .auth-card-wrap .card { | |
| padding: 28px 22px; | |
| } | |
| .auth-stage { | |
| padding: 20px; | |
| min-height: 460px; | |
| } | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 16px; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| } | |
| .single-column { grid-template-columns: 1fr; } | |
| input { | |
| width: 100%; | |
| padding: 10px 12px; | |
| margin: 6px 0; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255,255,255,0.15); | |
| background: rgba(255,255,255,0.04); | |
| color: #e5e7eb; | |
| transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; | |
| } | |
| textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(255,255,255,0.15); | |
| background: rgba(255,255,255,0.04); | |
| color: #e5e7eb; | |
| resize: vertical; | |
| transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| border-color: rgba(79,70,229,0.7); | |
| box-shadow: 0 0 0 3px rgba(79,70,229,0.3); | |
| transform: translateY(-1px); | |
| } | |
| button { | |
| width: 100%; | |
| padding: 10px 12px; | |
| margin-top: 8px; | |
| border-radius: 10px; | |
| border: none; | |
| cursor: pointer; | |
| background: linear-gradient(120deg, #4f46e5, #06b6d4); | |
| color: #0b1220; | |
| font-weight: 700; | |
| box-shadow: 0 8px 24px rgba(79,70,229,0.25); | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.2s ease, filter 0.2s ease; | |
| } | |
| button:hover { filter: brightness(1.05); transform: scale(1.01); } | |
| button:active { transform: scale(0.99); } | |
| button::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| button:hover::after { opacity: 1; } | |
| button.loading { | |
| pointer-events: none; | |
| } | |
| button.loading::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); | |
| animation: shimmer 1.4s infinite; | |
| opacity: 0.8; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.8; | |
| filter: grayscale(0.2); | |
| } | |
| .label { | |
| font-size: 13px; | |
| color: #cdd7e3; | |
| margin-top: 6px; | |
| } | |
| .link { | |
| color: #a5f3fc; | |
| cursor: pointer; | |
| font-size: 14px; | |
| margin-top: 8px; | |
| transition: color 0.2s ease; | |
| } | |
| .link.logout-small { font-size: 12px; } | |
| .link:hover { color: #e0f2fe; } | |
| .checkbox { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| justify-content: flex-start; | |
| width: fit-content; | |
| text-align: left; | |
| } | |
| .result { | |
| background: #111827; | |
| padding: 12px; | |
| border-radius: 8px; | |
| max-height: 420px; | |
| overflow: auto; | |
| } | |
| .summary-card { | |
| background: rgba(255,255,255,0.06); | |
| border: 1px solid rgba(255,255,255,0.18); | |
| border-radius: 12px; | |
| padding: 12px; | |
| } | |
| .chat-box { | |
| background: #0b1220; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| border-radius: 10px; | |
| padding: 10px; | |
| min-height: 280px; | |
| max-height: 600px; | |
| overflow-y: auto; | |
| margin: 8px 0; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| height: 10px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 999px; | |
| margin: 10px 0; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(120deg, #7c3aed, #22d3ee); | |
| transition: width 0.3s ease; | |
| } | |
| .chat-msg { | |
| margin-bottom: 8px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .chat-msg.user { border: 1px solid rgba(124,58,237,0.4); } | |
| .chat-msg.assistant { border: 1px solid rgba(34,211,238,0.4); } | |
| .md-content { | |
| line-height: 1.5; | |
| margin-top: 4px; | |
| } | |
| .md-content p { | |
| margin: 0 0 8px; | |
| } | |
| .md-content p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .md-content ul, .md-content ol { | |
| margin: 4px 0 8px 16px; | |
| padding: 0; | |
| } | |
| .md-content li { | |
| margin-bottom: 4px; | |
| } | |
| .md-content h1, .md-content h2, .md-content h3 { | |
| margin: 10px 0 6px; | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| } | |
| .md-content code { | |
| background: rgba(0,0,0,0.3); | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| } | |
| .md-content pre { | |
| background: rgba(0,0,0,0.3); | |
| padding: 8px; | |
| border-radius: 6px; | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| } | |
| .md-content strong { | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .muted { color: #94a3b8; } | |
| .small { font-size: 12px; } | |
| .generate-desc { margin-top: 4px; color: #9ca3af; } | |
| .logout-row { | |
| display: flex; | |
| justify-content: flex-end; | |
| width: 100%; | |
| max-width: 940px; | |
| margin: 8px auto 0; | |
| } | |
| @keyframes cardIn { | |
| from { opacity: 0; transform: translateY(16px) scale(0.97); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| @keyframes shimmer { | |
| from { transform: translateX(-100%); } | |
| to { transform: translateX(100%); } | |
| } | |
| @keyframes drift { | |
| from { transform: translate3d(0,0,0) scale(1); } | |
| to { transform: translate3d(8px, -8px, 0) scale(1.05); } | |
| } | |