:root {
    --bg-main:#f2f4f8;
    --bg-card:#ffffff;
    --bg-soft:#f7f8fa;
    --text-main:#1f2937;
    --text-sub:#6b7280;
    --accent:#6fcf97;
    --ad-bg:#eef1f5;
}

body.dark {
    --bg-main:#0f172a;
    --bg-card:#111827;
    --bg-soft:#1f2937;
    --text-main:#e5e7eb;
    --text-sub:#9ca3af;
    --ad-bg:#1c2538;
}

body {
    margin:0;
    padding:22px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg-main);
    color:var(--text-main);
}

.wrapper {
    max-width:500px;
    margin:auto;
}

.ad-box {
    background:var(--ad-bg);
    border-radius:14px;
    padding:12px;
    text-align:center;
    font-size:12px;
    color:var(--text-sub);
    margin-bottom:18px;
}

.container {
    background:var(--bg-card);
    border-radius:26px;
    padding:26px 22px 28px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

h1 {
    font-size:22px;
    margin:0;
}

.sub {
    font-size:13px;
    color:var(--text-sub);
    margin-top:6px;
}

.theme-toggle {
    background:var(--bg-soft);
    border:none;
    border-radius:50%;
    width:38px;
    height:38px;
    font-size:18px;
    cursor:pointer;
}

.message {
    margin:18px 0;
    padding:14px;
    background:var(--bg-soft);
    border-radius:14px;
    font-size:14px;
    text-align:center;
    line-height:1.6;
}

.main-btn {
    width:100%;
    padding:16px;
    border-radius:18px;
    border:none;
    background:linear-gradient(135deg,#6fcf97,#56c596);
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.actions {
    display:flex;
    gap:10px;
    margin-top:14px;
}

.actions button {
    flex:1;
    padding:12px;
    border-radius:14px;
    border:none;
    background:var(--bg-soft);
    font-size:14px;
}

.sets {
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.set {
    background:var(--bg-soft);
    border-radius:16px;
    padding:12px;
}

.set-title {
    font-size:13px;
    color:var(--text-sub);
    text-align:center;
    margin-bottom:8px;
}

.numbers {
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.ball {
    width:42px;
    height:42px;
    line-height:42px;
    border-radius:50%;
    font-weight:600;
    font-size:15px;
    color:#fff;
}

.yellow{background:#f2c94c;}
.blue{background:#4f8edc;}
.red{background:#eb5757;}
.gray{background:#828282;}
.green{background:#27ae60;}

.footer {
    margin:20px 0 8px;
    font-size:12px;
    text-align:center;
    color:var(--text-sub);
}

@media(max-width:360px){
    .ball{width:38px;height:38px;line-height:38px;}
}

.meal-recommendation {
    margin-top: 22px;
    text-align: center;
}

.meal-result {
    margin-top: 18px;
}

.meal-result p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}