| :root { |
| --bg-color: #0f172a; |
| --panel-bg: rgba(30, 41, 59, 0.7); |
| --panel-border: rgba(255, 255, 255, 0.1); |
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| --primary-color: #6366f1; |
| --primary-hover: #4f46e5; |
| --success-color: #10b981; |
| --success-hover: #059669; |
| --warning-color: #f59e0b; |
| --font-family: 'Inter', sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: var(--font-family); |
| background-color: var(--bg-color); |
| color: var(--text-primary); |
| min-height: 100vh; |
| overflow-x: hidden; |
| position: relative; |
| line-height: 1.6; |
| } |
|
|
| |
| .background-elements { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| overflow: hidden; |
| pointer-events: none; |
| } |
|
|
| .blob { |
| position: absolute; |
| filter: blur(80px); |
| border-radius: 50%; |
| opacity: 0.5; |
| animation: float 20s infinite ease-in-out alternate; |
| } |
|
|
| .blob-1 { |
| top: -10%; |
| left: -10%; |
| width: 50vw; |
| height: 50vw; |
| background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, rgba(99,102,241,0) 70%); |
| } |
|
|
| .blob-2 { |
| bottom: -20%; |
| right: -10%; |
| width: 60vw; |
| height: 60vw; |
| background: radial-gradient(circle, rgba(16,185,129,0.2) 0%, rgba(16,185,129,0) 70%); |
| animation-delay: -10s; |
| } |
|
|
| @keyframes float { |
| 0% { transform: translate(0, 0) scale(1); } |
| 100% { transform: translate(5%, 5%) scale(1.1); } |
| } |
|
|
| .container { |
| max-width: 1000px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
|
|
| header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 3rem; |
| padding-bottom: 1rem; |
| border-bottom: 1px solid var(--panel-border); |
| } |
|
|
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| color: var(--primary-color); |
| } |
|
|
| h1 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| letter-spacing: -0.025em; |
| } |
|
|
| h2 { |
| font-size: 1.25rem; |
| font-weight: 600; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .status-badge { |
| background: rgba(255, 255, 255, 0.1); |
| padding: 0.25rem 0.75rem; |
| border-radius: 9999px; |
| font-size: 0.875rem; |
| font-weight: 500; |
| backdrop-filter: blur(4px); |
| transition: all 0.3s ease; |
| } |
|
|
| .status-badge.running { background: rgba(99, 102, 241, 0.2); color: #818cf8; } |
| .status-badge.waiting { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } |
| .status-badge.approved { background: rgba(16, 185, 129, 0.2); color: #34d399; } |
|
|
| .glass-panel { |
| background: var(--panel-bg); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid var(--panel-border); |
| border-radius: 1rem; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .glass-panel:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .input-section p { |
| color: var(--text-secondary); |
| margin-bottom: 1.5rem; |
| font-size: 0.95rem; |
| } |
|
|
| textarea { |
| width: 100%; |
| min-height: 150px; |
| background: rgba(15, 23, 42, 0.5); |
| border: 1px solid var(--panel-border); |
| border-radius: 0.5rem; |
| padding: 1rem; |
| color: var(--text-primary); |
| font-family: var(--font-family); |
| font-size: 1rem; |
| resize: vertical; |
| margin-bottom: 1.5rem; |
| transition: border-color 0.2s, box-shadow 0.2s; |
| } |
|
|
| textarea:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| font-size: 1rem; |
| cursor: pointer; |
| border: none; |
| transition: all 0.2s; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .primary-btn { |
| background: var(--primary-color); |
| color: white; |
| } |
|
|
| .primary-btn:hover:not(:disabled) { |
| background: var(--primary-hover); |
| } |
|
|
| .success-btn { |
| background: var(--success-color); |
| color: white; |
| } |
|
|
| .success-btn:hover:not(:disabled) { |
| background: var(--success-hover); |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .output-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .revision-badge { |
| font-size: 0.75rem; |
| background: rgba(255,255,255,0.1); |
| padding: 0.2rem 0.5rem; |
| border-radius: 0.25rem; |
| vertical-align: middle; |
| margin-left: 0.5rem; |
| color: var(--text-secondary); |
| } |
|
|
| .feedback-alert { |
| background: rgba(245, 158, 11, 0.1); |
| border-left: 4px solid var(--warning-color); |
| padding: 1rem; |
| border-radius: 0.25rem 0.5rem 0.5rem 0.25rem; |
| margin-bottom: 1.5rem; |
| font-size: 0.9rem; |
| } |
|
|
| .document-content { |
| background: rgba(15, 23, 42, 0.5); |
| border: 1px solid var(--panel-border); |
| border-radius: 0.5rem; |
| padding: 2rem; |
| min-height: 200px; |
| overflow-x: auto; |
| } |
|
|
| |
| .document-content h1, .document-content h2, .document-content h3 { |
| margin-top: 1.5rem; |
| margin-bottom: 1rem; |
| color: var(--text-primary); |
| } |
|
|
| .document-content h1 { font-size: 1.75rem; } |
| .document-content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.5rem; } |
| .document-content p { margin-bottom: 1rem; color: #cbd5e1; } |
| .document-content ul, .document-content ol { margin-bottom: 1rem; padding-left: 1.5rem; color: #cbd5e1;} |
| .document-content li { margin-bottom: 0.25rem; } |
|
|
| |
| .loader { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 3rem 0; |
| color: var(--text-secondary); |
| } |
|
|
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 3px solid rgba(255,255,255,0.1); |
| border-radius: 50%; |
| border-top-color: var(--primary-color); |
| animation: spin 1s ease-in-out infinite; |
| margin-bottom: 1rem; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| b o d y { o v e r f l o w - x : h i d d e n ; } / * a d d i n g r e s p o n s i v e d e s i g n m e d i a q u e r y * / @ m e d i a ( m a x - w i d t h : 7 6 8 p x ) { . c o n t a i n e r { p a d d i n g : 1 r e m ; } h e a d e r { f l e x - d i r e c t i o n : c o l u m n ; a l i g n - i t e m s : f l e x - s t a r t ; g a p : 1 r e m ; } . o u t p u t - h e a d e r { f l e x - d i r e c t i o n : c o l u m n ; a l i g n - i t e m s : f l e x - s t a r t ; g a p : 1 r e m ; } } . s r - o n l y { p o s i t i o n : a b s o l u t e ; w i d t h : 1 p x ; h e i g h t : 1 p x ; p a d d i n g : 0 ; m a r g i n : - 1 p x ; o v e r f l o w : h i d d e n ; c l i p : r e c t ( 0 , 0 , 0 , 0 ) ; w h i t e - s p a c e : n o w r a p ; b o r d e r - w i d t h : 0 ; }
|
| |
