/* «ترميم» — porcelain + forest + brass, Efrst Sans. Light/dark follow Telegram (html[data-theme]). */
@font-face{font-family:Efrst;src:url(fonts/efrst-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Efrst;src:url(fonts/efrst-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Efrst;src:url(fonts/efrst-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#EDF1EC;--panel:#F8FAF7;--line:#D3DCD2;--ink:#17301F;--mute:#4E6656;
  --detail:#1F5A3E;--accent:#9A6A12;--accent-press:#7C550D;--onacc:#fff;--box:#B8862E;
  --ok:#1F7A4A;--ok-edge:#145232;--bad:#A3352B;--track:#DCE4DA;
  --r:6px;--r-s:4px;--shadow:0 1px 2px rgba(23,48,31,.06),0 6px 20px rgba(23,48,31,.06);
  --fs-1:12px;--fs0:14px;--fs1:16px;--fs2:19px;--fs3:24px;--fs4:30px;--fs5:46px;
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:#0F1D16;--panel:#16281F;--line:#24392D;--ink:#E7EFE8;--mute:#9EB5A5;
  --detail:#8FD1AE;--accent:#E0AC4C;--accent-press:#C99536;--onacc:#20160A;--box:#E0AC4C;
  --ok:#2E9A60;--ok-edge:#1C6B41;--bad:#F08A7E;--track:#203629;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font:400 var(--fs1)/1.6 Efrst,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100vh}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--detail)}
:focus-visible{outline:2px solid var(--box);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom))}
.num{font-variant-numeric:tabular-nums}

/* ── boot ── */
.boot{padding:40vh 24px 0}
.sweep{display:block;height:3px;border-radius:2px;background:var(--track);position:relative;overflow:hidden}
.sweep::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:var(--box);border-radius:2px;animation:sweep 1.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

/* ── header (home) ── */
.hd{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.mark{flex:none;width:44px;height:44px;color:var(--box)}
.hd h1{font-size:var(--fs3);font-weight:800;line-height:1.2}
.srv{display:flex;align-items:center;gap:8px;font-size:var(--fs-1);color:var(--mute);margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot.busy{background:var(--box)}

/* ── the frame motif: four brass corners ── */
.corners{position:relative}
.corners>i{position:absolute;width:18px;height:18px;border:3px solid var(--box);pointer-events:none}
.corners>i:nth-of-type(1){top:0;right:0;border-left:0;border-bottom:0}
.corners>i:nth-of-type(2){top:0;left:0;border-right:0;border-bottom:0}
.corners>i:nth-of-type(3){bottom:0;right:0;border-left:0;border-top:0}
.corners>i:nth-of-type(4){bottom:0;left:0;border-right:0;border-top:0}

/* ── upload ── */
.drop{display:block;padding:32px 24px;text-align:center;background:var(--panel);border-radius:var(--r);margin-bottom:32px;box-shadow:var(--shadow)}
label.drop{cursor:pointer}
label.drop:active{background:var(--track)}
.drop svg{width:40px;height:40px;color:var(--detail);margin-bottom:8px}
.drop b{display:block;font-size:var(--fs3);font-weight:800;line-height:1.3}
.drop span{display:block;font-size:var(--fs0);color:var(--mute);margin-top:4px}
.vh{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;top:0;left:0}
.up{text-align:right}
.up .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
.up .pct{font-size:var(--fs4);font-weight:800;line-height:1.1}
.up .msg{font-size:var(--fs0);color:var(--mute);margin-top:8px}
.up .msg.err{color:var(--bad)}
.row{display:flex;gap:8px;margin-top:16px}
.row>*{flex:1}

/* ── progress bar ── */
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden;margin:12px 0}
.bar>span{display:block;height:100%;background:var(--box);border-radius:4px;transition:width .3s ease}
.bar.thin{height:4px;margin:8px 0 0}

/* ── stats ── */
.stats{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.stats div{flex:1;min-width:0;font-size:var(--fs-1);color:var(--mute);line-height:1.4}
.stats b{display:block;font-size:var(--fs1);color:var(--detail);font-weight:700;font-variant-numeric:tabular-nums}

/* ── lists (home) ── */
.sec{margin-bottom:32px}
.sec h2{font-size:var(--fs1);font-weight:700;margin-bottom:8px}
.item{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px;background:var(--panel);border-radius:var(--r);margin-bottom:8px;text-align:right;box-shadow:var(--shadow)}
.item .th{flex:none;width:64px;height:40px;border-radius:var(--r-s);background:var(--track) center/cover no-repeat}
.item .tx{flex:1;min-width:0}
.item .tx b{display:block;font-size:var(--fs0);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .tx small{display:block;font-size:var(--fs-1);color:var(--mute)}
.item .tx small.bad{color:var(--bad)}
.item .go-ic{flex:none;color:var(--mute);width:20px;height:20px}
.item .dl{flex:none;min-height:44px;padding:0 12px;border-radius:var(--r-s);border:1.5px solid var(--line);color:var(--detail);font-size:var(--fs0);font-weight:700;display:flex;align-items:center}
.empty{padding:24px 16px;text-align:center;color:var(--mute);font-size:var(--fs0);border:1.5px dashed var(--line);border-radius:var(--r)}

/* ── job ── */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.top .t{min-width:0}
.top h1{font-size:var(--fs2);font-weight:800;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.top small{display:block;color:var(--mute);font-size:var(--fs-1);margin-top:2px}
.badge{flex:none;font-size:var(--fs-1);padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--detail);white-space:nowrap}
.badge.bad{color:var(--bad)}
.home-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs0);color:var(--mute);text-decoration:none;margin:-8px 0 4px}

.steps{display:flex;gap:4px;margin-bottom:16px;list-style:none}
.steps li{flex:1;font-size:var(--fs-1);color:var(--mute);padding-top:8px;border-top:3px solid var(--line);text-align:center}
.steps .ok{border-color:var(--detail);color:var(--detail)}
.steps .now{border-color:var(--box);color:var(--ink);font-weight:700}

.frame{position:relative;border-radius:var(--r);overflow:hidden;background:#000;line-height:0;user-select:none;-webkit-user-select:none}
.frame img{width:100%;display:block;pointer-events:none}
.frame.edit{touch-action:none;cursor:crosshair}
.box{position:absolute;box-shadow:0 0 0 999px rgba(10,20,14,.45)}
.box>i{position:absolute;width:16px;height:16px;border:3px solid var(--box)}
.box>i:nth-of-type(1){top:-3px;right:-3px;border-left:0;border-bottom:0}
.box>i:nth-of-type(2){top:-3px;left:-3px;border-right:0;border-bottom:0}
.box>i:nth-of-type(3){bottom:-3px;right:-3px;border-left:0;border-top:0}
.box>i:nth-of-type(4){bottom:-3px;left:-3px;border-right:0;border-top:0}
.edit .box{outline:1.5px dashed var(--box);cursor:move}
.edit .box>i{width:22px;height:22px;background:rgba(0,0,0,.25)}
.edit .box>i{pointer-events:none}                                   /* grabbing is by geometry (app.js) */
.frame .wait{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;background:linear-gradient(transparent 50%,rgba(0,0,0,.55))}
.frame .wait .sweep{flex:1}
.ph{aspect-ratio:16/9;border-radius:var(--r);background:var(--track);display:flex;align-items:flex-end;padding:12px}
.ph .sweep{flex:1}
.hint{margin:8px 2px 24px;font-size:var(--fs0);color:var(--mute);line-height:1.6}
.hint b{color:var(--ink);font-weight:700}

h2.h{font-size:var(--fs1);font-weight:700;margin-bottom:8px}
.cmp{position:relative;border-radius:var(--r-s);overflow:hidden;line-height:0;margin-bottom:8px;background:#000;user-select:none;-webkit-user-select:none}
.cmp img{width:100%;display:block;pointer-events:none}
.cmp .after{position:absolute;inset:0;height:100%;object-fit:cover}
.cmp .knob{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .knob::after{content:"";position:absolute;top:50%;left:-15px;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cmp em{position:absolute;bottom:8px;font-style:normal;font-size:11px;line-height:1;padding:5px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;pointer-events:none}
.cmp .l1{right:8px}.cmp .l2{left:8px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.play{display:flex;align-items:center;gap:8px;font-size:var(--fs0);color:var(--detail);min-height:44px;margin-bottom:16px;font-weight:700}
.play svg{width:18px;height:18px}
video.pv{width:100%;border-radius:var(--r-s);background:#000;margin-bottom:16px;display:block}

.card{background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--box);border-radius:var(--r);padding:16px;margin-bottom:24px}
.card .big{font-size:var(--fs4);font-weight:800;line-height:1.15}
.card .big small{font-size:var(--fs1);font-weight:700;color:var(--mute)}
.card p{font-size:var(--fs0);color:var(--mute);margin-top:4px;line-height:1.6}
.card.prog .big{font-size:var(--fs5);font-variant-numeric:tabular-nums}
.card.done{border-inline-start-color:var(--ok)}
.card.fail{border-inline-start-color:var(--bad)}
.card.fail .big{font-size:var(--fs3);color:var(--bad)}
.check{width:40px;height:40px;color:var(--ok);margin-bottom:8px}
.work{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}
.work b{font-size:var(--fs2);font-weight:800}
.work span{font-size:var(--fs0);color:var(--mute)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:var(--r-s);font-size:var(--fs1);font-weight:700;text-decoration:none;transition:background .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.go{background:var(--accent);color:var(--onacc)}
.go:active{background:var(--accent-press)}
.sec-btn{border:1.5px solid var(--line);color:var(--detail);margin-top:8px}
.ghost{color:var(--mute);font-weight:400;font-size:var(--fs0);min-height:44px;margin-top:4px}
.btns{margin-top:8px}

/* ── confirm sheet (owner rule: question title, one line, «رجوع» right, green «نعم، …» left) ── */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,12,8,.5);padding:16px;animation:fade .15s ease}
.sheet .dlg{width:100%;max-width:440px;background:var(--panel);border-radius:var(--r);padding:24px 16px 16px;margin-bottom:env(safe-area-inset-bottom);animation:rise .2s ease}
.sheet h3{font-size:var(--fs2);font-weight:800;margin-bottom:4px}
.sheet p{font-size:var(--fs0);color:var(--mute);margin-bottom:24px}
.sheet .row{margin-top:0}
.sheet .back{border:1.5px solid var(--line);color:var(--ink)}
.sheet .yes{background:var(--ok);color:#fff;box-shadow:0 4px 0 var(--ok-edge);transform:translateY(-2px)}
.sheet .yes:active{box-shadow:0 1px 0 var(--ok-edge);transform:translateY(1px)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(16px);opacity:0}}

.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;max-width:528px;margin:0 auto;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:var(--r);font-size:var(--fs0);box-shadow:0 8px 24px rgba(0,0,0,.25)}

.fatal{padding:30vh 8px 0;text-align:center}
.fatal b{display:block;font-size:var(--fs2);font-weight:800;margin-bottom:8px}
.fatal p{color:var(--mute);font-size:var(--fs0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .sweep::after{width:100%;transform:none;opacity:.5}
}