:root{
  /* ✅ 浅色主题：白灰底 + 粉色点缀 */
  --bg:#f6f7fb;
  --card:#ffffff;
  --card2:#ffffff;
  --border:rgba(20,20,30,.10);
  --text:#161823;
  --muted:rgba(22,24,35,.58);
  --pink:#ff4fa6;
  --pink2:#ff75be;
  --shadow: 0 12px 30px rgba(18, 20, 35, .10);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,79,166,.16), transparent 60%),
    radial-gradient(900px 500px at 95% 20%, rgba(255,79,166,.10), transparent 55%),
    radial-gradient(700px 500px at 10% 90%, rgba(90,120,255,.08), transparent 55%),
    var(--bg);
}

.app{
  min-height:100vh;
}

/* ✅ 顶栏变浅 */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background: rgba(255,255,255,.78);
  border-bottom:1px solid rgba(20,20,30,.10);
  backdrop-filter: blur(10px);
}
.topbar-title{font-weight:700; letter-spacing:.2px; opacity:.95}
.icon-btn{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid rgba(20,20,30,.10);
  background: rgba(255,255,255,.75);
  color: rgba(22,24,35,.9);
  display:flex;align-items:center;justify-content:center;
}

.container{
  padding:16px;
  max-width: 680px;
  margin:0 auto;
}

.header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 14px;
}

.app-title{
  margin:0;
  font-size:28px;
  font-weight:900;
  color: var(--pink);
  text-shadow: 0 10px 28px rgba(255,79,166,.18);
}

.mini-actions{display:flex; flex-direction:column; gap:8px;}
.mini-btn{
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(20,20,30,.10);
  color: rgba(22,24,35,.72);
  font-size:12px;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  margin: 12px 0;
}

.upload-card{padding: 14px;}
.dropzone{
  border-radius: 18px;
  border: 2px dashed rgba(255,79,166,.30);
  background: rgba(255,255,255,.80);
  padding: 26px 18px;
  text-align:center;
  outline:none;
}
.dropzone:focus{border-color: rgba(255,79,166,.55); box-shadow: 0 0 0 4px rgba(255,79,166,.14)}

.upload-icon{
  width:56px;height:56px;
  margin:0 auto 12px;
  border-radius: 999px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,79,166,.14);
  color: var(--pink);
  box-shadow: 0 18px 40px rgba(255,79,166,.10);
}
.upload-title{font-weight:900; font-size:16px; color: var(--pink); margin-bottom: 6px;}
.upload-sub{font-size:12px; color: rgba(22,24,35,.55)}

.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.muted{color: var(--muted); font-size:13px;}

.pill{
  border:1px solid rgba(20,20,30,.10);
  background: rgba(255,255,255,.80);
  color: rgba(22,24,35,.78);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
}

.thumb-list{display:flex; gap:10px; flex-wrap:wrap; padding-top:10px;}
.thumb{
  width:84px;
  border-radius:14px;
  border:1px solid rgba(20,20,30,.10);
  overflow:hidden;
  background: rgba(255,255,255,.85);
}
.thumb img, .thumb video{width:100%; height:64px; object-fit:cover; display:block; background:#f0f0f3;}
.thumb-name{font-size:11px; padding:6px 8px; color: rgba(22,24,35,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.qq-card{display:flex; align-items:center; gap:12px; cursor:pointer;}
.qq-avatar{
  width:44px;height:44px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,79,166,.22), rgba(90,120,255,.10));
  border:1px solid rgba(20,20,30,.10)
}
.qq-title{font-weight:900;}
.qq-sub{font-size:12px; color: rgba(22,24,35,.55); margin-top:2px;}
.qq-arrow{margin-left:auto; font-size:24px; color: rgba(22,24,35,.25)}

.section-title{font-weight:900; letter-spacing:.2px;}

.chip-row{display:flex; gap:10px; overflow:auto; padding:10px 2px; -webkit-overflow-scrolling: touch;}
.chip-row::-webkit-scrollbar{height:0}

.chip{
  border:1px solid rgba(20,20,30,.10);
  background: rgba(255,255,255,.85);
  color: rgba(22,24,35,.70);
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}
.chip.active{
  background: rgba(255,79,166,.16);
  border-color: rgba(255,79,166,.45);
  color: rgba(22,24,35,.92);
}

.model-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding-top:10px;
}
.model-btn{
  border:1px solid rgba(20,20,30,.10);
  background: rgba(255,255,255,.90);
  color: rgba(22,24,35,.76);
  padding:14px 10px;
  border-radius: 16px;
  text-align:center;
  font-size:13px;
}
.model-btn.active{
  border-color: rgba(255,79,166,.55);
  background: rgba(255,79,166,.14);
  color: rgba(22,24,35,.92)
}

.hint{color: rgba(22,24,35,.48); font-size:12px; margin-top:10px;}

.accordion{padding:0; overflow:hidden;}
.acc-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:0;
  background: transparent;
  color: inherit;
}
.acc-left{display:flex; align-items:center; gap:12px;}
.acc-icon{
  width:40px;height:40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,79,166,.14);
  color: var(--pink);
  font-weight:900;
}
.acc-title{font-weight:900;}
.acc-sub{font-size:12px; color: rgba(22,24,35,.55); margin-top:2px;}
.acc-caret{color: rgba(22,24,35,.45); font-size:16px; transition: transform .2s ease;}

.acc-body{padding:0 14px 14px; display:none;}
.accordion.open .acc-body{display:block;}
.accordion.open .acc-caret{transform: rotate(180deg);}

.field{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.field span{font-size:12px; color: rgba(22,24,35,.55)}
.field input, .field select{
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(20,20,30,.12);
  background: rgba(255,255,255,.92);
  color: rgba(22,24,35,.92);
  padding: 0 12px;
  outline:none;
}
.field input:focus, .field select:focus{
  border-color: rgba(255,79,166,.55);
  box-shadow: 0 0 0 4px rgba(255,79,166,.14)
}
.field-hint{font-size:12px; color: rgba(255,79,166,.80)}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.quick-row{display:flex; gap:10px; flex-wrap:wrap;}

.gps-search{display:flex; gap:10px; align-items:center; margin-top: 6px;}
.gps-search input{
  flex:1;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(20,20,30,.12);
  background: rgba(255,255,255,.92);
  color: rgba(22,24,35,.92);
  padding: 0 12px;
  outline:none;
}
.map{
  height: 240px;
  border-radius: 18px;
  border: 1px solid rgba(20,20,30,.12);
  overflow:hidden;
  margin-top: 10px;
}

.gps-selected{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(20,20,30,.12);
  background: rgba(255,255,255,.92);
}
.gps-addr{flex:1; font-size:12px; color: rgba(22,24,35,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.notice{padding: 14px;}
.notice-list{margin: 12px 0 0; padding-left: 18px;}
.notice-h{font-weight:900; margin-bottom: 6px;}
.notice-p{color: rgba(22,24,35,.56); font-size: 12px; line-height: 1.6;}

/* ✅ 底栏变浅 */
.bottombar{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;
  gap:12px;
  justify-content:center;
  background: rgba(255,255,255,.82);
  border-top:1px solid rgba(20,20,30,.10);
  backdrop-filter: blur(12px);
  z-index:20;
}

.btn{
  border:1px solid rgba(20,20,30,.12);
  background: rgba(255,255,255,.88);
  color: rgba(22,24,35,.82);
  padding: 10px 14px;
  border-radius: 16px;
  font-weight:900;
  text-decoration: none;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-big{flex:1; max-width: 320px; height: 48px;}

.btn-primary{
  border-color: rgba(255,79,166,.55);
  background: linear-gradient(180deg, rgba(255,79,166,.40), rgba(255,79,166,.18));
  color: rgba(22,24,35,.95);
  box-shadow: 0 14px 40px rgba(255,79,166,.12);
}
.btn-ghost{
  background: rgba(255,255,255,.75);
}
.btn-pill{
  border-radius: 999px;
  padding: 10px 16px;
}

.hidden{display:none !important;}

/* 弹窗也变浅 */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(22,24,35,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 50;
}
.modal{
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,20,30,.12);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 22px 80px rgba(18,20,35,.20);
}
.modal-title{font-weight:900; font-size:16px; color: var(--pink);}
.modal-text{margin-top:10px; color: rgba(22,24,35,.62); font-size: 12px; line-height: 1.6;}
.modal-actions{display:flex; gap:12px; justify-content:flex-end; margin-top: 14px;}

/* ===== Export Preview Page styles ===== */
.export-page{
  max-width:720px;
  margin:0 auto;
  padding:14px 14px 110px;
}
.export-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 14px;
}
.export-title{
  font-size:18px;
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
}
.export-hint{
  color: rgba(22,24,35,.62);
  font-size:12px;
  line-height:1.6;
  margin: 6px 0 12px;
}
.export-fn{
  font-size:13px;
  opacity:.92;
  word-break:break-all;
}
.export-preview{
  border-radius: 14px;
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(20,20,30,.12);
  background:#f0f0f3;
}
.export-preview img,
.export-preview video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#f0f0f3;
}
.export-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* fixed bottom bar for export page */
.fixedbar{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.82);
  border-top:1px solid rgba(20,20,30,.10);
  backdrop-filter: blur(12px);
  z-index:20;
}
.fixedbar .inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* 弹窗预览区域：限制高度，避免图片撑满 */
.modal-preview{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20,20,30,.12);
  background:#f0f0f3;
  max-height: 52vh;
}
.modal-preview img,
.modal-preview video{
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  display:block;
  background:#f0f0f3;
}

/* ===== Large modal for export statement ===== */
.modal.modal-large{
  max-width: 720px;
}

/* loading 也变浅一点 */
.loading{
  position:fixed; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background: rgba(22,24,35,.25);
  z-index: 60;
}
.spinner{
  width:44px; height:44px;
  border-radius: 999px;
  border: 4px solid rgba(22,24,35,.12);
  border-top-color: rgba(255,79,166,.85);
  animation: spin 1s linear infinite;
}
.loading-text{color: rgba(22,24,35,.85); font-weight:900}
@keyframes spin{to{transform: rotate(360deg)}}

@media (max-width: 420px){
  .form-grid{grid-template-columns: 1fr;}
  .model-grid{grid-template-columns: 1fr 1fr;}
}