/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--primary);height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;color:#fff;font-size:var(--fs-title)
}
.header-left{display:flex;align-items:center;gap:8px}
.header-back{font-size:20px;cursor:pointer;padding:4px;line-height:1}
.header-title{font-weight:500}
.header-user{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);cursor:pointer}
/* ===== Page Wrap ===== */
.page-wrap{
  max-width:480px;margin:0 auto;min-height:100vh;
  padding-top:44px;padding-bottom:calc(80px + var(--safe-bottom));
  background:var(--bg)
}
.page-wrap.no-bottom{padding-bottom:calc(20px + var(--safe-bottom))}
/* ===== Form ===== */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.form-input{
  width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius);
  padding:0 12px;font-size:var(--fs-body);color:var(--text);
  background:var(--card);outline:none;transition:border-color .2s
}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,119,255,.08)}
.form-textarea{height:80px;padding:10px 12px;resize:none}
.form-select{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px}
.form-code-row{display:flex;gap:8px}
.form-code-row .form-input{flex:1}
.form-code-btn{
  width:100px;height:40px;border:1px solid var(--primary);border-radius:var(--radius);
  background:var(--card);color:var(--primary);font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;transition:all .2s
}
.form-code-btn:active{background:var(--primary-light)}
.form-code-btn.disabled{color:var(--text-light);border-color:var(--border);pointer-events:none}
/* ===== Button ===== */
.btn{
  display:flex;align-items:center;justify-content:center;
  height:40px;border-radius:var(--radius);border:none;
  font-size:var(--fs-body);font-weight:500;cursor:pointer;
  transition:all .2s;width:100%;
  -webkit-user-select:none;user-select:none
}
.btn:active{opacity:.85}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:active{background:var(--primary-dark)}
.btn-outline{background:var(--card);border:1px solid var(--primary);color:var(--primary)}
.btn-outline:active{background:var(--primary-light)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{height:34px;font-size:var(--fs-sm);width:auto;padding:0 16px}
.btn-lg{height:46px;font-size:var(--fs-lg)}
.btn-block{width:100%}
/* ===== Card ===== */
.card{
  background:var(--card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px
}
.card:active{background:#fafafa}
/* ===== Tag ===== */
.tag{
  display:inline-flex;align-items:center;height:22px;
  padding:0 8px;border-radius:var(--radius-sm);
  font-size:var(--fs-xs);font-weight:500
}
.tag-primary{background:var(--primary-light);color:var(--primary)}
.tag-success{background:#f6ffed;color:var(--success);border:1px solid #b7eb8f}
.tag-warning{background:#fffbe6;color:#d48806;border:1px solid #ffe58f}
.tag-danger{background:#fff2f0;color:#cf1322;border:1px solid #ffa39e}
.tag-default{background:var(--bg);color:var(--text-secondary);border:1px solid var(--border)}
.tag-coming{background:var(--border-light);color:var(--text-light);font-size:10px;height:18px;padding:0 6px;border:none}
/* ===== Empty State ===== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 32px;text-align:center
}
.empty-icon{font-size:56px;margin-bottom:16px;opacity:.5}
.empty-title{font-size:var(--fs-lg);color:var(--text);margin-bottom:8px}
.empty-desc{font-size:var(--fs-sm);color:var(--text-light);margin-bottom:24px;line-height:1.6}
/* ===== Toast ===== */
.toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.75);color:#fff;padding:12px 20px;
  border-radius:var(--radius);font-size:var(--fs-sm);z-index:999;
  pointer-events:none;opacity:0;transition:opacity .3s;max-width:280px;text-align:center
}
.toast.show{opacity:1}
/* ===== Loading ===== */
.loading-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.6);
  display:none;align-items:center;justify-content:center;z-index:998
}
.loading-overlay.show{display:flex}
.loading-spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== Bottom Bar ===== */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  padding:12px 16px calc(12px + var(--safe-bottom));
  background:var(--card);border-top:1px solid var(--border-light);
  z-index:90
}
.bottom-bar .page-wrap-inner{max-width:480px;margin:0 auto}
/* ===== Modal ===== */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);
  display:none;align-items:center;justify-content:center;z-index:200;
  padding:32px
}
.modal-overlay.show{display:flex}
.modal-box{background:var(--card);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:360px}
.modal-title{font-size:var(--fs-title);font-weight:600;margin-bottom:12px}
.modal-body{font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:20px;line-height:1.6}
.modal-actions{display:flex;gap:8px}
/* ===== hide ===== */
.hide{display:none}