/* Shared Zayah theme for the authenticated workspace and fictional demo. */
:root {
  --navy: #143f38;
  --navy2: #174e43;
  --blue: #116650;
  --blue-soft: #eaf5f0;
  --ink: #182b29;
  --muted: #596e6b;
  --line: #dce6e2;
  --bg: #f3f6f5;
  --amber: #d5f087;
  --green: #17724c;
  --red: #b44337;
  --shadow: 0 12px 35px #18352d0b;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
body {background: var(--bg); color: var(--ink);}
button, input, select, textarea {font-size: 1rem;}
button, a, input, select, textarea {touch-action: manipulation;}
button, a {transition: background .15s, border-color .15s, box-shadow .15s;}
:focus-visible {outline: 3px solid #258565; outline-offset: 3px;}
input, select, textarea {border-radius: 10px; border-color: #cbdad4; min-height: 44px; color: var(--ink);}
input:focus, select:focus, textarea:focus {border-color: var(--blue); box-shadow: 0 0 0 3px #11665018;}
input[type="checkbox"] {min-height: 20px; width: 20px; height: 20px; accent-color: var(--blue);}
h1 {font-size: 2.125rem; font-weight: 700; letter-spacing: -1px; line-height: 1.25;}
h2 {font-size: 1.125rem; font-weight: 650; letter-spacing: -.25px;}
h3 {font-weight: 650;}
.layout {grid-template-columns: 236px minmax(0, 1fr);}
.sidebar {width: 236px; background: #fff; color: #596e68; border-right: 1px solid var(--line); padding: 28px 16px 18px;}
.brand {color: #133e33; gap: 12px; padding: 0 12px 27px;}
.brand-mark {width: 39px; height: 39px; border-radius: 12px; background: #153f36; color: #d5f087; font-weight: 700; box-shadow: 0 4px 12px #153f3618;}
.brand-name {font-size: 1.25rem; letter-spacing: 1.6px; font-weight: 750;}
.brand-name span {font-size: .75rem; color: #60756d; letter-spacing: 1.4px; margin-top: 4px;}
.workspace {margin: 0 2px 28px; background: #f6f8f7; border: 1px solid #e0e8e4; padding: 14px 12px; border-radius: 13px;}
.workspace-logo {background: #e4eee8; color: #25523f; border: 1px solid #d2e2d8; border-radius: 11px; width: 36px; height: 36px;}
.workspace strong {color: #203e33; font-size: .875rem;}
.workspace small {font-size: .75rem; color: #60746d;}
.nav-label {font-size: .75rem; letter-spacing: 1.1px; color: #6c7f77; padding: 0 15px;}
.nav {gap: 5px;}
.nav button {padding: 12px 14px; min-height: 45px; font-size: .875rem; border-radius: 10px; color: #516a60; font-weight: 550;}
.nav button:hover {background: #f0f5f2; color: #164835;}
.nav button.active {background: #153f36; color: #fff; box-shadow: 0 4px 9px #153f361a;}
.nav button.active .icon {color: #d5f087;}
.nav .count {background: #e9f1ec; color: #3f6050; min-width: 25px; padding: 3px 6px; text-align: center; font-size: .75rem;}
.nav button.active .count {background: #ffffff1a; color: #d5f087;}
.sidebar-bottom {padding-top: 23px;}
.guide-button {color: #587060; border: 1px solid #dfe7e2; background: #fff; border-radius: 10px; font-size: .875rem; margin-top: 8px; padding: 11px 12px;}
.guide-button:hover {background: #f0f5f2; border-color: #bdcfc3;}
.guide-button[data-action="help"] {background: #f4f8eb; border-color: #d9e6bf; color: #335126;}
.sidebar-footer {border-color: #e3ebe6; margin-top: 20px; padding-top: 17px;}
.sidebar-footer .avatar {background: #e9f0e8; color: #37603a;}
.sidebar-footer strong {color: #2c4637; font-size: .8125rem;}
.sidebar-footer small {color: #65786a; font-size: .75rem; text-transform: capitalize;}
.topbar {height: 80px; padding: 0 36px; background: #ffffffc9; border-color: var(--line);}
.breadcrumb {color: #6c7f77;}
.breadcrumb strong {font-weight: 650;}
.top-actions {gap: 12px;}
.top-search {width: 290px;}
.top-search input {background: #f5f8f6; border-color: #e1e9e4; border-radius: 12px; font-size: .875rem; padding-left: 38px;}
.top-search>.icon {top: 14px; color: #6a8175;}
#sync-status {border-radius: 24px; padding: 9px 13px; background: #fff; color: #526b5a; font-size: .8125rem; white-space: nowrap; min-height: 40px;}
.content {max-width: 1540px; padding: 34px 36px 30px;}
.page-head {gap: 20px; margin-bottom: 28px;}
.page-head p {font-size: .9375rem; color: #61776c; margin-top: 9px;}
.page-head .actions {align-self: center;}
.btn {border-radius: 10px; border-color: #d2dfd7; color: #345541; padding: 11px 15px; min-height: 44px; font-size: .875rem; font-weight: 600; background: #fff;}
.btn:hover {border-color: #a8c2b1; background: #f3f8f5;}
.btn.primary {background: #116650; border-color: #116650; color: #fff; box-shadow: 0 3px 5px #16493512;}
.btn.primary:hover {background: #0d5140; border-color: #0d5140; box-shadow: 0 5px 12px #16493520;}
.btn.soft {background: #eaf5ee; border-color: #d1e4d8; color: #226441;}
.btn.small {min-height: 38px; font-size: .875rem; padding: 8px 12px;}
.btn.danger {border-color: #edccc7; color: #a23f34; background: #fff;}
.icon-btn {border-radius: 10px; width: 38px; height: 38px;}
.text-btn {color: #166149; font-size: .875rem;}
.avatar {border-radius: 10px; font-size: .75rem;}
.avatar.blue {background: #eaf4ee; color: #296e48;}
.avatar.teal {background: #edf2f6; color: #3a607a;}
.person {font-size: .875rem; color: #516a60;}
.person .avatar {width: 28px; height: 28px;}
.tag {font-size: .8125rem; font-weight: 600; border-radius: 7px; padding: 6px 9px; line-height: 1.3;}
.tag.blue {background: #eaf3f7; color: #2b6380;}
.tag.green {background: #eaf4ed; color: #266b3f;}
.tag.amber {background: #fff2db; color: #875e16;}
.tag.red {background: #fcece8; color: #a24439;}
.tag.gray {background: #edf1ef; color: #5b6f64;}
.panel {border: 1px solid #dfe8e2; border-radius: 16px; box-shadow: 0 3px 8px #153f3603; background: #fff;}
.panel-head {padding: 22px 24px; border-bottom-color: #e8eee9; gap: 16px;}
.panel-head p {font-size: .875rem; line-height: 1.5; margin-top: 6px; color: #607769;}
.panel-body {padding: 20px 24px;}
.panel-footer {color: #58715f; font-size: .8125rem; padding: 16px 24px; border-top-color: #e4ebe5; gap: 10px; flex-wrap: wrap;}
.data-table {font-size: .9375rem;}
.data-table th {background: #f7f9f7; color: #5e7767; font-size: .75rem; letter-spacing: .5px; padding: 16px 20px;}
.data-table td {padding: 20px; border-color: #ebf0ec;}
.data-table strong {font-size: .9375rem; color: #243f30;}
.data-table small {font-size: .8125rem; line-height: 1.55;}
.data-table tr:hover td {background: #f5f9f6;}
.data-table td:nth-child(4)>strong {font-size: .875rem!important;}
.tabs {padding: 5px; background: #e8eeea; border-radius: 11px; max-width: 100%; flex-wrap: wrap;}
.tabs button {padding: 10px 13px; font-size: .875rem; color: #58715f;}
.tabs button.active {color: #245535; border-radius: 8px; box-shadow: 0 2px 5px #153f3610;}
.tabs.plain {background: transparent; gap: 22px; flex-wrap: nowrap; border-bottom-color: #e2eae4;}
.tabs.plain button {font-size: .875rem; padding: 16px 0;}
.tabs.plain button.active {border-radius: 0; box-shadow: none; border-bottom-color: #16664b; color: #16664b;}
.list-search {font-size: .875rem; background: #fff; max-width: 290px;}
.subtle, .due, .source, .task-sub, .task-link {font-size: .875rem;}
.due {color: #ad4a3d;}
.source {color: #5d7466;}
.activity-icon {background: #eef5f0; color: #40744f; border-radius: 10px; width: 34px; height: 34px;}
.activity-item {padding: 15px 0; border-color: #e7eee8;}
.activity-item p {font-size: .875rem; color: #3f5b4a; line-height: 1.6;}
.activity-item time {font-size: .75rem; color: #667a6c; line-height: 1.5;}
.demo-foot {font-size: .75rem; color: #647a6d; margin-top: 30px;}
.demo-page-head {display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px;}
.demo-day {font-size: .875rem; color: #58715f; margin-bottom: 8px;}
.demo-metrics {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 28px;}
.demo-metric {display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 21px 22px; border: 1px solid #dce6df; border-radius: 15px; background: #fff; min-width: 0;}
.demo-metric:hover {border-color: #aac5b3; box-shadow: 0 6px 18px #153f3609;}
.demo-metric-top {display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .875rem; font-weight: 550; color: #5b7263;}
.demo-metric-icon {width: 34px; height: 34px; background: #f0f6f2; color: #5a8063; display: inline-grid; place-items: center; border-radius: 10px; flex-shrink: 0;}
.demo-metric-icon .icon {width: 18px; height: 18px;}
.demo-metric-value {font-size: 2.5rem; line-height: 1.2; letter-spacing: -1px; font-weight: 650; margin: 12px 0 8px; color: #1d3d2b;}
.demo-metric-note {font-size: .8125rem; color: #5f7565; line-height: 1.5;}
.demo-metric.featured {background: #153f36; border-color: #153f36;}
.demo-metric.featured:hover {background: #174d3d; border-color: #174d3d;}
.demo-metric.featured .demo-metric-top, .demo-metric.featured .demo-metric-note {color: #e1ece3;}
.demo-metric.featured .demo-metric-icon {background: #ffffff14; color: #d5f087;}
.demo-metric.featured .demo-metric-value {color: #d5f087;}
.demo-work-grid {display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 24px; align-items: start;}
.demo-main-stack, .demo-side-stack {display: grid; gap: 22px; min-width: 0;}
.demo-case-row {display: flex; gap: 15px; align-items: flex-start; padding: 22px 24px; border-bottom: 1px solid #e8eee9;}
.demo-case-row:last-child {border-bottom: 0;}
.demo-case-symbol {display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dbe8df; background: #f4f8f5; color: #467551; border-radius: 11px; flex-shrink: 0;}
.demo-case-symbol .icon {width: 18px; height: 18px;}
.demo-case-info {flex: 1; min-width: 0;}
.demo-case-link {font-size: 1rem; line-height: 1.5; font-weight: 650; color: #264b34; text-align: left; padding: 0; border-radius: 3px;}
.demo-case-link:hover {text-decoration: underline;}
.demo-case-info>p {font-size: .8125rem; line-height: 1.55; color: #65796a; margin-top: 4px; overflow-wrap: anywhere;}
.demo-next-action {display: flex; align-items: flex-start; gap: 6px; font-size: .875rem; color: #385f43; margin-top: 11px; line-height: 1.5;}
.demo-next-action .icon {margin-top: 3px; color: #6d8b73; width: 14px; height: 14px;}
.demo-case-bottom {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 13px;}
.demo-case-bottom .person {font-size: .8125rem;}
.demo-due {font-size: .8125rem; color: #47664d; background: #f0f5f0; border: 1px solid #e0e9df; padding: 4px 8px; border-radius: 6px;}
.demo-due.overdue {color: #a84c39; background: #fff0e9; border-color: #f1d9cc;}
.demo-case-progress {display: flex; align-items: flex-end; flex-direction: column; gap: 10px; width: 145px; flex-shrink: 0;}
.demo-case-progress .tag {white-space: normal; text-align: right;}
.demo-progress-track {height: 5px; border-radius: 8px; background: #e6eee7; width: 104px; overflow: hidden; margin-top: 4px;}
.demo-progress-track span {display: block; height: 100%; border-radius: inherit; background: #5d9872;}
.demo-progress-caption {font-size: .75rem; color: #5c7663;}
.demo-incoming-row {display: flex; gap: 13px; align-items: center; padding: 22px 24px;}
.demo-incoming-row>div {flex: 1; min-width: 0;}
.demo-incoming-row strong {font-size: .9375rem;}
.demo-incoming-row p {margin-top: 6px; color: #65786a; font-size: .875rem; line-height: 1.55;}
.demo-deadline-card {background: #fff8ed; border: 1px solid #ebdecb; padding: 24px; border-radius: 16px;}
.demo-deadline-head {display: flex; gap: 11px; align-items: center;}
.demo-deadline-card .demo-metric-icon {background: #f5e8d5; color: #876023;}
.demo-eyebrow {font-size: .875rem; font-weight: 600; color: #775d34;}
.demo-deadline-count {font-size: 2.5rem; line-height: 1.2; font-weight: 650; color: #835d27; display: block; margin-top: 16px;}
.demo-deadline-card>p {font-size: .875rem; color: #796447; margin: 6px 0 8px;}
.demo-deadline-row {display: block; width: 100%; text-align: left; padding: 15px 0; border-bottom: 1px solid #eadfce;}
.demo-deadline-row strong {font-size: .875rem; color: #694d2d; font-weight: 550; line-height: 1.6;}
.demo-deadline-row span {display: block; font-size: .8125rem; color: #856844; margin-top: 5px;}
.demo-deadline-row:hover strong {text-decoration: underline;}
.demo-deadline-card>.btn {margin-top: 18px; width: 100%; border-color: #e4d1b4; background: #fff; color: #785723;}
.demo-activity-panel .panel-head {padding: 20px 22px;}
.demo-activity-panel .panel-head .icon {color: #5f7b67;}
.demo-activity-panel .panel-body {padding: 4px 22px 10px;}
.demo-tour-card {border: 1px solid #d8e4d2; border-radius: 16px; padding: 23px; background: #f2f7ec;}
.demo-tour-card .demo-metric-icon {background: #e3ecd5; color: #577543;}
.demo-tour-card h3 {font-size: .9375rem; margin-top: 15px; color: #3e5f2e;}
.demo-tour-card p {font-size: .875rem; color: #627551; line-height: 1.65; margin: 8px 0 19px;}
.demo-tour-card .btn {border-color: #d0dfbd; color: #405f2e;}
.case-heading .avatar {background: #eaf3ec; color: #2d6942; border: 1px solid #d1e3d6; border-radius: 14px;}
.case-heading {align-items: center; line-height: 1.3; font-size: 1.75rem;}
.case-summary {border-color: #dfe8e1; border-radius: 15px; padding: 24px; gap: 20px; margin-bottom: 24px;}
.case-summary label {font-size: .8125rem; color: #5b7663; margin-bottom: 10px;}
.case-summary strong {font-size: 1rem;}
.case-summary select {max-width: 100%; font-size: .875rem; padding: 8px 10px; background: #f9fbfa;}
.case-summary input {background: #f9fbfa;}
.case-grid {grid-template-columns: minmax(0,1fr) 302px; gap: 24px;}
.case-banner {background: #eef7e8; border-color: #dbeacb; color: #426d2e; border-radius: 12px; padding: 18px 20px;}
.requirements-card {background: #ecf4f0; border-color: #d4e5dc; border-radius: 14px; padding: 21px;}
.requirements-card strong {color: #25533c;}
.requirements-card p {font-size: .875rem; color: #5d7666;}
.progress-track {height: 5px; background: #e8efe9;}
.progress-track>div {background: #3b8560;}
.step {padding: 24px; border-color: #e7eee8; gap: 16px;}
.step-number {width: 32px; height: 32px; background: #f7faf7; border-color: #dce7df; color: #78917d; border-radius: 10px; font-size: .875rem; font-weight: 650; flex-shrink: 0;}
.step-main strong {font-size: .9375rem; font-weight: 600; line-height: 1.55;}
.step-main p {font-size: .875rem; color: #61786a; line-height: 1.6; margin-top: 5px;}
.step.current {background: #f3f8f0; border-left: 3px solid #387753; padding-left: 21px;}
.step.current .step-number {background: #16664b; border-color: #16664b; box-shadow: none; color: #fff;}
.step.done .step-number {background: #edf5e9; color: #547b3e; border-color: #dbe9d1;}
.step.done strong {color: #647e6c;}
.step-actions {min-width: 120px; align-items: stretch;}
.step-actions .text-btn {font-size: .8125rem; text-align: center;}
.applicant-head {background: #f6f9f7; padding: 24px; border-color: #e3ece5;}
.applicant-head h3 {font-size: 1rem; color: #274c35;}
.applicant-head p {font-size: .875rem;}
.applicant-reference {background: #fafcfa; padding: 15px 24px; border-color: #e7eee7; font-size: .8125rem; color: #5d7563;}
.document-item {padding: 15px 0; border-color: #e4ede6; font-size: .875rem; gap: 10px;}
.document-item label {min-width: 160px; flex: 1;}
.document-item label strong {font-weight: 550;}
.document-item .tag {font-size: .75rem;}
.document-item small {font-size: .75rem; line-height: 1.65;}
.file-link {color: #376349;}
.linked-row {padding: 18px 0; border-color: #e4ece6;}
.linked-row:hover {background: #f7faf7;}
.linked-row strong {color: #2c593c;}
.linked-row small {font-size: .8125rem;}
.expiry-item {padding: 15px 0; border-color: #e4ede6;}
.expiry-item strong {font-size: .875rem;}
.expiry-item p {font-size: .8125rem; line-height: 1.6;}
.service-option {background: #fafcf9; border-color: #dce7df; border-radius: 13px; padding: 20px; gap: 12px;}
.service-option:hover, .service-option:focus-visible {background: #edf6ee; border-color: #8cb798;}
.service-option strong {font-size: 1rem; color: #2a5037;}
.service-option p {font-size: .875rem; line-height: 1.65;}
.inbox-layout {border-color: #dce7df; border-radius: 16px; grid-template-columns: 260px minmax(0,1fr) 236px;}
.inbox-list-head {padding: 20px; border-color: #e2ebe5;}
.inbox-list-head input {background: #f7faf7; font-size: .875rem;}
.inquiry-row {border-bottom-color: #e8eee8; padding: 21px 19px;}
.inquiry-row:hover {background: #f7faf7;}
.inquiry-row.active {background: #edf6ee; border-left-color: #397851;}
.inquiry-row p {font-size: .875rem;}
.inquiry-row .tag {font-size: .75rem;}
.conversation-head {padding: 23px; border-color: #e6eee8;}
.conversation-messages {background: #f7faf8; padding: 26px 24px; gap: 18px;}
.bubble {border-color: #dce8df; border-radius: 4px 16px 16px 16px; padding: 16px 18px; font-size: .9375rem; max-width: 90%;}
.bubble.staff {background: #e8f4e9; border-color: #d1e5d2; border-radius: 16px 4px 16px 16px;}
.bubble.note {background: #fff8e8; border-color: #efdfba; border-radius: 12px;}
.bubble small {font-size: .75rem; line-height: 1.5; color: #687b6d;}
.composer {padding: 20px; border-color: #e1ebe3;}
.composer label {font-size: .875rem; color: #536f5b;}
.composer small {font-size: .8125rem; line-height: 1.6; color: #667d6b;}
.inbox-context {padding: 26px 22px; border-color: #e2eae5; background: #fff;}
.section-label {color: #597361; font-size: .75rem;}
.field-value dt {font-size: .8125rem;}
.field-value dd {font-size: .875rem;}
.stat {border-radius: 15px; border-color: #dce7e0; padding: 23px; box-shadow: none;}
.stat-title {font-size: .875rem; color: #5d7564;}
.stat-title .icon {color: #63866c;}
.stat-value {color: #295439; font-weight: 650;}
.stat-foot {font-size: .8125rem; color: #617967;}
.task-item {padding: 22px 24px; border-color: #e4ece6; gap: 15px;}
.task-check {width: 24px; height: 24px; border: 1.5px solid #bbd0bf; border-radius: 7px;}
.task-item.done .task-check {background: #327a4e; color: #fff; border-color: #327a4e;}
.task-name {font-size: .9375rem; font-weight: 550;}
.collection-card {border-radius: 16px; border-color: #dce6df; padding: 26px;}
.collection-card .activity-icon {width: 44px; height: 44px; background: #f1f7e8; color: #547942;}
.collection-card h2 {margin-top: 19px;}
.collection-meta label {font-size: .8125rem; color: #5f7566;}
.collection-meta strong, .collection-meta span {font-size: .875rem;}
.modal-backdrop {background: #10281d85; backdrop-filter: blur(5px);}
.modal {border-radius: 20px; box-shadow: 0 28px 100px #17321b35; max-width: 780px; border: 1px solid #dbe6db;}
.modal.narrow {max-width: 500px;}
.modal-head {padding: 26px 28px; border-color: #e4ede4;}
.modal-head h2 {font-size: 1.375rem; color: #23452c;}
.modal-head p {font-size: .875rem; line-height: 1.6; color: #5e7665;}
.modal-body {padding: 26px 28px;}
.modal-foot {padding: 20px 28px; background: #f8fbf7; border-color: #e1ebe0; border-radius: 0 0 20px 20px;}
.modal-foot p {font-size: .8125rem; color: #5c7462; line-height: 1.6;}
.form-field label, .owner-row label {font-size: .875rem; color: #395a41; margin-bottom: 9px;}
.form-field small {font-size: .8125rem; color: #617965; line-height: 1.6;}
.form-section {font-size: .75rem; letter-spacing: .8px; color: #55745c;}
.participant-row {background: #f8fbf7; border-color: #dce8db; border-radius: 12px; padding: 19px;}
.guide-steps {gap: 19px;}
.guide-step {padding: 19px; border: 1px solid #dde9dc; background: #fafcf9; border-radius: 13px; gap: 15px;}
.guide-step .step-number {background: #edf5e8; border-color: #dbe8d2; color: #446b35;}
.guide-step p {font-size: .875rem; line-height: 1.6; color: #60745c;}
.info-note {background: #f3f8ed; border-color: #dae7cc; color: #4e693b; border-radius: 11px; font-size: .875rem; line-height: 1.65;}
.stopped-case {background: #fff5e8; color: #85602b; border-color: #ead7b9;}
.note-item {padding: 17px 0; border-color: #e6ede5;}
.note-item p {font-size: .9375rem;}
.note-item small {font-size: .8125rem; color: #647b6a;}
.toast {background: #1e4833; color: #fff; border-radius: 12px; font-size: .9375rem; box-shadow: 0 8px 30px #17392330;}
.login-wrap {background: radial-gradient(ellipse at 30% 0%, #e4f0de 0, transparent 60%), #f3f6f5;}
.login-card {border: 1px solid #d7e4da; border-radius: 20px; box-shadow: 0 18px 60px #153f3610;}
.login-brand strong {color: #153f36;}
.login-brand strong span {color: #617665;}
.login-card h1 {color: #23452c;}
.login-card p, .login-card small, .login-office {color: #5d7463;}
@media (min-width: 1700px) {.content {padding-top: 42px;}.demo-case-row {padding-top: 26px; padding-bottom: 26px;}}
@media (max-width: 1250px) {
  .demo-work-grid {grid-template-columns: minmax(0,1fr) 258px; gap: 18px;}
  .demo-metric {padding: 18px;}
  .demo-metric-top {font-size: .8125rem;}
  .demo-case-row {padding: 21px; gap: 12px;}
  .demo-case-progress {width: 124px;}
  .inbox-layout {grid-template-columns: 225px minmax(0,1fr);}
  .inbox-context {display: none;}
}
@media (max-width: 1100px) {
  .content {padding: 28px 26px;}
  .topbar {padding: 0 26px;}
  .demo-metrics {grid-template-columns: 1fr 1fr; gap: 14px;}
  .demo-work-grid {grid-template-columns: 1fr;}
  .demo-side-stack {grid-template-columns: 1fr 1fr; align-items: start;}
  .demo-tour-card {grid-column: 1 / -1;}
  .demo-metric-top {font-size: .875rem;}
  .demo-metric-value {font-size: 2.25rem;}
  .demo-case-progress {width: 148px;}
  .top-search {width: 228px;}
}
@media (max-width: 960px) {
  .case-grid {grid-template-columns: 1fr;}
  .case-grid>.side-stack {display: flex; flex-direction: column;}
  .case-summary {grid-template-columns: 1fr 1fr;}
  .top-search {width: 185px;}
  .requirements-card {flex-wrap: wrap;}
}
@media (max-width: 760px) {
  .layout {display: block;}
  .sidebar {width: 236px;}
  .sidebar.open {box-shadow: 0 0 0 100vw #153b2c50;}
  .topbar {height: 70px; padding: 0 18px;}
  .top-search {width: auto;}
  .top-search input {font-size: .875rem; min-height: 43px;}
  #sync-status {font-size: .75rem; padding: 8px 10px;}
  .top-actions {gap: 7px;}
  .content {padding: 26px 18px;}
  .demo-page-head {align-items: flex-start; flex-direction: column; gap: 20px;}
  .demo-page-head h1, .page-head h1 {font-size: 1.75rem;}
  .demo-page-head .actions {width: 100%;}
  .demo-page-head .actions .btn {flex: 1; padding-left: 10px; padding-right: 10px;}
  .demo-day {font-size: .8125rem;}
  .demo-metrics {gap: 11px; margin-bottom: 22px;}
  .demo-metric {padding: 16px; border-radius: 13px;}
  .demo-metric-top {font-size: .8125rem; align-items: flex-start; min-height: 34px;}
  .demo-metric-icon {width: 28px; height: 28px; border-radius: 8px;}
  .demo-metric-icon .icon {width: 15px; height: 15px;}
  .demo-metric-value {font-size: 2rem; margin: 10px 0 7px;}
  .demo-metric-note {font-size: .75rem;}
  .demo-side-stack {grid-template-columns: 1fr;}
  .demo-case-row {gap: 12px; flex-wrap: wrap; padding: 20px;}
  .demo-case-symbol {width: 32px; height: 32px; border-radius: 9px;}
  .demo-case-info {flex-basis: calc(100% - 45px);}
  .demo-case-progress {width: 100%; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; padding-left: 44px;}
  .demo-case-progress .tag {text-align: left;}
  .demo-case-progress .btn {margin-left: auto;}
  .demo-progress-track {width: 70px; margin-top: 0;}
  .demo-case-bottom .person {white-space: normal;}
  .demo-incoming-row {flex-wrap: wrap; padding: 20px;}
  .demo-incoming-row .btn {margin-left: 44px;}
  .panel-head {padding: 20px; gap: 12px;}
  .panel-head .text-btn {font-size: .8125rem; white-space: nowrap;}
  .panel-head p {font-size: .8125rem;}
  .panel-body {padding: 20px;}
  .case-summary {padding: 19px; gap: 18px;}
  .case-heading {font-size: 1.375rem;}
  .case-heading .avatar {width: 40px; height: 40px;}
  .step {padding: 20px;}
  .step.current {padding-left: 17px;}
  .step-main {flex-basis: calc(100% - 48px);}
  .step-actions {margin-left: 48px; align-items: flex-start;}
  .step-actions .btn {margin-left: 0; font-size: .875rem; min-height: 40px;}
  .step>.tag {margin-left: 48px;}
  .applicant-head {padding: 20px;}
  .applicant-reference {padding: 16px 20px; flex-wrap: wrap;}
  .tabs.plain {gap: 19px;}
  .tabs.plain button {font-size: .875rem;}
  .inbox-layout {display: block;}
  .inbox-context {display: block;}
  .inbox-layout:not(.selected) .inbox-context {display: none;}
  .bubble {max-width: 95%;}
  .conversation-messages {padding: 24px 20px;}
  .conversation-head {padding: 20px;}
  .modal-head, .modal-body {padding: 22px;}
  .modal-foot {padding: 18px 22px;}
  .modal-foot p {max-width: 100%; font-size: .8125rem;}
  .guide-step {padding: 16px; gap: 13px;}
  .form-grid {gap: 20px;}
  .service-grid {grid-template-columns: 1fr;}
  .task-item {padding: 20px; align-items: flex-start;}
  .task-item>.tag {display: inline-flex; font-size: .75rem;}
  .task-name {font-size: .9375rem;}
  .collection-grid {grid-template-columns: 1fr;}
  .tag {white-space: normal;}
}
@media (max-width: 360px) {
  .content {padding-left: 14px; padding-right: 14px;}
  .demo-metric {padding: 13px;}
  .demo-metric-top .demo-metric-icon {display: none;}
  .demo-case-row {padding: 17px;}
  .demo-case-progress {padding-left: 0;}
  .panel-head {padding: 18px;}
}
@media (prefers-reduced-motion: reduce) {button, a {transition: none;}}