.cp-tool {
  --cp-tool-navy: #0a0f18;
  --cp-tool-blue: #075dcc;
  --cp-tool-blue-dark: #003b8f;
  --cp-tool-orange: #ff5a1f;
  --cp-tool-cyan: #16bffd;
  --cp-tool-green: #0f9f85;
  --cp-tool-gray: #e6ebf0;
  margin: 26px 0;
  color: #152033;
}

.cp-tool :focus-visible {
  outline: 3px solid var(--cp-tool-cyan);
  outline-offset: 3px;
}

.cp-checker {
  position: relative;
  overflow: hidden;
  border: 1px solid #d7e2eb;
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 64px rgba(7,35,58,.12);
}
.cp-checker::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg,var(--cp-tool-orange),var(--cp-tool-cyan),var(--cp-tool-blue)); }

.cp-checker-form { padding: clamp(22px,4vw,38px); }
.cp-field-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.cp-field-grid label { display: block; color: var(--cp-tool-navy); font-weight: 800; }
.cp-field-grid label span { display: block; margin-bottom: 7px; font-size: .83rem; }
.cp-field-grid select {
  width: 100%; min-height: 49px; padding: 10px 38px 10px 13px;
  border: 1px solid #c5d2de; border-radius: 12px; color: #243246; background: #fbfdff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cp-field-grid select:hover { border-color: #6da3d7; background: #fff; }
.cp-field-grid select:focus { outline: 0; border-color: var(--cp-tool-cyan); box-shadow: 0 0 0 4px rgba(22,191,253,.16); }
.cp-tool-button {
  min-height: 50px; margin-top: 22px; padding: 11px 22px;
  border: 0; border-radius: 999px; color: #fff; background: linear-gradient(110deg,var(--cp-tool-blue),var(--cp-tool-blue-dark));
  box-shadow: 0 11px 25px rgba(7,93,204,.27); font-weight: 850; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.cp-tool-button:hover { background: linear-gradient(110deg,#0b70e0,var(--cp-tool-blue-dark)); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(7,93,204,.36); }
.cp-tool-button:disabled { opacity: .58; cursor: not-allowed; transform: none; box-shadow: none; }
.cp-result { min-height: 88px; padding: 24px clamp(22px,4vw,38px); border-top: 1px solid #dce5ed; background: linear-gradient(135deg,#eef6ff,#f8fbfd); transition: background .25s ease; }
.cp-result.is-visible { animation: cp-tool-result-in .4s ease both; }
.cp-result-status { display: inline-flex; padding: 6px 11px; border-radius: 999px; font-size: .82rem; }
.cp-status-compatible { color: #125b39; background: #dff5e9; }
.cp-status-conditional { color: #744b06; background: #fff0c9; }
.cp-status-not_verified, .cp-status-incompatible { color: #762d2d; background: #fee3e3; }
.cp-verified { margin-left: 8px; color: #5a6980; font-size: .78rem; }
.cp-tool-disclaimer { margin: 0; padding: 15px clamp(22px,4vw,38px); color: #5a6980; border-top: 1px solid #dfe6ec; background: #fff; font-size: .8rem; }

.cp-chart-wrap { overflow-x: auto; }
.cp-chart { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
.cp-chart caption { padding: 14px; color: var(--cp-tool-navy); font-weight: 800; text-align: left; }
.cp-chart th, .cp-chart td { padding: 13px 14px; border: 1px solid #dbe3ea; text-align: left; vertical-align: top; }
.cp-chart th { color: #fff; background: linear-gradient(110deg,var(--cp-tool-navy),#0b4978); }
.cp-chart tr:nth-child(even) td { background: #f7f9fb; }
.cp-badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: .76rem; font-weight: 800; }

.cp-related-guides { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 25px 0; }
.cp-related-guides article { position: relative; overflow: hidden; padding: 20px; border: 1px solid #d8e3eb; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(7,35,58,.07); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cp-related-guides article::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--cp-tool-orange),var(--cp-tool-cyan)); }
.cp-related-guides article:hover, .cp-related-guides article:focus-within { border-color: rgba(7,93,204,.38); transform: translateY(-5px); box-shadow: 0 20px 38px rgba(7,35,58,.14); }
.cp-related-guides span { color: #68778a; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.cp-related-guides h3 { margin: 8px 0; font-size: 1.1rem; line-height: 1.3; }
.cp-related-guides h3 a { color: var(--cp-tool-navy); text-decoration: none; }
.cp-related-guides p { margin: 0; color: #506179; font-size: .88rem; }
.cp-empty-guides { padding: 22px; border: 1px dashed #b8c5d0; border-radius: 13px; background: #fff; }

@keyframes cp-tool-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
  .cp-field-grid, .cp-related-guides { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-tool, .cp-tool *, .cp-tool *::before, .cp-tool *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}