html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'Manrope', 'Montserrat', 'Arial', sans-serif;
    background: linear-gradient(130deg, #f7e9ff 0%, #fff7e6 100%);
    color: #332045;
}

.site-root { min-height: 100vh; display: flex; flex-direction: column; }

.nav-header {
    background: linear-gradient(90deg, #6D28D9 0%, #FFD600 100%);
    box-shadow: 0 6px 36px #ab3df066;
    border-bottom: 4px solid #FFD600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4vw 14px 4vw;
    position: sticky;
    top: 0; z-index: 90;
}

.logo-box { display: flex; align-items: center; gap: 13px; }
.brand-title {
    font-size: 1.5em;
    font-weight: 800;
    color: #4B2991;
    letter-spacing: 1px;
}

.nav-links {
    display: flex; gap: 18px;
}
.nav-links a {
    color: #3B155B;
    background: #FFD60022;
    border-radius: 10px;
    padding: 6px 15px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.07em;
    transition: background .18s, color .19s;
}
.nav-links a:hover { background: #6D28D9; color: #FFD600; }

.desc-block {
    text-align: center;
    font-size: 1.18em;
    padding: 18px 2vw 10px 2vw;
    color: #6D28D9;
    background: linear-gradient(90deg,#fff7e6 0%, #e9e1ff 100%);
    margin-bottom: 8px;
    font-weight: 500;
}

.breadcrumbs-bar {
    background: #e6d7ff;
    border-radius: 0 0 22px 22px;
    font-size: 1em;
    padding: 10px 3vw 7px 3vw;
    color: #6D28D9;
    box-shadow: 0 2px 8px #a47de024;
    margin-bottom: 18px;
}
.breadcrumbs-label { color: #8768ad; margin-right: 12px; font-weight: 600; }

.core-content {
    flex: 1 1 auto;
    margin: 0 auto 28px auto;
    padding: 38px 4vw 40px 4vw;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 7px 40px #e4baff18;
    max-width: 1150px;
    min-height: 440px;
    transition: box-shadow .18s;
}
.core-content:focus { outline: 3px solid #6D28D9; }

.finder-block {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.finder-block form {
    display: flex;
    background: #f4ebfe;
    border-radius: 16px;
    padding: 6px 15px;
    box-shadow: 0 2px 10px #d8c2ff13;
    border: 1px solid #ffd70055;
}
.finder-block input[type=search] {
    border: none;
    background: none;
    outline: none;
    font-size: 1.11em;
    padding: 7px 12px;
    width: 250px;
    color: #381b5e;
}
.finder-block button {
    border: none;
    background: none;
    color: #ffd600;
    font-size: 1.22em;
    cursor: pointer;
    padding: 3px 8px;
    transition: color .15s;
}
.finder-block button:hover { color: #6D28D9; }

.site-footer {
    background: linear-gradient(90deg, #FFD600 0%, #6D28D9 100%);
    color: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -2px 18px #efd63b88;
    padding: 32px 0 18px 0;
    margin-top: 38px;
}
.footer-inner {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.32em;
    font-weight: 800;
    color: #3B155B;
}
.footer-meta { display: flex; flex-direction: column; gap: 10px; }
.footer-meta a { color: #fff4c8; text-decoration: underline; }
.footer-meta a:hover { color: #4B2991; }

.footer-nav {
    display: flex; gap: 16px; margin-top: 4px;
}
.footer-nav a {
    color: #3B155B;
    background: #fff4c825;
    border-radius: 8px;
    padding: 4px 12px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: background .14s, color .14s;
}
.footer-nav a:hover { background: #6D28D9; color: #FFD600; }

#totop-btn {
    display: none;
    position: fixed;
    right: 23px;
    bottom: 32px;
    background: #FFD600;
    color: #4B2991;
    border: none;
    border-radius: 50%;
    width: 50px; height: 50px;
    font-size: 2.2em;
    box-shadow: 0 8px 36px #5f47bf3b;
    cursor: pointer;
    z-index: 100;
    transition: background .19s;
}
#totop-btn:hover { background: #6D28D9; color: #FFD600; }

@media (max-width:900px) {
    .core-content, .footer-inner { max-width: 99vw !important; }
    .core-content { padding: 8vw 2vw 9vw 2vw; }
    .footer-inner { flex-direction: column; gap: 11px;}
}
@media (max-width:540px) {
    .nav-header { flex-direction: column; padding: 12px 2vw 7px 2vw; }
    .logo-box { margin-bottom: 9px;}
    .nav-links { flex-wrap: wrap; gap: 8px;}
    .core-content { padding: 5vw 2vw 11vw 2vw; min-height: 220px;}
    .desc-block { font-size: 1em; }
    .breadcrumbs-bar { font-size: .97em; padding: 7px 2vw 6px 2vw;}
    #totop-btn { width: 36px; height: 36px; font-size: 1.2em; }
}
.categories-block {
    margin-bottom: 42px;
}
.categories-block h2 {
    font-size: 2.1em;
    color: #21a58a;
    margin-bottom: 20px;
    font-weight: 800;
}
.categories-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
}
.category-card {
    background: linear-gradient(120deg, #e1f6fd 0%, #e2f7f2 100%);
    border-radius: 16px;
    box-shadow: 0 3px 16px #b9f0fb26;
    padding: 22px 18px 16px 20px;
    transition: box-shadow .22s, transform .22s;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.category-card:hover {
    box-shadow: 0 7px 32px #52d9ff42;
    transform: translateY(-4px) scale(1.017);
}
.category-card h3 {
    color: #13b378;
    margin: 0 0 7px 0;
    font-size: 1.22em;
}
.category-card p {
    font-size: 1.05em;
    color: #1e6d55;
    margin: 0 0 8px 0;
}
.category-card ul {
    list-style: disc;
    padding-left: 17px;
    margin: 7px 0 0 0;
}
.category-card li {
    margin-bottom: 5px;
    font-size: 1.07em;
}
.category-card a {
    color: #249ed3;
    font-weight: 500;
    text-decoration: none;
    transition: color .17s;
}
.category-card a:hover {
    color: #1977d2;
    text-decoration: underline;
}

.calc-block {
    background: linear-gradient(90deg, #ebf9f3 0%, #e3f5fb 100%);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 2px 14px #55d9ff18;
    margin-bottom: 38px;
}
.calc-form label { font-weight: 600; }
.calc-form input, .calc-form select, .calc-form button {
    font-size: 1.09em;
    margin: 0 8px 0 0;
    padding: 6px 14px;
    border: 1px solid #a3e3e2;
    border-radius: 6px;
    outline: none;
}
.calc-form button {
    background: linear-gradient(90deg, #34cea3 0%, #48b1f3 100%);
    color: #fff;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background .16s;
}
.calc-form button:hover {
    background: linear-gradient(90deg, #2fc7ff 0%, #35eabb 100%);
}
.calc-result {
    background: #e8fbf2;
    border-left: 5px solid #34cea3;
    margin: 22px 0 28px 0;
    padding: 18px 24px;
    border-radius: 7px;
    font-size: 1.16em;
    color: #144a3d;
}
.faq-block, .bullets-block {
    margin-top: 42px;
}
.faq-block h3, .bullets-block h3 {
    color: #1780d2;
    margin-bottom: 9px;
    font-size: 1.13em;
}
.faq-list, .bullets-list {
    margin: 0; padding: 0;
    list-style: none;
}
.faq-list li {
    margin-bottom: 10px;
    background: #f1f7ff;
    border-left: 4px solid #4db7f2;
    padding: 8px 13px 6px 12px;
    border-radius: 7px;
    font-size: 1.06em;
}
.bullets-list li {
    margin-bottom: 8px;
    background: #e9fcf3;
    border-left: 4px solid #2dc2a4;
    padding: 8px 13px 6px 12px;
    border-radius: 7px;
    font-size: 1.06em;
}
@media (max-width: 900px) {
    .main-content, .header-inner, .categories-list { max-width: 98vw !important; }
    .main-content { padding: 14vw 2vw 7vw 2vw; }
    .categories-list { grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); }
}
@media (max-width: 580px) {
    .main-header { padding: 24px 0 7px 0; }
    .header-inner { flex-direction: column; align-items: flex-start; gap: 11px; }
    .main-content { padding: 16px 4vw 16vw 4vw; }
    .categories-block h2 { font-size: 1.33em; }
    .category-card { padding: 14px 8px 12px 10px; min-height: 100px; }
}

.breadcrumbs {
    max-width: 1160px;
    margin: 22px auto 0 auto;
    font-size: 1em;
    color: #444;
    padding-left: 16px;
    padding-bottom: 2px;
}
.breadcrumbs a {
    color: #249ed3;
    text-decoration: none;
}
.breadcrumbs span[itemprop="itemListElement"] + span[itemprop="itemListElement"]:before {
    content: "›";
    margin: 0 7px;
    color: #aaa;
}
.examples-block {
    margin: 32px 0 24px 0;
    background: #f9fafb;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 12px #0001;
}
.examples-block h3 {
    margin-bottom: 16px;
    font-size: 1.18em;
    color: #194164;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.examples-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 1.05em;
}
.examples-table th, .examples-table td {
    padding: 12px 10px;
    border: 1px solid #e1e8ee;
    text-align: center;
    vertical-align: middle;
}
.examples-table th {
    background: #f3f7fa;
    color: #224c65;
    font-weight: 700;
}
.examples-table tr:nth-child(even) {
    background: #f9fcfe;
}
.examples-table a {
    color: #1362be;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.examples-table a:hover {
    color: #0e388d;
    text-decoration: underline;
}
.examples-table small {
    display: block;
    color: #666;
    margin-top: 2px;
    font-size: 0.93em;
    line-height: 1.2;
}
.sum-highlight { color: #16a34a; font-weight: bold; }
.words-highlight { color: #374151; font-style: italic; }
.info-text { background: #f5f5f5; padding: 1em; margin-top: 1em; }