:root{
--bg:#0f1724; --card:#0b1220; --accent:#7c3aed; --muted:#99a3b3; --glass: rgba(255,255,255,0.04);
--radius:14px; --fw:500;
}
*{box-sizing:border-box}
body{
margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#071029 0%, #0b1322 60%); color:#e6eef6;
padding:32px;
}
.app{
width:100%; max-width:820px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:18px; padding:28px; box-shadow: 0 10px 30px rgba(2,6,23,0.6);
display:grid; grid-template-columns: 1fr 340px; gap:20px; align-items:start;
}
header{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px}
.logo{display:flex; gap:12px; align-items:center}
.logo .icon{width:48px; height:48px; border-radius:10px; background:linear-gradient(135deg,var(--accent), #4f46e5); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px}
h1{margin:0; font-size:20px}
p.lead{margin:0; color:var(--muted); font-size:13px}


/* Joke card */
.card{background:linear-gradient(180deg,var(--card), rgba(255,255,255,0.02)); padding:22px; border-radius:var(--radius); box-shadow: 0 6px 20px rgba(2,6,23,0.45); position:relative}
.joke-setup{font-size:18px; margin:0 0 10px; font-weight:600}
.joke-punch{font-size:16px; margin:0 0 14px; color:#dbe7ff}
.small{color:var(--muted); font-size:13px}


.controls{display:flex; gap:10px; margin-top:8px}
button{appearance:none; border:0; background:var(--glass); color:inherit; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600}
button.primary{background:linear-gradient(90deg,var(--accent), #4f46e5); box-shadow:0 6px 18px rgba(124,58,237,0.18)}
button.ghost{background:transparent; border:1px solid rgba(255,255,255,0.04)}


/* Sidebar */
.sidebar{display:flex; flex-direction:column; gap:14px}
.panel{background:rgba(255,255,255,0.02); padding:14px; border-radius:12px}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
select,input[type=checkbox]{width:100%}


.history{max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:8px}
.history .item{padding:8px; border-radius:10px; background:rgba(255,255,255,0.01); font-size:13px}


footer{grid-column:1/-1; margin-top:8px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px}


/* responsive */
@media (max-width:860px){
.app{grid-template-columns:1fr;}
.sidebar{order:2}
}


/* tiny animation */
.pulse{animation:pulse 1s ease}
@keyframes pulse{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}