:root {
    --riser-primary: #0b3d91;
    --riser-primary-dark: #082d6f;
    --riser-primary-light: #1d56b5;
    --riser-accent: #ffd447;
    --riser-bg: #f3f6fc;
    --riser-surface: #ffffff;
    --riser-text: #16233b;
    --riser-muted: #66748b;
    --riser-border: #d8e2f2;
    --riser-success: #138a4f;
    --riser-warning: #b9770e;
    --riser-danger: #bf2c2c;
    --riser-info: #1f6ed4;
    --riser-radius: 14px;
    --riser-shadow-sm: 0 2px 8px rgba(9, 43, 110, 0.08);
    --riser-shadow-md: 0 10px 26px rgba(9, 43, 110, 0.12);
}

main {
    width: min(1240px, 100% - 32px);
    margin: 0 auto;
}

.section {
    border: 1px solid var(--riser-border);
    border-radius: var(--riser-radius);
    box-shadow: var(--riser-shadow-sm);
}

.alert,
.message-banner {
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.94rem;
}

.alert-success,
.message-banner.success {
    color: #0e693a;
    background: #e6f8ef;
    border-color: #bde8cf;
}

.alert-info,
.message-banner.info {
    color: #0c4c99;
    background: #e8f2ff;
    border-color: #c9dfff;
}

.alert-warning,
.message-banner.warning {
    color: #8b5a00;
    background: #fff5dd;
    border-color: #f2df9f;
}

.alert-danger,
.alert-error,
.message-banner.error {
    color: #8f2020;
    background: #fdecec;
    border-color: #f6c8c8;
}

.riser-panel,
.panel,
.surface-card {
    background: var(--riser-surface);
    border: 1px solid var(--riser-border);
    border-radius: var(--riser-radius);
    box-shadow: var(--riser-shadow-sm);
}

.surface-card:hover,
.riser-card:hover {
    box-shadow: var(--riser-shadow-md);
}

input,
select,
textarea,
.form-control {
    border: 1px solid #cfd9ea;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--riser-primary-light);
    box-shadow: 0 0 0 3px rgba(29, 86, 181, 0.14);
    outline: 0;
}

button,
.btn,
.connect-btn {
    border-radius: 10px;
}

.btn,
.connect-btn {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.table,
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--riser-border);
    border-radius: 12px;
    overflow: hidden;
}

.table th,
.table td,
table th,
table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6edf8;
    text-align: left;
}

.table tr:last-child td,
table tr:last-child td {
    border-bottom: 0;
}

.table thead th,
table thead th {
    background: #f5f8ff;
    color: #20437a;
    font-weight: 700;
}

.badge,
.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-success,
.status-chip.success {
    color: #0f6e3d;
    background: #dff7ea;
}

.badge-warning,
.status-chip.warning {
    color: #875400;
    background: #fff0c6;
}

.badge-danger,
.status-chip.danger {
    color: #8d1f1f;
    background: #fde1e1;
}

.badge-info,
.status-chip.info {
    color: #0f4fa1;
    background: #deebff;
}

.page-title,
.section-title,
.riser-heading {
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    main {
        width: calc(100% - 20px);
    }

    .section {
        padding: 16px;
    }
}