:root{
    --celo-yellow: #FCFF52;
    --celo-yellow-dark: #F7E94F;
    --celo-green:  #35D07F;
    --bg: #f6faf7;
    --card: #ffffff;
    --muted: #6b6b6b;
    --rounded: 12px;
}

html,body{
    height:100%; 
    margin:0; 
    font-family:Inter, Arial, sans-serif; 
    background:var(--bg); 
    color:#0b1720;
}

.header {
    background: linear-gradient(90deg, var(--celo-yellow), var(--celo-yellow-dark));
    color: #111;
    padding:18px 30px;
    border-radius:0 0 12px 12px;
    display:flex;
    align-items:center;
    gap:16px;
}

.brand { 
    display:flex; 
    gap:12px; 
    align-items:center; 
}

.logo {
    width:42px; 
    height:42px; 
    border-radius:10px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/7a/Celo_logo.svg') no-repeat center/contain;
}

.title { 
    font-size:1.2rem; 
    font-weight:700; 
    display: flex;
    align-items: center;
    gap: 8px;
}

.celo-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.celo-icon {
    width: 16px;
    height: 16px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/7a/Celo_logo.svg') no-repeat center/contain;
}

.byline { 
    margin-left:auto; 
    font-size:13px; 
    font-weight: 700;
}

.container {
    max-width:1000px;
    margin: 6px auto 60px auto;
    padding: 0 18px;
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:20px;
    align-items:start;
}

.left, .right {
    background:var(--card);
    border-radius:var(--rounded);
    padding:18px;
    box-shadow: 0 6px 20px rgba(10,20,20,0.05);
}

.left h2, .right h2 { 
    margin:0 0 8px 0; 
    font-size:1.05rem; 
}

.wallet-row { 
    display:flex; 
    gap:12px; 
    align-items:center; 
    margin-bottom:12px; 
}

.connect-btn, .create-btn {
    background: linear-gradient(180deg, var(--celo-yellow-dark), var(--celo-yellow));
    color:#111;
    border:none;
    padding:10px 12px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
}

.connect-btn { 
    min-width: 120px; 
}

.create-btn { 
    width:100%; 
    margin-top:12px; 
}

.connect-btn:hover, .create-btn:hover { 
    opacity:0.95; 
    transform:translateY(-1px); 
}

.connect-btn:disabled, .create-btn:disabled { 
    opacity:0.6; 
    cursor:not-allowed; 
}

.wallet-info {
    font-size:13px;
    color:var(--muted);
    word-break:break-all;
    background: rgba(5,32,24,0.03);
    padding:8px 10px;
    border-radius:8px;
    flex:1;
}

.network-info {
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.wrong-network {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

.wrong-network button {
    background: #ff4444;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
    font-weight: 600;
}

.poll-list { 
    margin-top:10px; 
}

.poll-card {
    background: linear-gradient(180deg,#ffffff,#fbfefb);
    border:1px solid rgba(11,21,20,0.06);
    border-radius:10px;
    padding:12px;
    margin-bottom:12px;
    transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
    opacity:0;
    transform: translateY(8px);
}

.poll-card.show { 
    opacity:1; 
    transform: translateY(0); 
}

.poll-title { 
    font-weight:700; 
    margin:0 0 6px 0; 
    color:#052017; 
}

.poll-meta { 
    font-size:13px; 
    color:var(--muted); 
    display:flex; 
    gap:8px; 
    align-items:center; 
    margin-bottom:8px; 
}

.poll-date {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.status {
    padding:4px 8px;
    font-weight:700;
    font-size:12px;
    border-radius:999px;
}

.status.active { 
    background: rgba(53,208,127,0.12); 
    color: var(--celo-green); 
}

.status.ended { 
    background: rgba(255,200,92,0.12); 
    color: #b26a00; 
}

.options { 
    display:grid; 
    gap:8px; 
    margin-top:4px; 
}

.option-btn {
    padding:8px 10px;
    background: linear-gradient(180deg, var(--celo-yellow-dark), var(--celo-yellow));
    border:none;
    color:#111;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
}

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

.option-btn:disabled { 
    opacity:0.6; 
    cursor:not-allowed; 
}

.options .result {
    background:linear-gradient(180deg,#ffffff,#fefee8);
    border-radius:8px;
    padding:8px;
    border:1px solid rgba(5,32,24,0.04);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
}

.options .winner {
    background: linear-gradient(90deg,#fffac2,#fff2a1);
}

.field { 
    margin-top:10px; 
}

input {
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(6,20,18,0.06);
    font-size:14px;
    outline:none;
    box-sizing:border-box;
}

.helper { 
    font-size:13px; 
    color:var(--muted); 
    margin-top:8px; 
}

.end-btn {
    background: #ff4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.loading, .error { 
    text-align: center; 
    padding: 20px; 
    font-style: italic; 
}

.loading { 
    color: var(--muted); 
}

.error { 
    color: #ff4444; 
}

.contract-address {
    background: rgba(53,208,127,0.1);
    border: 1px solid rgba(53,208,127,0.2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
}

#overlay {
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.4);
    z-index:998;
}

#popup {
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0.8);
    opacity:0;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    padding:20px;
    z-index:999;
    text-align:center;
    max-width:300px;
    width:90%;
}

#popup button {
    margin-top:10px;
    background: var(--celo-yellow);
    border:none;
    color:#111;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

#popup.show { 
    animation: fadeIn 0.25s forwards; 
    opacity:1; 
    transform:translate(-50%, -50%) scale(1); 
}

@keyframes fadeIn { 
    from {
        opacity:0; 
        transform:translate(-50%, -50%) scale(0.8);
    } 
    to {
        opacity:1; 
        transform:translate(-50%, -50%) scale(1);
    } 
}

@media (max-width: 768px) {
    .container { 
        grid-template-columns: 1fr; 
        gap: 16px; 
    }
    .header { 
        padding: 14px 20px; 
    }
    .title { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 4px; 
    }
}