*,
*::before,
*::after {
    box-sizing: border-box;
}

.plc-et-app {
    --et-bg: #0b1c28;
    --et-card: #122f42;
    --et-card-2: #173b50;
    --et-line: rgba(255, 255, 255, .10);
    --et-text: #f4f8fb;
    --et-muted: #a9bdca;
    --et-blue: #357fca;
    --et-green: #2ecc8d;
    --et-red: #ff6c75;
    --et-yellow: #f5c761;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 12px;
    color: var(--et-text);
    background: linear-gradient(180deg, #17374a, #0b1d29);
    border-radius: 24px;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.plc-et-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--et-line);
    border-radius: 16px;
    background: rgba(7, 24, 35, .70);
}

.plc-et-header span,
.plc-et-title small,
.plc-et-field > small,
.plc-et-address-box span {
    display: block;
    color: var(--et-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plc-et-header strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}

.plc-et-header a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    background: var(--et-blue);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
}

.plc-et-card {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid var(--et-line);
    border-radius: 18px;
    background: rgba(15, 45, 62, .86);
}

.plc-et-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.plc-et-title h2 {
    margin: 3px 0 0;
    color: var(--et-text);
    font-size: 22px;
}

.plc-et-title > span {
    flex: 0 0 auto;
    padding: 8px 10px;
    color: #10221a;
    background: var(--et-green);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.plc-et-form {
    display: grid;
    gap: 13px;
}

.plc-et-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--et-text);
    font-size: 12px;
    font-weight: 850;
}

.plc-et-field label small {
    color: var(--et-muted);
    font-weight: 600;
}

.plc-et-field input,
.plc-et-field select,
.plc-et-field textarea,
.plc-et-settings input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--et-line);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--et-text);
    background: #071924;
    font: inherit;
    outline: none;
}

.plc-et-field input:focus,
.plc-et-field select:focus,
.plc-et-field textarea:focus {
    border-color: rgba(53, 127, 202, .9);
    box-shadow: 0 0 0 3px rgba(53, 127, 202, .15);
}

.plc-et-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, .75fr);
    gap: 8px;
}

.plc-et-amount-row > div {
    display: grid;
    align-content: center;
    padding: 8px 12px;
    border: 1px solid var(--et-line);
    border-radius: 12px;
    background: #071924;
}

.plc-et-amount-row strong {
    margin-top: 3px;
    color: var(--et-green);
    font-size: 18px;
}

.plc-et-quick {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
}

.plc-et-quick button,
.plc-et-address-box button {
    min-height: 40px;
    border: 1px solid var(--et-line);
    border-radius: 10px;
    color: var(--et-text);
    background: var(--et-card-2);
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.plc-et-address-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(245, 199, 97, .30);
    border-radius: 14px;
    background: rgba(245, 199, 97, .08);
}

.plc-et-address-box strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.plc-et-warning,
.plc-et-empty {
    padding: 11px 12px;
    border-radius: 12px;
    color: #f8df9e;
    background: rgba(245, 199, 97, .10);
    font-size: 12px;
    line-height: 1.5;
}

.plc-et-submit {
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2f71b6, #438fd6);
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.plc-et-notice {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 13px;
    font-weight: 700;
}

.plc-et-notice.is-success {
    color: #c9ffe9;
    background: rgba(46, 204, 141, .16);
}

.plc-et-notice.is-error {
    color: #ffd4d7;
    background: rgba(255, 108, 117, .16);
}

.plc-et-request-list {
    display: grid;
    gap: 8px;
}

.plc-et-request-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--et-line);
    border-radius: 13px;
    background: #0a2331;
}

.plc-et-request-list article span,
.plc-et-request-list article small {
    display: block;
    margin-top: 3px;
    color: var(--et-muted);
    font-size: 10px;
}

.status-pending,
.status-approved,
.status-rejected {
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 10px;
    white-space: nowrap;
}

.status-pending {
    color: #251d05;
    background: var(--et-yellow);
}

.status-approved {
    color: #062117;
    background: var(--et-green);
}

.status-rejected {
    color: #fff;
    background: var(--et-red);
}

.plc-et-login {
    padding: 18px;
    border-radius: 14px;
    background: #112f42;
    color: #fff;
}

.plc-et-login a {
    color: #7abaff;
}

/* Admin */
.plc-et-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.plc-et-admin-summary > div {
    padding: 14px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
}

.plc-et-admin-summary span,
.plc-et-admin-grid span {
    display: block;
    color: #646970;
    font-size: 11px;
    text-transform: uppercase;
}

.plc-et-admin-summary strong,
.plc-et-admin-grid strong {
    display: block;
    margin-top: 5px;
}

.plc-et-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.plc-et-filters a {
    padding: 7px 12px;
    border-radius: 999px;
    background: #f0f0f1;
    text-decoration: none;
}

.plc-et-filters a.is-active {
    color: #fff;
    background: #2271b1;
}

.plc-et-admin-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.plc-et-admin-list article {
    padding: 15px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
}

.plc-et-admin-list article > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.plc-et-admin-list article > header span {
    display: block;
    margin-top: 4px;
    color: #646970;
}

.plc-et-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.plc-et-admin-grid small,
.plc-et-admin-grid a {
    display: block;
    margin-top: 5px;
}

.plc-et-address-small,
.plc-et-txid {
    overflow-wrap: anywhere;
    font-size: 11px;
}

.plc-et-review-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 8px;
    margin-top: 12px;
}

.plc-et-review-form input {
    min-height: 38px;
}

.plc-et-settings {
    display: grid;
    gap: 14px;
    max-width: 980px;
    margin-top: 18px;
}

.plc-et-settings section {
    padding: 16px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
}

.plc-et-settings label {
    display: block;
    margin-top: 10px;
}

.plc-et-settings input {
    color: #1d2327;
    background: #fff;
}

.plc-et-network-setting {
    display: grid;
    grid-template-columns: 90px minmax(180px, .7fr) minmax(260px, 1.4fr) 130px;
    gap: 10px;
    align-items: end;
    padding: 12px 0;
    border-top: 1px solid #eee;
}

.plc-et-network-enabled {
    display: flex !important;
    align-items: center;
    gap: 7px;
}

.plc-et-network-enabled input {
    width: auto;
    min-height: 0;
    margin: 0;
}

@media (max-width: 720px) {
    .plc-et-app {
        padding: 8px;
        border-radius: 0;
    }

    .plc-et-title {
        flex-direction: column;
    }

    .plc-et-amount-row {
        grid-template-columns: 1fr;
    }

    .plc-et-quick {
        grid-template-columns: repeat(3, 1fr);
    }

    .plc-et-request-list article {
        grid-template-columns: 1fr auto;
    }

    .plc-et-request-list article > div:nth-child(2) {
        grid-column: 1;
    }

    .plc-et-request-list article > b {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .plc-et-admin-summary,
    .plc-et-admin-grid {
        grid-template-columns: 1fr 1fr;
    }

    .plc-et-review-form {
        grid-template-columns: 1fr;
    }

    .plc-et-network-setting {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .plc-et-admin-summary,
    .plc-et-admin-grid {
        grid-template-columns: 1fr;
    }

    .plc-et-quick {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* v1.1.0 approved mobile layout */
.plc-et-app {
    width: min(100%, 560px);
    padding-top: 10px;
}

.plc-et-topbar {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.plc-et-back,
.plc-et-profile {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--et-line);
    border-radius: 15px;
    color: var(--et-text);
    background: rgba(7, 24, 35, .78);
    text-decoration: none;
}

.plc-et-back {
    padding: 0 0 5px;
    font: inherit;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
}

.plc-et-site-logo {
    min-width: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 6px 12px;
    border: 1px solid var(--et-line);
    border-radius: 15px;
    color: var(--et-text);
    background: rgba(7, 24, 35, .78);
    text-decoration: none;
    overflow: hidden;
}

.plc-et-site-logo-image {
    display: block;
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.plc-et-logo-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    color: #071f16;
    background: var(--et-green);
    font-size: 11px;
    font-weight: 950;
}

.plc-et-site-logo strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.plc-et-profile {
    overflow: hidden;
}

.plc-et-profile-avatar {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.plc-et-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 9px;
    padding: 8px 3px 9px;
}

.plc-et-page-heading h1 {
    margin: 0;
    color: var(--et-text);
    font-size: 23px;
    line-height: 1;
}

.plc-et-page-heading span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: #092217;
    background: var(--et-green);
    font-size: 10px;
    font-weight: 950;
}

.plc-et-balancebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.plc-et-balancebar > div,
.plc-et-balancebar > a {
    min-height: 62px;
    display: grid;
    align-content: center;
    padding: 10px 13px;
    border: 1px solid var(--et-line);
    border-radius: 15px;
    background: rgba(7, 24, 35, .76);
}

.plc-et-balancebar > div span {
    color: var(--et-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.plc-et-balancebar > div strong {
    margin-top: 4px;
    font-size: 20px;
}

.plc-et-balancebar > a {
    place-items: center;
    color: #fff;
    background: var(--et-blue);
    text-decoration: none;
    font-weight: 900;
}

.plc-et-card {
    border-radius: 16px;
}

.plc-et-history {
    margin-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (max-width: 420px) {
    .plc-et-topbar {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        gap: 7px;
    }

    .plc-et-back,
    .plc-et-profile {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    .plc-et-site-logo {
        height: 48px;
        padding-inline: 8px;
        border-radius: 13px;
    }

    .plc-et-profile-avatar {
        width: 38px;
        height: 38px;
    }

    .plc-et-page-heading h1 {
        font-size: 21px;
    }

    .plc-et-page-heading span {
        padding-inline: 8px;
        font-size: 9px;
    }

    .plc-et-balancebar {
        grid-template-columns: minmax(0, 1fr) 78px;
    }
}