html, body{
    max-width:100%;
    overflow-x:hidden;
}

/* Shared copy-to-clipboard icon (see js/api.js's copyIconHTML) - used
   anywhere an address is displayed so copying it is an obvious,
   dedicated action instead of a silent side-effect of clicking
   something else. */
.copy-icon{
    background:rgba(15,157,88,0.08);
    border:1px solid rgba(15,157,88,0.25);
    color:#0d2818;
    border-radius:6px;
    padding:2px 7px;
    font-size:12px;
    line-height:1.6;
    cursor:pointer;
    margin-left:6px;
    vertical-align:middle;
}
.copy-icon:hover{
    background:rgba(15,157,88,0.18);
}
.copy-icon.copy-icon-done{
    background:rgba(15,157,88,0.2);
    border-color:#0f9d58;
    color:#0f9d58;
}

/* Green background + white/blue mix - a deep green gradient backdrop
   (theme.css's --cc-bg-* tokens) with white translucent cards and a
   blue primary accent (--cc-accent-1/2) floating on top, replacing
   the earlier all-white body this file used briefly. */
body{
    background:
        radial-gradient(1100px 650px at 12% -8%, rgba(59,130,246,0.16), transparent 60%),
        radial-gradient(1000px 700px at 108% 8%, rgba(15,157,88,0.22), transparent 55%),
        radial-gradient(900px 550px at 50% 118%, rgba(0,255,149,0.14), transparent 60%),
        linear-gradient(160deg,
            var(--cc-bg-2, #082616),
            var(--cc-bg-1, #04150d) 60%,
            var(--cc-bg-3, #0c3a22));

    color:#eaf4ee;
    font-family:
        Arial,
        sans-serif;

    margin:0;
}

* {
    box-sizing: border-box;
}

input, textarea {
    max-width: 100%;
}

.card{

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

    color:#0d2818;

    backdrop-filter:
        blur(15px);

    border:
        1px solid rgba(
            29,
            78,
            216,
            0.18
        );

    border-radius:20px;

    padding:25px;

    margin:20px;

    box-shadow:
        0 0 30px
        var(--cc-glow, rgba(16, 196, 111, 0.18));

    transition:
        0.3s;
}

.card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 0 40px
        var(--cc-glow-hover, rgba(24, 230, 140, 0.35));
}

button{

    background:
        linear-gradient(
            90deg,
            var(--cc-accent-1, #0f9d58),
            var(--cc-accent-2, #16c46f)
        );

    color:white;

    border:none;

    border-radius:12px;

    padding:
        12px
        24px;

    cursor:pointer;

    margin:5px;

    transition:
        0.3s;
}

button:hover{

    transform:
        scale(1.05);

    box-shadow:
        0 0 20px
        var(--cc-accent-2, #16c46f);
}

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:260px;

    height:100vh;

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

    color:#0d2818;

    border-right:1px solid rgba(29,78,216,0.15);

    backdrop-filter:
        blur(20px);

    padding:25px;
}

.main{

    margin-left:300px;

    padding:30px;
}

.network-live{

    /* Blue primary accent, legible against the white card surface
       this renders on. */
    color:var(--cc-accent-1, #1d4ed8);

    animation:
        pulse 2s infinite;
}

@keyframes pulse{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.4;
    }

    100%{
        opacity:1;
    }
}