/* ============================================================
   AuraAI 证件照工具样式
   ============================================================ */
:root {
  --primary: #00ccff;
  --primary-dark: #0099cc;
  --bg: #ffffff;
  --card-bg: #f7f7f7;
  --text: #111111;
  --text-secondary: #888888;
  --text-light: #999999;
  --copyright: #cccccc;
  --danger: #f5222d;
  --warning: #fa8c16;
  --success: #52c41a;
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
#app {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
}

/* Header */
.header { padding: 2vh 0 0; display:flex; flex-direction:column; align-items:center; }
.brand-logo { width:70vw; max-width:380px; filter:brightness(0); }
.slogan-wrap { text-align:center; margin:1.5vh 0 2vh; }
.main-slogan { font-size:clamp(18px,5vw,24px); font-weight:900; letter-spacing:0.3vw; }
.sub-slogan { font-size:clamp(11px,3vw,14px); color:var(--text-secondary); margin-top:0.5vh; }

/* Pages */
.page { display:none; padding:12px 16px; }
.page.active { display:block; }

/* Nav */
.nav-bar {
  display:flex; align-items:center; height:48px; position:relative;
  margin-bottom:8px;
}
.nav-back { font-size:28px; cursor:pointer; color:var(--text); width:40px; text-align:center; line-height:1; }
.nav-title { position:absolute; left:50%; transform:translateX(-50%); font-size:16px; font-weight:600; }

/* Search */
.search-box { margin-bottom:12px; }
.search-box input {
  width:100%; padding:12px 16px; border:1px solid #e5e5e5; border-radius:var(--radius);
  font-size:14px; outline:none; background:#fafafa;
}
.search-box input:focus { border-color:var(--primary); background:#fff; }

/* Spec list */
.spec-list { display:flex; flex-direction:column; gap:8px; }
.spec-cat-title {
  font-size:12px; color:var(--text-light); font-weight:600;
  padding:8px 4px 4px; text-transform:uppercase; letter-spacing:1px;
}
.spec-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; background:var(--card-bg); border-radius:var(--radius);
  cursor:pointer; transition:all .15s; border:1px solid transparent;
}
.spec-item:active { border-color:var(--primary); background:rgba(0,204,255,0.06); }
.spec-name { font-size:15px; font-weight:600; }
.spec-detail { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.spec-right { text-align:right; }
.spec-size { font-size:13px; color:var(--primary-dark); font-weight:600; }
.spec-kb { font-size:11px; color:var(--text-light); }

/* Custom entry */
.custom-entry {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; padding:14px 16px; border:1px dashed #d0d0d0;
  border-radius:var(--radius); cursor:pointer; font-size:14px; color:var(--text-secondary);
}
.custom-entry .arrow { font-size:20px; }

/* Tips */
.tips { margin-top:20px; padding:16px; background:var(--card-bg); border-radius:var(--radius); }
.tips h3 { font-size:13px; color:var(--warning); margin-bottom:8px; }
.tips ul { list-style:none; }
.tips li {
  font-size:12px; color:var(--text-secondary); padding:3px 0 3px 16px; position:relative;
}
.tips li::before { content:'•'; position:absolute; left:4px; color:var(--primary); }

/* Form */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.form-group input[type="number"], .form-group input[type="text"] {
  width:100%; padding:12px; border:1px solid #e5e5e5; border-radius:var(--radius);
  font-size:15px; outline:none;
}
.form-group input:focus { border-color:var(--primary); }
.disclaimer { font-size:12px; color:var(--warning); margin:8px 0 16px; }
.disclaimer.center { text-align:center; margin-top:12px; }

/* BG select */
.bg-select { display:flex; gap:8px; flex-wrap:wrap; }
.bg-opt {
  display:flex; align-items:center; gap:6px; padding:8px 14px;
  border:1px solid #e5e5e5; border-radius:20px; font-size:13px;
  cursor:pointer; transition:all .15s; background:#fff;
}
.bg-opt.active { border-color:var(--primary); background:rgba(0,204,255,0.08); color:var(--primary-dark); }
.swatch { width:18px; height:18px; border-radius:50%; display:inline-block; }

/* Upload */
.spec-info {
  padding:12px 16px; background:var(--card-bg); border-radius:var(--radius);
  margin-bottom:16px; font-size:13px; line-height:1.8;
}
.spec-info strong { color:var(--primary-dark); }
.upload-area {
  border:2px dashed #d0d0d0; border-radius:var(--radius);
  padding:60px 20px; text-align:center; cursor:pointer; transition:all .2s; background:#fafafa;
}
.upload-area:hover, .upload-area.dragover { border-color:var(--primary); background:rgba(0,204,255,0.04); }
.upload-icon { font-size:48px; margin-bottom:12px; }
.upload-text { font-size:16px; margin-bottom:6px; }
.upload-hint { font-size:12px; color:var(--text-secondary); }

/* Crop */
.crop-container {
  position:relative; width:100%; max-width:400px; margin:0 auto;
  aspect-ratio:3/4; background:#000; border-radius:var(--radius);
  overflow:hidden; touch-action:none;
}#cropImg {
  position:absolute; top:0; left:0; transform-origin:0 0;
  max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.crop-frame {
  position:absolute; top:0; left:0; width:100%; height:100%;
  border:2px solid rgba(255,255,255,0.9); pointer-events:none; box-sizing:border-box;
}
.guide-line { position:absolute; left:10%; right:10%; border-top:1px dashed rgba(255,255,255,0.3); }
.guide-h-top { top:15%; }
.guide-h-eye { top:40%; }
.guide-h-chin { top:75%; }
.crop-tip { text-align:center; font-size:12px; color:var(--text-secondary); margin:12px 0; }

/* Buttons */
.btn-row { display:flex; gap:10px; margin-top:16px; }
.btn {
  flex:1; padding:14px; border:none; border-radius:var(--radius);
  font-size:15px; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn-primary { background:var(--primary); color:#000; }
.btn-primary:active { background:var(--primary-dark); }
.btn-ghost { background:var(--card-bg); color:var(--text); border:1px solid #e5e5e5; }

/* Processing */
.processing-wrap { text-align:center; padding-top:15vh; }
.spinner {
  width:48px; height:48px; border:4px solid #e5e5e5; border-top-color:var(--primary);
  border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 20px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.processing-text { font-size:16px; }
.processing-hint { font-size:12px; color:var(--text-secondary); margin-top:8px; }

/* Result */
.page-result { padding-top:0; }
.result-preview {
  width:200px; height:260px; margin:0 auto; border-radius:8px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.12); background:#f0f0f0;
  display:flex; align-items:center; justify-content:center;
}
.result-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.result-meta {
  text-align:center; font-size:12px; color:var(--text-secondary);
  margin:12px 0; line-height:1.8;
}
.result-bg { justify-content:center; margin-bottom:16px; }
.kb-control {
  padding:12px 16px; background:var(--card-bg); border-radius:var(--radius); margin-bottom:12px;
}
.kb-control label { font-size:13px; display:block; margin-bottom:8px; }
.kb-control input[type="range"] { width:100%; accent-color:var(--primary); }
.kb-actual { font-size:12px; color:var(--success); display:block; text-align:right; margin-top:4px; }
.compliance { margin-bottom:12px; }
.comp-item {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  font-size:13px; border-radius:8px; margin-bottom:4px;
}
.comp-item.pass { background:rgba(82,196,26,0.08); color:var(--success); }
.comp-item.fail { background:rgba(245,34,45,0.08); color:var(--danger); }
.comp-icon { font-size:16px; }

/* Copyright */
.copyright {
  position:fixed; bottom:0; left:0; right:0; text-align:center;
  font-size:11px; color:var(--copyright); padding:12px;
  background:linear-gradient(transparent, rgba(255,255,255,0.9)); pointer-events:none;
}

/* PC */
@media (min-width:768px) {
  .upload-area { padding:80px 20px; }
}