/* BUILT FILE - do not edit. Source: Kitchen Sink/sensai-ui.css.
   Rebuild with: python3 "Kitchen Sink/build-plugin-css.py" */
/* ============================================================================
   SENSAI UI — Design System ("Kitchen Sink") stylesheet
   ----------------------------------------------------------------------------
   RULES OF THIS FILE
   1. Zero !important. Ever. Components win because the app is namespaced
      under .sensai-app, not because rules shout.
   2. Every visual decision comes from a token (Section 1). Change a token,
      the whole system follows.
   3. Naming: .sensai-<component>, variants as --modifier, states as .is-*.
      e.g.  .sensai-btn .sensai-btn--red .is-disabled
   4. New element needed? It gets designed HERE first, then used in the app.
   ============================================================================ */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root,
.sensai-app {
    /* Brand colours */
    --s-purple:        #6a3fd4;
    --s-purple-deep:   #55309e;   /* hover */
    --s-purple-ink:    #4d2f9e;
    --s-purple-050:    #efeaff;
    --s-purple-tint:   #f1eefe;
    --s-purple-line:   #ded5f8;
    --s-purple-link:   #7044dd;

    --s-red:           #d0362c;
    --s-red-deep:      #b02219;   /* hover */
    --s-red-link:      #b32d2e;
    --s-red-link-deep: #8a1f20;
    --s-rose:          #d64562;

    --s-teal:          #14b0a7;
    --s-teal-deep:     #0f8d86;   /* hover */
    --s-teal-050:      #e2f7f5;
    --s-teal-soft:     #76b4af;
    --s-teal-soft-deep:#5fa39d;
    --s-teal-line:     #cfe9e7;
    --s-teal-tint:     #f5fbfb;

    --s-green:         #23a55a;
    --s-green-ink:     #157a2b;
    --s-green-deep:    #176b24;
    --s-green-050:     #e7f7ec;

    --s-coral:         #f26d85;
    --s-coral-050:     #fde8ec;
    --s-amber:         #f5a524;
    --s-amber-050:     #fdf1da;
    --s-amber-ink:     #8a5200;
    --s-sky:           #38bdf8;
    --s-sky-050:       #e3f4fd;
    --s-blue-ink:      #1c4f9c;
    --s-blue-050:      #e2edff;

    /* Neutrals */
    --s-ink:           #22124d;
    --s-text:          #3a4051;
    --s-muted:         #7a8090;
    --s-line:          #ece8f6;
    --s-line-strong:   #d6d9e0;
    --s-bg:            #f6f7fb;
    --s-card:          #ffffff;
    --s-grey-050:      #eef0f2;
    --s-grey-ink:      #555555;

    /* Dark (auth) surface */
    --s-dark-bg:       #2f2451;   /* stand-in: real page bg comes from design */
    --s-dark-text:     #ffffff;

    /* Radii */
    --s-r-sm:   8px;
    --s-r:      10px;
    --s-r-lg:   12px;
    --s-r-xl:   16px;
    --s-round:  999px;

    /* Spacing scale — the ONLY spacing values allowed */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;

    /* Type */
    --s-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
    --s-fs-xs: 12px;
    --s-fs-sm: 13px;
    --s-fs:    15px;
    --s-fs-md: 17px;
    --s-fs-lg: 21px;
    --s-fs-xl: 27px;

    /* Effects */
    --s-shadow:    0 8px 30px rgba(34, 18, 77, .07);
    --s-shadow-sm: 0 3px 12px rgba(34, 18, 77, .06);
    --s-focus-ring: 0 0 0 3px rgba(106, 63, 212, .14);
    --s-ease: .15s ease;
}

/* ==========================================================================
   2. BASE — scoped normalisation. :where() keeps specificity at zero, so any
      component rule below overrides it without effort. This is what replaces
      the !important war: inside .sensai-app, theme styles are neutralised
      once, here, and never fought again.
   ========================================================================== */
.sensai-app.sensai-app.sensai-app {
    font-family: var(--s-font);
    font-size: var(--s-fs);
    color: var(--s-text);
    line-height: 1.55;
}
.sensai-app.sensai-app.sensai-app :where(button,
.sensai-app.sensai-app.sensai-app input,
.sensai-app.sensai-app.sensai-app select,
.sensai-app.sensai-app.sensai-app textarea) {
    font: inherit;
    color: inherit;
    margin: 0;
    box-shadow: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}
.sensai-app.sensai-app.sensai-app :where(button) {
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 0;
    padding: 0;
}
:root,
.sensai-app {
    color: var(--s-purple-link);
    text-decoration: none;
}
.sensai-app.sensai-app.sensai-app :where(h1,
.sensai-app.sensai-app.sensai-app h2,
.sensai-app.sensai-app.sensai-app h3,
.sensai-app.sensai-app.sensai-app h4,
.sensai-app.sensai-app.sensai-app p,
.sensai-app.sensai-app.sensai-app ul,
.sensai-app.sensai-app.sensai-app ol) { margin: 0 0 var(--s-3); }
.sensai-app.sensai-app.sensai-app :where(h1,
.sensai-app.sensai-app.sensai-app h2,
.sensai-app.sensai-app.sensai-app h3,
.sensai-app.sensai-app.sensai-app h4) { color: var(--s-ink); line-height: 1.25; }
.sensai-app.sensai-app.sensai-app :where(h1) { font-size: var(--s-fs-xl); }
.sensai-app.sensai-app.sensai-app :where(h2) { font-size: var(--s-fs-lg); }
.sensai-app.sensai-app.sensai-app :where(h3) { font-size: var(--s-fs-md); }

/* ==========================================================================
   3. BUTTONS — one block, variants only. No other button styling exists.
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--s-purple);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--s-ease), opacity var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-btn:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn:focus-visible { background: var(--s-purple-deep); color: #fff; }

.sensai-app.sensai-app.sensai-app .sensai-btn--red { background: var(--s-red); }
.sensai-app.sensai-app.sensai-app .sensai-btn--red:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn--red:focus-visible { background: var(--s-red-deep); }

.sensai-app.sensai-app.sensai-app .sensai-btn--teal { background: var(--s-teal); }
.sensai-app.sensai-app.sensai-app .sensai-btn--teal:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn--teal:focus-visible { background: var(--s-teal-deep); }

/* Ghost: bordered, white — secondary actions */
.sensai-app.sensai-app.sensai-app .sensai-btn--ghost {
    background: var(--s-card);
    color: var(--s-text);
    border: 1px solid var(--s-line-strong);
    font-weight: 600;
}
.sensai-app.sensai-app.sensai-app .sensai-btn--ghost:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn--ghost:focus-visible { background: var(--s-bg); color: var(--s-text); }

/* White: solid white, for dark surfaces (e.g. Download as File) */
.sensai-app.sensai-app.sensai-app .sensai-btn--white { background: #fff; color: var(--s-ink); }
.sensai-app.sensai-app.sensai-app .sensai-btn--white:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn--white:focus-visible { background: #fff; color: var(--s-ink); opacity: .85; }

/* Pill: soft lilac utility button (e.g. Generate Password) */
.sensai-app.sensai-app.sensai-app .sensai-btn--pill {
    background: var(--s-purple-tint);
    color: var(--s-purple-ink);
    border: 1px solid var(--s-purple-line);
    border-radius: var(--s-round);
    padding: 8px 16px;
    font-size: var(--s-fs-sm);
}
.sensai-app.sensai-app.sensai-app .sensai-btn--pill:hover,
.sensai-app.sensai-app.sensai-app .sensai-btn--pill:focus-visible { background: #e6dffc; color: var(--s-purple-ink); }

/* Sizes */
.sensai-app.sensai-app.sensai-app .sensai-btn--slim { padding: 7px 14px; font-size: var(--s-fs-sm); }
.sensai-app.sensai-app.sensai-app .sensai-btn--large { padding: 13px 26px; font-size: var(--s-fs); }

.sensai-app.sensai-app.sensai-app .sensai-btn.is-disabled,
.sensai-app.sensai-app.sensai-app .sensai-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ==========================================================================
   4. LINKS — text-style actions (a or button, identical look)
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--s-purple-link);
    font-weight: 700;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-link:hover,
.sensai-app.sensai-app.sensai-app .sensai-link:focus-visible { color: var(--s-purple-ink); background: none; }

.sensai-app.sensai-app.sensai-app .sensai-link--danger { color: var(--s-red-link); }
.sensai-app.sensai-app.sensai-app .sensai-link--danger:hover,
.sensai-app.sensai-app.sensai-app .sensai-link--danger:focus-visible { color: var(--s-red-link-deep); }

/* Quiet: grey, underline on hover (e.g. Clear Filters) */
.sensai-app.sensai-app.sensai-app .sensai-link--quiet { color: var(--s-muted); font-weight: 600; text-decoration: none; }
.sensai-app.sensai-app.sensai-app .sensai-link--quiet:hover,
.sensai-app.sensai-app.sensai-app .sensai-link--quiet:focus-visible { color: var(--s-text); text-decoration: underline; }

/* Light: white links for dark surfaces. Rest 75% white, no underline;
   hover fully white, underlined, lifts 2px. */
.sensai-app.sensai-app.sensai-app .sensai-link--light {
    display: inline-block;
    color: var(--s-dark-text);
    opacity: .75;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(0);
    transition: opacity var(--s-ease), transform var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-link--light:hover,
.sensai-app.sensai-app.sensai-app .sensai-link--light:focus-visible {
    color: var(--s-dark-text);
    opacity: 1;
    text-decoration: underline;
    transform: translateY(-2px);
    background: none;
}

/* ==========================================================================
   5. FORMS
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-field { display: block; margin: 0 0 var(--s-4); }
.sensai-app.sensai-app.sensai-app .sensai-field > label,
.sensai-app.sensai-app.sensai-app .sensai-field-label {
    display: block;
    font-size: var(--s-fs-sm);
    font-weight: 700;
    color: var(--s-ink);
    margin-bottom: 6px;
}
.sensai-app.sensai-app.sensai-app .sensai-field-hint { font-size: var(--s-fs-xs); color: var(--s-muted); margin-top: 5px; }

.sensai-app.sensai-app.sensai-app .sensai-input,
.sensai-app.sensai-app.sensai-app .sensai-select,
.sensai-app.sensai-app.sensai-app .sensai-textarea {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--s-line-strong);
    border-radius: 9px;
    background: var(--s-card);
    color: var(--s-text);
    font-size: var(--s-fs);
    transition: border-color var(--s-ease), box-shadow var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-input:focus,
.sensai-app.sensai-app.sensai-app .sensai-select:focus,
.sensai-app.sensai-app.sensai-app .sensai-textarea:focus {
    outline: none;
    border-color: var(--s-purple);
    box-shadow: var(--s-focus-ring);
}
.sensai-app.sensai-app.sensai-app .sensai-textarea { min-height: 96px; resize: vertical; }
.sensai-app.sensai-app.sensai-app .sensai-input--full { max-width: none; }
.sensai-app.sensai-app.sensai-app .sensai-input--centred { margin-left: auto; margin-right: auto; }

/* Code entry (TOTP / recovery) */
.sensai-app.sensai-app.sensai-app .sensai-input--code {
    width: 220px;
    max-width: 220px;
    font-size: 26px;
    letter-spacing: 10px;
    text-align: center;
    border: 1.5px solid #cfcbe2;
    border-radius: var(--s-r-lg);
    padding: 12px 14px;
    font-variant-numeric: tabular-nums;
}
.sensai-app.sensai-app.sensai-app .sensai-input--code-rec {
    width: 250px;
    max-width: 250px;
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Checkbox / radio row */
.sensai-app.sensai-app.sensai-app .sensai-check { display: inline-flex; gap: var(--s-2); align-items: center; font-size: .95em; cursor: pointer; }
.sensai-app.sensai-app.sensai-app .sensai-check input { width: 16px; height: 16px; accent-color: var(--s-purple); }

/* Password wrap + eye toggle */
.sensai-app.sensai-app.sensai-app .sensai-pwwrap { position: relative; display: block; width: 100%; max-width: 420px; }
.sensai-app.sensai-app.sensai-app .sensai-pwwrap .sensai-input { padding-right: 40px; padding-left: 40px; max-width: none; }
.sensai-app.sensai-app.sensai-app .sensai-eyebtn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: var(--s-r-sm);
    background: var(--s-purple-tint); color: var(--s-purple);
    display: flex; align-items: center; justify-content: center;
}
.sensai-app.sensai-app.sensai-app .sensai-eyebtn svg { display: block; }

/* Icon chip — the 28px lilac square (eye, info icon, etc.) */
.sensai-app.sensai-app.sensai-app .sensai-icochip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--s-r-sm); line-height: 1;
    background: var(--s-purple-tint); color: var(--s-purple);
    vertical-align: middle; flex-shrink: 0;
}
.sensai-app.sensai-app.sensai-app .sensai-icochip svg { display: block; margin: auto; }
.sensai-app.sensai-app.sensai-app .sensai-icochip { margin-right: var(--s-2); }

/* Copy box — value + copy button as one element */
.sensai-app.sensai-app.sensai-app .sensai-copybox {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--s-teal-line); border-radius: 9px;
    overflow: hidden; background: var(--s-teal-tint);
}
.sensai-app.sensai-app.sensai-app .sensai-copybox-value {
    padding: 10px 14px; display: flex; align-items: center;
    font-weight: 700; letter-spacing: .04em; color: var(--s-ink);
}
.sensai-app.sensai-app.sensai-app .sensai-copybox-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border-left: 1px solid var(--s-teal-line);
    background: var(--s-teal); color: #fff; font-weight: 700; font-size: .88em;
}
.sensai-app.sensai-app.sensai-app .sensai-copybox-btn:hover,
.sensai-app.sensai-app.sensai-app .sensai-copybox-btn:focus-visible { background: var(--s-teal-deep); color: #fff; }
.sensai-app.sensai-app.sensai-app .sensai-copybox-btn.is-copied { background: var(--s-green-deep); }

/* ==========================================================================
   6. SEARCH
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-search { position: relative; max-width: 420px; }
.sensai-app.sensai-app.sensai-app .sensai-search .sensai-input { padding-left: 38px; border-radius: var(--s-round); max-width: none; }
.sensai-app.sensai-app.sensai-app .sensai-search-ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--s-muted); pointer-events: none; display: flex;
    z-index: 1; /* themes often make inputs position:relative, painting over icons */
}
.sensai-app.sensai-app.sensai-app .sensai-search-results {
    margin-top: 6px; border: 1px solid var(--s-line);
    border-radius: var(--s-r-lg); background: var(--s-card);
    box-shadow: var(--s-shadow-sm); overflow: hidden;
}
.sensai-app.sensai-app.sensai-app .sensai-search-row {
    display: flex; align-items: center; gap: var(--s-3);
    width: 100%; text-align: left; padding: 10px 14px;
    border-bottom: 1px solid var(--s-line);
}
.sensai-app.sensai-app.sensai-app .sensai-search-row:last-child { border-bottom: 0; }
.sensai-app.sensai-app.sensai-app .sensai-search-row:hover { background: var(--s-purple-050); }
.sensai-app.sensai-app.sensai-app .sensai-search-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--s-purple-tint); color: var(--s-purple-ink);
    font-weight: 700; font-size: var(--s-fs-sm);
}
.sensai-app.sensai-app.sensai-app .sensai-search-avatar--class { background: var(--s-teal-050); color: var(--s-teal-deep); }
.sensai-app.sensai-app.sensai-app .sensai-search-avatar--intervention { background: var(--s-amber-050); color: var(--s-amber-ink); }
.sensai-app.sensai-app.sensai-app .sensai-search-name { font-weight: 700; color: var(--s-ink); }
.sensai-app.sensai-app.sensai-app .sensai-search-meta { font-size: var(--s-fs-xs); color: var(--s-muted); }

/* ==========================================================================
   7. PILLS, CHIPS, STATUS
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-pill {
    display: inline-block; padding: 4px 12px; border-radius: var(--s-round);
    font-size: var(--s-fs-xs); font-weight: 700;
    background: var(--s-grey-050); color: var(--s-grey-ink);
}
.sensai-app.sensai-app.sensai-app .sensai-pill--green { background: var(--s-green-050); color: var(--s-green-ink); }
.sensai-app.sensai-app.sensai-app .sensai-pill--purple { background: #efe7ff; color: #5a32c0; }
.sensai-app.sensai-app.sensai-app .sensai-pill--amber { background: var(--s-amber-050); color: var(--s-amber-ink); }
.sensai-app.sensai-app.sensai-app .sensai-pill--blue { background: var(--s-blue-050); color: var(--s-blue-ink); }
.sensai-app.sensai-app.sensai-app .sensai-pill--teal { background: #d7f4f1; color: #0c7d76; }
.sensai-app.sensai-app.sensai-app .sensai-pill--red { background: #fde8e8; color: var(--s-red-link); }

.sensai-app.sensai-app.sensai-app .sensai-chip {
    display: inline-block; margin: 2px 4px 2px 0; padding: 4px 10px;
    border-radius: var(--s-round);
    background: #f2edff; border: 1px solid #d9ccff; color: #3e286f;
    font-size: .88em;
}
.sensai-app.sensai-app.sensai-app .sensai-chip--select { cursor: pointer; }
.sensai-app.sensai-app.sensai-app .sensai-chip--select:hover { background: #e6dffc; }
.sensai-app.sensai-app.sensai-app .sensai-chip .sensai-chip-x { margin-left: 6px; font-weight: 700; cursor: pointer; color: var(--s-purple-ink); }

.sensai-app.sensai-app.sensai-app .sensai-rag {
    display: inline-block; padding: 3px 11px; border-radius: var(--s-round);
    font-size: var(--s-fs-sm); font-weight: 800;
}
.sensai-app.sensai-app.sensai-app .sensai-rag--none { background: var(--s-grey-050); color: #777; }
.sensai-app.sensai-app.sensai-app .sensai-rag--red { background: #fde8e8; color: var(--s-red-link); }
.sensai-app.sensai-app.sensai-app .sensai-rag--amber { background: #fdf3dc; color: #9a6400; }
.sensai-app.sensai-app.sensai-app .sensai-rag--green { background: var(--s-green-050); color: var(--s-green-ink); }

.sensai-app.sensai-app.sensai-app .sensai-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--s-1); }
.sensai-app.sensai-app.sensai-app .sensai-dot--ok { background: var(--s-green); }
.sensai-app.sensai-app.sensai-app .sensai-dot--no { background: var(--s-rose); }

/* ==========================================================================
   8. NOTICES & FEEDBACK
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-notice {
    margin: var(--s-3) 0; padding: var(--s-3) 14px;
    border-radius: var(--s-r-sm); font-weight: 600;
    border: 1px solid var(--s-line-strong); background: var(--s-bg); color: var(--s-text);
}
.sensai-app.sensai-app.sensai-app .sensai-notice--success { border-color: #b7dfbd; background: #edf8ef; color: var(--s-green-deep); }
.sensai-app.sensai-app.sensai-app .sensai-notice--error { border-color: #efb5b0; background: #fff0ef; color: #9f2118; }
.sensai-app.sensai-app.sensai-app .sensai-notice--warn { border-color: #f0d8a8; background: #fdf6e3; color: #7a5200; }
.sensai-app.sensai-app.sensai-app .sensai-notice--info { border-color: var(--s-purple-line); background: var(--s-purple-tint); color: var(--s-purple-ink); }
.sensai-app.sensai-app.sensai-app .sensai-notice a { color: #0b5cad; text-decoration: underline; font-weight: 700; }

.sensai-app.sensai-app.sensai-app .sensai-progress { height: 8px; border-radius: var(--s-round); background: var(--s-line); overflow: hidden; }
.sensai-app.sensai-app.sensai-app .sensai-progress-fill { height: 100%; border-radius: var(--s-round); background: var(--s-teal); transition: width .3s ease; }

.sensai-app.sensai-app.sensai-app .sensai-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 5px solid #d9ccff; border-top-color: var(--s-teal);
    animation: sensai-spin .8s linear infinite;
}
@keyframes sensai-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   9. CARDS & STATS
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-card {
    background: var(--s-card); border: 1px solid var(--s-line);
    border-radius: var(--s-r-xl); padding: var(--s-6);
    box-shadow: var(--s-shadow-sm);
}
.sensai-app.sensai-app.sensai-app .sensai-card-title { font-size: var(--s-fs-md); font-weight: 800; color: var(--s-ink); margin-bottom: var(--s-3); }

.sensai-app.sensai-app.sensai-app .sensai-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: var(--s-6);
}
.sensai-app.sensai-app.sensai-app .sensai-stat {
    --c: var(--s-purple); --c-050: var(--s-purple-050);
    position: relative; overflow: hidden;
    padding: 20px 20px 18px;
    background: var(--s-card);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-xl);
    box-shadow: var(--s-shadow-sm);
    opacity: 0;
    animation: sensai-fade-up .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
.sensai-app.sensai-app.sensai-app .sensai-stat::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--c-050); opacity: .6;
}
.sensai-app.sensai-app.sensai-app .sensai-stat > * { position: relative; z-index: 1; }
.sensai-app.sensai-app.sensai-app .sensai-stat--teal { --c: var(--s-teal);  --c-050: var(--s-teal-050); }
.sensai-app.sensai-app.sensai-app .sensai-stat--coral { --c: var(--s-coral); --c-050: var(--s-coral-050); }
.sensai-app.sensai-app.sensai-app .sensai-stat--amber { --c: var(--s-amber); --c-050: var(--s-amber-050); }
.sensai-app.sensai-app.sensai-app .sensai-stat--sky { --c: var(--s-sky);   --c-050: var(--s-sky-050); }
.sensai-app.sensai-app.sensai-app .sensai-stat-ico {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c); color: #fff; margin-bottom: 14px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent);
}
.sensai-app.sensai-app.sensai-app .sensai-stat-ico svg { width: 23px; height: 23px; }
.sensai-app.sensai-app.sensai-app .sensai-stat-num {
    font-size: 2.15em; font-weight: 800; line-height: 1;
    color: var(--s-ink); letter-spacing: -.5px;
}
.sensai-app.sensai-app.sensai-app .sensai-stat-num .sensai-suffix { font-size: .55em; font-weight: 800; color: var(--c); margin-left: 1px; }
.sensai-app.sensai-app.sensai-app .sensai-stat-label { margin-top: 7px; color: var(--s-muted); font-size: .92em; font-weight: 600; }
.sensai-app.sensai-app.sensai-app .sensai-stat-sub { margin-top: 3px; color: var(--c); font-size: .8em; font-weight: 700; }
.sensai-app.sensai-app.sensai-app .sensai-stat:nth-child(1) { animation-delay: .04s; }
.sensai-app.sensai-app.sensai-app .sensai-stat:nth-child(2) { animation-delay: .12s; }
.sensai-app.sensai-app.sensai-app .sensai-stat:nth-child(3) { animation-delay: .2s; }
.sensai-app.sensai-app.sensai-app .sensai-stat:nth-child(4) { animation-delay: .28s; }
.sensai-app.sensai-app.sensai-app .sensai-stat:nth-child(5) { animation-delay: .36s; }
@keyframes sensai-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Drop zone (Import Centre) */
.sensai-app.sensai-app.sensai-app .sensai-dropzone {
    border: 2px dashed var(--s-purple-line); border-radius: var(--s-r-lg);
    background: var(--s-purple-tint); padding: var(--s-6);
    text-align: center; color: var(--s-purple-ink); font-weight: 600;
    transition: background var(--s-ease), border-color var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-dropzone.is-drag { background: #e6dffc; border-color: var(--s-purple); }
.sensai-app.sensai-app.sensai-app .sensai-dropzone.is-filled { border-style: solid; background: var(--s-green-050); border-color: #b7dfbd; color: var(--s-green-deep); }

/* ==========================================================================
   10. TABLES
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-table { width: 100%; border-collapse: collapse; background: var(--s-card); }
.sensai-app.sensai-app.sensai-app .sensai-table th {
    text-align: left; padding: 10px 14px;
    font-size: var(--s-fs-xs); font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--s-muted);
    border-bottom: 2px solid var(--s-line);
}
.sensai-app.sensai-app.sensai-app .sensai-table td { padding: 12px 14px; border-bottom: 1px solid var(--s-line); color: var(--s-text); }
.sensai-app.sensai-app.sensai-app .sensai-table tr:hover td { background: var(--s-bg); }
.sensai-app.sensai-app.sensai-app .sensai-nowrap { white-space: nowrap; }
.sensai-app.sensai-app.sensai-app .sensai-inlinerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sensai-app.sensai-app.sensai-app .sensai-inlinerow form { display: inline-flex; align-items: center; }

.sensai-app.sensai-app.sensai-app .sensai-pager { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); }
.sensai-app.sensai-app.sensai-app .sensai-pagebtn {
    min-width: 34px; height: 34px; padding: 0 8px;
    border: 1px solid var(--s-line-strong); border-radius: var(--s-r-sm);
    background: var(--s-card); color: var(--s-text); font-weight: 600;
}
.sensai-app.sensai-app.sensai-app .sensai-pagebtn:hover { background: var(--s-bg); }
.sensai-app.sensai-app.sensai-app .sensai-pagebtn.is-current { background: var(--s-purple); border-color: var(--s-purple); color: #fff; }
.sensai-app.sensai-app.sensai-app .sensai-pagebtn:disabled { opacity: .45; cursor: default; }

/* ==========================================================================
   11. MODAL (the SENSAI confirm dialogue)
   ========================================================================== */
.sensai-app.sensai-app.sensai-app.sensai-modal-backdrop {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-5); background: rgba(20, 10, 50, .5);
}
.sensai-app.sensai-app.sensai-app.sensai-modal-backdrop[hidden] { display: none; }
.sensai-app.sensai-app.sensai-app .sensai-modal {
    width: 100%; max-width: 440px; padding: 26px;
    border-radius: var(--s-r-xl); background: var(--s-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.sensai-app.sensai-app.sensai-app .sensai-modal-ico {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--s-purple-050); color: var(--s-purple);
}
.sensai-app.sensai-app.sensai-app .sensai-modal.is-danger .sensai-modal-ico { background: #fdecea; color: var(--s-red); }
.sensai-app.sensai-app.sensai-app .sensai-modal-ico svg { width: 24px; height: 24px; }
.sensai-app.sensai-app.sensai-app .sensai-modal-title { margin: 0 0 var(--s-2); font-size: 1.2em; color: var(--s-ink); }
.sensai-app.sensai-app.sensai-app .sensai-modal-msg { margin: 0 0 var(--s-4); color: var(--s-text); line-height: 1.55; }
.sensai-app.sensai-app.sensai-app .sensai-modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
/* Modal input-confirmation extras */
.sensai-app.sensai-app.sensai-app .sensai-modal-inputwrap { margin: 0 0 var(--s-4); }
.sensai-app.sensai-app.sensai-app .sensai-modal-err { margin: var(--s-2) 0 0; color: var(--s-red-link); font-size: .88em; font-weight: 600; }
.sensai-app.sensai-app.sensai-app .sensai-modal .sensai-input { max-width: none; }


/* ==========================================================================
   12. NAVIGATION
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-nav-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 11px 12px; margin: 2px 0; border-radius: var(--s-r);
    color: var(--s-text); font-weight: 600; font-size: .95em;
    text-decoration: none; cursor: pointer;
    transition: background var(--s-ease), color var(--s-ease);
}
.sensai-app.sensai-app.sensai-app .sensai-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--s-muted); }
.sensai-app.sensai-app.sensai-app .sensai-nav-item:hover { background: var(--s-bg); color: var(--s-ink); }
.sensai-app.sensai-app.sensai-app .sensai-nav-item:hover svg { color: var(--s-purple); }
.sensai-app.sensai-app.sensai-app .sensai-nav-item.is-active { background: var(--s-purple-050); color: var(--s-purple-ink); }
.sensai-app.sensai-app.sensai-app .sensai-nav-item.is-active svg { color: var(--s-purple); }
.sensai-app.sensai-app.sensai-app .sensai-nav-divider { border: 0; border-top: 1px solid var(--s-line); margin: var(--s-3) 0; }

.sensai-app.sensai-app.sensai-app .sensai-breadcrumbs { font-size: var(--s-fs-sm); color: var(--s-muted); margin-bottom: var(--s-4); }
.sensai-app.sensai-app.sensai-app .sensai-breadcrumbs a { color: var(--s-purple-link); font-weight: 600; }
.sensai-app.sensai-app.sensai-app .sensai-breadcrumbs .sep { margin: 0 6px; color: var(--s-line-strong); }

/* Tabs */
.sensai-app.sensai-app.sensai-app .sensai-tabbar { display: flex; gap: var(--s-1); border-bottom: 2px solid #e4ddf6; margin-bottom: var(--s-4); flex-wrap: wrap; }
.sensai-app.sensai-app.sensai-app .sensai-tab {
    padding: 10px 18px; font-weight: 700; color: #8a8a97;
    border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer;
}
.sensai-app.sensai-app.sensai-app .sensai-tab:hover { color: var(--s-purple); }
.sensai-app.sensai-app.sensai-app .sensai-tab.is-active { color: var(--s-purple-ink); border-bottom-color: var(--s-purple); }

/* Stepper (off-boarding journey) */
.sensai-app.sensai-app.sensai-app .sensai-stepper { display: flex; gap: var(--s-3); position: relative; margin: 0 0 26px; }
.sensai-app.sensai-app.sensai-app .sensai-step { flex: 1; position: relative; padding-top: 26px; font-size: 12.5px; color: var(--s-muted); }
.sensai-app.sensai-app.sensai-app .sensai-step:nth-child(2) { text-align: center; }
.sensai-app.sensai-app.sensai-app .sensai-step:nth-child(3) { text-align: right; }
.sensai-app.sensai-app.sensai-app .sensai-step::before {
    content: ''; position: absolute; top: 9px; left: 0; right: 0;
    height: 3px; background: #d9d5e8;
}
.sensai-app.sensai-app.sensai-app .sensai-step.is-done::before,
.sensai-app.sensai-app.sensai-app .sensai-step.is-current::before { background: var(--s-teal-soft); }
.sensai-app.sensai-app.sensai-app .sensai-step-dot {
    position: absolute; top: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #d9d5e8; border: 3px solid #fff;
    box-sizing: border-box;
}
.sensai-app.sensai-app.sensai-app .sensai-step:nth-child(1) .sensai-step-dot { left: 0; }
.sensai-app.sensai-app.sensai-app .sensai-step:nth-child(2) .sensai-step-dot { left: 50%; transform: translateX(-50%); }
.sensai-app.sensai-app.sensai-app .sensai-step:nth-child(3) .sensai-step-dot { right: 0; }
.sensai-app.sensai-app.sensai-app .sensai-step.is-done .sensai-step-dot,
.sensai-app.sensai-app.sensai-app .sensai-step.is-current .sensai-step-dot { background: #14a89d; }
.sensai-app.sensai-app.sensai-app .sensai-step.is-current .sensai-step-label,
.sensai-app.sensai-app.sensai-app .sensai-step.is-done .sensai-step-label { color: #1c1b3a; font-weight: 700; }

/* Accordion */
.sensai-app.sensai-app.sensai-app .sensai-accordion { border: 1px solid var(--s-line); border-radius: var(--s-r-lg); overflow: hidden; }
.sensai-app.sensai-app.sensai-app .sensai-accordion summary {
    padding: 14px var(--s-4); font-weight: 700; color: var(--s-ink);
    cursor: pointer; background: var(--s-bg); list-style: none;
}
.sensai-app.sensai-app.sensai-app .sensai-accordion summary::-webkit-details-marker { display: none; }
.sensai-app.sensai-app.sensai-app .sensai-accordion summary::after { content: '▾'; float: right; color: var(--s-muted); }
.sensai-app.sensai-app.sensai-app .sensai-accordion[open] summary::after { content: '▴'; }
.sensai-app.sensai-app.sensai-app .sensai-accordion-body { padding: var(--s-4); }

/* ==========================================================================
   13. TIMELINE / EVENT HISTORY (compliance case review)
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-event {
    position: relative; padding: 0 0 var(--s-4) 26px;
    border-left: 2px solid var(--s-line); margin-left: 8px;
}
.sensai-app.sensai-app.sensai-app .sensai-event:last-child { border-left-color: transparent; }
.sensai-app.sensai-app.sensai-app .sensai-event::before {
    content: ''; position: absolute; left: -8px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--s-purple); border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--s-line);
}
.sensai-app.sensai-app.sensai-app .sensai-event--good::before { background: var(--s-teal-soft); }
.sensai-app.sensai-app.sensai-app .sensai-event--bad::before { background: var(--s-red); }
.sensai-app.sensai-app.sensai-app .sensai-event--warn::before { background: var(--s-amber); }
.sensai-app.sensai-app.sensai-app .sensai-event-type { font-weight: 800; color: var(--s-ink); }
.sensai-app.sensai-app.sensai-app .sensai-event-when { font-size: var(--s-fs-xs); color: var(--s-muted); }
.sensai-app.sensai-app.sensai-app .sensai-event-body { margin-top: 4px; font-size: .95em; }

/* ==========================================================================
   14. DARK (AUTH) SURFACE — login, MFA, recovery
   ========================================================================== */
.sensai-app.sensai-app.sensai-app .sensai-dark {
    background: var(--s-dark-bg);
    color: var(--s-dark-text);
    border-radius: var(--s-r-xl);
    padding: var(--s-7);
}
.sensai-app.sensai-app.sensai-app .sensai-dark :where(h1,
.sensai-app.sensai-app.sensai-app h2,
.sensai-app.sensai-app.sensai-app h3,
.sensai-app.sensai-app.sensai-app h4,
.sensai-app.sensai-app.sensai-app label) { color: var(--s-dark-text); }
.sensai-app.sensai-app.sensai-app .sensai-dark .sensai-field > label { color: var(--s-dark-text); }
.sensai-app.sensai-app.sensai-app .sensai-dark .sensai-input::placeholder { color: #fff; opacity: .85; }
.sensai-app.sensai-app.sensai-app .sensai-dark--onpage { background: transparent; padding: 0; border-radius: 0; }

/* Recovery-codes grid (shown once at MFA enrolment) */
.sensai-app.sensai-app.sensai-app .sensai-codegrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s-2); margin: var(--s-4) 0; max-width: 620px;
}
.sensai-app.sensai-app.sensai-app .sensai-codegrid code {
    background: #fff; color: #26253d; border: 1px solid #e2e0ee;
    border-radius: var(--s-r); padding: 10px 12px; text-align: center;
    font-weight: 700; letter-spacing: 2px; font-size: var(--s-fs);
}
.sensai-app.sensai-app.sensai-app .sensai-codegrid-actions {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    justify-content: center; margin: 6px 0 var(--s-4);
}

/* QR block */
.sensai-app.sensai-app.sensai-app .sensai-qr {
    display: inline-block; background: #fff; padding: var(--s-3);
    border-radius: var(--s-r-lg);
}
.sensai-app.sensai-app.sensai-app .sensai-qr img,
.sensai-app.sensai-app.sensai-app .sensai-qr svg { display: block; width: 164px; height: 164px; }

/* ==========================================================================
   THEME SHIM (Salient) - QUARANTINED. The theme marks these properties
   !important (submit-button padding, submit hover background-color), and
   only !important answers !important. Values mirror the design system
   exactly. This layer is NOT part of the design system: delete it when app
   pages stop loading the theme stylesheet (blank canvas template).
   ========================================================================== */
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn { padding: 10px 20px !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--slim { padding: 7px 14px !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--large { padding: 13px 26px !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--pill { padding: 8px 16px !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn:focus { background-color: var(--s-purple-deep) !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--red:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--red:focus { background-color: var(--s-red-deep) !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--teal:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--teal:focus { background-color: var(--s-teal-deep) !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--ghost:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--ghost:focus { background-color: var(--s-bg) !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--white:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--white:focus { background-color: #fff !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--pill:hover, .sensai-app.sensai-app.sensai-app.sensai-app.sensai-app .sensai-btn--pill:focus { background-color: #e6dffc !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-link,
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-link:hover,
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-link:focus { padding: 0 !important; background: none !important; background-color: transparent !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-sr-btn-primary { padding: 9px 18px !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-sr-btn-primary:hover { background-color: #0f8d86 !important; }
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-sr-btn-ghost,
.sensai-app.sensai-app.sensai-app.sensai-app.sensai-app button.sensai-sr-btn-ghost:hover { padding: 6px 4px !important; background-color: transparent !important; }