@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
body{background:#f3f7ed;color-scheme:light;padding:20px;font-family:Tahoma,Arial,sans-serif}main{max-width:1220px}
#salam-explorer{--sl-bg:#f7faef;--sl-paper:#fff;--sl-ink:#293846;--sl-muted:#5a6c73;--sl-line:#dce6dc;--sl-green:#247b7f;--sl-soft:#eef6d6;--sl-lime:#b4d334;--sl-teal:#49a6aa;color-scheme:light;border:1px solid #e1e9da;border-radius:24px;box-shadow:0 12px 40px #29384608}
#salam-explorer .sl-header{padding:10px 24px;background:#fff;gap:12px;border-bottom:3px solid #b4d334}
#salam-explorer .sl-brand-group{display:flex;align-items:center;gap:10px}.sl-logo{width:65px;height:76px;object-fit:cover;object-position:center}.sl-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#salam-explorer .sl-brand{color:var(--sl-ink);font-size:26px}#salam-explorer .sl-tools button,#salam-explorer .sl-back{border:2px solid var(--sl-line);border-radius:12px;background:#fff;padding:6px 12px;box-shadow:0 3px 0 var(--sl-line);cursor:pointer;font-size:12px;font-weight:bold;min-height:40px}
#salam-explorer button{transition:background .15s,transform .15s,box-shadow .15s}#salam-explorer button:active:not(:disabled){transform:translateY(2px);box-shadow:none}#salam-explorer button:focus-visible,#salam-explorer input:focus-visible{outline:3px solid #247b7f;outline-offset:3px}
#salam-explorer .sl-body{padding:22px}#salam-explorer h2{font-weight:700}#salam-explorer .sl-tracks{margin:16px 0;gap:12px}
#salam-explorer .sl-track,#salam-explorer .sl-node{padding:10px 14px;min-height:0;border:2px solid var(--sl-line);border-radius:16px;box-shadow:0 4px 0 var(--sl-line);background:#fff}
#salam-explorer .sl-track[aria-pressed=true]{border-color:#a6c12a;background:#f2f8df;box-shadow:0 4px 0 #a6c12a}#salam-explorer .sl-dot{width:16px;height:16px;background:var(--sl-lime);border:3px solid #fff;box-shadow:0 0 0 2px #a6c12a}
#salam-explorer .sl-title-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}#salam-explorer .sl-title-line b{font-size:14px;font-weight:700}#salam-explorer .sl-title-line small{display:inline;color:#566c70;font-size:11px;background:#f0f5ed;padding:0 7px;border-radius:7px}
#salam-explorer .sl-metrics,#salam-explorer .sl-step .sl-metrics{margin-top:4px;font-size:11px;gap:8px;line-height:1.8}#salam-explorer .sl-star{color:#738917;font-size:15px}#salam-explorer .sl-crumbs{padding:4px 0 14px}#salam-explorer .sl-crumbs button{font-size:12px;background:#edf4ee;border-radius:8px}
#salam-explorer .sl-work{grid-template-columns:250px minmax(0,1fr);gap:20px}#salam-explorer .sl-map{padding:16px;border:2px solid #dce6dc;border-radius:18px;position:sticky;top:16px;box-shadow:0 4px 0 #dce6dc}.sl-map-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}#salam-explorer .sl-map h3{display:block;font-weight:700;margin:0}#sl-index-close{border:0;background:#edf4ee;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:20px!important}
#salam-explorer .sl-steps{display:block}#salam-explorer .sl-step{border-right:2px solid #cddfa3;padding:0 16px 18px 0}#salam-explorer .sl-step:before{display:block;width:12px;height:12px;right:-7px;background:#cddfa3}#salam-explorer .sl-step.chosen:before{background:#49a6aa;box-shadow:0 0 0 3px #e2f3f0}#salam-explorer .sl-step small{font-size:11px}#salam-explorer .sl-step button{font-size:12px;font-weight:600}#salam-explorer .sl-step.active{color:#247b7f}#salam-explorer .sl-step:last-child{padding-bottom:0}
#salam-explorer .sl-section-head>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}#salam-explorer .sl-section-head h3{font-weight:700}#salam-explorer .sl-grid{gap:12px}#salam-explorer .sl-node:hover{border-color:#49a6aa;box-shadow:0 4px 0 #49a6aa;background:#f1faf7}#salam-explorer .sl-arrow{background:#eef6d6;width:26px;height:26px;line-height:24px;text-align:center;border-radius:50%;flex-shrink:0}
#salam-explorer .sl-reading{padding:18px 22px;border:2px solid #dce6dc;border-top:5px solid #49a6aa;border-radius:18px;box-shadow:0 4px 0 #dce6dc}#salam-explorer .sl-reading h3{font-size:21px;font-weight:700;margin:10px 0 8px;color:#293846}#salam-explorer .sl-reading>.sl-metrics{margin:4px 0 14px;padding-bottom:10px}#salam-explorer .sl-reading section+section{margin-top:14px;padding-top:12px}#salam-explorer .sl-reading h4{margin-bottom:5px;font-weight:700}#salam-explorer .sl-reading p,#salam-explorer .sl-reading ul{line-height:1.9}
#salam-explorer .sg-box{border:2px solid #dce6dc;border-top:5px solid #49a6aa;padding:18px;border-radius:18px;box-shadow:0 4px 0 #dce6dc}#salam-explorer .sg-box button,#salam-explorer .sg-launch{border:2px solid var(--sl-line);box-shadow:0 4px 0 var(--sl-line);font-weight:600;border-radius:12px;padding:8px 14px}#salam-explorer .sg-primary,#salam-explorer .sg-launch{background:#b4d334!important;color:#293846!important;border-color:#a1bd26!important;box-shadow:0 4px 0 #8da51f!important}#salam-explorer .sg-launch{margin-top:16px}#salam-explorer .sg-header h3{font-weight:700}#salam-explorer .sg-types{margin:14px 0 12px;gap:8px}#salam-explorer .sg-types button{font-size:12px;padding:7px 10px}#salam-explorer .sg-types button[aria-pressed=true],#salam-explorer .sg-selected{background:#e3f4f2;border-color:#49a6aa;box-shadow:0 4px 0 #49a6aa}#salam-explorer .sg-pairs button{min-height:54px}#salam-explorer .sg-options label{border:2px solid var(--sl-line);box-shadow:0 3px 0 var(--sl-line);border-radius:12px}#salam-explorer .sg-play legend{font-weight:700}#salam-explorer .sg-ok{background:#eef6d6!important;border-color:#a1bd26!important}#salam-explorer .sg-bad{background:#fff1ed!important;border-color:#ce6956!important}#salam-explorer .sg-feedback{border-radius:12px;padding:6px 10px}#salam-explorer .sg-feedback:not(:empty){background:#edf6e0}#salam-explorer .sg-cell{border:2px solid #49a6aa;border-radius:8px}#salam-explorer .sg-road{background:#e4f1cb}#salam-explorer .sg-player{background:#b4d334;color:#293846;box-shadow:0 3px 0 #8da51f}#salam-explorer .sg-maze span{border-radius:8px}
#salam-explorer .sl-index-hidden .sl-map{display:none}#salam-explorer .sl-index-hidden{grid-template-columns:minmax(0,1fr)}#salam-explorer .sl-shade{display:none}
.sg-celebration{position:fixed;inset:0;pointer-events:none;z-index:1000;display:grid;place-items:center}.sg-win-badge{background:#fff;color:#293846;border:3px solid #b4d334;border-radius:24px;box-shadow:0 10px 40px #29384622;padding:16px 30px;font-size:24px;font-weight:700;animation:sg-pop 1.1s both}.sg-confetti{position:absolute;left:50%;top:50%;width:8px;height:16px;background:var(--c);border-radius:3px;animation:sg-burst 1s ease-out both;transform:rotate(var(--r))}.sg-error-pulse{animation:sg-nudge .25s ease-in-out}
@keyframes sg-pop{0%{transform:scale(.8);opacity:0}20%,70%{transform:scale(1);opacity:1}100%{transform:scale(1.05);opacity:0}}@keyframes sg-burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@keyframes sg-nudge{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
@media(max-width:760px){body{padding:6px}#salam-explorer{border-radius:18px}#salam-explorer .sl-header{padding:8px 12px}.sl-logo{width:48px;height:58px}#salam-explorer .sl-brand{font-size:21px}#salam-explorer .sl-brand-group .sl-caption{font-size:10px}#salam-explorer .sl-tools{gap:6px;max-width:165px}#salam-explorer .sl-tools button{padding:5px 8px;min-height:34px;font-size:10px}#salam-explorer .sl-body{padding:14px}#salam-explorer .sl-work{grid-template-columns:minmax(0,1fr)}#salam-explorer .sl-map{position:fixed;right:0;top:0;bottom:0;width:270px;max-width:85vw;overflow-y:auto;z-index:50;border-radius:18px 0 0 18px;padding:22px 16px;box-shadow:-8px 0 30px #29384622}#salam-explorer .sl-shade:not([hidden]){display:block;position:fixed;inset:0;z-index:49;border:0;background:#29384666;width:100%;height:100%}#salam-explorer .sl-tracks{grid-template-columns:1fr;margin:12px 0}#salam-explorer .sl-grid{grid-template-columns:1fr}#salam-explorer .sl-reading{padding:14px}#salam-explorer .sg-box{padding:14px}#salam-explorer .sg-types button{flex:1 1 120px}#salam-explorer .sl-title-line b{font-size:13px}.sg-win-badge{font-size:20px;padding:14px 22px}}
@media(prefers-reduced-motion:reduce){#salam-explorer button{transition:none}.sg-confetti{display:none}.sg-win-badge{animation:none}.sg-error-pulse{animation:none}}

/* Pending revision: keep the collapsed index as a narrow icon rail. */
#salam-explorer{--sl-rail:44px}
#salam-explorer #sl-index-close{display:flex;align-items:center;justify-content:center;width:var(--sl-rail);height:44px;flex-shrink:0;padding:10px;background:#e0efeb;border-radius:10px;color:#344e52}
#salam-explorer .sl-collapse-icon{flex-shrink:0;transition:transform .15s}
#salam-explorer .sl-index-hidden{grid-template-columns:var(--sl-rail) minmax(0,1fr)}
#salam-explorer .sl-index-hidden .sl-map{display:block;width:var(--sl-rail);padding:0;overflow:hidden;border:0;border-radius:12px;background:#edf4ee;min-height:330px;box-shadow:none}
#salam-explorer .sl-index-hidden .sl-map-title{margin:0;display:block}
#salam-explorer .sl-index-hidden .sl-map-title h3,#salam-explorer .sl-index-hidden .sl-steps{display:none}
#salam-explorer .sl-index-hidden .sl-collapse-icon{transform:scaleX(-1)}
@media(max-width:760px){
 #salam-explorer .sl-index-hidden{grid-template-columns:minmax(0,1fr);margin-right:var(--sl-rail)}
 #salam-explorer .sl-index-hidden .sl-map{position:fixed;right:0;top:0;bottom:0;width:var(--sl-rail);max-width:var(--sl-rail);min-height:0;padding:0;border-radius:12px 0 0 12px;z-index:50;border-left:1px solid #dce6dc;background:#edf4ee}
 #salam-explorer .sl-index-hidden #sl-index-close{border-radius:10px 0 0 10px}
}
@media(prefers-reduced-motion:reduce){#salam-explorer .sl-collapse-icon{transition:none}}

/* Pending simplification: logo, learner indicators, content, and flat surfaces. */
#salam-explorer,#salam-explorer *{box-shadow:none!important}
#salam-explorer .sl-header{padding:8px 18px;border-bottom:1px solid var(--sl-line)}
#salam-explorer .sl-logo{object-fit:contain;width:60px;height:66px}
#salam-explorer .sl-player-stats{display:flex;align-items:center;gap:22px;color:var(--sl-ink)}
#salam-explorer .sl-points,#salam-explorer .sl-rank{display:flex;align-items:center;gap:6px;white-space:nowrap}
#salam-explorer .sl-player-stats small{font-size:11px;color:var(--sl-muted)}
#salam-explorer .sl-body{padding:14px 18px}
#salam-explorer .sl-foot{display:none}
#salam-explorer .sl-map .sl-tracks{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
#salam-explorer .sl-map .sl-track{padding:7px 8px}
#salam-explorer .sl-map .sl-track .sl-dot{display:none}
#salam-explorer .sl-map .sl-title-line b{font-size:12px}
#salam-explorer .sl-index-hidden .sl-map .sl-tracks{display:none}
#salam-explorer .sl-has-content .sl-section-head{display:none}
#salam-explorer.sl-has-content .sl-section-head{display:none}
#salam-explorer .sl-reading,#salam-explorer .sg-box{border:1px solid var(--sl-line)}
#salam-explorer .sl-node,#salam-explorer .sl-track,#salam-explorer .sg-box button,#salam-explorer .sg-options label{border-width:1px}
#salam-explorer .sl-reading-label{display:none}
#salam-explorer.sg-session>.sl-header,#salam-explorer.sg-session .sl-crumbs,#salam-explorer.sg-session .sl-map,#salam-explorer.sg-session .sl-shade,#salam-explorer.sg-session .sl-section-head{display:none!important}
#salam-explorer.sg-session .sl-work{grid-template-columns:minmax(0,1fr);margin-right:0}
#salam-explorer.sg-session .sg-box{border:0;padding:10px 0}
#salam-explorer.sg-session{background:#fff}
#salam-explorer .sl-node:active,#salam-explorer .sl-track:active{transform:none}
@media(max-width:760px){#salam-explorer .sl-body{padding:12px}#salam-explorer .sl-header{padding:6px 12px}#salam-explorer .sl-logo{width:48px;height:54px}#salam-explorer .sl-player-stats{gap:12px}#salam-explorer .sl-rank small{font-size:10px}}

/* Map toggle replaces the sidebar rail; center contains only learning content. */
#salam-explorer .sl-logo-map{display:flex;align-items:center;gap:10px}
#salam-explorer #sl-map-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:#e0efeb;color:#247b7f;padding:8px;cursor:pointer}
#salam-explorer .sl-index-hidden{grid-template-columns:minmax(0,1fr);margin-right:0}
#salam-explorer .sl-index-hidden .sl-map{display:none!important}
#salam-explorer .sl-map-title{margin-bottom:12px}
#salam-explorer .sl-player-stats{gap:18px}
@media(max-width:760px){
 #salam-explorer .sl-header{position:relative;z-index:60;min-height:68px}
 #salam-explorer .sl-map{top:74px}
 #salam-explorer .sl-shade:not([hidden]){top:74px;height:calc(100% - 74px)}
 #salam-explorer .sl-index-hidden{grid-template-columns:minmax(0,1fr);margin-right:0}
}

/* Salam identity refresh: Cairo across every screen and flat, vivid controls. */
html,body,body *,body *::before,body *::after{
 font-family:'Cairo',sans-serif!important;
}
body{background:#f4f9ec}
#salam-explorer{
 --sl-bg:#f6faef;--sl-soft:#edf7d1;--sl-line:#d5e5d9;
 --sl-lime:#b4d334;--sl-teal:#49a6aa;--sl-green:#247b7f;
 --sl-ink:#293846;--sl-muted:#536a70;background:var(--sl-bg);
}
#salam-explorer .sl-header{background:#fff;border-bottom:2px solid #b4d334}
#salam-explorer .sl-map{background:#f4f9e8;border-color:#d3e5b5}
#salam-explorer .sl-track[aria-pressed=true],
#salam-explorer .sl-node:hover{background:#edf7d1;border-color:#b4d334}
#salam-explorer .sl-title-line small,
#salam-explorer .sl-arrow{background:#e8f4bf;color:#293846}
#salam-explorer .sl-crumbs button{background:#e1f2ef;color:#247b7f}
#salam-explorer .sl-crumbs button:last-of-type{background:#e8f4bf;color:#293846}
#salam-explorer .sl-reading{background:#fff;border-color:#d5e5d9}
#salam-explorer .sl-reading h3,#salam-explorer .sl-reading h4{color:#247b7f}
#salam-explorer .sl-points{color:#738917}
#salam-explorer .sl-rank{color:#247b7f}
#salam-explorer button.sg-launch,
#salam-explorer button.sg-primary,
#salam-explorer .sg-box button,
#salam-explorer .sg-options label,
#salam-explorer button.sg-launch::before,
#salam-explorer button.sg-launch::after,
#salam-explorer button.sg-primary::before,
#salam-explorer button.sg-primary::after{
 box-shadow:none!important;text-shadow:none!important;
 filter:none!important;border-width:1px!important;
 background-image:none!important;transform:none!important;
}
#salam-explorer button.sg-launch,#salam-explorer button.sg-primary{
 background:#b4d334!important;border-color:#a0bc27!important;
 color:#293846!important;font-weight:800;border-radius:12px;
}
#salam-explorer button.sg-launch:hover,
#salam-explorer button.sg-primary:hover{background:#c3df4e!important}
#salam-explorer button.sg-launch:active,
#salam-explorer button.sg-primary:active{background:#a9c72d!important;transform:none!important}
#salam-explorer .sg-types button[aria-pressed=true],
#salam-explorer .sg-selected{background:#dcf1ed;border-color:#49a6aa}
#salam-explorer .sg-feedback:not(:empty){background:#edf7d1;color:#293846}
#salam-explorer .sg-ok{background:#edf7d1!important}
#salam-explorer .sg-bad{background:#fff0ec!important}
#salam-explorer .hc-dialog{border-color:#49a6aa}

/* Compact two-line hierarchy: label/title, then progress. */
#salam-explorer .sl-map{padding:14px 12px}
#salam-explorer .sl-map #sl-tracks:empty{display:none;margin:0}
#salam-explorer .sl-step{padding:0 10px 16px 0}
#salam-explorer .sl-step-heading{min-width:0;line-height:1.8}
#salam-explorer .sl-step-heading button{display:block;border:0;background:transparent;padding:0;text-align:right;font-size:12px;font-weight:700;width:100%}
#salam-explorer .sl-track-heading{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--sl-ink)}
#salam-explorer .sl-track-heading select{min-width:0;flex:0 1 auto;width:auto;field-sizing:content;appearance:auto;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;padding:0 0 0 3px;cursor:pointer}
#salam-explorer .sl-step .sl-metrics{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;font-size:10px;line-height:1.8;margin-top:3px}
#salam-explorer .sl-step .sl-metric{gap:3px}
#salam-explorer .sl-step .sl-metric strong{font-weight:700}
#salam-explorer .sl-step .sl-star{font-size:13px}
@media(max-width:760px){#salam-explorer .sl-map{padding:18px 14px}#salam-explorer .sl-steps{display:block}#salam-explorer .sl-step{flex:none}}