/* =====================================================================
   Phone Setu — Design System (navy)
   Anchor navy #0B2447 (trust) · blue #2563EB accent · green #16A34A success.
   Self-hosted Inter. Built for millisecond loads: tiny footprint, no external
   requests. Every reusable primitive the whole product leans on lives here.
   ===================================================================== */

@font-face {
    font-family: "InterVar";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/InterVariable.woff2") format("woff2");
}

:root {
    /* Brand navy (trust anchor) */
    --navy-900: #071634;
    --navy-800: #0b2447;   /* primary */
    --navy-700: #12345f;
    --navy-600: #1b4479;
    --navy-500: #275a97;

    /* Blue accent (interactive) */
    --blue-50:  #eff5ff;
    --blue-100: #dbe8fe;
    --blue-200: #bfd6fe;
    --blue-300: #93b8fd;
    --blue-400: #6094fa;
    --blue-500: #3b74f0;
    --blue-600: #2563eb;   /* accent */
    --blue-700: #1d4fd0;

    /* Neutrals — slate with a faint navy bias (chosen, not defaulted) */
    --white:  #ffffff;
    --slate-50:  #f5f8fc;
    --slate-100: #eaf0f8;
    --slate-200: #dbe3ef;
    --slate-300: #c3cfe0;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Semantic */
    --success: #16a34a; --success-bg: #dcfce7; --success-fg: #14532d;
    --warning: #b45309; --warning-bg: #fdf1d8;
    --danger:  #dc2626; --danger-bg: #fee2e2;

    /* Roles */
    --primary: var(--navy-800);
    --primary-hover: var(--navy-700);
    --accent: var(--blue-600);
    --accent-hover: var(--blue-700);
    --bg: var(--white);
    --bg-soft: var(--slate-50);
    --bg-muted: var(--slate-100);
    --surface: var(--white);
    --text: var(--slate-900);
    --text-soft: var(--slate-600);
    --text-muted: var(--slate-400);
    --border: var(--slate-200);
    --border-strong: var(--slate-300);
    --ring: rgba(37, 99, 235, .35);

    /* Zebra grid rows */
    --row-odd: var(--white);
    --row-even: var(--slate-50);
    --row-hover: var(--blue-50);

    /* Typography */
    --font-sans: "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem;
    --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.25rem; --fs-5xl:3rem; --fs-6xl:3.75rem;
    --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.6;

    /* Spacing / layout */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
    --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
    --space-20:5rem; --space-24:6rem;
    --container:1180px; --container-narrow:820px;

    --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-full:999px;

    --shadow-xs:0 1px 2px rgba(11,36,71,.06);
    --shadow-sm:0 2px 8px rgba(11,36,71,.08);
    --shadow-md:0 8px 24px rgba(11,36,71,.10);
    --shadow-lg:0 18px 45px rgba(11,36,71,.16);
    --shadow-navy:0 12px 30px rgba(11,36,71,.30);

    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --dur-fast:.15s; --dur:.28s; --dur-slow:.5s;
}

/* Reset / base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);
    color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    font-feature-settings:"cv11","ss01"}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{line-height:var(--lh-tight);font-weight:800;letter-spacing:-.02em;margin:0 0 var(--space-4);color:var(--navy-900);text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,var(--fs-6xl))}
h2{font-size:clamp(1.7rem,3.6vw,var(--fs-4xl))}
h3{font-size:var(--fs-2xl)}
p{margin:0 0 var(--space-4)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:var(--r-sm)}

/* Layout helpers */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.container-narrow{max-width:var(--container-narrow)}
.section{padding-block:clamp(3rem,7vw,var(--space-24))}
.section-soft{background:var(--bg-soft)}
.text-center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--blue-50);
    padding:var(--space-2) var(--space-3);border-radius:var(--r-full);border:1px solid var(--blue-100)}
.lead{font-size:var(--fs-lg);color:var(--text-soft);max-width:60ch}
.muted{color:var(--text-muted)}
.grid{display:grid;gap:var(--space-6)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* Buttons */
.btn{--btn-bg:var(--primary);--btn-fg:#fff;position:relative;display:inline-flex;align-items:center;
    justify-content:center;gap:var(--space-2);font:inherit;font-weight:700;font-size:var(--fs-base);
    padding:.75rem 1.4rem;border-radius:var(--r-md);border:1px solid transparent;background:var(--btn-bg);
    color:var(--btn-fg);cursor:pointer;white-space:nowrap;text-align:center;box-shadow:var(--shadow-navy);
    transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur-fast) var(--ease),opacity var(--dur-fast)}
.btn:hover{background:var(--primary-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn-accent{--btn-bg:var(--accent);box-shadow:0 12px 30px rgba(37,99,235,.28)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-lg{padding:.95rem 1.8rem;font-size:var(--fs-lg)}
.btn-sm{padding:.4rem .75rem;font-size:var(--fs-sm);box-shadow:none}
.btn-danger{--btn-fg:#dc2626}
.btn-danger:hover{background:#fee2e2;color:#b91c1c}
.row-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
    border-radius:8px;border:1px solid var(--border-strong);background:#fff;color:var(--navy-800);
    transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast)}
.icon-btn svg{width:17px;height:17px}
.icon-btn.wa{border-color:#bfeecb}
.icon-btn.wa:hover{background:#e7fbef;border-color:#8fe0a6}
.icon-btn.call{color:var(--accent)}
.icon-btn.call:hover{background:var(--blue-50);border-color:var(--blue-200)}

/* Allotment workload summary */
.workload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3)}
.workload-item{display:flex;align-items:center;gap:.7rem;border:1px solid var(--border);border-radius:var(--r-md);
    padding:.55rem .8rem;color:inherit;text-decoration:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast),transform var(--dur-fast)}
a.workload-item:hover{background:var(--blue-50);border-color:var(--blue-200);transform:translateY(-1px);text-decoration:none}
.workload-num{flex:none;min-width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
    font-weight:800;font-size:var(--fs-lg);color:var(--accent);background:var(--blue-50)}
.workload-name{font-weight:700;font-size:var(--fs-sm);color:var(--navy-900)}
.workload-team{font-size:var(--fs-xs);color:var(--slate-500)}
.bulk-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;background:var(--blue-50);
    border:1px solid var(--blue-200);border-radius:var(--r-md);padding:.55rem .9rem;margin-bottom:var(--space-3)}
.bulk-count{font-size:var(--fs-sm);font-weight:700;color:var(--navy-800)}
.bulk-select{max-width:260px;padding-top:.4rem;padding-bottom:.4rem}
.row-check,input[data-check-all]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* Key-value detail table */
table.kv{width:100%;border-collapse:collapse}
table.kv td{padding:.5rem .25rem;border-bottom:1px solid var(--border);vertical-align:top;font-size:var(--fs-sm)}
table.kv td:first-child{color:var(--slate-500);width:42%}
table.kv tr:last-child td{border-bottom:0}

/* Timeline (lead history) */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.timeline-item{display:flex;gap:.8rem;align-items:flex-start}
.timeline-dot{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    background:var(--blue-50);color:var(--accent)}
.timeline-item.t-stage .timeline-dot{background:#dcfce7;color:var(--success)}
.timeline-item.t-call .timeline-dot{background:#ede9fe;color:#7c3aed}
.timeline-dot svg{width:16px;height:16px}
.timeline-body{font-size:var(--fs-sm);color:var(--navy-800)}
.timeline-meta{color:var(--slate-500);font-size:var(--fs-xs);margin-top:2px}
.check-row{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:var(--fs-sm);color:var(--navy-800);margin-bottom:var(--space-3)}
.check-row input{width:17px;height:17px;accent-color:var(--accent);flex:none}
.perm-grid{display:grid;gap:.35rem}
.perm-item{align-items:flex-start;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--r-md)}
.perm-item:hover{background:var(--blue-50);border-color:var(--blue-200)}
.perm-item input{margin-top:2px}
.perm-item small{display:block;color:var(--slate-500);font-size:var(--fs-xs);margin-top:1px}
.btn-block{width:100%}
.btn-secondary{--btn-bg:var(--white);--btn-fg:var(--navy-800);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
/* Set background directly so it wins over .btn:hover; keeps dark text on a light hover bg. */
.btn-secondary:hover{background:var(--blue-50);color:var(--navy-800);border-color:var(--blue-200);box-shadow:var(--shadow-sm)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--accent);box-shadow:none}
.btn-ghost:hover{background:var(--blue-50);color:var(--accent-hover)}
.btn-white{--btn-bg:#fff;--btn-fg:var(--navy-800);box-shadow:var(--shadow-md)}
.btn-white:hover{background:var(--blue-50);color:var(--navy-900)}
/* PRG busy state ("please wait") */
.btn[data-busy="true"]{pointer-events:none;opacity:.8}
.btn[data-busy="true"] .btn-label{visibility:hidden}
.btn[data-busy="true"]::after{content:"";position:absolute;width:1.1em;height:1.1em;border:2.5px solid rgba(255,255,255,.5);
    border-top-color:#fff;border-radius:50%;animation:ps-spin .6s linear infinite}
.btn-secondary[data-busy="true"]::after,.btn-white[data-busy="true"]::after{border-color:rgba(37,99,235,.35);border-top-color:var(--accent)}
@keyframes ps-spin{to{transform:rotate(360deg)}}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-6);
    box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur)}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-md);
    background:linear-gradient(135deg,var(--navy-700),var(--navy-800));color:#fff;box-shadow:var(--shadow-navy);margin-bottom:var(--space-4)}
.icon-badge svg{width:26px;height:26px}
.icon-accent{background:linear-gradient(135deg,var(--blue-500),var(--blue-700));box-shadow:0 12px 30px rgba(37,99,235,.28)}
.icon-soft{background:var(--blue-50);color:var(--accent);box-shadow:none;border:1px solid var(--blue-100)}

/* Forms */
.field{margin-bottom:var(--space-5)}
.field label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--space-2);color:var(--slate-700)}
.control{width:100%;font:inherit;color:var(--text);padding:.7rem .85rem;border:1px solid var(--border-strong);
    border-radius:var(--r-md);background:var(--white);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.control::placeholder{color:var(--text-muted)}
.control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
textarea.control{min-height:120px;resize:vertical}
.field-hint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-1)}
.field-error,.text-danger,.validation-summary-errors{color:var(--danger);font-size:var(--fs-sm)}
.input-validation-error{border-color:var(--danger)!important;box-shadow:0 0 0 4px var(--danger-bg)!important}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Password field: show/hide eye */
.pw-wrap{position:relative}
.pw-wrap .control{padding-right:2.75rem}
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;
    display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--slate-500);border-radius:var(--r-sm)}
.pw-toggle:hover{color:var(--accent);background:var(--blue-50)}
.pw-toggle svg{width:19px;height:19px}
/* Password strength meter */
.pw-strength{margin-top:.5rem;display:flex;align-items:center;gap:.6rem}
.pw-strength-track{flex:1;height:6px;background:var(--slate-200);border-radius:999px;overflow:hidden}
.pw-strength-track>span{display:block;height:100%;width:0;border-radius:999px;transition:width var(--dur) var(--ease),background var(--dur)}
.pw-strength-label{font-size:var(--fs-xs);font-weight:700;min-width:52px;text-align:right}

/* Alerts */
.alert{padding:var(--space-4) var(--space-5);border-radius:var(--r-md);border:1px solid;display:flex;gap:var(--space-3);align-items:flex-start}
.alert-success{background:var(--success-bg);border-color:#86efac;color:var(--success-fg)}
.alert-info{background:var(--blue-50);border-color:var(--blue-200);color:var(--navy-800)}
.alert-warn{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.alert-danger{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.alert svg{width:20px;height:20px;flex:none}

/* Required-field marker + form notice (added to every data-entry form by app.js) */
.req{color:#dc2626;font-weight:800}
.form-required-note{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-sm);color:var(--slate-600);
    background:var(--blue-50);border:1px solid var(--blue-200);border-radius:var(--r-md);
    padding:.6rem .9rem;margin-bottom:var(--space-5)}

/* Data grid (zebra + sticky head + export toolbar) */
.grid-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-xs)}
table.data-grid{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data-grid thead th{position:sticky;top:0;background:var(--navy-800);color:#fff;text-align:left;font-weight:700;
    padding:.75rem 1rem;white-space:nowrap}
table.data-grid tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--border)}
table.data-grid tbody tr:nth-child(odd){background:var(--row-odd)}
table.data-grid tbody tr:nth-child(even){background:var(--row-even)}
table.data-grid tbody tr:hover{background:var(--row-hover)}
table.data-grid td.num,table.data-grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data-grid th.dg-sortable{cursor:pointer;user-select:none;position:relative;padding-right:1.6rem}
table.data-grid th.dg-sortable::after{content:"";position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
    width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.35;
    border-bottom:5px solid currentColor}
table.data-grid th.dg-sortable:hover::after{opacity:.7}
table.data-grid th.dg-asc::after{opacity:1;border-bottom:5px solid currentColor;border-top:0}
table.data-grid th.dg-desc::after{opacity:1;border-top:5px solid currentColor;border-bottom:0}
table.data-grid tr.dg-empty td{text-align:center;color:var(--slate-500);padding:2rem;font-style:italic}

/* Enhanced grid: toolbar + paging (auto-added to every .data-grid) */
.dg-toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.dg-search{display:flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--border-strong);
    border-radius:var(--r-md);padding:.5rem .75rem;flex:1 1 220px;max-width:340px;color:var(--slate-500);box-shadow:var(--shadow-xs)}
.dg-search input{border:0;outline:0;background:none;font:inherit;font-size:var(--fs-sm);color:var(--navy-800);width:100%}
.dg-search svg{flex:none}
.dg-tools{display:flex;gap:var(--space-2);margin-left:auto;flex-wrap:wrap}
.dg-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--white);border:1px solid var(--border-strong);
    border-radius:var(--r-md);padding:.5rem .8rem;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--navy-800);
    cursor:pointer;box-shadow:var(--shadow-xs);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast)}
.dg-btn:hover{background:var(--blue-50);border-color:var(--blue-200)}
.dg-btn svg{flex:none;opacity:.75}
.dg-drop{position:relative}
.dg-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:170px;background:var(--white);
    border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.4rem;
    display:none;max-height:320px;overflow:auto}
.dg-drop.open .dg-menu{display:block;animation:dgIn var(--dur-fast) var(--ease) both}
@keyframes dgIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dg-menu button{display:flex;width:100%;align-items:center;gap:.5rem;background:none;border:0;border-radius:var(--r-sm);
    padding:.5rem .7rem;font:inherit;font-size:var(--fs-sm);color:var(--navy-800);cursor:pointer;text-align:left}
.dg-menu button:hover{background:var(--blue-50)}
.dg-check{display:flex;align-items:center;gap:.55rem;padding:.4rem .6rem;border-radius:var(--r-sm);
    font-size:var(--fs-sm);color:var(--navy-800);cursor:pointer}
.dg-check:hover{background:var(--blue-50)}
.dg-check input{accent-color:var(--accent);width:15px;height:15px}
.dg-footer{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-3);
    font-size:var(--fs-sm);color:var(--slate-600)}
.dg-pagesize{display:flex;align-items:center;gap:.5rem}
.dg-pagesize select{border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.3rem 1.4rem .3rem .5rem;
    font:inherit;font-size:var(--fs-sm);color:var(--navy-800);background:var(--white);cursor:pointer}
.dg-pageinfo{margin-left:auto}
.dg-pager{display:flex;align-items:center;gap:.35rem}
.dg-pager .dg-pagenow{min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.dg-pager button{width:32px;height:32px;border:1px solid var(--border-strong);background:var(--white);border-radius:var(--r-sm);
    cursor:pointer;font-size:1.1rem;line-height:1;color:var(--navy-800);display:inline-flex;align-items:center;justify-content:center}
.dg-pager button:hover:not(:disabled){background:var(--blue-50);border-color:var(--blue-200)}
.dg-pager button:disabled{opacity:.4;cursor:not-allowed}
.dg-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:200;background:var(--navy-800);
    color:#fff;padding:.7rem 1.2rem;border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);
    opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none}
.dg-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:560px){.dg-search{max-width:none;flex:1 1 100%}.dg-tools{width:100%}.dg-pageinfo{margin-left:0;width:100%;order:5}}

/* Searchable combo (autocomplete) */
.combo{position:relative}
.combo .control{padding-right:2rem}
.combo::after{content:"";position:absolute;right:.8rem;top:50%;width:9px;height:9px;
    border-right:2px solid var(--slate-500);border-bottom:2px solid var(--slate-500);
    transform:translateY(-65%) rotate(45deg);pointer-events:none}
.combo-menu{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--border-strong);
    border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;display:none}
.combo-menu.open{display:block}
.combo-option{padding:.55rem .85rem;cursor:pointer;font-size:var(--fs-sm)}
.combo-option:hover,.combo-option.active{background:var(--blue-50);color:var(--navy-800)}
.combo-option[aria-selected="true"]{font-weight:600}
.combo-empty{padding:.6rem .85rem;color:var(--text-muted);font-size:var(--fs-sm)}
.combo-option mark{background:var(--blue-100);color:inherit;padding:0 1px;border-radius:3px}

/* Badges / pills */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;padding:3px 10px;border-radius:var(--r-full)}
.badge-navy{background:var(--slate-100);color:var(--navy-800);border:1px solid var(--slate-200)}
.badge-blue{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100)}
.badge-green{background:var(--success-bg);color:var(--success-fg)}
.badge-red{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.badge-amber{background:#fef3c7;color:#b45309;border:1px solid #fde68a}

/* Inline checkbox + label (e.g. "mark as converted") */
.check-inline{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--navy-800)}
.check-inline input{width:1.05rem;height:1.05rem;flex:none}

/* Motion utilities (reveal on scroll) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
}

/* Utilities */
.stack-2>*+*{margin-top:var(--space-2)}
.stack-4>*+*{margin-top:var(--space-4)}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.wrap{flex-wrap:wrap}
.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-0{margin-bottom:0}
@media (max-width:720px){.hide-sm{display:none!important}}