.catp-page{
        --ink:#0f172a;
        --ink-soft:#64748b;
        --line:rgba(15,23,42,.10);
        --surface:#fff;
        --soft:rgba(15,23,42,.05);
    }
    /* ================= HERO ================= */
    .catp-hero{
        position:relative;
        overflow:hidden;
        padding:130px 20px 60px;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
        background:#f8fafc;
    }
    .catp-hero-bg{position:absolute;inset:0;pointer-events:none;}
    .catp-dots{
        position:absolute;inset:0;
        background-image:radial-gradient(rgba(15,23,42,.16) 1px, transparent 1px);
        background-size:22px 22px;
        -webkit-mask-image:radial-gradient(ellipse 75% 75% at 40% 30%, #000 25%, transparent 76%);
                mask-image:radial-gradient(ellipse 75% 75% at 40% 30%, #000 25%, transparent 76%);
        opacity:.65;
    }
    .catp-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
    .catp-glow-a{width:400px;height:400px;top:-180px;left:-110px;background:rgba(15,23,42,.16);}
    .catp-glow-b{width:340px;height:340px;bottom:-190px;right:-80px;background:rgba(15,23,42,.12);}
    .catp-hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;}
    /* breadcrumb */
    .catp-crumbs{
        display:flex;align-items:center;gap:6px;
        font-size:13px;color:var(--ink-soft);
        margin-bottom:26px;flex-wrap:wrap;
    }
    .catp-crumbs a{color:var(--ink-soft);text-decoration:none;transition:color .2s ease;}
    .catp-crumbs a:hover{color:var(--ink);}
    .catp-crumbs .material-symbols-outlined{font-size:16px;opacity:.55;}
    .catp-crumb-now{color:var(--ink);font-weight:600;}
    /* title block */
    .catp-hero-top{display:flex;align-items:flex-start;gap:20px;}
    .catp-hero-icon{
        height:64px;width:64px;flex:0 0 64px;
        display:grid;place-items:center;
        border-radius:20px;
        background:var(--surface);
        border:1px solid var(--line);
        color:var(--accent);
        box-shadow:0 18px 34px -26px rgba(15,23,42,.9);
    }
    .catp-hero-icon .material-symbols-outlined{font-size:32px;}
    .catp-title{
        margin:0;
        font-size:clamp(30px,5vw,46px);
        font-weight:800;
        letter-spacing:-1.3px;
        line-height:1.08;
        color:var(--ink);
    }
    .catp-title em{font-style:italic;font-weight:500;color:var(--accent);}
    .catp-sub{
        margin:12px 0 0;
        max-width:620px;
        font-size:15.5px;
        line-height:1.65;
        color:var(--ink-soft);
    }
    /* chips */
    .catp-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
    .catp-chip{
        display:inline-flex;align-items:center;gap:7px;
        font-size:12.5px;font-weight:600;
        color:var(--ink-soft);
        background:var(--surface);
        border:1px solid var(--line);
        padding:7px 14px;border-radius:999px;
    }
    .catp-chip b{color:var(--ink);}
    .catp-chip .material-symbols-outlined{font-size:16px;color:var(--accent);}
    /* search */
    .catp-search{
        position:relative;
        display:flex;align-items:center;
        max-width:520px;
        margin-top:26px;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:14px;
        box-shadow:0 20px 40px -34px rgba(15,23,42,.9);
        transition:border-color .25s ease,box-shadow .25s ease;
    }
    .catp-search:focus-within{
        border-color:rgba(15,23,42,.35);
        box-shadow:0 20px 40px -30px rgba(15,23,42,.9);
    }
    .catp-search-icon{font-size:20px;color:var(--ink-soft);margin-left:14px;}
    .catp-search input{
        flex:1;
        border:0;outline:0;background:transparent;
        padding:14px 12px;
        font-size:15px;font-family:inherit;
        color:var(--ink);
    }
    .catp-search input::placeholder{color:var(--ink-soft);}
    .catp-clear{
        display:none;
        border:0;background:transparent;cursor:pointer;
        padding:0 14px;color:var(--ink-soft);
    }
    .catp-clear .material-symbols-outlined{font-size:19px;}
    .catp-clear:hover{color:var(--ink);}
    .catp-clear.is-on{display:block;}
    /* ================= BODY ================= */
    .catp-inner{max-width:1180px;margin:0 auto;padding:0 20px 20px;}

    .catp-bar{
        display:flex;align-items:center;justify-content:space-between;
        gap:14px;flex-wrap:wrap;
        margin:44px 0 20px;
        padding-bottom:14px;
        border-bottom:1px solid var(--line);
    }
    .catp-bar-title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--ink);}
    .catp-bar-count{font-size:13px;color:var(--ink-soft);}
    .catp-bar-count b{color:var(--ink);}
    /* tool cards */
    .catp-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
        gap:14px;
    }
    .catp-tool{
        position:relative;
        display:flex;align-items:flex-start;
        padding:20px;
        border-radius:16px;
        background:var(--surface);
        border:1px solid var(--line);
        text-decoration:none;
        overflow:hidden;
        transition:transform .26s cubic-bezier(.2,.7,.3,1),
                box-shadow .26s ease,border-color .26s ease;
    }
    .catp-tool::before{
        content:"";position:absolute;inset:0 auto 0 0;
        width:3px;background:var(--accent);
        transform:scaleY(0);transform-origin:top;
        transition:transform .3s cubic-bezier(.2,.7,.3,1);
    }
    .catp-tool:hover{
        transform:translateY(-4px);
        border-color:rgba(15,23,42,.26);
        box-shadow:0 16px 32px -22px rgba(15,23,42,.5);
    }
    .catp-tool:hover::before{transform:scaleY(1);}
    .catp-tool-icon{
        height:40px;width:40px;flex:0 0 40px;
        margin-right:14px;
        display:grid;place-items:center;
        border-radius:12px;
        background:var(--soft);
        border:1px solid var(--line);
        color:var(--accent);
        transition:background .26s ease,color .26s ease,border-color .26s ease,transform .26s ease;
    }
    .catp-tool-icon .material-symbols-outlined{font-size:22px;}
    .catp-tool:hover .catp-tool-icon{
        background:var(--accent);border-color:var(--accent);color:#fff;
        transform:rotate(-5deg) scale(1.05);
    }
    .catp-tool-body{display:flex;flex-direction:column;flex:1;min-width:0;}
    .catp-tool-name{
        font-size:15.5px;font-weight:700;letter-spacing:-.2px;
        color:var(--accent);margin-bottom:5px;
    }
    .catp-tool-desc{font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
    .catp-tool-go{
        font-size:18px;color:#94a3b8;margin-left:10px;
        transition:transform .26s ease,color .26s ease;
    }
    .catp-tool:hover .catp-tool-go{transform:translate(3px,-3px);color:var(--ink);}
    .catp-tool[hidden]{display:none;}
    /* empty state */
    .catp-empty{
        text-align:center;
        padding:56px 20px;
        border:1px dashed var(--line);
        border-radius:18px;
        color:var(--ink-soft);
    }
    .catp-empty .material-symbols-outlined{font-size:38px;opacity:.6;}
    .catp-empty h3{margin:12px 0 6px;font-size:17px;font-weight:700;color:var(--ink);}
    .catp-empty p{margin:0;font-size:14px;}

    /* other categories */
    .catp-more{
        margin:52px 0 10px;
        padding:26px;
        border:1px solid var(--line);
        border-radius:18px;
        background:var(--soft);
    }
    .catp-more-title{margin:0 0 16px;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--ink);}
    .catp-more-row{display:flex;flex-wrap:wrap;gap:10px;}
    .catp-more-link{
        display:inline-flex;align-items:center;gap:8px;
        font-size:13.5px;font-weight:600;
        color:var(--ink);
        background:var(--surface);
        border:1px solid var(--line);
        padding:9px 15px;border-radius:999px;
        text-decoration:none;
        transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .catp-more-link .material-symbols-outlined{font-size:17px;color:var(--accent);}
    .catp-more-link:hover{
        transform:translateY(-2px);
        border-color:rgba(15,23,42,.3);
        box-shadow:0 12px 24px -18px rgba(15,23,42,.7);
    }
    .catp-more-all{background:var(--ink);color:#fff;border-color:var(--ink);}
    .catp-more-all .material-symbols-outlined{color:#fff;}


    /* ================= RESPONSIVE ================= */
    @media (max-width:640px){
        .catp-hero{padding:108px 18px 46px;}
        .catp-hero-top{gap:14px;}
        .catp-hero-icon{height:52px;width:52px;flex:0 0 52px;border-radius:16px;}
        .catp-hero-icon .material-symbols-outlined{font-size:26px;}
        .catp-search{max-width:100%;}
    }
    @media (max-width:520px){
        .catp-grid{grid-template-columns:1fr;}
        .catp-tool-go{display:none;}
        .catp-more{padding:20px;}
    }
    @media (prefers-reduced-motion:reduce){
        .catp-tool,.catp-tool-icon,.catp-tool-go,.catp-more-link,.catp-tool::before{transition:none;}
    }