:root{
  --bg:#070b18;
  --line:rgba(255,255,255,.10);
  --text:#eef3ff;
  --muted:rgba(238,243,255,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(122,168,255,.35), transparent 55%),
    radial-gradient(900px 650px at 110% 0%, rgba(255,120,200,.22), transparent 55%),
    var(--bg);
  overflow:hidden;
}

.app{
  height: 100svh;
  display:flex;
  flex-direction:column;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  gap:8px;
}

.top{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  flex-wrap:wrap;
}

.brand{ display:flex; flex-direction:column; gap:2px; }
.brand h1{ margin:0; font-size:15px; font-weight:950; letter-spacing:.2px; }
.brand p{ margin:0; font-size:12px; color:var(--muted); }

.pick{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  border:1px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
}
input[type="file"]{ max-width: 220px; color: var(--muted); }

.dl a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  white-space:nowrap;
  opacity: .95;
}
.dl a:hover{ background: rgba(255,255,255,.09); }

.kpi{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 9px 10px;
  border-radius: 16px;
  border:1px solid rgba(122,168,255,.35);
  background: linear-gradient(180deg, rgba(122,168,255,.22), rgba(122,168,255,.10));
  min-width: 320px;
  flex: 1 1 320px;
}
.kpi .big{ min-width: 150px; display:flex; flex-direction:column; gap:2px; line-height:1; }
.kpi .pct{ font-weight:980; font-size:22px; letter-spacing:.2px; }
.kpi .sizes{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px; opacity:.9;
}
.meter{
  flex:1; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.meter > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, rgba(136,255,204,.15), rgba(136,255,204,.95));
  transition: width 650ms cubic-bezier(.2,.8,.2,1);
}

.tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: rgba(255,255,255,.09); }

.dpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-left: 4px;
}
.dpadRow{
  display:flex;
  gap:6px;
}

.status{
  color: var(--muted);
  font-size: 12px;
  padding: 0 4px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.stage{
  flex:1; min-height:0;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.badge{
  position:absolute; top:10px; left:10px;
  z-index:6;
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 950;
  letter-spacing:.2px;
}
.badge .meta{ color: var(--muted); font-weight:700; }
.badge .dot{ opacity:.6; }
.badge .chip{ display:inline-flex; gap:8px; align-items:center; }

.cornerLabels{
  position:absolute;
  inset: 12px;
  z-index:6;
  pointer-events:none;
}
.corner{
  position:absolute;
  top: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.2px;
  opacity:.95;
}
.corner.left{ left: 0; }
.corner.right{ right: 0; }

.viewport{
  position:absolute; inset:0;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  cursor: grab;
}
.viewport:active{ cursor: grabbing; }

.center{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
}
.content{
  position:relative;
  width:1px; height:1px;
  transform-origin: 0 0;
  will-change: transform;
}

.layer{
  position:absolute; left:0; top:0;
  max-width:none; max-height:none;
  pointer-events:none;
  display:none;
}
.layer.has-src{ display:block; }

/* Split UI */
.splitUI{
  position:absolute; inset:0;
  z-index:7;
  pointer-events:none;
}
.handleGrab{
  position:absolute;
  top:0; bottom:0;
  width: 60px;
  transform: translateX(-30px);
  pointer-events:auto;
  cursor: ew-resize;
}

/* Parlak gradient + glow line */
.handleLine{
  position:absolute;
  top:0; bottom:0;
  width:3px;
  transform: translateX(-1.5px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.15),
    rgba(122,168,255,.95),
    rgba(136,255,204,.95),
    rgba(255,255,255,.15)
  );
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 0 18px rgba(122,168,255,.35),
    0 0 28px rgba(136,255,204,.22);
}

.handleKnob{
  position:absolute; top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 12px 35px rgba(0,0,0,.4),
    0 0 22px rgba(122,168,255,.18);
  pointer-events:none;
}
.handleKnob .lbl{
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.2px;
  opacity:.95;
  white-space:nowrap;
}
.handleKnob .sep{
  font-weight: 950;
  opacity:.9;
}
.pctTag{
  margin-left: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-weight: 980;
  font-size: 12px;
  letter-spacing: .2px;
  opacity: .95;
  white-space: nowrap;
}

/* Overlay */
.overlay{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:8;
  background: radial-gradient(600px 300px at 50% 40%, rgba(122,168,255,.16), rgba(0,0,0,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.overlay.show{ display:flex; }

.convertBox{
  width:min(520px, calc(100% - 28px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,25,.72);
  padding: 14px 14px 12px;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
.convertRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rowLeft{ display:flex; align-items:center; gap:10px; }
.spinner{
  width:18px; height:18px; border-radius:999px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.95);
  animation: spin .75s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.convertTitle{ font-weight:950; font-size:13px; letter-spacing:.2px; }
.convertSub{ color: var(--muted); font-size:12px; margin-top:4px; line-height:1.25; }
.bar{
  height: 10px; margin-top:10px; border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.bar > i{
  display:block; height:100%; width:35%;
  background: linear-gradient(90deg, rgba(122,168,255,.0), rgba(122,168,255,.85), rgba(122,168,255,.0));
  animation: sweep 1.05s ease-in-out infinite;
}
@keyframes sweep{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(320%);} }

@media (max-width: 720px){
  body{ overflow:auto; }
  .app{ height:auto; min-height:100svh; }
  input[type="file"]{ max-width: 170px; }
  .stage{ height: 82svh; }
  .kpi{ min-width: unset; width:100%; }
  .corner{ top: 86px; }
}