Redirecting…

.brand-tagline { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; } .subtitle { color: var(--muted); margin-bottom: 20px; font-size: 14px; line-height: 1.6; } /* ── Tabs ── */ .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; } .tab-btn { flex: 1; padding: 10px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Fields ── */ .field { margin-bottom: 14px; } label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text); } input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none; } input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.16); } button[type="submit"] { width: 100%; padding: 12px 14px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18); } button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24); } button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .message { margin-top: 12px; min-height: 18px; font-size: 13px; } .message.error { color: var(--danger); } .message.success { color: var(--success); } /* ── Role selector ── */ .role-toggle { display: flex; gap: 8px; margin-bottom: 18px; } .role-btn { flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .role-btn.selected { border-color: var(--accent); background: rgba(79, 142, 247, 0.08); color: var(--accent); } /* ── Password field with show/hide toggle ── */ .password-wrap { position: relative; } .password-wrap input { padding-right: 42px; } .password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 6px; color: var(--muted); user-select: none; } .password-toggle:hover { color: var(--accent); } .link-btn { background: none; border: none; padding: 0; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; } /* ── Backend status indicator ── */ .status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; margin-bottom: 18px; letter-spacing: 0.02em; transition: all 0.3s ease; } .status-dot.checking { color: var(--muted); background: #f1f5f9; } .status-dot.online { color: var(--success); background: #f0fdf4; } .status-dot.offline { color: var(--danger); background: #fef2f2; } .status-dot.degraded { color: #d97706; background: #fffbeb; } /* ── Input error state ── */ input.input-error { border-color: var(--danger); } input.input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
MIIC Portfolio
Investment Readiness Dashboard
Sign in or create a user account to access the dashboard.
● Checking server…