/* theme.css — هوية «Jokt» البصرية الخاصة (تُحمَّل آخراً وتعلو على باقي التنسيقات)
   الفكرة: الفيديو داخل «إطار» عائم بحواف دائرية، شريط تفاعل أفقي زجاجي،
   قائمة سفلية عائمة كجزيرة، وخلفية «شفق» بألوان الفيروز والكهرماني والبنفسجي. */
:root{
  --bg:#060a14;--panel:#0f1424;--panel2:#161c31;--text:#f4f6ff;--muted:#9aa3bd;--line:#ffffff14;
  --cyan:#3ee6c4;--violet:#8b7bff;--amber:#ffb547;--pink:#ff7a59;--yellow:#ffc857;
  --glass:#0d1222b8;--glass-line:#ffffff1f;
  --frame-top:76px;--frame-bottom:92px;--frame-side:10px;--radius:28px;
}

/* خلفية الشفق */
body{background:
  radial-gradient(60% 40% at 85% 0%,#3ee6c41f,transparent 70%),
  radial-gradient(55% 45% at 0% 100%,#8b7bff24,transparent 70%),
  radial-gradient(40% 30% at 100% 70%,#ffb54714,transparent 70%),
  var(--bg)}

/* الشريط العلوي */
.topbar{height:72px;padding:14px 16px;background:linear-gradient(#060a14,#060a14d9 60%,transparent)}
.brand{font-size:20px;letter-spacing:.3px}
.brand-mark{width:36px;height:36px;border-radius:13px;background:conic-gradient(from 200deg,var(--cyan),var(--violet),var(--amber),var(--cyan));color:#060a14;box-shadow:0 6px 22px #3ee6c44d,inset 0 0 0 2px #ffffff40}
.beta{color:var(--amber);background:#ffb54714;border-color:#ffb54755}
.top-tabs{align-self:center;gap:4px;padding:4px;border-radius:16px;background:#ffffff0b;border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tab{padding:6px 16px;border:0;border-radius:12px;font-size:13px;color:var(--muted);transition:.25s}
.tab.active{color:#060a14;background:linear-gradient(135deg,var(--cyan),#a8f5e5)}
.icon-btn{width:40px;height:40px;border-radius:14px;background:#ffffff0b;border:1px solid var(--glass-line)}

/* إطار الفيديو العائم */
.feed{background:transparent}
.video-card{background:transparent}
.video-card video{position:absolute;top:var(--frame-top);bottom:var(--frame-bottom);left:var(--frame-side);right:var(--frame-side);
  width:auto;height:auto;border-radius:var(--radius);background:#0b0f1c}
.video-card:after{top:var(--frame-top);bottom:var(--frame-bottom);left:var(--frame-side);right:var(--frame-side);border-radius:var(--radius);
  background:linear-gradient(180deg,#060a1466 0%,transparent 22%,transparent 50%,#060a14e6 100%)}
.tap-layer{top:var(--frame-top);bottom:calc(var(--frame-bottom) + 70px);left:var(--frame-side);right:var(--frame-side)}

/* شريط التقدم داخل الإطار */
.progress{bottom:calc(var(--frame-bottom) + 8px);left:calc(var(--frame-side) + 22px);right:calc(var(--frame-side) + 22px);height:3px;border-radius:3px;background:#ffffff26;overflow:hidden}
.progress i{border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--cyan))}

/* شريط التفاعل الأفقي الزجاجي */
.actions{left:calc(var(--frame-side) + 12px);right:calc(var(--frame-side) + 12px);bottom:calc(var(--frame-bottom) + 18px);
  flex-direction:row;justify-content:space-between;align-items:center;gap:4px;padding:7px 10px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.action{flex-direction:row;gap:5px;min-width:0;font-size:11px;font-weight:700;text-shadow:none;padding:5px 7px;border-radius:12px}
.action i{font-size:21px;line-height:21px}
.action:active{background:#ffffff14}
.action.liked i{color:var(--pink);text-shadow:0 0 14px #ff7a5999}
.action.bookmarked i{color:var(--amber)}
.action.save span,.action.share span,.action.more span{display:none}
.avatar-act{position:relative;padding:0}
.avatar-act img{width:36px;height:36px;border-radius:12px;object-fit:cover;border:2px solid var(--cyan)}
.avatar-act .plus{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:12px;line-height:1;background:var(--amber);color:#060a14;font-weight:900}

/* معلومات الصانع والوصف */
.video-info{right:calc(var(--frame-side) + 18px);left:calc(var(--frame-side) + 18px);bottom:calc(var(--frame-bottom) + 84px)}
.creator{font-size:15px}
.verified{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--cyan);color:#060a14;font-size:10px}
.follow-btn{border:0;border-radius:10px;padding:3px 11px;font-size:11px;font-weight:800;background:#ffffff1f;backdrop-filter:blur(8px)}
.caption{font-size:14px;text-shadow:0 1px 8px #000c}
.tag{color:var(--amber);font-weight:800}
.sound{display:inline-flex;margin-top:8px;padding:4px 10px;border-radius:12px;background:#ffffff12;font-size:11px;max-width:100%}
.sound-icon{color:var(--cyan)}

/* عناصر فوق الإطار */
.points-pill{top:calc(var(--frame-top) + 12px);right:calc(var(--frame-side) + 12px);padding:6px 11px;border-radius:14px;background:var(--glass);border-color:#ffb54744}
.coin{color:var(--amber)}
.mute-btn{top:calc(var(--frame-top) + 12px);right:auto;left:calc(var(--frame-side) + 12px);width:38px;height:38px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-line)}
.mute-btn.on{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#060a14}
.ad-badge{top:calc(var(--frame-top) + 56px);right:calc(var(--frame-side) + 12px);background:var(--amber);border-radius:10px}
.ad-visit{right:calc(var(--frame-side) + 18px);left:calc(var(--frame-side) + 18px);bottom:calc(var(--frame-bottom) + 84px);border-radius:16px;
  background:linear-gradient(135deg,var(--amber),#ffd98a);color:#1a1205}
.video-card:has(.ad-visit) .video-info{bottom:calc(var(--frame-bottom) + 136px)}
.heart-burst{color:var(--pink);text-shadow:0 0 34px #ff7a59bb}
.play-hint{width:76px;height:76px;display:grid;place-items:center;font-size:30px;border-radius:26px;background:var(--glass);border:1px solid var(--glass-line)}

/* القائمة السفلية: جزيرة عائمة */
.bottom-nav{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:64px;padding:0 14px;align-items:center;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 40px #0009}
.nav-item{color:#8790a8;padding-top:2px}
.nav-item>span{font-size:21px;line-height:24px}
.nav-item.active{color:var(--cyan)}
.nav-item.active:after{content:'';position:absolute;bottom:-7px;width:16px;height:3px;border-radius:3px;background:var(--cyan)}
.notification-dot{background:var(--amber)}
.upload-fab{width:58px;height:58px;margin-top:-26px;border-radius:20px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 10px 28px #8b7bff66,0 0 0 5px var(--bg)}
.upload-fab b{transform:rotate(-45deg);font-size:28px;line-height:1;color:#060a14}
.upload-fab small{display:none}
.upload-fab:active{transform:rotate(45deg) scale(.94)}
.toast{bottom:96px;border-radius:14px;background:linear-gradient(135deg,#f4f6ff,#d9fff6)}

@media (max-height:700px){:root{--frame-top:70px;--frame-bottom:86px}}

/* مساحة للقائمة العائمة في الصفحات */
.business-panel{padding-bottom:130px}
.toast{bottom:104px}

/* ===== إصلاحات التصميم (v3) ===== */
/* 1) الطول الحقيقي للشاشة داخل المتصفح (بدون شريط العنوان) */
.feed{height:100vh;height:100dvh}
.video-card{height:100vh;height:100dvh;min-height:0}
/* 2) الفيديو لا يخرج من الإطار مهما كان حجمه الأصلي */
.video-card video{width:calc(100% - 2 * var(--frame-side));height:calc(100% - var(--frame-top) - var(--frame-bottom));
  max-width:none;object-fit:cover;overflow:hidden}
.video-card{contain:paint}
/* 3) المشغّل بملء الشاشة (من الملف الشخصي والبحث) بلا قائمة سفلية */
.player{--frame-top:66px;--frame-bottom:16px;background:var(--bg)}
.player-close{top:16px;right:14px;width:40px;height:40px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line)}
.player .points-pill{display:none}
/* 4) أيقونات SVG موحّدة */
.action i{display:grid;place-items:center;width:24px;height:24px}
.action i svg{width:24px;height:24px}
.action.liked i{filter:drop-shadow(0 0 8px #ff7a5999)}
.mute-btn{display:grid;place-items:center;color:#fff}
.mute-btn svg{width:20px;height:20px}
.heart-burst svg{width:110px;height:110px;filter:drop-shadow(0 0 30px #ff7a59aa)}
.play-hint svg{width:30px;height:30px;color:#fff}
.nav-ico{display:grid;place-items:center;height:28px}
.nav-ico svg{width:24px;height:24px}
.upload-fab b{display:grid;place-items:center}
.upload-fab b svg{width:28px;height:28px;stroke-width:2.6}
/* 5) شارة «تجريبي» وزر الصوت لا يتداخلان مع الشريط العلوي */
.topbar{z-index:12}
.mute-btn,.points-pill,.ad-badge{z-index:5}
/* 6) شاشات قصيرة: تقليل المسافات */
@media (max-height:640px){:root{--frame-top:64px;--frame-bottom:84px}.video-info{bottom:calc(var(--frame-bottom) + 76px)}.caption{font-size:13px;line-height:1.6}}
/* 7) الإشعار المنبثق لا يغطي شريط التفاعل */
.toast{bottom:auto;top:calc(var(--frame-top) + 60px);transform:translateX(-50%) translateY(-10px)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* اسم التطبيق Jokt */
.brand-name{font-family:Poppins,Cairo,system-ui,sans-serif;font-weight:800;letter-spacing:1.5px;font-size:20px;background:linear-gradient(90deg,#fff,#a8f5e5);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-mark{font-family:Poppins,Cairo,sans-serif;font-weight:800;font-size:19px}
.brand-logo{width:36px;height:36px;border-radius:11px;box-shadow:0 6px 20px #8b7bff55}

/* ===== ألوان هوية Jokt (الوردي + السماوي على بنفسجي داكن) ===== */
:root{--bg:#0e0824;--panel:#160d33;--panel2:#1d1340;--cyan:#38d1ec;--violet:#7b4dff;--pink:#ff2d87;--amber:#ffb547;--glass:#140b30c4;--glass-line:#ffffff1c}
body{background:
  radial-gradient(60% 40% at 90% 0%,#ff2d871a,transparent 70%),
  radial-gradient(55% 45% at 0% 100%,#38d1ec1c,transparent 70%),
  radial-gradient(70% 50% at 50% 50%,#2a135644,transparent 80%),var(--bg)}
.topbar{background:linear-gradient(var(--bg),#0e0824d9 60%,transparent)}
.tab.active{background:linear-gradient(135deg,var(--pink),#ff6aa9);color:#fff}
.brand-name{background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-logo{box-shadow:0 6px 20px #ff2d8744}
/* الظل على الطبقة فوق الفيديو بدل الفيديو نفسه — ظل الفيديو المباشر يسبب شاشة بيضاء على بعض جوالات أندرويد */
.video-card:after{box-shadow:0 0 0 1px #ffffff14,0 22px 60px #000a,0 0 70px #7b4dff1f}
.progress i{background:linear-gradient(90deg,var(--pink),var(--cyan))}
.avatar-act img{border-color:var(--pink)}
.verified{background:var(--cyan)}
.tag{color:var(--cyan)}
.nav-item.active{color:var(--pink)}
.nav-item.active:after{background:var(--pink)}
.upload-fab{background:linear-gradient(135deg,var(--pink),var(--cyan));box-shadow:0 10px 28px #ff2d8755,0 0 0 5px var(--bg)}
.upload-fab b{color:#fff}
.mute-btn.on{background:linear-gradient(135deg,var(--pink),var(--cyan));color:#fff}
.action.liked i{color:var(--pink)}
.heart-burst{color:var(--pink)}
.wallet-card{background:linear-gradient(135deg,var(--pink) 0%,#9b4dff 55%,var(--cyan) 115%);color:#fff;box-shadow:0 16px 40px #ff2d8740}
.wallet-sub span{background:#ffffff33}
.wallet-link{background:linear-gradient(135deg,#ff2d871f,#38d1ec1f);border-color:#ff2d8744}
.split-bar i{background:linear-gradient(90deg,var(--pink),#ff6aa9)}

/* النوافذ السفلية بألوان الهوية */
.sheet{background:linear-gradient(160deg,#1f1446,#120a2c);border-color:#ffffff1a}
.search-input{background:#ffffff0d;border-color:#ffffff1a}
.login-btn{background:linear-gradient(100deg,var(--pink),#9b4dff 60%,var(--cyan))}