/* Subtle presentation refinements. Existing Vue components and event handlers stay intact. */
.ce-workspace .ce-tabs {
  gap: 5px;
  padding-top: 5px;
}
.ce-workspace .ce-tab {
  min-height: 42px;
  margin-bottom: 8px;
  padding: 10px 16px;
  border-bottom-color: transparent;
  border-radius: 6px;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.ce-workspace .ce-tab:not(.is-active) {
  background-color: transparent;
}
.ce-workspace .ce-tab.is-active {
  color: #2c659c;
  background-color: #edf4fb;
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px #d5e3f1;
}
/* Display changes restart this short fade; the form itself remains mounted. */
.ce-workspace .ce-tab-panel {
  animation: panel-section-appear 160ms ease-out;
}
@keyframes panel-section-appear {
  from { opacity: .88; }
  to { opacity: 1; }
}
/* Hover is deliberately limited to precise pointers, keeping touch cards still. */
@media (hover: hover) and (pointer: fine) {
  .ce-workspace .ce-tab:not(.is-active):hover {
    color: #3e638b;
    background-color: #f5f8fc;
  }
  .admin-dashboard .dashboard-server-card {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }
  .admin-dashboard .dashboard-server-card:not(.server-card-disabled):hover,
  .admin-dashboard .dashboard-server-card:not(.server-card-disabled):focus-within {
    border-color: #bdcede;
    background-color: #fcfdff;
    box-shadow: 0 4px 14px rgba(44, 72, 104, .065);
  }
}
@media (max-width: 760px) {
  .ce-workspace .ce-tabs { gap: 3px; }
  .ce-workspace .ce-tab {
    min-height: 44px;
    padding: 10px 9px;
    font-size: 12px;
  }
}
@media (max-width: 359px) {
  .ce-workspace .ce-tabs { gap: 2px; }
  .ce-workspace .ce-tab { padding-right: 6px; padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ce-workspace .ce-tab-panel { animation: none; }
  .ce-workspace .ce-tab,
  .admin-dashboard .dashboard-server-card { transition: none; }
}