/* Vision Flow AI Studio — Unified Design Extension over /css/app.css */

.studio-hero { padding: 38px 0 20px; text-align: left; }
.studio-hero::before { inset: -40px -50vw 0; }
.studio-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.studio-hero-copy { max-width: 720px; }
.studio-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 10px; font-weight: 750; }
:root[lang="bn"] .studio-hero h1 { letter-spacing: 0; line-height: 1.24; font-size: clamp(26px, 4vw, 38px); }
.studio-hero .lede { margin: 0; color: var(--muted); font-size: 16px; max-width: 640px; }

.handoff-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); font-size: 13.5px; }
.handoff-banner strong { color: var(--accent); }

/* Header account & credits pills matching app.css crisp chrome */
.chip-credits { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font: 600 12.5px/1 var(--mono); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.chip-credits:hover { border-color: var(--accent); color: var(--accent); }
.chip-credits svg { width: 14px; height: 14px; stroke: var(--accent); }
.btn-auth { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn-auth:hover { border-color: var(--accent); color: var(--accent); }
.btn-auth.is-signed { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
@media (max-width: 560px) { .chip-credits .cred-lbl { display: none; } }

/* Workspace tabs */
.ws-bar { position: sticky; top: 61px; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.ws-tabs { display: flex; align-items: center; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 600 13.5px/1.2 var(--font); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.ws-tab svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.ws-tab:hover { color: var(--text); background: var(--surface-2); }
.ws-tab[aria-selected="true"] { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.ws-tab[aria-selected="true"] svg { stroke: var(--accent); }
.ws-panel[hidden] { display: none !important; }

/* Director grid & scene cards */
.dir-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .dir-layout { grid-template-columns: minmax(0, 1fr); } }
.field-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .field-grid-3, .field-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.scene-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.scene-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.scene-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--mono); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); }
.pill.accent { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); color: var(--accent); }
.pill.ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--ok); }
.scene-summary { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.scene-prompt { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); margin: 0; }

/* Timeline tracks */
.tl-ruler { display: flex; justify-content: space-between; font: 600 11px/1 var(--mono); color: var(--muted); padding: 0 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.tl-lanes { display: grid; gap: 10px; }
.tl-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 560px) { .tl-lane { grid-template-columns: 74px minmax(0, 1fr); } }
.tl-lane-lbl { font: 600 12px/1.2 var(--mono); color: var(--muted); }
.tl-track { display: flex; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-height: 46px; overflow-x: auto; }
.tl-clip { flex: 1 0 110px; padding: 6px 9px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); color: var(--text); font-size: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-clip.audio { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.tl-clip.cap { border-color: color-mix(in srgb, var(--info) 35%, var(--border)); background: color-mix(in srgb, var(--info) 11%, transparent); }
.tl-clip b { font-size: 11.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-clip span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Projects & Billing cards */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.proj-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; }
.proj-card h4 { margin: 0; font-size: 15px; }
.pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 820px) { .pack-grid { grid-template-columns: minmax(0, 1fr); } }
.pack-card { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 16px; cursor: pointer; display: grid; gap: 6px; transition: border-color .12s, box-shadow .12s; }
.pack-card:hover { border-color: var(--border-strong); }
.pack-card.is-selected { border-color: var(--accent); box-shadow: var(--ring); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.pack-price { font: 750 22px/1.1 var(--mono); color: var(--text); }
.pack-credits { font: 600 13px/1.3 var(--mono); color: var(--accent); }

/* Vision Flow Pay Hybrid Checkout */
.pay-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 920px) { .pay-layout { grid-template-columns: minmax(0, 1fr); } }
.pay-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .pay-tabs { grid-template-columns: minmax(0, 1fr); } }
.pay-pane.hidden { display: none !important; }
.qr-checkout-box { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
@media (max-width: 640px) { .qr-checkout-box { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: left; } }
.qr-card-frame { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: #fff; box-shadow: var(--shadow); transition: transform .14s ease; }
.qr-card-frame:hover { transform: translateY(-2px); }
.qr-card-frame img { display: block; width: 184px; height: auto; }
.mfs-box { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.pay-Account-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.mfs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-btn { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.pill-btn:hover { border-color: var(--accent); }
.pill-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mobile-qr-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding-top: 2px; }
.link-inline { background: none; border: 0; padding: 0; color: var(--accent); font: 600 12.5px/1.4 var(--font); cursor: pointer; text-decoration: underline; }
.orders-list { display: grid; gap: 8px; }
.order-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; }
.order-row b { font-family: var(--mono); font-size: 13px; }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(9,9,11,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.modal-back[hidden] { display: none !important; }
.modal-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px; display: grid; gap: 14px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-head h3 { margin: 0; font-size: 18px; }