@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-700.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
    --navy: #071d3c;
    --navy-2: #102f5b;
    --navy-3: #173c70;
    --blue: #416ba5;
    --teal: #318875;
    --teal-dark: #1f665b;
    --mint: #d7efe7;
    --gold: #d9ac55;
    --ink: #122541;
    --ink-2: #3b506b;
    --muted: #788ba2;
    --line: #e4eaf1;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --bg: #f2f6fa;
    --danger: #c84e5a;
    --warning: #b87b27;
    --success: #288268;
    --shadow: 0 18px 48px rgba(7, 29, 60, .08);
    --shadow-lg: 0 28px 80px rgba(7, 29, 60, .16);
    --radius: 22px;
    --sidebar-width: 286px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Readex Pro", "Segoe UI", Tahoma, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
::selection { background: var(--mint); color: var(--navy); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.app-body { min-height: 100vh; overflow-x: hidden; background: linear-gradient(135deg, #f5f8fb 0%, #eef5f4 100%); }
.app-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .36; background-image: linear-gradient(rgba(65,107,165,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(65,107,165,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.app-shell { min-height: 100vh; display: flex; }

.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); color: #e9f1fb; background: linear-gradient(160deg, rgba(7,29,60,.98), rgba(14,48,91,.98)), url("brand/hero-waves.jpg") center/cover; padding: 22px 15px 18px; display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; z-index: 30; overflow: hidden; box-shadow: -18px 0 45px rgba(7,29,60,.14); }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: radial-gradient(circle at 10% 22%, rgba(217,172,85,.45), transparent 24%), linear-gradient(135deg, transparent 0 45%, rgba(49,136,117,.2) 46% 49%, transparent 50%); }
.sidebar > * { position: relative; z-index: 1; }
.brand-block { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 20px; }
.brand { display: flex; align-items: center; min-width: 0; gap: 9px; }
.brand-logo { width: 155px; height: 53px; object-fit: contain; object-position: right center; display: block; }
.brand-copy { display: none; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-size: 15px; }
.brand-copy small { color: #a9bfdc; font-size: 10px; margin-top: 2px; }
.icon-button { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; padding: 5px; }
.sidebar-close, .menu-toggle { display: none; }
.profile-mini { display: flex; align-items: center; gap: 10px; margin: 4px 3px 24px; padding: 13px 11px; border: 1px solid rgba(210,231,252,.12); border-radius: 17px; background: rgba(255,255,255,.085); backdrop-filter: blur(14px); }
.profile-mini-copy { min-width: 0; flex: 1; }
.profile-mini strong, .profile-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-mini strong { color: #fff; font-size: 12px; }
.profile-mini small { color: #a8c0dc; font-size: 10px; margin-top: 4px; }
.online-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #83d4ad; box-shadow: 0 0 0 5px rgba(131,212,173,.1); }
.nav-list { overflow-y: auto; padding-inline: 2px; scrollbar-width: thin; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 10px 13px; margin: 4px 0; border: 1px solid transparent; border-radius: 15px; color: #bad0e7; font-size: 12px; transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(-3px); }
.nav-item.active { color: #fff; background: linear-gradient(100deg, rgba(49,136,117,.56), rgba(65,107,165,.2)); border-color: rgba(170,222,210,.18); box-shadow: inset -3px 0 0 var(--mint), 0 12px 30px rgba(0,0,0,.09); }
.nav-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: #a8dacc; background: rgba(255,255,255,.08); font-size: 16px; line-height: 1; }
.nav-item.active .nav-icon { color: var(--navy); background: var(--mint); }
.nav-divider { height: 1px; margin: 20px 12px 14px; background: rgba(203,224,244,.14); }
.nav-caption { margin: 0 14px 8px; color: #7695b9; font-size: 10px; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(203,224,244,.13); }
.sidebar-footer-note { display: flex; align-items: center; gap: 8px; padding: 7px 13px 10px; color: #a8c0dc; font-size: 10px; }
.sidebar-footer-note .status-pulse { width: 6px; height: 6px; }
.logout-link { color: #c2d0df; }
.sidebar-footer > small { display: block; padding-top: 10px; text-align: center; color: #6e89ab; font-size: 9px; }
.status-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7ed1a8; box-shadow: 0 0 0 0 rgba(126,209,168,.55); animation: pulse-status 2.5s infinite; }
@keyframes pulse-status { 0%, 100% { box-shadow: 0 0 0 0 rgba(126,209,168,.36); } 50% { box-shadow: 0 0 0 6px rgba(126,209,168,0); } }

.main-content { width: calc(100% - var(--sidebar-width)); margin-right: var(--sidebar-width); min-height: 100vh; position: relative; }
.topbar { min-height: 86px; padding: 0 42px; border-bottom: 1px solid rgba(218,226,237,.86); background: rgba(255,255,255,.78); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 20; }
.topbar-title { min-width: 0; }
.topbar-title h1 { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.eyebrow { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .1px; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.topbar-secure { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.top-user { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 12px; }
.notification-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.9); color: var(--navy-2); display: grid; place-items: center; position: relative; font-size: 22px; transition: transform .2s, box-shadow .2s; }
.notification-button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.notification-button b { min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 20px; background: var(--danger); color: #fff; display: grid; place-items: center; position: absolute; top: -5px; left: -5px; font-size: 9px; }
.avatar { width: 39px; height: 39px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.3); border-radius: 13px; background: linear-gradient(145deg, #bde6d5, #4f8fbb); color: var(--navy); display: grid; place-items: center; font-weight: 700; }
.avatar-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.sidebar-overlay { display: none; }
.content-wrap { width: min(1480px, 100%); margin: 0 auto; padding: 36px 42px 62px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; animation: reveal-up .45s both; }
.page-heading h2 { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: -.6px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.heading-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 9px; }
.welcome-hero { min-height: 157px; display: flex; align-items: center; gap: 22px; overflow: hidden; padding: 25px 28px; margin-bottom: 21px; border: 1px solid rgba(54,119,113,.16); border-radius: 24px; color: #fff; background: linear-gradient(110deg, #0a2449, #173c70 64%, #2f806e); box-shadow: 0 20px 45px rgba(7,29,60,.16); position: relative; isolation: isolate; animation: reveal-up .45s .08s both; }
.welcome-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .27; background: url("brand/hero-waves.jpg") center/cover; mix-blend-mode: screen; }
.welcome-hero::after { content: ""; width: 260px; height: 260px; position: absolute; left: 24%; bottom: -200px; border: 1px solid rgba(213,239,232,.25); border-radius: 50%; box-shadow: 0 0 0 24px rgba(213,239,232,.04), 0 0 0 49px rgba(213,239,232,.025); }
.welcome-hero > div:first-child { max-width: 540px; }
.hero-overline { display: inline-block; color: #b7ddcf; font-size: 10px; }
.welcome-hero h3 { margin: 8px 0 6px; font-size: 21px; }
.welcome-hero p { max-width: 520px; margin: 0; color: #c0d3e7; font-size: 10px; line-height: 1.9; }
.hero-metric { min-width: 150px; margin-right: auto; padding: 13px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); }
.hero-metric span, .hero-metric small { display: block; color: #b4c9df; font-size: 9px; }
.hero-metric strong { display: block; margin: 5px 0 1px; color: #d9efe7; font-size: 28px; line-height: 1; }
.welcome-hero > img { width: 120px; height: 145px; object-fit: contain; position: absolute; left: 4%; bottom: -22px; opacity: .18; transform: rotate(-8deg); }
.button { min-height: 43px; padding: 9px 17px; border: 1px solid transparent; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(7,29,60,.11); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: linear-gradient(115deg, var(--teal-dark), var(--teal)); box-shadow: 0 10px 22px rgba(49,136,117,.18); }
.button-primary:hover { background: linear-gradient(115deg, #195b53, #2f7d6d); }
.button-secondary { color: var(--navy-2); background: #fff; border-color: var(--line); }
.button-secondary:hover { border-color: #b9cede; background: #f9fbfd; }
.button-danger { color: var(--danger); background: #fff4f4; border-color: #f3dada; }
.button-ghost { padding-inline: 8px; color: var(--teal-dark); background: transparent; }
.button-sm { min-height: 34px; padding: 6px 11px; border-radius: 10px; font-size: 10px; }

.alert { display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin-bottom: 19px; border-radius: 15px; position: relative; font-size: 12px; line-height: 1.7; animation: reveal-up .35s both; }
.alert-success { color: #18684f; background: #e8f7f0; border: 1px solid #cbeadb; }
.alert-danger { color: #a03b48; background: #fff0f1; border: 1px solid #f2d4d8; }
.alert-close { margin-right: auto; border: 0; background: transparent; color: inherit; font-size: 19px; opacity: .75; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 21px; }
.kpi-card, .panel, .survey-card, .ticket-card, .challenge-card { border: 1px solid rgba(220,228,237,.9); border-radius: var(--radius); background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.kpi-card { min-height: 142px; padding: 19px; overflow: hidden; position: relative; isolation: isolate; animation: reveal-up .45s both; }
.kpi-card:nth-child(2) { animation-delay: .06s; }
.kpi-card:nth-child(3) { animation-delay: .12s; }
.kpi-card:nth-child(4) { animation-delay: .18s; }
.kpi-card::before { content: ""; width: 120px; height: 120px; border: 1px solid rgba(49,136,117,.12); border-radius: 50%; position: absolute; left: -42px; bottom: -55px; z-index: -1; box-shadow: 0 0 0 20px rgba(49,136,117,.04), 0 0 0 40px rgba(49,136,117,.025); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.kpi-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: var(--teal-dark); background: var(--mint); font-size: 18px; }
.kpi-value { margin-top: 13px; color: var(--navy); font-size: 30px; font-weight: 700; letter-spacing: -1px; }
.kpi-note { margin-top: 3px; color: var(--muted); font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-bottom: 19px; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel { padding: 22px; animation: reveal-up .45s both; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.panel-heading h3 { margin: 0; font-size: 15px; line-height: 1.6; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }

.chart-wrap { min-height: 245px; position: relative; }
.chart-wrap canvas { width: 100% !important; height: 220px !important; display: block; }
.chart-bars { height: 218px; padding: 12px 8px 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 51px, rgba(228,234,241,.7) 52px); border-radius: 14px 14px 0 0; }
.bar-column { height: 100%; min-width: 24px; flex: 1; max-width: 68px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bar-value { color: var(--teal-dark); font-size: 10px; font-weight: 700; }
.bar-fill { width: min(34px, 74%); min-height: 8px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, #6ab79e, var(--teal-dark)); transform-origin: bottom; animation: grow-bar .9s cubic-bezier(.2,.8,.2,1) both; }
.bar-label { color: var(--muted); font-size: 9px; white-space: nowrap; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-action { min-height: 76px; padding: 13px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #e0e9ee; border-radius: 15px; color: var(--ink-2); background: linear-gradient(145deg, #fbfdfd, #f2f8f6); font-size: 11px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.quick-action:hover { border-color: #abd5c6; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(49,136,117,.1); }
.quick-action span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--teal-dark); background: var(--mint); font-weight: 700; font-size: 15px; }

.list-stack { display: grid; gap: 0; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf1f4; }
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row:first-child { padding-top: 0; }
.list-main { min-width: 0; }
.list-main strong, .list-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-main strong { color: var(--ink); font-size: 12px; }
.list-main small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; padding: 4px 10px; border-radius: 30px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.badge-success { color: #187454; background: #e5f7ef; }
.badge-warning { color: #946b20; background: #fff5dc; }
.badge-danger { color: #a5414b; background: #ffeaec; }
.badge-muted { color: #718196; background: #edf1f5; }
.badge-info { color: #3c6595; background: #e9f1fb; }

.filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 11px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); box-shadow: 0 8px 28px rgba(7,29,60,.035); }
.filter-field { flex: 1 1 145px; min-width: 120px; }
.filter-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 11px; font-weight: 700; }
.form-control { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #dbe5ee; border-radius: 12px; outline: 0; color: var(--ink); background: #fbfdff; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-control::placeholder { color: #a5b2c0; }
.form-control:hover { border-color: #b9cddd; }
.form-control:focus { border-color: #65a994; background: #fff; box-shadow: 0 0 0 4px rgba(49,136,117,.12); }
textarea.form-control { min-height: 112px; resize: vertical; line-height: 1.8; }
select.form-control { appearance: auto; }
.form-note { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.field-error { display: block; margin-top: 5px; color: var(--danger); font-size: 10px; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
.data-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table th { padding: 14px 15px; color: var(--muted); background: #f7f9fc; font-size: 10px; font-weight: 700; text-align: right; white-space: nowrap; }
.data-table td { padding: 14px 15px; border-top: 1px solid #edf1f4; color: var(--ink-2); font-size: 11px; vertical-align: middle; }
.data-table tbody tr { transition: background .2s; }
.data-table tbody tr:hover td { background: #fbfdfd; }
.inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }

.survey-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.survey-card, .ticket-card, .challenge-card { padding: 19px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.survey-card:hover, .ticket-card:hover, .challenge-card:hover { border-color: #bcdace; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.survey-card h3, .ticket-card h3, .challenge-card h3 { margin: 15px 0 7px; font-size: 14px; line-height: 1.7; }
.survey-card p, .ticket-card p, .challenge-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 9px; }
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.progress { height: 7px; overflow: hidden; border-radius: 10px; background: #eaf0f2; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6bb79e, var(--teal)); transform-origin: right; animation: fill-progress .8s both; }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 7px; color: var(--muted); font-size: 10px; }
.progress-row strong { color: var(--teal-dark); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf1f4; }
.empty-state { grid-column: 1 / -1; padding: 60px 25px; border: 1px dashed #bfd4d0; border-radius: 22px; background: rgba(255,255,255,.82); text-align: center; }
.empty-icon { width: 50px; height: 50px; margin: 0 auto 15px; border-radius: 16px; display: grid; place-items: center; color: var(--teal-dark); background: var(--mint); font-size: 23px; }
.empty-state h3 { margin: 0 0 8px; font-size: 16px; }
.empty-state p { max-width: 430px; margin: 0 auto 18px; color: var(--muted); font-size: 11px; line-height: 1.9; }

.question-builder { display: grid; gap: 13px; }
.question-row { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, #fff, #f8fbfc); position: relative; }
.question-row::before { content: ""; width: 4px; position: absolute; inset: 15px auto 15px 0; border-radius: 5px; background: linear-gradient(var(--teal), var(--blue)); }
.question-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.question-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.question-heading > div { min-width: 0; }
.question-heading strong, .question-heading small { display: block; }
.question-heading strong { color: var(--ink); font-size: 11px; }
.question-heading small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.question-number { width: 29px; height: 29px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 700; }
.question-actions { display: flex; gap: 5px; }
.choice-box { margin-top: 12px; }
.choice-box > label { display: block; color: var(--ink-2); font-size: 11px; font-weight: 700; }
.choice-input { display: flex; gap: 8px; margin-top: 7px; }
.choice-input .form-control { min-height: 37px; }
.detail-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; align-items: start; }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #edf1f4; font-size: 11px; }
.stat-line:last-child { border-bottom: 0; }
.stat-line span { color: var(--muted); }
.stat-line strong { color: var(--ink-2); text-align: left; }
.answer-block { padding: 16px 0; border-bottom: 1px solid #edf1f4; }
.answer-block:last-child { border: 0; }
.answer-block h4 { margin: 0 0 11px; font-size: 12px; line-height: 1.8; }
.answer-value { padding: 12px; border-radius: 11px; color: var(--ink-2); background: #f7fafc; font-size: 11px; line-height: 1.9; }
.check-card { display: flex; align-items: center; gap: 10px; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); background: #fbfdfe; font-size: 11px; transition: border-color .2s, background .2s; }
.check-card:hover { border-color: #acd4c7; background: #f5fbf8; }
.check-card input { width: 16px; height: 16px; accent-color: var(--teal); }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.result-bars { display: grid; gap: 12px; margin: 3px 0 18px; }
.result-bar-row { display: grid; grid-template-columns: minmax(100px, .7fr) 2fr 42px; align-items: center; gap: 10px; font-size: 10px; }
.result-bar-label { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.result-bar-track { height: 10px; overflow: hidden; border-radius: 10px; background: #edf2f4; }
.result-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); transform-origin: right; animation: fill-progress .8s both; }
.result-bar-count { color: var(--teal-dark); font-weight: 700; text-align: left; }
.ticket-list, .challenge-list { display: grid; gap: 14px; }
.comment-list { display: grid; gap: 12px; margin-top: 18px; }
.comment { padding: 13px; border: 1px solid #e5eff0; border-radius: 14px; background: #f5faf8; }
.comment.internal { border-color: #f2e1b9; background: #fff8e9; }
.comment-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.comment-body { font-size: 11px; line-height: 1.9; white-space: pre-wrap; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.pagination a, .pagination span { min-width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); background: #fff; font-size: 11px; }
.pagination .active { color: #fff; border-color: var(--teal); background: var(--teal); }

/* Login and installation */
.login-body { min-height: 100vh; padding: 26px; display: grid; place-items: center; overflow: hidden; position: relative; background: var(--navy) url("brand/hero-waves.jpg") center/cover fixed; }
.login-body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 10%, rgba(49,136,117,.38), transparent 33%), linear-gradient(115deg, rgba(7,29,60,.92), rgba(11,43,80,.74)); }
.login-orb { position: absolute; border: 1px solid rgba(207,234,245,.16); border-radius: 50%; pointer-events: none; }
.login-orb-one { width: 480px; height: 480px; left: -240px; bottom: -250px; box-shadow: 0 0 0 28px rgba(207,234,245,.035), 0 0 0 58px rgba(207,234,245,.025); }
.login-orb-two { width: 360px; height: 360px; right: -180px; top: -180px; box-shadow: 0 0 0 26px rgba(217,172,85,.07), 0 0 0 52px rgba(217,172,85,.035); }
.login-card { width: min(1190px, 100%); min-height: 690px; display: grid; grid-template-columns: 1.08fr .92fr; direction: ltr; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 31px; background: #fff; box-shadow: 0 35px 100px rgba(1,14,32,.42); position: relative; z-index: 1; animation: card-in .75s cubic-bezier(.2,.75,.2,1) both; }
.login-art { direction: rtl; min-width: 0; overflow: hidden; padding: 37px 43px; color: #fff; background: linear-gradient(145deg, rgba(7,29,60,.98), rgba(18,54,99,.94)); position: relative; }
.login-art::before { content: ""; position: absolute; inset: 0; opacity: .25; background: url("brand/white-wave.png") left bottom/620px auto no-repeat; mix-blend-mode: screen; }
.login-art-glow { position: absolute; width: 370px; height: 370px; right: -160px; top: -170px; border: 1px solid rgba(203,238,228,.2); border-radius: 50%; box-shadow: 0 0 0 30px rgba(203,238,228,.035), 0 0 0 64px rgba(203,238,228,.022); }
.login-art-content { height: 100%; display: flex; flex-direction: column; position: relative; z-index: 2; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand-logo { width: 176px; height: 66px; object-fit: contain; object-position: right center; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: #fff; font-size: 16px; }
.login-brand small { margin-top: 3px; color: #a9c0dc; font-size: 10px; }
.login-copy { max-width: 440px; margin-top: auto; margin-bottom: auto; padding-bottom: 54px; }
.mini-label { display: inline-flex; align-items: center; gap: 7px; color: #bfe7da; font-size: 11px; font-weight: 600; }
.mini-label::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--gold); }
.login-copy h1 { margin: 17px 0 13px; color: #fff; font-size: 40px; line-height: 1.35; letter-spacing: -1.5px; }
.login-copy h1 em { color: #9dd7c4; font-style: normal; }
.login-copy p { max-width: 385px; margin: 0; color: #c3d7e8; font-size: 12px; line-height: 2.05; }
.login-points { display: grid; gap: 11px; margin-top: 27px; }
.login-point { display: flex; align-items: center; gap: 9px; color: #e7f3fb; font-size: 11px; }
.login-point span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--navy); background: var(--mint); font-size: 11px; font-weight: 700; }
.login-point b { font-weight: 500; }
.login-shape { width: 235px; position: absolute; left: -68px; top: 128px; opacity: .13; transform: rotate(-7deg); }
.login-figure { width: 410px; max-width: none; position: absolute; left: -125px; bottom: -84px; opacity: .95; filter: drop-shadow(0 20px 24px rgba(0,0,0,.18)); transform: translateY(14px); animation: figure-float 6s ease-in-out infinite; }
.login-art-footer { display: flex; align-items: center; gap: 8px; color: #8da8c4; font-size: 9px; }
.login-form-side { direction: rtl; display: flex; align-items: center; padding: 55px 66px; background: radial-gradient(circle at 100% 0%, #edf8f4, transparent 38%), linear-gradient(160deg, #fff, #f8fbfe); }
.login-form-wrap { width: 100%; max-width: 410px; margin: 0 auto; }
.login-form-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 10px; border-radius: 30px; color: var(--teal-dark); background: #e6f5ee; font-size: 9px; font-weight: 600; }
.kicker-icon { width: 19px; height: 19px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--teal); font-size: 13px; }
.login-form-wrap h2 { margin: 0; color: var(--navy); font-size: 27px; letter-spacing: -.6px; }
.login-form-wrap > p { margin: 9px 0 29px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.login-field { margin-bottom: 17px; }
.login-field label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: 11px; font-weight: 700; }
.input-with-icon { position: relative; }
.input-with-icon .form-control { min-height: 49px; padding-right: 43px; padding-left: 43px; border-radius: 14px; background: rgba(255,255,255,.88); }
.input-leading { position: absolute; right: 14px; top: 13px; color: #86a296; font-size: 18px; line-height: 1; }
.password-toggle { width: 34px; height: 35px; border: 0; border-radius: 9px; position: absolute; top: 7px; left: 7px; color: #6e8b87; background: transparent; }
.password-toggle:hover { color: var(--teal-dark); background: #eef7f4; }
.login-submit { width: 100%; min-height: 51px; margin-top: 7px; border-radius: 14px; font-size: 12px; }
.login-submit .button-arrow { margin-right: auto; font-size: 17px; }
.button-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .button-label { display: none; }
.is-loading .button-spinner { display: block; }
.login-submit.is-loading .button-label, .login-submit.is-loading .button-arrow { display: none; }
.login-submit.is-loading .button-spinner { display: block; }
.login-privacy { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px; border: 1px solid #e1ece9; border-radius: 13px; background: rgba(247,252,250,.9); }
.privacy-icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--teal-dark); background: var(--mint); font-size: 12px; }
.login-privacy strong, .login-privacy small { display: block; }
.login-privacy strong { color: var(--ink-2); font-size: 10px; }
.login-privacy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.login-help { color: var(--muted); text-align: center; font-size: 9px !important; line-height: 1.8 !important; }
.login-error { display: flex; align-items: center; gap: 9px; padding: 11px 12px; margin-bottom: 16px; border: 1px solid #f1d4d7; border-radius: 12px; color: #a03b48; background: #fff1f2; font-size: 10px; line-height: 1.7; }
.login-error > span:first-child { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--danger); font-weight: 700; }

.install-body { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: var(--navy) url("brand/hero-waves.jpg") center/cover fixed; }
.install-card { width: min(970px, 100%); padding: 31px; border: 1px solid rgba(255,255,255,.65); border-radius: 27px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); }
.install-header { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.install-header .brand-mark { width: 49px; height: 49px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--navy); font-size: 24px; font-weight: 700; }
.install-header h1 { margin: 0; color: var(--navy); font-size: 22px; }
.install-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.notice { padding: 14px 16px; margin-bottom: 20px; border: 1px solid #d7e9e4; border-radius: 14px; color: var(--ink-2); background: #f1faf6; font-size: 11px; line-height: 1.9; }
.password-result { padding: 17px; margin-top: 18px; border: 1px solid #c7e6d8; border-radius: 16px; color: var(--ink-2); background: #ecfaf3; font-size: 11px; line-height: 2; }
.password-result strong { display: block; margin-bottom: 8px; color: var(--success); }
.password-code { display: inline-block; direction: ltr; padding: 7px 12px; border: 1px dashed #8bc8ad; border-radius: 9px; color: var(--navy); background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; }
.setup-checks { padding: 15px; margin-bottom: 21px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.setup-checks-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--ink-2); font-size: 11px; }
.setup-checks-heading span { padding: 4px 9px; border-radius: 20px; color: var(--success); background: #e8f7f0; font-size: 9px; }
.setup-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.setup-check { display: flex; align-items: center; gap: 6px; min-height: 29px; padding: 6px 8px; border-radius: 9px; color: var(--muted); background: #f3f6f9; font-size: 9px; }
.setup-check span { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--success); font-size: 9px; font-weight: 700; }
.setup-check.is-error { color: #a03b48; background: #fff0f1; }
.setup-check.is-error span { background: var(--danger); }

@keyframes reveal-up { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes figure-float { 0%, 100% { transform: translateY(14px) rotate(0); } 50% { transform: translateY(2px) rotate(-1deg); } }
@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fill-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1240px) {
    .content-wrap { padding-inline: 28px; }
    .topbar { padding-inline: 28px; }
    .login-card { max-width: 1060px; }
    .login-form-side { padding-inline: 45px; }
}
@media (max-width: 1080px) {
    :root { --sidebar-width: 250px; }
    .brand-logo { width: 135px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .survey-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-card { min-height: 640px; }
    .login-copy h1 { font-size: 34px; }
    .login-figure { width: 350px; left: -115px; }
}
@media (max-width: 900px) {
    .sidebar { transform: translateX(110%); transition: transform .28s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close, .menu-toggle { display: block; }
    .sidebar-overlay { position: fixed; inset: 0; display: none; z-index: 25; background: rgba(4,18,38,.44); backdrop-filter: blur(3px); }
    .sidebar-overlay.show { display: block; }
    .main-content { width: 100%; margin-right: 0; }
    .topbar { min-height: 78px; padding: 0 22px; }
    .menu-toggle { color: var(--navy); font-size: 23px; }
    .topbar-title { margin-inline: auto; }
    .topbar-title h1 { font-size: 19px; }
    .top-user span, .topbar-secure { display: none; }
    .content-wrap { padding: 27px 22px 46px; }
    .dashboard-grid, .detail-grid { grid-template-columns: 1fr; }
    .login-card { max-width: 560px; grid-template-columns: 1fr; }
    .login-art { min-height: 350px; padding: 28px 31px; }
    .login-copy { margin-top: 38px; padding-bottom: 0; max-width: 430px; }
    .login-copy h1 { margin-top: 10px; font-size: 30px; }
    .login-points { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-top: 17px; }
    .login-point { font-size: 10px; }
    .login-figure { width: 310px; left: auto; right: -86px; bottom: -110px; opacity: .34; }
    .login-form-side { padding: 38px 30px 43px; }
}
@media (max-width: 620px) {
    .page-heading { align-items: stretch; flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .kpi-grid, .survey-grid, .card-grid, .split-grid, .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .permission-grid { grid-template-columns: 1fr; }
    .topbar { padding-inline: 15px; }
    .topbar-title h1 { font-size: 16px; }
    .notification-button { width: 35px; height: 35px; }
    .content-wrap { padding-inline: 14px; }
    .panel { padding: 16px; border-radius: 17px; }
    .kpi-card { min-height: 124px; }
    .welcome-hero { align-items: flex-start; flex-direction: column; min-height: 190px; padding: 20px; }
    .welcome-hero h3 { font-size: 18px; }
    .hero-metric { min-width: 145px; margin-right: 0; }
    .welcome-hero > img { left: -18px; bottom: -35px; }
    .quick-grid { gap: 8px; }
    .quick-action { min-height: 65px; padding: 10px 9px; font-size: 10px; }
    .result-bar-row { grid-template-columns: 86px 1fr 28px; gap: 7px; }
    .login-body, .install-body { padding: 12px; }
    .login-card { border-radius: 23px; }
    .login-art { min-height: 305px; padding: 22px; }
    .login-brand-logo { width: 143px; height: 53px; }
    .login-copy { margin-top: 22px; }
    .login-copy h1 { font-size: 26px; }
    .login-copy p { font-size: 10px; }
    .login-point b { display: none; }
    .login-point span { width: 25px; height: 25px; }
    .login-figure { width: 265px; right: -100px; bottom: -94px; }
    .login-form-side { padding: 31px 20px 35px; }
    .login-form-wrap h2 { font-size: 23px; }
    .install-card { padding: 19px; border-radius: 20px; }
    .install-header h1 { font-size: 18px; }
    .setup-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    .sidebar, .topbar, .heading-actions, .filter-bar, .button, .alert { display: none !important; }
    .main-content { width: 100%; margin: 0; }
    .content-wrap { padding: 0; }
    .panel, .data-table-wrap { box-shadow: none; }
}

/* Components used by the role dashboards and the reporting workspace */
.panel-kicker { display: block; margin-bottom: 5px; color: #4b9a8b; font-size: 8px; font-weight: 700; letter-spacing: .15px; }
.panel-heading-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d9ebe5; border-radius: 12px; color: #4b9386; background: #eff9f5; }
.panel-heading-icon .ui-icon { width: 17px; height: 17px; }
.modern-dashboard-hero { isolation: isolate; }
.hero-identity { min-width: 0; position: relative; z-index: 1; }
.hero-role-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; color: #b6ccdd; font-size: 8px; }
.hero-role-line .role-badge { color: #0b3554; background: #d6f2e8; }
.hero-role-line .role-badge .ui-icon { width: 12px; height: 12px; }
.modern-chart-wrap { min-height: 240px; }
.modern-chart-wrap canvas { height: 230px !important; }
.modern-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.modern-quick-grid .quick-action { display: grid; grid-template-columns: 31px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 2px; }
.modern-quick-grid .quick-action > span { grid-row: 1 / 3; }
.modern-quick-grid .quick-action b { color: #294762; font-size: 9px; font-weight: 700; }
.modern-quick-grid .quick-action small { color: #8a9bad; font-size: 7px; }
.activity-list { display: grid; gap: 3px; }
.activity-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 0; border-bottom: 1px solid #edf1f3; transition: transform .2s ease, background .2s ease; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { transform: translateX(-3px); }
.activity-icon { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #377d70; background: #e7f6f0; }
.activity-icon .ui-icon { width: 15px; height: 15px; }
.activity-icon-pink { color: #a65a72; background: #fcecf2; }
.activity-icon-gold { color: #9b7628; background: #fff5df; }
.activity-main { min-width: 0; flex: 1; }
.activity-main strong, .activity-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-main strong { color: #1b3552; font-size: 10px; }
.activity-main small { margin-top: 3px; color: #8798aa; font-size: 8px; }
.activity-progress { width: 83px; flex: 0 0 auto; }
.activity-progress b { display: block; margin-bottom: 4px; color: #4b8f83; font-size: 8px; text-align: left; }
.activity-progress .progress { height: 5px; }
.activity-progress .progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6bb79e,#318875); }
.activity-row > .badge { flex: 0 0 auto; }
.survey-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.survey-overview > div { display: grid; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 13px; border: 1px solid #dce7ed; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(7,29,60,.04); }
.survey-overview > div > span { width: 32px; height: 32px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 10px; color: #3d8779; background: #e8f7f1; }
.survey-overview .ui-icon { width: 16px; height: 16px; }
.survey-overview strong { color: #102f55; font-size: 20px; line-height: 1; }
.survey-overview small { margin-top: 4px; color: #8092a6; font-size: 8px; }
.modern-filter .filter-field label { display: flex; align-items: center; gap: 5px; }
.modern-filter .filter-field label .ui-icon { width: 12px; height: 12px; color: #559789; }
.modern-survey-card { overflow: hidden; }
.survey-card-accent { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.survey-type-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #347d70; background: #e8f7f1; }
.survey-type-icon .ui-icon { width: 16px; height: 16px; }
.survey-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.survey-card-head > div { min-width: 0; }
.survey-card-label { display: block; color: #4a9485; font-size: 8px; font-weight: 700; }
.survey-card-date { flex: 0 0 auto; color: #9aa9b8; font-size: 8px; }
.survey-card-head h3 { margin: 5px 0 7px; }
.survey-facts { display: grid; gap: 6px; margin: 13px 0; padding: 10px; border: 1px solid #e7eef0; border-radius: 12px; background: #f8fbfb; }
.survey-facts span { display: flex; align-items: center; gap: 5px; overflow: hidden; color: #667c8e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.survey-facts .ui-icon { width: 12px; height: 12px; color: #67a395; }
.survey-progress-line { padding-top: 2px; }
.survey-progress-line .progress-row { font-size: 8px; }
.survey-progress-line .progress-row strong { font-size: 9px; }
.survey-protected-note { display: flex; align-items: center; gap: 6px; min-height: 29px; padding: 7px 9px; border: 1px solid #e7e7d4; border-radius: 10px; color: #7c7040; background: #fffbed; font-size: 8px; line-height: 1.6; }
.survey-protected-note .ui-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.activity-row > .badge .ui-icon { width: 12px; height: 12px; vertical-align: middle; }
.panel-count { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border-radius: 8px; color: #3f7f75; background: #eaf7f2; font-size: 8px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; display: inline-block; margin-left: 6px; border-radius: 50%; vertical-align: middle; }
.status-dot.status-success { background: #45aa80; box-shadow: 0 0 0 4px rgba(69,170,128,.11); }
.status-dot.status-muted { background: #9ba9b7; }
.modern-table .role-cell strong, .modern-table .role-cell small { display: block; }
.modern-table .role-cell strong { color: #25415d; font-size: 9px; }
.modern-table .role-cell small { margin-top: 3px; color: #8a9bac; font-size: 8px; }
.role-cell-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #4d9385; background: #e9f7f2; }
.role-cell-icon .ui-icon { width: 14px; height: 14px; }
.password-cell { width: 150px; position: relative; }
.password-cell .form-control { min-height: 34px; padding-left: 34px; direction: ltr; text-align: right; font-size: 9px; }
.password-cell .password-toggle { top: 2px; left: 2px; width: 30px; height: 30px; padding: 5px; }
.password-cell .password-toggle .ui-icon { width: 14px; height: 14px; margin: auto; }
.report-date-value { font-size: 12px !important; line-height: 1.5; }
.insight-table { overflow-x: auto; margin-top: 12px; border: 1px solid #e3ecee; border-radius: 13px; }
.insight-table .data-table { min-width: 360px; }
.insight-table .data-table th, .insight-table .data-table td { padding: 10px 12px; }
.insight-table .data-table th { background: #f5faf9; }
.answer-detail-list { display: grid; gap: 2px; }
.answer-detail { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid #edf1f3; }
.answer-detail:last-child { border-bottom: 0; }
.answer-detail > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #378275; background: #e8f7f1; font-size: 9px; font-weight: 700; }
.answer-detail > div { min-width: 0; flex: 1; }
.answer-detail h3 { margin: 0; color: #233f5c; font-size: 11px; line-height: 1.8; }
.answer-detail small { display: block; margin-top: 3px; color: #8b9bac; font-size: 8px; }
.answer-detail p { margin: 10px 0 0; padding: 11px 12px; border-radius: 11px; color: #4b6176; background: #f6fafb; font-size: 10px; line-height: 1.9; }
.survey-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 25px; margin-bottom: 15px; border-radius: 22px; color: #fff; background: linear-gradient(120deg,#071d3c,#143967 62%,#318875); box-shadow: 0 20px 42px rgba(7,29,60,.15); position: relative; overflow: hidden; }
.survey-detail-hero::after { content: ""; position: absolute; width: 190px; height: 190px; left: 8%; bottom: -145px; border: 1px solid rgba(214,240,232,.25); border-radius: 50%; box-shadow: 0 0 0 23px rgba(214,240,232,.035); }
.survey-detail-hero > div:first-child { min-width: 0; position: relative; z-index: 1; }
.survey-detail-hero .eyebrow { color: #bfe8db; }
.survey-detail-hero h2 { margin: 8px 0 6px; color: #fff; font-size: 21px; }
.survey-detail-hero p { max-width: 680px; margin: 0; color: #c8dbea; font-size: 9px; line-height: 1.9; }
.survey-detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; color: #b8d0df; font-size: 8px; }
.survey-detail-tags > span:not(.badge) { display: inline-flex; align-items: center; gap: 4px; }
.survey-detail-tags .ui-icon { width: 12px; height: 12px; color: #a9decc; }
.survey-detail-tags .badge { color: #0c3a52; background: #d9f3e9; }
.survey-detail-score { min-width: 152px; padding: 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(255,255,255,.1); position: relative; z-index: 1; }
.survey-detail-score small, .survey-detail-score strong, .survey-detail-score span { display: block; }
.survey-detail-score small { color: #bbd2e2; font-size: 8px; }
.survey-detail-score strong { margin: 5px 0 2px; color: #ddf7ec; font-size: 27px; }
.survey-detail-score span { color: #bfd2e2; font-size: 8px; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.detail-stat-grid > div { display: grid; grid-template-columns: 31px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 12px; border: 1px solid #dce7ed; border-radius: 15px; background: rgba(255,255,255,.91); box-shadow: 0 8px 21px rgba(7,29,60,.04); }
.detail-stat-grid > div > span { width: 31px; height: 31px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 10px; color: #428a7c; background: #e8f7f1; }
.detail-stat-grid .ui-icon { width: 15px; height: 15px; }
.detail-stat-grid strong { color: #173654; font-size: 17px; line-height: 1.3; }
.detail-stat-grid small { color: #8495a7; font-size: 8px; }
.survey-detail-grid { margin-bottom: 0; }
.share-box { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; align-items: center; }
.share-box .form-control { direction: ltr; text-align: left; font-size: 9px; }
.share-box .button { min-height: 42px; }
.survey-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #edf1f3; }
.survey-detail-actions .button { flex: 0 1 auto; }
.question-timeline { display: grid; gap: 1px; }
.question-timeline-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf1f3; }
.question-timeline-row:last-child { border-bottom: 0; }
.question-timeline-row > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #3c8678; background: #e8f7f1; font-size: 8px; font-weight: 700; }
.question-timeline-row > div { min-width: 0; }
.question-timeline-row strong, .question-timeline-row small { display: block; }
.question-timeline-row strong { color: #25425e; font-size: 9px; line-height: 1.8; }
.question-timeline-row small { margin-top: 3px; color: #8b9bab; font-size: 8px; }
.survey-close-form { margin-top: 15px; }
.response-layout { display: grid; grid-template-columns: minmax(220px,.34fr) minmax(0,1fr); gap: 15px; align-items: start; }
.response-guide { position: sticky; top: 98px; }
.response-progress { padding: 14px; margin-bottom: 11px; border-radius: 14px; color: #fff; background: linear-gradient(120deg,#0b2b52,#318875); }
.response-progress strong { margin-left: 5px; font-size: 23px; }
.response-progress > span { color: #c9e7dc; font-size: 8px; }
.response-progress .progress { height: 6px; margin-top: 9px; background: rgba(255,255,255,.18); }
.response-progress .progress i { display: block; height: 100%; border-radius: inherit; background: #d8f1e7; }
.response-guide .insight-row { font-size: 8px; }
.response-tip { display: flex; align-items: flex-start; gap: 7px; padding: 10px; margin-top: 13px; border-radius: 11px; color: #567565; background: #eef8f3; font-size: 8px; line-height: 1.8; }
.response-tip .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; color: #4d9888; }
.modern-question-builder { display: grid; gap: 11px; }
.response-question { padding: 15px; margin: 0; border: 1px solid #e0e9ee; border-radius: 16px; background: #fbfdfe; }
.response-question::before { inset: 14px auto 14px 0; }
.response-question-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.response-question-head > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #3b8677; background: #e7f7f1; font-size: 9px; font-weight: 700; }
.response-question-head > div { min-width: 0; }
.response-question-head h3 { margin: 0; color: #213e5a; font-size: 11px; line-height: 1.8; }
.response-question-head h3 b { color: var(--danger); }
.response-question-head small { display: block; margin-top: 3px; color: #899aaa; font-size: 8px; }
.response-options { display: grid; gap: 6px; }
.response-options .check-card { min-height: 42px; background: #fff; }
.rating-options { display: flex; gap: 7px; direction: ltr; }
.rating-options label { position: relative; cursor: pointer; }
.rating-options input { position: absolute; opacity: 0; }
.rating-options span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d9e5eb; border-radius: 11px; color: #74899c; background: #fff; font-size: 10px; transition: all .2s ease; }
.rating-options label:hover span, .rating-options input:checked + span { border-color: #58a08e; color: #fff; background: #318875; box-shadow: 0 7px 15px rgba(49,136,117,.18); }
.response-actions { margin-top: 13px; }

@media (max-width: 900px) {
    .response-layout { grid-template-columns: 1fr; }
    .response-guide { position: static; }
}
@media (max-width: 650px) {
    .survey-detail-hero { align-items: stretch; flex-direction: column; padding: 19px; }
    .survey-detail-score { min-width: 0; }
    .detail-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .share-box { grid-template-columns: 1fr; }
    .share-box .button { width: 100%; }
    .survey-detail-actions .button { flex: 1; }
}
.form-layout-modern { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 15px; align-items: start; }
.form-layout-modern .panel { min-width: 0; }
.form-layout-modern .form-actions { grid-column: 1 / -1; margin-top: 0; }
.role-select-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.role-select-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #dfe8ee; border-radius: 13px; color: #29455f; background: #fbfdfe; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.role-select-card:hover { transform: translateY(-2px); border-color: #afd4c7; background: #f5fbf8; }
.role-select-card.is-selected { border-color: #58a08e; background: linear-gradient(135deg,#eefaf5,#fff); box-shadow: 0 9px 20px rgba(49,136,117,.11); }
.role-select-card > span:nth-child(2) { min-width: 0; flex: 1; }
.role-select-card strong, .role-select-card small { display: block; }
.role-select-card strong { font-size: 9px; }
.role-select-card small { margin-top: 3px; color: #8a9baa; font-size: 7px; }
.role-select-card input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.role-select-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #3e769c; background: #e9f2fa; }
.role-select-icon .ui-icon { width: 14px; height: 14px; }
.role-select-teal { color: #368676; background: #e7f7f1; }
.role-select-gold { color: #9b7628; background: #fff4dc; }
.role-select-pink { color: #a35b75; background: #fcecf2; }
.role-permission-panel { display: none; margin-top: 17px; }
.permission-matrix { display: grid; gap: 7px; }
.permission-card { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #e2eaee; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.permission-card:hover { border-color: #b7d9ce; background: #f7fcfa; }
.permission-card input { position: absolute; opacity: 0; pointer-events: none; }
.permission-check { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cddbe3; border-radius: 7px; color: transparent; background: #fff; }
.permission-card input:checked + .permission-check { border-color: var(--teal); color: #fff; background: var(--teal); }
.permission-check .ui-icon { width: 12px; height: 12px; }
.permission-card > span:last-child { min-width: 0; }
.permission-card strong, .permission-card small { display: block; }
.permission-card strong { color: #29455f; font-size: 9px; }
.permission-card small { margin-top: 3px; color: #8a9baa; font-size: 7px; line-height: 1.6; }
.password-cell-large { width: auto; }
.password-cell-large .form-control { padding-left: 12px; text-align: right; }
.form-actions-modern { display: flex; align-items: center; }
.security-hint { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #71889b; font-size: 8px; }
.security-hint .ui-icon { width: 15px; height: 15px; color: #5b9a8d; }
.login-point .ui-icon { width: 13px; height: 13px; }
.input-leading .ui-icon { width: 18px; height: 18px; }
.kicker-icon .ui-icon, .privacy-icon .ui-icon { width: 13px; height: 13px; }

@media (max-width: 900px) {
    .survey-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .activity-progress { width: 68px; }
}
@media (max-width: 560px) {
    .survey-overview { grid-template-columns: 1fr 1fr; gap: 8px; }
    .survey-overview > div { padding: 10px; }
    .survey-overview strong { font-size: 17px; }
    .hero-role-line > span:last-child { max-width: 240px; line-height: 1.7; }
    .activity-row { align-items: flex-start; flex-wrap: wrap; }
    .activity-main { padding-top: 2px; }
    .activity-progress { width: calc(100% - 40px); margin-right: 40px; }
    .activity-row > .badge { margin-right: auto; }
    .modern-quick-grid { grid-template-columns: 1fr; }
    .report-question { padding: 15px; }
    .form-layout-modern { grid-template-columns: 1fr; }
    .form-layout-modern .form-actions { grid-column: auto; }
    .form-actions-modern { align-items: stretch; flex-direction: column; }
    .security-hint { margin-left: 0; }
}

/* Installation experience v3 */
.install-body { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 28px; position: relative; overflow-x: hidden; background: #061a38 url("brand/hero-waves.jpg") center/cover fixed; }
.install-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 14%, rgba(49,136,117,.34), transparent 28%), radial-gradient(circle at 90% 88%, rgba(217,172,85,.14), transparent 25%), linear-gradient(110deg, rgba(3,17,39,.84), rgba(8,31,68,.66)); }
.install-ambient { position: fixed; pointer-events: none; border: 1px solid rgba(195,229,228,.16); border-radius: 50%; z-index: 0; }
.install-ambient-one { width: 530px; height: 530px; left: -290px; bottom: -295px; box-shadow: 0 0 0 28px rgba(195,229,228,.035), 0 0 0 62px rgba(195,229,228,.025); }
.install-ambient-two { width: 360px; height: 360px; right: -190px; top: -210px; border-color: rgba(217,172,85,.18); box-shadow: 0 0 0 25px rgba(217,172,85,.055), 0 0 0 52px rgba(217,172,85,.03); }
.install-shell { width: 100%; max-width: 1240px; min-height: 640px; min-height: min(820px, calc(100vh - 56px)); display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); direction: ltr; position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 32px; background: #f9fbfd; box-shadow: 0 36px 110px rgba(0,11,31,.45); animation: install-in .72s cubic-bezier(.2,.75,.2,1) both; }
.install-visual { min-width: 0; min-height: 100%; direction: rtl; position: relative; overflow: hidden; padding: 36px 42px 30px; color: #fff; background: linear-gradient(148deg, rgba(6,29,61,.99), rgba(18,55,100,.98)); }
.install-visual::before { content: ""; position: absolute; inset: 0; opacity: .22; background: url("brand/white-wave.png") left bottom/680px auto no-repeat; mix-blend-mode: screen; }
.install-visual::after { content: ""; position: absolute; width: 330px; height: 330px; top: 110px; right: -150px; border: 1px solid rgba(184,231,218,.2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(184,231,218,.035), 0 0 0 53px rgba(184,231,218,.022); }
.install-visual-grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(190,226,239,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(190,226,239,.1) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
.install-visual-glow { position: absolute; width: 250px; height: 250px; right: 18%; top: 37%; border-radius: 50%; background: rgba(49,136,117,.2); filter: blur(65px); }
.install-visual > *:not(.install-visual-grid):not(.install-visual-glow) { position: relative; z-index: 1; }
.install-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.install-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.install-brand img { width: 154px; height: 60px; object-fit: contain; object-position: right center; }
.install-brand span { min-width: 0; }
.install-brand strong, .install-brand small { display: block; }
.install-brand strong { color: #fff; font-size: 16px; }
.install-brand small { margin-top: 3px; color: #a6c1dc; font-size: 9px; white-space: nowrap; }
.install-version { padding: 6px 10px; border: 1px solid rgba(216,237,242,.18); border-radius: 20px; color: #b9d6e8; background: rgba(255,255,255,.07); font-size: 9px; direction: ltr; }
.install-visual-copy { max-width: 395px; margin-top: 108px; }
.install-kicker { display: inline-flex; align-items: center; gap: 8px; color: #bfe8da; font-size: 10px; font-weight: 600; }
.install-kicker i { width: 23px; height: 2px; border-radius: 3px; display: block; background: var(--gold); }
.install-kicker-dark { color: var(--teal-dark); }
.install-visual-copy h1 { margin: 16px 0 13px; color: #fff; font-size: 43px; font-size: clamp(29px, 3vw, 43px); line-height: 1.35; letter-spacing: -1.5px; }
.install-visual-copy h1 em { color: #a4dfcb; font-style: normal; }
.install-visual-copy > p { max-width: 380px; margin: 0; color: #c6d8e8; font-size: 11px; line-height: 2.05; }
.install-steps { display: grid; gap: 11px; margin-top: 31px; }
.install-step { display: flex; align-items: center; gap: 10px; opacity: .65; }
.install-step > span { width: 34px; height: 34px; border: 1px solid rgba(205,235,234,.24); border-radius: 11px; display: grid; place-items: center; color: #a6c8d7; background: rgba(255,255,255,.05); font-size: 9px; direction: ltr; }
.install-step strong, .install-step small { display: block; }
.install-step strong { color: #e9f3fa; font-size: 10px; font-weight: 600; }
.install-step small { margin-top: 3px; color: #91aec7; font-size: 8px; }
.install-step.is-active { opacity: 1; }
.install-step.is-active > span { border-color: rgba(165,223,203,.7); color: var(--navy); background: #a8decc; box-shadow: 0 0 0 5px rgba(168,222,204,.1); }
.install-shape { width: 260px; position: absolute; left: -78px; top: 155px; opacity: .14; transform: rotate(-8deg); }
.install-figure { width: 395px; max-width: none; position: absolute; left: -104px; bottom: -112px; opacity: .75; filter: drop-shadow(0 24px 26px rgba(0,0,0,.22)); animation: install-float 6s ease-in-out infinite; }
.install-visual-footer { display: flex; align-items: center; gap: 8px; position: absolute !important; right: 42px; bottom: 28px; color: #8eabc4; font-size: 8px; }
.install-footer-line { width: 48px; height: 1px; display: block; background: rgba(196,226,235,.25); }
.install-panel { min-width: 0; max-height: calc(100vh - 56px); overflow-y: auto; direction: rtl; padding: 31px 43px 35px; background: radial-gradient(circle at 100% 0%, #eff9f5, transparent 31%), linear-gradient(145deg, #fff 0%, #f8fbfd 100%); }
.install-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 31px; }
.install-path { color: #8294a9; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; letter-spacing: .8px; direction: ltr; }
.install-path b { margin: 0 4px; color: var(--gold); }
.install-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #dceee8; border-radius: 20px; color: var(--teal-dark); background: #eff9f4; font-size: 9px; }
.install-live i { width: 6px; height: 6px; border-radius: 50%; display: block; background: var(--teal); box-shadow: 0 0 0 4px rgba(49,136,117,.11); }
.install-heading { margin-bottom: 21px; }
.install-heading h2, .install-success h2 { margin: 12px 0 8px; color: var(--navy); font-size: 25px; letter-spacing: -.7px; }
.install-heading p, .install-success > p { max-width: 560px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.95; }
.install-errors { padding: 13px 14px; margin-bottom: 15px; border: 1px solid #f0d4d8; border-radius: 14px; color: #9e3d4b; background: #fff3f4; font-size: 10px; line-height: 1.8; animation: reveal-up .35s ease both; }
.install-errors-title { display: flex; align-items: center; gap: 8px; color: #9e3d4b; }
.install-errors-title > span { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--danger); font-weight: 700; }
.install-errors ul { margin: 8px 0 0; padding: 0 29px 0 0; }
.install-errors li + li { margin-top: 3px; }
.install-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; margin-bottom: 17px; border: 1px solid #dcece6; border-radius: 15px; color: var(--ink-2); background: #f2faf6; }
.install-notice-icon { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--teal); font-family: Georgia, serif; font-size: 14px; font-weight: 700; }
.install-notice strong, .install-notice p { display: block; }
.install-notice strong { color: var(--teal-dark); font-size: 10px; }
.install-notice p { margin: 3px 0 0; color: #617b80; font-size: 9px; line-height: 1.8; }
.install-checks { padding: 14px; margin-bottom: 21px; border-color: #e1e9ef; border-radius: 16px; background: rgba(255,255,255,.76); }
.install-checks .setup-checks-heading { margin-bottom: 12px; }
.install-checks .setup-checks-heading > div strong, .install-checks .setup-checks-heading > div small { display: block; }
.install-checks .setup-checks-heading small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.install-checks .setup-checks-heading > span { color: var(--success); background: #e8f7f0; }
.install-checks .setup-checks-heading > span.is-blocked { color: #a03b48; background: #fff0f1; }
.install-check { min-height: 42px; padding: 6px 8px; align-items: flex-start; }
.install-check strong, .install-check small { display: block; }
.install-check strong { color: inherit; font-size: 8px; line-height: 1.5; font-weight: 500; }
.install-check small { margin-top: 2px; color: #b07a31; font-size: 7px; }
.install-check.is-optional.is-error { color: #9d7435; background: #fff8ea; }
.install-check.is-optional.is-error span { background: var(--warning); }
.install-form-section { padding-top: 22px; margin-top: 22px; border-top: 1px solid #e8edf2; }
.install-form-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.install-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.install-section-title > span { width: 28px; height: 28px; border: 1px solid #d5e8e2; border-radius: 9px; display: grid; place-items: center; color: var(--teal-dark); background: #eff8f4; font-size: 8px; font-weight: 700; direction: ltr; }
.install-section-title strong, .install-section-title small { display: block; }
.install-section-title strong { color: var(--ink); font-size: 11px; }
.install-section-title small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.install-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.install-fields .install-full { grid-column: 1 / -1; }
.install-fields .form-group { min-width: 0; margin: 0; }
.install-fields label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; color: var(--ink-2); font-size: 9px; font-weight: 700; }
.install-fields label small { color: var(--muted); font-size: 7px; font-weight: 400; }
.install-fields .form-control { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dce5ec; border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.88); font-size: 10px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.install-fields .form-control:focus { border-color: #74bba7; background: #fff; box-shadow: 0 0 0 4px rgba(49,136,117,.1); }
.install-fields .install-file { padding: 9px 11px; color: var(--muted); }
.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 7px; line-height: 1.6; }
.install-password-field { position: relative; }
.install-password-field .form-control { padding-left: 43px; direction: ltr; text-align: right; }
.install-password-field .password-toggle { top: 5px; left: 5px; }
.install-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 26px; margin-top: 26px; border-top: 1px solid #e8edf2; }
.install-security-note { display: flex; align-items: center; gap: 8px; min-width: 0; }
.install-security-note > span { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 700; }
.install-security-note strong, .install-security-note small { display: block; }
.install-security-note strong { color: var(--ink-2); font-size: 9px; }
.install-security-note small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.install-submit { min-width: 164px; min-height: 47px; border-radius: 13px; font-size: 10px; }
.install-submit .button-arrow { margin-right: auto; font-size: 16px; }
.install-success { max-width: 560px; padding-top: 37px; animation: reveal-up .5s ease both; }
.install-success-icon { width: 58px; height: 58px; margin-bottom: 22px; border: 8px solid #e4f5ee; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--teal); box-shadow: 0 12px 24px rgba(49,136,117,.2); font-size: 24px; font-weight: 700; }
.install-credentials { display: grid; gap: 0; margin-top: 25px; border: 1px solid #dcebe5; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(7,29,60,.06); }
.credential-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 8px 14px; border-bottom: 1px solid #edf1f3; color: var(--muted); font-size: 9px; }
.credential-row:last-child { border-bottom: 0; }
.credential-row strong { color: var(--ink); font-size: 10px; }
.credential-row strong[dir="ltr"] { direction: ltr; }
.credential-password { background: #f2faf6; }
.credential-password .password-code { margin: 0; padding: 6px 10px; border-color: #9ed0bc; color: var(--navy); background: #fff; font-size: 11px; }
.install-one-time { display: flex; align-items: flex-start; gap: 8px; padding: 12px; margin-top: 14px; border: 1px solid #f0dfb8; border-radius: 12px; color: #927031; background: #fff9ed; font-size: 8px; line-height: 1.8; }
.install-one-time > span:first-child { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--gold); font-weight: 700; }
.install-one-time b { direction: ltr; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.install-success-button { display: inline-flex; min-height: 46px; margin-top: 23px; border-radius: 13px; font-size: 10px; }
.install-success-button > span:last-child { margin-right: 19px; font-size: 16px; }

@keyframes install-in { from { opacity: 0; transform: translateY(19px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes install-float { 0%, 100% { transform: translateY(9px); } 50% { transform: translateY(-5px); } }

@media (max-width: 1040px) {
    .install-body { padding: 18px; }
    .install-shell { min-height: calc(100vh - 36px); grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
    .install-visual { padding-inline: 31px; }
    .install-visual-copy { margin-top: 76px; }
    .install-figure { width: 315px; left: -98px; bottom: -85px; opacity: .58; }
    .install-panel { max-height: calc(100vh - 36px); padding-inline: 30px; }
}
@media (max-width: 820px) {
    .install-shell { display: block; min-height: 0; }
    .install-visual { min-height: 380px; padding: 27px 29px 25px; }
    .install-visual-copy { max-width: 410px; margin-top: 48px; }
    .install-visual-copy h1 { font-size: 31px; }
    .install-steps { display: flex; flex-wrap: wrap; gap: 10px 15px; margin-top: 20px; }
    .install-step { gap: 7px; }
    .install-step > span { width: 28px; height: 28px; border-radius: 9px; }
    .install-step strong { font-size: 9px; }
    .install-step small { font-size: 7px; }
    .install-figure { width: 275px; left: auto; right: -91px; bottom: -94px; opacity: .35; }
    .install-shape { width: 210px; top: 82px; left: -63px; }
    .install-visual-footer { right: 29px; bottom: 20px; }
    .install-panel { max-height: none; padding: 27px 29px 32px; }
}
@media (max-width: 540px) {
    .install-body { align-items: flex-start; padding: 10px; }
    .install-shell { width: 100%; border-radius: 22px; }
    .install-visual { min-height: 325px; padding: 20px 20px 22px; }
    .install-brand img { width: 123px; height: 48px; }
    .install-brand strong { font-size: 13px; }
    .install-brand small { font-size: 7px; }
    .install-version { padding: 5px 8px; font-size: 8px; }
    .install-visual-copy { margin-top: 31px; }
    .install-visual-copy h1 { margin: 11px 0 8px; font-size: 26px; }
    .install-visual-copy > p { max-width: 280px; font-size: 9px; line-height: 1.85; }
    .install-step:not(.is-active) { display: none; }
    .install-figure { width: 235px; right: -91px; bottom: -78px; }
    .install-visual-footer { right: 20px; bottom: 16px; font-size: 7px; }
    .install-footer-line { width: 25px; }
    .install-panel { padding: 21px 18px 25px; }
    .install-panel-top { margin-bottom: 25px; }
    .install-heading h2, .install-success h2 { font-size: 22px; }
    .install-heading p, .install-success > p { font-size: 9px; }
    .install-checks { padding: 10px; }
    .install-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .install-check { min-height: 39px; padding-inline: 6px; }
    .install-check strong { font-size: 7px; }
    .install-notice { padding: 11px; }
    .install-notice p { font-size: 8px; }
    .install-fields { grid-template-columns: 1fr; gap: 11px; }
    .install-fields .install-full { grid-column: auto; }
    .install-form-footer { align-items: stretch; flex-direction: column; gap: 14px; }
    .install-submit { width: 100%; }
    .credential-row { align-items: flex-start; flex-direction: column; gap: 5px; padding-block: 10px; }
    .install-success { padding-top: 20px; }
}

/* Qiyas product interface v4 — modern role-based workspace */
.ui-icon { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; stroke: currentColor; }
.app-body { color: #122541; background: #eef3f8; }
.app-body::before { opacity: .2; background-image: radial-gradient(circle at 84% 3%, rgba(49,136,117,.12), transparent 24%), linear-gradient(rgba(65,107,165,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(65,107,165,.035) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; }
.sidebar { width: 272px; flex-basis: 272px; padding: 19px 14px 16px; background: linear-gradient(165deg, #061b3a 0%, #0b2850 56%, #103b61 100%); box-shadow: -20px 0 56px rgba(3,22,49,.18); }
.sidebar::after { content: ""; position: absolute; width: 290px; height: 290px; left: -150px; bottom: 96px; border: 1px solid rgba(164,218,204,.13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(164,218,204,.035), 0 0 0 58px rgba(164,218,204,.02); pointer-events: none; }
.brand-block { padding: 3px 11px 17px; }
.brand-logo { width: 148px; height: 52px; }
.profile-mini { margin: 3px 3px 11px; padding: 11px 10px; border-radius: 16px; background: rgba(255,255,255,.075); }
.profile-mini .avatar { width: 37px; height: 37px; border: 0; color: #09234a; background: linear-gradient(145deg,#d8f1e8,#84b8d1); }
.sidebar-role-card { display: flex; align-items: center; gap: 9px; margin: 0 3px 17px; padding: 10px; border: 1px solid rgba(185,225,216,.17); border-radius: 15px; color: #d8eee9; background: linear-gradient(135deg,rgba(49,136,117,.24),rgba(255,255,255,.065)); }
.sidebar-role-card > span:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-role-card small, .sidebar-role-card strong { display: block; }
.sidebar-role-card small { color: #8fb5c9; font-size: 8px; }
.sidebar-role-card strong { margin-top: 2px; color: #fff; font-size: 11px; }
.sidebar-role-icon { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #0b3b5d; background: #c8ecdf; }
.sidebar-role-icon .ui-icon { width: 17px; height: 17px; }
.role-arrow { color: #8fcdbd; font-size: 19px; line-height: 1; transform: rotate(90deg); }
.role-arrow .ui-icon { width: 14px; height: 14px; }
.nav-list { padding-inline: 1px; }
.nav-group + .nav-group { margin-top: 13px; }
.nav-caption { margin: 0 12px 7px; color: #6f97ba; font-size: 9px; letter-spacing: .2px; }
.nav-item { min-height: 46px; gap: 10px; padding: 8px 10px; margin: 3px 0; border-radius: 14px; }
.nav-copy { min-width: 0; flex: 1; display: block; }
.nav-copy > span { display: block; color: inherit; font-size: 11px; line-height: 1.4; }
.nav-item > span:not(.nav-icon) { min-width: 0; flex: 1; color: inherit; font-size: 11px; }
.nav-item small { display: block; color: #7798b6; font-size: 8px; line-height: 1.3; white-space: nowrap; }
.nav-item.active small { color: #b9e8db; }
.nav-icon { width: 31px; height: 31px; border-radius: 10px; color: #93cdbd; background: rgba(255,255,255,.07); }
.nav-icon .ui-icon { width: 16px; height: 16px; }
.nav-item:hover .nav-icon { color: #d4f3e8; background: rgba(255,255,255,.12); }
.nav-item.active .nav-icon { color: #0b3553; background: #cdf0e3; box-shadow: 0 7px 17px rgba(0,0,0,.13); }
.nav-divider { display: none; }
.sidebar-footer { padding-top: 11px; }
.sidebar-footer-note { padding-inline: 12px; font-size: 9px; }
.sidebar-footer > small { font-size: 8px; }
.main-content { width: calc(100% - 272px); margin-right: 272px; }
.topbar { min-height: 80px; padding: 0 38px; border-bottom-color: rgba(214,224,236,.88); background: rgba(250,252,254,.84); }
.topbar-title h1 { font-size: 20px; }
.topbar-title .eyebrow b { padding: 0 4px; color: #a6b6c8; font-weight: 400; }
.topbar-actions { gap: 12px; }
.topbar-scope { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #dbe8e8; border-radius: 11px; color: #47716f; background: #f3faf8; font-size: 9px; }
.topbar-scope .status-pulse { width: 6px; height: 6px; }
.notification-button { width: 38px; height: 38px; border-radius: 12px; }
.notification-button > span { display: grid; place-items: center; }
.notification-button .ui-icon { width: 17px; height: 17px; }
.top-user { gap: 8px; padding-right: 10px; border-right: 1px solid #dfe7ef; }
.top-user span { color: #203858; font-size: 11px; font-weight: 700; }
.top-user small { color: #7e91a7; font-size: 8px; }
.avatar-sm { width: 34px; height: 34px; border-radius: 11px; }
.content-wrap { width: min(1530px,100%); padding: 32px 38px 68px; }
.page-heading { align-items: center; margin-bottom: 23px; }
.page-heading h2 { font-size: 24px; }
.page-heading p { max-width: 690px; font-size: 11px; }
.page-heading > div:first-child > .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 5px 9px; border-radius: 8px; color: #2f8071; background: #e3f4ed; font-size: 8px; }
.heading-actions { gap: 8px; }
.button { min-height: 41px; border-radius: 12px; font-size: 11px; }
.button .ui-icon { width: 15px; height: 15px; }
.button-primary { box-shadow: 0 12px 24px rgba(49,136,117,.17); }
.alert { border-radius: 14px; padding: 12px 15px; }
.alert-icon { display: grid; place-items: center; }
.alert-icon .ui-icon { width: 16px; height: 16px; }
.alert-close { display: grid; place-items: center; }
.alert-close .ui-icon { width: 15px; height: 15px; }
.welcome-hero { min-height: 180px; padding: 27px 30px; margin-bottom: 19px; border-radius: 25px; background: linear-gradient(118deg,#071e40 0%,#123b70 57%,#27816f 100%); box-shadow: 0 24px 52px rgba(7,29,60,.2); }
.welcome-hero::after { left: 39%; bottom: -185px; }
.hero-overline { color: #b5e1d2; font-size: 9px; letter-spacing: .15px; }
.welcome-hero h3 { margin: 9px 0 6px; font-size: 23px; letter-spacing: -.4px; }
.welcome-hero p { color: #c5d9e9; font-size: 10px; }
.hero-metric { min-width: 165px; padding: 14px 16px; border-radius: 17px; background: rgba(255,255,255,.1); }
.hero-metric span, .hero-metric small { font-size: 8px; }
.hero-metric strong { margin: 7px 0 2px; font-size: 32px; }
.welcome-hero > img { width: 128px; height: 150px; left: 5%; opacity: .21; }
.kpi-grid { gap: 14px; margin-bottom: 19px; }
.kpi-card { min-height: 137px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.93); box-shadow: 0 12px 34px rgba(7,29,60,.065); }
.kpi-card:hover { border-color: #b8d9d0; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(7,29,60,.11); }
.kpi-top { color: #6e8197; font-size: 10px; }
.kpi-icon { width: 38px; height: 38px; border-radius: 12px; }
.kpi-icon .ui-icon { width: 18px; height: 18px; }
.kpi-value { margin-top: 12px; font-size: 29px; }
.kpi-note { font-size: 9px; }
.dashboard-grid, .split-grid { gap: 16px; margin-bottom: 17px; }
.panel { padding: 21px; border-radius: 21px; background: rgba(255,255,255,.91); box-shadow: 0 12px 34px rgba(7,29,60,.06); }
.panel:hover { border-color: rgba(182,211,211,.95); }
.panel-heading { margin-bottom: 17px; }
.panel-heading h3 { font-size: 14px; }
.panel-heading p { font-size: 9px; }
.panel-heading > .ui-icon { color: #6ba999; }
.quick-grid { gap: 9px; }
.quick-action { min-height: 69px; gap: 8px; padding: 11px; border-radius: 14px; font-size: 10px; }
.quick-action span { width: 30px; height: 30px; border-radius: 10px; }
.quick-action .ui-icon { width: 16px; height: 16px; }
.list-row { padding: 12px 0; }
.list-main strong { font-size: 11px; }
.list-main small { font-size: 9px; }
.badge { min-height: 23px; padding: 4px 9px; font-size: 8px; }
.filter-bar { gap: 10px; padding: 13px; margin-bottom: 19px; border-radius: 16px; box-shadow: 0 9px 25px rgba(7,29,60,.04); }
.filter-field label { font-size: 9px; }
.form-control { min-height: 42px; border-radius: 11px; font-size: 11px; }
.data-table-wrap { border-radius: 16px; box-shadow: 0 8px 22px rgba(7,29,60,.035); }
.data-table th { padding: 13px 14px; font-size: 9px; }
.data-table td { padding: 13px 14px; font-size: 10px; }
.data-table tbody tr:hover td { background: #f4faf8; }
.survey-grid, .card-grid { gap: 15px; }
.survey-card, .ticket-card, .challenge-card { padding: 18px; border-radius: 20px; box-shadow: 0 11px 30px rgba(7,29,60,.055); }
.survey-card::before { content: ""; display: block; width: 42px; height: 4px; margin-bottom: 15px; border-radius: 9px; background: linear-gradient(90deg,var(--teal),#7bb69d); }
.survey-card h3, .ticket-card h3, .challenge-card h3 { margin: 12px 0 6px; font-size: 13px; }
.survey-card p, .ticket-card p, .challenge-card p { font-size: 9px; }
.card-meta { margin: 12px 0; font-size: 8px; }
.card-footer { margin-top: 15px; padding-top: 13px; }
.card-footer .button { flex: 1; }
.progress { height: 6px; }
.empty-state { padding: 55px 22px; border-radius: 20px; }
.empty-icon { display: grid; place-items: center; }
.empty-icon .ui-icon { width: 22px; height: 22px; }
.question-row { border-radius: 18px; box-shadow: 0 8px 18px rgba(7,29,60,.035); }
.check-card { border-radius: 12px; font-size: 10px; }
.check-card input { accent-color: var(--teal); }
.permission-grid { gap: 9px; }
.permission-grid .check-card { align-items: flex-start; min-height: 54px; }

/* Role and reporting surfaces */
.role-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 5px 9px; border-radius: 9px; font-size: 8px; font-weight: 700; }
.role-badge .ui-icon { width: 13px; height: 13px; }
.role-manager { color: #245b91; background: #e8f2fc; }
.role-supervisor { color: #237266; background: #e5f6f0; }
.role-trainer { color: #87601d; background: #fff5df; }
.role-support { color: #8e4e62; background: #fcecf1; }
.role-legend { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 19px; }
.role-definition { min-height: 92px; padding: 13px; border: 1px solid #dfe8ef; border-radius: 16px; background: #fff; transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.role-definition:hover { transform: translateY(-3px); border-color: #b8d9d0; box-shadow: 0 12px 26px rgba(7,29,60,.07); }
.role-definition-head { display: flex; align-items: center; gap: 7px; }
.role-definition-head .ui-icon { width: 16px; height: 16px; color: #4f8e87; }
.role-definition strong, .role-definition small { display: block; }
.role-definition strong { color: var(--ink); font-size: 10px; }
.role-definition small { margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.7; }
.role-definition .role-badge { margin-right: auto; min-height: 20px; padding: 3px 6px; font-size: 7px; }
.permission-summary { display: flex; align-items: flex-start; gap: 13px; padding: 14px; margin-bottom: 16px; border: 1px solid #dcebe6; border-radius: 16px; background: linear-gradient(120deg,#f3fbf8,#fbfdfe); }
.permission-summary > .ui-icon { width: 22px; height: 22px; color: var(--teal); }
.permission-summary strong, .permission-summary p { display: block; }
.permission-summary strong { color: var(--ink); font-size: 11px; }
.permission-summary p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.user-cell { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.user-cell .avatar { width: 32px; height: 32px; border: 0; border-radius: 10px; font-size: 10px; }
.user-cell strong, .user-cell small { display: block; }
.user-cell strong { font-size: 10px; }
.user-cell small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.role-cell { display: flex; align-items: center; gap: 7px; }
.role-cell .ui-icon { width: 14px; height: 14px; color: #6a9e95; }
.permission-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.permission-pill { padding: 5px 7px; border-radius: 8px; color: #3d6e68; background: #eaf7f2; font-size: 8px; }
.permission-directory { margin-bottom: 17px; }
.permission-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.permission-directory-card { padding: 13px; border: 1px solid #e1e9ee; border-radius: 15px; background: linear-gradient(135deg,#fff,#f8fcfb); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.permission-directory-card:hover { transform: translateY(-2px); border-color: #b5d8ce; box-shadow: 0 12px 26px rgba(7,29,60,.07); }
.permission-directory-head { display: flex; align-items: center; gap: 8px; }
.permission-directory-head > div { min-width: 0; flex: 1; }
.permission-directory-head strong, .permission-directory-head small { display: block; }
.permission-directory-head strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.permission-directory-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.permission-directory-head .avatar { width: 31px; height: 31px; border: 0; border-radius: 10px; font-size: 9px; }
.permission-directory-head .button { min-width: 30px; padding-inline: 7px; }
.permission-directory-head .button .ui-icon { width: 13px; height: 13px; }

.report-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 25px; margin-bottom: 17px; border-radius: 23px; color: #fff; background: linear-gradient(118deg,#071d3c,#123967 64%,#318875); box-shadow: 0 22px 45px rgba(7,29,60,.16); position: relative; overflow: hidden; }
.report-hero::after { content: ""; position: absolute; width: 210px; height: 210px; left: 6%; bottom: -155px; border: 1px solid rgba(218,242,233,.28); border-radius: 50%; box-shadow: 0 0 0 25px rgba(218,242,233,.04), 0 0 0 49px rgba(218,242,233,.025); }
.report-hero-copy { position: relative; z-index: 1; }
.report-hero .eyebrow { color: #bfe5d8; }
.report-hero h2 { margin: 8px 0 6px; color: #fff; font-size: 22px; }
.report-hero p { max-width: 680px; margin: 0; color: #c8d9e9; font-size: 10px; line-height: 1.9; }
.report-hero-stat { min-width: 174px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(255,255,255,.09); position: relative; z-index: 1; }
.report-hero-stat small, .report-hero-stat strong { display: block; }
.report-hero-stat small { color: #b8cfe1; font-size: 8px; }
.report-hero-stat strong { margin-top: 5px; color: #e1f6ed; font-size: 25px; }
.report-filters { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr auto; align-items: end; gap: 9px; padding: 13px; margin-bottom: 18px; border: 1px solid #dce6ef; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 10px 27px rgba(7,29,60,.04); }
.report-filters .filter-field { min-width: 0; }
.report-filters .button { min-height: 42px; }
.report-list { display: grid; gap: 13px; }
.report-card { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(100px,.42fr)) auto; align-items: center; gap: 17px; padding: 17px 19px; border: 1px solid #dce6ed; border-radius: 18px; background: #fff; box-shadow: 0 8px 23px rgba(7,29,60,.045); transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.report-card:hover { transform: translateY(-3px); border-color: #abd4c7; box-shadow: 0 17px 35px rgba(7,29,60,.1); }
.report-card-title { min-width: 0; }
.report-card-title strong, .report-card-title small { display: block; }
.report-card-title strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.report-card-title small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.report-card-metric small, .report-card-metric strong { display: block; }
.report-card-metric small { color: var(--muted); font-size: 8px; }
.report-card-metric strong { margin-top: 5px; color: var(--navy); font-size: 17px; }
.report-card-progress { min-width: 90px; }
.report-card-progress .progress-row { margin: 0 0 6px; font-size: 8px; }
.report-card-progress .progress-row strong { font-size: 9px; }
.report-card-actions { display: flex; align-items: center; gap: 5px; }
.report-card-actions .button { min-width: 34px; padding-inline: 8px; }
.report-card-actions .button span { display: none; }
.report-card-actions .button .ui-icon { display: block; }
.report-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.report-stat { min-height: 112px; padding: 16px; border: 1px solid #dce7ed; border-radius: 18px; background: linear-gradient(145deg,#fff,#f8fbfc); box-shadow: 0 8px 23px rgba(7,29,60,.045); }
.report-stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.report-stat-top .ui-icon { width: 17px; height: 17px; color: #5b9a8d; }
.report-stat strong { display: block; margin-top: 13px; color: var(--navy); font-size: 25px; }
.report-stat small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.report-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 15px; align-items: start; }
.report-question-list { display: grid; gap: 13px; }
.report-question { padding: 19px; border: 1px solid #dce6ed; border-radius: 19px; background: rgba(255,255,255,.94); box-shadow: 0 9px 25px rgba(7,29,60,.045); }
.report-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; margin-bottom: 13px; }
.report-question-number { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #2d7468; background: #e6f6f0; font-size: 10px; font-weight: 700; }
.report-question-head > div { min-width: 0; flex: 1; }
.report-question-head h3 { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.7; }
.report-question-head p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.report-question .chart-wrap { min-height: 235px; margin: 0 -4px; }
.report-question .chart-wrap canvas { height: 225px !important; }
.answer-wall { display: grid; gap: 8px; }
.answer-quote { padding: 11px 12px; border: 1px solid #e3ecee; border-radius: 12px; color: #3d536b; background: #f7fbfa; font-size: 9px; line-height: 1.9; }
.answer-quote::before { content: "“"; margin-left: 4px; color: #64a494; font-size: 17px; vertical-align: middle; }
.report-side { display: grid; gap: 13px; }
.insight-card { padding: 18px; border: 1px solid #dce6ed; border-radius: 19px; background: #fff; box-shadow: 0 9px 25px rgba(7,29,60,.045); }
.insight-card h3 { margin: 0; color: var(--ink); font-size: 12px; }
.insight-card > p { margin: 5px 0 14px; color: var(--muted); font-size: 8px; line-height: 1.7; }
.insight-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf1f3; font-size: 9px; }
.insight-row:last-child { border-bottom: 0; padding-bottom: 0; }
.insight-row span { color: var(--muted); }
.insight-row strong { color: var(--ink-2); }
.respondent-panel { margin-top: 15px; }
.respondent-table .data-table { min-width: 760px; }
.respondent-profile { display: flex; align-items: center; gap: 9px; }
.respondent-profile .avatar { width: 34px; height: 34px; border: 0; border-radius: 10px; font-size: 10px; }
.respondent-profile strong, .respondent-profile small { display: block; }
.respondent-profile strong { color: var(--ink); font-size: 10px; }
.respondent-profile small { margin-top: 3px; color: var(--muted); font-size: 8px; direction: ltr; text-align: right; }
.response-detail-card { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid #dce8ee; border-radius: 16px; background: linear-gradient(120deg,#f4fbf8,#fff); }
.response-detail-card .avatar { width: 46px; height: 46px; border: 0; border-radius: 14px; }
.response-detail-card strong, .response-detail-card small { display: block; }
.response-detail-card strong { font-size: 13px; }
.response-detail-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.page-heading, .panel, .kpi-card, .survey-card, .report-card, .report-stat, .insight-card { animation: product-reveal .48s cubic-bezier(.2,.75,.2,1) both; }
.kpi-card:nth-child(2), .report-stat:nth-child(2) { animation-delay: .05s; }
.kpi-card:nth-child(3), .report-stat:nth-child(3) { animation-delay: .1s; }
.kpi-card:nth-child(4), .report-stat:nth-child(4) { animation-delay: .15s; }
.survey-card:nth-child(2), .report-card:nth-child(2) { animation-delay: .05s; }
.survey-card:nth-child(3), .report-card:nth-child(3) { animation-delay: .1s; }
@keyframes product-reveal { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
    .content-wrap { padding-inline: 27px; }
    .topbar { padding-inline: 27px; }
    .report-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .report-filters .button { width: 100%; }
    .report-card { grid-template-columns: minmax(0,1fr) repeat(2,minmax(90px,.45fr)) auto; }
    .report-card-progress { grid-column: 1 / -1; }
    .report-layout { grid-template-columns: 1fr; }
    .report-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .sidebar { width: 272px; flex-basis: 272px; transform: translateX(110%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { width: 100%; margin-right: 0; }
    .topbar-scope { display: none; }
    .role-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
    .content-wrap { padding: 23px 15px 48px; }
    .topbar { min-height: 70px; padding-inline: 15px; }
    .topbar-title h1 { font-size: 17px; }
    .top-user { padding-right: 6px; border-right: 0; }
    .top-user span, .top-user small { display: none; }
    .page-heading h2 { font-size: 21px; }
    .welcome-hero { min-height: 245px; padding: 21px; }
    .hero-metric { min-width: 145px; margin-right: 0; }
    .welcome-hero > img { left: -15px; bottom: -40px; }
    .role-legend, .report-stat-grid, .report-side, .permission-directory-grid { grid-template-columns: 1fr; }
    .report-hero { align-items: stretch; flex-direction: column; padding: 20px; }
    .report-hero-stat { min-width: 0; }
    .report-filters { grid-template-columns: 1fr; }
    .report-card { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 15px; }
    .report-card-metric:nth-of-type(2), .report-card-metric:nth-of-type(3) { display: none; }
    .report-card-progress { grid-column: 1 / -1; }
    .report-card-actions .button { min-width: 32px; }
    .report-card-actions .button span { display: none; }
    .panel { padding: 16px; }
    .respondent-table .data-table { min-width: 650px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-heading, .panel, .kpi-card, .survey-card, .report-card, .report-stat, .insight-card { animation: none; }
}
@media print {
    .report-hero { color: #122541; border: 1px solid #d5e0e6; background: #fff; box-shadow: none; }
    .report-hero h2 { color: #122541; }
    .report-hero p, .report-hero .eyebrow, .report-hero-stat small { color: #52677e; }
    .report-hero-stat { border-color: #d5e0e6; background: #f8fbfc; }
    .report-hero-stat strong { color: #122541; }
    .report-card, .report-stat, .report-question, .insight-card { box-shadow: none; break-inside: avoid; }
}

/* Qiyas v5 interaction layer: calm role colors, profiles, map, support and async states. */
.role-badge.role-manager { color: #76591b; background: #fff5d9; border: 1px solid #f0d99a; }
.role-badge.role-supervisor { color: #216b65; background: #e4f5ef; border: 1px solid #b9dfd2; }
.role-badge.role-trainer { color: #315f8e; background: #e9f1fb; border: 1px solid #cbdced; }
.role-badge.role-support { color: #4c6178; background: #eef2f6; border: 1px solid #d8e0e8; }
.role-select-icon { color: #8a6824; background: #fff5dc; }
.role-select-teal { color: #27766e; background: #e4f5ef; }
.role-select-gold { color: #416ba5; background: #eaf2fb; }
.role-select-pink { color: #5e7389; background: #eef2f6; }
.role-manager .sidebar-role-icon { color: #785c1f; background: #fff0c9; }
.role-supervisor .sidebar-role-icon { color: #216b65; background: #d9f0e8; }
.role-trainer .sidebar-role-icon { color: #315f8e; background: #dce9f7; }
.role-support .sidebar-role-icon { color: #536b82; background: #e7edf3; }
.role-cell-manager { color: #8a6824; background: #fff5dc; }
.role-cell-supervisor { color: #27766e; background: #e4f5ef; }
.role-cell-trainer { color: #416ba5; background: #eaf2fb; }
.role-cell-support { color: #5e7389; background: #eef2f6; }
.avatar-image { display: block; object-fit: cover; object-position: center; overflow: hidden; }
.profile-mini .avatar-image, .top-user .avatar-image, .user-cell .avatar-image { flex: 0 0 auto; }
.verified-badge { width: 17px; height: 17px; display: inline-grid; place-items: center; vertical-align: middle; border: 2px solid #fff; border-radius: 50%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 1; box-shadow: 0 2px 6px rgba(7,29,60,.16); }
.verified-manager { background: #d3a33b; }
.verified-supervisor { background: #397fc1; }
.table-user-link { color: var(--ink); transition: color .2s ease; }
.table-user-link:hover { color: var(--teal-dark); }
.visually-hidden { width: 1px !important; height: 1px !important; position: absolute !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.is-navigating .content-wrap { opacity: .55; transition: opacity .18s ease; }
.app-shell form[aria-busy="true"] { pointer-events: none; opacity: .74; }
.async-toast { position: fixed; right: 25px; bottom: 25px; z-index: 120; max-width: min(420px, calc(100vw - 32px)); padding: 13px 17px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; color: #fff; box-shadow: 0 18px 45px rgba(7,29,60,.2); animation: toast-in .3s cubic-bezier(.2,.8,.2,1) both; font-size: 11px; font-weight: 700; }
.async-toast.is-success { background: linear-gradient(135deg, #267d69, #318875); }
.async-toast.is-error { background: linear-gradient(135deg, #a23f50, #c84e5a); }
.async-toast.is-leaving { animation: toast-out .26s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }

.profile-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.profile-hero-card { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(170px,.42fr); align-items: center; gap: 21px; padding: 25px; margin-bottom: 15px; border: 1px solid #dce8ec; border-radius: 24px; background: linear-gradient(135deg,#fff 0%,#f3faf8 100%); box-shadow: 0 16px 36px rgba(7,29,60,.07); }
.profile-hero-avatar { width: 116px; height: 116px; position: relative; }
.profile-hero-avatar .avatar-image { width: 116px; height: 116px; border: 7px solid #fff; border-radius: 36px; box-shadow: 0 12px 28px rgba(7,29,60,.14); }
.profile-online { width: 15px; height: 15px; position: absolute; right: 9px; bottom: 7px; border: 3px solid #fff; border-radius: 50%; background: #65bb91; }
.profile-hero-main { min-width: 0; }
.profile-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-name-line h1 { margin: 0; color: var(--navy); font-size: 23px; }
.profile-hero-main > p { max-width: 670px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 2; }
.profile-hero-side { padding: 14px 16px; border: 1px solid #dceae6; border-radius: 16px; background: rgba(255,255,255,.72); }
.profile-hero-side small, .profile-hero-side strong, .profile-hero-side span { display: block; }
.profile-hero-side small { color: var(--muted); font-size: 9px; }
.profile-hero-side strong { margin-top: 7px; color: var(--teal-dark); font-size: 14px; }
.profile-hero-side span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.profile-stats > div { min-height: 108px; padding: 15px; border: 1px solid #dfe9ee; border-radius: 18px; background: #fff; box-shadow: 0 9px 24px rgba(7,29,60,.045); }
.profile-stats > div > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-dark); background: #e4f5ef; }
.profile-stats > div > span .ui-icon { width: 15px; height: 15px; }
.profile-stats strong, .profile-stats small { display: block; }
.profile-stats strong { margin-top: 10px; color: var(--navy); font-size: 18px; }
.profile-stats small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.profile-permission-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.profile-permission-item { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #dce9ee; border-radius: 14px; background: #fbfdfe; }
.profile-permission-item > .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--teal); }
.profile-permission-item strong, .profile-permission-item small { display: block; }
.profile-permission-item strong { color: var(--ink); font-size: 10px; }
.profile-permission-item small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.7; }
.profile-permission-item.is-full { border-color: #e7d69f; background: #fffaf0; }
.profile-permission-item.is-full > .ui-icon { color: #bd8b29; }
.profile-permission-item.is-muted { opacity: .78; }

.profile-editor { display: flex; align-items: center; gap: 15px; padding: 14px; margin-bottom: 17px; border: 1px dashed #bad8d0; border-radius: 18px; background: linear-gradient(135deg,#f4fbf8,#fff); }
.profile-editor-avatar { width: 82px; height: 82px; flex: 0 0 auto; border: 4px solid #fff; border-radius: 25px; box-shadow: 0 8px 20px rgba(7,29,60,.12); }
.avatar-upload-button { min-height: 36px; }
.profile-editor .form-note { display: block; max-width: 460px; margin-top: 7px; line-height: 1.7; }
.profile-edit-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 16px; align-items: start; }
.profile-edit-side { display: grid; gap: 16px; min-width: 0; }
.profile-editor-large { padding: 18px; background: linear-gradient(135deg,#f4fbf8,#fff); }
.profile-editor-large .profile-editor-avatar { width: 112px; height: 112px; border-radius: 32px; }
.profile-quick-card { padding: 23px; border: 1px solid #dce8ec; border-radius: 22px; background: linear-gradient(145deg,#fff,#f2faf7); box-shadow: 0 16px 36px rgba(7,29,60,.07); }
.profile-quick-avatar { width: 84px; height: 84px; margin-bottom: 15px; border: 5px solid #fff; border-radius: 27px; box-shadow: 0 10px 24px rgba(7,29,60,.12); }
.profile-quick-card h3 { margin: 0; color: var(--navy); font-size: 16px; }
.profile-quick-card > .role-badge { margin-top: 11px; }
.profile-quick-card > p { margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.profile-quick-meta { display: grid; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #deebe7; color: #526b82; font-size: 9px; }
.profile-quick-meta span { display: flex; align-items: center; gap: 6px; }
.profile-quick-meta .ui-icon { width: 14px; height: 14px; color: var(--teal); }
.profile-view-link { width: 100%; justify-content: space-between; margin-top: 14px; }
.role-preview { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid #dfe8ee; border-radius: 14px; background: #f9fbfd; }
.role-preview-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--teal-dark); background: #e3f5ef; }
.role-preview-icon .ui-icon { width: 17px; height: 17px; }
.role-preview strong, .role-preview small { display: block; }
.role-preview strong { color: var(--ink); font-size: 10px; }
.role-preview small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.role-preview .verified-badge { margin-right: auto; }
.password-result-modern { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px; }
.password-result-modern p { grid-column: 1/-1; margin: 0; }

.locations-layout { display: grid; grid-template-columns: minmax(0,1.24fr) minmax(290px,.76fr); gap: 16px; margin-bottom: 16px; }
.location-map-panel, .city-directory-panel { min-width: 0; }
.live-map-shell { padding: 10px 7px 12px; border: 1px solid #deebe8; border-radius: 19px; background: linear-gradient(145deg,#f4fbf9,#f2f7fb); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.live-map { width: 100%; height: 405px; min-height: 320px; overflow: hidden; border: 1px solid rgba(31,84,111,.12); border-radius: 16px; direction: ltr; color: #5f7388; background: #e8f1f5; box-shadow: 0 14px 35px rgba(7,29,60,.09); }
.live-map:not(.map-ready) { display: grid; place-items: center; padding: 24px; text-align: center; font-size: 10px; }
.live-map.map-unavailable { color: #a34350; background: #fff5f5; }
.live-map .leaflet-control-zoom { overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(7,29,60,.18); }
.live-map .leaflet-control-zoom a { width: 32px; height: 32px; line-height: 32px; border-color: #e4ebef; color: var(--navy); }
.live-map .leaflet-control-attribution { padding: 3px 7px; border-radius: 8px 0 0 0; font-size: 8px; background: rgba(255,255,255,.88); }
.live-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 12px 30px rgba(7,29,60,.18); }
.live-map .leaflet-popup-content { margin: 12px 15px; }
.live-map-popup { min-width: 120px; direction: rtl; text-align: right; }
.live-map-popup strong, .live-map-popup span { display: block; }
.live-map-popup strong { color: var(--navy); font-size: 11px; }
.live-map-popup span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.map-selection-note { display: flex; align-items: center; min-height: 38px; margin-top: 9px; padding: 9px 12px; border: 1px dashed #c8ddd7; border-radius: 12px; color: #526b82; background: rgba(255,255,255,.72); font-size: 9px; line-height: 1.7; }
.city-directory { max-height: 405px; padding-left: 4px; overflow: auto; scrollbar-width: thin; }
.city-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 7px; border: 1px solid transparent; border-radius: 13px; text-align: right; color: var(--ink); background: transparent; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.city-row:hover, .city-row.is-active { border-color: #c8e1d8; background: #f0faf6; transform: translateX(-3px); }
.city-row-pin { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #4c8b80; background: #e7f6f0; }
.city-row-pin .ui-icon { width: 14px; height: 14px; }
.city-row > span:nth-child(2) { min-width: 0; flex: 1; }
.city-row strong, .city-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-row strong { font-size: 10px; }
.city-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.city-row b { min-width: 24px; color: var(--teal-dark); font-size: 12px; text-align: center; }
.locations-forms { margin-bottom: 16px; }
.group-chip-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.group-chip-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px; border: 1px solid #dfe9ee; border-radius: 15px; background: linear-gradient(140deg,#fff,#f8fcfb); transition: transform .2s ease, box-shadow .2s ease; }
.group-chip-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(7,29,60,.07); }
.group-chip-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #416ba5; background: #e9f1fb; }
.group-chip-icon .ui-icon { width: 16px; height: 16px; }
.group-chip-card > div:nth-child(2) { min-width: 0; flex: 1; }
.group-chip-card strong, .group-chip-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-chip-card strong { font-size: 10px; }
.group-chip-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }

.settings-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-layout > section:last-child { grid-column: 1/-1; }
.color-setting-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.color-setting { display: flex; align-items: center; gap: 8px; min-height: 74px; padding: 10px; border: 1px solid #dfe8ee; border-radius: 15px; background: #fbfdfe; }
.color-setting span { flex: 1; color: var(--ink-2); font-size: 9px; }
.color-setting input { width: 37px; height: 37px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.color-setting code { color: var(--muted); font: 8px Consolas,monospace; direction: ltr; }
.theme-preview { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 12px; border: 1px solid #e1e9ee; border-radius: 14px; background: #fff; }
.theme-preview-swatch { width: 21px; height: 21px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(7,29,60,.08); }
.theme-preview div { margin-right: auto; }
.theme-preview strong, .theme-preview small { display: block; }
.theme-preview strong { color: var(--ink); font-size: 9px; }
.theme-preview small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.current-file-row { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 13px; border: 1px solid #dfebe9; border-radius: 13px; background: #f7fcfa; }
.current-file-row img { width: 52px; height: 42px; object-fit: contain; border-radius: 9px; background: #0b2549; }
.current-file-row strong, .current-file-row small { display: block; }
.current-file-row strong { font-size: 10px; }
.current-file-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.template-status { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 11px; margin-top: 13px; border: 1px solid #e5ebef; border-radius: 13px; color: var(--muted); font-size: 9px; }
.template-status .ui-icon { width: 15px; height: 15px; color: var(--teal); }
.template-status .button { margin-right: auto; }

.report-detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 25px 27px; margin-bottom: 18px; border-radius: 24px; color: #fff; background: linear-gradient(120deg,#071d3c,#1d4e78 61%,#318875); box-shadow: 0 24px 54px rgba(7,29,60,.18); overflow: hidden; position: relative; }
.report-detail-hero::after { content: ""; width: 230px; height: 230px; position: absolute; left: 5%; bottom: -174px; border: 1px solid rgba(226,246,238,.22); border-radius: 50%; box-shadow: 0 0 0 28px rgba(226,246,238,.04), 0 0 0 56px rgba(226,246,238,.025); }
.report-detail-hero > div:first-child { position: relative; z-index: 1; }
.report-detail-hero h2 { margin: 8px 0 6px; color: #fff; font-size: 23px; }
.report-detail-hero p { max-width: 690px; margin: 0; color: #c9dbea; font-size: 10px; line-height: 1.9; }
.report-detail-hero .eyebrow { color: #bde5d6; }
.report-detail-score { min-width: 174px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: rgba(255,255,255,.1); position: relative; z-index: 1; }
.report-detail-score small, .report-detail-score strong, .report-detail-score span { display: block; }
.report-detail-score small, .report-detail-score span { color: #c2d6e8; font-size: 8px; }
.report-detail-score strong { margin: 6px 0 2px; color: #e4f8ee; font-size: 31px; }
.report-detail-actions { margin-bottom: 18px; }

.challenge-summary-grid, .ticket-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 17px; }
.challenge-summary-card, .ticket-summary-card { min-height: 91px; padding: 14px; border: 1px solid #dfe9ee; border-radius: 17px; background: #fff; box-shadow: 0 8px 21px rgba(7,29,60,.045); transition: transform .2s ease, box-shadow .2s ease; }
.challenge-summary-card:hover, .ticket-summary-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(7,29,60,.08); }
.challenge-summary-card span, .challenge-summary-card small, .ticket-summary-card span, .ticket-summary-card small { display: block; }
.challenge-summary-card span, .ticket-summary-card span { color: var(--muted); font-size: 9px; }
.challenge-summary-card strong, .ticket-summary-card strong { display: block; margin-top: 8px; color: var(--navy); font-size: 23px; }
.challenge-summary-card small, .ticket-summary-card small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.challenge-description { max-width: 330px; margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: #f8fbfc; font-size: 8px; line-height: 1.7; }
.challenge-update-form { display: grid; grid-template-columns: 125px 145px auto; align-items: center; gap: 5px; min-width: 290px; }
.challenge-update-form .form-control { min-height: 34px; padding-block: 5px; font-size: 9px; }
.ticket-card-main { display: flex; align-items: center; gap: 10px; }
.ticket-card-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #416ba5; background: #eaf2fb; }
.ticket-card-icon .ui-icon { width: 17px; height: 17px; }
.ticket-card-main > div { min-width: 0; flex: 1; }
.ticket-card-main h3 { margin-top: 0; }
.ticket-card-arrow { color: var(--teal); transition: transform .2s ease; }
.ticket-card:hover .ticket-card-arrow { transform: translateX(-4px); }

.floating-support { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 9px 14px; position: fixed; left: 24px; bottom: 23px; z-index: 75; border: 1px solid rgba(255,255,255,.65); border-radius: 17px; color: #fff; background: linear-gradient(135deg,#1d547f,#318875); box-shadow: 0 16px 34px rgba(7,29,60,.23); font-size: 10px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; animation: support-float 3.4s ease-in-out infinite; }
.floating-support:hover { transform: translateY(-4px); box-shadow: 0 21px 40px rgba(7,29,60,.3); }
.floating-support .ui-icon { width: 18px; height: 18px; }
.floating-support b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 8px; color: #24415e; background: #dff3eb; font-size: 14px; }
@keyframes support-float { 0%,100% { box-shadow: 0 16px 34px rgba(7,29,60,.23); } 50% { box-shadow: 0 19px 40px rgba(49,136,117,.28); } }
.support-modal { display: none; position: fixed; inset: 0; z-index: 100; }
.support-modal.is-open { display: block; }
.support-modal-backdrop { position: absolute; inset: 0; background: rgba(7,29,60,.47); backdrop-filter: blur(5px); animation: fade-in .2s both; }
.support-modal-card { width: min(520px, calc(100vw - 30px)); max-height: calc(100vh - 34px); overflow: auto; padding: 25px; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.7); border-radius: 23px; background: #fff; box-shadow: 0 28px 80px rgba(7,29,60,.25); transform: translate(-50%,-50%); animation: modal-in .3s cubic-bezier(.2,.8,.2,1) both; }
.support-modal-close { position: absolute; left: 17px; top: 17px; color: var(--muted); }
.support-modal-card h2 { margin: 9px 0 6px; color: var(--navy); font-size: 20px; }
.support-modal-card > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.modal-open { overflow: hidden; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%,-46%) scale(.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

@media (max-width: 980px) {
    .locations-layout { grid-template-columns: 1fr; }
    .live-map { height: 360px; min-height: 300px; }
    .city-directory { max-height: 330px; }
    .profile-hero-card { grid-template-columns: auto minmax(0,1fr); }
    .profile-hero-side { grid-column: 1/-1; }
    .profile-edit-layout { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-layout > section:last-child { grid-column: auto; }
}
@media (max-width: 680px) {
    .live-map { height: 320px; min-height: 280px; }
    .profile-page-head { align-items: stretch; flex-direction: column; }
    .profile-page-head .button { align-self: flex-start; }
    .profile-hero-card { grid-template-columns: 1fr; justify-items: start; padding: 18px; }
    .profile-hero-side { width: 100%; grid-column: auto; }
    .profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-permission-list, .group-chip-grid { grid-template-columns: 1fr; }
    .profile-editor { align-items: flex-start; flex-direction: column; }
    .profile-editor-large .profile-editor-avatar { width: 88px; height: 88px; }
    .color-setting-grid { grid-template-columns: 1fr; }
    .report-detail-hero { align-items: stretch; flex-direction: column; padding: 20px; }
    .report-detail-score { min-width: 0; }
    .challenge-summary-grid, .ticket-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .challenge-list .data-table { min-width: 930px; }
    .challenge-update-form { grid-template-columns: 1fr; min-width: 135px; }
    .floating-support { right: 15px; left: 15px; bottom: 14px; justify-content: center; }
    .async-toast { right: 15px; bottom: 76px; }
}

/* Clear, branded state for protected or time-bounded survey links. */
.survey-access-state { max-width: 760px; min-height: 300px; padding: 38px 34px; text-align: center; border: 1px solid #dce8ee; border-radius: 26px; background: linear-gradient(145deg,#fff,#f4faf9); box-shadow: 0 18px 42px rgba(7,29,60,.07); animation: content-rise .42s cubic-bezier(.2,.8,.2,1) both; }
.survey-access-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 17px; border: 8px solid #e8f5f0; border-radius: 22px; color: var(--teal-dark); background: #d8f0e8; }
.survey-access-icon .ui-icon { width: 26px; height: 26px; }
.survey-access-state .eyebrow { color: var(--teal-dark); }
.survey-access-state h2 { margin: 11px 0 8px; color: var(--navy); font-size: 23px; }
.survey-access-state p { max-width: 540px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 2; }
.survey-access-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
@keyframes content-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 540px) { .survey-access-state { padding: 29px 19px; } .survey-access-actions > .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .floating-support { animation: none; }
}

/* Keep the featured person visible on both wide and compact login screens. */
.login-figure { width: 480px; left: -88px; bottom: -36px; opacity: .96; }
@media (max-width: 1080px) {
    .login-figure { width: 425px; left: -102px; bottom: -42px; }
}
@media (max-width: 900px) {
    .login-figure { width: 360px; left: auto; right: -55px; bottom: -62px; opacity: .52; }
}
@media (max-width: 620px) {
    .login-figure { width: 315px; right: -48px; bottom: -43px; opacity: .38; }
}

/* ================================================================
   Qiyas v13 Production Edition — production UI layer
   Keeps the established navy/teal/gold identity and adds controlled
   indigo/blue accents, glass surfaces, safer spacing and responsive grids.
   ================================================================ */
:root{
  --v13-indigo:#5b4cf2;--v13-blue:#1677ff;--v13-cyan:#06b6d4;--v13-green:#10b981;
  --v13-orange:#f59e0b;--v13-pink:#ec4899;--v13-red:#ef4444;--v13-navy:#071d3c;
  --v13-ink:#13294b;--v13-muted:#71849d;--v13-border:rgba(65,91,130,.13);
  --v13-card:rgba(255,255,255,.88);--v13-shadow:0 18px 48px rgba(27,48,84,.08),0 3px 12px rgba(27,48,84,.04);
  --v13-radius:22px;
}
body.app-body{background:
  radial-gradient(circle at 7% 5%,rgba(6,182,212,.10),transparent 28%),
  radial-gradient(circle at 92% 3%,rgba(91,76,242,.08),transparent 28%),
  linear-gradient(180deg,#f8fbff 0%,var(--bg,#f4f8fb) 54%,#f7f9fd 100%);color:var(--v13-ink)}
.app-shell{min-height:100vh}.main-content{min-width:0}.content-wrap{max-width:1780px;margin-inline:auto;width:100%;padding:28px 30px 42px;box-sizing:border-box}
.sidebar{background:linear-gradient(180deg,#061b38 0%,#0d315d 46%,#114f62 100%);box-shadow:-16px 0 44px rgba(5,25,54,.14);border-left:1px solid rgba(255,255,255,.06)}
.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 8%,rgba(91,76,242,.28),transparent 30%),radial-gradient(circle at 40% 90%,rgba(6,182,212,.15),transparent 30%)}
.sidebar>*{position:relative}.brand{gap:11px}.brand-logo{filter:drop-shadow(0 7px 15px rgba(0,0,0,.18))}.brand-copy small{opacity:.78;font-size:10px;letter-spacing:.02em}.profile-mini,.sidebar-role-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(12px)}
.nav-item{border-radius:15px;margin-block:2px}.nav-item.active{background:linear-gradient(135deg,rgba(91,76,242,.88),rgba(22,119,255,.72));box-shadow:0 10px 26px rgba(36,42,145,.25);border-color:rgba(255,255,255,.16)}
.topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(20px);border-bottom:1px solid rgba(54,74,107,.08);box-shadow:0 8px 30px rgba(31,51,86,.04)}
.topbar-title .eyebrow b{color:var(--user-accent,var(--v13-indigo))}.notification-button{box-shadow:0 8px 22px rgba(57,76,112,.07)}
.panel{background:var(--v13-card);border:1px solid var(--v13-border);border-radius:var(--v13-radius);box-shadow:var(--v13-shadow);backdrop-filter:blur(18px);overflow:hidden}.panel:hover{border-color:rgba(91,76,242,.17)}
.button{border-radius:13px}.button-primary{background:linear-gradient(135deg,var(--user-accent,var(--teal)),color-mix(in srgb,var(--user-accent,var(--teal)) 72%,#3356e8));box-shadow:0 9px 22px color-mix(in srgb,var(--user-accent,var(--teal)) 20%,transparent)}
.form-control{border-radius:13px;background:rgba(251,253,255,.92);border-color:rgba(71,92,125,.17);min-width:0}.form-control:focus{border-color:color-mix(in srgb,var(--user-accent,var(--v13-indigo)) 60%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--user-accent,var(--v13-indigo)) 11%,transparent)}

.v13-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin:2px 0 24px;padding:4px 2px}.v13-heading>div:first-child{min-width:0}.v13-heading h2{font-size:clamp(25px,2vw,34px);margin:5px 0 7px;color:#102647;letter-spacing:-.02em}.v13-heading p{margin:0;color:var(--v13-muted);max-width:850px;line-height:1.85}.v13-edition{display:inline-flex;align-items:center;gap:7px;color:var(--v13-indigo);font-size:11px;font-weight:800;background:rgba(91,76,242,.08);border:1px solid rgba(91,76,242,.12);padding:6px 10px;border-radius:999px}.heading-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.v13-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.v13-kpi{position:relative;display:flex;align-items:center;gap:13px;min-width:0;padding:18px 16px 17px;border-radius:20px;background:rgba(255,255,255,.91);border:1px solid var(--v13-border);box-shadow:0 12px 30px rgba(41,60,94,.055);overflow:hidden}.v13-kpi:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;left:-25px;bottom:-45px;background:var(--kpi-glow,rgba(91,76,242,.08));filter:blur(2px)}.v13-kpi-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:#fff;flex:0 0 auto;background:linear-gradient(135deg,var(--kpi-a,#5b4cf2),var(--kpi-b,#7c66ff));box-shadow:0 10px 20px var(--kpi-shadow,rgba(91,76,242,.22))}.v13-kpi-icon svg{width:21px;height:21px}.v13-kpi>div:nth-child(2){display:grid;gap:3px;min-width:0}.v13-kpi span{font-size:11px;color:#667b97;font-weight:700}.v13-kpi strong{font-size:25px;line-height:1.1;color:#13294b}.v13-kpi small{font-size:9px;color:#91a0b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v13-kpi>i{position:absolute;height:2px;width:42px;border-radius:10px;bottom:13px;left:14px;background:linear-gradient(90deg,transparent,var(--kpi-a,#5b4cf2),transparent);opacity:.58}.tone-1{--kpi-a:#5b4cf2;--kpi-b:#7c3aed;--kpi-glow:rgba(91,76,242,.11)}.tone-2{--kpi-a:#1677ff;--kpi-b:#3b82f6;--kpi-glow:rgba(22,119,255,.10)}.tone-3{--kpi-a:#0dbfa8;--kpi-b:#06b6d4;--kpi-glow:rgba(6,182,212,.10)}.tone-4{--kpi-a:#ff6b5f;--kpi-b:#ef4444;--kpi-glow:rgba(239,68,68,.09)}.tone-5{--kpi-a:#7c3aed;--kpi-b:#5b4cf2;--kpi-glow:rgba(124,58,237,.10)}.tone-6{--kpi-a:#0ea5e9;--kpi-b:#2563eb;--kpi-glow:rgba(14,165,233,.10)}
.v13-dashboard-grid{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(420px,1.45fr) minmax(300px,1fr);gap:16px;margin-bottom:16px}.v13-lower-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.v13-dashboard-grid>.panel,.v13-lower-grid>.panel{min-width:0;height:100%}.health-list{display:grid;gap:1px}.health-list>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 5px;border-bottom:1px solid rgba(85,104,137,.08)}.health-list>div:last-child{border-bottom:0}.health-list small{display:block;color:#8b9aae;margin-top:2px}.health-list b{font-size:10px;background:#e7f8ef;color:#228a5b;padding:5px 8px;border-radius:99px}.health-dot{width:9px;height:9px;border-radius:50%;background:#aeb9c6;box-shadow:0 0 0 4px rgba(160,175,190,.1)}.health-dot.ok{background:#16a66c;box-shadow:0 0 0 4px rgba(22,166,108,.10)}.health-dot.bad{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.10)}
.v13-map-visual{min-height:280px;border-radius:18px;background:linear-gradient(145deg,#eef5ff,#f5f6ff 48%,#eefbfb);position:relative;overflow:hidden;border:1px solid rgba(70,103,160,.10)}.v13-map-visual:before{content:"";position:absolute;inset:20px;background:radial-gradient(ellipse at 50% 50%,rgba(91,76,242,.08),transparent 54%),repeating-linear-gradient(28deg,transparent 0 42px,rgba(65,92,132,.035) 43px 44px);border-radius:20px}.v13-map-callout{position:absolute;inset:auto 16px 16px 16px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 25px rgba(40,61,100,.09);padding:13px 15px;border-radius:15px;display:flex;gap:11px;align-items:center}.v13-map-callout svg{color:var(--v13-indigo)}
.v13-user-list,.v13-support-list,.v13-job-list,.v13-audit-mini{display:grid;gap:9px}.v13-user-row,.v13-support-list>article,.v13-job-list>article,.v13-audit-mini>article{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:15px;background:rgba(246,249,253,.83);border:1px solid rgba(84,103,133,.07);min-width:0}.v13-user-row .avatar,.v13-preview-user .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 7px 15px rgba(36,51,80,.15)}.v13-user-row>div,.v13-support-list article>div,.v13-job-list article>div,.v13-audit-mini article>div{min-width:0;flex:1}.v13-user-row strong,.v13-support-list strong,.v13-job-list strong,.v13-audit-mini strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v13-user-row small,.v13-support-list small,.v13-job-list small,.v13-audit-mini small{display:block;color:#8696ab;margin-top:3px;font-size:9px}.v13-support-list b,.v13-job-list b{font-size:10px;padding:5px 8px;border-radius:99px;background:#f1efff;color:#6550dd;white-space:nowrap}.v13-job-list time{font-size:9px;color:#64809c;white-space:nowrap}
.v13-user-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.v13-user-card{position:relative;display:flex;gap:13px;align-items:flex-start;min-width:0;padding:17px;background:rgba(255,255,255,.9);border:1px solid var(--v13-border);border-radius:20px;box-shadow:0 12px 30px rgba(41,60,94,.055);overflow:hidden}.v13-user-card:before{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--card-accent,var(--v13-indigo))}.v13-user-card .avatar{width:52px;height:52px;flex:0 0 auto;border-radius:17px;object-fit:cover}.v13-user-card-body{min-width:0;flex:1}.v13-user-card h3{margin:0 0 4px;font-size:14px}.v13-user-card p{margin:0;color:#8494a9;font-size:10px}.v13-user-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.v13-user-meta span{font-size:9px;background:#f2f6fa;padding:5px 7px;border-radius:9px;color:#60728b}.v13-user-actions{display:flex;gap:6px;flex-wrap:wrap}.v13-once-secret{padding:15px 17px;border-radius:17px;background:linear-gradient(135deg,#fff8e4,#fffdf6);border:1px solid #f3dda3;margin-bottom:16px;color:#6c531b}.v13-once-secret code{display:inline-block;margin:0 7px;padding:6px 9px;border-radius:9px;background:#fff;font-weight:800;color:#33280d}.v13-color-control{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center}.v13-color-control input[type=color]{width:52px;height:44px;border:0;padding:3px;background:transparent}.v13-form-panel{padding:22px}
.v13-permissions-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:16px}.v13-inline-filter{display:flex;align-items:center;gap:10px;margin-bottom:15px}.v13-inline-filter .form-control{max-width:420px}.permission-matrix-v13{overflow:auto}.permission-matrix-v13 table{width:100%;border-collapse:separate;border-spacing:0 7px}.permission-matrix-v13 td,.permission-matrix-v13 th{text-align:right;padding:10px}.permission-matrix-v13 tbody tr{background:#f8fafc}.permission-chips{display:flex;gap:6px;flex-wrap:wrap}.permission-chips label input{position:absolute;opacity:0}.permission-chips label span{display:inline-flex;padding:6px 9px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;font-size:10px;cursor:pointer}.permission-chips label input:checked+span{background:#edf0ff;border-color:#9f94ff;color:#5546d7;font-weight:800}.v13-preview-user{display:flex;gap:10px;align-items:center;margin:8px 0 16px}.v13-preview-user small{display:block;color:#8898ac}.v13-preview-menu{display:grid;gap:7px}.v13-preview-menu>div{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#f8fafc}.v13-preview-menu .allowed span{color:#16a66c}.v13-preview-menu .denied{opacity:.48}.v13-preview-menu small{font-size:9px;color:#8190a5}
.v13-health-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.v13-health-tile{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.9);border:1px solid var(--v13-border);border-radius:18px;padding:13px;box-shadow:0 10px 25px rgba(40,61,96,.045);min-width:0}.v13-health-tile>span{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#eaf7f1;color:#1c9966}.v13-health-tile.bad>span{background:#fff0f0;color:#e14a4a}.v13-health-tile strong,.v13-health-tile small{display:block;overflow:hidden;text-overflow:ellipsis}.v13-health-tile small{font-size:9px;color:#8494a9;margin-top:2px;white-space:nowrap}.v13-health-tile b{font-size:9px;color:#1c9966}.v13-health-tile.bad b{color:#d74747}.v13-system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.v13-system-grid>.span-2{grid-column:span 2}.v13-backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v13-action-card{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:16px;border:1px solid rgba(78,98,130,.11);background:#f9fbfd;text-decoration:none;color:inherit}.v13-action-card>span{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#efefff;color:var(--v13-indigo)}.v13-action-card small{color:#8999ad}.v13-security-list,.v13-diag-list{display:grid;gap:8px}.v13-security-list>div,.v13-diag-list>div{display:flex;align-items:center;justify-content:space-between;gap:9px;background:#f8fafc;border-radius:12px;padding:9px 11px}.v13-security-list small,.v13-diag-list small{color:#8192a8}.v13-totp{margin-top:13px;padding:12px;border-radius:15px;background:#f8f9ff}.v13-totp .v13-qr{margin:10px auto}.v13-diag-list code{font-size:9px;color:#6550dd;background:#ecebff;padding:4px 6px;border-radius:8px}.v13-diag-list .severity-error{border-right:3px solid #ef4444}.v13-diag-list .severity-warning{border-right:3px solid #f59e0b}
.v13-studio{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(500px,1.7fr) minmax(290px,.78fr);gap:16px;align-items:start}.v13-studio-left,.v13-studio-right{display:grid;gap:14px;position:sticky;top:96px}.v13-studio-main{min-width:0}.studio-section-item{display:grid;grid-template-columns:35px 1fr 24px;gap:7px;align-items:center;padding:8px;border-radius:12px;background:#f8fafc;margin-bottom:7px}.studio-section-item>span{font-size:9px;font-weight:800;color:#6550dd}.studio-section-item input{border:0;background:transparent;min-width:0;font:inherit;color:#223957}.studio-section-item b{color:#9ba8b8}.v13-survey-meta{padding:17px;margin-bottom:12px}.studio-toolbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.v13-question-card{display:grid;grid-template-columns:26px 1fr;gap:10px;background:rgba(255,255,255,.94);border:1px solid rgba(83,103,137,.13);border-radius:19px;padding:14px;margin-bottom:11px;box-shadow:0 10px 24px rgba(42,61,96,.045)}.v13-question-card:focus-within{border-color:rgba(91,76,242,.46);box-shadow:0 0 0 3px rgba(91,76,242,.07),0 12px 30px rgba(42,61,96,.055)}.question-drag{color:#a2afbf;cursor:grab;text-align:center;padding-top:5px}.question-card-main{min-width:0}.question-card-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}.question-card-top>span{font-size:10px;font-weight:800;color:#6a7c94;white-space:nowrap}.question-card-top .question-type{max-width:180px}.question-card-top .toggle-label{margin-inline-start:auto}.question-options{display:grid;gap:6px;margin-top:8px}.choice-input{display:grid;grid-template-columns:1fr auto;gap:6px}.condition-row{display:grid;grid-template-columns:auto minmax(100px,1fr) minmax(90px,.8fr) minmax(80px,.75fr);gap:7px;align-items:center;margin-top:10px;padding:9px;border-radius:13px;background:#f8f7ff;border:1px dashed #c7c1ff}.condition-row>span{font-size:9px;color:#6550dd;font-weight:800;white-space:nowrap}.v13-autosave{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:#eaf8f1;color:#218a60;font-size:10px;font-weight:700}.v13-autosave i{width:7px;height:7px;background:#23b878;border-radius:50%}.v13-autosave.is-saving{background:#fff7e6;color:#a66c09}.v13-autosave.is-saving i{background:#e9a21d;animation:v13pulse .9s infinite}.studio-preview{background:linear-gradient(155deg,#fff,#f7f6ff);border:1px solid rgba(91,76,242,.12);border-radius:18px;padding:16px}.studio-preview>span{font-size:10px;color:#6d7f98}.studio-preview h3{font-size:16px;margin:8px 0}.studio-preview p{color:#8b9aab;font-size:10px;line-height:1.7}.preview-progress{height:6px;border-radius:99px;background:#e9ecf4;overflow:hidden;margin:13px 0}.preview-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5b4cf2,#1677ff)}.studio-preview article{padding:12px;background:#fff;border-radius:14px;border:1px solid #edf0f4}.studio-preview article small,.studio-preview article strong{display:block}.studio-preview article small{color:#8d9caf;font-size:9px}.studio-preview article strong{margin-top:6px;font-size:11px}.preview-scale{display:flex;justify-content:space-between;margin-top:11px}.preview-scale span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid #d9dfeb;font-size:9px;color:#708099}.v13-qr{width:max-content;max-width:100%;margin:0 auto 10px;padding:9px;background:#fff;border:1px solid #edf0f4;border-radius:14px;box-shadow:0 8px 24px rgba(41,58,89,.06)}.v13-qr canvas{display:block;max-width:100%;height:auto!important}.v13-version-list{display:grid;gap:7px}.v13-version-list>div{display:flex;justify-content:space-between;padding:8px 9px;border-radius:11px;background:#f8fafc}.v13-version-list small{color:#8796aa}.full-button{width:100%;justify-content:center}
.report-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;margin-bottom:14px;border-radius:18px;background:rgba(255,255,255,.76);border:1px solid var(--v13-border);box-shadow:0 8px 20px rgba(45,62,93,.035)}.report-filter-bar>span{font-size:10px;color:#5f7590;font-weight:700}.report-filter-bar>b{color:#a5b2c2}.report-filter-bar .form-control{max-width:190px}.v13-report-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:16px;margin-bottom:16px}.v13-line-chart{min-height:300px;position:relative;padding:18px;border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f8fbfd);overflow:hidden}.v13-line-chart:before{content:"";position:absolute;inset:30px 20px;background:repeating-linear-gradient(0deg,rgba(75,95,129,.075) 0 1px,transparent 1px 52px)}.v13-line-chart svg{position:relative;width:100%;height:250px}.v13-city-bars{display:grid;gap:11px}.v13-city-bars>div{display:grid;grid-template-columns:90px 1fr 45px;align-items:center;gap:8px}.v13-city-bars span{font-size:10px}.v13-city-bars i{height:8px;border-radius:99px;background:#edf0f4;overflow:hidden;position:relative}.v13-city-bars i:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--value,70%);border-radius:inherit;background:linear-gradient(90deg,#1677ff,#5b4cf2)}.v13-city-bars b{font-size:10px;color:#415a77}.v13-scheduler-form{display:grid;grid-template-columns:1.3fr 1fr .75fr .8fr 1fr auto;gap:8px;align-items:end}.recommendation-table{overflow:auto}.recommendation-table table{width:100%;border-collapse:separate;border-spacing:0 7px}.recommendation-table td,.recommendation-table th{padding:10px;text-align:right;white-space:nowrap}.recommendation-table tbody tr{background:#f8fafc}
.v13-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.v13-color-users{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.v13-color-users form{display:grid;grid-template-columns:1fr 52px auto;gap:7px;align-items:center;padding:9px;border-radius:13px;background:#f8fafc}.v13-color-users input[type=color]{width:48px;height:39px;border:0;background:transparent}.v13-bank-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v13-bank-list article{display:flex;gap:10px;padding:13px;border-radius:15px;background:#f8fafc;border:1px solid #edf1f5}.v13-bank-list article>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#efefff;color:#5b4cf2}.v13-bank-list p{font-size:10px;line-height:1.65;color:#71839a;margin:5px 0}.v13-bank-list small{color:#8b9bad}
.qiyas-city-marker{background:transparent!important;border:0!important}.city-marker-shape{--marker-color:#5b4cf2;position:relative;display:block;width:30px;height:30px;background:var(--marker-color);border:3px solid #fff;box-shadow:0 9px 18px color-mix(in srgb,var(--marker-color) 35%,transparent);transform-origin:center}.city-marker-shape i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}.city-marker-shape.shape-pin{border-radius:50% 50% 50% 8px;transform:rotate(-45deg);margin-top:1px}.city-marker-shape.shape-pin i{transform:translate(-50%,-50%) rotate(45deg)}.city-marker-shape.shape-diamond{transform:rotate(45deg);border-radius:9px}.city-marker-shape.shape-diamond i{transform:translate(-50%,-50%) rotate(-45deg)}.city-marker-shape.shape-hex{clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}.city-marker-shape.shape-round{border-radius:50%}.city-marker-shape.shape-shield{border-radius:15px 15px 17px 17px;clip-path:polygon(8% 5%,92% 5%,92% 60%,50% 100%,8% 60%)}
.live-map-popup{min-width:120px;display:grid;gap:3px;text-align:right}.live-map-popup strong{color:#162d4f}.live-map-popup span{font-size:10px;color:#76899f}
@keyframes v13pulse{50%{opacity:.35;transform:scale(.8)}}
@media(max-width:1450px){.v13-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.v13-dashboard-grid{grid-template-columns:minmax(250px,.8fr) minmax(400px,1.25fr)}.v13-dashboard-grid>*:last-child{grid-column:1/-1}.v13-health-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v13-studio{grid-template-columns:minmax(210px,.52fr) minmax(460px,1.4fr)}.v13-studio-right{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));position:static}.v13-user-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.content-wrap{padding:22px 20px 36px}.v13-dashboard-grid,.v13-lower-grid,.v13-system-grid,.v13-report-grid,.v13-permissions-layout{grid-template-columns:1fr}.v13-system-grid>.span-2{grid-column:auto}.v13-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-studio{grid-template-columns:1fr}.v13-studio-left,.v13-studio-right{position:static}.v13-studio-left{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-studio-right{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-scheduler-form{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-settings-grid{grid-template-columns:1fr}}
@media(max-width:760px){.content-wrap{padding:17px 12px 30px}.v13-heading{flex-direction:column;margin-bottom:16px}.v13-heading h2{font-size:25px}.v13-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.v13-kpi{padding:13px 11px;gap:9px}.v13-kpi-icon{width:40px;height:40px}.v13-kpi strong{font-size:20px}.v13-health-grid,.v13-user-cards,.v13-studio-left,.v13-studio-right,.v13-color-users,.v13-bank-list{grid-template-columns:1fr}.v13-backup-actions{grid-template-columns:1fr}.condition-row{grid-template-columns:1fr}.question-card-top{flex-wrap:wrap}.question-card-top .toggle-label{margin-inline-start:0}.v13-scheduler-form{grid-template-columns:1fr}.report-filter-bar .form-control{max-width:none;flex:1 1 150px}.v13-user-card{padding:13px}.v13-system-grid>.span-2{grid-column:auto}}
@media(max-width:480px){.v13-kpis{grid-template-columns:1fr}.v13-health-grid{grid-template-columns:1fr}.v13-user-card{flex-direction:column}.v13-color-users form{grid-template-columns:1fr 52px auto}.v13-question-card{grid-template-columns:1fr}.question-drag{display:none}}

/* v13 conditional survey flow, support and challenge refinements */
.response-question{transition:opacity .22s ease,transform .22s ease,max-height .28s ease,margin .28s ease,padding .28s ease;border-color .22s ease}
.response-question.is-condition-hidden{display:none!important}
.response-section-heading{display:flex;align-items:flex-start;gap:12px;margin:20px 0 10px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(91,76,242,.075),rgba(6,182,212,.055));border:1px solid rgba(91,76,242,.10)}
.response-section-heading>span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#5b4cf2,#1677ff);color:#fff;font-size:10px;font-weight:900;box-shadow:0 8px 18px rgba(91,76,242,.18);flex:0 0 auto}
.response-section-heading h3{margin:0;color:#173152;font-size:14px}.response-section-heading p{margin:4px 0 0;color:#75889f;font-size:10px;line-height:1.6}
.ticket-v13-sla{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:rgba(245,158,11,.075);border:1px solid rgba(245,158,11,.14);color:#7e5b18;font-size:10px}
.ticket-rating-panel{margin-top:14px;padding:15px;border-radius:17px;background:linear-gradient(145deg,#fff,#f8fbff);border:1px solid var(--v13-border);box-shadow:0 10px 25px rgba(38,57,90,.04)}
.ticket-rating-panel .rating-options{justify-content:flex-start;gap:7px}.ticket-rating-panel textarea{margin-top:9px}
.challenge-action-plan{max-width:420px;white-space:normal!important;line-height:1.65;color:#51677f}.challenge-plan-editor{min-width:300px}.challenge-plan-editor summary{cursor:pointer;color:var(--v13-indigo);font-weight:800;font-size:10px}.challenge-plan-editor[open]{padding:10px;border-radius:14px;background:#f8f9ff;border:1px solid rgba(91,76,242,.10)}
@media(max-width:760px){.response-section-heading{padding:12px}.challenge-plan-editor{min-width:220px}.ticket-rating-panel{padding:12px}}
.v13-secret-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.v13-secret-backdrop{position:absolute;inset:0;background:rgba(5,20,43,.58);backdrop-filter:blur(9px)}.v13-secret-card{position:relative;width:min(470px,100%);padding:26px;border-radius:24px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);box-shadow:0 35px 90px rgba(4,19,43,.28);text-align:center}.v13-secret-icon{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;font-size:24px;font-weight:900}.v13-secret-card h3{margin:0 0 8px;color:#102647;font-size:20px}.v13-secret-card p{color:#71849d;font-size:11px;line-height:1.9;margin:0 0 16px}.v13-secret-value{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:14px;padding:9px;border-radius:15px;background:#f5f7ff;border:1px dashed rgba(91,76,242,.25)}.v13-secret-value code{font-size:18px;font-weight:900;color:#372f9d;letter-spacing:.06em;overflow-wrap:anywhere}

/* Qiyas v13 Production Edition — production UI additions */
.v13-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.v13-scope-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid rgba(91,76,242,.12);border-radius:14px;background:linear-gradient(135deg,rgba(91,76,242,.055),rgba(6,182,212,.045));font-size:10px;color:#61748d}.v13-permission-block{padding:14px;border:1px solid var(--v13-border);border-radius:17px;background:rgba(255,255,255,.72);box-shadow:0 9px 24px rgba(39,57,91,.035)}.v13-permission-preview{min-height:270px;padding:15px;border-radius:18px;background:linear-gradient(145deg,#f7f8ff,#f8fcff);border:1px solid rgba(91,76,242,.10);overflow:hidden}.v13-role-colors,.v13-user-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.v13-role-colors label,.v13-user-colors form{display:grid;grid-template-columns:minmax(0,1fr) 52px auto;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(53,75,108,.08);border-radius:14px;background:rgba(248,250,252,.82)}.v13-role-colors input[type=color],.v13-user-colors input[type=color]{width:48px;height:39px;padding:0;border:0;border-radius:10px;background:transparent}.v13-template-list{display:grid;gap:9px;margin-bottom:11px}.v13-template-card{width:100%;display:flex;align-items:center;gap:10px;padding:11px;border:1px solid rgba(91,76,242,.10);border-radius:15px;text-align:right;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,248,255,.9));color:#18304f;cursor:pointer;transition:.2s ease}.v13-template-card:hover{transform:translateY(-2px);border-color:rgba(91,76,242,.24);box-shadow:0 12px 28px rgba(91,76,242,.08)}.v13-template-card>span{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,#5b4cf2,#1677ff);color:#fff}.v13-template-card strong,.v13-template-card small{display:block}.v13-template-card small{margin-top:3px;color:#7e8fa5;font-size:9px;line-height:1.45}.v13-response-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.v13-response-stats>div{padding:12px 8px;border-radius:14px;text-align:center;background:linear-gradient(145deg,#fbfcff,#f4f7ff);border:1px solid rgba(91,76,242,.08)}.v13-response-stats strong{display:block;color:#4137bd;font-size:21px}.v13-response-stats small{color:#8291a5;font-size:9px}.v13-pending-list{display:grid;gap:7px;max-height:240px;overflow:auto}.v13-pending-list>span{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;background:#f8fafc}.v13-pending-list .ui-icon{width:15px;height:15px;color:#5b4cf2}.v13-pending-list b{font-size:10px}.v13-pending-list small{font-size:8px;color:#8a99ad}.v13-action-plan-form{display:grid;grid-template-columns:1.25fr 1.25fr 1fr .8fr .85fr auto;gap:8px;align-items:end;margin-top:13px;padding-top:13px;border-top:1px solid #edf1f5}.city-bar-row{display:grid;grid-template-columns:90px 1fr 45px;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;color:inherit;text-decoration:none;transition:.2s ease}.city-bar-row:hover{background:#f7f8ff;transform:translateX(-2px)}.city-bar-row>div{height:8px;border-radius:99px;background:#edf0f4;overflow:hidden}.city-bar-row>div>i{display:block;height:100%;width:var(--value,70%);border-radius:inherit;background:linear-gradient(90deg,#1677ff,#5b4cf2)}.city-bar-row b{font-size:10px;color:#415a77}.v13-job-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;color:#5b4cf2;background:#eeefff}.v13-activity-map{min-height:340px;border-radius:18px;overflow:hidden}.v13-map-copy{font-size:9px;color:#74879d;line-height:1.7}.v13-health-card{padding:14px;border-radius:17px;background:rgba(255,255,255,.76);border:1px solid var(--v13-border);box-shadow:var(--v13-shadow)}
.question-section{max-width:160px}.v13-question-card{isolation:isolate}.v13-question-card,.panel,.v13-kpi,.v13-user-card{overflow:visible}.v13-question-card .question-card-main{min-width:0}.v13-question-card .form-control{min-width:0}.v13-studio,.v13-dashboard-grid,.v13-lower-grid,.v13-report-grid,.v13-system-grid,.v13-settings-grid{align-items:start}.v13-job-list>div{display:flex;align-items:center;gap:9px}.v13-job-list>div>span:nth-child(2){min-width:0;flex:1}.v13-job-list strong,.v13-job-list small{display:block}.v13-job-list small{margin-top:3px;color:#8998aa;font-size:8px}.v13-job-list .button{margin-inline-start:auto}
@media(max-width:1100px){.v13-action-plan-form{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-scope-grid{grid-template-columns:1fr}.v13-role-colors,.v13-user-colors{grid-template-columns:1fr}}
@media(max-width:700px){.v13-action-plan-form{grid-template-columns:1fr}.v13-response-stats{grid-template-columns:1fr 1fr 1fr}.question-card-top{display:grid;grid-template-columns:1fr 1fr}.question-card-top>span{grid-column:1/-1}.question-section{max-width:none}.city-bar-row{grid-template-columns:72px 1fr 38px}}


/* ================================================================
   Qiyas v13.0.1 — Sidebar accordion + notification center
   ================================================================ */
.sidebar{
    overflow:hidden !important;
    padding:16px 12px 14px !important;
}
.sidebar .brand-block{margin-bottom:10px}
.sidebar .profile-mini{margin-bottom:8px}
.sidebar .sidebar-role-card{margin-bottom:10px}
.nav-list{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:2px !important;
    scrollbar-width:none !important;
    overscroll-behavior:contain;
}
.nav-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.nav-group,
.nav-group+.nav-group{
    margin:0 !important;
    padding:5px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:rgba(255,255,255,.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
}
.nav-group.is-open{
    background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    border-color:rgba(163,196,255,.14);
}
.nav-group-toggle{
    width:100%;
    min-height:50px;
    border:0;
    border-radius:13px;
    padding:8px 9px;
    color:#e8f1ff;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:right;
    cursor:pointer;
    font:inherit;
    transition:background .18s ease,color .18s ease;
}
.nav-group-toggle:hover{background:rgba(255,255,255,.055)}
.nav-group-title{min-width:0;display:flex;align-items:center;gap:9px}
.nav-group-title>span:last-child{min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-group-title strong{font-size:11px;line-height:1.4;color:#f6f9ff;font-weight:700}
.nav-group-title small{font-size:8px;line-height:1.45;color:#7896b6;font-weight:500}
.nav-group-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#74ddc1,#6e7cff);box-shadow:0 0 0 4px rgba(116,221,193,.08);flex:0 0 auto}
.nav-group-chevron{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.055);color:#9bb4d0;transition:transform .2s ease,background .2s ease,color .2s ease;flex:0 0 auto}
.nav-group-chevron .ui-icon{width:13px;height:13px}
.nav-group.is-open .nav-group-chevron{transform:rotate(90deg);background:rgba(103,112,255,.18);color:#dce2ff}
.nav-group-items{display:grid;grid-template-rows:0fr;opacity:.2;transition:grid-template-rows .23s ease,opacity .18s ease}
.nav-group-items-inner{min-height:0;overflow:hidden;display:grid;gap:3px}
.nav-group.is-open .nav-group-items{grid-template-rows:1fr;opacity:1}
.nav-group.is-open .nav-group-items-inner{padding-top:4px}
.nav-caption{display:none!important}
.sidebar .nav-item{
    min-height:44px !important;
    margin:0 !important;
    padding:7px 9px !important;
    gap:9px !important;
    border-radius:12px !important;
    transform:none !important;
    transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.sidebar .nav-item:hover{transform:none!important;background:rgba(255,255,255,.075)!important}
.sidebar .nav-item.active{
    transform:none!important;
    background:linear-gradient(135deg,rgba(87,78,242,.96),rgba(25,132,236,.86))!important;
    border-color:rgba(255,255,255,.16)!important;
    box-shadow:0 9px 22px rgba(29,48,142,.24),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.sidebar .nav-item .nav-icon{width:34px;height:34px;border-radius:11px;flex:0 0 34px}
.sidebar .nav-item .nav-copy{overflow:hidden}
.sidebar .nav-item .nav-copy>span{display:block;font-size:10.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-item small{font-size:7.5px!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{margin-top:8px!important;padding-top:9px!important;background:linear-gradient(180deg,rgba(5,25,52,0),rgba(5,25,52,.16))}
.sidebar-footer .logout-link{margin-top:2px!important}

/* Notification button + popover */
.notification-center{position:relative;z-index:80}
.notification-button{position:relative;border:1px solid #dfe7f2;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#334a6b;cursor:pointer;box-shadow:0 7px 20px rgba(35,59,93,.07);transition:.18s ease}
.notification-button:hover,.notification-center.is-open .notification-button{border-color:#c9c8ff;color:#5b4cf2;background:#fff;box-shadow:0 10px 26px rgba(91,76,242,.13)}
.notification-button .ui-icon{width:19px;height:19px}
.notification-button b{position:absolute;inset:-5px -5px auto auto;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:linear-gradient(135deg,#5b4cf2,#1688ff);color:#fff;border:2px solid #fff;display:grid;place-items:center;font-size:8px;line-height:1;box-shadow:0 5px 12px rgba(91,76,242,.24)}
.notification-center.is-disabled .notification-button{opacity:.62;filter:saturate(.65)}
.notification-popover{position:absolute;top:calc(100% + 12px);left:0;width:min(390px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 90px));display:flex;flex-direction:column;background:rgba(255,255,255,.97);border:1px solid rgba(205,215,232,.92);border-radius:20px;box-shadow:0 26px 70px rgba(18,39,75,.2);backdrop-filter:blur(22px);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top left;transition:opacity .17s ease,transform .17s ease,visibility .17s ease;pointer-events:none;z-index:110}
.notification-center.is-open .notification-popover{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.notification-popover>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px 13px;border-bottom:1px solid #edf1f6;background:linear-gradient(180deg,#fff,#fbfcff)}
.notification-popover>header>div{display:flex;flex-direction:column;gap:2px}
.notification-popover>header strong{font-size:13px;color:#152b4e}
.notification-popover>header small{font-size:9px;color:#8a9aaf}
.notification-popover-action{border:0;background:#f0efff;color:#5b4cf2;border-radius:9px;padding:7px 9px;font:700 8px inherit;cursor:pointer}
.notification-popover-list{overflow:auto;overscroll-behavior:contain;padding:7px;scrollbar-width:thin;scrollbar-color:#d9e1ec transparent}
.notification-mini{position:relative;display:flex;align-items:stretch;border-radius:14px;border:1px solid transparent;transition:.16s ease}
.notification-mini+.notification-mini{margin-top:4px}
.notification-mini:hover{background:#f8faff;border-color:#e8edf5}
.notification-mini.is-unread{background:linear-gradient(135deg,rgba(91,76,242,.065),rgba(22,136,255,.035));border-color:rgba(91,76,242,.10)}
.notification-mini>a{min-width:0;flex:1;display:flex;gap:10px;padding:11px 10px;color:inherit}
.notification-mini-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:#eef3ff;color:#5b4cf2}
.notification-mini-icon .ui-icon{width:16px;height:16px}
.notification-mini>a>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-end:28px}
.notification-mini strong{font-size:10px;color:#193152;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-mini small{font-size:8px;color:#7689a2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.notification-mini time{font-size:7.5px;color:#9aa9ba;margin-top:2px}
.notification-mini-delete{position:absolute;top:9px;left:8px;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:#9aa9b7;display:grid;place-items:center;cursor:pointer;transition:.16s ease}
.notification-mini-delete:hover{background:#fff0f1;color:#dc4352}
.notification-mini-delete .ui-icon{width:13px;height:13px}
.notification-popover-empty{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:24px;text-align:center;color:#8594a8;font-size:9px}
.notification-popover-empty>.ui-icon{width:28px;height:28px;color:#bac5d3}
.notification-popover-empty a{color:#5b4cf2;font-weight:700}
.notification-popover>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-top:1px solid #edf1f6;background:#fbfcfe;font-size:8.5px}
.notification-popover>footer>a{color:#5b4cf2;font-weight:700}
.notification-global-state{display:flex;align-items:center;gap:5px;color:#5d7b70}
.notification-global-state i,.notification-system-state i,.v13-ops-status i{width:7px;height:7px;border-radius:50%;background:#2dbb75;box-shadow:0 0 0 3px rgba(45,187,117,.09)}

/* Notification page */
.notification-page-heading{align-items:center}
.notification-page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.notification-system-state{height:38px;padding:0 12px;border-radius:12px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;background:#edf9f3;color:#287e57;border:1px solid #d7f0e4}
.notification-system-state.is-off{background:#fff5eb;color:#aa6c25;border-color:#f5e3ca}.notification-system-state.is-off i{background:#e9953c;box-shadow:0 0 0 3px rgba(233,149,60,.10)}
.notification-page-panel{padding:10px!important}
.notification-page-list{display:grid;gap:7px}
.notification-page-item{position:relative;display:flex;align-items:center;border:1px solid #e7edf4;border-radius:16px;background:#fff;overflow:hidden;transition:.16s ease}
.notification-page-item:hover{border-color:#d5ddef;box-shadow:0 8px 24px rgba(38,63,98,.06)}
.notification-page-item.is-unread{border-color:#d9d7ff;background:linear-gradient(135deg,rgba(91,76,242,.055),rgba(22,136,255,.02))}
.notification-page-link{min-width:0;flex:1;display:flex;align-items:center;gap:12px;padding:14px 15px;color:inherit}
.notification-page-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;color:#5b4cf2;background:linear-gradient(135deg,#efefff,#eef7ff)}
.notification-page-icon .ui-icon{width:19px;height:19px}.notification-page-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.notification-page-title{display:flex;align-items:center;gap:8px}.notification-page-title strong{font-size:11px;color:#183052}.notification-page-title b{font-size:7px;color:#5b4cf2;background:#eceaff;border-radius:999px;padding:3px 6px}.notification-page-copy p{margin:0;color:#657a96;font-size:9px;line-height:1.55}.notification-page-copy time{color:#9aa8b9;font-size:8px}.notification-open-arrow{margin-inline-start:auto;color:#9bacbf}.notification-open-arrow .ui-icon{width:15px;height:15px}.notification-page-delete{padding-inline-end:12px}.notification-page-delete .icon-button{width:34px;height:34px;border-radius:11px;color:#9aabbc}.notification-page-delete .icon-button:hover{color:#d64050;background:#fff0f1;border-color:#f5d4d8}.notification-page-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#91a0b2}.notification-page-empty>.ui-icon{width:34px;height:34px;color:#c0cad5}.notification-page-empty strong{font-size:12px;color:#60748e}.notification-page-empty span{font-size:9px}

/* Operations toggles in admin settings */
.v13-ops-settings{display:grid;gap:10px}.v13-master-switch{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 46px;align-items:center;gap:10px;padding:12px;border:1px solid #e5ebf2;border-radius:15px;background:linear-gradient(180deg,#fff,#fbfcfe);cursor:pointer;transition:.18s ease}.v13-master-switch:hover{border-color:#d4d9f9;box-shadow:0 8px 22px rgba(51,68,110,.05)}.v13-switch-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#f0f2ff;color:#5b4cf2}.v13-switch-icon .ui-icon{width:18px;height:18px}.v13-master-switch>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.v13-master-switch strong{font-size:10px;color:#203858}.v13-master-switch small{font-size:8px;color:#8292a7;line-height:1.55}.v13-master-switch input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}.v13-master-switch>i{width:44px;height:24px;border-radius:999px;background:#d7dee8;position:relative;transition:.18s ease}.v13-master-switch>i:after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(37,52,73,.18);transition:.18s ease}.v13-master-switch input[type="checkbox"]:checked~i{background:linear-gradient(135deg,#5b4cf2,#1688ff)}.v13-master-switch input[type="checkbox"]:checked~i:after{transform:translateX(-20px)}.v13-ops-status{display:flex;gap:7px;flex-wrap:wrap}.v13-ops-status>span{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#edf9f3;color:#287e57;font-size:8px;font-weight:700}.v13-ops-status>span.is-off{background:#fff5eb;color:#aa6c25}.v13-ops-status>span.is-off i{background:#e9953c;box-shadow:0 0 0 3px rgba(233,149,60,.10)}

@media (max-width:900px){
    .notification-popover{position:fixed;top:74px;left:12px;right:12px;width:auto;max-height:calc(100vh - 94px);transform-origin:top center}
    .notification-page-actions{width:100%;justify-content:flex-start}
}
@media (max-height:720px) and (min-width:901px){
    .sidebar{padding-top:11px!important;padding-bottom:10px!important}
    .brand-block{margin-bottom:5px!important}.profile-mini{padding-block:7px!important}.sidebar-role-card{padding:7px!important;margin-bottom:6px!important}.nav-group-toggle{min-height:43px}.sidebar .nav-item{min-height:39px!important;padding-block:5px!important}.sidebar-footer-note{display:none!important}.sidebar-footer>small{display:none!important}
}

.notification-global-toggle{margin:0}.notification-global-toggle button{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:7px;cursor:pointer;font:inherit}.notification-global-toggle button>b{font-size:7.5px;color:#a06969;background:#fff0f1;border-radius:7px;padding:4px 6px}.notification-popover-empty .notification-global-toggle button{background:linear-gradient(135deg,#5b4cf2,#1688ff);color:#fff;border-radius:10px;padding:8px 11px;font-size:8.5px;font-weight:700}.notification-popover-empty .notification-global-toggle{margin-top:3px}


/* ================================================================
   Qiyas v13.0.2 — executive dashboard layout, live map, people cards
   ================================================================ */
.v13-dashboard-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}.v13-dashboard-main>.panel{min-width:0;height:100%}.dashboard-map-panel{grid-column:span 8;padding:15px!important;overflow:hidden!important}.dashboard-health-panel{grid-column:span 4}.dashboard-people-panel,.dashboard-support-panel,.dashboard-jobs-panel{grid-column:span 4}.dashboard-audit-panel{grid-column:1/-1}.dashboard-map-shell{padding:9px;border:1px solid rgba(49,136,117,.12);border-radius:19px;background:linear-gradient(145deg,rgba(244,251,249,.94),rgba(244,247,255,.96));overflow:hidden}.dashboard-live-map{height:355px;min-height:320px;border-radius:15px}.dashboard-map-note{margin:8px 0 0}.dashboard-city-strip{display:flex;gap:7px;overflow-x:auto;padding:9px 1px 1px;scrollbar-width:thin;scroll-snap-type:x proximity}.dashboard-city-chip{flex:0 0 auto;min-width:112px;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:7px;row-gap:1px;align-items:center;padding:8px 9px;border:1px solid rgba(73,98,132,.10);border-radius:13px;background:rgba(255,255,255,.88);color:#17314f;text-align:right;scroll-snap-align:start;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.dashboard-city-chip>span{grid-row:1/3;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#eaf5f2;color:var(--teal)}.dashboard-city-chip .ui-icon{width:13px;height:13px}.dashboard-city-chip strong{font-size:9.5px;white-space:nowrap}.dashboard-city-chip small{font-size:7.5px;color:#8a99aa}.dashboard-city-chip:hover,.dashboard-city-chip.is-active{border-color:color-mix(in srgb,var(--teal) 40%,#d9e5e7);background:#f3fbf8;box-shadow:0 7px 18px rgba(37,91,82,.08)}
.dashboard-user-list{display:grid;gap:8px}.dashboard-user-list>a{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(73,96,128,.08);border-radius:15px;background:linear-gradient(145deg,rgba(249,251,253,.96),rgba(255,255,255,.9));text-decoration:none;color:inherit;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.dashboard-user-list>a:after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--user-color,#5b4cf2)}.dashboard-user-list>a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--user-color,#5b4cf2) 25%,#dce5ec);box-shadow:0 9px 22px rgba(31,52,86,.06)}.dashboard-user-avatar{position:relative;width:44px;height:44px;display:block}.dashboard-user-avatar img{width:44px;height:44px;border-radius:14px;object-fit:cover;display:block;background:#edf3f6}.dashboard-user-avatar i{position:absolute;left:-2px;bottom:-2px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--user-color,#5b4cf2)}.dashboard-user-copy{min-width:0}.dashboard-user-copy strong,.dashboard-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-user-copy strong{font-size:10.5px;color:#18304d}.dashboard-user-copy small{margin-top:3px;font-size:8px;color:#8796a7}.dashboard-user-role{max-width:88px;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--role-color,#5b4cf2) 10%,#fff);color:var(--role-color,#5b4cf2);font-size:7.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-support-panel .v13-support-list>a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border-radius:14px;background:#f8fafc;border:1px solid rgba(71,95,126,.07);color:inherit;text-decoration:none}.dashboard-support-panel .v13-support-list>a div{min-width:0}.dashboard-support-panel .v13-support-list>a strong,.dashboard-support-panel .v13-support-list>a small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-support-panel .v13-support-list>a small{margin-top:3px;color:#8798aa;font-size:8px}.dashboard-support-panel .v13-support-list>a>i{color:#95a4b4}.dashboard-audit-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px!important}.dashboard-audit-grid>div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;padding:9px 10px;border-radius:13px;background:#f8fafc;border:1px solid rgba(76,101,132,.07)}.dashboard-audit-grid>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eef1ff;color:#5b4cf2}.dashboard-audit-grid p{min-width:0;margin:0}.dashboard-audit-grid strong,.dashboard-audit-grid small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-audit-grid small{margin-top:2px;color:#8898aa;font-size:7.5px}
/* User directory cards: match actual v13 markup and prevent overlap */
.v13-user-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.v13-user-card{position:relative;display:grid!important;grid-template-rows:auto auto auto;gap:13px;min-width:0;padding:16px!important;background:rgba(255,255,255,.93);border:1px solid var(--v13-border);border-radius:19px;box-shadow:0 11px 26px rgba(42,61,92,.05);overflow:hidden!important}.v13-user-card:before{display:none!important}.v13-user-card .user-card-accent{position:absolute;inset:0 0 auto 0;height:4px;background:var(--user-color,#5b4cf2)}.v13-user-card .user-card-head{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0}.v13-user-card .user-card-head>img{width:54px;height:54px;border-radius:16px;object-fit:cover;background:#edf2f6}.v13-user-card .user-card-head>div{min-width:0}.v13-user-card .user-card-head h3,.v13-user-card .user-card-head p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v13-user-card .user-card-head h3{margin:0 0 4px;font-size:12px}.v13-user-card .user-card-head p{margin:0;color:#8494a9;font-size:8.5px}.v13-user-card .user-card-meta{display:grid;grid-template-columns:1fr 1fr .6fr;gap:7px;padding:9px;border-radius:13px;background:#f7f9fc;border:1px solid rgba(70,94,126,.06)}.v13-user-card .user-card-meta>span{min-width:0}.v13-user-card .user-card-meta small,.v13-user-card .user-card-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v13-user-card .user-card-meta small{font-size:7.5px;color:#8a99aa}.v13-user-card .user-card-meta b{margin-top:2px;font-size:9px;color:#263f5c}.v13-user-card .user-card-meta .color-dot{width:16px;height:16px;border-radius:6px;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(31,52,80,.08)}.v13-user-card .user-card-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.v13-user-card .user-card-actions form{margin:0}
@media(max-width:1450px){.dashboard-map-panel{grid-column:1/-1}.dashboard-health-panel,.dashboard-people-panel,.dashboard-support-panel,.dashboard-jobs-panel{grid-column:span 6}.dashboard-audit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.v13-dashboard-main{grid-template-columns:1fr}.v13-dashboard-main>.panel{grid-column:auto!important}.dashboard-audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-user-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.dashboard-live-map{height:300px;min-height:280px}.dashboard-audit-grid{grid-template-columns:1fr}.v13-user-cards{grid-template-columns:1fr}.v13-user-card .user-card-meta{grid-template-columns:1fr 1fr}.dashboard-city-chip{min-width:105px}.dashboard-user-role{display:none}}


/* Qiyas v13.0.3 — near-real-time workspace */
.live-status-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 12px;border:1px solid rgba(15,118,110,.15);border-radius:999px;background:rgba(236,253,245,.78);color:#137466;font-size:11px;font-weight:700;box-shadow:0 8px 24px rgba(15,118,110,.08);backdrop-filter:blur(10px)}
.live-status-pill i{width:8px;height:8px;border-radius:50%;background:#9ca3af;box-shadow:0 0 0 0 rgba(16,185,129,.24)}
.live-status-pill.is-live i{background:#10b981;animation:qiyasLivePulse 1.8s ease-out infinite}.live-status-pill.is-offline{background:#fff7ed;color:#b45309;border-color:rgba(245,158,11,.2)}.live-status-pill.is-offline i{background:#f59e0b;animation:none}
@keyframes qiyasLivePulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.28)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.comment-list{max-height:min(520px,58vh);overflow:auto;scroll-behavior:smooth;padding-inline-end:4px}.comment.is-new-live{animation:qiyasMessageIn .55s cubic-bezier(.2,.8,.2,1);outline:2px solid rgba(91,76,242,.12)}
@keyframes qiyasMessageIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.notification-mini.is-unread{transition:background .25s ease,border-color .25s ease}.notification-mini[data-notification-id]{animation:qiyasSoftIn .3s ease both}@keyframes qiyasSoftIn{from{opacity:.35;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:760px){.live-status-pill{padding:6px 9px;font-size:10px}.page-heading .heading-actions{gap:8px;flex-wrap:wrap}.comment-list{max-height:52vh}}


/* Qiyas edition 1 — Cron/admin connector */
.cron-admin-panel{overflow:visible}.cron-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cron-settings-grid{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(260px,1.25fr);gap:12px;align-items:stretch}.cron-last-run{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #e5ebf2;border-radius:15px;background:linear-gradient(135deg,#fbfcff,#f7fbff)}.cron-last-run>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eef3ff;color:#5b4cf2}.cron-last-run>span .ui-icon{width:18px;height:18px}.cron-last-run>div{display:grid;gap:2px}.cron-last-run small{font-size:8px;color:#8898aa}.cron-last-run strong{font-size:10px;color:#1d3658}.cron-last-run em{font-style:normal;font-size:7.5px;color:#339469}.cron-connection-box{padding:14px;border:1px solid #e2e8f2;border-radius:18px;background:linear-gradient(145deg,rgba(91,76,242,.045),rgba(22,136,255,.025),#fff);display:grid;gap:10px}.cron-connection-head{display:flex;gap:10px;align-items:center}.cron-connection-head>span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#5b4cf2,#1688ff);color:#fff}.cron-connection-head>span .ui-icon{width:19px;height:19px}.cron-connection-head>div{display:grid;gap:2px}.cron-connection-head strong{font-size:10.5px;color:#203858}.cron-connection-head small{font-size:8px;line-height:1.55;color:#7c8da4}.cron-code-row{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid #e5eaf1;border-radius:12px;background:#fff}.cron-code-row>span{font-size:8px;font-weight:800;color:#526a87}.cron-code-row code{direction:ltr;text-align:left;white-space:nowrap;overflow:auto;padding:8px 9px;border-radius:9px;background:#f5f7fb;color:#253c5c;font:600 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;scrollbar-width:thin}.cron-link-help{display:grid;grid-template-columns:24px 1fr;gap:6px 8px;align-items:start;padding-top:2px}.cron-link-help>span{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:#eeefff;color:#5b4cf2;font-size:8px;font-weight:900}.cron-link-help p{margin:2px 0 5px;color:#71839b;font-size:8px;line-height:1.55}.cron-action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.cron-token-rotate{margin-top:9px;display:flex;justify-content:flex-end}.cron-action-row button[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:900px){.cron-toggle-grid,.cron-settings-grid{grid-template-columns:1fr}.cron-code-row{grid-template-columns:1fr auto}.cron-code-row>span{grid-column:1/-1}.cron-code-row code{min-width:0}.cron-action-row>.button{flex:1 1 180px}}