/* =========================================================
   SLRI MIS – Dashboard theme
   Bright teal / aqua with readable contrast. Mobile-first.
   Note: Bootstrap 3 sets html font-size to 10px, so sizes use px.
   ========================================================= */

:root {
    --c-900: #0d4a52;
    --c-800: #0b6570;
    --c-700: #0a7c86;
    --c-600: #0e929c;
    --c-500: #19a9b2;
    --c-200: #a9e3e6;
    --c-100: #d3f2f3;
    --c-50: #ebfafa;
    --slate: #1f87ab;

    --ink: #14282e;
    --ink-2: #3a5359;
    --muted: #557079;

    --bg: #f0f8f9;
    --surface: #ffffff;
    --tile: #f3fafa;
    --line: rgba(10, 90, 100, .10);
    --line-strong: rgba(10, 90, 100, .18);

    --closed-bg: #f8ece8;
    --closed-ink: #8e3b2b;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;

    --shadow-xs: 0 1px 2px rgba(16, 42, 50, .05);
    --shadow-sm: 0 1px 2px rgba(16, 42, 50, .05), 0 2px 8px -2px rgba(16, 42, 50, .07);
    --shadow-md: 0 2px 4px rgba(16, 42, 50, .04), 0 12px 28px -10px rgba(16, 42, 50, .16);

    --font-body: "IBM Plex Sans Thai", "Kanit", "Segoe UI", Tahoma, sans-serif;
    --font-head: "Kanit", "IBM Plex Sans Thai", "Segoe UI", Tahoma, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body.mis-body {
    margin: 0;
    padding: 0; /* override Site.css fixed-navbar padding */
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(25, 169, 178, .14), transparent 60%),
        radial-gradient(900px 420px at -10% 0%, rgba(31, 135, 171, .10), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.mis-body > form { display: flex; flex-direction: column; flex: 1 0 auto; }

.mis-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .mis-container { padding: 0 24px; }
}

:focus-visible {
    outline: 2px solid var(--c-600);
    outline-offset: 2px;
}

/* ---------- Top bar ---------- */

.mis-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.mis-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
}

.mis-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.mis-brand:hover, .mis-brand:focus { text-decoration: none; color: inherit; }

.mis-brand img { height: 34px; width: auto; flex: none; }

.mis-brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

.mis-brand__text strong {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    color: var(--c-900);
    letter-spacing: .2px;
}

.mis-brand__text small {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mis-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mis-nav > li { position: relative; }

/* Buttons */
.mis-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
    white-space: nowrap;
}

.mis-btn:hover, .mis-btn:focus { text-decoration: none; }

.mis-btn svg { width: 18px; height: 18px; flex: none; }

.mis-btn--ghost { color: var(--ink-2); border-color: var(--line-strong); background: var(--surface); }
.mis-btn--ghost:hover, .mis-btn--ghost:focus { color: var(--c-800); border-color: var(--c-200); background: var(--c-50); }

.mis-btn--soft { color: var(--c-800); background: var(--c-50); border-color: var(--c-100); }
.mis-btn--soft:hover, .mis-btn--soft:focus { color: var(--c-900); background: var(--c-100); }

@media (max-width: 575px) {
    .mis-btn__label { display: none; }
    .mis-btn { padding: 0 11px; }
    .mis-brand__text small { display: none; }
}

/* Bootstrap 3 dropdown restyle */
.mis-nav .dropdown-menu {
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-size: 14px;
}

.mis-nav .dropdown-menu > li > a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    white-space: normal;
}

.mis-nav .dropdown-menu > li > a:hover,
.mis-nav .dropdown-menu > li > a:focus { background: var(--c-50); color: var(--c-900); }

/* ---------- Main & footer ---------- */

.mis-main { flex: 1 0 auto; padding: 20px 0 40px; }

@media (min-width: 768px) {
    .mis-main { padding: 32px 0 56px; }
}

.mis-footer {
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .6);
    color: var(--muted);
    font-size: 13px;
    padding: 18px 0;
    text-align: center;
}

.mis-footer p { margin: 0; }

/* ---------- Hero ---------- */

.mis-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    padding: 28px 20px 22px;
    color: #fff;
    background: linear-gradient(135deg, #067782 0%, #0a8a94 52%, #1f87ab 100%);
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

.mis-hero::before,
.mis-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.mis-hero::before {
    width: 420px; height: 420px;
    right: -140px; top: -200px;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%);
}

.mis-hero::after {
    width: 300px; height: 300px;
    left: -120px; bottom: -180px;
    background: radial-gradient(circle, rgba(169, 227, 230, .22), rgba(169, 227, 230, 0) 70%);
}

@media (min-width: 768px) {
    .mis-hero { padding: 40px 40px 30px; }
}

.mis-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .86);
}

.mis-hero__title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(22px, 16px + 1.8vw, 34px);
    line-height: 1.3;
    color: #fff;
}

.mis-hero__sub {
    margin: 8px 0 0;
    max-width: 640px;
    font-size: 15px;
    color: rgba(255, 255, 255, .94);
}

/* Search */
.mis-search {
    position: relative;
    margin-top: 22px;
    max-width: 620px;
}

.mis-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.mis-search input[type="search"] {
    display: block;
    width: 100%;
    max-width: none; /* override Site.css */
    height: 52px;
    padding: 0 56px 0 46px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    box-shadow: 0 8px 24px -10px rgba(5, 25, 30, .45);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.mis-search input[type="search"]::placeholder { color: #8796a0; }

.mis-search input[type="search"]:focus {
    outline: none;
    border-color: var(--c-200);
    box-shadow: 0 0 0 4px rgba(169, 227, 230, .5), 0 8px 24px -10px rgba(5, 25, 30, .45);
}

.mis-search kbd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--tile);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 12px;
    box-shadow: none;
}

@media (hover: none) {
    .mis-search kbd { display: none; }
}

/* Category chips */
.mis-chips {
    display: flex;
    gap: 8px;
    margin: 18px -20px 0;
    padding: 2px 20px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    list-style: none;
}

.mis-chips::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .mis-chips { flex-wrap: wrap; overflow: visible; margin: 18px 0 0; padding: 0; }
}

.mis-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.mis-chip:hover, .mis-chip:focus {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    text-decoration: none;
}

.mis-chip:focus-visible { outline-color: #fff; }

/* ---------- Section label ---------- */

.mis-section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 2px 14px;
}

.mis-section-label h2 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 18px;
    color: var(--c-900);
}

.mis-section-label p { margin: 0; font-size: 13px; color: var(--muted); }

.mis-expand-all {
    display: none;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--c-200);
    border-radius: 8px;
    background: var(--surface);
    color: var(--c-800);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ---------- Card grid ---------- */

.mis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .mis-grid {
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hr   fin"
            "hr   it"
            "safe plan"
            "pdpa did"
            "eval proc";
    }
    .sec-hr   { grid-area: hr; }
    .sec-fin  { grid-area: fin; }
    .sec-it   { grid-area: it; }
    .sec-safe { grid-area: safe; }
    .sec-plan { grid-area: plan; }
    .sec-pdpa { grid-area: pdpa; }
    .sec-did  { grid-area: did; }
    .sec-eval { grid-area: eval; }
    .sec-proc { grid-area: proc; }
}

@media (min-width: 1100px) {
    .mis-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "hr fin  it"
            "hr safe plan"
            "hr pdpa did"
            "hr eval proc";
    }
}

/* While searching, let matching cards flow without fixed areas */
.mis-grid.is-filtering { grid-template-areas: none; }
.mis-grid.is-filtering > .mis-card { grid-area: auto; }

/* ---------- Card ---------- */

.mis-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 84px;
}

@media (min-width: 768px) {
    .mis-card { padding: 22px; }
}

.mis-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.mis-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--c-50);
    color: var(--c-700);
    box-shadow: inset 0 0 0 1px var(--c-100);
}

.mis-card__icon svg { width: 20px; height: 20px; }

.mis-card__title { min-width: 0; }

.mis-card__title h3 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.35;
    color: var(--c-900);
}

.mis-card__title p {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* ---------- Service tiles ---------- */

.svc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc {
    position: relative;
    border-radius: 12px;
    background: var(--tile);
    border: 1px solid transparent;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                box-shadow .18s var(--ease), transform .18s var(--ease);
}

.svc:hover {
    background: var(--surface);
    border-color: var(--c-200);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* An item whose server controls are all hidden renders empty: drop it */
.svc:not(:has(input)) { display: none; }

/* The text button is the tile's main hit area */
.svc-link {
    display: block;
    width: 100%;
    max-width: none; /* override Site.css */
    min-height: 60px;
    margin: 0;
    padding: 12px 40px 12px 68px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.svc:hover .svc-link { color: var(--c-900); }

.svc-link:focus { outline: none; }
.svc-link:focus-visible { outline: 2px solid var(--c-600); outline-offset: -2px; }

.svc--action .svc-link { padding-right: 92px; }

/* Icon (ImageButton) sits above the text button */
.svc-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    padding: 6px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-xs);
    object-fit: contain;
    box-sizing: border-box;
    cursor: pointer;
}

.svc-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #9aa9b0;
    pointer-events: none;
    transition: transform .18s var(--ease), color .18s var(--ease);
}

.svc:hover .svc-chev { color: var(--c-600); transform: translate(3px, -50%); }

/* Secondary action inside a tile (e.g. Excel) */
.svc-action {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 2;
    height: 32px;
    padding: 0 12px;
    transform: translateY(-50%);
    border: 1px solid var(--c-200);
    border-radius: 8px;
    background: var(--surface);
    color: var(--c-800);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}

.svc-action:hover { background: var(--c-700); border-color: var(--c-700); color: #fff; }

/* ---------- Info callout (employee code) ---------- */

.mis-callout {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--c-50), rgba(235, 250, 250, .5));
    border: 1px dashed var(--c-200);
}

.mis-callout__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-600); }

.mis-callout__body { min-width: 0; flex: 1; }

.mis-callout__label { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.mis-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

.mis-code {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--c-200);
    color: var(--c-900);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.mis-code:empty::before { content: "3"; color: var(--muted); }

.mis-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--c-200);
    border-radius: 8px;
    background: transparent;
    color: var(--c-800);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
}

.mis-copy svg { width: 15px; height: 15px; }
.mis-copy:hover { background: var(--surface); }
.mis-copy.is-done { color: #1f6b4a; border-color: #b7dcc8; background: #eef8f2; }

/* ---------- Status / placeholders ---------- */

.mis-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
}

.mis-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.mis-status--closed { background: var(--closed-bg); color: var(--closed-ink); }

.mis-placeholder {
    margin: 0;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--tile);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.mis-card:has(.svc-link) .mis-placeholder { display: none; }

.mis-note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }

.mis-eval-action { margin-top: 14px; }

.mis-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 46px;
    margin-top: 10px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--c-700);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(10, 124, 134, .7);
    transition: background-color .18s var(--ease);
}

.mis-btn-primary:hover { background: var(--c-800); }

.mis-eval-img { display: block; width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }

/* ---------- Empty search / error ---------- */

.mis-empty {
    padding: 40px 20px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--line-strong);
    background: rgba(255, 255, 255, .6);
    text-align: center;
    color: var(--muted);
}

.mis-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; font-size: 16px; }

.mis-error:not(:empty) {
    display: block;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: var(--closed-bg);
    color: var(--closed-ink);
    font-size: 14px;
}

/* ---------- Mobile accordion (class set by script below 768px) ---------- */

.mis-card__meta,
.mis-card__chev { display: none; }

.mis-card__title { flex: 1; }

body.mis-accordion .mis-chips { display: none; } /* collapsed headers act as the category menu */
body.mis-accordion .mis-section-label { align-items: center; margin-top: 22px; }
body.mis-accordion .mis-section-label__hint { display: none; }
body.mis-accordion .mis-expand-all { display: inline-flex; align-items: center; }

body.mis-accordion .mis-grid { gap: 10px; }

body.mis-accordion .mis-card {
    padding: 14px;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

body.mis-accordion .mis-card__head {
    margin: -14px;
    padding: 14px;
    border-radius: var(--r-lg);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.mis-accordion .mis-card__head:active { background: var(--c-50); }
body.mis-accordion .mis-card__head:focus-visible { outline-offset: -2px; }

body.mis-accordion .mis-card__title p { display: none; }

body.mis-accordion .mis-card__meta {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 12.5px;
}

body.mis-accordion [data-badge] .mis-card__meta { color: var(--closed-ink); font-weight: 500; }

body.mis-accordion .mis-card__chev {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--muted);
    transition: transform .2s var(--ease), color .2s var(--ease);
}

body.mis-accordion .mis-card__chev svg { width: 20px; height: 20px; }

body.mis-accordion .mis-card:not(.is-collapsed) {
    border-color: var(--c-200);
    box-shadow: var(--shadow-md);
}

body.mis-accordion .mis-card:not(.is-collapsed) .mis-card__head { margin-bottom: 8px; }
body.mis-accordion .mis-card:not(.is-collapsed) .mis-card__chev { transform: rotate(180deg); color: var(--c-700); }

body.mis-accordion .mis-card.is-collapsed > :not(.mis-card__head) { display: none; }

body.mis-accordion .mis-card:not(.is-collapsed) > :not(.mis-card__head) {
    animation: mis-reveal .22s var(--ease);
}

@keyframes mis-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Login (Account/Login.aspx via SiteAuth.master) ---------- */

.mis-auth {
    max-width: 960px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .mis-auth { padding-top: 24px; }
}

.mis-auth__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    .mis-auth__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* Hero panel inside the card: drop its own card chrome */
.mis-hero.mis-auth__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    padding: 26px 20px;
}

@media (min-width: 768px) {
    .mis-hero.mis-auth__aside { padding: 44px 36px; }
}

.mis-auth__points {
    display: none;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .94);
}

@media (min-width: 768px) {
    .mis-auth__points { display: block; }
}

.mis-auth__points li {
    position: relative;
    padding-left: 22px;
}

.mis-auth__points li + li { margin-top: 8px; }

.mis-auth__points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-200);
}

/* Form panel */
.mis-auth__form { padding: 24px 20px 26px; }

@media (min-width: 768px) {
    .mis-auth__form { padding: 44px 44px 40px; }
}

.mis-auth__title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    color: var(--c-900);
}

.mis-auth__lead {
    margin: 4px 0 22px;
    font-size: 14px;
    color: var(--muted);
}

.mis-field + .mis-field { margin-top: 16px; }

.mis-field__label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
}

.mis-input {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.mis-input:hover { border-color: var(--c-200); }

.mis-input:focus-within {
    border-color: var(--c-500);
    box-shadow: 0 0 0 4px rgba(169, 227, 230, .5);
}

.mis-input__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: 14px;
    color: var(--muted);
}

.mis-input input {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: none; /* override Site.css */
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}

.mis-input input:focus { outline: none; }
.mis-input input::placeholder { color: #8796a0; }

.mis-input__suffix {
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-left: 1px solid var(--line);
    border-radius: 0 11px 11px 0;
    background: var(--tile);
    color: var(--ink-2);
    font-size: 14px;
}

.mis-input__toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.mis-input__toggle svg { width: 20px; height: 20px; }
.mis-input__toggle:hover { background: var(--c-50); color: var(--c-800); }
.mis-input__toggle[aria-pressed="true"] { color: var(--c-700); }

.mis-field__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--closed-ink);
}

.mis-auth__submit { height: 48px; margin-top: 24px; }
.mis-auth__submit:focus-visible { outline: 2px solid var(--c-600); outline-offset: 2px; }

/* Help & browser list under the card */
.mis-auth__help {
    margin-top: 22px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}

.mis-auth__help p { margin: 0; }
.mis-auth__help a { color: var(--c-700); }
.mis-auth__help a:hover { color: var(--c-900); }

.mis-auth__browsers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mis-auth__browsers li { display: inline-flex; align-items: center; gap: 6px; }
.mis-auth__browsers img { width: 18px; height: 18px; }
.mis-auth__browsers-label { font-weight: 500; color: var(--ink-2); }