/* ============================================================
   Tools Shared CSS — Loaded for ALL layouts
   btn, tool-input-group, wt-*, wc-*, spinners etc
   ============================================================ */

/* ── CSS Base Vars (fallback if layout doesn't define them) ── */
:root {
    --color-primary:    #0057FF;
    --color-primary-dk: #0041CC;
    --color-accent:     #00C2A8;
    --color-bg:         #F4F7FF;
    --color-surface:    #FFFFFF;
    --color-border:     #E0E8FF;
    --color-text:       #1A1F36;
    --color-muted:      #6B7280;
    --radius-sm:        6px;
    --transition:       0.22s ease;
    --shadow-md:        0 4px 16px rgba(0,87,255,0.12);
    --font-body:        'Segoe UI', system-ui, sans-serif;
    --font-mono:        'JetBrains Mono', monospace;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 15px; cursor: pointer;
    border: 2px solid transparent; transition: all var(--transition);
    white-space: nowrap; text-decoration: none; font-family: var(--font-body);
}
.btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.btn-primary:hover { background:var(--color-primary-dk); border-color:var(--color-primary-dk); color:#fff; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-outline  { background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline:hover  { background:var(--color-primary); color:#fff; }
.btn-accent   { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn-accent:hover   { background:var(--color-primary-dk); color:#fff; transform:translateY(-1px); }
.btn-sm  { padding:7px 16px; font-size:13px; }
.btn-lg  { padding:14px 32px; font-size:17px; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
    width:20px; height:20px;
    border:2px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin 0.7s linear infinite;
    display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Tool Input Group ────────────────────────────────────── */
.tool-input-group { margin-bottom:20px; }
.tool-input-group label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--color-text); }
.tool-input-group textarea,
.tool-input-group input,
.tool-input-group select {
    width:100%; padding:12px 16px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    font-size:15px; background:var(--color-bg); color:var(--color-text);
    transition:border-color var(--transition),box-shadow var(--transition);
    outline:none; font-family:var(--font-body);
}
.tool-input-group textarea:focus,
.tool-input-group input:focus,
.tool-input-group select:focus {
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(0,87,255,0.1);
    background:#fff;
}
.tool-input-group textarea { resize:vertical; min-height:120px; }

/* ── Tool Result Box ─────────────────────────────────────── */
.tool-result-box {
    background:var(--color-bg); border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm); padding:20px; margin-top:20px;
}
.tool-result-box h4 {
    font-size:13px; font-weight:700; color:var(--color-muted);
    text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;
}

/* ── wt-* Website/SEO Tool Classes ──────────────────────── */
.wt-url-row { display:flex; gap:12px; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; }
.wt-url-input { font-size:15px; }
.wt-check-btn { flex-shrink:0; }

.wt-loading {
    display:flex; align-items:center; gap:14px;
    padding:20px 24px; background:rgba(0,87,255,.05);
    border:1.5px solid var(--color-border); border-radius:12px;
    margin-top:20px; font-size:14px; font-weight:600; color:var(--color-muted);
}
.wt-spinner {
    width:24px; height:24px; border:3px solid var(--color-border);
    border-top-color:var(--color-primary); border-radius:50%;
    animation:spin .7s linear infinite; flex-shrink:0;
}

.wt-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; }
.wt-card-header { padding:12px 18px; background:var(--color-bg); border-bottom:1px solid var(--color-border); font-size:13px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.06em; }
.wt-card-body  { padding:16px 18px; }
.wt-card-full  { grid-column:1/-1; }

.wt-info-row { display:flex; align-items:baseline; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--color-border); font-size:13px; gap:12px; }
.wt-info-row:last-child { border-bottom:none; }
.wt-info-row span   { color:var(--color-muted); flex-shrink:0; }
.wt-info-row strong { font-weight:700; word-break:break-all; text-align:right; }
.wt-info-row a      { color:var(--color-primary); font-weight:600; word-break:break-all; }

.wt-signal { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.wt-signal:last-child { border-bottom:none; }
.wt-sig-ok   { color:var(--color-text); }
.wt-sig-warn { color:#F59E0B; }
.wt-sig-err  { color:#EF4444; }
.wt-sig-na   { color:var(--color-muted); }

.wt-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:50px; font-size:12px; font-weight:700; }
.wt-badge-ok   { background:#d1fae5; color:#065f46; }
.wt-badge-warn { background:#fef3c7; color:#92400e; }
.wt-badge-err  { background:#fee2e2; color:#991b1b; }
.wt-badge-info { background:#dbeafe; color:#1e40af; }

.wt-score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.wt-score-box  { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:16px; text-align:center; }
.wt-score-num  { font-size:28px; font-weight:800; line-height:1; }
.wt-score-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-top:5px; }

.wt-muted { font-size:13px; color:var(--color-muted); font-style:italic; }
.wt-tag {
    display:inline-block; padding:3px 10px; border-radius:50px;
    font-size:12px; font-weight:700; margin:2px;
    background:rgba(0,87,255,.08); color:var(--color-primary);
    border:1px solid rgba(0,87,255,.15);
}
.wt-plugin-item { padding:7px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.wt-plugin-item:last-child { border-bottom:none; }

.wt-table { width:100%; border-collapse:collapse; font-size:13px; }
.wt-table th { background:var(--color-bg); padding:9px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); border-bottom:1px solid var(--color-border); }
.wt-table td { padding:9px 12px; border-bottom:1px solid var(--color-border); vertical-align:top; word-break:break-word; }
.wt-table tr:last-child td { border-bottom:none; }
.wt-table tr:hover td { background:var(--color-bg); }

.wt-confidence-bar { width:100%; max-width:280px; height:8px; background:var(--color-border); border-radius:50px; overflow:hidden; margin:8px auto 0; }
.wt-confidence-bar > div { height:100%; border-radius:50px; transition:width .6s ease; }

.wt-heading-h1 { font-size:15px; color:#0057FF; font-weight:700; }
.wt-heading-h2 { font-size:14px; color:#10B981; font-weight:600; padding-left:16px; }
.wt-heading-h3 { font-size:13px; color:#8B5CF6; font-weight:600; padding-left:32px; }
.wt-heading-h4 { font-size:12px; color:#F59E0B; font-weight:600; padding-left:48px; }
.wt-heading-h5,.wt-heading-h6 { font-size:12px; color:var(--color-muted); padding-left:64px; }

/* ── Word Counter ───────────────────────────────────────── */
.wc-stat-box { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:14px; text-align:center; }

/* ── Filter Buttons ─────────────────────────────────────── */
.dns-filter,.iac-filter-btn {
    padding:6px 14px; border:1.5px solid var(--color-border);
    border-radius:50px; font-size:12px; font-weight:700;
    cursor:pointer; background:var(--color-surface);
    color:var(--color-muted); transition:.15s;
}
.dns-filter:hover,.iac-filter-btn:hover,
.dns-filter.active,.iac-filter-btn.active {
    background:var(--color-primary); color:#fff; border-color:var(--color-primary);
}

/* ── Copy / Result Buttons ──────────────────────────────── */
.tool-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.copy-btn {
    padding:8px 16px; background:var(--color-primary); color:#fff;
    border:none; border-radius:var(--radius-sm); font-size:13px;
    font-weight:700; cursor:pointer; transition:.15s;
}
.copy-btn:hover { background:var(--color-primary-dk); }

/* ── Notices ────────────────────────────────────────────── */
.tool-notice { padding:12px 16px; border-radius:var(--radius-sm); margin:12px 0; font-size:14px; font-weight:500; }
.tool-notice-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.tool-notice-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.tool-notice-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:768px){
    .wt-score-grid { grid-template-columns:1fr 1fr; }
    .wt-url-row { flex-direction:column; }
    .wt-check-btn { width:100%; justify-content:center; }
    .btn-lg { padding:11px 20px; font-size:15px; }
}