/* Approved dark concept, 8 October 2026. Shared by client and manager. */
:root {
  color-scheme: light;
  --ink: #1b2535; --muted: #5d6878; --line: #e0e6ee;
  --blue: #2471e8; --blue-strong: #2162ce; --blue-soft: #eaf2ff;
  --bg: #f4f6fa; --surface: #fff; --navy: #0a1526;
  --shadow: 0 6px 24px rgb(10 21 38 / 4%);
}
body { color: var(--ink); background: var(--bg); }
button, .button { border-color: #246ce3; background: linear-gradient(115deg, #2471e8, #2062e8); box-shadow: 0 5px 14px rgb(33 98 206 / 14%); }
button:hover, .button:hover { background: #2162ce; }
.quiet { color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; }
.quiet:hover { color: var(--ink); background: #edf1f6; }
input, select, textarea { color: var(--ink); border-color: #ccd5e1; }
th, .portal-content th { background: #f4f6fa; color: #566173; }
tbody tr:hover, .portal-content tbody tr:hover { background: #f7f9fc; }
.back, .status-tabs > a, .status-tab { color: #526174; }
.status-tabs > a.active { color: var(--blue-strong); background: var(--blue-soft); }
.status-tabs b, .status-tab b { color: #526174; background: #edf1f7; }
.brand-mark { color: var(--ink); }
.brand small { color: #64748b; }
header.topbar { color: #e9effa; background: var(--navy); border-bottom-color: #26344a; box-shadow: 0 4px 18px rgb(10 21 38 / 8%); }
.topbar-label { color: #e9effa; }
.topbar .session-role, .topbar .quiet { color: #c2cee0; }
.topbar .quiet:hover { color: #fff; background: #1b2b44; }
.portal-sidebar { color: #e9effa; background: linear-gradient(160deg, #10213a, #0a1526 70%); border-color: #21314a; box-shadow: 0 12px 32px rgb(10 21 38 / 10%); }
.portal-sidebar .brand, .portal-sidebar .brand-mark { color: #fff; }
.portal-sidebar .brand small { color: #aebdd4; }
.nav-caption { color: #a1b2ca; }
.side-nav a, .sidebar-help { color: #c7d3e6; }
.side-nav a > span:first-child, .sidebar-help > span:first-child { color: #9db8df; }
.side-nav a:hover, .sidebar-help:hover { color: #fff; background: #1c3050; }
.side-nav a.active, .sidebar-help.active { color: #fff; background: #235ab1; }
.side-nav a.active > span:first-child { color: #fff; }
.sidebar-profile { border-top-color: #2b3c55; }
.sidebar-profile small { color: #a9bad3; }
.avatar { background: #276be0; }
.portal-content .metrics strong { color: #172238; }
.portal-content .card, .portal-content .metrics > div { border-color: var(--line); }
.action-card { background: linear-gradient(155deg, #fff 45%, #f4f7fc); }
.portal-footer { color: #617084; }
.login-page { background: radial-gradient(ellipse at 80% 0%, #163969, transparent 65%), #0a1526; }
.login-brand, .login-brand .brand-mark { color: #fff; }
.login-brand small { color: #c2cee0; }
.login-card { background: #fff; border-color: #dde4ee; box-shadow: 0 24px 60px rgb(0 0 0 / 20%); }
.login-card h1 { color: #1b2535; }
.login-card > p.muted { color: #5d6878; }
.login-card .login-tabs { background: #f2f5fa; }
.login-card button { background: linear-gradient(115deg, #2471e8, #2062e8); }
.login-card button:hover { background: #2162ce; }
.login-page .landing-footer { color: #c2cee0; }
.role-login-page { color: #1b2535; background: #f4f6fa; }
.role-login-hero { background: radial-gradient(ellipse at 90% 25%, #173f77, transparent 65%), linear-gradient(160deg, #10213a, #0a1526); color: #fff; }
.role-login-brand, .role-login-intro h1 { color: #fff; }
.role-login-brand small { color: #b1c0d6; }
.role-login-mark { background: linear-gradient(135deg, #3185ff, #2062ce); }
.role-login-eyebrow { color: #98bfff; }
.role-login-intro > p:last-child { color: #bdcbe0; }
.role-login-benefits > div { background: rgb(255 255 255 / 4%); border-color: #344765; }
.role-login-benefits strong { color: #fff; }
.role-login-benefits span { color: #b1c0d6; }
.role-login-side { background: #f4f6fa; }
.role-login-card { background: #fff; border-color: #dde4ee; border-radius: 16px; box-shadow: 0 12px 36px rgb(10 21 38 / 7%); }
.role-login-card h2, .role-login-label, .role-login-card input { color: #1b2535; }
.role-login-welcome, .role-login-help { color: #5d6878; }
.role-login-switch a { color: #526174; border-color: #ccd5e1; }
.role-login-switch a.selected { color: #2162ce; background: #eaf2ff; border-color: #2e84ff; }
.role-login-card button { background: linear-gradient(115deg, #2471e8, #2062e8); }
.role-login-card button:hover { background: #2162ce; }
.role-login-card .role-login-password-toggle { color: #617084; background: transparent; box-shadow: none; }
.role-login-card .role-login-password-toggle:hover { background: #edf3fc; }
.legal-page { background: #f4f6fa; }
.legal-main, .legal-header .brand-mark { color: #1b2535; }
.legal-lead { color: #5d6878; }

/* Landing: dark introduction, light journey and preparation. */
.landing-page:not(.legal-page) { --ink: #1b2535; --muted: #5d6878; --line: #e0e6ee; background: #fff; }
.landing-top { position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 90% 30%, #143c75 0%, transparent 58%), linear-gradient(135deg, #0a1526, #10213a); }
.landing-top::before { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; top: -220px; border: 1px solid rgb(79 153 255 / 15%); border-radius: 50%; box-shadow: 0 0 0 95px rgb(79 153 255 / 3%), 0 0 0 190px rgb(79 153 255 / 2%); pointer-events: none; }
.landing-top .landing-header { position: relative; max-width: 1320px; height: 86px; margin: 0 auto; padding: 18px 36px; display: flex; align-items: center; gap: 28px; background: transparent; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.landing-top .brand, .landing-top .brand-mark { color: #fff; }
.landing-top .brand small { color: #b7c6dc; }
.landing-top .brand-mark { font-size: 29px; }
.landing-top .landing-links { display: flex; gap: 28px; }
.landing-top .law-pill { min-width: 0; height: auto; color: #c4d1e6; background: transparent; border: none; font-size: 14px; font-weight: 500; }
.landing-top .law-pill:hover { color: #fff; text-decoration: underline; }
.landing-page .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 24px; background: linear-gradient(115deg, #2471e8, #2062e8); border-color: #2b78f5; border-radius: 10px; box-shadow: 0 7px 20px rgb(0 57 150 / 15%); color: #fff; }
.landing-page .button:hover { background: #2162ce; filter: none; }
.landing-top .landing-header > .cabinet-link { min-height: 42px; min-width: 0; padding: 8px 0 8px 16px; color: #fff; background: transparent; border: none; box-shadow: none; font-size: 14px; }
.cabinet-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.landing-top .landing-main { position: relative; max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 56px; margin: 0 auto; padding: 76px 36px 80px; }
.landing-top .landing-copy .eyebrow { color: #9ec4ff; font-size: 11px; letter-spacing: 1.5px; }
.landing-top .landing-copy h1 { color: #fff; font-size: clamp(34px, 3.5vw, 49px); line-height: 1.13; letter-spacing: -1.6px; margin: 18px 0 22px; }
.landing-top .landing-lead { color: #b9c8de; font-size: 21px; font-weight: 400; line-height: 1.55; margin-bottom: 30px; max-width: 560px; }
.landing-top .landing-actions { gap: 14px; }
.landing-top .secondary-button { color: #eef4ff; background: transparent; border: 1px solid #8aa7cf; box-shadow: none; }
.landing-top .secondary-button:hover { background: #20395b; }
.landing-action-help { color: #b1c2dc; font-size: 13px; margin: 16px 0 24px; }
.landing-scenarios { color: #b1c2dc; font-size: 12px; margin: 0; scroll-margin-top: 20px; }
.landing-top .landing-visual { display: block; position: relative; padding: 20px 0 20px 12px; }
.landing-visual::before, .landing-visual::after { content: ""; position: absolute; inset: 3px 10px 5px 20px; background: rgb(32 78 138 / 30%); border: 1px solid rgb(91 169 255 / 55%); border-radius: 24px; transform: rotate(-5deg); pointer-events: none; }
.landing-visual::after { inset: 25px -12px -2px 30px; transform: rotate(4deg); opacity: .55; }
.application-preview { position: relative; z-index: 1; padding: 28px; border: 1px solid #527db9; border-radius: 22px; background: linear-gradient(145deg, #162e50, #0d1c32); box-shadow: 0 26px 65px rgb(0 0 0 / 25%); }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.preview-heading h2 { margin: 0; color: #fff; font-size: 22px; }
.preview-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #538bda; border-radius: 8px; color: #dceaff; font-size: 10px; white-space: nowrap; background: #193b69; }
.preview-badge i { width: 6px; height: 6px; border-radius: 50%; background: #4b9aff; }
.preview-stages { position: relative; display: grid; gap: 26px; list-style: none; margin: 0; padding: 28px 20px; border-radius: 14px; background: #f8faff; color: #172238; }
.preview-stages::before { content: ""; position: absolute; top: 55px; bottom: 55px; left: 46px; width: 1px; background: #c8dcf8; }
.preview-stages li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px; align-items: center; gap: 14px; }
.preview-icon { position: relative; display: grid; place-items: center; width: 52px; height: 56px; border-radius: 12px; background: #eaf2ff; color: #2875f5; }
.preview-icon svg, .control-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preview-stages strong { font-size: 13px; font-weight: 600; }
.preview-stages small { color: #5d6878; font-size: 11px; margin-bottom: 3px; }
.preview-line { display: block; width: 85%; height: 5px; border-radius: 3px; background: #dde5f1; margin-top: 9px; }
.preview-line.short { width: 55%; margin-top: 6px; }
.preview-check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; color: #fff; background: #3984f5; }
.preview-pending { width: 14px; height: 14px; border: 1.5px solid #879fbf; border-radius: 50%; }
.preview-caption { margin: 16px 0 0; font-size: 10px; color: #b1c2dc; text-align: center; }
.landing-control { max-width: 1320px; padding: 54px 36px 42px; margin: 0 auto; }
.landing-section-heading { max-width: 740px; margin: 0 auto 36px; text-align: center; }
.landing-section-heading h2 { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -.8px; margin-bottom: 12px; }
.landing-section-heading > p:last-child { color: #5d6878; font-size: 16px; }
.control-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.control-stages li { position: relative; text-align: center; min-width: 0; }
.control-stages li:not(:last-child)::after { content: "→"; position: absolute; top: 22px; left: calc(100% - 4px); color: #869dbb; font-size: 27px; font-weight: 300; }
.control-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 17px; border: 1px solid #d4e2f7; border-radius: 50%; background: #f4f8ff; color: #2875f5; }
.control-stages h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.control-stages p { color: #5d6878; font-size: 12px; line-height: 1.5; margin: 0 auto; max-width: 190px; }
.landing-preparation { max-width: 1248px; margin: 0 auto; padding: 32px 0; border-top: 1px solid #e0e6ee; display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 30px; }
.landing-preparation h2 { font-size: 22px; margin-bottom: 6px; }
.landing-preparation p { color: #5d6878; font-size: 12px; margin: 0; }
.landing-preparation ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.landing-preparation li { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border: 1px solid #e0e6ee; border-radius: 12px; font-size: 13px; }
.landing-preparation li > span { color: #2875f5; font-size: 12px; font-weight: 700; }
.landing-page:not(.legal-page) .landing-footer { max-width: 1320px; margin: 0 auto; padding: 26px 36px; border-top: 1px solid #e0e6ee; display: grid; grid-template-columns: auto 1fr 270px; align-items: center; gap: 16px 40px; }
.landing-footer .brand-mark { font-size: 24px; }
.landing-footer .brand strong { font-size: 22px; }
.landing-footer .brand small { font-size: 8px; color: #617084; }
.landing-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
.landing-footer nav a { color: #526174; font-size: 11px; }
.landing-footer > p { color: #617084; font-size: 11px; margin: 0; }
.landing-footer > small { grid-column: 1 / -1; color: #617084; font-size: 10px; }
@media (max-width: 1100px) {
  .landing-top .landing-main { gap: 28px; padding-top: 54px; padding-bottom: 54px; }
  .landing-top .landing-copy h1 { font-size: 38px; }
  .application-preview { padding: 20px; }
  .preview-heading { flex-wrap: wrap; }
  .landing-preparation { margin: 0 36px; grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .landing-top .landing-header { height: auto; flex-wrap: wrap; padding: 20px 22px; gap: 16px; }
  .landing-top .landing-header .brand small { font-size: 8px; }
  .landing-top .landing-header .brand-mark { font-size: 25px; }
  .landing-top .landing-header > .cabinet-link { margin-left: auto; padding: 8px 0; font-size: 12px; }
  .landing-top .landing-links { order: 3; width: 100%; justify-content: flex-start; gap: 26px; }
  .landing-top .landing-main { grid-template-columns: minmax(0, 1fr); padding: 38px 22px 44px; gap: 30px; }
  .landing-top .landing-copy h1 { font-size: clamp(32px, 7vw, 42px); letter-spacing: -1px; }
  .landing-top .landing-lead { font-size: 18px; }
  .landing-top .landing-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .landing-page .landing-actions .button { min-width: 0; padding: 13px 12px; font-size: 13px; }
  .landing-top .landing-visual { max-width: 500px; width: 100%; margin: 0 auto; padding: 12px 4px; }
  .landing-visual::after { right: 0; }
  .application-preview { padding: 22px; }
  .preview-heading { flex-wrap: nowrap; }
  .landing-control { padding: 40px 22px 32px; }
  .landing-section-heading { text-align: left; margin-bottom: 28px; }
  .landing-section-heading > p:last-child { font-size: 15px; }
  .control-stages { grid-template-columns: 1fr; gap: 30px; }
  .control-stages li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; text-align: left; }
  .control-icon { width: 56px; height: 56px; grid-row: 1 / 3; margin: 0; }
  .control-stages h3 { align-self: end; margin-bottom: 4px; }
  .control-stages p { max-width: none; margin: 0; }
  .control-stages li:not(:last-child)::after { content: "↓"; left: 19px; top: 55px; font-size: 22px; }
  .landing-preparation { margin: 0 22px; padding: 26px 0; }
  .landing-preparation ul { grid-template-columns: 1fr; gap: 10px; }
  .landing-preparation li { padding: 16px; }
  .landing-page:not(.legal-page) .landing-footer { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .landing-footer nav { justify-content: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 380px) {
  .landing-top .landing-header { padding: 16px; gap: 12px; }
  .cabinet-link svg { display: none; }
  .landing-top .landing-main { padding-left: 16px; padding-right: 16px; }
  .landing-top .landing-actions { grid-template-columns: 1fr; }
  .preview-heading { flex-wrap: wrap; gap: 10px; }
  .application-preview { padding: 18px; }
  .preview-stages { padding: 22px 12px; }
  .preview-stages li { gap: 10px; grid-template-columns: 44px minmax(0, 1fr) 14px; }
  .preview-icon { width: 44px; height: 48px; }
  .preview-stages::before { left: 34px; }
}

/* Real application tracking, matching the approved presentation card. */
.tracking-overview { margin: 26px 0; }
.tracking-overview > .section-heading { margin-bottom: 18px; align-items: flex-start; }
.tracking-overview > .section-heading p { font-size: 13px; margin: 6px 0 0; }
.tracking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 18px; }
.tracking-grid > div { min-width: 0; }
.tracking-grid:has(> div:only-child) { grid-template-columns: minmax(0, 720px); }
.tracking-card {
  min-width: 0; padding: 26px; margin-bottom: 22px; border: 1px solid #3b6599; border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0%, #214772, transparent 60%), linear-gradient(145deg, #162e50, #0d1c32);
  color: #fff; box-shadow: 0 18px 40px rgb(10 21 38 / 13%);
}
.tracking-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.tracking-head > div { min-width: 0; }
.tracking-eyebrow { color: #abc8ee; font-size: 10px; font-weight: 700; letter-spacing: 1px; margin: 0 0 7px; }
.tracking-head h2 { color: #fff; font-size: 24px; margin: 0 0 7px; }
.tracking-company { font-size: 13px; color: #c5d3e8; margin: 0; overflow-wrap: anywhere; }
.tracking-status { flex-shrink: 0; max-width: 48%; padding: 8px 11px; border: 1px solid #6799df; border-radius: 9px; background: #193b69; color: #e2edff; font-size: 11px; line-height: 1.4; }
.tracking-status--stopped { background: #472639; border-color: #ce8393; color: #ffe0e6; }
.tracking-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; gap: 28px; }
.tracking-surface { min-width: 0; padding: 24px; border-radius: 14px; color: #1b2535; background: #f8faff; }
.tracking-progress-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; font-size: 12px; }
.tracking-progress-label > span { color: #5d6878; font-size: 11px; }
.tracking-stages { display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.tracking-stages li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 44px; }
.tracking-stages li:not(:last-child)::after { content: ''; position: absolute; left: 18px; width: 2px; top: 38px; bottom: -14px; background: #d3dfef; }
.tracking-stages li:not(:last-child)::before { content: ''; position: absolute; left: 14px; bottom: -20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #d3dfef; }
.tracking-stages li.is-done::after { background: #15803d; }
.tracking-stages li.is-done::before { border-top-color: #15803d; }
.tracking-dot { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid #bbc9de; border-radius: 11px; background: #edf2fa; color: #62728a; font-size: 14px; font-weight: 700; }
.tracking-stages .is-done .tracking-dot { border-color: #15803d; color: #fff; background: #15803d; }
.tracking-stages .is-current .tracking-dot { border: 2px solid #2471e8; color: #2162ce; background: #fff; box-shadow: 0 0 0 4px #e1edff; }
.tracking-stages strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.tracking-stages .is-current strong { color: #2162ce; }
.tracking-stages small { font-size: 11px; color: #5d6878; margin-top: 4px; }
.tracking-next { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 14px 0; }
.tracking-next h3 { color: #fff; font-size: 25px; line-height: 1.3; margin: 0 0 14px; }
.tracking-next > div > p { color: #c5d3e8; font-size: 14px; line-height: 1.6; margin: 0 0 24px; max-width: 420px; }
.tracking-next .button { white-space: normal; max-width: 100%; }
.tracking-stopped { padding: 24px 0; }
.tracking-stopped > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px; border-radius: 12px; background: #ffe8ed; color: #9f253f; font-size: 28px; }
.tracking-stopped h3 { color: #1b2535; font-size: 18px; }
.tracking-stopped p { color: #5d6878; font-size: 13px; line-height: 1.6; }
.tracking-all-steps { display: inline-block; margin-top: 24px; color: #2162ce; font-size: 12px; font-weight: 600; }
.tracking-card--compact { height: 100%; margin: 0; padding: 22px; border-radius: 18px; }
.tracking-card--compact .tracking-head { gap: 12px; }
.tracking-card--compact .tracking-head h2 { font-size: 21px; }
.tracking-card--compact .tracking-body { display: block; }
.tracking-card--compact .tracking-surface { padding: 20px 18px; }
.tracking-card--compact .tracking-progress-label { margin-bottom: 20px; }
.tracking-card--compact .tracking-stages li:not(.in-window) { display: none; }
.tracking-card--compact .tracking-stages .window-end::after,
.tracking-card--compact .tracking-stages .window-end::before { display: none; }
.tracking-card--compact .tracking-next { padding: 22px 0 0; }
.tracking-card--compact .tracking-next h3 { font-size: 18px; margin-bottom: 8px; }
.tracking-card--compact .tracking-next > div > p { font-size: 12px; margin-bottom: 18px; }
.tracking-card--compact .tracking-company { font-size: 12px; }
.tracking-card--compact .tracking-stages strong { font-size: 13px; }
.tracking-card--compact .tracking-status { font-size: 10px; padding: 7px 9px; }
@media(max-width: 760px) {
  .tracking-overview > .section-heading { flex-direction: column; gap: 12px; }
  .tracking-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tracking-card { padding: 20px; border-radius: 16px; }
  .tracking-next { padding: 0; }
  .tracking-next h3 { font-size: 21px; }
  .tracking-next > div > p { font-size: 13px; margin-bottom: 18px; }
  .tracking-head h2 { font-size: 22px; }
  .tracking-company { font-size: 12px; }
  .tracking-surface { padding: 20px 16px; }
}
@media(max-width: 380px) {
  .tracking-card { padding: 16px; }
  .tracking-head { flex-wrap: wrap; gap: 12px; }
  .tracking-status { max-width: 100%; }
  .tracking-stages li { gap: 10px; }
  .tracking-stages strong { font-size: 13px; }
}

/* Native file picker follows the shared form theme without replacing the input. */
input[type="file"] { padding: 5px; min-height: 46px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 14px; border: 1px solid #ccd5e1; border-radius: 7px;
  background: var(--blue-soft); color: var(--blue-strong); font: 600 14px 'Segoe UI', sans-serif;
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px; padding: 9px 14px; border: 1px solid #ccd5e1; border-radius: 7px;
  background: var(--blue-soft); color: var(--blue-strong); font: 600 14px 'Segoe UI', sans-serif;
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
input[type="file"]:hover::file-selector-button { background: #dceaff; border-color: var(--blue); }
input[type="file"]:hover::-webkit-file-upload-button { background: #dceaff; border-color: var(--blue); }
input[type="file"]:disabled { cursor: default; opacity: .6; }
input[type="file"]:disabled::file-selector-button { cursor: default; }
input[type="file"]:disabled::-webkit-file-upload-button { cursor: default; }

/* Cabinet controls: compact actions, distinct secondary state and safe wrapping. */
:is(.portal-content, .preview-main, .problem) :is(button, .button) {
  min-width: 0; min-height: 44px; height: auto; width: fit-content; max-width: 100%;
  padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  line-height: 1.45; white-space: normal; overflow-wrap: anywhere; text-align: center;
  background: linear-gradient(120deg, #3269b9, #285aa5); border-color: #285aa5;
  box-shadow: 0 3px 8px rgb(34 75 132 / 10%); align-self: start;
}
:is(.portal-content, .preview-main, .problem) :is(button, .button):hover {
  background: #244f91; border-color: #244f91;
}
:is(.portal-content, .preview-main, .problem) :is(button, .button).secondary {
  background: #f1f5fc; border-color: #cad7e9; color: #285494; box-shadow: none;
}
:is(.portal-content, .preview-main, .problem) :is(button, .button).secondary:hover {
  background: #e4edf9; border-color: #a8bedb;
}
:is(.portal-content, .preview-main, .problem) :is(button, .button):focus-visible {
  outline: 3px solid #9dbde9; outline-offset: 3px;
}
.portal-content .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.portal-content .action-row > * { flex: 0 1 auto; }
.portal-content .message-form button { width: fit-content; min-width: 0; justify-self: end; }
.portal-content .dialog-entry { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-entry h2 { margin-bottom: 8px; }
.dialog-entry p { margin-bottom: 0; }
.portal-content .dialog-entry .button { flex-shrink: 0; align-self: center; }
/* Contact number: visible text and a native tap-to-call link. */
.contact-phone { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 44px; white-space: nowrap; }
.contact-phone span { font-size: 11px; font-weight: 400; }
.contact-phone strong { font-size: 16px; font-weight: 650; letter-spacing: .1px; }
.landing-top .header-phone { color: #fff; }
.landing-top .header-phone span { color: #b7c6dc; }
.contact-phone:hover strong { text-decoration: underline; }
.contact-phone:focus-visible, .help-phone:focus-visible { outline: 2px solid #5c9fff; outline-offset: 5px; border-radius: 3px; }
.footer-contact .contact-phone { color: #23559d; }
.footer-contact .contact-phone span { color: #526174; }
.footer-contact p { color: #617084; font-size: 11px; margin: 8px 0 0; }
.help-phone { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 650; }
@media (min-width: 761px) and (max-width: 1100px) {
  .landing-top .landing-header { gap: 16px; padding-inline: 22px; }
  .landing-top .landing-links { gap: 16px; }
  .landing-top .landing-header .brand small { font-size: 8px; }
  .landing-top .header-phone strong { font-size: 14px; }
  .landing-top .landing-header > .cabinet-link { font-size: 12px; padding-left: 0; }
}
@media (max-width: 760px) {
  .landing-top .header-phone { order: 4; flex: 1 0 100%; border-top: 1px solid rgb(255 255 255 / 12%); padding-top: 12px; }
}
.portal-content .application-delete-card { max-width: 820px; margin: 32px auto; }
.portal-content .application-delete-card .action-row { margin-top: 24px; }
.portal-content .button.danger { background: #a93545; border-color: #a93545; color: #fff; }
.portal-content .button.danger:hover { background: #8e2937; border-color: #8e2937; }
.problem h1 { font-size: clamp(24px, 4vw, 32px); }
.problem p { overflow-wrap: anywhere; }
.portal-content button.quiet {
  color: #526174; background: transparent; border-color: transparent; box-shadow: none;
}
.portal-content button.quiet:hover { color: #1b2535; background: #edf1f6; border-color: transparent; }
@media (max-width: 600px) {
  .portal-content .dialog-entry { flex-direction: column; align-items: flex-start; gap: 16px; }
  .portal-content .dialog-entry .button { align-self: flex-start; }
  .portal-content .application-delete-card { margin: 16px auto; }
}