/* ===== base ===== */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;
  background:linear-gradient(160deg,#f0f9ff 0%,#ecfeff 40%,#f0fdf4 100%);
  min-height:100vh;display:flex;justify-content:center;
  padding:24px 12px;
}

#app{
  width:100%;max-width:560px;
}

/* ===== header ===== */
.header{
  padding:20px 20px 16px;text-align:center;
  background:#fff;border-radius:20px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04);
}
.header .top-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.header .back-link{
  font-size:13px;color:#0d9488;text-decoration:none;cursor:pointer;
}
.header .back-link:hover{text-decoration:underline}
.header .user-name{font-size:12px;color:#94a3b8}
.header h2{font-size:18px;font-weight:700;color:#0f766e}
.header p{font-size:12px;color:#94a3b8;margin-top:4px}

/* ===== card ===== */
.card{
  background:#fff;border-radius:20px;margin-top:14px;
  padding:8px 20px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04);
}

/* ===== info table ===== */
.info-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid #f1f5f9;
}
.info-row:last-child{border-bottom:none}
.info-label{
  width:72px;flex-shrink:0;font-size:13px;color:#64748b;font-weight:500;
}
.info-value{
  flex:1;font-size:13.5px;color:#334155;line-height:1.6;
  word-break:break-word;cursor:pointer;min-width:0;
  padding:6px 10px;border-radius:8px;transition:background .15s;
}
.info-value:hover{background:#f0fdfa}
.info-value.empty{color:#cbd5e1;font-size:12.5px}
.info-value.empty:hover{color:#94a3b8}

.row-actions{display:flex;gap:6px;flex-shrink:0}
.edit-btn,.del-btn{
  padding:4px 10px;border-radius:8px;font-size:12px;cursor:pointer;
  border:1px solid #e2e8f0;background:#fff;transition:all .15s;
}
.edit-btn{color:#0d9488}
.edit-btn:hover{background:#e6f7f5}
.del-btn{color:#ef4444}
.del-btn:hover{background:#fee2e2}

/* ===== edit mode ===== */
.info-row.editing{background:#f8fdfe;margin:0 -20px;padding:13px 20px}
.edit-area{flex:1;min-width:0}
.edit-area textarea{
  width:100%;padding:10px 14px;border:1px solid #d1e7e0;
  border-radius:10px;font-size:13.5px;color:#334155;
  outline:none;background:#fff;resize:vertical;
  font-family:inherit;transition:border-color .2s;
}
.edit-area textarea:focus{border-color:#5eead4}
.edit-select{
  width:100%;padding:10px 14px;border:1px solid #d1e7e0;
  border-radius:10px;font-size:13.5px;color:#334155;
  outline:none;background:#fff;cursor:pointer;
  font-family:inherit;transition:border-color .2s;
}
.edit-select:focus{border-color:#5eead4}
.save-status{
  font-size:11px;color:#94a3b8;text-align:right;margin-top:6px;
  min-height:14px;
}
.save-status.saving{color:#f59e0b}
.save-status.saved{color:#10b981}
.save-status.error{color:#ef4444}
.save-status.empty{color:#ef4444}

/* ===== toast ===== */
.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  padding:10px 24px;border-radius:10px;font-size:13px;z-index:999;
  transition:all .3s;pointer-events:none;
}
.toast.success{background:#d1fae5;color:#065f46}
.toast.error{background:#fee2e2;color:#991b1b}