:root {
  --tn-primary:#2563eb;
  --tn-primary-dark:#1d4ed8;
  --tn-primary-soft:#eff6ff;
  --tn-green:#16a34a;
  --tn-green-soft:#f0fdf4;
  --tn-red:#dc2626;
  --tn-red-soft:#fef2f2;
  --tn-purple:#7c3aed;
  --tn-purple-soft:#f5f3ff;
  --tn-text:#172033;
  --tn-muted:#64748b;
  --tn-border:#e2e8f0;
  --tn-background:#f8fafc;
  --tn-surface:#fff;
  --tn-dark:#0f172a;
  --tn-sidebar-w:250px;
}

* { box-sizing:border-box; }
body { margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--tn-text); background:var(--tn-background); }
a { text-decoration:none; }

/* AUTH (login / signup / verify / forgot / reset) -- same card look as admin2608's login screen */
/* Stays at the top while the page scrolls (solid, so the form never shows through it). */
.tn-guest-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--tn-border); background:rgba(248,250,252,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tn-guest-topbar .tn-navbar-brand { font-size:19px; }
.tn-guest-topbar .tn-brand-logo { height:32px; }
.tn-guest-topbar a.tn-back-link { color:var(--tn-muted); font-size:13px; font-weight:600; }
.tn-guest-topbar a.tn-back-link:hover { color:var(--tn-primary); }

.tn-admin-login-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 300px); padding:20px; }
.tn-admin-login-card { width:100%; max-width:420px; padding:36px 32px; border:1px solid var(--tn-border); border-radius:16px; background:var(--tn-surface); box-shadow:0 20px 45px rgba(15,23,42,.08); }
.tn-admin-login-brand { display:flex; align-items:center; gap:10px; margin-bottom:26px; font-size:20px; font-weight:800; color:var(--tn-text); }
.tn-admin-login-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--tn-primary); color:#fff; font-size:16px; }
.tn-admin-login-card h1 { margin:0 0 6px; font-size:20px; font-weight:800; }
.tn-admin-login-card p.sub { margin:0 0 22px; color:var(--tn-muted); font-size:13px; }
.tn-form-label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:#334155; }
.tn-form-control { width:100%; height:44px; padding:0 13px; border:1px solid var(--tn-border); border-radius:9px; font-size:14px; color:var(--tn-text); background:#fff; }
select.tn-form-control { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
textarea.tn-form-control { height:auto; padding:11px 13px; resize:vertical; }

/* CUSTOM DROPDOWN -- replaces every <select> in the dashboard. A native
   <select>'s own popup is rendered by the OS/browser and can't be styled
   consistently (different look on every platform, and this site's own
   wrapper card around it doubled up visually) -- this is a plain button +
   floating menu instead, styled identically everywhere. See dropdown.js's
   initDropdowns()/ddSetValue() for the behavior; a hidden <input> carries
   the real name/value so it still works inside a normal POST <form>. */
.tn-dd { position:relative; display:inline-flex; width:100%; }
.tn-dd-trigger { display:flex; align-items:center; gap:9px; width:100%; height:44px; padding:0 13px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; font:inherit; font-size:14px; font-weight:600; color:var(--tn-text); text-align:left; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.tn-dd-trigger:hover { border-color:#cbd5e1; }
.tn-dd.open .tn-dd-trigger, .tn-dd-trigger:focus-visible { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:0; }
.tn-dd-trigger > i:first-child { font-size:12px; color:var(--tn-muted); flex:0 0 auto; }
.tn-dd-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-dd-caret { font-size:10px; color:var(--tn-muted); flex:0 0 auto; transition:transform .15s ease; }
.tn-dd.open .tn-dd-caret { transform:rotate(180deg); }

/* TOAST -- transient post-action feedback (Entry added/updated/deleted,
   Ledger saved, mutation errors). Separate from the persistent inline
   .tn-alert banners still used for auth-page form-validation errors, which
   must stay visible until the user fixes the form, not auto-vanish in a
   few seconds. */
.tn-toast-stack { position:fixed; top:80px; right:16px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.tn-toast { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:10px; background:#fff; border:1px solid var(--tn-border); box-shadow:0 12px 32px rgba(15,23,42,.18); font-size:13.5px; font-weight:600; color:var(--tn-text); animation:tn-toast-in .25s ease; }
.tn-toast-success { border-left:4px solid var(--tn-green); }
.tn-toast-error { border-left:4px solid var(--tn-red); }
.tn-toast-icon { flex:0 0 auto; margin-top:1px; font-size:15px; }
.tn-toast-success .tn-toast-icon { color:var(--tn-green); }
.tn-toast-error .tn-toast-icon { color:var(--tn-red); }
.tn-toast-message { flex:1; line-height:1.4; }
.tn-toast-close { flex:0 0 auto; margin:-2px -2px 0 0; border:0; background:none; padding:2px; color:var(--tn-muted); cursor:pointer; font-size:15px; line-height:1; }
.tn-toast-close:hover { color:var(--tn-text); }
.tn-toast.tn-toast-hide { animation:tn-toast-out .2s ease forwards; }
@keyframes tn-toast-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes tn-toast-out { to { opacity:0; transform:translateX(16px); } }

@media (max-width:640px) {
  .tn-toast-stack { left:16px; right:16px; top:auto; bottom:16px; max-width:none; }
}
.tn-dd-menu { position:fixed; top:calc(100% + 6px); left:0; min-width:180px; overscroll-behavior:contain; max-height:264px; overflow-y:auto; background:#fff; border:1px solid var(--tn-border); border-radius:10px; box-shadow:0 16px 40px rgba(15,23,42,.14); z-index:400; padding:6px; }
.tn-dd-search { position:sticky; top:-6px; z-index:1; display:flex; align-items:center; gap:8px; margin:-6px -6px 6px; padding:8px 10px; background:#fff; border-bottom:1px solid var(--tn-border); }
.tn-dd-search i { font-size:12px; color:var(--tn-muted); flex:0 0 auto; }
.tn-dd-search input { flex:1; min-width:0; height:30px; border:0; outline:0; background:none; font:inherit; font-size:16px; color:var(--tn-text); }
.tn-dd-item[hidden], .tn-dd-empty[hidden] { display:none; }
.tn-dd-empty { padding:12px 11px; font-size:13px; color:var(--tn-muted); }
.tn-dd-item { display:block; width:100%; padding:9px 11px; border:0; background:none; border-radius:7px; font:inherit; font-size:13.5px; font-weight:600; color:var(--tn-text); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.tn-dd-item:hover { background:var(--tn-background); }
.tn-dd-item.active { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-dd-item[data-dd-badge]::after { content:attr(data-dd-badge); display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:11px; font-weight:700; vertical-align:1px; }
.tn-dd-item-device { margin-bottom:4px; box-shadow:0 1px 0 var(--tn-border); }
/* "Add or edit categories" row pinned under a dropdown's options. */
.tn-dd-menu:has(.tn-dd-manage) { padding-bottom:0; }
.tn-dd-manage { position:sticky; bottom:0; display:flex; align-items:center; gap:9px; width:calc(100% + 12px); margin:6px -6px 0; padding:12px 17px; border:0; border-top:1px solid var(--tn-border); background:#fff; font:inherit; font-size:13px; font-weight:700; color:var(--tn-primary); text-align:left; cursor:pointer; }
.tn-dd-manage:hover { background:var(--tn-primary-soft); }
.tn-dd-manage i { font-size:12px; }

/* Small variant -- used inline in the entries filter toolbar. */
.tn-dd-sm .tn-dd-trigger { height:36px; padding:0 10px; font-size:13px; }
.tn-dd-sm .tn-dd-caret { font-size:9px; }
.tn-form-control:focus { outline:0; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.tn-form-group { margin-bottom:16px; }
.tn-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border:1px solid var(--tn-primary); border-radius:9px; background:var(--tn-primary); color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; }
.tn-btn:hover { background:var(--tn-primary-dark); border-color:var(--tn-primary-dark); color:#fff; }
.tn-btn.tn-btn-block { width:100%; }
.tn-btn-outline { background:#fff; color:var(--tn-text); border-color:var(--tn-border); }
.tn-btn-outline:hover { border-color:#94a3b8; color:var(--tn-text); background:#fff; }
.tn-btn-danger { border-color:var(--tn-red); background:var(--tn-red); }
.tn-btn-danger:hover { background:#b91c1c; border-color:#b91c1c; }
.tn-btn-sm { height:34px; padding:0 12px; font-size:13px; }
.tn-btn:disabled { opacity:.6; cursor:not-allowed; }
.tn-btn { line-height:1; text-decoration:none; white-space:nowrap; }
.tn-btn i { display:inline-block; font-size:.95em; line-height:1; }
.tn-alert { margin-bottom:18px; padding:11px 14px; border-radius:9px; font-size:13px; font-weight:600; }
.tn-alert-error { border:1px solid #fecaca; background:var(--tn-red-soft); color:#b91c1c; }
.tn-alert-success { border:1px solid #bbf7d0; background:var(--tn-green-soft); color:#15803d; }
.tn-alert-info { border:1px solid #bfdbfe; background:var(--tn-primary-soft); color:#1d4ed8; }

.tn-auth-mode { display:flex; gap:6px; padding:4px; border-radius:11px; background:var(--tn-background); margin-bottom:24px; }
.tn-auth-mode a { flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--tn-muted); }
.tn-auth-mode a.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 3px rgba(15,23,42,.1); }
.tn-otp-input { text-align:center; letter-spacing:8px; font-size:22px; font-weight:700; }
.tn-stay-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tn-stay-check { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:600; color:var(--tn-text); cursor:pointer; }
.tn-stay-check input { width:16px; height:16px; margin:0; accent-color:var(--tn-primary); cursor:pointer; }
.tn-stay-forgot { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--tn-primary); }
.tn-info-btn { display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border:1px solid var(--tn-border); border-radius:50%; background:#fff; font-size:12px; font-weight:800; line-height:1; color:var(--tn-muted); cursor:pointer; }
.tn-info-btn { position:relative; }
.tn-info-btn::after { content:""; position:absolute; inset:-10px; } /* a bigger tap area than the 20px circle */
.tn-info-btn:hover, .tn-info-btn:focus-visible { border-color:var(--tn-primary); color:var(--tn-primary); outline:0; }
.tn-info-modal-body p { margin:0 0 12px; font-size:14px; line-height:1.65; color:var(--tn-text); }
.tn-info-modal-body .tn-info-note { display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; padding:12px 14px; border:1px solid #fde68a; border-radius:10px; background:#fffbeb; font-size:13px; font-weight:600; color:#92400e; }
.tn-info-modal-body .tn-info-note i { margin-top:3px; flex:0 0 auto; }
.tn-pw { position:relative; }
.tn-pw > .tn-form-control { padding-right:44px; }
.tn-pw-toggle { position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:100%; border:0; background:none; color:var(--tn-muted); font-size:14px; cursor:pointer; }
.tn-pw-toggle:hover { color:var(--tn-text); }
.tn-auth-foot-link { text-align:center; margin-top:14px; font-size:13px; color:var(--tn-muted); }
.tn-auth-foot-link a { color:var(--tn-primary); font-weight:700; }
.tn-email-chip { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--tn-primary-soft); background:var(--tn-primary-soft); border-radius:9px; margin-bottom:16px; font-size:13.5px; font-weight:600; color:var(--tn-text); }

/* SHELL */
.tn-admin-shell { display:flex; min-height:100vh; }

.tn-admin-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--tn-sidebar-w); overflow-y:auto; background:var(--tn-dark); color:#cbd5e1; z-index:20; transition:transform .2s ease; }
.tn-admin-sidebar-brand { display:flex; align-items:center; gap:10px; padding:22px 20px; color:#fff; font-size:17px; font-weight:800; border-bottom:1px solid rgba(255,255,255,.08); }
.tn-admin-sidebar-brand img.tn-brand-logo { height:26px; width:auto; }
.tn-admin-nav { padding:14px 12px; }
.tn-admin-nav-link { display:flex; align-items:center; gap:11px; padding:11px 12px; margin-bottom:3px; border-radius:9px; color:#cbd5e1; font-size:14px; font-weight:600; }
.tn-admin-nav-link i { width:18px; text-align:center; font-size:14px; }
.tn-admin-nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.tn-admin-nav-link.active { background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.tn-admin-nav-divider { margin:16px 12px 8px; color:#64748b; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tn-admin-nav-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; }

.tn-admin-sidebar-close { display:none; border:0; background:transparent; color:#cbd5e1; font-size:18px; margin-left:auto; padding:4px; line-height:1; cursor:pointer; }
.tn-admin-sidebar-close:hover { color:#fff; }

.tn-admin-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:19; }
.tn-admin-sidebar-backdrop.open { display:block; }

.tn-admin-main { flex:1; margin-left:var(--tn-sidebar-w); min-width:0; display:flex; flex-direction:column; }
.tn-admin-topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 26px; border-bottom:1px solid var(--tn-border); background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.02), 0 4px 16px rgba(15,23,42,.04); }
.tn-admin-topbar > div:first-child { min-width:0; }
.tn-admin-topbar-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:800; }
.tn-topbar-short { display:none; }
.tn-admin-topbar-toggle { display:none; border:0; background:transparent; font-size:18px; color:var(--tn-text); }
.tn-admin-content { padding:28px; flex:1; }

.tn-admin-card { padding:24px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; }
.tn-admin-card + .tn-admin-card { margin-top:20px; }
.tn-admin-card-title { margin:0 0 18px; font-size:16px; font-weight:800; }

.tn-admin-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tn-admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.tn-admin-table th { padding:11px 12px; border-bottom:2px solid var(--tn-border); color:#64748b; font-size:11px; font-weight:700; text-align:left; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.tn-admin-table td { padding:13px 12px; border-bottom:1px solid #eef2f7; vertical-align:middle; white-space:nowrap; }
.tn-admin-table tr:last-child td { border-bottom:0; }
.tn-admin-table td.tn-cell-wrap { white-space:normal; min-width:220px; }
.tn-admin-table tr.tn-row-link { cursor:pointer; }
.tn-admin-table tr.tn-row-link:hover { background:var(--tn-background); }

.tn-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px; font-size:11px; font-weight:700; }
.tn-badge-green { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-badge-gray { background:#f1f5f9; color:#64748b; }
.tn-badge-blue { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-badge-purple { background:#f5f3ff; color:#7c3aed; }
.tn-badge-red { background:var(--tn-red-soft); color:var(--tn-red); }

.tn-admin-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; }
.tn-admin-toolbar .tn-form-control { height:40px; width:auto; }
/* A text search field takes the free space (it was stuck at the browser's default ~20 characters, cutting the placeholder off). */
.tn-admin-toolbar input[type="text"].tn-form-control { flex:1 1 240px; min-width:0; }
.tn-admin-toolbar .tn-dd { width:auto; min-width:220px; }
.tn-admin-toolbar .tn-dd-trigger { height:40px; }

@media (max-width:640px) {
  /* Was width:auto for the desktop inline toolbar -- on a narrow screen
     that just shrinks the trigger to fit its current label text (e.g. the
     selected ledger's name) instead of filling the row. */
  .tn-admin-toolbar .tn-dd { width:100%; min-width:0; }
}
.tn-admin-toolbar-spacer { flex:1; }
.tn-admin-list-summary { color:var(--tn-muted); font-size:13px; font-weight:600; white-space:nowrap; }

.tn-empty-state { display:flex; flex-direction:column; align-items:center; gap:6px; padding:56px 20px; text-align:center; color:var(--tn-muted); font-size:13.5px; line-height:1.55; }
/* Only the illustration icon (a direct child) -- never an icon inside a button in here. */
.tn-empty-state > i { display:grid; place-items:center; width:68px; height:68px; margin-bottom:10px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:26px; box-shadow:0 0 0 8px rgba(37,99,235,.05); }
.tn-empty-title { color:var(--tn-text); font-size:16px; font-weight:800; }
.tn-empty-text { max-width:340px; }
.tn-empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }

.tn-pagination-admin { display:flex; align-items:center; gap:6px; margin-top:18px; flex-wrap:wrap; }
.tn-pagination-admin a, .tn-pagination-admin span { min-width:34px; height:34px; display:grid; place-items:center; padding:0 8px; border:1px solid var(--tn-border); border-radius:7px; color:#475569; font-size:13px; font-weight:700; }
.tn-pagination-admin a:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-pagination-admin .active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }
.tn-pagination-admin .disabled { opacity:.4; pointer-events:none; }

.tn-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:18px; font-size:13px; }
.tn-breadcrumb a { color:var(--tn-muted); font-weight:600; }
.tn-breadcrumb a:hover { color:var(--tn-primary); }
.tn-breadcrumb .tn-breadcrumb-sep { color:#cbd5e1; }
.tn-breadcrumb .tn-breadcrumb-current { color:var(--tn-text); font-weight:700; }

.tn-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.tn-detail-item .tn-detail-label { display:block; margin-bottom:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-detail-item .tn-detail-value { font-size:14px; font-weight:600; color:var(--tn-text); overflow-wrap:anywhere; }

.tn-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:18px; }

/* Compact variant -- the entries filter's own live Cash In/Out/Balance
   summary (reflects the active filter, unlike the ledger-wide stat cards
   above), smaller since it's a secondary/contextual number, not the
   ledger's headline totals. */
.tn-stat-grid-compact { margin-top:0; margin-bottom:18px; }
.tn-stat-grid-compact .tn-stat-card { padding:12px 14px; }
.tn-stat-grid-compact .tn-stat-value { font-size:16px; }
.tn-stat-card { padding:16px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-background); transition:box-shadow .15s ease, transform .15s ease; }
.tn-stat-card:hover { box-shadow:0 10px 24px rgba(15,23,42,.07); transform:translateY(-1px); }
.tn-stat-card .tn-stat-label { display:block; margin-bottom:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-stat-card .tn-stat-value { font-size:20px; font-weight:800; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-stat-card.tn-stat-green { background:var(--tn-green-soft); border-color:#bbf7d0; }
.tn-stat-card.tn-stat-green .tn-stat-value { color:var(--tn-green); }
.tn-stat-card.tn-stat-red { background:var(--tn-red-soft); border-color:#fecaca; }
.tn-stat-card.tn-stat-red .tn-stat-value { color:var(--tn-red); }

.tn-filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tn-filter-tabs a { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid var(--tn-border); border-radius:100px; font-size:13px; font-weight:700; color:#475569; background:#fff; transition:.15s; }
.tn-filter-tabs a i { font-size:11px; }
.tn-filter-tabs a:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-filter-tabs a.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); }
.tn-filter-tabs a.tn-filter-tab-in.active { border-color:var(--tn-green); background:var(--tn-green); box-shadow:0 4px 12px rgba(22,163,74,.25); }
.tn-filter-tabs a.tn-filter-tab-out.active { border-color:var(--tn-red); background:var(--tn-red); box-shadow:0 4px 12px rgba(220,38,38,.25); }

/* TOPBAR: notification bell + user menu */
.tn-topbar-actions { display:flex; align-items:center; gap:14px; }
.tn-admin-nav-badge[hidden], .tn-notif-bell .tn-notif-dot[hidden] { display:none; }
.tn-notif-bell { position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:9px; color:#475569; font-size:16px; }
.tn-notif-bell:hover { background:var(--tn-background); color:var(--tn-text); }
.tn-notif-bell .tn-notif-dot { position:absolute; top:5px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:9.5px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
.tn-user-menu { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:100px; }
.tn-user-menu:hover { background:var(--tn-background); }
.tn-user-avatar { width:30px; height:30px; border-radius:50%; background:var(--tn-primary); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:0 0 30px; }
.tn-user-menu-name { font-size:13px; font-weight:700; color:var(--tn-text); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-dropdown-panel { position:absolute; top:56px; right:26px; width:230px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(15,23,42,.14); z-index:30; overflow:hidden; }
.tn-dropdown-panel a, .tn-dropdown-panel button { display:flex; align-items:center; gap:9px; width:100%; padding:11px 16px; border:0; background:none; text-align:left; font-size:13.5px; font-weight:600; color:var(--tn-text); cursor:pointer; }
.tn-dropdown-panel a:hover, .tn-dropdown-panel button:hover { background:var(--tn-background); }
.tn-dropdown-panel .tn-dropdown-heading { padding:12px 16px 8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-dropdown-panel .tn-dropdown-divider { height:1px; background:var(--tn-border); margin:4px 0; }

/* LEDGER CARDS -- quick-link tiles (dashboard home) stay a grid */
.tn-ledger-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.tn-ledger-card { display:flex; flex-direction:column; padding:18px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; transition:box-shadow .15s ease, border-color .15s ease; color:inherit; }
.tn-ledger-card:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; color:inherit; }
.tn-ledger-card-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tn-ledger-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex:0 0 44px; }
.tn-ledger-card-name { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ledger-card-role { font-size:11.5px; font-weight:700; color:var(--tn-muted); text-transform:capitalize; }
.tn-ledger-card-balance-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.tn-ledger-card-balance-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-ledger-card-balance-value { font-size:19px; font-weight:800; }
.tn-ledger-card-flows { display:flex; gap:14px; font-size:12.5px; font-weight:700; margin-top:auto; padding-top:12px; border-top:1px solid #f1f5f9; }
.tn-ledger-card-flows .in { color:var(--tn-green); }
.tn-ledger-card-flows .out { color:var(--tn-red); }
.tn-new-ledger-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; min-height:150px; border:2px dashed var(--tn-border); border-radius:14px; color:var(--tn-muted); font-size:13.5px; font-weight:700; }
.tn-new-ledger-card:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-new-ledger-card i { font-size:22px; }

/* LEDGER LIST -- the Ledgers page itself: one full-width row per ledger */
.tn-ledger-list { display:flex; flex-direction:column; gap:12px; }
.tn-ledger-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:16px 20px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; transition:box-shadow .15s ease, border-color .15s ease; color:inherit; }
.tn-ledger-row:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; color:inherit; }
.tn-ledger-row-info { display:flex; align-items:center; gap:14px; flex:1 1 240px; min-width:200px; }
.tn-ledger-row-name { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ledger-row-role { font-size:11.5px; font-weight:700; color:var(--tn-muted); text-transform:capitalize; }
.tn-ledger-row-stats { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.tn-ledger-row-stat { min-width:88px; }
.tn-ledger-row-stat .tn-stat-label { display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-ledger-row-stat .tn-stat-value { font-size:15px; font-weight:800; }
.tn-ledger-row-chevron { color:#cbd5e1; font-size:14px; margin-left:auto; }

@media (max-width:640px) {
  .tn-ledger-row { gap:14px; }
  .tn-ledger-row-stats { gap:20px; width:100%; justify-content:flex-start; }
  .tn-ledger-row-chevron { display:none; }
}

/* ENTRY LIST -- ledger detail page.
   Desktop (>=900px): .tn-entries-table-wrap (a real <table>, feels like the
   rest of the admin's data tables). Mobile (<900px): .tn-entry-list, flat
   divided rows grouped by date, mirroring the app's CashbookEntryTile --
   deliberately NOT boxed/bordered per-row, so it doesn't nest a card inside
   the .tn-admin-card--table section that already goes edge-to-edge on
   mobile (see the .tn-admin-card--table rules under @media 900px below). */
.tn-entries-table-wrap { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Entries table: text columns wrap (long party names, notes, emails) instead of
   stretching the table past its card; Type / Amount / Date / View stay on one line. */
.tn-entries-table td { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.tn-entries-table td:nth-child(1), .tn-entries-table td:nth-child(2), .tn-entries-table td:nth-child(7), .tn-entries-table td:nth-child(8) { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.tn-entries-table td:nth-child(3) { min-width:130px; max-width:300px; }
.tn-entries-table td:nth-child(4), .tn-entries-table td:nth-child(5) { min-width:100px; }
.tn-entries-table td:nth-child(6) { min-width:170px; max-width:240px; }
.tn-entry-list { display:none; }
.tn-amount-in { color:var(--tn-green); font-weight:700; }
.tn-amount-out { color:var(--tn-red); font-weight:700; }

.tn-entry-date-heading { position:relative; margin-bottom:2px; padding:14px 2px 8px 14px; font-size:12px; font-weight:800; color:var(--tn-text); text-transform:uppercase; letter-spacing:.05em; }
.tn-entry-date-heading::before { content:""; position:absolute; left:0; top:15px; bottom:9px; width:3px; border-radius:100px; background:linear-gradient(180deg,var(--tn-primary),var(--tn-purple)); }
.tn-entry-date-group:first-child .tn-entry-date-heading { padding-top:2px; }
.tn-entry-date-group:first-child .tn-entry-date-heading::before { top:3px; }
.tn-entry-row { padding:14px 2px; border-bottom:1px solid var(--tn-border); transition:background-color .12s ease; }
.tn-entry-date-group:last-child .tn-entry-row:last-child { border-bottom:0; }
.tn-entry-row:active { background-color:var(--tn-background); }
.tn-entry-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.tn-entry-row-main { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.tn-entry-row-icon { flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:13px; margin-top:1px; }
.tn-entry-row-icon.in { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-entry-row-icon.out { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-entry-row-party { font-size:14.5px; font-weight:700; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-row-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tn-entry-row-note { margin-top:10px; font-size:13px; color:var(--tn-text); line-height:1.45; overflow-wrap:anywhere; }
.tn-entry-row-amount { font-size:16px; font-weight:800; white-space:nowrap; }
.tn-entry-row-amount.in { color:var(--tn-green); }
.tn-entry-row-amount.out { color:var(--tn-red); }
.tn-entry-row-footer { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; margin-top:10px; padding-left:46px; font-size:12.5px; font-weight:600; color:var(--tn-muted); }
.tn-entry-row-footer > span { min-width:0; overflow-wrap:anywhere; }
.tn-entry-row-footer .by-you { color:var(--tn-primary-dark); font-weight:700; }
.tn-entry-row-footer i.fa-clock { margin-right:3px; font-size:11px; }

.tn-load-more { display:flex; justify-content:center; margin-top:18px; }
.tn-load-more .tn-btn[aria-busy="true"] { pointer-events:none; opacity:.75; }
.tn-load-more-label { display:inline-flex; align-items:center; gap:8px; }
.tn-load-more .tn-btn[aria-busy="true"] .fa-rotate { animation:tn-spin .7s linear infinite; }
@keyframes tn-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

@media (max-width:900px) {
  .tn-entries-table-wrap { display:none; }
  .tn-entry-list { display:block; }
}

.tn-hidden { display:none !important; }
.tn-load-more-error { margin-top:10px; text-align:center; font-size:12.5px; color:var(--tn-red); }

/* Entries card header (title + count on the left, Add Entry on the right) and filter bar. */
.tn-entries-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.tn-entries-count { display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--tn-muted); }
.tn-filter-spinner { display:none; align-items:center; gap:6px; margin-top:4px; font-size:12.5px; font-weight:700; color:var(--tn-primary); }
.tn-filter-spinner i { animation:tn-spin .7s linear infinite; }
.tn-entries-loading .tn-filter-spinner { display:inline-flex; }
.tn-entries-loading .tn-entries-count { display:none; }

/* Sticks right below the topbar (64px tall, itself sticky at top:0 with a
   higher z-index) on both mobile and desktop -- top:0 here would put this
   at the exact same spot as the topbar and get hidden behind it. A fully
   solid background is required (not the semi-transparent fade this used to
   have) so entries scrolling underneath don't show through while stuck. */
.tn-entries-filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; position:sticky; top:64px; z-index:5; background:#f8fafc; padding:10px 12px; border:1px solid var(--tn-border); border-radius:12px; box-shadow:0 6px 12px -8px rgba(15,23,42,.15); }
/* flex-basis auto (not 0): when the dropdowns don't fit beside the type pills, the
   whole group drops to its own line (side by side) instead of squeezing into a
   narrow column next to them. */
.tn-filter-selects { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 auto; }
.tn-filter-tabs { margin-bottom:0; }

.tn-filter-selects .tn-dd { min-width:172px; width:auto; flex-shrink:0; }
/* Filter buttons always show their full label ("Custom Range", "Dec 20, 2025 –
   Jan 5, 2026") and grow to fit it -- never cut off with "…" (iOS Safari
   sizes a flex <button> differently from Chrome, so don't rely on it). */
.tn-filter-selects .tn-dd-value { flex:0 0 auto; overflow:visible; text-overflow:clip; }

.tn-form-control-sm { height:36px; padding:0 10px; font-size:13px; width:auto; min-width:140px; }
/* Dims everything in the Entries card while a filter refetch is in flight
   -- except the search box, which stays fully usable so typing is never
   interrupted, and the header, which shows the "Updating…" spinner. */
.tn-entries-loading > :not(.tn-entries-search):not(.tn-entries-header) { opacity:.6; pointer-events:none; transition:opacity .15s ease; }
.tn-btn-xs { height:28px; padding:0 9px; font-size:11.5px; }
.tn-filter-clear { color:var(--tn-red); border-color:#fecaca; }
.tn-filter-clear:hover { background:var(--tn-red-soft); border-color:var(--tn-red); color:var(--tn-red); }

@media (max-width:900px) {
  /* One row, scrolled horizontally, instead of wrapping onto several lines
     -- everything (type pills, each dropdown, Clear) keeps its natural
     width and lines up side by side; overflow-x carries whatever doesn't
     fit off-screen to the right instead of pushing it to a new line. */
  /* No boxed-card look here either -- just the sticky scrolling row, flat
     against the page like everything else on mobile. */
  .tn-entries-filters { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--tn-background); border:0; border-radius:0; box-shadow:none; padding:10px 2px; margin-left:-2px; margin-right:-2px; }
  .tn-filter-tabs { flex:0 0 auto; flex-wrap:nowrap; }
  .tn-filter-tabs a { flex:0 0 auto; white-space:nowrap; }
  .tn-filter-selects { flex:0 0 auto; flex-wrap:nowrap; }
  .tn-filter-selects .tn-dd { flex:0 0 auto; width:auto; min-width:150px; }
  .tn-filter-clear { flex:0 0 auto; white-space:nowrap; }
  .tn-entries-filters::-webkit-scrollbar { display:none; }
}

/* Entries text search -- full width above the filter bar (party name, note,
   reference number; see detail_data.php). */
.tn-entries-search { position:relative; margin-bottom:12px; }
.tn-entries-search .tn-form-control { height:42px; padding:0 42px 0 38px; border-radius:11px; }
.tn-entries-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--tn-muted); pointer-events:none; }
.tn-entries-search-clear { position:absolute; right:5px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:none; font-size:14px; color:var(--tn-muted); cursor:pointer; }
.tn-entries-search-clear:hover, .tn-entries-search-clear:focus-visible { background:var(--tn-background); color:var(--tn-text); outline:0; }
.tn-entries-search-clear[hidden] { display:none; }

/* Custom date range -- opens under the filter bar when the date filter is
   "期間を指定": title + ✕ (hide), From / To (flatpickr, see
   datepicker.js) and Apply. */
.tn-entries-range { margin:-6px 0 18px; padding:10px 12px 12px; border:1px solid #bfdbfe; border-radius:12px; background:var(--tn-primary-soft); }
.tn-entries-range[hidden] { display:none; }
.tn-entries-range-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tn-entries-range-title { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--tn-primary-dark); }
.tn-entries-range-title i { font-size:12px; }
.tn-entries-range-close { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; margin-right:-6px; padding:0; border:0; border-radius:8px; background:none; font-size:15px; color:var(--tn-muted); cursor:pointer; }
.tn-entries-range-close:hover, .tn-entries-range-close:focus-visible { background:#dbeafe; color:var(--tn-text); outline:0; }
.tn-entries-range-fields { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 12px; }
.tn-entries-range-field { flex:0 1 200px; min-width:0; }
.tn-entries-range .tn-form-label { margin-bottom:5px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tn-muted); }
.tn-entries-range .tn-date-input { height:40px; }
.tn-entries-range-apply { height:40px; }
.tn-entries-range-error { margin-top:8px; font-size:12.5px; font-weight:600; color:var(--tn-red); }
.tn-entries-range-error[hidden] { display:none; }

@media (max-width:900px) {
  .tn-entries-search { margin-bottom:2px; }
  .tn-entries-range { margin-top:0; }
  /* From | To side by side, Apply full width underneath. */
  .tn-entries-range-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tn-entries-range-apply { grid-column:1 / -1; width:100%; }
}
/* Narrow phones: side by side, a 16px "Sep 10, 2026" gets cut off -- stack them. */
@media (max-width:400px) {
  .tn-entries-range-fields { grid-template-columns:minmax(0,1fr); }
}

/* DATE PICKER -- flatpickr (datepicker.js), restyled to match the dashboard.
   Every selector is body-prefixed: flatpickr's own stylesheet loads after
   this file (ledger/detail.php), so equal specificity would lose to it. */
/* The field itself: read-only text + a calendar icon (the picker opens on tap). */
body .tn-form-control.tn-date-input { padding-right:38px; cursor:pointer; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%2364748b'%3E%3Cpath d='M128 0c13.3 0 24 10.7 24 24v40h144V24c0-13.3 10.7-24 24-24s24 10.7 24 24v40h40c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128c0-35.3 28.7-64 64-64h40V24c0-13.3 10.7-24 24-24zM400 192H48v256c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16V192z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:14px; }
body .tn-form-control.tn-date-input:read-only { background-color:#fff; }
body .flatpickr-calendar { font-family:inherit; border-radius:14px; box-shadow:0 18px 40px rgba(15,23,42,.18), 0 0 0 1px var(--tn-border); }
body .flatpickr-calendar.arrowTop::before, body .flatpickr-calendar.arrowTop::after { border-bottom-color:#fff; }
body .flatpickr-months { padding-top:6px; }
body .flatpickr-current-month { font-size:15px; font-weight:700; }
body .flatpickr-current-month .cur-month { font-weight:700; }
body .flatpickr-months .flatpickr-prev-month:hover svg, body .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--tn-primary); }
body span.flatpickr-weekday { font-size:11.5px; font-weight:700; color:var(--tn-muted); }
body .flatpickr-day { font-weight:500; color:var(--tn-text); border-radius:10px; }
body .flatpickr-day:hover, body .flatpickr-day:focus { background:var(--tn-background); border-color:var(--tn-border); }
body .flatpickr-day.today { border-color:var(--tn-primary); }
body .flatpickr-day.today:hover, body .flatpickr-day.today:focus { background:var(--tn-primary-soft); border-color:var(--tn-primary); color:var(--tn-primary); }
body .flatpickr-day.prevMonthDay, body .flatpickr-day.nextMonthDay { color:#cbd5e1; }
body .flatpickr-day.selected, body .flatpickr-day.startRange, body .flatpickr-day.endRange,
body .flatpickr-day.selected:hover, body .flatpickr-day.startRange:hover, body .flatpickr-day.endRange:hover,
body .flatpickr-day.selected:focus, body .flatpickr-day.startRange:focus, body .flatpickr-day.endRange:focus { background:var(--tn-primary); border-color:var(--tn-primary); color:#fff; font-weight:700; }
body .flatpickr-day.inRange, body .flatpickr-day.inRange:hover { background:var(--tn-primary-soft); border-color:var(--tn-primary-soft); box-shadow:-5px 0 0 var(--tn-primary-soft), 5px 0 0 var(--tn-primary-soft); color:var(--tn-primary-dark); }
body .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
body .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
body .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow:-10px 0 0 var(--tn-primary); }
body .flatpickr-day.week.selected { box-shadow:-5px 0 0 var(--tn-primary), 5px 0 0 var(--tn-primary); }
body .flatpickr-time { border-top:1px solid var(--tn-border); }
body .flatpickr-time input, body .flatpickr-time .flatpickr-am-pm { font-weight:600; color:var(--tn-text); }
body .flatpickr-time input:hover, body .flatpickr-time input:focus, body .flatpickr-time .flatpickr-am-pm:hover, body .flatpickr-time .flatpickr-am-pm:focus { background:var(--tn-primary-soft); }

/* Phones: the calendar opens centered on screen over a dimmed backdrop
   (body.tn-fp-open, toggled by datepicker.js) instead of hanging off the
   field, where it could run off the edge or end up under the keyboard.
   Tapping the backdrop closes it (flatpickr treats that as an outside click). */
@keyframes tn-fp-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:640px) {
  body.tn-fp-open::after { content:""; position:fixed; inset:0; z-index:99998; background:rgba(15,23,42,.45); animation:tn-fp-in .15s ease; }
  body .flatpickr-calendar.open { position:fixed !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; z-index:99999; transform:translate(-50%, -50%); animation:tn-fp-in .15s ease !important; }
  body .flatpickr-calendar.open::before, body .flatpickr-calendar.open::after { display:none; }
  /* Under 16px iOS zooms the whole page in when the hour/minute box is focused. */
  body .flatpickr-time input { font-size:16px; }
}
/* The calendar is ~308px wide -- shrink it slightly on the very narrowest phones. */
@media (max-width:340px) {
  body .flatpickr-calendar.open { transform:translate(-50%, -50%) scale(.92); }
}

.tn-entry-row-view { margin-left:auto; display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:4px 0; font-size:12px; font-weight:700; color:var(--tn-primary); cursor:pointer; }
.tn-entry-row-view i { font-size:10px; }

/* Entry detail/edit modal (built client-side in entries.js from a "View" button's data-view-entry payload). */
.tn-entry-modal-amount { font-size:24px; font-weight:800; }
.tn-entry-modal-rows { margin-top:14px; }
.tn-entry-modal-row { display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--tn-border); font-size:13px; }
.tn-entry-modal-row:last-child { border-bottom:0; }
.tn-entry-modal-label { flex:0 0 100px; color:var(--tn-muted); font-weight:600; }
.tn-entry-modal-value { flex:1; min-width:0; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-modal-note { margin-top:12px; padding:12px; background:var(--tn-background); border-radius:10px; font-size:13px; line-height:1.5; }

/* Who created/last edited this entry -- a byline, deliberately styled
   apart from .tn-entry-modal-rows so it doesn't read as just another fact
   about the entry alongside Party/Category/Payment/Date. */
/* Who created/last edited this entry -- avatar-initial byline, same look
   as .tn-member-avatar elsewhere in this dashboard, deliberately separate
   from .tn-entry-modal-rows above so it reads as a byline, not another
   fact about the entry. */
.tn-entry-byline { margin-top:14px; padding-top:14px; border-top:1px solid var(--tn-border); display:flex; flex-direction:column; gap:12px; }
.tn-entry-byline-row { display:flex; align-items:center; gap:10px; }
.tn-entry-byline-avatar { width:30px; height:30px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:12.5px; font-weight:800; flex:0 0 30px; }
.tn-entry-byline-who { font-size:12.5px; color:var(--tn-muted); }
.tn-entry-byline-who strong { color:var(--tn-text); font-weight:700; }
.tn-entry-byline-time { margin-top:2px; font-size:11.5px; color:var(--tn-muted); }

/* Edit-history list (create/update/delete log) in the entry View modal. */
.tn-entry-history { margin-top:16px; padding-top:14px; border-top:1px solid var(--tn-border); }
.tn-entry-history-title { margin-bottom:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-entry-history-row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; }
.tn-entry-history-action { flex:0 0 auto; min-width:56px; font-weight:700; color:var(--tn-text); }
.tn-entry-history-by { flex:1; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-history-time { flex:0 0 auto; color:var(--tn-muted); }

/* ICON / COLOR PICKER (ledger create/update form) */
.tn-icon-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; max-height:230px; overflow-y:auto; padding:4px; border:1px solid var(--tn-border); border-radius:10px; }
.tn-icon-picker label { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:9px; cursor:pointer; font-size:10.5px; font-weight:600; color:var(--tn-muted); text-align:center; }
.tn-icon-picker label i { font-size:17px; color:var(--tn-text); }
.tn-icon-picker input { position:absolute; opacity:0; pointer-events:none; }
.tn-icon-picker label:has(input:checked) { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-icon-picker label:has(input:checked) i { color:var(--tn-primary); }
.tn-icon-picker label:hover { background:var(--tn-background); }
.tn-color-row { display:flex; align-items:center; gap:14px; }
.tn-color-field { display:flex; align-items:center; gap:8px; }
.tn-color-field input[type="color"] { width:44px; height:38px; padding:2px; border:1px solid var(--tn-border); border-radius:8px; background:#fff; cursor:pointer; }
.tn-ledger-preview { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-background); margin-bottom:18px; }
.tn-ledger-preview .tn-ledger-card-name { font-size:14px; }

/* MEMBER LIST -- plain row (used inline on the ledger detail page) */
.tn-member-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #eef2f7; }
.tn-member-row:last-child { border-bottom:0; }
.tn-member-avatar { width:38px; height:38px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:14px; font-weight:800; flex:0 0 38px; }
.tn-member-email { font-size:13.5px; font-weight:700; overflow-wrap:anywhere; }
.tn-member-meta { font-size:12px; color:var(--tn-muted); margin-top:2px; }
.tn-member-actions { margin-left:auto; display:flex; gap:8px; flex-shrink:0; }

/* MEMBER GRID -- clickable cards (Manage Members page) */
.tn-member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.tn-member-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; cursor:pointer; text-align:left; width:100%; transition:box-shadow .15s ease,border-color .15s ease,transform .1s ease; }
.tn-member-card:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; transform:translateY(-1px); }
.tn-member-card-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; display:grid; place-items:center; font-size:16px; font-weight:800; flex:0 0 44px; }
.tn-member-card-body { min-width:0; flex:1; }
.tn-member-card-email { font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-member-card-meta { display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; }
.tn-member-card-chevron { color:#cbd5e1; font-size:13px; flex:0 0 auto; }

.tn-invite-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; min-height:100px; border:2px dashed var(--tn-border); border-radius:14px; color:var(--tn-primary); font-size:13.5px; font-weight:700; background:none; cursor:pointer; width:100%; }
.tn-invite-card:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); }
.tn-invite-card i { font-size:20px; }

/* MODAL
   Three-part layout: header (fixed at the top), body (the only part that
   scrolls) and, for forms, a footer bar pinned to the bottom of the dialog.
   On phones it becomes a bottom sheet. */
.tn-modal-backdrop { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.tn-modal-backdrop.open { display:flex; animation:tn-modal-fade .18s ease; }
.tn-modal { display:flex; flex-direction:column; width:100%; max-width:420px; max-height:min(88vh,760px); max-height:min(88dvh,760px); overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.05); animation:tn-modal-pop .22s cubic-bezier(.2,.8,.2,1); }
.tn-modal.tn-modal-wide { max-width:580px; }
.tn-modal-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 16px 24px; border-bottom:1px solid var(--tn-border); background:#fff; }
.tn-modal-header h3 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-modal-close { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:var(--tn-background); font-size:22px; line-height:1; color:var(--tn-muted); cursor:pointer; flex:0 0 auto; transition:background .15s ease, color .15s ease; }
.tn-modal-close:hover { background:#e2e8f0; color:var(--tn-text); }
.tn-modal-close:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.tn-modal-body { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:24px; }
/* A body that ends in the footer bar drops its own bottom padding so the
   bar sits flush against the bottom edge of the dialog. */
.tn-modal-body:has(> form > .tn-modal-footer), .tn-modal-body:has(> .tn-modal-footer) { padding-bottom:0; }
.tn-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; justify-content:flex-end; margin:8px -24px 0; padding:14px 24px; border-top:1px solid var(--tn-border); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.tn-modal-footer .tn-btn { height:42px; padding:0 22px; }
.tn-modal-open { overflow:hidden; }
.tn-modal-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:40px 0; color:var(--tn-muted); font-size:13.5px; font-weight:600; }
.tn-modal-loading i { font-size:16px; animation:tn-spin .7s linear infinite; }
.tn-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }

/* Entry add/edit form inside the modal */
.tn-modal .tn-form-label { margin-bottom:7px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--tn-muted); }
.tn-modal .tn-form-control, .tn-modal .tn-dd-trigger { height:46px; border-radius:11px; background:#fff; }
.tn-modal textarea.tn-form-control { height:auto; }
.tn-modal .tn-form-control:hover, .tn-modal .tn-dd-trigger:hover { border-color:#cbd5e1; }
.tn-modal .tn-form-group { margin-bottom:18px; }
.tn-modal .tn-form-row { gap:0 18px; }
.tn-modal .tn-form-row > .tn-form-group { min-width:0; }

/* Cash In / Cash Out segmented switch (was unstyled browser radios). */
.tn-radio-row { display:grid; grid-template-columns:1fr 1fr; gap:4px; height:46px; padding:4px; border:1px solid var(--tn-border); border-radius:11px; background:var(--tn-background); }
.tn-radio-item { position:relative; display:flex; align-items:center; justify-content:center; margin:0; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--tn-muted); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; -webkit-user-select:none; user-select:none; }
.tn-radio-item input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tn-radio-item:hover { color:var(--tn-text); }
.tn-radio-item:has(input:checked) { background:#fff; color:var(--tn-text); box-shadow:0 1px 4px rgba(15,23,42,.14); }
.tn-radio-item:has(input[value="cash_in"]:checked) { background:var(--tn-green); color:#fff; box-shadow:0 4px 12px rgba(22,163,74,.3); }
.tn-radio-item:has(input[value="cash_out"]:checked) { background:var(--tn-red); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.3); }
.tn-radio-item:has(input:focus-visible) { outline:2px solid #93c5fd; outline-offset:2px; }

@keyframes tn-modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes tn-modal-pop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes tn-modal-sheet { from { transform:translateY(100%); } to { transform:none; } }

/* Phones: bottom sheet, full width, stacked fields, full-width footer buttons. */
@media (max-width:640px) {
  .tn-modal-backdrop { align-items:flex-end; padding:0; }
  .tn-modal, .tn-modal.tn-modal-wide { max-width:none; max-height:92vh; max-height:92dvh; border-radius:20px 20px 0 0; animation:tn-modal-sheet .26s cubic-bezier(.2,.8,.2,1); }
  .tn-modal-header { padding:14px 14px 14px 18px; }
  .tn-modal-body { padding:18px; }
  .tn-modal-footer { margin:8px -18px 0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .tn-modal-footer .tn-btn { flex:1 1 0; }
  .tn-modal-body:has(> .tn-modal-actions) { padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .tn-modal .tn-form-row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .tn-modal-backdrop.open, .tn-modal { animation:none; }
}
.tn-modal-member-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tn-modal-member-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; display:grid; place-items:center; font-size:19px; font-weight:800; flex:0 0 52px; }

/* NOTIFICATION LIST */
.tn-notif-item { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #eef2f7; }
.tn-notif-item:last-child { border-bottom:0; }
.tn-notif-item.unseen { background:var(--tn-primary-soft); margin:0 -24px; padding:16px 24px; }
.tn-notif-icon { width:40px; height:40px; border-radius:10px; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:16px; flex:0 0 40px; }
.tn-notif-body { flex:1; min-width:0; }
.tn-notif-title { font-size:13.5px; font-weight:700; }
.tn-notif-time { font-size:12px; color:var(--tn-muted); margin-top:3px; }
.tn-notif-actions { display:flex; gap:8px; margin-top:10px; }

.tn-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tn-form-help { margin-top:5px; color:#94a3b8; font-size:12px; }

/* FOOTER (same visual language as the public site's includes/foot.php) */
.tn-footer { padding:44px 0 24px; margin-top:auto; border-top:1px solid var(--tn-border); background:var(--tn-background); }
.tn-footer .tn-navbar-brand { font-size:18px; font-weight:800; color:var(--tn-text); display:inline-flex; align-items:center; gap:8px; }
.tn-footer .tn-brand-logo { height:30px; width:auto; }
.tn-footer-heading { margin-bottom:12px; font-size:13px; font-weight:700; }
.tn-footer-link { display:block; margin:8px 0; color:var(--tn-muted); font-size:13px; }
.tn-footer-link:hover { color:var(--tn-primary); }
.tn-footer-bottom { border-top:1px solid var(--tn-border); margin-top:28px; padding-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--tn-muted); font-size:12px; }

/* Slim single-row footer -- just the copyright + a couple of links. */
.tn-footer-simple { padding:20px 0; }
.tn-footer-simple .tn-footer-bottom { border-top:0; margin-top:0; padding-top:0; align-items:center; }
.tn-footer-simple .tn-footer-link { display:inline; margin:0; }

@media (max-width:900px) {
  .tn-admin-sidebar { transform:translateX(-100%); box-shadow:0 0 0 100vmax rgba(0,0,0,0); }
  .tn-admin-sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.25); }
  .tn-admin-sidebar-close { display:block; }
  .tn-admin-main { margin-left:0; }
  .tn-admin-topbar-toggle { display:block; }
  .tn-form-row { grid-template-columns:1fr; }
  .tn-admin-content { padding:14px; }

  /* iOS Safari force-zooms the whole page in when a focused text input's
     font-size is under 16px (to make it readable), which is exactly what
     read as "the screen zooms out and goes off-screen" -- every real text
     input on the dashboard uses .tn-form-control, so this one rule covers
     all of them. Desktop keeps its tighter 14px; this is a mobile-only,
     iOS-only quirk. */
  .tn-form-control { font-size:16px; }
  .tn-user-menu-name { display:none; }
  .tn-dropdown-panel { right:14px; }

  /* Flat everywhere on mobile, not just the entries table -- a bordered/
     shadowed box nested inside an already-narrow screen just adds visual
     clutter. .tn-admin-content's own 14px side padding above is the only
     margin now; stacked cards still separate with their normal
     margin-top, just via whitespace instead of a border. */
  .tn-admin-card {
    padding:16px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .tn-admin-card--table {
    padding:0;
  }
  .tn-admin-card--table .tn-admin-card-title,
  .tn-admin-card--table > .d-flex {
    padding:0 2px;
  }
  .tn-admin-card--table .tn-admin-table-wrap {
    margin:0 -2px;
  }
  .tn-admin-card--table .tn-admin-toolbar,
  .tn-admin-card--table .tn-pagination-admin,
  .tn-admin-card--table .tn-empty-state,
  .tn-admin-card--table .tn-filter-tabs {
    padding-left:2px;
    padding-right:2px;
  }
}

/* CATEGORY MANAGER -- second dialog layered over the entry modal. */
.tn-modal-backdrop-top { z-index:120; }
.tn-cat-modal { max-width:460px; }
.tn-cat-body { padding:18px 24px; }
.tn-cat-list { margin:0; padding:0; list-style:none; }
.tn-cat-row { display:flex; align-items:center; gap:8px; min-height:52px; padding:6px 0; border-bottom:1px solid var(--tn-border); }
.tn-cat-row:last-child { border-bottom:0; }
.tn-cat-name { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-cat-name-danger { color:var(--tn-red); }
.tn-cat-edit-input { flex:1; min-width:0; height:38px; }
.tn-cat-row .tn-btn-sm { flex:0 0 auto; }
.tn-cat-icon-btn { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:0; border-radius:9px; background:none; font-size:13px; color:var(--tn-muted); cursor:pointer; transition:background .15s ease, color .15s ease; }
.tn-cat-icon-btn:hover { background:var(--tn-background); color:var(--tn-primary); }
.tn-cat-icon-danger:hover { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-cat-hint { margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--tn-muted); }
.tn-cat-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:30px 10px; text-align:center; color:var(--tn-muted); font-size:13px; }
.tn-cat-empty i { margin-bottom:8px; font-size:26px; color:#cbd5e1; }
.tn-cat-empty strong { color:var(--tn-text); font-size:14px; }
.tn-cat-msg { margin-bottom:12px; padding:10px 13px; border:1px solid #fecaca; border-radius:10px; background:var(--tn-red-soft); color:#b91c1c; font-size:13px; font-weight:600; }
.tn-cat-add { flex:0 0 auto; display:flex; gap:10px; padding:14px 24px; border-top:1px solid var(--tn-border); background:#fff; }
.tn-cat-add .tn-form-control { flex:1; min-width:0; height:44px; border-radius:11px; }
.tn-cat-add .tn-btn { height:44px; }
.tn-cat-busy .tn-cat-body { opacity:.6; pointer-events:none; }
@media (max-width:640px) {
  .tn-cat-body { padding:14px 18px; }
  .tn-cat-add { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .tn-cat-row { flex-wrap:wrap; }
  .tn-cat-name-danger, .tn-cat-edit-input { flex:1 0 100%; }
  .tn-cat-row .tn-btn-sm { flex:1 1 0; }
}

/* BUSY LOCK -- full-screen, above every dialog, blocks all clicks while a save is in flight. */
.tn-busy { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); cursor:progress; }
.tn-busy[hidden] { display:none; }
.tn-busy-box { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:320px; padding:26px 30px; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.35); text-align:center; }
.tn-busy-box i { font-size:26px; color:var(--tn-primary); animation:tn-spin .7s linear infinite; }
.tn-busy-box strong { font-size:15.5px; font-weight:800; }
.tn-busy-box span { font-size:12.5px; line-height:1.5; color:var(--tn-muted); }

/* CENTERED FORM PAGE -- New/Edit Ledger: one column in the middle of the
   content area (breadcrumb lined up with the card), instead of hugging the left. */
.tn-form-page { width:100%; max-width:640px; margin:0 auto; }
.tn-form-page .tn-admin-card { padding:30px; box-shadow:0 12px 40px rgba(15,23,42,.06); }
.tn-form-page .tn-admin-card-title { margin-bottom:22px; text-align:center; font-size:18px; }
.tn-form-page .tn-ledger-preview { justify-content:center; text-align:left; }
.tn-form-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.tn-form-actions .tn-btn { min-width:150px; }
@media (max-width:640px) {
  .tn-form-page .tn-admin-card { padding:20px 16px; }
  .tn-form-actions { flex-direction:column-reverse; }
  .tn-form-actions .tn-btn { width:100%; }
}

/* NOTIFICATIONS -- Received/Sent switch, status filters, item states. */
.tn-seg { display:flex; gap:4px; padding:4px; margin-bottom:16px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-background); }
.tn-seg a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--tn-muted); transition:background .15s ease, color .15s ease; }
.tn-seg a:hover { color:var(--tn-text); }
.tn-seg a.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 4px rgba(15,23,42,.12); }
.tn-seg-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:10.5px; font-weight:800; line-height:1; }
.tn-notif-filters { margin-bottom:14px; }
.tn-notif-icon--accepted { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-notif-icon--rejected, .tn-notif-icon--removed { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-notif-icon--cancelled, .tn-notif-icon--left { background:#f1f5f9; color:var(--tn-muted); }
.tn-notif-title { line-height:1.45; overflow-wrap:anywhere; }
.tn-notif-sub { margin-top:2px; font-size:12.5px; color:var(--tn-muted); overflow-wrap:anywhere; }
.tn-notif-time { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tn-notif-meta { color:var(--tn-muted); }
.tn-notif-new { padding:2px 8px; border-radius:100px; background:var(--tn-primary); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.tn-notif-actions { flex-wrap:wrap; }
.tn-notif-actions form { margin:0; }
.tn-notif-more { display:flex; justify-content:center; margin-top:18px; }
@media (max-width:640px) {
  .tn-notif-item.unseen { margin:0 -16px; padding:16px; }
  .tn-notif-actions .tn-btn { flex:1 1 auto; }
}

/* NUMBERED PAGER (notifications) */
.tn-notif-pager { justify-content:center; margin-top:22px; }
.tn-notif-pager .tn-pager-step { display:inline-flex; align-items:center; gap:7px; padding:0 14px; }
.tn-notif-pager .tn-pager-step i { font-size:10px; }
.tn-notif-pager .tn-pager-disabled { opacity:.45; cursor:default; }
.tn-notif-pager .tn-pager-gap { border:0; min-width:auto; padding:0 2px; color:var(--tn-muted); }
@media (max-width:640px) {
  .tn-admin-toolbar input[type="text"].tn-form-control { flex:1 1 100%; }
}


/* DASHBOARD HOME -- hero, ajax sections and their skeleton placeholders (see index.php / home.js). */
.tn-home-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tn-home-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tn-home-section { margin:20px 0 22px; }
.tn-home-stats { margin-top:0; }
@media (max-width:640px) { .tn-home-stats .tn-stat-card:last-child { grid-column:1 / -1; } }
a.tn-stat-card { display:block; color:inherit; text-decoration:none; }
.tn-stat-card .tn-stat-sub { display:block; margin-top:4px; font-size:12px; color:var(--tn-muted); }
.tn-stat-card.tn-stat-attn { background:var(--tn-primary-soft); border-color:#bfdbfe; }
.tn-stat-card.tn-stat-attn .tn-stat-value { color:var(--tn-primary); }
.tn-home-link { font-size:13px; font-weight:700; color:var(--tn-primary); }
.tn-home-recent-head, .tn-home-attn-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.tn-home-recent-links { display:flex; align-items:center; gap:14px; }
.tn-attn-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid #eef2f7; }
.tn-attn-text { flex:1; min-width:200px; }
.tn-attn-actions { display:flex; gap:8px; }
.tn-home-error { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border:1px solid #fecaca; border-radius:12px; background:var(--tn-red-soft); color:var(--tn-red); font-size:13.5px; font-weight:600; }
.tn-home-error span { flex:1; min-width:160px; }

.tn-skel { display:block; border-radius:8px; background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%); background-size:400% 100%; animation:tn-skel 1.4s ease infinite; }
.tn-skel-line { height:11px; }
.tn-skel-value { width:38%; height:24px; margin:10px 0; }
.tn-skel-icon { width:42px; height:42px; border-radius:12px; flex:0 0 42px; }
.tn-skel-row { pointer-events:none; }
@keyframes tn-skel { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
@media (prefers-reduced-motion:reduce) { .tn-skel { animation:none; } }

/* MEMBERS page: ledger picker and the Invite button share one row (see members/members_data.php). */
.tn-members-bar { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.tn-members-bar-ledger { display:flex; align-items:center; gap:10px; flex:1 1 320px; min-width:0; margin:0; }
.tn-members-bar-ledger .tn-dd { width:auto; flex:0 1 380px; min-width:200px; }
.tn-members-bar-ledger .tn-dd-trigger { height:40px; }
.tn-members-invite { flex:0 0 auto; height:40px; }
@media (max-width:640px) {
  .tn-members-bar { flex-direction:column; align-items:stretch; }
  .tn-members-bar-ledger { flex-basis:auto; }
  .tn-members-bar-ledger .tn-dd { flex:1 1 auto; }
  .tn-members-invite { width:100%; }
}

.tn-notif-skel-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* DASHBOARD HOME > Recent entries: each row links to its ledger. */
.tn-recent-entries { display:block; }
a.tn-recent-entry { display:block; color:inherit; text-decoration:none; }
a.tn-recent-entry:hover { background:var(--tn-background); }
.tn-recent-entry .tn-entry-row-footer { padding-left:46px; }
.tn-recent-entry .tn-badge { max-width:100%; overflow-wrap:anywhere; white-space:normal; }

/* LEDGER > Analyze (ledger/analyze.php + analyze_data.php, drawn by assets/js/analyze.js). */
.tn-analyze-tabs { margin-top:18px; }
.tn-analyze-range-label { display:flex; align-items:center; gap:7px; margin:14px 0 0; font-size:13px; font-weight:600; color:var(--tn-muted); }
.tn-analyze-custom { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-top:16px; }
.tn-analyze-custom .tn-form-group { flex:0 1 180px; min-width:140px; margin-bottom:0; }
.tn-analyze-note { margin:14px 0 0; font-size:12.5px; color:var(--tn-muted); }
.tn-analyze-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.tn-analyze-card-head .tn-admin-card-title { margin:0; }
.tn-analyze-card-head .tn-admin-card-title i { margin-right:6px; font-size:14px; color:var(--tn-muted); }
.tn-analyze-legend { display:flex; gap:16px; font-size:12.5px; font-weight:700; color:#475569; }
.tn-legend-dot { display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:50%; }
.tn-analyze-flow { position:relative; height:300px; }
.tn-analyze-toggle { display:inline-flex; gap:4px; padding:3px; border-radius:100px; background:var(--tn-background); border:1px solid var(--tn-border); }
.tn-analyze-toggle button { padding:6px 14px; border:0; border-radius:100px; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--tn-muted); cursor:pointer; transition:.15s; }
.tn-analyze-toggle button:hover { color:var(--tn-text); }
.tn-analyze-toggle button.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.tn-analyze-toggle button[data-metric="cash_out"].active { color:var(--tn-red); }
.tn-analyze-toggle button[data-metric="cash_in"].active { color:var(--tn-green); }

.tn-analyze-body { display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:28px; align-items:start; }
.tn-analyze-donut { position:relative; width:100%; max-width:260px; margin:0 auto; }
.tn-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 22%; text-align:center; pointer-events:none; }
.tn-donut-center-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-donut-center-value { font-size:16px; font-weight:800; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-donut-empty canvas { opacity:.15; }

.tn-analyze-list { display:flex; flex-direction:column; min-width:0; }
.tn-bar-row { padding:12px 0; border-top:1px solid #eef2f7; }
.tn-bar-row:first-child { padding-top:0; border-top:0; }
.tn-bar-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; min-width:0; }
.tn-bar-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; }
.tn-bar-name { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-bar-count { flex:0 0 auto; font-size:12px; color:var(--tn-muted); }
.tn-bar-line { display:flex; align-items:center; gap:10px; margin-top:5px; }
.tn-bar-tag { flex:0 0 28px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--tn-muted); }
.tn-bar-track { flex:1; min-width:0; height:10px; border-radius:100px; background:#f1f5f9; overflow:hidden; }
.tn-bar-fill { display:block; height:100%; border-radius:100px; }
.tn-bar-in { background:var(--tn-green); }
.tn-bar-out { background:var(--tn-red); }
.tn-bar-amt { flex:0 0 auto; min-width:64px; font-size:13px; font-weight:800; text-align:right; }
.tn-bar-amt-in { color:var(--tn-green); }
.tn-bar-amt-out { color:var(--tn-red); }

@media (max-width:760px) {
  .tn-analyze-body { grid-template-columns:1fr; gap:22px; }
  .tn-analyze-donut { max-width:220px; }
  .tn-analyze-flow { height:240px; }
  .tn-analyze-custom .tn-form-group { flex:1 1 140px; }
  .tn-analyze-custom .tn-btn { flex:1 1 100%; }
}

/* LEDGER > Analyze > Calendar (ledger/_calendar_card.php + calendar_data.php, run by assets/js/calendar.js). */
.tn-cal-card { scroll-margin-top:80px; }
.tn-cal-loading { opacity:.55; pointer-events:none; transition:opacity .15s ease; }
.tn-cal-hint { display:flex; align-items:center; gap:7px; margin:14px 0 0; font-size:12.5px; color:var(--tn-muted); }
.tn-cal-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tn-cal-arrow { flex:0 0 auto; width:40px; height:40px; padding:0; }
.tn-cal-month-input { width:auto; min-width:170px; height:40px; font-weight:700; }
.tn-cal-today { margin-left:auto; height:40px; }
.tn-cal-month-totals { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin-bottom:12px; font-size:13px; font-weight:800; color:var(--tn-text); }
.tn-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.tn-cal-weekday { padding:4px 0 6px; text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-cal-cell { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:4px; min-height:56px; padding:8px 4px 7px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; font:inherit; color:var(--tn-text); cursor:pointer; transition:.12s; }
.tn-cal-cell:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); }
.tn-cal-num { font-size:14px; font-weight:700; line-height:1; }
.tn-cal-dots { display:flex; align-items:center; justify-content:center; gap:4px; min-height:8px; }
.tn-cal-dot { display:block; width:8px; height:8px; border-radius:50%; }
.tn-cal-dot.in { background:var(--tn-green); }
.tn-cal-dot.out { background:var(--tn-red); }
.tn-cal-cell.is-today { border-color:var(--tn-primary); box-shadow:inset 0 0 0 1px var(--tn-primary); }
.tn-cal-cell.is-selected { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.28); }
.tn-cal-cell.is-selected .tn-cal-dot.in { background:#bbf7d0; }
.tn-cal-cell.is-selected .tn-cal-dot.out { background:#fecaca; }
.tn-cal-panel { margin-top:20px; padding-top:18px; border-top:1px solid var(--tn-border); }
.tn-cal-panel-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; font-size:15px; font-weight:800; color:var(--tn-text); }
.tn-cal-none { display:flex; align-items:center; justify-content:center; gap:8px; padding:26px 12px; border:1px dashed var(--tn-border); border-radius:12px; font-size:13.5px; color:var(--tn-muted); }

@media (max-width:640px) {
  .tn-cal-grid { gap:4px; }
  .tn-cal-cell { min-height:46px; padding:6px 2px 5px; border-radius:8px; }
  .tn-cal-num { font-size:13px; }
  .tn-cal-month-input { flex:1 1 auto; min-width:0; }
  .tn-cal-today { margin-left:0; }
}

/* LEDGER: a back button sits on its own row at the top left of a page's header card. */
.tn-back-btn { margin-bottom:16px; }

/* LEDGER > Calendar > the selected day: the same cards as the Analyze page, but flat inside the
   calendar card (a bordered card inside a bordered card looks heavy) -- just a divider between them. */
.tn-cal-panel .tn-admin-card { margin-top:0; padding:20px 0 0; border:0; border-top:1px solid #eef2f7; border-radius:0; background:transparent; }
.tn-cal-panel .tn-admin-card + .tn-admin-card { margin-top:20px; }
.tn-cal-panel .tn-stat-grid-compact { margin-bottom:20px; }

/* AUTH on phones -- Sign In / Create Account / Verify / Forgot / Reset. The white card is dropped: a card inside
   the page's own side padding left the fields only ~250px wide on a 360px screen. Now the form sits straight on
   the page with one 20px gutter, inputs at 16px (so iOS doesn't zoom in on focus) and 48px tall touch targets. */
@media (max-width:640px) {
  .tn-guest-topbar { gap:12px; padding:14px 20px; }
  .tn-guest-topbar .tn-navbar-brand { font-size:18px; }
  .tn-guest-topbar a.tn-back-link { font-size:12.5px; }

  .tn-admin-login-wrap { display:block; min-height:0; padding:32px 20px 36px; }
  .tn-admin-login-card { max-width:none; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .tn-admin-login-brand { margin-bottom:22px; font-size:20px; }
  .tn-admin-login-icon { width:38px; height:38px; }
  .tn-admin-login-card h1 { margin:0 0 8px; font-size:27px; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
  .tn-admin-login-card p.sub { margin:0 0 26px; font-size:15px; line-height:1.55; }

  .tn-auth-mode { margin-bottom:24px; background:#eef2f7; }
  .tn-auth-mode a { padding:11px 0; font-size:14.5px; }

  .tn-admin-login-card .tn-form-group { margin-bottom:18px; }
  .tn-admin-login-card .tn-form-label { margin-bottom:7px; font-size:14px; }
  .tn-admin-login-card .tn-form-control { height:48px; font-size:16px; border-radius:11px; }
  .tn-admin-login-card .tn-otp-input { font-size:24px; }
  .tn-admin-login-card .tn-pw > .tn-form-control { padding-right:48px; }
  .tn-admin-login-card .tn-pw-toggle { width:48px; font-size:16px; }
  .tn-admin-login-card .tn-form-help { font-size:13px; }
  .tn-admin-login-card .tn-alert { font-size:14px; line-height:1.5; }
  .tn-admin-login-card .tn-email-chip { font-size:14.5px; overflow-wrap:anywhere; }
  .tn-admin-login-card .tn-btn { height:50px; font-size:16px; border-radius:11px; }

  /* "Stay signed in" + "?" stay on one line; "Forgot password?" drops to its own line beneath. */
  .tn-stay-row { margin-bottom:22px; row-gap:6px; }
  .tn-stay-check { font-size:14.5px; }
  .tn-stay-check input { width:20px; height:20px; }
  .tn-info-btn { width:22px; height:22px; font-size:13px; }
  .tn-stay-forgot { flex:0 0 100%; margin:4px 0 0; padding:4px 0; font-size:14.5px; }

  .tn-auth-foot-link { margin-top:22px; font-size:14.5px; }
  .tn-footer-simple { padding:16px 0; }
  .tn-footer-simple .container { padding-left:20px; padding-right:20px; }
}

/* Very narrow phones: the top bar shows just the logo, so it stays on one line beside "Back to TallyKnot.com". */
@media (max-width:360px) {
  .tn-guest-topbar .tn-navbar-brand { font-size:0; }
}

/* Phones: a back button says just "Back" (the arrow + word), and the top bar shows just the page ("Analyze"),
   not "Japan Expenses · Analyze" -- the ledger's name is already in the breadcrumb right below. */
@media (max-width:640px) {
  .tn-back-more { display:none; }
  .tn-topbar-full { display:none; }
  .tn-topbar-short { display:inline; }
}

/* ---- Language switch (EN <-> JA) ----
   Desktop: a small pill in the top bar, just before the bell. At the 900px break where the sidebar becomes a
   slide-in menu (phones / tablets) the pill leaves the top bar and the same link appears in the menu instead
   (.tn-admin-nav-lang). The bell stays in the top bar at every size. */
.tn-lang-switch { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--tn-border); border-radius:100px; color:#475569; font-size:12.5px; font-weight:700; white-space:nowrap; }
.tn-lang-switch:hover { background:var(--tn-background); color:var(--tn-text); }
.tn-admin-nav-lang { display:none; }

@media (max-width:900px) {
  .tn-topbar-actions .tn-lang-switch { display:none; }
  .tn-admin-nav-lang { display:flex; }
}

/* ==========================================================================
   JP dashboard additions (this file is jp/dashboard's own copy of dashboard.css)
   ========================================================================== */

/* Japanese text falls back to Noto Sans JP (loaded in includes/header.php). */
body { font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; }

/* ---- Language switch (JA <-> EN) ----
   Desktop: a small pill in the top bar, just before the bell. At the 900px break where the sidebar becomes a
   slide-in menu (phones / tablets) the pill leaves the top bar and the same link appears in the menu instead
   (.tn-admin-nav-lang). The bell stays in the top bar at every size. */
.tn-lang-switch { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--tn-border); border-radius:100px; color:#475569; font-size:12.5px; font-weight:700; white-space:nowrap; }
.tn-lang-switch:hover { background:var(--tn-background); color:var(--tn-text); }
.tn-admin-nav-lang { display:none; }

@media (max-width:900px) {
  .tn-topbar-actions .tn-lang-switch { display:none; }
  .tn-admin-nav-lang { display:flex; }
}
.tn-guest-topbar-links { display:flex; align-items:center; gap:14px; }

@media (max-width:640px) {
  .tn-guest-topbar-links { gap:10px; }
  .tn-guest-topbar .tn-lang-switch { padding:6px 10px; font-size:12px; }
}

/* ---- DOWNLOAD PAGE (ledger/download.php) ----
   Hero with the ledger's icon, step 1 = period cards (+ flatpickr From/To and
   one-tap presets), step 2 = the two format cards, each one a submit button. */
.tn-dl { max-width:1000px; margin-left:auto; margin-right:auto; } /* centered under the (left-aligned) breadcrumb */
.tn-dl .tn-admin-card + .tn-admin-card { margin-top:18px; }

.tn-dl-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 100% 0, rgba(37,99,235,.10), transparent 42%), linear-gradient(135deg, #fff 0%, #f6f9ff 100%); }
.tn-dl-hero-row { position:relative; z-index:1; display:flex; align-items:center; gap:18px; margin-top:8px; padding-right:200px; }
.tn-dl-hero .tn-ledger-icon { flex:0 0 auto; width:62px; height:62px; border-radius:18px; font-size:25px; box-shadow:0 10px 24px rgba(15,23,42,.08); }
.tn-dl-hero-text { min-width:0; }
.tn-dl-eyebrow { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tn-dl-title { margin:8px 0 4px; font-size:25px; font-weight:800; letter-spacing:-.015em; color:var(--tn-text); }
.tn-dl-sub { margin:0; font-size:14px; line-height:1.55; color:var(--tn-muted); overflow-wrap:anywhere; }
.tn-dl-sub strong { color:var(--tn-text); }
.tn-dl-hero-art { position:absolute; right:34px; bottom:-14px; display:flex; align-items:flex-end; pointer-events:none; }
.tn-dl-hero-file { display:grid; place-items:center; width:92px; height:112px; border-radius:16px; background:#fff; font-size:44px; box-shadow:0 18px 40px rgba(15,23,42,.12); }
.tn-dl-hero-file--excel { color:#1d6f42; transform:rotate(-9deg) translateY(4px); }
.tn-dl-hero-file--pdf { color:#d93025; margin-left:-18px; transform:rotate(7deg) translateY(-10px); }

.tn-dl-card { padding:28px; }
.tn-dl-step + .tn-dl-step { margin-top:28px; padding-top:26px; border-top:1px dashed var(--tn-border); }
.tn-dl-step-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.tn-dl-step-num { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--tn-primary); color:#fff; font-size:13px; font-weight:800; box-shadow:0 0 0 4px var(--tn-primary-soft); }
.tn-dl-step-head h3 { margin:3px 0 2px; font-size:16px; font-weight:800; color:var(--tn-text); }
.tn-dl-step-head p { margin:0; font-size:13px; color:var(--tn-muted); }

/* Period cards (radio buttons) */
.tn-dl-range { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tn-dl-option { position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border:1.5px solid var(--tn-border); border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.tn-dl-option input { position:absolute; opacity:0; pointer-events:none; }
.tn-dl-option:hover { border-color:#bfdbfe; box-shadow:0 8px 22px rgba(15,23,42,.06); }
.tn-dl-option:has(input:checked) { border-color:var(--tn-primary); background:var(--tn-primary-soft); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.tn-dl-option:has(input:focus-visible) { outline:2px solid var(--tn-primary); outline-offset:2px; }
.tn-dl-option-icon { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--tn-background); color:var(--tn-muted); font-size:18px; transition:background .15s ease, color .15s ease; }
.tn-dl-option:has(input:checked) .tn-dl-option-icon { background:var(--tn-primary); color:#fff; }
.tn-dl-option-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tn-dl-option-text strong { font-size:14.5px; font-weight:800; color:var(--tn-text); }
.tn-dl-option-text small { font-size:12.5px; color:var(--tn-muted); }
.tn-dl-check { margin-left:auto; font-size:19px; color:var(--tn-primary); opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .15s ease; }
.tn-dl-option:has(input:checked) .tn-dl-check { opacity:1; transform:none; }

/* Custom range: presets + From -> To */
.tn-dl-custom { margin-top:14px; padding:18px; border:1px solid var(--tn-border); border-radius:14px; background:var(--tn-background); animation:tnDlReveal .18s ease; }
@keyframes tnDlReveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.tn-dl-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tn-dl-preset { padding:7px 14px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; font:inherit; font-size:12.5px; font-weight:700; color:#475569; cursor:pointer; transition:.15s; }
.tn-dl-preset:hover { border-color:#bfdbfe; color:var(--tn-primary); }
.tn-dl-preset.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }
.tn-dl-dates { display:flex; align-items:flex-end; gap:12px; }
.tn-dl-dates .tn-form-group { flex:1 1 0; min-width:0; margin:0; }
.tn-dl-dates-arrow { display:grid; place-items:center; height:44px; color:#94a3b8; font-size:13px; }

/* Format cards (each one submits the form) */
.tn-dl-error { display:flex; align-items:center; gap:9px; }
.tn-dl-error[hidden], .tn-dl-custom[hidden] { display:none; }
.tn-dl-formats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.tn-dl-format { --dl-accent:#1d6f42; --dl-accent-soft:#e8f5ee; position:relative; display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:24px 22px 22px; border:1.5px solid var(--tn-border); border-radius:18px; background:#fff; font:inherit; color:var(--tn-text); text-align:left; cursor:pointer; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tn-dl-format--pdf { --dl-accent:#d93025; --dl-accent-soft:#fdecea; }
.tn-dl-format::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--dl-accent); }
.tn-dl-format:hover { border-color:var(--dl-accent); box-shadow:0 18px 36px rgba(15,23,42,.10); transform:translateY(-2px); }
.tn-dl-format:focus-visible { outline:3px solid var(--dl-accent); outline-offset:2px; }
.tn-dl-format-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; background:var(--dl-accent-soft); color:var(--dl-accent); font-size:27px; transition:transform .18s ease; }
.tn-dl-format:hover .tn-dl-format-icon { transform:scale(1.06) rotate(-4deg); }
.tn-dl-format-body { display:block; }
.tn-dl-format-title { display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; }
.tn-dl-format-title em { padding:2px 8px; border-radius:100px; background:var(--dl-accent-soft); color:var(--dl-accent); font-size:11.5px; font-style:normal; font-weight:700; }
.tn-dl-format-desc { display:block; margin-top:4px; font-size:13px; color:var(--tn-muted); }
.tn-dl-format-points { display:grid; gap:7px; margin-top:14px; font-size:12.5px; color:#334155; }
.tn-dl-format-points i { width:14px; margin-right:6px; font-size:11px; color:var(--dl-accent); }
.tn-dl-format-cta { display:flex; align-items:center; justify-content:center; gap:8px; height:46px; margin-top:auto; border-radius:11px; background:var(--dl-accent); color:#fff; font-size:14px; font-weight:700; transition:filter .15s ease; }
.tn-dl-format:hover .tn-dl-format-cta { filter:brightness(1.08); }

.tn-dl-facts { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:26px; padding-top:18px; border-top:1px solid var(--tn-border); font-size:12.5px; color:var(--tn-muted); }
.tn-dl-facts i { margin-right:6px; color:var(--tn-primary); }

/* Viewer (no download) */
.tn-dl-locked { display:flex; align-items:center; gap:16px; }
.tn-dl-locked-icon { flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--tn-background); color:var(--tn-muted); font-size:19px; }
.tn-dl-locked strong { display:block; font-size:15px; color:var(--tn-text); }
.tn-dl-locked p { margin:3px 0 0; font-size:13px; color:var(--tn-muted); }

@media (max-width:900px) {
  .tn-dl-hero-art { display:none; }
  .tn-dl-hero-row { padding-right:0; }
}

@media (max-width:640px) {
  .tn-dl-card { padding:18px; }
  .tn-dl-range, .tn-dl-formats { grid-template-columns:1fr; }
  .tn-dl-title { font-size:21px; }
  .tn-dl-hero-row { align-items:flex-start; gap:14px; }
  .tn-dl-hero .tn-ledger-icon { width:50px; height:50px; border-radius:14px; font-size:20px; }
  .tn-dl-dates { flex-direction:column; align-items:stretch; }
  .tn-dl-dates-arrow { display:none; }
  .tn-dl-facts { flex-direction:column; gap:8px; }
}