[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_446":447,"_448":449},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_115":92,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_20":-5,"_127":128,"_129":130,"_131":25,"_132":133,"_134":61,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",151,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/lib/calc.ts","latestPath","fileId","0d99166c-7e2e-11f1-beda-1607ee4eb77e","name","calc.ts","fileType","script","content","// Бизнес-логика — чистые функции, портированы из утверждённого прототипа.\n// Компоненты ничего не считают сами, только читают готовые значения отсюда.\n\nexport const CATEGORIES = [\n \"Продукты\", \"Кафе\", \"Рестораны\", \"Авто\", \"Такси\", \"Жилье\", \"Ипотека\",\n \"Связь\", \"Интернет\", \"Дети\", \"Одежда\", \"Развлечения\", \"Подписки\",\n \"Путешествия\", \"Здоровье\", \"Прочее\",\n];\n\nexport function monthKey(dateStr: string) {\n return dateStr ? dateStr.slice(0, 7) : \"—\";\n}\n\nexport function fmt(n: number, currency: string) {\n const v = Number.isFinite(n) ? n : 0;\n return `${v.toLocaleString(\"ru-RU\", { maximumFractionDigits: 0 })} ${currency}`;\n}\n\nexport function pct(n: number) {\n const v = Number.isFinite(n) ? n : 0;\n return `${v.toFixed(0)}%`;\n}\n\nexport function capitalizeFirst(s: string) {\n return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;\n}\n\nexport function sortByKey>(rows: T[], key: string | null, dir: \"asc\" | \"desc\") {\n if (!key) return rows;\n const copy = [...rows];\n copy.sort((a, b) => {\n const av = a[key], bv = b[key];\n if (typeof av === \"number\" && typeof bv === \"number\") {\n return dir === \"asc\" ? av - bv : bv - av;\n }\n const as = String(av ?? \"\").toLowerCase();\n const bs = String(bv ?? \"\").toLowerCase();\n if (as < bs) return dir === \"asc\" ? -1 : 1;\n if (as > bs) return dir === \"asc\" ? 1 : -1;\n return 0;\n });\n return copy;\n}\n\nexport const IncomeService = {\n total(incomes: any[]) {\n return incomes.reduce((s, r) => s + (Number(r.amount) || 0), 0);\n },\n};\n\nexport const ExpenseService = {\n total(expenses: any[]) {\n return expenses.reduce((s, e) => s + (Number(e.amount) || 0), 0);\n },\n byCategory(expenses: any[], category: string) {\n return expenses.filter((e) => e.category === category).reduce((s, e) => s + (Number(e.amount) || 0), 0);\n },\n distinctMonths(expenses: any[]) {\n return new Set(expenses.map((e) => monthKey(e.date)).filter((m) => m !== \"—\"));\n },\n avgMonthly(expenses: any[]) {\n const total = this.total(expenses);\n const months = this.distinctMonths(expenses);\n return months.size > 0 ? total / months.size : total;\n },\n};\n\nexport const BudgetService = {\n rows(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n return categories.map((cat) => {\n const fact = ExpenseService.byCategory(expenses, cat);\n const plan = Number(budgetPlan[cat]) || 0;\n const remainder = plan - fact;\n const ratio = plan > 0 ? (fact / plan) * 100 : 0;\n return { cat, plan, fact, remainder, ratio };\n });\n },\n totals(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n const rows = this.rows(expenses, budgetPlan, categories);\n const plan = rows.reduce((s, r) => s + r.plan, 0);\n const fact = rows.reduce((s, r) => s + r.fact, 0);\n return { rows, plan, fact, remainder: plan - fact, ratio: plan > 0 ? (fact / plan) * 100 : 0 };\n },\n overBudgetCount(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n return this.rows(expenses, budgetPlan, categories).filter((r) => r.plan > 0 && r.fact > r.plan).length;\n },\n};\n\nexport const GoalService = {\n compute(goal: any) {\n const target = Number(goal.target) || 0;\n const saved = Number(goal.saved) || 0;\n const months = Number(goal.months) || 0;\n const remaining = target - saved;\n const perMonth = months > 0 ? remaining / months : 0;\n const progress = target > 0 ? (saved / target) * 100 : 0;\n return { ...goal, remaining, perMonth, progress };\n },\n totals(goals: any[]) {\n const computed = goals.map((g) => this.compute(g));\n const target = computed.reduce((s, g) => s + (Number(g.target) || 0), 0);\n const saved = computed.reduce((s, g) => s + (Number(g.saved) || 0), 0);\n return { computed, target, saved, remaining: target - saved };\n },\n};\n\nexport const CreditService = {\n totals(loans: any[]) {\n return {\n balance: loans.reduce((s, l) => s + (Number(l.balance) || 0), 0),\n payment: loans.reduce((s, l) => s + (Number(l.payment) || 0), 0),\n overpay: loans.reduce((s, l) => s + (Number(l.overpay) || 0), 0),\n };\n },\n};\n\nexport const AnalyticsService = {\n rating(totalIncome: number, free: number) {\n return totalIncome > 0 ? (free / totalIncome) * 100 : 0;\n },\n cushion(avgMonthly: number, months: number) {\n return avgMonthly * months;\n },\n};\n\n// ---------------- Инвестиции: облигации с реального каталога MOEX ----------------\n\nexport interface Bond {\n id: string;\n ticker: string;\n issuer: string;\n rating: string;\n couponRate: number;\n maturityDate: string;\n hasOffer: boolean;\n liquidity: \"low\" | \"medium\" | \"high\";\n duration: number;\n faceValue: number;\n currency: string;\n}\n\nconst RATING_ORDER = [\"AAA\", \"AA\", \"A\", \"BBB\", \"BB\", \"B\", \"—\"];\n\nexport const InvestmentService = {\n bondById(bonds: Bond[], id: string) {\n return bonds.find((b) => b.id === id);\n },\n rows(bonds: Bond[], holdings: any[]) {\n return holdings\n .map((h) => {\n const bond = this.bondById(bonds, h.bondId);\n if (!bond) return null;\n const value = (Number(h.quantity) || 0) * (Number(h.avgPrice) || 0);\n return { ...h, bond, value };\n })\n .filter(Boolean) as any[];\n },\n summary(bonds: Bond[], holdings: any[]) {\n const rows = this.rows(bonds, holdings);\n const totalValue = rows.reduce((s, r) => s + r.value, 0);\n const weightedYield = totalValue > 0\n ? rows.reduce((s, r) => s + r.bond.couponRate * r.value, 0) / totalValue\n : 0;\n const annualCoupons = rows.reduce((s, r) => s + r.value * (r.bond.couponRate / 100), 0);\n const issuers = new Set(rows.map((r) => r.bond.issuer));\n return { rows, totalValue, weightedYield, annualCoupons, issuerCount: issuers.size };\n },\n risk(bonds: Bond[], holdings: any[]) {\n const { rows, totalValue } = this.summary(bonds, holdings);\n if (rows.length === 0) return { concentration: null as any, offerShare: 0, avgDuration: 0 };\n const byIssuer: Record = {};\n rows.forEach((r) => { byIssuer[r.bond.issuer] = (byIssuer[r.bond.issuer] || 0) + r.value; });\n const maxIssuerShare = (Math.max(...Object.values(byIssuer)) / totalValue) * 100;\n const topIssuer = Object.keys(byIssuer).find((k) => (byIssuer[k] / totalValue) * 100 === maxIssuerShare);\n const offerShare = (rows.filter((r) => r.bond.hasOffer).reduce((s, r) => s + r.value, 0) / totalValue) * 100;\n const avgDuration = rows.reduce((s, r) => s + r.bond.duration * r.value, 0) / totalValue;\n return { concentration: { issuer: topIssuer, share: maxIssuerShare }, offerShare, avgDuration };\n },\n recommend(bonds: Bond[], { targetYield, capital, riskLevel }: { targetYield: number; capital: number; riskLevel: \"low\" | \"medium\" | \"high\" }) {\n const minRatingIndex = riskLevel === \"low\" ? 2 : riskLevel === \"medium\" ? 4 : 6;\n let candidates = bonds.filter((b) => RATING_ORDER.indexOf(b.rating) <= minRatingIndex || b.rating === \"—\");\n candidates = candidates.filter((b) => !b.hasOffer || riskLevel === \"high\");\n candidates = candidates.filter((b) => riskLevel !== \"low\" || b.liquidity !== \"low\");\n candidates = candidates.slice().sort((a, b) => Math.abs(a.couponRate - targetYield) - Math.abs(b.couponRate - targetYield));\n const picks = candidates.slice(0, 4);\n const perBond = picks.length > 0 ? capital / picks.length : 0;\n const expectedYield = picks.length > 0 ? picks.reduce((s, b) => s + b.couponRate, 0) / picks.length : 0;\n const withReason = picks.map((b) => {\n const reasons = [];\n reasons.push(b.rating !== \"—\" ? `рейтинг ${b.rating}` : \"рейтинг не раскрыт биржей\");\n reasons.push(b.hasOffer ? \"есть оферта — учитывай риск досрочного погашения\" : \"оферты нет\");\n reasons.push(`ликвидность ${b.liquidity === \"high\" ? \"высокая\" : b.liquidity === \"medium\" ? \"средняя\" : \"низкая\"}`);\n reasons.push(`купон ${b.couponRate}% — ${Math.abs(b.couponRate - targetYield) < 2 ? \"близко к цели\" : \"заметно отличается от цели\"}`);\n return { ...b, allocation: perBond, reason: reasons.join(\", \") };\n });\n return { picks: withReason, expectedYield };\n },\n};\n\nexport function declGoals(n: number) {\n const mod10 = n % 10, mod100 = n % 100;\n if (mod10 === 1 && mod100 !== 11) return \"цель\";\n if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100)) return \"цели\";\n return \"целей\";\n}\n\nexport function todayISO() {\n return new Date().toISOString().slice(0, 10);\n}\n\nlet uid = 1000000;\nexport function nextId() {\n uid += 1;\n return uid;\n}\n","// Бизнес-логика — чистые функции, портированы из утверждённого прототипа.\n// Компоненты ничего не считают сами, только читают готовые значения отсюда.\n\nexport const CATEGORIES = [\n \"Продукты\", \"Кафе\", \"Рестораны\", \"Авто\", \"Такси\", \"Жилье\", \"Ипотека\",\n \"Связь\", \"Интернет\", \"Дети\", \"Одежда\", \"Развлечения\", \"Подписки\",\n \"Путешествия\", \"Здоровье\", \"Прочее\",\n];\n\nexport function monthKey(dateStr: string) {\n return dateStr ? dateStr.slice(0, 7) : \"—\";\n}\n\nexport function fmt(n: number, currency: string) {\n const v = Number.isFinite(n) ? n : 0;\n return `${v.toLocaleString(\"ru-RU\", { maximumFractionDigits: 0 })} ${currency}`;\n}\n\nexport function pct(n: number) {\n const v = Number.isFinite(n) ? n : 0;\n return `${v.toFixed(0)}%`;\n}\n\nexport function capitalizeFirst(s: string) {\n return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;\n}\n\nexport function sortByKey>(rows: T[], key: string | null, dir: \"asc\" | \"desc\") {\n if (!key) return rows;\n const copy = [...rows];\n copy.sort((a, b) => {\n const av = a[key], bv = b[key];\n if (typeof av === \"number\" && typeof bv === \"number\") {\n return dir === \"asc\" ? av - bv : bv - av;\n }\n const as = String(av ?? \"\").toLowerCase();\n const bs = String(bv ?? \"\").toLowerCase();\n if (as < bs) return dir === \"asc\" ? -1 : 1;\n if (as > bs) return dir === \"asc\" ? 1 : -1;\n return 0;\n });\n return copy;\n}\n\nexport const IncomeService = {\n total(incomes: any[]) {\n return incomes.reduce((s, r) => s + (Number(r.amount) || 0), 0);\n },\n};\n\nexport const ExpenseService = {\n total(expenses: any[]) {\n return expenses.reduce((s, e) => s + (Number(e.amount) || 0), 0);\n },\n byCategory(expenses: any[], category: string) {\n return expenses.filter((e) => e.category === category).reduce((s, e) => s + (Number(e.amount) || 0), 0);\n },\n distinctMonths(expenses: any[]) {\n return new Set(expenses.map((e) => monthKey(e.date)).filter((m) => m !== \"—\"));\n },\n avgMonthly(expenses: any[]) {\n const total = this.total(expenses);\n const months = this.distinctMonths(expenses);\n return months.size > 0 ? total / months.size : total;\n },\n};\n\nexport const BudgetService = {\n rows(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n return categories.map((cat) => {\n const fact = ExpenseService.byCategory(expenses, cat);\n const plan = Number(budgetPlan[cat]) || 0;\n const remainder = plan - fact;\n const ratio = plan > 0 ? (fact / plan) * 100 : 0;\n return { cat, plan, fact, remainder, ratio };\n });\n },\n totals(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n const rows = this.rows(expenses, budgetPlan, categories);\n const plan = rows.reduce((s, r) => s + r.plan, 0);\n const fact = rows.reduce((s, r) => s + r.fact, 0);\n return { rows, plan, fact, remainder: plan - fact, ratio: plan > 0 ? (fact / plan) * 100 : 0 };\n },\n overBudgetCount(expenses: any[], budgetPlan: Record, categories: string[] = CATEGORIES) {\n return this.rows(expenses, budgetPlan, categories).filter((r) => r.plan > 0 && r.fact > r.plan).length;\n },\n};\n\nexport const GoalService = {\n compute(goal: any) {\n const target = Number(goal.target) || 0;\n const saved = Number(goal.saved) || 0;\n const months = Number(goal.months) || 0;\n const remaining = target - saved;\n const perMonth = months > 0 ? remaining / months : 0;\n const progress = target > 0 ? (saved / target) * 100 : 0;\n return { ...goal, remaining, perMonth, progress };\n },\n totals(goals: any[]) {\n const computed = goals.map((g) => this.compute(g));\n const target = computed.reduce((s, g) => s + (Number(g.target) || 0), 0);\n const saved = computed.reduce((s, g) => s + (Number(g.saved) || 0), 0);\n return { computed, target, saved, remaining: target - saved };\n },\n};\n\nexport const CreditService = {\n // Переплата считается симуляцией графика платежей: каждый месяц проценты\n // начисляются на остаток, платёж сначала гасит их, а остаток идёт на тело\n // долга. Переплата = сумма всех начисленных процентов за весь срок погашения.\n overpay(balance: number, ratePercent: number, payment: number) {\n if (balance <= 0 || payment <= 0) return 0;\n const monthlyRate = ratePercent / 100 / 12;\n if (payment <= balance * monthlyRate) return Infinity; // платёж не покрывает даже проценты — долг не гасится\n let bal = balance;\n let totalInterest = 0;\n for (let month = 0; month < 1200 && bal > 0.01; month++) {\n const interest = bal * monthlyRate;\n const pay = Math.min(payment, bal + interest);\n totalInterest += interest;\n bal -= pay - interest;\n }\n return totalInterest;\n },\n compute(loan: any) {\n const balance = Number(loan.balance) || 0;\n const rate = Number(loan.rate) || 0;\n const payment = Number(loan.payment) || 0;\n return { ...loan, overpay: this.overpay(balance, rate, payment) };\n },\n totals(loans: any[]) {\n const computed = loans.map((l) => this.compute(l));\n return {\n computed,\n balance: computed.reduce((s, l) => s + (Number(l.balance) || 0), 0),\n payment: computed.reduce((s, l) => s + (Number(l.payment) || 0), 0),\n overpay: computed.reduce((s, l) => s + (Number(l.overpay) || 0), 0),\n };\n },\n};\n\nexport const AnalyticsService = {\n rating(totalIncome: number, free: number) {\n return totalIncome > 0 ? (free / totalIncome) * 100 : 0;\n },\n cushion(avgMonthly: number, months: number) {\n return avgMonthly * months;\n },\n};\n\n// ---------------- Инвестиции: облигации с реального каталога MOEX ----------------\n\nexport interface Bond {\n id: string;\n ticker: string;\n issuer: string;\n rating: string;\n couponRate: number;\n maturityDate: string;\n hasOffer: boolean;\n liquidity: \"low\" | \"medium\" | \"high\";\n duration: number;\n faceValue: number;\n currency: string;\n}\n\nconst RATING_ORDER = [\"AAA\", \"AA\", \"A\", \"BBB\", \"BB\", \"B\", \"—\"];\n\nexport const InvestmentService = {\n bondById(bonds: Bond[], id: string) {\n return bonds.find((b) => b.id === id);\n },\n rows(bonds: Bond[], holdings: any[]) {\n return holdings\n .map((h) => {\n const bond = this.bondById(bonds, h.bondId);\n if (!bond) return null;\n const value = (Number(h.quantity) || 0) * (Number(h.avgPrice) || 0);\n return { ...h, bond, value };\n })\n .filter(Boolean) as any[];\n },\n summary(bonds: Bond[], holdings: any[]) {\n const rows = this.rows(bonds, holdings);\n const totalValue = rows.reduce((s, r) => s + r.value, 0);\n const weightedYield = totalValue > 0\n ? rows.reduce((s, r) => s + r.bond.couponRate * r.value, 0) / totalValue\n : 0;\n const annualCoupons = rows.reduce((s, r) => s + r.value * (r.bond.couponRate / 100), 0);\n const issuers = new Set(rows.map((r) => r.bond.issuer));\n return { rows, totalValue, weightedYield, annualCoupons, issuerCount: issuers.size };\n },\n risk(bonds: Bond[], holdings: any[]) {\n const { rows, totalValue } = this.summary(bonds, holdings);\n if (rows.length === 0) return { concentration: null as any, offerShare: 0, avgDuration: 0 };\n const byIssuer: Record = {};\n rows.forEach((r) => { byIssuer[r.bond.issuer] = (byIssuer[r.bond.issuer] || 0) + r.value; });\n const maxIssuerShare = (Math.max(...Object.values(byIssuer)) / totalValue) * 100;\n const topIssuer = Object.keys(byIssuer).find((k) => (byIssuer[k] / totalValue) * 100 === maxIssuerShare);\n const offerShare = (rows.filter((r) => r.bond.hasOffer).reduce((s, r) => s + r.value, 0) / totalValue) * 100;\n const avgDuration = rows.reduce((s, r) => s + r.bond.duration * r.value, 0) / totalValue;\n return { concentration: { issuer: topIssuer, share: maxIssuerShare }, offerShare, avgDuration };\n },\n recommend(bonds: Bond[], { targetYield, capital, riskLevel }: { targetYield: number; capital: number; riskLevel: \"low\" | \"medium\" | \"high\" }) {\n const minRatingIndex = riskLevel === \"low\" ? 2 : riskLevel === \"medium\" ? 4 : 6;\n let candidates = bonds.filter((b) => RATING_ORDER.indexOf(b.rating) <= minRatingIndex || b.rating === \"—\");\n candidates = candidates.filter((b) => !b.hasOffer || riskLevel === \"high\");\n candidates = candidates.filter((b) => riskLevel !== \"low\" || b.liquidity !== \"low\");\n candidates = candidates.slice().sort((a, b) => Math.abs(a.couponRate - targetYield) - Math.abs(b.couponRate - targetYield));\n const picks = candidates.slice(0, 4);\n const perBond = picks.length > 0 ? capital / picks.length : 0;\n const expectedYield = picks.length > 0 ? picks.reduce((s, b) => s + b.couponRate, 0) / picks.length : 0;\n const withReason = picks.map((b) => {\n const reasons = [];\n reasons.push(b.rating !== \"—\" ? `рейтинг ${b.rating}` : \"рейтинг не раскрыт биржей\");\n reasons.push(b.hasOffer ? \"есть оферта — учитывай риск досрочного погашения\" : \"оферты нет\");\n reasons.push(`ликвидность ${b.liquidity === \"high\" ? \"высокая\" : b.liquidity === \"medium\" ? \"средняя\" : \"низкая\"}`);\n reasons.push(`купон ${b.couponRate}% — ${Math.abs(b.couponRate - targetYield) < 2 ? \"близко к цели\" : \"заметно отличается от цели\"}`);\n return { ...b, allocation: perBond, reason: reasons.join(\", \") };\n });\n return { picks: withReason, expectedYield };\n },\n};\n\nexport function declGoals(n: number) {\n const mod10 = n % 10, mod100 = n % 100;\n if (mod10 === 1 && mod100 !== 11) return \"цель\";\n if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100)) return \"цели\";\n return \"целей\";\n}\n\nexport function todayISO() {\n return new Date().toISOString().slice(0, 10);\n}\n\nlet uid = 1000000;\nexport function nextId() {\n uid += 1;\n return uid;\n}\n","createdAt",["D",1784144402101],"branchVersion","branchId","ac24cfe3-aa4a-4a44-ac23-dfa129884367","id","57d5c0ab-460a-4be7-9d20-9cb49eb8f0f0","finsystem-pro",["D",1783886796403],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","ФинСистема — бюджет + портфель облигаций","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789574399&sig=a8d51a028376b0f18dea863670f2a5f39dc2eca62054b0c7661bee5c0457fba4","7392ed86-5030-4ce7-948e-d7a47fad19d8","pinnedFileId","019f57f0-56c5-76eb-9c36-7947eada3c8f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f57e3-4ff5-7637-8a30-e83785c0308e","tursoName","57d5c0ab460a4be79d209cb49eb8f0f0","tursoHostname","57d5c0ab460a4be79d209cb49eb8f0f0-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560070146],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_18":57,"_111":112,"_113":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"isOwned",198,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","greenpes92","handle","displayName","Иван Забавников","avatar","https://lh3.googleusercontent.com/a/ACg8ocJcdteRlJJiR797nVlMg2OC01cNcvSxYR_S-gOUIwQ2oMi6Ma0p=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":441,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":442,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":443,"_86":444,"_88":445,"_90":25},"tree",[193,197,221,222],"files",[193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222],"counts",{"_183":65,"_184":168,"_185":65,"_186":187,"_188":189},"contents",[150,151,152,153],"upstreamProject",{"_44":100,"_32":146,"_53":147,"_55":56,"_50":51,"_84":148},"upstreamBranch",{"_44":95,"_39":139,"_140":141,"_32":92,"_93":100,"_13":142,"_94":-5,"_96":-5,"_143":144,"_48":-5,"_90":25,"_50":51,"_104":145,"_66":102,"_103":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_106":145,"_114":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789574399&sig=3d6a0be010e77940e58f104bd06b986c1fe4f3a57bc9d85e134d5d62fe89a483",{"_44":178,"_32":179,"_30":180,"_156":-5,"_42":43,"_41":160,"_158":61,"_39":181,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_27":182},{"_44":172,"_32":173,"_30":174,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":175,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_27":177},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":169,"_13":65,"_34":20,"_36":170,"_24":25,"_163":-5,"_27":171},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":25,"_39":159,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_27":164},"9eda5e3d-f79d-40c0-ab78-78f2526931a5","index.ts","parentId",135,"latest",["D",1784140641802],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getCookie, setCookie, deleteCookie } from \"npm:hono/cookie\";\nimport {\n initAuthTables, createUser, findUserByEmail, verifyPassword,\n createSession, getSessionUser, deleteSession,\n} from \"./backend/auth.ts\";\nimport { initDataTable, getUserData, setUserDataKey, DATA_KEYS, type DataKey } from \"./backend/db.ts\";\nimport { getBondCatalog } from \"./backend/moex.ts\";\n\nconst app = new Hono();\n\nconst COOKIE_NAME = \"fsp_session\";\n\nlet tablesReady: Promise | null = null;\nfunction ensureTables() {\n if (!tablesReady) {\n tablesReady = (async () => {\n await initAuthTables();\n await initDataTable();\n })();\n }\n return tablesReady;\n}\napp.use(\"*\", async (c, next) => {\n await ensureTables();\n await next();\n});\n\n// ---------- static frontend ----------\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", async (c) => {\n const res = await serveFile(c.req.path);\n const headers = new Headers(res.headers);\n // Короткий и безопасный кэш для статики: ускоряет повторные загрузки страницы\n // в пределах нескольких минут, но не рискует надолго показать устаревший файл\n // во время активной разработки.\n headers.set(\"Cache-Control\", \"public, max-age=300\");\n return new Response(res.body, { status: res.status, headers });\n});\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---------- auth helpers ----------\nasync function requireUser(c: any) {\n const token = getCookie(c, COOKIE_NAME);\n const user = await getSessionUser(token);\n return user;\n}\n\nfunction publicUser(u: { id: string; email: string; tier: string }) {\n return { id: u.id, email: u.email, tier: u.tier };\n}\n\n// ---------- auth routes ----------\napp.post(\"/api/register\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const email = (body?.email ?? \"\").toString().trim();\n const password = (body?.password ?? \"\").toString();\n if (!email || !email.includes(\"@\")) return c.json({ error: \"Некорректный email\" }, 400);\n if (!password || password.length < 6) return c.json({ error: \"Пароль должен быть не короче 6 символов\" }, 400);\n const existing = await findUserByEmail(email);\n if (existing) return c.json({ error: \"Пользователь с таким email уже зарегистрирован\" }, 409);\n const user = await createUser(email, password);\n const session = await createSession(user.id);\n setCookie(c, COOKIE_NAME, session.token, {\n httpOnly: true, secure: true, sameSite: \"Lax\", path: \"/\", maxAge: 60 * 60 * 24 * 30,\n });\n return c.json({ user: publicUser(user) });\n});\n\napp.post(\"/api/login\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const email = (body?.email ?? \"\").toString().trim();\n const password = (body?.password ?? \"\").toString();\n const user = await findUserByEmail(email);\n if (!user || !(await verifyPassword(password, user.password_hash))) {\n return c.json({ error: \"Неверный email или пароль\" }, 401);\n }\n const session = await createSession(user.id);\n setCookie(c, COOKIE_NAME, session.token, {\n httpOnly: true, secure: true, sameSite: \"Lax\", path: \"/\", maxAge: 60 * 60 * 24 * 30,\n });\n return c.json({ user: publicUser(user) });\n});\n\napp.post(\"/api/logout\", async (c) => {\n const token = getCookie(c, COOKIE_NAME);\n await deleteSession(token);\n deleteCookie(c, COOKIE_NAME, { path: \"/\" });\n return c.json({ ok: true });\n});\n\napp.get(\"/api/me\", async (c) => {\n const user = await requireUser(c);\n if (!user) return c.json({ user: null }, 200);\n return c.json({ user: publicUser(user) });\n});\n\n// ---------- data routes (require auth) ----------\napp.get(\"/api/data\", async (c) => {\n const user = await requireUser(c);\n if (!user) return c.json({ error: \"Не авторизован\" }, 401);\n const data = await getUserData(user.id);\n return c.json({ data });\n});\n\napp.put(\"/api/data/:key\", async (c) => {\n const user = await requireUser(c);\n if (!user) return c.json({ error: \"Не авторизован\" }, 401);\n const key = c.req.param(\"key\") as DataKey;\n if (!DATA_KEYS.includes(key)) return c.json({ error: \"Неизвестный ключ\" }, 400);\n const value = await c.req.json().catch(() => null);\n if (value === null) return c.json({ error: \"Некорректное тело запроса\" }, 400);\n await setUserDataKey(user.id, key, value);\n return c.json({ ok: true });\n});\n\n// ---------- bonds (public catalog, cached from MOEX ISS) ----------\napp.get(\"/api/bonds\", async (c) => {\n try {\n const bonds = await getBondCatalog();\n return c.json({ bonds, source: \"moex-iss\" });\n } catch (err) {\n return c.json({ bonds: [], source: \"moex-iss\", error: String(err) }, 200);\n }\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[155],"774b67ca-8942-43db-8feb-ac9009321ab0","README.md","019f57f0-56c5-76eb-9c36-743e935a64fd",1,["D",1783886796403],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[166],"d6492da4-9220-482a-a637-97a20bfd9dfb","frontend","019f57f0-56c5-76eb-9c36-734bcf67f8b7",["D",1783886796403],"directory",[173],"7e51d2b4-be4d-427b-806b-f671fb0c1c28","backend","bff1764e-1bef-4dca-9a79-127f452c3718",["D",1783886920336],[179],"pulls","branches","forks","envVars",{"_190":65,"_192":65},"connections",{"_190":65,"_191":65},"count","unfilledCount","emptyCount",{"_44":178,"_32":179,"_30":180,"_156":-5,"_42":43,"_41":160,"_158":61,"_39":438,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_224":439,"_27":440},{"_44":431,"_32":432,"_30":433,"_156":180,"_42":43,"_41":160,"_158":25,"_39":434,"_13":65,"_34":35,"_36":435,"_24":25,"_163":-5,"_224":436,"_27":437},{"_44":423,"_32":424,"_30":425,"_156":180,"_42":43,"_41":426,"_158":61,"_39":427,"_13":260,"_34":35,"_36":428,"_24":25,"_163":-5,"_224":429,"_27":430},{"_44":415,"_32":416,"_30":417,"_156":180,"_42":43,"_41":418,"_158":61,"_39":419,"_13":168,"_34":35,"_36":420,"_24":25,"_163":-5,"_224":421,"_27":422},{"_44":172,"_32":173,"_30":174,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":412,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_224":413,"_27":414},{"_44":408,"_32":317,"_30":310,"_156":174,"_42":43,"_41":168,"_158":61,"_39":409,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_224":410,"_27":411},{"_44":400,"_32":401,"_30":402,"_156":310,"_42":43,"_41":403,"_158":25,"_39":404,"_13":297,"_34":35,"_36":405,"_24":25,"_163":-5,"_224":406,"_27":407},{"_44":392,"_32":393,"_30":394,"_156":310,"_42":43,"_41":395,"_158":25,"_39":396,"_13":65,"_34":35,"_36":397,"_24":25,"_163":-5,"_224":398,"_27":399},{"_44":383,"_32":384,"_30":385,"_156":310,"_42":43,"_41":386,"_158":61,"_39":387,"_13":388,"_34":35,"_36":389,"_24":25,"_163":-5,"_224":390,"_27":391},{"_44":375,"_32":376,"_30":377,"_156":310,"_42":43,"_41":378,"_158":61,"_39":379,"_13":168,"_34":35,"_36":380,"_24":25,"_163":-5,"_224":381,"_27":382},{"_44":367,"_32":368,"_30":369,"_156":310,"_42":43,"_41":370,"_158":61,"_39":371,"_13":260,"_34":35,"_36":372,"_24":25,"_163":-5,"_224":373,"_27":374},{"_44":359,"_32":360,"_30":361,"_156":310,"_42":43,"_41":362,"_158":61,"_39":363,"_13":303,"_34":35,"_36":364,"_24":25,"_163":-5,"_224":365,"_27":366},{"_44":351,"_32":352,"_30":353,"_156":310,"_42":43,"_41":354,"_158":25,"_39":355,"_13":251,"_34":35,"_36":356,"_24":25,"_163":-5,"_224":357,"_27":358},{"_44":342,"_32":343,"_30":344,"_156":310,"_42":43,"_41":345,"_158":61,"_39":346,"_13":347,"_34":35,"_36":348,"_24":25,"_163":-5,"_224":349,"_27":350},{"_44":334,"_32":335,"_30":336,"_156":310,"_42":43,"_41":337,"_158":61,"_39":338,"_13":168,"_34":35,"_36":339,"_24":25,"_163":-5,"_224":340,"_27":341},{"_44":326,"_32":327,"_30":328,"_156":310,"_42":43,"_41":329,"_158":25,"_39":330,"_13":297,"_34":35,"_36":331,"_24":25,"_163":-5,"_224":332,"_27":333},{"_44":318,"_32":319,"_30":320,"_156":310,"_42":43,"_41":321,"_158":61,"_39":322,"_13":160,"_34":35,"_36":323,"_24":25,"_163":-5,"_224":324,"_27":325},{"_44":307,"_32":308,"_30":309,"_156":310,"_42":43,"_41":311,"_158":25,"_39":312,"_13":313,"_34":35,"_36":314,"_24":25,"_163":-5,"_224":315,"_27":316},{"_44":302,"_32":280,"_30":274,"_156":174,"_42":43,"_41":303,"_158":61,"_39":304,"_13":65,"_34":176,"_36":-5,"_24":25,"_163":-5,"_224":305,"_27":306},{"_44":294,"_32":295,"_30":296,"_156":274,"_42":43,"_41":297,"_158":25,"_39":298,"_13":65,"_34":35,"_36":299,"_24":25,"_163":-5,"_224":300,"_27":301},{"_44":289,"_32":33,"_30":31,"_156":274,"_42":43,"_41":14,"_158":25,"_39":290,"_13":291,"_34":35,"_36":38,"_24":25,"_163":-5,"_224":292,"_27":293},{"_44":281,"_32":282,"_30":283,"_156":274,"_42":43,"_41":284,"_158":61,"_39":285,"_13":65,"_34":35,"_36":286,"_24":25,"_163":-5,"_224":287,"_27":288},{"_44":271,"_32":272,"_30":273,"_156":274,"_42":43,"_41":275,"_158":61,"_39":276,"_13":168,"_34":35,"_36":277,"_24":25,"_163":-5,"_224":278,"_27":279},{"_44":264,"_32":265,"_30":266,"_156":174,"_42":43,"_41":168,"_158":61,"_39":267,"_13":65,"_34":20,"_36":268,"_24":25,"_163":-5,"_224":269,"_27":270},{"_44":255,"_32":256,"_30":257,"_156":174,"_42":43,"_41":258,"_158":61,"_39":259,"_13":260,"_34":20,"_36":261,"_24":25,"_163":-5,"_224":262,"_27":263},{"_44":246,"_32":247,"_30":248,"_156":174,"_42":43,"_41":249,"_158":25,"_39":250,"_13":251,"_34":20,"_36":252,"_24":25,"_163":-5,"_224":253,"_27":254},{"_44":239,"_32":240,"_30":241,"_156":174,"_42":43,"_41":168,"_158":61,"_39":242,"_13":65,"_34":35,"_36":243,"_24":25,"_163":-5,"_224":244,"_27":245},{"_44":230,"_32":231,"_30":232,"_156":174,"_42":43,"_41":233,"_158":25,"_39":234,"_13":235,"_34":20,"_36":236,"_24":25,"_163":-5,"_224":237,"_27":238},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":227,"_13":65,"_34":20,"_36":170,"_24":25,"_163":-5,"_224":228,"_27":229},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":25,"_39":223,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_224":225,"_27":226},["D",1784140641802],"children",[],[155],["D",1783886796403],[],[166],"b3ef9256-2f53-4b48-b0a0-2da69034e437","styles.css","f1a77016-7e2d-11f1-bb26-1607ee4eb77e",138,["D",1784141783606],41,":root {\n --radius-lg: 1.125rem;\n}\n\n/* ---------- тема: тёмная (глубокий космос) ---------- */\n[data-theme=\"dark\"] {\n --bg: #121535;\n --bg-2: #181D40;\n --surface: rgba(255,255,255,0.045);\n --surface-solid: #1A1F3E;\n --surface-strong: #1E2243;\n --border: rgba(255,255,255,0.10);\n --border-soft: rgba(255,255,255,0.06);\n --ink: #F1F3FB;\n --muted: #8D93B0;\n --accent: #7C6CF6;\n --accent-2: #3AB6F0;\n --accent-3: #F472B6;\n --accent-bg: rgba(124,108,246,0.16);\n --green: #34D399;\n --green-bg: rgba(52,211,153,0.14);\n --red: #F87171;\n --red-bg: rgba(248,113,113,0.14);\n --amber: #F5A524;\n --amber-bg: rgba(245,165,36,0.14);\n --teal: #2DD4BF;\n --teal-bg: rgba(45,212,191,0.14);\n --card-shadow: 0 10px 34px rgba(2,3,14,0.5), inset 0 1px 0 rgba(255,255,255,0.04);\n --card-hover-border: rgba(124,108,246,0.4);\n --star-opacity: 0.9;\n --nebula-1: rgba(124,108,246,0.28);\n --nebula-2: rgba(58,182,240,0.20);\n --nebula-3: rgba(244,114,182,0.14);\n --glass-tint: rgba(30,34,67,0.55);\n --modal-tint: rgba(34,38,64,0.92);\n --modal-shadow: 0 30px 80px -12px rgba(2,3,14,0.65), 0 12px 28px -8px rgba(2,3,14,0.45);\n --chrome-1: #565c73;\n --chrome-2: #aab0c8;\n --chrome-3: #ffffff;\n --spin-hi: rgba(255,255,255,0.14);\n --spin-lo: rgba(0,0,0,0.32);\n --spin-lift: 0 1px 2px rgba(2,3,14,0.45), 0 3px 6px rgba(2,3,14,0.30);\n}\n\n/* ---------- тема: светлая (дневной космос) ---------- */\n[data-theme=\"light\"] {\n --bg: #F3F5FE;\n --bg-2: #E9EEFF;\n --surface: rgba(255,255,255,0.78);\n --surface-solid: #FFFFFF;\n --surface-strong: #FFFFFF;\n --border: rgba(35,40,80,0.11);\n --border-soft: rgba(35,40,80,0.07);\n --ink: #1B1E33;\n --muted: #676C8C;\n --accent: #6D5CF0;\n --accent-2: #0EA5D9;\n --accent-3: #E1499E;\n --accent-bg: rgba(109,92,240,0.11);\n --green: #12986C;\n --green-bg: rgba(18,152,108,0.12);\n --red: #DC4258;\n --red-bg: rgba(220,66,88,0.10);\n --amber: #B8770A;\n --amber-bg: rgba(184,119,10,0.12);\n --teal: #0E9E8E;\n --teal-bg: rgba(14,158,142,0.12);\n --card-shadow: 0 10px 28px rgba(30,41,82,0.10), inset 0 1px 0 rgba(255,255,255,0.6);\n --card-hover-border: rgba(109,92,240,0.35);\n --star-opacity: 0.35;\n --nebula-1: rgba(109,92,240,0.16);\n --nebula-2: rgba(14,165,217,0.14);\n --nebula-3: rgba(225,73,158,0.10);\n --glass-tint: rgba(255,255,255,0.65);\n --modal-tint: rgba(255,255,255,0.94);\n --modal-shadow: 0 30px 80px -12px rgba(30,41,82,0.30), 0 12px 28px -8px rgba(30,41,82,0.18);\n --chrome-1: #454a5f;\n --chrome-2: #8e93a8;\n --chrome-3: #e8eaf2;\n --spin-hi: rgba(255,255,255,0.90);\n --spin-lo: rgba(35,40,80,0.14);\n --spin-lift: 0 1px 2px rgba(30,41,82,0.16), 0 2px 5px rgba(30,41,82,0.10);\n}\n\n* { box-sizing: border-box; }\n\n/* ---------- масштаб контента: подстраивается под ширину окна ---------- */\n/* 1rem плавно растёт с 14.5px (узкое окно) до 19px (широкий монитор) —\n все размеры интерфейса заданы в rem и масштабируются вместе с ним */\nhtml {\n background: var(--bg);\n font-size: clamp(14.5px, 13.65px + 0.223vw, 19px);\n}\n\nhtml, body {\n margin: 0;\n padding: 0;\n color: var(--ink);\n font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n min-height: 100%;\n}\n\nbody {\n position: relative;\n min-height: 100vh;\n background:\n radial-gradient(ellipse 78% 46% at 14% -8%, var(--nebula-1), transparent 60%),\n radial-gradient(ellipse 60% 42% at 92% 6%, var(--nebula-2), transparent 55%),\n radial-gradient(ellipse 70% 50% at 46% 118%, var(--nebula-3), transparent 62%),\n var(--bg);\n background-attachment: fixed;\n overflow-x: hidden;\n transition: background-color 0.3s ease;\n}\n\nbody::before,\nbody::after {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n opacity: var(--star-opacity);\n background-repeat: repeat;\n}\n\nbody::before {\n background-image:\n radial-gradient(1.4px 1.4px at 8% 18%, #fff, transparent),\n radial-gradient(1px 1px at 76% 38%, #fff, transparent),\n radial-gradient(1.6px 1.6px at 58% 78%, #fff, transparent),\n radial-gradient(1px 1px at 28% 66%, #fff, transparent),\n radial-gradient(2px 2px at 88% 88%, #fff, transparent),\n radial-gradient(1px 1px at 42% 8%, #fff, transparent),\n radial-gradient(1.4px 1.4px at 14% 52%, #fff, transparent),\n radial-gradient(1px 1px at 68% 12%, #fff, transparent),\n radial-gradient(1px 1px at 22% 92%, #fff, transparent),\n radial-gradient(1.5px 1.5px at 94% 58%, #fff, transparent);\n background-size: 420px 420px;\n animation: starDrift 220s linear infinite;\n}\n\nbody::after {\n background-image:\n radial-gradient(1px 1px at 34% 30%, #fff, transparent),\n radial-gradient(1px 1px at 64% 64%, #fff, transparent),\n radial-gradient(1.3px 1.3px at 4% 84%, #fff, transparent),\n radial-gradient(1px 1px at 84% 22%, #fff, transparent),\n radial-gradient(1px 1px at 50% 96%, #fff, transparent);\n background-size: 280px 280px;\n opacity: calc(var(--star-opacity) * 0.6);\n animation: starDrift 160s linear infinite reverse;\n}\n\n@keyframes starDrift {\n from { background-position: 0 0, 0 0; }\n to { background-position: -1000px 600px, 800px -700px; }\n}\n\n/* ---------- светлая тема: абстрактный фон вместо звёздного неба ---------- */\n[data-theme=\"light\"] body {\n background:\n radial-gradient(circle at 12% 10%, rgba(109,92,240,0.30), transparent 42%),\n radial-gradient(circle at 84% 6%, rgba(14,165,217,0.26), transparent 40%),\n radial-gradient(circle at 92% 62%, rgba(225,73,158,0.22), transparent 40%),\n radial-gradient(circle at 6% 68%, rgba(18,152,108,0.18), transparent 42%),\n radial-gradient(circle at 46% 100%, rgba(184,119,10,0.16), transparent 46%),\n var(--bg);\n}\n[data-theme=\"light\"] body::before {\n background:\n radial-gradient(ellipse 46% 38% at 18% 22%, rgba(109,92,240,0.30), transparent 72%),\n radial-gradient(ellipse 40% 34% at 86% 14%, rgba(14,165,217,0.26), transparent 72%),\n radial-gradient(ellipse 50% 42% at 78% 86%, rgba(225,73,158,0.22), transparent 72%);\n background-size: auto;\n filter: blur(46px);\n opacity: 1;\n animation: blobFloatA 30s ease-in-out infinite alternate;\n}\n[data-theme=\"light\"] body::after {\n background:\n radial-gradient(ellipse 42% 36% at 8% 82%, rgba(18,152,108,0.22), transparent 72%),\n radial-gradient(ellipse 36% 30% at 55% 34%, rgba(184,119,10,0.16), transparent 72%);\n background-size: auto;\n filter: blur(54px);\n opacity: 1;\n animation: blobFloatB 36s ease-in-out infinite alternate;\n}\n@keyframes blobFloatA {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(3%, 4%) scale(1.08); }\n}\n@keyframes blobFloatB {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(-4%, -3%) scale(1.1); }\n}\n\n#root { min-height: 100vh; position: relative; z-index: 1; }\n\n.mono {\n font-family: 'PT Mono', ui-monospace, SFMono-Regular, monospace;\n font-variant-numeric: tabular-nums;\n}\n\na { color: var(--accent-2); }\n\n/* ---------- auth screen ---------- */\n.auth-shell {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n position: relative;\n}\n.auth-card {\n width: 100%;\n max-width: 23.75rem;\n background: var(--glass-tint);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 2rem;\n box-shadow: var(--card-shadow);\n position: relative;\n}\n.auth-brand {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-bottom: 1.375rem;\n}\n.auth-logo {\n width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;\n background: linear-gradient(135deg, var(--accent), var(--accent-2));\n display: flex; align-items: center; justify-content: center;\n color: #06081A; flex-shrink: 0;\n box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 22px var(--accent-bg);\n}\n.auth-logo svg { width: 1.25rem; height: 1.25rem; }\n.auth-title {\n font-size: 1rem; font-weight: 700;\n background: linear-gradient(135deg, var(--ink), var(--accent-2) 140%);\n -webkit-background-clip: text; background-clip: text; color: transparent;\n}\n.auth-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.125rem; }\n.auth-h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.375rem 0; }\n.auth-p { font-size: 0.8125rem; color: var(--muted); margin: 0 0 1.25rem 0; }\n.auth-field { margin-bottom: 0.875rem; }\n.auth-label { font-size: 0.78125rem; color: var(--muted); margin-bottom: 0.375rem; display: block; }\n.auth-input {\n width: 100%;\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.625rem;\n padding: 0.6875rem 0.75rem;\n color: var(--ink);\n font-size: 0.875rem;\n font-family: inherit;\n}\n.auth-input:focus { outline: none; border-color: var(--accent); background: var(--accent-bg); }\n.auth-error {\n background: var(--red-bg);\n color: var(--red);\n border-radius: 0.5625rem;\n padding: 0.625rem 0.75rem;\n font-size: 0.78125rem;\n margin-bottom: 0.875rem;\n}\n.auth-submit {\n width: 100%;\n background: linear-gradient(135deg, var(--accent), var(--accent-2));\n color: #06081A;\n font-weight: 700;\n font-size: 0.875rem;\n border: none;\n border-radius: 0.625rem;\n padding: 0.75rem;\n cursor: pointer;\n transition: opacity 0.15s ease, transform 0.15s ease;\n box-shadow: 0 6px 20px var(--accent-bg);\n}\n.auth-submit:hover { opacity: 0.92; transform: translateY(-1px); }\n.auth-submit:disabled { opacity: 0.6; cursor: default; transform: none; }\n.auth-switch {\n text-align: center;\n font-size: 0.78125rem;\n color: var(--muted);\n margin-top: 1rem;\n}\n.auth-switch button {\n background: none; border: none; color: var(--accent-2);\n font-size: 0.78125rem; cursor: pointer; padding: 0; font-family: inherit;\n}\n\n.loading-screen {\n min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.875rem; color: var(--muted); font-size: 0.8125rem; position: relative;\n}\n.loading-screen svg { animation: spin 1s linear infinite; color: var(--accent); }\n@keyframes spin { to { transform: rotate(360deg); } }\n.loading-text {\n font-size: 0.8125rem;\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n background: linear-gradient(90deg, var(--chrome-1), var(--chrome-2), var(--chrome-3), var(--chrome-2), var(--chrome-1));\n background-size: 300% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: shimmer 2.4s linear infinite;\n}\n@keyframes shimmer {\n 0% { background-position: 0% 50%; }\n 100% { background-position: 300% 50%; }\n}\n\n/* ---------- app shell ---------- */\n.app-shell { display: flex; min-height: 100vh; width: 100%; position: relative; }\n\n.sidebar {\n width: 14.5rem;\n flex-shrink: 0;\n background: var(--glass-tint);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-right: 1px solid var(--border-soft);\n padding: 1.5rem 0.875rem;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n position: sticky;\n top: 0;\n height: 100vh;\n z-index: 2;\n}\n.brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem 1.375rem 0.5rem; }\n.brand-logo {\n width: 2.125rem; height: 2.125rem; border-radius: 0.625rem;\n background: linear-gradient(135deg, var(--accent), var(--accent-2));\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0; color: #06081A;\n box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 18px var(--accent-bg);\n}\n.brand-logo svg { width: 1.125rem; height: 1.125rem; }\n.brand-title { font-size: 0.90625rem; font-weight: 700; color: var(--ink); line-height: 1.2; }\n.brand-sub { font-size: 0.6875rem; color: var(--muted); margin-top: 0.125rem; }\n\n.nav-item {\n display: flex; align-items: center; gap: 0.625rem;\n padding: 0.5625rem 0.6875rem; border-radius: 0.625rem;\n font-size: 0.84375rem; font-weight: 500; color: var(--muted);\n cursor: pointer; border: none; background: transparent;\n text-align: left; width: 100%;\n transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;\n font-family: inherit;\n}\n.nav-item:hover { background: rgba(127,127,160,0.10); color: var(--ink); }\n.nav-item.active {\n background: var(--accent-bg);\n color: var(--ink);\n box-shadow: inset 0 0 0 1px var(--card-hover-border);\n}\n.nav-item.active svg { color: var(--accent-2); }\n.nav-item svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: color 0.18s ease; }\n.nav-spacer { flex: 1; }\n.nav-foot {\n display: flex; align-items: center; gap: 0.625rem;\n font-size: 0.71875rem; color: var(--muted);\n padding: 0.75rem 0.625rem; margin-top: 0.5rem;\n border-top: 1px solid var(--border-soft);\n}\n.nav-foot-dot {\n width: 0.5rem; height: 0.5rem; border-radius: 50%;\n background: var(--green); box-shadow: 0 0 0 3px var(--green-bg);\n flex-shrink: 0; transition: background 0.2s ease, box-shadow 0.2s ease;\n}\n.nav-foot-dot.saving {\n background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-bg);\n animation: dotPulse 0.9s ease-in-out infinite;\n}\n@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n.logout-btn {\n border: none; background: transparent; color: var(--muted);\n font-size: 0.6875rem; cursor: pointer; font-family: inherit; padding: 0;\n text-decoration: underline;\n}\n.logout-btn:hover { color: var(--red); }\n\n.main {\n flex: 1; min-width: 0; padding: 2.5rem 3rem 3.75rem 3rem; max-width: 67.5rem;\n margin: 0 auto; /* центрируется в остатке места, когда контент не растягивается до max-width */\n position: relative; z-index: 1;\n}\n.tab-content { animation: tabIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); }\n@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n\n/* ---------- фолбэк на время догрузки кода вкладки (React.lazy) ---------- */\n.tab-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 12rem;\n color: var(--muted);\n}\n.tab-loading svg { animation: spin 1s linear infinite; color: var(--accent); }\n\n.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.625rem; }\n.page-title {\n font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.01em;\n background: linear-gradient(135deg, var(--ink), var(--accent-2) 150%);\n -webkit-background-clip: text; background-clip: text; color: transparent;\n}\n.page-sub { font-size: 0.84375rem; color: var(--muted); margin: 0.375rem 0 0 0; }\n.page-kpi { text-align: right; }\n.page-kpi-label { font-size: 0.75rem; color: var(--muted); }\n.page-kpi-value { font-size: 1.3125rem; font-weight: 700; color: var(--accent-2); margin-top: 0.25rem; }\n\n.card {\n background: var(--surface);\n backdrop-filter: blur(14px) saturate(140%);\n -webkit-backdrop-filter: blur(14px) saturate(140%);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 1.25rem; position: relative;\n box-shadow: var(--card-shadow);\n transition: border-color 0.18s ease, transform 0.18s ease;\n}\n.card:hover { border-color: var(--card-hover-border); }\n.grid { display: grid; gap: 0.875rem; }\n.grid-4 { grid-template-columns: repeat(4, 1fr); }\n.grid-2 { grid-template-columns: repeat(2, 1fr); }\n.stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }\n.icon-badge { width: 2.375rem; height: 2.375rem; border-radius: 0.6875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.icon-badge svg { width: 1.125rem; height: 1.125rem; }\n.icon-badge.green { background: var(--green-bg); color: var(--green); box-shadow: 0 0 16px var(--green-bg); }\n.icon-badge.red { background: var(--red-bg); color: var(--red); box-shadow: 0 0 16px var(--red-bg); }\n.icon-badge.accent { background: var(--accent-bg); color: var(--accent-2); box-shadow: 0 0 16px var(--accent-bg); }\n.icon-badge.amber { background: var(--amber-bg); color: var(--amber); box-shadow: 0 0 16px var(--amber-bg); }\n.icon-badge.teal { background: var(--teal-bg); color: var(--teal); box-shadow: 0 0 16px var(--teal-bg); }\n.stat-context { font-size: 0.71875rem; color: var(--muted); padding-top: 0.5rem; }\n.stat-label { font-size: 0.75rem; color: var(--muted); font-weight: 500; }\n.stat-value { font-size: 1.4375rem; font-weight: 700; margin-top: 0.375rem; color: var(--ink); }\n.tag { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5625rem; border-radius: 999px; margin-top: 0.625rem; }\n.tag.green { color: var(--green); background: var(--green-bg); }\n.tag.red { color: var(--red); background: var(--red-bg); }\n.tag.gold { color: var(--accent-2); background: var(--accent-bg); }\n\n/* ---------- фильтры над таблицами ---------- */\n.filter-bar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.625rem;\n margin-bottom: 1.125rem;\n}\n.search-field {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex: 1 1 13rem;\n max-width: 20rem;\n min-width: 0;\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.625rem;\n padding: 0.5rem 0.75rem;\n color: var(--muted);\n transition: border-color 0.15s ease, background 0.15s ease;\n}\n.search-field svg { flex-shrink: 0; opacity: 0.8; }\n.search-field:focus-within { border-color: var(--accent); background: var(--accent-bg); }\n.search-input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n outline: none;\n color: var(--ink);\n font-size: 0.8125rem;\n font-family: inherit;\n}\n.search-input::placeholder { color: var(--muted); }\n.search-clear {\n border: none; background: transparent; color: var(--muted);\n cursor: pointer; padding: 0.125rem; border-radius: 0.375rem;\n display: flex; align-items: center; flex-shrink: 0;\n}\n.search-clear:hover { background: var(--red-bg); color: var(--red); }\n.filter-dates { display: flex; align-items: center; gap: 0.5rem; }\n.filter-date, .filter-select {\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.625rem;\n padding: 0.5rem 0.6875rem;\n color: var(--ink);\n font-size: 0.8125rem;\n font-family: inherit;\n}\n.filter-date:focus, .filter-select:focus { outline: none; border-color: var(--accent); background: var(--accent-bg); }\n.filter-select { cursor: pointer; }\n.filter-select option { background: var(--surface-strong); color: var(--ink); }\n.filter-date-sep { color: var(--muted); font-size: 0.78125rem; }\n\n/* ---------- тёмная тема: иконка календаря в date-полях — светлая и контрастная ---------- */\n[data-theme=\"dark\"] input[type=\"date\"] {\n color-scheme: dark;\n}\n.filter-toggle {\n display: flex; align-items: center; gap: 0.4375rem;\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.625rem;\n padding: 0.5rem 0.8125rem;\n color: var(--muted);\n font-size: 0.8125rem; font-weight: 600;\n cursor: pointer; font-family: inherit;\n white-space: nowrap;\n transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n.filter-toggle:hover { color: var(--ink); }\n.filter-toggle.active {\n background: var(--accent-bg);\n border-color: var(--card-hover-border);\n color: var(--accent-2);\n}\n.filter-reset {\n border: none; background: transparent; color: var(--muted);\n font-size: 0.78125rem; cursor: pointer; font-family: inherit;\n text-decoration: underline; padding: 0.5rem 0.125rem;\n}\n.filter-reset:hover { color: var(--ink); }\n.filter-empty { text-align: center; padding: 1.5rem 0.625rem; color: var(--muted); font-size: 0.84375rem; }\n\n.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }\ntable { width: 100%; min-width: 560px; border-collapse: collapse; }\nth {\n text-align: left; font-size: 0.6875rem; color: var(--muted); font-weight: 600;\n text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0.625rem 0.625rem 0.625rem;\n border-bottom: 1px solid var(--border);\n}\n.sortable-th { cursor: pointer; user-select: none; transition: color 0.15s ease; }\n.sortable-th:hover { color: var(--ink); }\n.sortable-th.sort-active { color: var(--accent-2); }\n.sortable-th-inner { display: inline-flex; align-items: center; gap: 0.25rem; }\n.sortable-th-inner svg { flex-shrink: 0; }\n.sort-icon-idle { opacity: 0.35; }\ntd { padding: 0.25rem 0.625rem; border-bottom: 1px solid var(--border-soft); font-size: 0.84375rem; vertical-align: middle; color: var(--ink); }\ntr:last-child td { border-bottom: none; }\n/* min-width: 0 обязателен для input/select внутри ячеек таблицы: у поля ввода\n есть собственный \"естественный\" минимальный размер браузера (примерно как\n у size=20), и без сброса этого минимума ячейка не может сжаться теснее его,\n даже если задать width в процентах — из-за этого вся таблица становится\n шире контейнера и появляется горизонтальная прокрутка. */\n.cell-input {\n width: 100%; min-width: 0; border: none; background: transparent; font-size: 0.84375rem;\n font-family: inherit; color: var(--ink); padding: 0.5625rem 0.25rem; border-radius: 0.375rem;\n}\n.cell-input:focus { outline: none; background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--card-hover-border); }\nselect.cell-input { cursor: pointer; }\nselect.cell-input option { background: var(--surface-strong); color: var(--ink); }\n.num-input {\n text-align: right;\n font-family: 'PT Mono', ui-monospace, monospace;\n border: 1px solid var(--border);\n background: rgba(127,127,160,0.07);\n border-radius: 0.375rem;\n}\n.num-input:focus { border-color: var(--accent); }\n.num-field { display: flex; align-items: center; gap: 0.375rem; width: 100%; }\n.num-field .cell-input { width: auto; min-width: 0; flex: 1 1 auto; appearance: textfield; }\n.num-field input[type=\"number\"]::-webkit-inner-spin-button,\n.num-field input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0; display: none; }\n/* \"-\" и \"+\" объёмные: приподнятая капсула со светотенью, кнопки вплотную друг к другу */\n.num-spin {\n display: flex; align-items: stretch; flex-shrink: 0;\n border: 1px solid var(--border);\n border-radius: 0.375rem;\n overflow: hidden;\n background: linear-gradient(180deg, var(--spin-hi), rgba(127,127,160,0.09) 55%, var(--spin-lo));\n box-shadow: inset 0 1px 0 var(--spin-hi), inset 0 -1px 0 var(--spin-lo), var(--spin-lift);\n}\n.num-btn {\n width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; display: flex; align-items: center; justify-content: center;\n border: none; border-radius: 0; background: transparent; color: var(--muted);\n cursor: pointer; transition: background 0.12s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.12s ease;\n}\n.num-spin .num-btn + .num-btn { border-left: 1px solid var(--border); }\n.num-btn svg { width: 0.6875rem; height: 0.6875rem; }\n.num-btn:hover { color: var(--accent-2); background: var(--accent-bg); }\n.num-btn:active {\n color: var(--accent-2);\n background: var(--accent-bg);\n box-shadow: inset 0 2px 4px var(--spin-lo);\n transform: scale(0.96);\n}\n.row-total td { font-weight: 700; border-top: 1px solid var(--border); border-bottom: none; color: var(--ink); }\n.icon-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; display: flex; align-items: center; }\n.icon-btn:hover { background: var(--red-bg); color: var(--red); }\n.add-row {\n margin-top: 0.875rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600;\n color: var(--ink); background: rgba(127,127,160,0.08); border: 1px solid var(--border); padding: 0.5rem 0.875rem;\n border-radius: 0.625rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; font-family: inherit;\n}\n.add-row:hover { background: var(--accent-bg); border-color: var(--card-hover-border); }\n.add-row svg { width: 0.875rem; height: 0.875rem; color: var(--accent-2); }\n.add-row:disabled { opacity: 0.6; cursor: default; }\n.bar-track { width: 100%; height: 0.375rem; background: rgba(127,127,160,0.14); border-radius: 999px; overflow: hidden; }\n.bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }\n.section-note { font-size: 0.78125rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; }\n\n/* ---------- бюджет: добавление / удаление категорий ---------- */\n.add-cat-row {\n margin-bottom: 1.125rem;\n display: flex;\n align-items: center;\n gap: 0.625rem;\n flex-wrap: wrap;\n}\n.add-cat-input {\n flex: 1 1 12rem;\n min-width: 0;\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.625rem;\n padding: 0.5625rem 0.75rem;\n color: var(--ink);\n font-size: 0.8125rem;\n font-family: inherit;\n}\n.add-cat-input:focus { outline: none; border-color: var(--accent); background: var(--accent-bg); }\n.add-cat-row .add-row { margin-top: 0; flex-shrink: 0; }\n/* grid-template-rows (0fr → 1fr) вместо угадывания max-height: анимируется\n настоящая высота содержимого, поэтому движение плавное независимо от того,\n уместилось сообщение в одну строку или перенеслось на две-три. */\n.cat-error {\n display: grid;\n grid-template-rows: 0fr;\n background: var(--red-bg);\n color: var(--red);\n border-radius: 0.5625rem;\n font-size: 0.78125rem;\n opacity: 0;\n transform: translateY(-6px);\n margin-bottom: 0;\n transition:\n grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n margin-bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.cat-error.open {\n grid-template-rows: 1fr;\n opacity: 1;\n transform: translateY(0);\n margin-bottom: 0.875rem;\n}\n.cat-error > p {\n margin: 0;\n overflow: hidden;\n padding: 0.625rem 0.75rem;\n}\n.cat-name-cell { display: flex; align-items: center; gap: 0.125rem; }\n.cat-name-cell .cell-input { flex: 1; min-width: 0; }\n.cat-name-cell .icon-btn { flex-shrink: 0; }\n.cat-name-cell .icon-btn:hover { background: var(--accent-bg); color: var(--accent-2); }\n\n/* ---------- редактируемая ячейка с иконкой карандаша (например, источник дохода) ---------- */\n.editable-cell { display: flex; align-items: center; gap: 0.125rem; }\n.editable-cell .cell-input { flex: 1; min-width: 0; }\n.editable-cell .icon-btn { flex-shrink: 0; }\n.editable-cell .icon-btn:hover { background: var(--accent-bg); color: var(--accent-2); }\n\n/* ---------- модальное окно подтверждения удаления ---------- */\n.confirm-overlay {\n position: fixed;\n inset: 0;\n background: rgba(2,3,14,0.55);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n z-index: 50;\n animation: confirmFadeIn 0.15s ease;\n}\n@keyframes confirmFadeIn { from { opacity: 0; } to { opacity: 1; } }\n.confirm-dialog {\n width: 100%;\n max-width: 22rem;\n background: var(--modal-tint);\n backdrop-filter: blur(16px) saturate(130%);\n -webkit-backdrop-filter: blur(16px) saturate(130%);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 1.5rem;\n box-shadow: var(--modal-shadow), inset 0 1px 0 var(--spin-hi), inset 0 -1px 0 var(--spin-lo);\n animation: confirmPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes confirmPopIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }\n.confirm-dialog .icon-badge { margin-bottom: 0.875rem; }\n.confirm-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--ink); }\n.confirm-message { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin: 0 0 1.25rem 0; }\n.confirm-actions { display: flex; justify-content: flex-end; gap: 0.625rem; }\n.confirm-btn {\n border: none; border-radius: 0.625rem; padding: 0.5625rem 1.125rem;\n font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit;\n transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;\n}\n.confirm-btn:hover { transform: translateY(-1px) scale(1.06); }\n.confirm-btn:active { transform: scale(0.94); }\n.confirm-btn-cancel {\n background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%), rgba(127,127,160,0.16);\n color: var(--ink);\n box-shadow: inset 0 1px 0 var(--spin-hi), inset 0 -1px 0 var(--spin-lo), 0 2px 6px rgba(0,0,0,0.12);\n}\n.confirm-btn-cancel:hover {\n background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 55%), rgba(127,127,160,0.26);\n}\n.confirm-btn-cancel:active { box-shadow: inset 0 2px 5px var(--spin-lo); }\n.confirm-btn-danger {\n background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0) 55%), var(--red);\n color: #fff;\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.18), 0 4px 14px var(--red-bg);\n}\n.confirm-btn-danger:hover {\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.18), 0 6px 20px var(--red-bg);\n}\n.confirm-btn-danger:active { box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }\n\n/* ---------- карточный список вместо широкой таблицы (Цели, Кредиты): поля\n переносятся на новую строку при нехватке места, а не уезжают за край окна —\n поэтому горизонтальная прокрутка тут не нужна ни при какой ширине окна. */\n.entry-list { display: flex; flex-direction: column; gap: 0.875rem; }\n.entry-row {\n border: 1px solid var(--border);\n border-radius: 0.875rem;\n padding: 0.875rem 1rem;\n background: rgba(127,127,160,0.045);\n}\n.entry-row-head {\n display: flex; align-items: center; gap: 0.5rem;\n margin-bottom: 0.75rem;\n}\n.entry-name-input {\n flex: 1; min-width: 0;\n font-weight: 600;\n font-size: 0.9375rem;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--border-soft);\n border-radius: 0;\n padding: 0.25rem 0.125rem 0.5rem 0.125rem;\n}\n.entry-name-input:focus { outline: none; border-bottom-color: var(--accent); background: transparent; box-shadow: none; }\n.entry-row-fields {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));\n gap: 0.75rem 1rem;\n margin-bottom: 0.75rem;\n}\n.entry-field { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }\n.entry-field-label { font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }\n.entry-field-static { font-size: 0.84375rem; color: var(--ink); font-weight: 600; padding: 0.5625rem 0.25rem; }\n.entry-row-progress { display: flex; align-items: center; gap: 0.625rem; }\n.entry-progress-pct { font-size: 0.75rem; color: var(--muted); min-width: 2.75rem; text-align: right; flex-shrink: 0; }\n\n.ring-wrap { display: flex; align-items: center; gap: 1.75rem; }\n.ring-figures { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }\n.ring-row { display: flex; justify-content: space-between; font-size: 0.8125rem; }\n.ring-row span:first-child { color: var(--muted); }\n.ring-row span:last-child { font-weight: 600; color: var(--ink); }\n\n.advice-card {\n background: var(--surface);\n backdrop-filter: blur(14px) saturate(140%);\n -webkit-backdrop-filter: blur(14px) saturate(140%);\n border: 1px solid var(--border);\n border-left: 3px solid var(--accent);\n border-radius: var(--radius-lg);\n padding: 1.25rem 1.375rem;\n box-shadow: var(--card-shadow);\n}\n.advice-title { font-size: 0.9375rem; font-weight: 700; margin: 0 0 1rem 0; }\n.advice-item { display: flex; gap: 0.75rem; padding: 0.875rem; border: 1px solid var(--border); border-radius: 0.75rem; margin-bottom: 0.625rem; }\n.advice-item:last-child { margin-bottom: 0; }\n.advice-item.warn { border-color: rgba(245,165,36,0.35); }\n.advice-item.info { background: var(--accent-bg); border-color: var(--card-hover-border); }\n.advice-item svg { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; margin-top: 1px; }\n.advice-item.warn svg { color: var(--amber); }\n.advice-item.info svg { color: var(--accent-2); }\n.advice-item.ok svg { color: var(--green); }\n.advice-item-title { font-size: 0.84375rem; font-weight: 700; margin-bottom: 0.1875rem; }\n.advice-item.warn .advice-item-title { color: var(--amber); }\n.advice-item.info .advice-item-title { color: var(--accent-2); }\n.advice-item.ok .advice-item-title { color: var(--green); }\n.advice-item-text { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }\n\n/* ---------- главная: цитаты финансистов ---------- */\n.quote-card {\n background: var(--surface);\n backdrop-filter: blur(14px) saturate(140%);\n -webkit-backdrop-filter: blur(14px) saturate(140%);\n border: 1px solid var(--border);\n border-left: 3px solid var(--accent-2);\n border-radius: var(--radius-lg);\n padding: 1.375rem 1.5rem;\n box-shadow: var(--card-shadow);\n position: relative;\n}\n.quote-text { font-size: 0.9375rem; font-style: italic; font-weight: 600; line-height: 1.55; color: var(--ink); margin: 0 0 1rem 0; }\n.quote-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }\n.quote-author { font-size: 0.84375rem; font-weight: 700; color: var(--accent-2); }\n.quote-role { font-size: 0.71875rem; color: var(--muted); margin-top: 0.125rem; }\n.quote-card .icon-btn:hover { background: var(--accent-bg); color: var(--accent-2); }\n\n/* ---------- theme toggle (Настройки) ---------- */\n.theme-toggle {\n display: inline-flex;\n gap: 0.25rem;\n padding: 0.25rem;\n background: rgba(127,127,160,0.08);\n border: 1px solid var(--border);\n border-radius: 0.75rem;\n}\n.theme-option {\n display: flex; align-items: center; gap: 0.4375rem;\n padding: 0.5rem 0.8125rem; border-radius: 0.5625rem;\n font-size: 0.78125rem; font-weight: 600; color: var(--muted);\n border: none; background: transparent; cursor: pointer; font-family: inherit;\n transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\n}\n.theme-option svg { width: 0.9375rem; height: 0.9375rem; }\n.theme-option:hover { color: var(--ink); }\n.theme-option.active {\n background: linear-gradient(135deg, var(--accent), var(--accent-2));\n color: #06081A;\n box-shadow: 0 4px 14px var(--accent-bg);\n}\n\n.view-source { position: fixed; bottom: 0.75rem; right: 1rem; font-size: 0.6875rem; color: var(--muted); z-index: 5; }\n\n@media (max-width: 1180px) {\n .grid-4 { grid-template-columns: repeat(2, 1fr); }\n .main { padding: 2rem 1.75rem 3rem 1.75rem; }\n}\n@media (max-width: 860px) {\n .app-shell { flex-direction: column; }\n .sidebar {\n width: 100%; height: auto; position: sticky; top: 0;\n flex-direction: row; align-items: center; overflow-x: auto; padding: 0.625rem 0.75rem; gap: 0.125rem; z-index: 2;\n }\n .brand { display: none; }\n .nav-foot { display: none; }\n .nav-item { white-space: nowrap; }\n .main { padding: 1.375rem 1.125rem 2.5rem 1.125rem; }\n .grid-4, .grid-2 { grid-template-columns: 1fr 1fr; }\n .page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }\n .page-kpi { text-align: left; }\n .card { padding: 1rem; }\n}\n@media (max-width: 560px) {\n .grid-4, .grid-2 { grid-template-columns: 1fr; }\n .main { padding: 1rem 0.875rem 2rem 0.875rem; }\n .ring-wrap { flex-direction: column; align-items: flex-start; gap: 1.125rem; }\n .ring-figures { width: 100%; }\n}\n",[],[173,231],"8247074c-a13d-4598-9f38-dcedb692d6d9","index.tsx","019f57f0-56c5-76eb-9c36-6dc2bc748403",["D",1783886796403],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[173,240],"4acacf0e-e3e1-4cd4-9e5c-5590418c81e1","index.html","019f57f0-56c5-76eb-9c36-6b11cb2b6576",134,["D",1784140638759],5,"\n\n \n \n \n ФинСистема — бюджет и облигационный портфель\n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[],[173,247],"b9205a20-9f61-408b-ab0c-dddaa795f023","font-preview.html","07bb2a48-7e36-11f1-8316-1607ee4eb77e",43,["D",1783890976356],3,"\n\n\n\n\nШрифты — превью\n\n\n\n\n\n\n\n

Превью шрифтов — ФинСистема

Десять вариантов пары «шрифт для текста + шрифт для цифр», каждый показан на тёмной и светлой теме. Заголовок, текст навигации, абзац описания и денежные суммы. Открой на телефоне или ноутбуке, чтобы сравнить вживую — Google Fonts подгружаются реальным браузером.

\n\n\n

A · Inter + JetBrains Mono — как сейчас, для сравнения

ФинСистема

Diff · v151