/* App pages: the account dashboard (account.html) and bulk searches
   (bulk.html). Same dark surface and red accent as the canvas. */

:root {
    /* Same black as the rest of the site (search, pricing, canvas chrome). */
    --tf-bg: #000;
    --tf-surface: #0a0a0a;
    --tf-surface-2: #111;
    --tf-surface-3: #171717;
    --tf-border: rgba(255, 255, 255, 0.08);
    --tf-border-strong: rgba(255, 255, 255, 0.16);
    --tf-text: #f4f4f5;
    --tf-muted: #a1a1aa;
    --tf-dim: #71717a;
    --tf-red: #cf362d;
    --tf-red-hover: #e0473d;
    --tf-red-soft: rgba(207, 54, 45, 0.14);
    --tf-green: #4ade80;
    --tf-green-soft: rgba(74, 222, 128, 0.12);
    --tf-amber: #f5d984;
    --tf-amber-soft: rgba(245, 217, 132, 0.12);
    --tf-blue: #60a5fa;
    --tf-blue-soft: rgba(96, 165, 250, 0.12);
    --tf-radius: 10px;
    --tf-header-h: 64px;
    --tf-side-w: 236px;
}

html.tf-app,
html.tf-app body {
    background: var(--tf-bg);
    min-height: 100%;
}

.tf-shell,
.tf-shell *,
.tf-shell *::before,
.tf-shell *::after,
.tf-modal-back,
.tf-modal-back * {
    box-sizing: border-box;
}

.tf-shell {
    color: var(--tf-text);
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    display: grid;
    grid-template-columns: var(--tf-side-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--tf-header-h));
    border-top: 1px solid var(--tf-border);
}

.tf-shell button,
.tf-shell input,
.tf-shell select,
.tf-shell textarea,
.tf-modal button,
.tf-modal input,
.tf-modal select,
.tf-modal textarea {
    font: inherit;
    color: inherit;
}

.tf-shell :focus-visible,
.tf-modal :focus-visible {
    outline: 2px solid var(--tf-red);
    outline-offset: 2px;
}

.tf-icon {
    flex: none;
    display: block;
}

/* main.css pins every button[type=submit] absolutely (the search arrows);
   app pages never want that. */
.tf-shell button[type='submit'],
.tf-modal button[type='submit'] {
    position: static;
    width: auto;
    height: auto;
    transform: none;
}

/* Components set display:flex; `hidden` must still win. */
.tf-shell [hidden],
.tf-modal [hidden] {
    display: none !important;
}

/* Focused programmatically after navigation, for screen readers only. */
.tf-main:focus {
    outline: none;
}

.tf-card p,
.tf-modal p {
    margin: 0 0 12px;
}

.tf-card ul:not(.tf-list):not(.tf-timeline) {
    list-style: disc;
    padding-left: 18px;
}

/* ---------------------------------------------------------------- sidebar */

.tf-side {
    position: sticky;
    top: var(--tf-header-h);
    height: calc(100vh - var(--tf-header-h));
    /* The visible height: on iPad Safari 100vh is the height with the
       toolbars hidden, which put the credits under the bottom toolbar and
       left the sidebar scrolling on its own. */
    height: calc(100dvh - var(--tf-header-h));
    /* Reaching the end of the sidebar never drags the page along. */
    overscroll-behavior: contain;
    background: var(--tf-bg);
    border-right: 1px solid var(--tf-border);
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    gap: 4px;
    overflow-y: auto;
}

.tf-side-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tf-dim);
    padding: 12px 10px 6px;
}

.tf-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--tf-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}

.tf-nav:hover {
    background: var(--tf-surface-2);
    color: var(--tf-text);
}

.tf-nav[aria-current='page'] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tf-text);
}

.tf-nav .tf-badge {
    margin-left: auto;
}

.tf-side-foot {
    margin-top: auto;
    padding: 14px 10px 4px;
    border-top: 1px solid var(--tf-border);
}

.tf-credit-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tf-amber);
    font-weight: 600;
}

.tf-credit-chip small {
    color: var(--tf-dim);
    font-weight: 400;
}

/* ------------------------------------------------------------------- main */

.tf-main {
    min-width: 0;
    padding: 28px 32px 64px;
}

.tf-page {
    max-width: 1120px;
    margin: 0 auto;
}

.tf-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.tf-page-head h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--tf-text);
}

.tf-page-head p {
    margin: 4px 0 0;
    color: var(--tf-muted);
}

.tf-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.tf-grid {
    display: grid;
    gap: 14px;
}

.tf-grid.stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 18px;
}

.tf-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.tf-grid.cards {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.tf-card {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    padding: 18px;
    min-width: 0;
}

.tf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.tf-card-head h2,
.tf-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--tf-text);
}

.tf-card-head a {
    color: var(--tf-muted);
    text-decoration: none;
    font-size: 13px;
}

.tf-card-head a:hover {
    color: var(--tf-text);
}

.tf-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}

a.tf-stat:hover {
    border-color: var(--tf-border-strong);
    transform: translateY(-1px);
}

.tf-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tf-muted);
    font-size: 13px;
}

.tf-stat-value {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--tf-text);
}

.tf-stat-sub {
    color: var(--tf-dim);
    font-size: 12px;
}

.tf-stat.accent .tf-stat-value {
    color: var(--tf-amber);
}

.tf-muted {
    color: var(--tf-muted);
}

.tf-dim {
    color: var(--tf-dim);
}

.tf-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- buttons */

.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    border: 1px solid var(--tf-border-strong);
    background: var(--tf-surface-2);
    color: var(--tf-text);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

.tf-btn:hover {
    background: var(--tf-surface-3);
}

.tf-btn:disabled,
.tf-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tf-btn.accent {
    background: var(--tf-red);
    border-color: var(--tf-red);
    color: #fff;
}

.tf-btn.accent:hover:not(:disabled) {
    background: var(--tf-red-hover);
}

.tf-btn.danger {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
}

.tf-btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--tf-muted);
}

.tf-btn.ghost:hover {
    color: var(--tf-text);
    background: var(--tf-surface-2);
}

.tf-btn.icon {
    width: 32px;
    padding: 0;
}

.tf-btn.small {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.tf-btn.small.icon {
    width: 28px;
    padding: 0;
}

/* ----------------------------------------------------------------- badges */

.tf-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--tf-surface-3);
    color: var(--tf-muted);
    white-space: nowrap;
}

.tf-badge.red {
    background: var(--tf-red-soft);
    color: #fca5a5;
}

.tf-badge.green {
    background: var(--tf-green-soft);
    color: var(--tf-green);
}

.tf-badge.amber {
    background: var(--tf-amber-soft);
    color: var(--tf-amber);
}

.tf-badge.blue {
    background: var(--tf-blue-soft);
    color: var(--tf-blue);
}

.tf-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tf-badge.live .dot {
    animation: tf-pulse 1.2s ease-in-out infinite;
}

@keyframes tf-pulse {
    50% {
        opacity: 0.3;
    }
}

.tf-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--tf-surface-3);
    color: var(--tf-muted);
    flex: none;
}

.tf-kind.email {
    color: #93c5fd;
}

.tf-kind.username {
    color: #c4b5fd;
}

.tf-kind.phone {
    color: #86efac;
}

/* ------------------------------------------------------------------- list */

.tf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid var(--tf-border);
    min-width: 0;
}

.tf-row:first-child {
    border-top: 0;
}

.tf-row-main {
    min-width: 0;
    flex: 1;
}

.tf-row-title {
    color: var(--tf-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-row-title a {
    color: inherit;
    text-decoration: none;
}

.tf-row-title a:hover {
    text-decoration: underline;
}

.tf-row-sub {
    color: var(--tf-dim);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-row-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.tf-row.unread .tf-row-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tf-red);
    margin-right: 8px;
    vertical-align: 1px;
}

.tf-empty {
    text-align: center;
    padding: 34px 16px;
    color: var(--tf-muted);
}

.tf-empty > .tf-icon {
    margin: 0 auto 10px;
    color: var(--tf-dim);
}

.tf-empty h3 {
    margin: 0 0 4px;
    color: var(--tf-text);
    font-size: 15px;
}

.tf-empty p {
    margin: 0 0 14px;
}

/* ------------------------------------------------------------------ table */

.tf-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    background: var(--tf-surface);
}

.tf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tf-table th {
    text-align: left;
    font-weight: 500;
    color: var(--tf-dim);
    font-size: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tf-border);
    white-space: nowrap;
}

.tf-table td {
    padding: 11px 14px;
    border-top: 1px solid var(--tf-border);
    vertical-align: middle;
}

.tf-table tr:first-child td {
    border-top: 0;
}

.tf-table tr.clickable {
    cursor: pointer;
}

.tf-table tr.clickable:hover td {
    background: var(--tf-surface-2);
}

.tf-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tf-detail td {
    background: var(--tf-surface-2);
}

.tf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--tf-surface-3);
    color: var(--tf-text);
    font-size: 12px;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.tf-chip:hover {
    background: #26262c;
}

/* ------------------------------------------------------------------ forms */

.tf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.tf-field label {
    font-size: 13px;
    color: var(--tf-muted);
    font-weight: 500;
}

.tf-input,
.tf-select,
.tf-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid var(--tf-border-strong);
    background: var(--tf-bg);
    color: var(--tf-text);
    outline: none;
}

.tf-textarea {
    min-height: 140px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}

.tf-input:focus,
.tf-select:focus,
.tf-textarea:focus {
    border-color: var(--tf-red);
}

.tf-hint {
    font-size: 12px;
    color: var(--tf-dim);
}

.tf-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--tf-muted);
    margin-bottom: 12px;
    cursor: pointer;
}

.tf-check input {
    margin-top: 3px;
    accent-color: var(--tf-red);
}

.tf-segment {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--tf-bg);
    border: 1px solid var(--tf-border-strong);
    border-radius: 9px;
    flex-wrap: wrap;
}

.tf-segment button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--tf-muted);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.tf-segment button[aria-pressed='true'] {
    background: var(--tf-surface-3);
    color: var(--tf-text);
}

.tf-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--tf-border);
    margin-bottom: 14px;
    overflow-x: auto;
}

.tf-tabs button {
    border: 0;
    background: transparent;
    color: var(--tf-muted);
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tf-tabs button[aria-selected='true'] {
    color: var(--tf-text);
    border-bottom-color: var(--tf-red);
}

.tf-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tf-toolbar .tf-input {
    max-width: 280px;
}

.tf-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    color: var(--tf-dim);
    font-size: 13px;
}

/* --------------------------------------------------------------- progress */

.tf-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--tf-surface-3);
    overflow: hidden;
}

.tf-progress > span {
    display: block;
    height: 100%;
    background: var(--tf-red);
    border-radius: inherit;
    transition: width 0.4s ease;
}

.tf-progress.done > span {
    background: var(--tf-green);
}

/* Bulk list: the progress column takes what the row leaves on phones instead
   of a fixed 140px that pushed the bar past the table's right edge. */
.tf-col-progress {
    min-width: 140px;
}

/* ----------------------------------------------------------------- notice */

.tf-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    /* Icon, text and button share one centre line (was flex-start: the text
       sat at the top while the button sat lower). */
    align-items: center;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid var(--tf-border);
    background: var(--tf-surface-2);
    color: var(--tf-muted);
    margin-bottom: 16px;
    font-size: 13px;
}

.tf-notice.amber {
    border-color: rgba(245, 217, 132, 0.3);
    background: var(--tf-amber-soft);
    color: #fde9b0;
}

.tf-notice.red {
    border-color: rgba(248, 113, 113, 0.3);
    background: var(--tf-red-soft);
    color: #fecaca;
}

.tf-notice strong {
    color: var(--tf-text);
}

/* The text takes the room; on a narrow screen the button drops below it
   instead of squeezing the text into a thin column. */
.tf-notice > div:not(.tf-actions) {
    flex: 1 1 260px;
    min-width: 0;
}

.tf-notice > svg {
    flex: none;
}

.tf-notice .tf-actions {
    margin-left: auto;
}

@media (max-width: 600px) {
    .tf-notice .tf-actions {
        margin-left: 0;
    }
}

/* Touch screens: no tap target smaller than 36px (small buttons were 28px). */
@media (pointer: coarse) {
    .tf-btn {
        height: 40px;
    }

    .tf-btn.small {
        height: 36px;
        padding: 0 12px;
    }

    .tf-btn.icon,
    .tf-btn.small.icon {
        width: 36px;
        height: 36px;
    }
}

/* --------------------------------------------------------------- timeline */

.tf-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}

.tf-timeline li {
    position: relative;
    padding: 0 0 18px 22px;
    border-left: 1px solid var(--tf-border-strong);
}

.tf-timeline li:last-child {
    border-left-color: transparent;
}

.tf-timeline li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tf-dim);
    box-shadow: 0 0 0 3px var(--tf-surface);
}

.tf-timeline li.changes::before {
    background: var(--tf-red);
}

.tf-timeline li.baseline::before {
    background: var(--tf-blue);
}

.tf-timeline li.ok::before {
    background: var(--tf-green);
}

.tf-timeline li.error::before,
.tf-timeline li.no_credits::before {
    background: var(--tf-amber);
}

.tf-timeline .tf-chips {
    margin-top: 8px;
}

/* ------------------------------------------------------------------ drop */

.tf-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 34px 18px;
    border: 1.5px dashed var(--tf-border-strong);
    border-radius: var(--tf-radius);
    background: var(--tf-bg);
    color: var(--tf-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.tf-drop:hover,
.tf-drop.over {
    border-color: var(--tf-red);
    background: var(--tf-red-soft);
}

.tf-drop strong {
    color: var(--tf-text);
}

.tf-quote {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.tf-quote div {
    background: var(--tf-surface-2);
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    padding: 12px;
}

.tf-quote b {
    display: block;
    font-size: 20px;
    color: var(--tf-text);
}

.tf-quote span {
    font-size: 12px;
    color: var(--tf-dim);
}

.tf-quote .cost b {
    color: var(--tf-amber);
}

/* ----------------------------------------------------------- modal/toasts */

.tf-modal-back {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.tf-modal {
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border-strong);
    border-radius: 14px;
    color: var(--tf-text);
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.tf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 6px;
}

.tf-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tf-text);
}

.tf-modal-body {
    padding: 8px 18px 4px;
}

.tf-modal-body p {
    margin: 0 0 12px;
}

.tf-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 18px;
}

#tf-toasts {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
}

.tf-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--tf-surface-2);
    border: 1px solid var(--tf-border-strong);
    color: var(--tf-text);
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s, transform 0.3s;
}

.tf-toast.error .tf-toast-ico {
    color: #f87171;
}

.tf-toast .tf-toast-ico {
    color: var(--tf-green);
}

.tf-toast.out {
    opacity: 0;
    transform: translateY(6px);
}

.tf-skeleton {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--tf-surface-2), var(--tf-surface-3), var(--tf-surface-2));
    background-size: 200% 100%;
    animation: tf-shimmer 1.2s linear infinite;
    margin: 10px 0;
}

@keyframes tf-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* ---------------------------------------------------------------- mobile */

.tf-side-toggle {
    display: none;
}

@media (max-width: 900px) {
    .tf-shell {
        grid-template-columns: minmax(0, 1fr);
        /* Rows take their content's height. Without this the shell's
           min-height is shared out between the tab strip and the (still
           empty) main area, and the strip shows as a tall block until the
           first section has loaded. */
        align-content: start;
    }

    /* Tablets and phones: the sections are a tab strip that stays under the
       site header while the page scrolls, with the credits at its end. */
    .tf-side {
        position: sticky;
        top: var(--tf-header-h);
        z-index: 50;
        height: auto;
        align-items: center;
        flex-direction: row;
        /* The tab strip scrolls on its own; reaching its end must not drag
           the page sideways (iOS). */
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        overflow-x: auto;
        padding: 8px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--tf-border);
        gap: 2px;
    }

    .tf-side-title {
        display: none;
    }

    /* Pinned to the strip's right edge: the tabs scroll under it, so the
       balance is always in view. */
    .tf-side-foot {
        flex: none;
        position: sticky;
        right: -10px;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: -8px -10px -8px auto;
        padding: 8px 10px 8px 14px;
        align-self: stretch;
        border-top: 0;
        border-left: 1px solid var(--tf-border);
        background: var(--tf-bg);
        box-shadow: -16px 0 16px -4px var(--tf-bg);
    }

    .tf-side-foot .tf-credit-chip {
        white-space: nowrap;
        font-size: 13px;
    }

    .tf-side-foot .tf-hint {
        display: none;
    }

    .tf-side-foot .tf-btn {
        width: auto !important;
        margin-top: 0 !important;
        white-space: nowrap;
    }

    .tf-nav {
        flex: none;
        padding: 7px 10px;
        /* The bundled site CSS sets a { touch-action: pan-y }. The tabs fill
           the strip, so every swipe starts on one and sideways panning was
           refused: the strip could not be scrolled on phones. */
        touch-action: manipulation;
    }

    .tf-nav[aria-current='page'] {
        box-shadow: inset 0 -2px 0 var(--tf-red);
    }

    .tf-main {
        padding: 20px 16px 48px;
    }

    .tf-grid.two {
        grid-template-columns: minmax(0, 1fr);
    }

    .tf-hide-narrow {
        display: none;
    }

    .tf-col-progress {
        min-width: 64px;
        width: 26%;
    }
}

@media (max-width: 520px) {
    .tf-side-foot .tf-btn {
        display: none;
    }

    .tf-grid.stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-stat-value {
        font-size: 21px;
    }

    .tf-page-head h1 {
        font-size: 21px;
    }

    .tf-toolbar .tf-input {
        max-width: none;
    }
}

/* bulk.html has no sidebar. */
.tf-shell.tf-shell-single {
    grid-template-columns: minmax(0, 1fr);
}

/* "Where did you hear about us" on the dashboard spans the page. */
.tf-page .tf-found {
    max-width: none;
    margin: 0;
}

/* ------------------------------------------------------------ admin portal */

.tf-login {
    min-height: calc(100vh - var(--tf-header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.tf-login .tf-card {
    width: min(380px, 100%);
    padding: 26px;
}

.tf-login h1 {
    margin: 0 0 4px;
    font-size: 20px;
}

.tf-kpi-delta {
    font-size: 12px;
    font-weight: 600;
}

.tf-kpi-delta.up {
    color: var(--tf-green);
}

.tf-kpi-delta.down {
    color: #f87171;
}

.tf-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.tf-chart text {
    fill: var(--tf-dim);
    font-size: 10px;
    font-family: inherit;
}

.tf-chart .grid {
    stroke: rgba(255, 255, 255, 0.06);
}

.tf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--tf-muted);
    margin-top: 8px;
}

.tf-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 3px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--c);
}

.tf-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tf-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    font-size: 13px;
}

.tf-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tf-text);
}

.tf-bar-value {
    color: var(--tf-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tf-bar-track {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 999px;
    background: var(--tf-surface-3);
    overflow: hidden;
}

.tf-bar-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c, var(--tf-red));
}

.tf-funnel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tf-funnel-step {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.tf-funnel-step .bar {
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--tf-red), #e8743b);
    min-width: 2px;
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.tf-funnel-step .pct {
    color: var(--tf-muted);
    font-size: 12px;
    text-align: right;
}

.tf-insights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-insights li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--tf-text);
    font-size: 13.5px;
}

.tf-insights li .tf-icon {
    color: var(--tf-amber);
    margin-top: 2px;
}

.tf-section {
    scroll-margin-top: calc(var(--tf-header-h) + 12px);
    margin-top: 34px;
}

.tf-section > h2 {
    font-size: 18px;
    margin: 0 0 12px;
    color: var(--tf-text);
    display: flex;
    align-items: center;
    gap: 9px;
}

.tf-grid.three {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 640px) {
    .tf-funnel-step {
        grid-template-columns: 110px minmax(0, 1fr) 52px;
    }
}

/* API section (dashboard.js renderApi) */
.tf-code {
    margin: 8px 0 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--tf-border, hsla(0, 0%, 100%, 0.1));
    border-radius: 8px;
    background: hsla(0, 0%, 100%, 0.03);
    color: var(--tf-text, #ededed);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre;
}

.tf-plain {
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--tf-muted, #a1a1a1);
    font-size: 13.5px;
    line-height: 1.6;
}

.tf-plain li + li {
    margin-top: 6px;
}

/* --------------------------------------------------------------- selects */
/* One select style for the dashboard, its dialogs and bulk search: the
   browser's own arrow sat far from the edge on Android and looked out of
   place. Same chevron as the canvas selects (css/canvas.css .cv-select). */
.tf-shell select,
.tf-modal select,
select.tf-input,
select.tf-input:hover,
select.tf-input:focus {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Code samples wrap on a phone instead of running into the card's edge. */
@media (max-width: 600px) {
    .tf-code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}


/* ------------------------------------------------- account page, refined
   Flatter and quieter: one black surface, hairline dividers instead of a
   card per number, white primary buttons like the site's header. */

.tf-page-head h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
}
.tf-page-head p {
    color: var(--tf-dim);
}
.tf-page-head {
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--tf-border);
}

.tf-card {
    background: var(--tf-surface);
    border-color: var(--tf-border);
}
.tf-card-head h2,
.tf-card-head h3 {
    font-size: 13px;
    font-weight: 500;
    color: var(--tf-muted);
    letter-spacing: 0;
}

/* Primary action: white on black, like "Account" / "Start Now" in the header. */
.tf-btn.accent {
    background: #f4f4f5;
    border-color: #f4f4f5;
    color: #09090b;
}
.tf-btn.accent:hover:not(:disabled) {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* Overview numbers: one strip with hairline dividers. */
.tf-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    background: var(--tf-surface);
    margin-bottom: 20px;
    overflow: hidden;
}
.tf-stats .tf-stat {
    padding: 16px 18px 18px;
    gap: 4px;
    border-left: 1px solid var(--tf-border);
    transition: background 0.15s;
}
.tf-stats .tf-stat:first-child {
    border-left: 0;
}
.tf-stats a.tf-stat:hover {
    transform: none;
    background: var(--tf-surface-2);
}
.tf-stats .tf-stat-label {
    font-size: 12px;
    color: var(--tf-dim);
}
.tf-stats .tf-stat-value {
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.tf-stats .tf-stat-sub {
    font-size: 12px;
    line-height: 1.4;
}
@media (max-width: 1100px) {
    .tf-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tf-stats .tf-stat:nth-child(3n + 1) {
        border-left: 0;
    }
    .tf-stats .tf-stat:nth-child(n + 4) {
        border-top: 1px solid var(--tf-border);
    }
}
@media (max-width: 560px) {
    .tf-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tf-stats .tf-stat {
        padding: 14px;
    }
    .tf-stats .tf-stat:nth-child(3n + 1) {
        border-left: 1px solid var(--tf-border);
    }
    .tf-stats .tf-stat:nth-child(2n + 1) {
        border-left: 0;
    }
    .tf-stats .tf-stat:nth-child(n + 3) {
        border-top: 1px solid var(--tf-border);
    }
    .tf-stats .tf-stat-value {
        font-size: 22px;
    }
}

/* Account & billing: settings list (label · value · actions). */
.tf-set {
    margin-bottom: 28px;
}
.tf-set-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tf-muted);
}
.tf-set-box {
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    background: var(--tf-surface);
}
.tf-set-row {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 28px;
    padding: 18px 20px;
    border-top: 1px solid var(--tf-border);
}
.tf-set-row:first-child {
    border-top: 0;
}
.tf-set-label h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--tf-text);
}
.tf-set-label p {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tf-dim);
}
.tf-set-big {
    font-size: 15px;
    font-weight: 500;
    color: var(--tf-text);
    font-variant-numeric: tabular-nums;
}
.tf-set-big.tf-amber {
    color: var(--tf-amber);
}
.tf-set-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--tf-dim);
}
.tf-set-id {
    font-size: 14px;
    color: var(--tf-text);
    letter-spacing: 0.04em;
}
.tf-set-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
@media (max-width: 820px) {
    .tf-set-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }
    .tf-set-actions {
        justify-content: flex-start;
    }
}

.tf-page .tf-found {
    background: var(--tf-surface);
    border-color: var(--tf-border);
    border-radius: var(--tf-radius);
}

/* ------------------------------------------------------ delete account */
.tf-set-danger .tf-set-title {
    color: #fca5a5;
}

.tf-set-danger .tf-set-box {
    border-color: rgba(248, 113, 113, 0.3);
    background: linear-gradient(180deg, rgba(207, 54, 45, 0.06), rgba(207, 54, 45, 0.015)), var(--tf-surface);
}

.tf-btn.danger:hover:not(:disabled),
.tf-btn.danger.solid {
    color: #fff;
    background: var(--tf-red);
    border-color: var(--tf-red);
}

.tf-btn.danger.solid:hover:not(:disabled) {
    background: var(--tf-red-hover);
    border-color: var(--tf-red-hover);
}

.tf-delete-alt {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    background: var(--tf-surface-2);
    color: var(--tf-muted);
    font-size: 13px;
    line-height: 1.5;
}

.tf-delete-alt strong,
.tf-delete-alt a {
    color: var(--tf-text);
}

.tf-delete-alt a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tf-modal-body .tf-notice {
    margin: 0 0 10px;
}

/* ------------------------------------- highlighted code (js/tf-highlight.js) */
.tf-hl {
    white-space: pre;
    background: #0d0d0d;
    font-size: 12.5px;
    line-height: 1.65;
}
.tf-hl .tk-c { color: #7d8590; font-style: italic; }
.tf-hl .tk-s { color: #a5d6ff; }
.tf-hl .tk-i { color: #ededed; }
.tf-hl .tk-k { color: #ff7b72; }
.tf-hl .tk-n,
.tf-hl .tk-b { color: #79c0ff; }
.tf-hl .tk-f { color: #d2a8ff; }
.tf-hl .tk-p { color: #7ee787; }
.tf-hl .tk-v { color: #ffa657; }

.tf-mcp-url {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    background: var(--tf-surface-2);
}
.tf-mcp-url code {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--tf-text);
    font-size: 13px;
}

.tf-mcp-setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: start;
    margin: 4px 0 16px;
}
.tf-mcp-setup .tf-mcp-url {
    margin-top: 24px;
}
.tf-mcp-setup .tf-field {
    margin: 0;
}
.tf-mcp-tabs {
    margin-bottom: 12px;
}
.tf-mcp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}
.tf-mcp-head .tf-actions {
    margin: 0;
}
.tf-mcp-panel .tf-hint {
    margin: 0;
}
.tf-mcp-panel > .tf-hint {
    margin-top: 8px;
}
.tf-cols {
    columns: 2;
    column-gap: 32px;
}
.tf-cols li {
    break-inside: avoid;
}
@media (max-width: 760px) {
    .tf-mcp-setup {
        grid-template-columns: 1fr;
    }
    .tf-mcp-setup .tf-mcp-url {
        margin-top: 0;
    }
    .tf-cols {
        columns: 1;
    }
}

/* ---------------------------------------------------------------- projects */
.tf-project-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tf-project-kinds .tf-chip { padding: 2px 8px 2px 2px; }
.tf-project-kinds .tf-kind { width: 20px; height: 20px; border-radius: 5px; }
.tf-project-kinds .tf-kind svg { width: 12px; height: 12px; }
.tf-pick-list { max-height: 50vh; overflow-y: auto; margin-top: 10px; }
.tf-pick { cursor: pointer; border-radius: 8px; }
.tf-pick:hover { background: var(--tf-surface-2); }
.tf-pick input { accent-color: var(--tf-red); width: 16px; height: 16px; flex: none; }
.tf-pick.done { cursor: default; opacity: 0.55; }
.tf-pick-projects { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.tf-pick-project {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
    border: 1px solid var(--tf-border); border-radius: 10px; background: var(--tf-surface-2);
    color: var(--tf-text); font: inherit; text-align: left; cursor: pointer;
}
.tf-pick-project:hover, .tf-pick-project:focus-visible { border-color: var(--tf-border-strong); background: var(--tf-surface-3); outline: none; }
.tf-pick-project svg { color: var(--tf-red); flex: none; }
.tf-pick-project.done svg { color: #4ade80; }
.tf-pick-project span { display: flex; flex-direction: column; min-width: 0; }
.tf-pick-project b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-pick-project small { color: var(--tf-muted); font-size: 12px; }

/* Sign-in methods (Account tab, js/tf-oauth.js) */
.tf-set-oauth { display: inline-flex; align-items: center; gap: 8px; }
.tf-set-oauth svg { width: 16px; height: 16px; flex: none; }