body { font-family: -apple-system, sans-serif; max-width: 700px; margin: 20px auto; padding: 0 12px; }
h1 { font-size: 20px; }
h2 { font-size: 16px; margin-top: 24px; }
#setup { margin-bottom: 16px; }
#setup input { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 8px; }
.summary { display: flex; gap: 12px; margin-bottom: 16px; }
.summary div { flex: 1; padding: 12px; border-radius: 8px; text-align: center; }
.income { background: #e6f4ea; color: #1e7e34; }
.expense { background: #fdecea; color: #c62828; }
table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
th, td {
  padding: 8px 6px; text-align: left; border-bottom: 1px solid #eee;
  word-wrap: break-word; overflow-wrap: break-word;
}
.amount-expense { color: #c62828; }
.amount-income { color: #1e7e34; }
button { padding: 8px 14px; border: none; border-radius: 6px; background: #333; color: white; cursor: pointer; }
#resetKey { background: #999; font-size: 12px; padding: 4px 8px; }
#manualForm { background: #f7f7f7; padding: 12px; border-radius: 8px; margin-bottom: 16px; box-sizing: border-box; }
#manualForm label { display: block; font-size: 13px; margin-top: 8px; margin-bottom: 4px; color: #555; }
#manualForm input, #manualForm select {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
  -webkit-appearance: none;
  display: block;
}
#manualForm button { margin-top: 12px; }
#formMessage { font-size: 13px; margin-top: 8px; }
#accountSuggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
#accountSuggestions button {
  background: #e0e0e0; color: #333; font-size: 13px; padding: 5px 10px;
}

#queueScreen { display: none; }
#queueBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#queueStatus { font-size: 13px; color: #555; }
#queueExitBtn { background: #999; font-size: 12px; padding: 4px 10px; }

#queueInfo { background: #f7f7f7; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
#qiTopRow { display: flex; justify-content: space-between; align-items: baseline; }
#qiAccount { font-size: 12px; color: #888; }
#qiDate { font-size: 13px; color: #555; margin-top: 2px; }
#qiDescBox { height: 44px; overflow-y: auto; margin-top: 6px; font-size: 13px; }

#queueForm label { display: block; font-size: 13px; margin-top: 8px; margin-bottom: 4px; color: #555; }
#queueForm select, #queueForm input {
  width: 100%; max-width: 100%; padding: 8px; box-sizing: border-box;
  border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none; display: block;
}
#categorySuggestions, #projectSuggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
#categorySuggestions button, #projectSuggestions button {
  background: #e0e0e0; color: #333; font-size: 13px; padding: 5px 10px;
}
#queueCostTypeRow { visibility: hidden; }

#queueNav { display: flex; gap: 6px; margin-top: 16px; }
#queueNav button { flex: 1; font-size: 12px; padding: 8px 4px; }
#queueSaveBtn { background: #1e7e34; }
#queueSkipBtn { background: #999; }

#queueMessage { font-size: 13px; margin-top: 8px; color: #c62828; }
#queueDoneMsg { display: none; text-align: center; padding: 24px 0; color: #555; }

#labelPromptOverlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  z-index: 1000;
}
#labelPromptBox {
  background: white; border-radius: 8px; padding: 16px;
  width: 300px; max-width: 90%; box-sizing: border-box;
}
#labelPromptBox p { margin: 0 0 6px; font-size: 14px; }
#labelPromptBox .sub { font-size: 13px; color: #777; margin-bottom: 14px; }
#labelPromptCheckboxRow {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #555; margin-bottom: 14px;
}
#labelPromptCheckboxRow input { width: auto; }
#labelPromptButtons { display: flex; gap: 8px; }
#labelPromptButtons button { flex: 1; }
#labelPromptLaterBtn { background: #999; }

#categoryScreen { display: none; }
#categoryBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.categoryRow { background: #f7f7f7; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.categoryRow .catName { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.categoryRow select {
  width: 100%; padding: 6px; box-sizing: border-box; margin-bottom: 6px;
  border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none;
}
.categoryRow .saveRowBtn { width: 100%; font-size: 13px; padding: 6px; }
.categoryRow .savedTag { font-size: 12px; color: #1e7e34; font-weight: normal; margin-left: 6px; }

.categoryRow { padding: 0; }
.categoryRowHeader { display: flex; justify-content: space-between; align-items: center; padding: 12px; cursor: pointer; }
.categoryRow:not(:last-child) { margin-bottom: 8px; }
.categoryPanel { padding: 0 12px 12px; }
.tagDone { font-size: 12px; color: #1e7e34; }
.tagPending { font-size: 12px; color: #999; }

.runwayText { font-size: 18px; font-weight: bold; }
.runwayNote { font-size: 12px; color: #999; margin-top: 4px; }

/* Hero card: Runway (nổi bật) + Tổng số dư (nhẹ hơn) */
.heroCard { background: white; border: 1px solid #eee; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-sizing: border-box; }
.heroLabel { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #888; text-transform: uppercase; }
.heroRunwayTag {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: 8px; line-height: 1.4; background: #fdecea; color: #c62828;
}
.heroRunwayValue { font-size: 38px; font-weight: 800; margin-top: 8px; line-height: 1; }
.heroDivider { height: 1px; background: #eee; margin: 14px 0; }
.heroBalanceValue { font-size: 20px; font-weight: 700; color: #444; margin-top: 4px; }
.heroBalanceSub { font-size: 12.5px; color: #888; margin-top: 2px; }

#searchScreen { display: none; }
#searchBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#searchForm label { display: block; font-size: 13px; margin-top: 8px; margin-bottom: 4px; color: #555; }
#searchForm input, #searchForm select {
  width: 100%; max-width: 100%; padding: 8px; box-sizing: border-box;
  border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none; display: block;
}
#searchForm button { margin-top: 12px; margin-bottom: 16px; }
.iconTextBtn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.searchResultRow { padding: 0; background: #f7f7f7; border-radius: 8px; margin-bottom: 8px; }
.searchResultHeader { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; gap: 8px; }
.searchResultInfo { flex: 1; min-width: 0; }
.searchResultDate { font-size: 12px; color: #888; }
.searchResultDesc { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchResultAmount { font-size: 14px; font-weight: bold; white-space: nowrap; }
.searchResultTags { padding: 0 12px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.searchResultTag { font-size: 11px; background: #e0e0e0; color: #555; padding: 2px 8px; border-radius: 10px; }

#actionButtons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
#actionButtons button {
  position: relative; margin: 0; background: white; color: #333; border: 1px solid #eee;
  border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column;
  align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25;
}
.actionBadge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #c62828; color: white; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.actionBadge[hidden] { display: none; }

#futureBalanceBox input[type="date"] {
  padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px;
  -webkit-appearance: none;
}
#futureBalanceBox #futureBalanceResult { margin-top: 10px; }
#futureBalanceBox .runwayText { font-size: 16px; font-weight: bold; }

#confirmationBox { margin-top: 10px; }
.confirmationRow {
  background: white; border-radius: 6px; padding: 10px; margin-top: 8px;
  font-size: 13px; color: #333;
}
.confirmationButtons { display: flex; gap: 8px; margin-top: 8px; }
.confirmationButtons button { flex: 1; font-size: 12px; padding: 6px 4px; }
.confirmationButtons .inactiveBtn { background: #999; }

#profitBox, #debtSummaryBox, #fixedVariableBox, #projectEconomicsBox, #cashflowProfitBox, #cashReconciliationBox, #futureBalanceBox { padding: 16px; border-radius: 12px; margin-bottom: 16px; background: #f7f7f7; box-sizing: border-box; }

#reportsScreen { display: none; }
#reportsBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.groupHeader { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: #555; text-transform: uppercase; margin: 20px 0 10px; }
.groupHeader:first-of-type { margin-top: 0; }
.futureRow { display: flex; gap: 8px; align-items: center; }
.futureRow input[type="date"] { flex: 1; }
#debtSummaryBox .debtBorrowed { color: #c62828; }
#debtSummaryBox .debtLent { color: #1e7e34; }

/* Nhãn tiêu đề nhỏ, dùng chung cho các card đã chuẩn hoá (Nợ & cho vay, Cơ cấu chi tiêu) */
.cardLabel { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #888; text-transform: uppercase; }

/* 2 cực đối xứng trong 1 card (Đang nợ|Đang cho vay, Bắt buộc|Tự chọn) */
.pairedStatRow { display: flex; gap: 12px; margin-top: 10px; }
.pairedStatCol { flex: 1; min-width: 0; }
.pairedStatCol.pairedStatRight { text-align: right; }
.pairedStatSub { font-size: 12.5px; color: #888; line-height: 1.4; }
.pairedStatValue { font-size: 18px; font-weight: 700; margin-top: 2px; }
.pairedStatPct { font-size: 12.5px; font-weight: 600; color: #888; }
.pairedStatDivider { width: 1px; background: #e5e5e5; flex-shrink: 0; }
.profitValue { font-size: 22px; font-weight: 700; margin-top: 4px; }
.neutralAmber { color: #8a6738; }
.neutralSlate { color: #3d5a80; }

.debtRowBalance.debtBorrowed { color: #c62828; }
.debtRowBalance.debtLent { color: #1e7e34; }
.debtRowBalance.debtNegative { color: #e65100; font-weight: 600; }

#debtScreen { display: none; }
#debtBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#newDebtBtn { width: 100%; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
#newDebtForm { background: #f7f7f7; padding: 12px; border-radius: 8px; margin-bottom: 16px; box-sizing: border-box; }
#newDebtForm label { display: block; font-size: 13px; margin-top: 8px; margin-bottom: 4px; color: #555; }
#newDebtForm input, #newDebtForm select {
  width: 100%; max-width: 100%; padding: 8px; box-sizing: border-box;
  border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none; display: block;
}
#newDebtForm button { margin-top: 12px; }
#newDebtMessage { font-size: 13px; margin-top: 8px; }

.debtRow { padding: 0; background: #f7f7f7; border-radius: 8px; margin-bottom: 8px; }
.debtRowHeader { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; }
.debtRowHeaderMain { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.debtRowChevron { flex-shrink: 0; color: #bbb; transition: transform 0.15s ease; }
.debtRowHeader.debtRowOpen .debtRowChevron { transform: rotate(90deg); color: #999; }
.debtRowName { font-size: 14px; font-weight: bold; }
.debtRowBalance { font-size: 14px; font-weight: bold; }
.debtRowSub { font-size: 12px; color: #888; padding: 0 12px 12px; margin-top: -8px; }
.debtPanel { padding: 0 12px 12px; display: none; }
.debtPanel label { display: block; font-size: 13px; margin-top: 8px; margin-bottom: 4px; color: #555; }
.debtPanel input, .debtPanel select {
  width: 100%; max-width: 100%; padding: 8px; box-sizing: border-box;
  border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none; display: block;
}
.debtPanel button { margin-top: 8px; width: 100%; }
.debtPanel .debtAdjustMsg { font-size: 12px; margin-top: 6px; }
.debtAddAmountSection { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0; }
.debtPanel .debtAddAmountMsg { font-size: 12px; margin-top: 6px; }

#queueDebtRow { display: flex; gap: 8px; align-items: center; }
#queueDebtRow select { flex: 1; }
#queueDebtClearBtn {
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  background: transparent; color: #c62828; border: 1px solid #c62828;
  display: flex; align-items: center; justify-content: center;
}

#queueDeleteRow { border-top: 1px solid #eee; margin-top: 16px; padding-top: 12px; }
#queueDeleteBtn { width: 100%; background: transparent; color: #c62828; border: 1px solid #c62828; }
#queueDeleteNote { font-size: 12px; color: #999; text-align: center; margin-top: 6px; }

.debtSplitInterestBtn { background: #555; }
.debtSplitInterestPreview { margin-top: 8px; }
.debtSplitInterestNote { font-size: 12px; color: #666; margin-bottom: 6px; }
.debtSplitInterestRow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 6px; font-size: 13px;
}
.debtSplitInterestRow span { flex-shrink: 0; color: #444; }
.debtSplitInterestInput {
  width: 100px !important; padding: 6px !important; text-align: right;
  border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
}
.debtSplitInterestMsg { font-size: 12px; margin-top: 6px; }

.addModeToggle { display: flex; gap: 8px; margin-top: 8px; }
.addModeBtn {
  flex: 1; margin-top: 0 !important; padding: 10px; font-size: 13px;
  border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #333;
}
.addModeBtn.active { background: #333; color: #fff; border-color: #333; }
.addModeSectionLabel { font-size: 12px; color: #888; margin: 10px 0 4px; }

.metricCardsRow { display: flex; gap: 12px; margin-bottom: 8px; }
.metricCard { flex: 1; padding: 14px; border-radius: 8px; background: #f7f7f7; }
.metricCard .metricLabel { font-size: 11px; color: #888; margin-bottom: 6px; line-height: 1.4; }
.metricCard .metricValue { font-size: 20px; font-weight: bold; }

.projectRow { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.projectRow .projectName { font-size: 14px; font-weight: bold; color: #333; }
.projectRow .projectSub { font-size: 12px; color: #888; margin-top: 2px; }
.projectRow .projectProfit { font-size: 16px; font-weight: bold; white-space: nowrap; }

.periodDetailToggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.periodDetailToggle select { padding: 6px; border-radius: 6px; border: 1px solid #ccc; font-size: 13px; }
.periodDetailToggle button { font-size: 12px; padding: 6px 12px; background: #555; }

.periodRow { background: white; border-radius: 6px; padding: 10px 12px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.periodRow .periodLabel { font-size: 13px; color: #333; }
.periodRow .partialTag { font-size: 11px; color: #b8860b; margin-left: 4px; }
.periodRow .periodValues { text-align: right; font-size: 12px; white-space: nowrap; }
.periodRow .periodValues span { display: block; }

.pctBarWrap { background: #eee; border-radius: 999px; height: 6px; overflow: hidden; display: flex; margin: 10px 0 0; }
.pctBarFixed { background: #8a6738; height: 100%; }
.pctBarVariable { background: #3d5a80; height: 100%; }

.projectedNote { font-size: 11px; color: #999; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; line-height: 1.5; }

#cashReconciliationBox input { width: 100%; max-width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; -webkit-appearance: none; margin-bottom: 8px; }
#cashReconciliationBox button { width: 100%; margin-top: 6px; }
.reconDiffBox { padding: 10px; border-radius: 6px; margin-top: 8px; background: white; }
.reconDiffAmount { font-size: 18px; font-weight: bold; }
.reconSuggestion { font-size: 12px; color: #666; margin-top: 4px; }

.runwayCritical { color: #c62828; }
.runwayWarning { color: #b8860b; }
.runwayGood { color: #1e7e34; }

.reconThieuThap { color: #f0a030; }
.reconThieuTrung { color: #e67300; }
.reconThieuCao { color: #c62828; }
.reconDuThap { color: #7fb3e8; }
.reconDuTrung { color: #3a7bd5; }
.reconDuCao { color: #6a3fa0; }
.reconKhop { color: #1e7e34; }

/* Budget jars (Hướng 1&4 + 5 + 3) */
.jarCard { background: #f7f7f7; border-radius: 8px; padding: 14px; margin-top: 10px; }
.jarCardHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.jarCardTitle { font-size: 14px; font-weight: bold; color: #333; }
.jarCardCategories { font-size: 11px; color: #888; margin-bottom: 6px; }
.jarBarWrap { background: #eee; border-radius: 8px; height: 14px; overflow: hidden; margin: 8px 0; }
.jarBarFill { height: 100%; }
.jarBarFillGood { background: #1e7e34; }
.jarBarFillWarning { background: #b8860b; }
.jarBarFillCritical { background: #c62828; }
.jarCardMeta { font-size: 12px; color: #666; display: flex; justify-content: space-between; }
.jarCardActions { margin-top: 8px; display: flex; gap: 8px; }
.jarCardActions button {
  font-size: 11px; padding: 4px 8px 4px 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/></svg>");
  background-repeat: no-repeat; background-position: 7px center; background-size: 12px 12px;
}
.jarRolloverIcon { vertical-align: -2px; margin-left: 2px; color: #888; }
.jarPrimaryBtn {
  padding-left: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 12px 12px;
}
.jarRunwayBadge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #e8e8e8; color: #666; margin-left: 6px; }
.jarForm { background: white; border-radius: 8px; padding: 12px; margin-top: 10px; }
.jarForm label { display: block; font-size: 12px; color: #666; margin-top: 8px; }
.jarForm input[type="text"], .jarForm input[type="number"], .jarForm select { width: 100%; padding: 6px; margin-top: 2px; box-sizing: border-box; }
.jarCategoryChecks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jarCategoryChecks label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: #f0f0f0; padding: 3px 8px; border-radius: 12px; margin-top: 0; }
.jarCategoryChecks input { width: auto; margin: 0; }
.jarFormCheckRow { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.jarFormCheckRow input { width: auto; }

/* Budget jars screen + tabs */
#budgetJarsScreen { display: none; }
#budgetJarsBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#budgetJarsTabs { display: flex; gap: 6px; margin-bottom: 10px; }
.jarTabBtn { flex: 1; padding: 8px; font-size: 12px; background: #eee; color: #666; border: none; border-radius: 6px; }
.jarTabBtn.jarTabActive { background: #333; color: white; }

.txnRow { background: white; border: 1px solid #e5e5e5; border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.txnRowLabel { font-size: 13px; color: #333; margin-bottom: 6px; word-break: break-word; }
.txnRowValues { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.txnRowValues span { font-size: 13px; font-weight: bold; }

/* Giao dịch gần đây (dashboard) */
.recentTxRow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.recentTxRow:last-child { border-bottom: none; }
.recentTxIcon { width: 28px; height: 28px; border-radius: 999px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recentTxInfo { flex: 1; min-width: 0; }
.recentTxDesc { font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recentTxSub { font-size: 11.5px; color: #999; margin-top: 1px; }
.recentTxAmount { font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
#viewAllTxBtn {
  width: 100%; background: transparent; color: #333; border: none; border-top: 1px solid #eee;
  border-radius: 0; margin-top: 4px; padding-top: 12px; padding-bottom: 4px; font-size: 12.5px; font-weight: 700;
}

#utilityRow { display: flex; gap: 8px; margin: 20px 0 60px; }
#utilityRow button { background: #999; font-size: 12px; padding: 6px 10px; }

/* Nút nổi thêm giao dịch nhanh + sheet nhập */
#quickAddFab {
  display: none; position: fixed; right: 20px; bottom: 24px; width: 54px; height: 54px; border-radius: 999px;
  background: #333; box-shadow: 0 8px 18px rgba(0,0,0,0.28);
  align-items: center; justify-content: center; cursor: pointer; z-index: 40;
}
#quickAddOverlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  align-items: flex-end; justify-content: center; z-index: 50;
}
#quickAddOverlay.open { display: flex; }
#quickAddSheetInner {
  background: white; width: 100%; max-width: 700px; margin: 0 auto; border-radius: 16px 16px 0 0;
  padding: 14px 16px 24px; max-height: 85vh; overflow-y: auto; box-sizing: border-box;
}
#quickAddSheetHandle { width: 36px; height: 4px; background: #ddd; border-radius: 999px; margin: 2px auto 12px; }
#quickAddSheetHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
#quickAddSheetHeader h2 { margin-top: 0; }
#quickAddCloseBtn { width: 28px; height: 28px; padding: 0; border-radius: 999px; background: #f0f0f0; color: #333; font-size: 13px; line-height: 1; }
#quickAddSheetInner #manualForm { margin-bottom: 0; }