/* ── Desktop Navigation Menu Layout ── */
.desktop-nav { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 10px; }
.desktop-nav > ul { display: flex !important; justify-content: center !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: nowrap !important; gap: 6px !important; }
.desktop-nav .nav-link { display: flex !important; align-items: center !important; gap: 5px !important; padding: 6px 8px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #334155 !important; white-space: nowrap !important; border-radius: 6px; text-decoration: none !important; transition: all 0.2s; }
.desktop-nav .nav-link:hover { background: rgba(0,0,0,0.04); color: #d62828 !important; }

/* Dropdown Submenus Framework */
.has-drop { position: relative !important; }
.desktop-nav ul.dropdown { display: none !important; flex-direction: column !important; position: absolute !important; top: 100% !important; left: 0 !important; background: #ffffff !important; min-width: 250px !important; box-shadow: 0 10px 35px rgba(0,0,0,0.12) !important; border-radius: 8px !important; padding: 8px 0 !important; margin: 0 !important; z-index: 9999 !important; border: 1px solid #f1f5f9 !important; list-style: none !important; }
.has-drop:hover > ul.dropdown { display: flex !important; }
.drop-item { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.drop-link { display: flex !important; align-items: center; justify-content: space-between !important; padding: 10px 18px !important; text-decoration: none !important; color: #334155 !important; font-size: 13.5px !important; font-weight: 500 !important; width: 100% !important; box-sizing: border-box !important; }
.drop-link:hover { background: #fef2f2 !important; color: #d62828 !important; }
.drop-link-content { display: flex !important; align-items: center !important; gap: 8px !important; }

/* Nested Subcategories Dropdown — generic, recurses to any depth:
   any .has-sub-drop > ul.nested-dropdown flyout opens to the right of
   its own parent <li>, so wrapping a nested-dropdown's own <li> in
   another .has-sub-drop + ul.nested-dropdown pair "just works" for a
   3rd, 4th... level with zero extra CSS. */
.has-sub-drop { position: relative !important; }
.desktop-nav ul.nested-dropdown { display: none !important; flex-direction: column !important; position: absolute !important; left: 100% !important; top: -8px !important; min-width: 230px !important; background: #ffffff !important; box-shadow: 0 10px 35px rgba(0,0,0,0.12) !important; border-radius: 8px !important; border: 1px solid #f1f5f9 !important; padding: 8px 0 !important; margin: 0 !important; z-index: 10000 !important; list-style: none !important; }
.has-sub-drop:hover > ul.nested-dropdown { display: flex !important; }
.nested-arrow { font-size: 11px !important; color: #cbd5e1 !important; }
.drop-link:hover .nested-arrow { color: #d62828 !important; }

/* ── ✅ REV 4: Tools Mega Menu ── */
.mega-drop {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    background: #ffffff !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.15) !important;
    border-radius: 10px !important;
    border: 1px solid #f1f5f9 !important;
    padding: 24px 28px !important;
    z-index: 9999 !important;
    width: 900px !important;
    max-width: 95vw !important;
}
.has-drop:hover > .mega-drop { display: flex !important; gap: 30px !important; }
.mega-col { flex: 1 1 0 !important; min-width: 0 !important; }
.mega-col-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.mega-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.mega-link:hover { color: #d62828 !important; padding-left: 4px !important; }
.mega-link i { font-size: 12px !important; color: #cbd5e1 !important; width: 14px !important; text-align: center !important; }
.mega-link:hover i { color: #d62828 !important; }
.mega-link.tool-highlight { color: #d62828 !important; font-weight: 700 !important; }
.mega-link.tool-highlight i { color: #d62828 !important; }

/* ── Flipkart Style Ribbon Category Track ── */
.fk-cat-wrap { background: #ffffff; padding: 10px 0 6px 0; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); border-bottom: 1px solid #f1f5f9; }
.cat-nav-btn { position: absolute; top: 40%; transform: translateY(-50%); width: 32px; height: 32px; background: #ffffff; color: #334155; border: 1px solid #e2e8f0; border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.2s ease; opacity: 0; pointer-events: none; }
.cat-nav-btn.visible { opacity: 1; pointer-events: auto; }
.cat-nav-btn:hover { background: #d62828; color: #ffffff; border-color: #d62828; }
.cat-nav-btn.cat-prev { left: 0px; }
.cat-nav-btn.cat-next { right: 0px; }

.fk-cat-track { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f8fafc; -webkit-overflow-scrolling: touch; padding: 0 5px 12px 5px; scroll-behavior: smooth; }
.fk-cat-track::-webkit-scrollbar { height: 5px; }
.fk-cat-track::-webkit-scrollbar-track { background: #f8fafc; border-radius: 10px; }
.fk-cat-track::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

.fk-cat-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 5px; min-width: max-content; padding: 0 10px; transition: transform 0.2s; }
.fk-cat-item:hover { transform: translateY(-2px); }
.fk-cat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.2s ease; }
.fk-cat-name { font-size: 12.5px; font-weight: 600; color: #334155; text-align: center; white-space: nowrap; }

/* ── 📱 Mobile Responsive Sheet Engine & Grid Fallbacks ── */
.mob-bottom-nav { display: none; }

@media (max-width: 1024px) {
    body { overflow-x: clip !important; padding-bottom: 75px !important; }
    .fk-cat-wrap { padding: 8px 0 2px 0; margin-bottom: 10px; }
    .fk-cat-track { gap: 8px; }
    .fk-cat-icon { width: 44px; height: 44px; font-size: 18px; }
    .fk-cat-name { font-size: 11px; }
    .cat-nav-btn { display: flex !important; width: 26px !important; height: 26px !important; font-size: 10px !important; }

    /* Tools mega panel is desktop-only; mobile uses the accordion instead */
    .mega-drop { display: none !important; }

    /* ── ✅ MOBILE HEADER OVERFLOW FIX ── */
    .header-inner {
        flex-wrap: nowrap !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 1px 0 !important;
        overflow: visible !important; /* ✅ was hidden — clipped dropdowns */
    }
    .logo {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important; /* ✅ scoped here instead of parent */
        display: flex !important;
        align-items: center !important;
    }
    .logo-img {
        height: 56px !important;
        width: 122px !important;
        max-width: 122px !important;
    }
    .logo-text { min-width: 0 !important; }
    .logo-sub { display: none !important; }
    .logo-name {
        font-size: 17px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
        display: inline-block !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 100000 !important;
    }
    .icon-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        color: #334155 !important;
        font-size: 16px !important;
        text-decoration: none !important;
    }
    .hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 36px !important;
        height: 36px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 5px !important;
    }
    .hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #334155 !important;
        border-radius: 2px !important;
    }
    .desktop-nav { display: none !important; }

    /* Sticky Bottom Navigation */
    .mob-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #ffffff;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
        z-index: 99999;
        height: 65px;
        justify-content: space-around;
        align-items: center;
        padding: 0 5px;
        border-top: 1px solid #f1f5f9;
    }
    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        gap: 4px;
        flex: 1;
        transition: color 0.2s;
    }
    .mob-nav-item i { font-size: 20px; }
    .mob-nav-item:hover, .mob-nav-item:active { color: #d62828; }
    .mob-nav-search {
        background: #ef4444;
        color: #ffffff;
        width: 55px;
        height: 55px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
        transform: translateY(-20px);
        border: 4px solid #ffffff;
    }
}

/* Modern shared shell and content surfaces. Navigation labels, routes and logo remain intact. */
.main-header {
    position: sticky !important;
    top: 0 !important;
    border-bottom: 2px solid #d62828 !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 5px 24px rgba(32, 36, 43, .055) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.desktop-nav .nav-link { transition: color .18s ease, background .18s ease !important; }
.desktop-nav .nav-link:hover, .desktop-nav .nav-link.active { background: #fff2f0 !important; color: #c5222d !important; }
.drop-link:hover, .mega-link:hover { background-color: #fff5f3 !important; color: #bd2630 !important; }
.dropdown, .nested-dropdown, .mega-drop { border-color: #f0e5e2 !important; box-shadow: 0 18px 45px rgba(34, 35, 42, .14) !important; }
body { background-color: #f7f8fa; }
body .page-wrap:not(.home-page) { padding: 26px 0 52px; }
body .page-wrap .layout { align-items: start; gap: 26px; }
body .page-wrap .main-col { min-width: 0; }
body .page-wrap .sidebar { min-width: 0; gap: 18px; align-self: stretch; }

/* Category landing pages */
body .sleek-breadcrumb-bar {
    margin: 0 0 22px !important;
    padding: 20px 0 !important;
    border: 1px solid #eee5e2 !important;
    border-radius: 16px !important;
    background: linear-gradient(110deg, #fff 65%, #fff6f3) !important;
    box-shadow: 0 8px 24px rgba(40, 32, 28, .045) !important;
}
body .sleek-breadcrumb-bar .container { padding-right: 24px; padding-left: 24px; }
body .category-page-title { color: #202b39 !important; font-size: clamp(26px, 4vw, 38px) !important; font-weight: 800; letter-spacing: -.04em; }
body .category-section-title { margin: 28px 0 15px !important; color: #202b39; font-size: clamp(21px, 2.8vw, 28px) !important; font-weight: 800; letter-spacing: -.025em; }
body .page-wrap .sec-head { align-items: center; gap: 12px; margin: 24px 0 16px !important; padding-bottom: 12px; border-bottom: 1px solid #e9e9ed; }
body .page-wrap .sec-head h2 { color: #253143; font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; letter-spacing: -.025em; }
body .page-wrap .see-all { font-size: 12px; font-weight: 750; }
body .page-wrap .or-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
body .page-wrap .or-card, body .page-wrap .card { overflow: hidden; border: 1px solid #ebe8e6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(32, 36, 43, .045); transition: transform .2s ease, box-shadow .2s ease; }
body .page-wrap .or-card:hover, body .page-wrap .card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(32, 36, 43, .11); }
body .page-wrap .or-card-img { aspect-ratio: 16 / 9; height: auto; background: #f0efee; }
body .page-wrap .or-card-img img { width: 100%; height: 100%; object-fit: cover; }
body .page-wrap .or-card-body { gap: 10px; padding: 15px; }
body .page-wrap .or-card-title { color: #273444; font-size: 14px; font-weight: 750; line-height: 1.5; }
body .page-wrap .or-card-meta { color: #7b8793; font-size: 11px; }

/* Listing pages */
body .listing-hero {
    margin: 0 auto 22px !important;
    padding: 22px 0 !important;
    border: 1px solid #eee5e2 !important;
    border-radius: 16px !important;
    background: linear-gradient(110deg, #fff 60%, #fff6f3) !important;
    box-shadow: 0 8px 24px rgba(40, 32, 28, .045);
}
body .listing-hero .container { padding-right: 24px; padding-left: 24px; }
body .listing-hero-title { color: #202b39 !important; font-size: clamp(23px, 3.3vw, 34px) !important; letter-spacing: -.035em; }
body .listing-hero-count { color: #77818c !important; }
body .page-wrap .list-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body .page-wrap .list-card { height: 100%; border: 1px solid #ebe8e6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(32, 36, 43, .045); }
body .page-wrap .list-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(32, 36, 43, .11); }
body .page-wrap .list-card-img { height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 0; }
body .page-wrap .list-card-body { gap: 9px; padding: 15px; }
body .page-wrap .list-card-title { color: #273444; font-size: 14px; line-height: 1.45; }
body .page-wrap .pagination { gap: 7px; margin: 28px 0; }
body .page-wrap .page-link { min-width: 38px; min-height: 38px; border: 1px solid #e6e7e9; border-radius: 10px; background: #fff; }
body .page-wrap .page-link.active { border-color: #d62828; background: #d62828; color: #fff; }

/* Article reading experience */
body .page-wrap .post-wrap { overflow: hidden; border: 1px solid #eae7e5; border-radius: 20px; background: #fff; box-shadow: 0 12px 38px rgba(32, 36, 43, .06); }
body .page-wrap .post-hero-img { display: block; width: 100%; max-height: 500px; object-fit: cover; }
body .page-wrap .post-content-area { padding: clamp(22px, 5vw, 52px); }
body .page-wrap .post-h1 { color: #202b39; font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.16; }
body .page-wrap .post-meta-bar { color: #75808d; border-color: #ece9e7; }
body .page-wrap .post-body { max-width: 780px; margin: 0 auto; color: #3e4957; font-size: 16px; line-height: 1.85; }
body .page-wrap .post-body h2 { margin-top: 34px; color: #253143; font-size: clamp(21px, 3vw, 28px); letter-spacing: -.02em; }
body .page-wrap .post-body h3 { margin-top: 25px; color: #303d4d; font-size: 19px; }
body .page-wrap .post-body img { height: auto; border-radius: 12px; }
body .page-wrap .deadline-card { border-width: 1px; border-radius: 14px; background: #fff6f4; }
body .page-wrap .share-bar { border: 1px solid #ece8e6; border-radius: 14px; background: #faf9f8; }

@media (max-width: 900px) {
    body .page-wrap .or-grid, body .page-wrap .list-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    body .page-wrap:not(.home-page) { padding: 16px 0 36px; }
    body .page-wrap .layout { gap: 20px; }
    body .sleek-breadcrumb-bar { margin-bottom: 16px !important; padding: 16px 0 !important; border-radius: 12px !important; }
    body .sleek-breadcrumb-bar .container, body .listing-hero .container { padding-right: 16px; padding-left: 16px; }
    body .page-wrap .or-grid, body .page-wrap .list-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body .page-wrap .or-card, body .page-wrap .list-card { display: grid !important; grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); min-height: 112px; }
    body .page-wrap .or-card-img, body .page-wrap .list-card-img { width: 100%; height: 100%; min-height: 112px; aspect-ratio: auto; }
    body .page-wrap .or-card-body, body .page-wrap .list-card-body { justify-content: center; gap: 7px; min-width: 0; padding: 10px 12px; }
    body .page-wrap .or-card-title, body .page-wrap .list-card-title { font-size: 12px; }
    body .page-wrap .or-card-meta, body .page-wrap .list-card-meta { gap: 4px 8px; font-size: 9.5px; }
    body .page-wrap .post-content-area { padding: 22px 17px; }
    body .page-wrap .post-h1 { font-size: clamp(27px, 8vw, 36px); }
    body .page-wrap .post-body { font-size: 15px; }
    body .page-wrap .post-meta-bar { gap: 8px 12px; font-size: 11px; }
    body .page-wrap .share-bar { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .desktop-nav .nav-link, body .page-wrap .or-card, body .page-wrap .card, body .page-wrap .list-card { transition: none !important; }
}

/* Search page refresh: styling only; form fields, labels, routes and handlers stay intact. */
body .search-hero {
    max-width: 1240px;
    margin: 24px auto 0;
    padding: clamp(32px, 5vw, 54px) 24px clamp(28px, 4vw, 42px) !important;
    overflow: visible !important;
    border: 1px solid #f0e2df;
    border-radius: 24px;
    background: radial-gradient(ellipse at 90% 10%, rgba(214,40,40,.09), transparent 31%), linear-gradient(120deg, #fff 0%, #fff 55%, #fff7f5 100%) !important;
    box-shadow: 0 14px 40px rgba(40, 32, 28, .055);
}
body .search-hero::before { display: none; }
body .search-hero-inner { max-width: 820px !important; text-align: left !important; }
body .search-hero h1 { margin-bottom: 8px !important; color: #202b39 !important; font-size: clamp(34px, 5vw, 52px) !important; font-weight: 800 !important; letter-spacing: -.045em !important; line-height: 1.08; }
body .search-hero h1 span { color: #d62828 !important; }
body .search-hero-sub { margin-bottom: 22px !important; color: #697685 !important; font-size: 15px !important; line-height: 1.6; }
body .search-bar-container {
    display: grid !important;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px !important;
    border: 1px solid #e8e1de !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(40, 32, 28, .09);
}
body .search-bar-container:focus-within { border-color: #d94b4e !important; box-shadow: 0 0 0 4px rgba(214,40,40,.09), 0 12px 32px rgba(40,32,28,.09) !important; }
body .search-select-wrapper { min-width: 0; }
body .search-context-selector { width: 100%; min-height: 48px; padding: 0 34px 0 13px !important; border: 1px solid #ece8e6 !important; border-radius: 10px !important; background-color: #faf9f8 !important; font-size: 13px !important; }
body .search-input-wrapper { min-width: 0; }
body .search-input-wrapper input { min-height: 48px; padding: 10px 14px !important; color: #263445 !important; font-size: 15px !important; }
body .search-input-wrapper input::placeholder { color: #98a1ab !important; opacity: 1; }
body .search-bar-container button { min-height: 48px; justify-content: center; padding: 0 22px !important; border-radius: 10px !important; background: #d62828 !important; box-shadow: 0 6px 15px rgba(214,40,40,.18); }
body .search-bar-container button:hover { background: #b51f27 !important; box-shadow: 0 9px 18px rgba(214,40,40,.23); }
body .search-suggestions-box { top: calc(100% + 7px) !important; border: 1px solid #e9e4e1 !important; border-radius: 12px !important; box-shadow: 0 15px 38px rgba(28,34,43,.14) !important; }
body .search-suggestions-box a { min-height: 48px; align-items: center; padding: 12px 15px !important; font-size: 13px !important; }
body .search-suggestions-box a:hover { background: #fff7f5 !important; }
body .filter-row-container { border: 0 !important; background: transparent !important; }
body .filter-chips-scroll { gap: 8px !important; padding: 18px 0 0 !important; }
body .filter-chip-item { min-height: 36px; padding: 7px 13px !important; border-color: #e8e4e2 !important; background: #fff !important; color: #5a6572 !important; font-size: 12px !important; }
body .filter-chip-item:hover { border-color: #d62828 !important; color: #bd2630 !important; }
body .filter-chip-item.active { border-color: #d62828 !important; background: #d62828 !important; color: #fff !important; box-shadow: 0 5px 13px rgba(214,40,40,.15); }
body .search-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 25px !important;
    padding: 30px 0 54px !important;
}
body .search-layout > div { min-width: 0; }
body .search-results-heading, body .landing-matrix-title { margin: 0 0 17px !important; color: #202b39 !important; font-size: clamp(22px, 3vw, 29px) !important; font-weight: 800 !important; letter-spacing: -.035em; }
body .search-results-grid { gap: 13px !important; }
body .search-card {
    min-height: 156px;
    gap: 0 !important;
    border: 1px solid #ebe7e5 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(32,36,43,.04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
body .search-card:hover { transform: translateY(-2px) !important; border-color: #e4b9b7 !important; box-shadow: 0 12px 27px rgba(32,36,43,.09) !important; }
body .search-card-img, body .search-card-img-placeholder { width: 190px !important; min-height: 156px; max-height: none !important; align-self: stretch; background: #f4f1ef !important; }
body .search-card-img img { min-height: 100%; object-fit: cover; }
body .search-card-img-placeholder { color: #bd4a4d !important; font-size: 27px !important; }
body .search-card-body { min-width: 0; gap: 7px !important; padding: 15px 18px !important; }
body .search-card-cat { padding: 4px 9px !important; border-radius: 999px !important; background: #fff0ed !important; color: #b92630 !important; font-size: 9px !important; letter-spacing: .06em; }
body .search-card-title { color: #263445 !important; font-family: var(--font) !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.42 !important; }
body .search-card-excerpt { margin: 0; color: #737f8c !important; font-size: 12px !important; line-height: 1.55 !important; }
body .search-card-meta { flex-wrap: wrap; gap: 7px 15px !important; color: #818b96 !important; font-size: 10px !important; }
body .search-pagination { flex-wrap: wrap; gap: 7px !important; }
body .search-pagination a, body .search-pagination span { min-width: 39px; height: 39px; border-radius: 10px !important; background: #fff; }
body .search-pagination a.active, body .search-pagination span.active { border-color: #d62828 !important; background: #d62828 !important; color: #fff !important; }
body .search-empty-card { padding: clamp(30px, 6vw, 60px) 24px !important; border: 1px solid #ebe7e5 !important; border-radius: 18px !important; box-shadow: 0 8px 25px rgba(32,36,43,.045); }
body .search-empty-card h3 { color: #263445 !important; font-family: var(--font) !important; font-size: 21px !important; }
body .search-empty-card p { max-width: 490px; margin: 0 auto !important; color: #737f8c !important; line-height: 1.65; }
body .search-empty-card .icon-box { background: #fff1ef !important; }
body .landing-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
body .landing-matrix-card { min-height: 70px; gap: 11px !important; padding: 13px !important; border: 1px solid #ebe7e5 !important; border-radius: 13px !important; box-shadow: 0 4px 14px rgba(32,36,43,.035); }
body .landing-matrix-card:hover { border-color: #e4b9b7 !important; background: #fffaf9 !important; box-shadow: 0 10px 22px rgba(32,36,43,.08) !important; }
body .matrix-color-dot { width: 9px; height: 9px; }
body .matrix-name { color: #344152 !important; font-size: 12px !important; line-height: 1.35; }
body .matrix-count { background: #f5f2f0 !important; color: #737f8c !important; }
body .search-sidebar { min-width: 0; }
body .s-widget { border: 1px solid #ebe7e5 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 7px 22px rgba(32,36,43,.045); }
body .s-widget-head { padding: 15px 17px !important; border-bottom: 1px solid #f0edeb !important; color: #293747 !important; font-size: 11px !important; letter-spacing: .07em; }
body .s-widget-head i { color: #d62828 !important; }
body .deadline-filter-form { gap: 10px !important; padding: 16px !important; }
body .deadline-radio-label { color: #536071 !important; font-size: 12px !important; }
body .deadline-radio-label input[type="radio"] { width: 17px !important; height: 17px !important; }
body .deadline-filter-btn { min-height: 42px; border-radius: 10px !important; }
@media (max-width: 950px) {
    body .search-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 15px !important; padding-top: 22px !important; }
    body .search-layout > div { order: 2; width: 100%; }
    body .search-sidebar { order: 1; width: 100%; }
    body .search-sidebar .s-widget { border: 0 !important; background: transparent !important; box-shadow: none !important; }
    body .search-sidebar .s-widget-head { padding: 0 4px 8px !important; color: #7d8793 !important; }
    body .search-sidebar .s-widget-head i { display: none !important; }
    body .deadline-filter-form { gap: 8px !important; padding: 0 3px 8px !important; }
}
@media (max-width: 640px) {
    body .search-hero { margin: 12px 12px 0; padding: 28px 16px 20px !important; border-radius: 18px; }
    body .search-hero h1 { font-size: clamp(31px, 9vw, 40px) !important; }
    body .search-hero-sub { margin-bottom: 17px !important; font-size: 13px !important; }
    body .search-bar-container { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px !important; }
    body .search-select-wrapper { grid-column: 1 / -1; }
    body .search-context-selector { min-height: 42px; }
    body .search-input-wrapper { grid-column: 1; grid-row: 2; }
    body .search-input-wrapper input { min-height: 44px; padding: 8px !important; font-size: 13px !important; }
    body .search-bar-container button { grid-column: 2; grid-row: 2; min-height: 44px; padding: 0 14px !important; font-size: 12px !important; }
    body .filter-chips-scroll { padding-top: 13px !important; }
    body .search-layout { padding: 22px 0 36px !important; }
    body .search-card { min-height: 124px; border-radius: 13px !important; }
    body .search-card-img, body .search-card-img-placeholder { width: 108px !important; min-height: 124px; }
    body .search-card-body { gap: 5px !important; padding: 10px 11px !important; }
    body .search-card-title { font-size: 12px !important; }
    body .search-card-excerpt { display: none; }
    body .search-card-meta { gap: 4px 9px !important; font-size: 9px !important; }
    body .landing-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    body .landing-matrix-card { min-height: 62px; gap: 8px !important; padding: 9px !important; }
    body .matrix-name { font-size: 10.5px !important; }
}
@media (max-width: 360px) {
    body .search-card-img, body .search-card-img-placeholder { width: 88px !important; }
    body .search-card-meta { display: none; }
    body .landing-matrix-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
    body .search-card, body .landing-matrix-card, body .search-bar-container, body .search-bar-container button { transition: none !important; }
}

/* Compact category directory for the right-side Explore widget. */
body .explore-widget-sticky {
    overflow: hidden !important;
    border: 1px solid #ece5e2 !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 8px 25px rgba(32,36,43,.055) !important;
}
body .explore-widget-sticky > div:first-child {
    min-height: 52px;
    padding: 14px 16px !important;
    background: linear-gradient(110deg, #c9232c, #de4543) !important;
    color: #fff !important;
    font-size: 11px !important;
    letter-spacing: .075em !important;
}
body .explore-widget-sticky > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
}
body .explore-widget-sticky > div:nth-child(2) > div {
    min-width: 0;
    padding: 9px !important;
    border: 1px solid #efebe9;
    border-radius: 11px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body .explore-widget-sticky > div:nth-child(2) > div:hover { transform: translateY(-1px); border-color: #e9c6c2; background: #fff9f7; }
body .explore-widget-sticky > div:nth-child(2) > div > a:first-child {
    min-height: 32px;
    margin: 0 !important;
    color: #364253 !important;
    font-size: 10px !important;
    line-height: 1.35;
}
body .explore-widget-sticky > div:nth-child(2) > div > a:first-child i { color: #d13a3f !important; }
body .explore-widget-sticky > div:nth-child(2) > div > div { display: none !important; }
@media (max-width: 640px) {
    body .explore-widget-sticky > div:nth-child(2) { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
    body .explore-widget-sticky > div:nth-child(2) > div { transition: none; }
}

/* Shared polish for education, blog and tools landing pages. */
body :is(.syl-wrap, .pyq-wrap, .study-wrap, .full-width-blog-wrap, .th-tools, .th-why, .th-how, .th-faq, .th-cta) {
    color: #243244;
}
body :is(.syl-wrap, .pyq-wrap, .study-wrap, .full-width-blog-wrap, .th-tools, .th-why, .th-how, .th-faq, .th-cta) :is(*, *::before, *::after) { box-sizing: border-box; }
body :is(.syl-hero, .pyq-hero, .th-hero) {
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(35, 47, 62, .08);
}
body .syl-hero { background: linear-gradient(125deg, #b91f2b, #e4544c) !important; }
body .pyq-hero { background: linear-gradient(125deg, #b91f2b, #e4544c) !important; }
body :is(.syl-cat-card, .syl-sub-card, .syl-topic-card, .pyq-cat-card, .pyq-sub-card, .pyq-file-card, .ccard, .subcard, .mcard, .blog-premium-card, .tc) {
    border-radius: 16px !important;
    box-shadow: 0 5px 18px rgba(33, 43, 54, .045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body :is(.syl-cat-card, .syl-sub-card, .syl-topic-card, .pyq-cat-card, .pyq-sub-card, .pyq-file-card, .ccard, .subcard, .mcard, .blog-premium-card, .tc):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(33, 43, 54, .09);
}
body :is(.ccard, .subcard, .mcard, .syl-cat-card, .syl-sub-card, .syl-topic-card, .pyq-cat-card, .pyq-sub-card, .pyq-file-card, .blog-premium-card, .tc) :is(h2, h3, h4) { line-height: 1.35; }
body :is(.blog-modern-master-grid, .syl-cat-grid, .syl-sub-grid, .syl-ssub-grid, .syl-topic-grid, .pyq-cat-grid, .pyq-sub-grid, .pyq-files-grid) { align-items: stretch; }
body .blog-modern-master-grid { gap: clamp(14px, 2vw, 24px); }
body .blog-premium-card { min-width: 0; }
body .blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
body .blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
body .blog-card-info-area { padding: clamp(15px, 2vw, 22px); }
body .blog-card-h3 { line-height: 1.35; }
body .th-hero { border-radius: 0 !important; box-shadow: none; background: linear-gradient(180deg, #fff 0%, #fff8f7 100%) !important; }
body .th-hgrid { opacity: .5; }
body :is(.th-pill, .th-f.active) { background-color: #c9232c !important; border-color: #c9232c !important; color: #fff !important; }
body .th-dot, body .th-showing i { background: #c9232c !important; color: #c9232c !important; }
body .th-accent { background: linear-gradient(135deg, #b91f2b, #e4544c) !important; -webkit-background-clip: text !important; background-clip: text !important; }
body :is(.th-f:hover, .th-search:focus-within) { border-color: #d13a3f !important; color: #bd2932 !important; }
body .th-search:focus-within { box-shadow: 0 0 0 3px rgba(201, 35, 44, .1) !important; }
body .th-tools { background: #f8f9fb !important; }
body .tc { border-color: #e9edf2 !important; }
body :is(.snav, .snav-in) { max-width: 100%; }
body .snav-a.on { color: #c9232c !important; border-color: #c9232c !important; }
body :where(.syl-wrap, .pyq-wrap, .study-wrap, .full-width-blog-wrap, .th-tools) :where(img, video, iframe) { max-width: 100%; }

@media (max-width: 760px) {
    body :is(.syl-wrap, .pyq-wrap, .study-wrap, .full-width-blog-wrap) { padding-left: 16px; padding-right: 16px; }
    body :is(.syl-hero, .pyq-hero) { border-radius: 17px !important; }
    body .blog-modern-master-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 15px; }
    body .th-bar { grid-template-columns: minmax(0, 1fr); }
    body .th-hero-inner { gap: 20px; }
    body .th-hero-right { min-width: 0; align-items: flex-start; }
    body .th-quick { justify-content: flex-start; }
    body :is(.th-why, .th-how, .th-faq, .th-cta) { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
    body .blog-modern-master-grid { grid-template-columns: minmax(0, 1fr); }
    body :is(.syl-cat-grid, .syl-sub-grid, .syl-ssub-grid, .syl-topic-grid, .pyq-cat-grid, .pyq-sub-grid, .pyq-files-grid) { grid-template-columns: minmax(0, 1fr) !important; }
    body .th-filters { gap: 6px; }
    body .th-f { padding: 7px 11px; }
    body .th-stats-box { max-width: 100%; padding: 12px 14px; }
    body .th-stat { padding: 0 10px; }
}
/* Mobile layout pass for every primary navigation route. */
@media (max-width: 767px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
    .main-header { position: relative !important; width: 100%; }
    .main-header > .container { padding-right: 12px !important; padding-left: 12px !important; }
    .main-header .header-inner { min-height: 60px !important; max-height: none !important; padding: 3px 0 !important; gap: 8px !important; }
    .main-header .logo { max-width: calc(100% - 94px); }
    .main-header .logo-img { max-width: min(122px, 36vw) !important; height: auto !important; object-fit: contain !important; }
    .main-header .header-actions { gap: 4px !important; }
    .main-header .icon-btn, .main-header .hamburger { width: 40px !important; height: 40px !important; min-width: 40px; }
    .mob-overlay { z-index: 100000 !important; }
    .mob-menu { z-index: 100001 !important; width: min(400px, 90vw) !important; max-width: 100vw; height: 100vh !important; height: 100dvh !important; padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
    .mob-head { position: sticky; top: 0; z-index: 2; min-height: 58px; padding: 12px 17px !important; }
    .mob-head button { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; }
    .mob-link { min-height: 48px; padding: 12px 17px !important; line-height: 1.4; }
    .mob-top-row { display: flex; align-items: stretch; border-bottom: 1px solid #f0e8e7; }
    .mob-top-row > .mob-link { flex: 1; min-width: 0; border: 0; }
    .mob-top-row > .mob-toggle { flex: 0 0 52px; width: 52px; min-height: 48px; }
    .mob-top-row .mob-link > i:first-child, .mob-nav > .mob-link > i:first-child { flex: 0 0 22px; width: 22px; text-align: center; }
    .mob-link-label { flex: 1; }
    .mob-link-sm { min-height: 43px; padding-left: 29px !important; }
    .mob-link-xs { min-height: 40px; padding-left: 39px !important; }
    .mob-sub-nested { max-width: 100%; }
    .mob-bottom-nav { height: auto !important; min-height: 62px; padding: 5px 5px calc(5px + env(safe-area-inset-bottom)) !important; }
    .mob-nav-item { min-width: 0; gap: 3px !important; font-size: 10px !important; line-height: 1.1; white-space: nowrap; }
    .mob-nav-item i { font-size: 18px !important; }
    .mob-nav-search { flex: 0 0 48px; width: 48px !important; height: 48px !important; border-radius: 15px !important; font-size: 20px !important; transform: translateY(-10px) !important; }

    body .page-wrap { width: 100%; min-width: 0; padding-top: 14px; padding-bottom: 24px; }
    body .page-wrap > .container, body .page-wrap .container { min-width: 0; }
    body .page-wrap .layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
    body .page-wrap :is(.main-col, .sidebar) { width: 100%; min-width: 0; max-width: 100%; }
    body .page-wrap .sidebar { grid-template-columns: minmax(0, 1fr); }
    body :is(.category-page-title, .listing-hero-title, .pyq-hero-title, .syl-hero h1) { overflow-wrap: anywhere; }
    body .sleek-breadcrumb-inner { align-items: flex-start; }
    body .sleek-actions { flex-wrap: wrap; gap: 8px; }
    body .sleek-actions > * { min-width: 0; max-width: 100%; }
    body .listing-breadcrumb { max-width: 100%; overflow-wrap: anywhere; }
    body :is(.list-cards, .blog-modern-master-grid, .th-grid, .th-fgrid) { min-width: 0; }
    body .list-card { min-width: 0; max-width: 100%; }
    body .list-card-body { min-width: 0; overflow-wrap: anywhere; }
    body :is(.fbar, .syl-toolbar, .pyq-toolbar) { flex-wrap: wrap; gap: 9px; }
    body :is(.fbar, .syl-toolbar, .pyq-toolbar) :is(input, select, button) { max-width: 100%; }
    body .snav-in { padding-right: 14px; padding-left: 14px; }
    body .bc-in { padding-right: 14px; padding-left: 14px; overflow-x: auto; white-space: nowrap; }
    body .hero-in { padding-right: 14px; padding-left: 14px; }
    body .pghd-in { min-width: 0; }
    body .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    body .layout :is(.sm-side, .sidebar) { min-width: 0; }
    body .th-bar { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
    body .th-filter-row, body .th-search { width: 100%; min-width: 0; }
    body .th-filters { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    body .th-filters > * { flex: 0 0 auto; }
    body .th-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
    body.cf-tool-page :where([class*="grid"] > *, [class*="layout"] > *, [class*="workspace"] > *) { min-width: 0; }
    body.cf-tool-page :where(.tool-wrap, [class$="-wrap"], [class$="-container"]) { max-width: 100%; margin-top: 24px; }
    body.cf-tool-page :where(canvas, svg, video, iframe) { max-width: 100%; }
    body :is(.post-body, .blog-card-info-area, .tc) { overflow-wrap: anywhere; }
    body .post-body :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-footer { padding-bottom: 0 !important; }
}
@media (max-width: 420px) {
    .main-header > .container { padding-right: 9px !important; padding-left: 9px !important; }
    .main-header .logo-img { max-width: min(112px, 34vw) !important; height: auto !important; }
    .main-header .icon-btn, .main-header .hamburger { width: 36px !important; min-width: 36px; }
    .mob-nav-item { font-size: 9px !important; }
    .mob-nav-item i { font-size: 16px !important; }
    body .cgrid { gap: 7px; }
    body .ccard, body .subcard { min-width: 0; }
    body .ccard-name, body .subcard-name { overflow-wrap: anywhere; }
    body .th-hero-left, body .th-hero-right { min-width: 0 !important; width: 100%; }
    body .th-stats-box { width: 100%; justify-content: space-around; }
    body .th-stat { min-width: 0; padding: 0 7px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body :is(.syl-cat-card, .syl-sub-card, .syl-topic-card, .pyq-cat-card, .pyq-sub-card, .pyq-file-card, .ccard, .subcard, .mcard, .blog-premium-card, .tc) { transition: none !important; }
}

/* Header visual refresh: keep navigation markup, routes and behavior unchanged. */
.main-header {
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #f0dedd !important;
    box-shadow: 0 6px 24px rgba(38, 42, 50, .07) !important;
}
.main-header > .container { max-width: 1320px; }
.main-header .header-inner { min-height: 72px !important; padding: 6px 0 !important; gap: 14px !important; }
.main-header .logo { min-width: 0; text-decoration: none; }
.main-header .logo-img { height: auto !important; max-width: 164px !important; }
.main-header .logo-leaf { font-size: 24px; }
.main-header .logo-name { letter-spacing: -.45px; }
.desktop-nav { margin: 0 4px !important; }
.desktop-nav > ul { gap: 3px !important; }
.desktop-nav .nav-link {
    min-height: 40px;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}
.desktop-nav .nav-link:hover, .desktop-nav .nav-link.active { background: #fff0ee !important; color: #b9232b !important; }
.desktop-nav .nav-link:focus-visible, .drop-link:focus-visible, .mega-link:focus-visible,
.header-actions .icon-btn:focus-visible, .header-actions .hamburger:focus-visible {
    outline: 3px solid rgba(214,40,40,.32) !important;
    outline-offset: 2px;
}
.desktop-nav .has-drop:focus-within > ul.dropdown,
.desktop-nav .has-drop:focus-within > .mega-drop { display: flex !important; opacity: 1; visibility: visible; transform: translateY(0); }
.desktop-nav .has-sub-drop:focus-within > ul.nested-dropdown { display: flex !important; }
.desktop-nav ul.dropdown, .desktop-nav ul.nested-dropdown, .desktop-nav .mega-drop {
    border: 1px solid #f0e4e2 !important;
    border-top: 3px solid #d62828 !important;
    border-radius: 13px !important;
    box-shadow: 0 18px 42px rgba(35,38,46,.16) !important;
}
.desktop-nav .drop-link { min-height: 42px; border-radius: 7px; }
.desktop-nav .mega-drop { padding: 22px 24px !important; }
.header-actions { gap: 8px !important; }
.header-actions .icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-color: #e8ebef !important;
    background: #f8f9fb !important;
    color: #354052 !important;
}
.header-actions .icon-btn:hover { border-color: #d62828 !important; background: #d62828 !important; color: #fff !important; }
.mob-menu { background: #fff !important; box-shadow: 20px 0 55px rgba(30,34,42,.2) !important; }
.mob-head { background: linear-gradient(120deg,#fff 55%,#fff5f3) !important; }
.mob-brand { color: #253143 !important; }
.mob-link { transition: background .18s ease, color .18s ease, padding-left .18s ease; }
.mob-link:hover, .mob-link:focus-visible { padding-left: 21px !important; background: #fff4f2 !important; color: #b9232b !important; }
.mob-toggle { border-radius: 10px; }
.mob-toggle[aria-expanded="true"] { background: #fff1ef; color: #d62828; }
.mob-bottom-nav { border-top-color: #eceff3 !important; box-shadow: 0 -5px 22px rgba(30,34,42,.09) !important; }
.mob-nav-search { background: linear-gradient(145deg,#e0444a,#c5222d) !important; box-shadow: 0 8px 20px rgba(197,34,45,.28) !important; }

@media (max-width: 1024px) {
    .main-header .header-inner { min-height: 64px !important; max-height: none !important; padding: 4px 0 !important; }
    .main-header .logo-img { width: 116px !important; height: auto !important; max-width: min(116px, 34vw) !important; }
    .main-header .header-actions { gap: 6px !important; }
}
@media (max-width: 767px) {
    .main-header .header-inner { min-height: 60px !important; padding: 3px 0 !important; }
    .main-header .logo-img { width: 112px !important; height: auto !important; max-width: min(112px, 34vw) !important; }
    .mob-head { padding-top: max(10px, env(safe-area-inset-top)) !important; }
}
@media (max-width: 420px) {
    .main-header .logo-img { width: 104px !important; height: auto !important; max-width: min(104px, 31vw) !important; }
}
/* Keep the long desktop menu from spilling into the logo at narrower laptop widths. */
@media (min-width: 1025px) and (max-width: 1280px) {
    .main-header .desktop-nav { display: none !important; }
    .main-header .hamburger { display: flex !important; }
}

/* ── Practice Universal Subnav & Base ── */
.prac-subnav { background: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.03); position: relative; z-index: 99; }
.prac-subnav-inner { display: flex; align-items: center; gap: 16px; min-height: 50px; }
.prac-subnav-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: #0f172a; text-decoration: none; flex-shrink: 0; padding-right: 14px; border-right: 1px solid #e2e8f0; }
.prac-subnav-dot { width: 8px; height: 8px; background: #dc2626; border-radius: 50%; display: inline-block; }
.prac-subnav-links { display: flex; align-items: center; gap: 4px; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.prac-subnav-links::-webkit-scrollbar { display: none; }
.prac-subnav-links a { padding: 6px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: #475569; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.prac-subnav-links a:hover { background: #f1f5f9; color: #0f172a; }
.prac-subnav-links a.active { background: #fee2e2; color: #dc2626; font-weight: 600; }
.prac-subnav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.prac-user-badge { display: flex; align-items: center; gap: 8px; }
.prac-avatar { width: 28px; height: 28px; border-radius: 50%; background: #dc2626; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.prac-username { font-size: 13px; font-weight: 600; color: #1e293b; }
.prac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; font-family: inherit; transition: all .15s; line-height: 1.4; }
.prac-btn-outline { background: #ffffff; color: #334155; border: 1px solid #cbd5e1; }
.prac-btn-outline:hover, .prac-btn-outline.active { border-color: #94a3b8; background: #f8fafc; color: #0f172a; }
.prac-btn-cta { background: #dc2626; color: #ffffff; border: 1px solid #dc2626; }
.prac-btn-cta:hover, .prac-btn-cta.active { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
.prac-btn-sm { padding: 5px 12px; font-size: 12.5px; }
@media (max-width: 768px) {
  .prac-subnav-inner { gap: 8px; min-height: 46px; }
  .prac-subnav-brand { font-size: 13.5px; padding-right: 8px; }
  .prac-username { display: none; }
}
.prac-page { max-width: 1200px; margin: 0 auto; padding: 32px 20px 64px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #1e293b; }
.form-control { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; color: #0f172a; background: #ffffff; outline: none; transition: border-color .15s; box-sizing: border-box; }
.form-control:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.form-control::placeholder { color: #94a3b8; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.alert { padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.divider-text { display: flex; align-items: center; gap: 12px; color: #64748b; font-size: 13px; margin: 20px 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-top: 1px solid #e2e8f0; }