:root {
  --tt-primary-50: #efeaf9;
  --tt-primary-100: #dfd5f3;
  --tt-primary-200: #cfc1ed;
  --tt-primary-300: #9e82da;
  --tt-primary-400: #7e59ce;
  --tt-primary-500: #5e2fc2;
  --tt-primary-600: #4b269b;
  --tt-primary-700: #381c74;
  --tt-primary-800: #26134e;
  --tt-primary-900: #130927;
  --tt-primary-950: #090513;
  --tt-primary-500-alpha-12: rgba(94, 47, 194, 0.12);
  --tt-primary-500-alpha-24: rgba(94, 47, 194, 0.24);
  --tt-primary-2-50: #f5fdea;
  --tt-primary-2-100: #ebfbd5;
  --tt-primary-2-200: #e1fac0;
  --tt-primary-2-300: #c2f481;
  --tt-primary-2-400: #aef157;
  --tt-primary-2-500: #9aed2d;
  --tt-primary-2-600: #7bbe24;
  --tt-primary-2-700: #5c8e1b;
  --tt-primary-2-800: #1f2f09;
  --tt-primary-2-900: #0f1805;
  --tt-primary-2-950: #0e2b09;
  --tt-primary-2-500-alpha-12: rgba(154, 237, 45, .12);
  --tt-primary-2-alpha-20: rgba(154, 237, 45, .2);
  --tt-primary-2-500-alpha-24: rgba(154, 237, 45, .24);
  --tt-secondary-50: #f9f3ff;
  --tt-secondary-100: #f3e7ff;
  --tt-secondary-200: #ecdaff;
  --tt-secondary-300: #dab6ff;
  --tt-secondary-400: #cd9dff;
  --tt-secondary-500: #c185ff;
  --tt-secondary-600: #a16ad9;
  --tt-secondary-700: #8150b4;
  --tt-secondary-800: #61358e;
  --tt-secondary-900: #411b69;
  --tt-secondary-950: #310d56;
  --tt-secondary-2-50: #fff4f0;
  --tt-secondary-2-100: #ffe7dd;
  --tt-secondary-2-200: #ffc0a6;
  --tt-secondary-2-300: #ff9e77;
  --tt-secondary-2-400: #fe7955;
  --tt-secondary-2-500: #fe572a;
  --tt-secondary-2-600: #dc4407;
  --tt-secondary-2-700: #af371a;
  --tt-secondary-2-800: #812812;
  --tt-secondary-2-900: #41180e;
  --tt-secondary-2-950: #1a0b08;
  --tt-gray-50: #f9f9fa;
  --tt-gray-100: #f2f2f4;
  --tt-gray-200: #ebecf0;
  --tt-gray-300: #dddfe4;
  --tt-gray-400: #c3c6cc;
  --tt-gray-500: #afb3bb;
  --tt-gray-600: #8c929c;
  --tt-gray-700: #5b616d;
  --tt-gray-800: #414651;
  --tt-gray-900: #222732;
  --tt-gray-950: #0a0c11;
  --tt-vanilla-gray-200: #F5F3EF;
  --tt-dark-50: #f8f8f8;
  --tt-dark-100: #f4f4f4;
  --tt-dark-200: #eeeeee;
  --tt-dark-300: #e1e1e1;
  --tt-dark-400: #c7c7c7;
  --tt-dark-500: #7d7d7d;
  --tt-dark-600: #2d2a2a;
  --tt-dark-700: #1f1d1d;
  --tt-dark-800: #161414;
  --tt-dark-900: #110f0f;
  --tt-dark-950: #070404;
  --tt-white-1: rgba(255, 255, 255, 0.01);
  --tt-white-3: rgba(255, 255, 255, 0.03);
  --tt-white-6: rgba(255, 255, 255, 0.06);
  --tt-white-7: rgba(255, 255, 255, 0.07);
  --tt-white-9: rgba(255, 255, 255, 0.07);
  --tt-white-12: rgba(255, 255, 255, 0.12);
  --tt-white-32: rgba(255, 255, 255, 0.32);
  --tt-white-48: rgba(255, 255, 255, 0.48);
  --tt-white-56: rgba(255, 255, 255, 0.56);
  --tt-white-72: rgba(255, 255, 255, 0.72);
  --tt-white-88: rgba(255, 255, 255, 0.88);
  --tt-white-100: #ffffff;
  --tt-black-3: rgba(15, 11, 11, 0.03);
  --tt-black-9: rgba(15, 11, 11, 0.09);
  --tt-black-12: rgba(15, 11, 11, 0.12);
  --tt-black-32: rgba(15, 11, 11, 0.32);
  --tt-black-56: rgba(15, 11, 11, 0.56);
  --tt-black-72: rgba(15, 11, 11, 0.72);
  --tt-black-100: #0f0b0b;
  --tt-info-50: #fef4fd;
  --tt-info-100: #fde9fb;
  --tt-info-200: #fcdefa;
  --tt-info-300: #fbd3f8;
  --tt-info-400: #f6a6f1;
  --tt-info-500: #f490ed;
  --tt-info-600: #cf74c9;
  --tt-info-700: #863d81;
  --tt-info-800: #742f6f;
  --tt-info-900: #4f144b;
  --tt-info-950: #3d0639;
  --tt-info-500-alpha-12: rgba(244, 144, 237, .12);
  --tt-info-500-alpha-20: rgba(244, 144, 237, .20);
  --tt-success-50: #f9fdeb;
  --tt-success-100: #f2fbd7;
  --tt-success-200: #ecf9c3;
  --tt-success-300: #e5f7af;
  --tt-success-400: #d9f287;
  --tt-success-500: #bfea37;
  --tt-success-600: #99bb2c;
  --tt-success-700: #738c21;
  --tt-success-800: #4c5e16;
  --tt-success-900: #394611;
  --tt-success-950: #262f0b;
  --tt-success-500-alpha-12: rgba(191, 234, 55, 0.12);
  --tt-success-500-alpha-24: rgba(191, 234, 55, 0.24);
  --tt-warning-50: #fff8e6;
  --tt-warning-100: #fef2cd;
  --tt-warning-200: #fee59a;
  --tt-warning-300: #fdd868;
  --tt-warning-400: #fdcb35;
  --tt-warning-500: #fcbf04;
  --tt-warning-600: #ca9802;
  --tt-warning-700: #977202;
  --tt-warning-800: #654c01;
  --tt-warning-900: #4a3902;
  --tt-warning-950: #2d2000;
  --tt-warning-500-alpha-12: rgba(252, 191, 4, .12);
  --tt-danger-50: #feecec;
  --tt-danger-100: #fcd9d9;
  --tt-danger-200: #f9b3b3;
  --tt-danger-300: #f68989;
  --tt-danger-400: #f36363;
  --tt-danger-500: #f03d3d;
  --tt-danger-600: #e92020;
  --tt-danger-700: #a60d0d;
  --tt-danger-800: #720909;
  --tt-danger-900: #4a0606;
  --tt-danger-950: #240000;
  --tt-danger-500-alpha-12: rgba(240, 61, 61, 0.02);
  --tt-danger-500-alpha-24: rgba(240, 61, 61, 0.24);
  --tt-vkColor: #0077ff;
  --tt-linear-primary: linear-gradient(43deg, var(--tt-secondary-500) 32.94%, var(--tt-primary-400) 57.86%, var(--tt-primary-500) 81.8%);
  --tt-type-heading-5-p-size: 52px;
  --tt-type-heading-5-p-line: 64px;
  --tt-type-heading-4-p-size: 40px;
  --tt-type-heading-4-p-line: 48px;
  --tt-type-heading-3-p-size: 32px;
  --tt-type-heading-3-p-line: 40px;
  --tt-type-heading-2-p-size: 24px;
  --tt-type-heading-2-p-line: 32px;
  --tt-type-heading-2-p-m-size: 24px;
  --tt-type-heading-2-p-m-line: 32px;
  --tt-type-heading-1-p-b-size: 22px;
  --tt-type-heading-1-p-b-line: 32px;
  --tt-type-heading-1-s-size: 22px;
  --tt-type-heading-1-s-line: 32px;
  --tt-type-heading-1-s-sb-size: 22px;
  --tt-type-heading-1-s-sb-line: 32px;
  --tt-type-heading-1-s-b-size: 22px;
  --tt-type-heading-1-s-b-line: 32px;
  --tt-type-title-1-s-size: 15px;
  --tt-type-title-1-s-line: 24px;
  --tt-type-title-1-s-m-size: 15px;
  --tt-type-title-1-s-m-line: 24px;
  --tt-type-title-1-s-b-size: 15px;
  --tt-type-title-1-s-b-line: 24px;
  --tt-type-title-1-s-sb-size: 15px;
  --tt-type-title-1-s-sb-line: 24px;
  --tt-type-title-2-s-size: 18px;
  --tt-type-title-2-s-line: 24px;
  --tt-type-title-2-s-b-size: 18px;
  --tt-type-title-2-s-b-line: 24px;
  --tt-type-title-2-s-m-size: 18px;
  --tt-type-title-2-s-m-line: 24px;
  --tt-type-title-2-s-sb-size: 18px;
  --tt-type-title-2-s-sb-line: 24px;
  --tt-type-body-2-s-size: 15px;
  --tt-type-body-2-s-line: 20px;
  --tt-type-body-2-s-m-size: 15px;
  --tt-type-body-2-s-m-line: 20px;
  --tt-type-body-2-s-b-size: 15px;
  --tt-type-body-2-s-b-line: 20px;
  --tt-type-body-1-s-size: 13px;
  --tt-type-body-1-s-line: 24px;
  --tt-type-body-1-s-m-size: 13px;
  --tt-type-body-1-s-m-line: 24px;
  --tt-type-body-1-s-sb-size: 13px;
  --tt-type-body-1-s-sb-line: 24px;
  --tt-type-body-1-s-b-size: 13px;
  --tt-type-body-1-s-b-line: 24px;
  --tt-type-caption-2-s-size: 12px;
  --tt-type-caption-2-s-line: 16px;
  --tt-type-caption-2-s-m-size: 12px;
  --tt-type-caption-2-s-m-line: 16px;
  --tt-type-caption-2-s-sb-size: 12px;
  --tt-type-caption-2-s-sb-line: 16px;
  --tt-type-caption-2-s-b-size: 12px;
  --tt-type-caption-2-s-b-line: 16px;
  --tt-type-caption-1-s-size: 11px;
  --tt-type-caption-1-s-line: 16px;
  --tt-type-caption-1-s-m-size: 11px;
  --tt-type-caption-1-s-m-line: 16px;
  --tt-type-caption-1-sb-size: 11px;
  --tt-type-caption-1-sb-line: 16px;
  --tt-type-caption-1-s-b-size: 11px;
  --tt-type-caption-1-s-b-line: 16px;
  --tt-type-para-s-size: 13px;
  --tt-type-para-s-line: 20px;
  --tt-type-para-s-sb-size: 13px;
  --tt-type-para-s-sb-line: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--tt-dark-950);
  color: var(--tt-white-100);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--tt-type-body-2-s-size);
  line-height: var(--tt-type-body-2-s-line);
}
.card {
  width: 100%;
  max-width: 440px;
  padding: 32px;
  border-radius: 16px;
  background: var(--tt-dark-800);
  box-shadow: 0 0 0 1px var(--tt-white-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--tt-vanilla-gray-200);
  font-size: var(--tt-type-title-1-s-size);
  line-height: var(--tt-type-title-1-s-line);
  font-weight: 600;
}
.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tt-linear-primary);
}
h1 {
  margin: 0 0 12px;
  font-size: var(--tt-type-heading-2-p-size);
  line-height: var(--tt-type-heading-2-p-line);
  font-weight: 700;
}
p { margin: 0 0 16px; color: var(--tt-white-72); }
.muted { color: var(--tt-white-48); font-size: var(--tt-type-caption-2-s-size); line-height: var(--tt-type-caption-2-s-line); }
.notice {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--tt-danger-500-alpha-24);
  color: var(--tt-white-100);
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
form { margin: 0; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:focus-visible { outline: 3px solid var(--tt-primary-500-alpha-24); outline-offset: 0; }
.button-primary { color: var(--tt-white-100); background: var(--tt-linear-primary); }
.button-primary:hover { background: var(--tt-primary-400); }
.button-secondary { color: var(--tt-vanilla-gray-200); background: var(--tt-dark-700); }
.button-secondary:hover { color: var(--tt-white-100); background: var(--tt-dark-600); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; }
dt { color: var(--tt-white-48); }
dd { margin: 0; word-break: break-all; }
.card-wide { max-width: 1200px; }
.card-medium { max-width: 760px; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.filters .actions { grid-column: 1 / -1; margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 4px; color: var(--tt-white-48); font-size: var(--tt-type-caption-2-s-size); line-height: var(--tt-type-caption-2-s-line); }
.field input, .field select {
  height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--tt-dark-700);
  color: var(--tt-white-100);
  font: inherit;
  font-size: var(--tt-type-body-2-s-size);
  color-scheme: dark;
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--tt-primary-500-alpha-24); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--tt-type-caption-2-s-size); line-height: var(--tt-type-caption-2-s-line); }
th, td { padding: 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tt-white-6); }
th { color: var(--tt-white-48); font-weight: 600; white-space: nowrap; }
td code { color: var(--tt-white-72); word-break: break-all; }
.tag { color: var(--tt-white-48); }
.outcome { white-space: nowrap; }
.outcome-ok { color: var(--tt-white-72); }
.outcome-error, .outcome-upstream_error { color: var(--tt-danger-400); }
.outcome-rate_limited { color: var(--tt-info-400); }
h2 {
  margin: 24px 0 12px;
  font-size: var(--tt-type-title-1-s-size);
  line-height: var(--tt-type-title-1-s-line);
  font-weight: 700;
}
.plugin { margin: 24px 0; padding-top: 8px; border-top: 1px solid var(--tt-white-6); }
.servers { margin: 0 0 16px; padding-left: 20px; }
.servers li { margin-bottom: 8px; }
details { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: var(--tt-dark-700); }
summary { cursor: pointer; font-weight: 600; }
details ol { margin: 12px 0; padding-left: 20px; }
details li { margin-bottom: 6px; color: var(--tt-white-72); }
code { padding: 1px 6px; border-radius: 6px; background: var(--tt-dark-950); color: var(--tt-white-88); font-size: var(--tt-type-caption-2-s-size); overflow-wrap: anywhere; }
