/* HOPROX — محرر الفيديو (صفحة كاملة) */
html.hxv-lock,html.hxv-lock body{overflow:hidden}
#hxv{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:var(--bg,#0b0b12);color:var(--text,#f4f4f8);font-family:inherit;font-size:14px}
#hxv *{box-sizing:border-box}
#hxv .hxv-top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));background:var(--card,rgba(255,255,255,.03))}
#hxv .hxv-title{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
#hxv .hxv-title b{font-size:15px}
#hxv .hxv-title span{color:var(--muted,#9a9ab0);font-size:12px}
#hxv .hxv-body{flex:1;display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:0;min-height:0}
#hxv .hxv-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-inline-end:1px solid var(--border,rgba(255,255,255,.08));min-height:0;overflow:auto}
#hxv .hxv-frame{position:relative;flex-shrink:0;width:100%;max-width:380px;max-height:62vh;aspect-ratio:9 / 16;border-radius:16px;overflow:hidden;background:#000;container-type:inline-size;margin-inline:auto}
#hxv .hxv-vids,#hxv .hxv-vids video{position:absolute;inset:0;width:100%;height:100%}
#hxv .hxv-vids video{object-fit:cover;opacity:0;transition:opacity .08s linear}
#hxv .hxv-vids video.on{opacity:1}
#hxv .hxv-frame.fit-blur .hxv-vids video{object-fit:contain}
#hxv .hxv-frame.fit-blur{background:radial-gradient(circle at 50% 40%,#2a2a33,#0c0c10)}
#hxv .hxv-txt{position:absolute;inset:0;pointer-events:none}
#hxv .hxv-tx{position:absolute;left:6%;right:6%;text-align:center;font-family:Cairo,system-ui,sans-serif;font-weight:800;line-height:1.35;color:#fff;transform:translateY(-50%)}
#hxv .hxv-tx.p-top{top:13%}
#hxv .hxv-tx.p-center{top:50%}
#hxv .hxv-tx.p-bottom{top:82%}
#hxv .hxv-tx.s-bold{text-shadow:0 0 3px #000,0 0 3px #000,0 2px 6px rgba(0,0,0,.6)}
#hxv .hxv-tx.s-box{left:auto;right:auto;inset-inline:0;margin-inline:auto;width:max-content;max-width:88%;padding:.25em .6em;background:rgba(0,0,0,.42);border-radius:.25em;font-weight:700}
#hxv .hxv-tx.s-clean{font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#hxv .hxv-tx.s-neon{text-shadow:0 0 6px #8b5cf6,0 0 14px #8b5cf6}
#hxv .hxv-logo{position:absolute;width:16%;opacity:.92;object-fit:contain}
#hxv .hxv-logo.p-tr{top:4.5%;right:4.5%}
#hxv .hxv-logo.p-tl{top:4.5%;left:4.5%}
#hxv .hxv-logo.p-br{bottom:4.5%;right:4.5%}
#hxv .hxv-logo.p-bl{bottom:4.5%;left:4.5%}
#hxv .hxv-ctl{display:flex;align-items:center;gap:10px;width:100%;max-width:380px}
#hxv .hxv-ctl input[type=range]{flex:1}
#hxv .hxv-time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted,#9a9ab0);min-width:76px;text-align:center}
#hxv .hxv-hint{margin:0;font-size:11.5px;color:var(--muted,#9a9ab0);text-align:center;max-width:380px;line-height:1.7}
#hxv .hxv-side{display:flex;flex-direction:column;min-height:0;min-width:0}
#hxv .hxv-strip{display:flex;gap:8px;align-items:stretch;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));scrollbar-width:thin}
#hxv .hxv-tile{position:relative;flex-shrink:0;height:96px;padding:0;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#000;cursor:pointer;color:#fff}
#hxv .hxv-tile.on{border-color:var(--accent,#8b5cf6)}
#hxv .hxv-tile video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#hxv .hxv-tile span{position:absolute;inset-inline:0;bottom:0;padding:3px 6px;font-size:11px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:start}
#hxv .hxv-total{align-self:center;flex-shrink:0;font-size:12px;color:var(--muted,#9a9ab0);padding-inline:6px}
#hxv .hxv-tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
#hxv .hxv-tabs button{flex-shrink:0;height:36px;padding:0 14px;border-radius:10px;border:0;background:transparent;color:var(--muted,#9a9ab0);font:inherit;font-weight:700;cursor:pointer}
#hxv .hxv-tabs button.on{background:var(--x-chip,rgba(255,255,255,.08));color:var(--text,#fff)}
#hxv .hxv-panel{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
#hxv .hxv-panel h4{margin:6px 0 0;font-size:13px}
#hxv .mut{color:var(--muted,#9a9ab0);font-size:12.5px;line-height:1.7;margin:0}
#hxv .hxv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#hxv .hxv-row.between{justify-content:space-between}
#hxv .hxv-row.tools .hxv-btn{flex:1 1 auto}
#hxv .hxv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#hxv .hxv-chip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--x-chip-b,rgba(255,255,255,.12));background:var(--x-chip,rgba(255,255,255,.04));color:var(--text,#fff);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#hxv .hxv-chip.on{border-color:var(--accent,#8b5cf6);background:rgba(139,92,246,.16)}
#hxv .hxv-btn{height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--x-chip-b,rgba(255,255,255,.12));background:var(--x-chip,rgba(255,255,255,.04));color:var(--text,#fff);font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#hxv .hxv-btn svg,#hxv .hxv-chip svg{width:16px;height:16px}
#hxv .hxv-btn.pri{background:var(--accent,#8b5cf6);border-color:transparent;color:#fff}
#hxv .hxv-btn.danger{color:var(--red,#f87171)}
#hxv .hxv-btn:disabled{opacity:.45;cursor:not-allowed}
#hxv .hxv-ic{width:38px;height:38px;flex-shrink:0;border-radius:12px;border:1px solid var(--x-chip-b,rgba(255,255,255,.12));background:var(--x-chip,rgba(255,255,255,.04));color:var(--text,#fff);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#hxv .hxv-ic svg{width:18px;height:18px}
#hxv .hxv-ic.big{width:46px;height:46px;border-radius:50%;background:var(--accent,#8b5cf6);border-color:transparent;color:#fff}
#hxv .hxv-sl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted,#9a9ab0)}
#hxv .hxv-sl b{color:var(--text,#fff);font-variant-numeric:tabular-nums}
#hxv input[type=range]{width:100%;accent-color:var(--accent,#8b5cf6);height:28px}
#hxv .hxv-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--x-soft-b,rgba(255,255,255,.08));background:var(--x-row,rgba(255,255,255,.03))}
#hxv .hxv-card b{display:inline-flex;align-items:center;gap:6px}
#hxv .hxv-card b svg{width:16px;height:16px}
#hxv textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--x-in-b,rgba(255,255,255,.12));background:var(--x-in,rgba(0,0,0,.2));color:var(--text,#fff);font:inherit;font-size:14px;resize:vertical}
#hxv .hxv-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
#hxv .hxv-lib{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
#hxv .hxv-libi{position:relative;flex-shrink:0;width:76px;aspect-ratio:9 / 16;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--x-soft-b,rgba(255,255,255,.1));background:#000;cursor:pointer;color:#fff}
#hxv .hxv-libi video{width:100%;height:100%;object-fit:cover;pointer-events:none}
#hxv .hxv-libi span{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.6)}
#hxv .hxv-libi span svg{width:12px;height:12px}
#hxv button:focus-visible,#hxv input:focus-visible,#hxv textarea:focus-visible,#hxv label:focus-within{outline:2px solid var(--accent,#8b5cf6);outline-offset:2px}
/* التلفون والآيباد: المعاينة فوق والأدوات جوة */
@media (max-width:900px){
  #hxv .hxv-body{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #hxv .hxv-stage,#hxv .hxv-side{display:flex}
  #hxv .hxv-stage{border-inline-end:0;border-bottom:1px solid var(--border,rgba(255,255,255,.08));padding:12px 16px;overflow:visible}
  #hxv .hxv-frame{max-height:46vh;width:auto;height:46vh}
  #hxv .hxv-side{min-height:0}
  #hxv .hxv-panel{overflow:visible}
  #hxv .hxv-grid2{grid-template-columns:1fr}
}
@media (max-width:480px){
  #hxv .hxv-top{padding:8px 12px}
  #hxv .hxv-top .hxv-btn{padding:0 10px;font-size:12.5px}
  #hxv .hxv-tile{height:80px}
}