Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #090d10; | |
| --panel: rgba(9, 16, 18, 0.92); | |
| --panel-strong: #10191d; | |
| --line: rgba(89, 255, 177, 0.24); | |
| --text: #ecfff7; | |
| --muted: #9bb6ac; | |
| --green: #35f28c; | |
| --pink: #ff4f9a; | |
| --amber: #ffd166; | |
| --blue: #54b7ff; | |
| --danger: #ff5b6e; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| height: 100%; | |
| scrollbar-width: none; | |
| } | |
| html::-webkit-scrollbar, | |
| body::-webkit-scrollbar, | |
| main::-webkit-scrollbar, | |
| .table-panel::-webkit-scrollbar, | |
| .nav::-webkit-scrollbar { | |
| display: none; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| overflow: auto; | |
| scrollbar-width: none; | |
| color: var(--text); | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| background: | |
| radial-gradient(circle at 12% 12%, rgba(53, 242, 140, 0.14), transparent 28%), | |
| radial-gradient(circle at 88% 18%, rgba(255, 79, 154, 0.11), transparent 30%), | |
| linear-gradient(135deg, #080a0c, #10191d 48%, #080d10); | |
| } | |
| body.home-page { | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| code { | |
| color: var(--green); | |
| } | |
| .road-grid { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| opacity: 0.45; | |
| background-image: | |
| linear-gradient(rgba(53, 242, 140, 0.08) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(84, 183, 255, 0.07) 1px, transparent 1px); | |
| background-size: 64px 64px; | |
| mask-image: linear-gradient(to bottom, black, transparent 78%); | |
| } | |
| .road-grid span { | |
| position: absolute; | |
| left: 50%; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, rgba(255, 209, 102, 0.5), transparent); | |
| transform: perspective(400px) rotateX(58deg) translateX(-50%); | |
| } | |
| .road-grid span:nth-child(2) { | |
| left: 22%; | |
| } | |
| .road-grid span:nth-child(3) { | |
| left: 78%; | |
| } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 18px clamp(18px, 4vw, 56px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| background: rgba(8, 12, 14, 0.82); | |
| backdrop-filter: blur(14px); | |
| } | |
| .brand, | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .brand { | |
| font-weight: 800; | |
| letter-spacing: 0.2px; | |
| } | |
| .brand-mark { | |
| display: inline-grid; | |
| width: 38px; | |
| height: 38px; | |
| place-items: center; | |
| border: 1px solid var(--green); | |
| border-radius: 8px; | |
| color: var(--green); | |
| box-shadow: 0 0 18px rgba(53, 242, 140, 0.24); | |
| font-family: "Courier New", monospace; | |
| } | |
| .nav a { | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| } | |
| .nav a:hover, | |
| .nav .nav-cta { | |
| color: var(--text); | |
| } | |
| .nav-cta { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 9px 12px; | |
| } | |
| main { | |
| position: relative; | |
| z-index: 1; | |
| width: min(1160px, calc(100% - 32px)); | |
| min-height: calc(100vh - 75px); | |
| margin: 0 auto; | |
| padding: 24px 0; | |
| scrollbar-width: none; | |
| } | |
| .home-page main { | |
| display: grid; | |
| grid-template-rows: minmax(0, 1fr) auto; | |
| height: calc(100vh - 75px); | |
| padding: 22px 0 18px; | |
| overflow: hidden; | |
| } | |
| .flash-stack { | |
| display: grid; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .flash { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| background: rgba(16, 25, 29, 0.9); | |
| color: var(--text); | |
| } | |
| .flash.danger { | |
| border-color: rgba(255, 91, 110, 0.55); | |
| } | |
| .flash.success { | |
| border-color: rgba(53, 242, 140, 0.55); | |
| } | |
| .hero { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); | |
| align-items: center; | |
| gap: clamp(28px, 5vw, 72px); | |
| min-height: calc(100vh - 170px); | |
| } | |
| .home-page .hero { | |
| min-height: 0; | |
| gap: clamp(22px, 4vw, 52px); | |
| } | |
| .home-page h1 { | |
| max-width: 720px; | |
| margin-bottom: 14px; | |
| font-size: clamp(2.2rem, 5.4vw, 4.7rem); | |
| } | |
| .home-page .lead { | |
| max-width: 660px; | |
| margin-bottom: 18px; | |
| font-size: 1rem; | |
| line-height: 1.55; | |
| } | |
| .eyebrow { | |
| margin: 0 0 12px; | |
| color: var(--green); | |
| font-family: "Courier New", monospace; | |
| font-size: 0.83rem; | |
| font-weight: 700; | |
| letter-spacing: 1.6px; | |
| text-transform: uppercase; | |
| } | |
| h1, | |
| h2, | |
| p { | |
| margin-top: 0; | |
| } | |
| h1 { | |
| max-width: 780px; | |
| margin-bottom: 18px; | |
| font-size: clamp(2.4rem, 7vw, 5.8rem); | |
| line-height: 0.96; | |
| letter-spacing: 0; | |
| } | |
| h2 { | |
| margin-bottom: 10px; | |
| } | |
| .lead, | |
| .panel-copy { | |
| color: var(--muted); | |
| font-size: 1.08rem; | |
| line-height: 1.7; | |
| } | |
| .hero-actions, | |
| .feedback-row, | |
| .section-heading, | |
| .dashboard-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .button, | |
| .feedback, | |
| .neon-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 0; | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| font-weight: 800; | |
| cursor: pointer; | |
| } | |
| .button.primary { | |
| background: var(--green); | |
| color: #04100a; | |
| } | |
| .button.secondary { | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--text); | |
| } | |
| .signal-panel, | |
| .tool-panel, | |
| .result-panel, | |
| .table-panel, | |
| .cyber-terminal, | |
| .stats-grid article, | |
| .history-card, | |
| .feature-band article { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--panel); | |
| box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); | |
| } | |
| .signal-head, | |
| .terminal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--muted); | |
| font-family: "Courier New", monospace; | |
| font-size: 0.8rem; | |
| } | |
| .dot, | |
| .term-btn { | |
| width: 11px; | |
| height: 11px; | |
| border-radius: 50%; | |
| } | |
| .red, | |
| .btn-red { | |
| background: var(--danger); | |
| } | |
| .amber, | |
| .btn-yellow { | |
| background: var(--amber); | |
| } | |
| .green, | |
| .btn-green { | |
| background: var(--green); | |
| } | |
| .signal-body { | |
| display: grid; | |
| gap: 14px; | |
| padding: 22px; | |
| } | |
| .home-page .signal-body { | |
| gap: 10px; | |
| padding: 16px; | |
| } | |
| .workflow-step { | |
| display: grid; | |
| grid-template-columns: 48px 1fr; | |
| gap: 14px; | |
| align-items: center; | |
| } | |
| .home-page .workflow-step { | |
| grid-template-columns: 40px 1fr; | |
| gap: 12px; | |
| } | |
| .workflow-step span { | |
| display: grid; | |
| height: 48px; | |
| place-items: center; | |
| border: 1px solid rgba(255, 209, 102, 0.45); | |
| border-radius: 8px; | |
| color: var(--amber); | |
| font-family: "Courier New", monospace; | |
| } | |
| .home-page .workflow-step span { | |
| height: 40px; | |
| } | |
| .workflow-step p, | |
| .feature-band p, | |
| .empty, | |
| small { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| .feature-band { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-top: -18px; | |
| } | |
| .home-page .feature-band { | |
| align-self: end; | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .feature-band article, | |
| .stats-grid article, | |
| .history-card { | |
| padding: 18px; | |
| } | |
| .home-page .feature-band article { | |
| padding: 14px; | |
| } | |
| .home-page .feature-band h2 { | |
| margin-bottom: 6px; | |
| font-size: 1rem; | |
| } | |
| .home-page .feature-band p { | |
| font-size: 0.9rem; | |
| line-height: 1.45; | |
| } | |
| .auth-shell { | |
| display: grid; | |
| min-height: calc(100vh - 170px); | |
| place-items: center; | |
| } | |
| .cyber-terminal { | |
| width: min(460px, 100%); | |
| overflow: hidden; | |
| } | |
| .terminal-buttons { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .terminal-title, | |
| .access-text, | |
| .matrix-signup { | |
| color: var(--green); | |
| font-family: "Courier New", monospace; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .cyber-content { | |
| padding: 32px; | |
| } | |
| .neon-header { | |
| text-align: center; | |
| } | |
| .cyber-logo { | |
| position: relative; | |
| display: grid; | |
| width: 78px; | |
| height: 78px; | |
| margin: 0 auto 20px; | |
| place-items: center; | |
| } | |
| .logo-frame { | |
| position: relative; | |
| display: grid; | |
| width: 58px; | |
| height: 58px; | |
| place-items: center; | |
| overflow: hidden; | |
| border: 2px solid var(--green); | |
| border-radius: 8px; | |
| color: var(--green); | |
| font-weight: 900; | |
| box-shadow: 0 0 18px rgba(53, 242, 140, 0.28); | |
| } | |
| .logo-scanner { | |
| position: absolute; | |
| inset: 0; | |
| transform: translateX(-100%); | |
| background: linear-gradient(90deg, transparent, rgba(53, 242, 140, 0.5), transparent); | |
| animation: scan 2.8s linear infinite; | |
| } | |
| .neon-glow { | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 50%; | |
| background: rgba(53, 242, 140, 0.14); | |
| filter: blur(16px); | |
| } | |
| @keyframes scan { | |
| to { | |
| transform: translateX(100%); | |
| } | |
| } | |
| .cyber-title { | |
| font-size: 2rem; | |
| line-height: 1.05; | |
| } | |
| .neon-form { | |
| display: grid; | |
| gap: 16px; | |
| margin-top: 28px; | |
| } | |
| .cyber-field { | |
| display: grid; | |
| gap: 8px; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .cyber-field input, | |
| .upload-box, | |
| .link-field input, | |
| table { | |
| width: 100%; | |
| } | |
| .cyber-field input, | |
| .upload-box, | |
| .link-field input { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 14px; | |
| background: rgba(0, 0, 0, 0.35); | |
| color: var(--text); | |
| } | |
| .neon-button { | |
| margin-top: 8px; | |
| border: 2px solid var(--green); | |
| background: rgba(53, 242, 140, 0.08); | |
| color: var(--green); | |
| font-family: "Courier New", monospace; | |
| letter-spacing: 1px; | |
| } | |
| .matrix-signup { | |
| margin-top: 22px; | |
| text-align: center; | |
| font-size: 0.78rem; | |
| } | |
| .matrix-signup a { | |
| color: var(--pink); | |
| font-weight: 900; | |
| } | |
| .page-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 380px; | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| .tool-panel, | |
| .result-panel { | |
| padding: 24px; | |
| } | |
| .tool-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 8px; | |
| } | |
| .tool-panel h1, | |
| .dashboard-head h1 { | |
| font-size: clamp(2rem, 5vw, 3.8rem); | |
| } | |
| .tool-panel h1 { | |
| margin-bottom: 0; | |
| } | |
| .model-warning { | |
| margin: 18px 0; | |
| border: 1px solid rgba(255, 209, 102, 0.48); | |
| border-radius: 8px; | |
| padding: 12px; | |
| background: rgba(255, 209, 102, 0.08); | |
| color: var(--amber); | |
| } | |
| .upload-form { | |
| display: grid; | |
| gap: 12px; | |
| max-width: 520px; | |
| } | |
| .upload-box, | |
| .link-field { | |
| display: grid; | |
| gap: 10px; | |
| color: var(--muted); | |
| } | |
| .upload-box span, | |
| .link-field span, | |
| .preview-card span { | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .upload-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| } | |
| .upload-divider::before, | |
| .upload-divider::after { | |
| content: ""; | |
| flex: 1; | |
| height: 1px; | |
| background: rgba(255, 255, 255, 0.12); | |
| } | |
| .preview-card { | |
| display: grid; | |
| gap: 10px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 12px; | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--muted); | |
| } | |
| .preview-card[hidden] { | |
| display: none; | |
| } | |
| .preview-card img { | |
| width: 100%; | |
| max-height: 210px; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: rgba(0, 0, 0, 0.24); | |
| } | |
| .result-image { | |
| width: 100%; | |
| max-height: 240px; | |
| object-fit: contain; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .prediction-result { | |
| display: grid; | |
| gap: 8px; | |
| margin: 16px 0; | |
| } | |
| .prediction-result span, | |
| .stats-grid span { | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| text-transform: uppercase; | |
| } | |
| .prediction-result strong { | |
| font-size: 1.35rem; | |
| } | |
| .feedback { | |
| min-width: 78px; | |
| color: #07100c; | |
| } | |
| .feedback.true { | |
| background: var(--green); | |
| } | |
| .feedback.false { | |
| background: var(--pink); | |
| color: white; | |
| } | |
| .history-strip, | |
| .table-panel, | |
| .stats-grid { | |
| margin-top: 16px; | |
| } | |
| .section-heading { | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| } | |
| .section-heading h2 { | |
| margin-bottom: 0; | |
| } | |
| .dashboard-link { | |
| align-self: center; | |
| white-space: nowrap; | |
| } | |
| .history-grid { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 12px; | |
| } | |
| .history-card { | |
| display: grid; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .history-card img { | |
| width: 100%; | |
| aspect-ratio: 1 / 1; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .history-card strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .dashboard-head { | |
| justify-content: space-between; | |
| } | |
| .dashboard-head h1 { | |
| margin-bottom: 8px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 12px; | |
| } | |
| .stats-grid strong { | |
| display: block; | |
| margin-top: 6px; | |
| font-size: 1.7rem; | |
| } | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .chart-panel { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 16px; | |
| background: var(--panel); | |
| box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); | |
| } | |
| .chart-heading, | |
| .bar-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .chart-heading { | |
| margin-bottom: 14px; | |
| } | |
| .chart-heading h2 { | |
| margin-bottom: 0; | |
| } | |
| .chart-heading span, | |
| .bar-meta span { | |
| color: var(--muted); | |
| } | |
| .bar-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .bar-row { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .bar-meta span { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .bar-meta strong { | |
| color: var(--text); | |
| } | |
| .bar-track { | |
| height: 12px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .bar-fill { | |
| display: block; | |
| height: 100%; | |
| min-width: 4px; | |
| border-radius: inherit; | |
| } | |
| .class-fill { | |
| background: linear-gradient(90deg, var(--green), var(--blue)); | |
| } | |
| .fill-1 { | |
| background: var(--green); | |
| } | |
| .fill-2 { | |
| background: var(--pink); | |
| } | |
| .fill-3 { | |
| background: var(--amber); | |
| } | |
| .table-panel { | |
| max-height: clamp(180px, 28vh, 320px); | |
| overflow: auto; | |
| scrollbar-width: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| min-width: 760px; | |
| } | |
| th, | |
| td { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| text-align: left; | |
| } | |
| th { | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| } | |
| .thumb { | |
| width: 58px; | |
| height: 58px; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .status { | |
| display: inline-flex; | |
| border-radius: 8px; | |
| padding: 6px 9px; | |
| font-size: 0.78rem; | |
| font-weight: 900; | |
| } | |
| .status.true { | |
| background: rgba(53, 242, 140, 0.14); | |
| color: var(--green); | |
| } | |
| .status.false { | |
| background: rgba(255, 79, 154, 0.16); | |
| color: #ff9bc2; | |
| } | |
| .status.pending { | |
| background: rgba(255, 209, 102, 0.14); | |
| color: var(--amber); | |
| } | |
| .compact { | |
| gap: 8px; | |
| } | |
| .compact .feedback { | |
| min-width: 58px; | |
| padding: 8px 10px; | |
| } | |
| @media (max-width: 860px) { | |
| body.home-page { | |
| height: auto; | |
| overflow: auto; | |
| } | |
| .home-page main { | |
| display: block; | |
| height: auto; | |
| overflow: visible; | |
| padding: 32px 0 48px; | |
| } | |
| main { | |
| min-height: calc(100vh - 117px); | |
| padding: 18px 0; | |
| } | |
| .hero, | |
| .page-grid, | |
| .feature-band, | |
| .stats-grid, | |
| .charts-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .history-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .tool-header, | |
| .dashboard-head { | |
| align-items: stretch; | |
| flex-direction: column; | |
| } | |
| .dashboard-link, | |
| .dashboard-head .button { | |
| width: 100%; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 620px) { | |
| .topbar { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| .nav { | |
| width: 100%; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .history-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .cyber-content, | |
| .tool-panel, | |
| .result-panel { | |
| padding: 16px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .stats-grid article:last-child { | |
| grid-column: 1 / -1; | |
| } | |
| .charts-grid { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .chart-heading, | |
| .bar-meta { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| } | |