:root {
  --xp-bg: #d8e4f8;
  --xp-window: #ece9d8;
  --xp-text: #000000;
  --xp-border-dark: #7f9db9;
  --xp-border-mid: #a4b0c0;
  --xp-border-light: #ffffff;
  --xp-title-start: #0a246a;
  --xp-title-end: #3a6ea5;
  --xp-btn-face: #ece9d8;
  --xp-btn-shadow: #808080;
  --xp-btn-highlight: #ffffff;
  --xp-selected: #316ac5;
  --xp-cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 1L2 19L7 14L10 22L13 21L10 13L16 13Z' fill='white' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 1 1, default;
  --xp-cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 11V4a1 1 0 1 1 2 0v5h1V3a1 1 0 1 1 2 0v6h1V4a1 1 0 1 1 2 0v7h1V7a1 1 0 1 1 2 0v7c0 4-2 7-6 8h-2c-3 0-5-2-5-5v-4a1 1 0 1 1 2 0v2h1z' fill='white' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 6 2, pointer;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--xp-bg);
  color: var(--xp-text);
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 13px;
  cursor: var(--xp-cursor-arrow);
}

.hidden { display: none !important; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  color: #fff;
  background: linear-gradient(to right, var(--xp-title-start), var(--xp-title-end));
  border-bottom: 1px solid #001744;
}

.topbar h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px;
}

.card {
  background: var(--xp-window);
  border: 1px solid var(--xp-border-mid);
  box-shadow: inset 1px 1px 0 var(--xp-border-light), inset -1px -1px 0 #c0c0c0;
  border-radius: 0;
  padding: 10px;
}

.auth-card {
  max-width: 440px;
  margin: 24px auto;
  display: grid;
  gap: 10px;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.auth-tab {
  flex: 1;
  background: #ded7c5;
}

.auth-tab.active {
  background: var(--xp-window);
  font-weight: 700;
}

.hint {
  margin: 0 0 8px;
  color: #333;
  font-size: 12px;
}

.workspace { display: grid; grid-template-columns: 280px 1fr 260px; gap: 10px; align-items: start; }
.side { display: grid; gap: 8px; align-content: start; max-height: calc(100vh - 90px); overflow: auto; }
.main-content { display: grid; gap: 8px; }

h2, h3 {
  margin: 0;
  font-size: 13px;
}

label { display: grid; gap: 4px; }

input,
textarea {
  width: 100%;
  border: 1px solid var(--xp-border-dark);
  background: #fff;
  color: #000;
  padding: 5px 6px;
  font: inherit;
  border-radius: 0;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

button {
  width: auto;
  padding: 4px 10px;
  border: 1px solid var(--xp-btn-shadow);
  border-top-color: var(--xp-btn-highlight);
  border-left-color: var(--xp-btn-highlight);
  background: var(--xp-btn-face);
  color: #000;
  font: inherit;
  cursor: pointer;
  cursor: var(--xp-cursor-hand);
}

input,
textarea,
select {
  cursor: var(--xp-cursor-arrow);
}

.list li,
.tab-btn {
  cursor: var(--xp-cursor-hand);
}

button:active {
  border-top-color: var(--xp-btn-shadow);
  border-left-color: var(--xp-btn-shadow);
  border-right-color: var(--xp-btn-highlight);
  border-bottom-color: var(--xp-btn-highlight);
}

button.secondary,
button.danger {
  background: var(--xp-btn-face);
  color: #000;
}

.row { display: flex; gap: 6px; flex-wrap: wrap; }
.row-between { justify-content: space-between; align-items: center; }

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--xp-border-dark);
  background: #fff;
  max-height: 320px;
  overflow: auto;
}

.list li {
  padding: 5px 6px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
}

.list li:last-child { border-bottom: 0; }

.list li.active {
  background: var(--xp-selected);
  color: #fff;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}

.form-grid .full { grid-column: 1 / -1; }

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--xp-border-mid);
  padding-top: 6px;
}

.tab-btn {
  border-bottom: none;
  background: #ded7c5;
}

.tab-btn.active {
  background: var(--xp-window);
  position: relative;
  top: 1px;
}

.tab-content {
  display: none;
  padding-top: 8px;
}

.tab-content.active { display: block; }
.split { display: grid; grid-template-columns: 320px 1fr; gap: 10px; }

.right-rail {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: calc(100vh - 90px);
  overflow: auto;
}

.rail-heading {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--xp-border-mid);
}

.list-compact {
  max-height: 200px;
}

.doctor-item {
  cursor: default;
}

.doctor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.doctor-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctor-cab {
  flex-shrink: 0;
  font-size: 11px;
  color: #444;
}

.doctor-sub {
  font-size: 11px;
  color: #555;
  margin-top: 2px;
  padding-left: 14px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #555;
}

.status-dot.online {
  background: #28a745;
  box-shadow: 0 0 0 1px #1e7a34;
}

.status-dot.offline {
  background: #dc3545;
  box-shadow: 0 0 0 1px #a71d2a;
}

.log-table-wrap {
  border: 1px solid var(--xp-border-dark);
  background: #fff;
  max-height: 280px;
  overflow: auto;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.log-table th,
.log-table td {
  border: 1px solid var(--xp-border-mid);
  padding: 4px 5px;
  text-align: left;
  vertical-align: top;
}

.log-table th {
  background: #e8e4d8;
  position: sticky;
  top: 0;
}

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 260px 1fr; }
  .right-rail {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 980px) {
  .workspace, .split, .form-grid { grid-template-columns: 1fr; }
  .side { max-height: none; }
}