/* Duas & adhkar (builder E, design 16 / m15). Colours through the theme variables. */
.qs-sb .in{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 14px;color:var(--mu);font-size:14.5px;height:48px}
.qs-sb .in .ic{color:var(--cu);width:20px;height:20px;flex:0 0 auto}
.qs-sb .in span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-sb .btn{height:46px}
.qs-chips{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.qs-chips span{height:32px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--font-body);color:#C5CEE8;border:1px solid rgba(255,255,255,.16);white-space:nowrap}
.qs-chips span.on{background:var(--cu);border-color:var(--cu);color:var(--ink2)}
.qs-chips .ic{width:14px;height:14px}
.qs-num{width:38px;height:38px;position:relative;display:grid;place-items:center;flex:0 0 auto;color:var(--cu)}
.qs-num svg{position:absolute;inset:0;width:100%;height:100%}
.qs-num b{position:relative;font:700 12px var(--font-body);color:var(--ink);font-style:normal}
.qs-sec{padding:70px 0}
.qs-sec.sand{background:var(--sand)}
.qs-sec .sec-h{margin-bottom:30px}
.qs-sec .sec-h h2{font-size:34px}
.qs-ring{position:relative;display:grid;place-items:center}
.qs-ring>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qs-ring>svg circle{fill:none;stroke-width:6}
.qs-ring>svg .t{stroke:var(--sand)}
.qs-ring>svg .p{stroke:var(--cu);stroke-linecap:round}
.qs-ring.done>svg .p{stroke:var(--ink)}
.qs-ring .v{position:relative;text-align:center;line-height:1.1}
.qs-ring .v b{display:block;font:700 18px var(--font-heading);color:var(--ink)}
.qs-ring .v b .ic{display:block;margin:0 auto}
.qs-ring .v small{font:600 10px var(--font-body);color:var(--mu)}
.du-tile{display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;border:1px solid var(--ln);border-radius:20px;position:relative;overflow:hidden;min-width:0}
.du-tile::after{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;background:var(--patd);border-radius:50%}
.du-tile b{font:700 14.5px var(--font-body);color:var(--ink);display:block}
.du-tile small{font:500 12px var(--font-body);color:var(--mu)}
.du-tile.on{background:var(--ink) var(--pat);color:#fff;border-color:var(--ink)}
.du-tile.on b{color:#fff}
.du-tile.on small{color:#C5CEE8}
.du-tile.on .ico{background:var(--cu);color:var(--ink2)}
.du-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:16px}
.du-cat{display:flex;flex-direction:column;gap:2px}
.du-cat a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font:600 13.5px var(--font-body);color:var(--tx)}
.du-cat a .ic{width:17px;height:17px;color:var(--mu)}
.du-cat a i{margin-left:auto;font:700 11px var(--font-body);font-style:normal;color:var(--mu);background:var(--sand);padding:2px 8px;border-radius:999px}
.du-cat a.on{background:var(--ink);color:#fff}
.du-cat a.on .ic{color:var(--gold)}
.du-cat a.on i{background:rgba(255,255,255,.14);color:var(--gold)}
.du-today{background:var(--ink2) var(--pat);color:#fff;border-radius:22px;padding:20px}
.du-today .k{font:700 11px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:6px}
.du-today .ar{font-size:23px;line-height:1.85;color:#fff;text-align:right;margin:10px 0 6px}
.du-today p{margin:0;font:500 13px/1.55 var(--font-body);color:#D9DFF0}
.du-today small{display:block;margin-top:8px;font:600 11.5px var(--font-body);color:#C5CEE8}
.du-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.du-hd h2{font-size:30px}
.du-hd p{margin:4px 0 0;font:400 14px var(--font-body);color:var(--mu)}
.du-hd .pw{width:260px;flex:0 0 auto}
.du-hd .pw .row{justify-content:space-between;font:700 12px var(--font-body);color:var(--ink);margin-bottom:6px}
.du-list{display:flex;flex-direction:column;gap:14px}
.du-card{padding:22px 24px;display:grid;grid-template-columns:1fr 150px;gap:22px}
.du-card.done{background:#F7F9FD;border-color:#D3DCF2}
.du-card.now{border-color:var(--cu);box-shadow:0 0 0 3px var(--cu3)}
.du-card .n{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.du-card .n b{font:700 15.5px var(--font-heading);color:var(--ink)}
.du-card .num{width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--gold);display:grid;place-items:center;font:700 12px var(--font-body);flex:0 0 auto}
.du-card.done .num{background:var(--tint);color:var(--ink)}
.du-card .arb{font-size:30px;line-height:2.1;padding-top:12px;text-align:right;color:var(--tx)}
.du-card .tl{font:italic 500 13.5px/1.6 var(--font-body);color:var(--cu2);margin-top:8px}
.du-card .en{font:500 14.5px/1.65 var(--font-body);color:#3A4460;margin-top:6px}
.du-card .src{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 12px var(--font-body);color:var(--mu);flex-wrap:wrap}
.du-card .src .ic{width:14px;height:14px;color:var(--cu2)}
.du-card .vt{font:500 12.5px/1.5 var(--font-body);color:var(--cu2);margin-top:8px;padding:8px 12px;background:var(--cu3);border-radius:10px}
.du-ct{display:flex;flex-direction:column;align-items:center;gap:12px;border-left:1px dashed var(--ln);padding-left:22px;justify-content:center}
.du-ct .qs-ring{width:92px;height:92px}
.du-ct .bt{display:flex;gap:6px}
.du-ct .bt span{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--ln);display:grid;place-items:center;color:var(--ink);background:#fff}
.du-ct .bt span.on{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.du-ct .bt span .ic{width:16px;height:16px}
.du-ct small{font:600 11px var(--font-body);color:var(--mu);text-align:center}
.du-sets{display:flex;gap:6px;margin-top:12px}
.du-sets span{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.14)}
.du-sets span.d{background:var(--gold)}
.du-sets span.h{background:linear-gradient(90deg,var(--gold) 33%,rgba(255,255,255,.14) 33%)}
.du-ev{padding:20px;display:flex;flex-direction:column;gap:10px}
.du-ev h3{font-size:17px}
.du-ev .r{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--ln);font:500 13.5px var(--font-body)}
.du-ev .r b{font-weight:700;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-ev .r span{margin-left:auto;font:600 12px var(--font-body);color:var(--mu);white-space:nowrap}
.du-tasv{background:var(--ink) var(--pat);color:#fff;border-radius:24px;padding:20px;text-align:center}
.du-tasv .big{width:150px;height:150px;margin:10px auto 12px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;position:relative}
.du-tasv .big svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.du-tasv .big circle{fill:none;stroke-width:8}
.du-tasv .big .t{stroke:rgba(255,255,255,.1)}
.du-tasv .big .p{stroke:var(--gold);stroke-linecap:round}
.du-tasv .big .v{position:relative}
.du-tasv .big .v b{display:block;font:600 50px/1 var(--font-heading);color:#fff}
.du-tasv .big .v small{font:600 11.5px var(--font-body);color:#C5CEE8}
.du-tasv h3{color:#fff;font-size:18px}
.du-tasv .ar{font-size:24px;color:var(--gold);line-height:1.5;direction:rtl}
.du-tasv p{margin:4px 0 0;font:500 12.5px/1.5 var(--font-body);color:#C5CEE8}
.du-tasv .ops{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.du-tasv .ops span{height:34px;padding:0 11px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--font-body);color:#fff;white-space:nowrap}
.du-tasv .ops span .ic{width:14px;height:14px}
.du-tasv .ops .toggle{width:32px;height:18px}
.du-tasv .ops .toggle::after{width:12px;height:12px}
.du-tasv .ops .toggle.on::after{left:17px}
.du-tasv .du-sets{margin-top:12px}
.du-tasv .tap{margin-top:12px;height:48px;border-radius:14px;background:var(--cu);color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:8px;font:800 14px var(--font-body)}
.du-sc{padding:18px 20px}
.du-sc h4{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.du-sc h4 .ic{width:16px;height:16px;color:var(--cu)}
.du-sc h4 .pill{margin-left:auto}
.du-sc h4 span.mut{margin-left:auto;font:600 11px var(--font-body);white-space:nowrap}
.du-au{display:flex;align-items:center;gap:10px}
.du-au>div{flex:1;min-width:0}
.du-au b{display:block;font:700 13.5px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-au small{display:block;font:500 11.5px var(--font-body);color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-au .pl{width:40px;height:40px;border-radius:50%;background:var(--cu);color:var(--ink2);display:grid;place-items:center;flex:0 0 auto}
.du-au .pl .ic{width:16px;height:16px}
.du-wk{display:flex;justify-content:space-between;margin:2px 0 12px}
.du-wk span{display:flex;flex-direction:column;align-items:center;gap:5px;font:700 10.5px var(--font-body);color:var(--mu)}
.du-wk i{width:30px;height:30px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:700 11px var(--font-body);font-style:normal;color:var(--ink)}
.du-wk .d i{background:var(--ink);color:var(--gold)}
.du-wk .d i .ic{width:14px;height:14px}
.du-wk .t i{background:#fff;border:2px solid var(--cu)}
.du-rev{display:flex;gap:12px;align-items:center;padding:16px 18px}
.du-rev>div{min-width:0}
.du-rev b{display:block;font:700 13.5px var(--font-body);color:var(--ink)}
.du-rev small{display:block;font:500 11.5px/1.45 var(--font-body);color:var(--mu);margin-top:2px}
.du-rm>div{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--ln)}
.du-rm>div>div{flex:1;min-width:0}
.du-rm>div>.ic{width:17px;height:17px;color:var(--cu2);flex:0 0 auto}
.du-rm b{display:block;font:700 13px var(--font-body);color:var(--ink)}
.du-rm small{display:block;font:500 11px var(--font-body);color:var(--mu)}
.du-rm .toggle{width:36px;height:22px}
.du-rm .toggle::after{width:16px;height:16px}
.du-rm .toggle.on::after{left:17px}
.du-print{background:#fff;border:1px solid var(--ln);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.du-print .im{height:190px;margin:12px 12px 0;border-radius:110px 110px 16px 16px;overflow:hidden;position:relative}
.du-print .im img{width:100%;height:100%;object-fit:cover}
.du-print .im .pill{position:absolute;left:14px;bottom:12px}
.du-print .bd{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.du-print h3{font-size:19px}
.du-print p{margin:0;font:400 13.5px/1.55 var(--font-body);color:var(--mu)}
.du-print .ft{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;font:600 12px var(--font-body);color:var(--mu)}
.qs-sb{background:#fff;border-radius:18px;padding:7px;display:flex;align-items:center;gap:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);width:470px;max-width:100%}
.qs-sb input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14.5px var(--font-body);color:var(--tx);height:46px}
.qs-sb .in{height:auto;border:0;padding:0 0 0 14px;box-shadow:none}
.qs-chips a{height:32px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--font-body);color:#C5CEE8;border:1px solid rgba(255,255,255,.16);white-space:nowrap}.qs-chips a.on{background:var(--cu);border-color:var(--cu);color:var(--ink2)}.qs-chips a .ic{width:14px;height:14px}
.du-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.du-tile .ico{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--gold)}.du-tile .ico .ic{width:18px;height:18px}
.du-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}.du-wrap>*{min-width:0}
.du-side{top:96px}
.du-ct .bt button{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--ln);display:grid;place-items:center;color:var(--ink);background:#fff;cursor:pointer;padding:0}.du-ct .bt button .ic{width:16px;height:16px}
.du-ct .bt button.on,.du-ct .bt button.ink{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.du-ct .tapc{width:92px;height:92px;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.du-card.done .qs-ring>svg .p{stroke:var(--ink)}
.du-tasv .tap{width:100%;border:0;cursor:pointer}.du-tasv .ops button,.du-tasv .ops label{height:34px;padding:0 11px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--font-body);color:#fff;white-space:nowrap;cursor:pointer}
.du-tasv .ops .ic{width:14px;height:14px}.du-tasv .ops input.sw{width:32px;height:18px}.du-tasv .ops input.sw::after{width:12px;height:12px}.du-tasv .ops input.sw:checked::after{left:17px}
.du-tasv .big b{transition:transform .12s}.du-tasv .big.bump b{transform:scale(1.08)}
.du-res{display:flex;flex-direction:column;gap:12px}
.du-one{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.du-one .ar{font-size:24px;line-height:1.9;text-align:right;color:var(--tx)}
.du-show .arb{font-size:36px;line-height:2.1;text-align:right;color:var(--tx)}
.du-acts{display:flex;gap:8px;flex-wrap:wrap}.du-acts .on{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.du-progress{position:sticky;top:76px;z-index:5}
@media (max-width:1180px){.du-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.du-wrap{grid-template-columns:minmax(0,1fr)}.du-side{position:static;order:2}}
@media (max-width:760px){
  .qs-sec{padding:30px 0}.qs-sec .sec-h h2{font-size:25px}
  .du-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.du-tile{padding:14px;border-radius:18px}
  .du-hd{flex-direction:column;align-items:stretch}.du-hd h2{font-size:24px}.du-hd .pw{width:auto}
  .du-card{grid-template-columns:minmax(0,1fr);padding:16px;gap:12px;border-radius:20px}.du-card .arb{font-size:24px;line-height:2}
  .du-ct{flex-direction:row;border-left:0;border-top:1px dashed var(--ln);padding:12px 0 0;justify-content:space-between}.du-ct .qs-ring,.du-ct .tapc{width:64px;height:64px}.du-ct .qs-ring .v b{font-size:14px}
  .du-show .arb{font-size:26px}.du-one{grid-template-columns:minmax(0,1fr)}
  .du-progress{top:60px}
}
@media (max-width:760px){.phero .pr>*{width:100%}.qs-sb{width:100%}}
/* phones (design m15): the routine's progress is a navy card; on the routine page the bar title replaces the heading */
@media (max-width:760px){
  .du-hd .pw{background:var(--ink) var(--pat);color:#fff;border-radius:22px;padding:16px 18px}
  .du-hd .pw .row{color:#fff;font-size:15px;margin-bottom:12px}.du-hd .pw .row .lnk{color:var(--gold)}
  .du-hd .pw .bar{background:rgba(255,255,255,.14)}
  .du-rt .du-hd>div:first-child{display:none}
}
.du-hd .pw .pw-t{display:block;margin-top:7px;font:600 11.5px var(--font-body);color:var(--mu)}
@media (max-width:760px){.du-hd .pw .pw-t{color:rgba(255,255,255,.72)}}