/* Page Layout */ .page { max-width: 1400px; margin: 0 auto; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; font-weight: 700; } .header-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); } .header-count { font-size: 0.875rem; color: var(--text-muted); background: var(--bg-card); padding: 0.375rem 0.75rem; border-radius: 9999px; } /* Stats Grid */ .stats-grid { margin-bottom: 2rem; } .stat-card { text-align: center; } .stat-label { font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .stat-value { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; } .stat-value.hashrate { color: var(--accent-cyan); } .stat-value.accepted { color: var(--accent-green); } .stat-sub { font-size: 0.75rem; color: var(--text-muted); } /* Section */ .section { margin-bottom: 2rem; } .section h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; } /* Agent Grid */ .agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .agent-card { transition: border-color 0.2s ease; } .agent-card:hover { border-color: var(--accent-blue); } .agent-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .agent-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .agent-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; } .agent-stat { display: flex; flex-direction: column; } .agent-stat-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .agent-stat-value { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .agent-card-footer { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); } .agent-meta { font-family: 'SF Mono', 'Fira Code', monospace; } /* Shares Table */ .shares-table { width: 100%; border-collapse: collapse; } .shares-table th { text-align: left; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); } .shares-table td { padding: 0.5rem 0.75rem; font-size: 0.8125rem; border-bottom: 1px solid var(--border-color); } .shares-table tr:last-child td { border-bottom: none; } .time-cell { font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-muted); font-size: 0.75rem; } .hash-cell { font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-secondary); font-size: 0.75rem; } .empty-table { text-align: center; color: var(--text-muted); padding: 2rem !important; } /* Empty State */ .empty-state { text-align: center; padding: 3rem 2rem; } .empty-icon { font-size: 3rem; margin-bottom: 1rem; } .empty-state h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } .empty-state p { color: var(--text-muted); font-size: 0.875rem; } /* Agents Page */ .agents-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 1024px) { .agents-layout { grid-template-columns: 1fr; } } .agents-list { display: flex; flex-direction: column; gap: 0.75rem; } .agent-list-item { cursor: pointer; transition: all 0.25s ease; padding: 1rem !important; } .agent-list-item:hover { border-color: var(--neon-cyan); box-shadow: 0 0 16px rgba(0, 245, 255, 0.12); } .agent-list-item.selected { border-color: var(--neon-cyan); background: rgba(0, 245, 255, 0.06); box-shadow: inset 0 0 24px rgba(0, 245, 255, 0.08), 0 0 20px rgba(0, 245, 255, 0.15); } .header-count { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--neon-cyan); padding: 0.5rem 1rem; border: 1px solid var(--border-brass); background: rgba(8, 6, 4, 0.8); } .agent-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .agent-list-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .agent-list-details { display: flex; gap: 1rem; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; } .agent-list-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-muted); font-family: 'SF Mono', 'Fira Code', monospace; } /* Agent Detail */ .agent-detail h2 { font-size: 1.25rem; margin-bottom: 1rem; } .agent-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .detail-value { font-size: 0.875rem; font-weight: 500; } .detail-value.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; } .detail-section { margin-bottom: 1.5rem; } .detail-section h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-secondary); } .hashrate-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .hashrate-item { text-align: center; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; } .hashrate-value { font-size: 1.125rem; font-weight: 700; color: var(--accent-cyan); } .shares-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .share-stat { text-align: center; padding: 0.75rem; border-radius: 8px; } .share-stat.good { background: rgba(34, 197, 94, 0.1); } .share-stat.bad { background: rgba(239, 68, 68, 0.1); } .share-stat.total { background: var(--bg-secondary); } .share-count { display: block; font-size: 1.5rem; font-weight: 700; } .share-stat.good .share-count { color: var(--accent-green); } .share-stat.bad .share-count { color: var(--accent-red); } .share-stat.total .share-count { color: var(--text-primary); } .share-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Hashrate Chart */ .hashrate-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 0.5rem 0; } .chart-bar { flex: 1; background: linear-gradient(to top, var(--accent-blue), var(--accent-cyan)); border-radius: 2px 2px 0 0; min-width: 4px; transition: height 0.3s ease; cursor: pointer; opacity: 0.8; } .chart-bar:hover { opacity: 1; } /* Builder Page */ .builder-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; } @media (max-width: 1024px) { .builder-layout { grid-template-columns: 1fr; } } .builder-form h2 { font-size: 1.25rem; margin-bottom: 0.5rem; } .form-description { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5; } .form-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .form-section:last-of-type { border-bottom: none; } .form-section h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-hint { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } .checkbox-group { margin-bottom: 0.75rem; } .checkbox-label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; cursor: pointer; color: var(--text-primary); } .form-error { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; color: var(--accent-red); font-size: 0.875rem; margin-bottom: 1rem; } .build-btn { width: 100%; justify-content: center; padding: 0.875rem; font-size: 1rem; } /* Recent Builds */ .recent-builds { position: sticky; top: 1.5rem; } .recent-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .recent-header h2 { font-size: 1rem; } .empty-text { color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 2rem; } .builds-list { display: flex; flex-direction: column; gap: 0.75rem; } .build-item { padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; } .build-item-name { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; } .build-item-details { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } /* Settings Page */ .settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .settings-grid { grid-template-columns: 1fr; } } .settings-section h2 { font-size: 1.125rem; margin-bottom: 0.25rem; } .section-desc { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.25rem; } .save-message { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem; } .save-message.success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--accent-green); } .save-message.error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--accent-red); } .input.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.8125rem; } .build-success { display: flex; flex-direction: column; gap: 0.75rem; } .path-display { display: block; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; word-break: break-all; color: var(--accent-cyan); } .path-display.small { margin-top: 0.5rem; margin-bottom: 0.5rem; } .page-subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; } .chart-row { margin-bottom: 1.5rem; } .chart-wrap { width: 100%; } .chart-title { font-size: 0.9375rem; margin-bottom: 0.75rem; color: var(--text-secondary); } .chart-empty { min-height: 260px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .builder-layout-wide { grid-template-columns: 320px 1fr; } .preflight-panel { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--border-dim); } .preflight-panel h3 { margin: 0 0 0.75rem; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--neon-amber); } .preflight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .preflight-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.35; } .preflight-icon { flex-shrink: 0; width: 1.25rem; font-weight: 700; } .preflight-ok { color: var(--neon-green); } .preflight-warn { color: var(--neon-amber); } .preflight-error { color: var(--accent-red, #f87171); } .forge-submit-btn { width: 100%; margin-top: 1rem; padding: 0.9rem 1.5rem; font-size: 1rem; letter-spacing: 0.08em; } .endpoint-group { padding: 0.75rem 0; } .endpoint-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .endpoint-input { font-size: 0.95rem; } .endpoint-hint { margin-top: 0.5rem; } .endpoint-picks { margin-top: 0.75rem; } .endpoint-picks-label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.4rem; } .endpoint-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .endpoint-chip { font-family: var(--font-mono, monospace); font-size: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 4px; border: 1px solid var(--border-dim); background: rgba(0, 0, 0, 0.25); color: var(--neon-cyan); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .endpoint-chip:hover { border-color: var(--neon-cyan); background: rgba(0, 212, 255, 0.08); } .endpoint-chip.active { border-color: var(--neon-amber); color: var(--neon-amber); background: rgba(255, 193, 7, 0.1); } .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; } @media (max-width: 1100px) { .builder-layout-wide { grid-template-columns: 1fr; } } .cheat-sheet-panel { align-self: start; position: sticky; top: 1rem; } .stat-card.accent-cyan { border-top: 3px solid var(--accent-cyan); } .stat-card.accent-green { border-top: 3px solid var(--accent-green); } .stat-card.accent-purple { border-top: 3px solid var(--accent-purple); } .stat-card.accent-yellow { border-top: 3px solid var(--accent-yellow); } .agent-card.detailed .agent-detail-lines { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1rem; } .agent-detail-lines div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(42, 58, 92, 0.5); } .agent-detail-lines span { color: var(--text-muted); } .agent-detail-lines strong { color: var(--text-primary); text-align: right; } .table-card { overflow-x: auto; } /* ═══ Steampunk Command Deck ═══ */ .command-deck { max-width: 1600px; } .deck-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-brass); position: relative; } .deck-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 120px; height: 2px; background: linear-gradient(90deg, var(--neon-cyan), transparent); box-shadow: 0 0 12px var(--neon-cyan); } .deck-eyebrow { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--brass); margin-bottom: 0.5rem; } .deck-hero h1 { font-size: 2.25rem; background: linear-gradient(180deg, var(--brass-light) 20%, var(--text-primary) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.35rem; } .deck-hero-status { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(12, 10, 8, 0.8); border: 1px solid var(--border-brass); border-radius: 2px; } .live-beacon { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .beacon-ring { position: absolute; inset: 0; border: 2px solid var(--text-muted); border-radius: 50%; opacity: 0.4; } .live-beacon.on .beacon-ring { border-color: var(--neon-green); animation: pulse-glow 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); } .beacon-core { width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); } .live-beacon.on .beacon-core { background: var(--neon-green); box-shadow: 0 0 12px var(--neon-green); } .live-label { display: block; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--neon-cyan); } .live-sub { font-size: 0.85rem; color: var(--text-muted); } .gauge-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .gauge-card { display: flex; align-items: center; justify-content: center; padding: 1.25rem !important; min-height: 140px; } .steampunk-stats .stat-card-wrap { text-align: center; padding: 1.25rem !important; } .steampunk-stats .stat-label { color: var(--brass-light); letter-spacing: 0.15em; } .steampunk-stats .stat-value { font-family: var(--font-tech); font-size: 1.85rem; } .stat-dim { font-size: 1rem; color: var(--text-muted); font-weight: 400; } .neon-glow-cyan { color: var(--neon-cyan) !important; text-shadow: 0 0 20px rgba(0, 245, 255, 0.5); } .neon-glow-purple { color: var(--neon-purple) !important; text-shadow: 0 0 20px rgba(178, 75, 243, 0.5); } .neon-glow-gold { color: var(--brass-light) !important; text-shadow: 0 0 20px rgba(232, 197, 71, 0.55); } .chart-row-full { margin-bottom: 2rem; } .section-title { display: flex; align-items: center; gap: 1rem; font-size: 1.25rem; color: var(--brass-light); margin-bottom: 1.25rem; } .section-ornament { color: var(--neon-cyan); font-size: 0.75rem; text-shadow: 0 0 8px var(--neon-cyan); } .section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-brass), transparent); } .machine-panel { animation: fadeInSteampunk 0.5s ease backwards; } .agent-hash-bar { height: 4px; background: rgba(201, 162, 39, 0.15); border-radius: 2px; margin: 0.75rem 0 1rem; overflow: hidden; } .agent-hash-fill { height: 100%; background: linear-gradient(90deg, var(--brass-dark), var(--neon-cyan)); box-shadow: 0 0 10px rgba(0, 245, 255, 0.4); transition: width 0.6s ease; border-radius: 2px; } .agent-detail-lines div { border-bottom-color: rgba(201, 162, 39, 0.15) !important; } .steampunk-table { width: 100%; border-collapse: collapse; } .steampunk-table th { font-family: var(--font-tech); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-brass); } .steampunk-table td { padding: 0.65rem 1rem; border-bottom: 1px solid rgba(201, 162, 39, 0.08); font-size: 0.9rem; } .steampunk-table tbody tr:hover { background: rgba(0, 245, 255, 0.04); } .mono-sm { font-family: var(--font-tech); font-size: 0.8rem; letter-spacing: 0.05em; } .empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem !important; } .empty-icon { font-size: 3rem; color: var(--brass); opacity: 0.6; margin-bottom: 1rem; animation: gear-spin 30s linear infinite; } .page-header h1 { font-family: var(--font-display); font-size: 1.75rem; color: var(--brass-light); } .page-subtitle { color: var(--text-secondary); font-size: 1rem; margin-top: 0.35rem; } @media (max-width: 1100px) { .gauge-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .deck-hero { flex-direction: column; align-items: flex-start; } .gauge-row { grid-template-columns: 1fr; } } /* ── Forge guardrails ── */ .forge-rules-banner { margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid rgba(212, 168, 75, 0.35); border-radius: 8px; background: rgba(212, 168, 75, 0.06); } .forge-rules-banner h3 { margin: 0 0 0.5rem; font-size: 0.95rem; } .forge-rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .forge-rule-card { padding: 0.65rem 0.85rem; border-radius: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8rem; line-height: 1.4; } .forge-rule-card strong { display: block; margin-bottom: 0.25rem; color: var(--neon-amber); } /* Inline input validation states */ .input.input-warn { border-color: var(--neon-amber, #fbbf24) !important; box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25); } .input.input-error { border-color: var(--neon-red, #ef4444) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25); } button.deliverable-card { text-align: left; cursor: pointer; width: 100%; color: inherit; font: inherit; transition: border-color 0.15s, background 0.15s; } button.deliverable-card:hover { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); } button.deliverable-card.deliverable-active { border-color: var(--neon-amber); background: rgba(251, 191, 36, 0.12); box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); } button.deliverable-card .form-hint { display: block; margin-top: 0.35rem; margin-bottom: 0; } .forge-live-notices { margin-bottom: 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--neon-amber); background: rgba(251, 191, 36, 0.08); border-radius: 0 6px 6px 0; } .forge-live-notices ul { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; } .forge-section-header { margin-bottom: 1rem; } .forge-section-title-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .forge-section-title-row h3 { margin: 0; } .forge-section-desc { margin: 0.35rem 0 0; } .forge-field-badge { display: inline-block; font-size: 0.65rem; font-family: var(--font-tech, monospace); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 4px; vertical-align: middle; white-space: nowrap; } .forge-badge-baked { color: #86efac; border: 1px solid rgba(134, 239, 172, 0.35); background: rgba(34, 197, 94, 0.1); } .forge-badge-server-only { color: #93c5fd; border: 1px solid rgba(147, 197, 253, 0.35); background: rgba(59, 130, 246, 0.1); } .forge-badge-requires { color: #fcd34d; border: 1px solid rgba(252, 211, 77, 0.35); background: rgba(251, 191, 36, 0.08); } .forge-locked-hint { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--neon-amber); line-height: 1.35; } .form-group.field-disabled label { opacity: 0.65; } .form-group.field-disabled .input, .form-group.field-disabled .select { opacity: 0.55; cursor: not-allowed; } .label-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .forge-forge-blocked { margin-top: 0.75rem; padding: 0.65rem 0.85rem; font-size: 0.85rem; color: var(--accent-red, #f87171); border: 1px solid rgba(248, 113, 113, 0.35); border-radius: 6px; background: rgba(248, 113, 113, 0.08); } .forge-mode-toggle { display: inline-flex; gap: 4px; margin-right: 4px; } .forge-simple-banner { margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.06); } .forge-simple-banner .font-tech { margin-bottom: 0.35rem; } .batch-forge-panel { padding: 1rem 1.1rem; border: 1px solid rgba(212, 175, 55, 0.25); } .batch-forge-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.65rem; font-size: 0.85rem; color: var(--text-secondary); } .batch-progress-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .batch-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.85), rgba(120, 200, 255, 0.75)); transition: width 0.35s ease; } .batch-forge-log { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.8rem; max-height: 10rem; overflow-y: auto; } .batch-forge-log li { padding: 0.2rem 0; color: var(--text-secondary); } .batch-forge-log li.batch-ok { color: var(--neon-green, #6f6); } .batch-forge-log li.batch-fail { color: var(--neon-red, #f55); } .download-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; } /* ── Forge progress bar ───────────────────────────────────────── */ .forge-progress-wrap { margin-top: 1rem; margin-bottom: 0.5rem; padding: 0.75rem 1rem; border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 6px; background: rgba(255, 100, 0, 0.06); animation: forge-progress-fadein 0.25s ease; } @keyframes forge-progress-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .forge-progress-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; } .forge-progress-icon { font-size: 0.95rem; animation: forge-spin 1.4s linear infinite; display: inline-block; color: #ff8c00; } @keyframes forge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .forge-progress-stage { flex: 1; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #ffb347; letter-spacing: 0.04em; text-transform: uppercase; } .forge-progress-pct { font-family: 'Courier New', monospace; font-size: 0.8rem; font-weight: 700; color: #ffd700; min-width: 3rem; text-align: right; } .forge-progress-track { position: relative; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: visible; } .forge-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff6a00, #ffb300, #ffd700); box-shadow: 0 0 8px rgba(255, 160, 0, 0.6); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; } .forge-progress-glow { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 200, 50, 0.5); box-shadow: 0 0 10px 4px rgba(255, 160, 0, 0.6); pointer-events: none; z-index: 2; animation: forge-glow-pulse 0.8s ease-in-out infinite alternate; } @keyframes forge-glow-pulse { from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } } /* ── Forge last-build compact strip ─────────────────────────────────────── */ .forge-last-build-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; padding: 0.6rem 0.85rem; background: rgba(0, 255, 120, 0.06); border: 1px solid rgba(0, 255, 120, 0.3); border-radius: 6px; animation: forge-strip-appear 0.25s ease; } @keyframes forge-strip-appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .forge-last-build-info { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .forge-last-build-check { font-size: 1.1rem; color: #00ff88; flex-shrink: 0; } .forge-last-build-name { font-family: 'Courier New', monospace; font-size: 0.82rem; color: #c8ffd4; font-weight: 600; margin-right: 0.3rem; } .forge-last-build-size { font-family: 'Courier New', monospace; font-size: 0.72rem; color: #888; margin-right: 0.35rem; } .forge-last-build-tag { display: inline-block; font-family: 'Courier New', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.08rem 0.38rem; border-radius: 3px; background: rgba(255, 140, 0, 0.15); border: 1px solid rgba(255, 140, 0, 0.4); color: #ffb04c; margin-right: 0.2rem; } .forge-last-build-actions { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; } .btn-sm { font-size: 0.78rem; padding: 0.28rem 0.7rem; } /* ─── Mining Coin Labels (Monero / Ravencoin) ────────────────────────────── */ .mining-coin-label { display: flex; align-items: center; gap: 0.65rem; margin: 1.5rem 0 0.75rem; padding: 0.5rem 1rem; border-radius: 6px; background: rgba(0,0,0,0.3); border-left: 3px solid var(--neon-cyan); } .monero-label { border-left-color: var(--neon-cyan); } .rvn-label { border-left-color: #f5a623; } .coin-badge { font-family: var(--font-tech); font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.1em; } .xmr-badge { background: rgba(0, 255, 255, 0.15); color: var(--neon-cyan); border: 1px solid var(--neon-cyan); } .rvn-badge { background: rgba(245, 166, 35, 0.15); color: #f5a623; border: 1px solid #f5a623; } .coin-name { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.15em; color: #e0e0e0; } .coin-algo { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; } .coin-hr { margin-left: auto; font-size: 1rem; font-weight: 700; color: var(--neon-cyan); } .rvn-label .coin-hr { color: #f5a623; } /* ─── RVN Section ────────────────────────────────────────────────────────── */ .rvn-section { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(245, 166, 35, 0.2); } .rvn-hashrate { color: #f5a623 !important; text-shadow: 0 0 12px rgba(245, 166, 35, 0.6), 0 0 24px rgba(245, 166, 35, 0.3); } .rvn-gauges { grid-template-columns: repeat(3, 1fr); } .rvn-stats-grid .rvn-stat-card { background: linear-gradient(135deg, rgba(245, 166, 35, 0.06) 0%, rgba(0,0,0,0.0) 100%); border: 1px solid rgba(245, 166, 35, 0.2); text-align: center; padding: 1.25rem !important; position: relative; overflow: hidden; } .rvn-stats-grid .rvn-stat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(245,166,35,0.08) 0%, transparent 70%); pointer-events: none; } .rvn-stats-grid .stat-label { color: rgba(245, 166, 35, 0.7); letter-spacing: 0.15em; } .neon-glow-gold { color: #f5a623; text-shadow: 0 0 8px rgba(245, 166, 35, 0.7), 0 0 16px rgba(245, 166, 35, 0.4); } /* ─── RVN Rig Detail Table ───────────────────────────────────────────────── */ .rvn-rig-table-card { padding: 1.25rem !important; background: rgba(245,166,35,0.03); border: 1px solid rgba(245,166,35,0.15) !important; } .rvn-rig-table { display: flex; flex-direction: column; gap: 0.6rem; } .rvn-rig-row { display: grid; grid-template-columns: 1fr 1.5fr 80px 1fr 42px 48px; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 4px; background: rgba(0,0,0,0.25); border-left: 2px solid rgba(245,166,35,0.35); font-size: 0.82rem; transition: background 0.15s; } .rvn-rig-row:hover { background: rgba(245,166,35,0.07); } .rvn-rig-name { font-size: 0.78rem; color: #c0c0c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rvn-rig-model { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rvn-rig-hr { font-family: var(--font-tech); font-size: 0.8rem; font-weight: 600; text-align: right; } .rvn-rig-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; } .rvn-rig-bar { height: 100%; background: linear-gradient(90deg, #f5a623, #ffcc55); border-radius: 3px; box-shadow: 0 0 6px rgba(245,166,35,0.5); transition: width 0.6s ease; } .rvn-rig-pct { font-family: var(--font-tech); font-size: 0.7rem; color: var(--text-muted); text-align: right; } .rvn-rig-temp { font-family: var(--font-tech); font-size: 0.72rem; color: var(--neon-cyan); text-align: right; } .rvn-rig-temp.temp-hot { color: var(--neon-amber); text-shadow: 0 0 6px rgba(255,165,0,0.5); } /* RVN GPU section in the Forge */ .rvn-pool-picker .pool-preset-provider { color: #f5a623 !important; } @media (max-width: 700px) { .rvn-gauges { grid-template-columns: repeat(2, 1fr); } .rvn-rig-row { grid-template-columns: 1fr 80px 1fr 42px; } .rvn-rig-model, .rvn-rig-pct { display: none; } }