*{box-sizing:border-box} body{margin:0;font-family:-apple-system,blinkmacsystemfont,Segoe UI,Roboto,Helvetica,Arial,'Microsoft Yahei',sans-serif;background:#f7f8fa;color:#222}
.container{max-width:600px;margin:10px 10px}
.card{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:12px;margin-bottom:12px}
.card-title{font-size:18px;font-weight:600;margin-bottom:6px}
.card-desc{font-size:14px;color:#666;margin-bottom:3px;margin-top:10px}
.btn{display:inline-block;background:#1677ff;color:#fff;border:none;border-radius:25px;padding:10px 14px;font-size:16px;cursor:pointer}
.btnnn{display:inline-block;background:#1677ff;color:#b4b4b4;border:none;border-radius:8px;padding:10px 14px;font-size:16px;cursor:pointer}
.btn[disabled]{opacity:.6;pointer-events:none}
.input{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:16px;margin:6px 0}
.inputt{width:100%;border:1px solid #ddd;border-radius:8px;font-size:14px;margin:6px 0}
.row{display:flex;gap:8px}
.row .col{flex:1}
.header{padding:12px;background:#fff;position:sticky;top:0;border-bottom:1px solid #eee}
.footer{padding:20px;text-align:center;color:#888}
.modal-mask{position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;z-index:9999;overflow:auto;padding:20px 12px}
.modal{width:92%;max-width:560px;background:#fff;border-radius:10px;padding:12px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto}
.modal-title{font-size:18px;font-weight:600;margin-bottom:8px}

/* ===== Migrated from index.html & admin/fanz.html (scoped & deduped) ===== */
/* Select search dropdown */
.select-search{position:relative}
.select-search .menu{position:absolute;left:0;right:0;background:#fff;border:1px solid #ddd;z-index:10;max-height:220px;overflow:auto;margin-top:4px;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.select-search .options div{padding:6px 8px;cursor:pointer;border-top:1px solid #f5f5f5}
.select-search .options div:hover{background:#f0f0f0}

/* History cards */
.history-item{background:#fff;border-radius:10px;padding:12px;margin:10px 0;border:1px solid #eee}
.history-meta{font-size:13px;color:#888;margin-top:6px}
.item-title{font-size:16px;font-weight:600;margin-bottom:6px;background:#e6f4ff;padding:6px 10px;border-radius:6px}

/* Shared list/card styles */
.list{display:block}
.cardv2{background:#fff;border-radius:10px;border:1px solid #eee;box-shadow:0 1px 3px rgba(0,0,0,0.06);padding:12px;margin: 12px 0;}
.cardvv{background:#fff;border-radius:10px;border:1px solid #eee;box-shadow:0 1px 3px rgba(0,0,0,0.06);padding:12px;margin: 5px 0;}
.card-head{display:flex;align-items:center;justify-content:space-between;color:#888;font-size:13px;margin-bottom:6px}
.status-pill{background:#e6f0ff;color:#1677ff;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
.pill-red{background:#ffecec;color:#e03131;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
.pill-gray{background:#f0f0f0;color:#666;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
.pill-redd{color:#ffbf00;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
.pill-grayy{color:#666;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
.head-right{display:flex;gap:8px;align-items:center}
.inline-pill{display:inline-block;margin-left:8px}
.id-badge{display:inline-block;background:#d0e7ff;color:#1677ff;border-radius:12px;padding:0 8px;height:20px;line-height:20px;font-size:12px;margin-right:8px;font-weight:600}

/* Title scroll animation */
.card-title{white-space:nowrap;overflow:hidden}
.scroll-title{display:inline-block;will-change:transform}
.card-title.scrolling .scroll-title{animation:scroll-horizontal var(--scroll-duration,10s) ease-in-out 0s infinite alternate}
.card-title.scrolling:hover .scroll-title{animation-play-state:paused}
@keyframes scroll-horizontal{0%{transform:translateX(0)}5%{transform:translateX(0)}95%{transform:translateX(calc(-1 * var(--scroll-distance, 0px)))}100%{transform:translateX(calc(-1 * var(--scroll-distance, 0px)))} }

/* Info grid */
.info-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:#f7f9fc;border-radius:8px;padding:10px}
.cell .label{color:#888;font-size:12px;margin-bottom:4px}
.cell .value{color:#222;font-size:14px;font-weight:600}

/* Remarks */
.remark-line{color:#666;font-size:13px;margin-top:8px}

/* Thumbs */
.thumbs{display:flex;flex-wrap:wrap}
.thumb{width:50px;height:50px;object-fit:cover;border-radius:6px;border:1px solid #eee;margin-right:6px;margin-top:6px;cursor:pointer}

/* Header bar */
.header-bar{position:sticky;top:0;border-bottom:1px solid #eee;background:#fff;padding:12px 16px}
.header-title{font-weight:600;font-size:16px}
.back-btn{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:#1677ff;cursor:pointer;background:transparent;border:none;box-shadow:none;padding:0}
.back-btn:hover{color:#1355cc}
.back-icon{font-size:20px;line-height:1}
.status-ok{color:#16a34a}
.status-bad{color:#ef4444}
.status-warn{color:#f59e0b}

/* Search bar */
.search-fixed{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #eee;padding:8px 12px}
.search-inner{display:flex;align-items:center;gap:8px}
.search-input{flex:1;background:#fff;border:1px solid #eee;border-radius:999px;padding:8px 12px;font-size:14px;outline:none}
.search-btn{background:#1677ff;color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}
.search-btn.secondary{background:#fff;color:#1677ff;border:1px solid #1677ff}

/* Badges */
.badge-red{color:#ef4444;font-size:14px;margin-left:4px}
.badge-red-tag{display:inline-block;background:#ef4444;color:#fff;border-radius:3px;padding:0 4px;font-size:12px;line-height:1.6;margin-left:4px}
.badge-grey-tag{display:inline-block;background:#999;color:#fff;border-radius:3px;padding:0 4px;font-size:12px;line-height:1.6;margin-left:4px}

/* Container bottom padding for fixed footer */
.container{padding-bottom:60px}

/* Uploading tip */
.uploading-tip{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;padding:8px 12px;border-radius:4px;z-index:1000;display:none;font-size:14px}

/* Input variants */
.input.clean-normal{color:#faad14;background-color:#fffbe6;border-color:#faad14}

/* Floating submit button */
.fab-submit{position:fixed;right:20px;bottom:98px;width:56px;height:56px;border-radius:50%;background:#1677ff;color:#fff;border:none;box-shadow:0 6px 16px rgba(0,0,0,0.15);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;padding:0;line-height:1}
.fab-submit:hover{background:#3d8bff}
.fab-submit:active{background:#0f5fd6}

/* Bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:70px;background:#fff;border-top:1px solid #eee;display:flex;justify-content:space-around;align-items:center;z-index:900}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;cursor:pointer;font-size:12px;margin-bottom:20px}
.nav-item .icon{width:22px;height:22px}
.nav-item.active{color:#1677ff}

/* List status */
.list-status{color:#888;text-align:center;padding:10px 0;font-size:12px}

/* Scoped modal layout overrides */
#mask .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:85vh}
#mask .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#mask .modal-content{flex:1;overflow:auto;padding:12px 16px}
#mask .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

#queryModal .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:85vh}
#queryModal .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#queryModal .modal-content{flex:1;overflow:auto;padding:12px 16px}
#queryModal .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

/* Preview modal (admin) */
.preview-mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1000}
.preview-img{max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.preview-panel{max-width:90vw;max-height:85vh;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.3);overflow:auto;padding:12px}
.preview-list{display:flex;flex-direction:column;gap:10px}
.preview-item{width:auto;max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}

/* Admin specific cards & actions */
.meta-row{display:flex;align-items:flex-start;justify-content:space-between;margin-top:6px}
.meta-left{font-size:13px;color:#666}
.meta-right{display:flex;gap:8px}
.btn-mini{padding:4px 8px;font-size:12px}
.actions-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.actions-row .btn-view{background:#16a34a;color:#fff;border:1px solid #139a3d}
.actions-row .btn-view:hover{background:#128838}
.actions-row .btn-send{background:#ef4444;color:#fff;border:1px solid #e03131}
.actions-row .btn-send:hover{background:#d72626}

/* Analysis modal (admin) */
#analysisModal .modal{width:100vw;height:100vh;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
#analysisModal .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#analysisBox{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:12px}
.analysis-card{background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.06);padding:14px}
.analysis-card .card-desc{font-size:16px;font-weight:600;color:#222;margin-bottom:8px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.stat-grid{grid-template-columns:1fr}}
.stat-item{background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;padding:10px}
.stat-item{display:flex;align-items:baseline;justify-content:space-between}
.stat-item .label{color:#6b7280;font-size:12px;margin:0}
.value-line{display:flex;align-items:baseline;gap:6px}
.stat-item .value{font-size:15px;font-weight:700;color:#111827}
.stat-item .sub{color:#6b7280;font-size:12px}
.rank-list{margin:6px 0;list-style:none;padding-left:0;counter-reset:rank}
.rank-list li{counter-increment:rank}
.rank-list li::before{content:counter(rank) ".";font-weight:700;color:#6b7280;margin-right:8px;width:24px;text-align:right}
.rank-list li{margin:4px 0;background:#f9fafb;border:1px solid #eef2f7;border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:8px}
.rank-list li .badge:first-of-type{margin-left:auto}
.badge{display:inline-block;background:#eef2ff;color:#1d4ed8;border-radius:12px;padding:2px 8px;font-size:12px;margin-left:8px}
.badge-amt{background:#fff7ed;color:#ea580c}
.empty-state{background:#f8fafc;border:1px dashed #dbe3f0;color:#6b7280;border-radius:8px;padding:12px;text-align:center;font-size:13px}
.empty-icon{margin-right:6px}

/* Unchecked modal */
#uncheckedModal .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:85vh}
#uncheckedModal .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#uncheckedModal .modal-content{flex:1;overflow:auto;padding:12px 16px}
#uncheckedModal .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

/* City modal */
#cityModal .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:85vh}
#cityModal .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#cityModal .modal-content{flex:1;overflow:auto;padding:12px 16px}
#cityModal .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

/* Edit modal */
#editMask .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:85vh}
#editMask .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#editMask .modal-content{flex:1;overflow:auto;padding:12px 16px}
#editMask .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

/* Red packet modal */
#redModal .modal{width:100vw;max-width:none;margin:0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:50vh}
#redModal .modal-title{padding:12px 16px;border-bottom:1px solid #eee}
#redModal .modal-content{flex:1;overflow:auto;padding:12px 16px}
#redModal .modal-footer{border-top:1px solid #eee;padding:10px 16px;background:#fff}

/* Store list beautify */
.store-list{display:flex;flex-direction:column}
.cardv2{transition:box-shadow .2s ease, transform .2s ease}
.cardv2:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-1px)}
.store-head .left{display:flex;align-items:center;gap:8px}
.store-head .right{display:flex;align-items:center;gap:8px}
.store-card .card-title{font-size:16px;font-weight:600}
.city-summary{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;padding:8px 10px;margin-bottom:10px}
.city-summary .label{color:#6b7280;font-size:12px;margin-right:4px}

/* Div beautify utilities */
.panel{background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);padding:12px}
.section{margin:10px 0}
.stack-8 > * + *{margin-top:8px}
.stack-12 > * + *{margin-top:12px}
.cluster{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.divider{height:1px;background:#eee;margin:8px 0}
.chip{display:inline-block;background:#f3f4f6;color:#555;border-radius:999px;padding:4px 10px;font-size:12px}
.row.center{justify-content:center}
.text-muted{color:#6b7280}
.text-secondary{color:#1677ff}
.text-danger{color:#ef4444}
.text-sm{font-size:12px}
.text-lg{font-size:18px;font-weight:600}

/* Global: lock body scroll when modal open */
body.modal-open{overflow:hidden}