/* VIKI Books. Calm, readable, built around the numbers. */
:root {
  /* Sea glass and sunshine: cool, airy page; one teal brand colour; each part of the books has its own colour */
  --ink: #1B2140;
  --ink-2: #3A4266;
  --muted: #667092;
  --faint: #9AA3BF;
  --paper: #F6F8FD;
  --surface: #FFFFFF;
  --sunk: #EEF2FA;
  --rule: #E5EAF5;
  --rule-2: #D2DAEC;
  --green: #3D7BFF;
  --green-2: #2A5FD6;
  --green-soft: #E7EEFF;
  --mango: #F4A62A;
  --mango-soft: #FFF4DE;
  --sorrel: #E5484D;
  --sorrel-soft: #FDE9ED;
  --leaf: #0E8F9C;
  --leaf-soft: #E0F5F6;
  --sky: #3D7BFF;
  /* colours for each part of the books (menu tiles and page headers) */
  --a-home: #3D7BFF; --a-in: #0FA3B1; --a-out: #E5547A; --a-bank: #2F6FEB; --a-people: #8B5CF6; --a-tax: #EE9612;
  --a-assets: #0EA5B7; --a-books: #8B5E3C; --a-reports: #5B63E6; --a-settings: #556274; --a-accountant: #1B2140; --a-requests: #D9469C; --a-firm: #3D7BFF;
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(27, 36, 51, .04), 0 6px 20px rgba(27, 36, 51, .045);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --side: 256px;
  color-scheme: light;
}
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-medium.woff") format("woff"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-bold.woff") format("woff"); font-weight: 700 800; font-display: swap; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--paper); }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--mango) 70%, white); outline-offset: 1px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 650; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 .6em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.term { color: var(--faint); font-weight: 400; font-size: .86em; margin-left: .4em; }
.term::before { content: "("; } .term::after { content: ")"; }

/* Money: the symbol and cents step back so the whole dollars read first */
.m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.m .cur { font-size: .74em; color: var(--faint); margin-right: .15em; font-weight: 500; letter-spacing: .02em; }
.m .c { opacity: .62; }
.m.neg { color: var(--sorrel); }
.big .m { font-size: 30px; font-weight: 650; font-family: var(--font-display); letter-spacing: -0.02em; }
.big .m .cur { font-size: 14px; vertical-align: 9px; }
.big .m .c { font-size: 18px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { background: var(--surface); color: var(--ink-2); border-right: 1px solid var(--rule); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 12px; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand svg { flex: none; }
.brand small { display: block; font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: 0; line-height: 1.3; }
.co-switch { margin: 4px 14px 8px; position: relative; }
.co-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left; }
.co-btn:hover { border-color: var(--rule-2); background: var(--sunk); }
.co-btn .co-name { flex: 1; min-width: 0; font-weight: 650; font-size: 14px; line-height: 1.25; }
.co-btn .co-name small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.chip { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: none; }
.co-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 16px 40px rgba(27, 36, 51, .16); z-index: 30; padding: 6px; max-height: 60vh; overflow: auto; }
.co-menu a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.co-menu a:hover, .co-menu a.on { background: var(--green-soft); }
.co-menu .sep { height: 1px; background: var(--rule); margin: 6px 4px; }
.nav { padding: 2px 12px 20px; flex: 1; }
.nav .grp { font-size: 12.5px; color: var(--faint); margin: 18px 10px 6px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 11px; color: var(--ink-2); padding: 5px 8px; border-radius: 12px; text-decoration: none; font-size: 14.5px; font-weight: 550; }
.nav a:hover { background: var(--paper); text-decoration: none; }
.nav a .tile { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--ac) 13%, white); color: var(--ac); transition: background .15s, color .15s; }
.nav a .tile svg { width: 17px; height: 17px; }
.nav a.sub { padding: 4px 8px 4px 49px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav a.sub:hover { color: var(--ink); }
.nav a.on { background: color-mix(in srgb, var(--ac, var(--green)) 9%, white); color: var(--ink); font-weight: 650; }
.nav a.on .tile { background: var(--ac); color: #fff; }
.nav a.sub.on { color: var(--ac, var(--green-2)); background: none; font-weight: 650; }
.side-foot { padding: 14px 20px 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); }
.side-foot b { color: var(--ink); font-weight: 650; }
.side-foot button { background: none; border: 0; color: var(--green); text-decoration: underline; padding: 0; cursor: pointer; font-size: 12.5px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 12px; padding: 10px 28px; }
.menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.search { position: relative; flex: 1; max-width: 560px; }
.search input { width: 100%; border: 1px solid var(--rule-2); background: var(--surface); border-radius: 999px; padding: 8px 14px 8px 38px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; z-index: 40; max-height: 70vh; overflow: auto; }
.search-res .sr-h { font-size: 12px; color: var(--muted); padding: 6px 10px 2px; font-weight: 600; }
.search-res a { display: block; padding: 8px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.search-res a:hover, .search-res a.on { background: var(--green-soft); }
.search-res a small { display: block; color: var(--muted); font-size: 12.5px; }
.top .who { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; line-height: 1.3; }
.content { padding: 26px 28px 60px; max-width: 1280px; width: 100%; }

/* ---------- page header and help ---------- */
.ph { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ph .t { flex: 1; min-width: 240px; }
.ph .t p { color: var(--muted); margin: 4px 0 0; }
.ph .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.help { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--mango); border-radius: var(--radius); padding: 12px 16px; margin: -4px 0 18px; font-size: 14px; color: var(--ink-2); display: flex; gap: 12px; }
.help .hx { flex: 1; }
.help ul { margin: 6px 0 0; padding-left: 18px; }
.help li { margin: 2px 0; }
.help .close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; align-self: flex-start; }
.help-toggle { background: none; border: 1px solid var(--rule-2); border-radius: 999px; padding: 4px 10px; color: var(--muted); font-size: 13px; cursor: pointer; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: var(--radius-s); cursor: pointer; font-weight: 550; font-size: 14px; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn:hover { border-color: var(--faint); text-decoration: none; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-2); }
.btn.danger { color: var(--sorrel); }
.btn.danger:hover { border-color: var(--sorrel); }
.btn.ghost { border-color: transparent; background: none; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--green); cursor: pointer; font-size: inherit; }
.linkbtn:hover { text-decoration: underline; }
.icon-btn { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 4px; border-radius: 4px; }
.icon-btn:hover { color: var(--sorrel); background: var(--sorrel-soft); }

/* ---------- cards and grids ---------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.grid > .card + .card, .clients > .card + .card { margin-top: 0; }
.card h2 { margin-bottom: 12px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; flex: 1; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat .lab { color: var(--muted); font-size: 13.5px; }
.stat .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.stat .big { margin: 2px 0; }
.stat.warn .big .m { color: var(--sorrel); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.pill.open { background: #E7EEF8; color: var(--sky); }
.pill.partial { background: var(--mango-soft); color: #8A5A07; }
.pill.paid { background: var(--leaf-soft); color: var(--leaf); }
.pill.overdue { background: var(--sorrel-soft); color: var(--sorrel); }
.pill.void { background: var(--sunk); color: var(--faint); text-decoration: line-through; }
.pill.locked { background: var(--sunk); color: var(--muted); }
.pill.high { background: var(--sorrel-soft); color: var(--sorrel); }
.pill.medium { background: var(--mango-soft); color: #8A5A07; }
.pill.low { background: var(--sunk); color: var(--muted); }
.ok { color: var(--leaf); font-weight: 600; }
.bad { color: var(--sorrel); font-weight: 600; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
table.t th.num { text-align: right; }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: #F6FAF8; }
table.t tr.voided td { color: var(--faint); }
table.t tfoot td { font-weight: 650; border-top: 2px solid var(--rule-2); border-bottom: 0; }
table.t td.act { width: 1%; white-space: nowrap; text-align: right; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* report tables */
.report { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; }
.report-head { text-align: center; margin-bottom: 20px; }
.report-head .co { font-weight: 600; color: var(--muted); font-size: 14px; }
.report-head h1 { font-size: 24px; margin: 4px 0; }
.report-head .sub { color: var(--muted); font-size: 14px; }
table.r { width: 100%; border-collapse: collapse; font-size: 14px; }
table.r th { font-size: 12.5px; color: var(--muted); font-weight: 600; text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
table.r th:first-child { text-align: left; }
table.r td { padding: 5px 10px; }
table.r td:first-child { min-width: 230px; }
table.r td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.r tr.section td { padding-top: 18px; font-weight: 700; font-size: 15px; color: var(--green-2); }
table.r tr.group td { padding-top: 10px; font-weight: 600; }
table.r tr.account td:first-child { padding-left: 28px; }
table.r tr.account.i2 td:first-child { padding-left: 44px; }
table.r tr.account:hover td { background: #F6FAF8; }
table.r tr.account a { color: inherit; }
table.r tr.account td .code { color: var(--faint); font-size: 12.5px; margin-right: 8px; font-variant-numeric: tabular-nums; }
table.r tr.subtotal td { font-weight: 600; border-top: 1px solid var(--rule); }
table.r tr.subtotal.i1 td:first-child { padding-left: 28px; }
table.r tr.total td { font-weight: 700; border-top: 1px solid var(--rule-2); padding-top: 8px; padding-bottom: 8px; }
table.r tr.grand td { font-weight: 750; border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); padding: 9px 10px; font-size: 15px; }
table.r tr.opening td { color: var(--muted); font-style: italic; }
table.r tr.line td { font-size: 13.5px; border-bottom: 1px solid #F0F3F1; }
table.r td .neg { color: var(--sorrel); }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.check.yes { background: var(--leaf-soft); color: var(--leaf); }
.check.no { background: var(--sorrel-soft); color: var(--sorrel); }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.controls label { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.controls .presets { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- forms ---------- */
.form { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.form .wide { grid-column: 1 / -1; }
.form .two { grid-column: span 2; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.f > span small { font-weight: 400; color: var(--muted); }
.f .hint { font-size: 12.5px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input:not([type]), select, textarea {
  border: 1px solid var(--rule-2); background: var(--surface); border-radius: var(--radius-s); padding: 8px 10px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: 2px solid var(--green-soft); outline-offset: 0; }
input[readonly] { background: var(--sunk); }
textarea { min-height: 70px; resize: vertical; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--green); }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.form-actions .spacer { flex: 1; }
.err { background: var(--sorrel-soft); color: var(--sorrel); border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.note { background: var(--mango-soft); color: #6E4A08; border-radius: var(--radius-s); padding: 10px 14px; font-size: 14px; }
.info { background: var(--green-soft); color: var(--green-2); border-radius: var(--radius-s); padding: 10px 14px; font-size: 14px; }

/* document line editor */
table.lines { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lines th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 6px 6px; border-bottom: 1px solid var(--rule-2); }
table.lines td { padding: 5px 4px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.lines td input, table.lines td select { padding: 7px 8px; }
table.lines .c-qty { width: 76px; } table.lines .c-price { width: 120px; } table.lines .c-vat { width: 150px; } table.lines .c-amt { width: 120px; text-align: right; }
table.lines .c-acct { width: 220px; } table.lines .c-cls { width: 140px; } table.lines .c-x { width: 34px; } table.lines .c-dr, table.lines .c-cr { width: 130px; }
table.lines td.amt { text-align: right; padding-top: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals { margin-left: auto; width: min(380px, 100%); margin-top: 14px; font-size: 14.5px; }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 17px; }
.diff-bad { color: var(--sorrel); font-weight: 600; }

/* ---------- invoice paper ---------- */
.paper { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 44px; max-width: 860px; }
.paper .ph2 { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.paper .from h2 { font-size: 20px; color: var(--green-2); }
.paper .from div, .paper .to div { font-size: 13.5px; color: var(--ink-2); }
.paper .doc-title { text-align: right; }
.paper .doc-title h1 { font-size: 26px; letter-spacing: .02em; color: var(--green-2); }
.paper .meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 13.5px; justify-content: end; margin-top: 8px; }
.paper .meta span:nth-child(odd) { color: var(--muted); text-align: right; }
.paper table.t th { color: var(--ink-2); }
.paper .foot { margin-top: 30px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; white-space: pre-line; }
.stamp { display: inline-block; border: 2px solid currentColor; padding: 2px 10px; border-radius: 4px; font-weight: 800; letter-spacing: .08em; transform: rotate(-4deg); }
.stamp.paid { color: var(--leaf); } .stamp.void { color: var(--sorrel); }

/* ---------- firm dashboard ---------- */
.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.client { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.client .ch { display: flex; gap: 12px; align-items: center; padding: 16px 18px 12px; }
.client .ch .chip { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
.client .ch h2 { font-size: 17px; }
.client .ch .muted { font-size: 13px; }
.client .nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.client .nums > div { padding: 10px 14px; }
.client .nums > div + div { border-left: 1px solid var(--rule); }
.client .nums .lab { font-size: 12px; color: var(--muted); }
.client .nums .m { font-weight: 650; font-size: 14px; }
.client .nums > div { min-width: 0; overflow-wrap: anywhere; }
.client .tasks { list-style: none; margin: 0; padding: 10px 18px; flex: 1; }
.client .tasks li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 14px; }
.client .tasks li .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.dot.high { background: var(--sorrel); } .dot.medium { background: var(--mango); } .dot.low { background: var(--rule-2); }
.client .tasks li a { color: var(--ink); }
.client .tasks li .m { margin-left: auto; color: var(--muted); font-size: 13px; }
.client .cf { padding: 12px 18px; display: flex; gap: 8px; align-items: center; background: #FAFCFB; border-top: 1px solid var(--rule); }
.deadlines { list-style: none; margin: 0; padding: 0; }
.deadlines li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.deadlines li:last-child { border-bottom: 0; }
.deadlines .when { width: 74px; flex: none; font-weight: 650; color: var(--green-2); font-variant-numeric: tabular-nums; }
.deadlines .when small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

/* bars chart */
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 10px; }
.bars .b { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.bars .pair { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.bars .in, .bars .out { width: 42%; border-radius: 3px 3px 0 0; min-height: 2px; }
.bars .in { background: var(--green); } .bars .out { background: #C9D3CE; }
.bars .lab { font-size: 11.5px; color: var(--muted); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* bank cards */
.bank-card { display: block; color: inherit; text-decoration: none; }
.bank-card:hover { text-decoration: none; border-color: var(--green); }
.bank-card .bn { font-size: 13px; color: var(--muted); }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule-2); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; font-weight: 550; }
.tabs a.on { color: var(--green-2); border-bottom-color: var(--green); }
.tabs a:hover { color: var(--ink); }

/* modal & toast */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 25, 22, .45); z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(640px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.wide { width: min(900px, 100%); }
.modal header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal header h2 { flex: 1; }
.modal .body { padding: 18px 20px; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface); }
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 14px; max-width: 380px; animation: tin .18s ease-out; }
.toast.error { background: var(--sorrel); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* attachments and notes */
.att { display: flex; gap: 8px; flex-wrap: wrap; }
.att a { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--rule); border-radius: 6px; padding: 5px 10px; font-size: 13px; background: #FAFCFB; }
.notes .n { border-left: 3px solid var(--rule-2); padding: 4px 10px; margin: 8px 0; font-size: 14px; }
.notes .n small { color: var(--muted); display: block; }
.diff { font-size: 12.5px; background: var(--sunk); border-radius: 6px; padding: 8px 10px; overflow-x: auto; }
.diff div { white-space: nowrap; }
.diff .was { color: var(--sorrel); text-decoration: line-through; }
.diff .now { color: var(--leaf); }

/* login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .art { background: var(--green-2); color: #E6EFEC; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login .art h1 { font-size: 40px; color: #fff; max-width: 13ch; line-height: 1.1; margin-top: 40px; }
.login .art p { max-width: 42ch; color: #BFD6D0; font-size: 16px; margin-top: 16px; }
.login .ledger { position: absolute; right: 40px; bottom: 40px; width: 380px; opacity: .14; font-variant-numeric: tabular-nums; font-size: 15px; color: #fff; line-height: 2; text-align: right; }
.login .pane { display: grid; place-items: center; padding: 40px 24px; }
.login form { width: min(380px, 100%); display: grid; gap: 14px; }
.demo-users { margin-top: 26px; width: min(380px, 100%); }
.demo-users h3 { font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.demo-users button { display: flex; width: 100%; text-align: left; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; }
.demo-users button:hover { border-color: var(--green); }
.demo-users button small { color: var(--muted); display: block; font-size: 12.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  .app.nav-open .side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; }
  .menu-btn { display: block; }
  .top { padding: 10px 16px; }
  .top .who { display: none; }
  .content { padding: 18px 16px 50px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .report, .paper { padding: 20px 16px; }
  .login { grid-template-columns: 1fr; }
  .login .art { padding: 28px; }
  .login .art h1 { font-size: 30px; margin-top: 12px; }
  .login .ledger { display: none; }
  table.lines thead { display: none; }
  table.lines, table.lines tbody, table.lines tr, table.lines td { display: block; width: 100% !important; }
  table.lines tr { border: 1px solid var(--rule); border-radius: 8px; padding: 8px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  table.lines td { border: 0; padding: 0; }
  table.lines td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); }
  table.lines td.c-desc, table.lines td.c-acct { grid-column: 1 / -1; }
  .form .two { grid-column: 1 / -1; }
  table.t.stack thead { display: none; }
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display: block; width: 100%; }
  table.t.stack tr { border-bottom: 1px solid var(--rule); padding: 10px 14px; }
  table.t.stack td { border: 0; padding: 2px 0 !important; text-align: left; min-width: 0 !important; }
  table.t.stack td.act > div { justify-content: flex-start !important; flex-wrap: wrap; margin-top: 6px; }
}
@media (max-width: 560px) { .g4 { grid-template-columns: 1fr; } .clients { grid-template-columns: 1fr; } .client .nums { grid-template-columns: 1fr 1fr 1fr; } h1 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- print ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 12px; }
  .side, .top, .subnav, .ph .acts, .help, .controls, .no-print, .toasts, .tabs { display: none !important; }
  .app { display: block; }
  .content { padding: 0; max-width: none; }
  .report, .paper, .card { border: 0; box-shadow: none; padding: 0; }
  table.r tr.account:hover td { background: none; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- branding on reports ---------- */
.brand-row { display: flex; gap: 18px; align-items: flex-start; }
.brand-row .co-logo { max-height: 64px; max-width: 160px; object-fit: contain; }
.firm-brand { display: flex; gap: 10px; align-items: center; text-align: right; font-size: 13px; color: var(--muted); }
.firm-brand img { max-height: 44px; max-width: 120px; object-fit: contain; }
.firm-brand b { color: var(--ink); }
.paper .co-logo { max-height: 70px; max-width: 180px; object-fit: contain; margin-bottom: 8px; display: block; }

/* ---------- AI assistant ---------- */
.ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; border-radius: 999px; padding: 12px 18px; box-shadow: 0 6px 20px rgba(11, 71, 64, .25); }
.ai-panel { position: fixed; right: 22px; bottom: 22px; z-index: 41; width: min(430px, calc(100vw - 32px)); height: min(640px, calc(100vh - 44px)); background: var(--card, #fff);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow: hidden; }
.ai-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--green-2, #0B4740); color: #fff; }
.ai-panel header h2 { font-size: 15px; color: #fff; margin: 0; }
.ai-panel header button { color: #fff; }
.ai-msgs { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ai-msg { padding: 9px 12px; border-radius: 12px; max-width: 88%; white-space: pre-wrap; line-height: 1.45; }
.ai-msg.user { align-self: flex-end; background: var(--green-2, #0B4740); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.assistant { align-self: flex-start; background: var(--sunk, #F1F4F2); border-bottom-left-radius: 4px; }
.ai-draft { align-self: stretch; border: 1px dashed var(--mango, #D9951E); border-radius: 10px; padding: 10px; font-size: 13px; background: #fffaf0; }
.ai-panel form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rule); }
.ai-panel form textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-sugg button { font-size: 12.5px; }
@media print { .ai-fab, .ai-panel { display: none !important; } }

/* ---------- review flags ---------- */
.flag { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.flag:last-child { border-bottom: 0; }
.flag .what { flex: 1; }
.flag .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 9px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; align-items: flex-start; }
.checklist li .ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 700; }
.checklist li .ic.yes { background: var(--leaf-soft); color: var(--leaf); }
.checklist li .ic.no { background: var(--mango-soft); color: #8A5A07; }
.budget-grid input { width: 92px; text-align: right; padding: 4px 6px; font-size: 13px; }
.budget-grid td, .budget-grid th { white-space: nowrap; }
.pack-cover { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.pack-cover h1 { font-size: 34px; color: var(--green-2); }
@media print { .pack-section { page-break-before: always; } }
@media (max-width: 700px) {
  .brand-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .firm-brand { text-align: center; justify-content: center; }
  .brand-row > div { width: 100%; }
}
.grid > * { min-width: 0; }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs a { white-space: nowrap; }
@media (max-width: 700px) { .flag { flex-wrap: wrap; } .flag .acts { width: 100%; justify-content: flex-start; } .paper { padding: 22px 16px; } }

/* "More details" switch on forms: quiet text button */
.linkish { background: none; border: 0; padding: 4px 0; color: var(--green); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { text-decoration-thickness: 2px; }
.more-toggle { margin: 10px 0 2px; }
#more-fields { margin-top: 10px; }

/* "+ New" menu in the top bar */
.new-wrap { position: relative; }
.new-wrap > .btn { gap: 6px; }
.new-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(24, 34, 31, .16); padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 4px 10px; }
.new-menu.hidden { display: none; }
.new-menu .grp { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px 4px; }
.new-menu a { display: block; padding: 7px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: 14px; }
.new-menu a small { display: block; color: var(--muted); font-size: 12px; }
.new-menu a:hover, .new-menu a:focus { background: var(--green-soft); outline: none; }
kbd { font: 600 12px/1 var(--font); background: var(--sunk); border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 7px; }
@media (max-width: 760px) {
  .new-menu { position: fixed; left: 12px; right: 12px; top: 58px; grid-template-columns: 1fr 1fr; max-height: 75vh; overflow: auto; }
  .new-menu > div:last-child { grid-column: 1 / -1; }
}

/* Getting started checklist */
.setup { margin-bottom: 16px; border-left: 4px solid var(--green); }
.setup .meter { height: 6px; background: var(--sunk); border-radius: 99px; overflow: hidden; margin: 2px 0 12px; }
.setup .meter i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; margin-top: 1px; }
.steps li.done .tick { background: var(--green); border-color: var(--green); }
.steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.menu-size { display: block; margin: 16px 8px 4px; background: none; border: 1px dashed var(--rule-2); color: var(--muted); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; width: calc(100% - 16px); text-align: left; }
.menu-size:hover { background: var(--paper); color: var(--ink); }

/* Small action menus on a document (Send, More) */
.menu-wrap { position: relative; display: inline-block; }
.menu-wrap .drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(24, 34, 31, .16); padding: 6px; }
.menu-wrap .drop.hidden { display: none; }
.menu-wrap .drop a, .menu-wrap .drop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; }
.menu-wrap .drop a small { display: block; color: var(--muted); font-size: 12px; }
.menu-wrap .drop a:hover, .menu-wrap .drop button:hover { background: var(--green-soft); }
.menu-wrap .drop .danger { color: var(--sorrel); }
.menu-wrap .drop .danger:hover { background: var(--sorrel-soft); }
.pay-amt { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; background: var(--sunk); border-radius: var(--radius); }
.pay-amt .f { max-width: 220px; margin: 0; }
.pay-amt .hint { flex: 1; min-width: 200px; padding-bottom: 8px; }
tr.picked td { background: var(--green-soft); }

/* Ask VIKI lives in the top bar so it never covers anything on the page */
.ai-fab.docked { position: static; z-index: auto; box-shadow: none; border-radius: var(--radius-s); padding: 8px 12px; gap: 6px; color: var(--green-2); border-color: var(--rule-2); background: var(--surface); white-space: nowrap; }
.ai-fab.docked:hover { background: var(--green-soft); }
.ai-fab.docked.hidden { display: none; }
@media (max-width: 760px) {
  .ai-fab.docked { padding: 8px 10px; }
  .ai-fab.docked .ai-lab { display: none; }
}

/* Account picker: type a code or part of a name (core.js enhanceAccountPicker) */
.acct-pick { position: relative; display: block; width: 100%; }
.acct-pick > select { opacity: 0; pointer-events: none; }
.acct-pick > .acct-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; padding-right: 28px; text-overflow: ellipsis;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D6A66' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; }
table.lines td .acct-pick > .acct-pick-input { padding: 7px 26px 7px 8px; }
.acct-pick-list { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-s); box-shadow: 0 12px 32px rgba(24, 34, 31, .18); overflow: auto; padding: 4px; font-size: 14px; }
.acct-pick-grp { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 3px; }
.acct-pick-opt { padding: 6px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; display: flex; gap: 10px; justify-content: space-between; }
.acct-pick-opt small { color: var(--muted); font-size: 11.5px; }
.acct-pick-opt.on { background: var(--green-soft); }
.acct-pick-opt.sel { font-weight: 600; }
.acct-pick-none { padding: 10px; color: var(--muted); }

/* Year-end: checks only a person can confirm */
.checklist li .ic.manual, .ic.manual { background: var(--sunk); color: var(--muted); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

/* Trial balance: code column */
table.r td.code-cell { font-variant-numeric: tabular-nums; color: var(--muted); width: 80px; white-space: nowrap; }
table.r td a { color: inherit; text-decoration: none; }
table.r td a:hover { color: var(--green); text-decoration: underline; }

/* Firm dashboard: cards / table switch and the table */
.firm-controls { align-items: end; }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius-s); overflow: hidden; margin-left: auto; }
.seg button { background: var(--surface); border: 0; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button.on { background: var(--green); color: #fff; font-weight: 600; }
.firm-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.firm-table th[data-sort]:hover { color: var(--green); }
.firm-table td { vertical-align: middle; }
.firm-table .chip { width: 30px; height: 30px; font-size: 12px; flex: none; }
@media (max-width: 760px) { .seg { margin-left: 0; } }
.firm-controls input[type=search] { width: 100%; padding: 9px 11px; border: 1px solid var(--rule-2); border-radius: var(--radius-s); background: var(--surface); }
.firm-controls input[type=search]:focus { border-color: var(--green); outline: 2px solid var(--green-soft); }
.firm-table { font-size: 13.5px; }
.firm-table td:first-child { min-width: 230px; }
.firm-table th, .firm-table td { padding-left: 10px; padding-right: 10px; }
/* firm table: fit 11 columns on a laptop screen */
.firm-table { font-size: 13px; }
.firm-table th[data-sort] { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.firm-table td:first-child { min-width: 190px; }
.firm-table th, .firm-table td { padding-left: 7px; padding-right: 7px; }
.firm-table .cur { display: none; }

/* =====================================================================
   Look and feel: calm, roomy, friendly. Overrides the basics above.
   ===================================================================== */
body { font-size: 15px; background: var(--paper); }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
h3 { font-weight: 600; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--mango) 75%, white); outline-offset: 2px; border-radius: 6px; }

/* area tiles (menu and page headers) */
.atile { display: grid; place-items: center; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--ac) 13%, white); color: var(--ac); }
.atile.m { width: 34px; height: 34px; border-radius: 10px; }
.atile.l { width: 48px; height: 48px; border-radius: 14px; }

/* top bar */
.top { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--rule); padding: 12px 32px; gap: 10px; }
.search input { background: var(--paper); border: 1px solid transparent; padding: 10px 16px 10px 40px; transition: border-color .15s, background .15s; }
.search input:focus { background: var(--surface); border-color: var(--rule-2); outline: none; box-shadow: 0 0 0 4px var(--green-soft); }
.content { padding: 30px 32px 72px; max-width: 1320px; }

/* page header: coloured tile, big friendly title, help folded away */
.ph { align-items: center; gap: 16px; margin-bottom: 22px; }
.ph .t { min-width: 220px; }
.ph h1 { line-height: 1.15; }
.ph .t p { font-size: 15px; margin-top: 3px; }
.crumb { font-size: 13.5px; margin-bottom: 10px; }
.crumb a { font-weight: 550; }
.help-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--mango-soft); border: 0; border-radius: 999px; padding: 4px 12px 4px 9px; color: #8A5A07; font-size: 13px; font-weight: 600; cursor: pointer; }
.help-toggle:hover { background: color-mix(in srgb, var(--mango) 24%, white); }
.help { background: var(--mango-soft); border: 0; border-radius: var(--radius); padding: 16px 18px; margin: -6px 0 22px; font-size: 14.5px; color: #4A3A16; line-height: 1.55; align-items: flex-start; }
.help > svg { color: #C9840F; flex: none; margin-top: 1px; }
.help .close { background: var(--surface); border-radius: 999px; padding: 5px 12px; color: #8A5A07; font-weight: 600; }
.help b { color: #2F2509; }

/* buttons */
.btn { border-radius: var(--radius-s); padding: 9px 16px; font-weight: 600; border-color: var(--rule-2); transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { border-color: var(--faint); background: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.primary { box-shadow: 0 1px 2px rgba(9, 94, 82, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.primary:hover { background: var(--green-2); border-color: var(--green-2); }
.btn.small { padding: 6px 11px; border-radius: 9px; }
.btn.ghost:hover { background: var(--paper); }

/* panels */
.card, .report, .client, .paper { border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 22px 24px; }
.card + .card { margin-top: 18px; }
.grid { gap: 18px; }
.card h2 { margin-bottom: 14px; }
.card-head { margin-bottom: 14px; }
.card-head a.small { font-weight: 600; }

/* form fields */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input:not([type]), select, textarea {
  border-radius: var(--radius-s); padding: 9px 12px; border-color: var(--rule-2); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }
.f > span { font-size: 13.5px; color: var(--ink-2); }
.form { gap: 16px 20px; }
table.lines td input, table.lines td select { padding: 8px 9px; }

/* tables: more air, fewer lines */
table.t th { font-size: 12.5px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--rule); }
table.t td { padding: 12px; border-bottom: 1px solid var(--rule); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tr.click:hover td { background: var(--paper); }
table.r tr.account:hover td { background: var(--paper); }
table.r tr.section td { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.tbl-wrap { margin: 0 -24px; padding: 0 24px; }

/* status pills */
.pill { font-size: 12px; padding: 3px 10px; font-weight: 650; }
.pill.open { background: #E8EFFE; color: #2457C5; }
.pill.partial, .pill.medium { background: var(--mango-soft); color: #8A5A07; }

/* money and big numbers */
.big .m { font-weight: 600; font-size: 32px; }
.m .cur { color: var(--faint); }

/* tabs: soft pills instead of underlines */
.tabs { gap: 6px; border-bottom: 0; margin-bottom: 20px; padding: 4px; background: var(--sunk); border-radius: 14px; width: fit-content; max-width: 100%; }
.tabs a { border: 0; margin: 0; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--muted); }
.tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 36, 51, .08); }

/* messages */
.info { background: var(--green-soft); color: #0B4F45; border-radius: 12px; padding: 12px 16px; }
.note { background: var(--mango-soft); color: #5E430B; border-radius: 12px; padding: 12px 16px; }
.err { border-radius: 12px; padding: 12px 16px; }

/* toast: a little tick that pops in */
.toasts { bottom: 22px; right: 22px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); border-radius: 14px; padding: 12px 18px 12px 12px; font-weight: 550; animation: tin .28s cubic-bezier(.2, 1.3, .4, 1); }
.toast::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--a-in) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.toast.error::before { background: rgba(255, 255, 255, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes tin { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* modals */
.modal-bg { background: rgba(27, 36, 51, .4); backdrop-filter: blur(2px); }
.modal { border-radius: 20px; box-shadow: 0 24px 70px rgba(27, 36, 51, .3); }
.modal header { padding: 18px 22px; border-bottom-color: var(--rule); }
.modal .body { padding: 20px 22px; }
.modal footer { padding: 14px 22px; }

/* menus that drop down */
.new-menu, .menu-wrap .drop, .search-res { border-radius: 16px; box-shadow: 0 18px 44px rgba(27, 36, 51, .16); }
.new-menu { padding: 12px; gap: 2px 12px; }
.new-menu .grp { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px; }
.new-menu .grp .atile { width: 26px; height: 26px; border-radius: 8px; }
.new-menu .grp .atile svg { width: 15px; height: 15px; }
.new-menu a { border-radius: 10px; font-weight: 550; }
.new-menu a small { font-weight: 400; }
.acct-pick-grp { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* home */
.hello { margin-bottom: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hello h1 { font-size: 30px; }
.hello p { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.hello .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.stat { position: relative; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, box-shadow .15s; }
.stat:hover { border-color: color-mix(in srgb, var(--ac, var(--green)) 45%, var(--rule)); box-shadow: 0 10px 26px rgba(27, 36, 51, .08); text-decoration: none; }
.stat .atile { margin-bottom: 10px; }
.stat .lab { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.stat .lab .term { font-weight: 400; }
.stat .sub { font-size: 13.5px; }
.bars { height: 190px; gap: 8px; }
.bars .in, .bars .out { border-radius: 6px 6px 2px 2px; width: 40%; }
.bars .in { background: var(--a-in); } .bars .out { background: color-mix(in srgb, var(--a-out) 45%, white); }
.legend i { border-radius: 4px; }
.setup { border-left: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box; }
.setup .meter { height: 8px; }
.setup .meter i { background: var(--a-in); }
.steps .tick { width: 26px; height: 26px; }
.steps li.done .tick { background: var(--a-in); border-color: var(--a-in); }
.empty { padding: 40px 10px; }
.empty b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }

/* firm dashboard cards */
.client .cf { background: var(--paper); }
.client .nums, .client .cf { border-color: var(--rule); }
.seg { border-radius: 12px; border-color: var(--rule-2); }
.seg button.on { background: var(--ink); }

/* sign-in page */
.login .art { background: var(--green); }
.login .art h1 { font-weight: 700; letter-spacing: -.02em; }
.login .art::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: color-mix(in srgb, var(--mango) 85%, white); opacity: .9; }
.login .art > * { position: relative; z-index: 1; }
.demo-users button { border-radius: 12px; padding: 10px 14px; }

@media (max-width: 900px) {
  .top { padding: 10px 16px; }
  .content { padding: 20px 16px 60px; }
  .ph .atile.l { width: 40px; height: 40px; border-radius: 12px; }
  h1, .hello h1 { font-size: 24px; }
  .tbl-wrap { margin: 0 -16px; padding: 0 16px; }
  .card { padding: 18px 16px; }
}
@media print { .atile, .help-toggle { display: none !important; } .ph { margin-bottom: 8px; } }
/* fixes after first look */
.top .search input { padding-left: 42px; }
.ph .t { flex: 1 1 360px; }
.ph .term { font-size: .62em; display: inline-block; vertical-align: 3px; }
.ph .acts { margin-left: auto; }
.controls { gap: 12px; }
.controls label { font-size: 13px; font-weight: 600; color: var(--ink-2); gap: 5px; }
.controls input, .controls select { font-size: 14.5px; font-weight: 400; min-width: 150px; }
.controls .presets { width: 100%; gap: 6px; }
.controls .presets .btn { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.controls .presets .btn:hover { border-color: var(--green); color: var(--green-2); }

/* Phones: the home numbers sit side by side, and lists of invoices and bills become easy-to-tap rows */
@media (max-width: 640px) {
  .grid.g4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 14px; }
  .stat .atile { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 8px; }
  .stat .lab { font-size: 13px; }
  .stat .lab .term { display: none; }
  .big .m { font-size: 22px; }
  .big .m .cur { font-size: 11px; vertical-align: 5px; }
  .big .m .c { font-size: 14px; }
  .stat .sub { font-size: 12px; }
  .hello .acts { margin-left: 0; }
  .card:has(> .tbl-wrap > table.doclist) { padding: 4px 0; }
  table.doclist thead { display: none; }
  table.doclist, table.doclist tbody { display: block; }
  table.doclist tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  table.doclist tr:last-child { border-bottom: 0; }
  table.doclist td { display: block; padding: 0; border: 0 !important; }
  table.doclist td:nth-child(3) { grid-area: 1 / 1; font-weight: 600; }
  table.doclist td:nth-child(6) { grid-area: 1 / 2; font-weight: 600; }
  table.doclist td:nth-child(2) { grid-area: 2 / 1; color: var(--muted); font-size: 13px; }
  table.doclist td:nth-child(1) { grid-area: 3 / 1; color: var(--muted); font-size: 13px; }
  table.doclist td:nth-child(5) { grid-area: 2 / 2; justify-self: end; }
  table.doclist td:nth-child(7) { grid-area: 3 / 2; font-size: 13px; color: var(--muted); }
  table.doclist td:nth-child(4) { display: none; }
  .tabs { width: 100%; }
}
.login .art .lg svg rect { fill: #fff; }
.login .art .lg svg path:first-of-type { fill: var(--green); }
.login .art::after { right: -90px; top: -90px; width: 300px; height: 300px; opacity: .92; }
.login .pane > div { width: min(380px, 100%); }
.login .pane form { width: 100%; }
.login .pane h2 { font-family: var(--font-display); font-weight: 600; }

/* Printing: only the document itself (the screen title, tiles and frames stay on screen) */
.firm-brand { max-width: 240px; }
@media print {
  .content:has(.paper, .report, .pack-cover) > .ph, .content:has(.paper, .report, .pack-cover) > .crumb { display: none !important; }
  .report, .paper, .card, .client { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
  .brand-row > div[style*="flex:1"] { min-width: 0; }
  .report-head h1 { font-size: 20px; }
  .tbl-wrap { margin: 0; padding: 0; }
}
.tscroll { overflow-x: auto; max-width: 100%; }
@media print { .tscroll { overflow: visible; } }

/* ---------- Phones: tables keep their shape and scroll inside their panel; reports fit ---------- */
@media (max-width: 640px) {
  .tscroll, .tbl-wrap { -webkit-overflow-scrolling: touch;
    background: linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
                linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
                radial-gradient(farthest-side at 100% 50%, rgba(27, 36, 51, .14), transparent) right / 10px 100% no-repeat scroll; }
  table.t th, table.t td { white-space: nowrap; padding: 10px 9px; font-size: 13.5px; }
  table.t td:first-child, table.t th:first-child { padding-left: 4px; }
  table.t td .small, table.t td div { white-space: normal; }
  table.r { font-size: 13px; }
  table.r td:first-child { min-width: 0; white-space: normal; }
  table.r td, table.r th { padding: 5px 5px; }
  table.r tr.account td:first-child { padding-left: 12px; }
  table.r tr.account.i2 td:first-child { padding-left: 20px; }
  table.r tr.subtotal.i1 td:first-child { padding-left: 12px; }
  table.r td.code-cell { width: auto; padding-right: 2px; }
  .report { padding: 16px 12px; }
  .report-head h1 { font-size: 20px; }
  /* document previews: stack the details under the company name */
  .paper .ph2 { flex-direction: column; gap: 14px; }
  .paper .doc-title { text-align: left; }
  .paper .meta { justify-content: start; }
  .paper .meta span:nth-child(odd) { text-align: left; }
  .paper .meta span { white-space: nowrap; }
  .totals { width: 100%; }
  table.lines .icon-btn { padding: 10px; }
  .ph .term { display: block; margin: 2px 0 0; vertical-align: 0; }
  .firm-brand { max-width: none; }
  .tabs { scroll-snap-type: x proximity; }
  .tabs a { scroll-snap-align: start; }
}
.check-row { justify-content: flex-start; }
.check-row input[type=checkbox] { width: 17px !important; flex: none; }
.controls input[type=checkbox], .controls input[type=radio] { min-width: 0; width: 17px; }
.controls label.check-row { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
/* Phones: wide lists scroll inside their panel with their headings, instead of losing the headings */
@media (max-width: 900px) {
  table.t.stack thead { display: table-header-group; }
  table.t.stack { display: table; width: 100%; }
  table.t.stack tbody { display: table-row-group; }
  table.t.stack tr { display: table-row; padding: 0; border: 0; }
  table.t.stack td { display: table-cell; width: auto; padding: 10px 9px !important; border-bottom: 1px solid var(--rule); }
  table.t.stack td.act > div { flex-wrap: nowrap; margin-top: 0; }
}
/* file pickers look like our buttons */
input[type=file] { font-size: 14px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); border-radius: var(--radius-s); padding: 8px 14px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--paper); }
table.lines .c-vat { width: 170px; }
@media (max-width: 900px) { .login .art::after { display: none; } }
@media (max-width: 640px) {
  .paper .meta { grid-template-columns: auto minmax(0, 1fr); }
  .paper .meta span:nth-child(even) { white-space: normal; overflow-wrap: anywhere; }
}

/* review fixes (accountant screens) */
.firm-brand { max-width: 300px; }
.firm-brand > div { line-height: 1.35; }
.report .tbl-wrap table.r th:first-child, .report .tbl-wrap table.r td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.r td.v, table.r th { white-space: nowrap; }
.presets .btn.ghost, .presets .btn.small { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.presets .btn.ghost:hover, .presets .btn.small:hover { border-color: var(--green); color: var(--green-2); }
.form-actions a.btn.ghost, .form-actions .btn.ghost { border: 1px solid var(--rule-2); background: var(--surface); }
table.r tr.line td:nth-child(2), table.r tr.line td:nth-child(3), table.r tr.line td:nth-child(4), table.r tr.opening td:nth-child(2) { white-space: nowrap; }
table.t td.act { white-space: normal; min-width: 90px; }
table.t td.act > .btn { margin: 2px 0 2px 4px; }
.ai-meter { background: var(--paper); border-radius: 12px; padding: 14px 16px; margin: 6px 0 12px; }
.ai-meter .lab { margin: 8px 0 6px; }
.ai-meter .meter { height: 8px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
.ai-meter .meter i { display: block; height: 100%; background: var(--a-people); border-radius: 99px; }

/* Photos and files picked on a form (attach.js) */
.pick { border: 1.5px dashed var(--rule-2); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.pick-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pick-thumb { position: relative; margin: 0; width: 104px; }
.pick-thumb img, .pick-pdf { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); display: grid; place-items: center; font-weight: 700; color: var(--sorrel); font-size: 13px; }
.pick-thumb figcaption { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.pick-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.pick-add { width: 104px; height: 104px; border-radius: 10px; border: 1.5px dashed var(--green); color: var(--green-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--surface); padding: 6px; }
.pick-add:hover { background: var(--green-soft); }
.pick [data-pick-msg] { margin-top: 8px; }

/* Photos and documents page */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.doc-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; font: inherit; color: inherit; }
.doc-card:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--rule)); }
.doc-thumb { height: 150px; background: var(--sunk); display: grid; place-items: center; overflow: hidden; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-ext { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--sorrel); background: var(--surface); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
.doc-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-meta b { font-size: 14px; }
.doc-meta span, .doc-meta small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta small { color: var(--faint); }
.doc-preview { background: var(--sunk); border-radius: 12px; display: grid; place-items: center; min-height: 200px; overflow: hidden; }
.doc-preview img { max-width: 100%; max-height: 70vh; display: block; }
@media (max-width: 640px) { .doc-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .doc-thumb { height: 120px; } }


.stat .expl { font-size: 12.5px; color: var(--faint); margin: -1px 0 4px; line-height: 1.3; }
@media (max-width: 640px) { .stat .expl { display: none; } }

/* ---------- Sign-in and sign-up: "sea and sky", a friendly note on a white page ---------- */
.login2 { --sk-ink: #1B2140; --sk-sky: #3D7BFF; --sk-sea: #0FA3B1; --sk-flame: #FF7A45;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; color: var(--sk-ink); }
.login2 .art2 { display: flex; flex-direction: column; background: #fff; padding: 32px 48px 32px; }
@media (min-width: 901px) { .login2 .art2 { position: sticky; top: 0; height: 100vh; min-height: 600px; align-self: start; } }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--sk-ink, #1B2140); }
.wordmark i { font-style: normal; color: var(--sk-flame, #FF7A45); }
.art2-copy { margin-top: 8vh; max-width: 560px; }
.art2-copy h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.025em; color: var(--sk-ink); }
.art2-copy p { font-size: 17px; color: #4A5272; margin: 16px 0 0; max-width: 44ch; line-height: 1.55; }
.promises { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.promises li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--sk-ink); font-weight: 550; }
.pdot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, white); }
.scene-card { margin-top: auto; border-radius: 24px; overflow: hidden; line-height: 0; }
.scene-card .scene { width: 100%; height: auto; display: block; }
.login2 .pane { background: #F5F8FF; }
.signin-card { background: #fff; border: 1px solid #E3E8F5; border-radius: 22px; padding: 26px 26px 24px; box-shadow: 0 1px 2px rgba(27, 33, 64, .04), 0 10px 30px rgba(27, 33, 64, .06); }
.signin-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--sk-ink); }
.login2 .btn.primary { background: var(--sk-sky); border-color: var(--sk-sky); box-shadow: 0 1px 2px rgba(61, 123, 255, .3); }
.login2 .btn.primary:hover { background: #2E66E0; border-color: #2E66E0; }
.login2 a { color: #2E66E0; }
.login2 input:focus, .login2 select:focus { border-color: var(--sk-sky); box-shadow: 0 0 0 4px rgba(61, 123, 255, .14); }
.login2 .demo-users button:hover { border-color: var(--sk-sky); }
@media (max-width: 900px) {
  .login2 { grid-template-columns: 1fr; }
  .login2 .art2 { padding: 20px 20px 4px; }
  .art2-copy { margin-top: 22px; }
  .art2-copy h1 { font-size: 32px; }
  .art2-copy p { font-size: 15.5px; }
  .promises { margin-top: 18px; gap: 9px; }
  .promises li { font-size: 14px; }
  .scene-card { margin-top: 20px; border-radius: 18px; }
  .signin-card { padding: 20px 18px; }
}

/* ---------- Personal look (profile.js applyLook): background behind the pages; panels stay white ---------- */
body:not([data-bg="none"]):not([data-bg=""]) .main { position: relative; isolation: isolate; }
body:not([data-bg="none"]):not([data-bg=""]) .main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--bg-image, none); background-size: var(--bg-size, auto); background-repeat: repeat; background-position: center top; background-attachment: fixed; }
body[data-bg="sunrise"] .main::before { background-repeat: no-repeat; }
body[data-bg="photo"] .main::before { background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .2; filter: saturate(.9) blur(1px); }
@media print { .main::before { display: none !important; } #notes-layer { display: none !important; } }

/* profile picture and the "you" link at the bottom of the menu */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; object-fit: cover; overflow: hidden; }
.me-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 12px; padding: 6px; margin: -6px -6px 6px; }
.me-link:hover { background: var(--paper); text-decoration: none; }
.me-link u { color: var(--brand, var(--green)); text-decoration: none; font-weight: 600; }

/* profile page */
.profile .me-row { display: flex; gap: 16px; align-items: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule-2); background: var(--sw); cursor: pointer; padding: 0; display: grid; place-items: center; }
.swatches.big .swatch { width: 40px; height: 40px; }
.swatch span { font-size: 10px; font-weight: 700; color: var(--muted); }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }
.swatch.custom { position: relative; background: conic-gradient(#E5547A, #F4A62A, #12A27E, #2F6FEB, #8B5CF6, #E5547A); overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch.custom span { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.swatch-names { margin-top: 8px; }
.bg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 6px; }
.bg-tiles.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.bg-tile { position: relative; height: 84px; border-radius: 12px; border: 1px solid var(--rule-2); background-color: var(--paper); cursor: pointer; display: flex; align-items: flex-end; padding: 0; overflow: hidden; font: inherit; }
.bg-tile span { width: 100%; background: rgba(255,255,255,.88); font-size: 12.5px; font-weight: 600; padding: 5px 8px; text-align: left; color: var(--ink); }
.bg-tile.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.bg-tile.photo { background: var(--sunk) center / cover; border-style: dashed; }

/* ---------- Sticky notes (notes.js) ---------- */
#notes-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
#notes-layer > * { pointer-events: auto; }
.notes-btn { position: fixed; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(27, 36, 51, .1); }
.notes-btn:hover { background: var(--paper); }
.notes-btn .count { background: var(--mango); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; line-height: 17px; }
.notes-panel { position: fixed; right: 16px; bottom: 60px; width: min(320px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 44px rgba(27, 36, 51, .18); padding: 14px; }
.notes-panel form { display: grid; gap: 8px; }
.notes-panel textarea { min-height: 70px; }
.notes-panel input[type=date] { width: auto; margin-left: 4px; padding: 4px 6px; }
.note-colors { display: flex; gap: 8px; }
.nc input { position: absolute; opacity: 0; }
.nc span { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule-2); cursor: pointer; }
.nc input:checked + span { box-shadow: 0 0 0 3px var(--ink); }
.nc.yellow span, .sticky.yellow, .tucked-row.yellow { background: #FFF1A8; }
.nc.pink span, .sticky.pink, .tucked-row.pink { background: #FFD3E2; }
.nc.blue span, .sticky.blue, .tucked-row.blue { background: #CFE6FF; }
.nc.green span, .sticky.green, .tucked-row.green { background: #D3F5DF; }
.nc.purple span, .sticky.purple, .tucked-row.purple { background: #E6DAFF; }
.tucked { margin-top: 14px; display: grid; gap: 6px; }
.tucked-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.tucked-row small { display: block; color: var(--muted); }
.sticky { position: fixed; width: 220px; border-radius: 4px 4px 14px 4px; box-shadow: 0 8px 20px rgba(27, 36, 51, .18); color: #2B2410; font-size: 14px; transform: rotate(-.6deg); }
.sticky.dragging { transform: rotate(1.5deg) scale(1.02); box-shadow: 0 16px 34px rgba(27, 36, 51, .25); }
.sticky-bar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 2px 10px; cursor: grab; touch-action: none; user-select: none; }
.sticky-bar .where { flex: 1; font-size: 11px; font-weight: 600; opacity: .55; }
.sticky-bar button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; color: #2B2410; opacity: .7; }
.sticky-bar button:hover { background: rgba(0,0,0,.08); opacity: 1; }
.sticky-text { padding: 2px 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 40px; max-height: 220px; overflow: auto; outline: none; }
.sticky-text:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); border-radius: 0 0 12px 4px; }
.sticky.min { width: 170px; }
.sticky-mini { padding: 0 12px 8px; font-size: 12.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .notes-btn { right: 12px; bottom: 12px; padding: 6px 11px; }
  .notes-panel { right: 12px; bottom: 54px; }
  .sticky { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .sticky, .sticky.dragging { transform: none; } }

/* ===================== Home: written like a short note ("Sea and sky") ===================== */
.home { --hi-ink: #1B2140; --hi-sky: #3D7BFF; --hi-sea: #0FA3B1; --hi-flame: #FF7A45; --hi-sun: #F4B528; --hi-soft: #F3F7FF;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
.home-date { color: var(--muted); font-weight: 600; font-size: 14px; margin: 4px 0 6px; }
.home .say { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.32; letter-spacing: -.012em; color: var(--hi-ink); margin: 0 0 20px; max-width: 30ch; }
.home .say .m { color: var(--hi-sky); font-weight: 600; white-space: nowrap; }
.home .say em { font-style: normal; background: linear-gradient(transparent 60%, #FFE0D1 60%); padding: 0 2px; }
.home .say .good { background: linear-gradient(transparent 60%, #D5F3EE 60%); padding: 0 2px; }
.home .quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.home .quick .btn { border-radius: 999px; padding: 9px 16px; }
.home .sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.home .sec-head h2 { font-size: 18px; flex: 1; margin: 0; }
.home .sec-ex { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.home section { margin-bottom: 30px; }
.home .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 22px; }

/* to-do list */
.task { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 16px; background: var(--hi-soft, #F3F7FF); margin-bottom: 8px; border: 1px solid transparent; transition: transform .35s ease, opacity .35s ease, border-color .15s; }
.task:hover { border-color: #D6E2FB; }
.task .t { flex: 1; min-width: 0; }
.task .t b { display: block; font-weight: 650; }
.task .t small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.task .go { font-weight: 700; color: var(--hi-sky, #3D7BFF); font-size: 14px; white-space: nowrap; padding: 6px 10px; border-radius: 999px; }
.task .go:hover { background: #E3ECFF; text-decoration: none; }
.task .ck { width: 26px; height: 26px; border-radius: 9px; border: 2px solid #BCC9E6; background: #fff; cursor: pointer; flex: none; position: relative; transition: background .2s, border-color .2s, transform .2s; }
.task .ck:hover { border-color: var(--hi-sky, #3D7BFF); transform: scale(1.06); }
.task .ck.on { background: var(--hi-sea, #0FA3B1); border-color: var(--hi-sea, #0FA3B1); }
.task .ck.on::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.task.tone-flame { box-shadow: inset 4px 0 0 var(--hi-flame, #FF7A45); }
.task.tone-sun { box-shadow: inset 4px 0 0 var(--hi-sun, #F4B528); }
.task.tone-sea { box-shadow: inset 4px 0 0 var(--hi-sea, #0FA3B1); }
.task.tone-sky { box-shadow: inset 4px 0 0 var(--hi-sky, #3D7BFF); }
.task.leaving { opacity: 0; transform: translateX(24px); }
.task.done { opacity: .55; box-shadow: none; }
.task.done .t b { text-decoration: line-through; text-decoration-color: #9AA7C2; }
.ticked summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 6px 2px; }
.all-clear { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #E4F6F3; color: #0B5F67; margin-bottom: 8px; }

/* Ask VIKI */
.ask { display: flex; align-items: center; gap: 10px; border: 2px solid var(--hi-ink, #1B2140); border-radius: 999px; padding: 6px 6px 6px 18px; background: var(--surface); margin: 6px 0 10px; transition: box-shadow .2s; }
.ask:focus-within { box-shadow: 0 0 0 5px #DCE7FF; }
.ask .ask-ic { color: var(--hi-sky, #3D7BFF); display: grid; place-items: center; }
.ask input { flex: 1; border: 0 !important; box-shadow: none !important; padding: 10px 4px; font-size: 15.5px; background: transparent; min-width: 0; }
.ask .btn.primary { border-radius: 999px; background: var(--hi-ink, #1B2140); border-color: var(--hi-ink, #1B2140); padding: 10px 18px; }
.ask .btn.primary:hover { background: #2B3463; }
.ask.off { border: 1px dashed #BCC9E6; border-radius: 18px; padding: 14px 18px; align-items: flex-start; margin-bottom: 30px; }
.ask-try { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.chip-btn { border: 1px solid #D6E2FB; background: var(--hi-soft, #F3F7FF); color: #2B3463; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-btn:hover { border-color: var(--hi-sky, #3D7BFF); color: var(--hi-sky, #3D7BFF); }

/* reminders and deadlines */
.home .dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.home .dl a { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.home .dl a:hover { border-color: #BCC9E6; transform: translateX(2px); }
.home .dl .when { width: 50px; height: 50px; border-radius: 14px; background: var(--hi-ink, #1B2140); color: #fff; display: grid; place-content: center; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.05; text-transform: uppercase; flex: none; }
.home .dl .when b { font-family: var(--font-display); font-size: 19px; }
.home .dl li.over .when { background: var(--hi-flame, #FF7A45); }
.home .dl .what { flex: 1; min-width: 0; }
.home .dl .what b { display: block; font-weight: 650; }
.home .dl .what small { color: var(--muted); }

/* at a glance */
.home-side { position: sticky; top: 88px; }
.side-h { font-size: 13px; color: var(--muted); font-weight: 700; margin: 6px 0 10px; letter-spacing: .02em; }
.glance { display: block; border: 1px solid var(--rule); background: var(--surface); border-radius: 18px; padding: 15px 18px; margin-bottom: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.glance:hover { border-color: #BCC9E6; box-shadow: 0 8px 24px rgba(27, 33, 64, .07); text-decoration: none; }
.glance .l { display: block; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.glance .v { display: block; margin: 3px 0 2px; }
.glance .v .m { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.glance .v .m .cur { font-size: 13px; vertical-align: 7px; }
.glance .v .m .c { font-size: 16px; }
.glance.warn .v .m { color: var(--hi-flame, #FF7A45); }
.glance .e { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.glance .spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 12px; }
.glance .spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--hi-sky, #3D7BFF); opacity: .85; }
.glance .spark i.neg { background: var(--hi-flame, #FF7A45); }
.glance .spark i:hover { opacity: 1; }
.glance .spark-lab { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.glance.banks .bk { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; }
.glance.banks .bk:first-of-type { margin-top: 8px; }
.glance.banks .bk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glance.banks .bk:hover span { color: var(--hi-sky, #3D7BFF); }

@media (max-width: 1100px) { .home { grid-template-columns: minmax(0, 1fr); } .home-side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .home-side .side-h { grid-column: 1 / -1; margin: 0; } .home-side .glance { margin: 0; } }
@media (max-width: 640px) {
  .home .say { font-size: 25px; }
  .home-side { grid-template-columns: 1fr; }
  .task { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .task .t { flex: 1 1 60%; }
  .task .go { margin-left: 36px; padding-left: 0; }
  .ask { flex-wrap: nowrap; }
  .ask input { font-size: 14.5px; }
  .ask .btn.primary { padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) { .task, .task.leaving { transition: none; } }
.notes-panel, .notes-btn { z-index: 2; }
.sticky { z-index: 1; }
/* Notes: small round button docked bottom-left so it never covers page content */
.notes-btn { left: 16px; right: auto; bottom: 16px; width: 42px; height: 42px; padding: 0; justify-content: center; position: fixed; }
.notes-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notes-btn .count { position: absolute; top: -4px; right: -4px; }
.notes-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--brand-soft, var(--green-soft)); }
.notes-panel { left: 16px; right: auto; bottom: 68px; }
.main { padding-bottom: 72px; }
@media (max-width: 900px) {
  .notes-btn { left: 12px; right: auto; bottom: 12px; width: 40px; height: 40px; padding: 0; }
  .notes-panel { left: 12px; right: auto; bottom: 62px; }
}
.home .ask { margin: 0 0 8px; }
.home .ask-try { margin-bottom: 28px; }
.home .ask.off { margin-bottom: 28px; }
.home .more-tasks { display: block; width: 100%; border: 1px dashed #C9D5F0; background: transparent; border-radius: 14px; padding: 10px; color: var(--hi-sky); font-weight: 650; cursor: pointer; }
.home .more-tasks:hover { background: var(--hi-soft); }
.home-main { min-width: 0; }
@media (max-width: 640px) {
  .home .ask-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .home .ask-try::-webkit-scrollbar { display: none; }
  .home .ask-try .chip-btn { flex: none; }
}

/* ================= Shell: a top bar with tabs (no sidebar) ================= */
.app { display: block; min-height: 100vh; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top .brand { padding: 0; display: flex; align-items: center; text-decoration: none; flex: none; }
.top .brand:hover { text-decoration: none; }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.03em; color: var(--hi-ink, #1B2140); line-height: 1; }
.logo-word i { font-style: normal; color: #FF7A45; display: inline-block; transition: transform .3s; }
.top .brand:hover .logo-word i { transform: translateY(-3px) scale(1.3); }
.top .co-switch { margin: 0; flex: 0 1 230px; min-width: 0; }
.top .co-btn { background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px 5px 5px; gap: 8px; }
.top .co-btn .chip { width: 30px; height: 30px; border-radius: 50%; font-size: 11.5px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; }
.top .co-btn .co-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .co-menu { right: auto; width: 320px; padding: 8px; }
.co-menu #co-find { width: 100%; margin: 0 0 6px; border: 1px solid var(--rule-2); border-radius: 10px; padding: 8px 10px; }
.co-menu .chip { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; flex: none; }
.toptabs { display: flex; gap: 2px; background: #F1F4FC; border-radius: 999px; padding: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.toptabs::-webkit-scrollbar { display: none; }
.toptabs .tab { padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.toptabs .tab:hover { color: var(--ink); background: #fff; text-decoration: none; }
.toptabs .tab.on { background: var(--hi-ink, #1B2140); color: #fff; box-shadow: 0 4px 12px rgba(27, 33, 64, .18); }
.top .search { flex: 0 1 240px; max-width: 240px; }
.top .search input { background: #F1F4FC; padding: 9px 14px 9px 38px; }
.top .new-wrap .btn.primary { border-radius: 999px; padding: 9px 16px; background: var(--hi-flame, #FF7A45); border-color: var(--hi-flame, #FF7A45); color: #fff; box-shadow: 0 6px 16px rgba(255, 122, 69, .28); }
.top .new-wrap .btn.primary:hover { background: #F2662F; border-color: #F2662F; }
.top .new-menu { left: auto; right: 0; }
.me-wrap { position: relative; flex: none; }
.me-btn { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; display: grid; box-shadow: 0 0 0 2px #fff, 0 0 0 4px transparent; transition: box-shadow .15s; }
.me-btn:hover, .me-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-soft, #DCE7FF); }
.me-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; background: #fff; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 44px rgba(27, 36, 51, .16); padding: 8px; z-index: 40; }
.me-menu .me-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.me-menu .me-head b { display: block; }
.me-menu small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.me-menu a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.me-menu a:hover { background: var(--green-soft); }
.me-menu .sep { height: 1px; background: var(--rule); margin: 6px 4px; }
.me-menu button#logout { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font-weight: 600; color: var(--sorrel); cursor: pointer; }
.me-menu button#logout:hover { background: var(--sorrel-soft); }
.me-menu .ver { padding: 2px 10px 4px; color: var(--faint); }
.subnav { background: #fff; border-bottom: 1px solid var(--rule); position: sticky; top: 63px; z-index: 25; }
.subnav-in { display: flex; gap: 6px; padding: 8px 28px; overflow-x: auto; scrollbar-width: none; max-width: 1376px; margin: 0 auto; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: block; padding: 7px 14px; border-radius: 12px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s; max-width: 260px; }
.subnav a small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav a:hover { background: #F5F8FF; text-decoration: none; }
.subnav a.on { background: color-mix(in srgb, var(--ac, #3D7BFF) 10%, white); border-color: color-mix(in srgb, var(--ac, #3D7BFF) 30%, white); color: var(--ink); }
.subnav a.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ac, #3D7BFF); margin-right: 7px; vertical-align: 2px; }
.main { min-height: calc(100vh - 64px); }
.content { margin: 0 auto; padding: 30px 28px 80px; max-width: 1376px; }
.btn.primary { background: var(--green); border-color: var(--green); }
.btn.primary:hover { background: var(--green-2); border-color: var(--green-2); }
@media (max-width: 1540px) {
  .top .search { flex: 0 0 40px; }
  .top .search input { width: 40px; padding: 9px 0 9px 38px; color: transparent; cursor: pointer; }
  .top .search input::placeholder { color: transparent; }
  .top .search:focus-within { position: absolute; left: 16px; right: 16px; top: 10px; max-width: none; z-index: 45; }
  .top .search:focus-within input { width: 100%; padding: 10px 14px 10px 38px; color: var(--ink); cursor: text; background: #fff; border-color: var(--rule-2); }
  .top .search:focus-within input::placeholder { color: var(--faint); }
  .top .co-switch { flex-basis: 200px; }
}
@media (max-width: 1060px) {
  .top { flex-wrap: wrap; row-gap: 10px; padding: 10px 16px; }
  .toptabs { order: 10; flex: 1 1 100%; margin: 0; }
  .top .co-switch { margin-right: auto; flex: 0 1 260px; }
  .subnav { top: 108px; }
  .subnav-in { padding: 8px 16px; }
  .content { padding: 22px 16px 80px; }
}
@media (max-width: 640px) {
  .top .co-btn .co-name { max-width: 120px; }
  .top .new-wrap .btn.primary { padding: 9px 12px; }
  .top .new-wrap .btn.primary span { display: none; }
  .logo-word { font-size: 19px; }
  .subnav a small { display: none; }
  .subnav a { padding: 6px 12px; font-size: 13.5px; }
  .top .new-menu { position: fixed; left: 12px; right: 12px; top: 64px; grid-template-columns: 1fr 1fr; max-height: 75vh; overflow: auto; }
  .top .co-menu { position: fixed; left: 12px; right: 12px; width: auto; top: 64px; }
}
@media print { .subnav, .me-wrap { display: none !important; } }
.top .me-wrap { order: 1; }
.top .ai-fab.docked { border-radius: 999px; background: #EEF3FF; border-color: transparent; color: var(--hi-ink, #1B2140); font-weight: 650; padding: 9px 14px; }
.top .ai-fab.docked:hover { background: #E1EAFF; }
@media (max-width: 640px) { .top .ai-fab.docked { padding: 9px 11px; } .top .ai-fab.docked .lbl, .top .ai-fab.docked span:not(:first-child) { display: none; } }
@media (max-width: 1540px) { .top .search input { border-radius: 50%; height: 40px; padding: 0 0 0 38px; } .top .search:focus-within input { border-radius: 999px; height: auto; padding: 10px 14px 10px 38px; } .top .search svg { left: 12px; } }
@media (max-width: 1060px) { .top, .subnav { position: static; } }
@media (max-width: 640px) {
  .top { gap: 6px; padding: 10px 12px; }
  .top .co-switch { flex: 0 0 auto; margin-right: auto; }
  .top .co-btn { padding: 4px 8px 4px 4px; gap: 4px; }
  .top .co-btn .co-name { display: none; }
  .top .search { flex: 0 0 38px; }
  .top .search input { height: 38px; }
  .top .me-btn .avatar { width: 34px !important; height: 34px !important; }
  .toptabs { margin-top: 2px; }
}
.top .search > svg { pointer-events: none; z-index: 1; }
/* Home for Data entry staff */
.entry-home { grid-template-columns: minmax(0, 860px); }
.entry-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 34px; }
.entry-tile { display: grid; gap: 2px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.entry-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 33, 64, .08); border-color: color-mix(in srgb, var(--ac) 40%, white); text-decoration: none; }
.entry-tile .et-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ac) 14%, white); color: var(--ac); margin-bottom: 8px; }
.entry-tile b { font-size: 16px; }
.entry-tile small { color: var(--muted); font-size: 13px; }
.home .dl.mine .amt { font-weight: 650; white-space: nowrap; }
.home .dl.mine li.void .what b { text-decoration: line-through; color: var(--muted); }
@media (max-width: 640px) { .entry-tiles { grid-template-columns: 1fr 1fr; } }
.ann-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: var(--hi-soft, #F3F7FF); }
.ann-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ann-form input { border: 1px solid var(--rule-2); border-radius: 10px; padding: 8px 10px; background: #fff; }
.ann-form input[type=number] { width: 110px; }
button.linkish { background: none; border: 0; padding: 0; color: var(--green); font-weight: 600; cursor: pointer; font-size: inherit; }
button.linkish:hover { text-decoration: underline; }