:root {
      --bg-1: #071018;
      --bg-2: #0f1e2b;
      --line: #2a4a62;
      --text: #e7f3ff;
      --muted: #9fbad2;
      --accent: #29c0ff;
      --ok: #3ddc97;
      --bad: #ff6b6b;
    }

    * { box-sizing: border-box; }
    html, body { overflow: hidden !important; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Exo 2", sans-serif;
      color: #e7f3ff;
      color: var(--text);
      background-color: #0f1e2b;
      background:
        radial-gradient(90rem 50rem at -20% -10%, #1c3f5a 0%, transparent 60%),
        radial-gradient(60rem 40rem at 110% 10%, #18344a 0%, transparent 60%),
        linear-gradient(155deg, var(--bg-1), var(--bg-2));
      display: grid;
      place-items: center;
      padding: 14px;
      overflow: hidden;
    }

    .scan {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .12;
      background: repeating-linear-gradient(to bottom, #fff 0, #fff 1px, transparent 2px, transparent 4px);
      animation: drift 8s linear infinite;
    }

    @keyframes drift { from { transform: translateY(0); } to { transform: translateY(8px); } }
    @keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes paneIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes glowPulse {
      0% { box-shadow: 0 0 0 rgba(41, 192, 255, 0); }
      50% { box-shadow: 0 0 18px rgba(41, 192, 255, .3); }
      100% { box-shadow: 0 0 0 rgba(41, 192, 255, 0); }
    }
    @keyframes sheen {
      0% { transform: translateX(-120%); }
      55% { transform: translateX(120%); }
      100% { transform: translateX(120%); }
    }

    .app {
      width: min(1640px, calc(100vw - 16px));
      height: min(860px, calc(100vh - 20px));
      max-height: calc(100vh - 28px);
      border: 1px solid #2a4a62;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 80px rgba(0, 0, 0, .45);
      background: rgba(8, 18, 28, .92);
      background: rgba(8, 18, 28, .82);
      backdrop-filter: blur(10px);
      animation: popIn .55s ease both;
      display: flex;
      flex-direction: column;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, #102839, #10212f);
    }

    .logo { font-weight: 700; letter-spacing: .06em; }
    .top-right { display: flex; align-items: center; gap: 12px; }
    .controls { display: flex; align-items: center; gap: 8px; }
    .legacy-link {
      color: #84dbff;
      text-decoration: none;
      border: 1px solid #315e7e;
      border-radius: 9px;
      padding: 0 12px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      background: rgba(9, 28, 40, .55);
      transition: all .15s ease;
      white-space: nowrap;
    }
    .legacy-link:hover {
      color: #031620;
      background: #84dbff;
      border-color: transparent;
    }
    .muted { color: var(--muted); font-size: 13px; }

    .auth-wrap {
      display: grid;
      place-items: center;
      padding: 56px 18px;
    }

    .auth {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      background: linear-gradient(160deg, #142a3d, #0f2130);
      animation: popIn .45s ease both;
    }

    .auth h1 { margin: 0 0 14px; font-size: 22px; }
    .auth p { margin: 0 0 16px; color: var(--muted); }

    .field { margin-bottom: 10px; }
    .field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }

    .field input {
      width: 100%;
      border: 1px solid #355772;
      background: #0c1b28;
      color: var(--text);
      border-radius: 10px;
      padding: 11px 12px;
      font: inherit;
    }

    .btn {
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding: 11px 12px;
      font: inherit;
      font-weight: 700;
      color: #042033;
      background: linear-gradient(120deg, #6ce6ff, var(--accent));
      cursor: pointer;
      transition: transform .16s ease, filter .16s ease;
    }

    .btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
    .btn:active { transform: translateY(0); }

    .status { margin-top: 10px; min-height: 18px; font-size: 13px; }
    .status.ok { color: var(--ok); }
    .status.bad { color: var(--bad); }

    .panel { display: none; opacity: 0; transform: translateY(10px); }
    .panel.show { display: block; }
    .panel.reveal { animation: popIn .45s ease both; }

    .tabs {
      display: flex;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid #2a4a62;
      border-bottom: 1px solid var(--line);
      background: #0f2030;
      flex-wrap: wrap;
    }

    .tabs-main {
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    .tabs-left,
    .tabs-right {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .tab {
      border: 1px solid #325572;
      border: 1px solid #325572;
      background: #12283a;
      color: #e7f3ff;
      color: var(--text);
      border-radius: 9px;
      padding: 0 12px;
      height: 38px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font: inherit;
      line-height: 1;
      white-space: nowrap;
      transition: transform .14s ease, background .2s ease, border-color .2s ease;
    }

    .tab:hover { transform: translateY(-1px); }

    .tab.active {
      border-color: transparent;
      color: #052033;
      background: linear-gradient(120deg, #7be8ff, #33c5ff);
      font-weight: 700;
      animation: glowPulse 1.3s ease;
    }

    .pane {
      display: none;
      padding: 18px;
      min-height: 0;
      opacity: 0;
      transform: translateX(14px);
      overflow: hidden;
    }

    .pane.active { display: block; animation: paneIn .3s ease both; }

    #servers-tab.tab-pane.active {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    #bash-tab.tab-pane.active {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: calc(100vh - 190px);
      overflow: hidden;
    }

    .pane-card {
      border: 1px solid #2a4a62;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      background: linear-gradient(160deg, #12283a, #102334);
      position: relative;
      overflow: hidden;
      min-height: 560px;
    }

    #servers-tab .pane-card {
      flex: 1;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    #bash-tab .pane-card {
      flex: 1;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 12px;
    }

    .pane-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%);
      transform: translateX(-120%);
      animation: sheen 2.8s ease-in-out infinite;
      pointer-events: none;
    }

    .mock-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 12px;
    }

    .list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .list li {
      border: 1px solid #31526c;
      border-radius: 10px;
      padding: 0;
      background: #0e1f2d;
      font-size: 13px;
    }

    .tag {
      display: inline-block;
      font-size: 11px;
      border: 1px solid #3f6a89;
      border-radius: 999px;
      padding: 2px 8px;
      margin-left: 6px;
      color: #bde7ff;
    }

    .tm-shell {
      border: 1px solid #29506a;
      border-radius: 11px;
      background: linear-gradient(180deg, #112739, #0f2131);
      padding: 12px;
    }

    .server-dashboard {
      display: grid;
      gap: 12px;
      padding-bottom: 6px;
    }

    .server-summary-panel,
    .server-timeline-panel {
      border: 1px solid #29506a;
      border-radius: 11px;
      background: linear-gradient(180deg, #112739, #0f2131);
      padding: 12px;
    }

    .server-summary-panel {
      display: grid;
      gap: 12px;
    }

    .server-summary-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }

    .server-summary-copy {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .server-summary-kicker {
      color: #8ec5df;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .server-summary-copy h4,
    .server-timeline-head h4 {
      margin: 0;
      color: #dcf5ff;
      font-size: 20px;
      line-height: 1.1;
    }

    .server-summary-sub {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
      color: #a7cce0;
      font-size: 12px;
    }

    .server-summary-sub span {
      padding: 4px 8px;
      border: 1px solid rgba(90, 168, 255, .18);
      border-radius: 999px;
      background: rgba(11, 26, 38, .5);
    }

    .server-summary-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      align-items: center;
    }

    .server-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 11px;
      border: 1px solid #365d7d;
      background: rgba(10, 28, 42, .66);
      color: #d6edf8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .server-live-badge.online {
      border-color: rgba(61, 220, 151, .55);
      color: #bff8dd;
      background: rgba(20, 58, 48, .7);
    }

    .server-live-badge.offline {
      border-color: rgba(255, 107, 107, .55);
      color: #ffd0d0;
      background: rgba(65, 21, 25, .7);
    }

    .server-status-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .server-info-card {
      border: 1px solid #31526c;
      border-radius: 10px;
      background: #0f2232;
      padding: 10px 11px;
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .server-info-card.tone-ok {
      border-color: rgba(61, 220, 151, .28);
      box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .08);
    }

    .server-info-card.tone-warn {
      border-color: rgba(240, 169, 63, .28);
      box-shadow: inset 0 0 0 1px rgba(240, 169, 63, .08);
    }

    .server-info-card.tone-bad {
      border-color: rgba(255, 107, 107, .28);
      box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .08);
    }

    .server-info-card.tone-muted,
    .server-info-card.tone-info {
      border-color: #31526c;
    }

    .server-info-label {
      color: #8ec5df;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .server-info-value {
      color: #dcf5ff;
      font-size: 16px;
      line-height: 1.2;
      word-break: break-word;
    }

    .server-info-hint {
      color: #a7cce0;
      font-size: 12px;
      line-height: 1.35;
      min-height: 16px;
      word-break: break-word;
    }

    .server-quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .server-action-btn {
      border: 1px solid #31526c;
      background: #102536;
      color: #d9edf8;
      border-radius: 9px;
      padding: 0 12px;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
      transition: transform .14s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .server-action-btn:hover {
      transform: translateY(-1px);
      border-color: #4a88ae;
      color: #edf9ff;
    }

    .server-action-btn.primary {
      border-color: transparent;
      color: #052033;
      background: linear-gradient(120deg, #7be8ff, #33c5ff);
    }

    .server-action-btn.ghost {
      background: rgba(11, 26, 38, .8);
    }

    .server-action-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    .server-timeline-panel {
      display: grid;
      gap: 10px;
    }

    .server-timeline-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }

    .server-timeline-count {
      color: #8ec5df;
      font-size: 12px;
      padding: 4px 9px;
      border: 1px solid rgba(90, 168, 255, .16);
      border-radius: 999px;
      background: rgba(11, 26, 38, .5);
    }

    .server-timeline-list {
      display: grid;
      gap: 8px;
    }

    .server-timeline-item {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 10px;
      border: 1px solid #31526c;
      border-radius: 10px;
      background: #0f2232;
      padding: 10px 11px;
      min-width: 0;
    }

    .server-timeline-item.tone-ok {
      border-color: rgba(61, 220, 151, .24);
      box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .06);
    }

    .server-timeline-item.tone-warn {
      border-color: rgba(240, 169, 63, .24);
      box-shadow: inset 0 0 0 1px rgba(240, 169, 63, .06);
    }

    .server-timeline-item.tone-bad {
      border-color: rgba(255, 107, 107, .24);
      box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .06);
    }

    .server-timeline-item.tone-muted,
    .server-timeline-item.tone-info {
      border-color: #31526c;
    }

    .server-timeline-time {
      color: #8ec5df;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      padding-top: 2px;
    }

    .server-timeline-body {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .server-timeline-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .server-timeline-title-row strong {
      color: #dcf5ff;
      font-size: 14px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .server-timeline-source {
      font-size: 10px;
      color: #9ecde3;
      border: 1px solid rgba(90, 168, 255, .16);
      border-radius: 999px;
      padding: 2px 7px;
      text-transform: uppercase;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .server-timeline-detail {
      color: #a7cce0;
      font-size: 12px;
      line-height: 1.4;
      word-break: break-word;
    }

    .server-timeline-empty {
      border: 1px dashed #31526c;
      border-radius: 10px;
      background: rgba(11, 26, 38, .5);
      color: #9ecde3;
      padding: 14px;
      font-size: 13px;
      line-height: 1.5;
    }

    .tm-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .tm-head h3 {
      margin: 0;
      font-size: 18px;
      color: #d8f4ff;
    }
    .tm-main {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 10px;
    }
    .tm-nav {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .tm-nav-item {
      appearance: none;
      font: inherit;
      color: inherit;
      text-align: left;
      border: 1px solid #31526c;
      border-radius: 9px;
      padding: 8px 10px;
      background: #102536;
      cursor: pointer;
      transition: .15s ease;
    }
    .tm-nav-item:hover { transform: translateY(-1px); border-color: #4a88ae; }
    .tm-nav-item.active {
      border-color: #80dcff;
      background: linear-gradient(120deg, #11344a, #0f2a3d);
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .25) inset;
    }
    .tm-nav-item .k { font-size: 11px; color: #9ecde3; }
    .tm-nav-item .v { font-size: 16px; font-weight: 700; margin-top: 2px; color: #daf3ff; }
    .tm-content { display: grid; gap: 10px; }
    .tm-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
    .tm-title h2 { margin: 0; font-size: 36px; line-height: 1; color: #dcf5ff; }
    .tm-title .sub { color: #8ec5df; font-size: 13px; }
    .tm-main-chart {
      border: 1px solid #31526c;
      border-radius: 10px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(41, 192, 255, .14), rgba(41, 192, 255, .04)),
        repeating-linear-gradient(to right, transparent 0, transparent 42px, rgba(255,255,255,.06) 43px, transparent 44px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 32px, rgba(255,255,255,.06) 33px, transparent 34px);
      min-height: 290px;
      position: relative;
    }
    .tm-axis-top {
      position: absolute;
      top: 4px;
      right: 8px;
      font-size: 12px;
      color: #84b7d0;
      z-index: 2;
    }
    .tm-main-chart svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .tm-main-chart polyline {
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      animation: lineDraw 2.2s ease forwards, linePulse 5s ease-in-out infinite 2.2s;
    }
    @keyframes lineDraw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes linePulse {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .tm-side {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 8px;
    }
    .tm-tile {
      border: 1px solid #31526c;
      border-radius: 10px;
      background: #0f2232;
      padding: 9px 10px;
      font-size: 13px;
    }
    .tm-tile strong {
      display: block;
      font-size: 16px;
      margin-top: 3px;
      color: #d8f4ff;
    }

    .bash-shell {
      border: 1px solid #304f69;
      border-radius: 10px;
      background: #07131d;
      min-height: 250px;
      padding: 12px;
      font-family: Consolas, "Courier New", monospace;
      font-size: 13px;
      line-height: 1.5;
      color: #d9f2ff;
    }

    .bash-cmd { color: #7ce6a8; }

    .bash-input {
      margin-top: 10px;
      width: 100%;
      border-radius: 8px;
      border: 1px solid #32536d;
      padding: 9px 10px;
      background: #0b1a27;
      color: var(--text);
      font: inherit;
    }

    .admin-cols {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .admin-box {
      border: 1px solid #31526c;
      border-radius: 10px;
      background: #102233;
      padding: 0;
      font-size: 13px;
    }

    .admin-box h4 {
      margin: 0 0 8px;
      font-size: 14px;
      color: #bde7ff;
    }

    @media (max-width: 1100px) {
      .tm-main { grid-template-columns: 1fr; }
    }
    @media (max-width: 860px) { .mock-grid { grid-template-columns: 1fr; } }

    .legacy-link {
      font: inherit;
      cursor: pointer;
    }

    .hidden {
      display: none !important;
    }

    .card-block {
      display: none;
    }

    .card-block.show {
      display: block;
    }

    .action-btn {
      min-width: 112px;
      height: 38px;
      min-height: 38px;
      padding: 0 12px;
    }

    #panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .tab-pane.active {
      display: block;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .servers-layout {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 12px;
      flex: 1;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .server-list-card,
    .server-main-card {
      border: 1px solid #31526c;
      border-radius: 10px;
      background: #102233;
      padding: 12px;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .server-list-card h2 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .server-list-controls {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      gap: 10px;
      margin: 0 0 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(128, 220, 255, .08);
    }

    .server-subtabs {
      display: flex;
      gap: 8px;
      margin: 0;
      flex-wrap: wrap;
    }

    .server-toolbar {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr;
      margin: 0;
      flex: 0 0 auto;
    }

    .server-toolbar-field {
      display: grid;
      gap: 4px;
      font-size: 11px;
      color: #8fb8cf;
      font-weight: 600;
    }

    .server-toolbar-field select {
      border: 1px solid #2d5e80;
      background: #102a3d;
      color: #d8f1ff;
      border-radius: 8px;
      padding: 7px 9px;
      font-size: 12px;
      font-weight: 600;
      width: 100%;
      min-width: 0;
      outline: none;
    }

    .server-toolbar-field select:focus {
      border-color: #80dcff;
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .2);
    }

    .server-sort-hint {
      margin: 0;
      font-size: 11px;
      color: #7fa7be;
      flex: 0 0 auto;
    }

    .server-subtab-btn {
      border: 1px solid #2d5e80;
      background: #102a3d;
      color: #a9d7f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, color .18s ease;
    }

    .server-subtab-btn:hover {
      border-color: #4f91bc;
      color: #d8f1ff;
    }

    .server-subtab-btn.active {
      border-color: #80dcff;
      color: #e8f8ff;
      background: linear-gradient(120deg, #184662, #12334a);
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .25) inset;
    }

    .server-list {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 0;
      gap: 8px;
      overflow-y: auto;
      margin: 0;
      padding: 0 4px 0 0;
      list-style: none;
      user-select: none;
      -webkit-user-select: none;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #4fc2f7 #11283a;
    }

    .server-list::-webkit-scrollbar {
      width: 10px;
    }

    .server-list::-webkit-scrollbar-track {
      background: linear-gradient(180deg, #102334, #0c1c29);
      border-radius: 999px;
      border: 1px solid rgba(88, 145, 177, .16);
    }

    .server-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #6fe3ff, #29c0ff);
      border-radius: 999px;
      border: 2px solid #11283a;
      box-shadow: 0 0 10px rgba(41, 192, 255, .18);
    }

    .server-list::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #96ecff, #47cbff);
    }

    .server-list::-webkit-scrollbar-corner {
      background: transparent;
    }

    .server-list li {
      cursor: pointer;
      transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      padding: 11px 12px 12px;
      line-height: 1.25;
      color: #d9edf8;
      display: block;
      white-space: normal;
      word-break: break-word;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
      overflow: visible;
    }

    .server-list li.dragging {
      opacity: .55;
      border-style: dashed;
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .18) inset;
    }

    .server-list li.drag-target {
      border-color: #80dcff;
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .2) inset;
    }

    .server-list li.manual-sort {
      cursor: grab;
    }

    .server-list li.manual-sort:active {
      cursor: grabbing;
    }

    .dead-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 6px;
      color: #f0b7b7;
      font-size: 11px;
      line-height: 1.25;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .server-list li:hover {
      transform: none;
      border-color: #40657f;
      background: #102233;
      box-shadow: inset 0 0 0 1px rgba(74, 136, 174, .12);
    }

    .server-list li.server-empty,
    .server-list li.server-empty:hover {
      border-color: #2a4155;
      background: #0f1f2e;
      box-shadow: none;
      cursor: default;
      opacity: .9;
    }

    .server-list li.active,
    .server-list li.active:hover {
      transform: none;
      border-color: #80dcff;
      background: linear-gradient(120deg, #154763, #12364e);
      box-shadow: 0 0 0 1px rgba(128, 220, 255, .36) inset, 0 0 20px rgba(41, 192, 255, .14);
    }

    .server-list li.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, #9ce8ff, #29c0ff);
      box-shadow: 0 0 12px rgba(41, 192, 255, .35);
    }

    .server-list li::selection,
    .server-list li *::selection {
      background: transparent;
      color: inherit;
    }

    .server-view {
      display: none;
    }

    .server-view.active {
      display: block;
      animation: paneIn .25s ease both;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    #server-view-load {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }

    #metrics {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding-right: 4px;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #4fc2f7 #11283a;
    }

    #metrics::-webkit-scrollbar {
      width: 10px;
    }

    #metrics::-webkit-scrollbar-track {
      background: linear-gradient(180deg, #102334, #0c1c29);
      border-radius: 999px;
      border: 1px solid rgba(88, 145, 177, .16);
    }

    #metrics::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #6fe3ff, #29c0ff);
      border-radius: 999px;
      border: 2px solid #11283a;
      box-shadow: 0 0 10px rgba(41, 192, 255, .18);
    }

    #metrics::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #96ecff, #47cbff);
    }

    #server-view-bash.server-view.active {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    .server-view-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #2f4f67;
    }

    .console-card {
      border: 1px solid #304f69;
      border-radius: 10px;
      background: #07131d;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      max-height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }

    #bash-tab .console-card {
      flex: 1;
      min-height: 0;
    }

    .console-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 14px 16px 10px;
      flex: 0 0 auto;
    }

    .console-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .console-header .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .console-shell-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #9ecde3;
      border: 1px solid #2e5878;
      background: #0f2738;
      border-radius: 8px;
      padding: 6px 10px;
      height: 38px;
      min-height: 38px;
    }

    .console-shell-wrap span {
      white-space: nowrap;
      opacity: 0.92;
    }

    .console-shell-wrap select {
      min-width: 126px;
      border: 1px solid #3a6688;
      background: #0a1e2d;
      color: #e8f3ff;
      border-radius: 8px;
      padding: 6px 10px;
      font: inherit;
      outline: none;
    }

    .server-context {
      font-size: 12px;
      color: #9ecde3;
      border: 1px solid #2e5878;
      background: #0f2738;
      border-radius: 8px;
      padding: 6px 10px;
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .server-context.compact {
      margin-bottom: 0;
      padding: 0 10px;
      height: 38px;
      min-height: 38px;
    }

    .server-context-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #console-output {
      border: 1px solid #2d4b64;
      border-radius: 8px;
      margin-top: 8px;
      min-height: 0;
      height: 100%;
      max-height: none;
      flex: 1 1 auto;
      overflow: hidden;
      scroll-behavior: auto;
      padding: 0;
      background: #030a12;
      font-family: Consolas, "Courier New", monospace;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
      scrollbar-width: none;
      scrollbar-color: #59cbff #07131f;
    }

    #console-output .xterm {
      height: 100%;
      padding: 0;
    }

    #console-output .xterm-viewport {
      overflow-y: auto !important;
      scrollbar-width: none;
      scrollbar-color: #59cbff #07131f;
    }

    #console-output .xterm-screen {
      width: 100% !important;
    }

    .hidden-input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

    #metrics:empty::before {
      content: "Выберите сервер, чтобы увидеть нагрузку";
      display: block;
      color: #9fbad2;
      padding: 16px 6px;
    }

    .subtabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 14px 0 12px;
    }

    .subtab-btn,
    .view-btn,
    .tab-btn {
      height: 38px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding-top: 0;
      padding-bottom: 0;
    }

    .subpanes {
      display: grid;
      gap: 10px;
    }

    .subpane {
      display: none;
    }

    .subpane.active {
      display: block;
      animation: paneIn .25s ease both;
    }

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

    .form-grid h4 {
      margin: 0;
      font-size: 16px;
      color: #bde7ff;
    }

    .form-grid label {
      display: grid;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea {
      width: 100%;
      border: 1px solid #355772;
      background: #0c1b28;
      color: var(--text);
      border-radius: 10px;
      padding: 11px 12px;
      font: inherit;
    }

    .form-grid input[type="checkbox"] {
      width: auto;
      margin-right: 8px;
      vertical-align: middle;
      transform: translateY(-1px);
    }

    .form-grid label.inline-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
    }

    .form-grid pre {
      margin: 0;
      border: 1px solid #31526c;
      border-radius: 8px;
      padding: 0;
      background: #0b1824;
      white-space: pre-wrap;
      word-break: break-word;
      color: #d7efff;
    }

.install-result {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.install-note {
  margin: -2px 0 2px;
  color: #9fbad2;
  font-size: 13px;
  line-height: 1.45;
}

    .status {
      min-height: 20px;
      margin: 10px 0 0;
    }

    .status.good,
    .good {
      color: var(--ok);
    }

    .status.bad,
    .bad {
      color: var(--bad);
    }

    .tm-empty {
      color: #9fbad2;
      padding: 16px 6px;
    }

    .tm-main-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .tm-main-title {
      font-size: 34px;
      line-height: 1;
      color: #dcf5ff;
    }

    .tm-main-sub {
      color: #8ec5df;
      font-size: 13px;
      margin-top: 4px;
    }

    .tm-main-value {
      font-size: 36px;
      font-weight: 700;
      color: #dcf5ff;
      line-height: 1;
    }

    .tm-main-meta {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      color: #9fc4da;
      font-size: 13px;
    }

    .tm-mini-grid {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .tm-tile-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }

    .tm-tile-title {
      color: #9ecde3;
      font-size: 13px;
    }

    .tm-tile-value {
      color: #d8f4ff;
      font-size: 15px;
    }

    .tm-tile-chart {
      margin-top: 8px;
      height: 72px;
      border: 1px solid #2f4f67;
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(41, 192, 255, .07), rgba(41, 192, 255, .02));
    }

    .tm-tile-chart svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .tm-tile-desc {
      margin-top: 8px;
      color: #9fc4da;
      font-size: 12px;
      min-height: 30px;
    }

    .tm-grid-lines line {
      stroke: rgba(255, 255, 255, 0.12);
      stroke-width: 1;
    }

    .tm-main.tm-layout {
      border: 0;
      padding: 0;
      background: transparent;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 10px;
    }

    .tm-content-card {
      border: 1px solid #31526c;
      border-radius: 10px;
      padding: 12px;
      background: linear-gradient(180deg, #112739, #0f2131);
    }

    .tm-nav-item[disabled] {
      opacity: .45;
      cursor: not-allowed;
      transform: none !important;
    }

    .tm-main-top,
    .tm-main-sub,
    .tm-main-value,
    .tm-main-meta,
    .tm-tile-title,
    .tm-tile-value,
    .tm-tile-desc {
      color: #d8f4ff;
    }

    .tm-main-sub {
      color: #9ecde3;
    }

    .tm-main-meta {
      color: #9fc4da;
    }

    @media (max-width: 1180px) {
      .servers-layout {
        grid-template-columns: 1fr;
      }

      .tm-main.tm-layout {
        grid-template-columns: 1fr;
      }

      .server-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .server-timeline-item {
        grid-template-columns: 1fr;
      }

      .app {
        height: auto;
        min-height: calc(100vh - 28px);
      }

      .pane-card,
      .server-list-card,
      .server-main-card {
        min-height: 0;
      }

      .tabs-main {
        flex-wrap: wrap;
      }
    }


@media (max-width: 1180px) {
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto;
  }

  body {
    display: block;
    min-height: 100vh;
    padding: 8px;
  }

  .app {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .pane,
  #servers-tab.tab-pane.active,
  #bash-tab.tab-pane.active,
  .pane-card,
  .server-main-card {
    overflow: visible;
  }
}




@media (max-width: 1180px) {
  #bash-tab.tab-pane.active {
    height: auto;
    min-height: 60vh;
  }
}



.server-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.server-primary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #eaf6ff;
}

.server-drag {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  border: 1px solid rgba(128, 220, 255, .18);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.server-subline {
  margin-top: 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.server-subline .muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.server-stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.server-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  color: #bce7fb;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(141, 194, 220, .14);
}

.dedik-os-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #ff705f;
  background: linear-gradient(135deg, rgba(255,93,80,.2), rgba(255,140,74,.12));
  color: #ffd8d1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255,93,80,.15) inset;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.server-dead .server-subline {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.server-dead .dead-meta {
  width: 100%;
}

.server-dead .dedik-os-badge {
  align-self: flex-start;
}

.server-dead .server-subline .muted {
  width: 100%;
}

.dedik-os-badge.large {
  font-size: 12px;
  padding: 6px 12px;
}

.dedik-os-panel {
  margin-top: 14px;
  border: 1px solid #5d3a3a;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(58,22,22,.86), rgba(44,18,18,.92));
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.dedik-os-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dedik-os-panel-copy {
  color: #ffd9d0;
  font-size: 13px;
  line-height: 1.45;
}

.dedik-os-link {
  border: 0;
  background: transparent;
  color: #ffe5de;
  font: inherit;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.dedik-os-link:hover {
  color: #ffffff;
}

.dedik-os-link:focus-visible {
  outline: 2px solid rgba(255, 112, 95, .65);
  outline-offset: 4px;
  border-radius: 6px;
}

.dedik-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
}

.dedik-modal.hidden {
  display: none;
}

.dedik-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 18, .72);
  backdrop-filter: blur(8px);
}

.dedik-modal-card {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  border: 1px solid #5a3b38;
  border-radius: 18px;
  background: linear-gradient(160deg, #1c2735, #141d28);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: 22px;
  display: grid;
  gap: 14px;
  color: #f0f6ff;
  z-index: 1;
}

.dedik-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #4a5d76;
  background: rgba(255,255,255,.04);
  color: #e8f4ff;
  font-size: 22px;
  cursor: pointer;
}

.dedik-modal-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ff705f;
  background: linear-gradient(135deg, rgba(255,93,80,.24), rgba(255,140,74,.16));
  color: #ffd8d1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dedik-modal-card h3 {
  margin: 0;
  font-size: 28px;
}

.dedik-modal-lead {
  margin: 0;
  color: #c6d7ea;
  line-height: 1.55;
}

.dedik-modal-actions {
  display: flex;
  justify-content: flex-start;
}

.dedik-modal-toggle {
  border: 1px solid #3b5874;
  background: rgba(16, 32, 48, .78);
  color: #d8ebff;
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.dedik-modal-toggle:hover {
  border-color: #66c6ff;
  background: rgba(25, 55, 79, .92);
  transform: translateY(-1px);
}

.dedik-stage-list {
  display: grid;
  gap: 10px;
}

.dedik-stage-item {
  border: 1px solid #304860;
  border-radius: 12px;
  background: rgba(11, 26, 39, .7);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

.dedik-stage-item.active {
  border-color: #ff705f;
  background: linear-gradient(140deg, rgba(75, 24, 24, .55), rgba(31, 19, 26, .7));
  box-shadow: 0 0 0 1px rgba(255,112,95,.2) inset;
}

.dedik-stage-item strong {
  font-size: 13px;
  letter-spacing: .08em;
  color: #fff3ef;
}

.dedik-stage-item span {
  color: #b9cbe0;
  font-size: 13px;
  line-height: 1.45;
}