/* Android Sebha portrait/landscape composition; shared by both website themes. */
.sb-app{max-width:1250px;margin:1rem auto 1.5rem;color:var(--bs-body-color,#243632);min-width:0}.sb-app *{box-sizing:border-box}.sb-app [hidden]{display:none!important}.sb-heading,.sb-heading h1{display:flex;align-items:center;gap:.65rem}.sb-heading{justify-content:space-between;margin-bottom:.7rem}.sb-heading h1{font-size:1.5rem;margin:0}.sb-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px}.sb-app button{touch-action:manipulation}.sb-app button:focus-visible,.sb-app input:focus-visible,.sb-app select:focus-visible{outline:3px solid var(--bs-info,#3498db);outline-offset:3px}.sb-board{--sb-base:#05171c;--sb-surface:#0c292f;--sb-ink:#e6f3eb;--sb-accent:#a5d6cd;--sb-base:color-mix(in srgb,var(--bs-primary,#2c3e50) 9%,#000);--sb-surface:color-mix(in srgb,var(--bs-primary,#2c3e50) 24%,#000);--sb-ink:color-mix(in srgb,var(--bs-primary,#2c3e50) 16%,#fff);--sb-accent:color-mix(in srgb,var(--bs-primary,#2c3e50) 38%,#fff);background:var(--sb-base);color:var(--sb-ink);border:1px solid #a5d6cd55;border-radius:1.2rem;display:grid;grid-template-columns:minmax(260px,310px) minmax(0,1fr);padding:.7rem;gap:.75rem;direction:ltr;min-width:0;isolation:isolate}.sb-controls{display:flex;flex-direction:column;gap:.65rem;background:var(--sb-surface);border:1px solid #a5d6cd44;border-radius:1rem;padding:.65rem;min-width:0;direction:inherit}.sb-app[dir=rtl] .sb-controls{direction:rtl}.sb-selector{display:flex;gap:.35rem;min-width:0}.sb-selector>.btn{flex:0 0 44px;padding:.4rem}.sb-selector>.sb-choose{flex:1;min-width:0;font-size:.95rem}.sb-button{background:#214047;background:color-mix(in srgb,var(--sb-surface) 82%,var(--sb-accent));border:1px solid #a5d6cd66;color:var(--sb-ink);border-radius:.8rem}.sb-button:hover,.sb-button:active{background:#31565d;background:color-mix(in srgb,var(--sb-surface) 70%,var(--sb-accent));color:var(--sb-ink);border-color:var(--sb-accent)}.sb-button:disabled{opacity:.4}.sb-reading{display:flex;flex-direction:column;min-height:170px;flex:1;min-width:0}.sb-zekr{font-size:clamp(1.15rem,1.8vw,1.65rem);line-height:1.8;font-weight:650;white-space:pre-line;overflow-wrap:anywhere;text-align:start;max-height:340px;overflow:auto;padding:.3rem .4rem;flex:1;scrollbar-width:thin}.sb-app[dir=rtl] .sb-zekr{font-size:clamp(1.4rem,2.1vw,1.9rem)}#sb-target{font-size:.9rem;text-align:center;margin:.25rem 0}.sb-progress{height:14px;margin:.7rem .25rem;border-radius:999px;background:#ffffff20;overflow:hidden}.sb-progress>span{display:block;width:0;height:100%;background:repeating-linear-gradient(130deg,#6ecab5 0 10px,#a9e9d4 10px 20px);border-radius:inherit;transition:width .12s linear}.sb-modes{border-top:1px solid #a5d6cd44;padding-top:.6rem}.sb-modes>label{display:block;font-size:.85rem;margin-bottom:.4rem}.sb-modes>div{display:flex;align-items:center;gap:.6rem}.sb-modes select{width:7rem;min-height:44px;flex:1;min-width:0}.sb-toggle{display:flex;align-items:center;gap:.45rem;cursor:pointer;min-height:44px}.sb-toggle input{margin:0;flex-shrink:0}.sb-actions{display:flex;gap:.4rem}.sb-actions>.btn{flex:1;padding:.45rem;min-width:0}.sb-actions>.sb-swap{flex:0 0 44px}.sb-stage{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.sb-count{position:relative;display:block;border:0;background:transparent;color:inherit;width:100%;height:clamp(360px,65vh,620px);padding:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border-radius:1rem;cursor:pointer;overflow:hidden}.sb-count svg{display:block;width:100%;height:100%;pointer-events:none}.sb-count:disabled{cursor:default;opacity:.4}#sb-number{font-size:48px;font-weight:700;fill:var(--sb-accent);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}#sb-detail1,#sb-detail2{font-size:9px;fill:var(--sb-ink)}.sb-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;background:#18383f;color:var(--sb-ink);border:1px solid #a5d6cd55;border-radius:999px;padding:.35rem .7rem;margin:.3rem 0 0;font-size:.8rem;direction:inherit}.sb-hint>button{border:0;background:transparent;color:inherit;min-width:32px;min-height:32px}.sb-board.sb-controls-right{grid-template-columns:minmax(0,1fr) minmax(260px,310px)}.sb-controls-right .sb-controls{grid-column:2;grid-row:1}.sb-controls-right .sb-stage{grid-column:1;grid-row:1}.sb-count.is-counting #sb-bead{filter:drop-shadow(0 0 3px #ffdf88)}.sb-count.is-complete #sb-tassel{animation:sb-shimmer .7s ease-out}.sb-count.is-complete #sb-number{animation:sb-pulse .3s ease-out}.sb-app[dir=rtl] .sb-hint{direction:rtl}.sb-dialog{width:min(550px,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);padding:0;border:1px solid var(--bs-border-color,#cbd7d3);border-radius:1.1rem;background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#243632);box-shadow:0 20px 65px #0005;overflow:hidden;margin:auto}.sb-dialog[open]{display:flex;flex-direction:column}.sb-dialog::backdrop{background:#05191ca6;backdrop-filter:blur(3px)}.sb-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem 1rem;background:var(--bs-info,#3498db);color:#fff}.sb-dialog h2{font-size:1.15rem;font-weight:700;margin:0}.sb-dialog>header .btn{min-width:44px;flex-shrink:0}.sb-dialog-body{overflow:auto;overscroll-behavior:contain;min-height:0;padding:.8rem 1rem}.sb-dialog>footer{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;padding:.7rem 1rem;border-top:1px solid var(--bs-border-color,#cbd7d3)}.sb-dialog .form-control,.sb-dialog .form-select{min-height:44px}.sb-dialog textarea{width:100%;resize:vertical;max-height:35vh;min-height:100px}.sb-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem;min-height:120px}.sb-list-row{display:flex;align-items:center;gap:.5rem;border-radius:.7rem;background:var(--bs-tertiary-bg,#f1f5f3);padding:.25rem;min-width:0}.sb-list-row.is-selected{background:color-mix(in srgb,var(--bs-info,#3498db) 18%,var(--bs-body-bg,#fff));outline:1px solid var(--bs-info,#3498db)}.sb-entry{flex:1;border:0;background:transparent;color:inherit;text-align:start;padding:.5rem;line-height:1.65;overflow-wrap:anywhere;min-width:0;white-space:pre-line}.sb-entry small{display:block}.sb-list-row>.btn{flex:0 0 40px;min-height:44px}.sb-list-row>label{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0;cursor:pointer;padding:.5rem}.sb-list-row label>span{flex:1;overflow-wrap:anywhere;white-space:pre-line}.sb-dialog label{font-weight:600}.sb-field{display:grid;gap:.4rem;margin-bottom:.8rem}.sb-setting{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;border-bottom:1px solid var(--bs-border-color,#cbd7d3);padding:.6rem 0}.sb-setting .form-check-input{flex-shrink:0;margin:0}.sb-setting-note{font-size:.85rem;margin:.4rem 0}.sb-brightness{width:100%;accent-color:var(--bs-info,#3498db)}.sb-dialog .sb-list-count{font-size:.85rem;margin:.5rem 0}.sb-list-error{color:var(--bs-danger,#b52d34)}
@keyframes sb-pulse{50%{opacity:.65}}@keyframes sb-shimmer{0%{opacity:.1}40%{opacity:.5}100%{opacity:0}}
@media(max-width:699px),(max-aspect-ratio:23/20){.sb-board,.sb-board.sb-controls-right{display:flex;flex-direction:column;padding:.55rem;gap:.5rem}.sb-controls{display:contents}.sb-selector{order:0}.sb-reading{order:1;background:var(--sb-surface);border-radius:.8rem;min-height:0;padding:.35rem}.sb-zekr{max-height:190px;font-size:1.15rem;line-height:1.7}.sb-app[dir=rtl] .sb-zekr{font-size:1.4rem}.sb-stage{order:2}.sb-modes{order:3;border:0;padding:0}.sb-actions{order:4}.sb-actions>.sb-swap{display:none}.sb-count{height:clamp(330px,51vh,500px)}.sb-hint{font-size:.75rem}.sb-heading{gap:.4rem}.sb-heading h1{font-size:1.25rem}.sb-modes>label{font-size:.8rem}.sb-modes>div{justify-content:center}.sb-modes select{flex:0 1 160px}.sb-dialog-body{padding:.65rem}.sb-dialog>header,.sb-dialog>footer{padding:.5rem .65rem}}
@media(min-width:700px) and (max-height:550px){.sb-count{height:330px}.sb-zekr{max-height:160px;font-size:1.1rem}.sb-app[dir=rtl] .sb-zekr{font-size:1.25rem}.sb-reading{min-height:90px}.sb-controls{gap:.4rem}.sb-modes{padding-top:.3rem}.sb-hint{position:absolute;bottom:0}}
@media(prefers-reduced-motion:reduce){.sb-progress>span{transition:none}.sb-count.is-complete #sb-number,.sb-count.is-complete #sb-tassel{animation:none}}

.sb-app[dir=rtl] .sb-selector .fa-chevron-left,.sb-app[dir=rtl] .sb-selector .fa-chevron-right{transform:rotate(180deg)}