/* מצפן יישור-קו — משפחה כהה-קולנועית: כחול-לילה, זהב, קרם */
:root{
  --navy:#060b18; --navy2:#0a1428; --gold:#d4a24c; --gold2:#f0cd7d;
  --cyan:#4dd8e8; --cream:#f5ebd9; --dim:#8fa0bd;
}
*{margin:0;padding:0;box-sizing:border-box; min-width:0}
html,body{height:100%; overflow-x:hidden; max-width:100vw}
body{
  font-family:'Heebo',sans-serif; background:var(--navy); color:var(--cream);
  direction:rtl;
}
img,button,textarea{max-width:100%}
.hidden{display:none!important}
.view{min-height:100vh; position:relative}

/* רקע גיבור */
.hero-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('assets/bg/hero.webp') center/cover no-repeat;
  opacity:.35;
}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,24,.45) 0%, rgba(6,11,24,.92) 78%, var(--navy) 100%)}

/* בית */
.top{position:relative; z-index:2; display:flex; align-items:center; gap:14px; padding:16px 20px}
.overall{flex:1; height:6px; background:rgba(245,235,217,.12); border-radius:99px; overflow:hidden}
#overallBar{height:100%; width:0%; border-radius:99px;
  background:linear-gradient(270deg,var(--gold),var(--gold2)); transition:width .6s ease}
.home-main{position:relative; z-index:2; max-width:860px; margin:0 auto; padding:4vh 20px 60px}
h1{font-size:clamp(1.9rem,4.5vw,3rem); font-weight:900; letter-spacing:-.5px;
  background:linear-gradient(180deg,var(--cream),var(--gold2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.subtitle{color:var(--dim); font-size:1.1rem; margin:6px 0 34px}

.stage-card{
  background:rgba(10,20,40,.72); border:1px solid rgba(212,162,76,.22);
  border-radius:18px; padding:22px 24px; margin-bottom:18px;
  backdrop-filter:blur(8px);
}
.stage-head{display:flex; align-items:baseline; gap:10px; margin-bottom:4px}
.stage-head h2{font-size:1.35rem; font-weight:700; color:var(--gold2)}
.stage-desc{color:var(--dim); font-size:.95rem; margin-bottom:14px; line-height:1.5}
.step{
  display:flex; align-items:center; gap:12px; width:100%; text-align:right;
  background:rgba(245,235,217,.045); border:1px solid rgba(245,235,217,.08);
  border-radius:12px; padding:13px 16px; margin-top:9px; cursor:pointer;
  color:var(--cream); font-family:inherit; font-size:1rem; transition:.18s;
}
.step:hover{background:rgba(212,162,76,.12); border-color:rgba(212,162,76,.4); transform:translateY(-1px)}
.step .st-ic{font-size:1.15rem}
.step .st-name{flex:1; font-weight:500}
.step .st-who{color:var(--dim); font-size:.82rem}
.step .st-status{font-size:.82rem; color:var(--dim); min-width:64px; text-align:left}
.step.done .st-status{color:var(--gold2)}
.step.done{border-color:rgba(212,162,76,.45)}
.foot{position:relative; z-index:2; text-align:center; color:var(--dim);
  font-size:.8rem; padding:18px; opacity:.75}

.chip{
  background:rgba(245,235,217,.08); border:1px solid rgba(245,235,217,.18);
  color:var(--cream); border-radius:99px; padding:8px 16px; cursor:pointer;
  font-family:inherit; font-size:.9rem; transition:.15s; white-space:nowrap;
}
.chip:hover{background:rgba(245,235,217,.16)}
.chip.gold{background:linear-gradient(135deg,var(--gold),#b8852f); color:#1a1206; font-weight:700; border:none}
.chip.gold:hover{filter:brightness(1.1)}
.chip.on{background:rgba(212,162,76,.28); border-color:var(--gold)}

/* צופה מצגת */
#viewer{background:#000; display:flex; flex-direction:column; height:100vh; height:100dvh}
.stage-area{flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0}
#slideImg{max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
.tap-zone{position:absolute; top:0; bottom:0; width:26%; background:none; border:none; cursor:pointer; opacity:0}
.tap-prev{right:0}
.tap-next{left:0}
.viewer-ui{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:rgba(6,11,24,.94); border-top:1px solid rgba(212,162,76,.18);
  flex-wrap:wrap;
}
.nav-center{display:flex; align-items:center; gap:14px}
.nav-btn{
  background:rgba(212,162,76,.14); border:1px solid rgba(212,162,76,.4); color:var(--gold2);
  border-radius:10px; padding:9px 20px; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer;
}
.nav-btn:hover{background:rgba(212,162,76,.26)}
.counter{color:var(--dim); font-variant-numeric:tabular-nums; direction:ltr}
.viewer-actions{display:flex; gap:8px}

/* הקלטה */
.rec-bar{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:#12080a; border-top:1px solid rgba(255,90,90,.25); flex-wrap:wrap;
}
.rec-dot{width:12px; height:12px; border-radius:50%; background:#444}
.rec-dot.live{background:#ff5252; animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.25}}
.rec-time{font-variant-numeric:tabular-nums; direction:ltr; color:var(--cream); min-width:52px}
.rec-btn{
  background:rgba(255,82,82,.14); border:1px solid rgba(255,82,82,.5); color:#ffb3b3;
  border-radius:99px; padding:8px 18px; font-family:inherit; font-size:.95rem; cursor:pointer;
}
.rec-btn:hover{background:rgba(255,82,82,.26)}
.rec-status{color:var(--dim); font-size:.85rem}

/* פאנלים */
.panel{position:relative; z-index:2; max-width:720px; margin:0 auto; padding:26px 20px 60px}
.panel h2{color:var(--gold2); font-size:1.6rem; margin:16px 0 6px}
.hint{color:var(--dim); margin-bottom:20px; line-height:1.55}
.close-item{margin-bottom:16px}
.close-item label{display:block; font-weight:600; margin-bottom:6px; color:var(--gold2)}
.close-item textarea{
  width:100%; min-height:64px; background:rgba(10,20,40,.8); color:var(--cream);
  border:1px solid rgba(212,162,76,.25); border-radius:10px; padding:10px 12px;
  font-family:inherit; font-size:1rem; resize:vertical;
}
.row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.big-btn{
  background:linear-gradient(135deg,var(--gold),#b8852f); color:#1a1206; font-weight:700;
  border:none; border-radius:12px; padding:13px 26px; font-family:inherit; font-size:1.05rem; cursor:pointer;
}
.big-btn.ghost{background:none; border:1px solid rgba(212,162,76,.5); color:var(--gold2)}
.rec-item{
  display:flex; align-items:center; gap:10px; background:rgba(10,20,40,.72);
  border:1px solid rgba(212,162,76,.2); border-radius:12px; padding:12px 16px; margin-bottom:10px;
}
.rec-item .ri-name{flex:1}
.rec-item .ri-meta{color:var(--dim); font-size:.82rem; direction:ltr}
.handoff-note{
  margin-top:22px; background:rgba(212,162,76,.1); border:1px solid rgba(212,162,76,.3);
  border-radius:12px; padding:14px 16px; line-height:1.6; font-size:.95rem;
}
.empty{color:var(--dim); padding:20px; text-align:center}

/* טלפון */
@media (max-width:640px){
  .viewer-ui{padding:8px 8px}
  .nav-btn{padding:8px 13px; font-size:.9rem}
  .chip{padding:7px 11px; font-size:.8rem}
  .stage-card{padding:16px}
  .step{flex-wrap:wrap}
  .step .st-who{display:none}
}