:root{--brand:#3b82f6;--muted:#667085;--card:#ffffff;--line:#eef0f3;--pill:#f1f5ff;--row-h:72px;--col-w:110px;--radius:14px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f6f8fb;color:#0f172a;font:15px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial}
button{border:0;border-radius:10px;background:#111827;color:#fff;padding:8px 12px;cursor:pointer}
button.ghost{background:#eceff3;color:#111827} button.primary{background:var(--brand)}
input,select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;outline:none}
.small{font-size:12px;color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wrap{max-width:1200px;margin:18px auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px}


.header{ display: flex; flex-direction: column; gap: 10px; }
.header .left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.auth-group { display: flex; gap: 8px; align-items: center; }
#btnUser { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 语言切换 */
.lang-switch{ position: relative; }
.lang-menu{ position:absolute; right:0; top:100%; margin-top:6px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; display:none; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:1000; }
.lang-menu[aria-hidden="false"]{ display:block; }
.lang-menu > button{ display:block; width:100%; text-align:left; background:#fff; color:#111827; padding:6px 10px; border-radius:8px; }
.lang-menu > button:hover{ background:#f5f7fb; }

#layout{display:grid;grid-template-columns: 340px 1fr; gap:14px; align-items:start}
@media (min-width: 861px){
  #leftWrap{
    max-height: calc(var(--row-h) * 4 + 24px);
    overflow-y: auto;
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 6px; 
  }
}

.item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:#fff;height:var(--row-h);gap:8px;margin-bottom:8px;cursor:grab}
.item:active { cursor: grabbing; }
.item.active{outline:2px solid var(--brand)} 
.item.dragging{opacity:.7; outline:2px dashed var(--brand)}
.item.dragover{border-color:#a5b4fc}

.item > div:first-child { min-width: 0; }
.item-line-1 { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.item-line-1 > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.item-line-1 .item-number { margin-left: auto; flex-shrink: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.item-line-2 { font-size: 12px; color: var(--muted); margin-top: 2px; }
.item-line-3 { font-size: 12px; margin-top: 2px; }

#gridHead{display:grid;gap:8px;margin-bottom:8px}
#grid{display:grid;gap:8px}
.cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px; position: relative;}
.nowrap{white-space:nowrap}
.badge{display:inline-block;padding:6px 10px;border-radius:10px;background:#eef5ff;color:#0f172a;border:1px solid #dbe8ff}
.badge.cancel{background:#fff6f1;border-color:#ffd8bf}
.badge.amount-segment-1 { background:#eef5ff; border-color:#dbe8ff; } 
.badge.amount-segment-2 { background:#fffbe6; border-color:#ffe58f; } 

.cell.today-month { background-color: #eef5ff; border-color: #dbe8ff; }

#dlg,#dlgStats{position:fixed; inset:0; display:none; align-items:center; justify-content:center;background:rgba(0,0,0,.35); z-index:9999}
#panel{width:min(680px,92vw); max-height:92vh; overflow:auto;background:#fff;border-radius:14px;padding:14px; box-shadow:0 12px 32px rgba(0,0,0,.18)}
fieldset{border:1px dashed var(--line);border-radius:10px;padding:8px;margin-top:6px}
fieldset legend{font-size:12px;color:var(--muted)} .row-fields{display:flex;gap:8px;align-items:center;margin:6px 0}

.row-fields input{width:100px} 
.row-fields .m{width:60px}   
.row-fields .a{width:100px}   
.row-fields .fm{width:60px}  
.row-fields .tm{width:60px}  

.icon-btn { display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border: none; border-radius: 50%; font-size: 1.2rem; font-weight: bold; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s; }
.delete-btn { background-color: #fff0f0; color: #d93025; border: 1px solid #f5c6cb; }
.delete-btn:hover { background-color: #f8d7da; }
.add-btn { background-color: #e6f7ff; color: #1890ff; border: 1px solid #b0dfff; }
.add-btn:hover { background-color: #d9efff; }

@media (max-width: 860px){
  #layout{grid-template-columns: 1fr}
  .row-fields{flex-wrap:wrap}
  #phaseList .row-fields, #cancelList .row-fields { flex-wrap: nowrap; }
  #leftWrap { max-height: calc(var(--row-h) * 3 + 24px); overflow-y: auto; padding-top: 4px; padding-left: 4px; padding-right: 6px; }
}

#dlgAuth .auth-view { display: none; }
#dlgAuth .auth-view.active { display: block; }
.link-btn { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0; font-size: 12px; text-align: left; }

/* Loader */
.loader-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);z-index:10000}
.loader-spin{width:40px;height:40px;border:4px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}