@import url("/css/typography.css");

:root {
    color-scheme: dark;
    --mtp-color-navy-950: #07111f;
    --mtp-color-navy-900: #0b1728;
    --mtp-color-navy-850: #102036;
    --mtp-color-navy-800: #162a44;
    --mtp-color-blue-500: #2563eb;
    --mtp-color-blue-400: #60a5fa;
    --mtp-color-cyan-400: #38bdf8;
    --mtp-color-green-400: #34d399;
    --mtp-color-amber-400: #fbbf24;
    --mtp-color-red-400: #fb7185;
    --mtp-surface-canvas: var(--mtp-color-navy-950);
    --mtp-surface-primary: var(--mtp-color-navy-900);
    --mtp-surface-raised: var(--mtp-color-navy-850);
    --mtp-surface-interactive: var(--mtp-color-navy-800);
    --mtp-text-primary: #f8fafc;
    --mtp-text-secondary: #cbd5e1;
    --mtp-text-muted: #94a3b8;
    --mtp-border-subtle: rgba(148, 163, 184, 0.22);
    --mtp-border-strong: rgba(148, 163, 184, 0.42);
    --mtp-semantic-info: var(--mtp-color-cyan-400);
    --mtp-semantic-success: var(--mtp-color-green-400);
    --mtp-semantic-warning: var(--mtp-color-amber-400);
    --mtp-semantic-danger: var(--mtp-color-red-400);
    --mtp-radius-sm: 8px;
    --mtp-radius-md: 12px;
    --mtp-radius-lg: 16px;
    --mtp-space-1: 0.25rem;
    --mtp-space-2: 0.5rem;
    --mtp-space-3: 0.75rem;
    --mtp-space-4: 1rem;
    --mtp-space-5: 1.25rem;
    --mtp-space-6: 1.5rem;
    --mtp-space-8: 2rem;
    --mtp-space-10: 2.5rem;
    --mtp-shadow-raised: 0 16px 36px rgba(2, 8, 23, 0.32);
    --mtp-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.3);
    --mtp-motion-fast: 140ms;
    --mtp-motion-standard: 220ms;
    --mtp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.mtp-page {
    min-height: 100vh;
    margin: 0;
    background: var(--mtp-surface-canvas);
    color: var(--mtp-text-primary);
    font-family: var(--mtp-font-sans);
}

.mtp-shell {
    width: min(100% - 2rem, 1180px);
    margin-inline: auto;
}

.mtp-panel,
.mtp-card {
    border: 1px solid var(--mtp-border-subtle);
    border-radius: var(--mtp-radius-lg);
    background: var(--mtp-surface-primary);
    box-shadow: var(--mtp-shadow-raised);
}

.mtp-panel {
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.mtp-card {
    padding: var(--mtp-space-5);
}

.mtp-heading {
    margin: 0 0 var(--mtp-space-3);
    color: var(--mtp-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}

.mtp-copy {
    max-width: 70ch;
    color: var(--mtp-text-secondary);
    line-height: 1.65;
}

.mtp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mtp-space-3);
    align-items: center;
}

.mtp-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtp-space-2);
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--mtp-radius-sm);
    font: 600 0.95rem/1 var(--mtp-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--mtp-motion-fast) var(--mtp-ease-out),
        border-color var(--mtp-motion-fast) var(--mtp-ease-out),
        color var(--mtp-motion-fast) var(--mtp-ease-out),
        transform var(--mtp-motion-fast) var(--mtp-ease-out);
}

.mtp-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.mtp-button:focus-visible,
.mtp-control:focus-visible,
.mtp-icon-button:focus-visible {
    outline: 2px solid var(--mtp-color-blue-400);
    outline-offset: 2px;
    box-shadow: var(--mtp-shadow-focus);
}

.mtp-button:disabled,
.mtp-control:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.mtp-button--primary {
    background: var(--mtp-color-blue-500);
    color: #fff;
}

.mtp-button--primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.mtp-button--secondary {
    border-color: var(--mtp-border-strong);
    background: var(--mtp-surface-interactive);
    color: var(--mtp-text-primary);
}

.mtp-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--mtp-text-secondary);
}

.mtp-button--danger {
    border-color: rgba(251, 113, 133, 0.5);
    background: #9f1239;
    color: #fff;
}

.mtp-icon-button {
    width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--mtp-border-strong);
    border-radius: var(--mtp-radius-sm);
    background: var(--mtp-surface-interactive);
    color: var(--mtp-text-primary);
    cursor: pointer;
}

.mtp-field {
    display: grid;
    gap: var(--mtp-space-2);
}

.mtp-label {
    color: var(--mtp-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.mtp-control {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--mtp-border-strong);
    border-radius: var(--mtp-radius-sm);
    padding: 0.7rem 0.8rem;
    background: var(--mtp-surface-canvas);
    color: var(--mtp-text-primary);
    font: 400 1rem/1.4 var(--mtp-font-sans);
}

textarea.mtp-control {
    min-height: 9rem;
    resize: vertical;
}

.mtp-control::placeholder {
    color: var(--mtp-text-muted);
}

.mtp-field-error {
    color: #fda4af;
    font-size: 0.85rem;
}

.mtp-notice,
.mtp-status,
.mtp-auth-gate,
.mtp-empty,
.mtp-loading {
    border: 1px solid var(--mtp-border-strong);
    border-radius: var(--mtp-radius-md);
    padding: var(--mtp-space-4);
    background: var(--mtp-surface-raised);
    color: var(--mtp-text-secondary);
}

.mtp-notice--info {
    border-color: rgba(56, 189, 248, 0.5);
}

.mtp-notice--success {
    border-color: rgba(52, 211, 153, 0.5);
}

.mtp-notice--warning {
    border-color: rgba(251, 191, 36, 0.55);
}

.mtp-notice--danger {
    border-color: rgba(251, 113, 133, 0.55);
}

.mtp-loading-indicator {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border: 2px solid var(--mtp-border-strong);
    border-top-color: var(--mtp-color-blue-400);
    border-radius: 50%;
    animation: mtp-spin 700ms linear infinite;
}

@keyframes mtp-spin {
    to { transform: rotate(360deg); }
}

.mtp-technical,
.mtp-readout,
.mtp-metric-value {
    font-family: var(--mtp-font-mono);
    font-variant-numeric: tabular-nums;
}

.mtp-readout {
    border: 1px solid var(--mtp-border-subtle);
    border-radius: var(--mtp-radius-sm);
    padding: var(--mtp-space-4);
    background: #050c17;
    color: #dbeafe;
}

.mtp-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--mtp-space-3);
}

.mtp-metric {
    min-width: 0;
    border-top: 1px solid var(--mtp-border-subtle);
    padding: var(--mtp-space-4) 0 0;
}

.mtp-metric-value {
    display: block;
    color: var(--mtp-text-primary);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 600;
}

.mtp-metric-label {
    display: block;
    margin-top: var(--mtp-space-1);
    color: var(--mtp-text-muted);
    font: 500 0.8rem/1.35 var(--mtp-font-sans);
}

.mtp-disclosure {
    border-top: 1px solid var(--mtp-border-subtle);
    padding-block: var(--mtp-space-4);
}

.mtp-disclosure > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--mtp-text-primary);
    font-weight: 600;
    cursor: pointer;
}

.mtp-auth-page {
    background:
        radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.14), transparent 42rem),
        var(--mtp-surface-canvas) !important;
}

.mtp-auth-page main.mtp-auth-main {
    min-height: min(72vh, 720px) !important;
    padding: clamp(2rem, 7vh, 5rem) 1rem !important;
}

.mtp-auth-card {
    width: min(100%, 31rem);
    margin-inline: auto;
    border: 1px solid var(--mtp-border-subtle) !important;
    border-radius: var(--mtp-radius-lg) !important;
    padding: clamp(1.35rem, 4vw, 2rem) !important;
    background: var(--mtp-surface-primary) !important;
    box-shadow: var(--mtp-shadow-raised) !important;
}

@media (min-width: 1100px) {
    .mtp-auth-page main.mtp-auth-main > .max-w-md {
        max-width: 33rem !important;
    }
}

.mtp-auth-card form {
    display: grid;
    gap: var(--mtp-space-4);
}

.mtp-auth-card input:not([type="checkbox"]),
.mtp-auth-card select,
.mtp-auth-card textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--mtp-border-strong) !important;
    border-radius: var(--mtp-radius-sm) !important;
    background: var(--mtp-surface-canvas) !important;
    color: var(--mtp-text-primary) !important;
}

.mtp-auth-card button[type="submit"] {
    min-height: 46px;
    border-radius: var(--mtp-radius-sm) !important;
    background: var(--mtp-color-blue-500) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.mtp-auth-card [id$="Error"]:not(:empty) {
    color: #fda4af !important;
}

.mtp-auth-card a {
    color: #93c5fd;
}

.mtp-auth-page [id="loadingSpinner"]:not(.hidden) {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit;
    background: rgba(7, 17, 31, 0.9) !important;
}

@media (max-width: 640px) {
    .mtp-shell {
        width: min(100% - 1rem, 1180px);
    }

    .mtp-panel,
    .mtp-card {
        border-radius: var(--mtp-radius-md);
    }

    .mtp-actions > .mtp-button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}