/* Plan-aware UI: Free stays small and simple, Pro gets the full premium design. Also billing dialogs. */

/* ---------- Plan chip + save status ---------- */
.plan-chip { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid, #fff); color: var(--pri-text, #167d73); font-weight: 700; font-size: 12.5px; white-space: nowrap; transition: transform 0.3s var(--spring), box-shadow 0.25s; }
.plan-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.4); background: var(--surface-solid, #fff); }
.plan-chip.pro { color: #4a2a00; border-color: transparent; background: linear-gradient(110deg, #ffe39a, #f6a94b 45%, #ffe39a); background-size: 200% 100%; animation: goldShift 4s linear infinite; box-shadow: 0 6px 18px -8px #f6a94b; }
@keyframes goldShift { to { background-position: -200% 0; } }
.cloud-toolbar #db-status[data-state="error"] { background: #fde4e6; color: #a3202f; }
.cloud-toolbar #db-status[data-state="error"]::before { background: #e5484d; animation: none; }
.cloud-toolbar #db-status[data-state="saving"]::before { background: #f5a524; animation: ping 1s infinite; --ping: rgba(245, 165, 36, 0.5); }
body.dark .cloud-toolbar #db-status[data-state="error"] { background: #4a2227; color: #ffb4bc; }

/* Locked (Pro) controls */
.pro-lock::after { content: "PRO"; display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 99px; vertical-align: middle; font: 800 9px/1.5 "DM Sans", sans-serif; letter-spacing: 0.6px; color: #4a2a00; background: linear-gradient(135deg, #ffe39a, #f6a94b); box-shadow: 0 3px 8px -3px #f6a94b; pointer-events: none; }
.company-logo-slot.pro-lock { position: relative; }
.company-logo-slot.pro-lock::after { display: none; }
.palette-mini button.pro-lock::after, .pop .sw.pro-lock::after, .pop .seg button.pro-lock::after { display: none; }
.palette-mini button.pro-lock, .pop .sw.pro-lock, .pop .seg button.pro-lock { opacity: 0.45; }
.pro-lock:not(:disabled) { cursor: pointer; }

/* Sidebar plan card */
#sidebar .tip-card.plan-side { padding: 14px 15px; }
#sidebar .tip-card.plan-side p { font: 700 15px/1.3 Manrope, sans-serif; margin: 6px 0 8px; }
#sidebar .tip-card.plan-side button { font-size: 12.5px; font-weight: 700; color: #ffd9b3; }
#sidebar .tip-card.plan-side small { display: block; color: #a9c3c5; margin-bottom: 8px; font-size: 12px; }
#sidebar .tip-card.plan-side.pro { border-color: rgba(246, 169, 75, 0.5); background: linear-gradient(145deg, rgba(246, 169, 75, 0.22), rgba(232, 112, 74, 0.08)); }
#sidebar .tip-card.plan-side.pro > span { color: #ffe39a; font-weight: 800; letter-spacing: 1px; }
.meter { display: block; height: 7px; border-radius: 99px; background: rgba(127, 150, 150, 0.25); overflow: hidden; }
.meter u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34c38f, #f5a524); transition: width 0.8s var(--ease); }

/* ---------- FREE: small, simple interface ---------- */
body.plan-free { --wheel-size: clamp(220px, calc(100vh - 600px), 290px); }
body.plan-free::before, body.plan-free::after { display: none; }
body.plan-free .orbit, body.plan-free .spark, body.plan-free .recent-winners { display: none !important; }
body.plan-free .wheel-stage::before { display: none; }
body.plan-free .wheel-stage { height: calc(var(--wheel-size) + 30px); }
body.plan-free #wheel { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 14px -8px rgba(0, 0, 0, 0.35); }
body.plan-free .spin-button { min-width: 190px; padding: 12px 22px; font-size: 15px; animation: none !important; box-shadow: none; }
body.plan-free .wheel-card, body.plan-free .entry-card { border-radius: 16px; box-shadow: none; }
body.plan-free main { max-width: 1180px; }
body.plan-free #sidebar .side-wheels-wrap { display: none; }

/* ---------- PRO: premium design ---------- */
body.plan-paid .wheel-card, body.plan-paid .entry-card { position: relative; border-color: transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--pri) 70%, #fff), transparent 35%, color-mix(in srgb, var(--acc) 80%, #fff)) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-md), 0 30px 70px -40px var(--pri-glow); }
body.plan-paid header.app-header { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 12%, transparent), transparent); }
body.plan-paid header.app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #f6a94b, transparent); }
body.plan-paid::before { opacity: 1; }
body.plan-paid .wheel-wrap::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: conic-gradient(from 0deg, #f6a94b, transparent 25%, var(--pri), transparent 55%, var(--acc), transparent 80%, #f6a94b); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: rotate 14s linear infinite; opacity: 0.85; pointer-events: none; }
body.plan-paid .is-spinning .wheel-wrap::before { animation-duration: 2.2s; }
body.plan-paid .spin-button { background: linear-gradient(135deg, var(--pri), var(--pri-2) 55%, color-mix(in srgb, var(--acc) 70%, var(--pri-2))); }
body.plan-paid .tabs button.active::after { background: linear-gradient(90deg, #f6a94b, var(--acc), var(--pri)); }
body.plan-paid #sidebar .brand-dot { color: #f6c35a; }

/* ---------- Billing dialogs ---------- */
dialog.wide-dialog:has(.acct-tabs) { width: 760px; }
.acct-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--pri-soft, #eef6f4); margin-bottom: 18px; }
.acct-tabs button { flex: 1; padding: 10px 8px; border-radius: 11px; font-weight: 600; color: var(--muted); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.acct-tabs button.on { background: var(--surface-solid, #fff); color: var(--pri-text, #167d73); box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.25); }
.acct-pane { animation: rise 0.4s var(--ease); }
.acct-form h3, .acct-pane h4 { margin: 0 0 4px; font: 800 18px Manrope, sans-serif; letter-spacing: -0.4px; }
.acct-pane h4 { font-size: 15px; margin-top: 22px; }
.acct-form > p { margin-top: 0; }
.acct-form label { display: grid; gap: 6px; margin: 14px 0; font-size: 13px; font-weight: 600; }
.acct-form label small { font-weight: 400; color: var(--muted); }
.acct-form input { padding: 11px 13px; border-radius: 12px; }
.acct-form input:disabled { opacity: 0.6; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acct-actions .primary { padding: 11px 20px; border-radius: 12px; }
.up-error { min-height: 18px; margin: 4px 0 !important; color: #d6455a !important; font-size: 13px !important; }
.plan-card { padding: 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface-solid); }
.plan-card.pro { border: 1.5px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(135deg, #f7d27a, #e8704a, #8b5cf6) border-box; }
.plan-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.plan-top h3 { margin: 6px 0 2px; font: 800 20px Manrope, sans-serif; letter-spacing: -0.5px; }
.plan-top p { margin: 0; font-size: 13.5px; }
.plan-tag { display: inline-block; padding: 3px 11px; border-radius: 99px; font: 800 11px Manrope; letter-spacing: 1px; background: var(--pri-soft); color: var(--pri-text); }
.plan-card.pro .plan-tag { color: #4a2a00; background: linear-gradient(135deg, #ffe39a, #f6a94b); }
.up-open { padding: 11px 18px; border-radius: 13px; font-weight: 700; }
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.meters > div { padding: 13px; border-radius: 14px; background: var(--pri-soft); }
.meters span { display: block; font-size: 12px; color: var(--muted); }
.meters b { display: block; font: 800 18px Manrope; margin: 2px 0 8px; }
.meters small { color: var(--muted); }
.feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.feat li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; }
.feat li.yes .i { color: #17a36b; } .feat li.no { color: var(--muted); } .feat li.no .i { color: #b4c0c0; }
.pay-list { display: grid; gap: 8px; margin-top: 10px; }
.pay { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 11px 14px; border-radius: 13px; border: 1px solid var(--border); }
.pay small { display: block; color: var(--muted); }
.pay .why { flex-basis: 100%; color: #a3202f; }
.st { padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: capitalize; background: #eef3f3; }
.st.pending { background: #fff0cf; color: #8a5a00; } .st.approved { background: #dff6ea; color: #17744a; } .st.rejected { background: #fde4e6; color: #b3263a; }
.muted { color: var(--muted); }

.up-hero { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: linear-gradient(120deg, rgba(246, 169, 75, 0.2), rgba(232, 112, 74, 0.08)); border: 1px solid rgba(246, 169, 75, 0.35); }
.up-hero strong { font: 800 17px/1.3 Manrope; letter-spacing: -0.3px; }
.up-hero p { margin: 3px 0 0 !important; font-size: 13px !important; }
.up-crown { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; font-size: 24px; color: #4a2a00; background: linear-gradient(135deg, #ffe39a, #f6a94b); animation: popSpin 0.9s var(--spring) both; }
.up-price { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 6px; }
.up-price b { font: 800 46px/1 Manrope; letter-spacing: -2px; background: linear-gradient(95deg, #f6a94b, #e8704a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-price span { font-weight: 700; } .up-price small { color: var(--muted); font-weight: 500; }
.up-perks { list-style: none; margin: 10px 0 18px; padding: 0; display: grid; gap: 9px; }
.up-perks li { display: flex; gap: 12px; align-items: center; animation: slideIn 0.5s var(--ease) both; }
.up-perks li:nth-child(2) { animation-delay: 0.06s; } .up-perks li:nth-child(3) { animation-delay: 0.12s; } .up-perks li:nth-child(4) { animation-delay: 0.18s; } .up-perks li:nth-child(5) { animation-delay: 0.24s; }
.up-perks i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #dff6ea; color: #17744a; flex-shrink: 0; font-style: normal; }
.up-perks strong { display: block; font-size: 14px; line-height: 1.25; } .up-perks small { color: var(--muted); font-size: 12px; }
.up-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 14px; }
.wallet { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 8px 8px 12px; border-radius: 13px; background: var(--pri-soft); border: 1px dashed var(--pri-glow, #9bd); }
.wallet code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.wallet .copy { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: 12.5px; background: var(--surface-solid); border: 1px solid var(--border); }
.up-form { display: flex; gap: 8px; margin-top: 14px; }
.up-form input { flex: 1; min-width: 0; margin: 0 !important; border-radius: 13px; }
.up-form .primary { padding: 0 20px; border-radius: 13px; white-space: nowrap; font-weight: 700; }
.up-note { font-size: 12.5px !important; color: var(--muted); }
.up-note.ok { color: #17744a; }
.up-done { text-align: center; padding: 24px 10px; }
.up-done .i { width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: #dff6ea; color: #17744a; stroke-width: 2.2; animation: pop 0.6s var(--spring); }
.up-done strong { display: block; font: 800 20px Manrope; margin: 12px 0 4px; }

@media (max-width: 640px) { .meters, .feat { grid-template-columns: 1fr; } .up-form { flex-direction: column; } .up-form .primary { padding: 12px; } dialog.wide-dialog:has(.acct-tabs) { width: auto; } }

/* Pro template cards */
.starter-card.is-pro { border-color: #f1c66a; box-shadow: 0 10px 26px -16px #f6a94b; }
.template-pro { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 99px; font: 800 10px/1.4 "DM Sans", sans-serif; letter-spacing: 0.6px; color: #4a2a00; background: linear-gradient(135deg, #ffe39a, #f6a94b); box-shadow: 0 4px 10px -4px #f6a94b; }

/* Insights */
.ins-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.ins-tiles > div { padding: 12px; border-radius: 14px; background: var(--pri-soft); min-width: 0; }
.ins-tiles b { display: block; font: 800 20px Manrope, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-tiles span { font-size: 12px; color: var(--muted); }
.ins h4 { margin: 18px 0 8px; font: 800 14px Manrope, sans-serif; }
.ins-bars { display: grid; gap: 7px; }
.ins-bars > div { display: grid; grid-template-columns: 110px 1fr 76px; gap: 10px; align-items: center; font-size: 13px; }
.ins-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bars i { display: block; height: 10px; border-radius: 99px; background: rgba(127, 150, 150, 0.2); overflow: hidden; }
.ins-bars u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pri), var(--acc)); animation: grow 0.8s var(--ease) both; transform-origin: left; }
.ins-bars b { font-size: 12px; text-align: right; font-weight: 600; color: var(--muted); }
.ins-days { display: flex; align-items: flex-end; gap: 5px; height: 100px; }
.ins-days > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ins-days i { display: block; width: 100%; max-width: 22px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--pri), color-mix(in srgb, var(--pri) 40%, #fff)); animation: grow 0.8s var(--spring) both; transform-origin: bottom; }
.ins-days small { font-size: 10.5px; color: var(--muted); }
.ins-note { font-size: 12.5px !important; margin-top: 14px; }
@media (max-width: 640px) { .ins-tiles { grid-template-columns: 1fr 1fr; } .ins-bars > div { grid-template-columns: 80px 1fr 64px; } }

/* Embed code */
.embed-box { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--pri-soft); border: 1px dashed var(--pri-glow, #9bd); }
.embed-box strong { display: block; font: 800 14px Manrope, sans-serif; }
.embed-box p { margin: 4px 0 10px !important; font-size: 12.5px !important; }
.embed-box textarea { width: 100%; min-height: 0 !important; margin-bottom: 8px !important; padding: 9px 11px; border-radius: 12px; font: 12px/1.5 ui-monospace, Consolas, monospace; resize: none; }