:root { 
    --bg:#0f1115; 
    --card:#141826; 
    --text:#e8e8f0; 
    --muted:#a8b0c3; 
    --accent:#7c5cff; 
    --radius:10px; 
}
* { 
    box-sizing: border-box; 
}
body { 
    font-family: Inter, system-ui, sans-serif; 
}
.wrap { 
    max-width: 500px;
    margin: auto; 
    text-align: center; 
}
.panel { 
    background: linear-gradient(180deg, #181c2d 0%, #121523 100%); 
    border:1px solid rgba(255,255,255,.07); 
    border-radius:var(--radius); 
    box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); 
    overflow:hidden; 
}
.header { 
    display:flex; 
    align-items:center; 
    gap:12px; 
    padding:16px 18px; 
    cursor:pointer; 
}
.dot { 
    width:10px; 
    height:10px; 
    border-radius:50%; 
    background:var(--accent); 
    box-shadow:0 0 16px var(--accent); 
}
.title { 
    font-weight:700; 
    letter-spacing:.2px; 
    margin: auto;
}
.caret { 
    margin-left:auto; 
    transition: transform .28s ease; 
    margin: 0;
}
.caret svg { 
    display:block; 
}
.body { 
    overflow:hidden; 
    height:0; 
    transition: height .28s ease; 
}
.inner { 
    padding:0 18px 18px 18px; 
    color:var(--muted); 
}
.actions { 
    display:flex; 
    gap:10px; 
    margin-top:12px; 
}
.btn { 
    background:#20253a; 
    color:#dfe3f5; 
    border:1px solid rgba(255,255,255,.08); 
    padding:0px 14px; 
    border-radius:10px; 
    cursor:pointer; 
    transition: transform .1s ease, background .2s ease; 
}
.btn:hover { 
    background:#232943; 
}
.btn:active { 
    transform: translateY(1px); 
}
.badge { 
    margin-left:8px; 
    font-size:12px; 
    padding:2px 8px; 
    border-radius:999px; 
    background:rgba(124,92,255,.15); 
    color:#cdbdff; 
    border:1px solid rgba(124,92,255,.35); 
}
/* Estado abierto */
.panel.open .caret {
    transform: rotate(180deg); 
}