:root { color-scheme: light; --bg:#f3f5f8; --card:#fff; --ink:#14213d; --muted:#7c879c; --accent:#1769e0; --accent2:#2f80ed; --line:#e7ebf1; --success:#188a58; --danger:#c23b3b; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  button,input,select,textarea { font:inherit; }
  .app-shell { min-height:100vh; max-width:680px; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
  .topbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  h1,h2,p { margin:0; } h1 { font-size:24px; letter-spacing:-.5px; } h2 { font-size:20px; }
  .eyebrow { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
  .avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(135deg,var(--accent),#734bd1); font-weight:800; }
  main { margin-top:22px; }
  .state-card,.balance-card,.section-block { border-radius:22px; background:var(--card); box-shadow:0 10px 32px rgba(27,44,78,.07); }
  .state-card { padding:26px; text-align:center; color:var(--muted); } .state-card.error { color:var(--danger); }
  .startup-diagnostic { margin-top:12px; padding:13px 14px; border:1px solid #dbe4f2; border-radius:16px; color:#48546b; background:#f8fbff; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
  .startup-diagnostic-title { color:var(--ink); font-size:13px; font-weight:800; }
  .startup-diagnostic-stage { margin-top:5px; font-weight:700; }
  .startup-diagnostic-branches { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:8px; }
  .startup-diagnostic-branches span { color:var(--ink); font-weight:700; }
  .startup-diagnostic-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; color:var(--muted); }
  .startup-diagnostic-error { margin-top:8px; color:var(--danger); font-weight:700; }
  .balance-card { padding:22px; color:white; background:linear-gradient(145deg,#1258c5,#2e84ee); }
  .balance-card>span { opacity:.82; font-size:14px; }
  .balance-card>strong { display:block; margin:7px 0 22px; font-size:37px; letter-spacing:-1px; }
  .balance-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .balance-grid div { padding:12px 14px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.14); border-radius:14px; }
  .balance-grid small,.balance-grid b { display:block; }.balance-grid small { opacity:.75; margin-bottom:4px; }
  .primary-button { width:100%; border:0; border-radius:16px; margin:16px 0; padding:16px; color:#fff; background:var(--ink); font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(20,33,61,.18); }
  .primary-button:disabled { opacity:.55; cursor:wait; }
  .transfer-action { margin-top:0; background:var(--success); }
  .receipt-action { margin-top:0; background:var(--accent); }
  .section-block { margin-top:22px; padding:20px; }
  .icon-button { border:0; width:38px; height:38px; border-radius:12px; background:var(--bg); color:var(--ink); font-size:21px; cursor:pointer; }
  .expense-list { margin-top:12px; }
  .expense-row { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
  .expense-row:last-child { border-bottom:0; }
  .expense-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#eaf2ff; }
  .expense-main { min-width:0; overflow-wrap:anywhere; }
  .expense-main b,.expense-main small { display:block; }.expense-main b { font-size:14px; }.expense-main small,.empty { color:var(--muted); font-size:12px; margin-top:4px; }
  .expense-amount { min-width:0; white-space:nowrap; text-align:right; font-weight:800; }.expense-amount small { display:block; overflow-wrap:anywhere; white-space:normal; color:var(--success); font-size:11px; margin-top:4px; }
  .expense-edit-button,.expense-receipt-button { border:0; margin-top:7px; padding:5px 8px; border-radius:9px; color:var(--accent); background:#eaf2ff; font-size:11px; font-weight:800; cursor:pointer; }
  .expense-receipt-button { color:var(--ink); background:var(--bg); }
  .expense-edit-button:disabled,.expense-receipt-button:disabled { opacity:.55; cursor:wait; }
  .operation-actions { display:flex; justify-content:flex-end; gap:6px; }
  .operation-actions:empty { display:none; }
  .expense-row-actions { grid-column:1 / -1; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:100%; }
  .expense-row-actions button { width:100%; min-width:0; margin-top:0; }
  .operation-cancel-button { border:0; margin-top:7px; padding:5px 8px; border-radius:9px; color:var(--danger); background:#fff1f1; font-size:11px; font-weight:800; cursor:pointer; }
  .operation-cancel-button:disabled { opacity:.55; cursor:wait; }
  .operation-cancelled { opacity:.68; }
  .operation-cancelled .expense-amount small { color:var(--danger); }
  .empty { padding:28px 0; text-align:center; }
  .reviewer-comment { border:1px solid #c9dafa; background:#f3f7ff; }
  .reviewer-comment h2 { margin-top:4px; }
  .reviewer-comment-text { margin-top:12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
  .reviewer-comment-author { margin-top:12px; color:var(--muted); font-size:13px; font-weight:700; }
  /* position:fixed (not absolute) so the sheet is pinned to the viewport, not the document: a long
     form used to grow .sheet past 100vh and rely on the page's own scroll to bring it into view
     (see scrollToSheet() in app.html), which left the backdrop scrolling away with it instead of
     staying a fixed overlay. height/max-height use vh with a dvh override - dvh alone would
     silently do nothing on a browser/webview old enough not to support it. The form now scrolls
     inside .sheet-panel instead of the page: overflow-y makes it scrollable up to that capped
     height, and overscroll-behavior stops a rubber-band bounce at its top/bottom edge from
     chaining into the dashboard behind the fixed backdrop. */
  .sheet { position:fixed; inset:0; z-index:20; display:flex; height:100vh; height:100dvh; align-items:flex-end; justify-content:center; overflow:hidden; }
  .sheet-backdrop { position:absolute; inset:0; border:0; background:rgba(13,25,48,.42); backdrop-filter:blur(2px); touch-action:none; }
  .sheet-panel { position:relative; width:100%; max-width:680px; max-height:calc(100vh - 12px); max-height:calc(100dvh - 12px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:white; box-shadow:0 -20px 50px rgba(20,33,61,.2); }
  .sheet-handle { width:42px; height:5px; margin:0 auto 14px; border-radius:9px; background:#d9dee8; }
  form { margin-top:14px; } label { display:block; margin-top:13px; color:#48546b; font-size:13px; font-weight:700; }
  /* 16px is what keeps iOS from zooming the page in when a field takes focus. */
  input,select,textarea { width:100%; border:1px solid #dfe4ec; border-radius:13px; margin-top:6px; padding:13px 14px; color:var(--ink); background:#fafbfc; font-size:16px; outline:none; }
  input:focus,select:focus,textarea:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(47,128,237,.12); }
  .field-error { display:none; margin-top:5px; color:var(--danger); font-size:12px; font-weight:600; }
  .field-invalid .field-error { display:block; }
  .field-invalid input,.field-invalid select,.field-invalid textarea { border-color:var(--danger); background:#fff8f8; }
  .form-error { margin-top:12px; padding:10px 12px; border-radius:11px; color:var(--danger); background:#fff1f1; font-size:12px; font-weight:600; }
  .edit-note { margin-top:13px; padding:11px 12px; border-radius:11px; color:#48546b; background:#f2f6fc; font-size:12px; font-weight:600; }
  .receipt-edit-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .receipt-edit-actions .secondary-button { margin:0; padding:11px 10px; font-size:13px; }
  .receipt-edit-actions .receipt-remove-button { color:var(--danger); border-color:#efcaca; background:#fff8f8; }
  .secondary-button { width:100%; border:1px solid #cfd8e6; border-radius:16px; margin:16px 0 0; padding:14px; color:var(--ink); background:#fff; font-weight:800; cursor:pointer; }
  .secondary-button:disabled { opacity:.55; cursor:wait; }
  .report-submit-action { margin-top:16px; }
  .report-print-action { margin-top:0; }
  .review-open-action { margin-top:0; }
  .admin-open-action { margin-top:0; }
  .review-view { width:100%; }
  .review-back-button { margin-top:0; }
  .review-panel { margin-top:16px; }
  .review-state { margin-top:16px; padding:22px 16px; border-radius:16px; color:var(--muted); background:#fff; box-shadow:0 10px 32px rgba(27,44,78,.07); text-align:center; }
  .review-state .secondary-button { margin-top:14px; }
  .review-list { display:grid; gap:10px; margin-top:16px; }
  .review-queue-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; width:100%; border:1px solid var(--line); border-radius:16px; padding:15px; color:var(--ink); background:#fafbfc; text-align:left; cursor:pointer; }
  .review-queue-card:active { background:#eef4fd; }
  .review-queue-main,.review-queue-side { min-width:0; }
  .review-queue-main strong,.review-queue-main small,.review-queue-side b,.review-queue-side small { display:block; overflow-wrap:anywhere; }
  .review-queue-main strong { font-size:15px; }
  .review-queue-main small,.review-queue-side small { margin-top:5px; color:var(--muted); font-size:11px; }
  .review-queue-side { text-align:right; }
  .review-queue-side b,.review-status { color:var(--accent); font-size:11px; }
  .admin-create-actions { margin-top:14px; }
  .admin-create-form { margin-top:0; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fafbfc; }
  .admin-create-form label:first-child { margin-top:0; }
  .admin-create-hint { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:600; }
  .admin-create-form-actions { display:flex; gap:10px; margin-top:16px; }
  .admin-create-form-actions button { flex:1 1 0; }
  .admin-user-list { display:grid; gap:10px; margin-top:16px; }
  .admin-user-card { min-width:0; padding:15px; border:1px solid var(--line); border-radius:16px; background:#fafbfc; }
  .admin-user-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .admin-user-heading strong { min-width:0; overflow-wrap:anywhere; font-size:15px; }
  .admin-user-role { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:var(--accent); background:#eaf2ff; font-size:11px; font-weight:800; }
  .admin-user-meta { display:grid; gap:4px; margin-top:10px; color:var(--muted); font-size:11px; }
  .admin-user-meta span { overflow-wrap:anywhere; }
  .admin-user-active { color:var(--success); font-weight:800; }
  .admin-user-inactive { color:var(--danger); font-weight:800; }
  .admin-user-actions { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:12px; }
  .admin-user-buttons { display:flex; flex-wrap:wrap; gap:8px; }
  .admin-user-actions button { min-width:150px; }
  .admin-profile-form { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .admin-profile-form label:first-child { margin-top:0; }
  .admin-user-role-control { display:grid; gap:4px; min-width:0; }
  .admin-user-role-control span { color:var(--muted); font-size:11px; }
  .admin-user-role-control select { min-width:170px; max-width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:16px; }
  #reviewDetailPanel>.review-back-button { margin-bottom:16px; }
  .review-report-header { margin-top:0; }
  .review-report-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .review-status { flex:0 0 auto; padding:6px 9px; border-radius:999px; background:#eaf2ff; font-weight:800; }
  .review-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
  .review-meta { min-width:0; padding:11px 12px; border-radius:12px; background:var(--bg); }
  .review-meta-wide { grid-column:1 / -1; }
  .review-meta span,.review-total span,.review-operation-field span { display:block; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
  .review-meta strong { display:block; margin-top:4px; overflow-wrap:anywhere; font-size:12px; white-space:pre-wrap; }
  .review-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
  .review-total { min-width:0; padding:12px; border:1px solid var(--line); border-radius:13px; }
  .review-total strong { display:block; margin-top:5px; overflow-wrap:anywhere; font-size:14px; }
  .review-total-final { grid-column:1 / -1; color:#fff; border-color:var(--ink); background:var(--ink); }
  .review-total-final span { color:#dbe3f2; }
  .review-operation-list { display:grid; gap:10px; margin-top:14px; }
  .review-operation-card { padding:14px; border:1px solid var(--line); border-radius:15px; background:#fafbfc; }
  .review-operation-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .review-operation-heading strong { min-width:0; font-size:14px; overflow-wrap:anywhere; }
  .review-operation-heading b { flex:0 0 auto; font-size:14px; }
  .review-operation-field { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; margin-top:9px; }
  .review-operation-field p { overflow-wrap:anywhere; font-size:12px; white-space:pre-wrap; }
  .review-receipt-value { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }
  .review-receipt-button { width:auto; min-height:34px; margin:0; padding:7px 10px; border-radius:10px; font-size:12px; white-space:nowrap; }
  .review-operation-cancelled { opacity:.7; background:#f5f5f5; }
  .review-operation-cancelled .review-operation-heading b { color:var(--danger); }
  .review-action-area { padding-bottom:20px; }
  .review-action-note { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.45; }
  .review-action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
  .review-action-buttons .primary-button,.review-action-buttons .secondary-button { min-height:52px; margin:0; padding:12px; }
  .review-revision-form { margin-top:16px; padding-top:4px; border-top:1px solid var(--line); }
  .review-revision-buttons { margin-top:12px; }
  .icon-button:disabled { opacity:.55; cursor:wait; }
  .print-mode .topbar,.print-mode #loading,.print-mode #startupDiagnostic,.print-mode #error,.print-mode #content { display:none !important; }
  .print-mode main { margin-top:0; }
  .print-view { width:100%; color:#151515; }
  .print-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
  .print-actions .primary-button,.print-actions .secondary-button { margin:0; }
  .print-document { position:relative; overflow:hidden; padding:28px; background:#fff; border-radius:18px; box-shadow:0 10px 32px rgba(27,44,78,.07); }
  .print-document::before { content:attr(data-watermark); position:absolute; z-index:0; top:48%; left:50%; transform:translate(-50%,-50%) rotate(-30deg); color:#14213d; opacity:.055; font-size:64px; font-weight:900; letter-spacing:.06em; white-space:nowrap; pointer-events:none; }
  .print-document>* { position:relative; z-index:1; }
  .print-header { padding-bottom:16px; border-bottom:2px solid #151515; }
  .print-header>p { font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .print-header>h1 { margin-top:6px; font-size:26px; }
  .print-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; margin-top:18px; }
  .print-meta-grid div,.print-footer div { min-width:0; }
  .print-meta-grid span,.print-footer span,.print-total span { display:block; color:#5f6673; font-size:10px; font-weight:700; text-transform:uppercase; }
  .print-meta-grid strong,.print-footer strong { display:block; margin-top:3px; overflow-wrap:anywhere; font-size:12px; }
  .print-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:18px 0 22px; }
  .print-total { min-width:0; padding:10px; border:1px solid #ccd1d9; border-radius:8px; }
  .print-total strong { display:block; margin-top:4px; overflow-wrap:anywhere; font-size:13px; }
  .print-total-final { color:#fff; background:#14213d; border-color:#14213d; }
  .print-total-final span { color:#dbe3f2; }
  .print-table-section { margin-top:20px; }
  .print-table-section h2 { margin-bottom:8px; font-size:16px; }
  .print-table-section table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:10px; }
  .print-table-section th,.print-table-section td { padding:6px; border:1px solid #c7ccd4; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
  .print-table-section th { color:#252a33; background:#edf0f4; font-size:9px; text-align:left; }
  .print-table-section td small { display:block; margin-top:3px; color:#6b7280; font-size:8px; }
  .print-table-section a { color:#1769e0; }
  .print-comment { white-space:pre-wrap; }
  .print-money { white-space:nowrap; text-align:right; }
  .print-empty { padding:12px; border:1px solid #d9dde4; color:#6b7280; background:#f7f8fa; font-size:11px; text-align:center; }
  .print-cancelled-section { color:#676d78; }
  .print-cancelled-section th { color:#676d78; background:#f3f3f3; }
  .print-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; margin-top:24px; padding-top:14px; border-top:2px solid #151515; }
  .print-footer-comment { grid-column:1 / -1; }
  .keyboard-done-slot { display:flex; min-height:56px; align-items:flex-start; justify-content:center; padding:8px 0 4px; }
  .keyboard-done { width:48%; min-height:44px; margin:0; padding:10px 16px; border:1px solid #cfd8e6; border-radius:13px; color:var(--ink); background:#fff; font-weight:800; text-align:center; visibility:hidden; opacity:0; pointer-events:none; cursor:pointer; }
  .keyboard-done-visible { visibility:visible; opacity:1; pointer-events:auto; }
  textarea { resize:vertical; }
  .toast { position:fixed; z-index:30; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:12px 16px; border-radius:13px; background:#14213d; color:white; box-shadow:0 10px 30px rgba(20,33,61,.25); }
  .hidden { display:none !important; }

  /* The only screen breakpoint in this stylesheet. Everything above is mobile-first and drawn for a
     phone viewport of roughly 360-430px; the shell's 680px cap was the sole desktop concession, so
     in a browser window the same phone-scale components were stretched across nearly twice their
     design width and read as a magnified mobile page. This block restores the intended density on
     a pointer device: the container is narrowed to the width the components were drawn for and a
     few phone-scale chrome values are trimmed. No zoom and no transform - only layout.

     It cannot reach the Telegram Mini App. Telegram renders below this breakpoint anyway, and the
     app marks the document .tg-webapp when the Telegram SDK is present, so even a wide Telegram
     Desktop window keeps the untouched mobile layout. A narrow browser window keeps it too. */
  @media screen and (min-width:900px) {
    html:not(.tg-webapp) .app-shell { max-width:520px; padding-top:30px; padding-bottom:44px; }
    /* Sheets are centred against the shell, so their cap has to follow it or forms end up wider
       than the app behind them. */
    html:not(.tg-webapp) .sheet-panel { max-width:520px; }
    html:not(.tg-webapp) h1 { font-size:21px; }
    html:not(.tg-webapp) h2 { font-size:18px; }
    html:not(.tg-webapp) .avatar { width:38px; height:38px; }
    html:not(.tg-webapp) .balance-card>strong { margin:6px 0 18px; font-size:31px; }
    html:not(.tg-webapp) .state-card { padding:22px; }
    html:not(.tg-webapp) .primary-button,
    html:not(.tg-webapp) .secondary-button { padding:13px; }
  }

  @page { size:A4 portrait; margin:11mm; }
  @media print {
    :root { color-scheme:light; }
    html,body { width:auto; min-height:0; background:#fff !important; color:#000 !important; }
    body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .app-shell { max-width:none; min-height:0; margin:0; padding:0; }
    .print-mode .topbar,.print-mode #loading,.print-mode #startupDiagnostic,.print-mode #error,.print-mode #content,.print-mode .sheet,.print-mode .toast,.print-mode .print-actions { display:none !important; }
    main { margin:0; }
    .print-mode #printView.print-view { display:block !important; width:auto; margin:0; padding:0; }
    .print-document { overflow:visible; padding:0; border-radius:0; box-shadow:none; }
    .print-document::before { position:fixed; font-size:58pt; }
    .print-header>h1 { font-size:20pt; }
    .print-meta-grid { gap:6px 14px; margin-top:12px; }
    .print-summary { gap:5px; margin:12px 0 16px; }
    .print-total { padding:6px; border-radius:4px; }
    .print-table-section { margin-top:14px; }
    .print-table-section h2 { margin-bottom:5px; font-size:12pt; }
    .print-table-section table { font-size:7.5pt; }
    .print-table-section th { font-size:7pt; }
    .print-table-section th,.print-table-section td { padding:4px; }
    .print-table-section thead { display:table-header-group; }
    .print-table-section tr,.print-summary,.print-footer { break-inside:avoid; page-break-inside:avoid; }
    .print-table-section a { color:#000; text-decoration:none; }
    .print-footer { gap:8px 16px; margin-top:16px; padding-top:9px; }
  }