:root {
    --primary: #123f35;
    --accent: #d1a95f;
    --surface: #f4f7f5;
    --primary-rgb: 18, 63, 53;
    --ink: #17241f;
    --muted: #68756f;
    --line: #dfe7e3;
    --line-strong: #cbd8d2;
    --white: #ffffff;
    --danger: #b84242;
    --danger-soft: #fff1f1;
    --warning: #9a6b18;
    --warning-soft: #fff8e8;
    --success: #237557;
    --success-soft: #edf8f3;
    --info: #356e8a;
    --info-soft: #eef7fb;
    --shadow-sm: 0 3px 14px rgba(17, 49, 41, .06);
    --shadow-md: 0 16px 42px rgba(17, 49, 41, .10);
    --shadow-lg: 0 30px 80px rgba(8, 30, 25, .18);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --sidebar: 276px;
    --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--surface); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg.icon { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; letter-spacing: -.025em; }
h1 { font-size: clamp(1.45rem, 2.2vw, 2rem); margin-bottom: 0; }
h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); margin-bottom: .55rem; }
h3 { font-size: 1.18rem; margin-bottom: .4rem; }
h4 { font-size: 1rem; margin-bottom: .3rem; }
p { color: var(--muted); }
code { padding: .18rem .42rem; border-radius: 6px; background: #edf1ef; color: #37534a; font-size: .8rem; }

.eyebrow { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .45rem; color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.72); }
.compact-list { margin: .5rem 0 0; padding-left: 1.2rem; }
.prose { color: #43524c; line-height: 1.75; }
.prose a { color: var(--primary); text-decoration: underline; }

/* Buttons */
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: 11px; padding: .65rem 1rem; font-weight: 750; font-size: .88rem; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition); white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button svg { width: 17px; height: 17px; }
.button-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(18,63,53,.16); }
.button-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 25px rgba(18,63,53,.22); }
.button-secondary { background: #fff; color: var(--primary); border-color: var(--line-strong); }
.button-secondary:hover { border-color: var(--primary); background: #f8fbfa; }
.button-light { background: #fff; color: var(--primary); }
.button-light:hover { box-shadow: 0 12px 26px rgba(0,0,0,.15); }
.button-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.button-ghost-light:hover { background: rgba(255,255,255,.16); }
.button-small { min-height: 34px; padding: .46rem .72rem; border-radius: 9px; font-size: .78rem; }
.button-large { min-height: 50px; padding: .82rem 1.25rem; font-size: .95rem; }
.button-compact { min-height: 38px; padding: .52rem .8rem; }
.button-full { width: 100%; }
.button-group { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.link-button, .text-link { border: 0; background: none; color: var(--primary); font-weight: 750; cursor: pointer; padding: 0; font-size: .82rem; }
.text-link:hover, .link-button:hover { text-decoration: underline; }
.icon-button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; color: #61716b; background: #fff; cursor: pointer; transition: all var(--transition); flex: 0 0 auto; }
.icon-button:hover { color: var(--primary); border-color: var(--primary); background: #f8fbfa; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button.danger:hover { color: var(--danger); border-color: #e5b8b8; background: var(--danger-soft); }
.icon-button.success:hover { color: var(--success); border-color: #b7ddce; background: var(--success-soft); }
.icon-link { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); border-radius: 10px; background: rgba(18,63,53,.06); }

/* Alerts */
.alert { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 1rem; background: #fff; color: #405049; box-shadow: var(--shadow-sm); }
.alert strong { display: block; margin-bottom: .15rem; }
.alert-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; flex: 0 0 auto; }
.alert-icon svg { width: 16px; height: 16px; }
.alert-success { border-color: #c6e4d7; background: var(--success-soft); color: #205f49; }
.alert-success .alert-icon { background: #d6eee4; color: var(--success); }
.alert-danger { border-color: #ecc6c6; background: var(--danger-soft); color: #873737; }
.alert-danger .alert-icon { background: #f8dada; color: var(--danger); }
.alert-warning { border-color: #ecd8aa; background: var(--warning-soft); color: #745017; }
.alert-warning .alert-icon { background: #f4e5bf; color: var(--warning); }
.alert-info { border-color: #c5dce8; background: var(--info-soft); color: #2e6078; }
.alert-info .alert-icon { background: #d8eaf3; color: var(--info); }
.alert-close { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: currentColor; opacity: .6; cursor: pointer; }
.alert-close svg { width: 16px; height: 16px; }
.inline-alert { margin-top: 1rem; margin-bottom: 0; box-shadow: none; }

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.field { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.field > span, .field-inline > span { color: #45564f; font-size: .78rem; font-weight: 760; }
.field small { color: #7a8882; font-size: .72rem; line-height: 1.35; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); padding: .69rem .78rem; outline: none; transition: border var(--transition), box-shadow var(--transition), background var(--transition); }
input, select { min-height: 43px; }
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18,63,53,.10); }
input:disabled { background: #f0f3f1; color: #8a9691; }
input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--primary); }
input[type="color"] { padding: 3px; width: 54px; min-height: 42px; }
.password-field, .generate-field, .copy-field { display: flex; align-items: stretch; position: relative; }
.password-field input, .generate-field input, .copy-field input { border-radius: 10px 0 0 10px; }
.password-field button, .copy-field button { width: 44px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 10px 10px 0; background: #f8faf9; color: #62716b; display: grid; place-items: center; cursor: pointer; }
.password-field button svg, .copy-field button svg { width: 18px; height: 18px; }
.generate-field button { padding: 0 .8rem; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 10px 10px 0; background: #f8faf9; color: var(--primary); font-weight: 750; font-size: .74rem; cursor: pointer; }
.form-section-title { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .1rem; }
.form-section-title > span { width: 34px; height: 34px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 10px; font-weight: 850; }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title small { color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.form-subcard, .nested-fields { padding: 1rem; background: #f7faf8; border: 1px solid var(--line); border-radius: 13px; }
.nested-fields { margin-top: .7rem; }
.nested-fields.is-collapsed { display: none; }
.switch-row { display: flex; align-items: center; gap: .75rem; cursor: pointer; padding: .7rem 0; }
.switch-row > input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 43px; height: 24px; border-radius: 99px; background: #c9d2ce; position: relative; flex: 0 0 auto; transition: background var(--transition); }
.switch::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; left: 3px; top: 3px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform var(--transition); }
.switch-row > input:checked + .switch { background: var(--primary); }
.switch-row > input:checked + .switch::after { transform: translateX(19px); }
.switch-row > span:last-child { display: flex; flex-direction: column; }
.switch-row strong { color: #33463f; font-size: .84rem; }
.switch-row small { color: var(--muted); font-size: .73rem; }
.switch-row.compact { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 11px; background: #fafcfb; }
.switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.inline-check { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .7rem; margin-top: .2rem; }
.inline-check input { width: auto; min-height: auto; }
.field-inline { display: flex; align-items: center; gap: .6rem; }
.field-inline select { min-width: 210px; }
.form-actions-right { display: flex; justify-content: flex-end; }
.file-drop { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.5rem; border: 2px dashed var(--line-strong); border-radius: 15px; background: #fafcfb; color: var(--muted); text-align: center; cursor: pointer; transition: all var(--transition); }
.file-drop:hover, .file-drop.dragover { border-color: var(--primary); background: rgba(18,63,53,.04); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--primary); background: rgba(18,63,53,.08); border-radius: 14px; }
.file-drop strong { color: var(--ink); }
.file-drop small { font-size: .74rem; }
.color-field > div { display: flex; gap: .5rem; }
.color-field > div input[type="text"] { min-width: 0; }

/* Authentication */
.auth-body { background: #eaf0ed; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(520px, 1.08fr); }
.auth-brand-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--primary) 0%, #082820 100%); color: #fff; padding: clamp(2rem, 5vw, 5rem); }
.auth-brand-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 24px 24px; opacity: .5; }
.auth-brand-inner { min-height: calc(100vh - clamp(4rem, 10vw, 10rem)); position: relative; z-index: 2; display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.brand img { width: 45px; height: 45px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.08); padding: 3px; }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--accent), #e3c783); color: #25362f; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.brand > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { margin-top: .18rem; font-size: .68rem; opacity: .65; letter-spacing: .08em; text-transform: uppercase; }
.brand-light { color: #fff; }
.auth-message { margin: auto 0; max-width: 560px; padding: 4rem 0 3rem; }
.auth-message h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.7rem); letter-spacing: -.06em; line-height: .98; margin-bottom: 1.5rem; }
.auth-message p { color: rgba(255,255,255,.72); max-width: 540px; font-size: 1.05rem; line-height: 1.7; }
.auth-benefits { display: grid; gap: .75rem; max-width: 560px; }
.auth-benefits > div { display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.055); backdrop-filter: blur(6px); }
.auth-benefits > div > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: rgba(255,255,255,.08); }
.auth-benefits p { margin: 0; display: flex; flex-direction: column; }
.auth-benefits strong { color: #fff; font-size: .82rem; }
.auth-benefits small { color: rgba(255,255,255,.58); font-size: .71rem; }
.auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .2; }
.auth-orb-one { width: 400px; height: 400px; right: -200px; top: 12%; background: var(--accent); }
.auth-orb-two { width: 260px; height: 260px; left: -130px; bottom: 8%; background: #5aa48d; }
.auth-content { display: flex; align-items: center; justify-content: center; padding: clamp(1.2rem, 4vw, 4rem); overflow-y: auto; }
.auth-content-inner { width: 100%; max-width: 720px; }
.auth-card { background: #fff; border: 1px solid rgba(18,63,53,.08); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }
.login-card { max-width: 520px; margin: 0 auto; }
.setup-card { max-width: 760px; }
.auth-card-head { margin-bottom: 1.5rem; }
.auth-card-head h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); }
.auth-card-head p { margin-bottom: 0; }
.auth-footer { text-align: center; font-size: .7rem; margin: 1rem 0 0; color: #87938e; }
.login-help { display: flex; align-items: center; gap: .7rem; margin-top: 1.25rem; padding: .9rem; border-radius: 12px; background: #f6f9f7; border: 1px solid var(--line); }
.login-help > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--primary); background: #e7efeb; border-radius: 9px; }
.login-help p { display: flex; flex-direction: column; margin: 0; }
.login-help strong { font-size: .8rem; color: var(--ink); }
.login-help small { font-size: .72rem; }
.login-help a { color: var(--primary); font-weight: 700; }
.auth-secondary-action { text-align: center; margin-top: 1rem; }
.requirement-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin: 1.25rem 0; }
.requirement-item { display: flex; align-items: center; gap: .7rem; padding: .78rem; border: 1px solid var(--line); border-radius: 11px; background: #fafcfb; }
.requirement-item > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.requirement-item > span svg { width: 16px; height: 16px; }
.requirement-item strong, .requirement-item small { display: block; }
.requirement-item strong { font-size: .77rem; }
.requirement-item small { color: var(--muted); font-size: .67rem; margin-top: .1rem; }
.requirement-item.ok > span { background: var(--success-soft); color: var(--success); }
.requirement-item.warning > span { background: var(--warning-soft); color: var(--warning); }
.requirement-item.error > span { background: var(--danger-soft); color: var(--danger); }
.security-note { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border: 1px solid #ceddd6; border-radius: 13px; background: #f3f8f5; }
.security-note > svg { color: var(--primary); margin-top: .12rem; }
.security-note strong { display: block; color: #29453a; font-size: .84rem; }
.security-note p { margin: .2rem 0 0; font-size: .75rem; }
.security-note.slim { margin-bottom: 1.2rem; }
.error-page { padding: 2rem; text-align: center; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.error-code { font-size: clamp(4rem, 12vw, 8rem); font-weight: 950; line-height: .9; color: rgba(18,63,53,.10); }

/* App shell */
.app-body { background: var(--surface); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar); z-index: 60; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--primary), #0a2d25); color: #fff; padding: 1.15rem .9rem; box-shadow: 8px 0 30px rgba(10,44,36,.08); }
.sidebar-head { padding: .35rem .45rem 1.2rem; display: flex; align-items: center; justify-content: space-between; }
.sidebar .brand { min-width: 0; }
.sidebar .brand img, .sidebar .brand-mark { width: 40px; height: 40px; }
.sidebar-close { display: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); color: #fff; }
.nav { display: flex; flex-direction: column; gap: .22rem; overflow-y: auto; padding: .2rem 0; scrollbar-width: thin; }
.nav-label { padding: .75rem .7rem .35rem; color: rgba(255,255,255,.4); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-label-spaced { margin-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.2rem; }
.nav-link { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .68rem .75rem; border-radius: 10px; color: rgba(255,255,255,.68); font-size: .82rem; font-weight: 650; transition: all var(--transition); }
.nav-link svg { width: 18px; height: 18px; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--accent); }
.nav-button { border: 0; background: transparent; cursor: pointer; text-align: left; }
.sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem .75rem; min-width: 0; }
.sidebar-user > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.sidebar-user strong { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user small { color: rgba(255,255,255,.46); font-size: .64rem; }
.main-column { grid-column: 2; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { height: 84px; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.2rem); background: rgba(244,247,245,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(203,216,210,.72); }
.topbar-left { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.topbar-left h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.35rem; }
.topbar-kicker { display: block; color: #7d8a85; font-size: .65rem; font-weight: 720; letter-spacing: .05em; margin-bottom: .15rem; }
.topbar-actions { display: flex; align-items: center; gap: .7rem; }
.topbar-profile { display: inline-flex; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg, var(--primary), #2d6e5c); color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: -.02em; box-shadow: 0 5px 14px rgba(18,63,53,.16); }
.avatar-small { width: 34px; height: 34px; border-radius: 10px; font-size: .67rem; }
.avatar-large { width: 54px; height: 54px; border-radius: 15px; font-size: .95rem; }
.avatar-xl { width: 72px; height: 72px; border-radius: 20px; font-size: 1.25rem; }
.mobile-menu { display: none; }
.main-content { width: min(100%, 1640px); margin: 0 auto; padding: clamp(1rem, 2.5vw, 2rem); flex: 1; }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1rem, 3vw, 2.2rem); color: #87938e; font-size: .68rem; border-top: 1px solid var(--line); }
.app-footer > span:last-child { display: flex; gap: 1rem; }
.app-footer a:hover { color: var(--primary); }
.sidebar-backdrop { display: none; }
.impersonation-bar { position: fixed; top: 0; left: 0; right: 0; min-height: 48px; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .45rem 1rem; background: #725313; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.impersonation-bar > span { display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.impersonation-bar form { margin: 0; }
.app-shell.has-impersonation .sidebar { top: 48px; }
.app-shell.has-impersonation .topbar { top: 48px; }
.app-shell.has-impersonation { padding-top: 48px; }

/* Cards and structural layouts */
.card { background: #fff; border: 1px solid rgba(203,216,210,.8); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.35rem); box-shadow: var(--shadow-sm); min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head h3 { margin-bottom: .18rem; }
.card-head p { margin: 0; font-size: .78rem; }
.card-span-2 { grid-column: span 2; }
.content-grid { display: grid; gap: 1rem; }
.dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); margin-top: 1rem; }
.client-overview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); margin-top: 1rem; }
.profile-grid { grid-template-columns: .75fr 1.25fr; }
.system-grid { grid-template-columns: .8fr 1.2fr; margin: 1rem 0; }
.backup-grid { grid-template-columns: 1.25fr .75fr; }
.section-card { margin-top: 1rem; scroll-margin-top: 105px; }
.section-head, .page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-intro > div:first-child, .section-head > div:first-child { max-width: 760px; }
.page-intro h2, .section-head h2 { margin-bottom: .35rem; }
.page-intro p, .section-head p { margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: .45rem; margin-bottom: .9rem; color: #87938e; font-size: .72rem; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb strong { color: #4b5b55; }

/* Heroes */
.hero { position: relative; overflow: hidden; min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: var(--radius-lg); margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary), #0b3027); color: #fff; box-shadow: var(--shadow-md); }
.hero::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -130px; top: -180px; background: radial-gradient(circle, rgba(209,169,95,.32), rgba(209,169,95,0) 68%); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(to right, transparent, #000); }
.hero > * { position: relative; z-index: 2; }
.hero h2 { color: #fff; max-width: 780px; }
.hero p { color: rgba(255,255,255,.72); max-width: 720px; margin-bottom: 0; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.hero-client { background: linear-gradient(135deg, #123f35 0%, #185444 60%, #0b3027 100%); }
.hero-progress { padding: 1rem; }
.progress-ring { --progress: 0; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--progress) * 1%), rgba(255,255,255,.13) 0); position: relative; }
.progress-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #17483c; }
.progress-ring span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.progress-ring strong { color: #fff; font-size: 1.35rem; }
.progress-ring small { color: rgba(255,255,255,.62); font-size: .65rem; }
.progress-ring.large { width: 150px; height: 150px; }
.progress-ring.large::before { background: #123f35; }

/* Stats */
.stat-grid { display: grid; gap: 1rem; margin: 1rem 0; }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stat-card { display: flex; align-items: center; gap: .9rem; min-height: 112px; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: all var(--transition); min-width: 0; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c5d4ce; }
.stat-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: rgba(18,63,53,.075); color: var(--primary); }
.stat-card > div { min-width: 0; display: flex; flex-direction: column; }
.stat-card small { color: #7b8883; font-size: .69rem; }
.stat-card strong { color: var(--ink); font-size: 1.65rem; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card span:last-child { color: #8a9691; font-size: .65rem; margin-top: .2rem; }
.stat-card-accent { background: linear-gradient(145deg, #fffdf8, #fff7e7); border-color: #ead8b5; }
.stat-card-accent .stat-icon { background: rgba(209,169,95,.18); color: #8b651e; }
.stat-card-warning { background: var(--warning-soft); border-color: #e7d19d; }
.stat-card-warning .stat-icon { background: #f1dfb6; color: var(--warning); }
.stat-money { font-size: clamp(.9rem, 1.5vw, 1.25rem) !important; }

/* Empty states */
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: #87938e; }
.empty-state > svg { width: 44px; height: 44px; color: #a8b4af; margin-bottom: .7rem; }
.empty-state h3, .empty-state h4 { margin-bottom: .35rem; }
.empty-state p { max-width: 520px; margin-bottom: .8rem; font-size: .78rem; }
.empty-state.compact { min-height: 150px; padding: 1rem; }
.empty-state.compact > svg { width: 34px; height: 34px; }
.empty-state.large { min-height: 360px; }

/* Filters */
.filter-card { padding: .8rem 1rem; margin-bottom: 1rem; }
.filter-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.search-field { flex: 1 1 300px; position: relative; }
.search-field svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #81908a; width: 17px; height: 17px; }
.search-field input { padding-left: 2.35rem; }
.filter-bar > select { width: auto; min-width: 170px; }

/* Badges */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: .26rem .52rem; border-radius: 99px; font-size: .62rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.badge-success { color: #1d674b; background: var(--success-soft); border: 1px solid #c8e6d9; }
.badge-info { color: #2f647d; background: var(--info-soft); border: 1px solid #cfe3ed; }
.badge-warning { color: #7d581b; background: var(--warning-soft); border: 1px solid #ead7a9; }
.badge-danger { color: #993c3c; background: var(--danger-soft); border: 1px solid #edcaca; }
.badge-muted { color: #6f7c77; background: #eef2f0; border: 1px solid #dbe3df; }
.badge-neutral { color: #56665f; background: #f4f6f5; border: 1px solid #dfe5e2; }

/* Dashboard lists */
.task-list, .due-list, .activity-list, .document-mini-list, .user-mini-list { display: flex; flex-direction: column; }
.task-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .7rem .2rem; border-bottom: 1px solid #edf1ef; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover strong { color: var(--primary); }
.task-check { width: 18px; height: 18px; border: 2px solid #b8c5bf; border-radius: 6px; }
.task-check.waiting { border-color: #d1a95f; background: #fff7e6; }
.task-main, .task-meta { display: flex; flex-direction: column; min-width: 0; }
.task-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.task-main small, .task-meta small { color: #89958f; font-size: .64rem; }
.task-meta { align-items: flex-end; gap: .25rem; }
.due-row { display: flex; align-items: center; gap: .7rem; padding: .65rem .2rem; border-bottom: 1px solid #edf1ef; }
.due-row:last-child { border-bottom: 0; }
.due-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.due-row strong { font-size: .76rem; }
.due-row small { color: #87938e; font-size: .64rem; }
.due-date { width: 42px; height: 47px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: #edf5f1; color: var(--primary); }
.due-date strong { font-size: 1rem; line-height: 1; }
.due-date small { color: inherit; text-transform: uppercase; }
.due-row.overdue .due-date { background: var(--danger-soft); color: var(--danger); }
.activity-row { position: relative; display: flex; gap: .65rem; padding: .55rem 0 .55rem .1rem; }
.activity-dot { width: 9px; height: 9px; margin-top: .35rem; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(209,169,95,.14); }
.activity-row > div { display: flex; flex-direction: column; }
.activity-row strong { font-size: .75rem; }
.activity-row small { font-size: .62rem; color: #87938e; }
.project-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.project-mini { padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; transition: all var(--transition); }
.project-mini:hover { border-color: #bdcec6; background: #fff; box-shadow: var(--shadow-sm); }
.project-mini > strong, .project-mini > small { display: block; }
.project-mini > strong { font-size: .82rem; margin-top: .6rem; }
.project-mini > small { color: #7f8d87; font-size: .65rem; }
.project-mini-head, .project-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.project-mini-head small, .project-mini-foot { color: #86938e; font-size: .6rem; }
.progress-line { height: 7px; overflow: hidden; border-radius: 99px; background: #e5ece8; margin: .7rem 0 .4rem; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #4b8d78); }
.document-mini-list a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .65rem 0; border-bottom: 1px solid #edf1ef; }
.document-mini-list a:last-child { border-bottom: 0; }
.document-mini-list a > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.document-mini-list strong { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-mini-list small { color: #87938e; font-size: .62rem; }
.document-mini-list svg { width: 16px; height: 16px; color: var(--primary); }
.file-type { min-width: 38px; height: 34px; display: grid; place-items: center; padding: 0 .35rem; border-radius: 8px; background: #eaf2ee; color: var(--primary); font-size: .56rem; font-weight: 900; letter-spacing: .04em; }
.file-type.large { min-width: 48px; height: 48px; border-radius: 12px; font-size: .64rem; }

/* Attention */
.attention-panel { display: grid; grid-template-columns: minmax(220px,.48fr) minmax(0,1.52fr); gap: 1rem; padding: 1rem; border-radius: var(--radius); background: linear-gradient(135deg, #8a641c, #6f4e12); color: #fff; box-shadow: var(--shadow-sm); }
.attention-head { display: flex; align-items: center; gap: .8rem; padding: .6rem; }
.attention-head > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.12); }
.attention-head h3 { color: #fff; margin: 0; }
.attention-head .eyebrow { color: rgba(255,255,255,.65); }
.attention-tasks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.attention-tasks a { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.07); }
.attention-tasks a > div { display: flex; flex-direction: column; min-width: 0; }
.attention-tasks strong { color: #fff; font-size: .77rem; }
.attention-tasks small { color: rgba(255,255,255,.6); font-size: .62rem; }

/* Projects / Client profile */
.client-project-list { display: flex; flex-direction: column; }
.client-project-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem .2rem; border-bottom: 1px solid #edf1ef; }
.client-project-row:last-child { border-bottom: 0; }
.project-status-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eef3f1; color: #66766f; }
.project-status-icon.success { background: var(--success-soft); color: var(--success); }
.project-status-icon.info { background: var(--info-soft); color: var(--info); }
.project-status-icon.warning { background: var(--warning-soft); color: var(--warning); }
.project-status-icon.danger { background: var(--danger-soft); color: var(--danger); }
.project-row-main { min-width: 0; }
.project-row-main > div:first-child { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.project-row-main strong { font-size: .82rem; }
.project-row-main > small { display: block; color: #7f8c87; font-size: .66rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-row-progress { display: flex; flex-direction: column; align-items: flex-end; }
.project-row-progress strong { color: var(--primary); }
.project-row-progress small { color: #8a9691; font-size: .62rem; }
.client-profile-hero, .project-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem,3vw,1.8rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.client-profile-main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.client-profile-main h2 { margin-bottom: .2rem; }
.client-profile-main p { margin: 0; }
.client-profile-main p a { color: var(--primary); font-weight: 650; }
.client-profile-label { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.client-profile-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.tabs { display: flex; align-items: center; gap: .3rem; overflow-x: auto; padding: .4rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem .75rem; border-radius: 9px; color: #71807a; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.tabs a svg { width: 16px; height: 16px; }
.tabs a:hover { color: var(--primary); background: #f4f8f6; }
.tabs a.active { color: #fff; background: var(--primary); box-shadow: 0 5px 12px rgba(18,63,53,.16); }
.detail-list { display: flex; flex-direction: column; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(100px,.7fr) minmax(0,1.3fr); gap: .7rem; padding: .68rem 0; border-bottom: 1px solid #edf1ef; }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: #81908a; font-size: .68rem; }
.detail-list dd { margin: 0; color: #344740; font-size: .75rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.detail-list dd a { color: var(--primary); }
.detail-list.compact > div { padding: .5rem 0; }
.internal-note { margin-top: 1rem; padding: .85rem; border-radius: 11px; background: #fff8e8; border: 1px solid #ebd9ab; }
.internal-note strong { font-size: .74rem; color: #745017; }
.internal-note p { margin: .25rem 0 0; font-size: .7rem; }
.user-mini-list > div { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid #edf1ef; }
.user-mini-list > div:last-child { border-bottom: 0; }
.user-mini-list > div > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.user-mini-list strong { font-size: .75rem; }
.user-mini-list small { color: #87938e; font-size: .62rem; }

.client-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.client-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-sm); transition: all var(--transition); min-width: 0; }
.client-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c5d4ce; }
.client-card-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: .8rem; }
.client-title { min-width: 0; }
.client-title h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .1rem; }
.client-title p { margin: 0; font-size: .7rem; }
.client-contact { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 0; color: #6f7d77; font-size: .7rem; border-bottom: 1px solid #edf1ef; }
.client-contact a { color: var(--primary); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.client-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; padding: .8rem 0; }
.client-metrics > div { padding: .55rem; border-radius: 9px; background: #f7faf8; }
.client-metrics > div.wide { grid-column: span 2; }
.client-metrics small, .client-metrics strong { display: block; }
.client-metrics small { color: #81908a; font-size: .61rem; }
.client-metrics strong { margin-top: .1rem; font-size: .86rem; }
.client-card-actions { display: flex; gap: .55rem; flex-wrap: wrap; }

.project-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.project-card-grid.wide { grid-template-columns: repeat(3, minmax(0,1fr)); }
.project-card { display: flex; flex-direction: column; min-height: 360px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: all var(--transition); min-width: 0; }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c4d3cc; }
.project-card.archived { opacity: .65; }
.project-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.project-card-top > div { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.project-code { color: #84918c; font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.project-card h3 { margin-top: 1rem; }
.project-card > p { font-size: .72rem; min-height: 60px; }
.project-client-link { display: inline-block; margin-top: .6rem; color: var(--primary); font-size: .68rem; font-weight: 750; }
.project-progress { margin-top: auto; }
.project-progress > div:first-child { display: flex; justify-content: space-between; color: #71807a; font-size: .66rem; }
.project-progress strong { color: var(--primary); }
.project-card-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin: .8rem 0; }
.project-card-details > div { padding: .55rem; background: #f7faf8; border-radius: 9px; min-width: 0; }
.project-card-details small, .project-card-details strong { display: block; }
.project-card-details small { color: #83908b; font-size: .56rem; }
.project-card-details strong { margin-top: .12rem; font-size: .69rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.project-detail-hero { background: linear-gradient(135deg, var(--primary), #0b3027); border: 0; color: #fff; box-shadow: var(--shadow-md); }
.project-detail-main { max-width: 900px; }
.project-detail-main h2 { color: #fff; margin-top: .65rem; }
.project-detail-main p { color: rgba(255,255,255,.72); }
.project-detail-label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.project-detail-label .project-code { color: rgba(255,255,255,.55); }
.project-hero-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: rgba(255,255,255,.65); font-size: .68rem; }
.project-hero-meta span, .project-hero-meta a { display: inline-flex; align-items: center; gap: .35rem; }
.project-hero-meta svg { width: 15px; height: 15px; }
.project-hero-meta a:hover { color: #fff; }
.project-detail-progress { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.next-step-banner { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border: 1px solid #ead8af; border-radius: var(--radius); background: linear-gradient(145deg, #fffdf8, #fff8ea); margin-bottom: 1rem; }
.next-step-banner > span { width: 42px; height: 42px; display: grid; place-items: center; color: #8a641c; background: #f4e5bf; border-radius: 11px; }
.next-step-banner strong { display: block; color: #57411a; font-size: .85rem; }
.anchor-nav { position: sticky; top: 94px; z-index: 25; display: flex; gap: .25rem; overflow-x: auto; padding: .4rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); scrollbar-width: none; }
.has-impersonation .anchor-nav { top: 142px; }
.anchor-nav a { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .65rem; border-radius: 8px; color: #71807a; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.anchor-nav a:hover { color: var(--primary); background: #f2f6f4; }
.anchor-nav a span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 99px; background: #eaf0ed; font-size: .55rem; }
.project-scope-card { margin-top: 1rem; }
.project-task-list { display: flex; flex-direction: column; }
.project-task { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: .8rem; padding: .9rem .2rem; border-bottom: 1px solid #edf1ef; }
.project-task:last-child { border-bottom: 0; }
.project-task.done { opacity: .62; }
.project-task.client-action { margin: .35rem 0; padding: .9rem; border: 1px solid #ead7aa; border-radius: 12px; background: var(--warning-soft); }
.task-state-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eef3f1; color: #6f7d77; }
.project-task.done .task-state-icon { color: var(--success); background: var(--success-soft); }
.task-content { min-width: 0; }
.task-title-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.task-title-row > strong { font-size: .82rem; }
.task-content p { margin: .35rem 0; font-size: .72rem; }
.task-footer { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; color: #86938e; font-size: .62rem; }
.task-actions { display: flex; align-items: center; gap: .35rem; }

/* Timeline */
.timeline { position: relative; display: flex; flex-direction: column; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: #e3eae6; }
.timeline-item { position: relative; display: grid; grid-template-columns: 16px minmax(0,1fr); gap: .8rem; padding: 0 0 1rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker { width: 16px; height: 16px; margin-top: .18rem; border-radius: 50%; background: #95a49e; box-shadow: 0 0 0 4px #fff; z-index: 1; }
.timeline-marker.success { background: var(--success); }
.timeline-marker.info { background: var(--info); }
.timeline-marker.warning { background: var(--warning); }
.timeline-marker.danger { background: var(--danger); }
.timeline-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: #87938e; font-size: .6rem; margin-bottom: .15rem; }
.timeline-item strong, .timeline-item h4 { font-size: .8rem; }
.timeline-item p { margin: .25rem 0 0; font-size: .7rem; }
.timeline-item.expanded { padding-bottom: 1.4rem; }
.timeline-content { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.timeline-content h4 { margin: .4rem 0; }
.timeline-actions { display: flex; align-items: center; gap: .55rem; margin-top: .8rem; }
.acknowledged { display: inline-flex; align-items: center; gap: .35rem; color: var(--success); font-size: .7rem; font-weight: 750; }
.acknowledged svg { width: 16px; height: 16px; }

/* Credentials */
.credential-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.credential-card { position: relative; display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 0; overflow: hidden; }
.credential-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.credential-card-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: .7rem; }
.credential-service-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: rgba(18,63,53,.08); }
.credential-card-head h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credential-meta-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin: .9rem 0; }
.credential-meta-grid > div { padding: .5rem; border-radius: 9px; background: #f7faf8; min-width: 0; }
.credential-meta-grid small, .credential-meta-grid strong { display: block; }
.credential-meta-grid small { color: #83908b; font-size: .56rem; }
.credential-meta-grid strong { margin-top: .1rem; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credential-public-note { font-size: .7rem; padding: .7rem; background: #f9fbfa; border: 1px solid #e7ece9; border-radius: 9px; }
.credential-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.credential-actions form { margin: 0; }
.visibility-note { margin: .8rem -1rem -1rem; padding: .42rem 1rem; font-size: .6rem; font-weight: 750; text-align: center; }
.visibility-note.visible { color: var(--success); background: var(--success-soft); }
.visibility-note.hidden { color: #75827d; background: #f0f3f1; }

/* Tables */
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.data-table th { padding: .65rem .7rem; border-bottom: 1px solid var(--line-strong); color: #77847f; font-size: .61rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.data-table td { padding: .72rem .7rem; border-bottom: 1px solid #edf1ef; color: #45564f; font-size: .7rem; vertical-align: middle; }
.data-table tbody tr:hover { background: #fafcfb; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-primary { display: flex; flex-direction: column; min-width: 140px; }
.table-primary strong { color: var(--ink); font-size: .73rem; }
.table-primary small, .table-subline { color: #87938e; font-size: .59rem; }
.table-subline { display: block; margin-top: .15rem; }
.table-link { color: var(--primary); font-weight: 750; }
.actions-col { width: 120px; text-align: right !important; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.table-actions .icon-button { width: 32px; height: 32px; border-radius: 8px; }
.table-actions .icon-button svg { width: 15px; height: 15px; }
.due-chip { display: inline-flex; padding: .27rem .48rem; border-radius: 7px; background: #f1f4f2; color: #607068; font-size: .63rem; white-space: nowrap; }
.due-chip.soon { background: var(--warning-soft); color: var(--warning); }
.due-chip.overdue { background: var(--danger-soft); color: var(--danger); }
.audit-table { min-width: 1050px; }
.context-chips { display: flex; gap: .3rem; flex-wrap: wrap; max-width: 360px; }
.context-chips span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .4rem; border-radius: 7px; background: #f1f4f2; font-size: .58rem; }
.context-chips small { color: #87938e; }

/* Documents */
.document-list { display: flex; flex-direction: column; }
.document-row { display: grid; grid-template-columns: auto minmax(200px,1fr) auto auto auto; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid #edf1ef; }
.document-row:last-child { border-bottom: 0; }
.document-main { min-width: 0; }
.document-main strong, .document-main small { display: block; }
.document-main strong { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-main small { color: #87938e; font-size: .62rem; }
.document-main p { margin: .25rem 0 0; font-size: .68rem; }
.document-meta { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; }
.document-meta strong { font-size: .7rem; }
.document-meta small { color: #87938e; font-size: .6rem; }
.visibility-pill { padding: .25rem .45rem; border-radius: 7px; font-size: .58rem; font-weight: 800; }
.visibility-pill.visible { color: var(--success); background: var(--success-soft); }
.visibility-pill.hidden { color: #6d7a75; background: #eef2f0; }
.document-actions { display: flex; align-items: center; gap: .35rem; }

/* Accounts */
.account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.account-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.account-card-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; }
.account-card-head h3 { margin-bottom: .1rem; }
.account-card-head a { color: var(--primary); font-size: .7rem; }
.account-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.account-actions form { margin: 0; }

/* Information cards */
.info-grid { display: grid; gap: 1rem; }
.info-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1rem; }
.info-grid.embedded { margin-top: 0; }
.info-card { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.info-card > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--primary); background: rgba(18,63,53,.075); }
.info-card strong { font-size: .78rem; }
.info-card p { margin: .2rem 0 0; font-size: .68rem; }

/* Settings and system */
.settings-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1rem; align-items: start; }
.settings-main { display: flex; flex-direction: column; gap: 1rem; }
.settings-section { padding: 1.3rem; }
.branding-editor { display: flex; flex-direction: column; gap: 1rem; }
.logo-preview { min-height: 100px; display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: #f8faf9; }
.logo-preview img { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; background: #fff; padding: 4px; border: 1px solid var(--line); }
.logo-preview > div:last-child { display: flex; flex-direction: column; }
.logo-preview strong { font-size: .82rem; }
.logo-preview small { color: var(--muted); font-size: .7rem; }
.large-mark { width: 72px; height: 72px; border-radius: 17px; font-size: 1.2rem; }
.sticky-card { position: sticky; top: 104px; display: flex; flex-direction: column; gap: .8rem; }
.sticky-card p { font-size: .75rem; }
.system-requirements { grid-template-columns: repeat(4,minmax(0,1fr)); }
.data-file-list { display: flex; flex-direction: column; }
.data-file-list > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .62rem 0; border-bottom: 1px solid #edf1ef; }
.data-file-list > div:last-child { border-bottom: 0; }
.data-file-list > div > span:nth-child(2) { display: flex; flex-direction: column; }
.data-file-list strong { font-size: .72rem; }
.data-file-list small { color: #87938e; font-size: .6rem; }
.backup-card { display: flex; flex-direction: column; align-items: flex-start; }
.backup-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; background: rgba(18,63,53,.08); color: var(--primary); margin-bottom: 1rem; }
.backup-icon svg { width: 28px; height: 28px; }
.danger-card { background: linear-gradient(145deg, #fff8f8, #fff); border-color: #edc9c9; }
.check-list { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.check-list li { display: flex; align-items: center; gap: .45rem; color: #5e6c66; font-size: .72rem; }
.check-list svg { width: 16px; height: 16px; color: var(--success); }
.backup-rhythm { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.backup-rhythm > div { padding: 1rem; border-radius: 12px; background: #f7faf8; }
.backup-rhythm strong { font-size: .78rem; }
.backup-rhythm p { margin: .25rem 0 0; font-size: .68rem; }
.profile-summary { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.profile-summary h3 { margin: .5rem 0 .1rem; }
.profile-summary p { margin: 0; font-size: .72rem; }

/* Modals */
dialog.modal { width: min(620px, calc(100vw - 2rem)); max-height: min(90vh, 900px); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.modal.modal-large { width: min(860px, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgba(7,26,21,.66); backdrop-filter: blur(4px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line); background: #fafcfb; }
.modal-head h2 { font-size: 1.45rem; margin-bottom: .25rem; }
.modal-head p { margin: 0; font-size: .72rem; }
.modal-body { padding: 1.25rem 1.3rem; max-height: calc(90vh - 165px); overflow-y: auto; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .9rem 1.3rem; border-top: 1px solid var(--line); background: #fafcfb; }
.modal-foot small { margin-right: auto; color: #84918c; font-size: .65rem; }
.modal-form { margin: 0; }
.loading-state { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: .7rem; color: #71807a; }
.spinner { width: 22px; height: 22px; border: 3px solid #dce5e1; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.revealed-credential { display: flex; flex-direction: column; gap: .9rem; }
.revealed-row { display: flex; flex-direction: column; gap: .3rem; }
.revealed-row > span { color: #75827d; font-size: .68rem; font-weight: 750; }
.revealed-textarea { min-height: 90px; white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; color: #344740; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.sensitive-flash { margin-bottom: 1rem; border: 1px solid #e5cd92; border-radius: var(--radius); overflow: hidden; background: #fffaf0; box-shadow: var(--shadow-sm); }
.sensitive-flash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; background: #fff5db; }
.sensitive-flash-head > div:first-child { display: flex; gap: .8rem; align-items: flex-start; }
.sensitive-flash-head > div:first-child > div { display: flex; flex-direction: column; }
.sensitive-flash-head strong { color: #6a4c14; font-size: .82rem; }
.sensitive-flash-head small { color: #8b6a2b; font-size: .68rem; }
.sensitive-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #7e5a18; background: #f2dfaf; }
.credential-once-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; padding: 1rem; }
.credential-once-grid label > span { display: block; margin-bottom: .3rem; color: #6e5a31; font-size: .65rem; font-weight: 750; }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { max-width: 320px; padding: .75rem .9rem; border-radius: 11px; background: #1f3d34; color: #fff; box-shadow: var(--shadow-md); font-size: .72rem; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Responsive */
@media (max-width: 1320px) {
    .stat-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .client-card-grid, .project-card-grid, .project-card-grid.wide, .credential-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .system-requirements { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1050px) {
    :root { --sidebar: 248px; }
    .auth-shell { grid-template-columns: .8fr 1.2fr; }
    .auth-brand-panel { padding: 2.2rem; }
    .auth-message h1 { font-size: 3rem; }
    .dashboard-grid, .client-overview-grid { grid-template-columns: 1fr; }
    .card-span-2 { grid-column: span 1; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-sidebar { order: -1; }
    .sticky-card { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .sticky-card .button { width: auto; }
    .document-row { grid-template-columns: auto minmax(180px,1fr) auto auto; }
    .document-meta { display: none; }
    .attention-panel { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .auth-shell { display: block; }
    .auth-brand-panel { min-height: 300px; padding: 1.5rem; }
    .auth-brand-inner { min-height: auto; }
    .auth-message { margin: 2.5rem 0 0; padding: 0; }
    .auth-message h1 { font-size: 2.5rem; }
    .auth-message p { font-size: .9rem; }
    .auth-benefits { display: none; }
    .auth-content { padding: 1rem; margin-top: -2rem; position: relative; z-index: 3; }
    .app-shell { display: block; }
    .sidebar { transform: translateX(-102%); transition: transform .24s ease; width: min(300px, 86vw); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-close { display: inline-flex; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(7,26,21,.5); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .main-column { grid-column: auto; }
    .mobile-menu { display: inline-flex; }
    .topbar-actions .button { display: none; }
    .main-content { padding: 1rem; }
    .app-footer { padding: 1rem; }
    .profile-grid, .system-grid, .backup-grid { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: 1fr; }
    .info-grid.three, .backup-rhythm { grid-template-columns: 1fr; }
    .project-detail-hero { align-items: flex-start; }
    .project-detail-progress .progress-ring { width: 115px; height: 115px; }
    .anchor-nav { top: 84px; }
    .has-impersonation .anchor-nav { top: 132px; }
    .impersonation-bar { justify-content: space-between; }
}

@media (max-width: 680px) {
    body { font-size: 14px; }
    .topbar { height: 72px; padding: 0 .8rem; }
    .topbar-left h1 { font-size: 1.05rem; }
    .topbar-kicker { display: none; }
    .topbar-profile .avatar { width: 36px; height: 36px; }
    .main-content { padding: .75rem; }
    .app-footer { flex-direction: column; align-items: center; text-align: center; }
    .page-intro, .section-head { align-items: flex-start; flex-direction: column; }
    .page-intro .button, .section-head > .button { width: 100%; }
    .button-group { width: 100%; }
    .button-group .button { flex: 1; }
    .hero { min-height: auto; align-items: flex-start; flex-direction: column; padding: 1.3rem; }
    .hero h2 { font-size: 1.7rem; }
    .hero-actions { width: 100%; justify-content: flex-start; }
    .hero-actions .button { flex: 1; }
    .hero-progress { align-self: center; }
    .stat-grid.four, .stat-grid.three { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .stat-card { min-height: 98px; padding: .75rem; gap: .6rem; }
    .stat-icon { width: 38px; height: 38px; border-radius: 10px; }
    .stat-card strong { font-size: 1.25rem; }
    .stat-money { font-size: .8rem !important; white-space: normal !important; }
    .card { padding: .9rem; border-radius: 14px; }
    .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
    .field-span-2, .field-span-3 { grid-column: span 1; }
    .switch-grid { grid-template-columns: 1fr; }
    .requirement-grid, .system-requirements { grid-template-columns: 1fr; }
    .client-card-grid, .project-card-grid, .project-card-grid.wide, .credential-grid { grid-template-columns: 1fr; }
    .project-mini-grid { grid-template-columns: 1fr; }
    .attention-tasks { grid-template-columns: 1fr; }
    .client-profile-hero, .project-detail-hero { align-items: flex-start; flex-direction: column; }
    .client-profile-main { align-items: flex-start; }
    .client-profile-actions { width: 100%; }
    .client-profile-actions .button, .client-profile-actions form { flex: 1; }
    .client-profile-actions form .button { width: 100%; }
    .project-detail-progress { width: 100%; flex-direction: row; justify-content: space-between; }
    .project-detail-progress .progress-ring { width: 98px; height: 98px; }
    .project-detail-progress .button { align-self: flex-end; }
    .client-project-row { grid-template-columns: auto minmax(0,1fr); }
    .project-row-progress { display: none; }
    .project-card-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .project-card-details > div:last-child { grid-column: span 2; }
    .project-task { grid-template-columns: auto minmax(0,1fr); }
    .task-actions { grid-column: 2; justify-content: flex-start; }
    .credential-meta-grid { grid-template-columns: 1fr 1fr; }
    .document-row { grid-template-columns: auto minmax(0,1fr) auto; }
    .document-row .visibility-pill { display: none; }
    .document-actions { grid-column: 2 / 4; justify-content: flex-end; }
    .account-card-head { grid-template-columns: auto minmax(0,1fr); }
    .account-card-head > .badge { grid-column: 2; justify-self: start; }
    .filter-bar { align-items: stretch; }
    .filter-bar > * { width: 100% !important; }
    .field-inline { flex-direction: column; align-items: stretch; gap: .25rem; }
    .field-inline select { min-width: 0; }
    .modal-head { padding: 1rem; }
    .modal-body { padding: 1rem; }
    .modal-foot { padding: .8rem 1rem; flex-wrap: wrap; }
    .modal-foot .button { flex: 1; }
    .credential-once-grid { grid-template-columns: 1fr; }
    .auth-content { padding: .7rem; }
    .auth-card { padding: 1.2rem; border-radius: 18px; }
    .auth-brand-panel { min-height: 235px; }
    .auth-brand-inner { min-height: auto; }
    .auth-message { margin-top: 2rem; }
    .auth-message h1 { font-size: 2rem; }
    .security-note { padding: .8rem; }
    .impersonation-bar { align-items: stretch; flex-direction: column; gap: .35rem; padding: .45rem .7rem; }
    .impersonation-bar .button { width: 100%; }
    .app-shell.has-impersonation { padding-top: 84px; }
    .app-shell.has-impersonation .sidebar { top: 84px; }
    .app-shell.has-impersonation .topbar { top: 84px; }
    .has-impersonation .anchor-nav { top: 156px; }
}

@media (max-width: 440px) {
    .stat-grid.four, .stat-grid.three { grid-template-columns: 1fr; }
    .stat-card { min-height: 88px; }
    .project-detail-progress { align-items: center; }
    .project-detail-progress .button { font-size: .68rem; }
    .project-hero-meta { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .credential-meta-grid { grid-template-columns: 1fr; }
    .project-card-actions .button, .project-card-actions form { flex: 1; }
    .project-card-actions form .button { width: 100%; }
}

@media print {
    .sidebar, .topbar, .app-footer, .button, .icon-button, .tabs, .anchor-nav, .impersonation-bar, .sidebar-backdrop { display: none !important; }
    .app-shell, .main-column { display: block; }
    .main-content { width: 100%; padding: 0; }
    .card, .stat-card, .hero, .client-profile-hero, .project-detail-hero { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}

/* Secure credential reveal */
.credential-modal { width: min(720px, calc(100vw - 2rem)) !important; }
.credential-secret-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #e4ebe8; border-radius: 13px; background: #f8faf9; }
.credential-secret-intro strong { color: var(--ink); font-size: .85rem; }
.credential-secret-intro small { color: var(--muted); text-align: right; font-size: .68rem; }
.credential-secret-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.credential-secret-field { min-width: 0; }
.credential-secret-field > span { display: block; margin-bottom: .34rem; color: #5d6d66; font-size: .68rem; font-weight: 750; }
.credential-secret-field.field-span-2 { grid-column: span 2; }
.credential-secret-field .copy-field input,
.credential-secret-field .copy-field textarea { min-width: 0; width: 100%; border-radius: 10px 0 0 10px; background: #fbfcfc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.credential-secret-field .copy-field textarea { min-height: 92px; padding: .75rem; resize: vertical; border: 1px solid var(--line-strong); }
.credential-secret-field .copy-field button { flex: 0 0 44px; border-radius: 0; font-weight: 800; }
.credential-secret-field .copy-field button:last-child { border-radius: 0 10px 10px 0; }
.credential-secret-note { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 11px 11px 0; background: #fffcf5; }
.credential-secret-note strong { display: block; margin-bottom: .2rem; color: var(--ink); font-size: .72rem; }
.credential-secret-note p { margin: 0; color: var(--muted); white-space: pre-wrap; font-size: .74rem; line-height: 1.55; }
.muted { color: var(--muted); }
button:disabled, .button:disabled { opacity: .58; cursor: wait; }

@media (max-width: 620px) {
    .credential-secret-grid { grid-template-columns: 1fr; }
    .credential-secret-field.field-span-2 { grid-column: span 1; }
    .credential-secret-intro { flex-direction: column; }
    .credential-secret-intro small { text-align: left; }
}

/* ==========================================================================
   Compact Premium UI Standard — v1.1.0
   Kleine Überschriften, kurze Wege und eine ruhige Informationsdichte.
   Dieser zentrale Block gilt automatisch für alle bestehenden und neuen Seiten.
   ========================================================================== */
/*
 * Bewusst kleinere Typografie und engere Abstände für eine ruhige,
 * informationsdichte Premium-Oberfläche – ohne die Lesbarkeit zu verlieren.
 */
:root {
    --radius-sm: 8px;
    --radius: 13px;
    --radius-lg: 18px;
    --sidebar: 248px;
}

body {
    font-size: 14px;
    line-height: 1.48;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.22;
    letter-spacing: -.018em;
}

h1 {
    font-size: 1.05rem;
    margin-bottom: 0;
}

h2 {
    font-size: clamp(1.12rem, 1.45vw, 1.38rem);
    margin-bottom: .28rem;
}

h3 {
    font-size: .96rem;
    margin-bottom: .22rem;
}

h4 {
    font-size: .84rem;
    margin-bottom: .18rem;
}

h5 {
    font-size: .78rem;
    margin-bottom: .16rem;
}

h6 {
    font-size: .72rem;
    margin-bottom: .14rem;
}

p {
    margin-bottom: .62rem;
}

.eyebrow {
    gap: .28rem;
    margin-bottom: .27rem;
    font-size: .60rem;
    letter-spacing: .115em;
}

.prose {
    line-height: 1.62;
}

/* Kompakte Bedienelemente */
.button {
    min-height: 36px;
    gap: .4rem;
    padding: .49rem .78rem;
    border-radius: 9px;
    font-size: .80rem;
}

.button svg {
    width: 15px;
    height: 15px;
}

.button-small {
    min-height: 30px;
    padding: .36rem .58rem;
    border-radius: 8px;
    font-size: .71rem;
}

.button-large {
    min-height: 42px;
    padding: .62rem .95rem;
    font-size: .84rem;
}

.button-compact {
    min-height: 33px;
    padding: .4rem .64rem;
}

.button-group,
.topbar-actions,
.client-profile-actions,
.project-card-actions,
.account-actions,
.credential-actions {
    gap: .45rem;
}

.icon-button,
.icon-link {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.icon-button svg,
.icon-link svg {
    width: 16px;
    height: 16px;
}

.alert {
    gap: .62rem;
    padding: .68rem .78rem;
    margin-bottom: .72rem;
    border-radius: 10px;
}

.alert-icon {
    width: 25px;
    height: 25px;
}

/* Kompakte Formulare */
.form-stack,
.form-grid {
    gap: .72rem;
}

.field {
    gap: .27rem;
}

.field > span,
.field-inline > span {
    font-size: .72rem;
}

.field small {
    font-size: .66rem;
}

input,
select,
textarea {
    padding: .54rem .65rem;
    border-radius: 9px;
}

input,
select {
    min-height: 39px;
}

textarea {
    min-height: 68px;
}

input[type="color"] {
    min-height: 38px;
}

.form-section-title {
    gap: .58rem;
    margin: .7rem 0 .05rem;
}

.form-section-title > span {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    font-size: .75rem;
}

.form-section-title small {
    font-size: .68rem;
}

.form-subcard,
.nested-fields {
    padding: .75rem;
    border-radius: 10px;
}

.switch-row {
    gap: .58rem;
    padding: .5rem 0;
}

.switch-row.compact {
    padding: .42rem .58rem;
}

.switch-row strong {
    font-size: .76rem;
}

.switch-row small {
    font-size: .66rem;
}

.switch-grid {
    gap: .55rem;
}

.file-drop {
    min-height: 130px;
    gap: .32rem;
    padding: 1rem;
    border-radius: 12px;
}

.file-drop > span {
    width: 39px;
    height: 39px;
    border-radius: 10px;
}

/* Anmeldung und Einrichtung */
.auth-shell {
    grid-template-columns: minmax(360px, .86fr) minmax(500px, 1.14fr);
}

.auth-brand-panel {
    padding: clamp(1.5rem, 3vw, 3rem);
}

.auth-brand-inner {
    min-height: calc(100vh - clamp(3rem, 6vw, 6rem));
}

.brand {
    gap: .58rem;
}

.brand img,
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.brand strong {
    font-size: .84rem;
}

.brand small {
    margin-top: .1rem;
    font-size: .58rem;
}

.auth-message {
    max-width: 520px;
    padding: 2.25rem 0 1.5rem;
}

.auth-message h1 {
    max-width: 510px;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.04;
    letter-spacing: -.045em;
    margin-bottom: .78rem;
}

.auth-message p {
    max-width: 500px;
    font-size: .88rem;
    line-height: 1.56;
    margin-bottom: .72rem;
}

.auth-benefits {
    gap: .5rem;
}

.auth-benefits > div {
    gap: .62rem;
    padding: .58rem .65rem;
    border-radius: 10px;
}

.auth-benefits > div > span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.auth-benefits strong {
    font-size: .75rem;
}

.auth-benefits small {
    font-size: .64rem;
}

.auth-content {
    padding: clamp(1rem, 2.5vw, 2.25rem);
}

.auth-card {
    padding: clamp(1.05rem, 2.3vw, 1.55rem);
    border-radius: 18px;
}

.auth-card-head {
    margin-bottom: .9rem;
}

.auth-card-head h2 {
    font-size: clamp(1.13rem, 1.8vw, 1.36rem);
}

.auth-footer,
.auth-secondary-action {
    margin-top: .72rem;
}

.login-help {
    gap: .55rem;
    margin-top: .82rem;
    padding: .66rem;
    border-radius: 10px;
}

.login-help > span {
    width: 31px;
    height: 31px;
}

.login-help strong {
    font-size: .73rem;
}

.login-help small {
    font-size: .66rem;
}

.requirement-grid {
    gap: .5rem;
    margin: .82rem 0;
}

.requirement-item {
    gap: .55rem;
    padding: .58rem;
    border-radius: 9px;
}

.requirement-item > span {
    width: 27px;
    height: 27px;
}

.security-note {
    gap: .62rem;
    padding: .72rem;
    border-radius: 10px;
}

.security-note strong {
    font-size: .76rem;
}

.security-note p {
    font-size: .68rem;
}

.security-note.slim {
    margin-bottom: .8rem;
}

.error-page {
    padding: 1.25rem;
}

.error-code {
    font-size: clamp(3rem, 9vw, 5.5rem);
}

/* Navigation und Grundlayout */
.sidebar {
    padding: .78rem .62rem;
}

.sidebar-head {
    padding: .2rem .32rem .72rem;
}

.sidebar .brand img,
.sidebar .brand-mark {
    width: 34px;
    height: 34px;
}

.sidebar .brand strong {
    font-size: .78rem;
}

.sidebar .brand small {
    font-size: .53rem;
}

.nav {
    gap: .14rem;
}

.nav-label {
    padding: .55rem .58rem .23rem;
    font-size: .55rem;
}

.nav-label-spaced {
    margin-top: .48rem;
    padding-top: .78rem;
}

.nav-link {
    gap: .58rem;
    padding: .51rem .61rem;
    border-radius: 8px;
    font-size: .75rem;
}

.nav-link svg {
    width: 16px;
    height: 16px;
}

.sidebar-footer {
    padding-top: .68rem;
}

.sidebar-user {
    gap: .5rem;
    padding: .38rem .5rem .55rem;
}

.sidebar-user strong {
    font-size: .7rem;
}

.sidebar-user small {
    font-size: .57rem;
}

.topbar {
    height: 64px;
    gap: .7rem;
    padding: 0 clamp(.75rem, 2vw, 1.35rem);
}

.topbar-left {
    gap: .58rem;
}

.topbar-left h1 {
    font-size: 1rem;
}

.topbar-kicker {
    margin-bottom: .08rem;
    font-size: .57rem;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: .67rem;
}

.avatar-small {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.avatar-large {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: .82rem;
}

.avatar-xl {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    font-size: 1.03rem;
}

.main-content {
    padding: clamp(.75rem, 1.5vw, 1.2rem);
}

.app-footer {
    padding: .72rem clamp(.75rem, 2vw, 1.35rem);
    font-size: .62rem;
}

/* Karten, Bereiche und Übersichten */
.card {
    padding: clamp(.74rem, 1.2vw, .95rem);
}

.card-head {
    gap: .65rem;
    margin-bottom: .64rem;
}

.card-head p {
    font-size: .71rem;
}

.content-grid,
.client-card-grid,
.project-card-grid,
.project-card-grid.wide,
.credential-grid,
.account-grid,
.info-grid,
.settings-layout,
.settings-main,
.backup-rhythm {
    gap: .72rem;
}

.dashboard-grid,
.client-overview-grid,
.system-grid {
    margin-top: .72rem;
}

.section-card {
    margin-top: .72rem;
    scroll-margin-top: 80px;
}

.section-head,
.page-intro {
    gap: .72rem;
    margin-bottom: .7rem;
}

.page-intro h2,
.section-head h2 {
    margin-bottom: .2rem;
}

.page-intro p,
.section-head p {
    font-size: .78rem;
    line-height: 1.48;
}

.breadcrumb {
    gap: .35rem;
    margin-bottom: .52rem;
    font-size: .65rem;
}

/* Startbereiche bewusst flacher */
.hero {
    min-height: 148px;
    gap: 1.15rem;
    padding: clamp(1rem, 2.1vw, 1.35rem);
    margin-bottom: .72rem;
}

.hero h2,
.project-detail-main h2,
.client-profile-main h2 {
    font-size: clamp(1.16rem, 1.55vw, 1.42rem);
}

.hero p,
.project-detail-main p,
.client-profile-main p {
    font-size: .78rem;
    line-height: 1.48;
}

.hero-actions {
    gap: .48rem;
}

.hero-progress {
    padding: .55rem;
}

.progress-ring {
    width: 104px;
    height: 104px;
}

.progress-ring::before {
    inset: 7px;
}

.progress-ring strong {
    font-size: 1.08rem;
}

.progress-ring small {
    font-size: .57rem;
}

.progress-ring.large {
    width: 118px;
    height: 118px;
}

/* Kennzahlen */
.stat-grid {
    gap: .7rem;
    margin: .72rem 0;
}

.stat-card {
    min-height: 82px;
    gap: .65rem;
    padding: .66rem .72rem;
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.stat-icon svg {
    width: 17px;
    height: 17px;
}

.stat-card small {
    font-size: .62rem;
}

.stat-card strong {
    font-size: 1.22rem;
}

.stat-card span:last-child {
    font-size: .59rem;
    margin-top: .1rem;
}

.stat-money {
    font-size: clamp(.82rem, 1.15vw, 1.02rem) !important;
}

/* Leerzustände und Filter */
.empty-state {
    min-height: 150px;
    padding: 1.15rem;
}

.empty-state > svg {
    width: 34px;
    height: 34px;
    margin-bottom: .48rem;
}

.empty-state p {
    margin-bottom: .58rem;
    font-size: .71rem;
}

.empty-state.compact {
    min-height: 105px;
    padding: .72rem;
}

.empty-state.compact > svg {
    width: 27px;
    height: 27px;
}

.empty-state.large {
    min-height: 230px;
}

.filter-card {
    padding: .62rem .72rem;
    margin-bottom: .72rem;
}

.filter-bar {
    gap: .5rem;
}

.search-field input {
    padding-left: 2.1rem;
}

/* Aufgaben, Aktivitäten und Fälligkeiten */
.task-row,
.due-row,
.client-project-row,
.document-mini-list a,
.user-mini-list > div {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.task-row,
.due-row,
.client-project-row,
.activity-row,
.document-mini-list a,
.user-mini-list > div {
    gap: .52rem;
}

.task-check {
    width: 16px;
    height: 16px;
    border-radius: 5px;
}

.due-date {
    width: 36px;
    height: 40px;
    border-radius: 8px;
}

.due-date strong {
    font-size: .87rem;
}

.activity-row {
    padding-top: .42rem;
    padding-bottom: .42rem;
}

.project-mini {
    padding: .65rem;
    border-radius: 10px;
}

.project-mini > strong {
    margin-top: .42rem;
    font-size: .76rem;
}

.progress-line {
    height: 6px;
    margin: .5rem 0 .3rem;
}

.file-type {
    min-width: 34px;
    height: 30px;
}

.file-type.large {
    min-width: 41px;
    height: 41px;
    border-radius: 10px;
}

/* Kunden- und Projektbereiche */
.attention-panel {
    gap: .7rem;
    padding: .72rem;
}

.attention-head {
    gap: .62rem;
    padding: .42rem;
}

.attention-head > span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.attention-tasks {
    gap: .48rem;
}

.attention-tasks a {
    gap: .52rem;
    padding: .58rem;
    border-radius: 9px;
}

.client-profile-hero,
.project-detail-hero {
    gap: .75rem;
    padding: clamp(.82rem, 1.7vw, 1.05rem);
    margin-bottom: .72rem;
}

.client-profile-main {
    gap: .72rem;
}

.tabs {
    gap: .2rem;
    padding: .28rem;
    margin-bottom: .72rem;
    border-radius: 10px;
}

.tabs a {
    gap: .34rem;
    padding: .46rem .58rem;
    border-radius: 7px;
    font-size: .68rem;
}

.tabs a svg {
    width: 14px;
    height: 14px;
}

.detail-list > div {
    gap: .55rem;
    padding: .5rem 0;
}

.internal-note {
    margin-top: .7rem;
    padding: .65rem;
}

.client-card,
.project-card,
.credential-card,
.account-card,
.info-card {
    padding: .76rem;
}

.client-card-top,
.account-card-head,
.credential-card-head {
    gap: .58rem;
}

.client-contact,
.client-metrics {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.client-metrics {
    gap: .42rem;
}

.client-metrics > div,
.project-card-details > div,
.credential-meta-grid > div {
    padding: .43rem;
    border-radius: 8px;
}

.project-card {
    min-height: 286px;
}

.project-card h3 {
    margin-top: .62rem;
}

.project-card > p {
    min-height: 42px;
    font-size: .68rem;
}

.project-card-details {
    gap: .4rem;
    margin: .58rem 0;
}

.project-hero-meta {
    gap: .65rem;
    font-size: .62rem;
}

.project-detail-progress {
    gap: .55rem;
}

.anchor-nav {
    top: 74px;
    gap: .18rem;
    padding: .28rem;
    margin-bottom: .72rem;
    border-radius: 10px;
}

.has-impersonation .anchor-nav {
    top: 122px;
}

.anchor-nav a {
    gap: .28rem;
    padding: .4rem .5rem;
    border-radius: 7px;
    font-size: .64rem;
}

.anchor-nav a span {
    min-width: 16px;
    height: 16px;
}

.project-task {
    gap: .62rem;
    padding: .67rem .14rem;
}

.project-task.client-action {
    margin: .24rem 0;
    padding: .68rem;
    border-radius: 10px;
}

.timeline-item {
    gap: .62rem;
    padding-bottom: .72rem;
}

.timeline-item.expanded {
    padding-bottom: .9rem;
}

.timeline-content {
    padding: .62rem .72rem;
    border-radius: 10px;
}

.timeline-content h4 {
    margin: .25rem 0;
}

.timeline-actions {
    gap: .4rem;
    margin-top: .55rem;
}

.credential-meta-grid {
    gap: .38rem;
    margin: .62rem 0;
}

.credential-public-note {
    padding: .55rem;
}

.document-row {
    gap: .62rem;
    padding: .58rem 0;
}

.account-actions {
    margin-top: .58rem;
}

.info-card {
    gap: .62rem;
}

.info-card > span {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.info-grid.three {
    margin-top: .72rem;
}

/* Einstellungen und Sicherung */
.settings-layout {
    grid-template-columns: minmax(0,1fr) 270px;
}

.settings-section {
    padding: .9rem;
}

.branding-editor {
    gap: .72rem;
}

.logo-preview {
    min-height: 78px;
    gap: .72rem;
    padding: .72rem;
    border-radius: 10px;
}

.logo-preview img,
.large-mark {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.sticky-card {
    top: 80px;
    gap: .58rem;
}

.backup-icon {
    width: 48px;
    height: 48px;
    margin-bottom: .7rem;
    border-radius: 13px;
}

.backup-icon svg {
    width: 23px;
    height: 23px;
}

.check-list {
    margin-top: .65rem;
    gap: .42rem;
}

.backup-rhythm > div {
    padding: .72rem;
    border-radius: 10px;
}

.profile-summary {
    gap: .72rem;
    padding-bottom: .72rem;
}

.profile-summary h3 {
    margin-top: .3rem;
}

/* Dialogfenster */
dialog.modal {
    border-radius: 16px;
}

.modal-head {
    gap: .72rem;
    padding: .82rem .92rem;
}

.modal-head h2 {
    font-size: 1.12rem;
    margin-bottom: .16rem;
}

.modal-head p {
    font-size: .67rem;
}

.modal-body {
    padding: .9rem .92rem;
    max-height: calc(90vh - 132px);
}

.modal-foot {
    gap: .45rem;
    padding: .66rem .92rem;
}

.revealed-credential,
.credential-secret-grid {
    gap: .68rem;
}

.sensitive-flash {
    margin-bottom: .72rem;
}

.sensitive-flash-head,
.credential-once-grid {
    padding: .72rem;
}

.credential-secret-intro {
    gap: .72rem;
    margin-bottom: .72rem;
    padding: .65rem .72rem;
    border-radius: 10px;
}

.credential-secret-note {
    margin-top: .72rem;
    padding: .68rem .72rem;
}

/* Mobile bleibt kompakt, aber gut bedienbar */
@media (max-width: 1050px) {
    :root {
        --sidebar: 230px;
    }

    .auth-message h1 {
        font-size: 1.95rem;
    }
}

@media (max-width: 860px) {
    .auth-brand-panel {
        min-height: 225px;
        padding: 1.2rem;
    }

    .auth-brand-inner {
        min-height: auto;
    }

    .auth-message {
        margin: 1.4rem 0 0;
        padding: 0;
    }

    .auth-message h1 {
        font-size: 1.65rem;
        margin-bottom: .5rem;
    }

    .auth-message p {
        font-size: .8rem;
    }

    .auth-content {
        padding: .78rem;
        margin-top: -1.4rem;
    }

    .auth-card {
        padding: 1rem;
    }

    .main-content {
        padding: .72rem;
    }

    .anchor-nav {
        top: 72px;
    }

    .has-impersonation .anchor-nav {
        top: 120px;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 13.5px;
    }

    h2 {
        font-size: 1.13rem;
    }

    h3 {
        font-size: .91rem;
    }

    h4 {
        font-size: .81rem;
    }

    .topbar {
        height: 60px;
        padding: 0 .65rem;
    }

    .topbar-left h1 {
        font-size: .9rem;
    }

    .main-content {
        padding: .58rem;
    }

    .card {
        padding: .7rem;
        border-radius: 12px;
    }

    .page-intro,
    .section-head {
        margin-bottom: .58rem;
    }

    .hero {
        gap: .72rem;
        padding: .82rem;
    }

    .hero h2,
    .project-detail-main h2,
    .client-profile-main h2 {
        font-size: 1.15rem;
    }

    .stat-grid.four,
    .stat-grid.three {
        gap: .5rem;
    }

    .stat-card {
        min-height: 76px;
        padding: .58rem;
    }

    .stat-card strong {
        font-size: 1.08rem;
    }

    .modal-head,
    .modal-body,
    .modal-foot {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .modal-head h2 {
        font-size: 1.02rem;
    }

    .auth-card {
        padding: .9rem;
        border-radius: 15px;
    }

    .auth-message h1 {
        font-size: 1.45rem;
    }

    .anchor-nav {
        top: 66px;
    }

    .has-impersonation .anchor-nav {
        top: 150px;
    }
}

@media (max-width: 440px) {
    h2 {
        font-size: 1.08rem;
    }

    .button {
        min-height: 35px;
        font-size: .76rem;
    }

    .auth-message h1 {
        font-size: 1.38rem;
    }
}


/* v1.2.0 SharePoint / Excel workspace */
.stat-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.compact-hero,
.workspace-hero { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.05rem 1.1rem; border-radius: 1.15rem; background: linear-gradient(135deg, var(--primary), #1d5b4d); color: #fff; box-shadow: var(--shadow-soft); margin-bottom: 1rem; }
.workspace-hero h2 { margin: .12rem 0 .34rem; font-size: clamp(1.2rem, 2.3vw, 1.75rem); line-height: 1.08; }
.workspace-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.55; }
.workspace-hero-aside { min-width: 150px; padding: .9rem; border-radius: .95rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); text-align: center; }
.workspace-hero-aside .icon { width: 1.25rem; height: 1.25rem; fill: #fff; opacity: .9; }
.workspace-hero-aside strong { display: block; margin-top: .25rem; font-size: 1.8rem; line-height: 1; }
.workspace-hero-aside small { display: block; margin-top: .25rem; color: rgba(255,255,255,.76); font-size: .74rem; }
.compact-stats { margin-bottom: 1rem; }
.workspace-admin-filter { margin-bottom: 1rem; padding: .85rem; }
.compact-filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.compact-filter label { display: grid; gap: .28rem; min-width: 180px; font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.compact-filter select { min-height: 2.35rem; border-radius: .7rem; border: 1px solid var(--border); padding: .4rem .65rem; background: #fff; color: var(--text); }
.workspace-intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: .9rem; }
.workspace-intro-card { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-tiny); }
.workspace-intro-card > span { display: grid; place-items: center; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: .75rem; background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }
.workspace-intro-card .icon { width: 1rem; height: 1rem; fill: currentColor; }
.workspace-intro-card strong { display: block; font-size: .92rem; margin-bottom: .18rem; }
.workspace-intro-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.collaboration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.collaboration-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: .9rem; border: 1px solid var(--border); border-radius: 1.05rem; background: #fff; box-shadow: var(--shadow-tiny); overflow: hidden; }
.collaboration-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary); opacity: .9; }
.collaboration-card.excel::before { background: #227447; }
.collaboration-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.collaboration-card-head > div { min-width: 0; flex: 1; }
.collaboration-card-head h4 { margin: .08rem 0 0; font-size: .98rem; line-height: 1.18; }
.collaboration-icon { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: .8rem; background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }
.collaboration-card.excel .collaboration-icon { background: rgba(34,116,71,.1); color: #227447; }
.collaboration-icon .icon { width: 1rem; height: 1rem; fill: currentColor; }
.collaboration-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.collaboration-meta-grid div { padding: .55rem; border-radius: .75rem; background: var(--surface); }
.collaboration-meta-grid small { display: block; color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.collaboration-meta-grid strong { display: block; margin-top: .14rem; color: var(--text); font-size: .8rem; line-height: 1.25; }
.collaboration-purpose { margin: 0; color: var(--text); font-size: .86rem; line-height: 1.48; }
.collaboration-guidance { padding: .72rem; border-radius: .85rem; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.collaboration-guidance strong { display: block; font-size: .8rem; margin-bottom: .24rem; color: var(--primary); }
.collaboration-guidance p { margin: 0; color: var(--text); font-size: .82rem; line-height: 1.45; }
.collaboration-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: auto; }
.internal-note.compact { margin: 0; padding: .62rem .72rem; font-size: .8rem; }
.workspace-mini-list { display: grid; gap: .55rem; }
.workspace-mini-list a { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .58rem; border-radius: .78rem; border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.workspace-mini-list a:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--surface); }
.workspace-mini-list strong { display: block; font-size: .84rem; }
.workspace-mini-list small { display: block; color: var(--muted); font-size: .74rem; margin-top: .06rem; }
@media (max-width: 1180px) { .stat-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .collaboration-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .stat-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-hero { grid-template-columns: 1fr; } .workspace-hero-aside { min-width: 0; text-align: left; } .workspace-intro-grid, .collaboration-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stat-grid.five { grid-template-columns: 1fr; } .collaboration-meta-grid { grid-template-columns: 1fr; } .collaboration-actions .button { width: 100%; justify-content: center; } }

/* v1.3.0 — multilingual portal, intelligent language control and contrast safety */

/* Dark-surface contrast guard: headings and copy must never inherit the global dark text colour. */
.workspace-hero,
.hero,
.project-detail-hero,
.auth-brand-panel,
.sidebar,
.attention-panel,
.impersonation-bar {
    color: #fff;
}

.workspace-hero h1,
.workspace-hero h2,
.workspace-hero h3,
.workspace-hero h4,
.workspace-hero strong,
.workspace-hero .eyebrow,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero strong,
.hero .eyebrow,
.project-detail-hero h1,
.project-detail-hero h2,
.project-detail-hero h3,
.project-detail-hero h4,
.project-detail-hero strong,
.project-detail-hero .eyebrow,
.auth-brand-panel h1,
.auth-brand-panel h2,
.auth-brand-panel h3,
.auth-brand-panel h4,
.auth-brand-panel strong,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar strong,
.attention-panel h1,
.attention-panel h2,
.attention-panel h3,
.attention-panel h4,
.attention-panel strong,
.impersonation-bar strong {
    color: #fff !important;
}

.workspace-hero p,
.workspace-hero small,
.hero p,
.hero small,
.project-detail-hero p,
.project-detail-hero small,
.auth-brand-panel p,
.auth-brand-panel small,
.sidebar p,
.sidebar small,
.attention-panel p,
.attention-panel small,
.impersonation-bar small {
    color: rgba(255, 255, 255, .78) !important;
}

.workspace-hero .button-light,
.hero .button-light,
.project-detail-hero .button-light,
.impersonation-bar .button-light {
    color: var(--primary) !important;
}

.workspace-hero .badge,
.hero .badge,
.project-detail-hero .badge {
    color: inherit;
}

/* Compact language switch */
.language-switch {
    position: relative;
    z-index: 75;
}

.language-switch > summary {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .36rem .55rem;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.language-switch > summary::-webkit-details-marker { display: none; }
.language-switch > summary:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(18, 63, 53, .10);
    transform: translateY(-1px);
}

.language-code {
    min-width: 27px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0 .3rem;
    border-radius: 7px;
    background: rgba(18, 63, 53, .09);
    color: var(--primary);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.language-native {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 760;
}

.language-chevron {
    color: #7d8a85;
    font-size: .75rem;
    line-height: 1;
    transform-origin: center;
    transition: transform var(--transition);
}

.language-switch[open] .language-chevron { transform: rotate(180deg); }
.language-switch.is-managed > summary { border-color: #dac89f; background: #fffaf0; }
.language-switch.is-managed .language-code { background: #f2e4c2; color: #7a5719; }

.language-popover {
    position: absolute;
    top: calc(100% + .48rem);
    right: 0;
    width: 246px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(10, 38, 31, .18);
    animation: language-popover-in .16s ease;
}

@keyframes language-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.language-popover-head {
    display: flex;
    flex-direction: column;
    padding: .72rem .78rem;
    border-bottom: 1px solid var(--line);
    background: #f8faf9;
}
.language-popover-head strong { color: var(--ink); font-size: .74rem; }
.language-popover-head small { margin-top: .08rem; color: var(--muted); font-size: .62rem; }
.language-options { display: grid; padding: .38rem; }
.language-options a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .52rem .58rem;
    border-radius: 9px;
    color: #52615b;
}
.language-options a:hover { background: #f3f7f5; color: var(--primary); }
.language-options a.active { background: rgba(18, 63, 53, .08); color: var(--primary); }
.language-options a > span { font-size: .6rem; font-weight: 900; letter-spacing: .05em; }
.language-options a > strong { color: inherit; font-size: .74rem; }
.language-options a .icon { width: 15px; height: 15px; }
.language-managed-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem;
    color: #725318;
    background: #fff9eb;
    font-size: .68rem;
    font-weight: 750;
}
.language-managed-note .icon { width: 17px; height: 17px; }
.auth-language-row { display: flex; justify-content: flex-end; margin-bottom: .65rem; }

/* Language settings */
.language-settings-card { overflow: visible; }
.language-system-badge,
.language-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .5rem;
    border-radius: 8px;
    background: rgba(18, 63, 53, .08);
    color: var(--primary);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
    white-space: nowrap;
}
.language-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: .85rem;
    align-items: stretch;
}
.language-detection-switch {
    min-height: 100%;
    padding: .72rem .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8faf9;
}
.language-priority {
    margin-top: .85rem;
    padding: .78rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, #fbfdfc, #f3f7f5);
}
.language-priority > strong { display: block; margin-bottom: .55rem; font-size: .72rem; }
.language-priority ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.language-priority li { display: flex; align-items: flex-start; gap: .48rem; min-width: 0; }
.language-priority li > span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
}
.language-priority b,
.language-priority small { display: block; }
.language-priority b { color: var(--ink); font-size: .68rem; }
.language-priority small { margin-top: .08rem; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.setup-language-detection { align-self: stretch; margin: 0; }
.language-managed-panel {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem;
    border: 1px solid #e5d5ad;
    border-radius: 12px;
    background: #fffaf0;
}
.language-managed-panel > .icon { width: 20px; height: 20px; color: #7a5719; margin-top: .05rem; }
.language-managed-panel strong { display: block; color: #6b4d16; font-size: .75rem; }
.language-managed-panel p { margin: .15rem 0 .45rem; font-size: .67rem; }

/* Multilingual content editor */
.multilingual-editor {
    overflow: hidden;
    margin: .1rem 0;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    background: #fbfdfc;
}
.multilingual-editor > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .72rem .78rem;
    list-style: none;
    cursor: pointer;
    background: linear-gradient(145deg, #f8fbf9, #f2f7f4);
}
.multilingual-editor > summary::-webkit-details-marker { display: none; }
.multilingual-editor > summary > span:nth-child(2) { min-width: 0; }
.multilingual-editor > summary strong,
.multilingual-editor > summary small { display: block; }
.multilingual-editor > summary strong { color: var(--ink); font-size: .76rem; }
.multilingual-editor > summary small { margin-top: .08rem; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.multilingual-summary-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
}
.multilingual-summary-icon .icon { width: 17px; height: 17px; }
.multilingual-editor-body { padding: .72rem; border-top: 1px solid var(--line); }
.language-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .62rem; }
.language-content-grid.two-languages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.language-content-card {
    min-width: 0;
    padding: .68rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}
.language-content-card > header { display: flex; align-items: center; gap: .48rem; margin-bottom: .62rem; }
.language-content-card > header > span:last-child { min-width: 0; }
.language-content-card > header strong,
.language-content-card > header small { display: block; }
.language-content-card > header strong { color: var(--ink); font-size: .7rem; }
.language-content-card > header small { color: var(--muted); font-size: .56rem; }
.language-content-fields { display: grid; gap: .58rem; }
.language-content-fields .field > span { font-size: .66rem; }
.language-content-fields input,
.language-content-fields textarea { font-size: .74rem; }
.multilingual-fallback-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .62rem 0 0;
    color: #567067;
    font-size: .62rem;
}
.multilingual-fallback-note .icon { width: 15px; height: 15px; color: var(--success); }

@media (max-width: 1180px) {
    .language-content-grid { grid-template-columns: 1fr; }
    .language-priority ol { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .language-native { display: none; }
    .language-popover { position: fixed; top: 66px; right: .65rem; width: min(280px, calc(100vw - 1.3rem)); }
    .auth-language-row .language-popover { position: absolute; top: calc(100% + .48rem); }
    .language-settings-grid { grid-template-columns: 1fr; }
    .multilingual-editor > summary { grid-template-columns: auto minmax(0, 1fr); }
    .multilingual-editor > summary .language-system-badge { grid-column: 2; justify-self: start; }
}

/* Language pack health — v1.3.0 */
.language-pack-status-card { margin: 1rem 0; }
.language-pack-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.language-pack-status-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .78rem; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.language-pack-status-item.ok { border-color: #c8e4d7; background: var(--success-soft); }
.language-pack-status-item.error { border-color: #ecc6c6; background: var(--danger-soft); }
.language-pack-status-item > div { min-width: 0; }
.language-pack-status-item strong, .language-pack-status-item small { display: block; }
.language-pack-status-item strong { font-size: .75rem; }
.language-pack-status-item small { color: var(--muted); font-size: .61rem; margin-top: .1rem; }
.client-language-line { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-size: .63rem; font-weight: 750; }
.client-language-line .language-code-badge { min-width: 29px; height: 20px; padding: 0 .35rem; font-size: .52rem; }
@media (max-width: 860px) { .language-pack-status-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   Task Collaboration Workspace — v1.4.0
   Compact, auditable customer workflow inspired by Kanban.
   ========================================================== */

.nav-count {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--accent);
    color: #24352f;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
}
.nav-link.active .nav-count { background: #fff; color: var(--primary); }

.app-footer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
}
.app-footer > span:last-child { justify-content: flex-end; }
.footer-credit {
    color: #5a6c65;
    font-size: .67rem;
    font-weight: 760;
    text-align: center;
    transition: color var(--transition);
}
.footer-credit:hover { color: var(--primary); }
.auth-footer { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.auth-footer .footer-credit { color: #6d7d76; }

/* Task hub */
.task-hub-hero {
    min-height: 168px;
    padding: 1.45rem 1.6rem;
}
.task-hub-hero h2 { max-width: 760px; font-size: clamp(1.42rem, 2.6vw, 2rem); }
.task-hub-hero p { max-width: 820px; font-size: .78rem; }
.task-hub-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.task-hub-actions .workspace-hero-aside { min-width: 118px; }
.task-stats.stat-grid.five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.task-filter-card { overflow: visible; }
.task-filter-bar { gap: .55rem; }
.task-filter-bar .search-field { min-width: 240px; }
.task-filter-bar select { min-width: 145px; }
.compact-checkbox {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .4rem .58rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fafcfb;
    color: #53645d;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.compact-checkbox input { width: 15px; height: 15px; min-height: 0; accent-color: var(--primary); }

/* Kanban board */
.task-board {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(245px, 1fr));
    gap: .72rem;
    overflow-x: auto;
    padding: .05rem .05rem .55rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.task-board.compact { grid-template-columns: repeat(5, minmax(225px, 1fr)); }
.task-board-column {
    min-width: 0;
    align-self: start;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #eef3f0;
    overflow: hidden;
}
.task-board-column.column-approval { background: #f7f3e9; border-color: #e5d7b5; }
.task-board-column.column-work { background: #edf4f7; border-color: #cfdee5; }
.task-board-column.column-review { background: #eef3f9; border-color: #cedbea; }
.task-board-column.column-closed { background: #edf5f1; border-color: #cce1d6; }
.task-board-column-head {
    min-height: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    padding: .72rem .78rem;
    border-bottom: 1px solid rgba(18,63,53,.08);
    background: rgba(255,255,255,.58);
}
.task-board-column-head > div { min-width: 0; }
.task-board-column-head strong,
.task-board-column-head small { display: block; }
.task-board-column-head strong { color: var(--ink); font-size: .72rem; }
.task-board-column-head small { margin-top: .1rem; color: var(--muted); font-size: .56rem; line-height: 1.3; }
.task-board-column-head > span {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-size: .63rem;
    font-weight: 900;
}
.task-board-stack { min-height: 155px; display: flex; flex-direction: column; gap: .55rem; padding: .58rem; }
.task-board-empty {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: 1rem;
    color: #87938e;
    text-align: center;
}
.task-board-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.68); }
.task-board-empty .icon { width: 16px; height: 16px; }
.task-board-empty small { font-size: .6rem; }
.task-board-card {
    position: relative;
    display: block;
    min-width: 0;
    padding: .72rem;
    border: 1px solid rgba(203,216,210,.92);
    border-left: 3px solid #91a199;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(17,49,41,.045);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.task-board-card:hover { transform: translateY(-2px); border-color: #b8cbc2; box-shadow: 0 8px 20px rgba(17,49,41,.1); }
.task-board-card.unread { box-shadow: 0 0 0 2px rgba(209,169,95,.35), 0 8px 18px rgba(17,49,41,.08); }
.task-board-card.priority-low { border-left-color: #90a49a; }
.task-board-card.priority-normal { border-left-color: var(--primary); }
.task-board-card.priority-high { border-left-color: #d18b2e; }
.task-board-card.priority-critical { border-left-color: var(--danger); }
.task-board-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .45rem; }
.task-reference { color: #81908a; font-size: .55rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.task-board-card h4 { margin: .52rem 0 .35rem; font-size: .79rem; line-height: 1.32; overflow-wrap: anywhere; }
.task-card-context { display: flex; align-items: center; gap: .28rem; margin-top: .18rem; color: #75847e; font-size: .58rem; }
.task-card-context .icon { width: 12px; height: 12px; }
.task-card-tags { display: flex; align-items: center; gap: .32rem; flex-wrap: wrap; margin-top: .55rem; }
.task-card-tags > span { padding: .22rem .38rem; border-radius: 6px; background: #f0f4f2; color: #607069; font-size: .54rem; font-weight: 750; }
.task-card-tags .priority-label { background: #fff7e8; color: #815e20; }
.task-card-price { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .05rem .38rem; align-items: center; margin-top: .55rem; padding: .48rem .52rem; border-radius: 8px; background: #f7faf8; }
.task-card-price > span { grid-row: span 2; color: var(--primary); }
.task-card-price .icon { width: 15px; height: 15px; }
.task-card-price strong { min-width: 0; color: var(--ink); font-size: .65rem; overflow-wrap: anywhere; }
.task-card-price small { color: #7c8984; font-size: .53rem; }
.task-board-card-foot { display: flex; align-items: center; gap: .52rem; margin-top: .62rem; padding-top: .5rem; border-top: 1px solid #edf1ef; color: #788680; font-size: .55rem; }
.task-board-card-foot > span { display: inline-flex; align-items: center; gap: .2rem; }
.task-board-card-foot > span:first-child { margin-right: auto; }
.task-board-card-foot .icon { width: 12px; height: 12px; }
.task-board-card-foot .soon { color: var(--warning); font-weight: 800; }
.task-board-card-foot .overdue { color: var(--danger); font-weight: 800; }
.task-unread-dot { position: absolute; top: -.25rem; right: -.25rem; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 7px rgba(0,0,0,.18); }

/* Task detail */
.task-detail-hero { align-items: stretch; padding: 1.25rem 1.4rem; }
.task-detail-hero .project-detail-main { display: flex; flex-direction: column; justify-content: center; }
.task-detail-hero h2 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); }
.task-hero-side { min-width: 245px; display: flex; align-items: stretch; gap: .6rem; }
.task-hero-price { min-width: 165px; display: flex; flex-direction: column; justify-content: center; padding: .85rem; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.07); }
.task-hero-price small { color: rgba(255,255,255,.58); font-size: .58rem; }
.task-hero-price strong { margin: .15rem 0; color: #fff; font-size: 1rem; }
.task-hero-price span { color: rgba(255,255,255,.72); font-size: .6rem; }
.task-workflow-card { margin: 1rem 0; padding: .72rem; overflow-x: auto; }
.task-workflow-card > div { min-width: 660px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.task-workflow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .28rem; color: #8a9691; text-align: center; }
.task-workflow-step::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 2px; background: #dce5e1; }
.task-workflow-step:first-child::before { left: 50%; }
.task-workflow-step:last-child::before { right: 50%; }
.task-workflow-step > span { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #d3ded9; border-radius: 50%; background: #fff; font-size: .62rem; font-weight: 900; }
.task-workflow-step small { font-size: .58rem; font-weight: 750; }
.task-workflow-step.done::before,
.task-workflow-step.active::before { background: var(--primary); }
.task-workflow-step.done > span { border-color: var(--primary); background: var(--primary); color: #fff; }
.task-workflow-step.active > span { border-color: var(--accent); background: #fff9eb; color: #73521a; box-shadow: 0 0 0 4px rgba(209,169,95,.16); }
.task-workflow-step.active small { color: var(--ink); }
.task-anchor-nav { top: 94px; }
.task-anchor-nav a { font-size: .64rem; }
.task-detail-grid { display: grid; grid-template-columns: minmax(0,1.48fr) minmax(290px,.52fr); gap: 1rem; align-items: start; }
.task-main-column,
.task-side-column { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.task-side-column { position: sticky; top: 148px; }
.has-impersonation .task-side-column { top: 196px; }
.task-description-prose { color: #3f5049; font-size: .78rem; line-height: 1.68; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-detail-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .8rem; }
.task-detail-facts > div { padding: .62rem; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.task-detail-facts small,
.task-detail-facts strong { display: block; }
.task-detail-facts small { color: #81908a; font-size: .57rem; }
.task-detail-facts strong { margin-top: .12rem; font-size: .7rem; overflow-wrap: anywhere; }
.task-action-card > form + form,
.task-action-card > form + details,
.task-action-card > details + details,
.task-action-card > a + form,
.task-action-card > a + details { margin-top: .55rem; }
.task-action-details { margin-top: .55rem; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; overflow: hidden; }
.task-action-details > summary,
.task-pricing-editor > summary,
.task-danger-zone > summary,
.task-quote-history > summary { display: flex; align-items: center; gap: .38rem; padding: .62rem .7rem; color: #45564f; font-size: .68rem; font-weight: 800; cursor: pointer; list-style: none; }
.task-action-details > summary::-webkit-details-marker,
.task-pricing-editor > summary::-webkit-details-marker,
.task-danger-zone > summary::-webkit-details-marker,
.task-quote-history > summary::-webkit-details-marker { display: none; }
.task-action-details > summary .icon { width: 14px; height: 14px; }
.task-action-details > form { padding: .72rem; border-top: 1px solid var(--line); }
.task-action-highlight { padding: .78rem; border: 1px solid #e3d2a9; border-radius: 11px; background: #fff9ea; }
.task-action-highlight.success { border-color: #c6e2d5; background: var(--success-soft); }
.task-action-highlight.warning { border-color: #e6d3a6; background: var(--warning-soft); }
.task-action-highlight.info { border-color: #cbdfea; background: var(--info-soft); }
.task-action-highlight strong { display: block; color: var(--ink); font-size: .76rem; }
.task-action-highlight p { margin: .22rem 0 .62rem; font-size: .66rem; }
.task-closed-note { display: flex; align-items: flex-start; gap: .6rem; padding: .72rem; border-radius: 11px; background: var(--success-soft); color: #285d49; }
.task-closed-note .icon { width: 18px; height: 18px; }
.task-closed-note strong,
.task-closed-note small { display: block; }
.task-closed-note strong { font-size: .72rem; }
.task-closed-note small { margin-top: .1rem; font-size: .61rem; }

/* Conversation */
.task-thread { display: flex; flex-direction: column; gap: .7rem; }
.task-message { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .62rem; align-items: start; }
.task-message.own { grid-template-columns: minmax(0,1fr) auto; }
.task-message.own > .avatar { grid-column: 2; }
.task-message.own > .task-message-body { grid-column: 1; grid-row: 1; justify-self: end; background: #f1f7f4; border-color: #cadfd5; }
.task-message.internal .task-message-body { border-color: #e6d6ad; background: #fffaf0; }
.task-message-body { width: min(100%, 760px); padding: .7rem .78rem; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.task-message-body header { display: flex; align-items: center; gap: .42rem; flex-wrap: wrap; margin-bottom: .32rem; }
.task-message-body header strong { font-size: .7rem; }
.task-message-body header small { color: #85928d; font-size: .57rem; }
.task-message-text { color: #3f5049; font-size: .74rem; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-message-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.task-message-files a { display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .46rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--primary); font-size: .58rem; font-weight: 750; }
.task-message-files .icon { width: 13px; height: 13px; }
.task-inline-delete { margin-left: auto; }
.task-inline-delete .link-button { color: var(--danger); font-size: .56rem; }
.task-reply-form { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.task-reply-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem; align-items: end; }
.task-compact-upload { position: relative; display: flex; flex-direction: column; gap: .08rem; min-height: 42px; justify-content: center; padding: .5rem .65rem; border: 1px dashed var(--line-strong); border-radius: 9px; background: #fafcfb; cursor: pointer; }
.task-compact-upload input { position: absolute; opacity: 0; pointer-events: none; }
.task-compact-upload > span { display: inline-flex; align-items: center; gap: .32rem; color: var(--primary); font-size: .65rem; font-weight: 800; }
.task-compact-upload > span .icon { width: 14px; height: 14px; }
.task-compact-upload small { color: #84918c; font-size: .55rem; overflow-wrap: anywhere; }

/* Files */
.task-file-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.task-file-grid article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .62rem; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; min-width: 0; }
.task-file-grid article > div:nth-child(2) { min-width: 0; }
.task-file-grid strong,
.task-file-grid small { display: block; }
.task-file-grid strong { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-file-grid small { margin-top: .12rem; color: #84918c; font-size: .55rem; }

/* Pricing and approvals */
.task-price-summary { display: flex; flex-direction: column; align-items: center; padding: .85rem; margin-bottom: .7rem; border-radius: 12px; background: linear-gradient(145deg, #f6faf8, #edf5f1); text-align: center; }
.task-price-summary small { color: #6e7d77; font-size: .6rem; }
.task-price-summary strong { color: var(--primary); font-size: 1.18rem; }
.task-price-summary span { margin-top: .15rem; color: #61716a; font-size: .6rem; }
.task-quote-note { margin-top: .7rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.task-quote-note strong { font-size: .68rem; }
.task-quote-note p { margin: .22rem 0 0; font-size: .64rem; white-space: pre-wrap; }
.task-pricing-editor { margin-top: .7rem; border: 1px solid var(--line-strong); border-radius: 11px; overflow: hidden; }
.task-pricing-editor > summary { background: #f5f9f7; }
.task-pricing-editor > form { padding: .72rem; border-top: 1px solid var(--line); }
.task-pricing-fields { padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.js-ready .task-pricing-fields { display: none; }
.js-ready .task-pricing-fields.is-active { display: block; }
.task-client-approval { margin-top: .75rem; padding: .72rem; border: 1px solid #dec98f; border-radius: 11px; background: #fffaf0; }
.approval-check { display: flex; align-items: flex-start; gap: .5rem; padding: .62rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #45564f; font-size: .65rem; font-weight: 700; cursor: pointer; }
.approval-check input { width: 16px; height: 16px; min-height: 0; margin-top: .05rem; accent-color: var(--primary); }
.task-quote-history { margin-top: .7rem; border-top: 1px solid var(--line); }
.task-quote-history > div { display: grid; gap: .4rem; padding: 0 .7rem .7rem; }
.task-quote-history article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .08rem .5rem; padding: .5rem; border-radius: 8px; background: #f7faf8; }
.task-quote-history article span { grid-column: span 2; color: #81908a; font-size: .55rem; }
.task-quote-history article strong { font-size: .65rem; }
.task-quote-history article small { font-size: .56rem; }
.task-review-card { border-color: #c6dfd3; background: linear-gradient(145deg, #fff, #f4faf7); }

/* Time tracking */
.task-time-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-bottom: .7rem; }
.task-time-summary > div { padding: .62rem; border-radius: 10px; background: #f5f9f7; text-align: center; }
.task-time-summary small,
.task-time-summary strong { display: block; }
.task-time-summary small { color: #80908a; font-size: .56rem; }
.task-time-summary strong { margin-top: .1rem; color: var(--primary); font-size: .82rem; }
.task-live-timer { font-variant-numeric: tabular-nums; }
.task-time-list { display: flex; flex-direction: column; margin-top: .7rem; }
.task-time-list article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .5rem; padding: .52rem 0; border-bottom: 1px solid #edf1ef; }
.task-time-list article:last-child { border-bottom: 0; }
.task-time-list article > div { min-width: 0; }
.task-time-list strong,
.task-time-list small { display: block; }
.task-time-list strong { font-size: .68rem; }
.task-time-list small { color: #83908b; font-size: .56rem; overflow-wrap: anywhere; }
.task-time-list article > span { color: #6b7973; font-size: .55rem; }

/* Editor and settings */
.task-file-drop { min-height: 135px; }
.task-file-drop em { color: #7f8c87; font-size: .6rem; font-style: normal; overflow-wrap: anywhere; }
.task-process-note { display: flex; align-items: flex-start; gap: .6rem; padding: .72rem; border: 1px solid #c9e0d5; border-radius: 11px; background: var(--success-soft); }
.task-process-note > .icon { width: 18px; height: 18px; color: var(--success); }
.task-process-note strong { display: block; color: #285e48; font-size: .7rem; }
.task-process-note p { margin: .1rem 0 0; font-size: .62rem; }
.task-danger-zone { margin-top: .7rem; border-top: 1px solid #efd1d1; }
.task-danger-zone > summary { color: var(--danger); }
.task-danger-zone > form { padding: .65rem 0; }
.danger-outline { color: var(--danger); border-color: #e5bcbc; }
.danger-outline:hover { color: #8b3030; border-color: var(--danger); background: var(--danger-soft); }
.danger-text { color: var(--danger) !important; }
.input-with-suffix { display: flex; align-items: stretch; }
.input-with-suffix input { border-radius: 10px 0 0 10px; }
.input-with-suffix > span { display: flex; align-items: center; padding: 0 .68rem; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 10px 10px 0; background: #f5f8f6; color: #65746e; font-size: .65rem; font-weight: 750; white-space: nowrap; }
.task-settings-flow { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; margin-top: .85rem; padding: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #f7faf8; }
.task-settings-flow > span { padding: .32rem .48rem; border-radius: 7px; background: #fff; color: var(--primary); font-size: .59rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.task-settings-flow .icon { width: 13px; height: 13px; color: #91a098; }

@media (max-width: 1450px) {
    .task-stats.stat-grid.five { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1180px) {
    .task-detail-grid { grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); }
    .task-file-grid { grid-template-columns: 1fr; }
    .app-footer { grid-template-columns: 1fr; justify-items: center; gap: .35rem; text-align: center; }
    .app-footer > span:last-child { justify-content: center; }
}
@media (max-width: 920px) {
    .task-detail-grid { grid-template-columns: 1fr; }
    .task-side-column { position: static; }
    .task-hub-hero { align-items: flex-start; }
    .task-hero-side { width: 100%; min-width: 0; }
    .task-hero-price { flex: 1; }
    .task-stats.stat-grid.five { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .task-hub-hero { padding: 1.05rem; }
    .task-hub-actions { width: 100%; justify-content: stretch; }
    .task-hub-actions .button,
    .task-hub-actions .workspace-hero-aside { flex: 1 1 100%; }
    .task-stats.stat-grid.five { grid-template-columns: 1fr 1fr; }
    .task-filter-bar > * { width: 100% !important; min-width: 0 !important; }
    .task-board,
    .task-board.compact { grid-template-columns: repeat(5, minmax(82vw, 1fr)); gap: .58rem; }
    .task-board-column-head { min-height: 58px; }
    .task-detail-hero { padding: 1rem; }
    .task-hero-side { flex-direction: column; }
    .task-detail-facts { grid-template-columns: 1fr 1fr; }
    .task-reply-actions { grid-template-columns: 1fr; }
    .task-file-grid article { grid-template-columns: auto minmax(0,1fr); }
    .task-file-grid .document-actions { grid-column: 2; justify-content: flex-end; }
    .task-message { grid-template-columns: auto minmax(0,1fr); }
    .task-message.own { grid-template-columns: minmax(0,1fr) auto; }
    .task-message-body { padding: .62rem; }
    .task-time-list article { grid-template-columns: minmax(0,1fr) auto; }
    .task-time-list article form { grid-column: 2; }
    .task-settings-flow .icon { transform: rotate(90deg); }
}
@media (max-width: 430px) {
    .task-stats.stat-grid.five { grid-template-columns: 1fr; }
    .task-board,
    .task-board.compact { grid-template-columns: repeat(5, minmax(88vw, 1fr)); }
    .task-detail-facts { grid-template-columns: 1fr; }
    .task-time-summary { grid-template-columns: 1fr; }
}

/* ============================================================
   Billing, payments and recommendations — compact premium v1.5.1
   ============================================================ */
.billing-page-intro,
.recommendations-page-intro { align-items: flex-end; }

.billing-source-banner,
.recommendation-principle-banner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.05rem;
    margin-bottom: .9rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #0a3027);
    color: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.billing-source-banner > div,
.recommendation-principle-banner > div { min-width: 0; flex: 1; }
.billing-source-banner strong,
.billing-source-banner h1,
.billing-source-banner h2,
.billing-source-banner h3,
.billing-source-banner h4,
.recommendation-principle-banner strong,
.recommendation-principle-banner h1,
.recommendation-principle-banner h2,
.recommendation-principle-banner h3,
.recommendation-principle-banner h4 { color: #fff !important; }
.billing-source-banner p,
.billing-source-banner small,
.recommendation-principle-banner p,
.recommendation-principle-banner small { color: rgba(255,255,255,.75) !important; margin: .12rem 0 0; font-size: .7rem; }
.billing-source-mark {
    min-width: 66px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    box-shadow: 0 7px 16px rgba(0,0,0,.15);
}
.recommendation-principle-banner > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    color: var(--accent);
}
.billing-stats,
.recommendation-stats { margin-top: .85rem; }

/* Integrated invoice cards */
.invoice-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.invoice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17,49,41,.04);
    overflow: hidden;
}
.invoice-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #cfa84f;
}
.invoice-card.invoice-status-paid::before { background: var(--success); }
.invoice-card.invoice-status-overdue::before,
.invoice-card.invoice-status-cancelled::before { background: var(--danger); }
.invoice-card.invoice-status-partially_paid::before { background: var(--info); }
.invoice-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
}
.invoice-source {
    width: 52px;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #edf5f1, #f8fbfa);
    border: 1px solid #d9e5df;
}
.invoice-source span { color: var(--primary); font-size: .55rem; font-weight: 950; letter-spacing: .1em; }
.invoice-source small { max-width: 48px; color: #7c8984; font-size: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-card-title { min-width: 0; }
.invoice-card-title h4 { margin: .05rem 0 .12rem; font-size: .91rem; }
.invoice-card-title a { display: block; color: var(--primary); font-size: .62rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-billing-live {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .7rem;
    border: 1px solid #d9e6e0;
    border-radius: 11px;
    background: #f4f8f6;
    color: var(--primary);
}
.invoice-billing-live > svg { width: 19px; height: 19px; }
.invoice-billing-live > div { display: flex; flex-direction: column; min-width: 0; }
.invoice-billing-live strong { color: #29453a; font-size: .71rem; }
.invoice-billing-live small { color: #76857f; font-size: .59rem; }
.invoice-meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .4rem;
    margin: 0;
}
.invoice-meta-list > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .48rem .55rem;
    border-radius: 9px;
    background: #f8faf9;
}
.invoice-meta-list dt { color: #85918c; font-size: .55rem; }
.invoice-meta-list dd { margin: .08rem 0 0; color: #3b4e46; font-size: .67rem; font-weight: 750; overflow-wrap: anywhere; }
.invoice-note {
    margin: 0;
    padding: .65rem .7rem;
    border-radius: 10px;
    background: #fffaf0;
    border: 1px solid #ead9b5;
    color: #67552f;
    font-size: .68rem;
}
.invoice-actions,
.invoice-admin-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.invoice-actions { margin-top: auto; }
.invoice-admin-actions { padding-top: .6rem; border-top: 1px solid #edf1ef; }
.invoice-admin-actions form { margin: 0; }
.text-danger { color: var(--danger) !important; }

/* Payment links and bank accounts */
.billing-method-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-top: .9rem;
}
.billing-method-section { min-width: 0; }
.payment-link-grid,
.bank-account-list { display: flex; flex-direction: column; gap: .55rem; }
.payment-link-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafcfb;
}
.payment-link-card.preferred { border-color: #d9bf7a; background: linear-gradient(145deg, #fffdf8, #fff9eb); }
.payment-currency {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
}
.payment-link-main { min-width: 0; }
.payment-link-main > div { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.payment-link-main strong { color: var(--ink); font-size: .75rem; }
.payment-link-main p { margin: .14rem 0 0; color: #6e7c76; font-size: .64rem; }
.payment-link-main small { display: block; margin-top: .18rem; color: #8a9691; font-size: .57rem; }
.payment-method-admin { position: absolute; right: .35rem; top: -.35rem; display: flex; gap: .25rem; opacity: 0; transform: translateY(-3px); transition: all var(--transition); }
.payment-link-card:hover .payment-method-admin,
.bank-account-row:hover .payment-method-admin { opacity: 1; transform: translateY(0); }
.payment-method-admin form { margin: 0; }
.payment-method-admin .icon-button { width: 30px; height: 30px; border-radius: 8px; }
.bank-account-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafcfb;
}
.bank-account-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.bank-account-main { min-width: 0; display: flex; flex-direction: column; }
.bank-account-main > div { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.bank-account-main strong { color: var(--ink); font-size: .74rem; }
.bank-account-main small { color: #76847e; font-size: .61rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-account-main > span { color: #8a9691; font-size: .57rem; }
.billing-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .7rem;
    margin-top: .9rem;
}
.billing-safety-grid > div {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.billing-safety-grid > div > svg { color: var(--primary); width: 18px; height: 18px; margin-top: .1rem; }
.billing-safety-grid p { display: flex; flex-direction: column; margin: 0; }
.billing-safety-grid strong { color: #33463f; font-size: .7rem; }
.billing-safety-grid span { color: #7b8883; font-size: .6rem; }
.billing-source-form-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid #cfe0d8;
    border-radius: 11px;
    background: #f3f8f5;
}
.billing-source-form-note > svg { color: var(--primary); }
.billing-source-form-note strong { color: #29453a; font-size: .75rem; }
.billing-source-form-note p { margin: .12rem 0 0; font-size: .64rem; }
.invoice-file-drop { min-height: 132px; }
.invoice-file-drop em { color: var(--primary); font-size: .62rem; font-style: normal; font-weight: 700; }

/* Recommendations */
.recommendation-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem;
}
.recommendation-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17,49,41,.04);
    min-width: 0;
}
.recommendation-card-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .65rem;
    align-items: start;
}
.recommendation-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(18,63,53,.08), rgba(209,169,95,.14));
    color: var(--primary);
}
.recommendation-heading { min-width: 0; }
.recommendation-heading h4 { margin: .28rem 0 .08rem; font-size: .9rem; }
.recommendation-heading > small { display: block; color: #7c8984; font-size: .59rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recommendation-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.recommendation-admin-icons { display: flex; gap: .25rem; }
.recommendation-admin-icons form { margin: 0; }
.recommendation-admin-icons .icon-button { width: 31px; height: 31px; border-radius: 8px; }
.recommendation-description {
    padding: .65rem .7rem;
    border-radius: 10px;
    background: #f8faf9;
    border: 1px solid #e7ece9;
}
.recommendation-description strong { font-size: .66rem; color: #40534b; }
.recommendation-description p { margin: .18rem 0 0; font-size: .67rem; }
.recommendation-benefit {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem .7rem;
    border-radius: 10px;
    background: var(--success-soft);
    border: 1px solid #cce7da;
    color: var(--success);
}
.recommendation-benefit > svg { width: 17px; height: 17px; margin-top: .05rem; }
.recommendation-benefit p { display: flex; flex-direction: column; margin: 0; }
.recommendation-benefit strong { color: #28624e; font-size: .66rem; }
.recommendation-benefit span { color: #4f7064; font-size: .65rem; }
.recommendation-personal-note {
    margin: 0;
    padding: .7rem .75rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: #fffaf0;
    color: #625330;
    font-size: .67rem;
}
.recommendation-personal-note > span { display: block; margin-bottom: .18rem; color: #846720; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.recommendation-meta-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; color: #75827d; font-size: .61rem; }
.recommendation-meta-row > span,
.recommendation-meta-row > a { display: inline-flex; align-items: center; gap: .3rem; }
.recommendation-meta-row a { color: var(--primary); font-weight: 750; }
.recommendation-meta-row svg { width: 15px; height: 15px; }
.affiliate-disclosure { display: block; padding: .45rem .55rem; border-radius: 8px; background: #f3f5f4; color: #78857f; font-size: .56rem; }
.recommendation-response-form,
.recommendation-admin-response {
    margin-top: auto;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fafcfb;
}
.recommendation-response-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.recommendation-response-head strong { font-size: .68rem; }
.recommendation-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .4rem; margin-bottom: .55rem; }
.recommendation-choice {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .55rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: #5e6c66;
    font-size: .61rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}
.recommendation-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.recommendation-choice svg { width: 15px; height: 15px; }
.recommendation-choice:hover,
.recommendation-choice.selected,
.recommendation-choice:has(input:checked) { border-color: var(--primary); background: rgba(18,63,53,.06); color: var(--primary); }
.recommendation-response-actions { display: flex; align-items: center; justify-content: space-between; gap: .55rem; margin-top: .5rem; }
.recommendation-response-actions small { color: #87938e; font-size: .56rem; }
.recommendation-admin-response.unread { border-color: #e3c77f; background: #fff9ea; }
.recommendation-admin-response > div { display: flex; gap: .3rem; flex-wrap: wrap; }
.recommendation-admin-response p { margin: .45rem 0; font-size: .66rem; }
.recommendation-admin-response small { display: block; color: #7d8984; font-size: .58rem; }
.recommendation-admin-response form { margin-top: .5rem; }
.recommendation-response-summary { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .6rem; border-radius: 10px; background: #f7faf8; }
.recommendation-response-summary > strong { width: 100%; font-size: .65rem; }
.recommendation-response-summary span { padding: .3rem .45rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: #6c7a74; font-size: .57rem; }
.recommendation-response-list { display: flex; flex-direction: column; }
.recommendation-response-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .65rem 0; border-bottom: 1px solid #edf1ef; }
.recommendation-response-row:last-child { border-bottom: 0; }
.recommendation-response-row.unread { margin: .15rem 0; padding: .65rem; border: 1px solid #e5cf94; border-radius: 10px; background: #fff9ea; }
.recommendation-response-row > div { min-width: 0; display: flex; flex-direction: column; }
.recommendation-response-row strong { font-size: .69rem; }
.recommendation-response-row small { color: #7f8c87; font-size: .57rem; }
.recommendation-response-row p { margin: .18rem 0 0; color: #66746e; font-size: .62rem; }

@media (max-width: 1180px) {
    .invoice-card-grid,
    .recommendation-card-grid { grid-template-columns: 1fr; }
    .billing-method-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .billing-source-banner,
    .recommendation-principle-banner { align-items: flex-start; }
    .billing-source-banner > .badge { display: none; }
    .invoice-card-head { grid-template-columns: auto minmax(0,1fr); }
    .invoice-card-head > .badge { grid-column: 2; justify-self: start; }
    .invoice-meta-list { grid-template-columns: 1fr 1fr; }
    .payment-link-card { grid-template-columns: auto minmax(0,1fr); }
    .payment-link-card > .button { grid-column: 1 / 3; width: 100%; }
    .bank-account-row { grid-template-columns: auto minmax(0,1fr); }
    .bank-account-row > .button { grid-column: 1 / 3; width: 100%; }
    .payment-method-admin { opacity: 1; transform: none; }
    .billing-safety-grid { grid-template-columns: 1fr; }
    .recommendation-choice-grid { grid-template-columns: 1fr; }
    .recommendation-response-actions { align-items: stretch; flex-direction: column; }
    .recommendation-response-actions .button { width: 100%; }
}

@media (max-width: 480px) {
    .billing-source-banner { flex-direction: column; }
    .billing-source-mark { min-width: 58px; height: 34px; }
    .invoice-meta-list { grid-template-columns: 1fr; }
    .invoice-actions .button,
    .invoice-admin-actions .button,
    .invoice-admin-actions form { flex: 1 1 100%; }
    .invoice-admin-actions form .button { width: 100%; }
    .recommendation-card-head { grid-template-columns: auto minmax(0,1fr); }
    .recommendation-admin-icons { grid-column: 2; justify-self: start; }
    .recommendation-response-row { grid-template-columns: auto minmax(0,1fr); }
    .recommendation-response-row > .button,
    .recommendation-response-row > form,
    .recommendation-response-row > .badge { grid-column: 2; justify-self: start; }
}

/* Billing settings and source-of-truth bridge */
.billing-source-banner-compact {
    align-items: center;
    margin-top: .15rem;
}
.billing-source-banner-compact .button {
    flex: 0 0 auto;
}
.billing-settings-principle {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: 100%;
    padding: .72rem;
    border: 1px solid #d6e3dd;
    border-radius: 11px;
    background: #f4f8f6;
}
.billing-settings-principle > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.billing-settings-principle strong {
    display: block;
    color: #29453a;
    font-size: .72rem;
}
.billing-settings-principle p {
    margin: .12rem 0 0;
    color: #74827c;
    font-size: .62rem;
}
@media (max-width: 760px) {
    .billing-source-banner-compact {
        align-items: stretch;
        flex-direction: column;
    }
    .billing-source-banner-compact .button {
        width: 100%;
    }
}

/* v1.5.1 final markup alignment and accessibility refinements */
.billing-hero h1,
.billing-hero h2,
.billing-hero h3,
.billing-hero h4,
.recommendations-hero h1,
.recommendations-hero h2,
.recommendations-hero h3,
.recommendations-hero h4 { color: #fff !important; }
.billing-hero p,
.billing-hero small,
.recommendations-hero p,
.recommendations-hero small { color: rgba(255,255,255,.76) !important; }
.billing-section-head,
.recommendation-section-head { margin-top: 1rem; }

.invoice-card-title > div { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.invoice-card-title h3 { margin: .16rem 0 .05rem; font-size: .88rem; line-height: 1.2; }
.invoice-card-title > small { display: block; color: #7c8984; font-size: .56rem; }
.invoice-meta-list > div > small { color: #85918c; font-size: .54rem; }
.invoice-meta-list > div > strong { margin-top: .06rem; color: #3b4e46; font-size: .66rem; overflow-wrap: anywhere; }
.invoice-note strong { display: block; color: #74591d; font-size: .63rem; }
.invoice-note p { margin: .12rem 0 0; color: #6d603e; font-size: .64rem; }
.live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(35,117,87,.12); }
.invoice-card.archived { opacity: .72; }
.invoice-card.featured { border-color: #dbc481; box-shadow: 0 8px 22px rgba(140,104,27,.09); }

.payment-link-card.inactive,
.bank-account-row.archived { opacity: .58; filter: grayscale(.25); }
.payment-link-actions,
.bank-account-actions { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; flex-wrap: wrap; }
.payment-link-actions form,
.bank-account-actions form { margin: 0; }
.payment-link-actions .icon-button,
.bank-account-actions .icon-button { width: 31px; height: 31px; border-radius: 8px; }
.payment-instruction { white-space: normal !important; }
.bank-account-main p { margin: .16rem 0 0; color: #6f7d77; font-size: .61rem; }
.bank-account-row.preferred { border-color: #d9bf7a; background: linear-gradient(145deg, #fffdf8, #fff9eb); }

.billing-safety-grid > div > span:first-child,
.payment-safety-grid > div > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: rgba(18,63,53,.075); color: var(--primary); }
.billing-safety-grid > div > span:first-child svg,
.payment-safety-grid > div > span:first-child svg { width: 16px; height: 16px; }
.billing-safety-grid > div > div,
.payment-safety-grid > div > div { min-width: 0; }
.billing-safety-grid > div > div > strong,
.payment-safety-grid > div > div > strong { display: block; color: #33463f; font-size: .68rem; }
.billing-safety-grid > div > div > p,
.payment-safety-grid > div > div > p { margin: .1rem 0 0; color: #7b8883; font-size: .59rem; }

.secret-clear-panel { border: 1px solid #ecd6d6; border-radius: 11px; background: #fffafa; overflow: hidden; }
.secret-clear-panel > summary { padding: .68rem .75rem; color: #8e4242; font-size: .66rem; font-weight: 800; cursor: pointer; }
.secret-clear-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; padding: 0 .75rem .75rem; }
.secret-clear-grid .inline-check { margin: 0; padding: .42rem .5rem; border: 1px solid #f0dddd; border-radius: 8px; background: #fff; }

.cost-invoice-reference { display: flex; align-items: center; gap: .32rem; flex-wrap: wrap; margin-top: .3rem; }
.cost-invoice-reference a,
.cost-invoice-reference > span:not(.badge) { display: inline-flex; align-items: center; gap: .2rem; color: var(--primary); font-size: .56rem; font-weight: 750; }
.cost-invoice-reference svg { width: 12px; height: 12px; }

/* Actual recommendation view markup */
.recommendation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.recommendation-card.has-unread { border-color: #dfc274; box-shadow: 0 6px 20px rgba(151,108,18,.09); }
.recommendation-title { min-width: 0; }
.recommendation-title > div { display: flex; gap: .3rem; flex-wrap: wrap; }
.recommendation-title h3 { margin: .25rem 0 .06rem; font-size: .88rem; }
.recommendation-title > small { display: block; color: #7c8984; font-size: .57rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recommendation-admin-menu { display: flex; gap: .25rem; }
.recommendation-admin-menu form { margin: 0; }
.recommendation-admin-menu .icon-button { width: 31px; height: 31px; border-radius: 8px; }
p.recommendation-description { margin: 0; color: #62716b; font-size: .66rem; line-height: 1.55; }
.recommendation-benefit > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: rgba(35,117,87,.1); }
.recommendation-benefit > span:first-child svg { width: 15px; height: 15px; }
.recommendation-benefit > div { min-width: 0; }
.recommendation-benefit > div strong { display: block; color: #28624e; font-size: .65rem; }
.recommendation-benefit > div p { margin: .1rem 0 0; color: #4f7064; font-size: .63rem; }
.recommendation-personal-note strong { display: block; margin-bottom: .15rem; color: #846720; font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.recommendation-personal-note p { margin: 0; color: #625330; font-size: .64rem; }
.recommendation-price-note { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .65rem; border: 1px solid #dfe7e3; border-radius: 9px; background: #f8faf9; }
.recommendation-price-note strong { color: #43564e; font-size: .61rem; white-space: nowrap; }
.recommendation-price-note span { color: #78857f; font-size: .6rem; }
.affiliate-disclosure { display: flex; align-items: flex-start; gap: .4rem; }
.affiliate-disclosure svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .02rem; }
.recommendation-provider-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.choice-indicator { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid #b9c6c0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #fff; }
.recommendation-choice.selected .choice-indicator,
.recommendation-choice:has(input:checked) .choice-indicator { border-color: var(--primary); background: var(--primary); }
.recommendation-response-note { margin-top: .15rem; }
.recommendation-admin-response-head,
.recommendation-admin-response-actions { display: flex !important; align-items: center; justify-content: space-between; gap: .45rem; }
.recommendation-admin-response-actions { margin-top: .5rem; justify-content: flex-start; }
.recommendation-admin-response-actions form { margin: 0; }
.recommendation-task-form { width: 100%; display: flex; align-items: center; gap: .4rem; }
.recommendation-task-form select { min-height: 34px; padding: .42rem .55rem; }
.recommendation-response-row-actions { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: .3rem; }
.recommendation-response-row-actions form { margin: 0; }
.recommendation-responses-section { margin-top: 1rem; }

#bank-details-modal .credential-secret-grid { margin-top: .75rem; }
#bank-details-modal .credential-secret-field textarea { min-height: 78px; }

@media (max-width: 1180px) {
    .recommendation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .payment-link-actions,
    .bank-account-actions { grid-column: 1 / 3; justify-content: flex-start; }
    .payment-link-actions .button,
    .bank-account-actions .button { flex: 1 1 auto; }
    .recommendation-task-form { align-items: stretch; flex-direction: column; }
    .recommendation-task-form .button { width: 100%; }
    .secret-clear-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .recommendation-provider-actions .button { width: 100%; }
    .recommendation-response-row-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
    .billing-safety-grid > div { align-items: center; }
}

/* v1.5.1 workflow refinements */
.cost-billing-next-step {
    padding: .75rem;
    border: 1px solid #d8c383;
    border-radius: 11px;
    background: linear-gradient(145deg, #fffdf8, #fff8e8);
}
.cost-billing-next-step strong { color: #5f491d; }
.cost-billing-next-step small { color: #806a3a; }
.recommendation-response-note.is-required > span::after {
    content: " *";
    color: var(--danger);
}
.recommendation-response-note.is-required textarea {
    border-color: #d9aa55;
    background: #fffdf8;
}
select option[hidden] { display: none; }

/* v1.6.0 — isolated one-click customer account preview */
.preview-launch-form { margin: 0; display: inline-flex; }
.preview-launch-form .button { width: 100%; }
.preview-launch-form .button svg:last-child { width: 13px; height: 13px; opacity: .78; }
.client-card-actions-preview { align-items: stretch; }
.client-card-actions-preview .preview-launch-form { flex: 1 1 100%; }
.client-card-actions-preview .preview-launch-form .button { min-width: 0; }

.customer-preview-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 120;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .48rem 1rem;
    color: #fff;
    background: linear-gradient(105deg, #0b2f27 0%, #123f35 58%, #1d594a 100%);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 8px 24px rgba(8,35,29,.18);
}
.customer-preview-bar strong,
.customer-preview-bar span,
.customer-preview-bar small,
.customer-preview-bar p { color: #fff; }
.customer-preview-main,
.customer-preview-actions,
.customer-preview-title { display: flex; align-items: center; }
.customer-preview-main { min-width: 0; gap: .65rem; }
.customer-preview-main > div { min-width: 0; }
.customer-preview-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.12);
}
.customer-preview-icon svg { width: 17px; height: 17px; }
.customer-preview-title { gap: .45rem; }
.customer-preview-title strong { font-size: .72rem; letter-spacing: .01em; }
.customer-preview-main small {
    display: block;
    margin-top: .08rem;
    color: rgba(255,255,255,.7) !important;
    font-size: .58rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.customer-preview-badge {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: .18rem .42rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 99px;
    background: rgba(255,255,255,.1);
    color: #fff !important;
    font-size: .52rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .055em;
}
.customer-preview-actions { justify-content: flex-end; gap: .55rem; flex: 0 0 auto; }
.customer-preview-actions form { margin: 0; }
.customer-preview-hint { color: rgba(255,255,255,.68) !important; font-size: .57rem; }
.button-preview-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
}
.button-preview-ghost:hover { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.32); }

.app-shell.has-customer-preview { padding-top: 56px; }
.app-shell.has-customer-preview .sidebar { top: 56px; }
.app-shell.has-customer-preview .topbar { top: 56px; }
.has-customer-preview .anchor-nav { top: 150px; }
.has-customer-preview .task-side-column { top: 202px; }

@media (max-width: 980px) {
    .customer-preview-hint { display: none; }
}

@media (max-width: 680px) {
    .customer-preview-bar {
        min-height: 78px;
        align-items: stretch;
        padding: .48rem .65rem;
    }
    .customer-preview-main { flex: 1 1 auto; }
    .customer-preview-main small { max-width: 48vw; }
    .customer-preview-actions { gap: .35rem; }
    .customer-preview-actions .button { min-height: 34px; padding: .42rem .58rem; font-size: .65rem; }
    .customer-preview-actions > a { display: none; }
    .app-shell.has-customer-preview { padding-top: 78px; }
    .app-shell.has-customer-preview .sidebar { top: 78px; }
    .app-shell.has-customer-preview .topbar { top: 78px; }
    .has-customer-preview .anchor-nav { top: 150px; }
    .has-customer-preview .task-side-column { top: 188px; }
    .client-profile-actions .preview-launch-form { width: 100%; }
}

@media (max-width: 440px) {
    .customer-preview-bar { min-height: 84px; }
    .customer-preview-icon { display: none; }
    .customer-preview-title { gap: .3rem; flex-wrap: wrap; }
    .customer-preview-title strong { font-size: .66rem; }
    .customer-preview-main small { max-width: 50vw; font-size: .53rem; }
    .customer-preview-actions .button { padding-inline: .48rem; }
    .app-shell.has-customer-preview { padding-top: 84px; }
    .app-shell.has-customer-preview .sidebar { top: 84px; }
    .app-shell.has-customer-preview .topbar { top: 84px; }
    .has-customer-preview .anchor-nav { top: 156px; }
}

@media print {
    .customer-preview-bar { display: none !important; }
    .app-shell.has-customer-preview { padding-top: 0; }
}

/* =========================================================
   Smart Upload System — v1.7.0
   Unified pre-submit file review for every upload surface.
   ========================================================= */
.smart-uploader {
    position: relative;
    display: grid;
    gap: .55rem;
    width: 100%;
}
.smart-uploader-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    opacity: .01;
}
.smart-upload-dropzone {
    min-height: 122px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdfc, #f5f9f7);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.smart-upload-dropzone:hover,
.smart-upload-dropzone:focus-visible,
.smart-uploader.is-dragging .smart-upload-dropzone {
    border-color: var(--primary);
    background: rgba(18,63,53,.045);
    box-shadow: 0 0 0 3px rgba(18,63,53,.08);
}
.smart-uploader.is-dragging .smart-upload-dropzone { transform: translateY(-1px); }
.smart-uploader.has-validation-error .smart-upload-dropzone { border-color: var(--danger); background: var(--danger-soft); }
.smart-upload-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.smart-upload-icon svg { width: 21px; height: 21px; }
.smart-upload-copy { min-width: 0; display: flex; flex-direction: column; }
.smart-upload-copy strong { color: var(--ink); font-size: .82rem; letter-spacing: -.01em; }
.smart-upload-copy span { color: var(--muted); font-size: .7rem; margin-top: .12rem; }
.smart-upload-copy small { color: #8a9691; font-size: .62rem; margin-top: .24rem; }
.smart-upload-browse { align-self: center; }
.smart-upload-existing {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .62rem .72rem;
    border: 1px solid #cde2d8;
    border-radius: 10px;
    background: var(--success-soft);
}
.smart-upload-existing-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #d7eee4;
    color: var(--success);
}
.smart-upload-existing-icon svg { width: 15px; height: 15px; }
.smart-upload-existing > div { min-width: 0; display: flex; flex-direction: column; }
.smart-upload-existing strong { color: #28634e; font-size: .69rem; }
.smart-upload-existing span { color: #567269; font-size: .64rem; overflow-wrap: anywhere; }
.smart-upload-selection {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.smart-upload-selection[hidden], .smart-upload-errors[hidden], .smart-upload-progress[hidden] { display: none !important; }
.smart-upload-selection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .6rem .72rem;
    border-bottom: 1px solid var(--line);
    background: #f8faf9;
}
.smart-upload-selection-head > div { min-width: 0; display: flex; flex-direction: column; }
.smart-upload-selection-head strong { color: var(--ink); font-size: .7rem; }
.smart-upload-selection-head small { color: var(--muted); font-size: .6rem; }
.smart-upload-clear { font-size: .66rem; white-space: nowrap; }
.smart-upload-list { display: grid; }
.smart-upload-file {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: .65rem;
    min-height: 55px;
    padding: .5rem .65rem;
    border-bottom: 1px solid #edf1ef;
}
.smart-upload-file:last-child { border-bottom: 0; }
.smart-upload-file-visual {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: #eaf2ee;
    color: var(--primary);
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .035em;
}
.smart-upload-file-visual.has-preview { background: #eef2f0; }
.smart-upload-file-visual img { width: 100%; height: 100%; object-fit: cover; }
.smart-upload-file-main { min-width: 0; display: flex; flex-direction: column; }
.smart-upload-file-main strong { color: var(--ink); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smart-upload-file-main small { color: #85918c; font-size: .59rem; margin-top: .05rem; }
.smart-upload-ready {
    display: inline-flex;
    align-items: center;
    padding: .22rem .42rem;
    border-radius: 99px;
    background: var(--success-soft);
    color: var(--success);
    font-size: .56rem;
    font-weight: 800;
}
.smart-upload-remove { width: 30px; height: 30px; border-radius: 8px; }
.smart-upload-remove svg { width: 14px; height: 14px; }
.smart-upload-errors {
    display: grid;
    gap: .35rem;
    padding: .6rem .7rem;
    border: 1px solid #ecc6c6;
    border-radius: 10px;
    background: var(--danger-soft);
}
.smart-upload-error { color: #873737; font-size: .65rem; }
.smart-upload-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: .35rem; border-radius: 50%; background: #f5d7d7; font-weight: 900; }
.smart-upload-progress {
    position: relative;
    height: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 .7rem;
    border-radius: 9px;
    background: #edf4f1;
    color: var(--primary);
}
.smart-upload-progress-bar {
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(18,63,53,.14), transparent);
    animation: smart-upload-progress 1.15s ease-in-out infinite;
}
.smart-upload-progress small { position: relative; z-index: 1; font-size: .61rem; font-weight: 750; }
@keyframes smart-upload-progress { to { left: 100%; } }
.smart-uploader.is-submitting { opacity: .88; }
.smart-uploader-compact .smart-upload-dropzone { min-height: 78px; padding: .68rem .75rem; }
.smart-uploader-compact .smart-upload-icon { width: 36px; height: 36px; border-radius: 10px; }
.smart-uploader-compact .smart-upload-icon svg { width: 17px; height: 17px; }
.smart-uploader-compact .smart-upload-copy span { display: none; }
.smart-uploader-compact .smart-upload-copy strong { font-size: .74rem; }
.smart-uploader-compact .smart-upload-copy small { font-size: .59rem; }
.smart-uploader-compact .smart-upload-file { min-height: 48px; }

@media (max-width: 680px) {
    .smart-upload-dropzone {
        min-height: 0;
        grid-template-columns: auto minmax(0,1fr);
        padding: .78rem;
        gap: .65rem;
    }
    .smart-upload-browse { grid-column: 1 / -1; width: 100%; }
    .smart-upload-icon { width: 40px; height: 40px; border-radius: 11px; }
    .smart-upload-copy span { font-size: .65rem; }
    .smart-upload-copy small { font-size: .58rem; }
    .smart-upload-file { grid-template-columns: auto minmax(0,1fr) auto; }
    .smart-upload-ready { display: none; }
    .smart-upload-selection-head { align-items: flex-start; }
    .smart-uploader-compact .smart-upload-copy span { display: block; }
}

/* ============================================================
   Portal collaboration, registrations and task command center
   Compact Premium — v1.8.0
   ============================================================ */

/* Shared v1.8 refinements */
.button-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 8px 18px rgba(184, 66, 66, .16);
}
.button-danger:hover {
    background: #a73737;
    border-color: #a73737;
    box-shadow: 0 12px 25px rgba(184, 66, 66, .22);
}
.button:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(209, 169, 95, .48);
    outline-offset: 3px;
}

/* Authentication shell */
.auth-body {
    background: #eef3f0;
}
.auth-shell-v18 {
    min-height: 100svh;
    grid-template-columns: minmax(440px, .92fr) minmax(560px, 1.08fr);
    background: #eef3f0;
}
.auth-brand-panel-v18 {
    min-height: 100svh;
    isolation: isolate;
    padding: clamp(1.5rem, 3.2vw, 3.75rem);
    background:
        radial-gradient(circle at 83% 14%, rgba(209, 169, 95, .24), transparent 28%),
        radial-gradient(circle at 15% 88%, rgba(78, 143, 122, .22), transparent 32%),
        linear-gradient(145deg, var(--primary) 0%, #0c342b 48%, #071f1a 100%);
}
.auth-brand-panel-v18::before {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 94%);
    opacity: .7;
}
.auth-brand-inner-v18 {
    min-height: calc(100svh - clamp(3rem, 6.4vw, 7.5rem));
    gap: clamp(1.5rem, 3vh, 2.6rem);
}
.auth-brand-logo {
    width: fit-content;
    padding: .45rem .55rem .45rem .45rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
}
.auth-brand-logo img,
.auth-brand-logo .brand-mark {
    width: 42px;
    height: 42px;
}
.auth-brand-logo strong { font-size: .88rem; }
.auth-brand-logo small { color: rgba(255,255,255,.58); opacity: 1; }
.auth-story {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(280px, 1.16fr);
    align-items: center;
    gap: clamp(1rem, 2.8vw, 2.7rem);
    margin: auto 0;
}
.auth-story-copy {
    position: relative;
    z-index: 3;
    max-width: 540px;
}
.auth-live-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    margin-bottom: 1rem;
    padding: .42rem .66rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.86);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}
.auth-live-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8bd5b7;
    box-shadow: 0 0 0 5px rgba(139,213,183,.12);
    animation: auth-live-pulse 2s ease-in-out infinite;
}
@keyframes auth-live-pulse {
    50% { box-shadow: 0 0 0 8px rgba(139,213,183,0); }
}
.auth-story h1 {
    max-width: 560px;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 4.2rem);
    line-height: .99;
    letter-spacing: -.058em;
}
.auth-story-copy > p {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: clamp(.82rem, 1.05vw, .98rem);
    line-height: 1.72;
}
.auth-visual {
    position: relative;
    min-width: 0;
    filter: drop-shadow(0 28px 52px rgba(3,16,13,.26));
}
.auth-visual > img {
    width: 100%;
    max-height: min(44vh, 470px);
    object-fit: contain;
    border-radius: 25px;
}
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 9% 8% 5%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(209,169,95,.2);
    filter: blur(45px);
}
.auth-visual-status {
    position: absolute;
    z-index: 2;
    min-width: 158px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .08rem .55rem;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 13px;
    background: rgba(255,255,255,.93);
    color: var(--ink);
    box-shadow: 0 18px 38px rgba(2,19,15,.2);
    backdrop-filter: blur(16px);
}
.auth-visual-status > span {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--success-soft);
    color: var(--success);
}
.auth-visual-status > span svg { width: 15px; height: 15px; }
.auth-visual-status strong { font-size: .68rem; }
.auth-visual-status small { color: #74817c; font-size: .55rem; }
.auth-visual-status-one { left: -5%; bottom: 12%; }
.auth-visual-status-two { right: -3%; top: 11%; }
.auth-visual-status-two > span { color: #805d20; background: #fff5df; }
.auth-benefits-v18 {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .65rem;
}
.auth-benefits-v18 > div {
    min-height: 76px;
    align-items: flex-start;
    padding: .72rem;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-benefits-v18 > div > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
.auth-benefits-v18 > div > span svg { width: 16px; height: 16px; }
.auth-benefits-v18 strong { font-size: .68rem; }
.auth-benefits-v18 small { margin-top: .1rem; font-size: .57rem; line-height: 1.42; }
.auth-grid-pattern {
    position: absolute;
    inset: auto -15% -22% 35%;
    z-index: 0;
    width: 70%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 50%;
    box-shadow:
        0 0 0 60px rgba(255,255,255,.018),
        0 0 0 120px rgba(255,255,255,.014),
        0 0 0 180px rgba(255,255,255,.01);
}
.auth-content-v18 {
    align-items: flex-start;
    padding: clamp(1rem, 2.8vw, 2.8rem);
    background:
        radial-gradient(circle at 100% 0, rgba(209,169,95,.12), transparent 26%),
        linear-gradient(160deg, #f8faf9 0%, #eef3f0 100%);
}
.auth-content-inner-v18 {
    max-width: 680px;
    margin: auto;
}
.auth-content-registration .auth-content-inner-v18 { max-width: 900px; }
.auth-mobile-head { display: none; }
.auth-language-row {
    min-height: 34px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: .8rem;
}
.auth-language-row .language-switch { box-shadow: 0 5px 16px rgba(17,49,41,.06); }
.auth-card {
    border-color: rgba(18,63,53,.1);
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 55px rgba(12,49,40,.11);
    backdrop-filter: blur(20px);
}
.login-card-v18 { max-width: 570px; padding: clamp(1.25rem, 3vw, 2.2rem); }
.auth-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .3rem;
    margin: 0 0 1.4rem;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f1f5f3;
}
.auth-mode-switch a {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .65rem;
    border-radius: 9px;
    color: #6f7e78;
    font-size: .72rem;
    font-weight: 800;
    transition: all var(--transition);
}
.auth-mode-switch a:hover { color: var(--primary); }
.auth-mode-switch a.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 4px 13px rgba(17,49,41,.08);
}
.auth-mode-switch a span {
    padding: .18rem .35rem;
    border-radius: 99px;
    background: #eaf2ee;
    color: var(--primary);
    font-size: .5rem;
    line-height: 1;
    text-transform: uppercase;
}
.auth-card-head-v18 { margin-bottom: 1.15rem; }
.auth-card-head-v18 h2,
.registration-card-head h2,
.registration-result-card h2 {
    margin-bottom: .48rem;
    font-size: clamp(1.52rem, 2.6vw, 2.05rem);
}
.auth-card-head-v18 p,
.registration-card-head p,
.registration-result-card > p {
    margin: 0;
    max-width: 640px;
    font-size: .78rem;
    line-height: 1.62;
}
.auth-form-v18 { gap: .85rem; }
.auth-form-v18 .field > span,
.registration-form .field > span { font-size: .7rem; }
.auth-form-v18 .field > span::after { content: ""; }
.auth-input-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon > svg.icon {
    position: absolute;
    left: .78rem;
    z-index: 2;
    width: 16px;
    height: 16px;
    color: #84918c;
    pointer-events: none;
}
.auth-input-icon > input,
.auth-input-icon > select {
    min-height: 48px;
    padding-left: 2.35rem;
    border-radius: 11px;
    background: #fbfcfc;
}
.auth-input-icon > input:hover,
.auth-input-icon > select:hover { border-color: #b9c9c2; }
.password-field.auth-input-icon { display: flex; }
.password-field.auth-input-icon > input {
    border-radius: 11px;
    padding-right: 3rem;
}
.password-field.auth-input-icon > button {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: 3;
    width: 44px;
    border: 0;
    border-left: 1px solid #e4eae7;
    border-radius: 0 10px 10px 0;
    background: transparent;
}
.auth-submit-button { margin-top: .18rem; }
.auth-security-line {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .9rem;
    padding: .7rem .78rem;
    border: 1px solid #d8e5df;
    border-radius: 11px;
    background: #f5faf7;
}
.auth-security-line > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e6f1eb;
    color: var(--success);
}
.auth-security-line > span svg { width: 14px; height: 14px; }
.auth-security-line p { display: flex; flex-direction: column; margin: 0; }
.auth-security-line strong { color: #315548; font-size: .67rem; }
.auth-security-line small { color: #70817a; font-size: .58rem; }
.login-register-callout {
    margin-top: 1.1rem;
    padding: .85rem;
    border: 1px solid #ead9b5;
    border-radius: 14px;
    background: linear-gradient(145deg, #fffdf9, #fff8e9);
}
.login-register-callout > div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .65rem;
    align-items: center;
    margin-bottom: .72rem;
}
.login-register-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f5e7c7;
    color: #7a591e;
}
.login-register-icon svg { width: 16px; height: 16px; }
.login-register-callout p { display: flex; flex-direction: column; margin: 0; }
.login-register-callout strong { color: #5d471d; font-size: .72rem; }
.login-register-callout small { margin-top: .12rem; color: #827256; font-size: .61rem; line-height: 1.45; }
.login-help-v18 {
    position: relative;
    margin-top: .85rem;
    padding: .72rem;
    background: transparent;
    border-style: dashed;
}
.login-help-v18 > span { width: 31px; height: 31px; }
.login-help-v18 p { min-width: 0; }
.login-help-v18 small { overflow-wrap: anywhere; }
.login-help-v18 > a {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 9px;
    background: #edf4f1;
}
.auth-footer-v18 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
    padding: 0 .35rem;
    text-align: left;
}
.auth-footer-v18 a { color: var(--primary); font-weight: 750; }

/* Public registration */
.registration-page-shell { display: flex; flex-direction: column; gap: 1rem; }
.registration-page-shell > .auth-mode-switch { width: min(100%, 570px); margin: 0 auto; }
.registration-card { padding: clamp(1.2rem, 2.8vw, 2rem); }
.registration-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.15rem;
}
.registration-card-head > div { min-width: 0; }
.registration-review-badge {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .68rem;
    border: 1px solid #cee1d7;
    border-radius: 11px;
    background: #f3f9f6;
    color: var(--success);
}
.registration-review-badge > svg { width: 19px; height: 19px; }
.registration-review-badge > span { display: flex; flex-direction: column; }
.registration-review-badge strong { font-size: .63rem; }
.registration-review-badge small { color: #74847d; font-size: .53rem; }
.registration-error-summary {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    border: 1px solid #edc8c8;
    border-radius: 12px;
    background: var(--danger-soft);
    color: #873737;
}
.registration-error-summary > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f6dede;
}
.registration-error-summary > span svg { width: 15px; height: 15px; }
.registration-error-summary strong { font-size: .72rem; }
.registration-error-summary ul { margin: .25rem 0 0; padding-left: 1rem; font-size: .63rem; }
.registration-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .85rem;
}
.registration-form textarea { min-height: 94px; background: #fbfcfc; }
.registration-form .field > span b { color: var(--danger); }
.registration-form .field small { font-size: .59rem; }
.registration-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.registration-consent,
.registration-project-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1rem;
    color: #53635d;
    font-size: .65rem;
    line-height: 1.5;
    cursor: pointer;
}
.registration-consent input,
.registration-project-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.registration-checkmark {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 21px;
    border: 1px solid #bbc9c3;
    border-radius: 6px;
    background: #fff;
    color: transparent;
    transition: all var(--transition);
}
.registration-checkmark svg { width: 12px; height: 12px; }
.registration-consent input:checked + .registration-checkmark,
.registration-project-check input:checked + .registration-checkmark {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.registration-consent a { color: var(--primary); font-weight: 800; text-decoration: underline; }
.registration-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.registration-data-note {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.registration-data-note > svg { width: 19px; height: 19px; color: var(--success); }
.registration-data-note > span { display: flex; flex-direction: column; }
.registration-data-note strong { color: #41564d; font-size: .63rem; }
.registration-data-note small { color: #7a8882; font-size: .55rem; }
.registration-value-section,
.registration-flow-visual {
    overflow: hidden;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.2rem);
    border: 1px solid rgba(18,63,53,.09);
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 35px rgba(17,49,41,.075);
}
.registration-value-section {
    grid-template-columns: minmax(0,1.2fr) minmax(220px,.8fr);
    padding: clamp(1.15rem, 3vw, 2rem);
}
.registration-value-copy h3,
.registration-flow-visual h3 { font-size: clamp(1.18rem, 2vw, 1.55rem); }
.registration-value-copy > p,
.registration-flow-visual p { max-width: 620px; margin-bottom: 1rem; font-size: .72rem; line-height: 1.62; }
.registration-value-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .58rem;
}
.registration-value-list > div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .52rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid #e3ebe7;
    border-radius: 11px;
    background: #f8faf9;
}
.registration-value-list > div > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eaf2ee;
    color: var(--primary);
}
.registration-value-list svg { width: 14px; height: 14px; }
.registration-value-list p { display: flex; flex-direction: column; margin: 0; }
.registration-value-list strong { color: var(--ink); font-size: .65rem; }
.registration-value-list small { margin-top: .08rem; color: #788680; font-size: .55rem; line-height: 1.4; }
.registration-value-visual { align-self: stretch; display: grid; place-items: center; }
.registration-value-visual img { width: min(100%, 270px); max-height: 340px; object-fit: contain; }
.registration-flow-visual {
    grid-template-columns: minmax(210px,.72fr) minmax(0,1.28fr);
    padding: clamp(1rem, 2.8vw, 1.65rem);
}
.registration-flow-visual img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 15px;
}
.registration-login-link {
    margin: .15rem 0 0;
    color: #71807a;
    font-size: .67rem;
    text-align: center;
}
.registration-login-link a { color: var(--primary); font-weight: 800; }
.registration-result-card {
    max-width: 610px;
    margin: 0 auto;
    padding: clamp(1.35rem, 4vw, 2.5rem);
    text-align: center;
}
.registration-result-visual {
    position: relative;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 16px 30px rgba(18,63,53,.2);
}
.registration-result-visual > span { display: grid; place-items: center; }
.registration-result-visual svg { width: 27px; height: 27px; }
.registration-result-visual.muted { background: #75837d; }
.registration-pulse {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(35,117,87,.25);
    border-radius: 26px;
    animation: registration-pulse 2.2s ease-out infinite;
}
@keyframes registration-pulse {
    70%, 100% { transform: scale(1.25); opacity: 0; }
}
.registration-next-steps {
    display: grid;
    gap: .55rem;
    margin: 1.25rem 0;
    text-align: left;
}
.registration-next-steps > div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .65rem;
    align-items: center;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf9;
}
.registration-next-steps > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: .64rem;
    font-weight: 900;
}
.registration-next-steps p { display: flex; flex-direction: column; margin: 0; }
.registration-next-steps strong { color: var(--ink); font-size: .68rem; }
.registration-next-steps small { color: #74827c; font-size: .58rem; }

/* Dashboard registration notification */
.dashboard-registration-banner,
.registration-pending-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 15px;
    background: linear-gradient(135deg, #153f35, #092c24);
    color: #fff;
    box-shadow: 0 14px 34px rgba(12,49,40,.17);
}
.dashboard-registration-banner::after,
.registration-pending-banner::after {
    content: "";
    position: absolute;
    top: -80px;
    right: 13%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(209,169,95,.14);
}
.dashboard-registration-banner > *,
.registration-pending-banner > * { position: relative; z-index: 1; }
.dashboard-registration-icon,
.registration-pending-icon {
    position: relative;
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.11);
    color: var(--accent);
}
.dashboard-registration-icon svg,
.registration-pending-icon svg { width: 19px; height: 19px; }
.dashboard-registration-icon i,
.registration-pending-icon i {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid #123f35;
    border-radius: 50%;
    background: #f0c269;
}
.dashboard-registration-banner > span:nth-child(2),
.registration-pending-banner > span:nth-child(2) { display: flex; flex-direction: column; }
.dashboard-registration-banner small,
.registration-pending-banner small { color: rgba(255,255,255,.62); font-size: .59rem; }
.dashboard-registration-banner strong,
.registration-pending-banner strong { color: #fff; font-size: .76rem; }

/* Registration admin inbox */
.registration-admin-hero {
    position: relative;
    overflow: hidden;
    min-height: 235px;
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(230px,.75fr);
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1.15rem, 2.5vw, 1.75rem);
    border-radius: 20px;
    background:
        radial-gradient(circle at 86% 20%, rgba(209,169,95,.2), transparent 29%),
        linear-gradient(135deg, var(--primary), #082b23);
    box-shadow: 0 20px 45px rgba(12,49,40,.18);
}
.registration-admin-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .34;
}
.registration-admin-hero-copy,
.registration-admin-hero-visual { position: relative; z-index: 1; }
.registration-admin-hero-copy h2 {
    max-width: 680px;
    margin-bottom: .55rem;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
}
.registration-admin-hero-copy > p {
    max-width: 690px;
    margin-bottom: .85rem;
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    line-height: 1.62;
}
.registration-admin-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.registration-admin-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .55rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    font-size: .59rem;
    font-weight: 750;
}
.registration-admin-hero-meta svg { width: 14px; height: 14px; color: var(--accent); }
.registration-admin-hero-visual {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.registration-admin-hero-visual img {
    width: min(100%, 250px);
    max-height: 225px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.18));
    transform: translateY(22px);
}
.registration-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .7rem;
    margin-bottom: .85rem;
}
.registration-stat-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .65rem;
    min-height: 76px;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.registration-stat-card:hover,
.registration-stat-card.active {
    transform: translateY(-2px);
    border-color: #b8cbc2;
    box-shadow: 0 12px 26px rgba(17,49,41,.1);
}
.registration-stat-card > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf4f1;
    color: var(--primary);
}
.registration-stat-card > span svg { width: 18px; height: 18px; }
.registration-stat-card > div { display: flex; flex-direction: column; }
.registration-stat-card small { color: #7b8983; font-size: .59rem; }
.registration-stat-card strong { color: var(--ink); font-size: 1.18rem; line-height: 1.1; }
.registration-stat-pending > span { color: #88621e; background: #fff5df; }
.registration-stat-approved > span { color: var(--success); background: var(--success-soft); }
.registration-stat-rejected > span { color: var(--danger); background: var(--danger-soft); }
.registration-admin-filter-card { margin-bottom: .85rem; padding: .7rem; }
.registration-admin-filter {
    display: grid;
    grid-template-columns: minmax(230px,1fr) minmax(150px,.32fr) auto auto;
    gap: .55rem;
    align-items: center;
}
.registration-admin-filter .search-field,
.registration-admin-filter select { min-width: 0; }
.registration-request-list { display: flex; flex-direction: column; gap: .85rem; }
.registration-request-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(17,49,41,.065);
}
.registration-request-card.status-pending { border-color: #e2d3ad; }
.registration-request-card.status-approved { border-color: #c8dfd4; }
.registration-request-card.status-rejected { border-color: #e4d2d2; }
.registration-request-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fafcfb);
}
.registration-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.registration-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--primary), #276d5b);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(18,63,53,.16);
}
.registration-person > div { min-width: 0; }
.registration-person-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.registration-person-title h3 { margin: 0; font-size: .91rem; }
.registration-person-title > span {
    padding: .2rem .38rem;
    border-radius: 7px;
    background: #edf3f0;
    color: #5f7068;
    font-size: .54rem;
    font-weight: 750;
}
.registration-person p { margin: .12rem 0 0; color: #73817b; font-size: .62rem; overflow-wrap: anywhere; }
.registration-person p a:hover { color: var(--primary); text-decoration: underline; }
.registration-request-state { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }
.registration-request-state small { color: #87938e; font-size: .55rem; }
.registration-request-body {
    display: grid;
    grid-template-columns: minmax(0,1.42fr) minmax(280px,.58fr);
    min-width: 0;
}
.registration-request-summary { min-width: 0; padding: 1rem; }
.registration-info-block {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .65rem;
    align-items: start;
    padding: .78rem;
    border: 1px solid #e1e9e5;
    border-radius: 12px;
    background: #f8faf9;
}
.registration-info-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eaf2ee;
    color: var(--primary);
}
.registration-info-icon svg { width: 16px; height: 16px; }
.registration-info-block small { color: #82908a; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.registration-info-block p { margin: .2rem 0 0; color: #405149; font-size: .68rem; line-height: 1.55; overflow-wrap: anywhere; }
.registration-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .55rem;
    margin-top: .7rem;
}
.registration-contact-grid > div {
    min-width: 0;
    padding: .62rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.registration-contact-grid small,
.registration-contact-grid strong,
.registration-contact-grid a { display: block; }
.registration-contact-grid small { color: #87938e; font-size: .52rem; }
.registration-contact-grid strong,
.registration-contact-grid a {
    margin-top: .12rem;
    color: #42544c;
    font-size: .61rem;
    font-weight: 780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.registration-contact-grid a { color: var(--primary); }
.registration-contact-grid svg { width: 12px; height: 12px; vertical-align: middle; }
.registration-tech-details,
.registration-reject-box {
    margin-top: .65rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}
.registration-tech-details > summary,
.registration-reject-box > summary {
    display: flex;
    align-items: center;
    gap: .42rem;
    padding: .62rem .68rem;
    color: #65756e;
    font-size: .6rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.registration-tech-details > summary::-webkit-details-marker,
.registration-reject-box > summary::-webkit-details-marker { display: none; }
.registration-tech-details > summary svg { width: 14px; height: 14px; }
.registration-tech-details dl { margin: 0; padding: 0 .68rem .68rem; }
.registration-tech-details dl > div {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    gap: .5rem;
    padding: .43rem 0;
    border-top: 1px solid #edf1ef;
}
.registration-tech-details dt { color: #82908a; font-size: .52rem; }
.registration-tech-details dd { min-width: 0; margin: 0; color: #4b5e55; font-size: .55rem; overflow-wrap: anywhere; }
.registration-tech-details a { color: var(--primary); font-weight: 750; }
.registration-delivery-status { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.registration-delivery-status span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .45rem;
    border-radius: 8px;
    font-size: .53rem;
    font-weight: 750;
}
.registration-delivery-status svg { width: 12px; height: 12px; }
.registration-delivery-status .ok { color: var(--success); background: var(--success-soft); }
.registration-delivery-status .warning { color: var(--warning); background: var(--warning-soft); }
.registration-delivery-status .muted { color: #77847f; background: #f0f3f1; }
.registration-decision-panel {
    min-width: 0;
    padding: .8rem;
    border-left: 1px solid var(--line);
    background: #f7faf8;
}
.registration-approve-box,
.registration-approved-box,
.registration-rejected-box {
    padding: .8rem;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    background: #fff;
}
.registration-approve-box h4,
.registration-approved-box h4,
.registration-rejected-box h4 { margin-bottom: .3rem; font-size: .82rem; }
.registration-approve-box > p,
.registration-approved-box > p,
.registration-rejected-box > p { margin-bottom: .65rem; font-size: .62rem; line-height: 1.5; }
.registration-approve-form { display: flex; flex-direction: column; gap: .65rem; }
.registration-approve-form .field > span { font-size: .62rem; }
.registration-approve-form select { min-height: 39px; font-size: .65rem; }
.registration-project-check {
    margin: 0;
    padding: .6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8faf9;
}
.registration-project-check > span:last-child { display: flex; flex-direction: column; }
.registration-project-check strong { color: #40534a; font-size: .62rem; }
.registration-project-check small { color: #7d8a84; font-size: .53rem; }
.registration-reject-box > summary { justify-content: space-between; }
.registration-reject-box > summary > span { display: flex; align-items: center; gap: .45rem; }
.registration-reject-box > summary > span > span { display: flex; flex-direction: column; }
.registration-reject-box > summary strong { color: var(--danger); font-size: .62rem; }
.registration-reject-box > summary small { font-size: .52rem; }
.registration-reject-box > summary > svg { width: 13px; height: 13px; transition: transform var(--transition); }
.registration-reject-box[open] > summary > svg { transform: rotate(90deg); }
.registration-reject-box > form { padding: .1rem .68rem .68rem; }
.registration-reject-box .field > span { font-size: .6rem; }
.registration-approved-box,
.registration-rejected-box { text-align: center; }
.registration-approved-icon,
.registration-rejected-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 0 auto .65rem;
    border-radius: 13px;
}
.registration-approved-icon { color: var(--success); background: var(--success-soft); }
.registration-rejected-icon { color: var(--danger); background: var(--danger-soft); }
.registration-approved-icon svg,
.registration-rejected-icon svg { width: 20px; height: 20px; }
.registration-admin-empty { min-height: 260px; display: grid; place-items: center; }

/* Registration settings */
.registration-settings-card { overflow: hidden; }
.registration-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .7rem;
    align-items: stretch;
}
.registration-settings-grid > * {
    margin: 0;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f9fbfa;
}
.registration-settings-grid .field input { background: #fff; }
.registration-settings-process {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--primary);
}
.registration-settings-process > svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 10px;
    background: #e8f1ed;
}
.registration-settings-process > span { display: flex; flex-direction: column; }
.registration-settings-process strong { font-size: .68rem; }
.registration-settings-process small { color: #77867f; font-size: .57rem; }
.registration-settings-preview {
    overflow: hidden;
    margin-top: .75rem;
    padding: .6rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f5f9f7;
}
.registration-settings-preview img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; }

/* Task command center */
.task-command-hero {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(350px,.65fr);
    align-items: center;
    gap: 1.2rem;
    margin-bottom: .8rem;
    padding: clamp(1.2rem, 2.6vw, 1.8rem);
    border-radius: 20px;
    background:
        radial-gradient(circle at 91% 16%, rgba(209,169,95,.23), transparent 25%),
        radial-gradient(circle at 70% 110%, rgba(83,151,129,.22), transparent 34%),
        linear-gradient(135deg, var(--primary), #082b23);
    box-shadow: 0 20px 48px rgba(12,49,40,.18);
}
.task-command-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, #000, transparent 88%);
}
.task-command-copy,
.task-command-overview { position: relative; z-index: 1; }
.task-command-copy h2 {
    max-width: 760px;
    margin-bottom: .55rem;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.4rem);
}
.task-command-copy > p {
    max-width: 770px;
    margin-bottom: 1rem;
    color: rgba(255,255,255,.69);
    font-size: .76rem;
    line-height: 1.65;
}
.task-command-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.task-command-overview {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .85rem;
    padding: .8rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(12px);
}
.task-command-ring {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    flex: 0 0 112px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--task-progress), rgba(255,255,255,.1) 0);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.task-command-ring::before {
    content: "";
    grid-area: 1 / 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #0d382f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.task-command-ring > span {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.task-command-ring strong { color: #fff; font-size: 1.55rem; line-height: 1; }
.task-command-ring small { margin-top: .2rem; color: rgba(255,255,255,.56); font-size: .54rem; text-transform: uppercase; letter-spacing: .07em; }
.task-command-phases { display: grid; gap: .34rem; min-width: 0; }
.task-command-phases > span {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .4rem;
    padding: .32rem .45rem;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.045);
}
.task-command-phases i { width: 7px; height: 7px; border-radius: 50%; background: #aebdb7; }
.task-command-phases .phase-approval i { background: #e2bb69; }
.task-command-phases .phase-work i { background: #73b7d4; }
.task-command-phases .phase-review i { background: #9daedd; }
.task-command-phases .phase-closed i { background: #70c29d; }
.task-command-phases small { overflow: hidden; font-size: .55rem; white-space: nowrap; text-overflow: ellipsis; }
.task-command-phases strong { color: #fff; font-size: .63rem; }
.task-stat-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(115px,1fr));
    gap: .5rem;
    margin-bottom: .8rem;
    overflow-x: auto;
    padding: .05rem .05rem .25rem;
    scrollbar-width: thin;
}
.task-stat-item {
    min-width: 115px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .5rem;
    min-height: 72px;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.task-stat-item:hover { transform: translateY(-2px); border-color: #b9cbc2; box-shadow: 0 10px 24px rgba(17,49,41,.09); }
.task-stat-item > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #edf4f1;
    color: var(--primary);
}
.task-stat-item > span svg { width: 15px; height: 15px; }
.task-stat-item > div {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 0 .3rem;
    align-items: baseline;
}
.task-stat-item small { overflow: hidden; color: #75847e; font-size: .53rem; white-space: nowrap; text-overflow: ellipsis; }
.task-stat-item strong { color: var(--ink); font-size: 1rem; line-height: 1; }
.task-stat-item em { grid-column: span 2; overflow: hidden; margin-top: .1rem; color: #929d98; font-size: .48rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.task-stat-item.attention > span,
.task-stat-item.overdue > span { color: var(--danger); background: var(--danger-soft); }
.task-stat-item.approval > span { color: #88621e; background: var(--warning-soft); }
.task-stat-item.work > span { color: var(--info); background: var(--info-soft); }
.task-stat-item.review > span { color: #546a9a; background: #eef1fa; }
.task-stat-item.unread > span { color: #7b5a1d; background: #fff4db; }
.task-toolbar-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,.68fr);
    gap: .7rem;
    align-items: start;
    margin-bottom: 1rem;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.task-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .35rem;
    padding: .25rem;
    border-radius: 11px;
    background: #f0f4f2;
}
.task-view-switch button {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .52rem;
    padding: .56rem .65rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #75837d;
    text-align: left;
    cursor: pointer;
}
.task-view-switch button > span:first-child {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.7);
}
.task-view-switch button svg { width: 15px; height: 15px; }
.task-view-switch button > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.task-view-switch strong { font-size: .64rem; }
.task-view-switch small { overflow: hidden; font-size: .51rem; white-space: nowrap; text-overflow: ellipsis; }
.task-view-switch button.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 5px 14px rgba(17,49,41,.09);
}
.task-view-switch button.active > span:first-child { background: #eaf2ee; }
.task-filter-disclosure {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fafcfb;
}
.task-filter-disclosure > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .68rem;
    color: #66766f;
    list-style: none;
    cursor: pointer;
}
.task-filter-disclosure > summary::-webkit-details-marker { display: none; }
.task-filter-disclosure > summary > span { display: inline-flex; align-items: center; gap: .4rem; }
.task-filter-disclosure > summary svg { width: 15px; height: 15px; }
.task-filter-disclosure > summary strong { font-size: .63rem; }
.task-filter-disclosure > summary em {
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--primary);
    color: #fff;
    font-size: .5rem;
    font-style: normal;
}
.task-filter-disclosure > summary > svg { transition: transform var(--transition); }
.task-filter-disclosure[open] > summary > svg { transform: rotate(90deg); }
.task-filter-v18 {
    display: grid;
    grid-template-columns: minmax(210px,1.4fr) repeat(3,minmax(135px,.7fr));
    gap: .55rem;
    padding: .65rem;
    border-top: 1px solid var(--line);
}
.task-filter-v18 .field > span { font-size: .58rem; }
.task-filter-v18 input,
.task-filter-v18 select { min-height: 38px; font-size: .65rem; }
.task-filter-checks {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.task-filter-checks label { position: relative; cursor: pointer; }
.task-filter-checks input { position: absolute; opacity: 0; pointer-events: none; }
.task-filter-checks span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .42rem .55rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: #697871;
    font-size: .58rem;
    font-weight: 750;
}
.task-filter-checks span svg { width: 13px; height: 13px; }
.task-filter-checks input:checked + span {
    border-color: #b9d3c7;
    background: #edf6f1;
    color: var(--primary);
}
.task-filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .45rem; }
.task-view-panel[hidden] { display: none !important; }
.task-view-panel.active { animation: task-view-in .22s ease-out; }
@keyframes task-view-in { from { opacity: 0; transform: translateY(4px); } }
.task-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .7rem;
    padding: 0 .1rem;
}
.task-section-heading h3 { margin-bottom: .18rem; font-size: 1.02rem; }
.task-section-heading p { margin: 0; max-width: 760px; font-size: .66rem; }
.task-result-count {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: .69rem;
    font-weight: 900;
}
.task-board-mobile-tip { display: inline-flex; align-items: center; gap: .3rem; color: #7a8882; font-size: .57rem; }
.task-board-mobile-tip svg { width: 13px; height: 13px; }
.task-empty-v18 { min-height: 310px; display: grid; place-items: center; }

/* Focus list */
.task-focus-list { display: flex; flex-direction: column; gap: .62rem; }
.task-focus-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 4px solid #85968e;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(17,49,41,.055);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.task-focus-card:hover {
    transform: translateY(-2px);
    border-color: #b7c9c0;
    box-shadow: 0 13px 30px rgba(17,49,41,.1);
}
.task-focus-card.priority-low { border-left-color: #8fa39a; }
.task-focus-card.priority-normal { border-left-color: var(--primary); }
.task-focus-card.priority-high { border-left-color: #d18b2e; }
.task-focus-card.priority-critical { border-left-color: var(--danger); }
.task-focus-card.requires-attention { background: linear-gradient(100deg, #fffdf7, #fff 24%); }
.task-focus-card.unread { box-shadow: 0 0 0 2px rgba(209,169,95,.18), 0 9px 24px rgba(17,49,41,.08); }
.task-focus-card.is-overdue::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, transparent 49%, rgba(184,66,66,.12) 50%);
    pointer-events: none;
}
.task-focus-main { display: block; padding: .78rem .85rem .62rem; }
.task-focus-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}
.task-focus-labels { min-width: 0; display: flex; align-items: center; gap: .42rem; flex-wrap: wrap; }
.task-action-badge,
.task-new-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .25rem .4rem;
    border-radius: 7px;
    font-size: .52rem;
    font-weight: 850;
}
.task-action-badge { color: #7e5c1d; background: #fff3d8; }
.task-action-badge svg { width: 12px; height: 12px; }
.task-new-badge { color: var(--primary); background: #eaf3ef; }
.task-new-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.task-focus-content {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(220px,.38fr);
    align-items: center;
    gap: .85rem;
    margin-top: .55rem;
}
.task-focus-title-block { min-width: 0; }
.task-focus-title-block h4 { margin: 0; font-size: .84rem; line-height: 1.34; }
.task-focus-context { display: flex; align-items: center; gap: .35rem .65rem; flex-wrap: wrap; margin-top: .32rem; }
.task-focus-context span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #788680;
    font-size: .55rem;
}
.task-focus-context svg { width: 12px; height: 12px; }
.task-focus-context .priority-text { font-weight: 800; }
.task-focus-context .priority-high { color: #a26c21; }
.task-focus-context .priority-critical { color: var(--danger); }
.task-focus-title-block > p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: .45rem 0 0;
    color: #62726a;
    font-size: .62rem;
    line-height: 1.52;
}
.task-next-action-box {
    min-width: 0;
    padding: .62rem .68rem;
    border: 1px solid #dce7e2;
    border-radius: 11px;
    background: #f6f9f7;
}
.task-next-action-box.active {
    border-color: #e6d2a5;
    background: #fff9ec;
}
.task-next-action-box small,
.task-next-action-box strong,
.task-next-action-box span { display: block; }
.task-next-action-box small { color: #84918c; font-size: .49rem; text-transform: uppercase; letter-spacing: .07em; }
.task-next-action-box strong {
    overflow: hidden;
    margin-top: .12rem;
    color: #354a41;
    font-size: .61rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}
.task-next-action-box span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .35rem;
    color: var(--primary);
    font-size: .53rem;
    font-weight: 800;
}
.task-next-action-box span svg { width: 12px; height: 12px; }
.task-focus-progress {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: .2rem;
    margin-top: .65rem;
}
.task-focus-progress i {
    height: 3px;
    border-radius: 99px;
    background: #e6ece9;
}
.task-focus-progress i.done { background: var(--primary); }
.task-focus-progress i.current { background: var(--accent); box-shadow: 0 0 0 2px rgba(209,169,95,.14); }
.task-focus-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .55rem .78rem;
    border-top: 1px solid #edf1ef;
    background: #fafcfb;
}
.task-focus-metrics { min-width: 0; display: flex; align-items: center; gap: .45rem .8rem; flex-wrap: wrap; }
.task-focus-metrics > span {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 .25rem;
    color: #788680;
    font-size: .54rem;
}
.task-focus-metrics > span svg { grid-row: span 2; width: 13px; height: 13px; }
.task-focus-metrics > span strong { color: #4e5f57; font-size: .57rem; }
.task-focus-metrics > span small { font-size: .49rem; }
.task-focus-metrics .task-due { display: inline-flex; }
.task-focus-metrics .task-due.soon { color: var(--warning); font-weight: 800; }
.task-focus-metrics .task-due.overdue { color: var(--danger); font-weight: 850; }
.task-focus-metrics .task-quote-metric { color: var(--primary); }
.task-focus-open {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border: 1px solid #dce5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--primary);
    transition: all var(--transition);
}
.task-focus-open:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.task-focus-open svg { width: 14px; height: 14px; }

/* Kanban v1.8 */
.task-board-phase-tabs { display: none; }
.task-board.task-board-v18 {
    grid-template-columns: repeat(5, minmax(240px,1fr));
    gap: .62rem;
}
.task-board-v18 .task-board-column {
    border-radius: 15px;
    background: #f1f5f3;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.task-board-v18 .task-board-column.column-request { background: #f1f5f3; }
.task-board-v18 .task-board-column.column-approval { background: #faf5e9; }
.task-board-v18 .task-board-column.column-work { background: #edf5f8; }
.task-board-v18 .task-board-column.column-review { background: #f0f3fa; }
.task-board-v18 .task-board-column.column-closed { background: #edf6f1; }
.task-board-v18 .task-board-column-head {
    min-height: 69px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    padding: .65rem;
}
.task-board-phase-icon {
    width: 31px !important;
    height: 31px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.82) !important;
    color: var(--primary) !important;
    box-shadow: 0 4px 10px rgba(17,49,41,.07) !important;
}
.task-board-phase-icon svg { width: 14px; height: 14px; }
.task-board-v18 .task-board-column-head > span:last-child {
    min-width: 24px;
    height: 24px;
}
.task-board-v18 .task-board-stack { min-height: 185px; padding: .52rem; gap: .48rem; }
.task-board-v18 .task-board-card {
    padding: .65rem;
    border-radius: 11px;
    border-left-width: 3px;
}
.task-board-v18 .task-board-card.requires-attention { background: linear-gradient(145deg, #fffdf7, #fff); }
.task-board-v18 .task-board-card h4 { margin: .45rem 0 .32rem; }
.task-board-context { display: flex; flex-direction: column; gap: .18rem; }
.task-board-context small {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    color: #74827c;
    font-size: .54rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-board-context svg { width: 11px; height: 11px; }
.task-board-next {
    margin-top: .48rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    background: #f5f8f6;
}
.task-board-next.active { background: #fff5df; }
.task-board-next small,
.task-board-next strong { display: block; }
.task-board-next small { color: #85918c; font-size: .46rem; text-transform: uppercase; letter-spacing: .06em; }
.task-board-next strong { margin-top: .08rem; color: #40534a; font-size: .55rem; line-height: 1.36; }
.task-board-v18 .task-board-card-foot { gap: .4rem; }
.task-board-v18 .task-board-card-foot > span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 1320px) {
    .auth-shell-v18 { grid-template-columns: minmax(390px,.82fr) minmax(530px,1.18fr); }
    .auth-story { grid-template-columns: minmax(0,1fr); }
    .auth-story-copy { max-width: 650px; }
    .auth-story h1 { font-size: clamp(1.85rem, 3.8vw, 3.3rem); }
    .auth-visual { max-width: 520px; margin: 0 auto; }
    .auth-visual > img { max-height: 34vh; }
    .auth-benefits-v18 { grid-template-columns: 1fr; }
    .auth-benefits-v18 > div { min-height: 0; }
    .task-command-hero { grid-template-columns: minmax(0,1fr) minmax(315px,.52fr); }
    .task-stat-strip { grid-template-columns: repeat(7, minmax(126px,1fr)); }
    .registration-contact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
    .auth-shell-v18 { grid-template-columns: minmax(330px,.7fr) minmax(500px,1.3fr); }
    .auth-brand-panel-v18 { padding: 1.4rem; }
    .auth-story { display: flex; flex-direction: column; align-items: stretch; }
    .auth-visual { width: 100%; }
    .auth-visual-status { display: none; }
    .auth-benefits-v18 > div:nth-child(3) { display: none; }
    .registration-request-body { grid-template-columns: 1fr; }
    .registration-decision-panel { border-top: 1px solid var(--line); border-left: 0; }
    .registration-decision-panel > * { max-width: 650px; margin-left: auto; margin-right: auto; }
    .task-command-hero { grid-template-columns: 1fr; min-height: 0; }
    .task-command-overview { max-width: 620px; }
    .task-toolbar-card { grid-template-columns: 1fr; }
    .task-filter-v18 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .task-filter-v18 .task-search-field { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
    .auth-shell-v18 { display: block; min-height: 100svh; }
    .auth-brand-panel-v18 { display: none; }
    .auth-content-v18 { min-height: 100svh; padding: 1rem; }
    .auth-content-inner-v18 { max-width: 720px; }
    .auth-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        margin-bottom: .75rem;
        padding: .65rem .7rem;
        border: 1px solid rgba(18,63,53,.09);
        border-radius: 13px;
        background: rgba(255,255,255,.82);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(14px);
    }
    .auth-mobile-head .brand img,
    .auth-mobile-head .brand-mark { width: 36px; height: 36px; }
    .auth-mobile-head .brand strong { font-size: .76rem; }
    .auth-mobile-head .brand small { font-size: .52rem; }
    .auth-mobile-secure {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .35rem .48rem;
        border-radius: 8px;
        background: #edf5f1;
        color: var(--success);
        font-size: .55rem;
        font-weight: 800;
    }
    .auth-mobile-secure svg { width: 13px; height: 13px; }
    .auth-language-row { margin-bottom: .65rem; }
    .registration-admin-hero { grid-template-columns: 1fr minmax(170px,.38fr); }
    .registration-admin-hero-visual img { max-height: 195px; }
    .registration-admin-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .registration-admin-filter { grid-template-columns: minmax(0,1fr) minmax(145px,.4fr) auto; }
    .registration-admin-filter > a { grid-column: 1 / -1; width: fit-content; }
    .task-focus-content { grid-template-columns: 1fr; }
    .task-next-action-box { max-width: none; }
}
@media (max-width: 720px) {
    .auth-content-v18 { padding: .65rem; }
    .auth-card { border-radius: 16px; }
    .auth-footer-v18 { flex-direction: column; justify-content: center; text-align: center; }
    .registration-card-head { flex-direction: column; }
    .registration-review-badge { width: 100%; min-width: 0; }
    .registration-form-grid { grid-template-columns: 1fr; }
    .registration-form-grid .field-span-2 { grid-column: auto; }
    .registration-submit-row { flex-direction: column; align-items: stretch; }
    .registration-submit-row .button { width: 100%; }
    .registration-data-note { justify-content: center; text-align: left; }
    .registration-value-section,
    .registration-flow-visual { grid-template-columns: 1fr; }
    .registration-value-visual { order: -1; max-height: 220px; overflow: hidden; }
    .registration-value-visual img { max-height: 240px; }
    .registration-flow-visual img { order: -1; }
    .dashboard-registration-banner,
    .registration-pending-banner { grid-template-columns: auto minmax(0,1fr); }
    .dashboard-registration-banner > .button,
    .registration-pending-banner > .button { grid-column: 1 / -1; width: 100%; }
    .registration-admin-hero { grid-template-columns: 1fr; min-height: 0; }
    .registration-admin-hero-visual { display: none; }
    .registration-admin-filter { grid-template-columns: 1fr 1fr; }
    .registration-admin-filter .search-field { grid-column: 1 / -1; }
    .registration-admin-filter > a { grid-column: auto; width: 100%; }
    .registration-request-head { align-items: flex-start; }
    .registration-request-state { flex: 0 0 auto; }
    .registration-person-title { display: block; }
    .registration-person-title > span { display: inline-block; margin-top: .18rem; }
    .registration-contact-grid { grid-template-columns: 1fr 1fr; }
    .registration-settings-grid { grid-template-columns: 1fr; }
    .task-command-hero { padding: 1rem; border-radius: 16px; }
    .task-command-overview { grid-template-columns: auto minmax(0,1fr); padding: .65rem; }
    .task-command-ring { width: 92px; height: 92px; flex-basis: 92px; }
    .task-command-ring::before { width: 72px; height: 72px; }
    .task-command-ring strong { font-size: 1.25rem; }
    .task-stat-strip { margin-right: -.65rem; padding-right: .65rem; }
    .task-toolbar-card { padding: .5rem; }
    .task-view-switch button { padding: .48rem; }
    .task-view-switch button > span:first-child { width: 27px; height: 27px; }
    .task-filter-v18 { grid-template-columns: 1fr; }
    .task-filter-v18 .task-search-field { grid-column: auto; }
    .task-section-heading { align-items: flex-start; }
    .task-board-mobile-tip { display: none; }
    .task-focus-main { padding: .7rem; }
    .task-focus-footer { align-items: flex-end; }
    .task-focus-metrics { gap: .4rem .6rem; }
    .task-focus-metrics .task-quote-metric { flex-basis: 100%; }
    .task-board-phase-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(105px,1fr));
        gap: .35rem;
        margin-bottom: .55rem;
        overflow-x: auto;
        padding: .05rem 0 .25rem;
        scrollbar-width: none;
    }
    .task-board-phase-tabs button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .4rem;
        min-height: 37px;
        padding: .45rem .5rem;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
        color: #71807a;
        font-size: .55rem;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
    }
    .task-board-phase-tabs button strong {
        min-width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: #edf2ef;
        color: var(--primary);
        font-size: .52rem;
    }
    .task-board-phase-tabs button.active {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff;
    }
    .task-board-phase-tabs button.active strong { background: rgba(255,255,255,.15); color: #fff; }
    .task-board.task-board-v18,
    .task-board.task-board-v18.compact {
        display: block;
        overflow: visible;
        padding: 0;
    }
    .task-board-v18 .task-board-column { display: none; }
    .task-board-v18 .task-board-column.mobile-active { display: block; }
}
@media (max-width: 520px) {
    .auth-mobile-head { align-items: flex-start; }
    .auth-mobile-secure { display: none; }
    .auth-mode-switch a { font-size: .65rem; }
    .login-card-v18,
    .registration-card,
    .registration-result-card { padding: 1rem; }
    .registration-value-list { grid-template-columns: 1fr; }
    .registration-value-section,
    .registration-flow-visual { border-radius: 16px; padding: 1rem; }
    .registration-admin-stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .registration-stat-card { min-height: 66px; padding: .6rem; }
    .registration-stat-card > span { width: 33px; height: 33px; }
    .registration-admin-filter { grid-template-columns: 1fr; }
    .registration-admin-filter .search-field,
    .registration-admin-filter > a { grid-column: auto; }
    .registration-request-head { flex-direction: column; }
    .registration-request-state { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
    .registration-contact-grid { grid-template-columns: 1fr; }
    .registration-tech-details dl > div { grid-template-columns: 1fr; gap: .1rem; }
    .task-command-actions { align-items: stretch; }
    .task-command-actions .button { flex: 1 1 100%; width: 100%; }
    .task-command-overview { grid-template-columns: 1fr; justify-items: center; }
    .task-command-phases { width: 100%; }
    .task-view-switch button { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .task-view-switch button > span:last-child small { display: none; }
    .task-focus-topline { align-items: flex-start; }
    .task-focus-topline > .badge { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
    .task-focus-context { gap: .28rem .5rem; }
    .task-focus-footer { align-items: center; }
    .task-focus-metrics > span small { display: none; }
    .task-focus-metrics > span { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-live-pill i,
    .registration-pulse,
    .task-view-panel.active { animation: none !important; }
    .task-focus-card,
    .registration-stat-card,
    .task-stat-item { transition: none; }
}

.task-detail-next-action {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .72rem;
    margin: .75rem 0;
    padding: .72rem .82rem;
    border: 1px solid #dbe6e1;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #f6faf8);
    box-shadow: var(--shadow-sm);
}
.task-detail-next-action.active {
    border-color: #e4cf9e;
    background: linear-gradient(145deg, #fffdf7, #fff7e7);
}
.task-detail-next-action.overdue { border-color: #e7bcbc; background: linear-gradient(145deg, #fff, #fff3f3); }
.task-detail-next-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eaf2ee;
    color: var(--primary);
}
.task-detail-next-action.active .task-detail-next-icon { background: #f6e6bf; color: #805d1d; }
.task-detail-next-action.overdue .task-detail-next-icon { background: var(--danger-soft); color: var(--danger); }
.task-detail-next-icon svg { width: 17px; height: 17px; }
.task-detail-next-action > div { min-width: 0; display: flex; flex-direction: column; }
.task-detail-next-action small { color: #83908b; font-size: .51rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.task-detail-next-action strong { margin-top: .08rem; color: #3b5047; font-size: .69rem; }
.task-detail-next-action em { margin-top: .08rem; color: #89641e; font-size: .55rem; font-style: normal; }
@media (max-width: 560px) {
    .task-detail-next-action { grid-template-columns: auto minmax(0,1fr); }
    .task-detail-next-action > .badge { grid-column: 2; justify-self: start; }
}

/* ============================================================
   Compact Premium Authentication Hero — v1.8.1
   Refined typography, contrast-safe portal preview and mobile hero
   ============================================================ */

@media (min-width: 881px) {
    .auth-page-login .auth-shell-v18 {
        grid-template-columns: minmax(610px, 1.06fr) minmax(500px, .94fr);
    }
    .auth-page-register .auth-shell-v18 {
        grid-template-columns: minmax(430px, .78fr) minmax(650px, 1.22fr);
    }
}

.auth-brand-panel-v18 {
    padding: clamp(1.25rem, 2.15vw, 2.65rem);
}
.auth-brand-inner-v18 {
    min-height: calc(100svh - clamp(2.5rem, 4.3vw, 5.3rem));
    gap: clamp(.9rem, 1.6vh, 1.45rem);
}
.auth-brand-logo {
    padding: .38rem .52rem .38rem .4rem;
    border-color: rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(5,31,25,.28);
}
.auth-brand-logo img,
.auth-brand-logo .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.auth-brand-logo strong { font-size: .8rem; }
.auth-brand-logo small { font-size: .53rem; letter-spacing: .045em; }

.auth-story {
    grid-template-columns: minmax(285px, .92fr) minmax(310px, 1.08fr);
    gap: clamp(.8rem, 1.65vw, 1.55rem);
    margin: auto 0;
}
.auth-page-register .auth-story {
    grid-template-columns: 1fr;
    gap: .8rem;
}
.auth-story-copy {
    max-width: 500px;
}
.auth-live-pill {
    gap: .4rem;
    margin-bottom: .55rem;
    padding: .34rem .54rem;
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.065);
    font-size: .56rem;
    letter-spacing: .07em;
}
.auth-live-pill i {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px rgba(139,213,183,.11);
}
.auth-story-copy > .eyebrow {
    display: block;
    margin-bottom: .38rem;
    color: rgba(226,236,231,.68) !important;
    font-size: .56rem;
    letter-spacing: .11em;
}
.auth-story h1,
.auth-story-title {
    max-width: 510px;
    margin: 0;
    color: #f7f5ef !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.45vw, 2.8rem);
    font-weight: 600;
    line-height: 1.055;
    letter-spacing: -.038em;
    text-wrap: balance;
}
.auth-story-title-line {
    display: block;
    color: inherit !important;
}
.auth-story-title-accent {
    color: #a9c4b6 !important;
}
.auth-story-rule {
    width: 72px;
    height: 2px;
    display: block;
    margin: .78rem 0 .72rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), rgba(209,169,95,.15));
}
.auth-story-copy > p {
    max-width: 465px;
    color: rgba(239,246,242,.76) !important;
    font-size: clamp(.73rem, .78vw, .86rem);
    line-height: 1.62;
}

.auth-visual {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: .32rem;
    border: 1px solid rgba(209,169,95,.16);
    border-radius: 27px;
    background: rgba(4,29,23,.17);
    filter: drop-shadow(0 24px 45px rgba(2,15,12,.25));
}
.auth-page-register .auth-visual {
    max-width: 420px;
}
.auth-visual > img {
    width: 100%;
    max-height: min(40vh, 410px);
    display: block;
    border-radius: 23px;
}
.auth-visual::after {
    inset: 14% 11% 8%;
    background: rgba(209,169,95,.13);
    filter: blur(52px);
}

/* Explicitly undo the generic dark-surface !important rule for light floating cards. */
.auth-brand-panel-v18 .auth-visual-status {
    min-width: 150px;
    padding: .58rem .66rem;
    border-color: rgba(212,225,219,.82);
    background: rgba(253,254,253,.97);
    box-shadow: 0 16px 35px rgba(1,17,13,.22);
}
.auth-brand-panel-v18 .auth-visual-status > span {
    width: 28px;
    height: 28px;
}
.auth-brand-panel-v18 .auth-visual-status strong {
    color: #173f35 !important;
    font-size: .62rem;
    line-height: 1.2;
}
.auth-brand-panel-v18 .auth-visual-status small {
    color: #66776f !important;
    font-size: .52rem;
    line-height: 1.3;
}
.auth-visual-status-one { left: -2.5%; bottom: 8%; }
.auth-visual-status-two { right: -1.5%; top: 9%; }

.auth-benefits-v18 {
    gap: .5rem;
}
.auth-benefits-v18 > div {
    min-height: 62px;
    gap: .55rem;
    padding: .58rem .62rem;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.auth-benefits-v18 > div > span {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
}
.auth-benefits-v18 strong { font-size: .6rem; }
.auth-benefits-v18 small { font-size: .51rem; line-height: 1.35; }

.auth-mobile-intro { display: none; }

@media (max-width: 1460px) and (min-width: 1101px) {
    .auth-page-login .auth-shell-v18 {
        grid-template-columns: minmax(600px, 1fr) minmax(500px, 1fr);
    }
    .auth-page-register .auth-shell-v18 {
        grid-template-columns: minmax(390px, .72fr) minmax(640px, 1.28fr);
    }
    .auth-story {
        grid-template-columns: minmax(270px, .9fr) minmax(290px, 1.1fr);
    }
    .auth-page-register .auth-story { grid-template-columns: 1fr; }
    .auth-story h1,
    .auth-story-title {
        font-size: clamp(1.82rem, 2.15vw, 2.35rem);
    }
    .auth-visual > img { max-height: min(35vh, 350px); }
    .auth-benefits-v18 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1100px) and (min-width: 881px) {
    .auth-page-login .auth-shell-v18,
    .auth-page-register .auth-shell-v18 {
        grid-template-columns: minmax(390px, .82fr) minmax(500px, 1.18fr);
    }
    .auth-brand-panel-v18 { padding: 1.2rem; }
    .auth-brand-inner-v18 { gap: .7rem; }
    .auth-story,
    .auth-page-register .auth-story {
        display: flex;
        flex-direction: column;
        gap: .65rem;
        margin: auto 0;
    }
    .auth-story-copy { max-width: none; }
    .auth-story h1,
    .auth-story-title {
        max-width: 390px;
        font-size: clamp(1.7rem, 2.8vw, 2.05rem);
    }
    .auth-story-rule { margin: .55rem 0; }
    .auth-story-copy > p { max-width: 420px; font-size: .7rem; }
    .auth-visual,
    .auth-page-register .auth-visual {
        width: min(100%, 390px);
        max-width: 390px;
        margin: 0 auto;
    }
    .auth-visual > img { max-height: 245px; }
    .auth-visual-status { display: none; }
    .auth-benefits-v18 {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: .4rem;
    }
    .auth-benefits-v18 > div:nth-child(3) { display: none; }
}

@media (max-width: 880px) {
    .auth-mobile-intro {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(165px,.38fr);
        align-items: center;
        gap: .7rem;
        margin-bottom: .72rem;
        padding: .9rem 1rem;
        border: 1px solid rgba(18,63,53,.13);
        border-radius: 17px;
        background:
            radial-gradient(circle at 92% 15%, rgba(209,169,95,.18), transparent 31%),
            linear-gradient(145deg, #123f35 0%, #0a2f27 60%, #08231d 100%);
        box-shadow: 0 15px 36px rgba(12,49,40,.14);
    }
    .auth-mobile-intro::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
        background-size: 30px 30px;
        mask-image: linear-gradient(90deg, #000, transparent 95%);
    }
    .auth-mobile-intro-copy,
    .auth-mobile-intro-visual { position: relative; z-index: 1; }
    .auth-live-pill-mobile {
        margin-bottom: .42rem;
        color: rgba(255,255,255,.78);
    }
    .auth-story-title-mobile {
        max-width: 430px;
        font-size: clamp(1.42rem, 4.4vw, 1.82rem);
        line-height: 1.05;
    }
    .auth-mobile-intro p {
        max-width: 500px;
        margin: .55rem 0 0;
        color: rgba(239,246,242,.72);
        font-size: .68rem;
        line-height: 1.5;
    }
    .auth-mobile-intro-visual {
        align-self: stretch;
        display: grid;
        place-items: center;
    }
    .auth-mobile-intro-visual img {
        width: min(100%, 210px);
        max-height: 155px;
        object-fit: contain;
        filter: drop-shadow(0 13px 24px rgba(0,0,0,.23));
    }
}

@media (max-width: 580px) {
    .auth-mobile-intro {
        grid-template-columns: 1fr;
        padding: .82rem .86rem;
        border-radius: 15px;
    }
    .auth-mobile-intro-visual { display: none; }
    .auth-story-title-mobile { font-size: clamp(1.32rem, 7.2vw, 1.68rem); }
    .auth-mobile-intro p { font-size: .65rem; }
    .auth-live-pill-mobile { font-size: .5rem; }
}

/* =========================================================
   v1.9.0 — Login Intelligence & professional demo portal
   ========================================================= */

/* Fixed, unmistakable but compact read-only demo indicator. */
.demo-portal-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 112;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    padding: .58rem clamp(.8rem, 2.1vw, 1.45rem);
    color: #fff;
    background:
        radial-gradient(circle at 88% -80%, rgba(209,169,95,.34), transparent 46%),
        linear-gradient(112deg, #082d25 0%, #123f35 58%, #1c5a4a 100%);
    border-bottom: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 9px 30px rgba(7,36,29,.22);
}
.demo-portal-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 88%);
}
.demo-portal-bar-main,
.demo-portal-bar-meta { position: relative; z-index: 1; }
.demo-portal-bar-main {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-width: 0;
}
.demo-portal-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    color: #f0cf8d;
    background: rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.demo-portal-icon svg { width: 20px; height: 20px; }
.demo-portal-bar-main > div {
    min-width: 0;
    display: grid;
    gap: .08rem;
}
.demo-portal-bar .eyebrow {
    margin: 0;
    color: #e4bd70;
    font-size: .57rem;
    letter-spacing: .14em;
}
.demo-portal-bar strong { color: #fff !important; }
.demo-portal-bar-main strong {
    display: block;
    overflow: hidden;
    font-size: .82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-portal-bar-main small {
    display: block;
    max-width: 720px;
    overflow: hidden;
    color: rgba(239,247,243,.68) !important;
    font-size: .63rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-portal-bar-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex: 0 0 auto;
}
.demo-portal-bar-meta > span:not(.badge) {
    min-width: 116px;
    padding: .38rem .55rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.075);
}
.demo-portal-bar-meta > span > small,
.demo-portal-bar-meta > span > strong { display: block; }
.demo-portal-bar-meta > span > small {
    margin-bottom: .05rem;
    color: rgba(255,255,255,.55) !important;
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.demo-portal-bar-meta > span > strong {
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-portal-bar .badge-warning {
    min-height: 36px;
    padding: .45rem .66rem;
    color: #ffe9b8;
    background: rgba(209,169,95,.15);
    border-color: rgba(241,208,139,.34);
}
.demo-portal-bar .badge svg { width: 14px; height: 14px; }

.customer-preview-bar + .demo-portal-bar { top: 56px; }
.impersonation-bar + .demo-portal-bar { top: 48px; }
.app-shell.has-demo-portal { padding-top: 72px; }
.app-shell.has-demo-portal .sidebar,
.app-shell.has-demo-portal .topbar { top: 72px; }
.app-shell.has-customer-preview.has-demo-portal { padding-top: 128px; }
.app-shell.has-customer-preview.has-demo-portal .sidebar,
.app-shell.has-customer-preview.has-demo-portal .topbar { top: 128px; }
.app-shell.has-impersonation.has-demo-portal { padding-top: 120px; }
.app-shell.has-impersonation.has-demo-portal .sidebar,
.app-shell.has-impersonation.has-demo-portal .topbar { top: 120px; }
.has-demo-portal .anchor-nav { top: 156px; }
.has-demo-portal .task-side-column { top: 208px; }
.has-customer-preview.has-demo-portal .anchor-nav { top: 212px; }
.has-customer-preview.has-demo-portal .task-side-column { top: 264px; }

/* Login activity command center. */
.login-activity-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(255px,.36fr);
    align-items: stretch;
    gap: .85rem;
    overflow: hidden;
    margin-bottom: .78rem;
    padding: .95rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(209,169,95,.22), transparent 32%),
        linear-gradient(135deg, #0b322a 0%, #123f35 58%, #1c594a 100%);
    box-shadow: 0 16px 40px rgba(12,49,40,.14);
}
.login-activity-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.login-activity-hero-main,
.login-activity-hero-side { position: relative; z-index: 1; }
.login-activity-hero-main { padding: .28rem .25rem; }
.login-activity-hero .eyebrow { margin-bottom: .28rem; color: #e4bd70; font-size: .58rem; }
.login-activity-hero h2 {
    max-width: 720px;
    margin: 0 0 .35rem;
    color: #fff;
    font-size: clamp(1.28rem, 2vw, 1.72rem);
    line-height: 1.08;
}
.login-activity-hero p {
    max-width: 810px;
    margin: 0;
    color: rgba(239,247,243,.76);
    font-size: .74rem;
    line-height: 1.55;
}
.login-activity-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin-top: .68rem;
}
.login-activity-hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .34rem .48rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    color: rgba(255,255,255,.84);
    background: rgba(255,255,255,.07);
    font-size: .6rem;
    font-weight: 720;
}
.login-activity-hero-badges svg { width: 14px; height: 14px; color: #e5bd70; }
.login-activity-hero-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .32rem;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background: rgba(4,25,20,.22);
    backdrop-filter: blur(8px);
}
.login-activity-hero-side > small { color: rgba(255,255,255,.56); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-activity-hero-side > strong { overflow-wrap: anywhere; color: #fff; font-size: .82rem; }
.login-activity-hero-side > .badge { align-self: flex-start; margin: .1rem 0 .25rem; }
.login-activity-hero-actions { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.login-activity-hero-actions .button { width: 100%; }
.login-activity-stats { margin-bottom: .78rem; }

.login-activity-layout {
    grid-template-columns: minmax(0,1.7fr) minmax(280px,.62fr);
    align-items: start;
    margin-bottom: .78rem;
}
.login-activity-layout > .card-span-2 { grid-column: auto; }
.login-notification-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .62rem; }
.login-notification-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg,#fff,#fbfcfc);
}
.login-notification-card.is-demo { background: linear-gradient(145deg,#f8faf9,#f1f6f3); border-style: dashed; }
.login-notification-card-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .68rem;
    border-bottom: 1px solid #edf2ef;
    background: rgba(244,248,246,.72);
}
.login-notification-card-head > div { min-width: 0; }
.login-notification-card-head strong,
.login-notification-card-head small { display: block; }
.login-notification-card-head strong { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.login-notification-card-head small { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.login-notification-form { display: grid; gap: .55rem; padding: .65rem; }
.login-notification-form .switch-row.compact { margin: 0; padding: .55rem; }
.login-notification-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.login-notification-fields input,
.login-notification-fields select { min-height: 39px; padding: .55rem .62rem; font-size: .72rem; }
.login-notification-fields .field > span { font-size: .68rem; }
.login-notification-fields .field small { font-size: .58rem; }
.login-notification-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .38rem; }
.login-notification-meta > span {
    position: relative;
    min-width: 0;
    padding: .48rem .45rem .45rem 1.65rem;
    border: 1px solid #e8eeeb;
    border-radius: 9px;
    background: #f8faf9;
}
.login-notification-meta > span > svg { position: absolute; left: .45rem; top: .5rem; width: 14px; height: 14px; color: var(--primary); }
.login-notification-meta small,
.login-notification-meta strong,
.login-notification-meta a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-notification-meta small { color: #7e8b86; font-size: .52rem; font-weight: 750; text-transform: uppercase; }
.login-notification-meta strong,
.login-notification-meta a { margin-top: .05rem; color: #33473f; font-size: .61rem; font-style: normal; font-weight: 750; }
.login-notification-meta a { color: var(--primary); }
.switch-row.disabled { cursor: not-allowed; opacity: .62; }

.login-demo-control {
    position: sticky;
    top: 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(209,169,95,.13), transparent 34%),
        #fff;
}
.has-demo-portal .login-demo-control { top: 168px; }
.login-demo-control .card-head { margin-bottom: .55rem; }
.demo-access-list { display: grid; gap: .42rem; margin-bottom: .65rem; }
.demo-access-list > div {
    display: grid;
    grid-template-columns: minmax(85px,.55fr) minmax(0,1fr);
    align-items: center;
    gap: .45rem;
    padding: .5rem;
    border: 1px solid #e7edea;
    border-radius: 10px;
    background: #f8faf9;
}
.demo-access-list > div > span strong,
.demo-access-list > div > span small { display: block; }
.demo-access-list > div > span strong { color: var(--primary); font-size: .7rem; }
.demo-access-list > div > span small { color: var(--muted); font-size: .55rem; }
.demo-access-password { border-color: #ead8b5 !important; background: #fffaf0 !important; }
.demo-copy { display: flex; min-width: 0; }
.demo-copy input { min-width: 0; min-height: 34px; padding: .42rem .5rem; border-radius: 8px 0 0 8px; font-size: .66rem; font-weight: 750; }
.demo-copy button { width: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 8px 8px 0; color: var(--primary); background: #fff; cursor: pointer; }
.demo-copy button svg { width: 15px; height: 15px; }
.login-demo-control .security-note.slim { margin: 0 0 .65rem; padding: .65rem; }
.login-demo-control .security-note p { font-size: .63rem; }
.login-demo-control .fine-print { margin: .5rem 0 0; text-align: center; font-size: .6rem; }

.login-history-card { overflow: hidden; }
.login-history-filter { margin-bottom: .65rem; padding: .58rem; border: 1px solid #e7edea; border-radius: 11px; background: #f8faf9; }
.login-history-filter .search-field { flex-basis: 240px; }
.login-history-filter > select { min-width: 145px; }
.login-history-filter input,
.login-history-filter select,
.login-history-filter .button { min-height: 38px; font-size: .68rem; }
.login-event-list { display: grid; gap: .45rem; }
.login-event-row {
    display: grid;
    grid-template-columns: minmax(185px,.72fr) minmax(0,1.55fr) minmax(145px,.55fr);
    align-items: center;
    gap: .65rem;
    padding: .62rem;
    border: 1px solid #e5ece8;
    border-radius: 12px;
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.login-event-row:hover { transform: translateY(-1px); border-color: #cbdad3; box-shadow: var(--shadow-sm); }
.login-event-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.login-event-identity > div { min-width: 0; }
.login-event-identity strong,
.login-event-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-event-identity strong { font-size: .72rem; }
.login-event-identity small { color: var(--muted); font-size: .57rem; }
.login-event-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .38rem; min-width: 0; }
.login-event-context > span { min-width: 0; padding: .4rem .46rem; border-radius: 8px; background: #f7faf8; }
.login-event-context small,
.login-event-context strong,
.login-event-context a,
.login-event-context em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-event-context small { color: #82908a; font-size: .5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.login-event-context strong,
.login-event-context a { color: #34473f; font-size: .62rem; font-weight: 750; }
.login-event-context a { display: flex; align-items: center; gap: .2rem; color: var(--primary); }
.login-event-context a svg { width: 12px; height: 12px; }
.login-event-context em { color: #7f8d87; font-size: .53rem; font-style: normal; }
.login-event-flags { display: flex; align-items: flex-end; justify-content: center; flex-direction: column; gap: .25rem; min-width: 0; }
.login-event-flags small { max-width: 100%; overflow: hidden; color: #7c8984; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }

/* Settings and account-management integration. */
.login-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.login-settings-grid .switch-row {
    align-self: stretch;
    padding: .72rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf9;
}
.login-settings-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding: .58rem;
    border: 1px dashed #cbd9d2;
    border-radius: 11px;
    background: #f7faf8;
}
.login-settings-flow > span { display: inline-flex; align-items: center; gap: .28rem; color: #42564e; font-size: .64rem; font-weight: 750; }
.login-settings-flow > svg { width: 13px; height: 13px; color: #9ba8a2; }
.login-settings-flow > span svg { width: 14px; height: 14px; color: var(--primary); }
.demo-settings-card { background: radial-gradient(circle at 100% 0, rgba(209,169,95,.12), transparent 35%), #fff; }
.settings-demo-console { margin-top: .72rem; overflow: hidden; }
.settings-demo-access-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.settings-demo-access-grid article {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: .55rem;
    min-width: 0;
    padding: .65rem;
    border: 1px solid #e5ece8;
    border-radius: 12px;
    background: #f8faf9;
}
.settings-demo-access-grid article > div { min-width: 0; }
.settings-demo-access-grid article strong,
.settings-demo-access-grid article small { display: block; }
.settings-demo-access-grid article strong { font-size: .72rem; }
.settings-demo-access-grid article small { margin: .04rem 0 .28rem; color: var(--muted); font-size: .56rem; }
.language-code { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); font-size: .61rem; font-weight: 900; }
.language-code svg { width: 16px; height: 16px; }
.demo-password-card { border-color: #ead9b8 !important; background: #fffaf0 !important; }
.settings-demo-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; margin-top: .65rem; }
.settings-demo-actions form { margin: 0; }
.account-card.is-demo { border-style: dashed; background: radial-gradient(circle at 100% 0, rgba(209,169,95,.12), transparent 32%), #fff; }
.account-badges { display: flex; align-items: center; justify-content: flex-end; gap: .28rem; flex-wrap: wrap; }
.account-username { display: block; margin-top: .08rem; color: var(--primary); font-size: .62rem; font-weight: 800; }
.account-login-details a { color: var(--primary); font-weight: 750; }

@media (max-width: 1280px) {
    .login-notification-grid { grid-template-columns: 1fr; }
    .settings-demo-access-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1050px) {
    .login-activity-layout { grid-template-columns: 1fr; }
    .login-demo-control,
    .has-demo-portal .login-demo-control { position: static; }
    .login-event-row { grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); }
    .login-event-flags { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding-left: 42px; }
}

@media (max-width: 860px) {
    .demo-portal-bar-main small { max-width: 430px; }
    .demo-portal-bar-meta > span:nth-child(2) { display: none; }
    .login-activity-hero { grid-template-columns: 1fr; }
    .login-activity-hero-side { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
    .login-activity-hero-side > small,
    .login-activity-hero-side > strong { grid-column: 1; }
    .login-activity-hero-side > .badge { grid-column: 2; grid-row: 1 / 3; }
    .login-activity-hero-actions { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .login-event-row { grid-template-columns: 1fr; }
    .login-event-context { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .login-event-flags { grid-column: auto; padding-left: 0; }
}

@media (max-width: 680px) {
    .demo-portal-bar { min-height: 78px; padding: .48rem .62rem; gap: .5rem; }
    .demo-portal-icon { width: 38px; height: 38px; border-radius: 11px; }
    .demo-portal-bar-main strong { max-width: 54vw; font-size: .7rem; }
    .demo-portal-bar-main small { display: none; }
    .demo-portal-bar-meta > span:not(.badge) { min-width: 92px; padding: .32rem .4rem; }
    .demo-portal-bar-meta .badge { min-height: 34px; padding: .38rem .48rem; font-size: .54rem; }
    .customer-preview-bar + .demo-portal-bar { top: 78px; }
    .impersonation-bar + .demo-portal-bar { top: 84px; }
    .app-shell.has-demo-portal { padding-top: 78px; }
    .app-shell.has-demo-portal .sidebar,
    .app-shell.has-demo-portal .topbar { top: 78px; }
    .app-shell.has-customer-preview.has-demo-portal { padding-top: 156px; }
    .app-shell.has-customer-preview.has-demo-portal .sidebar,
    .app-shell.has-customer-preview.has-demo-portal .topbar { top: 156px; }
    .app-shell.has-impersonation.has-demo-portal { padding-top: 162px; }
    .app-shell.has-impersonation.has-demo-portal .sidebar,
    .app-shell.has-impersonation.has-demo-portal .topbar { top: 162px; }
    .has-demo-portal .anchor-nav { top: 150px; }
    .has-demo-portal .task-side-column { top: 196px; }

    .login-activity-hero { padding: .78rem; border-radius: 15px; }
    .login-activity-hero h2 { font-size: 1.2rem; }
    .login-activity-hero p { font-size: .68rem; }
    .login-activity-hero-badges span:nth-child(2) { display: none; }
    .login-activity-hero-side { grid-template-columns: 1fr; }
    .login-activity-hero-side > .badge { grid-column: 1; grid-row: auto; justify-self: start; }
    .login-activity-hero-actions { grid-template-columns: 1fr; }
    .login-notification-fields,
    .login-settings-grid,
    .settings-demo-access-grid { grid-template-columns: 1fr; }
    .login-notification-meta { grid-template-columns: 1fr 1fr; }
    .login-notification-meta > span:first-child { grid-column: 1 / -1; }
    .demo-access-list > div { grid-template-columns: 1fr; }
    .login-history-filter { padding: .48rem; }
    .login-event-context { grid-template-columns: 1fr 1fr; }
    .login-event-context > span:last-child { grid-column: 1 / -1; }
    .settings-demo-actions { align-items: stretch; flex-direction: column; }
    .settings-demo-actions .button,
    .settings-demo-actions form,
    .settings-demo-actions form .button { width: 100%; }
}

@media (max-width: 480px) {
    .demo-portal-bar { min-height: 72px; }
    .demo-portal-bar-main { gap: .48rem; }
    .demo-portal-bar .eyebrow { font-size: .48rem; }
    .demo-portal-bar-main strong { max-width: 48vw; font-size: .64rem; }
    .demo-portal-bar-meta > span:not(.badge) { display: none; }
    .demo-portal-bar-meta .badge { max-width: 110px; white-space: normal; text-align: center; }
    .app-shell.has-demo-portal { padding-top: 72px; }
    .app-shell.has-demo-portal .sidebar,
    .app-shell.has-demo-portal .topbar { top: 72px; }
    .login-activity-hero-badges { display: grid; grid-template-columns: 1fr 1fr; }
    .login-activity-hero-badges span { justify-content: center; }
    .login-notification-card-head { grid-template-columns: auto minmax(0,1fr); }
    .login-notification-card-head > .badge { grid-column: 2; justify-self: start; }
    .login-notification-meta { grid-template-columns: 1fr; }
    .login-notification-meta > span:first-child { grid-column: auto; }
    .login-event-context { grid-template-columns: 1fr; }
    .login-event-context > span:last-child { grid-column: auto; }
}

@media print {
    .demo-portal-bar { display: none !important; }
    .app-shell.has-demo-portal,
    .app-shell.has-customer-preview.has-demo-portal,
    .app-shell.has-impersonation.has-demo-portal { padding-top: 0; }
}

/* ========================================================================== 
   v1.9.0 — Login Intelligence & protected multilingual demo portal
   ========================================================================== */

/* Demo presentation banner ------------------------------------------------ */
.demo-portal-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 125;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .58rem clamp(.8rem, 2.5vw, 1.55rem);
    color: #fff;
    border-bottom: 1px solid rgba(239, 219, 168, .25);
    background:
        radial-gradient(circle at 84% 10%, rgba(209, 169, 95, .24), transparent 28%),
        linear-gradient(115deg, #082d25 0%, #123f35 48%, #1c594a 100%);
    box-shadow: 0 8px 24px rgba(5, 29, 23, .2);
}
.demo-portal-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.demo-portal-bar-main,
.demo-portal-bar-meta {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.demo-portal-bar-main { gap: .72rem; flex: 1 1 auto; }
.demo-portal-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 12px;
    color: #f2d89c;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.demo-portal-icon svg { width: 18px; height: 18px; }
.demo-portal-bar-main > div {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: .55rem;
}
.demo-portal-bar-main .eyebrow {
    grid-column: 1;
    margin: 0;
    color: #e6c77f !important;
    font-size: .54rem;
    letter-spacing: .09em;
}
.demo-portal-bar-main strong {
    grid-column: 2;
    color: #fff !important;
    font-size: .78rem;
    line-height: 1.2;
}
.demo-portal-bar-main small {
    grid-column: 1 / -1;
    margin-top: .08rem;
    color: rgba(239,247,243,.72) !important;
    font-size: .62rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demo-portal-bar-meta {
    flex: 0 0 auto;
    gap: .65rem;
    padding-left: .9rem;
    border-left: 1px solid rgba(255,255,255,.13);
}
.demo-portal-bar-meta > span:not(.badge) {
    min-width: 90px;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}
.demo-portal-bar-meta small {
    color: rgba(240,247,244,.56) !important;
    font-size: .5rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.demo-portal-bar-meta strong {
    max-width: 180px;
    overflow: hidden;
    color: #fff !important;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-portal-bar-meta .badge-warning {
    min-height: 29px;
    color: #fff7e7;
    border-color: rgba(241,205,126,.3);
    background: rgba(209,169,95,.2);
}
.app-shell.has-demo-portal { padding-top: 66px; }
.app-shell.has-demo-portal .sidebar { top: 66px; }
.app-shell.has-demo-portal .topbar { top: 66px; }
.has-demo-portal .anchor-nav { top: 156px; }
.has-demo-portal .task-side-column { top: 205px; }
.is-demo-portal .sidebar {
    background:
        radial-gradient(circle at 25% 3%, rgba(209,169,95,.16), transparent 24%),
        linear-gradient(180deg, var(--primary), #082a23);
}
.is-demo-portal .nav-link.active::after {
    content: "DEMO";
    margin-left: auto;
    color: rgba(255,255,255,.58);
    font-size: .46rem;
    font-weight: 900;
    letter-spacing: .08em;
}

/* Login activity command centre ------------------------------------------- */
.login-activity-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(235px, .34fr);
    align-items: stretch;
    gap: 1rem;
    margin-bottom: .9rem;
    padding: clamp(1.05rem, 2.4vw, 1.55rem);
    border: 1px solid rgba(209,169,95,.18);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 87% 20%, rgba(209,169,95,.25), transparent 26%),
        radial-gradient(circle at 52% 120%, rgba(105,178,151,.16), transparent 38%),
        linear-gradient(135deg, #0a3028 0%, #123f35 58%, #1d5c4d 100%);
    box-shadow: 0 16px 36px rgba(18,63,53,.15);
}
.login-activity-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 84%);
}
.login-activity-hero-main,
.login-activity-hero-side { position: relative; z-index: 1; min-width: 0; }
.login-activity-hero-main { align-self: center; }
.login-activity-hero .eyebrow {
    color: #e6c77f !important;
    font-size: .58rem;
    letter-spacing: .1em;
}
.login-activity-hero h2 {
    max-width: 760px;
    margin: .18rem 0 .4rem;
    color: #fff !important;
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.login-activity-hero p {
    max-width: 820px;
    margin: 0;
    color: rgba(239,247,243,.78) !important;
    font-size: .76rem;
    line-height: 1.55;
}
.login-activity-hero-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .42rem;
    margin-top: .78rem;
}
.login-activity-hero-badges > span {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-height: 28px;
    padding: .3rem .52rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 99px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.07);
    font-size: .61rem;
    font-weight: 760;
}
.login-activity-hero-badges svg { width: 13px; height: 13px; color: #e8cb88; }
.login-activity-hero-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .42rem;
    padding: .9rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(3,27,21,.26);
    box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.login-activity-hero-side small { color: rgba(255,255,255,.58) !important; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.login-activity-hero-side > strong { max-width: 100%; overflow: hidden; color: #fff !important; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.login-activity-hero-side .badge { margin: .05rem 0 .2rem; }
.login-activity-hero-side .button-light { color: #123f35; background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.92); }

.login-activity-stats { margin: .8rem 0; }
.login-activity-stats .stat-card {
    min-height: 94px;
    padding: .82rem;
}
.login-activity-stats .stat-icon { width: 39px; height: 39px; border-radius: 11px; }
.login-activity-stats .stat-card strong { font-size: 1.4rem; }
.login-activity-stats a.stat-card:hover { transform: translateY(-2px); border-color: rgba(18,63,53,.27); box-shadow: 0 12px 27px rgba(18,63,53,.1); }

.login-activity-layout {
    grid-template-columns: minmax(0, 1fr) minmax(285px, 330px);
    align-items: start;
    margin-top: .9rem;
}
.login-account-control-card,
.login-history-card,
.login-demo-control { border-color: rgba(188,207,198,.8); }
.login-account-control-card .card-head { margin-bottom: .8rem; }
.login-account-control-card .card-head > div { max-width: 800px; }
.login-notification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
}
.login-notification-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: .82rem;
    border: 1px solid #dfe8e4;
    border-radius: 13px;
    background: linear-gradient(155deg, #fff, #f9fbfa);
    box-shadow: 0 5px 15px rgba(17,54,45,.045);
}
.login-notification-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), rgba(18,63,53,.16));
}
.login-notification-card.is-demo {
    border-color: #e9d8ae;
    background: linear-gradient(145deg, #fffdf8, #fbf6eb);
}
.login-notification-card.is-demo::before { background: linear-gradient(180deg, var(--accent), #e4c989); }
.login-notification-card-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .6rem;
    margin-bottom: .64rem;
}
.login-notification-card-head > div { min-width: 0; }
.login-notification-card-head strong,
.login-notification-card-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-notification-card-head strong { color: var(--ink); font-size: .79rem; }
.login-notification-card-head small { margin-top: .08rem; color: var(--muted); font-size: .62rem; }
.login-notification-form { display: grid; gap: .62rem; }
.login-notification-form .switch-row.compact { margin: 0; }
.login-notification-form .switch-row.disabled { cursor: not-allowed; opacity: .68; }
.login-notification-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .58rem;
}
.login-notification-fields input,
.login-notification-fields select { min-width: 0; font-size: .71rem; }
.login-notification-meta {
    display: grid;
    grid-template-columns: 1.2fr .55fr 1fr;
    gap: .4rem;
}
.login-notification-meta > span {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .28rem;
    padding: .48rem .5rem;
    border: 1px solid #e6ece9;
    border-radius: 9px;
    background: #fff;
}
.login-notification-meta svg { grid-row: 1 / 3; width: 13px; height: 13px; color: var(--primary); }
.login-notification-meta small { color: #829089; font-size: .53rem; }
.login-notification-meta strong,
.login-notification-meta a {
    min-width: 0;
    overflow: hidden;
    color: #29483e;
    font-size: .62rem;
    font-style: normal;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-notification-meta a:hover { color: var(--primary); text-decoration: underline; }

.login-demo-control {
    position: sticky;
    top: 101px;
    padding: 1rem;
    background:
        radial-gradient(circle at 100% 0, rgba(209,169,95,.16), transparent 30%),
        linear-gradient(160deg, #fff, #fbfcfb);
}
.login-demo-control .card-head { margin-bottom: .72rem; }
.demo-access-list { display: grid; gap: .48rem; }
.demo-access-list > div {
    display: grid;
    grid-template-columns: minmax(80px,.65fr) minmax(0,1fr);
    align-items: center;
    gap: .55rem;
    padding: .52rem;
    border: 1px solid #e2eae6;
    border-radius: 10px;
    background: rgba(255,255,255,.88);
}
.demo-access-list > div > span { min-width: 0; }
.demo-access-list strong,
.demo-access-list small { display: block; }
.demo-access-list strong { color: #29483e; font-size: .71rem; }
.demo-access-list small { color: #829089; font-size: .56rem; }
.demo-access-password { border-color: #ead9b2 !important; background: #fffaf0 !important; }
.demo-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) 31px;
}
.demo-copy input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: .38rem .45rem;
    border-radius: 8px 0 0 8px;
    font-size: .67rem;
    font-weight: 760;
}
.demo-copy button {
    width: 31px;
    min-height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #cfdcd6;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    color: var(--primary);
    background: #f5f8f6;
    cursor: pointer;
}
.demo-copy button:hover { background: #eaf2ee; }
.demo-copy button svg { width: 13px; height: 13px; }
.login-demo-control .security-note { margin: .65rem 0; }
.login-demo-actions { display: grid; gap: .46rem; }
.login-demo-actions form { margin: 0; }
.login-demo-control .fine-print { margin: .6rem 0 0; text-align: center; font-size: .59rem; }
.has-demo-portal .login-demo-control { top: 167px; }

.login-history-card { margin-top: 1rem; }
.login-history-head { align-items: center; }
.login-history-head-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.login-history-filter {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(175px,.9fr) minmax(175px,.85fr) minmax(165px,.8fr) auto auto;
    gap: .5rem;
    margin: .2rem 0 .8rem;
    padding: .68rem;
    border: 1px solid #e1e9e5;
    border-radius: 12px;
    background: #f8faf9;
}
.login-history-filter > * { width: 100%; min-width: 0; }
.login-history-filter .button { white-space: nowrap; }
.login-event-list {
    overflow: hidden;
    border: 1px solid #e0e8e4;
    border-radius: 12px;
    background: #fff;
}
.login-event-row {
    display: grid;
    grid-template-columns: minmax(185px,.7fr) minmax(390px,1.55fr) minmax(205px,.75fr);
    align-items: center;
    gap: .75rem;
    padding: .75rem .78rem;
    border-bottom: 1px solid #e8eeeb;
    transition: background .18s ease;
}
.login-event-row:last-child { border-bottom: 0; }
.login-event-row:hover { background: #f8fbf9; }
.login-event-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .58rem;
}
.login-event-identity > div { min-width: 0; }
.login-event-identity strong,
.login-event-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-event-identity strong { color: var(--ink); font-size: .74rem; }
.login-event-identity small { color: var(--muted); font-size: .6rem; }
.login-event-context {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(135px,.7fr) minmax(125px,.65fr) minmax(180px,1fr);
    gap: .45rem;
}
.login-event-context > span { min-width: 0; display: flex; flex-direction: column; }
.login-event-context small { margin-bottom: .08rem; color: #86938e; font-size: .51rem; text-transform: uppercase; letter-spacing: .045em; }
.login-event-context strong,
.login-event-context a,
.login-event-context em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-event-context strong,
.login-event-context a { color: #2a473e; font-size: .64rem; font-weight: 760; }
.login-event-context a { display: inline-flex; align-items: center; gap: .22rem; color: var(--primary); }
.login-event-context a svg { width: 11px; height: 11px; flex: 0 0 auto; }
.login-event-context em { margin-top: .05rem; color: #84908c; font-size: .56rem; font-style: normal; }
.login-event-flags { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.login-event-flags > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .24rem; }
.login-event-flags > small { max-width: 100%; color: #83908a; font-size: .55rem; line-height: 1.35; }

/* Settings and customer-account extensions -------------------------------- */
.login-notification-settings-card,
.demo-settings-card,
.settings-demo-console { position: relative; overflow: hidden; }
.login-notification-settings-card::before,
.demo-settings-card::before,
.settings-demo-console::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), rgba(18,63,53,.15));
}
.demo-settings-card::before,
.settings-demo-console::before { background: linear-gradient(180deg, var(--accent), #ead8ad); }
.login-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .7rem;
}
.login-settings-grid .switch-row,
.login-settings-grid .field {
    min-height: 100%;
    padding: .7rem;
    border: 1px solid #e0e8e4;
    border-radius: 11px;
    background: #f9fbfa;
}
.login-settings-grid .switch-row { align-items: flex-start; }
.login-settings-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    margin-top: .75rem;
    padding: .58rem;
    border: 1px dashed #cfded7;
    border-radius: 11px;
    background: #f6f9f7;
}
.login-settings-flow > span { display: inline-flex; align-items: center; gap: .25rem; color: #435b52; font-size: .62rem; font-weight: 760; text-align: center; }
.login-settings-flow > svg { width: 12px; height: 12px; color: #a3b2ac; }
.login-settings-flow > span svg { width: 13px; height: 13px; color: var(--primary); }
.inline-alert { margin: .7rem 0 0; }
.demo-settings-card > .switch-row { margin-bottom: .7rem; padding: .72rem; border: 1px solid #e9d9b7; border-radius: 11px; background: #fffaf1; }
.settings-demo-console { margin-top: 1rem; }
.settings-demo-access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .62rem;
}
.settings-demo-access-grid > article {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid #e0e8e4;
    border-radius: 11px;
    background: #fafcfb;
}
.settings-demo-access-grid .language-code {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), #2f6f5e);
    font-size: .63rem;
    font-weight: 900;
}
.settings-demo-access-grid .language-code svg { width: 15px; height: 15px; }
.settings-demo-access-grid article > div { min-width: 0; }
.settings-demo-access-grid strong,
.settings-demo-access-grid small { display: block; }
.settings-demo-access-grid strong { color: #29483e; font-size: .72rem; }
.settings-demo-access-grid small { margin: .04rem 0 .34rem; color: #83908a; font-size: .56rem; }
.settings-demo-access-grid .copy-field { grid-template-columns: minmax(0,1fr) 31px; }
.settings-demo-access-grid .copy-field input { min-height: 32px; padding: .38rem .45rem; font-size: .65rem; }
.settings-demo-access-grid .copy-field button { width: 31px; min-height: 32px; }
.settings-demo-access-grid .demo-password-card { border-color: #ead9b4; background: #fffaf1; }
.settings-demo-access-grid .demo-password-card .language-code { color: #795719; background: #f0dfba; }
.settings-demo-actions { display: flex; justify-content: space-between; align-items: center; gap: .65rem; margin-top: .75rem; }
.settings-demo-actions form { margin: 0; }

.account-card.is-demo { border-color: #ead9b3; background: linear-gradient(145deg, #fffdf8, #fffaf0); }
.account-badges { display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; justify-content: flex-end; }
.account-username { color: #48655a !important; font-weight: 760; }
.account-login-details { margin-top: .7rem; padding-top: .66rem; border-top: 1px solid #e5ece9; }
.account-login-details a { display: inline-flex; align-items: center; gap: .2rem; color: var(--primary); font-weight: 760; }
.account-login-details a svg { width: 11px; height: 11px; }
.account-actions { padding-top: .62rem; border-top: 1px solid #edf1ef; }

@media (max-width: 1260px) {
    .login-activity-stats.stat-grid.five { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .login-activity-stats .stat-card:nth-child(4),
    .login-activity-stats .stat-card:nth-child(5) { min-height: 86px; }
    .login-notification-grid { grid-template-columns: 1fr; }
    .login-history-filter { grid-template-columns: minmax(200px,1.2fr) repeat(3,minmax(150px,.8fr)) auto; }
    .login-history-filter .button-ghost { grid-column: 1 / -1; width: auto; justify-self: start; }
    .login-event-row { grid-template-columns: minmax(175px,.7fr) minmax(340px,1.4fr); }
    .login-event-flags { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: .36rem; border-top: 1px dashed #e2e9e6; }
    .settings-demo-access-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1050px) {
    .login-activity-hero { grid-template-columns: minmax(0,1fr) minmax(220px,.4fr); }
    .login-activity-layout { grid-template-columns: 1fr; }
    .login-demo-control { position: static; }
    .login-demo-control .demo-access-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .login-demo-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
    .demo-portal-bar { min-height: 78px; padding: .5rem .72rem; }
    .demo-portal-bar-main > div { display: block; }
    .demo-portal-bar-main .eyebrow,
    .demo-portal-bar-main strong,
    .demo-portal-bar-main small { display: block; }
    .demo-portal-bar-main small { max-width: 48vw; }
    .demo-portal-bar-meta > span:not(.badge) { display: none; }
    .demo-portal-bar-meta { padding-left: .55rem; }
    .app-shell.has-demo-portal { padding-top: 78px; }
    .app-shell.has-demo-portal .sidebar { top: 78px; }
    .app-shell.has-demo-portal .topbar { top: 78px; }
    .has-demo-portal .anchor-nav { top: 150px; }
    .has-demo-portal .task-side-column { top: 188px; }

    .login-activity-hero { grid-template-columns: 1fr; }
    .login-activity-hero-side { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
    .login-activity-hero-side small,
    .login-activity-hero-side > strong { grid-column: 1; }
    .login-activity-hero-side .badge { grid-column: 2; grid-row: 1 / 3; margin: 0; }
    .login-activity-hero-side .button { grid-column: 1 / -1; width: 100%; }
    .login-activity-stats.stat-grid.five { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .login-history-filter { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .login-history-filter .search-field { grid-column: 1 / -1; }
    .login-history-filter .button-ghost { grid-column: auto; justify-self: stretch; }
    .login-event-row { grid-template-columns: 1fr; gap: .55rem; }
    .login-event-context { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .login-event-flags { grid-column: auto; }
    .login-settings-grid { grid-template-columns: 1fr; }
    .login-settings-flow { align-items: stretch; flex-direction: column; }
    .login-settings-flow > svg { transform: rotate(90deg); align-self: center; }
}

@media (max-width: 680px) {
    .demo-portal-bar { min-height: 88px; align-items: stretch; gap: .45rem; }
    .demo-portal-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .demo-portal-bar-main { gap: .5rem; }
    .demo-portal-bar-main .eyebrow { font-size: .48rem; }
    .demo-portal-bar-main strong { font-size: .67rem; }
    .demo-portal-bar-main small { max-width: 56vw; font-size: .54rem; white-space: normal; line-height: 1.25; }
    .demo-portal-bar-meta { align-self: center; border-left: 0; padding-left: 0; }
    .demo-portal-bar-meta .badge { max-width: 86px; min-height: 34px; white-space: normal; text-align: center; font-size: .51rem; }
    .app-shell.has-demo-portal { padding-top: 88px; }
    .app-shell.has-demo-portal .sidebar { top: 88px; }
    .app-shell.has-demo-portal .topbar { top: 88px; }
    .has-demo-portal .anchor-nav { top: 160px; }
    .has-demo-portal .task-side-column { top: 194px; }

    .login-activity-hero { padding: .9rem; border-radius: 15px; }
    .login-activity-hero h2 { font-size: 1.35rem; }
    .login-activity-hero p { font-size: .7rem; }
    .login-activity-hero-badges { gap: .32rem; }
    .login-activity-hero-badges > span { min-height: 26px; padding: .26rem .42rem; font-size: .55rem; }
    .login-activity-hero-side { grid-template-columns: 1fr; }
    .login-activity-hero-side .badge { grid-column: 1; grid-row: auto; justify-self: start; }
    .login-activity-stats.stat-grid.five { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .login-activity-stats .stat-card { min-height: 84px; padding: .62rem; }
    .login-activity-stats .stat-card:last-child { grid-column: 1 / -1; }
    .login-activity-stats .stat-icon { width: 34px; height: 34px; }
    .login-activity-stats .stat-card strong { font-size: 1.12rem; }
    .login-account-control-card .card-head,
    .login-history-head { flex-direction: column; }
    .login-notification-card { padding: .72rem; }
    .login-notification-fields { grid-template-columns: 1fr; }
    .login-notification-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .login-notification-meta > span:first-child { grid-column: 1 / -1; }
    .login-demo-control .demo-access-list { grid-template-columns: 1fr; }
    .login-demo-actions { grid-template-columns: 1fr; }
    .login-history-head-actions { width: 100%; justify-content: space-between; }
    .login-history-filter { grid-template-columns: 1fr; }
    .login-history-filter .search-field,
    .login-history-filter .button-ghost { grid-column: auto; }
    .login-event-context { grid-template-columns: 1fr 1fr; }
    .login-event-context > span:last-child { grid-column: 1 / -1; }
    .login-event-flags { flex-direction: column; align-items: flex-start; }
    .login-event-flags > div { justify-content: flex-start; }
    .settings-demo-access-grid { grid-template-columns: 1fr; }
    .settings-demo-actions { align-items: stretch; flex-direction: column; }
    .settings-demo-actions .button,
    .settings-demo-actions form,
    .settings-demo-actions form .button { width: 100%; }
    .account-badges { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 430px) {
    .demo-portal-bar { min-height: 96px; }
    .demo-portal-bar-main small { max-width: 54vw; }
    .demo-portal-bar-meta .badge { max-width: 76px; }
    .app-shell.has-demo-portal { padding-top: 96px; }
    .app-shell.has-demo-portal .sidebar { top: 96px; }
    .app-shell.has-demo-portal .topbar { top: 96px; }
    .login-activity-stats.stat-grid.five { grid-template-columns: 1fr; }
    .login-activity-stats .stat-card:last-child { grid-column: auto; }
    .login-notification-card-head { grid-template-columns: auto minmax(0,1fr); }
    .login-notification-card-head > .badge { grid-column: 2; justify-self: start; }
    .login-notification-meta { grid-template-columns: 1fr; }
    .login-notification-meta > span:first-child { grid-column: auto; }
    .login-history-head-actions { align-items: stretch; flex-direction: column; }
    .login-history-head-actions .button { width: 100%; }
    .login-event-context { grid-template-columns: 1fr; }
    .login-event-context > span:last-child { grid-column: auto; }
}

@media print {
    .demo-portal-bar { display: none !important; }
    .app-shell.has-demo-portal { padding-top: 0 !important; }
}

/* v1.9.0 — Login Intelligence & multilingual read-only demo portal */
.login-activity-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .34fr);
    align-items: center;
    gap: 1.35rem;
    min-height: 190px;
    margin-bottom: 1rem;
    padding: clamp(1.25rem, 2.7vw, 2rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 92% 6%, rgba(209,169,95,.30), transparent 33%),
        linear-gradient(135deg, #0b3028 0%, var(--primary) 58%, #174f42 100%);
    box-shadow: var(--shadow-md);
}
.login-activity-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 29px 29px;
    mask-image: linear-gradient(90deg, transparent 0, #000 45%, #000 100%);
}
.login-activity-hero > * { position: relative; z-index: 1; }
.login-activity-hero .eyebrow { color: rgba(255,255,255,.66); }
.login-activity-hero h2 {
    max-width: 720px;
    margin-bottom: .48rem;
    color: #fff;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
}
.login-activity-hero p {
    max-width: 790px;
    margin-bottom: 0;
    color: rgba(244,250,247,.72);
    font-size: .84rem;
    line-height: 1.65;
}
.login-activity-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.login-activity-hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
    padding: .36rem .58rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 99px;
    color: rgba(255,255,255,.84);
    background: rgba(255,255,255,.07);
    font-size: .66rem;
    font-weight: 730;
}
.login-activity-hero-badges svg { width: 14px; height: 14px; color: #e4c989; }
.login-activity-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .46rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(4,29,23,.30);
    backdrop-filter: blur(8px);
}
.login-activity-hero-side small { color: rgba(255,255,255,.56); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.login-activity-hero-side strong { max-width: 100%; color: #fff; font-size: .87rem; overflow-wrap: anywhere; }
.login-activity-hero-side .badge { margin-bottom: .15rem; }
.login-activity-hero-side .button { margin-top: .18rem; }

.login-activity-stats { margin-top: 0; }
.login-activity-stats .stat-card { min-height: 96px; }
.login-activity-stats .stat-card-accent {
    border-color: rgba(209,169,95,.42);
    background: linear-gradient(145deg, #fff, #fffaf0);
}
.login-activity-stats .stat-card-accent .stat-icon { color: #7d5b1c; background: #fff1cf; }
.login-activity-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .34fr);
    align-items: start;
    margin-top: 1rem;
}
.login-account-control-card { min-width: 0; }
.login-notification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.login-notification-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
    box-shadow: 0 5px 18px rgba(17,49,41,.045);
}
.login-notification-card.is-demo {
    border-color: #bfd8e4;
    background: linear-gradient(180deg, #fff 0%, #f3f9fc 100%);
}
.login-notification-card-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .68rem;
    padding: .82rem .86rem;
    border-bottom: 1px solid #edf2ef;
}
.login-notification-card-head > div { min-width: 0; }
.login-notification-card-head strong,
.login-notification-card-head small { display: block; min-width: 0; }
.login-notification-card-head strong { color: #263d35; font-size: .79rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-notification-card-head small { margin-top: .08rem; color: #7b8883; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-notification-form { display: flex; flex-direction: column; gap: .68rem; padding: .76rem .86rem .86rem; }
.login-notification-form .switch-row { margin: -.15rem 0; padding: .35rem 0; }
.login-notification-form .switch-row.disabled { cursor: not-allowed; opacity: .7; }
.login-notification-fields { display: grid; grid-template-columns: 1fr; gap: .62rem; }
.login-notification-fields input,
.login-notification-fields select { min-height: 39px; padding-top: .55rem; padding-bottom: .55rem; font-size: .76rem; }
.login-notification-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .38rem;
}
.login-notification-meta > span {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "icon label" "icon value";
    column-gap: .38rem;
    align-items: center;
    padding: .48rem;
    border: 1px solid #e8efeb;
    border-radius: 10px;
    background: #f7faf8;
}
.login-notification-meta svg { grid-area: icon; width: 15px; height: 15px; color: var(--primary); }
.login-notification-meta small { grid-area: label; color: #84908c; font-size: .56rem; font-weight: 720; }
.login-notification-meta strong,
.login-notification-meta a { grid-area: value; min-width: 0; color: #344a42; font-size: .62rem; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-notification-meta a { color: var(--primary); }

.login-demo-control {
    position: sticky;
    top: 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(209,169,95,.16), transparent 35%),
        #fff;
}
.demo-access-list { display: flex; flex-direction: column; gap: .58rem; margin-bottom: .85rem; }
.demo-access-list > div {
    display: grid;
    grid-template-columns: minmax(90px,.6fr) minmax(0,1fr);
    align-items: center;
    gap: .65rem;
    padding: .58rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf9;
}
.demo-access-list > div > span strong,
.demo-access-list > div > span small { display: block; }
.demo-access-list > div > span strong { color: #30483f; font-size: .7rem; }
.demo-access-list > div > span small { color: #82908a; font-size: .58rem; }
.demo-access-list .demo-access-password { border-color: #dfcc9f; background: #fffaf0; }
.demo-copy { display: flex; min-width: 0; }
.demo-copy input { min-width: 0; min-height: 36px; padding: .48rem .58rem; border-radius: 8px 0 0 8px; background: #fff; font-size: .68rem; font-weight: 760; }
.demo-copy button { width: 36px; display: grid; place-items: center; flex: 0 0 36px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 8px 8px 0; color: var(--primary); background: #fff; cursor: pointer; }
.demo-copy button svg { width: 15px; height: 15px; }
.login-demo-actions { display: grid; gap: .55rem; }
.login-demo-actions form { margin: 0; }
.login-demo-control .fine-print { margin: .7rem 0 0; text-align: center; font-size: .62rem; }

.login-history-card { margin-top: 1rem; }
.login-history-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.login-history-filter { padding: .72rem; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }
.login-history-filter .search-field { flex: 1 1 240px; }
.login-history-filter select { min-width: 165px; }
.login-event-list { display: flex; flex-direction: column; gap: .56rem; }
.login-event-row {
    display: grid;
    grid-template-columns: minmax(220px,.8fr) minmax(420px,1.45fr) minmax(190px,.55fr);
    align-items: center;
    gap: .8rem;
    padding: .72rem .78rem;
    border: 1px solid #e3ebe7;
    border-radius: 12px;
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.login-event-row:hover { transform: translateY(-1px); border-color: #cad9d2; box-shadow: var(--shadow-sm); }
.login-event-identity { min-width: 0; display: flex; align-items: center; gap: .62rem; }
.login-event-identity > div { min-width: 0; }
.login-event-identity strong,
.login-event-identity small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-event-identity strong { color: #2d433b; font-size: .75rem; }
.login-event-identity small { margin-top: .08rem; color: #7d8b85; font-size: .61rem; }
.login-event-context { display: grid; grid-template-columns: .8fr .72fr 1.25fr; gap: .55rem; min-width: 0; }
.login-event-context > span { min-width: 0; padding-left: .55rem; border-left: 1px solid #e8efeb; }
.login-event-context small,
.login-event-context strong,
.login-event-context a,
.login-event-context em { display: block; min-width: 0; }
.login-event-context small { color: #89958f; font-size: .55rem; font-weight: 750; }
.login-event-context strong,
.login-event-context a { margin-top: .05rem; color: #395048; font-size: .65rem; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-event-context a { color: var(--primary); }
.login-event-context a svg { width: 12px; height: 12px; vertical-align: -2px; }
.login-event-context em { margin-top: .05rem; color: #81908a; font-size: .57rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-event-flags { min-width: 0; text-align: right; }
.login-event-flags > div { display: flex; justify-content: flex-end; gap: .28rem; flex-wrap: wrap; }
.login-event-flags > small { display: block; margin-top: .3rem; color: #7d8a85; font-size: .55rem; overflow-wrap: anywhere; }

.login-notification-settings-card,
.demo-settings-card,
.settings-demo-console { position: relative; overflow: hidden; }
.login-notification-settings-card::before,
.demo-settings-card::before,
.settings-demo-console::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -120px;
    top: -135px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(209,169,95,.18), transparent 68%);
}
.login-settings-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .85rem 1rem;
}
.login-settings-grid .switch-row { min-height: 82px; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.login-settings-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, auto);
    align-items: center;
    justify-content: start;
    gap: .45rem;
    margin-top: 1rem;
    padding: .7rem;
    border: 1px solid #dbe6e1;
    border-radius: 12px;
    background: linear-gradient(90deg,#f7faf8,#fff);
    overflow-x: auto;
}
.login-settings-flow > span { display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap; color: #40554d; font-size: .65rem; font-weight: 750; }
.login-settings-flow > svg { width: 14px; height: 14px; color: #a38a56; }
.demo-settings-card { border-color: #cbdde4; background: linear-gradient(145deg,#fff,#f5fafc); }
.settings-demo-console { margin-top: 1rem; border-color: #d6dfdb; }
.settings-demo-access-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.settings-demo-access-grid article {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8faf9;
}
.settings-demo-access-grid article.demo-password-card { border-color: #dfcc9f; background: #fffaf0; }
.settings-demo-access-grid article > div { min-width: 0; }
.settings-demo-access-grid strong,
.settings-demo-access-grid small { display: block; }
.settings-demo-access-grid strong { color: #31473f; font-size: .72rem; }
.settings-demo-access-grid small { margin: .08rem 0 .38rem; color: #81908a; font-size: .58rem; }
.language-code { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); font-size: .65rem; font-weight: 850; }
.language-code svg { width: 16px; height: 16px; }
.settings-demo-actions { display: flex; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; margin-top: .85rem; }
.settings-demo-actions form { margin: 0; }

.account-card.is-demo { border-color: #bfd8e4; background: linear-gradient(145deg,#fff,#f4f9fc); }
.account-badges { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; flex-wrap: wrap; }
.account-username { display: block; margin-top: .1rem; color: #7c8984; font-size: .61rem; font-weight: 720; }
.account-login-details { grid-template-columns: repeat(3,minmax(0,1fr)); }
.account-login-details a { display: inline-flex; align-items: center; gap: .2rem; color: var(--primary); }
.account-login-details a svg { width: 12px; height: 12px; }

.demo-portal-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 125;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .48rem 1rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0, rgba(209,169,95,.26), transparent 34%),
        linear-gradient(100deg,#092a23 0%,#123f35 62%,#1c5b4b 100%);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 24px rgba(8,35,29,.2);
}
.demo-portal-bar-main { min-width: 0; display: flex; align-items: center; gap: .68rem; }
.demo-portal-bar-main > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #f1d89d; background: rgba(255,255,255,.08); }
.demo-portal-bar-main > span svg { width: 17px; height: 17px; }
.demo-portal-bar-main > div { min-width: 0; }
.demo-portal-bar-main strong,
.demo-portal-bar-main small { display: block; color: #fff; }
.demo-portal-bar-main strong { font-size: .74rem; }
.demo-portal-bar-main small { margin-top: .06rem; color: rgba(255,255,255,.66); font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-portal-bar-meta { display: flex; align-items: center; justify-content: flex-end; gap: .48rem; flex: 0 0 auto; }
.demo-portal-bar-meta > span { display: inline-flex; align-items: center; min-height: 27px; padding: .28rem .52rem; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); font-size: .59rem; font-weight: 750; }
.demo-portal-bar-meta strong { color: #fff; }
.app-shell.has-demo-portal { padding-top: 58px; }
.app-shell.has-demo-portal .sidebar { top: 58px; }
.app-shell.has-demo-portal .topbar { top: 58px; }
.has-demo-portal .anchor-nav { top: 152px; }
.has-demo-portal .task-side-column { top: 204px; }
.is-demo-portal .button[disabled],
.is-demo-portal button[disabled] { cursor: not-allowed; }

@media (max-width: 1360px) {
    .login-activity-stats.stat-grid.five { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .login-notification-grid { grid-template-columns: 1fr; }
    .settings-demo-access-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1120px) {
    .login-activity-layout { grid-template-columns: 1fr; }
    .login-demo-control { position: static; }
    .login-event-row { grid-template-columns: minmax(200px,.75fr) minmax(380px,1.3fr); }
    .login-event-flags { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; padding-top: .5rem; border-top: 1px solid #edf2ef; }
    .login-event-flags > div { justify-content: flex-start; }
}

@media (max-width: 860px) {
    .login-activity-hero { grid-template-columns: 1fr; min-height: 0; }
    .login-activity-hero-side { max-width: 520px; }
    .login-activity-stats.stat-grid.five { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .login-settings-grid { grid-template-columns: 1fr; }
    .login-settings-flow { grid-template-columns: 1fr; gap: .35rem; }
    .login-settings-flow > svg { transform: rotate(90deg); justify-self: center; }
    .login-settings-flow > span { justify-content: center; padding: .38rem; border: 1px solid #e5ede9; border-radius: 9px; background: #fff; }
    .account-login-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .demo-portal-bar-meta > span:first-child { display: none; }
}

@media (max-width: 760px) {
    .login-history-head { align-items: stretch; flex-direction: column; }
    .login-history-head-actions { justify-content: flex-start; }
    .login-history-filter { align-items: stretch; }
    .login-history-filter .search-field,
    .login-history-filter select,
    .login-history-filter .button { width: 100%; min-width: 0; }
    .login-event-row { grid-template-columns: 1fr; gap: .62rem; }
    .login-event-context { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .login-event-context > span:first-child { padding-left: 0; border-left: 0; }
    .login-event-context > span:last-child { grid-column: 1 / -1; padding-top: .45rem; padding-left: 0; border-left: 0; border-top: 1px solid #edf2ef; }
    .login-event-flags { grid-column: auto; }
    .settings-demo-access-grid { grid-template-columns: 1fr; }
    .settings-demo-actions { align-items: stretch; flex-direction: column; }
    .settings-demo-actions .button,
    .settings-demo-actions form { width: 100%; }
    .demo-portal-bar { min-height: 72px; padding: .5rem .7rem; }
    .demo-portal-bar-main small { max-width: 55vw; }
    .demo-portal-bar-meta > span { display: none; }
    .app-shell.has-demo-portal { padding-top: 72px; }
    .app-shell.has-demo-portal .sidebar { top: 72px; }
    .app-shell.has-demo-portal .topbar { top: 72px; }
}

@media (max-width: 560px) {
    .login-activity-hero { padding: 1.05rem; border-radius: 18px; }
    .login-activity-hero h2 { font-size: 1.45rem; }
    .login-activity-hero p { font-size: .76rem; }
    .login-activity-hero-badges { display: grid; grid-template-columns: 1fr; }
    .login-activity-hero-badges span { width: 100%; justify-content: flex-start; }
    .login-activity-hero-side { padding: .82rem; }
    .login-activity-stats.stat-grid.five { grid-template-columns: 1fr; }
    .login-notification-card-head { grid-template-columns: auto minmax(0,1fr); }
    .login-notification-card-head > .badge { grid-column: 2; justify-self: start; }
    .login-notification-meta { grid-template-columns: 1fr; }
    .demo-access-list > div { grid-template-columns: 1fr; }
    .login-event-context { grid-template-columns: 1fr; }
    .login-event-context > span,
    .login-event-context > span:first-child,
    .login-event-context > span:last-child { grid-column: auto; padding: .4rem 0 0; border-left: 0; border-top: 1px solid #edf2ef; }
    .login-event-context > span:first-child { padding-top: 0; border-top: 0; }
    .login-event-flags { align-items: flex-start; flex-direction: column; }
    .account-login-details { grid-template-columns: 1fr; }
    .account-card-head { grid-template-columns: auto minmax(0,1fr); }
    .account-badges { grid-column: 1 / -1; justify-content: flex-start; }
    .demo-portal-bar-main > span { width: 32px; height: 32px; }
    .demo-portal-bar-main strong { font-size: .68rem; }
    .demo-portal-bar-main small { max-width: 72vw; font-size: .54rem; }
}

/* v1.9.0 – Settings viewport containment and compact responsive save panel */
.settings-layout,
.settings-main,
.settings-sidebar,
.settings-section,
.settings-section .card-head,
.settings-section .card-head > div {
    min-width: 0;
    max-width: 100%;
}

/* Generic form inputs use width:100%; visually hidden switches must not inherit it. */
.switch-row { position: relative; }
.switch-row > input[type="checkbox"] {
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    inset: 50% auto auto 0;
    margin: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    transform: translateY(-50%);
}

@media (max-width: 1050px) {
    .settings-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .settings-main,
    .settings-sidebar {
        width: 100%;
    }
    .settings-sidebar { order: -1; }
    .settings-sidebar .sticky-card {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: .55rem .7rem;
    }
    .settings-sidebar .sticky-card .eyebrow,
    .settings-sidebar .sticky-card h3,
    .settings-sidebar .sticky-card p { grid-column: 1; }
    .settings-sidebar .sticky-card .eyebrow { align-self: end; }
    .settings-sidebar .sticky-card h3 { align-self: center; margin: -.35rem 0 0; }
    .settings-sidebar .sticky-card p { align-self: start; margin: -.25rem 0 0; }
    .settings-sidebar .sticky-card .button {
        width: auto;
        min-width: 178px;
        margin: 0;
    }
    .settings-sidebar .sticky-card .button-primary { grid-column: 2; grid-row: 1 / span 3; }
    .settings-sidebar .sticky-card .button-secondary { grid-column: 3; grid-row: 1 / span 3; }
}

@media (max-width: 680px) {
    .settings-layout { gap: .7rem; }
    .settings-sidebar .sticky-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: .82rem;
    }
    .settings-sidebar .sticky-card .eyebrow,
    .settings-sidebar .sticky-card h3,
    .settings-sidebar .sticky-card p { grid-column: 1 / -1; }
    .settings-sidebar .sticky-card h3 { margin: -.15rem 0 0; }
    .settings-sidebar .sticky-card p { margin: -.1rem 0 .15rem; }
    .settings-sidebar .sticky-card .button-primary,
    .settings-sidebar .sticky-card .button-secondary {
        grid-row: auto;
        min-width: 0;
        width: 100%;
    }
    .settings-sidebar .sticky-card .button-primary { grid-column: 1; }
    .settings-sidebar .sticky-card .button-secondary { grid-column: 2; }
    .settings-section .card-head {
        align-items: stretch;
        flex-direction: column;
    }
    .settings-section .card-head > .button,
    .settings-section .card-head > .badge {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
    }
    .login-settings-grid,
    .registration-settings-grid,
    .language-settings-grid,
    .form-grid.two,
    .form-grid.three,
    .color-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .color-field > div { grid-template-columns: 42px minmax(0, 1fr); }
}

@media (max-width: 430px) {
    .settings-sidebar .sticky-card { grid-template-columns: minmax(0, 1fr); }
    .settings-sidebar .sticky-card .button-primary,
    .settings-sidebar .sticky-card .button-secondary { grid-column: 1; }
    .settings-section { padding: .78rem; }
}

/* ============================================================
   v1.9.1 — Workspace form reliability & validation visibility
   ============================================================ */
.workspace-edit-modal .modal-body {
    scroll-behavior: smooth;
}
.workspace-link-form {
    margin: 0;
}
.workspace-form-lead {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .68rem;
    align-items: center;
    padding: .75rem .8rem;
    border: 1px solid #d6e4de;
    border-radius: 12px;
    background: linear-gradient(145deg, #f8fbf9, #f1f7f4);
}
.workspace-form-lead-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
}
.workspace-form-lead-icon .icon { width: 16px; height: 16px; }
.workspace-form-lead strong,
.workspace-form-lead small { display: block; }
.workspace-form-lead strong { color: var(--ink); font-size: .72rem; }
.workspace-form-lead small { margin-top: .08rem; color: var(--muted); font-size: .6rem; line-height: 1.42; }
.workspace-form-status {
    padding: .72rem .8rem;
    border: 1px solid #e7bebe;
    border-radius: 11px;
    background: var(--danger-soft);
    color: #813a3a;
}
.workspace-form-status[hidden] { display: none !important; }
.workspace-form-status strong { display: block; font-size: .69rem; }
.workspace-form-status ul { margin: .28rem 0 0; padding-left: 1rem; font-size: .61rem; line-height: 1.48; }
.workspace-link-form .field.has-validation-error > span { color: var(--danger); }
.workspace-link-form .field.has-validation-error input,
.workspace-link-form .field.has-validation-error select,
.workspace-link-form .field.has-validation-error textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(184,66,66,.09);
    background: #fffafa;
}
.workspace-switch-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
}
.workspace-switch-grid .switch-row {
    align-items: flex-start;
}
.workspace-switch-grid .switch-row > span:last-child {
    min-width: 0;
}
.workspace-switch-grid .switch-row strong,
.workspace-switch-grid .switch-row small { display: block; }
.workspace-switch-grid .switch-row small { margin-top: .1rem; color: var(--muted); font-size: .55rem; line-height: 1.35; }
.workspace-switch-grid .switch-row.is-disabled {
    opacity: .58;
    background: #f5f7f6;
}
.workspace-modal-foot {
    position: relative;
    z-index: 3;
    box-shadow: 0 -8px 22px rgba(17,49,41,.045);
}
.workspace-modal-foot small {
    max-width: 360px;
    line-height: 1.35;
}
.workspace-modal-foot [data-workspace-submit].is-saving {
    cursor: wait;
    opacity: .9;
}
.workspace-modal-foot [data-workspace-submit][aria-busy="true"]::before {
    content: "";
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-right: .38rem;
    vertical-align: -2px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: workspace-save-spin .7s linear infinite;
}
@keyframes workspace-save-spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
    .workspace-edit-modal {
        width: calc(100vw - 1rem) !important;
        max-height: calc(100svh - 1rem) !important;
        border-radius: 14px !important;
    }
    .workspace-edit-modal .modal-body {
        max-height: calc(100svh - 142px);
        padding: .78rem;
    }
    .workspace-switch-grid { grid-template-columns: 1fr; }
    .workspace-modal-foot {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
        padding: .65rem .78rem;
    }
    .workspace-modal-foot small {
        grid-column: 1 / -1;
        margin: 0;
        max-width: none;
    }
    .workspace-modal-foot .button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-edit-modal .modal-body { scroll-behavior: auto; }
    .workspace-modal-foot [data-workspace-submit][aria-busy="true"]::before { animation: none; }
}

/* Keep workspace actions permanently reachable while only the form body scrolls. */
dialog.workspace-edit-modal[open] {
    display: flex;
    flex-direction: column;
}
.workspace-edit-modal .modal-head {
    flex: 0 0 auto;
}
.workspace-edit-modal .modal-form {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.workspace-edit-modal .modal-body {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
}
.workspace-edit-modal .workspace-modal-foot {
    flex: 0 0 auto;
}
@media (max-width: 680px) {
    .workspace-edit-modal .modal-body {
        max-height: none;
    }
}

/* ============================================================
   SMTP, DKIM, DMARC & Deliverability Centre — v1.9.2
   ============================================================ */
.mail-delivery-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: center;
    gap: 1.4rem;
    margin-bottom: .8rem;
    padding: clamp(1.2rem, 2.7vw, 2rem);
    border-radius: 21px;
    background:
        radial-gradient(circle at 88% 18%, rgba(209,169,95,.24), transparent 27%),
        radial-gradient(circle at 69% 112%, rgba(91,160,137,.2), transparent 36%),
        linear-gradient(135deg, #123f35, #082b23 72%, #061f1a);
    color: #fff;
    box-shadow: 0 22px 50px rgba(12,49,40,.2);
}
.mail-delivery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 92%);
}
.mail-delivery-hero-copy { min-width: 0; }
.mail-delivery-hero .eyebrow { color: #d8ba78; }
.mail-delivery-hero h2 {
    max-width: 780px;
    margin: .25rem 0 .55rem;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    line-height: 1.07;
    letter-spacing: -.038em;
}
.mail-delivery-hero-copy > p {
    max-width: 800px;
    margin: 0 0 1rem;
    color: rgba(255,255,255,.72);
    font-size: .76rem;
    line-height: 1.7;
}
.mail-hero-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.mail-delivery-hero-status {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .9rem;
    padding: .9rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
}
.mail-score-ring {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#d1a95f var(--mail-score), rgba(255,255,255,.1) 0);
}
.mail-score-ring::before {
    content: "";
    grid-area: 1 / 1;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #0c352c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.mail-score-ring > span {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: .12rem;
}
.mail-score-ring strong { color: #fff; font-size: 1.65rem; line-height: 1; }
.mail-score-ring small { color: rgba(255,255,255,.54); font-size: .55rem; }
.mail-delivery-hero-status > div:last-child { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.mail-delivery-hero-status > div:last-child > strong { margin-top: .28rem; color: #fff; font-size: .75rem; }
.mail-delivery-hero-status > div:last-child > small { color: rgba(255,255,255,.62); font-size: .57rem; line-height: 1.48; }

.mail-health-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .55rem;
    margin-bottom: .75rem;
}
.mail-health-item {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .62rem;
    min-height: 75px;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.mail-health-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf4f1;
    color: var(--primary);
}
.mail-health-icon svg { width: 17px; height: 17px; }
.mail-health-item > div { min-width: 0; display: flex; flex-direction: column; }
.mail-health-item strong { color: var(--ink); font-size: .66rem; }
.mail-health-item small { overflow: hidden; margin-top: .08rem; color: #7a8882; font-size: .53rem; line-height: 1.38; text-overflow: ellipsis; }
.mail-health-dot { width: 8px; height: 8px; border-radius: 50%; background: #a6b2ad; box-shadow: 0 0 0 5px rgba(126,142,134,.08); }
.mail-health-item.status-pass .mail-health-icon { color: var(--success); background: var(--success-soft); }
.mail-health-item.status-pass .mail-health-dot { background: var(--success); box-shadow: 0 0 0 5px rgba(35,117,87,.09); }
.mail-health-item.status-warning .mail-health-icon { color: #9a6b20; background: #fff4dc; }
.mail-health-item.status-warning .mail-health-dot { background: #c4933e; box-shadow: 0 0 0 5px rgba(196,147,62,.1); }
.mail-health-item.status-fail .mail-health-icon { color: var(--danger); background: var(--danger-soft); }
.mail-health-item.status-fail .mail-health-dot { background: var(--danger); box-shadow: 0 0 0 5px rgba(184,66,66,.08); }

.mail-guarantee-note {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .7rem;
    align-items: start;
    margin-bottom: 1rem;
    padding: .78rem .9rem;
    border: 1px solid #ead7ad;
    border-radius: 13px;
    background: linear-gradient(135deg,#fffdf8,#fff8e9);
}
.mail-guarantee-note > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f5e6c5;
    color: #806020;
}
.mail-guarantee-note > span svg { width: 16px; height: 16px; }
.mail-guarantee-note strong { display: block; color: #5c471e; font-size: .69rem; }
.mail-guarantee-note p { margin: .14rem 0 0; color: #7c6c50; font-size: .59rem; line-height: 1.55; }

.mail-settings-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(245px,.3fr);
    gap: .8rem;
    align-items: start;
    margin-bottom: 1rem;
}
.mail-settings-main { overflow: hidden; padding: clamp(.9rem,2vw,1.25rem); }
.mail-settings-main .section-heading { align-items: flex-start; margin: 0 0 .9rem; padding: 0; }
.mail-settings-main .section-heading p { max-width: 760px; }
.mail-settings-form { display: flex; flex-direction: column; gap: .8rem; }
.mail-master-switch {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid #cde0d6;
    border-radius: 13px;
    background: #f3f9f6;
    cursor: pointer;
}
.mail-master-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mail-master-switch > span:last-child { display: flex; flex-direction: column; }
.mail-master-switch strong { color: #305548; font-size: .7rem; }
.mail-master-switch small { margin-top: .08rem; color: #72827b; font-size: .57rem; }
.mail-form-section {
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafcfb;
}
.mail-form-section-title {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .58rem;
    align-items: center;
    margin-bottom: .72rem;
}
.mail-form-section-title > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e9f2ee;
    color: var(--primary);
}
.mail-form-section-title > span svg { width: 16px; height: 16px; }
.mail-form-section-title > div { display: flex; flex-direction: column; }
.mail-form-section-title strong { color: var(--ink); font-size: .72rem; }
.mail-form-section-title small { margin-top: .07rem; color: #788680; font-size: .55rem; }
.mail-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .62rem;
}
.mail-form-grid .field > span { font-size: .61rem; }
.mail-form-grid input,
.mail-form-grid select { min-height: 42px; background: #fff; font-size: .66rem; }
.mail-form-grid .field small { font-size: .52rem; line-height: 1.42; }
.input-with-status { position: relative; }
.input-with-status input { width: 100%; padding-right: 2.45rem; }
.input-status {
    position: absolute;
    top: 50%;
    right: .65rem;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    transform: translateY(-50%);
}
.input-status svg { width: 12px; height: 12px; }
.input-status.ok { color: var(--success); background: var(--success-soft); }
.input-status.warning { color: #996a20; background: #fff2d8; }
.mail-fallback-switch { margin-top: .65rem; background: #fff; }
.mail-locked-security {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .58rem;
    margin-top: .62rem;
    padding: .6rem .68rem;
    border: 1px solid #d5e5dd;
    border-radius: 10px;
    background: #eff7f3;
}
.mail-locked-security > svg { width: 17px; height: 17px; color: var(--success); }
.mail-locked-security > div { display: flex; flex-direction: column; }
.mail-locked-security strong { color: #36594c; font-size: .61rem; }
.mail-locked-security small { color: #71827a; font-size: .51rem; }
.mail-locked-security > span { padding: .24rem .38rem; border-radius: 7px; background: #dfeee7; color: #2f6a56; font-size: .48rem; font-weight: 850; text-transform: uppercase; }
.mail-alignment-flow {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: .35rem;
    margin-top: .65rem;
}
.mail-alignment-flow > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: .55rem;
    border: 1px solid #dde7e2;
    border-radius: 9px;
    background: #fff;
}
.mail-alignment-flow > span small { color: #87938e; font-size: .47rem; text-transform: uppercase; letter-spacing: .06em; }
.mail-alignment-flow > span strong { overflow: hidden; margin-top: .1rem; color: #40534a; font-size: .56rem; white-space: nowrap; text-overflow: ellipsis; }
.mail-alignment-flow > svg { width: 14px; height: 14px; color: #a6b2ad; }
.mail-save-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .72rem;
    border: 1px solid #d4e3dc;
    border-radius: 13px;
    background: linear-gradient(135deg,#f4f9f6,#fff);
}
.mail-save-summary { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .55rem; }
.mail-save-summary > svg { width: 20px; height: 20px; color: var(--success); }
.mail-save-summary > div { display: flex; flex-direction: column; }
.mail-save-summary strong { color: #345449; font-size: .65rem; }
.mail-save-summary small { color: #788680; font-size: .53rem; }
.mail-settings-sidebar { display: flex; flex-direction: column; gap: .7rem; }
.mail-settings-sidebar .card { padding: .8rem; }
.mail-settings-sidebar h3 { margin: .2rem 0 .65rem; font-size: .9rem; }
.mail-security-list { display: grid; gap: .42rem; }
.mail-security-list > div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .45rem;
    padding: .48rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f9fbfa;
}
.mail-security-list > div > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; }
.mail-security-list > div svg { width: 12px; height: 12px; }
.mail-security-list > div strong { color: #53655c; font-size: .56rem; line-height: 1.35; }
.mail-security-list .ok > span { color: var(--success); background: var(--success-soft); }
.mail-security-list .fail > span { color: var(--danger); background: var(--danger-soft); }
.mail-principles-card ol { display: grid; gap: .48rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mail-principles-card li { display: flex; flex-direction: column; padding: .52rem; border-left: 3px solid #d1a95f; border-radius: 0 8px 8px 0; background: #fffaf0; }
.mail-principles-card li strong { color: #59471f; font-size: .59rem; }
.mail-principles-card li small { margin-top: .12rem; color: #7e7158; font-size: .5rem; line-height: 1.44; }

.mail-test-center { margin-bottom: 1rem; }
.mail-test-center > .section-heading { margin-bottom: .65rem; }
.mail-test-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.mail-test-card { min-width: 0; display: flex; flex-direction: column; padding: .78rem; }
.mail-test-card-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .55rem; align-items: start; min-height: 76px; }
.mail-test-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary); color: #fff; font-size: .62rem; font-weight: 900; }
.mail-test-card-head h4 { margin: 0; color: var(--ink); font-size: .74rem; }
.mail-test-card-head p { margin: .15rem 0 0; color: #778680; font-size: .54rem; line-height: 1.46; }
.mail-test-placeholder {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: .55rem 0;
    border: 1px dashed #d5dfda;
    border-radius: 11px;
    background: #fafcfb;
    color: #8b9892;
}
.mail-test-placeholder svg { width: 20px; height: 20px; }
.mail-test-placeholder span { font-size: .55rem; }
.mail-result-panel {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: .55rem 0;
    padding: .62rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf9;
}
.mail-result-panel.success { border-color: #cde1d7; background: #f1f8f4; }
.mail-result-panel.warning { border-color: #ead8ae; background: #fff9ed; }
.mail-result-panel.danger { border-color: #e9cdcd; background: #fdf3f3; }
.mail-result-panel strong { color: #40534a; font-size: .61rem; }
.mail-result-panel small { margin-top: .2rem; color: #788680; font-size: .51rem; overflow-wrap: anywhere; }
.mail-result-details { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mail-result-details span { padding: .22rem .32rem; border-radius: 6px; background: #fff; color: #5b6c64; font-size: .47rem; font-weight: 750; }
.mail-dns-mini-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .38rem; }
.mail-mini-status { padding: .2rem .3rem; border-radius: 6px; background: #edf1ef; color: #75837d; font-size: .45rem; font-weight: 900; }
.mail-mini-status.pass { background: var(--success-soft); color: var(--success); }
.mail-mini-status.warning,
.mail-mini-status.unknown { background: #fff0d1; color: #8b6421; }
.mail-mini-status.fail { background: var(--danger-soft); color: var(--danger); }
.mail-test-action { margin-top: auto; }
.mail-test-recipient-form { display: grid; gap: .45rem; }
.mail-test-recipient-form .field > span { font-size: .56rem; }
.mail-test-recipient-form input { min-height: 38px; font-size: .61rem; }

.mail-dns-report-card { margin-bottom: 1rem; padding: .9rem; }
.mail-dns-report-card > .section-heading { margin: 0 0 .7rem; padding: 0; }
.mail-dns-report-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.mail-dns-report-item { min-width: 0; padding: .65rem; border: 1px solid var(--line); border-top: 3px solid #a6b2ad; border-radius: 11px; background: #fafcfb; }
.mail-dns-report-item.status-pass { border-top-color: var(--success); }
.mail-dns-report-item.status-warning,
.mail-dns-report-item.status-unknown { border-top-color: #c4933e; }
.mail-dns-report-item.status-fail { border-top-color: var(--danger); }
.mail-dns-report-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .42rem; align-items: center; }
.mail-dns-report-head > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #edf2ef; color: #75837d; }
.mail-dns-report-head svg { width: 13px; height: 13px; }
.mail-dns-report-head > div { display: flex; flex-direction: column; }
.mail-dns-report-head small { color: #87938e; font-size: .44rem; font-weight: 850; letter-spacing: .06em; }
.mail-dns-report-head strong { color: var(--ink); font-size: .59rem; }
.mail-dns-report-item > p { margin: .48rem 0 0; color: #718079; font-size: .5rem; line-height: 1.48; }
.mail-dns-report-item details { margin-top: .45rem; }
.mail-dns-report-item summary { color: var(--primary); font-size: .48rem; font-weight: 800; cursor: pointer; }
.mail-dns-report-item code { display: block; overflow-x: auto; margin-top: .3rem; padding: .42rem; border-radius: 7px; background: #edf2ef; color: #4f6158; font-size: .43rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all; }

.mail-header-check-card { margin-bottom: 1rem; padding: clamp(.9rem,2vw,1.2rem); scroll-margin-top: 1rem; }
.mail-header-check-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.72fr); gap: 1rem; align-items: start; }
.mail-header-check-copy h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.mail-header-check-copy > p { max-width: 720px; margin: 0; font-size: .65rem; line-height: 1.6; }
.mail-header-steps { display: grid; gap: .35rem; margin-top: .7rem; }
.mail-header-steps > span { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .48rem; color: #5f7068; font-size: .58rem; }
.mail-header-steps i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #eaf2ee; color: var(--primary); font-size: .5rem; font-style: normal; font-weight: 900; }
.mail-header-form { display: flex; flex-direction: column; gap: .55rem; padding: .72rem; border: 1px solid var(--line); border-radius: 13px; background: #f8faf9; }
.mail-header-form .field > span { font-size: .6rem; }
.mail-header-form textarea { min-height: 220px; resize: vertical; background: #fff; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .56rem; line-height: 1.45; }
.mail-header-form .field small { font-size: .5rem; }
.mail-auth-results { margin-top: .75rem; padding: .68rem; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.mail-auth-results.success { border-color: #c9dfd4; background: #f1f8f4; }
.mail-auth-results.warning { border-color: #e7d5ac; background: #fff9ec; }
.mail-auth-summary { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .5rem; }
.mail-auth-summary > svg { width: 18px; height: 18px; color: var(--success); }
.mail-auth-results.warning .mail-auth-summary > svg { color: #a27428; }
.mail-auth-summary > div { display: flex; flex-direction: column; }
.mail-auth-summary strong { color: #40534a; font-size: .61rem; }
.mail-auth-summary small { color: #7b8983; font-size: .48rem; }
.mail-auth-result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; margin-top: .55rem; }
.mail-auth-result-grid > span { min-width: 0; display: flex; flex-direction: column; padding: .45rem; border-radius: 8px; background: #fff; }
.mail-auth-result-grid small { color: #89958f; font-size: .43rem; font-weight: 900; }
.mail-auth-result-grid strong { margin-top: .08rem; color: #66766f; font-size: .56rem; }
.mail-auth-result-grid em { overflow: hidden; margin-top: .1rem; color: #87938e; font-size: .43rem; font-style: normal; text-overflow: ellipsis; }
.mail-auth-result-grid > span.pass strong { color: var(--success); }
.mail-auth-result-grid > span.fail strong { color: var(--danger); }
.mail-auth-result-grid > span.softfail strong,
.mail-auth-result-grid > span.unknown strong,
.mail-auth-result-grid > span.none strong { color: #9a6a20; }

.mail-log-card { padding: .9rem; scroll-margin-top: 1rem; }
.mail-log-card > .section-heading { margin: 0 0 .65rem; padding: 0; align-items: flex-start; }
.mail-log-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.mail-log-table { min-width: 870px; margin: 0; }
.mail-log-table th { font-size: .51rem; }
.mail-log-table td { vertical-align: top; font-size: .56rem; }
.mail-log-table td > strong,
.mail-log-table td > span,
.mail-log-table td > small { display: block; }
.mail-log-table td > small { margin-top: .12rem; color: #87938e; font-size: .46rem; overflow-wrap: anywhere; }
.mail-log-error { max-width: 260px; color: var(--danger) !important; }
.compact-empty { min-height: 210px; }
.compact-empty > svg { width: 29px; height: 29px; color: #81908a; }

@media (max-width: 1180px) {
    .mail-delivery-hero { grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); }
    .mail-health-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mail-settings-layout { grid-template-columns: minmax(0,1fr) minmax(215px,.26fr); }
    .mail-dns-report-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 920px) {
    .mail-delivery-hero { grid-template-columns: 1fr; min-height: 0; }
    .mail-delivery-hero-status { max-width: 540px; }
    .mail-settings-layout { grid-template-columns: 1fr; }
    .mail-settings-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mail-test-grid { grid-template-columns: 1fr; }
    .mail-test-card-head { min-height: 0; }
    .mail-header-check-layout { grid-template-columns: 1fr; }
    .mail-header-form textarea { min-height: 185px; }
}
@media (max-width: 720px) {
    .mail-delivery-hero { padding: 1rem; border-radius: 16px; }
    .mail-delivery-hero h2 { font-size: clamp(1.4rem,6vw,1.8rem); }
    .mail-delivery-hero-status { grid-template-columns: auto minmax(0,1fr); padding: .68rem; }
    .mail-score-ring { width: 88px; height: 88px; }
    .mail-score-ring::before { width: 68px; height: 68px; }
    .mail-score-ring strong { font-size: 1.25rem; }
    .mail-health-strip { grid-template-columns: 1fr 1fr; }
    .mail-form-grid { grid-template-columns: 1fr; }
    .mail-form-grid .field-span-2 { grid-column: auto; }
    .mail-alignment-flow { grid-template-columns: 1fr; }
    .mail-alignment-flow > svg { justify-self: center; transform: rotate(90deg); }
    .mail-save-card { flex-direction: column; align-items: stretch; }
    .mail-save-card .button { width: 100%; }
    .mail-settings-sidebar { grid-template-columns: 1fr; }
    .mail-dns-report-grid { grid-template-columns: 1fr 1fr; }
    .mail-auth-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .mail-hero-actions { align-items: stretch; }
    .mail-hero-actions .button { width: 100%; }
    .mail-delivery-hero-status { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .mail-delivery-hero-status > div:last-child { align-items: center; }
    .mail-health-strip { grid-template-columns: 1fr; }
    .mail-guarantee-note { padding: .68rem; }
    .mail-settings-main,
    .mail-test-card,
    .mail-dns-report-card,
    .mail-header-check-card,
    .mail-log-card { padding: .72rem; }
    .mail-master-switch { align-items: start; }
    .mail-locked-security { grid-template-columns: auto minmax(0,1fr); }
    .mail-locked-security > span { grid-column: 2; width: fit-content; }
    .mail-dns-report-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   Invoice planning & login activity refinements — v1.10.0
   ========================================================================== */

/* Login activity: readable account metrics instead of compressed mini boxes. */
.login-notification-meta {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(135px,.7fr) minmax(0,1.15fr);
    gap: .65rem;
    margin: .15rem 0 .05rem;
}
.login-notification-meta > .login-meta-tile {
    position: relative;
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    align-items: center;
    gap: .7rem;
    padding: .8rem .85rem;
    overflow: hidden;
    border: 1px solid #dbe5e0;
    border-radius: 14px;
    background: linear-gradient(145deg,#fff 0%,#f7faf8 100%);
    box-shadow: 0 5px 16px rgba(18,63,53,.045);
}
.login-notification-meta > .login-meta-tile::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    right: -35px;
    bottom: -42px;
    border-radius: 50%;
    background: rgba(18,63,53,.045);
    pointer-events: none;
}
.login-meta-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.login-meta-icon svg { width: 18px; height: 18px; }
.login-meta-tile > div { min-width: 0; display: flex; flex-direction: column; }
.login-meta-tile small {
    color: #7b8983;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}
.login-meta-tile strong,
.login-meta-tile a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .26rem;
    margin-top: .22rem;
    color: #25443a;
    font-size: .78rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-meta-tile a { color: var(--primary); }
.login-meta-tile a:hover { text-decoration: underline; }
.login-meta-tile a svg { width: 13px; height: 13px; }
.login-meta-tile em {
    margin-top: .18rem;
    color: #8b9892;
    font-size: .57rem;
    font-style: normal;
    line-height: 1.25;
}
.login-meta-count {
    background: linear-gradient(145deg,#fffdf9 0%,#fbf5e8 100%) !important;
    border-color: #eadfc7 !important;
}
.login-meta-count .login-meta-icon { background: rgba(209,169,95,.18); color: #86641f; }
.login-meta-count strong { color: #6e531e; font-size: 1.42rem; line-height: 1; }
.login-meta-ip .login-meta-icon { background: var(--info-soft); color: var(--info); }

/* Main planner hero. */
.invoice-planning-hero {
    position: relative;
    isolation: isolate;
    min-height: 260px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(245px,.36fr);
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: clamp(1.45rem,3vw,2.35rem);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 82% 6%,rgba(209,169,95,.34),transparent 30%),
        linear-gradient(135deg,#0c342a 0%,var(--primary) 56%,#18594a 100%);
    color: #fff;
    box-shadow: 0 24px 55px rgba(10,43,35,.19);
}
.invoice-planning-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(rgba(255,255,255,.72) .75px,transparent .75px);
    background-size: 20px 20px;
    mask-image: linear-gradient(90deg,transparent 2%,#000 72%);
}
.invoice-planning-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 310px;
    height: 310px;
    right: -180px;
    bottom: -210px;
    border: 50px solid rgba(255,255,255,.045);
    border-radius: 50%;
}
.invoice-planning-hero h2 {
    max-width: 790px;
    margin-bottom: .65rem;
    color: #fff;
    font-size: clamp(1.62rem,3vw,2.35rem);
}
.invoice-planning-hero p { max-width: 800px; margin-bottom: 0; color: rgba(255,255,255,.74); font-size: .88rem; }
.invoice-planning-hero-points { display: flex; flex-wrap: wrap; gap: .52rem; margin-top: 1.15rem; }
.invoice-planning-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 32px;
    padding: .4rem .65rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.88);
    font-size: .68rem;
    font-weight: 730;
    backdrop-filter: blur(6px);
}
.invoice-planning-hero-points svg { width: 14px; height: 14px; color: #ecd399; }
.invoice-planning-hero-actions { display: flex; flex-direction: column; gap: .62rem; align-items: stretch; }
.invoice-planning-hero-actions form { display: contents; }
.invoice-planning-hero-actions .button { width: 100%; min-height: 43px; }

.invoice-planning-stats .stat-card { min-height: 101px; padding: .82rem; }
.invoice-planning-stats .stat-icon { width: 42px; height: 42px; border-radius: 12px; }
.invoice-planning-stats .stat-card strong { font-size: 1.38rem; }
.invoice-planning-stats .stat-card .stat-money { font-size: .9rem !important; white-space: normal; }

/* Automation health strip. */
.invoice-automation-panel {
    display: grid;
    grid-template-columns: minmax(260px,.8fr) minmax(0,1.35fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid #dbe5e0;
    border-radius: 16px;
    background: linear-gradient(135deg,#fff 0%,#f7faf8 100%);
    box-shadow: var(--shadow-sm);
}
.invoice-automation-state { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.invoice-automation-icon {
    position: relative;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: #eef2f0;
    color: #76847e;
}
.invoice-automation-icon.is-active { background: var(--success-soft); color: var(--success); }
.invoice-automation-icon.is-active::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 1px;
    top: 1px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #39a178;
}
.invoice-automation-state .eyebrow { margin: 0 0 .14rem; font-size: .58rem; }
.invoice-automation-state h3 { margin: 0; font-size: .92rem; }
.invoice-automation-state p { margin: .2rem 0 0; font-size: .64rem; }
.invoice-automation-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    min-width: 0;
    border-left: 1px solid var(--line);
}
.invoice-automation-metrics > div { min-width: 0; padding: .16rem .85rem; border-right: 1px solid var(--line); }
.invoice-automation-metrics small,
.invoice-automation-metrics strong,
.invoice-automation-metrics span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-automation-metrics small { color: #87938e; font-size: .56rem; font-weight: 760; }
.invoice-automation-metrics strong { margin-top: .12rem; color: #32483f; font-size: .7rem; }
.invoice-automation-metrics span { margin-top: .05rem; color: #8b9792; font-size: .54rem; }
.invoice-automation-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.invoice-automation-link svg { width: 14px; height: 14px; }
.invoice-automation-link:hover { text-decoration: underline; }

/* Planner filter and toolbar. */
.invoice-planning-filter-card { margin: 1rem 0; padding: .72rem; }
.invoice-planning-filter {
    display: grid;
    grid-template-columns: minmax(230px,1.5fr) repeat(3,minmax(145px,.65fr)) auto auto auto;
    align-items: end;
    gap: .55rem;
}
.invoice-planning-filter .search-field { min-width: 0; }
.invoice-planning-filter .field-inline { min-width: 0; display: flex; flex-direction: column; gap: .23rem; }
.invoice-planning-filter .field-inline > span { font-size: .6rem; }
.invoice-planning-filter input,
.invoice-planning-filter select,
.invoice-planning-filter .button { min-height: 39px; font-size: .72rem; }
.invoice-planning-filter .button { padding-inline: .72rem; }
.invoice-planning-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .78rem; }
.invoice-planning-toolbar h2 { margin: 0; font-size: 1.35rem; }
.invoice-planning-toolbar p { margin: .2rem 0 0; font-size: .69rem; }
.invoice-planning-toolbar .eyebrow { margin-bottom: .18rem; font-size: .6rem; }

/* Month groups and plan cards. */
.invoice-plan-months { display: flex; flex-direction: column; gap: 1rem; }
.invoice-plan-month-group {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.invoice-plan-month-head {
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .72rem .85rem;
    border-bottom: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg,#fbfdfc,#f4f8f6);
}
.invoice-plan-month-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.invoice-plan-month-icon svg { width: 18px; height: 18px; }
.invoice-plan-month-head .eyebrow { margin: 0 0 .08rem; font-size: .52rem; }
.invoice-plan-month-head h3 { margin: 0; font-size: .98rem; }
.invoice-plan-list { display: flex; flex-direction: column; gap: .65rem; padding: .72rem; }
.invoice-plan-card {
    --plan-accent: #6e8d82;
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) minmax(150px,.22fr);
    gap: .85rem;
    min-width: 0;
    padding: .82rem;
    overflow: visible;
    border: 1px solid #e1e8e4;
    border-left: 4px solid var(--plan-accent);
    border-radius: 15px;
    background: #fff;
    transition: border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.invoice-plan-card:hover { z-index: 2; transform: translateY(-1px); border-color: #cdd9d3; box-shadow: 0 12px 28px rgba(18,63,53,.075); }
/* Keep an opened action menu above following plan cards. The hover transform and
   status opacity create stacking contexts; without an explicit parent z-index,
   the next card can paint over the dropdown even though the menu itself has a
   high z-index. :focus-within is the fallback for browsers without :has(). */
.invoice-plan-card:focus-within,
.invoice-plan-card:has(.invoice-plan-more[open]) { z-index: 45; }
.invoice-plan-more[open] { z-index: 46; }
.invoice-plan-card.is-overdue { --plan-accent: var(--danger); background: linear-gradient(90deg,#fff8f8 0,#fff 13%); }
.invoice-plan-card.is-today,
.invoice-plan-card.is-urgent { --plan-accent: #a87319; background: linear-gradient(90deg,#fffaf0 0,#fff 13%); }
.invoice-plan-card.is-soon { --plan-accent: var(--info); }
.invoice-plan-card.is-issued { --plan-accent: var(--success); opacity: .92; }
.invoice-plan-card.is-cancelled { --plan-accent: #9aa6a1; opacity: .76; }
.invoice-plan-card.is-client-visible::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    left: -5px;
    top: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3c9b76;
}
.invoice-plan-date-block {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: start;
    border: 1px solid #dce6e1;
    border-radius: 13px;
    background: linear-gradient(160deg,#f7faf8,#edf4f0);
    color: var(--primary);
}
.invoice-plan-date-block small { font-size: .59rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.invoice-plan-date-block strong { margin: .06rem 0; font-size: 1.65rem; line-height: 1; letter-spacing: -.05em; }
.invoice-plan-date-block span { color: #75847e; font-size: .58rem; font-weight: 760; }
.invoice-plan-main { min-width: 0; }
.invoice-plan-title-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .6rem;
}
.invoice-plan-client-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .63rem;
    font-weight: 900;
}
.invoice-plan-title-row > div:nth-child(2) { min-width: 0; }
.invoice-plan-title-row > div:nth-child(2) small { display: block; color: #7d8b85; font-size: .58rem; font-weight: 720; }
.invoice-plan-title-row h3 { margin: .08rem 0 0; overflow: hidden; color: #203a31; font-size: .91rem; text-overflow: ellipsis; white-space: nowrap; }
.invoice-plan-badges { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }
.invoice-plan-badges svg { width: 11px; height: 11px; }
.invoice-plan-data-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .42rem;
    margin-top: .65rem;
}
.invoice-plan-data-grid > div {
    min-width: 0;
    padding: .5rem .57rem;
    border: 1px solid #e8eeeb;
    border-radius: 10px;
    background: #fafcfb;
}
.invoice-plan-data-grid small,
.invoice-plan-data-grid strong,
.invoice-plan-data-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-plan-data-grid small { color: #87938e; font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.invoice-plan-data-grid strong { margin-top: .12rem; color: #344a41; font-size: .67rem; }
.invoice-plan-data-grid span { margin-top: .08rem; color: #89958f; font-size: .54rem; }
.invoice-plan-urgency { width: fit-content; padding: .12rem .34rem; border-radius: 999px; font-weight: 800; }
.invoice-plan-urgency.urgency-overdue { color: var(--danger); background: var(--danger-soft); }
.invoice-plan-urgency.urgency-today,
.invoice-plan-urgency.urgency-urgent { color: #855a16; background: var(--warning-soft); }
.invoice-plan-urgency.urgency-soon { color: var(--info); background: var(--info-soft); }
.invoice-plan-reminder-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .55rem;
    margin-top: .52rem;
    padding: .48rem .58rem;
    border-radius: 10px;
    background: #f3f7f5;
}
.invoice-plan-reminder-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(18,63,53,.06);
}
.invoice-plan-reminder-icon svg { width: 14px; height: 14px; }
.invoice-plan-reminder-row > div { min-width: 0; display: flex; flex-direction: column; }
.invoice-plan-reminder-row small { color: #83908a; font-size: .5rem; }
.invoice-plan-reminder-row strong { overflow: hidden; color: #40554c; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.invoice-plan-reminder-row span:not(.invoice-plan-reminder-icon) { color: #84918b; font-size: .52rem; }
.invoice-plan-last-mail { display: flex; flex-direction: column; align-items: flex-end; }
.invoice-plan-last-mail strong { font-size: .56rem; }
.invoice-plan-note { margin-top: .5rem; padding: .5rem .62rem; border-left: 3px solid rgba(209,169,95,.78); border-radius: 8px; background: #fbfaf6; }
.invoice-plan-note strong { color: #77623d; font-size: .56rem; text-transform: uppercase; }
.invoice-plan-note p { margin: .12rem 0 0; color: #64736d; font-size: .62rem; line-height: 1.45; }
.invoice-plan-actions { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .45rem; }
.invoice-plan-actions .button { width: 100%; justify-content: center; }
.invoice-plan-more { position: relative; margin-left: auto; }
.invoice-plan-more > summary { list-style: none; }
.invoice-plan-more > summary::-webkit-details-marker { display: none; }
.invoice-plan-more[open] > summary { color: var(--primary); border-color: var(--primary); background: #f6faf8; }
.invoice-plan-more-menu {
    position: absolute;
    z-index: 35;
    width: 260px;
    right: 0;
    top: calc(100% + .42rem);
    overflow: hidden;
    padding: .35rem;
    border: 1px solid #d6e0db;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(13,42,34,.18);
}
.invoice-plan-more-menu form { margin: 0; }
.invoice-plan-more-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .57rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #40524b;
    font-size: .66rem;
    font-weight: 730;
    text-align: left;
    cursor: pointer;
}
.invoice-plan-more-menu button:hover { background: #f2f7f4; color: var(--primary); }
.invoice-plan-more-menu button.danger { color: var(--danger); }
.invoice-plan-more-menu button.danger:hover { background: var(--danger-soft); }
.invoice-plan-more-menu button svg { width: 15px; height: 15px; }

/* Reminder history. */
.invoice-reminder-history { margin-top: 1rem; }
.invoice-reminder-log-list { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.invoice-reminder-log-row {
    display: grid;
    grid-template-columns: auto minmax(180px,1.25fr) minmax(130px,.55fr) minmax(160px,.7fr);
    align-items: center;
    gap: .72rem;
    min-width: 0;
    padding: .65rem .72rem;
    border-bottom: 1px solid #e9efec;
}
.invoice-reminder-log-row:last-child { border-bottom: 0; }
.invoice-reminder-log-row > div { min-width: 0; display: flex; flex-direction: column; }
.invoice-reminder-log-row strong,
.invoice-reminder-log-row small,
.invoice-reminder-log-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-reminder-log-row strong { color: #3b5047; font-size: .66rem; }
.invoice-reminder-log-row small { color: #89958f; font-size: .54rem; }
.invoice-reminder-log-row span { color: var(--danger); font-size: .52rem; }
.invoice-reminder-log-status {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef2f0;
    color: #7b8983;
}
.invoice-reminder-log-status.is-sent { background: var(--success-soft); color: var(--success); }
.invoice-reminder-log-status.is-failed { background: var(--danger-soft); color: var(--danger); }
.invoice-reminder-log-status svg { width: 15px; height: 15px; }

/* Planner dialogs. */
dialog.invoice-plan-dialog { width: min(930px,calc(100vw - 1.5rem)); }
dialog.invoice-automation-dialog { width: min(900px,calc(100vw - 1.5rem)); }
.invoice-plan-dialog .modal-body,
.invoice-automation-dialog .modal-body { background: #f7faf8; }
.invoice-plan-form-section {
    overflow: hidden;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(18,63,53,.035);
}
.invoice-plan-form-section-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.invoice-plan-form-section-head > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: rgba(18,63,53,.08);
    color: var(--primary);
}
.invoice-plan-form-section-head > span svg { width: 17px; height: 17px; }
.invoice-plan-form-section-head small { display: block; color: #82908a; font-size: .52rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.invoice-plan-form-section-head h3 { margin: .1rem 0 0; font-size: .88rem; }
.invoice-plan-reminder-section { border-color: #d7e6df; background: linear-gradient(145deg,#fff,#f7fbf9); }
.invoice-automation-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.invoice-cron-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .8rem;
    align-items: start;
    padding: .9rem;
    border: 1px solid #dfd3b8;
    border-radius: 14px;
    background: linear-gradient(145deg,#fffdf8,#faf5e9);
}
.invoice-cron-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(209,169,95,.2);
    color: #82611f;
}
.invoice-cron-card h3 { margin: 0; font-size: .9rem; }
.invoice-cron-card p { margin: .25rem 0 .65rem; font-size: .65rem; }
.invoice-cron-card .copy-field input { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .62rem; }
.invoice-automation-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .65rem 1.3rem; border-top: 1px solid var(--line); background: #fff; }

/* Future billing preview for admin and clients. */
.future-billing-panel {
    margin: 1rem 0 1.2rem;
    padding: 1rem;
    border: 1px solid #d9e5df;
    border-radius: 18px;
    background: linear-gradient(145deg,#f9fcfa,#eef6f2);
    box-shadow: var(--shadow-sm);
}
.future-billing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.future-billing-head .eyebrow { margin-bottom: .2rem; font-size: .59rem; }
.future-billing-head h2 { margin: 0; font-size: 1.25rem; }
.future-billing-head p { max-width: 760px; margin: .25rem 0 0; font-size: .68rem; }
.future-billing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: .8rem; }
.future-billing-card {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: stretch;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid #dce6e1;
    border-radius: 13px;
    background: #fff;
}
.future-billing-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(18,63,53,.075);
    color: var(--primary);
}
.future-billing-date small { font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.future-billing-date strong { font-size: 1.2rem; line-height: 1.05; }
.future-billing-date span { font-size: .5rem; }
.future-billing-main { min-width: 0; }
.future-billing-title { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.future-billing-title h3 { flex: 1 1 180px; margin: 0; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.future-billing-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; margin-top: .42rem; }
.future-billing-meta span { min-width: 0; display: flex; flex-direction: column; }
.future-billing-meta small { color: #8b9792; font-size: .49rem; }
.future-billing-meta strong { overflow: hidden; color: #4a5c55; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.future-billing-main > p { margin: .42rem 0 0; padding-top: .4rem; border-top: 1px solid #edf1ef; color: #697871; font-size: .58rem; }
.future-billing-actions { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.invoice-plan-prefill-banner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .72rem .78rem;
    border: 1px solid #d6e4dd;
    border-radius: 12px;
    background: linear-gradient(135deg,#eff8f4,#fff);
}
.invoice-plan-prefill-banner > svg { width: 24px; height: 24px; color: var(--primary); }
.invoice-plan-prefill-banner > div { min-width: 0; display: flex; flex-direction: column; }
.invoice-plan-prefill-banner .eyebrow { margin: 0; font-size: .48rem; }
.invoice-plan-prefill-banner strong { color: #30483e; font-size: .72rem; }
.invoice-plan-prefill-banner small { color: #788680; font-size: .58rem; }
.invoice-plan-prefill-banner > a { display: inline-flex; align-items: center; gap: .3rem; color: var(--primary); font-size: .6rem; font-weight: 800; white-space: nowrap; }
.invoice-plan-prefill-banner > a svg { width: 13px; height: 13px; }

/* Admin dashboard reminder module. */
.dashboard-invoice-planning {
    position: relative;
    overflow: hidden;
    margin: 1rem 0;
    padding: .9rem;
    border-radius: 18px;
    background: linear-gradient(135deg,#123f35,#1b5b4b);
    color: #fff;
    box-shadow: 0 18px 40px rgba(18,63,53,.16);
}
.dashboard-invoice-planning::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    top: -120px;
    border-radius: 50%;
    background: rgba(209,169,95,.18);
}
.dashboard-invoice-planning.has-overdue { background: linear-gradient(135deg,#703b34,#9a5044); }
.dashboard-invoice-planning-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
}
.dashboard-invoice-planning-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    color: #efd49a;
}
.dashboard-invoice-planning-head .eyebrow { margin: 0 0 .08rem; color: rgba(255,255,255,.68); font-size: .53rem; }
.dashboard-invoice-planning-head h2 { margin: 0; color: #fff; font-size: 1rem; }
.dashboard-invoice-planning-head p { margin: .16rem 0 0; color: rgba(255,255,255,.7); font-size: .6rem; }
.dashboard-invoice-planning-actions { display: flex; gap: .4rem; }
.dashboard-invoice-planning-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .45rem;
    margin-top: .72rem;
}
.dashboard-invoice-plan {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .5rem .55rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: rgba(255,255,255,.085);
    backdrop-filter: blur(5px);
}
.dashboard-invoice-plan:hover { background: rgba(255,255,255,.14); }
.dashboard-invoice-plan-date {
    width: 35px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.13);
}
.dashboard-invoice-plan-date strong { color: #fff; font-size: .82rem; line-height: 1; }
.dashboard-invoice-plan-date small { color: rgba(255,255,255,.66); font-size: .45rem; text-transform: uppercase; }
.dashboard-invoice-plan > span:not(.dashboard-invoice-plan-date) { min-width: 0; display: flex; flex-direction: column; }
.dashboard-invoice-plan > span strong,
.dashboard-invoice-plan > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-invoice-plan > span strong { color: #fff; font-size: .6rem; }
.dashboard-invoice-plan > span small { color: rgba(255,255,255,.65); font-size: .48rem; }
.dashboard-invoice-plan > svg { width: 13px; height: 13px; color: rgba(255,255,255,.7); }

/* Responsive behaviour. */
@media (max-width: 1260px) {
    .invoice-planning-filter { grid-template-columns: minmax(220px,1.3fr) repeat(3,minmax(135px,.65fr)); }
    .invoice-planning-filter .button { width: 100%; }
    .invoice-plan-data-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .invoice-plan-card { grid-template-columns: 70px minmax(0,1fr) 155px; }
    .dashboard-invoice-planning-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1060px) {
    .invoice-planning-hero { grid-template-columns: minmax(0,1fr) 230px; }
    .invoice-automation-panel { grid-template-columns: 1fr auto; }
    .invoice-automation-metrics { grid-column: 1 / -1; grid-row: 2; border: 1px solid var(--line); border-radius: 11px; padding: .45rem 0; }
    .invoice-automation-link { grid-column: 2; grid-row: 1; }
    .invoice-plan-card { grid-template-columns: 64px minmax(0,1fr); }
    .invoice-plan-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
    .invoice-plan-actions .button { width: auto; }
    .future-billing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .login-notification-meta { grid-template-columns: 1fr 1fr; }
    .login-meta-last-login { grid-column: 1 / -1; }
    .invoice-planning-hero { grid-template-columns: 1fr; gap: 1.15rem; min-height: 0; }
    .invoice-planning-hero-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .invoice-planning-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .invoice-planning-filter .search-field { grid-column: 1 / -1; }
    .invoice-planning-toolbar { align-items: center; }
    .invoice-plan-title-row { grid-template-columns: auto minmax(0,1fr); }
    .invoice-plan-badges { grid-column: 1 / -1; justify-content: flex-start; padding-left: 42px; }
    .invoice-plan-reminder-row { grid-template-columns: auto minmax(0,1fr); }
    .invoice-plan-last-mail { grid-column: 2; align-items: flex-start; }
    .invoice-reminder-log-row { grid-template-columns: auto minmax(0,1fr) minmax(130px,.45fr); }
    .invoice-reminder-log-row > div:last-child { grid-column: 2 / -1; }
    .invoice-automation-settings-grid { grid-template-columns: 1fr; }
    .future-billing-card { grid-template-columns: 56px minmax(0,1fr); }
    .future-billing-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
    .dashboard-invoice-planning-head { grid-template-columns: auto minmax(0,1fr); }
    .dashboard-invoice-planning-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 680px) {
    .login-notification-meta { grid-template-columns: 1fr; gap: .48rem; }
    .login-meta-last-login { grid-column: auto; }
    .login-notification-meta > .login-meta-tile { min-height: 80px; }
    .invoice-planning-hero { padding: 1.05rem; border-radius: 17px; }
    .invoice-planning-hero h2 { font-size: 1.48rem; }
    .invoice-planning-hero-points { display: grid; grid-template-columns: 1fr; gap: .35rem; }
    .invoice-planning-hero-actions { grid-template-columns: 1fr; }
    .invoice-planning-stats.stat-grid.five { grid-template-columns: 1fr 1fr; }
    .invoice-planning-stats .stat-card { min-height: 86px; }
    .invoice-automation-panel { grid-template-columns: 1fr; align-items: stretch; }
    .invoice-automation-link { grid-column: auto; grid-row: auto; justify-content: center; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; }
    .invoice-automation-metrics { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; padding: 0; }
    .invoice-automation-metrics > div { padding: .5rem .62rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .invoice-automation-metrics > div:last-child { border-bottom: 0; }
    .invoice-planning-filter { grid-template-columns: 1fr; }
    .invoice-planning-filter .search-field { grid-column: auto; }
    .invoice-planning-toolbar { align-items: stretch; flex-direction: column; }
    .invoice-planning-toolbar .button { width: 100%; }
    .invoice-plan-month-head { grid-template-columns: auto minmax(0,1fr) auto; padding: .6rem; }
    .invoice-plan-month-head h3 { font-size: .84rem; }
    .invoice-plan-list { padding: .5rem; }
    .invoice-plan-card { grid-template-columns: 54px minmax(0,1fr); gap: .55rem; padding: .6rem; }
    .invoice-plan-date-block { min-height: 70px; }
    .invoice-plan-date-block strong { font-size: 1.35rem; }
    .invoice-plan-title-row { gap: .45rem; }
    .invoice-plan-client-avatar { width: 30px; height: 30px; }
    .invoice-plan-title-row h3 { font-size: .77rem; }
    .invoice-plan-badges { padding-left: 35px; }
    .invoice-plan-data-grid { grid-template-columns: 1fr; }
    .invoice-plan-reminder-row { grid-column: 1 / -1; }
    .invoice-plan-actions { flex-direction: column; align-items: stretch; }
    .invoice-plan-actions .button { width: 100%; }
    .invoice-plan-more { margin-left: auto; }
    .invoice-plan-more-menu { position: fixed; width: min(300px,calc(100vw - 1.2rem)); right: .6rem; top: auto; bottom: .6rem; z-index: 80; }
    .invoice-reminder-log-row { grid-template-columns: auto minmax(0,1fr); }
    .invoice-reminder-log-row > div:nth-child(3),
    .invoice-reminder-log-row > div:last-child { grid-column: 2; }
    .invoice-automation-dialog-actions { flex-direction: column; align-items: stretch; padding: .65rem 1rem; }
    .invoice-automation-dialog-actions .button { width: 100%; }
    .invoice-cron-card { grid-template-columns: 1fr; }
    .future-billing-head { align-items: stretch; flex-direction: column; }
    .future-billing-head .button { width: 100%; }
    .future-billing-card { grid-template-columns: 50px minmax(0,1fr); }
    .future-billing-meta { grid-template-columns: 1fr; }
    .future-billing-actions { justify-content: stretch; }
    .future-billing-actions .button { flex: 1; }
    .invoice-plan-prefill-banner { grid-template-columns: auto minmax(0,1fr); }
    .invoice-plan-prefill-banner > a { grid-column: 1 / -1; justify-content: flex-end; }
    .dashboard-invoice-planning { padding: .75rem; }
    .dashboard-invoice-planning-list { grid-template-columns: 1fr; }
    .dashboard-invoice-planning-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .dashboard-invoice-planning-actions .button { width: 100%; }
    .dashboard-invoice-plan { grid-template-columns: auto minmax(0,1fr) auto; }
    .dashboard-invoice-plan > span:nth-child(3) { grid-column: 2; }
}
@media (max-width: 460px) {
    .invoice-planning-stats.stat-grid.five { grid-template-columns: 1fr; }
    .invoice-plan-month-icon { width: 34px; height: 34px; }
    .invoice-plan-month-head .badge { display: none; }
    .invoice-plan-card { grid-template-columns: 1fr; }
    .invoice-plan-date-block { min-height: 48px; flex-direction: row; gap: .35rem; justify-content: flex-start; padding: 0 .65rem; }
    .invoice-plan-date-block strong { order: -1; font-size: 1rem; }
    .invoice-plan-date-block small,
    .invoice-plan-date-block span { font-size: .55rem; }
    .invoice-plan-badges { padding-left: 0; }
    .invoice-plan-reminder-row { grid-column: auto; }
    .future-billing-card { grid-template-columns: 1fr; }
    .future-billing-date { min-height: 42px; flex-direction: row; gap: .3rem; justify-content: flex-start; padding: 0 .6rem; }
    .future-billing-date strong { order: -1; font-size: .9rem; }
    .dashboard-invoice-planning-head { grid-template-columns: 1fr; }
    .dashboard-invoice-planning-icon { display: none; }
    .dashboard-invoice-planning-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.10.1 — Reliable, fully usable modal forms
   Prevent flex children inside scrollable modal bodies from
   shrinking and clipping their inputs on short viewports / Firefox.
   ============================================================ */

/* Every direct block in a scrollable stacked modal keeps its natural
   content height. The body scrolls; fields never collapse underneath
   subsequent sections. This fixes the same failure mode site-wide. */
dialog.modal .modal-body.form-stack > * {
    flex: 0 0 auto;
    min-height: max-content;
}

/* Invoice planning dialogs use a strict header / scroll area / footer
   layout. This behaves consistently in Chromium, Firefox and mobile
   browsers even when the viewport is very short. */
dialog.invoice-plan-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(960px, calc(100vw - 1rem));
    max-height: min(96dvh, 940px);
    overflow: hidden;
}

dialog.invoice-automation-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(920px, calc(100vw - 1rem));
    max-height: min(96dvh, 940px);
    overflow: hidden;
}

.invoice-plan-dialog > .modal-form,
.invoice-automation-dialog > .modal-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.invoice-plan-dialog .modal-body,
.invoice-automation-dialog .modal-body {
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.invoice-plan-dialog .modal-body.form-stack,
.invoice-automation-dialog .modal-body.form-stack {
    align-content: flex-start;
}

.invoice-plan-form-section {
    min-width: 0;
    min-height: auto;
    overflow: visible;
}

.invoice-plan-form-section .form-grid {
    align-items: start;
}

.invoice-plan-dialog .field,
.invoice-automation-dialog .field,
.invoice-plan-dialog .switch-row,
.invoice-automation-dialog .switch-row {
    min-width: 0;
}

.invoice-plan-dialog input:not([type="checkbox"]):not([type="radio"]),
.invoice-plan-dialog select,
.invoice-plan-dialog textarea,
.invoice-automation-dialog input:not([type="checkbox"]):not([type="radio"]),
.invoice-automation-dialog select,
.invoice-automation-dialog textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.invoice-plan-dialog input:not([type="checkbox"]):not([type="radio"]),
.invoice-plan-dialog select,
.invoice-automation-dialog input:not([type="checkbox"]):not([type="radio"]),
.invoice-automation-dialog select {
    min-height: 42px;
}

.invoice-plan-dialog textarea,
.invoice-automation-dialog textarea {
    min-height: 92px;
    resize: vertical;
}

.invoice-plan-dialog .field:focus-within > span,
.invoice-automation-dialog .field:focus-within > span {
    color: var(--primary);
}

.invoice-plan-dialog .field input:focus,
.invoice-plan-dialog .field select:focus,
.invoice-plan-dialog .field textarea:focus,
.invoice-automation-dialog .field input:focus,
.invoice-automation-dialog .field select:focus,
.invoice-automation-dialog .field textarea:focus {
    position: relative;
    z-index: 1;
}

.invoice-plan-dialog .modal-foot,
.invoice-automation-dialog .modal-foot {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    box-shadow: 0 -8px 22px rgba(18, 63, 53, .055);
}

.invoice-plan-dialog .modal-body::-webkit-scrollbar,
.invoice-automation-dialog .modal-body::-webkit-scrollbar {
    width: 9px;
}

.invoice-plan-dialog .modal-body::-webkit-scrollbar-thumb,
.invoice-automation-dialog .modal-body::-webkit-scrollbar-thumb {
    border: 2px solid #f7faf8;
    border-radius: 999px;
    background: #b7c8bf;
}

@media (max-width: 680px) {
    dialog.invoice-plan-dialog[open],
    dialog.invoice-automation-dialog[open] {
        width: calc(100vw - .7rem);
        max-height: calc(100dvh - .7rem);
        border-radius: 16px;
    }

    .invoice-plan-dialog .modal-head,
    .invoice-automation-dialog .modal-head {
        padding: .82rem .78rem .72rem;
    }

    .invoice-plan-dialog .modal-head h2,
    .invoice-automation-dialog .modal-head h2 {
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .invoice-plan-dialog .modal-head p,
    .invoice-automation-dialog .modal-head p {
        margin-top: .12rem;
        font-size: .63rem;
        line-height: 1.45;
    }

    .invoice-plan-dialog .modal-body,
    .invoice-automation-dialog .modal-body {
        padding: .72rem;
    }

    .invoice-plan-form-section {
        padding: .74rem;
        border-radius: 13px;
    }

    .invoice-plan-form-section-head {
        align-items: flex-start;
        margin-bottom: .68rem;
    }

    .invoice-plan-form-section-head > span {
        width: 34px;
        height: 34px;
    }

    .invoice-plan-form-section-head h3 {
        font-size: .82rem;
        line-height: 1.22;
    }

    .invoice-plan-dialog .modal-foot,
    .invoice-automation-dialog .modal-foot {
        display: grid;
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
        gap: .45rem;
        padding: .62rem .72rem;
    }

    .invoice-plan-dialog .modal-foot .button,
    .invoice-automation-dialog .modal-foot .button {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}

@media (max-width: 390px) {
    .invoice-plan-dialog .modal-foot,
    .invoice-automation-dialog .modal-foot {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Demo isolation, demo-data visibility and account onboarding
   Compact Premium — v1.11.0
   ============================================================ */

.button-danger-soft {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: #e9c6c6;
}
.button-danger-soft:hover { color: #923737; background: #fde6e6; border-color: #dca9a9; }

.inline-notice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .72rem .8rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f7faf8;
}
.inline-notice > svg { width: 17px; height: 17px; margin-top: .08rem; flex: 0 0 auto; }
.inline-notice > span { min-width: 0; }
.inline-notice strong,
.inline-notice small { display: block; }
.inline-notice strong { font-size: .73rem; }
.inline-notice small { margin-top: .1rem; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.inline-notice.warning { color: #805a16; border-color: #ecd8aa; background: var(--warning-soft); }
.inline-notice.warning small { color: #816c43; }
.inline-notice.info { color: var(--info); border-color: #c5dce8; background: var(--info-soft); }

.welcome-email-option {
    display: grid;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid #bdd9cc;
    border-radius: 13px;
    background: linear-gradient(145deg, #f5fbf8, #edf7f2);
}
.welcome-email-option .switch-row { padding: 0; align-items: flex-start; }
.welcome-email-option .switch-row > span:last-child { min-width: 0; }
.welcome-email-option .switch-row strong { color: #244b3e; font-size: .78rem; }
.welcome-email-option .switch-row small { margin-top: .16rem; color: #61776e; font-size: .66rem; line-height: 1.45; }
.welcome-email-option.is-unavailable { border-color: #e3d7bb; background: #fffaf0; }
.welcome-email-benefits { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding-left: 3.55rem; }
.welcome-email-benefits span { display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .45rem; border-radius: 99px; color: #356452; background: rgba(255,255,255,.8); border: 1px solid #d6e8df; font-size: .58rem; font-weight: 750; }
.welcome-email-benefits svg { width: 12px; height: 12px; }
.welcome-send-button { border-color: #bcd8cb; background: #f2faf6; }

.sensitive-flash-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    margin: .7rem 0 0;
    padding: .32rem .52rem;
    border-radius: 99px;
    color: var(--success);
    background: var(--success-soft);
    font-size: .65rem;
    font-weight: 800;
}
.sensitive-flash-status svg { width: 13px; height: 13px; }

.demo-records-toggle-form { margin: 0; }
.demo-records-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .36rem .68rem .36rem .42rem;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: #4b5d56;
    background: rgba(255,255,255,.92);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(17,49,41,.05);
    transition: all var(--transition);
}
.demo-records-toggle:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.demo-records-toggle-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #6d7d76; background: #edf2ef; }
.demo-records-toggle-icon svg { width: 15px; height: 15px; }
.demo-records-toggle > span:last-child { display: grid; min-width: 0; text-align: left; line-height: 1.05; }
.demo-records-toggle small { color: #84908b; font-size: .52rem; font-weight: 750; }
.demo-records-toggle strong { margin-top: .18rem; font-size: .66rem; }
.demo-records-toggle.is-hidden strong { color: var(--success); }
.demo-records-toggle.is-hidden .demo-records-toggle-icon { color: var(--success); background: var(--success-soft); }
.demo-records-toggle.is-visible { border-color: #dfc88e; background: #fffaf0; }
.demo-records-toggle.is-visible strong,
.demo-records-toggle.is-visible .demo-records-toggle-icon { color: var(--warning); }
.demo-records-toggle.is-visible .demo-records-toggle-icon { background: var(--warning-soft); }

.demo-records-visible-banner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .72rem .82rem;
    border: 1px solid #e5cc92;
    border-radius: 13px;
    color: #6e5019;
    background: linear-gradient(135deg, #fffaf0, #fff5dd);
    box-shadow: var(--shadow-sm);
}
.demo-records-visible-banner > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(154,107,24,.1); }
.demo-records-visible-banner > span svg { width: 17px; height: 17px; }
.demo-records-visible-banner strong,
.demo-records-visible-banner small { display: block; }
.demo-records-visible-banner strong { font-size: .78rem; }
.demo-records-visible-banner small { margin-top: .08rem; color: #816e4b; font-size: .64rem; line-height: 1.4; }
.demo-records-visible-banner form { margin: 0; }

.admin-demo-isolation-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 105;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .52rem clamp(.8rem, 2.2vw, 1.5rem);
    color: #fff;
    background: linear-gradient(105deg, #122f29, #1f5a49 58%, #164238);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 7px 22px rgba(7,31,25,.2);
}
.admin-demo-isolation-main,
.admin-demo-isolation-actions { display: flex; align-items: center; min-width: 0; }
.admin-demo-isolation-main { gap: .7rem; }
.admin-demo-isolation-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; color: #f2d698; background: rgba(255,255,255,.08); }
.admin-demo-isolation-icon svg { width: 18px; height: 18px; }
.admin-demo-isolation-main > div { min-width: 0; }
.admin-demo-isolation-main .eyebrow { display: block; margin: 0 0 .04rem; color: rgba(255,255,255,.55); font-size: .5rem; }
.admin-demo-isolation-main strong,
.admin-demo-isolation-main small { display: block; }
.admin-demo-isolation-main strong { font-size: .77rem; color: #fff; }
.admin-demo-isolation-main small { max-width: 58vw; margin-top: .03rem; color: rgba(255,255,255,.67); font-size: .59rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-demo-isolation-actions { justify-content: flex-end; gap: .55rem; }
.admin-demo-isolation-actions form { margin: 0; }
.admin-demo-isolation-actions .badge { min-height: 29px; display: inline-flex; align-items: center; gap: .25rem; }
.admin-demo-isolation-actions .badge svg { width: 12px; height: 12px; }
.app-shell.has-admin-demo { padding-top: 62px; }
.app-shell.has-admin-demo .sidebar,
.app-shell.has-admin-demo .topbar { top: 62px; }
.has-admin-demo .anchor-nav { top: 156px; }
.has-admin-demo .task-side-column { top: 208px; }
.is-admin-demo .sidebar { background: linear-gradient(180deg, #153f35, #0b2922); }

.admin-demo-page-intro .page-intro-actions,
.page-intro-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.admin-demo-page-intro { padding-bottom: .25rem; }
.admin-demo-page-intro p { max-width: 900px; }
.admin-demo-status-hero {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #c7ded3;
    border-radius: 17px;
    background: linear-gradient(135deg, #f5fbf8, #eaf6f0);
    box-shadow: var(--shadow-sm);
}
.admin-demo-status-hero.is-inactive { border-color: #e6d6ae; background: linear-gradient(135deg, #fffaf0, #fff5df); }
.admin-demo-status-icon,
.admin-demo-card-icon { display: grid; place-items: center; color: var(--primary); background: rgba(18,63,53,.08); }
.admin-demo-status-icon { width: 48px; height: 48px; border-radius: 14px; }
.admin-demo-status-icon svg { width: 23px; height: 23px; }
.admin-demo-status-copy { min-width: 0; }
.admin-demo-status-copy .eyebrow { margin-bottom: .15rem; font-size: .56rem; }
.admin-demo-status-copy h3 { margin-bottom: .2rem; font-size: 1rem; }
.admin-demo-status-copy p { margin: 0; font-size: .7rem; line-height: 1.5; }
.admin-demo-status-meta { display: grid; justify-items: end; gap: .35rem; text-align: right; }
.admin-demo-status-meta small { color: var(--muted); font-size: .61rem; }

.admin-demo-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 1rem; margin-bottom: 1rem; }
.admin-demo-grid .card { padding: 1rem; }
.admin-demo-card-icon { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; }
.admin-demo-card-icon svg { width: 19px; height: 19px; }
.admin-demo-access-fields { display: grid; gap: .7rem; margin: .85rem 0; }
.admin-demo-access-fields label > span { display: block; margin-bottom: .28rem; color: #53635d; font-size: .65rem; font-weight: 800; }
.admin-demo-access-fields input { font-size: .72rem; }
.admin-demo-password-notice { margin-bottom: .8rem; }
.admin-demo-card-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin-demo-card-actions form { margin: 0; }
.admin-demo-count-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin: .85rem 0; }
.admin-demo-count-grid > div { display: grid; gap: .08rem; padding: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #f8faf9; }
.admin-demo-count-grid small { color: var(--muted); font-size: .56rem; font-weight: 750; }
.admin-demo-count-grid strong { color: var(--primary); font-size: 1.05rem; }
.admin-demo-reset-panel { display: grid; gap: .65rem; padding: .75rem; border: 1px solid #d5e4dd; border-radius: 12px; background: #f3f8f5; }
.admin-demo-reset-panel strong,
.admin-demo-reset-panel small { display: block; }
.admin-demo-reset-panel strong { font-size: .72rem; }
.admin-demo-reset-panel small { margin-top: .12rem; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.admin-demo-reset-panel .button { width: 100%; }

.admin-demo-safety-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; margin-bottom: 1rem; }
.admin-demo-safety-card { display: flex; align-items: flex-start; gap: .65rem; padding: .82rem; }
.admin-demo-safety-card > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: #eef6f2; }
.admin-demo-safety-card > span svg { width: 16px; height: 16px; }
.admin-demo-safety-card strong,
.admin-demo-safety-card small { display: block; }
.admin-demo-safety-card strong { font-size: .7rem; }
.admin-demo-safety-card small { margin-top: .1rem; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.admin-demo-safety-card code { padding: .1rem .25rem; font-size: .55rem; }

.admin-demo-guide { margin-bottom: 1rem; }
.admin-demo-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.admin-demo-steps > div { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #fafcfb; }
.admin-demo-steps > div > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: var(--primary); font-size: .68rem; font-weight: 900; }
.admin-demo-steps p { margin: 0; }
.admin-demo-steps strong,
.admin-demo-steps small { display: block; }
.admin-demo-steps strong { font-size: .67rem; }
.admin-demo-steps small { margin-top: .1rem; color: var(--muted); font-size: .57rem; line-height: 1.38; }

.admin-demo-onboarding { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.5fr); gap: 1rem; align-items: stretch; }
.admin-demo-onboarding-copy p { font-size: .75rem; }
.admin-demo-checklist { display: grid; gap: .45rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.admin-demo-checklist li { display: flex; align-items: flex-start; gap: .4rem; color: #445a51; font-size: .68rem; }
.admin-demo-checklist svg { width: 14px; height: 14px; margin-top: .08rem; color: var(--success); flex: 0 0 auto; }
.admin-demo-onboarding-action { display: grid; place-items: center; align-content: center; gap: .45rem; padding: 1rem; border: 1px solid #c9ded4; border-radius: 14px; text-align: center; background: linear-gradient(145deg, #f4faf7, #eaf5ef); }
.admin-demo-onboarding-action strong { font-size: .8rem; }
.admin-demo-onboarding-action small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
.admin-demo-big-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--primary); box-shadow: 0 10px 24px rgba(18,63,53,.18); }
.admin-demo-big-icon svg { width: 25px; height: 25px; }

.admin-demo-auth-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 120;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .45rem .8rem;
    color: #fff;
    background: linear-gradient(105deg, #112f28, #1d5948);
    box-shadow: 0 5px 20px rgba(8,31,25,.24);
}
.admin-demo-auth-bar > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #f0d393; background: rgba(255,255,255,.09); }
.admin-demo-auth-bar > span:first-child svg { width: 16px; height: 16px; }
.admin-demo-auth-bar > div { min-width: 0; }
.admin-demo-auth-bar strong,
.admin-demo-auth-bar small { display: block; }
.admin-demo-auth-bar strong { font-size: .7rem; }
.admin-demo-auth-bar small { color: rgba(255,255,255,.65); font-size: .56rem; }
.admin-demo-auth-bar .badge { margin-left: .5rem; }
.is-admin-demo-auth { padding-top: 54px; }
.is-admin-demo-auth .auth-shell-v18 { min-height: calc(100svh - 54px); }
.is-admin-demo-auth .auth-brand-panel-v18 { min-height: calc(100svh - 54px); }
.is-admin-demo-auth .auth-brand-inner-v18 { min-height: calc(100svh - 54px - clamp(3rem, 6.4vw, 7.5rem)); }
.admin-demo-login-callout { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .85rem; padding: .72rem; border: 1px solid #c6ddd2; border-radius: 12px; background: #f0f8f4; }
.admin-demo-login-callout > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--primary); background: #dfefe7; }
.admin-demo-login-callout svg { width: 16px; height: 16px; }
.admin-demo-login-callout strong,
.admin-demo-login-callout small { display: block; }
.admin-demo-login-callout strong { color: #284b3e; font-size: .69rem; }
.admin-demo-login-callout small { margin-top: .08rem; color: #60776d; font-size: .58rem; line-height: 1.4; }

@media (max-width: 1180px) {
    .admin-demo-safety-grid,
    .admin-demo-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-demo-isolation-actions .badge { display: none; }
}

@media (max-width: 920px) {
    .admin-demo-grid { grid-template-columns: 1fr; }
    .admin-demo-onboarding { grid-template-columns: 1fr; }
    .admin-demo-isolation-main small { max-width: 46vw; }
    .demo-records-toggle > span:last-child { display: none; }
    .demo-records-toggle { width: 40px; min-height: 40px; padding: .28rem; justify-content: center; }
    .demo-records-toggle-icon { width: 30px; height: 30px; }
}

@media (max-width: 680px) {
    .welcome-email-benefits { padding-left: 0; }
    .demo-records-visible-banner { grid-template-columns: auto minmax(0,1fr); }
    .demo-records-visible-banner form { grid-column: 1 / -1; }
    .demo-records-visible-banner .button { width: 100%; display: inline-flex !important; }
    .admin-demo-isolation-bar { min-height: 72px; padding: .46rem .65rem; }
    .admin-demo-isolation-main { gap: .5rem; }
    .admin-demo-isolation-main small { max-width: 54vw; white-space: normal; line-height: 1.25; }
    .admin-demo-isolation-actions .button { min-width: 40px; width: 40px; padding: 0; font-size: 0; }
    .admin-demo-isolation-actions .button svg { width: 17px; height: 17px; }
    .app-shell.has-admin-demo { padding-top: 72px; }
    .app-shell.has-admin-demo .sidebar,
    .app-shell.has-admin-demo .topbar { top: 72px; }
    .admin-demo-status-hero { grid-template-columns: auto minmax(0,1fr); align-items: flex-start; padding: .85rem; }
    .admin-demo-status-meta { grid-column: 1 / -1; width: 100%; grid-auto-flow: column; align-items: center; justify-content: space-between; text-align: left; }
    .admin-demo-count-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-demo-safety-grid,
    .admin-demo-steps { grid-template-columns: 1fr; }
    .admin-demo-card-actions { display: grid; grid-template-columns: 1fr; }
    .admin-demo-card-actions > a,
    .admin-demo-card-actions form,
    .admin-demo-card-actions .button { width: 100%; }
    .admin-demo-auth-bar { justify-content: flex-start; min-height: 62px; }
    .admin-demo-auth-bar .badge { display: none; }
    .admin-demo-auth-bar small { white-space: normal; line-height: 1.25; }
    .is-admin-demo-auth { padding-top: 62px; }
    .is-admin-demo-auth .auth-shell-v18,
    .is-admin-demo-auth .auth-brand-panel-v18 { min-height: calc(100svh - 62px); }
}

@media (max-width: 430px) {
    .demo-records-toggle { width: 36px; min-height: 36px; border-radius: 10px; }
    .demo-records-toggle-icon { width: 27px; height: 27px; }
    .admin-demo-isolation-icon { width: 34px; height: 34px; }
    .admin-demo-isolation-main .eyebrow { display: none; }
    .admin-demo-isolation-main strong { font-size: .68rem; }
    .admin-demo-isolation-main small { max-width: 52vw; font-size: .51rem; }
    .admin-demo-count-grid { gap: .4rem; }
    .admin-demo-status-icon { width: 42px; height: 42px; }
}

/* ============================================================
   v1.11.0 — Global modal reliability
   Keep every form footer reachable and let only the content area
   scroll. This applies to all regular portal dialogs; the invoice
   planner retains its specialised grid implementation above.
   ============================================================ */

dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: min(94dvh, 900px);
    overflow: hidden;
}

dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-head,
dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-foot {
    flex: 0 0 auto;
}

dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-body,
dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-form > .modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-form > .modal-foot {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    box-sizing: border-box;
    box-shadow: 0 -8px 22px rgba(18, 63, 53, .055);
}

@media (max-width: 680px) {
    dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) {
        width: calc(100vw - .7rem);
        max-height: calc(100dvh - .7rem);
        border-radius: 16px;
    }

    dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-form > .modal-foot,
    dialog.modal[open]:not(.invoice-plan-dialog):not(.invoice-automation-dialog) > .modal-foot {
        position: relative;
        z-index: 3;
    }
}

/* ============================================================
   v1.11.2 — Compact Premium Typography & Responsive Polish
   Einheitliche, kleinere Überschriften in sämtlichen Portal-Modulen.
   Die semantische H1–H6-Struktur bleibt unverändert; nur die visuelle
   Hierarchie wird kompakter, ruhiger und auf Mobile besser skaliert.
   ============================================================ */

:root {
    --heading-1: clamp(.98rem, 1.05vw, 1.10rem);
    --heading-2: clamp(1.02rem, 1.18vw, 1.20rem);
    --heading-3: .90rem;
    --heading-4: .81rem;
    --heading-5: .75rem;
    --heading-6: .69rem;
    --heading-hero: clamp(1.10rem, 1.55vw, 1.34rem);
    --heading-auth: clamp(1.38rem, 2.15vw, 1.78rem);
}

/* Globale Typografie: bewusst kompakt, aber weiterhin klar gestaffelt. */
h1 { font-size: var(--heading-1) !important; line-height: 1.18 !important; letter-spacing: -.018em !important; }
h2 { font-size: var(--heading-2) !important; line-height: 1.20 !important; letter-spacing: -.018em !important; }
h3 { font-size: var(--heading-3) !important; line-height: 1.24 !important; letter-spacing: -.014em !important; }
h4 { font-size: var(--heading-4) !important; line-height: 1.27 !important; letter-spacing: -.012em !important; }
h5 { font-size: var(--heading-5) !important; line-height: 1.30 !important; }
h6 { font-size: var(--heading-6) !important; line-height: 1.32 !important; }

/* Hero-/Titelbereiche dürfen sich abheben, bleiben aber deutlich kleiner. */
.hero h1,
.hero h2,
.workspace-hero h1,
.workspace-hero h2,
.project-detail-hero h1,
.project-detail-hero h2,
.client-profile-hero h1,
.client-profile-hero h2,
.task-hub-hero h1,
.task-hub-hero h2,
.task-detail-hero h1,
.task-detail-hero h2,
.task-command-copy h1,
.task-command-copy h2,
.login-activity-hero h1,
.login-activity-hero h2,
.mail-delivery-hero h1,
.mail-delivery-hero h2,
.invoice-planning-hero h1,
.invoice-planning-hero h2,
.registration-admin-hero-copy h1,
.registration-admin-hero-copy h2,
.registration-flow-visual h1,
.registration-flow-visual h2,
.registration-flow-visual h3,
.billing-hero h1,
.billing-hero h2,
.recommendations-hero h1,
.recommendations-hero h2,
.recommendation-principle-banner h1,
.recommendation-principle-banner h2,
.billing-source-banner h1,
.billing-source-banner h2 {
    font-size: var(--heading-hero) !important;
    line-height: 1.16 !important;
    letter-spacing: -.024em !important;
}

/* Login/Onboarding: weiterhin emotionaler Einstieg, aber nicht überdimensioniert. */
.auth-message h1,
.auth-story h1,
.auth-story-title-mobile,
.auth-mobile-intro h1 {
    font-size: var(--heading-auth) !important;
    line-height: 1.06 !important;
    letter-spacing: -.036em !important;
    margin-bottom: .62rem !important;
}

.auth-card-head h2,
.modal-head h2,
.invoice-planning-toolbar h2,
.future-billing-head h2,
.dashboard-invoice-planning-head h2,
.task-section-heading h3,
.mail-settings-sidebar h3,
.settings-sidebar .sticky-card h3 {
    font-size: clamp(.94rem, 1.05vw, 1.08rem) !important;
    line-height: 1.22 !important;
}

/* Kleine Karten-/Listenüberschriften dürfen nicht wieder größer werden. */
.card h3,
.card h4,
.client-card h3,
.project-card h3,
.credential-card h4,
.account-card h3,
.info-card h3,
.task-board-card h4,
.task-focus-title-block h4,
.invoice-card-title h3,
.invoice-card-title h4,
.invoice-plan-month-head h3,
.invoice-plan-title-row h3,
.invoice-plan-form-section-head h3,
.invoice-cron-card h3,
.future-billing-title h3,
.recommendation-title h3,
.recommendation-heading h4,
.registration-person-title h3,
.registration-rejected-box h4,
.mail-test-card-head h4,
.mail-header-check-copy h3,
.admin-demo-status-copy h3 {
    font-size: clamp(.77rem, .88vw, .88rem) !important;
    line-height: 1.26 !important;
}

/* Mehr vertikale Ruhe: Überschriften sollen kompakt statt blockartig wirken. */
.page-intro,
.section-head,
.card-head {
    margin-bottom: .58rem;
}

.page-intro h2,
.section-head h2,
.card-head h2,
.card-head h3 {
    margin-bottom: .16rem !important;
}

.hero,
.workspace-hero,
.client-profile-hero,
.project-detail-hero,
.task-hub-hero,
.task-detail-hero,
.login-activity-hero,
.mail-delivery-hero,
.invoice-planning-hero {
    margin-bottom: .62rem;
}

/* Robuste Responsive-Basis gegen horizontales Ausbrechen. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.main-column,
.main-content,
.card,
.section-card,
.content-grid > *,
.dashboard-grid > *,
.client-overview-grid > *,
.system-grid > *,
.settings-layout > *,
.form-grid > *,
.stat-grid > * {
    min-width: 0;
}

.data-table-wrap,
.table-wrap,
.responsive-table,
.invoice-planning-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablet: Informationsdichte hoch halten, ohne gequetschte Spalten. */
@media (max-width: 980px) {
    :root {
        --heading-hero: clamp(1.06rem, 2vw, 1.26rem);
        --heading-auth: clamp(1.30rem, 3vw, 1.62rem);
    }

    .main-content { padding: .68rem; }
    .card { padding: .72rem; }
    .hero,
    .workspace-hero,
    .client-profile-hero,
    .project-detail-hero,
    .task-hub-hero,
    .task-detail-hero,
    .login-activity-hero,
    .mail-delivery-hero,
    .invoice-planning-hero { padding: .82rem; }
}

/* Smartphone: kleinere Headlines, kompakte Flächen, große Touch-Ziele. */
@media (max-width: 680px) {
    :root {
        --heading-1: .92rem;
        --heading-2: 1rem;
        --heading-3: .86rem;
        --heading-4: .78rem;
        --heading-5: .72rem;
        --heading-6: .67rem;
        --heading-hero: 1.08rem;
        --heading-auth: clamp(1.22rem, 6vw, 1.48rem);
    }

    body { font-size: 13.25px; line-height: 1.46; }
    .main-content { padding: .5rem; }
    .topbar { min-height: 58px; height: auto; padding: .48rem .58rem; }
    .topbar-left { min-width: 0; }
    .topbar-left > div { min-width: 0; }
    .topbar-left h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { gap: .32rem; }

    .page-intro,
    .section-head,
    .card-head { gap: .5rem; margin-bottom: .5rem; }

    .hero,
    .workspace-hero,
    .client-profile-hero,
    .project-detail-hero,
    .task-hub-hero,
    .task-detail-hero,
    .login-activity-hero,
    .mail-delivery-hero,
    .invoice-planning-hero {
        gap: .62rem;
        padding: .72rem;
        border-radius: 12px;
        margin-bottom: .52rem;
    }

    .card,
    .section-card,
    .settings-section { border-radius: 11px; }

    /* Buttons dürfen optisch klein sein, bleiben aber fingerfreundlich. */
    .button { min-height: 38px; padding: .48rem .68rem; }
    .button-small { min-height: 36px; }
    .icon-button,
    .icon-link { width: 38px; height: 38px; }

    .form-grid.two,
    .form-grid.three,
    .switch-grid,
    .settings-layout,
    .workspace-intro-grid,
    .collaboration-grid,
    .info-grid.three,
    .stat-grid.five {
        grid-template-columns: 1fr;
    }

    .field-span-2,
    .field-span-3 { grid-column: span 1; }

    input,
    select,
    textarea { font-size: 16px; } /* verhindert iOS-Autozoom */

    .modal-head h2 { font-size: .98rem !important; }
    dialog.modal[open] { max-width: calc(100vw - .6rem); }
}

@media (max-width: 430px) {
    :root {
        --heading-hero: 1.03rem;
        --heading-auth: 1.26rem;
    }

    .main-content { padding: .42rem; }
    .card { padding: .64rem; }
    .hero,
    .workspace-hero,
    .client-profile-hero,
    .project-detail-hero,
    .task-hub-hero,
    .task-detail-hero,
    .login-activity-hero,
    .mail-delivery-hero,
    .invoice-planning-hero { padding: .65rem; }

    .topbar-kicker { display: block; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}