/* =============================
   Variables
============================= */
:root {
    --bg:         #f5f7fa;
    --bg-panel:   #ffffff;
    --border:     #e2e6ed;
    --text:       #1e2330;
    --text-muted: #6b7280;
    --mono:       'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --radius:     10px;
    --shadow:     0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
    --transition: .22s ease;
}

/* =============================
   Base
============================= */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: .95rem;
    min-height: 100vh;
}

/* =============================
   Header
============================= */
.site-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}

/* =============================
   Panel (raw UA + parsed JSON)
============================= */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
}

.panel-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .65rem;
}

.ua-raw-string {
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.7;
    color: var(--text);
    word-break: break-all;
}

.parsed-json {
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 0;
    overflow-x: auto;
    max-height: 280px;
    overflow-y: auto;
}

.btn-copy {
    font-size: .72rem;
    color: var(--text);
    background: rgba(37,99,235,.07);
    border: 1px solid rgba(37,99,235,.22);
    border-radius: 5px;
    padding: 3px 12px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-copy:hover {
    background: rgba(37,99,235,.15);
}

/* =============================
   Info Cards
============================= */
.info-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1rem .85rem;
    box-shadow: var(--shadow);
    height: 100%;
    transition: transform var(--transition), box-shadow var(--transition);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

.card-icon {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: .5rem;
    line-height: 1;
}

.text-purple { color: #7c3aed !important; }
.text-sky    { color: #0284c7 !important; }
.text-orange { color: #ea580c !important; }
.text-pink   { color: #db2777 !important; }
.text-green  { color: #16a34a !important; }
.text-yellow { color: #ca8a04 !important; }
.text-teal   { color: #0d9488 !important; }

.card-label {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.card-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-sub {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================
   Animations
============================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    animation: fadeUp .4s ease forwards;
}

/* =============================
   Responsive
============================= */
@media (max-width: 576px) {
    .card-value { font-size: .95rem; }
    .detail-table td:first-child { width: 42%; }
    .parsed-json { max-height: 200px; }
}