:root {
    font-family: Inter,Arial,sans-serif;
    color: #1f2937;
    background: #f4f7fb
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background:#f4f7fb;
}

a {
    color: #2563eb;
    text-decoration: none
}

.container {
    margin: 0 auto;
    padding: 24px
}

.top .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px
}

.brand {
    color: #fff;
    font-size: 20px;
    font-weight: 700
}

.nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap
}

.nav a {
    color: #dbeafe
}

.nav-button {
    border: 0;
    background: transparent;
    color: #dbeafe;
    cursor: pointer;
    padding: 0;
    font: inherit
}

.card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(15,23,42,.04)
}

.grid {
    display: grid;
    gap: 16px
}

.grid-4 {
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr))
}

.stat strong {
    display: block;
    font-size: 30px
}

.btn {
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.actions-between {
    justify-content: space-between;
    align-items: center
}

.input {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-size: 15px;
    background: #fff
}

.label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600
}

.form-group {
    margin-bottom: 14px
}

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px
}

.alert-success {
    background: #dcfce7
}

.alert-danger {
    background: #fee2e2
}

.alert-warning {
    background: #fef3c7
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700
}

.badge-active {
    background: #dcfce7;
    color: #166534
}

.badge-unverified,.badge-pending {
    background: #fef3c7;
    color: #92400e
}

.badge-error {
    background: #fee2e2;
    color: #991b1b
}

.table-wrap {
    overflow: auto
}

table {
    width: 100%;
    border-collapse: collapse
}

th,td {
    text-align: left;
    padding: 11px 9px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top
}

th {
    font-size: 13px;
    color: #64748b
}

.muted {
    color: #64748b
}

.code {
    background: #0f172a;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 10px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word
}

.site-title {
    word-break: break-all
}

.inline {
    display: inline
}

.small {
    font-size: 13px
}

@media(max-width: 700px) {
    .container {
        padding:16px
    }

    .top .container {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column
    }
}

/* update 022: layout-specific menus and account dropdown. */
.header-container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between
}

.layout-nav {
    margin-left: auto
}

.user-menu {
    flex: 0 0 auto
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px
}

.user-menu-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto
}

.user-menu-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-menu .dropdown-menu {
    min-width: 210px
}

.user-menu:hover>.dropdown-menu,.user-menu:focus-within>.dropdown-menu {
    display: block;
    margin-top: 0
}

tbody tr:last-child td {
    border-bottom: 0;
}

@media(max-width: 700px) {
    .header-container {
        align-items:flex-start;
        flex-direction: column;
        gap: 12px
    }

    .layout-nav {
        margin-left: 0
    }

    .user-menu {
        max-width: 100%
    }

    .user-menu-toggle {
        max-width: min(100%,320px)
    }
}

/* update 023: light Bootstrap navbar and compact account menu. */
.site-header {
    background: #fff;
    color: #212529
}

.site-header .container {
    max-width: 1320px;
    padding-top: 10px;
    padding-bottom: 10px
}

.site-header-container {
    gap: 14px
}

.site-header .navbar-brand {
    color: #212529;
    font-size: 24px;
    letter-spacing: -.04em
}

.site-header .navbar-brand:hover {
    color: #212529
}

.brand-accent {
    color: #2563eb
}

.site-header .navbar-nav {
    gap: 8px
}

.site-header .nav-link {
    padding: .65rem .8rem;
    font-size: 15px;
    white-space: nowrap
}

.site-header .nav-link:hover,.site-header .nav-link:focus {
    color: #2563eb!important
}

.public-auth-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto
}

.user-small-menu {
    margin-left: auto;
    cursor: pointer
}

.user-small-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #212529;
    padding: 8px 0;
    font: inherit;
    cursor: pointer;
    max-width: 220px
}

.user-small-menu-toggle:hover,.user-small-menu-toggle:focus {
    color: #2563eb
}

.user-small-menu-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: #6c757d
}

.user-small-menu-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-small-menu .dropdown-menu {
    min-width: 190px;
    margin-top: 0
}

.user-small-menu:hover>.dropdown-menu,.user-small-menu:focus-within>.dropdown-menu {
    display: block
}

.user-small-menu .dropdown-item {
    padding: .7rem 1rem
}

.user-small-menu form {
    margin: 0
}

@media(max-width: 991.98px) {
    .site-header .container {
        padding-top:8px;
        padding-bottom: 8px
    }

    .site-header .navbar-brand {
        font-size: 22px;
        margin-right: auto
    }

    .site-header .navbar-toggler {
        order: 3;
        margin-left: 6px
    }

    .site-header .navbar-collapse {
        order: 4;
        flex-basis: 100%;
        padding-top: 8px
    }

    .site-header .navbar-nav {
        gap: 0
    }

    .site-header .nav-link {
        padding: .6rem 0
    }

    .user-small-menu,.public-auth-actions {
        order: 2;
        margin-left: auto
    }
}

@media(max-width: 575.98px) {
    .public-auth-actions {
        gap: 6px
    }

    .public-auth-actions .btn {
        padding: .42rem .62rem;
        font-size: .82rem;
        white-space: nowrap
    }

    .user-small-menu-toggle {
        max-width: 145px
    }
}

@media(max-width: 389.98px) {
    .site-header .navbar-brand {
        font-size: 20px
    }

    .public-auth-actions .btn {
        padding: .38rem .5rem;
        font-size: .76rem
    }
}