/* A game-inspired desk: rounded outlines, soft raised cards, and obvious controls. */
:root { --card-edge: #52617d; --card-shadow: 0 5px 0 #070e1bb8, inset 0 1px 0 #ffffff0d; }
h1, h2, h3 { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
h1, .metrics strong, .staff-summary strong { font-weight: 800; }
.overview-heading { border: 2px solid #9a88b7; border-radius: 28px; box-shadow: 0 7px 0 #0b1020a8, inset 0 1px 0 #ffffff20; }
.overview-heading h1 { letter-spacing: -1.5px; text-shadow: 0 3px 0 #0b10204d; }
.hero-actions { border: 2px solid #8882a66b; border-radius: 20px; background: #111a2be8; box-shadow: 0 4px 0 #0a10206b; }
.panel, .metrics article, .staff-lane, .moderation-coverage, .insight, .gate-card {
  border-width: 2px; border-radius: 22px; box-shadow: var(--card-shadow);
}
.panel, .staff-lane { border-color: var(--card-edge); }
.metrics { gap: 20px; }
.metrics article { border-color: #8470bd; padding: 24px 23px; }
.metrics article:nth-child(2) { border-color: #8c7956; background: linear-gradient(125deg, #2b2935f5, #171e2ef5); }
.metrics article:nth-child(3) { border-color: #508577; background: linear-gradient(125deg, #1a3438f5, #141f30f5); }
.metrics article:nth-child(4) { border-color: #5d80a6; background: linear-gradient(125deg, #223349f5, #141d2ef5); }
.metrics article p { font-size: 10px; letter-spacing: 1px; color: #c0cce0; }
.metrics article p span { border: 1px solid #b49bff50; border-radius: 10px; box-shadow: 0 2px 0 #080e1d55; }
.metrics small { font-size: 12px; color: #b8c5dc; }
.metrics article:has(.metric-link:not([hidden])) { cursor: pointer; transition: border-color .15s, transform .15s; }
.metrics article:has(.metric-link:not([hidden])):hover { border-color: #cbbaff; transform: translateY(-2px); }
.metric-link { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; border-radius: inherit; background: transparent; }
.metric-link:focus-visible { outline-offset: -6px; }
.metric-link:active { background: #c3afff0b; }
.button, .select-trigger, .quick-find { border-width: 2px; border-radius: 13px; min-height: 44px; }
.button { font-weight: 700; border-color: #61728d; box-shadow: 0 4px 0 #070e1bb8, inset 0 1px 0 #ffffff10; transition: transform .12s, background .12s, border-color .12s, box-shadow .12s; }
.button:hover:not(:disabled) { border-color: #d0bdff; transform: translateY(-2px); box-shadow: 0 6px 0 #070e1bb8, inset 0 1px 0 #ffffff22; }
.button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #070e1bb8; }
.button.primary { border-color: #d2bcff88; box-shadow: 0 4px 0 #291c51, inset 0 2px 0 #ffffff24; }
.button.primary:hover:not(:disabled) { box-shadow: 0 6px 0 #291c51, inset 0 2px 0 #ffffff33; }
.button.primary:active:not(:disabled) { box-shadow: 0 1px 0 #291c51; }
.button:disabled { box-shadow: none; }
.button.danger { border-color: #c67e94; }
.select-trigger { border-color: #60718d; box-shadow: 0 2px 0 #070e1b6b; }
.select-menu { border-width: 2px; border-radius: 15px; box-shadow: 0 6px 0 #070e1baa, 0 15px 40px #0006; }
.select-menu [role=option] { min-height: 42px; display: flex; align-items: center; border-radius: 9px; }
input:not([type=checkbox]), textarea { border-width: 2px; border-radius: 12px; }
input::placeholder, textarea::placeholder { color: #96a8c4; }
input[type=checkbox] { width: 20px; height: 20px; border-width: 2px; border-radius: 6px; }
.nav { min-height: 44px; border-width: 2px; border-radius: 13px; }
.nav.active { border-color: #8f79c57d; background: #8f7cf523; box-shadow: 0 3px 0 #070e1b66; }
.nav-label { color: #95a5c1; }
.case-row.recent-row, .staff-task-card, .saved-reply-card, .question, .message, .note { border-width: 2px; border-radius: 15px; }
.case-row.recent-row, .staff-task-card { box-shadow: 0 3px 0 #080f1d88; }
.case-row.recent-row { border-color: #40516e; }
.case-row:hover { border-color: #a58dcc; }
.staff-task-card { border-color: #65738e; }
.staff-task-open { min-height: 126px; }
.staff-task-open h3 { font-size: 14px; }
.staff-task-open p { font-size: 12px; }
.staff-task-owner, .staff-task-due { font-size: 11px; }
.staff-summary button { border-width: 2px; border-radius: 17px; box-shadow: 0 3px 0 #080f1d88; min-height: 88px; }
.staff-summary small, .staff-list-status, .staff-board-note { font-size: 12px; }
.staff-lane > header h2 { font-size: 14px; }
.staff-lane-empty { font-size: 12px; }
.queue-views button { border-width: 2px; border-radius: 12px; min-height: 44px; font-size: 12px; }
.badge { border-radius: 8px; }
dialog { border-width: 2px; border-radius: 23px; }
.dialog-head { border-bottom-width: 2px; }
.icon-button { min-width: 40px; min-height: 40px; border-radius: 12px; }
.save-bar, .toast { border-width: 2px; border-radius: 16px; }
.overview-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; margin: 0 0 26px; }
.workspace-shortcut { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 86px; padding: 16px; border: 2px solid #566580; border-radius: 18px; background: #152034f5; color: #eef2ff; text-align: left; box-shadow: 0 4px 0 #080f1d99; transition: background .15s, border-color .15s, transform .15s; }
.workspace-shortcut:hover { background: #222c45; border-color: #bfa4f2; transform: translateY(-2px); }
.workspace-shortcut:active { transform: translateY(2px); box-shadow: 0 2px 0 #080f1d99; }
.shortcut-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 2px solid #a58bdc70; border-radius: 13px; background: #7f5fc824; color: #d4bdff; }
.shortcut-icon svg { width: 22px; height: 22px; }
.workspace-shortcut:nth-child(2) .shortcut-icon { background: #74c6ac1a; border-color: #74c6ac70; color: #a2e9d1; }
.workspace-shortcut > span:nth-child(2) { min-width: 0; }
.workspace-shortcut strong { display: block; font-size: 14px; line-height: 1.4; }
.workspace-shortcut small { display: block; font-size: 11px; color: #b2c0d8; margin-top: 4px; }
.shortcut-arrow { margin-left: auto; color: #c5b0f8; font-size: 20px; }
#mobile-nav-dialog { width: 450px; }
.mobile-nav-links { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-nav-item { display: flex; align-items: center; gap: 9px; text-align: left; min-height: 56px; padding: 12px; border: 2px solid #52617c; border-radius: 14px; color: #d4ddf0; background: #172237; font-size: 12px; }
.mobile-nav-item svg { width: 20px; height: 20px; }
.mobile-nav-item:hover, .mobile-nav-item[aria-current=page] { border-color: #baa0ed; color: #e8dbff; background: #302941; }
#mobile-menu { display: none; }
@media(max-width:1000px) { .overview-shortcuts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
@media(max-width:760px) {
  .sidebar { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 16px 8px; }
  .sidebar .brand { margin: 0; align-self: center; }
  #mobile-menu { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 8px 13px; font-size: 12px; }
  #mobile-menu svg { width: 17px; height: 17px; }
  .sidebar nav { grid-column: 1 / -1; margin-top: 3px; }
  .nav { min-height: 42px; }
  .overview-heading { border-radius: 23px; padding: 24px 20px; }
  .hero-actions { border-radius: 15px; padding: 12px; }
  .hero-actions .button { min-height: 44px; }
  .overview-shortcuts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 23px; }
  .workspace-shortcut { padding: 13px 11px; min-height: 110px; align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  .workspace-shortcut > span:nth-child(2) { flex-basis: 100%; }
  .workspace-shortcut strong { font-size: 13px; }
  .workspace-shortcut small { font-size: 11px; line-height: 1.5; }
  .shortcut-icon { width: 33px; height: 33px; border-radius: 11px; }
  .shortcut-icon svg { width: 19px; height: 19px; }
  .shortcut-arrow { display: none; }
  .metrics { gap: 14px; }
  .metrics article { padding: 18px 14px; border-radius: 19px; }
  .metrics article p { font-size: 9px; letter-spacing: .5px; }
  .metrics small { font-size: 11px; }
  .panel, .staff-lane, .moderation-coverage, .insight { border-radius: 19px; }
  .staff-filters > input { min-width: 0; }
  .staff-summary { gap: 9px; }
  .staff-summary button { padding: 14px 10px; min-height: 85px; }
  .staff-summary small { font-size: 10px; }
  dialog { border-radius: 18px; }
  .mobile-nav-links { padding: 12px; gap: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .button, .workspace-shortcut, .metrics article { transition: none; }
  .button:hover:not(:disabled), .button:active:not(:disabled), .workspace-shortcut:hover, .workspace-shortcut:active, .metrics article:has(.metric-link:not([hidden])):hover { transform: none; }
}