:root{
    --blue:#1769d1;
    --blue-dark:#0f4fa8;
    --blue-soft:#eef5ff;
    --navy:#172033;
    --text:#202733;
    --muted:#6b7482;
    --line:#e3e8ef;
    --bg:#f5f7fa;
    --white:#fff;
    --success:#138a5b;
    --radius:10px;
    --shadow:0 2px 10px rgba(20,35,55,.045);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:Tahoma,"Segoe UI",Arial,sans-serif;
    line-height:1.75;
}
a{color:inherit}
.wrap{width:min(1065px,calc(100% - 32px));margin-inline:auto}

.top{
    background:var(--white);
    border-bottom:1px solid var(--line);
}
.nav{
    min-height:66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.logo{
    color:var(--blue);
    font-size:1.35rem;
    font-weight:800;
    text-decoration:none;
    letter-spacing:-.02em;
}
.nav>a:not(.logo){
    color:var(--muted);
    text-decoration:none;
    font-size:.9rem;
}
.nav>a:not(.logo):hover{color:var(--blue)}

.site-layout{
    display:grid;
    grid-template-columns:255px minmax(0,780px);
    gap:30px;
    justify-content:center;
    align-items:start;
    padding:26px 0 60px;
}

.content-column{min-width:0}

.category-sidebar{
    position:sticky;
    top:16px;
    height:calc(100vh - 32px);
}
.sidebar-card{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px;
}
.sidebar-card h2{
    margin:0 0 10px;
    color:var(--navy);
    font-size:1rem;
}
.category-search{flex:0 0 auto;margin-bottom:9px}
.category-search input{
    display:block;
    width:100%;
    border:1px solid #d5dce5;
    border-radius:7px;
    background:#fff;
    color:var(--text);
    padding:8px 10px;
    font:inherit;
    font-size:.85rem;
    outline:none;
}
.category-search input:focus{border-color:#8db6eb;box-shadow:0 0 0 3px var(--blue-soft)}
.category-menu{
    display:flex;
    flex-direction:column;
    gap:1px;
}
.sidebar-card>.category-menu{
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
    padding-inline-end:3px;
}
.category-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 8px;
    border-radius:6px;
    text-decoration:none;
    color:#384354;
    font-size:.86rem;
}
.category-menu a:hover{background:#f3f6fa;color:var(--blue)}
.category-count{
    color:#8a94a2;
    font-size:.74rem;
    white-space:nowrap;
}
.current-category{
    display:block;
    color:var(--blue);
    font-weight:700;
    padding:6px 8px 8px;
    text-decoration:none;
}

.mobile-categories{display:none}

.search{
    display:flex;
    gap:8px;
    margin-bottom:22px;
}
.search input{
    flex:1;
    min-width:0;
    border:1px solid #cfd7e1;
    border-radius:8px;
    background:var(--white);
    color:var(--text);
    padding:11px 13px;
    font:inherit;
    outline:none;
    box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.search input:focus{border-color:#7eace5;box-shadow:0 0 0 3px var(--blue-soft)}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:8px 17px;
    border:1px solid var(--blue);
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.gray{
    background:#fff;
    border-color:#cfd7e1;
    color:#465264;
}
.btn.gray:hover{background:#f4f6f8;border-color:#b9c3cf}

h1.title{
    margin:0 0 16px;
    color:var(--navy);
    font-size:1.35rem;
    line-height:1.45;
}
a.title{
    color:var(--navy);
    text-decoration:none;
}
a.title:hover{color:var(--blue)}

.card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px 18px;
    margin-bottom:10px;
}
.card>.title{
    display:block;
    font-size:1rem;
    font-weight:700;
    line-height:1.65;
}
.card p{
    margin:7px 0 8px;
    color:#4d5868;
    font-size:.9rem;
}
.muted{color:var(--muted);font-size:.8rem}

.pagination{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:18px;
}

@media(max-width:900px){
    .site-layout{
        grid-template-columns:minmax(0,780px);
        padding-top:14px;
    }
    .category-sidebar{display:none}
    .mobile-categories{
        display:block;
        background:var(--white);
        border:1px solid var(--line);
        border-radius:8px;
        margin-bottom:12px;
        box-shadow:var(--shadow);
    }
    .mobile-categories summary{
        cursor:pointer;
        list-style:none;
        padding:8px 12px;
        color:var(--navy);
        font-weight:700;
        font-size:.9rem;
    }
    .mobile-categories summary::-webkit-details-marker{display:none}
    .mobile-categories summary:after{content:"⌄";float:left;color:var(--muted)}
    .mobile-categories .category-menu{
        max-height:45vh;
        overflow-y:auto;
        border-top:1px solid var(--line);
        padding:7px;
    }
    .mobile-categories .category-menu a{padding:8px}
}

@media(max-width:560px){
    .wrap{width:calc(100% - 20px)}
    .nav{min-height:58px}
    .logo{font-size:1.2rem}
    .site-layout{padding-bottom:35px}
    .search{gap:6px}
    .search input{padding:9px 10px}
    .btn{min-height:40px;padding:7px 12px}
    .card{padding:13px 14px}
    .card>.title{font-size:.96rem}
    .card p{font-size:.86rem}
}


/* Category back navigation */
.category-back{
    display:block;
    padding:6px 8px;
    margin:0 0 5px;
    border-radius:6px;
    color:var(--muted);
    text-decoration:none;
    font-size:.82rem;
    font-weight:600;
}
.category-back:hover{
    background:var(--blue-soft);
    color:var(--blue);
}


/* Header/main alignment */
.top .wrap{
    width:min(1065px,calc(100% - 32px));
}

/* Minimal homepage */
.home-page .top{
    direction:rtl;
}

.home-main{
    width:min(760px,calc(100% - 32px));
    margin:0 auto;
    min-height:calc(100vh - 66px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 0 90px;
}

.home-brand{
    color:var(--navy);
    font-size:4.2rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-.05em;
    margin-bottom:28px;
}

.home-brand span{
    color:var(--blue);
    font-weight:700;
}

.home-search{
    width:min(620px,100%);
    display:flex;
    flex-direction:column;
    align-items:center;
}

.home-search input{
    width:100%;
    height:52px;
    border:1px solid #cfd7e1;
    border-radius:26px;
    background:#fff;
    color:var(--text);
    padding:0 20px;
    font:inherit;
    font-size:.95rem;
    outline:none;
    box-shadow:0 1px 5px rgba(20,35,55,.08);
    text-align:right;
    direction:rtl;
}

.home-search input:focus{
    border-color:#8db6eb;
    box-shadow:0 1px 7px rgba(23,105,209,.14);
}

.home-actions{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:18px;
}

.home-actions .btn{
    min-width:120px;
}

.home-categories{
    width:min(620px,100%);
    margin-top:24px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
}

.home-categories summary{
    cursor:pointer;
    list-style:none;
    padding:10px 14px;
    color:var(--navy);
    font-size:.9rem;
    font-weight:700;
    text-align:center;
}

.home-categories summary::-webkit-details-marker{
    display:none;
}

.home-categories summary:after{
    content:"⌄";
    margin-right:8px;
    color:var(--muted);
}

.home-category-list{
    max-height:280px;
    overflow-y:auto;
    border-top:1px solid var(--line);
    padding:7px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;
}

.home-category-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 9px;
    border-radius:6px;
    color:#384354;
    text-decoration:none;
    font-size:.84rem;
}

.home-category-link:hover{
    background:var(--blue-soft);
    color:var(--blue);
}

.home-category-link small{
    color:#8a94a2;
    font-size:.72rem;
}

.search-excerpt{
    margin:8px 0;
    color:#4d5868;
    font-size:.9rem;
    line-height:1.8;
}

.search-excerpt mark{
    background:#fff1a8;
    color:inherit;
    padding:0 2px;
    border-radius:2px;
}

/* Question page */
.question-layout{
    display:grid;
    grid-template-columns:minmax(0,780px) 255px;
    gap:30px;
    justify-content:center;
    padding:26px 0 60px;
}
.question-title{margin:10px 0 18px;color:var(--navy);font-size:1.45rem;line-height:1.7}
.question-body,.answer-body{color:#374151;line-height:2}
.question-meta{margin-top:18px}
.question-categories{display:flex;flex-wrap:wrap;gap:6px}
.category-badge{background:var(--blue-soft);color:var(--blue);border-radius:20px;padding:3px 10px;text-decoration:none;font-size:.8rem}
.section-title{color:var(--navy);font-size:1.2rem}
.question-sidebar{position:sticky;top:16px;height:max-content}
.related-link{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy);line-height:1.6}
.related-link:hover{color:var(--blue)}
.related-link small{display:block}
.related-type{display:block;color:var(--blue);font-size:.72rem;font-weight:700;margin-bottom:2px}
.related-heading{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line)}
.duplicate-link{background:var(--blue-soft);border-radius:7px;padding:9px;margin:7px 0}
.question-nav{display:flex;justify-content:space-between;margin-top:20px}

@media(max-width:900px){
    .question-layout{grid-template-columns:1fr}
    .question-sidebar{position:static;order:2}
    .home-main{min-height:calc(100vh - 58px)}
}

@media(max-width:560px){
    .wrap{width:calc(100% - 20px)}
    .top .wrap{width:calc(100% - 20px)}
    .home-main{width:calc(100% - 20px);padding-top:20px}
    .home-brand{font-size:3.2rem;margin-bottom:24px}
    .home-actions .btn{min-width:112px}
    .home-category-list{grid-template-columns:1fr}
}


/* Header logo colors */
.top .logo{color:#111827;}
.top .logo .logo-com{color:var(--blue);}


/* Search results page */
.results-search{
    display:flex;
    gap:8px;
    align-items:center;
    margin:12px 0 18px;
    max-width:760px;
}

.results-search input{
    flex:1;
    min-width:0;
    height:42px;
    border:1px solid #cfd7e1;
    border-radius:7px;
    background:#fff;
    color:var(--text);
    padding:0 13px;
    font:inherit;
    outline:none;
    direction:rtl;
    text-align:right;
}

.results-search input:focus{
    border-color:#8db6eb;
    box-shadow:0 1px 5px rgba(23,105,209,.12);
}

.results-search .btn{
    white-space:nowrap;
}

.results-summary{
    margin:0 0 16px;
    font-size:.82rem;
}

@media(max-width:560px){
    .results-search{
        width:100%;
    }

    .results-search .btn{
        padding-inline:13px;
    }
}


/* Question page: breadcrumb and hierarchy */
.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:12px;
    color:#8a94a2;
    font-size:.78rem;
    line-height:1.6;
}

.breadcrumbs a{
    color:var(--blue);
    text-decoration:none;
}

.breadcrumbs a:hover{
    text-decoration:underline;
}

.breadcrumbs span:last-child{
    color:#687385;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.question-meta-row{
    display:flex;
    align-items:center;
    margin-top:18px;
}

.answer-count-badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:3px 11px;
    border-radius:16px;
    background:var(--blue-soft);
    color:var(--blue);
    font-size:.82rem;
    font-weight:700;
}

.answer-card{
    margin-bottom:12px;
}

@media(max-width:560px){
    .breadcrumbs{
        margin-bottom:9px;
        font-size:.74rem;
    }
}


/* Category landing page */
.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:12px;
    color:#8a94a2;
    font-size:.78rem;
}
.breadcrumbs a{color:var(--blue);text-decoration:none}
.category-hero{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px;
    margin-bottom:22px;
}
.category-hero .title{margin:0 0 6px}
.category-section{margin-top:24px}
.section-heading{
    margin:0 0 10px;
    color:var(--navy);
    font-size:1.05rem;
}
.category-question{margin-bottom:9px}
.category-question .title{display:block;margin-bottom:5px}
.category-pagination{
    display:flex;
    justify-content:space-between;
    margin-top:16px;
}
.category-discovery{
    margin-top:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:15px;
}
.category-discovery-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
    max-height:240px;
    overflow-y:auto;
}
.category-discovery-list a{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:7px 8px;
    border-radius:6px;
    color:#384354;
    text-decoration:none;
    font-size:.82rem;
}
.category-discovery-list a:hover{
    background:var(--blue-soft);
    color:var(--blue);
}
.category-discovery-list small{color:#8a94a2}
@media(max-width:560px){
    .category-discovery-list{grid-template-columns:1fr}
}