:root{
  --bg:#1c2b33;
  --card:#24363f;
  --border:#33474f;
  --text:#f1f5f8;
  --muted:#93a5ad;
  --accent:#0082fb;
  --accent-dark:#0064e0;
}
*{box-sizing:border-box;}
html,body{overflow-x:hidden; max-width:100%; touch-action:manipulation;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:40px 16px;
}
.wrap{max-width:520px;width:100%;}
.logo{
  display:block;
  height:100px;
  width:auto;
  margin:0 auto 14px;
}
.desc{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:24px;text-align:center;}

.dropzone{
  position:relative;
  border:none;
  border-radius:16px;
  background:var(--card);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease;
  overflow:hidden;
}
.dropzone.dragover{
  background:#1c2620;
}
.dzIcon{font-size:40px;display:block;margin-bottom:8px;}
.dzSub{color:var(--muted);font-size:13px;margin-top:4px;}
.cropStage{
  position:relative;
  margin:0 auto;
  overflow:hidden;
  border-radius:14px;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.stageImg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  -webkit-user-drag:none;
}

.cropFrame{
  position:absolute;
  box-shadow:0 0 0 2000px rgba(0,0,0,.6);
  border:2px solid var(--accent);
  border-radius:4px;
  cursor:grab;
  touch-action:none;
}
.cropFrame:active{
  cursor:grabbing;
}
.cropHint{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}
.privacyNote{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
  line-height:1.5;
}
.dropError{
  text-align:center;
  color:#ff8a8a;
  font-size:13px;
  margin-top:8px;
}

.options{margin-top:20px;background:var(--card);border:none;border-radius:14px;padding:16px 18px;}
.optRow{display:flex;align-items:center;gap:12px;padding:10px 0;}
.optRow > span:first-child{flex:0 0 90px;font-size:14px;color:var(--muted);}
.optState{font-size:13px;color:var(--text);}

.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:#3a3a3f;border-radius:999px;transition:.15s;}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.15s;}
input:checked + .slider{background:var(--accent);}
input:checked + .slider:before{transform:translateX(18px);}

.mainBtn{
  width:100%;
  margin-top:14px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:var(--text);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease;
}
.mainBtn:hover{background:var(--accent-dark);}
.mainBtn:disabled{opacity:.5;cursor:not-allowed;}

.btnRow{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.btnRow .mainBtn{margin-top:0; flex:1;}
.iconSquareBtn{
  flex:0 0 auto;
  width:52px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:var(--text);
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease;
}
.iconSquareBtn:hover{background:var(--accent-dark);}

.statusMsg{margin-top:10px;font-size:13px;color:var(--muted);min-height:18px;}

.howto{margin-top:24px;font-size:13px;color:var(--muted);}
.howtoToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:none;
  border:none;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  padding:10px 0;
  cursor:pointer;
  text-align:center;
}
.howtoBody{padding-top:4px;}
.howto ol{padding-left:20px;line-height:1.6;}
.privacy{margin-top:12px;font-style:italic;}