| :root { |
| --bg: #051823; |
| --bg-soft: #0c2e42; |
| --text: #e7f6ff; |
| --muted: #98bed4; |
| --panel: rgba(7, 32, 48, 0.72); |
| --panel-border: rgba(126, 204, 228, 0.24); |
| --primary: #03c7a8; |
| --secondary: #59a8ff; |
| --accent: #ffb25a; |
| --danger: #ff6e8d; |
| --ok: #74f1be; |
| } |
|
|
| body.light { |
| --bg: #edf6ff; |
| --bg-soft: #cde6ff; |
| --text: #132b3a; |
| --muted: #4f7083; |
| --panel: rgba(255, 255, 255, 0.84); |
| --panel-border: rgba(68, 127, 159, 0.2); |
| --primary: #04a68d; |
| --secondary: #2f7be0; |
| --accent: #f18f2c; |
| --danger: #c83d55; |
| --ok: #178a5e; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| font-family: "Manrope", sans-serif; |
| color: var(--text); |
| background: |
| radial-gradient(circle at 8% 10%, rgba(0, 200, 180, 0.25) 0, transparent 30%), |
| radial-gradient(circle at 92% 14%, rgba(89, 168, 255, 0.2) 0, transparent 33%), |
| radial-gradient(circle at 30% 95%, rgba(255, 178, 90, 0.18) 0, transparent 30%), |
| linear-gradient(165deg, var(--bg), var(--bg-soft)); |
| min-height: 100vh; |
| } |
|
|
| a { color: inherit; text-decoration: none; } |
|
|
| .nav { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| backdrop-filter: blur(10px); |
| background: rgba(6, 25, 37, 0.72); |
| border-bottom: 1px solid var(--panel-border); |
| } |
|
|
| body.light .nav { background: rgba(245, 251, 255, 0.82); } |
|
|
| .nav-inner { |
| max-width: 1280px; |
| margin: 0 auto; |
| padding: 10px 16px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-weight: 800; |
| letter-spacing: 0.02em; |
| } |
|
|
| .brand-dot { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| } |
|
|
| .nav-links { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .nav-link, |
| .profile-link { |
| padding: 8px 12px; |
| border-radius: 10px; |
| color: var(--muted); |
| font-weight: 700; |
| border: 1px solid transparent; |
| } |
|
|
| .profile-link { |
| width: 40px; |
| height: 40px; |
| padding: 0; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid var(--panel-border); |
| color: var(--text); |
| background: rgba(12, 40, 58, 0.55); |
| } |
|
|
| .nav-link.active, |
| .nav-link:hover, |
| .profile-link.active, |
| .profile-link:hover { |
| color: var(--text); |
| border-color: var(--panel-border); |
| background: rgba(10, 35, 52, 0.62); |
| } |
|
|
| body.light .nav-link.active, |
| body.light .nav-link:hover, |
| body.light .profile-link.active, |
| body.light .profile-link:hover { background: rgba(255, 255, 255, 0.9); } |
|
|
| .wrap { |
| max-width: 1280px; |
| margin: 0 auto; |
| padding: 16px; |
| } |
|
|
| .status-bar { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .status-pill { |
| border: 1px solid var(--panel-border); |
| background: var(--panel); |
| border-radius: 12px; |
| padding: 10px; |
| font-size: 12px; |
| } |
|
|
| .status-pill strong { |
| display: block; |
| margin-top: 4px; |
| font-size: 13px; |
| } |
|
|
| .quick-actions { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-bottom: 14px; |
| } |
|
|
| .btn { |
| border: 1px solid transparent; |
| border-radius: 10px; |
| padding: 9px 12px; |
| font-weight: 700; |
| cursor: pointer; |
| color: #012429; |
| background: var(--primary); |
| transition: transform 0.15s ease, opacity 0.2s ease; |
| } |
|
|
| .btn.secondary { background: var(--secondary); color: #fff; } |
| .btn.accent { background: var(--accent); } |
| .btn.ghost { |
| color: var(--text); |
| background: rgba(12, 40, 58, 0.42); |
| border-color: var(--panel-border); |
| } |
| .btn.danger { |
| color: #fff; |
| background: var(--danger); |
| } |
| .btn.small { |
| padding: 6px 10px; |
| font-size: 12px; |
| } |
|
|
| .btn:hover { transform: translateY(-1px); } |
|
|
| .grid { |
| display: grid; |
| grid-template-columns: repeat(12, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .card { |
| grid-column: span 12; |
| border-radius: 16px; |
| border: 1px solid var(--panel-border); |
| background: var(--panel); |
| padding: 14px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); |
| animation: pop 0.35s ease; |
| } |
|
|
| .card h3 { |
| margin: 0 0 10px; |
| font-family: "Sora", sans-serif; |
| font-size: 1rem; |
| } |
|
|
| .card p.desc { |
| margin: 0 0 10px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .desc-inline { |
| margin-top: 4px; |
| font-size: 11px; |
| color: var(--muted); |
| } |
|
|
| .form-row { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| align-items: center; |
| margin-bottom: 10px; |
| } |
|
|
| input, select, textarea { |
| width: 100%; |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| padding: 9px 10px; |
| background: rgba(9, 30, 44, 0.62); |
| color: var(--text); |
| font-family: inherit; |
| } |
|
|
| body.light input, |
| body.light select, |
| body.light textarea { |
| background: rgba(255, 255, 255, 0.92); |
| } |
|
|
| .metric-grid { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .metric-grid.ten { |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| } |
|
|
| .metric { |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| padding: 10px; |
| } |
|
|
| .metric span { color: var(--muted); font-size: 12px; } |
| .metric strong { display: block; margin-top: 3px; } |
|
|
| .quality-meter { |
| width: 100%; |
| height: 8px; |
| border-radius: 999px; |
| border: 1px solid var(--panel-border); |
| overflow: hidden; |
| margin-top: 4px; |
| } |
|
|
| #mQualityBar { |
| height: 100%; |
| width: 0; |
| transition: width 0.2s ease; |
| } |
|
|
| .quality-safe { background: linear-gradient(90deg, #14b879, #5ee7ad); } |
| .quality-warn { background: linear-gradient(90deg, #e3a11a, #ffc75b); } |
| .quality-danger { background: linear-gradient(90deg, #cc3659, #ff6e8d); } |
|
|
| .pill { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 4px 10px; |
| border-radius: 999px; |
| font-size: 11px; |
| border: 1px solid var(--panel-border); |
| } |
|
|
| .pill.active { background: rgba(42, 170, 118, 0.24); color: var(--ok); } |
| .pill.inactive { background: rgba(109, 130, 146, 0.22); color: var(--muted); } |
|
|
| .badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 4px 10px; |
| border-radius: 8px; |
| background: rgba(89, 168, 255, 0.2); |
| border: 1px solid var(--panel-border); |
| font-size: 11px; |
| } |
|
|
| .action-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .action-tile { |
| border: 1px solid var(--panel-border); |
| background: rgba(9, 30, 44, 0.56); |
| border-radius: 12px; |
| color: var(--text); |
| text-align: left; |
| padding: 10px; |
| cursor: pointer; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| position: relative; |
| } |
|
|
| .action-tile span { |
| font-size: 12px; |
| color: var(--muted); |
| } |
|
|
| .action-tile em { |
| font-style: normal; |
| font-size: 11px; |
| letter-spacing: 0.06em; |
| } |
|
|
| .action-tile.active { |
| border-color: rgba(116, 241, 190, 0.7); |
| box-shadow: 0 0 0 1px rgba(116, 241, 190, 0.35), 0 0 24px rgba(116, 241, 190, 0.2); |
| } |
|
|
| .pump-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: transparent; |
| position: absolute; |
| right: 10px; |
| top: 10px; |
| } |
|
|
| .pump-dot.active { |
| background: #7df3cb; |
| animation: pulse 0.9s infinite; |
| } |
|
|
| .log-box { |
| background: rgba(6, 24, 36, 0.72); |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| min-height: 180px; |
| max-height: 320px; |
| overflow: auto; |
| padding: 10px; |
| font-family: "Manrope", sans-serif; |
| font-size: 13px; |
| line-height: 1.45; |
| white-space: pre-wrap; |
| } |
|
|
| .prose-box { min-height: 140px; } |
|
|
| .tag { |
| border: 1px solid var(--panel-border); |
| border-radius: 999px; |
| padding: 4px 8px; |
| font-size: 11px; |
| color: var(--muted); |
| } |
|
|
| .chat-window { |
| min-height: 300px; |
| max-height: 430px; |
| border-radius: 12px; |
| border: 1px solid var(--panel-border); |
| background: rgba(6, 24, 36, 0.6); |
| padding: 10px; |
| overflow: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .chat-bubble { |
| max-width: 92%; |
| padding: 10px 12px; |
| border-radius: 12px; |
| line-height: 1.35; |
| font-size: 13px; |
| } |
|
|
| .chat-bubble.user { |
| margin-left: auto; |
| background: rgba(89, 168, 255, 0.22); |
| border: 1px solid rgba(89, 168, 255, 0.35); |
| } |
|
|
| .chat-bubble.assistant { |
| margin-right: auto; |
| background: rgba(3, 199, 168, 0.16); |
| border: 1px solid rgba(3, 199, 168, 0.36); |
| } |
|
|
| .history-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| max-height: 450px; |
| overflow: auto; |
| } |
|
|
| .history-list.tall { |
| max-height: 520px; |
| } |
|
|
| .history-item { |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| background: rgba(9, 30, 44, 0.5); |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .history-item span, |
| .history-item small { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .history-actions { |
| display: flex; |
| gap: 6px; |
| flex-wrap: wrap; |
| margin-top: 4px; |
| } |
|
|
| .switch-line { |
| display: inline-flex; |
| gap: 8px; |
| align-items: center; |
| } |
|
|
| .avatar-preview { |
| width: 44px; |
| height: 44px; |
| border-radius: 50%; |
| object-fit: cover; |
| border: 1px solid var(--panel-border); |
| display: none; |
| } |
|
|
| .checklist { |
| list-style: none; |
| margin: 8px 0 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .check-item { |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| gap: 3px; |
| font-size: 13px; |
| } |
|
|
| .check-item.pass { border-color: rgba(71, 181, 126, 0.4); } |
| .check-item.fail { border-color: rgba(224, 95, 122, 0.45); } |
| .check-item.info { border-color: var(--panel-border); } |
|
|
| .developer-tools { |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| padding: 10px; |
| margin-top: 10px; |
| } |
|
|
| .developer-tools summary { |
| cursor: pointer; |
| font-weight: 700; |
| } |
|
|
| .ok-text { color: var(--ok); } |
| .warn-text { color: var(--danger); } |
|
|
| .table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13px; |
| } |
|
|
| .table th, .table td { |
| border-bottom: 1px solid var(--panel-border); |
| padding: 8px; |
| text-align: left; |
| } |
|
|
| .toast-wrap { |
| position: fixed; |
| right: 14px; |
| bottom: 14px; |
| z-index: 90; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .toast { |
| min-width: 240px; |
| border-radius: 10px; |
| border: 1px solid var(--panel-border); |
| background: rgba(8, 30, 45, 0.94); |
| padding: 10px; |
| font-size: 13px; |
| animation: slidein 0.3s ease; |
| } |
|
|
| .toast.ok { border-color: rgba(71, 181, 126, 0.4); } |
| .toast.warn { border-color: rgba(243, 180, 82, 0.45); } |
| .toast.err { border-color: rgba(224, 95, 122, 0.45); } |
|
|
| .help-fab { |
| position: fixed; |
| right: 16px; |
| bottom: 16px; |
| width: 46px; |
| height: 46px; |
| border-radius: 50%; |
| border: 1px solid var(--panel-border); |
| background: linear-gradient(135deg, var(--secondary), var(--primary)); |
| color: #fff; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 800; |
| z-index: 95; |
| } |
|
|
| .modal { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.55); |
| display: none; |
| align-items: center; |
| justify-content: center; |
| z-index: 100; |
| } |
|
|
| .modal.show { display: flex; } |
| .modal-content { |
| width: min(560px, calc(100vw - 24px)); |
| border-radius: 16px; |
| border: 1px solid var(--panel-border); |
| background: var(--panel); |
| padding: 16px; |
| } |
|
|
| @media (max-width: 960px) { |
| .status-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .metric-grid.ten { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .action-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } |
| } |
|
|
| @keyframes pop { |
| from { opacity: 0; transform: translateY(8px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes slidein { |
| from { opacity: 0; transform: translateX(18px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
|
|
| @keyframes pulse { |
| 0% { opacity: 0.25; transform: scale(0.9); } |
| 50% { opacity: 1; transform: scale(1.15); } |
| 100% { opacity: 0.25; transform: scale(0.9); } |
| } |
|
|
