/* FrameFusion studio: pearl surfaces, quiet color and consistent interaction. */
:root {
  --bg-app:#faf7ff; --bg-main:transparent; --bg-sidebar:#fdfbff;
  --bg-active-nav:#f2ecff; --border-sidebar:#eee7f9; --border-card:#ece4f8;
  --text-main:#2f2149; --text-body:#4c3a6b; --text-muted:#776791;
  --blue-primary:#7a55d6; --blue-hover:#6a44c8; --border-input-focus:#a98bf0;
  --radius-md:12px; --radius-lg:18px;
  --shadow-card:0 4px 22px #363c6805; --shadow-hover:0 12px 30px #363c6810;
}
body {background:#faf7ff;color:#2f2149}
button,a,input,select,textarea {touch-action:manipulation}
button,a {transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
:where(button,a,input,select,textarea,[tabindex]):focus-visible {outline:3px solid #a98bf0;outline-offset:3px}
.skip-link {position:fixed;left:16px;top:-70px;z-index:10000;padding:12px 18px;background:#fff;border:2px solid #7a55d6;border-radius:10px;color:#3f2b63}
.skip-link:focus {top:12px}
.app-shell {background:radial-gradient(ellipse at 80% 0,#f2ecff 0,transparent 45%),#faf7ff}
.app-sidebar {width:244px;min-width:244px;padding:22px 14px;background:#fdfbff;border-color:#eee7f9}
.sidebar-header {padding:0 4px 18px;gap:4px}
.brand-logo-wrapper {background:transparent!important;width:36px;height:36px;flex-shrink:0}
.brand-logo-svg {width:36px;height:36px}
.brand-title-text {font-size:16px!important;letter-spacing:-.6px;color:#33254f}
.brand-container {gap:9px}
.workspace-selector-btn {border:1px solid #ece4f8!important;background:#fff!important;border-radius:12px!important;margin-top:6px}
.workspace-badge {background:#f4eeff!important;color:#5b4380!important;border-radius:8px}
.nav-section-title {font-size:9px;letter-spacing:1.6px;color:#8a7aa4;margin-top:23px!important;margin-bottom:8px}
.nav-link-item {min-height:40px;border-radius:10px;color:#706188;padding:10px 12px;gap:11px}
.nav-link-item:hover {background:#f6f0ff;color:#4a356b}
.nav-link-item.active {background:#f2ecff;color:#6a46c9;box-shadow:none;font-weight:700}
.nav-label {font-size:12px}.nav-icon {opacity:.85}.nav-badge-pill {background:#f1eaff;color:#7053b8}
.ff-account-button {margin:14px 0 2px;background:linear-gradient(110deg,#f7f1ff,#f7f2ff);border:1px solid #e9e0f6;padding:13px 15px;border-radius:12px}
.app-main {padding:0 36px 80px;max-width:1800px}
.studio-topbar {height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ece4f8;margin-bottom:34px}
.studio-breadcrumb {font-size:12px;color:#7f6f99}.studio-breadcrumb span {margin:0 12px;color:#a99abf}.studio-breadcrumb strong {font-weight:500;color:#4c3a6b}
.studio-assistant {display:flex;align-items:center;gap:8px;background:#ffffffb0;border:1px solid #e7ddf5;border-radius:99px;padding:10px 15px;color:#6f4fc4;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.studio-menu {display:none}.studio-eyebrow {font-size:10px;letter-spacing:2px;font-weight:700;color:#7e6b9a;margin-bottom:12px}
.view-header {margin-bottom:27px}.view-title {font-size:clamp(25px,2.6vw,36px);letter-spacing:-1.3px;font-weight:650;color:#31224b;line-height:1.2;margin-bottom:10px}
.view-subtitle {color:#74648d;font-size:13px;line-height:1.7;max-width:650px}
.search-controls-row {padding:8px;background:#fff;border:1px solid #e9e1f5;border-radius:15px;box-shadow:0 4px 18px #363c6804;margin-top:24px}
.search-input-wrapper {border:0;box-shadow:none;background:transparent;min-width:0}
.search-field {background:transparent;min-height:44px}
.btn-search-type {background:#f8f3ff;border-color:transparent;border-radius:9px;min-height:42px}
.btn-search-go {background:#7a55d6!important;border-radius:10px;min-height:36px;padding:8px 22px}
.filters-row {gap:8px;margin-bottom:24px}.filter-chip {border:1px solid #eae2f6;background:#ffffffa0;color:#706188;border-radius:9px;padding:8px 11px;font-size:11px}
.filter-chip:hover {border-color:#cdbcf0;background:#f6f0ff}
.btn-card-quick {border-radius:9px!important;box-shadow:none!important;min-height:36px}
.btn-card-quick[onclick="openBulkAnalyzeModal()"] {padding:9px 15px!important}
#btn-toggle-filters-sidebar {background:#f4edff!important;border-color:#e7ddf5!important;color:#6d5a8e!important}
.videos-filter-sidebar {background:#fdfbff;border:1px solid #eae2f6;border-radius:16px;padding:18px}
.video-card,.content-card-box,.lego-brick-card,.idea-detail-container {border-color:#ece4f8;border-radius:16px;box-shadow:0 4px 24px #34385c04}
.form-input-modern,.filter-range-input {border-color:#e7dff3;border-radius:9px}
.ff-dialog {border-radius:24px;border-color:#e9e1f5;padding:30px;box-shadow:0 24px 100px #3b2a5c22;font-family:inherit}
.ff-dialog::backdrop {background:#33264c45;backdrop-filter:blur(7px)}
.ff-plan-card {border-radius:17px;padding:24px}.ff-plan-card.pro {background:linear-gradient(140deg,#f6f0ff,#f7f2ff);border-color:#d4c4f2}
.ff-primary {background:#7a55d6;border-color:#7a55d6;border-radius:11px}.ff-primary:hover:not(:disabled) {background:#6a44c8}
.ff-chat-launcher {background:#fff;color:#6b4fc0;border:1px solid #e3d9f3;box-shadow:0 8px 30px #45345c16;border-radius:16px}
.ff-chat-launcher span {background:#f1e9ff;color:#7354c4}
.ff-chat {border-radius:22px;border-color:#e8e0f4;box-shadow:0 20px 80px #36284c20}
.ff-chat-header {background:linear-gradient(120deg,#f7f2ff,#f7f2ff)}
.ff-chat-message.user {background:#f1e9ff;color:#4f3d6b}.ff-chat-message.assistant {background:#faf7ff}
.ff-auth-page {background:radial-gradient(ellipse at 15% 15%,#f0e8ff,transparent 50%),radial-gradient(ellipse at 90% 85%,#f3ecff,transparent 50%),#fbf8ff}
.ff-auth-card {width:min(100%,460px);padding:42px;border-color:#ffffff;border-radius:28px;background:#ffffffdf;box-shadow:0 24px 90px #4c4b6f0c}
.ff-wordmark {display:flex;align-items:center;gap:8px;font-size:23px;letter-spacing:-.8px}.ff-wordmark img {margin-right:3px}
.ff-auth-card h1 {color:#33244e;font-weight:650}.ff-auth-card input {background:#fdfbff;border-radius:11px;padding:13px}
@media(max-width:1100px) {.app-main {padding-left:24px;padding-right:24px}.app-sidebar {width:218px;min-width:218px}.brand-title-text {font-size:14px!important}.studio-assistant span {display:none}}
@media(max-width:760px) {
  .app-main {padding:0 18px 95px;width:100%}.studio-topbar {height:66px;margin-bottom:27px;position:sticky;top:0;background:#faf7fff5;z-index:40}
  .studio-menu {display:block;border:1px solid #e8e0f4;background:#fff;border-radius:10px;width:40px;height:40px;color:#5d4b75;font-size:20px;cursor:pointer}
  .studio-breadcrumb {flex:1;font-size:11px}.studio-breadcrumb span {margin:0 6px}.studio-assistant {padding:10px;font-size:18px;width:40px;justify-content:center}
  .app-sidebar,.app-sidebar.collapsed {display:none}
  .app-sidebar.mobile-open,.app-sidebar.mobile-open.collapsed {display:flex;position:fixed;left:12px;top:72px;height:calc(100dvh - 90px);width:260px!important;min-width:260px!important;max-width:260px!important;border:1px solid #e9e1f5;border-radius:18px;box-shadow:0 16px 60px #32274d35;z-index:100}
  .app-sidebar.mobile-open .nav-label,.app-sidebar.mobile-open .brand-title-group,.app-sidebar.mobile-open .nav-section-title,.app-sidebar.mobile-open .workspace-selector-btn,.app-sidebar.mobile-open .ff-account-button span {display:block!important;opacity:1;width:auto}
  .app-sidebar.mobile-open .nav-link-item {justify-content:flex-start;padding:10px 12px}.app-sidebar.mobile-open .brand-container {display:flex}.app-sidebar.mobile-open #btn-toggle-sidebar {display:none}
  .view-title {font-size:28px}.search-controls-row {gap:4px;padding:7px}.search-type-pill {max-width:100%}.search-input-wrapper {width:100%}.search-field {font-size:13px}.filters-row {gap:6px}.filter-chip {font-size:10px}
  .videos-view-container {flex-direction:column}.videos-filter-sidebar {width:100%;min-width:0}.ff-dialog {padding:22px}.ff-auth-page {padding:18px}.ff-auth-card {padding:28px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.btn-search-go,.btn-search-go:hover {color:#fff}
/* Amethyst-crystal finish for filled studio actions: a faceted amethyst gradient,
   polished rim light, a soft top gloss and a travelling specular gleam. The
   highlights are painted into the background so text stays crisp at every size. */
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix) {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff !important;
  border:1px solid rgba(240,230,255,.82) !important;
  background:
    radial-gradient(circle at 15% 24%,#ffffff 0 .8px,transparent 2.4px),
    radial-gradient(circle at 76% 20%,#ffffffd9 0 .7px,transparent 2.1px),
    radial-gradient(circle at 62% 74%,#ffffff8c 0 .6px,transparent 1.8px),
    radial-gradient(circle at 28% 82%,#ffffff52 0 .6px,transparent 1.6px),
    linear-gradient(180deg,#ffffff94 0%,#ffffff33 34%,#ffffff0a 50%,transparent 54%),
    linear-gradient(152deg,#b79bff 0%,#9573f2 30%,#7a53de 62%,#5b35bd 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffffe6,
    inset 1px 0 0 #ffffff47,
    inset 0 -1px 0 #2d125e80,
    0 1px 1px #2a125826,
    0 6px 18px -6px #5c34be8c,
    0 0 20px #966eff2e !important;
  text-shadow:0 1px 1px #2d125e80;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease!important;
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix)::after {
  content:"";
  position:absolute;
  inset:-120% auto -120% -60%;
  width:34%;
  transform:rotate(22deg) translateX(-180%);
  background:linear-gradient(90deg,transparent,#ffffff8c,transparent);
  pointer-events:none;
  transition:transform .6s ease;
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix):hover:not(:disabled) {
  color:#fff!important;
  border-color:#ffffff !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 1px 0 0 #ffffff5c,
    inset 0 -1px 0 #2d125e80,
    0 2px 2px #2a12581f,
    0 10px 26px -8px #673ccda6,
    0 0 28px #a078ff47 !important;
  filter:brightness(1.07) saturate(1.04);
  transform:translateY(-1px);
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix):hover:not(:disabled)::after {
  transform:rotate(22deg) translateX(620%);
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix):active:not(:disabled) {
  transform:translateY(1px);
  filter:brightness(.98);
  box-shadow:
    inset 0 3px 10px #240c5059,
    inset 0 1px 0 #ffffff59,
    0 2px 8px #5c34be4d !important;
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix):focus-visible {
  outline:3px solid #c4a6ff;
  outline-offset:3px;
}
:is(.studio-action-gloss,.btn-primary-blue,.btn-search-go,.ff-primary,.btn-save-filters,.btn-script-send-chat,.btn-agent-send,.gap-concept-btn-remix):disabled {
  opacity:.5;
  filter:saturate(.7);
  box-shadow:inset 0 1px 0 #ffffff59!important;
  cursor:not-allowed;
}
.brand-title-text {color:#33254f!important}
.studio-empty {grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px;background:#ffffff85;border:1px dashed #e7def4;border-radius:20px;gap:14px;margin-top:6px}
.studio-empty img {margin-bottom:5px}.studio-empty h2 {font-size:20px;font-weight:600;letter-spacing:-.5px;color:#3a2a55}.studio-empty p {max-width:390px;color:#7c6b96;font-size:13px;line-height:1.8}.studio-empty button {margin-top:8px;font-size:12px;color:#6d51b8;border-color:#e5dcf2}
@media(max-width:760px) {.studio-empty {padding:34px 20px}.studio-empty h2 {font-size:18px}.app-sidebar.mobile-open .workspace-selector-btn {display:flex!important}.app-sidebar.mobile-open .sidebar-header {flex-direction:row;justify-content:flex-start}.app-sidebar.mobile-open .brand-container {opacity:1!important;visibility:visible!important}}
.workspace-brand-logo {flex-shrink:0}
@media(max-width:760px) {
  .app-sidebar.mobile-open #lbl-workspace-name {display:inline!important}
  .app-sidebar.mobile-open .workspace-selector-btn {justify-content:space-between}
}