:root{
    --bg: #0f0f12;
    --card: #17171c;
    --muted: #9aa0a6;
    --text: #e8eaed;
    --accent: #4f8cff;
    --ok: #21c87a;
    --warn: #f7b500;
    --err: #ff6b6b;
    color-scheme: light dark;
}
@media (prefers-color-scheme: light){
    :root{ --bg:#f6f7fb; --card:#ffffff; --text:#1b1b1f; --muted:#5f6368; --accent:#2b66ff;}
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg); color: var(--text);
}
.app-header, .app-footer { text-align:center; padding: 1.25rem 1rem; }
.app-header h1{ margin: 0; font-weight: 800; letter-spacing:.2px;}
.sub{margin:.25rem 0 0; color: var(--muted)}
.container{ max-width:1100px; margin:0 auto; padding: 1rem; }

.card{
    background: var(--card);
    border: 1px solid rgba(128,128,128,.15);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

label{display:block; font-weight:600; margin:.25rem 0 .25rem;}
.row{display:flex; gap:.5rem; align-items:center}
input[type="text"]{
    flex:1; background: transparent; border:1px solid rgba(128,128,128,.3);
    border-radius:12px; padding:.75rem .9rem; color:var(--text); outline:none;
}
button{
    border:0; border-radius:12px; padding:.8rem 1rem; font-weight:700;
    background: var(--accent); color: white; cursor:pointer;
}
button:disabled{ opacity:.6; cursor:not-allowed; }
small{color:var(--muted)}
.checkbox{display:flex; gap:.5rem; align-items:center; font-weight:500}
.options{ display:flex; gap:1rem; margin-top:.75rem; flex-wrap:wrap }
.proxy-block{ margin-top:.75rem; }
.status{ margin: 1rem 0; min-height: 1.25rem; }
.status .ok{ color: var(--ok) }
.status .warn{ color: var(--warn) }
.status .err{ color: var(--err) }

.card h2{ margin-top:0 }
section#results .card div, #links, #images{ font-size:.95rem }
pre.raw{
    max-height: 260px; overflow:auto; background:#0b0b0f; color:#d6d6d6;
    border-radius:10px; padding: .75rem; border:1px solid rgba(128,128,128,.2);
}

.kv{display:grid; grid-template-columns: 180px 1fr; gap:.4rem .75rem; align-items:start}
.kv div.k{color:var(--muted)}
.kv div.v code{background:rgba(128,128,128,.15); padding:.1rem .35rem; border-radius:6px}

.list{display:grid; gap:.4rem}
.list .item{padding:.4rem .55rem; background: rgba(128,128,128,.08); border-radius:8px}
.item .muted{color:var(--muted); font-size:.85em}

.actions{ display:flex; gap:.5rem; justify-content:flex-end; margin: 1rem 0 2rem }
.app-footer{ color: var(--muted); font-size:.95rem }
a{ color: var(--accent); text-decoration: none; }
a:hover{text-decoration: underline;}