.utp-shell {
    color: #17202a;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    max-width: 1180px;
    padding: 24px;
}

.utp-toolbar {
    align-items: center;
    border-bottom: 1px solid #d7dee8;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.utp-toolbar h1,
.utp-card h2,
.utp-card h3 {
    letter-spacing: 0;
    margin: 0;
}

.utp-toolbar p,
.utp-card p {
    color: #596675;
    margin: 4px 0 0;
}

.utp-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.4fr);
}

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

.utp-admin-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(360px, 1.3fr) minmax(280px, 0.8fr);
}

.utp-admin-layout .utp-card:last-child {
    grid-column: 1 / -1;
}

.utp-card {
    background: #ffffff;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    padding: 16px;
}

.utp-card-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.utp-wallet {
    align-self: start;
}

.utp-metrics {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0;
}

.utp-metrics span {
    background: #f4f7fb;
    border: 1px solid #e0e7f0;
    border-radius: 6px;
    color: #596675;
    min-height: 56px;
    padding: 10px;
}

.utp-metrics b {
    color: #17202a;
    display: block;
    font-size: 20px;
    line-height: 1.1;
}

.utp-note,
.utp-alert,
.utp-empty {
    background: #fff7e6;
    border: 1px solid #f3d19e;
    border-radius: 6px;
    color: #5b3b05;
    margin: 12px 0;
    padding: 10px;
}

.utp-alert {
    background: #feecef;
    border-color: #f4b5c1;
    color: #7a1f2b;
}

.utp-list {
    display: grid;
    gap: 10px;
}

.utp-row,
.utp-campaign {
    border: 1px solid #e0e7f0;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.utp-row {
    align-items: center;
    grid-template-columns: 1fr auto;
}

.utp-row small {
    color: #6b7280;
    grid-column: 1 / -1;
}

.utp-campaign {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.utp-campaign .utp-metrics,
.utp-campaign .utp-actions {
    grid-column: 1 / -1;
}

.utp-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 28px;
    min-width: 118px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.utp-status-active {
    background: #e7f8ef;
    color: #11663a;
}

.utp-status-pending_review,
.utp-status-pending_payment {
    background: #eef3ff;
    color: #244a9b;
}

.utp-status-paused {
    background: #fff7e6;
    color: #8a5600;
}

.utp-status-rejected,
.utp-status-refunded {
    background: #feecef;
    color: #8a2130;
}

.utp-status-completed {
    background: #edf7f6;
    color: #0f6a63;
}

.utp-promoted-label {
    background: #17202a;
    border-radius: 4px;
    color: #ffffff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    padding: 5px 7px;
    text-transform: uppercase;
}

.utp-button,
.utp-icon-button {
    align-items: center;
    background: #0f6a63;
    border: 1px solid #0f6a63;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
}

.utp-button-secondary {
    background: #ffffff;
    color: #17202a;
    border-color: #b8c3d2;
}

.utp-button-danger {
    background: #8a2130;
    border-color: #8a2130;
}

.utp-icon-button {
    min-width: 38px;
    padding: 0;
}

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

.utp-wizard {
    margin-top: 16px;
}

.utp-wizard label,
.utp-card label {
    color: #344153;
    display: grid;
    font-weight: 700;
    gap: 6px;
    margin-bottom: 12px;
}

.utp-wizard input,
.utp-wizard select,
.utp-wizard textarea,
.utp-card input,
.utp-card select,
.utp-card textarea {
    border: 1px solid #b8c3d2;
    border-radius: 6px;
    color: #17202a;
    min-height: 40px;
    padding: 8px 10px;
    width: 100%;
}

.utp-wizard textarea,
.utp-card textarea {
    min-height: 84px;
    resize: vertical;
}

.utp-wizard fieldset {
    border: 1px solid #d7dee8;
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 10px;
}

.utp-check {
    align-items: center;
    display: inline-flex !important;
    font-weight: 600 !important;
    gap: 8px !important;
    margin-right: 12px;
}

.utp-check input {
    min-height: 0;
    width: auto;
}

@media (max-width: 860px) {
    .utp-shell {
        padding: 16px;
    }

    .utp-toolbar,
    .utp-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .utp-grid,
    .utp-grid-two,
    .utp-admin-layout {
        grid-template-columns: 1fr;
    }

    .utp-metrics {
        grid-template-columns: 1fr;
    }
}