:root {
    --bg: #f6f9fc;
    --panel: #ffffff;
    --text: #1d2939;
    --muted: #667085;
    --line: #e7edf4;
    --primary: #5d87ff;
    --primary-dark: #4169e1;
    --primary-soft: #edf3ff;
    --danger: #e14962;
    --success: #13b88a;
    --warning: #f6a609;
    --purple: #8b5cf6;
    --radius: 16px;
    --shadow: 0 2px 12px rgba(16, 24, 40, .045);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 12px; line-height: 1.65; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; right: 8px; transform: translateY(-160%); background: #111827; color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.auth-help { text-align: center; font-weight: 650; }
.login-audience { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px; }
.login-audience > span { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid #dce6f3;border-radius:10px;background:#f8fbff; }
.login-audience strong { font-size:11px;color:#263b55; }.login-audience small { font-size:10px;color:#667a91; }
.login-security-note { display:block;text-align:center;color:#667085;line-height:1.8; }
.password-required-alert { margin-bottom:14px; }.password-required-alert strong { display:block;margin-bottom:3px; }
.employee-self-summary { display:flex;align-items:center;gap:14px;margin-bottom:14px; }.employee-self-summary h2,.employee-self-summary p{margin:0 0 5px}.employee-service-roadmap{margin-top:14px}.employee-service-roadmap h3{margin-top:0}
a { color: var(--primary-dark); text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button, .button { min-height: 36px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; padding: 8px 14px; font: inherit; font-size: 12px; line-height: 1.35; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 4px 10px rgba(93, 135, 255, .16); transition: .2s ease; }
button:hover, .button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.button.secondary { background: #fff; color: #344054; border: 1px solid #dbe3ee; box-shadow: none; }
.button.secondary:hover { background: #f8fafc; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); direction: rtl; }
.sidebar { background: #fff; border-left: 1px solid var(--line); height: 100vh; position: sticky; top: 0; padding: 14px 12px 12px; display: flex; flex-direction: column; z-index: 15; }
.brand { color: var(--text); display: flex; align-items: center; gap: 9px; padding: 0 8px 13px; }
.brand > span:last-child { display: grid; line-height: 1.25; }
.brand strong { font-size: 17px; letter-spacing: -.35px; }
.brand small { color: #98a2b3; font-size: 9px; margin-top: 1px; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; position: relative; background: conic-gradient(from 30deg, #5d87ff, #39d7ca, #8b5cf6, #5d87ff); flex: 0 0 auto; }
.brand-mark:after { content: ''; width: 17px; height: 17px; background: #fff; border-radius: 50%; }
.brand-mark i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; top: 2px; right: 5px; opacity: .9; }
.brand-logo { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; border-radius: 9px; }
.sidebar nav { overflow: hidden; padding: 0 2px 5px; flex: 1; min-height: 0; }
.nav-section-title { display: block; color: #98a2b3; font-size: 9px; font-weight: 750; letter-spacing: .06em; padding: 9px 11px 4px; line-height: 1.25; }
.sidebar nav a { display: flex; align-items: center; gap: 9px; min-height: 38px; color: #475467; padding: 5px 10px; border-radius: 9px; margin: 1px 0; font-size: 12px; line-height: 1.35; font-weight: 520; transition: .18s ease; }
.sidebar nav a:hover { color: var(--primary); background: #f6f9ff; }
.sidebar nav a.active { color: #fff; background: linear-gradient(135deg, #6992ff, #527cf3); box-shadow: 0 5px 13px rgba(93, 135, 255, .18); }
.sidebar nav a > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-icon { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; }
.nav-icon svg { width: 18px; height: 18px; }
.sidebar nav a em { width: 7px; height: 7px; flex: 0 0 7px; overflow: hidden; color: transparent; background: var(--purple); border-radius: 50%; padding: 0; font-size: 0; box-shadow: 0 0 0 3px #f1eafe; }
.sidebar nav a.active em { color: transparent; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.menu-count { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 999px; background: #f04468; color: #fff; font-size: 9px; }
.sidebar-foot { margin-top: 6px; border-top: 1px solid var(--line); padding: 9px 9px 1px; display: flex; align-items: center; gap: 8px; }
.sidebar-foot div { display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.sidebar-foot strong { font-size: 10px; }
.sidebar-foot small { font-size: 8px; color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px #dcfaef; }

@media (max-height: 680px) and (min-width: 901px) {
    .sidebar { padding-top: 10px; padding-bottom: 8px; }
    .brand { padding-bottom: 8px; }
    .brand small, .sidebar-foot { display: none; }
    .nav-section-title { padding-top: 5px; padding-bottom: 2px; }
    .sidebar nav a { min-height: 35px; padding-top: 4px; padding-bottom: 4px; }
}

@media (max-height: 540px) and (min-width: 901px) {
    .sidebar nav { overflow-y: auto; scrollbar-width: thin; }
}

.workspace { min-width: 0; }
.topbar { height: 78px; position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.topbar-date { min-width: 154px; display: grid; place-items: center; gap: 1px; padding: 2px 5px; border: 0; color: #344054; background: transparent; box-shadow: none; direction: ltr; text-align: center; white-space: nowrap; }
.topbar-date strong { min-width: 0; color: #1f2937; font-size: 22px; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: .08em; }
.topbar-date span { min-width: 0; color: #667085; font-size: 9.5px; font-weight: 580; line-height: 1.45; direction: rtl; unicode-bidi: plaintext; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.quick-add { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; color: #fff; background: var(--primary); border-radius: 10px; font-weight: 650; }
.quick-add svg { width: 17px; }
.icon-button { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; padding: 0; color: #667085; background: #f8fafc; border: 1px solid var(--line); box-shadow: none; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); transform: none; }
.icon-button i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f04468; top: 6px; right: 7px; border: 2px solid #fff; }
.user-summary { display: flex; align-items: center; gap: 9px; padding: 0 6px 0 12px; border-left: 1px solid var(--line); }
.user-summary > span:last-child { display: grid; line-height: 1.4; }
.user-summary strong { font-size: 12px; }
.user-summary small { color: var(--muted); font-size: 10px; }
.avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: #3f61bf; font-weight: 750; background: linear-gradient(135deg, #dce8ff, #ecfdf9); }
.logout { color: #98a2b3; }

.content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 29px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.page-head h1 { margin: 2px 0 5px; font-size: 25px; line-height: 1.35; letter-spacing: -.4px; }
.page-head p { margin: 0; color: var(--muted); }

/* Global page transition */
.page-loading-overlay { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(244,247,252,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .18s ease, visibility .18s ease; }
.page-loading-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: all; }
.page-loading-card { width: min(330px,calc(100vw - 36px)); display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; padding: 16px 17px 13px; overflow: hidden; border: 1px solid rgba(203,214,232,.9); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 22px 60px rgba(39,57,91,.16); }
.page-loading-brand { width: 48px; height: 48px; position: relative; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#5f7df8,#55b8dd); box-shadow: 0 10px 24px rgba(74,105,219,.24); }
.page-loading-brand::before { content: ""; width: 25px; height: 25px; box-sizing: border-box; border: 7px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: page-loading-spin .9s linear infinite; }
.page-loading-brand i { width: 6px; height: 6px; position: absolute; top: 7px; left: 7px; border-radius: 50%; background: #fff; opacity: .9; }
.page-loading-copy { min-width: 0; display: grid; gap: 3px; }
.page-loading-copy strong { color: #26344b; font-size: 12px; }
.page-loading-copy small { color: #7a879a; font-size: 9.5px; }
.page-loading-progress { grid-column: 1/-1; height: 3px; overflow: hidden; border-radius: 999px; background: #edf1f7; }
.page-loading-progress i { width: 42%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#5879ed,#56b7dc); animation: page-loading-slide 1.2s ease-in-out infinite; }
.page-is-loading body { cursor: wait; }
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@keyframes page-loading-slide { 0% { transform: translateX(145%); } 50% { transform: translateX(-30%); } 100% { transform: translateX(-245%); } }
@media (prefers-reduced-motion: reduce) { .page-loading-overlay { transition: none; }.page-loading-brand::before,.page-loading-progress i { animation-duration: 2.4s; } }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 750; }
.head-actions { display: flex; align-items: center; gap: 10px; }

.welcome-banner { min-height: 150px; margin-bottom: 20px; border-radius: 18px; padding: 27px 30px; position: relative; overflow: hidden; background: linear-gradient(115deg, #e7f4ff, #edf8ff 55%, #e9fbf7); display: flex; align-items: center; }
.welcome-banner:before, .welcome-banner:after { content: ''; position: absolute; border-radius: 50%; }
.welcome-banner:before { width: 210px; height: 210px; left: 7%; top: -110px; background: rgba(93,135,255,.1); border: 22px solid rgba(255,255,255,.35); }
.welcome-banner:after { width: 100px; height: 100px; left: 21%; bottom: -54px; background: rgba(19,184,138,.11); }
.welcome-banner h1 { margin: 3px 0 7px; font-size: 25px; }
.welcome-banner p { margin: 0; color: #5f6f85; }
.welcome-banner .eyebrow { color: #4c78ee; }
.welcome-orbit { position: absolute; left: 6%; width: 130px; height: 100px; }
.welcome-orbit i { position: absolute; display: block; border-radius: 14px; box-shadow: 0 10px 25px rgba(31, 76, 150, .12); }
.welcome-orbit i:nth-child(1) { width: 74px; height: 70px; background: #fff; left: 22px; top: 13px; transform: rotate(-6deg); }
.welcome-orbit i:nth-child(2) { width: 32px; height: 32px; background: #ffcb67; left: 4px; top: 4px; border-radius: 50%; }
.welcome-orbit i:nth-child(3) { width: 27px; height: 27px; background: #6ee7d8; right: 0; bottom: 0; border-radius: 50%; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 15px; margin-bottom: 20px; }
.stats article { min-height: 132px; border-radius: 15px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.6); }
.stats article:after { content: ''; width: 62px; height: 62px; position: absolute; left: -20px; bottom: -24px; border-radius: 50%; background: rgba(255,255,255,.38); }
.stats span { color: #53657a; font-size: 12px; font-weight: 600; }
.stats strong { font-size: 28px; line-height: 1; }
.stats .stat-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.7); color: currentColor; }
.stat-blue { background: #eaf2ff; color: #507cf0; }.stat-mint { background: #e6faf6; color: #10a981; }.stat-purple { background: #f0edff; color: #765ce5; }.stat-amber { background: #fff5e5; color: #e89a00; }.stat-rose { background: #ffedf1; color: #dd4a68; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.panel h2, .panel-head h2 { margin: 0; font-size: 17px; }
.panel-head p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }
.count-chip { border-radius: 999px; padding: 5px 11px; color: var(--primary); background: var(--primary-soft); font-size: 11px; white-space: nowrap; }
.table-wrap { overflow: auto; margin: 0; border: 1px solid #edf1f6; border-radius: 10px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; font-size: 12px; line-height: 1.55; }
th, td { text-align: right; padding: 10px; border-bottom: 1px solid #edf1f6; vertical-align: middle; font-size: 12px; }
th { color: #667085; font-size: 10.5px; line-height: 1.45; font-weight: 700; background: #f8fafc; white-space: nowrap; }
td strong, td a, td button, td .button { font-size: inherit; }
thead th:first-child { border-radius: 0 10px 10px 0; } thead th:last-child { border-radius: 10px 0 0 10px; }
tbody tr { transition: background .15s; } tbody tr:hover { background: #fbfdff; } tr:last-child td { border-bottom: 0; }
.overdue-row td:first-child { border-right: 3px solid var(--danger); }
.table-action { display: inline-flex; padding: 5px 9px; border-radius: 7px; background: #f1f5ff; font-size: 11px; }
.badge { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; color: #4f46a5; border-radius: 999px; padding: 4px 9px; font-size: 11px; }
.badge.ok { background: #e8faf4; color: #07835f; }.badge.off { background: #f2f4f7; color: #667085; }
.color-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 7px; }
.block { display: block; margin-top: 4px; }.muted { color: var(--muted); }.text-danger { color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 35px; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; row-gap: 14px; }
.form-stack { display: grid; gap: 13px; }
form { font-size: 12px; }
form.panel { width: 100%; max-width: 1120px; margin-inline: auto; }
.form-grid label, .form-stack label, form .form-field { display: grid; gap: 5px; color: #344054; font-size: 11.5px; line-height: 1.55; font-weight: 600; }
.full { grid-column: 1/-1; }
input, select, textarea { width: 100%; min-height: 38px; border: 1px solid #d8e1ec; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; line-height: 1.5; background: #fff; color: var(--text); transition: border-color .16s, box-shadow .16s, background .16s; }
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #98a2b3; opacity: 1; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: #f6f8fb; color: #667085; cursor: not-allowed; }
input[type=color] { padding: 4px 6px; }
input[type=file] { padding: 5px 7px; background: #fbfcfe; }
input[type=file]::file-selector-button { min-height: 26px; margin-left: 9px; border: 0; border-radius: 6px; padding: 5px 9px; font-family: inherit; font-size: 10.5px; color: #344054; background: #edf2f7; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: #b9c7d8; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #7ba0ff; box-shadow: 0 0 0 3px rgba(93,135,255,.1); }
label small, form small { color: var(--muted); font-size: 10px; line-height: 1.65; font-weight: 400; }.field-error { color: var(--danger)!important; }
.field-label { font-size: 11.5px; font-weight: 600; }
.check { min-height: 38px; display: flex!important; grid-template-columns: auto 1fr!important; align-items: center; gap: 8px!important; padding: 8px 10px; border: 1px solid #e5ebf2; border-radius: 8px; background: #fafbfd; font-size: 11.5px!important; font-weight: 500!important; cursor: pointer; }
.check input, input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--primary); flex: 0 0 auto; }
.form-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
fieldset { min-width: 0; border: 1px solid #e4eaf1; border-radius: 10px; padding: 11px 12px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fbfcfe; } legend { padding: 0 7px; color: #475467; font-size: 11.5px; font-weight: 700; }
fieldset > small { flex-basis: 100%; }
.notice { background: #fffcf5; color: #7b5b18; border: 1px solid #f7e9c3; border-radius: 8px; padding: 10px 11px; font-size: 11px; }
.alert { padding: 12px 15px; border-radius: 11px; margin-bottom: 18px; border: 1px solid transparent; }
.alert.success { background: #ecfdf7; color: #087557; border-color: #d1f5e7; }.alert.error { background: #fff1f3; color: #b42345; border-color: #ffd9e0; }
.alert.warning { background: #fffaeb; color: #8b6412; border-color: #feefc7; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }.detail-grid .panel { margin: 0 0 20px; }
dl { display: grid; grid-template-columns: 130px 1fr; gap: 11px; } dt { color: var(--muted); } dd { margin: 0; }
.inline-form { display: flex; align-items: end; gap: 7px; min-width: 440px; }.inline-form button { padding: 7px 11px; }.inline-form input,.inline-form select { padding: 7px 9px; }
.notification-list { padding: 0; overflow: hidden; }.notification { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--line); color: var(--text); }.notification:last-child { border-bottom: 0; }.notification.unread { background: #f3f7ff; border-right: 4px solid var(--primary); }.notification span { display: grid; gap: 5px; }.notification small,.notification time { color: var(--muted); font-size: 11px; }

.guest { min-height: 100vh; background: #f6f9fc; }
.guest-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, .82fr); direction: ltr; }
.guest-visual { direction: rtl; margin: 22px; border-radius: 24px; background: linear-gradient(145deg, #e9f4ff, #eef6ff 45%, #e6faf7); position: relative; overflow: hidden; padding: 37px 44px; display: flex; flex-direction: column; }
.guest-visual:before { content: ''; position: absolute; width: 430px; height: 430px; border-radius: 50%; background: rgba(93,135,255,.1); left: -180px; bottom: -210px; border: 55px solid rgba(255,255,255,.25); }
.guest-brand { display: flex; align-items: center; gap: 12px; font-size: 16px; z-index: 1; }.guest-brand .brand-mark { width: 34px; height: 34px; }.guest-brand .brand-mark:after { width: 17px; height: 17px; }
.guest-copy { z-index: 1; margin-top: auto; margin-bottom: 40px; max-width: 520px; }.guest-copy > span { color: var(--primary); font-weight: 650; font-size: 12px; }.guest-copy h2 { font-size: clamp(34px,4vw,56px); line-height: 1.35; margin: 9px 0 14px; letter-spacing: -1.5px; }.guest-copy p { color: #60758c; font-size: 12px; max-width: 470px; }
.visual-cards { direction: ltr; position: absolute; width: 300px; height: 190px; left: 7%; top: 18%; }.visual-cards > i { position: absolute; border-radius: 18px; box-shadow: 0 16px 35px rgba(60,91,146,.11); }.visual-cards > i:nth-child(1) { width: 180px; height: 115px; background: rgba(255,255,255,.78); left: 60px; top: 30px; transform: rotate(-5deg); }.visual-cards > i:nth-child(2) { width: 65px; height: 65px; background: #ffd06e; left: 20px; top: 0; border-radius: 50%; }.visual-cards > i:nth-child(3) { width: 55px; height: 55px; background: #6ee7d8; right: 0; bottom: 0; border-radius: 50%; }.visual-cards > div { direction: rtl; position: absolute; z-index: 2; background: #fff; left: 82px; top: 57px; width: 150px; border-radius: 13px; padding: 15px; display: grid; box-shadow: 0 12px 28px rgba(60,91,146,.12); }.visual-cards > div span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); margin-bottom: 8px; }.visual-cards > div strong { font-size: 12px; }.visual-cards > div small { font-size: 10px; color: var(--muted); }
.auth-card { direction: rtl; width: min(440px,calc(100% - 50px)); margin: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: 0 16px 45px rgba(20,39,74,.07); }.auth-card h1 { font-size: 25px; margin: 0 0 5px; }.auth-card .muted { margin: 0 0 21px; font-size: 12px; }.auth-card button { width: 100%; margin-top: 3px; min-height: 38px; }.mobile-brand { display: none; }
.guest-legal { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #edf1f6; color: #758398; }
.guest-legal a { min-height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 7px; color: inherit; background: #f7f9fc; font-size: 9px; line-height: 1.5; white-space: nowrap; transition: color .15s ease,background .15s ease; }
.guest-legal a:hover,.guest-legal a:focus-visible { color: #315fc8; background: #edf3ff; }
.auth-flow { width: 100%; min-width: 0; }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.auth-brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.auth-brand > div { display: grid; gap: 1px; }.auth-brand strong { color: #24364d; font-size: 13px; }.auth-brand small { color: #7d8999; font-size: 9px; }
.auth-secondary-action { margin-top: 6px; }

@media (max-width: 1150px) { .stats { grid-template-columns: repeat(3,1fr); }.guest-shell { grid-template-columns: 1fr 1fr; }.visual-cards { transform: scale(.82); left: 1%; } }
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { height: auto; position: static; padding: 10px 14px; border-left: 0; border-bottom: 1px solid var(--line); }
    .sidebar .brand,.sidebar-foot,.nav-section-title { display: none; }.sidebar nav { display: flex; overflow-x: auto; padding: 0; gap: 4px; }.sidebar nav a { white-space: nowrap; margin: 0; min-height: 42px; padding: 8px 11px; }.sidebar nav a em { display: none; }
    .topbar { position: static; padding: 0 18px; }.content { padding: 20px; }.form-grid,.detail-grid { grid-template-columns: 1fr; }.full { grid-column: auto; }.stats { grid-template-columns: repeat(2,1fr); }
    .guest-shell { display: block; padding: 25px 0; }.guest-visual { display: none; }.auth-card { min-height: calc(100vh - 50px); display: flex; flex-direction: column; justify-content: center; }.mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; }
}
@media (max-width: 600px) {
    .topbar-date,.quick-add span,.user-summary > span:last-child { display: none; }.topbar { justify-content: flex-end; height: 66px; }.user-summary { border: 0; padding: 0; }.content { padding: 15px; }.page-head { align-items: flex-start; flex-direction: column; }.welcome-banner { padding: 22px; }.welcome-orbit { display: none; }.stats { grid-template-columns: 1fr 1fr; gap: 10px; }.stats article { min-height: 112px; padding: 15px; }.panel { padding: 15px; }.form-grid { gap: 14px; }.notification { flex-direction: column; }.auth-card { width: calc(100% - 28px); padding: 27px; }.sidebar nav a > span:nth-child(2) { flex: none; }
}
@media (max-width: 410px) { .stats { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .guest-legal { grid-template-columns: repeat(2,minmax(0,1fr)); display: grid; gap: 6px; }.guest-legal a { width: 100%; white-space: normal; text-align: center; } }

/* Top navigation replaces the former full-height sidebar. */
.app-shell { display: block; min-height: 100vh; direction: rtl; }
.workspace { min-width: 0; }
.topbar {
    min-height: 72px;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 24px;
    gap: 20px;
    background: rgba(255,255,255,.96);
}
.topbar-primary { min-width: 0; display: flex; align-items: center; gap: 18px; }
.topbar-brand { flex: 0 0 auto; padding: 0; }
.topbar-brand .brand-mark { width: 32px; height: 32px; }
.topbar-brand .brand-mark:after { width: 16px; height: 16px; }
.top-navigation { display: flex; align-items: center; gap: 4px; }
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
    min-height: 39px;
    padding: 8px 11px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475467;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary:hover, .nav-dropdown.active > summary { color: var(--primary-dark); background: #f1f5ff; }
.nav-dropdown[open] > summary { color: #fff; background: linear-gradient(135deg,#6992ff,#527cf3); box-shadow: 0 5px 14px rgba(93,135,255,.2); }
.nav-dropdown > summary > i { width: 7px; height: 7px; margin-inline-start: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.nav-dropdown[open] > summary > i { transform: rotate(225deg) translate(-1px,-1px); }
.nav-dropdown > summary .menu-count { margin-right: 1px; }
.dropdown-panel {
    width: 305px;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 70;
    padding: 9px;
    border: 1px solid #e3eaf3;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(16,24,40,.14);
}
.dropdown-panel:before { content: ''; position: absolute; top: -6px; right: 24px; width: 11px; height: 11px; transform: rotate(45deg); background: #fff; border-right: 1px solid #e3eaf3; border-top: 1px solid #e3eaf3; }
.dropdown-panel-wide { width: 325px; }
.dropdown-title { display: block; padding: 4px 9px 8px; color: #98a2b3; font-size: 9.5px; font-weight: 750; }
.dropdown-panel a { min-height: 51px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; color: #344054; transition: background .15s,color .15s; }
.dropdown-panel a:hover { color: var(--primary-dark); background: #f5f8ff; }
.dropdown-panel a.active { color: #315bc8; background: #edf3ff; }
.dropdown-panel .nav-icon { width: 31px; height: 31px; border-radius: 8px; color: #64748b; background: #f5f7fa; }
.dropdown-panel a.active .nav-icon, .dropdown-panel a:hover .nav-icon { color: #4f74db; background: #e2eaff; }
.dropdown-panel .nav-icon svg { width: 16px; height: 16px; }
.menu-copy { min-width: 0; flex: 1; display: grid; line-height: 1.4; }
.menu-copy strong { font-size: 11.5px; font-weight: 700; }
.menu-copy small { color: #8a96a8; font-size: 9.5px; font-weight: 450; }
.dropdown-panel a em { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; color: #7349c6; background: #f1eafe; font-size: 8px; font-style: normal; }
.topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 13px; }
.topbar-actions { gap: 7px; }
.topbar .quick-add { height: 38px; }
.topbar .header-create-action { color: #fff; background: linear-gradient(145deg,#6992ff,#4f77ea); box-shadow: 0 5px 13px rgba(65,105,225,.2); }
.topbar .header-create-action:hover { color: #fff; background: linear-gradient(145deg,#5f87f3,#426cdf); }
.topbar .icon-button { width: 38px; height: 38px; }
.content { max-width: 1600px; }

@media (max-width: 1260px) {
    .topbar { gap: 12px; padding-inline: 18px; }
    .topbar-primary { gap: 11px; }
}

@media (max-width: 1050px) {
    .topbar-date { display: none; }
    .quick-add span, .user-summary > span:last-child { display: none; }
    .user-summary { border-left: 0; padding-left: 0; }
    .topbar-tools { gap: 6px; }
}

@media (max-width: 900px) {
    .topbar { position: sticky; min-height: 108px; height: auto; padding: 10px 16px 0; align-items: flex-start; flex-wrap: wrap; }
    .topbar-primary { width: 100%; flex-wrap: wrap; gap: 8px; }
    .topbar-brand { min-height: 38px; }
    .topbar-tools { position: absolute; top: 10px; left: 16px; }
    .top-navigation { width: 100%; min-width: 0; order: 3; border-top: 1px solid var(--line); padding: 5px 0; }
    .nav-dropdown { position: static; }
    .nav-dropdown > summary { min-height: 36px; padding: 7px 10px; }
    .dropdown-panel, .dropdown-panel-wide { width: auto; max-height: min(62vh,480px); overflow-y: auto; top: calc(100% + 1px); right: 14px; left: 14px; }
    .dropdown-panel:before { display: none; }
    .content { padding: 20px; }
}

@media (max-width: 600px) {
    .topbar { min-height: 103px; height: auto; justify-content: space-between; padding-inline: 12px; }
    .topbar-tools { left: 12px; }
    .topbar-brand small { display: none; }
    .topbar-brand strong { font-size: 14px; }
    .topbar-brand .brand-mark { width: 29px; height: 29px; }
    .top-navigation { justify-content: stretch; gap: 2px; }
    .nav-dropdown { flex: 1; }
    .nav-dropdown > summary { justify-content: center; padding-inline: 5px; font-size: 10.5px; white-space: nowrap; }
    .nav-dropdown > summary .menu-count { display: none; }
    .content { padding: 15px; }
}

@media (max-width: 390px) {
    .topbar .quick-add { display: none; }
    .nav-dropdown > summary { font-size: 10px; }
}

/* Installable web app and dedicated mobile shell. */
.mobile-menu-toggle, .mobile-nav-head, .mobile-nav-backdrop, .mobile-bottom-nav { display: none; }
.install-app-button[hidden], .guest-install-button[hidden], .app-toast[hidden] { display: none !important; }
.install-app-button { color: #315bc8; background: #edf3ff; box-shadow: none; }
.guest-install-button { width: 100%; min-height: 42px; margin-top: 13px; color: #315bc8; background: #edf3ff; box-shadow: none; }
.app-toast { position: fixed; z-index: 120; right: 50%; bottom: 24px; transform: translateX(50%); max-width: min(92vw,480px); padding: 11px 16px; border: 1px solid #d7e2ef; border-radius: 12px; color: #24364d; background: rgba(255,255,255,.98); box-shadow: 0 16px 38px rgba(16,24,40,.16); font-size: 11px; text-align: center; }
body.is-offline:before { content: 'آفلاین'; position: fixed; z-index: 121; top: 0; right: 50%; transform: translateX(50%); padding: 3px 11px; border-radius: 0 0 7px 7px; color: #fff; background: #d97706; font-size: 9px; font-weight: 750; }

@media (display-mode: standalone) {
    .topbar { padding-top: max(10px,env(safe-area-inset-top)); }
    .guest-shell { padding-top: env(safe-area-inset-top); }
}

@media (max-width: 900px) {
    body.mobile-nav-open { overflow: hidden; }
    .topbar { min-height: 64px; height: 64px; padding: 8px 14px; align-items: center; flex-wrap: nowrap; }
    .topbar-primary { width: auto; flex-wrap: nowrap; gap: 9px; }
    .mobile-menu-toggle { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; color: #344054; background: #f5f7fa; box-shadow: none; }
    .topbar-brand { min-height: 40px; }
    .topbar-tools { position: static; margin-inline-start: auto; gap: 5px; }
    .top-navigation { width: min(88vw,370px); height: 100vh; height: 100dvh; position: fixed; z-index: 100; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: max(14px,env(safe-area-inset-top)) 12px max(88px,env(safe-area-inset-bottom)); border: 0; background: #fff; box-shadow: -18px 0 55px rgba(16,24,40,.19); transform: translateX(105%); transition: transform .24s ease; direction: rtl; text-align: start; writing-mode: horizontal-tb; unicode-bidi: isolate; }
    body.mobile-nav-open .top-navigation { transform: translateX(0); }
    .mobile-nav-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 0 6px 12px; border-bottom: 1px solid var(--line); direction: rtl; text-align: right; }
    .mobile-nav-head > span { display: grid; gap: 2px; }.mobile-nav-head strong { font-size: 14px; }.mobile-nav-head small { color: var(--muted); font-size: 9.5px; }
    .mobile-nav-close { width: 38px; min-height: 38px; padding: 0; border-radius: 10px; color: #475467; background: #f5f7fa; box-shadow: none; font-size: 24px; font-weight: 400; }
    .nav-dropdown { position: static; margin-bottom: 7px; border: 1px solid #e9eef5; border-radius: 12px; overflow: hidden; }
    .nav-dropdown > summary { min-height: 48px; justify-content: flex-start; padding: 10px 13px; border-radius: 0; font-size: 12px; }
    .nav-dropdown[open] > summary { color: #315bc8; background: #edf3ff; box-shadow: none; }
    .dropdown-panel, .dropdown-panel-wide { width: auto; max-height: none; position: static; overflow: visible; padding: 4px 7px 8px; border: 0; border-top: 1px solid #edf1f6; border-radius: 0; box-shadow: none; direction: rtl; text-align: right; }
    .dropdown-panel a { min-height: 50px; }
    .dropdown-panel:before { display: none; }
    .mobile-nav-backdrop { width: 100%; height: 100%; position: fixed; z-index: 90; inset: 0; padding: 0; border-radius: 0; background: rgba(15,23,42,.34); box-shadow: none; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    body.mobile-nav-open .mobile-nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .workspace { min-height: calc(100vh - 64px); }
    .content { padding: 18px 18px calc(92px + env(safe-area-inset-bottom)); }
    .mobile-bottom-nav { min-height: 66px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: end; position: fixed; z-index: 75; right: 10px; bottom: max(9px,env(safe-area-inset-bottom)); left: 10px; padding: 7px 8px 6px; border: 1px solid rgba(218,228,239,.95); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 13px 38px rgba(16,24,40,.16); backdrop-filter: blur(14px); direction: rtl; }
    .mobile-bottom-nav > :is(a,button) { width: 100%; min-width: 0; min-height: 50px; position: relative; display: grid; place-items: center; align-content: center; gap: 1px; padding: 5px 3px; border: 0; border-radius: 12px; color: #7b8797; background: transparent; box-shadow: none; font: inherit; font-size: 9px; font-weight: 650; white-space: nowrap; }
    .mobile-bottom-nav > :is(a,button) svg { width: 20px; height: 20px; }.mobile-bottom-nav > :is(a,button).active { color: #315bc8; background: #edf3ff; }
    .mobile-bottom-nav > :is(a,button) b { min-width: 16px; height: 16px; position: absolute; top: 2px; right: 6px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 10px; color: #fff; background: #e14962; font-size: 7px; }
    .mobile-bottom-nav > a.mobile-primary-action { width: 58px; height: 58px; min-width: 58px; justify-self: center; margin-top: -20px; border: 5px solid #f6f9fc; border-radius: 19px; color: #fff; background: linear-gradient(145deg,#6992ff,#4f77ea); box-shadow: 0 8px 18px rgba(65,105,225,.28); }
    .mobile-bottom-nav > a.mobile-primary-action svg { width: 23px; height: 23px; }.mobile-bottom-nav > a.mobile-primary-action span { color: #fff; }
    .top-navigation :is(summary,a,.menu-copy,.menu-copy strong,.menu-copy small) { direction: rtl; text-align: start; unicode-bidi: isolate; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .app-toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
    .topbar { min-height: 60px; height: 60px; padding-inline: 10px; }
    .topbar-brand small { display: none; }.topbar-brand strong { font-size: 13px; }.topbar-brand .brand-mark { width: 28px; height: 28px; }
    .topbar-actions { gap: 4px; }.topbar-actions > a.icon-button, .topbar .quick-add { display: none; }
    .topbar .icon-button, .mobile-menu-toggle { width: 38px; height: 38px; min-height: 38px; }
    .user-summary { display: none; }
    .workspace { min-height: calc(100vh - 60px); }
    .content { padding: 14px 12px calc(90px + env(safe-area-inset-bottom)); }
    .page-head { margin-bottom: 15px; gap: 11px; }.page-head h1 { margin-bottom: 2px; font-size: 21px; }.page-head p { font-size: 10.5px; }
    .page-head > .button, .page-head > .head-actions { width: 100%; }
    .page-head > .button { min-height: 43px; }
    .panel { padding: 13px; border-radius: 13px; }
    input, select, textarea { min-height: 43px; }
    textarea { min-height: 96px; }
    button, .button { min-height: 43px; }
    .form-actions { position: sticky; z-index: 8; bottom: calc(78px + env(safe-area-inset-bottom)); margin: 8px -13px -13px; padding: 10px 13px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
    .form-actions button, .form-actions .button { flex: 1; }
    .filter-bar { align-items: stretch; gap: 9px; }.filter-bar label { min-width: 100%; }.filter-bar button, .filter-bar .button { flex: 1; }
    .table-wrap { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .auth-card { min-height: calc(100dvh - 28px); width: calc(100% - 20px); padding: 23px; border-radius: 20px; }
    .mobile-brand { margin-bottom: 27px; }
}

@media (max-width: 360px) {
    .topbar-brand > span:last-child { display: none; }
    .mobile-bottom-nav { right: 5px; left: 5px; padding-inline: 4px; }
    .mobile-bottom-nav > :is(a,button) { padding-inline: 2px; }
}

/* Workspace switcher and personal profile. */
.workspace-panel { width: 330px; max-height: min(72vh,560px); overflow-y: auto; }
.workspace-menu-list { display: grid; gap: 5px; padding-bottom: 7px; }
.workspace-switch-form { margin: 0; }
.workspace-switch-form button { width: 100%; min-height: 51px; justify-content: flex-start; gap: 10px; padding: 7px 9px; border-radius: 9px; color: #344054; background: transparent; box-shadow: none; text-align: right; }
.workspace-switch-form button:hover { color: var(--primary-dark); background: #f5f8ff; transform: none; }
.workspace-switch-form button:disabled { cursor: default; opacity: 1; color: #315bc8; background: #edf3ff; }
.workspace-switch-form button b { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; color: #14765a; background: #dcfaef; font-size: 8.5px; }
.workspace-monogram { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 8px; color: #4567c5; background: #e5edff; font-size: 12px; font-weight: 800; }
.workspace-menu-footer { margin-top: 2px; padding-top: 7px; border-top: 1px solid #edf1f6; }
.platform-console-entry { margin-top: 3px; border: 1px solid #ddd6fe; color: #5b3ab5 !important; background: linear-gradient(135deg,#f5f3ff,#eef2ff) !important; }
.platform-console-entry .nav-icon { color: #6941c6 !important; background: #e9e3ff !important; }
.platform-console .topbar { border-bottom-color: #ddd6fe; background: rgba(252,251,255,.97); }
.platform-console .topbar-brand small { color: #6941c6; font-weight: 700; }
.platform-console .platform-nav > summary:hover,
.platform-console .platform-nav.active > summary { color: #5b3ab5; border-color: #ddd6fe; background: #f5f3ff; }
.platform-console .platform-nav[open] > summary { color: #fff; background: linear-gradient(135deg,#7f56d9,#6941c6); box-shadow: 0 5px 14px rgba(105,65,198,.22); }
.platform-return-link { min-height: 39px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e6e9ef; border-radius: 9px; color: #475467; background: #fff; }
.platform-return-link:hover { color: #315bc8; border-color: #d7e2fb; background: #f5f8ff; }
.platform-return-link > svg { width: 17px; height: 17px; flex: 0 0 17px; }
.platform-return-link > span { display: none; }
.platform-home-action { color: #6941c6 !important; background: #f5f3ff !important; }
.target-company-picker { max-width: 1120px; display: grid; grid-template-columns: minmax(240px,1fr) auto; align-items: end; gap: 10px 14px; }
.target-company-picker label { display: grid; gap: 5px; font-size: 11.5px; font-weight: 650; }
.target-company-picker small { grid-column: 1/-1; color: var(--muted); }
.profile-layout { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(300px,1fr) minmax(300px,1fr); gap: 14px; margin-bottom:14px; }
.profile-layout > .panel { margin: 0; }
.profile-identity { display: flex; align-items: center; gap: 14px; align-self: start; }
.profile-identity h2 { margin-bottom: 3px; }
.profile-identity p { margin: 0 0 9px; color: var(--muted); text-align: right; }
.profile-avatar { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 18px; color: #3f61bf; background: linear-gradient(135deg,#dce8ff,#ecfdf9); font-size: 23px; font-weight: 800; }
.profile-memberships { margin-top: 14px; }
.profile-session-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.profile-session-summary h2 { margin: 0 0 4px; }.profile-session-summary p { margin: 0; color: var(--muted); }
.profile-security{display:grid;gap:14px}.profile-security>.panel-head{margin-bottom:0}.mfa-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mfa-method-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe}.mfa-method-card.selected{border-color:#9fb8ff;background:linear-gradient(135deg,#f4f7ff,#f6fffc);box-shadow:inset 0 0 0 1px #dce6ff}.mfa-method-card.disabled{opacity:.78;background:#f8f9fb}.mfa-method-card h3{margin:0 0 4px;font-size:12px}.mfa-method-card p{margin:0;color:var(--muted);font-size:9.5px;line-height:1.85}.mfa-method-card form{margin:0}.mfa-method-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#4f63d7;background:#e9edff;font-size:18px;font-weight:900}.mfa-method-icon.sms{color:#087c62;background:#dcf7ed}.mfa-sms-confirm{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:10px;padding:13px;border:1px dashed #b7c9ef;border-radius:13px;background:#f7faff}.mfa-sms-confirm label{display:grid;gap:5px}.mfa-sms-confirm input{max-width:260px;text-align:center;letter-spacing:.25em;font-size:12px}.mfa-sms-confirm button{margin:0}.mfa-account-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#f7f9fc}.mfa-account-tools p{margin:3px 0 0;color:var(--muted);font-size:9px}.mfa-account-tools form{margin:0}.mfa-sms-alternative{display:flex;align-items:center;justify-content:space-between;gap:14px}.mfa-sms-alternative p{margin:4px 0 0;color:var(--muted)}.mfa-sms-alternative form{margin:0}

@media (max-width: 1100px) {
    .profile-layout { grid-template-columns: 1fr 1fr; }
    .profile-identity { grid-column: 1/-1; }
}

@media (max-width: 900px) {
    .workspace-panel { width: auto; max-height: none; }
    .workspace-switch-form button { min-height: 50px; }
    .platform-return-link { min-height: 54px; margin-bottom: 10px; padding: 9px 12px; border-color: #ddd6fe; border-radius: 12px; color: #5b3ab5; background: #f5f3ff; }
    .platform-return-link > svg { width: 22px; height: 22px; }
    .platform-return-link > span { min-width: 0; display: grid; gap: 1px; }
    .platform-return-link strong { font-size: 11.5px; }
    .platform-return-link small { color: #7f6bb3; font-size: 9px; }
    .platform-mobile-nav > a.mobile-primary-action { background: linear-gradient(145deg,#7f56d9,#6941c6); box-shadow: 0 8px 18px rgba(105,65,198,.28); }
}

@media (max-width: 640px) {
    .target-company-picker, .profile-layout { grid-template-columns: 1fr; }
    .target-company-picker button { width: 100%; }
    .profile-identity { grid-column: auto; }
    .profile-session-summary { align-items: stretch; flex-direction: column; }
    .profile-session-summary .button { width: 100%; }
    .mfa-method-grid{grid-template-columns:1fr}.mfa-method-card{grid-template-columns:auto minmax(0,1fr)}.mfa-method-card>.button,.mfa-method-card>form,.mfa-method-card>.badge{grid-column:1/-1;width:100%;text-align:center}.mfa-method-card form button{width:100%}.mfa-sms-confirm{grid-template-columns:1fr}.mfa-sms-confirm input{max-width:none}.mfa-sms-confirm button{width:100%}.mfa-account-tools,.mfa-sms-alternative{align-items:stretch;flex-direction:column}.mfa-account-tools button,.mfa-sms-alternative button{width:100%}
}

/* Password visibility and login security controls. */
.password-control { position: relative; display: block; width: 100%; }
.password-control > input { width: 100%; padding-inline-end: 44px; }
.password-control > button.password-toggle, .auth-card .password-control > button.password-toggle { width: 32px; min-width: 32px; max-width: 32px; height: 32px; min-height: 32px; position: absolute; inset-inline-end: 5px; top: 50%; margin: 0; transform: translateY(-50%); display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #667085; background: transparent; box-shadow: none; }
.password-toggle:hover, .password-toggle:focus-visible { color: #315bc8; background: #edf3ff; transform: translateY(-50%); }
.password-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.captcha-image-row { display: flex; align-items: center; gap: 8px; margin: 5px 0 2px; }
.captcha-image-row img { width: min(300px,calc(100% - 84px)); height: 72px; object-fit: contain; flex:1 1 300px; border: 1px solid #cbd8ed; border-radius: 10px; background: #f4f7ff; }
.captcha-refresh, .auth-card .captcha-refresh { min-width: 76px; min-height: 38px; padding: 7px 8px; color: #315bc8; background: #edf3ff; box-shadow: none; font-size: 9px; }
@media(max-width:430px){.captcha-image-row{display:grid;grid-template-columns:1fr}.captcha-image-row img{width:100%;max-width:none}.captcha-refresh,.auth-card .captcha-refresh{width:100%}}
@media(max-width:430px){.login-audience{grid-template-columns:1fr}.login-audience>span{padding:8px 10px}.employee-service-stats{grid-template-columns:1fr 1fr}}
.captcha-notice { color: var(--muted); line-height: 1.8; }
.remember-login { grid-template-columns: 20px 1fr; align-items: center; column-gap: 8px; }
.remember-login input { width: 18px; min-height: 18px; margin: 0; }
.remember-login span { font-weight: 650; }
.remember-login small { grid-column: 2; }

/* Version history, modules and commercial packages. */
.module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.module-card { min-height: 184px; display: flex; flex-direction: column; margin: 0; }
.module-card.core { border-color: #b9caee; background: linear-gradient(145deg,#fff,#f4f7ff); }
.module-card header, .module-card footer, .release-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.module-card h2 { margin: 0 0 4px; font-size: 14px; }
.module-card p { flex: 1; margin: 13px 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.module-card footer { align-items: center; padding-top: 10px; border-top: 1px solid var(--line); color: #475467; font-size: 10px; }
.module-card footer small { max-width: 65%; color: var(--muted); text-align: left; }
.package-choice-grid, .module-selector > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.package-choice, .module-option { min-height: 82px; display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 10px !important; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.package-choice:has(input:checked), .module-option:has(input:checked) { border-color: #9bb3ee; background: #f4f7ff; box-shadow: 0 0 0 2px rgba(70,105,200,.06); }
.package-choice input, .module-option input { width: 17px; min-height: 17px; margin-top: 2px; }
.package-choice span, .module-option span { min-width: 0; display: grid; gap: 4px; }
.package-choice strong, .module-option strong { color: #26354a; font-size: 11.5px; }
.package-choice small, .module-option small, .module-option em { color: var(--muted); font-size: 9.5px; font-style: normal; line-height: 1.65; }
.module-selector { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.module-selector legend { padding: 0 8px; color: #344054; font-size: 12px; font-weight: 750; }
.module-selector > p { margin: 0 0 12px; color: var(--muted); }
.release-timeline { display: grid; gap: 14px; }
.release-card { position: relative; margin: 0; padding-inline-start: 22px; }
.release-card.current { border-color: #a9bdea; box-shadow: 0 12px 30px rgba(55,85,150,.08); }
.release-card.current:before { content: ''; width: 4px; position: absolute; inset-block: 18px; inset-inline-start: 0; border-radius: 4px; background: #5b82ed; }
.release-card h2 { margin: 4px 0 0; font-size: 16px; }
.release-card time, .release-version { color: var(--muted); font-size: 10px; }
.release-card ul { margin: 14px 0; padding-inline-start: 20px; line-height: 1.9; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); font-size: 11px; }
.pagination > div { display: flex; align-items: center; gap: 10px; }
.pagination strong { color: #344054; font-size: 11px; }
.pagination .button { min-height: 32px; padding: 6px 11px; }

@media (max-width: 1180px) {
    .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .module-grid, .package-choice-grid, .module-selector > div { grid-template-columns: 1fr; }
    .module-card { min-height: 0; }
    .release-card header { flex-direction: column; gap: 4px; }
    .pagination { align-items: stretch; flex-direction: column; }
    .pagination > div { justify-content: space-between; }
}

/* Employee records. */
.employee-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.employee-stats article { min-height:91px; display:flex; flex-direction:column; justify-content:space-between; padding:16px; border:1px solid #e3eaf3; border-radius:14px; background:linear-gradient(145deg,#fff,#f7faff); }
.employee-stats span { color:var(--muted); font-size:10.5px; }.employee-stats strong { color:#315bc8; font-size:22px; }
.employee-filter { display:flex; align-items:end; gap:10px; }.employee-filter label:first-child { flex:1; }.employee-filter label { min-width:190px; }
.table-subtext { display:block; margin-top:3px; color:var(--muted); font-size:9.5px; }
.privacy-notice { padding:11px 13px; border:1px solid #d8e4fa; border-radius:10px; color:#3f5c91; background:#f3f7ff; font-size:10.5px; line-height:1.8; }
.employee-profile-grid { display:grid; grid-template-columns:minmax(230px,.65fr) repeat(2,minmax(280px,1fr)); gap:14px; margin-bottom:14px; }.employee-profile-grid>.panel { margin:0; }
.employee-identity { display:flex; align-items:center; gap:14px; align-self:start; }.employee-identity h2 { margin:0 0 4px; }.employee-identity p { margin:0 0 10px; color:var(--muted); }
.record-list { margin:0; display:grid; gap:0; }.record-list>div { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf1f6; }.record-list>div:last-child { border:0; }.record-list dt { color:var(--muted); font-size:10px; }.record-list dd { margin:0; color:#344054; font-size:11px; font-weight:650; text-align:left; }
.dependents-panel { margin-top:14px; }.dependent-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.dependent-card { margin-top:10px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }.dependent-card summary { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; cursor:pointer; list-style:none; }.dependent-card summary::-webkit-details-marker{display:none}.dependent-card summary span { display:grid; gap:3px; }.dependent-card summary small { color:var(--muted); font-size:9.5px; }.dependent-card summary i { color:#557deb; font-size:10px; font-style:normal; }.dependent-card[open] summary { background:#f7f9fc; border-bottom:1px solid var(--line); }
.dependent-form { padding:13px; }.dependent-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.dependent-card>form:last-child { padding:0 13px 13px; }.dependent-card .danger { color:#b4233d; border-color:#fac8d1; background:#fff7f8; }
@media(max-width:1050px){.employee-profile-grid{grid-template-columns:1fr 1fr}.employee-identity{grid-column:1/-1}.employee-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.employee-profile-grid,.dependent-list,.dependent-fields,.employee-stats{grid-template-columns:1fr}.employee-identity{grid-column:auto}.employee-filter{align-items:stretch;flex-direction:column}.employee-filter label{width:100%;min-width:0}.employee-filter button,.employee-filter .button{width:100%}}

/* پرونده جامع کارکنان */
.employee-form-sections,.employee-record-sections{display:grid;gap:14px}.employee-form-section{padding:16px}.employee-form-section .form-section-title{margin:0 0 14px;padding:0 0 11px;border-bottom:1px solid var(--line)}.employee-form-section .form-section-title strong{font-size:14px}.employee-form-section .form-section-title small{display:block;margin-top:3px;color:var(--muted)}.sticky-form-actions{position:sticky;bottom:10px;z-index:5;display:flex;justify-content:flex-end;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(25,42,70,.10);backdrop-filter:blur(8px)}
.employee-record-sections{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.employee-record-section{min-width:0}.record-cards{display:grid;gap:8px}.record-card{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.record-card summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;list-style:none}.record-card summary::-webkit-details-marker{display:none}.record-card summary span{color:var(--muted);font-size:10px}.record-card[open] summary{background:#f7f9fc;border-bottom:1px solid var(--line)}.record-form{padding:13px}.record-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.record-delete{padding:0 13px 13px}.add-record{margin-top:10px;border-style:dashed}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-card{border:1px solid var(--line);border-radius:12px;padding:13px}.catalog-card h3{margin:0 0 10px;font-size:13px}.catalog-items{display:grid;gap:6px}.catalog-item{border-bottom:1px solid var(--line);padding-bottom:6px}.catalog-item summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.compact-form{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;align-items:end;padding:10px 0}.add-catalog-item{margin-top:10px;border-top:1px dashed var(--line)}
@media(max-width:900px){.employee-record-sections,.catalog-grid{grid-template-columns:1fr}}@media(max-width:700px){.record-form-grid,.compact-form{grid-template-columns:1fr}.sticky-form-actions{bottom:64px}.sticky-form-actions button{width:100%}}

/* BPMS graphical designer, forms and monitoring. */
.bpms-designer{display:grid;grid-template-columns:210px minmax(520px,1fr) 230px;gap:12px;direction:rtl;margin-bottom:14px}.bpms-designer>.panel{margin:0}.bpms-palette,.bpms-inspector{align-self:start;display:grid;gap:10px}.bpms-palette h2,.bpms-inspector h2{margin:0;font-size:13px}.bpms-palette p,.bpms-inspector p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.bpms-palette hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--line)}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.palette-grid button{min-height:34px;padding:6px;font-size:9px}.bpms-workspace{min-width:0;padding:0;overflow:hidden}.designer-toolbar{min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fafcff}.designer-toolbar span{font-weight:750}.designer-toolbar small{color:var(--muted)}.process-canvas{height:570px;position:relative;overflow:auto;direction:ltr;background-color:#fbfcfe;background-image:radial-gradient(#d9e1ed 1px,transparent 1px);background-size:20px 20px}.process-canvas>[data-node-layer],.process-canvas>svg{width:1800px;height:900px;position:absolute;inset:0}.process-canvas>svg{z-index:1;overflow:visible}.process-canvas>[data-node-layer]{z-index:2;pointer-events:none}.process-node{width:142px;min-height:64px;position:absolute;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:9px 12px;border:1px solid #aebfe2;border-radius:12px;color:#2f4c91;background:#fff;box-shadow:0 7px 18px rgba(40,64,110,.1);text-align:left;touch-action:none;pointer-events:auto;cursor:grab}.process-node:active{cursor:grabbing}.process-node span{color:#7181a2;font-size:8px}.process-node strong{font-size:10.5px;line-height:1.45}.process-node.selected{border-color:#416ce0;box-shadow:0 0 0 3px rgba(65,108,224,.15)}.process-node.node-start,.process-node.node-end{width:92px;border-radius:999px;align-items:center}.process-node.node-start{color:#08745a;border-color:#91dbc7;background:#effcf7}.process-node.node-end{color:#a2394d;border-color:#efafba;background:#fff4f6}.process-node.node-exclusive_gateway,.process-node.node-parallel_gateway{border-color:#e0ba62;background:#fffaf0}.process-node.node-timer,.process-node.node-event{border-color:#79bad2;background:#f1fbff}.process-node.node-subprocess{border-style:double;border-width:3px}.process-edge{fill:none;stroke:#8ba0c5;stroke-width:2.1;pointer-events:stroke;cursor:pointer;marker-end:url(#arrow)}.process-edge.selected{stroke:#416ce0;stroke-width:3.5}.process-edge-label{fill:#53657e;font-size:9px;text-anchor:middle;pointer-events:none}.bpms-inspector>[data-node-inspector],.bpms-inspector>[data-edge-inspector]{display:grid;gap:9px}.bpms-inspector>[hidden]{display:none}.form-builder-panel{margin-top:14px}.process-form-list{display:grid;gap:10px}.process-form-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fafcff}.process-form-card>header{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:8px;margin-bottom:10px}.form-field-list{display:grid;gap:7px;margin-bottom:8px}.form-builder-row{display:grid;grid-template-columns:1.2fr 1fr 110px 1fr auto 34px;align-items:center;gap:7px}.form-builder-row input,.form-builder-row select{min-width:0}.form-builder-row .check{display:flex;white-space:nowrap}.form-builder-row button{min-height:34px;padding:4px}.compact-publish-form{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;align-items:end;gap:12px}.process-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.process-template-card{display:flex;flex-direction:column;margin:0}.process-template-card header{display:flex;justify-content:space-between}.process-template-card h2{margin:14px 0 7px;font-size:14px}.process-template-card p{flex:1;color:var(--muted);line-height:1.9}.process-template-card form button{width:100%}
@media(max-width:1200px){.bpms-designer{grid-template-columns:190px minmax(480px,1fr)}.bpms-inspector{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.process-template-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.bpms-designer{grid-template-columns:1fr}.bpms-palette,.bpms-inspector{grid-column:auto}.process-canvas{height:490px}.compact-publish-form,.process-template-grid{grid-template-columns:1fr}.form-builder-row,.process-form-card>header{grid-template-columns:1fr 1fr}.form-builder-row button{width:100%}}
@media(max-width:520px){.palette-grid,.form-builder-row,.process-form-card>header{grid-template-columns:1fr}.process-canvas{height:430px}}
.person-search{margin:.35rem 0 .45rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='m12 12 4 4'/%3E%3C/svg%3E") no-repeat left .7rem center;padding-left:2.3rem!important}.person-search-status{display:block;color:var(--muted,#64748b);min-height:1.1rem}.people-picker-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:.6rem;margin-bottom:.75rem}.people-picker-toolbar .person-search{margin:0}.people-selected-count{white-space:nowrap;color:var(--muted,#64748b)}[data-person-item][hidden]{display:none!important}@media(max-width:700px){.people-picker-toolbar{grid-template-columns:1fr}.people-picker-toolbar .button{width:100%}}

/* Searchable checkbox dropdown for large people lists. */
[data-people-picker]{overflow:visible}.people-multi-picker{position:relative;margin-top:9px}.people-multi-trigger{width:100%;min-height:52px;display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:9px;padding:8px 12px;border:1px solid #d7dfeb;border-radius:10px;background:#fff;color:#24344d;text-align:right;box-shadow:none}.people-multi-trigger:hover,.people-multi-trigger:focus{border-color:#6f91e9;background:#fbfdff}.people-multi-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.people-multi-trigger-count{color:var(--muted);font-weight:500;white-space:nowrap}.people-multi-trigger i{font-size:17px;font-style:normal;color:#6b7b93;transition:transform .18s ease}.people-multi-picker.open .people-multi-trigger i{transform:rotate(180deg)}.people-multi-trigger.has-selection{border-color:#9bb2ea;background:#f8faff}.people-multi-panel{width:100%;min-width:min(500px,calc(100vw - 48px));position:absolute;z-index:120;top:calc(100% + 6px);right:0;padding:10px;border:1px solid #ccd7e6;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(32,52,82,.18)}.people-multi-panel[hidden]{display:none!important}.people-multi-head{display:grid;grid-template-columns:1fr 34px;align-items:center;gap:7px}.people-multi-search{margin:0!important}.people-picker-close{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:8px;background:#f1f4f8;color:#53657e;font-size:20px}.people-multi-actions{display:flex;align-items:center;gap:10px;min-height:34px;padding:5px 2px 8px;border-bottom:1px solid #edf1f6}.people-multi-actions .people-selected-count{margin-left:auto}.people-picker-link{min-height:auto;padding:3px 4px;border:0;background:transparent;color:#315fc8;font-size:10px}.people-picker-link:hover{background:#eef3ff}.people-picker-link.danger{color:#b33b50}.people-multi-options{max-height:285px;overflow:auto;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;margin:8px 0 0!important;padding:0 2px!important}.people-multi-option{min-height:49px;display:flex!important;align-items:center;gap:9px;margin:0!important;padding:7px 9px!important;border:1px solid transparent!important;border-radius:9px!important;background:#fff!important;cursor:pointer}.people-multi-option:hover{border-color:#d9e3f6!important;background:#f8faff!important}.people-multi-option:has(input:checked){border-color:#b9caf2!important;background:#f2f6ff!important}.people-multi-option input{flex:0 0 auto}.people-multi-option span{display:grid;gap:2px}.people-multi-option strong{font-size:11px}.people-multi-option small{color:var(--muted);font-size:9.5px}.people-multi-option[hidden]{display:none!important}
@media(max-width:700px){.people-multi-trigger{grid-template-columns:1fr 20px}.people-multi-trigger-count{grid-column:1/-1}.people-multi-panel{min-width:0;position:fixed;z-index:400;inset:74px 10px auto;width:calc(100vw - 20px);max-height:calc(100vh - 92px);overflow:hidden}.people-multi-options{max-height:calc(100vh - 210px)}.people-multi-actions{flex-wrap:wrap}.people-multi-actions .people-selected-count{width:100%;margin:0}.people-multi-picker.open:before{content:"";position:fixed;z-index:399;inset:0;background:rgba(20,31,50,.28)}}

/* User-friendly activity and security log. */
.audit-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}.audit-summary article{min-height:104px;display:grid;align-content:space-between;gap:3px;padding:14px;border:1px solid #dfe7f2;border-radius:14px;background:linear-gradient(145deg,#fff,#f8faff)}.audit-summary span{color:#65748a;font-size:10px}.audit-summary strong{color:#315fc8;font-size:24px}.audit-summary small{color:#8591a3;font-size:9.5px}.audit-summary .success strong{color:#08765f}.audit-summary .warning strong{color:#a76712}.audit-summary .error strong{color:#b33b50}.audit-filter{display:grid;gap:12px}.audit-filter-main{display:grid;grid-template-columns:minmax(260px,1.6fr) repeat(4,minmax(145px,.75fr));gap:9px;align-items:end}.audit-search input{padding-inline-start:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none' stroke='%23738398' stroke-width='1.8'%3E%3Ccircle cx='7.5' cy='7.5' r='5'/%3E%3Cpath d='m11.3 11.3 4 4'/%3E%3C/svg%3E") no-repeat 11px center}.audit-advanced{border-top:1px solid var(--line);padding-top:10px}.audit-advanced>summary{width:max-content;color:#315fc8;font-size:10.5px;font-weight:700;cursor:pointer}.audit-advanced>div{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:9px;align-items:end;padding-top:12px}.audit-feed{position:relative;display:grid;gap:9px}.audit-feed:before{content:"";width:2px;position:absolute;z-index:0;inset-block:20px;inset-inline-start:16px;background:#dde5f1}.audit-event{position:relative;z-index:1;display:grid;grid-template-columns:18px 1fr;gap:11px;margin:0;padding:13px 14px}.audit-marker{width:11px;height:11px;margin-top:8px;border:3px solid #fff;border-radius:50%;background:#6b86c8;box-shadow:0 0 0 2px #b9c8e8}.audit-event.severity-success .audit-marker{background:#159374;box-shadow:0 0 0 2px #a9ddcf}.audit-event.severity-warning .audit-marker{background:#d28a21;box-shadow:0 0 0 2px #f0d2a5}.audit-event.severity-error .audit-marker{background:#cc4d61;box-shadow:0 0 0 2px #f0b8c1}.audit-event-body{min-width:0}.audit-event header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.audit-event h2{margin:6px 0 0;color:#293a53;font-size:13px}.audit-event time{flex:0 0 auto;color:#77869b;font-size:9.5px}.audit-badges{display:flex;flex-wrap:wrap;gap:5px}.audit-chip{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border-radius:99px;background:#eef2f7;color:#52637a;font-size:8.8px;font-weight:700}.audit-chip.status-success{color:#08705a;background:#e9f8f3}.audit-chip.status-warning{color:#945d0c;background:#fff5e5}.audit-chip.status-error{color:#a8364a;background:#fff0f2}.audit-chip.source{color:#385d9f;background:#edf3ff}.audit-context{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px;color:#7a8799;font-size:9.5px}.audit-context span{display:flex;gap:5px}.audit-context strong{color:#41516a;font-weight:700}.audit-details,.audit-technical{margin-top:9px;border-top:1px solid #edf1f6;padding-top:8px}.audit-details summary,.audit-technical summary{width:max-content;color:#315fc8;font-size:9.5px;cursor:pointer}.audit-details dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:9px 0 0}.audit-details dl>div{min-width:0;padding:7px 9px;border-radius:8px;background:#f7f9fc}.audit-details dt{color:#7a8799;font-size:8.8px}.audit-details dd{overflow-wrap:anywhere;margin:3px 0 0;color:#34445b;font-size:10px}.audit-technical{border:0;padding-top:0}.audit-technical p{margin:7px 0 0;color:#8490a1;font-size:9px;direction:ltr;text-align:left;overflow-wrap:anywhere}.audit-technical code{font-size:9px}.audit-feed .empty-state{text-align:center;padding:35px}.audit-feed .empty-state h2{margin:0 0 7px}
@media(max-width:1200px){.audit-filter-main{grid-template-columns:repeat(3,1fr)}.audit-search{grid-column:span 2}.audit-advanced>div{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.audit-summary{grid-template-columns:1fr 1fr}.audit-filter-main,.audit-advanced>div{grid-template-columns:1fr}.audit-search{grid-column:auto}.audit-event header{flex-direction:column}.audit-event time{order:-1}.audit-context{display:grid;gap:5px}.audit-details dl{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.audit-summary{grid-template-columns:1fr}.audit-details dl{grid-template-columns:1fr}.audit-event{padding:11px 10px}.audit-feed:before{inset-inline-start:12px}}