/* ================================================================
   Website Analyzer v3 – style.css
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.psc-wrap {
    --psc-black:   #0d0d0d;
    --psc-white:   #ffffff;
    --psc-bg:      #f6f6f6;
    --psc-border:  #e4e4e4;
    --psc-muted:   #888;
    --psc-good:    #16a34a;
    --psc-avg:     #d97706;
    --psc-poor:    #dc2626;
    --psc-good-bg: #f0fdf4;
    --psc-avg-bg:  #fffbeb;
    --psc-poor-bg: #fef2f2;

    max-width: 820px;
    margin: 40px auto;
    font-family: 'Syne', sans-serif;
    color: var(--psc-black);
    box-sizing: border-box;
}
.psc-wrap *, .psc-wrap *::before, .psc-wrap *::after { box-sizing: border-box; }

/* ── Panel ── */
.psc-panel {
    background: var(--psc-white);
    border: 1px solid var(--psc-border);
    border-radius: 20px;
    padding: 36px;
    animation: psc-fadein .35s ease;
}

/* ── Header ── */
.psc-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 28px;
}
.psc-header-icon {
    width: 50px; height: 50px; flex-shrink: 0;
    background: var(--psc-black); color: #fff;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
}
.psc-title   { font-size: 1.6rem; font-weight: 800; margin: 0 0 3px; letter-spacing: -.4px; line-height: 1; }
.psc-subtitle{ font-size: .875rem; color: var(--psc-muted); margin: 0; font-weight: 400; }

/* ── Error ── */
.psc-error {
    display: flex; align-items: center; gap: 8px;
    background: #fff0f0; border: 1px solid #fcc;
    color: #c00; padding: 11px 16px;
    border-radius: 10px; font-size: .85rem; margin-bottom: 20px;
}

/* ── Form layout ── */
.psc-form  { display: flex; flex-direction: column; gap: 18px; }
.psc-row   { display: flex; gap: 16px; }
.psc-row-2 > .psc-field { flex: 1; min-width: 0; }
.psc-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.psc-label {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: #444;
    white-space: nowrap;
}
.psc-req { color: var(--psc-poor); }

/* ── Inputs ── */
.psc-input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--psc-border);
    border-radius: 10px;
    font-size: .925rem; font-family: inherit;
    background: var(--psc-bg); color: var(--psc-black);
    outline: none; transition: border-color .2s, background .2s;
}
.psc-input:focus { border-color: var(--psc-black); background: var(--psc-white); }
.psc-input::placeholder { color: #bbb; }

.psc-input-icon-wrap { position: relative; }
.psc-icon-left {
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--psc-muted); display: flex; align-items: center;
    pointer-events: none;
}
.psc-input-padded { padding-left: 38px; }

/* ── Select — fixed overflow ── */
.psc-select-wrap { position: relative; width: 100%; }
.psc-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1.5px solid var(--psc-border);
    border-radius: 10px;
    font-size: .925rem; font-family: inherit;
    background: var(--psc-bg); color: var(--psc-black);
    appearance: none; -webkit-appearance: none;
    outline: none; cursor: pointer;
    transition: border-color .2s;
    /* Prevent text overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-height: 46px;
    line-height: 1.4;
}
.psc-select:focus { border-color: var(--psc-black); background: var(--psc-white); }
.psc-select-caret {
    position: absolute; right: 13px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none; color: var(--psc-muted);
    display: flex; align-items: center;
}

/* ── Device toggle ── */
.psc-device-toggle { display: flex; gap: 8px; }
.psc-device-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 10px;
    border: 1.5px solid var(--psc-border);
    background: var(--psc-bg); border-radius: 10px;
    font-family: inherit; font-size: .875rem; font-weight: 600;
    color: var(--psc-muted); cursor: pointer; transition: all .2s;
    white-space: nowrap;
}
.psc-device-btn:hover { border-color: #aaa; color: var(--psc-black); }
.psc-device-btn.active { background: var(--psc-black); border-color: var(--psc-black); color: #fff; }

/* ── Submit button ── */
.psc-btn-submit {
    width: 100%; padding: 15px;
    background: var(--psc-black); color: #fff;
    border: none; border-radius: 12px;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .2s, transform .1s; margin-top: 4px;
}
.psc-btn-submit:hover   { background: #2a2a2a; }
.psc-btn-submit:active  { transform: scale(.98); }
.psc-btn-submit:disabled{ background: #aaa; cursor: not-allowed; transform: none; }
.psc-privacy { text-align: center; font-size: .78rem; color: var(--psc-muted); margin: 4px 0 0; }

/* ── Spinner ── */
.psc-spin { animation: psc-rotate .8s linear infinite; }
@keyframes psc-rotate { to { transform: rotate(360deg); } }
.psc-btn-spinner { display: flex; align-items: center; gap: 8px; }

/* ══ RESULTS ══ */

/* Top bar */
.psc-results-topbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 20px;
    padding-bottom: 20px; border-bottom: 1px solid var(--psc-border);
    flex-wrap: wrap;
}
.psc-result-url-badge {
    display: flex; align-items: center; gap: 7px;
    background: var(--psc-bg); padding: 8px 14px;
    border-radius: 8px; font-family: 'DM Mono', monospace;
    font-size: .8rem; color: var(--psc-muted);
    border: 1px solid var(--psc-border);
    max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.psc-topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.psc-btn-secondary {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border: 1.5px solid var(--psc-border); background: var(--psc-white);
    border-radius: 9px; font-family: inherit; font-size: .85rem; font-weight: 700;
    color: var(--psc-black); cursor: pointer; transition: background .2s; white-space: nowrap;
}
.psc-btn-secondary:hover { background: var(--psc-bg); }
.psc-btn-pdf {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border: 1.5px solid var(--psc-black); background: var(--psc-black);
    border-radius: 9px; font-family: inherit; font-size: .85rem; font-weight: 700;
    color: #fff; cursor: pointer; transition: background .2s; white-space: nowrap;
}
.psc-btn-pdf:hover { background: #333; border-color: #333; }

/* Active category bar */
.psc-active-cat-bar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
}
.psc-active-cat-badge {
    background: var(--psc-black); color: #fff;
    padding: 6px 16px; border-radius: 20px;
    font-size: .85rem; font-weight: 700; letter-spacing: .2px;
}
.psc-strategy-badge {
    background: var(--psc-bg); color: var(--psc-muted);
    border: 1px solid var(--psc-border);
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 5px 12px; border-radius: 20px;
}

/* Score ring */
.psc-score-row {
    display: flex; align-items: center; gap: 36px;
    padding: 24px; background: var(--psc-bg);
    border-radius: 16px; margin-bottom: 28px;
    border: 1px solid var(--psc-border);
}
.psc-score-ring-wrap { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.psc-ring-svg { width: 130px; height: 130px; display: block; }
.psc-ring-bg   { stroke: var(--psc-border); }
.psc-ring-fill { stroke: #22c55e; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .3s; }
.psc-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.psc-score-num { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.psc-score-sub { font-size: .7rem; color: var(--psc-muted); margin-top: 2px; font-family: 'DM Mono', monospace; }
.psc-score-meta { display: flex; flex-direction: column; gap: 14px; }
.psc-legend     { display: flex; flex-direction: column; gap: 7px; }
.psc-leg        { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: #555; font-weight: 600; }
.psc-dot        { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.psc-good       { background: #22c55e; }
.psc-avg        { background: #f59e0b; }
.psc-poor       { background: #ef4444; }
.psc-email-note { font-size: .78rem; color: var(--psc-muted); margin: 0; font-style: italic; }

/* Section title */
.psc-section-title {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--psc-muted); margin: 0 0 14px;
}

/* Metrics grid */
.psc-metrics-section { margin-bottom: 28px; }
.psc-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.psc-metric-card {
    background: var(--psc-white); border: 1px solid var(--psc-border);
    border-radius: 12px; padding: 16px 14px 12px;
    position: relative; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.psc-metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.psc-metric-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--psc-border); border-radius: 12px 12px 0 0; transition: background .3s;
}
.psc-metric-card.m-good .psc-metric-bar { background: #22c55e; }
.psc-metric-card.m-avg  .psc-metric-bar { background: #f59e0b; }
.psc-metric-card.m-poor .psc-metric-bar { background: #ef4444; }
.psc-metric-val  { font-family: 'DM Mono', monospace; font-size: 1.2rem; font-weight: 500; margin-bottom: 5px; }
.psc-metric-card.m-good .psc-metric-val { color: var(--psc-good); }
.psc-metric-card.m-avg  .psc-metric-val { color: var(--psc-avg); }
.psc-metric-card.m-poor .psc-metric-val { color: var(--psc-poor); }
.psc-metric-lbl  { font-size: .7rem; color: #666; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.psc-metric-abbr { font-family: 'DM Mono', monospace; font-size: .65rem; color: #bbb; }

/* Audit summary pills */
.psc-audit-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.psc-summary-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px;
    font-size: .78rem; font-weight: 700;
}
.psc-pill-pass { background: var(--psc-good-bg); color: var(--psc-good); }
.psc-pill-avg  { background: var(--psc-avg-bg);  color: var(--psc-avg); }
.psc-pill-fail { background: var(--psc-poor-bg); color: var(--psc-poor); }
.psc-pill-info { background: #f0f4ff; color: #3b5bdb; }

/* Audit list */
.psc-audits-section { margin-bottom: 24px; }
.psc-audit-list     { display: flex; flex-direction: column; gap: 7px; }
.psc-audit-item { border: 1px solid var(--psc-border); border-radius: 12px; overflow: hidden; }
.psc-audit-item:hover { border-color: #ccc; }
.psc-audit-head {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px; cursor: pointer;
    background: var(--psc-white); transition: background .15s;
}
.psc-audit-head:hover { background: var(--psc-bg); }
.psc-audit-status {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .7rem;
}
.psc-status-pass { background: var(--psc-good-bg); color: var(--psc-good); }
.psc-status-avg  { background: var(--psc-avg-bg);  color: var(--psc-avg); }
.psc-status-fail { background: var(--psc-poor-bg); color: var(--psc-poor); }
.psc-status-info { background: #f0f4ff; color: #3b5bdb; }
.psc-audit-title { flex: 1; font-size: .875rem; font-weight: 600; }
.psc-audit-value { font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--psc-muted); white-space: nowrap; }
.psc-audit-arrow { color: var(--psc-muted); transition: transform .25s; flex-shrink: 0; }
.psc-audit-item.open .psc-audit-arrow { transform: rotate(180deg); }
.psc-audit-body {
    display: none; padding: 12px 16px 14px 49px;
    background: var(--psc-bg); font-size: .83rem; line-height: 1.65; color: #555;
    border-top: 1px solid var(--psc-border);
}
.psc-audit-item.open .psc-audit-body { display: block; }

.psc-powered { text-align: center; font-size: .73rem; color: #bbb; margin: 0; }

/* ── Animations ── */
@keyframes psc-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PDF print template ── */
.psc-pdf-template {
    font-family: 'Syne', Arial, sans-serif;
    color: #0d0d0d;
    padding: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .psc-panel { padding: 20px 16px; }
    .psc-row-2 { flex-direction: column; gap: 14px; }
    .psc-metrics-grid { grid-template-columns: 1fr 1fr; }
    .psc-score-row { flex-direction: column; align-items: center; gap: 20px; }
    .psc-results-topbar { flex-direction: column; align-items: flex-start; }
    .psc-topbar-actions { width: 100%; }
    .psc-btn-pdf, .psc-btn-secondary { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════
   PDF PRINT STYLES
   ═══════════════════════════════════ */
@media print {
    body * { visibility: hidden; }
    #psc-pdf-template, #psc-pdf-template * { visibility: visible; }
    #psc-pdf-template {
        position: fixed; top: 0; left: 0;
        width: 100%; background: white;
        padding: 30px; font-size: 12pt;
    }
}