:root{
  --bg:#0d0d10; --panel:#16161c; --panel2:#1e1e26; --line:#2b2b36;
  --txt:#e9e9ef; --muted:#9a9aad; --accent:#ff5c35; --accent2:#ff7a55;
  --ok:#38d39f; --err:#ff5470; --radius:12px;
}
*{box-sizing:border-box}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 12px; font-weight:800; letter-spacing:-.02em}
h2{font-size:20px} h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.muted{color:var(--muted)}
.hint{color:var(--muted); font-size:13px; margin:8px 0 0}

/* ---------- login ---------- */
.login-page{display:grid; place-items:center; min-height:100vh; padding:20px}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:36px 32px; width:min(380px,100%); text-align:center;
}
.login-mark{
  width:52px; height:52px; margin:0 auto 16px; border-radius:15px;
  background:linear-gradient(135deg,var(--accent),#ff9a3c);
  display:grid; place-items:center; font-size:22px; color:#fff;
}
.login-card input{margin:22px 0 12px}
.login-card button{width:100%}

/* ---------- chrome ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:50;
}
.brand{font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:9px}
.mark{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;color:#fff;
  background:linear-gradient(135deg,var(--accent),#ff9a3c);
}
.topbar-right{display:flex; align-items:center; gap:14px}
.storage{font-size:12px; color:var(--muted)}

.steps{display:flex; gap:8px; padding:16px 22px 0; max-width:1400px; margin:0 auto; flex-wrap:wrap}
.step{
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
}
.step b{
  display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:var(--line); color:var(--txt); font-size:11px; margin-right:7px;
}
.step.is-active{border-color:var(--accent); color:var(--txt)}
.step.is-active b{background:var(--accent); color:#fff}
.step:disabled{opacity:.4; cursor:not-allowed}

main{max-width:1400px; margin:0 auto; padding:20px 22px 60px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; max-width:760px}
.wide-panel{max-width:100%; padding:18px; background:transparent; border:0}

/* ---------- controale ---------- */
input[type=text],input[type=url],input[type=password],input[type=number],select,textarea{
  width:100%; padding:11px 13px; background:var(--panel2); color:var(--txt);
  border:1px solid var(--line); border-radius:10px; font:inherit; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical; font-size:14px}
button,.primary{
  padding:11px 18px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--txt); font:inherit; font-weight:600; cursor:pointer;
}
button:hover:not(:disabled){border-color:#3d3d4d}
button:disabled{opacity:.45; cursor:not-allowed}
.primary{background:var(--accent); border-color:var(--accent); color:#fff; text-align:center; text-decoration:none; display:inline-block}
.primary:hover{background:var(--accent2); border-color:var(--accent2)}
.ghost{background:transparent; border-color:transparent; color:var(--muted); text-decoration:none; display:inline-block; padding:9px 12px; font-size:13px}
.ghost:hover{color:var(--txt)}
.wide{width:100%; margin-top:10px}
.danger{color:var(--err); border-color:#3a2530}
.mini-btn{padding:8px 11px; font-size:12.5px; font-weight:600}
.row{display:flex; gap:10px; align-items:stretch} .row>input{flex:1; min-width:0}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px}
.field{margin-bottom:20px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px}
label.mini{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:9px}
label.mini input,label.mini select{margin-top:4px}
label.check{display:flex; align-items:center; gap:8px; font-size:13px; margin-top:11px; cursor:pointer}
label.check input{width:auto}
input[type=color]{padding:2px; height:36px; cursor:pointer}
input[type=range]{padding:0; height:26px; accent-color:var(--accent)}
.filebtn{
  display:block; text-align:center; padding:11px; border:1px dashed var(--line);
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted);
}
.filebtn:hover{border-color:var(--accent); color:var(--txt)}
.filebtn input{display:none}
.filebtn.small{padding:9px; font-size:12.5px}
.divider{text-align:center; margin:24px 0; border-top:1px solid var(--line); line-height:0}
.divider span{background:var(--panel); padding:0 14px; color:var(--muted); font-size:12px; line-height:1}

.alert{background:#2a1620; border:1px solid #4a2434; color:#ffb3c0; padding:12px 14px; border-radius:10px; margin-top:16px; font-size:13.5px; white-space:pre-wrap}
.busy{display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--muted); font-size:14px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- decupare ---------- */
.crop-wrap{display:grid; grid-template-columns:1fr 270px; gap:22px; margin-top:18px}
.crop-stage{
  position:relative; background:#000; border-radius:10px; overflow:hidden;
  user-select:none; -webkit-user-select:none; line-height:0;
  width:fit-content; max-width:100%; margin:0 auto;
  touch-action:none;               /* altfel iOS derulează pagina în loc să tragă chenarul */
}
/* Imaginea rămâne la luminozitate normală; doar zona din afara chenarului se întunecă. */
.crop-stage img{display:block; width:auto; height:auto; max-width:100%; max-height:70vh}
.crop-box{
  position:absolute; border:2px solid var(--accent); cursor:move;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55); touch-action:none; --hs:15px;
}
.crop-box i{
  position:absolute; width:var(--hs); height:var(--hs); margin:calc(var(--hs) / -2);
  background:#fff; border:2px solid var(--accent); border-radius:4px;
}
.crop-box i[data-h=nw]{left:0;   top:0;    cursor:nwse-resize}
.crop-box i[data-h=n] {left:50%; top:0;    cursor:ns-resize}
.crop-box i[data-h=ne]{left:100%;top:0;    cursor:nesw-resize}
.crop-box i[data-h=w] {left:0;   top:50%;  cursor:ew-resize}
.crop-box i[data-h=e] {left:100%;top:50%;  cursor:ew-resize}
.crop-box i[data-h=sw]{left:0;   top:100%; cursor:nesw-resize}
.crop-box i[data-h=s] {left:50%; top:100%; cursor:ns-resize}
.crop-box i[data-h=se]{left:100%;top:100%; cursor:nwse-resize}
.crop-side .meta{font-size:12.5px; color:var(--muted); margin-bottom:12px; line-height:1.7}
.btn-col{display:grid; gap:8px}
.num-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0}
.num-grid label{font-size:12px; color:var(--muted); font-weight:600}
.result{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.result video{width:100%; border-radius:10px; background:#000; display:block; margin-bottom:10px; max-height:320px}

.server-note{color:var(--ok); font-weight:600}

/* ---------- text de pe clip ---------- */
.grab{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.grab h3{margin-bottom:10px}
.grab img{
  display:block; width:100%; max-width:560px; border-radius:8px;
  background:#000; margin:0 auto;
  -webkit-user-select:text; user-select:text;   /* permite selectarea textului din imagine */
}
.grab textarea{margin-top:4px; font-size:14px; line-height:1.5}
#grabDescr{margin-top:18px}

/* ---------- editor ---------- */
.editor{display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start}
.editor-stage{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px;
  position:sticky; top:78px;   /* previzualizarea ramane vizibila cat derulezi panourile */
}
#stage{
  width:auto; height:min(72vh,760px); max-width:100%;
  background:#000; border-radius:8px; touch-action:none; cursor:default;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.stage-tools{display:flex; align-items:center; gap:14px}
.stage-tools button{padding:7px 14px; font-size:16px}
.tip{font-size:12px; color:var(--muted)}
.editor-side{display:flex; flex-direction:column; gap:14px; min-width:0}
.group{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; min-width:0;
  flex:none;   /* element flex: fara asta se comprima si taie continutul */
}
.layers{list-style:none; margin:0; padding:0; display:grid; gap:6px; min-width:0}
.layers li{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
  background:var(--panel2); border:1px solid transparent; cursor:pointer; font-size:13px;
  min-width:0;   /* element de grilă: fără asta se lățește după text, nu după panou */
}
.layers li.sel{border-color:var(--accent)}
.layers li span.ic{width:18px; flex:none; text-align:center; opacity:.7}
.layers li span.nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.progress{margin-top:12px; background:var(--panel2); border-radius:999px; height:26px; position:relative; overflow:hidden}
.progress .bar{height:100%; width:0; background:linear-gradient(90deg,var(--accent),#ff9a3c); transition:width .4s}
.progress span{position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:700}

@media (max-width:1000px){
  .editor{grid-template-columns:1fr}
  .editor-stage{position:static}
  .crop-wrap{grid-template-columns:1fr}
  #stage{height:min(52vh,520px); width:auto; max-width:100%}
}

/* ---------- ecrane mici / atingere ---------- */
@media (pointer:coarse){
  .crop-box{--hs:26px}                      /* mânere pe măsura degetului */
  .crop-box i{border-width:3px; box-shadow:0 1px 4px rgba(0,0,0,.5)}
  button,.primary,.filebtn{min-height:46px}
  .mini-btn{min-height:40px}
  input[type=number],input[type=text],input[type=url],input[type=password],select{min-height:46px; font-size:16px}
  /* font-size 16px împiedică iOS să mărească pagina la focus pe câmp */
}

@media (max-width:700px){
  body{-webkit-tap-highlight-color:transparent}
  main{padding:14px 12px 40px}
  .panel{padding:16px; border-radius:10px}
  .topbar{padding:12px 14px}
  .steps{padding:12px 12px 0; gap:6px}
  .step{padding:8px 12px; font-size:12px}
  h2{font-size:17px}

  .crop-stage img{max-height:78vh}
  .crop-side{display:flex; flex-direction:column}
  .crop-side .meta{order:3; margin:14px 0 0}
  .btn-col{order:2; grid-template-columns:1fr 1fr; display:grid; gap:8px; margin-top:12px}
  .num-grid{order:1; margin:14px 0 0}
  .num-grid label{font-size:11px}

  /* Butonul principal rămâne la îndemână cât timp ajustezi chenarul. */
  #btnCrop{
    order:4; position:sticky; bottom:10px; z-index:30; margin-top:14px;
    box-shadow:0 6px 22px rgba(0,0,0,.6);
  }
  #cropResult{order:5}
  #btnBack1{order:6}

  .result video{max-height:44vh}
  .editor-stage{padding:10px}
  .tip{display:none}
}