*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
  --card-bg:rgba(255,255,255,0.08);
  --primary:linear-gradient(135deg,#667eea,#764ba2);
  --accent:linear-gradient(135deg,#f093fb,#f5576c);
  --success:linear-gradient(135deg,#43e97b,#38f9d7);
  --gold:linear-gradient(135deg,#f5af19,#f12711);
  --text:#fff;
  --text-secondary:rgba(255,255,255,0.6);
  --radius:16px;
  --radius-sm:10px;
  --radius-btn:25px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:480px;margin:0 auto;padding:20px 16px 100px}
.card{
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,0.1);
}
.btn{
  display:block;width:100%;padding:14px;border:none;border-radius:var(--radius-btn);
  font-size:16px;font-weight:600;color:#fff;cursor:pointer;
  background:var(--primary);
  box-shadow:0 4px 15px rgba(102,126,234,0.4);
  transition:all .3s ease;
  text-align:center;text-decoration:none;
}
.btn:active{transform:scale(0.97);opacity:0.9}
.btn-sm{padding:8px 16px;font-size:13px;width:auto;display:inline-block}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.3);box-shadow:none}
.btn-accent{background:var(--accent);box-shadow:0 4px 15px rgba(240,147,251,0.4)}
.btn-gold{background:var(--gold);box-shadow:0 4px 15px rgba(245,175,25,0.4)}
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.input-group input,.input-group select{
  width:100%;padding:12px 16px;border:none;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.1);color:#fff;font-size:15px;
  border-bottom:2px solid rgba(255,255,255,0.2);
  transition:border-color .3s;
  outline:none;
}
.input-group input:focus{border-bottom-color:#667eea}
.input-row{display:flex;gap:10px}
.input-row .input-group{flex:1}
.input-row .btn-sm{flex-shrink:0;margin-top:22px}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;position:sticky;top:0;z-index:100;
  background:rgba(26,26,46,0.9);backdrop-filter:blur(10px);
}
.header h1{font-size:18px;font-weight:600}
.header .back{font-size:24px;cursor:pointer;color:var(--text-secondary)}
.tab-bar{
  position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;
  display:flex;background:rgba(26,26,46,0.95);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.1);padding:8px 0 env(safe-area-inset-bottom);
  z-index:100;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-secondary);font-size:11px;cursor:pointer;text-decoration:none;
  transition:color .3s;
}
.tab-item.active{color:#667eea}
.tab-item .icon{font-size:22px}
.status-badge{
  display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;
}
.status-auditing{background:rgba(245,175,25,0.2);color:#f5af19}
.status-approved{background:rgba(67,233,123,0.2);color:#43e97b}
.status-rejected{background:rgba(245,87,108,0.2);color:#f5576c}
.status-repaying{background:rgba(102,126,234,0.2);color:#667eea}
.status-cleared{background:rgba(56,249,215,0.2);color:#38f9d7}
.amount-large{font-size:36px;font-weight:700;background:var(--gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.amount-label{font-size:12px;color:var(--text-secondary)}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.text-center{text-align:center}
.text-secondary{color:var(--text-secondary);font-size:13px}
.tag{
  display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;
  background:rgba(255,255,255,0.1);cursor:pointer;transition:all .3s;
  margin:4px;
}
.tag.selected{background:var(--primary)}
.toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.8);color:#fff;padding:12px 24px;
  border-radius:8px;font-size:14px;z-index:9999;pointer-events:none;
}
.loading{text-align:center;padding:40px;color:var(--text-secondary)}
.empty{text-align:center;padding:60px 20px;color:var(--text-secondary)}
.empty .icon{font-size:48px;margin-bottom:12px}