:root {
    --navy: #002f6c;
    --navy-2: #0057b8;
    --navy-3: #001f46;
    --mustard: #ffc400;
    --mustard-2: #ffd43a;
    --mint: #ffc400;
    --coral: #d93025;
    --ink: #1f2937;
    --muted: #5f6f82;
    --page: #fff;
    --panel: #fff;
    --line: #dfe5ec;
    --shadow: 0 1px 2px rgba(0, 31, 70, .06);
    --radius-xl: 8px;
    --radius-lg: 8px;
    --radius-md: 6px;
    --max: 1180px;
    --blue: #002f6c;
    --blue-2: #0057b8;
    --yellow: #ffc400;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }

.page-shell,
.wrap {
    width: min(100% - 32px, var(--max));
    margin-inline: auto;
}

.main,
main.wrap {
    padding-block: 44px 64px;
}

.card,
.panel,
.empty-card,
.legal-card,
.settings-card,
.summary,
.conversation-list,
.security-card,
.chat-panel {
    border-color: var(--line);
    background-color: #fff;
    box-shadow: var(--shadow);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 17px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 850;
    letter-spacing: 0;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary,
.btn.btn-primary {
    color: #001f46;
    background: var(--mustard);
    box-shadow: none;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--mustard-2);
}

.btn-soft,
.btn.btn-soft {
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--line);
}

.btn-soft:hover,
.btn.btn-soft:hover {
    border-color: #b8c3d1;
    background: #f7f9fc;
}

.btn-danger,
.btn.btn-danger {
    color: #fff;
    background: #c62828;
    box-shadow: none;
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background: #ad1f1f;
}

input,
select,
textarea {
    border-color: var(--line);
    background: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(255, 196, 0, .28);
    border-color: #b8c3d1;
}

.eyebrow {
    color: var(--navy);
    background: #fff8d8;
    border-color: #ffe58a;
}

.pulse-dot {
    background: var(--mustard);
    box-shadow: 0 0 0 5px rgba(255, 196, 0, .22);
}

@media (max-width: 560px) {
    .page-shell,
    .wrap {
        width: min(100% - 22px, var(--max));
    }

    .main,
    main.wrap {
        padding-block: 28px 48px;
    }
}