*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Dark = default. Overridden by @media prefers-color-scheme: light OR by [data-theme="light"] stamped on by the user's toggle. */ --bg: #0f1117; --bg-panel: #1a1d27; --bg-input: #252830; --border: #2e3140; --text: #e1e4ed; --text-dim: #8b8fa3; --accent: #4f8ff7; --accent-hover: #6ba0f9; --success: #34d399; --error: #f87171; --warn: #fbbf24; /* --warn is a TEXT color on page bg. --warn-bg / --warn-fg is the paired background+foreground for badges/buttons where warn is the surface. */ --warn-bg: #fbbf24; --warn-fg: #1a1300; --shadow: 0 1px 3px rgba(0,0,0,0.4); --radius: 8px; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; color-scheme: dark; } /* Light theme — driven by OS preference unless user forced dark */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f5f7fa; --bg-panel: #ffffff; --bg-input: #eef1f5; --border: #d8dde5; --text: #1a1d27; --text-dim: #64707d; --accent: #2c6ad1; --accent-hover: #1e58b8; --success: #059669; --error: #dc2626; --warn: #b45309; --warn-bg: #f59e0b; --warn-fg: #1a1300; --shadow: 0 1px 3px rgba(15,17,23,0.08); color-scheme: light; } } /* Explicit user toggle wins in both directions */ :root[data-theme="light"] { --bg: #f5f7fa; --bg-panel: #ffffff; --bg-input: #eef1f5; --border: #d8dde5; --text: #1a1d27; --text-dim: #64707d; --accent: #2c6ad1; --accent-hover: #1e58b8; --success: #059669; --error: #dc2626; --warn: #b45309; --warn-bg: #f59e0b; --warn-fg: #1a1300; --shadow: 0 1px 3px rgba(15,17,23,0.08); color-scheme: light; } :root[data-theme="dark"] { --bg: #0f1117; --bg-panel: #1a1d27; --bg-input: #252830; --border: #2e3140; --text: #e1e4ed; --text-dim: #8b8fa3; --accent: #4f8ff7; --accent-hover: #6ba0f9; --success: #34d399; --error: #f87171; --warn: #fbbf24; --warn-bg: #fbbf24; --warn-fg: #1a1300; --shadow: 0 1px 3px rgba(0,0,0,0.4); color-scheme: dark; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; } .layout { max-width: 1400px; margin: 0 auto; padding: 16px; } header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } header h1 { font-size: 1.3rem; font-weight: 600; color: var(--accent); } .server-config { display: flex; align-items: center; gap: 8px; } .server-config label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-dim); } .server-config input { width: 280px; } .hint { font-size: 0.75rem; color: var(--text-dim); } .main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .main { grid-template-columns: 1fr; } } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .panel h2 { font-size: 0.95rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; } .panel h2:not(:first-child) { margin-top: 24px; } /* Form */ .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { width: 100%; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.88rem; font-family: var(--font-mono); outline: none; transition: border-color 0.15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { resize: vertical; min-height: 200px; line-height: 1.4; tab-size: 4; } select { cursor: pointer; } .template-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .btn-template { padding: 5px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.8rem; cursor: pointer; transition: all 0.15s; } .btn-template:hover { border-color: var(--accent); color: var(--accent); } .btn-template.active { border-color: var(--accent); background: rgba(79, 143, 247, 0.1); color: var(--accent); } .form-actions { display: flex; gap: 8px; margin-top: 16px; } .btn-primary { flex: 1; padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { padding: 10px 20px; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; cursor: pointer; transition: all 0.15s; } .btn-secondary:hover { border-color: var(--text-dim); color: var(--text); } /* Response */ .response-meta { margin-bottom: 12px; font-size: 0.82rem; } .response-meta .status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-family: var(--font-mono); } .response-meta .status.ok { background: rgba(52, 211, 153, 0.15); color: var(--success); } .response-meta .status.error { background: rgba(248, 113, 113, 0.15); color: var(--error); } .response-meta .timing { color: var(--text-dim); margin-left: 10px; } .response-body { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-height: 400px; overflow-y: auto; color: var(--text-dim); } .response-body.has-response { color: var(--text); } /* History */ .history { max-height: 300px; overflow-y: auto; } .history-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; } .history-item:hover { background: var(--bg-input); } .history-item .h-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .history-item .h-status.ok { background: var(--success); } .history-item .h-status.error { background: var(--error); } .history-item .h-time { color: var(--text-dim); font-family: var(--font-mono); flex-shrink: 0; } .history-item .h-model { font-weight: 600; color: var(--accent); flex-shrink: 0; } .history-item .h-message { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Spinner */ @keyframes spin { to { transform: rotate(360deg); } } .spinner::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-left: 8px; } /* ═══ Tab Bar ═══ */ .tab-bar { display: flex; gap: 4px; } .tab-btn { padding: 6px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .tab-btn:hover { border-color: var(--accent); color: var(--accent); } .tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .text-dim { color: var(--text-dim); } /* ═══ Connect Card ═══ */ .connect-card { max-width: 440px; margin: 60px auto; } .connect-card h2 { text-align: center; margin-bottom: 20px; } .connect-status { margin-top: 12px; text-align: center; } .branding { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; color: var(--text-dim); line-height: 1.8; } .branding a { color: var(--accent); text-decoration: none; } .branding a:hover { text-decoration: underline; } /* ═══ Group Filter Bar ═══ */ .group-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); } .group-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; } .group-btn { padding: 4px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 20px; color: var(--text-dim); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; } .group-btn:hover { border-color: var(--accent); color: var(--accent); } .group-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .group-count { font-size: 0.68rem; opacity: 0.7; } /* ═══ Tags ═══ */ .scenario-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .tag { display: inline-block; padding: 1px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); } .tag-sm { padding: 0px 5px; font-size: 0.65rem; } .scenario-count { font-size: 0.75rem; color: var(--text-dim); font-weight: 400; } /* ═══ Demo Layout ═══ */ .demo-layout { display: flex; flex-direction: column; gap: 16px; } .demo-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; } .demo-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .demo-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.05em; } .demo-badge.active { background: rgba(52, 211, 153, 0.15); color: var(--success); } .demo-badge.inactive { background: rgba(248, 113, 113, 0.15); color: var(--error); } .demo-stats { font-size: 0.82rem; color: var(--text-dim); } .demo-stats strong { color: var(--text); } .demo-stats code { background: var(--bg-input); padding: 1px 5px; border-radius: 3px; font-size: 0.8rem; } .demo-actions { display: flex; gap: 8px; } .btn-danger { color: var(--error) !important; border-color: rgba(248, 113, 113, 0.3) !important; } .btn-danger:hover { border-color: var(--error) !important; } .demo-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .demo-main { grid-template-columns: 1fr; } } /* ═══ Scenario Cards ═══ */ .scenario-list { display: block; max-height: 600px; overflow-y: auto; } .scenario-list > * + * { margin-top: 10px; } .scenario-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: border-color 0.15s; } .scenario-card:hover { border-color: var(--accent); } .scenario-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .scenario-name { font-weight: 600; font-size: 0.9rem; } .scenario-steps { font-size: 0.75rem; color: var(--text-dim); font-family: var(--font-mono); } .scenario-desc { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 10px; line-height: 1.4; } .btn-run-scenario { padding: 4px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-run-scenario:hover { background: var(--accent-hover); } .btn-run-scenario:disabled { opacity: 0.5; cursor: not-allowed; } /* ═══ Test Results ═══ */ .test-results { display: block; max-height: 600px; overflow-y: auto; } .test-results > * + * { margin-top: 14px; } .results-summary { display: flex; gap: 16px; padding: 12px 16px; background: var(--bg-input); border-radius: var(--radius); font-size: 0.88rem; font-weight: 600; } .summary-total { color: var(--text); } .summary-passed { color: var(--success); } .summary-failed { color: var(--error); } .result-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .result-card.passed { border-color: rgba(52, 211, 153, 0.3); } .result-card.failed { border-color: rgba(248, 113, 113, 0.3); } .result-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-input); } .result-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.72rem; font-family: var(--font-mono); } .result-badge.passed { background: rgba(52, 211, 153, 0.15); color: var(--success); } .result-badge.failed { background: rgba(248, 113, 113, 0.15); color: var(--error); } .result-name { font-weight: 600; font-size: 0.88rem; flex: 1; } .result-time { font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono); } .result-steps { padding: 6px 0; } .step-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 0.82rem; flex-wrap: wrap; } .step-row.step-pass .step-icon { color: var(--success); } .step-row.step-fail .step-icon { color: var(--error); } .step-icon { font-weight: 700; font-size: 0.9rem; width: 18px; text-align: center; flex-shrink: 0; } .step-label { flex: 1; min-width: 150px; } .step-counters { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); background: var(--bg); padding: 1px 6px; border-radius: 3px; } .step-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); flex-shrink: 0; } .step-errors { width: 100%; padding-left: 26px; } .step-error { font-size: 0.78rem; color: var(--error); padding: 2px 0; font-family: var(--font-mono); } .running-indicator { display: flex; align-items: center; justify-content: center; padding: 24px; font-size: 0.9rem; color: var(--accent); } /* ═══ Demo History Table ═══ */ .demo-history { max-height: 300px; overflow-y: auto; } .demo-history-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-family: var(--font-mono); } .demo-history-table th { text-align: left; padding: 6px 10px; background: var(--bg-input); color: var(--text-dim); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; } .demo-history-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); color: var(--text); } .demo-history-table tbody tr:hover { background: var(--bg-input); } /* ═══ Header grid layout (SGAPPSFISCAL rebrand) ═══ * On wide viewports: 2 columns — title (fluid) | settings (auto, right). * On narrow (<720px): stack vertically, settings still aligned right. */ .header-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; width: 100%; /* parent
is display:flex — force full width */ flex: 1 1 auto; } .header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; justify-self: end; } @media (max-width: 720px) { .header-grid { grid-template-columns: 1fr; } .header-right { justify-self: end; } } /* Role selection cards on index.html welcome page */ .role-card:hover { border-color: var(--accent) !important; background: rgba(79, 143, 247, 0.06) !important; transform: translateY(-1px); } .role-card { transition: all 0.15s ease; } /* OTP code cells */ .otp-cell { width: 48px; height: 58px; text-align: center; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); caret-color: var(--accent); } .otp-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.15); } /* Theme toggle button — icon-only, blends with header */ .theme-toggle-btn { padding: 4px 10px; font-size: 1.05rem; line-height: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; transition: all 0.15s; /* preserve emoji rendering, avoid font-mono */ font-family: -apple-system, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; } .theme-toggle-btn:hover { border-color: var(--accent); background: var(--bg-panel); transform: translateY(-1px); } .theme-toggle-btn:active { transform: translateY(0); } /* Light theme — inputs with borders (dark had none by default) */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: #ffffff; } :root[data-theme="light"] .panel { box-shadow: var(--shadow); } /* Utility classes for numeric table columns */ .text-right { text-align: right; } .text-center { text-align: center; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* Secondary/logout-style buttons — shared across operator/admin/superadmin */ .logout-btn { padding: 4px 12px; background: transparent; border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--radius); color: var(--error); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; font-family: inherit; } .logout-btn:hover { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.6); } .logout-btn:active { transform: translateY(1px); } .logout-btn:disabled { opacity: 0.5; cursor: not-allowed; } :root[data-theme="light"] .logout-btn { border-color: rgba(220, 38, 38, 0.35); color: var(--error); } :root[data-theme="light"] .logout-btn:hover { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.55); }