/* ОЧКО — paper, charcoal and a single orange accent. */
:root {
  --ink: #202124;
  --muted: #74777c;
  --line: #e7e7e8;
  --bg: #f5f5f6;
  --accent: #d95700;
  --accent-hover: #ba4900;
  --accent-soft: #fff0e5;
  --green: var(--accent);
  --lime: var(--accent-soft);
  --dark: #202124;
  --red: #be3434;
  --amber: #95620d;
}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; color: var(--ink); background: var(--bg); font-size: 14px;}
button {border-color: #d8d8db; border-radius: 5px; font-weight: 600; min-height: 38px;}
button:hover {background: #f1f1f3; border-color: #a6a6ad;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 3px solid #e9782c; outline-offset: 3px;}
input, select, textarea {border-color: #d6d6da; border-radius: 4px;}
input[type=checkbox] {accent-color: var(--accent);}
h1 {font-size: clamp(30px, 3vw, 44px); font-weight: 750; letter-spacing: -1.5px; line-height: 1.15; margin-bottom: 14px;}
h2 {font-weight: 700;}
.primary {background: var(--accent); border-color: var(--accent); color: #fff;}
.primary:hover {background: var(--accent-hover); border-color: var(--accent-hover);}
.dark-button {background: var(--dark); border-color: var(--dark);}
.dark-button:hover {background: #3b3b40; border-color: #3b3b40;}
.text-button {color: var(--accent); min-height: 30px;}
.text-button:hover {background: var(--accent-soft); border-color: transparent;}
.eyebrow {font-size: 10px; color: var(--muted); letter-spacing: 1.6px; margin-bottom: 12px;}

/* A full-width masthead gives the journal its own navigation and more room. */
.shell {display: block; min-height: 100vh;}
.sidebar {position: relative; width: 100%; height: auto; padding: 0 4%; background: #fff; color: var(--ink); flex-direction: row; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); min-height: 98px; z-index: 10;}
.brand {margin: 0; gap: 10px; font-size: 25px; letter-spacing: -.8px; flex-shrink: 0; font-weight: 800;}
.brandmark {width: 38px; height: 38px; border: 0; border-radius: 3px; background: var(--accent); color: #fff; font-size: 25px; font-weight: 750;}
.eye-mark {position: relative; flex: none;}
.eye-mark::before {content: ''; position: absolute; width: 57%; height: 57%; border: 2px solid currentColor; border-radius: 72% 16%; transform: rotate(45deg);}
.eye-mark::after {content: ''; position: absolute; width: 17%; height: 17%; border-radius: 50%; background: currentColor;}
.brand small {color: var(--muted); font-size: 10px; letter-spacing: 0; font-weight: 400; margin-top: 0;}
.brand small {max-width: 190px; line-height: 1.2;}
.sidebar-label {display: none;}
.sidebar nav {flex-direction: row; align-self: stretch; gap: 22px; align-items: stretch; margin: 0;}
.sidebar nav button {position: relative; border-radius: 0; padding: 0 1px; gap: 7px; color: #686970; font-size: 13px; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent;}
.sidebar nav button span {font-size: 17px; width: auto;}
.sidebar nav button:hover {background: transparent; color: var(--ink);}
.sidebar nav button.selected {background: transparent; color: var(--accent); border-bottom-color: var(--accent);}
.sidebar-note {margin: 0 0 0 auto; padding: 0; font-size: 11px; white-space: nowrap; color: var(--muted);}
.sidebar-note small {display: none;}
.live-dot {background: #25825e;}
.offline .live-dot {background: var(--red);}
.user {margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line); color: var(--ink); flex-shrink: 0; font-size: 12px;}
.avatar {background: var(--accent-soft); color: var(--accent); width: 36px; height: 36px; font-weight: 650;}
.user small {color: var(--muted); font-size: 10px;}
.user button {color: var(--muted); margin-left: 10px; min-height: 30px;}
.workspace {width: 100%;}
.topbar {height: 44px; padding: 0 4%; background: #fff; color: var(--muted); font-size: 11px; border: 0;}
.crumb {color: var(--muted);}
.clock {color: var(--ink); font-size: 12px;}
.content {max-width: 1500px; padding: 42px 4% 0;}
.page-heading {margin-bottom: 32px; align-items: center;}
.page-heading p {font-size: 13px;}
.heading-actions {gap: 12px;}
.heading-actions button {font-size: 13px;}
.date-control {border-color: #d8d8db; border-radius: 4px; padding: 4px 12px; gap: 12px;}
.shift-card {background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; padding: 24px 28px; margin-bottom: 30px;}
.shift-icon {background: var(--accent-soft); color: var(--accent); border: 0; width: 52px; height: 52px; font-size: 28px; border-radius: 50%;}
.shift-caption {font-size: 13px;}
.shift-card h2 {font-size: 23px; font-weight: 700;}
.shift-card p, .shift-action small {color: var(--muted); font-size: 12px;}
.shift-action button {font-size: 13px; padding: 10px 18px;}
.stats {background: transparent; gap: 24px; margin-bottom: 32px; padding-bottom: 30px;}
.stats>div {padding: 0 24px;}
.stats span {font-size: 10px; letter-spacing: .8px; color: #64666c; margin-bottom: 10px;}
.stats strong {font-size: 36px; font-weight: 650; letter-spacing: -1px;}
.stats small {color: var(--muted); font-size: 12px; letter-spacing: 0;}
.panel {border-color: var(--line); border-radius: 5px; box-shadow: none;}
.panel-heading {padding: 24px 26px;}
.panel-heading h2 {font-size: 18px; letter-spacing: -.4px; margin-bottom: 6px;}
.panel-heading p {font-size: 12px; color: var(--muted);}
.panel-heading>label {margin: 0; font-size: 11px; color: var(--muted);}
.panel-heading>label select {font-size: 12px; min-height: 36px; margin-top: 4px;}
.count {background: #f0f0f2; color: #65676d; border-radius: 20px; padding: 3px 8px; font-size: 11px;}
th {background: #fafafa; color: #73757b; font-size: 10px; font-weight: 600; letter-spacing: .6px; padding: 13px 26px; border-color: var(--line);}
td {font-size: 13px; padding: 20px 26px; border-color: #eeeeef;}
td strong {font-size: 13px;}
td small {font-size: 11px; color: var(--muted);}
tbody tr:hover, .directory-panel tbody tr:hover {background: #fcfcfc;}
.sequence {font-size: 12px; color: #909198;}
.equipment {font-size: 12px;}
.equipment small {font-size: 10px;}
.badge {border-radius: 3px; padding: 4px 8px; font-size: 10px; letter-spacing: .2px;}
.badge.green, .shift-caption .badge.green {background: #eaf5ee; color: #267247;}
.badge.neutral {background: #f0f0f2; color: #696b73;}
.badge.amber {background: #fff1dc; color: #92600d;}
.positive, .audit-delta.positive, .map-key-status {color: #267247;}
.dot.active, .timeline-dot.arrived {background: #33835a;}
.dot.inactive {background: #a0a2a8;}
.dot.maintenance {background: #d69a34;}
.dashboard-grid {gap: 24px;}
.counter {background: #fafafa; border-color: var(--line); border-radius: 4px; padding: 20px;}
.counter>span {color: #5f6167; font-size: 13px;}
.counter strong {font-size: 36px; font-weight: 600;}
.counter button {background: #fff; color: var(--ink); border: 1px solid #d8d8db; border-radius: 4px; width: 34px; height: 34px; min-height: 34px;}
.counter button:hover {background: var(--accent-soft); border-color: var(--accent); color: var(--accent);}
.panel-foot {color: var(--muted); font-size: 11px; background: #fff; border-color: var(--line);}
.task strong {font-size: 13px;}
.task small, .rotation small {font-size: 11px; color: var(--muted);}
.task-icon.completed {color: #267247; background: #eaf5ee;}
.task-icon.overdue {color: var(--red); background: #fff0ee;}
.task button {font-size: 12px;}
.empty {padding: 56px 24px; color: var(--muted);}
.empty.compact {padding: 32px 24px;}
.empty>span {color: #bfc0c5; font-size: 34px;}
.empty h3 {color: #595b62; font-size: 17px;}
.empty p {font-size: 13px;}
.tabs {gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px;}
.tabs button, .tabs button.active {background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 0; font-size: 13px;}
.tabs button.active {color: var(--accent); border-bottom-color: var(--accent);}
.tabs span {color: var(--muted);}
.info-note, .history-banner {background: #f0f0f2; color: #5c5e66; border-radius: 4px;}
.success {background: #eaf5ee; color: #267247;}
.error {background: #fff0ee; color: var(--red);}
footer {border-top: 1px solid var(--line); margin-top: 32px; padding: 22px 0 28px; color: var(--muted); font-size: 10px;}
.route-planning-tools, .route-template-save {padding:16px; margin:16px 0; border:1px solid var(--line); border-radius:6px; background:#fafafa;}
.route-planning-tools details {margin-bottom:16px;}
.route-planning-tools summary, .route-template-save summary {cursor:pointer; font-weight:600; margin-bottom:12px;}
.route-planning-tools .heading-actions {align-self:center;}
.modal-backdrop {background: #16171c80; backdrop-filter: blur(2px);}
.modal {background: #fff; border-color: var(--line); border-radius: 8px; box-shadow: 0 24px 80px #00000026; padding: 28px 32px;}
.modal-heading h2 {font-size: 23px;}
.modal-heading button {color: var(--muted);}
.person-chip {background: var(--accent-soft); color: #97400a; border-color: #f5d4bc; border-radius: 4px;}
.person-chip button {color: #97400a; min-height: 18px;}
.person-chip button:hover, .person-picker-results button:hover, .person-picker-results button.highlighted, .place-suggestions li:hover, .place-suggestions li.highlighted {background: var(--accent-soft);}
.person-picker-results, .place-suggestions {border-color: #d6d6da; box-shadow: 0 8px 24px #2021241a;}
.mission-card.selected {border-color: var(--accent); background: #fffaf6; box-shadow: inset 3px 0 var(--accent);}
.route-tabs button.done:not(.selected) {background: #eaf5ee; color: #267247;}
.checkpoint-list li.passed .checkpoint-number {background: #eaf5ee; border-color: #c4decf; color: #267247;}
.checkpoint-list li.next .checkpoint-number {background: var(--accent-soft); border-color: var(--accent); color: var(--accent);}
.positions-map-item.selected, .positions-map-item:hover {background: var(--accent-soft);}
.positions-map-index {background: var(--accent-soft); color: var(--accent);}
.equipment-marker {background: #f0f0f2!important; color: #404249!important; border-color: #a0a2a8!important;}
.equipment-marker.active {background: #eaf5ee!important; color: #267247!important; border-color: #33835a!important;}
.equipment-marker.maintenance {background: #fff1dc!important; color: #92600d!important; border-color: #d69a34!important;}

/* Login uses the same quiet, high-contrast visual language. */
.login-page {background: #fff;}
.login-intro {background: #f3f3f4; color: var(--ink); padding: 10vh 8vw; border-right: 1px solid var(--line);}
.login-intro .brandmark {width: 60px; height: 60px; font-size: 38px; margin-bottom: 80px;}
.login-intro .eyebrow {color: var(--accent);}
.login-intro h1 {font-size: clamp(38px, 4.5vw, 68px); font-weight: 750; line-height: 1.08; letter-spacing: -2.5px;}
.login-intro p {color: #74777c; font-size: 17px;}
.intro-line {background: #d9d9dd;}
.login-intro small {color: var(--muted);}
.login-form {min-width: 0;}
.login-form form {width: 100%; max-width: 380px; min-width: 0;}
.login-form h2 {font-size: 32px; letter-spacing: -1px;}
.login-form .primary {min-height: 46px;}

/* Dashboard: frequent actions first, context below. */
.dashboard-page .page-heading {margin-bottom: 18px;}
.dashboard-page .page-heading h1 {font-size: 32px; margin-bottom: 8px;}
.dashboard-page .page-heading .eyebrow {margin-bottom: 6px;}
.dashboard-page .shift-card {padding: 14px 20px; margin-bottom: 18px;}
.dashboard-page .shift-main {gap: 12px;}
.dashboard-page .shift-icon {width: 40px; height: 40px; font-size: 23px; flex-shrink: 0;}
.dashboard-page .shift-card h2 {font-size: 19px; margin-bottom: 3px;}
.dashboard-page .shift-caption {margin-bottom: 3px; font-size: 12px;}
.dashboard-page .shift-action {flex-direction: row; align-items: center; gap: 16px;}
.dashboard-page .stats {padding-bottom: 16px; margin-bottom: 18px; gap: 16px;}
.dashboard-page .stats>div {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 16px;}
.dashboard-page .stats span {margin: 0; font-size: 9px; letter-spacing: .5px; max-width: 150px;}
.dashboard-page .stats strong {font-size: 25px; white-space: nowrap;}
.dashboard-page .stats small {font-size: 10px; display: block; margin: 0;}
.dashboard-actions {display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr); gap: 18px; align-items: start; margin-bottom: 18px;}
.dashboard-page .panel-heading {padding: 14px 18px;}
.dashboard-page .panel-heading h2 {font-size: 16px; margin-bottom: 0;}
.dashboard-page .panel-heading p {margin-top: 4px; font-size: 11px;}
.dashboard-actions .panel-heading {min-height: 54px; gap: 8px; flex-wrap: wrap;}
.dashboard-actions .panel-tools {gap: 10px;}
.dashboard-actions .text-button {font-size: 11px;}
.detections-panel .counter-grid {display: flex; flex-direction: column; gap: 0; padding: 0 18px 4px;}
.detections-panel .counter {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent;}
.detections-panel .counter>span {font-size: 13px; color: var(--ink); overflow-wrap: anywhere; min-width: 0;}
.detections-panel .counter>div {margin: 0; gap: 16px; flex-shrink: 0;}
.detections-panel .counter strong {font-size: 24px; min-width: 26px; text-align: right;}
.detections-panel .counter button {width: 30px; height: 30px; min-height: 30px; font-size: 18px;}
.counter-explanation {padding: 8px 18px; font-size: 11px; color: var(--muted);}
.counter-explanation p {margin: 8px 0 2px; line-height: 1.6;}
.shift-tasks-panel .tasks {padding: 0 18px 4px;}
.shift-tasks-panel .task {padding: 10px 0; gap: 10px; align-items: flex-start;}
.task-time {font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0; width: 36px; padding-top: 3px;}
.shift-tasks-panel .task-icon {width: 22px; height: 22px; font-size: 12px; margin-top: 1px;}
.shift-tasks-panel .task .grow {display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;}
.shift-tasks-panel .task strong {font-size: 12px; flex-basis: 100%; line-height: 1.5;}
.shift-tasks-panel .task small {font-size: 10px; margin: 0;}
.shift-tasks-panel .task-note-button {display: inline; order: 2; margin: 0; padding: 0; min-height: 24px; font-size: 10px;}
.shift-tasks-panel .task-shift {order: 1;}
.shift-tasks-panel .task-help {order: 3; margin: 0; font-size: 10px; flex-basis: 100%;}
.shift-tasks-panel .task>button {font-size: 11px; min-height: 32px; padding: 5px 9px; flex-shrink: 0;}
.task-list-toggle {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 18px; border-top: 1px solid var(--line);}
.task-list-toggle small {font-size: 10px; color: var(--muted);}
.directive-steps {display: flex; gap: 8px; padding: 0; margin: 0 0 20px; list-style: none; border-bottom: 1px solid var(--line);}
.directive-steps li {font-size: 12px; padding: 10px 8px; color: var(--muted); border-bottom: 2px solid transparent;}
.directive-steps .current {color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;}
.directive-crew-editor {padding: 18px; border: 1px solid var(--line); border-radius: 5px; margin-bottom: 16px;}
.directive-crew-editor h3 {font-size: 16px;}
.directive-crew-editor label {margin: 10px 0;}
.directive-crew-editor [aria-invalid=true], .directive-crew-editor .person-picker[aria-invalid=true] input[type=search] {border-color: var(--red); background: #fff8f7;}
.directive-crew-editor .field-error {color: var(--red); font-size: 11px; margin-top: 5px;}
.directive-final-row {padding: 16px 0; border-top: 1px solid var(--line);}
.directive-final-row p {font-size: 14px; font-weight: 600; line-height: 1.7;}
.directive-final-row label {margin: 8px 0 0; font-size: 12px;}
.directive-final-row label span {font-weight: 400;}
.directive-confirmed {background: #f7faf8; border: 1px solid #dbe9df; border-radius: 5px; padding: 18px; margin-bottom: 20px;}
.directive-confirmed h3 {margin: 10px 0 4px;}
.directive-confirmed p {margin: 0; font-size: 12px; color: var(--muted);}
.directive-cover-plan {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px;}
.directive-cover-plan small {display: block; width: 100%; color: var(--muted);}
.directive-coverage-actions {display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0;}
.directive-coverage-summary {padding: 16px 20px; border-top: 1px solid var(--line); font-size: 12px;}
.directive-page-actions {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px 18px;}
.directive-planned-covers {margin-bottom: 18px;}
.directive-planned-covers .directive-cover-plan {margin-inline: 18px;}
@media(max-width:640px){.directive-steps {gap: 0;}.directive-steps li {font-size: 10px; padding-inline: 5px;}.directive-crew-editor {padding: 14px;}.modal-actions {flex-wrap: wrap;}.directive-final-row p {font-size: 13px;}}
.dashboard-page .positions-panel {margin-bottom: 18px;}
.dashboard-page .positions-panel th {padding: 9px 18px;}
.dashboard-page .positions-panel td {padding: 11px 18px;}
.dashboard-page .positions-panel .panel-heading>label {display: flex; align-items: center; gap: 10px;}
.dashboard-page .positions-panel .panel-heading select {margin: 0;}
.dashboard-page .cover-operations {margin-bottom: 18px;}
.dashboard-page .empty.compact {padding: 14px 18px; text-align: left; font-size: 12px;}
.dashboard-page .empty.compact p {margin: 0; font-size: 12px;}
.dashboard-page .cover-operations>.empty {border-top: 1px solid var(--line);}
.dashboard-page .cover-operations>.empty>span {display: none;}
.dashboard-page .cover-operations>.empty h3 {font-size: 12px; margin-bottom: 4px; font-weight: 500;}
.dashboard-secondary {display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px;}
.dashboard-secondary .handover-panel {margin: 0;}
.dashboard-secondary .handover-panel>.panel-tools {padding: 0 18px 10px; justify-content: flex-start; gap: 8px;}
.dashboard-secondary .handover-panel>.panel-tools button {font-size: 11px; min-height: 32px; padding: 5px 10px;}
.dashboard-secondary .handover-panel>p {padding: 0 18px 14px; margin: 0; font-size: 11px;}
.dashboard-secondary .timeline {padding-inline: 18px;}

@media (max-width: 1000px) {
  .dashboard-actions {grid-template-columns: minmax(250px, 1fr) minmax(0, 1.6fr);}
  .dashboard-page .stats>div {align-items: flex-start; flex-direction: column; gap: 4px;}
  .dashboard-page .stats strong {display: flex; align-items: baseline; gap: 6px;}
  .dashboard-page .stats small {display: inline;}
  .dashboard-page .shift-action {flex-direction: column; gap: 6px; align-items: flex-end;}
}
@media (max-width: 760px) {
  .dashboard-actions, .dashboard-secondary {grid-template-columns: minmax(0, 1fr); gap: 14px;}
  .dashboard-page .stats {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;}
  .dashboard-page .stats>div {border: 0; padding: 0; min-width: 0;}
  .dashboard-page .stats span {min-height: 27px; font-size: 8px; letter-spacing: 0;}
  .dashboard-page .stats strong {display: block; font-size: 23px;}
  .dashboard-page .stats small {display: block; white-space: normal; font-size: 9px;}
}
@media (max-width: 640px) {
  .shell .content:has(.dashboard-page) {padding-top: 20px;}
  .dashboard-page .page-heading {gap: 12px;}
  .dashboard-page .page-heading h1 {font-size: 28px;}
  .dashboard-page .page-heading p {font-size: 11px;}
  .dashboard-page .shift-card {gap: 12px; padding: 14px 16px;}
  .dashboard-page .shift-card h2 {font-size: 17px;}
  .dashboard-page .shift-action {flex-direction: row-reverse; align-items: center; gap: 8px;}
  .dashboard-page .shift-action button {font-size: 12px; padding: 7px 12px; min-height: 36px;}
  .dashboard-page .shift-action small {font-size: 10px;}
  .dashboard-actions .panel-heading {flex-wrap: nowrap;}
  .detections-panel .panel-heading {flex-wrap: wrap;}
  .dashboard-page .panel-heading {padding: 12px 16px;}
  .dashboard-page .panel-heading h2 {font-size: 15px;}
  .detections-panel .counter-grid, .shift-tasks-panel .tasks {padding-inline: 16px;}
  .detections-panel .counter button {width: 36px; height: 36px; min-height: 36px;}
  .shift-tasks-panel .task {gap: 7px; flex-wrap: wrap;}
  .shift-tasks-panel .task>button {margin-left: 65px; min-height: 36px;}
  .dashboard-page .positions-panel .panel-heading>label {width: auto;}
  .dashboard-page .positions-panel td, .dashboard-page .positions-panel th {padding-inline: 16px;}
}

@media (max-width: 1350px) {
  .sidebar {gap: 24px; padding-inline: 3%;}
  .sidebar nav {gap: 18px;}
  .sidebar-note {display: none;}
  .user {margin-left: auto; padding-left: 16px;}
  .topbar {padding-inline: 3%;}
}
@media (max-width: 1050px) {
  .sidebar {flex-wrap: wrap; gap: 0 24px; padding-top: 18px; min-height: auto;}
  .sidebar nav {order: 3; width: 100%; overflow-x: auto; gap: 26px; margin-top: 12px;}
  .sidebar nav button {min-height: 52px; flex-shrink: 0;}
  .user {border: 0;}
  .brand small, .user small {display: block;}
  .content {padding-top: 30px;}
}
@media (max-width: 640px) {
  .sidebar {padding: 16px 20px 0;}
  .brand {font-size: 22px;}
  .brandmark {width: 34px; height: 34px; font-size: 23px;}
  .user {display: flex; font-size: 11px; padding: 0; gap: 7px;}
  .user>span:not(.avatar) {max-width: 90px; overflow-wrap: anywhere;}
  .user small {display: none;}
  .user button {margin-left: 2px;}
  .avatar {width: 30px; height: 30px;}
  .sidebar nav {gap: 24px;}
  .sidebar nav button {font-size: 12px; gap: 6px; min-height: 48px;}
  .sidebar nav button span {font-size: 16px;}
  .topbar {height: 38px; padding-inline: 20px; font-size: 10px;}
  .mobile-logout {display: none;}
  .shell .content {padding: 28px 20px 0;}
  h1 {font-size: 32px; letter-spacing: -1px;}
  .page-heading {gap: 20px; margin-bottom: 24px; align-items: stretch;}
  .page-heading p {font-size: 12px;}
  .heading-actions {gap: 8px; justify-content: space-between;}
  .date-control {padding-inline: 8px;}
  .heading-actions button {font-size: 12px;}
  .shift-card {padding: 20px; gap: 20px;}
  .shift-card h2 {font-size: 20px;}
  .shift-icon {width: 42px; height: 42px; font-size: 24px;}
  .shift-caption {font-size: 12px; gap: 8px; flex-wrap: wrap;}
  .shift-card p, .shift-action small {font-size: 11px;}
  .shift-action {flex-wrap: wrap; gap: 8px;}
  .stats {gap: 24px 16px; padding-bottom: 24px; margin-bottom: 24px;}
  .stats strong {font-size: 32px;}
  .stats span {font-size: 9px; min-height: 27px;}
  .stats small {font-size: 11px;}
  .panel-heading {padding: 20px; gap: 16px; flex-wrap: wrap;}
  .panel-heading h2 {font-size: 17px;}
  .panel-heading p {font-size: 11px;}
  .panel-heading>label {width: 100%;}
  .panel {border-radius: 4px;}
  .counter-grid {padding-inline: 20px;}
  .counter {padding: 14px;}
  .counter strong {font-size: 30px;}
  .counter-actions {gap: 5px;}
  .counter-actions button {width: 30px; height: 34px;}
  .tabs {gap: 20px; flex-wrap: nowrap; overflow-x: auto;}
  .tabs button {flex-shrink: 0; font-size: 12px;}
  .modal {padding: 20px;}
  .login-intro {padding: 36px 28px; border-right: 0; border-bottom: 1px solid var(--line);}
  .login-intro .brandmark {margin-bottom: 32px; width: 42px; height: 42px; font-size: 28px;}
  .login-intro h1 {font-size: 40px; letter-spacing: -1.5px;}
  .login-form {padding: 32px 28px;}
  .login-form h2 {font-size: 28px;}
}