:root {
    --bg: #f5efe4;
    --surface: #fffdf8;
    --surface-strong: #ffffff;
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #e6dccb;
    --primary: #126e5a;
    --primary-soft: #d8efe7;
    --danger: #b42318;
    --danger-soft: #fee4e2;
    --warning: #b54708;
    --warning-soft: #ffead5;
    --shadow: 0 14px 28px rgba(38, 46, 58, 0.08);
    --mobile-bg: #efedff;
    --mobile-purple: #643df4;
    --mobile-purple-dark: #4f2fe1;
    --mobile-green: #0b8c17;
    --mobile-mint: #86dfb7;
    --mobile-line: #ddd5fb;
    --mobile-card-shadow: 0 8px 18px rgba(85, 67, 176, 0.14);
}

.admin-body {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 30%),
        linear-gradient(180deg, #f5f7ff 0%, #eef1fb 100%);
    color: #1f2440;
}

.admin-shell-wrap {
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
}

.admin-sidebar {
    background: linear-gradient(180deg, #5a30dd 0%, #6b3df0 100%);
    color: #fff;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 12px 0 32px rgba(82, 53, 190, 0.14);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-brand__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    font-size: 18px;
}

.admin-brand__title {
    font-size: 17px;
    font-weight: 700;
}

.admin-brand__subtitle {
    font-size: 12px;
    opacity: 0.8;
}

.admin-profile-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-profile-card__name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.admin-profile-card__desc,
.admin-profile-card__meta {
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.88;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-nav__item {
    display: block;
    padding: 13px 14px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
}

.admin-nav__item:hover,
.admin-nav__item.is-active {
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(2px);
}

.admin-nav__item--danger {
    margin-top: auto;
}

.admin-main {
    min-width: 0;
    padding: 28px 28px 40px;
}

.admin-topbar {
    margin-bottom: 18px;
}

.admin-topbar__eyebrow {
    color: #7b7fa6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-topbar__title {
    margin: 4px 0 0;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    color: #171c35;
}

.admin-content {
    padding: 0;
    width: 100%;
}

.admin-page-head {
    margin-bottom: 18px;
}

.admin-page-head__eyebrow {
    color: #6c63a8;
    font-size: 13px;
    font-weight: 700;
}

.admin-page-head__title {
    margin: 6px 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: #1b2040;
}

.admin-page-head__desc {
    margin: 0;
    color: #6f7394;
    max-width: 900px;
}

.admin-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.admin-grid--settings {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.admin-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-grid--single {
    grid-template-columns: 1fr;
}

.admin-grid--stretch {
    align-items: stretch;
}

.admin-card-soft {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(122, 95, 231, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(86, 85, 143, 0.08);
}

.admin-card-danger {
    border-color: rgba(253, 162, 155, 0.5);
}

.admin-line-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: start;
}

.admin-line-preview__badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #e9fff0;
    color: #0d8f5f;
    font-weight: 700;
    margin-bottom: 16px;
}

.admin-line-preview__item {
    background: #fff;
    border: 1px solid #e8eaf8;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.admin-line-preview__label {
    font-size: 12px;
    font-weight: 700;
    color: #6f7394;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-line-preview__value {
    font-weight: 600;
    color: #1b2040;
    word-break: break-word;
}

.admin-line-preview__value a {
    color: #5a30dd;
    text-decoration: none;
}

.admin-line-preview__qr {
    background: #fff;
    border: 1px solid #e8eaf8;
    border-radius: 18px;
    padding: 14px;
}

.admin-line-preview__qr img {
    display: block;
    width: 100%;
    border-radius: 12px;
}

.admin-form-divider {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b7fa6;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed #d8dcf2;
}

.admin-table-wrap {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    border: 1px solid rgba(122, 95, 231, 0.12);
    box-shadow: 0 20px 45px rgba(86, 85, 143, 0.08);
}

.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-pending-list {
    display: grid;
    gap: 18px;
}

.admin-pending-card {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
    border: 1px solid #e5ddff;
    box-shadow: 0 18px 34px rgba(91, 72, 183, 0.08);
}

.admin-pending-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-pending-card__identity,
.admin-line-profile-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-line-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid #dfd8ff;
    box-shadow: 0 8px 18px rgba(91, 72, 183, 0.12);
}

.admin-line-avatar--tiny {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.admin-line-avatar--fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5a30dd, #7a5fff);
    color: #fff;
    font-weight: 800;
}

.admin-pending-card__title {
    color: #1b2040;
    font-size: 1.08rem;
    font-weight: 800;
}

.admin-pending-card__sub {
    margin-top: 6px;
    color: #7377a0;
    font-size: 0.9rem;
    word-break: break-all;
}

.admin-pending-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f0e9ff;
    color: #5a30dd;
    font-weight: 700;
    white-space: nowrap;
}

.admin-pending-card__form {
    display: grid;
    gap: 14px;
}

.admin-pending-card__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.admin-pending-card__actions,
.admin-pending-card__reject {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .admin-grid--settings,
    .admin-grid--split {
        grid-template-columns: 1fr;
    }

    .admin-line-preview {
        grid-template-columns: 1fr;
    }

    .admin-pending-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        padding-bottom: 14px;
    }

    .admin-nav__item--danger {
        margin-top: 0;
    }

    .admin-main {
        padding: 16px 14px 28px;
    }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Prompt", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(18, 110, 90, 0.08), transparent 30%),
        linear-gradient(180deg, #f8f3ea 0%, #f4ede1 100%);
}
a { color: inherit; text-decoration: none; }
.app-shell { max-width: 1280px; margin: 0 auto; padding: 16px; }
.employee-body {
    background: var(--mobile-bg);
}
.employee-shell {
    max-width: 430px;
    min-height: 100vh;
    padding: 0 0 92px;
}

.admin-body .card,
.admin-body .metric,
.admin-body .table-wrap,
.admin-body .hero,
.admin-body .flash {
    border-radius: 24px;
}
.topbar, .card, .metric, .table-wrap, .flash, .hero {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    padding: 20px;
}
.topbar h1 { margin: 0 0 6px; font-size: 1.6rem; }
.muted { margin: 0; color: var(--muted); font-size: 0.94rem; }
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}
.tabs a, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    font-weight: 600;
}
.tabs a:hover, .btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-light { background: #fff; }
.content { display: grid; gap: 16px; }
.mobile-content {
    gap: 14px;
    padding: 18px 4px 12px;
}
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.metric {
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.metric::after {
    content: "";
    position: absolute;
    inset: auto -20px -20px auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(18, 110, 90, 0.08);
}
.metric h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--muted); }
.metric strong { font-size: 1.6rem; }
.card, .hero, .table-wrap { padding: 18px; }
.hero {
    background: linear-gradient(135deg, #0f5d4d 0%, #194f6e 100%);
    color: #fff;
}
.hero p { color: rgba(255, 255, 255, 0.86); }
.form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
label { display: grid; gap: 6px; font-weight: 600; }
input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d6d3d1;
    border-radius: 12px;
    font: inherit;
    background: #fff;
}
button {
    font: inherit;
}
textarea { min-height: 90px; resize: vertical; }
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}
th, td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
th { color: var(--muted); font-weight: 700; font-size: 0.92rem; }
.table-wrap { overflow: auto; }
.flash { padding: 14px 18px; }
.flash-success { background: var(--primary-soft); }
.flash-error { background: var(--danger-soft); }
.badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    background: var(--primary-soft);
    color: var(--primary);
}
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.text-danger { color: var(--danger); }
.row-danger td:first-child {
    background: rgba(180, 35, 24, 0.10);
}
.inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.small { font-size: 0.9rem; color: var(--muted); }
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}
.login-box {
    width: min(460px, 100%);
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.section-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
}
.split {
    display: grid;
    gap: 16px;
    grid-template-columns: 2fr 1fr;
}
.mobile-appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 14px;
    color: #fff;
    background: var(--mobile-purple);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 8px 18px rgba(74, 48, 170, 0.16);
    backdrop-filter: blur(8px);
}
.mobile-appbar__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1.35rem;
    color: #fff;
}
.mobile-appbar__icon-btn {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.mobile-appbar__title-wrap {
    text-align: center;
    line-height: 1.2;
}
.mobile-appbar__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
}
.mobile-appbar__subtitle {
    margin-top: 2px;
    font-size: 0.74rem;
    line-height: 1.2;
    opacity: 0.82;
}
.mobile-flash {
    margin: 0 14px 10px;
    border-radius: 16px;
    box-shadow: var(--mobile-card-shadow);
}
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
}
.mobile-drawer-overlay[hidden] {
    display: none;
}
.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 26, 61, 0.46);
}
.mobile-drawer {
    position: relative;
    z-index: 1;
    width: min(78vw, 320px);
    min-height: 100vh;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 16px 0 36px rgba(36, 24, 81, 0.22);
    overflow-y: auto;
}
.mobile-drawer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 14px;
}
.mobile-drawer__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mobile-drawer__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5f39f3, #7a5cff);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(100, 61, 244, 0.24);
}
.mobile-drawer__name {
    color: #2c2453;
    font-size: 1rem;
    font-weight: 700;
}
.mobile-drawer__team {
    margin-top: 2px;
    color: #7b729d;
    font-size: 0.8rem;
}
.mobile-drawer__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #7c68d9;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.mobile-drawer__highlight {
    margin: 0 0 12px;
    padding: 14px 16px 16px;
    background: linear-gradient(135deg, #5f39f3 0%, #764fff 100%);
    color: #fff;
}
.mobile-drawer__highlight-label {
    font-size: 0.86rem;
    opacity: 0.88;
}
.mobile-drawer__highlight-value {
    margin-top: 4px;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 800;
}
.mobile-drawer__menu-title {
    padding: 0 16px 10px;
    color: #8b83aa;
    font-size: 0.88rem;
    font-weight: 600;
}
.mobile-drawer__menu {
    display: grid;
}
.mobile-drawer__item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #2b2452;
}
.mobile-drawer__item:hover {
    background: rgba(107, 76, 244, 0.05);
}
.mobile-drawer__item-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, #643df4, #7e61ff);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.mobile-drawer__item-label {
    font-size: 1rem;
    font-weight: 500;
}
.mobile-drawer__item-arrow {
    color: #c0b6e5;
    font-size: 1.3rem;
    line-height: 1;
}
.mobile-drawer__item--danger .mobile-drawer__item-icon {
    background: linear-gradient(135deg, #7a45ff, #5f39f3);
}
.mobile-drawer-open {
    overflow: hidden;
}
.mobile-summary-card,
.mobile-sheet,
.mobile-table-card,
.mobile-modal-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--mobile-line);
    border-radius: 20px;
    box-shadow: var(--mobile-card-shadow);
}
.mobile-summary-card {
    padding: 16px;
}
.mobile-summary-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}
.mobile-summary-label {
    font-size: 1rem;
    font-weight: 800;
    color: #2e255b;
}
.mobile-summary-big {
    margin-top: 4px;
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    color: var(--mobile-purple);
}
.mobile-summary-percent-label {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: #352c63;
}
.mobile-summary-percent-value {
    text-align: right;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 900;
    color: var(--mobile-green);
}
.mobile-summary-loss {
    margin-top: 10px;
    color: #3f3660;
    font-size: 0.95rem;
    font-weight: 700;
}
.mobile-summary-loss strong { color: #ff2929; }
.mobile-divider {
    height: 1px;
    margin: 14px 0;
    background: linear-gradient(90deg, transparent, #d8d1f9 12%, #d8d1f9 88%, transparent);
}
.mobile-triple-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    text-align: center;
}
.mobile-triple-stats strong {
    display: block;
    color: var(--mobile-purple);
    font-size: 1.9rem;
    font-weight: 900;
}
.mobile-triple-stats span {
    display: block;
    margin-top: 4px;
    color: #756b9a;
    font-size: 0.95rem;
}
.mobile-action-btn {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 12px;
    background: linear-gradient(90deg, #80ddb5, #93dfbe);
    color: #fff;
    font-weight: 800;
}
.mobile-sheet {
    padding: 16px;
}
.mobile-sheet h2,
.mobile-modal-card h2 {
    margin: 0;
    text-align: center;
    color: #2f2657;
    font-size: 1.05rem;
    font-weight: 900;
}
.mobile-list {
    margin-top: 14px;
    border-top: 1px solid #ddd6fb;
}
.mobile-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #ddd6fb;
    color: #2f2656;
}
.mobile-list-row__value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2f2656;
}
.mobile-list-row__value--danger { color: #ff1f1f; }
.mobile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--mobile-purple);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}
.mobile-amount-input {
    width: 100px;
    padding: 8px 10px;
    border: 1px solid #d6cff7;
    border-radius: 8px;
    text-align: right;
    font-size: 1rem;
}
.mobile-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 4px 0 2px;
    color: var(--mobile-purple);
    font-weight: 800;
}
.mobile-toolbar__title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    color: var(--mobile-purple);
}
.mobile-toolbar__action {
    display: inline-flex;
    align-items: center;
    min-width: 96px;
    font-size: 0.98rem;
    white-space: nowrap;
    color: var(--mobile-purple);
}
.mobile-date-heading {
    text-align: center;
    margin: 6px 0 8px;
    color: #302957;
    font-size: 1.05rem;
    font-weight: 900;
}
.mobile-table-card {
    padding: 0;
    overflow: hidden;
}
.mobile-table-card--worksheet {
    margin: 2px 0 0;
    border-radius: 16px;
    border: 1px solid rgba(129, 101, 244, 0.18);
    box-shadow: 0 12px 26px rgba(93, 66, 195, 0.10);
}
.mobile-loan-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.mobile-loan-table thead th {
    padding: 9px 6px;
    background: linear-gradient(180deg, #e6dbff, #d5c5ff);
    color: #4c328f;
    font-size: 0.86rem;
    text-align: center;
    border-bottom: none;
    font-weight: 700;
}
.mobile-loan-table tbody td {
    padding: 0;
    border-bottom: 1px solid #ebe4ff;
    background: rgba(255, 255, 255, 0.98);
}
.mobile-loan-table tbody tr:last-child td { border-bottom: none; }
.mobile-loan-table .col-name { width: 27%; }
.mobile-loan-table .col-address { width: 28%; }
.mobile-loan-table .col-due { width: 18%; }
.mobile-loan-table .col-paid { width: 14%; }
.mobile-loan-table .col-festival { width: 13%; }
.mobile-loan-table--worksheet .col-name { width: 25%; }
.mobile-loan-table--worksheet .col-address { width: 24%; }
.mobile-loan-table--worksheet .col-due { width: 21%; }
.mobile-loan-table--worksheet .col-paid { width: 30%; }
.mobile-name-link,
.mobile-cell {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    color: #31265a;
}
.mobile-loan-table .is-alert .mobile-name-link {
    background: rgba(255, 40, 40, 0.12);
}
.mobile-cell--name,
.mobile-cell--address {
    justify-content: center;
    font-size: 0.98rem;
}
.worksheet-name-link {
    color: #4e2fb8;
    font-weight: 600;
}
.mobile-cell--due {
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: #4b3b86;
    background: rgba(255, 255, 255, 0.98);
}
.mobile-cell--due-alert {
    color: #7b2144;
    background: linear-gradient(180deg, #ffd8e5, #ffc6d7);
}
.mobile-input-cell input {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: none;
    border-left: 1px solid #ebe4ff;
    border-right: 1px solid #ebe4ff;
    border-radius: 0;
    text-align: center;
    background: #fcfbff;
    color: #4e2fb8;
    font-weight: 600;
}
.mobile-input-cell--worksheet input {
    min-height: 36px;
    font-size: 1rem;
}
.mobile-loan-table--worksheet thead th:first-child {
    border-top-left-radius: 10px;
}
.mobile-loan-table--worksheet thead th:last-child {
    border-top-right-radius: 10px;
}
.mobile-loan-table--worksheet tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
.mobile-loan-table--worksheet tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
.mobile-table-empty-state {
    padding: 18px 12px;
    text-align: center;
    color: #786f99;
    font-size: 0.92rem;
    line-height: 1.5;
    background: linear-gradient(180deg, rgba(248, 245, 255, 0.96), rgba(255, 255, 255, 0.98));
}
.mobile-festival-cell {
    justify-content: center;
    font-weight: 800;
    color: var(--mobile-purple);
}
.mobile-note {
    padding: 0 8px;
    color: #6d6490;
    font-size: 0.8rem;
}
.mobile-modal-screen {
    min-height: calc(100vh - 72px);
    padding: 18px 14px 6px;
    background: rgba(31, 23, 53, 0.42);
    border-radius: 22px;
}
.mobile-modal-card {
    width: min(100%, 300px);
    margin: 0 auto;
    padding: 18px 20px 14px;
}
.mobile-modal-name {
    margin: -6px 0 16px;
    text-align: center;
    color: #2e2558;
    font-size: 1.05rem;
    font-weight: 900;
}
.mobile-detail-list {
    display: grid;
    gap: 0;
}
.mobile-detail-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e3ddfb;
}
.mobile-detail-row dt {
    font-weight: 800;
    color: #2e2558;
}
.mobile-detail-row dd {
    margin: 0;
    color: #2e2558;
}
.mobile-detail-row dd.is-danger {
    color: #ff2121;
    font-weight: 900;
}
.mobile-mini-table {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #d8cdf9;
    border-radius: 16px;
}
.mobile-mini-table table {
    min-width: 0;
}
.mobile-mini-table th {
    padding: 7px 6px;
    background: linear-gradient(180deg, #d5c0ff, #c1a8f1);
    color: #362d5d;
    font-size: 0.84rem;
    text-align: center;
    border-bottom: none;
}
.mobile-mini-table td {
    padding: 7px 6px;
    text-align: center;
    border-bottom: 1px solid #e1dafb;
}
.mobile-modal-close {
    display: block;
    margin: 18px auto 0;
    color: #8b99b1;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
}
.worksheet-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0 88px;
    background: rgba(48, 42, 67, 0.52);
    overflow-y: auto;
}
.worksheet-modal-card {
    width: min(100%, 430px);
    min-height: 0;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(42, 28, 89, 0.24);
    overflow: hidden;
}
.worksheet-modal-name {
    padding: 22px 20px 12px;
    text-align: center;
    color: #2f2756;
    font-size: 1.15rem;
    font-weight: 900;
}
.worksheet-detail-list {
    padding: 0 22px;
}
.worksheet-detail-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #e5dffc;
}
.worksheet-detail-label {
    color: #2d2555;
    font-size: 0.98rem;
    font-weight: 800;
}
.worksheet-detail-value {
    color: #2d2555;
    font-size: 0.98rem;
}
.worksheet-detail-value--danger {
    color: #ff2222;
    font-weight: 900;
}
.worksheet-detail-value--overpaid {
    color: #6a35f0;
    font-weight: 900;
}
.worksheet-history-card {
    margin: 16px 20px 0;
    border: 1px solid #d8cdfb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(116, 88, 209, 0.12);
}
.worksheet-history-table {
    width: 100%;
    min-width: 0;
}
.worksheet-history-table th {
    padding: 7px 6px;
    background: linear-gradient(180deg, #d8c3ff, #c4acf2);
    color: #392f62;
    font-size: 0.84rem;
    text-align: center;
    border-bottom: none;
}
.worksheet-history-table td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid #e6e0fb;
}
.worksheet-history-table tbody tr:last-child td {
    border-bottom: none;
}
.worksheet-modal-actions {
    display: grid;
    gap: 10px;
    padding: 18px 20px 0;
}
.worksheet-modal-close {
    display: block;
    margin-top: 20px;
    padding: 16px 0 18px;
    text-align: center;
    color: #94a1b7;
    font-size: 1.05rem;
    font-weight: 800;
    border-top: 1px solid #ece7fb;
    background: #fff;
}
.worksheet-cut-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
    padding: 0 18px;
    margin: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    box-shadow: 0 12px 24px rgba(100, 61, 244, 0.22);
}
.worksheet-cut-hint {
    padding: 12px 14px;
    border: 1px solid #e6defd;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 245, 255, 0.96), rgba(255, 255, 255, 0.98));
    color: #736998;
    font-size: 0.88rem;
    line-height: 1.5;
}
.mobile-form-hero,
.mobile-form-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--mobile-line);
    border-radius: 16px;
    box-shadow: var(--mobile-card-shadow);
}
.mobile-form-hero {
    padding: 16px;
}
.mobile-form-hero h2 {
    margin: 0;
    color: #2e255a;
    font-size: 1.1rem;
}
.mobile-form-hero p {
    margin: 8px 0 0;
    color: #6c6490;
    font-size: 0.9rem;
    line-height: 1.5;
}
.mobile-customer-form {
    display: grid;
    gap: 12px;
    padding-bottom: 72px;
}
.mobile-form-card {
    padding: 14px;
}
.mobile-form-card__title {
    margin-bottom: 12px;
    color: #2d2558;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.mobile-form-section-note {
    margin: -4px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(109, 76, 255, 0.08), rgba(80, 210, 181, 0.1));
    color: #655b86;
    font-size: 0.82rem;
    line-height: 1.45;
}
.mobile-loan-summary-card {
    padding-top: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 245, 255, 0.98)),
        #fff;
    border-color: #d9d0fb;
}
.mobile-loan-summary-list {
    display: grid;
    gap: 10px;
}
.mobile-loan-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(245, 241, 255, 0.9);
    color: #32295d;
    font-size: 0.96rem;
    font-weight: 600;
}
.mobile-loan-summary-row span {
    color: #4c427a;
    font-weight: 600;
}
.mobile-loan-summary-row--total {
    margin-top: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid #e7e0fb;
    background: linear-gradient(90deg, rgba(229, 255, 239, 0.96), rgba(237, 250, 255, 0.96));
}
.mobile-loan-summary-note {
    padding: 2px 4px 0;
    color: #6f6793;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 400;
}
.loan-summary-highlight {
    color: #6a35f0;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.mobile-loan-summary-row [data-loan-summary-output="holiday_count"] {
    color: #7a3cff;
}
.mobile-loan-summary-row [data-loan-summary-output="daily_installment"] {
    color: #6a35f0;
}
.mobile-loan-summary-row [data-loan-summary-output="first_installment_amount"] {
    color: #7a46ff;
}
.mobile-loan-summary-row [data-loan-summary-output="commission_amount"] {
    color: #8a4dff;
}
.mobile-loan-summary-row [data-loan-summary-output="holiday_deducted_amount"] {
    color: #9456ff;
}
.mobile-loan-summary-row--total span {
    color: #4e2fb8;
}
.mobile-loan-summary-row--total [data-loan-summary-output="net_disbursed_amount"] {
    color: #5f2fff;
    font-size: 1.06rem;
    font-weight: 800;
}
.mobile-stack-fields {
    display: grid;
    gap: 12px;
}
.mobile-stack-fields label {
    font-size: 0.92rem;
    color: #342b5f;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.mobile-stack-fields input,
.mobile-stack-fields textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #d8d0f7;
    border-radius: 12px;
    background: #fff;
    color: #2c2552;
}
.mobile-stack-fields input[type="date"] {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 12px;
    overflow: hidden;
}
.mobile-secondary-btn,
.mobile-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
}
.mobile-secondary-btn {
    margin-top: 12px;
    background: #ece7ff;
    color: var(--mobile-purple);
}
.mobile-secondary-btn--ghost {
    background: #fff;
    border: 1px solid #d8d0f7;
    color: #4f2fe1;
}
.mobile-inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.mobile-inline-actions .mobile-secondary-btn {
    margin-top: 0;
}
.mobile-upload-hint {
    color: #716792;
    font-size: 0.84rem;
    line-height: 1.5;
}
.mobile-upload-actions {
    display: grid;
    gap: 10px;
}
.mobile-upload-action {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px dashed #d4c9ff;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 245, 255, 0.96), rgba(255, 255, 255, 0.98));
}
.mobile-upload-action__title {
    color: #342b5f;
    font-size: 0.92rem;
    font-weight: 700;
}
.mobile-upload-action__desc {
    color: #756b97;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 400;
}
.mobile-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.mobile-image-preview-grid--single {
    grid-template-columns: minmax(96px, 132px);
}
.mobile-image-preview-item {
    position: relative;
    display: grid;
    gap: 6px;
}
.mobile-image-preview-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #ddd5fb;
    background: #fff;
    box-shadow: 0 8px 18px rgba(112, 88, 203, 0.12);
}
.mobile-image-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(102, 102, 112, 0.88);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.mobile-image-preview-caption {
    color: #5f567f;
    font-size: 0.74rem;
    line-height: 1.3;
    word-break: break-word;
}
.mobile-form-submit-wrap {
    position: sticky;
    bottom: 94px;
    z-index: 2;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(239, 237, 255, 0), rgba(239, 237, 255, 0.98) 38%);
}
.mobile-primary-btn {
    background: linear-gradient(90deg, var(--mobile-purple), var(--mobile-purple-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(100, 61, 244, 0.24);
}
.mobile-customer-list {
    display: grid;
    gap: 10px;
}
.mobile-customer-page {
    display: grid;
    gap: 12px;
    padding-bottom: 84px;
}
.mobile-customer-hero {
    display: grid;
    gap: 14px;
    padding: 18px 16px;
    background: linear-gradient(135deg, rgba(107, 76, 244, 0.96), rgba(125, 98, 255, 0.96));
    border: 1px solid rgba(219, 208, 255, 0.72);
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 16px 34px rgba(92, 68, 196, 0.22);
}
.mobile-customer-hero__title {
    font-size: 1.15rem;
    font-weight: 800;
}
.mobile-customer-hero__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mobile-customer-hero__desc {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}
.mobile-customer-hero__map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}
.mobile-customer-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mobile-customer-stats--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-contract-search-hero-stats,
.mobile-customer-hero-stats-fixed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-customer-stat {
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}
.mobile-customer-stat strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
}
.mobile-customer-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.92;
}
.mobile-customer-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-customer-hero-grid--detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.mobile-customer-hero-box {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}
.mobile-customer-hero-box .mobile-customer-item__box-label {
    color: rgba(255, 255, 255, 0.72);
}
.mobile-customer-hero-box .mobile-customer-item__box-value {
    color: #fff;
}
.mobile-customer-hero-box--break {
    word-break: break-word;
}
.mobile-customer-hero-address {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.86rem;
    line-height: 1.6;
}
.mobile-customer-hero-address--detail {
    margin-top: 2px;
}
.mobile-customer-section {
    padding: 14px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--mobile-line);
    border-radius: 18px;
    box-shadow: var(--mobile-card-shadow);
}
.mobile-customer-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.mobile-customer-section__title {
    color: #2d2558;
    font-size: 1rem;
    font-weight: 800;
}
.mobile-customer-section__caption {
    color: #7a729d;
    font-size: 0.82rem;
    text-align: right;
}
.mobile-customer-toolbar {
    display: grid;
    gap: 10px;
}
.mobile-customer-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.mobile-customer-search input {
    min-width: 0;
    border: 1px solid #d9d0fb;
    border-radius: 14px;
    background: #fcfbff;
    color: #2d2558;
}
.mobile-customer-search button {
    min-width: 70px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: #ece7ff;
    color: #5a39d2;
    font-weight: 700;
    cursor: pointer;
}
.mobile-customer-add-btn {
    min-height: 44px;
}
.mobile-customer-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #ddd5fb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 10px 22px rgba(106, 78, 204, 0.08);
}
.mobile-customer-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.mobile-customer-item__name {
    color: #2e2558;
    font-size: 1rem;
    font-weight: 800;
}
.mobile-customer-item__nickname {
    margin-top: 2px;
    color: #746c97;
    font-size: 0.82rem;
}
.mobile-customer-item__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.mobile-customer-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f2eeff;
    color: #5c38da;
    font-size: 0.74rem;
    font-weight: 700;
}
.mobile-customer-chip--danger {
    background: #ffe6e8;
    color: #d92b43;
}
.mobile-customer-chip--success {
    background: #e7fbef;
    color: #14803d;
}
.mobile-customer-item__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-customer-item__grid--fixed-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-customer-item__grid--detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.mobile-customer-item__box {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f5ff;
}
.mobile-customer-page--customers .mobile-customer-item {
    gap: 12px;
}
.mobile-customer-page--customers .mobile-customer-item__top {
    align-items: flex-start;
}
.mobile-customer-page--customers .mobile-customer-item__grid--fixed-two .mobile-customer-item__box {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-customer-page--customers .mobile-customer-item__box-value {
    line-height: 1.35;
}
.mobile-customer-page--customers .mobile-customer-item__actions {
    grid-template-columns: minmax(0, 1fr) auto;
}
.mobile-customer-page--customers .mobile-customer-action-group {
    justify-content: flex-end;
}
.mobile-customer-item__box-label {
    color: #8a82ad;
    font-size: 0.74rem;
}
.mobile-customer-item__box-value {
    margin-top: 4px;
    color: #32295d;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
}
.mobile-customer-item__box-value--break {
    word-break: break-all;
}
.mobile-customer-item__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.mobile-customer-action-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.mobile-customer-item__meta {
    color: #7b739f;
    font-size: 0.78rem;
}
.mobile-customer-item__ghost-link,
.mobile-customer-item__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
}
.mobile-customer-item__link {
    border-radius: 12px;
    background: linear-gradient(90deg, #643df4, #4f2fe1);
    color: #fff;
}
.mobile-customer-item__ghost-link {
    border: 1px solid #d8d0f7;
    background: #fff;
    color: #5a39d2;
}
.mobile-customer-detail-address {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8f5ff;
    color: #524978;
    font-size: 0.88rem;
    line-height: 1.6;
}
.mobile-customer-document-actions {
    display: grid;
    gap: 10px;
}
.mobile-empty-state--compact {
    padding: 14px 10px;
    font-size: 0.84rem;
}
.mobile-loan-history-list {
    display: grid;
    gap: 12px;
}
.mobile-customer-page--detail {
    gap: 14px;
}
.mobile-customer-page--detail .mobile-customer-hero {
    gap: 16px;
}
.mobile-customer-page--detail .mobile-customer-hero-box {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-customer-page--detail .mobile-customer-section {
    padding: 16px;
}
.mobile-customer-page--detail .mobile-customer-section__head {
    margin-bottom: 14px;
}
.mobile-customer-page--detail .mobile-customer-document-actions {
    gap: 12px;
}
.mobile-customer-page--detail .mobile-customer-item__grid--detail .mobile-customer-item__box {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-current-contract-list {
    display: grid;
    gap: 12px;
}
.mobile-current-contract-search {
    display: grid;
    gap: 10px;
    align-items: stretch;
}
.mobile-current-contract-search__row {
    min-width: 0;
}
.mobile-current-contract-search__row input {
    width: 100%;
}
.mobile-current-contract-search input {
    min-width: 0;
    width: 100%;
    border: 1px solid #d9d0fb;
    border-radius: 14px;
    background: #fcfbff;
    color: #2d2558;
}
.mobile-current-contract-search input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 10px;
    font-size: 0.9rem;
    overflow: hidden;
}
.mobile-current-contract-search button,
.mobile-current-contract-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    font-size: 0.86rem;
    font-weight: 700;
}
.mobile-current-contract-search button {
    background: #ece7ff;
    color: #5a39d2;
    cursor: pointer;
}
.mobile-current-contract-search__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mobile-current-contract-search__clear {
    border: 1px solid #d8d0f7;
    background: #fff;
    color: #5a39d2;
}
.mobile-current-contract-card {
    border: 1px solid #ddd5fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 12px 22px rgba(99, 74, 195, 0.08);
    overflow: hidden;
}
.mobile-current-contract-card--bad-debt {
    border-color: rgba(217, 43, 67, 0.24);
}
.mobile-current-contract-card__summary {
    list-style: none;
    cursor: pointer;
    padding: 14px;
}
.mobile-current-contract-card__summary::-webkit-details-marker {
    display: none;
}
.mobile-current-contract-card[open] .mobile-current-contract-card__summary {
    border-bottom: 1px solid #eee8ff;
    background: linear-gradient(180deg, #f4efff 0%, #ede6ff 100%);
}
.mobile-current-contract-card[open] {
    border-color: rgba(100, 61, 244, 0.36);
    box-shadow: 0 16px 30px rgba(94, 67, 204, 0.18);
}
.mobile-current-contract-card--bad-debt[open] {
    border-color: rgba(217, 43, 67, 0.34);
    box-shadow: 0 16px 30px rgba(217, 43, 67, 0.12);
}
.mobile-current-contract-card__top {
    position: relative;
    min-height: 48px;
    padding-right: 98px;
}
.mobile-current-contract-card__title {
    min-width: 0;
}
.mobile-current-contract-card__badges {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 92px;
}
.mobile-current-contract-card__name {
    color: #2d2558;
    font-size: 1rem;
    font-weight: 800;
}
.mobile-current-contract-card__date {
    margin-top: 4px;
    color: #7b739f;
    font-size: 0.82rem;
}
.mobile-current-contract-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.mobile-current-contract-card__stat {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f5ff;
}
.mobile-current-contract-card__stat span {
    display: block;
    color: #8a82ad;
    font-size: 0.74rem;
}
.mobile-current-contract-card__stat strong {
    display: block;
    margin-top: 4px;
    color: #32295d;
    font-size: 0.98rem;
    font-weight: 800;
}
.mobile-current-contract-card__summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.mobile-current-contract-card__mini {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f5ff;
}
.mobile-current-contract-card__mini span {
    display: block;
    color: #8a82ad;
    font-size: 0.74rem;
}
.mobile-current-contract-card__mini strong {
    display: block;
    margin-top: 4px;
    color: #32295d;
    font-size: 0.92rem;
    font-weight: 800;
}
.mobile-current-contract-card__mini-value--danger {
    color: #d92b43 !important;
}
.mobile-current-contract-card__mini-value--overpaid {
    color: #5a39d2 !important;
}
.mobile-current-contract-card__progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}
.mobile-current-contract-card__progress-label {
    color: #5f567f;
    font-size: 0.84rem;
}
.mobile-current-contract-card__progress-percent {
    color: #5a39d2;
    font-size: 0.86rem;
    font-weight: 800;
}
.mobile-current-contract-card__progress {
    margin-top: 8px;
    height: 10px;
    border-radius: 999px;
    background: #ece6ff;
    overflow: hidden;
}
.mobile-current-contract-card__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #643df4, #8e73ff);
}
.mobile-current-contract-card__detail {
    display: grid;
    gap: 12px;
    padding: 14px;
}
.mobile-current-contract-card__detail .mobile-customer-item__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-loan-history-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #ddd5fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 12px 22px rgba(99, 74, 195, 0.08);
}
.mobile-loan-history-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.mobile-loan-history-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.mobile-customer-page--detail .mobile-loan-history-card {
    gap: 14px;
    padding: 16px;
}
.mobile-customer-page--detail .mobile-loan-history-card__head {
    align-items: flex-start;
}
.mobile-customer-page--detail .mobile-loan-history-card__badges {
    justify-content: flex-end;
}
.mobile-loan-history-card__name {
    color: #2d2558;
    font-size: 1rem;
    font-weight: 800;
}
.mobile-loan-history-card__sub {
    margin-top: 4px;
    color: #7b739f;
    font-size: 0.82rem;
}
.mobile-loan-history-guarantor-list {
    display: grid;
    gap: 8px;
}
.mobile-loan-history-guarantor {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f5ff;
    color: #564d7a;
    font-size: 0.82rem;
}
.mobile-customer-page--detail .mobile-loan-history-guarantor {
    gap: 4px;
    padding: 12px;
}
.mobile-loan-history-guarantor strong {
    color: #32295d;
    font-size: 0.9rem;
}
.mobile-loan-history-guarantor-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    margin-top: 6px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d8d0f7;
    background: #fff;
    color: #5a39d2;
    font-size: 0.8rem;
    font-weight: 700;
}
.mobile-loan-history-actions {
    display: grid;
    gap: 10px;
}
.mobile-customer-page--detail .mobile-loan-history-actions {
    gap: 12px;
}
.mobile-loan-history-panel {
    border: 1px solid #e2dbfd;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.mobile-loan-history-panel summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    color: #5233c4;
    font-size: 0.92rem;
    font-weight: 700;
}
.mobile-customer-page--detail .mobile-loan-history-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile-loan-history-panel summary::-webkit-details-marker {
    display: none;
}
.mobile-loan-history-panel[open] summary {
    border-bottom: 1px solid #eee8ff;
    background: #faf8ff;
}
.mobile-loan-history-detail {
    padding: 0 14px 14px;
}
.mobile-customer-page--detail .mobile-loan-history-detail {
    padding-top: 2px;
}
.mobile-customer-page--detail .mobile-detail-list {
    margin-bottom: 12px;
}
.mobile-customer-page--profile {
    gap: 14px;
}
.mobile-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-profile-form {
    gap: 14px;
}
.mobile-profile-hint {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8f5ff;
    color: #6f6793;
    font-size: 0.86rem;
    line-height: 1.6;
}
.mobile-form-submit-wrap--profile {
    position: static;
    bottom: auto;
    z-index: auto;
    padding-top: 4px;
    background: transparent;
}
.mobile-customer-page--dashboard {
    gap: 14px;
}
.mobile-dashboard-hero {
    gap: 16px;
}
.mobile-dashboard-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mobile-dashboard-hero__action {
    white-space: nowrap;
}
.mobile-dashboard-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.mobile-dashboard-percent {
    text-align: right;
}
.mobile-dashboard-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mobile-dashboard-section {
    padding: 16px;
}
.mobile-dashboard-list {
    display: grid;
    border-top: 1px solid #e6dffc;
}
.mobile-dashboard-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e6dffc;
}
.mobile-dashboard-list__row--total {
    border-bottom: none;
}
.mobile-dashboard-list__label {
    color: #30295c;
    font-size: 0.94rem;
    line-height: 1.45;
}
.mobile-dashboard-list__value {
    color: #2f2657;
    font-size: 1.55rem;
    font-weight: 800;
}
.mobile-dashboard-list__value--danger {
    color: #ff2b39;
}
.mobile-dashboard-list__value--positive {
    color: #5a39d2;
}
.mobile-dashboard-list__control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mobile-dashboard-hero-v2 {
    gap: 14px;
}
.mobile-dashboard-hero-v2__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mobile-dashboard-hero-v2__action {
    white-space: nowrap;
}
.mobile-dashboard-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-dashboard-highlight-card {
    min-height: 132px;
    padding: 16px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-dashboard-highlight-card__label {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.84rem;
    font-weight: 700;
}
.mobile-dashboard-highlight-card__value {
    margin-top: 8px;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 900;
}
.mobile-dashboard-highlight-card__sub {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.74rem;
    line-height: 1.45;
}
.mobile-dashboard-highlight-card--percent .mobile-dashboard-highlight-card__value {
    color: #d8ff7d;
    font-size: 2rem;
}
.mobile-dashboard-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}
.mobile-dashboard-alert-chip strong {
    color: #ffcfdb;
    font-weight: 800;
}
.mobile-dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mobile-dashboard-mini-card {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    text-align: center;
}
.mobile-dashboard-mini-card span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.74rem;
    line-height: 1.35;
}
.mobile-dashboard-mini-card strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}
.mobile-dashboard-odometer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-dashboard-odometer-card {
    padding: 16px 14px;
    border: 1px solid #e2dbfd;
    border-radius: 18px;
    background: linear-gradient(180deg, #fcfbff 0%, #f6f2ff 100%);
}
.mobile-dashboard-odometer-card__label {
    color: #7f76a6;
    font-size: 0.84rem;
    font-weight: 700;
}
.mobile-dashboard-odometer-card__value {
    margin-top: 8px;
    color: #2f2657;
    font-size: 1.7rem;
    font-weight: 800;
}
.mobile-dashboard-odometer-btn {
    margin-top: 14px;
}
.mobile-dashboard-board {
    padding: 16px;
}
.mobile-dashboard-board__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-dashboard-info-card {
    min-height: 112px;
    padding: 14px;
    border: 1px solid #e2dbfd;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfbff 0%, #f6f2ff 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-dashboard-info-card__label {
    color: #7f76a6;
    font-size: 0.8rem;
    font-weight: 700;
}
.mobile-dashboard-info-card__value {
    margin-top: 8px;
    color: #2f2657;
    font-size: 1.6rem;
    font-weight: 800;
}
.mobile-dashboard-settlement {
    margin-top: 12px;
    border-top: 1px solid #e6dffc;
}
.mobile-dashboard-settlement__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e6dffc;
}
.mobile-dashboard-settlement__row--total {
    border-bottom: none;
}
.mobile-dashboard-settlement__label {
    color: #30295c;
    font-size: 0.94rem;
    line-height: 1.45;
}
.mobile-dashboard-settlement__value {
    color: #2f2657;
    font-size: 1.5rem;
    font-weight: 800;
}
.mobile-dashboard-settlement__value--danger {
    color: #ff2b39;
}
.mobile-dashboard-settlement__value--positive {
    color: #5a39d2;
}
.mobile-dashboard-settlement__control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mobile-dashboard-settlement-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #e2dbfd;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 12px 22px rgba(99, 74, 195, 0.08);
}
.mobile-dashboard-settlement-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.mobile-dashboard-settlement-card__due {
    min-width: 110px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f5ff;
    text-align: right;
}
.mobile-dashboard-settlement-card__due span {
    display: block;
    color: #7f76a6;
    font-size: 0.74rem;
}
.mobile-dashboard-settlement-card__due strong {
    display: block;
    margin-top: 4px;
    color: #402f91;
    font-size: 1.1rem;
    font-weight: 800;
}
.mobile-dashboard-form-grid {
    display: grid;
    gap: 12px;
}
.mobile-dashboard-field {
    display: grid;
    gap: 8px;
}
.mobile-dashboard-field > span {
    color: #342b5f;
    font-size: 0.9rem;
    font-weight: 700;
}
.mobile-dashboard-field input[type="text"],
.mobile-dashboard-field input[type="file"] {
    width: 100%;
    min-width: 0;
    border: 1px solid #d8d0f7;
    border-radius: 14px;
    background: #fff;
    color: #2c2552;
}
.mobile-dashboard-field small {
    color: #716792;
    font-size: 0.8rem;
    line-height: 1.5;
}
.mobile-dashboard-slip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d8d0f7;
    background: #fff;
    color: #5a39d2;
    font-size: 0.82rem;
    font-weight: 700;
}
.mobile-dashboard-diff-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f3efff, #eef7ff);
    border: 1px solid #ddd5fb;
}
.mobile-dashboard-diff-card__label {
    color: #342b5f;
    font-size: 0.92rem;
    font-weight: 800;
}
.mobile-dashboard-diff-card__formula {
    margin-top: 6px;
    color: #7b729d;
    font-size: 0.78rem;
    line-height: 1.45;
}
.mobile-dashboard-diff-card__value {
    margin-top: 10px;
    color: #2f2657;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}
.mobile-dashboard-diff-card__value--danger {
    color: #ff2b39;
}
.mobile-dashboard-diff-card__value--positive {
    color: #5a39d2;
}
.mobile-dashboard-submit {
    margin-top: 14px;
}
.mobile-customer-page--expenses {
    gap: 14px;
}
.mobile-expense-hero {
    gap: 16px;
}
.mobile-expense-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-expense-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    font-weight: 700;
}
.mobile-expense-tab.is-active {
    background: #fff;
    color: #5634d4;
    box-shadow: 0 10px 20px rgba(41, 25, 104, 0.16);
}
.mobile-expense-section {
    padding: 16px;
}
.mobile-expense-summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.mobile-expense-summary-strip__item {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfbff 0%, #f6f2ff 100%);
    border: 1px solid #e2dbfd;
}
.mobile-expense-summary-strip__item span {
    display: block;
    color: #7f76a6;
    font-size: 0.8rem;
    font-weight: 700;
}
.mobile-expense-summary-strip__item strong {
    display: block;
    margin-top: 8px;
    color: #2f2657;
    font-size: 1.15rem;
    font-weight: 800;
}
.mobile-expense-form {
    gap: 14px;
}
.mobile-expense-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.mobile-expense-hint {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8f5ff;
    color: #6f6793;
    font-size: 0.85rem;
    line-height: 1.6;
}
.mobile-expense-lock-note {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #f6c7cf;
    border-radius: 14px;
    background: #fff4f6;
    color: #b42318;
    font-size: 0.86rem;
    line-height: 1.55;
}
.mobile-expense-item {
    gap: 12px;
}
.mobile-expense-item__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.mobile-expense-item__amount {
    color: #4f2fe1;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 900;
}
.mobile-expense-item__note {
    color: #6f6793;
    font-size: 0.84rem;
    line-height: 1.5;
}
.mobile-expense-saved-preview {
    display: grid;
    gap: 10px;
}
.mobile-expense-saved-preview__title {
    color: #342b5f;
    font-size: 0.92rem;
    font-weight: 700;
}
.mobile-expense-table-card {
    overflow: hidden;
}
.mobile-expense-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
}
.mobile-expense-table th {
    padding: 10px 12px;
    background: linear-gradient(180deg, #ece5ff, #dbceff);
    color: #4d338f;
    font-size: 0.84rem;
    text-align: left;
    border-bottom: none;
}
.mobile-expense-table td {
    padding: 12px;
    vertical-align: top;
    border-bottom: 1px solid #ece6ff;
    color: #31265a;
    background: rgba(255, 255, 255, 0.98);
}
.mobile-expense-table tbody tr:last-child td {
    border-bottom: none;
}
.mobile-expense-table__title {
    font-size: 0.92rem;
    font-weight: 800;
}
.mobile-expense-table__title-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: #2f2657;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.mobile-expense-table__title-btn:hover {
    color: #4f2fe1;
}
.mobile-expense-table__title + .mobile-expense-table__note {
    margin-top: 6px;
}
.mobile-expense-table__note {
    font-size: 0.84rem;
    line-height: 1.5;
    color: #746b98;
}
.mobile-expense-delete-form {
    margin-top: 10px;
}
.mobile-expense-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #ffd3da;
    border-radius: 10px;
    background: #fff5f7;
    color: #d92b43;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.mobile-expense-delete-btn:hover {
    background: #ffecef;
}
.mobile-expense-table__amount {
    width: 112px;
    text-align: right;
    color: #4f2fe1;
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}
.mobile-expense-table__total-row td {
    background: linear-gradient(180deg, #fbf8ff, #f2ecff);
    border-top: 1px solid #ddd5fb;
}
.mobile-expense-table__amount--total {
    color: #3f27aa;
}
.mobile-expense-breakdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 100px;
}
.mobile-expense-breakdown-overlay[hidden] {
    display: none;
}
.mobile-expense-breakdown-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 23, 53, 0.48);
}
.mobile-expense-breakdown-card {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    max-height: calc(100vh - 140px);
    overflow: hidden;
    border: 1px solid #ddd5fb;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 42px rgba(40, 24, 96, 0.24);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.mobile-expense-breakdown-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #ebe4ff;
}
.mobile-expense-breakdown-card__title {
    color: #2f2657;
    font-size: 1rem;
    font-weight: 800;
}
.mobile-expense-breakdown-card__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #f5f0ff;
    color: #6b49ef;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.mobile-expense-breakdown-list {
    overflow-y: auto;
    padding: 8px 18px 0;
}
.mobile-expense-breakdown-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ebe4ff;
}
.mobile-expense-breakdown-item:last-child {
    border-bottom: none;
}
.mobile-expense-breakdown-item__name {
    color: #2f2657;
    font-size: 0.92rem;
    font-weight: 800;
}
.mobile-expense-breakdown-item__sub {
    margin-top: 4px;
    color: #7b729d;
    font-size: 0.8rem;
}
.mobile-expense-breakdown-item__amount {
    color: #4f2fe1;
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}
.mobile-expense-breakdown-empty {
    padding: 18px 0 20px;
    color: #7b729d;
    font-size: 0.88rem;
    text-align: center;
}
.mobile-expense-breakdown-card__foot {
    padding: 14px 18px 18px;
    border-top: 1px solid #ebe4ff;
    background: #fff;
}
.mobile-expense-breakdown-card__btn {
    min-height: 44px;
}
.mobile-loan-history-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 14px;
}
.mobile-loan-history-image-link {
    display: block;
}
.mobile-loan-history-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #ddd5fb;
    box-shadow: 0 8px 18px rgba(104, 78, 198, 0.12);
}
.mobile-mini-table--history {
    margin-top: 12px;
}
.mobile-empty-state {
    padding: 16px 12px;
    text-align: center;
    color: #7b729f;
    font-size: 0.9rem;
}
.mobile-contract-search-form {
    display: grid;
    gap: 12px;
}
.mobile-contract-search-form label {
    color: #342b5f;
    font-size: 0.92rem;
    font-weight: 700;
}
.mobile-contract-search-form input {
    margin-top: 6px;
    width: 100%;
    min-width: 0;
    border: 1px solid #d9d0fb;
    border-radius: 14px;
    background: #fcfbff;
    color: #2d2558;
}
.mobile-contract-search-form input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    padding-right: 10px;
    overflow: hidden;
}
.mobile-contract-search-form__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}
.mobile-contract-search-form__actions button,
.mobile-contract-search-form__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
}
.mobile-contract-search-form__actions button {
    border: none;
    background: linear-gradient(90deg, #643df4, #4f2fe1);
    color: #fff;
    cursor: pointer;
}
.mobile-contract-search-form__actions a {
    border: 1px solid #d8d0f7;
    background: #fff;
    color: #5a39d2;
}
.mobile-contract-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-contract-report-grid--fixed-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-contract-report-card {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(103, 66, 244, 0.1), rgba(126, 97, 255, 0.16));
    border: 1px solid #ddd5fb;
}
.mobile-contract-report-grid--fixed-two .mobile-contract-report-card {
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-contract-report-card--soft {
    background: linear-gradient(135deg, rgba(236, 231, 255, 0.96), rgba(248, 245, 255, 0.96));
}
.mobile-contract-report-card__label {
    color: #7c73a2;
    font-size: 0.82rem;
    font-weight: 700;
}
.mobile-contract-report-card__count {
    margin-top: 6px;
    color: #2f2657;
    font-size: 1.12rem;
    font-weight: 800;
}
.mobile-contract-report-card__amount {
    margin-top: 6px;
    color: #5a39d2;
    font-size: 1.1rem;
    font-weight: 800;
}
.mobile-contract-report-list {
    display: grid;
    gap: 10px;
}
.mobile-contract-report-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #ddd5fb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 10px 22px rgba(106, 78, 204, 0.08);
}
.mobile-contract-report-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.mobile-contract-report-item__name {
    color: #2d2558;
    font-size: 0.98rem;
    font-weight: 800;
}
.mobile-contract-report-item__sub {
    margin-top: 4px;
    color: #7b739f;
    font-size: 0.8rem;
}
@media (max-width: 430px) {
    .worksheet-modal-overlay {
        padding: 12px 0 88px;
    }
    .worksheet-modal-card {
        width: 100%;
    }
    .mobile-form-submit-wrap {
        bottom: 96px;
    }
}
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(430px, 100%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 6px 10px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #ddd7f7;
    box-shadow: 0 -6px 18px rgba(88, 68, 183, 0.08);
}
.bottom-nav__item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #292243;
    font-size: 0.7rem;
    padding: 6px 2px 0;
}
.bottom-nav__item.is-active {
    color: var(--mobile-purple);
    font-weight: 800;
}
.bottom-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 60px;
    height: 3px;
    border-radius: 999px;
    background: var(--mobile-purple);
}
.bottom-nav__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.line-auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(123, 97, 255, 0.22), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(91, 48, 221, 0.24), transparent 22%),
        linear-gradient(180deg, #f5f2ff 0%, #ede9ff 100%);
}

.line-auth-page {
    position: relative;
    min-height: 100vh;
    padding: 28px 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.line-auth-page__glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    filter: blur(48px);
    opacity: 0.55;
    pointer-events: none;
}

.line-auth-page__glow--left {
    left: -80px;
    top: 40px;
    background: rgba(125, 95, 255, 0.35);
}

.line-auth-page__glow--right {
    right: -100px;
    bottom: 60px;
    background: rgba(99, 61, 244, 0.28);
}

.line-auth-card {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    padding: 26px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(135, 114, 241, 0.2);
    box-shadow: 0 28px 60px rgba(83, 74, 155, 0.14);
    backdrop-filter: blur(12px);
}

.line-auth-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5a30dd, #7a5fff);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
}

.line-auth-card__title {
    margin: 16px 0 8px;
    color: #1b2040;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.08;
    font-weight: 800;
}

.line-auth-card__desc {
    margin: 0;
    color: #72769a;
    font-size: 1rem;
    line-height: 1.7;
}

.line-auth-panel {
    margin-top: 22px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(101, 63, 245, 0.06) 0%, rgba(255, 255, 255, 0.86) 100%);
    border: 1px solid #e2dcff;
}

.line-auth-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.line-auth-panel__eyebrow {
    color: #7a7ead;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.line-auth-panel__title {
    margin: 6px 0 0;
    color: #1b2040;
    font-size: 1.2rem;
    font-weight: 800;
}

.line-auth-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.line-auth-pill.is-ready {
    background: #e9fff0;
    color: #0d8f5f;
}

.line-auth-pill.is-missing {
    background: #fff1f2;
    color: #c2410c;
}

.line-auth-info-card {
    padding: 16px 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8eaf8;
}

.line-auth-info-card__title {
    color: #1b2040;
    font-size: 1rem;
    font-weight: 800;
}

.line-auth-info-card__desc {
    margin-top: 8px;
    color: #72769a;
    line-height: 1.65;
}

.line-auth-status {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f5f2ff;
    color: #5a30dd;
    font-weight: 700;
    text-align: center;
}

.line-auth-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.line-auth-back-btn {
    min-width: 200px;
}

.line-auth-swal {
    border-radius: 24px !important;
}
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .app-shell { padding: 12px; }
    .topbar { padding: 16px; flex-direction: column; }
    .tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tabs a, .btn { width: 100%; }
    table { min-width: 680px; }
}
@media (max-width: 430px) {
    .line-auth-card {
        padding: 20px 18px;
        border-radius: 24px;
    }

    .line-auth-panel__head,
    .line-auth-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .line-auth-back-btn {
        width: 100%;
    }

    .admin-pending-card__grid {
        grid-template-columns: 1fr;
    }

    .employee-shell {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .mobile-summary-big { font-size: 2.7rem; }
    .mobile-summary-percent-value { font-size: 2rem; }
    .mobile-toolbar__action {
        min-width: 88px;
        font-size: 0.9rem;
    }
    .mobile-toolbar__title {
        font-size: 0.96rem;
    }
    .mobile-customer-stats,
    .mobile-customer-hero-grid,
    .mobile-customer-item__grid,
    .mobile-customer-item__actions,
    .mobile-customer-search,
    .mobile-contract-report-grid,
    .mobile-contract-search-form__actions {
        grid-template-columns: 1fr;
    }
    .mobile-contract-search-hero-stats,
    .mobile-customer-hero-stats-fixed,
    .mobile-contract-report-grid--fixed-two,
    .mobile-customer-page--customers .mobile-customer-item__grid--fixed-two,
    .mobile-customer-hero-grid--detail,
    .mobile-customer-item__grid--detail,
    .mobile-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-customer-page--customers .mobile-customer-item__actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .mobile-current-contract-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-current-contract-card__summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mobile-current-contract-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-current-contract-search button,
    .mobile-current-contract-search__clear {
        min-height: 40px;
        padding: 0 10px;
        font-size: 0.82rem;
    }
    .mobile-current-contract-card__summary {
        padding: 13px;
    }
    .mobile-current-contract-card__stat,
    .mobile-current-contract-card__mini {
        padding: 10px;
    }
    .mobile-current-contract-card__stat strong {
        font-size: 0.94rem;
    }
    .mobile-current-contract-card__mini strong {
        font-size: 0.88rem;
    }
    .mobile-customer-section__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .mobile-loan-history-card__head,
    .mobile-customer-action-group,
    .mobile-customer-hero__head {
        align-items: stretch;
        flex-direction: column;
    }
    .mobile-current-contract-card__badges {
        position: absolute;
        top: 0;
        right: 0;
        justify-content: flex-end;
    }
    .mobile-loan-history-card__badges {
        justify-content: flex-start;
    }
    .mobile-dashboard-hero__top {
        flex-direction: column;
    }
    .mobile-dashboard-main {
        grid-template-columns: 1fr;
    }
    .mobile-dashboard-percent {
        text-align: left;
    }
    .mobile-dashboard-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mobile-dashboard-hero-v2__head {
        flex-direction: column;
    }
    .mobile-dashboard-highlight-grid,
    .mobile-dashboard-board__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-dashboard-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mobile-dashboard-odometer-grid,
    .mobile-expense-summary-strip,
    .mobile-expense-dual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-dashboard-settlement-card__head {
        flex-direction: column;
    }
    .mobile-dashboard-settlement-card__due {
        width: 100%;
        text-align: left;
    }
    .mobile-customer-page--detail .mobile-loan-history-card__head {
        flex-direction: column;
        gap: 10px;
    }
    .mobile-customer-hero__map-btn {
        width: 100%;
    }
}