/* ===== 情侣奖惩时间轴 ===== */
:root{
  --rose:#e64980; --rose-soft:#ff6b9d; --ink:#5a2c40; --muted:#a98;
  --bg:#fff5f8; --card:#ffffff; --line:#ffe0ec;
  --green:#2e9e57; --amber:#c8881f; --violet:#7c4dff;
}
.ledger-page{padding:0 0 60px}
.lj-app{padding:24px clamp(20px,4vw,64px) 0}
.muted{color:var(--muted)}
.small{font-size:.78rem}

/* 全宽通栏：与主页一致的视觉 */
.lj-section{position:relative;padding:36px 0 12px}
.lj-band-white{background:#fff}
.lj-band-tint{background:linear-gradient(180deg,#fff 0%,#fff5f8 55%,#fff 100%)}
.lj-sec-inner{max-width:none;margin:0}
.lj-sec-title{display:flex;align-items:center;gap:10px;font-size:clamp(1.3rem,2vw,1.6rem);color:var(--ink);margin:0 0 4px}
.lj-sec-sub{color:var(--muted);font-size:.92rem;margin:0 0 22px}

/* 两栏 / 三栏表单 */
.lj-two-col{display:flex;gap:12px;flex-wrap:wrap}
.lj-two-col label{flex:1;min-width:150px}
.lj-three-col{display:flex;gap:12px;flex-wrap:wrap}
.lj-three-col label{flex:1;min-width:120px}

/* 成员管理（我的资料） */
.lj-members{display:flex;flex-direction:column;gap:14px}
.lj-member-row{background:#fffafc;border:1px solid var(--line);border-radius:14px;padding:14px 14px 4px}
.lj-member-h{font-weight:800;color:var(--ink);margin-bottom:8px}
.lj-init{font-weight:700;color:var(--ink)}

/* 登录 */
.lj-login{display:flex;justify-content:center;padding-top:8vh}
.lj-login-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:36px 32px;max-width:400px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(230,73,128,.12)}
.lj-login-emoji{font-size:46px}
.lj-login-card h2{margin:.3em 0 .2em;color:var(--ink)}
.lj-login-form{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px;text-align:left}
.lj-login-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink);font-weight:600}
.lj-login-form input{font-weight:400;padding:10px 12px;border:1.5px solid #ffd3e2;border-radius:12px;font-size:.95rem;background:#fffafc;font-family:inherit}
.lj-login-form input:focus{outline:none;border-color:var(--rose-soft)}
.lj-hint{font-size:.75rem;color:var(--muted);margin-top:14px;line-height:1.6}
.lj-hint b{color:var(--rose)}

/* 头部 */
.lj-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.lj-head-title h1{font-size:1.5rem;color:var(--ink);margin:0}
.lj-head-title p{display:flex;align-items:center;gap:6px}
.lj-head-title p b{color:var(--ink)}
.lj-head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* 按钮（与全站一致） */
.btn-primary,.btn-ghost,.btn-danger,.btn-reward{padding:9px 16px;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,#ff6b9d,#e64980);color:#fff;box-shadow:0 6px 16px rgba(230,73,128,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(230,73,128,.36)}
.btn-ghost{background:#fff;color:var(--rose);border-color:#ffd3e2}
.btn-ghost:hover{background:#fff0f5}
.btn-danger{background:#fff;color:#e2556b;border:1px solid #f3c2cb}
.btn-danger:hover{background:#fff0f3}
.btn-reward{background:linear-gradient(135deg,#ff6b9d,#e64980);color:#fff;box-shadow:0 6px 16px rgba(230,73,128,.28)}
.btn-reward:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(230,73,128,.36)}

/* ===== 战况：左卡 | VS（垂直居中） | 右卡 ===== */
.lj-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(16px,3vw,36px);margin-bottom:44px}
.lj-vs{display:flex;align-items:center;justify-content:center}
.lj-vs span{position:relative;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff6b9d,#e64980);color:#fff;font-weight:900;font-style:italic;font-size:2.1rem;
  box-shadow:0 14px 34px rgba(230,73,128,.38);letter-spacing:2px;
  animation:vsFloat 2.8s ease-in-out infinite}
.lj-vs span::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px dashed rgba(255,107,157,.55);animation:vsSpin 9s linear infinite}
.lj-vs span::after{content:"";position:absolute;inset:-26px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,107,157,.22),transparent 68%);animation:vsGlow 2.4s ease-in-out infinite}
@keyframes vsFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}
@keyframes vsSpin{to{transform:rotate(360deg)}}
@keyframes vsGlow{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}

/* 头像（上传图片；无图时回退 emoji）统一圆形裁切，展示尺寸受控 */
.lj-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#ffe3ec,#eef0ff);flex:0 0 auto;line-height:1;user-select:none}
.lj-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lj-avatar-xl{width:76px;height:76px;font-size:40px}
.lj-avatar-lg{width:44px;height:44px;font-size:24px}
.lj-avatar-md{width:26px;height:26px;font-size:15px;vertical-align:-6px}
.lj-avatar-sm{width:20px;height:20px;font-size:12px;vertical-align:-5px}
/* 我的资料：头像编辑区 */
.lj-avatar-edit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lj-avatar-preview{border-radius:50%;box-shadow:0 0 0 2px #ffd3e2;flex:0 0 auto}
.lj-avatar-ops{display:flex;flex-direction:column;gap:8px;min-width:0}
.lj-avatar-btns{display:flex;gap:8px;flex-wrap:wrap}

/* 战况卡 */
.lj-battle-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;
  box-shadow:0 4px 18px rgba(230,73,128,.06);transition:transform .25s,box-shadow .25s}
.lj-battle-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(230,73,128,.14)}
.lj-battle-card.is-me{box-shadow:0 0 0 2px var(--rose-soft) inset,0 4px 18px rgba(230,73,128,.06)}
.lj-battle-top{display:flex;align-items:center;gap:10px}
.lj-battle-name{font-weight:800;color:var(--ink);font-size:1.05rem}
.lj-me-tag{font-size:.7rem;background:var(--rose);color:#fff;padding:2px 8px;border-radius:999px;margin-left:auto}
.lj-score{font-size:2rem;font-weight:800;color:var(--rose);margin:10px 0 2px;line-height:1.1}
.lj-score small{font-size:.8rem;color:var(--muted);font-weight:600}
.lj-bar{height:6px;border-radius:999px;background:#ffe9f0;overflow:hidden;margin:8px 0 10px}
.lj-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff6b9d,#e64980);transition:width .5s ease}
.lj-sub{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.lj-sub b{color:var(--ink)}
.lj-sub .lj-pos b{color:var(--green)}

/* 筛选 */
.lj-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.lj-filters button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid #ffd3e2;background:#fff;color:var(--muted);font-size:.85rem;cursor:pointer;font-weight:600;font-family:inherit;transition:.15s}
.lj-filters button:hover{background:#fff0f5}
.lj-filters button.active{background:linear-gradient(135deg,#ff6b9d,#e64980);color:#fff;border-color:transparent}
.lj-fcount{font-size:.72rem;background:rgba(230,73,128,.10);color:var(--rose);border-radius:999px;padding:1px 7px;font-style:normal;font-weight:700}
.lj-filters button.active .lj-fcount{background:rgba(255,255,255,.25);color:#fff}

/* ===== 时间轴：中间纵轴，左侧小张的罚单、右侧小高的罚单 ===== */
.lj-axis{position:relative;padding:6px 0}
.lj-axis::before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:2px;
  background:linear-gradient(180deg,transparent,#ffd3e2 6%,#ffd3e2 94%,transparent)}
.lj-evt{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:24px;animation:fadeUp .35s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
.lj-evt .lj-side{display:flex;align-items:center;gap:16px;min-width:0}
.lj-evt-left .lj-side{grid-column:1;justify-content:flex-end;padding-right:42px}
.lj-evt-right .lj-side{grid-column:2;justify-content:flex-start;padding-left:42px}
.lj-evt-time{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.74rem;color:var(--muted);line-height:1.4;min-width:64px;flex:0 0 auto}
.lj-evt-time b{color:var(--ink);font-size:.92rem;font-weight:700}
.lj-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--rose-soft);box-sizing:content-box;z-index:2}
.lj-dot.is-appealing{border-color:#f0a84b}
.lj-dot.is-overturned{border-color:#c9c2c6}
.lj-dot.is-upheld{border-color:var(--rose)}
.lj-axis-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.9rem;padding:36px 0}

/* 罚单卡片：紧凑，按钮并入信息行 */
.lj-pcard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rose-soft);border-radius:16px;padding:14px 16px;flex:1 1 0;min-width:0;max-width:480px;
  box-shadow:0 4px 14px rgba(230,73,128,.07);transition:transform .25s,box-shadow .25s}
.lj-pcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(230,73,128,.14)}
.lj-pcard.is-appealing{border-color:#f5d9a8;border-left-color:#f0a84b}
.lj-pcard.is-upheld{border-left-color:var(--rose)}
.lj-pcard.is-overturned{opacity:.72;border-left-color:#c9c2c6}
.lj-pcard-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lj-chip{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;font-weight:800;padding:3px 10px;border-radius:999px}
.lj-chip.fine{background:#fff0f5;color:var(--rose)}
.lj-chip.point{background:#f3efff;color:var(--violet)}
.lj-chip.reward-fine{background:#eafaf0;color:var(--green)}
.lj-chip.reward-point{background:#e7f8ec;color:var(--green)}
.lj-pcard-title{font-weight:700;color:var(--ink);margin:6px 0 0;font-size:1rem}
.lj-pcard-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.lj-pcard-who{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.lj-pcard-who b{color:var(--ink);font-weight:700}
.lj-pcard-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.lj-pcard-actions .btn-primary,.lj-pcard-actions .btn-ghost,.lj-pcard-actions .btn-danger{padding:5px 11px;font-size:.78rem;border-radius:9px}
.lj-pcard-reason{color:#6b5560;font-size:.88rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin-top:6px}
.lj-status{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:auto}
.lj-status.active{background:#e7f8ec;color:var(--green)}
.lj-status.appealing{background:#fff2dd;color:var(--amber)}
.lj-status.upheld{background:#ffe9ef;color:var(--rose)}
.lj-status.overturned{background:#f0eeef;color:#8a8386}
.lj-status.reward{background:#e7f8ec;color:var(--green)}
.lj-appeal-box{margin-top:8px;background:#fff8f0;border:1px dashed #f0c98a;border-radius:10px;padding:6px 10px;font-size:.8rem;color:#8a6a3a;line-height:1.5}
.lj-appeal-box b{color:var(--amber)}

.lj-empty{text-align:center;color:var(--muted);padding:30px 0}

/* 表单 */
.lj-form{display:flex;flex-direction:column;gap:12px}
.lj-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink);font-weight:600}
.lj-form input,.lj-form select,.lj-form textarea{padding:10px 12px;border:1.5px solid #ffd3e2;border-radius:12px;font-size:.95rem;font-weight:400;font-family:inherit;width:100%;box-sizing:border-box;background:#fffafc}
.lj-form input:focus,.lj-form select:focus,.lj-form textarea:focus{outline:none;border-color:var(--rose-soft)}
.lj-form textarea{min-height:78px;resize:vertical}
.lj-sep{border:none;border-top:1px dashed var(--line);margin:4px 0}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(60,20,40,.42);display:none;align-items:center;justify-content:center;z-index:200;padding:18px}
.modal-mask.show{display:flex}
.modal-box{background:#fff;border-radius:18px;width:min(440px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;color:var(--ink)}
.modal-close{border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--muted)}
.modal-body{padding:18px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}

@media(max-width:860px){
  .lj-head{flex-direction:column;align-items:flex-start}
  .lj-top{grid-template-columns:1fr;gap:14px;margin-bottom:32px}
  .lj-vs{padding:4px 0}
  .lj-vs span{width:76px;height:76px;font-size:1.6rem}
  .lj-vs span::before{inset:-9px}
  .lj-vs span::after{inset:-18px}
  .lj-axis::before{left:20px}
  .lj-evt{grid-template-columns:1fr;margin-bottom:20px}
  .lj-evt .lj-side{flex-direction:column;align-items:flex-start;gap:6px}
  .lj-evt-left .lj-side,.lj-evt-right .lj-side{grid-column:1;justify-content:flex-start;padding-left:46px;padding-right:0}
  .lj-evt-time{flex-direction:row;align-items:baseline;gap:6px;min-width:0}
  .lj-dot{left:20px}
}

/* toast */
.lj-toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(20px);background:rgba(40,20,30,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:300}
.lj-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}