*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#0f172a;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.container{
    width:450px;
    background:#1e293b;
    padding:30px;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
}

h1{
    text-align:center;
    margin-bottom:25px;
}

button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:#0474a0;
    color:white;
    font-size:16px;
    cursor:pointer;
    margin-top:10px;
}

button:hover{
    background:#0474a0;
}

.card{
    background:#334155;
    padding:20px;
    border-radius:10px;
    margin-top:20px;
}

.card h3{
    margin-bottom:10px;
}

input{
    width:100%;
    padding:10px;
    margin-top:10px;
    border:none;
    border-radius:8px;
    outline:none;
}

.transaction-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.transaction-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    background:#1e293b;
    border-radius:8px;
}

.transaction-item div{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.transaction-details{
    overflow-wrap:anywhere;
}

.transaction-item strong{
    color:#7dd3fc;
}

.transaction-item small,
.empty-state{
    color:#cbd5e1;
    font-size:12px;
}

.transaction-item small span{
    color:#94a3b8;
    font-weight:bold;
}

.remove-transaction{
    width:auto;
    margin:0;
    padding:8px 10px;
    font-size:12px;
    background:#b91c1c;
    flex-shrink:0;
}

.remove-transaction:hover{
    background:#991b1b;
}

.mine-button{ background:#7c3aed; }
.mine-button:hover{ background:#6d28d9; }
.mine-button:disabled{ background:#64748b; cursor:not-allowed; }
.mining-status{ color:#c4b5fd; margin:12px 0; font-size:14px; }
.mining-details{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px; }
.mining-details span{ display:flex; flex-direction:column; gap:3px; color:#cbd5e1; }
.mining-details strong{ color:#f8fafc; overflow-wrap:anywhere; }
.mining-details .hash-row{ grid-column:1 / -1; }
.mining-animation{ display:flex; justify-content:center; gap:7px; margin:14px 0 5px; }
.mining-animation span{ width:9px; height:9px; border-radius:50%; background:#a78bfa; animation:mining-pulse 1s infinite alternate; }
.mining-animation span:nth-child(2){ animation-delay:.2s; }.mining-animation span:nth-child(3){ animation-delay:.4s; }
.mining-success{ margin-top:14px; padding:12px; border-radius:8px; background:#14532d; display:flex; flex-direction:column; gap:5px; font-size:13px; overflow-wrap:anywhere; }
@keyframes mining-pulse{ from{ opacity:.35; transform:translateY(0); } to{ opacity:1; transform:translateY(-5px); } }

/* ─── Network Selector ────────────────────────────────────────────────────── */
.network-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
}

.network-label{
    font-size:12px;
    color:#94a3b8;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.network-toggle{
    display:flex;
    background:#0f172a;
    border-radius:8px;
    padding:3px;
    gap:3px;
}

.net-btn{
    width:auto;
    margin:0;
    padding:6px 14px;
    font-size:13px;
    border-radius:6px;
    background:transparent;
    color:#94a3b8;
    cursor:pointer;
    transition:all .2s ease;
    border:1px solid transparent;
}

.net-btn:hover{
    background:#1e293b;
    color:#e2e8f0;
}

.net-btn--active{
    background:#1e40af;
    color:#fff;
    border-color:#3b82f6;
    box-shadow:0 0 8px rgba(59,130,246,.35);
}

.net-btn--active:hover{
    background:#1e40af;
}

.net-btn--sepolia-active{
    background:#7c3aed;
    color:#fff;
    border-color:#a78bfa;
    box-shadow:0 0 8px rgba(167,139,250,.35);
}

.net-btn--sepolia-active:hover{
    background:#7c3aed;
}

.network-badge{
    font-size:11px;
    font-weight:700;
    padding:3px 10px;
    border-radius:999px;
    letter-spacing:.04em;
}

.network-badge--hardhat{
    background:rgba(59,130,246,.15);
    color:#60a5fa;
    border:1px solid rgba(59,130,246,.3);
}

.network-badge--sepolia{
    background:rgba(167,139,250,.15);
    color:#c4b5fd;
    border:1px solid rgba(167,139,250,.3);
}