@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans Arabic',Tahoma,sans-serif;color:#173246;background:#eae8e1}*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b38b3f;outline-offset:3px}button{color:inherit}a{color:inherit;text-decoration:none}.workbench-header{height:73px;display:flex;align-items:center;gap:20px;padding:0 28px;border-bottom:1px solid #dcd8cd;background:#f9f7f1}.preview-brand{font-size:29px;font-weight:700}.preview-brand span{color:#b38b3f;font-size:20px}.workbench-label{font-size:12px;color:#6c777b;border-right:1px solid #d6cfbd;padding-right:20px}.header-status{margin-right:auto;font-size:10px;border:1px solid #d8dfd3;background:#f0f4eb;padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:8px}.header-status i{width:6px;height:6px;background:#5e8055;border-radius:50%}#toggleSidebar{display:none;border:1px solid #ded8c8;border-radius:10px;background:none;width:38px;height:38px}.workbench{display:grid;grid-template-columns:300px minmax(0,1fr);height:calc(100dvh - 73px)}.route-sidebar{background:#fcfaf5;border-left:1px solid #dbd5c6;padding:24px 18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d6cbb5 transparent}.sidebar-title{display:flex;gap:10px}.sidebar-title small{font-size:10px;color:#997b3b}.sidebar-title h1{font-size:17px;line-height:1.8;margin:5px 0 19px}.sidebar-title button{display:none}.route-search{display:flex;align-items:center;gap:7px;border:1px solid #ded8ca;border-radius:12px;background:white;padding:9px 11px;margin-bottom:13px}.route-search>span{font-size:22px;line-height:1;color:#87918d}.route-search input{min-width:0;width:100%;border:0;background:none;font-size:11px;color:#243d4c;outline-offset:5px}.route-count{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#848b87;margin:15px 3px}.route-count button{border:0;background:none;font-size:9px;color:#8b713a;padding:5px}.route-group{border-top:1px solid #e9e3d6;margin-top:10px;padding-top:10px}.route-group summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;font-weight:700;list-style:none;padding:8px 6px;color:#6d756d}.route-group summary:before{content:'⌄';font-size:15px;font-weight:400}.route-group:not([open]) summary:before{content:'‹'}.route-group summary small{font-family:Arial,sans-serif;font-size:10px;font-weight:400;margin-right:auto;color:#9b9a8d}.route-link{display:flex;align-items:center;gap:11px;padding:10px 10px;border:1px solid transparent;border-radius:12px;margin:3px 0;min-height:52px}.route-index{font:10px/1 Arial,sans-serif;color:#acaa9d;width:18px;flex-shrink:0}.route-link>span:nth-child(2){min-width:0;flex:1}.route-link strong{display:block;font-size:11px;font-weight:500;line-height:1.8}.route-link code{display:block;direction:ltr;text-align:right;font:9px/1.8 monospace;color:#9a9e92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-link .route-dot{width:5px;height:5px;border-radius:50%;background:transparent}.route-link:hover{background:#f0ede4}.route-link.active{background:#eae2cd;border-color:#ded0a8}.route-link.active strong{font-weight:700;color:#183447}.route-link.active .route-index{color:#927538}.route-link.active .route-dot{background:#b38b3f}.sidebar-note{font-size:9px;color:#7e8278;line-height:2;border-top:1px solid #e3dccd;margin-top:23px;padding-top:17px}.reset-preview{font-size:10px;background:none;border:1px solid #ddd3be;border-radius:10px;padding:10px;width:100%;margin-top:15px}.standalone-link{display:block;text-align:center;font-size:10px;color:#8c7137;margin:15px 0 0}.preview-stage{min-width:0;overflow:auto;padding:23px 30px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;background:radial-gradient(ellipse at center,#f4f1e9,#e8e6df 75%)}.stage-heading{width:min(100%,458px);display:flex;justify-content:space-between;align-items:center;gap:10px}.stage-heading>div>span{font-size:9px;color:#8c8c80}.stage-heading h2{font-size:16px;line-height:1.7;margin:3px 0 0;font-weight:600}.stage-heading code{font:10px/1.8 monospace;direction:ltr;color:#7d827b;background:#f8f6ef;border:1px solid #ddd7c8;padding:5px 10px;border-radius:8px;max-width:50%;overflow:hidden;text-overflow:ellipsis}.phone-frame{width:458px;max-width:100%;height:calc(100dvh - 208px);min-height:490px;max-height:920px;flex-shrink:0;background:#173246;border:9px solid #173246;border-radius:34px;box-shadow:0 20px 60px #112b401b,0 0 0 1px #061d2f;overflow:hidden;padding:0}.phone-frame iframe{display:block;width:100%;height:100%;border:0;border-radius:23px;background:#fcfaf6}.stage-foot{width:min(100%,458px);display:flex;justify-content:space-between;gap:10px;font-size:8px;color:#8a8c81}.stage-foot>span:first-child{direction:ltr;font-family:Arial,sans-serif}.sidebar-backdrop{position:fixed;inset:73px 0 0;border:0;background:#112b4066;z-index:20}.empty-routes{padding:25px 8px;font-size:11px;color:#858a7e;text-align:center}@media(min-width:1450px){.workbench{grid-template-columns:330px minmax(0,1fr)}.route-sidebar{padding-left:23px;padding-right:23px}}@media(max-width:800px){.workbench-header{padding:0 16px;gap:12px}.workbench-label{display:none}#toggleSidebar{display:block}.workbench{display:block}.route-sidebar{position:fixed;right:0;top:73px;bottom:0;width:300px;max-width:85vw;z-index:25;transform:translateX(105%);transition:transform .2s ease;box-shadow:-8px 0 30px #112b4012}.sidebar-open .route-sidebar{transform:translateX(0)}.sidebar-title button{display:block;border:0;background:none;font-size:25px;margin-right:auto;align-self:flex-start}.preview-stage{height:100%;padding:18px 15px}.phone-frame{height:calc(100dvh - 205px);min-height:420px;border-width:6px;border-radius:27px}.phone-frame iframe{border-radius:20px}.header-status{font-size:8px;padding:5px 9px}.stage-heading h2{font-size:14px}}@media(prefers-reduced-motion:reduce){.route-sidebar{transition:none}}


/* A fixed device is scaled as one object, never stretched to the window. */
html,body{height:100%;overflow:hidden}
.workbench{min-height:0}.workbench-header{height:56px}.workbench{height:calc(100dvh - 56px)}
.preview-stage{height:100%;min-height:0;overflow:hidden;padding:10px 20px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:stretch}
.stage-heading,.stage-foot{width:414px;max-width:100%;min-width:0;min-height:0}.stage-heading h2{font-size:14px;margin:0}.stage-heading>div>span{display:none}
.device-slot{width:100%;height:100%;min-height:0;position:relative}
.phone-frame{position:absolute;top:50%;left:50%;box-sizing:border-box;width:414px;min-width:414px;max-width:none;height:900px;min-height:900px;max-height:none;border:0;padding:12px;background:#172027;border-radius:56px;overflow:visible;transform:translate(-50%,-50%) scale(var(--device-scale,.65));transform-origin:center;box-shadow:0 0 0 1px #87939b,0 0 0 4px #28343d,0 18px 45px #112b4033}
.phone-frame:before,.phone-frame:after{content:'';position:absolute;width:4px;background:#28343d;border-radius:3px}.phone-frame:before{left:-6px;top:155px;height:78px}.phone-frame:after{right:-6px;top:190px;height:62px}
.device-status{height:32px;border-radius:44px 44px 0 0;background:#f8f5ef;display:flex;align-items:center;justify-content:space-between;padding:0 23px;direction:ltr;font:bold 12px Arial;color:#17212b;position:relative}
.device-status i{position:absolute;width:100px;height:24px;left:50%;top:0;transform:translateX(-50%);background:#172027;border-radius:18px}
.phone-frame iframe{display:block;width:390px;height:844px;border:0;border-radius:0 0 44px 44px;background:#f8f5ef}
.home-indicator{position:absolute;width:120px;height:5px;background:#17212b;border-radius:5px;bottom:19px;left:50%;transform:translateX(-50%);pointer-events:none}
@media(max-width:980px){.workbench-header{padding:0 16px;gap:12px}.workbench-label{display:none}#toggleSidebar{display:block}.workbench{display:block}.route-sidebar{position:fixed;right:0;top:56px;bottom:0;width:300px;max-width:85vw;z-index:25;transform:translateX(105%);transition:transform .2s ease;box-shadow:-8px 0 30px #112b4012}.sidebar-open .route-sidebar{transform:translateX(0)}.sidebar-title button{display:block;border:0;background:none;font-size:25px;margin-right:auto;align-self:flex-start}.sidebar-backdrop{top:56px}.preview-stage{padding:8px 12px}}
/* Fill the review area with a readable device; contents retain native size. */
.workbench-header{height:46px}.workbench{height:calc(100dvh - 46px);grid-template-columns:250px minmax(0,1fr)}.preview-stage{padding:8px 22px;gap:6px}.stage-heading,.stage-foot{width:540px}.phone-frame{width:min(100%,540px);min-width:0;height:100%;min-height:0;max-height:none;top:0;left:50%;transform:translateX(-50%);border-radius:38px;padding:9px;overflow:hidden;display:flex;flex-direction:column}.phone-frame iframe{width:100%;height:auto;flex:1;min-height:0;border-radius:0 0 29px 29px}.device-status{height:26px;min-height:26px;border-radius:29px 29px 0 0}.home-indicator{bottom:13px}.phone-frame:before,.phone-frame:after{display:none}.route-sidebar{padding:16px 12px}@media(max-width:980px){.workbench{display:block}.route-sidebar{top:46px}.sidebar-backdrop{top:46px}.preview-stage{padding:6px 10px}.phone-frame{width:min(100%,540px)}}
/* Keep the full tall phone proportion; scroll the review stage on shorter displays. */
.preview-stage{display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;padding-top:12px;padding-bottom:18px}.stage-heading,.stage-foot{flex-shrink:0}.device-slot{flex-shrink:0;height:var(--phone-height,1170px);width:100%;max-width:540px}.phone-frame{height:100%;width:100%;border-radius:44px}.phone-frame iframe{border-radius:0 0 35px 35px}.device-status{border-radius:35px 35px 0 0}