/* Global Hand — unified responsive breakpoint
   Phones: up to 700px
   Desktop/tablet layout: from 701px
   Applied globally on 2026-08-01.
*/

:root {
    --navy: #082f60;
    --blue: #0879e8;
    --sky: #eaf4ff;
    --ink: #162336;
    --muted: #627087;
    --line: #d9e3ef;
    --danger: #b42318;
    --success: #087a51;
    --white: #fff;
}

* { box-sizing: border-box; }
html { font-family: Tahoma, Arial, sans-serif; color: var(--ink); background: #f5f8fc; }
body { margin: 0; min-height: 100vh; }
a { color: var(--blue); }
.site-header {
    min-height: 74px;
    display: flex;
    align-items: center;
    padding: 12px clamp(20px, 5vw, 72px);
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.main-nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.main-nav a { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 700; }
.main-nav a:hover { color: var(--blue); }
.brand { display: inline-flex; align-items: center; color: var(--navy); text-decoration: none; direction: ltr; }
.brand img { display: block; width: 178px; height: 54px; object-fit: contain; object-position: left center; }
.page-shell { width: min(100% - 32px, 1080px); margin: 48px auto; }
.auth-card, .dashboard-card, .content-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 18px;
    padding: clamp(24px, 5vw, 46px); box-shadow: 0 18px 50px rgba(8, 47, 96, .08);
}
.auth-card, .dashboard-card { max-width: 740px; margin-inline: auto; }
.content-card { width: min(100%, 980px); }
.content-card h2 { color: var(--navy); margin-top: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
textarea { width: 100%; border: 1px solid #bdcad9; border-radius: 10px; padding: 12px 14px; font: inherit; resize: vertical; }
.editor-form, .education-form { background: #f8fbff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.item-list { display: grid; gap: 12px; margin-top: 24px; }
.record-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.record-card h2 { margin: 0 0 5px; font-size: 19px; }
.record-card p { margin: 0 0 6px; color: var(--muted); }
.record-actions { display: flex; gap: 8px; align-items: center; }
.record-actions form { display: block; }
.record-actions button { margin: 0; padding: 8px 12px; }
button.danger { background: #b42318; }
.button-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 9px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.upload-panel { background: #f8fbff; border: 1px dashed #9abce0; border-radius: 14px; padding: 20px; }
.file-preview, .visual-preview { margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--sky); color: var(--navy); }
.visual-preview img { display: block; max-width: min(100%, 420px); max-height: 420px; margin: 0 auto 12px; border-radius: 8px; object-fit: contain; background: #fff; }
.photo-editor { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.profile-photo-preview, .photo-placeholder { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sky); }
.photo-placeholder { display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 42px; font-weight: 800; }
button.compact { width: auto; padding: 8px 12px; }
.danger-zone { margin-top: 34px; padding: 20px; border: 1px solid #efb3ad; border-radius: 14px; background: #fff6f5; }
.danger-zone h2 { color: var(--danger); }
.inline-form { display: grid; grid-template-columns: 2fr 1fr auto; align-items: end; gap: 12px; }
.inline-form button { margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tag-list form { display: flex; flex-direction: row; align-items: center; gap: 8px; background: var(--sky); color: var(--navy); border-radius: 999px; padding: 6px 8px 6px 14px; }
button.tag-delete { margin: 0; padding: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); }
.eyebrow { color: var(--blue); font-weight: 700; font-size: 14px; }
h1 { color: var(--navy); margin: 8px 0 10px; font-size: clamp(28px, 5vw, 40px); }
.lead { color: var(--muted); line-height: 1.8; margin: 0 0 26px; }
form { display: grid; gap: 10px; }
label { font-weight: 700; margin-top: 8px; }
input, select {
    width: 100%; border: 1px solid #bdcad9; border-radius: 10px; padding: 12px 14px;
    font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus { outline: 3px solid rgba(8, 121, 232, .15); border-color: var(--blue); }
small { color: var(--muted); line-height: 1.6; }
.field-error { color: var(--danger); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.7; }
.check-row input { width: 18px; height: 18px; margin-top: 4px; flex: 0 0 auto; }
button {
    margin-top: 14px; border: 0; border-radius: 10px; padding: 13px 18px;
    background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
button:hover { background: var(--navy); }
button.secondary { background: var(--navy); }
.alert { padding: 12px 14px; border-radius: 10px; margin: 14px 0; line-height: 1.6; }
.alert-error { color: var(--danger); background: #fff0ee; border: 1px solid #f1b7b0; }
.alert-success { color: var(--success); background: #eafaf4; border: 1px solid #a7dfca; }
.form-footer { margin: 22px 0 0; text-align: center; color: var(--muted); }
.code-input { direction: ltr; text-align: center; font-size: 28px; letter-spacing: 10px; }
.profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.profile-summary div { background: var(--sky); border-radius: 12px; padding: 16px; }
.profile-summary dt { color: var(--muted); font-size: 13px; }
.profile-summary dd { color: var(--navy); font-weight: 800; margin: 8px 0 0; overflow-wrap: anywhere; }
.hero { padding: clamp(40px, 8vw, 86px) clamp(20px, 6vw, 74px); border-radius: 24px; background: linear-gradient(135deg, #f7fbff, #eaf4ff); border: 1px solid var(--line); }
.hero h1 { max-width: 820px; font-size: clamp(34px, 6vw, 62px); line-height: 1.25; }
.hero .lead { max-width: 760px; font-size: 18px; }
.search-box { grid-template-columns: 2fr 1fr auto; align-items: end; background: #fff; padding: 18px; border-radius: 16px; box-shadow: 0 16px 40px rgba(8,47,96,.10); }
.search-box button { margin: 0; }
.advanced-search { grid-column: 1/-1; margin-top: 8px; }
.advanced-search summary { color: var(--blue); font-weight: 700; cursor: pointer; }
.advanced-search .form-grid { margin-top: 14px; }
.public-section { margin: 54px 0; }
.public-section h2 { color: var(--navy); font-size: 30px; margin: 8px 0 18px; }
.profession-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.profession-grid a { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); text-decoration: none; font-weight: 700; }
.profession-grid a:hover { border-color: var(--blue); color: var(--blue); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.steps-grid > div { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.steps-grid strong { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); }
.steps-grid h3 { color: var(--navy); }
.professional-invite { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 30px; border-radius: 18px; color: #fff; background: var(--navy); }
.professional-invite h2, .professional-invite .eyebrow { color: #fff; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 800; white-space: nowrap; }
.primary-link { color: #fff; background: var(--blue); }
.secondary-link { color: var(--navy); background: var(--sky); }
.disabled { opacity: .6; cursor: not-allowed; }
.search-layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; }
.filter-panel { align-self: start; position: sticky; top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.filter-panel h2 { color: var(--navy); margin-top: 0; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.section-heading h1 { margin-bottom: 0; }
.result-list { display: grid; gap: 14px; margin-top: 22px; }
.professional-card { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.result-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 800; font-size: 24px; }
.result-photo img { width: 100%; height: 100%; object-fit: cover; }
.result-photo.large { width: 132px; height: 132px; font-size: 34px; }
.result-content h2 { color: var(--navy); margin: 4px 0 8px; }
.result-content p { margin: 5px 0; color: var(--muted); }
.ghid { color: var(--blue); font-weight: 800; direction: ltr; display: inline-block; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.pagination a { min-width: 36px; padding: 8px; text-align: center; border-radius: 8px; background: #fff; border: 1px solid var(--line); text-decoration: none; }
.pagination a.active { color: #fff; background: var(--blue); }
.empty-state { padding: 50px; text-align: center; border: 1px dashed #9abce0; border-radius: 16px; background: #f8fbff; }
.public-profile { max-width: 900px; margin: auto; padding: clamp(24px,5vw,48px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(8,47,96,.08); }
.profile-hero { display: flex; align-items: center; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 28px 0; }
.summary-grid div { display: grid; gap: 6px; padding: 18px; border-radius: 12px; background: var(--sky); }
.summary-grid span { color: var(--muted); }
.public-profile section h2 { color: var(--navy); }
.readable { line-height: 1.9; color: #34435a; }
.public-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.public-tags span { padding: 8px 12px; border-radius: 999px; background: var(--sky); color: var(--navy); }
.unlock-box { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 34px; padding: 24px; border-radius: 14px; background: #f1f7ff; border: 1px solid #b9d8f7; }
.access-actions { display: flex; gap: 12px; margin: 20px 0; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(20px,5vw,72px); color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.price-card { display: grid; gap: 6px; padding: 20px; margin: 18px 0; border-radius: 14px; background: var(--navy); color: #fff; }
.price-card strong { font-size: 28px; }
.plain-list { display: grid; gap: 8px; line-height: 1.7; padding-inline-start: 22px; }
.sandbox-banner { margin: 16px 0; padding: 13px; border-radius: 10px; color: #704d00; background: #fff5cc; border: 1px solid #ecd271; }
.checkout-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.checkout-summary div { padding: 14px; border-radius: 10px; background: var(--sky); }
.checkout-summary dt { color: var(--muted); }
.checkout-summary dd { margin: 6px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.test-code { display: grid; gap: 8px; margin: 18px 0; padding: 20px; border: 2px dashed var(--blue); border-radius: 14px; text-align: center; }
.test-code strong { color: var(--navy); font-size: 25px; direction: ltr; }
.access-code { font-size: 19px; letter-spacing: 2px; }
.balance-badge { min-width: 105px; display: grid; place-items: center; padding: 14px; border-radius: 14px; color: #fff; background: var(--navy); }
.balance-badge strong { font-size: 32px; }
.unlock-form { margin: 20px 0; padding: 18px; border: 1px solid #b9d8f7; border-radius: 12px; background: #f1f7ff; }
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.contact-grid div { display: grid; gap: 6px; padding: 14px; border-radius: 10px; background: var(--sky); overflow-wrap: anywhere; }
.contact-grid span { color: var(--muted); }
.notice-box { margin-top: 30px; padding: 18px; border: 1px solid #e9c579; border-radius: 12px; color: #624600; background: #fff9e8; line-height: 1.8; }
.admin-shell { max-width: none; }
.admin-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin: 24px 0; }
.admin-stats div { display: grid; gap: 6px; padding: 18px; border-radius: 12px; background: var(--navy); color: #fff; }
.admin-stats strong { font-size: 30px; }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
th { color: var(--navy); background: var(--sky); white-space: nowrap; }
.admin-search { grid-template-columns: 1fr auto; align-items: end; margin: 18px 0; }
.admin-search button, .admin-action button { margin: 0; }
.language-switcher { margin: 0; }
.language-switcher select { min-width: 110px; margin: 0; padding: 8px; }
.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; }
.admin-action { grid-template-columns: minmax(140px,1fr) auto; }
.admin-ticket { display: grid; grid-template-columns: 1fr minmax(280px,420px); gap: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.report-box { margin-top: 24px; padding: 16px; border-top: 1px solid var(--line); }
.report-box summary { color: var(--muted); cursor: pointer; font-weight: 700; }
.report-box form { margin-top: 14px; }
@media (max-width: 700px) {
    .page-shell { margin: 24px auto; }
    .profile-summary { grid-template-columns: 1fr; }
    .site-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .main-nav { margin-inline-start: 0; }
    .form-grid, .inline-form { grid-template-columns: 1fr; }
    .record-card { align-items: flex-start; flex-direction: column; }
    .photo-editor { grid-template-columns: 1fr; }
    .search-box, .search-layout, .professional-card { grid-template-columns: 1fr; }
    .profession-grid, .steps-grid { grid-template-columns: 1fr; }
    .professional-invite, .profile-hero, .unlock-box, .site-footer { align-items: flex-start; flex-direction: column; }
    .filter-panel { position: static; }
    .checkout-summary, .contact-grid { grid-template-columns: 1fr; }
    .admin-stats { grid-template-columns: repeat(2,1fr); }
    .admin-ticket { grid-template-columns: 1fr; }
}


/* Global Hand staging visual refinements v2 — 2026-07-26 */
.site-header {
    gap: 18px;
}

.brand,
.language-switcher {
    flex: 0 0 auto;
}

.main-nav {
    flex: 1 1 auto;
    margin-inline-start: 0;
    justify-content: center;
    flex-wrap: nowrap;
}

.main-nav a {
    white-space: nowrap;
    font-size: 15px;
}

.page-shell {
    margin-top: 32px;
    margin-bottom: 38px;
}

.hero {
    padding: clamp(34px, 5vw, 56px) clamp(20px, 5vw, 58px);
}

.hero h1 {
    max-width: 920px;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.25;
}

.hero .lead {
    max-width: 900px;
}

.profession-grid a {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}

.site-footer > div[dir="ltr"] {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .site-header {
        flex-wrap: wrap;
    }

    .main-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .hero h1 {
        font-size: clamp(30px, 9vw, 42px);
    }
}


/* Global Hand hero-title size refinement v3 — 2026-07-26 */
.hero h1 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.28;
    max-width: 860px;
}

@media (max-width: 760px) {
    .hero h1 {
        font-size: clamp(26px, 8vw, 34px);
    }
}


/* Global Hand hero title — single desktop line v4 */
.hero h1 {
    max-width: none;
    width: 100%;
    font-size: clamp(27px, 2.55vw, 35px);
    line-height: 1.3;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .hero h1 {
        white-space: normal;
        font-size: clamp(26px, 7vw, 34px);
    }
}

/* Global Hand professional dashboard and sidebar — 2026-07-30 */
.professional-area {
    background: #f4f8fd;
}

.professional-app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    direction: inherit;
}

.professional-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 12px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(24, 111, 224, .28), transparent 34%),
        linear-gradient(180deg, #072b59 0%, #031f43 100%);
    box-shadow: 0 0 40px rgba(3, 31, 67, .16);
}

.professional-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.professional-brand {
    display: block;
    padding: 8px 10px;
    border-radius: 14px;
    background: #fff;
}

.professional-brand img {
    display: block;
    width: 145px;
    height: 42px;
    object-fit: contain;
}

.professional-sidebar-close {
    display: none;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-size: 26px;
}

.professional-sidebar-profile {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 16px 0 14px;
    padding: 14px 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
}

.professional-sidebar-avatar {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1679ef, #0a3a79);
    font-size: 22px;
    font-weight: 900;
}

.professional-sidebar-profile strong {
    font-size: 16px;
}

.professional-sidebar-profile span,
.professional-sidebar-profile small {
    color: #c5d5ea;
}

.professional-side-nav {
    display: grid;
    gap: 3px;
}

.professional-side-nav a {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 11px;
    color: #dce8f8;
    text-decoration: none;
    font-weight: 700;
    transition: .2s ease;
}

.professional-side-nav a span {
    display: grid;
    place-items: center;
    font-size: 17px;
}

.professional-side-nav a:hover,
.professional-side-nav a.is-active {
    color: #fff;
    background: linear-gradient(135deg, #1683ff, #2d5ef0);
    box-shadow: 0 9px 22px rgba(18, 107, 236, .24);
}

.professional-sidebar-logout {
    margin-top: auto;
    padding-top: 22px;
}

.professional-sidebar-logout button {
    width: 100%;
    margin: 0;
    color: #ffcbc7;
    background: rgba(180, 35, 24, .16);
    border: 1px solid rgba(255, 97, 85, .24);
}

.professional-sidebar-logout button:hover {
    color: #fff;
    background: #b42318;
}

.professional-main-column {
    min-width: 0;
}

.professional-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px clamp(14px, 2.5vw, 28px);
    border-bottom: 1px solid #dfe8f3;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
}

.professional-sidebar-toggle {
    display: none;
    width: auto;
    margin: 0 auto 0 0;
    padding: 10px 14px;
}

[dir="ltr"] .professional-sidebar-toggle {
    margin: 0 0 0 auto;
}

.professional-page-shell {
    width: min(100% - 24px, 1180px);
    margin: 22px auto 32px;
}

.professional-dashboard {
    display: grid;
    gap: 18px;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 2px 2px;
}

.dashboard-welcome h1 {
    margin-bottom: 6px;
    font-size: clamp(25px, 2.2vw, 34px);
}

.dashboard-welcome p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.profile-visibility {
    flex: 0 0 auto;
    padding: 10px 15px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}

.profile-visibility.is-visible { color: #087a51; background: #e8f8f1; border: 1px solid #a9dfc9; }
.profile-visibility.is-hidden { color: #8a5a00; background: #fff7df; border: 1px solid #efd58e; }
.profile-visibility.is-suspended { color: #b42318; background: #fff0ee; border: 1px solid #efb3ad; }
.profile-visibility.is-draft { color: #53657c; background: #edf2f7; border: 1px solid #ccd7e4; }

.dashboard-primary-grid {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.2fr);
    gap: 18px;
}

.dashboard-secondary-grid {
    display: grid;
    grid-template-columns: 1.35fr .9fr .9fr;
    gap: 18px;
}

.dashboard-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(8, 47, 96, .06);
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-heading h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 19px;
}

.panel-heading > a {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 800;
    background: #eef6ff;
}

.panel-kicker {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.completion-layout {
    display: grid;
    grid-template-columns: 138px 1fr;
    align-items: center;
    gap: 22px;
}

.completion-ring {
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#1e75ed calc(var(--completion-percent) * 1%), #e6eef9 0);
}

.completion-ring::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e5edf7;
}

.completion-ring strong {
    position: relative;
    z-index: 1;
    color: var(--navy);
    font-size: 30px;
}

.completion-checklist {
    display: grid;
    gap: 8px;
}

.completion-check {
    min-height: 38px;
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px solid #e2eaf4;
}

.completion-check span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
}

.completion-check.is-done span { background: #16a36b; }
.completion-check.is-missing span { background: #e39a05; }
.completion-check b { font-size: 13px; }

.quick-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #e0e8f2;
    border-radius: 14px;
    overflow: hidden;
}

.quick-summary-grid > div {
    display: grid;
    gap: 5px;
    padding: 16px;
    border-bottom: 1px solid #e0e8f2;
}

.quick-summary-grid > div:nth-child(odd) {
    border-inline-end: 1px solid #e0e8f2;
}

.quick-summary-grid > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.quick-summary-grid dt {
    color: var(--muted);
    font-size: 12px;
}

.quick-summary-grid dd {
    margin: 0;
    color: var(--navy);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dashboard-readable {
    margin: 0;
    color: #415168;
    line-height: 2;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.activity-grid a {
    display: grid;
    gap: 4px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    background: #f3f8ff;
    border: 1px solid #deebf8;
}

.activity-grid strong {
    color: var(--blue);
    font-size: 26px;
}

.activity-grid span {
    color: var(--navy);
    font-weight: 800;
}

.document-status-list {
    display: grid;
    gap: 10px;
}

.document-status-list > div {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 11px;
    border: 1px solid #e0e8f2;
}

.document-status-list > div > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
}

.document-status-list .is-ready > span { background: #16a36b; }
.document-status-list .is-empty > span { background: #e39a05; }
.document-status-list small { white-space: nowrap; }

.visibility-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.visibility-panel h2 {
    margin: 5px 0 8px;
    color: var(--navy);
}

.visibility-panel p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.visibility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

.dashboard-responsibility-note {
    padding: 14px 18px;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    color: #65738a;
    background: #fff;
    text-align: center;
    line-height: 1.8;
}

.professional-sidebar-backdrop {
    display: none;
}

@media (max-width: 1100px) {
    .professional-app-shell {
        grid-template-columns: 215px minmax(0, 1fr);
    }

    .dashboard-primary-grid,
    .dashboard-secondary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bio-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .professional-app-shell {
        display: block;
    }

    .professional-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(88vw, 310px);
        transform: translateX(110%);
        transition: transform .22s ease;
    }

    [dir="ltr"] .professional-sidebar {
        transform: translateX(-110%);
    }

    .professional-sidebar-is-open .professional-sidebar {
        transform: translateX(0);
    }

    .professional-sidebar-close,
    .professional-sidebar-toggle {
        display: inline-grid;
        place-items: center;
    }

    .professional-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(3, 24, 52, .48);
    }

    .professional-sidebar-is-open .professional-sidebar-backdrop {
        display: block;
    }

    .professional-topbar {
        justify-content: space-between;
    }

    .professional-page-shell {
        width: min(100% - 28px, 760px);
        margin-top: 22px;
    }

    .dashboard-primary-grid,
    .dashboard-secondary-grid {
        grid-template-columns: 1fr;
    }

    .bio-panel {
        grid-column: auto;
    }

    .visibility-panel,
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .visibility-actions {
        width: 100%;
    }

    .visibility-actions a {
        flex: 1 1 220px;
    }
}

@media (max-width: 560px) {
    .professional-topbar {
        min-height: 66px;
        padding: 10px 14px;
    }

    .professional-sidebar-toggle {
        font-size: 14px;
    }

    .professional-page-shell {
        width: min(100% - 20px, 520px);
        margin-bottom: 24px;
    }

    .dashboard-panel {
        padding: 18px;
        border-radius: 15px;
    }

    .dashboard-welcome h1 {
        font-size: 28px;
    }

    .completion-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .completion-checklist {
        width: 100%;
    }

    .quick-summary-grid {
        grid-template-columns: 1fr;
    }

    .quick-summary-grid > div,
    .quick-summary-grid > div:nth-child(odd) {
        border-inline-end: 0;
        border-bottom: 1px solid #e0e8f2;
    }

    .quick-summary-grid > div:last-child {
        border-bottom: 0;
    }

    .activity-grid {
        grid-template-columns: 1fr 1fr;
    }

    .document-status-list > div {
        grid-template-columns: 28px 1fr;
    }

    .document-status-list small {
        grid-column: 2;
    }
}


/* Balanced desktop layout for 100% browser zoom */

@media (min-width: 701px) and (max-width: 1450px) {
    .professional-app-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .professional-sidebar {
        padding: 14px 10px;
    }

    .professional-brand img {
        width: 136px;
        height: 40px;
    }

    .professional-sidebar-profile {
        margin: 13px 0 12px;
        padding: 12px 8px;
    }

    .professional-sidebar-avatar {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }

    .professional-side-nav a {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 13px;
    }

    .professional-page-shell {
        width: min(100% - 20px, 1120px);
        margin-top: 18px;
    }

    .dashboard-panel {
        padding: 16px;
    }

    .dashboard-welcome h1 {
        font-size: clamp(24px, 2vw, 31px);
    }
}

/* Global Hand professional dashboard — smaller desktop typography */
@media (min-width: 701px) {
    .professional-main-column,
    .professional-sidebar {
        font-size: 13px;
    }

    .professional-topbar select {
        font-size: 13px;
    }

    .professional-sidebar-profile strong {
        font-size: 14px;
    }

    .professional-sidebar-profile span,
    .professional-sidebar-profile small {
        font-size: 11px;
    }

    .professional-side-nav a {
        font-size: 12px;
    }

    .professional-side-nav a span {
        font-size: 15px;
    }

    .professional-sidebar-logout button {
        font-size: 12px;
        padding: 10px 12px;
    }

    .dashboard-welcome h1 {
        font-size: clamp(22px, 1.7vw, 28px);
    }

    .dashboard-welcome p {
        font-size: 14px;
        line-height: 1.65;
    }

    .eyebrow {
        font-size: 12px;
    }

    .profile-visibility {
        font-size: 12px;
        padding: 8px 12px;
    }

    .panel-heading h2 {
        font-size: 17px;
    }

    .panel-heading > a {
        font-size: 12px;
        padding: 6px 9px;
    }

    .panel-kicker,
    .quick-summary-grid dt {
        font-size: 11px;
    }

    .quick-summary-grid dd,
    .completion-check b,
    .activity-grid span,
    .document-status-list,
    .visibility-panel p,
    .dashboard-responsibility-note {
        font-size: 12.5px;
    }

    .completion-ring strong {
        font-size: 26px;
    }

    .activity-grid strong {
        font-size: 22px;
    }

    .dashboard-readable {
        font-size: 13px;
        line-height: 1.8;
    }

    .visibility-panel h2 {
        font-size: 18px;
    }

    .professional-area button,
    .professional-area .primary-link,
    .professional-area .secondary-link,
    .professional-area .button-link {
        font-size: 12px;
    }
}

/* Completion card title refinement */
@media (min-width: 701px) {
    .completion-panel .panel-heading {
        align-items: center;
        gap: 8px;
    }

    .completion-panel .panel-heading h2 {
        font-size: 15px;
        line-height: 1.4;
        white-space: nowrap;
        margin-top: 2px;
    }

    .completion-panel .panel-kicker {
        font-size: 10px;
    }

    .completion-panel .panel-heading > a {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Desktop proportions tuned so 100% browser zoom resembles the approved 80% view */
@media (min-width: 701px) and (max-width: 1450px) {
    .professional-app-shell {
        grid-template-columns: 185px minmax(0, 1fr);
    }

    .professional-sidebar {
        padding: 10px 8px;
        font-size: 11px;
    }

    .professional-brand {
        padding: 5px 7px;
        border-radius: 11px;
    }

    .professional-brand img {
        width: 118px;
        height: 35px;
    }

    .professional-sidebar-profile {
        gap: 3px;
        margin: 10px 0 9px;
        padding: 9px 7px;
        border-radius: 14px;
    }

    .professional-sidebar-avatar {
        width: 50px;
        height: 50px;
        margin-bottom: 3px;
        border-width: 3px;
        font-size: 18px;
    }

    .professional-sidebar-profile strong {
        font-size: 13px;
    }

    .professional-sidebar-profile span,
    .professional-sidebar-profile small {
        font-size: 10px;
    }

    .professional-side-nav {
        gap: 2px;
    }

    .professional-side-nav a {
        min-height: 33px;
        grid-template-columns: 20px 1fr;
        gap: 6px;
        padding: 6px 8px;
        font-size: 11px;
        border-radius: 8px;
    }

    .professional-side-nav a span {
        font-size: 14px;
    }

    .professional-sidebar-logout button {
        padding: 8px 10px;
        font-size: 11px;
    }

    .professional-topbar {
        min-height: 54px;
        padding: 7px 20px;
    }

    .professional-topbar select {
        min-width: 96px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .professional-page-shell {
        width: min(100% - 18px, 940px);
        margin: 16px auto 26px;
    }

    .professional-dashboard {
        gap: 13px;
    }

    .dashboard-welcome {
        gap: 14px;
        padding-top: 5px;
    }

    .dashboard-welcome h1 {
        margin-bottom: 4px;
        font-size: clamp(21px, 1.65vw, 25px);
    }

    .dashboard-welcome p {
        font-size: 12px;
        line-height: 1.55;
    }

    .eyebrow {
        font-size: 11px;
    }

    .profile-visibility {
        padding: 6px 10px;
        font-size: 11px;
    }

    .dashboard-primary-grid {
        grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.15fr);
        gap: 13px;
    }

    .dashboard-secondary-grid {
        gap: 13px;
    }

    .dashboard-panel {
        padding: 13px;
        border-radius: 14px;
    }

    .panel-heading {
        gap: 9px;
        margin-bottom: 12px;
    }

    .panel-heading h2 {
        font-size: 15px;
    }

    .panel-heading > a {
        padding: 5px 7px;
        font-size: 10.5px;
    }

    .panel-kicker,
    .quick-summary-grid dt {
        font-size: 10px;
    }

    .quick-summary-grid dd,
    .completion-check b,
    .activity-grid span,
    .document-status-list,
    .visibility-panel p,
    .dashboard-responsibility-note {
        font-size: 11px;
    }

    .completion-layout {
        grid-template-columns: 108px 1fr;
        gap: 14px;
    }

    .completion-ring {
        width: 100px;
        height: 100px;
    }

    .completion-ring::before {
        inset: 8px;
    }

    .completion-ring strong {
        font-size: 22px;
    }

    .completion-checklist {
        gap: 5px;
    }

    .completion-check {
        min-height: 31px;
        grid-template-columns: 20px 1fr;
        gap: 6px;
        padding: 5px 7px;
        border-radius: 8px;
    }

    .completion-check span {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .completion-panel .panel-heading h2 {
        font-size: 14px;
    }

    .completion-panel .panel-kicker {
        font-size: 9px;
    }

    .activity-grid strong {
        font-size: 18px;
    }

    .dashboard-readable {
        font-size: 11.5px;
        line-height: 1.65;
    }

    .visibility-panel h2 {
        font-size: 16px;
    }

    .professional-area button,
    .professional-area .primary-link,
    .professional-area .secondary-link,
    .professional-area .button-link {
        font-size: 11px;
        padding: 9px 12px;
    }
}

/* Global Hand — compact language switcher on every professional page */
.professional-topbar .language-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.professional-topbar .language-switcher label {
    position: relative;
    display: block;
    margin: 0;
}

.professional-topbar .language-switcher label::before {
    content: "🌐";
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

.professional-topbar .language-switcher select {
    width: auto;
    min-width: 118px;
    height: 36px;
    margin: 0;
    padding-block: 5px;
    padding-inline-start: 32px;
    padding-inline-end: 27px;
    border: 1px solid #c8d7e8;
    border-radius: 10px;
    color: #082f60;
    background-color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(8, 47, 96, .05);
    cursor: pointer;
}

.professional-topbar .language-switcher select:focus {
    outline: 2px solid rgba(8, 121, 232, .14);
    border-color: #0879e8;
}

/* Prevent horizontal scrolling and keep the status badge away from the edge */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.professional-app-shell,
.professional-main-column,
.professional-page-shell,
.professional-dashboard {
    min-width: 0;
    max-width: 100%;
}

.professional-main-column {
    overflow-x: clip;
}

.professional-page-shell {
    box-sizing: border-box;
}

.dashboard-welcome {
    min-width: 0;
    padding-inline: 6px;
}

.profile-visibility {
    margin-inline: 4px;
}

/* Keep the approved compact desktop proportions */
@media (min-width: 701px) and (max-width: 1450px) {
    .professional-topbar {
        min-height: 52px;
        padding: 7px 16px;
    }

    .professional-topbar .language-switcher select {
        min-width: 108px;
        height: 34px;
        padding-inline-start: 29px;
        padding-inline-end: 24px;
        font-size: 11px;
    }

    .professional-topbar .language-switcher label::before {
        inset-inline-start: 9px;
        font-size: 12px;
    }

    .professional-page-shell {
        width: min(calc(100% - 28px), 940px);
    }
}

@media (max-width: 700px) {
    .professional-topbar {
        gap: 10px;
    }

    .professional-topbar .language-switcher select {
        min-width: 104px;
        height: 36px;
        font-size: 11px;
    }

    .dashboard-welcome {
        padding-inline: 2px;
    }

    .profile-visibility {
        margin-inline: 0;
    }
}

/* Global Hand — sidebar split into fixed top, scrollable links, fixed logout */
@media (min-width: 701px) {
    .professional-sidebar {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .professional-sidebar-head,
    .professional-sidebar-profile,
    .professional-sidebar-logout {
        flex: 0 0 auto;
    }

    .professional-side-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-inline-end: 3px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.28) transparent;
    }

    .professional-side-nav::-webkit-scrollbar {
        width: 5px;
    }

    .professional-side-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .professional-side-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255,255,255,.28);
    }

    .professional-sidebar-logout {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,.10);
        background: inherit;
    }
}

/* Preserve the approved compact proportions on common laptop heights. */
@media (min-width: 701px) and (max-height: 850px) {
    .professional-sidebar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .professional-sidebar-profile {
        margin-top: 7px;
        margin-bottom: 7px;
    }

    .professional-side-nav {
        gap: 1px;
    }

    .professional-side-nav a {
        min-height: 29px;
        padding-block: 5px;
    }

    .professional-sidebar-logout button {
        margin: 0;
        padding-block: 7px;
    }
}

/* Global Hand — fit the complete professional menu on 1366×768 laptop screens */
@media (min-width: 701px) and (max-height: 800px) {
    .professional-sidebar {
        padding: 7px 6px;
    }

    .professional-brand {
        padding: 3px 5px;
        border-radius: 9px;
    }

    .professional-brand img {
        width: 94px;
        height: 28px;
    }

    .professional-sidebar-profile {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-areas:
            "avatar name"
            "avatar profession"
            "avatar ghid";
        align-items: center;
        column-gap: 7px;
        row-gap: 0;
        margin: 5px 0 6px;
        padding: 6px 7px;
        text-align: start;
        border-radius: 11px;
    }

    .professional-sidebar-avatar {
        grid-area: avatar;
        width: 36px;
        height: 36px;
        margin: 0;
        border-width: 2px;
        font-size: 14px;
    }

    .professional-sidebar-profile strong {
        grid-area: name;
        min-width: 0;
        font-size: 10.5px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .professional-sidebar-profile span {
        grid-area: profession;
        min-width: 0;
        font-size: 8.5px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .professional-sidebar-profile small {
        grid-area: ghid;
        min-width: 0;
        font-size: 8px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .professional-side-nav {
        gap: 0;
        padding-inline-end: 2px;
    }

    .professional-side-nav a {
        min-height: 25px;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 5px;
        padding: 3px 6px;
        border-radius: 6px;
        font-size: 9.8px;
        line-height: 1.08;
    }

    .professional-side-nav a span {
        font-size: 11px;
    }

    .professional-sidebar-logout {
        margin-top: 4px;
        padding-top: 4px;
    }

    .professional-sidebar-logout button {
        min-height: 27px;
        margin: 0;
        padding: 4px 7px;
        border-radius: 7px;
        font-size: 9.5px;
    }
}

/* Global Hand — smaller professional headings and welcome text */
@media (min-width: 701px) and (max-width: 1450px) {
    .dashboard-welcome h1 {
        margin-bottom: 3px;
        font-size: 20px !important;
        line-height: 1.3;
    }

    .dashboard-welcome p {
        font-size: 11px !important;
        line-height: 1.5;
    }

    .dashboard-welcome .eyebrow,
    .panel-kicker,
    .professional-area .content-card .eyebrow {
        font-size: 10px !important;
    }

    .panel-heading h2 {
        font-size: 15px !important;
        line-height: 1.35;
    }

    .professional-area .content-card h1 {
        font-size: 23px !important;
        line-height: 1.3;
    }

    .professional-area .content-card h2 {
        font-size: 18px !important;
        line-height: 1.35;
    }
}

/* Global Hand — move the professional logo from the sidebar to the topbar */
.professional-topbar {
    justify-content: space-between;
}

.professional-topbar-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    direction: ltr;
    color: #082f60;
    text-decoration: none;
}

.professional-topbar-brand img {
    display: block;
    width: 126px;
    height: 36px;
    object-fit: contain;
    object-position: left center;
}

.professional-topbar .professional-sidebar-toggle {
    margin: 0;
}

@media (min-width: 701px) {
    .professional-sidebar-head {
        display: none;
    }

    .professional-sidebar-profile {
        margin-top: 0;
    }
}

@media (min-width: 701px) and (max-width: 1450px) {
    .professional-topbar-brand img {
        width: 116px;
        height: 34px;
    }
}

@media (max-width: 700px) {
    .professional-topbar {
        gap: 8px;
    }

    .professional-topbar-brand img {
        width: 94px;
        height: 30px;
    }

    .professional-sidebar-head {
        justify-content: flex-start;
    }

    [dir="ltr"] .professional-sidebar-head {
        justify-content: flex-start;
    }

    .professional-sidebar-toggle {
        min-width: 42px;
        padding: 8px 10px;
    }
}

@media (max-width: 390px) {
    .professional-topbar-brand img {
        width: 82px;
        height: 27px;
    }

    .professional-topbar .language-switcher select {
        min-width: 92px;
        padding-inline-start: 27px;
        padding-inline-end: 20px;
    }

    .professional-sidebar-toggle span {
        display: none;
    }
}

/* Global Hand — reduce vertical spacing from My profile to the last sidebar item */
@media (min-width: 701px) {
    .professional-side-nav {
        row-gap: 0 !important;
    }

    .professional-side-nav a:not(:first-child) {
        min-height: 21px !important;
        margin-block: 0 !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        line-height: 1.02 !important;
    }
}

/* Global Hand — smaller typography in the professional dashboard white area
   while keeping the welcome title "مرحبا Abid Yakup" unchanged */
@media (min-width: 701px) {
    /* Keep the main welcome title at its approved size */
    .professional-dashboard .dashboard-welcome h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* Reduce all other dashboard text */
    .professional-dashboard .dashboard-welcome .eyebrow {
        font-size: 9px !important;
    }

    .professional-dashboard .dashboard-welcome p {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .professional-dashboard .profile-visibility {
        font-size: 10px !important;
    }

    .professional-dashboard .panel-heading h2 {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .professional-dashboard .panel-kicker,
    .professional-dashboard .quick-summary-grid dt {
        font-size: 9px !important;
    }

    .professional-dashboard .panel-heading > a {
        font-size: 9.5px !important;
    }

    .professional-dashboard .quick-summary-grid dd,
    .professional-dashboard .completion-check b,
    .professional-dashboard .activity-grid span,
    .professional-dashboard .document-status-list,
    .professional-dashboard .visibility-panel p,
    .professional-dashboard .dashboard-responsibility-note {
        font-size: 10px !important;
    }

    .professional-dashboard .dashboard-readable {
        font-size: 10.5px !important;
        line-height: 1.6 !important;
    }

    .professional-dashboard .completion-ring strong {
        font-size: 20px !important;
    }

    .professional-dashboard .activity-grid strong {
        font-size: 17px !important;
    }

    .professional-dashboard .visibility-panel h2 {
        font-size: 14px !important;
    }

    .professional-dashboard button,
    .professional-dashboard .primary-link,
    .professional-dashboard .secondary-link,
    .professional-dashboard .button-link {
        font-size: 10px !important;
    }
}
/* Global Hand — approved professional dashboard layout — 2026-07-30 */
@media (min-width: 701px) {
    /* Main white dashboard area */
    .professional-page-shell {
        width: min(calc(100% - 32px), 1080px) !important;
        margin: 18px auto 30px !important;
    }

    .professional-dashboard {
        gap: 14px !important;
    }

    /* Welcome strip */
    .professional-dashboard .dashboard-welcome {
        min-height: 92px;
        padding: 14px 18px !important;
        border: 1px solid #dbe5f1;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(8, 47, 96, .055);
    }

    .professional-dashboard .dashboard-welcome h1 {
        margin: 3px 0 5px !important;
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .professional-dashboard .dashboard-welcome .eyebrow {
        font-size: 11px !important;
    }

    .professional-dashboard .dashboard-welcome p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .professional-dashboard .profile-visibility {
        margin-inline: 0 !important;
        padding: 7px 12px !important;
        font-size: 11.5px !important;
    }

    /* Put completion and quick summary one below the other */
    .professional-dashboard .dashboard-primary-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Professional bio full width, then sections and documents side by side */
    .professional-dashboard .dashboard-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .professional-dashboard .bio-panel {
        grid-column: 1 / -1 !important;
    }

    /* General card appearance */
    .professional-dashboard .dashboard-panel {
        padding: 16px !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 28px rgba(8, 47, 96, .055) !important;
    }

    .professional-dashboard .panel-heading {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .professional-dashboard .panel-heading > div {
        flex: 0 1 auto !important;
    }

    .professional-dashboard .panel-heading > a {
        order: 2;
        margin-inline-start: 4px !important;
        padding: 6px 9px !important;
        font-size: 11px !important;
    }

    .professional-dashboard .panel-heading h2 {
        margin-top: 3px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .professional-dashboard .panel-kicker {
        font-size: 10px !important;
    }

    /* Completion card: ring plus seven compact horizontal items */
    .professional-dashboard .completion-layout {
        grid-template-columns: 132px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .professional-dashboard .completion-ring {
        width: 116px !important;
        height: 116px !important;
    }

    .professional-dashboard .completion-ring::before {
        inset: 9px !important;
    }

    .professional-dashboard .completion-ring strong {
        font-size: 25px !important;
    }

    .professional-dashboard .completion-checklist {
        grid-template-columns: repeat(7, minmax(76px, 1fr)) !important;
        gap: 7px !important;
    }

    .professional-dashboard .completion-check {
        min-height: 78px !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 6px !important;
        padding: 8px 5px !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    .professional-dashboard .completion-check span {
        width: 21px !important;
        height: 21px !important;
        font-size: 12px !important;
    }

    .professional-dashboard .completion-check b {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    /* Quick summary: 3 cards per row */
    .professional-dashboard .quick-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .professional-dashboard .quick-summary-grid > div,
    .professional-dashboard .quick-summary-grid > div:nth-child(odd),
    .professional-dashboard .quick-summary-grid > div:nth-last-child(-n+2) {
        min-height: 78px;
        align-content: center;
        gap: 6px !important;
        padding: 12px 14px !important;
        border: 1px solid #e0e8f2 !important;
        border-radius: 11px !important;
        background: #f8fbff !important;
    }

    .professional-dashboard .quick-summary-grid dt {
        font-size: 10.5px !important;
    }

    .professional-dashboard .quick-summary-grid dd {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    /* Professional bio */
    .professional-dashboard .dashboard-readable {
        margin-top: 2px !important;
        font-size: 12.5px !important;
        line-height: 1.85 !important;
    }

    /* Professional sections */
    .professional-dashboard .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .professional-dashboard .activity-grid a {
        min-height: 72px;
        align-content: center;
        padding: 11px !important;
    }

    .professional-dashboard .activity-grid strong {
        font-size: 20px !important;
    }

    .professional-dashboard .activity-grid span {
        font-size: 11.5px !important;
    }

    /* Documents */
    .professional-dashboard .document-status-list {
        gap: 9px !important;
    }

    .professional-dashboard .document-status-list > div {
        min-height: 53px;
        padding: 10px !important;
    }

    .professional-dashboard .document-status-list,
    .professional-dashboard .document-status-list small {
        font-size: 11.5px !important;
    }

    /* Public-profile strip */
    .professional-dashboard .visibility-panel {
        gap: 18px !important;
        padding-block: 14px !important;
    }

    .professional-dashboard .visibility-panel h2 {
        font-size: 16px !important;
    }

    .professional-dashboard .visibility-panel p {
        font-size: 11.5px !important;
        line-height: 1.65 !important;
    }

    .professional-dashboard .visibility-actions {
        gap: 8px !important;
    }

    .professional-dashboard .primary-link,
    .professional-dashboard .secondary-link,
    .professional-dashboard .button-link,
    .professional-dashboard button {
        padding: 8px 11px !important;
        font-size: 11px !important;
    }

    /* Responsibility note */
    .professional-dashboard .dashboard-responsibility-note {
        padding: 10px 14px !important;
        font-size: 10.5px !important;
        line-height: 1.6 !important;
    }
}

/* Medium screens */
@media (min-width: 701px) and (max-width: 1050px) {
    .professional-dashboard .completion-layout {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .professional-dashboard .completion-ring {
        width: 98px !important;
        height: 98px !important;
    }

    .professional-dashboard .completion-checklist {
        grid-template-columns: repeat(4, minmax(80px, 1fr)) !important;
    }
}

/* Phones */
@media (max-width: 700px) {
    .professional-dashboard .dashboard-primary-grid,
    .professional-dashboard .dashboard-secondary-grid {
        grid-template-columns: 1fr !important;
    }

    .professional-dashboard .bio-panel {
        grid-column: auto !important;
    }

    .professional-dashboard .quick-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .professional-dashboard .completion-checklist {
        grid-template-columns: 1fr !important;
    }

    .professional-dashboard .completion-check {
        grid-template-columns: 24px 1fr !important;
        justify-items: stretch !important;
        text-align: start !important;
        min-height: 42px !important;
    }
}
/* Global Hand — final compact completion and summary cards — 2026-07-31 */
@media (min-width: 701px) {
    /* Reduce only the completion card height */
    .professional-dashboard .completion-panel {
        padding: 13px 15px !important;
    }

    .professional-dashboard .completion-panel .panel-heading {
        margin-bottom: 8px !important;
    }

    .professional-dashboard .completion-layout {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .professional-dashboard .completion-ring {
        width: 82px !important;
        height: 82px !important;
    }

    .professional-dashboard .completion-ring::before {
        inset: 7px !important;
    }

    .professional-dashboard .completion-ring strong {
        font-size: 21px !important;
    }

    .professional-dashboard .completion-checklist {
        gap: 6px !important;
    }

    .professional-dashboard .completion-check {
        min-height: 56px !important;
        gap: 4px !important;
        padding: 6px 4px !important;
        border-radius: 9px !important;
    }

    .professional-dashboard .completion-check span {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }

    .professional-dashboard .completion-check b {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }

    /* Reduce only the quick-summary card height */
    .professional-dashboard .summary-panel {
        padding: 14px 15px !important;
    }

    .professional-dashboard .summary-panel .panel-heading {
        margin-bottom: 10px !important;
    }

    .professional-dashboard .quick-summary-grid {
        gap: 8px !important;
    }

    .professional-dashboard .quick-summary-grid > div,
    .professional-dashboard .quick-summary-grid > div:nth-child(odd),
    .professional-dashboard .quick-summary-grid > div:nth-last-child(-n+2) {
        min-height: 62px !important;
        gap: 3px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
    }

    .professional-dashboard .quick-summary-grid dt {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .professional-dashboard .quick-summary-grid dd {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

/* Keep all seven completion items in one row on ordinary laptop screens */
@media (min-width: 1100px) {
    .professional-dashboard .completion-checklist {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}

/* Use four columns on narrower tablets and small laptops */
@media (min-width: 701px) and (max-width: 1099px) {
    .professional-dashboard .completion-checklist {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
/* Global Hand — compact professional login page — 2026-07-31 */
@media (min-width: 701px) {
    /* Applies only when the professional login form is present */
    body:has(main.page-shell form[action="/login"]) .site-header {
        min-height: 58px;
        gap: 8px 14px;
        padding: 8px clamp(16px, 3vw, 42px);
    }

    body:has(main.page-shell form[action="/login"]) .brand img {
        width: 140px;
        height: 42px;
    }

    body:has(main.page-shell form[action="/login"]) .main-nav {
        gap: 5px 13px;
    }

    body:has(main.page-shell form[action="/login"]) .main-nav a {
        font-size: 13px;
    }

    body:has(main.page-shell form[action="/login"]) .language-switcher select {
        min-width: 104px;
        padding: 7px 9px;
        font-size: 13px;
    }

    body:has(main.page-shell form[action="/login"]) .page-shell {
        width: min(100% - 32px, 650px);
        margin: 26px auto 32px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card {
        max-width: 700px;
        padding: 25px 32px;
        border-radius: 16px;
        box-shadow: 0 12px 34px rgba(8, 47, 96, .07);
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .eyebrow {
        font-size: 12px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card h1 {
        margin: 5px 0 16px;
        font-size: 32px;
        line-height: 1.25;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card form {
        gap: 7px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card label {
        margin-top: 4px;
        font-size: 14px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card input {
        min-height: 46px;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 14px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card button {
        min-height: 46px;
        margin-top: 8px;
        padding: 9px 16px;
        border-radius: 9px;
        font-size: 16px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .alert {
        margin: 10px 0;
        padding: 10px 12px;
        font-size: 13px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .form-footer {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.6;
    }

    body:has(main.page-shell form[action="/login"]) .site-footer {
        padding: 18px clamp(18px, 4vw, 48px);
        font-size: 13px;
    }

    body:has(main.page-shell form[action="/login"]) .site-footer nav {
        gap: 8px 14px;
    }
}

@media (max-width: 700px) {
    body:has(main.page-shell form[action="/login"]) .page-shell {
        width: min(100% - 20px, 520px);
        margin: 18px auto 24px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card h1 {
        font-size: 29px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card input,
    body:has(main.page-shell form[action="/login"]) .auth-card button {
        min-height: 45px;
    }
}
/* Global Hand — smaller login title and refined auth typography — 2026-07-31 */

/* Use a cleaner, lighter font style on authentication cards */
body:has(.auth-card) .auth-card,
body:has(.auth-card) .auth-card input,
body:has(.auth-card) .auth-card button,
body:has(.auth-card) .auth-card a,
body:has(.auth-card) .auth-card label {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Make the whole authentication card smaller */
body:has(.auth-card) .page-shell {
    width: min(100% - 30px, 560px) !important;
    margin: 22px auto 28px !important;
}

body:has(.auth-card) .auth-card {
    max-width: 540px !important;
    padding: 22px 28px !important;
    border-radius: 15px !important;
}

/* The requested login title */
body:has(.auth-card) .auth-card h1 {
    margin: 3px 0 14px !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Small text above the title */
body:has(.auth-card) .auth-card .eyebrow {
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Labels and fields */
body:has(.auth-card) .auth-card form {
    gap: 6px !important;
}

body:has(.auth-card) .auth-card label {
    margin-top: 3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body:has(.auth-card) .auth-card input,
body:has(.auth-card) .auth-card select {
    min-height: 42px !important;
    padding: 8px 11px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* Login button */
body:has(.auth-card) .auth-card button {
    min-height: 42px !important;
    margin-top: 7px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Links below the form */
body:has(.auth-card) .auth-card .form-footer {
    margin-top: 13px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Keep mobile version compact too */
@media (max-width: 700px) {
    body:has(.auth-card) .page-shell {
        width: min(100% - 18px, 500px) !important;
        margin: 16px auto 22px !important;
    }

    body:has(.auth-card) .auth-card {
        padding: 19px 16px !important;
        border-radius: 13px !important;
    }

    body:has(.auth-card) .auth-card h1 {
        font-size: 24px !important;
    }

    body:has(.auth-card) .auth-card label,
    body:has(.auth-card) .auth-card input,
    body:has(.auth-card) .auth-card button {
        font-size: 13px !important;
    }
}
/* Global Hand — extra compact login page to fit one screen — 2026-07-31 */
@media (min-width: 701px) {
    /* Compact header and keep it on one line */
    body:has(main.page-shell form[action="/login"]) .site-header {
        min-height: 54px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 6px 18px !important;
    }

    body:has(main.page-shell form[action="/login"]) .brand img {
        width: 112px !important;
        height: 34px !important;
    }

    body:has(main.page-shell form[action="/login"]) .main-nav {
        order: initial !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 4px 10px !important;
    }

    body:has(main.page-shell form[action="/login"]) .main-nav a {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/login"]) .language-switcher select {
        min-width: 92px !important;
        height: 32px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    /* Smaller card and tighter vertical spacing */
    body:has(main.page-shell form[action="/login"]) .page-shell {
        width: min(100% - 28px, 480px) !important;
        margin: 14px auto 18px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card {
        max-width: 470px !important;
        padding: 16px 22px !important;
        border-radius: 13px !important;
        box-shadow: 0 9px 24px rgba(8, 47, 96, .06) !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .eyebrow {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card h1 {
        margin: 2px 0 10px !important;
        font-size: 22px !important;
        line-height: 1.18 !important;
        font-weight: 650 !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card form {
        gap: 4px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card label {
        margin-top: 2px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card input {
        min-height: 38px !important;
        height: 38px !important;
        padding: 6px 10px !important;
        border-radius: 7px !important;
        font-size: 12.5px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card button {
        min-height: 38px !important;
        height: 38px !important;
        margin-top: 5px !important;
        padding: 6px 12px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .form-footer {
        margin-top: 9px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    body:has(main.page-shell form[action="/login"]) .site-footer {
        padding: 11px 20px !important;
        font-size: 11px !important;
    }

    body:has(main.page-shell form[action="/login"]) .site-footer nav {
        gap: 5px 10px !important;
    }
}

/* Small laptops */
@media (min-width: 701px) and (max-height: 800px) {
    body:has(main.page-shell form[action="/login"]) .page-shell {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    body:has(main.page-shell form[action="/login"]) .site-footer {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/login"]) .page-shell {
        width: min(100% - 16px, 460px) !important;
        margin: 12px auto 16px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card {
        padding: 16px 14px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card h1 {
        font-size: 21px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card input,
    body:has(main.page-shell form[action="/login"]) .auth-card button {
        min-height: 40px !important;
    }
}
/* Global Hand — refined centered login button — 2026-07-31 */
body:has(main.page-shell form[action="/login"]) .auth-card button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    justify-self: center !important;
    margin: 8px auto 0 !important;
    padding: 8px 18px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #0879e8, #0b4fa8) !important;
    box-shadow: 0 7px 18px rgba(8, 79, 168, .20) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body:has(main.page-shell form[action="/login"]) .auth-card button:hover {
    background: linear-gradient(135deg, #0a69ca, #082f60) !important;
    box-shadow: 0 9px 22px rgba(8, 47, 96, .24) !important;
    transform: translateY(-1px);
}

body:has(main.page-shell form[action="/login"]) .auth-card button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(8, 47, 96, .18) !important;
}

/* Arabic: show the clearer label approved by the user */
[dir="rtl"] body:has(main.page-shell form[action="/login"]) .auth-card button {
    font-size: 0 !important;
}

[dir="rtl"] body:has(main.page-shell form[action="/login"]) .auth-card button::after {
    content: "⇥  تسجيل الدخول";
    display: inline-block;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Mobile: keep the button compact but easy to tap */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/login"]) .auth-card button {
        width: 175px !important;
        min-width: 175px !important;
        height: 42px !important;
        min-height: 42px !important;
    }
}
/* Global Hand — login action row and remove repeated nav link — 2026-07-31 */

/* Do not repeat “Sign in” in the top navigation while already on the login page. */
body:has(main.page-shell form[action="/login"]) .main-nav a[href="/login"] {
    display: none !important;
}

/* Keep the button and the two supporting links on one compact row. */
body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    margin-top: 8px;
}

body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row button {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    margin: 0 !important;
}

body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links a {
    white-space: nowrap;
}

/* Arabic label without the unnecessary arrow. */
[dir="rtl"] body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row button::after {
    content: "تسجيل الدخول" !important;
}

/* Keep the mobile layout readable. */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row {
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row button {
        flex-basis: auto !important;
        width: 175px !important;
        min-width: 175px !important;
    }

    body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links {
        justify-content: center;
        text-align: center;
    }
}
/* Global Hand — final login page polish — 2026-07-31 */

/* Cleaner supporting links without permanent underlines */
body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links a {
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links a:hover,
body:has(main.page-shell form[action="/login"]) .auth-card .login-help-links a:focus-visible {
    color: #0b4fa8 !important;
    border-bottom-color: currentColor;
}

/* Reduce the remaining empty space below the form */
body:has(main.page-shell form[action="/login"]) .auth-card {
    padding-bottom: 13px !important;
}

body:has(main.page-shell form[action="/login"]) .auth-card form {
    margin-bottom: 0 !important;
}

body:has(main.page-shell form[action="/login"]) .auth-card .login-action-row {
    margin-bottom: 0 !important;
}

body:has(main.page-shell form[action="/login"]) .page-shell {
    margin-bottom: 10px !important;
}

/* Bring the footer slightly closer on ordinary laptop screens */
@media (min-width: 701px) {
    body:has(main.page-shell form[action="/login"]) .site-footer {
        margin-top: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* Preserve comfortable spacing on phones */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/login"]) .auth-card {
        padding-bottom: 16px !important;
    }

    body:has(main.page-shell form[action="/login"]) .page-shell {
        margin-bottom: 14px !important;
    }
}
/* Global Hand — compact professional registration page — 2026-07-31 */

/* Do not repeat the current page link in the public navigation. */
body:has(main.page-shell form[action="/register"]) .main-nav a[href="/register"] {
    display: none !important;
}

@media (min-width: 701px) {
    /* Compact header and keep navigation on one line. */
    body:has(main.page-shell form[action="/register"]) .site-header {
        min-height: 54px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 6px 18px !important;
    }

    body:has(main.page-shell form[action="/register"]) .brand img {
        width: 112px !important;
        height: 34px !important;
    }

    body:has(main.page-shell form[action="/register"]) .main-nav {
        order: initial !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 4px 10px !important;
    }

    body:has(main.page-shell form[action="/register"]) .main-nav a {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/register"]) .language-switcher select {
        min-width: 92px !important;
        height: 32px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    /* Wider, shorter registration card. */
    body:has(main.page-shell form[action="/register"]) .page-shell {
        width: min(100% - 28px, 820px) !important;
        margin: 12px auto 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .auth-card.register-card {
        width: 100% !important;
        max-width: 800px !important;
        padding: 16px 22px 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(8, 47, 96, .07) !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .eyebrow {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card h1 {
        margin: 2px 0 4px !important;
        font-size: 23px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .lead {
        margin: 0 0 10px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card form {
        gap: 9px !important;
    }

    /* Two fields per row on desktop. */
    body:has(main.page-shell form[action="/register"]) .register-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
    }

    body:has(main.page-shell form[action="/register"]) .register-field,
    body:has(main.page-shell form[action="/register"]) .register-locale-field,
    body:has(main.page-shell form[action="/register"]) .register-terms-block {
        min-width: 0;
    }

    body:has(main.page-shell form[action="/register"]) .register-field {
        display: grid;
        align-content: start;
        gap: 3px;
    }

    body:has(main.page-shell form[action="/register"]) .register-card label {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card input,
    body:has(main.page-shell form[action="/register"]) .register-card select {
        min-height: 37px !important;
        height: 37px !important;
        padding: 6px 10px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card small {
        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }

    /* Language and terms in one compact row. */
    body:has(main.page-shell form[action="/register"]) .register-options-row {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 14px;
        align-items: end;
    }

    body:has(main.page-shell form[action="/register"]) .register-locale-field {
        display: grid;
        gap: 4px;
    }

    body:has(main.page-shell form[action="/register"]) .register-terms-block {
        display: grid;
        gap: 3px;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row {
        min-height: 49px;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 7px 9px !important;
        border: 1px solid #d9e3ef;
        border-radius: 8px;
        background: #f8fbff;
        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row input {
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 16px;
    }

    /* Primary action and existing-account link in one row. */
    body:has(main.page-shell form[action="/register"]) .register-action-row {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 1px;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row button {
        flex: 0 0 320px !important;
        width: 320px !important;
        min-width: 320px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 7px 14px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #0879e8, #0b4fa8) !important;
        box-shadow: 0 7px 18px rgba(8, 79, 168, .17) !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row button:hover {
        background: linear-gradient(135deg, #0a69ca, #082f60) !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-login-link {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #627087;
    }

    body:has(main.page-shell form[action="/register"]) .register-login-link a {
        text-decoration: none !important;
        border-bottom: 1px solid transparent;
    }

    body:has(main.page-shell form[action="/register"]) .register-login-link a:hover,
    body:has(main.page-shell form[action="/register"]) .register-login-link a:focus-visible {
        border-bottom-color: currentColor;
    }

    body:has(main.page-shell form[action="/register"]) .alert {
        margin: 7px 0 !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    body:has(main.page-shell form[action="/register"]) .site-footer {
        margin-top: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 11px !important;
    }
}

/* Tablets and phones: return naturally to one column. */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/register"]) .page-shell {
        width: min(100% - 18px, 560px) !important;
        margin: 14px auto 18px !important;
    }

    body:has(main.page-shell form[action="/register"]) .auth-card.register-card {
        max-width: 540px !important;
        padding: 18px 15px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card h1 {
        font-size: 22px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-grid,
    body:has(main.page-shell form[action="/register"]) .register-options-row {
        grid-template-columns: 1fr !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row button {
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-login-link {
        text-align: center;
    }
}
/* Global Hand — extra compact registration page for 100% zoom — 2026-07-31 */
@media (min-width: 701px) {
    body:has(main.page-shell form[action="/register"]) .site-header {
        min-height: 48px !important;
        padding: 4px 16px !important;
        gap: 6px !important;
    }

    body:has(main.page-shell form[action="/register"]) .brand img {
        width: 98px !important;
        height: 30px !important;
    }

    body:has(main.page-shell form[action="/register"]) .main-nav {
        gap: 3px 9px !important;
    }

    body:has(main.page-shell form[action="/register"]) .main-nav a {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    body:has(main.page-shell form[action="/register"]) .language-switcher select {
        min-width: 84px !important;
        height: 29px !important;
        padding: 4px 7px !important;
        font-size: 10.5px !important;
    }

    body:has(main.page-shell form[action="/register"]) .page-shell {
        width: min(100% - 24px, 860px) !important;
        margin: 6px auto 7px !important;
    }

    body:has(main.page-shell form[action="/register"]) .auth-card.register-card {
        max-width: 840px !important;
        padding: 10px 18px 10px !important;
        border-radius: 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .eyebrow {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card h1 {
        margin: 1px 0 2px !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .lead {
        margin: 0 0 6px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card form {
        gap: 6px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-grid {
        gap: 5px 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-field {
        gap: 2px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card label {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card input,
    body:has(main.page-shell form[action="/register"]) .register-card select {
        min-height: 32px !important;
        height: 32px !important;
        padding: 4px 9px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card small {
        font-size: 8.8px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-options-row {
        grid-template-columns: 180px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-locale-field {
        gap: 2px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row {
        min-height: 39px !important;
        padding: 5px 8px !important;
        gap: 7px !important;
        border-radius: 7px !important;
        font-size: 9.8px !important;
        line-height: 1.25 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row input {
        width: 14px !important;
        height: 14px !important;
        min-height: 14px !important;
        flex-basis: 14px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row {
        gap: 13px !important;
        margin-top: 0 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-action-row button {
        flex: 0 0 290px !important;
        width: 290px !important;
        min-width: 290px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 5px 12px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-login-link {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    body:has(main.page-shell form[action="/register"]) .alert {
        margin: 4px 0 !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    body:has(main.page-shell form[action="/register"]) .site-footer {
        margin-top: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        font-size: 10px !important;
    }

    body:has(main.page-shell form[action="/register"]) .site-footer nav {
        gap: 4px 9px !important;
    }
}

/* Even tighter on short laptop screens */
@media (min-width: 701px) and (max-height: 780px) {
    body:has(main.page-shell form[action="/register"]) .register-card .eyebrow {
        display: none !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .lead {
        margin-bottom: 4px !important;
    }

    body:has(main.page-shell form[action="/register"]) .page-shell {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    body:has(main.page-shell form[action="/register"]) .auth-card.register-card {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}
/* Global Hand — slightly narrower registration fields — 2026-07-31 */
@media (min-width: 701px) {
    /* Narrow the four main rectangular fields slightly and keep them centered. */
    body:has(main.page-shell form[action="/register"]) .register-field input {
        width: 94% !important;
        max-width: 94% !important;
        justify-self: center !important;
    }

    /* Keep labels aligned with the narrower fields. */
    body:has(main.page-shell form[action="/register"]) .register-field label,
    body:has(main.page-shell form[action="/register"]) .register-field small {
        width: 94% !important;
        max-width: 94% !important;
        justify-self: center !important;
    }

    /* Narrow the account-language box by the same small amount. */
    body:has(main.page-shell form[action="/register"]) .register-locale-field select {
        width: 94% !important;
        max-width: 94% !important;
        justify-self: center !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-locale-field > label {
        width: 94% !important;
        max-width: 94% !important;
        justify-self: center !important;
    }
}

/* Keep full-width fields on tablets and phones for easier use. */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/register"]) .register-field input,
    body:has(main.page-shell form[action="/register"]) .register-locale-field select,
    body:has(main.page-shell form[action="/register"]) .register-field label,
    body:has(main.page-shell form[action="/register"]) .register-field small,
    body:has(main.page-shell form[action="/register"]) .register-locale-field > label {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* Global Hand — final registration page polish — 2026-07-31 */
@media (min-width: 701px) {
    /* Make the terms box slightly shorter and closer to the language field height. */
    body:has(main.page-shell form[action="/register"]) .register-card .check-row {
        min-height: 34px !important;
        padding: 4px 7px !important;
        gap: 6px !important;
        font-size: 9.4px !important;
        line-height: 1.2 !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row input {
        width: 13px !important;
        height: 13px !important;
        min-height: 13px !important;
        flex-basis: 13px !important;
    }

    /* Reduce the main registration button by roughly 12%. */
    body:has(main.page-shell form[action="/register"]) .register-action-row button {
        flex: 0 0 255px !important;
        width: 255px !important;
        min-width: 255px !important;
        min-height: 35px !important;
        height: 35px !important;
        padding: 5px 10px !important;
        font-size: 10.5px !important;
    }

    /* Keep the action row visually balanced after narrowing the button. */
    body:has(main.page-shell form[action="/register"]) .register-action-row {
        justify-content: flex-start !important;
        gap: 18px !important;
    }
}

/* Preserve easy tapping and full-width controls on smaller screens. */
@media (max-width: 700px) {
    body:has(main.page-shell form[action="/register"]) .register-action-row button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: auto !important;
        font-size: 12px !important;
    }

    body:has(main.page-shell form[action="/register"]) .register-card .check-row {
        min-height: 44px !important;
        padding: 7px 9px !important;
        font-size: 10.5px !important;
    }
}
/* Global Hand — compact email-verification page — 2026-07-31 */
@media (min-width: 701px) {
    body:has(main.page-shell form[action="/verify-email"]) .site-header {
        min-height: 54px !important;
        padding: 6px clamp(16px, 3vw, 42px) !important;
        gap: 7px 12px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .brand img {
        width: 118px !important;
        height: 36px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .main-nav {
        gap: 4px 12px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .main-nav a {
        font-size: 12px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .language-switcher select {
        min-width: 98px !important;
        height: 34px !important;
        padding: 5px 8px !important;
        font-size: 12px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .page-shell {
        width: min(100% - 28px, 600px) !important;
        margin: 18px auto 22px !important;
    }
}

body:has(main.page-shell form[action="/verify-email"]) .verify-card {
    width: 100% !important;
    max-width: 570px !important;
    padding: 24px 32px 22px !important;
    border-radius: 16px !important;
    text-align: center;
    box-shadow: 0 12px 34px rgba(8, 47, 96, .07) !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-card .eyebrow {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-card h1 {
    margin: 5px 0 8px !important;
    font-size: 29px !important;
    line-height: 1.2 !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-lead {
    margin: 0 0 7px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-email {
    width: min(100%, 430px);
    margin: 0 auto 16px;
    padding: 9px 12px;
    overflow-wrap: anywhere;
    border: 1px solid #d9e3ef;
    border-radius: 9px;
    background: #f5f9ff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-card .alert {
    margin: 9px 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    text-align: start;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-form {
    width: min(100%, 430px);
    margin: 0 auto;
    gap: 7px !important;
    justify-items: center;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-form label {
    width: 100%;
    margin: 0 !important;
    font-size: 13px !important;
    text-align: start;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-form .code-input {
    width: min(100%, 330px) !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    direction: ltr !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 12px !important;
    padding-inline-start: 24px !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-submit {
    width: 245px !important;
    min-height: 40px !important;
    margin-top: 4px !important;
    padding: 7px 14px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-resend-form {
    display: block !important;
    margin: 8px 0 0 !important;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-resend-button {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--blue) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body:has(main.page-shell form[action="/verify-email"]) .verify-resend-button:hover {
    color: var(--navy) !important;
    transform: none !important;
}

@media (max-width: 700px) {
    body:has(main.page-shell form[action="/verify-email"]) .page-shell {
        width: min(100% - 20px, 570px) !important;
        margin: 12px auto 18px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .verify-card {
        padding: 20px 16px 18px !important;
        border-radius: 13px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .verify-card h1 {
        font-size: 24px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .verify-form .code-input {
        width: min(100%, 300px) !important;
        font-size: 22px !important;
        letter-spacing: 9px !important;
        padding-inline-start: 18px !important;
    }

    body:has(main.page-shell form[action="/verify-email"]) .verify-submit {
        width: 100% !important;
        min-height: 42px !important;
    }
}


/* تقليل المسافات العمودية بين عناصر قائمة المحترف */
@media (min-width: 701px) {
    .professional-side-nav {
        row-gap: 0 !important;
    }

    .professional-side-nav a:not(:first-child) {
        min-height: 28px !important;
        margin-block: 0 !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        line-height: 1.15 !important;
    }
}
/* تصغير العنوان الرئيسي في صفحات المحترف */
body:has(.professional-side-nav) main h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}

@media (max-width: 700px) {
    body:has(.professional-side-nav) main h1 {
        font-size: 24px !important;
    }
}

/* Global Hand — desktop-only compact profile pages — 2026-07-31
   Compresses unused vertical space on professional pages.
   Mobile layout remains unchanged. */
@media (min-width: 701px) {
    .professional-area .content-card {
        padding: 16px 22px !important;
    }

    .professional-area .content-card h1 {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    .professional-area .content-card h2 {
        margin-top: 10px !important;
        margin-bottom: 5px !important;
    }

    .professional-area .content-card .lead {
        margin-bottom: 9px !important;
        line-height: 1.45 !important;
    }

    .professional-area .content-card form {
        gap: 4px !important;
    }

    .professional-area .content-card .form-grid {
        gap: 4px 12px !important;
    }

    .professional-area .content-card label {
        margin-top: 1px !important;
        line-height: 1.25 !important;
    }

    .professional-area .content-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .professional-area .content-card select {
        min-height: 36px !important;
        height: 36px !important;
        padding: 6px 9px !important;
    }

    .professional-area .content-card textarea {
        min-height: 82px !important;
        height: 82px !important;
        padding: 7px 9px !important;
    }

    .professional-area .content-card .photo-editor {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        gap: 10px !important;
        margin: 8px 0 9px !important;
        padding: 10px 12px !important;
    }

    .professional-area .content-card .profile-photo-preview,
    .professional-area .content-card .photo-placeholder {
        width: 90px !important;
        height: 90px !important;
        border-width: 3px !important;
    }

    .professional-area .content-card .photo-placeholder {
        font-size: 25px !important;
    }

    .professional-area .content-card .photo-editor h2 {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    .professional-area .content-card .photo-editor p,
    .professional-area .content-card .photo-editor small {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        line-height: 1.35 !important;
    }

    .professional-area .content-card .upload-panel,
    .professional-area .content-card .editor-form,
    .professional-area .content-card .education-form {
        padding: 10px 12px !important;
    }

    .professional-area .content-card .check-row {
        gap: 6px !important;
        line-height: 1.3 !important;
    }

    .professional-area .content-card .check-row input {
        margin-top: 1px !important;
    }

    .professional-area .content-card button,
    .professional-area .content-card .button-link,
    .professional-area .content-card .primary-link,
    .professional-area .content-card .secondary-link {
        min-height: 34px !important;
        padding: 6px 11px !important;
    }

    .professional-area .content-card button {
        margin-top: 8px !important;
    }

    .professional-area .content-card .danger-zone {
        margin-top: 15px !important;
        padding: 11px 13px !important;
    }

    .professional-area .content-card .item-list,
    .professional-area .content-card .tag-list {
        margin-top: 11px !important;
    }
}

/* Global Hand — full-height professional sidebar at 100% browser zoom — 2026-08-01
   Keeps the account card compact, fits the complete menu whenever the viewport
   allows it, and leaves only the links area scrollable as a fallback. */
@media (min-width: 701px) {
    .professional-sidebar {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: 8px 7px !important;
        overflow: hidden !important;
    }

    .professional-sidebar-profile {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-areas:
            "avatar name"
            "avatar profession"
            "avatar ghid" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 1px !important;
        margin: 0 0 6px !important;
        padding: 7px 8px !important;
        border-radius: 11px !important;
        text-align: start !important;
    }

    .professional-sidebar-avatar {
        grid-area: avatar !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-width: 2px !important;
        font-size: 15px !important;
    }

    .professional-sidebar-profile strong {
        grid-area: name !important;
        min-width: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .professional-sidebar-profile span {
        grid-area: profession !important;
        min-width: 0 !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .professional-sidebar-profile small {
        grid-area: ghid !important;
        min-width: 0 !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .professional-side-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        row-gap: 1px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-inline-end: 2px !important;
        scrollbar-width: thin;
    }

    .professional-side-nav a,
    .professional-side-nav a:not(:first-child) {
        min-height: 30px !important;
        height: 30px !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        gap: 6px !important;
        margin-block: 0 !important;
        padding: 4px 7px !important;
        border-radius: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    .professional-side-nav a span {
        font-size: 12px !important;
    }

    .professional-sidebar-logout {
        flex: 0 0 auto !important;
        margin-top: 5px !important;
        padding-top: 5px !important;
    }

    .professional-sidebar-logout button {
        min-height: 32px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        border-radius: 8px !important;
        font-size: 10.5px !important;
    }
}

/* Extra compression only on short laptop viewports. */
@media (min-width: 701px) and (max-height: 700px) {
    .professional-sidebar {
        padding-block: 6px !important;
    }

    .professional-sidebar-profile {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        margin-bottom: 4px !important;
        padding: 5px 7px !important;
    }

    .professional-sidebar-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    .professional-side-nav a,
    .professional-side-nav a:not(:first-child) {
        min-height: 27px !important;
        height: 27px !important;
        padding-block: 3px !important;
        font-size: 10px !important;
    }

    .professional-sidebar-logout {
        margin-top: 3px !important;
        padding-top: 3px !important;
    }

    .professional-sidebar-logout button {
        min-height: 29px !important;
        padding-block: 4px !important;
    }
}

/* GLOBAL-HAND-FIXED-SIDEBAR-0801 */
@media (min-width: 701px) {
    .professional-app-shell {
        display: block !important;
        min-height: 100vh !important;
    }

    .professional-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 185px !important;
        height: 100vh !important;
        overflow: hidden !important;
        z-index: 100 !important;
    }

    .professional-main-column {
        width: calc(100% - 185px) !important;
        min-height: 100vh !important;
        margin-right: 185px !important;
        margin-left: 0 !important;
    }

    [dir="ltr"] .professional-sidebar {
        left: 0 !important;
        right: auto !important;
    }

    [dir="ltr"] .professional-main-column {
        margin-left: 185px !important;
        margin-right: 0 !important;
    }
}

/* Global Hand — compact public homepage at 100% browser zoom — 2026-08-01 */
@media (min-width: 701px) and (max-width: 1450px) {
    .site-header {
        min-height: 62px;
        gap: 12px;
        padding: 8px clamp(18px, 4vw, 56px);
    }

    .brand img {
        width: 154px;
        height: 46px;
    }

    .language-switcher select {
        min-width: 104px;
        padding: 7px 9px;
        font-size: 13px;
    }

    .main-nav {
        gap: 7px 13px;
    }

    .main-nav a {
        font-size: 13.5px;
    }

    .page-shell {
        margin-top: 24px;
        margin-bottom: 30px;
    }

    .hero {
        padding: 24px 28px;
        border-radius: 20px;
    }

    .hero h1 {
        margin-top: 5px;
        margin-bottom: 7px;
        font-size: clamp(27px, 2.45vw, 34px);
        line-height: 1.25;
    }

    .hero .lead {
        margin-bottom: 16px;
        font-size: 15.5px;
        line-height: 1.65;
    }

    .search-box {
        gap: 10px 14px;
        padding: 14px;
        border-radius: 14px;
    }

    .search-box label {
        margin-top: 3px;
        font-size: 14px;
    }

    .search-box input,
    .search-box select {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 14px;
    }

    .search-box button {
        min-height: 42px;
        padding: 9px 16px;
        font-size: 14px;
    }

    .advanced-search {
        margin-top: 4px;
    }

    .advanced-search summary {
        font-size: 14px;
    }

    .public-section {
        margin: 30px 0;
    }

    .public-section .eyebrow {
        font-size: 12px;
    }

    .public-section h2 {
        margin: 5px 0 14px;
        font-size: 25px;
        line-height: 1.3;
    }

    .profession-grid {
        gap: 10px;
    }

    .profession-grid a {
        min-height: 72px;
        padding: 13px;
        font-size: 15px;
        border-radius: 11px;
    }

    .steps-grid {
        gap: 12px;
    }

    .steps-grid > div {
        padding: 18px;
        border-radius: 12px;
    }

    .steps-grid strong {
        width: 34px;
        height: 34px;
    }

    .steps-grid h3 {
        margin: 8px 0 7px;
        font-size: 18px;
    }

    .steps-grid p {
        margin: 0;
        font-size: 14px;
        line-height: 1.65;
    }

    .professional-invite {
        gap: 18px;
        padding: 22px 26px;
        border-radius: 16px;
    }

    .professional-invite h2 {
        margin: 4px 0 7px;
        font-size: 25px;
    }

    .professional-invite p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .professional-invite .primary-link {
        padding: 10px 16px;
        font-size: 14px;
    }

    .site-footer {
        padding: 20px clamp(18px, 4vw, 56px);
        font-size: 14px;
    }
}

/* Global Hand — unified desktop scale for every page — 2026-08-01
   One visual scale across public, professional, search, account and admin pages.
   Mobile up to 700px remains unchanged.
*/
@media (min-width: 701px) {
    :root {
        --gh-desktop-shell: 1080px;
        --gh-desktop-body-size: 13px;
        --gh-desktop-h1-size: 24px;
        --gh-desktop-h2-size: 17px;
        --gh-desktop-h3-size: 15px;
        --gh-desktop-card-padding: 16px;
        --gh-desktop-section-gap: 14px;
        --gh-desktop-control-height: 40px;
        --gh-desktop-radius: 14px;
    }

    html,
    body {
        font-size: var(--gh-desktop-body-size) !important;
    }

    /* One content width and one vertical rhythm on every desktop page */
    .page-shell,
    .professional-page-shell {
        width: min(calc(100% - 28px), var(--gh-desktop-shell)) !important;
        margin: 22px auto 30px !important;
    }

    .professional-page-shell {
        margin-top: 16px !important;
    }

    /* Unified card proportions */
    .auth-card,
    .dashboard-card,
    .content-card,
    .dashboard-panel,
    .public-profile,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form,
    .record-card,
    .price-card,
    .unlock-form,
    .notice-box,
    .danger-zone {
        border-radius: var(--gh-desktop-radius) !important;
    }

    .auth-card,
    .dashboard-card,
    .content-card {
        padding: 20px !important;
    }

    .dashboard-panel,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form {
        padding: var(--gh-desktop-card-padding) !important;
    }

    /* Same heading scale across all pages */
    h1,
    .content-card h1,
    .section-heading h1,
    .dashboard-welcome h1,
    .public-profile h1 {
        font-size: var(--gh-desktop-h1-size) !important;
        line-height: 1.3 !important;
    }

    h2,
    .content-card h2,
    .public-section h2,
    .dashboard-panel h2,
    .filter-panel h2,
    .public-profile h2,
    .unlock-box h2 {
        font-size: var(--gh-desktop-h2-size) !important;
        line-height: 1.35 !important;
    }

    h3,
    .steps-grid h3 {
        font-size: var(--gh-desktop-h3-size) !important;
        line-height: 1.35 !important;
    }

    .lead,
    .readable,
    .dashboard-readable,
    .visibility-panel p,
    .notice-box,
    .plain-list,
    .record-card p,
    .result-content p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    /* Unified fields and buttons */
    input,
    select,
    textarea {
        min-height: var(--gh-desktop-control-height) !important;
        padding: 9px 11px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    textarea {
        min-height: 92px !important;
    }

    button,
    .primary-link,
    .secondary-link,
    .button-link {
        min-height: var(--gh-desktop-control-height) !important;
        padding: 9px 13px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    label,
    small,
    .eyebrow,
    .panel-kicker,
    .form-footer,
    .report-box summary {
        font-size: 12px !important;
    }

    /* Unified spacing */
    form,
    .item-list,
    .result-list,
    .document-status-list,
    .completion-checklist {
        gap: 9px !important;
    }

    .form-grid,
    .search-layout,
    .dashboard-primary-grid,
    .dashboard-secondary-grid,
    .checkout-summary,
    .contact-grid,
    .profession-grid,
    .steps-grid {
        gap: var(--gh-desktop-section-gap) !important;
    }

    .public-section {
        margin: 30px 0 !important;
    }

    .profile-summary,
    .summary-grid,
    .tag-list,
    .access-actions {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Search and result pages */
    .search-layout {
        grid-template-columns: 240px minmax(0, 1fr) !important;
    }

    .professional-card {
        grid-template-columns: 76px minmax(0, 1fr) auto !important;
        gap: 14px !important;
    }

    .result-photo {
        width: 70px !important;
        height: 70px !important;
        font-size: 20px !important;
    }

    .result-photo.large {
        width: 104px !important;
        height: 104px !important;
        font-size: 28px !important;
    }

    .result-content h2 {
        margin: 2px 0 5px !important;
    }

    /* Lists, summaries and tables */
    .profile-summary div,
    .summary-grid div,
    .checkout-summary div,
    .contact-grid div,
    .quick-summary-grid > div {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .record-card h2 {
        font-size: 15px !important;
    }

    th,
    td {
        padding: 9px 10px !important;
        font-size: 12.5px !important;
    }

    .empty-state {
        padding: 30px !important;
    }

    /* Header and footer use the same compact scale everywhere */
    .site-header {
        min-height: 62px !important;
        padding: 8px clamp(18px, 4vw, 56px) !important;
    }

    .brand img {
        width: 154px !important;
        height: 46px !important;
    }

    .main-nav a {
        font-size: 13px !important;
    }

    .site-footer {
        padding: 20px clamp(18px, 4vw, 56px) !important;
        font-size: 13px !important;
    }

    /* Admin pages */
    .admin-stats {
        gap: 10px !important;
        margin: 16px 0 !important;
    }

    .admin-stats div {
        padding: 13px !important;
    }

    .admin-stats strong {
        font-size: 23px !important;
    }
}

/* Global Hand — homepage and registration matched at 100% zoom — 2026-08-01 */
@media (min-width: 701px) {
    /* Registration page uses the same desktop header proportions as the homepage */
    body:has(.register-card) .site-header {
        min-height: 62px !important;
        gap: 12px !important;
        padding: 8px clamp(18px, 4vw, 56px) !important;
    }

    body:has(.register-card) .brand img {
        width: 154px !important;
        height: 46px !important;
    }

    body:has(.register-card) .main-nav {
        flex: 1 1 auto !important;
        margin-inline-start: 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 7px 13px !important;
    }

    body:has(.register-card) .main-nav a {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    body:has(.register-card) .language-switcher select {
        min-width: 104px !important;
        height: 40px !important;
        padding: 9px 11px !important;
        font-size: 13px !important;
    }

    /* Same content width and spacing as the homepage */
    body:has(.register-card) .page-shell {
        width: min(calc(100% - 28px), 1080px) !important;
        margin: 22px auto 30px !important;
    }

    body:has(.register-card) .register-card {
        width: 100% !important;
        max-width: none !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }

    body:has(.register-card) .register-card h1 {
        margin: 4px 0 6px !important;
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    body:has(.register-card) .register-card .lead {
        margin: 0 0 14px !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    body:has(.register-card) .register-card .eyebrow,
    body:has(.register-card) .register-card label,
    body:has(.register-card) .register-card small,
    body:has(.register-card) .register-login-link {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body:has(.register-card) .register-card form {
        gap: 9px !important;
    }

    body:has(.register-card) .register-grid {
        gap: 10px 16px !important;
    }

    body:has(.register-card) .register-card input,
    body:has(.register-card) .register-card select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 9px 11px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    body:has(.register-card) .register-options-row {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body:has(.register-card) .register-card .check-row {
        min-height: 40px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body:has(.register-card) .register-card .check-row input {
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
    }

    body:has(.register-card) .register-action-row {
        gap: 16px !important;
        margin-top: 2px !important;
    }

    body:has(.register-card) .register-action-row button {
        min-height: 40px !important;
        height: 40px !important;
        padding: 9px 13px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    body:has(.register-card) .site-footer {
        padding: 20px clamp(18px, 4vw, 56px) !important;
        font-size: 13px !important;
    }
}

/* Global Hand — same font and pixel scale on ALL desktop pages — 2026-08-01
   Desktop starts at 701px. Mobile remains unchanged.
*/
@media (min-width: 701px) {
    :root {
        --gh-font-base: 13px;
        --gh-font-small: 12px;
        --gh-font-h1: 20px;
        --gh-font-h2: 17px;
        --gh-font-h3: 15px;
        --gh-control-height: 40px;
        --gh-card-padding: 16px;
        --gh-card-radius: 14px;
        --gh-layout-gap: 14px;
        --gh-shell-width: 1080px;
    }

    html,
    body {
        font-size: var(--gh-font-base) !important;
    }

    .page-shell,
    .professional-page-shell,
    .admin-shell.page-shell {
        width: min(calc(100% - 28px), var(--gh-shell-width)) !important;
        max-width: var(--gh-shell-width) !important;
        margin: 22px auto 30px !important;
    }

    h1,
    .hero h1,
    .dashboard-welcome h1,
    .content-card h1,
    .section-heading h1,
    .public-profile h1 {
        font-size: var(--gh-font-h1) !important;
        line-height: 1.3 !important;
    }

    h2,
    .public-section h2,
    .dashboard-panel h2,
    .content-card h2,
    .filter-panel h2,
    .public-profile h2,
    .unlock-box h2 {
        font-size: var(--gh-font-h2) !important;
        line-height: 1.35 !important;
    }

    h3,
    .steps-grid h3 {
        font-size: var(--gh-font-h3) !important;
        line-height: 1.35 !important;
    }

    p,
    li,
    dd,
    dt,
    th,
    td,
    label,
    input,
    select,
    textarea,
    button,
    .primary-link,
    .secondary-link,
    .button-link,
    .main-nav a,
    .site-footer,
    .professional-area,
    .admin-shell {
        font-size: var(--gh-font-base) !important;
    }

    small,
    .eyebrow,
    .panel-kicker,
    .form-footer,
    .report-box summary {
        font-size: var(--gh-font-small) !important;
    }

    input,
    select,
    button,
    .primary-link,
    .secondary-link,
    .button-link {
        min-height: var(--gh-control-height) !important;
        height: auto !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
    }

    textarea {
        min-height: 92px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
    }

    .auth-card,
    .dashboard-card,
    .content-card,
    .dashboard-panel,
    .public-profile,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form,
    .record-card,
    .unlock-box,
    .notice-box,
    .danger-zone {
        border-radius: var(--gh-card-radius) !important;
    }

    .auth-card,
    .dashboard-card,
    .content-card,
    .dashboard-panel,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form {
        padding: var(--gh-card-padding) !important;
    }

    .form-grid,
    .search-layout,
    .dashboard-primary-grid,
    .dashboard-secondary-grid,
    .profession-grid,
    .steps-grid,
    .checkout-summary,
    .contact-grid {
        gap: var(--gh-layout-gap) !important;
    }

    .site-header {
        min-height: 62px !important;
        padding: 8px clamp(18px, 4vw, 56px) !important;
    }

    .brand img {
        width: 154px !important;
        height: 46px !important;
    }

    .site-footer {
        padding: 20px clamp(18px, 4vw, 56px) !important;
    }
}

/* GLOBAL HAND — FINAL UNIFIED DESKTOP SCALE — 20PX — 2026-08-01
   Applies to every public, account, professional and admin page at 100% zoom.
   Mobile up to 700px is intentionally unchanged.
*/
@media (min-width: 701px) {
    :root {
        --gh-final-body: 13px;
        --gh-final-small: 12px;
        --gh-final-h1: 20px;
        --gh-final-h2: 17px;
        --gh-final-h3: 15px;
        --gh-final-control: 40px;
        --gh-final-card-padding: 16px;
        --gh-final-gap: 14px;
        --gh-final-radius: 14px;
        --gh-final-shell: 1080px;
    }

    html,
    body {
        font-size: var(--gh-final-body) !important;
    }

    /* One desktop content scale across the whole site */
    .page-shell,
    .professional-page-shell,
    .admin-shell.page-shell {
        width: min(calc(100% - 28px), var(--gh-final-shell)) !important;
        max-width: var(--gh-final-shell) !important;
        margin: 22px auto 30px !important;
        box-sizing: border-box !important;
    }

    /* Main page titles: always 20px */
    h1,
    .hero h1,
    .auth-card h1,
    .dashboard-card h1,
    .content-card h1,
    .section-heading h1,
    .public-profile h1,
    .dashboard-welcome h1,
    body:has(.register-card) .register-card h1 {
        font-size: var(--gh-final-h1) !important;
        line-height: 1.3 !important;
    }

    /* Section titles */
    h2,
    .public-section h2,
    .dashboard-panel h2,
    .content-card h2,
    .filter-panel h2,
    .public-profile h2,
    .unlock-box h2,
    .panel-heading h2,
    .visibility-panel h2,
    .record-card h2,
    .result-content h2 {
        font-size: var(--gh-final-h2) !important;
        line-height: 1.35 !important;
    }

    h3,
    .steps-grid h3 {
        font-size: var(--gh-final-h3) !important;
        line-height: 1.4 !important;
    }

    /* Normal text on every page */
    body,
    p,
    li,
    dt,
    dd,
    th,
    td,
    input,
    select,
    textarea,
    button,
    .primary-link,
    .secondary-link,
    .button-link,
    .main-nav a,
    .site-footer,
    .professional-area,
    .admin-shell,
    .result-content,
    .readable,
    .dashboard-readable,
    .record-card,
    .document-status-list,
    .visibility-panel p,
    .dashboard-responsibility-note {
        font-size: var(--gh-final-body) !important;
    }

    label,
    small,
    .eyebrow,
    .panel-kicker,
    .form-footer,
    .report-box summary,
    .quick-summary-grid dt,
    .summary-grid span,
    .profile-summary dt,
    .result-content p,
    .record-card p {
        font-size: var(--gh-final-small) !important;
    }

    .lead,
    .readable,
    .dashboard-readable,
    .visibility-panel p,
    .notice-box,
    .record-card p,
    .result-content p {
        line-height: 1.65 !important;
    }

    /* Same field and button pixel sizes */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    button,
    .primary-link,
    .secondary-link,
    .button-link {
        min-height: var(--gh-final-control) !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
        font-size: var(--gh-final-body) !important;
        box-sizing: border-box !important;
    }

    textarea {
        min-height: 96px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
        font-size: var(--gh-final-body) !important;
        box-sizing: border-box !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
        flex: 0 0 16px !important;
    }

    input[type="file"] {
        height: auto !important;
        padding: 5px 7px !important;
    }

    /* Same card proportions */
    .auth-card,
    .dashboard-card,
    .content-card,
    .dashboard-panel,
    .public-profile,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form,
    .unlock-box,
    .notice-box,
    .danger-zone,
    .price-card {
        border-radius: var(--gh-final-radius) !important;
    }

    .auth-card,
    .dashboard-card,
    .content-card,
    .dashboard-panel,
    .filter-panel,
    .professional-card,
    .admin-ticket,
    .upload-panel,
    .editor-form,
    .education-form {
        padding: var(--gh-final-card-padding) !important;
    }

    .record-card {
        padding: 12px !important;
        border-radius: 11px !important;
    }

    .form-grid,
    .search-layout,
    .dashboard-primary-grid,
    .dashboard-secondary-grid,
    .profession-grid,
    .steps-grid,
    .checkout-summary,
    .contact-grid,
    .result-list,
    .item-list,
    .document-status-list,
    .completion-checklist {
        gap: var(--gh-final-gap) !important;
    }

    /* Public header and footer */
    .site-header {
        min-height: 62px !important;
        padding: 8px clamp(18px, 4vw, 56px) !important;
        gap: 12px !important;
    }

    .brand img {
        width: 154px !important;
        height: 46px !important;
    }

    .main-nav {
        gap: 7px 13px !important;
    }

    .main-nav a {
        font-size: var(--gh-final-body) !important;
        line-height: 1.3 !important;
    }

    .language-switcher select {
        min-width: 104px !important;
        min-height: var(--gh-final-control) !important;
        font-size: var(--gh-final-body) !important;
    }

    .site-footer {
        padding: 20px clamp(18px, 4vw, 56px) !important;
        font-size: var(--gh-final-body) !important;
    }

    /* Homepage */
    .hero {
        padding: 26px 28px !important;
        border-radius: 18px !important;
    }

    .hero .lead {
        margin-bottom: 16px !important;
        font-size: var(--gh-final-body) !important;
    }

    .search-box {
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
    }

    .public-section {
        margin: 30px 0 !important;
    }

    .profession-grid a,
    .steps-grid > div {
        padding: 14px !important;
        border-radius: 11px !important;
        font-size: var(--gh-final-body) !important;
    }

    .professional-invite {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    /* Registration, login and contact */
    body:has(.register-card) .register-card {
        padding: var(--gh-final-card-padding) !important;
    }

    body:has(.register-card) .register-card h1 {
        margin: 2px 0 5px !important;
    }

    body:has(.register-card) .register-grid,
    body:has(.register-card) .register-options-row,
    body:has(.register-card) .register-action-row {
        gap: 12px !important;
    }

    body:has(.register-card) .register-card .lead {
        margin-bottom: 12px !important;
        font-size: var(--gh-final-body) !important;
    }

    .auth-card form,
    .content-card form {
        gap: 10px !important;
    }

    /* Search and results */
    .search-layout {
        grid-template-columns: 240px minmax(0, 1fr) !important;
    }

    .professional-card {
        grid-template-columns: 76px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .result-photo {
        width: 70px !important;
        height: 70px !important;
        font-size: 20px !important;
    }

    .result-photo.large {
        width: 104px !important;
        height: 104px !important;
        font-size: 28px !important;
    }

    .result-content h2 {
        margin: 2px 0 5px !important;
    }

    .result-content p {
        margin: 3px 0 !important;
    }

    /* Public profile and access page */
    .public-profile {
        padding: 18px !important;
    }

    .profile-hero {
        gap: 16px !important;
        padding-bottom: 16px !important;
    }

    .summary-grid,
    .profile-summary {
        gap: 12px !important;
        margin: 16px 0 !important;
    }

    .summary-grid div,
    .profile-summary div,
    .checkout-summary div,
    .contact-grid div,
    .quick-summary-grid > div {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .public-tags span {
        padding: 6px 10px !important;
        font-size: var(--gh-final-small) !important;
    }

    .unlock-box {
        gap: 16px !important;
        margin-top: 18px !important;
        padding: 16px !important;
    }

    .access-actions {
        gap: 10px !important;
        margin: 16px 0 !important;
    }

    /* Professional area: same typography and pixel system */
    .professional-app-shell {
        grid-template-columns: 190px minmax(0, 1fr) !important;
    }

    .professional-sidebar {
        padding: 10px 8px !important;
        font-size: var(--gh-final-small) !important;
    }

    .professional-brand {
        padding: 5px 7px !important;
        border-radius: 10px !important;
    }

    .professional-brand img {
        width: 118px !important;
        height: 35px !important;
    }

    .professional-sidebar-profile {
        gap: 4px !important;
        margin: 10px 0 !important;
        padding: 9px 7px !important;
        border-radius: 13px !important;
    }

    .professional-sidebar-avatar {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 3px !important;
        font-size: 18px !important;
    }

    .professional-sidebar-profile strong {
        font-size: 13px !important;
    }

    .professional-sidebar-profile span,
    .professional-sidebar-profile small {
        font-size: 10px !important;
    }

    .professional-side-nav {
        gap: 2px !important;
    }

    .professional-side-nav a {
        min-height: 34px !important;
        grid-template-columns: 20px 1fr !important;
        gap: 7px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    .professional-side-nav a span {
        font-size: 14px !important;
    }

    .professional-sidebar-logout button {
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    .professional-topbar {
        min-height: 54px !important;
        padding: 7px 16px !important;
    }

    .professional-topbar .language-switcher select {
        min-width: 108px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 26px 6px 29px !important;
        font-size: 12px !important;
    }

    .professional-page-shell {
        margin: 18px auto 28px !important;
    }

    .professional-dashboard {
        gap: var(--gh-final-gap) !important;
    }

    .dashboard-welcome {
        gap: 14px !important;
        padding: 6px 4px 2px !important;
    }

    .dashboard-welcome h1 {
        margin-bottom: 4px !important;
    }

    .dashboard-welcome p {
        font-size: var(--gh-final-body) !important;
        line-height: 1.55 !important;
    }

    .profile-visibility {
        padding: 7px 11px !important;
        font-size: var(--gh-final-small) !important;
    }

    .dashboard-panel {
        padding: var(--gh-final-card-padding) !important;
        border-radius: var(--gh-final-radius) !important;
    }

    .panel-heading {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .panel-heading > a {
        padding: 6px 9px !important;
        font-size: var(--gh-final-small) !important;
    }

    .completion-layout {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .completion-ring {
        width: 104px !important;
        height: 104px !important;
    }

    .completion-ring::before {
        inset: 8px !important;
    }

    .completion-ring strong {
        font-size: 24px !important;
    }

    .completion-check {
        min-height: 32px !important;
        grid-template-columns: 20px 1fr !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
    }

    .completion-check span {
        width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
    }

    .completion-check b {
        font-size: var(--gh-final-small) !important;
    }

    .quick-summary-grid dd,
    .activity-grid span,
    .document-status-list,
    .dashboard-responsibility-note {
        font-size: var(--gh-final-body) !important;
    }

    .activity-grid strong {
        font-size: 20px !important;
    }

    .document-status-list > div {
        padding: 10px !important;
        border-radius: 9px !important;
    }

    .visibility-panel {
        gap: 16px !important;
    }

    /* Professional forms, records and settings */
    .editor-form,
    .education-form,
    .upload-panel {
        padding: var(--gh-final-card-padding) !important;
    }

    .item-list {
        margin-top: 16px !important;
    }

    .record-actions,
    .visibility-actions,
    .tag-list,
    .access-actions {
        gap: 8px !important;
    }

    .tag-list {
        margin-top: 16px !important;
    }

    .tag-list form {
        padding: 5px 7px 5px 11px !important;
        font-size: var(--gh-final-small) !important;
    }

    .photo-editor {
        grid-template-columns: 150px minmax(0, 1fr) !important;
        gap: 18px !important;
        margin: 18px 0 !important;
        padding: 16px !important;
    }

    .profile-photo-preview,
    .photo-placeholder {
        width: 132px !important;
        height: 132px !important;
    }

    .danger-zone {
        margin-top: 22px !important;
        padding: 16px !important;
    }

    /* Admin pages */
    .admin-stats {
        gap: 10px !important;
        margin: 16px 0 !important;
    }

    .admin-stats div {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .admin-stats strong {
        font-size: 22px !important;
    }

    th,
    td {
        padding: 9px 10px !important;
        font-size: var(--gh-final-small) !important;
    }
}

/* Global Hand — compact My Profile form on desktop only — 2026-08-02
   Scoped to /profile so other professional pages and phones remain unchanged. */
@media (min-width: 701px) {
    body.professional-area:has(main form[action="/profile"]) .professional-page-shell {
        width: min(calc(100% - 28px), 1080px) !important;
    }

    body.professional-area:has(main form[action="/profile"]) .content-card {
        width: 100% !important;
        padding: 14px 18px !important;
        border-radius: 15px !important;
    }

    body.professional-area:has(main form[action="/profile"]) .content-card > .eyebrow {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    body.professional-area:has(main form[action="/profile"]) .content-card > h1 {
        margin: 2px 0 4px !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    body.professional-area:has(main form[action="/profile"]) .content-card > .lead {
        margin: 0 0 9px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor {
        grid-template-columns: 94px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 9px 0 12px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    body.professional-area:has(main form[action="/profile"]) .profile-photo-preview,
    body.professional-area:has(main form[action="/profile"]) .photo-placeholder {
        width: 82px !important;
        height: 82px !important;
        border-width: 3px !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-placeholder {
        font-size: 23px !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor h2 {
        margin: 0 0 3px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor p {
        margin: 0 0 6px !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor form[action="/profile/photo"] {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor form[action="/profile/photo"] > div {
        min-width: 0;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.professional-area:has(main form[action="/profile"]) #profile_photo_name {
        min-width: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: 11px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor button {
        width: auto !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    body.professional-area:has(main form[action="/profile"]) .photo-editor form[action="/profile/photo/delete"] {
        margin-top: 6px !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] {
        gap: 6px !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] .form-grid {
        gap: 7px 12px !important;
        margin-bottom: 3px !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] label {
        margin-top: 0 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] input:not([type="checkbox"]):not([type="radio"]),
    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] select {
        height: 34px !important;
        min-height: 34px !important;
        padding: 5px 9px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] textarea {
        min-height: 70px !important;
        height: 70px !important;
        padding: 7px 9px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] > h2 {
        margin: 8px 0 3px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] .check-row {
        gap: 7px !important;
        margin-top: 1px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] .check-row input {
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        margin-top: 1px !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] > .lead {
        margin: 3px 0 4px !important;
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] > button[type="submit"] {
        width: auto !important;
        min-width: 190px !important;
        min-height: 34px !important;
        justify-self: start !important;
        margin-top: 4px !important;
        padding: 7px 16px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 1050px) {
    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 701px) and (max-width: 1049px) {
    body.professional-area:has(main form[action="/profile"]) form[action="/profile"] .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}