/*======================================================
 RESOURCES PAGES (Threat Desk news + Security Toolkit)
======================================================*/

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Dark navy background with a faint grid, matching the home page hero */
.resource-page{
    padding-top:60px;
    min-height:calc(100vh - 80px);
    color:#e3ebf5;
    background:
        radial-gradient(circle at 85% 0%, rgba(0,166,81,.18), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(37,56,204,.25), transparent 45%),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(135deg, #062041 0%, #0b3a75 55%, #062041 100%);
}

/* Topic colours, used by news tabs, stripes and labels */
.topic-all{ --topic:#7fb3ff; }
.topic-vuln{ --topic:#f3722c; }
.topic-breach{ --topic:#e5383b; }
.topic-ransom{ --topic:#9b5de5; }
.topic-threat{ --topic:#2f9bff; }
.topic-policy{ --topic:#14b8a6; }
.topic-industry{ --topic:#8a9bb0; }

.desk-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 14px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:30px;
    background:rgba(255,255,255,.06);
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9fe3bf;
}

.desk-live{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00d26a;
    box-shadow:0 0 0 0 rgba(0,210,106,.6);
    animation:live 2s infinite;
}

@keyframes live{
    70%{ box-shadow:0 0 0 10px rgba(0,210,106,0); }
    100%{ box-shadow:0 0 0 0 rgba(0,210,106,0); }
}

/*======================================================
 THREAT DESK (news)
======================================================*/

.desk-hero{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:40px;
    align-items:end;
    margin-bottom:34px;
}

.desk-hero h1,
.kit-hero h1{
    font-size:42px;
    line-height:1.2;
    color:#fff;
    margin:18px 0 14px;
}

.desk-hero p,
.kit-hero p{
    color:#c9d6e8;
    max-width:640px;
}

.desk-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.desk-stat{
    padding:18px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    text-align:center;
}

.desk-stat strong{
    display:block;
    font-size:22px;
    line-height:1.2;
    color:#fff;
    white-space:nowrap;
}

.desk-stat span{
    font-size:12px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#9fb3cc;
}

/* Feed health strip */

.desk-health{
    padding:18px 20px;
    border-radius:16px;
    background:rgba(3,16,36,.45);
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:22px;
}

.desk-health-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.desk-health h2{
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9fb3cc;
}

.desk-health-key{
    display:flex;
    gap:16px;
    font-size:12px;
    color:#9fb3cc;
}

.desk-health-key > span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.desk-feeds{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.desk-feed{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    font-size:13px;
    color:#e3ebf5;
}

.desk-feed-count{
    font-size:11px;
    font-weight:700;
    color:#9fe3bf;
}

.desk-feed.is-fail{
    color:#7f93ad;
}

.desk-feed.is-fail .desk-feed-name{
    text-decoration:line-through;
}

.desk-feed.is-fail .desk-feed-count{
    color:#ff8a8c;
}

.desk-dot{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#7f93ad;
    flex-shrink:0;
}

.is-ok .desk-dot,
.desk-dot.is-ok{
    background:#00d26a;
    box-shadow:0 0 8px rgba(0,210,106,.7);
}

.is-fail .desk-dot,
.desk-dot.is-fail{
    background:#e5383b;
    box-shadow:0 0 8px rgba(229,56,59,.6);
}

.is-loading .desk-dot{
    animation:pulse 1s ease-in-out infinite;
}

@keyframes pulse{
    50%{ opacity:.3; }
}

/* Toolbar */

.desk-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:18px;
}

.desk-search{
    position:relative;
    flex:1;
    min-width:0;
}

.desk-search i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#7a8899;
    pointer-events:none;
}

.desk-search input,
.desk-select{
    width:100%;
    height:50px;
    padding:0 18px;
    border:none;
    border-radius:12px;
    background:#fff;
    font-family:inherit;
    font-size:15px;
    color:#0b2239;
    outline:none;
}

.desk-search input{
    padding-left:46px;
}

.desk-select{
    width:auto;
    cursor:pointer;
}

.desk-search input:focus,
.desk-select:focus{
    box-shadow:0 0 0 3px rgba(0,210,106,.55);
}

.desk-refresh{
    width:50px;
    height:50px;
    flex-shrink:0;
    border:none;
    border-radius:12px;
    background:#00a651;
    color:#fff;
    font-size:17px;
    cursor:pointer;
    transition:.2s;
}

.desk-refresh:hover{
    background:#08733b;
}

.desk-refresh:disabled{
    opacity:.7;
    cursor:wait;
}

.desk-refresh.is-loading i{
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

/* Topic tabs */

.desk-topics{
    display:flex;
    gap:4px;
    overflow-x:auto;
    border-bottom:1px solid rgba(255,255,255,.15);
    margin-bottom:18px;
    scrollbar-width:none;
}

.desk-topics::-webkit-scrollbar{
    display:none;
}

.desk-topic{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border:none;
    border-bottom:3px solid transparent;
    background:none;
    color:#b5c4d8;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    cursor:pointer;
    transition:.2s;
}

.desk-topic i{
    color:var(--topic);
}

.desk-topic:hover{
    color:#fff;
}

.desk-topic.active{
    color:#fff;
    border-bottom-color:var(--topic);
}

.desk-topic-count{
    min-width:24px;
    padding:1px 7px;
    border-radius:20px;
    background:rgba(255,255,255,.1);
    font-size:11px;
    font-weight:700;
    text-align:center;
}

.desk-notice{
    background:#fff6e5;
    color:#7a5200;
    padding:12px 16px;
    border-radius:10px;
    font-size:14px;
    margin-bottom:14px;
}

.desk-count-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.desk-count{
    font-size:13px;
    color:#9fb3cc;
}

.desk-fresh{
    padding:8px 16px;
    border:none;
    border-radius:30px;
    background:#00a651;
    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 0 0 0 rgba(0,210,106,.6);
    animation:live 2s infinite;
}

.desk-fresh:hover{
    background:#08733b;
}

/* share buttons on story cards (sit above the card-wide link) */

.story-share{
    position:relative;
    z-index:1;
    display:flex;
    gap:6px;
    padding-top:12px;
    border-top:1px solid #edf1f6;
}

.story-share-btn{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:none;
    border-radius:8px;
    background:#f1f5f9;
    color:#33475b;
    font-size:14px;
    cursor:pointer;
    transition:.2s;
}

.story-share-btn:hover{
    background:#0b2239;
    color:#fff;
}

/* actively exploited vulnerabilities */

.kev{
    padding:22px;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(229,56,59,.16), rgba(3,16,36,.45) 60%);
    border:1px solid rgba(229,56,59,.35);
    margin-bottom:24px;
}

.kev[hidden]{
    display:none;
}

.kev-head h2{
    font-size:18px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
}

.kev-head h2 i{
    color:#ff6b6d;
}

.kev-head p{
    font-size:14px;
    color:#c9d6e8;
    margin:4px 0 16px;
}

.kev-list{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px, 1fr);
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin;
}

.kev-loading{
    font-size:14px;
    color:#9fb3cc;
}

.kev-card{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
}

.kev-card.is-ransomware{
    border-color:rgba(229,56,59,.6);
}

.kev-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.kev-id{
    font-family:Consolas,"SFMono-Regular",Menlo,monospace;
    font-size:13px;
    font-weight:700;
    color:#ff9a9b;
}

.kev-badge{
    padding:2px 8px;
    border-radius:6px;
    background:#e5383b;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.kev-product a{
    font-size:15px;
    color:#fff;
}

.kev-product a:hover{
    text-decoration:underline;
}

.kev-name{
    font-size:12px;
    line-height:1.5;
    color:#b5c4d8;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.kev-date{
    margin-top:auto;
    font-size:12px;
    color:#9fb3cc;
}

.kev-status{
    margin-top:10px;
    font-size:12px;
    color:#7f93ad;
}

/* Stories */

.desk-top{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:22px;
    margin-bottom:34px;
}

.desk-top.is-single{
    grid-template-columns:1fr;
}

.story{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:22px;
    border-radius:16px;
    background:#fff;
    color:#33475b;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    overflow:hidden;
    transition:transform .25s, box-shadow .25s;
}

.story::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:4px;
    background:var(--topic);
}

.story:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.story-top{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}

.story-avatar{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex-shrink:0;
    border-radius:8px;
    background:#0b2239;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
}

.story-source{
    font-weight:600;
    color:#0b2239;
}

.story-time{
    margin-left:auto;
    color:#7a8899;
    white-space:nowrap;
}

.story-title{
    font-size:18px;
    line-height:1.4;
}

.story-title a{
    color:#0b2239;
}

/* whole card is clickable through the title link */
.story-title a::after{
    content:"";
    position:absolute;
    inset:0;
}

.story:hover .story-title a{
    color:var(--primary);
}

.story-summary{
    font-size:14px;
    line-height:1.7;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.story-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    margin-top:auto;
    font-size:12px;
}

.story-topic{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    color:#33475b;
}

.story-topic::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:2px;
    background:var(--topic);
}

.story-region{
    color:#7a8899;
}

.story-region::before{
    content:"\00b7";
    margin-right:10px;
}

/* lead story */

.story-lead{
    padding:34px;
    gap:16px;
    background:linear-gradient(160deg, #ffffff 55%, #eef5ff 100%);
}

.story-lead::before{
    top:0;
    bottom:0;
    right:auto;
    width:6px;
    height:auto;
}

.story-flag{
    align-self:flex-start;
    padding:4px 10px;
    border-radius:6px;
    background:var(--topic);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.story-lead .story-title{
    font-size:28px;
    line-height:1.3;
}

.story-lead .story-summary{
    font-size:16px;
    -webkit-line-clamp:5;
}

/* latest headlines column */

.desk-latest{
    padding:22px 22px 10px;
    border-radius:16px;
    background:rgba(3,16,36,.45);
    border:1px solid rgba(255,255,255,.1);
}

.desk-latest h2{
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9fb3cc;
    margin-bottom:6px;
}

.desk-latest ol{
    list-style:none;
}

.desk-latest li{
    position:relative;
    padding:14px 0 14px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.desk-latest li:last-child{
    border-bottom:none;
}

.desk-latest li::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:3px;
    background:var(--topic);
}

.desk-latest-meta{
    display:block;
    font-size:12px;
    color:#9fb3cc;
    margin-bottom:4px;
}

.desk-latest-title a{
    font-size:15px;
    font-weight:500;
    line-height:1.45;
    color:#fff;
}

.desk-latest-title a:hover{
    color:#9fe3bf;
    text-decoration:underline;
}

.desk-section-title{
    font-size:22px;
    color:#fff;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:14px;
}

.desk-section-title::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.15);
}

.desk-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.desk-empty{
    padding:50px 20px;
    border-radius:16px;
    border:1px dashed rgba(255,255,255,.25);
    text-align:center;
    color:#c9d6e8;
}

.desk-more{
    padding:13px 30px;
    border:2px solid rgba(255,255,255,.6);
    border-radius:40px;
    background:transparent;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.desk-more:hover{
    background:#fff;
    color:#0b2239;
}

/*======================================================
 SECURITY TOOLKIT
======================================================*/

.kit-hero{
    text-align:center;
    max-width:780px;
    margin:0 auto 50px;
}

.kit-hero p{
    margin:0 auto;
}

.kit-promises{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 26px;
    margin-top:22px;
    font-size:14px;
    color:#e3ebf5;
}

.kit-promises i{
    color:#00d26a;
    margin-right:6px;
}

.kit-group{
    margin-bottom:38px;
}

.kit-group-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    color:#fff;
    margin-bottom:16px;
}

.kit-group-title span{
    font-size:13px;
    font-weight:700;
    color:#00d26a;
    letter-spacing:.05em;
}

.kit-group-title::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.15);
}

.kit-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:18px;
}

.kit-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:24px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:rgba(255,255,255,.06);
    color:#e3ebf5;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.kit-card:hover,
.kit-card:focus-visible{
    transform:translateY(-4px);
    background:rgba(255,255,255,.1);
    border-color:#00d26a;
    outline:none;
}

.kit-icon{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    border-radius:14px;
    background:linear-gradient(135deg,#00a651,#0b4ea2);
    color:#fff;
    font-size:20px;
    margin-bottom:6px;
}

.kit-name{
    font-size:17px;
    font-weight:600;
    color:#fff;
}

.kit-desc{
    font-size:14px;
    line-height:1.6;
    color:#b5c4d8;
}

.kit-open{
    margin-top:auto;
    padding-top:8px;
    font-size:13px;
    font-weight:600;
    color:#9fe3bf;
}

.kit-open i{
    transition:transform .2s;
}

.kit-card:hover .kit-open i{
    transform:translateX(4px);
}

/* tool window */

.kit-dialog{
    width:min(860px, calc(100% - 32px));
    max-height:calc(100dvh - 48px);
    margin:auto;
    padding:0;
    border:none;
    border-radius:20px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    overflow:auto;
}

.kit-dialog::backdrop{
    background:rgba(4,18,38,.75);
    backdrop-filter:blur(4px);
}

.kit-dialog[open]{
    animation:pop .2s ease-out;
}

@keyframes pop{
    from{ opacity:0; transform:translateY(12px) scale(.98); }
}

body:has(.kit-dialog[open]){
    overflow:hidden;
}

.kit-dialog-body{
    position:relative;
}

.kit-dialog-close{
    position:sticky;
    top:14px;
    float:right;
    z-index:2;
    width:40px;
    height:40px;
    margin:14px 14px 0 0;
    border:none;
    border-radius:50%;
    background:#eef2f7;
    color:#0b2239;
    font-size:18px;
    cursor:pointer;
    transition:.2s;
}

.kit-dialog-close:hover{
    background:#0b2239;
    color:#fff;
}

/* ---------- inside each tool ---------- */

.tool-panel{
    padding:36px 40px 40px;
    color:#33475b;
}

.tool-panel h2{
    font-size:26px;
    color:#0b2239;
    margin-bottom:6px;
    padding-right:40px;
}

.tool-intro{
    color:var(--text);
    font-size:15px;
    margin-bottom:24px;
}

.tool-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 22px;
    border:2px solid var(--primary);
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:.25s;
}

.tool-btn:hover{
    background:var(--secondary);
    border-color:var(--secondary);
}

.tool-btn:disabled{
    opacity:.6;
    cursor:wait;
}

.tool-btn-outline{
    background:#fff;
    color:var(--primary);
}

.tool-btn-outline:hover{
    background:var(--light);
    color:var(--primary);
}

.tool-btn-small{
    border:1px solid #d9e2ec;
    background:#fff;
    color:var(--primary);
    border-radius:8px;
    width:34px;
    height:34px;
    flex-shrink:0;
    cursor:pointer;
}

.tool-btn-small:hover{
    background:var(--light);
}

.tool-input{
    width:100%;
    padding:12px 16px;
    border:1px solid #d9e2ec;
    border-radius:10px;
    font-family:inherit;
    font-size:15px;
    color:#222;
    background:#f8fafc;
    outline:none;
    transition:.2s;
}

.tool-input:focus{
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 0 0 4px rgba(11,78,162,.12);
}

.mono{
    font-family:Consolas,"SFMono-Regular",Menlo,monospace;
}

textarea.tool-input{
    resize:vertical;
}

.tool-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.tool-field label{
    font-size:14px;
    font-weight:600;
    color:#0b2239;
}

.tool-field input[type=range]{
    width:100%;
    accent-color:#00a651;
}

.tool-output-row{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.tool-output-row .tool-input{
    flex:1;
    min-width:0;
    font-size:17px;
}

.tool-checks{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 20px;
    margin-bottom:16px;
}

.tool-checks label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    cursor:pointer;
}

.tool-checks input{
    width:17px;
    height:17px;
    accent-color:#00a651;
}

.tool-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.tool-result{
    font-size:14px;
    color:var(--text);
    margin-top:6px;
}

.tool-result:empty{
    display:none;
}

.tool-result.is-good{ color:#00813f; }
.tool-result.is-warn{ color:#b26a00; }
.tool-result.is-bad{ color:#c62828; }

.tool-file{
    font-family:inherit;
    font-size:14px;
}

.tool-file-name{
    font-size:13px;
    color:#7a8899;
}

/* strength meter: five separate segments */

.strength-bar{
    position:relative;
    height:10px;
    border-radius:10px;
    overflow:hidden;
    background:#edf1f6;
}

/* white gaps split the bar into five segments */
.strength-bar::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg, transparent 0 calc(20% - 4px), #fff calc(20% - 4px) 20%);
}

.strength-fill{
    height:100%;
    width:0;
    transition:width .3s, background .3s;
}

.strength-fill.level-1{ background:#e5383b; }
.strength-fill.level-2{ background:#f3722c; }
.strength-fill.level-3{ background:#f9c74f; }
.strength-fill.level-4{ background:#43aa8b; }
.strength-fill.level-5{ background:#00a651; }

.strength-label{
    font-weight:700;
    font-size:18px;
    margin-top:14px;
    color:#0b2239;
}

.strength-time{
    font-size:14px;
    color:var(--text);
    margin-bottom:10px;
}

.tool-tips{
    list-style:disc;
    padding-left:20px;
    font-size:14px;
    color:var(--text);
}

.tool-tips li{
    margin-bottom:4px;
}

/* hashes */

.hash-rows{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.hash-row{
    display:flex;
    align-items:center;
    gap:12px;
    background:#0b2239;
    border-radius:10px;
    padding:10px 12px;
}

.hash-name{
    width:72px;
    flex-shrink:0;
    font-size:12px;
    font-weight:700;
    color:#9fe3bf;
}

.hash-row code{
    flex:1;
    min-width:0;
    font-size:13px;
    word-break:break-all;
    color:#d6e4f5;
}

.hash-row .tool-btn-small{
    background:rgba(255,255,255,.1);
    border-color:transparent;
    color:#fff;
}

/* JWT */

.tool-claims{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:8px 18px;
    margin:16px 0;
    font-size:14px;
}

.tool-claims dt{
    font-weight:600;
    color:#0b2239;
}

.tool-claims dd{
    color:var(--text);
    word-break:break-word;
}

.jwt-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.jwt-grid h3{
    font-size:15px;
    color:#0b2239;
    margin-bottom:8px;
}

.tool-pre{
    background:#0b2239;
    color:#d6e4f5;
    border-radius:10px;
    padding:14px;
    min-height:80px;
    font-size:13px;
    overflow:auto;
    white-space:pre-wrap;
    word-break:break-word;
}

/* browser table */

.tool-table-wrap{
    overflow-x:auto;
}

.tool-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.tool-table th,
.tool-table td{
    text-align:left;
    padding:11px 12px;
    border-bottom:1px solid #edf1f6;
    vertical-align:top;
}

.tool-table tr:nth-child(odd){
    background:#f8fafc;
}

.tool-table th{
    width:34%;
    color:#0b2239;
    font-weight:600;
}

.tool-table td{
    color:var(--text);
    word-break:break-word;
}

/* checker results */

.verdict{
    padding:16px 18px;
    border-radius:12px;
    border-left:5px solid;
    margin:6px 0 18px;
}

.verdict strong{
    display:block;
    font-size:17px;
    color:#0b2239;
}

.verdict p{
    font-size:14px;
    margin-top:4px;
    color:#33475b;
}

.verdict.is-good{ background:#e8f7ef; border-color:#00a651; }
.verdict.is-warn{ background:#fff6e5; border-color:#f3a712; }
.verdict.is-bad{ background:#fdecec; border-color:#e5383b; }

.check-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
}

.check{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:12px 14px;
    border:1px solid #edf1f6;
    border-radius:10px;
    background:#fbfcfe;
}

.check > i{
    font-size:18px;
    margin-top:2px;
    flex-shrink:0;
}

.check strong{
    display:block;
    font-size:14px;
    color:#0b2239;
}

.check p{
    font-size:13px;
    line-height:1.6;
    color:#5b6b7d;
    margin-top:2px;
    word-break:break-word;
}

.check.is-pass > i{ color:#00a651; }
.check.is-warn > i{ color:#f3a712; }
.check.is-fail > i{ color:#e5383b; }
.check.is-info > i{ color:#2f9bff; }

.tool-cta{
    margin-top:18px;
    padding:14px 16px;
    border-radius:10px;
    background:#0b2239;
    color:#d6e4f5;
    font-size:14px;
}

.tool-cta a{
    color:#9fe3bf;
    font-weight:600;
    text-decoration:underline;
}

.tool-leak{
    margin-top:26px;
    padding:20px;
    border-radius:14px;
    background:#f3f7fb;
    border:1px solid #e3eaf3;
}

.tool-leak h3{
    font-size:16px;
    color:#0b2239;
    margin-bottom:4px;
}

.tool-leak p{
    font-size:13px;
    line-height:1.6;
    color:#5b6b7d;
    margin-bottom:14px;
}

.tool-leak .tool-result{
    margin:14px 0 0;
    font-size:14px;
    font-weight:600;
}

.tool-subhead{
    font-size:16px;
    color:#0b2239;
    margin:24px 0 10px;
}

.hop-list{
    list-style:none;
    counter-reset:hop;
    border-left:2px solid #d9e2ec;
    margin-left:10px;
}

.hop-list li{
    position:relative;
    counter-increment:hop;
    padding:0 0 14px 22px;
    font-size:13px;
}

.hop-list li::before{
    content:counter(hop);
    position:absolute;
    left:-12px;
    top:0;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#0b4ea2;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:grid;
    place-items:center;
}

.hop-list strong{
    display:block;
    color:#0b2239;
    word-break:break-all;
}

.hop-list span{
    color:#7a8899;
}

/*======================================================
 RESPONSIVE
======================================================*/

@media (max-width:1000px){

    .desk-hero,
    .desk-top{
        grid-template-columns:1fr;
    }

    .desk-hero{
        gap:24px;
    }

    .desk-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:700px){

    .desk-hero h1,
    .kit-hero h1{
        font-size:30px;
    }

    .desk-stat{
        padding:14px 6px;
    }

    .desk-stat strong{
        font-size:18px;
    }

    .desk-toolbar{
        flex-wrap:wrap;
    }

    .desk-search{
        flex-basis:100%;
    }

    .desk-select{
        flex:1;
    }

    .desk-grid{
        grid-template-columns:1fr;
    }

    .story-lead{
        padding:24px 22px;
    }

    .story-lead .story-title{
        font-size:22px;
    }

    .kit-dialog{
        width:calc(100% - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:16px;
    }

    .tool-panel{
        padding:22px 18px 26px;
    }

    .tool-output-row{
        flex-wrap:wrap;
    }

    .tool-output-row .tool-input{
        flex-basis:100%;
    }

    .tool-checks,
    .jwt-grid{
        grid-template-columns:1fr;
    }

    .tool-claims{
        grid-template-columns:1fr;
        gap:2px;
    }

    .tool-claims dd{
        margin-bottom:8px;
    }

}


/*======================================================
 NEW TOOLS: breach checkers, CVE lookup, website grade,
 QR code scam check
======================================================*/

.tool-source{
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid #edf1f6;
    font-size:12px;
    color:#7a8899;
}

.tool-source a{
    color:var(--primary);
    text-decoration:underline;
}

.tool-subhead{
    margin:22px 0 10px;
    font-size:16px;
    color:#0b2239;
}

.chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:8px 0;
}

.chip{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    background:#eef3f8;
    color:#33475b;
    font-size:12px;
    font-weight:500;
    line-height:1.6;
}

.chip.is-bad{
    background:#fdecec;
    color:#b42318;
}

.chip.is-warn{
    background:#fff6e5;
    color:#8a5300;
}

.breach-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    list-style:none;
}

.breach-item{
    padding:14px 16px;
    border:1px solid #edf1f6;
    border-radius:12px;
    background:#fbfcfe;
}

.breach-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.breach-head strong{
    font-size:15px;
    color:#0b2239;
}

.breach-item p{
    margin-top:6px;
    font-size:13px;
    line-height:1.6;
    color:#33475b;
}

.breach-item .breach-meta{
    margin-top:2px;
    color:#7a8899;
}

.tool-more{
    margin-top:14px;
}

.cve-name{
    font-weight:600;
    color:#0b2239;
    margin-bottom:6px;
}

.cve-desc{
    font-size:14px;
    line-height:1.7;
    color:#33475b;
}

.ref-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-left:18px;
    font-size:13px;
}

.ref-list a{
    color:var(--primary);
    word-break:break-all;
}

/* website grade */
.grade-wrap{
    display:flex;
    align-items:center;
    gap:18px;
}

.grade-wrap .verdict{
    flex:1;
    margin:0;
}

.grade-badge{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:84px;
    height:84px;
    border-radius:20px;
    font-size:36px;
    font-weight:800;
    color:#fff;
    background:#7a8899;
}

.grade-badge.is-a{ background:#00a651; }
.grade-badge.is-b{ background:#7cb518; }
.grade-badge.is-c{ background:#f3a712; }
.grade-badge.is-d{ background:#e76f24; }
.grade-badge.is-f{ background:#e5383b; }

/* QR code scam check */
.qr-drop{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:28px 20px;
    border:2px dashed #b9c8d8;
    border-radius:16px;
    background:#f8fafc;
    text-align:center;
    cursor:pointer;
    transition:border-color .2s, background-color .2s;
}

.qr-drop:hover,
.qr-drop.is-over,
#qrFile:focus-visible + .qr-drop{
    border-color:var(--primary);
    background:#eef4fb;
}

.qr-drop i{
    font-size:30px;
    color:var(--primary);
}

.qr-drop strong{
    font-size:15px;
    color:#0b2239;
}

.qr-drop span{
    font-size:13px;
    color:#7a8899;
}

.qr-preview{
    display:block;
    max-width:180px;
    max-height:180px;
    margin:18px auto 14px;
    border-radius:12px;
    border:1px solid #edf1f6;
    object-fit:contain;
}

.qr-content{
    margin:6px 0 16px;
    padding:12px 14px;
    border-radius:10px;
    background:#0b2239;
}

.qr-content .qr-label{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9fb3cc;
}

.qr-content code{
    display:block;
    font-size:13px;
    color:#e3ebf5;
    word-break:break-all;
    white-space:pre-wrap;
}

@media (max-width:700px){
    .grade-wrap{
        flex-direction:column;
        align-items:stretch;
    }
    .grade-badge{
        margin:0 auto;
    }
}

.faq-list{
    margin:10px 0 0;
    padding-left:20px;
    list-style:disc;
}

.faq-list li{
    margin-bottom:4px;
}