:root {
    --senpos-blue: #139cd8;
    --senpos-blue-dark: #0f88bd;
    --senpos-green: #6fc423;
    --senpos-ink: #182433;
}

body {
    letter-spacing: 0;
}

.senpos-admin .page-wrapper {
    background: #f3f6fa;
}

.senpos-main-header {
    min-height: 4.5rem;
    background: #fff;
    border-bottom: 1px solid var(--tblr-border-color);
}

.senpos-menu-bar {
    background: #fff;
    border-bottom: 1px solid var(--tblr-border-color);
}

.senpos-menu-bar .navbar {
    min-height: 4rem;
    box-shadow: none;
}

.senpos-menu-bar .nav-link {
    min-height: 4rem;
    font-size: 0.95rem;
}

.senpos-menu-bar .nav-item.active > .nav-link {
    color: var(--tblr-primary);
    box-shadow: none;
}

.senpos-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--senpos-ink);
    text-decoration: none;
}

.senpos-header-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.senpos-header-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0;
}

.senpos-search {
    width: 260px;
}

.senpos-admin .page-header {
    margin: 0;
    padding: 1.75rem 0 1rem;
}

.senpos-admin .page-body {
    margin-top: 1rem;
}

.senpos-sidebar {
    background: linear-gradient(180deg, #132331 0%, #0d1a25 100%);
}

.senpos-brand-link,
.senpos-top-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: inherit;
    text-decoration: none;
}

.senpos-brand-mark {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.senpos-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.senpos-brand-name {
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 700;
}

.senpos-brand-subtitle {
    color: rgba(248, 250, 252, 0.7);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

.senpos-nav-label {
    color: rgba(248, 250, 252, 0.52) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.senpos-topbar {
    background: #fff;
    border-bottom: 1px solid var(--tblr-border-color);
}

.senpos-top-brand {
    color: var(--senpos-ink);
    font-weight: 700;
}

.senpos-top-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.senpos-avatar {
    background: color-mix(in srgb, var(--senpos-blue), #fff 18%);
    color: #fff;
    font-weight: 700;
}

.senpos-user-avatar {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe5ee;
}

.senpos-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.senpos-footer-logo {
    height: 24px;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.senpos-login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 16%, rgba(19, 156, 216, 0.18), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(111, 196, 35, 0.16), transparent 26%),
        linear-gradient(135deg, rgba(19, 156, 216, 0.08), rgba(111, 196, 35, 0.08)),
        #eef3f8;
}

.senpos-login-logo img {
    display: block;
    width: 320px;
    max-width: 88%;
    height: auto;
    margin: 0 auto 0.75rem;
}

.senpos-login-title {
    color: var(--senpos-ink);
    font-size: 1.08rem;
    font-weight: 700;
}

.senpos-login-card,
.card {
    border-radius: 8px;
}

.senpos-admin .card {
    border-color: #dfe5ee;
    box-shadow: 0 1px 2px rgba(24, 36, 51, 0.02);
}

.senpos-admin .card-header {
    background: #fff;
}

.senpos-login-card {
    box-shadow: 0 18px 42px rgba(24, 36, 51, 0.15);
}

.btn-primary {
    --tblr-btn-bg: var(--senpos-blue);
    --tblr-btn-border-color: var(--senpos-blue);
    --tblr-btn-hover-bg: var(--senpos-blue-dark);
    --tblr-btn-hover-border-color: var(--senpos-blue-dark);
}

.table code {
    color: #0f5f86;
    background: rgba(19, 156, 216, 0.08);
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
}

.senpos-admin pre {
    white-space: pre-wrap;
}

.senpos-error-page {
    max-width: 760px;
    margin: 2rem auto;
}

.senpos-error-code {
    color: #f59f00;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
}

.senpos-metric-value {
    color: var(--senpos-ink);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.senpos-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.senpos-mini-line {
    height: 52px;
    margin: 1rem -1rem -1rem;
    background:
        linear-gradient(180deg, rgba(6, 111, 209, 0.16), rgba(6, 111, 209, 0.03)),
        url("data:image/svg+xml,%3Csvg width='360' height='56' viewBox='0 0 360 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 38 C20 42 30 28 46 34 C66 43 76 16 94 24 C115 35 128 29 144 33 C164 39 175 20 190 22 C211 24 218 43 237 34 C256 25 268 38 285 31 C302 24 320 38 337 28 C348 22 354 20 360 18' fill='none' stroke='%23066fd1' stroke-width='3'/%3E%3C/svg%3E") center bottom / 100% 56px no-repeat;
    border-radius: 0 0 8px 8px;
}

.senpos-bars {
    display: flex;
    align-items: end;
    gap: 0.42rem;
    height: 52px;
    margin-top: 1.1rem;
}

.senpos-bars span {
    display: block;
    width: 100%;
    min-width: 5px;
    background: var(--tblr-primary);
    border-radius: 2px 2px 0 0;
}

.senpos-traffic-chart {
    display: flex;
    align-items: end;
    gap: 0.48rem;
    height: 250px;
    padding: 1.5rem 0 0;
    background-image:
        linear-gradient(to top, #dbe3ee 1px, transparent 1px),
        linear-gradient(to right, #edf1f6 1px, transparent 1px);
    background-size: 100% 25%, 20% 100%;
}

.senpos-traffic-chart span {
    display: block;
    flex: 1;
    min-width: 7px;
    background: linear-gradient(to top, #066fd1 0 78%, #35b653 78% 100%);
    border-radius: 3px 3px 0 0;
}

.senpos-region-map {
    position: relative;
    height: 250px;
    overflow: hidden;
    background:
        radial-gradient(circle at 26% 42%, rgba(6, 111, 209, 0.72) 0 4%, transparent 4.5%),
        radial-gradient(circle at 70% 46%, rgba(6, 111, 209, 0.82) 0 5%, transparent 5.5%),
        radial-gradient(circle at 52% 38%, rgba(6, 111, 209, 0.28) 0 3%, transparent 3.5%),
        radial-gradient(circle at 78% 62%, rgba(6, 111, 209, 0.24) 0 4%, transparent 4.5%),
        radial-gradient(circle at 38% 66%, rgba(6, 111, 209, 0.22) 0 4%, transparent 4.5%),
        linear-gradient(135deg, #f8fafc, #eef4fb);
    border: 1px solid #e5ebf3;
    border-radius: 8px;
}

.senpos-region-map::before,
.senpos-region-map::after {
    content: "";
    position: absolute;
    border: 1px solid #d5dee9;
    background: rgba(255, 255, 255, 0.74);
}

.senpos-region-map::before {
    left: 15%;
    top: 25%;
    width: 22%;
    height: 42%;
    border-radius: 48% 40% 54% 46%;
}

.senpos-region-map::after {
    right: 14%;
    top: 28%;
    width: 34%;
    height: 38%;
    border-radius: 46% 54% 42% 58%;
}

.senpos-activity-line {
    height: 170px;
    margin: 1rem -1rem -1rem;
    background:
        linear-gradient(180deg, rgba(6, 111, 209, 0.14), rgba(6, 111, 209, 0.04)),
        url("data:image/svg+xml,%3Csvg width='620' height='180' viewBox='0 0 620 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 168 C38 166 54 165 84 160 C118 154 146 168 176 150 C205 132 204 88 230 78 C254 70 265 150 294 134 C318 120 338 162 367 144 C390 129 410 155 435 139 C466 119 462 72 490 82 C514 91 514 124 548 106 C578 90 580 48 604 40 C612 36 616 34 620 28' fill='none' stroke='%23066fd1' stroke-width='4'/%3E%3C/svg%3E") center bottom / 100% 180px no-repeat;
}

@media (max-width: 575.98px) {
    .senpos-login-logo img {
        width: 260px;
    }

    .senpos-top-brand span {
        display: none;
    }

    .senpos-header-title {
        font-size: 1.25rem;
    }

    .senpos-admin .page-header .btn-list {
        margin-top: 0.75rem;
    }
}