/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/components/layout/TopNav.module.css ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .TopNav_root__HYxWt { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 1px solid var(--surface-border); background: var(--surface-base); position: sticky; top: 0; z-index: 10; } .TopNav_leftGroup__R3IsV { display: flex; align-items: center; gap: 28px; } .TopNav_brand__3K5mr { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; } .TopNav_brandLink__w5CJ5 { color: inherit; text-decoration: none; } .TopNav_brandLink__w5CJ5:hover { opacity: 0.8; } .TopNav_primaryNav__HkqRA { display: flex; align-items: center; gap: 20px; } .TopNav_navLink__C23NC { font-size: 14px; font-weight: 600; color: var(--color-muted); text-decoration: none; transition: color 160ms ease; } .TopNav_navLink__C23NC:hover, .TopNav_navLink__C23NC:focus { color: var(--color-foreground); } .TopNav_actions__xaEtu { display: flex; align-items: center; gap: 18px; } .TopNav_authCluster___aMFB { display: inline-flex; align-items: center; gap: 10px; } .TopNav_accountLink__B_6sr { font-size: 13px; color: var(--color-foreground); text-decoration: none; font-weight: 600; } .TopNav_logoutButton__anb2Q { border: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; background: transparent; color: var(--color-muted); cursor: pointer; border: 1px solid var(--surface-border); } .TopNav_balancePill__CM85K { border-radius: 999px; padding: 8px 18px; background: var(--surface-subtle); font-size: 13px; font-weight: 600; color: var(--color-foreground); } .TopNav_searchButton__FD8ds { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--surface-border); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-muted); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .TopNav_searchButton__FD8ds:hover { background: var(--surface-subtle); color: var(--color-foreground); border-color: rgba(82, 120, 255, 0.35); } .TopNav_loginButton__2VWbv { border: none; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 14px; background: var(--surface-subtle); color: var(--color-foreground); cursor: pointer; transition: transform 150ms ease, background 150ms ease, color 150ms ease; } .TopNav_loginButton__2VWbv:hover { transform: translateY(-1px); background: var(--surface-border); } @media (max-width: 992px) { .TopNav_primaryNav__HkqRA { display: none; } .TopNav_leftGroup__R3IsV { gap: 16px; } } @media (max-width: 768px) { .TopNav_root__HYxWt { padding: 14px 20px; } .TopNav_actions__xaEtu { gap: 12px; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/components/shared/ThemeToggle.module.css ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .ThemeToggle_root__klYi4 { position: relative; width: 48px; height: 26px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--surface-subtle); display: inline-flex; align-items: center; padding: 3px; transition: background 160ms ease, border-color 160ms ease; } .ThemeToggle_thumb__Lg5Fq { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-base); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); transform: translateX(0); transition: transform 160ms ease, background 160ms ease; display: flex; align-items: center; justify-content: center; color: var(--color-foreground); } .ThemeToggle_thumbDark__i_zC0 { transform: translateX(22px); background: rgba(231, 236, 255, 0.92); box-shadow: 0 6px 18px rgba(8, 11, 32, 0.35); } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/components/shared/LanguageDropdown.module.css ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .LanguageDropdown_root__h6Xqg { position: relative; } .LanguageDropdown_trigger__z6oT1 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--surface-base); color: var(--color-foreground); font-weight: 600; font-size: 13px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .LanguageDropdown_trigger__z6oT1:hover { border-color: rgba(96, 130, 255, 0.35); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); } .LanguageDropdown_menu__DRrsl { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 10px; border-radius: 16px; background: var(--surface-base); border: 1px solid var(--surface-border); box-shadow: 0 18px 38px rgba(6, 10, 24, 0.16); display: grid; gap: 4px; z-index: 20; max-height: 280px; /* fits 7 items (~40px each) before scroll */ overflow-y: auto; overscroll-behavior: contain; } .LanguageDropdown_item__iY3oe { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--color-foreground); text-decoration: none; transition: background 140ms ease, color 140ms ease; } .LanguageDropdown_item__iY3oe:hover { background: var(--surface-subtle); } .LanguageDropdown_active__andNd { background: rgba(96, 130, 255, 0.16); } .LanguageDropdown_caret__9Tphv { width: 10px; height: 10px; border-left: 1px solid var(--color-muted); border-bottom: 1px solid var(--color-muted); transform: rotate(-45deg); margin-top: -2px; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.10_@playwright+te_e4de2380d9d52048315c33daba9abc1c/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/features/nano-banana/NanoBananaWorkbench.module.css ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .NanoBananaWorkbench_page__UPwKZ { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #f6f9ff 0%, #eef2ff 100%); color: #0f172a; font-family: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .NanoBananaWorkbench_page__UPwKZ body { background: transparent; } .NanoBananaWorkbench_main__12Olh { flex: 1; display: grid; grid-template-columns: 220px minmax(320px, 360px) minmax(240px, 280px) minmax(900px, 1fr); gap: 28px; padding: 48px 64px 72px; max-width: 1820px; width: 100%; margin: 0 auto; align-items: start; grid-auto-rows: auto; } .NanoBananaWorkbench_sidebar___AV4R { background: #ffffff; border-radius: 24px; border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08); padding: 28px 26px 32px; display: flex; flex-direction: column; gap: 18px; } .NanoBananaWorkbench_sidebarTitle__2kDij { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(15, 23, 42, 0.82); } .NanoBananaWorkbench_menu__wFOx1 { display: flex; flex-direction: column; gap: 10px; } .NanoBananaWorkbench_menuSection__Hj9UA { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(71, 85, 105, 0.7); } .NanoBananaWorkbench_menuItem__mZAzb { border: none; border-radius: 16px; background: transparent; color: rgba(71, 85, 105, 0.92); padding: 12px 14px; text-align: left; font-weight: 600; cursor: pointer; transition: color 160ms ease, background 160ms ease; } .NanoBananaWorkbench_menuItem__mZAzb:hover { color: #2563eb; background: rgba(37, 99, 235, 0.12); } .NanoBananaWorkbench_menuItemActive__nYaA2 { color: #1f40ff; background: transparent; } .NanoBananaWorkbench_generatorColumn__HcycL, .NanoBananaWorkbench_promoColumn__5kjyw, .NanoBananaWorkbench_historyColumn__AE8Dh { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; min-height: 0; } .NanoBananaWorkbench_historyColumn__AE8Dh { min-width: calc(3 * 280px + 2 * 28px); } .NanoBananaWorkbench_promoColumn__5kjyw { justify-content: flex-start; } .NanoBananaWorkbench_promoPlaceholder__aVi9Y { width: 100%; height: 0; visibility: hidden; pointer-events: none; } .NanoBananaWorkbench_modelPanel__4bfdk { background: #ffffff; border-radius: 28px; border: 1px solid rgba(120, 147, 255, 0.18); box-shadow: 0 28px 60px rgba(15, 23, 42, 0.08); padding: 34px 32px; display: flex; flex-direction: column; gap: 24px; } .NanoBananaWorkbench_formLayout__6xrgP { display: flex; flex-direction: column; gap: 24px; } .NanoBananaWorkbench_formPrimary__zYr8c { display: flex; flex-direction: column; gap: 24px; } .NanoBananaWorkbench_fieldStack__kHSgg { display: flex; flex-direction: column; gap: 18px; } .NanoBananaWorkbench_seedreamGrid__FjERZ, .NanoBananaWorkbench_seedreamGridSecondary__U9mIR { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .NanoBananaWorkbench_promoCard__3R3D3 { display: flex; flex-direction: column; gap: 14px; border-radius: 26px; border: 1px solid rgba(148, 163, 184, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 239, 255, 0.94) 100%); box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12); padding: 26px 24px; } .NanoBananaWorkbench_promoCard__3R3D3 h3 { margin: 0; font-size: 22px; font-weight: 700; color: rgba(15, 23, 42, 0.94); } .NanoBananaWorkbench_promoCard__3R3D3 p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(71, 85, 105, 0.88); } .NanoBananaWorkbench_promoCard__3R3D3 ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; color: rgba(51, 65, 85, 0.92); list-style: disc; } .NanoBananaWorkbench_formGroup__wBY71 { display: flex; flex-direction: column; gap: 10px; } .NanoBananaWorkbench_formGroup__wBY71[data-disabled="true"] { opacity: 0.45; pointer-events: none; } .NanoBananaWorkbench_formGroup__wBY71 > label { font-size: 13px; font-weight: 600; color: rgba(15, 23, 42, 0.9); } .NanoBananaWorkbench_textarea__Q5_yW { min-height: 160px; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.32); background: rgba(248, 250, 255, 0.92); padding: 16px 18px; font-size: 14px; line-height: 1.55; color: rgba(15, 23, 42, 0.96); resize: none; transition: border 160ms ease, box-shadow 160ms ease; } .NanoBananaWorkbench_textarea__Q5_yW:focus-visible { outline: none; border-color: rgba(79, 107, 255, 0.55); box-shadow: 0 0 0 4px rgba(79, 107, 255, 0.18); } .NanoBananaWorkbench_promptHint__Dm03C { font-size: 12px; color: rgba(71, 85, 105, 0.75); } .NanoBananaWorkbench_select__ON9bS, .NanoBananaWorkbench_input__w_eiq { border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.32); background: rgba(248, 250, 255, 0.92); padding: 12px 14px; font-size: 14px; color: rgba(15, 23, 42, 0.94); transition: border 160ms ease, box-shadow 160ms ease; } .NanoBananaWorkbench_select__ON9bS:focus-visible, .NanoBananaWorkbench_input__w_eiq:focus-visible { outline: none; border-color: rgba(79, 107, 255, 0.55); box-shadow: 0 0 0 4px rgba(79, 107, 255, 0.18); } .NanoBananaWorkbench_labelWithInfo__aDjah { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .NanoBananaWorkbench_tooltipTrigger__oaTAw { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(79, 107, 255, 0.18); color: rgba(79, 107, 255, 0.95); font-size: 12px; font-weight: 700; cursor: help; position: relative; } .NanoBananaWorkbench_tooltipBubble__L00gb { position: absolute; bottom: calc(100% + 12px); right: 0; width: clamp(220px, 28vw, 320px); padding: 12px; border-radius: 14px; background: #ffffff; color: rgba(15, 23, 42, 0.92); box-shadow: 0 26px 48px rgba(15, 23, 42, 0.18); font-size: 12px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease; z-index: 40; } .NanoBananaWorkbench_tooltipTrigger__oaTAw:hover .NanoBananaWorkbench_tooltipBubble__L00gb, .NanoBananaWorkbench_tooltipTrigger__oaTAw:focus-visible .NanoBananaWorkbench_tooltipBubble__L00gb { opacity: 1; transform: translateY(0); } .NanoBananaWorkbench_uploadList__3HQS_ { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .NanoBananaWorkbench_uploadCell__KjU8u { position: relative; border: 1px dashed rgba(120, 147, 255, 0.32); border-radius: 16px; padding: 12px 16px; width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: rgba(248, 250, 255, 0.86); text-align: center; cursor: pointer; color: rgba(71, 85, 105, 0.82); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; min-height: 60px; } .NanoBananaWorkbench_uploadCell__KjU8u[data-filled="true"] { border-style: solid; min-height: 160px; align-items: stretch; } .NanoBananaWorkbench_uploadCell__KjU8u:hover { border-color: rgba(99, 102, 241, 0.5); background: rgba(255, 255, 255, 0.96); transform: translateY(-1px); } .NanoBananaWorkbench_uploadCell__KjU8u input { display: none; } .NanoBananaWorkbench_uploadHint__PMy46 { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .NanoBananaWorkbench_uploadHint__PMy46 strong { font-size: 13px; color: rgba(15, 23, 42, 0.92); } .NanoBananaWorkbench_previewWrapper__K8T3K { display: flex; flex-direction: column; gap: 10px; } .NanoBananaWorkbench_previewImage__4Nt_T { width: 100%; border-radius: 14px; -o-object-fit: cover; object-fit: cover; max-height: 220px; background: rgba(226, 232, 240, 0.6); } .NanoBananaWorkbench_previewMeta__XQ5w4 { display: flex; justify-content: space-between; font-size: 12px; color: rgba(71, 85, 105, 0.78); } .NanoBananaWorkbench_previewActions__vDUjY { display: flex; justify-content: flex-end; } .NanoBananaWorkbench_removeButton__p3GiA { border: none; background: none; color: rgba(79, 107, 255, 0.96); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; } .NanoBananaWorkbench_removeButton__p3GiA:hover { text-decoration: underline; } .NanoBananaWorkbench_generateButton__mMvP_ { border: none; border-radius: 999px; padding: 14px 0; font-size: 15px; font-weight: 700; color: #ffffff; cursor: pointer; background: linear-gradient(90deg, #5f6bff 0%, #9a6bff 100%); box-shadow: 0 22px 36px rgba(100, 107, 255, 0.32); transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .NanoBananaWorkbench_generateButton__mMvP_:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } .NanoBananaWorkbench_generateButton__mMvP_:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 28px 48px rgba(100, 107, 255, 0.4); } .NanoBananaWorkbench_statusMessage__1T7aH { margin: 0; font-size: 13px; color: rgba(37, 99, 235, 0.9); } .NanoBananaWorkbench_errorMessage__KZqaw { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(248, 113, 113, 0.14); color: rgba(185, 28, 28, 0.94); font-size: 13px; font-weight: 600; } .NanoBananaWorkbench_historyColumn__AE8Dh { gap: 28px; } .NanoBananaWorkbench_historySection__FdFIb { display: flex; flex-direction: column; gap: 24px; padding: 0; } .NanoBananaWorkbench_historyGrid__aAHBq { -moz-column-width: 280px; column-width: 280px; -moz-column-gap: 28px; column-gap: 28px; } .NanoBananaWorkbench_historyGrid__aAHBq[data-empty="true"] { -moz-column-width: 280px; column-width: 280px; } .NanoBananaWorkbench_historyItem__xL_mf { display: flex; flex-direction: column; background: #ffffff; border-radius: 26px; box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12); width: 100%; -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: 28px; transition: transform 160ms ease, box-shadow 200ms ease; } .NanoBananaWorkbench_historyItem__xL_mf:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.16); } .NanoBananaWorkbench_historyMedia__N8yC0 { position: relative; overflow: hidden; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); line-height: 0; } .NanoBananaWorkbench_historyPreviewButton__mvXSN { display: block; width: 100%; border: none; padding: 0; background: none; cursor: zoom-in; } .NanoBananaWorkbench_historyImage__KGdzr { display: block; width: 100%; height: auto; } .NanoBananaWorkbench_historyPlaceholder__xkAzp { width: 100%; padding: 36px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; min-height: 220px; color: rgba(15, 23, 42, 0.88); background: linear-gradient(180deg, rgba(226, 232, 240, 0.7) 0%, rgba(241, 245, 249, 0.7) 100%); } .NanoBananaWorkbench_historyPlaceholderTitle__neHdW { margin: 0; font-size: 14px; font-weight: 600; color: rgba(15, 23, 42, 0.92); } .NanoBananaWorkbench_historyProgressCircle__2ZmS_ { width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.12); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: rgba(30, 64, 175, 0.92); box-shadow: inset 0 6px 18px rgba(59, 130, 246, 0.2); } .NanoBananaWorkbench_historyErrorIcon__om96I { width: 36px; height: 36px; color: #fb923c; } .NanoBananaWorkbench_historyMeta__OHcQ3 { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; } .NanoBananaWorkbench_historyMetaActions__kV_uy { display: flex; justify-content: flex-end; } .NanoBananaWorkbench_historyPrompt__Xg9vD { margin: 0; font-size: 15px; font-weight: 600; color: rgba(15, 23, 42, 0.95); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; } .NanoBananaWorkbench_historySubline___c2Jw { margin: 0; font-size: 12px; color: rgba(100, 116, 139, 0.82); } .NanoBananaWorkbench_historyProgress__9wRHU { display: flex; flex-direction: column; gap: 8px; } .NanoBananaWorkbench_historyProgressLabelRow__vF15i { display: flex; justify-content: space-between; font-size: 12px; color: rgba(100, 116, 139, 0.82); } .NanoBananaWorkbench_historyProgressBar__OLYn4 { width: 100%; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.3); overflow: hidden; } .NanoBananaWorkbench_historyProgressFill__ZZQmv { height: 100%; background: linear-gradient(90deg, rgba(79, 107, 255, 0.85), rgba(160, 119, 255, 0.85)); border-radius: inherit; transition: width 260ms ease; } .NanoBananaWorkbench_historyErrorMessage__rP6qF { margin: 0; font-size: 12px; color: #ef4444; line-height: 1.4; } .NanoBananaWorkbench_historyMenu__o4Wp3 { position: relative; } .NanoBananaWorkbench_historyMenuTrigger__VbTht { border: none; background: rgba(15, 23, 42, 0.06); color: rgba(30, 41, 59, 0.78); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms ease, transform 160ms ease, color 160ms ease; } .NanoBananaWorkbench_historyMenuTrigger__VbTht:hover { background: rgba(15, 23, 42, 0.12); color: rgba(15, 23, 42, 0.92); transform: translateY(-2px); } .NanoBananaWorkbench_historyMenuTrigger__VbTht:disabled { opacity: 0.45; cursor: default; transform: none; } .NanoBananaWorkbench_historyMenuList__uQ_uX { position: absolute; bottom: calc(100% + 12px); right: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.28); box-shadow: 0 28px 54px rgba(15, 23, 42, 0.22); min-width: 220px; z-index: 60; } .NanoBananaWorkbench_historyMenuItem__p34fV { border: none; background: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: rgba(15, 23, 42, 0.92); border-radius: 12px; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .NanoBananaWorkbench_historyMenuItem__p34fV:hover { background: rgba(226, 232, 240, 0.7); color: rgba(30, 41, 59, 0.92); } .NanoBananaWorkbench_historyMenuItemDanger__dj4AE { color: #ef4444; } .NanoBananaWorkbench_historyMenuItemDanger__dj4AE:hover { background: rgba(254, 226, 226, 0.86); color: #b91c1c; } .NanoBananaWorkbench_loadMoreTrigger__4xGM4 { width: 100%; height: 20px; -moz-column-break-inside: avoid; break-inside: avoid; } .NanoBananaWorkbench_placeholderCard__dGMko { display: flex; flex-direction: column; gap: 8px; background: #ffffff; border-radius: 24px; overflow: hidden; box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12); -moz-column-break-inside: avoid; break-inside: avoid; width: 100%; margin-bottom: 24px; } .NanoBananaWorkbench_placeholderCard__dGMko img { width: 100%; height: 160px; -o-object-fit: cover; object-fit: cover; } .NanoBananaWorkbench_placeholderCard__dGMko figcaption { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; font-size: 12px; color: rgba(15, 23, 42, 0.82); } .NanoBananaWorkbench_placeholderCard__dGMko small { color: rgba(71, 85, 105, 0.7); } .NanoBananaWorkbench_contentCard__vnTs_ { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(232, 239, 255, 0.94) 100%); border-radius: 26px; border: 1px solid rgba(120, 147, 255, 0.16); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; } .NanoBananaWorkbench_contentTag__B4oIY { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: rgba(79, 107, 255, 0.94); } .NanoBananaWorkbench_contentCard__vnTs_ h1 { margin: 0; font-size: 24px; color: rgba(15, 23, 42, 0.94); } .NanoBananaWorkbench_contentCard__vnTs_ p { margin: 0; line-height: 1.55; color: rgba(71, 85, 105, 0.88); } .NanoBananaWorkbench_contentList__Uy89I { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: rgba(51, 65, 85, 0.92); } .NanoBananaWorkbench_modalOverlay__eEveX { position: fixed; inset: 0; background: rgba(3, 6, 23, 0.64); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 120; } .NanoBananaWorkbench_modal__ETMVw { width: min(700px, 94vw); max-height: 90vh; background: rgba(255, 255, 255, 0.97); border-radius: 28px; border: 1px solid rgba(120, 147, 255, 0.22); box-shadow: 0 36px 84px rgba(15, 23, 42, 0.22); display: flex; flex-direction: column; } .NanoBananaWorkbench_modalHeader__Rz5HS { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 28px 28px 0; } .NanoBananaWorkbench_modalHeader__Rz5HS h3 { margin: 0; font-size: 20px; font-weight: 700; } .NanoBananaWorkbench_modalHeader__Rz5HS p { margin: 6px 0 0; font-size: 13px; color: rgba(71, 85, 105, 0.78); line-height: 1.5; } .NanoBananaWorkbench_modalCloseButton__46koN { border: none; background: rgba(82, 118, 255, 0.16); color: rgba(15, 23, 42, 0.92); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .NanoBananaWorkbench_modalCloseButton__46koN:hover { background: rgba(82, 118, 255, 0.26); transform: rotate(90deg); } .NanoBananaWorkbench_modalBody__6vAVj { padding: 24px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .NanoBananaWorkbench_modalFooter__nexDv { padding: 18px 28px 28px; border-top: 1px solid rgba(120, 147, 255, 0.16); } .NanoBananaWorkbench_modalFooterActions__OTEHW { display: flex; justify-content: flex-end; gap: 14px; } .NanoBananaWorkbench_modalPrimaryButton__F4DyS, .NanoBananaWorkbench_modalSecondaryButton__cS95v, .NanoBananaWorkbench_modalDangerButton__NzYI8 { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 22px; border: none; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; } .NanoBananaWorkbench_modalPrimaryButton__F4DyS { background: linear-gradient(90deg, rgba(79, 107, 255, 0.95), rgba(160, 119, 255, 0.95)); color: #ffffff; } .NanoBananaWorkbench_modalPrimaryButton__F4DyS:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(79, 107, 255, 0.28); } .NanoBananaWorkbench_modalSecondaryButton__cS95v { border: 1px solid rgba(82, 118, 255, 0.28); background: rgba(82, 118, 255, 0.12); color: rgba(15, 23, 42, 0.9); } .NanoBananaWorkbench_modalSecondaryButton__cS95v:hover { background: rgba(82, 118, 255, 0.2); box-shadow: 0 12px 24px rgba(82, 118, 255, 0.18); } .NanoBananaWorkbench_modalDangerButton__NzYI8 { background: linear-gradient(90deg, rgba(239, 68, 68, 0.92), rgba(249, 115, 22, 0.92)); color: #ffffff; } .NanoBananaWorkbench_modalDangerButton__NzYI8:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(239, 68, 68, 0.28); } .NanoBananaWorkbench_modalLabel__vgfON { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 13px; color: rgba(15, 23, 42, 0.9); } .NanoBananaWorkbench_modalSelect__Z3wi4 { border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(248, 250, 255, 0.92); padding: 10px 12px; font-size: 14px; color: rgba(15, 23, 42, 0.94); } .NanoBananaWorkbench_modalBodyText__pxZu7 { margin: 0; font-size: 13px; color: rgba(51, 65, 85, 0.9); line-height: 1.55; } .NanoBananaWorkbench_previewModalContent__MLXEf { display: flex; flex-direction: column; gap: 18px; } .NanoBananaWorkbench_previewImageLarge__ITebh { width: 100%; max-height: 70vh; -o-object-fit: contain; object-fit: contain; border-radius: 18px; background: rgba(15, 23, 42, 0.12); } .NanoBananaWorkbench_previewEmpty___WuVf { padding: 24px 0; font-size: 13px; color: rgba(71, 85, 105, 0.8); text-align: center; } .NanoBananaWorkbench_previewThumbnails__d0BvN { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .NanoBananaWorkbench_previewThumbButton__sk4Rs { border: 2px solid transparent; border-radius: 12px; width: 72px; height: 72px; overflow: hidden; cursor: pointer; padding: 0; background: none; position: relative; } .NanoBananaWorkbench_previewThumbButton__sk4Rs img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .NanoBananaWorkbench_previewThumbActive__vDKiK { border-color: rgba(79, 107, 255, 0.85); box-shadow: 0 10px 20px rgba(79, 107, 255, 0.22); } .NanoBananaWorkbench_shareList__sMNrJ { display: flex; flex-direction: column; gap: 12px; } .NanoBananaWorkbench_shareOption__jrT7Q { border: 1px solid rgba(82, 118, 255, 0.16); background: rgba(82, 118, 255, 0.08); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: rgba(15, 23, 42, 0.92); transition: background 160ms ease, transform 160ms ease; } .NanoBananaWorkbench_shareOption__jrT7Q:hover { background: rgba(82, 118, 255, 0.16); transform: translateY(-1px); } .NanoBananaWorkbench_sharePreview__AuCTt { border-radius: 16px; overflow: hidden; border: 1px solid rgba(82, 118, 255, 0.18); } .NanoBananaWorkbench_sharePreview__AuCTt img { width: 100%; display: block; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1100px) { .NanoBananaWorkbench_main__12Olh { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 24px 56px; } .NanoBananaWorkbench_sidebar___AV4R { flex-direction: row; align-items: center; gap: 24px; } .NanoBananaWorkbench_menu__wFOx1 { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .NanoBananaWorkbench_seedreamGrid__FjERZ, .NanoBananaWorkbench_seedreamGridSecondary__U9mIR { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .NanoBananaWorkbench_generatorColumn__HcycL, .NanoBananaWorkbench_promoColumn__5kjyw, .NanoBananaWorkbench_historyColumn__AE8Dh { grid-column: 1 / -1; } .NanoBananaWorkbench_historyColumn__AE8Dh { min-width: 0; } .NanoBananaWorkbench_historyGrid__aAHBq { -moz-column-width: 240px; column-width: 240px; } .NanoBananaWorkbench_historyGrid__aAHBq[data-empty="true"] { -moz-column-width: 240px; column-width: 240px; } } @media (max-width: 640px) { .NanoBananaWorkbench_modelPanel__4bfdk, .NanoBananaWorkbench_contentCard__vnTs_ { padding: 24px 20px; } .NanoBananaWorkbench_historyGrid__aAHBq, .NanoBananaWorkbench_historyGrid__aAHBq[data-empty="true"] { -moz-column-width: 100%; column-width: 100%; } .NanoBananaWorkbench_historyColumn__AE8Dh { min-width: 0; } .NanoBananaWorkbench_formLayout__6xrgP { gap: 20px; } .NanoBananaWorkbench_seedreamGrid__FjERZ, .NanoBananaWorkbench_seedreamGridSecondary__U9mIR, .NanoBananaWorkbench_uploadList__3HQS_ { grid-template-columns: minmax(0, 1fr); } .NanoBananaWorkbench_modalBody__6vAVj, .NanoBananaWorkbench_modalFooter__nexDv { padding-inline: 20px; } .NanoBananaWorkbench_promoCard__3R3D3 { max-width: none; padding: 22px 20px; } }