:root {
    --red: #e83b62;
    --pink: #ff6b8d;
    --ink: #191b20;
    --muted: #727782;
    --line: #e7e8eb;
    --soft: #f4f5f7;
    --green: #22a06b;
    --orange: #dc7b24;
    --purple: #7656d6;
    --shadow: 0 12px 32px rgba(31, 35, 42, 0.11);
}

* {
    box-sizing: border-box;
}

html {
    background: #eef0f3;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

.ex-shell {
    width: min(100%, 480px);
    min-height: 100vh;
    margin: auto;
    background: #2e4055;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.ex-main {
    padding: 14px 14px 28px;
	    background: #2f4156;
}

.ex-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
}

.ex-hidden {
    display: none !important;
}

.ex-muted {
    color: var(--muted);
}

.ex-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 13px;
}

.ex-success {
    margin-top: 6px;
    color: #067647;
    font-size: 13px;
}

.ex-field {
    display: grid;
    gap: 7px;
    margin-bottom: 15px;
}

.ex-field label {
    font-size: 14px;
    font-weight: 700;
}

.ex-input,
.ex-textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #ccd0d5;
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    outline: 0;
}

.ex-textarea {
    min-height: 130px;
    resize: vertical;
}

.ex-input:focus,
.ex-textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(232, 59, 98, 0.22);
    outline-offset: 2px;
}

.ex-btn {
    padding: 13px 16px;
    border: 0;
    border-radius: 13px;
    font-weight: 800;
}

.ex-btn-primary {
    background: linear-gradient(135deg, var(--red), var(--pink));
    color: #fff;
}

.ex-btn-secondary {
    background: var(--soft);
    color: var(--ink);
}

.ex-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ex-icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
}

.ex-icon-btn svg {
    width: 22px;
    height: 22px;
}

.ex-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ex-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 9999;
    padding: 10px 14px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #15171a;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.ex-toast.is-show {
    opacity: 1;
}

@media (min-width: 481px) {
    body {
        padding: 18px 0;
    }

    .ex-shell {
        min-height: calc(100vh - 36px);
        overflow: hidden;
        border-radius: 24px;
    }
}