:root {

    --aitool-primary: #5961f9;

    --aitool-primary-dark: #4348d4;

    --aitool-accent: #ee9ae5;

    --aitool-sidebar-width: 220px;

    --aitool-bg: #f5f7fb;

    --aitool-card-bg: #fff;

    --aitool-text: #1f2937;

    --aitool-muted: #6b7280;

    --aitool-border: #e5e7eb;

}



* {

    box-sizing: border-box;

}



body.aitool-home {

    margin: 0;

    color: var(--aitool-text);

    background: var(--aitool-bg);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

}



body.aitool-home:before {

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 520px;

    background: radial-gradient(circle at 20% 20%, rgba(89, 97, 249, 0.12), transparent 45%),

    radial-gradient(circle at 80% 0%, rgba(238, 154, 229, 0.12), transparent 40%),

    linear-gradient(180deg, #eef1ff 0%, rgba(245, 247, 251, 0) 100%);

    pointer-events: none;

    z-index: 0;

}



.aitool-layout {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    display: flex;

}



.aitool-sidebar {

    width: var(--aitool-sidebar-width);

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    background: rgba(255, 255, 255, 0.92);

    border-right: 1px solid var(--aitool-border);

    backdrop-filter: blur(10px);

    overflow-y: auto;

    z-index: 100;

}



.aitool-sidebar-inner {

    padding: 18px 0 24px;

}



.aitool-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 18px 18px;

    border-bottom: 1px solid var(--aitool-border);

    text-decoration: none;

    color: inherit;

}



.aitool-brand img {

    width: 36px;

    height: 36px;

    object-fit: contain;

}



.aitool-brand strong {

    font-size: 16px;

    line-height: 1.2;

}



.aitool-brand span {

    display: block;

    font-size: 12px;

    color: var(--aitool-muted);

    font-weight: normal;

}



.aitool-nav {

    padding: 12px 10px;

}



.aitool-nav-group {

    margin-bottom: 8px;

}



.aitool-nav-title {

    display: block;

    padding: 8px 12px;

    font-size: 13px;

    font-weight: 600;

    color: var(--aitool-text);

    text-decoration: none;

    border-radius: 8px;

}



.aitool-nav-title:hover,

.aitool-nav-title.active {

    background: rgba(89, 97, 249, 0.08);

    color: var(--aitool-primary);

}



.aitool-nav-sub {

    list-style: none;

    margin: 0;

    padding: 0 0 0 10px;

}



.aitool-nav-sub a {

    display: block;

    padding: 6px 12px;

    font-size: 12px;

    color: var(--aitool-muted);

    text-decoration: none;

    border-radius: 6px;

}



.aitool-nav-sub a:hover {

    color: var(--aitool-primary);

    background: rgba(89, 97, 249, 0.06);

}



.aitool-main {

    flex: 1;

    margin-left: var(--aitool-sidebar-width);

    min-width: 0;

}



.aitool-header {

    position: sticky;

    top: 0;

    z-index: 50;

    backdrop-filter: blur(10px);

    background: rgba(245, 247, 251, 0.85);

    border-bottom: 1px solid rgba(229, 231, 235, 0.8);

}



.aitool-header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    max-width: 1400px;

    margin: 0 auto;

    padding: 12px 24px;

}



.aitool-header-brand {

    display: none;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: inherit;

}



.aitool-header-brand img {

    width: 28px;

    height: 28px;

}



.aitool-header-links {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.aitool-header-links a {

    padding: 6px 10px;

    font-size: 13px;

    color: var(--aitool-muted);

    text-decoration: none;

    border-radius: 999px;

}



.aitool-header-links a:hover,
.aitool-header-links a.active {

    color: var(--aitool-primary);

    background: rgba(89, 97, 249, 0.08);

}

.aitool-nav-sub a.active {

    color: var(--aitool-primary);

    background: rgba(89, 97, 249, 0.06);

}



.aitool-content {

    max-width: 1400px;

    margin: 0 auto;

    padding: 24px;

}



.aitool-hero {

    text-align: center;

    padding: 36px 0 28px;

}



.aitool-hero-logo {

    width: 72px;

    height: 72px;

    margin-bottom: 16px;

}



.aitool-hero h1 {

    margin: 0 0 8px;

    font-size: 28px;

    font-weight: 700;

}



.aitool-hero p {

    margin: 0 auto 24px;

    max-width: 720px;

    color: var(--aitool-muted);

    line-height: 1.6;

}



.aitool-search {

    max-width: 680px;

    margin: 0 auto;

    position: relative;

}



.aitool-search input {

    width: 100%;

    height: 52px;

    padding: 0 18px 0 48px;

    border: 1px solid var(--aitool-border);

    border-radius: 999px;

    background: #fff;

    font-size: 15px;

    outline: none;

    box-shadow: 0 8px 30px rgba(89, 97, 249, 0.08);

}



.aitool-search input:focus {

    border-color: var(--aitool-primary);

    box-shadow: 0 8px 30px rgba(89, 97, 249, 0.16);

}



.aitool-search i {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--aitool-muted);

}



.aitool-stats {

    margin-top: 14px;

    font-size: 13px;

    color: var(--aitool-muted);

}



.aitool-section {

    margin-bottom: 28px;

}

.aitool-section[id^="cat-"] {

    scroll-margin-top: 88px;

}



.aitool-section-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

}



.aitool-section-head h2 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

}



.aitool-section-head h2 i {

    margin-right: 8px;

    color: var(--aitool-primary);

}



.aitool-section-head span {

    font-size: 13px;

    color: var(--aitool-muted);

}



.aitool-grid {

    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr));

    gap: 14px;

}



@media (min-width: 640px) {

    .aitool-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 992px) {

    .aitool-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (min-width: 1200px) {

    .aitool-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



.aitool-card {

    display: block;

    text-decoration: none;

    color: inherit;

    background: var(--aitool-card-bg);

    border: 1px solid var(--aitool-border);

    border-radius: 14px;

    padding: 14px;

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}



.aitool-card:hover {

    transform: translateY(-2px);

    border-color: rgba(89, 97, 249, 0.35);

    box-shadow: 0 10px 24px rgba(89, 97, 249, 0.12);

}



.aitool-card-body {

    display: flex;

    align-items: center;

    gap: 12px;

}



.aitool-card-icon,

.aitool-card-icon img {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    flex-shrink: 0;

}



.aitool-card-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #5961f9, #8b5cf6);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

}



.aitool-card-icon img {

    object-fit: cover;

    background: #fff;

}



.aitool-card-icon i {

    font-size: 16px;

}



.aitool-card-title {

    margin: 0 0 4px;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.aitool-card-desc {

    margin: 0;

    font-size: 12px;

    color: var(--aitool-muted);

    line-height: 1.5;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.aitool-empty {

    display: none;

    text-align: center;

    padding: 48px 16px;

    color: var(--aitool-muted);

}



.aitool-footer {

    margin-top: 40px;

    padding: 24px;

    border-top: 1px solid var(--aitool-border);

    text-align: center;

    color: var(--aitool-muted);

    font-size: 13px;

}



.aitool-footer a {

    color: var(--aitool-primary);

    text-decoration: none;

}



.aitool-toggle {

    display: none;

    border: none;

    background: #fff;

    border-radius: 8px;

    width: 38px;

    height: 38px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



@media (max-width: 991px) {

    .aitool-sidebar {

        transform: translateX(-100%);

        transition: transform .2s ease;

    }



    .aitool-sidebar.open {

        transform: translateX(0);

    }



    .aitool-main {

        margin-left: 0;

    }



    .aitool-header-brand,

    .aitool-toggle {

        display: inline-flex;

        align-items: center;

    }



    .aitool-header-links {

        display: none;

    }

}