/* Backlink Maker - Dark theme styling */
:root {
    --bm-bg: #0b0b0c;
    --bm-card: #0f1113;
    --bm-muted: #9aa4ad;
    --bm-accent: #28a5ff;
    --bm-success: #29cf7a;
    --bm-fail: #ff5c63;
    --bm-border: rgba(255,255,255,0.04);
}

body .bm-card {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.bm-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
    color: #e8eef2;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    padding: 20px;
    max-width: 920px;
    margin: 18px auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    background-color: var(--bm-card);
}

/* title */
.bm-title {
    margin: 0 0 12px 0;
    font-size: 20px;
    display:flex;
    gap:10px;
    align-items:center;
}

/* form */
.bm-form .bm-label {
    display:block;
    margin-bottom:8px;
    color:var(--bm-muted);
    font-size:13px;
}

.bm-input-row {
    display:flex;
    gap:8px;
    align-items:center;
}

#bm-url {
    flex:1;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--bm-border);
    background: rgba(255,255,255,0.02);
    color: #e7eef3;
    outline: none;
}

#bm-url::placeholder { color: #6f7b82; }

.bm-btn {
    background: linear-gradient(90deg, rgba(40,165,255,0.12), rgba(40,165,255,0.06));
    color: var(--bm-accent);
    border: 1px solid rgba(40,165,255,0.12);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    display:inline-flex;
    gap:8px;
    align-items:center;
}
.bm-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(40,165,255,0.06); }

.bm-btn-secondary {
    background: transparent;
    border:1px solid rgba(255,255,255,0.04);
    color: var(--bm-muted);
}

.bm-btn-tertiary {
    background: transparent;
    border:1px dashed rgba(255,255,255,0.03);
    color: #b9c2c8;
}

/* loader */
.hidden { display: none; }

.bm-loader { margin-top:14px; display:flex; gap:14px; align-items:center; }
.bm-spinner {
    width:28px; height:28px; border-radius:50%;
    border:3px solid rgba(255,255,255,0.06);
    border-top-color: var(--bm-accent);
    animation: bm-spin 1s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

.bm-progress-wrap {
    flex:1;
    height:10px;
    background: rgba(255,255,255,0.02);
    border-radius:8px;
    overflow:hidden;
}
.bm-progress-bar {
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--bm-accent), #6be0ff);
    transition: width 300ms ease;
    border-radius:8px;
}
.bm-progress-text { font-size:13px; color: var(--bm-muted); }

/* results */
.bm-results { margin-top:16px; }

.bm-results-controls { display:flex; gap:8px; margin-bottom:10px; }

.bm-table-wrap {
    overflow:auto;
    border:1px solid var(--bm-border);
    border-radius:8px;
    background: rgba(255,255,255,0.01);
}
.bm-table { width:100%; border-collapse:collapse; min-width:600px; }
.bm-table th, .bm-table td {
    padding:10px 12px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.02);
    font-size:14px;
    color:#dfe9ee;
}
.bm-table thead th {
    color: var(--bm-muted);
    font-weight:600;
    font-size:13px;
}

.bm-badge {
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:12px;
}
.bm-badge-success { background: rgba(41,207,122,0.12); color: var(--bm-success); border: 1px solid rgba(41,207,122,0.06); }
.bm-badge-fail { background: rgba(255,92,99,0.08); color: var(--bm-fail); border: 1px solid rgba(255,92,99,0.06); }

/* errors */
.bm-error-msg { margin-top:8px; color:#ffb3b6; display:none; }
.bm-error { color:#ffb3b6; display:inline-flex; gap:8px; align-items:center; }

/* small screens */
@media (max-width:640px){
    .bm-input-row { flex-direction:column; align-items:stretch; }
    .bm-btn { width:100%; justify-content:center; }
}