/* v28.44 — «استوديو Jokt»: تصميم جديد كامل لصفحة التصوير (زجاج داكن، عمود أدوات عائم، زر تسجيل احترافي، أوضاع كبسولية)
   الوظائف كما هي تمامًا — هذا الملف يغيّر الشكل فقط ويُفعَّل بالكلمة studio في camera.js
   لحذفه والرجوع للتصميم السابق: احذف هذا الملف وسطره من index.html */

.cam.v281.studio{
  --bar:calc(112px + env(safe-area-inset-bottom));
  --glass:rgba(10,9,22,.42); --glass-b:rgba(255,255,255,.14); --ink:#fff; --muted:rgba(255,255,255,.62);
  --pink:#FF2D7A; --violet:#8B5CF6; --cyan:#22D3EE;
  background:#000;
}

/* ===== المعاينة ===== */
.cam.v281.studio .cam-stage,.cam.v281.studio .cam-shade{top:calc(env(safe-area-inset-top) + 6px);left:6px;right:6px;bottom:var(--bar);border-radius:28px;overflow:hidden}
.cam.v281.studio .cam-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 70%,rgba(0,0,0,.6) 100%)}
.cam.v281.studio .cam-progress{top:calc(env(safe-area-inset-top) + 14px);left:22px;right:22px;height:3px;background:rgba(255,255,255,.22)}

/* ===== الشريط العلوي ===== */
.cam.v281.studio .cam-top{top:calc(env(safe-area-inset-top) + 18px);left:18px;right:18px}
.cam.v281.studio .cam-top .cam-x{width:40px;height:40px;border-radius:20px;background:var(--glass)!important;border:1px solid var(--glass-b)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);filter:none!important;display:grid;place-items:center}
.cam.v281.studio .cam-top .cam-x svg{width:20px;height:20px}
.cam.v281.studio .cam-sound{height:38px!important;padding:0 16px 0 14px!important;border-radius:19px;background:var(--glass)!important;border:1px solid var(--glass-b)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);filter:none!important;font:700 13.5px Cairo,system-ui,sans-serif;gap:7px}
.cam.v281.studio .cam-sound svg{width:17px;height:17px;color:var(--pink)}
.cam.v281.studio .cam-timepill{height:34px;padding:0 14px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(14px)}

/* ===== عمود الأدوات العائم ===== */
.cam.v281.studio .cam-side{top:calc(env(safe-area-inset-top) + 74px)!important;right:16px!important;gap:2px!important;padding:6px!important;border-radius:26px;background:var(--glass)!important;border:1px solid var(--glass-b)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cam.v281.studio .cam-side button{width:42px!important;height:42px!important;border-radius:21px;filter:none!important;display:grid;place-items:center;position:relative;color:#fff;transition:background .15s}
.cam.v281.studio .cam-side button:active{background:rgba(255,255,255,.12)}
.cam.v281.studio .cam-side button svg{width:23px!important;height:23px!important}
.cam.v281.studio .cam-side button.on{color:var(--cyan)}
.cam.v281.studio .cam-side button.on::after{content:'';position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:2px;background:var(--cyan)}
.cam.v281.studio .cam-side em{top:3px!important;right:1px!important;left:auto!important;min-width:18px;height:16px;padding:0 4px;border-radius:8px;background:var(--pink);color:#fff;font:800 9.5px/16px Poppins,system-ui,sans-serif;font-style:normal;text-align:center}
.cam.v281.studio .cam-side em:empty{display:none}
.cam.v281.studio .cs-extra{gap:2px}
.cam.v281.studio .cam-side .chev{border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 21px 21px;margin-top:2px}
.cam.v281.studio .cam-side .chev svg{width:20px!important;height:20px!important}

/* ===== اسم الفلتر فوق زر التسجيل ===== */
.cam.v281.studio .cam-fmini{display:block!important;left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--bar) + 126px);padding:4px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(12px);font:800 12px Cairo,system-ui,sans-serif;text-shadow:none;white-space:nowrap}
.cam.v281.studio .cam-fmini:empty{display:none!important}
.cam.v281.studio .cam-fname{display:none!important}

/* ===== دوائر الفلاتر ===== */
.cam.v281.studio .cam-filters{bottom:calc(var(--bar) + 18px)!important;height:96px;gap:14px!important;padding:0 calc(50% - 24px)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.cam.v281.studio .cam-filters button{gap:5px}
.cam.v281.studio .cam-filters span{width:48px!important;height:48px!important;border-radius:24px!important;border:1.5px solid rgba(255,255,255,.75)!important;box-shadow:0 4px 14px rgba(0,0,0,.45)!important}
.cam.v281.studio .cam-filters button small{font-size:10px!important;font-weight:700;opacity:.9}

/* ===== زر التسجيل ===== */
.cam.v281.studio .cam-bottom{bottom:calc(var(--bar) + 22px)!important}
.cam.v281.studio .cam-rec,.cam.v281.studio .cam-ring{width:84px;height:84px}
.cam.v281.studio .cam-ring .r-bg{stroke:#fff;stroke-width:4.5px;opacity:.95}
.cam.v281.studio .cam-ring .r-fg{stroke:url(#jkRing);stroke-width:4.5px}
.cam.v281.studio .cam-dot{width:64px!important;height:64px!important;border-radius:32px!important;background:radial-gradient(circle at 35% 30%,#FF7AA8 0%,var(--pink) 45%,#E11D74 100%)!important;box-shadow:0 6px 22px rgba(255,45,122,.45),inset 0 -3px 8px rgba(0,0,0,.18)!important;opacity:1!important}
.cam.v281.studio.photo .cam-dot,.cam.v281.studio.textmode .cam-dot{background:radial-gradient(circle at 35% 30%,#fff 0%,#F3F4F6 60%,#D1D5DB 100%)!important;box-shadow:0 6px 22px rgba(255,255,255,.25)!important}
.cam.v281.studio.recording .cam-dot{width:32px!important;height:32px!important;border-radius:9px!important}
.cam.v281.studio.recording .cam-ring .r-bg,.cam.v281.studio.has-segs .cam-ring .r-bg{stroke:rgba(255,255,255,.3)}
.cam.v281.studio .cam-del,.cam.v281.studio .cam-done{width:46px!important;height:46px!important;border-radius:23px!important;backdrop-filter:blur(14px)}
.cam.v281.studio .cam-del{background:var(--glass)!important;border:1px solid var(--glass-b)!important;right:calc(50% + 66px)}
.cam.v281.studio .cam-done{background:linear-gradient(135deg,var(--pink),var(--violet))!important;color:#fff!important;border:0!important;left:calc(50% + 66px);box-shadow:0 6px 18px rgba(139,92,246,.45)}

/* ===== الشريط السفلي: الأوضاع كبسولة + الملصقات + المعرض ===== */
.cam.v281.studio .cam-modes{left:72px!important;right:72px!important;bottom:calc(env(safe-area-inset-bottom) + 30px)!important;height:36px;padding:3px!important;gap:0!important;border-radius:18px;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important;justify-content:space-between;align-items:center;overflow:hidden}
.cam.v281.studio .cam-modes button{flex:1;height:30px;padding:0 4px!important;border-radius:15px!important;font:700 12.5px Cairo,system-ui,sans-serif!important;color:var(--muted)!important;transition:background .2s,color .2s}
.cam.v281.studio .cam-modes button.on{background:#fff!important;color:#0B0A1A!important;font-weight:800}
.cam.v281.studio .cam-modes button.on::after{display:none}
.cam.v281.studio .cam-gal,.cam.v281.studio .cam-stk{width:46px!important;height:46px!important;bottom:calc(env(safe-area-inset-bottom) + 25px)!important}
.cam.v281.studio .cam-gal{right:16px!important;border-radius:14px!important;border:2px solid rgba(255,255,255,.9)!important;background-color:rgba(255,255,255,.08)!important;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.cam.v281.studio .cam-stk{left:16px!important;border-radius:23px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important}
.cam.v281.studio .cam-stk .stk-lbl{top:calc(100% + 4px);font-size:10px;color:var(--muted);text-shadow:none}
.cam.v281.studio .cam-hint{bottom:calc(env(safe-area-inset-bottom) + 76px);font-size:12px;color:var(--muted)}

/* ===== اللوحات (الأدوات / الملصقات / النص) ===== */
.cam.v281.studio .cam-sheet{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:28px;background:rgba(16,14,32,.94);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 -12px 40px rgba(0,0,0,.55)}
.cam.v281.studio .cs-head h2{font-size:18px}
.cam.v281.studio .cs-grid{gap:14px 8px}
.cam.v281.studio .cs-grid span{width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}
.cam.v281.studio .cs-grid small{font-size:11.5px;color:rgba(255,255,255,.82)}
.cam.v281.studio .cs-grid button.on span{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.4);color:var(--cyan)}
.cam.v281.studio .cs-beauty{border-radius:18px;background:rgba(255,255,255,.05)}
.cam.v281.studio .cam-filters button.on small{opacity:0!important} /* اسم المختار يظهر فوق الزر فقط */
.cam.v281.studio:not(.recording):not(.has-segs) .cam-ring .r-fg{opacity:0} /* نقطة بداية التقدم لا تظهر قبل التسجيل */