/* ============================================================
   文澜书阁 · 后台安全中心
   ============================================================ */

.sec-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 26px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(120deg, #f3f9f6, #ffffff 62%);
    overflow: hidden;
}

.sec-hero::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ring-c, var(--brand));
}

.grade-ok { --ring-c: #2f6b5e; }
.grade-warn { --ring-c: #e08a2e; }
.grade-risk { --ring-c: #c0392b; }

.sec-score {
    display: flex;
    align-items: center;
    gap: 22px;
}

.sec-score .ring {
    position: relative;
    flex: none;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ring-c, var(--brand)) calc(var(--p, 0) * 1%), #e7efec 0);
}

.sec-score .ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #fff;
}

.sec-score .ring .val {
    position: relative;
    z-index: 1;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--ring-c, var(--brand));
}

.sec-score .ring .unit {
    position: relative;
    z-index: 1;
    margin-top: -30px;
    margin-left: 2px;
    font-size: 12px;
    color: var(--ink-3);
}

.sec-score .grade strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.sec-score .grade p {
    margin: 0;
    max-width: 660px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-3);
}

.sec-hero-ops {
    display: flex;
    gap: 10px;
}

.sec-flags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-flags .flag {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
}

.sec-flags .dot {
    flex: none;
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warn);
}

.sec-flags .flag.lv-3 .dot { background: var(--danger); }
.sec-flags .flag.lv-0 .dot { background: var(--brand); }

.sec-flags b {
    white-space: nowrap;
    font-weight: 600;
    color: #22322c;
}

.sec-flags em {
    flex: 1;
    font-style: normal;
    color: var(--ink-3);
}

/* ----------------------------- 攻击趋势 ----------------------------- */

.sec-trend {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 186px;
}

.sec-trend .col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
}

.sec-trend .n {
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.sec-trend .stem {
    width: 100%;
    max-width: 36px;
    min-height: 3px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #e2826f, #c0392b);
}

.sec-trend .lb {
    font-size: 12px;
    color: var(--ink-3);
}

/* ----------------------------- 类型分布 ----------------------------- */

.sec-bars .row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    font-size: 13px;
}

.sec-bars .row:last-child { margin-bottom: 0; }

.sec-bars .nm {
    width: 112px;
    flex: none;
    color: var(--ink-2);
}

.sec-bars .track {
    flex: 1;
    height: 8px;
    border-radius: 6px;
    background: #eef3f1;
    overflow: hidden;
}

.sec-bars .track i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #4f9c88, #2f6b5e);
}

.sec-bars .ct {
    width: 46px;
    flex: none;
    text-align: right;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------- 通用补充 ----------------------------- */

.card-head .ops {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-head .muted {
    font-size: 12.5px;
    color: var(--ink-3);
}

.btn-ghost.active {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.mini {
    max-width: 420px;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-3);
    word-break: break-all;
}

.ua-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.link {
    color: var(--brand);
    text-decoration: none;
}

.link:hover { text-decoration: underline; }

.sec-note p {
    margin: 0 0 11px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.sec-note p:last-child { margin-bottom: 0; }

.sec-note b { color: #22322c; }

/* ----------------------------- 登录页验证码 ----------------------------- */

.captcha-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-line .input {
    flex: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.captcha-img {
    flex: none;
    width: 128px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f7faf8;
    cursor: pointer;
    object-fit: cover;
}

.captcha-img:hover { border-color: var(--brand); }

.login-security-tip {
    margin-top: 16px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--brand-soft);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--brand);
    text-align: center;
}