*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { min-height: 100%; background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', system-ui, sans-serif; }
    body { padding: 32px 40px; }

    nav a { display: inline-flex; align-items: center; gap: 7px; color: #60a5fa; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: #0a1220; border: 1px solid #2563eb44; border-radius: 8px; padding: 6px 14px; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
    nav a:hover { background: #0f1d38; border-color: #60a5fa; transform: translateX(-2px); }

    h2 { margin: 24px 0 20px; font-size: 1.4rem; color: #60a5fa; letter-spacing: 1px; }

    .cards { display: flex; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }

    .card {
      background: #161b22;
      border: 1px solid #2563eb44;
      border-radius: 14px;
      padding: 18px 22px;
      flex: 1;
      min-width: 260px;
    }
    .card h3 { font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: #8b949e; margin-bottom: 14px; }

    .card label { font-size: 0.78rem; color: #8b949e; display: block; margin-bottom: 4px; letter-spacing: 0.5px; }
    .input-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 4px; }
    .input-row input { background: #0d1117; border: 1px solid #2563eb55; border-radius: 8px; color: #e6edf3; padding: 7px 10px; font-size: 0.9rem; outline: none; transition: border-color 0.15s; flex: 1; }
    .input-row input:focus { border-color: #2563eb; }
    .input-row input.port { width: 90px; flex: none; }

    .action-btn {
      padding: 7px 18px;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: filter 0.15s, transform 0.1s;
      border: 2px solid;
    }
    .action-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
    .action-btn:active { transform: scale(0.97); }
    .btn-blue  { background: #0d1f38; color: #60a5fa; border-color: #2563eb; }
    .btn-red   { background: #3d0f0f; color: #ff6b6b; border-color: #ff4444; }

    .status-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding: 10px 16px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      font-size: 0.82rem;
      color: #8b949e;
    }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 6px #3fb950; }

    .log-box {
      background: #0d1117;
      border: 1px solid #2563eb33;
      border-radius: 14px;
      padding: 0;
      overflow: hidden;
    }
    .log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid #21262d;
      background: #161b22;
    }
    .log-header span { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: #8b949e; }
    .log-search { background: #0d1117; border: 1px solid #2563eb55; border-radius: 8px; color: #e6edf3; padding: 5px 10px; font-size: 0.8rem; font-family: 'Consolas', monospace; outline: none; transition: border-color 0.15s; flex: 1; max-width: 320px; margin: 0 16px; }
    .log-search:focus { border-color: #2563eb; }

    ul#message-list {
      list-style: none;
      padding: 12px 0;
      margin: 0;
      max-height: 460px;
      overflow-y: auto;
    }
    ul#message-list::-webkit-scrollbar { width: 6px; }
    ul#message-list::-webkit-scrollbar-track { background: #0d1117; }
    ul#message-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

    ul#message-list li {
      padding: 6px 18px;
      font-size: 0.8rem;
      font-family: 'Consolas', monospace;
      border-bottom: 1px solid #21262d11;
      word-break: break-all;
      color: #c9d1d9;
    }
    ul#message-list li:last-child { border-bottom: none; }
    .ts { color: #2563eb; margin-right: 8px; }
    .sender-ip { color: #d29922; margin-right: 8px; }
    .ip-val { display: inline-block; width: 16ch; }
    .copy-btn {
      margin-right: 8px;
      padding: 1px 8px;
      font-size: 0.7rem;
      font-family: inherit;
      color: #c9d1d9;
      background: #21262d;
      border: 1px solid #30363d;
      border-radius: 4px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, transform 0.1s;
    }
    .copy-btn:hover { background: #30363d; }
    .copy-btn:active { transform: scale(0.85); }
    .copy-btn.copied { color: #3fb950; border-color: #3fb950; }
    .copy-btn.copied i { animation: copy-pop 0.3s ease; }
    @keyframes copy-pop {
      0%   { transform: scale(0.6); }
      50%  { transform: scale(1.4); }
      100% { transform: scale(1); }
    }
    .msg-fwd  { color: #3fb950; }
    .msg-fail { color: #ff6b6b; }

    .xml-btn {
      margin-right: 8px;
      padding: 1px 8px;
      font-size: 0.7rem;
      color: #c9d1d9;
      background: #21262d;
      border: 1px solid #30363d;
      border-radius: 4px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, transform 0.1s;
    }
    .xml-btn:hover { background: #30363d; color: #60a5fa; border-color: #2563eb; }
    .xml-btn:active { transform: scale(0.85); }

    .xml-preview {
      position: fixed;
      top: 0;
      right: 0;
      width: 1040px;
      max-width: 90vw;
      height: 100%;
      background: #0d1117;
      border-left: 1px solid #2563eb44;
      box-shadow: -8px 0 24px #00000066;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      z-index: 100;
    }
    .xml-preview.open { transform: translateX(0); }
    .xml-preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid #21262d;
      background: #161b22;
    }
    .xml-preview-header span { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: #8b949e; }
    .xml-close {
      background: none;
      border: none;
      color: #8b949e;
      font-size: 1rem;
      cursor: pointer;
      padding: 2px 6px;
      transition: color 0.15s;
    }
    .xml-close:hover { color: #ff6b6b; }
    #xml-content {
      flex: 1;
      overflow-y: auto;
      margin: 0;
      padding: 16px 18px;
      font-family: 'Consolas', monospace;
      font-size: 0.8rem;
      line-height: 1.5;
      color: #c9d1d9;
      white-space: pre;
    }
    #xml-content::-webkit-scrollbar { width: 6px; }
    #xml-content::-webkit-scrollbar-track { background: #0d1117; }
    #xml-content::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }