:root {
    --tl-bg: #fbf6f7;
    --tl-card: #ffffff;
    --tl-line: #f0d7dd;
    --tl-shadow: 0 14px 30px rgba(60, 20, 35, .08);
    --tl-text: #2a1b22;
    --tl-muted: #7a5a66;

    --tl-pink: #f2b8c7;
    --tl-gold: #d6b06a;

    --ok-bg: rgba(104, 216, 155, .18);
    --ok-bd: rgba(104, 216, 155, .45);

    --bad-bg: rgba(245, 111, 132, .15);
    --bad-bd: rgba(245, 111, 132, .45);
}

.page {
    max-width: 1100px;
    margin: 22px auto;
    padding: 0 16px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.page-title {
    margin: 0;
    font-size: 28px;
    letter-spacing: -.2px;
    color: var(--tl-text);
}

.page-sub {
    margin: 6px 0 0;
    color: var(--tl-muted);
    font-weight: 600;
}

.card {
    background: var(--tl-card);
    border: 1px solid var(--tl-line);
    border-radius: 16px;
    box-shadow: var(--tl-shadow);
    overflow: hidden;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tl-line);
    background: linear-gradient(90deg, rgba(242, 184, 199, .18), rgba(214, 176, 106, .10));
}

.top-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pill {
    font-size: 12px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--tl-line);
    background: rgba(255, 255, 255, .85);
    color: var(--tl-text);
}

.muted {
    color: var(--tl-muted);
    font-weight: 700;
}

.search {
    width: 360px;
    max-width: 60vw;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--tl-line);
    background: rgba(255, 255, 255, .9);
    outline: none;
    font-weight: 700;
    color: var(--tl-text);
}

.search:focus {
    box-shadow: 0 0 0 4px rgba(242, 184, 199, .22);
    border-color: rgba(242, 184, 199, .55);
}

.table-wrap {
    overflow: auto;
}

.tul-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.tul-table thead th {
    text-align: left;
    font-size: 12px;
    letter-spacing: .35px;
    text-transform: uppercase;
    padding: 12px 14px;
    color: var(--tl-muted);
    background: rgba(251, 246, 247, .7);
    border-bottom: 1px solid var(--tl-line);
    white-space: nowrap;
}

.tul-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(240, 215, 221, .65);
    color: var(--tl-text);
    font-weight: 700;
    vertical-align: middle;
}

.tul-table tbody tr:nth-child(even) {
    background: rgba(251, 246, 247, .55);
}

.tul-table tbody tr:hover {
    background: rgba(242, 184, 199, .16);
}

.th-actions {
    text-align: right;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--tl-line);
}

.badge.success {
    background: var(--ok-bg);
    border-color: var(--ok-bd);
    color: #1d5a39;
}

.badge.danger {
    background: var(--bad-bg);
    border-color: var(--bad-bd);
    color: #7a1b2a;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--tl-line);
    background: rgba(255, 255, 255, .9);
    color: var(--tl-text);
    text-decoration: none;
    font-weight: 900;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease;
}

.btn:hover {
    background: rgba(242, 184, 199, .22);
    transform: translateY(-1px);
}

.btn.primary {
    background: linear-gradient(90deg, rgba(242, 184, 199, .85), rgba(214, 176, 106, .35));
    border-color: rgba(240, 215, 221, .9);
}

.btn.sm {
    padding: 8px 12px;
    font-size: 13px;
}

.btn.danger {
    background: rgba(245, 111, 132, .10);
    border-color: rgba(245, 111, 132, .35);
    color: #7a1b2a;
}

.btn.danger:hover {
    background: rgba(245, 111, 132, .16);
}

.empty {
    text-align: center;
    padding: 22px 14px !important;
    color: var(--tl-muted) !important;
    font-weight: 800 !important;
}

.alert {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid var(--tl-line);
    margin: 12px 0;
    font-weight: 800;
}

.alert.ok {
    background: var(--ok-bg);
    border-color: var(--ok-bd);
    color: #1d5a39;
}

.alert.err {
    background: var(--bad-bg);
    border-color: var(--bad-bd);
    color: #7a1b2a;
}

@media (max-width: 720px) {
    .page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .search {
        width: 100%;
        max-width: 100%;
    }
}