/* Styles for the free tools (/tr/araclar) and the subscription price table. Loaded after /landing.css. */
[hidden] { display: none !important; }
.tool { margin: 26px 0; padding: 24px; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; }
.tool h2 { margin-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; }
.field .optional { color: #64748b; font-weight: 600; }
.field input, .field select { min-height: 48px; width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #0f172a; font: inherit; font-size: 16px; }
.field input:focus-visible, .field select:focus-visible, .sort-button:focus-visible, .check input:focus-visible, .tool .button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.hint { margin: 0; color: #64748b; font-size: 14px; line-height: 1.55; }
.tool .button { margin-top: 18px; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.tool .button.secondary { border: 1px solid #c7d2fe; }
.tool-error { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fef2f2; color: #991b1b; font-weight: 700; }
.tool-result { margin: 0 0 26px; padding: 24px; border: 2px solid #4f46e5; border-radius: 22px; background: #fff; }
.tool-result-title { margin: 0 0 8px; font-size: 20px; }
.tool-status { margin: 0 0 14px; font-size: 20px; font-weight: 900; }
.tool-status.ok { color: #047857; }
.tool-status.warn { color: #b45309; }
.tool-status.ended { color: #b91c1c; }
.tool-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.tool-dl div { padding: 14px; border-radius: 14px; background: #eef2ff; }
.tool-dl dt { color: #475569; font-size: 13px; font-weight: 800; }
.tool-dl dd { margin: 4px 0 0; font-size: 18px; font-weight: 900; }
.tool-actions { justify-content: flex-start; margin-top: 6px; }
.tool-actions .button { margin-top: 12px; }
.tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 10px; }
.tool-cards .card h2 { margin-top: 0; font-size: 20px; }
.table-scroll { overflow-x: auto; margin: 22px 0; }
.article .price-table { display: table; margin: 0; width: 100%; min-width: 720px; font-size: 14px; }
.price-table td:nth-child(4) { min-width: 170px; }
.price-table td:last-child { min-width: 190px; }
.price-table caption { padding: 0 0 10px; color: #475569; font-size: 14px; font-weight: 700; text-align: left; }
.price-table th[scope="row"] { background: #fff; font-weight: 800; }
.price-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
.price-table .src-kind, .price-table .checked { color: #64748b; font-size: 12px; }
.price-table a { color: #4338ca; }
.sort-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.sort-button::after { content: " ↕"; color: #475569; }
th[aria-sort="ascending"] .sort-button::after { content: " ↑"; color: #4338ca; }
th[aria-sort="descending"] .sort-button::after { content: " ↓"; color: #4338ca; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.check-list fieldset { margin: 0; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 14px; }
.check-list legend { padding: 0 4px; font-weight: 900; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.check input { width: 20px; height: 20px; flex: none; accent-color: #4f46e5; }
.tool-totals { padding: 16px; border-radius: 14px; background: #eef2ff; }
.tool-totals p { margin: 0 0 6px; }
.tool-totals strong { font-size: 20px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .tool, .tool-result { padding: 18px; }
  .tool-grid, .tool-dl, .tool-cards, .check-list { grid-template-columns: 1fr; }
}
.tool-result > .hint { margin-top: 12px; }