/* LingoLeap free vs VIP plan */
.vip-b { display: inline-flex; align-items: center; gap: .2em; flex: none; vertical-align: .08em; height: 1.55em; padding: 0 .5em 0 .35em; border-radius: 999px; font-size: .6em; font-size: max(8px, .6em); font-weight: 900; letter-spacing: .03em; line-height: 1; color: #7a4b00; background: linear-gradient(135deg, #ffe27a, #ffc800); box-shadow: inset 0 0 0 1px rgba(229,164,0,.55); white-space: nowrap; box-sizing: border-box; text-transform: none; }
.vip-b::before { content: '👑'; font-size: 1em; line-height: 1; }
h1 .vip-b, h2 .vip-b { font-size: .5em; }
.nmw > .vip-b { vertical-align: 0; }
@media (max-width: 360px) { .vip-b { padding: 0 .4em 0 .3em; letter-spacing: 0; } }
.vip-pop { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.vip-pop h2 { margin: 0; font-size: 24px; font-weight: 900; background: linear-gradient(90deg, #58a700, #e5a400); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-crown { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: radial-gradient(circle at 30% 30%, #fff6c9, #ffc800 70%); box-shadow: 0 4px 0 #e5a400, 0 0 0 6px rgba(88,204,2,.18); }
.vip-crown.sm { width: 40px; height: 40px; font-size: 22px; box-shadow: 0 2px 0 #e5a400; flex: none; }
.vip-why { margin: 0; font-weight: 800; color: var(--text); }
.vip-perks { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; border-radius: 16px; background: linear-gradient(135deg, rgba(88,204,2,.12), rgba(255,200,0,.16)); border: 2px solid rgba(229,164,0,.35); }
.vip-perks li { display: flex; gap: 10px; align-items: center; font-weight: 800; }
.vip-perks li span { font-size: 20px; width: 26px; text-align: center; flex: none; }
.btn.vip-get { background: linear-gradient(135deg, #58cc02, #8bd400 45%, #ffc800); box-shadow: 0 4px 0 #58a700; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.vip-soon { margin: -4px 0 0; color: #b07800; font-weight: 800; }
.vip-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vip-usage div { border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.vip-usage b { font-size: 20px; font-weight: 900; color: var(--green-d); }
.vip-usage span { font-size: 13px; color: var(--muted); }
.vip-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.vip-table th, .vip-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.vip-table th:nth-child(3), .vip-table td:nth-child(3) { color: #b07800; font-weight: 900; }
.vip-table td:first-child { color: var(--muted); }
.small { font-size: 13px; }
.vip-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 10px 0; border-radius: 16px; text-align: left; color: var(--text); background: linear-gradient(135deg, rgba(88,204,2,.10), rgba(255,200,0,.18)); border: 2px solid rgba(229,164,0,.45); font: inherit; cursor: pointer; }
.vip-entry .grow { display: flex; flex-direction: column; }
.vip-slots { display: flex; flex-direction: column; gap: 8px; }
.vip-slots select { width: 100%; }
.vip-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px dashed rgba(229,164,0,.6); background: rgba(255,200,0,.08); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; text-align: left; }
.vip-slot span { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; color: #7a4b00; background: linear-gradient(135deg, #ffe27a, #ffc800); }
.tr-slot { margin-top: 4px; }
.tr-btn { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 800; color: var(--blue); cursor: pointer; }
.tr-out { margin-top: 6px; padding-top: 6px; border-top: 1px dashed currentColor; border-top-color: rgba(127,127,127,.35); }
.tr-txt { font-weight: 700; }
.tr-meta { display: block; margin-top: 2px; font-size: 11px; opacity: .8; }
html[data-theme=dark] .vip-b { color: #3d2600; }
html[data-theme=dark] .vip-why { color: var(--text); }
html[data-theme=dark] .vip-soon { color: #ffd34d; }
html[data-theme=dark] .vip-table th:nth-child(3), html[data-theme=dark] .vip-table td:nth-child(3) { color: #ffd34d; }
html[data-theme=dark] .vip-slot { color: #c9d1d9; }