/* =====================================================
   SERP Title & Meta Checker – Public Styles
   Version: 1.0.0
   ===================================================== */

/* ── CSS CUSTOM PROPERTIES (Skin: Modern) ── */
.stmc-wrapper {
    --stmc-bg:          #ffffff;
    --stmc-surface:     #f8fafc;
    --stmc-border:      #e2e8f0;
    --stmc-text:        #1e293b;
    --stmc-text-muted:  #64748b;
    --stmc-accent:      #3b82f6;
    --stmc-ok:          #10b981;
    --stmc-warn:        #f59e0b;
    --stmc-over:        #ef4444;
    --stmc-radius:      12px;
    --stmc-shadow:      0 4px 24px rgba(0,0,0,.07);
    --stmc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-family:  var(--stmc-font);
    background:   var(--stmc-bg);
    border:       1px solid var(--stmc-border);
    border-radius:var(--stmc-radius);
    box-shadow:   var(--stmc-shadow);
    padding:      28px;
    max-width:    680px;
    margin:       24px auto;
    color:        var(--stmc-text);
    box-sizing:   border-box;
}

/* ── SKIN: MINIMAL ── */
.stmc-skin-minimal {
    --stmc-bg:        #fafafa;
    --stmc-surface:   #f3f4f6;
    --stmc-border:    #d1d5db;
    --stmc-accent:    #111827;
    --stmc-radius:    4px;
    --stmc-shadow:    none;
    border-width:     2px;
}

/* ── SKIN: DARK ── */
.stmc-skin-dark {
    --stmc-bg:         #0f172a;
    --stmc-surface:    #1e293b;
    --stmc-border:     #334155;
    --stmc-text:       #f1f5f9;
    --stmc-text-muted: #94a3b8;
    --stmc-accent:     #38bdf8;
    --stmc-ok:         #34d399;
    --stmc-warn:       #fbbf24;
    --stmc-over:       #f87171;
    --stmc-shadow:     0 4px 32px rgba(0,0,0,.4);
}

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.stmc-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--stmc-border);
}

.stmc-header-icon {
    font-size:    2rem;
    line-height:  1;
}

.stmc-title {
    font-size:   1.25rem;
    font-weight: 700;
    margin:      0 0 2px;
    color:       var(--stmc-text);
}

.stmc-subtitle {
    font-size:  0.82rem;
    color:      var(--stmc-text-muted);
    margin:     0;
}

/* ─────────────────────────────────────────────
   SECTIONS
───────────────────────────────────────────── */
.stmc-section {
    margin-bottom: 24px;
}

.stmc-label {
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    font-size:      0.85rem;
    font-weight:    600;
    color:          var(--stmc-text);
    margin-bottom:  8px;
}

.stmc-counter {
    font-size:   0.78rem;
    font-weight: 400;
    color:       var(--stmc-text-muted);
    background:  var(--stmc-surface);
    padding:     2px 8px;
    border-radius: 99px;
    border:      1px solid var(--stmc-border);
}

/* ─────────────────────────────────────────────
   TEXTAREA INPUT
───────────────────────────────────────────── */
.stmc-input {
    width:          100%;
    padding:        12px 14px;
    border:         1.5px solid var(--stmc-border);
    border-radius:  var(--stmc-radius);
    background:     var(--stmc-surface);
    color:          var(--stmc-text);
    font-family:    var(--stmc-font);
    font-size:      0.92rem;
    line-height:    1.5;
    resize:         vertical;
    transition:     border-color .2s, box-shadow .2s;
    box-sizing:     border-box;
}

.stmc-input:focus {
    outline:      none;
    border-color: var(--stmc-accent);
    box-shadow:   0 0 0 3px rgba(59,130,246,.15);
}

.stmc-skin-dark .stmc-input:focus {
    box-shadow: 0 0 0 3px rgba(56,189,248,.2);
}

/* ─────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────── */
.stmc-bar-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  8px;
}

.stmc-bar-track {
    flex:           1;
    height:         8px;
    background:     var(--stmc-surface);
    border-radius:  99px;
    border:         1px solid var(--stmc-border);
    overflow:       hidden;
}

.stmc-bar-fill {
    height:        100%;
    width:         0%;
    border-radius: 99px;
    background:    var(--stmc-ok);
    transition:    width .3s cubic-bezier(.4,0,.2,1), background .3s;
}

.stmc-bar-fill.stmc-bar-warn { background: var(--stmc-warn); }
.stmc-bar-fill.stmc-bar-over { background: var(--stmc-over); }

.stmc-bar-label {
    font-size:  0.75rem;
    color:      var(--stmc-text-muted);
    white-space: nowrap;
    min-width:  120px;
}

/* ─────────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────────── */
.stmc-status-row {
    margin-top: 8px;
}

.stmc-badge {
    display:       inline-block;
    font-size:     0.75rem;
    font-weight:   600;
    padding:       4px 10px;
    border-radius: 99px;
    border:        1px solid transparent;
    transition:    all .2s;
}

.stmc-badge-ok {
    background: rgba(16, 185, 129, .12);
    color:      #059669;
    border-color: rgba(16,185,129,.3);
}
.stmc-badge-warn {
    background: rgba(245, 158, 11, .12);
    color:      #d97706;
    border-color: rgba(245,158,11,.3);
}
.stmc-badge-over {
    background: rgba(239, 68, 68, .12);
    color:      #dc2626;
    border-color: rgba(239,68,68,.3);
}

/* dark skin badge overrides */
.stmc-skin-dark .stmc-badge-ok   { color: #34d399; }
.stmc-skin-dark .stmc-badge-warn { color: #fbbf24; }
.stmc-skin-dark .stmc-badge-over { color: #f87171; }

/* ─────────────────────────────────────────────
   SERP PREVIEW
───────────────────────────────────────────── */
.stmc-serp-preview {
    background:    var(--stmc-surface);
    border:        1px solid var(--stmc-border);
    border-radius: var(--stmc-radius);
    padding:       16px 18px;
    display:       flex;
    gap:           12px;
    align-items:   flex-start;
}

.stmc-serp-favicon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.stmc-serp-meta {
    flex: 1;
    min-width: 0;
}

.stmc-serp-domain {
    font-size:   0.75rem;
    color:       var(--stmc-text-muted);
    margin-bottom: 2px;
}

.stmc-serp-title-preview {
    font-size:     1.05rem;
    font-weight:   400;
    color:         #1a0dab;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    cursor:        default;
    line-height:   1.3;
    margin-bottom: 4px;
    max-width:     600px;
}

.stmc-skin-dark .stmc-serp-title-preview {
    color: #93c5fd;
}

.stmc-serp-desc-preview {
    font-size:   0.82rem;
    color:       var(--stmc-text-muted);
    line-height: 1.5;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Judul Over → warna merah di preview ── */
.stmc-preview-title-over {
    color: #dc2626 !important;
}

/* ─────────────────────────────────────────────
   FOOTER TOMBOL
───────────────────────────────────────────── */
.stmc-footer {
    display:        flex;
    gap:            10px;
    padding-top:    18px;
    border-top:     1px solid var(--stmc-border);
    margin-top:     4px;
}

.stmc-btn-reset,
.stmc-btn-copy {
    padding:       9px 20px;
    border-radius: var(--stmc-radius);
    font-size:     0.83rem;
    font-weight:   600;
    cursor:        pointer;
    border:        1.5px solid var(--stmc-border);
    transition:    all .2s;
    font-family:   var(--stmc-font);
}

.stmc-btn-reset {
    background: var(--stmc-surface);
    color:      var(--stmc-text-muted);
}
.stmc-btn-reset:hover {
    background:   var(--stmc-border);
    color:        var(--stmc-text);
}

.stmc-btn-copy {
    background:   var(--stmc-accent);
    color:        #fff;
    border-color: var(--stmc-accent);
}
.stmc-btn-copy:hover {
    filter: brightness(1.1);
}

.stmc-btn-copy.stmc-copied {
    background: var(--stmc-ok);
    border-color: var(--stmc-ok);
}

/* ── Mobile responsif ── */
@media (max-width: 480px) {
    .stmc-wrapper {
        padding: 18px 16px;
    }
    .stmc-header {
        gap: 10px;
    }
    .stmc-title {
        font-size: 1.05rem;
    }
    .stmc-bar-label {
        display: none;
    }
    .stmc-serp-title-preview {
        font-size: 0.95rem;
    }
}