:root {
    color-scheme: light;
    --ink: #1e2924;
    --muted: #77827c;
    --paper: #f4f6f1;
    --surface: #ffffff;
    --surface-soft: #eef2eb;
    --accent: #d9f36b;
    --accent-dark: #a2b944;
    --line: #e4e9e2;
    --green-block: #dcefdc;
    --yellow-block: #fff1c8;
    --lilac-block: #e7e0f5;
    font-family: "Avenir Next", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--paper);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    padding: 0 4vw;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--ink);
    background: var(--accent);
    border-radius: 12px;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.header-actions { display: flex; align-items: center; gap: 18px; }
.user-menu { position: relative; }
.user-menu-trigger { display: grid; width: 38px; height: 38px; place-items: center; color: var(--muted); border-radius: 12px; cursor: pointer; font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; list-style: none; }
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger svg { width: 18px; height: 18px; }
.user-menu-trigger:hover, .user-menu[open] .user-menu-trigger { color: var(--ink); background: var(--paper); }
.user-menu-popover { position: absolute; z-index: 10; top: calc(100% + 10px); left: 0; display: grid; min-width: 155px; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 14px 28px rgba(45, 61, 48, .12); }
.user-menu-popover a { padding: 10px 11px; color: var(--ink); border-radius: 9px; font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.user-menu-popover a:hover { background: var(--paper); }
.user-summary { display: grid; gap: 3px; text-align: right; }
.user-summary-name, .user-summary-role { display: block; }
.user-summary-name { color: var(--ink); font-size: .73rem; font-weight: 700; }
.user-summary-role { color: var(--muted); font-size: .64rem; }
.avatar-button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: #fff; background: #43554b; border-radius: 50%; font-size: .75rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.avatar-button:hover { color: #fff; background: #31463a; transform: translateY(-1px); }

.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 88px); }

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 38px 20px 28px;
    background: var(--surface-soft);
    border-right: 1px solid var(--line);
}

.sidebar-nav { display: grid; gap: 6px; }
.nav-section { display: grid; gap: 6px; }
.nav-section + .nav-section { margin-top: 25px; }
.nav-label { margin: 0 14px 12px; color: #9aa49d; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 34px; }
.nav-link { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 14px; color: var(--muted); border-radius: 16px; font-size: .88rem; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, .7); transform: translateX(2px); }
.nav-link.is-active { color: var(--ink); background: var(--surface); box-shadow: 0 8px 20px rgba(44, 61, 49, .06); }
.nav-icon { display: grid; width: 25px; height: 25px; place-items: center; color: #728078; background: #e1e9df; border-radius: 9px; font-size: .82rem; font-weight: 700; }
.nav-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.nav-link.is-active .nav-icon { color: var(--ink); background: var(--accent); }
.nav-count { margin-left: auto; padding: 3px 8px; color: var(--muted); background: var(--paper); border-radius: 9px; font-size: .68rem; }
.sidebar-footer { display: flex; align-items: center; gap: 11px; margin-top: 36px; padding: 15px 13px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(221, 230, 220, .8); border-radius: 18px; }
.help-icon { display: grid; width: 28px; height: 28px; place-items: center; color: #68815c; background: #dcebd8; border-radius: 50%; font-weight: 700; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { margin-bottom: 3px; font-size: .7rem; }
.sidebar-footer div span { color: var(--muted); font-size: .67rem; }

.main-content { width: min(100%, 1200px); margin: 0 auto; padding: 58px 6vw 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.eyebrow, .card-kicker { margin: 0 0 13px; color: var(--muted); font-size: .69rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 11px; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 400; letter-spacing: -.055em; line-height: 1; }
.heading-wave { display: inline-flex; color: var(--accent-dark); font-family: sans-serif; font-size: .7em; vertical-align: top; }
.heading-wave svg { width: 17px; height: 17px; }
.intro { margin-bottom: 0; color: var(--muted); font-size: .94rem; }
.button-primary, .button-secondary, .button-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; border-radius: 13px; font-size: .76rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.button-primary { gap: 9px; min-height: 48px; padding: 0 19px; color: var(--ink); background: var(--accent); border: 0; box-shadow: 0 7px 16px rgba(147, 169, 54, .16); transition: transform .2s ease, box-shadow .2s ease; }
.button-primary span { font-size: 1.2rem; font-weight: 400; line-height: 0; }
.button-primary svg, .button-secondary svg, .button-danger svg { width: 16px; height: 16px; stroke-width: 2.2; }
.button-primary:hover { box-shadow: 0 10px 22px rgba(147, 169, 54, .24); transform: translateY(-2px); }
.button-secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.button-secondary:hover { background: var(--paper); }
.button-danger { color: #aa6259; background: #fbe9e5; border: 0; }
.button-danger:hover { background: #f7dcd6; }

.welcome-card { display: flex; position: relative; min-height: 250px; overflow: hidden; margin-bottom: 42px; padding: 38px 42px; background: #31463a; border-radius: 28px; box-shadow: 0 18px 35px rgba(39, 60, 45, .1); }
.welcome-copy { position: relative; z-index: 1; max-width: 470px; color: #fff; }
.welcome-copy .card-kicker { color: #b4c4b5; }
.welcome-copy h2 { max-width: 410px; margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.welcome-copy p:not(.card-kicker) { max-width: 425px; margin-bottom: 21px; color: #c2cdc3; font-size: .86rem; line-height: 1.55; }
.text-link { color: var(--accent); font-size: .8rem; font-weight: 700; text-decoration: none; }
.text-link svg, .section-heading a svg { width: 15px; height: 15px; margin-left: 5px; vertical-align: middle; }
.welcome-orbit { position: absolute; top: -65px; right: 6%; width: 275px; height: 275px; border: 1px solid rgba(217, 243, 107, .25); border-radius: 50%; }
.orbit-ring { position: absolute; inset: 28px; border: 1px solid rgba(217, 243, 107, .15); border-radius: 50%; }
.orbit-card { display: grid; position: absolute; width: 92px; height: 112px; place-items: center; border-radius: 18px; font-size: 1.25rem; font-weight: 800; transform: rotate(12deg); }
.orbit-card-back { top: 57px; left: 44px; color: #d8e4d9; background: #5b7261; font-size: .7rem; transform: rotate(-12deg); }
.orbit-card-front { right: 43px; bottom: 36px; color: #2d4435; background: var(--accent); box-shadow: 0 14px 25px rgba(0, 0, 0, .14); }
.orbit-card svg { width: 22px; height: 22px; }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; letter-spacing: -.04em; }
.section-heading a { color: var(--muted); font-size: .74rem; font-weight: 700; text-decoration: none; }
.section-heading a:hover { color: var(--ink); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 42px; }
.stat-card { min-height: 176px; padding: 22px 23px; border-radius: 22px; }
.stat-card-green { background: var(--green-block); }
.stat-card-yellow { background: var(--yellow-block); }
.stat-card-lilac { background: var(--lilac-block); }
.stat-icon { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 19px; color: var(--ink); background: rgba(255, 255, 255, .58); border-radius: 11px; font-size: .95rem; font-weight: 700; }
.stat-icon svg { width: 16px; height: 16px; }
.stat-card p { margin-bottom: 4px; color: #68766d; font-size: .72rem; font-weight: 600; }
.stat-card strong { display: block; margin-bottom: 11px; font-family: Georgia, serif; font-size: 2.05rem; font-weight: 400; letter-spacing: -.06em; }
.stat-trend { color: #5e8b5d; font-size: .68rem; font-weight: 700; }
.stat-card-yellow .stat-trend { color: #a37b2d; }
.stat-card-lilac .stat-trend { color: #8469a0; }
.stat-trend small { color: #7c8b82; font-size: inherit; font-weight: 500; }

.recent-section { padding: 25px 26px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.consent-list { display: grid; }
.consent-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; min-height: 76px; border-top: 1px solid var(--line); }
.client-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; font-size: .68rem; font-weight: 800; }
.avatar-peach { color: #9c604c; background: #f5d6c8; }
.avatar-blue { color: #50798e; background: #d2e3eb; }
.avatar-yellow { color: #9a7a31; background: #f5e5ac; }
.consent-details { display: grid; gap: 4px; min-width: 0; }
.consent-details strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.consent-details span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.consent-status { padding: 6px 10px; border-radius: 9px; font-size: .64rem; font-weight: 700; }
.is-signed { color: #608a5f; background: #e5f2e2; }
.is-pending { color: #a47a2c; background: #fff3d1; }
.row-action { display: grid; width: 30px; height: 30px; min-height: 30px; padding: 0; place-items: center; color: var(--muted); background: var(--paper); border: 0; border-radius: 10px; cursor: pointer; }
.row-action:hover { color: var(--ink); background: var(--accent); }
.row-action svg { width: 15px; height: 15px; }

.clients-heading { margin-bottom: 32px; }
.clients-page .button-primary { color: var(--ink); text-decoration: none; }
.client-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.client-search-form { display: flex; flex: 1; gap: 9px; min-width: 0; }
.search-field { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 14px; background: var(--paper); border: 1px solid transparent; border-radius: 14px; transition: border-color .2s ease, background .2s ease; }
.search-field:focus-within { background: var(--surface); border-color: #cbd9c9; }
.search-icon { display: grid; color: var(--muted); line-height: 0; }
.search-icon svg { width: 17px; height: 17px; }
.search-field input { width: 100%; min-width: 0; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: .78rem; }
.search-field input::placeholder { color: #a0aaa3; }
.search-button { min-height: 44px; padding: 0 17px; }
.client-filters { display: flex; gap: 9px; }
.select-field select { min-height: 44px; padding: 0 13px; color: var(--muted); background: var(--paper); border: 0; border-radius: 13px; font-size: .73rem; font-weight: 600; outline: 0; cursor: pointer; }
.clear-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; color: var(--muted); border-radius: 13px; font-size: .73rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.clear-button:hover { color: var(--ink); background: var(--paper); }
.client-alert { margin-bottom: 18px; padding: 14px 17px; color: #9b5e55; background: #fbe9e5; border-radius: 15px; font-size: .78rem; font-weight: 600; }
.clients-table-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.table-card-heading { display: flex; align-items: center; justify-content: space-between; padding: 25px 26px 20px; }
.table-card-heading h2 { display: inline; margin: 0 10px 0 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; letter-spacing: -.04em; }
.table-card-heading span { color: var(--muted); font-size: .7rem; }
.table-caption { color: #a0aaa3 !important; }
.table-scroll { overflow-x: auto; }
.clients-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.clients-table th { padding: 11px 18px; color: #a0aaa3; background: #fafbf9; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.clients-table th:first-child, .clients-table td:first-child { padding-left: 26px; }
.clients-table th:last-child, .clients-table td:last-child { padding-right: 26px; text-align: right; }
.clients-table td { padding: 13px 18px; color: #68756c; border-bottom: 1px solid var(--line); font-size: .72rem; white-space: nowrap; }
.clients-table tbody tr:last-child td { border-bottom: 0; }
.clients-table tbody tr:hover { background: #fcfdfb; }
.table-client { display: flex; align-items: center; gap: 11px; }
.table-client .client-avatar { flex: 0 0 38px; width: 38px; height: 38px; }
.table-client strong, .table-client small { display: block; }
.table-client strong { color: var(--ink); font-size: .76rem; }
.table-client small { margin-top: 3px; color: #a0aaa3; font-size: .63rem; }
.contact-pill { padding: 6px 9px; color: #69866a; background: #edf6eb; border-radius: 8px; font-size: .64rem; font-weight: 700; }
.role-pill { padding: 6px 9px; border-radius: 8px; font-size: .64rem; font-weight: 700; }
.role-admin { color: #8067a0; background: #eee8f8; }
.role-employee { color: #69866a; background: #edf6eb; }
.user-status { display: inline-block; padding: 6px 9px; border-radius: 8px; font-size: .64rem; font-weight: 700; }
.is-user-active { color: #608a5f; background: #e5f2e2; }
.is-user-inactive { color: #aa6259; background: #fbe9e5; }
.password-pending { display: block; margin-top: 4px; color: #a37b2d; font-size: .61rem; }
.category-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #69866a; background: var(--green-block); border-radius: 13px; }
.category-avatar svg { width: 17px; height: 17px; }
.slug-value { color: #8a9690; font-size: .68rem; }
.template-count { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .7rem; }
.template-count svg { width: 14px; height: 14px; }
.table-actions { display: flex; justify-content: flex-end; gap: 6px; }
.table-actions form { margin: 0; }
.button-danger.row-action { color: #aa6259; background: #fbe9e5; }
.button-danger.row-action:hover { color: #fff; background: #c86d60; }
.empty-table { height: 190px; color: var(--muted) !important; text-align: center !important; white-space: normal !important; }
.empty-table > * { display: block; }
.empty-table strong { margin: 10px 0 5px; color: var(--ink); font-size: .84rem; }
.empty-table span:last-child { font-size: .72rem; }
.empty-icon { display: grid !important; width: 38px; height: 38px; margin: 0 auto; place-items: center; color: var(--accent-dark); background: var(--green-block); border-radius: 13px; font-size: 1.2rem; }
.empty-icon svg { width: 18px; height: 18px; }
.table-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 17px 26px; border-top: 1px solid var(--line); }
.pagination-pages { display: flex; gap: 5px; }
.pagination-page, .pagination-arrow { display: grid; width: 30px; height: 30px; place-items: center; color: var(--muted); border-radius: 9px; font-size: .72rem; font-weight: 700; text-decoration: none; }
.pagination-page:hover, .pagination-arrow:hover { color: var(--ink); background: var(--paper); }
.pagination-page.is-current { color: var(--ink); background: var(--accent); }
.pagination-arrow { background: var(--paper); font-size: .9rem; }
.pagination-arrow.is-disabled { opacity: .35; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 31px; color: var(--muted); font-size: .76rem; font-weight: 700; text-decoration: none; }
.back-link svg { width: 16px; height: 16px; color: var(--ink); }
.back-link:hover { color: var(--ink); }
.profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.profile-identity { display: flex; align-items: center; gap: 17px; }
.profile-avatar { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 23px; font-size: 1.15rem; font-weight: 800; }
.profile-identity .eyebrow { margin-bottom: 8px; }
.profile-identity h1 { margin-bottom: 8px; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.profile-id { color: #a0aaa3; font-size: .68rem; }
.profile-actions { display: flex; align-items: center; gap: 9px; }
.profile-details-card, .profile-consents-card { margin-bottom: 24px; padding: 27px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.profile-card-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.profile-card-heading .card-kicker { margin-bottom: 7px; }
.profile-card-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 1.42rem; font-weight: 400; letter-spacing: -.04em; }
.profile-active { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #608a5f; background: #e5f2e2; border-radius: 9px; font-size: .64rem; font-weight: 700; }
.profile-active span { width: 6px; height: 6px; background: #8ecb73; border-radius: 50%; }
.profile-archived { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #8a7041; background: #fff3d1; border-radius: 9px; font-size: .64rem; font-weight: 700; }
.profile-archived span { width: 6px; height: 6px; background: #d5a950; border-radius: 50%; }
.profile-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; padding-top: 21px; border-top: 1px solid var(--line); }
.profile-detail span, .profile-detail strong { display: block; }
.profile-detail span { margin-bottom: 6px; color: #a0aaa3; font-size: .66rem; }
.profile-detail strong { color: var(--ink); font-size: .78rem; font-weight: 600; }
.profile-consents-card .section-heading { margin-bottom: 21px; }
.profile-consents-card .section-heading > div { display: flex; align-items: baseline; gap: 12px; }
.section-subtitle { color: #a0aaa3; font-size: .68rem; }
.dark-link { color: var(--ink); }
.consents-table-wrap { overflow-x: auto; margin: 0 -28px; padding: 0 28px; }
.consents-table { width: 100%; min-width: 650px; border-collapse: collapse; text-align: left; }
.consents-table th { padding: 11px 16px; color: #a0aaa3; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .63rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.consents-table th:first-child, .consents-table td:first-child { padding-left: 0; }
.consents-table th:last-child, .consents-table td:last-child { padding-right: 0; text-align: right; }
.consents-table td { padding: 14px 16px; color: #68756c; border-bottom: 1px solid var(--line); font-size: .72rem; white-space: nowrap; }
.consents-table tbody tr:last-child td { border-bottom: 0; }
.consents-table td strong, .consents-table td small { display: block; }
.consents-table td strong { color: var(--ink); font-size: .76rem; }
.consents-table td small { margin-top: 4px; color: #a0aaa3; font-size: .63rem; }
.mock-notice { margin: 17px 0 0; padding: 11px 13px; color: #8a7a55; background: #fff8df; border-radius: 11px; font-size: .67rem; }
.profile-error { display: grid; justify-items: center; max-width: 620px; margin: 30px auto; padding: 55px 25px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.profile-error h1 { margin: 18px 0 23px; font-size: 1.7rem; }
.edit-heading { margin-bottom: 30px; }
.edit-heading h1 { margin-bottom: 10px; }
.client-edit-form { display: grid; gap: 18px; max-width: 900px; }
.edit-card { padding: 27px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.edit-card-heading { margin-bottom: 23px; }
.edit-card-heading .card-kicker { margin-bottom: 7px; }
.edit-card-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 1.42rem; font-weight: 400; letter-spacing: -.04em; }
.edit-fields-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field > span { color: #77827c; font-size: .68rem; font-weight: 700; }
.form-field b { color: #c86d60; font-weight: 700; }
.form-field input, .form-field select { width: 100%; min-height: 45px; padding: 0 13px; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 13px; font: inherit; font-size: .78rem; outline: 0; }
.form-field input:focus, .form-field select:focus { background: var(--surface); border-color: #cbd9c9; box-shadow: 0 0 0 3px rgba(217, 243, 107, .18); }
.form-field input::placeholder { color: #a0aaa3; }
.form-field select { cursor: pointer; }
.category-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.category-description-field { grid-column: 1 / -1; }
.form-field > span small { margin-left: 5px; color: #a0aaa3; font-size: .62rem; font-weight: 500; }
.form-field textarea { width: 100%; min-height: 105px; padding: 13px; resize: vertical; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 13px; font: inherit; font-size: .78rem; outline: 0; }
.form-field textarea:focus { background: var(--surface); border-color: #cbd9c9; box-shadow: 0 0 0 3px rgba(217, 243, 107, .18); }
.category-status-card { padding-block: 21px; }
.template-filter-form { display: flex; gap: 9px; }
.template-filter-form .select-field select { min-width: 230px; }
.template-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #8067a0; background: var(--lilac-block); border-radius: 13px; }
.template-avatar svg { width: 17px; height: 17px; }
.category-label { color: #69866a; font-size: .7rem; font-weight: 700; }
.version-label { color: var(--ink); font-size: .72rem; font-weight: 700; }
.version-label small { color: var(--muted); font-size: .64rem; font-weight: 500; }
.template-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.template-description-field { grid-column: 1 / -1; }
.content-editor-card { max-width: 1000px; }
.format-toolbar { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
.format-toolbar button { display: grid; width: 32px; height: 32px; place-items: center; color: var(--muted); background: var(--paper); border: 0; border-radius: 9px; cursor: pointer; }
.format-toolbar button:hover { color: var(--ink); background: var(--green-block); }
.format-toolbar button svg { width: 15px; height: 15px; }
.format-toolbar span { margin-left: 8px; color: #a0aaa3; font-size: .65rem; }
.template-content-editor { width: 100%; min-height: 330px; padding: 17px; resize: vertical; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 15px; font: inherit; font-size: .8rem; line-height: 1.65; outline: 0; }
.template-content-editor:focus { background: var(--surface); border-color: #cbd9c9; box-shadow: 0 0 0 3px rgba(217, 243, 107, .18); }
.editor-helper { margin: 10px 0 0; color: #a0aaa3; font-size: .65rem; line-height: 1.5; }
.form-alert { max-width: 900px; margin-bottom: 18px; padding: 15px 17px; color: #9b5e55; background: #fbe9e5; border-radius: 15px; font-size: .76rem; }
.form-alert strong { display: block; margin-bottom: 7px; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-alert li + li { margin-top: 3px; }
.edit-form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.user-profile-card { max-width: 900px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.user-profile-identity { display: flex; align-items: center; gap: 17px; padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.user-profile-identity h2 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 400; letter-spacing: -.04em; }
.user-profile-identity p { margin-bottom: 7px; }
.user-profile-identity div > span { color: var(--muted); font-size: .75rem; }
.user-profile-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 24px; }
.user-profile-details span, .user-profile-details strong { display: block; }
.user-profile-details span { margin-bottom: 6px; color: #a0aaa3; font-size: .66rem; }
.user-profile-details strong { color: var(--ink); font-size: .78rem; }
.profile-permission-note { display: flex; gap: 8px; max-width: 900px; margin-bottom: 18px; padding: 14px 17px; color: #7e6c43; background: #fff8df; border-radius: 15px; font-size: .72rem; }
.profile-permission-note strong { color: #6f5c35; }
.profile-permission-note span { color: #9a875e; }
.form-helper { max-width: 620px; margin: -7px 0 23px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.password-fields-grid { grid-template-columns: repeat(3, 1fr); }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 30px 20px; background: radial-gradient(circle at 15% 15%, #e6f0d9, transparent 34%), var(--paper); }
.auth-card { width: min(100%, 430px); padding: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 20px 45px rgba(45, 61, 48, .08); }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 60px; color: var(--ink); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.auth-heading { margin-bottom: 28px; }
.auth-heading .eyebrow { margin-bottom: 12px; }
.auth-heading h1 { margin-bottom: 11px; font-size: 2.55rem; }
.auth-heading p:last-child { margin-bottom: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.auth-form { display: grid; gap: 17px; }
.auth-form .button-primary { width: 100%; margin-top: 4px; }
.auth-note { margin: 25px 0 0; color: #a0aaa3; font-size: .66rem; line-height: 1.5; text-align: center; }
.auth-logout { display: block; margin-top: 25px; color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.auth-logout:hover { color: var(--ink); }
.generated-password { max-width: 700px; padding: 30px; background: var(--green-block); border-radius: 24px; }
.generated-password h2 { margin-bottom: 18px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.generated-password code { display: inline-block; margin-bottom: 17px; padding: 12px 15px; color: var(--ink); background: var(--surface); border-radius: 12px; font-size: 1rem; font-weight: 700; letter-spacing: .08em; }
.generated-password p:not(.card-kicker) { max-width: 520px; margin-bottom: 20px; color: #687b6c; font-size: .75rem; line-height: 1.5; }
.user-fields-grid { grid-template-columns: 1fr 1fr; }
.toggle-field { display: flex; align-items: center; gap: 10px; min-height: 45px; cursor: pointer; }
.toggle-field input { width: 18px; height: 18px; accent-color: var(--accent-dark); }
.toggle-field strong, .toggle-field small { display: block; }
.toggle-field strong { color: var(--ink); font-size: .75rem; }
.toggle-field small { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.archive-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 16px 18px; color: #7e6c43; background: #fff8df; border: 1px solid #f1e5be; border-radius: 18px; }
.archive-notice-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; color: #8d7541; background: #f7e8b6; border-radius: 11px; }
.archive-notice-icon svg { width: 16px; height: 16px; }
.archive-notice strong, .archive-notice span { display: block; }
.archive-notice strong { margin-bottom: 3px; color: #6f5c35; font-size: .74rem; }
.archive-notice div span { color: #9a875e; font-size: .68rem; }
.settings-page { max-width: 980px; }
.settings-heading { margin-bottom: 32px; }
.settings-card { max-width: 900px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.settings-card-heading .card-kicker { margin-bottom: 7px; }
.settings-card-heading h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; letter-spacing: -.04em; }
.settings-card-heading p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.settings-heading-icon { width: 22px; height: 22px; padding: 14px; color: var(--ink); background: var(--green-block); border-radius: 15px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 24px; }
.setting-copy { display: grid; gap: 6px; }
.setting-copy strong { color: var(--ink); font-size: .82rem; }
.setting-copy span { max-width: 620px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.ios-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.ios-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ios-switch-track { display: flex; align-items: center; width: 54px; height: 32px; padding: 3px; background: #cbd3cd; border-radius: 18px; box-shadow: inset 0 1px 3px rgba(31, 48, 37, .16); transition: background .2s ease, box-shadow .2s ease; }
.ios-switch-thumb { width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(33, 48, 38, .2); transition: transform .2s ease; }
.ios-switch input:checked + .ios-switch-track { background: #92b846; box-shadow: inset 0 1px 3px rgba(75, 101, 32, .25); }
.ios-switch input:checked + .ios-switch-track .ios-switch-thumb { transform: translateX(22px); }
.ios-switch input:focus-visible + .ios-switch-track { outline: 3px solid rgba(217, 243, 107, .5); outline-offset: 3px; }
.settings-actions { display: flex; justify-content: flex-end; max-width: 900px; margin-top: 18px; }
.consent-filters { display: grid; gap: 10px; margin-bottom: 22px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.consent-filter-main, .consent-filter-secondary { display: flex; align-items: center; gap: 9px; }
.consent-filter-main .search-field { flex: 1; }
.consent-filter-main .select-field select { min-width: 160px; }
.consent-filter-secondary { justify-content: flex-end; }
.date-field { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px; background: var(--paper); border-radius: 13px; }
.date-field span { color: var(--muted); font-size: .66rem; font-weight: 700; }
.date-field input { min-width: 128px; color: var(--muted); background: transparent; border: 0; font: inherit; font-size: .7rem; outline: 0; }
.consent-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #50798e; background: #d2e3eb; border-radius: 13px; }
.consent-avatar svg { width: 17px; height: 17px; }
.consents-list-table { min-width: 920px; }
.consent-create-page { max-width: 980px; }
.consent-create-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
.consent-date-field { max-width: 300px; }
.consent-detail-page { max-width: 1120px; }
.consent-detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.consent-detail-heading h1 { margin-bottom: 9px; }
.consent-detail-heading .consent-status { margin-bottom: 7px; }
.consent-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.consent-info-card, .consent-content-card, .consent-file-card { padding: 27px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 30px rgba(45, 61, 48, .035); }
.consent-info-card .profile-card-heading, .consent-content-card .profile-card-heading { margin-bottom: 22px; }
.consent-card-icon { width: 21px; height: 21px; padding: 12px; color: var(--ink); background: var(--green-block); border-radius: 13px; }
.consent-info-list { display: grid; gap: 17px; padding-top: 21px; border-top: 1px solid var(--line); }
.consent-info-list span, .consent-info-list strong { display: block; }
.consent-info-list span { margin-bottom: 5px; color: #a0aaa3; font-size: .65rem; }
.consent-info-list strong { color: var(--ink); font-size: .77rem; }
.consent-content-card { margin-bottom: 18px; }
.consent-content-preview { min-height: 180px; padding: 21px; color: #526058; background: var(--paper); border-radius: 15px; font-size: .82rem; line-height: 1.7; white-space: pre-wrap; }
.consent-file-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.consent-file-card h2 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.consent-file-card p { margin: 0; color: var(--muted); font-size: .72rem; }
.file-pending { display: inline-flex; align-items: center; gap: 7px; color: #a37b2d; background: var(--yellow-block); border-radius: 9px; padding: 8px 11px; font-size: .65rem; font-weight: 700; }
.file-pending svg { width: 14px; height: 14px; }

@media (max-width: 850px) {
    .app-shell { grid-template-columns: 198px minmax(0, 1fr); }
    .sidebar { padding-inline: 13px; }
    .main-content { padding-inline: 4vw; }
    .welcome-orbit { right: -25px; opacity: .8; }
    .client-toolbar { align-items: stretch; flex-direction: column; }
    .client-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .select-field select { width: 100%; }
    .profile-heading { align-items: flex-start; flex-direction: column; }
    .profile-actions { width: 100%; flex-wrap: wrap; }
    .edit-fields-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .site-header { min-height: 74px; padding-inline: 5vw; }
    .user-summary { display: none; }
    .user-menu-popover { left: auto; right: 0; }
    .app-shell { display: block; min-height: calc(100vh - 74px); }
    .sidebar { padding: 14px 5vw; border-right: 0; border-bottom: 1px solid var(--line); }
    .sidebar-nav { display: flex; gap: 5px; overflow-x: auto; }
    .nav-section { display: flex; gap: 5px; }
    .nav-section + .nav-section { margin-top: 0; }
    .nav-label, .nav-label-spaced, .sidebar-footer, .nav-count { display: none; }
    .nav-link { flex: 0 0 auto; min-height: 42px; padding-inline: 10px; border-radius: 13px; font-size: .76rem; }
    .nav-icon { width: 23px; height: 23px; }
    .main-content { padding: 38px 5vw 60px; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
    .button-primary { width: 100%; justify-content: center; }
    .welcome-card { min-height: 320px; padding: 28px 25px; }
    .welcome-orbit { top: auto; right: -25px; bottom: -100px; transform: scale(.75); }
    .stats-grid { grid-template-columns: 1fr; gap: 10px; }
    .stat-card { min-height: 140px; padding: 18px 20px; }
    .stat-icon { float: right; margin: 0; }
    .stat-card strong { font-size: 1.8rem; }
    .recent-section { padding: 21px 16px 6px; border-radius: 20px; }
    .consent-row { grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 10px; min-height: 70px; }
    .consent-status { display: none; }
    .table-card-heading { align-items: flex-start; flex-direction: column; gap: 8px; padding-inline: 18px; }
    .table-caption { display: none; }
    .clients-table th:first-child, .clients-table td:first-child { padding-left: 18px; }
    .clients-table th:last-child, .clients-table td:last-child { padding-right: 18px; }
    .table-pagination { padding-inline: 18px; }
    .profile-avatar { width: 58px; height: 58px; border-radius: 18px; }
    .profile-details-card, .profile-consents-card { padding: 21px 18px; border-radius: 20px; }
    .profile-card-heading { gap: 12px; }
    .profile-active { white-space: nowrap; }
    .profile-details-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
    .profile-consents-card .section-heading > div { align-items: flex-start; flex-direction: column; gap: 5px; }
    .consents-table-wrap { margin-inline: -18px; padding-inline: 18px; }
    .profile-actions .button-primary { width: 100%; }
    .edit-card { padding: 21px 18px; border-radius: 20px; }
    .edit-fields-grid { grid-template-columns: 1fr; }
    .user-profile-card { padding: 21px 18px; border-radius: 20px; }
    .user-profile-details { grid-template-columns: 1fr; gap: 16px; }
    .password-fields-grid { grid-template-columns: 1fr; }
    .user-fields-grid { grid-template-columns: 1fr; }
    .category-form-fields { grid-template-columns: 1fr; }
    .category-description-field { grid-column: auto; }
    .template-form-fields { grid-template-columns: 1fr; }
    .template-description-field { grid-column: auto; }
    .template-filter-form, .template-filter-form .select-field, .template-filter-form .select-field select { width: 100%; }
    .template-filter-form .select-field select { min-width: 0; }
    .format-toolbar span { display: none; }
    .consent-filter-main, .consent-filter-secondary { align-items: stretch; flex-direction: column; }
    .consent-filter-main .select-field, .consent-filter-main .select-field select, .consent-filter-secondary .select-field, .consent-filter-secondary .select-field select, .date-field { width: 100%; }
    .date-field { justify-content: space-between; }
    .date-field input { flex: 1; text-align: right; }
    .consent-detail-heading { align-items: flex-start; flex-direction: column; }
    .consent-detail-grid { grid-template-columns: 1fr; }
    .consent-info-card, .consent-content-card, .consent-file-card { padding: 21px 18px; border-radius: 20px; }
    .consent-file-card { align-items: flex-start; flex-direction: column; }
    .consent-create-fields { grid-template-columns: 1fr; }
    .consent-date-field { max-width: none; }
    .settings-card { padding: 21px 18px; border-radius: 20px; }
    .settings-card-heading { gap: 12px; }
    .setting-row { align-items: flex-start; }
    .settings-actions .button-primary { width: 100%; }
    .edit-form-actions { justify-content: stretch; }
    .edit-form-actions .button-secondary, .edit-form-actions .button-primary { flex: 1; }
    .auth-card { padding: 28px 22px; border-radius: 23px; }
    .auth-brand { margin-bottom: 42px; }
    .auth-heading h1 { font-size: 2.15rem; }
}