/* Browser tools pack (js/tools-pack.js) */

.tl-tool .tp-color-picker { width: 46px; height: 100%; min-height: calc(1.5em + .75rem + 2px); padding: 3px; border: 1px solid var(--ms-line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--ms-card); cursor: pointer; }
.tl-tool .custom-file-label { border-radius: 10px; }
.tl-tool .custom-file-label::after { border-radius: 0 10px 10px 0; }
.tl-tool textarea.tp-code { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .85rem; min-height: 0; }

.tp-label { margin-bottom: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ms-muted); }
.tp-note { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 10px; background: var(--ms-bg-pink); border: 1px solid var(--ms-line); font-size: .88rem; color: var(--ms-text); }
.tp-note.tp-warn { background: rgba(245, 179, 1, .1); border-color: rgba(245, 179, 1, .35); }
.tp-note.tp-pass { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .3); color: var(--ms-green); font-weight: 600; }

/* Big numbers */
.tp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tp-metric { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--ms-line); background: var(--ms-bg-pink); min-width: 0; }
.tp-metric b { font-size: 1.35rem; line-height: 1.2; color: var(--ms-ink); word-break: break-word; }
.tp-metric span { font-size: .8rem; color: var(--ms-muted); }
.tp-metric.tp-pass b { color: var(--ms-green); }
.tp-metric.tp-fail b { color: var(--ms-red); }
.tp-metric.tp-warn b { color: #c98a00; }

.tp-badge { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.tp-badge.tp-pass { background: rgba(22, 163, 74, .12); color: var(--ms-green); }
.tp-badge.tp-fail { background: var(--ms-red-soft); color: var(--ms-red); }
.tp-badge.tp-warn { background: rgba(245, 179, 1, .15); color: #b57c00; }

.tp-hash { word-break: break-all; font-size: .85rem; }
.tp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.tp-chips span { padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--ms-line); background: var(--ms-card); font-size: .82rem; color: var(--ms-text); }
.tp-chips b { color: var(--ms-ink); }
.tp-formula { padding: .75rem 1rem; border-radius: 10px; background: var(--ms-bg-pink); font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; color: var(--ms-ink); word-break: break-word; }
.tp-table { font-size: .88rem; margin-bottom: 0; }
.tp-table th { font-weight: 600; color: var(--ms-muted); border-top: 0; white-space: nowrap; }
.tp-table td, .tp-table th { border-color: var(--ms-line); }

/* SERP preview */
.tp-serp { max-width: 600px; padding: 1rem 1.1rem; border: 1px solid var(--ms-line); border-radius: 12px; background: #fff; font-family: Arial, sans-serif; }
.tp-serp-mobile { max-width: 400px; }
.tp-serp-site { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.tp-serp-site > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tp-serp-favicon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; color: #4d5156; font-size: .8rem; font-weight: 700; }
.tp-serp-name { font-size: 14px; color: #202124; line-height: 20px; }
.tp-serp-url { font-size: 12px; color: #4d5156; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin-bottom: 3px; word-wrap: break-word; }
.tp-serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; word-wrap: break-word; }
.tp-meters { display: grid; gap: 1rem; margin-top: 1.5rem; }
.tp-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .88rem; color: var(--ms-muted); }
.tp-meter-head b { color: var(--ms-ink); }
.tp-meter-track { height: 8px; border-radius: 99px; background: var(--ms-line); overflow: hidden; margin-bottom: .3rem; }
.tp-meter-bar { height: 100%; border-radius: 99px; }
.tp-meter-bar.tp-pass { background: var(--ms-green); }
.tp-meter-bar.tp-fail { background: var(--ms-red); }

/* Open Graph preview */
.tp-og { max-width: 520px; border: 1px solid var(--ms-line); border-radius: 12px; overflow: hidden; background: var(--ms-card); }
.tp-og-image { aspect-ratio: 1.91 / 1; background: var(--ms-line); }
.tp-og-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-og-empty { display: flex; align-items: center; justify-content: center; color: var(--ms-muted); font-size: .9rem; }
.tp-og-body { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; }
.tp-og-body small { color: var(--ms-muted); font-size: .75rem; }
.tp-og-body b { color: var(--ms-ink); }
.tp-og-body span { color: var(--ms-text); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Colors */
.tp-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-swatch { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: 92px; height: 72px; padding: .45rem .55rem; border: 1px solid rgba(0, 0, 0, .06); border-radius: 10px; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; cursor: pointer; text-align: left; }
.tp-swatch small { font-family: inherit; font-weight: 700; opacity: .8; }
.tp-swatch:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 26, 43, .15); }
.tp-contrast { padding: 1.25rem 1.5rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid var(--ms-line); }
.tp-contrast p { margin: 0; }
.tp-contrast-large { font-size: 1.5rem; font-weight: 700; margin-bottom: .4rem !important; }
.tp-preview { height: 200px; margin-bottom: 1.25rem; border-radius: 14px; border: 1px solid var(--ms-line); }
.tp-shadow-stage { display: flex; align-items: center; justify-content: center; height: 240px; margin-bottom: 1.25rem; border-radius: 14px; background: var(--ms-bg-pink); }
.tp-shadow-box { width: 160px; height: 110px; border-radius: 14px; background: #fff; }

/* Images */
.tp-image-preview { display: flex; justify-content: center; margin-bottom: 1.25rem; padding: 1rem; border-radius: 12px; background: repeating-conic-gradient(var(--ms-line) 0 25%, transparent 0 50%) 50% / 20px 20px; }
.tp-image-preview img { max-width: 100%; max-height: 360px; border-radius: 6px; }
.tp-ratio-stage { display: flex; align-items: center; justify-content: center; min-height: 250px; margin-bottom: 1rem; border-radius: 12px; background: var(--ms-bg-pink); }
.tp-ratio-box { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--ms-red); border-radius: 6px; background: var(--ms-red-soft); color: var(--ms-red); font-weight: 700; font-size: .85rem; overflow: hidden; }

/* Regex and diff */
.tp-regex { max-height: 320px; overflow: auto; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--ms-line); white-space: pre-wrap; word-break: break-word; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; color: var(--ms-ink); }
.tp-regex mark { padding: 0 1px; border-radius: 3px; background: rgba(245, 179, 1, .45); color: inherit; }
.tp-regex mark:empty { padding: 0; border-left: 2px solid var(--ms-red); }
.tp-diff { max-height: 600px; overflow: auto; border-radius: 10px; border: 1px solid var(--ms-line); }
.tp-diff table { width: 100%; border-collapse: collapse; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.tp-diff td { padding: .1rem .5rem; vertical-align: top; color: var(--ms-ink); }
.tp-diff td:nth-child(-n+3) { width: 1%; white-space: nowrap; color: var(--ms-muted); text-align: right; user-select: none; }
.tp-diff td:last-child { white-space: pre-wrap; word-break: break-word; }
.tp-diff-add { background: rgba(22, 163, 74, .12); }
.tp-diff-del { background: rgba(239, 43, 75, .1); }
.tp-diff-gap td { text-align: center !important; color: var(--ms-muted); background: var(--ms-bg-pink); }
.tp-diff-words { padding: 1rem; border-radius: 10px; border: 1px solid var(--ms-line); white-space: pre-wrap; word-break: break-word; line-height: 1.7; color: var(--ms-ink); }
.tp-diff-words ins { background: rgba(22, 163, 74, .18); color: var(--ms-green); text-decoration: none; border-radius: 3px; }
.tp-diff-words del { background: rgba(239, 43, 75, .14); color: var(--ms-red); border-radius: 3px; }

/* Markdown preview */
.tp-markdown { max-height: 520px; overflow: auto; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--ms-line); color: var(--ms-ink); }
.tp-markdown > :last-child { margin-bottom: 0; }
.tp-markdown img { max-width: 100%; }
.tp-markdown pre { padding: .75rem 1rem; border-radius: 8px; background: var(--ms-bg-pink); }
.tp-markdown blockquote { padding-left: 1rem; border-left: 3px solid var(--ms-line); color: var(--ms-text); }
.tp-markdown table { border-collapse: collapse; margin-bottom: 1rem; }
.tp-markdown th, .tp-markdown td { padding: .35rem .7rem; border: 1px solid var(--ms-line); }

/* Lists, time zones, thumbnails */
.tp-winners { display: grid; gap: .5rem; padding: 0; margin: 0 0 1.25rem; list-style: none; counter-reset: winner; }
.tp-winners li { counter-increment: winner; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 12px; background: var(--ms-bg-pink); font-weight: 600; color: var(--ms-ink); }
.tp-winners li::before { content: counter(winner); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ms-red); color: #fff; font-size: .85rem; }
.tp-zones { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.tp-zones > div:not(.tp-zones-arrow) { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--ms-line); }
.tp-zones small { color: var(--ms-muted); font-size: .8rem; }
.tp-zones b { color: var(--ms-ink); font-size: 1.05rem; }
.tp-zones .tp-zones-target { background: var(--ms-red-soft); border-color: transparent !important; }
.tp-zones-arrow { color: var(--ms-muted); font-size: .85rem; font-weight: 600; text-align: center; }
.tp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tp-thumb { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border-radius: 12px; border: 1px solid var(--ms-line); }
.tp-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--ms-line); display: block; }
.tp-thumb-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--ms-ink); }
.tp-thumb-meta small { color: var(--ms-muted); }
.tp-thumb-actions { display: flex; gap: .4rem; }
.tp-thumb-actions .btn { margin: 0 !important; }

@media (max-width: 767.98px) {
    .tp-zones { grid-template-columns: 1fr; }
    .tp-swatch { width: calc(33.333% - .3rem); }
}