/* photos page */
.pHero { padding: 34px 0 14px; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.pHero h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.pHero p { margin: 4px 0 0; color: var(--muted); }
.pTabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 2px; }
.pTabs button { border: 0; background: transparent; padding: .5rem 1rem; border-radius: 10px; font-weight: 600; color: var(--muted); cursor: pointer; font: inherit; }
.pTabs button.active { background: var(--primary); color: #fff; }

.pEmpty { margin-top: 8px; background: #fff; border: 2px dashed #cfe0da; border-radius: 24px; padding: clamp(24px, 5vw, 48px); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.pEmpty:hover { border-color: var(--primary); background: #fbfefd; }
.pEmpty.small { padding: 28px; }
.pEmpty h2 { margin: 10px 0 4px; font-size: 1.3rem; }
.pEmpty p { margin: 0; color: var(--muted); }
.pIcon { width: 76px; height: 76px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.pIcon svg { width: 42px; height: 42px; }
.pEmpty .pSmall { margin-top: 10px; font-size: .84rem; }

.pWork { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.pStage { background: repeating-conic-gradient(#f1f5f4 0 25%, #fff 0 50%) 50% / 22px 22px; border: 1px solid var(--line); border-radius: 22px; padding: 20px; text-align: center; }
.pView { display: flex; justify-content: center; align-items: center; gap: 14px; }
#pCanvas { min-width: 0; max-width: calc(100% - 62px); max-height: 62vh; width: auto; height: auto; box-shadow: 0 10px 30px rgba(20, 50, 45, .18); background: #fff; cursor: grab; touch-action: none; transition: opacity .2s ease; }
.zoomCol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 99px; padding: 8px 6px; box-shadow: 0 4px 14px rgba(20, 50, 45, .08); }
.zoomCol input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 26px; height: min(40vh, 300px); margin: 0; accent-color: var(--primary); cursor: pointer; }
.zBtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--primary); font: inherit; font-size: 1.3rem; line-height: 1; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.zBtn:hover { border-color: var(--primary); background: var(--primary-soft); }
.zLbl { font-size: .72rem; color: var(--muted); font-weight: 600; }
#pCanvas:active { cursor: grabbing; }
.pDims { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }
.pNote { margin: 4px 0 0; color: var(--primary); font-weight: 600; font-size: .92rem; min-height: 1.4em; }
.pStage.busy #pCanvas { opacity: .55; }
.pStage.busy .pNote::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-end: 8px; vertical-align: -2px; border: 2px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: pSpin .8s linear infinite; }
@keyframes pSpin { to { transform: rotate(360deg); } }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.pSide { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: grid; gap: 12px; position: sticky; top: 88px; }
.fieldL { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: var(--muted); font-weight: 600; }
.fieldL input[type=range] { accent-color: var(--primary); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bgRow { display: flex; gap: 6px; flex-wrap: wrap; }
.bgSw { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .3rem .7rem .3rem .45rem; cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink); }
.bgSw::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1px solid #d6dedb; }
.bgSw.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.chkRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); border-radius: 99px; padding: .3rem .8rem; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--muted); }
.chip input { accent-color: var(--primary); }
.dlBox { display: grid; gap: 8px; }
.fine { margin: 0; color: var(--muted); font-size: .8rem; }

.cOpts { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cOpts .opt { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.cOpts .opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.cOpts .opt input[type=radio] { margin-top: 5px; accent-color: var(--primary); }
.cOpts .opt span { display: flex; flex-direction: column; gap: 2px; }
.cOpts small { color: var(--muted); font-size: .8rem; }
.cOpts input[type=number] { width: 76px; border: 1px solid var(--line); border-radius: 8px; padding: .15rem .4rem; font: inherit; }
.cRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; max-width: 620px; }
.cList { display: grid; gap: 8px; margin-top: 8px; }
.cItem { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.cItem img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.cInfo { flex: 1; min-width: 0; }
.cInfo b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cInfo small { color: var(--muted); }
.cInfo .ok { color: var(--primary); font-weight: 700; }
.cInfo .bad { color: var(--rose); }
.cActions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.shot { margin: 26px 0 8px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
.shotHead h2 { margin: 0; font-size: 1.25rem; }
.shotHead p { margin: 4px 0 0; color: var(--muted); }
.shotGrid { margin-top: 16px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
.shotFrame { margin: 0; text-align: center; }
.shotFrame svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.shotFrame figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.shotTips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: tip; }
.shotTips li { counter-increment: tip; position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 14px; padding-inline-start: 50px; display: flex; flex-direction: column; gap: 3px; }
.shotTips li::before { content: counter(tip); position: absolute; inset-inline-start: 12px; top: 12px; width: 28px; height: 28px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.shotTips b { font-size: .97rem; }
.shotTips span { color: var(--muted); font-size: .88rem; line-height: 1.7; }

@media (max-width: 900px) { .pWork { grid-template-columns: 1fr; } .pSide { position: static; } .cOpts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .shotGrid { grid-template-columns: 1fr; } .shotTips { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cOpts, .cRow { grid-template-columns: 1fr; } .pStage { padding: 12px; } .pView { gap: 8px; } #pCanvas { max-width: calc(100% - 52px); } }
.rotVal { color: var(--primary); font-weight: 700; margin-inline-start: 4px; direction: ltr; unicode-bidi: isolate; }
.rotHint { color: var(--muted); font-weight: 500; font-size: .76rem; }

/* «إرسال»: the share sheet (WhatsApp, Telegram, mail…) */
.sendBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.sendBtn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.cBtns { display: flex; gap: 6px; flex: none; }
@media (max-width: 520px) { .cBtns .sendBtn span { display: none; } .cBtns .sendBtn { padding-inline: .6rem; } }

/* video and audio */
.vNote { margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid; font-size: .92rem; line-height: 1.8; }
.vNote::before { margin-inline-end: 6px; font-weight: 700; }
.vNote.err { background: var(--rose-soft); border-color: #f2c4cd; color: #8a2338; }
.vNote.err::before { content: "تنبيه:"; }
.vNote.warn { background: #fff6e0; border-color: #f1dca6; color: #6d4a07; }
.vNote.warn::before { content: "تنبيه:"; }
.vNote.info { background: var(--primary-soft); border-color: #bfe3d6; color: #0b5543; }
.pEmpty.loading { opacity: .6; pointer-events: none; }
.pEmpty.loading h2::after { content: ""; display: inline-block; width: 15px; height: 15px; margin-inline-start: 10px; vertical-align: -2px; border: 2px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: pSpin .8s linear infinite; }
.vWork { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.vStage { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px; }
/* the player is the trimmer: picture, then a dark bar with play and the strip of frames between two golden handles */
.vPlayer { --trim: #f5bf4f; border-radius: 16px; overflow: hidden; background: #0b1412; }
.vScreen { position: relative; width: 100%; max-height: 56vh; background: #000; cursor: pointer; }
.vScreen video, .vScreen canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.vBigPlay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; transition: opacity .2s ease; }
.vBigPlay svg { width: 30px; height: 30px; fill: currentColor; }
.vPlayer.playing .vBigPlay, .vPlayer.noplay .vBigPlay, .vPlayer.locked .vBigPlay { opacity: 0; pointer-events: none; }
.vBar { display: flex; align-items: center; gap: 6px; padding: 12px 10px 12px 12px; direction: ltr; }
.vPlay { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #0b1412; display: grid; place-items: center; cursor: pointer; }
.vPlay svg { width: 20px; height: 20px; fill: currentColor; }
.vPlay .i-pause, .vPlayer.playing .vPlay .i-play { display: none; }
.vPlayer.playing .vPlay .i-pause { display: block; }
.vPlayer.noplay .vPlay { opacity: .35; pointer-events: none; }
.vTL { flex: 1; min-width: 0; padding: 4px 18px; touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.vPlayer.locked .vTL { pointer-events: none; opacity: .6; }
.vTrack { position: relative; height: 52px; }
.vStrip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 6px; }
.vShade { position: absolute; top: 0; bottom: 0; background: rgba(5, 10, 9, .66); pointer-events: none; }
.vShade.l { left: 0; border-radius: 6px 0 0 6px; }
.vShade.r { right: 0; border-radius: 0 6px 6px 0; }
.vSel { position: absolute; top: -3px; bottom: -3px; border-top: 3px solid var(--trim); border-bottom: 3px solid var(--trim); pointer-events: none; }
.vHead { position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; z-index: 1; }
.vHandle { position: absolute; top: -3px; bottom: -3px; width: 18px; background: var(--trim); display: grid; place-items: center; cursor: ew-resize; touch-action: none; z-index: 2; }
.vHandle.s { transform: translateX(-100%); border-radius: 9px 0 0 9px; }
.vHandle.e { border-radius: 0 9px 9px 0; }
.vHandle i { width: 3px; height: 20px; border-radius: 2px; background: rgba(60, 40, 0, .55); pointer-events: none; }
.vHandle::before { content: ""; position: absolute; inset: -8px -10px; }
.vHandle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vTL.dragging .vHandle { box-shadow: 0 0 0 3px rgba(245, 191, 79, .35); }
.vTimes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: .86rem; color: var(--muted); }
.vTimes b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vDur { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vReset { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .1rem .65rem; font: inherit; font-size: .78rem; font-weight: 600; color: var(--primary); cursor: pointer; }
.vHint { margin: 6px 2px 0; font-size: .82rem; color: var(--muted); }
/* crop: a box over the picture itself (placed by video.js), shade beyond a golden frame, a tab on each side */
.vCrop { position: absolute; pointer-events: none; z-index: 1; }
.vCShade { position: absolute; background: rgba(5, 10, 9, .66); }
.vCShade.t { top: 0; left: 0; right: 0; }
.vCShade.b { bottom: 0; left: 0; right: 0; }
.vCShade.l { left: 0; }
.vCShade.r { right: 0; }
.vCFrame { position: absolute; border: 3px solid var(--trim); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .25); }
.vCHandle { position: absolute; background: var(--trim); display: grid; place-items: center; pointer-events: auto; touch-action: none; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.vCHandle.t, .vCHandle.b { width: 60px; height: 18px; transform: translateX(-50%); cursor: ns-resize; }
.vCHandle.l, .vCHandle.r { width: 18px; height: 60px; transform: translateY(-50%); cursor: ew-resize; }
.vCHandle.t { border-radius: 0 0 9px 9px; }
.vCHandle.b { border-radius: 9px 9px 0 0; }
.vCHandle.l { border-radius: 0 9px 9px 0; }
.vCHandle.r { border-radius: 9px 0 0 9px; }
.vCHandle i { width: 22px; height: 3px; border-radius: 2px; background: rgba(60, 40, 0, .55); pointer-events: none; }
.vCHandle.l i, .vCHandle.r i { width: 3px; height: 22px; }
.vCHandle::before { content: ""; position: absolute; inset: -12px; }
.vCHandle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vCrop.dragging .vCHandle { box-shadow: 0 0 0 3px rgba(245, 191, 79, .35); }
.vPlayer.locked .vCHandle { pointer-events: none; opacity: .6; }
.vCropRow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 2px 0; }
.vCropBtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .32rem .85rem; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.vCropBtn svg { width: 17px; height: 17px; flex: none; }
.vCropBtn[aria-pressed="true"] { background: #fff6e0; border-color: #f1c66b; color: #8a5a00; }
.vCropBtn:disabled { opacity: .5; cursor: not-allowed; }
.vCropTxt { font-size: .84rem; color: var(--muted); line-height: 1.7; }
.vCropTxt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vNoPrev { margin: 8px 0 0; padding: 10px 12px; text-align: center; color: var(--muted); background: var(--bg); border-radius: 12px; font-size: .86rem; }
.vFile { margin: 10px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.vFile b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vFile span { color: var(--muted); font-size: .86rem; }
.vGoals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vGoals label { display: flex; }
.vGoals input { position: absolute; opacity: 0; pointer-events: none; }
.vGoals span { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .4rem; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; background: #fff; }
.vGoals input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.vGoals input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.vGoals input:disabled + span { opacity: .5; cursor: not-allowed; }
.vGoals:not(.vApps) label:first-child { grid-column: 1 / -1; }
.vApps span { font-size: .86rem; padding: .5rem .3rem; }
.vApps label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vAppInfo { margin: -4px 2px 0; font-size: .84rem; color: var(--muted); line-height: 1.8; }
.vAppInfo b { color: #8a5a00; font-weight: 600; }
.vProg { display: flex; align-items: center; gap: 10px; }
.vBarWrap { flex: 1; height: 10px; border-radius: 99px; background: var(--primary-soft); overflow: hidden; }
.vBarWrap i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary-2), var(--primary)); transition: width .2s linear; }
#vPct { min-width: 3em; text-align: center; font-weight: 700; color: var(--primary); }
.vOut { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--primary-soft); }
.vResTxt { margin: 0; font-weight: 600; line-height: 1.8; }
.vResTxt b { color: var(--primary); }
.vResTxt small { color: var(--muted); font-weight: 500; }
.vResTxt .bad { color: var(--rose); }
.vOutPrev video, .vOutPrev img { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 12px; background: #0b1412; }
.vOutPrev audio { width: 100%; }
@media (max-width: 900px) { .vWork { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pTabs { display: flex; width: 100%; } .pTabs button { flex: 1; padding: .5rem .4rem; font-size: .88rem; } }

/* the apps in their own colours: a tint and a dot in the brand colour, filled with it when chosen */
.vApps span { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--tint); border-color: var(--edge); transition: background-color .15s ease, box-shadow .15s ease; }
.vApps span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--b)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.vApps input:checked + span { background: var(--b); color: var(--bt); border-color: transparent; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.vApps input:checked + span::before { content: "✓"; width: auto; height: auto; background: none; box-shadow: none; font-size: .85rem; line-height: 1; }
.vApps input[value="snap"] + span { --b: #FFFC00; --bt: #111; --tint: #fffde3; --edge: #e8dc3a; }
.vApps input[value="reels"] + span, .vApps input[value="igpost"] + span { --b: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 78%, #515BD4); --bt: #fff; --tint: #fdf1f7; --edge: #eab0cf; }
.vApps input[value="tiktok"] + span { --b: #111; --bt: #fff; --tint: #effcfc; --edge: #a8e6e4; --dot: linear-gradient(135deg, #25F4EE 50%, #FE2C55 50%); }
.vApps input[value="tiktok"]:checked + span { text-shadow: -1px 0 rgba(37, 244, 238, .55), 1px 0 rgba(254, 44, 85, .55); }
.vApps input[value="shorts"] + span { --b: #FF0033; --bt: #fff; --tint: #fff1f3; --edge: #ffb6c2; }
.vApps input[value="x"] + span { --b: #000; --bt: #fff; --tint: #f4f4f4; --edge: #c4c4c4; }
.vApps input[value="wa"] + span, .vApps input[value="wastatus"] + span { --b: #25D366; --bt: #053d2b; --tint: #edfbf3; --edge: #a3e6be; }
.vApps input[value="telegram"] + span { --b: linear-gradient(180deg, #2AABEE, #1c8acb); --bt: #fff; --tint: #eef7fd; --edge: #a9d9f4; --dot: #2AABEE; }