* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        Tahoma,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top right,
            #182848 0%,
            #0b1020 42%,
            #060914 100%
        );

    color: #f4f7fb;
    direction: ltr;
}

button,
input,
select {
    font-family: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.app-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 22px 15px 50px;
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px;

    margin-bottom: 18px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(18,25,45,.82);

    backdrop-filter: blur(18px);

    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);
}

.app-logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.app-subtitle {
    margin-top: 7px;

    color: #9ca9c4;

    font-size: 13px;
}

/* --------------------------------------------------
   CARD
-------------------------------------------------- */

.card {
    margin-bottom: 18px;

    padding: 20px;

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,.07);

    background: rgba(16,23,41,.86);

    box-shadow:
        0 15px 50px rgba(0,0,0,.18);
}

.section-title {
    margin-bottom: 18px;

    font-size: 17px;

    font-weight: 800;
}

/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */

.btn {
    border: 0;

    border-radius: 12px;

    padding: 13px 20px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .15s ease,
        opacity .15s ease,
        box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    cursor: not-allowed;

    opacity: .45;

    transform: none;
}

.btn-primary {
    background: #2d8cff;

    color: white;

    box-shadow:
        0 8px 25px rgba(45,140,255,.22);
}

.btn-secondary {
    background: #24314d;

    color: white;
}

.btn-warning {
    background: #d99522;

    color: #fff;

    margin-left: 8px;
}

.btn-success {
    background: #19a974;

    color: white;
}

/* --------------------------------------------------
   STATUS
-------------------------------------------------- */

.status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;
}

.status::before {
    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;
}

.status.disconnected {
    background: rgba(255,255,255,.06);

    color: #aab5ca;
}

.status.disconnected::before {
    background: #7c879d;
}

.status.connected {
    background: rgba(25,169,116,.12);

    color: #46d29e;
}

.status.connected::before {
    background: #24c98b;

    box-shadow:
        0 0 10px rgba(36,201,139,.7);
}

.wallet-address {
    margin-top: 12px;

    padding: 12px;

    border-radius: 10px;

    background: rgba(0,0,0,.18);

    color: #aebbd1;

    font-family: monospace;

    font-size: 12px;

    direction: ltr;

    text-align: left;

    overflow-wrap: anywhere;
}

/* --------------------------------------------------
   STATISTICS
-------------------------------------------------- */

.scan-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 18px;
}

.stat-box {
    padding: 18px;

    border-radius: 14px;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.05);

    text-align: center;
}

.stat-label {
    color: #8996ae;

    font-size: 12px;
}

.stat-value {
    margin-top: 8px;

    font-size: 27px;

    font-weight: 800;
}

/* --------------------------------------------------
   ASSETS
-------------------------------------------------- */

.asset-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.asset-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px;

    border-radius: 14px;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.055);
}

.asset-info {
    min-width: 0;
}

.asset-name {
    font-weight: 700;

    font-size: 14px;
}

.asset-type {
    margin-top: 5px;

    color: #8492aa;

    font-size: 11px;
}

.asset-address {
    margin-top: 7px;

    color: #6f7e98;

    font-family: monospace;

    font-size: 10px;

    direction: ltr;

    text-align: left;

    overflow-wrap: anywhere;
}

.asset-status {
    flex-shrink: 0;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 11px;
}

.asset-status.ready {
    background: rgba(25,169,116,.12);

    color: #43d39e;
}

.asset-status.warning {
    background: rgba(217,149,34,.12);

    color: #e6ac45;
}

.asset-status.error {
    background: rgba(220,70,70,.12);

    color: #ff7777;
}

/* --------------------------------------------------
   BENEFICIARY
-------------------------------------------------- */

.beneficiary-box {
    padding: 15px;

    border-radius: 13px;

    background: rgba(45,140,255,.06);

    border: 1px solid rgba(45,140,255,.15);

    margin-bottom: 14px;
}

.label {
    color: #8290a8;

    font-size: 11px;

    margin-bottom: 7px;
}

.address {
    direction: ltr;

    text-align: left;

    font-family: monospace;

    font-size: 12px;

    word-break: break-all;

    color: #80baff;
}

.address-input {
    width: 100%;

    box-sizing: border-box;

    direction: ltr;

    text-align: left;

    font-family: monospace;

    font-size: 12px;

    color: #80baff;

    background: rgba(45,140,255,.08);

    border: 1px solid rgba(45,140,255,.25);

    border-radius: 8px;

    padding: 9px 10px;

    margin-top: 4px;
}

.address-input:focus {
    outline: none;

    border-color: rgba(45,140,255,.6);
}

.field-error {
    margin-top: 6px;

    font-size: 12px;

    color: #ff6b6b;
}

.warning-box {
    margin-bottom: 18px;

    padding: 15px;

    border-radius: 12px;

    background: rgba(217,149,34,.07);

    border: 1px solid rgba(217,149,34,.14);

    color: #c4cce0;

    font-size: 12px;

    line-height: 1.9;
}

.warning-box strong {
    color: #e8ae4e;
}

.warning-box p {
    margin:
        7px 0 0;
}

/* --------------------------------------------------
   LOG
-------------------------------------------------- */

.operation-log {
    display: flex;

    flex-direction: column;

    gap: 7px;

    max-height: 260px;

    overflow-y: auto;
}

.log-item {
    padding: 9px 11px;

    border-radius: 9px;

    background: rgba(0,0,0,.18);

    color: #9ba8bf;

    font-size: 11px;

    line-height: 1.7;

    direction: ltr;
}

.log-item.success {
    color: #46d29e;
}

.log-item.error {
    color: #ff7777;
}

.log-item.warning {
    color: #e7ad4b;
}

/* --------------------------------------------------
   EMPTY
-------------------------------------------------- */

.empty-state {
    padding: 30px 15px;

    text-align: center;

    color: #68758d;

    font-size: 13px;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.app-footer {
    text-align: center;

    color: #5d6a82;

    font-size: 11px;

    padding-top: 15px;
}

/* --------------------------------------------------
   LOADING
-------------------------------------------------- */

.loading {
    position: relative;

    pointer-events: none;

    opacity: .65;
}

.loading::after {
    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 18px;

    height: 18px;

    margin:
        -9px 0 0 -9px;

    border:
        2px solid rgba(255,255,255,.2);

    border-top-color:
        #fff;

    border-radius: 50%;

    animation:
        spin .7s linear infinite;
}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}

/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 700px) {

    .app-container {
        padding:
            10px
            10px
            35px;
    }

    .app-header {
        flex-direction: column;

        align-items: stretch;
    }

    .app-header .btn {
        width: 100%;
    }

    .scan-grid {
        grid-template-columns:
            1fr;
    }

    .asset-item {
        flex-direction: column;

        align-items: stretch;
    }

    .asset-status {
        align-self: flex-start;
    }

    .btn {
        width: 100%;

        margin:
            5px
            0;
    }

}

/*
--------------------------------------------------------------------------
Auction results (gift cards shown after a batch is confirmed on-chain)
--------------------------------------------------------------------------
*/

.auction-results {
    display: none;

    margin-bottom: 16px;

    padding: 12px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);
}

.auction-results-heading {
    font-weight: 600;

    margin-bottom: 10px;
}

.auction-result-card {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 10px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.06);

    margin-bottom: 10px;
}

.auction-result-image {
    width: 72px;

    height: 72px;

    object-fit: cover;

    border-radius: 8px;

    flex-shrink: 0;
}

.auction-result-info {
    flex: 1;

    min-width: 0;
}

.auction-result-name {
    font-weight: 600;
}

.auction-result-description {
    font-size: 0.85em;

    opacity: 0.8;

    margin-top: 2px;
}

.auction-result-address {
    font-size: 0.75em;

    opacity: 0.6;

    word-break: break-all;

    margin-top: 4px;
}

.auction-result-link {
    display: inline-block;

    margin-top: 6px;

    font-size: 0.85em;
}