/* CerberoShield - estilos portada */
        :root { --accent:#58a6ff; --bg-main:#0a0e14; --bg-panel:#161b22; --bg-soft:#0d1117; --border:#30363d; --success:#238636; --warn:#d29922; --text:#c9d1d9; --muted:#8b949e; }
        *, *::before, *::after { box-sizing:border-box; }
        html { -webkit-text-size-adjust:100%; overflow-y:scroll; scrollbar-gutter:stable; }
        body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--bg-main); color:#e0e0e0; margin:0; padding:20px; line-height:1.6; overflow-x:hidden; }
        img, svg, canvas { max-width:100%; height:auto; }
        .container { width:min(100%, 1200px); max-width:1200px; margin:0 auto; background:var(--bg-panel); border-radius:12px; border:1px solid var(--border); overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.8); }
        .header-img { width:100%; display:block; border-bottom:1px solid var(--border); }
        .hero-main { color:var(--accent); font-weight:900; font-size:2em; letter-spacing:4px; text-align:center; margin:30px 0 0; text-transform:uppercase; text-shadow:0 0 20px rgba(88,166,255,.4); }
        .hero-sub { color:var(--muted); font-size:.85em; letter-spacing:2px; text-align:center; margin:0 auto 30px; text-transform:uppercase; font-weight:600; opacity:.95; border-bottom:1px solid var(--border); padding:0 10px 20px; width:80%; line-height:1.45; }
        .inner-padding { padding:30px; }
        .landing-hero { background:linear-gradient(180deg, rgba(88,166,255,.09), rgba(13,17,23,.98)); border:1px solid var(--border); border-left:5px solid var(--accent); border-radius:10px; padding:28px; margin-bottom:25px; }
        .eyebrow { color:var(--accent); font-size:.78em; font-weight:900; letter-spacing:1.8px; text-transform:uppercase; margin:0 0 10px; }
        .landing-hero h2 { color:#fff; font-size:1.75em; line-height:1.2; margin:0 0 12px; letter-spacing:.2px; }
        .landing-hero p { max-width:920px; color:var(--text); margin:0 0 18px; }
        .action-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
        .btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:6px; border:1px solid var(--border); text-decoration:none; color:#c9d1d9; background:#21262d; font-size:.82em; font-weight:900; letter-spacing:.4px; text-transform:uppercase; transition:all .2s ease; }
        .btn:hover { background:#30363d; border-color:#8b949e; }
        .btn:disabled { opacity:.48; cursor:not-allowed; background:#161b22; border-color:var(--border); color:var(--muted); }
        .btn:disabled:hover { background:#161b22; border-color:var(--border); }
        .btn-primary { background:var(--success); border-color:var(--success); color:#fff; }
        .btn-primary:hover { background:#2ea043; border-color:#2ea043; }
        .section-title { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin:24px 0 14px; border-bottom:1px solid var(--border); padding-bottom:10px; }
        .section-title h2 { color:var(--accent); font-size:.9em; text-transform:uppercase; letter-spacing:1.3px; margin:0; }
        .section-title span { color:var(--muted); font-size:.78em; }
        .tool-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; }
        .tool-card, .data-card { background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:18px; min-width:0; transition:transform .2s ease, border-color .2s ease; }
        .tool-card:hover, .data-card:hover { transform:translateY(-3px); border-color:#444; }
        .tool-card h3, .data-card h3 { color:var(--accent); font-size:.82em; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px; border-bottom:1px solid var(--border); padding-bottom:7px; }
        .tool-card p, .data-card p { color:var(--text); margin:0 0 14px; font-size:.95em; }
        .tool-card a { color:var(--accent); text-decoration:none; font-weight:800; font-size:.85em; }
        .tool-card a:hover { color:#fff; text-decoration:underline; }
        .feature-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px; margin-bottom:25px; }
        .data-card strong { color:#fff; }
        .tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
        .tag { background:#21262d; border:1px solid var(--border); border-radius:999px; color:#8b949e; display:inline-flex; padding:4px 9px; font-size:.74em; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
        .my-ip-panel { background:linear-gradient(135deg, rgba(35,134,54,.08), rgba(88,166,255,.07)); border:1px solid var(--border); border-left:5px solid var(--success); border-radius:10px; padding:22px; margin:0 0 25px; }
        .my-ip-panel h2 { color:var(--accent); font-size:.92em; text-transform:uppercase; letter-spacing:1.3px; margin:0 0 8px; }
        .my-ip-panel p { color:var(--text); margin:0 0 16px; }
        .home-ip-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
        .home-ip-card { background:rgba(13,17,23,.74); border:1px solid var(--border); border-radius:9px; padding:16px; min-width:0; }
        .home-ip-label { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.72em; font-weight:900; letter-spacing:.75px; text-transform:uppercase; margin-bottom:8px; }
        .home-ip-value { display:block; color:#fff; font-family:Consolas, Monaco, monospace; font-size:1.05em; font-weight:900; line-height:1.35; overflow-wrap:anywhere; min-height:30px; }
        .home-ip-state { color:var(--muted); white-space:nowrap; }
        .home-ip-card[data-state="ok"] .home-ip-state { color:#3fb950; }
        .home-ip-card[data-state="fail"] .home-ip-state { color:#f2cc60; }
        .home-ip-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
        .btn-small { min-height:36px; padding:0 13px; font-size:.74em; cursor:pointer; }
        .home-ip-note { color:var(--muted); font-size:.82em; margin:10px 0 0; }
        .notice { background:#16130c; border:1px solid rgba(210,153,34,.55); border-left:5px solid var(--warn); border-radius:8px; padding:16px; color:#f0f6fc; margin-top:25px; }
        .notice strong { color:#ffe08a; }
        @media (max-width:900px) { .tool-grid, .feature-grid, .home-ip-grid { grid-template-columns:1fr; } .hero-sub { width:92%; } .inner-padding { padding:20px; } .landing-hero h2 { font-size:1.35em; } }
        @media (max-width:640px) { body { padding:10px; } .hero-main { font-size:1.45em; letter-spacing:2px; } .action-row { flex-direction:column; } .btn { width:100%; } }