:root {
    --esq-midnight: #0a2540;
    --esq-royal: #1e3a8a;
    --esq-blue-soft: #edf2ff;
    --gold: #c5a059;
    --gold-soft: #f4e8cd;
    --ink: #0f172a;
    --slate: #475467;
    --muted: #667085;
    --line: #e4e7ec;
    --white: #ffffff;
    --mist: #f8f9fa;
    --soft-bg: #f3f4f6;
    --success: #1f6a46;
    --danger: #b42318;
    --focus: #2f67d8;

    --font-sans: "Plus Jakarta Sans", "Inter", "Segoe UI", Arial, sans-serif;
    --font-serif: "Merriweather", Georgia, serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.875rem;
    --text-3xl: clamp(2rem, 3.2vw, 3.25rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;

    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;

    --shadow-card: 0 18px 40px rgba(10, 37, 64, 0.1);
    --shadow-soft: 0 28px 72px rgba(10, 37, 64, 0.11);
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.72;
    color: var(--ink);
    background: var(--soft-bg);
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
}

.app-header__inner {
    width: min(1240px, 92vw);
    margin: 0 auto;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

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

.workspace-bar {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.05rem;
}

.workspace-bar .btn {
    min-height: 1.85rem;
    padding: 0.28rem 0.62rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

.brand {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    flex: 0 0 auto;
}

.brand__media {
    display: block;
    width: clamp(132px, 13vw, 182px);
    max-width: 100%;
}

.brand__logo,
.landing-footer__logo-image,
.login-premium-brand__logo {
    display: block;
    width: 100%;
    height: auto;
}

.top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.top-nav a {
    text-decoration: none;
    color: #344054;
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 0.56rem 0.88rem;
    border-radius: var(--radius-pill);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms, color 220ms, box-shadow 220ms;
}

.top-nav a:hover {
    transform: translateY(-1px);
    background: var(--esq-blue-soft);
    color: var(--esq-royal);
}

.content {
    flex: 1;
    padding: var(--space-6) 0;
}

.content_i {
    margin: 0 auto;
    width: min(1360px, 95vw);
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid #ebeef2;
    box-shadow: var(--shadow-soft);
    padding: var(--space-6);
}

.app-footer {
    border-top: 1px solid var(--line);
    background: var(--white);
    margin-top: var(--space-6);
}

.app-footer__inner {
    width: min(1240px, 92vw);
    margin: 0 auto;
    padding: var(--space-5) 0;
}

.app-footer__meta,
.app-footer__copyright {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-footer__copyright {
    margin-top: var(--space-1);
}

h1,
h2,
h3 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    line-height: 1.18;
    color: var(--esq-midnight);
}

h1 {
    max-width: 22ch;
    font-size: var(--text-3xl);
    font-weight: 900;
}

h2 {
    font-size: var(--text-2xl);
    font-weight: 800;
}

h3 {
    font-size: var(--text-xl);
    font-weight: 800;
}

p,
ul,
ol,
form,
table {
    margin: 0 0 var(--space-5);
}

p {
    max-width: 72ch;
    color: #304764;
}

a {
    color: var(--esq-royal);
}

a:hover {
    color: var(--esq-midnight);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

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

button {
    border: 1px solid var(--esq-royal);
    border-radius: 0.65rem;
    background: var(--esq-royal);
    color: var(--white);
    padding: 0.54rem 0.92rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms, background-color 240ms, border-color 240ms;
}

button::before,
.btn::before,
.btn-link::before,
.table-action::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.45rem;
    font-size: 0.9em;
    line-height: 1;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(30, 58, 138, 0.2);
    background: var(--esq-midnight);
    border-color: var(--esq-midnight);
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #d9dee7;
    border-radius: var(--radius-sm);
    padding: 0.82rem 0.92rem;
    box-sizing: border-box;
    background: var(--white);
    color: var(--ink);
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

textarea {
    min-height: 8.5rem;
    resize: vertical;
}

input[type="file"] {
    padding: 0.6rem 0.2rem;
    border-style: dashed;
}

label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #344054;
}

label > input,
label > select,
label > textarea {
    display: block;
    margin-top: var(--space-2);
}

label.check-line > input,
.service-fieldset label > input {
    display: inline-block;
    margin-top: 0;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--esq-royal);
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}

input[readonly],
textarea[readonly],
select[disabled],
input[disabled],
textarea[disabled] {
    background: linear-gradient(180deg, #e4ebf3 0%, #d7e0ea 100%);
    border-color: #9aa9bb;
    color: #314255;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
}

input[readonly]:focus,
textarea[readonly]:focus,
select[disabled]:focus,
input[disabled]:focus,
textarea[disabled]:focus {
    border-color: #9aa9bb;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
    outline: none;
}

.field-readonly {
    background: linear-gradient(180deg, #e4ebf3 0%, #d7e0ea 100%) !important;
    border-color: #9aa9bb !important;
    color: #314255 !important;
    cursor: not-allowed;
}

.field-readonly::placeholder,
input[readonly]::placeholder,
textarea[readonly]::placeholder {
    color: #51667d;
    opacity: 1;
}

.form-shell input,
.form-shell select,
.form-shell textarea,
.form-shell fieldset {
    max-width: 48rem;
}