| :root {
|
| --bg: #07131d;
|
| --bg-2: #0d2030;
|
| --panel: rgba(10, 24, 36, 0.82);
|
| --panel-strong: rgba(8, 18, 28, 0.94);
|
| --line: rgba(151, 204, 213, 0.18);
|
| --text: #eef6f6;
|
| --muted: #9ab7bd;
|
| --primary: #2ed3ad;
|
| --primary-deep: #109a88;
|
| --secondary: #ffb648;
|
| --danger: #ff6f61;
|
| --shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
|
| --radius-lg: 28px;
|
| --radius-md: 20px;
|
| --radius-sm: 14px;
|
| --font-display: "Space Grotesk", sans-serif;
|
| --font-body: "Noto Sans SC", sans-serif;
|
| }
|
|
|
| * {
|
| box-sizing: border-box;
|
| }
|
|
|
| html {
|
| scroll-behavior: smooth;
|
| }
|
|
|
| body {
|
| margin: 0;
|
| min-height: 100vh;
|
| font-family: var(--font-body);
|
| color: var(--text);
|
| background:
|
| radial-gradient(circle at top left, rgba(20, 110, 116, 0.34), transparent 34%),
|
| radial-gradient(circle at top right, rgba(255, 182, 72, 0.16), transparent 28%),
|
| linear-gradient(135deg, #041019 0%, #07131d 36%, #0d2030 100%);
|
| }
|
|
|
| button,
|
| input,
|
| select {
|
| font: inherit;
|
| }
|
|
|
| code {
|
| padding: 0.15rem 0.45rem;
|
| border-radius: 999px;
|
| background: rgba(255, 255, 255, 0.08);
|
| color: #fff5dd;
|
| }
|
|
|
| .app-body {
|
| position: relative;
|
| overflow-x: hidden;
|
| }
|
|
|
| .bg-orb {
|
| position: fixed;
|
| width: 28rem;
|
| height: 28rem;
|
| border-radius: 50%;
|
| filter: blur(20px);
|
| opacity: 0.42;
|
| pointer-events: none;
|
| animation: drift 14s ease-in-out infinite;
|
| }
|
|
|
| .bg-orb-a {
|
| top: -10rem;
|
| left: -6rem;
|
| background: radial-gradient(circle, rgba(46, 211, 173, 0.48), transparent 68%);
|
| }
|
|
|
| .bg-orb-b {
|
| right: -8rem;
|
| bottom: -10rem;
|
| background: radial-gradient(circle, rgba(255, 182, 72, 0.32), transparent 68%);
|
| animation-delay: -6s;
|
| }
|
|
|
| .bg-grid {
|
| position: fixed;
|
| inset: 0;
|
| background-image:
|
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
| background-size: 42px 42px;
|
| mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
|
| pointer-events: none;
|
| }
|
|
|
| .page-shell {
|
| position: relative;
|
| z-index: 1;
|
| width: min(1240px, calc(100% - 2rem));
|
| margin: 0 auto;
|
| padding: 2rem 0 3rem;
|
| }
|
|
|
| .flash-stack {
|
| display: grid;
|
| gap: 0.75rem;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .flash {
|
| border: 1px solid rgba(255, 255, 255, 0.12);
|
| border-radius: var(--radius-sm);
|
| padding: 0.9rem 1rem;
|
| backdrop-filter: blur(10px);
|
| box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
|
| }
|
|
|
| .flash-success {
|
| background: rgba(46, 211, 173, 0.16);
|
| }
|
|
|
| .flash-warning {
|
| background: rgba(255, 182, 72, 0.16);
|
| }
|
|
|
| .flash-danger {
|
| background: rgba(255, 111, 97, 0.16);
|
| }
|
|
|
| .auth-layout,
|
| .dashboard-shell {
|
| display: grid;
|
| gap: 1.4rem;
|
| }
|
|
|
| .auth-layout {
|
| min-height: calc(100vh - 7rem);
|
| align-items: center;
|
| grid-template-columns: 1.15fr 0.9fr;
|
| }
|
|
|
| .hero-panel,
|
| .auth-card,
|
| .card,
|
| .metric-card,
|
| .user-card,
|
| .empty-state-card {
|
| position: relative;
|
| border: 1px solid var(--line);
|
| border-radius: var(--radius-lg);
|
| background: var(--panel);
|
| backdrop-filter: blur(18px);
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .hero-panel,
|
| .auth-card,
|
| .card,
|
| .empty-state-card {
|
| padding: 1.7rem;
|
| }
|
|
|
| .hero-panel {
|
| overflow: hidden;
|
| }
|
|
|
| .hero-panel::after,
|
| .card::after,
|
| .auth-card::after {
|
| content: "";
|
| position: absolute;
|
| inset: 0;
|
| border-radius: inherit;
|
| background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.05));
|
| pointer-events: none;
|
| }
|
|
|
| .eyebrow,
|
| .kicker {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 0.5rem;
|
| font-family: var(--font-display);
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| font-size: 0.75rem;
|
| color: #9fe8da;
|
| }
|
|
|
| .hero-panel h1,
|
| .topbar h1,
|
| .card-head h2,
|
| .auth-card h2 {
|
| margin: 0.5rem 0 0;
|
| font-family: var(--font-display);
|
| line-height: 1.05;
|
| }
|
|
|
| .hero-panel h1 {
|
| max-width: 13ch;
|
| font-size: clamp(2.8rem, 6vw, 5rem);
|
| }
|
|
|
| .hero-panel p,
|
| .card-head p,
|
| .topbar p,
|
| .auth-card p,
|
| .metric-card small,
|
| .auth-footnote {
|
| color: var(--muted);
|
| line-height: 1.7;
|
| }
|
|
|
| .hero-metrics {
|
| display: grid;
|
| grid-template-columns: repeat(3, minmax(0, 1fr));
|
| gap: 1rem;
|
| margin-top: 2rem;
|
| }
|
|
|
| .hero-metrics article {
|
| padding: 1rem;
|
| border-radius: var(--radius-md);
|
| background: rgba(255, 255, 255, 0.05);
|
| border: 1px solid rgba(255, 255, 255, 0.08);
|
| }
|
|
|
| .hero-metrics strong,
|
| .metric-card strong {
|
| display: block;
|
| font-family: var(--font-display);
|
| font-size: 1.2rem;
|
| margin-bottom: 0.25rem;
|
| }
|
|
|
| .auth-card {
|
| max-width: 520px;
|
| justify-self: end;
|
| }
|
|
|
| .card-head {
|
| display: grid;
|
| gap: 0.35rem;
|
| margin-bottom: 1.2rem;
|
| }
|
|
|
| .card-head.compact {
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .card-head.split,
|
| .topbar {
|
| display: flex;
|
| align-items: flex-start;
|
| justify-content: space-between;
|
| gap: 1rem;
|
| }
|
|
|
| .form-grid {
|
| display: grid;
|
| gap: 1rem;
|
| }
|
|
|
| .form-grid-compact {
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| }
|
|
|
| .slim-form {
|
| margin-top: 1rem;
|
| }
|
|
|
| .field {
|
| display: grid;
|
| gap: 0.45rem;
|
| }
|
|
|
| .field span {
|
| color: #d4ece6;
|
| font-size: 0.92rem;
|
| }
|
|
|
| .field input,
|
| .field select {
|
| width: 100%;
|
| border: 1px solid rgba(255, 255, 255, 0.08);
|
| border-radius: 16px;
|
| padding: 0.95rem 1rem;
|
| background: rgba(5, 14, 22, 0.66);
|
| color: var(--text);
|
| outline: none;
|
| transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
|
| }
|
|
|
| .field input:focus, |
| .field select:focus { |
| border-color: rgba(46, 211, 173, 0.85); |
| box-shadow: 0 0 0 4px rgba(46, 211, 173, 0.12); |
| transform: translateY(-1px); |
| } |
|
|
| .checkbox-line { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.55rem; |
| min-height: 3.1rem; |
| padding: 0.75rem 0; |
| } |
|
|
| .checkbox-line input[type="checkbox"] { |
| width: 1.05rem; |
| height: 1.05rem; |
| padding: 0; |
| accent-color: var(--accent); |
| } |
|
|
| .checkbox-line span { |
| color: var(--text); |
| } |
|
|
| .span-2 { |
| grid-column: span 2; |
| } |
|
|
| .btn {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 0.55rem;
|
| min-height: 48px;
|
| border: 0;
|
| border-radius: 999px;
|
| padding: 0 1.2rem;
|
| cursor: pointer;
|
| transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
|
| text-decoration: none;
|
| }
|
|
|
| .btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, var(--primary) 0%, #4be9c3 100%);
|
| color: #052119;
|
| font-weight: 800;
|
| }
|
|
|
| .btn-secondary {
|
| background: linear-gradient(135deg, var(--secondary) 0%, #ffd07a 100%);
|
| color: #24160a;
|
| font-weight: 800;
|
| }
|
|
|
| .btn-ghost {
|
| background: rgba(255, 255, 255, 0.06);
|
| color: var(--text);
|
| border: 1px solid rgba(255, 255, 255, 0.09);
|
| }
|
|
|
| .btn-ghost.danger {
|
| color: #ffd0ca;
|
| border-color: rgba(255, 111, 97, 0.34);
|
| }
|
|
|
| .btn-lg {
|
| min-height: 54px;
|
| }
|
|
|
| .auth-footnote {
|
| margin-top: 1rem;
|
| padding-top: 1rem;
|
| border-top: 1px solid rgba(255, 255, 255, 0.08);
|
| }
|
|
|
| .topbar {
|
| padding: 1rem 0 0.3rem;
|
| }
|
|
|
| .admin-nav {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 0.75rem;
|
| }
|
|
|
| .admin-nav-link {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| min-height: 44px;
|
| padding: 0 1rem;
|
| border-radius: 999px;
|
| border: 1px solid rgba(255, 255, 255, 0.08);
|
| background: rgba(255, 255, 255, 0.04);
|
| color: var(--muted);
|
| text-decoration: none;
|
| transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
|
| }
|
|
|
| .admin-nav-link:hover {
|
| transform: translateY(-1px);
|
| color: var(--text);
|
| border-color: rgba(255, 255, 255, 0.16);
|
| }
|
|
|
| .admin-nav-link.active {
|
| background: rgba(46, 211, 173, 0.14);
|
| color: #96f2dd;
|
| border-color: rgba(46, 211, 173, 0.32);
|
| }
|
|
|
| .metric-grid {
|
| display: grid;
|
| grid-template-columns: repeat(4, minmax(0, 1fr));
|
| gap: 1rem;
|
| }
|
|
|
| .metric-card {
|
| padding: 1.25rem;
|
| }
|
|
|
| .metric-card span {
|
| color: var(--muted);
|
| font-size: 0.92rem;
|
| }
|
|
|
| .metric-card strong {
|
| font-size: clamp(1.4rem, 4vw, 2.2rem);
|
| margin: 0.35rem 0;
|
| }
|
|
|
| .content-grid {
|
| display: grid;
|
| gap: 1rem;
|
| }
|
|
|
| .dashboard-grid {
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| }
|
|
|
| .admin-grid {
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| }
|
|
|
| .status-strip,
|
| .button-row,
|
| .chip-row,
|
| .course-chip-row {
|
| display: flex;
|
| align-items: center;
|
| gap: 0.7rem;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .wrap-row {
|
| margin-top: 1rem;
|
| }
|
|
|
| .compact-row {
|
| margin-top: 0.9rem;
|
| }
|
|
|
| .status-strip {
|
| margin-bottom: 1rem;
|
| color: var(--muted);
|
| }
|
|
|
| .status-pill,
|
| .chip,
|
| .live-dot {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| border-radius: 999px;
|
| padding: 0.45rem 0.9rem;
|
| font-size: 0.84rem;
|
| border: 1px solid rgba(255, 255, 255, 0.1);
|
| }
|
|
|
| .status-idle,
|
| .chip {
|
| background: rgba(255, 255, 255, 0.05);
|
| }
|
|
|
| .status-running,
|
| .status-completed,
|
| .highlight,
|
| .live-dot {
|
| background: rgba(46, 211, 173, 0.14);
|
| color: #96f2dd;
|
| }
|
|
|
| .status-pending,
|
| .status-cancel_requested {
|
| background: rgba(255, 182, 72, 0.14);
|
| color: #ffd48d;
|
| }
|
|
|
| .status-stopped, |
| .status-failed, |
| .danger { |
| background: rgba(255, 111, 97, 0.14); |
| color: #ffcec7; |
| } |
|
|
| .status-waiting_2fa { |
| background: rgba(94, 179, 255, 0.16); |
| color: #b8dcff; |
| } |
|
|
| .live-dot { |
| position: relative; |
| gap: 0.4rem; |
| font-family: var(--font-display); |
| letter-spacing: 0.08em; |
| }
|
|
|
| .live-dot::before {
|
| content: "";
|
| width: 8px;
|
| height: 8px;
|
| border-radius: 50%;
|
| background: currentColor;
|
| box-shadow: 0 0 0 0 rgba(150, 242, 221, 0.65);
|
| animation: pulse 2.1s infinite;
|
| }
|
|
|
| .course-table-wrap {
|
| overflow-x: auto;
|
| }
|
|
|
| .data-table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| }
|
|
|
| .data-table th,
|
| .data-table td {
|
| text-align: left;
|
| padding: 0.95rem 0.85rem;
|
| border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
| }
|
|
|
| .data-table th {
|
| color: #b8d4d4;
|
| font-size: 0.9rem;
|
| }
|
|
|
| .inline-action {
|
| border: 0;
|
| background: transparent;
|
| color: #ffd0ca;
|
| cursor: pointer;
|
| padding: 0;
|
| }
|
|
|
| .empty-cell, |
| .empty-mini, |
| .empty-state-card { |
| color: var(--muted); |
| } |
|
|
| .login-2fa-panel, |
| .login-2fa-admin-panel { |
| margin: 1rem 0; |
| padding: 1rem; |
| border-radius: 18px; |
| border: 1px solid rgba(94, 179, 255, 0.28); |
| background: rgba(24, 59, 89, 0.24); |
| } |
|
|
| .login-2fa-panel h3 { |
| margin: 0.2rem 0 0.35rem; |
| font-size: 1.05rem; |
| } |
|
|
| .login-2fa-panel p, |
| .login-2fa-admin-panel p { |
| margin: 0; |
| color: var(--muted); |
| } |
|
|
| .login-2fa-form { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 0.75rem; |
| margin-top: 0.85rem; |
| } |
|
|
| .login-2fa-form input { |
| width: 100%; |
| min-height: 44px; |
| border-radius: 14px; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| background: rgba(255, 255, 255, 0.08); |
| color: var(--text); |
| padding: 0 0.9rem; |
| font-size: 1rem; |
| } |
|
|
| .login-2fa-form input::placeholder { |
| color: rgba(216, 236, 233, 0.52); |
| } |
|
|
| .form-message { |
| min-height: 1.2rem; |
| margin-top: 0.65rem !important; |
| font-size: 0.9rem; |
| } |
|
|
| .login-2fa-list { |
| display: grid; |
| gap: 0.9rem; |
| } |
|
|
| .login-2fa-item { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); |
| gap: 1rem; |
| align-items: end; |
| padding: 1rem; |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.055); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| } |
|
|
| .login-2fa-item h3 { |
| margin: 0 0 0.35rem; |
| font-size: 1.02rem; |
| } |
|
|
| .login-2fa-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.45rem; |
| margin-top: 0.7rem; |
| } |
|
|
| .log-console { |
| min-height: 360px; |
| max-height: 540px; |
| overflow: auto; |
| padding: 1rem;
|
| border-radius: 22px;
|
| background: rgba(4, 10, 16, 0.92);
|
| border: 1px solid rgba(255, 255, 255, 0.06);
|
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
| }
|
|
|
| .log-line {
|
| display: grid;
|
| gap: 0.25rem;
|
| padding: 0.8rem 0;
|
| border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
|
| font-size: 0.92rem;
|
| }
|
|
|
| .log-line:last-child {
|
| border-bottom: 0;
|
| }
|
|
|
| .log-meta {
|
| color: #7ea4aa;
|
| font-size: 0.78rem;
|
| }
|
|
|
| .level-error {
|
| color: #ffb5ac;
|
| }
|
|
|
| .level-warning {
|
| color: #ffd59a;
|
| }
|
|
|
| .level-info {
|
| color: #d8ece9;
|
| }
|
|
|
| .level-success {
|
| color: #97f4dd;
|
| }
|
|
|
| .muted {
|
| color: var(--muted);
|
| }
|
|
|
| .user-card-grid {
|
| display: grid;
|
| gap: 1rem;
|
| }
|
|
|
| .user-card {
|
| padding: 1.25rem;
|
| scroll-margin-top: 1.5rem;
|
| }
|
|
|
| .subsection-head {
|
| margin-top: 1rem;
|
| padding-top: 1rem;
|
| border-top: 1px solid rgba(255, 255, 255, 0.08);
|
| }
|
|
|
| .subsection-head h3 {
|
| margin: 0.25rem 0 0;
|
| font-size: 1.05rem;
|
| }
|
|
|
| .subsection-head p {
|
| margin: 0.4rem 0 0;
|
| }
|
|
|
| .schedule-form {
|
| margin-top: 0.9rem;
|
| }
|
|
|
| .user-card-head {
|
| display: flex;
|
| align-items: flex-start;
|
| justify-content: space-between;
|
| gap: 1rem;
|
| }
|
|
|
| .user-card h3 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| }
|
|
|
| .user-card p {
|
| margin: 0.35rem 0 0;
|
| color: var(--muted);
|
| }
|
|
|
| .course-list {
|
| display: grid;
|
| gap: 0.65rem;
|
| margin-top: 1rem;
|
| }
|
|
|
| .course-chip-row {
|
| justify-content: space-between;
|
| padding: 0.8rem 0.95rem;
|
| border-radius: 16px;
|
| background: rgba(255, 255, 255, 0.05);
|
| }
|
|
|
| .chip-row.tight {
|
| margin-top: 0.85rem;
|
| }
|
|
|
| .accent-amber {
|
| box-shadow: 0 24px 70px rgba(255, 182, 72, 0.16);
|
| }
|
|
|
| .reveal-up {
|
| opacity: 0;
|
| transform: translateY(22px);
|
| animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .delay-1 {
|
| animation-delay: 0.08s;
|
| }
|
|
|
| .delay-2 {
|
| animation-delay: 0.16s;
|
| }
|
|
|
| .delay-3 {
|
| animation-delay: 0.24s;
|
| }
|
|
|
| .delay-4 {
|
| animation-delay: 0.32s;
|
| }
|
|
|
| @keyframes revealUp {
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
| @keyframes drift {
|
| 0%,
|
| 100% {
|
| transform: translate3d(0, 0, 0) scale(1);
|
| }
|
| 50% {
|
| transform: translate3d(16px, -18px, 0) scale(1.05);
|
| }
|
| }
|
|
|
| @keyframes pulse {
|
| 0% {
|
| box-shadow: 0 0 0 0 rgba(150, 242, 221, 0.65);
|
| }
|
| 70% {
|
| box-shadow: 0 0 0 14px rgba(150, 242, 221, 0);
|
| }
|
| 100% {
|
| box-shadow: 0 0 0 0 rgba(150, 242, 221, 0);
|
| }
|
| }
|
|
|
| @media (max-width: 1100px) {
|
| .auth-layout,
|
| .dashboard-grid,
|
| .admin-grid,
|
| .metric-grid,
|
| .hero-metrics {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .auth-card {
|
| justify-self: stretch;
|
| max-width: none;
|
| }
|
|
|
| .span-2 {
|
| grid-column: auto;
|
| }
|
| }
|
|
|
| @media (max-width: 760px) {
|
| .page-shell {
|
| width: min(100% - 1rem, 100%);
|
| padding-top: 1rem;
|
| padding-bottom: 2rem;
|
| }
|
|
|
| .hero-panel,
|
| .auth-card,
|
| .card,
|
| .user-card,
|
| .empty-state-card {
|
| padding: 1.2rem;
|
| border-radius: 22px;
|
| }
|
|
|
| .card-head.split,
|
| .topbar,
|
| .user-card-head {
|
| flex-direction: column;
|
| }
|
|
|
| .form-grid-compact { |
| grid-template-columns: 1fr; |
| } |
|
|
| .login-2fa-form, |
| .login-2fa-item { |
| grid-template-columns: 1fr; |
| } |
|
|
| .button-row form, |
| .button-row .btn, |
| .btn { |
| width: 100%;
|
| }
|
|
|
| .button-row {
|
| width: 100%;
|
| }
|
|
|
| .log-console {
|
| min-height: 280px;
|
| }
|
| }
|
|
|
