/* 就这么发 · 阶段一 H5 样式 */
:root{
  --green:#07c160; --green-dark:#06a854; --green-bg:#e9fbf1;
  --ink:#1f2329; --ink-2:#4e5969; --ink-3:#86909c;
  --line:#e5e6eb; --bg:#f7f8fa; --card:#fff;
  --amber:#ff9500; --amber-bg:#fff6e5;
  --red:#f53f3f; --red-bg:#ffece8;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:15px;}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;font-size:15px;}
.hidden{display:none!important;}

/* ===== 布局 ===== */
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:70px;}
.page{padding:14px 14px 24px;}
.topbar{background:linear-gradient(135deg,#07c160,#10b981);color:#fff;padding:18px 16px 16px;}
.topbar h1{font-size:19px;font-weight:700;}
.topbar p{font-size:12px;opacity:.9;margin-top:2px;}

/* ===== 底部导航 ===== */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);}
.tabbar .tab{flex:1;text-align:center;padding:8px 0 6px;font-size:11px;color:var(--ink-3);cursor:pointer;user-select:none;}
.tabbar .tab .ic{font-size:20px;display:block;line-height:1.3;}
.tabbar .tab.on{color:var(--green-dark);font-weight:600;}

/* ===== 主页面 ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;}
.card .ct{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.card .ct .opt{font-weight:400;color:var(--ink-3);font-size:12px;}

.upload-area{border:2px dashed #c9cdd4;border-radius:var(--radius);padding:30px 12px;text-align:center;color:var(--ink-3);
  font-size:13px;background:#fafbfc;cursor:pointer;}
.upload-area .ic{font-size:34px;display:block;margin-bottom:6px;}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;}
.thumb{width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center;position:relative;flex-shrink:0;}
.thumb .badge{position:absolute;left:3px;top:3px;font-size:9px;background:rgba(0,0,0,.55);color:#fff;padding:1px 5px;border-radius:4px;}
.thumb .x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;
  font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;}
.thumb.add{background:#fafbfc;border:1.5px dashed #c9cdd4;color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;}

textarea.kw{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:64px;resize:none;
  background:#fafbfc;outline:none;font-size:14px;}
textarea.kw:focus{border-color:var(--green);}
.kw-count{text-align:right;font-size:11px;color:var(--ink-3);margin-top:2px;}

.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-size:13px;padding:6px 14px;border-radius:17px;background:#fafbfc;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;user-select:none;}
.chip.on{background:var(--green-bg);border-color:var(--green);color:var(--green-dark);font-weight:600;}
.chip.sm{font-size:12px;padding:4px 11px;}

.seg{display:flex;background:#f2f3f5;border-radius:9px;padding:3px;gap:3px;}
.seg span{flex:1;text-align:center;font-size:13px;padding:5px 0;border-radius:7px;color:var(--ink-2);cursor:pointer;user-select:none;}
.seg span.on{background:#fff;font-weight:600;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ink-2);padding:8px 0;}
.sw{width:42px;height:24px;border-radius:12px;background:var(--green);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s,right .2s;}
.sw.off{background:#c9cdd4;}.sw.off::after{right:auto;left:2px;}

.btn-main{background:var(--green);color:#fff;border:none;width:100%;padding:13px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;}
.btn-main:disabled{background:#bedfd0;cursor:not-allowed;}
.btn-sub{background:#fff;color:var(--green-dark);border:1px solid var(--green);width:100%;padding:11px;border-radius:25px;font-size:14.5px;font-weight:600;cursor:pointer;}
.btn-ghost{background:none;border:none;color:var(--green-dark);font-size:13px;cursor:pointer;padding:4px 8px;}

/* 结果区 */
.hotbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.hot{font-size:11px;background:#fff;border:1px solid #ffd591;color:#d46b08;padding:2px 9px;border-radius:12px;}
.hot-note{font-size:11px;color:var(--ink-3);margin-bottom:10px;}
.copy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;margin-bottom:10px;}
.copy-card .no{font-size:11px;color:var(--ink-3);margin-bottom:4px;}
.copy-card p{font-size:14.5px;margin:0 0 8px;white-space:pre-line;word-break:break-word;}
.copy-card .why{font-size:11px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:7px;margin-bottom:8px;}
.copy-card .acts{display:flex;gap:6px;flex-wrap:wrap;}
.copy-card .acts span{font-size:12px;color:var(--green-dark);background:var(--green-bg);padding:4px 12px;border-radius:14px;cursor:pointer;user-select:none;}
.copy-card .acts span.copied{background:var(--green);color:#fff;}

.loading-box{text-align:center;padding:60px 0;color:var(--ink-3);font-size:13px;}
.spin{width:36px;height:36px;border:3px solid #d9f2e4;border-top-color:var(--green);border-radius:50%;margin:0 auto 14px;animation:rot .9s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
.err-box{background:var(--red-bg);border:1px solid #fdcdc5;border-radius:var(--radius);padding:18px 14px;text-align:center;font-size:13px;color:#cb272d;}
.err-box .btn-sub{margin-top:12px;width:auto;padding:8px 26px;color:var(--red);border-color:var(--red);}
.err-box.warn{background:var(--amber-bg);border-color:#ffe0a3;color:#ad6800;}

/* ===== 语库页 ===== */
.lib-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;}
.lib-item .txt{flex:1;font-size:13.5px;word-break:break-word;}
.lib-item .tag{font-size:10px;background:var(--green-bg);color:var(--green-dark);padding:1px 7px;border-radius:4px;margin-top:4px;display:inline-block;}
.lib-item .del{color:var(--ink-3);font-size:16px;cursor:pointer;padding:0 4px;flex-shrink:0;}
.empty-tip{text-align:center;color:var(--ink-3);font-size:13px;padding:36px 0;}
.profile-box{background:var(--green-bg);border:1px solid #b7ebc6;border-radius:var(--radius);padding:12px 14px;font-size:12.5px;color:var(--ink-2);white-space:pre-line;}

/* ===== 历史页 ===== */
.his-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;}
.his-item .hm{font-size:11px;color:var(--ink-3);margin-bottom:6px;display:flex;justify-content:space-between;}
.his-item .hc{font-size:13.5px;padding:6px 0;border-bottom:1px dashed #f0f0f0;cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
.his-item .hc:last-child{border-bottom:none;}
.his-item .hc .cp{color:var(--ink-3);font-size:11px;flex-shrink:0;}

/* ===== 弹层 ===== */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.mask .sheet{background:#fff;width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-height:82vh;overflow-y:auto;}
.mask .sheet h3{font-size:16px;margin-bottom:12px;}
.mask .sheet .row{margin-bottom:14px;}
.mask .sheet label{font-size:13px;color:var(--ink-2);display:block;margin-bottom:5px;font-weight:600;}
.mask .sheet input[type=text],.mask .sheet input[type=password]{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fafbfc;outline:none;}
.mask .sheet .hint{font-size:12px;color:var(--ink-3);margin-top:5px;}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.sheet-actions .btn-main{flex:1;}
.sheet-actions .btn-sub{flex:1;}

.guide{font-size:13px;color:var(--ink-2);}
.guide ol{margin-left:18px;}
.guide li{margin:6px 0;}
.guide b{color:var(--ink);}
.guide .step-img{background:#f2f3f5;border-radius:8px;padding:8px 12px;font-size:12px;color:var(--ink-3);margin:4px 0 8px;}

/* toast */
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;font-size:13px;
  padding:9px 20px;border-radius:20px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:200;max-width:80%;text-align:center;}
#toast.show{opacity:1;}

/* 预览导入 */
.import-item{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed #f0f0f0;font-size:13.5px;}
.import-item input{margin-top:6px;flex-shrink:0;}

.stat-row{display:flex;gap:10px;margin-bottom:12px;}
.stat{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;}
.stat b{font-size:18px;color:var(--green-dark);display:block;}
.stat span{font-size:11px;color:var(--ink-3);}