/* /tools/ -- shared style of the tools hub and every tool page (uses the site's --tn- colours from common.css) */

/* ------------------------------------------------------------ page top */
.tk-hero { position:relative; overflow:hidden; padding:56px 0 34px; background:radial-gradient(circle at 85% 20%,rgba(37,99,235,.08),transparent 35%),linear-gradient(180deg,#fff 0%,#f8fafc 100%); border-bottom:1px solid var(--tn-border); }
.tk-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; color:var(--tn-muted); font-size:13px; }
.tk-breadcrumb a { color:var(--tn-muted); }
.tk-breadcrumb a:hover { color:var(--tn-primary); }
.tk-breadcrumb li + li::before { content:"/"; margin-right:6px; color:#cbd5e1; }
.tk-title { margin:0 0 12px; font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-1.4px; }
.tk-lead { max-width:760px; margin:0; color:var(--tn-muted); font-size:17px; line-height:1.7; }
.tk-badges { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.tk-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#334155; font-size:12.5px; font-weight:600; }
.tk-badge i { color:var(--tn-green); }

/* ------------------------------------------------------------ page layout : main column + sidebar (tools/includes/sidebar.php) */
.tk-page { padding:28px 0 50px; background:var(--tn-background); }
.tk-sidebar { position:sticky; top:92px; max-height:calc(100vh - 110px); overflow-y:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; }
.tk-sidebar-all { display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:14px; font-weight:800; }
.tk-sidebar-all:hover { color:var(--tn-primary-dark); }
.tk-sidebar-group + .tk-sidebar-group { margin-top:12px; padding-top:12px; border-top:1px solid var(--tn-border); }
.tk-sidebar-head { display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:0 4px; color:var(--tn-muted); font-size:11.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; }
.tk-sidebar ul { margin:0; padding:0; list-style:none; }
.tk-sidebar li a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:#334155; font-size:14px; font-weight:600; }
.tk-sidebar li a i { width:16px; color:#94a3b8; text-align:center; }
.tk-sidebar li a:hover { background:#f1f5f9; color:var(--tn-text); }
.tk-sidebar li a.on { background:var(--tn-primary); color:#fff; }
.tk-sidebar li a.on i { color:#fff; }
.tk-sidebar-note { display:flex; gap:10px; margin:14px 0 0; padding:12px; border-radius:10px; background:var(--tn-green-soft); color:#166534; font-size:12.5px; line-height:1.55; }
.tk-sidebar-note i { margin-top:3px; }
.tk-sidebar-note p { margin:0; }

/* ------------------------------------------------------------ tool area */
.tk-panel { padding:22px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.tk-panel + .tk-panel { margin-top:16px; }
.tk-panel-title { display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:16px; font-weight:800; }
.tk-panel-title i { color:var(--tn-primary); }
.tk-panel-title .tk-panel-aside { margin-left:auto; color:var(--tn-muted); font-size:12px; font-weight:600; }
.tk-sticky { position:sticky; top:92px; }

.tk-label { display:block; margin:0 0 5px; color:#334155; font-size:13px; font-weight:700; }
.tk-help { display:block; margin:4px 0 0; color:var(--tn-muted); font-size:12px; }
.tk-input, .tk-select, .tk-textarea { width:100%; min-height:42px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:var(--tn-text); font-size:14px; transition:border-color .15s ease, box-shadow .15s ease; }
.tk-textarea { min-height:74px; resize:vertical; line-height:1.5; }
.tk-input:focus, .tk-select:focus, .tk-textarea:focus { outline:none; border-color:var(--tn-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tk-field { margin:0 0 14px; }
.tk-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tk-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.tk-input-group { display:flex; align-items:stretch; }
.tk-input-group .tk-input { border-radius:10px 0 0 10px; }
.tk-input-group .tk-addon { display:inline-flex; align-items:center; padding:0 12px; border:1px solid #cbd5e1; border-left:0; border-radius:0 10px 10px 0; background:#f1f5f9; color:var(--tn-muted); font-size:13px; font-weight:700; white-space:nowrap; }
.tk-range { width:100%; margin:8px 0 0; accent-color:var(--tn-primary); }

.tk-seg { display:inline-flex; padding:3px; border:1px solid var(--tn-border); border-radius:11px; background:#f1f5f9; }
.tk-seg button { padding:7px 14px; border:0; border-radius:8px; background:transparent; color:var(--tn-muted); font-size:13px; font-weight:700; }
.tk-seg button.on { background:#fff; color:var(--tn-primary); box-shadow:0 1px 3px rgba(15,23,42,.12); }

.tk-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 16px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; color:var(--tn-text); font-size:14px; font-weight:700; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.tk-btn:hover { border-color:#94a3b8; }
.tk-btn:disabled { opacity:.55; cursor:not-allowed; }
.tk-btn-primary { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }
.tk-btn-primary:hover { border-color:var(--tn-primary-dark); background:var(--tn-primary-dark); color:#fff; }
.tk-btn-danger { color:var(--tn-red); }
.tk-btn-danger:hover { border-color:#fca5a5; background:var(--tn-red-soft); }
.tk-btn-sm { min-height:34px; padding:6px 11px; font-size:13px; }
.tk-btn-link { border:0; background:none; padding:0; min-height:0; color:var(--tn-primary); font-weight:700; }
.tk-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tk-status { min-height:20px; margin:10px 0 0; color:var(--tn-muted); font-size:13px; }
.tk-status.error { color:var(--tn-red); }
.tk-status.ok { color:var(--tn-green); }

/* item lines (invoice) */
.tk-items { width:100%; border-collapse:separate; border-spacing:0 8px; }
.tk-items th { padding:0 6px; color:var(--tn-muted); font-size:12px; font-weight:700; text-align:left; }
.tk-items td { padding:0 6px 0 0; vertical-align:top; }
.tk-items .tk-col-qty { width:84px; }
.tk-items .tk-col-rate { width:120px; }
.tk-items .tk-col-amount { width:110px; padding-top:11px; font-size:14px; font-weight:700; text-align:right; white-space:nowrap; }
.tk-items .tk-col-del { width:38px; }
.tk-del { width:34px; height:42px; border:0; border-radius:8px; background:none; color:#94a3b8; }
.tk-del:hover { background:var(--tn-red-soft); color:var(--tn-red); }

/* logo upload */
.tk-logo-box { display:flex; align-items:center; gap:12px; }
.tk-logo-preview { display:flex; align-items:center; justify-content:center; width:120px; height:64px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc; color:#94a3b8; font-size:12px; overflow:hidden; }
.tk-logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.tk-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* template + colour choices */
.tk-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tk-choice { padding:10px 8px; border:2px solid var(--tn-border); border-radius:10px; background:#fff; color:#334155; font-size:13px; font-weight:700; text-align:center; cursor:pointer; }
.tk-choice.on { border-color:var(--tn-primary); background:var(--tn-primary-soft); color:var(--tn-primary); }
.tk-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.tk-swatch { width:30px; height:30px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--tn-border); cursor:pointer; }
.tk-swatch.on { box-shadow:0 0 0 2px var(--tn-text); }

/* live preview of a document (A4 page scaled to the column) */
.tk-preview-wrap { overflow:hidden; border:1px solid var(--tn-border); border-radius:12px; background:#e2e8f0; }
.tk-preview-scale { transform-origin:top left; }
.tk-preview-page { position:relative; width:max-content; min-width:794px; padding:0 0 48px; background:#fff; box-shadow:0 8px 30px rgba(15,23,42,.12); }
/* where the next page of the PDF starts (preview only, tools.js paginate) */
.tk-page-mark { position:absolute; left:0; right:0; height:0; border-top:3px dashed #93c5fd; pointer-events:none; }
.tk-page-mark span { position:absolute; right:12px; top:-14px; padding:3px 10px; border-radius:100px; background:#2563eb; color:#fff; font:700 13px/1.2 Inter,sans-serif; }
/* hidden box where documents are measured (tools.js paginate) */
.tk-measure { position:absolute; left:-20000px; top:0; visibility:hidden; pointer-events:none; }

/* results (calculators) */
.tk-result-main { padding:20px; border-radius:14px; background:linear-gradient(135deg,var(--tn-primary),#1e40af); color:#fff; }
.tk-result-main span { display:block; opacity:.85; font-size:13px; font-weight:600; }
.tk-result-main strong { display:block; margin-top:4px; font-size:34px; line-height:1.1; font-weight:800; letter-spacing:-1px; overflow-wrap:anywhere; }
.tk-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 0; }
.tk-stat { min-width:0; padding:12px 14px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; }
.tk-stat span { display:block; color:var(--tn-muted); font-size:12px; font-weight:600; }
.tk-stat strong { display:block; margin-top:3px; font-size:18px; line-height:1.25; font-weight:800; overflow-wrap:anywhere; }
.tk-stat strong.tk-long { font-size:15px; }
.tk-stat strong.tk-xlong { font-size:13px; }
.tk-result-main strong.tk-long { font-size:26px; }
.tk-result-main strong.tk-xlong { font-size:21px; }
.tk-stat.good strong { color:var(--tn-green); }
.tk-chart-row { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center; }
.tk-legend { margin:0; padding:0; list-style:none; font-size:13px; }
.tk-legend li { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.tk-legend i { width:12px; height:12px; border-radius:3px; }
.tk-legend b { margin-left:auto; }
.tk-table-wrap { max-height:420px; overflow:auto; border:1px solid var(--tn-border); border-radius:12px; }
.tk-table { width:100%; border-collapse:collapse; font-size:13px; }
.tk-table th { position:sticky; top:0; padding:9px 10px; background:#f1f5f9; color:#334155; font-weight:700; text-align:right; white-space:nowrap; }
.tk-table td { padding:8px 10px; border-top:1px solid var(--tn-border); text-align:right; white-space:nowrap; }
.tk-table th:first-child, .tk-table td:first-child { text-align:left; }
.tk-table td:first-child { min-width:110px; max-width:240px; white-space:normal; overflow-wrap:anywhere; }

/* ------------------------------------------------------------ guide (the text under the tool, in the main column) */
.tk-guide { margin:24px 0 0; padding:30px 32px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; }
.tk-h2 { margin:0 0 14px; font-size:26px; font-weight:800; letter-spacing:-.6px; }
.tk-guide h2 { margin:38px 0 12px; font-size:24px; font-weight:800; letter-spacing:-.5px; }
.tk-guide h2:first-child { margin-top:0; }
.tk-guide h3 { margin:22px 0 8px; font-size:18px; font-weight:800; }
.tk-guide p, .tk-guide li { color:#334155; font-size:16px; line-height:1.8; }
.tk-guide ol, .tk-guide ul { padding-left:22px; }
.tk-guide .tk-example { margin:16px 0; padding:16px 18px; border-left:4px solid var(--tn-primary); border-radius:8px; background:var(--tn-primary-soft); }
.tk-guide .tk-example p { margin:0; }
.tk-guide .tk-example p + p { margin-top:6px; }
.tk-faq { margin:12px 0 0; }
.tk-faq details { border:1px solid var(--tn-border); border-radius:12px; background:#fff; }
.tk-faq details + details { margin-top:10px; }
.tk-faq summary { padding:14px 16px; font-size:15.5px; font-weight:700; cursor:pointer; }
.tk-faq details p { margin:0; padding:0 16px 14px; }

/* ------------------------------------------------------------ hub + related tools */
.tk-hub-cat { padding:40px 0 10px; }
.tk-hub-cat-head { display:flex; align-items:center; gap:12px; margin:0 0 6px; }
.tk-hub-cat-head i { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:17px; }
.tk-hub-cat-copy { margin:0 0 18px; color:var(--tn-muted); }
.tk-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tk-tool-card { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; color:var(--tn-text); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tk-tool-card:hover { border-color:#93c5fd; color:var(--tn-text); transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.07); }
.tk-tool-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 0 4px; border-radius:11px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:17px; }
.tk-tool-name { font-size:16px; font-weight:800; }
.tk-tool-copy { color:var(--tn-muted); font-size:14px; line-height:1.6; }
.tk-related { padding:40px 0; border-top:1px solid var(--tn-border); background:var(--tn-background); }
.tk-all-tools { margin:16px 0 0; font-weight:700; }
.tk-app-cta { padding:40px 0 70px; background:var(--tn-background); }
.tk-app-cta-box { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; border-radius:18px; background:var(--tn-dark); color:#fff; }
.tk-app-cta-box h2 { margin:0 0 8px; font-size:22px; font-weight:800; }
.tk-app-cta-box p { max-width:560px; margin:0; color:#cbd5e1; line-height:1.7; }
.tk-app-cta-actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }

/* ------------------------------------------------------------ small screens */
@media (max-width:1199px) {
  .tk-sidebar { position:static; }
}
@media (max-width:991px) {
  .tk-sticky { position:static; }
  .tk-tool-grid { grid-template-columns:repeat(2,1fr); }
  .tk-app-cta-box { flex-direction:column; align-items:flex-start; }
}
@media (max-width:575px) {
  .tk-title { font-size:30px; }
  .tk-lead { font-size:15.5px; }
  .tk-panel { padding:16px; }
  .tk-guide { padding:20px 18px; }
  .tk-row, .tk-row-3 { grid-template-columns:1fr; }
  .tk-tool-grid { grid-template-columns:1fr; }
  .tk-chart-row { grid-template-columns:1fr; }
  .tk-result-main strong { font-size:28px; }
  .tk-items .tk-col-rate { width:92px; }
  .tk-items .tk-col-qty { width:62px; }
}

/* print : only the document */
@media print {
  body * { visibility:hidden; }
  .tk-print-area, .tk-print-area * { visibility:visible; }
  .tk-print-area { position:absolute; left:0; top:0; }
  .tk-print-area .tk-preview-scale { transform:none!important; }
  .tk-print-area .tk-preview-page { box-shadow:none; }
}

/* ------------------------------------------------------------ hub page (tools/index.php) */
.tk-hub-jump { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.tk-hub-jump a { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; color:#334155; font-size:13.5px; font-weight:700; }
.tk-hub-jump a:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tk-hub-jump a i { color:var(--tn-primary); }
.tk-hub .tk-hub-cat { padding:14px 0 26px; scroll-margin-top:90px; }
.tk-pdf-tag { margin-left:4px; padding:2px 6px; border-radius:5px; background:var(--tn-red-soft); color:var(--tn-red); font-size:10.5px; font-weight:800; vertical-align:2px; }
.tk-hub-about { margin-top:20px; }

/* ------------------------------------------------------------ TallyKnot promotion (includes/promo.php) */
.tk-promo-wrap { padding:10px 0 70px; background:var(--tn-background); }
.tk-promo { margin:20px 0; }
.tk-promo-box { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px; border-radius:20px; background:radial-gradient(circle at 90% 10%,rgba(96,165,250,.35),transparent 40%),linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff; }
.tk-promo-label { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:100px; background:rgba(255,255,255,.15); font-size:12.5px; font-weight:700; }
.tk-promo-copy h2 { margin:14px 0 10px; font-size:26px; font-weight:800; letter-spacing:-.6px; }
.tk-promo-copy p { max-width:600px; margin:0 0 12px; color:#dbeafe; line-height:1.7; }
.tk-promo-copy ul { margin:0; padding:0; list-style:none; }
.tk-promo-copy li { display:flex; align-items:center; gap:8px; margin:0 0 6px; color:#eff6ff; font-size:14px; font-weight:600; }
.tk-promo-copy li i { color:#86efac; }
.tk-promo-actions { display:flex; flex-direction:column; gap:10px; flex:0 0 250px; }
.tk-promo-btn { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 16px; border:1px solid rgba(255,255,255,.4); border-radius:11px; background:transparent; color:#fff; font-size:14px; font-weight:700; transition:background .15s ease, transform .15s ease; }
.tk-promo-btn:hover { background:rgba(255,255,255,.12); color:#fff; transform:translateY(-1px); }
.tk-promo-btn-main { border-color:#fff; background:#fff; color:var(--tn-primary); }
.tk-promo-btn-main:hover { background:#eff6ff; color:var(--tn-primary-dark); }
.tk-promo-note { margin:-4px 0 4px; color:#bfdbfe; font-size:12px; text-align:center; }
.tk-promo-side { margin:14px 0 0; padding:16px; border-radius:14px; background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff; }
.tk-promo-side-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0 0 8px; border-radius:10px; background:rgba(255,255,255,.15); }
.tk-promo-side-title { font-size:15px; font-weight:800; }
.tk-promo-side p { margin:4px 0 12px; color:#dbeafe; font-size:12.5px; line-height:1.55; }
.tk-promo-side .tk-promo-btn { min-height:38px; margin:0 0 8px; padding:8px 10px; font-size:13px; }
.tk-promo-side small { display:block; color:#bfdbfe; font-size:11.5px; text-align:center; }
@media (max-width:991px) {
  .tk-promo-box { flex-direction:column; align-items:stretch; padding:24px; }
  .tk-promo-actions { flex:none; }
}

/* preview of several documents : a grey gap between the pages */
.tk-preview-page .tk-doc + .tk-doc { border-top:14px solid #e2e8f0; }

/* ------------------------------------------------------------ signature pad (doc-tool.js TKDocTool.signature) */
body.tk-sign-open { overflow:hidden; }
.tk-sign-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.55); }
.tk-sign-modal[hidden] { display:none; }
.tk-sign-dialog { display:flex; flex-direction:column; gap:12px; width:100%; max-width:640px; padding:20px; border-radius:16px; background:#fff; box-shadow:0 24px 60px rgba(15,23,42,.3); }
.tk-sign-head { display:flex; align-items:center; justify-content:space-between; font-size:17px; }
.tk-sign-x { width:34px; height:34px; border:0; border-radius:8px; background:#f1f5f9; color:#475569; }
.tk-sign-area { position:relative; height:240px; border:2px dashed #cbd5e1; border-radius:12px; background:#fff; }
.tk-sign-area canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.tk-sign-line { position:absolute; left:24px; right:24px; bottom:46px; padding:4px 0 0; border-top:1px solid #cbd5e1; color:#94a3b8; font-size:12px; pointer-events:none; }
.tk-sign-tools { display:flex; align-items:center; gap:8px; }
@media (max-width:575px) { .tk-sign-area { height:200px; } }

/* ------------------------------------------------------------ budget + split expenses */
.tk-items .tk-col-type { width:112px; }
.tk-people { display:flex; flex-wrap:wrap; gap:8px; }
.tk-person { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--tn-border); border-radius:11px; background:#f8fafc; }
.tk-person .tk-input { width:120px; min-height:36px; border:0; background:transparent; }
.tk-person .tk-del { height:36px; }
.tk-expense { margin:0 0 10px; padding:10px; border:1px solid var(--tn-border); border-radius:12px; background:#f8fafc; }
.tk-expense-top { display:flex; gap:8px; }
.tk-expense-top .tk-expense-amount { flex:0 0 120px; }
.tk-expense-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:8px 0 0; color:var(--tn-muted); font-size:13px; font-weight:600; }
.tk-expense-bottom label { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.tk-expense-bottom .tk-select { width:auto; min-width:0; max-width:100%; min-height:34px; padding:5px 8px; text-overflow:ellipsis; }
.tk-expense-for { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; max-width:100%; }
.tk-chip { max-width:100%; overflow-wrap:anywhere; text-align:left; padding:5px 10px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#94a3b8; font-size:12.5px; font-weight:700; text-decoration:line-through; }
.tk-chip.on { border-color:#93c5fd; background:var(--tn-primary-soft); color:var(--tn-primary); text-decoration:none; }
.tk-transfer { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; overflow-wrap:anywhere; margin:0 0 8px; padding:12px 14px; border-radius:12px; background:var(--tn-primary-soft); font-size:15px; }
.tk-transfer i { color:var(--tn-primary); }
.tk-transfer b { min-width:0; }
.tk-transfer strong { margin-left:auto; text-align:right; color:var(--tn-primary); font-size:17px; }
@media (max-width:575px) {
  .tk-expense-top .tk-expense-amount { flex-basis:96px; }
  .tk-person .tk-input { width:96px; }
}

/* one-line result under a small calculator (percentage, discount) */
.tk-result-line { overflow-wrap:anywhere; min-height:24px; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--tn-primary-soft); color:#1e3a8a; font-size:15px; }
.tk-result-line b { font-size:18px; }
.tk-seg { flex-wrap:wrap; }

/* ------------------------------------------------------------ premium tool header (includes/tool_head.php) */
.tk-hero.tk-hero-dark { padding:34px 0 30px; border-bottom:0; background:radial-gradient(circle at 12% -10%,rgba(37,99,235,.55),transparent 42%),radial-gradient(circle at 95% 20%,rgba(124,58,237,.45),transparent 40%),#0b1120; color:#fff; }
.tk-hero-dark .tk-breadcrumb, .tk-hero-dark .tk-breadcrumb a { color:#94a3b8; }
.tk-hero-dark .tk-breadcrumb a:hover { color:#fff; }
.tk-hero-dark .tk-breadcrumb li + li::before { color:#475569; }
.tk-hero-row { display:flex; align-items:center; gap:18px; }
.tk-hero-icon { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg,var(--c,#2563eb),color-mix(in srgb, var(--c,#2563eb) 55%, #000)); color:#fff; font-size:27px; box-shadow:0 14px 30px color-mix(in srgb, var(--c,#2563eb) 40%, transparent); }
.tk-hero-dark .tk-title { margin:0; color:#fff; }
.tk-hero-dark .tk-lead { margin-top:14px; color:#cbd5e1; }
.tk-hero-dark .tk-badge { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.07); color:#e2e8f0; }
.tk-hero-dark .tk-badge i { color:#34d399; }

/* ------------------------------------------------------------ step cards (document tools) */
.tk-step { padding:22px; border:1px solid var(--tn-border); border-radius:18px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.035); }
.tk-step + .tk-step { margin-top:16px; }
.tk-step-head { display:flex; align-items:center; gap:13px; margin:0 0 18px; padding:0 0 15px; border-bottom:1px solid #f1f5f9; }
.tk-step-no { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-size:15px; font-weight:800; box-shadow:0 8px 16px rgba(79,70,229,.28); }
.tk-step-head h2 { margin:0; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.tk-step-head p { margin:1px 0 0; color:var(--tn-muted); font-size:13px; }
.tk-step-head .tk-panel-aside { margin-left:auto; color:var(--tn-muted); font-size:12px; font-weight:600; white-space:nowrap; }
.tk-step-head .tk-panel-aside i { color:var(--tn-green); }

/* items as cards (invoice) */
.tk-item { position:relative; padding:14px; border:1px solid var(--tn-border); border-radius:14px; background:#f8fafc; transition:border-color .15s ease, box-shadow .15s ease; }
.tk-item + .tk-item { margin-top:10px; }
.tk-item:focus-within { border-color:#93c5fd; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.tk-item-top { display:flex; align-items:flex-start; gap:10px; }
.tk-item-no { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:28px; height:28px; margin-top:8px; border-radius:8px; background:#e0e7ff; color:#4338ca; font-size:12.5px; font-weight:800; }
.tk-item-desc { flex:1; min-height:64px; resize:vertical; }
.tk-item-grid { display:grid; grid-template-columns:1fr 1.4fr 1.4fr; gap:10px; margin:10px 0 0 38px; }
.tk-item-grid label { display:block; margin:0 0 4px; color:var(--tn-muted); font-size:12px; font-weight:700; }
.tk-item-amount { display:flex; flex-direction:column; justify-content:flex-end; }
.tk-item-amount b { display:flex; align-items:center; justify-content:flex-end; min-height:42px; padding:0 12px; border-radius:10px; background:#eef2ff; color:#1e1b4b; font-size:15px; }
.tk-item .tk-del { position:absolute; top:10px; right:10px; width:32px; height:32px; }
.tk-item-top .tk-item-desc { margin-right:34px; }
.tk-add-line { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:12px 0 0; padding:12px; border:2px dashed #cbd5e1; border-radius:14px; background:transparent; color:var(--tn-primary); font-size:14px; font-weight:800; transition:border-color .15s ease, background .15s ease; }
.tk-add-line:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); }

/* live totals under the items */
.tk-sum-box { margin:16px 0 0; padding:14px 16px; border-radius:14px; background:linear-gradient(135deg,#eff6ff,#f5f3ff); }
.tk-sum-row { display:flex; justify-content:space-between; padding:4px 0; color:#334155; font-size:14px; }
.tk-sum-row b { color:var(--tn-text); }
.tk-sum-row.total { margin-top:6px; padding-top:10px; border-top:1px solid #c7d2fe; font-size:17px; font-weight:800; }
.tk-sum-row.total b { color:#4338ca; }

/* switch (footer on / off) */
.tk-switch { display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; }
.tk-switch input { position:absolute; opacity:0; pointer-events:none; }
.tk-switch-ui { position:relative; flex-shrink:0; width:44px; height:26px; border-radius:100px; background:#cbd5e1; transition:background .18s ease; }
.tk-switch-ui::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; }
.tk-switch input:checked + .tk-switch-ui { background:var(--tn-primary); }
.tk-switch input:checked + .tk-switch-ui::after { transform:translateX(18px); }
.tk-switch input:focus-visible + .tk-switch-ui { box-shadow:0 0 0 3px rgba(37,99,235,.3); }
.tk-switch-text { font-size:14px; font-weight:700; }
.tk-switch-text small { display:block; color:var(--tn-muted); font-size:12px; font-weight:500; }

/* template thumbnails */
.tk-tpls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tk-tpl { padding:8px 8px 10px; border:2px solid var(--tn-border); border-radius:14px; background:#fff; color:#334155; font-size:13px; font-weight:800; text-align:center; transition:border-color .15s ease, transform .15s ease; }
.tk-tpl:hover { transform:translateY(-2px); }
.tk-tpl.on { border-color:var(--tn-primary); color:var(--tn-primary); box-shadow:0 8px 18px rgba(37,99,235,.15); }
.tk-tpl-art { position:relative; display:block; height:72px; margin:0 0 7px; border-radius:8px; background:#f8fafc; overflow:hidden; }
.tk-tpl-art i { position:absolute; left:10%; right:10%; height:5px; border-radius:3px; background:#e2e8f0; }
.tk-tpl-art i:nth-child(1) { top:12px; right:55%; background:var(--accent-thumb,#2563eb); }
.tk-tpl-art i:nth-child(2) { top:30px; height:9px; background:var(--accent-thumb,#2563eb); opacity:.85; }
.tk-tpl-art i:nth-child(3) { top:45px; }
.tk-tpl-art i:nth-child(4) { top:56px; right:45%; }
.tk-tpl-modern .tk-tpl-art::before { content:""; position:absolute; left:0; right:0; top:0; height:24px; background:var(--accent-thumb,#2563eb); }
.tk-tpl-modern .tk-tpl-art i:nth-child(1) { background:#fff; }
.tk-tpl-minimal .tk-tpl-art i:nth-child(1) { background:#334155; }
.tk-tpl-minimal .tk-tpl-art i:nth-child(2) { height:2px; background:#334155; }

/* preview column */
.tk-preview-card { padding:18px; border:1px solid var(--tn-border); border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.08); }
.tk-preview-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.tk-preview-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; }
.tk-live-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); animation:tk-pulse 1.8s ease-in-out infinite; }
@keyframes tk-pulse { 50% { box-shadow:0 0 0 7px rgba(34,197,94,.06); } }
.tk-page-count { padding:4px 10px; border-radius:100px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:800; }
.tk-btn-lg { min-height:50px; padding:12px 20px; font-size:15px; border-radius:12px; }
.tk-btn-glow { width:100%; border:0; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; box-shadow:0 14px 30px rgba(79,70,229,.35); }
.tk-btn-glow:hover { color:#fff; filter:brightness(1.07); }
.tk-preview-tools { display:flex; gap:8px; margin:10px 0 14px; }
.tk-preview-tools .tk-btn { flex:1; }
.tk-preview-card .tk-preview-wrap { background:#eef2f7; }

/* ------------------------------------------------------------ PDF : creating + modal (includes/pdf_modal.php) */
body.tk-pdf-busy { overflow:hidden; }
.tk-pdf-loading { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(11,17,32,.6); backdrop-filter:blur(4px); }
.tk-pdf-loading[hidden] { display:none; }
.tk-pdf-loading-box { display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 40px; border-radius:20px; background:#fff; text-align:center; box-shadow:0 30px 60px rgba(2,6,23,.4); }
.tk-pdf-loading-box strong { font-size:18px; }
.tk-pdf-loading-box p { margin:0; color:var(--tn-muted); font-size:14px; }
.tk-pdf-loading-icon { position:relative; display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 0 10px; border-radius:20px; background:#fef2f2; color:#dc2626; font-size:30px; }
.tk-pdf-loading-icon span { position:absolute; inset:-6px; border:3px solid #fecaca; border-top-color:#dc2626; border-radius:24px; animation:tk-spin 1s linear infinite; }
@keyframes tk-spin { to { transform:rotate(360deg); } }
.tk-pdf-modal .modal-dialog { max-width:1200px; padding:0 12px; }
.tk-pdf-modal .modal-content { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-rows:minmax(0,1fr); overflow:hidden; height:min(88vh, 900px); border:0; border-radius:26px; background:#fff; box-shadow:0 40px 100px rgba(2,6,23,.45); }
body.tk-pdf-showing .modal-backdrop.show { opacity:.65; }
.tk-pdf-close { position:absolute; right:14px; top:14px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; background:#f1f5f9; color:#475569; font-size:17px; transition:background .15s ease, transform .15s ease; }
.tk-pdf-close:hover { background:#e2e8f0; transform:rotate(90deg); }
.tk-pdf-view { position:relative; min-width:0; background:radial-gradient(circle at 30% 0%,#eef2ff,transparent 60%),#e5e9f0; }
.tk-pdf-view iframe { display:block; width:100%; height:100%; border:0; }
.tk-pdf-view iframe[hidden], .tk-pdf-nopreview[hidden] { display:none; }
.tk-pdf-nopreview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; height:100%; padding:30px; text-align:center; }
.tk-pdf-nopreview p { max-width:300px; margin:0; color:var(--tn-muted); }
.tk-pdf-paper { position:relative; width:120px; height:156px; padding:44px 18px 0; border-radius:12px; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.15); }
.tk-pdf-paper i { position:absolute; left:50%; top:-22px; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:#dc2626; color:#fff; font-size:20px; transform:translateX(-50%); box-shadow:0 10px 20px rgba(220,38,38,.35); }
.tk-pdf-paper span { display:block; height:8px; margin:0 0 10px; border-radius:4px; background:#e2e8f0; }
.tk-pdf-paper span:nth-child(3) { width:70%; }
.tk-pdf-side { display:flex; flex-direction:column; min-height:0; padding:34px 26px 22px; overflow-y:auto; border-left:1px solid var(--tn-border); }
.tk-pdf-success { position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:62px; height:62px; margin:6px 0 18px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; font-size:26px; box-shadow:0 12px 26px rgba(22,163,74,.35); animation:tk-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.tk-pdf-success::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(34,197,94,.35); animation:tk-ring 1.6s ease-out .3s both; }
@keyframes tk-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes tk-ring { from { transform:scale(.8); opacity:1; } to { transform:scale(1.35); opacity:0; } }
.tk-pdf-side h2 { margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:-.6px; }
.tk-pdf-sub { margin:0 0 20px; color:var(--tn-muted); font-size:14.5px; line-height:1.6; }
.tk-pdf-file { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:12px; border:1px solid var(--tn-border); border-radius:14px; background:#f8fafc; }
.tk-pdf-file > div { min-width:0; }
.tk-pdf-file-icon { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:#fef2f2; color:#dc2626; font-size:19px; }
.tk-pdf-file b { display:block; overflow:hidden; font-size:13.5px; text-overflow:ellipsis; white-space:nowrap; }
.tk-pdf-file small { color:var(--tn-muted); font-size:12.5px; font-weight:600; }
.tk-pdf-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tk-pdf-buttons .tk-btn { width:100%; padding-left:10px; padding-right:10px; }
.tk-pdf-buttons .tk-pdf-main { grid-column:1 / -1; }
.tk-pdf-meta-m { display:none; }
.tk-pdf-notes { margin:20px 0 0; padding:0; list-style:none; }
.tk-pdf-notes li { display:flex; gap:9px; margin:0 0 9px; color:#475569; font-size:13px; line-height:1.5; }
.tk-pdf-notes i { margin-top:3px; color:var(--tn-green); }
.tk-pdf-back { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:auto 0 0; padding:12px; border:0; border-radius:12px; background:none; color:var(--tn-muted); font-size:14px; font-weight:700; }
.tk-pdf-back:hover { background:#f1f5f9; color:var(--tn-text); }
/* phones / tablets : the PDF takes the screen, one compact row under it : ✓ Your PDF is ready … [download] [print] */
@media (max-width:991px) {
  .tk-pdf-modal .modal-content { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; height:92vh; }
  .tk-pdf-side { flex-direction:row; align-items:center; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); overflow:visible; border-left:0; border-top:1px solid var(--tn-border); }
  .tk-pdf-heading { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
  .tk-pdf-success { width:36px; height:36px; margin:0; font-size:16px; box-shadow:0 6px 14px rgba(22,163,74,.3); }
  .tk-pdf-success::after { inset:-5px; }
  .tk-pdf-heading-text { min-width:0; }
  .tk-pdf-side h2 { overflow:hidden; margin:0; font-size:16.5px; letter-spacing:-.3px; text-overflow:ellipsis; white-space:nowrap; }
  .tk-pdf-meta-m { display:block; color:var(--tn-muted); font-size:12px; font-weight:600; }
  .tk-pdf-sub, .tk-pdf-file, .tk-pdf-notes, .tk-pdf-back, .tk-pdf-open, .tk-pdf-label { display:none!important; }
  .tk-pdf-buttons { display:flex; flex-shrink:0; gap:8px; }
  .tk-pdf-buttons .tk-btn { width:48px; min-height:48px; padding:0; border-radius:14px; font-size:18px; }
  .tk-pdf-buttons .tk-pdf-main { grid-column:auto; }
}
@media (max-width:767px) {
  .tk-pdf-modal .modal-dialog { padding:0 8px; }
  .tk-pdf-modal.tk-pdf-noview .modal-content { grid-template-rows:auto auto; height:auto; }
  .tk-pdf-modal.tk-pdf-noview .tk-pdf-view { padding:30px 0 10px; }
  .tk-item-grid { grid-template-columns:1fr 1fr; margin-left:0; }
  .tk-item-amount { grid-column:1 / -1; }
  .tk-hero-icon { width:52px; height:52px; font-size:22px; }
}
.tk-seg-lg { display:flex; width:100%; padding:4px; border-radius:13px; }
.tk-seg-lg button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:10px; font-size:14.5px; }
.tk-seg-lg button.on { background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; box-shadow:0 6px 14px rgba(79,70,229,.3); }

/* phones / tablets : Preview + Create PDF always at hand (doc-tool.js) */
.tk-mobile-bar { display:none; }
@media (max-width:991px) {
  .tk-mobile-bar { position:fixed; left:0; right:0; bottom:0; z-index:1030; display:flex; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--tn-border); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 -8px 24px rgba(15,23,42,.08); }
  .tk-mobile-bar .tk-btn { flex:1; min-height:46px; }
  .tk-mobile-bar .tk-btn-glow { width:auto; }
  body.tk-has-mobile-bar { padding-bottom:76px; }
  body.tk-has-mobile-bar .tn-back-to-top { bottom:90px; }
}

/* PDF modal : pages drawn by PDF.js (tools.js renderPdf) */
.tk-btn[hidden] { display:none!important; }
.tk-pdf-view { display:flex; flex-direction:column; min-height:0; }
.tk-pdf-pages { flex:1; min-height:0; overflow:auto; padding:22px 8px 80px; -webkit-overflow-scrolling:touch; outline:none; }
.tk-pdf-pages[hidden] { display:none; }
.tk-pdf-pages canvas { display:block; margin:0 auto 18px; background:#fff; border-radius:4px; box-shadow:0 10px 30px rgba(15,23,42,.18); }
.tk-pdf-bar { position:absolute; left:50%; bottom:16px; z-index:2; display:flex; align-items:center; gap:4px; padding:5px; border-radius:100px; background:rgba(15,23,42,.88); color:#fff; box-shadow:0 10px 24px rgba(2,6,23,.3); transform:translateX(-50%); backdrop-filter:blur(6px); }
.tk-pdf-bar[hidden] { display:none; }
.tk-pdf-bar button { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border:0; border-radius:100px; background:transparent; color:#fff; font-size:13px; font-weight:700; }
.tk-pdf-bar button:hover { background:rgba(255,255,255,.14); }
.tk-pdf-bar span { min-width:50px; font-size:13px; font-weight:800; text-align:center; }
.tk-pdf-bar .tk-pdf-fit { margin-left:2px; border-left:1px solid rgba(255,255,255,.2); border-radius:0 100px 100px 0; }
.tk-pdf-wait { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; color:#475569; font-size:15px; font-weight:700; }
.tk-pdf-wait[hidden] { display:none; }
.tk-pdf-printer { position:fixed; right:0; bottom:0; width:0; height:0; border:0; }
@media (max-width:991px) {
  .tk-pdf-modal .modal-content { height:92vh; height:92dvh; }
  .tk-pdf-pages { padding:62px 10px 70px; }   /* the page starts under the close button */
}

/* keyboard focus on the (hidden) file inputs shows on their Upload button */
.tk-actions:has(.tk-file:focus-visible) label[for] { outline:2px solid var(--tn-primary); outline-offset:2px; }
.tk-item-label { display:block; margin:0 0 4px; color:var(--tn-muted); font-size:12px; font-weight:700; }

/* currency menu with search (tools.js currencyPicker) */
.tk-cur { position:relative; }
.tk-cur-native { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; border:0 !important; }
.tk-cur-btn { display:block; width:100%; overflow:hidden; padding-right:38px; text-align:left; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.tk-cur.open .tk-cur-btn { border-color:var(--tn-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tk-cur-pop { position:absolute; z-index:50; top:calc(100% + 6px); left:0; width:100%; min-width:260px; max-width:calc(100vw - 32px); padding:8px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(15,23,42,.18); }
.tk-cur-search { position:relative; }
.tk-cur-search i { position:absolute; top:50%; left:12px; color:var(--tn-muted); font-size:13px; transform:translateY(-50%); pointer-events:none; }
.tk-cur-search .tk-input { padding-left:34px; font-size:16px; }
.tk-cur-list { max-height:260px; margin:8px 0 0; padding:0; overflow-y:auto; list-style:none; overscroll-behavior:contain; }
.tk-cur-list li { display:flex; gap:10px; align-items:baseline; padding:9px 10px; border-radius:8px; cursor:pointer; }
.tk-cur-list li b { flex:0 0 38px; font-size:13px; }
.tk-cur-list li span { min-width:0; color:#334155; font-size:14px; overflow-wrap:anywhere; }
.tk-cur-list li.active { background:var(--tn-primary-soft); }
.tk-cur-list li[aria-selected="true"] b { color:var(--tn-primary); }
.tk-cur-empty { margin:10px 4px 4px; color:var(--tn-muted); font-size:13px; }

/* small segmented control + scrollable schedule tables (shared by the loan/schedule tools) */
.tk-seg-sm button { padding:7px 14px; font-size:13px; }
.tk-scroll-y { max-height:420px; overflow-y:auto; }

/* a highlighted note box, and a "bad" (red) result state (shared by the new finance tools) */
.tk-note { padding:12px 14px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-primary-soft); color:#1e3a8a; font-size:14px; }
.tk-stat.bad strong { color:var(--tn-red); }
.tk-result-bad { background:linear-gradient(135deg,#b91c1c,#7f1d1d) !important; }