/* PixUp v1 — clean dark theme */

:root {
  --bg: #0b0b10;
  --bg2: #111118;
  --card: #1a1a24;
  --text: #eeeef5;
  --text2: #9898b0;
  --text3: #686880;
  --amber: #f59e0b;
  --amber-l: #fbbf24;
  --pink: #ec4899;
  --green: #22c55e;
  --border: rgba(255,255,255,0.05);
  --radius: 16px;
  --sm: 10px;
  --font: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(11,11,16,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 max(1rem, calc(50vw - 600px));
  height: 54px;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.05rem;
  cursor: pointer;
}
.navbar-logo .icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--amber), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}
.navbar-links a {
  color: var(--text3); font-size: 0.82rem;
  margin-left: 18px; cursor: pointer; text-decoration: none;
}
.navbar-links a:hover { color: var(--text); }

.main { padding-top: 54px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

.page { width: 100%; max-width: 680px; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; }

h1 { font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 800; margin-bottom: 6px; }
.sub { color: var(--text2); font-size: 0.9rem; margin-bottom: 24px; text-align: center; }

/* Mode pills */
.modes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 20px; }
.mode-btn {
  padding: 6px 14px; border-radius: 50px; border: 1px solid var(--border);
  background: var(--card); color: var(--text2); font-size: 0.78rem;
  cursor: pointer; font-family: var(--font); font-weight: 500;
  transition: all 0.15s;
}
.mode-btn:hover { border-color: var(--amber); color: var(--text); }
.mode-btn.active { border-color: var(--amber); background: rgba(245,158,11,0.08); color: var(--amber-l); }

/* Drop zone */
.drop {
  width: 100%; min-height: 240px;
  border: 2px dashed var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; cursor: pointer; transition: all 0.2s;
  background: var(--card);
}
.drop:hover, .drop.drag { border-color: var(--amber); background: rgba(245,158,11,0.03); }
.drop .icon { font-size: 2.8rem; margin-bottom: 10px; opacity: .6; }
.drop .txt { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.drop .hint { font-size: 0.78rem; color: var(--text3); margin-bottom: 14px; }
.drop .btn {
  padding: 8px 22px; border-radius: 50px; border: none;
  background: linear-gradient(135deg, var(--amber), var(--pink));
  color: white; font-weight: 600; font-size: 0.8rem; cursor: pointer;
}

/* Preview */
.pre {
  width: 100%; border-radius: var(--sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--card); position: relative;
}
.pre img { width: 100%; height: auto; display: block; }
.pre .overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 0.75rem;
}
.pre .overlay .change {
  color: var(--amber-l); cursor: pointer;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
}
.pre .overlay .change:hover { background: rgba(0,0,0,.6); }

/* Comparison slider */
.comparison {
  position: relative; width: 100%; user-select: none; touch-action: none;
}
.comparison img { width: 100%; height: auto; display: block; }
.comparison-after {
  position: absolute; top:0; right:0; height:100%; overflow: hidden;
}
.comparison-after img {
  position: absolute; top:0; right:0; height:100%;
  width: auto; min-width:100%; max-width: none;
}
.comparison-handle {
  position: absolute; top:0; bottom:0; width:3px; background:white;
  cursor: ew-resize; z-index:10; box-shadow:0 0 8px rgba(0,0,0,.4);
}
.comparison-handle::before {
  content:'⟷'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:white; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:var(--bg);
}
.label-ba {
  position:absolute; z-index:5; font-size:0.68rem; font-weight:600;
  padding:3px 10px; border-radius:4px;
}
.label-ba.before { top:10px; left:10px; background:rgba(0,0,0,.5); color:rgba(255,255,255,.7); }
.label-ba.after { top:10px; right:10px; background:rgba(34,197,94,.2); color:var(--green); }

/* Compare toggles */
.cmp-tools {
  display: flex; gap: 3px;
  position: absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:10;
}
.cmp-btn {
  padding:3px 10px; font-size:0.68rem; font-weight:600; border-radius:4px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.5); color:rgba(255,255,255,.6); cursor:pointer;
}
.cmp-btn.active { background:var(--amber); color:white; border-color:var(--amber); }

/* Info bar */
.info {
  display:flex; gap:12px; padding:6px 12px;
  background:var(--bg2); font-size:0.7rem; color:var(--text3);
  justify-content:center; border-top:1px solid var(--border);
}

/* Buttons */
.actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; justify-content:center; }
.btn-p {
  padding:10px 28px; border-radius:50px; border:none;
  background:linear-gradient(135deg,var(--amber),var(--pink));
  color:white; font-weight:700; font-size:0.88rem; cursor:pointer;
  font-family:var(--font); box-shadow:0 4px 20px rgba(245,158,11,.2);
}
.btn-p:hover { transform:translateY(-1px); }
.btn-p:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-p.green { background:linear-gradient(135deg,var(--green),#06b6d4); }
.btn-s {
  padding:10px 20px; border-radius:50px; border:1px solid var(--border);
  background:transparent; color:var(--text); font-weight:600; font-size:0.82rem;
  cursor:pointer; font-family:var(--font);
}
.btn-s:hover { background:var(--card); }
a.btn-p { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* Spinner */
.spin { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:white; animation:spin .8s linear infinite; display:inline-block; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Processing */
.proc { text-align:center; padding:48px 0; }
.proc .ring { width:56px;height:56px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--amber); animation:spin 1s linear infinite; margin:0 auto 16px; }
.proc h2 { font-size:1.2rem; margin-bottom:4px; }
.proc p { color:var(--text2); font-size:0.85rem; }

/* Result info */
.result-info {
  width:100%; background:var(--card); border-radius:var(--sm);
  padding:12px 16px; border:1px solid var(--border); margin-top:12px;
  display:flex; gap:16px; flex-wrap:wrap;
}
.result-info .r-label { font-size:0.7rem; color:var(--text3); }
.result-info .r-val { font-size:0.85rem; font-weight:600; }

/* Error */
.err {
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2);
  border-radius:var(--sm); padding:20px 24px; text-align:center; max-width:400px; margin:20px auto;
}
.err .icon { font-size:2rem; margin-bottom:6px; }
.err h3 { color:var(--red); font-size:1rem; margin-bottom:4px; }
.err p { color:var(--text2); font-size:0.8rem; margin-bottom:12px; }

/* History */
.hist { width:100%; max-width:680px; margin-top:16px; }
.hist h3 { font-size:0.8rem; color:var(--text3); margin-bottom:8px; font-weight:600; }
.hist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:6px; }
.hist-item { border-radius:6px; overflow:hidden; border:1px solid var(--border); cursor:pointer; aspect-ratio:1; }
.hist-item:hover { border-color:var(--amber); }
.hist-item img { width:100%; height:100%; object-fit:cover; }

/* Param */
.params { width:100%; margin-top:8px; }
.param-row { margin-bottom:6px; }
.param-row:last-child { margin-bottom:0; }
.param-h { display:flex; justify-content:space-between; font-size:0.76rem; margin-bottom:2px; }
.param-h .pn { color:var(--text2); }
.param-h .pv { color:var(--amber-l); font-weight:600; }
input[type=range] { -webkit-appearance:none; width:100%; height:3px; border-radius:2px; background:var(--border); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--amber),var(--orange)); cursor:pointer; border:2px solid var(--bg); }
.param-select { display:flex; gap:4px; }
.param-select button { flex:1; padding:4px 8px; font-size:0.72rem; border-radius:6px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; font-weight:500; }
.param-select button.active { border-color:var(--amber); background:rgba(245,158,11,.08); color:var(--amber-l); }

/* Footer */
.ft { padding:16px; text-align:center; font-size:0.72rem; color:var(--text3); border-top:1px solid var(--border); margin-top:auto; width:100%; }

@media (max-width:768px) {
  .page { padding:20px 12px; }
  .modes { gap:4px; }
  .mode-btn { font-size:0.72rem; padding:5px 10px; }
}