/* Ejaaba: a calm Arabic classic Q&A identity, not a Google-branded clone. */
:root{--blue:#2364b1;--deep:#164b89;--ink:#243245;--muted:#758397;--line:#dae2eb;--soft:#f4f7fb;--green:#218451;--gold:#b77d10;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f9fc;color:var(--ink);font-family:Tahoma,"Noto Sans Arabic",Arial,sans-serif;font-size:13px;line-height:1.8}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;color:#0f4a8f}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1{font-size:21px;line-height:1.6}h2{font-size:17px;line-height:1.6}h3{font-size:15px;line-height:1.6}
.sr{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.site-width{max-width:1260px;margin:auto;padding-inline:17px}
.topline{background:#e9eff7;border-bottom:1px solid #d7e1ed;color:#546b85;font-size:11px}
.top-row{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:32px;flex-wrap:wrap}
.topline a{font-weight:bold}
.inline{display:inline;margin:0}
.as-link{background:transparent;border:0;padding:0;color:var(--blue);font-size:inherit}
.dim{color:var(--muted)}.tiny{font-size:11px}.smaller{font-size:11px}
.bubble{border-radius:10px;padding:1px 5px;background:#d43838;color:white}
.masthead{display:flex;align-items:center;justify-content:space-between;min-height:112px;gap:24px;background:#fff}
.brand{color:#2c66b7;display:flex;flex-direction:column;min-width:195px;position:relative;text-align:center;line-height:1.15}
.brand:hover{text-decoration:none}
.brand-text{font-size:44px;letter-spacing:-2px;font-weight:bold;text-shadow:1px 1px #e6eefb}
.brand-dots{display:flex;gap:5px;justify-content:center;padding-top:4px;direction:ltr}
.brand-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#4b85ce}
.brand-dots i:nth-child(2){background:#cd454c}
.brand-dots i:nth-child(3){background:#dfb136}
.brand-dots i:nth-child(4){background:#57a06b}
.brand small{font-size:12px;color:#78899e;padding:7px 0 0;letter-spacing:1px}
.head-intro{display:flex;flex-direction:column;gap:5px;color:#586b80}
.head-intro strong{font-size:17px;color:#374d67}.head-intro span{font-size:12px}
.ask-big,.mini-ask{background:linear-gradient(#3385d9,#2365ab);color:white;border:1px solid #225b9d;border-radius:4px;padding:10px 18px;font-weight:bold;box-shadow:0 2px 0 #dce7f2;white-space:nowrap}
.ask-big:hover,.mini-ask:hover{background:var(--deep);text-decoration:none;color:white}
.nav-strip{height:43px;background:#f0f4fa;border:1px solid #d1dbe9;border-bottom:3px solid #7aa9d7;display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.nav-strip a{padding:9px 14px;font-weight:bold;color:#476484;font-size:12px;border-left:1px solid #dce3ed}
.nav-strip a:hover,.nav-strip a.selected{background:#fff;color:var(--deep);text-decoration:none}
.site-search{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-top:0;padding:13px 15px;margin-bottom:14px}
.site-search form{display:flex;flex:1;gap:7px}
input[type=search],input[type=text],input[type=password],input[type=email],textarea,select{background:#fff;border:1px solid #c8d4e0;border-radius:3px;color:#263a52;outline:0;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:#4688c5;box-shadow:0 0 0 2px #dbeaf8}
.site-search input{height:37px;padding:8px 12px;min-width:0;flex:1}
.button{border-radius:3px;display:inline-block;border:1px solid #cbd8e6;padding:8px 16px;font-weight:bold;font-size:12px;text-align:center}
.button:hover{text-decoration:none}
.button.primary{background:var(--blue);color:white;border-color:var(--deep)}
.button.primary:hover{background:var(--deep);color:white}
.button.secondary{background:#f2f6fb;color:var(--deep)}
.help-link{font-size:11px;white-space:nowrap}
.flashes{display:grid;gap:8px;margin-bottom:12px}
.flash{padding:8px 12px;background:#eaf4ff;border:1px solid #bbdaf7;border-radius:3px}
.flash.success{background:#eaf9ee;border-color:#b7dfc1;color:#27623f}
.flash.warning{background:#fffae6;border-color:#f0dda2;color:#87631e}
.flash.error{background:#fff1ee;border-color:#efb8ac;color:#973d34}
.preview-note{font-size:11px;background:#fff9e7;border:1px solid #f4e0ad;padding:6px 12px;color:#847142;margin-bottom:15px}
.columns{display:grid;grid-template-columns:206px minmax(0,1fr) 211px;align-items:start;gap:15px}
.main-area{min-width:0}
.widget{background:white;border:1px solid var(--line);margin-bottom:14px;overflow:hidden}
.widget h2{margin:0;padding:9px 12px;background:linear-gradient(#f9fbfe,#e9f1fa);border-bottom:1px solid var(--line);color:#375e89;font-size:13px}
.side-links{padding:5px 0}
.side-links a,.quick a{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;border-bottom:1px dotted #e3e8ef;font-size:11px}
.side-links a:hover,.side-links a.active{background:#eff6fe;text-decoration:none}
.side-links .angle{font-weight:bold;color:#94a8bf}
.widget-end{display:block;background:#fafcff;padding:7px 12px;font-size:11px;border-top:1px solid var(--line)}
.quick{padding-bottom:8px}.quick a{border:0;padding:6px 12px}
.leader{display:flex;gap:7px;align-items:center;padding:8px 9px;border-bottom:1px dashed #e2e8ef}
.leader:hover{background:#f7faff;text-decoration:none}
.leader-num{width:19px;text-align:center;color:#8798ac}
.leader-avatar,.avatar{background:#e3effc;color:#2b6fae;border:1px solid #c7dff6;border-radius:4px;width:30px;height:30px;display:inline-grid;place-items:center;font-weight:bold;flex-shrink:0}
.leader-body{display:flex;flex-direction:column;flex:1;min-width:0}
.leader-body strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader-body small{font-size:10px;color:var(--muted)}
.leader-points{color:var(--green);font-size:11px;font-weight:bold}
.points-table{width:100%;border-collapse:collapse;font-size:11px}
.points-table td,.points-table th{border-bottom:1px dashed #e6ebf2;padding:5px 10px}
.points-table th{color:var(--green)}
.widget>.tiny{padding:1px 9px}.small-pad{padding:9px 12px;font-size:11px;margin:0}
.welcome{display:flex;gap:10px;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);padding:12px 14px;margin-bottom:14px;border-right:4px solid #7ca7cf}
.welcome h1{font-size:17px;margin:0;color:#295e95}
.welcome p{color:var(--muted);margin:2px 0;font-size:11px}.spark{color:#ddb449}
.site-stats{display:flex;gap:16px;text-align:center;flex-wrap:wrap}
.site-stats span{display:flex;flex-direction:column;color:var(--muted);font-size:10px;white-space:nowrap}
.site-stats b{color:#3a6c9f;font-size:18px}
.section-head{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:0 0 10px;padding:0 1px}
.section-head h1,.section-head h2{margin:0;font-size:17px;color:#325b86}
.section-head p{margin:0;font-size:11px;color:var(--muted)}
.mini-ask{padding:5px 11px;font-size:11px}
.tabs{display:flex;gap:0;border-bottom:2px solid #87add3;overflow:auto;white-space:nowrap}
.tabs a{padding:7px 12px;background:#eaf1f9;border:1px solid #d3deeb;border-bottom:0;color:#456d94;font-size:11px;font-weight:bold;margin-left:3px;border-radius:3px 3px 0 0}
.tabs a.active,.tabs a:hover{background:white;color:#185ba0;text-decoration:none}
.question-list{background:white;border:1px solid var(--line);border-top:0}
.q-row{display:flex;gap:12px;padding:13px 12px;border-bottom:1px solid #e6ebf0}
.q-row:last-child{border-bottom:0}.q-row:hover{background:#fbfdff}
.q-stats{display:flex;flex-direction:column;text-align:center;justify-content:center;min-width:57px;align-self:flex-start;padding:4px 7px;border:1px solid #d7e6d9;color:#4b8263;background:#f3faf5;border-radius:3px}
.q-stats b{font-size:19px;line-height:1.35}.q-stats span{font-size:10px}
.q-summary{min-width:0;flex:1}.q-summary h3{margin:0 0 5px;font-size:13px;line-height:1.8}
.q-desc{color:#67778b;font-size:11px;margin:2px 0 8px;overflow-wrap:anywhere}
.q-meta{display:flex;flex-wrap:wrap;gap:5px;color:#8a97a6;font-size:10px}
.category-label{background:#f1f5fa;border-radius:2px;padding:0 5px;color:#6382a1}
.pill{display:inline-block;font-size:10px;line-height:1.5;white-space:nowrap;padding:2px 6px;border-radius:3px;font-weight:normal;vertical-align:middle}
.pill.pinned{background:#fff3d5;color:#a16f12;border:1px solid #f2d996}
.pill.solved{background:#e5f6e9;color:#257b42;border:1px solid #bde3c3}
.pill.closed{background:#f2f1f1;color:#737373;border:1px solid #d9d9d9}
.pill.demo{background:#f2f2ff;color:#726ca1;border:1px solid #dddaf0}
.empty{padding:38px 15px;text-align:center;color:#75869a;background:#fff}
.empty h3{color:#486b90}.empty-icon{font-size:35px;color:#8cadd0}
.list-footer{text-align:center;font-size:11px;color:#8295a7;padding:13px}
.footer{font-size:11px;color:#8898aa;text-align:center;margin:27px 0 20px;border-top:1px solid #dbe4ee;padding:16px}
.footer div{margin-bottom:4px}.footer b{font-size:15px;color:#457cb5}
.breadcrumbs{font-size:11px;color:#8794a3;margin-bottom:12px}

.question-detail,.answer-card,.answer-form,.classic-panel,.form-page,.category-card{background:white;border:1px solid var(--line)}
.detail-heading{padding:14px 17px 12px;border-bottom:1px solid #e7ecf2;background:linear-gradient(#fff,#fcfdff)}
.detail-heading h1{margin:0 0 8px;font-size:18px;color:#2a527c;overflow-wrap:anywhere}
.detail-badges{display:flex;gap:6px;flex-wrap:wrap}
.author-line{display:flex;gap:9px;align-items:center;padding:12px 17px}
.author-line div{display:flex;flex-direction:column}.author-line small{font-size:10px;color:var(--muted)}
.author-name{font-size:12px;font-weight:bold}
.avatar{width:34px;height:34px}.avatar.alt{background:#e7f6ee;color:#379369;border-color:#cce5d6}
.views{margin-right:auto;color:#94a2b2;font-size:10px}
.detail-body{padding:10px 17px 23px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:2.05}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 17px 12px}
.tags span{background:#eff5fb;color:#5a78a0;padding:2px 8px;font-size:10px;border-radius:3px}
.detail-tools{border-top:1px solid #e8edf3;padding:10px 17px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:11px;color:#7d8ba0}
.soft-button{background:#f7f9fc;border:1px solid #d1dce8;border-radius:3px;padding:5px 9px;color:#496c93;font-size:11px}
.soft-button:hover{background:#e7f2fc;color:#215e9f;text-decoration:none}
.soft-button.good{background:#edf8f0;color:#20834c;border-color:#c6e4d0}
.answer-head{margin-top:24px}
.count{display:inline-grid;place-items:center;min-width:24px;height:22px;background:#eaf1f8;color:#3f759f;border:1px solid #d6e4f2;border-radius:5px;font-size:12px}
.answers-list{display:grid;gap:12px}
.answer-card{position:relative}
.answer-card.best-answer{border-color:#99d0ac;box-shadow:inset 3px 0 #4d9a66}
.best-banner{background:#eaf8ee;border-bottom:1px solid #c7e5cf;color:#298550;font-weight:bold;padding:6px 16px;font-size:12px}
.answer-text{padding-bottom:8px}
.answer-tools{padding:8px 14px;border-top:1px solid #ebeff4;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.voting{display:inline-flex;align-items:center;gap:7px;color:#8493a4}
.voting b{min-width:17px;text-align:center;color:#3e678f}
.voting button{background:#f5f8fc;color:#7c94af;border:1px solid #dce5ee;border-radius:3px;font-size:12px;line-height:1;padding:5px 7px}
.voting button:hover,.voting button.voted{color:white;background:#2c74b5}
.voting small{font-size:10px}
.answer-form{margin-top:16px;padding:16px}
.answer-form h2{font-size:16px;color:#315d87;border-bottom:1px solid #e5edf4;padding-bottom:7px}
.answer-form label{font-weight:bold;color:#495e76}
.answer-form textarea,.report-box textarea{display:block;width:100%;padding:11px;margin:8px 0;min-height:130px;resize:vertical}
.form-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.closed-msg{background:#faf7ee;padding:12px;color:#8b6c35;border:1px solid #eddeb5}
.report-box{position:relative;font-size:11px}
.report-box summary{color:#8798ab;cursor:pointer}
.report-box form{background:white;padding:12px;border:1px solid #d4e0ef;margin:6px 0;max-width:360px}
.report-box textarea{min-height:70px;width:280px;max-width:100%}
.staff-tools{background:#fff9eb;border:1px solid #eddda9;margin:12px 0;padding:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11px}
.form-page{padding:22px;max-width:100%;margin-bottom:14px}
.form-page h1{color:#285d93;margin:0 0 4px}
.form-subtitle{color:#7f8fa1;padding-bottom:15px;border-bottom:1px solid #e9eef4}
.classic-form{max-width:600px}
.classic-form label{display:block;font-weight:bold;color:#405d7d;margin:0 0 16px}
.classic-form label small{color:#92a0b0;font-weight:normal;font-size:10px}
.classic-form input,.classic-form textarea,.classic-form select{display:block;width:100%;margin-top:6px;padding:10px 12px;min-height:40px}
.classic-form textarea{resize:vertical}
.classic-form .button{min-width:160px;padding-block:10px}
.tips{border:1px solid #d7e7f5;background:#f5faff;padding:10px 13px;margin-bottom:14px;color:#597895;font-size:11px}
.tips p{margin:0}
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.category-card{padding:12px}
.category-card-title{display:flex;gap:10px;align-items:center;border-bottom:1px solid #e7edf3;padding-bottom:10px}
.category-card-title>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #dce8f3;background:#f3f8ff;border-radius:4px;font-size:21px}
.category-card-title div{display:flex;flex-direction:column}
.category-card-title a{font-weight:bold;font-size:13px}
.category-card-title small{color:#8b98ab;font-size:10px}
.category-children{padding:12px 0;display:flex;flex-wrap:wrap;gap:7px}
.category-children a{font-size:11px;background:#f7f9fc;border:1px solid #e4ebf3;border-radius:3px;padding:2px 8px}
.member-table{width:100%;border-collapse:collapse;font-size:11px;text-align:right}
.member-table td,.member-table th{padding:11px;border-bottom:1px solid #e8edf4}
.member-table th{background:#edf3fa;color:#4c729c}
.member-table td .avatar{vertical-align:middle;margin-left:6px}
.member-table .avatar.small{width:26px;height:26px}
.rank-place{display:inline-grid;place-items:center;width:22px;height:22px;background:#edf1f6;color:#67778a;border-radius:4px}
.rank-place.top{background:#fff2d4;color:#a87a1f;font-weight:bold}
.blue-score{color:#2c749b}
.panel-title{background:#f0f5fb;border-bottom:1px solid #dbe5ef;padding:10px 14px;font-size:13px;font-weight:bold;color:#3a638f}
.classic-panel{margin-bottom:14px}
.profile-cover{height:76px;background:linear-gradient(135deg,#e8f2fb,#cedfee)}
.profile-top{display:flex;align-items:center;gap:14px;padding:0 14px 13px}
.avatar.huge{width:66px;height:66px;font-size:29px;margin-top:-27px;border:3px solid white;border-radius:6px}
.profile-identity{flex:1}
.profile-identity h1{margin:0;color:#356493}
.profile-identity p{margin:0;color:#8a9aae}
.profile-identity span{color:#a0abba;font-size:10px}
.profile-numbers{display:grid;grid-template-columns:repeat(4,1fr);margin:0 14px 14px;border:1px solid #dae5ef;background:#f9fbfe}
.profile-numbers div{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px;border-left:1px solid #dae5ef}
.profile-numbers div:last-child{border:0}
.profile-numbers b{font-size:20px;color:#2c659a}.profile-numbers span{font-size:10px;color:#8190a3}
.bio{padding:12px 18px;white-space:pre-wrap}
.badges{padding:10px 14px;border-top:1px solid #e7ecf3;display:flex;flex-wrap:wrap;gap:7px;font-size:11px}
.badges b{width:100%;color:#456b91}
.badges span{padding:4px 9px;background:#f4f8fe;border:1px solid #d9e5f4;border-radius:4px}
.ledger-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #e9eef4;font-size:11px}
.ledger-row small{color:#9caabc}.positive{color:#2b8953}.negative{color:#bd5555}
.notice{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #e9eef4}
.notice:hover{text-decoration:none;background:#f6f9fc}
.notice.unread{background:#eaf4fe}
.notice>span{font-size:20px}
.notice div{display:flex;flex-direction:column;color:#315778}
.notice small{font-size:10px;color:#93a2b2}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.admin-stats div{background:#fff;border:1px solid #d8e2ed;padding:11px;text-align:center;display:flex;flex-direction:column}
.admin-stats b{font-size:24px;color:#316da2}.admin-stats span{font-size:11px;color:#8194a7}
.admin-report,.moderate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e6edf4;padding:10px 12px}
.admin-report p{margin:0 0 3px;font-size:11px}
.admin-report small,.moderate-row small{color:#9aa6b5;font-size:10px}
.moderate-row>div:first-child{max-width:60%}
.moderate-row small{display:block}
.moderate-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.small-empty{padding:16px}
.error-page{border:1px solid #dae5ee}
@media(max-width:1120px){.columns{grid-template-columns:196px minmax(0,1fr)}.left-sidebar{display:none}.head-intro{display:none}}
@media(max-width:760px){
 body{font-size:12px}.site-width{padding-inline:10px}
 .topline{font-size:10px}.top-row{justify-content:center;text-align:center;padding-block:5px}
 .masthead{min-height:90px}.brand{min-width:130px}
 .brand-text{font-size:32px}.brand small{font-size:10px}
 .ask-big{padding:7px 12px;font-size:11px}
 .nav-strip{height:40px}.nav-strip a{padding:9px 10px;font-size:11px}
 .columns{display:block}.right-sidebar,.left-sidebar{display:none}
 .site-search{padding:9px}.help-link{display:none}
 .welcome{flex-direction:column;align-items:stretch}
 .site-stats{justify-content:space-around}
 .category-grid{grid-template-columns:1fr}
 .tabs a{padding:7px 9px}
 .q-row{gap:8px;padding:12px 9px}.q-stats{min-width:48px}
 .q-summary h3{font-size:12px}
 .form-page{padding:14px}
 .detail-heading{padding:12px}
 .detail-body{padding:9px 12px 18px}
 .author-line{padding:10px}
 .profile-numbers{margin-inline:7px}
 .profile-numbers b{font-size:17px}
 .profile-numbers span{font-size:9px}
 .profile-top{gap:8px;flex-wrap:wrap}
 .admin-stats{grid-template-columns:repeat(2,1fr)}
 .member-table{font-size:10px;display:block;overflow-x:auto}
 .moderate-row{flex-direction:column;align-items:stretch}.moderate-row>div:first-child{max-width:100%}
}
@media(max-width:420px){.brand-text{font-size:29px}.masthead{gap:5px}.site-search .button{padding:7px}.profile-numbers{grid-template-columns:repeat(2,1fr)}.q-desc{font-size:11px}}