/* ==========================================================================
   Vibers — sidebar credits, topbar title, build terminals,
   plans & credits. Loaded after app.css.
   ========================================================================== */
:root {
    --sf-bg: #f5f6fa;
    --sf-term: #12111d; --sf-term-2: #181726; --sf-term-line: #26243a;
    --sf-term-text: #e6e3f5; --sf-term-muted: #8e8aa8; --sf-term-green: #4ade80; --sf-term-violet: #a78bfa;
}
.sf-app { background: var(--sf-bg); }
.sf-sidebar { background: #fbfbfd; }
.sf-nav-link.active { background: #ede7ff; }

.sf-credit-card { border: 1px solid var(--sf-border); background: #fff; border-radius: 16px; padding: 1rem; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.sf-credit-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--sf-grad); color: #fff; display: grid; place-items: center; font-size: 1.25rem; flex: 0 0 auto; }
.sf-credit-label { display: block; font-size: .85rem; color: var(--sf-body); }
.sf-credit-value { font-size: 1.05rem; color: var(--sf-ink); }
.sf-credit-of { color: var(--sf-muted); font-size: .95rem; }
.sf-progress { height: 6px; border-radius: 99px; background: #ece8f7; overflow: hidden; }
.sf-progress span { display: block; height: 100%; width: 0; background: var(--sf-grad); border-radius: 99px; transition: width .4s ease; }
.sf-btn-soft { border: 1px solid var(--sf-border); background: #fff; color: var(--sf-primary); font-weight: 600; }
.sf-btn-soft:hover { background: var(--sf-soft); color: var(--sf-primary); }

.sf-topbar { background: #fff; border-bottom: 1px solid var(--sf-border); }
.sf-topbar-title { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sf-topbar-title h1 { font-size: 1.45rem; font-weight: 800; margin: 0; line-height: 1.2; }
.sf-topbar-title p { margin: .15rem 0 0; color: var(--sf-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-topbar-back { color: var(--sf-ink); font-size: 1.3rem; text-decoration: none; padding: .25rem; }
.sf-topbar-back:hover { color: var(--sf-primary); }
a.sf-icon-btn { color: var(--sf-muted); text-decoration: none; }

/* ---------- Build screen ---------- */
.sf-build-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sf-stepper-flat { flex: 1 1 640px; margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0; }
.sf-stepper-flat .sf-stepper-num { background: #fff; }
.sf-stepper-flat .is-done .sf-stepper-num, .sf-stepper-flat .is-current .sf-stepper-num { background: var(--sf-grad); color: #fff; border-color: transparent; }
.sf-build-meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sf-build-meta b { color: var(--sf-ink); font-size: 1.05rem; margin-right: .4rem; }
.sf-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1199.98px) { .sf-terms { grid-template-columns: 1fr; } }

.sf-term { background: var(--sf-term); color: var(--sf-term-text); border-radius: 16px; overflow: hidden; border: 1px solid #262338; box-shadow: 0 18px 40px rgba(18, 13, 36, .18); display: flex; flex-direction: column; min-height: 390px; }
.sf-term-bar { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; background: var(--sf-term-2); border-bottom: 1px solid var(--sf-term-line); }
.sf-term-bar h2 { font-size: 1rem; font-weight: 500; color: #fff; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-term-bar h2 span { color: var(--sf-term-text); opacity: .85; }
.sf-term-dots { display: inline-flex; gap: .4rem; }
.sf-term-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; display: block; }
.sf-term-dots i:nth-child(2) { background: #febc2e; }
.sf-term-dots i:nth-child(3) { background: #28c840; }
.sf-term-provider { font-weight: 600; font-size: .95rem; color: #fff; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sf-provider-gemini .bi { color: #60a5fa; }
.sf-provider-openai .bi { color: #fff; }
.sf-provider-anthropic .bi { color: #f97316; font-size: 1.2rem; }
.sf-term-ext { color: var(--sf-term-muted); }
.sf-term-ext:hover { color: #fff; }
.sf-term-body { padding: 1rem 1.2rem 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .83rem; display: flex; flex-direction: column; flex: 1; }
.sf-term-cmd { color: var(--sf-term-text); }
.sf-term-prompt { color: var(--sf-term-green); }
.sf-term-intro { display: flex; justify-content: space-between; gap: 1rem; color: var(--sf-term-violet); margin: .15rem 0 .75rem; }
.sf-term-time { color: var(--sf-term-muted); white-space: nowrap; }
.sf-term-lines { margin: 0 0 .75rem; flex: 1; }
.sf-term-empty { color: var(--sf-term-muted); }
.sf-line { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .5rem; padding: .28rem 0; align-items: start; }
.sf-line.is-file { padding: .1rem 0; }
.sf-line-mark { color: var(--sf-term-muted); }
.sf-line-text { display: flex; flex-direction: column; min-width: 0; }
.sf-line-label { color: var(--sf-term-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-line-detail { color: var(--sf-term-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-line-status { color: var(--sf-term-muted); white-space: nowrap; font-size: .8rem; }
.sf-line.is-done .sf-line-mark, .sf-line.is-done .sf-line-status { color: var(--sf-term-green); }
.sf-line.is-done:not(.is-file) .sf-line-label { color: #c4b5fd; }
.sf-line.is-running .sf-line-mark, .sf-line.is-running .sf-line-status, .sf-line.is-running .sf-line-label { color: var(--sf-term-violet); }
.sf-line.is-running .sf-line-mark { animation: sf-pulse 1.2s ease-in-out infinite; }
.sf-line.is-error .sf-line-mark, .sf-line.is-error .sf-line-status, .sf-line.is-error .sf-line-detail { color: #f87171; }
.sf-line.is-skipped { opacity: .45; }
@keyframes sf-pulse { 50% { opacity: .35; } }
.sf-term-foot { display: flex; align-items: center; gap: .9rem; border: 1px dashed #3a3656; border-radius: 12px; padding: .8rem 1rem; margin-top: auto; }
.sf-term-foot > .bi { color: var(--sf-term-violet); font-size: 1.3rem; }
.sf-term-foot b { display: block; color: var(--sf-term-violet); font-weight: 500; }
.sf-term-foot small { color: var(--sf-term-muted); font-size: .74rem; }
.sf-term-foot.is-done > .bi, .sf-term-foot.is-done b { color: var(--sf-term-green); }
.sf-term-elapsed { margin-left: auto; color: var(--sf-term-muted); white-space: nowrap; }
.sf-term.is-running { border-color: #4c3b8f; }
.sf-term-url { display: flex; justify-content: space-between; gap: 1rem; color: var(--sf-term-text); margin: -.25rem 0 .6rem; flex-wrap: wrap; }
.sf-term-url a { color: #93c5fd; }
.sf-term-online { color: var(--sf-term-green); white-space: nowrap; }
.sf-term-online .bi { font-size: .6rem; vertical-align: middle; }
.sf-term-online.is-off { color: #f87171; }
.sf-browser { border: 1px solid #2c2942; border-radius: 12px; overflow: hidden; margin-bottom: .75rem; background: #0d0c16; }
.sf-browser-bar { display: flex; align-items: center; gap: .75rem; padding: .5rem .7rem; background: #1d1b2c; }
.sf-browser-url { flex: 1; min-width: 0; background: #0d0c16; border-radius: 8px; padding: .25rem .6rem; color: var(--sf-term-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-live { font-size: .72rem; color: var(--sf-term-green); border: 1px solid #245c3a; border-radius: 8px; padding: .15rem .5rem; white-space: nowrap; }
.sf-live .bi { font-size: .5rem; vertical-align: middle; }
.sf-browser { position: relative; }
.sf-browser-viewport { height: 380px; overflow: hidden; background: #fff; }
/* Render the generated app at desktop width, scaled down (like a thumbnail of the real page). */
.sf-browser iframe { width: 200%; height: 760px; border: 0; background: #fff; display: block; transform: scale(.5); transform-origin: 0 0; }
.sf-idea-box summary { cursor: pointer; font-weight: 700; color: var(--sf-ink); }

/* ---------- Plans & credits ---------- */
.sf-plan { position: relative; background: #fff; border: 1px solid var(--sf-border); border-radius: 20px; padding: 1.6rem 1.4rem; box-shadow: var(--sf-shadow); height: 100%; display: flex; flex-direction: column; }
.sf-plan.is-popular { border: 2px solid #8b5cf6; box-shadow: 0 18px 40px rgba(109, 40, 217, .16); }
.sf-plan.is-current { background: linear-gradient(180deg, #fbf9ff, #fff); }
.sf-plan-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--sf-grad); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .8rem; border-radius: 99px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.sf-plan h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .25rem; }
.sf-plan-desc { font-size: .86rem; color: var(--sf-muted); min-height: 2.6em; }
.sf-plan-price { margin: .25rem 0 .75rem; }
.sf-plan-price b { font-size: 2.1rem; font-weight: 800; color: var(--sf-ink); letter-spacing: -.03em; }
.sf-plan-price span { color: var(--sf-muted); }
.sf-plan-credits { background: var(--sf-soft); color: var(--sf-primary); border-radius: 10px; padding: .5rem .75rem; font-weight: 600; font-size: .88rem; margin-bottom: 1rem; }
.sf-plan-list { margin-bottom: 1.25rem; }
.sf-plan-list li { display: flex; gap: .55rem; font-size: .88rem; padding: .28rem 0; color: var(--sf-body); }
.sf-plan-list .bi { color: var(--sf-violet); }
.sf-balance { background: var(--sf-grad); color: #fff; border-radius: 20px; padding: 1.6rem; height: 100%; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--sf-shadow-violet); }
.sf-balance span { opacity: .85; font-weight: 600; }
.sf-balance b { font-size: 2.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sf-balance small { opacity: .85; }
.sf-pack { position: relative; background: #fff; border: 1px solid var(--sf-border); border-radius: 18px; padding: 1.4rem 1.1rem 1.1rem; text-align: center; box-shadow: var(--sf-shadow); height: 100%; display: flex; flex-direction: column; align-items: center; }
.sf-pack.is-popular { border: 2px solid #8b5cf6; }
.sf-pack-icon { font-size: 1.4rem; color: #f59e0b; }
.sf-pack b { font-size: 1.7rem; font-weight: 800; color: var(--sf-ink); line-height: 1.1; margin-top: .25rem; }
.sf-pack > span { color: var(--sf-muted); font-size: .85rem; }
.sf-pack-price { font-size: 1.2rem; font-weight: 700; color: var(--sf-primary); margin-top: .5rem; }
.sf-provider-tile.sf-provider-gemini { background: #e8f0ff; color: #2563eb; }
.sf-provider-tile.sf-provider-openai { background: #111; color: #fff; }
.sf-provider-tile.sf-provider-anthropic { background: #fff1e6; color: #ea580c; }
.sf-tone-orange a { color: inherit; font-weight: 700; }